/*
  home.css
  index.html のインラインCSSを外部化したもの。
  カスケード順は元の2つの <style> ブロックの連結順を完全に保持している。
  index.html 側にインライン <style> は残していない。トップページのスタイルは
  このファイルが唯一の出所なので、ここを直せば反映される。
  なお index.html は site.css を読み込まない(同名クラスの衝突を避けるため)。
*/
:root {
  --blue: #0054a6;
  --blue-soft: #8fb8de;
  --steel: #4a5a6a;
  --ink: #1a1a1a;
  /* タイポスケール。改修前は17px未満に16段階が乱立し、0.2px差など判別不能な刻みが混在していた。
           下記5段階に集約し、最小値を10.4px→12.5pxへ引き上げる。
           ヒーロー(#hero)は独自トークン(--pl-*)で調整済みのため対象外。 */
  --fs-lead: 1.15rem; /* リード文。本文より大きいこと */
  --fs-body: 1.05rem; /* 本文 */
  --fs-sm: 0.95rem; /* 補助テキスト・リンク */
  --fs-xs: 0.85rem; /* 注記・日付・ラベル */
  --fs-2xs: 0.78rem; /* 英字キッカー等。これより小さくしない */
  /* 本文用の準墨色。コントラストを確保するため純黒ではなくこの値を使う。
           説明文を --steel より濃くしコントラストを引き上げる(--paper-soft 上で約8.6:1)。 */
  --ink-2: #33404d;
  /* 地色: 純白 #ffffff は使わない。
                 根拠=ミニマルで綺麗と評価される19サイトの実測で #FFF地に#000文字は1件も無かった。
                 クリーム/生成りにはしない(AI生成っぽさの構成要素)。ニュートラルに僅かだけ沈めたオフホワイト。 */
  --paper: #f9f9f8;
  --paper-soft: #f1f1ef;
  --rule: rgba(74, 90, 106, 0.22);
  --font-jp:
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo,
    sans-serif;
  --font-en: "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* モバイルは1段ヘッダー(ロゴ+メニューボタン=約64px)。
   700px以上はナビが並ぶため従来値のまま */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 64px;
}
@media (min-width: 700px) {
  html {
    scroll-padding-top: 129px;
  }
}
@media (min-width: 800px) {
  html {
    scroll-padding-top: 81px;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}
h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.tabular {
  font-variant-numeric: tabular-nums;
}
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 200;
  background: var(--paper);
  border: 2px solid var(--blue);
  padding: 0.6rem 1rem;
}

.container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  position: relative;
}
.section--soft {
  background: var(--paper-soft);
}
.eyebrow {
  font-family: var(--font-en);
  font-size: var(--fs-2xs);
  letter-spacing: 0.16em;
  color: var(--steel);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
/* 空の青バーは意味を持たないため廃止。
         ページ内で既に使っている .biz-index(01 / PRINTING)と同じ書式に
         統一し、読者に現在地(節番号とテーマ)を示す役割を持たせる。
         番号=ブランドブルー / 英字=スチールグレーで階層を付ける。 */
.section-kicker {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  color: var(--steel);
  margin-bottom: 1.25rem;
}
.section-kicker b {
  color: var(--blue);
  font-weight: 700;
}
.section-heading {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.01em;
  max-width: 26ch;
  text-wrap: balance;
}
.lead {
  font-size: var(--fs-lead);
  color: var(--steel);
  max-width: 62ch;
  margin-top: 1.5rem;
}

/* layout grid: asymmetric, collapses under 800px */
.layout {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: start;
}
.layout > * {
  min-width: 0;
}
@media (min-width: 800px) {
  .layout--60-40 {
    grid-template-columns: 1.5fr 1fr;
  }
  .layout--40-60 {
    grid-template-columns: 1fr 1.5fr;
  }
}

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  max-width: 1240px;
  margin-inline: auto;
  padding: 1.1rem clamp(1.25rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}
.logo {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--ink);
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  font-size: 0.86rem;
}
.site-nav a {
  text-decoration: none;
}
.header-cta {
  flex-shrink: 0;
}
/* メニューの器。700px以上では display:contents で器そのものを消し、
   .site-nav / .header-cta を従来どおり .header-inner 直下のflexアイテムとして扱う。
   700px未満のときだけ「右上のボタンで開く1枚のパネル」として実体化する */
.header-menu {
  display: contents;
}
.nav-toggle {
  display: none;
}
/* 3本線→×。線は1.5px(btnの罫と同じ太さ)に揃える */
.nav-toggle-bars {
  position: relative;
  flex: none;
  width: 22px;
  height: 14px;
}
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--blue);
  transition:
    transform 0.2s ease,
    opacity 0.15s ease;
}
.nav-toggle-bars span:nth-child(1) {
  top: 0;
}
.nav-toggle-bars span:nth-child(2) {
  top: 6.25px;
}
.nav-toggle-bars span:nth-child(3) {
  top: 12.5px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(6.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-6.25px) rotate(-45deg);
}
.nav-toggle-label {
  font-family: var(--font-en);
  /* home.css のタイポスケール下限(--fs-2xs = 0.78rem)を下回らない */
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--steel);
}
/* 表示中のラベルが常にボタンの意味(次に起きること)と一致するようにする。
   非表示側は display:none なので支援技術にも読まれない */
.nav-toggle[aria-expanded="true"] .nav-toggle-label--open,
.nav-toggle[aria-expanded="false"] .nav-toggle-label--close {
  display: none;
}

@media (max-width: 699px) {
  .header-inner {
    padding-block: 0.6rem;
    gap: 0.5rem 1rem;
  }
  /* JS無効時のフォールバック。パネルは開けないので、器を素直に3段目へ積んで
     全項目を到達可能なままにする(横スクロールはさせない) */
  .header-menu {
    display: block;
    order: 3;
    width: 100%;
  }
  .site-nav {
    flex-direction: column;
    gap: 0;
    font-size: 0.95rem;
  }
  .site-nav a {
    display: block;
    padding-block: 0.85rem;
  }
  /* パネル内では下線が「行の区切り」として読まれるため罫線色まで落とす。
     ホバー/フォーカス時はブランドブルーに戻る(link-foil側の指定が効く) */
  .header-menu .link-foil::before {
    background: var(--rule);
  }
  .header-cta {
    width: 100%;
    margin-top: 1rem;
    align-items: center;
    padding-block: 0.85rem;
  }

  /* --- JS有効時: 右上ボタンで開閉するヘッダー直下パネル --- */
  .js-nav .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding-inline: 0.75rem 0.1rem;
    cursor: pointer;
  }
  .js-nav .header-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    padding: 0.25rem clamp(1.25rem, 5vw, 3rem) 1.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0s 0.18s;
  }
  .js-nav .header-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 0.18s ease,
      transform 0.18s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars span,
  .js-nav .header-menu {
    transition: none;
  }
}

/* link foil-shine underline */
.link-foil {
  position: relative;
  text-decoration: none;
  padding-bottom: 2px;
}
/* 平常時の下線。これが無いと ::after の箔スイープはホバーするまで完全に透明で、
         リンクだと気づけない(実際に指摘を受けた)。箔が走るのはホバー時の褒美とし、
         「そこにリンクがある」ことは常に見えるようにする。 */
.link-foil::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0, 84, 166, 0.4);
  transition: background 0.3s ease;
}
.link-foil:hover::before,
.link-foil:focus-visible::before {
  background: rgba(0, 84, 166, 0.75);
}
.link-foil::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background-image: linear-gradient(
    100deg,
    transparent 35%,
    var(--blue) 48%,
    var(--blue-soft) 50%,
    var(--blue) 52%,
    transparent 65%
  );
  background-size: 280% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  transition: background-position 0.6s ease;
}
.link-foil:hover::after,
.link-foil:focus-visible::after {
  background-position: 0 0;
}

/* buttons: blue used as line/text only, EXCEPT the single final CTA which is filled */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  padding: 0.85rem 1.6rem;
  text-decoration: none;
  position: relative;
  font-family: var(--font-en);
  letter-spacing: 0.02em;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
.btn .btn-main {
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-jp);
}
.btn .btn-sub {
  font-size: var(--fs-2xs);
  opacity: 1;
  color: var(--steel);
  letter-spacing: 0.05em;
}
.btn--outline:hover {
  background: var(--paper-soft);
}
/* primary CTA: 面塗りせず、線幅と濃色文字で強調する(ブランドブルーは線/下線/指標のみ) */
.btn--primary {
  border-width: 2px;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--primary:hover {
  background: var(--paper-soft);
}
.btn--small {
  padding: 0.55rem 1.1rem;
}
.btn--small .btn-main {
  font-size: 0.82rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
}
.text-link .icon-arrow {
  color: var(--blue);
  flex-shrink: 0;
}

/* QR-mark used as list indicator: color used only as a small indicator, never a fill */
.qr-mark {
  color: var(--blue);
  flex-shrink: 0;
}

/* perforation divider between sections */
.perf-divider {
  position: relative;
  height: 20px;
  margin-inline: auto;
  max-width: 1240px;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.perf-divider-svg {
  width: 100%;
  height: 20px;
  overflow: visible;
}
.perf-dots {
  stroke: var(--rule);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.1 14;
  fill: none;
}
.perf-draw {
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.1 14;
  fill: none;
  opacity: 0;
}
html.has-perf-anim .perf-draw {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  opacity: 0.9;
  transition: stroke-dashoffset 1.15s cubic-bezier(0.4, 0, 0.2, 1);
}
html.has-perf-anim .perf-divider.in-view .perf-draw {
  stroke-dashoffset: 0;
}

/* CSS-only textures: no photos, no external assets */
.media-slot {
  position: relative;
  overflow: hidden;
  background: #eef1f4;
  aspect-ratio: 4/5;
  isolation: isolate;
}
.media-slot::before,
.media-slot::after {
  content: "";
  position: absolute;
  inset: 0;
}
.media-slot--steel::before {
  background: repeating-linear-gradient(
    112deg,
    rgba(74, 90, 106, 0.16) 0 2px,
    transparent 2px 30px
  );
}
.media-slot--steel::after {
  background: repeating-linear-gradient(
    112deg,
    transparent 0 55px,
    rgba(0, 84, 166, 0.1) 55px 58px,
    transparent 58px 140px
  );
}
.media-slot--halftone::before {
  background-image: radial-gradient(
    rgba(0, 84, 166, 0.42) 1.6px,
    transparent 1.8px
  );
  background-size: 14px 14px;
}
.media-slot--halftone::after {
  background: repeating-linear-gradient(
    112deg,
    transparent 0 60px,
    rgba(74, 90, 106, 0.12) 60px 63px,
    transparent 63px 150px
  );
}
.media-slot--perf::before {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0 22px,
      rgba(74, 90, 106, 0.35) 22px 23px,
      transparent 23px 24px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 22px,
      rgba(74, 90, 106, 0.35) 22px 23px,
      transparent 23px 24px
    );
}
.media-slot--perf::after {
  background: radial-gradient(rgba(0, 84, 166, 0.35) 1.4px, transparent 1.6px);
  background-size: 24px 24px;
  background-position: 11px 11px;
}
.media-slot-label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  font-family: var(--font-en);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--steel);
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.25rem 0.55rem;
}

