@charset "utf-8";
.pc{
	display: none!important;
}
p#sp_bt a{
	width: 70px;
	height: 30px;
	display: block;
	position: relative;
	font-size: 0.8em;
	font-weight: bold;
	padding-top: 35px;
	padding-bottom: 5px;
	text-align: center;
	cursor: pointer;
	color: #000000;

}
p#sp_bt a:before{
	width: 50%;
	height: 2px;
	background: #000000;
	content: "";
	display: block;
	position: absolute;
	top: 20px;
	left: 25%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
p#sp_bt a span:before{
	width: 50%;
	height: 2px;
	background: #000000;
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	left: 25%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
p#sp_bt a:after{
	width: 50%;
	height: 2px;
	background: #000000;
	content: "";
	display: block;
	position: absolute;
	top: 30px;
	left: 25%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

p#sp_bt a.ac{
	position: fixed;
	z-index: 44444;
	top: 0px;
	right: 0px;
	color: #FFFFFF;
}
p#sp_bt a.ac:before{
	width: 50%;
	left: 25%;
	top: 20px;
	transform: rotate(-45deg);
	background: #FFFFFF;
}
p#sp_bt a.ac:after{
	width: 50%;
	left: 25%;
	top: 20px;
	transform: rotate(45deg);
	background: #FFFFFF;
}
p#sp_bt a.ac span:before{
	display: none;
}








.container{
	width: 95%;
	margin: 0 auto;
	position: relative;
}
body{
	padding-top: 100vw;
}
section#c04_p{
	overflow-x: hidden;
}
header{
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}
header.ac{
	position: inherit;
}

h1{
	padding: 10px;
}
h1 img{
	width: 120px;
}
.headWrap{
	display: flex;
	align-content: center;
	justify-content: space-between;
}
header nav{
	position: fixed;
	top: 0;
	left: 0;
	background: #8cb5a4;
	width: 100%;
	height: 100%;
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 33333;
}
header nav.ac{
	display: flex;
}

header nav ul{
}

header nav ul li a{
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 20px 10px;
	text-align: center;
}
header nav ul li{
}


header nav ul.navigation{
}
#mainvisual{
	flex-grow: 1;
}
#mainvisual .mvWrap{
	height: 100%;
}
#mainvisual .container{
	height: 100%;
}

#mainvisual figure{
	height: 95%;
	padding-top: 5%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	text-align: center;
}
#mainvisual figure img{
	max-height: 825px;
	max-width: 600px;
	object-fit: contain;
	width: 45vw;
	height: calc(100% - 8vw);
}
header #hbg4{
	width: 100%;
	aspect-ratio: 1/1.1;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -11;
}
header #hbg3{
	width: 100%;
	aspect-ratio: 1;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -10;
}
header #hbg2{
	width: 100%;
	aspect-ratio: 1;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -9;
}
header #hbg1{
	width: 100%;
	aspect-ratio: 1;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -8;
}
header > figure img{
	width: 100%;
	height: 100%;
}

#c01_p{
	background: url(../images/c1bg.webp) top left / 100% auto no-repeat;
	padding-top: 15vw;
	position: relative;
	top: -12vw;
	z-index: 11;
}
#c01_p .cWrap{
	background: #8cb5a4;
}

#yclink{
	display: block;
	width: 5vw;
	height: 5vw;
	position: fixed;
	top: 45vw;
	right: 2vw;
	z-index: 10;
	/*background: rgba(255, 0, 0, 0.5);*/
}
#yclink a{
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -30000em;
}
#c01_p h2{
	text-align: center;
	position: relative;
	z-index: 10;
}
.c1_1{
	width:40%;
	aspect-ratio: 478/289;
	background: url(../images/c01_05.webp) top left / 100% 100% no-repeat;
	position: absolute;
	top: 50%;
	left: -10%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 6;
}
.c1_1 span{
	display: block;
	padding:0 0 0 30px;
	font-size:min(2.3vw,1.6em);
	color: #36080c;
	font-weight: bold;
	line-height: 160%;
}
.c1kv{
	position: relative;
}
.c1kv figure img{
	position: absolute;
}
.c1kv figure img#a01_01{
	width: 25%;
	bottom: 3%;
	left: 0;
	z-index: 5;
}
.c1kv figure img#a01_02{
	width: 30%;
	bottom: 25%;
	right: 0;
	z-index: 4;
}
.c1kv figure img#a01_06{
	width: 24%;
	bottom: 0;
	right: 0;
	z-index: 3;
}

