/* デザインサンプル共通CSS。配色は各ページの :root、型は body の arch-* で切り替える */
:root{--vh:1svh}
*{box-sizing:border-box;margin:0;padding:0}
.top{position:relative}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);background:var(--bg);color:var(--ink);line-height:1.9;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:auto-phrase}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--f-head);font-weight:600;line-height:1.4;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.en{font-family:var(--f-en);letter-spacing:.2em}

/* サンプル表示 */
.sample-bar{background:#111;color:#f3f3f3;font-size:12px;letter-spacing:.06em;text-align:center;padding:7px 12px;line-height:1.5;font-family:"Zen Kaku Gothic New",sans-serif}
.sample-bar b{color:#ffd166;font-weight:700}
.shot .sample-bar,.shot .bookbar{display:none}

/* ナビ */
.nav{position:absolute;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(18px,5vw,56px)}
.nav__brand{font-family:var(--f-head);font-size:1.12rem;letter-spacing:.14em;line-height:1.3}
.nav__brand small{display:block;font-family:var(--f-en);font-size:.56rem;letter-spacing:.34em;opacity:.7;margin-top:3px}
.nav__links{display:none;gap:clamp(16px,2.2vw,30px);align-items:center;font-size:.84rem;letter-spacing:.12em}
.nav__cta{border:1px solid currentColor;padding:8px 18px;border-radius:var(--r-btn)}
.lang-sw{margin-left:auto;font-family:var(--f-body);font-size:.72rem;letter-spacing:.08em;line-height:1.4;border:1px solid currentColor;border-radius:999px;padding:5px 12px;opacity:.9}
@media(min-width:820px){.nav__links{display:flex;margin-left:auto;order:2}.lang-sw{order:3;margin-left:22px}}
.lang-en.arch-shizuka .hero__vert,.lang-en.arch-yoru .hero__vert,.lang-en.arch-shima .hero__vert{display:none}
.lang-en .hero__eyebrow{letter-spacing:.14em}
.lang-en .hero__title .sub{letter-spacing:.18em}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:14px 28px;border-radius:var(--r-btn);font-size:.95rem;letter-spacing:.12em;font-weight:500;transition:.25s}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover{filter:brightness(1.08)}
.btn--ghost{border:1px solid currentColor}

/* ヒーロー（共通） */
.hero{position:relative;overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover}
.hero__eyebrow{font-size:.78rem;letter-spacing:.3em;color:var(--gold);margin-bottom:18px}
.hero__title{font-size:clamp(2.6rem,9vw,5.4rem);letter-spacing:.06em;line-height:1.1}
.hero__title .sub{display:block;font-family:var(--f-en);font-size:clamp(.72rem,2vw,.95rem);letter-spacing:.42em;font-weight:500;opacity:.75;margin-top:16px}
.hero__lead{margin-top:24px;max-width:30em;font-size:1rem;line-height:2}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__facts{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:26px;font-size:.8rem;letter-spacing:.06em;opacity:.85}
.hero__facts li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:.12em}

/* セクション共通 */
.section{padding:clamp(72px,11vw,128px) clamp(20px,6vw,72px)}
.wrap{max-width:1100px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.74rem;letter-spacing:.3em;color:var(--accent);margin-bottom:18px}
.eyebrow::before{content:"";width:30px;height:1px;background:currentColor}
.h-sec{font-size:clamp(1.6rem,4.6vw,2.5rem);letter-spacing:.04em}
.lead{margin-top:20px;max-width:40em;opacity:.88}

.concept{display:grid;gap:clamp(32px,6vw,72px);align-items:center}
@media(min-width:860px){.concept{grid-template-columns:1.05fr .95fr}}
.concept p{margin-top:18px;opacity:.9}
.concept .sign{margin-top:28px;font-family:var(--f-head);font-size:1.05rem;letter-spacing:.12em;color:var(--accent)}
.concept figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-img)}

