@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--headerHeight : calc( 64 var( --remBase ) );
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--headerHeight : calc( 144 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width >= 1440px ){
	:root{
		font-size : 10px;
	}
}
body{
	background-color : #f6f6f6;
}

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

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

/* --------------------------------------------
  STATE
  --------------------------------------------- */
@media screen and ( width <= 750px ){
	.is-pc{
		display : none;
	}
}
@media screen and ( width <= 750px ){
	.is-tb{
		display : none;
	}
}
@media print , screen and ( width >= 1440px ){
	.is-tb{
		display : none;
	}
}
@media print , screen and ( width > 750px ){
	.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 ( width <= 750px ){
	[data-after-sp]::after{
		white-space : pre;
		content : attr( data-after-sp );
	}
}
@media screen and ( width <= 750px ){
	[data-before-sp]::before{
		white-space : pre;
		content : attr( data-before-sp );
	}
}
@media print , screen and ( width > 750px ){
	[data-after-pc]::after{
		white-space : pre;
		content : attr( data-after-pc );
	}
}
@media print , screen and ( width > 750px ){
	[data-before-pc]::before{
		white-space : pre;
		content : attr( data-before-pc );
	}
}

/* --------------------------------------------
  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 : " ";
	}
}

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

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	position : relative;
	z-index : 10;
	height : var( --headerHeight );
}
#header .logo{
	display : block;
	width : fit-content;
}
@media screen and ( width <= 750px ){
	#header{
		padding-top : calc( 11 var( --remBase ) );
		background-color : white;
	}
	#header .logo img{
		height : calc( 45 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#header{
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 128 var( --percentBase ) );
		align-items : start;
		justify-content : center;
		padding-top : calc( 42.52 var( --remBase ) );
	}
	#header .logo{
		grid-row : 1;
		grid-column : 1;
	}
	#header .logo img{
		height : calc( 84 var( --remBase ) );
	}
}

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
@media screen and ( width <= 750px ){
	body:has( #menuBtn[aria-expanded="true"] ){
		overflow : hidden;
	}
}
@media screen and ( width <= 750px ){
	#menuBtn[aria-expanded="true"]{
		overflow : hidden;
	}
	#menuBtn{
		z-index : 12;
		overflow : hidden;
	}
	#menuBtn > span:nth-of-type( 1 ){
		position : relative;
		display : block;
		width : 100%;
		height : 100%;
		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:nth-of-type( 1 ){
		top : 0;
	}
	#menuBtn > span:nth-of-type( 1 ) > span:nth-of-type( 4 ){
		bottom : 0;
	}
	#menuBtn[aria-expanded="true"] > span:nth-of-type( 1 ) span:nth-of-type( 1 ){
		scale : 0;
		translate : calc( $( top ) var( --remBase ) ) 0;
	}
	#menuBtn[aria-expanded="true"] > span:nth-of-type( 1 ) span:nth-of-type( 2 ){
		rotate : -45deg;
	}
	#menuBtn[aria-expanded="true"] > span:nth-of-type( 1 ) span:nth-of-type( 3 ){
		rotate : 45deg;
	}
	#menuBtn[aria-expanded="true"] > span:nth-of-type( 1 ) span:nth-of-type( 4 ){
		scale : 0;
		translate : calc( -$( top ) var( --remBase ) ) 0;
	}
	#menuBtn{
		position : fixed;
		top : 0;
		right : 0;
		width : calc( 64 var( --viewportBase ) );
		height : calc( 64 var( --remBase ) );
		padding-block : calc( 17 var( --remBase ) );
		padding-inline : calc( 14 var( --viewportBase ) );
		background-color : var( --color01 );
	}
	#menuBtn span span{
		height : calc( 2 var( --remBase ) );
		background-color : white;
	}
	#menuBtn span span:where( :nth-of-type( 2 ) , :nth-of-type( 3 ) ){
		top : calc( 14 var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		#menuBtn::before{
			transition : border-radius .4s ease-in-out , background .4s ease-in;
		}
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#nav{
		z-index : 10;
	}
	#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;
		background-color : var( --color01 );
	}
	#nav > div{
		padding-block : calc( 56 var( --remBase ) );
		padding-left : calc( 45 * 100% / 368 );
		padding-right : calc( 16 * 100% / 368 );
	}
}
@media print , screen and ( width > 750px ){
	#nav{
		grid-row : 1;
		grid-column : 2;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		#nav{
			transition : translate .4s ease-in;
		}
	}
}
@media screen and ( width <= 750px ){
	#navGlobal{
		padding-bottom : calc( 40 var( --remBase ) );
		border-bottom : solid 1px white;
	}
	#navGlobal a{
		font-weight : 500;
		color : white;
	}
	#navGlobal > li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#navGlobal > li > a{
		display : grid;
		align-items : center;
		justify-content : start;
		height : calc( 40 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.3;
	}
	#navGlobal ul{
		margin-top : calc( 24 var( --remBase ) );
	}
	#navGlobal ul li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#navGlobal ul a{
		display : grid;
		grid-template-columns : calc( 18 * 100% / 275 ) auto;
		column-gap : calc( 7 * 100% / 275 );
		align-items : center;
		justify-content : start;
		height : calc( 50 var( --remBase ) );
		padding-inline : calc( 16 * 100% / 307 );
		font-size : 1.8rem;
		line-height : 1.3;
	}
	#navGlobal ul a::before{
		display : block;
		height : calc( 18 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "../images/ui/arrow/circle01.svg" ) center / contain no-repeat;
	}
}
@media print , screen and ( width > 750px ){
	#navGlobal{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 16 var( --remBase ) );
		align-items : center;
		padding-top : calc( 13.48 var( --remBase ) );
	}
	#navGlobal > li > a{
		font-size : 1.6rem;
		line-height : 2;
	}
	#navGlobal > li:not( :last-child ) > a{
		display : grid;
		align-items : center;
		justify-content : center;
		min-width : calc( 81 var( --remBase ) );
		height : calc( 32 var( --remBase ) );
		border-bottom-style : solid;
		border-bottom-width : calc( 2 var( --remBase ) );
	}
	#navGlobal > li:not( :last-child ) > a:not( .is-current ){
		border-bottom-color : transparent;
	}
	#navGlobal > li:not( :last-child ) > a.is-current{
		border-bottom-color : var( --color02 );
	}
	#navGlobal > li:has( div ){
		position : relative;
	}
	#navGlobal > li:has( div ) > div{
		position : absolute;
		left : 50%;
		display : grid;
		grid-template-rows : 0fr;
		grid-template-columns : max-content;
		width : fit-content;
		translate : -50% 0;
	}
	#navGlobal > li:has( div ) > div > ul{
		display : grid;
		grid-auto-flow : column;
		overflow : hidden;
		background-color : var( --color0102 );
	}
	#navGlobal > li:has( div ) > div li{
		height : calc( 48 var( --remBase ) );
	}
	#navGlobal > li:has( div ) > div li + li{
		position : relative;
	}
	#navGlobal > li:has( div ) > div li + li::before{
		position : absolute;
		top : 50%;
		left : -.5em;
		display : block;
		font-size : 0;
		font-size : 1.6rem;
		line-height : 2;
		content : "｜";
		translate : 0 -50%;
	}
	#navGlobal > li:has( div ) > div a{
		display : grid;
		place-items : center;
		height : 100%;
		padding-inline : calc( 32 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 2;
		color : var( --color01 );
		white-space : pre;
	}
	#navGlobal > li:has( div ):hover div{
		grid-template-rows : 1fr;
		padding-top : calc( 9 var( --remBase ) );
	}
	#navGlobal > li:last-child a{
		display : grid;
		place-items : center;
		width : calc( 176 var( --remBase ) );
		height : calc( 64 var( --remBase ) );
		color : white;
		background-color : var( --color01 );
		border : solid 1px var( --color01 );
	}
}
@media ( hover : hover ){
	#navGlobal > li:not( :last-child ) > a:hover{
		border-bottom-color : var( --color02 );
	}
	#navGlobal > li:last-child a:hover{
		color : var( --color01 );
		background-color : white;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#navGlobal > li:not( :last-child ) > a{
		transition : border-color var( --transitionBase );
	}
	#navGlobal > li:has( div ) div{
		transition : grid-template-rows var( --transitionBase );
	}
	#navGlobal > li:last-child a{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
}
@media screen and ( width <= 750px ){
	#menuBtnClose{
		display : block;
		width : fit-content;
		margin-inline : auto;
		margin-top : calc( 38 var( --remBase ) );
	}
	#menuBtnClose img{
		height : calc( 51.19 var( --remBase ) );
	}
}

/* --------------------------------------------
HEAD
--------------------------------------------- */
#head :where( h1 , h2 ){
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
	color : var( --color01 );
}
#head :where( h1 , h2 )[data-en]::after{
	font-family : Lato , system-ui;
	font-weight : 400;
	color : #999;
	letter-spacing : .1em;
	content : attr( data-en );
}
#head #breadcrumbs ol{
	display : flex;
	flex-wrap : wrap;
	align-items : baseline;
	justify-content : end;
}
#head #breadcrumbs ol li:not( :last-child )::after{
	white-space : pre;
	content : " / ";
}
@media screen and ( width <= 750px ){
	#head :where( h1 , h2 ){
		display : grid;
		grid-template-columns : 1fr;
		grid-auto-flow : row;
		row-gap : calc( 8 var( --remBase ) );
		align-content : end;
		align-items : end;
		justify-content : start;
		height : calc( 160 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.3;
		letter-spacing : .1em;
		background-color : color-mix( in srgb , #d3eaf1 90% , transparent );
	}
	#head :where( h1 , h2 )[data-en]::after{
		font-size : 1.2rem;
		line-height : 1.5;
	}
	#head #breadcrumbs{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#head{
		display : grid;
		grid-template-columns : auto auto;
		align-items : end;
		justify-content : space-between;
		height : calc( 320 var( --remBase ) );
		padding-bottom : calc( 45 var( --remBase ) );
		background-color : #d3eaf1;
	}
	#head :where( h1 , h2 ){
		column-gap : calc( 12 var( --remBase ) );
	}
	#head :where( h1 , h2 )[data-en]::after{
		font-size : 1.8rem;
		line-height : 1.5;
	}
}