/* real photography: unified treatment so varied shots read as one system */
.photo-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--paper-soft);
  transform-origin: left bottom;
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.4, 1);
}
.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: grayscale(0.92) contrast(1.08) brightness(1.02);
  box-shadow: inset 0 0 0 1px rgba(0, 84, 166, 0.15);
  transition: transform 0.6s ease;
}
/* カラー例外(主力設備 Durst Tau 340 RSC E の実写のみ):
   サイト全体のモノクロ化をこの写真だけ解除する。他の写真の filter には影響しない */
.photo-frame.photo-color img {
  filter: none;
}
/* hover = peeling a corner of the sticker: the frame itself lifts
         and rotates slightly from its anchored corner, the photo inside
         zooms a touch more. No shadow added — the existing blue keyline
         on the image already reads as the sticker edge. */
.photo-frame:hover {
  transform: rotate(0.6deg) translateY(-4px);
}
.photo-frame:hover img {
  transform: scale(1.06);
}
/* 食品カットもセレクティブカラー(色は画像側に焼き込み済み)。
         .photo-frame--selective を使うため専用の例外クラスは不要 */
/* 説明文が短いブロック用の横長フレーム(左右の高さを揃える) */
.photo-frame--wide {
  aspect-ratio: 4/3;
}
/* 画像そのものを見せたい場合は切り取らず原寸比のまま表示する
         (1,200dpiの再現性など、画質が主張の中身になっているカット) */
.photo-frame--natural {
  aspect-ratio: auto;
}
.photo-frame--natural img {
  height: auto;
  object-fit: contain;
}
/* セレクティブカラー(刷り上がった色だけを残す)を画像側に焼き込み済み。
         共通のモノクロ処理を二重掛けすると効果が消えるため除外する */
.photo-frame--selective img {
  filter: contrast(1.03);
}

/* ICT: 自社で作ってきたものの一覧 */
.works-label {
  font-family: var(--font-en);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  color: var(--steel);
  margin: 1.8rem 0 0.9rem;
}
.works-label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--blue);
  vertical-align: middle;
  margin-right: 10px;
}
.ict-works {
  border-top: 1px solid var(--rule);
  margin: 0 0 1.4rem;
}
.ict-works li {
  border-bottom: 1px solid var(--rule);
  padding: 0.6rem 0;
  font-size: var(--fs-sm);
}

/* ICT: コードがそのままラベルを描く実演(写真の代わり) */
.code-label {
  margin: 0;
}
.code-label__code {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--blue);
  overflow-x: auto;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-2xs);
  line-height: 1.65;
  color: var(--steel);
  white-space: pre;
}
/* 台紙(セパレータ)の上に、シールが1枚貼ってある状態をつくる */
.code-label__render {
  border: 1px solid var(--rule);
  border-top: none;
  padding: 2.6rem 1.1rem;
  display: flex;
  justify-content: center;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(74, 90, 106, 0.05) 0 6px,
      transparent 6px 12px
    ),
    var(--paper-soft);
}
/* ↓ このスタイルは、上のコードブロックに表示している内容と同一。
         白フチ(型抜きの余白)は box-shadow の1本目で作っている */
.demo-label {
  display: inline-block;
  padding: 0.7em 1.2em;
  border-radius: 5px;
  background: #fff;
  color: #0054a6;
  box-shadow:
    0 0 0 5px #fff,
    0 4px 12px rgba(0, 40, 90, 0.22);
  transform: rotate(-1.5deg);
  font:
    700 0.8rem/1 "Helvetica Neue",
    Arial,
    sans-serif;
  letter-spacing: 0.14em;
}
.photo-frame-wrap {
  margin: 0;
}
.photo-caption {
  margin-top: 0.6rem;
  font-size: var(--fs-2xs);
  color: var(--steel);
  letter-spacing: 0.02em;
}
.hero-photo .photo-frame {
  aspect-ratio: 4/5;
}
.hero-photo .photo-frame img {
  object-position: center;
}
@media (min-width: 800px) {
  .hero .layout {
    grid-template-columns: 1fr 1.15fr;
  }
  .hero-photo {
    margin-top: -1.5rem;
    margin-right: clamp(-2.5rem, -3vw, -1.5rem);
  }
}

/* ghost typography numerals */
.ghost-num {
  font-family: var(--font-en);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(0, 84, 166, 0.23);
  pointer-events: none;
  user-select: none;
}

/*==================== HERO ====================*/
.hero {
  overflow: hidden;
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.hero .layout {
  position: relative;
  z-index: 1;
}
.hero-title {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.01em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1em 0.5em;
  margin-top: 0.25rem;
}
.hero-title span {
  white-space: nowrap;
}
/* ヒーローの入場シーケンス: 「貼って」「広がる、」「新戦略。」が角を支点に順に貼り付く。
         このページの主張そのものを動きにする。html.has-reveal-anim ゲート必須(JS無効時は静止で全可視) */
html.has-reveal-anim .hero .eyebrow,
html.has-reveal-anim .hero-title span,
html.has-reveal-anim .hero-lead,
html.has-reveal-anim .hero-cta,
html.has-reveal-anim .hero .trust-bar,
html.has-reveal-anim .hero-photo {
  opacity: 0;
  transition:
    opacity 0.55s cubic-bezier(0.3, 1.2, 0.4, 1),
    transform 0.55s cubic-bezier(0.3, 1.2, 0.4, 1);
}
html.has-reveal-anim .hero-title span {
  transform: translateY(26px) rotate(-2.6deg);
  transform-origin: left bottom;
}
html.has-reveal-anim .hero-title span:nth-child(2) {
  transform: translateY(24px) rotate(2.2deg);
  transform-origin: right bottom;
}
html.has-reveal-anim .hero-title span:nth-child(3) {
  transform: translateY(27px) rotate(-2.1deg);
}
html.has-reveal-anim .hero .eyebrow {
  transform: translateY(10px);
}
html.has-reveal-anim .hero-lead,
html.has-reveal-anim .hero-cta,
html.has-reveal-anim .hero .trust-bar {
  transform: translateY(14px);
}
html.has-reveal-anim .hero-photo {
  transform: translateY(26px) rotate(1.7deg);
  transform-origin: right bottom;
}
html.has-reveal-anim .hero.hero-stuck .eyebrow,
html.has-reveal-anim .hero.hero-stuck .hero-title span,
html.has-reveal-anim .hero.hero-stuck .hero-lead,
html.has-reveal-anim .hero.hero-stuck .hero-cta,
html.has-reveal-anim .hero.hero-stuck .trust-bar,
html.has-reveal-anim .hero.hero-stuck .hero-photo {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}
html.has-reveal-anim .hero.hero-stuck .eyebrow {
  transition-delay: 0.05s;
}
html.has-reveal-anim .hero.hero-stuck .hero-title span:nth-child(1) {
  transition-delay: 0.14s;
}
html.has-reveal-anim .hero.hero-stuck .hero-title span:nth-child(2) {
  transition-delay: 0.26s;
}
html.has-reveal-anim .hero.hero-stuck .hero-title span:nth-child(3) {
  transition-delay: 0.38s;
}
html.has-reveal-anim .hero.hero-stuck .hero-photo {
  transition-delay: 0.3s;
}
html.has-reveal-anim .hero.hero-stuck .hero-lead {
  transition-delay: 0.52s;
}
html.has-reveal-anim .hero.hero-stuck .hero-cta {
  transition-delay: 0.62s;
}
html.has-reveal-anim .hero.hero-stuck .trust-bar {
  transition-delay: 0.7s;
}
/* 意味の切れ目でだけ折り返させる。中では折らず、入らなければ要素ごと次行へ。
         white-space:nowrap と違い横溢れを起こさない */
.nobr {
  display: inline-block;
}
.hero-lead {
  font-size: 1rem;
  color: var(--steel);
  max-width: 52ch;
  margin-top: 1.5rem;
}
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  color: var(--steel);
}
.trust-bar .qr-mark {
  width: 12px;
  height: 12px;
}
.trust-bar span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-cta {
  margin-top: 2.5rem;
}

