@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( 200 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{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
@media screen and ( width <= 750px ){
	.lh-sp{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
@media print , screen and ( width > 750px ){
	.lh-pc{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	position : relative;
	z-index : 10;
	height : var( --headerHeight );
	background-color : white;
}
#header .logo{
	display : block;
	width : fit-content;
}
@media screen and ( width <= 750px ){
	#header{
		padding-top : calc( 11 var( --remBase ) );
	}
	#header .logo img{
		height : calc( 45.12 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#header{
		display : grid;
		grid-template-columns : auto calc( 30.6 var( --percentBase ) ) auto 1fr auto calc( 14 var( --percentBase ) );
		row-gap : calc( 12 var( --remBase ) );
		align-items : start;
		padding-top : calc( 34 var( --remBase ) );
	}
	#header .logo{
		grid-row : 1;
		grid-column : 1;
		margin-top : calc( 21 var( --remBase ) );
	}
	#header .logo img{
		height : calc( 62 var( --remBase ) );
	}
	#header .rankings{
		display : grid;
		grid-row : 1;
		grid-column : 3;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		padding-top : calc( 22 var( --remBase ) );
	}
	#header .rankings li:nth-child( 1 ) img{
		height : calc( 51 var( --remBase ) );
	}
	#header .rankings li:nth-child( 2 ){
		margin-left : calc( 5 var( --remBase ) );
	}
	#header .rankings li:nth-child( 2 ) img{
		height : calc( 46 var( --remBase ) );
	}
	#header .rankings li:nth-child( 3 ){
		margin-left : calc( 14 var( --remBase ) );
	}
	#header .rankings li:nth-child( 3 ) img{
		height : calc( 53 var( --remBase ) );
	}
	#header .rankings li:nth-child( 4 ){
		margin-left : calc( 10 var( --remBase ) );
	}
	#header .rankings li:nth-child( 4 ) img{
		height : calc( 50 var( --remBase ) );
	}
	#header .rankings li:nth-child( 5 ){
		margin-left : calc( 12 var( --remBase ) );
	}
	#header .rankings li:nth-child( 5 ) img{
		height : calc( 48 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 ) );
	}
	#menuBtn::before{
		position : absolute;
		top : 0;
		right : 0;
		display : block;
		width : 100%;
		height : 100%;
		content : "";
		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 ) );
	}
	#menuBtn[aria-expanded="true"]::before{
		top : calc( 7 var( --remBase ) );
		right : calc( 7 * 100% / 64 );
		width : calc( 50 * 100% / 64 );
		height : calc( 50 var( --remBase ) );
		background-color : white;
		border-radius : 50%;
	}
	#menuBtn[aria-expanded="true"] span span{
		background-color : var( --color01 );
	}
}
@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( 32 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 368 );
	}
}
@media print , screen and ( width > 750px ){
	#nav{
		display : contents;
	}
	#nav > div{
		display : contents;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		#nav{
			transition : translate .4s ease-in;
		}
	}
}
#navApps p{
	font-weight : 500;
	line-height : 1.5;
}
@media screen and ( width <= 750px ){
	#navApps{
		width : fit-content;
		padding-inline : calc( 16 * 100% / 320 );
		padding-top : calc( 20 var( --remBase ) );
		padding-bottom : calc( 25 var( --remBase ) );
		background-color : white;
	}
	#navApps p{
		font-size : 1.6rem;
		text-align : center;
	}
	#navApps ul{
		margin-top : calc( 16 var( --remBase ) );
	}
	#navApps li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#navApps a{
		display : block;
		width : fit-content;
		margin-inline : auto;
	}
	#navApps img{
		height : calc( 72.91 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#navApps{
		grid-row : 1;
		grid-column : 5;
	}
	#navApps p{
		font-size : 1.4rem;
	}
	#navApps ul{
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 11 var( --remBase ) );
		align-items : center;
		justify-content : start;
		margin-top : calc( 8 var( --remBase ) );
	}
	#navApps img{
		height : calc( 44 var( --remBase ) );
	}
}
#menus a{
	font-weight : 500;
}
@media screen and ( width <= 750px ){
	#menus{
		margin-top : calc( 32 var( --remBase ) );
	}
	#menus a{
		color : white;
	}
}
@media print , screen and ( width > 750px ){
	#menus{
		display : grid;
		grid-row : 2;
		grid-column : 1/7;
		grid-auto-flow : column;
		align-items : center;
		justify-content : center;
		border-top : solid 1px #f1f2ed;
	}
	#menus > ul{
		display : contents;
	}
	#menus #navGlobal li:last-child{
		order : 19;
	}
	#menus::after , #menus li:not( .is-sp )::before{
		font-size : 1.2rem;
		font-weight : 400;
		line-height : 1.5;
		color : var( --color01 );
		content : "＊";
	}
	#menus li:not( .is-sp ){
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
		justify-content : start;
	}
	#menus::after{
		order : 20;
	}
	#menus a{
		display : block;
		display : grid;
		align-items : center;
		justify-content : center;
		padding-block : calc( ( ( 64 var( --remBase ) ) - 1lh ) / 2 );
		padding-inline : calc( 24 var( --remBase ) );
		font-size : 1.8rem;
		line-height : 1.5;
		text-align : center;
	}
}
@media screen and ( width <= 750px ){
	#navGlobal{
		padding-bottom : calc( 12 var( --remBase ) );
	}
	#navGlobal li + li{
		margin-top : calc( 12 var( --remBase ) );
	}
	#navGlobal a{
		display : grid;
		align-items : center;
		justify-content : start;
		height : calc( 40 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 320 );
		font-size : 2rem;
	}
}
@media screen and ( width <= 750px ){
	#navSub{
		padding-top : calc( 12 var( --remBase ) );
		border-top : solid 1px white;
	}
	#navSub li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#navSub a{
		display : grid;
		grid-template-columns : calc( 20 * 100% / 272 ) auto;
		column-gap : calc( 6 * 100% / 272 );
		align-items : center;
		justify-content : start;
		height : calc( 50 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 320 );
		font-size : 1.8rem;
		line-height : 1.5;
	}
	#navSub a::before{
		display : block;
		height : calc( 20 var( --remBase ) );
		content : "";
		background : url( "../images/ui/arrow/circle01.svg" ) left center / contain no-repeat;
	}
}
@media screen and ( width <= 750px ){
	#menuBtnClose{
		display : block;
		width : fit-content;
		margin-inline : auto;
		margin-top : calc( 62 var( --remBase ) );
	}
	#menuBtnClose img{
		height : calc( 51.19 var( --remBase ) );
	}
}

