/* =====================================================================
   ys.css — eap コーポレートサイト デザインシステム（2026-10 リデザイン）
   参照: ystudio.co.kr の構成・文字スケール・余白・配色の切り替えを実測して再構成。
   ロゴ・文章・画像・コードは転用していない。値の出典は末尾コメント参照。
   読み込み順: ys-legacy.css（詳細本文の旧部品）→ ys.css（本ファイル）
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* color — 暗い青系グラデーション（参考画像から採色）。支配色は墨色、アクセントは深いネイビー1色 */
  --c-violet:#282734;      /* 左上の青紫（参考画像） */
  --c-ink-0:#0B0E13;       /* 中央の墨色（参考画像） */
  --c-deep:#0C131A;        /* 深い青黒（参考画像） */
  --c-black:#000000;       /* 最暗部（参考画像） */
  --c-navy:#193550;        /* 右下のネイビーブルー（参考画像） */
  --c-mist:#b1becb;        /* 淡いブルーグレー（参考画像の小見出し文字） */
  --c-steel:#5F7489;       /* navyとmistの中間（メソッド画像の中明度帯） */
  --c-night:#0B0E13;       /* 暗色面 */
  --c-night-2:#12161d;
  --c-ink:#171716;
  --c-ink-2:#55534f;
  --c-mute:#8d8a85;
  --c-paper:#ffffff;
  --c-paper-2:#f2f4f7;     /* 淡色面（ブルーグレー寄り） */
  --c-line:rgba(23,23,22,.14);
  --c-line-inv:rgba(177,190,203,.24);
  /* 役割で使う色（ここだけを参照する） */
  --c-fill:var(--c-navy);                 /* 面・斜めの図形・ボタンのホバー面 */
  --c-fill-grad:linear-gradient(160deg,var(--c-violet) 0%,var(--c-ink-0) 48%,var(--c-navy) 100%);
  --c-hl:var(--c-navy);                   /* 文字・線のアクセント（明るい面ではネイビー、暗い面では淡いブルーグレーに自動切替） */
  --c-dot:var(--c-mist);                  /* 丸い導線の面 */
  --c-dot-ink:var(--c-ink-0);
  --c-focus:var(--c-navy);

  /* gradient — 左上の青紫 → 中央の墨色・最暗部 → 右下のネイビー */
  --g-hero:radial-gradient(75% 38% at 0% 0%,rgba(40,39,52,1) 0%,rgba(40,39,52,0) 100%),radial-gradient(62% 26% at 100% 46%,rgba(25,53,80,.95) 0%,rgba(25,53,80,0) 100%),radial-gradient(85% 34% at 100% 100%,rgba(25,53,80,1) 0%,rgba(25,53,80,0) 100%),linear-gradient(165deg,#1e1d26 0%,var(--c-ink-0) 28%,var(--c-black) 52%,var(--c-deep) 78%,#11202f 100%);
  --g-hero-short:radial-gradient(80% 70% at 0% 0%,rgba(40,39,52,1) 0%,rgba(40,39,52,0) 100%),radial-gradient(75% 65% at 100% 100%,rgba(25,53,80,1) 0%,rgba(25,53,80,0) 100%),linear-gradient(150deg,#1e1d26 0%,var(--c-ink-0) 35%,var(--c-black) 58%,var(--c-deep) 100%);

  /* type */
  --f-en:'Poppins',sans-serif;
  --f-ja:'Noto Sans JP',sans-serif;
  --f-mix:'Poppins','Noto Sans JP',sans-serif;

  /* 文字サイズ：1440で実測値、390で実測値になるよう clamp */
  --t-giant:clamp(54px,11vw,176px);      /* 158.4px@1440 / 54.6px@390 */
  --t-giant-ja:clamp(34px,9.4vw,150px);  /* 和文は字面が大きいため約85% */
  --t-h1:clamp(40px,6.6vw,104px);
  --t-h2:clamp(30px,3.1vw,48px);         /* 44.8px@1440 */
  --t-h3:clamp(22px,2.1vw,30px);         /* 30.4px@1440 */
  --t-lead:clamp(22px,2.5vw,36px);       /* 36px@1440 / 30px@390 は和文で過大なため 22px */
  --t-sub:clamp(16px,1.67vw,24px);       /* 24px@1440 / 18px@390 */
  --t-body:16px;
  --t-small:14px;
  --t-label:12px;

  /* space */
  --gx:clamp(20px,8.333vw,120px);        /* 左右余白 120px@1440 / 20px@390 */
  --sy:clamp(80px,8vw,116px);            /* セクション上下 115.2px@1440 */
  --sy-lg:clamp(112px,12vw,180px);
  --hd-pad-x:clamp(20px,4.17vw,60px);    /* ヘッダー左右 60px@1440 */
  --hd-h:clamp(64px,7vw,100px);

  /* motion */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-in-out:cubic-bezier(.76,0,.24,1);
  --d-fast:.35s; --d-mid:.7s; --d-slow:1.1s;

  /* image ratio */
  --r-work-lg:4/5; --r-work-sm:4/5; --r-wide:16/9;

  /* --- 旧 main.css 変数の付け替え（ys-legacy.css が参照） --- */
  --bg:var(--c-paper); --bg-soft:var(--c-paper-2); --bg-faint:#faf9f7; --bg-dark:var(--c-night);
  --ink:var(--c-ink); --ink-2:var(--c-ink-2); --mute:var(--c-mute); --line:#e6e3de; --line-soft:#efede9; --hair:var(--c-night-2);
  --font-en:var(--f-en); --font-jp:var(--f-ja); --font-mono:var(--f-en);
  --nav-h:var(--hd-h); --pad-x:var(--gx);
  --ease-dg:var(--e-out); --ease-img:var(--e-out); --ease-main:var(--e-out);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto!important}
html.lenis.lenis-stopped{overflow:hidden}
body{font-family:var(--f-ja);font-size:var(--t-body);line-height:1.85;color:var(--c-ink);background:var(--c-paper);
  font-feature-settings:'palt';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;letter-spacing:.02em}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--c-fill);color:#fff}
:focus-visible{outline:2px solid var(--c-hl);outline-offset:4px;border-radius:2px}
.ys-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ys-skip{position:fixed;left:16px;top:-80px;z-index:1000;background:var(--c-paper);color:var(--c-ink);padding:10px 16px;font-size:14px;transition:top .2s}
.ys-skip:focus{top:16px}
html.ys-menu-open{overflow:hidden}

/* 旧ユーティリティ（詳細本文で使用） */
.container{width:100%;max-width:none;margin:0 auto;padding:0 var(--gx)}
.en{font-family:var(--f-en);letter-spacing:0}
.mono{font-family:var(--f-en);letter-spacing:.04em}
.boot-splash,.nav-overlay,.nav-drawer,.sticky-cta{display:none!important}

/* ---------- 3. Type primitives ---------- */
.ys-label{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mix);font-size:var(--t-sub);font-weight:500;line-height:1.5;letter-spacing:0}
.ys-label--s{font-size:var(--t-small)}
.ys-arrow{display:inline-block;width:clamp(22px,2.4vw,34px);height:clamp(22px,2.4vw,34px)}
.ys-arrow svg{width:100%;height:100%}
.ys-giant{font-family:var(--f-en);font-size:var(--t-giant);font-weight:500;line-height:1.08;letter-spacing:-.01em}
.ys-giant-ja{font-family:var(--f-ja);font-size:var(--t-giant-ja);font-weight:600;line-height:1.18;letter-spacing:-.04em;font-feature-settings:'palt'}
.ys-h1{font-family:var(--f-mix);font-size:var(--t-h1);font-weight:600;line-height:1.15;letter-spacing:-.035em}
.ys-h2{font-size:var(--t-h2);font-weight:700;line-height:1.45;letter-spacing:-.02em}
.ys-h3{font-size:var(--t-h3);font-weight:700;line-height:1.5;letter-spacing:-.01em}
.ys-lead{font-size:var(--t-lead);font-weight:700;line-height:1.5;letter-spacing:-.03em}
.ys-body{font-size:var(--t-body);line-height:2;color:var(--c-ink-2);font-weight:500}
.ys-meta{font-family:var(--f-en);font-size:var(--t-small);font-weight:500;letter-spacing:.02em}
.ys-en{font-family:var(--f-en)}
.on-dark .ys-body,.ys-theme-dark .ys-body{color:rgba(255,255,255,.72)}

/* 下線リンク（参照の Read More / View All Works） */
.ys-link{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-mix);font-size:var(--t-body);font-weight:500;line-height:1.6;position:relative;padding-bottom:2px}
.ys-link::after{content:"";position:absolute;left:0;bottom:-2px;width:calc(100% - 22px);height:1px;background:currentColor;transform-origin:left;transition:transform .5s var(--e-out)}
.ys-link:hover::after{transform:scaleX(0);transform-origin:right}
.ys-link .dot{width:8px;height:8px;border-radius:50%;border:1px solid currentColor;transition:background .3s,transform .3s}
.ys-link:hover .dot{background:currentColor;transform:scale(1.4)}

/* 枠ボタン（Contact の Submit を下敷き） */
.ys-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 34px;border:2px solid currentColor;
  font-family:var(--f-mix);font-weight:600;font-size:15px;letter-spacing:.02em;position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--e-out)}
