html{
 background: url(../images/bg.gif) repeat;
 font-size:62.5%;
 font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
}
.section{
 min-width:980px;
}

#fp-nav{
 top:40px;
 position:absolute;
}
#fp-nav ul{
 list-style-type:none;
}
#fp-nav ul li{
 float:left;
 margin-right:30px;
}
#fp-nav ul li a{
 height:28px;
 display:block;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 transition-duration: 0.3s;
}
#fp-nav ul li:nth-child(1) a:hover{ background-position: 0 bottom;}
#fp-nav ul li:nth-child(1) a{
 background:url(../images/nav.png) no-repeat 0 0;
 width:38px;
}
#fp-nav ul li:nth-child(2) a:hover{ background-position: -63px bottom;}
#fp-nav ul li:nth-child(2) a{
 background:url(../images/nav.png) no-repeat -63px 0;
 width:73px;
}
#fp-nav ul li:nth-child(3) a:hover{ background-position: -161px bottom;}
#fp-nav ul li:nth-child(3) a{
 background:url(../images/nav.png) no-repeat -161px 0;
 width:67px;
}
#fp-nav ul li:nth-child(4) a:hover{ background-position: -259px bottom;}
#fp-nav ul li:nth-child(4) a{
 background:url(../images/nav.png) no-repeat -259px 0;
 width:90px;
}
#fp-nav ul li:nth-child(5) a:hover{ background-position: -376px bottom;}
#fp-nav ul li:nth-child(5) a{
 background:url(../images/nav.png) no-repeat -376px 0;
 width:51px;
}
#fp-nav ul li:nth-child(6) a:hover{ background-position: -457px bottom;}
#fp-nav ul li:nth-child(6) a{
 background:url(../images/nav.png) no-repeat -457px 0;
 width:89px;
}

#fp-nav ul li a span{
 display:none;
}


/*
section1
----------------------------------*/
#section1 .main-bg{
 width:30vw;
 height:48vw;
 position:absolute;
 top:0;
 right:0;
}
#section1 .title{
 width:980px;
 margin: -10% auto 0;
}
#section1 .title h1{
 background: url(../images/main-title.png) no-repeat;
 background-size:50vw 10vw;
 width:50vw;
 height:10vw;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
}
#section1 .title-sub{
 width:100%;
 background:#ffac0c;
 padding:15px 0;
 box-sizing:border-box;
}
#section1 .title-sub h2{
 width:980px;
 margin: 0 auto;
 color:#fff;
 font-size:1.8rem;
}
#section1 .txt{
 width:980px;
 margin: 20px auto 0;
 font-size:2.8rem;
}
#section1 .txt span{
 color:#ffac0c;
}

#section1 .scroll{
 background: url(../images/icon-scroll.png) no-repeat;
 display:block;
 width:62px;
 height:63px;
 bottom:10%;
 left:48%;
 position:absolute;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 transition-duration: 0.3s;
}
#section1 .scroll:hover{
 opacity:0.7;
}

/*
section2
----------------------------------*/
#section2 .fp-tableCell {
 display:inline-block;
}

#section2 .title{
 width:100%;
 height:50px;
 background:#ffac0c;
 position:absolute;
 top:0;
}
#section2 .title-sub-bg{
 width:100%;
 position:absolute;
 top:0;
}
#section2 .title-sub{
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 80px 0;
}
#section2 .title-sub:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background: #ffac0c;
  transform-origin: left center;
  transform: rotate(-4deg);
  z-index: -1;}



#section2 .title-main{
 margin: 0 auto;
 padding:0;
 position:relative;
 width:980px;
 height:100px;
 z-index:9999;
 margin-top:30px;
}
#section2 .title-main h2{
 background: url(../images/about-title.png) no-repeat;
 width:129px;
 height:44px;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 position:absolute;
 top:0;
 left:0;
 margin:0;
}
#section2 .content{
 width:980px;
 margin: 4% auto 0;
 overflow:hidden;
}
#section2 .content .left{
 width:440px;
 float:left;
}
#section2 .content .left .title01{
 background:url(../images/about-icon01.png) no-repeat;
 padding-left:60px;
 font-size:2.4rem;
 min-height:36px;
 font-weight:bold;
 margin:0 0 10px 0;
}
#section2 .content .left .title02{
 background:url(../images/about-icon02.png) no-repeat;
 padding-left:60px;
 font-size:2.4rem;
 min-height:38px;
 font-weight:bold;
 margin:0;
}
#section2 .content .left p{
 font-size:1.4rem;
 line-height:2.4rem;
 padding-left:60px;
 margin:0 0 20px 0;
}
#section2 .content .left p.sub{
 font-size:1.0rem;
 line-height:1.2rem;
 margin-bottom:10px;
}
#section2 .content .right{
 width:500px;
 float:right;
}





