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

:root {
  /* --first-color: #005D8C; */
	--first-color: #005E7F;
}

body{
	overflow-x: hidden;
	font-size:16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, Verdana, Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	color: #fff;
	position: relative;
	max-width: 100vw;
	overflow-y: hidden;
	background-color: #F2F2F0;
}

img{
	max-width: 100%;
}


.klee-oneFont{
	font-family: 'Klee One', sans-serif;
	font-style: normal;
	font-weight: 600;
	text-align: center;
}

h2{font-size: 50px;}

h3{font-size: 46px;}

h4{font-size:25px; font-weight: bold;}

.gray{color: #5B5B5B;}

.blue{color:#00628C;}


.sp_block{display: none;}

/*------------fadein------------*/
/*scroll anime*/
.sa {
  opacity: 0;
  transition: all 1s cubic-bezier(0, .13, .21, 1);
}

.sa.show {
  opacity: 1;
  transform:none;
}

.sa--lr {transform: translate(-100px, 0);}
.sa--rl {transform: translate(100px, 0);}
.sa--up {transform: translate(0, 100px);}
.sa--down {transform: translate(0, -100px);}
.sa--scaleUp {transform: scale(.5);}
.sa--scaleDown {transform: scale(1.5);}
.sa--rotateL {transform: rotate(180deg);}
.sa--rotateR {transform: rotate(-5deg);}


/*========= wave==============*/

	.wrapper{
		position: fixed;
		z-index: 10;
		height: 100vh;
		width: 100vw;
	}

	.wave{
	  position: relative;
	  height: 100vh;
	  overflow: hidden;
	  background:#fff;
	  animation:out 0.5s 5s both,non 0s 7s both;
	  z-index: 10;
	}
	.wave canvas{
		position: absolute;
		bottom: 0;
		left:0;
		width: 100%;
	}

	.wave::after{
		content: '';
		position: absolute;
		height: 102vh;
		background: var(--first-color);
		width: 100%;
		bottom: -100vh;
	}

	.wave canvas,.wave::after{
		animation: wave_up 6s 1 both cubic-bezier(.23, .12, .68, 1),out 0.5s 5s both,non 0s 6s both;
	}

	.logo_area{
	   position: fixed;
		display: flex;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 20;
	}

	.logo_area.first{
		background:url(../img/logo_fv.svg) no-repeat center;
		background-size:cover;
		animation:out 0.5s 5s both;
	}

	.logo_area.second{
		background: var(--first-color);
		-webkit-mask-image: url(../img/logo_mask.svg);
		mask-image: url(../img/logo_mask.svg);
		-webkit-mask-size: cover;
				mask-size: cover;
		-webkit-mask-position: center;
				mask-position: center;
		-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
		animation:in 0.5s 4.5s both,zoom 6s 5.5s both,out 1s 8s;
		opacity:0;
		transform: scale(1);
	}

	@keyframes in{
		0%{ opacity: 0;}
		100%{ opacity: 1;}
	}
	@keyframes out{
		0%{ opacity: 1;}
		100%{ opacity: 0;}
	}
	@keyframes non{
		0%{ display: block;}
		100%{ display: none;}
	}
	@keyframes zoom{
		0%{transform: scale(1);}
		100%{transform:scale(900);}
	}
	@keyframes wave_up{
		0%{transform: translateY(500px);}
		100%{transform: translateY(-100vh);}
	}


.anime_up{
	position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
    opacity: 1;
    right: 0;
    top: 0;
	pointer-events: none;
	background: linear-gradient(180deg, var(--first-color) 0%, #003b65 100%);
}

.anime_up .wrapper{
	position: relative;
	height: 100%;
}

.anime_up .wave{
	background-color: transparent;
	animation: none;
	height: 50%;
	overflow: visible;
}
.anime_up .wave canvas{
	animation: none;

}

.anime_up .wave::after{
	 top: 99%;
    height: 101%;
    left: 0;
    animation: none;
	/* background: #00226c; */
	background: #007196;
}

/*section*/
section{
	background: #F2F2F0;
	z-index: 1;
	position: relative;
}

.sec_wrap{
	height: 100vh;
	width: 100%;
	position: relative;
}

.w_bg{
	color: #000;
}

.sec_inner{min-height: 100vh;}

.sec_inner.max_width_inner{
	max-width: 1024px;
	margin: 0 auto;
	width: 100%;
	padding: 30px;
}

.col2{display: flex;}

.col2 > div{
	width: 100%;
	height: 100vh;
}

.text_area {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100vh;
	z-index: 1;
}

.col2 .text_area_inner{
	text-align: left;
	padding: 20px;
}

.text_area p + p,
.text_area h2 + p,
.text_area h3 + p{
	margin-top: 1em;
}

.sub{font-size: 20px;}
.sub_s{font-size: 18px;}



/*anime*/

.anime{
	background-repeat: no-repeat;
	background-position: calc(10% * 0) center;
	background-size: 1100%;
	transition:transform 0.2s cubic-bezier(0, .71, .25, 1), background-position-y 0.2s cubic-bezier(0, .71, .25, 1);
	background-color: #F2F2F0;
}

.anime.anime_0{
	background-position-x: calc(10% * 0);
}
.anime.anime_1{
	background-position-x: calc(10% * 1)
}
.anime.anime_2{
	background-position-x: calc(10% * 2);
}
.anime.anime_3{
	background-position-x: calc(10% * 3);
}
.anime.anime_4{
	background-position-x: calc(10% * 4);
}
.anime.anime_5{
	background-position-x: calc(10% * 5);
}
.anime.anime_6{
	background-position-x: calc(10% * 6);
}
.anime.anime_7{
	background-position-x: calc(10% * 7);
}
.anime.anime_8{
	background-position-x: calc(10% * 8);
}
.anime.anime_9{
	background-position-x: calc(10% * 9);
}
.anime.anime_10{
	background-position-x: calc(10% * 10);
}
.anime.anime_11{
	background-position-x: calc(10% * 11);
}
.anime.anime_12{
	background-position-x: calc(10% * 12);
}
.anime.anime_13{
	background-position-x: calc(10% * 13);
}

.sticky_sec{
	height: 400vh;
	box-shadow: 0 0 100px rgb(0 93 140 / 10%);
}

.sticky_sec .sec_inner{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	overflow: hidden;
	z-index: 20;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

 /*fv*/

#video-area{
    position: relative;
    top: 0;
    right:0;
    left:0;
    bottom:0;
	 display: flex;
    justify-content: center;
    align-items: center;
	 width: 100vw;
}


section#video-area::before{
	content: '';
	position: absolute;
	width: 100%;
	height: calc(236vh + 900px);
   bottom: calc(-200vh - 900px);
	background: rgb(2,11,48);
	background: linear-gradient(180deg, rgba(2,11,48,0) 0%, rgba(2,11,48,1) 5%, rgba(1,58,94,1) 100%);
	z-index: 0;
}

.video_wrap{
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: absolute;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    height: 56.25vw;
    min-height: 100%;
    min-width: 100%;
	  overflow: hidden;
}

.fv_inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	 flex-direction: column;
}

.scloll_down{
	position: absolute;
   bottom: 10px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
	transition: 0.5s;
	animation: up_in 2s 5.7s ease-in-out ;
}

.scloll_down.in{
	opacity: 1;
}
.scloll_down.out{
	opacity: 0;
}



	@keyframes up_in{
		0%{ opacity: 0; margin-top: 40px;}
		100%{ opacity: 1; margin-top: 0px;}
	}

 .fv_prod_img {
	max-width: 560px;
	width: 90%;
	 animation: up_in 2s 5.5s ease-in-out both;
	 transition: 0.5s ease;
	 transform: translateY(70px);
}

.fv_prod_img.fix{
		position: fixed;
}

.fv_prod_img.abs{
		position: absolute;
}
.fv_prod_img.abs img{
	transform: translateY(0);
}

.fv_inner h1{
	max-width: 413px;
	width: 80%;
	padding-top: 170px;
	z-index: 1;
	animation: up_in 2s 6.5s ease-in-out both;
}

.klee-oneFont{
	font-size: 53px;
	margin:0px 0 50px;
}

.klee-oneFont + p{
	text-align: center;
}

.klee-oneFont,
.klee-oneFont + p{
	opacity: 0;
	transition: 1s ease;
	transform: translateY(40px);
}

.klee-oneFont.show,
.klee-oneFont + p.show{
	opacity: 1;
	transform: none;
}

/*sec1*/
section#sec1{
	background-color: transparent;
   height: calc(200vh + 300px);
	margin-bottom: 600px;
	box-shadow: none;
}
section#sec1 .sec_inner{
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}


