/*
Theme Name: hakoa Child
Theme URI: https://event.hakoa.jp/
Description: Arkhe（アルケー）の子テーマ。event.hakoa.jp（広島イベント協会）用。カスタマイズはここに集約する。
Author: STUDIO Tachimachi
Template: arkhe
Version: 1.2.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hakoa-child
*/

/* =========================================================
   設計方針（このファイルの読み方）
   ---------------------------------------------------------
   Arkhe は独自の CSS 変数（--ark-*）でカラー・書体・レイアウトを
   一括管理している（classes/Style.php が管理画面の設定値から
   :root{...} を動的生成し、親テーマの main.css より後、かつ子テーマ
   より前に出力される）。

   したがって：
   1. サイト全体のブランドカラー・書体は --ark-* 変数を上書きする
      だけで、Arkhe 標準の見出し・リンク・テーブル・引用・ボタン
      （Gutenbergブロック含む）に自動的に反映される。ここを
      .entry-content のような独自クラスで再実装しない。
   2. Arkhe に無い概念（募集ステータス・ジャンル色・申込ブロック等）
      だけを、このサイト独自のコンポーネントとして追加する。
   3. 独自コンポーネントは .l-container / #main_content の内側に
      差し込む前提で書き、幅・余白を再定義しない
      （.wrap 的な自前ラッパーは持たない）。
   4. 写真が無い前提のため、画像枠は Canvas/JS を使わず
      CSS グラデーションのみで表現する（第三者JSライブラリなし）。
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Archivo+Black&family=Outfit:wght@500;600;700&display=swap');

/* =========================================================
   1. Arkhe 変数の上書き（サイト全体のブランドカラー・書体）
   ========================================================= */
:root {
	/* --- Arkhe 標準変数：見出し・リンク・テーブル・ボタン等に自動反映される --- */
	--ark-color--main:   #116466; /* ボタン・強調要素の背景（瀬戸内パレット：深ティール） */
	--ark-color--text:   #14201F;
	--ark-color--link:   #116466;
	--ark-color--bg:     #FFFFFF;
	--ark-color--gray:   #5C6A68;
	--ark-color--border: #E2E7E5;
	--ark-color--border--table: #E2E7E5;

	--ark-color--header_bg:  #FFFFFF;
	--ark-color--header_txt: #14201F;
	--ark-color--footer_bg:  #FFFFFF;
	--ark-color--footer_txt: #5C6A68;

	--ark-font_family: "Noto Sans JP", -apple-system, "Hiragino Sans", Meiryo, sans-serif;

	/* --- ここから hakoa-event 独自トークン（Arkhe に対応物が無いもの） --- */
	--hakoa-band:        #EDEFE6; /* お知らせ等、淡色の帯 */
	--hakoa-surface-alt: #F4F6F5;
	--hakoa-ink:         #14201F;
	--hakoa-ink-mute:    #5C6A68;
	--hakoa-ink-faint:   #97A3A1;
	--hakoa-line:        #E2E7E5;
	--hakoa-line-strong: #14201F;
	--hakoa-accent:      #116466;
	--hakoa-accent-soft: #DCEAE8;
	--hakoa-accent-ink:  #FFFFFF;
	--hakoa-accent2:     #E8B33C; /* レモン。CTA・締切間近バッジ等の第2アクセント */
	--hakoa-accent2-ink: #3A2A05;

	--hakoa-font-display: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	--hakoa-font-eyebrow: "Archivo Black", "Zen Kaku Gothic New", sans-serif;
	--hakoa-font-num:     "Outfit", "Noto Sans JP", sans-serif;

	/* ジャンル色（写真が無い間、画像枠を埋めるCSSグラデーション用） */
	--hakoa-g-handmade-a: #E7D3DC; --hakoa-g-handmade-b: #C97C99;
	--hakoa-g-food-a:     #EAD3C3; --hakoa-g-food-b:     #BE7A4E;
	--hakoa-g-marche-a:   #D3E2D6; --hakoa-g-marche-b:   #5E9A72;
	--hakoa-g-flea-a:     #D2E0E7; --hakoa-g-flea-b:     #4E85AC;
	--hakoa-g-stage-a:    #DCD3E4; --hakoa-g-stage-b:    #8462AC;
	--hakoa-g-other-a:    #EAE3CE; --hakoa-g-other-b:    #B99A4E;

	/* 募集ステータス（意味色。アクセントとは独立させる） */
	--hakoa-st-open-bg:   #DCF1E5; --hakoa-st-open-ink:   #146834;
	--hakoa-st-soon-bg:   #FBE9CE; --hakoa-st-soon-ink:   #8A4C0F;
	--hakoa-st-closed-bg: #E9EBEA; --hakoa-st-closed-ink: #4B5451;
}

/* =========================================================
   2. 投稿本文（.c-postContent）への補足のみ
   ---------------------------------------------------------
   見出し・段落・リスト・引用・表・ボタンの基本形は Arkhe 本体が
   持っているため再実装しない。ここでは hakoa 独自のニュアンスだけ足す。
   ========================================================= */
.c-postContent strong {
	background: linear-gradient(transparent 62%, var(--hakoa-accent2) 62%, var(--hakoa-accent2) 92%, transparent 92%);
}
.c-postContent figcaption {
	font-size: .8em;
	color: var(--hakoa-ink-faint);
	text-align: center;
	margin-top: .5em;
}
.c-postContent .hakoa-table-scroll {
	overflow-x: auto;
}

/* =========================================================
   3. 数字組版の共通クラス
   ========================================================= */
.hakoa-num {
	font-family: var(--hakoa-font-num);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* =========================================================
   4. セクション見出し（EN.【和文】の型）
   ========================================================= */
.hakoa-mark {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .9rem;
	margin-bottom: .5rem;
}
.hakoa-mark__en {
	font-family: var(--hakoa-font-eyebrow);
	font-size: clamp(24px, 3.6vw, 38px);
	letter-spacing: .04em;
	line-height: 1;
	color: var(--hakoa-ink);
}
.hakoa-mark__jp {
	font-size: .8rem;
	font-weight: 500;
	color: var(--hakoa-ink-mute);
	letter-spacing: .08em;
	white-space: nowrap;
}
.hakoa-mark__jp::before { content: "【"; }
.hakoa-mark__jp::after  { content: "】"; }
.hakoa-sec__lead {
	text-align: center;
	font-size: .85rem;
	color: var(--hakoa-ink-mute);
	margin-bottom: 2.8rem;
}

/* =========================================================
   5. 検索・絞り込みバー
   ========================================================= */
.hakoa-finder-band {
	background: var(--hakoa-surface-alt);
	padding: 1.8rem 0;
	border-bottom: 1px solid var(--hakoa-line);
}
.hakoa-finder {
	background: #ffffff;
	border: 1px solid var(--hakoa-line);
	border-radius: 10px;
	padding: 1.4rem 1.6rem;
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 1.1rem;
	align-items: end;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}
.hakoa-finder__field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.hakoa-finder__field > span {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--hakoa-ink-mute);
}
.hakoa-finder__field select {
	font: inherit;
	font-size: .92rem;
	color: var(--hakoa-ink);
	background: #fff;
	border: 1px solid var(--hakoa-line);
	border-radius: 6px;
	padding: .7rem .85rem;
	width: 100%;
	transition: border-color .2s ease;
}
.hakoa-finder__field select:focus {
	border-color: var(--hakoa-accent);
	outline: none;
}
.hakoa-finder__submit {
	font: inherit;
	font-weight: 700;
	font-size: .92rem;
	background: var(--hakoa-accent);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: .75rem 2rem;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 0 3px 10px rgba(15, 76, 58, 0.2);
	transition: background-color .2s ease, transform .2s ease;
}
.hakoa-finder__submit:hover {
	background: var(--hakoa-accent-hover, #0A372A);
	transform: translateY(-1px);
}
.hakoa-finder__toggles {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .8rem;
	padding-top: .4rem;
	border-top: 1px dashed var(--hakoa-line);
}
.hakoa-toggle {
	font: inherit;
	font-size: .78rem;
	border: 1px solid var(--hakoa-line);
	background: #fff;
	color: var(--hakoa-ink-mute);
	border-radius: 100px;
	padding: .35rem 1rem;
	cursor: pointer;
	transition: all .2s ease;
}
.hakoa-toggle:hover {
	border-color: var(--hakoa-accent);
}
.hakoa-toggle[aria-pressed="true"] {
	background: var(--hakoa-accent);
	border-color: var(--hakoa-accent);
	color: #fff;
	font-weight: 700;
}
.hakoa-finder__reset {
	font-size: .78rem;
	color: var(--hakoa-ink-faint);
	text-decoration: underline;
	margin-left: auto;
	transition: color .2s ease;
}
.hakoa-finder__reset:hover {
	color: var(--hakoa-accent);
}

/* =========================================================
   6. 写真の席（CSSグラデーションのみ。Canvas/JS不要）
   ---------------------------------------------------------
   has_post_thumbnail() が true の投稿は <img> がそのまま表示され、
   この背景は img の裏に隠れて見えなくなる（レイアウトは動かない）。
   ========================================================= */
.hakoa-visual {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--hakoa-g-other-a), var(--hakoa-g-other-b));
}
.hakoa-visual--wide { aspect-ratio: 16 / 9; }
.hakoa-visual--sq   { aspect-ratio: 4 / 3; }

/* [data-genre] はカードの画像枠（.hakoa-visual）だけでなく、
   目次の丸ナビ（.hakoa-cnt__circle）等、写真の代役が要る箇所全般で使う。
   クラス名を限定せず属性セレクタ単体で当てる。 */
[data-genre="handmade"] { background: linear-gradient(135deg, var(--hakoa-g-handmade-a), var(--hakoa-g-handmade-b)); }
[data-genre="food"]     { background: linear-gradient(135deg, var(--hakoa-g-food-a), var(--hakoa-g-food-b)); }
[data-genre="marche"]   { background: linear-gradient(135deg, var(--hakoa-g-marche-a), var(--hakoa-g-marche-b)); }
[data-genre="flea"]     { background: linear-gradient(135deg, var(--hakoa-g-flea-a), var(--hakoa-g-flea-b)); }
[data-genre="stage"]    { background: linear-gradient(135deg, var(--hakoa-g-stage-a), var(--hakoa-g-stage-b)); }