/*==================== ISSUES (2) : asymmetric zigzag list, no cards ====================*/
.issue-list {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
/* 課題を一瞥で見分けやすくするための対応。
         10px の青ヒゲ(::before)を廃し、課題ごとの識別アイコンに置換。
         本文も 0.95rem → 1.05rem に拡大し行間を広げる。 */
.issue-row {
  border-bottom: 1px solid var(--rule);
  padding: 1.15rem 0;
  display: flex;
  /* 折り返して2行になったとき、アイコンが行間中央に浮かないよう
           1行目の光学中心に揃える(モバイル幅では大半が2行になる) */
  align-items: flex-start;
  gap: 0.9rem;
}
/* 描線指定は <use> 側(=このCSS)で行う。<symbol> を <g> で囲んでも
         presentation属性はシャドウツリーへ継承されないため、黒塗りで描画される。
         fill/stroke/stroke-width は継承プロパティなので use から symbol 内へ届く。 */
.issue-icon {
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--blue);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.issue-row p {
  font-size: var(--fs-body);
  line-height: 1.6;
}
/* 課題は下の「7つの解決策」と対応する。装飾で終わらせず、
         それぞれ該当する解決策ページへの入口として機能させる。 */
.issue-link {
  color: inherit;
  text-decoration: none;
}
.issue-link:hover,
.issue-link:focus-visible {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
@media (max-width: 640px) {
  .issue-list {
    grid-template-columns: 1fr;
  }
}

/*==================== SOLUTIONS (3) : editorial rows, ghost numbers bleed to margin ====================*/
.sol-list {
  margin-top: 3.5rem;
}
.sol-row {
  position: relative;
  border-top: 1px solid var(--rule);
  padding: 1.9rem 0;
  display: flex;
  align-items: baseline;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.sol-row:nth-child(even) {
  flex-direction: row-reverse;
}
.sol-more {
  margin-top: 1rem;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.sol-row:last-child {
  border-bottom: 1px solid var(--rule);
}
/* 番号は所在を示す目印に過ぎないため縮小し、主役を解決策の見出しに戻す。 */
.sol-row .ghost-num {
  flex-shrink: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
}
.sol-body {
  max-width: 56ch;
}
@media (max-width: 700px) {
  .sol-row,
  .sol-row:nth-child(even) {
    flex-direction: column;
  }
  .sol-row .ghost-num {
    opacity: 0.5;
    font-size: 1.4rem;
  }
}
/* .sol-body p(詳細度0,1,1)が .sol-title(0,1,0)に勝つため、
         セレクタを .sol-body p.sol-title にしないと見出しサイズが効かない。
         これが「解決策のフォントが小さい」の直接原因だった。 */
.sol-body p.sol-title {
  font-size: clamp(1.3rem, 2.4vw, 1.55rem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0.7rem;
}
.sol-body p {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--ink-2);
}
.sol-body p.sol-note {
  font-size: var(--fs-xs);
  color: var(--steel);
  margin-top: 0.6rem;
  opacity: 0.85;
}
.sol-body .text-link {
  margin-top: 1rem;
}

/*==================== REASONS (4) : label / description rows, distinct pattern ====================*/
.reason-list {
  margin-top: 3rem;
}
.reason-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem 2rem;
  border-top: 1px solid var(--rule);
  padding: 1.6rem 0;
}
@media (min-width: 700px) {
  .reason-row {
    grid-template-columns: 0.9fr 2fr;
    align-items: baseline;
  }
}
.reason-row:last-child {
  border-bottom: 1px solid var(--rule);
}
.reason-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.15rem;
}
.reason-desc {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--ink-2);
}

/*==================== PARTNERSHIP (5) ====================*/
#partnership .layout {
  align-items: center;
}
.network-graphic {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--paper-soft);
}
.network-graphic svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/*==================== QUALITY (6) ====================*/
.quality-block {
  max-width: 70ch;
}
.quality-pull {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
  line-height: 1.6;
  border-left: 2px solid var(--blue);
  padding-left: 1.5rem;
  margin-block: 2rem;
  max-width: 36ch;
  margin-left: auto;
}

/*==================== PROOF (7) : even grid, numbers-first ====================*/
.stats-grid {
  display: grid;
  /* minmax(0,1fr): 中身の min-content でトラックが膨らみ横溢れするのを防ぐ */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 2rem;
  margin-top: 3.5rem;
}
.stat {
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}
@media (min-width: 700px) {
  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.stat-num {
  font-family: var(--font-en);
  font-weight: 800;
  line-height: 1;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
}
.stat-text {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.4;
}
.stat-label {
  font-size: var(--fs-xs);
  color: var(--steel);
  margin-top: 0.6rem;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.stat-label .qr-mark {
  width: 12px;
  height: 12px;
  margin-top: 0.25rem;
  flex-shrink: 0;
}

/*==================== BUSINESS AREAS (8) : stacked full-width rows, NOT a 3-card row ====================*/
.biz-row {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
}
.biz-row:last-child {
  border-bottom: 1px solid var(--rule);
}
.biz-index {
  font-family: var(--font-en);
  font-size: var(--fs-2xs);
  color: var(--blue);
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  display: block;
}
.biz-title {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.biz-desc {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 52ch;
}

/*==================== INSIGHTS (9) ====================*/
.insight-block {
  max-width: 60ch;
}
.hub-index {
  margin-top: 3.5rem;
  border-top: 1px solid var(--rule);
  max-width: 66rem;
}
.hub-item {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0 1.75rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.hub-count {
  font-family: var(--font-en);
  font-weight: 300;
  /* 2026-07-23: SOLUTIONSと同様、件数が見出しより目立つ状態を是正 */
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1;
  color: rgba(0, 84, 166, 0.34);
  text-align: right;
  white-space: nowrap;
}
.hub-count em {
  font-style: normal;
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  margin-left: 0.15em;
}
.hub-title {
  font-size: clamp(1.15rem, 2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
}
.hub-note {
  grid-column: 2;
  color: var(--ink-2);
  font-size: var(--fs-body);
  margin-top: 0.45rem;
  max-width: 56ch;
}
@media (min-width: 900px) {
  .hub-item {
    grid-template-columns: 5rem 14rem 1fr;
  }
  .hub-note {
    grid-column: 3;
    margin-top: 0;
    max-width: 52ch;
  }
}
@media (max-width: 560px) {
  .hub-item {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .hub-count {
    text-align: left;
    font-size: 1.5rem;
  }
}

/*==================== LATEST NEWS (9.5) ====================*/
.home-news-list {
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
  max-width: 56rem;
}
.home-news-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.home-news-date {
  flex: 0 0 auto;
  width: 7.5em;
  color: var(--steel);
  font-size: var(--fs-xs);
}
.home-news-category {
  flex: 0 0 auto;
  width: 9.5em;
  color: var(--steel);
  font-size: var(--fs-xs);
}
.home-news-title {
  flex: 1 1 260px;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.6;
}

/*==================== COMPANY / RECRUIT (10) ====================*/
.company-figure {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(3.5rem, 10vw, 7rem);
  color: rgba(0, 84, 166, 0.23);
  line-height: 1;
}
.company-figure-plus {
  font-size: 0.5em;
  vertical-align: 0.42em;
  margin-left: 0.04em;
}
.company-figure-note {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--steel);
  margin-top: 0.6rem;
}
.company-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin-top: 2.5rem;
}

/* 受賞・採択バッジ: バッジそのものを型抜きラベル(ダイカットシール)
         として作る。四隅を落とした抜き形状 + 内側のキスカット線(破線)が縁。
         面のメタリックブルーは「箔調は金だけでなく青も出せる」(デジハク)の
         実演であり、青の面塗り禁止の唯一の例外。この3点以外に青の面を
         増やさないこと。 */
.award-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* 高さを揃えず、1枚ずつのラベルとして置く */
  gap: 0.9rem;
  margin-top: 2.25rem;
}
.award-badge {
  position: relative;
  flex: 1 1 190px;
  max-width: 300px;
  padding: 0.85rem 1.05rem 0.8rem;
  /* ダイカット形状(角を斜めに落とす。角丸ではない) */
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 10px),
    0 10px
  );
  color: #fff;
  /* 金属反射帯: 濃紺→ブランドブルー→鋼青(最明部)→濃紺 + 斜めの
           静的ハイライト(白10%)。最明部 #256199 は白文字と 6.4:1、
           ハイライト重畳部でも 5.1:1 を確保(4.5:1 以上) */
  background-image:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0) 60%
    ),
    linear-gradient(
      115deg,
      rgba(0, 22, 46, 0) 62%,
      rgba(0, 22, 46, 0.28) 71%,
      rgba(0, 22, 46, 0) 82%
    ),
    linear-gradient(
      160deg,
      #00284f 0%,
      #004587 30%,
      #256199 47%,
      #0f579f 53%,
      #0054a6 70%,
      #002d5c 100%
    );
}
/* キスカット線: サイトのシグネチャーである型抜きラインを縁に引く */
.award-badge::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.42);
  pointer-events: none;
}
/* 箔スイープ: 貼られた直後に1回だけ走る(常時ループさせない)。
         .link-foil::after と同じ「箔が流れる」思想。静止時は透明 */
.award-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    transparent 38%,
    rgba(223, 236, 249, 0.38) 50%,
    transparent 62%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
}
.award-kicker {
  display: block;
  font-size: var(--fs-2xs);
  line-height: 1.55;
  letter-spacing: 0.02em;
}
.award-title {
  display: block;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.45;
  margin-top: 0.1rem;
}
.award-year {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  margin-top: 0.35rem;
}
.award-source {
  display: block;
  font-size: var(--fs-2xs);
  margin-top: 0.3rem;
}
.award-source a {
  color: #fff;
  text-underline-offset: 2px;
}
.award-source a:focus-visible {
  outline-color: #fff;
}
@media print {
  /* 印刷では背景が落ちるため、白文字のまま消えないように反転 */
  .award-badge {
    color: var(--ink);
    background-image: none;
    border: 1px solid #999;
    clip-path: none;
  }
  .award-badge::before {
    border-color: #999;
  }
  .award-source a {
    color: var(--ink);
  }
}

/*==================== FINAL CTA (11) ====================*/
.final-cta {
  background: var(--paper-soft);
}
.final-cta-inner {
  max-width: 52ch;
}
.final-cta .btn {
  margin-top: 2.25rem;
}

