/* =========================================================
   デモ共通デザインシステム v2「額装ギャラリー」
   - te-fu 参考: 写真は全面べったりにせず、白い余白の中に額装する
   - 白地 / 墨 / ブランド緑ベタ / 山吹はマーカー下線専用（金文字禁止）
   - 見出し: Shippori Antique B1 ／ 本文: Zen Kaku Gothic New
   - 使用ページ: group-top-demo.html / cafe-demo.html / inlight-demo.html
   ========================================================= */
:root{
  --white: #ffffff;
  --ink: #1a2420;
  --ink-2: #5a655f;
  --green: #0b3d2c;
  --line: #e3e8e4;
  --marker: rgba(232, 181, 58, 0.55);
  /* 3ブランドカラー（2026-07-06導入）
     カフェ=山吹（鯉のぼり由来・本番 tokens.css の --koi と同値）
     コワーキング=深緑（既存 --green と同値）
     加須区=深紫（新規・墨/深緑とトーンを揃えた渋い紫） */
  --brand-cafe: #E8B53A;
  --brand-cowork: #0b3d2c;
  --brand-kazoku: #44265e;
  --brand: var(--ink); /* data-brand 未指定ページの既定（従来の見た目のまま） */
  /* 見出し: Zen Kaku Gothic Antique 900（極太・アンチック仮名）
     ※フォントリンクでは 700/900 のみ読み込み、無指定でも太字にフォールバックさせる */
  --disp: "Zen Kaku Gothic Antique", "Zen Kaku Gothic New", sans-serif;
  --go: "Zen Kaku Gothic New", sans-serif;
  --gutter: clamp(20px, 6vw, 96px);
  --maxw: 1240px;
}
body[data-brand="cafe"]{ --brand: var(--brand-cafe); }
body[data-brand="cowork"]{ --brand: var(--brand-cowork); }
body[data-brand="kazoku"]{ --brand: var(--brand-kazoku); }
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family: var(--go);
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  line-height: 2;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  overflow-x: hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
/* 見出しは文節単位で折り返す（1文字だけの改行を防ぐ）。長すぎる語は anywhere が保険 */
h1, h2, h3{ word-break: keep-all; overflow-wrap: anywhere; }

/* 強調は圏点（けんてん）: 語の上に点を打つ日本語組版の伝統技法。
   色は currentColor を継承（白文字の上では白い点になる） */
.mk{
  background: none;
  padding: 0;
  font-weight: 700;
  -webkit-text-emphasis: filled circle;
  text-emphasis: filled circle;
  -webkit-text-emphasis-position: over right;
  text-emphasis-position: over right;
}

/* ===================== デモ注記 =====================
   画面中央に固定の大きな透かし（ウォーターマーク）。スクロールしても常時見える。
   pointer-events: none なので下のリンク・ボタンはそのまま操作できる。
   マークアップ: <div class="demobar"><b>デモです</b><span>補足文</span></div> */
.demobar{
  position: fixed; inset: 0;
  z-index: 70; /* ナビ(50)より上・加須区アプリのオープニング幕(80)より下 */
  display: grid; place-content: center; gap: clamp(6px, 1.5vw, 14px);
  text-align: center; padding: 0 20px;
  pointer-events: none; user-select: none;
}
.demobar b{
  font-family: var(--disp); font-weight: 900;
  font-size: clamp(48px, 11vw, 110px);
  letter-spacing: 0.16em; padding-left: 0.16em;
  line-height: 1.1;
  color: rgba(20, 20, 20, 0.09);
}
.demobar span{
  font-weight: 700;
  font-size: clamp(12px, 2.6vw, 18px);
  letter-spacing: 0.14em; padding-left: 0.14em;
  line-height: 1.7;
  color: rgba(20, 20, 20, 0.22);
}

