@charset "UTF-8";

/* ======================================================================
   At.明石焼名鑑 個別CSS  v1.0
   対象: 固定ページテンプレート page-akashiyaki.php（/akashiyaki_shop）
   置き場所: /wp-content/themes/swell_child/assets/
   ----------------------------------------------------------------------
   ■ 後任者への申し送り（読んでから触ること）

   1) このページはテンプレート駆動のため、CSSは固定ページの個別CSS欄では
      なくテーマのファイルに置いている。総合資料 5-4-3「ページ固有の装飾は
      個別CSS欄」の例外。テンプレート・JS と同じ場所でFTP管理するため。
      版番号はファイル名に持たせ、全文管理する（差分追記はしない）。

   2) 色・角丸・影・書体は、総合資料 5-3 の「CSS統一辞書」に従っている。
      独自の色を足さないこと。使ってよいのは次だけ:
        --ak-navy #081a33 / --ak-navy-soft #102b50
        --ak-gold #c9a24a / --ak-gold-soft #e5cf91
        --ak-cream #fffaf0
        --ak-text #1d2430 / --ak-muted #5f6875
        --ak-accent（コーナー差し色。At.明石焼系は茶 #6b4020）
      これらは共通CSS側の :root で定義される。ここでは var(…, 既定値) の
      形で参照し、共通CSS が先に読まれなくても崩れないようにしてある。

   3) 差し色 --ak-accent は .ak-page--meishokan で定義する（5-3-2 の規約）。
      名鑑は At.明石焼コーナーの中核なので、At.明石焼と同じ茶を使う。

   4) クラス名は ak- 接頭辞の BEM（5-3-7）。名鑑固有の部品は
        .ak-meishokan__〜  … ページの器（リード・絞り込み・エリア見出し）
        .ak-shopCard__〜   … 店舗カード1枚
      に収めてある。汎用名（.ak-card 等）は使わない。サイト側の名前空間と
      衝突するため。2026-09-15 に一度この失敗をしている。

   5) カードの開閉は <details>。JSが止まっても開くし、Ctrl+F が閉じた
      カードの中まで拾う。::-webkit-details-marker を消しているので、
      三角マーカーの代わりに .ak-shopCard__chevron を回している。

   6) 258枚のカードが並ぶページなので、入口カード（5-4-2）の作法とは
      意図的に変えている点がある:
        ・面リンクにしない（カードは開閉するものでリンクではない）
        ・カード上辺の4px罫は置かない（258本並ぶと煩いため）
        ・差し色はエリア見出しの縦罫とホバー枠にだけ使う
   ====================================================================== */


/* ----------------------------------------------------------------------
   1. ページの器
   ---------------------------------------------------------------------- */