/* 紙の目のようなテクスチャ（画像ではなく反復グラデーション） */
.hakoa-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(-45deg, #fff 0 1px, transparent 1px 13px);
	opacity: .1;
	pointer-events: none;
}
.hakoa-visual__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hakoa-visual__mark {
	position: relative;
	z-index: 1;
	color: #fff;
	font-family: var(--hakoa-font-display);
	font-weight: 700;
	font-size: clamp(12px, 1.6vw, 16px);
	letter-spacing: .34em;
	text-indent: .34em;
	text-shadow: 0 1px 10px rgb(0 0 0 / .3);
}

.hakoa-status {
	position: absolute;
	top: 0; left: 0;
	z-index: 2;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .03em;
	padding: .35rem .9rem;
}
.hakoa-status--inline { position: static; display: inline-block; }
.hakoa-status--open   { background: var(--hakoa-st-open-bg);   color: var(--hakoa-st-open-ink); }
.hakoa-status--soon   { background: var(--hakoa-st-soon-bg);   color: var(--hakoa-st-soon-ink); }
.hakoa-status--closed { background: var(--hakoa-st-closed-bg); color: var(--hakoa-st-closed-ink); }

/* =========================================================
   7. イベントカード（一覧・トップ・関連イベントで共通利用）
   ========================================================= */
.hakoa-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.8rem 1.6rem;
}
.hakoa-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--hakoa-line);
}
.hakoa-card:hover { border-color: var(--hakoa-accent); }
.hakoa-card__body { padding: 1.1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.hakoa-card__cat   { font-size: .68rem; font-weight: 700; color: var(--hakoa-accent); margin-bottom: .5rem; }
.hakoa-card__title { font-family: var(--hakoa-font-display); font-weight: 700; font-size: .96rem; line-height: 1.7; margin: 0 0 .5rem; }
.hakoa-card__venue { font-size: .75rem; color: var(--hakoa-ink-mute); margin-bottom: .9rem; }
.hakoa-card__meta {
	margin: auto 0 0;
	padding-top: .8rem;
	border-top: 1px solid var(--hakoa-line);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .25rem .9rem;
	font-size: .78rem;
}
.hakoa-card__meta dt { color: var(--hakoa-ink-faint); margin: 0; }
.hakoa-card__meta dd { margin: 0; font-weight: 500; }

/* =========================================================
   8. トップのジグザグ記事行
   ========================================================= */
.hakoa-rows { display: flex; flex-direction: column; gap: 4rem; }
.hakoa-row {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 56px);
	align-items: center;
	text-decoration: none;
	color: inherit;
}
.hakoa-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.hakoa-row:nth-child(even) .hakoa-row__visual { order: 2; }
.hakoa-row:nth-child(even) .hakoa-row__body   { order: 1; }
.hakoa-row__cat   { font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--hakoa-accent); margin-bottom: .7rem; }
.hakoa-row__title { font-family: var(--hakoa-font-display); font-weight: 700; font-size: clamp(19px, 2.3vw, 25px); line-height: 1.65; margin: 0 0 .8rem; }
.hakoa-row__ex    { font-size: .85rem; color: var(--hakoa-ink-mute); margin-bottom: 1.1rem; }
.hakoa-row__meta  { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; font-size: .8rem; padding-top: .9rem; border-top: 1px solid var(--hakoa-line); }
.hakoa-row__meta dt { color: var(--hakoa-ink-faint); margin: 0; }
.hakoa-row__meta dd { margin: 0; font-weight: 500; }
.hakoa-row__foot  { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.hakoa-row__date  { font-size: .72rem; color: var(--hakoa-ink-faint); }

.hakoa-readmore { font-size: .75rem; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: .15rem; }
.hakoa-readmore::after { content: " ›"; }
.hakoa-sec__more { display: flex; justify-content: center; margin-top: 3.2rem; }
.hakoa-sec__more a { text-decoration: none; color: inherit; font-size: .8rem; font-weight: 700; border: 1px solid var(--hakoa-line-strong); padding: .9rem 3.2rem; }

/* =========================================================
   9. イベント詳細：条件テーブル・当日の流れ・申込ブロック
   ========================================================= */
.hakoa-detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 3.4rem;
	align-items: start;
}
.hakoa-tagline-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.hakoa-pill { font-size: .68rem; font-weight: 700; padding: .3rem .8rem; background: var(--hakoa-surface-alt); color: var(--hakoa-ink-mute); }
.hakoa-pill--accent { background: var(--hakoa-accent-soft); color: var(--hakoa-accent); }

.hakoa-spec {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0;
	background: #ffffff;
	border: 1px solid var(--hakoa-line);
	border-radius: 8px;
	overflow: hidden;
}
.hakoa-spec caption {
	display: block;
	width: 100%;
	text-align: left;
	caption-side: top;
	font-family: var(--hakoa-font-display);
	font-weight: 700;
	font-size: 1.05rem;
	padding-bottom: 0.8rem;
	margin-bottom: 0.8rem;
	border-bottom: 2px solid var(--hakoa-line-strong);
	color: var(--hakoa-ink);
}
.hakoa-spec tr {
	border-bottom: 1px solid var(--hakoa-line);
	transition: background-color 0.2s ease;
}
.hakoa-spec tr:last-child {
	border-bottom: none;
}
.hakoa-spec tr:hover {
	background-color: var(--hakoa-surface-alt);
}
.hakoa-spec th,
.hakoa-spec td {
	padding: 1rem 1.15rem;
	vertical-align: top;
	text-align: left;
	font-size: 0.88rem;
	line-height: 1.75;
}
.hakoa-spec th {
	width: 10.5rem;
	font-family: var(--hakoa-font-display);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--hakoa-ink) !important;
	background-color: var(--hakoa-surface-alt) !important; /* Arkhe親テーマの濃いグレーを上書きリセット */
	white-space: nowrap;
	border-right: 1px solid var(--hakoa-line);
}
.hakoa-spec td {
	color: var(--hakoa-ink);
}

.hakoa-flow { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hakoa-flow li { display: grid; grid-template-columns: 5.4rem 1fr; gap: 1.2rem; padding: .85rem 0; border-bottom: 1px solid var(--hakoa-line); }
.hakoa-flow li:first-child { border-top: 1px solid var(--hakoa-line); }
.hakoa-flow time { font-family: var(--hakoa-font-num); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .88rem; color: var(--hakoa-accent); }
.hakoa-flow span { font-size: .85rem; }

.hakoa-apply { position: sticky; top: calc(var(--ark-header_height, 0px) + 1.25rem); border: 2px solid var(--hakoa-line-strong); background: #fff; }
.hakoa-apply__top { padding: 1.25rem 1.35rem; border-bottom: 1px solid var(--hakoa-line); }
.hakoa-apply__st  { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.hakoa-apply__label { font-family: var(--hakoa-font-eyebrow); font-size: .65rem; letter-spacing: .12em; color: var(--hakoa-ink-faint); }
.hakoa-apply__fee { display: flex; align-items: baseline; gap: .5rem; }
.hakoa-apply__amt { font-family: var(--hakoa-font-num); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--hakoa-accent); }
.hakoa-apply__unit { font-size: .75rem; color: var(--hakoa-ink-mute); }
.hakoa-apply__kind { font-size: .72rem; color: var(--hakoa-ink-mute); margin-top: .5rem; }
.hakoa-apply__dl { padding: 1rem 1.35rem; background: var(--hakoa-surface-alt); display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--hakoa-line); }
.hakoa-apply__dlk { font-size: .75rem; color: var(--hakoa-ink-mute); }
.hakoa-apply__dlv { font-family: var(--hakoa-font-num); font-weight: 600; font-size: .88rem; }
.hakoa-apply__dlv b { color: var(--hakoa-st-soon-ink); }
.hakoa-apply__btns { padding: 1.25rem 1.35rem; display: grid; gap: .6rem; }
.hakoa-apply__btn {
	display: block; text-align: center; text-decoration: none;
	background: var(--hakoa-accent); color: #fff;
	font-weight: 700; font-size: .9rem; padding: 1.05rem 1.2rem;
}
.hakoa-apply__btn--sub { background: #fff; color: var(--hakoa-ink); border: 1px solid var(--hakoa-line-strong); }
.hakoa-apply__hint { font-size: .72rem; color: var(--hakoa-ink-mute); line-height: 1.85; }
.hakoa-apply__foot { padding: 0 1.35rem 1.25rem; font-size: .72rem; color: var(--hakoa-ink-faint); line-height: 1.85; }

.hakoa-voicebox { margin-top: 2.6rem; padding: 1.7rem 1.9rem; background: var(--hakoa-surface-alt); }
.hakoa-voicebox__q { font-family: var(--hakoa-font-display); font-weight: 700; font-size: .95rem; line-height: 1.95; margin: 0; }
.hakoa-voicebox__q::before { content: "「"; }
.hakoa-voicebox__q::after  { content: "」"; }
.hakoa-voicebox__who { font-size: .75rem; color: var(--hakoa-ink-faint); margin-top: .8rem; }

.hakoa-visitor { margin-top: 2.6rem; padding: 1.4rem 1.5rem; border: 1px dashed var(--hakoa-line); }
.hakoa-visitor__h { font-size: .8rem; color: var(--hakoa-ink-mute); margin-bottom: .8rem; letter-spacing: .04em; }
.hakoa-visitor dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.1rem; font-size: .8rem; margin: 0; }
.hakoa-visitor dt { color: var(--hakoa-ink-faint); margin: 0; }
.hakoa-visitor dd { margin: 0; }

/* =========================================================
   10. 料金表・料金に含まれるもの
   ========================================================= */
.hakoa-fee { width: 100%; border-collapse: collapse; text-align: left; }
.hakoa-fee__cap { font-family: var(--hakoa-font-display); font-weight: 700; font-size: .8rem; letter-spacing: .06em; padding-bottom: .7rem; }
.hakoa-fee th, .hakoa-fee td { padding: 1.15rem .9rem; border-bottom: 1px solid var(--hakoa-line); vertical-align: baseline; }
.hakoa-fee thead th { font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--hakoa-ink-mute); padding: .6rem .9rem; border-bottom: 1px solid var(--hakoa-line-strong); }
.hakoa-fee tbody th { font-family: var(--hakoa-font-display); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.hakoa-fee__amt { font-family: var(--hakoa-font-num); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.25rem; white-space: nowrap; color: var(--hakoa-accent); }
.hakoa-fee__amt small { font-size: .7rem; font-weight: 500; color: var(--hakoa-ink-mute); }
.hakoa-fee__amt.is-text { font-size: .9rem; font-family: var(--hakoa-font-display); font-weight: 700; }
.hakoa-fee td:last-child { font-size: .78rem; color: var(--hakoa-ink-mute); }
.hakoa-fee__note { font-size: .75rem; color: var(--hakoa-ink-mute); margin-top: 1rem; padding-left: 1rem; border-left: 2px solid var(--hakoa-accent2); }

.hakoa-incl { margin-top: 3rem; padding: 1.9rem 2rem; background: var(--hakoa-surface-alt); }
.hakoa-incl__h { font-size: .88rem; padding-bottom: .8rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--hakoa-line); }
.hakoa-incl__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1.7rem; font-size: .82rem; margin: 0; padding: 0; list-style: none; }
.hakoa-incl__list li { padding-left: 1.4rem; position: relative; line-height: 1.8; }
.hakoa-incl__list li::before { content: ""; position: absolute; left: .25rem; top: .62em; width: .5rem; height: .5rem; background: var(--hakoa-accent); }
.hakoa-incl__foot { font-size: .75rem; color: var(--hakoa-ink-mute); margin-top: 1.3rem; }