/*
section3
----------------------------------*/
#section3 .fp-tableCell {
 display:inline-block;
}

#section3 .title{
 width:100%;
 height:50px;
 background:#ffac0c;
 position:absolute;
 top:0;
}
#section3 .title-sub-bg{
 width:100%;
 position:absolute;
 top:0;
}
#section3 .title-sub{
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 80px 0;
}
#section3 .title-sub:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background: #ffac0c;
  transform-origin: left center;
  transform: rotate(-4deg);
  z-index: -1;}
#section3 .title-main{
 margin: 0 auto;
 padding:0;
 position:relative;
 width:980px;
 height:100px;
 z-index:9999;
 margin-top:30px;
}
#section3 .title-main h2{
 background: url(../images/howto-title.png) no-repeat;
 width:132px;
 height:44px;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 position:absolute;
 top:0;
 left:0;
 margin:0;
}
#section3 .howto-sub{
 font-size:2.1rem;
 font-weight:bold;
 color:#ffac0c;
 margin: 30px 0 10px 0;
}
#section3 h3.title01{
 background:url(../images/howto-step1.gif) no-repeat;
 background-size:50px;
 padding-top:5px;
 padding-left:60px;
 min-height:50px;
 font-size:1.8rem;
 line-height:1.2;
 margin:0 0 10px 0;
}

#section3 h3.title02{
 background:url(../images/howto-step2.gif) no-repeat;
 background-size:50px;
 padding-top:5px;
 padding-left:60px;
 min-height:50px;
 font-size:1.8rem;
 line-height:1.2;
 margin:0 0 10px 0;
}

#section3 .content{
 width:900px;
 overflow:hidden;
 margin: 0 auto 0;
}
#section3 .content .left{
 float:left;
 width:420px;
}
#section3 .content .right{
 float:right;
 width:420px;
}
#section3 .content .left img,
#section3 .content .right img{
 margin-bottom:5px;
}
#section3 .content .left p,
#section3 .content .right p{
 font-size:1.4rem;
 line-height:2.1rem;
 margin:0;
 padding:0;
}


/*
section4
----------------------------------*/
#section4 .title-bg{
 width:40%;
 background:#ffac0c;
 position:absolute;
 top:0;
 margin:0;
 transform:skewX(-27deg);
 transform-origin:right top 0;
 height:100%;
 z-index:8000;
}
#section4 .title{
 width:980px;
 margin: 0 auto 0;
 z-index:9999;
}
#section4 .title h2{
 background: url(../images/product-title.png) no-repeat;
 width:179px;
 height:45px;
 position:absolute;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 z-index:9000;
 top:30px;
}
#section4 .fp-slides{
 z-index:9500;
}
.fp-controlArrow.fp-prev{
 z-index:9999;
 border:none;
 background: url(../images/icon-prev.png) no-repeat;
 width:62px;
 height:63px;
 left:20px;
 transition-duration: 0.3s;
}
.fp-controlArrow.fp-next{
 z-index:9999;
 border:none;
 background: url(../images/icon-next.png) no-repeat;
 width:62px;
 height:63px;
 right:20px;
 transition-duration: 0.3s;
}
.fp-controlArrow.fp-prev:hover,
.fp-controlArrow.fp-next:hover{
 opacity:0.7;
}