/*sec2*/
#sec2 .anime{
	background-image: url(../img/bg_sec2.jpg);
}

/*#sec3*/

#sec3 .sec_inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: -moz-fit-content;
	width: fit-content;
	max-width: none;
}
#sec3 .sec_inner > div{
	display: flex;
	flex-direction: column;
	width: -moz-fit-content;
	width: fit-content;
}

#sec3 .sec_inner > div:last-child h4{
	margin-top: 1em;
}

#sec3 .sec_inner > div img{
	max-width: 108vh;
   width: 100%;
}

#sec3 h4{
	padding-left: 1em;
	display: inline-block;
}

/*sec4*/
#sec4{
	background: linear-gradient(180deg, var(--first-color) 0%, #003b65 100%);
}

/*sec5*/
#sec5 .anime{
	background-image: url(../img/bg_sec5.jpg);
	background-position-y:top;
}

#sec5 .anime.anime_11{
	background-position-x: calc(10% * 0);
}

/*sec6*/
#sec6 .anime{
	background-image: url(../img/bg_sec6.jpg);
	position: relative;
	background-size: 1100%;
}

#sec6 .anime::before {
	content: '';
	height: 100%;
	width: 50px;
	background: #F2F2F0;
	position: absolute;
	left: -25px;
}

#sec6 .anime_up{
	right: auto;
	left: 0;
}

/*sec7*/
#sec7 .anime{
	background-image: url(../img/bg_sec7.jpg);
	background-position-y:top;
}

	#sec7 .anime.anime_5{
		background-position-x: calc(10% * 3);
	}
	#sec7 .anime.anime_6{
		background-position-x: calc(10% * 2);
	}
	#sec7 .anime.anime_7{
		background-position-x: calc(10% * 1);
	}

