@charset "UTF-8";
/* ============================================================
   style.css — 株式会社羽馬 採用HP プロトタイプ（§7 実装）
   参考サイトのサンプリング再現

   ■ 方針（§1・§12-1/2）
     これはサンプリング。参考サイトの構造・レイアウト・タイポ・モーションは
     そのまま吸い取る。独自解釈・アレンジは入れない。
     セレクタ・宣言の並びは reference/src/style.css をなぞってある。

   ■ 色（§7-1・§10-1 #4）
     色は 1つもベタ書きしない。全て tokens.css の var() から引く。
     tokens.css は gen-tokens.js の生成物＝直接編集しないこと。

   ■ tokens.css に変数が無い色の扱い（2件・いずれも実害なしと判断して記録）
     1) 参考 #444444（.grid_inner::before の hover オーバーレイ / 変換後 #3f454a）
        → tokens.css に該当変数が無いため var(--ink)（#2d3237）で代用。
          hover 時のみ opacity .4 でブラー画像の上に乗る面のため視覚差は検知不能。
     2) 参考 rgba(147,146,146,0.4)（.is-drawer-shown の円ボーダー）
        → color-mix(in srgb, var(--muted) 40%, transparent) で表現。
          --muted は #939292 の変換後（#8d939a）なので、結果は色変換表と厳密に一致する。

   ■ サイズについて
     tokens.css がトークン化している値（fs-* / lh-* / space-* / gutter / radius-* /
     dur-* / ease-* / stagger-*）は必ず var() から引く。
     トークン化されていないコンポーネント固有の寸法（ロゴ箱 116×40、円 80px、
     grid の gap 10px 等）は参考サイトの実測値をそのまま置く（参考側もリテラル）。

   ■ 参考サイトから意図的に変えた点（§7-3・§9-6 が"必須・例外なし"として要求）
     - :focus-visible を可視化（参考は reset.css で outline を全消し）
     - prefers-reduced-motion: reduce を尊重（参考は指定なし）
     - 動画に poster を付ける／SP には動画を配信しない
     - ヒーローのテキスト背面にオーバーレイ（参考は無し＝白文字が読めない）
     - one_letter の巨大見出しを aria-hidden にし sr-only の実見出しを併置
       （見た目は1pxも変えずに A11y を両立）
     詳細は README / レポート参照。
   ============================================================ */

/* ============================================================
   reset（参考 reset.css 相当。ただし outline 全消しはしない＝意図的な逸脱）
   ============================================================ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, main,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
}

main, article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  display: block;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

*, *:before, *:after {
  box-sizing: border-box;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  border: none;
}

/* ============================================================
   base（参考 style.css 1-60行）
   ============================================================ */
html {
  font-size: 62.5%; /* 1rem = 10px */
}

html, body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-base);
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-font-feature-settings: var(--font-feature);
  font-feature-settings: var(--font-feature); /* palt 1 ＝参考は字間をこれで作る */
  cursor: none;                                /* 独自カーソルに置換 */
}

button {
  line-height: 2;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--dur-base);
}

@media screen and (min-width: 951px) {
  a:hover {
    cursor: none;
  }
}

img {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  line-height: 0;
}

::selection {
  background: var(--accent);
  color: var(--ink-invert);
}

::-moz-selection {
  background: var(--accent);
  color: var(--ink-invert);
}

/* ------------------------------------------------------------
   【意図的な逸脱 / §7-3・§10-1 #13】
   参考サイトは reset.css で a・button の outline を全消しし、
   さらに body{cursor:none} なので、キーボード操作で現在位置が分からない。
   "必須・例外なし" の要件なのでフォーカスリングを足す。
   ------------------------------------------------------------ */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* 濃色面・写真の上でも見えるように、暗い縁を重ねて二重リングにする */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--overlay);
}
/* キーボード操作中は独自カーソルを出さない（フォーカスリングを主役にする） */
body.is-keyboard,
body.is-keyboard a:hover {
  cursor: auto;
}

/* スクリーンリーダー専用（視覚的に隠す） */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media screen and (min-width: 951px) {
  .sp {
    display: none !important;
  }
}
@media screen and (max-width: 950px) {
  .pc {
    display: none !important;
  }
}

.container {
  overflow: hidden;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.content--body {
  width: 100%;
  position: relative;
  background: var(--bg);
}

.section--inner {
  position: relative;
  width: var(--inner-w); /* PC calc(100% - 160px) / SP calc(100% - 20px) */
  margin: 0 auto;
}

.section--tit {
  font-weight: 700;
  line-height: var(--lh-tit);
}

main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  z-index: 1;
}

.simple_sentence {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink);
}

.date {
  color: var(--ink);
  font-size: var(--fs-caption);
}

.tit {
  font-size: 1.3rem;
  line-height: 1.6;
}

.fadein {
  opacity: 0;
  transform: translate(0, var(--fadein-y));
  transition: all var(--dur-fade);
}

.fadeinAbove {
  opacity: 0;
  transform: translate(0, var(--fadein-y-above));
  transition: all var(--dur-fade);
}

.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.svg-symbol {
  display: none;
}

/* ------------------------------------------------------------
   one_letter — 1文字ずつ下からせり上がる（stagger 0.08s）
   ------------------------------------------------------------ */
.one_letter {
  display: flex;
  overflow: hidden;
}
.one_letter span {
  display: block;
  transform: translate(0, var(--letter-y));
  transition: transform var(--ease-mask) var(--dur-mask);
}
.one_letter span:nth-child(2) { transition-delay: calc(var(--stagger-letter) * 1); }
.one_letter span:nth-child(3) { transition-delay: calc(var(--stagger-letter) * 2); }
.one_letter span:nth-child(4) { transition-delay: calc(var(--stagger-letter) * 3); }
.one_letter span:nth-child(5) { transition-delay: calc(var(--stagger-letter) * 4); }
.one_letter span:nth-child(6) { transition-delay: calc(var(--stagger-letter) * 5); }
.one_letter span:nth-child(7) { transition-delay: calc(var(--stagger-letter) * 6); }
.one_letter.scrollin span {
  transform: translate(0, 0);
}

.simpleParallax:has(.parallax_img), .simpleParallax:has(.parallax_img_watch) {
  overflow: visible !important;
}

.initial_color {
  color: var(--accent);
}

/* ------------------------------------------------------------
   ロゴ（参考サイトのロゴ SVG は他社ブランド要素のため使用不可 / §1）
   content-map.md の指定どおり Pacifico の "Haneuma" ＋ "THINK FOR ALL" で組む。
   元 #logo symbol の viewBox は 360×123。
     - スクリプト体 : 箱幅いっぱい（幅比 100%）
     - タグライン   : 箱幅の 40.8%（x 111.7→258.7）／最下部（y 105→122）
   font-size の係数は measure-logo.js の実測から算出（reference/logo-metrics.json）:
     Pacifico "Haneuma"      100px → 幅 389px  → 係数 100/389        = 0.25707
     Poppins700 "THINK FOR ALL" 100px → 幅 715px → 係数 100/715*0.408 = 0.05711
   ------------------------------------------------------------ */
/* ============================================================
   ロゴ（★オーナー指示: 現行ロゴを一切変えずそのまま使う）
   - 素材: prototype/img/logo.png = haneuma-official-astro/public/images/header-logo.png
     の**バイト単位の複製**（md5 117cac73b07db7d205ab032dc9acbf14）。
     リサイズ・減色・WebP化・色変換・difference合成のいずれも掛けない。
   - 実素材は 250x70 (ratio 3.571)、参考サイトのロゴ枠は 116x40 (ratio 2.9) と
     アスペクト比が違うため、object-fit:contain で**歪めずに**枠内へ収める。
   ============================================================ */
.logo_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* ← 絶対に fill/cover にしないこと（ロゴが歪む＝「変える」ことになる） */
  object-position: center;
}

/* ★参考に無い追加（意図的な逸脱／README記載事項）
   実ロゴはシルバー（不透明画素の平均輝度 0.764・実測）で、明るい下地では透かし同然になる。
   参考は「白ロゴ＋difference」で自動反転させて成立させていたが、実ロゴは反転＝加工にあたり不可。
   そこで**ロゴの画素には一切触れず**、背後に影だけを落として輪郭を立たせる。
   drop-shadow はアルファ形状に沿って落ちるので、矩形のスクリムのように面を汚さない。

   ★A-4: 濃色1色ベタ・SVG のロゴ（デザイナー発注済み）が届いたら、
     tokens.css の `--logo-filter: none;` の1行だけで影が消え、参考サイトの設計に戻る。
     （その際 logo.png を新ロゴに差し替える。手順は README 参照） */
.logo_img {
  filter: var(--logo-filter);
}

.logo_mark {
  position: relative;
  display: block;
  width: var(--logo-w);
  aspect-ratio: 360 / 123;
  line-height: 1;
  color: inherit;
}
.logo_mark__type {
  position: absolute;
  top: 2%;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--logo-w) * 0.25707);
  line-height: 1;
  white-space: nowrap;
}
.logo_mark__tag {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(var(--logo-w) * 0.05711);
  line-height: 1;
  white-space: nowrap;
}

/* opening の「書き進む」表現用のマスク。
   mask-size:200% ＋ mask-position 100%→0% で、左→右に現れる。
   （参考の stroke-dashoffset 1800→0 と同じ duration/delay を CSS 側で当てている） */
.logo_mark--draw .logo_img {
  -webkit-mask-image: linear-gradient(90deg, #000 0 50%, transparent 50% 100%);
  mask-image: linear-gradient(90deg, #000 0 50%, transparent 50% 100%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

/* ------------------------------------------------------------
   category（ラベル）
   ------------------------------------------------------------ */
@media screen and (min-width: 951px) {
  .category:has(a, button):hover {
    background: var(--accent);
  }
  .category:has(a, button):hover a, .category:has(a, button):hover button {
    color: var(--black);
  }
}
.category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-invert);
  background: var(--ink);
  padding: 4px 16px;
  line-height: var(--lh-label);
  border-radius: 10px;
  font-size: var(--fs-label);
  transition: var(--dur-base);
  vertical-align: middle;
}

/* ------------------------------------------------------------
   独自カーソル（二重カーソル）
   ------------------------------------------------------------ */
#mouse, #mouse-stalker {
  pointer-events: none;
  position: fixed;
  border-radius: 50%;
  background: var(--ink-invert);
  transform: translate(0, 0);
  z-index: 10000;
  mix-blend-mode: difference;
}

#mouse {
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  transition: var(--dur-cursor-dot);
  transition-timing-function: var(--ease-cursor);
}

#mouse-stalker {
  top: -15px;
  left: -15px;
  width: 30px;
  height: 30px;
  transition: var(--dur-cursor);
  transition-timing-function: var(--ease-stalker);
}
#mouse-stalker.is_active {
  top: -30px;
  left: -30px;
  width: 60px;
  height: 60px;
  transition: var(--dur-cursor-dot);
}

.touch-device #mouse, .touch-device #mouse-stalker {
  display: none;
}

/* ------------------------------------------------------------
   scroll-l（左下・縦組み「Scroll Down to See more」）
   ------------------------------------------------------------ */
