/* =========================================================================
   activities.css — 体験（アクティビティ）ページ  2026-10-26 第1案
   元デザイン: 「b hotel Activities LP」(Design アーティファクト rough v2) を実装。
   フォント: Jost(Light) / Zen Kaku Gothic New(Light) / Noto Sans JP。文字色 #383735。
   アクセントは --navy（デザイン案の #1e2233）。トップページの夜色 #222120 に揃える場合は --navy を変える。
   body.ac を付けたページだけに効く。
   ========================================================================= */
body.ac {
  --ink: #383735; --ink-2: #6e6c6a; --ink-3: #a19e99;
  --paper: #ffffff; --paper-2: #f3f4f6; --line: #e6e7eb; --line-2: #d5d7de;
  --navy: #1e2233; --navy-t: #d9dcea; --navy-t2: #b9bdd0; --navy-line: #6e6c6a;
  --f-en: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --f-ja: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --f-body: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --g: clamp(20px, 6.6vw, 96px);
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-weight: 400; line-height: 1.8; letter-spacing: .04em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.ac * { box-sizing: border-box; }
body.ac img { max-width: 100%; display: block; }
body.ac a { color: inherit; }
body.ac h1, body.ac h2, body.ac h3, body.ac p { margin: 0; }
.ac-wrap { padding: 0 var(--g); max-width: 1440px; margin: 0 auto; }
.ac-en { font-family: var(--f-en); font-weight: 300; letter-spacing: .05em; }
.ac-h2 { display: flex; align-items: baseline; gap: .1em; font-family: var(--f-en); font-weight: 300; font-size: clamp(40px, 3.6vw, 52px); line-height: 1; letter-spacing: .05em; }
/* 見出しの b はロゴ。文字より一回り大きく（高さ 1.12em、ベースラインより少し下）してロゴと分かるようにする
   （トップの booking と同じ方針。2026-10-26 承認） */
.ac-h2 .ac-b { width: .9em; height: 1.12em; fill: currentColor; flex: none; align-self: flex-end; margin: 0 .02em -.08em 0; }
.ac-h2 span + .ac-b { margin-left: .22em; }
.ac-h2.tight .ac-b + span { margin-left: -.04em; }
.ac-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border: 1px solid var(--ink); text-decoration: none; font-family: var(--f-body); font-size: 13px; letter-spacing: 2px; color: var(--ink); background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.ac-btn:hover { background: var(--ink); color: #fff; }
.ac-btn.fill { background: var(--navy); border-color: var(--navy); color: #fff; }
.ac-btn.fill:hover { opacity: .9; }

/* ---- ヘッダー ---- */
.ac-head { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.ac-head .ac-wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 clamp(20px, 3.3vw, 48px); }
.ac-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.ac-brand svg { width: 21px; height: 26px; fill: var(--ink); }
.ac-brand span { font-family: var(--f-en); font-weight: 300; font-size: 22px; line-height: 1; letter-spacing: .05em; }
.ac-nav { display: flex; align-items: center; gap: 32px; }
.ac-nav > a { font-family: var(--f-en); font-size: 14px; letter-spacing: .5px; text-decoration: none; }
.ac-nav .ac-btn { height: 44px; }
.ac-lang { height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 18px; background: #fff; font-family: var(--f-en); font-size: 12px; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ac-lang span { font-family: var(--f-body); }
.ac-menu { width: 44px; height: 44px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ac-menu svg { width: 20px; height: 14px; stroke: var(--ink); stroke-width: 1.5; fill: none; }
@media (max-width: 860px) {
  .ac-head .ac-wrap { height: 60px; padding: 0 12px 0 20px; }
  .ac-brand svg { width: 18px; height: 22px; } .ac-brand span { font-size: 19px; }
  .ac-nav { gap: 4px; }
  .ac-nav > a, .ac-nav .ac-btn { display: none; }
  .ac-lang { height: 32px; padding: 0 12px; font-size: 11px; }
}

/* ---- ヒーロー ---- */
.ac-hero { position: relative; height: clamp(600px, 47vw, 680px); background: #5b6070; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; overflow: hidden; }
.ac-hero-media { position: absolute; inset: 0; }
.ac-hero-media img, .ac-hero-media video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.05); }
.ac-hero-shade { position: absolute; inset: 0; background: rgba(30, 34, 51, .45); }
.ac-hero-in { position: relative; }
.ac-hero h1 { font-family: var(--f-en); font-weight: 300; font-size: clamp(50px, 6.1vw, 88px); line-height: 1.1; letter-spacing: .05em; white-space: nowrap; }
@media (max-width: 420px) { .ac-hero h1 { font-size: clamp(38px, 12vw, 50px); } }
.ac-hero p { margin-top: 28px; font-family: var(--f-ja); font-weight: 300; font-size: clamp(16px, 1.3vw, 19px); line-height: 2.1; letter-spacing: .08em; }
.ac-hero-cue { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 20px; height: 28px; stroke: #fff; stroke-width: 1.5; fill: none; }
@keyframes acCue { 0%, 100% { transform: translate(-50%, 0); opacity: .9; } 50% { transform: translate(-50%, 8px); opacity: .5; } }
@media (max-width: 860px) { .ac-hero { height: 600px; } .ac-hero p { margin-top: 22px; } .ac-hero-cue { bottom: 32px; } }

/* ---- 導入（紺） ---- */
.ac-intro { background: var(--navy); color: #fff; padding: clamp(80px, 9vw, 130px) 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; text-align: center; }
.ac-intro h2 { display: flex; align-items: baseline; gap: 16px; font-family: var(--f-en); font-weight: 300; letter-spacing: .05em; line-height: 1.1; }
.ac-intro h2 .a { font-size: clamp(40px, 4.2vw, 60px); }
.ac-intro h2 .b { font-size: clamp(44px, 4.4vw, 64px); }
.ac-intro p { font-size: 15px; line-height: 2.2; letter-spacing: 2px; color: var(--navy-t); }
.ac-intro br.sp { display: none; }
@media (max-width: 860px) { .ac-intro br.sp { display: inline; } .ac-intro h2 { flex-direction: column; gap: 2px; } .ac-intro { gap: 24px; } .ac-intro p { font-size: 13px; letter-spacing: 1.5px; } }

/* ---- 体験一覧 ---- */
.ac-list { background: var(--paper-2); padding: clamp(72px, 8.3vw, 120px) var(--g); display: flex; flex-direction: column; gap: 48px; }
.ac-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ac-list-head p { font-size: 14px; letter-spacing: 2px; color: var(--ink-2); }
.ac-cats { display: flex; gap: 12px; flex-wrap: wrap; }
.ac-cat { height: 44px; padding: 0 22px; border: 1px solid var(--ink); border-radius: 22px; font-family: var(--f-body); font-size: 13px; letter-spacing: 2px; cursor: pointer; background: #fff; color: var(--ink); transition: background .2s, color .2s; }
.ac-cat.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.ac-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.ac-card { background: #fff; display: flex; flex-direction: column; min-height: 620px; }
.ac-card.hidden { display: none; }
.ac-card .ph { height: 280px; flex: none; background: #c9ccd4; display: flex; align-items: center; justify-content: center; font-family: var(--f-en); font-size: 12px; letter-spacing: 1px; color: var(--ink-2); overflow: hidden; }
.ac-card .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: saturate(.85) contrast(1.05); }
.ac-card .body { flex: 1; padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 14px; }
.ac-card .tag { font-family: var(--f-en); font-size: 12px; letter-spacing: 3px; color: var(--ink-2); }
.ac-card h3 { display: flex; flex-direction: column; gap: 6px; font-weight: 400; }
.ac-card h3 .en { font-family: var(--f-en); font-weight: 300; font-size: 32px; line-height: 1.15; letter-spacing: .05em; }
.ac-card h3 .jp { font-family: var(--f-ja); font-weight: 300; font-size: 18px; letter-spacing: .08em; }
.ac-card .sum { font-size: 14px; line-height: 1.8; flex: 1; }
.ac-card .meta { display: flex; gap: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: 1px; color: var(--ink-2); flex-wrap: wrap; }
.ac-card .go { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border: 1px solid var(--ink); text-decoration: none; font-size: 13px; letter-spacing: 2px; transition: background .2s, color .2s; }
.ac-card .go:hover { background: var(--ink); color: #fff; }
.ac-card .go .ar { font-family: var(--f-en); }
.ac-soon { min-height: 620px; border: 1px dashed var(--navy-t2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--ink-2); }
.ac-soon.hidden { display: none; }
.ac-soon .en { font-family: var(--f-en); font-weight: 300; font-size: 32px; letter-spacing: .05em; }
.ac-soon .jp { font-size: 13px; letter-spacing: 2px; }
@media (max-width: 1100px) { .ac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .ac-list { gap: 28px; padding-top: 72px; padding-bottom: 72px; }
  .ac-list-head { flex-direction: column; align-items: flex-start; }
  .ac-list-head p { font-size: 12px; }
  .ac-cats { gap: 8px; } .ac-cat { padding: 0 18px; letter-spacing: 1.5px; }
  .ac-grid { grid-template-columns: 1fr; gap: 20px; }
  .ac-card { min-height: 0; }
  .ac-card .ph { height: 210px; }
  .ac-card .body { padding: 24px; gap: 12px; }
  .ac-card h3 .en { font-size: 28px; } .ac-card h3 .jp { font-size: 17px; }
  .ac-card .sum { font-size: 13px; }
  .ac-card .meta { gap: 16px; padding-top: 12px; }
  .ac-card .go { height: 48px; background: var(--navy); border-color: var(--navy); color: #fff; }
  .ac-soon { min-height: 96px; gap: 6px; } .ac-soon .en { font-size: 24px; } .ac-soon .jp { font-size: 12px; }
}

/* ---- 予約の流れ（紺） ---- */
.ac-flow { background: var(--navy); color: #fff; padding: clamp(72px, 7.6vw, 110px) var(--g); display: flex; flex-direction: column; gap: 64px; }
.ac-flow ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.ac-flow li { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--navy-line); }
.ac-flow .step { font-family: var(--f-en); font-size: 14px; letter-spacing: 3px; color: var(--navy-t2); }
.ac-flow .t { font-family: var(--f-ja); font-size: 20px; font-weight: 300; letter-spacing: .08em; }
.ac-flow .d { font-size: 14px; line-height: 1.8; color: var(--navy-t); }
@media (max-width: 860px) { .ac-flow { gap: 40px; } .ac-flow ol { grid-template-columns: 1fr; gap: 32px; } .ac-flow li { gap: 10px; padding-top: 20px; } .ac-flow .step { font-size: 13px; } .ac-flow .t { font-size: 19px; } .ac-flow .d { font-size: 13px; } }

/* ---- FAQ ---- */
.ac-faq { background: #fff; padding: clamp(72px, 7.6vw, 110px) var(--g); display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.ac-faq h2 { font-family: var(--f-en); font-weight: 300; font-size: clamp(40px, 3.6vw, 52px); line-height: 1; letter-spacing: .05em; }
.ac-faq-list { display: flex; flex-direction: column; }
.ac-q { border-bottom: 1px solid var(--line-2); }
.ac-q button { width: 100%; padding: 22px 0; border: 0; background: transparent; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; text-align: left; font-family: var(--f-body); font-size: 15px; line-height: 1.7; letter-spacing: 1px; color: var(--ink); cursor: pointer; }
.ac-q button .pm { font-family: var(--f-en); flex: none; transition: transform .25s; }
.ac-q.open button .pm { transform: rotate(45deg); }
.ac-q .a { display: none; padding: 0 0 22px; font-size: 14px; line-height: 1.9; color: var(--ink-2); max-width: 640px; }
.ac-q.open .a { display: block; }
@media (max-width: 860px) { .ac-faq { grid-template-columns: 1fr; gap: 28px; } .ac-q button { padding: 20px 0; font-size: 14px; letter-spacing: .5px; } }

/* ---- CTA ---- */
.ac-cta { background: var(--paper-2); padding: clamp(72px, 7vw, 100px) 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; text-align: center; }
.ac-cta h2 { display: flex; align-items: baseline; gap: 16px; font-family: var(--f-en); font-weight: 300; font-size: clamp(42px, 4.4vw, 64px); line-height: 1.1; letter-spacing: .05em; }
.ac-cta p { font-size: 15px; letter-spacing: 3px; }
.ac-cta-btns { display: flex; gap: 16px; }
.ac-cta-btns .ac-btn { width: 240px; height: 56px; font-size: 14px; letter-spacing: 3px; }
@media (max-width: 860px) { .ac-cta { gap: 22px; } .ac-cta h2 { gap: 10px; } .ac-cta p { font-size: 13px; letter-spacing: 2px; } .ac-cta-btns { flex-direction: column; width: 100%; gap: 12px; } .ac-cta-btns .ac-btn { width: 100%; height: 54px; } }

/* ---- フッター ---- */
.ac-foot { background: var(--navy); color: var(--navy-t2); padding: 56px var(--g); display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; font-size: 13px; letter-spacing: 1px; }
.ac-foot .ac-brand { color: #fff; }
.ac-foot .ac-brand svg { width: 24px; height: 30px; fill: #fff; }
.ac-foot .ac-brand span { font-size: 24px; }
.ac-foot nav { display: flex; gap: 28px; flex-wrap: wrap; }
.ac-foot nav a { color: var(--navy-t); text-decoration: none; }
.ac-foot .c { font-family: var(--f-en); }
@media (max-width: 860px) { .ac-foot { flex-direction: column; padding: 48px 24px; gap: 28px; } .ac-foot nav { flex-direction: column; gap: 4px; } .ac-foot nav a { height: 44px; display: flex; align-items: center; } }

/* ---- フェードイン ---- */
.ac-fade { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.ac-fade.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ac-fade { opacity: 1; transform: none; transition: none; } .ac-hero-cue { animation: none; } }