/* page-company 専用CSS（旧: テンプレート<head>のインライン<style>・2026-07-30に外部化） */
html,
body {
  margin: 0;
  padding: 0;
}
:root {
  --paper: #ffffff;
  --paper-2: #f5f4f1;
  --ink: #242220;
  --ink-soft: #514d47;
  --stone: #8f8b82;
  --line: #e7e4de;
  --dark: #26241f;
  --dark-2: #1e1c18;
  --brass: #a89878;
  --paper-on-dark: #ede8df;
  --serif-jp: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; /* フォント統一（オーナー指示 2026-07-28） */
  --serif-en: "Cormorant Garamond", "Zen Old Mincho", "Hiragino Mincho ProN",
    "Yu Mincho", serif;
  --sans: "Cormorant Garamond", "Zen Old Mincho", "Hiragino Mincho ProN",
    "Yu Mincho", serif; /* 旧: システムゴシック。フォント統一（オーナー指示 2026-07-28） */
  --gutter: max(
    clamp(24px, 5vw, 64px),
    calc((100vw - 1472px) / 2)
  ); /* 大画面ではガターが伸び、コンテンツを中央1472px枠に整列（画像ブリードは全幅維持） */
}
* {
  box-sizing: border-box;
}
.sg {
  color: var(--ink);
  font-family: var(--serif-jp);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;
  /* 空気の光: テクスチャではなく、右上から差す極薄の暖色ウォッシュ（固定光源） */
  background: radial-gradient(
      1100px 720px at 88% -4%,
      rgba(224, 216, 201, 0.42),
      transparent 64%
    ),
    radial-gradient(
      900px 680px at -6% 34%,
      rgba(231, 229, 224, 0.32),
      transparent 62%
    ),
    var(--paper);
  background-attachment: fixed, fixed, scroll;
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}
.lbl {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
}
.en-title {
  font-family: var(--serif-en);
  font-style: normal;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.note {
  background: #1b1a16;
  color: #cfc8ba;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  padding: 14px 20px;
  text-align: center;
}

.sg-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 34px var(--gutter);
}
.sg-logo {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--paper-on-dark);
  text-decoration: none;
}
.sg-logo .mark {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(237, 232, 223, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-en);
  font-size: 15px;
  font-style: normal;
}
.sg-logo .jp {
  font-family: var(--serif-jp);
  font-size: 19px;
  letter-spacing: 0.14em;
  line-height: 1;
}
.sg-logo .en {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.34em;
  color: rgba(237, 232, 223, 0.7);
  margin-top: 5px;
  text-transform: uppercase;
}
.sg-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}
.sg-nav a {
  font-family: var(--serif-en);
  font-size: 15px;
  color: rgba(237, 232, 223, 0.82);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: opacity 0.3s;
}
.sg-nav a:hover {
  opacity: 0.6;
}
.sg-nav a.is-current {
  border-bottom: 1px solid rgba(237, 232, 223, 0.5);
  padding-bottom: 3px;
}
.sg-pill {
  font-family: var(--serif-en);
  font-size: 14px;
  color: var(--paper-on-dark);
  border: 1px solid rgba(237, 232, 223, 0.45);
  border-radius: 40px;
  padding: 11px 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: background 0.35s, color 0.35s;
}
.sg-pill:hover {
  background: var(--paper-on-dark);
  color: var(--dark);
}

.pg-hero {
  position: relative;
  isolation: isolate;
  min-height: 74vh;
  overflow: hidden;
  overflow: clip; /* hiddenのままだとview()の基準を奪う */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gutter) clamp(44px, 6vh, 72px);
  background: linear-gradient(120deg, #3a4239 0%, #2c322c 45%, #20241e 100%);
  color: var(--paper-on-dark);
}
.pg-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.pg-hero-bg .ph-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  filter: saturate(0.95) brightness(0.92) contrast(1.03);
}
.pg-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 19, 16, 0.55) 0%,
    rgba(20, 19, 16, 0.18) 40%,
    rgba(20, 19, 16, 0.62) 100%
  );
}
.pg-vert {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: row-reverse;
  gap: clamp(14px, 2vw, 26px);
}
.pg-vert span {
  writing-mode: vertical-rl;
  font-size: clamp(22px, 2.5vw, 36px);
  letter-spacing: 0.22em;
  line-height: 1.9;
  text-shadow: 0 22px 54px rgba(0, 0, 0, 0.52);
  display: block;
}
.pg-lead {
  max-width: 28em;
  margin: 0;
  font-size: clamp(13.5px, 1.2vw, 16px);
  letter-spacing: 0.1em;
  color: rgba(237, 232, 223, 0.85);
}
.pg-en {
  font-family: var(--serif-en);
  font-style: normal;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: 0.12em;
  color: rgba(237, 232, 223, 0.66);
}

