body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
/* ================================
	Header：タイトル中央 + FAQ右横
================================ */

/* ページヘッダー全体（サブヘッダーの下に余白だけ持つ） */
.page-header {
	margin-top: var(--header-h);
	padding: 0 0 1.6vh;
	background: transparent;
	border: none;
}

/* ページヘッダー内のグリッド（左ダミー／中央タイトル／右FAQボタン） */
.page-header .ph-inner {
	width: 75%;
	margin: 0 auto 4vh;
	display: grid;
	grid-template-columns: 1fr max-content 1fr; /* 左ダミー / 中央タイトル / 右FAQ */
	align-items: center;
	gap: 1.4vw;
}

/* 見出し（中央揃え・赤） */
.ph-title {
	grid-column: 2;
	justify-self: center;
	margin: 0 !important;
	line-height: 1.2;
	color: #e60000;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}

/* 左のダミー用ボタン（見た目非表示・幅だけ確保） */
.ph-inner .btn-faq:first-of-type {
	visibility: hidden;
	pointer-events: none;
	grid-column: 1;
}

/* 右側FAQボタン（ pill 形状） */
.ph-inner .btn-faq:last-of-type {
	grid-column: 3;
	justify-self: start;
	padding: 0.9vh 1.4vw;
	border: 1.5px solid #e60000;
	color: #e60000;
	background: #fff;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1vw;
	line-height: 1;
	cursor: pointer;
	align-self: end;
	transform: translateY(-0.5vh);
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.ph-inner .btn-faq:last-of-type:hover {
	background: #e60000;
	color: #fff;
}

/* ================================
	FAQモーダル（overlay + white dialog + pink cards）
================================ */

/* FAQ用のテーマ変数（丸サイズ/間隔/アクセント色/カード色） */
:root{
	--faq-badge: 36px;
	--faq-gap: 12px;
	--faq-accent: #e60000;
	--faq-card:  #fff1f4;
}

/* 画面全体の暗幕（非表示時はdisplay:none） */
.modal{
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0,0,0,.55);
	justify-content: center;
	align-items: center;
	padding: 6vh 4vw;
	overflow: hidden; /* 背景側へはスクロールさせない */
}
/* aria-hidden="false" で可視化 */
.modal[aria-hidden="false"]{ display:flex; }

/* モーダル表示中：背面スクロール停止（本体は .modal-content がスクロール） */
body.modal-open{ overflow: hidden; }

/* 白いダイアログ（高さ固定・内側スクロール） */
.modal-content{
	background:#fff;
	width: 60vw;
	height: 84vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 4vh 2vw;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(0,0,0,.18);
	position: relative;
}

/* × ボタン（右上固定） */
.modal .close{
	position:absolute;
	top:1.2vw;
	right:1.2vw;
	font-size:2.3vw;
	line-height:1;
	cursor:pointer;
	color:#e60000;
}

/* モーダルタイトル（中央・下線は擬似要素） */
#faq-title{
	margin: 0 0 2.4vh;
	text-align: center;
	font-weight: 700;
	font-size: 1.8vw;
}
/* タイトル下の赤いアンダーバー */
#faq-title::after{
	content:"";
	display:block;
	width:6vw;
	height:0.4vh;
	margin:1.4vh auto 0;
	border-radius:999px;
	background: var(--faq-accent);
}

/* FAQカードの縦リスト（要素間余白） */
.faq-list{
	display:flex;
	flex-direction:column;
	gap:1vw;
}

/* FAQ一件分のカード（薄ピンク・角丸） */
.faq-item{
	background: var(--faq-card);
	border: 1px solid rgba(230,0,0,.10);
	border-radius: 16px;
	padding: 1.2vw 2vw;
	box-shadow: 0 3px 10px rgba(0,0,0,.05);
	margin-bottom:0.8vh;
}

/* Q/A 行（左：丸バッジ／右：テキスト） */
.faq-row{
	display:grid;
	grid-template-columns: 3vw 1fr; /* 左列は丸の幅／右列は本文 */
	column-gap: 1.2vw;
	align-items: center;           /* 同一行内の縦位置 */
	min-height: var(--faq-badge);  /* 行の最小高さ＝丸の直径に合わせる */
}

