/*
      アートボード 1240 x 760 基準
      全サイズを vw ベースで指定 → ブラウザ幅が変わっても比率一定
      --u = 100vw / 1240  (1アートボードpx相当)
    */
    :root {
      --bg: #fff;
      --text: #2f2f2f;
      --mobile-header-h: 120px;
      --u: calc(100vw / 1240);
    }

    * { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: "sofia-pro", "Noto Sans JP", sans-serif;
      font-weight: 400;
      line-height: 1.5;
      overflow-x: hidden;
    }

    img { display: block; width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }

    .pc-only  { display: block; }
    .sp-only  { display: none; }
    .site-shell { min-height: 100vh; }

    /* =================== PC =================== */
    .desktop-view {
      position: relative;
      width: 100vw;
      height: calc(760 * var(--u));
      overflow: hidden;
    }

    .sidebar {
      position: absolute;
      top:  calc(74 * var(--u));
      left: calc(72 * var(--u));
      width: calc(125 * var(--u));
      z-index: 30;
    }

    .sidebar__logo { display: inline-block; width: calc(60 * var(--u)); }
    .sidebar__logo img { width: 100%; }
    .sidebar__nav { margin-top: calc(14 * var(--u)); }
    .sidebar__nav ul { margin: 0; padding: 0; list-style: none; }
    .sidebar__nav li + li { margin-top: calc(6 * var(--u)); }
    .sidebar__nav a { font-size: calc(8 * var(--u)); line-height: 1.45; }
    .sidebar__social { margin-top: calc(12 * var(--u)); font-size: calc(10 * var(--u)); }
    .sidebar__lang {
      display: flex; gap: calc(4 * var(--u)); align-items: center;
      margin-top: calc(12 * var(--u)); font-size: calc(8 * var(--u));
    }

    .hero-area {
      position: absolute;
      top:  calc(74  * var(--u));
      left: calc(208 * var(--u));
      width:  calc(900 * var(--u));
      height: calc(620 * var(--u));
    }

    .hero-slider-wrap, .hero-slider { position: relative; width: 100%; height: 100%; }

    .hero-slide {
      position: absolute; inset: 0;
      opacity: 0; visibility: hidden; pointer-events: none; z-index: 1;
      transition: opacity 1000ms ease;
    }
    .hero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; }
    .hero-slide__inner { width: 100%; height: 100%; }

    .hero-card { margin: 0; overflow: hidden; background: transparent; }
    .hero-card img { width: 100%; height: 100%; object-fit: cover; }

    .layout-vv {
      display: grid;
      grid-template-columns: calc(415 * var(--u)) calc(415 * var(--u));
      gap: calc(70 * var(--u));
    }
    .hero-card--portrait { width: calc(415 * var(--u)); height: calc(620 * var(--u)); }

    .layout-vh {
      display: grid;
      grid-template-columns: calc(415 * var(--u)) calc(415 * var(--u));
      gap: calc(70 * var(--u));
    }
    .hero-card--landscape {
      width: calc(415 * var(--u)); height: calc(270 * var(--u));
      margin-top: calc(175 * var(--u));
    }

    .layout-h1 { display: block; }
    .hero-card--wide { width: calc(900 * var(--u)); height: calc(620 * var(--u)); }

    /* =================== SP =================== */
.mobile-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--mobile-header-h);
  justify-content: center;
  align-items: center;
  background: var(--bg);
  display: none;
}

.menu-open .mobile-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--mobile-header-h);
  justify-content: center;
  align-items: center;
  background: unset;
  display: none;
}

.mobile-header__logo { width: 95px; }
.menu-open .mobile-header__logo { display: none; }
.mobile-header__toggle {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 39px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: none;
  z-index: 61;
}
    .mobile-header__toggle span {
      position: absolute; left: 0; width: 100%; height: 1px;
      background: rgba(0,0,0,.48);
      transition: transform .28s ease, opacity .22s ease, top .28s ease;
    }
    .mobile-header__toggle span:nth-child(1) { top: 6px; }
    .mobile-header__toggle span:nth-child(2) { top: 14px; }
    .mobile-header__toggle span:nth-child(3) { top: 22px; }
    .menu-open .mobile-header__toggle span:nth-child(1) { top: 14px; transform: rotate(45deg); }
    .menu-open .mobile-header__toggle span:nth-child(2) { opacity: 0; }
    .menu-open .mobile-header__toggle span:nth-child(3) { top: 14px; transform: rotate(-45deg); }

    .mobile-drawer {
      position: fixed; inset: 0; z-index: 50;
      visibility: hidden; pointer-events: none; display: none;
    }
    .mobile-drawer__panel {
      position: absolute; top: 0; left: 0;
      width: min(78vw, 320px); height: 100vh;
      padding: 90px 28px 32px; background: #f4f4f4;
      transform: translateX(-100%); transition: transform .3s ease;
      display: flex; flex-direction: column; justify-content: space-between;
    }
    .mobile-drawer__backdrop {
      position: absolute; inset: 0; border: 0;
      background: rgba(0,0,0,.16); opacity: 0; transition: opacity .28s ease;
    }
    .menu-open .mobile-drawer { visibility: visible; pointer-events: auto; }
    .menu-open .mobile-drawer__panel { transform: translateX(0); }
    .menu-open .mobile-drawer__backdrop { opacity: 1; }

    .mobile-drawer__nav ul { margin: 0; padding: 0; list-style: none; }
    .mobile-drawer__nav a { font-size: 14px; line-height: 1.45; }
    .mobile-drawer__nav li + li { margin-top: 14px; }
    .mobile-drawer__footer {
      display: flex; align-items: center; justify-content: space-between;
      gap: 20px; font-size: 14px;
    }
    .mobile-drawer__lang { display: flex; align-items: center; gap: 6px; }

.gallery-mobile {
  position: relative;
  padding-top: var(--mobile-header-h);
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.gallery-mobile__item {
  position: absolute;
  top: var(--mobile-header-h);
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1000ms ease;
}

.gallery-mobile__item.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.gallery-mobile__item img {
  width: 100%;
  height: auto;
  display: block;
}

    @media (min-width: 768px) {
      .sp-only, .mobile-header, .mobile-header__toggle, .mobile-drawer { display: none !important; }
      .pc-only { display: block !important; }
    }
    @media (max-width: 767px) {
      .pc-only { display: none !important; }
      .sp-only { display: block !important; }
      .mobile-header { display: flex !important; }
      .mobile-header__toggle { display: block !important; }
      .mobile-drawer { display: block !important; }
      body.menu-open { overflow: hidden; }


    .sidebar__nav a { font-size: 14px; line-height: 1.45; }
    }