/* =========================================================
   札幌ヒストリア — 共通デザインシステム
   ヒストリア各地域サイト（萩・神石高原ほか）と共通のトンマナ
   Color: 藍(indigo) / 和紙(washi) / 開拓使の赤星(vermilion) / 北極星の金(kiboshi) / ライラック(lilac) / 雪青(snow)
   Type:  見出し = Shippori Mincho(明朝) / 本文 = Noto Sans JP
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root{
  /* --- カラートークン（ライト = 和紙基調。ヒストリア共通） --- */
  --ink:        #1f1a14;   /* 墨（本文の視認性を高めるため、やや濃く） */
  --ink-soft:   #3f382f;   /* 補足文（萩より一段濃くしてコントラストを確保） */
  --washi:      #f7f0dd;
  --washi-deep: #ecdfba;
  --washi-line: #d3c08f;
  --paper:      #fcf8ee;
  --indigo:     #1c2c3d;
  --indigo-deep:#0e1a24;
  --indigo-mid: #2b4054;
  --ochre:      #9c6f2c;
  --ochre-soft: #d9b273;
  --vermilion:  #a8322a;   /* 開拓使の赤い星（北極星） */
  --vermilion-deep:#7e2519;
  --kiboshi:    #e0a53a;   /* 北極星の金・とうきび色（萩の「夏みかん」に相当） */
  --mikan:      var(--kiboshi);
  --lilac:      #6f5a93;   /* 札幌市の木・ライラック */
  --snow:       #2f6189;   /* 雪青 */
  --pine:       #3c5744;

  --surface:      var(--washi);
  --surface-card: var(--paper);
  --surface-deep: var(--washi-deep);
  --text:         var(--ink);
  --text-soft:    var(--ink-soft);
  --line:         var(--washi-line);
  --accent:       var(--vermilion);
  --accent-2:     var(--ochre);
  --header-bg:    var(--indigo);
  --header-fg:    var(--washi);

  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Microsoft JhengHei", "PingFang TC", sans-serif;

  color-scheme: light;
}

/* ダークモード（OS設定）は使用せず、常にライト配色（和紙基調）に統一しています（ヒストリア共通）。 */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-padding-top:80px;-webkit-text-size-adjust:100%;}
body{
  background:var(--surface);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;              /* 視認性：萩(16px)より大きめ */
  line-height:1.95;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 0;
}
html[lang="en"] body{letter-spacing:0;line-height:1.8;}
/* 繁體中文：台湾の字形で表示（日本語フォントの字形を避ける） */
html[lang="zh-Hant-TW"]{
  --font-body: "PingFang TC","Microsoft JhengHei","Noto Sans TC","Heiti TC",sans-serif;
  --font-display: "Noto Serif TC","Songti TC","PMingLiU","MingLiU",serif;
}
img{max-width:100%;}
[hidden]{display:none!important;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--text);
  font-weight:700;
  line-height:1.45;
  text-wrap:balance;
  word-break:auto-phrase;   /* 日本語の見出しを文節で改行 */
  margin:0;
}
a{color:inherit;}
p{margin:0 0 1.1em;max-width:40em;}
strong{font-weight:700;color:var(--text);background:linear-gradient(transparent 62%, rgba(224,165,58,.32) 62%);}
.hero strong,.site-footer strong{background:none;color:inherit;}
::selection{background:var(--accent);color:var(--washi);}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-body);
  font-size:.8rem;
  letter-spacing:.28em;
  font-weight:700;
  color:var(--accent);
  text-transform:uppercase;
  margin:0;
}
.eyebrow::before{
  content:"";width:1.4em;height:1px;background:var(--accent);display:inline-block;
}

/* ---------- レイアウト共通 ---------- */
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px;}
.col{max-width:760px;margin:0 auto;padding-inline:20px;}