/* ===================== ナビ（3デモ間を回遊） ===================== */
.nav{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 15px var(--gutter);
  background: rgba(255,255,255,0.68);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
}
.nav__brand{ display:flex; align-items:baseline; gap:10px; white-space:nowrap; }
.nav__brand b{
  font-family: var(--disp); font-weight: 900;
  font-size: clamp(12.5px, 3.6vw, 16px); letter-spacing: 0.14em;
}
.nav__brand small{
  font-weight: 500; font-size: 10px; color: var(--ink-2);
  letter-spacing: 0.08em; white-space: nowrap;
}
.nav__global{
  margin-left: auto; display: flex; align-items: center;
  gap: clamp(10px, 2.6vw, 26px); white-space: nowrap;
}
.nav__global a, .nav__global span{
  font-size: clamp(10.5px, 2.9vw, 12.5px); font-weight: 500;
  letter-spacing: 0.1em;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav__global a{ border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.nav__global a:hover{ border-bottom-color: var(--ink); }
.nav__global a.is-cur{ border-bottom: 1px solid var(--ink); font-weight: 700; }
.nav__global .is-soon{ color: #9aa5a0; cursor: default; }
.nav__global .is-soon i{
  font-style: normal; font-size: 8.5px;
  border: 1px solid #c3ccc7; border-radius: 999px;
  padding: 1px 6px; margin-left: 5px;
}
@media (max-width: 560px){
  .nav{ padding-inline: 14px; gap: 10px; }
  .nav__brand small{ display: none; }
  .nav__brand b{ letter-spacing: 0.08em; }
  .nav__global{ gap: 8px; }
  .nav__global a, .nav__global span{ font-size: 10px; letter-spacing: 0; }
  .nav__global .is-soon i{ display: none; }
}
/* 6項目ナビの極狭幅対応: お問い合わせはフッターにもあるためナビから省略
   （ただし現在地＝お問い合わせページ自身では消さない） */
@media (max-width: 420px){
  .nav__logo{ height: 28px; }
  .nav__logo--tall{ height: 34px; }
  .nav__global .nav__contact:not(.is-cur){ display: none; }
}

/* ===================== レイアウト基礎 ===================== */
.wrap{ max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* セクション見出し（中央・日本語のみ・英大文字eyebrow禁止） */
.sec{
  text-align: center;
  margin: clamp(72px, 12vw, 150px) 0 clamp(30px, 5vw, 54px);
  scroll-margin-top: 90px; /* ページ内アンカーで飛んだとき sticky ナビに隠れない */
}
.sec__tag{
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.3em;
  color: var(--ink-2);
  margin-bottom: 14px;
}
/* タグの左右に短い罫線（ブランド色）。flexで垂直中央を厳密に揃える */
.sec__tag::before,
.sec__tag::after{
  content: ""; width: 22px; height: 1.5px;
  background: var(--ink-2);
  flex: none;
}
.sec__tag::before{ margin-right: 14px; }
.sec__tag::after{ margin-left: calc(14px - 0.3em); } /* letter-spacing 末尾余白の相殺 */
.sec__title{
  font-family: var(--disp); font-weight: 900;
  font-size: clamp(24px, 3.4vw, 38px);
  letter-spacing: 0.18em; padding-left: 0.18em;
  line-height: 1.5;
  word-break: keep-all; overflow-wrap: anywhere; /* 1文字だけの改行を防ぐ */
}
.sec__title .mk{ font-weight: inherit; } /* 圏点部分だけ細くならないように */
.sec__lead{
  max-width: 34em; margin: 16px auto 0;
  font-size: clamp(13px, 3.2vw, 14.5px);
  color: var(--ink-2); letter-spacing: 0.06em;
  word-break: keep-all; overflow-wrap: anywhere;
}

/* ===================== 額装写真（余白の中の写真） ===================== */
.exhibit{ max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.exhibit--wide{ max-width: 1400px; }
/* PCの大画面ではヒーロー級の額装を広く使う（本文の読み幅は据え置き） */
@media (min-width: 1200px){
  .exhibit--wide{ max-width: min(1760px, 100%); padding-inline: clamp(24px, 3vw, 56px); }
}
/* 控えめな仕掛け: 額装写真はホバーでわずかにズーム */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .exhibit figure{ overflow: hidden; }
  .exhibit figure img{ transition: transform .7s ease; }
  .exhibit figure:hover img{ transform: scale(1.02); }
}
.exhibit figure{ position: relative; }
.exhibit img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 700px){ .exhibit img{ aspect-ratio: 4 / 3; } }
.exhibit figcaption{
  text-align: center;
  font-size: 11.5px; letter-spacing: 0.16em; color: var(--ink-2);
  padding-top: 12px;
}

/* 写真上の中央ラベル（額装写真に浮かぶ白文字） */
.on-photo{
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; color: var(--white);
  padding: 20px;
}
.on-photo::before{ /* 均一スクリム＋ビネット */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 42%, rgba(0,0,0,0.28) 100%),
    rgba(10,15,12,0.34);
}
.on-photo__tag{
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(13px, 2.4vw, 17px); letter-spacing: 0.22em; padding-left: 0.22em;
}
.on-photo__name{
  font-family: var(--disp); font-weight: 900;
  font-size: clamp(30px, 5.6vw, 58px);
  letter-spacing: 0.2em; padding-left: 0.2em;
  line-height: 1.25; margin-top: 8px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
  word-break: keep-all; overflow-wrap: anywhere;
}
.on-photo__line{
  font-size: clamp(12px, 3vw, 14px); font-weight: 500;
  letter-spacing: 0.1em; margin-top: 12px;
  color: rgba(255,255,255,0.94);
  word-break: keep-all; overflow-wrap: anywhere;
}

/* ===================== ギャラリー（スクロールスナップ・カルーセル） ===================== */
.gal{ position: relative; }
.gal__track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gal__track::-webkit-scrollbar{ display: none; }
.gal__slide{
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
}
.gal__slide img,
.gal__slide video{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
@media (max-width: 700px){ .gal__slide img, .gal__slide video{ aspect-ratio: 4 / 3; } }
.gal__dots{
  display: flex; justify-content: center; gap: 10px;
  padding-top: 16px;
}
.gal__dot{
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--ink); background: transparent;
  padding: 0; cursor: pointer;
  transition: background-color .2s ease;
}
.gal__dot.is-on{ background: var(--ink); }
.gal__dot:focus-visible{ outline: 2px solid var(--green); outline-offset: 3px; }
/* 白文字ドット（緑地・写真上で使う場合） */
.gal--onwhite .gal__dot{ border-color: var(--white); }
.gal--onwhite .gal__dot.is-on{ background: var(--white); }
.gal__btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0;
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.55));
}
.gal:hover .gal__btn,
.gal__btn:focus-visible{ opacity: 1; }
.gal__btn svg{ width: 26px; height: 26px; display: block; }
.gal__btn--prev{ left: 10px; }
.gal__btn--next{ right: 10px; }
@media (hover: none), (max-width: 700px){ .gal__btn{ display: none; } } /* タッチ端末はスワイプ */ /* スマホはスワイプ */

