/* サイト全体デザイン(note.com風:ミニマル・グリーン差し色)
 * Cocoon Childのfunctions.phpからenqueueして読み込む
 */

:root {
	--tomenavi-bg: #f7f7f7;
	--tomenavi-surface: #ffffff;
	--tomenavi-text: #222222;
	--tomenavi-text-light: #767676;
	--tomenavi-accent: #2bb673;
	--tomenavi-accent-dark: #1f9660;
	--tomenavi-secondary: #1f9660;
	--tomenavi-border: #ededed;
	--tomenavi-highlight-bg: #f5f5f5;
}

/* コンテンツのフォント:Meiryoを優先 */
body {
	font-family: Meiryo, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Noto Sans JP", sans-serif;
}

/* ヘッダー右側:エリア/目的バナーの切り替えリンク */
#header-in {
	position: relative;
}

.tomenavi-header-toggle {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	gap: 1.2em;
}

.tomenavi-header-toggle-link {
	font-size: 0.9em;
	font-weight: 700;
	color: var(--tomenavi-text-light);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.tomenavi-header-toggle-link:hover {
	color: var(--tomenavi-accent-dark);
}

.tomenavi-header-toggle-link.is-active {
	color: var(--tomenavi-accent-dark);
	border-bottom-color: var(--tomenavi-accent);
}

@media (max-width: 600px) {
	.tomenavi-header-toggle {
		position: static;
		transform: none;
		justify-content: center;
		margin-top: 0.5em;
		gap: 1em;
	}
}

/* トップページ:目的から探すバナーは初期状態で非表示(JSでエリアバナーと排他表示) */
#purpose-banner {
	display: none;
}

/* PC幅(Cocoon本体がレイアウトを固定幅にする1256px以上)の時だけ適用 */
@media (min-width: 1256px) {
	.wrap {
		width: 1140px;
	}

	.sidebar {
		width: 260px;
	}
}

/* 本文とサイドバーを横並び(2カラム)にはせず、常にサイドバーを本文の下に縦積みする。
 * サイドバーが左右どちらの設定でも本文が片側に寄って見える問題を避けるため。
 * 記事ページで画面が十分広い場合のみ、下の @media (min-width: 1340px) で3カラム表示に切り替える。
 */
.content-in {
	display: block;
}

.main,
.sidebar {
	width: 100%;
	margin: 10px 0;
}

/* サイトタイトルとコンテンツの間隔を詰める */
.content {
	margin-top: 0;
}

.main {
	padding-top: 12px;
}

.sidebar {
	padding-left: 0;
}

/* 縦積みになった時、サイドバーの幅が本文と同じ(最大幅)になり広すぎるため、
 * 画面幅にかかわらず常に狭め、中央に表示する
 */
.sidebar {
	max-width: 400px;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 本文を左に余白カラムを置いた3カラムにし、ブラウザ中央に表示する(記事ページ・トップページ・一覧ページ共通)
 * 3カラムの合計幅(260+16+768+16+260=1320px)より画面が狭いと崩れるため、
 * 実際に必要な幅より少し余裕を持たせた1340px以上の場合のみ適用する
 * (画面解像度1366px前後のノートPCでもスクロールバー分を差し引いて横並びになるよう設定。
 * 本文カラムを広げるため、サイドバー幅を300pxから260pxに戻して合計幅を維持している)
 */
@media (min-width: 1340px) {
	.content-in {
		display: grid;
		grid-template-columns: 260px 768px 260px;
		column-gap: 16px;
		justify-content: center;
		width: 100%;
		max-width: none;
	}

	.main {
		grid-column: 2;
		grid-row: 1;
	}

	.sidebar {
		grid-column: 3;
		grid-row: 1;
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}

	/* Cocoonの「サイドバー位置」設定を左にした場合は本文とサイドバーを入れ替える */
	.sidebar-left .sidebar {
		grid-column: 1;
	}

	.sidebar-left .main {
		grid-column: 2;
	}

	/* サイドバーが横並び表示になる幅では、エリア/目的一覧の記事名と件数の間隔を広くする */
	.tomenavi-taxonomy-count {
		margin-left: 1em;
	}
}

body {
	background-color: var(--tomenavi-surface) !important;
	color: var(--tomenavi-text);
	line-height: 1.9;
}

a {
	color: var(--tomenavi-accent);
}

#sidebar {
	line-height: 1.5;
}