/* ---------- ヘッダー（ハンバーガーメニュー） ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:var(--header-bg);
  color:var(--header-fg);
  border-bottom:1px solid rgba(216,198,156,.18);
}
.site-header .wrap{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-block:14px;padding-right:132px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-weight:700;font-size:1rem;letter-spacing:.04em;
  text-decoration:none;color:var(--header-fg);
  white-space:nowrap;
}
.brand .mon{width:28px;height:28px;flex:none;}
.brand-text{display:flex;flex-direction:column;line-height:1.32;gap:1px;}
.brand-text .brand-ja{font-size:1.02rem;}
.brand small{display:block;font-family:var(--font-body);font-weight:500;font-size:.6rem;letter-spacing:.18em;color:var(--ochre-soft);}

.mainnav{display:flex;flex-direction:column;gap:3px;align-items:flex-end;}
.mainnav .nav-row{display:flex;flex-wrap:wrap;gap:2px 4px;justify-content:flex-end;}
.mainnav a{
  font-size:.84rem;letter-spacing:.02em;padding:6px 10px;border-radius:3px;
  text-decoration:none;color:var(--header-fg);opacity:.86;white-space:nowrap;
}
.mainnav a:hover{opacity:1;background:rgba(216,198,156,.12);}
.mainnav a[aria-current="page"]{opacity:1;color:var(--kiboshi);font-weight:700;}
.hp-top-link{font-size:12px;color:inherit;opacity:.72;text-decoration:none;white-space:nowrap;margin-right:14px;}
.hp-top-link:hover{opacity:1;text-decoration:underline;}

.nav-toggle-btn{display:none;}
.mainnav .hp-top-in-menu{display:none;color:var(--ochre-soft);}

/* ヘッダのナビゲーションは全画面幅でハンバーガーメニュー（ヒストリア共通のボタン意匠） */
@media all{
  .site-header .wrap{flex-wrap:wrap;padding-block:12px;padding-right:168px;}
  .nav-toggle-btn{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:10px;right:128px;
    width:40px;height:40px;padding:0;margin:0;
    background:transparent;border:1px solid rgba(216,198,156,.45);border-radius:4px;
    cursor:pointer;z-index:6;
  }
  .nav-toggle-btn span{
    position:relative;display:block;width:18px;height:2px;background:var(--header-fg);
    transition:background .15s ease;
  }
  .nav-toggle-btn span::before,.nav-toggle-btn span::after{
    content:"";position:absolute;left:0;width:18px;height:2px;background:var(--header-fg);
    transition:transform .2s ease;
  }
  .nav-toggle-btn span::before{top:-6px;}
  .nav-toggle-btn span::after{top:6px;}
  .site-header .wrap.nav-open .nav-toggle-btn span{background:transparent;}
  .site-header .wrap.nav-open .nav-toggle-btn span::before{transform:translateY(6px) rotate(45deg);}
  .site-header .wrap.nav-open .nav-toggle-btn span::after{transform:translateY(-6px) rotate(-45deg);}

  .mainnav{
    display:none;align-items:stretch;width:100%;order:5;
    margin-top:10px;padding-top:6px;border-top:1px solid rgba(216,198,156,.18);
    max-height:calc(100vh - 80px);overflow-y:auto;
    width:calc(100% + 148px);flex-shrink:0;
  }
  .site-header .wrap.nav-open .mainnav{display:flex;}
  .mainnav .nav-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 16px;justify-content:stretch;}
  .mainnav{flex-direction:column;gap:0;padding-bottom:8px;}
  .mainnav a{padding:11px 8px;font-size:.95rem;border-bottom:1px solid rgba(216,198,156,.12);border-radius:0;}
  .hp-top-link{margin-right:14px;margin-left:auto;}
}
@media (max-width:560px){
  .hp-top-link{display:none;}
  .mainnav .hp-top-in-menu{display:block;}
}