.scroll-l {
  position: absolute;
  left: 55px;
  bottom: 0;
  display: inline-block;
  padding: 0 0 20px;
  line-height: var(--lh-flat);
  transform: rotate(-90deg);
  transform-origin: bottom left;
  transition: opacity var(--dur-base) var(--ease-base);
  pointer-events: none;
  opacity: 1;
  z-index: 10;
}
.scroll-l::before {
  animation: scroll 4s infinite;
  background-color: var(--deco-line);
  bottom: 0;
  content: "";
  height: 1px;
  margin: auto;
  position: absolute;
  right: 0;
  width: 184px;
  z-index: 2;
}
.scroll-l::after {
  background-color: var(--black);
  bottom: 0;
  content: "";
  height: 1px;
  margin: auto;
  position: absolute;
  right: 0;
  width: 184px;
}
.scroll-l p {
  margin-left: 50px;
  font-size: var(--fs-scroll);
  color: var(--black);
}
.scroll-l p span {
  color: var(--scroll-sub);
}
.scroll-l.ended {
  opacity: 0;
}

@media screen and (max-width: 950px) {
  .scroll-l {
    left: 40px;
    padding: 0 0 10px;
  }
}

/* ------------------------------------------------------------
   nav
   ------------------------------------------------------------ */
.gnav {
  display: flex;
  align-items: center;
  gap: 50px;
}
.gnav a {
  font-size: var(--fs-btn);
}

.snsnav li a,
.snsnav li .sns_link_disabled {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* URL未確定のSNSは <span class="sns_link_disabled"> ＝リンクとして機能させない。
   見た目は <a> と1pxも変えない。URL到着で <a href> に戻す（index.html の TODO 参照）。 */
.snsnav li .sns_link_disabled { color: inherit; }
.snsnav li a:active {
  pointer-events: none;
}
.snsnav li.sns_x svg { width: 15px; height: 15px; }
.snsnav li.sns_fb svg { width: 20px; height: 20px; }
.snsnav li.sns_insta svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------
   btn
   ------------------------------------------------------------ */
.btn {
  position: relative;
  z-index: 0;
}
.btn a {
  transition: var(--dur-base);
}
.btn a:hover {
  opacity: 1;
}
.btn a.disabled {
  pointer-events: none;
}

.btn--main, .btn--sub {
  width: 320px;
}
.btn--main a, .btn--sub a {
  display: block;
  font-size: 1.6rem;
  text-align: center;
  padding: 16px;
  width: 100%;
}
.btn--main a:after, .btn--sub a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  transition: var(--dur-base);
  z-index: -1;
}
.btn--main a span, .btn--sub a span {
  position: absolute;
  top: 50%;
  right: -12%;
  width: 100px;
  height: 1px;
}
.btn--main a span:after, .btn--sub a span:after {
  content: "";
  display: block;
  width: 0%;
  height: 1px;
  transition: 0.5s 0.3s;
}
.btn--main a {
  color: var(--accent);
}
.btn--main a:after {
  background-color: var(--ink);
}
.btn--main a span {
  background-color: var(--accent);
}
.btn--main a span:after {
  background-color: var(--ink);
}

.btn--circle {
  position: relative;
}
.btn--circle:before {
  content: "";
  position: absolute;
  bottom: -35px;
  left: -45px;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 40px;
  border: solid 1px var(--muted);
  transition: var(--dur-cursor);
}
.btn--circle a {
  position: relative;
  padding-bottom: 4px;
  padding-right: 26px;
  z-index: 1;
}
.btn--circle a span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transition: 0.5s;
}
.btn--circle a span::before {
  content: "";
  position: absolute;
  display: block;
  transition: all var(--dur-base);
  right: -4px;
  bottom: -3px;
  width: 10px;
  height: 10px;
  border-bottom: solid 1px var(--muted);
  transform: translateY(-55%) rotate(45deg);
}
.btn--circle a span:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--muted);
}

@media screen and (min-width: 951px) {
  .btn--main a:hover {
    color: var(--ink);
  }
  .btn--main a:hover:after {
    width: 75%;
    background-color: var(--accent);
  }
  .btn--main a:hover span::after {
    width: 100%;
  }
  .btn--circle:has(a:hover):before {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    bottom: -15px;
    transform: translateX(150px);
    z-index: -1;
  }
  .btn--circle a:hover span {
    transform: translateX(26px);
  }
}
@media screen and (max-width: 950px) {
  .btn--main, .btn--sub {
    width: 210px;
  }
  .btn--main a, .btn--sub a {
    font-size: var(--fs-btn);
    padding: 10px;
  }
  .btn--main a span, .btn--sub a span {
    right: -6%;
    width: 42px;
  }
}

/* ------------------------------------------------------------
   list--contents（TOPICS）
   ------------------------------------------------------------ */
.list--contents {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list--contents::before, .list--contents::after {
  content: "";
  display: block;
  width: 23.5%;
}
.list--contents::before {
  order: 1;
}
.list--contents li {
  position: relative;
  width: 23.5%;
  margin-bottom: 30px;
}
.list--contents li a {
  display: block;
  position: relative;
  z-index: 1;
}
.list--contents li a .thumb {
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
  margin-bottom: 10px;
  border-radius: var(--radius-card);
  background: var(--bg);
}
.list--contents li a .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: var(--dur-base);
  transform: translate(-50%, -50%) scale(1.01);
}
.list--contents li .sup_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  position: relative;
  z-index: 10;
}

@media screen and (min-width: 951px) {
  .list--contents li a:hover {
    opacity: 1;
  }
  .list--contents li a:hover .thumb img {
    transform: translate(-50%, -50%) scale(1.2);
  }
}
@media screen and (max-width: 950px) {
  .list--contents li {
    width: 100%;
    margin-bottom: 30px;
  }
  .list--contents::before, .list--contents::after {
    content: none;
  }
  .list--contents.list--contents--horizontal {
    overflow: scroll;
    flex-wrap: nowrap;
  }
  .list--contents.list--contents--horizontal li {
    width: 270px;
    padding-right: 16px;
    margin-bottom: 15px;
    flex-shrink: 0;
  }
  .list--contents.list--contents--horizontal li:last-child {
    padding-right: 20px;
  }
}

/* ------------------------------------------------------------
   list--grid（company モザイク / WORKS）
   ------------------------------------------------------------ */
.list--grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  z-index: 10;
}
.list--grid .grid_box {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 77/89;
  display: block;
}
.list--grid .grid_box:nth-of-type(1),
.list--grid .grid_box:nth-of-type(5) {
  aspect-ratio: 77/44;
}
.list--grid .grid_box:nth-of-type(1) { grid-column: 1/3; grid-row: 1/2; }
.list--grid .grid_box:nth-of-type(2) { grid-column: 3/4; grid-row: 1/2; }
.list--grid .grid_box:nth-of-type(3) { grid-column: 4/5; grid-row: 1/2; }
.list--grid .grid_box:nth-of-type(4) { grid-column: 1/2; grid-row: 2/3; }
.list--grid .grid_box:nth-of-type(5) { grid-column: 2/4; grid-row: 2/3; }
.list--grid .grid_box:nth-of-type(6) { grid-column: 4/5; grid-row: 2/3; }
.list--grid .grid_box.scrollin {
  transition: var(--dur-grid);
}
/* ============ WORKS カード：画像＋下部パネル（公式サイト風・統一デザイン） ============ */
.list--grid:has(.works_caption) {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.list--grid:has(.works_caption) .grid_box {
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: auto !important;
  overflow: visible;
}
.list--grid:has(.works_caption) .grid_box .grid_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--white, #ffffff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(11, 28, 37, 0.10);
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.list--grid:has(.works_caption) .grid_box .grid_inner .thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: auto;
  transform: none;
}
/* 旧オーバーレイ／グラデは廃止（文字は画像に被らない） */
.list--grid:has(.works_caption) .grid_box .grid_inner::before,
.list--grid:has(.works_caption) .grid_box .grid_inner::after {
  content: none;
}
.list--grid:has(.works_caption) .grid_box .grid_inner .works_caption {
  position: relative;
  flex: 1 1 auto;
  padding: 20px 52px 22px 22px;
  background: var(--white, #ffffff);
  opacity: 1;
}
/* 右下の矢印 */
.list--grid:has(.works_caption) .grid_box .grid_inner .works_caption::after {
  content: "\2192";
  position: absolute;
  right: 22px;
  bottom: 20px;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink);
  transition: transform var(--dur-base);
}
.list--grid:has(.works_caption) .grid_box .grid_inner .works_caption .category {
  display: inline-block;
  background: rgba(118, 229, 255, 0.22);
  color: var(--ink);
  padding: 5px 16px 6px;
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-weight: 700;
  margin-bottom: 12px;
}
.list--grid:has(.works_caption) .grid_box .grid_inner .works_caption .tit {
  color: var(--ink);
  font-size: 2.0rem;
  font-weight: 700;
  margin-left: 0;
  line-height: 1.35;
}
.list--grid:has(.works_caption) .grid_box .grid_inner .works_caption .desc {
  color: var(--muted);
  opacity: 1;
  font-size: 1.4rem;
  margin-left: 0;
  margin-top: 6px;
  line-height: 1.4;
}
@media screen and (min-width: 951px) {
  .list--grid:has(.works_caption) .grid_box > a:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(11, 28, 37, 0.16);
  }
  .list--grid:has(.works_caption) .grid_box > a:hover .works_caption::after,
  .list--grid:has(.works_caption) .grid_box > a:focus-visible .works_caption::after {
    transform: translateX(5px);
  }
}
@media screen and (max-width: 950px) {
  .list--grid:has(.works_caption) {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 12px;
    grid-row-gap: 14px;
  }
  .list--grid:has(.works_caption) .grid_box {
    border-radius: 14px;
  }
  .list--grid:has(.works_caption) .grid_box .grid_inner {
    border-radius: 14px;
  }
  .list--grid:has(.works_caption) .grid_box .grid_inner .thumb {
    aspect-ratio: 3 / 2;
  }
  .list--grid:has(.works_caption) .grid_box .grid_inner .works_caption {
    padding: 14px 40px 16px 15px;
  }
  .list--grid:has(.works_caption) .grid_box .grid_inner .works_caption::after {
    right: 14px; bottom: 13px; font-size: 1.5rem;
  }
  .list--grid:has(.works_caption) .grid_box .grid_inner .works_caption .category {
    margin-bottom: 8px;
  }
  .list--grid:has(.works_caption) .grid_box .grid_inner .works_caption .tit {
    font-size: 1.6rem;
  }
  .list--grid:has(.works_caption) .grid_box .grid_inner .works_caption .desc {
    font-size: 1.25rem;
  }
}

.ph, .thumb {
  position: relative;
  line-height: 0;
  text-align: center;
}
.ph img, .thumb img {
  width: 100%;
}

/* ------------------------------------------------------------
   drawer（「…」ボタン＋メニュー）
   実測: PC は左の縦中央（top: calc(50% - 30px)）／SP は右上
   ------------------------------------------------------------ */