/* --------------------------------------------
PARTS
--------------------------------------------- */
:where( .trapezoid , .parallelogram ){
	position : absolute;
	font-size : 0;
}

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
#mv{
	position : relative;
	overflow-x : clip;
}
#mv::before{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#mv p{
	display : grid;
	align-items : center;
	justify-content : start;
	width : fit-content;
	font-weight : 600;
}
#mv p strong{
	position : relative;
}
#mv p::before{
	position : absolute;
	display : block;
	content : "";
	background-color : white;
}
#mv .trapezoid01{
	background-color : var( --color0102 );
}
#mv .trapezoid02{
	background-color : var( --color01 );
}
#mv .trapezoid03{
	background-color : var( --color01 );
}
@media screen and ( width <= 750px ){
	#mv{
		height : calc( 392 var( --remBase ) );
		padding-top : calc( 238 var( --remBase ) );
	}
	#mv::before{
		top : 0;
		left : calc( 23.69 var( --viewportBase ) );
		z-index : 2;
		width : calc( 512 var( --viewportBase ) );
		height : calc( 384 var( --remBase ) );
		background-image : image-set( url( "../images/home/mv/img_sp.avif" ) type( "image/avif" ) , url( "../images/home/mv/img_sp.webp" ) type( "image/webp" ) );
	}
	#mv p{
		height : calc( 130 var( --remBase ) );
		padding-right : calc( 63 var( --viewportBase ) );
	}
	#mv p::before{
		top : calc( 238 var( --remBase ) );
		left : calc( -13.5 var( --viewportBase ) );
		z-index : 6;
		width : calc( 400.5 var( --viewportBase ) );
		height : calc( 130 var( --remBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 369.661 * 100% / 400.5 ) 100% , 0% 100% );
	}
	#mv p strong{
		z-index : 7;
	}
	#mv .trapezoid01{
		top : calc( 10 var( --remBase ) );
		left : calc( -213 var( --viewportBase ) );
		z-index : 0;
		width : calc( 308 var( --viewportBase ) );
		height : calc( 384 var( --remBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 220.587 * 100% / 308 ) 100% , 0% 100% );
	}
	#mv .trapezoid02{
		top : calc( 8 var( --remBase ) );
		left : calc( -120 var( --viewportBase ) );
		z-index : 5;
		width : calc( 222 var( --viewportBase ) );
		height : calc( 384 var( --remBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 134.966 * 100% / 222 ) 100% , 0% 100% );
	}
	#mv .trapezoid03{
		top : calc( 8 var( --remBase ) );
		left : calc( 62 var( --viewportBase ) );
		z-index : 1;
		width : calc( 425 var( --viewportBase ) );
		height : calc( 384 var( --remBase ) );
		clip-path : polygon( calc( 87.1458 * 100% / 425 ) 0 , 100% 0 , 100% 100% , 0% 100% );
	}
	#mv .parallelogram01{
		top : calc( 4 var( --remBase ) );
		left : calc( 4 var( --viewportBase ) );
		z-index : 3;
		width : calc( 117 var( --viewportBase ) );
	}
	#mv .parallelogram01 img{
		height : calc( 95 var( --remBase ) );
	}
	#mv .parallelogram02{
		top : calc( 11 var( --remBase ) );
		left : calc( 1 var( --viewportBase ) );
		z-index : 4;
		width : calc( 113 var( --viewportBase ) );
	}
	#mv .parallelogram02 img{
		height : calc( 92 var( --remBase ) );
	}
	#mv .parallelogram03{
		top : calc( 211 var( --remBase ) );
		left : calc( 18 var( --viewportBase ) );
		z-index : 0;
		width : calc( 217 var( --viewportBase ) );
	}
	#mv .parallelogram03 img{
		height : calc( 176 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#mv{
		height : calc( 809 var( --remBase ) );
		padding-top : calc( 397 var( --remBase ) );
	}
	#mv::before{
		top : calc( 18 var( --remBase ) );
		z-index : 2;
		height : calc( 759 var( --remBase ) );
		background-image : image-set( url( "../images/home/mv/img_pc.avif" ) type( "image/avif" ) , url( "../images/home/mv/img_pc.webp" ) type( "image/webp" ) );
	}
	#mv p{
		height : calc( 203 var( --remBase ) );
		padding-right : calc( 77 var( --percentBase ) );
		font-size : 4.4rem;
		line-height : 1.3;
		letter-spacing : .1em;
	}
	#mv p::before{
		top : calc( 397 var( --remBase ) );
		z-index : 3;
		height : calc( 203 var( --remBase ) );
	}
	#mv p strong{
		z-index : 4;
	}
	#mv .trapezoid01{
		top : calc( 10 var( --remBase ) );
		z-index : 0;
		height : calc( 536 var( --remBase ) );
	}
	#mv .trapezoid02{
		top : calc( 42 var( --remBase ) );
		z-index : 2;
		height : calc( 759 var( --remBase ) );
	}
	#mv .trapezoid03{
		top : calc( 273 var( --remBase ) );
		z-index : 0;
		height : calc( 536 var( --remBase ) );
	}
	#mv .parallelogram01{
		top : 0;
		z-index : 1;
	}
	#mv .parallelogram01 img{
		height : calc( 283 var( --remBase ) );
	}
	#mv .parallelogram02{
		top : calc( 32 var( --remBase ) );
		z-index : 0;
	}
	#mv .parallelogram02 img{
		height : calc( 242 var( --remBase ) );
	}
	#mv .parallelogram03{
		top : calc( 559 var( --remBase ) );
		z-index : 0;
	}
	#mv .parallelogram03 img{
		height : calc( 242 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#mv::before{
		left : calc( 7.5 var( --viewportBase ) );
		width : calc( 1745.5 var( --viewportBase ) );
	}
	#mv p::before{
		left : calc( -336.5 var( --viewportBase ) );
		width : calc( 1320.5 var( --viewportBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 1272.5 * 100% / 1320.5 ) 100% , 0% 100% );
	}
	#mv .trapezoid01{
		left : calc( -288 var( --viewportBase ) );
		width : calc( 429 var( --viewportBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 307 * 100% / 429 ) 100% , 0% 100% );
	}
	#mv .trapezoid02{
		left : calc( -288.5 var( --viewportBase ) );
		width : calc( 440 var( --viewportBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 267.5 * 100% / 440 ) 100% , 0% 100% );
	}
	#mv .trapezoid03{
		left : calc( 573 var( --viewportBase ) );
		width : calc( 1139.5 var( --viewportBase ) );
		clip-path : polygon( calc( 121.753 * 100% / 1139.49 ) 0 , 100% 0 , 100% 100% , 0% 100% );
	}
	#mv .parallelogram01{
		left : calc( 44 var( --viewportBase ) );
		width : calc( 349 var( --viewportBase ) );
	}
	#mv .parallelogram02{
		left : calc( 110 var( --viewportBase ) );
		width : calc( 299 var( --viewportBase ) );
	}
	#mv .parallelogram03{
		left : calc( 40 var( --viewportBase ) );
		width : calc( 299 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#mv::before{
		left : calc( 50% - 712.5px );
		width : 1745.5px;
	}
	#mv p::before{
		left : -56.5px;
		width : calc( 50% + 320.5px );
		clip-path : polygon( 0 0 , 100% 0 , calc( 100% - ( 1320.5px - 1272.5px ) ) 100% , 0% 100% );
	}
	#mv .trapezoid01{
		left : 0;
		width : calc( 50% - 571px );
		clip-path : polygon( 0 0 , 100% 0 , calc( 100% - ( 429px - 307px ) ) 100% , 0% 100% );
	}
	#mv .trapezoid02{
		left : 0;
		width : calc( 50% - 560px );
		clip-path : polygon( 0 0 , 100% 0 , calc( 100% - ( 440px - 267.5px ) ) 100% , 0% 100% );
	}
	#mv .trapezoid03{
		right : 0;
		width : calc( 50% + 147px );
		clip-path : polygon( calc( 100% - ( 1139.49px - 121.753px ) ) 0 , 100% 0 , 100% 100% , 0% 100% );
	}
	#mv .parallelogram01{
		left : calc( 50% - 676px );
		width : 349px;
	}
	#mv .parallelogram02{
		left : calc( 50% - 610px );
		width : 299px;
	}
	#mv .parallelogram03{
		left : calc( 50% - 680px );
		width : 299px;
	}
}