.ys-btn::before{content:"";position:absolute;inset:0;background:var(--c-ink);transform:translateY(101%);transition:transform .45s var(--e-out);z-index:-1}
.ys-btn:hover{color:#fff}
.ys-btn:hover::before{transform:none}
.ys-btn--fill{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.ys-btn--fill::before{background:var(--c-fill)}
.ys-btn--light{color:#fff}
.ys-btn--light::before{background:#fff}
.ys-btn--light:hover{color:var(--c-ink)}
.ys-btn--white{background:#fff;border-color:#fff;color:var(--c-ink)}
.ys-btn--white::before{background:var(--c-ink)}

/* ---------- 4. Header ---------- */
.ys-header{position:fixed;inset:0 0 auto 0;z-index:200;height:var(--hd-h);padding:0 var(--hd-pad-x);display:flex;align-items:center;justify-content:space-between;
  color:#fff;pointer-events:none;transition:color .4s var(--e-out),transform .6s var(--e-out)}
.ys-header>*{pointer-events:auto}
.ys-header[data-tone="light"]{color:var(--c-ink)}
.ys-header[data-tone="light"] .ys-logo{background:var(--c-ink-0)}
.ys-header.is-hidden{transform:translateY(-110%)}
html.ys-menu-open .ys-header{color:#fff;transform:none}
html.ys-menu-open .ys-header .ys-logo{background:#fff}
.ys-logo{display:block;width:clamp(58px,5.2vw,76px);aspect-ratio:1024/462;background:currentColor;
  -webkit-mask:url(/eap-logo-black.png) left center/contain no-repeat;mask:url(/eap-logo-black.png) left center/contain no-repeat;transition:background .4s var(--e-out)}
.ys-logo-link{display:block;padding:10px 0}
.ys-menu-btn{display:flex;align-items:center;gap:22px;height:48px;font-family:var(--f-en);font-weight:500;font-size:14px;letter-spacing:0}
.ys-menu-btn__label{position:relative;overflow:hidden;height:30px;line-height:30px}
.ys-menu-btn__label span{display:block;transition:transform .5s var(--e-out)}
.ys-menu-btn[aria-expanded="true"] .ys-menu-btn__label span{transform:translateY(-100%)}
.ys-menu-btn__icon{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background .35s}
.ys-menu-btn__icon::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid currentColor;opacity:0;transform:scale(.6);transition:opacity .35s,transform .45s var(--e-out)}
.ys-menu-btn:hover .ys-menu-btn__icon::before{opacity:.35;transform:none}
.ys-menu-btn[aria-expanded="true"] .ys-menu-btn__icon::before{opacity:1;transform:none;border-color:var(--c-hl)}
.ys-menu-btn__bars{position:relative;width:16px;height:8px}
.ys-menu-btn__bars i{position:absolute;left:0;width:100%;height:1.5px;background:currentColor;transition:transform .45s var(--e-out),top .3s}
.ys-menu-btn__bars i:nth-child(1){top:0}
.ys-menu-btn__bars i:nth-child(2){top:6.5px}
.ys-menu-btn[aria-expanded="true"] .ys-menu-btn__bars i:nth-child(1){top:3.25px;transform:rotate(45deg) scaleX(.8)}
.ys-menu-btn[aria-expanded="true"] .ys-menu-btn__bars i:nth-child(2){top:3.25px;transform:rotate(-45deg) scaleX(.8)}

/* ---------- 5. Fullscreen menu ---------- */

/* ---------- 6. Loader（初回セッションのみ・1.1秒以内） ---------- */
.ys-loader{display:none}
html.ys-preload .ys-loader{display:flex;position:fixed;inset:0;z-index:500;background:#000;color:#fff;align-items:center;justify-content:center;
  animation:ys-loader-fallback .01s 2.6s forwards}
html.ys-preload .ys-loader.is-done{transform:translateY(-100%);transition:transform .75s var(--e-in-out)}
.ys-loader__word{font-family:var(--f-ja);font-weight:600;font-size:clamp(40px,6.5vw,104px);letter-spacing:-.03em}
.ys-loader__meta{position:absolute;bottom:clamp(20px,5vw,48px);left:var(--hd-pad-x);right:var(--hd-pad-x);display:flex;justify-content:space-between;font-family:var(--f-en);font-size:11px;color:rgba(255,255,255,.6)}
@keyframes ys-loader-fallback{to{visibility:hidden;opacity:0}}

/* ---------- 7. Sections / themes ---------- */
.ys-section{position:relative;padding:var(--sy) var(--gx)}
.ys-theme-dark{background:var(--c-night);color:#fff}
.ys-theme-navy{background:var(--c-fill-grad);color:#fff}
.ys-theme-paper2{background:var(--c-paper-2)}
.ys-split{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,48px)}
.ys-col-r{grid-column:2}
.ys-measure{max-width:584px}
.ys-stack>*+*{margin-top:clamp(20px,2.4vw,32px)}

/* ---------- 8. Hero（トップ） ---------- */
.ys-hero{position:relative;color:#fff;background:var(--g-hero);min-height:215vh;padding:0 var(--gx)}
.ys-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.ys-hero__first{position:relative;z-index:1;padding-top:clamp(200px,41vh,400px)}
.ys-hero__label{margin-bottom:clamp(40px,7vh,84px)}
.ys-hero__label .ys-arrow{margin-bottom:clamp(22px,3vh,40px)}
.ys-hero__label p{font-family:var(--f-mix);font-size:var(--t-sub);font-weight:500;line-height:1.5}
.ys-hero__title{font-family:var(--f-ja);font-size:var(--t-giant-ja);font-weight:600;line-height:1.2;letter-spacing:-.045em;margin-left:-.06em}
.ys-lines .ln{display:block;overflow:hidden;padding-bottom:.04em}
.ys-lines .ln>span{display:inline-block}
.ys-hero__title .ln{display:block;overflow:hidden;padding-bottom:.04em}
.ys-hero__title .ln>span{display:inline-block}
.ys-scroll-cue{position:absolute;right:var(--hd-pad-x);top:calc(100vh - 80px);top:calc(100svh - 80px);z-index:2;display:flex;align-items:center;gap:22px;font-family:var(--f-mix);font-size:14px;font-weight:500;color:#fff}
.ys-scroll-cue i{width:40px;height:40px;display:grid;place-items:center}
.ys-scroll-cue svg{width:16px;height:16px;animation:ys-bob 2.2s var(--e-in-out) infinite}
@keyframes ys-bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.ys-hero__second{position:relative;z-index:1;padding:clamp(80px,14vh,160px) 0 var(--sy-lg)}
.ys-hero__statement{font-size:var(--t-lead);font-weight:700;line-height:1.5;letter-spacing:-.03em;color:#fff}
.ys-hero__statement+.ys-body{margin-top:28px;color:rgba(255,255,255,.78)}
.ys-hero__second .ys-body{color:rgba(255,255,255,.78)} /* 10-25 Missionタグ・ステートメント非表示：本文色を維持 */
.ys-hero{min-height:auto} /* 10-25 同上：215vh固定だと削った2行分が下端の空白になるため内容高さに合わせる */
.ys-hero__actions{display:flex;flex-wrap:wrap;gap:20px 36px;align-items:center;margin-top:44px}

/* ---------- 9. Page hero（下層） ---------- */
.ys-phero{position:relative;padding:calc(var(--hd-h) + clamp(72px,14vh,170px)) var(--gx) clamp(64px,9vw,128px);overflow:hidden}
.ys-phero--grad{background:var(--g-hero-short);color:#fff;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
.ys-phero--dark{background:var(--c-night);color:#fff}
.ys-phero--light{background:var(--c-paper);color:var(--c-ink)}
.ys-phero__crumb{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;letter-spacing:.04em;margin-bottom:clamp(28px,4vw,48px);opacity:.75;position:relative;z-index:1}
.ys-phero__crumb a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ys-phero__label{position:relative;z-index:1;margin-bottom:clamp(24px,3.4vw,44px)}
.ys-phero__label .ys-arrow{display:block;margin-bottom:20px}
.ys-phero__title{position:relative;z-index:1}
.ys-phero__title .ln{display:block;overflow:hidden;padding-bottom:.05em}
.ys-phero__title .ln>span{display:inline-block}
.ys-phero__lede{position:relative;z-index:1;max-width:640px;margin-top:clamp(28px,3.4vw,48px);font-size:clamp(15px,1.2vw,17px);line-height:2;font-weight:500;opacity:.86}
.ys-phero__shape{position:absolute;right:-6vw;top:0;bottom:0;width:46vw;pointer-events:none;z-index:0}
.ys-phero__shape::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--c-violet),var(--c-navy));clip-path:polygon(38% 0,100% 0,62% 100%,0 100%);opacity:.95}
.ys-phero__shape::after{content:none}

/* ---------- 10. Marquee（巨大な流れる見出し） ---------- */
.ys-marquee{overflow:hidden;white-space:nowrap;display:block;user-select:none}
.ys-marquee__track{display:inline-flex;will-change:transform;animation:ys-marq var(--marq-dur,38s) linear infinite}
.ys-marquee__track>span{font-family:var(--f-en);font-size:var(--t-giant);font-weight:500;line-height:1.22;letter-spacing:-.01em;padding-right:.32em}
.ys-marquee--ja .ys-marquee__track>span{font-family:var(--f-ja);font-weight:600;letter-spacing:-.04em;font-size:var(--t-giant-ja)}
.ys-marquee__shift{display:block;transform:translate3d(var(--marq-shift,0px),0,0)}
@keyframes ys-marq{to{transform:translate3d(-50%,0,0)}}
a.ys-marquee:hover .ys-marquee__track{animation-play-state:paused}

/* ---------- 11. Intro（白地の大見出し） ---------- */
.ys-intro{padding:var(--sy) 0 clamp(40px,6vw,96px)}
.ys-intro__text{padding:0 var(--gx)}
.ys-intro .ys-marquee{margin-top:clamp(24px,4vw,56px)}
.ys-fill{--p:0;background:linear-gradient(90deg,currentColor 0 calc(var(--p)*100%),rgba(23,23,22,.18) calc(var(--p)*100%) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ys-theme-dark .ys-fill{background:linear-gradient(90deg,#fff 0 calc(var(--p)*100%),rgba(255,255,255,.22) calc(var(--p)*100%) 100%);-webkit-background-clip:text;background-clip:text}

/* ---------- 12. Works（非対称の事例） ---------- */
.ys-works{padding:clamp(48px,6vw,96px) var(--gx) var(--sy)}
.ys-works__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(48px,7vw,110px)}
.ys-works__list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:clamp(64px,10vw,160px)}
.ys-work{position:relative;display:block;color:#fff}
.ys-work:nth-child(4n+1){grid-column:1 / span 7}
.ys-work:nth-child(4n+2){grid-column:9 / span 4;margin-top:clamp(120px,18vw,280px)}
.ys-work:nth-child(4n+3){grid-column:2 / span 4;margin-top:clamp(-40px,-4vw,-80px)}
.ys-work:nth-child(4n+4){grid-column:7 / span 6;margin-top:clamp(80px,12vw,200px)}
.ys-work__media{position:relative;aspect-ratio:var(--r-work-lg);overflow:hidden;background:var(--c-paper-2);isolation:isolate}
.ys-work__bg{position:absolute;inset:0;transition:transform 1.2s var(--e-out)}
.ys-work[data-tone="navy"] .ys-work__bg{background:var(--c-fill-grad)}
.ys-work[data-tone="dark"] .ys-work__bg{background:linear-gradient(160deg,#2a2a2b,var(--c-night) 60%)}
.ys-work[data-tone="umber"] .ys-work__bg{background:linear-gradient(160deg,var(--c-deep),var(--c-navy) 100%)}
.ys-work[data-tone="paper"] .ys-work__bg{background:linear-gradient(160deg,#f7f5f2,#e7e3dd)}
.ys-work__shot{position:absolute;left:8%;right:8%;top:0;bottom:12%;display:flex;align-items:center;transition:transform 1.2s var(--e-out)}
.ys-work__shot img{width:100%;height:auto;box-shadow:0 30px 60px -18px rgba(0,0,0,.45),0 8px 18px rgba(0,0,0,.18);border-radius:4px;background:#fff}
.ys-work__shot--photo{inset:0;display:block}
.ys-work__shot--photo img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.ys-work__cap{position:absolute;left:clamp(18px,2.6vw,40px);right:clamp(18px,2.6vw,40px);bottom:clamp(18px,2.6vw,40px);z-index:2;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.ys-work__cap .ys-arrow{width:20px;height:20px;margin-bottom:14px}
.ys-work__cat{font-size:12px;font-weight:500;letter-spacing:.04em;line-height:1.6;opacity:.92}
.ys-work__name{font-family:var(--f-mix);font-size:clamp(22px,2.7vw,40px);font-weight:600;line-height:1.2;letter-spacing:-.02em;margin-top:8px}
.ys-work:nth-child(4n+2) .ys-work__name,.ys-work:nth-child(4n+3) .ys-work__name{font-size:clamp(20px,1.9vw,28px)}
.ys-work__media::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.42));z-index:1;pointer-events:none}
.ys-work[data-tone="paper"]{color:var(--c-ink)}
.ys-work[data-tone="paper"] .ys-work__media::after{display:none}
.ys-work[data-tone="paper"] .ys-work__cap{text-shadow:none}
.ys-work__title{margin-top:18px;font-size:15px;line-height:1.85;font-weight:500;color:var(--c-ink);max-width:36em}
.ys-cta-dot{position:absolute;z-index:3;width:clamp(76px,6.6vw,96px);height:clamp(76px,6.6vw,96px);border-radius:50%;background:var(--c-dot);color:var(--c-dot-ink);display:grid;place-items:center;text-align:center;
  font-size:12px;font-weight:700;line-height:1.35;letter-spacing:.02em;right:clamp(14px,2vw,28px);top:clamp(14px,2vw,28px);transition:transform .5s var(--e-out);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .ys-work .ys-cta-dot{transform:scale(0)}
  .ys-work:hover .ys-cta-dot,.ys-work:focus-visible .ys-cta-dot{transform:translate(var(--dx,0),var(--dy,0)) scale(1)}
  .ys-work:hover .ys-work__bg{transform:scale(1.04)}
  .ys-work:hover .ys-work__shot{transform:translateY(-2%) scale(1.03)}
  .ys-work:hover .ys-work__shot--photo{transform:scale(1.05)}
}

/* ---------- 13. Index rows（主要ページへの大きな行） ---------- */
.ys-rows{list-style:none;border-top:1px solid var(--c-line)}
.ys-row{border-bottom:1px solid var(--c-line)}
.ys-row a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) 56px;align-items:center;gap:24px;padding:clamp(26px,3vw,44px) 0;position:relative}
.ys-row__name{font-size:clamp(30px,4.4vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1.2;transition:transform .6s var(--e-out),color .4s}
.ys-row__name small{display:block;font-family:var(--f-en);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--c-mute);margin-bottom:6px}
.ys-row__desc{font-size:15px;line-height:1.95;color:var(--c-ink-2);font-weight:500}
.ys-row__desc b{display:block;font-size:clamp(16px,1.35vw,19px);color:var(--c-ink);margin-bottom:6px;line-height:1.6}
.ys-row__go{width:56px;height:56px;border-radius:50%;border:1px solid var(--c-line);display:grid;place-items:center;transition:background .4s,border-color .4s,color .4s}
.ys-row__go svg{width:16px;height:16px;transition:transform .5s var(--e-out)}
.ys-row a:hover .ys-row__name{transform:translateX(14px);color:var(--c-hl)}
.ys-row a:hover .ys-row__go{background:var(--c-fill);border-color:var(--c-fill);color:#fff}
.ys-row a:hover .ys-row__go svg{transform:rotate(-45deg)}

/* ---------- 14. Editorial list（お知らせ・実務メモ） ---------- */
.ys-elist{list-style:none;border-top:1px solid var(--c-line)}
.ys-elist li{border-bottom:1px solid var(--c-line)}
.ys-elist a{display:grid;grid-template-columns:150px 180px minmax(0,1fr) 40px;gap:24px;align-items:baseline;padding:28px 0;transition:background .4s}
.ys-elist time{font-family:var(--f-en);font-size:14px;font-weight:500}
.ys-elist .cat{font-size:12px;font-weight:500;color:var(--c-mute);letter-spacing:.04em}
.ys-elist .ttl{font-size:clamp(16px,1.35vw,19px);font-weight:700;line-height:1.7;letter-spacing:-.01em}
.ys-elist .ttl+p{margin-top:6px;font-size:14px;line-height:1.9;color:var(--c-ink-2);font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ys-elist .go{justify-self:end;transition:transform .5s var(--e-out)}
.ys-elist a:hover .ttl{color:var(--c-hl)}
.ys-elist a:hover .go{transform:translateX(6px)}

/* ---------- 15. Section heading ---------- */
.ys-shead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 40px;margin-bottom:clamp(40px,5vw,72px)}
.ys-shead__l .ys-label{margin-bottom:clamp(16px,2vw,26px)}
.ys-shead__l .ys-label .ys-arrow{width:22px;height:22px}

/* ---------- 16. Group block（オレンジ面×暗色の交差） ---------- */
.ys-group{position:relative;background:var(--c-night);color:#fff;padding:var(--sy-lg) var(--gx);overflow:hidden}
.ys-group__block{position:absolute;left:var(--gx);bottom:0;width:min(30vw,430px);height:42%;background:var(--c-navy)}
.ys-group__slant{position:absolute;right:-8vw;top:0;width:42vw;height:58%;background:linear-gradient(180deg,var(--c-violet),var(--c-navy));clip-path:polygon(34% 0,100% 0,66% 100%,0 100%)}
.ys-group__inner{position:relative;z-index:1}
.ys-group__name{font-family:var(--f-en);font-size:var(--t-giant);font-weight:500;line-height:1.05;letter-spacing:-.02em}
.ys-group__body{margin-top:clamp(48px,7vw,110px)}
.ys-group__lead{font-size:var(--t-lead);font-weight:700;line-height:1.5;letter-spacing:-.03em}
.ys-structure{list-style:none;margin-top:44px;display:grid;gap:0;border-top:1px solid var(--c-line-inv)}
.ys-structure li{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--c-line-inv);font-size:14px;line-height:1.8}
.ys-structure b{font-family:var(--f-en);font-weight:600;letter-spacing:.04em;font-size:13px;color:var(--c-hl)}
.ys-structure span{color:rgba(255,255,255,.82)}
.ys-structure strong{display:block;font-size:17px;color:#fff;margin-bottom:2px}

/* ---------- 17. Next / ask（参照の「다음 작품이 궁금하신가요?」） ---------- */
.ys-ask{padding:var(--sy) var(--gx)}
.ys-ask h2{font-size:var(--t-h2);font-weight:700;line-height:1.45;letter-spacing:-.03em;margin-bottom:22px}

/* ---------- 18. Footer ---------- */
.ys-footer{background:var(--c-night);color:#fff;position:relative;overflow:hidden}
.ys-footer__cta{padding:var(--sy) var(--gx) 0}
.ys-footer__cta .ys-label{display:block}
.ys-footer__cta .ys-arrow{display:block;margin-bottom:24px}
.ys-footer__cta h2{font-size:var(--t-h2);font-weight:700;line-height:1.45;letter-spacing:-.03em;margin-top:18px;max-width:20em}
.ys-footer__cta p{margin-top:20px;max-width:40em;color:rgba(255,255,255,.7);font-size:15px;line-height:2}
.ys-footer__cta .ys-hero__actions{margin-top:36px}
.ys-footer__marq{display:block;margin-top:clamp(40px,6vw,80px);color:#fff;transition:color .4s}
.ys-footer__marq:hover{color:var(--c-hl)}
.ys-footer__nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;padding:clamp(56px,7vw,100px) var(--gx) clamp(40px,5vw,72px);border-top:1px solid var(--c-line-inv);margin-top:clamp(40px,5vw,72px)}
.ys-footer__nav h3{font-family:var(--f-en);font-size:12px;font-weight:500;letter-spacing:.08em;color:rgba(255,255,255,.45);margin-bottom:14px}
.ys-footer__nav ul{list-style:none}
.ys-footer__nav li{margin:2px 0}
.ys-footer__nav a{font-size:14px;line-height:2;color:rgba(255,255,255,.82);transition:color .3s}
.ys-footer__nav a:hover{color:var(--c-hl)}
.ys-footer__nav .grp{margin-top:12px;font-size:12px;color:rgba(255,255,255,.5)}
.ys-footer__nav .grp:first-child{margin-top:0}
.ys-footer__brand .ys-logo{width:96px;background:#fff}
.ys-footer__brand p{margin-top:18px;font-size:14px;line-height:1.9;color:rgba(255,255,255,.7)}
.ys-footer__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 var(--hd-pad-x);height:100px;font-family:var(--f-mix);font-size:14px;font-weight:500}
.ys-footer__bar>:last-child{justify-self:end}
.ys-footer__top{display:inline-flex;align-items:center;gap:22px}
.ys-footer__top svg{width:14px;height:14px}

/* ---------- 19. Floating CTA（横長の追従導線） ----------
   墨色の面×白文字。左に小見出し（::before で描画＝リンクのテキストは「お問い合わせ」のまま）と主文、右に細線の矢印。
   明るい面ではパネル自体が輪郭になり、暗い面では淡いブルーグレーの細線で輪郭を出す。DOM 上はフッターの後ろにあるため、非表示中でも Tab で来たら表示する。 */
.ys-float{position:fixed;right:clamp(16px,2.8vw,40px);bottom:clamp(16px,2.8vw,40px);z-index:150;
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:180px;height:68px;padding:0 20px 0 22px;border-radius:2px;
  background:var(--c-ink-0);color:#fff;border:1px solid rgba(177,190,203,.38);box-shadow:0 14px 32px -14px rgba(0,0,0,.55);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .35s var(--e-out),transform .5s var(--e-out),background-color .25s,color .25s,border-color .25s}
.ys-float.is-on{opacity:1;transform:none;pointer-events:auto}
.ys-float__txt{display:flex;flex-direction:column;gap:5px;line-height:1}
.ys-float__txt[data-en]::before{content:attr(data-en);font-family:var(--f-en);font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--c-mist);transition:color .25s}
.ys-float__ja{font-size:16px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.ys-float__arw{flex:none;display:block;width:22px;height:22px;transition:transform .3s var(--e-out)}
.ys-float__arw svg{display:block;width:100%;height:100%}
.ys-float:hover,.ys-float:focus-visible{background:#fff;color:var(--c-ink-0);border-color:var(--c-ink-0)}
.ys-float:hover .ys-float__txt::before,.ys-float:focus-visible .ys-float__txt::before{color:var(--c-navy)}
.ys-float:hover .ys-float__arw,.ys-float:focus-visible .ys-float__arw{transform:translate(3px,-3px)}
.ys-float:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 5px var(--c-ink-0),0 14px 32px -14px rgba(0,0,0,.55)}
/* 退避（同じ行き先の大きな導線が見えている間）。Tab で来た時だけは見せる（見えない場所にフォーカスを置かない） */
.ys-float.is-on.is-yield{opacity:0;transform:translateY(14px);pointer-events:none}
.ys-float:focus-visible{opacity:1!important;transform:none!important;pointer-events:auto!important}
/* メニュー表示中は Tab の対象からも外す */
html.ys-menu-open .ys-float{opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;transition:opacity .25s,transform .35s var(--e-out),visibility 0s linear .35s}
@media (max-width:767px){
  .ys-float{right:max(16px,calc(env(safe-area-inset-right) + 12px));bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));
    min-width:0;height:48px;gap:12px;padding:0 16px 0 18px}
  .ys-float__txt[data-en]::before{content:none}
  .ys-float__ja{font-size:14px}
  .ys-float__arw{width:18px;height:18px}
  /* スマホでは Cookie 案内が画面下を占めるので、閉じるまで追従導線を出さない */
  body:has(.cookie-consent.is-in) .ys-float{opacity:0;visibility:hidden;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
  .ys-float,.ys-float.is-on,html.ys-menu-open .ys-float,.ys-float.is-on.is-yield{transform:none;transition:none}
  .ys-float__arw,.ys-float:hover .ys-float__arw,.ys-float:focus-visible .ys-float__arw{transform:none;transition:none}
}
@media (forced-colors:active){.ys-float{border-color:LinkText}}

/* ---------- 20. Reveal ---------- */
.js .ys-rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--e-out),transform 1.1s var(--e-out);transition-delay:var(--rv-d,0s)}
.js .ys-rv.is-in{opacity:1;transform:none}
.js .ys-lines .ln>span{transform:translateY(105%);transition:transform 1.15s var(--e-out);transition-delay:calc(var(--rv-d,0s) + var(--i,0) * .09s)}
.js .ys-lines.is-in .ln>span{transform:none}
.js .ys-img-rv{clip-path:inset(100% 0 0 0)}
.js .ys-img-rv>:not(.ys-work__cap):not(.ys-cta-dot){transform:scale(1.18)}
.js .ys-img-rv.is-in{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--e-in-out)}
.js .ys-img-rv.is-in>:not(.ys-work__cap):not(.ys-cta-dot){transform:none;transition:transform 1.6s var(--e-out)}
.js .ys-img-rv .ys-work__cap{opacity:0;transform:translateY(16px);transition:opacity .8s .5s,transform 1s .5s var(--e-out)}
.js .ys-img-rv.is-in .ys-work__cap{opacity:1;transform:none}

/* ---------- 21. Case list（cs-card をビルダー出力のまま非対称に再構成） ---------- */
.ys-case-grid .cs-filter-row+.cs-filter-row{margin-top:14px}
.ys-case-grid .cs-filter-row:last-of-type{margin-bottom:clamp(56px,7vw,110px)}
.ys-case-grid .cs-filter-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:start}
.ys-case-grid .cs-filter-label{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--c-mute);padding-top:10px}
.insights-filter{display:flex;flex-wrap:wrap;gap:8px}
.if-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border:1px solid var(--c-line);border-radius:999px;font-size:13px;font-weight:500;line-height:1;background:#fff;color:var(--c-ink);transition:background .3s,border-color .3s,color .3s}
.if-chip:hover{border-color:var(--c-ink)}
.if-chip.is-active{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.ys-case-grid .cs-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:clamp(72px,9vw,140px);align-items:start}
.ys-case-grid .cs-card{position:relative;display:block;color:var(--c-ink);grid-column:span 6}
.ys-case-grid .cs-card:nth-child(4n+1){grid-column:1 / span 7}
.ys-case-grid .cs-card:nth-child(4n+2){grid-column:9 / span 4;margin-top:clamp(100px,14vw,220px)}
.ys-case-grid .cs-card:nth-child(4n+3){grid-column:2 / span 5;margin-top:clamp(-60px,-5vw,-110px)}
.ys-case-grid .cs-card:nth-child(4n+4){grid-column:7 / span 6;margin-top:clamp(40px,7vw,120px)}
.ys-case-grid .cs-card-visual{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(160deg,#f7f5f2,#e5e0d9);display:grid;place-items:center;padding:9%}
.ys-case-grid .cs-card:nth-child(4n+2) .cs-card-visual,.ys-case-grid .cs-card:nth-child(4n+3) .cs-card-visual{aspect-ratio:4/5}
.ys-case-grid .cs-card:nth-child(3n+1) .cs-card-visual{background:var(--c-fill-grad)}
.ys-case-grid .cs-card:nth-child(3n+2) .cs-card-visual{background:linear-gradient(160deg,#2a2a2b,var(--c-night) 65%)}
.ys-case-grid .cs-card-visual img{width:100%;height:auto;max-height:100%;object-fit:contain;box-shadow:0 26px 50px -16px rgba(0,0,0,.45),0 6px 14px rgba(0,0,0,.16);border-radius:3px;background:#fff;transition:transform 1.1s var(--e-out)}
.ys-case-grid .cs-card-visual::after{content:"事例を見る";position:absolute;right:clamp(14px,2vw,26px);top:clamp(14px,2vw,26px);width:clamp(76px,6.6vw,96px);height:clamp(76px,6.6vw,96px);border-radius:50%;background:var(--c-dot);color:var(--c-dot-ink);display:grid;place-items:center;font-size:12px;font-weight:700;transition:transform .5s var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .ys-case-grid .cs-card-visual::after{transform:scale(0)}
  .ys-case-grid .cs-card:hover .cs-card-visual::after,.ys-case-grid .cs-card:focus-visible .cs-card-visual::after{transform:scale(1)}
  .ys-case-grid .cs-card:hover .cs-card-visual img{transform:translateY(-2%) scale(1.035)}
}
.ys-case-grid .cs-card-meta{display:flex;gap:14px;margin-top:22px;font-size:12px;font-weight:500;color:var(--c-mute);letter-spacing:.03em;line-height:1.6}
.ys-case-grid .cs-num{font-family:var(--f-en);color:var(--c-hl);font-weight:600}
.ys-case-grid .cs-card-client{display:flex;align-items:center;gap:12px;margin-top:12px}
.ys-case-grid .cs-card-logo{height:24px;width:auto;max-width:110px;object-fit:contain}
.ys-case-grid .cs-card-client-name{font-size:13px;font-weight:700}
.ys-case-grid .cs-card-title{font-size:clamp(20px,1.95vw,28px);font-weight:700;line-height:1.5;letter-spacing:-.03em;margin-top:12px;transition:color .35s}
.ys-case-grid .cs-card:hover .cs-card-title{color:var(--c-hl)}
.ys-case-grid .cs-card-result{margin-top:12px;font-size:14px;line-height:1.95;color:var(--c-ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ys-case-grid .cs-card-axis{margin-top:12px;font-size:12px;color:var(--c-mute);display:flex;flex-wrap:wrap;gap:4px 8px}
.ys-case-grid .cs-card-foot{margin-top:14px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.ys-case-grid .cs-card-tags{display:flex;flex-wrap:wrap;gap:6px}
.ys-case-grid .cs-card-tag{font-size:11px;padding:3px 10px;border:1px solid var(--c-line);border-radius:999px;color:var(--c-ink-2)}
.ys-case-grid .cs-card-link{font-family:var(--f-mix);font-size:13px;font-weight:600;white-space:nowrap}
.ys-case-grid .cs-empty{padding:56px 0;font-size:14px;color:var(--c-mute)}

/* ---------- 22. List cards（メソッド・実務メモ一覧の既存カードを編集的に） ---------- */
.ys-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4vw,64px) clamp(20px,2.4vw,36px)}
.ys-card{display:block;color:var(--c-ink)}
.ys-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--c-paper-2)}
.ys-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out)}
.ys-card:hover .ys-card__media img{transform:scale(1.05)}
.ys-card__meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:18px;font-size:12px;color:var(--c-mute);font-weight:500}
.ys-card__meta time{font-family:var(--f-en)}
.ys-card__ttl{margin-top:8px;font-size:clamp(17px,1.4vw,20px);font-weight:700;line-height:1.65;letter-spacing:-.01em;transition:color .35s}
.ys-card:hover .ys-card__ttl{color:var(--c-hl)}
.ys-card__desc{margin-top:8px;font-size:14px;line-height:1.9;color:var(--c-ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 23. About / business 等の交互配置 ---------- */
.ys-big-head{font-family:var(--f-ja);font-size:var(--t-h1);font-weight:600;line-height:1.18;letter-spacing:-.045em}
.ys-objective{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;margin-top:clamp(40px,5vw,64px)}
.ys-objective__label{font-family:var(--f-mix);font-size:15px;font-weight:600;display:flex;gap:10px}
.ys-objective__label::before{content:"»";font-family:var(--f-en)}
.ys-objective__body{max-width:640px}
.ys-objective__body p{font-size:15px;line-height:2.05;font-weight:500;color:var(--c-ink-2)}
.ys-objective__body p+p{margin-top:1.2em}
.ys-alt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,44px);align-items:start}
.ys-alt+.ys-alt{margin-top:clamp(96px,12vw,180px)}
.ys-alt:nth-of-type(even) .ys-alt__media{order:2}
.ys-alt__media{aspect-ratio:4/5;overflow:hidden;position:relative}
.ys-alt__media img{width:100%;height:100%;object-fit:cover}
.ys-alt__text h3{font-size:var(--t-h2);font-weight:700;line-height:1.35;letter-spacing:-.03em}
.ys-alt__text .ys-meta{display:block;margin:clamp(24px,3vw,40px) 0 14px}
.ys-alt__text p{font-size:15px;line-height:2.05;font-weight:500;color:var(--c-ink-2)}
.ys-alt__text p+p{margin-top:1.1em}
.ys-graphic{position:absolute;inset:0;background:var(--c-night);overflow:hidden}
.ys-graphic::before{content:"";position:absolute;inset:-10% -20% auto auto;width:70%;height:120%;background:var(--c-navy);clip-path:polygon(40% 0,100% 0,60% 100%,0 100%)}
.ys-graphic::after{content:"";position:absolute;left:12%;bottom:0;width:38%;height:34%;background:var(--c-violet);opacity:.9}
.ys-graphic--b{background:var(--c-navy)}
.ys-graphic--b::before{background:var(--c-night)}
.ys-graphic--b::after{background:var(--c-deep)}
.ys-graphic--c{background:var(--c-paper-2)}
.ys-graphic--c::before{background:var(--c-navy)}
.ys-graphic--c::after{background:var(--c-night);opacity:1;left:auto;right:0;top:0;bottom:auto;width:30%;height:26%}
.ys-graphic__word{position:absolute;z-index:2;left:8%;bottom:7%;font-family:var(--f-en);font-weight:500;font-size:clamp(34px,4.6vw,72px);line-height:1;color:#fff;letter-spacing:-.02em}
.ys-graphic--c .ys-graphic__word{color:var(--c-ink)}

/* 定義リスト（会社概要など） */
.ys-dl{border-top:1px solid var(--c-line)}
.ys-dl>div{display:grid;grid-template-columns:minmax(120px,3fr) minmax(0,9fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--c-line);font-size:15px;line-height:1.95}
.ys-dl dt{font-weight:700}
.ys-dl dd{color:var(--c-ink-2);font-weight:500}
.ys-theme-dark .ys-dl,.ys-theme-dark .ys-dl>div{border-color:var(--c-line-inv)}
.ys-theme-dark .ys-dl dd{color:rgba(255,255,255,.75)}

/* ---------- 24. Contact ---------- */
.ys-contact-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,6vw,96px);align-items:start}
.ys-form .form-row,.ys-form .field{margin-bottom:34px}
.ys-form label,.ys-form .form-label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;letter-spacing:.02em}
.ys-form .req,.ys-form .form-req{color:var(--c-hl);font-size:11px;margin-left:8px;font-weight:700}
.ys-form input[type=text],.ys-form input[type=email],.ys-form input[type=tel],.ys-form input:not([type]),.ys-form select,.ys-form textarea{
  width:100%;font:inherit;font-size:16px;color:var(--c-ink);background:transparent;border:0;border-bottom:1px solid rgba(23,23,22,.35);border-radius:0;padding:12px 0;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.ys-form select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23171716' fill='none' stroke-width='1.4'/%3E%3C/svg%3E") right 4px center no-repeat;padding-right:24px}
.ys-form textarea{min-height:160px;resize:vertical;line-height:1.8}
.ys-form input:focus,.ys-form select:focus,.ys-form textarea:focus{outline:0;border-bottom:2px solid var(--c-hl)}
.ys-form input::placeholder,.ys-form textarea::placeholder{color:#a9a49d}
.ys-form button[type=submit],.ys-form .form-submit{margin-top:8px}

/* ---------- 25. 詳細ページ（事例・メソッド・実務メモ・お知らせ）— 旧ヘッダーを再設計 ---------- */
.insights-article-hero{position:relative;padding:calc(var(--hd-h) + clamp(64px,12vh,150px)) var(--gx) clamp(56px,7vw,104px);background:var(--c-paper);color:var(--c-ink)}
.insights-article-hero .container{padding:0;max-width:1200px;margin:0}
.insights-article-hero .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;letter-spacing:.03em;color:var(--c-mute);margin-bottom:clamp(32px,4.4vw,60px)}
.insights-article-hero .crumb a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.insights-article-hero .crumb span:last-child{max-width:40em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insights-article-hero .ia-cat{display:flex;align-items:center;gap:12px;font-size:var(--t-sub);font-weight:500;line-height:1.5;margin-bottom:clamp(20px,2.6vw,36px)}
.insights-article-hero .ia-cat::before{content:"";width:clamp(20px,2vw,28px);height:clamp(20px,2vw,28px);flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 8v11H8' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 8v11H8' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat}
.insights-article-hero h1{font-size:clamp(32px,4.6vw,72px);font-weight:600;line-height:1.28;letter-spacing:-.045em;max-width:16em}
.insights-article-hero .ia-desc{margin-top:clamp(28px,3.4vw,48px);max-width:46em;font-size:clamp(15px,1.15vw,17px);line-height:2.05;font-weight:500;color:var(--c-ink-2)}
.insights-article-hero .ia-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:clamp(28px,3vw,44px);padding-top:22px;border-top:1px solid var(--c-line);font-family:var(--f-mix);font-size:13px;font-weight:500}
.insights-article-hero .ia-tags{display:flex;flex-wrap:wrap;gap:6px}
.insights-article-hero .ia-tag{font-size:12px;padding:4px 12px;border:1px solid var(--c-line);border-radius:999px;color:var(--c-ink-2)}
.insights-article-hero .cs-hero-client{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-top:clamp(24px,2.6vw,36px);font-size:15px;font-weight:700}
.insights-article-hero .cs-hero-client-label{font-size:11px;font-weight:500;color:var(--c-mute);letter-spacing:.06em}
.insights-article-hero .cs-hero-note{margin-top:14px;font-size:12px;color:var(--c-mute)}
/* 事例詳細はグラデーションのヒーロー */
.ys-detail-case .insights-article-hero{background:var(--g-hero-short);color:#fff}
.ys-detail-case .insights-article-hero .crumb,.ys-detail-case .insights-article-hero .cs-hero-client-label,.ys-detail-case .insights-article-hero .cs-hero-note{color:rgba(255,255,255,.72)}
.ys-detail-case .insights-article-hero .ia-desc{color:rgba(255,255,255,.84)}
.ys-detail-case .insights-article-hero .ia-meta{border-color:var(--c-line-inv)}
.ys-detail-case .insights-article-hero .ia-tag{border-color:var(--c-line-inv);color:rgba(255,255,255,.88)}
.ys-detail-case .insights-article-hero h1{max-width:18em}

/* 本文の器 */
main>.block{padding:clamp(56px,7vw,104px) 0 var(--sy)}
.insights-article-body,.article-body{max-width:820px;margin:0 auto;font-size:16px;line-height:2.05}
.insights-article-body h2,.article-body h2{font-size:clamp(24px,2.3vw,34px)!important;font-weight:700!important;line-height:1.5!important;letter-spacing:-.03em!important}
.insights-article-body h3,.article-body h3{letter-spacing:-.02em}
.article-section{scroll-margin-top:calc(var(--hd-h) + 16px)}
.ia-hero-visual{max-width:none!important;padding:0 var(--gx)!important;margin:0!important}
.ia-hero-visual img{border:0!important}

/* 旧 page-hero / contact セクション（既存マークアップが残るページ向けの安全側定義） */
.page-hero{padding:calc(var(--hd-h) + 80px) var(--gx) 80px;background:var(--g-hero-short);color:#fff;position:relative}
.page-hero .page-hero-bg{display:none}
.crumb{font-size:12px}
.crumb .sep{opacity:.5}

/* ---------- 26. 404 ---------- */
.ys-404{min-height:100vh;min-height:100svh;background:var(--g-hero-short);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hd-h) + 40px) var(--gx) clamp(64px,10vh,120px)}

/* ---------- 27. Responsive ---------- */
@media (max-width:1024px){
  .ys-elist a{grid-template-columns:120px minmax(0,1fr) 28px;row-gap:6px}
  .ys-elist .cat{grid-column:2;grid-row:1}
  .ys-elist .ttl-wrap{grid-column:2}
  .ys-elist time{grid-row:1 / span 2}
  .ys-elist .go{grid-row:1 / span 2;align-self:center}
  .ys-footer__nav{grid-template-columns:1fr 1fr}
  .ys-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .ys-split,.ys-alt,.ys-contact-grid{grid-template-columns:1fr}
  .ys-col-r{grid-column:1}
  .ys-alt:nth-of-type(even) .ys-alt__media{order:0}
  .ys-hero{min-height:auto}
  .ys-hero__first{padding-bottom:110px}
  .ys-hero__second{padding:72px 0 96px}
  .ys-scroll-cue span{display:none}
  .ys-works__head{flex-direction:column;align-items:flex-start}
  /* 参照のSP実測：2列のまま幅違い（234px / 152px）で段違い */
  .ys-works__list{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:12px;row-gap:56px}
  .ys-work:nth-child(4n+1){grid-column:1 / span 12}
  .ys-work:nth-child(4n+2){grid-column:1 / span 7;margin-top:0}
  .ys-work:nth-child(4n+3){grid-column:6 / span 7;margin-top:-20px}
  .ys-work:nth-child(4n+4){grid-column:1 / span 12;margin-top:0}
  .ys-work:nth-child(4n+2) .ys-work__media,.ys-work:nth-child(4n+3) .ys-work__media{aspect-ratio:4/5}
  .ys-work:nth-child(4n+1) .ys-work__media,.ys-work:nth-child(4n+4) .ys-work__media{aspect-ratio:1/1}
  .ys-work__name{font-size:24px!important}
  .ys-work:nth-child(4n+2) .ys-work__name,.ys-work:nth-child(4n+3) .ys-work__name{font-size:18px!important}
  .ys-work:nth-child(4n+2) .ys-work__title,.ys-work:nth-child(4n+3) .ys-work__title{font-size:13px}
  .ys-cta-dot{width:68px;height:68px;font-size:11px}
  .ys-row a{grid-template-columns:minmax(0,1fr) 44px;gap:10px 16px}
  .ys-row__desc{grid-column:1 / -1;grid-row:2}
  .ys-row__go{width:44px;height:44px;grid-column:2;grid-row:1}
  .ys-elist a{grid-template-columns:minmax(0,1fr) 20px;gap:4px 12px;padding:22px 0}
  .ys-elist time,.ys-elist .cat{grid-column:1;grid-row:auto;display:inline}
  .ys-elist .meta-sp{display:flex;gap:12px;align-items:baseline}
  .ys-elist .ttl-wrap{grid-column:1}
  .ys-elist .go{grid-column:2;grid-row:1 / span 3}
  .ys-group__block{width:44vw;height:22%}
  .ys-group__slant{width:70vw;height:22%;right:-28vw}
  .ys-group__block{width:38vw;height:90px}
  .ys-structure li{grid-template-columns:1fr;gap:6px}
  .ys-footer__nav{grid-template-columns:1fr;gap:28px}
  .ys-footer__bar{grid-template-columns:1fr auto;height:auto;padding:24px var(--hd-pad-x) 32px;row-gap:12px}
  .ys-footer__bar>:nth-child(2){grid-column:1 / -1;grid-row:2;font-size:12px;opacity:.7}
  .ys-cards{grid-template-columns:1fr}
  .ys-objective{grid-template-columns:1fr;gap:14px}
  .ys-dl>div{grid-template-columns:1fr;gap:4px;padding:18px 0}
  .ys-filter .cs-filter-row{grid-template-columns:1fr;gap:8px}
  .ys-case-grid .cs-filter-label{padding-top:0}
  .insights-filter{flex-wrap:nowrap;overflow-x:auto;margin-right:calc(var(--gx) * -1);padding-right:var(--gx);scrollbar-width:none}
  .insights-filter::-webkit-scrollbar{display:none}
  .if-chip{flex:none}
  .ys-case-grid .cs-grid{grid-template-columns:1fr;row-gap:64px}
  .ys-case-grid .cs-card:nth-child(n){grid-column:1;margin-top:0}
  .ys-case-grid .cs-card:nth-child(2n) {width:86%;margin-left:auto}
  .ys-case-grid .cs-card-visual,.ys-case-grid .cs-card:nth-child(n) .cs-card-visual{aspect-ratio:4/3}
  .ys-phero__shape{width:80vw;right:-30vw;opacity:.9}
  .ys-phero__shape::after{display:none}
  .insights-article-hero .crumb span:last-child{max-width:16em}
}

/* ---------- 28. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .ys-rv,.js .ys-lines .ln>span,.js .ys-img-rv,.js .ys-img-rv>*{opacity:1!important;transform:none!important;clip-path:none!important}
  .ys-marquee__track{animation:none!important}
  .ys-marquee{overflow-x:auto;scrollbar-width:none}
  html.ys-preload .ys-loader{display:none}
  .ys-fill{-webkit-text-fill-color:currentColor;background:none}
}

/* ---------- 29. Cookie banner（cookie-consent.js が生成） ---------- */
.cookie-consent{position:fixed;left:clamp(12px,2.8vw,40px);bottom:clamp(12px,2.8vw,40px);z-index:160;width:min(420px,calc(100vw - 24px));background:var(--c-night);color:#fff;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.45);transform:translateY(150%);opacity:0;transition:transform .7s var(--e-out),opacity .5s}
.cookie-consent.is-in{transform:none;opacity:1}
.cookie-consent.is-out{transform:translateY(150%);opacity:0}
.cookie-consent .cc-inner{position:relative;padding:22px 24px 22px}
.cookie-consent .cc-eyebrow{font-family:var(--f-en);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--c-hl)}
.cookie-consent .cc-text{margin-top:8px;font-size:12.5px;line-height:1.85;color:rgba(255,255,255,.82)}
.cookie-consent .cc-text a{text-decoration:underline;text-underline-offset:3px}
.cookie-consent .cc-actions{display:flex;margin-top:14px}
.cookie-consent .cc-accept{min-height:40px;padding:0 20px;border:1px solid #fff;font-size:13px;font-weight:700;transition:background .3s,color .3s}
.cookie-consent .cc-accept:hover{background:#fff;color:var(--c-ink)}
.cookie-consent .cc-close{position:absolute;right:10px;top:8px;width:36px;height:36px;font-size:18px;color:rgba(255,255,255,.7)}
html.ys-menu-open .cookie-consent{display:none}

/* 実測メモ（ystudio.co.kr, 2026-10-24, Chrome DevTools 1440×900 / 390×844）
   hero見出し Poppins 500 158.4px/201.6px（390: 54.6px/70.2px）・副見出し 24px/36px 500（390: 18px）
   本文導入 36px/52px 600 -1.5px（390: 30px/46px）・h3 44.8px/66.4px 600 -1px（390: 42px）
   左右余白 120px（390: 20px）・ヘッダー左右 60px・セクション上下 115.2px・ヒーロー高さ 1939px（約2.15画面）
   配色は2026-10-24に暗い青系へ変更（参考画像から採色: #282734 / #0B0E13 / #0C131A / #000000 / #193550 / 文字 #b1becb）。参照サイトのオレンジ配色は不使用
   SPのWorks: 2列（234px / 152px）段違い、画像比 約3:4 */

/* ---------- 30. About / 下層共通の追加部品 ---------- */
.ys-strong{color:var(--c-ink);font-weight:700}
.ys-theme-dark .ys-strong{color:#fff}
.ys-note{margin-top:28px;font-size:12px;line-height:1.9;color:var(--c-mute)}
.ys-theme-dark .ys-note{color:rgba(255,255,255,.5)}
.ys-about-open{position:relative;background:linear-gradient(180deg,var(--c-night),var(--c-night));color:#fff;padding:clamp(56px,8vw,120px) var(--gx) clamp(120px,14vw,200px);overflow:hidden}
.ys-about-open__block{position:absolute;left:calc(var(--gx) + 8%);bottom:0;width:min(30vw,430px);height:58%;background:var(--c-navy)}
.ys-about-open .ys-split{position:relative;z-index:1}
.ys-about-sec__head{margin-bottom:clamp(8px,1vw,16px)}
.ys-about-sec .ys-objective,.ys-section .ys-objective{margin-left:0}
.ys-alts{margin-top:clamp(80px,10vw,150px)}
.ys-mini-links{list-style:none;margin-top:18px;border-top:1px solid var(--c-line)}
.ys-mini-links li{border-bottom:1px solid var(--c-line)}
.ys-mini-links a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;font-size:15px;font-weight:700;transition:color .3s,padding .4s var(--e-out)}
.ys-mini-links a:hover{color:var(--c-hl);padding-left:8px}
.ys-mini-links .soon{font-size:11px;font-weight:500;color:var(--c-mute);margin-left:8px}
.ys-pmv{background:var(--c-night);color:#fff;padding:var(--sy) var(--gx)}
.ys-pmv dl{border-top:1px solid var(--c-line-inv)}
.ys-pmv dl>div{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;padding:clamp(28px,3.4vw,48px) 0;border-bottom:1px solid var(--c-line-inv);align-items:baseline}
.ys-pmv dt{font-family:var(--f-en);font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--c-hl)}
.ys-pmv dd{font-size:clamp(24px,3.3vw,48px);font-weight:700;line-height:1.4;letter-spacing:-.04em}
.ys-principles{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px);counter-reset:p}
.ys-principles li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;padding:32px 0;border-top:1px solid var(--c-line)}
.ys-principles .n{grid-row:1 / span 2;font-family:var(--f-en);font-size:14px;font-weight:600;color:var(--c-hl);padding-top:6px}
.ys-principles h3{font-size:clamp(20px,1.9vw,26px);font-weight:700;line-height:1.5;letter-spacing:-.03em}
.ys-principles p{margin-top:10px;font-size:14.5px;line-height:2;color:var(--c-ink-2);font-weight:500}
.ys-message{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);margin-top:clamp(40px,5vw,64px);align-items:start}
.ys-message__fig{position:sticky;top:calc(var(--hd-h) + 24px)}
.ys-message__photo{aspect-ratio:4/5;overflow:hidden;background:var(--c-navy)}
.ys-message__photo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.ys-message__fig figcaption{margin-top:18px;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--c-ink-2)}
.ys-message__fig figcaption b{font-size:22px;color:var(--c-ink);letter-spacing:.02em}
.ys-message__fig .en{font-family:var(--f-en);font-size:12px}
.ys-message__fig .aff{margin-top:8px;font-size:12px;line-height:1.8}
.ys-message__body{max-width:720px}
.ys-message__body p{font-size:16px;line-height:2.15;font-weight:500;color:var(--c-ink-2)}
.ys-message__body p+p{margin-top:1.3em}
.ys-message__body .sign{margin-top:2em;text-align:right;font-weight:700;color:var(--c-ink)}
.ys-members{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px)}
.ys-members li{padding:30px 0;border-top:1px solid var(--c-line-inv)}
.ys-members .role{font-size:12px;color:var(--c-hl);font-weight:700;letter-spacing:.06em}
.ys-members h3{margin-top:8px;font-size:clamp(20px,1.8vw,24px);font-weight:700;letter-spacing:-.01em;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.ys-members h3 .en{font-family:var(--f-en);font-size:12px;font-weight:500;color:rgba(255,255,255,.5)}
.ys-members p{margin-top:12px;font-size:14px;line-height:2;color:rgba(255,255,255,.72)}
.ys-profile{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);margin-top:clamp(40px,5vw,64px);align-items:start}
.ys-profile__photo{aspect-ratio:7/9;overflow:hidden}
.ys-profile__photo img{width:100%;height:100%;object-fit:cover}
.ys-profile__fig figcaption{margin-top:14px;font-size:14px;font-weight:700}
.ys-profile__fig figcaption span{display:block;font-size:11px;color:var(--c-mute);font-weight:500;letter-spacing:.06em}
.ys-dl b{color:var(--c-ink)}
.ys-history{list-style:none;border-top:1px solid var(--c-line)}
.ys-history li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;padding:clamp(24px,2.6vw,36px) 0;border-bottom:1px solid var(--c-line)}
.ys-history time{font-family:var(--f-en);font-size:clamp(22px,2.4vw,34px);font-weight:500;letter-spacing:-.01em;color:var(--c-hl);line-height:1.2}
.ys-history h3{font-size:clamp(17px,1.5vw,21px);font-weight:700;line-height:1.6}
.ys-history p{margin-top:6px;font-size:14.5px;line-height:2;color:var(--c-ink-2)}
.ys-logos{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--c-line);border:1px solid var(--c-line)}
.ys-logos li{background:#fff;aspect-ratio:3/2;display:grid;place-items:center;padding:18%}
.ys-logos img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .4s,opacity .4s}
.ys-logos li:hover img{filter:none;opacity:1}
@media (max-width:1024px){ .ys-logos{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* LOGOS-PART START（会社情報 08 支援実績のロゴ帯 2026-10-24） */
/* ---------- about 08 支援実績：2段のロゴ帯（左→右に無限ループ） ----------
   統合先：ys.css の LOGOS-PART START〜END の範囲をこの内容で差し替え。.ys-logos（recruit で使用）には触れない。
   ロゴは各社の元画像の色のまま表示する（グレースケール・彩度低下・反転・opacity での薄めは一切かけない）。
   ロゴごとの見た目の大きさは li の --s（倍率）と --x/--y（描画範囲の中心合わせ）で調整。元画像は未加工。
   停止ボタンは 2026-10-24 に廃止（ホバー中・フォーカス中の一時停止と、動きを減らす設定での静止表示は維持）。 */
.ys-mq-lead{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;font-size:var(--t-sub);font-weight:500;line-height:1.7;color:var(--c-ink-2)}
.ys-mq-lead strong{font-size:var(--t-h3);font-weight:700;line-height:1.5;letter-spacing:-.02em;color:var(--c-ink)}
.ys-mq-sub{font-size:var(--t-small);line-height:1.9;color:var(--c-mute)}
.ys-mq{
  /* 表示枠の幅 190px@1440 / 128px@390。2560px超の画面では枠を広げ、1組の幅が常に画面幅を超える（継ぎ目の空白防止） */
  --lw:max(clamp(128px,13.2vw,200px),calc(100vw / 12.5 - var(--lg)));
  --lh:calc(var(--lw) / 2);            /* 表示枠は 2:1 */
  --lg:clamp(10px,1.12vw,16px);        /* 枠の間隔 */
  margin-top:clamp(32px,4vw,56px);
}

/* 帯は左右の余白を越えて画面端まで流し、端はフェードで消す */
.ys-mq__rows{display:grid;gap:var(--lg);margin:0 calc(-1 * var(--gx));overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gx),#000 calc(100% - var(--gx)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--gx),#000 calc(100% - var(--gx)),transparent 100%)}
.ys-mq__row{overflow:hidden}
.ys-mq__track{display:flex;width:max-content;will-change:transform;
  animation:ys-mq-ltr var(--dur,56s) linear var(--delay,0s) infinite}
.ys-mq__set{display:flex;list-style:none;margin:0;padding:0}
/* 間隔は gap ではなく li の右余白で持つ（2組の幅を完全に等しくし、継ぎ目のずれを防ぐ） */
.ys-mq__set li{flex:0 0 var(--lw);height:var(--lh);margin-right:var(--lg);display:block;overflow:hidden;background:#fff;border:1px solid var(--c-line);box-sizing:border-box}
.ys-mq__set img{display:block;width:100%;height:100%;object-fit:contain;
  transform:scale(var(--s,.6)) translate(var(--x,0%),var(--y,0%))}
@keyframes ys-mq-ltr{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
/* マウスを重ねている間・キーボードフォーカスが帯の中にある間は一時停止 */
.ys-mq__rows:hover .ys-mq__track,.ys-mq__rows:focus-within .ys-mq__track{animation-play-state:paused}

/* 動きを減らす設定：止めて、全ロゴを折り返しの静的グリッドで表示（複製は非表示） */
@media (prefers-reduced-motion:reduce){
  /* 2段の区切りを外し、27点を1つのグリッドに連続して並べる */
  .ys-mq__rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--lw),1fr));gap:var(--lg);margin:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .ys-mq__row,.ys-mq__track,.ys-mq__set{display:contents}
  .ys-mq__track{animation:none}
  .ys-mq__set li{margin-right:0;height:auto;aspect-ratio:2/1}
  .ys-mq__set--clone{display:none}
}
/* LOGOS-PART END */
@media (max-width:767px){
  .ys-pmv dl>div,.ys-history li{grid-template-columns:1fr;gap:6px}
  .ys-principles,.ys-members{grid-template-columns:1fr}
  .ys-principles li{grid-template-columns:44px minmax(0,1fr)}
  .ys-message,.ys-profile{grid-template-columns:1fr}
  .ys-message__fig{position:static;max-width:300px}
  .ys-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ys-about-open__block{width:40vw;height:36%;left:var(--gx)}
}

/* ---------- 31. Business ---------- */
.ys-biz{position:relative;padding:var(--sy-lg) var(--gx) var(--sy);overflow:hidden;scroll-margin-top:0}
.ys-biz__head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,7fr) minmax(0,3fr);gap:24px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.ys-biz__num{font-family:var(--f-en);font-size:var(--t-giant);font-weight:500;line-height:.9;color:var(--c-hl)}
.ys-theme-navy .ys-biz__num{color:#fff;opacity:.55}
.ys-biz__lead{margin-top:14px;font-size:var(--t-sub);font-weight:700}
.ys-biz__state{font-size:clamp(17px,1.5vw,21px);font-weight:700;text-align:right}
.ys-biz__state span{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;opacity:.6}
.ys-biz__slant{position:absolute;right:-10vw;top:0;width:36vw;height:46%;background:linear-gradient(180deg,var(--c-violet),var(--c-navy));clip-path:polygon(34% 0,100% 0,66% 100%,0 100%);opacity:.95}
.ys-svc{position:relative;z-index:1;list-style:none;border-top:1px solid var(--c-line)}
.ys-theme-dark .ys-svc,.ys-theme-navy .ys-svc,.ys-theme-dark .ys-svc li,.ys-theme-navy .ys-svc li{border-color:rgba(255,255,255,.22)}
.ys-svc li{border-bottom:1px solid var(--c-line)}
.ys-svc a{display:grid;grid-template-columns:64px minmax(0,4fr) minmax(0,6fr) 140px;gap:20px;align-items:baseline;padding:clamp(22px,2.4vw,34px) 0;transition:padding .5s var(--e-out)}
.ys-svc .n{font-family:var(--f-en);font-size:13px;font-weight:600;opacity:.6}
.ys-svc .nm{font-size:clamp(20px,2.2vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1.35}
.ys-svc .ds{font-size:14.5px;line-height:1.9;opacity:.8}
.ys-svc .ds.is-soon{opacity:.5}
.ys-svc .go{justify-self:end;font-family:var(--f-mix);font-size:13px;font-weight:600;white-space:nowrap}
.ys-svc a:hover{padding-left:12px}
.ys-svc a:hover .nm{color:var(--c-hl)}
.ys-theme-dark .ys-svc a:hover .nm{color:var(--c-hl)}
.ys-theme-navy .ys-svc a:hover .nm{color:var(--c-night)}
@media (max-width:767px){
  .ys-biz__head{grid-template-columns:1fr;gap:10px}
  .ys-biz__state{text-align:left}
  .ys-svc a{grid-template-columns:36px minmax(0,1fr);gap:4px 12px}
  .ys-svc .ds,.ys-svc .go{grid-column:2}
  .ys-svc .go{justify-self:start;margin-top:4px}
  .ys-biz__slant{width:70vw;height:18%;right:-30vw}
}

/* ---------- 32. Group ---------- */
.ys-dl--inv,.ys-dl--inv>div{border-color:var(--c-line-inv)}
.ys-dl--inv dd{color:rgba(255,255,255,.8)}
.ys-structure--light{border-color:var(--c-line)}
.ys-structure--light li{border-color:var(--c-line)}
.ys-structure--light span{color:var(--c-ink-2)}
.ys-structure--light strong{color:var(--c-ink)}
.ys-compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(36px,4.4vw,64px)}
.ys-compare__col{padding:clamp(28px,3.4vw,52px);background:var(--c-paper-2)}
.ys-compare__col.is-after{background:var(--c-fill-grad);color:#fff}
.ys-compare__tag{font-family:var(--f-en);font-size:12px;font-weight:600;letter-spacing:.08em;opacity:.7}
.ys-compare h3{margin-top:12px;font-size:clamp(22px,2.2vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1.4}
.ys-compare__sub{margin-top:8px;font-size:14px;line-height:1.9;opacity:.8}
.ys-compare__flow{list-style:none;margin:28px 0;display:grid;gap:10px}
.ys-compare__flow li{padding:16px 18px;background:#fff;color:var(--c-ink);position:relative}
.is-after .ys-compare__flow li{background:rgba(255,255,255,.14);color:#fff}
.ys-compare__flow li+li::before{content:"↓";position:absolute;left:18px;top:-17px;font-size:12px;opacity:.6}
.ys-compare__flow b{display:block;font-size:15px}
.ys-compare__flow span{display:block;margin-top:4px;font-size:12.5px;line-height:1.8;opacity:.75}
.ys-compare__pts{list-style:none;font-size:14px;line-height:2}
.ys-compare__res{margin-top:22px;padding-top:18px;border-top:1px solid currentColor;font-size:13.5px;line-height:1.9}
.ys-compare__res b{display:block;font-size:18px}
@media (max-width:767px){ .ys-compare{grid-template-columns:1fr} }

/* ---------- 33. Recruit ---------- */
.ys-ja-track>span{font-family:var(--f-ja)!important;font-weight:600;letter-spacing:-.04em;font-size:var(--t-giant-ja)!important}
.ys-phero__lede sup{font-size:.7em}
.ys-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.ys-steps li{padding:clamp(22px,2.4vw,34px);background:#fff;position:relative;min-height:240px}
.ys-steps li:not(:last-child)::after{content:"→";position:absolute;right:-16px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--c-hl);z-index:1}
.ys-steps .n{font-family:var(--f-en);font-size:12px;font-weight:600;color:var(--c-hl);letter-spacing:.04em}
.ys-steps b{display:block;margin-top:10px;font-size:clamp(28px,3vw,44px);font-weight:700;letter-spacing:-.04em}
.ys-steps p{margin-top:12px;font-size:14px;line-height:1.95;color:var(--c-ink-2)}
.ys-steps .is-goal{background:var(--c-fill-grad);color:#fff;outline:1px dashed rgba(255,255,255,.7);outline-offset:-10px}
.ys-steps .is-goal .n,.ys-steps .is-goal p{color:#fff}
.ys-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,56px)}
.ys-three>div{border-top:2px solid var(--c-ink);padding-top:22px}
.ys-three h3{font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.03em}
.ys-three p{margin-top:6px;font-size:14px;color:var(--c-ink-2)}
.ys-three .st{margin-top:14px;font-weight:700;color:var(--c-ink)}
.ys-three .st span{display:block;font-size:11px;font-weight:500;color:var(--c-mute);letter-spacing:.06em}
.ys-three ul{list-style:none;margin-top:14px;border-top:1px solid var(--c-line)}
.ys-three li{padding:10px 0;border-bottom:1px solid var(--c-line);font-size:14px;font-weight:500}
.ys-pos{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,64px);padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--c-ink);margin-top:clamp(48px,6vw,88px)}
.ys-pos+.ys-pos{margin-top:0}
.ys-pos__head .id{font-family:var(--f-en);font-size:13px;font-weight:600;color:var(--c-hl)}
.ys-pos__head h3{margin-top:10px;font-size:clamp(26px,2.8vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.3}
.ys-pos__head p{margin-top:12px;font-size:15px;font-weight:700;color:var(--c-ink-2)}
.ys-pos__dl>div{padding:0 0 22px}
.ys-pos__dl dt{font-size:12px;font-weight:700;color:var(--c-hl);letter-spacing:.04em}
.ys-pos__dl dd{margin-top:6px;font-size:15px;line-height:2;color:var(--c-ink-2);font-weight:500}
.ys-pos__body .ys-dl{margin-top:12px}
.ys-recruit-cta{margin-top:clamp(40px,5vw,72px);padding:clamp(32px,4vw,56px);background:var(--c-paper-2);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
.ys-recruit-cta p{font-size:15px;font-weight:700}
@media (max-width:767px){
  .ys-steps,.ys-three,.ys-pos{grid-template-columns:1fr}
  .ys-steps li{min-height:0}
  .ys-steps li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-18px;transform:translateX(-50%)}
}

/* ---------- 34. Contact ---------- */
.ys-contact-hero{padding-bottom:clamp(40px,5vw,72px)}
.ys-contact-hero .ys-phero__title{font-size:clamp(48px,11vw,176px);line-height:1.05;color:#2b2b2a}
.ys-contact-hero__sub{position:relative;margin-top:clamp(20px,2.6vw,36px);font-size:var(--t-lead);font-weight:700;line-height:1.5;letter-spacing:-.03em}
.ys-contact-info .ys-dl a{text-decoration:underline;text-underline-offset:3px}
.ys-contact-form .form-label{font-family:var(--f-en);font-size:12px!important;font-weight:600;letter-spacing:.08em;color:var(--c-mute);margin-bottom:24px!important}
.ys-form .field{margin-bottom:30px}
.ys-form .submit{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:0 44px;border:2px solid var(--c-ink);font-family:var(--f-mix);font-weight:700;font-size:15px;position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--e-out)}
.ys-form .submit::before{content:"";position:absolute;inset:0;background:var(--c-ink);transform:translateY(101%);transition:transform .45s var(--e-out);z-index:-1}
.ys-form .submit:hover{color:#fff}
.ys-form .submit:hover::before{transform:none}
.ys-form .submit:disabled{opacity:.5;cursor:wait}
.ys-form .privacy{margin-top:18px;font-size:12.5px;line-height:1.9;color:var(--c-ink-2)}
.ys-form .privacy a{text-decoration:underline;text-underline-offset:3px}
.ys-form .form-status{font-size:14px;line-height:1.8}
.ys-faq h3{font-size:clamp(17px,1.5vw,20px)}
.ys-faq .n{font-size:13px}


/* ---------- 35. 一覧ページ（生成ツールの出力マークアップをそのまま再スタイル） ---------- */
.ys-list,main>.block.ys-list{padding:clamp(48px,6vw,96px) var(--gx) var(--sy)}
.ys-list>.container{padding:0}
.ys-list .section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px;margin-bottom:clamp(32px,4vw,56px)}
.ys-list .section-tag{font-size:var(--t-small);font-weight:500;display:flex;gap:10px;align-items:center}
.ys-list .section-tag .num{font-family:var(--f-en);color:var(--c-hl);font-weight:600}
.ys-list .section-title{font-size:var(--t-h2);font-weight:700;letter-spacing:-.03em;line-height:1.45;margin-top:10px}
.ys-list .section-lede{margin-top:8px;font-size:14.5px;line-height:1.9;color:var(--c-ink-2);max-width:40em}
.ys-works-hero{padding-bottom:clamp(40px,5vw,72px)}
.ys-works-hero__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px;padding-bottom:clamp(8px,1vw,16px)}
.ys-works-hero__top .ys-phero__label{margin:0;display:flex;flex-direction:column}
.ys-works-hero__top h1.ys-label{font-size:var(--t-sub)}
.ys-works-hero__sub{font-size:var(--t-sub);font-weight:700;line-height:1.55;text-align:right}
.ys-works-hero .ys-marquee{margin:clamp(12px,2vw,28px) calc(var(--gx) * -1) 0}
/* chips（実務メモ・メソッド・お知らせ） */
.mf-chip,.news-filter-btn{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border:1px solid var(--c-line);border-radius:999px;font-size:13px;font-weight:500;line-height:1;background:#fff;color:var(--c-ink);transition:background .3s,border-color .3s,color .3s;cursor:pointer}
.mf-chip:hover,.news-filter-btn:hover{border-color:var(--c-ink)}
.mf-chip.is-active,.news-filter-btn[aria-pressed="true"]{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.method-filter,.news-filter-list{display:flex;flex-wrap:wrap;gap:8px}
.ys-list .insights-filter,.ys-list .method-filter{margin-bottom:clamp(40px,5vw,72px)}
.news-filter{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:12px}
.news-filter[hidden],.news-filter-empty[hidden],[hidden]{display:none!important}
.news-filter-label{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--c-mute)}
.news-filter-status{font-size:12px;color:var(--c-mute);min-height:1.5em;margin-bottom:24px}
.news-filter-empty{padding:40px 0;color:var(--c-mute);font-size:14px}
/* お知らせ一覧：編集的な行 */
.news-list{border-top:1px solid var(--c-line)}
.news-item{display:grid;grid-template-columns:150px minmax(0,1fr) 220px 40px;gap:24px;align-items:baseline;padding:clamp(24px,2.6vw,36px) 0;border-bottom:1px solid var(--c-line);color:var(--c-ink);opacity:1!important;transform:none!important}
.news-date{font-family:var(--f-en);font-size:14px;font-weight:500}
.news-title{font-size:clamp(17px,1.45vw,21px);font-weight:700;line-height:1.65;letter-spacing:-.01em;transition:color .35s}
.news-body{margin-top:8px;font-size:14px;line-height:1.9;color:var(--c-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.news-tag{font-size:11px;padding:3px 10px;border:1px solid var(--c-line);border-radius:999px;color:var(--c-ink-2);white-space:nowrap}
.news-arrow{justify-self:end;font-size:18px;transition:transform .5s var(--e-out)}
.news-item:hover .news-title{color:var(--c-hl)}
.news-item:hover .news-arrow{transform:translate(4px,-4px)}
/* 実務メモ一覧：番号が大きい編集的カード */
.insights-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,2.4vw,36px);border-top:1px solid var(--c-line)}
.insights-card{display:flex;flex-direction:column;padding:clamp(24px,2.6vw,36px) 0 clamp(32px,3vw,44px);border-bottom:1px solid var(--c-line);color:var(--c-ink);opacity:1!important;transform:none!important}
.ic-cat{display:flex;align-items:baseline;gap:12px;font-size:12px;font-weight:500;color:var(--c-mute)}
.ic-num{font-family:var(--f-en);font-size:clamp(34px,3.4vw,52px);font-weight:500;color:var(--c-ink);letter-spacing:-.02em;line-height:1;transition:color .35s}
.ic-title{margin-top:20px;font-size:clamp(18px,1.5vw,21px);font-weight:700;line-height:1.65;letter-spacing:-.02em;transition:color .35s}
.ic-desc{margin-top:12px;font-size:14px;line-height:1.95;color:var(--c-ink-2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ic-meta{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;font-family:var(--f-mix);font-size:12px;color:var(--c-mute)}
.ic-tags{display:flex;flex-wrap:wrap;gap:6px}
.ic-tag{font-size:11px}
.ic-link{font-weight:600;color:var(--c-ink);white-space:nowrap}
.insights-card:hover .ic-title,.insights-card:hover .ic-num{color:var(--c-hl)}
.if-empty{grid-column:1 / -1}
/* メソッド一覧：カバー画像カード */
.method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,5vw,80px) clamp(20px,2.4vw,36px)}
.method-card{display:block;color:var(--c-ink);opacity:1!important;transform:none!important}
.method-card:nth-child(3n+2){margin-top:clamp(40px,5vw,80px)}
.mc-cover{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--c-night)}
.mc-cover-img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.mc-cover::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.mc-cover--light::after{background:linear-gradient(transparent,rgba(11,14,19,.35))}
.mc-cat{position:absolute;left:20px;bottom:56px;z-index:1;color:#fff;font-size:12px;font-weight:500}
.mc-cover-num{position:absolute;left:20px;bottom:14px;z-index:1;color:#fff;font-family:var(--f-en);font-size:32px;font-weight:500;line-height:1}
.mc-cover-num em{font-style:normal;color:var(--c-hl)}
.mc-body{margin-top:18px}
.mc-date{font-family:var(--f-en);font-size:12px;color:var(--c-mute)}
.mc-title{margin-top:6px;font-size:clamp(19px,1.65vw,24px);font-weight:700;line-height:1.5;letter-spacing:-.02em;transition:color .35s}
.mc-excerpt{margin-top:10px;font-size:14px;line-height:1.95;color:var(--c-ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mc-link{display:inline-block;margin-top:12px;font-family:var(--f-mix);font-size:13px;font-weight:600}
.method-card:hover .mc-cover-img{transform:scale(1.05)}
.method-card:hover .mc-title{color:var(--c-hl)}
@media (max-width:1024px){
  .insights-grid,.method-grid{grid-template-columns:1fr 1fr}
  .method-card:nth-child(3n+2){margin-top:0}
  .method-card:nth-child(2n){margin-top:clamp(40px,5vw,80px)}
  .news-item{grid-template-columns:120px minmax(0,1fr) 28px}
  .news-tags{grid-column:2;justify-content:flex-start}
  .news-arrow{grid-row:1;grid-column:3}
}
@media (max-width:767px){
  .ys-works-hero__sub{text-align:left}
  .insights-grid,.method-grid{grid-template-columns:1fr}
  .method-card:nth-child(n){margin-top:0}
  .mc-cover{aspect-ratio:4/3}
  .news-item{grid-template-columns:minmax(0,1fr) 20px;gap:6px 12px}
  .news-date,.news-content,.news-tags{grid-column:1}
  .news-arrow{grid-column:2;grid-row:1 / span 3;align-self:center}
  .method-filter,.ys-list .insights-filter,.news-filter-list{flex-wrap:nowrap;overflow-x:auto;margin-right:calc(var(--gx) * -1);padding-right:var(--gx);scrollbar-width:none}
  .mf-chip,.news-filter-btn{flex:none}
}

/* ---------- 36. メニュー：PCは2カラム（8項目＋事業サイト群を1画面に収める） ---------- */
@media (min-width:1025px){
}

/* ---------- 37. 旧マークアップが残る詳細ページの互換（.btn / 旧 page-hero） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 30px;border:2px solid var(--c-ink);background:var(--c-ink);color:#fff;font-family:var(--f-mix);font-weight:600;font-size:14px;transition:background .35s,color .35s,border-color .35s}
.btn:hover{background:var(--c-fill);border-color:var(--c-fill)}
.btn.ghost{background:transparent;color:var(--c-ink)}
.btn.ghost:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.page-hero{padding:calc(var(--hd-h) + clamp(64px,12vh,150px)) var(--gx) clamp(56px,7vw,104px);min-height:auto}
.page-hero .container{padding:0;max-width:1200px;margin:0}
.page-hero .crumb{opacity:.75;margin-bottom:clamp(32px,4.4vw,60px)}
.page-hero .crumb a{text-decoration:underline;text-underline-offset:3px}
.page-hero h1{font-size:clamp(32px,4.6vw,72px);font-weight:600;line-height:1.28;letter-spacing:-.045em}
.page-hero .jp-sub{margin-top:18px;font-size:var(--t-sub);font-weight:700;line-height:1.55}
.page-hero .lede{margin-top:24px;max-width:46em;font-size:clamp(15px,1.15vw,17px);line-height:2.05;font-weight:500;opacity:.86}
.page-hero .r-hdn,.page-hero .r-hdn-i{display:block}

/* ---------- 38. AI事業（トップの独立領域） ---------- */
.ys-ai{position:relative;background:var(--c-night);color:#fff;padding:var(--sy-lg) var(--gx) var(--sy);overflow:hidden;scroll-margin-top:0}
.ys-ai__slant{position:absolute;right:-10vw;top:0;width:44vw;height:62%;background:linear-gradient(180deg,var(--c-violet),var(--c-navy));clip-path:polygon(34% 0,100% 0,66% 100%,0 100%)}
.ys-ai__inner{position:relative;z-index:1}
.ys-ai .ys-label .ys-arrow{width:22px;height:22px}
.ys-ai__lead{margin-top:clamp(40px,6vw,96px)}
.ys-ai__steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:clamp(56px,7vw,110px);border-top:1px solid var(--c-line-inv)}
.ys-ai__steps li{padding:26px 22px 30px 0;border-right:1px solid var(--c-line-inv);margin-right:22px}
.ys-ai__steps li:last-child{border-right:0;margin-right:0}
.ys-ai__steps .n{font-family:var(--f-en);font-size:13px;font-weight:600;color:var(--c-hl)}
.ys-ai__steps b{display:block;margin-top:10px;font-size:clamp(19px,1.7vw,24px);font-weight:700;letter-spacing:-.02em}
.ys-ai__steps p{margin-top:10px;font-size:13.5px;line-height:1.95;color:rgba(255,255,255,.72)}
.ys-ai__foot{margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid var(--c-line-inv)}
.ys-ai__foot>p{max-width:56em;font-size:14px;line-height:2;color:rgba(255,255,255,.72)}
.ys-work__who{margin-top:14px;font-size:12px;font-weight:700;color:var(--c-hl);letter-spacing:.02em}
.ys-work__who+.ys-work__title{margin-top:6px}
@media (max-width:1024px){ .ys-ai__steps{grid-template-columns:1fr 1fr} .ys-ai__steps li{border-right:0;margin-right:0;border-bottom:1px solid var(--c-line-inv);padding-right:16px} }
@media (max-width:767px){ .ys-ai__steps{grid-template-columns:1fr} .ys-ai__slant{width:80vw;height:26%;right:-34vw} }
.ys-soon{display:inline-block;margin-left:10px;padding:2px 10px;border:1px solid currentColor;border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.04em;vertical-align:middle;opacity:.65}
.ys-biz__body{position:relative;z-index:1;margin-top:clamp(8px,1vw,16px)}
.ys-hero__label p.ys-hero__desc{margin-top:14px;font-size:clamp(12px,1vw,14px);font-weight:500;letter-spacing:.06em;opacity:.82}
.ys-ai__slant{height:40%;width:36vw;right:-12vw}
@media (max-width:767px){ .ys-ai__slant{height:18%;width:70vw;right:-34vw} }
@media (max-width:767px){ .ys-biz .ys-big-head{font-size:clamp(28px,7.6vw,40px)} }


/* ---------- 39. 配色：暗い面ではアクセント文字・線・フォーカスを淡いブルーグレーに ---------- */
.ys-theme-dark,.ys-theme-navy,.ys-hero,.ys-phero--grad,.ys-phero--dark,.ys-group,.ys-ai,.ys-about-open,.ys-pmv,.ys-footer,.ys-menu,.ys-404,.cookie-consent,
.ys-detail-case .insights-article-hero,.page-hero,.ys-compare__col.is-after,.ys-steps .is-goal,.ys-work[data-tone="navy"],.ys-work[data-tone="umber"],.ys-work[data-tone="dark"]{--c-hl:var(--c-mist)}
html.ys-menu-open .ys-header{--c-hl:var(--c-mist)}
.ys-header[data-tone="dark"]{--c-hl:var(--c-mist)}
.ys-work[data-tone="paper"] .ys-cta-dot,.ys-case-grid .cs-card:nth-child(3n) .cs-card-visual::after{--c-dot:var(--c-navy);--c-dot-ink:#fff}
.ys-case-grid .cs-card:nth-child(3n) .cs-card-visual::after{background:var(--c-navy);color:#fff}
.ys-ai__steps .n,.ys-structure b,.ys-members .role,.ys-pmv dt{color:var(--c-mist)}
.ys-theme-navy .ys-biz__num{color:var(--c-mist);opacity:.7}
.ys-theme-navy .ys-svc a:hover .nm{color:var(--c-mist)}
.ys-form input:focus,.ys-form select:focus,.ys-form textarea:focus{box-shadow:0 2px 0 0 var(--c-navy)}
.ys-hero::after{opacity:.12}
.ys-hero__label p.ys-hero__desc,.ys-scroll-cue,.ys-phero__crumb,.ys-loader__meta{color:var(--c-mist)}
.ys-hero__label p.ys-hero__desc{opacity:1}

/* ---------- 40. 図解用アクセント（structure-notes.css / method-fig.css）を配色に合わせる ---------- */
/* 「人が判断する点」を示す強調色。元ファイルは変更せず、変数だけを上書き（html:root で読み込み順に依存しない） */
html:root{--mf-accent:var(--c-navy)}
html body .insights-article-body{--sn-accent:var(--c-navy);--sn-accent-soft:#eaf0f6}
.cookie-consent{border:1px solid var(--c-line-inv);box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}

/* ---------- 41. AIを見極め、開発し、現場で動かす（.ys-axis）／開発できる領域（.ys-tech） 2026-10-24 ---------- */
.ys-axis{position:relative;background:var(--g-hero-short);color:#fff;padding:var(--sy-lg) var(--gx) var(--sy);overflow:hidden;scroll-margin-top:0;--c-hl:var(--c-mist)}
.ys-axis::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 82% 72%,rgba(25,53,80,.85),rgba(25,53,80,0) 70%);pointer-events:none}
.ys-axis__slant{position:absolute;right:-12vw;top:0;width:36vw;height:44%;background:linear-gradient(180deg,var(--c-violet),var(--c-navy));clip-path:polygon(34% 0,100% 0,66% 100%,0 100%);opacity:.9}
.ys-axis__inner{position:relative;z-index:1}
.ys-axis .ys-label .ys-arrow{width:22px;height:22px}
.ys-axis__lead{margin-top:clamp(40px,6vw,96px)}
.ys-axis__steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(56px,7vw,110px);counter-reset:ax;position:relative}
.ys-axis__steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--c-line-inv)}
.ys-axis__steps::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--c-mist),rgba(177,190,203,.15));transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.7,.1,1) .2s}
.ys-axis__steps.is-drawn::after{transform:scaleX(1)}
.ys-axis__step{position:relative;padding:34px clamp(18px,2.4vw,40px) 36px 0;margin-right:clamp(18px,2.4vw,40px);border-right:1px solid var(--c-line-inv);display:flex;flex-direction:column}
.ys-axis__step:last-child{border-right:0;margin-right:0;padding-right:0}
.ys-axis__no{display:flex;align-items:baseline;gap:14px;font-family:var(--f-en);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--c-mist)}
.ys-axis__no span{font-size:clamp(44px,5.2vw,84px);font-weight:600;letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(177,190,203,.7)}
.ys-axis__step h3{margin-top:18px;font-size:clamp(22px,2.2vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1.35}
.ys-axis__txt{margin-top:14px;font-size:clamp(14px,1.05vw,15.5px);line-height:2;color:rgba(255,255,255,.86)}
.ys-axis__do{list-style:none;margin-top:20px;padding-top:18px;border-top:1px dashed var(--c-line-inv);display:grid;gap:8px}
.ys-axis__do li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.8;color:rgba(255,255,255,.72)}
.ys-axis__do li::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:1px;background:var(--c-mist)}
.ys-axis__case{margin-top:auto;padding-top:24px;font-family:var(--f-en);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-mist)}
.ys-axis__case a{display:inline-block;margin-left:8px;font-family:var(--f-ja);font-size:13px;letter-spacing:0;text-transform:none;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;transition:border-color .3s}
.ys-axis__case a:hover{border-color:#fff}
.ys-axis__foot{margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid var(--c-line-inv)}
.ys-axis__foot>p{max-width:56em;font-size:14px;line-height:2;color:rgba(255,255,255,.72)}
.ys-axis__foot .ys-hero__actions{margin-top:24px}
@media (max-width:1024px){ .ys-axis__steps{grid-template-columns:1fr} .ys-axis__step{border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--c-line-inv)} .ys-axis__step:last-child{border-bottom:0} .ys-axis__case{margin-top:0} }
@media (max-width:767px){ .ys-axis__slant{width:70vw;height:18%;right:-34vw} }
@media (prefers-reduced-motion:reduce){ .ys-axis__steps::after{transition:none;transform:scaleX(1)} }

.ys-tech{padding:var(--sy) var(--gx);background:var(--c-paper);scroll-margin-top:80px}
.ys-tech .ys-shead{align-items:flex-end}
.ys-tech__intro{max-width:34em}
.ys-tech__list{list-style:none;border-top:1px solid var(--c-line)}
.ys-tech__row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.5fr) minmax(0,1.45fr);gap:clamp(16px,3vw,48px);align-items:baseline;padding:clamp(22px,2.6vw,36px) 0;border-bottom:1px solid var(--c-line);transition:background .35s}
.ys-tech__row:hover{background:linear-gradient(90deg,rgba(25,53,80,.05),rgba(25,53,80,0))}
.ys-tech__cat{font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.03em;line-height:1.3}
.ys-tech__cat small{display:block;margin-bottom:8px;font-family:var(--f-en);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-navy)}
.ys-tech__what{font-size:14px;line-height:1.95;color:var(--c-ink-2)}
.ys-tech__stack{display:flex;flex-wrap:wrap;gap:8px}
.ys-tech__stack span{display:inline-block;padding:6px 13px;border:1px solid rgba(25,53,80,.28);border-radius:999px;font-family:var(--f-en);font-size:12.5px;font-weight:500;letter-spacing:.01em;color:var(--c-ink);background:var(--c-paper-2)}
.ys-tech__note{margin-top:22px;font-size:12px;line-height:1.9;color:var(--c-mute)}
@media (max-width:1024px){ .ys-tech__row{grid-template-columns:1fr 1.4fr} .ys-tech__stack{grid-column:1 / -1} }
@media (max-width:767px){ .ys-tech__row{grid-template-columns:1fr;gap:12px} }

.ys-work__stage{display:inline-block;margin-left:10px;padding:1px 10px;border:1px solid currentColor;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;vertical-align:1px;white-space:nowrap}
@media (max-width:767px){ .ys-work__stage{display:table;margin:6px 0 0} }
.cs-card-stage{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin:10px 0 2px;font-size:12px;line-height:1.7;color:var(--c-ink-2)}
.cs-card-stage span{display:inline-block;padding:0 8px;border:1px solid rgba(25,53,80,.3);border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--c-navy)}
.cs-card-stage span:not(:first-child){margin-left:8px}
@media (max-width:767px){ .ys-pc-br{display:none} }
.ys-work .ys-work__who{color:var(--c-navy)}

/* ---------- 42. 全画面メニュー v2（ystudio.co.kr の fullscreen-menu を実測して再構成 2026-10-24） ----------
   背景 #171717 / 項目 Poppins 500・calc(1rem + 5.15vw)（1440pxで90px）・中央揃え
   開く：背景 0.2s ease-out → 各項目 y120→0・opacity 0→1・0.7s power2.out・0.4s後から0.1s間隔
   閉じる：各項目 y0→-120・0.5s power2.in・0.05s間隔 → 0.6s後に背景 0.2s ease-in で消える（参考サイトも上方向へ抜ける） */
:root{--menu-bg:#171717;--menu-ring:#e5383b}
.ys-menu{position:fixed;inset:0;z-index:190;background:var(--menu-bg);color:#fff;opacity:0;visibility:hidden;
  transition:opacity .2s cubic-bezier(.55,.085,.68,.53) .6s,visibility 0s linear .8s;overflow-y:auto;overscroll-behavior:contain}
.ys-menu.is-open{opacity:1;visibility:visible;transition:opacity .2s cubic-bezier(.25,.46,.45,.94),visibility 0s}
.ys-menu__stage{position:relative;min-height:100%;display:grid;place-items:center;padding:calc(var(--hd-h) + 16px) var(--gx)}
.ys-menu__list{list-style:none;display:flex;flex-direction:column;align-items:center;text-align:center;grid-area:1/1}
.ys-menu__item{overflow:hidden;padding:0 8em;display:flex;justify-content:center}
.ys-menu__link{position:relative;display:inline-block;font-family:var(--f-en);font-weight:500;letter-spacing:-.01em;
  font-size:calc(1rem + 5.15vw);line-height:calc(1rem + 7vw);color:#fff;background:none;border:0;padding:0;cursor:pointer;
  transform:translateY(120px);opacity:0;transition:transform .5s cubic-bezier(.55,.085,.68,.53),opacity .5s cubic-bezier(.55,.085,.68,.53)}
@media (min-width:1467px){ .ys-menu__link{font-size:calc(1rem + 4.15vw);line-height:calc(1rem + 5.5vw)} }
.ys-menu__mask{display:block;overflow:hidden}
.ys-menu__en{position:relative;display:block;transition:transform .2s}
.ys-menu__en::before{content:attr(data-hover);position:absolute;left:0;top:100%;width:100%}
.ys-menu__link small{position:absolute;left:100%;top:.9em;margin-left:.5em;white-space:nowrap;font-family:var(--f-ja);font-size:clamp(11px,.9vw,13px);font-weight:500;letter-spacing:.04em;line-height:1;color:rgba(255,255,255,.5)}
/* 開く */
.ys-menu.is-open .ys-menu__link{transform:none;opacity:1;transition:transform .7s cubic-bezier(.25,.46,.45,.94),opacity .7s cubic-bezier(.25,.46,.45,.94),color .2s}
.ys-menu.is-open .ys-menu__item:nth-child(1) .ys-menu__link{transition-delay:.4s,.4s,0s}
.ys-menu.is-open .ys-menu__item:nth-child(2) .ys-menu__link{transition-delay:.5s,.5s,0s}
.ys-menu.is-open .ys-menu__item:nth-child(3) .ys-menu__link{transition-delay:.6s,.6s,0s}
.ys-menu.is-open .ys-menu__item:nth-child(4) .ys-menu__link{transition-delay:.7s,.7s,0s}
/* 閉じる・第二階層へ：上へ抜ける */
.ys-menu.is-leaving .ys-menu__link,.ys-menu.is-more .ys-menu__list .ys-menu__link{transform:translateY(-120px);opacity:0;transition:transform .5s cubic-bezier(.55,.085,.68,.53),opacity .5s cubic-bezier(.55,.085,.68,.53)}
.ys-menu.is-leaving .ys-menu__item:nth-child(2) .ys-menu__link,.ys-menu.is-more .ys-menu__item:nth-child(2) .ys-menu__link{transition-delay:.05s}
.ys-menu.is-leaving .ys-menu__item:nth-child(3) .ys-menu__link,.ys-menu.is-more .ys-menu__item:nth-child(3) .ys-menu__link{transition-delay:.1s}
.ys-menu.is-leaving .ys-menu__item:nth-child(4) .ys-menu__link,.ys-menu.is-more .ys-menu__item:nth-child(4) .ys-menu__link{transition-delay:.15s}
.ys-menu.is-more .ys-menu__list{pointer-events:none}
/* ホバー：他の項目を0.3に、ホバー項目は下から同じ語が巻き上がる。現在のページは1のまま */
@media (hover:hover){
  .ys-menu.is-open .ys-menu__list:hover .ys-menu__link{opacity:.3}
  .ys-menu.is-open .ys-menu__list .ys-menu__link:hover,.ys-menu.is-open .ys-menu__list .ys-menu__link[aria-current="page"]{opacity:1}
  .ys-menu__link:hover .ys-menu__en{transform:translateY(-100%)}
}
.ys-menu__list .ys-menu__link:focus-visible{opacity:1;outline:2px solid var(--c-mist);outline-offset:6px}
.ys-menu__link:focus-visible .ys-menu__en{transform:translateY(-100%)}
/* 第二階層（More） */
.ys-menu__more{grid-area:1/1;width:min(1100px,100%);align-self:center}
.ys-menu__more[hidden]{display:none}
.ys-menu__back{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--f-en);font-size:15px;font-weight:500;color:#fff;background:none;border:0;cursor:pointer;padding:6px 0}
.ys-menu__back small{font-family:var(--f-ja);font-size:12px;color:rgba(255,255,255,.5)}
.ys-menu__groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 48px;margin-top:clamp(28px,4vw,56px)}
.ys-menu__group--wide{grid-column:span 2}
.ys-menu__group--wide ul{columns:2;column-gap:32px}
.ys-menu__group h2{font-family:var(--f-en);font-size:13px;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.45);padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14)}
.ys-menu__group ul{list-style:none}
.ys-menu__group li{break-inside:avoid}
.ys-menu__group a{display:inline-block;font-size:clamp(15px,1.15vw,17px);line-height:2.1;color:#fff;transition:opacity .2s}
.ys-menu__group ul:hover a{opacity:.4}
.ys-menu__group ul a:hover,.ys-menu__group a[aria-current="page"]{opacity:1}
.ys-menu__group a .ext{font-family:var(--f-en);font-size:11px;margin-left:5px;opacity:.6}
.ys-menu__group a .soon{font-size:11px;margin-left:8px;opacity:.5}
.ys-menu__more .ys-menu__back,.ys-menu__more .ys-menu__group{opacity:0;transform:translateY(60px);transition:transform .7s cubic-bezier(.25,.46,.45,.94),opacity .7s cubic-bezier(.25,.46,.45,.94)}
.ys-menu.is-more .ys-menu__more .ys-menu__back{opacity:1;transform:none;transition-delay:.35s}
.ys-menu.is-more .ys-menu__more .ys-menu__group{opacity:1;transform:none}
.ys-menu.is-more .ys-menu__group:nth-child(1){transition-delay:.4s}
.ys-menu.is-more .ys-menu__group:nth-child(2){transition-delay:.48s}
.ys-menu.is-more .ys-menu__group:nth-child(3){transition-delay:.56s}
.ys-menu.is-more .ys-menu__group:nth-child(4){transition-delay:.64s}
.ys-menu.is-leaving .ys-menu__more .ys-menu__back,.ys-menu.is-leaving .ys-menu__more .ys-menu__group{opacity:0;transform:translateY(-60px);transition:transform .5s cubic-bezier(.55,.085,.68,.53),opacity .5s cubic-bezier(.55,.085,.68,.53);transition-delay:0s}
@media (max-width:900px){ .ys-menu__groups{grid-template-columns:1fr 1fr} .ys-menu__group--wide{grid-column:1/-1} }
@media (max-width:560px){ .ys-menu__item{padding:0 .2em} .ys-menu__list .ys-menu__link small{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0} .ys-menu__groups{grid-template-columns:1fr;gap:24px} .ys-menu__group--wide ul{columns:1} .ys-menu__link small{position:static;display:block;margin:-.2em 0 .4em;text-align:center} .ys-menu__stage{place-items:center} }
/* MENU ボタン：ラベルは MENU のまま。開いている間は赤い細い円で囲む（参考サイトの右上） */
.ys-menu-btn__label span{display:block;position:relative;transition:transform .2s}
.ys-menu-btn__label span::before{content:attr(data-hover);position:absolute;left:0;top:100%}
.ys-menu-btn:hover .ys-menu-btn__label span{transform:translateY(-100%)}
.ys-menu-btn[aria-expanded="true"] .ys-menu-btn__label span{transform:none}
.ys-menu-btn__icon::before{width:72px;height:72px;inset:auto;left:50%;top:50%;margin:-36px 0 0 -36px;border-width:1.5px}
.ys-menu-btn[aria-expanded="true"] .ys-menu-btn__icon::before{opacity:1;transform:none;border-color:var(--menu-ring)}
@media (max-width:767px){ .ys-menu-btn__icon::before{width:56px;height:56px;margin:-28px 0 0 -28px} }
html.ys-menu-open .ys-header{color:#fff}
@media (prefers-reduced-motion:reduce){
  .ys-menu,.ys-menu.is-open,.ys-menu__link,.ys-menu.is-open .ys-menu__link,.ys-menu.is-leaving .ys-menu__link,.ys-menu__more .ys-menu__back,.ys-menu__more .ys-menu__group{transition-duration:.01s!important;transition-delay:0s!important}
}

/* ---------- 43. TOP事例（ystudio.co.kr .parallax-two-grid を実測して再構成） ----------
   1440px：各カード幅50%・縦横比 1:1.35・奇数+80px／偶数-80px・行間300px。2・3番目は 55%×60% を下寄せし縦パララックス。
   出現：opacity 0・scale1.2 → 1、1s cubic-bezier(.165,.84,.44,1) 0.2s。画像はホバーで scale1.05 → 1。
   案件名：画像に重ね、ホバーで下から出る（タッチ端末は常時表示）。 */
.ys-pw{background:#fff;color:var(--c-ink);padding:var(--sy) 0 clamp(80px,10vw,160px);position:relative}
.ys-pw__head{padding:0 var(--gx);margin-bottom:clamp(64px,9vw,140px)}
.ys-pw__grid{display:flex;flex-wrap:wrap;padding:0 calc((100% - min(1386px,96.25%)) / 2)}
.ys-pw__item{position:relative;width:50%;margin-bottom:300px}
.ys-pw__item::after{content:"";display:block;padding-bottom:135%}
.ys-pw__item:nth-child(odd){transform:translateX(80px)}
.ys-pw__item:nth-child(even){transform:translateX(-80px)}
.ys-pw__item:nth-last-child(-n+2){margin-bottom:0}
.ys-pw__link{position:absolute;inset:0;display:block;color:#fff}
.ys-pw__parallax{position:absolute;width:100%;height:100%;will-change:transform}
.ys-pw__item:nth-child(4n+2) .ys-pw__parallax{width:55%;height:60%;right:0;bottom:0}
.ys-pw__item:nth-child(4n+3) .ys-pw__parallax{width:55%;height:60%;left:0;bottom:0}
.ys-pw__appear{position:absolute;inset:0;opacity:0;transform:scale(1.2);transition:opacity 1s cubic-bezier(.165,.84,.44,1) .2s,transform 1s cubic-bezier(.165,.84,.44,1) .2s}
.ys-pw__item.is-in .ys-pw__appear{opacity:1;transform:none}
.ys-pw__media{position:absolute;inset:0;overflow:hidden;background:var(--c-night)}
.ys-pw__media img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.05);transition:transform 1s cubic-bezier(.165,.84,.44,1)}
.ys-pw__link:hover .ys-pw__media img,.ys-pw__link:focus-visible .ys-pw__media img,.ys-pw__item.is-above .ys-pw__media img{transform:scale(1)}
.ys-pw__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:50px;pointer-events:none;opacity:0;transition:opacity .2s ease-out .4s}
.ys-pw__item:nth-child(4n+2) .ys-pw__cap,.ys-pw__item:nth-child(4n+3) .ys-pw__cap{padding:30px}
.ys-pw__cat{display:block;margin-bottom:20px;font-size:16px;line-height:28px;font-weight:500;overflow:hidden}
.ys-pw__cat span{display:block;opacity:0;transform:translateY(30px);transition:transform .45s cubic-bezier(.215,.61,.355,1),opacity .45s}
.ys-pw__title{display:block;font-family:var(--f-en),var(--f-ja);font-weight:500;font-size:48px;line-height:60px;letter-spacing:-.01em}
.ys-pw__item:nth-child(4n+2) .ys-pw__title,.ys-pw__item:nth-child(4n+3) .ys-pw__title{font-size:36px;line-height:48px}
.ys-pw__title span{display:block;overflow:hidden;opacity:0;transform:translateY(100px);transition:transform .55s cubic-bezier(.215,.61,.355,1),opacity .55s}
.ys-pw__media::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(5,8,12,.55));opacity:0;transition:opacity .4s}
.ys-pw__link:hover .ys-pw__cap,.ys-pw__link:focus-visible .ys-pw__cap{opacity:1;transition-delay:0s}
.ys-pw__link:hover .ys-pw__media::after,.ys-pw__link:focus-visible .ys-pw__media::after{opacity:1}
.ys-pw__link:hover .ys-pw__cap span,.ys-pw__link:focus-visible .ys-pw__cap span{opacity:1;transform:none}
.ys-pw__link:hover .ys-pw__cat span:nth-child(2),.ys-pw__link:focus-visible .ys-pw__cat span:nth-child(2){transition-delay:.05s}
.ys-pw__link:hover .ys-pw__title span:nth-child(1),.ys-pw__link:focus-visible .ys-pw__title span:nth-child(1){transition-delay:.08s}
.ys-pw__link:hover .ys-pw__title span:nth-child(2),.ys-pw__link:focus-visible .ys-pw__title span:nth-child(2){transition-delay:.14s}
.ys-pw__link:focus-visible{outline:2px solid var(--c-navy);outline-offset:6px}
/* ---------- TOP事例ギャラリー（.ys-mg・10-25）：参照 ystudio.co.kr/about の2段ムービングギャラリーを実測
   1440px時：小350／中412／大628px（比 .201/.237/.361/.201 × (125vw-60px)）・縦横比 350:241・画像間20px
   上段は下揃え・静止位置0、下段は上揃え・静止位置-25vw。スクロールで上段は左へ、下段は右へ25vw動く ---------- */
