@charset "UTF-8";

/* --------------------------------------------
SYNMBOL TEXTS
--------------------------------------------- */
[data-before]::before{
	white-space : pre;
	content : attr( data-before );
}
[data-after]::after{
	white-space : pre;
	content : attr( data-after );
}
[data-before-sp]::before{
	@media screen and ( width <= 750px ){
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]{
	&::before , &::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 , &::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-pc]{
		&::before , &::after{
			white-space : pre;
			content : attr( data-both );
		}
	}
}
[data-outline]{
	position : relative;
	z-index : 0;
	display : inline-block;
	&::before{
		position : absolute;
		inset : 0;
		z-index : -1;
		white-space : pre;
		content : attr( data-outline );
	}
}

/* --------------------------------------------
BR TO SPCE
--------------------------------------------- */
.sp-space{
	@media screen and ( width <= 750px ){
		&::after{
			content : " ";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
}
.pc-space{
	@media screen and ( width <= 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			content : " ";
		}
	}
}
.sp-spaceEm{
	@media screen and ( width <= 750px ){
		&::after{
			content : "　";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
}
.pc-spaceEm{
	@media screen and ( width <= 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			content : "　";
		}
	}
}

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

/* --------------------------------------------
TRANSITION
--------------------------------------------- */
:root{
	--transitionBaseDuration : .3s;
	--transitionBaseFunction : linear;
	--transitionBase : var( --transitionBaseDuration ) var( --transitionBaseFunction );
}

/* --------------------------------------------
DETAILS
--------------------------------------------- */
@supports (interpolate-size: allow-keywords) and (height: calc-size(auto, size)){
	details::details-content{
		display : block;
		height : 0;
		overflow : clip;
		interpolate-size : allow-keywords;
	}
	details:not( [open] )::details-content{
		block-size : 0;
		height : auto;
	}
}
@supports not ((interpolate-size: allow-keywords) and (height: calc-size(auto, size))){
	details::details-content{
		content-visibility : unset;
		display : block grid;
		grid-template-rows : 0fr;
	}
	.detailsContent{
		overflow : hidden;
	}
	.detailsContent > div{
		overflow : hidden;
	}
	details[open]::details-content{
		grid-template-rows : 1fr;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.detailsContent > div{
		transition : margin-block var( --transitionBase ) , padding-block var( --transitionBase );
	}
	@supports (interpolate-size: allow-keywords) and (height: calc-size(auto, size)){
		details::details-content{
			transition : block-size var( --transitionBase ) , content-visibility var( --transitionBase ) allow-discrete;
		}
	}
	@supports not ((interpolate-size: allow-keywords) and (height: calc-size(auto, size))){
		details::details-content{
			transition : grid-template-rows var( --transitionBase );
		}
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
.link01{
	position : relative;
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : center;
	font-weight : 700;
	color : white;
	background-color : var( --pink );
	border-radius : 100vmax;
	outline : solid 1px var( --pink );
	outline-offset : -1px;
	box-shadow : 0 calc( 3 * var( --remBase ) ) 0 #d3675d;
	&::after{
		display : block;
		width : auto;
		aspect-ratio : 36 / 6;
		font-size : 0;
		content : "";
		background : url( "../images/ui/arrow/right02.svg" ) left top / contain no-repeat;
		filter : var( --filterWhite );
	}
}
@media ( hover : hover ){
	.link01:hover{
		color : var( --pink );
		background-color : white;
		translate : 0 calc( 3 * var( --remBase ) );
		box-shadow : none;
		&::after{
			filter : var( --filterPink );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link01{
		transition : box-shadow var( --transitionBase ) , color var( --transitionBase ) , background-color var( --transitionBase ) , translate var( --transitionBase );
		&::after{
			transition : filter var( --transitionBase );
		}
	}
}
.link02{
	position : relative;
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : space-between;
	font-weight : 700;
	line-height : 1.6;
	color : white;
	background-color : var( --pink03 );
	border-radius : 100vmax;
	outline : solid 1px var( --pink03 );
	outline-offset : -1px;
	&::after{
		display : block;
		width : auto;
		aspect-ratio : 8 / 13;
		font-size : 0;
		content : "";
		background : url( "../images/ui/arrow/right03.svg" ) left top / contain no-repeat;
		filter : var( --filterWhite );
	}
}
@media ( hover : hover ){
	.link02:hover{
		color : var( --pink );
		background-color : white;
		&::after{
			filter : var( --filterPink03 );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link02{
		transition : color var( --transitionBase ) , background-color var( --transitionBase );
		&::after{
			transition : filter var( --transitionBase );
		}
	}
}
.link03{
	position : relative;
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : space-between;
	font-weight : 700;
	line-height : 1.6;
	color : white;
	background-color : var( --pink );
	border-radius : 100vmax;
	outline : solid 1px var( --pink );
	outline-offset : -1px;
	&::after{
		display : block;
		width : auto;
		aspect-ratio : 8 / 13;
		font-size : 0;
		content : "";
		background : url( "../images/ui/arrow/right03.svg" ) left top / contain no-repeat;
		filter : var( --filterWhite );
	}
}
@media ( hover : hover ){
	.link03:hover{
		color : var( --pink );
		background-color : white;
		&::after{
			filter : var( --filterPink );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link03{
		transition : color var( --transitionBase ) , background-color var( --transitionBase );
		&::after{
			transition : filter var( --transitionBase );
		}
	}
}