@charset "UTF-8";



/*----------#kv-----------*/
#kv{
  background: url(../images/kv_bg.gif) 50% 0 no-repeat #00aabd;
  width:100%;
  padding:0 0;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}
#kv h1{
  display:block;
  width:100%;
  margin-bottom:150px;
  padding:0 15px;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}
#kv h1 img{
  display:block;
  width:100%;
  max-width:830px;
  margin:0 auto;
}

@media screen and (max-width: 680px){
  #kv{
    background: url(../images/kv_bg.gif) 50% 0 no-repeat #00aabd;
    background-size: 165% auto;
  }
  #kv h1{
    margin-bottom:40px;
  }
}
@media screen and (max-width: 500px){
  #kv h1{
    margin-bottom:20px;
  }
}
/*-------*/

#col-tab{
  display:block;
  width:100%;
  margin:0 auto;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}
#col-tab .col-tab{
  position: relative;
  width:100%;
  background: url(../images/bg_blue.gif) 0 0 repeat;
  border-bottom:1px solid #0db3c5;
  transition: 0.3s ease-in-out;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
#col-tab .col-tab:before {
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: -10px;
    left: 0;
    background: url(../images/shadow.png) 50% 0 no-repeat;
    z-index: 5;
}
#col-tab .col-tab ul{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
  max-width:1700px;
  margin:0 auto;
	flex-wrap: wrap;
}
#col-tab .col-tab ul li{
  width:20%;
  position: relative;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}
#col-tab .col-tab ul li::before{
  content:"";
  position: absolute;
  top:20px;
  right:1px;
  width:1px;
  height:70%;
  background: #03355f;
}
#col-tab .col-tab ul li::after{
  content:"";
  position: absolute;
  top:20px;
  right:0;
  width:1px;
  height:70%;
  background: #0469bd;
}
#col-tab .col-tab ul li:last-of-type::before,
#col-tab .col-tab ul li:last-of-type::after{
  display:none;
}
#col-tab .col-tab ul li a{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
  height:100%;
  align-items: center;
  justify-content: center;
  padding:20px 20px;
  text-align: center;
  transition: 0.5s ease-in-out;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}

#col-tab .col-tab ul li.anl a:hover{
  background:rgba(0,170,189,0.4);
  color:#fff;
}
#col-tab .col-tab ul li a img{
  display:block;
  width:100%;
  max-width:300px;
  margin:0 auto;
}