.courses{background:var(--bg2)}
.course-list{margin-top:42px;border-top:1px solid var(--line)}
.course{display:grid;gap:6px;padding:28px 2px;border-bottom:1px solid var(--line)}
@media(min-width:760px){.course{grid-template-columns:minmax(0,15em) 1fr auto;gap:28px;align-items:baseline}}
.course__name{font-family:var(--f-head);font-size:1.32rem;letter-spacing:.04em}
.course__name small{display:block;font-family:var(--f-en);font-size:.64rem;letter-spacing:.26em;opacity:.6;margin-top:4px}
.course__desc{font-size:.93rem;opacity:.85}
.course__price{font-family:var(--f-head);font-size:1.3rem;color:var(--accent);white-space:nowrap}
.course__price small{font-size:.7rem;opacity:.7;margin-left:4px}
.course-note{margin-top:22px;font-size:.82rem;opacity:.7}

.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:42px}
.gallery img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-img)}
.gallery .g-wide{grid-column:span 2}
.gallery .g-wide img{aspect-ratio:16/9}
@media(min-width:820px){.gallery{grid-template-columns:2fr 1fr 1fr}.gallery .g-wide{grid-column:auto;grid-row:span 2}.gallery .g-wide img{aspect-ratio:auto}}

.info{background:var(--dark);color:var(--light)}
.info .eyebrow{color:var(--gold)}
.info-grid{display:grid;gap:36px;margin-top:40px}
@media(min-width:820px){.info-grid{grid-template-columns:1fr 1fr}}
.info dl{display:grid;grid-template-columns:6.5em 1fr;row-gap:16px;column-gap:14px}
.info dt{font-size:.78rem;letter-spacing:.2em;color:var(--gold);padding-top:3px}
.info dd{font-size:.98rem}
.map{position:relative;aspect-ratio:16/11;border-radius:var(--r-img);overflow:hidden;background:
  linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));display:grid;place-items:center;font-size:.76rem;letter-spacing:.2em;opacity:.8}
.map::before{content:"";width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);box-shadow:0 0 0 6px rgba(255,255,255,.08);margin-bottom:44px}
.map span{position:absolute;bottom:14px;left:0;right:0;text-align:center}

.reserve{text-align:center;background:var(--accent);color:var(--on-accent)}
.reserve .eyebrow{color:inherit;opacity:.8}
.reserve__lead{max-width:34em;margin:18px auto 0;opacity:.92}
.reserve__tel{margin-top:30px;font-family:var(--f-head);font-size:clamp(1.9rem,6vw,3rem);letter-spacing:.04em;line-height:1.3}
.reserve__tel small{display:block;font-family:var(--f-body);font-size:.74rem;letter-spacing:.24em;opacity:.8;margin-bottom:6px}
.reserve__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.btn--line{background:#06C755;color:#fff}
.btn--net{background:var(--light);color:var(--dark)}

.footer{background:var(--dark);color:var(--light);text-align:center;padding:56px 20px 110px}
.footer__brand{font-family:var(--f-head);font-size:1.3rem;letter-spacing:.16em}
.footer__note{margin:18px auto 0;max-width:36em;font-size:.76rem;opacity:.65;line-height:1.8}
@media(min-width:820px){.footer{padding-bottom:56px}}

/* スマホ固定の予約バー */
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 -6px 20px rgba(0,0,0,.18)}
.bookbar a{display:flex;align-items:center;justify-content:center;min-height:56px;font-size:.92rem;font-weight:700;letter-spacing:.1em}
.bookbar a:first-child{background:var(--dark);color:var(--light)}
.bookbar a:last-child{background:var(--accent);color:var(--on-accent)}
@media(min-width:820px){.bookbar{display:none}}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in,.shot .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ===== 型：静（白木・明朝・分割ヒーロー） ===== */
.arch-shizuka{--r-btn:0;--r-img:0;--on-accent:#fff}
.arch-shizuka .nav{position:relative;color:var(--ink)}
.arch-shizuka .hero{display:grid;background:var(--bg)}
.arch-shizuka .hero__media{height:calc(var(--vh)*58);min-height:340px}
.arch-shizuka .hero__body{position:relative;padding:34px clamp(20px,6vw,72px) 56px}
.arch-shizuka .hero__vert{position:absolute;top:26px;right:18px;writing-mode:vertical-rl;font-family:var(--f-head);font-size:1.02rem;letter-spacing:.5em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45);z-index:3}
.arch-shizuka .hero__title{font-size:clamp(2.6rem,10vw,4.6rem)}
.arch-shizuka .btn--ghost{color:var(--ink)}
@media(min-width:900px){
  .arch-shizuka .hero{grid-template-columns:1fr 1.1fr;min-height:calc(var(--vh)*100)}
  .arch-shizuka .hero__media{order:2;height:auto;min-height:calc(var(--vh)*100)}
  .arch-shizuka .hero__body{align-self:center;padding:120px clamp(28px,5vw,72px) 80px}
  .arch-shizuka .hero__vert{top:120px;right:auto;left:calc(47.6% + 28px)}
}

