:root{
  --bg:#ffffff;
  --text:#111111;
  --line:#d9d9d9;
  --muted:#666;
  --sheet:#fff;

  --font: Inter, "Noto Sans JP", system-ui, sans-serif;
  --size: 16px;
  --lh: 1.8;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font);
  font-size: var(--size);
  line-height: var(--lh);
  background: var(--bg);
  color: var(--text);
}

html{ scrollbar-gutter: stable; }

/* Toolbar */
.toolbar{
  position: sticky;
  top:0;
  z-index:50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);

  display:flex;
  justify-content: space-between;
  align-items:center;

  padding:10px 20px;
  gap:18px;
}

.toolbar-left{display:flex; align-items:center; gap:10px;}
.toolbar-logo{
  height:44px;
  width:auto;
  display:block;
}

/* Toolbar nav */
.toolbar-nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.toolbar-link{
  font-size:12px;
  border:1px solid var(--line);
  padding:6px 10px;
  text-decoration:none;
  color:var(--text);
  background:#fff;
}

.toolbar-link:hover{
  background:#111;
  color:#fff;
  border-color:#111;
}

.toolbar-controls{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

.toolbar-gekitdan{
  width:36px;
  height:36px;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  text-decoration:none;
}

.toolbar-gekitdan img{
  width:35px;
  height:auto;
  object-fit:contain;
  display:block;
}

.toolbar-gekitdan:hover{
  background:#111;
  border-color:#111;
}

.toolbar-gekitdan:hover img{
  filter:invert(1);
}

.ctl{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:10px;
  color:var(--muted);
}

.ctl select,
.ctl input{
  height:26px;
  padding:0 8px;
  font-size:12px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  border-radius:0;
}

.btn{
  height:26px;
  padding:0 10px;
  font-size:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
}


/* あボタンの微調整 */
.style-text-btn{
  font-weight:600; /* works/memberタイトルと同じ太さ */
  padding:6px 10px;
}

/* Backdrop (mobile menu) */
.menu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  z-index: 40;
}

/* Page / Sheet */
.page{padding:20px 0 80px;}
.sheet{
  width:min(1100px, calc(100% - 24px));
  margin:0 auto;
  border:1px solid var(--line);
  background: var(--sheet);
}

/* Sheet header */
.sheet-header{
  padding:22px 22px 16px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

.title{
  font-size:22px;
  letter-spacing:0.08em;
  font-weight:600;
}
.meta{font-size:12px; color:var(--muted);}

/* Hero grid */
.sheet-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:22px;
  padding:22px;
  border-bottom:1px solid var(--line);
}

.sheet-media img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--line);
}

.sheet-text p{max-width: 60ch;}

@media (max-width:760px){

  .sheet-text p{
    font-size: calc(var(--size) - 2px);
    line-height: var(--lh);
  }
}

/* Tabs */
.tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 22px;
  border-bottom:1px solid var(--line);
}

.tab{
  font-size:12px;
  border:1px solid var(--line);
  padding:6px 10px;
  text-decoration:none;
  color:var(--text);
}
.tab.is-active{
  background:#111;
  color:#fff;
  border-color:#111;
}

/* Tabs hover/press */
.tab{
  background:#fff;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.tab:hover,
.tab:active{
  background:#111;
  color:#fff;
  border-color:#111;
}

/* Hero pills */
.pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

.pill{
  font-size:12px;
  border:1px solid var(--line);
  padding:6px 10px;
  text-decoration:none;
  color:var(--text);
  background:#fff;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.pill:hover,
.pill:active{
  background:#111;
  color:#fff;
  border-color:#111;
}

.pill:visited{
  color: var(--text);
}
.pill:hover:visited{
  color:#fff;
}

/* visited color prevention */
.tab:visited{ color: var(--text); }
.tab:hover:visited{ color:#fff; }

/* Blocks */
.block{
  padding:22px;
  border-bottom:1px solid var(--line);
}
.block-title{
  font-size:13px;
  letter-spacing:0.22em;
  margin-bottom:12px;
}
.block-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.block-note{
  font-size:12px;
  color:var(--muted);
}

/* WORKS grid (旧) */
.works-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}

/* WORKS card */
.work-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--line);
  background:#fff;
}