/* よくある質問 */
.hakoa-faq details { border-top: 1px solid var(--hakoa-line); }
.hakoa-faq details:last-of-type { border-bottom: 1px solid var(--hakoa-line); }
.hakoa-faq summary {
	display: flex; align-items: baseline; gap: .9rem;
	padding: 1.2rem .25rem; cursor: pointer; list-style: none;
	font-family: var(--hakoa-font-display); font-weight: 700; font-size: .95rem;
}
.hakoa-faq summary::-webkit-details-marker { display: none; }
.hakoa-faq summary::before { content: "Q"; flex: none; font-family: var(--hakoa-font-eyebrow); font-size: .8rem; color: var(--hakoa-accent); }
.hakoa-faq summary::after { content: "+"; margin-left: auto; flex: none; font-family: var(--hakoa-font-num); font-weight: 600; font-size: 1.2rem; color: var(--hakoa-ink-faint); line-height: 1; }
.hakoa-faq details[open] summary::after { content: "\2212"; }
.hakoa-faq__a { display: flex; gap: .9rem; padding: 0 .25rem 1.3rem; font-size: .85rem; color: var(--hakoa-ink-mute); margin: 0; }
.hakoa-faq__a::before { content: "A"; flex: none; font-family: var(--hakoa-font-eyebrow); font-size: .8rem; color: var(--hakoa-accent2-ink); background: var(--hakoa-accent2); padding: 0 .3rem; height: 1.15rem; line-height: 1.15rem; }

/* =========================================================
   11. 登録2ステップ（フロー・カード型）
   ========================================================= */
.hakoa-entry__header {
	text-align: center;
	margin-bottom: 2.2rem;
}
.hakoa-entry__badge {
	display: inline-block;
	font-size: .78rem;
	font-weight: 700;
	color: var(--hakoa-accent);
	background: var(--hakoa-accent-soft);
	padding: .3rem .9rem;
	border-radius: 100px;
	margin-bottom: .6rem;
}
.hakoa-entry__heading {
	font-family: var(--hakoa-font-display);
	font-weight: 900;
	font-size: clamp(20px, 3vw, 26px);
	line-height: 1.45;
	margin: 0 0 .5rem;
	color: var(--hakoa-ink);
}
.hakoa-entry__subtext {
	font-size: .86rem;
	color: var(--hakoa-ink-mute);
	line-height: 1.7;
	margin: 0;
}

.hakoa-entry__flow {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.2rem;
}
.hakoa-entry__card {
	background: #ffffff;
	border-radius: 14px;
	padding: 2.2rem 2rem;
	box-shadow: 0 10px 30px -6px rgba(20, 32, 31, .08);
	border: 1px solid rgba(226, 231, 229, .8);
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform .25s ease, box-shadow .25s ease;
}
.hakoa-entry__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px -6px rgba(20, 32, 31, .12);
}
.hakoa-entry__step-badge {
	align-self: flex-start;
	font-family: var(--hakoa-font-eyebrow);
	font-size: .78rem;
	letter-spacing: .08em;
	padding: .35rem .85rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	line-height: 1.2;
}
.hakoa-entry__step-badge--1 {
	background: var(--hakoa-accent-soft);
	color: var(--hakoa-accent);
}
.hakoa-entry__step-badge--2 {
	background: rgba(6, 199, 85, .15);
	color: #05963F;
}
.hakoa-entry__card-title {
	font-family: var(--hakoa-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--hakoa-ink);
	margin: 0 0 .7rem;
}
.hakoa-entry__card-desc {
	font-size: .85rem;
	color: var(--hakoa-ink-mute);
	line-height: 1.75;
	margin: 0 0 1.2rem;
}
.hakoa-entry__points {
	list-style: none;
	padding: 0;
	margin: 0 0 1.6rem;
	display: grid;
	gap: .45rem;
}
.hakoa-entry__points li {
	font-size: .8rem;
	font-weight: 600;
	color: var(--hakoa-ink);
	display: flex;
	align-items: center;
	gap: .45rem;
}
.hakoa-entry__points li span {
	color: var(--hakoa-accent);
	font-weight: 900;
}
.hakoa-entry__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--hakoa-accent);
	box-shadow: 0 4px 14px rgba(20, 32, 31, .1);
	flex: none;
}
.hakoa-entry__arrow svg {
	transform: rotate(-90deg);
}
.hakoa-entry__action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	text-decoration: none;
	font-weight: 700;
	font-size: .9rem;
	padding: .95rem 1.4rem;
	border-radius: 8px;
	color: #fff;
	margin-top: auto;
	transition: transform .2s ease, box-shadow .2s ease;
}
.hakoa-entry__action-btn--form {
	background: var(--hakoa-accent);
	box-shadow: 0 4px 14px -3px rgba(17, 100, 102, .35);
}
.hakoa-entry__action-btn--form:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -3px rgba(17, 100, 102, .45);
	color: #fff;
}
.hakoa-entry__action-btn--line {
	background: #06C755;
	box-shadow: 0 4px 14px -3px rgba(6, 199, 85, .35);
}
.hakoa-entry__action-btn--line:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -3px rgba(6, 199, 85, .45);
	color: #fff;
}

/* 旧クラス（ドロワーメニュー等用）の互換性維持 */
.hakoa-entry { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.9rem; }
.hakoa-entry__step { background: #fff; padding: 2rem 1.9rem; }
.hakoa-entry__step h3 { font-family: var(--hakoa-font-display); font-size: 1.05rem; margin: 0 0 .6rem; }
.hakoa-entry__step p { font-size: .82rem; color: var(--hakoa-ink-mute); margin: 0 0 1.3rem; }
.hakoa-entry__btn { display: block; text-align: center; text-decoration: none; background: var(--hakoa-accent); color: #fff; font-weight: 700; font-size: .85rem; padding: .95rem 1.2rem; }
.hakoa-entry__btn--sub { background: #06C755; color: #fff; }
.hakoa-entry__ribbon { text-align: center; font-family: var(--hakoa-font-display); font-weight: 700; font-size: clamp(15px, 2.2vw, 19px); margin-bottom: .6rem; }
.hakoa-entry__sub { text-align: center; font-size: .82rem; color: var(--hakoa-ink-mute); margin-bottom: 2.4rem; }
.hakoa-step__n { display: block; font-family: var(--hakoa-font-eyebrow); font-size: .8rem; letter-spacing: .12em; color: var(--hakoa-accent); padding-bottom: .8rem; margin-bottom: .9rem; border-bottom: 1px solid var(--hakoa-line-strong); }
.hakoa-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.hakoa-steps h3 { font-family: var(--hakoa-font-display); font-size: 1.02rem; margin: 0 0 .6rem; }
.hakoa-steps p  { font-size: .82rem; color: var(--hakoa-ink-mute); margin: 0; }

/* =========================================================
/* インラインブロック（単語・文節の途中折り返し防止） */
.u-ib {
	display: inline-block;
}

/* =========================================================
   About ページ（協会について）コンポーネント
   ========================================================= */

/* 固定ページ共通ヒーロー（About / Price / Contact） */
.hakoa-about-hero,
.hakoa-page-hero {
	position: relative;
	padding: 2.2rem 0 1.2rem;
	overflow: hidden;
}
.hakoa-about-hero__frame,
.hakoa-page-hero__frame {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	display: grid;
	place-items: center;
	padding: 3.8rem 1.5rem 3.4rem;
	box-shadow: 0 8px 30px -6px rgba(20, 32, 31, .06);
	background: var(--hakoa-surface-alt);
}
.hakoa-about-hero__img-box,
.hakoa-page-hero__img-box {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.hakoa-about-hero__bg,
.hakoa-page-hero__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.92) saturate(0.85);
	opacity: 0.35;
	display: block;
}
.hakoa-about-hero__card,
.hakoa-page-hero__card {
	position: relative;
	z-index: 2;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 2.6rem clamp(20px, 5vw, 56px);
	max-width: 760px;
	border-radius: 10px;
	box-shadow: 0 12px 36px -8px rgba(17, 100, 102, .12);
	text-align: center;
	border: 1px solid rgba(255, 255, 255, .8);
}
.hakoa-about-hero__eyebrow,
.hakoa-page-hero__eyebrow {
	font-family: var(--hakoa-font-eyebrow);
	font-size: 12px;
	letter-spacing: .2em;
	color: var(--hakoa-accent);
	font-weight: 700;
	margin: 0 0 1rem;
}
.hakoa-about-hero__title,
.hakoa-page-hero__title {
	font-family: var(--hakoa-font-display);
	font-weight: 900;
	font-size: clamp(22px, 3.6vw, 34px);
	line-height: 1.5;
	letter-spacing: -.01em;
	margin: 0 0 1.1rem;
	color: var(--hakoa-ink);
}
.hakoa-about-hero__lead,
.hakoa-page-hero__lead {
	font-size: .94rem;
	color: var(--hakoa-ink-mute);
	text-align: center;
	line-height: 1.9;
	margin: 0 0 1.2rem;
	word-break: auto-phrase;
	text-wrap: balance;
}
.hakoa-about-hero__scroll,
.hakoa-page-hero__scroll {
	display: flex;
	justify-content: center;
	margin-top: .4rem;
}
.hakoa-about-hero__scroll-link,
.hakoa-page-hero__scroll-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .78rem;
	font-weight: 700;
	color: var(--hakoa-accent);
	background: var(--hakoa-accent-soft);
	padding: .35rem .9rem;
	border-radius: 999px;
	text-decoration: none;
	transition: background .2s ease;
}
.hakoa-about-hero__scroll-link:hover,
.hakoa-page-hero__scroll-link:hover {
	background: rgba(17, 100, 102, .15);
}

/* セクション共通 */
.hakoa-about-sec {
	padding: 4.5rem 0;
}
.hakoa-about-sec--alt {
	background: var(--hakoa-band);
}
.hakoa-about-sec__inner {
	max-width: 860px;
	margin-inline: auto;
}

.hakoa-about__hook {
	font-family: var(--hakoa-font-display);
	font-weight: 700;
	font-size: clamp(19px, 2.8vw, 28px);
	line-height: 1.6;
	text-align: center;
	text-wrap: balance;
	word-break: auto-phrase;
	margin: 0 0 1.8rem;
}
.hakoa-about__hook em {
	font-style: normal;
	color: var(--hakoa-accent);
	border-bottom: 2px solid var(--hakoa-accent-soft);
	padding-bottom: .15rem;
}
.hakoa-about__body {
	max-width: 44em;
	margin-inline: auto;
	font-size: .95rem;
	line-height: 2;
	text-align: justify;
	text-justify: inter-ideograph;
	word-break: break-word;
	overflow-wrap: break-word;
	color: var(--hakoa-ink-mute);
}
.hakoa-about__body p {
	margin: 0;
	text-align: justify;
	text-justify: inter-ideograph;
}
.hakoa-about__body p + p {
	margin-top: 1.25rem;
}
.hakoa-about__intro {
	font-size: 1.02rem;
	color: var(--hakoa-ink) !important;
	line-height: 2.05;
	margin-bottom: 1.35rem;
	text-align: justify;
	text-justify: inter-ideograph;
}
.hakoa-about__turn {
	display: block;
	font-family: var(--hakoa-font-display);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--hakoa-ink);
	padding: 1.3rem 0 1.3rem 1.4rem;
	margin: 1.8rem 0;
	border-left: 3px solid var(--hakoa-accent2);
	background: var(--hakoa-surface-alt);
	border-radius: 0 8px 8px 0;
	line-height: 1.9;
}

