@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	:root{
		--breakPoint : 750;
		--wrapperInside : 702;
		--percentBase : * 100% / var( --wrapperInside );
		--viewportBase : * 100% / var( --breakPoint );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	:root{
		--breakPoint : 1240;
		--wrapperInside : 1180;
		--percentBase : * 100% / var( --wrapperInside );
		--viewportBase : * 100% / var( --breakPoint );
	}
}
@media print , screen and ( min-width : 1240.02px ){
	:root{
		--breakPoint : 2000;
		--wrapperInside : 1880;
		--percentBase : * 1px;
		--viewportBase : * 1px;
	}
}

/* --------------------------------------------
FONTS
--------------------------------------------- */
@font-face{
	font-family : Roboto Flex;
	src : url( "../fonts/RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.woff2" ) format( "woff2" );
}
.roboto{
	font-family : Roboto Flex , sans-serif;
}

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	html{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	html{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( min-width : 1240.02px ){
	html{
		font-size : 10px;
	}
}
@media screen and ( max-width : 750px ){
	:root{
		--headerHeight : calc( 100 var( --remBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	:root{
		--headerHeight : 140px;
	}
}
@media print , screen and ( min-width : 1240.02px ){
	:root{
		--headerHeight : 140px;
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	padding-top : calc( var( --headerHeight ) );
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	.wrap{
		padding-inline : calc( 24 * 100% / var( --breakPoint ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	.wrap{
		padding-inline : calc( 30 * 100% / var( --breakPoint ) );
	}
}
@media print , screen and ( min-width : 1240.02px ){
	.wrap{
		padding-inline : calc( ( 100% - 1180px ) / 2 );
	}
}
@media screen and ( max-width : 750px ){
	.wrap-sp{
		padding-inline : calc( 24 * 100% / var( --breakPoint ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	.wrap-pc{
		padding-inline : calc( 30 * 100% / var( --breakPoint ) );
	}
}
@media print , screen and ( min-width : 1240.02px ){
	.wrap-pc{
		padding-inline : calc( ( 100% - 1180px ) / 2 );
	}
}
@media print , screen and ( min-width : 1240.02px ){
	.wrap-full{
		max-width : 2000px;
		margin-inline : auto;
	}
}

/* --------------------------------------------
STATE
--------------------------------------------- */
@layer common{
	@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 : 1240.02px ) and ( max-width : 2000px ){
		.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 );
	}
}

/* --------------------------------------------
LAYOUT
  HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 10;
	display : grid;
	align-items : start;
	width : 100%;
	height : var( --headerHeight );
	background-color : rgb( 255 255 255 / .95 );
}
#header .logo{
	display : block;
}
#header .logo img{
	width : 100%;
	height : auto;
}
@media screen and ( max-width : 750px ){
	#header{
		grid-template-rows : calc( 18 var( --remBase ) ) 1fr;
		grid-template-columns : calc( 212 * 100% / 731 ) 1fr calc( 270 * 100% / 731 ) calc( 16 * 100% / 731 ) calc( 100 * 100% / 731 );
		justify-content : start;
		padding-left : calc( 19 var( --viewportBase ) );
	}
	#header .logo{
		grid-row : 2;
		grid-column : 1;
	}
	#header .member{
		display : grid;
		grid-row : 2;
		grid-column : 3;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		width : 100%;
		height : calc( 60 var( --remBase ) );
		padding-left : calc( 20 * 100% / 270 );
		font-size : 2.2rem;
		color : #fff;
		text-indent : .05em;
		background-color : #424245;
		border-radius : 100vmax;
	}
	#header .member::before{
		display : block;
		height : calc( 45 var( --remBase ) );
		aspect-ratio : 1;
		font-size : 0;
		content : "";
		background : url( "../images/ui/icon/person.svg" ) center / contain no-repeat;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#header{
		justify-content : space-between;
	}
	#header .logo{
		grid-row : 2;
		grid-column : 1;
	}
	#header #nav{
		grid-row : 1/3;
		grid-column : 2;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	#header{
		grid-template-rows : 0 1fr;
		grid-template-columns : 200px auto;
		align-items: center;
		padding-inline : calc( 20 * 100% / var( --breakPoint ) );
	}
}
@media print , screen and ( min-width : 1240.02px ) and ( max-width : 2000px ){
	#header{
		grid-template-rows : 0 1fr;
		grid-template-columns : 200px auto;
		padding-inline : 20px;
		align-items: center;
	}
}
@media print , screen and ( min-width : 2000.02px ){
	#header{
		grid-template-rows : 31px 1fr;
		grid-template-columns : 283px auto;
		padding-inline : 20px;
	}
}

/* --------------------------------------------
LAYOUT
  MENU BUTTON
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#menuBtn{
		z-index : 12;
		grid-row : 1/3;
		grid-column : 5;
		aspect-ratio : 1;
		padding-block : calc( 32 var( --remBase ) );
		padding-inline : calc( 22 * 100% / 100 );
		overflow : hidden;
		background-color : rgb( 255 255 255 / .6 );
		transition : background var( --transitionBase );
	}
	#menuBtn > span:nth-of-type( 1 ){
		position : relative;
		display : block;
		width : 100%;
		height : 100%;
		font-size : 0;
	}
	#menuBtn span span{
		position : absolute;
		left : 0;
		display : block;
		width : 100%;
		transition : all .4s;
	}
	#menuBtn span span:nth-of-type( 1 ){
		top : 0;
	}
	#menuBtn span span:nth-of-type( 4 ){
		bottom : 0;
	}
	#menuBtn > span:nth-of-type( 1 ){
		height : calc( 36 var( --remBase ) );
	}
	#menuBtn > span:nth-of-type( 1 ) span{
		height : calc( 4 var( --remBase ) );
		background-color : var( --body );
	}
	#menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 2 ) , #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 3 ){
		top : calc( 16 var( --remBase ) );
	}
}
body.is-open{
	overflow : hidden;
}
body.is-open #nav{
	max-height : 100dvh;
}
body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 1 ){
	scale : 0;
	translate : calc( 10 100dvh var( --remBase ) ) 0;
}
body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 2 ){
	rotate : -45deg;
}
body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 3 ){
	rotate : 45deg;
}
body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 4 ){
	scale : 0;
	translate : calc( -10 100dvh var( --remBase ) ) 0;
}
@media screen and ( max-width : 750px ){
	body.is-open #menuBtn{
		background-color : transparent;
	}
	body.is-open #menuBtn > span:first-of-type span{
		background-color : #fff;
	}
}

/* --------------------------------------------
NAVIGATION
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#nav{
		position : fixed;
		top : 0;
		left : 100%;
		z-index : 11;
		max-height : 100vh;
		overflow-y : auto;
		transition : translate .5s ease-in;
		translate : 0 0;
	}
	#nav .scroll{
		overflow-y : auto;
	}
	body.is-open #nav{
		translate : -100% 0;
	}
}
@media screen and ( max-width : 750px ){
	#nav{
		width : calc( 650 var( --viewportBase ) );
		height : 100dvh;
		background-color : rgb( 34 34 34 / .95 );
	}
	#nav .scroll{
		min-height : calc( 1506 var( --remBase ) );
		padding-block : calc( 90 var( --remBase ) );
		padding-left : calc( 142 * 100% / 650 );
		padding-right : calc( 24 * 100% / 650 );
		background-image : url( "../images/ui/parts/bg_nav_sp.svg" );
		background-repeat : no-repeat;
		background-position : 0 0;
		background-size : auto calc( 1506 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#nav{
		height : 100%;
	}
	#nav .scroll{
		display : grid;
		align-items : center;
		justify-content : end;
		height : 100%;
	}
}

/* --------------------------------------------
GLOBAL NAVIGATION
--------------------------------------------- */
#globalNav a{
	font-weight : 900;
	line-height : 1.2;
	letter-spacing : .05em;
}
#globalNav li:last-child a{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : start;
	color : #fff;
	text-indent : .05em;
	background-color : #424245;
	border-radius : 100vmax;
}
#globalNav li:last-child a::before{
	display : block;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/person.svg" ) center / contain no-repeat;
}
@media screen and ( max-width : 750px ){
	#globalNav li:not( :last-child ) a{
		display : grid;
		align-items : center;
		justify-content : start;
		height : calc( 105 var( --remBase ) );
		font-size : 5rem;
		color : #fff;
	}
	#globalNav li + li:not( :last-child ){
		border-top : solid calc( 2 var( --remBase ) ) #fff;
	}
	#globalNav li:last-child{
		margin-top : calc( 20 var( --remBase ) );
	}
	#globalNav li:last-child a{
		column-gap : calc( 8 * 100% / 444 );
		width : calc( 400 * 100% / 484 );
		height : calc( 80 var( --remBase ) );
		padding-left : calc( 40 * 100% / 484 );
		font-size : 3rem;
	}
	#globalNav li:last-child a::before{
		height : calc( 48 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#globalNav{
		position : relative;
		display : flex;
		flex-wrap : wrap;
		align-content : center;
		align-items : center;
		justify-content : end;
	}
	#globalNav::before{
		position : absolute;
		z-index : -1;
		content : "";
		background-color : rgb( 255 255 255 / .4 );
	}
	#globalNav li + li:not( :last-child )::before{
		font-weight : 900;
		letter-spacing : 0;
		white-space : pre;
		content : "　|　";
	}
	#globalNav li:not( :last-child ) a{
		color : #424245;
	}
	#globalNav li:last-child a{
		width : 100%;
		height : 100%;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	#globalNav li{
		font-size: 16px;
	}
	#globalNav li + li:not( :last-child )::before{
		content : "  /  ";
	}
	#globalNav li:last-child{
		width : 180px;
		height : 30px;
		margin-left : calc( 13 var( --remBase ) );
		margin-top: 10px;
		margin-bottom: 10px;
	}
	#globalNav li:last-child a{
		column-gap : calc( 2 * 100% / 161 );
		padding-left : calc( 9 * 100% / 170 );
		font-size : 16px;
	}
	#globalNav li:last-child a::before{
		height : calc( 25 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 1240.02px ){
	#globalNav li{
		font-size: 18px;
	}
	#globalNav li + li:not( :last-child )::before{
		content : "　／　";
	}
	#globalNav li:last-child a{
		column-gap : calc( 2 * 100% / 225 );
		padding-left : calc( 14 * 100% / 239 );
	}
}
@media print , screen and ( min-width : 1240.02px ) and ( max-width : 2000px ){
	#globalNav{
		margin-right : calc( -7 * 100vw / 2000 );
	}
	#globalNav li:last-child{
		width : 220px;
		height : 35px;
		margin-left : 20px;
	}
	#globalNav li:last-child a{
		font-size : 18px;
	}
	#globalNav li:last-child a::before{
		height : 35px;
	}
}
@media print , screen and ( min-width : 2000.02px ){
	#globalNav{
		margin-right : calc( -7 var( --remBase ) );
	}
	#globalNav li:last-child{
		width : 220px;
		height : 35px;
		margin-left : 20px;
	}
	#globalNav li:last-child a{
		font-size : 18px;
	}
	#globalNav li:last-child a::before{
		height :35px;
	}
}
@media print , screen and ( min-width : 750.02px ) and ( max-width : 1440px ){
	#globalNav li + li:not( :last-child )::before{
		content : "  /  ";
	}
}