.drawer__btn {
  position: fixed;
  left: 10px;
  top: calc(50% - 30px);
  width: 60px;
  height: 60px;
  z-index: 1001;
  mix-blend-mode: difference;
}
.drawer__btn .drawer__btn--inner {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--dot-border);
  border-radius: var(--radius-round);
  transition: var(--dur-base);
}
.drawer__btn .drawer__btn--inner > span {
  background: var(--dot);
  width: 4px;
  height: 4px;
  border-radius: 2px;
  transition: var(--dur-base);
}
.drawer__btn .drawer__btn--inner .drawer__btn-close {
  position: absolute;
  width: 18px;
  height: 18px;
}
.drawer__btn .drawer__btn--inner .drawer__btn-close span {
  display: block;
  position: absolute;
  width: 19px;
  height: 2px;
  top: 47%;
  left: 0;
  background-color: var(--ink);
  opacity: 0;
  transition: var(--dur-base);
}

.drawer--inner {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  transition: var(--dur-base);
  transition-duration: 0.2s;
  background: var(--accent);
  color: var(--ink);
}
.drawer--inner .block--gnav--drawer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.drawer--inner .drawer_side {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 0 120px;
}
.drawer--inner .logo {
  --logo-w: 180px;
  width: 180px;
  height: 62px;
  transition: var(--dur-base);
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}
.drawer--inner .snsnav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 70px;
}
.drawer--inner .snsnav li svg {
  fill: var(--ink);
}
.drawer--inner .btn--circle {
  margin-left: 100px;
}
.drawer--inner .gnav {
  padding: 80px 110px;
  border-left: 1px solid var(--overlay-soft);
  flex-flow: column;
  align-items: flex-start;
  gap: 20px;
}
.drawer--inner .gnav a {
  font-size: var(--fs-nav);
}
.drawer--inner .gnav li {
  opacity: 0;
  transform: translate(-10px, 0);
  transition: var(--dur-cursor);
}
.drawer--inner .gnav li:nth-child(6) {
  display: none;
}
.drawer--inner .nav {
  position: absolute;
  bottom: 23px;
  right: 43px;
}

.is-drawer-shown {
  overflow: hidden;
}
.is-drawer-shown .drawer__btn {
  mix-blend-mode: normal;
}
/* 参考 rgba(147,146,146,0.4)＝#939292 の 40%。--muted がその変換後なので color-mix で厳密に一致 */
.is-drawer-shown .drawer__btn .drawer__btn--inner {
  border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
}
.is-drawer-shown .drawer__btn .drawer__btn--inner > span {
  opacity: 0;
}
.is-drawer-shown .drawer__btn .drawer__btn-close span {
  opacity: 1;
}
.is-drawer-shown .drawer__btn .drawer__btn-close span:nth-child(1) { transform: rotate(-45deg); }
.is-drawer-shown .drawer__btn .drawer__btn-close span:nth-child(2) { transform: rotate(45deg); }
.is-drawer-shown .is-open.drawer--inner {
  opacity: 1;
  pointer-events: auto;
  z-index: 1000;
}
.is-drawer-shown .is-open.drawer--inner .gnav li {
  opacity: 1;
  transform: translate(0, 0);
}
.is-drawer-shown .is-open.drawer--inner .gnav li:nth-child(2) { transition-delay: 0.1s; }
.is-drawer-shown .is-open.drawer--inner .gnav li:nth-child(3) { transition-delay: 0.2s; }
.is-drawer-shown .is-open.drawer--inner .gnav li:nth-child(4) { transition-delay: 0.3s; }
.is-drawer-shown .is-open.drawer--inner .gnav li:nth-child(5) { transition-delay: 0.4s; }

@media screen and (min-width: 951px) {
  .drawer__btn:hover .drawer__btn--inner {
    transform: rotate(90deg);
  }
  .is-open.drawer--inner .btn--circle:has(a:hover):before {
    transform: translateX(132px);
  }
}
@media screen and (max-width: 950px) {
  .drawer__btn {
    top: 30px;
    left: auto;
    right: 13px;
  }
  .drawer--inner {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .drawer--inner .block--gnav--drawer {
    flex-flow: column;
    align-items: flex-start;
    padding: 30dvh 50px 0;
    margin-bottom: 20px;
  }
  .drawer--inner .drawer_side {
    order: 2;
    padding: 0;
    margin-bottom: 20px;
    align-items: flex-start;
  }
  .drawer--inner .logo {
    --logo-w: 140px;
    order: 1;
    position: absolute;
    top: 19dvh;
    left: 40px;
    width: 140px;
    height: 48px;
    margin-bottom: 0;
  }
  .drawer--inner .snsnav {
    order: 3;
    margin-bottom: 0;
  }
  .drawer--inner .btn--circle {
    order: 2;
    margin-left: 40px;
    margin-bottom: 11dvh;
  }
  .drawer--inner .gnav {
    order: 1;
    border-left: 0;
    padding: 0;
    margin-bottom: 7dvh;
  }
  .drawer--inner .nav {
    position: static;
    font-size: var(--fs-btn);
    padding-left: 50px;
  }
}

/* ------------------------------------------------------------
   header / footer
   ------------------------------------------------------------ */
header {
  position: fixed;
  width: 100%;
  z-index: 100;
  /* ★スクロールでヘッダーが変化するのではなく、difference が下地の変化を拾っているだけ。
     参考の .scroll は付与関数が未呼出＋CSS未使用の死にコード（実測で確認済み）。

     ★参考は header 自体に difference を掛けているが、ここでは header からは外し、
       .header--inner（gnav・SNS）にだけ掛ける。理由：オーナー指示により実ロゴは
       「一切変えずそのまま」使うため、ロゴに difference が乗ると色が反転＝加工になる。
       .logo は .header--inner の兄弟なので、これで合成グループから外れる。
       gnav・SNS の挙動は参考と同一のまま。 */
}
header .header--inner {
  mix-blend-mode: difference;
}
header .logo {
  --logo-w: 116px;
  position: absolute;
  top: 70px;
  left: -20px;
  transform: rotateZ(90deg);
  z-index: 101;
  width: 116px;
  height: 40px;
  transition: var(--dur-base);
  display: flex;
  align-items: center;
  color: var(--ink-invert);
  font-size: var(--fs-logo);
}
header .header--inner {
  width: 100%;
}
header .header--inner .block--gnav {
  position: absolute;
  top: 30px;
  right: 150px;
  transition: var(--dur-base);
}
header .header--inner .block--gnav ul li a {
  display: inline-block;
  color: var(--ink-invert);
}
header .header--inner .block--gnav ul li:last-of-type a {
  background: var(--pill-bg);
  color: var(--black);
  padding: 5px 18px;
  border-radius: var(--radius-pill);
}
header .header--inner .block--gnav + .snsnav {
  position: absolute;
  top: 100px;
  right: 30px;
  transition: var(--dur-base);
}
header .header--inner .block--gnav + .snsnav li {
  display: block;
}
header .header--inner .block--gnav + .snsnav li:not(:last-child) {
  margin-bottom: 24px;
}
header .header--inner .block--gnav + .snsnav li a,
header .header--inner .block--gnav + .snsnav li .sns_link_disabled {
  flex-flow: column;
}
header .header--inner .block--gnav + .snsnav li svg {
  fill: var(--ink-invert);
}
header + .btn_contact {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 101;
}
header + .btn_contact a {
  font-size: var(--fs-btn);
  background-color: var(--ink);
  color: var(--ink-invert);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
}

@media screen and (max-width: 950px) {
  header .logo {
    top: 70px;
    left: -25px;
  }
  header .header--inner .block--gnav {
    display: none;
  }
  header .header--inner .block--gnav + .snsnav {
    top: 190px;
    left: 20px;
    right: auto;
  }
  header .header--inner .block--gnav + .snsnav li:not(:last-child) {
    margin-bottom: 18px;
  }
}

footer {
  position: relative;
  padding: var(--space-footer-pt) 40px var(--space-footer-pb);
  text-align: center;
  background: var(--bg);
}
footer .logo {
  --logo-w: 220px;
  width: 220px;
  height: 75px;
  margin: 0 auto 36px;
  display: flex;
  align-items: center;
  color: var(--ink);
}
footer .snsnav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 36px;
}
footer .snsnav li:not(:last-child) {
  margin-right: 20px;
}
footer .snsnav li svg {
  fill: var(--ink);
}
footer .gnav {
  justify-content: center;
  margin-bottom: 100px;
}
footer .copyright {
  font-size: var(--fs-lead);
  /* ★v4 §10: 白地10pxで --muted(3.10:1) は基準割れ。色相維持でLだけ下げ 4.53:1 に（色のみ・位置不変）。
     参考に戻すなら --copyright-ink を var(--muted) にする。 */
  color: var(--copyright-ink);
}
footer .nav {
  position: absolute;
  bottom: 30px;
  right: 30px;
  font-size: var(--fs-btn);
  z-index: 2;
}

@media screen and (max-width: 950px) {
  footer {
    padding: var(--space-footer-pt) 10px var(--space-footer-pb) 20px;
    text-align: left;
  }
  footer .section--inner {
    width: 100%;
  }
  footer .account_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  footer .logo {
    --logo-w: 129px;
    width: 129px;
    height: 44px;
    margin: 0 0 25px;
  }
  footer .snsnav {
    margin-bottom: 25px;
  }
  footer .gnav {
    display: none;
  }
  footer .company_address {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    margin-bottom: 54px;
  }
  footer .copyright {
    /* ★v4 §10: SP でも白地10pxで基準を満たす色に（PC と同じ --copyright-ink）。 */
    color: var(--copyright-ink);
  }
  footer .nav {
    bottom: 16px;
    right: 10px;
  }
}

/* ------------------------------------------------------------
   section--recruit
   ------------------------------------------------------------ */
.section--recruit {
  position: relative;
  padding-top: var(--space-recruit-pt);
  z-index: 1;
}
.section--recruit .recruit_info {
  position: relative;
  border-radius: var(--radius-card);
  margin-bottom: 30px;
  color: var(--ink-invert);
}
.section--recruit .recruit_info .bg_parallax img {
  background: url(img/bg_recruit.webp) no-repeat;
  background-size: cover;
  background-position: center center;
}
.section--recruit .recruit_info .block--inner {
  display: flex;
  justify-content: space-between;
}
.section--recruit .recruit_info .block--inner > div:first-of-type {
  padding: 0 0 8vw 8vw;
}
.section--recruit .recruit_info .block--inner > div:last-of-type {
  padding: 10vw 8vw 8vw 0;
}
.section--recruit .recruit_info .call_out {
  margin-bottom: 20px;
  padding-top: 9vw;
  padding-left: 2vw;
  border-left: 1px solid var(--muted);
  font-size: 1.8rem;
  font-weight: 700;
}
.section--recruit .recruit_info .call_out span {
  display: block;
  font-size: 1.6rem;
  color: var(--accent);
}
.section--recruit .recruit_info .section--tit {
  font-size: var(--fs-h1-recruit);
  margin-bottom: var(--space-tit-mb-recruit);
}
.section--recruit .recruit_info .mask_tit {
  display: block;
  overflow: hidden;
  transform: translate(calc(var(--mask-x) * -1), 0);
  transition: transform var(--ease-mask) var(--dur-mask);
}
.section--recruit .recruit_info .mask_tit > span {
  display: block;
  transform: translate(var(--mask-x), 0);
  transition: transform var(--ease-mask) var(--dur-mask);
}
.section--recruit .recruit_info .mask_tit.ended,
.section--recruit .recruit_info .mask_tit.ended > span {
  transform: translate(0, 0);
}
.section--recruit .recruit_info .tit_sub {
  font-size: var(--fs-h4);
  font-weight: 800;
  margin-bottom: 16px;
}
.section--recruit .recruit_info .txt {
  font-size: var(--fs-body-mv);
}
.section--recruit .recruit_info .list--occupation {
  margin-bottom: 80px;
}
.section--recruit .recruit_info .list--occupation li {
  opacity: 0;
  transform: translate(-10px, 0);
  transition: var(--dur-grid);
}
.section--recruit .recruit_info .list--occupation li:not(:last-child) {
  margin-bottom: 30px;
}
.section--recruit .recruit_info .list--occupation li p {
  font-size: 0.7vw;
  font-weight: 700;
  line-height: 1.5;
}
.section--recruit .recruit_info .list--occupation li p span {
  display: block;
  font-weight: 700;
  font-size: 1.8vw;
}
.section--recruit .recruit_info .btn--circle {
  margin-left: 45px;
}
.section--recruit.scrollin .recruit_info .list--occupation li {
  opacity: 1;
  transform: translate(0, 0);
  transition-delay: 1.1s;
}
.section--recruit.scrollin .recruit_info .list--occupation li:nth-child(2) { transition-delay: 1.3s; }
.section--recruit.scrollin .recruit_info .list--occupation li:nth-child(3) { transition-delay: 1.5s; }