#section4 #slide4-1{
 background: url(../images/product-img01.png) no-repeat top right;
 background-size: contain;
}
#section4 #slide4-2{
 background: url(../images/product-img02.png) no-repeat top right;
 background-size: contain;
}
#section4 #slide4-3{
 background: url(../images/product-img03.png) no-repeat top right;
 background-size: contain;
}
#section4 #slide4-4{
 background: url(../images/product-img04.png) no-repeat top right;
 background-size: contain;
}
#section4 #slide4-5{
 background: url(../images/product-img05.png) no-repeat top right;
 background-size: contain;
}
#section4 .slide-title{
 width:920px;
 margin:0 auto;
}
#section4 #slide4-1 h3{
 background: url(../images/product-name01.png) no-repeat;
 width:285px;
 height:69px;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 margin-top:70px;
 margin-bottom:30px;
}
#section4 #slide4-2 h3{
 background: url(../images/product-name02.png) no-repeat;
 width:316px;
 height:69px;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 margin-top:70px;
 margin-bottom:30px;
}
#section4 #slide4-3 h3{
 background: url(../images/product-name03.png) no-repeat;
 width:324px;
 height:69px;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 margin-top:70px;
 margin-bottom:30px;
}
#section4 #slide4-4 h3{
 background: url(../images/product-name04.png) no-repeat;
 width:561px;
 height:69px;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 margin-top:70px;
 margin-bottom:30px;
}
#section4 #slide4-5 h3{
 background: url(../images/product-name05.png) no-repeat;
 width:391px;
 height:69px;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 margin-top:70px;
 margin-bottom:30px;
}
#section4 .slide dl{
 width:920px;
 margin: 0 auto 10px;
 overflow:hidden;
 min-height:40px;
}
#section4 .slide dl:last-child{
 margin-bottom:0;
}
#section4 .slide dl dt{
 background:#000;
 color:#fff;
 font-size:1.2rem;
 padding:1px 10px;
 min-width:40px;
 float:left;
 text-align:center;
}
#section4 .slide dl dd{
 float:left;
 margin:0 0 0 20px;
 font-size:1.6rem;
 color:#000;
 width:310px;
}
#section4 .slide dl dd.price{
 color:#ca1d1d;
 line-height:2.1rem;
 font-weight:bold;
}
#section4 .slide dl dd.price span{
 font-size:1.2rem;
 color:#000;
 font-weight:normal;
}
#section4 .slide dl dd a{
 display:block;
 transition-duration: 0.3s;
}
#section4 .slide dl dd a:hover{
 opacity:0.7;
}
#section4 .slide dl dd img{
 border:3px solid #000;
 box-sizing:border-box;
}

/*
section4
----------------------------------*/
#section5 .title-bg{
 background:#ffac0c;
 width:100%;
 height:80px;
}
#section5 .title-bg .title{
 background:url(../images/case-title-bg.png) no-repeat;
 width:298px;
 height:120px;
 margin: 0 auto;
 padding-top:30px;
}
#section5 .title-bg .title h2{
 background: url(../images/case-title.png) no-repeat;
 width:99px;
 height:46px;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 margin: 0 auto 0;
}
#section5 .fp-slides{
 top:-5%;
}
#section5 .case{
 width:940px;
 margin:0 auto;
}
#section5 .case .mainslider {
 float:left;
 width:460px;
 background:#f7f7f7;
 padding:20px;
 box-sizing:border-box;
}
#section5 .case .mainslider .slides {
 overflow:hidden;
 margin:0 0 15px 0;
 padding:0;
}
#section5 .case .mainslider .slides li {
}
#section5 .case .mainslider .slides li img {
 display:block;
}
#section5 .case .mainslider .flex-control-thumbs {
 position: static;
 overflow: hidden;
 list-style-type:none;
 margin:0;
 padding:0;
 width:100%;
}
#section5 .case .mainslider .flex-control-thumbs li {
 width: 101px;
 float: left;
 margin-right:5px;
}
#section5 .case .mainslider .flex-control-thumbs li:last-child {
 margin-right:0;
}
#section5 .case .mainslider .flex-control-thumbs img {
 width: 101px;
 height: auto;
 display: block;
 opacity: 0.5;
 cursor: pointer;
 -moz-user-select: none;
 transition: 0.3s;
}
#section5 .case .mainslider .flex-control-thumbs img:hover {
  opacity: 1;
}
#section5 .case .mainslider .flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}