/* 3者のつながり（共創サークル） */
.hakoa-tri {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 2.8rem;
}
.hakoa-tri__item {
	background: #fff;
	border: 1px solid var(--hakoa-line);
	border-radius: 10px;
	padding: 1.8rem 1.2rem;
	text-align: center;
	box-shadow: 0 4px 16px -4px rgba(20, 32, 31, .04);
	transition: transform .2s ease, box-shadow .2s ease;
	position: relative;
}
.hakoa-tri__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -4px rgba(17, 100, 102, .08);
}
.hakoa-tri__tag {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--hakoa-accent);
	background: var(--hakoa-accent-soft);
	padding: .25rem .75rem;
	border-radius: 999px;
	margin-bottom: .7rem;
}
.hakoa-tri__title {
	display: block;
	font-family: var(--hakoa-font-display);
	font-weight: 700;
	font-size: 1.08rem;
	margin-bottom: .45rem;
	color: var(--hakoa-ink);
}
.hakoa-tri__desc {
	display: block;
	font-size: .8rem;
	color: var(--hakoa-ink-mute);
	line-height: 1.6;
}

/* わたしたちの場（会場） */
.hakoa-places {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
	margin-top: 2.4rem;
}
.hakoa-place {
	background: #fff;
	border: 1px solid var(--hakoa-line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 16px -4px rgba(20, 32, 31, .06);
	display: flex;
	flex-direction: column;
	text-align: center;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hakoa-place:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px -4px rgba(20, 32, 31, .12);
	border-color: var(--hakoa-accent);
}
.hakoa-place__thumb {
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: var(--hakoa-surface-alt);
}
.hakoa-place__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.hakoa-place:hover .hakoa-place__img {
	transform: scale(1.06);
}
.hakoa-place__body {
	padding: 1.1rem .8rem 1.2rem;
}
.hakoa-place__title {
	font-family: var(--hakoa-font-display);
	font-weight: 700;
	font-size: .96rem;
	margin: 0 0 .35rem;
	color: var(--hakoa-ink);
}
.hakoa-place__sub {
	font-size: .74rem;
	color: var(--hakoa-ink-mute);
	line-height: 1.5;
	margin: 0;
}

/* 代表メッセージ */
.hakoa-msg {
	display: grid;
	grid-template-columns: 13rem 1fr;
	gap: 2.8rem;
	align-items: start;
	background: #fff;
	border: 1px solid var(--hakoa-line);
	border-radius: 14px;
	padding: 3rem 2.6rem;
	box-shadow: 0 8px 28px -6px rgba(20, 32, 31, .05);
	position: relative;
}
.hakoa-msg__photo {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hakoa-msg__av {
	width: 100%;
	max-width: 170px;
	aspect-ratio: 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--hakoa-accent-soft);
	color: var(--hakoa-accent);
	overflow: hidden;
	border: 4px solid #fff;
	box-shadow: 0 4px 18px rgba(17, 100, 102, .12);
}
.hakoa-msg__av svg {
	width: 58px;
	height: 58px;
	opacity: 0.85;
}
.hakoa-msg__cap {
	font-size: .72rem;
	color: var(--hakoa-ink-faint);
	text-align: center;
	margin-top: .8rem;
}
.hakoa-msg__q {
	font-family: var(--hakoa-font-display);
	font-weight: 700;
	font-size: clamp(17px, 2.2vw, 22px);
	line-height: 1.75;
	color: var(--hakoa-ink);
	margin: 0 0 1.4rem;
	position: relative;
}
.hakoa-msg__t {
	font-size: .92rem;
	color: var(--hakoa-ink-mute);
	line-height: 2;
	text-align: justify;
	text-justify: inter-ideograph;
	word-break: break-word;
	overflow-wrap: break-word;
}
.hakoa-msg__t p {
	margin: 0;
	text-align: justify;
	text-justify: inter-ideograph;
}
.hakoa-msg__t p + p {
	margin-top: 1.15rem;
}
.hakoa-msg__sign {
	font-size: .84rem;
	margin-top: 1.8rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--hakoa-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .6rem;
	color: var(--hakoa-ink-mute);
}
.hakoa-msg__sign b {
	font-family: var(--hakoa-font-display);
	font-size: .98rem;
	color: var(--hakoa-ink);
}

/* 団体概要テーブル */
.hakoa-prof-wrap {
	background: #fff;
	border: 1px solid var(--hakoa-line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 16px -4px rgba(20, 32, 31, .04);
}
.hakoa-prof {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}
.hakoa-prof th, .hakoa-prof td {
	padding: 1.2rem 1.4rem;
	border-bottom: 1px solid var(--hakoa-line);
	vertical-align: baseline;
	font-size: .88rem;
}
.hakoa-prof tr:last-child th, .hakoa-prof tr:last-child td {
	border-bottom: none;
}
.hakoa-prof th {
	width: 11rem;
	background: var(--hakoa-surface-alt);
	font-family: var(--hakoa-font-display);
	font-weight: 700;
	font-size: .82rem;
	color: var(--hakoa-ink);
	white-space: nowrap;
}
.hakoa-prof td a {
	color: var(--hakoa-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hakoa-tbc {
	display: inline-block;
	font-size: .68rem;
	font-weight: 700;
	background: var(--hakoa-accent2);
	color: var(--hakoa-accent2-ink);
	padding: .05rem .5rem;
	margin-left: .4rem;
	border-radius: 3px;
}

/* 登録前安心バナー */
.hakoa-about-reassure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
	flex-wrap: wrap;
	background: var(--hakoa-accent-soft);
	border: 1px solid rgba(17, 100, 102, .18);
	border-radius: 8px;
	padding: 1.1rem 1.6rem;
	margin: 0 auto 2.4rem;
	max-width: 680px;
	text-align: center;
}
.hakoa-about-reassure__text {
	font-size: .88rem;
	font-weight: 700;
	color: var(--hakoa-accent);
	margin: 0;
}
.hakoa-about-reassure__link {
	font-size: .82rem;
	color: var(--hakoa-ink);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hakoa-about-reassure__link:hover {
	color: var(--hakoa-accent);
}

/* =========================================================
   13. お問い合わせ
   ========================================================= */
.hakoa-ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.hakoa-way { border: 1px solid var(--hakoa-line); padding: 2rem 1.9rem; display: flex; flex-direction: column; }
.hakoa-way--main { border: 2px solid var(--hakoa-accent); }
.hakoa-way__badge { display: inline-block; align-self: flex-start; font-size: .65rem; font-weight: 700; padding: .25rem .7rem; background: var(--hakoa-accent); color: #fff; margin-bottom: 1rem; }
.hakoa-way__badge--sub { background: var(--hakoa-surface-alt); color: var(--hakoa-ink-mute); }
.hakoa-way h3 { font-family: var(--hakoa-font-display); font-size: 1.15rem; margin: 0 0 .7rem; }
.hakoa-way__p { font-size: .84rem; color: var(--hakoa-ink-mute); margin: 0 0 1.2rem; }
.hakoa-way__pts { display: grid; gap: .45rem; font-size: .78rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.hakoa-way__pts li { padding-left: 1.3rem; position: relative; }
.hakoa-way__pts li::before { content: "\2713"; position: absolute; left: 0; color: var(--hakoa-accent); font-weight: 700; }
.hakoa-way__btn { display: block; margin-top: auto; text-align: center; text-decoration: none; background: var(--hakoa-accent); color: #fff; font-weight: 700; font-size: .88rem; padding: 1rem 1.2rem; }
.hakoa-way__btn--sub { background: #fff; color: var(--hakoa-ink); border: 1px solid var(--hakoa-line-strong); }
.hakoa-way__note { font-size: .72rem; color: var(--hakoa-ink-faint); margin-top: .75rem; text-align: center; }
.hakoa-callout { margin-top: 2.4rem; padding: 1.6rem 1.9rem; background: var(--hakoa-surface-alt); }
.hakoa-callout h3 { font-family: var(--hakoa-font-display); font-size: .95rem; margin: 0 0 .6rem; }
.hakoa-callout p { font-size: .84rem; color: var(--hakoa-ink-mute); margin: 0; }
.hakoa-callout a { color: var(--hakoa-accent); font-weight: 700; }

/* =========================================================
   14. お知らせ一覧・関連リンク
   ========================================================= */
.hakoa-newslist { border-top: 1px solid var(--hakoa-line-strong); }
.hakoa-newslist a { display: grid; grid-template-columns: 6.6rem 5.6rem 1fr auto; gap: 1.2rem; align-items: baseline; padding: 1.2rem .25rem; border-bottom: 1px solid var(--hakoa-line); text-decoration: none; color: inherit; }
.hakoa-newslist a:hover { background: var(--hakoa-surface-alt); }
.hakoa-newslist__d { font-family: var(--hakoa-font-num); font-weight: 600; font-size: .78rem; color: var(--hakoa-ink-faint); }
.hakoa-newslist__c { font-size: .68rem; font-weight: 700; text-align: center; padding: .2rem 0; background: var(--hakoa-accent-soft); color: var(--hakoa-accent); }
.hakoa-newslist__t { font-family: var(--hakoa-font-display); font-weight: 700; font-size: .9rem; line-height: 1.7; }

.hakoa-prevnext { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2.4rem; }
.hakoa-prevnext a { text-decoration: none; color: inherit; border: 1px solid var(--hakoa-line); padding: 1.2rem 1.3rem; display: block; }
.hakoa-prevnext a:hover { border-color: var(--hakoa-accent); }
.hakoa-prevnext__l { font-family: var(--hakoa-font-eyebrow); font-size: .6rem; letter-spacing: .12em; color: var(--hakoa-ink-faint); margin-bottom: .5rem; }
.hakoa-prevnext__t { font-family: var(--hakoa-font-display); font-weight: 700; font-size: .85rem; line-height: 1.7; }
.hakoa-prevnext a:last-child { text-align: right; }

.hakoa-share { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 3.2rem; padding-top: 1.6rem; border-top: 1px solid var(--hakoa-line); }
.hakoa-share__l { font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--hakoa-ink-mute); }
.hakoa-share a { font-size: .75rem; font-weight: 700; text-decoration: none; color: inherit; border: 1px solid var(--hakoa-line); padding: .5rem 1rem; }
.hakoa-share a:hover { border-color: var(--hakoa-accent); color: var(--hakoa-accent); }

/* =========================================================
   15. 目次（丸ナビ）・エリア帯・ミッション帯・出店者の声・CTA
   ========================================================= */
.hakoa-contents__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.hakoa-cnt { text-decoration: none; color: inherit; text-align: center; display: block; transition: transform .25s ease; }
.hakoa-cnt:hover { transform: translateY(-4px); }
.hakoa-cnt__circle { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: .9rem; display: grid; place-items: center; background: #eee; box-shadow: 0 6px 18px -4px rgba(20, 32, 31, .15); }
.hakoa-cnt__circle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.hakoa-cnt:hover .hakoa-cnt__circle img { transform: scale(1.08); }
.hakoa-cnt__circle::after { content: ""; position: absolute; inset: 0; background: rgba(20, 32, 31, .32); border-radius: 50%; }
.hakoa-cnt__circle > span { position: relative; z-index: 1; font-family: var(--hakoa-font-display); font-weight: 700; font-size: .88rem; color: #fff; letter-spacing: .08em; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.hakoa-cnt__label { display: block; font-family: var(--hakoa-font-display); font-weight: 700; font-size: .95rem; color: var(--hakoa-ink); margin-bottom: .25rem; }
.hakoa-cnt__desc { display: block; font-size: .82rem; color: var(--hakoa-ink-mute); line-height: 1.5; }

.hakoa-strip { display: grid; grid-template-columns: repeat(6, 1fr); }
.hakoa-strip a { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; text-decoration: none; overflow: hidden; }
.hakoa-strip__t { display: block; position: relative; z-index: 1; text-align: center; color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / .32); }
.hakoa-strip__t b { display: block; font-family: var(--hakoa-font-display); font-size: .95rem; }
.hakoa-strip__t i { font-style: normal; font-size: .68rem; opacity: .9; }

.hakoa-mission { padding: 4.5rem 0; }
.hakoa-mission__in { display: grid; grid-template-columns: auto 1fr auto; gap: 3rem; align-items: center; }
.hakoa-mission__mark { font-family: var(--hakoa-font-eyebrow); font-size: clamp(28px, 4vw, 46px); line-height: 1.1; }
.hakoa-mission__mark small { display: block; font-family: var(--hakoa-font-display); font-size: .75rem; letter-spacing: .1em; color: var(--hakoa-ink-mute); margin-top: .5rem; }
.hakoa-mission__txt { font-size: clamp(15px, 1.9vw, 19px); font-weight: 500; line-height: 2.1; }
.hakoa-mission__box { display: block; text-decoration: none; color: inherit; text-align: center; border: 1px solid var(--hakoa-line-strong); padding: 1.25rem 1.5rem; white-space: nowrap; }
.hakoa-mission__box b { display: block; font-family: var(--hakoa-font-display); font-size: .88rem; }
.hakoa-mission__box span { font-size: .68rem; color: var(--hakoa-ink-mute); }

.hakoa-voices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
.hakoa-voice blockquote { margin: 0 0 1.1rem; font-size: .95rem; line-height: 2.1; font-family: var(--hakoa-font-display); font-weight: 500; }
.hakoa-voice blockquote::before { content: "「"; }
.hakoa-voice blockquote::after  { content: "」"; }
.hakoa-voice__who { display: flex; align-items: center; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--hakoa-line); }
.hakoa-voice__av { width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--hakoa-accent-soft); color: var(--hakoa-accent); font-family: var(--hakoa-font-num); font-weight: 700; font-size: .88rem; }
.hakoa-voice__name { font-size: .8rem; font-weight: 700; }
.hakoa-voice__meta { font-size: .68rem; color: var(--hakoa-ink-faint); }

/* =========================================================
   15. ラストCTA（相談・コンバージョンカード）
   ========================================================= */
.hakoa-cta-section {
	padding: 3.8rem 0;
	background: var(--hakoa-surface-alt);
}
.hakoa-cta-card {
	background: linear-gradient(145deg, #116466, #0A4345);
	color: #fff;
	border-radius: 20px;
	padding: 3.6rem 2.8rem;
	text-align: center;
	max-width: 860px;
	margin: 0 auto;
	box-shadow: 0 16px 40px -8px rgba(10, 67, 69, .32);
	position: relative;
	overflow: hidden;
}
.hakoa-cta-card::before {
	content: "";
	position: absolute;
	top: -60px;
	right: -60px;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(232, 179, 60, .22) 0%, transparent 70%);
	pointer-events: none;
}
.hakoa-cta-card__badge {
	display: inline-block;
	background: rgba(255, 255, 255, .16);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	font-weight: 700;
	font-size: .82rem;
	padding: .35rem 1.1rem;
	border-radius: 100px;
	margin-bottom: 1.1rem;
	border: 1px solid rgba(255, 255, 255, .25);
}
.hakoa-cta-card__title {
	font-family: var(--hakoa-font-display);
	font-size: clamp(22px, 3.2vw, 32px);
	font-weight: 900;
	line-height: 1.45;
	margin: 0 0 1rem;
	color: #fff;
	text-wrap: balance;
}
.hakoa-cta-card__lead {
	font-size: .95rem;
	opacity: .92;
	line-height: 1.85;
	max-width: 640px;
	margin: 0 auto 1.6rem;
	word-break: auto-phrase;
}
.hakoa-cta-card__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	margin-bottom: 2rem;
}
.hakoa-cta-chip {
	font-size: .78rem;
	font-weight: 600;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	padding: .35rem .85rem;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, .2);
}
.hakoa-cta-card__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
}
.hakoa-cta-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	background: #06C755;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.02rem;
	padding: 1.1rem 2.8rem;
	border-radius: 100px;
	box-shadow: 0 8px 24px -2px rgba(6, 199, 85, .5);
	transition: transform .2s ease, box-shadow .2s ease;
}
.hakoa-cta-card__btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -2px rgba(6, 199, 85, .6);
	color: #fff;
}
.hakoa-cta-card__note {
	font-size: .75rem;
	opacity: .75;
	margin: 0;
}

/* =========================================================
   15-1. 固定ボタン（footer/fix_btns.php で追加した登録CTA）
   ---------------------------------------------------------
   主役が出店者・コンバージョンが登録である本サイトの性質に合わせ、
   スマホ幅のみ画面下にLINE相談・登録を追従表示する。
   ========================================================= */
.hakoa-fixEntry {
	display: none;
	align-items: center;
	gap: .45rem;
	text-decoration: none;
	background: #06C755;
	color: #fff;
	font-weight: 700;
	font-size: .84rem;
	padding: .85rem 1.6rem;
	border-radius: 100px;
	box-shadow: 0 6px 18px -3px rgba(6, 199, 85, .4);
	transition: transform .2s ease, box-shadow .2s ease;
}
.hakoa-fixEntry:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px -3px rgba(6, 199, 85, .5);
}
@media (max-width: 720px) {
	.hakoa-fixEntry { display: inline-flex; }
}

