/* =========================================================
   FULL HEIGHT DOOR® TOP PAGE STYLE
   ---------------------------------------------------------
   対象：
   フルハイトドア公式サイト トップページ

   主な内容：
   - ヘッダー / グローバルメニュー
   - Hero動画 / Heroテキスト
   - COLLECTIONS
   - BRAND STORY
   - INTERIOR SCENES
   - CATALOG COLLECTION
   - SHOWROOM / CONTACT / FOOTER
   - iPad / iPad Air / Smartphone レスポンシブ対応

   ファイル構成：
   - reset.css : 共通リセット
   - top.css   : トップページ固有スタイル
   - top.js    : トップページ固有JavaScript

   備考：
   CSS内の画像パスは css/ フォルダ基準のため、
   ../img/top/ を使用する。
   ========================================================= */

:root {
      --black: #050505;
      --deep: #0d0d0d;
      --gray: #999;
      --light: #f5f1ea;
      --line: rgba(255,255,255,.18);
      --gold: #b99a5b;
    }

html {
      scroll-behavior: auto;
    }

    body {
      overflow-x: hidden;
    }

    body {
      font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
      color: var(--light);
      background: var(--black);
      line-height: 1.8;
      letter-spacing: .04em;
      opacity: 1;
      transition: opacity .8s ease;
    }

/* =========================================================
   HEADER / GLOBAL MENU / PRODUCTS PANEL
   - HENGE寄せのヘッダー
   - PRODUCTS / ハンバーガーは常時白
   - ハンバーガーは18px × 12px
   - スクロール後は黒背景
========================================================= */

.site-header {
  position:fixed;
  top:0;
  left:0;
  z-index:1000;
  width:100%;
  padding:128px 9vw 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  mix-blend-mode:normal;
  transform:translateY(0);
  opacity:1;
  transition:background .45s ease, padding .45s ease, box-shadow .45s ease, backdrop-filter .45s ease, transform .75s cubic-bezier(.16,1,.3,1), opacity .75s ease;
}