@media screen and (max-width: 950px) {
  .section--recruit .recruit_info {
    margin-bottom: 10px;
  }
  .section--recruit .recruit_info .bg_parallax img {
    background-image: url(img/bg_recruit_sp.webp);
  }
  .section--recruit .recruit_info .block--inner {
    flex-flow: column;
    gap: 0;
  }
  .section--recruit .recruit_info .block--inner > div:first-of-type {
    padding: 0 20px 20px;
  }
  .section--recruit .recruit_info .block--inner > div:last-of-type {
    padding: 0 20px 70px;
  }
  .section--recruit .recruit_info .call_out {
    padding-top: 82px;
    padding-left: 10px;
    font-size: 1.3rem;
  }
  .section--recruit .recruit_info .call_out span {
    font-size: var(--fs-btn);
  }
  .section--recruit .recruit_info .section--tit {
    margin-bottom: var(--space-tit-mb-recruit);
  }
  .section--recruit .recruit_info .tit_sub {
    margin-bottom: 16px;
  }
  .section--recruit .recruit_info .txt {
    font-size: 1.3rem;
    max-width: 100%;
  }
  .section--recruit .recruit_info .list--occupation {
    margin-left: 20px;
    margin-bottom: 20px;
  }
  .section--recruit .recruit_info .list--occupation li:not(:last-child) {
    margin-bottom: 20px;
  }
  .section--recruit .recruit_info .list--occupation li p {
    font-size: 1.1rem;
  }
  .section--recruit .recruit_info .list--occupation li p span {
    font-size: 2.4rem;
  }
  .section--recruit .recruit_info .btn--circle {
    text-align: right;
  }
  .section--recruit .recruit_info .btn--circle:before {
    left: auto;
    right: 70px;
  }
}

/* ------------------------------------------------------------
   section--contact
   ------------------------------------------------------------ */
.section--contact {
  background: url(img/bg_contact.webp) no-repeat;
  background-size: cover;
  background-position: center center;
}
.section--contact .bg_blur_wrap {
  overflow: hidden;
}
.section--contact .bg_blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
}
.section--contact .bg_blur img {
  width: 100%;
  height: 100%;
  background: url(img/bg_contact.webp) no-repeat;
  background-size: cover;
  background-position: center center;
}
.section--contact .section--inner {
  padding: var(--space-contact-py) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  text-align: center;
}
.section--contact .section--tit {
  font-size: var(--fs-h1-contact);
  margin-bottom: var(--space-tit-mb-contact);
}
.section--contact .section--tit span {
  display: block;
  font-size: 1.6rem;
}
.section--contact p {
  margin-bottom: 80px;
}
.section--contact .deco_img {
  position: absolute;
  top: -13vw;
  right: -3.5vw;
  width: 29vw;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.section--contact .deco_img img {
  transform-origin: center top;
  animation: shake_phone 8s linear infinite;
}
.section--contact.scrollin .deco_img.delighter.started {
  opacity: 1;
  transition-delay: 0.4s;
  animation: fade_in_phone 2s 1 ease-out forwards;
}
.section--contact.scrollin .bg_blur {
  animation: imageBlur 1.6s 1 ease-out forwards;
  opacity: 1;
}

/* ============================================================
   くるくる回るテキーラ観覧車（CONTACT）— 車輪(円盤＋ゴンドラ)を連続回転。
   台座は tools/v6_split_wheel.py で分離済、車輪層 watch_wheel.webp のみ使用。
   ============================================================ */
.section--contact .deco_img.wheel-deco {
  opacity: 1;                     /* delighter に頼らず常時表示 */
  top: -6vw;
  right: -2vw;
  width: 30vw;
}
.section--contact .deco_img.wheel-deco .wheel-spin {
  width: 100%;
  height: auto;                                /* 縦伸び防止（height属性を無効化） */
  display: block;
  animation: wheel_spin 16s linear infinite;   /* shake_phone を上書き */
  transform-origin: 50% 50%;                   /* ハブ＝トリム後の中央 */
  will-change: transform;
}
@keyframes wheel_spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================================
   v6-② BBQ 組み上がり演出（contact の浮遊枠内で完結・レイアウト不変）
   具材が1個ずつ落下 → 串が貫通 → 実写から青黄トーンへ変色 → 完成
   ============================================================ */
.bbq-deco .bbq-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 694 / 1338;      /* 元 phone 枠の比率を維持 */
}
.bbq-stage .bbq-piece,
.bbq-stage .bbq-skewer { position: absolute; }
.bbq-stage .bbq-piece img,
.bbq-stage .bbq-skewer img {
  position: absolute; inset: 0; width: 100%; height: auto; display: block;
  filter: drop-shadow(var(--shadow-bbq));
}
/* 既定(=JS無し/フォールバック/reduced-motion): 完成した青黄形を静止表示（§6 保険） */
.bbq-stage .bbq-piece,
.bbq-stage .bbq-skewer { opacity: 1; }
.bbq-stage .bbq-piece .rl,
.bbq-stage .bbq-skewer .rl { opacity: 0; }
.bbq-stage .bbq-piece .bl,
.bbq-stage .bbq-skewer .bl { opacity: 1; }

/* 各ピース最終位置(左上 %)・幅：中心が串の対角線上に一直線に載るよう配置（見本の並び） */
.bbq-stage .p0 { width: 40%; left: 6%;  top: 64%; z-index: 5; }
.bbq-stage .p1 { width: 34%; left: 22%; top: 53%; z-index: 4; }
.bbq-stage .p2 { width: 38%; left: 33%; top: 39%; z-index: 3; }
.bbq-stage .p3 { width: 36%; left: 47%; top: 27%; z-index: 2; }
.bbq-stage .p4 { width: 34%; left: 61%; top: 15%; z-index: 1; }
/* 串: 細い対角バー。実写=竹色 / 完成(.bbq-colored)=青みグレー。ピースより手前で"貫通"を見せる。 */
.bbq-stage .bbq-skewer {
  width: 122%; height: 0.9%; left: -11%; top: 48.5%;
  transform-origin: 50% 50%;
  transform: rotate(-61.9deg);
  border-radius: 999px; z-index: 6;
  box-shadow: var(--shadow-bbq-sm);
  /* 既定(完成)=青みグレー */
  background: var(--grad-skewer-done);
}
/* 演出中(武装〜貫通)は竹色の実写、貫通完了で青みグレーへ */
.bbq-armed .bbq-skewer { background: var(--grad-skewer-real); }
.bbq-colored .bbq-skewer {
  background: var(--grad-skewer-done);
  transition: background .45s ease;
}

/* JSがアニメ用に「武装」した時だけ、演出前の初期状態にする（実写・上に退避）。
   JS無し/reduced-motion では上の既定(完成青黄形)がそのまま出る。 */
.bbq-armed .bbq-piece { opacity: 0; transform: translateY(-90%); }
/* 串は自軸(=回転後のX)方向に退避 → 横からスッと貫通させる */
.bbq-armed .bbq-skewer { opacity: 0; transform: rotate(-61.9deg) translateX(-85%); }
.bbq-armed .bbq-piece .rl,
.bbq-armed .bbq-skewer .rl { opacity: 1; }   /* 演出中は実写 */
.bbq-armed .bbq-piece .bl,
.bbq-armed .bbq-skewer .bl { opacity: 0; }
.bbq-armed .bbq-piece { transition: transform .95s cubic-bezier(.30,1.35,.48,1), opacity .5s ease; }
.bbq-armed .bbq-skewer { transition: transform 1s cubic-bezier(.5,0,.25,1), opacity .4s ease; }

/* 落下再生：各ピースを stagger 0.3s で順に着地 */
.bbq-play .bbq-piece { opacity: 1; transform: translateY(0); }
.bbq-play .p0 { transition-delay: 0s; }
.bbq-play .p1 { transition-delay: .32s; }
.bbq-play .p2 { transition-delay: .64s; }
.bbq-play .p3 { transition-delay: .96s; }
.bbq-play .p4 { transition-delay: 1.28s; }
/* 串貫通：横からスッと（自軸方向に定位置へ） */
.bbq-pierce .bbq-skewer { opacity: 1; transform: rotate(-61.9deg) translateX(0); }

/* 変色：実写 → 青黄へクロスフェード（貫通完了の瞬間） */
.bbq-colored .bbq-piece .rl,
.bbq-colored .bbq-skewer .rl { opacity: 0; transition: opacity .45s ease; }
.bbq-colored .bbq-piece .bl,
.bbq-colored .bbq-skewer .bl { opacity: 1; transition: opacity .45s ease; }

/* 完成後：ゆらぎ（shake_phone を流用）。演出コンテナに付与。 */
.bbq-colored .bbq-stage { animation: shake_phone 8s linear infinite; transform-origin: center top; }

@media screen and (max-width: 950px) {
  .section--contact {
    background-image: url(img/bg_contact_sp.webp);
  }
  .section--contact .bg_blur img {
    background-image: url(img/bg_contact_sp.webp);
  }
  .section--contact .section--inner {
    padding: var(--space-contact-py) 20px;
    display: block;
    text-align: left;
  }
  .section--contact .section--tit {
    margin-bottom: var(--space-tit-mb-contact);
  }
  .section--contact .section--tit span {
    font-size: 1.5rem;
  }
  .section--contact p {
    margin-bottom: 50px;
  }
  .section--contact .btn--main {
    margin: 0 auto;
  }
  .section--contact .deco_img {
    top: -8vw;
    right: 0vw;
    width: 30vw;
  }
  .section--contact .deco_img.wheel-deco {
    top: 24vw;         /* CONTACT見出しの下・本文右の余白へ（文字に被らない） */
    right: -4vw;
    width: 42vw;
  }
}

/* ------------------------------------------------------------
   bg_parallax
   ------------------------------------------------------------ */
.bg_parallax {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  z-index: -1;
}
.bg_parallax .simpleParallax {
  width: 100%;
  height: 100%;
}
.bg_parallax img {
  width: 100%;
  height: 100%;
  background: var(--bg);
}

