/* =========================================================
   「町民無料券について」ページ専用スタイル（page-resident-ticket.php）
   三波渓谷メインページの .p-sanba-* とはクラス名（.p-rt-*）を分けており、
   このファイルを変更しても親ページ・TOPページの見た目には影響しない。
========================================================= */

/* =========================================================
   ① HERO（親ページ〈三波渓谷〉のHEROより少しコンパクトにする）
========================================================= */
.p-rt-hero {
	position: relative;
	width: 100%;
	/* 目安の比率。親ページの16/6.2よりコンパクトにしている。
	   実装後にモックアップと見比べて調整する。 */
	aspect-ratio: 16 / 5;
	min-height: 300px;
	background-color: var(--wp--preset--color--forest);
	background-size: cover;
	background-position: center;
	color: var(--wp--preset--color--base);
	overflow: hidden;
}
/* 写真が未設定の間の仮の背景 */
.p-rt-hero.is-placeholder {
	background-image: linear-gradient(160deg, var(--wp--preset--color--forest), #16302a);
}
.p-rt-hero__overlay {
	position: absolute;
	inset: 0;
	/* 写真の左側だけを弱く暗くして、文字の可読性を確保する。
	   三波渓谷ページのHEROと同程度の弱さに合わせ、写真全体は暗くしない。 */
	background: linear-gradient(100deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70%);
}
.p-rt-hero__inner {
	position: absolute;
	left: 9%;
	top: 50%;
	transform: translateY(-50%);
	max-width: 480px;
}
.p-rt-hero .c-breadcrumb {
	display: block;
	margin-bottom: 14px;
}
.p-rt-hero__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 34px;
	line-height: 1.4;
	margin-bottom: 8px;
}
.p-rt-hero__label {
	display: block;
	color: var(--wp--preset--color--base);
	opacity: 0.85;
	margin-bottom: 14px;
}
.p-rt-hero__lead {
	font-size: 14px;
	line-height: 1.8;
	max-width: 460px;
}
@media (max-width: 768px) {
	.p-rt-hero {
		aspect-ratio: auto;
		min-height: 260px;
	}
	.p-rt-hero__inner {
		left: 20px;
		right: 20px;
		max-width: none;
	}
	.p-rt-hero__heading {
		font-size: 22px;
	}
}

/* =========================================================
   ② 町民無料券とは？
   左65〜70%：アイコン＋見出し＋説明文 ／ 右30〜35%：淡い自然モチーフ（装飾）
========================================================= */
.p-rt-intro {
	background: var(--wp--preset--color--base);
	/* セクション全体を少しコンパクトにし、下側は次の基本情報との間を
	   15〜20%詰めるため、上下ともわずかに詰めている（56px→48px／44px）。 */
	padding-top: 48px;
	padding-bottom: 44px;
}
.p-rt-intro__grid {
	display: grid;
	/* 70%:30%（指定の65〜70% / 30〜35%の範囲内） */
	grid-template-columns: 7fr 3fr;
	align-items: center;
	gap: 40px;
}
.p-rt-intro__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}
.p-rt-intro__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	color: var(--wp--preset--color--forest);
}
.p-rt-intro__icon svg {
	width: 100%;
	height: 100%;
}
.p-rt-intro__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 22px;
}
.p-rt-intro__body {
	font-size: 14px;
	line-height: 1.9;
	color: var(--wp--preset--color--ink);
}
.p-rt-intro__body p + p {
	margin-top: 1em;
}
/* 右側の自然モチーフ：情報より目立たせない、非常に薄い補助装飾 */
.p-rt-intro__visual {
	text-align: center;
}
.p-rt-intro__visual-illustration {
	width: 100%;
	max-width: 180px;
	height: auto;
}
.p-rt-intro__visual-copy {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
	opacity: 0.85;
}
@media (max-width: 768px) {
	.p-rt-intro {
		padding-top: 36px;
		padding-bottom: 32px;
	}
	.p-rt-intro__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.p-rt-intro__visual {
		max-width: 220px;
		margin-inline: auto;
	}
}

