@charset "utf-8";

/************************************
 * Reset
************************************/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
button,
input,
label {
	line-height: 1.1;
}

a:not([class]) {
	color: currentColor;
}

img,
picture {
	max-width: 100%;
	display: block;
}

input,
button,
textarea,
select {
	font: inherit;
}

textarea:not([rows]) {
	min-height: 10em;
}

:target {
	scroll-margin-block: 5ex;
}

em {
	font-style: normal;
}

/************************************
 * Base
 ************************************/
:root {
	--base-width: 375;
	/* 基準幅 */
	--max-width: 960;
	/* 最大幅 */
	--base-font-size: 10;
	/* 基準フォントサイズ (10px) */
	/* 最大横幅サイズ時の最大フォントサイズ */
	--max-font-size: calc((var(--base-font-size) / var(--base-width)) * var(--max-width) * 1px);
}

html {
	/** 以下指定で、横幅が --base-width 時に 1rem が 10pxとなる */
	font-size: min(calc((var(--base-font-size) / var(--base-width)) * 100vw), var(--max-font-size));
	scroll-behavior: smooth;
}

body {
	background: #000;
	font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
	font-style: normal;
	font-size: 1.6rem;
	letter-spacing: 0.1rem;
	-webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1.4rem;
}

img,
video {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.2s;
}

@media (hover: hover) {
	a:hover {
		opacity: 0.6;
		transition: opacity 0.2s;
	}

	button:hover {
		cursor: pointer;
	}

	label:hover {
		cursor: pointer;
	}
}

input,
textarea,
select,
button {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	font-family: inherit;
	font-size: inherit;
	font-size: 1.4rem;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	background-color: #fff;
	border: 1px solid #959595;
	border-radius: 0.7rem;
	padding: .6rem 1rem;
	background-image: url(../img/icon_arrow_down.svg);
	background-repeat: no-repeat;
	background-position: calc(100% - 0.5rem) center;
	background-size: 1rem;
	font-size: 1.7rem;
	color: #000;
}

select:disabled {
	background-color: #efefef;
	border: 1px solid #c4c4c4;
}

input:focus,
textarea:focus,
select:focus,
button:focus {
	outline: none;
}

button {
	border: none;
	border-radius: 0.7rem;
	cursor: pointer;
}

/************************************
 * Page
************************************/
.page-wrap {
	width: 100%;
	max-width: calc(var(--max-width) * 1px);
	margin: 0 auto;
	/*border-top: 1rem solid #3D4355;*/
}

div.page_header {
	background: #0f2d73;
	padding: 10px 0 8px;
}

.page-footer {
	padding: 7rem 2rem;
	text-align: center;
	font-size: .85rem;
}

.page-footer a {
	margin: 0 0.5rem;
	color: #6A6A6A;
}

/************************************
 * 動画（iframe）配置
 ************************************/
.iframe{
	margin: 0 auto;
	text-align: center;
}
iframe{
	width: 100%;
	height: auto;
	max-width: 640px;
	padding: 0 2rem;
	aspect-ratio: 16 / 9;
}

.youtube_btn img{
	width: 100%;
	height: auto;
	max-width: 640px;
	padding: 0 2rem;
	margin: 0 auto;
	text-align: center;

}

/*==================================================================
 * ドクター操作ボタン（プロフィール／予約）
 * SP：縦積み ／ PC（640px以上）：横並び
 *================================================================*/
 .doctor-actions {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding: 2rem;
}

.doctor-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	padding: 2.1rem 2rem;
	border-radius: 0.4rem;
	font-size: 2rem;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s;
}

@media (hover: hover) {
	.doctor-btn:hover {
		opacity: 0.85;
	}
}

/*----- プロフィールをみる（黒地・タン枠/文字） -----*/
.doctor-btn--profile {
	background: #000;
	border: 1px solid #f0c890;
	color: #f0c890;
	font-weight: 500;
}