/* ------------------------------------------------------------
   page_transition
   ------------------------------------------------------------ */
body .page_transition {
  background: var(--accent);
  content: "";
  position: fixed;
  transform: scale(300);
  z-index: 10000;
  top: 25%;
  right: 20%;
  width: 6rem;
  height: 6rem;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

body.is-active .page_transition,
body.first_access.is-active .page_transition {
  background: var(--accent);
  position: fixed;
  transform: scale(100);
  z-index: 10000;
  top: 25%;
  right: 20%;
  width: 6rem;
  height: 6rem;
  display: block;
  border-radius: 50%;
  animation-name: PageAnime-before;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.page_transition {
  animation-name: PageAnime-circle;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.first_access .page_transition {
  display: none;
}

@media screen and (max-width: 950px) {
  body .page_transition {
    top: 10%;
    right: 15%;
  }
}

/* ============================================================
   .page--top
   ============================================================ */
.loaded .page--top .opening,
.loading-delay .page--top .opening {
  z-index: 0;
  opacity: 0;
  transition-delay: 3.8s;
}
.loaded .page--top .opening .text_box,
.loading-delay .page--top .opening .text_box {
  opacity: 0;
  transition-delay: 2.6s;
}
/* 参考は SVG の stroke-dashoffset(1800→0) で手書き風に現れる（path1/3=1.8s, path2=2s, path4=2s delay1s）。
   参考サイトのスクリプト体のパスは他社ブランド要素で使えないため、
   同じ duration/delay で左→右のマスクワイプにして"書き進む"見え方を再現する（意図的な代替）。
   ★ロゴを実素材(img)に差し替えたため、ワイプ対象を .logo_img に付け替えている。
     マスクは"現れ方"の演出であってロゴ画素の加工ではない（＝オーナー指示に抵触しない）。
     参考の path1/3(1.8s) と path2(2s delay1s) の二段構えは、
     1枚画像では分割できないため、外側の 1.8s に一本化している（意図的な簡略化）。 */
.loaded .page--top .opening .text_box .logo_mark--draw .logo_img,
.loading-delay .page--top .opening .text_box .logo_mark--draw .logo_img {
  animation: logo_draw 1.8s forwards;
}
.loaded .page--top .mainvisual .text_box .mv_logo,
.loaded .page--top .mainvisual .text_box .mv_subtit,
.loading-delay .page--top .mainvisual .text_box .mv_logo,
.loading-delay .page--top .mainvisual .text_box .mv_subtit {
  opacity: 1;
  transform: translate(0, 0);
}
.loaded .page--top .mainvisual .text_box .mv_logo,
.loading-delay .page--top .mainvisual .text_box .mv_logo {
  transition-delay: 3.6s;
}
.loaded .page--top .mainvisual .text_box .mv_subtit,
.loading-delay .page--top .mainvisual .text_box .mv_subtit {
  transition-delay: 3.7s;
}

.accessed .page--top .mainvisual .text_box .mv_logo { transition-delay: 0.2s; }
.accessed .page--top .mainvisual .text_box .mv_subtit { transition-delay: 0.3s; }
.accessed .page--top header,
.accessed .page--top .btn_contact,
.accessed .page--top .drawer__btn {
  animation: fade_in_opacity 1.2s 1s forwards;
}
.accessed .page--top .container {
  opacity: 1;
}

.page--top {
  position: relative;
}
.page--top:before {
  content: "";
  display: block;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: url(img/bg_works.webp) no-repeat center center;
  background-size: cover;
  opacity: 0;
  transition: var(--dur-video-fade);
  z-index: -1;
}
.page--top .container {
  opacity: 0;
}
.page--top .video_box {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  z-index: 0;
  transition: var(--dur-video-fade);
  /* 動画/poster がまだ無い場合の下地。参考動画のテキスト帯の平均輝度 201–217 に対し
     --accent(#76e5ff) は輝度換算 ≒214 でほぼ一致するため、
     動画が無くても「成立する画面」かつオーバーレイの検証にも使える下地になる（§9-6）。 */
  background: var(--accent);
}
.page--top .video_box .video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
.page--top:has(.bg_contents .section--service.started):before { opacity: 1; }
.page--top:has(.bg_contents .section--service.started) .video_box { opacity: 0; }
.page--top:has(.bg_contents .section--contact.started):before { opacity: 0; }
.page--top #luxy {
  z-index: 1;
}
.page--top .content--body {
  background: none;
  position: relative;
}

/* opening */
.page--top .opening {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1100;
  transition: var(--dur-cursor);
  /* v6-①A: 濃色地(ink)で覆い、中央にシルバーのペガサスロゴを見せてから「黒板消しで拭う」ワイプで本体を出す。
     参考 lottie は他社固有のため不使用・羽馬用に新規実装（§8権利）。 */
  background: radial-gradient(120% 90% at 50% 42%, var(--ink) 0%, var(--ink) 42%, var(--black) 150%);
}
/* 黒板消しワイプ: 初回のみ。ソフトな帯状マスクを斜めに走らせ、面が拭われて本体が現れる。 */
.first_access .page--top .opening,
.first_access.page--top .opening {
  -webkit-mask-image: linear-gradient(108deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 6%, rgba(0,0,0,.55) 15%, #000 26%, #000 100%);
  mask-image: linear-gradient(108deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 6%, rgba(0,0,0,.55) 15%, #000 26%, #000 100%);
  -webkit-mask-size: 280% 100%;
  mask-size: 280% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* 2026-07-24 Rosedale踏襲: ワードマークを「書き終えてから」拭うため、ワイプ開始を描画後に遅延。 */
  animation: opening_wipe 0.85s 1.95s cubic-bezier(.66,0,.28,1) forwards;
}
@keyframes opening_wipe {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: -72% 0; mask-position: -72% 0; }
}
/* 初回: ロックアップを素早くフェードインして、描画中は保持（沈めない）。拭いで本体へ。 */
.first_access .page--top .opening .text_box {
  animation: opening_logo 0.55s 0s ease both;
}
@keyframes opening_logo {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(1.01); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* 2026-07-24 Rosedale踏襲: 初回もワードマークを左→右へ progressive に「書いて」から拭う。
   参考の stroke-dashoffset 線画に相当する動きを、羽馬ロゴの手書きマスク(logo_draw)で表現する。
   （参考の SVG ワードマーク自体は複製しない＝技法のみ再現・§8権利） */
.first_access .page--top .opening .text_box .logo_mark--draw .logo_img {
  animation: logo_draw 1.5s 0.3s cubic-bezier(.55,0,.35,1) forwards;
}
.page--top .opening .text_box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: var(--ink-invert);
  text-align: center;
  transition: var(--dur-cursor);
}
.page--top .opening .text_box .mv_logo {
  margin-bottom: 32px;
}
.page--top .opening .text_box .mv_logo h2 {
  --logo-w: clamp(280px, 16.7vw, 500px);
  width: clamp(280px, 16.7vw, 500px);
  aspect-ratio: 328.69 / 124.44;
  margin: 0 auto;
  display: flex;
  align-items: center;
  color: var(--black);
}
.page--top .opening #bg_opening {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.page--top header,
.page--top .btn_contact,
.page--top .drawer__btn {
  opacity: 0;
  animation: fade_in_opacity 1.2s 4.8s forwards;
}
.page--top .bg_contents {
  position: relative;
  background: var(--bg);
}
.page--top .list--grid .grid_box:nth-of-type(1) { transition-delay: calc(var(--stagger-grid) * 1); }
.page--top .list--grid .grid_box:nth-of-type(2) { transition-delay: calc(var(--stagger-grid) * 2); }
.page--top .list--grid .grid_box:nth-of-type(3) { transition-delay: calc(var(--stagger-grid) * 3); }
.page--top .list--grid .grid_box:nth-of-type(4) { transition-delay: calc(var(--stagger-grid) * 4); }
.page--top .list--grid .grid_box:nth-of-type(5) { transition-delay: calc(var(--stagger-grid) * 5); }
.page--top .list--grid .grid_box:nth-of-type(6) { transition-delay: calc(var(--stagger-grid) * 6); }

/* mainvisual */
.page--top .mainvisual {
  position: relative;
  width: 100%;
  height: var(--space-mv); /* 100vh */
}
/* ------------------------------------------------------------
   【意図的な逸脱 / §9-6・§10-1 #5】ヒーローのオーバーレイ
   参考サイトはオーバーレイ無しで、テキスト帯の輝度 201–217 に白文字を置いており
   実測コントラスト ≒1.1:1＝元サイトの時点で白文字がほとんど読めていない。
   §9-6「動画の上のテキストには必ずオーバーレイを敷く」／§10-1 #5 を優先する。
   ただし "必要最小限"。画面全体は暗くせず、中央のロックアップの背面だけを落とす。
     - scroll-l（黒文字）と simple_sentence（--ink）は明るい下地のままで読めるので触らない
     - 実測コントラストと rgba 値は README / レポートに記録
   ------------------------------------------------------------ */
.page--top .mainvisual .text_box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* 2026-07-24: ソフト楕円グロー（案A）。四方へ淡くフェードし縁を出さない（四角い光板を解消）。
     全幅ボックスの内側で白い芯が完全に透明へ抜けるので端に直線が出ない。
     ロックアップまわりだけを上品に照らし、動画の明るさは維持したまま文字を読ませる。 */
  width: 100%;
  height: 640px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 34% 46% at 50% 50%,
              rgba(255, 255, 255, 0.94) 0%,
              rgba(255, 255, 255, 0.72) 32%,
              rgba(255, 255, 255, 0.34) 52%,
              rgba(255, 255, 255, 0.12) 70%,
              transparent 84%);
  z-index: -1;
  pointer-events: none;
  /* 2026-07-24: グロー自体もゆっくり呼吸させて動的に（動画の上なので極めて控えめ・低速）。
     transform に translate(-50%,-50%) を含めて中央維持したまま scale/opacity を揺らす。 */
  animation: hero_glow_breathe 7.5s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes hero_glow_breathe {
  0%   { opacity: 0.86; transform: translate(-50%, -50%) scale(0.97); }
  100% { opacity: 1;    transform: translate(-50%, -50%) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .page--top .mainvisual .text_box::before {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 950px) {
  .page--top .mainvisual .text_box::before {
    height: 560px;
    background: radial-gradient(ellipse 66% 40% at 50% 50%,
                rgba(255, 255, 255, 0.94) 0%,
                rgba(255, 255, 255, 0.72) 34%,
                rgba(255, 255, 255, 0.34) 54%,
                rgba(255, 255, 255, 0.12) 72%,
                transparent 86%);
  }
}
.page--top .mainvisual .text_box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: var(--ink-invert);
  text-align: center;
  z-index: 1;
}
.page--top .mainvisual .text_box .mv_logo {
  margin-bottom: 8px;
  opacity: 0;
  transform: translate(0, 40px);
  transition: var(--dur-grid);
}
.page--top .mainvisual .text_box .mv_logo h2 {
  --logo-w: clamp(280px, 16.7vw, 500px);
  width: clamp(280px, 16.7vw, 500px);
  aspect-ratio: 328.69 / 124.44;
  margin: 0 auto;
  display: flex;
  align-items: center;
  color: var(--ink-invert);
}
.page--top .mainvisual .text_box .mv_subtit {
  opacity: 0;
  transform: translate(0, 40px);
  transition: var(--dur-grid);
  /* ★Phase E 案B（v4 §8）: ロックアップの文字色。白→--ink でスクリム無しでも読める。
     案Aに戻すには tokens.css の --hero-text を --ink-invert に。 */
  color: var(--hero-text);
}
.page--top .mainvisual .text_box .mv_subtit p {
  font-size: var(--fs-hero-ja);
  font-weight: 700;
}
.page--top .mainvisual .text_box .mv_subtit p:first-of-type {
  font-weight: 700;
  font-size: var(--fs-hero-en);
  line-height: var(--lh-hero-en);
  margin-bottom: 10px;
}
.page--top .mainvisual .simple_sentence {
  position: absolute;
  bottom: 0;
  right: 30px;
  writing-mode: vertical-rl;
  border-right: 1px solid var(--ink);
  padding-bottom: 24px;
  padding-right: 12px;
}

/* company */
.page--top .section--company {
  position: relative;
  padding-top: var(--space-company-pt);
  z-index: 10;
}
.page--top .section--company .company_policy {
  position: relative;
  border-radius: var(--radius-card);
  padding: 0 8vw 8vw;
  margin-bottom: 10px;
  color: var(--ink-invert);
}
.page--top .section--company .company_policy .bg_parallax img {
  background: url(img/bg_company.webp) no-repeat;
  background-size: cover;
  background-position: center center;
}
.page--top .section--company .company_policy .block--inner {
  position: relative;
  padding-top: 8vw;
  padding-left: 3.4vw;
  border-left: 1px solid var(--muted);
  z-index: 100;
}
.page--top .section--company .company_policy .section--tit {
  font-size: var(--fs-h1-company);
  margin-bottom: var(--space-tit-mb-company);
}
.page--top .section--company .company_policy .mask_tit {
  display: block;
  overflow: hidden;
  transform: translate(calc(var(--mask-x) * -1), 0);
  transition: transform var(--ease-mask) var(--dur-mask-slow);
}
.page--top .section--company .company_policy .mask_tit > span {
  display: block;
  transform: translate(var(--mask-x), 0);
  transition: transform var(--ease-mask) var(--dur-mask-slow);
}
.page--top .section--company .company_policy .mask_tit.ended,
.page--top .section--company .company_policy .mask_tit.ended > span {
  transform: translate(0, 0);
}
.page--top .section--company .company_policy .tit_sub {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin-bottom: 16px;
}
.page--top .section--company .company_policy .txt {
  font-size: var(--fs-body-mv);
  max-width: 49vw;
}
.page--top .section--company .company_policy .deco_img {
  position: absolute;
  bottom: -30px;
  right: 3vw;
  width: 25vw;
  z-index: 11;
}
/* v6-①B: ケーキ画像の height="702" 属性による縦間延びを是正（比率756:702で描画） */
.page--top .section--company .company_policy .deco_img img { width: 100%; height: auto; }
.page--top .section--company .list--grid {
  grid-template-rows: repeat(2, 1fr);
}
.page--top .section--company .list--grid .grid_box {
  position: relative;
}
.page--top .section--company .list--grid .grid_box .grid_inner .img_change {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  animation: change-img-anim 40s infinite;
}
/* 40s 周期のクロスフェード。負の delay で位相をずらす（実測値そのまま）。
   テーマ色なのは company_img02（枠2）と company_img06（枠6）の2枚だけ＝
   その2枠だけが周期的に光る（MANIFEST の実測どおり）。 */
.page--top .section--company .list--grid .grid_box:nth-of-type(1) .img_change:nth-of-type(1) {
  background-image: url(img/company_img01.webp); animation-delay: -5s;
}
.page--top .section--company .list--grid .grid_box:nth-of-type(1) .img_change:nth-of-type(2) {
  background-image: url(img/company_img07.webp); animation-delay: -25s;
}
.page--top .section--company .list--grid .grid_box:nth-of-type(2) .grid_inner .img_change:nth-of-type(1) {
  background-image: url(img/company_img08.webp); animation-delay: 2s;
}
.page--top .section--company .list--grid .grid_box:nth-of-type(2) .grid_inner .img_change:nth-of-type(2) {
  background-image: url(img/company_img02.webp); animation-delay: 22s;
}
.page--top .section--company .list--grid .grid_box:nth-of-type(3) .grid_inner .img_change:nth-of-type(1) {
  background-image: url(img/company_img09.webp); animation-delay: 7s;
}
.page--top .section--company .list--grid .grid_box:nth-of-type(3) .grid_inner .img_change:nth-of-type(2) {
  background-image: url(img/company_img03.webp); animation-delay: 27s;
}
.page--top .section--company .list--grid .grid_box:nth-of-type(4) .grid_inner .img_change:nth-of-type(1) {
  background-image: url(img/company_img10.webp); animation-delay: -20s;
}
.page--top .section--company .list--grid .grid_box:nth-of-type(4) .grid_inner .img_change:nth-of-type(2) {
  background-image: url(img/company_img04.webp); animation-delay: 0s;
}
.page--top .section--company .list--grid .grid_box:nth-of-type(5) .grid_inner .img_change:nth-of-type(1) {
  background-image: url(img/company_img05.webp); animation-delay: -37s;
}
.page--top .section--company .list--grid .grid_box:nth-of-type(5) .grid_inner .img_change:nth-of-type(2) {
  background-image: url(img/company_img11.webp); animation-delay: -17s;
}
.page--top .section--company .list--grid .grid_box:nth-of-type(6) .grid_inner .img_change:nth-of-type(1) {
  background-image: url(img/company_img12.webp); animation-delay: 18s;
}
.page--top .section--company .list--grid .grid_box:nth-of-type(6) .grid_inner .img_change:nth-of-type(2) {
  background-image: url(img/company_img06.webp); animation-delay: 38s;
}

/* topics */
.page--top .section--topics {
  position: relative;
  z-index: 5;
  padding-bottom: var(--space-topics-pb);
}
.page--top .section--topics::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background: var(--accent);
  transform: translate(0, 0) skewY(6deg);
  transition: var(--dur-grid);
}
.page--top .section--topics .bg_topics {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translate(0, 0) skewY(6deg);
  overflow: hidden;
  z-index: -1;
}
.page--top .section--topics #bg_paint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page--top .section--topics .simple_sentence {
  padding-top: 9vw;
  text-align: right;
  margin-bottom: 30px;
  opacity: 0;
  transition: var(--dur-grid);
  position: relative;
  z-index: 1;
}
.page--top .section--topics .block--inner {
  position: relative;
  margin-left: 14vw;
  z-index: 1;
}
.page--top .section--topics .block--inner .topics_main {
  display: flex;
}
/* 参考は tit_topics.svg（73×381 の縦組み "TOPICS" 文字）。
   写真ではなくフォント（Poppins＝無料）なので画像ではなくテキストで組む（MANIFEST 申し送り4）。
   sideways-lr 相当（文字は 90°CCW・下→上に読む）を vertical-rl + rotate(180deg) で実現。
   font-size は実測から決定: Poppins700 "TOPICS" は 100px で ink 幅 358 / cap 高 72。
   目標は長さ 381 / cap 73 → 103.8px で 長さ 371.6(-2.5%) / cap 74.7(+2.3%)＝どちらも ±3% 以内。 */
.page--top .section--topics .block--inner .topics_main .section--tit {
  width: 10vw;
  margin-right: 34px;
  opacity: 0;
  transform: translate(0, 80px);
  transition: all var(--dur-fade);
}
.page--top .section--topics .block--inner .topics_main .section--tit span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 103.8px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.page--top .section--topics .block--inner .topics_main .list--contents {
  opacity: 0;
  transform: translate(0, 80px);
  transition: all var(--dur-fade);
  width: 100%;
}
.page--top .section--topics .block--inner .btn--main {
  margin-left: auto;
}
.page--top .section--topics .deco_img.brush {
  position: absolute;
  top: -40px;
  left: -40px;
  width: 24vw;
  z-index: 0;
  opacity: 0;
  transform: translateY(-80px);
  transition: var(--dur-grid);
}
.page--top .section--topics .deco_img.brush img {
  transform-origin: center top;
  animation: shake_brush 6s linear infinite;
}
.page--top .section--topics .deco_img.liquid {
  position: absolute;
  left: 39vw;
  bottom: -11.5vw;
  width: 27vw;
  height: 13.3vw;
  z-index: -2;
  transition: var(--dur-grid);
}
.page--top .section--topics.scrollin:before { opacity: 1; transition-delay: 1.6s; }
.page--top .section--topics.scrollin .simple_sentence { opacity: 1; transition-delay: 1.5s; }
.page--top .section--topics.scrollin .section--inner { opacity: 1; transform: translateY(0); }
.page--top .section--topics.scrollin .block--inner .topics_main .section--tit {
  opacity: 1; transform: translate(0); transition-delay: 1.6s;
}
.page--top .section--topics.scrollin .block--inner .topics_main .list--contents {
  opacity: 1; transform: translate(0); transition-delay: 1.7s;
}
.page--top .section--topics.scrollin .deco_img.brush.delighter.started {
  opacity: 1; transform: translateY(0); transition-delay: 2s;
}
.page--top .section--topics.scrollin .deco_img.brush.on.delighter.started { transition-delay: 0.2s; }
.page--top .section--topics.scrollin .deco_img.liquid { transition-delay: 1.7s; }

/* service */
.page--top .section--service {
  position: relative;
  margin-top: var(--space-service-mt); /* PC -2vw / SP +34px（符号が逆転） */
}
.page--top .section--service .deco_img {
  /* v6-①C: カトラリーを右寄せ・拡大・斜め・視差ゆらぎ。§6厳守で本文/見出しに不透明部を重ねない。 */
  position: absolute;
  top: -11vw;
  width: 7.5vw;
  z-index: 2;
  transform-origin: top center;
  animation: cutlery_sway 5.5s ease-in-out infinite;
}
.page--top .section--service .deco_img:nth-of-type(1) { left: auto; right: 6vw; animation-delay: 0s; }
.page--top .section--service .deco_img:nth-of-type(2) { left: auto; right: 0.5vw; animation-delay: -2.6s; }
/* img の height="806" 属性による縦間延びを是正（比率0.25で描画） */
.page--top .section--service .deco_img img { width: 100%; height: auto; display: block; }
@keyframes cutlery_sway {
  0%, 100% { transform: rotate(-19deg) translateY(0); }
  50%      { transform: rotate(-14deg) translateY(-6px); }
}
.page--top .section--service .section--tit {
  font-size: var(--fs-display-sv);
  color: var(--surface);
  margin-left: 1vw;
  line-height: var(--lh-display-sv);
}
.page--top .section--service .section--inner {
  transition: var(--dur-grid) 1s;
  opacity: 0;
}
.page--top .section--service .section--inner .list--service {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--bg);
  box-shadow: var(--shadow-service);
  margin-bottom: 70px;
}
.page--top .section--service .section--inner .list--service li {
  width: 33.3%;
  aspect-ratio: 3/4;
  z-index: 1;
}
.page--top .section--service .section--inner .list--service li:nth-child(odd) {
  padding: 80px 50px;
}
.page--top .section--service .section--inner .list--service li .service_icon_wrap {
  display: block;
  width: 80px;
  margin: 0 auto 24px;
  overflow: hidden;
  z-index: 1;
}
.page--top .section--service .section--inner .list--service li .service_icon_wrap .service_icon {
  background-color: var(--black);
  padding: 25px;
  border-radius: 40px;
  animation: rotate_back 9s linear infinite;
  animation-delay: 3s;
}
/* 参考は width:40px のみ。height は指定しない。
   これが効いていて、global の img{max-width:100%} が
   .service_icon の内容ボックス幅（wrap 80 − padding 25*2 = 30px）まで width を切り詰めるため、
   実際のアイコンは 40px ではなく **30×30** で描かれ、.service_icon_wrap の高さは 80px になる。
   ここで height:40px を足すと wrap が 90px になり、service セクションが 10px 伸びて
   以降の全セクションがズレる（実測で確認）。**height は書かないのが正解**。
   アイコン(Lucide)は元から stroke:#ffffff＝参考の fill:#FFFFFF と同じ白抜きなので filter も不要。 */