/* footer */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 3.5rem 2.5rem;
  font-size: 0.85rem;
  color: var(--steel);
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}
.footer-logo {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
  font-size: 1rem;
  margin-bottom: 1rem;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.footer-nav a {
  text-decoration: none;
}
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.78rem;
}
.footer-sns {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}
.footer-sns-label {
  margin: 0;
  color: var(--steel);
}
.footer-sns ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-sns a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.footer-sns svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  flex-shrink: 0;
}

@media print {
  .site-header {
    position: static;
    border-bottom: 1px solid #999;
  }
  .site-nav,
  .nav-toggle,
  .header-cta,
  .perf-divider,
  .footer-sns,
  .media-slot,
  .skip-link {
    display: none;
  }
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
  }
  body {
    font-size: 11pt;
    line-height: 1.6;
  }
  h2,
  h3 {
    break-after: avoid;
  }
}
/* ============================================================
         #hero だけに閉じたスコープ(候補ページ限定):
         3層シール剥がしヒーロー。全セレクタを #hero 配下に閉じ込め、
         index.html 本体の .hero / .lead / 共通トークン(:root, body, *)
         に一切干渉しない。カスタムプロパティも --pl- 接頭辞で独立させ、
         :root ではなく #hero に宣言する(サイト全体のトークンを上書きしない)。
         ============================================================ */
#hero {
  --pl-paper: #f9f9f8;
  --pl-ink: #1a1a1a;
  --pl-blue: #0054a6;
  --pl-pad: clamp(16px, 3vw, 48px);
  /* v4b: H1自体は#7の対象列挙(レイヤー見出し/補足/タグ/ラベル/desk/
           着地)に含まれず、実測で+18%相当にするとpl-l1が意図した2行
           (「貼って広がる、」/「新戦略。」)から3行に割れて崩れたため、
           「H1は維持」を優先しv3のサイズをそのまま据え置く(副見出しは
           --pl-sub連動で+18%適用済み) */
  --pl-h1: clamp(2.9rem, 11vw, 9.6rem);
  /* v4b: 文字を全体+18〜22%拡大する対応。
           --pl-sub/--pl-tiny/--pl-meta-fs は層ラベル・補足・タグ・
           デスク文・着地(pl-gate)まで広く共有されているため、この3変数を
           約1.2倍するだけで対象範囲全体に一括反映される(個別上書き不要)。 */
  --pl-sub: clamp(1.05rem, 0.31vw + 0.93rem, 1.275rem);
  --pl-tiny: clamp(0.9rem, 0.38vw + 0.7rem, 0.984rem);
  --pl-meta-fs: clamp(0.79rem, 0.26vw + 0.67rem, 0.9rem);
  --pl-rule: rgba(0, 84, 166, 0.22);
  --pl-rule-soft: rgba(0, 84, 166, 0.13);
  --pl-ink-soft: rgba(26, 26, 26, 0.52);
  --pl-label: #fcfcfb;
  --pl-liner-bg: #f7f7f5;
  --pl-edge: rgba(26, 26, 26, 0.13);
  color: var(--pl-ink);
  font-family:
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", YuGothic,
    sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 2026-07-25: 背景レイヤー(.pl-bgset)の位置基準。静止版では .pl-hero が
           非positionedのため、絶対配置の背景はこの #hero を基準に張り付く。 */
  position: relative;
}
/* ===== めくり連動の背景写真 =====
         「TOPだけの静止背景は味気ない」を受け、めくりの各段に写真を
         クロスフェードで同期させる(作る→貼る→効く→伝わる)。
         - 3枚を .pl-hero(sticky=めくり中も固定)の内側に重ね、JS が進捗 p で
           各層の opacity を出し入れする(下の frame() 参照)。
         - z-index:-1: .pl-hero は sticky=stacking context のため、-1 でも
           ページ背後には回らず「.pl-hero の自コンテンツの背後」に収まる。
         - grayscale は各層だけに掛かり、カード・青アクセントには影響しない。
         - 着地(p>0.9)手前で全層 0 に戻し、メッセージは無地の台紙で見せる。 */
#hero .pl-bgset {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
#hero .pl-bg {
  position: absolute;
  inset: 0;
  background-position: center 40%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.05) brightness(1.03);
  opacity: 0;
  will-change: opacity;
}
#hero .pl-bg--a {
  /* 01 意匠 = 作る(印刷機) */
  background-image: url("/assets/monodukuri-press.jpg");
  background-image: -webkit-image-set(
    url("/assets/monodukuri-press.webp") type("image/webp") 1x,
    url("/assets/monodukuri-press.jpg") type("image/jpeg") 1x
  );
  background-image: image-set(
    url("/assets/monodukuri-press.webp") type("image/webp") 1x,
    url("/assets/monodukuri-press.jpg") type("image/jpeg") 1x
  );
  background-position: center 40%;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
}
#hero .pl-bg--b {
  /* 02 粘着 = 貼る/仕上げ(作業台の手元)。暗い写真のため明るめに補正 */
  background-image: url("/assets/decoration-die-plate.jpg");
  background-image: -webkit-image-set(
    url("/assets/decoration-die-plate.webp") type("image/webp") 1x,
    url("/assets/decoration-die-plate.jpg") type("image/jpeg") 1x
  );
  background-image: image-set(
    url("/assets/decoration-die-plate.webp") type("image/webp") 1x,
    url("/assets/decoration-die-plate.jpg") type("image/jpeg") 1x
  );
  background-position: center 55%;
  filter: grayscale(1) contrast(1.02) brightness(1.35);
}
#hero .pl-bg--c {
  /* 03 剥離 = 効く/素材(フィルムロール) */
  background-image: url("/assets/material-film.jpg");
  background-image: -webkit-image-set(
    url("/assets/material-film.webp") type("image/webp") 1x,
    url("/assets/material-film.jpg") type("image/jpeg") 1x
  );
  background-image: image-set(
    url("/assets/material-film.webp") type("image/webp") 1x,
    url("/assets/material-film.jpg") type("image/jpeg") 1x
  );
  background-position: center 40%;
}
/* 静止版(JS無効/prefers-reduced-motion)ではめくりが進まないため、
         最初の1枚(作る)だけを静的に見せて第一印象を確保する。 */
html:not(.motion) #hero .pl-bg--a {
  opacity: 0.23;
}
#hero,
#hero * {
  box-sizing: border-box;
}
#hero .pl-stack,
#hero .pl-lid,
#hero .pl-h1,
#hero .pl-face-do,
#hero .pl-gs,
#hero .pl-lead,
#hero .pl-desk,
#hero .pl-gate,
#hero .pl-gate__inner,
#hero .pl-gate__rows,
#hero .pl-gate__row,
#hero .pl-gate__body,
#hero .pl-gate__cta,
#hero .pl-bar,
#hero .pl-liner__cap,
#hero .pl-liner__hint,
#hero .pl-peel-hint,
#hero .pl-guard-sub,
#hero h1,
#hero h2,
#hero p,
#hero div,
#hero span,
#hero a {
  margin: 0;
  padding: 0;
}
#hero .pl-num {
  font-family: Georgia, "Times New Roman", serif;
}

/* ===== 共通: ヒーロー本体(実ヘッダー直下。二段目バーは撤去し
         白い机+シールから始める。常時可視CTAは実ヘッダー側に一本化) ===== */
#hero .pl-hero {
  min-height: 100vh;
  padding: var(--pl-pad);
  display: flex;
  flex-direction: column;
}
/* ===== 共通: 層ラベル(01/02/03 + 射程 + 素材) ===== */
#hero .pl-lid {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  font-size: var(--pl-tiny);
  letter-spacing: 0.06em;
}
#hero .pl-lid__no {
  color: var(--pl-blue);
  font-size: var(--pl-meta-fs);
  letter-spacing: 0.1em;
}
#hero .pl-lid__scope {
  font-weight: 600;
  font-size: var(--pl-sub);
  letter-spacing: 0.04em;
  font-feature-settings: "palt" 1;
}
#hero .pl-lid__mat {
  color: var(--pl-ink-soft);
  font-size: var(--pl-meta-fs);
  letter-spacing: 0.16em;
}

#hero .pl-h1 {
  font-size: var(--pl-h1);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  font-feature-settings: "palt" 1;
}
#hero .pl-h1 .pl-l1,
#hero .pl-h1 .pl-l2 {
  display: block;
}
/* 青とboldはH1の句読点から外し、本文と同じ
         インク色・font-weight:300に統一する。青はヒーロー内の
         「シール・フィルム印刷ソリューション」の一行だけに集約する
         (.pl-dot は #hero の既定色/太さをそのまま継承させるため
         個別の上書きを持たない) */
/* H1+副見出しはカード内で中央揃え */
#hero .pl-headline {
  text-align: center;
}
#hero .pl-h1,
#hero .pl-subhead {
  margin-inline: auto;
}

#hero .pl-face-do__t {
  font-size: var(--pl-tiny);
  letter-spacing: 0.05em;
  line-height: 1.5;
}
#hero .pl-face-do__t b {
  font-weight: 600;
}
/* v4b: 02(糊面)の補足文。見出しとタグの間に挟む1文 */
#hero .pl-face-do__note {
  margin-top: 0.5em;
  font-size: var(--pl-tiny);
  color: var(--pl-ink-soft);
  line-height: 1.6;
  letter-spacing: 0.03em;
}
#hero .pl-gs {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  /* v4b修正: 項目間の青いライン(border-top)を撤去。余白のみで区切る */
  padding: 0.36em 0;
  font-size: var(--pl-tiny);
  letter-spacing: 0.05em;
}
/* 03(守る)の3ラベルを主役として青+大きめに。
         右側の補足(.pl-gs span)・番号(::before)・区切り罫はニュートラルのまま */