.site-header.scrolled {
  padding:32px 9vw;
  background:rgba(5,5,5,.92);
  box-shadow:0 8px 28px rgba(0,0,0,.25);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.logo {
  display:block;
  width:180px;
  line-height:1;
  margin-left:0;
  color:inherit;
  position:relative;
  z-index:1002;
}

.kamiya-logo {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:none;
  transition:filter .35s ease, opacity .35s ease;
}

.site-header.scrolled .kamiya-logo { filter:brightness(0) invert(1); }

.header-right {
  position:relative;
  z-index:1001;
  display:flex;
  align-items:center;
  gap:32px;
  margin-top:2px;
}

.header-products {
  font-family:"DIN Next LT Pro Condensed", "Inter", sans-serif;
  background:transparent;
  border:none;
  cursor:pointer;
  font-size:11px;
  line-height:1;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#fff;
  position:relative;
  padding-right:24px;
  white-space:nowrap;
  transition:color .35s ease;
}

.header-products::after {
  content:"";
  position:absolute;
  top:50%;
  right:0;
  width:1px;
  height:14px;
  background:rgba(255,255,255,.55);
  transform:translateY(-50%);
  transition:background .35s ease;
}

.menu-button {
  position:relative;
  z-index:1002;
  width:18px;
  height:12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  flex:0 0 18px;
  padding:0;
  background:transparent;
  border:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.menu-button span {
  display:block;
  width:100%;
  height:1px;
  background:#fff;
  opacity:.92;
  transition:background .35s ease, transform .35s ease, opacity .35s ease;
}

.menu-button.active span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
.menu-button.active span:nth-child(2) { opacity:0; }
.menu-button.active span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }

.overlay-menu {
  position:fixed;
  inset:0;
  z-index:3000;
  padding:128px 8vw 44px;
  display:flex;
  flex-direction:column;
  background:#050505;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  transition:.5s ease;
}

.overlay-menu.active { opacity:1; visibility:visible; pointer-events:auto; }

.overlay-logo {
  position:absolute;
  top:88px;
  left:8vw;
  z-index:3002;
  color:#fff;
  font-size:18px;
  font-weight:500;
  letter-spacing:.14em;
}

.overlay-close {
  position:absolute;
  top:88px;
  right:8vw;
  z-index:3003;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.overlay-columns {
  position:relative;
  z-index:3001;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(48px,6vw,110px);
  row-gap:44px;
  width:100%;
}

.overlay-column h3 {
  font-family:"DIN Next LT Pro Condensed", "Inter", sans-serif;
  font-size:clamp(28px,1.8vw,48px);
  font-weight:700;
  letter-spacing:.08em;
  line-height:1;
  color:rgba(255,255,255,.22);
  text-transform:uppercase;
  margin-bottom:28px;
}

.overlay-column ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.overlay-column a {
  font-family:"DIN Next LT Pro Condensed", "Inter", sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
}

.overlay-language {
  position:static;
  z-index:3002;
  display:flex;
  gap:18px;
  align-items:center;
  margin-top:34px;
  padding-bottom:0;
  font-size:12px;
  letter-spacing:.08em;
}

.lang-button {
  background:transparent;
  border:none;
  color:rgba(255,255,255,.42);
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  transition:.3s ease;
}

.lang-button { background:transparent; border:none; color:rgba(255,255,255,.42); cursor:pointer; font-family:inherit; font-size:12px; transition:.3s ease; }
.lang-button.active { color:#fff; }
.overlay-language strong { color:#fff; font-weight:500; }

.products-panel {
  position:fixed;
  inset:0;
  z-index:2500;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.45s ease;
}

.products-panel.active { opacity:1; visibility:visible; pointer-events:auto; }
.products-panel::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(1px); }

.products-panel-body {
  position:absolute;
  top:0;
  right:0;
  z-index:2502;
  width:min(360px,34vw);
  min-width:300px;
  height:100%;
  padding:150px 52px 60px;
  background:#050505;
  transform:translateX(100%);
  transition:.45s ease;
}

.products-panel.active .products-panel-body { transform:translateX(0); }
.products-list { display:flex; flex-direction:column; gap:22px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.products-list a:first-child { margin-bottom:28px; }

.products-close {
  position:absolute;
  top:88px;
  right:52px;
  z-index:2503;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  opacity:.95;
  transition:opacity .3s ease, transform .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.products-close:hover { opacity:.65; transform:rotate(90deg); }

.section-title span { font-size:clamp(14px,1.8vw,18px); font-weight:300; letter-spacing:.12em; }

    .hero {
      min-height: 100vh;
      position: relative;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      background: #000;
    }

    .hero-bg-logo {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: #050505;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      pointer-events: none;
    }

    .hero-bg-logo span,
    .hero-bg-logo small {
      font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
      color: #fff;
      letter-spacing: .16em;
    }

    .hero-bg-logo span {
      font-size: 20px;
      font-weight: 400;
    }

    .hero-bg-logo small {
      margin-top: 8px;
      font-size: 10px;
      opacity: .65;
      letter-spacing: .22em;
    }

    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      z-index: 1;
    }

    /* 基本はPC / 横向き用動画を表示 */
    .hero-video--pc {
      display: block;
    }

    .hero-video--tablet,
    .hero-video--sp {
      display: none;
    }

    @keyframes heroVideoZoom {
      to {
        transform: scale(1);
      }
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(
          to bottom,
          rgba(0,0,0,.12),
          rgba(0,0,0,.62)
        );
    }

    .hero-content {
      animation: heroTextIn 1.2s cubic-bezier(.16,1,.3,1) .15s both;
    }

    @keyframes heroTextIn {
      from {
        transform: translateY(34px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: radial-gradient(circle at 65% 40%, rgba(255,255,255,.08), transparent 32%);
    }

    .hero-content {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 0 7vw 96px;
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 48px;
      align-items: end;
      transform: translateY(0);
      opacity: 1;
      transition: transform 1.2s cubic-bezier(.16,1,.3,1), opacity 1.2s ease;
    }

    .hero-title {
      font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
      font-size: clamp(52px, 8vw, 140px);
      font-weight: 300;
      line-height: 1.02;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .hero-subtitle {
      font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
      font-size: 13px;
      letter-spacing: .22em;
      color: rgba(245,241,234,.72);
      text-transform: uppercase;
    }

    .jp-subtitle {
      display: block;
      margin-top: 10px;
      font-size: 12px;
      letter-spacing: .08em;
      color: rgba(245,241,234,.56);
    }

    .hero-copy {
      max-width: 430px;
      color: rgba(245,241,234,.78);
      font-size: 14px;
    }

    .scroll-sign {
      position: absolute;
      right: 42px;
      bottom: 40px;
      z-index: 3;
      font-size: 11px;
      writing-mode: vertical-rl;
      letter-spacing: .18em;
      color: rgba(255,255,255,.68);
    }

    .section {
      padding: 120px 7vw;
      background: var(--black);
    }

    .reveal {
      opacity: 0;
      transform: translateY(42px);
      transition: opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1);
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 48px;
      margin-bottom: 54px;
      border-top: 1px solid var(--line);
      padding-top: 28px;
    }

    .section-label {
      font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
      color: var(--gold);
      font-size: 12px;
      letter-spacing: .24em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .section-title {
      font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
      font-size: clamp(30px, 4vw, 64px);
      font-weight: 300;
      line-height: 1.2;
      letter-spacing: .08em;
    }

    .section-lead {
      max-width: 520px;
      color: rgba(245,241,234,.72);
      font-size: 14px;
    }

    .products-section {
      padding-right: 0;
      overflow: hidden;
    }

    .products-section .section-header {
      margin-right: 7vw;
    }

    .products-carousel {
      position: relative;
      width: 100vw;
      margin-left: -7vw;
      overflow: hidden;
    }

    .products-track-wrap {
      overflow: hidden;
      width: 100%;
      cursor: grab;
      touch-action: pan-y;
      user-select: none;
    }

    .products-track-wrap.dragging {
      cursor: grabbing;
    }

    .products-grid {
      display: flex;
      gap: 28px;
      width: max-content;
      padding: 0 7vw 24px 7vw;
      will-change: transform;
      transform: translate3d(0,0,0);
    }

    .products-grid::-webkit-scrollbar {
      display: none;
    }

    .product-card {
      position: relative;
      min-height: 620px;
      min-width: 520px;
      flex: 0 0 520px;
      overflow: hidden;
      background: #111;
      transition: transform .8s cubic-bezier(.16,1,.3,1), filter .8s ease;
    }

    .product-card:hover {
      transform: scale(.985);
      filter: brightness(1.08);
    }

    .product-card:nth-child(1) {
      background: url("../img/top/product01.jpg") center/cover;
    }

    .product-card:nth-child(2) {
      background: url("../img/top/product02.jpg") center/cover;
    }

    .product-card:nth-child(3) {
      background: url("../img/top/product03.jpg") center/cover;
    }

    .product-card:nth-child(4) {
      background: url("../img/top/product04.jpg") center/cover;
    }

    .product-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.72));
    }

    .product-card-content {
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 28px;
      z-index: 2;
      pointer-events: none;
    }

    .product-card h3 {
      font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
      font-size: 26px;
      font-weight: 300;
      margin-bottom: 8px;
    }

    .product-card p {
      font-size: 13px;
      color: rgba(255,255,255,.72);
    }

    .carousel-controls {
      display: flex;
      justify-content: flex-end;
      gap: 14px;
      margin-top: 22px;
      padding-right: 7vw;
    }

    .carousel-button {
      width: 46px;
      height: 46px;
      border: 1px solid rgba(255,255,255,.28);
      background: transparent;
      color: #fff;
      cursor: pointer;
      font-size: 18px;
      transition: .3s ease;
    }

    .carousel-button:hover {
      background: rgba(255,255,255,.08);
    }

    .gallery {
      background: #0b0b0b;
    }

    .gallery-layout {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 22px;
      align-items: stretch;
    }

    .gallery-large {
      min-height: 620px;
      background: url("../img/top/gallery-large.jpg") center/cover;
    }

    .gallery-side {
      display: grid;
      gap: 22px;
    }

    .gallery-small:nth-child(1) {
      background: url("../img/top/gallery-small01.jpg") center/cover;
    }

    .gallery-small:nth-child(2) {
      background: url("../img/top/gallery-small02.jpg") center/cover;
    }

    .catalog {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 60px;
      align-items: center;
      background: #111;
    }

    .catalog-visual {
      min-height: 520px;
      background:
        linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.42)),
        url("../img/top/catarog.jpg") center/cover;
    }

    .text-block h2 {
      font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
      font-size: clamp(34px, 5vw, 72px);
      font-weight: 300;
      line-height: 1.2;
      margin-bottom: 28px;
    }

    .text-block p {
      color: rgba(245,241,234,.72);
      margin-bottom: 32px;
      max-width: 560px;
    }

    .button {
      font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
      border-bottom: 1px solid rgba(255,255,255,.65);
      padding-bottom: 8px;
      transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease;
    }

    .button:hover {
      opacity: .72;
      transform: translateX(8px);
      border-color: rgba(255,255,255,.25);
    }

    .showroom {
      min-height: 760px;
      display: flex;
      align-items: flex-end;
      background:
        linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.82)),
        url("../img/top/showroom.jpg") center/cover;
    }

    .showroom-inner {
      width: 100%;
      padding: 0 7vw 88px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: end;
    }

    .showroom h2 {
      font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
      font-size: clamp(38px, 6vw, 92px);
      font-weight: 300;
      line-height: 1.1;
    }

    .showroom p {
      color: rgba(255,255,255,.78);
      max-width: 500px;
      font-size: 14px;
    }

    .contact {
      text-align: center;
      padding: 150px 7vw;
      background: var(--black);
    }

    .contact h2 {
      font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
      font-size: clamp(34px, 5vw, 76px);
      font-weight: 300;
      margin-bottom: 24px;
    }

    .contact p {
      color: rgba(245,241,234,.68);
      margin-bottom: 36px;
    }

    .footer {
      padding: 42px 7vw;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      gap: 24px;
      color: rgba(245,241,234,.62);
      font-size: 12px;
    }

    .footer-nav {
      display: flex;
      gap: 22px;
      flex-wrap: wrap;
    }

    .latin-font,
    .hero-title,
    .section-title,
    .section-label,
    .button,
    .product-card h3,
    .contact h2,
    .showroom h2,
    .text-block h2,
    .hero-subtitle,
    .scroll-sign,
    .footer-nav a,
    .header-products,
    .overlay-column h3,
    .overlay-column a,
    .products-list a {
      font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
    }

    body.is-loading {
      overflow: hidden;
    }

    .page-loader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #050505;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
      pointer-events: auto;
    }

    .page-loader-logo {
      text-align: center;
      color: #fff;
      letter-spacing: .16em;
    }

    .page-loader-logo span {
      display: block;
      font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
      font-size: 20px;
      font-weight: 400;
    }

    .page-loader-logo small {
      display: block;
      margin-top: 8px;
      font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
      font-size: 10px;
      letter-spacing: .22em;
      font-weight: 400;
      opacity: .65;
    }

    body.is-loading .site-header,
    body.is-loading main,
    body.is-loading footer,
    body.is-loading .products-panel,
    body.is-loading .overlay-menu {
      visibility: hidden;
    }