/* 右端の外部リンクアイコンを ::after で挿入（色は文字色に追従） */
.doctor-btn--profile::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2rem;
	transform: translateY(-50%);
	width: 1.8rem;
	height: 1.8rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15%203h6v6%27%2F%3E%3Cpath%20d%3D%27M10%2014%2021%203%27%2F%3E%3Cpath%20d%3D%27M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h6%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15%203h6v6%27%2F%3E%3Cpath%20d%3D%27M10%2014%2021%203%27%2F%3E%3Cpath%20d%3D%27M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h6%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

/*----- このドクターに予約する（タン地・黒文字） -----*/
.doctor-btn--reserve {
	background: #f0c890;
	color: #222;
	border: none;
	font-weight: 700;
}

/*----- PC（640px以上）：横並び -----*/
@media screen and (min-width: 640px) {
	.doctor-actions {
		flex-direction: row;
	}

	.doctor-actions .doctor-btn {
		flex: 1;
		font-size: 1rem;
        padding: 1.5rem 1rem;
	}

	/* PCでは狭くなるため、アイコンを文字の右隣（インライン）に配置して重なりを回避 */
	.doctor-btn--profile::after {
		position: static;
		transform: none;
		right: auto;
		top: auto;
		width: 1.4rem;
		height: 1.4rem;
	}
}

/*==================================================================
 * 予約フォーム（reservation form）
 *================================================================*/

.rsv {
	/* フォーム専用の単位。SPは従来どおり（root相当）、PCは上限17pxで頭打ちにして大きくなりすぎを防ぐ。
	   フォーム内の寸法は calc(var(--u) * 係数) で表現している（rem と同じ絶対長でコンパウンドしない）。 */
	--u: clamp(9px, 2.6667vw, 17px);
	background: #1c1c1c;
	padding: calc(var(--u) * 4) calc(var(--u) * 2) calc(var(--u) * 5);
	color: #222;
	max-width: 960px;
	border-top: 4px solid #ffc589;
}

.rsv *,
.rsv *::before,
.rsv *::after {
	box-sizing: border-box;
}

/*----- 見出し「予約フォーム」 -----*/
.rsv__title {
	color: #fff;
	font-weight: 600;
	font-size: calc(var(--u) * 2.5);
	text-align: center;
	letter-spacing: calc(var(--u) * 0.4);
	margin: 0 0 calc(var(--u) * 3);
}

.rsv__title span{
	color: #ffc589;
}

/*----- 白カード -----*/
.rsv__card {
	background: #fff;
	border-radius: calc(var(--u) * 0.4);
	padding: calc(var(--u) * 3) calc(var(--u) * 2.4);
}

/*==================================================================
 * ステップ進行バー
 *================================================================*/
.rsv__progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: calc(var(--u) * 0.5) 0 calc(var(--u) * 3.5);
	padding: 0 calc(var(--u) * 0.4);
}

.rsv__progress-item {
	position: relative;
	flex: 1;
	display: flex;
	justify-content: center;
}

.rsv__progress-item:not(:first-child)::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 50%;
	left: -50%;
	height: calc(var(--u) * 0.2);
	background: #dcdcdc;
	transform: translateY(-50%);
	z-index: 0;
}

.rsv__progress-item.is-done::before,
.rsv__progress-item.is-current::before {
	background: #111;
}

.rsv__progress-num {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--u) * 3.2);
	height: calc(var(--u) * 3.2);
	border-radius: 50%;
	background: #e4e4e4;
	color: #9a9a9a;
	font-size: calc(var(--u) * 1.6);
	font-weight: 700;
	line-height: 1;
}

.rsv__progress-item.is-done .rsv__progress-num {
	background: #111;
	color: #fff;
}

.rsv__progress-item.is-current .rsv__progress-num {
	background: #f0b878;
	color: #333;
}

/*==================================================================
 * ステップ本体（横スライド）
 *================================================================*/
.rsv__steps {
	overflow: hidden;
	transition: height 0.35s ease;
}

.rsv__track {
	display: flex;
	align-items: flex-start;
	position: relative;
	transition: transform 0.35s ease;
}

.rsv__step {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	padding: 0 0.5rem;
}

/* 分岐で非表示にするステップ（display:none で列から除外） */
.rsv__step[hidden] {
	display: none;
}