/* 丸バッジの共通スタイル（完全センタリング） */
.faq-badge{
	box-sizing: border-box;
	width:2.2vw;
	height:2.2vw;
	border-radius:999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight:700;
	font-size: 1.2vw;
	line-height: 0;
}

/* Qの丸（塗り） */
.faq-row.q .faq-badge {
	background:var(--faq-accent);
	color:#fff;
}

/* Aの行（必要に応じてカード内で少し下げる） */
.faq-row.a {
	align-items: center;
	margin-top:1vh;
}

/* Aの丸（線だけ） */
.faq-row.a .faq-badge {
	background:#fff;
	border:2px solid var(--faq-accent);
	color:var(--faq-accent);
}

/* 質問テキスト */
.faq-q {
	font-weight:700;
	font-size:1.1vw;
	line-height:1.4;
}

/* 回答テキスト */
.faq-a {
	font-size:1vw;
	line-height:1.8;
	color:#333;
	opacity:.95;
}

/* ================================
	フォーム：カードレイアウト
================================ */

/* お問い合わせセクション（中央寄せ） */
.inquiry-section{
	width:100%;
	display:flex;
	justify-content:center;
	margin: 0 !important;
}

/* フォームの白カード */
.form-card{
	width: 60vw;
	margin: 0 auto;
	padding: 4.6vh 2.4vw 3.6vh;
	background:#fff;
	border-radius:16px;
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	box-sizing:border-box;
}

/* フォーム見出し */
.form-title{
	margin: 0 0 4vh;
	font-size: 2vw;
	font-weight: 700;
	color:#e60000;
	text-align:center;
}

/* 入力フォームラッパー（リセット） */
.inquiry-form{
	width:100%;
	max-width:none;
	margin:0;
	padding:0;
	background:transparent;
	box-shadow:none;
	border-radius:0;
}

/* ラベル（項目名） */
.inquiry-form label{
	display:block;
	margin:0 0 0.4vw 0.4vw;
	font-size:1.1vw;
	font-weight:600;
}

/* 必須マーク */
.inquiry-form label .req{
	font-size: .78em;
	color: #e60000;
	font-weight: 700;
	margin-left: .6em;
	white-space: nowrap;
}

/* テキスト入力/テキストエリア/セレクトの共通スタイル */
.inquiry-form input,
.inquiry-form textarea,
.inquiry-form select{
	width:100%;
	padding:1.4vh 0.8vw;
	margin-bottom:2.6vh;
	border:1px solid #dcdcdc;
	border-radius:8px;
	font-size:1.1vw;
	line-height:1.5;
	box-sizing:border-box;
	background:#fff !important;
}

/* プレースホルダー表示 */
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder {
	color: #999;
	opacity: 1;
	font-size: 0.95em;
}

/* テキストエリア（高さ可変） */
.inquiry-form textarea{
	resize: vertical;
	min-height: 180px;
}

/* フォーカス時の赤いアウトライン */
.inquiry-form input:focus,
.inquiry-form textarea:focus,
.inquiry-form select:focus{
	outline:none;
	border-color:#e60000;
	box-shadow:0 0 0 3px rgba(230,0,0,.12);
}

