@charset "utf-8";
/* CSS Document */
body { background-color:#eee; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
p { padding:0; }
#content { padding-top:50px; }
.box2 { padding:2.34375vw; padding-top:0; }
figure img { width:100%; height:auto; }
figure { line-height:0; }
.youtube { line-height:0;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
.box2.white { background-color:#FFF; border-top:1px solid #ddd; border-bottom:1px solid #ddd; box-shadow:0px 1px 6px rgba(0,0,0,.1); margin-bottom:1.5625vw; padding:0; padding-top:5.3125vw; padding-bottom:5.3125vw; }
.box2.white:nth-child(1) { padding-top:0; }
#content h3 { text-align:center; font-weight:bold; font-size:6vw; margin-bottom:3.125vw; }
.box2.white ul li a { padding:3.90625vw 2.34375vw; display:block; border-bottom:1px solid #eee; font-size:3.8vw; color:#666; position:relative; padding-right:8vw; line-height:1.5; text-decoration:none; }
.box2.white ul li a span { display:block; font-size:2.5625vw; }
.box2.white ul li a:after { content:""; display:block; width:2.1875vw; height:100%; position:absolute; top:0; right:4.34375vw; background-image:url(../img/arrow.png); background-repeat:no-repeat; background-position:center; background-size:contain; }
.box2.white.red,.box2.white.red ul li a { color:#D22626;}
.box2.product { padding-top:5.46875vw; }
.box2.white ul.news { height:40vh; overflow:auto;-webkit-overflow-scrolling: touch; }

.productList {
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
	  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
}
.productList li { background-color:#FFF; border:1px solid #ddd; box-sizing:border-box; box-shadow:0px 1px 4px rgba(0,0,0,.1); margin-bottom:1.5625vw;
-ms-flex-preferred-size: calc( 50% - 0.78125vw );
               flex-basis: calc( 50% - 0.78125vw );
			   max-width:calc( 50% - 0.78125vw );
			    }
.productList li a { display:block; padding:3.125vw; text-decoration:none; }
.productList li a .cat { background-color:#555; color:#FFF; text-align:center; padding:1.5625vw; font-size:3.4vw; line-height:1.4; margin-top:4.6875vw; margin-bottom:3.125vw; }
.productList li a p { color:#666; line-height:1.4; font-size:3.4vw; }

.sns {padding:0 20vw;
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
	  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
}
.sns img { width:auto; height:7.1875vw;}
.box2.white ul.sns li a { border:none; padding: 0; line-height:0; text-decoration:none; }
.box2.white ul.sns li a:after { display:none; }

a.back { padding:3.125vw; display:block; color:#888; text-align:center; font-size:4.6875vw; }
a.back:before { content:""; display:inline-block; width:4.6875vw; height:4.6875vw; background-image:url(../img/add.svg); background-repeat:no-repeat; background-position:center; background-size:contain; vertical-align:middle;  }
.box2.white.fb { text-align:center; }
#header_rspnsv~#footer2012 { margin-bottom:0; }

.main-slide div img { width:100%; height:auto; }
.slick-dots { text-align:center; position:relative; margin:0; }
.slick-initialized .slick-dots { }
.slick-dots li { display:inline-block; margin:0 10px; vertical-align:middle; width:10px; height:10px; border-radius:50%; background-color:#ddd; overflow:hidden;  }
.slick-dots li button { opacity:0; padding:0; display:block; }
.slick-dots li.slick-active { background-color:#666; }
.append { display:inline-block; position:relative; height:30px; }
.appendBox { text-align:center; height:30px; margin-top:5vw; }
.append .slick-prev { width:30px; height:30px; position:absolute; top:50%; left:-30px; margin-top:-15px; -webkit-appearance:none; appearance:none; border:none; background:none; background-color:transparent; text-indent:-9999px; background-image:url(../img/next.svg); background-repeat:no-repeat; background-position:center; background-size:12px 20px; }
.append .slick-next { width:30px; height:30px; position:absolute; top:50%; right:-30px; margin-top:-15px; -webkit-appearance:none; appearance:none; border:none; background:none; background-color:transparent; text-indent:-9999px;background-image:url(../img/prev.svg); background-repeat:no-repeat; background-position:center; background-size:12px 20px;  }

@media screen and (max-width: 768px){
.p-groupHeader-02 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}
    .spHeader { top:0px;}
    }