/* モデレイトシステム — 夜の里の提灯をモチーフにした一枚テーマ。
   外部フォント・外部スクリプトなし。システム所持の明朝とゴシックのみで組む。 */
:root{
  color-scheme:dark;
  --night:#14141c;
  --night-2:#1c1c26;
  --paper:#ece7d9;
  --muted:#a9a49a;
  --gold:#c9a227;
  --gold-dim:#8a6f1c;
  --red:#c0523f;
  --hairline:#3a3a48;
  --serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --sans:system-ui,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --mono:ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--night);color:var(--paper);
  font-family:var(--sans);line-height:2.0;font-size:1rem;
  background-image:radial-gradient(60rem 30rem at 50% -10rem,#26263a 0%,var(--night) 60%);
}
.wrap{max-width:42rem;margin:0 auto;padding:0 1.25rem}

/* ---- 頭 ---- */
.site-header{border-bottom:1px solid var(--hairline)}
.site-header .wrap{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;align-items:baseline;padding:.8rem 1.25rem}
.brand{font-family:var(--serif);font-weight:700;margin:0;letter-spacing:.35em;font-size:.95rem}
.brand a{color:var(--paper);text-decoration:none}
nav{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;font-size:.9rem}
nav a{color:var(--muted);text-decoration:none;padding:.25rem 0;border-bottom:1px solid transparent}
nav a:hover{color:var(--paper)}
nav a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold-dim)}

/* ---- 本文 ---- */
main{padding:0 1.25rem 4rem}
main.wrap{padding-top:0}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.6;letter-spacing:.08em}
h1{font-size:2.4rem;margin:1rem 0 .5rem;letter-spacing:.25em}
h1 .sub{display:block;font-size:.9rem;letter-spacing:.5em;color:var(--muted);margin-top:.5rem}
h2{font-size:1.35rem;margin:3.5rem 0 1rem;padding-bottom:.4rem;border-bottom:1px solid var(--hairline)}
h3{font-size:1.05rem;margin:2rem 0 .5rem;color:var(--gold)}
p{margin:.9rem 0}
a{color:var(--gold)}
a:hover{color:#e3bd3d}
ul,ol{padding-left:1.5rem}
li{margin:.35rem 0}
li::marker{color:var(--gold-dim)}
blockquote{
  font-family:var(--serif);margin:2rem 0;padding:.5rem 0 .5rem 1.25rem;
  border-left:2px solid var(--gold-dim);color:var(--paper);
}
blockquote p{margin:.4rem 0}
code{font-family:var(--mono);font-size:.9em;background:var(--night-2);padding:.1em .4em;border-radius:.25em}

/* ---- 英字の添え・導入 ---- */
.eyebrow{font-size:.78rem;letter-spacing:.4em;color:var(--muted);margin:2.5rem 0 0}
.lede{font-family:var(--serif);font-size:1.15rem;line-height:2.2}
.note{font-size:.88rem;color:var(--muted)}
.rule{border:none;border-top:1px solid var(--gold-dim);margin:3rem auto;width:6rem}

/* ---- 縦書きの添え（hero専用） ---- */
.hero{position:relative;padding:3.5rem 0 3rem;overflow:hidden}
.hero .vertical{
  writing-mode:vertical-rl;font-family:var(--serif);letter-spacing:.4em;
  color:var(--muted);font-size:.95rem;line-height:2.4;
  float:right;margin:0 0 1rem 1.5rem;padding-top:.5rem;
  border-right:1px solid var(--hairline);padding-right:.7rem;
}

/* ---- 行動ボタン ---- */
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0}
.button{
  display:inline-block;padding:.7rem 1.8rem;border-radius:999px;
  background:var(--gold);color:#17171f !important;font-weight:700;text-decoration:none;
  letter-spacing:.06em;border:1px solid var(--gold);
}
.button:hover{background:#e3bd3d;border-color:#e3bd3d}
.button.ghost{background:transparent;color:var(--paper) !important;border:1px solid var(--hairline);font-weight:400}
.button.ghost:hover{border-color:var(--gold);color:var(--gold) !important}

/* ---- テスト公開の断り ---- */
.test-notice{
  border:1px solid var(--gold-dim);border-radius:.4rem;
  padding:.7rem 1rem;font-size:.88rem;color:var(--paper);background:rgba(201,162,39,.07);
  margin:1.2rem 0;
}

/* ---- 見どころ・肖像 ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem;margin:1.2rem 0}
.card{border:1px solid var(--hairline);border-radius:.4rem;padding:1rem 1.1rem;background:var(--night-2)}
.card h3{margin:.2rem 0 .4rem}
.card p{margin:.3rem 0;font-size:.92rem;color:var(--paper)}
.faces{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1rem;margin:1.2rem 0}
.faces figure{margin:0;border:1px solid var(--hairline);border-radius:.4rem;overflow:hidden;background:var(--night-2)}
.faces img{width:100%;height:auto;display:block;aspect-ratio:1;filter:saturate(.92)}
.faces figcaption{padding:.6rem .8rem;font-size:.85rem;line-height:1.9}
.faces q{color:var(--muted)}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.2rem 0}
.shots figure{margin:0;border:1px solid var(--hairline);border-radius:.4rem;overflow:hidden;background:var(--night-2)}
.shots img{width:100%;height:auto;display:block}
.shots figcaption{padding:.6rem .8rem;font-size:.85rem;line-height:1.9}

/* ---- 表 ---- */
table{border-collapse:collapse;width:100%;margin:1.2rem 0;font-size:.92rem}
th,td{border:1px solid var(--hairline);padding:.55rem .8rem;text-align:left;vertical-align:top}
th{background:var(--night-2);font-weight:400;color:var(--muted);white-space:nowrap}

/* ---- 連絡先 ---- */
.contact{font-family:var(--serif);font-size:1.3rem;letter-spacing:.08em;color:var(--gold)}
.store-links{color:var(--muted)}

/* ---- 脚 ---- */
.site-footer{border-top:1px solid var(--hairline);padding:1.5rem 0 3rem;color:var(--muted);font-size:.85rem}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--paper)}

@media (max-width:36rem){
  h1{font-size:2rem}
  .hero .vertical{display:none}
  body{line-height:1.95}
  .site-header .wrap{gap:.2rem 1rem}
  nav{font-size:.82rem;gap:.15rem .7rem}
}