/*----- セクション見出し -----*/
.rsv__legend {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: calc(var(--u) * 1);
	margin: 0 0 calc(var(--u) * 1.6);
	padding: 0;
	border: none;
	width: 100%;
}

.rsv__legend-ttl {
	font-weight: 700;
	font-size: calc(var(--u) * 1.5);
	letter-spacing: calc(var(--u) * 0.1);
}

.rsv__badge {
	display: inline-block;
	background: #e5323f;
	color: #fff;
	font-size: calc(var(--u) * 1.2);
	font-weight: 700;
	line-height: 1;
	padding: calc(var(--u) * 0.5) calc(var(--u) * 0.7);
	border-radius: calc(var(--u) * 0.3);
}

.rsv__note {
	margin-left: auto;
	color: #e5323f;
	font-size: calc(var(--u) * 1.4);
	font-weight: 700;
}

.rsv__legend--sub {
	margin-top: calc(var(--u) * 1);
}

/* 入力の実体は視覚的に隠し、ラベルで見た目を作る */
.rsv__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/*==================================================================
 * ステップ1：希望ドクター選択（画像カード）
 *================================================================*/
.rsv__doctors {
	display: flex;
	flex-direction: column;
	gap: calc(var(--u) * 1.6);
	margin-bottom: calc(var(--u) * 2.4);
}

/* 画像カード（希望なし以外） */
.rsv__doctor:not(.rsv__doctor--none) {
	display: block;
	cursor: pointer;
	border: 2px solid #ccc;
	border-radius: calc(var(--u) * 0.4);
	overflow: hidden;
	transition: background 0.15s, border-color 0.15s;
	padding: calc(var(--u) * 1);
}

/* 選択時：黄色背景＋黒ボーダー */
.rsv__doctor:not(.rsv__doctor--none):has(.rsv__input:checked) {
	background: #f8cd97;
	border-color: #000;
}

/* ドクターカード画像：読み込み前でも高さを確保し、初回表示での切れ・ガタつきを防ぐ。
   各画像は幅560pxで高さが異なるため、カードごとに実寸の比率を指定する。
   nth-of-type の番号は .rsv__doctors 内のカードの並び順（1枚目〜5枚目）に対応。 */
   .rsv__doctor:not(.rsv__doctor--none) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 560 / 290; /* フォールバック（下記に該当しない場合の既定値） */
}

.rsv__doctors .rsv__doctor:nth-of-type(1) img { aspect-ratio: 560 / 256; } /* doctor1 */
.rsv__doctors .rsv__doctor:nth-of-type(2) img { aspect-ratio: 560 / 290; } /* doctor2 */
.rsv__doctors .rsv__doctor:nth-of-type(3) img { aspect-ratio: 560 / 287; } /* doctor3 */
.rsv__doctors .rsv__doctor:nth-of-type(4) img { aspect-ratio: 560 / 288; } /* doctor4 */
.rsv__doctors .rsv__doctor:nth-of-type(5) img { aspect-ratio: 560 / 325; } /* doctor5 */

/*----- 希望なしカード（テキスト） -----*/
.rsv__doctor--none {
	display: block;
	cursor: pointer;
}

.rsv__doctor-none {
	display: block;
	border: 2px solid #dcdcdc;
	border-radius: calc(var(--u) * 0.4);
	padding: calc(var(--u) * 1.8) calc(var(--u) * 2);
	background: #fff;
	transition: background 0.15s, border-color 0.15s;
}

/* 選択時：黄色背景＋黒ボーダー */
.rsv__doctor--none:has(.rsv__input:checked) .rsv__doctor-none {
	background: #f8cd97;
	border-color: #000;
}

.rsv__doctor-none-ttl {
	display: block;
	font-weight: 700;
	font-size: calc(var(--u) * 2.1);
	margin-bottom: calc(var(--u) * 0.4);
}

.rsv__doctor-none-sub {
	display: block;
	font-size: calc(var(--u) * 1.4);
	color: #555;
}

/*==================================================================
 * 共通：チェックボックス
 *================================================================*/
