@charset "UTF-8";

/* --------------------------------------------
HEADER
--------------------------------------------- */
@media screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	:root{
		--headerHeight : calc( 92 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	:root{
		--headerHeight : 92px;
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
#header .logo{
	transition : color var( --transitionBase ) , translate var( --transitionBase );
	translate : 0 -100%;
}
#header.is-passage .logo{
	translate : 0 0;
}
@media print , screen and ( min-width : 750.02px ){
	#header .logo{
		height : --headerheight;
	}
}
@media print , screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#header .logo{
		padding-top : calc( 45 var( --designBaseY ) );
	}
	#header .logo img{
		height : calc( 43 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#header .logo{
		padding-top : calc( 45 var( --designBaseY ) );
	}
	#header .logo img{
		height : 43px;
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
@media print , screen and ( min-width : 750.02px ){
	#nav{
		height : var( --headerHeight );
		padding-top : 0;
	}
}
@media print , screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#globalNav{
		padding-top : calc( 54 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#globalNav{
		padding-top : 54px;
	}
}

/* --------------------------------------------
MESSAGE
--------------------------------------------- */
#message.animation::before , #message.animation h2 , #message.animation p{
	opacity : 0;
	transition : opacity var( --transitionBase );
}
#message.animation::before{
	transition-delay : .3s;
}
#message.animation h2{
	transition-delay : .6s;
}
#message.animation p{
	transition-delay : .9s;
}
#message.animation.is-animation::before , #message.animation.is-animation h2 , #message.animation.is-animation p{
	opacity : 1;
}
#message :where( h2 , p ){
	position : relative;
}
#message h2{
	font-weight : 200;
	letter-spacing : .05em;
}
#message p{
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	#message{
		padding-top : calc( 224 var( --remBase ) );
		padding-bottom : calc( 121 var( --remBase ) );
		background : url( "../images/home/message/bg_sp.webp" ) 0 0 / 100% auto no-repeat;
	}
	#message h2{
		margin-left : calc( 46 var( --viewportBase ) );
		font-size : 6rem;
	}
	#message p{
		width : calc( 720 var( --viewportBase ) );
		padding-inline : calc( 30 * 100% / 720 );
		padding-top : calc( ( 64 - 15 ) var( --remBase ) );
		margin-top : calc( 78 var( --remBase ) );
		font-size : calc( 30 var( --remBase ) );
		line-height : 2;
		background-color : rgb( 255 255 255 / .8 );
	}
	#message p span{
		bottom : calc( 6 var( --remBase ) );
		right : calc( -164 * 100% / 720 );
		display : block;
		width : calc( 393 * 100% / 720 );
		height : calc( 119 var( --remBase ) );
		margin-top : calc( ( 24 - 15 ) var( --remBase ) );
		margin-left : calc( ( ( ( 750 - 393 ) / 2 ) - 30 ) * 100% / 720 );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#message{
		position : relative;
		overflow : hidden;
	}
	#message::before{
		position : absolute;
		top : 0;
		display : block;
		height : 100%;
		content : "";
		background-image : url( "../images/home/message/bg_pc.webp" );
		background-repeat : no-repeat;
		background-attachment : fixed;
		background-position : 0 0;
		background-size : cover;
	}
	#message p{
		position : relative;
		line-height : calc( 44 / 22 );
		background-color : rgb( 255 255 255 / .9 );
	}
	#message p span{
		position : absolute;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#message{
		height : calc( 1204 var( --designBaseY ) );
		padding-top : calc( 268 var( --designBaseY ) );
	}
	#message::before{
		left : calc( 50% - ( 467 var( --designBaseX ) ) );
		width : calc( 1807 var( --designBaseX ) );
	}
	#message h2{
		margin-left : calc( 114 var( --designBaseX ) );
		font-size : calc( 80 var( --designBaseY ) );
	}
	#message p{
		width : calc( 1125 var( --designBaseX ) );
		padding-top : calc( ( 16 - 11 ) var( --designBaseY ) );
		padding-bottom : calc( ( 82 - 11 ) var( --designBaseY ) );
		padding-left : calc( 25 var( --designBaseX ) );
		padding-right : calc( 8 var( --designBaseX ) - .05em );
		margin-top : calc( 137 var( --designBaseY ) );
		margin-left : calc( 106 var( --designBaseX ) );
		font-size : calc( 22 var( --designBaseY ) );
	}
	#message p span{
		bottom : calc( 6 var( --designBaseY ) );
		right : calc( -164 * 100% / 1125 );
		width : calc( 393 * 100% / 1125 );
		height : calc( 119 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#message{
		height : 1204px;
		padding-inline : calc( ( 100% - 2000px ) / 2 );
		padding-top : 268px;
		padding-bottom : calc( 608px - 11px );
	}
	#message::before{
		left : calc( 50% - 467px );
		width : 1807px;
	}
	#message h2{
		margin-left : 114px;
		font-size : 80px;
	}
	#message p{
		width : 1125px;
		padding-top : calc( 16px - 11px );
		padding-bottom : calc( 82px - 11px );
		padding-left : 25px;
		padding-right : calc( 8px - .05em );
		margin-top : 137px;
		margin-left : 106px;
		font-size : 22px;
	}
	#message p span{
		bottom : 6px;
		right : -164px;
		width : 393px;
		height : 119px;
	}
}