/* --------------------------------------------
TITLES
--------------------------------------------- */
#titles01{
	position : relative;
	overflow-x : clip;
}
#titles01::before{
	position : absolute;
	left : 0;
	z-index : 1;
	content : "";
	background-color : var( --color01 );
}
#titles01 picture{
	position : absolute;
	top : 0;
	left : 0;
	z-index : 0;
	width : 100%;
}
#titles01 picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#titles01 :where( h1,  h2 ){
	font-weight : 400;
}
#titles01 :where( h1,  h2 ) span{
	font-weight : 400;
	color : white;
}
#titles01 :where( h1,  h2 ) span:nth-of-type( 1 ){
	letter-spacing : .2em;
}
@media screen and ( width <= 750px ){
	#titles01{
		min-height : calc( 126 var( --remBase ) );
		padding-top : calc( 80 var( --remBase ) );
	}
	#titles01::before{
		top : calc( 70 var( --remBase ) );
		z-index : 1;
		width : calc( 364 var( --viewportBase ) );
		height : calc( 56 var( --remBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 342 * 100% / 364 ) 100% , 0% 100% );
	}
	#titles01 picture{
		height : calc( 120 var( --remBase ) );
	}
	#titles01 :where( h1,  h2 ){
		position : relative;
		z-index : 2;
		display : grid;
		grid-template-columns : auto auto;
		align-items : baseline;
		justify-content : start;
	}
	#titles01 :where( h1,  h2 ) span:nth-of-type( 1 ){
		font-size : 2.6rem;
		line-height : 1.3;
	}
	#titles01 :where( h1,  h2 ) span:nth-of-type( 2 ){
		font-size : 1.2rem;
		line-height : 1.3;
		letter-spacing : .2em;
	}
}
@media print , screen and ( width > 750px ){
	#titles01{
		min-height : calc( 556 var( --remBase ) );
		padding-top : calc( 409 var( --remBase ) );
	}
	#titles01::before{
		top : calc( 382 var( --remBase ) );
		height : calc( 145 var( --remBase ) );
	}
	#titles01 picture{
		height : calc( 500 var( --remBase ) );
	}
	#titles01 :where( h1,  h2 ) span:nth-of-type( 1 ){
		position : relative;
		z-index : 2;
		display : block;
		width : calc( 626 var( --percentBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
		padding-bottom : calc( 13 var( --remBase ) );
		font-size : 5rem;
		line-height : 1.3;
		border-bottom : solid 1px white;
	}
	#titles01 :where( h1,  h2 )[data-en-pc]::after{
		position : absolute;
		top : calc( 353 var( --remBase ) );
		z-index : 1;
		font-family : "Qwitcher Grypen" , serif;
		font-size : 18rem;
		line-height : 1;
		color : white;
		content : attr( data-en-pc );
	}
	#titles01 #breadcrumbs{
		position : relative;
		z-index : 2;
		margin-top : calc( 29 var( --remBase ) );
	}
	#titles01 #breadcrumbs ol{
		display : flex;
		flex-wrap : wrap;
		align-items : baseline;
		justify-content : end;
	}
	#titles01 #breadcrumbs li{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#titles01 #breadcrumbs li:not( :last-child )::after{
		white-space : pre;
		content : " / ";
	}
}
@media screen and ( 750px < width < 1440px ){
	#titles01::before{
		left : calc( -280 var( --viewportBase ) );
		width : calc( 879 var( --viewportBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 844.111 * 100% / 879 ) 100% , 0% 100% );
	}
	#titles01 :where( h1,  h2 )[data-en-pc]::after{
		right : calc( 20 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#titles01::before{
		left : 0;
		width : calc( 50% - 121px );
		clip-path : polygon( 0 0 , 100% 0 , calc( 100% - ( 879px - 844.111px ) ) 100% , 0% 100% );
	}
	#titles01 :where( h1,  h2 )[data-en-pc]::after{
		right : calc( 50% - 700px );
	}
}
#titles02{
	position : relative;
	overflow-x : clip;
}
#titles02 .bg01{
	position : absolute;
	top : 0;
	left : 0;
	z-index : 0;
	width : 100%;
	font-size : 0;
}
#titles02 .bg01 img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#titles02 .box :where( h1 , h2 ){
	position : relative;
	z-index : 3;
	display : grid;
	grid-template-columns : repeat( 2 , auto );
	align-items : baseline;
	justify-content : start;
	font-weight : 400;
}
#titles02 .box :where( h1 , h2 ) span{
	color : white;
	letter-spacing : .1em;
}
#titles02 .trapezoid01{
	z-index : 2;
	background-color : var( --color01 );
}
#titles02 .bg02{
	position : absolute;
	left : 0;
	z-index : 0;
	width : 100%;
	font-size : 0;
}
#titles02 .bg02 img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#titles02 .app{
	position : relative;
	z-index : 1;
	background-color : color-mix( in srgb , #f6f6f6 88% , transparent );
}
#titles02 .app p span{
	display : block;
}
#titles02 #navSercicies{
	position : relative;
	z-index : 3;
}
#titles02 .trapezoid02{
	z-index : 2;
	background-color : var( --color01 );
}
@media screen and ( width <= 750px ){
	#titles02{
		padding-top : calc( 80 var( --remBase ) );
	}
	#titles02 .bg01{
		height : calc( 120 var( --remBase ) );
	}
	#titles02 .box :where( h1 , h2 ) span:nth-of-type( 1 ){
		font-size : 2.6rem;
		line-height : 1.3;
	}
	#titles02 .box :where( h1 , h2 ) span:nth-of-type( 2 ){
		font-size : 1.2rem;
		line-height : 1.3;
	}
	#titles02 .trapezoid01{
		top : calc( 70 var( --remBase ) );
		left : 0;
		width : calc( 364 var( --viewportBase ) );
		height : calc( 56 var( --remBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 342 * 100%  / 364 ) 100% , 0% 100% );
	}
	#titles02 .bg02{
		top : calc( 120 var( --remBase ) );
		height : calc( 201.5 var( --remBase ) );
	}
	#titles02 .app{
		width : calc( 340 var( --percentBase ) );
		height : calc( 201 var( --remBase ) );
		padding-top : calc( 32 var( --remBase ) );
		padding-left : calc( 36 var( --percentBase ) );
		margin-top : calc( -7 var( --remBase ) );
		margin-left : calc( -35 var( --percentBase ) );
	}
	#titles02 .app :where( h2 , h3 ) img{
		height : calc( 64.79 var( --remBase ) );
	}
	#titles02 .app p{
		margin-top : calc( 12.21 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#titles02{
		min-height : calc( 676 var( --remBase ) );
		padding-top : calc( 86 var( --remBase ) );
	}
	#titles02 .bg01{
		height : calc( 250 var( --remBase ) );
	}
	#titles02 .box{
		position : relative;
		display : grid;
		grid-template-columns : auto auto;
		align-items : end;
		justify-content : space-between;
	}
	#titles02 .box :where( h1 , h2 ) span:nth-of-type( 1 ){
		font-size : 4rem;
		line-height : 1.3;
	}
	#titles02 .box :where( h1 , h2 ) span:nth-of-type( 2 ){
		font-size : 2rem;
		line-height : 1.3;
	}
	#titles02 #breadcrumbs ol{
		display : flex;
		flex-wrap : wrap;
		align-items : baseline;
		justify-content : end;
	}
	#titles02 #breadcrumbs li{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#titles02 #breadcrumbs li:not( :last-child )::after{
		white-space : pre;
		content : " / ";
	}
	#titles02 .trapezoid01{
		top : calc( 62 var( --remBase ) );
		height : calc( 100 var( --remBase ) );
	}
	#titles02 .bg02{
		top : calc( 146 var( --remBase ) );
		height : calc( 458 var( --remBase ) );
	}
	#titles02 .app{
		width : calc( 773 var( --percentBase ) );
		height : calc( 464 var( --remBase ) );
		padding-top : calc( 120 var( --remBase ) );
		padding-left : calc( 114 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
		margin-left : calc( 83 var( --percentBase ) );
	}
	#titles02 .app :where( h2 , h3 ) img{
		height : calc( 123 var( --remBase ) );
	}
	#titles02 .app p{
		margin-top : calc( 39 var( --remBase ) );
	}
	#titles02 .trapezoid02{
		top : calc( 576 var( --remBase ) );
		height : calc( 100 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#titles02 .trapezoid01{
		left : calc( -280 var( --viewportBase ) );
		width : calc( 879 var( --viewportBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 855 * 100%  / 879 ) 100% , 0% 100% );
	}
	#titles02 .trapezoid02{
		left : calc( 288 var( --viewportBase ) );
		width : calc( 1430 var( --viewportBase ) );
		clip-path : polygon( calc( 24 * 100% / 1430 ) 0 , 100% 0 , 100% 100% , 0% 100% );
	}
}
@media print , screen and ( width >= 1440px ){
	#titles02 .trapezoid01{
		left : 0;
		width : calc( 50% - 121px );
		clip-path : polygon( 0 0 , 100% 0 , calc( 100% - ( 879px - 855px ) ) 100% , 0% 100% );
	}
	#titles02 .trapezoid02{
		right : 0;
		width : calc( 50% + 570px );
		clip-path : polygon( 24px 0 , 100% 0 , 100% 100% , 0% 100% );
	}
}
#navSercicies{
	display : grid;
	align-items : center;
}
#navSercicies > a{
	display : grid;
	place-items : center;
	font-weight : 600;
	background-color : var( --color04 );
	border : solid 1px var( --color04 );
}
@media screen and ( width <= 750px ){
	#navSercicies{
		display : grid;
		grid-template-columns : calc( 242 var( --percentBase ) ) calc( 120 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
	}
	#navSercicies > div{
		position : relative;
	}
	#navSercicies button{
		position : relative;
		width : 100%;
		height : calc( 48 var( --remBase ) );
		font-size : 1.6rem;
		font-weight : 600;
		line-height : 2;
		color : white;
		background-color : #aaa;
	}
	#navSercicies button::before{
		position : absolute;
		top : 50%;
		left : calc( 14 * 100% / 242 );
		display : block;
		width : calc( 18 * 100% / 242 );
		height : calc( 18 var( --remBase ) );
		clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
		font-size : 0;
		pointer-events : none;
		content : "";
		background-color : white;
		translate : 0 -50%;
	}
	#navSercicies button[aria-expanded="true"]::before{
		rotate : -180deg;
	}
	#navSercicies > a{
		height : calc( 48 var( --remBase ) );
		font-size : 1.6em;
	}
}
@media print , screen and ( width > 750px ){
	#navSercicies{
		grid-template-columns : auto calc( 120 var( --percentBase ) );
		column-gap : calc( 32 var( --percentBase ) );
		justify-content : end;
		margin-top : calc( -8 var( --remBase ) );
	}
	#navSercicies > a{
		height : calc( 48 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 2;
		color : white;
	}
}
#linkServices a{
	display : grid;
	align-items : center;
	line-height : 2;
	border-bottom-style : solid;
	border-bottom-width : calc( 2 var( --remBase ) );
}
#linkServices a.is-current{
	border-bottom-color : var( --color02 );
}
@media screen and ( width <= 750px ){
	#linkServices{
		position : absolute;
		top : 100%;
		left : 0;
		display : grid;
		width : 100%;
		background-color : #d9d9d9;
	}
	#linkServices[aria-hidden="true"]{
		grid-template-rows : 0fr;
	}
	#linkServices[aria-hidden="false"]{
		grid-template-rows : 1fr;
	}
	#linkServices[aria-hidden="false"] > ul{
		padding-block : calc( 22 var( --remBase ) );
		padding-top : calc( 7 var( --remBase ) );
	}
	#linkServices ul{
		z-index : 4;
		padding-inline : calc( 18 * 100% / 242 );
		overflow : hidden;
	}
	#linkServices li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#linkServices a{
		justify-content : start;
		width : fit-content;
		font-size : 1.4rem;
	}
	#linkServices a:not( .is-current ){
		border-bottom-color : var( --color01 );
	}
}
@media print , screen and ( width > 750px ){
	#linkServices ul{
		display : grid;
		grid-auto-flow : column;
	}
	#linkServices li{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
	}
	#linkServices li + li::before{
		margin-inline : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 2;
		color : white;
		content : "｜";
	}
	#linkServices a{
		display : grid;
		place-items : center;
		justify-content : start;
		height : calc( 32 var( --remBase ) );
		font-size : 1.6rem;
		color : white;
	}
	#linkServices a:not( .is-current ){
		border-bottom-color : transparent;
	}
}
@media ( hover : hover ){
	@media print , screen and ( width > 750px ){
		#navSercicies > a:hover{
			color : var( --color04 );
			background-color : white;
		}
		#navSercicies li a:hover{
			border-color : var( --color02 );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		#navSercicies button::before{
			transition : rotate var( --transitionBase );
		}
		#navSercicies #linkServices{
			transition : grid-template-rows var( --transitionBase );
		}
		#navSercicies #linkServices > ul{
			transition : padding var( --transitionBase );
		}
	}
	@media print , screen and ( width > 750px ){
		#navSercicies > a{
			transition : background-color var( --transitionBase ) , color var( --transitionBase );
		}
		#navSercicies li a{
			transition : border-color var( --transitionBase );
		}
	}
}
#titles03{
	position : relative;
	overflow-x : clip;
}
#titles03 .bg01{
	position : absolute;
	top : 0;
	left : 0;
	z-index : 0;
	width : 100%;
	font-size : 0;
}
#titles03 .bg01 img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#titles03 h1{
	position : relative;
	z-index : 3;
	display : grid;
	grid-template-columns : repeat( 2 , auto );
	align-items : baseline;
	justify-content : start;
	font-weight : 400;
}
#titles03 h1 span{
	color : white;
	letter-spacing : .1em;
}
#titles03 .trapezoid{
	z-index : 2;
	background-color : var( --color01 );
}
#titles03 .bg02{
	position : absolute;
	left : 0;
	z-index : 0;
	width : 100%;
	font-size : 0;
}
#titles03 .bg02 img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#titles03 h2{
	position : relative;
	z-index : 1;
}
#titles03 h2 span:nth-of-type( 1 ){
	display : grid;
	place-items : center;
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 600;
	color : white;
	background-color : #34c759;
	border-radius : 100vmax;
}
#titles03 h2 span:nth-of-type( 2 ){
	line-height : 1.3;
	color : var( --color01 );
}
@media screen and ( width <= 750px ){
	#titles03{
		min-height : calc( 298.06 var( --remBase ) );
		padding-top : calc( 80 var( --remBase ) );
	}
	#titles03 .bg01{
		height : calc( 120 var( --remBase ) );
	}
	#titles03 h1 span:nth-of-type( 1 ){
		font-size : 2.6rem;
		line-height : 1.3;
	}
	#titles03 h1 span:nth-of-type( 2 ){
		font-size : 1.2rem;
		line-height : 1.3;
	}
	#titles03 .trapezoid{
		top : calc( 70 var( --remBase ) );
		left : 0;
		width : calc( 364 var( --viewportBase ) );
		height : calc( 56 var( --remBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 342 * 100%  / 364 ) 100% , 0% 100% );
	}
	#titles03 .bg02{
		top : calc( 97 var( --remBase ) );
		height : calc( 201.06 var( --remBase ) );
	}
	#titles03 h2{
		width : calc( 321 var( --percentBase ) );
		height : calc( 201 var( --remBase ) );
		padding-top : calc( 81 var( --remBase ) );
		padding-left : calc( 20 var( --percentBase ) );
		margin-top : calc( -16.8 var( --remBase ) );
		margin-left : calc( -20 var( --percentBase ) );
	}
	#titles03 h2 span:nth-of-type( 1 ){
		width : calc( 112.43 * 100% / 285 );
		height : calc( 23.71 var( --remBase ) );
		font-size : 1.2rem;
	}
	#titles03 h2 span:nth-of-type( 2 ){
		font-size : 3.7rem;
		white-space : pre;
	}
}
@media print , screen and ( width > 750px ){
	#titles03{
		min-height : calc( 610 var( --remBase ) );
		padding-top : calc( 86 var( --remBase ) );
	}
	#titles03 .bg01{
		height : calc( 250 var( --remBase ) );
	}
	#titles03 .box{
		position : relative;
		display : grid;
		grid-template-columns : auto auto;
		align-items : end;
		justify-content : space-between;
	}
	#titles03 h1 span:nth-of-type( 1 ){
		font-size : 4rem;
		line-height : 1.3;
	}
	#titles03 h1 span:nth-of-type( 2 ){
		font-size : 2rem;
		line-height : 1.3;
	}
	#titles03 #breadcrumbs ol{
		display : flex;
		flex-wrap : wrap;
		align-items : baseline;
		justify-content : end;
	}
	#titles03 #breadcrumbs li{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#titles03 #breadcrumbs li:not( :last-child )::after{
		white-space : pre;
		content : " / ";
	}
	#titles03 .trapezoid{
		top : calc( 62 var( --remBase ) );
		height : calc( 100 var( --remBase ) );
	}
	#titles03 .bg02{
		top : calc( 146 var( --remBase ) );
		height : calc( 458 var( --remBase ) );
	}
	#titles03 h2{
		width : calc( 695 var( --percentBase ) );
		height : calc( 464 var( --remBase ) );
		padding-top : calc( 150 var( --remBase ) );
		padding-left : calc( 37 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
		margin-left : calc( 165 var( --percentBase ) );
		background-color : color-mix( in srgb , #f6f6f6 88% , transparent );
	}
	#titles03 h2 span:nth-of-type( 1 ){
		width : calc( 178* 100% / 530 );
		height : calc( 45 var( --remBase ) );
		font-size : 2rem;
	}
	#titles03 h2 span:nth-of-type( 2 ){
		margin-top : calc( 8 var( --remBase ) );
		font-size : 6rem;
	}
}
@media screen and ( 750px < width < 1440px ){
	#titles03 .trapezoid{
		left : calc( -280 var( --viewportBase ) );
		width : calc( 879 var( --viewportBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 855 * 100%  / 879 ) 100% , 0% 100% );
	}
}
@media print , screen and ( width >= 1440px ){
	#titles03 .trapezoid{
		left : 0;
		width : calc( 50% - 121px );
		clip-path : polygon( 0 0 , 100% 0 , calc( 100% - ( 879px - 855px ) ) 100% , 0% 100% );
	}
}
@media print , screen and ( width > 750px ){
	#titles02 + #title04{
		margin-top : calc( 16 var( --remBase ) );
	}
}
#title04{
	display : grid;
	place-items : center;
	font-weight : 400;
	color : var( --base );
}
@media screen and ( width <= 750px ){
	#title04{
		height : calc( 116 var( --remBase ) );
		color : var( --color01 );
	}
}
@media print , screen and ( width > 750px ){
	#title04{
		height : calc( 240 var( --remBase ) );
		background-color : var( --color0103 );
		border-image-source : linear-gradient( var( --color0103 ) , var( --color0103 ) );
		border-image-slice : 0 fill;
		border-image-outset : 0 100vw 0 100vw;
	}
}