body {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight:400;
	letter-spacing: 0.5px;
}

main {
	width:100%;
	overflow-x:hidden;
}

:is(h1, h2) ,
main :is(h1, h2) {
	font-family: "Hina Mincho", serif;
	font-weight:normal;
	line-height:1.4;
}
main :is(h1, h2) small {
	font-family: "Noto Sans JP", sans-serif;
	font-weight:bold;
	color:var(--color-light-glass);
	font-size:0.6em;
	line-height:1em;
	display:block;
}

main .narrow {
	max-width:900px;
}
main .medium {
	max-width:1020px;
}

main .lead {
	font-weight: 500;
	text-align:center;
	line-height:2.4;
	color:var(--color-darkgray);
}

main > header {
	background:var(--color-lightgray);
	padding:var(--padding);
}
main > header h1 {
	display:flex;
	align-items: center;
	justify-content: center;
	gap:20px;
	color:var(--color-super-white);
}
main > header h1 span {
	font-family: "Noto Sans JP", sans-serif;
	font-size:0.6em;
}


/* Button */
.buttons {
	display: flex;
	justify-content: center;
	gap:10px 40px;
}
.button {
    padding:10px 20px;
	min-width:300px;
	font-family: "Hina Mincho", serif;
    font-weight:normal;
    text-align:center;
	font-size:1em;
	line-height:1;
	display:flex;
	align-items: center;
	justify-content: space-between;
	gap:20px;
}
.button i {
	font-size:1.2em;
}
.button:hover {
	border-radius:100px;
}

.button.trans-button {
	background:transparent;
	color:var(--color-black);
	border:solid 1px var(--color-black);
}
.button.trans-button:hover {
	background:var(--color-white);
}
.back-button {
	background:var(--color-lightgray);
	color:var(--color-black) !important;
	font-family: "Noto Sans JP", sans-serif;
	min-width:auto;
	width:fit-content;
}
.reservation-button {
    background:var(--color-gray);
}


/* contents left / right */
.content-left {
	border-radius:0 var(--radius) var(--radius) 0;
	padding:var(--section-space);
	margin-left: calc((((100vw - var(--width-limit)) / 2) + var(--padding)) * -1);
}
.content-right {
	border-radius:var(--radius) 0 0 var(--radius);
	padding:var(--section-space);
	margin-right: calc((((100vw - var(--width-limit)) / 2) + var(--padding)) * -1);
}
.medium .content-left {
	margin-left: calc((((100vw - 1100px) / 2) + var(--padding)) * -1);
}
.medium .content-right {
	margin-right: calc((((100vw - 1100px) / 2) + var(--padding)) * -1);
}

.photo-section article {
    color:var(--color-white);
    min-height:40vw;
}
.photo-section h1 {
    font-size:1em;
    writing-mode:vertical-rl;
    display:flex;
    align-items: center;
    justify-content: center;
    border:solid 1px var(--color-white);
    height:fit-content;
    white-space: nowrap;
    aspect-ratio: 1;
    padding:10px;
    font-family: "Hina Mincho", serif;
	color:var(--color-white);
	border-radius:var(--radius-inner);
	backdrop-filter: blur(4px);
}
.photo-section h2 {
    font-size:1.4em;
}
.photo-section .message {
    background:var(--color-dark-glass);
    padding:var(--padding);
	border-radius:var(--radius-inner);
	backdrop-filter: blur(4px);

}
.photo-section .message p {
	font-size:0.9em;
	font-weight:400;
	font-family: "Hina Mincho", serif;
}


@media (max-width: 1300px) {
	.content-left {
		margin-left: calc(var(--padding) * -1);
	}
	.content-right {
		margin-right: calc(var(--padding) * -1);
	}
}
@media (max-width: 1020px) {
	.medium .content-left {
		margin-left: calc(var(--padding) * -1);
	}
	.medium .content-right {
		margin-right: calc(var(--padding) * -1);
	}
}
@media (max-width : 920px) {
	.content-left , .content-right {
		padding:var(--section-space) 10vw;
	}
}
@media (max-width : 720px) {
	.buttons {
		flex-direction: column;
	}
	.button {
		min-width:auto;
	}
}
@media (max-width: 520px) {
	main > header h1 {
		flex-direction: column;
		gap:0;
		font-size:1.8em;
	}
	.button {
		width:100%;
	}

	main .lead {
		text-align:justify;
	}
}
@media (min-width: 520px) {
	a[href*="tel:"]{
		text-decoration: none;
		pointer-events: none;
	}
}