/* --------------------------------------------
WHAD WE DO
--------------------------------------------- */
#whatwodo.animation h2 , #whatwodo.animation > p , #whatwodo.animation ul{
	opacity : 0;
	transition : opacity var( --transitionBase );
}
#whatwodo.animation.is-animation h2 , #whatwodo.animation.is-animation > p , #whatwodo.animation.is-animation ul{
	opacity : 1;
}
@media screen and ( max-width : 750px ){
	#whatwodo.animation::after{
		opacity : 0;
		transition : opacity var( --transitionBase );
	}
	#whatwodo.animation.is-animation::after{
		opacity : 1;
		transition-delay : .9s;
	}
	#whatwodo.animation h2{
		transition-delay : .3s;
	}
	#whatwodo.animation > p , #whatwodo.animation ul{
		transition-delay : .6s;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#whatwodo.animation::before{
		opacity : 0;
		transition : opacity var( --transitionBase );
	}
	#whatwodo.animation.is-animation::before{
		opacity : 1;
		transition-delay : .3s;
	}
	#whatwodo.animation h2{
		transition-delay : .6s;
	}
	#whatwodo.animation > p , #whatwodo.animation ul{
		transition-delay : .9s;
	}
}
#whatwodo h2{
	font-weight : 200;
	letter-spacing : .05em;
}
#whatwodo > p{
	letter-spacing : .05em;
}
#whatwodo h3{
	font-weight : 200;
	letter-spacing : .05em;
}
#whatwodo h3 picture{
	position : absolute;
	display : block;
}
#whatwodo li p{
	letter-spacing : .05em;
}
#whatwodo a{
	width : fit-content;
	-webkit-text-decoration : underline;
	text-decoration : underline;
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	#whatwodo{
		overflow : hidden;
	}
	#whatwodo::after{
		display : block;
		width : 100%;
		height : calc( 613 var( --remBase ) );
		margin-top : calc( 108 var( --remBase ) );
		content : "";
		background : url( "../images/home/wwd/bg_sp.webp" ) 0 0 / contain no-repeat;
	}
	#whatwodo h2 , #whatwodo > p , #whatwodo ul{
		width : calc( 690 var( --viewportBase ) );
		margin-inline : auto;
	}
	#whatwodo h2{
		font-size : 6rem;
	}
	#whatwodo > p{
		font-size : calc( 30 var( --remBase ) );
		line-height : 2;
	}
	#whatwodo h2 + p{
		margin-top : calc( ( 89 - 15 ) var( --remBase ) );
	}
	#whatwodo p + p{
		margin-top : calc( ( 120 - 15 - 15 ) var( --remBase ) );
	}
	#whatwodo ul{
		margin-top : calc( ( 49 - 15 ) var( --remBase ) );
	}
	#whatwodo li{
		position : relative;
		padding-left : calc( 36 var( --percentBase ) );
	}
	#whatwodo li + li{
		margin-top : calc( 90 var( --remBase ) );
	}
	#whatwodo li::before{
		position : absolute;
		top : 0;
		left : 0;
		display : block;
		width : calc( 6 var( --percentBase ) );
		height : calc( 120 var( --remBase ) );
		content : "";
		background-color : #0c0602;
	}
	#whatwodo h3{
		font-size : 6rem;
	}
	#whatwodo li p{
		margin-top : calc( ( 34 - 12 ) var( --remBase ) );
		font-size : calc( 24 var( --remBase ) );
		line-height : 2;
	}
	#whatwodo a{
		display : block;
		margin-top : calc( ( 31 - 12 ) var( --remBase ) );
		margin-left : auto;
		font-size : 2.6rem;
	}
	#whatwodo li:nth-child( 1 ) picture{
		top : calc( -2 var( --remBase ) );
		left : calc( 412 var( --percentBase ) );
		width : calc( 306 var( --percentBase ) );
		height : calc( 94 var( --remBase ) );
	}
	#whatwodo li:nth-child( 2 ) picture{
		top : calc( -24 var( --remBase ) );
		left : calc( 416 var( --percentBase ) );
		width : calc( 304 var( --percentBase ) );
		height : calc( 94 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#whatwodo{
		position : relative;
	}
	#whatwodo::before{
		position : absolute;
		top : 0;
		display : block;
		height : 100%;
		content : "";
		background : url( "../images/home/wwd/bg_pc.webp" ) 0 0 / cover no-repeat;
	}
	#whatwodo > p{
		line-height : calc( 44 / 22 );
	}
	#whatwodo li{
		position : relative;
		display : grid;
		grid-template-rows : 1fr auto auto 1fr;
		grid-template-columns : auto 1fr;
		align-content : center;
		align-items : center;
	}
	#whatwodo li::before{
		position : absolute;
		top : 50%;
		display : block;
		content : "";
		background-color : #0c0602;
		translate : 0 -50%;
	}
	#whatwodo li h3{
		grid-row : 1/5;
		grid-column : 1;
	}
	#whatwodo li p{
		grid-row : 2;
		grid-column : 2;
	}
	#whatwodo li a{
		grid-row : 3;
		grid-column : 2;
	}
	#whatwodo h3{
		line-height : 1.2;
	}
	#whatwodo li p{
		line-height : calc( 30 / 18 );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#whatwodo{
		height : calc( 1344 var( --designBaseY ) );
		padding-top : calc( 155 var( --designBaseY ) );
		overflow : hidden;
	}
	#whatwodo::before{
		left : calc( -16 var( --designBaseX ) );
		width : calc( 626 var( --designBaseX ) );
	}
	#whatwodo > :where( h2 , p , ul ){
		margin-left : calc( 668 var( --designBaseX ) );
	}
	#whatwodo h2{
		font-size : calc( 80 var( --designBaseY ) );
	}
	#whatwodo > p{
		font-size : calc( 22 var( --designBaseY ) );
	}
	#whatwodo h2 + p{
		margin-top : calc( ( 64 - 11 ) var( --designBaseY ) );
	}
	#whatwodo p + p{
		margin-top : calc( ( 58 - 11 - 11 ) var( --designBaseY ) );
	}
	#whatwodo ul{
		margin-top : calc( ( 43 - 5 ) var( --designBaseY ) );
	}
	#whatwodo li{
		column-gap : calc( 38 * 100% / 1332 );
	}
	#whatwodo li::before{
		left : calc( 118 * 100% / 1332 );
		width : calc( 2 * 100% / 1332 );
		height : calc( 100 var( --designBaseY ) );
	}
	#whatwodo li + li{
		margin-top : calc( ( 61 - 5 - 5 ) var( --designBaseY ) );
	}
	#whatwodo h3{
		font-size : calc( 50 var( --designBaseY ) );
	}
	#whatwodo li p{
		font-size : calc( 18 var( --designBaseY ) );
	}
	#whatwodo a{
		margin-top : calc( ( 20 - 6 ) var( --designBaseY ) );
		font-size : calc( 18 var( --designBaseY ) );
	}
	#whatwodo li:nth-child( 1 ) picture{
		top : calc( ( 32 + 5 ) var( --designBaseY ) );
		left : calc( 536 * 100% / 1332 );
		width : calc( 406 * 100% / 1332 );
		height : calc( 85 var( --designBaseY ) );
	}
	#whatwodo li:nth-child( 2 ) picture{
		top : calc( ( 55 + 5 ) var( --designBaseY ) );
		left : calc( 571 * 100% / 1332 );
		width : calc( 374 * 100% / 1332 );
		height : calc( 73 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#whatwodo{
		height : 1344px;
		padding-inline : calc( ( 100% - 2000px ) / 2 );
		padding-top : 155px;
	}
	#whatwodo::before{
		left : calc( 50% - 1016px );
		width : 626px;
	}
	#whatwodo > :where( h2 , p , ul ){
		margin-left : 668px;
	}
	#whatwodo h2{
		font-size : 8rem;
	}
	#whatwodo > p{
		font-size : 22px;
	}
	#whatwodo h2 + p{
		margin-top : calc( 64px - 11px );
	}
	#whatwodo p + p{
		margin-top : calc( 58px - 11px - 11px );
	}
	#whatwodo ul{
		margin-top : calc( 53px - 5px );
	}
	#whatwodo li{
		column-gap : 38px;
	}
	#whatwodo li + li{
		margin-top : calc( 61px - 5px - 5px );
	}
	#whatwodo h3{
		font-size : 50px;
	}
	#whatwodo li p{
		font-size : 18px;
	}
	#whatwodo a{
		margin-top : calc( 20px - 6px );
		font-size : 18px;
	}
	#whatwodo li:nth-child( 1 ) picture{
		top : calc( 32px + 5px );
		left : 536px;
		width : 406px;
		height : 85px;
	}
	#whatwodo li:nth-child( 2 ) picture{
		top : calc( 55px + 5px );
		left : 571px;
		width : 374px;
		height : 73px;
	}
}