.page--top .section--service .section--inner .list--service li .service_icon_wrap .service_icon img {
  width: 40px;
  /* height:auto は必須。HTML の width/height 属性（CLS対策 §7-3）は presentational hint として
     height:30px 相当に効いてしまい、参考（属性なし＝縦は比率まかせ）と 2px ズレる。
     SP は内容ボックスが 28px なので参考は 28、属性ありだと 30 になり、
     text の li 5枚 ぶんで service が約 +10px 伸びる（実測）。auto に戻すと参考と一致する。 */
  height: auto;
}
.page--top .section--service .section--inner .list--service li:nth-child(3) .service_icon { animation-delay: 9s; }
.page--top .section--service .section--inner .list--service li:nth-child(5) .service_icon { animation-delay: 6s; }
.page--top .section--service .section--inner .list--service li:nth-child(7) .service_icon { animation-delay: 12s; }
.page--top .section--service .section--inner .list--service li:nth-child(9) .service_icon { animation-delay: 9s; }
.page--top .section--service .section--inner .list--service li .tit {
  font-family: var(--font-display);
  font-weight: 400;
  text-align: center;
  font-size: 4rem;
  margin-bottom: 24px;
}
.page--top .section--service .section--inner .list--service li.service_img {
  position: relative;
  overflow: hidden;
}
.page--top .section--service .section--inner .list--service li.service_img .sv_img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: cover;
  background-position: center center;
}
.page--top .section--service .section--inner .list--service li.service_img.sv_01 .sv_img { background-image: url(img/service_img01.webp); }
.page--top .section--service .section--inner .list--service li.service_img.sv_02 .sv_img { background-image: url(img/service_img02.webp); }
.page--top .section--service .section--inner .list--service li.service_img.sv_03 .sv_img { background-image: url(img/service_img03.webp); }
.page--top .section--service .section--inner .list--service li.service_img.sv_04 .sv_img { background-image: url(img/service_img04.webp); }
.page--top .section--service .section--inner.scrollin {
  opacity: 1;
  animation: fade_in_service 3.5s forwards;
}