.work-card img{
  width:100%;
  height: 320px;
  object-fit: contain;
  object-position: center;
  display:block;

  padding: 14px;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.work-card:hover img{
  transform: scale(1.01);
}

.work-meta{ padding:10px 10px 9px; }
.work-title{
  font-weight:600;
  font-size:13px;
  letter-spacing:0.02em;
}
.work-sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

/* Notion window */
.window{border:1px solid var(--line);}
.window-bar{
  font-size:12px;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
}

.window iframe{
  width:100%;
  min-height: 900px;
  border:0;
  display:block;
  background:#fff;
}

.window iframe{
  position:relative;
  z-index:2;
}

/* Members image */
.wide{
  width:100%;
  height:auto;
  border:1px solid var(--line);
  display:block;
}

/* Members photo size down (PC) */
#members .wide{
  width: 80%;
  margin: 0 auto;
}

/* Members links */
.members-links{
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
}

.member-link{
  display: block;
  border: 1px solid var(--line);
  padding: 8px 10px;
  font-size: 13px;
  text-decoration: none;
  color: var(--text);
  background: #fff;
}

.member-link:hover{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Company */
.company-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.company-card{
  border:1px solid var(--line);
  padding:12px 12px 10px;
}
.subhead{
  font-size:12px;
  letter-spacing:0.18em;
  color:var(--muted);
  margin-bottom:10px;
}

.dl{display:block;}
.dl-row{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap:10px;
  padding:8px 0;
  border-top:1px solid var(--line);
  font-size:13px;
}
.dl-row:first-child{border-top:0;}
.dl dt{color:var(--muted);}
.dl dd{color:var(--text);}

/* Timeline */
.timeline{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.timeline-item{
  border-top:1px solid var(--line);
  padding-top:10px;
}
.timeline-item:first-child{
  border-top:0;
  padding-top:0;
}
.timeline-date{
  font-size:12px;
  color:var(--muted);
  display:block;
}
.timeline-body{
  font-size:13px;
  margin-top:4px;
}

/* Contact icons */
.contact-icons{
  display:flex;
  gap:10px;
  align-items:center;
}

.icon-btn{
  width:40px;
  height:40px;
  border:1px solid var(--line);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  text-decoration:none;
  color:var(--text);
}

.icon-btn:hover{
  background:#111;
  border-color:#111;
  color:#fff;
}

.icon-btn svg{
  width:18px;
  height:18px;
  fill: currentColor;
  display:block;
}

.contact-gekitdan{
  width:42px;
  height:42px;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  text-decoration:none;
}

.contact-gekitdan img{
  width:35px;
  height:auto;
  object-fit:contain;
  display:block;
}

.contact-gekitdan:hover{
  background:#111;
  border-color:#111;
}

.contact-gekitdan:hover img{
  filter:invert(1);
}

/* Responsive */
@media (max-width: 900px){
  .sheet-grid{grid-template-columns:1fr;}
  .works-grid{grid-template-columns: 1fr 1fr;}
  .company-grid{grid-template-columns: 1fr;}
  .members-links{grid-template-columns: repeat(2, 1fr);}
}
@media (min-width: 900px){
  .members-links{grid-template-columns: repeat(5, 1fr);}
}
@media (max-width: 520px){
  .toolbar{padding:10px 14px;}
  .toolbar-logo{height:40px;}
  .sheet-header{padding:18px 18px 14px;}
  .sheet-grid{padding:18px;}
  .block{padding:18px;}
  .works-grid{grid-template-columns: 1fr;}

  /* モバイルのメンバー名は2列 */
  .members-links{
    grid-template-columns: repeat(2, 1fr);
  }

  /* モバイルは集合写真を幅いっぱい */
  #members .wide{
    width: 100%;
    margin: 0;
  }
}

/* ===== Detail page layouts ===== */
.detail-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.detail-card{
  border:1px solid var(--line);
  padding:12px 12px 10px;
}

.back-row{
  margin-top:14px;
  display:flex;
  justify-content:flex-start;
}

/* ===== Profile layout ===== */
.profile-grid{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:14px;
  align-items:start;
}
.profile-photo{
  width:100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border:1px solid var(--line);
  display:block;
}
.profile-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 900px){
  .detail-grid{ grid-template-columns: 1fr; }
  .profile-grid{ grid-template-columns: 1fr; }
}

/* 実績紹介ページ */
.hero-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f2f2f2;
  max-height: 70vh;
}

.hero-frame > img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* クリックできることのサイン（右下バッジ） */
.hero-frame::after{
  content: "CLICK / TAP ▶";
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.75);
  color: #fff;
  opacity: .85;
  pointer-events: none;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}

.hero-frame:hover::after{
  opacity: 1;
  transform: translateY(-2px);
}

