@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--headerHeight : calc( 64 var( --remBase ) );
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( width > 750px ) , print{
	:root{
		--headerHeight : calc( 76 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( width >= 1440px ) , print{
	:root{
		font-size : 10px;
	}
}
html{
	scroll-padding-block-start : var( --headerHeight );
}
body{
	background-color : white;
}
@media screen and ( width <= 750px ){
	body{
		font-size : 2rem;
	}
}
@media screen and ( width > 750px ) , print{
	body{
		font-size : 1.6rem;
	}
}
#main{
	position : relative;
	padding-top : var( --headerHeight );
	overflow : clip;
}
:is( #triangle01 , #triangle02 ){
	position : absolute;
	z-index : -1;
}
:is( #triangle01 , #triangle02 ).is-animation{
	clip-path : inset( 0 );
}
#triangle01{
	top : 0;
	display : block;
	font-size : 0;
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
@media screen and ( width <= 750px ){
	#triangle01{
		left : 0;
		width : calc( 268 var( --viewportBase ) );
		height : calc( 496 var( --remBase ) );
		background-image : url( "/wp-content/themes/kuphu/assets/images/ui/parts/top01_sp.webp" );
	}
}
@media screen and ( width > 750px ) , print{
	#triangle01{
		height : calc( 920 var( --remBase ) );
		background-image : url( "/wp-content/themes/kuphu/assets/images/ui/parts/top01_pc.webp" );
	}
}
@media print , screen and ( 750px < width < 1440px ){
	#triangle01{
		left : calc( -150 * 100% / 2000 );
		width : calc( 644 * 100% / 2000 );
	}
}
@media screen and ( width >= 1440px ){
	#triangle01{
		left : 0;
		width : 644px;
	}
}
#flare{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	font-size : 0;
	pointer-events : none;
	mix-blend-mode : screen;
}
@media screen and ( width <= 750px ){
	#flare img{
		height : calc( 431 var( --remBase ) );
	}
}
@media print , screen and ( 750px < width < 1440px ){
	#flare img{
		height : calc( 733 * 100vw / 2000 );
	}
}
@media screen and ( width >= 1440px ){
	#flare img{
		height : 733px;
	}
}
@media screen and ( width > 750px ) , print{
	body.home #flare{
		z-index : 0;
	}
}
#triangle02{
	clip-path : inset( 0 0 100% 0 );
	background-color : color-mix( in srgb , #e3ecf2 30% , transparent );
}
@media screen and ( width <= 750px ){
	#triangle02.is-animation{
		rotate : 28.22deg;
	}
}
@media screen and ( width > 750px ) , print{
	#triangle02.is-animation{
		rotate : 30deg;
	}
}
@media print , screen and ( 750px < width < 1440px ){
	#triangle02{
		left : calc( 356.7 * 100% / 2000 );
		width : calc( 2208.12 * 100% / 2000 );
		height : calc( 5330.46 * 100vw / 2000 );
	}
}
@media screen and ( width >= 1440px ){
	#triangle02{
		left : calc( 50% - 363.3px );
		width : 2208.12px;
		height : 5330.46px;
	}
}
@media screen and ( width <= 750px ){
	:where( body.home , body.company ) #triangle02{
		width : calc( 803.58 var( --viewportBase ) );
	}
}
@media print , screen and ( 750px < width < 1440px ){
	:where( body.home , body.company ) #triangle02{
		top : calc( 1856.96 * 100vw / 2000 );
	}
}
@media screen and ( width >= 1440px ){
	:where( body.home , body.company ) #triangle02{
		top : 1856.96px;
	}
}
@media screen and ( width <= 750px ){
	body.home #triangle02{
		top : calc( 1022.38 var( --remBase ) );
		left : calc( -225.99 var( --percentBase ) );
		height : calc( 2854.34 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	body.company #triangle02{
		top : calc( 3698.63 var( --remBase ) );
		left : calc( 34.31 var( --percentBase ) );
		height : calc( 1345.45 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	:where( body.confirm , body.thanks , body.product , body.column  ) #triangle02{
		bottom : calc( -587.55 var( --remBase ) );
		left : calc( 55.5 var( --viewportBase ) );
		width : calc( 632.11 var( --viewportBase ) );
		height : calc( 1222.77 var( --remBase ) );
	}
}
@media print , screen and ( 750px < width < 1440px ){
	:where( body.confirm , body.thanks , body.product , body.column  ) #triangle02{
		top : calc( 536.96 * 100vw / 2000 );
	}
}
@media screen and ( width >= 1440px ){
	:where( body.confirm , body.thanks , body.product , body.column  ) #triangle02{
		top : 536.96px;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#triangle02{
		transition : clip-path 1s ease;
	}
}