/* 送信ボタン（赤い pill） */
.inquiry-form button{
	width:100%;
	padding:1.7vh 1vw;
	font-size:1.1vw;
	font-weight:700;
	background:#e60000;
	color:#fff;
	border:none;
	border-radius:999px;
	cursor:pointer;
	transition: background .25s ease, transform .05s ease;
}
.inquiry-form button:hover{ background:#c40000; }
.inquiry-form button:active{ transform: translateY(1px); }

/* ================================
		送信中
================================ */

.sending-overlay{
	position: fixed;
	inset: 0;
	z-index: 20000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.sending-overlay.active{ display: flex; }

/* ダイアログボックス */
.sending-box{
	background:#fff;
	border-radius:16px;
	border:1px solid rgba(0,0,0,.08);
	box-shadow: 0 18px 40px rgba(0,0,0,.18);
	padding: 24px 28px;
	min-width: min(320px, 86vw);
	text-align:center;
}
.sending-title{ margin: 0 0 10px; font-weight:800; }
.sending-note{ margin: 8px 0 0; font-size: 13px; color:#666; }

/* スピナー */
.spinner{
	width: 44px; height: 44px;
	margin: 0 auto 12px;
	border-radius: 50%;
	border: 4px solid rgba(230,0,0,.25);
	border-top-color: #e60000;
	animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ================================
	Responsive（モバイル対応）
================================ */
@media (max-width: 900px){
	/* ヘッダー内のレイアウトを1列に */
	.page-header .ph-inner{
		width: 92%;
		margin: 0 auto 0.4vh;
		grid-template-columns: 1fr;
		row-gap: 4vw;
	}
	/* タイトルは改行可で中央 */
	.ph-title{
		grid-column: 1;
		justify-self: center;
		white-space: normal;
	}

	/* FAQボタンを中央に拡大表示 */
	.ph-inner .btn-faq:first-of-type{ display:none; }
	.ph-inner .btn-faq:last-of-type,
	#faq-open-btn.btn-faq{
		grid-column: 1;
		justify-self: center;
		transform: none;
		line-height: 1.2;
		font-weight: 700;
		font-size: 3vw;
		padding: 1vh 5vw;
		border-width: 1px;
	}

	/* --- FAQモーダル：SP用サイズ変数に差し替え --- */
	:root{
		--faq-badge: 6.4vw;        /* 丸の直径を画面幅連動に */
		--faq-gap: 2.8vw;          /* 列間隔 */
		--faq-a-offset: 1.2vw;     /* A行の上マージン微調整 */
	}

	/* 暗幕の上下余白を少し詰める */
	.modal{
		padding: 5vh 4vw;
	}

	/* 白いダイアログ（幅・高さ・角丸をSP向けに） */
	.modal-content{
		width: 80vw;
		height: 76vh;
		padding: 4vh 4vw 2vh;
		border-radius: 0;
	}

	/* ×ボタンを大きくしてタップしやすく */
	.modal .close{
		top:4vw;
		right:4vw;
		font-size:8vw;
	}

	/* モーダルタイトルのサイズ調整 */
	#faq-title{
		margin: 0 0 2.6vh;
		font-size: 5vw;
	}
	#faq-title::after{
		width:18vw;
		height:0.4vh;
		margin:1.2vh auto 0;
	}

	/* FAQカードの余白と角丸をSP向けに */
	.faq-list{ gap:1vw; }
	.faq-item{
		border-radius: 12px;
		padding: 3.6vw 4vw;
		margin-bottom:0.8vh;
	}

	/* Q/A 行（左列＝丸の幅、上揃え） */
	.faq-row{
		align-items: start;
		grid-template-columns: 6.6vw 1fr;
		column-gap: 1.2vw;
	}

	/* 丸バッジ（SPサイズ） */
	.faq-badge{
		margin-top: 0.1vh;       /* より視覚的に上揃えへ */
		width:5vw;
		height:5vw;
		font-size: 3vw;
	}

	/* A行は少し下げる */
	.faq-row.a {
		align-items: start;
		margin-top:1vh;
	}

	/* Q/A テキストサイズ（SP） */
	.faq-q { font-size:3.8vw; line-height:1.4; }
	.faq-a { font-size:3.4vw; line-height:1.8; }

	/* --- フォーム：SPカード設定 --- */
	.inquiry-section{ margin: 0 0 2vh; }
	.form-card{
		width: 92%;
		padding: 3.6vh 6vw;
		border-radius: 14px;
		box-shadow: 0 6px 16px rgba(0,0,0,.06);
	}
	.form-title{
		margin-bottom: 3.4vh;
		font-size: 5vw;
	}

	/* ラベル/入力のタップ領域拡大 */
	.inquiry-form label{
		font-size: 3.8vw;
		margin-bottom: 1vh;
		margin-left: 1vw;
	}
	.inquiry-form label .req{ font-size: .8em; }

	/* 入力欄の文字・余白（SP） */
	.inquiry-form input,
	.inquiry-form textarea,
	.inquiry-form select{
		font-size: 3.5vw;
		padding: 1vh;
		margin-bottom: 2.6vh;
	}
	.inquiry-form textarea{ min-height: 140px; }

	/* 送信ボタン（SP） */
	.inquiry-form button{
		font-size: clamp(16px, 4.6vw, 18px);
		padding: 14px;
	}
	/* 送信中ボタン*/
	body.is-loading{
		overflow: hidden;
		overscroll-behavior: none;
		touch-action: none;
	}
}