/* =========================================================
   ③ 基本情報（対象・配布先・受け取り方法・利用方法）
   カードとして囲まず、横罫線と余白を中心にした構成。
   PC 2列×2段／SP 1列。
========================================================= */
.p-rt-info {
	background: var(--wp--preset--color--base);
	padding-block: 8px 56px;
}
.p-rt-info__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 48px;
}
.p-rt-info__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-block: 20px;
}
/* 1行目（対象・配布先）の下だけに罫線を入れ、2行目の下には付けない */
.p-rt-info__item:nth-child(1),
.p-rt-info__item:nth-child(2) {
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
.p-rt-info__icon {
	display: inline-flex;
	flex-shrink: 0;
	/* 4項目の視認性を上げるため、一回り大きくしている（26px→30px） */
	width: 30px;
	height: 30px;
	margin-top: 2px;
	color: var(--wp--preset--color--forest);
}
.p-rt-info__icon svg {
	width: 100%;
	height: 100%;
}
.p-rt-info__label {
	/* 見出しの視認性を上げるため、14px→15pxにしている */
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin-bottom: 4px;
}
.p-rt-info__text {
	font-size: 13px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-soft);
}
@media (max-width: 768px) {
	.p-rt-info {
		padding-block: 8px 40px;
	}
	.p-rt-info__grid {
		grid-template-columns: 1fr;
	}
	/* SPでは4項目すべて縦積みになるため、最後（利用方法）以外すべてに罫線を入れる */
	.p-rt-info__item:nth-child(1),
	.p-rt-info__item:nth-child(2),
	.p-rt-info__item:nth-child(3) {
		border-bottom: 1px solid var(--wp--preset--color--sand);
	}
	.p-rt-info__item:nth-child(4) {
		border-bottom: none;
	}
	.p-rt-info__item {
		padding-block: 16px;
	}
}

/* =========================================================
   ④ 利用までの流れ
   PC：3カード横並び／SP：横長・コンパクトな3段ブロック
========================================================= */
.p-rt-steps {
	background: var(--wp--preset--color--base);
	padding-block: 48px 56px;
}
.p-rt-steps__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
	text-align: center;
	margin-bottom: 32px;
}
.p-rt-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
/* カードは白〜ごく薄いGreige背景＋弱い枠線のみ。強いbox-shadowは使わない */
.p-rt-steps__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 28px 20px;
	background: var(--wp--preset--color--greige);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 8px;
}
.p-rt-steps__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
	font-size: 13px;
	font-weight: 600;
}
.p-rt-steps__icon {
	display: inline-flex;
	width: 30px;
	height: 30px;
	color: var(--wp--preset--color--forest);
}
.p-rt-steps__icon svg {
	width: 100%;
	height: 100%;
}
.p-rt-steps__title {
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}
.p-rt-steps__text {
	font-size: 13px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-soft);
}
@media (max-width: 768px) {
	.p-rt-steps {
		padding-block: 36px 40px;
	}
	.p-rt-steps__heading {
		font-size: 22px;
		margin-bottom: 20px;
	}
	.p-rt-steps__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	/* SPでは縦に間延びしないよう、カードを横長・コンパクトな1段のブロックにする
	   （番号→アイコン→タイトル・説明文の順に左から並べる） */
	.p-rt-steps__card {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		gap: 12px;
		padding: 16px;
	}
	.p-rt-steps__body {
		flex: 1;
	}
	.p-rt-steps__title {
		font-size: 15px;
		margin-bottom: 2px;
	}
}