.ys-mg{overflow:hidden;overflow:clip;padding:0}
.ys-mg__row{display:flex;width:max-content;gap:20px;margin:0;padding:0;list-style:none;will-change:transform}
.ys-mg__row--fw{align-items:flex-end}
.ys-mg__row--bw{align-items:flex-start;margin-top:20px;transform:translate3d(-25vw,0,0)}
.ys-mg__item{flex:none;margin:0}
.ys-mg__item--s{width:calc((125vw - 60px) * .201)}
.ys-mg__item--m{width:calc((125vw - 60px) * .237)}
.ys-mg__item--l{width:calc((125vw - 60px) * .361)}
.ys-mg__link{display:block;overflow:hidden;background:var(--c-night)}
.ys-mg__link img{display:block;width:100%;height:auto;aspect-ratio:350/241;object-fit:cover;transition:transform .8s cubic-bezier(.165,.84,.44,1)}
.ys-mg__link:hover img{transform:scale(1.04)}
.ys-mg__link:focus-visible{outline:2px solid var(--c-navy);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.ys-mg__row{will-change:auto}.ys-mg__link img{transition:none}.ys-mg__link:hover img{transform:none}}

@media (hover:none),(pointer:coarse){
  .ys-pw__cap,.ys-pw__media::after{opacity:1}
  .ys-pw__cap span{opacity:1!important;transform:none!important}
}
/* スマートフォン：参考サイトと同じく2列の段差を保つ（大60%・小39%、パララックスなし） */
@media (max-width:767px){
  .ys-pw__grid{padding:0}
  .ys-pw__item{width:60%;margin-bottom:0}
  .ys-pw__item::after{padding-bottom:135%}
  .ys-pw__item:nth-child(odd),.ys-pw__item:nth-child(even){transform:none}
  .ys-pw__item:nth-child(4n+2),.ys-pw__item:nth-child(4n+3){width:40%}
  .ys-pw__item:nth-child(4n+2)::after,.ys-pw__item:nth-child(4n+3)::after{padding-bottom:141.5%}
  .ys-pw__item:nth-child(4n+2) .ys-pw__parallax{width:97%;height:100%;right:1.8vw;top:0;bottom:auto}
  .ys-pw__item:nth-child(4n+3) .ys-pw__parallax{width:97%;height:100%;left:1.8vw;top:0;bottom:auto}
  .ys-pw__item:nth-child(4n+2){margin-top:22vw}
  .ys-pw__item:nth-child(4n+3){margin-top:47vw}
  .ys-pw__item:nth-child(4n+4){margin-top:25vw}
  .ys-pw__cap,.ys-pw__item:nth-child(4n+2) .ys-pw__cap,.ys-pw__item:nth-child(4n+3) .ys-pw__cap{padding:14px}
  .ys-pw__cat{font-size:11px;line-height:16px;margin-bottom:8px}
  .ys-pw__title,.ys-pw__item:nth-child(4n+2) .ys-pw__title,.ys-pw__item:nth-child(4n+3) .ys-pw__title{font-size:20px;line-height:25px}
  .ys-pw__item:nth-child(4n+2) .ys-pw__title,.ys-pw__item:nth-child(4n+3) .ys-pw__title{font-size:15px;line-height:19px}
}
@media (prefers-reduced-motion:reduce){ .ys-pw__appear{opacity:1;transform:none;transition:none} .ys-pw__parallax{transform:none!important} }