#hero .pl-gs b {
  color: var(--pl-blue);
  font-weight: 700;
  font-size: 1.25em;
}
#hero .pl-gs span {
  color: var(--pl-ink-soft);
  font-size: var(--pl-meta-fs);
  letter-spacing: 0.09em;
}
/* v4b3修正③: 03(守る)の見出し+3項目を1ブロックとして扱うための
         ラッパー。既定は display:contents にして子要素をそのまま
         親グリッドの直接の子として振る舞わせ、静止版/02のレイアウトには
         一切影響しない。motion版の #hero .pl-guard 内でのみ
         flex コンテナへ切り替えて縦方向の中央配置に使う */
#hero .pl-guard-text {
  display: contents;
}

#hero .pl-lead {
  font-size: clamp(1.125rem, 0.18vw + 1.08rem, 1.2rem);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: 0.05em;
}
#hero .pl-lead .pl-bar {
  display: inline-block;
  width: 2.4em;
  height: 1px;
  background: var(--pl-blue);
  vertical-align: middle;
  margin-right: 0.85em;
  transform: translateY(-0.14em);
}

/* モーション専用要素は静止版では出さない
         (v4b: pl-footprint は要素ごと廃止) */
#hero .pl-liner,
#hero .pl-peel-hint,
#hero .pl-shadow,
#hero .pl-edge3d,
#hero .pl-space {
  display: none;
}
/* 静止版(JS無効/reduced-motion)では実サンプル面はモーション演出の
         一部なので出さない。静止版の完成状態は既存の実サムネ扉(pl-gate)
         で「実サンプル」を担保する */
html:not(.motion) #hero .pl-sample {
  display: none;
}

/* ============================================================
         静止版(既定): 積層段組み。JS無効/reduced-motionの完成形
         ============================================================ */
html:not(.motion) #hero .pl-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  padding-left: clamp(26px, 3.4vw, 46px);
}
html:not(.motion) #hero .pl-stack::before {
  content: "";
  position: absolute;
  left: clamp(2px, 0.6vw, 9px);
  top: 0;
  bottom: 0;
  width: clamp(16px, 1.7vw, 20px);
  border-left: 1px solid var(--pl-rule);
  border-right: 1px solid var(--pl-rule);
  background: repeating-linear-gradient(
    90deg,
    var(--pl-rule) 0,
    var(--pl-rule) 1px,
    transparent 1px,
    transparent 4px
  );
}
html:not(.motion) #hero .pl-sheet {
  display: contents;
}

/* 01 ブランド(基材・表)
         v4b: 右側の pl-aside(シール・タグ)を廃止。
         H1が広く使えるよう1カラムのレイアウトに寄せる */
html:not(.motion) #hero .pl-brand {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  padding-top: clamp(12px, 2vh, 26px);
  padding-bottom: clamp(12px, 2vh, 26px);
}
html:not(.motion) #hero .pl-brand .pl-lid {
  grid-column: 1 / -1;
  grid-row: 1;
}
html:not(.motion) #hero .pl-headline {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  min-width: 0;
}

/* 02 機能(糊面) / 03 守る(セパ裏): 下に潜る薄いシート */
html:not(.motion) #hero .pl-func,
html:not(.motion) #hero .pl-guard {
  flex: 0 0 auto;
  border-top: 1px solid var(--pl-rule);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(16px, 2.6vw, 40px);
  padding: clamp(11px, 1.9vh, 22px) clamp(14px, 2vw, 26px)
    clamp(11px, 1.9vh, 22px) 0;
}
html:not(.motion) #hero .pl-func {
  margin-left: clamp(20px, 2.8vw, 48px);
}
html:not(.motion) #hero .pl-guard {
  margin-left: clamp(40px, 5.6vw, 96px);
}
html:not(.motion) #hero .pl-face-do {
  text-align: right;
}
html:not(.motion) #hero .pl-guard-sub {
  grid-column: 1 / -1;
  margin-top: 0.7em;
  padding-top: 0.5em;
  /* v4b3修正②: 見出し直下の罫線・番号に紛れ込んでいたブランドブルーを
           撤去しニュートラルへ。3項目まわりに青は使わない */
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
/* v4b2修正④: motion版と同じく左揃え+罫線+番号の編集的リストに統一 */
html:not(.motion) #hero .pl-gs {
  justify-content: flex-start;
  border-bottom: 1px solid var(--rule);
  padding: 0.4em 0;
}
html:not(.motion) #hero .pl-gs::before {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: var(--pl-ink-soft);
}
html:not(.motion) #hero .pl-gs:nth-child(1)::before {
  content: "01";
}
html:not(.motion) #hero .pl-gs:nth-child(2)::before {
  content: "02";
}
html:not(.motion) #hero .pl-gs:nth-child(3)::before {
  content: "03";
}

/* 机(リード行): 02と03の間の一文 */
html:not(.motion) #hero .pl-desk {
  border-top: 1px solid var(--pl-rule);
  margin-left: clamp(20px, 2.8vw, 48px);
  padding: clamp(12px, 2vh, 24px) 0;
}

@media (max-width: 900px) {
  html:not(.motion) #hero .pl-stack {
    justify-content: flex-start;
  }
  html:not(.motion) #hero .pl-brand {
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: clamp(10px, 1.6vh, 20px);
    padding-top: clamp(6px, 1vh, 12px);
    padding-bottom: clamp(18px, 3vh, 34px);
  }
  html:not(.motion) #hero .pl-headline {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 520px) {
  html:not(.motion) #hero .pl-func,
  html:not(.motion) #hero .pl-guard {
    grid-template-columns: 1fr;
  }
  html:not(.motion) #hero .pl-face-do {
    text-align: left;
    margin-top: 0.5em;
  }
}

/* 静止でも入場だけそっと(motion可・JS無効時のみ効く。reduceでは動かない) */
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion) #hero .pl-brand,
  html:not(.motion) #hero .pl-func,
  html:not(.motion) #hero .pl-desk,
  html:not(.motion) #hero .pl-guard {
    animation: pl-rise 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  html:not(.motion) #hero .pl-func {
    animation-delay: 0.22s;
  }
  html:not(.motion) #hero .pl-desk {
    animation-delay: 0.28s;
  }
  html:not(.motion) #hero .pl-guard {
    animation-delay: 0.34s;
  }
  @keyframes pl-rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* ============================================================
         モーション版: スクロールで剥がれる(実ヘッダーの直下でsticky)
         ============================================================ */
html.motion body {
  overflow-x: hidden;
}
html.motion #hero .pl-space {
  display: block;
  /* v2: 体感2.2画面へ短縮(旧360vh)。区間イージングの各セグメント割合は
           据え置きなので、層ごとの「読ませる小静止」も比率のまま短くなる */
  height: 220vh;
}
/* sticky の基準は実ヘッダー高さ(index.html の scroll-padding-top と同値)。
         top:0 にすると position:sticky の site-header と競合し、
         ヒーロー内メタ帯が実ヘッダーの裏に隠れてクリック不能になるため回避する */
html.motion #hero .pl-hero {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  min-height: 0;
  overflow: hidden;
}
@media (min-width: 700px) {
  html.motion #hero .pl-hero {
    top: 129px;
    height: calc(100vh - 129px);
  }
}
@media (min-width: 800px) {
  html.motion #hero .pl-hero {
    top: 81px;
    height: calc(100vh - 81px);
  }
}
html.motion #hero .pl-stack {
  flex: 1;
  position: relative;
  min-height: 0;
  perspective: 1600px;
  perspective-origin: 50% 50%;
}

html.motion #hero .pl-sheet,
html.motion #hero .pl-desk {
  position: absolute;
  /* v4b: 02が見切れる問題への対策で31%→40%へ拡張し、
           文字拡大後も縦の余白を確保する */
  top: 30%;
  bottom: 30%;
  left: max(0px, calc(50% - 430px));
  right: max(0px, calc(50% - 430px));
  pointer-events: none;
}
html.motion #hero .pl-sheet {
  transform-style: preserve-3d;
}
/* v4b: 左下から剥がす動きにするため、base の支点(transform-origin)を
         左下角に置き、対角(右上)がもっとも大きく持ち上がる=左下から
         斜めにねじれて剥がれる手触りになる。セパは対角側(右上)を支点にして
         層ごとに角を振り、単調な繰り返しを避ける */
html.motion #hero .pl-sheet--base {
  transform-origin: 0% 100%;
  z-index: 3;
}
html.motion #hero .pl-sheet--sep {
  transform-origin: 100% 0%;
  z-index: 2;
}
/* v4b: 台紙を面の後ろに見せるため、静止時、セパの
         箱を base よりひとまわり大きくして数px〜十数pxのぞかせる
         (台紙に貼られたシールを剥がす状態)。剥離が進むほど base が
         退場し、セパの本体(台紙の意匠面)がそのまま現れる */
html.motion #hero .pl-sheet--sep {
  --pl-liner-peek: clamp(6px, 1.1vw, 14px);
  top: calc(30% - var(--pl-liner-peek));
  bottom: calc(30% - var(--pl-liner-peek));
  left: calc(max(0px, calc(50% - 430px)) - var(--pl-liner-peek));
  right: calc(max(0px, calc(50% - 430px)) - var(--pl-liner-peek));
}
/* 基材シート(01/02)はシールらしく角丸に。台紙(セパ)は角のまま
         (シール=角丸/剥離紙=角、の対比で「剥がす」構造を伝える) */
html.motion #hero .pl-sheet--base .pl-face {
  /* v4b修正①: シールらしい丸みへ12px→20pxに拡大(台紙=角のままと対比) */
  border-radius: 20px;
}
/* めくれ縁の軽いカール: 支点の対角にある角(=最も大きく持ち上がる角)
         にだけ丸みを持たせ、動きのピークで最大、静止時は基材の角丸(20px)
         に戻る。台紙(セパ)は角のまま0から持ち上がる */
