/* 松川館ゲストアプリ｜お客様用画面
   黒基調・金差しの和のパレット。明るい/暗いの切り替えはせず、常に黒で出す。 */
:root{
  --bg:#0b0a08;            /* 地の黒（わずかに温かい） */
  --bg2:#100e0b;
  --panel:#17140f;         /* カード */
  --panel2:#201c15;
  --line:#332e25;
  --line2:#453e31;

  --ink:#f3ece0;           /* 本文（生成りの白） */
  --ink2:#c0b6a5;
  --ink3:#8e8474;

  --gold:#c9a45f;          /* 金 */
  --gold-hi:#e9d2a0;       /* 金のハイライト */
  --gold-dim:rgba(201,164,95,.16);
  --shu:#d2563b;           /* 朱 */
  --shu-dim:rgba(210,86,59,.14);
  --moss:#9bb583;          /* 苔 */
  --moss-dim:rgba(155,181,131,.14);

  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --gothic:-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--gothic);
  font-size:16px; line-height:1.85; -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}
.wrap{max-width:760px;margin:0 auto;padding:0 16px 110px}
img{max-width:100%}

#boot{padding:90px 20px;text-align:center;color:var(--ink3);font-size:13px;letter-spacing:.1em}

/* ── はじめの入力 ─────────────────────────────── */
/* align-items:center だと内容が画面より高いとき上が切れるので margin:auto で寄せる */
#gate{position:fixed;inset:0;z-index:900;overflow:auto;padding:24px 18px;
  display:flex;align-items:flex-start;justify-content:center;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(201,164,95,.13) 0%, transparent 60%),
    var(--bg)}
/* 背景の写真。文字が読めるよう、上から暗く落とす */
.gate-bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.gate-photo{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);filter:saturate(.92)}
.gate-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 40%, rgba(6,5,4,.34) 0%, rgba(6,5,4,.74) 62%, rgba(6,5,4,.93) 100%)}
#gate.has-photo{background:var(--bg)}
#gate.has-photo .gate-box{
  background:linear-gradient(180deg,rgba(23,20,15,.84),rgba(11,10,8,.92));
  backdrop-filter:blur(14px) saturate(120%);border-color:rgba(201,164,95,.34);
  box-shadow:0 24px 60px rgba(0,0,0,.6)}

.gate-box{background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%);
  border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow);
  padding:40px 28px 32px;max-width:430px;width:100%;position:relative;margin:auto}
.gate-box::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
/* 内側の細い金の枠 */
.gate-box::after{content:"";position:absolute;inset:7px;border:1px solid rgba(201,164,95,.15);
  border-radius:2px;pointer-events:none}
.gate-brand{margin:0;font-family:var(--mincho);font-size:31px;font-weight:600;
  letter-spacing:.36em;text-align:center;text-indent:.36em;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.55)}
.gate-sub{margin:12px 0 0;font-size:10.5px;color:var(--gold-hi);letter-spacing:.26em;text-align:center}
.gate-rule{width:52px;height:1px;margin:20px auto 26px;position:relative;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.gate-rule::after{content:"";position:absolute;left:50%;top:-2px;width:5px;height:5px;
  margin-left:-2.5px;transform:rotate(45deg);background:var(--gold)}

/* 画面の小さい端末では、はじめるボタンまで一画面に収まるよう詰める */
@media (max-height:900px){
  .gate-box{padding:30px 24px 26px}
  .gate-brand{font-size:27px}
  .gate-sub{margin-top:9px}
  .gate-rule{margin:15px auto 18px}
  .gate-title{font-size:17px;margin-bottom:7px}
  .gate-lead{margin-bottom:16px;font-size:12.5px;line-height:1.8}
  .fl{margin:15px 0 7px}
  .chips button,.chips label{padding:8px 13px;font-size:13.5px}
  .go{padding:14px;margin-top:6px}
  .privacy{margin-top:12px}
}
.gate-title{margin:0 0 10px;font-family:var(--mincho);font-size:19px;line-height:1.7;font-weight:600}
.gate-lead{margin:0 0 24px;font-size:13px;color:var(--ink2);line-height:1.9}
.fl{display:block;font-size:11px;color:var(--gold);letter-spacing:.18em;margin:22px 0 9px}
.fl:first-of-type{margin-top:0}
#email{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--line2);
  border-radius:3px;background:rgba(0,0,0,.35);color:var(--ink)}