/* ===================== ボタン ===================== */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 38px;
  padding-left: calc(38px + 0.24em);
  font-weight: 500; font-size: 12.5px; letter-spacing: 0.24em;
  border: 1px solid var(--ink); color: var(--ink);
  background: transparent;
  transition: background-color .2s ease, color .2s ease;
}
.btn:hover{ background: var(--ink); color: var(--white); }
.btn--white{ border-color: var(--white); color: var(--white); }
.btn--white:hover{ background: rgba(255,255,255,0.16); color: var(--white); }
.btn-row{ display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ===================== 本文ブロック（中央） ===================== */
.prose{
  max-width: 38em; margin-inline: auto; padding-inline: var(--gutter);
  text-align: center;
  font-size: clamp(13.5px, 3.3vw, 15px);
  line-height: 2.3; letter-spacing: 0.08em;
  word-break: keep-all; overflow-wrap: anywhere;
}
.prose + .prose{ margin-top: 1.6em; }

/* ===================== 時刻表（コワーキングの１日・各行は折りたたみ式） ===================== */
.tt{
  /* スマホでも左右に必ず余白を残す（画面いっぱいに張り付かせない） */
  width: min(720px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  border: 1px solid var(--ink);
}
.tt__row{ display: block; }
.tt__row + .tt__row{ border-top: 1px solid var(--line); }
.tt__sum{
  display: grid;
  grid-template-columns: clamp(64px, 10vw, 104px) 1fr 44px;
  align-items: stretch;
  cursor: pointer;
  list-style: none;
}
.tt__sum::-webkit-details-marker{ display: none; }
.tt__time{
  font-weight: 900; font-variant-numeric: tabular-nums;
  font-size: clamp(15px, 2vw, 20px); letter-spacing: 0.02em;
  padding: 12px clamp(10px, 1.6vw, 16px);
  border-right: 1px solid var(--ink);
  display: flex; align-items: center; line-height: 1.2;
}
.tt__h{
  display: flex; align-items: center;
  font-size: clamp(13px, 1.6vw, 14.5px); font-weight: 700; letter-spacing: 0.06em;
  padding: 12px 16px; line-height: 1.6;
}
/* ＋マーク（開くと − に） */
.tt__plus{ position: relative; }
.tt__plus::before, .tt__plus::after{
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 1.5px; background: currentColor;
  transform: translate(-50%, -50%);
}
.tt__plus::after{ transform: translate(-50%, -50%) rotate(90deg); transition: transform .22s ease, opacity .22s ease; }
details[open] > .tt__sum .tt__plus::after{ transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
@media (prefers-reduced-motion: reduce){ .tt__plus::after{ transition: none; } }
.tt__detail{ padding: 0 44px 14px calc(clamp(64px, 10vw, 104px) + 16px); }
.tt__detail p{ font-size: 13px; color: var(--ink-2); line-height: 2; }
.tt__row--edge{ background: var(--green); color: #f2f7f2; }
.tt__row--edge .tt__time{ border-right-color: rgba(242,247,242,0.45); }
.tt__row--edge .tt__detail p{ color: rgba(242,247,242,0.85); }
.tt__row--last .tt__detail p{
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
  color: #f2f7f2; line-height: 1.6; letter-spacing: 0.14em;
}

/* ===================== 深紫ベタ・区画パネル（加須区） ===================== */
.kazoku{
  background: var(--brand-kazoku); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(56px, 9vw, 110px) var(--gutter);
}
.kazoku__sq{
  width: min(56vh, 78vw); aspect-ratio: 1 / 1;
  border: 1.5px solid rgba(255,255,255,0.92);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}
.kazoku__name{
  font-family: var(--disp); font-weight: 900;
  font-size: clamp(48px, 8vw, 104px);
  letter-spacing: 0.12em; padding-left: 0.12em;
  line-height: 1.1;
}
.kazoku__yomi{ font-size: clamp(12px, 3vw, 15px); letter-spacing: 0.3em; padding-left: 0.3em; margin-top: 14px; color: rgba(255,255,255,0.85); }
.kazoku__chip{
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,0.6); color: rgba(255,255,255,0.9);
  font-size: 11px; letter-spacing: 0.22em; padding: 7px 16px 7px calc(16px + 0.22em);
  margin-top: 22px;
}

/* ===================== フッター（中央・事実のみ） ===================== */
.foot{
  margin-top: clamp(72px, 12vw, 150px);
  border-top: 1px solid var(--ink);
  padding: clamp(36px, 6vw, 64px) var(--gutter) clamp(44px, 7vw, 72px);
  text-align: center;
}
.foot__brand{
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(17px, 2.6vw, 22px); letter-spacing: 0.2em; padding-left: 0.2em;
  margin-bottom: 26px;
}
.foot dl{ display: grid; gap: 14px; justify-items: center; }
.foot dt{
  font-size: 10px; font-weight: 700; letter-spacing: 0.3em; padding-left: 0.3em;
  color: var(--ink-2);
}
.foot dd{ font-size: 13px; letter-spacing: 0.08em; }


/* ===================== ギャラリー常時ラベル（写真の上に名前を固定） ===================== */
.gal__stage{ position: relative; }
.gal__label{ pointer-events: none; }
.gal__label .on-photo__name{ font-size: clamp(34px, 6vw, 64px); }


/* ===================== 地図（Google Maps 埋め込み） ===================== */
.map iframe{
  width: 100%;
  height: clamp(300px, 42vw, 440px);
  border: 0;
  display: block;
  filter: grayscale(0.2);
}

/* ギャラリー直後の本文はドット列と間隔を空ける（圏点との混同防止） */
.exhibit + .prose{ margin-top: clamp(26px, 4vw, 44px); }


/* ヒーローの実ロゴ（白抜き表示）
   .gal__slide img / .exhibit img の width:100% + aspect-ratio に負けないよう強制 */
img.on-photo__logo{
  width: auto !important;
  height: clamp(46px, 7vw, 78px) !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1);
  opacity: 0.98;
  margin-bottom: 16px;
}


/* ナビの実ロゴ（黒表示）＋タグライン */
.nav__logo{
  height: 34px; width: auto;
  filter: brightness(0);
  display: block;
}
.nav__logo--tall{ height: 44px; }
.nav__brand{ align-items: center; }


/* ナビロゴを元の色のまま表示（INLIGHT=緑） */
.nav__logo--original{ filter: none; }


/* トップヒーロー: 2ロゴ並び（寿々木別館ビル表記の代替） */
.on-photo__logos{
  display: flex; align-items: center;
  gap: clamp(30px, 5vw, 60px);
}
.on-photo__logos img.on-photo__logo{
  height: clamp(84px, 13vw, 150px) !important;
  margin-bottom: 0;
}

/* 時刻表: 折りたたみなしの行（閉店行など） */
.tt__row--flat{
  display: grid;
  grid-template-columns: clamp(64px, 10vw, 104px) 1fr;
}
.tt__mata{
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(14px, 1.8vw, 17px);
  letter-spacing: 0.14em;
  margin-left: clamp(14px, 3vw, 26px);
}

/* ===================== ブランド差し色の最小適用（data-brand ページのみ） =====================
   背景は白基調のまま。ナビ現在地の下線／セクションタグの色チップ／圏点だけが
   ページのブランドカラーに切り替わる。data-brand の無いページは従来どおり。 */
body[data-brand] .nav__global a.is-cur{ border-bottom: 2px solid var(--brand); }
body[data-brand] .sec__tag::before,
body[data-brand] .sec__tag::after{ background: var(--brand); }
body[data-brand] .mk{ -webkit-text-emphasis-color: var(--brand); text-emphasis-color: var(--brand); }
/* 写真上・ベタ面上の圏点は文字色（白）に追従させて視認性を守る */
body[data-brand] .on-photo .mk,
body[data-brand] .band .mk{ -webkit-text-emphasis-color: currentColor; text-emphasis-color: currentColor; }

/* ===================== 利用の流れ（番号つきステップ・レンタル/加須区で共用） ===================== */
.flow{
  max-width: 720px; margin-inline: auto; padding-inline: var(--gutter);
  margin-top: clamp(30px, 5vw, 54px);
  display: grid; gap: clamp(22px, 4vw, 34px);
}
.flow__step{
  display: grid; grid-template-columns: 44px 1fr;
  column-gap: 16px; align-items: start;
}
.flow__num{
  font-family: var(--disp); font-weight: 900;
  font-size: 19px; line-height: 44px; text-align: center;
  width: 44px; height: 44px;
  background: var(--brand); color: var(--white);
  font-variant-numeric: tabular-nums;
}
body[data-brand="cafe"] .flow__num{ color: var(--ink); } /* 山吹地は墨文字のほうが読める */
.flow__h{
  font-size: clamp(14px, 2vw, 15.5px); font-weight: 700;
  letter-spacing: 0.08em; line-height: 1.8; padding-top: 7px;
}
.flow__p{
  font-size: 13px; color: var(--ink-2); line-height: 2; margin-top: 4px;
  word-break: keep-all; overflow-wrap: anywhere;
}

/* ===================== 控えめなスクロールリビール（JSが .rv を自動付与） ===================== */
.rv{ opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.rv-in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity: 1; transform: none; transition: none; }
}

/* ===================== ページ遷移の白フェード（JSが .veil を挿入） ===================== */
.veil{
  position: fixed; inset: 0; z-index: 999;
  background: var(--white);
  opacity: 1; transition: opacity .35s ease;
}
.veil--out{ opacity: 0; pointer-events: none; }

/* ===================== 日本語の折返し改善 =====================
   1) text-wrap: balance … 見出しの行長を揃え「1文字だけの行」を防ぐ
      text-wrap: pretty  … 本文の最終行の孤立を防ぐ
   2) word-break: auto-phrase … 文節単位で折り返す（Chrome/Edge 119+、
      Google BudouX 内蔵）。非対応ブラウザは既存の keep-all にフォールバック。
      ページ固有CSSの keep-all より優先させるため !important を使う。 */
h1, h2, h3, .on-photo__name, .kazoku__name{ text-wrap: balance; }
.prose, .prose p, .sec__lead, figcaption{ text-wrap: pretty; }
@supports (word-break: auto-phrase){
  body :where(h1, h2, h3, p, li, dd, figcaption, .prose, .sec__lead, .hero-sub, .on-photo__line, .flow__h, .trio__body, .gate__body, .ppl__body, .join__note, .pclose__t, .intro__lead, .phero__lead){
    word-break: auto-phrase !important;
  }
}