#sidebar li {
	margin-bottom: 1.1em;
	padding-bottom: 0.6em;
}

/* PC幅ではスマートフォンより少し間隔を詰める(スマートフォンは上記のまま) */
@media (min-width: 601px) {
	#sidebar {
		font-size: 0.9em;
	}

	#sidebar li {
		margin-bottom: 0.6em;
		padding-bottom: 0.4em;
	}
}

a:hover {
	color: var(--tomenavi-accent-dark);
}

/* 固定ページの記事下部にある「ホーム」パンくずを非表示にする */
.breadcrumb-page.pbp-main-bottom {
	display: none;
}

/* サイトヘッダー */
#top-container,
#header-container {
	background-color: var(--tomenavi-surface);
	border-bottom: 1px solid var(--tomenavi-border);
}

/* サイトフッター */
#footer-container,
#footer {
	background-color: var(--tomenavi-surface);
}

#header-in .site-name a,
#header-in .site-title a,
#header-in .site-name,
#header-in .site-title {
	color: var(--tomenavi-text);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Cocoon標準はロゴを中央寄せにするため、左寄せに上書きする */
#header-in .logo {
	text-align: left;
}

#header-in .site-description {
	color: var(--tomenavi-text-light);
}

.logo-text {
	padding: 0;
}

/* スマートフォン幅ではヘッダーロゴ画像を少し小さくする(PCはthe_site_logo_widthの160pxのまま) */
@media (max-width: 600px) {
	.header-site-logo-image {
		width: 110px;
		height: auto;
	}
}

/* グローバルナビゲーション */
#navi {
	background-color: var(--tomenavi-surface);
	border-bottom: none;
}

#navi .menu-top > li > a {
	color: var(--tomenavi-text);
}

#navi .menu-top > li:hover > a,
#navi .menu-top > li.current > a,
#navi .menu-top > li.current-menu-item > a {
	color: var(--tomenavi-accent);
	background-color: transparent;
}

/* コンテンツエリア */
#content,
#content-in,
.article {
	background-color: var(--tomenavi-surface);
}

.article,
.entry-card {
	border-radius: 12px;
}

.article h2,
.entry-content h2 {
	color: var(--tomenavi-text);
	border-bottom: none;
	padding-bottom: 0.4em;
	font-weight: 700;
}

.article h3,
.entry-content h3 {
	color: var(--tomenavi-text);
	font-weight: 700;
}

.entry-content p,
.parking-body p,
.parking-discount p {
	line-height: 2.2;
	font-size: 0.95em;
	margin-bottom: 1.5em;
}

/* 記事カード(トップページ・アーカイブの通常投稿カード)
 * エリア/目的一覧の .parking-card と同じ見た目に統一
 */
#list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	justify-content: center;
	gap: 1.5em;
}

/* 本文(768px)とサイドバーが横並びになる幅では、トップページのカードを3列固定にする
 * (本文が狭くなる分、4列だと1枚あたりが窮屈になるため3列にしている)
 * (このルールは上の#list定義より後ろに置く必要がある。CSSは同じ詳細度なら
 * 後に書かれた方が勝つため、メディアクエリの中にあっても前に書くと上書きされてしまう)
 */
@media (min-width: 1340px) {
	#list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* スマートフォン幅ではカードを2カラムにする */
@media (max-width: 600px) {
	#list {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.8em;
	}
}

#list .entry-card-wrap {
	margin: 0;
	width: auto;
}

.entry-card {
	display: block !important;
	border: none;
	border-radius: 12px;
	overflow: hidden;
	background-color: var(--tomenavi-surface);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	height: 100%;
}

.entry-card:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.entry-card-link {
	display: flex !important;
	flex-direction: column !important;
}

