@charset "UTF-8";
/* CSS Document */

/*********************************************************

					　　　　初期設定

**********************************************************/

html{
	font-size: 62.5%; /*1rem=10px*/
	scroll-behavior: smooth;
}

body{
	line-height: 1.5;
	margin: 0 auto;
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif;
}

a{text-decoration: none;}

.pc{display: block;}
.sp{display: none;}

.eng{ font-family: 'Montserrat', sans-serif;}
.min{ font-family: 'Noto Serif JP', serif;}

.main{
	width: 100%;
	background: #f0f3f4;
}

.inner{
	width: 70%;
	max-width: 1500px;
	margin: 0 auto;
}

.subtitle{
	font-size: min(4.66vw,70px);
	font-weight: 500;
	text-align: center;
	color: #a7b7bd;
	transform:scaleX(85%) skewX(-10deg);
	margin-bottom: 1em;
}

.readtext,.readtext02,.readtext03{
	font-family: 'Noto Serif JP', serif;
	font-size: min(1.8vw,20px); 
	font-weight: 300;
	color: #000;
	text-align: justify;
	letter-spacing: 0.05em;
	line-height: 2;
	margin-top: 0.5em;
	width: 100%;
}
.readtext02{
	font-size: min(1.5vw,16px);
	line-height: 1.6;
}
.readtext03{
	font-size: 12px;
	line-height: 1.5;
}

.tel{
	font-size: min(1.5vw,16px);
	line-height: 1;
	color: #fff;
	margin: 0 1em 1em;
}

.time{
	font-size: min(1.5vw,16px);
	line-height: 1;
	color: #fff;
	margin: 0 1em 1.5em;
}

.titletext,.titletext02{
	font-size: min(2.25vw,30px);
	line-height: 1;
	color: #000;
	letter-spacing: 0.05em;
	padding-bottom: 0.2em;
	padding-left: 0.3em;
	margin-bottom: 0.5em;
	display: inline-block;
	z-index: 1;
}

.titletext.ex3::before{
	top: auto;
	bottom: -10%;
	height: 50%;
}

.titletext02{
	font-size: min(1.66vw,25px);
	width: 100%;
	margin-top: 0.7em;
	margin-bottom: 0;
}

.dammy{opacity: 0;}

.linktext{
	font-size: min(2.25vw,30px);
	line-height: 1;
	letter-spacing: 0.05em;
	padding-left: 0.3em;
	color: #000;
}





/*********************************************************

					スクロール

**********************************************************/

.ex{
	opacity: 0;
	transform: translateY(50%);
	transition: ease 0.3s;
}

.action{
	opacity: 1;
	transform: translateY(0);
}

.ex.d2{ transition-delay: 0.2s;}
.ex.d3{ transition-delay: 0.4s;}

.ex2{
	opacity: 0;
	mix-blend-mode: multiply;
}

.action2.a1{ animation: 0.4s change linear;}
.action2.a2{
	animation: 0.4s change linear;
	animation-delay: 0.4s;
}
.action2.a3{
	animation: 0.4s change linear;
	animation-delay: 0.8s;
}
.action2.a4{
	animation: 0.4s change2 linear forwards;
	animation-delay: 1.2s;
}

@keyframes change{
  0% { opacity: 1; } 
  1% { opacity: 1; } 
  99% { opacity: 1; } 
  100% { opacity: 1; } 
}

@keyframes change2{
  0% { opacity: 1; } 
  1% { opacity: 1; }
  100% { opacity: 1; } 
}

.ex3{
	position: relative;
	overflow: hidden;
	z-index: 1;
	display: inline-flex;
}

.ex3::before{
	content: "";
	width: 100%;
	height: 1em;
	position: absolute;
	top: 0.5em;
	left: 0;
	background: #fee664;
	z-index: -1;
	transform: translateX(-101%);
	transition: ease 1s;
}

.action3.ex3::before{ transform: translateX(0);}






/*********************************************************

					ここからheader

**********************************************************/

.header{
	width: 100%;
	height: 100vh;
}

.main-menu{
	width: 30%;
	max-width: 450px;
	height: 100%;
	padding: 2.5%;
	box-sizing: border-box;
	font-size: min(2vw,23px);
	display: flex;
	justify-content: flex-end;
	position: relative;
	z-index: 1;
}
.main-menu::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100vh + 210px);
	background: #a7b7bd;
	z-index: -1;
}