/* ---------- 44. 追従する丸（#ball）— 参考サイトの magic-cursor を再構成 ----------
   通常：80px・2px #999 の円を scale .5、比率0.65で追従し0.4sで寄る。事例の上：scale 1.2・塗り・「View／Case」2行 12px/600。
   クリック：scale .5 の読み込みリングに戻す。PC（細かいポインタ）のみ。 */
.ys-ball{position:fixed;left:0;top:0;z-index:300;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;border:4px solid #999;pointer-events:none;
  transform:translate3d(var(--bx,-200px),var(--by,-200px),0) scale(var(--bs,.5));transition:transform .4s cubic-bezier(.25,.46,.45,.94),background-color .3s,border-color .3s,border-width .3s,opacity .3s;
  display:grid;place-content:center;text-align:center;opacity:0}
html.has-ball .ys-ball{opacity:1}
.ys-ball p{font-family:var(--f-en);font-size:12px;font-weight:600;line-height:16px;color:#fff;opacity:0;transition:opacity .2s cubic-bezier(.215,.61,.355,1)}
.ys-ball.is-view{--bs:1.2;border-width:2px;border-color:var(--c-navy);background:var(--c-navy)}
.ys-ball.is-view p{opacity:1}
.ys-ball.is-loading{--bs:.5;border-width:4px;border-color:#999;background:transparent}
@keyframes ys-spin{to{transform:rotate(360deg)}}
html.ys-menu-open .ys-ball{opacity:0}
/* 事例グリッドの上では右下の追従ボタンを退避 */
html.is-over-works .ys-float,html.is-works-in-view .ys-float{opacity:0;transform:translateY(14px);pointer-events:none}
@media (prefers-reduced-motion:reduce){html.is-over-works .ys-float,html.is-works-in-view .ys-float{transform:none}}

/* ---------- 45. 事例カード → 事例詳細の遷移 ----------
   参考サイト：クリック→他要素0.5sで消える→画像が全画面へ（WebGL 2.2s・Cubic.easeInOut）→1.0s後に読み込み→ヒーローの文字。
   本サイト：クリックした画像の複製を 1.15s cubic-bezier(.645,.045,.355,1) で全画面へ広げ、広がり切ってから移動。遷移先はその画像のまま始まる。 */
.ys-tr{position:fixed;z-index:400;overflow:hidden;background:var(--c-night);pointer-events:none;will-change:left,top,width,height}
.ys-tr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html.is-leaving-case body>*:not(.ys-tr):not(.ys-tr-bg):not(.ys-ball){transition:opacity .5s cubic-bezier(.77,0,.175,1);opacity:0}
html.is-leaving-case .ys-header{opacity:1!important}
html.is-leaving-case{cursor:progress}

/* ---------- 46. 事例詳細 v2（ystudio.co.kr /works/ の作品ページを実測して再構成） ----------
   1440×900：矢印 y382・ラベル 24/36 y442・案件名 158px/1.27 y567（下へはみ出す）・左端120px。
   ヒーロー出現：通常＝画像 scale1.1→1・opacity 0→1（1s・0.2s後）、矢印0.6s・ラベル0.6s（0.1s間隔）・案件名0.7s（1s・0.1s間隔）。
   事例カードから来た時（html.ys-arrived）＝画像はそのまま、矢印0.5s・ラベル0.5s・案件名0.6s・スクロール案内0.9s。 */
.ys-chero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--c-night);color:#fff}
.ys-chero__bg{position:absolute;inset:0;will-change:transform}
.ys-chero__bg img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transform:scale(1.1);transition:opacity 1s cubic-bezier(.25,.46,.45,.94) .2s,transform 1s cubic-bezier(.25,.46,.45,.94) .2s}
.ys-chero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,12,.35) 0,rgba(5,8,12,0) 22%,rgba(5,8,12,0) 45%,rgba(5,8,12,.62) 100%),linear-gradient(90deg,rgba(5,8,12,.45),rgba(5,8,12,0) 60%);pointer-events:none}
.ys-chero.is-novisual{background:var(--g-hero)}
.ys-chero__cap{position:absolute;z-index:2;left:var(--ch-x,120px);right:var(--gx);top:0;bottom:0}
.ys-chero__crumb{position:absolute;top:calc(var(--hd-h) + 8px);left:0;display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--c-mist);letter-spacing:.02em}
.ys-chero__crumb a{color:inherit;border-bottom:1px solid transparent}
.ys-chero__crumb a:hover{border-color:currentColor}
.ys-chero__arrow{position:absolute;top:42.4%;left:0;width:34px;height:34px;opacity:0;transform:translateY(60px);transition:transform .5s cubic-bezier(.25,.46,.45,.94) .6s,opacity .5s .6s}
.ys-chero__arrow svg{width:100%;height:100%}
.ys-chero__sub{position:absolute;top:49.1%;left:0;font-family:var(--f-en),var(--f-ja);font-size:clamp(16px,1.67vw,24px);line-height:1.5;font-weight:500}
.ys-chero__sub span{display:block;opacity:0;transform:translateY(60px);transition:transform .7s cubic-bezier(.215,.61,.355,1),opacity .7s cubic-bezier(.215,.61,.355,1)}
.ys-chero__sub span:nth-child(1){transition-delay:.6s}.ys-chero__sub span:nth-child(2){transition-delay:.7s}
.ys-chero__title{position:absolute;top:63%;left:-6px;margin:0;font-family:var(--f-en),var(--f-ja);font-weight:500;font-size:clamp(54px,11vw,158px);line-height:1.27;letter-spacing:-.02em;white-space:nowrap}
.ys-chero__title .ln{display:block;overflow:hidden;padding-bottom:.04em}
.ys-chero__title .ln>span{display:block;opacity:0;transform:translateY(120px);transition:transform 1s cubic-bezier(.215,.61,.355,1),opacity 1s cubic-bezier(.215,.61,.355,1)}
.ys-chero__title .ln:nth-child(1)>span{transition-delay:.7s}.ys-chero__title .ln:nth-child(2)>span{transition-delay:.8s}.ys-chero__title .ln:nth-child(3)>span{transition-delay:.9s}
.ys-chero__scroll{position:absolute;z-index:2;right:var(--gx);bottom:clamp(24px,4vh,44px);display:flex;align-items:center;gap:16px;font-family:var(--f-en);font-size:13px;font-weight:500;color:#fff;opacity:0;transform:translateY(20px);transition:transform .7s cubic-bezier(.215,.61,.355,1) 1s,opacity .7s 1s}
.ys-chero__scroll i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5)}
.ys-chero__scroll i svg{width:14px;height:14px}
.ys-chero.is-ready .ys-chero__bg img{opacity:1;transform:none}
.ys-chero.is-ready .ys-chero__arrow,.ys-chero.is-ready .ys-chero__sub span,.ys-chero.is-ready .ys-chero__title .ln>span,.ys-chero.is-ready .ys-chero__scroll{opacity:1;transform:none}
html.ys-arrived .ys-chero__bg img{opacity:1;transform:none;transition:none}
html.ys-arrived .ys-chero__arrow{transition-delay:.5s}
html.ys-arrived .ys-chero__sub span:nth-child(1){transition-delay:.5s}html.ys-arrived .ys-chero__sub span:nth-child(2){transition-delay:.6s}
html.ys-arrived .ys-chero__title .ln:nth-child(1)>span{transition-delay:.6s}html.ys-arrived .ys-chero__title .ln:nth-child(2)>span{transition-delay:.7s}html.ys-arrived .ys-chero__title .ln:nth-child(3)>span{transition-delay:.8s}
html.ys-arrived .ys-chero__scroll{transition-delay:.9s}
html.ys-arrived .ys-chero::after{animation:ys-shade-in .6s cubic-bezier(.25,.46,.45,.94) both}
@keyframes ys-shade-in{from{opacity:0}to{opacity:1}}
@media (max-width:767px){
  .ys-chero{--ch-x:20px}
  .ys-chero__arrow{top:43.2%;width:26px;height:26px}
  .ys-chero__sub{top:50.4%;font-size:18px;line-height:30px}
  .ys-chero__title{top:66.5%;font-size:clamp(40px,14vw,58px);line-height:1.28}
  .ys-chero__scroll span{display:none}
}
/* ヒーロー直後の大きな一文と事実（参考：hero-description 36px/52・左半分） */
.ys-cintro{position:relative;background:var(--c-night);color:#fff;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,120px);align-items:start;padding:clamp(96px,11vw,170px) var(--gx) clamp(96px,11vw,170px) var(--ch-x,120px)}
.ys-cintro__lead{font-family:var(--f-ja);font-size:clamp(22px,2.5vw,36px);line-height:1.45;font-weight:600;letter-spacing:-.01em;max-width:17em}
.ys-cintro__facts{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.18)}
.ys-cintro__facts>div{display:grid;grid-template-columns:5.5em 1fr;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.ys-cintro__facts dt{font-size:12px;letter-spacing:.06em;color:var(--c-mist);padding-top:3px}
.ys-cintro__facts dd{font-size:14.5px;line-height:1.8;color:#fff}
.ys-cintro__note{margin-top:20px;font-size:13px;line-height:1.9;color:var(--c-mist)}
@media (max-width:900px){ .ys-cintro{grid-template-columns:1fr;padding-left:var(--gx)} }
/* 章（参考：pinned-section。画像と固定される文章を左右交互に） */
.ys-chap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,64px);align-items:start;max-width:1240px;margin:0 auto;padding:clamp(80px,9vw,140px) var(--gx);background:#fff;color:var(--c-ink)}
.ys-chap.is-img-right{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.ys-chap.is-img-right .ys-chap__fig{order:2}
.ys-chap.is-text-only{grid-template-columns:minmax(0,1fr);max-width:820px}
.ys-chap__fig{margin:0}
.ys-chap__frame{position:relative;aspect-ratio:4/3.3;overflow:hidden;background:linear-gradient(160deg,var(--c-violet) 0%,var(--c-ink-0) 46%,var(--c-navy) 100%);display:grid;place-items:center;padding:clamp(14px,2.4vw,40px)}
.ys-chap__frame::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.ys-chap__frame img{position:relative;z-index:1;width:100%;height:auto;max-height:100%;object-fit:contain;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transition:transform 1.2s cubic-bezier(.165,.84,.44,1)}
.ys-chap__fig:hover .ys-chap__frame img{transform:scale(1.03)}
.ys-chap__fig figcaption{margin-top:14px;font-size:12.5px;line-height:1.8;color:var(--c-mute)}
.ys-chap__text{position:sticky;top:calc(50vh - 200px);padding-top:4px}
.ys-chap__text hr{border:0;border-top:1px solid var(--c-line);margin:0}
.ys-chap__title{margin:22px 0;font-family:var(--f-ja);font-size:clamp(28px,3.1vw,44.8px);line-height:1.48;font-weight:600;letter-spacing:-.02em}
.ys-chap__en{display:flex;gap:14px;align-items:baseline;margin-top:22px;font-family:var(--f-en);font-size:clamp(14px,1.25vw,18px);font-weight:500;line-height:2}
.ys-chap__en span{font-size:.78em;color:var(--c-navy)}
.ys-chap__body{margin-top:10px;font-size:clamp(15px,1.2vw,17px);line-height:2.05;font-weight:500;color:var(--c-ink)}
@media (max-width:900px){
  .ys-chap,.ys-chap.is-img-right{grid-template-columns:1fr;gap:28px;padding:64px var(--gx)}
  .ys-chap.is-img-right .ys-chap__fig{order:0}
  .ys-chap__frame{aspect-ratio:4/3.4}
  .ys-chap__text{position:static}
}
/* 実数（参考：二段の見出し＋説明。数値は事例本文にあるものだけ） */
.ys-cstats{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,64px);max-width:1240px;margin:0 auto;padding:clamp(60px,7vw,110px) var(--gx) clamp(80px,9vw,140px);background:#fff;color:var(--c-ink)}
.ys-cstats__head .ys-chap__title{margin-top:0}
.ys-cstats__list{list-style:none;border-top:1px solid var(--c-line)}
.ys-cstats__list li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--c-line)}
.ys-cstats__list b{font-family:var(--f-en);font-size:clamp(56px,6.2vw,96px);line-height:1;font-weight:500;letter-spacing:-.04em}
.ys-cstats__list b small{font-family:var(--f-ja);font-size:16px;margin-left:8px;letter-spacing:0}
.ys-cstats__list span{font-size:15px;line-height:1.9;color:var(--c-ink-2)}
.ys-cstats__note{grid-column:2;margin-top:6px;font-size:12px;line-height:1.8;color:var(--c-mute)}
@media (max-width:900px){ .ys-cstats{grid-template-columns:1fr} .ys-cstats__note{grid-column:1} }
/* プロジェクトの記録（従来の本文。章がある事例は折りたたみ） */
.ys-crecord{background:var(--c-paper-2);color:var(--c-ink);padding:clamp(48px,6vw,96px) var(--gx)}
.ys-crecord__details,.ys-crecord__head,.ys-crecord__body{max-width:1100px;margin:0 auto}
.ys-crecord summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:6px 28px;align-items:center;padding:28px 0;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.ys-crecord summary::-webkit-details-marker{display:none}
.ys-crecord__label{font-family:var(--f-en);font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--c-navy)}
.ys-crecord__title{font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.02em}
.ys-crecord__hint{grid-column:2;font-size:13px;color:var(--c-mute)}
.ys-crecord__icon{grid-column:3;grid-row:1/3;width:52px;height:52px;border-radius:50%;border:1px solid var(--c-ink);position:relative}
.ys-crecord__icon::before,.ys-crecord__icon::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;background:currentColor;transition:transform .3s}
.ys-crecord__icon::after{transform:rotate(90deg)}
.ys-crecord details[open] .ys-crecord__icon::after{transform:rotate(0)}
.ys-crecord summary:focus-visible{outline:2px solid var(--c-navy);outline-offset:4px}
.ys-crecord__head{display:flex;gap:24px;align-items:baseline;padding-bottom:28px;border-bottom:1px solid var(--c-line)}
.ys-crecord__body{padding-top:clamp(28px,4vw,56px)}
.ys-crecord .insights-article-body{max-width:none}
/* 事例詳細の相談導線 */
.ys-ccta{background:#fff;color:var(--c-ink);padding:clamp(96px,11vw,170px) var(--gx);text-align:left}
.ys-ccta h2{font-size:clamp(30px,4vw,58px);line-height:1.35;font-weight:700;letter-spacing:-.03em;max-width:16em}
.ys-ccta .ys-hero__actions{margin-top:36px}
/* 次の事例（参考：project-nav・次作品の画像を背景に、ラベル24px＋案件名90px） */
.ys-next{position:relative;background:var(--c-night);color:#fff}
.ys-next__link{position:relative;display:block;min-height:min(100vh,860px);overflow:hidden;color:#fff}
.ys-next__media{position:absolute;inset:0}
.ys-next__media{background:var(--c-night)}
.ys-next__media img{width:100%;height:100%;object-fit:cover;opacity:.5;transform:scale(1.04);transition:transform 1.2s cubic-bezier(.165,.84,.44,1),opacity .6s}
.ys-next__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,19,.55) 0%,rgba(11,14,19,.25) 40%,rgba(11,14,19,.85) 100%),linear-gradient(90deg,rgba(11,14,19,.6),rgba(11,14,19,0) 65%)}
.ys-next__link:hover .ys-next__media img,.ys-next__link:focus-visible .ys-next__media img{opacity:.72;transform:scale(1)}
/* 明るい素材（SVG図版など）は色を沈めて文字を読めるように */
.ys-next__media img:not([src$=".jpg"]){filter:invert(1) hue-rotate(180deg) saturate(.4) brightness(.8)}
.ys-next__link{isolation:isolate}
.ys-next__cap{z-index:2}
.ys-next__cap{position:absolute;left:var(--ch-x,120px);right:var(--gx);bottom:clamp(64px,12vh,140px)}
.ys-next__eyebrow{font-family:var(--f-en);font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--c-mist)}
.ys-next__sub{margin-top:28px;font-family:var(--f-en),var(--f-ja);font-size:clamp(16px,1.67vw,24px);line-height:1.5;font-weight:500}
.ys-next__sub span{display:block}
.ys-next__bar{display:block;width:min(320px,60%);height:1px;margin:26px 0;background:rgba(255,255,255,.25);overflow:hidden}
.ys-next__bar i{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.645,.045,.355,1)}
.ys-next__link:hover .ys-next__bar i,.ys-next__link:focus-visible .ys-next__bar i{transform:none}
.ys-next__title{font-family:var(--f-en),var(--f-ja);font-weight:500;font-size:calc(1rem + 5.15vw);line-height:1.3;letter-spacing:-.02em}
.ys-next__title span{display:block;transition:transform .6s cubic-bezier(.215,.61,.355,1)}
.ys-next__link:hover .ys-next__title span{transform:translateX(14px)}
.ys-next__link:hover .ys-next__title span+span{transition-delay:.05s}
.ys-next__link:focus-visible{outline:2px solid var(--c-mist);outline-offset:-6px}
@media (max-width:767px){ .ys-next{--ch-x:20px} .ys-next__link{min-height:78vh} .ys-next__title{font-size:clamp(40px,13vw,56px)} }
/* 事例一覧：新しい事例ビジュアルは全面に */
.ys-case-grid .cs-card-visual img.is-ys-visual,.cs-card-visual img.is-ys-visual{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;max-height:none;padding:0;box-shadow:none;border-radius:0}
.cs-card-visual{position:relative}
@media (prefers-reduced-motion:reduce){
  .ys-chero__bg img,.ys-chero__arrow,.ys-chero__sub span,.ys-chero__title .ln>span,.ys-chero__scroll{transition:none!important;opacity:1!important;transform:none!important}
}