/*sec8*/
#sec8{
  background: linear-gradient(180deg, var(--first-color) 0%, #003b65 100%);
}

#sec8.sticky_sec .sec_inner{
	z-index: 20;
}
#sec8 .text_area{
	background: none;

}

#sec8 .anime{
	background-image: url(../img/bg_sec8.png);
	width: 100%;
   min-height: 50vh;
   position: absolute;
	background-size: 590.3%;
	background-color: transparent;
	top: 10%;
}

#sec8 .anime.anime_0{
	background-position-x: calc(21.89% * 0);
}
#sec8 .anime.anime_1{
	background-position-x: calc(21.89% * 1)
}
#sec8 .anime.anime_2{
	background-position-x: calc(21.89% * 2);
}
#sec8 .anime.anime_3{
	background-position-x: calc(21.89% * 3);
}
#sec8 .anime.anime_4{
	background-position-x: calc(21.89% * 4);
}
#sec8 .anime.anime_5{
	background-position-x: calc(21.89% * 4);
}
#sec8 .anime.anime_6{
	background-position-x: calc(21.89% * 4);
}
#sec8 .anime.anime_4 + .text_area::before,
#sec8 .anime.anime_5 + .text_area::before,
#sec8 .anime.anime_6 + .text_area::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    margin-top: -31vh;
    margin-left: -7vw;
    z-index: -1;
    opacity: 0.8;
	 transform: scale(0.35);
}
.s_agent #sec8 .anime.anime_4 + .text_area::before,
.s_agent #sec8 .anime.anime_5 + .text_area::before,
.s_agent #sec8 .anime.anime_6 + .text_area::before {
	margin-top: -15vh;
	margin-left: -3.5vw;
}


#sec8 .anime.anime_5 + .text_area::before{
	transform: scale(0.5);
	opacity: 0.5;
}

#sec8 .anime.anime_6 + .text_area::before{
	transform: scale(1);
	opacity: 0.2;
}


#sec8 .text_area_inner{
	margin-top: 30vh;
}

#sec8 .anime_up{
	width: 100%;
}

/*sec9*/
#sec9 {
	background-size: cover;
}

#sec9 .sec_inner{
	position: relative;
	overflow: hidden;
	height:100vh ;
}
#sec9 .sec_inner:first-of-type{
   background-size: cover;
	display: flex;
   justify-content: center;
   align-items: center;
	height: 200vh;
   position: sticky;
   top: 0;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

#sec9 .sec9_img_wrap {
	background: url(../img/fvmodal01.png) center no-repeat;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
}
#sec9 .sec9_img_wrap *{
	position: absolute;
}
#sec9 .sec9_img_wrap > img{
	width: 50vw;
}
#sec9 .sec9_img_wrap a{
	display: contents;
}
#sec9 .sec9_img_wrap a img{
	width: 10vw;
   transition: 1s ease;
	opacity: 0;
	transform: translateY(20px);
	cursor: pointer;
}
#sec9 .sec9_img_wrap a:nth-of-type(1) img{
	margin-right: -14vw;
	margin-top: -10vw;
}
#sec9 .sec9_img_wrap a:nth-of-type(2) img{
	margin-right: 38vw;
   margin-top: -6vw;
}

#sec9 .sec9_img_wrap a:nth-of-type(3) img{
	margin-right: -22vw;
   margin-top: 6vw;
}

.s_agent #sec9 .sec9_img_wrap a:nth-of-type(1) img{
	margin-left: 10vw;
	margin-top: -5.5vw;
	margin-right: 0;
}
.s_agent #sec9 .sec9_img_wrap a:nth-of-type(2) img{
	margin-right: 0;
	margin-top: -3vw;
	margin-left: -17vw;
}

.s_agent #sec9 .sec9_img_wrap a:nth-of-type(3) img{
	margin-right: 0;
	margin-left: 10vw;
	margin-top: 3vw;
}

#sec9 .sec9_img_wrap a img.show{
	opacity: 1;
	transform: none;
}



#sec9 .sec9_table_wrap{
	 width: 100vw;
    height: 100vh;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
	background-color: rgba(0,0,0,0.2);
}

#sec9 .sec9_table_wrap::after{
	content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: url(../img/sec9_bg.jpg) no-repeat;
    background-size: cover;
    z-index: -1;
}


#sec9 table{
	border-spacing: 0px 40px;
}

#sec9 table th{
	font-size: 40px;
	border-right: 1px solid;
	padding-right: 20px;
	font-weight: 500;
}
#sec9 table td{
	padding-left: 20px;
}
#sec9 .anime_up{
	width: 100%;
  mix-blend-mode: normal;
  height: 140%;
  top: -40%;
	opacity: 1;
	transition: 4s cubic-bezier(0, .47, .25, 1);
}

#sec9 .anime_up.show{
	opacity: 1;
	top: 60%;
}