.main-menu ul{
	width: 9em;
	margin-right: 10%;
}

.main-menu img{
	margin-bottom: 3.3em;
	width: 200%;
}

.menu-text{
	color: #000;
	font-weight: 300;
	letter-spacing: 0.05em;
	display: inline-block;
	margin-bottom: 1.2em;
	position: relative;
}

.menu-text::after{
	content: "";
	width: 100%;
	height: 1px;
	background: #000;
	position: absolute;
	left: 0;
	bottom: 0;
	transform-origin: right top;
	transform: scale(0,1);
	transition: transform ease 0.3s;
}

.menu-text:hover::after{
	transform: scale(1,1);
	transform-origin: left top;
}

.header-icon{
	position: absolute;
	z-index: 3;
	left: 12%;
	top: 820px;
	width: auto;
	height: 20vh;
	max-height: 230px;
}

.slider{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 73%;
	z-index: 2;
}
@media screen and (min-width: 1500px){ .slider{ width: calc(100% - 390px);}}

.menu-btn{
	width: 40px;
	height: 40px;
	border-radius: 5px;
	padding: 6px 7px 0;
	box-sizing: border-box;
	background: rgba(255,255,255,1);
	position: fixed;
	top: 1vw;
	right: 1%;
	z-index: 10;
	cursor: pointer;
}
.menu-btn span{
	width: 100%;
	height: 3px;
	background: #a7b7bd;
	display: inline-block;
	margin: 5px auto;
	transition: ease 0.05s;
}

.menu-btn:hover span:nth-of-type(1){
	transform-origin: left top;
	transform: rotateZ(40deg);
	margin-left: 4px;
}

.menu-btn:hover span:nth-of-type(2){
	transform-origin: left bottom;
	transform: rotateZ(-40deg);
	margin-left: 4px;
}

.header-imgbox{ height: 85vh;}

.header-imgbox.p1{background: url("../img/header-img09.webp")no-repeat center / cover;}
.header-imgbox.p2{background: url("../img/header-img07.webp")no-repeat center / cover;}
.header-imgbox.p3{background: url("../img/header-img01.webp")no-repeat center / cover;}
.header-imgbox.p4{background: url("../img/header-img06.webp")no-repeat center / cover;}
.header-imgbox.p5{background: url("../img/header-img08.webp")no-repeat center / cover;}
.header-imgbox.p6{background: url("../img/header-img10.webp")no-repeat center / cover;}

.side-menu{
	position: fixed;
	right: 1%;
	top: calc(2vw + 40px);
	z-index: 5;
	font-size: 16px;
	padding: 1em 1em 0.2em;
	border-radius: 20px;
	background: rgba(255,255,255,0.5);
	border: 2px solid rgba(255,255,255,0.3);
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.15);
	opacity: 0;
	visibility: hidden;
	transition: ease 0.3s;
	transform: translateY(10%);
}

.side-menu::before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	border-radius: 20px;
	content: "";
	z-index: -1;
}