/* =========================================================
   15-2. 新規コンポーネント（温かみ・安心感・CVR改善）
   ========================================================= */
/* --- ヒーロー関連 --- */
.hakoa-hero__frame {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	aspect-ratio: 21/9;
	min-height: 340px;
	display: grid;
	box-shadow: 0 12px 36px -8px rgba(20, 32, 31, .08);
}
.hakoa-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.hakoa-hero__card {
	position: relative;
	align-self: center;
	justify-self: start;
	max-width: 520px;
	margin-left: clamp(16px, 5vw, 56px);
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 2.2rem 2.4rem;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
	border: 1px solid rgba(255, 255, 255, .8);
}
.hakoa-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: 1.1rem;
}
.hakoa-badge {
	display: inline-flex;
	align-items: center;
	font-size: .75rem;
	font-weight: 700;
	color: var(--hakoa-accent);
	background: var(--hakoa-accent-soft);
	padding: .3rem .7rem;
	border-radius: 100px;
	line-height: 1.2;
}
.hakoa-hero__actions {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: 1.25rem;
	flex-wrap: wrap;
}
.hakoa-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	text-decoration: none;
	font-weight: 700;
	font-size: .84rem;
	padding: .75rem 1.3rem;
	border-radius: 8px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.hakoa-hero__btn--primary {
	background: var(--hakoa-accent);
	color: #fff;
	box-shadow: 0 4px 14px -3px rgba(17, 100, 102, .35);
}
.hakoa-hero__btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px -3px rgba(17, 100, 102, .45);
	color: #fff;
}
.hakoa-hero__btn--line {
	background: #06C755;
	color: #fff;
	box-shadow: 0 4px 14px -3px rgba(6, 199, 85, .35);
}
.hakoa-hero__btn--line:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px -3px rgba(6, 199, 85, .45);
	color: #fff;
}

