@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--headerHeight : calc( 60 var( --remBase ) );
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( width > 750px ) , print{
	:root{
		--headerHeight : calc( 134 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1960px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( width >= 1960px ) , print{
	:root{
		font-size : 10px;
	}
}
html{
	scroll-padding-block-start : var( --headerHeight );
}
body{
	padding-top : var( --headerHeight );
}
@media screen and ( width <= 750px ){
	body{
		font-size : 2rem;
	}
}
@media screen and ( width > 750px ) , print{
	body{
		font-size : 1.6rem;
	}
}

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

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

/* --------------------------------------------
  STATE
  --------------------------------------------- */
@media screen and ( width > 750px ) , print{
	.is-sp{
		display : none;
	}
}
@media screen and ( width <= 750px ){
	.is-pc{
		display : none;
	}
}
@media screen and ( width <= 750px ){
	.is-tb{
		display : none;
	}
}
@media screen and ( width >= 1960px ) , print{
	.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 screen and ( width > 750px ) , print{
	[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 screen and ( width > 750px ) , print{
	br.pc-space{
		content : "";
	}
	br.pc-space::after{
		content : " ";
	}
}
@media screen and ( width <= 750px ){
	br.sp-spaceEm{
		content : "";
	}
	br.sp-spaceEm::after{
		content : "　";
	}
}
@media screen and ( width > 750px ) , print{
	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 screen and ( width > 750px ) , print{
	.lh-up-pc{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 1;
	display : grid;
	width : 100%;
	height : var( --headerHeight );
	background-color : white;
}
#header .logo{
	align-self : center;
}
@media screen and ( width <= 750px ){
	#header{
		align-items : center;
		padding-inline : calc( 20 var( --viewportBase ) );
	}
	#header .logo{
		display : block;
		width : fit-content;
	}
	#header .logo img{
		height : calc( 33 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#header .logo{
		grid-row : 1;
		grid-column : 2;
	}
	#header .logo img{
		height : calc( 68 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1960px ){
	#header{
		grid-template-columns : calc( 40 var( --viewportBase ) ) auto 1fr auto calc( 172 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ) , print{
	#header{
		grid-template-columns : 40px auto 1fr auto 51px 80px 40px;
	}
}

/* --------------------------------------------
MENU  BUTTON
--------------------------------------------- */
#menuBtn{
	position : fixed;
	z-index : 12;
	display : grid;
}
#menuBtn[aria-expanded="true"]{
	overflow : hidden;
}
#menuBtn{
	z-index : 12;
	overflow : hidden;
}
#menuBtn > span:nth-of-type( 1 ){
	position : relative;
	display : block;
	font-size : 0;
}
#menuBtn > span:nth-of-type( 1 ) > span{
	position : absolute;
	left : 0;
	display : block;
	width : 100%;
	transition : all .4s;
}
#menuBtn > span:nth-of-type( 1 ) > span:first-of-type{
	top : 0;
}
#menuBtn > span:nth-of-type( 1 ) > span:last-of-type{
	bottom : 0;
}
#menuBtn[aria-expanded="true"] > span:nth-of-type( 1 ) span{
	top : 50%;
	translate : 0 - 50%;
}
#menuBtn[aria-expanded="true"] > span:nth-of-type( 1 ) span:first-of-type{
	rotate : -45deg;
}
#menuBtn[aria-expanded="true"] > span:nth-of-type( 1 ) span:last-of-type{
	rotate : 45deg;
}
#menuBtn > span{
	width : 100%;
	height : 100%;
}
#menuBtn > span:nth-of-type( 1 ){
	grid-row : 2;
	grid-column : 2;
}
#menuBtn > span:nth-of-type( 1 ) span{
	height : calc( 2 var( --remBase ) );
	background-color : var( --base );
}
#menuBtn > span:nth-of-type( 2 ){
	grid-row : 4;
	grid-column : 1/-1;
	font-family : Actor , serif;
	color : var( --base );
	text-align : center;
}
@media screen and ( width <= 750px ){
	#menuBtn{
		position : fixed;
		top : 0;
		right : 0;
		grid-template-rows : calc( 19 var( --remBase ) ) calc( 12 var( --remBase ) ) calc( 8 var( --remBase ) ) 1fr;
		grid-template-columns : 1fr calc( 23 * 100% / 60 ) 1fr;
		width : calc( 60 var( --viewportBase ) );
		height : calc( 60 var( --remBase ) );
	}
	#menuBtn > span:nth-of-type( 1 ) span{
		height : calc( 1.5 var( --remBase ) );
	}
	#menuBtn > span:nth-of-type( 2 ){
		font-size : 1.2rem;
	}
	#menuBtn[aria-expanded="true"] > span:nth-of-type( 1 ) span{
		background-color : white;
	}
	#menuBtn[aria-expanded="true"] > span:nth-of-type( 2 ){
		opacity : 0;
	}
}
@media screen and ( width > 750px ) , print{
	#menuBtn{
		top : calc( 24 var( --remBase ) );
		grid-template-rows : calc( 22 var( --remBase ) ) calc( 20 var( --remBase ) ) calc( 10 var( --remBase ) ) 1fr;
		grid-template-columns : 1fr calc( 42 * 100% / 80 ) 1fr;
		height : calc( 109 var( --remBase ) );
		background-color : white;
	}
	#menuBtn > span:nth-of-type( 1 ) span{
		height : calc( 2.73 var( --remBase ) );
	}
	#menuBtn > span:nth-of-type( 2 ){
		font-size : 1.4rem;
	}
}
@media screen and ( 750px < width < 1960px ){
	#menuBtn{
		right : calc( 40 var( --viewportBase ) );
		width : calc( 80 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ) , print{
	#menuBtn{
		right : 40px;
		width : 80px;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#menuBtn span{
		transition : all var( --transitionBase );
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#nav{
		background-color : color-mix( in sRGB , var( --green ) 95% , transparent );
	}
	body:has( #nav[aria-hidden="false"] ){
		overflow : hidden;
	}
	#nav[aria-hidden="false"]{
		translate : -100% 0;
	}
	#nav[aria-hidden="true"]{
		translate : 0 0;
	}
	#nav{
		position : fixed;
		left : 100%;
		z-index : 11;
		overflow-y : auto;
		translate : 0 0;
	}
	#nav .scroll{
		overflow-y : auto;
	}
	#nav{
		top : 0;
		width : calc( 368 var( --viewportBase ) );
		height : 100dvh;
	}
	#nav .scroll{
		padding-inline : calc( 16 * 100% / 368 );
		padding-top : calc( 86 var( --remBase ) );
		padding-bottom : calc( 86 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#nav{
		top : var( --headerHeight );
	}
	body:has( #nav[aria-hidden="false"] ){
		overflow : hidden;
	}
	#nav[aria-hidden="false"]{
		pointer-events : auto;
		opacity : 1;
	}
	#nav[aria-hidden="true"]{
		pointer-events : none;
		opacity : 0;
	}
	#nav{
		position : fixed;
		z-index : 11;
		overflow-y : auto;
	}
	#nav .scroll{
		overflow-y : auto;
	}
	#nav{
		width : 100%;
		background-color : white;
	}
	#nav .scroll{
		padding-top : calc( 88 var( --remBase ) );
		padding-bottom : calc( 312 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	body:has( #nav[aria-hidden="false"] ) #header , body:has( #nav[aria-hidden="false"] ) #main , body:has( #nav[aria-hidden="false"] ) #nav{
		padding-right : var( --scrollbarWidth );
	}
	body:has( #nav[aria-hidden="false"] ) #menuBtn{
		translate : calc( -1 * var( --scrollbarWidth ) ) 0;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		@media ( prefers-reduced-motion : no-preference ){
			#nav{
				transition : translate var( --transitionBase );
			}
		}
	}
	@media screen and ( width > 750px ) , print{
		@media ( prefers-reduced-motion : no-preference ){
			#nav{
				transition : opacity var( --transitionBase );
			}
		}
	}
}
#navContacts{
	display : grid;
}
#navContacts .tel{
	display : grid;
	grid-template-columns : auto auto;
	column-gap : calc( 4 var( --remBase ) );
	align-items : center;
	font-size : 4rem;
	font-weight : 900;
}
#navContacts .tel img{
	width : auto;
	font-size : 0;
}
#navContacts .contact{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : center;
	font-weight : 700;
	color : white;
	background-color : var( --orange );
}
#navContacts .contact::before{
	display : block;
	width : 100%;
	aspect-ratio : 30/20.69;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/icon/email01.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#navContacts .line{
	display : grid;
	grid-row : 2;
	grid-column : 3;
	place-items : center;
	background-color : #06c755;
}
@media screen and ( width <= 750px ){
	#navContacts{
		grid-template-rows : auto calc( 8 var( --remBase ) ) auto calc( 16 var( --remBase ) ) calc( 56 var( --remBase ) );
		grid-template-columns : calc( 2 * 100% / 304 ) calc( 150 * 100% / 304 ) calc( 150 * 100% / 304 ) calc( 2 * 100% / 304 );
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 * 100% / 336 );
		background-color : white;
	}
	#navContacts p{
		grid-row : 1;
		grid-column : 1/-1;
		font-size : 1.4rem;
		line-height : 1.5;
		text-align : center;
	}
	#navContacts .tel{
		grid-row : 3;
		grid-column : 1/-1;
		justify-content : center;
		letter-spacing : .05em;
		white-space : nowrap;
	}
	#navContacts .tel img{
		height : calc( 36 var( --remBase ) );
	}
	#navContacts .contact{
		grid-row : 5;
		grid-column : 2;
		column-gap : calc( 2.85 * 100% / 150 );
		width : 100%;
		height : 100%;
		font-size : 2rem;
	}
	#navContacts .contact::before{
		height : calc( 18.46 var( --remBase ) );
	}
	#navContacts .line{
		grid-row : 5;
		grid-column : 3;
		width : 100%;
		height : 100%;
	}
	#navContacts .line img{
		height : calc( 16.71 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#navContacts{
		grid-template-columns : auto repeat( 2 , calc( 120 var( --remBase ) ) );
		grid-row : 1;
		grid-column : 4;
		row-gap : calc( 4.5 var( --remBase ) );
		column-gap : calc( 8 var( --remBase ) );
		align-self : center;
	}
	#navContacts p{
		grid-row : 1;
		grid-column : 1/-1;
		font-size : 1.2rem;
		font-weight : 500;
		line-height : 1.3;
		letter-spacing : .1em;
	}
	#navContacts .tel{
		grid-row : 2;
		grid-column : 1;
		letter-spacing : .1em;
		pointer-events: none
	}
	#navContacts .tel img{
		height : calc( 40 var( --remBase ) );
	}
	#navContacts .contact{
		grid-row : 2;
		grid-column : 2;
		column-gap : calc( 4 var( --remBase ) );
		height : calc( 36 var( --remBase ) );
		font-size : 1.6rem;
	}
	#navContacts .contact::before{
		height : calc( 20.69 var( --remBase ) );
	}
	#navContacts .line{
		height : calc( 36 var( --remBase ) );
	}
	#navContacts .line img{
		height : calc( 18.73 var( --remBase ) );
	}
}
#navGlobal > li > a{
	font-weight : 500;
	line-height : 1.6;
	letter-spacing : .05em;
}
#navGlobal > li > a::before{
	grid-row : 1;
	grid-column : 1;
	font-family : "Cormorant Garamond";
	font-weight : 400;
	line-height : 1;
	letter-spacing : .1em;
}
#navGlobal ul a{
	display : grid;
	grid-template-columns : auto auto;
	align-content : center;
	align-items : center;
	justify-content : start;
	letter-spacing : .05em;
}
#navGlobal ul a::before{
	color : var( --orange02 );
	content : "－";
}
@media screen and ( width <= 750px ){
	#navGlobal{
		margin-top : calc( 44 var( --remBase ) );
	}
	#navGlobal > li + li{
		margin-top : calc( 28 var( --remBase ) );
	}
	#navGlobal > li > a{
		display : flex;
		flex-wrap : wrap;
		column-gap : calc( 8 * 100% / 336 );
		align-items : baseline;
		justify-content : start;
		font-size : 1.4rem;
	}
	#navGlobal > li > a::before{
		font-size : 3.2rem;
	}
	#navGlobal a{
		color : white;
	}
	#navGlobal ul{
		margin-top : calc( 8 var( --remBase ) );
	}
	#navGlobal ul li{
		margin-left : calc( 12 * 100% / 336 );
	}
	#navGlobal ul a{
		column-gap : calc( 8 * 100% / 316 );
		height : calc( 40 var( --remBase ) );
		font-size : 1.8rem;
	}
}
@media screen and ( width > 750px ) , print{
	#navGlobal{
		padding-inline : calc( 160 var( --percentBase ) );
		columns : 2;
	}
	#navGlobal > li{
		padding-bottom : calc( 64 var( --remBase ) );
	}
	#navGlobal > li > a{
		display : grid;
		grid-template-columns : auto auto auto;
		align-items : baseline;
		justify-content : start;
		font-size : 2.4rem;
	}
	#navGlobal > li > a::before{
		margin-right : calc( 32 var( --remBase ) );
		font-size : 6rem;
	}
	#navGlobal > li > a::after{
		grid-row : 1;
		grid-column : 2;
		font-size : 2.4rem;
		font-weight : 500;
		line-height : 1.6;
		letter-spacing : .05em;
		white-space : pre;
		content : "／ ";
	}
	#navGlobal ul{
		margin-top : calc( 16 var( --remBase ) );
	}
	#navGlobal ul a{
		column-gap : calc( 8 var( --remBase ) );
		height : calc( 72 var( --remBase ) );
		font-size : 2.4rem;
	}
}
@media screen and ( width <= 750px ){
	#menuBtnClose{
		display : block;
		width : fit-content;
		margin-inline : auto;
		margin-top : calc( 30 var( --remBase ) );
	}
	#menuBtnClose img{
		height : calc( 51.19 var( --remBase ) );
	}
}

