@charset "UTF-8";

/* --------------------------------------------
DIALOG
--------------------------------------------- */
#dialog{
	position : fixed;
	top : 0;
	left : 0;
	display : grid;
	align-items : center;
	justify-content : center;
	width : 100vw;
	height : 100dvh;
	padding-block : calc( 24 var( --remBase ) );
	padding-inline : calc( 24 var( --remBase ) );
	overflow : auto;
	opacity : 0;
}
#dialog::backdrop{
	background-color : color-mix( in sRGB , black 90% , transparent );
	opacity : 0;
}
#dialog .dialogContent{
	width : fit-content;
	height : fit-content;
}
#dialog .close{
	position : fixed;
	top : calc( 24 var( --remBase ) );
	right : calc( 24 var( --remBase ) );
	display : block;
	width : fit-content;
}
#dialog .close img{
	height : calc( 72 var( --remBase ) );
}
#dialog .banner > picture img{
	width : auto;
	max-width : calc( 100vw - ( 48 var( --remBase ) ) );
	height : auto;
	max-height : calc( 100dvh - ( 48 var( --remBase ) ) );
	object-fit : contain;
}
#dialog[open]{
	opacity : 1;
}
#dialog[open]::backdrop{
	opacity : 1;
}
#dialog:not( [open] ){
	display : none;
	padding-left : calc( 24 var( --remBase ) + var( --scrollbarWidth ) );
	overflow : hidden;
}
#dialog:not( [open] ) .close{
	right : calc( ( 24 var( --remBase ) ) - var( --scrollbarWidth ) );
}
@starting-style{
	#dialog[open] , #dialog[open]::backdrop{
		opacity : 0;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#dialog{
		transition : display 1s allow-discrete , overlay 1s allow-discrete , opacity 1s;
	}
}