/*sec10*/
#sec10 {
	text-align: left;
	background: linear-gradient(180deg, var(--first-color) 0%, #003b65 100%);
	height: 100vh;
   min-height: 800px;
}
#sec10 .sec_inner{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#sec10 h2{
	max-width: 480px;
	line-height: 0;
}
#sec10 .col2 > div{
	height: auto;
}
#sec10 .col2 > div:first-child{
	margin-top: 4em;
	display: flex;
    flex-direction: column;
    justify-content: end;
}
#sec10 .col2 > div > div:first-of-type > p{
	font-size: 30px;
}
#sec10 .col2 > div > div:first-of-type > img{
	max-width: 11em;
	margin: 20px 0;
	width: 100%;
	font-size: 30px;
}
#sec10 .col2 > div > img {
    width: 100%;
}

#sec10 .col2 {
    align-items: flex-start;
}

#sec10 .sec10_prod_detail {
    margin-top: 30px;
}
#sec10 .price{
	font-size: 33px;
	margin-top: 10px;
}
#sec10 .price span{
	font-size: 0.6em;
}
#sec10 .nextInfo{
	font-size: 20px;
	margin-top: 10px;
	justify-content: center;
	align-items: center;
	display: flex;
	border: 1px solid #FFF;
}
#sec10 .nextInfo span{
	font-size: 1.25em;
	margin-left: 10px;
}
#sec10 .nextInfo img{
	margin-right: 5px;
	width: 20px;
}
#sec10 .col2 > div:last-child{
	display: flex;
    justify-content: center;
    align-items: flex-end;
}

.sec10_cover{
	 background: linear-gradient(180deg, var(--first-color) 0%, #003b65 100%);
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    right: 0;
    transition: 4s cubic-bezier(0, .57, .25, 1);
}
.sec10_cover.show{
	width: 0%;
}

/*#sec12*/
section#sec12 {
	height: auto;
}

#sec12 .sec_inner{
	min-height: auto;
}

#sec12 .col2 > div{
	height: auto;
}

#sec12 .col2:first-child{
	margin: 100px 0;
}

#sec12 .col2:first-child img{
	width: 100%;
}

#sec12 .col2:first-child div:last-child{
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

#sec12 .col2:first-child h3{
	font-size: 35px;
	line-height: 1.2;
   margin-bottom: 0.5em;
}
#sec12 .col2:first-child h3 + p{
	line-height: 2em;
	margin-bottom: 1em;
}

#sec12 .col2 a.blue{
	display: inline-block;
   padding: 0.5em 2em;
   border: 1px solid;
   font-weight: bold;
   position: relative;
	transition: all 1s cubic-bezier(0, .13, .21, 1);
}

#sec12 .col2 a.blue span{
	position: relative;
    left: 10px;
    top: -2px;
}
#sec12 .col2 a.blue span svg{
	vertical-align: middle;
}

#sec12 .col2 a.blue:hover{
	color: #fff;
	background: #00628C;
	border-color: #00628C;
}

#sec12 .col2 a.blue:hover svg path{
	stroke:#fff;
	transition: 0.3s;
}

#sec12 h2{
	font-size: 30px;
	text-align: center;
	margin-top: 40px;
	font-weight: bold;
}

#sec12 .col2:last-child{
	margin: 40px 0;
}

/*20220224_imai*/
#sec12 .col2:last-child a.tel{
	font-size: 48px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0.5em;
    display: inline-block;
}

#sec12 .col2:last-child ul{
	list-style: disc;
	padding-left: 1em;
	text-align: left;
}

/*20220224_imai*/
#sec12 .col2:last-child ul a{
	text-decoration: underline;
}

#sec12 .col2:last-child ul a:hover{
	text-decoration: none;
}

#sec12 .contact_link{
	margin-top:2em;
}
#sec12 .contact_link a.blue{
	margin-top: 0.5em;
}
/*footer*/
footer {
	background: url(../img/footer_bg.jpg) no-repeat;
	background-size: cover;
	height: 180px;
	display: flex;
   justify-content: center;
   align-items: center;
}

br.br-sp {
	display: none;
}

@media only screen and (max-width: 820px) and (orientation: portrait){
	#sec10 .nextInfo{
		font-size: 16px;
	}
}