#email::placeholder{color:#6d6558}
#email:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{font:inherit;font-size:14px;padding:10px 16px;border:1px solid var(--line2);
  border-radius:2px;background:rgba(0,0,0,.25);color:var(--ink2);cursor:pointer;transition:.15s}
.chips button:hover{border-color:var(--gold);color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);
  color:#17140f;font-weight:700}
.err{color:var(--shu);font-size:13px;margin:16px 0 0;min-height:20px}
.go{width:100%;margin-top:10px;font:inherit;font-size:15px;font-weight:700;letter-spacing:.16em;
  padding:16px;border:none;border-radius:2px;cursor:pointer;color:#14110c;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold))}
.go:disabled{opacity:.4;cursor:default}
.privacy{font-size:11px;color:var(--ink3);margin:18px 0 0;line-height:1.8;text-align:center}

/* ── 表紙 ─────────────────────────────────────── */
#hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(110% 90% at 50% 0%, #241d12 0%, var(--bg) 72%)}
#hero.has-photo{min-height:min(62vh,470px)}
.hero-media{position:absolute;inset:0}
.hero-photo{width:100%;height:100%;object-fit:cover;display:block}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,
  rgba(6,5,4,.22) 0%, rgba(6,5,4,.38) 42%, rgba(11,10,8,.94) 100%)}
.hero-title{position:relative;z-index:2;text-align:center;padding:64px 16px 44px}
#hero.has-photo .hero-title{padding-top:140px}
.brand{margin:0;font-family:var(--mincho);font-size:35px;font-weight:600;
  letter-spacing:.38em;text-indent:.38em;color:#fff;
  text-shadow:0 2px 26px rgba(0,0,0,.8)}
.brand-sub{margin:16px 0 0;font-size:10.5px;color:var(--gold-hi);letter-spacing:.28em;
  text-shadow:0 1px 10px rgba(0,0,0,.85)}
.brand-sub::before,.brand-sub::after{content:"";display:inline-block;width:22px;height:1px;
  background:var(--gold);vertical-align:middle;margin:0 13px;opacity:.8}
/* 表紙の下端に細い金の線を渡す */
#hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6}

.lead-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg2),var(--bg))}
.hero-lead{max-width:660px;margin:0 auto;padding:26px 20px;font-size:14px;color:var(--ink2);
  line-height:2.05;text-align:left}

/* ── ナビ ─────────────────────────────────────── */
#nav{position:sticky;top:0;z-index:30;background:rgba(11,10,8,.9);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
.nav-scroll{max-width:760px;margin:0 auto;padding:11px 16px;display:flex;gap:8px;
  overflow-x:auto;scrollbar-width:none}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-scroll a{flex:0 0 auto;font-size:13px;text-decoration:none;color:var(--ink2);
  padding:8px 15px;border:1px solid var(--line2);border-radius:2px;white-space:nowrap;transition:.15s}
.nav-scroll a:hover{border-color:var(--gold);color:var(--ink)}
.nav-scroll a.on{background:var(--gold);border-color:var(--gold);color:#17140f;font-weight:700}

/* ── お知らせ ─────────────────────────────────── */
.notice{position:relative;margin:20px 0 0;padding:20px 20px 20px 22px;border-radius:3px;
  background:linear-gradient(135deg,rgba(201,164,95,.11),rgba(201,164,95,.03));
  border:1px solid var(--line2)}
.notice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold),transparent)}
.notice .badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.18em;
  color:var(--gold-hi);border:1px solid var(--gold);border-radius:2px;padding:3px 10px;margin-bottom:11px}
.notice h3{margin:0 0 7px;font-family:var(--mincho);font-size:17px;line-height:1.6;font-weight:600}
.notice p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.95;white-space:pre-wrap}
.notice-photo{display:block;width:100%;height:auto;border-radius:2px;margin-top:14px}

/* ── セクション ───────────────────────────────── */
.sec{margin-top:58px;scroll-margin-top:76px}
.sec-head{display:flex;align-items:center;gap:11px;padding-bottom:12px;position:relative}
.sec-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--gold),var(--line) 45%,transparent)}
.sec-head .emoji{font-size:19px;line-height:1}
.sec-head h2{margin:0;font-family:var(--mincho);font-size:21px;letter-spacing:.1em;font-weight:600}
.sec-lead{margin:15px 0 0;font-size:13.5px;color:var(--ink2);line-height:2}