#section5 .case .txt{
 float:right;
 width:420px;
 margin-top:10px;
 margin-right:20px;
}
#section5 .case .txt h3{
 font-size:2.8rem;
 font-weight:bold;
 border-bottom:4px solid #ffac0c;
 padding-bottom:10px;
 margin:0 0 20px 0;
}
#section5 .case .txt p{
 font-size:1.6rem;
 line-height:2.4rem;
 margin: 0 0 20px 0;
}
#section5 .case .txt p a{
 color:#ca1d1d;
}
#section5 .case .txt p a:hover{
 text-decoration:none;
}
#section5 .case .txt dl{
 overflow:hidden;
 margin-bottom:10px;
}
#section5 .case .txt dl:last-child{
 margin-bottom:0;
}
#section5 .case .txt dl dt{
 background:#000;
 color:#fff;
 font-size:1.2rem;
 padding:1px 10px;
 min-width:50px;
 float:left;
 text-align:center;
}
#section5 .case .txt dl dd{
 float:left;
 margin:0 0 0 20px;
 font-size:1.4rem;
 color:#000;
 width:330px;
}
#section5 .case .txt dl dd a{
 color:#000;
 font-size:1.2rem;
}
#section5 .case .txt dl dd a:hover{
 text-decoration:none;
}

/*
section6
----------------------------------*/
#section6 .fp-tableCell {
 display:inline-block;
 position:relative;
}

#section6 .title{
 width:100%;
 height:50px;
 background:#ffac0c;
 position:absolute;
 top:0;
}
#section6 .title-sub-bg{
 width:100%;
 position:absolute;
 top:0;
}
#section6 .title-sub{
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 80px 0;
}
#section6 .title-sub:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background: #ffac0c;
  transform-origin: left center;
  transform: rotate(-4deg);
  z-index: -1;}

#section6 .title-main{
 margin: 0 auto;
 padding:0;
 position:relative;
 width:980px;
 height:100px;
 z-index:9999;
 margin-top:30px;
}
#section6 .title-main h2{
 background: url(../images/contact-title.png) no-repeat;
 width:176px;
 height:46px;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 position:absolute;
 top:0;
 left:0;
 margin:0;
}
#section6 .content{
 overflow:hidden;
 width:980px;
 margin: 0 auto 0;
}
#section6 .content .left{
 width:460px;
 float:left;
}
#section6 .content .left p{
 background: url(../images/contact-txt.png) no-repeat;
 width:452px;
 height:146px;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 margin-bottom:30px;
 margin-top:40px;
}
#section6 .content .left a{
 background:#6cc0cf;
 border-radius:50px;
 padding:20px;
 color:#fff;
 font-size:2.1rem;
 font-weight:bold;
 text-align:center;
 transition-duration: 0.3s;
 text-decoration:none;
 display:block;
}
#section6 .content .left a:hover{
 opacity:0.7;
}

#section6 .content .right{
 width:460px;
 float:right;
}
#section6 .content .right ul{
 list-style-type:none;
 margin:0;
 padding:0;
}
#section6 .content .right ul li{
 margin-bottom:30px;
}
#section6 .content .right ul li.popnsports a{
 background: url(../images/contact-bnr01.png) no-repeat;
}
#section6 .content .right ul li.popnland a{
 background: url(../images/contact-bnr02.png) no-repeat;
}
#section6 .content .right ul li a{
 width:422px;
 height:151px;
 display:block;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 transition-duration: 0.3s;
}
#section6 .content .right ul li a:hover{
 opacity:0.7;
}

#section6 .footer-bottom{
 position:absolute;
 bottom:0px;
 width:100%;
}
#section6 .footer-bottom .footer-bg{
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 80px 0;
}
#section6 .footer-bottom .footer-bg:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background: #ffac0c;
  transform-origin: right center;
  transform: rotate(-3deg);
  z-index: -1;}
#section6 footer{
 width:100%;
 height:50px;
 background:#ffac0c;
 position:absolute;
 bottom:0;
}
#section6 footer .copy{
 width:980px;
 margin: 0 auto;
 text-align:right;
 color:#fff;
 font-size:1.2rem;
 z-index:9999;
}
#section6 .pagetop{
 position:absolute;
 bottom:10px;
 left:48%;
 z-index:9999;
}
#section6 .pagetop a{
 background: url(../images/icon-pagetop.png) no-repeat;
 width:62px;
 height:63px;
 display:block;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 transition-duration: 0.3s;
}
#section6 .pagetop a:hover{
 opacity:0.7;
}