/* works */
.page--top .section--works {
  position: relative;
  z-index: 2;
}
.page--top .section--works .deco_img.champagne {
  /* シャンパンタワー装飾（観覧車は CONTACT へ移設）。WORKS 左上の大型アクセント。 */
  position: absolute;
  top: -14vw;
  left: -1vw;
  right: auto;
  width: 31vw;
  z-index: 20;   /* .list--grid より前面（画像には被せる／テキストパネルは避ける） */
  pointer-events: none;   /* 装飾なので下のカードのクリックを妨げない */
}
.page--top .section--works .deco_img.champagne img {
  width: 100%;
  height: auto;
  transform-origin: center center;
  animation: champagne_sway 5s ease-in-out infinite;   /* 左上→右下の斜めゆらゆら */
}
@keyframes champagne_sway {
  0%   { transform: translate(-2.2%, -2.2%) rotate(-2deg); }
  50%  { transform: translate(2.2%,  2.2%) rotate(2deg); }
  100% { transform: translate(-2.2%, -2.2%) rotate(-2deg); }
}
.page--top .section--works .simple_sentence {
  position: absolute;
  top: 0;
  right: 30px;
  writing-mode: vertical-rl;
  border-right: 1px solid var(--muted);
  padding-top: 32px;
  padding-bottom: 20px;
  padding-right: 12px;
  height: max-content;
}
/* WORKS見出し脇に出る単独の縦書き装飾テキストは非表示（View Moreカード内の同文と重複のため）。 */
.page--top .section--works > .simple_sentence {
  display: none;
}
.page--top .section--works .section--tit {
  position: relative;
  font-size: var(--fs-display-wk);
  background: linear-gradient(180deg, transparent 0%, transparent 70%, var(--bg) 70%, var(--bg) 100%);
  line-height: var(--lh-display-wk);
  margin-top: 40px;   /* 旧 --space-works-tit-mt(=観覧車デコ用の大余白)→観覧車をCONTACTへ移設し空白を解消 */
  margin-bottom: var(--space-works-tit-mb);
  z-index: 1;
}
.page--top .section--works .section--inner {
  width: 100%;
  padding: 0 var(--gutter-works);
  background: var(--bg);
}
.page--top .section--works .one_letter {
  justify-content: flex-end;
}
.page--top .section--works .list--grid {
  grid-template-rows: repeat(2, 1fr);
}
/* 6番目セルも通常の店舗カード（渋谷ガーデンルーム3F）。旧 View More 専用スタイルは撤去。 */

.page--top footer {
  background: var(--bg);
  z-index: -1;
}

@media screen and (max-width: 950px) {
  .page--top:before {
    background-image: url(img/bg_works_sp.webp);
  }
  .page--top .opening .text_box .mv_logo h2 {
    --logo-w: clamp(180px, 46vw, 200px);
    width: clamp(180px, 46vw, 200px);
    height: clamp(68px, 17.5vw, 76px);
    aspect-ratio: auto;
  }
  .page--top .mainvisual .text_box .mv_logo {
    margin-bottom: 10px;
  }
  .page--top .mainvisual .text_box .mv_logo h2 {
    --logo-w: clamp(180px, 46vw, 200px);
    width: clamp(180px, 46vw, 200px);
    height: clamp(68px, 17.5vw, 76px);
    aspect-ratio: auto;
  }
  .page--top .mainvisual .simple_sentence {
    right: 8px;
    padding-right: 6px;
    line-height: 1.2;
  }
  .page--top .section--company {
    padding-top: var(--space-company-pt);
  }
  .page--top .section--company .company_policy {
    padding-top: 8px;
    padding-right: max(10px, 2vw);
    padding-left: max(10px, 2vw);
    padding-bottom: max(65px, 10vw);
  }
  .page--top .section--company .company_policy .bg_parallax img {
    background-image: url(img/bg_company_sp.webp);
  }
  .page--top .section--company .company_policy .block--inner {
    padding-top: clamp(100px, 20vw, 110px);
    padding-left: max(10px, 2vw);
    position: relative;
    z-index: 100;
  }
  .page--top .section--company .company_policy .section--tit {
    margin-bottom: var(--space-tit-mb-company);
  }
  .page--top .section--company .company_policy .tit_sub {
    margin-bottom: 7px;
  }
  .page--top .section--company .company_policy .txt {
    font-size: 1.2rem;
    max-width: none;
    padding-bottom: 20px;
  }
  .page--top .section--company .company_policy .deco_img {
    /* v6-①B: SPで大きすぎ→約58%に縮小し本文/キャッチに非接触（レイアウト不変・表示スケールのみ） */
    bottom: -40px;
    right: -8px;
    width: min(32vw, 200px);
  }
  .page--top .section--company .list--grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
  }
  .page--top .section--company .list--grid .grid_box {
    border-radius: 6px;
  }
  .page--top .section--company .list--grid .grid_box:nth-of-type(3),
  .page--top .section--company .list--grid .grid_box:nth-of-type(4) {
    aspect-ratio: 77/59;
  }
  .page--top .section--company .list--grid .grid_box:nth-of-type(1) {
    border-top-left-radius: 30px; grid-column: 1/5; grid-row: 1/2;
  }
  .page--top .section--company .list--grid .grid_box:nth-of-type(1) .grid_inner .img_change:nth-of-type(1) { background-image: url(img/company_img01_sp.webp); }
  .page--top .section--company .list--grid .grid_box:nth-of-type(1) .grid_inner .img_change:nth-of-type(2) { background-image: url(img/company_img07_sp.webp); }
  .page--top .section--company .list--grid .grid_box:nth-of-type(2) {
    border-top-right-radius: 30px; grid-column: 5/7; grid-row: 1/2;
  }
  .page--top .section--company .list--grid .grid_box:nth-of-type(2) .grid_inner .img_change:nth-of-type(1) { background-image: url(img/company_img08_sp.webp); }
  .page--top .section--company .list--grid .grid_box:nth-of-type(2) .grid_inner .img_change:nth-of-type(2) { background-image: url(img/company_img02_sp.webp); }
  .page--top .section--company .list--grid .grid_box:nth-of-type(3) {
    grid-column: 1/4; grid-row: 2/3;
  }
  .page--top .section--company .list--grid .grid_box:nth-of-type(3) .grid_inner .img_change:nth-of-type(1) { background-image: url(img/company_img09_sp.webp); }
  .page--top .section--company .list--grid .grid_box:nth-of-type(3) .grid_inner .img_change:nth-of-type(2) { background-image: url(img/company_img03_sp.webp); }
  .page--top .section--company .list--grid .grid_box:nth-of-type(4) {
    grid-column: 4/7; grid-row: 2/3;
  }
  .page--top .section--company .list--grid .grid_box:nth-of-type(4) .grid_inner .img_change:nth-of-type(1) { background-image: url(img/company_img10_sp.webp); }
  .page--top .section--company .list--grid .grid_box:nth-of-type(4) .grid_inner .img_change:nth-of-type(2) { background-image: url(img/company_img04_sp.webp); }
  .page--top .section--company .list--grid .grid_box:nth-of-type(5) {
    border-bottom-left-radius: 30px; grid-column: 1/5; grid-row: 3/4;
  }
  .page--top .section--company .list--grid .grid_box:nth-of-type(5) .grid_inner .img_change:nth-of-type(1) { background-image: url(img/company_img11_sp.webp); }
  .page--top .section--company .list--grid .grid_box:nth-of-type(5) .grid_inner .img_change:nth-of-type(2) { background-image: url(img/company_img05_sp.webp); }
  .page--top .section--company .list--grid .grid_box:nth-of-type(6) {
    border-bottom-right-radius: 30px; grid-column: 5/7; grid-row: 3/4;
  }
  .page--top .section--company .list--grid .grid_box:nth-of-type(6) .grid_inner .img_change:nth-of-type(1) { background-image: url(img/company_img12_sp.webp); }
  .page--top .section--company .list--grid .grid_box:nth-of-type(6) .grid_inner .img_change:nth-of-type(2) { background-image: url(img/company_img06_sp.webp); }

  .page--top .section--topics {
    padding-bottom: var(--space-topics-pb);
  }
  .page--top .section--topics .section--inner {
    width: 100%;
    padding-top: var(--space-topics-pt);
  }
  .page--top .section--topics .section--tit {
    font-size: var(--fs-h1-topics);
    text-align: right;
    margin-right: 20px;
    opacity: 0;
    transition: all var(--dur-fade);
    position: relative;
    z-index: 1;
  }
  .page--top .section--topics .simple_sentence {
    padding-top: 10px;
    margin-right: 20px;
    margin-bottom: 24px;
  }
  .page--top .section--topics .block--inner {
    margin-left: 0;
    z-index: 1;
  }
  .page--top .section--topics .block--inner .topics_main {
    display: block;
  }
  .page--top .section--topics .block--inner .topics_main .list--contents {
    padding-left: 36px;
    margin-bottom: 35px;
  }
  .page--top .section--topics .block--inner .btn--main {
    margin-right: 20px;
  }
  .page--top .section--topics .deco_img.brush {
    top: -25px;
    left: -3px;
    width: 39vw;
  }
  .page--top .section--topics .deco_img.liquid {
    left: 18vw;
    bottom: -18.5vw;
    width: 45vw;
    height: 22.3vw;
  }
  .page--top .section--topics.scrollin .section--tit {
    opacity: 1;
    transition-delay: 2.2s;
  }

  .page--top .section--service {
    margin-top: var(--space-service-mt);
  }
  /* v6-①C(SP/タブレット): 右寄せ・斜め。単一カラムで本文が全幅のため、テキストの無い装飾画像帯(sv_01)へ
     右寄りで配置し§6を確実に満たす(§9-B裁量でSPは簡略化)。ゆらぎ/回転は基底ルールから継承。 */
  .page--top .section--service .deco_img {
    top: 430px;
    width: max(46px, 12vw);
  }
  .page--top .section--service .deco_img:nth-of-type(1) { left: auto; right: 24vw; }
  .page--top .section--service .deco_img:nth-of-type(2) { left: auto; right: 6vw; }
  .page--top .section--service .section--tit {
    margin-bottom: 4px;
  }
  .page--top .section--service .section--inner .list--service {
    flex-flow: column;
    margin-bottom: 30px;
  }
  .page--top .section--service .section--inner .list--service li {
    width: 100%;
    aspect-ratio: 0;
  }
  .page--top .section--service .section--inner .list--service li:nth-child(even) {
    aspect-ratio: 16/9;
  }
  .page--top .section--service .section--inner .list--service li:nth-child(odd) {
    padding: 40px 30px 50px;
  }
  .page--top .section--service .section--inner .list--service li .service_icon_wrap {
    width: 60px;
    margin: 0 auto 10px;
  }
  .page--top .section--service .section--inner .list--service li .service_icon_wrap .service_icon {
    padding: 16px;
    border-radius: 30px;
  }
  .page--top .section--service .section--inner .list--service li .tit {
    font-size: 2.8rem;
    margin-bottom: 10px;
  }
  .page--top .section--service .section--inner .list--service li.service_img.sv_01 .sv_img { background-image: url(img/service_img01_sp.webp); }
  .page--top .section--service .section--inner .list--service li.service_img.sv_02 .sv_img { background-image: url(img/service_img02_sp.webp); }
  .page--top .section--service .section--inner .list--service li.service_img.sv_03 .sv_img { background-image: url(img/service_img03_sp.webp); }
  .page--top .section--service .section--inner .list--service li.service_img.sv_04 .sv_img { background-image: url(img/service_img04_sp.webp); }

  .page--top .section--works .deco_img {
    top: -25vw;
    right: -3vw;
    width: 42vw;
  }
  .page--top .section--works .deco_img.champagne {
    top: -15vw;
    left: -1vw;
    right: auto;
    width: 44vw;
  }
  .page--top .section--works .simple_sentence {
    right: 20px;
    padding-top: 30px;
    padding-bottom: 18px;
  }
  .page--top .section--works .section--tit {
    margin-bottom: var(--space-works-tit-mb);
    margin-top: 50px;   /* 旧50vh(観覧車デコ用)→縮小。空白を詰める */
  }
  .page--top .section--works .section--inner {
    width: 100%;
    padding: 0 var(--gutter-works);
  }
  .page--top .section--works .list--grid {
    grid-template-rows: repeat(4, 1fr);
  }
  .page--top footer {
    z-index: 0;
  }
}
@media screen and (min-width: 550px) and (max-width: 950px) {
  .page--top .section--works .deco_img { top: -22vw; }
}