/* --------------------------------------------
HOME
  MAIN VISUAL
--------------------------------------------- */
#mv{
	position : relative;
}
#mv video{
	object-fit : cover;
	width : 100%;
	height : 100%;
}
#mv .box{
	position : absolute;
	background-color : rgb( 255 255 255 / .9 );
}
#mv hgroup p{
	font-weight : 900;
	line-height : 1.2;
	letter-spacing : .05em;
}
#mv .box > p{
	font-weight : 500;
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	#mv{
		height : calc( 954 var( --remBase ) );
	}
	#mv .box{
		top : calc( 264 var( --remBase ) );
		left : calc( 50 var( --viewportBase ) );
		width : calc( 650 var( --viewportBase ) );
		padding-top : calc( ( 50 - 3.2 ) var( --remBase ) );
		padding-bottom : calc( ( 48 - 9.1 ) var( --remBase ) );
	}
	#mv hgroup p{
		font-size : 3.2rem;
		text-align : center;
		text-indent : .05em;
	}
	#mv hgroup h1{
		margin-top : calc( ( 22 - 3.2 ) var( --remBase ) );
		margin-left : calc( 50 * 100% / 650 );
	}
	#mv hgroup h1 img{
		height : calc( 156 var( --remBase ) );
	}
	#mv .box > p{
		padding-inline : calc( 50 * 100% / 650 );
		margin-top : calc( ( 28 - 9.1 ) var( --remBase ) );
		font-size : calc( 26 var( --remBase ) );
		line-height : 1.7;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	#mv{
		height : calc( 650 var( --remBase ) );
	}
	#mv .box{
		top : calc( 141 var( --remBase ) );
		left : calc( 40 var( --viewportBase ) );
		width : calc( 517 var( --viewportBase ) );
		padding-top : calc( ( 42 - 2.7 ) var( --remBase ) );
		padding-bottom : calc( ( 44 - 5.25 ) var( --remBase ) );
	}
	#mv p{
		padding-inline : calc( 40 * 100% / 517 );
	}
	#mv hgroup p{
		font-size : 2.7rem;
	}
	#mv hgroup h1{
		margin-top : calc( ( 16 - 2.7 ) var( --remBase ) );
		margin-left : calc( 36 * 100% / 517 );
	}
	#mv hgroup h1 img{
		height : calc( 126 var( --remBase ) );
	}
	#mv .box > p{
		margin-top : calc( ( 21 - 5.25 ) var( --remBase ) );
		font-size : calc( 15 var( --remBase ) );
		line-height : 1.7;
	}
}
@media print , screen and ( min-width : 1240.02px ){
	#mv{
		height : calc( 1052 var( --remBase ) );
	}
	#mv .box{
		top : calc( 276 var( --remBase ) );
		left : calc( 60 var( --viewportBase ) );
		width : calc( 676 var( --viewportBase ) );
		padding-top : calc( ( 58 - 3.5 ) var( --remBase ) );
		padding-bottom : calc( ( 65 - 7 ) var( --remBase ) );
	}
	#mv p{
		padding-inline : calc( 60 * 100% / 676 );
	}
	#mv hgroup p{
		font-size : 3.5rem;
	}
	#mv hgroup h1{
		margin-top : calc( ( 40 - 3.5 ) var( --remBase ) );
		margin-left : calc( 55 * 100% / 676 );
	}
	#mv hgroup h1 img{
		height : calc( 160 var( --remBase ) );
	}
	#mv .box > p{
		margin-top : calc( ( 32 - 7 ) var( --remBase ) );
		font-size : calc( 20 var( --remBase ) );
		line-height : 1.7;
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
#title{
	position : relative;
	display : grid;
	align-items : end;
	justify-content : start;
	overflow-x : clip;
	background-color : var( --titleBorderColor02 );
}
#title[data-en]::before{
	position : absolute;
	font-weight : 900;
	color : rgb( 0 0 0 / .05 );
	letter-spacing : .05em;
	content : attr( data-en );
}
#title span{
	font-weight : 900;
	letter-spacing : .05em;
}
#title span::before{
	position : absolute;
	display : block;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : cover;
}
@media screen and ( max-width : 750px ){
	#title{
		height : calc( 200 var( --remBase ) );
		padding-bottom : calc( 16 var( --remBase ) );
		padding-left : calc( 11 var( --viewportBase ) );
	}
	#title[data-en]::before{
		top : calc( -37 var( --remBase ) );
		left : calc( 145 var( --viewportBase ) );
		font-size : 20rem;
	}
	#title span{
		font-size : 7rem;
	}
	#title span::before{
		top : calc( 20 var( --remBase ) );
		left : calc( 26 var( --viewportBase ) );
		width : 100%;
		height : calc( 203 var( --remBase ) );
		background-image : url( "../images/ui/bg/title_sp.webp" );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#title::after{
		position : absolute;
		top : 0;
		display : block;
		content : "";
		background-image : var( --titleBg );
		background-position : center;
		background-size : cover;
	}
	#title span::after{
		position : absolute;
		content : "";
		background-color : var( --titleBorderColor );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	#title{
		height : calc( 200 var( --remBase ) );
		padding-bottom : calc( 28 var( --remBase ) );
	}
	#title[data-en]::before{
		bottom : calc( 9 var( --remBase ) );
		left : calc( -10 var( --viewportBase ) );
		font-size : 12rem;
	}
	#title::after{
		top : calc( -6 var( --remBase ) );
		left : calc( 638 var( --viewportBase ) );
		width : calc( 600 var( --viewportBase ) );
		height : calc( 216 var( --remBase ) );
	}
	#title span{
		padding-bottom : calc( 21 var( --remBase ) );
		font-size : 5rem;
	}
	#title span::before{
		top : calc( 20 var( --remBase ) );
		left : calc( 26 var( --viewportBase ) );
		width : calc( 1042 var( --viewportBase ) );
		height : calc( 203 var( --remBase ) );
		background-image : url( "../images/ui/bg/title_tb.webp" );
	}
	#title span::after{
		bottom : calc( 28 var( --remBase ) );
		left : calc( -382 var( --viewportBase ) );
		width : calc( 800 var( --viewportBase ) );
		height : calc( 6 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 1240.02px ) and ( max-width : 2000px ){
	#title{
		height : calc( 250 * 100vw / 2000 );
		padding-bottom : calc( 26 * 100vw / 2000 );
	}
	#title[data-en]::before{
		bottom : calc( 2 * 100vw / 2000 );
		left : calc( 50% - ( 1024 * 100% / 2000 ) );
		font-size : calc( 200 * 100vw / 2000 );
	}
	#title::after{
		top : calc( -14 * 100vw / 2000 );
		left : calc( 50% + ( 200 * 100% / 2000 ) );
		width : calc( 800 * 100% / 2000 );
		height : calc( 288 * 100vw / 2000 );
	}
	#title span{
		padding-bottom : calc( 32 * 100vw / 2000 );
		font-size : calc( 60 * 100vw / 2000 );
	}
	#title span::before{
		top : calc( 40 * 100vw / 2000 );
		left : calc( 50% - ( 723 * 100% / 2000 ) );
		width : calc( 1000 * 100% / 2000 );
		height : calc( 240 * 100vw / 2000 );
	}
	#title span::after{
		bottom : calc( 26 * 100vw / 2000 );
		left : calc( 50% - ( 1002 * 100% / 2000 ) );
		width : calc( 800 * 100% / 2000 );
		height : calc( 6 * 100vw / 2000 );
	}
}
@media print , screen and ( min-width : 1240.02px ){
	#title span::before{
		background-image : url( "../images/ui/bg/title_pc.webp" );
	}
}
@media print , screen and ( min-width : 2000.02px ){
	#title{
		height : 250px;
		padding-bottom : 26px;
	}
	#title[data-en]::before{
		bottom : 2px;
		left : calc( 50% - 1024px );
		font-size : 200px;
	}
	#title::after{
		top : 0;
		left : calc( 50% + 200px );
		width : 800px;
		height : 288px;
	}
	#title span{
		padding-bottom : 32px;
		font-size : 60px;
	}
	#title span::before{
		top : 40px;
		left : calc( 50% - 723px );
		width : 1000px;
		height : 240px;
	}
	#title span::after{
		bottom : 26px;
		left : calc( 50% - 1002px );
		width : 800px;
		height : 6px;
	}
}

