/* 刀剣図鑑（仮）— たたき台 */
:root {
  --sumi: #121110;        /* 墨：地 */
  --sumi-2: #1c1a18;      /* 一段明るい墨：枠の地 */
  --line: #3a352e;        /* 罫 */
  --kinari: #e8e2d4;      /* 生成り：本文 */
  --usuzumi: #a39c8e;     /* 薄墨：補足 */
  --kin: #c2a468;         /* 金：見出しの飾り */
  --shu: #b8402f;         /* 朱：国宝などの札 */
  --ai: #3f5a78;          /* 藍：時代の札 */
  --mincho: "Shippori Mincho B1", serif;
  --gothic: "Zen Kaku Gothic New", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* 地に麻の葉と桔梗。本文の列は墨で塗るので、広い画面では両脇にだけ見える */
  background: var(--sumi) url("images/asanoha.svg") repeat;
  color: var(--kinari);
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .03em;
  font-variant-numeric: lining-nums;
}

a { color: var(--kin); text-decoration: none; }
a:hover { text-decoration: underline; }

img { display: block; max-width: 100%; height: auto; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
main.wrap {
  max-width: 1000px; padding: 0 36px 48px;
  background: var(--sumi);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}

/* ── 頭 ── */
.site-head {
  background: var(--sumi);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-top: 14px; padding-bottom: 14px;
}
.site-name {
  display: inline-flex; align-items: flex-end; gap: .7em;
  font-family: var(--mincho); font-weight: 800;
  font-size: 22px; letter-spacing: .2em; color: var(--kinari);
}
.site-name:hover { text-decoration: none; }
.site-name .zukan {
  font-family: var(--gothic); font-weight: 500;
  font-size: 12px; letter-spacing: .25em; color: var(--kinari);
  padding-bottom: .35em;
}
/* ルビは漢字の上に独立した段として置く（標準のルビは明朝の字面に重なるため） */
.site-name ruby {
  display: inline-flex; flex-direction: column-reverse; align-items: center;
  line-height: 1.2;
}
.site-name rt {
  display: block; margin-bottom: 3px;
  font-family: var(--gothic); font-weight: 400;
  font-size: 10px; letter-spacing: .15em; line-height: 1; color: #c9c2b3;
}
.site-nav { display: flex; gap: 18px; font-size: 14px; flex-wrap: wrap; }
.site-nav a { color: var(--kinari); }

.crumb { font-size: 12px; color: var(--usuzumi); padding: 14px 0 0; }
.crumb a { color: var(--usuzumi); }

/* ── 刀身（主画像）── */
.blade {
  margin: 20px 0 0;
  background: #000;
}
.blade figure { margin: 0; }
.blade img { width: 100%; cursor: zoom-in; }
.blade-switch {
  display: flex; justify-content: center; gap: 4px;
  padding: 10px 0 0;
}
.blade-switch button {
  font: inherit; font-size: 13px; letter-spacing: .15em;
  color: var(--usuzumi); background: transparent;
  border: 1px solid var(--line); padding: 4px 18px; cursor: pointer;
}
.blade-switch button[aria-pressed="true"] { color: var(--kinari); border-color: var(--kin); }

/* ── 名 ── */
.name { padding: 36px 0 8px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tag {
  font-size: 12px; letter-spacing: .15em; line-height: 1;
  padding: 6px 10px; border: 1px solid var(--line); color: var(--usuzumi);
}
.tag.kokuho { background: var(--shu); border-color: var(--shu); color: #fff; }
.tag.jidai { background: var(--ai); border-color: var(--ai); color: #fff; }
.name h1 {
  margin: 0;
  font-family: var(--mincho); font-weight: 800;
  font-size: 40px; line-height: 1.3; letter-spacing: .18em;
}
.name .yomi { margin: 4px 0 0; font-size: 13px; letter-spacing: .3em; color: var(--usuzumi); }
.name .formal { margin: 2px 0 0; font-size: 14px; color: var(--usuzumi); }

/* ── 見出し ── */
.sec-title {
  display: flex; align-items: center; gap: 14px;
  margin: 56px 0 18px;
  font-family: var(--mincho); font-weight: 700;
  font-size: 20px; letter-spacing: .25em;
}
.sec-title::before {
  content: ""; width: 26px; height: 1px; background: var(--kin);
}
.sec-title .note {
  font-family: var(--gothic); font-weight: 400;
  font-size: 12px; letter-spacing: .08em; color: var(--usuzumi);
}

/* ── 記録（データの枠）── */
.record {
  background: var(--sumi-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--kin);
}
.record dl { margin: 0; display: grid; grid-template-columns: 7em 1fr; }
.record dt, .record dd {
  margin: 0; padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.record dt {
  font-size: 13px; letter-spacing: .2em; color: var(--usuzumi);
}
.record dd { font-size: 15px; }
.record .mei { font-family: var(--mincho); font-weight: 600; letter-spacing: .12em; }
.record dl > :nth-last-child(-n+2) { border-bottom: 0; }
.record .src { font-size: 13px; color: var(--usuzumi); }

/* ── 見どころ（部分の写真）── */
.parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
.parts figure { margin: 0; background: #000; }
.parts .wide { grid-column: 1 / -1; }
.parts img { width: 100%; cursor: zoom-in; }
.parts figcaption {
  background: var(--sumi); padding: 8px 2px 0;
  font-size: 13px; color: var(--usuzumi);
}
.parts .koshirae img { background: #fff; }

/* 小さい縦長の写真（茎の拡大など）：拡大せず、並べて見せる */
.parts .small {
  display: flex; justify-content: center; gap: 24px;
  padding: 20px 0; background: #000;
}
.parts .small img { width: auto; max-height: 400px; }

/* ── 語り ── */
.katari-lead {
  margin: 0 0 22px; padding: 14px 18px;
  border-left: 2px solid var(--line);
  font-size: 14px; color: var(--usuzumi);
}
.story {
  margin: 0 0 28px; padding: 22px 22px 8px;
  border: 1px solid var(--line);
}
.story-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.story h3 {
  margin: 0; font-family: var(--mincho); font-weight: 700;
  font-size: 19px; letter-spacing: .12em;
}
.mark {
  font-size: 11px; letter-spacing: .15em; line-height: 1;
  padding: 5px 8px; border: 1px solid currentColor;
}
.mark.kiroku { color: var(--kin); }
.mark.densho { color: #8fae8b; }
.mark.mousou { color: #c98fb0; }
.mark.haikei { color: #8fa9c4; }
.writer { font-size: 12px; color: var(--usuzumi); margin-left: auto; }
.story p { margin: 0 0 14px; }
.story .story-src, .kaisetsu .story-src { font-size: 12px; color: var(--usuzumi); }
/* 型だけの刀：小さい写真を引き伸ばさずに真ん中へ */
.blade-thumb figure { display: flex; justify-content: center; padding: 24px 12px; }
.blade-thumb img { width: auto; max-width: 100%; max-height: 360px; object-fit: contain; }
.blade-none { padding: 40px 12px; text-align: center; }
.blade-none p { margin: 0; font-size: 13px; letter-spacing: .2em; color: var(--usuzumi); }
/* 記録の下の館の解説 */
.kaisetsu { margin: 14px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-top: 0; }
.kaisetsu p { margin: 0 0 8px; font-size: 14px; }
/* 語りの無い刀の呼びかけ */
.katari-call { padding: 22px; border: 1px dashed var(--line); text-align: center; }
.katari-call p { margin: 0; color: var(--usuzumi); font-size: 14px; }
.katari-call .links-inline { margin-top: 12px; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.story .todo { color: var(--usuzumi); font-size: 14px; border: 1px dashed var(--line); padding: 12px 14px; }

/* ── 辿る ── */
.links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.links a {
  display: block; padding: 14px 16px;
  border: 1px solid var(--line); color: var(--kinari);
}
.links a:hover { border-color: var(--kin); text-decoration: none; }
.links .k { display: block; font-size: 12px; letter-spacing: .15em; color: var(--usuzumi); }
.links .v { font-family: var(--mincho); font-weight: 700; font-size: 17px; letter-spacing: .1em; }

/* ── 足 ── */
.site-foot {
  background: var(--sumi);
  padding: 24px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.8; color: var(--usuzumi);
}
.site-foot p { margin: 0 0 6px; }

/* ── 拡大表示 ── */
.zoom {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(0,0,0,.94);
  display: none; align-items: center; justify-content: center;
  padding: 16px; cursor: zoom-out;
}
.zoom.open { display: flex; }
.zoom img { max-height: 100%; object-fit: contain; }

/* ── 一覧 ── */
.list-head { padding: 40px 0 8px; }
.list-head h1 {
  margin: 0; font-family: var(--mincho); font-weight: 800;
  font-size: 34px; letter-spacing: .2em;
}
.list-head p { margin: 6px 0 0; font-size: 14px; color: var(--usuzumi); }

.filters { margin: 24px 0 8px; border-top: 1px solid var(--line); }
.frow {
  display: flex; gap: 14px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.frow .fk {
  flex: 0 0 4em; font-size: 12px; letter-spacing: .2em; color: var(--usuzumi);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit; font-size: 13px; letter-spacing: .08em; line-height: 1;
  padding: 7px 11px; cursor: pointer;
  color: var(--usuzumi); background: transparent; border: 1px solid var(--line);
}
.chip:hover { color: var(--kinari); }
.chip[aria-pressed="true"] { color: var(--sumi); background: var(--kin); border-color: var(--kin); }
.chip .n { font-size: 11px; opacity: .7; margin-left: .3em; }

.search {
  width: 100%; max-width: 360px;
  font: inherit; font-size: 15px; color: var(--kinari);
  background: var(--sumi-2); border: 1px solid var(--line);
  padding: 8px 12px;
}
.search:focus { outline: none; border-color: var(--kin); }

.count { margin: 18px 0 14px; font-size: 13px; color: var(--usuzumi); }
.count b { font-family: var(--mincho); font-size: 18px; color: var(--kinari); margin: 0 .2em; }

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.card {
  display: block; color: var(--kinari);
  background: var(--sumi-2); border: 1px solid var(--line);
}
a.card:hover { border-color: var(--kin); text-decoration: none; }
.card .ph {
  aspect-ratio: 4 / 1; background: #000; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.card .ph img { width: 100%; height: 100%; object-fit: contain; }
/* 縦長の写真は横に倒して見せる（茎が左に来る向き） */
.card .ph img.tate {
  width: auto; height: auto; max-width: none;
  transform: rotate(-90deg);
}
.card .nophoto { font-size: 12px; letter-spacing: .2em; color: var(--usuzumi); }
.card .body { padding: 10px 12px 12px; }
.card .nm {
  font-family: var(--mincho); font-weight: 700;
  font-size: 17px; letter-spacing: .08em; line-height: 1.5;
}
.card .sub { font-size: 12px; color: var(--usuzumi); line-height: 1.6; margin-top: 2px; }
.card .tags { margin: 8px 0 0; gap: 5px; }
.card .tag { font-size: 11px; padding: 4px 7px; }
.card .soon { font-size: 11px; color: var(--usuzumi); margin-top: 8px; letter-spacing: .1em; }
.card .open { font-size: 11px; color: var(--kin); margin-top: 8px; letter-spacing: .1em; }

.more { display: flex; justify-content: center; margin: 24px 0 0; }
.more button {
  font: inherit; font-size: 14px; letter-spacing: .2em; cursor: pointer;
  color: var(--kinari); background: transparent; border: 1px solid var(--kin);
  padding: 10px 28px;
}

/* ── 時代で辿る ── */
.era-nav {
  position: sticky; top: 0; z-index: 5;
  background: var(--sumi);
  border-bottom: 1px solid var(--line);
  margin: 24px -36px 0; padding: 10px 36px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.era-nav a {
  font-size: 13px; letter-spacing: .1em; line-height: 1;
  padding: 7px 10px; border: 1px solid var(--line); color: var(--usuzumi);
}
.era-nav a:hover { color: var(--kinari); border-color: var(--kin); text-decoration: none; }

.era {
  display: grid; grid-template-columns: 180px 1fr; gap: 28px;
  padding: 44px 0; border-bottom: 1px solid var(--line);
  scroll-margin-top: 60px;
}
.era-side { position: relative; }
.era-name {
  margin: 0; font-family: var(--mincho); font-weight: 800;
  font-size: 30px; letter-spacing: .2em; line-height: 1.3;
}
.era-years { margin: 6px 0 0; font-size: 13px; color: var(--usuzumi); letter-spacing: .08em; }
.era-count { margin: 14px 0 0; font-size: 13px; color: var(--usuzumi); }
.era-count b { font-family: var(--mincho); font-size: 22px; color: var(--kinari); margin-right: .2em; }
.era-count .koku { display: block; font-size: 12px; margin-top: 2px; }

.era-main p.gist { margin: 0 0 18px; font-size: 15px; }
.era-main .grid { grid-template-columns: repeat(2, 1fr); }
.era-more { margin: 16px 0 0; font-size: 14px; letter-spacing: .1em; }
.era-none { margin: 0; font-size: 14px; color: var(--usuzumi); }

/* ── 国で辿る ── */
.dou { padding: 40px 0 8px; border-bottom: 1px solid var(--line); scroll-margin-top: 60px; }
.dou-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dou-name {
  margin: 0; font-family: var(--mincho); font-weight: 800;
  font-size: 26px; letter-spacing: .25em;
}
.dou-count { font-size: 13px; color: var(--usuzumi); }

.kuni-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 32px;
}
.kuni {
  display: block; color: var(--kinari);
  background: var(--sumi-2); border: 1px solid var(--line);
}
a.kuni:hover { border-color: var(--kin); text-decoration: none; }
.kuni .ph {
  aspect-ratio: 4 / 1; background: #000; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.kuni .ph img { width: 100%; height: 100%; object-fit: contain; }
.kuni .ph img.tate { width: auto; height: auto; max-width: none; transform: rotate(-90deg); }
.kuni .body { padding: 10px 12px 12px; }
.kuni .kn-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kuni .kn {
  font-family: var(--mincho); font-weight: 800;
  font-size: 22px; letter-spacing: .15em;
}
.kuni .num { font-size: 12px; color: var(--usuzumi); white-space: nowrap; }
.kuni .num b { font-family: var(--mincho); font-size: 18px; color: var(--kinari); margin-right: .15em; }
.kuni .now { font-size: 12px; color: var(--usuzumi); line-height: 1.6; }
.kuni .goka {
  display: inline-block; margin-top: 8px;
  font-size: 11px; letter-spacing: .15em; line-height: 1;
  padding: 4px 7px; border: 1px solid var(--kin); color: var(--kin);
}
/* まだ刀が無い国：空白として薄く残す */
.kuni.empty { background: transparent; border-style: dashed; }
.kuni.empty .ph { display: none; }
.kuni.empty .kn { color: var(--usuzumi); }
.kuni.empty .body { opacity: .6; }

/* ── 刀工で辿る ── */
.smith-sec { padding: 40px 0 8px; border-bottom: 1px solid var(--line); }
.smith-sec h2 {
  margin: 0 0 18px; font-family: var(--mincho); font-weight: 800;
  font-size: 24px; letter-spacing: .2em;
}

.smiths {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; margin-bottom: 32px;
}
.smiths.small { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.smith {
  display: block; color: var(--kinari);
  background: var(--sumi-2); border: 1px solid var(--line);
}
a.smith:hover { border-color: var(--kin); text-decoration: none; }
.smith .phs { display: grid; gap: 2px; background: #000; }
.smith .ph {
  aspect-ratio: 6 / 1; background: #000; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.smiths.small .ph { aspect-ratio: 4 / 1; }
.smith .ph img { width: 100%; height: 100%; object-fit: contain; }
.smith .ph img.tate { width: auto; height: auto; max-width: none; transform: rotate(-90deg); }
.smith .body { padding: 10px 12px 12px; }
.smith .sn-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.smith .sn {
  font-family: var(--mincho); font-weight: 800;
  font-size: 20px; letter-spacing: .1em; line-height: 1.4;
}
.smiths.small .sn { font-size: 17px; }
.smith .num { font-size: 12px; color: var(--usuzumi); white-space: nowrap; }
.smith .num b { font-family: var(--mincho); font-size: 18px; color: var(--kinari); margin-right: .15em; }
.smith .meta { font-size: 12px; color: var(--usuzumi); line-height: 1.6; margin-top: 2px; }
.smith .den { color: var(--kin); }

.smith-search { margin: 20px 0 0; }

/* トップだけ、地の桔梗麻の葉が組子のように組み上がってから沈む（kumiko.svg の中で動く） */
body.top { background-image: url("images/kumiko.svg"); }

/* ── トップ：看板（画面幅いっぱい） ── */
.hero-full {
  position: relative; overflow: hidden;
  background: var(--sumi);
  border-bottom: 1px solid var(--line);
}
/* 夜の紅葉。右下がいちばん見え、左上へ向かって黒に溶ける */
.hero-full::before {
  content: ""; position: absolute; inset: 0;
  background: url("images/hero_momiji.jpg") right 38% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to top left, #000 18%, rgba(0,0,0,.55) 45%, transparent 78%);
          mask-image: linear-gradient(to top left, #000 18%, rgba(0,0,0,.55) 45%, transparent 78%);
  opacity: 0; animation: arawaru 2.4s ease-out .1s forwards;
  z-index: 0;                      /* 紅葉はいちばん下 */
}
.hero-inner {
  position: relative; z-index: 1;  /* 刀・題字・一文は紅葉の上 */
  max-width: 1000px; margin: 0 auto;
  padding-left: 36px; padding-right: 36px;
  min-height: 540px;
}
/* 看板は題字と一文だけ（刀は看板の下＝数字との間に置く。紅葉と重なるとうるさいため） */
.hero-full .hero { align-items: end; }
.hero-full .hero-lead { padding-bottom: 48px; }
.blade-band { margin: 36px 0 0; }
/* 題字と一文は、紅葉の上でも読めるよう影を敷く */
.hero-full .hero-title, .hero-full .hero-lead {
  text-shadow: 0 0 18px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.9);
}

/* ── トップ ── */
.hero {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px;
  padding: 56px 0 40px;
}
.hero-blade { position: relative; background: #000; overflow: hidden; }
.hero-blade img { width: 100%; }

/* 抜刀：茎の側（左）から切先（右）へ、刀身が現れる */
.hero-blade img {
  clip-path: inset(0 100% 0 0);
  animation: nuku 1.8s cubic-bezier(.7, 0, .2, 1) .4s forwards;
}
@keyframes nuku { to { clip-path: inset(0 0 0 0); } }

/* 題字：一文字ずつ、墨がにじむように浮かぶ */
.hero-title .ch {
  display: inline-block; opacity: 0; filter: blur(6px);
  animation: nijimu 1.1s ease-out forwards;
}
.hero-title .ch:nth-child(1) { animation-delay: .9s; }
.hero-title .ch:nth-child(2) { animation-delay: 1.2s; }
.hero-title .ch:nth-child(3) { animation-delay: 1.5s; }
.hero-title .ch:nth-child(4) { animation-delay: 1.8s; }
@keyframes nijimu { to { opacity: 1; filter: blur(0); } }
.hero-title rt, .hero-title .zukan, .hero-lead span {
  opacity: 0; animation: arawaru 1s ease-out 2.4s forwards;
}
.hero-lead span:nth-child(2) { animation-delay: 2.7s; }
@keyframes arawaru { to { opacity: 1; } }

/* 動きを減らす設定の人には、止めた状態で見せる */
@media (prefers-reduced-motion: reduce) {
  .hero-blade img { clip-path: none; animation: none; }
  .hero-full::before { opacity: 1; animation: none; }
  .hero-title .ch, .hero-title rt, .hero-title .zukan, .hero-lead span {
    opacity: 1; filter: none; animation: none;
  }
}
.hero-title {
  writing-mode: vertical-rl;
  margin: 0; font-family: var(--mincho); font-weight: 800;
  font-size: 56px; letter-spacing: .3em; line-height: 1.2;
}
.hero-title rt {
  font-family: var(--gothic); font-weight: 500;
  font-size: 13px; letter-spacing: .4em; color: var(--kinari);
  ruby-align: center;   /* 題字の長さいっぱいに散らさず、まとめて読ませる */
}
/* 肩書は題字と同じ列の頭に（縦書きは右の列から読む＝左の列に置くと肩書が後ろに回る） */
.hero-title .zukan {
  display: inline; margin-inline-end: 1.2em;
  font-family: var(--gothic); font-weight: 500;
  font-size: 14px; letter-spacing: .5em; color: var(--kinari);
}
.hero-lead {
  margin: 0; padding: 0 0 8px;
  font-family: var(--mincho); font-weight: 700;
  font-size: 18px; letter-spacing: .2em; line-height: 2.2;
}
.hero-lead span { display: block; }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 32px 0 0;
}
.stat { padding: 18px 12px; text-align: center; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b {
  display: block; font-family: var(--mincho); font-weight: 800;
  font-size: 30px; letter-spacing: .05em; line-height: 1.3;
}
.stat span { font-size: 12px; letter-spacing: .2em; color: var(--usuzumi); }

.today {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
  background: var(--sumi-2); border: 1px solid var(--line); border-top: 2px solid var(--kin);
  color: var(--kinari);
}
a.today:hover { text-decoration: none; border-color: var(--kin); }
.today .ph {
  background: #000; min-height: 180px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.today .ph img { width: 100%; height: 100%; object-fit: contain; }
.today .ph img.tate { width: auto; height: auto; max-width: none; transform: rotate(-90deg); }
.today .body { padding: 22px 24px; }
.today .date { font-size: 12px; letter-spacing: .2em; color: var(--usuzumi); }
.today .nm {
  margin: 6px 0 4px; font-family: var(--mincho); font-weight: 800;
  font-size: 28px; letter-spacing: .12em; line-height: 1.4;
}
.today .sub { font-size: 13px; color: var(--usuzumi); line-height: 1.7; }
.today .tags { margin-top: 12px; }

.gates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gate {
  display: block; padding: 22px 20px;
  border: 1px solid var(--line); background: var(--sumi-2); color: var(--kinari);
}
.gate:hover { border-color: var(--kin); text-decoration: none; }
.gate .g {
  font-family: var(--mincho); font-weight: 800;
  font-size: 22px; letter-spacing: .25em;
}
.gate p { margin: 8px 0 0; font-size: 13px; color: var(--usuzumi); line-height: 1.7; }

.tellers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.teller { padding: 20px; border: 1px solid var(--line); text-align: center; }
.teller ruby {
  font-family: var(--mincho); font-weight: 800;
  font-size: 26px; letter-spacing: .2em;
}
.teller rt { font-family: var(--gothic); font-size: 10px; letter-spacing: .15em; color: var(--usuzumi); }
.teller p { margin: 8px 0 0; font-size: 12px; color: var(--usuzumi); }

.promise {
  margin: 56px 0 0; padding: 28px 24px;
  border: 1px solid var(--line); text-align: center;
}
.promise p { margin: 0; font-family: var(--mincho); font-weight: 700; font-size: 16px; letter-spacing: .15em; line-height: 2.2; }
.promise small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.9; color: var(--usuzumi); letter-spacing: .05em; }
.promise small + p { margin-top: 24px; }

/* ── 窓口 ── */
.mado-head { padding: 40px 0 8px; }
.mado-label { margin: 0; font-size: 12px; letter-spacing: .3em; color: var(--usuzumi); }
.mado-head h1 {
  margin: 6px 0 0; font-family: var(--mincho); font-weight: 800;
  font-size: 28px; letter-spacing: .15em; line-height: 1.6;
}
.mado-head h1 span { display: inline-block; }   /* 折れるなら「、」の後ろで */
.mado-lead { margin: 18px 0 0; font-size: 14px; line-height: 2; color: var(--usuzumi); }
.mado-switch {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin: 28px 0 0;
}
.mado-switch button {
  font: inherit; font-size: 14px; letter-spacing: .12em; cursor: pointer;
  color: var(--usuzumi); background: transparent;
  border: 1px solid var(--line); padding: 12px 8px;
}
.mado-switch button:hover { color: var(--kinari); }
.mado-switch button[aria-selected="true"] {
  color: var(--kinari); background: var(--sumi-2);
  border-color: var(--kin); border-top-width: 2px;
}
.mado-form {
  margin: 14px 0 0; padding: 28px 28px 24px;
  background: var(--sumi-2); border: 1px solid var(--line);
}
.mado-form .fld { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.mado-form label, .mado-form legend {
  display: block; margin: 0 0 6px; padding: 0;
  font-size: 13px; letter-spacing: .15em; color: var(--kinari);
}
.mado-form label.sub { margin: 12px 0 4px; font-size: 12px; color: var(--usuzumi); }
.mado-form .opt { margin-left: .6em; font-size: 11px; letter-spacing: .05em; color: var(--usuzumi); }
.mado-form input, .mado-form select, .mado-form textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--kinari);
  background: var(--sumi); border: 1px solid var(--line); padding: 9px 12px;
}
.mado-form textarea { line-height: 1.9; resize: vertical; }
.mado-form input[type="file"] { padding: 7px 10px; font-size: 13px; color: var(--usuzumi); }
.mado-form input:focus, .mado-form select:focus, .mado-form textarea:focus { outline: none; border-color: var(--kin); }
.mado-form label.mumei {
  display: flex; align-items: center; gap: .5em; margin: 8px 0 0;
  font-size: 13px; letter-spacing: .05em; color: var(--usuzumi); cursor: pointer;
}
.mado-form label.mumei input { width: auto; margin: 0; accent-color: var(--kin); }
.mado-form input:disabled { opacity: .4; }
.mado-note { margin: 4px 0 18px; font-size: 13px; color: var(--usuzumi); }
.mado-send { display: flex; justify-content: center; }
.mado-send button {
  font: inherit; font-size: 15px; letter-spacing: .25em; cursor: pointer;
  color: var(--kinari); background: transparent; border: 1px solid var(--kin);
  padding: 11px 36px;
}
.mado-send button:hover { background: var(--kin); color: var(--sumi); }
.mado-done {
  margin: 18px 0 0; padding: 14px 18px; text-align: center;
  border: 1px dashed var(--kin); font-size: 14px; color: var(--kin);
}
.mado-done.ng { border-color: var(--shu); color: #e08a7a; }
.mado-done pre {
  margin: 12px 0 0; padding: 12px 14px; text-align: left; white-space: pre-wrap;
  font: inherit; font-size: 13px; color: var(--kinari); background: var(--sumi);
}
.mado-send button:disabled { opacity: .5; cursor: wait; }
.kakushi { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* 空いた枠から窓口へ */
.story .todo a { margin-left: .6em; }
.promise .call { margin-top: 28px; font-size: 15px; }

/* ── 更新履歴 ── */
.history { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.history li {
  display: flex; gap: 20px; align-items: baseline;
  padding: 12px 4px; border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.history time { flex: 0 0 auto; font-size: 13px; letter-spacing: .08em; color: var(--usuzumi); }
.history a { color: var(--kinari); text-decoration: underline; text-decoration-color: var(--line); }
.history a:hover { text-decoration-color: var(--kin); }
.history-more { margin: 12px 0 0; font-size: 14px; letter-spacing: .1em; text-align: right; }
.history-all { margin-top: 24px; }

/* ── プライバシーポリシー ── */
.pp { max-width: 720px; padding: 8px 0 24px; }
.pp h2 {
  margin: 36px 0 10px; font-family: var(--mincho); font-weight: 700;
  font-size: 18px; letter-spacing: .15em;
}
.pp p, .pp li { font-size: 15px; }
.pp p { margin: 0 0 10px; }
.pp ul { margin: 0 0 10px; padding-left: 1.4em; }
.site-foot a { color: var(--usuzumi); text-decoration: underline; }

/* ── 狭い画面 ── */
@media (max-width: 640px) {
  main.wrap { padding: 0 16px 40px; border: 0; }
  .era-nav { margin: 24px -16px 0; padding: 10px 16px; }
  .hero { grid-template-columns: 1fr; gap: 20px; padding: 32px 0 24px; }
  .hero-inner { padding-left: 16px; padding-right: 16px; min-height: 0; }
  .hero-full::before {
    -webkit-mask-image: linear-gradient(to top, #000 10%, rgba(0,0,0,.5) 50%, transparent 90%);
            mask-image: linear-gradient(to top, #000 10%, rgba(0,0,0,.5) 50%, transparent 90%);
  }
  .hero-title { writing-mode: horizontal-tb; font-size: 40px; letter-spacing: .2em; order: -1; }
  .hero-title .zukan { display: inline; margin: 0 .8em 0 0; font-size: 12px; letter-spacing: .3em; }
  .hero-lead { font-size: 15px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .today { grid-template-columns: 1fr; }
  .today .ph { min-height: 90px; aspect-ratio: 4 / 1; }
  .gates, .tellers { grid-template-columns: 1fr; }
  .site-name { font-size: 19px; }
  .name h1 { font-size: 30px; }
  .record dl { grid-template-columns: 5.5em 1fr; }
  .record dt, .record dd { padding: 10px 12px; }
  .parts { grid-template-columns: 1fr; }
  .links { grid-template-columns: 1fr; }
  .story { padding: 18px 16px 4px; }
  .list-head h1 { font-size: 26px; }
  .frow { flex-direction: column; gap: 8px; }
  .grid { grid-template-columns: 1fr; }
  .era { grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
  /* 時代の目次は1段にして、横にすべらせる（貼り付いたまま画面をふさがないように） */
  .era-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .era-nav a { flex: 0 0 auto; }
  .era-main .grid { grid-template-columns: 1fr; }
  .mado-head h1 { font-size: 21px; }
  .mado-switch { grid-template-columns: repeat(2, 1fr); }
  .mado-form { padding: 22px 16px 20px; }
  .history li { flex-direction: column; gap: 2px; }
}