#col-tab .col-tab ul li:nth-of-type(1){
  width:22%;
}
#col-tab .col-tab ul li:nth-of-type(1) a img{
  max-width:220px;
}
#col-tab .col-tab ul li:nth-of-type(2){
  width:22%;
}
#col-tab .col-tab ul li:nth-of-type(2) a img{
  max-width:200px;
}
#col-tab .col-tab ul li:nth-of-type(3){
  width:22%;
}
#col-tab .col-tab ul li:nth-of-type(3) a img{
  max-width:200px;
}
#col-tab .col-tab ul li:nth-of-type(4){
  width:17%;
}
#col-tab .col-tab ul li:nth-of-type(4) a img{
  max-width:110px;
}
#col-tab .col-tab ul li:nth-of-type(5){
  width:17%;
}
#col-tab .col-tab ul li:nth-of-type(5) a img{
  max-width:130px;
}
@media screen and (max-width: 860px){

  #col-tab .col-tab ul li:nth-of-type(1){
    width:22%;
  }
  #col-tab .col-tab ul li:nth-of-type(1) a img{
    max-width:220px;
  }
  #col-tab .col-tab ul li:nth-of-type(2){
    width:22%;
  }
  #col-tab .col-tab ul li:nth-of-type(2) a img{
    max-width:200px;
  }
  #col-tab .col-tab ul li:nth-of-type(3){
    width:22%;
  }
  #col-tab .col-tab ul li:nth-of-type(3) a img{
    max-width:200px;
  }
  #col-tab .col-tab ul li:nth-of-type(4){
    width:17%;
  }
  #col-tab .col-tab ul li:nth-of-type(4) a img{
    max-width:70px;
  }
  #col-tab .col-tab ul li:nth-of-type(5){
    width:17%;
  }
  #col-tab .col-tab ul li:nth-of-type(5) a img{
    max-width:130px;
  }

}
@media screen and (max-width: 680px){
  #col-tab .col-tab ul li a{
    padding:15px 10px;
  }
  #col-tab .col-tab ul li::before{
    top:18px;
    height:70%;
  }
  #col-tab .col-tab ul li::after{
    top:18px;
    height:70%;
  }
  #col-tab .col-tab ul li:nth-of-type(1){
    width:23%;
  }
  #col-tab .col-tab ul li:nth-of-type(1) a img{
    max-width:220px;
  }
  #col-tab .col-tab ul li:nth-of-type(2){
    width:23%;
  }
  #col-tab .col-tab ul li:nth-of-type(2) a img{
    max-width:120px;
  }
  #col-tab .col-tab ul li:nth-of-type(3){
    width:23%;
  }
  #col-tab .col-tab ul li:nth-of-type(3) a img{
    max-width:120px;
  }
  #col-tab .col-tab ul li:nth-of-type(4){
    width:15%;
  }
  #col-tab .col-tab ul li:nth-of-type(4) a img{
    max-width:70px;
  }
  #col-tab .col-tab ul li:nth-of-type(5){
    width:16%;
  }
  #col-tab .col-tab ul li:nth-of-type(5) a img{
    max-width:130px;
  }

}
@media screen and (max-width: 500px){
  #col-tab .col-tab ul li a{
    padding:5px 5px;
  }
  #col-tab .col-tab ul li::before{
    top:10px;
    height:70%;
  }
  #col-tab .col-tab ul li::after{
    top:10px;
    height:70%;
  }
}
/*-------*/
#col-tab .col-tab.fixed{
	position: fixed;
	top:0;
	left:0;
  width: 100%;
	z-index: 5;
	max-width: 100%;
	margin: auto;
	padding:0px 0;
  border-bottom:1px solid #023e70;
}
#col-tab .col-tab.fixed ul{
  max-width: 100%;
}
#col-tab .col-tab.fixed ul li a{
  padding:15px 20px;
}
@media screen and (max-width: 680px){
  #col-tab .col-tab.fixed ul li a{
    padding:11px 10px;
  }
}
@media screen and (max-width: 500px){
  #col-tab .col-tab.fixed ul li a{
    padding:5px 5px;
  }
}
@media screen and (max-width: 860px){

}
@media screen and (max-width: 760px){

}
@media screen and (max-width: 680px){

}
@media screen and (max-width: 500px){

}

/*----------#m-----------*/
#m{
  background: url(../images/m.gif) 50% 0 no-repeat #fff;
  width:100%;
  padding:130px 0;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}
#m p{
  width:100%;
  text-align: center;
  padding:0 15px;
  font-size: 2.2rem;
  line-height: 2.2;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}

@media screen and (max-width: 980px){
  #m{
    background-size: 140% auto;
    padding:80px 0;
  }
}
@media screen and (max-width: 860px){
  #m p{
    text-align: left;
    font-size: 2.2rem;
    line-height: 2.2;
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff,
    0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff,
    0 0 5px #fff
  }
}
@media screen and (max-width:680px){
  #m{
    background-size: 120% auto;
    padding:50px 0;
  }
}

.sdw:before {
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/shadow.png) 50% 0 no-repeat;
    z-index: 1;
}
/*----------#s1-----------*/
#s1{
  position: relative;
  background: url(../images/s1_bg.gif) 50% 0 repeat-y #8fae27;
  width:100%;
  padding:130px 0;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
  border-bottom: 1px solid #c0e447;
}
#s1 .w{
  max-width: 1570px;
}
#s1 h2+p{
  font-size: 3.0rem;
  color:#fcf6d8;
  text-align: center;
  margin-bottom: 40px;
}
#s1 .s1_ul{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
	flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}