/* --- イベント0件時の温かい案内（LINE受け皿） --- */
.hakoa-empty-notice {
	background: #fff;
	border: 1.5px dashed var(--hakoa-line);
	border-radius: 12px;
	padding: 2.8rem 2rem;
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
}
.hakoa-empty-notice__icon {
	font-size: 2.2rem;
	margin-bottom: .6rem;
}
.hakoa-empty-notice h3 {
	font-family: var(--hakoa-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--hakoa-ink);
	margin: 0 0 .8rem;
}
.hakoa-empty-notice p {
	font-size: .88rem;
	color: var(--hakoa-ink-mute);
	line-height: 1.8;
	margin: 0 0 1.6rem;
}
.hakoa-empty-notice__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	background: #06C755;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: .92rem;
	padding: 1rem 2rem;
	border-radius: 100px;
	box-shadow: 0 6px 18px -3px rgba(6, 199, 85, .35);
	transition: transform .2s ease, box-shadow .2s ease;
}
.hakoa-empty-notice__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -3px rgba(6, 199, 85, .45);
	color: #fff;
}

/* --- 料金サマリカード --- */
.hakoa-price-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 2.2rem 0;
}
.hakoa-price-card {
	background: #fff;
	border: 1px solid var(--hakoa-line);
	border-radius: 10px;
	padding: 2rem 1.6rem;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}
.hakoa-price-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px -6px rgba(20, 32, 31, .08);
}
.hakoa-price-card--featured {
	border-color: var(--hakoa-accent);
	border-width: 2px;
	box-shadow: 0 8px 24px -6px rgba(17, 100, 102, .12);
}
.hakoa-price-card__badge {
	align-self: flex-start;
	font-size: .7rem;
	font-weight: 700;
	background: var(--hakoa-surface-alt);
	color: var(--hakoa-ink-mute);
	padding: .25rem .6rem;
	border-radius: 4px;
	margin-bottom: .8rem;
}
.hakoa-price-card__badge--featured {
	background: var(--hakoa-accent);
	color: #fff;
}
.hakoa-price-card__title {
	font-family: var(--hakoa-font-display);
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 .9rem;
}
.hakoa-price-card__amt {
	font-family: var(--hakoa-font-num);
	color: var(--hakoa-ink);
	margin-bottom: .9rem;
	display: flex;
	align-items: baseline;
	gap: .25rem;
}
.hakoa-price-card__num {
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1;
}
.hakoa-price-card__unit {
	font-size: .82rem;
	font-weight: 500;
	color: var(--hakoa-ink-mute);
}
.hakoa-price-card__desc {
	font-size: .8rem;
	color: var(--hakoa-ink-mute);
	line-height: 1.7;
	margin-top: auto;
}

/* --- はじめての出店ガイド（写真＋Q&A） --- */
.hakoa-guide-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.4rem;
	align-items: center;
	margin-bottom: 2.8rem;
}
.hakoa-guide-visual {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 8px 24px -4px rgba(20, 32, 31, .1);
}
.hakoa-guide-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hakoa-guide-faqs {
	margin-top: 2.4rem;
	display: grid;
	gap: .9rem;
}
.hakoa-faq-item {
	background: #fff;
	border-radius: 8px;
	padding: 1.2rem 1.4rem;
	border: 1px solid var(--hakoa-line);
}
.hakoa-faq-item dt {
	font-weight: 700;
	font-size: .9rem;
	color: var(--hakoa-accent);
	margin-bottom: .4rem;
	display: flex;
	align-items: center;
	gap: .4rem;
}
.hakoa-faq-item dd {
	font-size: .82rem;
	color: var(--hakoa-ink-mute);
	line-height: 1.7;
	margin: 0;
}

/* --- 協会について（イラスト追加） --- */
.hakoa-about-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.4rem;
	align-items: center;
	margin-top: 2rem;
}
.hakoa-about-visual {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 8px 24px -4px rgba(20, 32, 31, .08);
}
.hakoa-about-visual img {
	width: 100%;
	height: auto;
	display: block;
}

/* =========================================================
   15. ドロワーメニュー（ハンバーガー展開時のUI/UX刷新）
   ---------------------------------------------------------
   ・黒背景を白（#FFFFFF）に変更し、背面コンテンツの透けと文字重なりを解消
   ・ヘッダーボタン連動コントラストの担保
   ・メニュー項目のタップ領域拡大（min 48px）、シェブロン矢印の付与
   ・安心感と行動喚起を高めるCTAカード（深ティール登録ボタン＋公式LINEグリーン）
   ・押しやすいラウンドピル型の閉じるボタン
   ========================================================= */

/* --- 1. ドロワー本体（白背景・全画面カバー） --- */
.p-drawer {
	background: #FFFFFF !important;
	color: var(--hakoa-ink) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}
.p-drawer__body {
	padding: 24px 20px 48px !important;
	max-width: 480px;
	margin: 0 auto;
}

/* ドロワーオープン時のヘッダー連動（ロゴ重複を防止し、×ボタンに集中） */
[data-drawer="opened"] .l-header {
	background: #FFFFFF !important;
	border-bottom: 1px solid rgba(20, 32, 31, 0.08);
	box-shadow: 0 2px 10px rgba(20, 32, 31, 0.04);
}
[data-drawer="opened"] .l-header__drawerBtn,
[data-drawer="opened"] .l-header__drawerBtn .c-iconBtn {
	color: var(--hakoa-ink) !important;
}
[data-drawer="opened"] .l-header__center,
[data-drawer="opened"] .l-header__searchBtn {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* --- 2. ドロワーヘッダー（ロゴ＆キャッチコピー） --- */
.c-drawerHeader {
	text-align: center;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 2px solid rgba(17, 100, 102, 0.1);
}
.c-drawerHeader__logo a {
	font-family: var(--hakoa-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--hakoa-accent) !important;
	letter-spacing: 0.04em;
	text-decoration: none;
}
.c-drawerHeader__desc {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--hakoa-accent);
	background: #EAF4F3;
	padding: 3px 12px;
	border-radius: 999px;
	margin: 8px auto 0;
	letter-spacing: 0.05em;
}

/* --- 3. メニューリスト（タップ領域・可読性・矢印） --- */
.c-drawerNav {
	list-style: none !important;
	margin: 0 0 20px 0 !important;
	padding: 0 !important;
}
.c-drawerNav > li,
.c-drawerNav .menu-item {
	border-bottom: 1px solid rgba(20, 32, 31, 0.08) !important;
	margin: 0 !important;
}
.c-drawerNav > li:first-child,
.c-drawerNav .menu-item:first-child {
	border-top: 1px solid rgba(20, 32, 31, 0.08);
}
.c-drawerNav a,
.c-drawerNav__a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	padding: 16px 12px !important;
	color: var(--hakoa-ink) !important;
	font-size: 1.02rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: background 0.2s ease, color 0.2s ease;
	border-radius: 8px;
}
/* タップ時のハイライト */
.c-drawerNav a:active,
.c-drawerNav a:hover {
	background: rgba(17, 100, 102, 0.06);
	color: var(--hakoa-accent) !important;
}
/* 各項目の右矢印アイコン（CSS疑似要素で付与） */
.c-drawerNav a::after,
.c-drawerNav__a::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: 2px solid #A0ABA8;
	border-right: 2px solid #A0ABA8;
	transform: rotate(45deg);
	transition: transform 0.2s ease, border-color 0.2s ease;
	flex-shrink: 0;
	margin-left: 12px;
}
.c-drawerNav a:hover::after,
.c-drawerNav a:active::after {
	border-color: var(--hakoa-accent);
	transform: translateX(3px) rotate(45deg);
}

/* ドロワー内の不要ウィジェット調整 */
#drawer_bottom {
	display: none !important;
}

/* --- 4. CTAカード（登録フォーム & LINE相談） --- */
.hakoa-drawer-cta {
	background: #F8FAF9;
	border: 1px solid rgba(17, 100, 102, 0.15);
	border-radius: 18px;
	padding: 20px 16px 16px;
	margin-top: 24px;
	text-align: center;
	box-shadow: 0 4px 16px rgba(17, 100, 102, 0.04);
}
.hakoa-drawer-cta__badge {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--hakoa-accent);
	background: #E8F4F2;
	padding: 4px 14px;
	border-radius: 999px;
	margin: 0 0 12px;
	letter-spacing: 0.03em;
}
.hakoa-drawer-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hakoa-drawer-cta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 20px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.hakoa-drawer-cta__btn:active {
	transform: scale(0.98);
}
/* 出店登録ボタン（メイン：深ティール） */
.hakoa-drawer-cta__btn--entry {
	background: var(--hakoa-accent);
	color: #FFFFFF !important;
	box-shadow: 0 4px 12px rgba(17, 100, 102, 0.25);
}
.hakoa-drawer-cta__btn--entry:hover {
	filter: brightness(1.08);
}
/* LINE相談ボタン（サブ：LINEグリーン） */
.hakoa-drawer-cta__btn--line {
	background: #06C755;
	color: #FFFFFF !important;
	box-shadow: 0 4px 12px rgba(6, 199, 85, 0.22);
}
.hakoa-drawer-cta__btn--line:hover {
	filter: brightness(1.05);
}
.hakoa-drawer-cta__note {
	font-size: 0.72rem;
	color: var(--hakoa-ink-mute);
	margin: 10px 0 0;
	line-height: 1.4;
}

