@charset "UTF-8";

/* --------------------------------------------
FONTS
--------------------------------------------- */
.lato{
	font-family : Lato , sans-serif;
}

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	:root{
		--headerHeight : calc( 116 var( --remBase ) );
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	:root{
		--headerHeight : calc( 120 var( --remBase ) );
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( min-width : 1480px ){
	:root{
		--headerHeight : 120px;
		font-size : 10px;
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	padding-top : var( --headerHeight );
}
@media screen and ( max-width : 750px ){
	body{
		font-size : 2.4rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	body{
		font-size : 1.6rem;
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	.wrap{
		padding-inline : calc( 32 var( --viewportBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	.wrap{
		padding-inline : calc( 20 var( --viewportBase ) );
	}
}
@media print , screen and ( min-width : 1480px ){
	.wrap{
		padding-inline : calc( ( 100% - 1440px ) / 2 );
	}
}
@media screen and ( max-width : 750px ){
	.wrap-sp{
		padding-inline : calc( 32 var( --viewportBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	.wrap-pc{
		padding-inline : calc( 20 var( --viewportBase ) );
	}
}
@media print , screen and ( min-width : 1480px ){
	.wrap-pc{
		padding-inline : calc( ( 100% - 1440px ) / 2 );
	}
}

/* --------------------------------------------
STATE
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	.is-pc{
		display : none;
	}
}
@media screen and ( max-width : 750px ){
	.is-tb{
		display : none;
	}
}
@media print , screen and ( min-width : 1480px ){
	.is-tb{
		display : none;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.is-sp{
		display : none;
	}
}

/* --------------------------------------------
COMMON
--------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
[data-before]::before{
	white-space : pre;
	content : attr( data-before );
}
[data-after]::after{
	white-space : pre;
	content : attr( data-after );
}
[data-both]::before{
	white-space : pre;
	content : attr( data-both );
}
[data-both]::after{
	white-space : pre;
	content : attr( data-both );
}
@media screen and ( max-width : 750px ){
	[data-sp-after]::after{
		white-space : pre;
		content : attr( data-sp-after );
	}
}
@media screen and ( max-width : 750px ){
	[data-sp-before]::before{
		white-space : pre;
		content : attr( data-sp-before );
	}
}
@media print , screen and ( min-width : 750.02px ){
	[data-pc-after]::after{
		white-space : pre;
		content : attr( data-pc-after );
	}
}
@media print , screen and ( min-width : 750.02px ){
	[data-pc-before]::before{
		white-space : pre;
		content : attr( data-pc-before );
	}
}

/* --------------------------------------------
FONT SIZE
--------------------------------------------- */
@media screen and ( min-width : 750.02px ) and ( max-width : 999.98px ){
	:root{
		--fontCoef : * 100vw / 1440;
	}
}
@media screen and ( min-width : 1000px ){
	:root{
		--fontCoef : * 1px;
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 10;
	display : grid;
	width : 100%;
	height : var( --headerHeight );
	background-color : white;
}
#header .logo{
	display : block;
	grid-row : 1;
	width : fit-content;
}
@media screen and ( max-width : 750px ){
	#header{
		grid-template-columns : auto  calc( 15 var( --percentBase ) ) calc( 180 var( --percentBase ) );
		align-items : center;
		justify-content : start;
	}
	#header .logo{
		grid-column : 1;
	}
	#header .logo img{
		height : calc( 65 var( --remBase ) );
	}
	#header > a.contact-bt{
		display : grid;
		grid-row : 1;
		grid-column : 3;
		place-items : center;
		height : calc( 40 var( --remBase ) );
		font-size : calc( 22 var( --remBase ) );
		color : #161515;
		background-color : #fcdc02;
		border-radius : 100vmax;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#header{
		align-content : center;
		align-items : end;
	}
	#header .logo{
		grid-column : 2;
	}
	#header .logo img{
		height : calc( 52 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#header{
		grid-template-columns : calc( 34 var( --viewportBase ) ) auto 1fr auto calc( 34 var( --viewportBase ) );
	}
}
@media print , screen and ( min-width : 1480px ){
	#header{
		grid-template-columns : 34px auto 1fr auto 20px;
	}
}

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	body:has( #menuBtn.is-open ){
		overflow : hidden;
	}
	#menuBtn.is-open + #nav{
		grid-template-rows : 100dvh;
	}
	#menuBtn.is-open span:nth-of-type( 1 ){
		scale : 0;
		translate : calc( 10 var( --remBase ) ) 0;
	}
	#menuBtn.is-open span:nth-of-type( 2 ){
		rotate : -45deg;
	}
	#menuBtn.is-open span:nth-of-type( 3 ){
		rotate : 45deg;
	}
	#menuBtn.is-open span:nth-of-type( 4 ){
		scale : 0;
		translate : calc( -10 var( --remBase ) ) 0;
	}
}
@media screen and ( max-width : 750px ){
	#menuBtn{
		position : fixed;
		top : calc( 36 var( --remBase ) );
		right : calc( 32 var( --viewportBase ) );
		z-index : 12;
		width : calc( 62 var( --viewportBase ) );
		height : calc( 40 var( --remBase ) );
		overflow : hidden;
	}
	#menuBtn span{
		position : absolute;
		left : 0;
		display : block;
		width : 100%;
		transition : all .4s;
	}
	#menuBtn span:nth-of-type( 1 ){
		top : 0;
	}
	#menuBtn span:nth-of-type( 4 ){
		bottom : 0;
	}
	#menuBtn span{
		height : calc( 5 var( --remBase ) );
		background-color : var( --primary );
	}
	#menuBtn span:nth-of-type( 2 ) , #menuBtn span:nth-of-type( 3 ){
		top : calc( 17.5 var( --remBase ) );
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#nav{
		position : fixed;
		left : 0;
		z-index : 10;
		display : grid;
		grid-template-rows : 0;
		width : 100%;
		overflow : hidden;
		transition : grid-template-rows .5s ease-in;
	}
	#nav .scroll{
		overflow-x : clip;
		overflow-y : auto;
	}
	#nav{
		top : 0;
		background-color : #434343;
	}
	#nav .scroll{
		padding-top : calc( 29 var( --remBase ) );
		padding-bottom : calc( 170 var( --remBase ) );
	}
	#nav .scroll > a{
		display : block;
		width : fit-content;
		margin-left : calc( 32 var( --viewportBase ) );
	}
	#nav .scroll > a img{
		height : calc( 65 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#nav{
		grid-row : 1;
		grid-column : 4;
		align-self : end;
	}
}