.ys-menu:focus{outline:none}
.ys-menu.is-open.is-settled .ys-menu__link{transition:opacity .1s ease-in-out,transform .1s,color .2s;transition-delay:0s!important}
@media (hover:none),(pointer:coarse){ .ys-pw__media::after{inset:25% 0 0;background:linear-gradient(transparent,rgba(5,8,12,.82) 70%)} }
/* 参考サイトと同じく、ヘッダー（ロゴ・MENU）はスクロール中も常に表示 */
.ys-header.is-hidden{transform:none}
.ys-chero__title:focus{outline:none}
/* 素材が少ない事例（専用ビジュアル未作成）：既存画像を右上の額縁に収め、背景は濃紺のグラデーション */
.ys-chero.is-framed{background:var(--g-hero)}
.ys-chero.is-framed .ys-chero__bg{inset:auto;right:var(--gx);top:calc(var(--hd-h) + 5vh);width:min(52vw,840px);aspect-ratio:16/10}
.ys-chero.is-framed .ys-chero__bg img{object-fit:contain}
.ys-chero.is-framed::after{background:linear-gradient(90deg,rgba(5,8,12,.55),rgba(5,8,12,0) 55%),linear-gradient(0deg,rgba(5,8,12,.5),rgba(5,8,12,0) 45%)}
@media (max-width:767px){ .ys-chero.is-framed .ys-chero__bg{left:20px;right:20px;width:auto;top:calc(var(--hd-h) + 56px)} }
.ys-tr-bg{position:fixed;inset:0;z-index:399;background:var(--g-hero);opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.77,0,.175,1)}
.ys-tr-bg.is-on{opacity:1}
.ys-tr.is-framed img{object-fit:contain}
.ys-tr.is-framed{background:transparent}
html.has-ball .cs-card-visual::after{opacity:0!important}
/* スマートフォン（参考サイトを iPhone で表示した実測：左右20px・大195×263・小127×184・段差 79/413/492px） */
@media (max-width:767px){
  .ys-pw__grid{padding:0 20px}
  .ys-pw__item:nth-child(4n+1),.ys-pw__item:nth-child(4n+4){width:55.7%}
  .ys-pw__item:nth-child(4n+2),.ys-pw__item:nth-child(4n+3){width:44.3%}
  .ys-pw__item:nth-child(4n+2)::after,.ys-pw__item:nth-child(4n+3)::after{padding-bottom:119%}
  .ys-pw__item:nth-child(4n+2) .ys-pw__parallax{width:82%;height:100%;right:0;left:auto;top:0}
  .ys-pw__item:nth-child(4n+3) .ys-pw__parallax{width:82%;height:100%;left:0;right:auto;top:0}
  .ys-pw__item:nth-child(4n+2){margin-top:20.3vw}
  .ys-pw__item:nth-child(4n+3){margin-top:58.7vw}
  .ys-pw__item:nth-child(4n+4){margin-top:38.5vw}
  /* 参考サイトのスマートフォン表示：MENU の文字と赤い円は出さず、×だけ */
  .ys-menu-btn__label{display:none}
  .ys-menu-btn[aria-expanded="true"] .ys-menu-btn__icon::before{opacity:0}
}
/* 章の画像：写真（検証画像の切り出し）は参考サイトと同じ縦長・全面。資料は横長の額に収める */
.ys-chap:has(.is-portrait){grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1240px}
.ys-chap__fig.is-portrait .ys-chap__frame{aspect-ratio:1/1.3;padding:0;background:var(--c-night)}
.ys-chap__fig.is-portrait .ys-chap__frame img{width:100%;height:100%;max-height:none;object-fit:cover;box-shadow:none}
@media (max-width:900px){ .ys-chap:has(.is-portrait){grid-template-columns:1fr} .ys-chap__fig.is-portrait .ys-chap__frame{aspect-ratio:1/1.15} }
/* 次の事例：額縁型の事例は、背景を濃紺にして画像を右上の額縁に（明るい図版を全面に敷かない） */
.ys-next__media:has(img[data-ys-hero="framed"]){background:var(--g-hero)}
.ys-next__media img[data-ys-hero="framed"]{position:absolute;inset:auto;right:var(--gx);top:12%;width:min(48vw,780px);height:auto;aspect-ratio:16/10;object-fit:contain;filter:none;opacity:.9}
.ys-next__link:hover .ys-next__media img[data-ys-hero="framed"]{opacity:1}
@media (max-width:767px){ .ys-next__media img[data-ys-hero="framed"]{left:20px;right:20px;width:auto;top:10%} }