@media (max-width:380px){
  .site-header .wrap{padding-right:150px;}
  .brand{gap:6px;}
  .brand small{display:none;}
  .brand-text{gap:0;}
  .brand .mon{width:22px;height:22px;}
  .brand-text .brand-ja{font-size:.88rem;}
  .nav-toggle-btn{right:118px;width:36px;height:36px;top:10px;}
}

/* ---------- 言語切り替え ---------- */
.lang-switch{
  position:absolute;top:14px;right:24px;z-index:5;
  display:flex;gap:4px;
}
.lang-switch a{
  font-size:.72rem;font-weight:600;letter-spacing:.02em;line-height:1.5;
  padding:4px 8px;border:1px solid rgba(216,198,156,.4);border-radius:3px;
  color:var(--header-fg);opacity:.75;text-decoration:none;
}
.lang-switch a:hover{opacity:1;background:rgba(216,198,156,.12);}
.lang-switch a.active{opacity:1;color:var(--kiboshi);border-color:var(--kiboshi);font-weight:700;}
@media all{
  .lang-switch{top:16px;right:16px;}
  .lang-switch a{padding:4px 7px;font-size:.7rem;}
}

/* ---------- 雪の結晶の区切り線 ---------- */
.wave-divider{
  height:22px;width:100%;
  background-image:radial-gradient(circle at 10px 0, transparent 9px, var(--line) 9.5px, var(--line) 10.5px, transparent 11px);
  background-size:20px 20px;
  background-position:center top;
  opacity:.55;
}

/* ---------- ヒーロー ---------- */
.hero{
  --hero-accent: var(--kiboshi);
  position:relative;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, color-mix(in srgb, var(--hero-accent) 24%, transparent), transparent 60%),
    linear-gradient(160deg, var(--indigo-deep), var(--indigo) 55%, var(--indigo-mid));
  color:var(--washi);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--hero-accent);z-index:3;
}
.hero .wrap{
  padding-block:60px 52px;
  display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center;
}
@media (max-width:820px){ .hero .wrap{grid-template-columns:1fr;padding-block:40px 34px;} }

.hero.hero-illust{min-height:560px;display:flex;align-items:center;}
.hero-illust-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:62% 50%;z-index:0;
}
.hero-illust-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgba(14,26,36,.92) 0%, rgba(14,26,36,.84) 32%, rgba(14,26,36,.5) 56%, rgba(14,26,36,.12) 80%, transparent 94%),
    linear-gradient(0deg, rgba(14,26,36,.55) 0%, transparent 34%);
}
.hero.hero-illust .wrap{position:relative;z-index:2;display:block;padding-block:84px 60px;}
.hero.hero-illust .wrap > div{max-width:640px;}
.hero.hero-illust h1{font-size:clamp(1.75rem,3.5vw,2.7rem);}
@media (max-width:820px){
  .hero.hero-illust{min-height:440px;}
  .hero.hero-illust .wrap{padding-block:48px 38px;}
  .hero-illust-scrim{background:linear-gradient(180deg, rgba(14,26,36,.55) 0%, rgba(14,26,36,.9) 60%, rgba(14,26,36,.95) 100%);}
}

.hero .eyebrow{color:var(--hero-accent);}
.hero .eyebrow::before{background:var(--hero-accent);}
.hero h1{
  font-size:clamp(1.9rem, 4.2vw, 3rem);
  color:var(--washi);
  margin-top:.5em;
}
.hero .lede{
  color:#e6dcc4;font-size:1.02rem;line-height:1.95;margin-top:1em;max-width:36em;
}
.hero-art{width:100%;max-width:300px;height:auto;margin-inline:auto;display:block;filter:drop-shadow(0 8px 24px rgba(0,0,0,.35));}
@media (max-width:820px){ .hero-art{max-width:200px;} }