/* --------------------------------------------
WORKS
--------------------------------------------- */
#works :where( h2 , p , a ){
	opacity : 0;
	transition : opacity var( --transitionBase );
}
#works h2{
	transition-delay : .3s;
}
#works p{
	transition-delay : .6s;
}
#works a{
	transition-delay : 1.2s;
}
#works.is-animation :where( h2 , p , a ){
	opacity : 1;
}
@media print , screen and ( min-width : 750.02px ){
	#works ol{
		opacity : 0;
	}
	#works.is-animation ol{
		opacity : 1;
		animation : mqrquee var( --worksCount ) linear infinite;
	}
}
#works{
	color : var( --white );
	background-color : #0c0602;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
#works h2{
	font-weight : 200;
	letter-spacing : .05em;
}
#works ul{
	display : flex;
	flex-wrap : wrap;
}
#works ul li + li::before{
	content : "・";
}
#works p{
	letter-spacing : .05em;
}
#works a{
	display : block;
	width : fit-content;
	color : var( --white );
	-webkit-text-decoration : underline;
	text-decoration : underline;
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	#works{
		height : calc( 1111 var( --remBase ) );
		padding-top : calc( 269 var( --remBase ) );
		background-image : url( "../images/home/works/bg_sp.webp?230929" );
	}
	#works h2{
		font-size : calc( 60 var( --remBase ) );
	}
	#works p{
		margin-top : calc( ( 76 - 15 ) var( --remBase ) );
		font-size : calc( 30 var( --remBase ) );
		line-height : 2;
	}
	#works a{
		margin-top : calc( ( 54 - 15 ) var( --remBase ) );
		font-size : calc( 26 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#works{
		position : relative;
		overflow : hidden;
		background-image : url( "../images/home/works/bg_pc.webp?230929" );
	}
	#works p{
		line-height : calc( 44 / 22 );
	}
	#works ol{
		position : absolute;
		top : 0;
		backface-visibility : hidden;
		will-change : translate;
	}
	#works ol > li{
		display : grid;
		grid-template-columns : calc( 230 * 100% / 1184 ) 1fr;
		align-items : start;
	}
	#works h3{
		font-weight : 500;
		letter-spacing : .05em;
	}
	#works dl > div{
		display : grid;
		grid-template-columns : calc( 330 * 100% / 954 ) calc( 228 * 100% / 954 ) auto auto 1fr;
		grid-auto-flow : column;
		column-gap : 1em;
		align-items : start;
		font-weight : 500;
		line-height : calc( 40 / 18 );
		letter-spacing : .05em;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#works{
		height : calc( 1375 var( --designBaseY ) );
		padding-top : calc( 218 var( --designBaseY ) );
		padding-left : calc( 60 var( --designBaseX ) );
		padding-right : calc( 28 var( --designBaseX ) );
	}
	#works :where( h2 , p , a ){
		margin-left : calc( 60 var( --designBaseX ) );
	}
	#works h2{
		font-size : calc( 80 var( --designBaseY ) );
	}
	#works p{
		width : calc( 620 * 100% / 1940 );
		margin-top : calc( ( 59 - 11 ) var( --designBaseY ) );
		font-size : calc( 22 var( --designBaseY ) );
	}
	#works a{
		margin-top : calc( ( 76 - 11 ) var( --designBaseY ) );
		font-size : calc( 26 var( --designBaseY ) );
	}
	#works ol{
		left : calc( 788 var( --designBaseX ) );
		width : calc( 1184 var( --designBaseX ) );
		padding-block : calc( 40 var( --remBase ) );
	}
	#works ol > li + li{
		margin-top : calc( ( 66 - 11 - 11 ) var( --designBaseY ) );
	}
	#works h3{
		margin-top : calc( 9 var( --designBaseY ) );
		font-size : calc( 22 var( --designBaseY ) );
	}
	#works dl > div{
		font-size : calc( 18 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#works{
		height : 1375px;
		padding-inline : calc( ( 100% - 2000px ) / 2 );
		padding-top : 218px;
	}
	#works :where( h2 , p , a ){
		margin-left : 60px;
	}
	#works h2{
		font-size : 80px;
	}
	#works p{
		width : 620px;
		margin-top : calc( 59px - 11px );
		font-size : 22px;
	}
	#works a{
		margin-top : calc( 76px - 11px );
		font-size : 26px;
	}
	#works ol{
		left : calc( 50% - 212px );
		width : 1184px;
		padding-block : 40px;
	}
	#works ol > li + li{
		margin-top : calc( 66px - 11px - 11px );
	}
	#works h3{
		margin-top : 9px;
		font-size : 22px;
	}
	#works dl > div{
		font-size : 18px;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	@keyframes mqrquee{
		from{
			translate : 0 calc( 1375 var( --designBaseY ) );
		}
		to{
			translate : 0 -100%;
		}
	}
}
@media print , screen and ( min-width : 2000px ){
	@keyframes mqrquee{
		from{
			translate : 0 1375px;
		}
		to{
			translate : 0 -100%;
		}
	}
}