/* --- 5. 閉じるボタン --- */
.p-drawer__close {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #F0F3F2 !important;
	color: var(--hakoa-ink-mute) !important;
	border: 1px solid #E2E7E5 !important;
	border-radius: 999px !important;
	padding: 9px 28px !important;
	margin: 28px auto 16px !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.p-drawer__close:hover,
.p-drawer__close:active {
	background: #E2E7E5 !important;
	color: var(--hakoa-ink) !important;
}

/* =========================================================
   16. レスポンシブ
   ========================================================= */
@media (max-width: 980px) {
	.hakoa-cards, .hakoa-contents__grid { grid-template-columns: repeat(3, 1fr); }
	.hakoa-strip { grid-template-columns: repeat(3, 1fr); }
	.hakoa-mission__in { grid-template-columns: 1fr; gap: 1.75rem; text-align: center; }
	.hakoa-mission__box { justify-self: center; }
	.hakoa-steps, .hakoa-voices, .hakoa-price-cards { grid-template-columns: repeat(2, 1fr); }
	.hakoa-guide-split, .hakoa-about-split { grid-template-columns: 1fr; gap: 1.8rem; }
	.hakoa-incl__list { grid-template-columns: 1fr; }
	.hakoa-places { grid-template-columns: repeat(2, 1fr); }
	.hakoa-prof th { width: auto; }
	.hakoa-detail { grid-template-columns: 1fr; gap: 2.4rem; }
	.hakoa-apply { position: static; }
}
@media (max-width: 720px) {
	/* ヘッダー検索ボタンを非表示（出店ポータルとしてのロゴ視認性を優先） */
	.l-header__searchBtn {
		display: none !important;
	}

	/* ヒーロー：スマホでは縦積みにし、写真をしっかり見せる */
	.hakoa-hero {
		padding-top: 1.2rem !important;
	}
	.hakoa-hero > .l-container {
		padding-inline: 0 !important; /* 画面端まで写真を広げる */
	}
	.hakoa-hero__frame {
		border-radius: 0;
		aspect-ratio: auto;
		min-height: auto;
		display: flex;
		flex-direction: column;
		box-shadow: none;
	}
	.hakoa-hero__bg {
		position: relative;
		inset: auto;
		width: 100%;
		height: 250px; /* マルシェ写真の緑の木々もしっかり見せる */
		object-fit: cover;
		object-position: center 15%;
	}
	.hakoa-hero__card {
		position: relative;
		max-width: 100%;
		margin: -24px 16px 0; /* 写真の上に少しだけ重なるモダンなカード */
		padding: 1.6rem 1.3rem;
		border-radius: 12px;
		background: #ffffff;
		box-shadow: 0 8px 24px -4px rgba(20, 32, 31, .12);
		border: 1px solid rgba(226, 231, 229, .8);
	}
	.hakoa-hero__card h1 {
		font-size: 1.4rem !important;
		line-height: 1.4 !important;
		margin-bottom: .6rem !important;
	}
	.hakoa-hero__card p {
		font-size: .83rem !important;
		line-height: 1.7 !important;
	}
	.hakoa-hero__actions {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: .5rem;
		margin-top: 1.1rem;
	}
	.hakoa-hero__btn {
		padding: .75rem .9rem;
		font-size: .8rem;
		white-space: nowrap;
	}
	.hakoa-br-pc {
		display: none;
	}

	.hakoa-row, .hakoa-row:nth-child(even) { grid-template-columns: 1fr; gap: 1.4rem; }
	.hakoa-row:nth-child(even) .hakoa-row__visual, .hakoa-row:nth-child(even) .hakoa-row__body { order: 0; }
	.hakoa-finder { grid-template-columns: 1fr; padding: 1.4rem 1.2rem; }
	.hakoa-cards, .hakoa-voices, .hakoa-steps, .hakoa-entry, .hakoa-ways, .hakoa-tri, .hakoa-prevnext, .hakoa-price-cards { grid-template-columns: 1fr; }

	/* 目次（丸ナビ）：スマホでは2列グリッドで適正サイズ（巨大化防止）＋文字サイズアップ */
	.hakoa-contents__grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 2rem 1.1rem !important;
	}
	.hakoa-cnt:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: 170px;
		margin-inline: auto;
	}
	.hakoa-cnt__circle {
		max-width: 130px;
		margin-inline: auto;
		margin-bottom: .65rem !important;
	}
	.hakoa-cnt__label {
		font-size: .95rem !important;
		margin-bottom: .2rem !important;
	}
	.hakoa-cnt__desc {
		font-size: .8rem !important;
		color: var(--hakoa-ink-mute) !important;
	}
	/* 出店の条件テーブル：スマホでは縦積みの美しい定義リストブロックに変換 */
	.hakoa-spec,
	.hakoa-spec caption,
	.hakoa-spec tbody,
	.hakoa-spec tr,
	.hakoa-spec th,
	.hakoa-spec td {
		display: block !important;
		width: 100% !important;
	}
	.hakoa-spec {
		border: 1px solid var(--hakoa-line) !important;
		border-radius: 8px !important;
		background: #ffffff !important;
		overflow: hidden !important;
		margin-top: 0 !important;
	}
	.hakoa-spec tr {
		border-bottom: 1px solid var(--hakoa-line) !important;
		padding: 1rem 1.1rem !important;
	}
	.hakoa-spec tr:last-child {
		border-bottom: none !important;
	}
	.hakoa-spec th {
		background: transparent !important;
		border: none !important;
		padding: 0 0 0.35rem 0 !important;
		width: 100% !important;
		font-size: 0.78rem !important;
		font-weight: 700 !important;
		color: var(--hakoa-accent) !important;
		letter-spacing: 0.04em !important;
		white-space: normal !important;
	}
	.hakoa-spec td {
		border: none !important;
		padding: 0 !important;
		font-size: 0.92rem !important;
		line-height: 1.75 !important;
		color: var(--hakoa-ink) !important;
	}
	.hakoa-prof, .hakoa-prof tbody, .hakoa-prof tr, .hakoa-prof th, .hakoa-prof td { display: block; width: auto; }
	.hakoa-prof th { border-bottom: 0; padding-bottom: 0; }
	.hakoa-prof td { padding-top: .3rem; }
	.hakoa-flow li { grid-template-columns: 4.2rem 1fr; gap: .9rem; }
	.hakoa-incl { padding: 1.6rem 1.4rem; }
	.hakoa-fee th, .hakoa-fee td { padding: .9rem .6rem; }
	.hakoa-fee__amt { font-size: 1.1rem; }
	.hakoa-prevnext a:last-child { text-align: left; }
	.hakoa-newslist a { grid-template-columns: 6rem 1fr; }
	.hakoa-newslist__t { grid-column: 1 / -1; }
	.hakoa-newslist .hakoa-readmore { display: none; }
	.hakoa-msg { grid-template-columns: 1fr; gap: 1.3rem; }
	.hakoa-msg__av { max-width: 9rem; }
	.hakoa-about-hero,
	.hakoa-page-hero {
		padding: 1rem 0 .5rem !important;
	}
	.hakoa-about-hero__frame,
	.hakoa-page-hero__frame {
		display: flex !important;
		flex-direction: column !important;
		padding: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		overflow: visible !important;
		min-height: auto !important;
	}
	.hakoa-about-hero__img-box,
	.hakoa-page-hero__img-box {
		position: static !important;
		width: 100% !important;
		aspect-ratio: 16 / 9 !important;
		border-radius: 12px !important;
		overflow: hidden !important;
		box-shadow: 0 6px 20px -4px rgba(20, 32, 31, .08) !important;
	}
	.hakoa-about-hero__bg,
	.hakoa-page-hero__bg {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		opacity: 1 !important;
		filter: none !important;
	}
	.hakoa-about-hero__card,
	.hakoa-page-hero__card {
		width: 100% !important;
		max-width: 100% !important;
		margin-top: -1.4rem !important;
		padding: 1.8rem 1.3rem 1.6rem !important;
		border-radius: 12px !important;
		box-shadow: 0 10px 28px -6px rgba(17, 100, 102, .14) !important;
		background: #fff !important;
	}
	.hakoa-about-hero__eyebrow,
	.hakoa-page-hero__eyebrow {
		font-size: 11px !important;
		margin-bottom: .6rem !important;
	}
	.hakoa-about-hero__title,
	.hakoa-page-hero__title {
		font-size: clamp(20px, 5.2vw, 24px) !important;
		line-height: 1.45 !important;
		margin-bottom: .8rem !important;
	}
	.hakoa-about-hero__lead,
	.hakoa-page-hero__lead {
		font-size: .86rem !important;
		line-height: 1.75 !important;
		margin-bottom: 1.1rem !important;
		text-align: left !important;
	}
	.hakoa-about-sec {
		padding: 3.2rem 0 !important;
	}
	.hakoa-places {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: .8rem !important;
	}
	.hakoa-tri {
		grid-template-columns: 1fr !important;
		gap: .9rem !important;
	}
	.hakoa-about__hook {
		font-size: clamp(17px, 4.8vw, 21px) !important;
		line-height: 1.6 !important;
		margin-bottom: 1.4rem !important;
	}
	.hakoa-about__turn {
		font-size: .88rem !important;
		line-height: 1.75 !important;
		padding: 1rem 0 1rem 1rem !important;
	}
	.hakoa-about__body,
	.hakoa-msg__t {
		font-size: .92rem !important;
		line-height: 1.85 !important;
		text-align: justify !important;
		text-justify: inter-ideograph !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.hakoa-about__body p,
	.hakoa-msg__t p {
		text-align: justify !important;
		text-justify: inter-ideograph !important;
	}
	.hakoa-about__intro {
		font-size: .96rem !important;
		line-height: 1.85 !important;
		text-align: justify !important;
		text-justify: inter-ideograph !important;
		margin-bottom: 1.1rem !important;
	}

	/* 登録2ステップ（スマホ最適化） */
	.hakoa-entry__flow {
		grid-template-columns: 1fr !important;
		gap: .9rem !important;
	}
	.hakoa-entry__card {
		padding: 1.6rem 1.3rem !important;
	}
	.hakoa-entry__card-title {
		font-size: 1.1rem !important;
	}
	.hakoa-entry__arrow {
		margin: .2rem auto !important;
	}
	.hakoa-entry__arrow svg {
		transform: rotate(0deg) !important;
	}
	.hakoa-entry__action-btn {
		width: 100%;
		padding: .9rem 1.2rem !important;
		font-size: .88rem !important;
	}

	/* ラストCTA（スマホ最適化） */
	.hakoa-cta-section {
		padding: 2.4rem 0 !important;
	}
	.hakoa-cta-card {
		padding: 2.4rem 1.4rem !important;
		border-radius: 16px !important;
	}
	.hakoa-cta-card__title {
		font-size: 1.35rem !important;
		line-height: 1.4 !important;
		margin-bottom: .8rem !important;
	}
	.hakoa-cta-card__lead {
		font-size: .86rem !important;
		line-height: 1.75 !important;
		margin-bottom: 1.4rem !important;
	}
	.hakoa-cta-card__btn {
		width: 100% !important;
		padding: 1rem 1.4rem !important;
		font-size: .95rem !important;
	}
}

