@charset "UTF-8";

/* --------------------------------------------
OPENING ANIMATION
--------------------------------------------- */
@keyframes opening{
	0%{
		max-height : 100dvh;
	}
	100%{
		max-height : 0;
	}
}

/* --------------------------------------------
LOADING
--------------------------------------------- */
#loading{
	z-index : 15;
	grid-template-rows : 100dvh;
	align-items : center;
	justify-content : center;
	width : 100%;
	height : 100dvh;
	overflow : hidden;
	pointer-events : none;
	background-repeat : no-repeat;
	background-size : cover;
}
#loading.is-opening{
	position : relative;
	display : grid;
}
#loading.is-opening[aria-busy="false"]{
	animation : opening .5s forwards;
}
#loading.is-skip{
	display : none;
}
@media screen and ( width <= 750px ){
	#loading{
		background-image : url( "../images/loading/bg_sp.webp" );
		background-position : 0 0;
	}
	#loading img{
		height : calc( 31.74 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#loading{
		background-image : url( "../images/loading/bg_pc.webp" );
		background-position : center;
	}
	#loading img{
		height : calc( 57.86 var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : reduce ){
	#loading{
		display : none ! important;
	}
}

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

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

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

/* --------------------------------------------
  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 >= 1140px ){
	.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 > .logo{
	width : fit-content;
}
#header > .logo > h1{
	font-size : clamp( var( --min ) , 2.8rem , var( --max ) );
	font-weight : 400;
	color : white;
}
#header > .logo > h1 span{
	color : var( --gold );
}
@media screen and ( width <= 750px ){
	#header{
		position : absolute;
		top : 0;
		left : 0;
		z-index : 10;
		width : 100%;
		padding-top : calc( 33 var( --remBase ) );
	}
	#header .logo{
		display : block;
	}
	#header .logo img{
		height : calc( 14 var( --remBase ) );
	}
	#header .logo > h1{
		display : block;
		margin-top : calc( 16 var( --remBase ) );
	}
	html[lang="en"] #header > .logo > h1{
		font-size : clamp( var( --min ) , 2.2rem , var( --max ) );
		line-height: 1.3;
	}

}
@media print , screen and ( width > 750px ){
	#header{
		position : fixed;
		top : 0;
		left : 0;
		right : 0;
		z-index : 10;
		display : grid;
		grid-template-columns : auto 1fr;
		column-gap : calc( 24 var( --remBase ) );
		align-items : center;
		width : 100vw;
		height : var( --headerHeight );
		padding-left : calc( 64 * 100vw / var( --breakPoint ) );
		padding-right : calc( 128 * 100vw / var( --breakPoint ) );
	}
	#header > .logo{
		display : grid;
		grid-row : 1;
		grid-column : 1;
		column-gap : calc( 8 var( --remBase ) );
		align-items : center;
		justify-content : start;
	}
	#header > .logo img{
		grid-row : 1;
		grid-column : 1;
		height : calc( 36.14 var( --remBase ) );
	}
	#header > .logo > h1{
		grid-row : 1;
		grid-column : 2;
	}
}
@media print , screen and ( width > 750px ){
	#header:has( #nav:not( [inert] ) ) ~ #main{
		padding-right : var( --scrollbarWidth );
	}
}
@media ( hover : hover ){
	#header > a:hover{
		opacity : .75;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#header > a{
		transition : opacity var( --transitionBounds );
	}
}
@media print , screen and ( width > 750px ){
	#headerNav{
		display : grid;
		grid-row : 1;
		grid-column : 2;
		grid-auto-flow : column;
		align-items : center;
		justify-content : end;
	}
	#headerNav a{
		font-family : "Crimson Text" , serif;
	}
	#headerNav .links{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : end;
		padding-right : calc( 9.5 var( --remBase ) );
	}
	#headerNav .links a{
		display : block;
		padding-inline : calc( 9.5 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
		line-height : 2;
		color : white;
	}
	#headerNav .tel{
		display : grid;
		grid-auto-flow : column;
		column-gap : .25em;
		align-items : center;
		justify-content : end;
		padding-inline : calc( 19 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
		line-height : 2;
		color : white;
		border-left : solid 1px white;
	}
	#headerNav .tel a{
		color : white;
	}
	#headerNav .contacts{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : end;
	}
	#headerNav .contacts a{
		display : grid;
		place-items : center;
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
		line-height : 2;
	}
	#headerNav .contacts .mail{
		padding-inline : calc( 33.5 var( --remBase ) );
		color : #333;
		background-color : var( --gold );
	}
	#headerNav .contacts .line{
		padding-inline : calc( 30.5 var( --remBase ) );
		color : white;
		background-color : #10192b;
	}
}
@media ( hover : hover ){
	#headerNav :where( .tel , .links ) a:hover{
		color : var( --gold );
	}
	#headerNav .contacts a:hover.mail{
		color : var( --gold );
		background-color : #333;
	}
	#headerNav .contacts a:hover.line{
		color : #10192b;
		background-color : white;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#headerNav :where( .tel , .links ) a{
		transition : color var( --transitionBounds );
	}
	#headerNav .contacts .mail{
		transition : background var( --transitionBounds ) , color var( --transitionBounds );
	}
	#headerNav .contacts .line{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
}
#menuBtn{
	z-index : 12;
}
#menuBtn span{
	position : absolute;
	left : 0;
	display : block;
	width : 100%;
	transition : all .4s;
}
#menuBtn span:first-of-type{
	top : 0;
}
#menuBtn span:last-of-type{
	bottom : 0;
}
#menuBtn[aria-expanded="true"] span{
	top : 50%;
	translate : 0 - 50%;
}
#menuBtn[aria-expanded="true"] span:first-of-type{
	rotate : -45deg;
}
#menuBtn[aria-expanded="true"] span:last-of-type{
	rotate : 45deg;
}
#menuBtn{
	position : fixed;
	width : calc( 72 var( --viewportBase ) );
	height : calc( 72 var( --remBase ) );
	border-color : transparent;
	border-style : solid;
	border-inline-width : calc( 20 var( --remBase ) );
	border-block-width : calc( 29 var( --remBase ) );
}
#menuBtn span{
	height : calc( 2 var( --remBase ) );
	background-color : white;
}
#menuBtn:not( [aria-expandecd="true"] ) span:nth-of-type( 2 ){
	width : calc( 32 * 100% / 40 );
}
#menuBtn[aria-expanded="true"] span:nth-of-type( 2 ){
	width : 100%;
}
@media screen and ( width <= 750px ){
	#menuBtn{
		top : calc( 23 var( --remBase ) );
		right : calc( 16 var( --viewportBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#menuBtn{
		top : calc( 40 var( --remBase ) );
		left : calc( 100vw - ( 104 * 100vw / var( --breakPoint ) ) );
	}
}
body:has( #nav:not( [inert] ) ){
	overflow : hidden;
}
#nav:not( [inert] ){
	pointer-events : auto;
	opacity : 1;
}
#nav[inert]{
	pointer-events : none;
	opacity : 0;
}
#nav{
	position : fixed;
	z-index : 11;
}
#nav .scroll{
	height : 100%;
	overflow-y : auto;
}
#nav{
	top : 0;
	left : 0;
	width : 100vw;
	height : 100dvh;
	background-color : color-mix( in sRGB , black 60% , transparent );
}
#nav .scroll{
	padding-block : calc( 110 var( --remBase ) );
	padding-left : calc( 32 var( --viewportBase ) );
	padding-right : calc( 38 var( --viewportBase ) );
	background-color : color-mix( in sRGB , black 90% , transparent );
}
#nav .logo img{
	height : calc( 14 var( --remBase ) );
}
#nav .logo > span{
	display : block;
	margin-top : calc( 4 var( --remBase ) );
	font-size : clamp( var( --min ) , 2.8rem , var( --max ) );
	color : white;
}
#nav .logo > span span{
	color : var( --gold );
}
#nav .links{
	margin-top : calc( 56 var( --remBase ) );
}
#nav .links li + li{
	margin-top : calc( 24 var( --remBase ) );
}
#nav .links a{
	display : block;
	width : fit-content;
	font-family : "Crimson Text" , serif;
	font-size : clamp( var( --min ) , 2.4rem , var( --max ) );
	line-height : 2;
	color : white;
}
#nav .tel{
	display : grid;
	place-items : center;
	width : 100%;
	height : calc( var( --remBase ) );
	padding-block : calc( 8 var( --remBase ) );
	margin-top : calc( 36 var( --remBase ) );
	font-family : "Crimson Text" , serif;
	font-size : clamp( var( --min ) , 2.4rem , var( --max ) );
	line-height : 2;
	color : white;
	outline : solid 1px white;
	outline-offset : -1px;
}
#nav .contacts{
	display : grid;
	grid-template-columns : repeat( 2 , 50% );
	margin-top : calc( 24 var( --remBase ) );
}
#nav .contacts a{
	display : grid;
	place-items : center;
	padding-block : calc( 9 var( --remBase ) );
	font-family : "Crimson Text" , serif;
	font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
	line-height : 2;
	outline : solid 1px white;
	outline-offset : -1px;
}
#nav .contacts .mail{
	color : #333;
	background-color : white;
}
#nav .contacts .line{
	color : white;
}
#nav .langs{
	display : grid;
	grid-auto-flow : column;
	column-gap : calc( 8 * 100% / 330 );
	align-items : center;
	justify-content : center;
	margin-top : calc( 24 var( --remBase ) );
}
#nav .langs li:not( :last-child )::after{
	margin-left : calc( 8 var( --remBase ) );
	font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
	line-height : 2;
	color : white;
	content : "/";
}
#nav .langs a{
	font-family : "Crimson Text" , serif;
	font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
	line-height : 2;
}
#nav .langs a.disabled{
	color : color-mix( in srgc , white 10% , transparent );
}
#nav .langs a:not( .disabled )[aria-current]{
	color : var( --gold );
}
#nav .langs a:not(.disabled, [aria-current]){
	color : white;
}
#nav #menuBtnClose{
	display : block;
	width : fit-content;
	margin-inline : auto;
	margin-top : calc( 89 var( --remBase ) );
}
#nav #menuBtnClose img{
	height : calc( 72 var( --remBase ) );
}
@media print , screen and ( width > 750px ){
	#nav .scroll{
		width : calc( 400 var( --viewportBase ) );
		margin-left : auto;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#nav{
		transition : opacity var( --transitionBase );
	}
}
@media ( hover : hover ){
	#nav .logo:hover{
		opacity : .75;
	}
	#nav .links a:hover{
		color : var( --gold );
	}
	#nav .tel:hover{
		color : color-mix( in sRGB , black 90% , transparent );
		background-color : white;
	}
	#nav .contacts .mail:hover{
		color : white;
		background-color : color-mix( in sRGB , black 90% , transparent );
	}
	#nav .contacts .line:hover{
		color : color-mix( in sRGB , black 90% , transparent );
		background-color : white;
	}
	#nav .langs a:not( .disabled ):hover{
		color : var( --gold );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#nav .logo{
		transition : opacity var( --transitionBounds );
	}
	#nav .links a{
		transition : color var( --transitionBounds );
	}
	#nav .tel{
		transition : color var( --transitionBase ) , background var( --transitionBase );
	}
	#nav .contacts a{
		transition : color var( --transitionBase ) , background var( --transitionBase );
	}
	#nav .langs a:not( .disabled ){
		transition : color var( --transitionBounds );
	}
}

/* --------------------------------------------
HOME MAIN VISUAL
--------------------------------------------- */
#mv{
	position : relative;
	z-index : 0;
	display : grid;
	grid-auto-flow : row;
	align-content : center;
	justify-content : start;
	overflow : hidden;
	color : white;
}
#mv::before{
	position : absolute;
	inset : 0;
	z-index : -1;
	font-size : 0;
	content : "";
	background-color : color-mix( in srgb , #00091e 75% , transparent );
}
#mv video{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -2;
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#mv h2{
	font-weight : 400;
}
#mv h2 > span{
	display : block;
	font-family : "Crimson Text" , serif;
}
#mv p{
	line-height : 2;
}
#mv a{
	position : absolute;
	width : fit-content;
	overflow : hidden;
	font-size : 0;
}
#mv a img{
	height : calc( 114 var( --remBase ) );
}
#mv a::before{
	position : absolute;
	inset : 0;
	z-index : 1;
	display : block;
	pointer-events : none;
	content : "";
	background : url( "../images/home/mv/arrow_cover.svg" ) center / 100% 100% no-repeat;
}
@media screen and ( width <= 750px ){
	#mv{
		height : 100dvh;
		padding-top : calc( 119 var( --remBase ) );
	}
	#mv h2{
		font-size : clamp( var( --min ) , 5.2rem , var( --max ) );
	}
	#mv p{
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#mv a{
		bottom : calc( 32 var( --remBase ) );
		right : calc( 34 var( --viewportBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#mv{
		height : 90dvh;
		padding-top : calc( 138 var( --remBase ) );
	}
	#mv h2{
		font-size : clamp( var( --min ) , 8rem , var( --max ) );
	}
	#mv p{
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
	}
	#mv a{
		bottom : calc( 22 var( --remBase ) );
		right : calc( 58.5 var( --viewportBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#mv.animation{
		--duration : 2s;
		--delay : .5s;
	}
	#mv.animation video{
		clip-path : inset( 100% 0 0 100% );
		opacity : 0;
		transition-timing-function : ease-in-out;
		transition-duration : 1s;
		transition-property : clip-path , opacity;
	}
	#mv.animation h2{
		width : fit-content;
	}
	#mv.animation h2 > span{
		width : fit-content;
		clip-path : inset( 0 100% 100% 0 );
		filter : blur( .5rem );
		transition-timing-function : ease-out;
		transition-property : clip-path , filter;
	}
	#mv.animation h2 > span:nth-of-type( 1 ){
		transition-delay : 0s;
		transition-duration : calc( var( --duration ) * 268 / ( 268 + 504 + 228 ) );
	}
	#mv.animation h2 > span:nth-of-type( 2 ){
		transition-delay : calc( var( --duration ) * 268 / ( 268 + 504 + 228 ) + var( --delay ) );
		transition-duration : calc( var( --duration ) * 504 / ( 268 + 504 + 228 ) );
	}
	#mv.animation h2 > span:nth-of-type( 3 ){
		transition-delay : calc( var( --duration ) * ( 268 + 504 ) / ( 268 + 504 + 228 ) + var( --delay ) * 2 );
		transition-duration : calc( var( --duration ) * 228 / ( 268 + 504 + 228 ) );
	}
	#mv.animation p{
		filter : blur( .5rem );
		opacity : 0;
		transition-delay : calc( var( --duration ) + var( --delay ) * 2.5 );
		transition-timing-function : ease-out;
		transition-duration : 1.5s;
		transition-property : opacity , filter , translate;
		translate : 0 .25lh;
	}
	#mv.animation a::before{
		animation : marquee 3s ease-out infinite;
	}
	#mv.animation.is-animation video{
		clip-path : inset( 0 );
		opacity : 1;
	}
	#mv.animation.is-animation h2 > span{
		clip-path : inset( 0 );
		filter : blur( 0 );
	}
	#mv.animation.is-animation p{
		filter : blur( 0 );
		opacity : 1;
		translate : 0 0;
	}
}
@keyframes marquee{
	0%{
		clip-path : polygon( 0 0 , 100% 0 , 100% 0 , 0 0 );
	}
	40%{
		clip-path : polygon( 0 0 , 100% 0 , 100% 100% , 0 100% );
	}
	90%{
		clip-path : polygon( 0 100% , 100% 100% , 100% 100% , 0 100% );
	}
	100%{
		clip-path : polygon( 0 100% , 100% 100% , 100% 100% , 0 100% );
	}
}