html.motion #hero .pl-sheet--base .pl-face {
  border-top-right-radius: calc(20px + var(--pl-curl, 0px));
}
html.motion #hero .pl-sheet--sep .pl-face {
  border-bottom-left-radius: var(--pl-curl-s, 0px);
}

html.motion #hero .pl-face {
  position: absolute;
  inset: 0;
  opacity: var(--fA, 1);
  background: var(--pl-label);
  border: 1px solid var(--pl-edge);
  padding: clamp(12px, 2vh, 20px) clamp(14px, 2.5vw, 30px);
  overflow: hidden;
}
html.motion #hero .pl-face--front {
  transform: translateZ(1.5px);
}
html.motion #hero .pl-face--back {
  transform: rotateX(180deg) translateZ(1.5px);
}
html.motion #hero .pl-edge3d {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
  opacity: var(--fA, 1);
  background: linear-gradient(to bottom, #eceae4, #cfccc3);
}
html.motion #hero .pl-edge3d--top {
  top: 0;
  transform-origin: 50% 0;
  transform: translateZ(1.5px) rotateX(-90deg);
}
html.motion #hero .pl-edge3d--bottom {
  bottom: 0;
  transform-origin: 50% 100%;
  transform: translateZ(1.5px) rotateX(90deg);
}
html.motion #hero .pl-sheet--sep .pl-edge3d {
  background: linear-gradient(to bottom, #e9e7e1, #ccc9c0);
}
/* v4b修正②: 基材(角丸20px)の小口バーが角丸の外に飛び出していた不具合。
         小口(pl-edge3d)は面と同じ幅の矩形(角なし)のため、角丸の面より
         外側にはみ出て見えていた。面と同じ半径を小口にも与えて輪郭を揃える。
         台紙(セパ)は面が角のままなので変更不要(既定の半径0のまま) */
html.motion #hero .pl-sheet--base .pl-edge3d--top {
  border-top-left-radius: 20px;
  border-top-right-radius: calc(20px + var(--pl-curl, 0px));
}
html.motion #hero .pl-sheet--base .pl-edge3d--bottom {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
html.motion #hero .pl-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(26, 26, 26, 0.07),
    rgba(26, 26, 26, 0) 55%
  );
  opacity: var(--shA, 0);
}
html.motion #hero .pl-sheet--sep .pl-face::after {
  background: linear-gradient(
    to top,
    rgba(26, 26, 26, 0.07),
    rgba(26, 26, 26, 0) 55%
  );
}

/* --- 基材おもて: 01 ブランド ---
         v4b: 右側の pl-aside(シール・タグ)を廃止。
         H1が広く使えるよう1カラムのレイアウトに寄せる */
html.motion #hero .pl-brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}
html.motion #hero .pl-brand .pl-lid {
  grid-column: 1 / -1;
}
html.motion #hero .pl-headline {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  min-width: 0;
}
html.motion #hero .pl-h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.7rem);
  line-height: 1.06;
}
/* SCROLL誘導: カード(pl-face)の外、.pl-stack 下部の余白に置く。
         薄い基調色 + ゆるいパルスのみで案内し、押しつけない */
html.motion #hero .pl-peel-hint {
  display: block;
  position: absolute;
  /* 右下だと広い画面で視線の中心から外れ気づかれないため、
           スクロール誘導の定石どおり下部中央へ。translateX での中央寄せは
           JS が --hintA(opacity)しか触らないため transform 競合はない。 */
  left: 50%;
  transform: translateX(-50%);
  /* v4b: 画面高が小さいとカード下の余白が消えて隠れてしまうため、
           下端から十分に持ち上げる(短い縦幅でも視認できる位置) */
  bottom: clamp(26px, 6vh, 72px);
  font-size: var(--pl-meta-fs);
  letter-spacing: 0.18em;
  color: var(--pl-ink-soft);
  text-align: center;
  white-space: nowrap;
  opacity: var(--hintA, 1);
}
html.motion #hero .pl-peel-hint b {
  font-weight: 600;
  color: var(--pl-ink-soft);
  letter-spacing: 0.22em;
}
/* パルス(呼吸): 薄く見えたり消えたりを穏やかに繰り返す。
         外側(.pl-peel-hint)の opacity はJSが --hintA でスクロール量に応じて
         全体を消す役割、内側(.pl-peel-hint__pulse)は待機中の明滅専用に
         分離し、互いの opacity 計算が競合しないようにする */
html.motion #hero .pl-peel-hint__pulse {
  display: inline-block;
  animation: pl-hint-pulse 2.2s ease-in-out infinite;
}
@keyframes pl-hint-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.motion #hero .pl-peel-hint__pulse {
    animation: none;
    opacity: 0.6;
  }
}

/* --- 基材うら: 02 機能(糊面) ---
         v3: CSSハッチをやめ、実際の印刷サンプル(バーコード+一括表示)を
         右側に実物の面として見せる。テキストは画像に重ねず左列に独立。 */
html.motion #hero .pl-func {
  display: grid;
  grid-template-columns: 1fr minmax(112px, 36%);
  grid-template-rows: auto 1fr;
  column-gap: clamp(16px, 3vw, 34px);
  /* v4b2修正①: 「シルバーが安っぽい」への対応。単一グラデーション
           ではなくブラッシュド・メタル(ネーマー裏地/アルミ銘板裏)を多層
           合成する。上から順に (a)幅広スペキュラ1本 (b)1-2px周期の異方性
           ヘアライン (c)6段の反射バンド(単調ランプにしない)。彩度は
           上げず寒色ニュートラルに統一。最暗帯 #b3bac0 でも #1a1a1a 文字と
           約7.9:1(4.5:1以上)を確保 */
  background-image:
    linear-gradient(
      112deg,
      transparent 22%,
      rgba(255, 255, 255, 0.5) 44%,
      rgba(255, 255, 255, 0.16) 50%,
      transparent 66%
    ),
    repeating-linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 1px,
      rgba(18, 24, 30, 0.035) 1px,
      rgba(18, 24, 30, 0.035) 2px
    ),
    linear-gradient(
      155deg,
      #eef1f3 0%,
      #d7dbde 11%,
      #f4f6f7 22%,
      #c7ccd1 34%,
      #e6e9eb 45%,
      #b3bac0 58%,
      #ecefef 70%,
      #ccd1d5 83%,
      #e3e6e8 100%
    );
}
html.motion #hero .pl-func .pl-lid {
  grid-column: 1 / -1;
}
html.motion #hero .pl-func .pl-face-do {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: start;
  text-align: left;
}
html.motion #hero .pl-func .pl-face-do__t {
  font-size: clamp(1.26rem, 2.4vw, 1.92rem);
  letter-spacing: 0.06em;
}
html.motion #hero .pl-func .pl-face-do__note {
  max-width: 22em;
}
/* 実サンプルの面: めくって最初に出会う「本物」 */
html.motion #hero .pl-sample {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  align-self: stretch;
  overflow: hidden;
  /* v4b2修正②: --pl-rule 自体がブランドブルーの透過色で「青い枠」に
           見えていたため border を完全撤去(枠なし)。
           v4b3修正①: v4b2のマスクは楕円の半径78%位置で完全透明に達し、
           そこから箱の端まで(残り22%)が同じ透明値のまま続いていたため、
           拡大すると「透明が始まる位置」が直線的な切り口として見えていた。
           closest-side で楕円の縁を箱の四辺の中点に
           正確に届くサイズへ広げ、不透明域を中心付近(28%)に絞った上で
           複数の中間停止点でゆっくり透明へ渡す。被写体の中心は視認性を
           保ったまま、縁だけを面に完全に溶け込ませる
           (拡大クロップで直線の切り口が1本も見えないことが合格基準) */
  -webkit-mask-image: radial-gradient(
    ellipse closest-side at center,
    #000 28%,
    rgba(0, 0, 0, 0.68) 52%,
    rgba(0, 0, 0, 0.28) 78%,
    transparent 98%
  );
  mask-image: radial-gradient(
    ellipse closest-side at center,
    #000 28%,
    rgba(0, 0, 0, 0.68) 52%,
    rgba(0, 0, 0, 0.28) 78%,
    transparent 98%
  );
}
html.motion #hero .pl-sample img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.08) contrast(1.05);
}
/* v4b修正⑦: 「濡れた糊」の質感(水滴ハイライト)を高く
         評価する声を受け、写真(v4c_glue.jpg)を復活。ただし色調はシルバー
         基調へ補正し「ネーマー(銘板ラベル)裏地のシルバー」の色味へ寄せる。
         脱色+寒色オーバーレイ(soft-light)で銀寄りにしつつ、艶・水滴の
         ハイライト形状=糊の質感は残す配合を実描画で選定。金属階調の
         CSSグラデーションは写真が完全に覆い隠すため撤去し、微細グレインの
         みシルバーの粒立ちとして残す */
html.motion #hero .pl-func .pl-sample {
  background: #aeb4b9;
}
html.motion #hero .pl-func .pl-sample::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.12;
  mix-blend-mode: multiply;
  background-size: 160px 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23m)'/%3E%3C/svg%3E");
}
html.motion #hero .pl-func .pl-sample::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  background: linear-gradient(
    152deg,
    rgba(220, 228, 236, 0.9) 0%,
    rgba(150, 165, 182, 0.35) 48%,
    rgba(230, 236, 242, 0.85) 100%
  );
}
html.motion #hero .pl-func .pl-sample img {
  filter: grayscale(0.94) contrast(1.1) brightness(1.05) saturate(1.05);
}
@media (max-width: 820px) {
  html.motion #hero .pl-func {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }
  html.motion #hero .pl-func .pl-sample {
    grid-column: 1;
    grid-row: 2;
    height: clamp(50px, 11vh, 84px);
  }
  html.motion #hero .pl-func .pl-face-do {
    grid-row: 3;
  }
}