.ak-page--meishokan {
	/* コーナー差し色（総合資料 5-3-2 / At.明石焼と共通の茶） */
	--ak-accent: #6b4020;
	--ak-accent-soft: #8a5a34;

	/* 固定ページ本文の地はクリーム→淡クリーム（5-3-3） */
	background: linear-gradient(180deg, #fffaf0 0%, #f7f1e3 100%);
	color: var(--ak-text, #1d2430);
	border-radius: 22px;
	padding: clamp(18px, 2.4vw, 30px) 0;
}

.ak-page--meishokan .ak-page__inner {
	max-width: 1000px;            /* At.明石焼系の内側幅（5-3-9） */
	margin-inline: auto;
	padding-inline: clamp(14px, 2vw, 26px);
}

.ak-page--meishokan .ak-page__title {
	font-family: var(--ak-serif, "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif);
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--ak-navy, #081a33);
	margin: 0 0 clamp(16px, 2vw, 26px);
}

.ak-page--meishokan .ak-page__intro {
	font-size: 0.9rem;
	line-height: 1.9;
	margin: 0 0 clamp(16px, 2vw, 26px);
}


/* ----------------------------------------------------------------------
   2. 白パネル（.ak-section）— 5-3-6 の角丸22px・淡い影・薄い紺枠
   ---------------------------------------------------------------------- */

.ak-page--meishokan .ak-section {
	background: #fff;
	border: 1px solid rgba(8, 26, 51, 0.08);
	border-radius: 22px;
	box-shadow: 0 6px 22px rgba(8, 26, 51, 0.06);
	padding: clamp(20px, 2.6vw, 34px);
	margin-block-start: clamp(20px, 2.6vw, 36px);
}

.ak-page--meishokan .ak-section:first-child {
	margin-block-start: 0;
}

/* セクション見出し（5-3-5）。中央寄せ・明朝・紺、下線は金、前後に ✦ */
.ak-page--meishokan .ak-section__title {
	position: static;
	background: none;
	border: none;
	transform: none;
	font-family: var(--ak-serif, "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif);
	font-size: clamp(1.15rem, 1.3vw, 1.35rem);
	letter-spacing: 0.1em;
	text-align: center;
	color: var(--ak-navy, #081a33);
	padding-bottom: 12px;
	margin: 0 0 18px;
	background: linear-gradient(90deg, transparent, var(--ak-gold, #c9a24a), transparent)
		bottom center / min(240px, 70%) 2px no-repeat;
}

.ak-page--meishokan .ak-section__title::before,
.ak-page--meishokan .ak-section__title::after {
	content: "✦";
	color: var(--ak-gold, #c9a24a);
	font-size: 0.72em;
	margin: 0 0.6em;
	vertical-align: 0.1em;
}


/* ----------------------------------------------------------------------
   3. リード・注意書き・エリアジャンプ
   ---------------------------------------------------------------------- */

.ak-meishokan__lead {
	font-size: 0.9rem;
	line-height: 1.85;
	margin: 0 0 12px;
}

.ak-meishokan__note {
	font-size: 0.82rem;
	line-height: 1.8;
	color: var(--ak-muted, #5f6875);
	background: var(--ak-cream, #fffaf0);
	border: 1px solid rgba(201, 162, 74, 0.28);   /* 金・薄（5-3-1） */
	border-radius: 10px;
	padding: 11px 14px;
	margin: 0 0 16px;
}

.ak-meishokan__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 14px;
	font-size: 0.8rem;
	line-height: 1.6;
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid rgba(8, 26, 51, 0.08);
}

.ak-meishokan__jump a {
	color: var(--ak-navy, #081a33);
	text-decoration: none;
	border-bottom: 1px solid rgba(201, 162, 74, 0.55);
	transition: color 0.18s ease, border-color 0.18s ease;
}

.ak-meishokan__jump a:hover,
.ak-meishokan__jump a:focus {
	color: var(--ak-accent, #6b4020);
	border-bottom-color: var(--ak-accent, #6b4020);
}


/* ----------------------------------------------------------------------
   4. 絞り込みバー
   スクロール追従するので、下を流れるカードを隠せる不透明な地が要る。
   ---------------------------------------------------------------------- */

.ak-meishokan__bar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid rgba(8, 26, 51, 0.08);
	border-radius: 14px;
	padding: 10px 12px;
	margin-block-start: clamp(20px, 2.6vw, 36px);
	box-shadow: 0 8px 24px rgba(8, 26, 51, 0.10);
}

.ak-meishokan__search {
	flex: 1 1 200px;
}

.ak-meishokan__bar input[type="search"],
.ak-meishokan__bar select {
	width: 100%;
	height: 38px;
	font-size: 0.9rem;
	color: var(--ak-text, #1d2430);
	background: var(--ak-cream, #fffaf0);
	border: 1px solid rgba(8, 26, 51, 0.12);
	border-radius: 9px;                 /* 入力欄は 9〜10px（5-3-6） */
	padding: 0 10px;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.ak-meishokan__bar select {
	width: auto;
	max-width: 100%;
	padding-right: 28px;
	/* ブラウザ既定の矢印は地色によって見えなくなるため自前で描く */
	background-image: linear-gradient(45deg, transparent 50%, var(--ak-muted, #5f6875) 50%),
		linear-gradient(135deg, var(--ak-muted, #5f6875) 50%, transparent 50%);
	background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.ak-meishokan__bar input[type="search"]:focus,
.ak-meishokan__bar select:focus {
	outline: 2px solid var(--ak-gold, #c9a24a);
	outline-offset: 1px;
}

.ak-meishokan__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	color: var(--ak-muted, #5f6875);
	white-space: nowrap;
	cursor: pointer;
}

.ak-meishokan__count {
	font-size: 0.82rem;
	color: var(--ak-muted, #5f6875);
	margin: 14px 0 4px;
}

.ak-meishokan__empty {
	font-size: 0.9rem;
	color: var(--ak-muted, #5f6875);
	padding: 24px 0;
}


/* ----------------------------------------------------------------------
   5. エリア見出し
   ---------------------------------------------------------------------- */

.ak-meishokan__group {
	margin: clamp(24px, 2.6vw, 34px) 0 0;
	scroll-margin-top: 72px;
}

.ak-meishokan__groupTitle {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--ak-serif, "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif);
	font-size: clamp(1rem, 1.1vw, 1.15rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--ak-navy, #081a33);
	background: none;
	border: none;
	border-left: 4px solid var(--ak-accent, #6b4020);   /* 差し色はここだけ */
	border-radius: 0;
	padding: 2px 0 2px 12px;
	margin: 0 0 12px;
}

.ak-meishokan__groupCount {
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--ak-muted, #5f6875);
}


/* ----------------------------------------------------------------------
   6. 店舗カード
   ---------------------------------------------------------------------- */

.ak-shopCard {
	background: #fff;
	color: var(--ak-text, #1d2430);
	border: 1px solid rgba(8, 26, 51, 0.08);
	border-radius: 16px;                /* カードは 14〜18px（5-3-6） */
	margin: 0 0 10px;
	scroll-margin-top: 72px;
	box-shadow: 0 8px 24px rgba(8, 26, 51, 0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ak-shopCard:hover {
	box-shadow: 0 14px 30px rgba(8, 26, 51, 0.14);
	border-color: rgba(107, 64, 32, 0.35);
}

.ak-shopCard[open] {
	box-shadow: 0 14px 30px rgba(8, 26, 51, 0.14);
	border-color: rgba(201, 162, 74, 0.45);
}

.ak-shopCard__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: clamp(13px, 1.4vw, 18px) clamp(14px, 1.6vw, 20px);
	cursor: pointer;
	list-style: none;
}

.ak-shopCard__head::-webkit-details-marker {
	display: none;
}

.ak-shopCard__main {
	display: block;
	min-width: 0;
}

.ak-shopCard__name {
	display: block;
	font-family: var(--ak-serif, "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif);
	font-size: clamp(1.02rem, 1.1vw, 1.15rem);
	line-height: 1.45;
	letter-spacing: 0.04em;
	color: var(--ak-navy, #081a33);
	margin-bottom: 4px;
}

.ak-shopCard__copy {
	display: block;
	font-size: 0.82rem;
	line-height: 1.7;
	color: var(--ak-muted, #5f6875);
	margin-bottom: 4px;
}

.ak-shopCard__addr {
	display: block;
	font-size: 0.82rem;
	line-height: 1.6;
}

.ak-shopCard__chevron {
	flex: none;
	width: 9px;
	height: 9px;
	margin-top: 9px;
	border-right: 2px solid var(--ak-accent, #6b4020);
	border-bottom: 2px solid var(--ak-accent, #6b4020);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
	opacity: 0.55;
}

.ak-shopCard:hover .ak-shopCard__chevron {
	opacity: 1;
}

.ak-shopCard[open] .ak-shopCard__chevron {
	transform: rotate(-135deg);
	margin-top: 13px;
	opacity: 1;
}

/* 閉店した店。淡くするが、消さない（検索で「閉店したのか載っていないのか」を
   区別できることが、閉店店舗を残す目的そのもの） */
.ak-shopCard.is-closed {
	background: #f7f5f1;
	box-shadow: none;
}

.ak-shopCard.is-closed .ak-shopCard__name,
.ak-shopCard.is-closed .ak-shopCard__addr {
	color: var(--ak-muted, #5f6875);
}

.ak-shopCard__badge {
	display: inline-block;
	font-family: system-ui, sans-serif;
	font-size: 0.68rem;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--ak-gold-soft, #e5cf91);
	background: var(--ak-navy, #081a33);
	border: 1px solid rgba(201, 162, 74, 0.55);
	border-radius: 999px;               /* チップは 999px（5-3-6） */
	padding: 4px 9px;
	margin-left: 7px;
	vertical-align: 3px;
}


/* ----------------------------------------------------------------------
   7. カードの中身
   ---------------------------------------------------------------------- */

.ak-shopCard__body {
	padding: 0 clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px);
	border-top: 1px solid rgba(8, 26, 51, 0.08);
}

.ak-shopCard__notice {
	font-size: 0.82rem;
	color: var(--ak-gold-soft, #e5cf91);
	background: var(--ak-navy, #081a33);
	border-radius: 10px;
	padding: 9px 12px;
	margin: 14px 0 0;
}

.ak-shopCard__desc {
	font-size: 0.88rem;
	line-height: 1.9;
	margin: 14px 0 0;
}

.ak-shopCard__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.84rem;
	margin: 14px 0 0;
	table-layout: fixed;
	background: none;
}

.ak-shopCard__table th,
.ak-shopCard__table td {
	text-align: left;
	vertical-align: top;
	padding: 8px 0;
	border-bottom: 1px solid rgba(8, 26, 51, 0.06);
	line-height: 1.7;
	word-break: break-word;
	background: none;
}

.ak-shopCard__table th {
	width: 6.5em;
	font-weight: 400;
	color: var(--ak-muted, #5f6875);
	padding-right: 10px;
}

.ak-shopCard__table a {
	color: var(--ak-accent, #6b4020);
	text-underline-offset: 2px;
}

.ak-shopCard__table a:hover {
	color: var(--ak-accent-soft, #8a5a34);
}

.ak-shopCard__pending {
	font-size: 0.76rem;
	color: var(--ak-muted, #5f6875);
	opacity: 0.75;
}

.ak-shopCard__map {
	margin: 16px 0 0;
	line-height: 0;
	border: 1px solid rgba(201, 162, 74, 0.35);   /* 額装は金の細枠（5-6-3 の作法に倣う） */
	border-radius: 14px;
	overflow: hidden;
	background: var(--ak-cream, #fffaf0);
	min-height: 120px;
	box-shadow: 0 6px 18px rgba(8, 26, 51, 0.12);
}

.ak-shopCard__map iframe {
	display: block;
	width: 100%;
}


/* ----------------------------------------------------------------------
   8. エラー表示と診断ページ（?akashiyaki_check=1）
   ---------------------------------------------------------------------- */

.ak-meishokan__error {
	border-color: rgba(163, 53, 47, 0.35);
	background: #fdf6f5;
}

.ak-meishokan__errorTitle {
	font-weight: 600;
	color: #a3352f;
	margin: 0 0 8px;
}

.ak-meishokan__check {
	font-size: 0.86rem;
	line-height: 1.85;
}

.ak-meishokan__check .ak-shopCard__table th {
	width: 11em;
}

.ak-meishokan__ok {
	color: #2f6b45;
}

.ak-meishokan__ng {
	color: #a3352f;
	font-weight: 600;
}


/* ----------------------------------------------------------------------
   9. 画面が狭いとき
   ---------------------------------------------------------------------- */

@media (max-width: 600px) {
	.ak-page--meishokan {
		border-radius: 16px;
		padding: 18px 0;
	}

	.ak-page--meishokan .ak-page__inner {
		padding-inline: 14px;
	}

	.ak-page--meishokan .ak-section {
		padding: 18px 15px;
		border-radius: 16px;
	}

	.ak-meishokan__bar {
		padding: 9px 10px;
	}

	.ak-meishokan__bar select {
		flex: 1 1 auto;
	}

	.ak-shopCard__table th {
		width: 5.5em;
	}
}