/* --------------------------------------------
CONTAINER
--------------------------------------------- */
@media screen and ( width < 1440px ){
	.container{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( width >= 1440px ) , 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 < 1440px ){
	.container-pc{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( width >= 1440px ) , print{
	.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 screen and ( width >= 1440px ) , 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 < 1440px ){
	.wrap-pc{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( width >= 1440px ) , print{
	.wrap-pc{
		padding-inline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
	}
}
@media screen and ( width <= 750px ){
	.wrap02{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	.wrap02{
		padding-inline : calc( 140 var( --percentBase ) );
	}
}
@media screen and ( width >= 1440px ) , print{
	.wrap02{
		padding-inline : calc( ( 100% - 1160px ) / 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 >= 1440px ) , 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 : " ";
	}
}

/* --------------------------------------------
  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 : 10;
	display : grid;
	width : 100%;
	height : var( --headerHeight );
	background-color : transparent;
}
#header.is-dark{
	background-color : white;
}
@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( 35.5 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#header .logo{
		grid-row : 1;
		grid-column : 2;
		align-self : center;
	}
	#header .logo img{
		height : calc( 56 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#header{
		grid-template-columns : calc( 32 var( --viewportBase ) ) auto 1fr auto;
	}
}
@media screen and ( width >= 1440px ) , print{
	#header{
		grid-template-columns : 32px auto 1fr auto;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#header{
		transition : background var( --transitionBase );
	}
}

/* --------------------------------------------
MENU  BUTTON
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#menuBtn{
		position : fixed;
		top : 0;
		right : 0;
		z-index : 12;
		display : block;
		display : grid;
		grid-template-rows : calc( 16 var( --remBase ) ) calc( 20 var( --remBase ) ) calc( 6 var( --remBase ) ) 1fr;
		grid-template-columns : 1fr calc( 30 * 100% / 64 ) 1fr;
		width : calc( 64 var( --viewportBase ) );
		height : calc( 64 var( --remBase ) );
		background : var( --gradation01 );
	}
	#menuBtn[aria-expanded="true"]{
		overflow : hidden;
	}
	#menuBtn{
		z-index : 12;
		overflow : hidden;
	}
	#menuBtn > span:nth-of-type( 1 ){
		position : relative;
		display : block;
		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 > 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 : white;
	}
	#menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 2 ) , #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 3 ){
		top : calc( 9 var( --remBase ) );
	}
	#menuBtn > span:nth-of-type( 2 ){
		grid-row : 4;
		grid-column : 1/-1;
		font-size : .8rem;
		line-height : 1.5;
		color : white;
		text-align : center;
	}
}
@media screen and ( width <= 750px ){
	@media ( prefers-reduced-motion : no-preference ){
		#menuBtn > span:nth-of-type( 1 ) span{
			transition : all var( --transitionBase );
		}
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
.wp-block-template-part:has( > #nav ){
	display : contents;
}
@media screen and ( width <= 750px ){
	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( 320 var( --viewportBase ) );
		height : 100dvh;
		background-color : color-mix( in sRGB , white 90% , transparent );
	}
	#nav .scroll{
		padding-inline : calc( 42.5 * 100% / 320 );
		padding-top : calc( 114 var( --remBase ) );
		padding-bottom : calc( 136 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#nav{
		grid-row : 1;
		grid-column : 4;
	}
	#nav .scroll{
		height : 100%;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		@media ( prefers-reduced-motion : no-preference ){
			#nav{
				transition : translate var( --transitionBase );
			}
		}
	}
}
#navGlobal > li:not( .contact,.tel ) a{
	font-size : 1.5rem;
	font-weight : 500;
	line-height : calc( 22 / 15 );
}
#navGlobal .tel a{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	font-family : Poppins , serif;
}
#navGlobal .tel a::before{
	display : block;
	width : 100%;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-image : url( "/wp-content/themes/kuphu/assets/images/ui/icon/tel01.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#navGlobal .contact{
	position : relative;
	z-index : 0;
}
#navGlobal .contact::before , #navGlobal .contact::after{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	width : 100%;
	height : 100%;
	font-size : 0;
	content : "";
}
#navGlobal .contact::before{
	background-image : var( --gradation01 );
	opacity : 1;
}
#navGlobal .contact::after{
	background-image : var( --gradation02 );
	opacity : 0;
}
#navGlobal .contact a{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : center;
	width : 100%;
	height : 100%;
	font-size : 1.5rem;
	font-weight : 500;
	color : white;
}
#navGlobal .contact a::after{
	display : block;
	width : 100%;
	height : calc( 11 var( --remBase ) );
	aspect-ratio : 6/11;
	font-size : 0;
	content : "";
	background-image : url( "/wp-content/themes/kuphu/assets/images/ui/arrow/right01.svg" );
	filter : var( --filterWhite );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
@media screen and ( width <= 750px ){
	#navGlobal > li:not( .contact,.tel ){
		border-bottom : solid 1px #888;
	}
	#navGlobal > li:not( .contact,.tel ) a{
		display : grid;
		align-items : center;
		justify-content : start;
		height : calc( 62 var( --remBase ) );
	}
	#navGlobal .contact{
		height : calc( 44 var( --remBase ) );
		margin-top : calc( 32 var( --remBase ) );
	}
	#navGlobal .contact a{
		column-gap : calc( 16 * 100% / 235 );
	}
	#navGlobal .tel{
		margin-top : calc( 16 var( --remBase ) );
	}
	#navGlobal .tel a{
		column-gap : calc( 10 * 100% / 233 );
		justify-content : center;
		width : 100%;
		height : calc( 47 var( --remBase ) );
		font-size : 1.5rem;
		border : solid 1px var( --blue );
	}
	#navGlobal .tel a::before{
		height : calc( 14 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#navGlobal{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : end;
		height : 100%;
	}
	#navGlobal > li:not( .contact,.tel ){
		order : -2;
	}
	#navGlobal > li:not( .contact,.tel ) a{
		padding-inline : calc( 16 var( --remBase ) );
	}
	#navGlobal .tel{
		order : -1;
	}
	#navGlobal .tel a{
		column-gap : calc( 3 var( --remBase ) );
		justify-content : start;
		margin-left : calc( 12 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.5;
	}
	#navGlobal .tel a::before{
		height : calc( 18 var( --remBase ) );
		filter : var( --filterBase );
	}
	#navGlobal .contact{
		order : 0;
		width : calc( 202 var( --remBase ) );
		height : 100%;
		margin-left : calc( 24 var( --remBase ) );
	}
	#navGlobal .contact a{
		column-gap : calc( 12 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#navGlobal > li:not( .contact,.tel ) a:hover{
		color : var( --perple );
	}
	#navGlobal .tel a:hover{
		color : var( --perple );
	}
	#navGlobal .tel a:hover::before{
		filter : var( --filterPerple );
	}
	#navGlobal .contact:hover::after{
		opacity : 1;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#navGlobal > li:not( .contact,.tel ) a{
		transition : color var( --transitionBase );
	}
	#navGlobal .tel a{
		transition : color var( --transitionBase );
	}
	#navGlobal .tel a::before{
		transition : filter var( --transitionBase );
	}
	#navGlobal .contact::after{
		transition : opacity var( --transitionBase );
	}
}
@media screen and ( width <= 750px ){
	#navAbout{
		margin-top : calc( 48 var( --remBase ) );
	}
	#navAbout h5{
		display : block;
		width : fit-content;
	}
	#navAbout h5 img{
		height : calc( 65.5 var( --remBase ) );
	}
	#navAbout p{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.1rem;
		line-height : 1.6;
	}
	#navAbout dl{
		display : grid;
		grid-auto-flow : column;
		align-items : start;
		justify-content : start;
	}
	#navAbout dt , #navAbout dd{
		font-size : 1.1rem;
		line-height : 1.6;
	}
	#navAbout dd + dt{
		margin-left : 1em;
	}
}

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
.id-homeMv{
	overflow-x : clip;
}
.id-homeMv :where( h2 , p ){
	position : relative;
	z-index : 1;
}
.id-homeMv::before{
	position : absolute;
	top : var( --headerHeight );
	z-index : -1;
	height : 100%;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
.id-homeMv h2 > span{
	display : grid;
	align-items : center;
	width : fit-content;
	background-color : white;
}
.id-homeMv h2 > span span{
	font-family : "Noto Serif JP";
	font-weight : 500;
	line-height : 1.5;
	color : color-mix( in srgb , #005191 40% , transparent );
	white-space : pre;
	background-image : url( "/wp-content/themes/kuphu/assets/images/home/mv/bg_pc.webp" );
	background-repeat : no-repeat;
	background-position : 0 0;
	-webkit-background-clip : text;
	background-size : 100% 100%;
}
.id-homeMv p{
	display : grid;
	align-items : center;
	width : fit-content;
	line-height : 1.6;
	letter-spacing : .04em;
	background-color : white;
}
@media screen and ( width <= 750px ){
	.id-homeMv{
		height : calc( 412 var( --remBase ) );
		padding-inline : calc( 20 var( --viewportBase ) );
		padding-top : calc( 66 var( --remBase ) );
	}
	.id-homeMv::before{
		right : 0;
		width : calc( 327 var( --viewportBase ) );
		background-image : url( "/wp-content/themes/kuphu/assets/images/home/mv/bg_sp.webp" );
	}
	.id-homeMv h2 > span{
		height : calc( 55 var( --remBase ) );
		padding-inline : calc( 12 var( --remBase ) );
	}
	.id-homeMv h2 > span + span{
		margin-top : calc( 8 var( --remBase ) );
	}
	.id-homeMv h2 > span span{
		font-size : 3.4rem;
	}
	.id-homeMv h2 + p{
		margin-top : calc( 16 var( --remBase ) );
	}
	.id-homeMv p{
		height : calc( 28 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
	.id-homeMv p + p{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.id-homeMv::before{
		background-image : url( "/wp-content/themes/kuphu/assets/images/home/mv/bg_pc.webp" );
	}
	.id-homeMv h2 > span span{
		line-height : 1.5;
		-webkit-background-clip : text;
	}
}
@media print , screen and ( 750px < width < 1440px ){
	.id-homeMv{
		height : calc( 610 * 100vw / 1440 );
		padding-inline : calc( 64 * 100% / 1440 );
		padding-top : calc( 137 * 100vw / 1440 );
	}
	.id-homeMv::before{
		left : calc( 263 * 100% / 1440 );
		width : calc( 1113 * 100% / 1440 );
	}
	.id-homeMv h2 > span{
		height : calc( 106 * 100vw / 1440 );
		padding-inline : calc( 24 * 100vw/ 1440 );
	}
	.id-homeMv h2 > span + span{
		margin-top : calc( 8 * 100vw / 1440 );
	}
	.id-homeMv h2 > span span{
		font-size : calc( 64 * 100vw / 1440 );
	}
	.id-homeMv h2 + p{
		margin-top : calc( 28 * 100vw / 1440 );
	}
	.id-homeMv p{
		height : calc( 43 * 100vw / 1440 );
		padding-inline : calc( 16 * 100vw / 1440 );
		font-size : calc( 20 * 100vw / 1440 );
	}
	.id-homeMv p + p{
		margin-top : calc( 8 * 100vw / 1440 );
	}
}
@media screen and ( width >= 1440px ){
	.id-homeMv{
		height : 610px;
		padding-inline : calc( ( 100% - 1312px ) / 2 );
		padding-top : 137px;
	}
	.id-homeMv::before{
		left : calc( 50% - 457px );
		width : 1113px;
	}
	.id-homeMv h2 > span{
		height : 106px;
		padding-inline : 24px;
	}
	.id-homeMv h2 > span + span{
		margin-top : 8px;
	}
	.id-homeMv h2 > span span{
		font-size : 64px;
	}
	.id-homeMv h2 + p{
		margin-top : 28px;
	}
	.id-homeMv p{
		height : 43px;
		padding-inline : 16px;
		font-size : 20px;
	}
	.id-homeMv p + p{
		margin-top : 8px;
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.id-title{
	text-align : center;
}
.id-title::before{
	display : block;
	width : fit-content;
	margin-inline : auto;
	font-family : Poppins , serif;
	background : var( --gradation01 );
	-webkit-background-clip : text;
	-webkit-text-fill-color : transparent;
}
.id-title span{
	padding-inline : calc( 24 var( --remBase ) );
	font-family : "Noto Serif JP" , serif;
	font-weight : 500;
	line-height : 1.5;
	background : var( --gradation01 );
	-webkit-background-clip : text;
	-webkit-text-fill-color : transparent;
}
@media screen and ( width <= 750px ){
	.id-title{
		height : calc( 148 var( --remBase ) );
		padding-top : calc( 32 var( --remBase ) );
	}
	.id-title::before{
		margin-bottom : calc( 27 var( --remBase ) );
		font-size : 1.6rem;
	}
	.id-title span{
		font-size : 2.8rem;
	}
}
@media screen and ( width > 750px ) , print{
	.id-title{
		height : calc( 316 var( --remBase ) );
		padding-top : calc( 80 var( --remBase ) );
	}
	.id-title::before{
		margin-bottom : calc( 27 var( --remBase ) );
		font-size : 2.4rem;
	}
	.id-title span{
		font-size : 5.6rem;
	}
}