.side-menu.active{
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

.menu-text.min span{
	font-size: 70%;
	line-height: 1;
}








/*********************************************************

					ここからsec01

**********************************************************/

.sec01,.sec02,.sec03,.sec04,.sec05,.sec06,.sec07,.sec10,.sec11,.sec12{
	width: 100%;
	padding: 180px 0;
	position: relative;
}

.sec01 h2{
	position: relative;
	z-index: 2;
	width: 90%;
	margin-left: 5%;
}

.sec01-flex01{
	width: 100%;
	margin-top: 6%;
	display: flex;
	justify-content: space-between;
}

.sec01-flex02{
	width: 100%;
	margin-top: -17%;
	display: flex;
	justify-content: space-between;
}

.sec01-flex02 .ex{
	transition-delay: 0.3s;
}

.sec01-flex01 img{ width: 31%;}
.sec01-flex02 img{ width: 11.5%;}

.sec01 h3{
	margin-top: 6%;
	width: 90%;
	margin-left: 5%;
}

.sec01-wrap{ position: relative;}

.sec01-wrap-imgbox{
	width: 100%;
	margin-top: 10%;
	position: relative;
}

.sec01-wrap-imgbox img{
	width: 80%;
	margin-left: 30%;
}

.sec01-wrap-imgbox .a2,.sec01-wrap-imgbox .a3,.sec01-wrap-imgbox .a4{
	position: absolute;
	bottom: 0;
	left: 0;
}

.sec01-wrap .subtitle{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin: 2em auto 0;
}

.sec01-wrap-boxtext{
	position: absolute;
	top: 42%;
	left: 0;
	font-size: min(1.8vw,20px); 
	font-weight: 300;
	line-height: 2.0;
	white-space: nowrap;
	letter-spacing: 0.05em;
	text-align: justify;
	display: inline-block;
}

.sec01-wrap-boxtext .d1::before,
.sec01-wrap-boxtext .d3::before{
	transition: ease 1s;
}

.sec01-wrap-boxtext .d1::before{transition-delay: 0.1s;}
.sec01-wrap-boxtext .d2::before{transition-delay: 0.7s;}
.sec01-wrap-boxtext .d3::before{transition-delay: 1.1s;}
.sec01-wrap-boxtext .d4::before{transition-delay: 1.7s;}

.sec01 .ex.border{ border: solid 1px #ddd;}






/*********************************************************

					ここからreaerve

**********************************************************/

.reserve{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 8vw 0;
	background: #fff;
	position: relative;
}

.reserve-img01{
	width: 35%;
	max-width: 600px;
	margin-left: 50%;
	transform: translateX(-50%);
}

.reserve-img02{
	width: 30%;
	max-width: 500px;
	margin: 1.5% 0 0 50%;
	transform: translateX(-50%);
}

.reserve.b1{ background: none;}

.link-btn{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	overflow: hidden;
}

.link-btn::after{
	content: "こちらからご予約いただけます";
	position: absolute;
	left: 0%;
	bottom: 0%;
	color: #fff;
	font-size: min(2vw,30px);
	font-weight: 500;
	text-align: center;
	width: 100%;
	padding: 0.6em 0;
	background: #A3B9BF;
	transform-origin: right top;
	transform: scaleX(0);
	transition: transform ease 0.6s;
}
.link-btn:hover::after{
	transform: scaleX(1);
	transform-origin: left top;
}



/*********************************************************

					ここからsec02

**********************************************************/

.sec02{z-index: 1;}

.sec02 .back-img{
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	width: 33%;
	height: calc(100% - 8vw);
	z-index: -1;
}

.sec02-imgbox{
	width: 80%;
	max-width: 1300px;
	margin: 0 auto;
	aspect-ratio: 16/9;
	background: #ccc;
	overflow: hidden;
}

.sec02-imgbox video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sec02-imgtext{
	margin: 1em auto 0;
	width: 80%;
}






/*********************************************************

					ここからsec03

**********************************************************/

.sec03-flex{
	width: 90%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0 auto 16vw;
	position: relative;
	z-index: 1;
}
.sec03-flex.f1{margin-bottom: 3vw;}

.sec03-flex .titletext{ white-space: nowrap;}

.sec03-wrap{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-bottom: 16vw;
	position: relative;
	z-index: 1;
}

.sec03-wrap::after{
	content: "";
	width: 100%;
	height: 3vw;
	background: #a7b7bd;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.sec03-wrap-imgbox{
	width: 75%;
	max-width: 1500px;
	margin: 0 auto;
	padding-bottom: 1vw;
}

.sec03-flex::after{
	content: "";
	position: absolute;
	top: -10%;
	width: 10%;
	aspect-ratio: 3/2;
}

.sec03-flex.f1::after{ right: -5%; background: url("../img/sec03-number01.webp")no-repeat left / contain;}
.sec03-flex.f2::after{ left: -4%; background: url("../img/sec03-number02.webp")no-repeat left / contain;}
.sec03-flex.f3::after{ right: 37%; background: url("../img/sec03-number03.webp")no-repeat left / contain;}
.sec03-flex.f4::after{ left: 30%; background: url("../img/sec03-number04.webp")no-repeat left / contain;}
.sec03-flex.f5::after{ right: -5%; background: url("../img/sec03-number05.webp")no-repeat left / contain;}
.sec03-flex.f6::after{ left: -4%; background: url("../img/sec03-number06.webp")no-repeat left / contain;}

.sec03-flex.f5::before{
	content: "";
	position: absolute;
	right: calc(50% - 50vw);
	bottom: -6vw;
	width: 33%;
	aspect-ratio: 1/1;
	background: url("../img/module-back02.webp")no-repeat right bottom / contain;
	z-index: -1;
}

/* .sec03 .sec03-flex:last-of-type{ margin-bottom: 0;} */
.sec03 .sec03-flex:nth-last-of-type(2){ margin-bottom: 0;}

.sec03-textbox{ width: 50%;}

.sec03-imgbox{
	width: 45%;
	aspect-ratio: 5/3.5;
	background: #ccc;
}

.sec03-textbox .readtext{ margin: 0;}

.sec03-textbox .titletext:nth-of-type(2)::before{ transition-delay: 0.3s;}

.f1 .sec03-imgbox{ background: url("../img/sec03-img01.webp")no-repeat center / cover;}
.f2 .sec03-imgbox{ background: url("../img/sec03-img02.webp")no-repeat center / cover;}
.f3 .sec03-imgbox{ background: url("../img/sec03-img03.webp")no-repeat center / cover;}
.f4 .sec03-imgbox{ background: url("../img/sec03-img04.webp")no-repeat center / cover;}
.f5 .sec03-imgbox{ background: url("../img/sec03-img05.webp")no-repeat center / cover;}
.f6 .sec03-imgbox{ background: url("../img/sec03-img06.webp")no-repeat center / cover;}






/*********************************************************

					ここからsec04

**********************************************************/

.sec04{ z-index: 1;}

.sec04::before{
	content: "";
	width: 100vw;
	height: 100%;
	background: #a7b7bd url("../img/sec04-back.webp");
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	z-index: -1;
}

.sec04 .subtitle{ color: #fff;}

.sec04 .sec04-wrap .subtitle{ color: #a7b7bd;}

.sec04-flex{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.sec04-flex-wrap{
	width: 23.5%;
	padding: 2%;
	box-sizing: border-box;
	margin-bottom: 2%;
	background: #fff;
	position: relative;
}

.sec04-flex-wrap img{
	width: 70%;
	margin-left: 15%;
}

.sec04 .titletext02{ 
	position: relative;
	font-size: min(1.8vw,20px); 
	padding: 0 0 0.3em;
	border-bottom: solid 1px #a7b7bd;
	box-sizing: border-box;
}

.sec04 .titletext02::after{
	color: #a7b7bd;
	font-size: min(1.3vw,16px);
	font-weight: 300;
	position: absolute;
	right: 0;
	bottom: -0.1em;
}

.sec04 .titletext02.t1::after{ content: "Grid";}
.sec04 .titletext02.t2::after{ content: "Dot ";}
.sec04 .titletext02.t3::after{ content: "Ruled";}
.sec04 .titletext02.t4::after{ content: "Diagonal";}
.sec04 .titletext02.t5::after{ content: "Plain";}
.sec04 .titletext02.t6::after{ content: "Manuscript";}
.sec04 .titletext02.t7::after{ content: "Gray";}


/*シミュレーション*/
.sec04-wrap{
	width: 120%;
	padding: 3vw 6%;
	background: rgba(255,255,255,0.6);
	border: solid 1px #fff;
	border-radius: 1vw;
	box-shadow: 4px 4px 6px 0 rgba(0,0,0,0.1);
	box-sizing: border-box;
	margin-top: 4vw;
	margin-left: -10%;
}

.sec04-wrap h2{ margin-bottom: 0.5em;}

.sec04-wrap-flex{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.sec04-wrap-flex-l{
	width: 62%;
	position: relative;
}

.sec04-wrap-flex-l .readtext02,.sec04-wrap .readtext{ text-align: center;}

.sec04-wrap-flex-r{
	width: 32%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.sec04-wrap-flex-r div{ width: 30%;}

.sec04-wrap-flex-r .readtext03{
	text-align: center;
	margin: 0.3em auto 1.3em;
	font-family: 'Noto Sans JP', sans-serif;
}

.select-wrap{
	margin-top: 0.6vw;
	display: flex;
	justify-content: space-around;
}

.select-box,.select-box2{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: min(1.75vw,16px);
	width: 40%;
	padding: 0.2em 0.5em;
}

.sec04-wrap-flex-l-box-dammy{
	width: 100%;
	aspect-ratio: 10/7.085;
	transition: ease 0.3s;
}
.sec04-wrap-flex-l-box-dammy.active{
	aspect-ratio: 7.085/10;
	width: 70.85%;
}

.sec04-wrap-flex-l-box{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 10/7.085;
	transition: ease 0.3s;
}

.sec04-wrap-flex-l-box.active{
	transform: rotateZ(-90deg) translateX(-15%);
}

.refill{
	width: 98.4%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	margin-left: 0.8%;
	margin-top: 3.2%;
}

.refill-l,
.refill-r{
	width: 49.3%;
	position: relative;
}

.refill-l img,
.refill-r img{
	position: absolute;
	top: 0;
	left: 0;
}

.sec04-img02{
	position: absolute;
	top: 0;
	left: 0;
}

.type, .type2{ display: none;}

.sec04-btn{
	width: 10%;
	max-width: 45px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: #a7b7bd url("../img/module-icon01.webp")no-repeat center / contain;
	position: absolute;
	left: -3%;
	bottom: 11%;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
	display: inline-block;
	cursor: pointer;
	z-index: 2
}

.sec04-wrap-flex-l .readtext02{ margin-top: 2em;}

.lightbox{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}






/*********************************************************

					ここからsec05

**********************************************************/

.sec05-imgbox{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	aspect-ratio: 16/6;
	background: url(../img/sec05-img03.gif)no-repeat center / cover;
}

.sec05-wrap{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-top: 4vw;
}

.sec05-wrap img{
	width: 100%;
	max-width: 1800px;
	margin: 0 auto 4vw;
	display: block;
}

.sec05 .titletext{
	margin-left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
}

.sec05-img02{
	width: 100%;
	display: block;
	margin: 12vw auto 3vw;
}






/*********************************************************

					ここからsec06

**********************************************************/

.sec06-flex{
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.sec06 .sec06-flex:nth-of-type(2){ margin-top: 2vw;}

.sec06 .sec06-flex:nth-of-type(2) img{ 
	width: 11.5%;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}

.sec06-wrap{
	position: relative;
	width: 100%;
	margin-top: 4vw;
	z-index: 1;
}

.sec06 .back-img{
	position: absolute;
    top: 0;
    right: calc(50% - 50vw);
    width: 33%;
    aspect-ratio: 1/2;
    z-index: -1;
}

.sec06-flex03{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.sec06-logo{ width: 30%;}

.sec06-logo-text{
	display: inline-block;
	font-size: min(1.33vw,18px);
	color: #fff;
	background: #a7b7bd;
	line-height: 1;
	padding: 0.2em 0.3em 0.3em;
	margin: 0.5em 0 0 1em;
}

.sec06-spec{
	display: inline-block;
	font-size: min(1.8vw,27px);
	margin-top: 1em;
}

.sec06-spec li{
	border-bottom: solid 1px #a7b7bd;
	padding: 0 0.5em;
	margin: 0;
	line-height: 2.5;
}

.sec06-spec li:last-of-type{ border-bottom: 0;}

.sec06-spec li .text-space{
	display: inline-block;
	width: 6.5em;
	text-align: justify;
	text-align-last: justify;
	text-justify: inter-ideograph;
}

.sec06-spec li p{
	display: inline-block;
	width: 6.5em;
	text-align: justify;
	text-align-last: justify;
	text-justify: inter-ideograph;
}

.sec06-img04{
	margin: 8vw auto 0;
	display: block;
	width: 80%;
}

.sec06-flex02{
	width: 100%;
	display: flex;
	justify-content:space-between;
	margin-top: 4vw;
}

.sec06-flex02-imgbox01,
.sec06-flex02-imgbox02{
	width: 48%;
	aspect-ratio: 16/10;
	background: #ccc;
	overflow: hidden;
}

.sec06-flex02-imgbox02{ background: url("../img/sec06-img05.gif")no-repeat center / cover;}

.sec06-flex02-imgbox01 video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}



/*********************************************************

					ここからsec07

**********************************************************/
.sec07{
	padding: 0;
}

.sec07-wrap{
	width: 120%;
	margin-left: -10%;
	padding: 0 0 6vw 0;
}

.sec07 .readtext{
	max-width: 650px;
	margin: 0 auto;
	line-height: 1.8;
}





/*********************************************************

					ここからsec11

**********************************************************/

.sec11-wrap{
	width: 100%;
	max-width: 550px;
	margin: 20px auto 0;
	/* background: #ccc; */
}

.sec11-wrap li{
	border-bottom: solid 1px #a7b7bd;
	padding: 25px 1%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	z-index: 1;
}

.sec11-wrap li::before{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #fff;
	z-index: -1;
	transform-origin: right top;
	transform: scale(0,1);
	transition: transform ease 0.5s;
}

.sec11-wrap li:hover:before{
	transform: scale(1,1);
	transform-origin: left top;
}

.sec11-wrap li img{
	width: 8%;
	max-width: 25px;
	height: auto;
}

.sec11 .linktext{
	margin: 0 0 0 1em;
	padding: 0;
	width: 75%;
	/* font-size: min(1.866vw,20px); */
	font-size: 16px;
	line-height: 1.2;
}

/* .sec11 .titletext span{
	font-family: 'Noto Serif JP', serif;
    font-size: min(1.55vw,20px);
    font-weight: 300;
} */

.sec11-imgbox{
	width: 20%;
	aspect-ratio: 3/1;
	background: #ccc;
}

.sec11-imgbox.th01{ background: url(../img/sec11-thumbnail01.webp)no-repeat center / cover;} 
.sec11-imgbox.th02{ background: url(../img/sec11-thumbnail02.webp)no-repeat center / cover;} 
.sec11-imgbox.th03{ background: url(../img/sec11-thumbnail03.webp)no-repeat center / cover;} 
.sec11-imgbox.th04{ background: url(../img/sec11-thumbnail04.webp)no-repeat center / cover;} 
.sec11-imgbox.th05{ background: url(../img/sec11-thumbnail05.webp)no-repeat center / cover;} 
.sec11-imgbox.th06{ background: url(../img/sec11-thumbnail06.webp)no-repeat center / cover;} 
.sec11-imgbox.th07{ background: url(../img/sec11-thumbnail07.webp)no-repeat center / cover;} 
.sec11-imgbox.th08{ background: url(../img/sec11-thumbnail08.webp)no-repeat center / cover;} 

.link-btn2{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	/* background: #fff; */
	z-index: 2;
}






/*********************************************************

					ここからsec12

**********************************************************/

.sec12-flex{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.sec12-wrap{
	width: 31%;
}
.sec12-wrap .twitter-tweet{
	margin-top: 2.333vw!important;
}



/*********************************************************

					ここからfooter

**********************************************************/

.footer{
	width: 100%;
	padding: 30px 0;
	background: #a7b7bd;
}

.footer img{
	display: block;
	margin: 0 auto;
	width: 20%;
	max-width: 250px;
}

.footer-flex{
	width: 100%;
	display: flex;
	justify-content: center;
}





/*********************************************************

					ここからorder-btn

**********************************************************/

.order-btn-wrap{
	width: 100%;
	font-size: 24px;
	padding: 1.5em 0 0;
	text-align: center;
}

.order-btn{
	position: relative;
	width: 35%;
	display: inline-block;
	padding: 0.3em 0 0.4em;
	line-height: 1;
	color: #fff;
	background: #a7b7bd;
	border-radius: 0.9em;
	border: 2px solid #a7b7bd;
	z-index: 1;
	overflow: hidden;
}
.order-btn::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: right top;
	transform: scale(0,1);
	background: #fff;
	z-index: -1;
	transition:transform ease-in-out 0.3s;
}
.order-btn:hover::before{
	transform-origin: left top;
	transform: scale(1,1);
}
.order-btn:hover{
	color: #a7b7bd;
}



/*********************************************************

			   ここからメディアクエリ(SP）

**********************************************************/

@media screen and (max-width: 768px){
	.pc{display: none;}
	.sp{display: block;}
	
	.main{ overflow: hidden;}
	
	.dammy-sp{
		width: 100%;
		height: 50px;
	}
	
	.header{ height: auto;}
	
	.menu-btn{
		border-radius: 0;
		top: 0;
		right: 0;
		background: #a7b7bd;
		width: 50px;
		height: 50px;
		padding: 7px 9px;
	}
	
	.menu-btn span{
		background: #fff;
		margin: 7px auto;
	}
	
	.header-sp{
		position: fixed;
		top: 0;
		left: 0;
		background: #fff;
		width: 100%;
		height: 50px;
		z-index: 3;
		padding: 8px 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.header-sp-img{
		width: calc(100% - 60px);
		max-width: 340px;
	}

	.header-icon{
		left: 5%;
		top: 100vw;
		height: 20vh;
		max-height:none;
	}
	
	.title-sp{
		width: 65%;
		max-width: 400px;
		margin: 5vw 0 5vw 5%;
		z-index: 1;
		position: relative;
	}
	
	.title-sp::before{
		content: "";
		position: absolute;
		left: -5vw;
		top: -5vw;
		height: calc(100% + 10vw);
		aspect-ratio: 1/1;
		background: url("../img/module-back01.webp")no-repeat left top / contain;
		z-index: -1;
	}
	
	.slider{
		width: 100%;
		position: relative;
	}

	.header-imgbox{
		height: auto;
		aspect-ratio: 1/1;
	}
	
	.sec01, .sec02, .sec03, .sec04, .sec05, .sec06, .sec07,.sec10,.sec11,.sec12{ padding: 17vw 0;}
	
	.inner{width: 90%;}
	
	.sec01-wrap-imgbox{
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-top: 8vw;
	}
	
	.sec01-wrap-imgbox img{
		width: 100%;
		margin-left: auto;
		margin-top: 0;
	}
	
	.sec01-wrap .subtitle{ margin-top: 12vw;}
	
	.subtitle{ font-size: min(6.5vw,45px)}
	
	.readtext, .readtext02, .readtext03{ font-size: min(3.43vw,20px);}
	
	.titletext, .titletext02{ font-size: min(4.28vw,30px);}
	
	.sec01-wrap-boxtext{
		font-size: min(3.43vw,20px);
		top: 30vw;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.sec02-imgbox,.sec02-imgtext,.sec03-flex,.sec05-imgbox{
		width: 90%;
		max-width: 540px;
	}
	
	.o1{order: 1;}
	.o2{order: 2;}
	
	.sec03-flex{ flex-wrap: wrap;}
	.sec03-flex::after{
		width: 15%;
		top: -4%;
	}
	.sec03-flex.f1{margin-bottom:16vw;}
/*	.sec03-flex.f3::after{right: 25%;}*/
	.sec03-flex.f5::before{width: 25%;}
	
	.sec03-flex.f1::after,
	.sec03-flex.f2::after,
	.sec03-flex.f3::after,
	.sec03-flex.f4::after,
	.sec03-flex.f5::after,
	.sec03-flex.f6::after,
	.sec03-flex.f7::after{
		left: -4%;
		right: auto;
	}
	
	.sec03-imgbox{
		width: 100%;
		aspect-ratio: 16/9;
	}
	
	.sec03-textbox{
		width: 100%;
		margin-top: 4vw;
	}
	
	.sec04::before{ background: #a7b7bd url("../img/sec04-back-sp.webp");}

	.sec04-wrap-sp{
		width: 95vw;
		overflow: scroll;
		margin-bottom: 16vw;
	}
	
	.sec04-flex{
		width: 600%;
		max-width: 3065px;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	.sec04-flex-wrap{
		width: 85vw;
		max-width: 400px;
		padding: 6vw;
		margin: 0 5vw 0 0;
	}
	
	.sec04-flex-wrap img{
		width: 80%;
		margin-left: 10%;
		margin-bottom: 4vw;
	}
	
	.sec04-text-sp{
		font-size: 12px;
		color: #fff;
		margin-bottom: 0.5em;
	}
	
	.sec04 .titletext02::after{ font-size: 12px;}
	
	.sec04 .titletext02{ font-size: min(4vw,25px)}
	
	.sec04-wrap{
		width: 100%;
		margin: 0;
		border-radius: 2vw;
		padding: 6vw 8%;
	}
	
	.sec04-wrap-flex{ flex-wrap: wrap;}
	
	.sec04-wrap-flex-l,.sec04-wrap-flex-r{ width: 100%;}
	
	.sec04-wrap-flex-r{ margin-top: 6vw;}
	
	.sec04-wrap-flex-r div{ width: 23%;}
	
	.sec04-wrap .readtext{
		font-size: min(3.14vw,20px);
		white-space: nowrap;
	}
	
	.sec04-wrap-flex-r .readtext03{
		font-size: min(3.14vw,20px);
		white-space: nowrap;
	}
	
	.sec04-btn{
		width: 15%;
		left: -6%;
		bottom: 20%;
	}
	
	.page-sp{
		color: #a7b7bd;
		font-size: 16px;
		font-weight: 500;
		line-height: 0.9;
		text-align: right;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		padding: 0.5em 0.4em 0 0;
	}
	.page-sp::after{
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		z-index: -1;
		width: 4em;
		aspect-ratio: 1/1;
		background: url("../img/sec04-back02.webp")no-repeat center / contain;
	}
	.page-sp::before{
		content: "";
		position: absolute;
		top: 1.3em;
		right: 0.3em;
		width: 1.8em;
		height: 1px;
		background: #a7b7bd;
		transform: rotateZ(-45deg);
	}
	
	
	.select-wrap{
		margin-top: 1vw;
		justify-content: space-between;
	}
	
	.select-box, .select-box2{
		width: 47%;
		font-size: min(3.4vw,20px);
		padding: 0.5em 0.2em;
	}
	
	.sec05-wrap{ margin-top: 8vw;}
	
	.sec05 .readtext{
		margin: 0 auto;
		width: 90%;
	}
	
	.sec06-wrap{
		margin: 8vw auto;
		width: 90%;
	}
	
	.sec06 .back-img{
		width: 25%;
		aspect-ratio: 1/1;
	}
	
	.sec06-logo{ width: 50%;}
	
	.sec06-spec{
		font-size: min(3.8vw,20px);
		margin-top: 0.3em;
	}
	.sec06-spec li{
		line-height: 1.2;
		padding: 0.7em 0;
	}
	
	.sec06-spec .readtext02{
		font-size: min(2.9vw,13px);
	}
	
	.sec06-logo-text{
		margin: 0.5em 0 0 2em;
	}
	
	.sec06 .sp-text{
		margin-left: 8.7em;
		font-size: 85%;
		letter-spacing: 0;
	}
	
	.sec06 .sp-text02{ margin-left: 7.6em;}
	
	.sec06-img04{ margin: 16vw auto 0;}
	
	.sec06-flex02{
		margin-top: 16vw;
		flex-wrap: wrap;
	}
	
	.sec06-flex02-imgbox01, .sec06-flex02-imgbox02{
		width: 100%;
		aspect-ratio: 16/9;
	}
	
	.sec06-flex02 .sec06-flex02-imgbox01:first-of-type{
		margin-bottom: 20px;
	}
	
	.sec06-flex02-imgbox02{ margin-top: 4vw;}
	
	.sec07{ padding: 17vw 0 0;}
	
	.sec07 .readtext{ width: 90%;}
	
	.sec07-wrap{
		padding: 0 0 15vw;
		width: 100vw;
		margin-left: calc(50% - 50vw);
	}
	
	.footer-flex{ flex-wrap: wrap;}
	
	.tel,.time{ font-size: min(3.14vw,20px);}
	
	.footer img{ width: 40%;}
	
	.side-menu{
		height: calc(100vh - 50px);
		top: 50px;
		right: 0;
		background: #a7b7bd;
		border-radius: 0;
		border: 0;
		transform: translateX(100%);
		opacity: 1;
		padding: 2em 4em 0 2em;
		box-shadow: none;
	}
	
	.side-menu::before{ content: none;}
	
	.menu-text{
		color: #fff;
		width: 9em;
	}
	
	.menu-text::after{ content: none;}
	
	.menu-text::before{
		content: ">";
		position: absolute;
		right: -1.5em;
	}
	
	.side-menu-back{
		position: fixed;
		top: 50px;
		width: 100%;
		height: calc(100vh - 50px);
		z-index: 3;
		background: rgba(0,0,0,0.7);
		opacity: 0;
		visibility: hidden;
		transition: ease 0.1s;
	}
	
	.side-menu-back.active{
		opacity: 1;
		visibility: visible;
		transition: ease 0.1s;
	}
	
	.side-menu .sp{ margin-top: 2em;}
	
	.reserve-img01{ width: 70%;}
	
	.link-btn::after{ transform: none;}

	.sec11 .linktext{
		font-size: 12px;
	}

	.sec11-wrap li{
		padding: 15px 2%;
	}

	.sec11-imgbox{
		width: 25%;
	}

	.sec12-flex{
		display: block;
	}
	.sec12-wrap{
		width: 100%;
	}

	.order-btn-wrap{
		font-size: 18px;
		padding: 1em 0 0;
	}

	.order-btn{
		width: 70%;
	}
	
	
	
	
}