/* ドットUI */
.hero-dots{
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.hero-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.35);
  background: rgba(255,255,255,.85);
  padding: 0;
  cursor: pointer;
}

.hero-dot.is-active{
  background: rgba(0,0,0,.8);
  border-color: rgba(0,0,0,.8);
}

/* ほんのり切替演出 */
.js-heroSwitch.is-fading{
  opacity: .75;
  transition: opacity .12s ease;
}

/* =========================
   WORKS Carousel (scoped)
   - PC/Tablet: arrow rotate
   - Mobile: swipe + snap + dots + infinite loop (JS)
========================= */
[data-works-carousel]{
  --works-gap: 16px;
  --works-pad: 16px;
  --works-per-view: 3;
  --works-speed: 240ms;
}

@media (max-width: 900px){
  [data-works-carousel]{ --works-per-view: 2; }
}
@media (max-width: 520px){
  [data-works-carousel]{ --works-per-view: 1; }
}

[data-works-carousel] .works-nav{
  display:flex;
  gap:10px;
  align-items:center;
}

[data-works-carousel] .works-arrow{
  width:40px;
  height:40px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
}
[data-works-carousel] .works-arrow:hover{
  background:#111;
  border-color:#111;
  color:#fff;
}
[data-works-carousel] .works-arrow:disabled{
  opacity:.4;
  cursor:not-allowed;
}

/* viewport（PC/タブレット） */
[data-works-carousel] .works-viewport{
  border:1px solid var(--line);
  background:#fff;
  padding: var(--works-pad);
  overflow:hidden;
  position: relative;
  touch-action: pan-y;
}

[data-works-carousel] .works-track{
  display:flex;
  gap: var(--works-gap);
  will-change: transform;
  transform: translate3d(0,0,0);
}

[data-works-carousel] .works-track > .work-card{
  flex: 0 0 calc(
    (100% - (var(--works-gap) * (var(--works-per-view) - 1))) / var(--works-per-view)
  );
  min-width: 0;
}

[data-works-carousel] .works-dots{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  padding:10px 0 0;
}
[data-works-carousel] .works-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.35);
  background: rgba(255,255,255,.85);
  padding:0;
  cursor:pointer;
}
[data-works-carousel] .works-dot.is-active{
  background: rgba(0,0,0,.8);
  border-color: rgba(0,0,0,.8);
}

/* ===== Mobile WORKS swipe ===== */
@media (max-width: 760px){
  [data-works-carousel]{ --works-per-view: 1; }

  [data-works-carousel] .works-viewport{
    padding: 0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    touch-action: pan-x pan-y;

    /* scrollbar hide */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  [data-works-carousel] .works-viewport::-webkit-scrollbar{ display:none; }

  [data-works-carousel] .works-track{
    gap: 0;
    transform:none !important;
    transition: none !important;
    will-change: auto;
  }

  [data-works-carousel] .works-track > .work-card{
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* モバイルは矢印ボタン非表示（スワイプだけ） */
  [data-works-carousel] .works-nav{
    display:none;
  }
}

/* =========================
   FORCE: Desktop hamburger hidden
   ========================= */
@media (min-width: 761px){
  .toolbar-menu,
  .toolbar-menu-btn{
    display:none !important;
  }
}

/* =========================
   Mobile header menu (use .toolbar-menu)
   - hamburger: closed white / open black
   - menu dropdown does NOT push header
   ========================= */
@media (max-width: 760px){
  /* モバイルでは文字変更UIは隠す */
  .toolbar-controls{ display:none; }

  /* ドロップダウンの基準にする */
  .toolbar{
    position: sticky;
    top:0;
    z-index:50;
    min-height:60px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .toolbar{ position: relative; }

  /* navは閉じてる時は隠す */
  .toolbar-nav{ display:none; }

  /* ハンバーガー（HTML側の .toolbar-menu） */
  .toolbar-menu{
    display:inline-flex;
    width:40px;
    height:40px;
    border:1px solid var(--line);
    background:#fff;      /* 閉じ：白 */
    color: var(--text);
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }

  /* 開き：黒 */
  .toolbar.is-menu-open .toolbar-menu{
    background:#111;
    border-color:#111;
    color:#fff;
  }

  /* メニュー本体：3列グリッド */
  .toolbar.is-menu-open .toolbar-nav{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:10px;

    position:absolute;
    top:100%;
    left:0;
    right:0;

    padding:10px 14px 14px;
    background: var(--bg);
    border-bottom:1px solid var(--line);
    z-index: 60;
  }

  .toolbar.is-menu-open .toolbar-nav .toolbar-link{
    font-size:13px;
    padding:10px 12px;
    text-align:center;
    white-space:nowrap;
  }

  /* ロゴもグリッドの1マスに収める */
  .toolbar.is-menu-open .toolbar-nav .toolbar-gekitdan{
    width:100%;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    grid-column: auto;
    justify-self: stretch;
  }
}

/* hoverは“マウス端末だけ”に限定（スマホで黒が残る対策） */
@media (max-width: 760px) and (hover: hover) and (pointer: fine){
  .toolbar-menu:hover{
    background:#111;
    border-color:#111;
    color:#fff;
  }
}

/* Mobile: hamburger to far right */
@media (max-width: 760px){
  .toolbar-left{ width:100%; }          /* 左ブロックを横幅いっぱいに */
  .toolbar-menu{ margin-left:auto; }    /* その中で右端へ押し出す */
}

/* Mobile MEMBERS header */
@media (max-width:760px){

  .block-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
  }

  .block-title{
    margin-bottom:0;
  }

  #allMembersBtn{
    padding:10px 14px;
    font-size:12px;
    white-space:nowrap;
  }
}

/* ALL MEMBERはタイトル横専用 */
#allMembersBtn{

  display:inline-block !important;

  padding:8px 12px;

  height:auto;

}