.crumbline{font-size:.8rem;color:#c9bc9b;letter-spacing:.06em;margin-bottom:8px;}
.crumbline a{text-decoration:none;border-bottom:1px solid rgba(185,172,140,.5);}

/* ---------- セクション共通 ---------- */
section{padding-block:60px;}
section + section{border-top:1px solid var(--line);}
section.alt{background:var(--surface-deep);}
.section-head{max-width:680px;margin-bottom:30px;}
.section-head h2{font-size:clamp(1.5rem,2.7vw,2.05rem);margin-top:.45em;}
.section-head p{color:var(--text-soft);margin-top:.8em;}
.col h3{font-size:1.2rem;margin:1.8em 0 .6em;padding-left:.7em;border-left:4px solid var(--accent);}

/* ---------- カードグリッド ---------- */
.grid{display:grid;gap:22px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:820px){ .grid.cols-2, .grid.cols-3{grid-template-columns:1fr;} }

.card{
  background:var(--surface-card);
  border:1px solid var(--line);
  border-radius:2px;
  padding:24px 22px;
  position:relative;
}
.card::before{content:"";position:absolute;top:0;left:0;width:26px;height:3px;background:var(--accent);}
.card h4{font-size:1.1rem;margin-bottom:.5em;}
.card p{font-size:.95rem;color:var(--text-soft);margin:0 0 .6em;}
.card p:last-child{margin-bottom:0;}

/* ---------- ナビカード（トップページの入口） ---------- */
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .grid.cols-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .grid.cols-4{grid-template-columns:1fr;} }

