/* ===========================================================================
   tb-b / 案B「THREE」— 楽しさをつくる五階（会社が主役）
   TIGHTBOOTH の骨格（固定ヘッダー／薄灰タイル／欧文語＋上付き件数／固定 MENU）に、
   3ブランドの扉と、その直下の COMPANY PROOF を載せる。
   地 = 白 ／ タイル = 薄灰 #EFEFEF ／ 文字 = 墨 ／ 差し色 = 緑 #005726 の1色だけ
   書体 = Archivo 400 ＋ Noto Sans JP 400。太字は1つも使わない。
   見出し 27px ／ ブランド名 54px（SP 27px）／ 本文 16px。中間サイズを作らない。
   =========================================================================== */

body[data-room="flag"] {
  --container: 1440px;
  --inset: 24px;
  --section: clamp(88px, 9vw, 150px);
  --tile: #EFEFEF;
  --hd-h: 96px;
  --h2: 27px;
  --bname-size: 54px;
  --body: 16px;
}

/* Archivo は 400 のみ */
.en, .caps, .num, .price, .bname, .display { font-weight: 400; }
.display { font-weight: 400; letter-spacing: var(--ls-body); }

.ctr { text-align: center; }
.sub { color: var(--muted); font-size: 11px; margin-top: 4px; }

/* 本文 16px（和文） */
.lead { font-family: var(--font-jp); font-size: var(--body); font-weight: 400;
        line-height: 1.85; letter-spacing: var(--ls-jp); color: var(--fg); }

/* 章見出し 27px / 400 */
h2.caps, h3.caps {
  font-family: var(--font-en); font-stretch: var(--wdth-normal);
  font-size: var(--h2); line-height: 1.15; letter-spacing: .01em;
  text-transform: uppercase; font-weight: 400;
}

/* ブランド名 54px / 400（2段階めはここだけ） */
.bname {
  display: block;
  font-family: var(--font-en); font-stretch: var(--wdth-normal);
  font-size: var(--bname-size); line-height: 1.02; letter-spacing: -.005em;
  text-transform: uppercase; font-weight: 400;
}
.bname sup {
  font-size: .30em; line-height: 1; vertical-align: super;
  letter-spacing: .02em; margin-left: .12em; font-variant-numeric: tabular-nums;
}
sup.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------------------------------------------------------------------------
   ヘッダー（固定・2段）
   --------------------------------------------------------------------------- */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 60;
      background: var(--bg-flag); border-bottom: 1px solid var(--rule); }
.hd-top { position: relative; height: 62px; display: flex; align-items: center;
          justify-content: center; padding-inline: var(--inset); }
.hd-logo { display: block; }
.hd-logo img { width: 196px; height: auto; }
.hd-side { position: absolute; top: 50%; transform: translateY(-50%); display: flex; gap: 22px; }
.hd-l { left: var(--inset); }
.hd-r { right: var(--inset); }
.hd-side a, .hd-nav a { font-size: 12px; }
.hd-nav { height: 33px; display: flex; align-items: center; justify-content: center;
          gap: 26px; padding-inline: var(--inset); flex-wrap: wrap; }
.hd-ext { color: var(--muted); }

/* ---------------------------------------------------------------------------
   1. 3つの扉 — PC は固定幅（各1/3）。広がる動きは持たせない。
   --------------------------------------------------------------------------- */
.hero { padding-top: var(--hd-h); }
.hero-label { display: flex; align-items: baseline; justify-content: space-between;
              gap: 16px; padding: 26px var(--inset) 10px; }
.hero-label h1 { font-size: 12px; letter-spacing: var(--ls-caps); font-weight: 400; text-transform: uppercase; }
.hero-idx { font-size: 12px; letter-spacing: var(--ls-caps); }

.doors { display: flex; gap: 2px; padding-inline: var(--inset);
         height: clamp(460px, calc(100vh - 210px), 700px); }