/* PC：フォント変更コントロールは非表示（JS用にDOMは残す） */
@media (min-width: 761px){
  .toolbar-controls{ display:none !important; }
}

/* 画像ボタン（共通） */
.style-cycle-btn{
  width:40px;
  height:40px;
  border:1px solid var(--line);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
}

.style-cycle-btn img{
  width:26px;
  height:26px;
  display:block;
}

/* hoverはマウス端末だけ */
@media (hover:hover) and (pointer:fine){
  .style-cycle-btn:hover{
    background:#111;
    border-color:#111;
  }
  .style-cycle-btn:hover img{
    filter:invert(1);
  }
}

/* =========================
   Header right controls
   (image btn + あ + hamburger) on the right
========================= */
.toolbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}

/* 画像ボタン */
.style-cycle-btn{
  width:40px;
  height:40px;
  border:1px solid var(--line);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
}
.style-cycle-btn img{
  width:26px;
  height:26px;
  display:block;
}

/* あボタン：member-linkと同じ見た目＋タイトル相当の太さ */
.style-text-btn{
  font-weight:600;
}

/* hoverはマウス端末だけ */
@media (hover:hover) and (pointer:fine){
  .style-cycle-btn:hover{
    background:#111;
    border-color:#111;
  }
  .style-cycle-btn:hover img{
    filter:invert(1);
  }
}

/* モバイルでも右端に */
@media (max-width:760px){
  .toolbar{ justify-content:space-between; }
}

/* 「あ」ボタンを画像ボタンと同サイズに */
.style-text-btn{

  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-weight:600; /* タイトルと同じ太さ */
}

/* メンバー名ボタン：無効時の見た目 */
.member-link.is-disabled,
.member-link:disabled{
  opacity:.35;
  pointer-events:none;
}

.member-link:disabled:hover{
  background:#fff;
  color:var(--text);
  border-color:var(--line);
}

/* スマホのタップ中も黒くする（押してる間） */
.style-cycle-btn:active{
  background:#111;
  border-color:#111;
}
.style-cycle-btn:active img{
  filter:invert(1);
}

/* “押した状態を保持”したい時用（JSで付ける） */
.style-cycle-btn.is-on{
  background:#111;
  border-color:#111;
}
.style-cycle-btn.is-on img{
  filter:invert(1);
}

/* =========================================================
   Illust mode (C: 重複整理 / B: PC・モバイル最適化)
   - title / statement / company を body.is-illust で切替
   - 画像がデカすぎ/小さすぎ問題を clamp + max-block-size で安定化
   ========================================================= */

/* ---------- Title image (株式会社南極のタイトル差し替え) ---------- */
:root{
  /* PC〜SPで気持ちよく変化する高さ（必要なら数値だけ調整） */
  --title-illust-h: clamp(22px, 2.6vw, 30px);
}

.title.is-illust{
  font-size:0;        /* テキストの余白を消す */
  line-height:1;
}

/* ここを“強めに”指定（効かない問題の保険） */
.title .title-illust,
.title-illust{
  display:block;
  height: var(--title-illust-h);
  width:auto;
  max-width:100%;
}