img#a01_03{
	position: absolute;
	top: 10%;
	left: 5%;
	width: 90%;
	z-index: 1;
}
img#a01_04{
	position: absolute;
	top: 12%;
	left: 5%;
	width: 90%;
	z-index: 2;
}
h3{
	margin-top: 100px;
	font-size: 1.6em;
	color: #FFFFFF;
	margin-bottom: 40px;

}
#c01_p{
	color: #FFFFFF;
}
#c01_p p{
	font-size: 1.125em;
}
.tac{
	text-align: center;
}
ol.feature{
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
	gap: 10px;
	left: 1%;
}
ol.feature li{
	list-style: none;
	width: calc(100% / 2 - 10px);
}
#c01_p{
	position: relative;
	margin-bottom: calc(100px - 12vw);
}
#c01_p:after{
	position: absolute;
	bottom: -99px;
	left: 0;
	content: "";
	display: block;
	background: url(../images/c1bgr.webp) top left / 100% 100% no-repeat;
	width: 100%;
	height: 100px;
}
section{
	position: relative;
	z-index: 10;
}
#c02_p{
	background: #FFFFFF;
	position: ;
	padding-top: 400px;
	top: -300px;
	z-index: 10;
	margin-bottom: -300px;
	padding-bottom: 200px;
}
h2{
	font-size: 2em;
	margin-bottom: 20px;
}
h2 br{
	display: none;
}

p.cap{
	margin-top: 20px;
	font-size: 1.5em;
}
p.cap span{
	font-size: 0.7em;
	display: block;
}
p.cap.p2{
	font-weight: bold;
	color: #6cb189;
}
#c03_p{
	color: #FFFFFF;
	background: #6e4c39;
	padding-top: 10vw;
	padding-bottom: 0px;
	margin-bottom:-30px;

}
#c03pbg{
	display: block;
	position: absolute;
	top: 30vw;
	left: 0;
	width: 100%;
	height: 35vw;
	z-index: 10;
}
.z100{
	position: relative;
	z-index: 11;
}
#c03pbg span{
	display: block;
	width: 100%;
	height: 100%;
	background: url(../images/c04.webp) top left / 100% 100% no-repeat ;
}

#c03_p:before{
	content: "";
	display: block;
	position: absolute;
	top: -14vw;
	width: 100%;
	height: 15vw;
	background: url(../images/c04_02.webp) top left / 100% 100% no-repeat ;
	transform: rotate(180deg);

}

#c03_p:after{
	content: "";
	display: block;
	position: absolute;
	bottom: -14vw;
	width: 100%;
	height: 15vw;
	background: url(../images/c04_02.webp) top left / 100% 100% no-repeat ;
}

.c4_01{
}
.c4_01 figure{
	width: 80%;
	margin: 0 auto;
	margin-bottom: 60px;
}
.c4_01 p{
	margin-bottom: 20px;
	font-size: 1.125em;
	line-height: 188%;
}
.feature2{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding-bottom: 40px;
	gap: 30px 2%;
}

.feature2 li{
	background: url(../images/c07.webp) top left / 100% 100% no-repeat;
	aspect-ratio: 258/216;
	display: flex;
	width: 48%;
	font-size: 1.25em;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.feature2 li:nth-child(3n+2){
	background: url(../images/c08.webp) top left / 100% 100% no-repeat;
}
.feature2 li:nth-child(3n+3){
	background: url(../images/c09.webp) top left / 100% 100% no-repeat;
}
#c04_p{
	background: #FFFFFF;
	padding-top: 20vw;
	z-index: 9;
}
h2 span{
	display: block;
	font-size: 0.7em;
}


div#slide{
	width: calc(100% - 40px);
	padding: 0px;
	border: 1px solid #251e1c;
	position: relative;
	background: #FFFFFF;
	margin-top: -50px;
	padding: 5px;
}
div#slide ul.controller{
}
div#slide ul.controller{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:0 20px;
	position: absolute;
	top: 10px;
	left: 0;
	width: calc(100% - 40px);
	z-index: 10;
}
div#slide ul.controller li{
	float: left;
	width: calc((100% - 130px) / 6);
}
div#slide ul.controller li a{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2em;
	aspect-ratio: 1;
	text-align: center;
	border-radius: 100px;
	text-decoration: none;
	background: #FFFFFF;
	color: #B3B3B3;
}
div#slide ul.controller li.current a,div#slide ul.controller li a:hover{
	color: inherit;
	background: #afd7f4;
}
div#slide ul.slide{
	width: 100%;
	aspect-ratio: 2202/1643;
	overflow:hidden;
	position: relative;
}
div#slide ul.slide li{
	position: absolute;
	top: 0;
	left:100%;
	text-align: center;
	width: 100%;
	border-radius: 5px;
	overflow: hidden;

}
div#slide ul.slide li img{

	border-radius: 5px;
width: 100%;}

div#slide ul.slide li.current{
	left: 0;
}