/* ---------- 47. 何を、どの技術でつくれるか（/group/ の理由・体制・できることを移行 2026-10-24） ----------
   参考方針（ystudio.co.kr）：大きな見出し＋端正な本文、広い余白、スクロールで段階的に現れる。
   PCは左に固定の目次（いま読んでいる段を示す）、本文は「01 理由 → 02 体制 → 03 できること」。 */
.ys-gt{background:#fff;color:var(--c-ink);padding:var(--sy-lg) var(--gx) var(--sy)}
.ys-gt__head{max-width:1240px;margin:0 auto}
.ys-gt__lede{margin-top:clamp(24px,3vw,40px);max-width:36em;font-size:clamp(16px,1.35vw,19px);line-height:2;font-weight:500;color:var(--c-ink-2)}
.ys-gt__layout{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(32px,5vw,96px);max-width:1240px;margin:clamp(64px,8vw,120px) auto 0}
.ys-gt__index{position:sticky;top:calc(var(--hd-h) + 32px);align-self:start}
.ys-gt__index ol{list-style:none;border-top:1px solid var(--c-line)}
.ys-gt__index a{display:flex;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--c-line);font-size:14px;font-weight:600;color:var(--c-mute);transition:color .3s}
.ys-gt__index a span{font-family:var(--f-en);font-size:12px;font-weight:500;letter-spacing:.06em}
.ys-gt__index a:hover,.ys-gt__index a.is-current{color:var(--c-ink)}
.ys-gt__index a.is-current span{color:var(--c-navy)}
.ys-gt__index a:focus-visible{outline:2px solid var(--c-navy);outline-offset:3px}
.ys-gt__part{padding-top:clamp(40px,5vw,72px);border-top:1px solid var(--c-line);scroll-margin-top:calc(var(--hd-h) + 24px)}
.ys-gt__part+.ys-gt__part{margin-top:clamp(96px,11vw,170px)}
.ys-gt__num{display:flex;gap:14px;align-items:baseline;font-family:var(--f-en),var(--f-ja);font-size:clamp(14px,1.2vw,17px);font-weight:600}
.ys-gt__num span{font-size:.8em;color:var(--c-navy)}
.ys-gt__title{margin-top:clamp(18px,2vw,28px);max-width:22em;font-family:var(--f-ja);font-size:clamp(26px,3.1vw,44.8px);line-height:1.48;font-weight:600;letter-spacing:-.02em}
.ys-gt__text{margin-top:clamp(28px,3vw,44px);max-width:40em;display:grid;gap:18px}
.ys-gt__text p{font-size:clamp(15px,1.15vw,17px);line-height:2.05;font-weight:500}
.ys-gt__fig{margin:clamp(56px,7vw,100px) 0 0}
.ys-gt__fig figcaption{display:grid;gap:12px}
.ys-gt__figlabel{font-size:13px;font-weight:600;color:var(--c-navy)}
.ys-gt__figtitle{font-size:clamp(20px,2vw,28px);line-height:1.6;font-weight:700;letter-spacing:-.02em}
.ys-gt__compare h4{margin-top:12px;font-size:clamp(22px,2.2vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1.4}
.ys-gt__read{margin-top:22px;max-width:52em;font-size:15px;line-height:2}
.ys-gt__roles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(40px,5vw,64px);position:relative}
.ys-gt__roles li{position:relative;padding:clamp(24px,2.6vw,40px);border:1px solid var(--c-line);margin-left:-1px;display:grid;gap:8px;align-content:start;background:#fff}
.ys-gt__roles li.is-base{background:var(--c-fill-grad);color:#fff;border-color:transparent;z-index:1}
.ys-gt__roles b{font-family:var(--f-en);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--c-navy)}
.ys-gt__roles li.is-base b{color:var(--c-mist)}
.ys-gt__roles strong{font-size:clamp(19px,1.7vw,24px);font-weight:700;letter-spacing:-.02em}
.ys-gt__roles span{font-size:14px;line-height:1.9;opacity:.8}
.ys-gt__roles li+li::before{content:"";position:absolute;left:-14px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:#fff;border:1px solid var(--c-line);z-index:2}
.ys-gt__roles li+li::after{content:"↔";position:absolute;left:-14px;top:50%;width:26px;margin-top:-10px;text-align:center;font-size:12px;color:var(--c-navy);z-index:3}
.ys-gt__note{margin-top:18px;font-size:13.5px;line-height:1.9;color:var(--c-ink-2)}
.ys-gt__caps{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--c-line)}
.ys-gt__caps li{padding:clamp(28px,3vw,44px) clamp(0px,2.4vw,40px) clamp(32px,3.4vw,48px) 0;border-bottom:1px solid var(--c-line)}
.ys-gt__caps li:nth-child(even){padding-left:clamp(20px,2.4vw,40px);border-left:1px solid var(--c-line)}
.ys-gt__caps .n{font-family:var(--f-en);font-size:clamp(40px,4.4vw,64px);font-weight:500;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--c-navy)}
.ys-gt__caps h4{margin-top:18px;font-size:clamp(20px,1.8vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.45}
.ys-gt__caps p{margin-top:12px;font-size:15px;line-height:2}
.ys-gt__tech{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px!important}
.ys-gt__tech .k{font-size:11.5px;font-weight:600;color:var(--c-mute);margin-right:4px}
.ys-gt__tech .t{display:inline-block;padding:4px 12px;border:1px solid rgba(25,53,80,.28);border-radius:999px;font-family:var(--f-en),var(--f-ja);font-size:12.5px;font-weight:500;background:var(--c-paper-2)}
.ys-gt-company .ys-label span{font-family:var(--f-en)}
.ys-gt-company{scroll-margin-top:0}
@media (max-width:1023px){
  .ys-gt__layout{grid-template-columns:1fr;gap:0;margin-top:clamp(40px,6vw,64px)}
  .ys-gt__index{position:static}
  .ys-gt__index ol{display:flex;flex-wrap:wrap;gap:8px;border:0}
  .ys-gt__index a{padding:8px 14px;border:1px solid var(--c-line);border-radius:999px;font-size:13px;color:var(--c-ink)}
  .ys-gt__part:first-child{margin-top:clamp(40px,6vw,64px)}
}
@media (max-width:767px){
  .ys-gt__roles{grid-template-columns:1fr}
  .ys-gt__roles li{margin-left:0;margin-top:-1px}
  .ys-gt__roles li+li::before{left:50%;top:-14px;margin:0 0 0 -13px}
  .ys-gt__roles li+li::after{content:"↕";left:50%;top:-11px;margin:0 0 0 -13px}
  .ys-gt__caps{grid-template-columns:1fr}
  .ys-gt__caps li,.ys-gt__caps li:nth-child(even){padding-left:0;padding-right:0;border-left:0}
}
.ys-gt__src{margin-top:18px;font-size:12.5px;line-height:1.9;color:var(--c-mute)}
.ys-gt__part:focus,.ys-gt-company:focus{outline:none}

/* ---------- 47. 事例詳細の共通化（2026-10-24）：図解・引用・数値なしの成果 ----------
   図解は記事の記載だけを文字と線で組む（実際の画面・納品物に見せない）。 */
.ys-chap__fig.is-diagram .ys-chap__frame{aspect-ratio:auto;min-height:clamp(320px,34vw,520px);display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,64px);color:#fff}
.ys-dgm__in{position:relative;z-index:1;width:100%;max-width:640px}
.ys-dgm__head{font-family:var(--f-en);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--c-mist);margin-bottom:clamp(18px,2vw,28px)}
.ys-dgm__flow,.ys-dgm__list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid rgba(177,190,203,.28)}
.ys-dgm__flow li,.ys-dgm__list li{display:grid;grid-template-columns:4.2em 1fr;gap:16px;align-items:baseline;padding:clamp(12px,1.3vw,18px) 0;border-bottom:1px solid rgba(177,190,203,.28)}
.ys-dgm__k{font-family:var(--f-en);font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--c-mist)}
.ys-dgm__t{font-size:clamp(14px,1.25vw,17px);line-height:1.7;font-weight:600}
.ys-dgm__flow li{position:relative}
.ys-dgm__flow li:not(:last-child)::after{content:"";position:absolute;left:1.1em;bottom:-6px;width:1px;height:12px;background:var(--c-mist);z-index:1}
.ys-dgm__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.ys-dgm__col{border-top:1px solid rgba(177,190,203,.5);padding-top:14px}
.ys-dgm__col .ys-dgm__k{display:block;margin-bottom:10px}
.ys-dgm__col ul{list-style:none;margin:0;padding:0}
.ys-dgm__col li{font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.75;padding:8px 0;border-bottom:1px solid rgba(177,190,203,.2)}
@media (max-width:600px){ .ys-dgm__pair{grid-template-columns:1fr} .ys-dgm__flow li,.ys-dgm__list li{grid-template-columns:3.4em 1fr} }