.sec {
  padding: clamp(140px, 19vw, 280px) 0;
}
/* 空気感の道具: 短い真鍮罫・薄いゴースト英字 */
.rule {
  display: block;
  width: 46px;
  height: 1px;
  background: var(--brass);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.ghost-en {
  position: absolute;
  z-index: 0;
  font-family: var(--serif-en);
  font-style: normal;
  line-height: 0.8;
  color: rgba(36, 34, 32, 0.045);
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}
/* 白場に浮かぶ縦書きの一句 */
/* 縦書きの一句「誠実に、長く。」を大きく（オーナー指示 2026-07-30）。
     12.5px → clamp(16px,1.5vw,21px) → さらに拡大の指示で clamp(30px,3.4vw,48px)。
     広いトラッキング(.36em)は意匠なので維持 */
.vnote {
  position: absolute;
  writing-mode: vertical-rl;
  font-size: clamp(30px, 3.4vw, 48px);
  letter-spacing: 0.36em;
  color: var(--stone);
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}

/* Message: 文は狭い版面・画像は画面右端までブリード */
.split {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns:
    minmax(var(--gutter), 1fr) minmax(0, 30em) clamp(48px, 7vw, 120px)
    minmax(0, 880px);
}
.split .txt {
  grid-column: 2;
  padding: clamp(50px, 7vw, 100px) 0;
  position: relative;
  z-index: 2;
}
.split .ph {
  position: relative;
  grid-column: 4;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 60px -30px rgba(38, 36, 31, 0.4);
  filter: saturate(0.86) contrast(1.02);
}
.sec--message {
  padding: 0;
}
.split--text {
  display: block;
  padding: clamp(180px, 16vw, 260px) var(--gutter) clamp(110px, 13vw, 180px);
}
.split--text .txt {
  max-width: 820px;
  padding: 0;
}
/* ゴースト英字はサイト共通で右端（right:var(--gutter)）に置く型。
     ここだけ left 指定で他ページと位置が揃っていなかったため合わせた
     （オーナー指摘 2026-07-30）。同ページの Profile とも同じ基準になる */
.split--text .ghost-en {
  top: clamp(16px, 2vw, 42px) !important;
  left: auto !important;
  right: var(--gutter) !important;
  font-size: clamp(117px, 19.5vw, 286px) !important;
}
.split.split--text .txt h2 {
  font-size: clamp(22px, 4.2vw, 52px);
  line-height: 1.8;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.split .txt h2 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 40px);
  letter-spacing: 0.14em;
  line-height: 1.8;
}
.split .txt p {
  margin: clamp(30px, 4vw, 44px) 0 0;
  font-size: 15.5px;
  letter-spacing: 0.06em;
  line-height: 2.4;
  color: var(--ink-soft);
  max-width: 30em;
}
.split .txt p + p {
  margin-top: 18px;
}
/* Message本文は上の .split .txt p の max-width:30em(465px) で絞られ、
     820pxの箱の中で不必要に折れて「す。」だけが最終行に落ちていた。
     箱いっぱいまで広げ、balance＋文節折りで行の切れ目も整える（オーナー指示 2026-07-30）。
     同一詳細度のため、必ず上のルールより後ろに置くこと */
.split--text .txt p {
  max-width: none;
}
/* balance はPC幅のみ（2026-08-07）。iOS26系WebKitはスマホ幅で全行を短く均すため本文には掛けない */
@media (min-width: 861px) {
  .split--text .txt p {
    text-wrap: balance;
    word-break: auto-phrase;
  }
} /* auto-phraseもPC限定（2026-08-07・文節折りはスマホ幅だと右に大きな空きを作る） */
/* 署名（オーナー指示 2026-07-30）。本文より一段大きい余白で切り離し、
     右寄せ・墨色で差出人であることを示す。役職は一回り小さく前に置く */