/* =========================================================
   OVERLAY MENU - LOW HEIGHT
   高さの低いPCでは縦方向の余白を圧縮
========================================================= */

@media (max-height:750px) and (min-width:1201px) {
  .overlay-menu {
    padding-top:104px;
    padding-bottom:32px;
  }

  .overlay-columns {
    row-gap:28px;
  }

  .overlay-column h3 {
    margin-bottom:20px;
  }

  .overlay-column ul {
    gap:7px;
  }

  .overlay-language {
    margin-top:24px;
  }
}

/* =========================================================
   GENERAL RESPONSIVE
========================================================= */

@media (max-width:1200px) {
  .site-header { padding:72px 6vw 0; }
  .site-header.scrolled { padding:24px 6vw; }
  .logo { width:140px; }
  .header-right { gap:24px; margin-top:2px; }
  .header-products { font-size:10px; letter-spacing:.2em; }

  .products-panel-body { width:82vw; min-width:0; padding:120px 32px 40px; }
  .products-close { top:40px; right:32px; }

  .overlay-menu { padding:120px 24px 40px; }
  .overlay-logo { top:40px; left:24px; }
  .overlay-close { top:40px; right:24px; }
  .overlay-columns { grid-template-columns:1fr; gap:42px; }
  .overlay-column h3 { margin-bottom:22px; }
  .overlay-language { position:static; margin-top:48px; }

  .hero-content,
  .showroom-inner,
  .gallery-layout { grid-template-columns:1fr; }

  .hero-content { padding:0 24px 92px; }
  .section,
  .contact { padding:86px 24px; }
  .section-header { display:block; }
  .section-lead { margin-top:24px; }
  .products-grid { display:flex; }
  .product-card { min-width:82vw; flex:0 0 82vw; }
  .product-card,
  .gallery-large,
  .catalog-visual { min-height:420px; }
  .gallery-small { min-height:260px; }
  .showroom-inner { padding:0 24px 72px; }
  .footer { display:block; }
  .footer-nav { margin-top:18px; }
}