/* ============================================================
   keyframes（参考 style.css 4565-4836 と同一）
   ============================================================ */
@keyframes PageAnime-circle {
  0% { transform: scale(300); }
  100% { transform: scale(0); }
}
@keyframes PageAnime-before {
  0% { transform: scale(0); }
  100% { transform: scale(300); }
}
/* 参考の svg_line（stroke-dashoffset 1800→0）の代替。左→右に書き進む見え方を作る。 */
@keyframes logo_draw {
  0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes change-img-anim {
  0% { opacity: 1; }
  50% { opacity: 1; }
  51% { opacity: 0; }
  99% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade_in_opacity {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade_in_service {
  0% { transform: translate(0%, -120%); }
  20% { transform: translate(0%, -120%) rotate(-1deg); }
  45% { transform: translate(0%, 5%) rotate(0deg); }
  53% { transform: translate(0%, -2%) rotate(-0.5deg); }
  63% { transform: translate(0%, 2%) rotate(0); }
  70% { transform: translate(0%, 0%) rotate(-1deg); }
  80% { transform: translate(0%, -1%) rotate(1deg); }
  100% { transform: translate(0%, 0%) rotate(0); }
}
@keyframes fade_in_phone {
  0% { transform: translate(0%, -140%) rotate(0deg); opacity: 0; }
  15% { transform: translate(0%, -140%) rotate(-30deg); }
  25% { transform: translate(0%, 25%) rotate(-5deg); opacity: 0; }
  35% { transform: translate(0%, -10%) rotate(-2deg); opacity: 1; }
  45% { transform: translate(0%, 10%) rotate(0); }
  55% { transform: translate(0%, -5%) rotate(-1deg); }
  65% { transform: translate(0%, 0%) rotate(1deg); }
  75% { transform: translate(0%, -2%) rotate(-0.5deg); }
  85% { transform: translate(0%, 1%) rotate(0deg); }
  100% { transform: translate(0%, 0%) rotate(0); }
}
@keyframes shake_brush {
  0% { transform: translate(0%, 0%) rotate(0deg); }
  10% { transform: translate(0%, -3%) rotate(-15deg); }
  20% { transform: translate(0%, 0%) rotate(10deg); }
  30% { transform: translate(0%, -2%) rotate(-8deg); }
  40% { transform: rotate(6deg); }
  55% { transform: rotate(-4deg); }
  65% { transform: rotate(2deg); }
  75% { transform: rotate(0deg); }
}
@keyframes shake_phone {
  0% { transform: translate(0%, 0%) rotate(0deg); }
  3% { transform: translate(-0.5%, 0%) rotate(1deg); }
  10% { transform: translate(-2%, 0%) rotate(-5deg); }
  18% { transform: translate(4%, 0%) rotate(2deg); }
  26% { transform: translate(-4%, 0%) rotate(-5deg); }
  34% { transform: translate(2%, 0%) rotate(0deg); }
  42% { transform: translate(-1%, 0%) rotate(-3deg); }
  50% { transform: translate(0.5%, 0.2%) rotate(0deg); }
  58% { transform: translate(0%, 0%) rotate(-1deg); }
  68% { transform: translate(0%, 0%) rotate(-0.2deg); }
  78% { transform: translate(0%, 0%) rotate(0deg); }
}
@keyframes rotate_back {
  0% { transform: rotateY(0deg); }
  10% { transform: rotateY(360deg); }
  20% { transform: rotateY(0deg); }
}
@keyframes imageBlur {
  30% { filter: blur(20px); }
  100% { filter: blur(0px); }
}
@keyframes scroll {
  0% { transform: scale(0, 1); transform-origin: 100% 0; }
  50% { transform: scale(1, 1); transform-origin: 100% 0; }
  51% { transform: scale(1, 1); transform-origin: 0 0; }
  100% { transform: scale(0, 1); transform-origin: 0 0; }
}

/* ============================================================
   【意図的な逸脱 / §7-3・§10-1 #12】prefers-reduced-motion
   参考サイトには指定が一切無い。"必須・例外なし" の要件なので追加する。
   tokens.css 側で duration/変位のトークンは既に潰されているので、
   ここでは keyframes 由来の常時ループと出現アニメを止める。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* 出現前提で opacity:0 のものが見えなくならないように確定表示させる */
  .page--top .container,
  .page--top .mainvisual .text_box .mv_logo,
  .page--top .mainvisual .text_box .mv_subtit,
  .page--top .section--service .section--inner,
  .page--top .section--topics .simple_sentence,
  .page--top .section--topics .block--inner .topics_main .section--tit,
  .page--top .section--topics .block--inner .topics_main .list--contents,
  .page--top .section--topics::before,
  .page--top .section--topics .deco_img.brush,
  .section--recruit .recruit_info .list--occupation li,
  .section--contact .deco_img,
  .section--contact .bg_blur,
  .fadein, .fadeinAbove {
    opacity: 1 !important;
    transform: none !important;
  }
  .one_letter span { transform: none !important; }
  .mask_tit, .mask_tit > span { transform: none !important; }
  .page--top .opening { display: none !important; }
  .page_transition { display: none !important; }
  /* 動画は静止画（poster）で止める。app.js が src を昇格させないので読み込みは起きず、
     display:none で消すと poster まで消えるため、要素は残して poster だけを見せる。 */
  .page--top .video_box .video { display: block; }
}

/* ============================================================
   ★意図的な逸脱（§10-1#14 Perf≥85 / #15 LCP<2.5s）— 画面外セクションの背景画像の遅延
   ------------------------------------------------------------
   参考サイトは全セクションの背景画像をレイアウト時に一斉取得する。実測すると
   モバイル初期転送が 1,181KB に達し、帯域が枯れて LCP が 5.3〜5.6s まで悪化していた
   （基準は 2.5s 未満）。内訳: company 814KB / service 253KB / page--top:before 167KB /
   recruit 159KB / contact 145KB。

   ここで遅らせるのは **取得の「時刻」だけ**で、見た目は1pxも変えない：
   - `background-image` はレイアウトに一切影響しない → セクション位置・ページ全高・CLS は不変
     （実測で担保: #1構成一致 / #2余白PC全て0px差 / #3見出し幅+0.00% / 全高8208px を維持）
   - 画面手前 600px で当てるため、スクロールしてもユーザーに読み込みは見えない
   - `html.js-defer` が付いている時だけ効く。JS無効環境では**参考と全く同じ挙動**（即時取得）
   - `.bg-in` は app.js の defer_bg() が IntersectionObserver で付与し、以後は外さない
   ============================================================ */
html.js-defer #company:not(.bg-in) *,
html.js-defer #topics:not(.bg-in) *,
html.js-defer #service:not(.bg-in) *,
html.js-defer #works:not(.bg-in) *,
html.js-defer #recruit:not(.bg-in) *,
html.js-defer #contact:not(.bg-in) * {
  background-image: none !important;
}

/* オーナー指示(2026-07-24): 公式SNS未開設のため SNS アイコンを全ページ非表示 */
.snsnav { display: none !important; }