.split .txt p.sign {
  margin-top: clamp(46px, 6vw, 72px);
  text-align: right;
  font-size: 16.5px;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.split .txt p.sign .sign__role {
  margin-right: 1.1em;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--stone);
}
.split .lbl {
  display: block;
  margin-bottom: clamp(26px, 3.4vw, 40px);
}

/* Credo: 全幅ダーク写真帯（コントラストの山） */
.credo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  text-align: center;
  color: var(--paper-on-dark);
  padding: clamp(140px, 19vw, 260px) var(--gutter);
}
.credo-bg {
  position: absolute;
  inset: -9% 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  filter: saturate(0.88) brightness(0.48) contrast(1.05);
  translate: 0 var(--py, 0);
}
.credo .lbl {
  color: rgba(237, 232, 223, 0.62);
}
.credo h2 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 44px);
  letter-spacing: 0.16em;
  line-height: 2;
}
.credo p {
  max-width: 32em;
  margin: clamp(38px, 5vw, 56px) auto 0;
  font-size: 15.5px;
  letter-spacing: 0.06em;
  line-height: 2.3;
  color: rgba(237, 232, 223, 0.85);
  /* センター揃えの帯は文節折り＋行長均等が自然（オーナー報告「スマホの改行を
     自然に」2026-08-07。語中で「深ま/る」と折れていた。sp-statementの型と同じ） */
  text-wrap: balance;
  word-break: auto-phrase;
}

/* Profile: 会社概要（表は狭い版面に寄せ、周囲に白場を残す） */
.prof-head {
  position: relative;
  margin-bottom: clamp(80px, 12vw, 150px);
}
.prof-head h2 {
  margin: clamp(40px, 6vw, 72px) 0 0;
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 40px);
  letter-spacing: 0.16em;
}
.prof-head p {
  margin: 32px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  line-height: 2.4;
  /* max-width:34em はPCで「〜までを一/貫して」と語中で折れるため撤廃
     （オーナー指示「一行で」2026-08-07）。全文42字＝約670pxはPC版面に収まる。
     スマホは2行になるため文節折りで「不/動産」の語中改行を防ぐ（同日指示）。
     PCは1行なので影響なし */
  word-break: auto-phrase;
}
.prof-table {
  width: 100%;
  max-width: 880px;
  border-collapse: collapse;
  border-top: 1px solid var(--line);
}
.prof-table th,
.prof-table td {
  padding: clamp(32px, 4.2vw, 50px) 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}
/* 見出し列を大きく・墨色へ（オーナー指示 2026-07-30。14px/brass → 16px/ink） */
.prof-table th {
  width: 240px;
  font-family: var(--serif-en);
  font-style: normal;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.prof-table td {
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--ink);
  line-height: 2.1;
}

/* Access */
.access {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
}
.access h2 {
  margin: 24px 0 0;
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 40px);
  letter-spacing: 0.16em;
  line-height: 1.8;
}
.access .addr {
  margin: clamp(30px, 4vw, 44px) 0 0;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  line-height: 2.3;
}
.access .map {
  aspect-ratio: 4/3;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stone);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
}

/* Contact CTA */
/* contact CTA — 非対称レイアウト（大英字＋縦書き和文＋ブラス罫線）で全ページ統一（オーナー指示 2026-07-21） */
.sg-contact {
  padding: clamp(120px, 17vw, 220px) 0;
}
.sg-contact .c-inner {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: clamp(44px, 7vw, 120px);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}
.sg-contact .c-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sg-contact .c-title {
  display: block;
  font-size: clamp(64px, 11vw, 150px);
  letter-spacing: 0.02em;
  line-height: 0.92;
  color: var(--ink);
}
.sg-contact .c-rule {
  display: block;
  width: clamp(48px, 6vw, 92px);
  height: 1px;
  background: var(--brass);
  margin: clamp(26px, 3.4vw, 44px) 0;
  transform-origin: left;
}
.sg-contact .c-vmsg {
  writing-mode: vertical-rl;
  margin: 0;
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: clamp(16px, 1.7vw, 20px);
  letter-spacing: 0.2em;
  line-height: 2.5;
  color: var(--ink-soft);
}
.sg-contact .contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 44px;
  border: 1px solid rgba(36, 34, 32, 0.32);
  color: var(--ink);
  font-family: var(--serif-en);
  font-style: normal;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.sg-contact .contact-btn .arw {
  font-style: normal;
  font-size: 15px;
}
.sg-contact .contact-btn:hover {
  background: var(--dark);
  color: var(--paper-on-dark);
  border-color: var(--dark);
}
@media (max-width: 860px) {
  .sg-contact .c-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(30px, 8vw, 48px);
  }
  .sg-contact .c-lead {
    align-items: center;
  }
  .sg-contact .c-title {
    font-size: clamp(56px, 18vw, 92px);
  }
  .sg-contact .c-rule {
    margin: clamp(22px, 6vw, 32px) auto;
  }
  .sg-contact .c-vmsg {
    writing-mode: horizontal-tb;
    text-align: center;
    font-size: clamp(14px, 4vw, 17px);
    line-height: 2.1;
    letter-spacing: 0.1em;
  }
}

