@charset "utf-8";

/* ============================================
   越中とやま食の王国について（/about/）2026リニューアル
   TOYAMA FOOD GUIDE ― サイトの目的と主な機能を紹介する導入ページ
   構成: クライアント提示「レイアウト（案）」（2026-09-02）
============================================ */

.p-about2026 {
	--ab-green: var(--t-green, #104533);
	--ab-green-light: var(--t-green-light, #eef4f0);
	--ab-text: var(--t-text, #333);
	--ab-sub: #666;
	--ab-border: var(--t-border, #dcdcdc);

	color: var(--ab-text);
	background: #fff;
	overflow-x: hidden;
	line-height: 1.9;
}

.p-about2026 img {
	max-width: 100%;
	height: auto;
}

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

.p-about2026 figure {
	margin: 0;
}

/* ヒーローはトップページと共用（parts/top_hero.php・hero2026.css）。
   ページタイトルもヒーローの緑のボックスの中にある */

/* --------------------------------------------
   セクション共通
-------------------------------------------- */
.abMain {
	display: block;
}

.abSec {
	padding: 64px 0;
}

.abSec-site {
	background: var(--ab-green-light);
}

.abSec-policy {
	padding: 48px 0 72px;
	border-top: 1px solid var(--ab-border);
}

/* 見出し: トップの主要コンテンツ見出しと同じ山アイコン＋緑の明朝 */
.abSec_ttl {
	margin: 0 0 40px;
	font-size: inherit;
	line-height: 1.4;
	text-align: center;
	color: var(--ab-green);
}

.abSec_icon {
	display: block;
	width: 56px;
	height: 26px;
	margin: 0 auto 12px;
	background: url(../img/top/main_content_ttl_icon.svg) center / contain no-repeat;
}

.abSec_ttl > b {
	display: block;
	font-size: 32px;
	letter-spacing: .08em;
}

.abSec_ttl > small {
	display: block;
	margin-top: 8px;
	font-size: 17px;
	letter-spacing: .06em;
}

.abSec_ttl-sm {
	margin-bottom: 20px;
}

.abSec_ttl-sm > b {
	font-size: 24px;
}

/* 画像＋本文の2カラム */
.abRow {
	display: flex;
	align-items: center;
	gap: 48px;
}

.abRow-reverse {
	flex-direction: row-reverse;
}

.abRow_img {
	flex: 0 0 50%;
	max-width: 50%;
}

/* ほぼ正方形の画像（山から海へのイラスト）。横長写真と同じ50%幅だと縦に大きくなりすぎるため幅を抑える */
.abRow_img-tall {
	flex-basis: 42%;
	max-width: 42%;
}

.abRow_img img {
	display: block;
	width: 100%;
	border-radius: 8px;
	box-shadow: 0 4px 18px rgba(0, 30, 20, .12);
}

.abRow_body {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	line-height: 2.1;
	letter-spacing: .03em;
}

.abRow_body p {
	margin: 0 0 1.2em;
}

.abRow_body p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------
   主なコンテンツ（各ページへ誘導する）
-------------------------------------------- */
.abGuide {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.abGuide_link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 30px 20px 26px;
	border: 1px solid var(--ab-border);
	border-radius: 8px;
	background: #fff;
	color: var(--ab-text);
	text-align: center;
	text-decoration: none;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}

.abGuide_link:hover {
	transform: translateY(-3px);
	border-color: var(--ab-green);
	box-shadow: 0 6px 18px rgba(0, 30, 20, .12);
}

.abGuide_icon {
	display: block;
	width: 93px;
	height: 93px;
	margin-bottom: 14px;
}

.abGuide_icon img,
.abGuide_icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* 「〜が知りたい」→ ページ名 */
.abGuide_q {
	display: block;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--ab-border);
	width: 100%;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ab-sub);
}

.abGuide_name {
	display: block;
	font-size: 22px;
	line-height: 1.4;
	letter-spacing: .06em;
	color: var(--ab-green);
}

.abGuide_name .icon-blank {
	margin-left: .3em;
	font-size: .7em;
}

.abGuide_note {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--ab-sub);
}

.abGuide_more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 14px;
	font-size: 13px;
	color: var(--ab-green);
}

/* --------------------------------------------
   各種規定・免責事項
-------------------------------------------- */
.abPolicy_text {
	margin: 0 0 20px;
	text-align: center;
	font-size: 15px;
}

.abPolicy_btn {
	margin: 0;
	text-align: center;
}

/* 丸ボタン（トップの .tBtn と同じトーン） */
.abBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 240px;
	padding: 14px 32px;
	border: 1px solid var(--ab-green);
	border-radius: 999px;
	background: var(--ab-green);
	color: #fff;
	font-size: 15px;
	letter-spacing: .06em;
	text-decoration: none;
	transition: background .2s, color .2s;
}

.abBtn:hover {
	background: #fff;
	color: var(--ab-green);
}

/* --------------------------------------------
   タブレット
-------------------------------------------- */
@media screen and (max-width: 1023px) {
	.abRow {
		gap: 32px;
	}

	.abGuide {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
}

/* --------------------------------------------
   スマートフォン
-------------------------------------------- */
@media screen and (max-width: 767px) {
	.abSec {
		padding: 40px 0;
	}

	.abSec-policy {
		padding: 36px 0 48px;
	}

	.abSec_ttl {
		margin-bottom: 26px;
	}

	.abSec_ttl > b {
		font-size: 23px;
		letter-spacing: .04em;
	}

	.abSec_ttl > small {
		font-size: 14px;
	}

	.abSec_ttl-sm > b {
		font-size: 20px;
	}

	.abRow,
	.abRow-reverse {
		flex-direction: column;
		gap: 20px;
	}

	.abRow_img {
		flex-basis: auto;
		max-width: none;
		width: 100%;
	}

	.abRow_body {
		font-size: 15px;
		line-height: 2;
	}

	.abGuide {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* SPは横並びのリスト状にして高さを抑える */
	.abGuide_link {
		display: grid;
		grid-template-columns: 64px 1fr;
		grid-template-areas:
			"icon q"
			"icon name"
			"icon note"
			"icon more";
		align-items: center;
		column-gap: 16px;
		padding: 16px 18px;
		text-align: left;
	}

	.abGuide_icon {
		grid-area: icon;
		width: 64px;
		height: 64px;
		margin: 0;
	}

	.abGuide_q {
		grid-area: q;
		margin-bottom: 4px;
		padding-bottom: 4px;
		font-size: 13px;
	}

	.abGuide_name {
		grid-area: name;
		font-size: 19px;
	}

	.abGuide_note {
		grid-area: note;
	}

	.abGuide_more {
		grid-area: more;
		padding-top: 4px;
		font-size: 12px;
	}

	.abPolicy_text {
		text-align: left;
		font-size: 14px;
	}

	.abBtn {
		width: 100%;
		min-width: 0;
	}
}