@media (max-width:768px) {
  .site-header { padding:68px 24px 0; }
  .site-header.scrolled { padding:18px 24px; }
  .logo { width:112px; flex:0 0 112px; }
  .header-right { gap:20px; margin-top:0; }
  .header-products { display:inline-flex; align-items:center; font-size:10px; letter-spacing:.18em; padding-right:18px; }
  .header-products::after { height:12px; }

  .overlay-menu { padding:104px 24px 48px; min-height:100dvh; height:100dvh; }
  .overlay-logo { top:32px; left:24px; }
  .overlay-close { top:28px; right:24px; }
  .overlay-columns { gap:22px; }
  .overlay-column h3 { font-size:clamp(28px,8vw,34px); line-height:1; margin-bottom:12px; }
  .overlay-column ul { gap:7px; }
  .overlay-column li { line-height:1.15; }
  .overlay-column a { font-size:11px; line-height:1.15; display:inline-block; }
  .overlay-language { margin-top:34px; padding-bottom:8px; }
  .products-close { top:28px; right:24px; }
}

/* =========================================================
   HERO VIDEO RESPONSIVE
========================================================= */

.hero-video { top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:center center; }

@media (min-width:769px) and (max-width:1200px) and (orientation:portrait) {
  .hero-video--pc,
  .hero-video--sp { display:none !important; }
  .hero-video--tablet { display:block !important; object-position:center center !important; }
}