.ys-chap__quote{margin:28px 0 0;padding:22px 0 0 22px;border-left:2px solid var(--c-navy)}
.ys-chap__quote blockquote{margin:0}
.ys-chap__quote p{font-size:clamp(15px,1.25vw,18px);line-height:1.95;font-weight:600;color:var(--c-ink)}
.ys-chap__quote figcaption{margin-top:12px;font-size:12.5px;color:var(--c-mute)}

.ys-coutc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,64px);max-width:1240px;margin:0 auto;padding:clamp(60px,7vw,110px) var(--gx) clamp(80px,9vw,140px);background:#fff;color:var(--c-ink)}
.ys-coutc__head .ys-chap__title{margin-top:0}
.ys-coutc__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-line)}
.ys-coutc__list li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--c-line)}
.ys-coutc__list h3{font-size:clamp(18px,1.7vw,24px);line-height:1.5;font-weight:700;letter-spacing:-.01em}
.ys-coutc__list p{font-size:15px;line-height:1.9;color:var(--c-ink-2)}
.ys-coutc__note{grid-column:2;margin-top:6px;font-size:12px;line-height:1.8;color:var(--c-mute)}
@media (max-width:900px){ .ys-coutc{grid-template-columns:1fr} .ys-coutc__note{grid-column:1} .ys-coutc__list li{grid-template-columns:1fr;gap:8px} }
.ys-cstats + .ys-coutc{padding-top:0}
/* 明るい画面画像が主体のビジュアル：案件名とパンくずの読みやすさを優先して、左と下の暗い重ねを強める */
.ys-chero.is-bright::after{background:linear-gradient(180deg,rgba(5,8,12,.55) 0,rgba(5,8,12,.1) 24%,rgba(5,8,12,.1) 42%,rgba(5,8,12,.82) 100%),linear-gradient(90deg,rgba(5,8,12,.78),rgba(5,8,12,.2) 62%,rgba(5,8,12,.1))}
@media (max-width:767px){ .ys-chero.is-bright::after{background:linear-gradient(180deg,rgba(5,8,12,.55) 0,rgba(5,8,12,.25) 30%,rgba(5,8,12,.88) 100%)} }