@media only screen and (max-width: 768px) and (orientation: portrait){

	.sp_block{display: block;}
	.sp_none{display: none;}

	/*font*/
	h2{font-size: 46px;}
	h2 > span{font-size: 0.7em;}
	h3{font-size: 46px;}
	h4{font-size:14px; font-weight: bold;}
	.sub{font-size: 18px;}
	.sub_s{font-size: 16px;}

	.col2{
		flex-direction: column;
	}
	.sp_reverse{
		flex-direction: column-reverse;
	}
	.text_area{
		padding: 0 20px;
		background: linear-gradient(180deg, var(--first-color) 0%, #003b65 100%);
	}
	.anime{
    	transform-origin: top;
	}


	/*sticky*/
	.sticky_sec{
		height: 300vh;
	}

	.sticky_sec .sec_inner{
		height: 200vh;
	}

	.sticky_sec .sec_inner > div{
		position: -webkit-sticky;
		position: sticky;
		-webkit-transform: translate3d(0,0,0);
	   transform: translate3d(0,0,0);
	}

	.anime_up{
		width: 100vw;
		bottom: 0;
		height: 201vh;
		mix-blend-mode: inherit;
		z-index: 100;
      background: none;
	}
	.anime_up .wave{
		height: 100%;
	}
	.anime_up .wave::after{
		content: none;
	}

	/*section*/
	.col2 .text_area_inner{
		text-align: center;
	}

	.fv_inner h1{
		padding-top: 120px;
	}

	/*sec1*/
	section#sec1{
		height: 200vh;
	}
	section#sec1 .sec_inner{
		height: 100vh;
	}
	.klee-oneFont{
		font-size: 34px;
		letter-spacing: 0;
		margin: 0px 0 25px;
		text-align: center;
	}

	#sec2 .anime{
		 width: 150%!important;
		left: -30%;
	}

	/*sec3*/
	#sec3 img{
		width: 100%;
	}

	#sec3 .sec_inner{
		padding: 0;
	}

	/*sec5*/
	#sec5 .anime{
		width: 150%!important;
    	margin-left: -25%;
	}

	/*sec6*/
	#sec6 .anime{
		transform: scale(1.2);
		transform-origin: right;
		width: 130%;
		margin-right: -15%;
	}

	/*sec7*/
	#sec7 .anime{
		width: 150%!important;
    	margin-left: -25%;
	}



	/*sec8*/
	#sec8{
		height: 200vh;
	}
	#sec8 .anime{
		transform-origin: top;
		min-height: auto;
		height: 180px;
		z-index: 100;
		width: 100vw;
		top: 17%;
		background-image: url(../img/bg_sec8_sp.png);
	}

	#sec8.sticky_sec .sec_inner{
		height: 100vh;
	}

	#sec8 .anime_up {
		opacity: 0.2;
		mix-blend-mode: multiply;
	}

	#sec8 .anime.anime_4 + .text_area::before,#sec8 .anime.anime_5 + .text_area::before,#sec8 .anime.anime_6 + .text_area::before{
		margin-top: -42vh;
      margin-left: -1vw;
	}
	/* .s_agent #sec8 .anime.anime_4 + .text_area::before,
	.s_agent #sec8 .anime.anime_5 + .text_area::before,
	.s_agent #sec8 .anime.anime_6 + .text_area::before {
		margin-top: -20vh;
		margin-left: -2vw;
	} */
	.s_agent #sec8 .anime.anime_4 + .text_area::before,
	.s_agent #sec8 .anime.anime_5 + .text_area::before,
	.s_agent #sec8 .anime.anime_6 + .text_area::before {
    margin-top: -44vh;
    margin-left: -2vw;
	}


  /*sec9*/

	#sec9 table  *{
		display: block;
		text-align: center;
	}
	#sec9 table tr:not(:last-child){
		margin-bottom: 30px;
	}
	#sec9 table th{
		display: inline-block;
		border: none;
		border-bottom: 1px solid;
		margin-bottom: 10px;
		padding: 0;
	}
	#sec9 table td{
		padding-left: 0;
	}
	#sec9 .anime_up{
	  height: 130%;
     top: -30%;
	}

	#sec9 .anime_up canvas{
		top: 0;
	}

	#sec9 .anime_up.show{
		opacity: 1;
		top: 100%;
	}
	#sec9 .anime_up .wave::after{
		content: '';
		top: 490px;
	}

	#sec9 .sec9_img_wrap {
		background: url(../img/fvmodal01-sp.png) center no-repeat;
		background-size: cover;
	}

	#sec9 .sec9_img_wrap > img{
		width: 90vw;
	}
	#sec9 .sec9_img_wrap a img{
		width: 30vw;
	}
	#sec9 .sec9_img_wrap a:nth-of-type(1) img {
		margin-right: -23vw;
		margin-top: -25vw;
	}
	#sec9 .sec9_img_wrap a:nth-of-type(2) img {
		margin-right: 60vw;
		margin-top: -22vw;
	}
	#sec9 .sec9_img_wrap a:nth-of-type(3) img {
		margin-right: -33vw;
		margin-top: 20vw;
	}

	.s_agent #sec9 .sec9_img_wrap a:nth-of-type(1) img{
		margin-left: 10vw;
		margin-top: -11.5vw;
		margin-right: 0;
	}
	.s_agent #sec9 .sec9_img_wrap a:nth-of-type(2) img{
		margin-right: 0;
		margin-top: -10vw;
		margin-left: -30vw;
	}

	.s_agent #sec9 .sec9_img_wrap a:nth-of-type(3) img{
		margin-right: 0;
		margin-left: 10vw;
		margin-top: 13vw;
	}


	/*sec10*/
	#sec10{
		height: auto;
	}
	#sec10 .col2{
		flex-flow: column-reverse;
	}
	#sec10 .col2 > div > img {
	    width: 65%;
	    margin: 20px;
	}
	#sec10 .col2 > div:first-child{
		text-align: center;
		margin-top: 1em;
	}
	#sec10 .col2 > div > div:first-of-type > p {
		font-size: calc(4vw + 10px);
	}
	#sec10 .sec10_prod_detail{
		margin-top: 20px;
	}
	.sec10_prod_detail .sub{
		font-size: 16px;
	}
	.sec10_prod_detail p{
		margin-top: 0!important;
	}
	#sec10 .col2 > div > div:first-of-type > img{
		margin: 5px 0;
		width: 80%;
	}

	#sec10 .col2 > div > p{
		font-size: 28px;
	}
	#sec10 .nextInfo{
		padding: 5px 10px;
		display: inline-flex;
	}

	/*sec12*/
	#sec12 .col2:first-child div:last-child{
		text-align: center;
		padding: 0;
		align-items: center;
	}

	#sec12 h2,#sec12 .col2:last-child{
		text-align: center;
	}



	#sec12 .col2:last-child ul{
		margin-top: 30px;
	}
	#sec12 .col2:last-child a.tel{
		font-size: 12vw;
	}
	#sec12 .col2:last-child a.tel + p{
		font-size: 13px;
	}
	#sec12 .contact_link p{
		font-size: 14px;
	}


	footer{
		height: 85px;
		font-size: 10px;
	}

}