@media (max-width:768px) and (orientation:portrait) {
  .hero-video--pc,
  .hero-video--tablet { display:none !important; }
  .hero-video--sp { display:block !important; object-position:center center !important; }
}

@media (max-width:1200px) and (orientation:landscape) {
  .hero-video--pc { display:block !important; }
  .hero-video--tablet,
  .hero-video--sp { display:none !important; }
}

/* =========================================================
   PRODUCTS COLLECTION THUMBNAIL OVERRIDE
   添付画像の比率に固定
   - 添付画像実寸：483 × 625
   - 比率：width / height = 483 / 625
   - 幅：20vw
   - 高さ：20vw × 625 / 483 = 25.88vw
========================================================= */
:root {
  --product-thumb-width: 20vw;
  --product-thumb-height: calc(var(--product-thumb-width) * 625 / 483);
  --product-thumb-gap: 2.45vw;
  --product-thumb-start: 50vw;
}

.products-carousel {
  width: 100vw !important;
  margin-left: -7vw !important;
  overflow: hidden !important;
}

.products-grid {
  gap: var(--product-thumb-gap) !important;
  padding: 0 var(--product-thumb-start) 3vw var(--product-thumb-start) !important;
  align-items: flex-start !important;
}

.product-card {
  min-width: var(--product-thumb-width) !important;
  width: var(--product-thumb-width) !important;
  flex: 0 0 var(--product-thumb-width) !important;

  height: var(--product-thumb-height) !important;
  min-height: var(--product-thumb-height) !important;
  max-height: var(--product-thumb-height) !important;
  aspect-ratio: 483 / 625 !important;

  background-color: #000 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

.product-card::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.42)) !important;
}

.product-card-content {
  left: 1.15vw !important;
  right: 1.15vw !important;
  bottom: 1.15vw !important;
}

@media (max-width: 1200px) {
  .products-carousel {
    margin-left: -24px !important;
  }

  .products-grid {
    gap: var(--product-thumb-gap) !important;
    padding: 0 var(--product-thumb-start) 3vw var(--product-thumb-start) !important;
    align-items: flex-start !important;
  }

  .product-card {
    min-width: var(--product-thumb-width) !important;
    width: var(--product-thumb-width) !important;
    flex: 0 0 var(--product-thumb-width) !important;

    height: var(--product-thumb-height) !important;
    min-height: var(--product-thumb-height) !important;
    max-height: var(--product-thumb-height) !important;
    aspect-ratio: 483 / 625 !important;
  }

  .product-card-content {
    left: 1.15vw !important;
    right: 1.15vw !important;
    bottom: 1.15vw !important;
  }
}