/* --------------------------------------------
FIXED CONTACTS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--fixedContactsHeight : calc( 104 var( --remBase ) )
;
	}
}
@media screen and ( width <= 750px ){
	body:has( #fixedContacts ){
		padding-bottom : var( --fixedContactsHeight );
	}
}
@media screen and ( width <= 750px ){
	#fixedContacts{
		position : fixed;
		bottom : 0;
		left : 0;
		z-index : 5;
		display : grid;
		grid-auto-flow : row;
		row-gap : calc( 8 var( --remBase ) );
		align-content : center;
		justify-content : start;
		width : 100%;
		height : var( --fixedContactsHeight );
		background-color : color-mix( in sRGB , black 15% , transparent );
	}
	#fixedContacts h3{
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
		font-weight : 400;
		line-height : 2;
		color : white;
	}
	#fixedContacts ul{
		display : grid;
		grid-auto-flow : column;
		justify-content : start;
	}
	#fixedContacts a{
		display : grid;
		place-items : center;
		font-family : "Crimson Text" , serif;
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
		line-height : 2;
	}
	#fixedContacts .tel{
		padding-inline : calc( 38.5 var( --remBase ) );
		color : var( --base );
		background-color : var( --gold );
	}
	#fixedContacts .mail{
		padding-inline : calc( 33.5 var( --remBase ) );
		color : #333;
		background-color : white;
	}
	#fixedContacts .line{
		padding-inline : calc( 30.5 var( --remBase ) );
		color : white;
		background-color : color-mix( in srgb , #05222e 40% , transparent );
		outline : solid 1px white;
		outline-offset : -1px;
	}
}

/* --------------------------------------------
TITLES
--------------------------------------------- */
:where( #titles01 ){
	display : grid;
	grid-auto-flow : row;
	row-gap : calc( 32 var( --remBase ) );
	align-content : start;
	color : white;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
:where( #titles01 ) > h1{
	display : grid;
	align-items : baseline;
	justify-content : start;
	font-weight : 400;
}
:where( #titles01 ) > h1 span{
	font-family : "Crimson Text" , serif;
	line-height : 1.2;
}
:where( #titles01 ) > h1::before{
	display : block;
	height : 1px;
	font-size : 0;
	content : "";
	background-color : white;
}
:where( #titles01 ) > h1::after{
	line-height : 1.7;
}
:where( #titles01 ) p{
	line-height : 2;
}
:where( #titles01 ) .link-inside{
	display : grid;
	grid-auto-flow : column;
}
:where( #titles01 ) .link-inside a{
	font-weight : 500;
	color : white;
}
:where( #titles01 ) .link-inside a > :where( ruby  , span ){
	display : grid;
	grid-auto-flow : column;
	column-gap : calc( 2 var( --remBase ) );
	align-items : baseline;
	justify-content : start;
}
@media screen and ( width <= 750px ){
	:where( #titles01 ) > h1{
		grid-template-columns : auto 1fr;
		row-gap : calc( 4 var( --remBase ) );
		column-gap : calc( 4 var( --percentBase ) );
	}
	:where( #titles01 ) > h1 span{
		grid-row : 1;
		grid-column : 1/-1;
		font-size : clamp( var( --min ) , 7rem , var( --max ) );
	}
	:where( #titles01 ) > h1::after{
		grid-row : 2;
		grid-column : 1;
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	:where( #titles01 ) > h1::before{
		grid-row : 2;
		grid-column : 2;
	}
	:where( #titles01 ) p{
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	:where( #titles01 ) .link-inside{
		justify-content : space-between;
	}
	:where( #titles01 ) .link-inside a > :where( ruby , span ){
		font-size : clamp( var( --min ) , 3.6rem , var( --max ) );
	}
	:where( #titles01 ) .link-inside a > :where( ruby , span ) > :where( rt , span ){
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
}
@media print , screen and ( width > 750px ){
	:where( #titles01 ){
		height : calc( 697 var( --remBase ) );
	}
	:where( #titles01 ) > h1{
		grid-template-columns : auto calc( 16 var( --percentBase ) ) auto calc( 4 var( --percentBase ) ) auto 1fr;
		grid-auto-flow : column;
	}
	:where( #titles01 ) > h1 span{
		grid-column : 1;
		font-size : clamp( var( --min ) , 10rem , var( --max ) );
	}
	:where( #titles01 ) > h1::after{
		grid-column : 3;
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	:where( #titles01 ) > h1::before{
		grid-column : 5;
	}
	:where( #titles01 ) p{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	:where( #titles01 ) .link-inside{
		column-gap : calc( 24 var( --percentBase ) );
		justify-content : start;
	}
	:where( #titles01 ) .link-inside a > :where( ruby , span ){
		font-size : clamp( var( --min ) , 6rem , var( --max ) );
	}
	:where( #titles01 ) .link-inside a > :where( ruby , span ) > :where( rt , span ){
		font-size : clamp( var( --min ) , 2.4rem , var( --max ) );
	}
}
@media ( hover : hover ){
	#titles01 .link-inside a:hover{
		color : var( --gold );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#titles01 .link-inside a{
		transition : color var( --transitionBounds );
	}
}
@media screen and ( width <= 750px ){
	.titlesProposal{
		height : calc( 612 var( --remBase ) );
		padding-top : calc( 180 var( --remBase ) );
		background-image : url( "../images/proposal/bg_title_sp.webp" );
	}
}
@media print , screen and ( width > 750px ){
	.titlesProposal{
		padding-top : calc( 190.5 var( --remBase ) );
		background-image : url( "../images/proposal/bg_title_pc.webp" );
	}
	.titlesProposal > h1::before{
		width : calc( 138 var( --remBase ) );
	}
	.titlesProposal > p{
		width : calc( 560 var( --percentBase ) );
	}
}
.titlesAbout h2{
	font-weight : 500;
}
@media screen and ( width <= 750px ){
	.titlesAbout{
		height : calc( 584 var( --remBase ) );
		padding-top : calc( 180 var( --remBase ) );
		background-image : url( "../images/about/bg_title_sp.webp" );
	}
	.titlesAbout .box h2{
		font-size : clamp( var( --min ) , 2rem , var( --max ) );
		line-height : 1.3;
	}
	.titlesAbout .box p{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.titlesAbout{
		padding-top : calc( 258.5 var( --remBase ) );
		background-image : url( "../images/about/bg_title_pc.webp" );
	}
	.titlesAbout > h1::before{
		width : calc( 74 var( --remBase ) );
	}
	.titlesAbout .box{
		width : calc( 752 var( --percentBase ) );
	}
	.titlesAbout .box h2{
		font-size : clamp( var( --min ) , 4rem , var( --max ) );
		line-height : 1.2;
	}
	.titlesAbout .box h2 span{
		font-size : clamp( var( --min ) , 3rem , var( --max ) );
	}
	.titlesAbout .box p{
		margin-top : calc( 16 var( --remBase ) );
	}
}
.titlesContact h3{
	font-weight : 400;
}
.titlesContact .tel h3{
	line-height : 2;
}
.titlesContact .tel a{
	display : block;
	width : fit-content;
	margin-top : calc( 4 var( --remBase ) );
	font-family : "Crimson Text" , serif;
	font-size : clamp( var( --min ) , 4rem , var( --max ) );
	color : white;
}
.titlesContact .tel dl{
	display : grid;
	grid-auto-flow : column;
	align-items : baseline;
	margin-top : calc( 4 var( --remBase ) );
}
.titlesContact .tel dt , .titlesContact .tel dd{
	font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	line-height : 2;
}
.titlesContact .line a{
	display : grid;
	place-items : center;
	width : 100%;
	padding-block : calc( 12 var( --remBase ) );
	font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
	line-height : 2;
	color : white;
	outline : solid 1px white;
	outline-offset : -1px;
}
.titlesContact .line p{
	margin-top : calc( 8 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	.titlesContact{
		height : calc( 912 var( --remBase ) );
		padding-top : calc( 180 var( --remBase ) );
		background-image : url( "../images/contact/bg_title_sp.webp" );
	}
	.titlesContact li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	.titlesContact .tel h3{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
		text-align : center;
	}
	.titlesContact .tel a{
		margin-inline : auto;
	}
	.titlesContact .tel dl{
		justify-content : center;
	}
	.titlesContact .line a{
		padding-inline : calc( 24 var( --percentBase ) );
	}
	.titlesContact .line p{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
		text-align : center;
	}
}
@media print , screen and ( width > 750px ){
	.titlesContact{
		padding-top : calc( 176.5 var( --remBase ) );
		background-image : url( "../images/contact/bg_title_pc.webp" );
	}
	.titlesContact > h1::before{
		width : calc( 122 var( --remBase ) );
	}
	.titlesContact > p{
		width : calc( 752 var( --percentBase ) );
	}
	.titlesContact ul{
		display : grid;
		grid-template-columns : auto calc( 304 var( --percentBase ) );
		column-gap : calc( 76 var( --percentBase ) );
		align-items : start;
		justify-content : start;
	}
	.titlesContact .tel h3{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	.titlesContact .tel dl{
		justify-content : start;
	}
	.titlesContact .line a{
		padding-inline : calc( 24 * 100% / 304 );
	}
}
.titlesThanks h3{
	font-weight : 400;
}
.titlesThanks .tels h3{
	line-height : 2;
}
.titlesThanks .tels a{
	display : block;
	width : fit-content;
	margin-top : calc( 4 var( --remBase ) );
	font-family : "Crimson Text" , serif;
	font-size : clamp( var( --min ) , 4rem , var( --max ) );
	color : white;
}
.titlesThanks .tels dl{
	display : grid;
	grid-auto-flow : column;
	align-items : baseline;
	margin-top : calc( 4 var( --remBase ) );
}
.titlesThanks .tels dt , .titlesThanks .tels dd{
	font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	line-height : 2;
}
.titlesThanks .back{
	display : grid;
	place-items : center;
	width : 100%;
	padding-block : calc( 12 var( --remBase ) );
	font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
	line-height : 2;
	color : white;
	outline : solid 1px white;
	outline-offset : -1px;
}
@media screen and ( width <= 750px ){
	.titlesThanks{
		height : calc( 912 var( --remBase ) );
		padding-top : calc( 180 var( --remBase ) );
		background-image : url( "../images/contact/bg_title_sp.webp" );
	}
	.titlesThanks .tels h3{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
		text-align : center;
	}
	.titlesThanks .tels a{
		margin-inline : auto;
	}
	.titlesThanks .tels dl{
		justify-content : center;
	}
	.titlesThanks .back{
		margin-top : calc( 24 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.titlesThanks{
		padding-top : calc( 176.5 var( --remBase ) );
		background-image : url( "../images/contact/bg_title_pc.webp" );
	}
	.titlesThanks > h1::before{
		width : calc( 122 var( --remBase ) );
	}
	.titlesThanks > p{
		width : calc( 752 var( --percentBase ) );
	}
	.titlesThanks .box{
		display : grid;
		grid-template-columns : auto calc( 304 var( --percentBase ) );
		column-gap : calc( 76 var( --percentBase ) );
		align-items : center;
		justify-content : start;
	}
	.titlesThanks .tesl h3{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	.titlesThanks .tesl dl{
		justify-content : start;
	}
	.titlesThanks .back{
		padding-inline : calc( 24 * 100% / 304 );
	}
}