@charset "UTF-8";
/* CSS Document */
@media screen and (max-width:768px){
.pc{display: none;}
.sp{display: block;}


.wrap{width: 80%;margin: 0 auto;}
header{height: 65px;top: 0; position: fixed;z-index: 10;background: #fff;width: 100%;}
header .wrap{position: relative;}
header h1{width: 40vw;margin: 0 auto;height: 65px;display: flex;align-items: center;}
header .cart{width: 50px;position: absolute; left: 40px;top:60px;z-index: 1000;}
header .sp_tel{width: 30px;position: fixed;z-index: 1000;top: 20px;left: 15px;}
.nav-toggle {top:12.5px;right: 20px;}

	

	
section{padding: 50px 0;}
h1.headline01{font-size: 5.5vw;line-height: 7.5vw; text-align: center;font-weight: 600;margin: 0 0 40px 0;}
h1.headline01 span{font-size: 3.5vw;display: block;margin: 0;}
#sec01{position: relative;height: 93.3vw;padding: 0;margin: 65px 0 0 0;}
#sec01 .wrap{position: relative;z-index: 2;}
#sec01 h1{position: absolute;top: 15vw;font-size: 7vw;text-align: center;width: 100%; left: 50%;
  transform: translateY(0) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);}
#sec01 h1 p{display: block;}
#sec01 h1 p.sp_sub{margin: 10px 0 0 0;}
#sec01 h1 span{padding: 8px;}
#sec01 h1 span.color{color: #13bbba;}
#sec01 h1 span.sub01{background: #fff;line-height: 14vw;}
#sec01 h1 span.sub02{font-size: 3.8vw;background: #13bbba;color: #fff;line-height: 10vw;}
#sec01 .bg{position: relative;z-index: 1;}
#sec01 .bg ul li.s01{width: 100%;height: 93.3vw;background: url("../img/mvsp_01.jpg") no-repeat;background-size: cover;}
#sec01 .bg ul li.s02{width: 100%;height: 93.3vw;background: url("../img/mvsp_02.jpg") no-repeat;background-size: cover;}
#sec01 .bg ul li.s03{width: 100%;height: 93.3vw;background: url("../img/mvsp_03.jpg") no-repeat;background-size: cover;}

#sec02{padding: 50px 0 0 0;font-weight: 600;text-align: center;}
#sec02 .box01{padding: 30px;border: 4px solid #13bbba;color: #13bbba;}
#sec02 h1{font-size: 5.5vw; line-height: 7.5vw;}
#sec02 .line{width: 60vw;background: #d2d2d2;height: 1px;margin: 30px auto;}
#sec02 .text01{font-size: 4vw; line-height: 6.5vw;white-space: nowrap;}
	
#sec03, #sec05{color: #404040;}
#sec03{text-align: center;}
#sec03 h1{font-size: 5.5vw;line-height: 7vw; font-weight: 600;border-bottom: 5px solid #e8e8ea;display: inline-block;padding: 0 0 10px 0;margin: 0 0 50px 0;}
#sec03 ul{}
#sec03 ul li{display: flex;border-bottom: 1px solid #d2d2d2;padding: 14px 0;}
#sec03 ul li:last-child{border: none;}
#sec03 ul li div{width: 18.5vw;margin: 0 5vw 0 0;}
#sec03 ul li span{text-align: left;font-size: 4.5vw;line-height: 6vw;font-weight: 600;display: flex;align-items: center;white-space: nowrap;}
	
#sec04{background: url("../img/bg_p.jpg") repeat;}
#sec04 h1{color: #fff;}
#sec04 ul li{margin: 0 0 10px 0;}	
	
	
#sec05{background: url("../img/bg01.jpg") center center no-repeat;background-size: cover;}
#sec05 ul li{margin: 0 0 30px 0;background: #fff;}
#sec05 ul li .box01{text-align: center;color: #fff;font-size: 3.3vw;font-weight: 700;background: #13bbba;padding: 10px 0;}
#sec05 ul li .box01 span{padding: 0 0 0 1vw;}
#sec05 ul li .box02{width: 10vw;float: left;margin: 25px 20px 15px 30px;}
#sec05 ul li .box04{font-size: 4.4vw;line-height: 6.5vw;font-weight: 700;color: #13bbba;float: left;display: flex;align-items: center;height: 10vw;margin: 25px 0 20px 0;} 
#sec05 ul li .box05{font-size: 3.5vw;line-height: 6vw;clear: both;padding: 0 20px 20px 20px;}

#sec06{background: #13bbba;color: #fff;}
#sec06 .headline01 span{font-size: 9vw;margin: 0 0 10px 0;display: block;}
#sec06 .text01{font-size: 4.5vw;color: #13bbba;background: #fff;text-align: center;font-weight: 600;line-height: 6.5vw;padding: 30px 0;}
#sec06 .text01 span{font-size: 9vw;display: block;margin: 0 0 10px 0;}
#sec06 ul{display: flex;flex-wrap: wrap;justify-content: space-between;margin: 30px 0;}
#sec06 ul li{text-align: center;border: 2px solid #fff;width: 490px;margin: 0 0 15px 0;line-height: 2.6;font-size: 4vw;font-weight: 600;}
#sec06 .text02{text-align: center; font-size: 4vw;line-height: 6.5vw;}
	