#sec2 .anime {
    position: relative;
    padding-top: unquote("min(100vh,75%)");
}

/*sticky*/
#sec3,#sec4{
	position: sticky;
   top: 0;
	box-shadow: 0 0 100px rgb(0 93 140 / 10%);
   height: 200vh;
	justify-content: flex-start;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}



@media only screen and (max-width: 1000px) and (orientation: landscape)  {
	html,body{
		background: #000;
	}

	.sec_inner.max_width_inner{
		padding:10px;
	}

	.klee-oneFont{
		font-size: 35px;
      margin: 0px 0 5px;
		margin-top: -20px;
	}
	.klee-oneFont + p{
		font-size: 15px;
	}
	.fv_prod_img{
		transform: translateY(20px);
	}

	#sec3 .sec_inner > div img{
		max-height: 35vh;
	}
	#sec3 .sec_inner > div:last-child h4 {
		margin-top: 0.5em;
	}
	#sec8 .anime{
		top: 0;
	}
	section#sec1 h2{
		margin-top: 256px;
	}
	#sec8 .anime.anime_4 + .text_area::before, #sec8 .anime.anime_5 + .text_area::before, #sec8 .anime.anime_6 + .text_area::before{
		margin-top: -50vh!important;
	}
	.s_agent #sec8 .anime.anime_4 + .text_area::before, .s_agent #sec8 .anime.anime_5 + .text_area::before, .s_agent #sec8 .anime.anime_6 + .text_area::before{
		margin-top: -27vh!important;
	}
	#sec11 .col2:last-child{
		justify-content: space-between;
	}
	#sec11 .col2 > div{
		width: 48%;
	}

}
@media only screen and (max-width: 737px) and (orientation: landscape)  {
	#sec9 table{
		border-spacing: 0px 20px;
      padding: 0 30px;
		vertical-align: middle;
	}
	#sec9 table th{
		vertical-align: middle;
		font-size: 35px;
	}
	#sec9 table td{
		vertical-align: middle;
		font-size: 17px;
	}
}

.fade_out{
	opacity: 0;
}

/* slider css */

#slider-wrap {
		position: fixed;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
		transition: 0.5s;
}

#slider-wrap.slide-track-1 {
	background-image: url(../img/modal-bg-absbl.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#slider-wrap.slide-track-2 {
	background-image: url(../img/modal-bg-twlorg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#slider-wrap.slide-track-3 {
	background-image: url(../img/modal-bg-dncgrn.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#slider-wrap.slide-track-0 {
	background-image: url(../img/modal-bg-arrpuple.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.Mdl-Tex-wrap {
    max-width: 640px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: 0;
    margin-bottom: 120px;
}

.Mdl-Tex.pc {
	display: block;
}
.Mdl-Tex.sp {
	display: none;
}


#slider {
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

body .slick-next {
    right: 42px;
    text-align: right;
    margin-left: auto;
}

body .slick-prev {
    left: 0;
    text-align: left;
    margin-right: auto;
}

span.s-strong {
	font-size: 350%;
	    font-weight: 600;
	    display: block;
	    text-align: center;
	    line-height: 1;
}

span.s-sub {
    font-size: 40px;
    text-align: center;
    display: block;
    line-height: 2em;
}

#video-area {
	transition: 1.5s;
}

.slick-slide h3 {
    font-size: 80px;
    text-align: center;
    font-weight: 600;
    line-height: 1.1em;
    margin-bottom: 0;
}

.slick-slide .item-inner h3 {
    text-align: left;
    font-size: 140px;
}

.item-inner {
    max-width: 100%;
    width: 100%;
    /* min-height: 654px; */
    margin: 0 auto;
    border: none;
    padding: 72px 60px 100px 60px;
}

span.s-sub-s {
    font-size: 25px;
    font-weight: 600;
    display: block;
    line-height: 1.4em;
}

span.s-sub-m {
    font-size: 25px;
    font-weight: 600;
    line-height: 2;
    margin-top: 62px;
    display: block;
}

a.anchor-details {
    border: solid 1px #ffffff;
    padding: 16px 48px;
    font-size: 20px;
    font-weight: 600;
    margin-top: 16px;
    display: inline-block;
}

.slick-slide {
    display: flex!important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.slick-track {
    overflow: auto;
    display: flex!important;
    height: 100vh;
    overflow: hidden;
}

.image-item-02 {
    position: relative;
    top: -39%;
    left: 0;
}

img.Moonnight-a-01 {
    position: absolute;
    max-width: calc(953px/2);
    left: -68%;
    top: -60px;
}

img.Moonnight-a-02 {
    max-width: 952px;
    top: -100%;
    left: -80px;
    position: absolute;
}

img.Moonnight-b-01 {
    max-width: calc(952px/2);
    top: -160px;
    right: -75%;
    position: absolute;
}

img.Moonnight-b-02 {
    position: absolute;
    max-width: 877px;
    left: -50%;
    top: 0;
}

.image-item-02.item-03 {
    top: -20%;
}

#slider-wrap .slick-dots {
	position: fixed;
	bottom: 0;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 0 42px 0;
	list-style: none;
	text-align: center;
	z-index: 2;
	max-width: 170px;
}

#slider-wrap .slick-dots li {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

#slider-wrap .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 38px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

#slider-wrap .slick-dots li button:before {
    /* font-family: 'slick'; */
    /* font-size: 6px; */
    line-height: 20px;
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 38px;
    height: 1px;
    /* content: '•'; */
    text-align: center;
    opacity: 1;
    color: #ffffff;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button.close-Btn-w {
    position: fixed;
    right: 0;
    top: 0;
    width: 48px;
    height: 48px;
    margin: 20px 32px 0px 0px;
    transition: .3s;
    opacity: 1;
    z-index: 9999;
}

button.close-Btn-w:hover {
	opacity: 0.7;
}

button.close-Btn-w .line {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    top: 0;
    bottom: 0;
    margin: auto;
}

button.close-Btn-w .line.close-01 {
    transform: rotate(45deg);
}

button.close-Btn-w .line.close-02 {
    transform: rotate(-45deg);
}

#slider-wrap .slick-next:before,
#slider-wrap .slick-prev:before {
    font-family: none;
    content: "";
    width: 78px;
    height: 20px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
}

#slider-wrap .slick-next:before {
    background-image: url(../img/next.svg);
}