#s1 .s1_ul li{
  width:32%;
  background: #fff;
  padding:15px;
  -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.3);
}
#s1 .cap{
  text-align: right;
}


@media screen and (max-width: 860px){
  #s1{
    background-size: 120% auto;
    padding:120px 0;
  }
  #s1 h2+p{
    text-align: left;
  }
  #s1 .s1_ul li{
    width:100%;
    background: #fff;
    padding:15px;
    max-width:700px;
    margin:0 auto 30px;
  }
  #s1 .s1_ul li img{
    display:block;
    width:100%;
    max-width:600px;
    margin:0 auto;
  }
  #s1 .s1_ul li:last-of-type{
    margin-bottom: 0px;
  }
  #s1 .cap{
    text-align: left;
  }
}

@media screen and (max-width: 680px){
  #s1{
    background-size: 120% auto;
    padding:60px 0;
  }
}

@media screen and (max-width: 500px){
  #s1{
    background-size: 120% auto;
    padding:50px 0;
  }
  #s1 h2+p{
    font-size: 2.0rem;
    margin-bottom: 20px;
  }
}

/*----------#s2-----------*/
#s2{
  position: relative;
  background: url(../images/s2_bg.gif) 50% 0 repeat-y #db393c;
  width:100%;
  padding:130px 0;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
  border-bottom: 1px solid #f34a4d;
}
#s2 h2+p{
  font-size: 3.0rem;
  color:#fcf6d8;
  text-align: center;
  margin-bottom: 40px;
}

#s2 .s2_ul{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
  align-items: center;
	width:100%;
  max-width:1080px;
  margin: 0 auto 30px;
	flex-wrap: wrap;
  justify-content: space-between;
  -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.3);
  padding:55px;
  background: #fff;
}
#s2 .s2_ul li:nth-of-type(1){
  width:40%;
  overflow: hidden;
  -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;
}
#s2 .s2_ul li:nth-of-type(2){
  width:55%;
}
#s2 .cap{
  text-align: right;
}

@media screen and (max-width: 860px){
  #s2{
    background-size: 120% auto;
    padding:120px 0;
  }
  #s2 h2+p{
    text-align: left;
  }

  #s2 .cap{
    text-align: left;
  }
}
@media screen and (max-width: 680px){
  #s2{
    background-size: 120% auto;
    padding:60px 0;
  }
  #s2 .s2_ul{
    padding:30px;
  }
  #s2 .s2_ul li:nth-of-type(1){
    width:100%;
    max-width:400px;
    margin: 0 auto 15px;
  }
  #s2 .s2_ul li:nth-of-type(1) img{
    display:block;
    width:100%;
    max-width:600px;
  }
  #s2 .s2_ul li:nth-of-type(2){
    width:100%;
  }
}

@media screen and (max-width: 500px){
  #s2{
    background-size: 120% auto;
    padding:50px 0;
  }
  #s2 h2+p{
    font-size: 2.0rem;
    margin-bottom: 20px;
  }
}

/*----------#s3-----------*/
#s3{
  position: relative;
  background: url(../images/s3_bg.gif) 50% 0 repeat-y #a07ba5;
  width:100%;
  padding:130px 0;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
  border-bottom: 1px solid #c895cf;
}

#s3 .w{
  max-width: 1570px;
}

#s3 .s3_ul{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
  margin: 0 auto 15px;
	flex-wrap: wrap;
  justify-content: space-between;
}
#s3 .s3_ul li{
  width:48%;
  margin-bottom: 40px;
}

#s3 .z{
  width:100%;
  margin-bottom: 30px;
}
#s3 .z img{
  display:block;
  width:100%;
  max-width:1150px;
  margin:0 auto;
}
#s3 .cap2{
  text-align: center;
  color:#fff100;
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 2.4rem;
}
#s3 .cap{
  text-align: center;
  margin-bottom: 60px;
}