/* =========================================================
   ⑤ 配布場所
   PC：Forest Greenの見出し線＋Greige罫線中心の軽いテーブル。
   SP：施設名だけの縦型リスト。タップで住所・受付時間・備考を展開する
   （テーブルの縮小コピーではなく、PC用テーブルとSP用リストは別マークアップを
   CSSのdisplay切り替えだけで出し分けている）。
========================================================= */
.p-rt-dist {
	background: var(--wp--preset--color--base);
	padding-block: 48px 56px;
}
.p-rt-dist__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
	margin-bottom: 24px;
}
.p-rt-dist__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.p-rt-dist__table th,
.p-rt-dist__table td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
.p-rt-dist__table th {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--ink-soft);
	border-bottom: 2px solid var(--wp--preset--color--forest);
}
.p-rt-dist__table td:first-child {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}
.p-rt-dist__table td:last-child {
	color: var(--wp--preset--color--ink-soft);
}
/* SP用アコーディオンリストはPCでは非表示 */
.p-rt-dist__list {
	display: none;
}
/* ---------- Googleマップ2件（ときがわ町役場 商工観光課／GRID） ---------- */
.p-rt-dist__maps {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-top: 28px;
}
.p-rt-dist__map-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin-bottom: 10px;
}
/* 角丸はサイト全体の控えめな基準（写真等と同じ6px）に合わせる */
.p-rt-dist__map-frame {
	border-radius: 6px;
	overflow: hidden;
}
.p-rt-dist__map-frame iframe {
	display: block;
	width: 100%;
	height: 300px;
	border: 0;
}
.p-rt-dist__map-frame--placeholder {
	height: 300px;
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--sand);
}
.p-rt-dist__footnote {
	margin-top: 20px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
}
@media (max-width: 768px) {
	.p-rt-dist {
		padding-block: 36px 40px;
	}
	.p-rt-dist__heading {
		font-size: 22px;
		margin-bottom: 16px;
	}
	/* PC用テーブルは非表示にし、施設名のみのアコーディオンリストに切り替える。
	   横スクロールさせず、縦に間延びしないよう初期状態は施設名だけを見せる。 */
	.p-rt-dist__table {
		display: none;
	}
	.p-rt-dist__list {
		display: block;
	}
	.p-rt-dist__item {
		border-bottom: 1px solid var(--wp--preset--color--sand);
	}
	.p-rt-dist__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding-block: 16px;
		background: none;
		border: none;
		font-family: inherit;
		text-align: left;
		cursor: pointer;
	}
	.p-rt-dist__name {
		font-size: 15px;
		font-weight: 500;
		color: var(--wp--preset--color--ink);
	}
	.p-rt-dist__chevron {
		display: inline-flex;
		flex-shrink: 0;
		width: 18px;
		height: 18px;
		color: var(--wp--preset--color--forest);
		transition: transform 0.2s ease;
	}
	.p-rt-dist__chevron svg {
		width: 100%;
		height: 100%;
	}
	/* 開いているときはchevronを下向きに回転させる */
	.p-rt-dist__toggle[aria-expanded="true"] .p-rt-dist__chevron {
		transform: rotate(90deg);
	}
	.p-rt-dist__panel {
		padding-bottom: 16px;
	}
	.p-rt-dist__panel p {
		display: flex;
		gap: 10px;
		font-size: 13px;
		line-height: 1.8;
		color: var(--wp--preset--color--ink-soft);
		padding-block: 3px;
	}
	.p-rt-dist__label {
		flex-shrink: 0;
		width: 64px;
		color: var(--wp--preset--color--ink-soft);
	}
	/* Googleマップ2件：PCの2カラム横並びをやめ、役場→GRIDの順で1カラム縦積みにする */
	.p-rt-dist__maps {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-top: 24px;
	}
	.p-rt-dist__map-frame iframe,
	.p-rt-dist__map-frame--placeholder {
		height: 240px;
	}
}

/* =========================================================
   ⑦ よくある質問
   三波渓谷ページのFAQ（.p-sanba-faq*）と同じ方向性
   （罫線主体・box-shadowなし・質問右端に＋、クリックで展開）を、
   このページ専用に複製・調整している（既存のpage-sanba.cssは変更していない）。
========================================================= */
.p-rt-faq {
	background: var(--wp--preset--color--base-alt);
	padding-block: 48px 56px;
}
.p-rt-faq__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
	margin-bottom: 24px;
}
/* PCでは2列（3問×2列）に広げる。CSS多段組みで、1列目に前半3問・2列目に後半3問が
   自然に入る（グリッドの行合わせによる高さのズレを避けるため）。 */
.p-rt-faq__list {
	border-top: 1px solid var(--wp--preset--color--sand);
	column-count: 2;
	column-gap: 48px;
}
.p-rt-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--sand);
	break-inside: avoid;
}
.p-rt-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding-block: 16px;
	background: none;
	border: none;
	text-align: left;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.p-rt-faq__question:hover {
	color: var(--wp--preset--color--forest);
}
.p-rt-faq__toggle-icon {
	flex-shrink: 0;
	font-size: 16px;
	line-height: 1;
	color: var(--wp--preset--color--forest);
}
.p-rt-faq__answer {
	padding-bottom: 16px;
}
.p-rt-faq__answer p {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
}
@media (max-width: 768px) {
	.p-rt-faq {
		padding-block: 36px 40px;
	}
	.p-rt-faq__heading {
		font-size: 22px;
		margin-bottom: 16px;
	}
	/* SPは1列。タップしやすい高さは維持しつつ、上下余白を広げすぎない */
	.p-rt-faq__list {
		column-count: 1;
	}
	.p-rt-faq__question {
		padding-block: 14px;
	}
}

/* =========================================================
   ⑧ 戻るボタン（三波渓谷の利用案内に戻る →）
   新しい意匠は作らず、既存の共通ボタン.c-btn（白背景＋Forest Greenのアウトライン）を
   そのまま使用。お問い合わせCTA（.is-solid）より弱いサブアクションの見え方にする。
========================================================= */
.p-rt-back {
	background: var(--wp--preset--color--base-alt);
	padding-block: 40px;
}
.p-rt-back__inner {
	display: flex;
	justify-content: center;
}
@media (max-width: 768px) {
	.p-rt-back {
		padding-block: 32px;
	}
	/* 横幅100%にはせず、タップしやすいよう左右のpaddingだけ広げる
	   （.c-btn自体は変更せず、このページ内だけの上書き） */
	.p-rt-back .c-btn {
		padding-inline: 36px;
	}
}