/* --------------------------------------------
CORPORATE
--------------------------------------------- */
#corporate.animation :where( h2 , li ){
	opacity : 0;
	transition : opacity var( --transitionBase );
}
#corporate.animation.is-animation :where( h2 , li ){
	opacity : 1;
	transition : opacity var( --transitionBase );
}
@media screen and ( max-width : 750px ){
	#corporate.animation.is-animation h2{
		transition-delay : .3s;
	}
	#corporate.animation.is-animation li:nth-child( 1 ){
		transition-delay : .6s;
	}
	#corporate.animation.is-animation li:nth-child( 2 ){
		transition-delay : .9s;
	}
	#corporate.animation.is-animation li:nth-child( 3 ){
		transition-delay : 1.2s;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#corporate.animation::before{
		opacity : 0;
		transition : opacity var( --transitionBase );
	}
	#corporate.animation.is-animation::before{
		opacity : 1;
		transition-delay : .3s;
	}
	#corporate.animation.is-animation h2{
		transition-delay : .6s;
	}
	#corporate.animation.is-animation li:nth-child( 1 ){
		transition-delay : .9s;
	}
	#corporate.animation.is-animation li:nth-child( 2 ){
		transition-delay : 1.2s;
	}
	#corporate.animation.is-animation li:nth-child( 3 ){
		transition-delay : 1.5s;
	}
}
#corporate h2{
	font-weight : 200;
	letter-spacing : .05em;
}
#corporate ul{
	position : relative;
	display : grid;
}
#corporate li:nth-child( 1 ){
	grid-row : 1;
	grid-column : 1/3;
}
#corporate li:nth-child( 2 ){
	grid-row : 2;
	grid-column : 1;
}
#corporate li:nth-child( 3 ){
	grid-row : 2;
	grid-column : 2;
}
#corporate a{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	overflow : hidden;
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#corporate a[data-before]::before{
	position : absolute;
	color : rgb( 255 255 255 / .2 );
	letter-spacing : .05em;
}
#corporate a span{
	position : relative;
	width : fit-content;
	color : #fff;
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	#corporate{
		padding-top : calc( 167 var( --remBase ) );
		padding-bottom : calc( 189 var( --remBase ) );
	}
	#corporate h2{
		font-size : 6rem;
	}
	#corporate ul{
		grid-template-rows : calc( 300 var( --remBase ) ) calc( 500 var( --remBase ) );
		grid-template-columns : repeat( 2 , calc( 330 var( --percentBase ) ) );
		row-gap : calc( 30 var( --remBase ) );
		column-gap : calc( 30 var( --percentBase ) );
		margin-top : calc( 84 var( --remBase ) );
	}
	#corporate li:nth-child( 1 ) a{
		background-image : url( "../images/home/corporate/bg_list01_sp.webp" );
	}
	#corporate li:nth-child( 2 ) a{
		background-image : url( "../images/home/corporate/bg_list02_sp.webp" );
	}
	#corporate li:nth-child( 3 ) a{
		background-image : url( "../images/home/corporate/bg_list03_sp.webp" );
	}
	#corporate a{
		display : grid;
		place-items : center;
	}
	#corporate a span{
		font-size : 6rem;
		text-indent : .05em;
	}
	#corporate li + li a span{
		writing-mode : vertical-rl;
	}
	#corporate a[data-before]::before{
		font-size : 8rem;
	}
	#corporate li:first-child a::before{
		bottom : calc( 5 var( --remBase ) );
		right : -.05em;
	}
	#corporate li + li a::before{
		bottom : -.05em;
		left : -.05em;
		writing-mode : vertical-rl;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#corporate{
		position : relative;
		overflow : hidden;
	}
	#corporate::before{
		position : absolute;
		display : block;
		height : 100%;
		content : "";
		background : url( "../images/home/corporate/bg_pc.webp" );
	}
	#corporate ul{
		grid-template-columns : repeat( 2 , calc( 600 * 100% / 1210 ) );
		column-gap : calc( 10 * 100% / 1210 );
	}
	#corporate li:nth-child( 1 ) a{
		background-image : url( "../images/home/corporate/bg_list01_pc.webp" );
	}
	#corporate li:nth-child( 2 ) a{
		background-image : url( "../images/home/corporate/bg_list02_pc.webp" );
	}
	#corporate li:nth-child( 3 ) a{
		background-image : url( "../images/home/corporate/bg_list03_pc.webp" );
	}
	#corporate a[data-before]::before{
		top : 0;
		right : -.05em;
	}
	#corporate a span{
		-webkit-text-decoration : underline;
		text-decoration : underline;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#corporate{
		height : calc( 1173 var( --designBaseY ) );
		padding-top : calc( 153 var( --designBaseY ) );
	}
	#corporate::before{
		left : calc( 1112 var( --designBaseX ) );
		width : calc( 1826 var( --designBaseX ) );
	}
	#corporate h2{
		margin-left : calc( 14 var( --designBaseX ) );
		font-size : calc( 80 var( --designBaseY ) );
	}
	#corporate ul{
		grid-template-rows : calc( 300 var( --designBaseY ) ) calc( 300 var( --designBaseY ) );
		row-gap : calc( 11 var( --designBaseY ) );
		width : calc( 1210 var( --designBaseX ) );
		margin-top : calc( 35 var( --designBaseY ) );
		margin-left : calc( 3 var( --designBaseX ) );
	}
	#corporate a{
		padding-top : calc( 233 var( --designBaseY ) );
	}
	#corporate a span{
		font-size : calc( 30 var( --designBaseY ) );
	}
	#corporate a[data-before]::before{
		top : calc( -14 var( --designBaseY ) );
		font-size : calc( 80 var( --designBaseY ) );
	}
	#corporate li:nth-child( 1 ) a{
		padding-left : calc( 27 * 100% / 1210 );
	}
	#corporate li + li a{
		padding-left : calc( 27 * 100% / 600 );
	}
}
@media print , screen and ( min-width : 2000px ){
	#corporate{
		height : 1173px;
		padding-inline : calc( ( 100% - 2000px ) / 2 );
		padding-top : 153px;
	}
	#corporate::before{
		left : calc( 50% + 112px );
		width : 1826px;
	}
	#corporate h2{
		margin-left : 14px;
		font-size : 80px;
	}
	#corporate ul{
		grid-template-rows : 300px 300px;
		row-gap : 11px;
		width : 1210px;
		margin-top : 35px;
		margin-left : 3px;
	}
	#corporate a{
		padding-top : 233px;
	}
	#corporate a span{
		font-size : 30px;
	}
	#corporate a[data-before]::before{
		top : -14px;
		padding-left : 27px;
		font-size : 80px;
	}
}