/* --------------------------------------------
CONTACTS - FOOTER
--------------------------------------------- */
#contacts{
	color : white;
}
#contacts > p{
	margin-top : calc( 24 var( --remBase ) );
	font-family : "Zen Old Mincho" , serif;
	line-height : 2;
}
#contacts h3{
	font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	font-weight : 400;
	line-height : 2;
}
#contacts .tel{
	display : block;
	width : fit-content;
	font-family : "Crimson Text" , serif;
	font-size : clamp( var( --min ) , 4rem , var( --max ) );
	color : white;
}
#contacts dl{
	display : grid;
	grid-auto-flow : row;
	align-items : start;
	justify-content : start;
	font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	line-height : 2;
}
#contacts li + li{
	margin-top : calc( 8 var( --remBase ) );
}
#contacts :where( .mail , .line ){
	display : grid;
	place-items : center;
	padding-block : calc( 12 var( --remBase ) );
	font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
	line-height : 2;
}
#contacts .mail{
	color : #333;
}
#contacts .line{
	color : white;
	outline : solid 1px white;
	outline-offset : -1px;
}
@media screen and ( width <= 750px ){
	#contacts{
		padding-block : calc( 80 var( --remBase ) );
		background-image : url( "../images/home/contact/bg_sp.webp" );
		background-repeat : repeat-y;
		background-position : 0 0;
		background-size : 100% auto;
	}
	#contacts > p{
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#contacts .box{
		margin-top : calc( 24 var( --remBase ) );
	}
	#contacts h3{
		text-align : center;
	}
	#contacts .tel{
		margin-inline : auto;
		margin-top : calc( 4 var( --remBase ) );
	}
	#contacts dl{
		justify-content : center;
		margin-top : calc( 4 var( --remBase ) );
	}
	#contacts ul{
		margin-top : calc( 24 var( --remBase ) );
	}
	#contacts :where( .mail , .line ){
		width : 100%;
	}
	#contacts .mail{
		background-color : white;
	}
}
@media print , screen and ( width > 750px ){
	#contacts{
		padding-block : calc( 160 var( --remBase ) );
		background-image : url( "../images/home/contact/bg_pc.webp" );
		background-repeat : repeat;
		background-position : center;
	}
	#contacts > *{
		width : calc( 650 var( --percentBase ) );
	}
	#contacts > p{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#contacts .box{
		display : grid;
		grid-template-columns : auto auto;
		align-items : start;
		justify-content : space-between;
		margin-top : calc( 24 var( --remBase ) );
	}
	#contacts :where( .mail , .line ){
		padding-inline : calc( 62 var( --remBase ) );
	}
	#contacts .mail{
		background-color : var( --gold );
	}
}
@media ( hover : hover ){
	#contacts .tel:hover{
		color : var( --gold );
	}
	#contacts .line:hover{
		color : #333;
		background-color : white;
	}
	@media print , screen and ( width > 750px ){
		#contacts .mail:hover{
			color : var( --gold );
			background-color : #333;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#contacts .tel{
		transition : color var( --transitionBounds );
	}
	#contacts .mail{
		transition : color var( --transitionBounds ) , background var( --transitionBounds );
	}
	#contacts .line{
		transition : color var( --transitionBase ) , background var( --transitionBase );
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	color : white;
	background-color : #10192b;
}
#footer .logo{
	width : fit-content;
}
#footer > p{
	font-family : Manrope , serif;
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#footer{
		padding-top : calc( 54 var( --remBase ) );
		padding-bottom : calc( 54 var( --remBase ) );
	}
	#footer .logo img{
		height : calc( 36.14 var( --remBase ) );
	}
	#footer > p{
		margin-top : calc( 20 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
}
@media print , screen and ( width > 750px ){
	#footer{
		display : grid;
		row-gap : calc( 64 var( --remBase ) );
		align-items : start;
		justify-content : space-between;
		padding-top : calc( 57 var( --remBase ) );
		padding-bottom : calc( 57 var( --remBase ) );
	}
	#footer .logo{
		display : grid;
		grid-template-columns : auto auto;
		grid-row : 1;
		grid-column : 1;
		column-gap : calc( 8 var( --remBase ) );
		align-items : center;
		justify-content : start;
	}
	#footer .logo img{
		height : calc( 36.14 var( --remBase ) );
	}
	#footer .logo > span{
		font-size : clamp( var( --min ) , 2.8rem , var( --max ) );
		color : white;
	}
	#footer .logo > span span{
		color : var( --gold );
	}
	#footer nav{
		display : grid;
		grid-row : 1;
		grid-column : 2;
		grid-auto-flow : column;
		column-gap : calc( 19 var( --remBase ) );
		align-items : center;
		justify-content : end;
	}
	#footer .links{
		display : grid;
		grid-auto-flow : column;
	}
	#footer .links a{
		display : block;
		padding-inline : calc( 9.5 var( --remBase ) );
		font-family : "Crimson Text" , serif;
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
		line-height : 2;
		color : white;
	}
	#footer .tel{
		display : grid;
		grid-auto-flow : column;
		align-content : center;
		align-items : center;
		justify-content : end;
		padding-left : calc( 19 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
		line-height : 2;
		border-left : solid 1px white;
	}
	#footer .tel a{
		font-family : "Crimson Text" , serif;
		color : white;
	}
	#footer .contacts{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : end;
	}
	#footer .contacts a{
		display : grid;
		place-items : center;
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
		line-height : 2;
	}
	#footer .contacts .mail{
		padding-inline : calc( 33.5 var( --remBase ) );
		color : #333;
		background-color : var( --gold );
	}
	#footer .contacts .line{
		padding-inline : calc( 30.5 var( --remBase ) );
		color : white;
		background-color : #10192b;
		outline : solid 1px white;
		outline-offset : -1px;
	}
	#footer > p{
		grid-row : 2;
		grid-column : 2;
		justify-self : end;
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
}
@media ( hover : hover ){
	#footer :where( .links , .tel ) a:hover{
		color : var( --gold );
	}
	#footer .mail:hover{
		color : var( --gold );
		background-color : #333;
	}
	#footer .line:hover{
		color : #10192b;
		background-color : white;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#footer :where( .links , .tel ) a{
		transition : color var( --transitionBounds );
	}
	#footer :where( .mail , .line ){
		transition : color var( --transitionBounds ) , background var( --transitionBounds );
	}
}


/*---モーダル------*/

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .modal-content {
            background-color: white;
            margin: 15% auto;
            padding: 2em 1em;
            width: 80vw;
            max-width: 600px;
            text-align: left;
            position: relative;
        }
			.modal-content h2 {
				font-size: 2rem;
				margin-bottom: .5em;
			}
			.modal-content img {
				max-width: 100%;
			}
        .close {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 20px;
            cursor: pointer;
        }
.line-msg {
	margin-top: 1em;
	text-align: center;
}
.line-message-bt {
	text-decoration: underline;