.rsv__check {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 1.2);
	cursor: pointer;
	font-size: calc(var(--u) * 1.6);
	font-weight: bold;
}

.rsv__check-box {
	flex-shrink: 0;
	width: calc(var(--u) * 2.6);
	height: calc(var(--u) * 2.6);
	border: 2px solid #6f6f6f;
	border-radius: calc(var(--u) * 0.5);
	background: #fff;
	position: relative;
	transition: background 0.15s, border-color 0.15s;
}

.rsv__check-box::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70%;
	opacity: 0;
	transition: opacity 0.15s;
}

.rsv__input:checked + .rsv__check .rsv__check-box {
	background: #f0b878;
	border-color: #f0b878;
}

.rsv__input:checked + .rsv__check .rsv__check-box::after {
	opacity: 1;
}

/*==================================================================
 * ステップ2（希望なし）：通院可能エリア
 *================================================================*/
.rsv__checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(var(--u) * 1.6) calc(var(--u) * 1.4);
	margin-bottom: calc(var(--u) * 3.4);
}

/*==================================================================
 * ステップ2（希望なし）：優先したい条件（ラジオ）
 *================================================================*/
.rsv__radios {
	display: flex;
	flex-direction: column;
	gap: calc(var(--u) * 1.2);
	margin-bottom: calc(var(--u) * 3);
}

.rsv__radio {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 1.4);
	border: 1px solid #dcdcdc;
	border-radius: calc(var(--u) * 0.8);
	padding: calc(var(--u) * 1.8) calc(var(--u) * 2);
	cursor: pointer;
	font-size: calc(var(--u) * 1.6);
	transition: border-color 0.15s, background 0.15s;
	font-weight: bold;
}

.rsv__radio-mark {
	flex-shrink: 0;
	width: calc(var(--u) * 2.6);
	height: calc(var(--u) * 2.6);
	border-radius: 50%;
	border: 2px solid #cfcfcf;
	background: #fff;
	position: relative;
	transition: background 0.15s, border-color 0.15s;
}

.rsv__radio-mark::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 62%;
	opacity: 0;
	transition: opacity 0.15s;
}

.rsv__input:checked + .rsv__radio {
	border-color: #111;
}

.rsv__input:checked + .rsv__radio .rsv__radio-mark {
	background: #111;
	border-color: #111;
}

.rsv__input:checked + .rsv__radio .rsv__radio-mark::after {
	opacity: 1;
}

.rsv__lead {
	text-align: center;
    font-size: calc(var(--u) * 1.4);
    line-height: 1.7;
    margin: 0 0 calc(var(--u) * 2.6);
    font-weight: bold;
}

/*==================================================================
 * ステップ2（希望あり）：希望院（セレクト）
 *================================================================*/
.rsv__select {
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #ececec;
	border: none;
	border-radius: calc(var(--u) * 0.4);
	padding: calc(var(--u) * 1.5) calc(var(--u) * 1.4);
	font-size: calc(var(--u) * 1.7);
	color: #333;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23333'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: calc(100% - calc(var(--u) * 1.5)) center;
	background-size: calc(var(--u) * 1.3);
	margin-bottom: calc(var(--u) * 3);
}

/* ------------------------------------------------------------------
 * 最新CSS（カスタマイザブル・セレクト）
 * appearance: base-select にすると選択肢リストがトップレイヤーへ描画され、
 * スライダーの overflow:hidden / transform に切り取られなくなります。
 * 非対応ブラウザは上のネイティブ表示にフォールバックします。
 * ------------------------------------------------------------------ */
