@charset "UTF-8";

/* --------------------------------------------
ANIMATION
--------------------------------------------- */
.animation-up-down{
	clip-path : inset( 0 0 100% 0 );
}
.animation-up-down.is-animation{
	clip-path : inset( 0 );
}
@media ( prefers-reduced-motion : no-preference ){
	.animation-up-down{
		transition : clip-path 1s ease;
	}
}

/* --------------------------------------------
WP EDITORE RESET
--------------------------------------------- */
a:where( :not( .wp-element-button ) ){
	-webkit-text-decoration : none;
	text-decoration : none;
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	font-family : "Noto Serif JP";
	font-weight : 500;
	line-height : 1.6;
	letter-spacing : .04em;
}
.title01::before{
	display : block;
	width : fit-content;
	font-family : Poppins , serif;
	font-weight : 500;
	line-height : 1;
	background : var( --gradation01 );
	-webkit-background-clip : text;
	-webkit-text-fill-color : transparent;
}
.title01.center{
	text-align : center;
	text-indent : .04em;
}
.title01.center::before{
	margin-inline : auto;
}
@media screen and ( width <= 750px ){
	.title01{
		font-size : 2rem;
	}
	.title01::before{
		margin-bottom : calc( 12 var( --remBase ) );
		font-size : 1.6rem;
	}
	.title01.center-sp{
		text-align : center;
		text-indent : .04em;
	}
	.title01.center-sp::before{
		margin-inline : auto;
	}
}
@media screen and ( width > 750px ) , print{
	.title01{
		font-size : 4rem;
	}
	.title01::before{
		margin-bottom : calc( 16 var( --remBase ) );
		font-size : 2.4rem;
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
:is( .link01 .wp-block-button__link , a.link01 ){
	position : relative;
	z-index : 1;
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : center;
	width : fit-content;
	font-weight : 500;
	color : var( --blue );
	background-color : transparent;
	border : 0 ! important;
	outline : solid 1px var( --blue );
	outline-offset : -1px;
}
:is( .link01 .wp-block-button__link , a.link01 )::before{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	font-size : 0;
	pointer-events : none;
	content : "";
	background-image : var( --gradation01 );
	opacity : 0;
}
:is( .link01 .wp-block-button__link , a.link01 )::after{
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	filter : var( --filterBlue );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
:is( .link01 .wp-block-button__link , a.link01 ):not( [target="_blank"] )::after{
	aspect-ratio : 6/11;
	background-image : url( "/wp-content/themes/kuphu/assets/images/ui/arrow/right01.svg" );
}
:is( .link01 .wp-block-button__link , a.link01 )[target="_blank"]::after{
	aspect-ratio : 1;
	background-image : url( "/wp-content/themes/kuphu/assets/images/ui/icon/blank.svg" );
}
@media screen and ( width <= 750px ){
	:is( .link01 .wp-block-button__link , a.link01 ){
		column-gap : calc( 14 var( --remBase ) );
		height : calc( 42 var( --remBase ) );
		padding-left : calc( 32 var( --remBase ) );
		padding-right : calc( 28 var( --remBase ) );
		font-size : 1.5rem;
	}
	:is( .link01 .wp-block-button__link , a.link01 ):not( [target="_blank"] ){
		column-gap : calc( 14 var( --remBase ) );
	}
	:is( .link01 .wp-block-button__link , a.link01 ):not( [target="_blank"] )::after{
		height : calc( 11 var( --remBase ) );
	}
	:is( .link01 .wp-block-button__link , a.link01 )[target="_blank"]{
		column-gap : calc( 12 var( --remBase ) );
	}
	:is( .link01 .wp-block-button__link , a.link01 )[target="_blank"]::after{
		height : calc( 10.5 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	:is( .link01 .wp-block-button__link , a.link01 ){
		height : calc( 60 var( --remBase ) );
		padding-left : calc( 64 var( --remBase ) );
		padding-right : calc( 52 var( --remBase ) );
		font-size : 1.6rem;
	}
	:is( .link01 .wp-block-button__link , a.link01 ):not( [target="_blank"] ){
		column-gap : calc( 16 var( --remBase ) );
	}
	:is( .link01 .wp-block-button__link , a.link01 ):not( [target="_blank"] )::after{
		height : calc( 11 var( --remBase ) );
	}
	:is( .link01 .wp-block-button__link , a.link01 )[target="_blank"]{
		column-gap : calc( 12 var( --remBase ) );
	}
	:is( .link01 .wp-block-button__link , a.link01 )[target="_blank"]::after{
		height : calc( 11.67 var( --remBase ) );
	}
}
div.link01.center{
	display : block;
}
div.link01.center .wp-block-button__link{
	margin-inline : auto;
}
@media screen and ( width <= 750px ){
	div.link01.sp-center{
		display : block;
	}
	div.link01.sp-center .wp-block-button__link{
		margin-inline : auto;
	}
}
a.link01.center{
	margin-inline : auto;
}
@media screen and ( width <= 750px ){
	a.link01.sp-center{
		margin-inline : auto;
	}
}
@media ( hover : hover ){
	:is( .link01 .wp-block-button__link , a.link01 ):hover{
		color : white ! important;
		outline-color : transparent;
	}
	:is( .link01 .wp-block-button__link , a.link01 ):hover::after{
		filter : var( --filterWhite );
	}
	:is( .link01 .wp-block-button__link , a.link01 ):hover::before{
		opacity : 1;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	:is( .link01 .wp-block-button__link , a.link01 ){
		transition : outline var( --transitionBase ) , color var( --transitionBase );
	}
	:is( .link01 .wp-block-button__link , a.link01 )::after{
		transition : filter var( --transitionBase );
	}
	:is( .link01 .wp-block-button__link , a.link01 )::before{
		transition : opacity var( --transitionBase );
	}
}
.back01{
	position : relative;
	z-index : 1;
	display : grid;
	grid-template-columns : auto auto;
	column-gap : calc( 16 var( --remBase ) );
	align-items : center;
	justify-content : center;
	width : fit-content;
	font-weight : 500;
	color : var( --blue );
	outline : solid 1px var( --blue );
}
.back01::before{
	display : block;
	grid-column : -1;
	width : 100%;
	aspect-ratio : 6/11;
	font-size : 0;
	content : "";
	background-image : url( "/wp-content/themes/kuphu/assets/images/ui/arrow/left01.svg" );
	filter : var( --filterBlue );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
.back01::after{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	font-size : 0;
	pointer-events : none;
	content : "";
	background-image : var( --gradation01 );
	opacity : 0;
}
.back01.center{
	margin-inline : auto;
}
@media screen and ( width <= 750px ){
	.back01{
		height : calc( 42 var( --remBase ) );
		padding-inline : calc( 34 var( --remBase ) );
		font-size : 1.5rem;
	}
	.back01::before{
		height : calc( 11 var( --remBase ) );
	}
	.back01.sp-center{
		margin-inline : auto;
	}
}
@media screen and ( width > 750px ) , print{
	.back01{
		height : calc( 60 var( --remBase ) );
		padding-left : calc( 54 var( --remBase ) );
		padding-right : calc( 64 var( --remBase ) );
		font-size : 1.6rem;
	}
	.back01::before{
		height : calc( 11 var( --remBase ) );
	}
}
@media ( hover : hover ){
	.back01:hover{
		color : white;
		outline-color : transparent;
	}
	.back01:hover::before{
		filter : var( --filterWhite );
	}
	.back01:hover::after{
		opacity : 1;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.back01{
		transition : outline var( --transitionBase ) , color var( --transitionBase );
	}
	.back01::before{
		transition : filter var( --transitionBase );
	}
	.back01::after{
		transition : opacity var( --transitionBase );
	}
}