/* --------------------------------------------
ACCESS
--------------------------------------------- */
#access.animation{
	overflow : hidden;
	opacity : 0;
	transition : opacity var( --transitionBase );
}
#access.animation h2{
	opacity : 0;
	transition : opacity var( --transitionBase );
	transition-delay : .3s;
}
#access.animation li{
	translate : 100% 0;
	transition : translate .7s ease-in;
}
#access.animation li:nth-child( 1 ){
	transition-delay : .6s;
}
#access.animation li:nth-child( 2 ){
	transition-delay : .9s;
}
#access.animation.is-animation{
	opacity : 1;
}
#access.animation.is-animation h2{
	opacity : 1;
}
#access.animation.is-animation li{
	translate : 0 0;
}
#access{
	color : var( --white );
	background-color : #0b0502;
	background-repeat : no-repeat;
	background-position-x : center;
}
#access h2{
	font-weight : 200;
	letter-spacing : .05em;
}
#access iframe{
	width : 100%;
	height : 100%;
	filter : grayscale( 100% );
}
#access h3 , #access p{
	line-height : 1.5;
	letter-spacing : .05em;
	font-family: 'Noto Sans JP', sans-serif;
}
#access a{
	color : var( --white );
}
@media screen and ( max-width : 750px ){
	#access{
		padding-top : calc( 146 var( --remBase ) );
		padding-bottom : calc( ( 155 - 9 ) var( --remBase ) );
		background-image : url( "../images/home/access/bg_sp.webp?230929" );
		background-size : 100% auto;
	}
	#access h2{
		font-size : 6rem;
	}
	#access ul{
		margin-top : calc( 104 var( --remBase ) );
	}
	#access li + li{
		margin-top : calc( ( 54 - 9 ) var( --remBase ) );
	}
	#access iframe{
		width : calc( 620 var( --percentBase ) );
		aspect-ratio : 620 / 400;
	}
	#access h3{
		margin-top : calc( 21 var( --remBase ) );
		font-size : 4rem;
	}
	#access p{
		font-size : calc( 22 var( --remBase ) );
		line-height : calc( 40 / 22 );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#access{
		display : grid;
		grid-template-columns : calc( 46 var( --designBaseX ) ) auto 1fr calc( 1200 var( --designBaseX ) ) calc( 10 var( --designBaseX ) );
		align-items : start;
		background-image : url( "../images/home/access/bg_pc.webp?230929" );
		background-size : cover;
	}
	#access h2{
		grid-row : 1;
		grid-column : 2;
	}
	#access ul{
		grid-row : 1;
		grid-column : 4;
	}
	#access li{
		display : grid;
		grid-template-columns : 1fr auto auto;
	}
	#access iframe{
		grid-row : 1;
		grid-column : 1/4;
		aspect-ratio : 1200 / 400;
	}
	#access h3{
		grid-row : 2;
		grid-column : 2;
	}
	#access p{
		grid-row : 2;
		grid-column : 3;
		padding-left : 1em;
		margin-left : 1em;
		border-left : 1px solid #fff;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#access{
		padding-top : calc( 167 var( --designBaseY ) );
		padding-bottom : calc( 154 var( --designBaseY ) );
		background-position-y : calc( 220 var( --designBaseY ) );
	}
	#access h2{
		font-size : calc( 80 var( --designBaseY ) );
	}
	#access li{
		grid-template-rows : calc( 400 var( --designBaseY ) ) auto;
		row-gap : calc( 23 var( --designBaseY ) );
	}
	#access li + li{
		margin-top : calc( 76 var( --remBase ) );
	}
	#access h3 , #access p{
		font-size : calc( 20 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#access{
		padding-inline : calc( ( 100% - 2000px ) / 2 );
		padding-top : 167px;
		padding-bottom : 154px;
		background-position-y : 220px;
	}
	#access h2{
		font-size : 80px;
	}
	#access li{
		grid-template-rows : 400px auto;
		row-gap : 23px;
	}
	#access li + li{
		margin-top : 76px;
	}
	#access h3 , #access p{
		font-size : 20px;
	}
}