.sg-footer {
  background: var(--dark-2);
  color: rgba(237, 232, 223, 0.75);
  padding: clamp(70px, 9vw, 110px) 0 60px;
}
.foot-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.foot-logo .jp {
  font-family: var(--serif-jp);
  font-size: 24px;
  letter-spacing: 0.16em;
  color: var(--paper-on-dark);
}
.foot-logo .en {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.34em;
  color: rgba(237, 232, 223, 0.55);
  margin-top: 8px;
  text-transform: uppercase;
}
.foot-addr {
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 2.1;
  color: rgba(237, 232, 223, 0.6);
  margin-top: 18px;
}
.foot-nav {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.foot-nav a {
  font-family: var(--serif-en);
  font-size: 14px;
  color: rgba(237, 232, 223, 0.72);
  text-decoration: none;
}
.foot-nav a:hover {
  color: var(--paper-on-dark);
}
.foot-copy {
  margin-top: 64px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: rgba(237, 232, 223, 0.4);
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .sg-nav {
    display: none;
  }
  .pg-hero {
    min-height: 70vh;
  }
  .split {
    display: block;
  }
  .split--text {
    padding-top: clamp(118px, 28vw, 156px);
  }
  /* スマホもPCと同じ右端基準に揃える（オーナー指摘 2026-07-30） */
  .split--text .ghost-en {
    top: clamp(
      64px,
      17vw,
      92px
    ) !important; /* 上すぎたため下げた（オーナー指摘 2026-08-07） */
    left: auto !important;
    right: var(--gutter) !important;
    font-size: clamp(73px, 20.8vw, 117px) !important;
  }
  .split .ph {
    aspect-ratio: 4/3;
  }
  .split .txt {
    padding: 0;
  }
  .access {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .prof-table th {
    width: 120px;
    font-size: 12px;
  }
  .prof-table th,
  .prof-table td {
    padding: 22px 8px;
  }
  .ghost-en {
    font-size: clamp(73px, 20.8vw, 117px) !important;
  }
  .vnote {
    display: none;
  }
}
@media (max-width: 380px) {
  .split.split--text .txt h2 {
    font-size: 20px;
    letter-spacing: 0.1em;
  }
}

/* ---------- 表示アニメーション（shinwa.local = margin-design 移植・トップと同一体系） ---------- */
.m-page-veil {
  position: fixed;
  inset: 0;
  z-index: 9400;
  pointer-events: none;
  background: #fff;
  -webkit-mask-image: linear-gradient(
    135deg,
    transparent,
    transparent 30%,
    rgba(0, 0, 0, 0.08) 34%,
    rgba(0, 0, 0, 0.32) 38%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.92) 46%,
    #000 50%,
    #000
  );
  mask-image: linear-gradient(
    135deg,
    transparent,
    transparent 30%,
    rgba(0, 0, 0, 0.08) 34%,
    rgba(0, 0, 0, 0.32) 38%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.92) 46%,
    #000 50%,
    #000
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 220% 220%;
  mask-size: 220% 220%;
  animation: m-page-veil-out 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s both
    1;
}
@keyframes m-page-veil-out {
  from {
    opacity: 1;
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }
  82% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-page-veil {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.m-on .m-group:not(.is-visible) .m-reveal,
  html.m-on .m-group:not(.is-visible) .m-reveal-h {
    opacity: 0;
  }
  html.m-on .m-group.is-visible .m-reveal {
    animation: m-blur-in 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) backwards;
    animation-delay: var(--d, 0s);
  }
  html.m-on .m-group.is-visible .m-reveal-h {
    animation: m-blur-in 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) backwards,
      m-ls-in 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: var(--d, 0s);
  }
  @keyframes m-blur-in {
    from {
      opacity: 0;
      filter: blur(14px);
    }
  }
  @keyframes m-ls-in {
    from {
      letter-spacing: 0.24em;
    }
  }
  /* 画像リビールは「外枠固定・内側だけ動かす」本家構造に準拠（2026-07-12修正） */
  html.m-on .m-group .m-reveal-img {
    position: relative;
    background-size: 0 0;
    overflow: hidden;
  }
  html.m-on .m-group .m-reveal-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(
      -30deg,
      transparent,
      transparent 40%,
      rgba(0, 0, 0, 0.02) 42%,
      rgba(0, 0, 0, 0.08) 44%,
      rgba(0, 0, 0, 0.18) 46%,
      rgba(0, 0, 0, 0.32) 48%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.68) 52%,
      rgba(0, 0, 0, 0.82) 54%,
      rgba(0, 0, 0, 0.92) 56%,
      rgba(0, 0, 0, 0.98) 58%,
      #000 60%,
      #000
    );
    mask-image: linear-gradient(
      -30deg,
      transparent,
      transparent 40%,
      rgba(0, 0, 0, 0.02) 42%,
      rgba(0, 0, 0, 0.08) 44%,
      rgba(0, 0, 0, 0.18) 46%,
      rgba(0, 0, 0, 0.32) 48%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.68) 52%,
      rgba(0, 0, 0, 0.82) 54%,
      rgba(0, 0, 0, 0.92) 56%,
      rgba(0, 0, 0, 0.98) 58%,
      #000 60%,
      #000
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% max(300%, 100vh);
    mask-size: 100% max(300%, 100vh);
    -webkit-mask-position: center 0;
    mask-position: center 0;
    will-change: mask-position, transform;
    transform: translateZ(0);
  }
  html.m-on .m-group:not(.is-visible) .m-reveal-img::before {
    -webkit-mask-position: center 100%;
    mask-position: center 100%;
    scale: 1.075;
  }
  html.m-on .m-group.is-visible .m-reveal-img::before {
    animation: m-img-wipe 1.4s linear backwards,
      m-img-settle 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) backwards;
    animation-delay: var(--d, 0s);
  }
  @keyframes m-img-wipe {
    from {
      -webkit-mask-position: center 100%;
      mask-position: center 100%;
    }
  }
  @keyframes m-img-settle {
    from {
      scale: 1.075;
    }
  }
}