@media (max-width: 768px) {
  :root {
    --product-thumb-width: 78vw;
    --product-thumb-height: calc(var(--product-thumb-width) * 625 / 483);
  }

  .products-carousel {
    margin-left: -24px !important;
  }

  .products-grid {
    gap: 4vw !important;
    padding: 0 24px 42px 24px !important;
    align-items: flex-start !important;
  }

  .product-card {
    min-width: var(--product-thumb-width) !important;
    width: var(--product-thumb-width) !important;
    flex: 0 0 var(--product-thumb-width) !important;

    height: var(--product-thumb-height) !important;
    min-height: var(--product-thumb-height) !important;
    max-height: var(--product-thumb-height) !important;
    aspect-ratio: 483 / 625 !important;
  }

  .product-card-content {
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
  }
}


/* =========================================================
   INTERIOR SCENES RESPONSIVE FIX
   - containをやめて、余白が出ないcoverに戻す
   - ただし高さを比率管理して、画面幅変更でも極端に切れない
   - 左大画像＋右2枚の高さが揃うように列比率を調整
========================================================= */
.gallery {
  overflow: hidden !important;
}

.gallery .section-header {
  margin-bottom: 42px !important;
}

.gallery-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.95fr) minmax(0, .95fr) !important;
  gap: 1.8vw !important;
  align-items: stretch !important;
}

.gallery-side {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 1.8vw !important;
  height: 100% !important;
}

.gallery-large,
.gallery-small {
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: #050505 !important;
}

.gallery-large {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}

.gallery-small {
  aspect-ratio: auto !important;
  height: 100% !important;
}

@media (min-width: 1440px) {
  .gallery-layout {
    gap: 28px !important;
  }

  .gallery-side {
    gap: 28px !important;
  }
}

@media (max-width: 1200px) {
  .gallery .section-header {
    margin-bottom: 34px !important;
  }

  .gallery-layout {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .gallery-side {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    gap: 18px !important;
    height: auto !important;
  }

  .gallery-large,
  .gallery-small {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    background-size: cover !important;
  }
}

@media (max-width: 768px) {
  .gallery-layout,
  .gallery-side {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .gallery-large,
  .gallery-small {
    aspect-ratio: 4 / 3 !important;
    background-size: cover !important;
  }
}


/* FINAL SCROLL FIX: Hero以降へ通常スクロールできるようにする */
html,
body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}


/* =========================================================
   CATALOG BALANCE FINAL OVERRIDE
   - 添付画像 483×625 の比率は維持
   - 最大サイズは 20% 小さく：386×500
   - 右テキストが窮屈にならないよう余白と列幅を再調整
========================================================= */
.catalog.section {
  display: grid !important;
  grid-template-columns: minmax(220px, min(25.6vw, 386px)) minmax(300px, 460px) !important;
  column-gap: clamp(28px, 4vw, 64px) !important;
  justify-content: center !important;
  align-items: center !important;
  padding: clamp(88px, 9vw, 132px) 5vw !important;
  background: #111 !important;
}

.catalog-visual {
  width: min(25.6vw, 386px) !important;
  max-width: 386px !important;
  max-height: 500px !important;
  aspect-ratio: 483 / 625 !important;
  height: auto !important;
  min-height: 0 !important;
  justify-self: end !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.catalog .text-block {
  width: 100% !important;
  max-width: 460px !important;
  justify-self: start !important;
}

.catalog .text-block h2 {
  font-size: clamp(34px, 4vw, 58px) !important;
  line-height: 1.15 !important;
  letter-spacing: .08em !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

.catalog .text-block p {
  max-width: 420px !important;
}

@media (max-width: 1200px) {
  .catalog.section {
    grid-template-columns: minmax(190px, 31vw) minmax(280px, 1fr) !important;
    column-gap: clamp(24px, 3.5vw, 44px) !important;
    padding: 78px 5vw !important;
  }

  .catalog-visual {
    width: min(31vw, 386px) !important;
    max-width: 386px !important;
    max-height: 500px !important;
  }

  .catalog .text-block h2 {
    font-size: clamp(30px, 4.6vw, 48px) !important;
  }
}

@media (max-width: 900px) {
  .catalog.section {
    grid-template-columns: minmax(170px, 36vw) minmax(260px, 1fr) !important;
    column-gap: 24px !important;

    padding: 70px 4vw !important;
  }

  .catalog-visual {
    width: min(36vw, 386px) !important;
  }

  .catalog .text-block h2 {
    font-size: clamp(28px, 5vw, 42px) !important;
  }
}

@media (max-width: 768px) {
  .catalog.section {
    display: block !important;
    padding: 72px 24px !important;
  }

  .catalog-visual {
    width: min(80vw, 386px) !important;
    max-width: 386px !important;
    max-height: 500px !important;
    margin: 0 auto 34px !important;
  }

  .catalog .text-block {
    max-width: none !important;
  }
}


/* =========================================================
   BRAND STORY
   ---------------------------------------------------------
   COLLECTIONSとINTERIOR SCENESの間に配置する
   ブランドストーリーへの大型リンクセクション

   表現：
   - テキストは固定
   - 背景画像のみパララックス
   - セクションが画面内に入ると背景画像をゆっくりフェードイン
========================================================= */

.brand-story {
  position: relative;
  padding: clamp(70px, 7vw, 120px) 3vw;
  background: #050505;
}

.brand-story-link {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(560px, 72vh, 820px);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #111;
}

.brand-story-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.brand-story-media img {
  position: absolute;
  top: -7.5%;
  left: 0;
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transform:
    translate3d(0, var(--parallax-y, 0px), 0)
    scale(1.04);
  will-change: transform, opacity;
  filter: brightness(.68);
  transition:
    opacity 1.8s ease,
    transform 1.8s cubic-bezier(.16, 1, .3, 1),
    filter .8s ease;
}

.brand-story.is-bg-visible .brand-story-media img {
  opacity: 1;
  transform:
    translate3d(0, var(--parallax-y, 0px), 0)
    scale(1.02);
}

.brand-story-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.22) 48%,
      rgba(0,0,0,.58) 100%
    );
}