/* --- セパおもて: 剥離紙。写真のぼかしは撤去し、--pl-liner-bg の色面
         そのものを主役にする。紙繊維のグレイン(SVGノイズ)とシリコン
         塗工面の方向性のある極薄い艶/グリッドのみを重ね、実物の
         剥離紙の質感に寄せる(3色バリエーションの識別性を優先) --- */
html.motion #hero .pl-liner {
  display: block;
  /* position:absolute / overflow:hidden は共通の .pl-face から継承
           (ここで position:relative を再宣言すると inset:0 が無効化され
           シートいっぱいに広がらなくなるため上書きしない) */
  background: var(--pl-liner-bg);
}
html.motion #hero .pl-liner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      4deg,
      rgba(255, 255, 255, 0.06) 0px,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px,
      transparent 5px
    ),
    repeating-linear-gradient(
      94deg,
      rgba(26, 26, 26, 0.025) 0px,
      rgba(26, 26, 26, 0.025) 1px,
      transparent 1px,
      transparent 9px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='pn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pn)'/%3E%3C/svg%3E");
  background-size:
    auto,
    auto,
    160px 160px;
}
/* v4b: 「剥離［オモテ面］」は台紙であることを示す小さな注記に留め、
         色を抑えて目立たせない(主役はセパの意匠面そのもの) */
html.motion #hero .pl-liner__cap {
  position: absolute;
  top: clamp(10px, 1.6vh, 16px);
  left: clamp(14px, 2.5vw, 30px);
  font-size: var(--pl-meta-fs);
  letter-spacing: 0.2em;
  color: var(--pl-ink-soft);
  background: rgba(247, 247, 245, 0.6);
  padding: 0.25em 0.6em;
}
html.motion #hero .pl-liner__hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 0.3em;
  /* 主文・補足とも10%拡大 */
  font-size: calc(var(--pl-tiny) * 1.1);
  letter-spacing: 0.14em;
  color: var(--pl-ink);
  text-align: center;
}
html.motion #hero .pl-liner__hint span {
  background: rgba(247, 247, 245, 0.85);
  padding: 0.3em 0.75em;
}
html.motion #hero .pl-liner__hint-sub {
  font-size: calc(var(--pl-tiny) * 0.88);
  color: var(--pl-ink-soft);
  letter-spacing: 0.1em;
}

/* --- セパうら: 03 守る ---
         v4b2修正④: 「配置がまだおかしい」の評価を受け0ベースで再構成。
         image=col1 / text=col2 の列構成(02との左右反転で交互リズムを
         維持)は残すが、内部を右揃えのラガーから「全て左揃え」の一本の
         縦の流れ(見出し→罫線→3項目)に作り直す。
         v4b3修正③: 「3項目の下に余白が間延び」への対応。原因は
         grid-template-rows の3行目(1fr)がカード全高ぶん伸び、テキスト側が
         align-self:start で行の先頭に張り付いたまま下方に空白だけが
         残っていたこと。内部で2案比較した:
         (a)02(.pl-func)と同じく1本の1frトラックに「画像=stretch(縦いっぱい)
            /見出し+3項目=1ブロックとしてalign-self:center」を同居させる案
         (b)行を auto×3 に戻し .pl-guard 自体に align-content:center を掛け、
            画像・テキストの塊ごと上下へ均等に余白配分する案
         (b)は画像が内容量なりの高さにしかならず面を持て余す一方、(a)は
         02と同一パターンで実装済み・かつ空白批判が出ていない実績があり、
         画像も縁いっぱいまで使えるため(a)を採用。見出し+3項目は新設
         .pl-guard-text でラップして1ブロック化(文言は無変更)。
         3項目は番号(01/02/03、既存レイヤー番号と同じ Georgia)+ 罫線区切りの
         編集的リストにし、右端のばらつきを解消して「一組」として読ませる。
         v4b3修正②: 番号色・区切り罫にブランドブルーが再混入していたため
         撤去し、ニュートラル(--rule/--pl-ink-soft)に統一 */
html.motion #hero .pl-guard {
  display: grid;
  grid-template-columns: minmax(96px, 32%) 1fr;
  grid-template-rows: auto 1fr;
  column-gap: clamp(20px, 3.4vw, 40px);
  align-items: start;
}
html.motion #hero .pl-guard .pl-lid {
  grid-column: 1 / -1;
  grid-row: 1;
}
html.motion #hero .pl-guard .pl-sample {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  /* v4b4修正①: 02(.pl-func)と共有していた楕円マスク(radial-gradient)
           は「丸いブロブ」に見えるため、02は変更せず、
           03(.pl-guard)だけをここで上書きし、矩形の輪郭は保ったまま
           四辺のみを幅広くフェードさせる方式に変更する。
           4枚のlinear-gradientを mask-composite: intersect で掛け合わせ、
           各辺方向で「内側は不透明・外周(各辺18%幅)は透明」にする。
           直線的な切り口を作らないよう、透明開始点までのグラデーションを
           4段階(0/45/80/100%)で緩やかに渡す。輪郭自体は常に四角のまま。 */
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.35) 7%,
      rgba(0, 0, 0, 0.86) 14%,
      #000 18%,
      #000 82%,
      rgba(0, 0, 0, 0.86) 86%,
      rgba(0, 0, 0, 0.35) 93%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.35) 7%,
      rgba(0, 0, 0, 0.86) 14%,
      #000 18%,
      #000 82%,
      rgba(0, 0, 0, 0.86) 86%,
      rgba(0, 0, 0, 0.35) 93%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.35) 7%,
      rgba(0, 0, 0, 0.86) 14%,
      #000 18%,
      #000 82%,
      rgba(0, 0, 0, 0.86) 86%,
      rgba(0, 0, 0, 0.35) 93%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.35) 7%,
      rgba(0, 0, 0, 0.86) 14%,
      #000 18%,
      #000 82%,
      rgba(0, 0, 0, 0.86) 86%,
      rgba(0, 0, 0, 0.35) 93%,
      transparent 100%
    );
  mask-composite: intersect;
}
html.motion #hero .pl-guard .pl-sample img {
  object-position: 60% 55%;
  /* v4b修正: サンプル写真(gate-guard.jpg)を白黒に */
  /* v4b4修正②: フェードが強く被写体が淡く見えるため濃度を約10%上げる。
           grayscale(1)は維持しつつ contrast/brightness を+10%相当に補正し、
           文字(見出し・番号)には触れないため可読性は変わらない */
  filter: grayscale(1) contrast(1.16) brightness(1.1);
}
html.motion #hero .pl-guard .pl-guard-text {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
html.motion #hero .pl-guard .pl-face-do__t {
  text-align: left;
  /* v4b修正: 見出しを一段〜二段大きく */
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
}
html.motion #hero .pl-guard-sub {
  display: flex;
  flex-direction: column;
  margin-top: clamp(10px, 1.8vh, 18px);
  border-top: 1px solid var(--rule);
}
html.motion #hero .pl-guard .pl-gs {
  justify-content: flex-start;
  border-bottom: 1px solid var(--rule);
  padding: 0.6em 0;
  margin: 0;
}
html.motion #hero .pl-guard .pl-gs::before {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: var(--pl-ink-soft);
  letter-spacing: 0;
}
html.motion #hero .pl-guard .pl-gs:nth-child(1)::before {
  content: "01";
}
html.motion #hero .pl-guard .pl-gs:nth-child(2)::before {
  content: "02";
}
html.motion #hero .pl-guard .pl-gs:nth-child(3)::before {
  content: "03";
}
@media (max-width: 820px) {
  html.motion #hero .pl-guard {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  html.motion #hero .pl-guard .pl-sample {
    grid-column: 1;
    grid-row: 2;
    height: clamp(46px, 10vh, 76px);
  }
  html.motion #hero .pl-guard .pl-guard-text {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
  }
  html.motion #hero .pl-guard-sub {
    margin-top: clamp(8px, 2vh, 14px);
  }
}

/* --- 机: 剥がし終えた跡に残る一文 --- */
html.motion #hero .pl-desk {
  z-index: 1;
  display: grid;
  place-items: center;
}
html.motion #hero .pl-desk .pl-lead {
  text-align: center;
  padding: 0 1em;
}
html.motion #hero .pl-shadow {
  display: block;
  position: absolute;
  top: 30%;
  bottom: 30%;
  left: max(0px, calc(50% - 430px));
  right: max(0px, calc(50% - 430px));
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(18, 26, 38, 0.15) 0%,
    rgba(18, 26, 38, 0.1) 55%,
    rgba(18, 26, 38, 0.055) 80%,
    rgba(18, 26, 38, 0) 97%
  );
  box-shadow: 0 2px 7px rgba(18, 26, 38, 0.16);
  opacity: 0;
}
html.motion #hero .pl-shadow--sep {
  z-index: 1;
  /* v4b修正③: 影をシートと同じ支点から駆動するための基準点
           (セパの支点=右上, base.pl-sheet--sep の transform-origin と同一) */
  transform-origin: 100% 0%;
}
html.motion #hero .pl-shadow--base {
  z-index: 2;
  /* 基材の支点=左下(pl-sheet--base の transform-origin と同一)。
           影をこの角に固定してから伸縮させることで、回転にそのまま追従させる
           (JS側は伸縮率とねじれのみを与え、平行移動は与えない) */
  transform-origin: 0% 100%;
}

/* v2: 低ビューポート高(ノートPCで多い720〜860px)対策。副見出し追加分の
         高さを確保するため、pin中のシートが占める縦割合を広げる
         (横幅ではなく縦の余白のみを詰める。他プロパティは変更しない) */