#slider-wrap .slick-prev:before {
    background-image: url(../img/back.svg);
}

.arrow-wrap {
    width: 100%;
    height: 70px;
    position: absolute;
    bottom: 20px;
    display: flex;
    max-width: 1280px;
    margin: auto;
    right: 0;
    left: 0;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

/* #slider-wrap .slick-prev, #slider-wrap .slick-next {
    z-index: 5;
		    top: 91%;
} */
#slider-wrap .slick-prev, #slider-wrap .slick-next {
    z-index: 5;
    width: 80px;
    /* margin: 0 auto; */
    position: static;
    height: 30px;
}

#slider-wrap .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #ffffff;
    height: 5px;
    margin-top: 6px;
}

#video-area.my-slide-0 {
		filter: blur(20px) saturate(15%);
    top: -30px;
    left: -30px;
    width: calc(100vw + 60px);
    height: calc(100vh + 60px);
}

#video-area.my-slide-1 {
    filter: blur(20px) saturate(100%);
    top: -30px;
    left: -30px;
    width: calc(100vw + 60px);
    height: calc(100vh + 60px);
}

#video-area.my-slide-2 {
		filter: blur(20px) saturate(50%) brightness(120%) contrast(70%);
		top: -30px;
		left: -30px;
		width: calc(100vw + 60px);
		height: calc(100vh + 60px);
}

.slick-disabled {
    /* display: none!important; */
    opacity: 0!important;
    pointer-events: none;
}
.showDetail{
	z-index: 9999;
    position: fixed;
    bottom: 200px;
    font-size: 1.5em;
}
.showDetail span{
    font-size: 0.8em;
	margin-left: 5px;
}

@media screen and (max-width:1440px) {
	.slick-slide .item-inner h3 {
	    font-size: 110px;
	}
}

@media screen and (max-width:1150px) {
	.slick-slide .item-inner h3 {
	    font-size: 80px;
	}
}

@media screen and (min-width:1300px) and (min-height:1140px) {
	.Mdl-Tex-wrap {
	    max-width: 560px;
	}
	img.Moonnight-a-01 {
	    position: absolute;
	    max-width: 790px;
	    left: -92%;
	    top: -60px;
	}
	img.Moonnight-a-02 {
	    max-width: 1120px;
	}
	.item-inner {
	    /* max-width: 720px;
	    min-height: 720px; */
	}
	img.Moonnight-b-01 {
	    max-width: 790px;
	    top: -160px;
	    right: -98%;
	    position: absolute;
	}

	img.Moonnight-b-02 {
	    position: absolute;
	    max-width: 1120px;
	    left: -70%;
	    top: 0;
	}
}


@media screen and (max-width:1317px) {
	#slider-wrap .slick-prev, #slider-wrap .slick-next {
	    z-index: 5;
	    top: 91%;
	    width: 80px;
	    margin: 0 28px;
	}
	body .slick-next {
	    right: 0;
	}
}

@media screen and (max-width:960px) {
	.item-inner {
	    /* max-width: 560px; */
	    /* min-height: 560px; */
	    /* padding: 58px 42px; */
	    height: 100%!important;
	}
	a.anchor-details {
	    padding: 8px 28px;
	    font-size: 18px;
	}
	.slick-slide .item-inner h3 {
	    font-size: 70px;
	}
	img.Moonnight-a-02 {
	    max-width: 760px;
	    top: 52px;
	}
	img.Moonnight-a-01 {
	    max-width: calc(830px/2);
	    left: -63%;
	}
	img.Moonnight-b-02 {
	    position: absolute;
	    max-width: 680px;
	    left: -28%;
	    top: 52px;
	}
	img.Moonnight-b-01 {
	    max-width: calc(830px/2);
	    top: -160px;
	    right: -66%;
	    position: absolute;
	}
	button.close-Btn-w {
	    z-index: 9999;
	}
}