.room-grid .navcard:nth-child(1){--nc-color:#6f5a93;}
.room-grid .navcard:nth-child(2){--nc-color:#2f6189;}
.room-grid .navcard:nth-child(3){--nc-color:#a8322a;}
.room-grid .navcard:nth-child(4){--nc-color:#9c6f2c;}
.room-grid .navcard:nth-child(5){--nc-color:#3c5744;}
.room-grid .navcard:nth-child(6){--nc-color:#3f7d9a;}
.room-grid .navcard:nth-child(7){--nc-color:#c0662a;}
.room-grid .navcard:nth-child(8){--nc-color:#7e2519;}
.room-grid .navcard:nth-child(9){--nc-color:#3a322a;}
.room-grid .navcard:nth-child(10){--nc-color:#a15c72;}
.room-grid .navcard:nth-child(11){--nc-color:#1c2c3d;}

.navcard{
  display:flex;flex-direction:column;gap:9px;
  background:var(--surface-card);border:1px solid var(--line);
  border-top:3px solid var(--nc-color, var(--accent));
  padding:18px 18px 16px;text-decoration:none;color:var(--text);
  position:relative;overflow:hidden;transition:transform .16s ease, box-shadow .16s ease;
}
.navcard:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(20,14,6,.16);}
.navcard .nc-head{display:flex;align-items:center;gap:9px;}
.navcard .num{font-family:var(--font-display);font-size:.72rem;letter-spacing:.12em;color:var(--nc-color, var(--accent-2));font-weight:700;}
.navcard h3{font-size:1.06rem;line-height:1.45;margin:0;}
.navcard p{color:var(--text-soft);font-size:.86rem;margin:0;max-width:none;line-height:1.7;}
.navcard .icon{width:28px;height:28px;flex:none;}
.navcard .go{margin-top:auto;padding-top:2px;font-size:.78rem;letter-spacing:.05em;color:var(--nc-color, var(--accent));font-weight:600;}

/* ---------- 人物カード ---------- */
.person{
  display:grid;grid-template-columns:auto 1fr;gap:18px;
  padding:22px;background:var(--surface-card);border:1px solid var(--line);
}
.person .mon{
  width:64px;height:64px;flex:none;border-radius:50%;
  background:var(--surface-deep);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.person .mon img{width:100%;height:100%;object-fit:cover;}
.person h4{font-size:1.15rem;}
.person .role{font-size:.84rem;color:var(--accent);letter-spacing:.04em;margin:.2em 0 .6em;font-weight:600;}
.person p{font-size:.95rem;color:var(--text-soft);margin:0;}
@media (max-width:480px){.person{grid-template-columns:1fr;}}

/* ---------- 引用 ---------- */
.stamp-quote{
  display:flex;gap:20px;align-items:flex-start;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:26px;margin-block:18px;
}
.stamp{
  flex:none;width:56px;height:56px;border-radius:6px;
  background:var(--vermilion);color:var(--washi);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;line-height:1.1;letter-spacing:.05em;
  writing-mode:vertical-rl;
}
html[lang="en"] .stamp{writing-mode:horizontal-tb;font-size:.7rem;text-align:center;line-height:1.2;}
.stamp-quote blockquote{margin:0;font-family:var(--font-display);font-size:1.18rem;line-height:1.85;}
.stamp-quote cite{display:block;margin-top:.6em;font-style:normal;font-size:.84rem;color:var(--text-soft);}

/* ---------- 年表 ---------- */
.timeline{border-left:2px solid var(--line);margin-left:8px;max-width:760px;}
.tl-item{position:relative;padding:0 0 28px 26px;}
.tl-item::before{
  content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2px solid var(--accent);
}
.tl-item .yr{font-family:var(--font-display);font-weight:700;color:var(--accent-2);font-size:1rem;font-variant-numeric:tabular-nums;}
.tl-item h4{font-size:1.08rem;margin-top:.2em;}
.tl-item p{font-size:.95rem;color:var(--text-soft);margin-top:.35em;margin-bottom:0;}

/* ---------- 情報ボックス ---------- */
.note{
  background:var(--surface-deep);border-left:3px solid var(--accent-2);
  padding:16px 20px;font-size:.93rem;color:var(--text-soft);margin-block:1.4em;max-width:none;
}
section.alt .note{background:var(--paper);}
.note strong{color:var(--text);}

.taglist{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:1em 0;}
.taglist li{border:1px solid var(--line);padding:5px 14px;font-size:.88rem;border-radius:99px;color:var(--text-soft);background:var(--paper);}

/* ---------- 俗説と実際（萩と共通） ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-block:20px;}
@media (max-width:700px){.compare{grid-template-columns:1fr;}}
.compare .box{padding:22px;border:1px solid var(--line);background:var(--surface-card);}
.compare .box p{font-size:.95rem;color:var(--text-soft);margin:.4em 0 0;}
.compare .box h4{font-size:1.06rem;margin-top:.4em;}
.compare .box.myth{border-top:3px solid var(--text-soft);}
.compare .box.fact{border-top:3px solid var(--accent);}
.compare .tag{font-size:.76rem;letter-spacing:.1em;color:var(--text-soft);text-transform:uppercase;font-weight:700;}
.compare .box.fact .tag{color:var(--accent);}

/* ================= 札幌版で追加したコンポーネント ================= */

/* 小さめのイラスト（本文に添える。大きくしすぎない） */
.illust{margin:4px 0 18px;text-align:center;}
.illust img{width:100%;max-width:240px;height:auto;display:inline-block;}
.illust figcaption{font-size:.8rem;color:var(--text-soft);margin-top:4px;}
.illust.right{float:right;width:230px;margin:6px 0 14px 26px;}
.illust.left{float:left;width:230px;margin:6px 26px 14px 0;}
.illust.wide img{max-width:520px;}
.clear{clear:both;}
@media (max-width:640px){
  .illust.right,.illust.left{float:none;width:auto;margin:6px auto 16px;}
  .illust img{max-width:200px;}
  .illust.wide img{max-width:100%;}
}
.intro{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;}
@media (max-width:820px){.intro{grid-template-columns:1fr;gap:20px;}}
.intro-art{width:100%;max-width:280px;margin-inline:auto;display:block;}

/* 「地元の常識」「玄人メモ」ラベル付きボックス */
.aside{
  position:relative;background:var(--paper);border:1px solid var(--line);
  padding:22px 22px 18px;margin-block:26px;
}
section.alt .aside{background:#fffdf6;}
.aside .label{
  position:absolute;top:-12px;left:16px;
  background:var(--snow);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.12em;
  padding:3px 10px;border-radius:2px;
}
.aside.local .label{background:var(--lilac);}
.aside.pro .label{background:var(--indigo);}
.aside.legend .label{background:var(--vermilion);}
.aside h4{font-size:1.06rem;margin:.2em 0 .4em;}
.aside p{font-size:.96rem;margin-bottom:.6em;max-width:none;}
.aside p:last-child{margin-bottom:0;}

/* 数字で見る */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-block:22px;}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{background:var(--surface-card);border:1px solid var(--line);padding:16px 14px;text-align:center;}
.stat .n{font-family:var(--font-display);font-weight:800;font-size:1.75rem;color:var(--snow);line-height:1.2;font-variant-numeric:tabular-nums;}
.stat .n small{font-size:.9rem;margin-left:2px;}
.stat .l{font-size:.84rem;color:var(--text-soft);margin-top:4px;line-height:1.5;}

/* 伝説・俗説カード（判定ラベル付き） */
.legend-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media (max-width:760px){.legend-grid{grid-template-columns:1fr;}}
.legend-card{background:var(--surface-card);border:1px solid var(--line);padding:22px 22px 18px;display:flex;flex-direction:column;gap:6px;}
.legend-card .no{font-family:var(--font-display);font-size:.8rem;color:var(--accent-2);letter-spacing:.1em;font-weight:700;}
.legend-card h4{font-size:1.12rem;}
.legend-card p{font-size:.95rem;color:var(--text-soft);margin:0;max-width:none;}
.verdict{display:inline-block;align-self:flex-start;font-size:.76rem;font-weight:700;letter-spacing:.08em;padding:2px 10px;border-radius:99px;border:1.5px solid;}
.verdict.true{color:#2e6b3f;border-color:#2e6b3f;}
.verdict.false{color:var(--vermilion);border-color:var(--vermilion);}
.verdict.half{color:var(--ochre);border-color:var(--ochre);}
.verdict.unknown{color:var(--lilac);border-color:var(--lilac);}

/* バタフライエフェクト（連鎖図） */
.chain{list-style:none;margin:18px 0 8px;padding:0;display:flex;flex-direction:column;gap:0;}
.chain li{position:relative;background:var(--surface-card);border:1px solid var(--line);padding:14px 18px 14px 110px;min-height:56px;}
.chain li + li{margin-top:26px;}
.chain li + li::before{
  content:"";position:absolute;top:-24px;left:50px;width:2px;height:22px;background:var(--accent);
}
.chain li + li::after{
  content:"";position:absolute;top:-8px;left:45px;border:6px solid transparent;border-top-color:var(--accent);
}
.chain .y{position:absolute;left:16px;top:14px;font-family:var(--font-display);font-weight:800;color:var(--accent);font-size:1.02rem;width:84px;line-height:1.3;}
.chain .t{font-weight:700;display:block;font-size:1rem;line-height:1.6;}
.chain .d{font-size:.92rem;color:var(--text-soft);display:block;line-height:1.75;margin-top:2px;}
.chain li.last{border-color:var(--accent);border-width:2px;background:#fffaf0;}
html[lang="en"] .chain .y{font-size:.82rem;}
.chain li{min-height:64px;}
@media (max-width:520px){
  .chain li{padding:40px 16px 14px;}
  .chain .y{top:12px;width:auto;}
}
.chain-block{margin-bottom:46px;}
.chain-block:last-child{margin-bottom:0;}
.chain-block > h3{margin-top:0;}

/* 用語・方言表 */
.glossary{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:.96rem;background:var(--surface-card);}
.glossary th,.glossary td{border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top;line-height:1.7;}
.glossary th{background:var(--indigo);color:var(--washi);font-weight:600;font-size:.86rem;letter-spacing:.06em;}
.glossary td:first-child{font-family:var(--font-display);font-weight:700;white-space:nowrap;color:var(--vermilion-deep);}
.glossary td small{color:var(--text-soft);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
@media (max-width:560px){.glossary td:first-child{white-space:normal;}}

/* スポットカード */
.spot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media (max-width:760px){.spot-grid{grid-template-columns:1fr;}}
.spot{background:var(--surface-card);border:1px solid var(--line);padding:20px 20px 18px;display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:start;}
.spot img{width:72px;height:72px;}
.spot .area{font-size:.76rem;letter-spacing:.08em;color:var(--accent-2);font-weight:700;}
.spot h4{font-size:1.08rem;margin:.1em 0 .35em;}
.spot p{font-size:.93rem;color:var(--text-soft);margin:0 0 .5em;max-width:none;}
.spot .pro{font-size:.88rem;color:var(--text);background:var(--surface-deep);padding:8px 10px;margin:0;border-left:3px solid var(--snow);}

/* 見出し番号つきの章 */
.chapter-no{font-family:var(--font-display);color:var(--accent-2);font-weight:800;font-size:.9rem;letter-spacing:.14em;}

/* 次を読む */
.next-read{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}

/* ---------- 写真（額装風。萩と共通の意匠） ---------- */
.photo-card{background:var(--paper);border:1px solid var(--line);padding:8px 8px 10px;box-shadow:0 2px 12px rgba(0,0,0,.10);margin:6px 0 18px;}
.photo-card .ph-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface-deep);}
.photo-card.portrait .ph-img{aspect-ratio:3/4;object-position:50% 25%;}
.photo-card.wide .ph-img{aspect-ratio:16/9;}
.photo-card figcaption{font-size:.8rem;color:var(--text-soft);padding:8px 2px 0;line-height:1.55;}
.photo-card.right{float:right;width:270px;margin:6px 0 16px 26px;}
.photo-card.left{float:left;width:270px;margin:6px 26px 16px 0;}
.photo-card.portrait.right,.photo-card.portrait.left{width:210px;}
.aside .photo-card.right{width:170px;margin:4px 0 10px 18px;}
.photo-card.mid{max-width:540px;margin:20px auto;}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-block:18px;}
.photo-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.photo-grid .photo-card{margin:0;}
.photo-grid a{text-decoration:none;color:inherit;}
.photo-grid a:hover .photo-card{box-shadow:0 8px 18px rgba(20,14,6,.18);}
@media (max-width:820px){.photo-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){
  .photo-card.right,.photo-card.left,.photo-card.portrait.right,.photo-card.portrait.left{float:none;width:auto;max-width:340px;margin:8px auto 18px;}
  .aside .photo-card.right{float:right;width:130px;margin:4px 0 8px 12px;}
}
@media (max-width:520px){.photo-grid,.photo-grid.cols-2{grid-template-columns:1fr;}}
.spot img.spot-ph{object-fit:cover;border:1px solid var(--line);}
.person .mon img{object-position:50% 25%;}

/* ---------- フッター ---------- */
.site-footer{
  background:var(--indigo-deep);color:#d4c9aa;padding-block:40px 30px;margin-top:40px;
  padding-bottom:calc(30px + env(safe-area-inset-bottom,0px));
}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:28px 40px;justify-content:space-between;}
.site-footer h5{color:var(--washi);font-family:var(--font-body);font-size:.8rem;letter-spacing:.14em;margin:0 0 12px;}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.site-footer a{color:#d4c9aa;text-decoration:none;font-size:.9rem;}
.site-footer a:hover{color:var(--kiboshi);}
.site-footer p{max-width:none;}
.foot-note{width:100%;border-top:1px solid rgba(202,191,159,.18);margin-top:10px;padding-top:18px;font-size:.8rem;color:#a39878;line-height:1.85;}

/* ---------- 問い合わせフォーム（萩と共通） ---------- */
.contact-block{width:100%;border-top:1px solid rgba(202,191,159,.18);margin-top:26px;padding-top:24px;}
.contact-block h5{color:var(--washi);font-family:var(--font-body);font-size:.8rem;letter-spacing:.14em;margin:0 0 8px;}
.contact-block .desc{font-size:.88rem;color:#c3b894;margin-bottom:16px;max-width:520px;line-height:1.7;}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;max-width:560px;}
.contact-form .full{grid-column:1/-1;}
.contact-form label{display:block;font-size:.82rem;color:#d4c9aa;margin-bottom:5px;letter-spacing:.03em;}
.contact-form input,.contact-form textarea{
  width:100%;background:rgba(247,240,221,.08);border:1px solid rgba(216,198,156,.35);
  color:var(--washi);padding:11px 12px;font-family:inherit;font-size:16px;border-radius:4px;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#8d8368;}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--kiboshi);}
.contact-form textarea{resize:vertical;min-height:120px;}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.contact-form button{
  grid-column:1/-1;justify-self:start;
  background:var(--vermilion);color:var(--washi);border:none;
  padding:11px 30px;font-size:.92rem;letter-spacing:.05em;cursor:pointer;
  font-family:inherit;transition:opacity .15s ease;border-radius:4px;
}
.contact-form button:hover{opacity:.85;}
.contact-form button:disabled{opacity:.5;cursor:default;}
.contact-status{grid-column:1/-1;font-size:.88rem;margin:0;min-height:1.2em;}
.contact-status.ok{color:#9fd6ab;}
.contact-status.err{color:#e59a9a;}
@media (max-width:560px){.contact-form{grid-template-columns:1fr;}}

.contact-teaser{
  width:100%;border-top:1px solid rgba(202,191,159,.18);margin-top:10px;padding-top:22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.contact-teaser .txt h5{margin-bottom:4px;}
.contact-teaser .txt p{margin:0;font-size:.88rem;color:#c3b894;}

.contact-card{
  background:linear-gradient(160deg, var(--indigo-deep), var(--indigo) 55%, var(--indigo-mid));
  color:var(--washi);padding:34px 30px;
}
.contact-card .contact-block{border-top:none;margin-top:0;padding-top:0;}

/* ---------- 広告枠 ---------- */
.ad-slot-section{padding-block:10px;}
.ad-slot{
  border:1px dashed var(--line);background:var(--surface-deep);
  min-height:90px;display:flex;align-items:center;justify-content:center;
  color:var(--text-soft);font-size:.78rem;letter-spacing:.06em;position:relative;padding:12px;
}
.ad-slot .ad-slot-label{position:absolute;top:6px;left:10px;font-size:.62rem;letter-spacing:.14em;color:var(--text-soft);opacity:.6;text-transform:uppercase;}

.legal-links{width:100%;display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;}
.legal-links a{font-size:.8rem;color:#a39878;text-decoration:underline;}
.legal-links a:hover{color:var(--kiboshi);}
.hp-top-link-foot{font-size:12px;opacity:.75;margin:0 0 10px;width:100%;}
.hp-top-link-foot a{color:inherit;text-decoration:underline;font-size:12px;}

/* ---------- ユーティリティ ---------- */
.mt-lg{margin-top:2em;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:var(--washi);text-decoration:none;
  padding:11px 22px;font-size:.92rem;letter-spacing:.03em;border:1px solid var(--accent);
  border-radius:4px;
}
.btn:hover{opacity:.9;}
.btn.ghost{background:transparent;color:var(--header-fg);border-color:rgba(216,198,156,.55);}
.btn.line{background:transparent;color:var(--accent);}

:focus-visible{outline:2px solid var(--kiboshi);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;} }