@media (max-height: 1000px) {
  html.motion #hero .pl-sheet,
  html.motion #hero .pl-desk,
  html.motion #hero .pl-shadow {
    /* v4b: 27%→19%相当まで広げる(文字拡大後の
             見切れ防止) */
    top: 19%;
    bottom: 19%;
  }
  html.motion #hero .pl-sheet--sep {
    top: calc(19% - var(--pl-liner-peek));
    bottom: calc(19% - var(--pl-liner-peek));
  }
  html.motion #hero .pl-h1 {
    font-size: clamp(2.2rem, 4.8vw, 4.1rem);
  }
}
@media (max-height: 820px) {
  html.motion #hero .pl-sheet,
  html.motion #hero .pl-desk,
  html.motion #hero .pl-shadow {
    top: 15%;
    bottom: 15%;
  }
  html.motion #hero .pl-sheet--sep {
    top: calc(15% - var(--pl-liner-peek));
    bottom: calc(15% - var(--pl-liner-peek));
  }
}
@media (max-width: 820px) {
  html.motion #hero .pl-brand {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  html.motion #hero .pl-headline {
    grid-column: 1;
    align-self: center;
  }
  html.motion #hero .pl-sheet,
  html.motion #hero .pl-desk,
  html.motion #hero .pl-shadow {
    /* v2: 副見出し+シール分だけモバイルpin中の縦割合を広げる。
             v4b: 文字拡大(#7)分をさらに確保するため17%/14%へ拡張 */
    top: 17%;
    bottom: 14%;
  }
  html.motion #hero .pl-sheet--sep {
    top: calc(17% - var(--pl-liner-peek));
    bottom: calc(14% - var(--pl-liner-peek));
  }
  html.motion #hero .pl-guard .pl-face-do__t {
    margin-top: 0.3em;
    text-align: left;
    /* v4b修正: モバイルでも一段大きいまま(--pl-tinyへの縮小をやめる) */
    font-size: clamp(1.1rem, 4.4vw, 1.35rem);
  }
  html.motion #hero .pl-peel-hint__label {
    display: none;
  }
}

/* ============================================================
         着地CTA(.pl-gate): 剥がし完了後、通常フローに現れる帰結セクション
         ============================================================ */
#hero .pl-gate {
  padding: clamp(56px, 9vh, 108px) var(--pl-pad) clamp(64px, 10vh, 128px);
  border-top: 1px solid var(--pl-rule);
}
#hero .pl-gate__inner {
  max-width: 860px;
  margin: 0 auto;
}
#hero .pl-gate__eyebrow {
  font-size: var(--pl-sub);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.7;
  max-width: 24em;
  margin-bottom: clamp(22px, 3.4vh, 40px);
}
#hero .pl-gate__rows {
  border-top: 1px solid var(--pl-rule);
}
#hero .pl-gate__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(16px, 3.4vw, 40px);
  padding: clamp(18px, 2.6vh, 28px) 0;
  border-bottom: 1px solid var(--pl-rule);
  color: inherit;
  text-decoration: none;
}
#hero .pl-gate__no {
  color: var(--pl-blue);
  font-size: clamp(1.56rem, 3.12vw, 2.28rem);
  letter-spacing: 0.04em;
}
#hero .pl-gate__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.3em;
  row-gap: 0.4em;
  min-width: 0;
}
#hero .pl-gate__label {
  font-size: var(--pl-tiny);
  color: var(--pl-ink-soft);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
#hero .pl-gate__name {
  font-size: var(--pl-sub);
  font-weight: 600;
  letter-spacing: 0.03em;
}
#hero .pl-gate__copy {
  flex-basis: 100%;
  font-size: var(--pl-tiny);
  letter-spacing: 0.03em;
  color: var(--pl-ink-soft);
}
#hero .pl-gate__row:focus-visible {
  outline: 2px solid var(--pl-blue);
  outline-offset: 4px;
}
@media (hover: hover) {
  #hero .pl-gate__row:hover .pl-gate__name {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
}
#hero .pl-gate__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  margin-top: clamp(28px, 4.4vh, 48px);
  font-size: clamp(1.2rem, 1.92vw, 1.38rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pl-blue);
  text-decoration: none;
}
#hero .pl-gate__cta .pl-bar {
  display: inline-block;
  width: 2.6em;
  height: 2px;
  background: var(--pl-blue);
  transition: width 0.2s ease;
}
#hero .pl-gate__cta .pl-arrow {
  transition: transform 0.2s ease;
}
#hero .pl-gate__cta:hover .pl-bar,
#hero .pl-gate__cta:focus-visible .pl-bar {
  width: 3.6em;
}
#hero .pl-gate__cta:hover .pl-arrow,
#hero .pl-gate__cta:focus-visible .pl-arrow {
  transform: translateX(0.2em);
}
#hero .pl-gate__cta:focus-visible {
  outline: 2px solid var(--pl-blue);
  outline-offset: 4px;
}
@media (max-width: 520px) {
  #hero .pl-gate__row {
    column-gap: clamp(12px, 4vw, 20px);
  }
}

/* ============================================================
         v2 追加: 実素材アクセント・立体感・トーン収斂(非破壊・新規のみ)
         ============================================================ */

/* ---- H1直下の副見出し(リビール・テーゼ) ---- */
#hero .pl-subhead {
  margin-top: 0.55em;
  max-width: 30em;
  font-size: var(--pl-sub);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--pl-ink-soft);
}
html.motion #hero .pl-subhead {
  margin-top: 0.32em;
  font-size: var(--pl-meta-fs);
  line-height: 1.45;
  max-width: 20em;
}
@media (min-width: 821px) {
  html.motion #hero .pl-subhead {
    font-size: var(--pl-tiny);
    max-width: 22em;
    margin-top: 0.5em;
  }
}

/* ---- H1直下の名乗り(会社が何者かを一行で示すディスクリプタ)。
         ヒーロー内で唯一の青。落ち着いたトーンにするため太字にせず、
         字間を開けて小さめに置く ---- */
#hero .pl-desc {
  margin-top: 0.5em;
  font-size: var(--pl-meta-fs);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--pl-blue);
}
html.motion #hero .pl-desc {
  margin-top: 0.4em;
  font-size: calc(var(--pl-meta-fs) * 0.92);
}

/* ---- 01: 端がめくれて覗く箔面(意匠層の触感アクセント。デスクトップのみ) ---- */
html.motion #hero .pl-corner-peek,
html:not(.motion) #hero .pl-corner-peek {
  display: none;
}
@media (min-width: 821px) {
  html.motion #hero .pl-corner-peek {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: clamp(34px, 4.2vw, 52px);
    height: clamp(34px, 4.2vw, 52px);
    overflow: hidden;
    pointer-events: none;
    clip-path: polygon(0 100%, 100% 100%, 0 0);
    box-shadow: inset 1px 1px 3px rgba(20, 16, 6, 0.3);
  }
  html.motion #hero .pl-corner-peek img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 230%;
    height: 230%;
    object-fit: cover;
    object-position: 62% 32%;
    filter: saturate(0.92);
  }
}

/* ---- 立体感: 層1トーン収斂 + 微グレイン(意匠=平滑微粒/糊=半透明ムラ/セパ裏=繊維質)
             静止版のリスト構成は崩さないため motion 版のみに限定 ---- */
html.motion #hero .pl-face {
  isolation: isolate;
}
html.motion #hero .pl-brand {
  background: linear-gradient(168deg, #fbf8f1 0%, var(--pl-label) 55%);
}
html.motion #hero .pl-guard {
  background: #f4f6f7;
}
html.motion #hero .pl-brand::before,
html.motion #hero .pl-func::before,
html.motion #hero .pl-guard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: multiply;
}
html.motion #hero .pl-brand::before {
  opacity: 0.045;
  background-size: 130px 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.motion #hero .pl-func::before {
  opacity: 0.06;
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}
html.motion #hero .pl-guard::before {
  opacity: 0.065;
  background-size: 160px 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.015 0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23s)'/%3E%3C/svg%3E");
}

/* ---- 静止版フォールバックでも実サムネの土台になる位置決め ---- */
html:not(.motion) #hero .pl-brand,
html:not(.motion) #hero .pl-func,
html:not(.motion) #hero .pl-guard {
  position: relative;
}

/* ---- 扉(pl-gate)行の実サムネ ---- */
#hero .pl-gate__row {
  grid-template-columns: auto auto minmax(0, 1fr);
}
#hero .pl-gate__thumb {
  width: clamp(42px, 6.6vw, 66px);
  aspect-ratio: 1/1;
  overflow: hidden;
  border: 1px solid var(--pl-rule);
  align-self: center;
}
#hero .pl-gate__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: grayscale(0.1) contrast(1.04);
}
#hero .pl-gate__row[href*="decoration"] .pl-gate__thumb img {
  object-position: 66% 30%;
}
#hero .pl-gate__row[href*="traceability"] .pl-gate__thumb img {
  object-position: 4% 42%;
}
@media (max-width: 520px) {
  #hero .pl-gate__thumb {
    width: clamp(36px, 12vw, 48px);
  }
}

/* ---- 着地直前のクライマックス: 実際に刷り上がった量を一望させる
             (「貼って広がる」を字義通り体現。壁紙化しないよう内側枠に収める) ---- */
#hero .pl-gate__spread {
  position: relative;
  overflow: hidden;
  aspect-ratio: 24 / 5;
  margin-bottom: clamp(28px, 4.2vh, 44px);
  border: 1px solid var(--pl-rule);
  box-shadow: inset 0 0 0 1px rgba(0, 84, 166, 0.14);
}
#hero .pl-gate__spread img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: grayscale(0.12) contrast(1.05);
}
#hero .pl-gate__spread-cap {
  position: absolute;
  left: 0.9em;
  bottom: 0.7em;
  font-size: var(--pl-tiny);
  letter-spacing: 0.14em;
  color: #fff;
  padding: 0.3em 0.75em;
  background: rgba(20, 20, 18, 0.55);
}
@media (max-width: 520px) {
  #hero .pl-gate__spread {
    aspect-ratio: 16 / 9;
  }
}

/* ---- CTA直下の薄色1行 ---- */
#hero .pl-gate__ctanote {
  margin-top: 0.6em;
  font-size: var(--pl-meta-fs);
  letter-spacing: 0.04em;
  color: var(--pl-ink-soft);
}