div#slide ul.current{
	position: absolute;
	bottom: 30px;
	left: 0;
	width: 100%;
	text-align: center;
}
div#slide ul.current li{
	display: inline-block;
}
div#slide ul.current li a{
	color: #E5E5E5;
	font-size: 1.5em;
	margin: 0 2px;
	text-decoration: none;
}
div#slide ul.current li.current a{
	color: #7D7D7D;
}
div#slide p.next img{
	width: 43px;
}

div#slide p.next{
	position: absolute;
	right: -42px;
	top: calc(50% - (83px / 2));
}
div#slide p.next a{
	opacity: 1!important;
}
#c05_p{
	background: #FFFFFF;
	padding-top: 60px;
}
#c05_p .container{
}

h2.pt2{
	color: #6cb189;
	font-size: 1.875em;
}
.c6Wrap{
	margin-bottom: 20px;
}
.c6Wrap figure{
	margin-top: 20px;
}
.c6Wrap figure img{
	width: 100%;
}

.c6Wrap .det{
}
.det1{
	padding: 5px;
	border: 1px solid #231815;
}
.det2{
	margin: 5px 0;
	font-size: 0.8em;
}
.det3{
	padding: 5px 0;
	border: 1px solid #231815;
}
.det3 h3{
	font-size: 1em;
	text-align: center;
	margin: 0;
	color: inherit;
	padding: 0;
	border-bottom: 1px solid #231815;
}
.det3 ul{
	padding: 5px 20px;
	padding-bottom: 0;
}
.det3 ul li{
	display: inline-block;
	font-size: 0.8em;
	margin-right: 10px;
}
.det3 p.tar{
	text-align: right;
	font-size: 0.8em;
}
.det4{
	margin-top: 10px;
	font-size: 0.8em;
}
.gal{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.gal li{
	width: calc(100% / 5 - 15px);
}
.gal li img{
	width: 100%;

}
#c04_p h2{
	margin-bottom: 60px;
}
#c06_p{
	background: #FFFFFF;
	padding-top: 60px;
	padding-bottom: 100px;
}
#c06_p .container{
}
#c06_p dl{
	padding: 0 5%;
}
#c06_p dl dt:first-child{
	margin-top: 50px;
}

#c06_p dl dt{
	margin-top: 100px;
	margin-bottom: 40px
}
#c06_p dl dd strong{
	margin-bottom: 50px;
}
#c06_p dl dt strong,#c06_p dl dd strong{
	display: block;
	color: #36080c;
	font-size: 1.5em;
	display: flex;
	line-height: 166%;
}
#c06_p dl dt strong:before{
	content: "Q. ";
	display: block;
	margin-right: 20px;
}

#c06_p dl dd:before{
	content: "A. ";
	display: block;
	color: #36080c;
	font-size: 1.5em;
	margin-right: 20px;
}
#c06_p dl dd {
	display: flex;
}
#c06_p dl dd span{
	display: block;
	background: #e4ac20;
	border-radius: 10px;
	padding: 20px;
	color: #FFFFFF;
	font-size: 1.25em;
	width: 100%;
}
p.bt{
	text-align: center;
	margin-top: 60px;
}
p.bt a{
	display: inline-block;
	background: #370a0d;
	border-radius: 100px;
	padding: 20px;
	min-width: 250px;
	color: #FFFFFF;
	text-decoration: none;
}
.about{
	margin-top: 100px;
	border: 1px solid #231815;
	padding: 30px;
	flex-wrap: wrap;
}
.about h2{
	text-align: center;
}

.about p{
}

footer{
	position: relative;
	z-index: 1000;
	background: #FFFFFF;
}
footer .foot_insta{
	background: #cacaca;
	padding: 40px 0 60px 0;
}
footer .foot_insta ul{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px 2%;
}
footer .foot_insta ul li{
	width: 48%;
}
footer .foot_insta ul li a{
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border: 1px solid #000000;
}

.foot_tt{
	padding: 50px 0 20px 0;
}
.foot_tt nav{
}
.foot_tt nav ul{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 10px;
}
.foot_tt nav ul a{
	font-size: 0.9em;
	color: inherit;
	text-decoration: none;
}
.foot_tt nav ul:first-child{
	margin-bottom: 20px;
}
.foot_tt nav ul:first-child a:before{
	content: "> ";
}

p#copy{
	text-align: center;
	padding-bottom: 20px;
}
p#fklogo{
	text-align: center;
	margin-top: 30px;
	margin-bottom: 10px;
}

.more{
	display: none;
	margin-top: 100px;
}
p.caution{
	font-size: 0.6em;
	margin-top: 1em;
}
.det6{
	background: #62b0e3;
	padding: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 20px 0;
}
.det6 h3{
	font-size: 1.2em;
	margin: 0;
	padding: 0px 10px;
	font-weight: bold;
	line-height: 144%;
}
.det6 p{
	font-size: 1.3em;
	padding: 10px 20px;
	background: #FFFFFF;
	min-width: 4em;
	font-weight: bold;
}