/* 写真のある項目は、たたんでいても写真を大きめに見せる */
.item.with-photo > summary{padding:0}
.item.with-photo .sum{gap:0}
.item.with-photo .sum-text{padding:17px 18px}
.item.with-photo .sum-thumb{width:104px;height:auto;align-self:stretch;object-fit:cover;
  margin-right:0;border:none;border-left:1px solid var(--line)}
.item.with-photo > summary::after{top:17px;right:118px}
@media (max-width:380px){
  .item.with-photo .sum-thumb{width:88px}
  .item.with-photo > summary::after{right:102px}
}

/* 開いたら、同じ写真を横いっぱいに切り替える */
.item[open].with-photo .sum{display:block}
.item[open].with-photo .sum-text{padding:17px 18px 0}
.item[open].with-photo .sum-thumb{width:100%;height:auto;max-height:340px;
  margin:15px 0 0;border:none;border-top:1px solid var(--line);border-left:none;
  border-radius:0;align-self:auto}
.item[open].with-photo > summary::after{right:16px}
.item[open] .body{padding-top:17px}

.item{background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:3px;box-shadow:var(--shadow);
  margin-top:14px;overflow:hidden;transition:border-color .18s}
.item:hover{border-color:var(--line2)}
/* 開いたときの金の縦線。border だと1pxずれるので inset shadow で描く */
.item[open]{border-color:var(--line2);box-shadow:var(--shadow),inset 2px 0 0 var(--gold)}
.item > summary{list-style:none;cursor:pointer;padding:17px 18px;display:block;position:relative}
.item > summary::-webkit-details-marker{display:none}
.item > summary::after{content:"＋";position:absolute;right:16px;top:17px;color:var(--gold);font-size:14px}
.item[open] > summary::after{content:"−"}
.item h3{margin:0;font-family:var(--mincho);font-size:16.5px;line-height:1.65;
  padding-right:26px;font-weight:600;color:var(--ink)}
.item .meta{margin:7px 0 0;font-size:12px;color:var(--gold);letter-spacing:.04em}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.tag{font-size:10.5px;color:var(--moss);background:var(--moss-dim);
  border:1px solid rgba(155,181,131,.28);border-radius:2px;padding:3px 9px;letter-spacing:.06em}

/* 写真は1枚だけ置き、たたんでいるときは小さく、開いたら大きく見せる
   （同じ写真を2回書かないため。見本ファイルの容量が倍になるのを避ける） */
.sum{display:flex;gap:14px;align-items:flex-start}
.sum-text{flex:1;min-width:0}
.sum-thumb{width:80px;height:80px;object-fit:cover;border-radius:2px;flex:0 0 auto;
  margin-right:20px;display:block;border:1px solid var(--line2)}

.body{padding:0 18px 20px;font-size:14px;color:var(--ink2);line-height:2.05;white-space:pre-wrap}
.body .link{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  color:var(--gold-hi);text-decoration:none;border:1px solid var(--gold);border-radius:2px;padding:8px 17px}
.body .link:hover{background:var(--gold-dim)}

/* ── 連絡先 ───────────────────────────────────── */
#contact .card{margin-top:58px;padding:28px 22px;border-radius:3px;position:relative;
  background:radial-gradient(120% 100% at 50% 0%, rgba(201,164,95,.1), transparent 70%), var(--panel);
  border:1px solid var(--line2)}
#contact .card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
#contact h2{margin:0 0 10px;font-family:var(--mincho);font-size:18px;letter-spacing:.08em;font-weight:600}
#contact p{margin:0;font-size:13.5px;color:var(--ink2);line-height:2;white-space:pre-wrap}
#contact .links{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
#contact .links a{font-size:12.5px;text-decoration:none;color:var(--gold-hi);
  border:1px solid var(--gold);border-radius:2px;padding:9px 17px;letter-spacing:.04em}
#contact .links a:hover{background:var(--gold-dim)}
#contact .addr{margin-top:14px;font-size:11.5px;color:var(--ink3);letter-spacing:.04em}

.stamp{margin:44px 0 0;font-size:10.5px;color:var(--ink3);text-align:center;letter-spacing:.2em}

#toTop{position:fixed;right:16px;bottom:22px;z-index:40;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--gold);background:rgba(11,10,8,.85);color:var(--gold);font-size:16px;
  backdrop-filter:blur(8px);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s}
#toTop.on{opacity:1;pointer-events:auto}