/* --------------------------------------------
GLOBAL NAV
--------------------------------------------- */
#globalNav a{
	display : block;
}
#globalNav button{
	display : grid;
	place-items : center;
	color : #161515;
	background-color : #fcdc02;
	border-radius : 100vmax;
}
@media screen and ( max-width : 750px ){
	#globalNav{
		padding-inline : calc( 75 var( --viewportBase ) );
		margin-top : calc( 88 var( --remBase ) );
	}
	#globalNav li + li:has( a ){
		border-top : solid 1px rgb( 255 255 255 / .4 );
	}
	#globalNav a{
		display : grid;
		place-items : center;
		height : calc( 80 var( --remBase ) );
		font-size : 3.2rem;
		color : white;
	}
	#globalNav button{
		width : 100%;
		height : calc( 80 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
		font-size : 3rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#globalNav{
		display : flex;
		flex-wrap : wrap-reverse;
		row-gap : calc( 8 var( --remBase ) );
		align-items : center;
		justify-content : end;
	}
	#globalNav a{
		padding-inline : calc( 12 var( --fontCoef ) );
		font-size : calc( 18 var( --fontCoef ) );
	}
	#globalNav button{
		height : calc( 40 var( --fontCoef ) );
		padding-inline : calc( 37 var( --fontCoef ) );
		font-size : calc( 18 var( --fontCoef ) );
	}
}