/* --------------------------------------------
HOME MAIN VISUAL
--------------------------------------------- */
#mv{
	position : relative;
	display : grid;
	overflow-x : clip;
}
#mv::before , #mv::after{
	position : absolute;
	top : 0;
	font-size : 0;
	content : "";
}
#mv::before{
	z-index : -2;
	background-color : var( --green03 );
}
#mv::after{
	z-index : -1;
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#mv p{
	display : grid;
	grid-row : 1;
}
#mv p > span{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : start;
	font-family : "Shippori Mincho" , serif;
	color : white;
	white-space : pre;
	background-color : var( --green );
	writing-mode : vertical-rl;
}
#mv p > span:nth-of-type( 1 ){
	grid-row : 1/3;
	grid-column : 2;
}
#mv p > span:nth-of-type( 2 ){
	grid-row : 2/-1;
	grid-column : 1;
}
#mv a{
	display : block;
	grid-row : 1;
	width : fit-content;
}
@media screen and ( width <= 750px ){
	#mv{
		grid-template-columns : auto 1fr calc( 80 var( --percentBase ) );
		height : calc( 520 var( --remBase ) );
		padding-top : calc( 67 var( --remBase ) );
	}
	#mv::before{
		left : calc( 16 var( --viewportBase ) );
		width : calc( 384 var( --viewportBase ) );
		height : calc( 436 var( --remBase ) );
	}
	#mv::after{
		top : calc( 16 var( --remBase ) );
		left : 0;
		width : calc( 369 var( --viewportBase ) );
		height : calc( 400 var( --remBase ) );
		background-image : url( "../images/home/mv/bg_sp.webp" );
	}
	#mv p{
		grid-template-rows : calc( 112 var( --remBase ) ) calc( 180 var( --remBase ) ) calc( 66 var( --remBase ) );
		grid-template-columns : repeat( 2 , 50% );
		grid-column : 3;
		height : calc( 358 var( --remBase ) );
	}
	#mv p > span{
		font-size : 4rem;
		letter-spacing : .2em;
	}
	#mv p > span span{
		font-size : 3rem;
		letter-spacing : .2em;
	}
	#mv a{
		grid-column : 1;
		height : fit-content;
		margin-top : calc( 278 var( --remBase ) );
		margin-left : calc( -3 var( --remBase ) );
	}
	#mv a img{
		height : calc( 142 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#mv{
		grid-template-columns : 1fr calc( 163 var( --percentBase ) ) calc( 211 var( --percentBase ) ) auto;
		height : calc( 788 var( --remBase ) );
		padding-top : calc( 42 var( --remBase ) );
	}
	#mv::before{
		height : calc( 779 var( --remBase ) );
	}
	#mv::after{
		top : calc( 26 var( --remBase ) );
		width : auto;
		height : calc( 760 var( --remBase ) );
		aspect-ratio : 1800/760;
		background-image : url( "../images/home/mv/bg_pc.webp" );
	}
	#mv p{
		grid-template-rows : calc( 244 var( --remBase ) ) calc( 351 var( --remBase ) ) calc( 133 var( --remBase ) );
		grid-template-columns : calc( 83 * 100% / 163 ) calc( 80 * 100% / 163 );
		grid-column : 2;
		height : calc( 728 var( --remBase ) );
	}
	#mv p > span{
		font-size : 8rem;
		letter-spacing : .2em;
	}
	#mv p > span span{
		font-size : 6rem;
		letter-spacing : .2em;
	}
	#mv a{
		grid-column : 4;
		height : fit-content;
		margin-top : calc( 480 var( --remBase ) );
	}
	#mv a img{
		height : calc( 216 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1960px ){
	#mv::before{
		left : calc( 40 var( --viewportBase ) );
		width : calc( 1920 var( --percentBase ) );
	}
	#mv::after{
		left : 0;
	}
}
@media screen and ( width >= 1960px ) , print{
	#mv::before{
		right : 0;
		width : calc( 50% + 940px );
	}
	#mv::after{
		left : calc( 50% - 960px );
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
#title{
	position : relative;
	overflow-x : clip;
}
#title picture{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	width : 100%;
	height : 100%;
}
#title picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#title h1{
	width : fit-content;
	color : white;
	background-color : var( --green );
}
#title h1::before{
	font-family : "Cormorant Garamond" , serif;
	font-weight : 400;
	line-height : 1;
	letter-spacing : .1em;
}
#title h1 span{
	font-weight : 500;
	letter-spacing : .05em;
}
@media screen and ( width <= 750px ){
	#title{
		height : calc( 240 var( --remBase ) );
		padding-top : calc( 122 var( --remBase ) );
	}
	#title h1{
		min-width : calc( 320 var( --remBase ) );
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --remBase ) );
	}
	#title h1::before{
		font-size : 4rem;
	}
	#title h1 span{
		display : block;
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.6;
	}
}
@media screen and ( width > 750px ) , print{
	#title{
		height : calc( 466 var( --remBase ) );
		padding-top : calc( 308 var( --remBase ) );
	}
	#title h1{
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 32 var( --remBase ) );
		align-items : baseline;
		justify-content : start;
		min-width : calc( 800 var( --remBase ) );
		padding-inline : calc( 40 var( --remBase ) );
		padding-top : calc( 32 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
	}
	#title h1::before{
		font-size : 6rem;
	}
	#title h1 span{
		font-size : 2.8rem;
		line-height : 1.6;
	}
}
@media screen and ( width >= 1960px ) , print{
	#title{
		padding-inline : calc( ( 100% - 1960px ) / 2 );
	}
}