@supports (appearance: base-select) {

	.rsv__select,
	.rsv__select::picker(select) {
		appearance: base-select;
	}

	/* 閉じた状態の見た目（グレーの箱）を維持。矢印は picker-icon に任せる */
	.rsv__select {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: calc(var(--u) * 1);
		background-image: none;
	}

	.rsv__select::picker-icon {
		color: #333;
		transition: transform 0.2s;
	}

	.rsv__select:open::picker-icon {
		transform: rotate(180deg);
	}

	/* 開いたときの選択肢リスト（トップレイヤー描画のため切れない） */
	.rsv__select::picker(select) {
		border: 1px solid #cfcfcf;
		border-radius: calc(var(--u) * 0.4);
		background: #fff;
		padding: calc(var(--u) * 0.4);
		box-shadow: 0 calc(var(--u) * 0.4) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.12);
	}

	.rsv__select option {
		display: flex;
		align-items: center;
		padding: calc(var(--u) * 1.1) calc(var(--u) * 1.2);
		font-size: calc(var(--u) * 1.6);
		border-radius: calc(var(--u) * 0.3);
	}

	.rsv__select option:hover,
	.rsv__select option:focus {
		background: #f3f3f3;
	}

	.rsv__select option:checked {
		background: #f8cd97;
		color: #000;
	}

	/* 既定のチェックマークは非表示（背景色で選択を表現） */
	.rsv__select option::checkmark {
		display: none;
	}
}

/*==================================================================
 * ステップ2（希望あり）：相談したい施術カテゴリ
 *================================================================*/
.rsv__cats {
	margin-bottom: calc(var(--u) * 3);
}

/* 医師別の出し分けで非表示にした項目・カテゴリ見出しを隠す */
.rsv__cats .rsv__cat[hidden],
.rsv__cats .rsv__check-wrap[hidden] {
	display: none;
}

.rsv__cat + .rsv__cat {
	margin-top: calc(var(--u) * 2.2);
}

.rsv__cat-title {
	display: block;
	color: #9a9a9a;
	font-size: calc(var(--u) * 1.5);
	font-weight: 700;
	padding-bottom: calc(var(--u) * 0.9);
	border-bottom: 1px solid #dcdcdc;
	margin-bottom: calc(var(--u) * 1.6);
}

.rsv__cat-items {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(var(--u) * 1.5) calc(var(--u) * 1.4);
}

/* 長いラベルは1行占有 */
.rsv__cat-item--wide {
	grid-column: 1 / -1;
}

/* カテゴリ内のチェックは少し詰める */
.rsv__cat-items .rsv__check {
	font-size: calc(var(--u) * 1.1);
	gap: calc(var(--u) * 1);
	font-weight: bold;
}

.rsv__cat-items .rsv__check-box {
	width: calc(var(--u) * 2.4);
	height: calc(var(--u) * 2.4);
}

/*==================================================================
 * 共通：テキスト入力／テキストエリア（ステップ3・5）
 *================================================================*/
.rsv__text {
	width: 100%;
	background: #fff;
	border: 1px solid #cfcfcf;
	border-radius: calc(var(--u) * 0.6);
	padding: calc(var(--u) * 1.6) calc(var(--u) * 1.4);
	font-size: calc(var(--u) * 1.7);
	color: #222;
	margin-bottom: calc(var(--u) * 3);
}

.rsv__text:focus-visible {
	border-color: #4a90d9;
	outline: 2px solid #4a90d9;
	outline-offset: 1px;
}

.rsv__text:disabled {
	background: #efefef;
	border-color: #d8d8d8;
}

.rsv__textarea {
	width: 100%;
	background: #fff;
	border: 1px solid #cfcfcf;
	border-radius: calc(var(--u) * 0.6);
	padding: calc(var(--u) * 1.4);
	font-size: calc(var(--u) * 1.7);
	color: #222;
	min-height: calc(var(--u) * 18);
	resize: vertical;
	margin-bottom: calc(var(--u) * 3);
}

.rsv__textarea:focus-visible {
	border-color: #4a90d9;
	outline: 2px solid #4a90d9;
	outline-offset: 1px;
}

/*==================================================================
 * ステップ3：プレーンなラジオ（性別・連絡方法）
 *================================================================*/
.rsv__radios--plain {
	gap: calc(var(--u) * 1.6);
}

.rsv__radios--plain .rsv__radio {
	border: none;
	border-radius: 0;
	padding: 0;
	font-size: calc(var(--u) * 1.9);
}

/*==================================================================
 * ステップ3：生年月日（年・月・日の横並び）
 *================================================================*/
.rsv__birth {
	display: flex;
	gap: calc(var(--u) * 1);
	margin-bottom: calc(var(--u) * 3);
}