/* --------------------------------------------
CLOSE MENU BUTTON
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#menuCloseBtn{
		display : block;
		width : fit-content;
		margin-inline : auto;
		margin-top : calc( 85 var( --remBase ) );
	}
	#menuCloseBtn img{
		height : calc( 37 var( --remBase ) );
	}
}

/* --------------------------------------------
TOP
--------------------------------------------- */
#mv{
	display : grid;
	color : white;
	background-color : var( --primary );
}
#mv p:nth-of-type( 1 ){
	font-weight : 700;
}
@media screen and ( max-width : 750px ){
	#mv{
		grid-auto-columns : 100%;
		grid-auto-flow : row;
		align-content : end;
		height : calc( 991 var( --remBase ) );
		padding-bottom : calc( ( 52 - 6.5 ) var( --remBase ) );
		overflow-x : hidden;
		background-image : url( "../images/home/mv/bg_sp.webp" );
		background-repeat : no-repeat;
		background-position : calc( -63 var( --remBase ) ) calc( -18 var( --remBase ) );
		background-size : auto 745 var( --remBase );
	}
	#mv p:nth-of-type( 1 ){
		font-size : 4rem;
		line-height : calc( 60 / 40 );
		white-space : nowrap;
	}
	#mv p:nth-of-type( 1 ) > span:not( .pc ){
		font-size : 5rem;
		line-height : calc( 60 / 50 );
	}
	#mv p:nth-of-type( 1 ) span span{
		font-size : 4rem;
		line-height : calc( 60 / 40 );
	}
	#mv p:nth-of-type( 2 ){
		margin-top : calc( ( 25 - 5 - 6.5 ) var( --remBase ) );
		font-size : 2.6rem;
		line-height : calc( 36 / 26 );
	}
	#mv p:nth-of-type( 2 ) span{
		font-weight : 700;
	}
	#mv iframe{
		width : 100%;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#mv{
		grid-template-rows : 1fr auto calc( ( 37 - 10 - 6 ) var( --remBase ) ) auto 1fr;
		height : calc( 773 var( --remBase ) );
		overflow-x : clip;
		background-image : url( "../images/home/mv/bg_pc.webp" );
		background-position-y : calc( -174 var( --remBase ) );
		background-size : auto calc( 1059 var( --remBase ) );
	}
	#mv p{
		position : relative;
		z-index : 1;
		width : 60vw;
		pointer-events : none;
	}
	#mv p:nth-of-type( 1 ){
		grid-row : 2;
		font-size : calc( 50 var( --fontCoef ) );
		line-height : calc( 80 / 50 );
	}
	#mv p:nth-of-type( 1 ) > span:not( .sp ){
		font-size : calc( 60 var( --fontCoef ) );
		line-height : calc( 80 / 60 );
	}
	#mv p:nth-of-type( 2 ){
		grid-row : 4;
		font-size : calc( 22 var( --fontCoef ) );
		line-height : calc( 34 / 22 );
	}
	#mv iframe{
		grid-row : 1/6;
		width : 100%;
		height : 100%;
		object-fit : cover;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	#mv{
		grid-template-columns : calc( 20 var( --viewportBase ) ) 1fr 1fr calc( 20 var( --viewportBase ) );
	}
	#mv p:nth-of-type( 1 ){
		grid-column : 2/4;
	}
	#mv p:nth-of-type( 2 ){
		grid-column : 2;
	}
	#mv iframe{
		grid-column : 3/5;
	}
}
@media print , screen and ( min-width : 1480px ){
	#mv{
		grid-template-columns : 1fr 20px 720px 720px 20px 1fr;
	}
	#mv p:nth-of-type( 1 ){
		grid-column : 3/5;
	}
	#mv p:nth-of-type( 2 ){
		grid-column : 3;
	}
	#mv iframe{
		grid-column : 4/6;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1440px ){
	#mv{
		background-position-x : calc( -369 * 100vw / 1440 );
	}
}
@media screen and ( min-width : 1440.02px ) and ( max-width : 2000px ){
	#mv{
		background-position-x : calc( 50vw - 1089px );
	}
}
@media screen and ( min-width : 2000px ){
	#mv{
		background-position-x : -89px;
	}
}