#sec07{background: url("../img/bg02.jpg") center center no-repeat;background-size: cover;color: #fff;font-size: 3.3vw;}
#sec07 h1{margin: 0 0 20px 0;}
#sec07 a{display: inline-block;text-decoration: underline;}
#sec07{padding: 40px 0 100px 0;}
#sec07 dt{width: 100%;}
#sec07 dd{width: 100%;border-bottom: 1px solid #fff;}
#sec07 dd:last-child{border: none;}
#sec07 dd a{display: block;}
/*#sec07 dd a +a{margin: 10px 0 0 0;}*/
#sec07 dt{padding: 20px 0 0 0;}
#sec07 dd{padding: 10px 0 20px 0;line-height: 1.6;}
#sec07 dl{display: inline-block;}
	
#sec08{background: #d1eaea;padding: 40px 0;}
#sec08 .wrap{position: relative;}
#sec08 a{color: #fff;}
#sec08 .box03{background: #fff;padding: 50px 20px;}
#sec08 table{width: 100%;}
#sec08 th{font-weight: 600;text-align: left;width:100%;vertical-align: top;padding: 0 0 8px 0;color: #535353;float: left;}
#sec08 td{float: left;width: 100%;}
#sec08 td.sub{width: 100%;display: block;}
#sec08 td input{width: 100%;border: none;background: #f2f2f2;border-radius: 5px;padding: 15px;margin: 0 0 30px 0;font-size: 16px;}
#sec08 td textarea{width: 100%;border: none;background: #f2f2f2;border-radius: 5px;resize: vertical;height: 216px;padding: 15px;font-size: 16px;}
	
#sec08 h2{color: #13bbba;font-size: 4.5vw;text-align: center;}
#sec08 .box01{background: #13bbba;color: #fff;font-weight: 600;margin: 20px 0;text-align: center;padding: 20px 0;}
#sec08 .text01{font-size: 4vw;}
#sec08 .text02{font-size: 6vw;position: relative;padding: 0 0 0 6vw;margin: 10px 0;}
#sec08 .text02:before{content: "";width: 5.5vw;height: 5.5vw; position: absolute;background:url("../img/contact_icon.png") no-repeat center center;background-size: contain;left: 12.5vw;top: 0;}
#sec08 .text03{font-size: 3.5vw;}
#sec08 .text04{border-top: 1px solid #a0a0a0;border-bottom: 1px solid #a0a0a0;padding: 25px 0;margin: 30px 0 30px 0;color: #404040;font-size: 13px;
    line-height: 22px;}
input[type="submit"].btn01 {
    position: relative;
    width: 100%;
    max-width: 240px;
	border-radius: 26px;
    height: 52px;
    white-space: nowrap;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
	font-weight: 600;
    border: 1px solid #13bbba;
    background: none;
	transition: all 0.3s;
	color: #13bbba;}
	.btn_area{text-align: center;}
	input[type="submit"].btn01:hover{
	background: #13bbba;
	color: #fff;}	


footer{background: #fff;padding: 0 0 40px;position: relative;}
footer .logo{width: 15%;margin: 0 auto;padding: 35px 0 20px;}

footer small.en{font-size: 2.4vw;color: #13bbba;text-transform: none;}

/*ハンバーガーメニュー*/
.nav-toggle {
position: absolute;
cursor: pointer;
top:10px;
right: 10px;
}

.nav-toggle > div {
position: relative;
background: none;width: 50px;height: 50px;border-radius: 25px;
}
.nav-toggle span {
width: 24px;
height: 1.5px;
top: 15px;left: 15px;
display: block;
background: #13bbba;
position: absolute;
transition: top .5s ease, -webkit-transform .6s ease-in-out;
transition: transform .6s ease-in-out, top .5s ease;
transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
}
.nav-toggle span:nth-child(1) {
top: 15px;
}
.nav-toggle span:nth-child(2) {
top: 23px;
}
.nav-toggle span:nth-child(3) {
top: 31px;
}


.open .nav-toggle span {

}
.open .nav-toggle span:nth-child(1) {
top: 23px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .nav-toggle span:nth-child(2) {
width: 0;
}
.open .nav-toggle span:nth-child(3) {
top: 23px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/* z-index */
.nav-toggle {
z-index: 1000;
}

#container {
z-index: 900;
}

#gloval-nav {
background: #d1eaea;
font-weight: 500;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 990;
text-align: center;
display: flex;
visibility: hidden;
flex-direction: column;
/*justify-content: center;*/
align-items: center;
font-size: 3vw;
opacity: 0;
transition: opacity .6s ease, visibility .6s ease;
overflow-y: scroll;
text-align: start;
}
#gloval-nav nav{
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
width: 70vw;
margin: 0 auto;
}
#gloval-nav a {
text-decoration: none;
}
#gloval-nav ul a {font-size: 4vw;color: #13bbba;font-weight: 600;}
#gloval-nav ul + ul a {font-size: 3vw;}
#gloval-nav a:hover {
color: #666;
}
#gloval-nav ul#category{
display: flex;
justify-content: space-between;
}
#gloval-nav ul{
width: 80%;
margin: 20vw auto 30px;
}
#gloval-nav ul li {
text-align: left;
float: left;
opacity: 0;
width: 100%;
padding: 18px 0;
border-top:1px solid #91d4d4; 
}
#gloval-nav ul{
border-bottom:1px solid #91d4d4; 
}
#gloval-nav ul + ul li {
padding: 7px 0;}
#gloval-nav ul li img{width: 8%;}
/* open */
.open {
overflow: hidden;
}
.open #gloval-nav {
visibility: visible;
opacity: 1;
}
.open #gloval-nav li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
transition: opacity .9s ease, -webkit-transform 1s ease;
transition: transform 1s ease, opacity .9s ease;
transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
}

}