@media screen and (max-width: 860px){
  #s3{
    background-size: 120% auto;
    padding:120px 0;
  }
  #s3 .s3_ul li{
    width:100%;
    margin-bottom: 40px;
  }
  #s3 .cap2{
    text-align: left;
    font-size: 2.4rem;
  }
  #s3 .cap{
    text-align: left;
  }
}
@media screen and (max-width: 680px){
  #s3{
    background-size: 120% auto;
    padding:60px 0;
  }
}

@media screen and (max-width: 500px){
  #s3 .cap{
    margin-bottom: 40px;
  }
}


/*----------#s4-----------*/
#s4{
  position: relative;
  background: url(../images/s4_bg.gif) 50% 0 repeat-y #f1ac19;
  width:100%;
  padding:130px 0;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
  border-bottom: 1px solid #ffc750;
}

#s4 .w{
  max-width: 1570px;
}


#s4 .s4_ul{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
  margin: 0 auto 15px;
	flex-wrap: wrap;
  justify-content: space-between;
}
#s4 .s4_ul li{
  width:48%;
  margin-bottom: 40px;
}
#s4 .cap{
  margin-bottom: 15px;
}
#s4 .cap2{
  font-size: 1.8rem;
  color:#da393c;
  margin-bottom: 30px;
}
#s4 .img1 img.pc{
  display:block;
  width:100%;
  max-width:1800px;
  margin:0 auto 30px;
}
#s4 .img1 img.sp{
  display:none;
  width:100%;
  max-width:800px;
  margin:0 auto 15px;
}
#s4 .img2 img.pc{
  display:block;
  width:100%;
  max-width:1800px;
  margin:0 auto 60px;
}
#s4 .img2 img.sp{
  display:none;
  width:100%;
  max-width:800px;
  margin:0 auto 30px;
}

#s4 .btn a{
  padding: 40px 5px;
}
@media screen and (max-width: 860px){
  #s4{
    background-size: 120% auto;
    padding:120px 0;
  }
  #s4 .s4_ul li{
    width:100%;
    margin-bottom: 40px;
  }

}
@media screen and (max-width: 680px){
  #s4{
    background-size: 120% auto;
    padding:60px 0;
  }
  #s4 .s4_ul{
    padding-top:20px;
  }
  #s4 .s4_ul li{
    width:100%;
    margin-bottom: 30px;
  }
  #s4 .img1 img.pc{
    display:none;
  }
  #s4 .img1 img.sp{
    display:block;
  }
  #s4 .img2 img.pc{
    display:none;
  }
  #s4 .img2 img.sp{
    display:block;
  }
  #s4 .btn a{
    padding: 20px 5px;
  }
  #s4 .btn a i{
    display:block;
  }
}


/*----------#s5-----------*/
#s5{
  position: relative;
  background: url(../images/s5_bg.gif) 50% 0 repeat-y #ba914e;
  width:100%;
  padding:130px 0;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
  border-bottom: 1px solid #ebb660;
}

#s5 .img{
  width:100%;
  padding:30px;
  background: #fff;
  -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
  margin-bottom: 50px;
}
#s5 .img img.pc{
  display:block;
  width:100%;
  max-width:1400px;
  margin:0 auto;
}
#s5 .img img.sp{
  display:none;
  width:100%;
  max-width:1236px;
  margin:0 auto;
}

#s5 .btn{
  margin-bottom: 60px;
}
#s5 .btn a{
  padding: 40px 5px;
}

/*-------*/
#s5 .hadding2{
  padding-top: 60px;
  margin-bottom: 30px;
}
#s5 .hadding2 img{
  display:block;
  width:100%;
  max-width:916px;
  margin:0 auto;
}
#s5 .s5_ul{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
	flex-wrap: wrap;
  justify-content: space-between;
}
#s5 .s5_ul li{
  width:48%;
}
@media screen and (max-width: 860px){
  #s5{
    background-size: 120% auto;
    padding:120px 0;
  }
  #s5 .s5_ul li{
    width:100%;
  }
  #s5 .s5_ul li:nth-of-type(1){
    margin-bottom: 30px;
  }

}
@media screen and (max-width: 680px){
  #s5{
    background-size: 120% auto;
    padding:60px 0;
  }
  #s5 .img{
    margin-bottom: 30px;
  }
  #s5 .img img.pc{
    display:none;
  }
  #s5 .img img.sp{
    display:block;
  }
  #s5 .btn a{
    padding: 20px 5px;
  }
  #s5 .btn a i{
    display:block;
  }
  #s5 .hadding2{
    padding-top: 20px;
    margin-bottom: 30px;
  }
}