.rsv__select--inline {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
	padding-left: calc(var(--u) * 1.1);
	padding-right: calc(var(--u) * 2.6);
	background-position: calc(100% - calc(var(--u) * 0.8)) center;
	font-size: calc(var(--u) * 1.5);
}

/*==================================================================
 * ステップ4：予約希望日時（第1〜第3希望）
 *================================================================*/
.rsv__pref {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: calc(var(--u) * 1.4);
	margin-bottom: calc(var(--u) * 2.4);
}

.rsv__pref-label {
	font-weight: 700;
	font-size: calc(var(--u) * 1.6);
	padding-top: calc(var(--u) * 1.7);
	white-space: nowrap;
}

.rsv__pref-selects {
	display: flex;
	flex-direction: column;
	gap: calc(var(--u) * 1.2);
}

.rsv__pref-selects .rsv__select {
	margin-bottom: 0;
}

/* 単独チェックボックス（折り返し相談など） */
.rsv__check-wrap--single {
	display: block;
	margin: calc(var(--u) * 0.6) 0 calc(var(--u) * 3);
}

/*==================================================================
 * ステップ5：注釈
 *================================================================*/
.rsv__annotation {
	color: #9a9a9a;
	font-size: calc(var(--u) * 1.4);
	line-height: 1.7;
	margin: 0 0 calc(var(--u) * 2.6);
}

/*==================================================================
 * ステップ6：同意事項
 *================================================================*/
.rsv__agrees {
	display: flex;
	flex-direction: column;
	gap: calc(var(--u) * 1.8);
	margin-bottom: calc(var(--u) * 3);
}

.rsv__agrees .rsv__check {
	align-items: flex-start;
	gap: calc(var(--u) * 1);
	font-size: calc(var(--u) * 1.6);
	line-height: 1.6;
}

.rsv__agrees .rsv__check-box {
	margin-top: calc(var(--u) * 0.1);
}

.rsv__agree-link {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

/*==================================================================
 * ナビゲーション（戻る／次へ）
 *================================================================*/
.rsv__next {
	display: block;
	width: 100%;
	background: #e5323f;
	color: #fff;
	font-weight: 700;
	font-size: calc(var(--u) * 2.4);
	letter-spacing: calc(var(--u) * 0.3);
	border: none;
	border-radius: calc(var(--u) * 0.4);
	padding: calc(var(--u) * 2);
	cursor: pointer;
	transition: opacity 0.2s;
}

.rsv__prev {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 0.6);
	width: 100%;
	background: #e4e4e4;
	color: #555;
	font-weight: 700;
	font-size: calc(var(--u) * 1.8);
	letter-spacing: calc(var(--u) * 0.2);
	border: none;
	border-radius: calc(var(--u) * 0.4);
	padding: calc(var(--u) * 1.6);
	margin-top: calc(var(--u) * 1.2);
	cursor: pointer;
	transition: opacity 0.2s;
}

/* アイコン定義（symbol）の置き場所。描画はせず領域も取らない */
.rsv__sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.rsv__prev .rsv__icon {
	width: calc(var(--u) * 1.4);
	height: calc(var(--u) * 1.4);
}

@media (hover: hover) {
	.rsv__next:hover {
		opacity: 0.85;
	}

	.rsv__prev:hover {
		opacity: 0.85;
	}
}

/*==================================================================
 * アクセシビリティ：フォーカスと motion 配慮
 *================================================================*/
.rsv__input:focus-visible + * {
	outline: 2px solid #4a90d9;
	outline-offset: 2px;
}

.rsv__select:focus-visible,
.rsv__next:focus-visible,
.rsv__prev:focus-visible {
	outline: 2px solid #4a90d9;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.rsv * {
		transition: none !important;
	}
}

/*==================================================================
 * PC（640px以上）：予約フォームの表示幅を640pxに抑えて中央寄せ
 * ※背景の帯は全幅のまま、見出しとカードのみ640px・中央寄せ。
 * ※SP（640px未満）は一切変更なし（従来どおり）。
 *================================================================*/