@media screen and (max-width:768px) {
	img.Moonnight-b-01 {
	    display: none!important;
	}
	span.s-sub-s {
	    font-size: 20px;
	}
	span.s-sub-m {
	    font-size: 20px;
	}
	img.Moonnight-b-02 {
	    position: absolute;
	    max-width: 760px;
	    left: -27%;
	    top: -8px;
	}
	img.Moonnight-a-01 {
	    display: none!important;
	}
	img.Moonnight-a-02 {
	    max-width: 800px;
	    top: 52px;
	    left: -29%;
	    position: absolute;
	}
}

@media screen and (max-width:680px) {
	/* #slider-wrap.slide-track-0 {
		background-image: url(../img/modal-bg-absbl.jpg);
	} */
	button.close-Btn-w {
	    position: fixed;
	    right: 0;
	    top: 0;
	    width: 28px;
	    height: 28px;
	    margin: 16px 16px 0px 0px;
	    transition: .3s;
	    opacity: 1;
	}
	#slider-wrap .slick-prev, #slider-wrap .slick-next {
	    z-index: 5;
	    top: auto;
	    bottom: 48px;
	    width: 58px;
	    margin: 0 14px;
	}
	#slider-wrap .slick-dots li {
	    width: 16px;
	}
	#slider-wrap .slick-dots li button:before {
	    width: 24px;
	}
	#slider-wrap .slick-next:before, #slider-wrap .slick-prev:before {
	    width: 58px;
	}
	.Mdl-Tex.pc {
		display: none;
	}
	.Mdl-Tex.sp {
		display: block;
	}
	.Mdl-Tex-wrap {
	    max-width: initial;
	    width: 100%;
	    position: absolute;
	    left: 0;
	    bottom: 118px;
	    padding: 0 34px;
	    margin-left: 0;
	    margin-bottom: 28px;
	    /* top: 65%; */
	    height: fit-content;
	}
	.item-inner {
	    max-width: 100%;
	    min-height: auto;
	    padding: 0 27px;
	    width: 100%;
	    position: relative;
	    height: 70%!important;
	}
	a.anchor-details {
	    border: solid 1px #ffffff;
	    padding: 12px 28px;
	    font-size: 18px;
	    font-weight: 600;
	    display: inline-block;
	    position: absolute;
	    bottom: 68px;
	    right: 0;
	    left: 0;
	    width: fit-content;
	    text-align: center;
	    margin: auto;
	}
	.slick-slide {
	    padding: 0 0;
	}
	.slick-slide .item-inner h3 {
	    font-size: 38px;
	    letter-spacing: -0.06em;
	}
	span.s-sub-s {
	    font-size: 20px;
	}
	span.s-sub-m {
	    font-size: 18px;
	    font-weight: 600;
	    line-height: 1.4em;
	    margin-top: 26px;
	    display: block;
	}
	img.Moonnight-a-02 {
	    max-width: 180%;
	    top: 44px;
	    left: -34%;
	    position: absolute;
	}
	img.Moonnight-b-02 {
		position: absolute;
    max-width: 170%;
    left: -33%;
    top: -8px;
	}
	.slick-slide h3 {
	    font-size: 46px;
	}
	span.s-sub {
	    font-size: 23px;
	}
	#sec10 .nextInfo{
		display: block;
		font-size: 14px;
	}
	#sec10 .nextInfo span{
		display: block;
	}
	#sec10 .nextInfo img{
		width: 18px;
		margin-bottom: 3px;
	}
	br.br-sp {
		display: block;
	}
}


/* 20221116 */
#sec11 .sec10_prod_detail {
    margin-top: 48px;
    margin-bottom: 48px;
}
#sec11 .nextInfo{
	font-size: 20px;
	margin-top: 10px;
	justify-content: center;
	align-items: center;
	display: flex;
	border: 1px solid #003b65;
	color: #003b65;
}
#sec11 .nextInfo span{
	font-size: 1.25em;
	margin-left: 10px;
}
#sec11 .nextInfo img{
	margin-right: 5px;
	width: 20px;
}

section#sec11 {
    height: fit-content;
    background-color: #fbfbf8;
}

section#sec11 .sec_inner {
    min-height: auto;
}

section#sec12 {
    height: auto;
    background-color: #f2f2f0;
}

@media screen and (max-width:820px) {
	#sec11 .nextInfo {
	    font-size: 16px;
	}
}

@media screen and (max-width:768px) {
	#sec11 .nextInfo {
	    padding: 5px 10px;
	    display: inline-flex;
	}
	section#sec11 {
    padding: 0 20px;
	}
}

@media screen and (max-width:680px) {
	#sec11 .nextInfo {
	    display: block;
	    font-size: 14px;
	    text-align: center;
	}
	#sec11 .nextInfo img {
	    width: 18px;
	    margin-bottom: 3px;
	}
	#sec11 .nextInfo span {
	    display: block;
	}
}