/* =========================================================
   17. ヘッダー追従・追従フッター・ページトップ
   ---------------------------------------------------------
   ・Arkhe親テーマの正規ルール（position: sticky）に準拠。
   ・ヘッダーは通常フローに存在するため、お知らせバーの有無に
     関わらずブラウザが自動的に直下へコンテンツを配置する。
   ========================================================= */


/* 固定フッターエリアとページトップボタンの配置 */
.p-fixBtnWrap {
	position: fixed;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	left: 0;
	right: 0;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	padding: 0 16px;
}
.hakoa-fixEntry {
	pointer-events: auto;
	transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.2s ease, visibility 0.35s ease;
}
/* 最下層（フッターエリア到達時）にフェードアウトしてプライバシーポリシー等との被りを防止 */
.p-fixBtnWrap.is-footer-visible .hakoa-fixEntry {
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(14px) scale(0.95) !important;
	pointer-events: none !important;
}

#pagetop {
	pointer-events: auto;
	position: absolute;
	right: 16px;
	bottom: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(20, 32, 31, 0.85);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}
#pagetop:hover,
#pagetop:active {
	background: var(--hakoa-accent);
	transform: translateY(-2px);
}
/* 最上部（未スクロール時）では自然にフェードアウト */
[data-scrolled="false"] #pagetop {
	opacity: 0;
	pointer-events: none;
	transform: scale(0.85);
}
[data-scrolled="true"] #pagetop {
	opacity: 1;
	pointer-events: auto;
	transform: scale(1);
}

/* フッター最下部の余白確保（スマホ時のセーフエリア） */
@media (max-width: 768px) {
	.l-footer__foot {
		padding-bottom: calc(2.4rem + env(safe-area-inset-bottom, 0px)) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* =========================================================
   検証用サンプルお知らせバー
   ========================================================= */
.hakoa-sample-info-bar {
	display: block !important;
	background: #0F4C3A !important;
	color: #ffffff !important;
	font-size: 12px;
	padding: 8px 12px;
	text-align: center;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.03em;
}
.hakoa-sample-info-bar .l-header__barInner {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* =========================================================
   17. お知らせ・イベント情報（home.php / /info）
   ========================================================= */
.hakoa-news-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--hakoa-line-strong);
}
.hakoa-news-row {
	border-bottom: 1px solid var(--hakoa-line);
	transition: background-color 0.2s ease;
}
.hakoa-news-row:hover {
	background-color: var(--hakoa-surface-alt);
}
.hakoa-news-row__link {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 1.6rem;
	align-items: center;
	padding: 1.4rem 0.8rem;
	text-decoration: none;
	color: inherit;
}
.hakoa-news-row__thumb {
	width: 160px;
	height: 105px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--hakoa-surface-alt);
	flex-shrink: 0;
	position: relative;
}
.hakoa-news-row__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}
.hakoa-news-row:hover .hakoa-news-row__img {
	transform: scale(1.05);
}
.hakoa-news-row__thumb--noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #E8ECE9;
	color: var(--hakoa-ink-faint);
}
.hakoa-news-row__body {
	min-width: 0;
}
.hakoa-news-row__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
}
.hakoa-news-row__date {
	font-family: var(--hakoa-font-num);
	font-size: 0.82rem;
	color: var(--hakoa-ink-faint);
}
.hakoa-news-row__cat {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--hakoa-accent);
	background: var(--hakoa-surface-alt);
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	border: 1px solid var(--hakoa-line);
}
.hakoa-news-row__title {
	font-family: var(--hakoa-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 0.4rem;
	color: var(--hakoa-ink);
}
.hakoa-news-row:hover .hakoa-news-row__title {
	color: var(--hakoa-accent);
}
.hakoa-news-row__excerpt {
	font-size: 0.85rem;
	line-height: 1.8;
	color: var(--hakoa-ink-mute);
	margin: 0;
}

@media (max-width: 640px) {
	.hakoa-news-row__link {
		grid-template-columns: 100px 1fr;
		gap: 1rem;
		padding: 1.1rem 0.4rem;
	}
	.hakoa-news-row__thumb {
		width: 100px;
		height: 75px;
	}
	.hakoa-news-row__title {
		font-size: 0.95rem;
	}
	.hakoa-news-row__excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 0.8rem;
		line-height: 1.6;
	}
}

/* お知らせ準備中（エンプティステート） */
.hakoa-empty-state {
	text-align: center;
	padding: 3.5rem 1.8rem;
	background: var(--hakoa-surface-alt);
	border: 1px solid var(--hakoa-line);
	border-radius: 8px;
	max-width: 680px;
	margin: 0 auto;
}
.hakoa-empty-state__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--hakoa-accent);
	margin-bottom: 1.2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.hakoa-empty-state__title {
	font-family: var(--hakoa-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--hakoa-ink);
	margin: 0 0 0.8rem;
}
.hakoa-empty-state__desc {
	font-size: 0.88rem;
	line-height: 1.9;
	color: var(--hakoa-ink-mute);
	margin: 0 0 1.8rem;
}
.hakoa-empty-state__action {
	display: flex;
	justify-content: center;
}
.hakoa-empty-state__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	background: var(--hakoa-accent);
	color: #ffffff !important;
	font-size: 0.92rem;
	font-weight: 700;
	padding: 0.85rem 1.8rem;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(15, 76, 58, 0.22);
	transition: transform 0.2s ease, background 0.2s ease;
}
.hakoa-empty-state__btn:hover {
	background: var(--hakoa-accent-hover, #0A372A);
	transform: translateY(-2px);
}

/* イベント準備中ボックス */
.hakoa-event-empty-box {
	text-align: center;
	padding: 2.8rem 1.5rem;
	background: #ffffff;
	border: 1px dashed var(--hakoa-line-strong);
	border-radius: 8px;
	max-width: 680px;
	margin: 0 auto;
}
.hakoa-event-empty-box__lead {
	font-family: var(--hakoa-font-display);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.8;
	color: var(--hakoa-ink);
	margin: 0 0 0.8rem;
}
.hakoa-event-empty-box__sub {
	font-size: 0.82rem;
	line-height: 1.8;
	color: var(--hakoa-ink-mute);
	margin: 0;
}

/* 共通一覧ボタン */
.hakoa-btn-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--hakoa-font-display);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--hakoa-ink);
	text-decoration: none;
	padding: 0.85rem 2.2rem;
	border: 1px solid var(--hakoa-ink);
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.hakoa-btn-more:hover {
	background-color: var(--hakoa-ink);
	color: #ffffff;
}

/* ページネーション */
.hakoa-pagination {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
}
.hakoa-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 0.5rem;
	margin: 0 0.2rem;
	font-size: 0.85rem;
	color: var(--hakoa-ink);
	text-decoration: none;
	border: 1px solid var(--hakoa-line);
	border-radius: 4px;
	transition: all 0.2s ease;
}
.hakoa-pagination .page-numbers.current {
	background: var(--hakoa-accent);
	color: #ffffff;
	border-color: var(--hakoa-accent);
	font-weight: 700;
}
.hakoa-pagination .page-numbers:hover:not(.current) {
	background: var(--hakoa-surface-alt);
	border-color: var(--hakoa-ink);
}

/* =========================================================
   18. トップページ：最新お知らせ（.hakoa-news-cards）
   ========================================================= */
.hakoa-news-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.8rem;
}
.hakoa-news-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var(--hakoa-line);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.hakoa-news-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	border-color: var(--hakoa-accent);
}
.hakoa-news-card__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--hakoa-surface-alt);
	overflow: hidden;
}
.hakoa-news-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}
.hakoa-news-card:hover .hakoa-news-card__img {
	transform: scale(1.05);
}
.hakoa-news-card__noimg {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #EEF2F0;
	color: var(--hakoa-ink-faint);
}
.hakoa-news-card__body {
	padding: 1.2rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.hakoa-news-card__meta {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.6rem;
}
.hakoa-news-card__date {
	font-family: var(--hakoa-font-num);
	font-size: 0.82rem;
	color: var(--hakoa-ink-faint);
}
.hakoa-news-card__cat {
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--hakoa-accent);
	background: var(--hakoa-surface-alt);
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	border: 1px solid var(--hakoa-line);
}
.hakoa-news-card__title {
	font-family: var(--hakoa-font-display);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.6;
	margin: 0;
	color: var(--hakoa-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s ease;
}
.hakoa-news-card:hover .hakoa-news-card__title {
	color: var(--hakoa-accent);
}

/* スマホ表示（768px以下）：短冊崩れを解消し、洗練された横型リストに自動変換 */
@media (max-width: 768px) {
	.hakoa-news-cards {
		grid-template-columns: 1fr !important;
		gap: 0.9rem !important;
	}
	.hakoa-news-card {
		flex-direction: row !important;
		align-items: center !important;
		padding: 0.75rem !important;
		border-radius: 8px !important;
	}
	.hakoa-news-card__thumb {
		width: 88px !important;
		height: 88px !important;
		aspect-ratio: 1 / 1 !important;
		border-radius: 6px !important;
		flex-shrink: 0 !important;
	}
	.hakoa-news-card__body {
		padding: 0 0 0 1rem !important;
		min-width: 0 !important;
	}
	.hakoa-news-card__meta {
		margin-bottom: 0.35rem !important;
		gap: 0.6rem !important;
	}
	.hakoa-news-card__date {
		font-size: 0.76rem !important;
	}
	.hakoa-news-card__cat {
		font-size: 0.65rem !important;
		padding: 0.1rem 0.45rem !important;
	}
	.hakoa-news-card__title {
		font-size: 0.9rem !important;
		line-height: 1.5 !important;
		-webkit-line-clamp: 2 !important;
	}
}