@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--headerHeight : calc( 60 var( --remBase ) );
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--headerHeight : calc( 80 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width >= 1440px ){
	:root{
		font-size : 10px;
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	position : relative;
	padding-top : var( --headerHeight );
}
@media screen and ( width <= 750px ){
	body{
		font-size : clamp( var( --min ) , 2rem , var( --max ) );
	}
}
@media print , screen and ( width > 750px ){
	body{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
}

/* --------------------------------------------
CONTAINER
--------------------------------------------- */
@media screen and ( width < 1440px ){
	.container{
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	.container{
		width : calc( var( --breakPoint ) * 1px );
		padding-inline : calc( var( --gutter ) * 1px );
	}
}
@media screen and ( width <= 750px ){
	.container-sp{
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	.container-pc{
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	.container-pc{
		width : calc( var( --breakPoint ) * 1px );
		padding-inline : calc( var( --gutter ) * 1px );
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
@media screen and ( width < 1440px ){
	.wrap{
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	.wrap{
		padding-inline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
	}
}
@media screen and ( width <= 750px ){
	.wrap-sp{
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	.wrap-pc{
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	.wrap-pc{
		padding-inline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
	}
}
@media screen and ( width <= 750px ){
	.wrap02{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	.wrap02{
		padding-inline : calc( 380 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	.wrap02{
		padding-inline : calc( ( 100% - 680px ) / 2 );
	}
}
@media screen and ( width <= 750px ){
	.wrap02-sp{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	.wrap02-pc{
		padding-inline : calc( 380 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	.wrap02-pc{
		padding-inline : calc( ( 100% - 680px ) / 2 );
	}
}

/* --------------------------------------------
  STATE
  --------------------------------------------- */
@media print , screen and ( width > 750px ){
	.is-sp{
		display : none;
	}
}
@media screen and ( width <= 750px ){
	.is-pc{
		display : none;
	}
}
@media screen and ( width <= 750px ){
	.is-tb{
		display : none;
	}
}
@media print , screen and ( width >= 1440px ){
	.is-tb{
		display : none;
	}
}

/* --------------------------------------------
  ACCESSIBILITY
  --------------------------------------------- */
.visuallyhidden{
	position : absolute;
	width : 1px;
	height : 1px;
	overflow : hidden;
	clip : rect( 0 0 0 0 );
	clip-path : inset( 50% );
	white-space : nowrap;
}

/* --------------------------------------------
  COMMON MODULES
  --------------------------------------------- */
.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 );
}
@media screen and ( width <= 750px ){
	[data-before-sp]::before{
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]::before , [data-both]::after{
	white-space : pre;
	content : attr( data-both );
}
@media screen and ( width <= 750px ){
	[data-after-sp]::after{
		white-space : pre;
		content : attr( data-after-sp );
	}
	[data-both-sp]::before , [data-both-sp]::after{
		white-space : pre;
		content : attr( data-both );
	}
}
@media print , screen and ( width > 750px ){
	[data-before-pc]::before{
		white-space : pre;
		content : attr( data-before-pc );
	}
	[data-after-pc]::after{
		white-space : pre;
		content : attr( data-after-pc );
	}
	[data-both-pb]::before , [data-both-pb]::after{
		white-space : pre;
		content : attr( data-both );
	}
}

/* --------------------------------------------
  BR TO SPCE
  --------------------------------------------- */
@media screen and ( width <= 750px ){
	br.sp-space{
		content : "";
	}
	br.sp-space::after{
		content : " ";
	}
}
@media print , screen and ( width > 750px ){
	br.pc-space{
		content : "";
	}
	br.pc-space::after{
		content : " ";
	}
}
@media screen and ( width <= 750px ){
	br.sp-spaceEm{
		content : "";
	}
	br.sp-spaceEm::after{
		content : "　";
	}
}
@media print , screen and ( width > 750px ){
	br.pc-spaceEm{
		content : "";
	}
	br.pc-spaceEm::after{
		content : "　";
	}
}

/* --------------------------------------------
  LH NAGATIVE MARGIN
  --------------------------------------------- */
.lh-up{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
@media screen and ( width <= 750px ){
	.lh-up-sp{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
@media print , screen and ( width > 750px ){
	.lh-up-pc{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 10;
	display : grid;
	align-items : center;
	width : 100%;
	height : var( --headerHeight );
	background-color : white;
}
#header > .logo{
	display : block;
}
#header > .logo img{
	height : calc( 10.23 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#header{
		padding-inline : calc( 13 var( --viewportBase ) );
	}
	#header .logo{
		width : fit-content;
	}
	#header .logo img{
		height : calc( 36 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#header{
		grid-template-columns : calc( 168 var( --percentBase ) ) 1fr;
		column-gap : calc( 26 var( --percentBase ) );
		box-shadow : 0 calc( 16 var( --remBase ) ) calc( 32 var( --remBase ) ) calc( -4 var( --remBase ) ) color-mix( in srgb , #0c0c0d 10% , transparent );
	}
	#header .logo img{
		width : 100%;
		height : auto;
	}
}
@media screen and ( width <= 750px ){
	#menuBtn{
		z-index : 12;
	}
	#menuBtn span{
		position : absolute;
		left : 0;
		display : block;
		width : 100%;
		height : 100%;
		transition : all .4s;
	}
	#menuBtn span:nth-of-type( 1 ){
		top : 0;
	}
	#menuBtn span:nth-of-type( 4 ){
		bottom : 0;
	}
	#menuBtn[aria-expanded="true"] span:nth-of-type( 1 ){
		scale : 0;
		translate : calc( $( top ) var( --remBase ) ) 0;
	}
	#menuBtn[aria-expanded="true"] span:nth-of-type( 2 ){
		rotate : -45deg;
	}
	#menuBtn[aria-expanded="true"] span:nth-of-type( 3 ){
		rotate : 45deg;
	}
	#menuBtn[aria-expanded="true"] span:nth-of-type( 4 ){
		scale : 0;
		translate : calc( -$( top ) var( --remBase ) ) 0;
	}
	#menuBtn{
		position : fixed;
		top : 0;
		right : 0;
		width : calc( 60 var( --viewportBase ) );
		height : calc( 60 var( --remBase ) );
		border-color : transparent;
		border-style : solid;
		border-top-width : calc( 17 var( --remBase ) );
		border-bottom-width : calc( 20 var( --remBase ) );
		border-inline-width : calc( 15 var( --remBase ) );
	}
	#menuBtn span{
		height : calc( 2 var( --remBase ) );
		background-color : #808080;
	}
	#menuBtn span:nth-of-type( 2 ) , #menuBtn span:nth-of-type( 3 ){
		top : calc( 10.5 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	body:has( #nav:not( [inert] ) ){
		overflow : hidden;
	}
	#nav:not( [inert] ){
		translate : -100% 0;
	}
	#nav[inert]{
		translate : 0 0;
	}
	#nav{
		position : fixed;
		left : 100%;
		z-index : 11;
		overflow-y : auto;
		translate : 0 0;
	}
	#nav .scroll{
		overflow-y : auto;
	}
	#nav{
		top : var( --headerHeight );
		width : 100%;
		height : calc( 100dvh - var( --headerHeight ) );
		background-color : color-mix( in sRGB , white 100% , transparent );
	}
	#nav .scroll{
		padding-inline : calc( 27.5 var( --viewportBase ) );
		padding-top : calc( 53 var( --remBase ) );
		padding-bottom : calc( 63 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#nav{
		height : 100%;
	}
	#nav .scroll{
		height : 100%;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		@media ( prefers-reduced-motion : no-preference ){
			#nav{
				transition : translate var( --transitionBase );
			}
		}
	}
}
#navGlobal > li:not( :last-child ) a{
	font-weight : 700;
	line-height : 1.5;
}
#navGlobal .link-apply{
	--down : calc( 4 var( --remBase ) );
	height : calc( 53 var( --remBase ) );
}
#navGlobal .link-apply span{
	font-size : 1.6rem;
}
@media screen and ( width <= 750px ){
	#navGlobal > li + li:not( :last-child ){
		margin-top : calc( 16 var( --remBase ) );
	}
	#navGlobal > li:not( :last-child ) > a{
		display : block;
		width : fit-content;
		padding-inline : 1em;
		margin-inline : auto;
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#navGlobal > li:last-child{
		margin-top : calc( 61 var( --remBase ) );
	}
	#navGlobal .link-apply::after{
		right : calc( 15 * 100% / 320 );
	}
	#navGlobal .link-apply span{
		column-gap : calc( 18 * 100% / 248 );
		padding-left : calc( 72 * 100% / 320 );
	}
}
@media print , screen and ( width > 750px ){
	#navGlobal{
		display : grid;
		grid-template-columns : repeat( 6 , auto ) calc( 224 * 100% / 1046 );
		grid-auto-flow : column;
		column-gap : calc( 32 * 100% / 1046 );
		align-items : center;
		justify-content : start;
		height : 100%;
	}
	#navGlobal > li + li:not( :last-child ){
		padding-left : calc( 30 var( --remBase ) );
	}
	#navGlobal > li:not( :last-child ){
		height : 100%;
	}
	#navGlobal > li:not( :last-child ) a{
		display : grid;
		align-items : center;
		height : 100%;
		font-size : 1.6rem;
		white-space : nowrap;
	}
	#navGlobal .link-apply::after{
		right : calc( 7 * 100% / 224 );
	}
	#navGlobal .link-apply span{
		column-gap : calc( 18 * 100% / 200 );
		padding-left : calc( 24 * 100% / 224 );
	}
}
@media ( hover : hover ){
	#navGlobal > li:not( :last-child ) > a:hover{
		color : var( --orange );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#navGlobal > li > a{
		transition : color var( --transitionBase );
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
.link-apply{
	position : relative;
	z-index : 1;
	display : block;
	width : 100%;
	height : 100%;
	filter : drop-shadow( 0 calc( 16 var( --remBase ) ) calc( 32 var( --remBase ) ) color-mix( in srgb , #0c0c0d 10% , transparent ) );
}
.link-apply::before{
	position : absolute;
	top : var( --down );
	left : 0;
	z-index : 0;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	content : "";
	background-color : #bb622b;
	border-radius : calc( 8 var( --remBase ) );
}
.link-apply::after{
	position : absolute;
	top : 50%;
	display : block;
	width : auto;
	height : calc( 22 var( --remBase ) );
	aspect-ratio : 16/22;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/arrow/right01.svg" );
	filter : var( --filterWhite );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
	translate : 0 -50%;
}
.link-apply span{
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : center;
	width : 100%;
	height : 100%;
	font-weight : 700;
	line-height : 1.5;
	color : white;
	background-color : var( --orange );
	border-radius : calc( 8 var( --remBase ) );
	outline : solid 1px var( --orange );
	outline-offset : -1px;
}
.link-apply span::before{
	grid-column : 1;
	width : auto;
	height : calc( 20 var( --remBase ) );
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/icon/document01.svg" );
	filter : var( --filterWhite );
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
@media ( hover : hover ){
	.link-apply:hover{
		filter : brightness( 1.05 );
	}
	.link-apply:hover::after{
		margin-top : var( --down );
	}
	.link-apply:hover span{
		translate : 0 var( --down );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link-apply{
		transition : filter var( --transitionBase );
	}
	.link-apply::after{
		transition : margin var( --transitionBase );
	}
	.link-apply span{
		transition : translate var( --transitionBase );
	}
}