/* --------------------------------------------
HOME MAIN VISUAL
--------------------------------------------- */
#mv{
	position : relative;
	z-index : 1;
	overflow-x : clip;
	background-position : center top;
}
#mv hgroup{
	font-weight : 700;
	color : var( --color01 );
}
#mv hgroup p{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : start;
	line-height : 1.2;
}
#mv hgroup p span{
	line-height : 1.2;
	color : #999;
}
#mv hgroup h2{
	line-height : 1.2;
}
#mv ul{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
}
#mv ul a{
	display : block;
}
#mv > picture{
	position : absolute;
	z-index : 1;
}
#mv .pics picture{
	position : absolute;
}
@media screen and ( width <= 750px ){
	#mv{
		padding-top : calc( 131 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
		background-image : image-set( url( "../images/home/mv/bg_sp.avif" ) type( "image/avif" ) , url( "../images/home/mv/bg_sp.avif" ) type( "image/webp" ) );
		background-size : 100% auto;
	}
	#mv .pics picture:nth-of-type( 1 ){
		top : calc( -6 var( --remBase ) );
		left : calc( -15.9 var( --viewportBase ) );
	}
	#mv .pics picture:nth-of-type( 1 ) img{
		height : calc( 119.87 var( --remBase ) );
	}
	#mv .pics picture:nth-of-type( 2 ){
		top : calc( 26 var( --remBase ) );
		left : calc( 83 var( --viewportBase ) );
	}
	#mv .pics picture:nth-of-type( 2 ) img{
		height : calc( 136.97 var( --remBase ) );
	}
	#mv .pics picture:nth-of-type( 3 ){
		top : calc( -56.17 var( --remBase ) );
		left : calc( 184 var( --viewportBase ) );
	}
	#mv .pics picture:nth-of-type( 3 ) img{
		height : calc( 264.8 var( --remBase ) );
	}
	#mv hgroup{
		position : relative;
		z-index : 1;
	}
	#mv hgroup p{
		font-size : 2rem;
		text-shadow : calc( 2 var( --remBase ) ) calc( 2 var( --remBase ) ) 0 white , calc( -2 var( --remBase ) ) calc( 2 var( --remBase ) ) 0 white , calc( 2 var( --remBase ) ) calc( -2 var( --remBase ) ) 0 white , calc( -2 var( --remBase ) ) calc( -2 var( --remBase ) ) 0 white;
	}
	#mv hgroup h2{
		font-size : 3rem;
		text-shadow : calc( 2 var( --remBase ) ) calc( 2 var( --remBase ) ) 0 white , calc( -2 var( --remBase ) ) calc( 2 var( --remBase ) ) 0 white , calc( 2 var( --remBase ) ) calc( -2 var( --remBase ) ) 0 white , calc( -2 var( --remBase ) ) calc( -2 var( --remBase ) ) 0 white;
	}
	#mv > p{
		width : calc( 257 var( --percentBase ) );
		margin-top : calc( 10 var( --remBase ) );
	}
	#mv ul{
		column-gap : calc( 11 var( --percentBase ) );
		margin-top : calc( 22 var( --remBase ) );
	}
	#mv ul img{
		height : calc( 52.87 var( --remBase ) );
	}
	#mv > picture{
		top : calc( 183 var( --remBase ) );
		left : calc( 197 var( --viewportBase ) );
	}
	#mv > picture img{
		height : calc( 186.09 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#mv{
		padding-top : calc( 150 var( --remBase ) );
		padding-bottom : calc( 125 var( --remBase ) );
		background-image : image-set( url( "../images/home/mv/bg_pc.avif" ) type( "image/avif" ) , url( "../images/home/mv/bg_pc.avif" ) type( "image/webp" ) );
		background-repeat : repeat-x;
		background-size : 100% auto;
	}
	#mv > :where( hgroup , p , ul ){
		padding-left : calc( 120 var( --percentBase ) );
	}
	#mv hgroup p{
		font-size : 3.4rem;
	}
	#mv hgroup p span{
		font-size : 2.4rem;
	}
	#mv hgroup h2{
		font-size : 5rem;
	}
	#mv > p{
		width : calc( 676 var( --percentBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#mv ul{
		column-gap : calc( 34 * 100% / 1280 );
		justify-content : start;
		margin-top : calc( 33 var( --remBase ) );
	}
	#mv ul img{
		height : calc( 60 var( --remBase ) );
	}
	#mv > picture{
		top : calc( 56 var( --remBase ) );
	}
	#mv > picture img{
		height : calc( 547 var( --remBase ) );
	}
	#mv .pics picture:nth-of-type( 1 ){
		top : calc( -8 var( --remBase ) );
	}
	#mv .pics picture:nth-of-type( 1 ) img{
		height : calc( 256.06 var( --remBase ) );
	}
	#mv .pics picture:nth-of-type( 2 ){
		top : calc( 408 var( --remBase ) );
	}
	#mv .pics picture:nth-of-type( 2 ) img{
		height : calc( 345 var( --remBase ) );
	}
	#mv .pics picture:nth-of-type( 3 ){
		top : calc( -67 var( --remBase ) );
	}
	#mv .pics picture:nth-of-type( 3 ) img{
		height : calc( 548.55 var( --remBase ) );
	}
	#mv .pics picture:nth-of-type( 4 ){
		top : calc( -137 var( --remBase ) );
	}
	#mv .pics picture:nth-of-type( 4 ) img{
		height : calc( 513.52 var( --remBase ) );
	}
	#mv .pics picture:nth-of-type( 5 ){
		top : calc( 222 var( --remBase ) );
	}
	#mv .pics picture:nth-of-type( 5 ) img{
		height : calc( 304.06 var( --remBase ) );
	}
	#mv .pics picture:nth-of-type( 6 ){
		top : calc( 288 var( --remBase ) );
	}
	#mv .pics picture:nth-of-type( 6 ) img{
		height : calc( 481.79 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#mv > picture{
		left : calc( 506 var( --viewportBase ) );
	}
	#mv .pics picture:nth-of-type( 1 ){
		left : calc( -308 var( --viewportBase ) );
	}
	#mv .pics picture:nth-of-type( 2 ){
		left : calc( 1008 var( --viewportBase ) );
	}
	#mv .pics picture:nth-of-type( 3 ){
		left : calc( 931 var( --viewportBase ) );
	}
	#mv .pics picture:nth-of-type( 4 ){
		left : calc( 1328 var( --viewportBase ) );
	}
	#mv .pics picture:nth-of-type( 5 ){
		left : calc( -252 var( --viewportBase ) );
	}
	#mv .pics picture:nth-of-type( 6 ){
		left : calc( 1305 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#mv > picture{
		left : calc( 50% - 184px );
	}
	#mv .pics picture:nth-of-type( 1 ){
		left : calc( 50% - 1008px );
	}
	#mv .pics picture:nth-of-type( 2 ){
		left : calc( 50% + 308px );
	}
	#mv .pics picture:nth-of-type( 3 ){
		left : calc( 50% + 231px );
	}
	#mv .pics picture:nth-of-type( 4 ){
		left : calc( 50% + 628px );
	}
	#mv .pics picture:nth-of-type( 5 ){
		left : calc( 50% - 952px );
	}
	#mv .pics picture:nth-of-type( 6 ){
		left : calc( 50% + 605px );
	}
}

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