@charset "utf-8";
/* CSS Document */
/*********************************
　基本フォーマット
*********************************/


html{overflow:auto;}

body{
	margin: 0px;
	padding: 0px;
	font-size:14px;
	line-height:150%;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	color:#333;
	overflow:hidden;
    background:#fff;
    box-sizing:border-box;
    font-feature-settings: "palt";
    letter-spacing: .8px;
}

b, strong, .bold{
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif;
	font-weight: 700;
}

/* IEだけに適応 */
_:lang(x)::-ms-backdrop, .selector {
	font-family: "Segoe UI", Meiryo, sans-serif;
}

p{font-size:14px;line-height:1.7em;}
a{display:block;cursor:pointer;}


.bg_wrapper{
    width: 100%;
    background: url(../img/bg_pattern.jpg) top center no-repeat;
    background-size: cover;
    position: relative;
    z-index: 0;
    padding-bottom:135px;
}

.container{width: calc(100% - 30px);max-width: 1024px;margin: 0 auto;}

header{
   position:fixed;
   background:rgba(255,255,255,0.8);
   padding:10px 0;
   width:100%;
   height:80px;
   z-index: 99;
}


header .inner{width:100%;max-width:1280px;margin:auto;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
header .logoimg img{max-width:210px;width:100%;vertical-align: bottom;}

main{padding-top:80px;}

.caption{margin:140px auto 86px;text-align:center;}
.caption img{width:100%;max-width:748px;}
.caption h2{color:#fff;font-size:20px;line-height:1.8em;margin-top:60px;letter-spacing:0.06em;}

.jumpmenu .midashi{display:block;margin:0 auto 25px;width:100%;max-width:172px;}
.jumpmenu ul{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content:center;justify-content: center;position:relative;}
.jumpmenu ul li{background:#fff;border-radius:50%;text-align:center;position:relative;transition: all 0.4s ease-in-out;}
.jumpmenu ul li:hover{opacity:0.8;}
.jumpmenu ul li::after{
    content:" ";
    width: 12px;
    height: 8px;
    background: url(../img/jumpmenu_arrow.png) no-repeat;
    background-size:100%;
    position: absolute;
    left: 50%;
    bottom:20px;
    margin-left: -6px;
}
.jumpmenu ul li a{padding:25px 0;}
.jumpmenu ul li img{width:100%;max-width:90px;}
.jumpmenu ul li h6{margin:10px 0 30px;}
.jumpmenu ul li h6 span{font-size:16px;line-height:1.5em;}

span.line{color:#595757;background: linear-gradient(transparent 65%, #cceeee 65%)repeat scroll 0 0;}

.youtube{
  width: 100%;
  position: relative;
  padding-top: 56.25%;
  margin-bottom:15px;
}
.youtube iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border:0;
  overflow:hidden;
}

.section{box-sizing: border-box;}
.c-block{background:#fff;border-radius:8px;box-sizing: border-box;padding:30px 20px;width:100%;}
.c-block img{width:100%;margin-top:20px;}
.c-block .no{text-align:center;margin:-90px 0 20px;}
.c-block .no img{max-width:134px;margin:0;}
.c-block h4{text-align:center;margin-bottom:25px;}
.c-block h4 span{font-size:20px;line-height:1.5em;letter-spacing:0.06em;}
.c-block h5{font-size:18px;color:#ea608e;line-height:1.35em;letter-spacing: 0.06em;text-align: center;margin:15px 0;}
.c-block h6{font-size:16px;line-height:1.6em;}
.c-block ul li{border-top:1px solid #dfdfdf;margin-top:30px;padding-top:10px;}
#sec1 .c-block ul li{margin-top:25px;}
.c-block ul li img{margin:0 0 15px;}
.c-block a.shoplink{display:block;margin-top:15px;color:#333;position:relative;padding-left:14px;line-height: 1.26em;}
.c-block a.shoplink::after{
   content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #333;
    position: absolute;
    top: 50%;
    left: 2px;
    margin-top: -6px;
}
.c-block a.shoplink:hover{opacity:0.5;}
p.ti{text-indent:-2.7em;padding-left:2.7em;}
p.ti2{text-indent:-4.7em;padding-left:4.7em;}
span.ti3{text-indent:-2.3em;padding-left:2.3em;display:inline-block;}

.btn{background:#ea608e;color:#fff;text-align:center;padding:9px;border-radius:30px;width:100%;max-width:220px;margin:20px auto 0;border:1px solid #ea608e;
transition: all 0.3s ease-in-out;}
.btn:hover{background:#fff;color:#ea608e;}
.btn span{position:relative;padding-left:18px;line-height: 1.8em;}
.btn span::before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 50%;
    left: 2px;
    margin-top: -9px;
    transition: all 0.3s ease-in-out;
}
.btn:hover span::before{border-color: transparent transparent transparent #ea608e;}

.bsp{display:none;}

.totopfade {position: fixed;right: 20px;z-index: 99;bottom: 10px;box-sizing: border-box;}
.totopfade img{width:100%;max-width:80px;}
footer a{transition: 0.4s;color:#333;display:block;}
footer a:hover{opacity:0.5;}
footer .container{max-width:1024px;width: calc(100% - 20px);padding:22px 0 20px;}
footer ul{display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-webkit-justify-content:center;justify-content: center;text-align: center;}
footer .menu li{position: relative;border-right: solid 1px #333;text-align: center;font-size:13px;padding:0 10px;}
footer .menu li:last-child, footer .logolink li:last-child{border:none;}
footer .logolink{margin:26px 0 10px;}
footer .logolink img{width:100%;}
footer .logolink li{border-right: solid 2px #dfdfdf;padding:0 20px;}
footer .copyright{color:#666;font-size:10px;text-align:center;}

.keyframe {
  animation-name: anim_sc;
  transform: scale(0.7, 0.7);
}

@keyframes anim_sc {
  100% {
    transform: scale(1, 1);
  }
}

.anime{
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1; /*infinite;*/
  animation-direction: alternate;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.js-scroll-fade {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}
 
.js-scroll-fade.active{
  opacity : 1;
  transform : translate(0, 0);
}



/*--- cssアニメーション ここまで ---*/



/*PC==========================================*/

@media print, screen and (min-width:769px) {
  
.sp {display: none;}
.pc {display: block;}

header .inner{-webkit-justify-content:center;justify-content: center;}
header .logoimg{padding:0 15px;}
header nav ul{display: -webkit-box;display: -ms-flexbox;display: flex;}
header nav ul li{padding:0 14px;border-left:1px solid #999;text-align:center;line-height: 1.3em;
display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
header nav ul li a{color:#595757;display:block;transition: all 0.2s ease-in-out;}
header nav ul li a:hover{opacity:0.5;}

.jumpmenu ul li{width:196px;height:196px;margin-right:80px;}
.jumpmenu ul li:nth-child(4), .jumpmenu ul li:nth-child(7){margin:0;}

#grid{margin:100px auto 0;}
.section{width: 480px;height: auto;margin: 0 16px;}
.c-block{margin:70px auto 0;}

footer .logolink li img{max-width:140px;width:100%;}

}

@media screen and (min-width:973px) {.spmenubox{display:none!important;}}



/*タブレット==========================================*/

@media screen and (min-width:769px) and (max-width:1280px) {
header{height:70px;}
header .logoimg{width:18%;}
header nav ul li{font-size:12px;padding:0 10px;}
main{padding-top:70px;}
.section{width: 460px;height: auto;margin: 0 10px;}
}
@media screen and (min-width:769px) and (max-width:1070px) {
.jumpmenu ul li{margin-right:50px;}
.jumpmenu ul li:nth-child(4), .jumpmenu ul li:nth-child(7){margin:0;}
}

@media screen and (min-width:769px) and (max-width:1060px) {
.bg_wrapper{padding-bottom:8vw;}

header{height:60px;}
header .logoimg{width:15%;padding:0 10px;}
header nav ul li{padding:0 8px;}

main{padding-top:60px;}
.caption {margin: 8vw auto 6vw;}
.caption h2{margin-top:4vw;}
.section{width: 440px;height: auto;margin: 0 10px;}
.c-block{margin: 80px auto 0;}

footer ul{-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content:center;justify-content: center;text-align: center;}
footer .menu li{margin:4px 0;}
footer .menu li:nth-child(3), footer .menu li:nth-child(4){border:none;}
footer .menu li:nth-child(4){width:100%;display:block;}

}

/*タブレット＋スマホ==========================================*/
@media screen and (max-width:972px) {
header{padding:10px 15px;height:65px;}
header nav.pc{display:none;} 
header .inner{-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
header .logoimg{width:100%;padding:0;}
header .logoimg img{max-width:18vw;}
.menubtn{
    display:block !important;
	position:relative;
	width: 30px;
    height: 26px;
    cursor: pointer;
    margin-top:8px;
}
.menubtn div{position:relative;}
	
/*ハンバーガーアイコンをCSSだけで表現*/
.menubtn span{
  position: absolute;
  height: 2px;/*線の太さ*/
  width: 100%;/*長さ*/
  background: #595757;
  display: block;
  content: '';
  cursor: pointer;
  -webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
	left:0;
}

.menubtn span:nth-child(1) {
  top: 0px;
}

.menubtn span:nth-child(2) {
  top: 8px;
}
.menubtn span:nth-child(3) {
  top: 16px;
}


.menubtn.active span:nth-child(1){
    -webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	transform: rotate(135deg);
	top:8px;
}
	
.menubtn.active span:nth-child(2) {width: 0;left: 50%;}
	
.menubtn.active span:nth-child(3){
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	transform: rotate(-135deg);
	top:8px;
}

.spmenubox{width:100%;box-sizing:border-box;}
.spmenuboxbg{background:#fff;border-radius:10px;padding:30px 30px 15px;position:fixed;left:0;top:0;z-index:90;
transform: translateY(-100%);transition: all 0.6s;}
.spmenubox.active .spmenuboxbg{transform: translateY(0%);margin:85px 20px 20px;}
.spmenubox ul{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align: center;-ms-flex-align: center;align-items: center;
-webkit-justify-content:space-between;justify-content:space-between;}
.spmenubox ul li{width:23%;text-align:center;margin-bottom:15px;}
.spmenubox ul li img{width:100%;max-width:10vw;}
.spmenubox ul li img.midashi{max-width:14vw;}
.spmenubox ul h6{margin:10px 0;}
.spmenubox ul li:nth-child(4) h6{margin:20px 0;}
.spmenubox ul h6 span{font-size:1rem;line-height:1.6rem;}
.spmenubox ul li a{transition: all 0.3s ease-in-out;}
.spmenubox ul li a:hover{opacity:0.5;}

main{padding-top:65px;}
.jumpmenu ul li a{padding:3vw 0;}
.jumpmenu ul li{width: 22vw;height: 22vw;margin-right:2vw;}
.jumpmenu ul li:nth-child(4), .jumpmenu ul li:nth-child(7){margin:0;}
.jumpmenu ul li img{max-width:10vw;}
.jumpmenu ul li h6 span {font-size: 0.85rem;}
.jumpmenu ul li h6 {margin: 0.8vw 0 3vw;}
.section{width: 400px;height: auto;margin: 0 10px;}

.bsp{display:block;}
}

@media print, screen and (max-width:886px)  {.section{width: 360px;height: auto;margin: 0 10px;}}


/*スマホ==========================================*/
@media print, screen and (max-width:768px)  {
.sp {display: block;}
.pc {display: none;}

  html {
    font-size: 2.95vw;
  }
	body, p, li, table, input, select {
    font-size: 1.1rem;
    line-height: 1.8em;
  }

.bg_wrapper{background: url(../img/bg_pattern_sp.jpg) top center no-repeat;background-size: cover;padding-bottom:14vw}

header{padding:2vw 5vw;height:14vw;}
header .logoimg img{max-width:34vw;}
.spmenuboxbg{padding:5vw 4.5vw 2vw;}
.spmenubox.active .spmenuboxbg{margin: 19vw 5vw 5vw;}
.spmenubox ul li{width:48%;margin-bottom:6vw}
.spmenubox ul li img{width:100%;max-width:20vw;}
.spmenubox ul li img.midashi{max-width:26vw;}
.spmenubox ul li h6 span{font-size:1.2rem;}

main{padding-top:14vw;}
.caption{margin:14vw auto;}
.caption h2{font-size:1.28rem;text-align:left;margin:6vw 5vw;}
.jumpmenu .midashi{margin: 0 auto 6vw;max-width: 35vw;}
.jumpmenu ul li{width:43vw;height:43vw;margin-right:4vw;margin-bottom:4vw;}
.jumpmenu ul li:nth-child(2n){margin-right:0;}
.jumpmenu ul li::after{width:3vw;height:2vw;margin-left:-1.5vw;bottom:4.5vw;}
.jumpmenu ul li a{padding:5.5vw 0;}
.jumpmenu ul li img{max-width:20vw;}
.jumpmenu ul li h6{margin:2.4vw 0;}
.jumpmenu ul li h6 span{font-size:1.18rem;line-height:1.6em;}
#grid{margin-top:30vw;}
.section{width:100%;margin:0 auto;}
.c-block{margin:21vw 0 0;padding:4vw 4vw 6vw;}
.c-block .no{margin: -18vw 0 3vw;}
.c-block .no img{max-width: 32vw;}
.c-block img{margin-top:4vw;}
.c-block h4{margin-bottom:6vw;}
.c-block h4 span{font-size: 1.6rem;}
.c-block h5{margin-bottom:2.5vw;font-size:1.4rem}
#sec3 .c-block h5{margin: 2.5vw 0;}
.c-block h6{font-size:1.3rem;line-height: 1.5em;}
.c-block ul li{margin-top: 5vw;padding-top: 6vw;}
#sec3 .c-block ul li{padding-top:2vw;margin-top:6vw;}
.youtube{margin-bottom:4vw;}
.c-block ul li img{margin:0 0 4vw;}
.btn{max-width:50vw;margin:3.5vw auto 0;}

.totopfade{right:10px;bottom:5px;}
.totopfade img{max-width: 14vw;}
footer .container{padding:6vw 0 7vw;}
footer ul{-webkit-flex-wrap: wrap;flex-wrap: wrap;text-align: center;}
footer .menu li{font-size:0.94rem;line-heighr:1.1em;margin-bottom:2.4vw;}
footer .menu li:nth-child(2), footer .menu li:nth-child(3), footer .menu li:nth-child(4){border:none;}
footer .menu li:nth-child(3), footer .menu li:nth-child(4){width:100%;}
footer .logolink{margin:4vw 0 4.2vw;}
footer .logolink li{width:45%;}
footer .logolink li{padding:0 3.8vw 0 0;}
footer .logolink li:last-child{padding:0 0 0 4vw;}
footer .copyright{font-size:0.64rem;}

}