/* スマホはほんの少し小さめ */
@media (max-width:760px){
  :root{ --title-illust-h: clamp(20px, 6vw, 26px); }
}


/* ---------- Statement (トップのロゴ + 文章) 切替 ---------- */
#statementIllust{ display:none; }

body.is-illust #statementNormal{ display:none; }
body.is-illust #statementIllust{ display:grid; }

/* PC: 2カラム / SP: 1カラム（company と同じ挙動） */
.statement-illust-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:stretch;
}

@media (max-width:760px){
  .statement-illust-grid{ grid-template-columns:1fr; }
}

/* カードは余白なし（箱サイズは外側の .sheet-grid 側で維持される想定） */
.statement-illust-card{ padding:0; }

/* 画像が「切替時にデカくなりすぎる/小さすぎる」を抑える */
/* Statement（トップ2枚）：大きくなりすぎ防止 */
.statement-illust-img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;

  /* PC/モバイルで上限を作る（ここが効く） */
  max-block-size: 360px;   /* PC */
  max-inline-size:100%;
}

@media (max-width:760px){
  .statement-illust-img{
    max-block-size: 210px; /* Mobile */
  }
}

/* ---------- Company (Outline / History) 切替 ---------- */
#companyIllust{ display:none; }

body.is-illust #companyNormal{ display:none; }
body.is-illust #companyIllust{ display:grid; }

/* company 側の並びは既存 .company-grid を使う前提（PC横/SP縦） */
/* ※ .company-grid はすでに
   - PC: 1fr 1fr
   - (max-width:900px): 1fr
   になってるので、それに乗っかるだけでOK :contentReference[oaicite:0]{index=0} */

.company-illust-card{ padding:0; }

.company-illust-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  max-inline-size:100%;
  max-block-size: 460px; /* ←PC側上限（必要なら調整） */
}

@media (max-width:760px){
  .company-illust-img{ max-block-size: 220px; }
}

/* 箱サイズは切替でも固定（PC/モバイル） */
#statementNormal,
#statementIllust{
  min-height:260px;
}

@media (min-width:761px){
  #statementNormal,
  #statementIllust{
    min-height:320px;
  }
}

/* Mobile: ヘッダーを追従（上に固定） */
@media (max-width:760px){

  .toolbar{
    position: sticky;
    top: 0;
    z-index: 9999;

    /* 背景が透けないように */
    background: #fff;
  }

}

/* Detail hero: mobileは CLICK/TAP を消す（確実に後勝ちさせる） */
@media (max-width:760px){
  .hero-frame::after{
    content: none !important;
    display: none !important;
  }
  .hero-frame:hover::after{
    opacity: 0 !important;
    transform: none !important;
  }
}

/* Detail hero: Mobile swipe slider layout fix */
@media (max-width:760px){

  /* hero-frameの中でviewportを枠いっぱいに */
  .hero-frame .hero-viewport{
    width:100%;
    height:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-snap-stop:always;

    /* scrollbar hide */
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .hero-frame .hero-viewport::-webkit-scrollbar{ display:none; }

  .hero-frame .hero-track{
    display:flex;
    gap:0;
    height:100%;
  }

  .hero-frame .hero-slide{
    flex:0 0 100%;
    height:100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  /* ここが重要：枠(16:9)の高さに合わせてcontainで収める */
  .hero-frame .hero-slide img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
  }
}

@media (max-width:760px){

  .sheet-header .title{
    font-size:17px;
    white-space:nowrap;
  }
}

@media (max-width:760px){
  .meta,
  .sheet-meta{
    font-size: 11px;
    line-height: 1.4;
  }
}

/* =========================
   Notion iframe: click fix
   （透明レイヤーに負けないように最前面化）
========================= */
#news { position: relative; z-index: 1; }

#news .window{
  position: relative;
  z-index: 2;
}

#news #notionFrame{
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

/* menu-backdrop が iframe をブロックしないようにする */
.menu-backdrop{
  opacity: 0;
  pointer-events: none;  /* ←普段はクリック透過 */
}

/* メニュー開いてる時だけ有効化 */
.toolbar.is-menu-open ~ .menu-backdrop,
.toolbar.is-menu-open + .menu-backdrop{
  opacity: 1;
  pointer-events: auto;
}

/* Notion iframeクリック確実化 */
#notionFrame{
  position:relative;
  z-index:9999;
}

/* hero overlayがクリックを奪わないようにする */
.hero-frame::after{
  pointer-events:none !important;
}