/*----------#s6-----------*/
#s6{
  position: relative;
  background: #fff;
  width:100%;
  padding:130px 0;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}

#s6 .shopimg{
  position: relative;
  z-index: 1;
}
#s6 .shopopen{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
	flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  align-items: center;
  z-index: 2;
  margin: -40px auto 100px;
}
#s6 .shopopen li:nth-of-type(1){
  width:55%;
}
#s6 .shopopen li:nth-of-type(2){
  width:42%;
}

#s6 .shopinfo{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
  max-width:950px;
	flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  align-items: center;
  z-index: 2;
  margin:0 auto 60px;
}
#s6 .shopinfo li:nth-of-type(1){
  width:48%;
}
#s6 .shopinfo li:nth-of-type(2){
  width:48%;
}
#s6 .btn a{
  padding: 40px 5px;
  background: #006cb6;
  border-bottom: solid 5px #035d9a;
  border-left: 1px solid #035d9a;
  border-top: 1px solid #035d9a;
  border-right: 1px solid #035d9a;
}
#s6 .btn a:hover{
  background: #0078cb;
  transform: translateY(2px);
  border-bottom: solid 3px #006cb6;
}
#s6 .btn a:active {
    transform: translateY(1px);
    border-bottom: solid 2px #006cb6;
}

@media screen and (max-width: 860px){
  #s6{
    padding:120px 0;
  }
}
@media screen and (max-width: 680px){
  #s6{
    padding:60px 0;
  }
  #s6 .shopimg{
    margin-bottom: 15px;
  }
  #s6 .shopopen{
    margin: 0px auto 60px;
  }
  #s6 .shopopen li:nth-of-type(1){
    width:100%;
  }
  #s6 .shopopen li:nth-of-type(2){
    width:100%;
  }

  #s6 .shopinfo{
    margin:0 auto 40px;
  }
  #s6 .shopinfo li:nth-of-type(1){
    display:block;
    width:70%;
    margin:0 auto 20px;
  }
  #s6 .shopinfo li:nth-of-type(2){
    width:100%;
  }
  #s6 .btn a{
    padding: 20px 5px;
  }
  #s6 .btn a i{
    display:block;
  }
}

footer{
  background: #025792;
  padding:65px 0;
  text-align: center;
  color:#fff;
  font-size: 1.1rem;
}

@media screen and (max-width: 860px){
  footer{
    padding:45px 0 200px;
  }
}
@media screen and (max-width: 680px){
  footer{
    padding:45px 0 150px;
  }
}
@media screen and (max-width: 500px){
  footer{
    padding:45px 0 100px;
  }
}

#pbn{
  position: fixed;
  left:15px;
  bottom:100px;
  width:318px;
  height: 276px;
  z-index: 10;
}
#pbn a{
  display:block;
}
#pbn a:hover{
  filter:alpha(opacity=80);-moz-opacity: 0.8;opacity: 0.8;
}
#pbn_sp{
  display:none;
}

@media screen and (max-width: 1380px){
  #pbn{
    position: fixed;
    left:5px;
    bottom:100px;
    width:260px;
    height: 226px;
    z-index: 10;
  }
}
@media screen and (max-width: 1280px){
  #pbn{
    width:200px;
    height: 174px;
  }
}

@media screen and (max-width: 860px){
  #pbn{
    display:none;
  }
  #pbn_sp{
    display:block;
    position: fixed;
    left:0;
    bottom:0;
    width:100%;
    height: auto;
    z-index: 10;
  }
  #pbn_sp img{
    display:block;
    width:100%;
  }
}