/* SOONESS GROUP / ABOUT MOTION 2.0 — component styles, no global reset. */
.sa-about{--sa-ink:#163d60;--sa-copy:#405b70;--sa-mute:#5c7283;--sa-line:#d7e1e6;--sa-paper:#f8fafb;--sa-serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif;--sa-sans:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans CJK JP",sans-serif;position:relative;isolation:isolate;width:100%;max-width:none;margin:0;background:var(--sa-paper);color:var(--sa-ink);font-family:var(--sa-serif);line-height:1.9;-webkit-font-smoothing:antialiased;text-align:left}
.sa-about *,.sa-about *::before,.sa-about *::after{box-sizing:border-box}
.sa-about h1,.sa-about h2,.sa-about h3,.sa-about p,.sa-about figure{margin:0}
.sa-about h1,.sa-about h2,.sa-about h3{color:var(--sa-ink);font-family:var(--sa-serif);font-weight:500;text-transform:none}
.sa-about a{color:inherit;text-decoration:none}
.sa-about a:focus-visible,.sa-about button:focus-visible{outline:2px solid #164568;outline-offset:6px}
.sa-motion-layer{position:sticky;top:0;height:100vh;height:100svh;width:100%;margin-bottom:-100vh;margin-bottom:-100svh;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 78% 49%,#fff 0%,#fcfcfb 34%,#f6fafb 75%,#f8fafb 100%)}
.sa-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sa-motion-layer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,250,251,.98) 0%,rgba(248,250,251,.94) 27%,rgba(248,250,251,.68) 40%,rgba(248,250,251,.04) 62%,transparent 100%);pointer-events:none}
.sa-scene{position:relative;z-index:1;min-height:850px;min-height:max(760px,96svh);padding:112px 6.2%;display:flex;align-items:center;scroll-margin-top:100px}
.sa-content{position:relative;z-index:2;width:min(46%,650px)}
.sa-eyebrow{font-family:var(--sa-sans);font-size:10px;font-weight:500;letter-spacing:.27em;line-height:1.6;color:var(--sa-mute)}
.sa-eyebrow .sa-eyebrow-line{display:inline-block;width:34px;height:1px;background:#8fa4b2;vertical-align:middle;margin-right:15px}
.sa-about h1{font-size:clamp(48px,5.85vw,94px);line-height:1.4;letter-spacing:.045em;white-space:nowrap;margin:28px 0 32px}
.sa-lead{font-size:clamp(15px,1.18vw,18px);line-height:2.25;letter-spacing:.055em;color:var(--sa-copy)}
.sa-hero .sa-content{width:49%;max-width:750px}
.sa-hero{min-height:calc(100svh - 88px);padding-top:60px;padding-bottom:100px}
.sa-hero-annotation{margin-top:62px!important;font-family:var(--sa-sans);font-size:10px;letter-spacing:.25em;color:#597389;display:flex;align-items:center;gap:22px}
.sa-hero-annotation::before{content:"";width:48px;height:1px;background:var(--sa-line)}
.sa-hero-bottom{position:absolute;bottom:38px;left:6.2%;right:6.2%;display:flex;justify-content:space-between;align-items:center;font-family:var(--sa-sans);font-size:9px;letter-spacing:.18em;color:#657d8e}
.sa-scroll-mark{display:flex;gap:12px;align-items:center}
.sa-scroll-mark::before{content:"";height:25px;width:1px;background:#8195a3}
.sa-art-slot{position:absolute;left:43%;right:0;top:12%;bottom:5%;z-index:0;pointer-events:none}
.sa-art-slot::before{content:"";position:absolute;inset:0;background-image:url('particle-fallback.png');background-position:center;background-size:contain;background-repeat:no-repeat;opacity:.8}
.sa-about[data-sa-ready] .sa-art-slot::before{display:none}
.sa-scene:not(.sa-hero)::before{content:"";position:absolute;top:0;left:6.2%;width:65px;height:1px;background:#c9d6df}
.sa-about h2{font-size:clamp(34px,3.6vw,58px);line-height:1.6;letter-spacing:.04em;margin:23px 0 25px}
.sa-body{font-size:15px;line-height:2.25;letter-spacing:.045em;color:var(--sa-copy);max-width:470px}
.sa-body p+p{margin-top:19px}
.sa-origin{min-height:max(1040px,112svh)}
.sa-origin h2{font-size:clamp(33px,3.05vw,49px);margin-bottom:30px}
.sa-name-definitions{display:grid;gap:23px;max-width:485px}
.sa-name-term{display:flex;align-items:baseline;gap:18px;margin-bottom:9px!important}
.sa-name-term strong{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:30px;letter-spacing:.09em;line-height:1.4;color:var(--sa-ink)}
.sa-name-term span{font-size:12px;letter-spacing:.10em;color:var(--sa-mute)}
.sa-name-description{font-size:13px;letter-spacing:.035em;color:var(--sa-copy);line-height:2.15}
.sa-name-result{margin-top:30px;border-top:1px solid var(--sa-line);padding-top:21px;max-width:485px}
.sa-name-equation{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:Georgia,"Times New Roman",serif;font-size:17px;letter-spacing:.09em;line-height:2.0;margin-bottom:13px!important}
.sa-name-equation span:nth-child(even){color:#92a1ad;font-family:var(--sa-sans);font-weight:300}
.sa-name-result img{width:206px!important;height:auto!important;max-width:100%;display:block;margin:14px 0 16px;filter:none;object-fit:contain;opacity:1;border:0;border-radius:0}
.sa-origin .sa-art-slot{top:20%;bottom:18%}
.sa-purpose h2{font-size:clamp(44px,4.7vw,74px);line-height:1.64;margin:25px 0 32px;white-space:nowrap}
.sa-purpose .sa-content{width:48%;max-width:650px}
.sa-values-intro{margin-bottom:52px}
.sa-values-intro p+p{margin-top:12px;font-size:13px;letter-spacing:.1em;color:var(--sa-mute)}
.sa-value h2{font-size:clamp(64px,7vw,108px);line-height:1.2;letter-spacing:.12em;margin:22px 0 23px}
.sa-value h3{font-size:clamp(24px,2.4vw,37px);line-height:1.6;letter-spacing:.045em;margin-bottom:27px}
.sa-value .sa-body{max-width:465px}
.sa-value-en{font-family:var(--sa-sans);font-size:11px;letter-spacing:.26em;color:#5a7488}
.sa-value[data-scene="diversity"]{min-height:max(940px,108svh)}
.sa-value[data-scene="inclusion"],.sa-value[data-scene="circulation"]{min-height:max(760px,91svh)}
.sa-closing{min-height:max(800px,98svh)}
.sa-closing h2{font-size:clamp(43px,4.35vw,70px);white-space:nowrap;line-height:1.55}
.sa-closing .sa-content{width:60%;max-width:900px}
.sa-closing .sa-art-slot{top:18%;bottom:5%;left:40%}
.sa-actions{display:flex;gap:32px;align-items:center;flex-wrap:wrap;margin-top:36px}
.sa-link{font-family:var(--sa-sans);font-size:12px;letter-spacing:.045em;display:inline-flex;align-items:center;justify-content:space-between;gap:35px;min-height:48px;min-width:170px;padding:12px 0;border-bottom:1px solid #91a5b3;transition:color .25s,border-color .25s}
.sa-link span{font-size:21px;font-weight:300;transition:transform .25s}
.sa-link:hover{border-color:var(--sa-ink)}.sa-link:hover span{transform:translateX(4px)}
.sa-note-brand{font-family:var(--sa-sans);font-size:9px;letter-spacing:.2em;color:#6b8191;position:absolute;bottom:32px;left:6.2%}
.sa-motion-controls{display:none;position:fixed;z-index:20;right:25px;bottom:24px;gap:10px;align-items:center}
.sa-about[data-sa-ready][data-sa-inview="true"] .sa-motion-controls{display:flex}
.sa-motion-toggle{font-family:var(--sa-sans);font-size:11px;line-height:1.4;letter-spacing:.02em;background:rgba(250,252,253,.92);color:var(--sa-ink);border:1px solid #b8c7d1;border-radius:50px;min-width:142px;min-height:44px;padding:10px 16px;display:inline-flex;gap:10px;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 12px rgba(29,55,80,.035)}
.sa-motion-toggle svg{width:11px;height:12px;fill:currentColor;flex-shrink:0}
.sa-about[data-sa-paused="true"] *{transition:none!important;animation:none!important}
.sa-only-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media(min-width:1800px){.sa-scene{padding-left:max(6.2%,calc((100% - 1600px)/2));padding-right:max(6.2%,calc((100% - 1600px)/2))}.sa-body{font-size:17px}.sa-name-description{font-size:15px}.sa-content{max-width:650px}.sa-name-definitions,.sa-name-result{max-width:570px}}
@media(min-width:761px) and (max-width:1100px){.sa-about h1{font-size:clamp(42px,5.2vw,54px)}.sa-content{width:48%}.sa-body{font-size:14px}.sa-name-term strong{font-size:25px}.sa-name-description{font-size:12px}.sa-purpose h2{font-size:47px}.sa-scene{padding-left:5%;padding-right:5%}.sa-value h2{font-size:78px}.sa-closing h2{font-size:47px}}
@media(max-width:760px){
 .sa-motion-layer::after{display:none}.sa-motion-layer{background:#f8fafb}
 .sa-scene,.sa-hero,.sa-origin,.sa-value[data-scene="diversity"],.sa-value[data-scene="inclusion"],.sa-value[data-scene="circulation"],.sa-closing{display:block;min-height:0;padding:69px 7% 31px}
 .sa-content,.sa-hero .sa-content,.sa-purpose .sa-content,.sa-closing .sa-content{width:100%;max-width:none}
 .sa-eyebrow{font-size:9px;letter-spacing:.20em}.sa-about h1{font-size:clamp(40px,10.5vw,69px);line-height:1.4;margin:20px 0 23px;letter-spacing:.025em}
 .sa-lead{font-size:14px;line-height:2.1;letter-spacing:.015em}.sa-desktop-break{display:none}
 .sa-hero{padding-top:58px;padding-bottom:65px}
 .sa-hero-annotation{margin-top:25px!important;font-size:8px;letter-spacing:.2em;gap:15px}.sa-hero-annotation::before{width:24px}
 .sa-hero-bottom{left:7%;right:7%;bottom:19px;font-size:8px}.sa-scroll-mark::before{height:17px}
 .sa-art-slot,.sa-origin .sa-art-slot,.sa-closing .sa-art-slot{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:calc(100% + 16.28%);margin:15px -8.14% 0;height:340px;overflow:hidden}
 .sa-hero .sa-art-slot{height:355px;margin-top:8px}
 .sa-about h2{font-size:34px;line-height:1.6;margin:21px 0 25px}
 .sa-origin h2{font-size:32px;line-height:1.7;margin-bottom:25px}.sa-name-definitions{gap:22px;max-width:none}.sa-name-term strong{font-size:27px}.sa-name-term span{font-size:11px}.sa-name-description{font-size:13px;line-height:2.15}.sa-name-result{margin-top:25px;padding-top:18px;max-width:none}.sa-name-result img{width:178px!important;margin:15px 0}
 .sa-purpose h2{font-size:clamp(34px,9.9vw,57px);line-height:1.65;margin:23px 0 23px;letter-spacing:.02em}
 .sa-body{font-size:14px;line-height:2.2;letter-spacing:.02em;max-width:none}.sa-body p+p{margin-top:17px}
 .sa-values-intro{margin-bottom:37px}.sa-values-intro p+p{font-size:12px;letter-spacing:.045em}.sa-value-en{font-size:9px}.sa-value h2{font-size:65px;line-height:1.35;letter-spacing:.08em;margin:16px 0 17px}.sa-value h3{font-size:25px;line-height:1.7;margin:0 0 22px}.sa-value .sa-body{max-width:none}
 .sa-scene:not(.sa-hero)::before{left:7%;width:40px}
 .sa-closing h2{font-size:clamp(30px,8.9vw,49px);line-height:1.8;white-space:normal}.sa-closing .sa-body{max-width:none}
 .sa-actions{gap:18px;margin-top:27px}.sa-link{font-size:11px;min-width:145px;gap:22px}
 .sa-note-brand{position:relative;bottom:auto;left:auto;font-size:8px;text-align:left;margin-top:5px!important;padding-bottom:25px}
 .sa-motion-controls{right:15px;bottom:16px}.sa-motion-toggle{min-width:127px;font-size:10px;min-height:44px;padding:10px 13px}
}
@media(max-width:359px){.sa-about h1{font-size:35px}.sa-purpose h2{font-size:32px}.sa-name-term{gap:12px}.sa-name-term span{font-size:10px}.sa-value h3{font-size:23px}.sa-value h2{font-size:57px}.sa-closing h2{font-size:28px}.sa-link{min-width:132px}.sa-actions{gap:17px}}
@media(prefers-reduced-motion:reduce){.sa-about *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.sa-motion-layer,.sa-art-slot,.sa-motion-controls,.sa-hero-bottom{display:none!important}.sa-scene,.sa-origin,.sa-hero,.sa-value[data-scene],.sa-closing{min-height:0!important;padding:24px!important;break-inside:avoid}.sa-content,.sa-hero .sa-content,.sa-purpose .sa-content,.sa-closing .sa-content{width:100%!important}.sa-about h1{font-size:34px}.sa-about h2,.sa-purpose h2,.sa-value h2,.sa-closing h2{font-size:28px;white-space:normal}.sa-about .sa-body{max-width:none}}

/* v2: a broad introduction and a compact ending inside Circulation. */
.sa-about-embed{width:100%;max-width:none}
.sa-about .sa-lead p+p{margin-top:20px}
.sa-about [data-scene="circulation"] .sa-actions{margin-top:30px;gap:28px}
.sa-about{--sa-controls-bottom:24px;--sa-controls-right:25px}
.sa-about .sa-motion-controls{bottom:calc(var(--sa-controls-bottom) + env(safe-area-inset-bottom,0px));right:var(--sa-controls-right)}
@media(max-width:760px){
 .sa-about{--sa-controls-bottom:16px;--sa-controls-right:15px}
 .sa-about .sa-lead p+p{margin-top:16px}
 .sa-about [data-scene="circulation"] .sa-actions{gap:18px;margin-top:26px}
 .sa-about [data-scene="circulation"]{padding-bottom:60px}
}

/* =========================================================================
   PAGE FRAME

   index.php renders:
     <main id="top" class="internal-page">            ← header は position:absolute / 104px
       <section class="detail-shell wp-default-content">   ← 既定は width:min(100%,1380px)
                                                              margin-inline:auto
                                                              padding:clamp(98px,10vw,150px) clamp(28px,7vw,112px)
   このセクションは全幅で見せる必要があり、かつ絶対配置ヘッダーの下に潜らせない。

   これらの指定は元々 固定ページ本文の <style> に body.page-id-156 で直書きされていた。
   本文をショートコード1行だけにするため、ここへ移設し、
   投稿IDではなく body クラス（sooness_about_motion_body_class）で紐づけている。
   詳細度 (1,4,3) はテーマの .internal-page .detail-shell (0,2,0) を上回るため、
   about.css がテーマCSSより先に読み込まれても負けない。
========================================================================= */

body.sa-about-page {
  --sa-header-height: 104px;
  --sa-top-gap: 76px;
}

body.sa-about-page main#top.internal-page {
  box-sizing: border-box;
  padding-top: var(--sa-header-height);
  background: #fff;
}

body.sa-about-page
main#top.internal-page
> section.detail-shell.wp-default-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--sa-top-gap) 0 0;
  background: #fff;
}

/* the_title() が出力する見出し。本文側の <h1>SOONESSとは</h1> と重複するため隠す */
body.sa-about-page
main#top.internal-page
> section.detail-shell.wp-default-content
> h1:first-child {
  display: none;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 800px) {
  body.sa-about-page {
    --sa-top-gap: 48px;
  }
}

/* =========================================================================
   最終シーン（循環）とフッターの間合い

   フッターの上余白とシーンの下余白を詰め、
   最下部で循環セクションの本文がより多く見えるようにする。
   本文の行間・字間は変更していない。
========================================================================= */

body.sa-about-page
.sa-about
.sa-scene[data-scene="circulation"] {
  /* 既定の min-height:max(760px,91svh) を解除して内容に合わせる */
  min-height: 0;

  padding-bottom: 100px;
}

body.sa-about-page
main#top.internal-page
> .site-footer.internal-footer {
  /*
   * 粒子層より前面に置く。
   * background はテーマ既定のまま（radial-gradient + linear-gradient）。
   */
  position: relative;
  z-index: 1;

  padding-top: 48px;
}


/* =========================================================================
   粒子アニメーションの終わり方

   .sa-motion-layer は position:sticky + height:100svh で、
   常にビューポート一杯に描画される。
   最下部ではビューポート下部の約420px をフッターが占めるため、
   キャンバスの下端はどうしてもフッターの裏に入る。
   （本文528px + フッター実寸374px > ビューポート870px のため、
     両方を同時に全部見せることは物理的にできない）

   そこで「切れている」ように見えないよう、
   フッターに達するずっと手前から粒子を徐々に溶かし、
   最後はフッター上端の地色 #fbfdfd に一致させて着地させる。

   重ね順：.sa-motion-layer(z:0) → ::after(z:0 / DOM順で後) → .sa-scene(z:1)
   本文・見出し・リンクより下に入るので、文字には一切かぶらない。
========================================================================= */

body.sa-about-page .sa-about {
  /* 粒子がフッターを覆わないよう、セクション内で止める */
  overflow: clip;
}

body.sa-about-page .sa-about::after {
  content: "";

  position: absolute;
  z-index: 0;

  right: 0;
  bottom: 0;
  left: 0;

  height: 150px;

  /* ゆるやかに立ち上げ、最後はフッター上端の地色へ着地させる */
  background:
    linear-gradient(
      180deg,
      rgba(251, 253, 253, 0) 0%,
      rgba(251, 253, 253, 0.22) 45%,
      rgba(251, 253, 253, 0.60) 72%,
      rgba(251, 253, 253, 0.90) 90%,
      rgb(251, 253, 253) 100%
    );

  pointer-events: none;
}

@media screen and (max-width: 760px) {

  body.sa-about-page
  .sa-about
  .sa-scene[data-scene="circulation"] {
    padding-bottom: 40px;
  }

  body.sa-about-page
  main#top.internal-page
  > .site-footer.internal-footer {
    padding-top: 56px;
  }

  body.sa-about-page .sa-about::after {
    height: 110px;
  }

}


/* =========================================================================
   粒子レイヤーを最終シーンの終わりで「固定解除」する

   既定は
     .sa-motion-layer { position:sticky; top:0; height:100svh;
                        margin-bottom:-100svh }
   で、負のマージンによりマージンボックスの高さが 0 になる。
   sticky の拘束は「マージンボックスが包含ブロック内に収まること」なので、
   高さ0のマージンボックスは .sa-about の下端まで滑り続けられてしまう。
   結果、フッターが出てきてもキャンバスは追従し続け、下端がフッターの裏へ潜る。

   そこで負のマージンを『レイヤーの margin-bottom』から
   『直後のシーンの margin-top』へ移す。
     - レイアウト結果は完全に同じ（シーンは .sa-about の先頭から始まる）
     - マージンボックスの高さが 100svh に戻るため、sticky の停止位置が
       「キャンバス下端＝.sa-about 下端」になる

   これで、最終シーンを見終わった位置で粒子がぴたりと止まり、
   その後スクロールしてもフッターが下から上がってくるだけで、
   キャンバスはフッターの裏へ入らない。
========================================================================= */

body.sa-about-page .sa-about > .sa-motion-layer {
  margin-bottom: 0;
}

body.sa-about-page .sa-about > .sa-motion-layer + .sa-scene {
  margin-top: -100vh;
  margin-top: -100svh;
}