.door { position: relative; flex: 1 1 0; width: 33.333%; min-width: 0; overflow: hidden; display: block; }
.door-media { position: absolute; inset: 0; display: block; background: var(--ink); }
.door-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.door-photo .door-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0 16%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 44%, rgba(0,0,0,.62) 100%);
}
.door-ink .door-media { background: linear-gradient(180deg, #1B1A17 0%, #0D0C0A 100%); }

.door-top, .door-cap { position: absolute; left: 22px; right: 22px; z-index: 2; color: #FFFFFF; }
.door-top { top: 20px; font-size: 11px; letter-spacing: var(--ls-caps); }
.door-cap { bottom: 22px; }
.door-cap .bname { color: #FFFFFF; }
.door-jp { display: block; margin-top: 10px; font-family: var(--font-jp);
           font-size: 12px; line-height: 1.7; letter-spacing: var(--ls-jp); color: rgba(255,255,255,.84); }
.door-cta { display: inline-block; margin-top: 12px; font-size: 11px;
            letter-spacing: var(--ls-caps); color: #FFFFFF;
            border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 3px; }
.door:hover .door-cta { border-bottom-color: #FFFFFF; }

/* ---------------------------------------------------------------------------
   2. COMPANY PROOF（五階）
   --------------------------------------------------------------------------- */
.sec { padding-block: var(--section); padding-inline: var(--inset);
       max-width: var(--container); margin-inline: auto; }
.sec-head { margin-bottom: 34px; }

.proof { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2px; }
.proof-i { margin: 0; min-width: 0; }
.proof-img { display: block; overflow: hidden; background: var(--tile); aspect-ratio: 3 / 2; }
.proof-img img { width: 100%; height: 100%; object-fit: cover; }
.proof-i figcaption { padding: 18px 26px 0 0; }
.proof-en { display: block; font-size: 11px; letter-spacing: var(--ls-caps); color: var(--muted); }
.proof-i .lead { margin-top: 10px; }

.cta { margin-top: 56px; }
.cta .h-btn { min-height: 48px; padding: 0 34px; }
.cta .sub { margin-top: 8px; }
.cta-addr { margin-top: 26px; font-size: 11px; letter-spacing: var(--ls-caps); color: var(--muted); }

/* ---------------------------------------------------------------------------
   3. CATEGORY
   --------------------------------------------------------------------------- */
.cat-list { display: flex; flex-wrap: wrap; justify-content: center;
            column-gap: 30px; row-gap: 6px; max-width: 1020px; margin: 44px auto 46px; }
.cat-list a { font-family: var(--font-en); font-stretch: var(--wdth-normal);
              font-size: var(--h2); line-height: 1.28; letter-spacing: .005em; text-transform: uppercase; }
.cat-list sup { font-size: .40em; vertical-align: super; margin-left: .06em; }

/* ---------------------------------------------------------------------------
   4–6. 全幅 KV ＋ 代表3点（棚は主役にしない）
   --------------------------------------------------------------------------- */
.kvsec { padding-block: 0 var(--section); }
.kv { width: 100%; margin: 0; overflow: hidden; background: var(--tile); aspect-ratio: 1536 / 660; }
.kv-wide { aspect-ratio: 1536 / 560; }
.kv img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

.kv-cap { max-width: var(--container); margin-inline: auto; padding: 26px var(--inset) 0; }
.kv-cap .lead { margin-top: 14px; max-width: 720px; }
.kv-link { display: inline-block; margin-top: 20px; font-size: 12px; }

.kv-grid { max-width: var(--container); margin: 54px auto 0; padding-inline: var(--inset); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 2px; row-gap: 56px; }

/* 商品タイル（薄灰・4:5・白背景の商品写真だけを載せる） */
.pc { min-width: 0; }
.pc-img { display: block; background: var(--tile); aspect-ratio: 4 / 5; overflow: hidden; }
/* 商品写真は四隅が純白のカットだけを選んである。multiply で白が薄灰に沈むので、
   TIGHTBOOTH と同じ「薄灰のタイルに商品が乗っている」見え方になる（写真は無加工のまま）。 */
.pc-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply;
              transform: scale(1); transition: transform var(--d-hover-img) var(--e-quart); }
.pc-img:hover img, .pc-img:focus-visible img { transform: scale(1.04); }
.pc-brand { margin-top: 13px; font-size: 10px; letter-spacing: var(--ls-caps); color: var(--muted);
            font-family: "Archivo", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
            font-stretch: var(--wdth-normal); text-transform: uppercase;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-name { font-family: var(--font-jp); font-size: 14px; font-weight: 400; line-height: 1.5;
           letter-spacing: var(--ls-jp); margin-top: 4px; padding-right: 8px; }
.pc-name.is-en { font-family: var(--font-en); font-stretch: var(--wdth-normal);
                 text-transform: uppercase; letter-spacing: var(--ls-body); line-height: 1.3; }
.pc-price { margin-top: 8px; font-size: 12px; }
.pc-price .tax { color: var(--muted); }
.pc-add { margin-top: 9px; font-family: var(--font-en); font-stretch: var(--wdth-normal);
          font-size: 11px; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.pc-add[data-done="1"] { color: var(--accent); }

/* ---------------------------------------------------------------------------
   7. FEATURE
   --------------------------------------------------------------------------- */
.feat { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2px; }
.feat-i { border-top: 1px solid var(--rule); padding: 18px 24px 42px 0; min-width: 0; }
.feat-n { display: block; font-size: 11px; color: var(--muted); letter-spacing: var(--ls-caps); }
.feat-t { margin-top: 14px; font-family: var(--font-en); font-stretch: var(--wdth-normal);
          font-size: 15px; line-height: 1.35; letter-spacing: .02em; text-transform: uppercase; font-weight: 400; }
.feat-i .lead { margin-top: 10px; }

/* ---------------------------------------------------------------------------
   フッター
   --------------------------------------------------------------------------- */
.ft { border-top: 1px solid var(--rule); padding: 62px var(--inset) 120px;
      max-width: var(--container); margin-inline: auto; }
.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 30px; }
.ft-col h3.caps { font-size: 12px; letter-spacing: var(--ls-caps); }
.ft-col ul { margin-top: 18px; display: grid; gap: 8px; }
.ft-col a { font-family: var(--font-en); font-stretch: var(--wdth-normal);
            font-size: 12px; letter-spacing: var(--ls-body); color: var(--muted); }
.ft-col a:hover { color: var(--fg); }
.ft-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
          margin-top: 58px; padding-top: 20px; border-top: 1px solid var(--rule); }
.ft-addr, .ft-c { font-size: 11px; letter-spacing: var(--ls-caps); color: var(--muted); }
.note { font-size: 11px; color: var(--muted); margin-top: 12px; }
.note.en { font-family: var(--font-en); font-stretch: var(--wdth-normal);
           letter-spacing: var(--ls-body); margin-top: 2px; }

/* ---------------------------------------------------------------------------
   固定 MENU（差し色 = 緑）＋ パネル: ブランド／会社／取引／ストア
   --------------------------------------------------------------------------- */
.menu-btn {
  position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); bottom: 22px;
  min-height: 44px; padding: 0 22px; display: inline-flex; align-items: center; gap: 14px;
  background: var(--pttp-green); color: var(--cream);
  font-size: 12px; letter-spacing: var(--ls-caps); text-transform: uppercase;
  font-family: var(--font-en); font-stretch: var(--wdth-normal);
  transition: background-color var(--d-hover-btn) linear, color var(--d-hover-btn) linear;
}
.menu-btn:hover, .menu-btn:focus-visible { background: var(--ink); color: var(--cream); }
.menu-ico { font-size: 14px; line-height: 1; }

.menu-panel { position: fixed; inset: 0; z-index: 69; background: var(--bg-flag); }
.menu-inner { height: 100%; display: flex; flex-direction: column; justify-content: center;
              padding: 0 var(--inset) 90px; max-width: var(--container); margin-inline: auto; }
.menu-x { position: absolute; top: 22px; right: var(--inset); font-size: 12px; letter-spacing: var(--ls-caps); }
.menu-list { display: grid; gap: 18px; }
.menu-list a { color: var(--fg); display: block; }
.menu-list a:hover { color: var(--accent); }
.menu-list .sub { margin-top: 2px; }

/* ---------------------------------------------------------------------------
   中くらいの画面
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .feat { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  body[data-room="flag"] { --bname-size: 40px; --h2: 22px; }
  .proof { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .proof-i figcaption { padding-right: 0; }
}

/* ---------------------------------------------------------------------------
   SP（749px 以下）
   扉 = ブランド名3つを常時表示（各44px以上）。タップで写真を切り替える。
   --------------------------------------------------------------------------- */
@media (max-width: 749px) {
  body[data-room="flag"] { --inset: 14px; --hd-h: 56px; --bname-size: 27px; --h2: 20px;
                           --section: 74px; --body: 16px; }

  .hd-top { height: 56px; }
  .hd-logo img { width: 124px; }
  .hd-side { gap: 12px; }
  .hd-side a { font-size: 11px; }
  .hd-l a:nth-child(2), .hd-r a:nth-child(1) { display: none; }
  .hd-nav { display: none; }

  .hero-label { padding: 18px var(--inset) 10px; }
  .hero-label h1 { font-size: 10px; }
  .hero-idx { font-size: 10px; display: none; }

  .doors { display: block; height: auto; padding-inline: var(--inset); }
  .door { display: block; width: 100%; overflow: visible; border-top: 1px solid var(--rule); }
  .door:first-child { border-top: 0; }

  /* 写真は開いている扉だけ */
  .door-media { position: relative; inset: auto; height: 0; overflow: hidden;
                background: none; transition: height .5s var(--e-expo); }
  .door.is-open .door-media { height: 94vw; }
  .door-media img { height: 100%; }
  .door-ink.is-open .door-media { background: linear-gradient(180deg, #1B1A17 0%, #0D0C0A 100%); }
  .door-photo .door-media::after { background: none; }
  .door-top { display: none; }

  /* 名前は常に見える。タップ領域は 56px */
  .door-cap { position: relative; left: auto; right: auto; bottom: auto;
              display: block; min-height: 56px; padding: 15px 0 16px; color: var(--fg); }
  .door-cap .bname { color: var(--fg); }
  .door-jp { color: var(--muted); font-size: 12px; margin-top: 6px; }
  .door-cta { color: var(--accent); border-bottom-color: var(--accent); margin-top: 8px; }
  .door:not(.is-open) .door-cap .bname { color: var(--muted); }

  .cat-list { column-gap: 0; row-gap: 4px; flex-direction: column;
              align-items: center; text-align: center; margin: 30px auto 34px; }

  .cta { margin-top: 40px; }
  .cta .h-btn { width: 100%; }

  .kv, .kv-wide { aspect-ratio: 4 / 5; }
  .kv img { object-position: center 38%; }
  .kv-grid { margin-top: 36px; }
  .grid3 { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 40px; }
  .grid3 .pc:nth-child(3) { grid-column: 1 / -1; max-width: calc(50% - 1px); }
  .pc-name { font-size: 13px; }

  .feat { grid-template-columns: minmax(0,1fr); }
  .feat-i { padding-bottom: 26px; }

  .ft-cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px 20px; }
  .ft { padding-bottom: 110px; }
}