@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ============================================================
   駅ガイド（single-station.php）専用スタイル
   ※ SWELLの変数（--swl-color_*）を活用し、独自クラス（station-guide__*）
      のみに限定してテーマ本体のクラスを壊さないようにする
   ============================================================ */
.station-guide__inner {
	max-width: 880px;
	margin: 0 auto;
	padding: 2em 1em 4em;
}

/* ① タイトル / ② バッジ */
.station-guide__title {
	font-size: clamp(1.5rem, 4vw, 2.2rem);
	line-height: 1.4;
	margin-bottom: .4em;
}
.station-guide__subtitle {
	display: flex;
	flex-wrap: wrap;
	gap: .8em;
	align-items: center;
	color: var(--swl-color_text_thin, #555);
	font-size: .95rem;
	margin-bottom: .8em;
}
.station-guide__kana::before { content: "（"; }
.station-guide__kana::after  { content: "）"; }
.station-guide__badge {
	display: inline-block;
	background: var(--swl-color_main, #1e88e5);
	color: #fff;
	font-size: .8rem;
	padding: .3em .9em;
	border-radius: 999px;
}

/* ③ 目次 */
.station-guide__toc {
	background: var(--swl-color_bg_thin, #f6f7f9);
	border: 1px solid var(--swl-color_border, #e3e6ea);
	border-radius: 8px;
	padding: 1.2em 1.5em;
	margin: 1.6em 0;
}
.station-guide__toc-title {
	font-weight: 700;
	margin-bottom: .5em;
}
.station-guide__toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .4em;
}
.station-guide__toc a {
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}

/* ④ カルーセル プレースホルダ */
.station-guide__carousel-placeholder {
	border: 2px dashed var(--swl-color_border, #cfd4da);
	border-radius: 8px;
	padding: 2.4em 1em;
	text-align: center;
	color: var(--swl-color_text_thin, #777);
	margin: 1.6em 0;
}

/* セクション共通 */
.station-guide__section { margin: 2.8em 0; }
.station-guide__h2 {
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	border-left: 5px solid var(--swl-color_main, #1e88e5);
	padding-left: .6em;
	margin-bottom: .9em;
}
.station-guide__h3 {
	font-size: 1.1rem;
	margin: 1.4em 0 .5em;
}
.station-guide__text { line-height: 1.9; }
.station-guide__source {
	font-size: .82rem;
	color: var(--swl-color_text_thin, #777);
	margin-top: .8em;
	word-break: break-all;
}

/* ⑤ タグ */
.station-guide__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	padding: 0;
	margin: 0 0 1.2em;
}
.station-guide__tag {
	background: var(--swl-color_bg_thin, #eef3fb);
	color: var(--swl-color_main, #1e88e5);
	border-radius: 999px;
	padding: .3em 1em;
	font-size: .85rem;
}

/* ⑥ 路線 */
.station-guide__lines {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
	margin-bottom: 1.2em;
}
.station-guide__lines-label { font-weight: 700; }
.station-guide__line {
	background: var(--swl-color_bg_thin, #f0f2f5);
	border-radius: 4px;
	padding: .25em .7em;
	font-size: .85rem;
}

/* ⑦⑧ テーブル */
.station-guide__table-wrap { overflow-x: auto; }
.station-guide__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}
.station-guide__table th,
.station-guide__table td {
	border: 1px solid var(--swl-color_border, #e3e6ea);
	padding: .6em .8em;
	text-align: left;
}
.station-guide__table thead th {
	background: var(--swl-color_bg_thin, #f6f7f9);
	white-space: nowrap;
}

/* ⑨ 相場グラフ */
.station-guide__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin-bottom: 1em;
}
.station-guide__tab {
	border: 1px solid var(--swl-color_main, #1e88e5);
	background: #fff;
	color: var(--swl-color_main, #1e88e5);
	border-radius: 6px;
	padding: .5em 1.1em;
	cursor: pointer;
	font-size: .9rem;
}
.station-guide__tab.is-active {
	background: var(--swl-color_main, #1e88e5);
	color: #fff;
}
.station-guide__chart-wrap {
	position: relative;
	height: 320px;
}

/* 準備中プレースホルダ（空セクション共通） */
.station-guide__placeholder {
	background: var(--swl-color_bg_thin, #f6f7f9);
	border: 1px dashed var(--swl-color_border, #cfd4da);
	border-radius: 8px;
	padding: 1.6em 1em;
	text-align: center;
	color: var(--swl-color_text_thin, #888);
	font-size: .92rem;
}

/* ⑦ バス便（テーブルは共通スタイルを流用） */

/* ⑨ ハザード */
.station-guide__hazards {
	display: grid;
	gap: .9em;
}
.station-guide__hazard {
	border: 1px solid var(--swl-color_border, #e3e6ea);
	border-radius: 8px;
	padding: .9em 1.1em;
}
.station-guide__hazard-name {
	font-weight: 700;
	margin-right: .6em;
}
.station-guide__hazard-badge {
	display: inline-block;
	font-size: .8rem;
	padding: .2em .8em;
	border-radius: 999px;
	color: #fff;
	vertical-align: middle;
}
.station-guide__hazard-badge.is-green  { background: #43a047; }
.station-guide__hazard-badge.is-yellow { background: #f9a825; }
.station-guide__hazard-badge.is-red    { background: #e53935; }
.station-guide__hazard-badge.is-none   { background: #9e9e9e; }
.station-guide__hazard-note {
	margin: .6em 0 .2em;
	line-height: 1.8;
}
.station-guide__hazard-map a {
	font-size: .85rem;
}
.station-guide__note-disclaimer {
	margin-top: 1em;
	font-size: .82rem;
	color: var(--swl-color_text_thin, #777);
	background: #fff8e1;
	border-left: 3px solid #f9a825;
	padding: .7em 1em;
	border-radius: 4px;
	line-height: 1.8;
}

/* ⑩ 著者・関連記事 */
.station-guide__author {
	display: flex;
	gap: 1em;
	align-items: flex-start;
	background: var(--swl-color_bg_thin, #f6f7f9);
	border-radius: 8px;
	padding: 1.2em;
	margin-bottom: 1.4em;
}
.station-guide__author-avatar {
	border-radius: 50%;
	flex-shrink: 0;
}
.station-guide__author-name {
	font-weight: 700;
	margin-bottom: .3em;
}
.station-guide__author-bio {
	font-size: .9rem;
	line-height: 1.8;
	color: var(--swl-color_text_thin, #555);
}
.station-guide__related {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}
.station-guide__related li a {
	display: inline-block;
	background: var(--swl-color_bg_thin, #eef3fb);
	color: var(--swl-color_main, #1e88e5);
	border-radius: 4px;
	padding: .3em .9em;
	font-size: .88rem;
	text-decoration: none;
}


/* ============================================================
   相談導線 CTA（→ 公式LINE）
   ============================================================ */
.station-guide__cta {
	background: linear-gradient( 135deg, #f0fbf3, #e6f7ec );
	border: 1px solid #cbe9d5;
	border-radius: 12px;
	padding: 1.6em 1.4em;
	text-align: center;
	margin: 2.4em 0;
}
.station-guide__cta-lead {
	font-size: clamp( 1rem, 2.6vw, 1.2rem );
	font-weight: 700;
	color: #1f2d3a;
	margin: 0 0 1em;
	line-height: 1.6;
}
.station-guide__cta-btn {
	display: inline-block;
	background: #06c755; /* LINEブランドカラー */
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
	padding: .9em 2em;
	font-size: 1.02rem;
	box-shadow: 0 4px 12px rgba(6,199,85,.3);
	transition: background .15s, transform .15s;
}
.station-guide__cta-btn:hover {
	background: #05b34c;
	transform: translateY(-1px);
}
.station-guide__cta-icon {
	background: #fff;
	color: #06c755;
	font-weight: 800;
	font-size: .8em;
	border-radius: 5px;
	padding: .1em .5em;
	margin-right: .5em;
	letter-spacing: .02em;
}

/* ============================================================
   ★この街の要点（上部サマリー：相場・安全度）
   ============================================================ */
.station-guide__summary {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 1.4em 0 1.8em;
}
.station-guide__summary-item {
	display: flex;
	flex-direction: column;
	gap: .5em;
	background: var(--swl-color_bg_thin, #f6f8fb);
	border: 1px solid var(--swl-color_border, #e3e6ea);
	border-radius: 10px;
	padding: 1em 1.2em;
	text-decoration: none;
	color: inherit;
}
.station-guide__summary-item--link { position: relative; }
.station-guide__summary-item--link::after {
	content: "詳しく ▾";
	position: absolute;
	right: 1em;
	bottom: .8em;
	font-size: .72rem;
	color: var(--swl-color_main, #1e88e5);
}
.station-guide__summary-label {
	font-size: .82rem;
	color: var(--swl-color_text_thin, #6a7684);
	font-weight: 700;
}
.station-guide__summary-value {
	font-size: clamp(1.3rem, 4vw, 1.8rem);
	font-weight: 800;
	color: #1f2d3a;
	line-height: 1.2;
}
.station-guide__summary-unit {
	font-size: .6em;
	font-weight: 700;
	margin-left: .2em;
}
.station-guide__summary-value--empty {
	font-size: 1rem;
	font-weight: 400;
	color: var(--swl-color_text_thin, #999);
}
@media ( max-width: 480px ) {
	.station-guide__summary { grid-template-columns: 1fr; }
}

/* ============================================================
   CTA モバイル最適化（親指で押しやすく）
   ============================================================ */
@media ( max-width: 600px ) {
	.station-guide__cta { padding: 1.4em 1em; }
	.station-guide__cta-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 52px;
		font-size: 1.08rem;
		padding: .9em 1.2em;
	}
	/* 矢印を付けて「押せる」ことを強調 */
	.station-guide__cta-btn::after {
		content: "›";
		margin-left: .5em;
		font-weight: 800;
	}
}

/* ============================================================
   モバイル固定CTAバー（スマホのみ・少しスクロールで出現）
   ============================================================ */
.station-guide__sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	padding: 8px 12px calc( 8px + env( safe-area-inset-bottom, 0px ) );
	background: rgba( 255, 255, 255, .96 );
	box-shadow: 0 -2px 12px rgba( 0, 0, 0, .12 );
	/* 初期は隠す。is-visible で下からスライドイン */
	transform: translateY( 110% );
	opacity: 0;
	transition: transform .25s ease, opacity .25s ease;
	pointer-events: none;
}
.station-guide__sticky-cta.is-visible {
	transform: translateY( 0 );
	opacity: 1;
	pointer-events: auto;
}
.station-guide__sticky-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	background: #06c755; /* 既存CTAと同じLINE緑 */
	color: #fff;
	font-weight: 700;
	font-size: 1.02rem;
	text-decoration: none;
	border-radius: 999px;
	box-shadow: 0 3px 10px rgba( 6, 199, 85, .35 );
}
/* スペーサー：バーの高さぶんを確保（モバイルのみ） */
.station-guide__sticky-spacer {
	display: none;
	height: 72px;
}
@media ( max-width: 767px ) {
	.station-guide__sticky-spacer { display: block; }
}
/* PCでは固定バーもスペーサーも出さない */
@media ( min-width: 768px ) {
	.station-guide__sticky-cta { display: none !important; }
}