.brand-story-content {
  position: absolute;
  z-index: 2;
  left: 44%;
  top: 50%;
  transform: translateY(-50%);
}

.brand-story-reveal {
  opacity: 0;
  transform: translateY(calc(-50% + 24px));
  transition:
    opacity 1s ease .15s,
    transform 1s cubic-bezier(.16, 1, .3, 1) .15s;
}

.brand-story-reveal.is-visible {
  opacity: 1;
  transform: translateY(-50%);
}

.brand-story-label {
  margin-bottom: 18px;
  font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: .24em;
  color: rgba(255,255,255,.58);
}

.brand-story-title {
  font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
  font-size: clamp(50px, 5vw, 82px);
  line-height: .95;
  font-weight: 300;
  letter-spacing: .04em;
}

.brand-story-copy {
  margin-top: 24px;
  font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
  font-size: clamp(15px, 1.3vw, 20px);
  letter-spacing: .05em;
  color: rgba(255,255,255,.84);
}

.brand-story-more {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "DIN Next LT Pro Condensed", "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
}

.brand-story-arrow {
  transition: transform .35s ease;
}

.brand-story-link:hover .brand-story-media img {
  transform:
    translate3d(0, var(--parallax-y, 0px), 0)
    scale(1.055);
  filter: brightness(.75);
}

.brand-story-link:hover .brand-story-arrow {
  transform: translateX(6px);
}

/* iPad / iPad Air */
@media (max-width: 1200px) {
  .brand-story {
    padding: 70px 24px;
  }

  .brand-story-link {
    height: min(70vh, 700px);
  }

  .brand-story-content {
    left: 10%;
  }
}

/* Smartphone */
@media (max-width: 768px) {
  .brand-story {
    padding: 56px 24px;
  }

  .brand-story-link {
    height: 68svh;
    min-height: 520px;
  }

  .brand-story-content {
    left: 24px;
    right: 24px;
    top: 50%;
  }

  .brand-story-title {
    font-size: clamp(44px, 14vw, 62px);
  }

  .brand-story-copy {
    margin-top: 18px;
    font-size: 15px;
  }

  .brand-story-more {
    bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-story-media img {
    opacity: 1;
    transform: scale(1.02);
    transition: none;
  }

  .brand-story-reveal {
    opacity: 1;
    transform: translateY(-50%);
    transition: none;
  }
}