/* --- スマホ視差（CSS scroll-driven・2026-08-07） ----------------------
   PCの sg-scrollfx（JSが--pyを書き込む）はタッチ端末では起動しないため
   （コンポジタ先行スクロールでJS駆動は原理的にカクつく）、リビール画像の
   内層をスクロール連動アニメーションで縦に流す。
   ・wipe/settle（リビール）と drift（視差）は同じ animation プロパティに
     同居させる（別ルールに分けるとカスケードで片方が消える）
   ・drift の duration は auto 必須（省略は 0s 扱いでタイムラインに乗らない）
   ・overflow:hidden はスクロールコンテナ扱いになり view() の基準を奪うため
     対応環境では clip に切り替える（見た目同一） */
@supports (animation-timeline: view()) {
  @media (pointer: coarse) {
    html.m-on .m-group .m-reveal-img {
      overflow: hidden;
      overflow: clip;
    }
    html.m-on .m-group .m-reveal-img::before {
      top: -14%;
      bottom: -14%;
    }
    html.m-on .m-group.is-visible .m-reveal-img::before {
      animation: m-img-wipe 1.4s linear backwards,
        m-img-settle 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) backwards,
        sg-mplx-drift auto linear both;
      animation-delay: var(--d, 0s), var(--d, 0s), 0s;
      animation-timeline: auto, auto, view();
    }
  }
}
@keyframes sg-mplx-drift {
  from {
    translate: 0 6%;
  }
  to {
    translate: 0 -6%;
  }
}
@supports (animation-timeline: view()) {
  @media (pointer: coarse) {
    /* CREDO帯の背景。PCは page-company.js の data-plx が--pyを書くがタッチでは静止のため */
    .credo .credo-bg {
      animation: sg-mplx-drift auto linear both;
      animation-timeline: view();
    }
  }
}