@media screen and (min-width: 640px) {
	/* 見出しとカードを640px幅・中央寄せに（背景の帯は全幅のまま） */
	.rsv__title,
	.rsv__card {
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
	}
}

/*==================================================================
 * FV下のボタン（ページ内遷移／YouTube）
 * SP：縦並び ／ PC（640px以上）：横並び
 * どちらも画像リンク（fv_btn_a.png ／ fv_btn_b.png）
 *================================================================*/
 .fv-btns {
    display: flex;
    flex-direction: row;
    gap: 1.2rem;
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem;
}

.fv-btn {
	display: block;
	transition: opacity 0.2s;
}

.fv-btn img {
	display: block;
	width: 100%;
	height: auto;
}

/*----- PC（640px以上）：横並び -----*/
@media screen and (min-width: 640px) {
	.fv-btns {
		flex-direction: row;
		align-items: center;
	}

	.fv-btn {
		flex: 1;
		min-width: 0;
	}
}

/*----- SPのみ表示：メインキャスト帯（PCでは非表示） -----*/
.fv-under {
	display: block;
	width: 100%;
	height: auto;
	padding: 0 1rem 2rem;
}

@media screen and (min-width: 640px) {
	.fv-under {
		display: none;
	}
}

/*==================================================================
 * ハンバーガーメニュー（SPのみ・ページ内遷移）
 *================================================================*/
.hnav__toggle {
	position: fixed;
	top: 1.6rem;
	right: 1.6rem;
	z-index: 1000;
	width: 4.8rem;
	height: 4.8rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	background: #1a1a1a;
	border: 1px solid #f0c890;
	border-radius: 0.4rem;
	cursor: pointer;
}

.hnav__toggle span {
	display: block;
	width: 2.4rem;
	height: 2px;
	background: #f0c890;
	transition: transform 0.25s, opacity 0.25s;
}

/* 開いたとき×に変形 */
.hnav__toggle.is-open span:nth-child(1) {
	transform: translateY(0.8rem) rotate(45deg);
}

.hnav__toggle.is-open span:nth-child(2) {
	opacity: 0;
}

.hnav__toggle.is-open span:nth-child(3) {
	transform: translateY(-0.8rem) rotate(-45deg);
}

/* オーバーレイ */
.hnav {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(17, 17, 17, 0.97);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s, visibility 0.25s;
}

.hnav.is-open {
	opacity: 1;
	visibility: visible;
}

.hnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.hnav__list li {
	margin: 2.6rem 0;
}

.hnav__list a {
	color: #f0c890;
	font-size: 2.4rem;
	letter-spacing: 0.2rem;
	text-decoration: none;
}

/* メニュー展開中は背面スクロールを止める */
body.hnav-open {
	overflow: hidden;
}

/* PC（640px以上）ではハンバーガーを非表示 */
@media screen and (min-width: 640px) {

	.hnav__toggle,
	.hnav {
		display: none;
	}
}

/*==================================================================
 * サンクスページ（送信完了）
 *================================================================*/
.thanks {
	min-height: 100vh;
	background: #000;
	color: #fff;
}

.thanks__header {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	padding: 2rem;
	width: 50%;
    min-width: 300px;
}

.thanks__main {
	max-width: 640px;
	margin: 0 auto;
	padding: 3rem;
	text-align: center;
}

.thanks__title {
	font-weight: 600;
	font-size: calc(clamp(9px, 2.6667vw, 17px) * 3);
	letter-spacing: 0.6rem;
	margin: 0 0 4.5rem;
}

.thanks__lead {
	font-size: calc(clamp(9px, 2.6667vw, 17px) * 1.5);
	line-height: 1.5;
	letter-spacing: 0.1rem;
	margin: 0 0 5rem;
}

.thanks__home {
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #e5323f;
    color: #fff;
    font-weight: bold;
    font-size: 1.5rem;
    letter-spacing: 0.3rem;
    border-radius: 0.4rem;
    padding: 1.5rem;
    text-decoration: none;
    transition: opacity 0.2s;
}

@media (hover: hover) {
	.thanks__home:hover {
		opacity: 0.85;
	}
}