/* MENU-JA START（メニュー・フッター見出しの日本語化 2026-10-24） */
/* ==========================================================================
   メニュー・フッターの日本語化（2026-10-24 メニュー担当）
   統合方法：ys.css の末尾にこのファイルの中身をそのまま追記する（既存ルールは変更しない）。
   前提：partials/header.html・footer.html の日本語ラベル版。Noto Sans JP 700 は head.html で読込済み。
   ========================================================================== */

/* ヘッダーの「メニュー」ボタン（PC・タブレットのみ表示。767px 以下は既存ルールで非表示） */
.ys-menu-btn{font-family:var(--f-ja);font-weight:500;font-size:13px;letter-spacing:.08em}

/* 主項目の大見出し：Poppins 500 → Noto Sans JP 700。
   和文は字面が大きいため、既存の --t-giant-ja と同じく欧文サイズの約85%に揃える（1440px で約77px）。
   行の高さ（= 巻き上げのマスク高さ）は欧文時と同じ値のままにして、項目間のリズムを保つ */
.ys-menu__link{font-family:var(--f-ja);font-weight:700;letter-spacing:.01em;font-feature-settings:'palt';
  font-size:calc(.85rem + 4.4vw);line-height:calc(1rem + 7vw)}
@media (min-width:1467px){ .ys-menu__link{font-size:calc(.85rem + 3.5vw);line-height:calc(1rem + 5.5vw)} }
/* 巻き上げ用の重ね文字は読み上げ名に含めない（未対応ブラウザは1行目の指定を使う） */
.ys-menu__en::before{content:attr(data-hover);content:attr(data-hover) / ""}
/* 「その他のページ」に添える補足（事業・記事・採用など）：和文の大見出しの上端に合わせる */
.ys-menu__link small{top:.55em;letter-spacing:.02em}

/* 第二階層：戻る・グループ見出し */
.ys-menu__back{font-family:var(--f-ja);font-size:14px;font-weight:500;letter-spacing:.06em;align-items:center}
.ys-menu__group h2{font-family:var(--f-ja);font-size:13px;font-weight:500;letter-spacing:.1em}

/* フッターのナビゲーション見出し */
.ys-footer__nav h3{font-family:var(--f-ja);font-size:12px;font-weight:500;letter-spacing:.12em}

/* 和文の主項目は1行で組む。561〜900px は左右の余白（補足ラベルの置き場）を詰めて、
   「その他のページ」が折り返さないようにする（560px 以下は既存ルールで余白 .2em） */
.ys-menu__en{white-space:nowrap}
@media (min-width:561px) and (max-width:900px){ .ys-menu__item{padding:0 7em} }
/* MENU-JA END */

/* PAGE-TR START */
/* ---------- 47. サイト内のページ遷移（ystudio.co.kr を実測：~/eap-ys-redesign-tools/page-transition-20261024/SPEC.md） ----------
   離れる：覆い層 0→1・0.30s ease-out（power1.out）。ヘッダーは残す。色はクリック時に見えている区画の明暗。メニューは0.2sで消す。
   移る：0.33s で通常のページ移動。遷移先は描画前から同じ色で覆い、クリックから0.70s以降に 0.67s power2.inOut で抜く。
   リング：PCのみ。追従する丸の外周に #999・4px・下側の弧（0.8s ease-in-out 回転）。遷移先でも同じ位置に1.1s残す。 */
html{--ys-tr-tone:var(--c-ink-0)}
html.ys-tr-light{--ys-tr-tone:var(--c-paper)}
html::before{content:"";position:fixed;inset:0;z-index:180;background:var(--ys-tr-tone);opacity:0;visibility:hidden;pointer-events:none}
html.ys-tr-out::before{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s cubic-bezier(.5,1,.89,1),visibility 0s}
html.ys-tr-out,html.ys-tr-out *{cursor:progress}
html.ys-tr-out a,html.ys-tr-out button,html.ys-tr-out input,html.ys-tr-out select,html.ys-tr-out textarea{pointer-events:none}
/* メニューの下は最初から覆う（メニューが消える間に元ページを透かさない） */
html.ys-tr-out.ys-menu-open::before{transition:none}
html.ys-tr-out .ys-menu{opacity:0!important;transition:opacity .2s cubic-bezier(.5,1,.89,1)!important}
html.ys-tr-out .ys-float{opacity:0;transition:opacity .3s}
/* 遷移先：描画前から覆う。2.5s たっても覆いが残っていたら CSS だけで外す（読み込み失敗・JS停止でも操作不能にしない） */
html.ys-tr-in::before{opacity:1;visibility:visible;animation:ys-tr-safety .3s linear 2.5s forwards}
html.ys-tr-in.ys-tr-reveal::before{opacity:0;visibility:hidden;pointer-events:none;animation:none;transition:opacity .67s cubic-bezier(.65,0,.35,1),visibility 0s .67s}
@keyframes ys-tr-safety{to{opacity:0;visibility:hidden}}
/* 覆いの上のヘッダーは覆いの明暗に合わせる（抜け始めたら遷移先の色へ） */
html.ys-tr-out.ys-tr-light .ys-header,html.ys-tr-in.ys-tr-light:not(.ys-tr-reveal) .ys-header{color:var(--c-ink)}
html.ys-tr-out.ys-tr-light .ys-header .ys-logo,html.ys-tr-in.ys-tr-light:not(.ys-tr-reveal) .ys-header .ys-logo{background:var(--c-ink-0)}
html.ys-tr-out:not(.ys-tr-light) .ys-header,html.ys-tr-in:not(.ys-tr-light):not(.ys-tr-reveal) .ys-header{color:#fff}
html.ys-tr-out:not(.ys-tr-light) .ys-header .ys-logo,html.ys-tr-in:not(.ys-tr-light):not(.ys-tr-reveal) .ys-header .ys-logo{background:#fff}
/* 読み込みリング（参考 #ball-loader：100px・下側の弧・translate(-14px,-14px)） */
.ys-ball.is-loading{--bs:.5;border-width:4px;border-color:#999;background:transparent}
.ys-ball.is-loading::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:4px solid transparent;border-bottom-color:#999;opacity:0;
  animation:ys-tr-ring .8s ease-in-out infinite,ys-tr-ring-in .2s ease-in-out forwards}
.ys-ball.is-loading.is-held::after{opacity:1;animation:ys-tr-ring .8s ease-in-out infinite}
.ys-ball.is-loading.is-ring-out::after{animation:ys-tr-ring .8s ease-in-out infinite,ys-tr-ring-out .2s ease-in-out forwards}
@keyframes ys-tr-ring{to{transform:rotate(360deg)}}
@keyframes ys-tr-ring-in{to{opacity:1}}
@keyframes ys-tr-ring-out{from{opacity:1}to{opacity:0}}
html.ys-tr-out .ys-ball,html.ys-tr-in .ys-ball{z-index:300}
/* JS が丸を用意するまでの間、遷移先でも同じ位置にリングを出す（PCでクリックした時だけ） */
html.ys-tr-ring::after{content:"";position:fixed;left:var(--ys-tr-x);top:var(--ys-tr-y);z-index:301;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;
  border:2px solid transparent;border-bottom-color:#999;pointer-events:none;animation:ys-tr-ring .8s ease-in-out infinite}
html.ys-tr-ring.ys-tr-ball::after{content:none}
/* 遷移先のヒーロー：背景の図形 0.70s power2.out・矢印とラベル 0.4s ease・上へ20px（出現開始＋0.175s から） */
html.ys-tr-hero .ys-phero__shape{opacity:0;transform:scale(1.1);transform-origin:50% 50%}
html.ys-tr-hero.ys-tr-reveal .ys-phero__shape{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.33,1,.68,1) .22s,transform .7s cubic-bezier(.33,1,.68,1) .22s}
html.ys-tr-hero :is(.ys-phero,.ys-hero__first,.ys-404) .ys-rv{transform:translateY(20px);transition:opacity .4s ease,transform .4s ease;transition-delay:var(--rv-d,0s)}
html.ys-tr-hero :is(.ys-phero,.ys-hero__first,.ys-404) .ys-rv.is-in{transform:none}
@media (prefers-reduced-motion:reduce){
  html::before,html.ys-tr-ring::after{content:none}
  .ys-ball.is-loading::after{animation:none;opacity:1}
}
/* PAGE-TR END */

/* MVV 20261025 */
.ys-nw{display:inline-block}
.ys-mvv-tag{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--c-mist);margin-bottom:14px}
.ys-mvv>.ys-label{display:block;margin-bottom:clamp(28px,3.4vw,48px);color:var(--c-mist)}
.ys-mvv dl>div>dt{font-family:inherit;letter-spacing:.06em}
.ys-mvv__values>dd{font-size:inherit}
.ys-mvv .ys-principles li{border-top-color:var(--c-line-inv);padding:26px 0}
.ys-mvv .ys-principles li:nth-child(-n+2){border-top:0;padding-top:4px}
.ys-mvv .ys-principles .n{color:var(--c-mist)}
.ys-mvv .ys-principles h3{color:#fff;font-size:clamp(22px,2.2vw,30px)}
.ys-mvv .ys-principles p{color:rgba(255,255,255,.74);font-size:15px}
.ys-values--recruit{margin-top:clamp(40px,5vw,64px)}
.ys-values--recruit h3{font-size:clamp(22px,2.2vw,30px)}
.ys-values--recruit p{font-size:15px}
.ys-values__more{margin-top:28px}
@media (max-width:760px){
  .ys-values{grid-template-columns:1fr}
  .ys-mvv .ys-principles li:nth-child(2){border-top:1px solid var(--c-line-inv);padding-top:26px}
  .ys-values li{grid-template-columns:44px minmax(0,1fr)}
}