:root {
    --bg: #c9c9cb;
    --bg-deep: #b4b4b7;
    --ink: #1a1a1c;
    --ink-soft: #3a3a3d;
    --line: rgba(26, 26, 28, 0.28);
    --serif-en: "EB Garamond", "Times New Roman", serif;
    --serif-ja: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overscroll-behavior: none;
  }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--serif-ja);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overscroll-behavior: none;
  }

  /* ---------- 固定ステージ(3D) ---------- */
  .stage {
    position: fixed;
    inset: 0;
    background:
      radial-gradient(120% 90% at 50% 42%, #d2d2d4 0%, var(--bg) 55%, var(--bg-deep) 100%);
    z-index: 1;
  }

  #stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
  }

  /* ---------- header ---------- */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(1.4rem, 3vw, 2.6rem) clamp(1.4rem, 4vw, 3.4rem);
    z-index: 20;
  }

  .header__logo img {
    display: block;
    height: clamp(2rem, 3.4vw, 2.9rem);
    width: auto;
    filter: invert(1) opacity(.92);
  }

  .menu-btn {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: .6rem 0;
  }
  .menu-btn span {
    display: block;
    width: 34px;
    height: 1.5px;
    background: var(--ink);
    transition: transform .45s cubic-bezier(.19,1,.22,1);
  }
  .menu-btn span + span { margin-top: 9px; }
  .menu-btn.on span:nth-child(1) { transform: translateY(5.25px) rotate(18deg); }
  .menu-btn.on span:nth-child(2) { transform: translateY(-5.25px) rotate(-18deg); }

  /* ---------- モバイル全画面メニュー ---------- */
  .mnav {
    position: fixed;
    inset: 0;
    z-index: 15;
    background: rgba(203, 203, 205, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s ease, visibility .55s ease;
  }

  .mnav.on {
    opacity: 1;
    visibility: visible;
  }

  .mnav__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3.4svh, 2.1rem);
  }

  .mnav__links a {
    font-family: var(--serif-en);
    font-size: clamp(1.15rem, 1.5vw, 1.45rem);
    letter-spacing: .42em;
    text-indent: .42em;
    color: var(--ink);
    text-decoration: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .7s cubic-bezier(.19,1,.22,1), transform .7s cubic-bezier(.19,1,.22,1);
  }

  .mnav.on .mnav__links a { opacity: 1; transform: none; }
  .mnav.on .mnav__links a:nth-child(1) { transition-delay: .08s; }
  .mnav.on .mnav__links a:nth-child(2) { transition-delay: .14s; }
  .mnav.on .mnav__links a:nth-child(3) { transition-delay: .2s; }
  .mnav.on .mnav__links a:nth-child(4) { transition-delay: .26s; }
  .mnav.on .mnav__links a:nth-child(5) { transition-delay: .32s; }
  .mnav.on .mnav__links a:nth-child(6) { transition-delay: .38s; }
  .mnav.on .mnav__links a:nth-child(7) { transition-delay: .44s; }
  .mnav.on .mnav__links a:nth-child(8) { transition-delay: .5s; }

  .mnav__legal {
    margin-top: clamp(2.6rem, 6svh, 3.6rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem 1.6rem;
    max-width: 84vw;
    opacity: 0;
    transition: opacity .7s ease .5s;
  }

  .mnav.on .mnav__legal { opacity: 1; }

  .mnav__legal a {
    font-size: clamp(.72rem, .9vw, .86rem);
    letter-spacing: .12em;
    color: var(--ink-soft);
    text-decoration: none;
  }

  .mnav__copy {
    position: absolute;
    bottom: 4svh;
    font-family: var(--serif-en);
    font-size: .7rem;
    letter-spacing: .18em;
    color: var(--ink-soft);
    opacity: 0;
    transition: opacity .7s ease .6s;
  }

  .mnav.on .mnav__copy { opacity: 1; }

  html.menu-open { overflow: hidden; }

  /* ---------- FVオーバーレイ(固定・スクロールで退場) ---------- */
  .fv-ui {
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    will-change: opacity, transform;
  }

  .fv-ui.is-gone a { pointer-events: none; }

  .fv__copy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  /* 背景(ショーケースの畳んだTシャツ)と重なっても文字が沈まないよう、
     コピーの背後だけ淡いベールを敷く。四辺とも透明に抜いて境目を見せない */
  .fv__copy::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 168%;
    height: 260%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(233, 233, 235, .92) 0%, rgba(233, 233, 235, .78) 45%, rgba(233, 233, 235, 0) 100%);
    pointer-events: none;
    z-index: -1;
  }

  /* 改行位置は <br> で決めているので自動では折り返さない
     (中央基準の絶対配置で使える幅が画面の半分しかなく、SPで文字を大きくすると途中で折れるため) */
  .fv__tagline {
    white-space: nowrap;
    font-family: var(--serif-ja);
    font-weight: 700;
    font-size: clamp(.92rem, 2.82vw, 2.82rem);
    letter-spacing: .32em;
    text-indent: .34em;
    color: var(--ink-soft);
    line-height: 1.85;
    opacity: 0;
    animation: fade-up 1.8s cubic-bezier(.19,1,.22,1) 1s forwards;
  }

  @keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* scroll cue */
  .fv__scroll {
    position: absolute;
    left: 50%;
    bottom: 3.2svh;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    opacity: 0;
    animation: fade-up-center 1.8s cubic-bezier(.19,1,.22,1) 1.7s forwards;
  }

  .fv__scroll-label {
    font-family: var(--serif-en);
    font-size: .68rem;
    letter-spacing: .42em;
    text-indent: .42em;
    color: var(--ink-soft);
  }

  .fv__scroll-line {
    width: 1px;
    height: 56px;
    background: var(--line);
    overflow: hidden;
    position: relative;
  }

  .fv__scroll-line::after {
    content: "";
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    background: var(--ink);
    animation: scroll-drip 2.4s cubic-bezier(.65,0,.35,1) infinite;
  }

  @keyframes scroll-drip {
    0%   { top: -100%; }
    55%  { top: 100%; }
    100% { top: 100%; }
  }

  /* copyright (desktop: 常時固定表示) */
  .fv__copyright {
    position: fixed;
    left: clamp(1.4rem, 4vw, 3.4rem);
    bottom: clamp(1.2rem, 2.6vw, 2.2rem);
    font-family: var(--serif-en);
    font-size: clamp(.64rem, 1.08vw, 1.056rem);
    letter-spacing: .18em;
    color: var(--ink-soft);
    z-index: 7;
  }

  /* ---------- FV専用スクロールダウン(下部中央。FVでのみ表示、JSで不透明度制御) ---------- */
  .sdown {
    position: fixed;
    left: 50%;
    bottom: clamp(1.6rem, 5svh, 3.2rem);
    transform: translateX(-50%);
    width: 118px;
    height: 118px;
    z-index: 7;
    display: block;
    color: var(--ink);
    text-decoration: none;
    opacity: 0;
    transition: opacity .4s ease;
  }

  .sdown.is-hidden { pointer-events: none; }

  .sdown__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: sdownSpin 16s linear infinite;
  }

  /* 文字数×字間で円周(2π×45≒282)をちょうど一周させる。文言を変えたら字間も調整する */
  .sdown__text {
    font-family: var(--serif-en);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .23em;
    fill: currentColor;
  }

  /* 中央は「01:00」を指す時計: 長針(分針)が12、短針(時針)が1。
     .sdown__arrow を分針(支点=上端、180°回転で真上向き)、その ::before を時針(分針から30°=1時方向)として描く */
  .sdown__arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.5px;
    height: 34px;
    background: currentColor;
    transform-origin: 50% 0;
    transform: translateX(-50%) rotate(180deg);
  }

  .sdown__arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 22px;
    margin-left: -1px;
    background: currentColor;
    transform-origin: 50% 0;
    transform: rotate(30deg);
  }

  .sdown__arrow::after { content: none; }

  /* 支点のドット */
  .sdown[data-mode="ring"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: currentColor;
  }

  .sdown:hover .sdown__arrow { animation: sdownNudge 1.2s ease-in-out infinite; }

  @keyframes sdownSpin { to { transform: rotate(360deg); } }
  @keyframes sdownNudge {
    0%, 100% { transform: translateX(-50%) rotate(180deg); }
    50% { transform: translateX(-50%) rotate(186deg); }
  }

  /* --- 表示モード切替: ring / line / mouse --- */
  .sdown__label, .sdown__line, .sdown__mouse { display: none; }
  .sdown[data-mode="line"] .sdown__ring,
  .sdown[data-mode="line"] .sdown__arrow,
  .sdown[data-mode="mouse"] .sdown__ring,
  .sdown[data-mode="mouse"] .sdown__arrow { display: none; }

  /* B: SCROLL の文字 + 縦線を光が流れ落ちる */
  .sdown[data-mode="line"] {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
  }

  .sdown[data-mode="line"] .sdown__label {
    display: block;
    font-family: var(--serif-en);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .38em;
    text-indent: .38em;
    color: var(--ink);
  }

  .sdown[data-mode="line"] .sdown__line {
    display: block;
    width: 1px;
    height: 64px;
    background: var(--line);
    position: relative;
    overflow: hidden;
  }

  .sdown[data-mode="line"] .sdown__line::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 45%;
    background: var(--ink);
    animation: sdownDrop 1.9s cubic-bezier(.65,0,.35,1) infinite;
  }

  @keyframes sdownDrop {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(230%); }
  }

  /* C: マウス型のピル + 落ちるドット + SCROLL */
  .sdown[data-mode="mouse"] {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
  }

  .sdown[data-mode="mouse"] .sdown__mouse {
    display: block;
    width: 22px;
    height: 36px;
    border: 1px solid var(--ink);
    border-radius: 12px;
    position: relative;
  }

  .sdown[data-mode="mouse"] .sdown__mouse i {
    position: absolute;
    left: 50%;
    top: 7px;
    width: 2px;
    height: 6px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--ink);
    animation: sdownWheel 1.7s ease-in-out infinite;
  }

  .sdown[data-mode="mouse"] .sdown__label {
    display: block;
    font-family: var(--serif-en);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .38em;
    text-indent: .38em;
    color: var(--ink-soft);
  }

  @keyframes sdownWheel {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(14px); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sdown__ring, .sdown__line::after, .sdown__mouse i { animation: none; }
  }

  /* ---------- スクロールセクション ---------- */
  .sections {
    position: relative;
    z-index: 5;
    pointer-events: none;
  }

  .sections section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  #s-tv1,
  #s-tv2,
  #s-fv {
    height: 100svh;
    min-height: 640px;
  }

  /* スクロールキュー(最上部のTVビューでのみ表示) */
  .cue-ui {
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
  }

  /* PHILOSOPHY / NEWS ではカメラがショーケースに寄り、畳んだTシャツの柄が文字の真後ろに来るため、
     3Dと文字の間に白いすりガラス状のモヤを敷く。不透明度は site.js で制御(FVでは0) */
  .haze {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(110% 85% at 50% 50%, rgba(244, 244, 246, .84) 0%, rgba(238, 238, 240, .74) 62%, rgba(232, 232, 234, .64) 100%);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }

  /* テレビの中へ入る瞬間のホワイトアウト */
  .tvin {
    position: fixed;
    inset: 0;
    background: var(--bg);
    opacity: 0;
    pointer-events: none;
    z-index: 8;
  }

  #s-message {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(6rem, 14svh, 10rem) clamp(1.6rem, 6vw, 4rem) clamp(4rem, 9svh, 7rem);
  }

  /* ---------- Message ---------- */
  .message {
    width: min(720px, 100%);
    pointer-events: auto;
    text-align: center;
  }

  .message__label,
  .sec-label {
    display: inline-flex;
    align-items: center;
    gap: 1.1rem;
    font-family: var(--serif-en);
    font-size: clamp(.7rem, 1.26vw, 1.224rem);
    font-weight: 600;
    letter-spacing: .4em;
    text-indent: .4em;
    color: var(--ink-soft);
  }

  .message__label::before,
  .message__label::after,
  .sec-label::before,
  .sec-label::after {
    content: "";
    width: 2.6rem;
    height: 1px;
    background: var(--line);
  }

  .message__title {
    margin-top: clamp(1.8rem, 4svh, 2.8rem);
    font-family: var(--serif-ja);
    font-weight: 600;
    font-size: clamp(1.15rem, 3.72vw, 3.48rem);
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: .18em;
    text-indent: .18em;
    color: var(--ink);
  }

  .message__body {
    margin-top: clamp(2.2rem, 5svh, 3.4rem);
    text-align: left;
  }

  .message__body p {
    font-size: clamp(.8rem, 1.584vw, 1.56rem);
    font-weight: 600;
    line-height: 2.4;
    letter-spacing: .12em;
    color: var(--ink-soft);
  }

  .message__body p + p { margin-top: 1.9em; }

  .message__sub {
    margin-top: clamp(1.6rem, 3.4svh, 2.6rem);
    font-size: clamp(.84rem, 2.22vw, 1.92rem);
    font-weight: 700;
    letter-spacing: .26em;
    text-indent: .26em;
    color: var(--ink-soft);
  }


  .msg-br { display: inline; }

  /* mobile copyright (最終セクション末尾) */
  .m-copyright { display: none; }

  /* ---------- Store ---------- */
  #s-store {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: clamp(5rem, 10svh, 7rem) clamp(2.4rem, 6vw, 6rem) clamp(3rem, 6svh, 5rem) clamp(1.6rem, 5vw, 4.5rem);
  }

  .store {
    width: min(560px, 100%);
    pointer-events: auto;
  }

  .store .sec-label::before { display: none; }

  .store__title {
    margin-top: clamp(1rem, 2.4svh, 1.6rem);
    font-family: var(--serif-en);
    font-weight: 400;
    font-size: clamp(2.1rem, 5.6vw, 5rem);
    letter-spacing: .04em;
    line-height: 1;
    color: var(--ink);
  }

  .store__title .s-ne { font-size: .5em; }

  .store__cat {
    margin-top: .9rem;
    font-family: var(--serif-en);
    font-size: clamp(.64rem, 1.152vw, 1.14rem);
    letter-spacing: .3em;
    color: var(--ink-soft);
  }

  .store__desc {
    margin-top: clamp(1.2rem, 2.8svh, 1.8rem);
    font-size: clamp(.8rem, 1.4vw, 1.35rem);
    font-weight: 600;
    line-height: 2;
    letter-spacing: .1em;
    color: var(--ink-soft);
  }

  .store__info {
    margin-top: clamp(1.4rem, 3svh, 2rem);
    border-top: 1px solid var(--line);
  }

  .store__info > div {
    display: flex;
    gap: 1.4rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--line);
  }

  .store__info dt {
    flex: none;
    width: 116px;
    font-family: var(--serif-en);
    font-size: clamp(.64rem, 1.14vw, 1.104rem);
    letter-spacing: .26em;
    color: var(--ink-soft);
    padding-top: .25em;
  }

  .store__info dd {
    font-size: clamp(.78rem, 1.512vw, 1.464rem);
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--ink);
  }

  .store__info dd a,
  .co-info dd a {
    color: inherit;
    text-decoration: none;
  }

  /* 事業内容の箇条書き */
  .co-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .15em;
  }

  .co-list__k {
    display: inline-block;
    margin-right: 1em;
    white-space: nowrap;
  }

  .co-list__v { display: inline-block; white-space: nowrap; }

  .store__map {
    margin-left: .9em;
    font-family: var(--serif-en);
    font-size: .68em;
    letter-spacing: .22em;
    color: var(--ink-soft);
    white-space: nowrap;
  }

  .store__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.4rem, 2.6vw, 2.4rem);
  }

  .store__links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--serif-en);
    font-size: clamp(.7rem, 1.28vw, 1.2rem);
    letter-spacing: .24em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
  }

  /* 和文ラベルは字間を詰めて1行に収める */
  .store__links a.is-jp { letter-spacing: .1em; }

  .store__links a .ar {
    font-family: var(--serif-en);
    transition: transform .5s cubic-bezier(.19,1,.22,1);
  }

  .store__links a:hover .ar { transform: translateX(6px); }

  /* ---------- Buy Sell ---------- */
  #s-buysell {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(5.5rem, 12svh, 8rem) clamp(1.6rem, 6vw, 4rem) clamp(2.8rem, 7svh, 5rem);
  }

  .buysell {
    width: min(1120px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 4.5svh, 3.2rem);
    pointer-events: auto;
  }

  .bs-head { text-align: center; }

  .bs-lead {
    margin-top: 1.3rem;
    font-size: clamp(.8rem, 1.56vw, 1.512rem);
    font-weight: 600;
    line-height: 2.1;
    letter-spacing: .15em;
    color: var(--ink-soft);
  }

  /* 英字ラベル+和文の共通スタイル(Buy Sellのキャプション、Contactのリンクで使用) */
  .bs-en {
    display: block;
    font-family: var(--serif-en);
    font-size: clamp(.64rem, 1.14vw, 1.104rem);
    letter-spacing: .3em;
    color: var(--ink-soft);
  }

  .bs-jp {
    display: block;
    margin-top: .7rem;
    font-size: clamp(.95rem, 1.72vw, 1.6rem);
    font-weight: 700;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  .bs-banners {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.6rem, 3.6vw, 3.2rem);
  }

  .bs-banner {
    display: block;
    text-decoration: none;
    color: var(--ink);
  }

  .bs-banner__img {
    display: block;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 18px 40px -18px rgba(26, 26, 28, .45);
    background: #0a0a0b;
  }

  .bs-banner__img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1600 / 838;
    object-fit: cover;
    transform: scale(1);
    transition: transform .8s cubic-bezier(.19,1,.22,1), opacity .5s ease;
  }

  .bs-banner:hover .bs-banner__img img { transform: scale(1.03); }

  .bs-banner__cap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .9rem;
    padding: 0 2.4rem .7rem 0;
    border-bottom: 1px solid var(--line);
  }

  .bs-banner__cap .bs-en {
    display: block;
    font-size: clamp(.6rem, 1vw, .96rem);
    letter-spacing: .28em;
    white-space: nowrap;
  }

  .bs-banner__cap .bs-jp {
    display: block;
    margin: 0;
    font-size: clamp(.82rem, 1.3vw, 1.2rem);
    font-weight: 700;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  .bs-banner__cap .ar {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-60%);
    font-family: var(--serif-en);
    font-size: 1.1rem;
    transition: transform .5s cubic-bezier(.19,1,.22,1);
  }

  .bs-banner:hover .ar { transform: translateY(-60%) translateX(6px); }

  /* ---------- Company ---------- */
  #s-company {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(5rem, 10svh, 7rem) clamp(1.6rem, 6vw, 4rem) clamp(3rem, 6svh, 5rem);
  }

  .company {
    width: min(720px, 100%);
    text-align: center;
    pointer-events: auto;
  }

  .co-tag {
    margin-top: clamp(1.2rem, 2.6svh, 1.8rem);
    font-size: clamp(.86rem, 2vw, 1.8rem);
    font-weight: 700;
    letter-spacing: .3em;
    text-indent: .3em;
    color: var(--ink-soft);
    white-space: nowrap;
  }

  .co-info {
    margin-top: clamp(1.6rem, 3.6svh, 2.4rem);
    border-top: 1px solid var(--line);
    text-align: left;
  }

  .co-info > div {
    display: flex;
    gap: 1.4rem;
    padding: .62rem 0;
    border-bottom: 1px solid var(--line);
  }

  .co-info dt {
    flex: none;
    width: 118px;
    font-family: var(--serif-en);
    font-size: clamp(.64rem, 1.14vw, 1.104rem);
    letter-spacing: .26em;
    color: var(--ink-soft);
    padding-top: .25em;
  }

  .co-info dd {
    font-size: clamp(.78rem, 1.36vw, 1.3rem);
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: .08em;
    color: var(--ink);
  }

  /* WebGLテクスチャ用の動画: display:none だとiOSで再生されないため画面外に置く */
  .tv-src {
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    opacity: 0.01;
    pointer-events: none;
    z-index: -1;
  }

  /* ---------- Film (3D TVをショーケース内に配置) ---------- */
  #s-outro,
  #s-end {
    height: 100svh;
    min-height: 640px;
  }

  /* TVの下に出るキャプション(3Dの上に重ねる固定オーバーレイ) */
  .film-ui {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 4.5svh;
    text-align: center;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
  }

  .film-ui span {
    font-family: var(--serif-en);
    font-size: .74rem;
    letter-spacing: .4em;
    text-indent: .4em;
    color: var(--ink-soft);
  }

  /* ---------- News ---------- */
  #s-news {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(6rem, 13svh, 9rem) clamp(1.6rem, 6vw, 4rem) clamp(3.4rem, 8svh, 6rem);
  }

  .news {
    width: min(640px, 100%);
    text-align: center;
    pointer-events: auto;
  }

  .news__list {
    margin-top: clamp(2rem, 4.5svh, 3rem);
    border-top: 1px solid var(--line);
    text-align: left;
  }

  .news__list a {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
  }

  .news__meta {
    flex: none;
    display: flex;
    align-items: center;
    gap: .9rem;
  }

  .news__meta time {
    font-family: var(--serif-en);
    font-size: .76rem;
    letter-spacing: .16em;
    color: var(--ink-soft);
  }

  .news__meta i {
    font-style: normal;
    font-family: var(--serif-en);
    font-size: .58rem;
    letter-spacing: .22em;
    text-indent: .22em;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    padding: .4em .7em .32em;
    white-space: nowrap;
  }

  .news__title {
    flex: 1;
    font-size: clamp(.84rem, 1.584vw, 1.536rem);
    font-weight: 600;
    letter-spacing: .1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .news__list .ar {
    font-family: var(--serif-en);
    transition: transform .5s cubic-bezier(.19,1,.22,1);
  }

  .news__list a:hover .ar { transform: translateX(6px); }

  .news__all {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    margin-top: clamp(1.8rem, 4svh, 2.6rem);
    font-family: var(--serif-en);
    font-size: clamp(.72rem, 1.296vw, 1.248rem);
    letter-spacing: .3em;
    text-indent: .3em;
    color: var(--ink);
    text-decoration: none;
  }

  .news__all .ar {
    font-family: var(--serif-en);
    transition: transform .5s cubic-bezier(.19,1,.22,1);
  }

  .news__all:hover .ar { transform: translateX(6px); }

  /* ---------- Recruit ---------- */
  #s-recruit {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(6rem, 13svh, 9rem) clamp(1.6rem, 7vw, 6.5rem) clamp(3.4rem, 8svh, 6rem);
  }

  .recruit {
    width: min(680px, 100%);
    pointer-events: auto;
    text-align: center;
  }

  .recruit__links { text-align: left; }

  .recruit__mail {
    margin-left: auto;
    margin-right: 1.2rem;
    font-family: var(--serif-en);
    font-size: clamp(.66rem, 1vw, .92rem);
    letter-spacing: .08em;
    color: var(--ink-soft);
  }

  .recruit__title {
    margin-top: clamp(1.2rem, 3svh, 2rem);
    font-size: clamp(1.2rem, 2.55vw, 2.62rem);
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--ink);
  }

  .recruit__desc {
    margin-top: clamp(1.4rem, 3.4svh, 2.2rem);
    font-size: clamp(.8rem, 1.56vw, 1.512rem);
    font-weight: 600;
    line-height: 2.25;
    letter-spacing: .1em;
    color: var(--ink-soft);
  }

  .recruit__links {
    margin-top: clamp(1.6rem, 3.6svh, 2.4rem);
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
  }

  .recruit__links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .95rem 0;
    border-bottom: 1px solid var(--line);
    font-size: clamp(.76rem, 1.44vw, 1.392rem);
    letter-spacing: .18em;
    color: var(--ink);
    text-decoration: none;
  }

  .recruit__links a .ar {
    font-family: var(--serif-en);
    transition: transform .5s cubic-bezier(.19,1,.22,1);
  }

  .recruit__links a:hover .ar { transform: translateX(6px); }

  /* ---------- Contact ---------- */
  #s-contact {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(6rem, 13svh, 9rem) clamp(1.6rem, 6vw, 4rem) clamp(3.4rem, 8svh, 6rem);
  }

  .contact {
    width: min(560px, 100%);
    text-align: center;
    pointer-events: auto;
  }

  .ct-lead {
    margin-top: clamp(1.4rem, 3svh, 2.2rem);
    font-size: clamp(.8rem, 1.584vw, 1.56rem);
    font-weight: 600;
    line-height: 2.15;
    letter-spacing: .13em;
    color: var(--ink-soft);
  }

  .ct-lead span { display: inline-block; }

  .ct-links {
    margin-top: clamp(2rem, 4.5svh, 3rem);
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
    text-align: left;
  }

  .ct-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
  }

  .ct-links .bs-en { letter-spacing: .28em; }

  .ct-links .bs-jp { font-size: clamp(.98rem, 1.68vw, 1.38rem); }

  .ct-links .ar {
    font-family: var(--serif-en);
    font-size: 1.1rem;
    transition: transform .5s cubic-bezier(.19,1,.22,1);
  }

  .ct-note {
    flex: none;
    font-size: .68rem;
    letter-spacing: .14em;
    color: var(--ink-soft);
    white-space: nowrap;
  }

  .ct-links a:hover .ar { transform: translateX(6px); }

  .ct-legal {
    margin-top: clamp(2rem, 4.5svh, 3rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .9rem 1.8rem;
  }

  .ct-legal a {
    font-size: .72rem;
    letter-spacing: .14em;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .4s ease;
    padding-bottom: .15em;
  }

  .ct-legal a:hover { border-color: var(--line); }

  /* ---------- 暗転とエンド ---------- */
  .blackout {
    position: fixed;
    inset: 0;
    background: #0a0a0b;
    opacity: 0;
    pointer-events: none;
    z-index: 9;
  }

  .end {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    z-index: 10;
  }

  .end__mark {
    display: block;
    font-family: var(--serif-en);
    font-size: clamp(2rem, 4.8vw, 3.6rem);
    letter-spacing: .06em;
    color: #f4f4f4;
  }

  .end__mark .s-ne { font-size: .5em; }

  .end__msg {
    margin-top: 1.6rem;
    font-size: .84rem;
    letter-spacing: .3em;
    text-indent: .3em;
    color: rgba(244, 244, 244, .62);
  }

  .end__top {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    margin-top: clamp(2.4rem, 5.5svh, 3.6rem);
    padding: clamp(.75rem, 1.2vw, 1rem) clamp(1.6rem, 2.6vw, 2.2rem);
    border: 1px solid rgba(244, 244, 244, .32);
    font-family: var(--serif-en);
    font-size: clamp(.76rem, 1.05vw, 1rem);
    font-weight: 600;
    letter-spacing: .32em;
    text-indent: .32em;
    color: rgba(244, 244, 244, .88);
    text-decoration: none;
    pointer-events: auto;
    transition: background-color .5s cubic-bezier(.19,1,.22,1), border-color .5s ease, color .5s ease;
  }

  .end__top:hover {
    background: rgba(244, 244, 244, .08);
    border-color: rgba(244, 244, 244, .62);
    color: #fff;
  }

  .end__top-ar {
    font-size: .9em;
    text-indent: 0;
    transition: transform .5s cubic-bezier(.19,1,.22,1);
  }

  .end__top:hover .end__top-ar { transform: translateY(-3px); }

  /* ---------- ページ遷移フェード ---------- */
  .pgfade {
    position: fixed;
    inset: 0;
    background: var(--bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
    z-index: 95;
  }

  .pgfade.on {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---------- loader ---------- */
  .loader {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1s ease .2s, visibility 1s ease .2s;
  }

  .loader.is-done {
    opacity: 0;
    visibility: hidden;
  }

  .loader__mark {
    font-family: var(--serif-en);
    font-size: clamp(1.6rem, 3.6vw, 2.88rem);
    letter-spacing: .06em;
    color: var(--ink);
    opacity: .85;
    font-variant-numeric: tabular-nums;
    min-width: 4.2ch;
    text-align: center;
  }

  .loader__bar {
    position: absolute;
    bottom: 38%;
    left: 50%;
    transform: translateX(-50%);
    width: min(200px, 40vw);
    height: 1px;
    background: rgba(26,26,28,.15);
    overflow: hidden;
  }

  .loader__bar i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
  }

  /* ---------- mobile ---------- */
  @media (max-width: 760px) {
    /* CSSスナップはiOSの慣性スクロールと競合して引っかかるため、
       モバイルではJS側で1スワイプ=1セクションを制御する */
    html {
      scroll-snap-type: none;
      scroll-behavior: auto;
    }

    #s-fv { min-height: 100svh; }

    .fv__copy { top: 22%; } /* ヘッダーとショーケース上端の間の中央 */
    .fv__copy::before { width: 150%; height: 300%; }

    .fv__tagline {
      font-size: 1.25rem;
      line-height: 1.85;
      letter-spacing: .2em;
      text-indent: .2em;
    }

    .fv__scroll-line { height: 44px; }

    .fv__copyright { display: none; }

    #s-message {
      flex-direction: column;
      justify-content: center;
      gap: 0;
    }

    .message__body p { font-size: .8rem; line-height: 2.05; }
    .msg-br { display: inline; }
    .message__sub { font-size: .8rem; letter-spacing: .18em; text-indent: .18em; }

    /* Store: 上部にマネキン、下に情報(1画面に収める) */
    #s-store {
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 38svh clamp(1.6rem, 6vw, 3rem) 1.6rem clamp(1.6rem, 6vw, 3rem);
    }

    .store { width: min(400px, 100%); }

    .store__title { margin-top: .9rem; }
    .store__desc { margin-top: .9rem; line-height: 1.85; }
    .store__info { margin-top: 1.2rem; }
    .store__info > div { padding: .65rem 0; }

    .store__links {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 1.4rem;
    }
    .store__links a { padding: .7rem 0; font-size: .74rem; letter-spacing: .18em; }
    .store__links a.is-jp { letter-spacing: .08em; }
    .store__map { display: block; margin: .15em 0 0; }

    /* Buy Sell: バナー2枚を縦積み(マネキンなし)。
       実機はURLバー分だけ表示領域が低いため、バナー幅を画面高さ(svh)基準にして1画面に収める */
    #s-buysell { padding-top: 4rem; padding-bottom: 2rem; }

    .buysell { gap: 1.2rem; }

    .bs-lead {
      margin-top: .9rem;
      font-size: .78rem;
      max-width: 300px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.9;
    }

    .bs-banners {
      grid-template-columns: 1fr;
      gap: 1rem;
      width: min(100%, 46svh);
    }

    .bs-banner__cap {
      flex-direction: row;
      align-items: baseline;
      gap: .6rem;
      margin-top: .45rem;
      padding: 0 1.6rem .4rem 0;
    }
    .bs-banner__cap .bs-en { font-size: .54rem; letter-spacing: .2em; }
    .bs-banner__cap .bs-jp { font-size: .78rem; }
    .bs-banner__cap .ar { font-size: 1rem; }

    /* FVスクロールダウン: SPは小さめにして下端へ */
    /* SPは小さくして下端へ(マネキンの台座と重ならないように)。
       輪が小さいぶん文字を少し大きくし、字間を詰めて一周(≒282)に合わせる */
    .sdown { width: 66px; height: 66px; bottom: 1.1rem; }
    .sdown__text { font-size: 14px; letter-spacing: .145em; }
    .sdown__arrow { height: 19px; }
    .sdown__arrow::before { height: 12px; }
    .sdown[data-mode="ring"]::after { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
    .sdown[data-mode="line"] .sdown__line { height: 48px; }
    .sdown[data-mode="mouse"] .sdown__mouse { width: 20px; height: 32px; }

    /* モヤ: SPはぼかしを使わず(毎フレームの再合成が重いため)白の濃さだけで読みやすくする */
    .haze {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: rgba(242, 242, 244, .8);
    }

    /* Company: マネキンなし。項目が多いので横並びで高さを抑える */
    .co-tag {
      font-size: .8rem;
      letter-spacing: .2em;
      text-indent: .2em;
    }

    .co-info { margin-top: 1.6rem; }

    .co-info > div {
      gap: .8rem;
      padding: .58rem 0;
    }

    .co-info dt { width: 5.6rem; font-size: .6rem; padding-top: .3em; }
    .co-info dd { font-size: .8rem; line-height: 1.7; }
    .co-list { gap: .3em; }
    .co-list__k { display: block; min-width: 0; }
    .co-list__v { display: block; font-size: .72rem; color: var(--ink-soft); }

    /* Film */
    #s-outro, #s-end { min-height: 100svh; }

    .film-ui { bottom: 9svh; }
    .film-ui span { font-size: .66rem; }

    /* News: メタ行+タイトル行の2段 */
    .news__list a {
      flex-wrap: wrap;
      gap: .55rem 1rem;
      padding: 1rem 1.5rem 1rem 0;
      position: relative;
    }

    .news__title {
      flex-basis: 100%;
      white-space: normal;
      font-size: .88rem;
      line-height: 1.7;
    }

    .news__list .ar {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .news__list a:hover .ar { transform: translateY(-50%); }

    /* Recruit / Contact: マネキンなしで中央寄せ */
    #s-recruit { padding: 5rem clamp(1.6rem, 6vw, 3rem) 3rem; }

    .recruit { width: min(400px, 100%); }
    .recruit__mail { display: none; }

    .ct-lead {
      font-size: .78rem;
      line-height: 2;
    }

    .ct-links a { padding: 1rem 0; }

    .m-copyright {
      display: block;
      text-align: center;
      font-family: var(--serif-en);
      font-size: .72rem;
      letter-spacing: .18em;
      color: var(--ink-soft);
      padding-top: 2.4rem;
    }
  }

  /* 背の低い端末(iPhone SE等): ウォーターマークとの重なりを避け、1画面に収める */
  @media (max-width: 760px) and (max-height: 700px) {
    .fv__copy { top: 24%; }
    .fv__scroll-line { height: 28px; }

    .message__body p { font-size: .82rem; line-height: 1.95; }
    .message__title { font-size: 1.2rem; }

    #s-store { padding-top: 37svh; }
    .store__title { font-size: 2rem; }
    .store__desc { font-size: .78rem; line-height: 1.75; }
    .store__info > div { padding: .5rem 0; }
    .store__links a { padding: .55rem 0; }

    .co-info > div { padding: .42rem 0; }
    .co-info dt { font-size: .6rem; }
    .co-info dd { font-size: .78rem; line-height: 1.65; }
    .ct-links a { padding: .85rem 0; }
    .ct-legal { margin-top: 1.2rem; gap: .5rem 1.1rem; }
    .ct-legal a { font-size: .66rem; }
    .store__info > div { padding: .42rem 0; }
    .store__links a { padding: .48rem 0; }
    .store__desc { font-size: .72rem; line-height: 1.62; }
    .store__title { font-size: 1.7rem; }
    .store__cat { font-size: .6rem; }
    #s-store { padding-top: 35svh; }
    .sec-label, .message__label { font-size: .68rem; }
  }

  /* 極小端末(iPhone SE 第1世代など): 1画面に収めるためさらに圧縮 */
  @media (max-width: 760px) and (max-height: 620px) {
    .message__title { font-size: .98rem; letter-spacing: .1em; text-indent: .1em; }
    .message__sub { font-size: .72rem; margin-top: .7rem; }
    .message__body { margin-top: 1rem; }
    .message__body p { font-size: .7rem; line-height: 1.8; }

    #s-store { padding-top: 30svh; }
    .store__title { font-size: 1.45rem; }
    .store__desc { font-size: .66rem; line-height: 1.55; margin-top: .6rem; }
    .store__info { margin-top: .7rem; }
    .store__info > div { padding: .3rem 0; }
    .store__info dt, .store__links a, .store__info dd { font-size: .62rem; }
    .store__links a { padding: .34rem 0; }

    .news__list { margin-top: 1rem; }
    .news__list a { padding: .6rem 1.3rem .6rem 0; }
    .news__title { font-size: .74rem; }
    .news__meta time { font-size: .62rem; }
    .news__all { margin-top: 1rem; font-size: .66rem; }

    .buysell { gap: .8rem; }
    .bs-lead { display: none; }
    .bs-banners { gap: .7rem; }

    .co-info > div { padding: .3rem 0; }
    .co-info dd { font-size: .7rem; line-height: 1.5; }

    .recruit__title { font-size: 1.05rem; }
    .recruit__desc { font-size: .68rem; line-height: 1.7; margin-top: .7rem; }
    .recruit__links { margin-top: .8rem; }
    .recruit__links a { padding: .55rem 0; font-size: .7rem; }

    .ct-links a { padding: .7rem 0; }
    .ct-legal { margin-top: 1rem; }
    .m-copyright { padding-top: 1.2rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .fv__tagline, .fv__scroll { animation-duration: .01s; animation-delay: 0s; }
    .fv__scroll-line::after { animation: none; }
  }

  /* QA用(?still=1): 演出を省略して最終状態を即表示 */
  .qa-still * {
    animation-duration: .01s !important;
    animation-delay: 0s !important;
    transition-duration: .01s !important;
    transition-delay: 0s !important;
  }