@charset "UTF-8";

/* --------------------------------------------
LINK
--------------------------------------------- */
.links-tel01{
	display : grid;
	grid-template-rows : 1fr auto auto 1fr;
	grid-template-columns : auto auto;
	justify-content : start;
	span{
		display : grid;
		grid-row : 1/-1;
		grid-column : 1;
		place-items : center;
		height : calc( 54 * var( --remBase ) );
		aspect-ratio : 1;
		font-size : calc( 16 * var( --remBase ) );
		font-weight : 500;
		line-height : 1.1;
		color : white;
		text-align : center;
		background-color : var( --base );
		border-radius : calc( 6 * var( --remBase ) );
	}
	a{
		grid-row : 2;
		grid-column : 2;
		align-self : end;
		font-family : Helvetica , Arial , sans-serif;
		font-size : calc( 36 * var( --remBase ) );
		font-weight : 700;
		letter-spacing : .03em;
		white-space : nowrap;
	}
	dl{
		display : grid;
		grid-row : 3;
		grid-column : 2;
		grid-auto-flow : column;
		align-items : baseline;
		align-self : start;
		justify-content : center;
		justify-self : center;
		font-size : calc( 12 * var( --remBase ) );
		font-weight : 500;
	}
	dt , dd{
		letter-spacing : .02em;
	}
}
@media ( hover : hover ){
	.links-tel01:has( a:hover ){
		opacity : .75;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.links-tel01{
		transition : opacity var( --transitionBase );
	}
}
.style-link01{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : center;
	height : calc( 64 * var( --remBase ) );
	margin-top : calc( 32 * var( --remBase ) );
	background-color : var( --orange );
	outline : solid calc( 2 * var( --remBase ) ) var( --orange );
	outline-offset : calc( -2 * var( --remBase ) );
	> span{
		&:nth-of-type( 1 ){
			font-size : calc( 18 * var( --remBase ) );
			font-weight : 700;
			color : white;
		}
		&:nth-of-type( 2 ){
			position : relative;
			width : auto;
			height : calc( 24 * var( --remBase ) );
			aspect-ratio : 1;
			overflow : hidden;
			background-color : white;
			border-radius : 50%;
			img{
				opacity : 0;
			}
			&::after{
				position : absolute;
				top : 0;
				left : 0;
				display : block;
				width : 100%;
				height : 100%;
				font-size : 0;
				content : "";
				background-image : url( "../images/ui/arrow/right02.svg" );
				filter : var( --filterOrange );
				background-repeat : no-repeat;
				background-position : center;
				background-size : auto calc( 8 * var( --remBase ) );
				translate : 0 0;
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ) and ( hover : hover ){
	.style-link01{
		> span:nth-of-type( 2 )::after{
			transition : translate .6s linear;
			will-change : translate;
		}
		&:hover > span:nth-of-type( 2 )::after{
			transition : none;
			animation : arrowMarquee .6s linear;
		}
	}
}

/* --------------------------------------------
DATAILS
--------------------------------------------- */
@supports (interpolate-size: allow-keywords) and (height: calc-size(auto, size)){
	details::details-content{
		display : block;
		overflow : clip;
	}
	details:not( [open] )::details-content{
		block-size : 0;
	}
}
@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 .3s linear , content-visibility .3s linear allow-discrete;
		}
	}
	@supports not ((interpolate-size: allow-keywords) and (height: calc-size(auto, size))){
		details::details-content{
			transition-duration : 300ms;
			transition-property : grid-template-rows;
		}
		details::details-content:not( [open] )::details-content{
			grid-template-rows : 0fr;
		}
		details::details-content[open]::details-content{
			grid-template-rows : 1fr;
		}
	}
}