/* --------------------------------------------
TITLE SINGLE
--------------------------------------------- */
#titleSingle{
	position : relative;
	overflow : hidden;
	background-color : var( --titleBg );
}
#titleSingle::before{
	position : absolute;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#titleSingle .tags{
	display : flex;
	flex-wrap : wrap;
}
#titleSingle .tags > li:not( .accepting ){
	display : grid;
	place-items : center;
	color : #fff;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	background : var( --bg );
}
#titleSingle h1{
	font-weight : 900;
	line-height : 1.2;
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	#titleSingle{
		padding-top : calc( 35 var( --remBase ) );
		padding-bottom : calc( ( 37 - 3.6 ) var( --remBase ) );
	}
	#titleSingle::before{
		top : calc( 20 var( --remBase ) );
		left : calc( 26 var( --viewportBase ) );
		width : 100%;
		height : calc( 203 var( --remBase ) );
		background-image : url( "../images/ui/bg/title_sp.webp" );
	}
	#titleSingle .tags{
		row-gap : calc( 10 var( --remBase ) );
		column-gap : calc( 10 var( --percentBase ) );
	}
	#titleSingle .tags > li:not( .accepting ){
		min-width : calc( 132 var( --percentBase ) );
		height : calc( 36 var( --remBase ) );
		padding-inline : calc( 22 var( --remBase ) );
		font-size : 2.2rem;
	}
	#titleSingle .tags .accepting{
		margin-top : calc( -12 var( --remBase ) );
	}
	#titleSingle .tags .accepting img{
		height : calc( 48 var( --remBase ) );
	}
	#titleSingle .tags + h1{
		margin-top : calc( ( 15 - 3.6 ) var( --remBase ) );
	}
	#titleSingle h1{
		font-size : 3.6rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#titleSingle .tags{
		row-gap : calc( 5 var( --remBase ) );
		column-gap : calc( 5 var( --percentBase ) );
	}
	#titleSingle .tags > li:not( .accepting ){
		min-width : calc( 100 var( --percentBase ) );
		height : calc( 25 var( --remBase ) );
		padding-inline : calc( 15 var( --remBase ) );
		font-size : 1.4rem;
	}
	#titleSingle .tags .accepting{
		margin-top : calc( -23 var( --remBase ) );
	}
	#titleSingle .tags .accepting img{
		height : calc( 48 var( --remBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1240px ){
	#titleSingle{
		padding-top : calc( 44 var( --remBase ) );
		padding-bottom : calc( ( 37 - 3.6 ) var( --remBase ) );
	}
	#titleSingle::before{
		top : calc( 20 var( --remBase ) );
		left : calc( 26 var( --viewportBase ) );
		width : calc( 1043 var( --viewportBase ) );
		height : calc( 203 var( --remBase ) );
		background-image : url( "../images/ui/bg/title_tb.webp" );
	}
	#titleSingle .tags + h1{
		margin-top : calc( ( 19 - 3.6 ) var( --remBase ) );
	}
	#titleSingle h1{
		font-size : 3.6rem;
	}
}
@media print , screen and ( min-width : 1240.02px ){
	#titleSingle{
		padding-top : calc( 83 var( --remBase ) );
		padding-bottom : calc( ( 25 - 4 ) var( --remBase ) );
	}
	#titleSingle::before{
		background-image : url( "../images/ui/bg/title_pc.webp" );
	}
	#titleSingle .tags + h1{
		margin-top : calc( ( 23 - 4 ) var( --remBase ) );
	}
	#titleSingle h1{
		font-size : 4rem;
	}
}
@media print , screen and ( min-width : 1240.02px ) and ( max-width : 2000px ){
	#titleSingle::before{
		top : calc( 40 * 100vw / 2000 );
		left : calc( 50% - ( 723 * 100% / 2000 ) );
		width : calc( 1000 * 100% / 2000 );
		height : calc( 240 * 100vw / 2000 );
	}
}
@media print , screen and ( min-width : 2000.02px ){
	#titleSingle::before{
		top : 40px;
		left : calc( 50% - 723px );
		width : 1000px;
		height : 240px;
	}
}