/* ===== 型：夜（暗地・全面写真・金） ===== */
.arch-yoru{--r-btn:2px;--r-img:2px;--on-accent:#1a1511}
.arch-yoru body,.arch-yoru{background:var(--bg)}
.arch-yoru .nav{color:var(--light)}
.arch-yoru .hero{min-height:calc(var(--vh)*100);display:flex;align-items:flex-end;color:var(--light)}
.arch-yoru .hero__media{position:absolute;inset:0}
.arch-yoru .hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.86) 100%)}
.arch-yoru .hero__body{position:relative;z-index:2;padding:0 clamp(20px,6vw,80px) clamp(56px,9vh,96px);max-width:900px}
.arch-yoru .hero__vert{position:absolute;z-index:2;top:110px;right:clamp(18px,5vw,70px);writing-mode:vertical-rl;font-family:var(--f-head);font-size:1.05rem;letter-spacing:.55em;color:rgba(255,255,255,.78)}
.arch-yoru .section:not(.courses):not(.info):not(.reserve){background:var(--light);color:var(--ink)}
.arch-yoru .courses{background:var(--bg);color:var(--light);--line:rgba(255,255,255,.16)}
.arch-yoru .courses .eyebrow{color:var(--gold)}
.arch-yoru .course__price{color:var(--gold)}
.arch-yoru .reserve{background:linear-gradient(160deg,var(--bg2),var(--bg));color:var(--light)}
.arch-yoru .reserve .btn--net{background:var(--gold);color:#1a1511}

/* ===== 型：炎（黒×朱・太字） ===== */
.arch-hono{--r-btn:4px;--r-img:4px;--on-accent:#fff}
.arch-hono .nav{color:#fff}
.arch-hono .hero{min-height:calc(var(--vh)*100);display:flex;align-items:flex-end;color:#fff;background:#000}
.arch-hono .hero__media{position:absolute;inset:0}
.arch-hono .hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.2) 45%,rgba(0,0,0,.9))}
.arch-hono .hero__body{position:relative;z-index:2;padding:0 clamp(20px,6vw,80px) clamp(56px,9vh,96px)}
.arch-hono .hero__vert{position:absolute;z-index:2;top:84px;right:clamp(16px,5vw,72px);font-family:var(--f-en);font-size:clamp(4.2rem,20vw,11rem);font-weight:700;line-height:.9;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.5)}
.arch-hono .hero__title{font-weight:900;letter-spacing:.02em}
.arch-hono .hero__eyebrow{display:inline-block;background:var(--accent);color:#fff;padding:5px 12px;letter-spacing:.18em}
.arch-hono .section:not(.info):not(.reserve){background:#111;color:#f4f1ec;--line:rgba(255,255,255,.14)}
.arch-hono .courses{background:#191919}
.arch-hono .h-sec{font-weight:900}
.arch-hono .eyebrow{color:var(--accent)}
.arch-hono .course__price{color:var(--gold)}
.arch-hono .reserve{background:linear-gradient(135deg,var(--accent),var(--accent2))}

/* ===== 型：島（生成り・赤瓦・ミンサー柄） ===== */
.arch-shima{--r-btn:999px;--r-img:18px;--on-accent:#fff}
.arch-shima .nav{position:relative;color:var(--ink)}
.arch-shima .hero{padding:4px clamp(14px,4vw,40px) 0}
.arch-shima .hero__media{height:calc(var(--vh)*62);min-height:360px;border-radius:24px;overflow:hidden;position:relative}
.arch-shima .hero__vert{position:absolute;z-index:2;top:18px;right:18px;writing-mode:vertical-rl;background:rgba(255,255,255,.88);color:var(--accent);font-family:var(--f-head);font-size:.98rem;letter-spacing:.4em;padding:16px 9px;border-radius:999px}
.arch-shima .hero__body{padding:34px clamp(6px,2vw,32px) 56px;max-width:900px}
.arch-shima .hero__title{color:var(--accent)}
.arch-shima .btn--ghost{color:var(--accent)}
.arch-shima .band{height:14px;background:
  repeating-linear-gradient(90deg,var(--accent) 0 18px,transparent 18px 26px,var(--accent2) 26px 34px,transparent 34px 42px,var(--gold) 42px 50px,transparent 50px 58px)}
.arch-shima .courses{background:var(--bg2)}
.arch-shima .course{background:rgba(255,255,255,.55);border:0;border-radius:16px;margin-top:12px;padding:24px}
.arch-shima .course-list{border:0}
.arch-shima .info{background:var(--accent2)}
@media(min-width:900px){
  .arch-shima .hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;padding:8px 40px 40px}
  .arch-shima .hero__media{order:2;height:calc(var(--vh)*78)}
  .arch-shima .hero__body{padding:40px 0 40px 20px}
}

/* ===== 型：洋（余白・欧文セリフ・フレーム写真） ===== */
.arch-yo{--r-btn:999px;--r-img:6px;--on-accent:#fff}
.arch-yo .nav{position:relative;color:var(--ink)}
.arch-yo .nav__brand{font-family:var(--f-en);font-size:1.3rem;letter-spacing:.06em;font-style:italic}
.arch-yo .hero{padding:0 clamp(14px,4vw,48px)}
.arch-yo .hero__media{height:calc(var(--vh)*56);min-height:320px;border-radius:6px;overflow:hidden}
.arch-yo .hero__body{position:relative;padding:28px 6px 56px}
.arch-yo .hero__title{font-family:var(--f-en);font-weight:500;font-style:italic;letter-spacing:0;font-size:clamp(3rem,11vw,6.2rem);line-height:.95;color:var(--accent2)}
.arch-yo .hero__title .sub{font-style:normal;color:var(--ink)}
.arch-yo .hero__vert{font-family:var(--f-en);font-style:italic;font-size:1.05rem;color:var(--accent);margin-bottom:10px}
.arch-yo .hero__eyebrow{color:var(--accent)}
.arch-yo .btn--ghost{color:var(--accent2)}
.arch-yo .h-sec{font-weight:500}
.arch-yo .course__name{font-family:var(--f-body);font-weight:700;font-size:1.15rem}
.arch-yo .course__price{font-family:var(--f-en);font-size:1.5rem;font-weight:600}
.arch-yo .info{background:var(--accent2)}
@media(min-width:900px){
  .arch-yo .hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:56px;min-height:calc(var(--vh)*86)}
  .arch-yo .hero__media{grid-column:1;grid-row:1 / 5;height:calc(var(--vh)*74);align-self:center}
  .arch-yo .hero__vert{grid-column:2;grid-row:2;margin:0}
  .arch-yo .hero__body{grid-column:2;grid-row:3;padding:8px 0 0}
}

/* ===== 型：酒場（紺×黄・ポップ） ===== */
.arch-sakaba{--r-btn:12px;--r-img:14px;--on-accent:#fff}
.arch-sakaba .nav{position:relative;color:var(--ink);background:var(--gold)}
.arch-sakaba .nav__brand{font-family:var(--f-head);letter-spacing:.06em}
.arch-sakaba .hero{background:var(--gold);padding:0 clamp(14px,4vw,48px) 48px}
.arch-sakaba .hero__media{height:calc(var(--vh)*50);min-height:300px;border-radius:18px;overflow:hidden;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.arch-sakaba .hero__body{padding:30px 4px 0}
.arch-sakaba .hero__title{font-family:var(--f-head);font-weight:400;color:var(--ink);font-size:clamp(2.8rem,11vw,5.6rem);letter-spacing:.02em}
.arch-sakaba .hero__vert{display:inline-block;background:var(--ink);color:var(--gold);font-weight:700;padding:6px 14px;border-radius:999px;font-size:.9rem;margin-bottom:14px;transform:rotate(-2deg)}
.arch-sakaba .hero__eyebrow{color:var(--ink);font-weight:700}
.arch-sakaba .hero__facts li::before{background:var(--accent)}
.arch-sakaba .btn--primary{box-shadow:4px 4px 0 var(--ink)}
.arch-sakaba .btn--ghost{color:var(--ink);border-width:2px}
.arch-sakaba .h-sec{font-family:var(--f-head);font-weight:400}
.arch-sakaba .course{background:#fff;border:3px solid var(--ink);border-radius:14px;margin-top:14px;padding:22px}
.arch-sakaba .course-list{border:0}
.arch-sakaba .courses{background:var(--bg2)}
.arch-sakaba .info{background:var(--ink)}
.arch-sakaba .gallery img{border:3px solid var(--ink)}
@media(min-width:900px){
  .arch-sakaba .hero{display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:1fr auto auto 1fr;column-gap:48px;padding:20px 48px 64px}
  .arch-sakaba .hero__media{grid-column:2;grid-row:1 / 5;height:calc(var(--vh)*70);align-self:center}
  .arch-sakaba .hero__vert{grid-column:1;grid-row:2;justify-self:start;margin:0}
  .arch-sakaba .hero__body{grid-column:1;grid-row:3;padding-top:14px}
}

/* ===== 型：ポップ（白×赤・巨大な店名から始まる） ===== */
.arch-pop{--r-btn:6px;--r-img:6px;--on-accent:#fff}
.arch-pop .nav{position:relative;color:var(--ink);border-bottom:4px solid var(--accent);background:#fff}
.arch-pop .hero{display:flex;flex-direction:column;padding:18px clamp(16px,5vw,56px) 48px;background:repeating-linear-gradient(-45deg,#fff 0 16px,var(--bg2) 16px 32px)}
.arch-pop .hero__vert{order:1;align-self:flex-start;background:var(--ink);color:#fff;font-weight:900;padding:6px 14px;font-size:.9rem;letter-spacing:.08em;transform:rotate(-2deg);margin:6px 0 12px}
.arch-pop .hero__body{order:2}
.arch-pop .hero__eyebrow{color:var(--ink);font-weight:700}
.arch-pop .hero__title{font-weight:900;color:var(--accent);font-size:clamp(4rem,22vw,8.4rem);line-height:.95;letter-spacing:.02em}
.arch-pop .hero__title .sub{color:var(--ink);opacity:1;font-weight:700;letter-spacing:.16em}
.lang-en.arch-pop .hero__title{font-family:var(--f-en);font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.arch-pop .hero__media{order:3;margin-top:26px;height:calc(var(--vh)*40);min-height:250px;border:4px solid var(--ink);box-shadow:10px 10px 0 var(--accent);border-radius:6px;overflow:hidden}
.arch-pop .btn--primary{box-shadow:4px 4px 0 var(--ink)}
.arch-pop .btn--ghost{color:var(--ink);border-width:2px;background:#fff}
.arch-pop .hero__facts li::before{background:var(--accent)}
.arch-pop .h-sec{font-weight:900}
.arch-pop .eyebrow{color:var(--accent);font-weight:700}
.arch-pop .courses{background:var(--bg2)}
.arch-pop .course{border-bottom:2px dashed rgba(0,0,0,.2)}
.arch-pop .gallery img{border:3px solid var(--ink)}
@media(min-width:900px){
  .arch-pop .hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:56px;min-height:calc(var(--vh)*88)}
  .arch-pop .hero__vert{grid-column:1;grid-row:2;justify-self:start}
  .arch-pop .hero__body{grid-column:1;grid-row:3}
  .arch-pop .hero__media{grid-column:2;grid-row:1 / 5;align-self:center;height:calc(var(--vh)*66);margin-top:0}
}

/* ===== 型：ホテル（アイボリー×金・中央揃え・アーチ型の写真） ===== */
.arch-hotel{--r-btn:0;--r-img:0;--on-accent:#fff}
.arch-hotel .nav{position:relative;color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--gold) 50%,transparent)}
.arch-hotel .hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 20px 54px}
.arch-hotel .hero__vert{order:2;font-family:var(--f-head);color:var(--gold);font-size:.95rem;letter-spacing:.2em;margin-bottom:10px}
.lang-en.arch-hotel .hero__vert{font-family:var(--f-en);font-style:italic;font-size:1.15rem;letter-spacing:.02em}
.arch-hotel .hero__body{order:3;display:flex;flex-direction:column;align-items:center}
.arch-hotel .hero__eyebrow{color:var(--gold);display:flex;align-items:center;gap:12px}
.arch-hotel .hero__eyebrow::before,.arch-hotel .hero__eyebrow::after{content:"";width:28px;height:1px;background:var(--gold)}
.arch-hotel .hero__title{font-weight:500;letter-spacing:.24em;font-size:clamp(2.6rem,11vw,4.8rem)}
.lang-en.arch-hotel .hero__title{font-family:var(--f-en);letter-spacing:.1em}
.arch-hotel .hero__lead{margin-left:auto;margin-right:auto}
.arch-hotel .hero__actions,.arch-hotel .hero__facts{justify-content:center}
.arch-hotel .hero__media{order:1;width:min(84%,480px);height:calc(var(--vh)*44);min-height:290px;margin:12px 0 30px;border-radius:999px 999px 0 0;overflow:hidden;box-shadow:0 0 0 8px var(--bg),0 0 0 9px var(--gold)}
.arch-hotel .lead{margin-left:auto;margin-right:auto;text-align:center}
.arch-hotel .btn--primary{background:var(--accent2)}
.arch-hotel .btn--ghost{color:var(--accent2)}
.arch-hotel .section:not(.info):not(.reserve) .wrap>.eyebrow,.arch-hotel .section:not(.info):not(.reserve) .wrap>.h-sec{text-align:center;display:block}
.arch-hotel .eyebrow::before{display:none}
.arch-hotel .eyebrow{color:var(--gold)}
.arch-hotel .course__price{color:var(--gold)}
.arch-hotel .reserve{background:var(--accent2)}
@media(min-width:900px){
  .arch-hotel .hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:64px;text-align:left;min-height:calc(var(--vh)*88);padding:30px 64px}
  .arch-hotel .hero__media{grid-column:1;grid-row:1 / 5;align-self:center;width:100%;height:calc(var(--vh)*70);margin:0}
  .arch-hotel .hero__vert{grid-column:2;grid-row:2;justify-self:start}
  .arch-hotel .hero__body{grid-column:2;grid-row:3;align-items:flex-start}
  .arch-hotel .hero__lead{margin-left:0}
  .arch-hotel .hero__actions,.arch-hotel .hero__facts{justify-content:flex-start}
}

/* ===== 型：マリン（青×白・筆記体の店名・カード型の写真） ===== */
.arch-marine{--r-btn:999px;--r-img:14px;--on-accent:#fff}
.arch-marine .nav{position:relative;color:#fff;background:var(--accent)}
.arch-marine .hero{display:flex;flex-direction:column;background:var(--accent);color:#fff;padding:6px clamp(16px,5vw,48px) 0}
.arch-marine .hero__vert{order:1;font-size:.9rem;letter-spacing:.14em;color:#dbe8f7;margin-top:10px}
.lang-en.arch-marine .hero__vert{font-family:var(--f-en);font-style:italic;font-size:1.15rem;letter-spacing:.02em}
.arch-marine .hero__body{order:2;padding:4px 0 28px}
.arch-marine .hero__eyebrow{color:var(--gold)}
.arch-marine .hero__title{font-family:var(--f-en);font-style:italic;font-weight:500;font-size:clamp(3.6rem,17vw,7.2rem);line-height:.95;letter-spacing:0}
.arch-marine .hero__title .sub{font-style:normal;color:#dbe8f7}
.arch-marine .hero__media{order:3;height:calc(var(--vh)*40);min-height:250px;border-radius:20px 20px 0 0;overflow:hidden;border:6px solid #fff;border-bottom:0}
.arch-marine .btn--primary{background:#fff;color:var(--accent)}
.arch-marine .btn--ghost{color:#fff}
.arch-marine .hero__facts li::before{background:var(--gold)}
.arch-marine .top::after{content:"";display:block;height:14px;background:repeating-linear-gradient(90deg,var(--accent) 0 24px,#fff 24px 48px)}
.arch-marine .h-sec{font-weight:600}
.arch-marine .course{border-left:4px solid var(--accent);padding-left:18px}
.arch-marine .course__price{font-family:var(--f-en);font-size:1.5rem;font-weight:600}
@media(min-width:900px){
  .arch-marine .hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:56px;padding:24px 56px 0;min-height:calc(var(--vh)*82)}
  .arch-marine .hero__vert{grid-column:1;grid-row:2}
  .arch-marine .hero__body{grid-column:1;grid-row:3;padding-bottom:40px}
  .arch-marine .hero__media{grid-column:2;grid-row:1 / 5;align-self:end;height:calc(var(--vh)*70)}
}

/* ===== 型：フル（全面の写真・中央に店名） ===== */
.arch-full{--r-btn:999px;--r-img:8px;--on-accent:#fff}
.arch-full .nav{color:#fff}
.arch-full .hero{min-height:calc(var(--vh)*100);display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
.arch-full .hero__media{position:absolute;inset:0}
.arch-full .hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.2) 40%,rgba(0,0,0,.46))}
.arch-full .hero__vert{position:absolute;z-index:2;top:96px;left:0;right:0;font-family:var(--f-head);font-size:.95rem;letter-spacing:.24em;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.lang-en.arch-full .hero__vert{font-family:var(--f-en);font-style:italic;font-size:1.15rem;letter-spacing:.02em}
.arch-full .hero__body{position:relative;z-index:2;padding:0 24px;display:flex;flex-direction:column;align-items:center;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.arch-full .hero__eyebrow{color:#fff}
.arch-full .hero__title{font-family:var(--f-en);font-weight:500;font-style:italic;font-size:clamp(3.4rem,15vw,7rem);letter-spacing:.01em}
.arch-full .hero__lead{margin-left:auto;margin-right:auto}
.arch-full .hero__actions,.arch-full .hero__facts{justify-content:center}
.arch-full .btn--ghost{color:#fff}
.arch-full .h-sec{font-family:var(--f-head);font-weight:500}
.arch-full .course__price{font-family:var(--f-en);font-size:1.5rem;font-weight:600}

/* ===== 型：グリーン（深緑・丸い写真を中央に） ===== */
.arch-green{--r-btn:999px;--r-img:24px;--on-accent:#fff}
.arch-green .nav{position:relative;color:#f4f6ef;background:var(--accent)}
.arch-green .hero{display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(var(--accent) 0 170px,var(--bg) 170px);padding:14px 20px 48px}
.arch-green .hero__media{order:1;position:relative;width:min(76vw,400px);aspect-ratio:1;height:auto;border-radius:50%;overflow:hidden;border:8px solid var(--bg);box-shadow:0 22px 44px -22px rgba(0,0,0,.45)}
.arch-green .hero__media img{position:absolute;inset:0}
.arch-green .hero__vert{order:2;margin-top:20px;background:var(--bg2);color:var(--accent);font-weight:700;padding:6px 18px;border-radius:999px;font-size:.9rem}
.arch-green .hero__body{order:3;display:flex;flex-direction:column;align-items:center;padding-top:12px}
.arch-green .hero__eyebrow{color:var(--accent)}
.arch-green .hero__title{color:var(--accent);font-size:clamp(2.8rem,12vw,4.8rem)}
.arch-green .hero__title .sub{letter-spacing:.2em}
.arch-green .hero__lead{margin-left:auto;margin-right:auto}
.arch-green .hero__actions,.arch-green .hero__facts{justify-content:center}
.arch-green .btn--ghost{color:var(--accent)}
.arch-green .hero__facts li::before{background:var(--accent)}
.arch-green .courses{background:var(--bg2)}
.arch-green .course{background:#fff;border:0;border-radius:20px;margin-top:12px;padding:22px 24px}
.arch-green .course-list{border:0}
@media(min-width:900px){
  .arch-green .hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:56px;text-align:left;background:linear-gradient(90deg,var(--bg) 0 58%,var(--accent) 58%);min-height:calc(var(--vh)*86);padding:30px 64px}
  .arch-green .hero__media{grid-column:2;grid-row:1 / 5;align-self:center;justify-self:center;width:min(40vw,500px)}
  .arch-green .hero__vert{grid-column:1;grid-row:2;justify-self:start;margin:0}
  .arch-green .hero__body{grid-column:1;grid-row:3;align-items:flex-start}
  .arch-green .hero__lead{margin-left:0}
  .arch-green .hero__actions,.arch-green .hero__facts{justify-content:flex-start}
}

/* ===== 型：モノ（白×黒・枠に入った縦書きの店名） ===== */
.arch-mono{--r-btn:0;--r-img:0;--on-accent:#fff}
.arch-mono .nav{position:relative;color:var(--ink);border-bottom:1px solid var(--ink)}
.arch-mono .hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 20px 52px}
.arch-mono .hero__vert{order:1;font-family:var(--f-head);font-size:.86rem;letter-spacing:.3em;margin-bottom:14px}
.arch-mono .hero__body{order:2;display:flex;flex-direction:column;align-items:center}
.arch-mono .hero__eyebrow{color:var(--ink);letter-spacing:.3em}
.arch-mono .hero__title{writing-mode:vertical-rl;font-weight:700;font-size:clamp(3.2rem,15vw,5.6rem);letter-spacing:.24em;border:1px solid var(--ink);padding:26px 16px;margin:4px 0 6px}
.arch-mono .hero__title .sub{display:none}
.arch-mono .hero__lead{margin-left:auto;margin-right:auto}
.arch-mono .hero__actions,.arch-mono .hero__facts{justify-content:center}
.arch-mono .hero__media{order:3;width:100%;max-width:560px;height:calc(var(--vh)*34);min-height:220px;margin-top:30px;outline:1px solid var(--ink);outline-offset:8px}
.arch-mono .btn--primary{background:var(--ink)}
.arch-mono .btn--ghost{color:var(--ink)}
.arch-mono .hero__facts li::before{background:var(--ink)}
.arch-mono .reserve{background:var(--ink)}
.arch-mono .course__price{color:var(--ink)}
.lang-en.arch-mono .hero__title{writing-mode:horizontal-tb;border:0;padding:0;letter-spacing:.1em}
.lang-en.arch-mono .hero__title .sub{display:block}
.lang-en.arch-mono .hero__vert{letter-spacing:.12em}
@media(min-width:900px){
  .arch-mono .hero{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:64px;text-align:left;min-height:calc(var(--vh)*86);padding:40px 72px;align-items:center}
  .arch-mono .hero__media{grid-column:2;grid-row:1 / 5;height:calc(var(--vh)*66);max-width:none;margin:0}
  .arch-mono .hero__vert{grid-column:1;grid-row:2;justify-self:center}
  .arch-mono .hero__body{grid-column:1;grid-row:3;max-width:360px}
}

/* ===== 型：炭（写真全面・下に店名と予約ボタン。1画面目だけで伝わる作り） ===== */
.arch-sumi{--r-btn:999px;--r-img:12px;--on-accent:#fff}
.arch-sumi .nav{color:#fff}
.arch-sumi .nav__cta{background:rgba(255,255,255,.16);backdrop-filter:blur(4px)}
.arch-sumi .hero{min-height:calc(var(--vh)*88);display:flex;align-items:flex-end;color:#fff}
.arch-sumi .hero__media{position:absolute;inset:0}
.arch-sumi .hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,10,.5) 0%,rgba(15,12,10,.12) 34%,rgba(15,12,10,.8) 100%)}
.arch-sumi .hero__vert{position:absolute;z-index:2;top:88px;left:clamp(20px,6vw,64px);font-size:.9rem;letter-spacing:.22em;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.arch-sumi .hero__body{position:relative;z-index:2;width:100%;padding:0 clamp(20px,6vw,64px) clamp(26px,6vw,54px)}
.arch-sumi .hero__eyebrow{color:#ffd9a3;margin-bottom:8px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.arch-sumi .hero__title{font-weight:900;font-size:clamp(2.7rem,13vw,4.8rem);letter-spacing:.06em;line-height:1.15;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.arch-sumi .hero__title .sub{opacity:.92;margin-top:10px;letter-spacing:.3em}
.arch-sumi .hero__lead{margin-top:12px;max-width:26em;font-size:.95rem;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.arch-sumi .hero__actions{margin-top:16px}
.arch-sumi .btn--primary{box-shadow:0 14px 26px -14px rgba(0,0,0,.9)}
.arch-sumi .btn--ghost{color:#fff;background:rgba(255,255,255,.14);backdrop-filter:blur(4px)}
.arch-sumi .hero__facts{margin-top:14px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.arch-sumi .hero__facts li::before{background:var(--gold)}
.arch-sumi .h-sec{font-weight:900}
.arch-sumi .courses{background:var(--bg2)}
.arch-sumi .course__price{font-weight:900}
.arch-sumi .gallery img{border-radius:12px}
@media(min-width:900px){
  .arch-sumi .hero{min-height:calc(var(--vh)*92)}
  .arch-sumi .hero__body{max-width:1100px;margin:0 auto;padding-bottom:56px}
  .arch-sumi .hero__vert{left:50%;transform:translateX(-50%);max-width:1100px;width:100%;padding-left:0}
}