.entry-card-thumb {
	display: block !important;
	float: none !important;
	width: 100% !important;
	height: 130px;
	margin: 0;
}

.entry-card-thumb-image {
	width: 100%;
	height: 130px;
	object-fit: cover;
	display: block;
}

.entry-card-body {
	width: 100% !important;
	float: none !important;
}

.entry-card-link {
	color: inherit;
	text-decoration: none;
}

.entry-card-body {
	padding: 0.8em 1em;
}

.entry-card-fee {
	margin: 0.3em 0 0;
	font-size: 0.82em;
	font-weight: bold;
	color: var(--tomenavi-text);
}

.entry-card-title {
	margin: 0 0 0.4em;
	color: var(--tomenavi-text);
	font-size: 0.92em;
	font-weight: 700;
	line-height: 1.4;
}

.entry-card-snippet {
	display: block !important;
	margin: 0 0 0.3em;
	color: var(--tomenavi-text-light);
	font-size: 0.78em;
}

@media screen and (max-width: 780px) {
	.entry-card-snippet,
	.entry-card-fee {
		display: block !important;
	}
}

/* ボタン(Cocoon共通ボタン) */
.btn,
.sim-btn {
	border-radius: 999px;
}

/* ウィジェットタイトル */
.widget-title {
	color: var(--tomenavi-text);
	border-left: none !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
	text-indent: 0 !important;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.widget-title::before {
	content: none !important;
}

.widget-title {
	margin-bottom: 0.3em !important;
}

.widget-title + * {
	margin-top: 0 !important;
}

/* トップページ:エリアバナー */
.tomenavi-area-banner {
	padding: 0 0 1.6em;
	margin-bottom: 1.5em;
	border-bottom: 1px solid var(--tomenavi-border);
}

.tomenavi-area-banner-title {
	font-size: 1.05em;
	font-weight: 700;
	margin: 0 0 0.25em;
}

.tomenavi-area-banner-desc {
	margin: 0 0 1em;
	font-size: 0.85em;
	color: var(--tomenavi-text-light);
}

.tomenavi-area-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.9em;
}

@media (max-width: 600px) {
	.tomenavi-area-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.tomenavi-area-card {
	display: block;
	border-radius: 12px;
	padding: 1.1em 0.9em 0.9em;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.tomenavi-area-card:hover {
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.tomenavi-area-icon {
	width: 38px;
	height: 38px;
	margin-bottom: 0.6em;
}

.tomenavi-area-name {
	font-size: 0.98em;
	font-weight: 700;
	margin: 0 0 0.25em;
	line-height: 1.3;
}

.tomenavi-area-sub {
	font-size: 0.74em;
	color: var(--tomenavi-text-light);
	margin: 0;
	line-height: 1.5;
}

/* トップページ:目的から探すバナー(エリアバナーと同じ見た目、5枚グリッド) */
.tomenavi-purpose-banner {
	padding: 0 0 1.6em;
	margin-bottom: 1.5em;
	border-bottom: 1px solid var(--tomenavi-border);
}

.tomenavi-purpose-banner-title {
	font-size: 1.05em;
	font-weight: 700;
	margin: 0 0 0.25em;
}

.tomenavi-purpose-banner-desc {
	margin: 0 0 1em;
	font-size: 0.85em;
	color: var(--tomenavi-text-light);
}

.tomenavi-purpose-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.9em;
}

@media (max-width: 600px) {
	.tomenavi-purpose-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.tomenavi-purpose-card {
	display: block;
	border-radius: 12px;
	padding: 1.1em 0.9em 0.9em;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.tomenavi-purpose-card:hover {
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.tomenavi-purpose-icon {
	width: 38px;
	height: 38px;
	margin-bottom: 0.6em;
}

.tomenavi-purpose-name {
	font-size: 0.98em;
	font-weight: 700;
	margin: 0 0 0.25em;
	line-height: 1.3;
}

.tomenavi-purpose-sub {
	font-size: 0.74em;
	color: var(--tomenavi-text-light);
	margin: 0;
	line-height: 1.5;
}