/* ===============================================================
   デザイントークン(A/B共通)
   =============================================================== */
:root{
  --base:#FFFFFF;
  --bg-soft:#F4F9FB;
  --hero-gradient:linear-gradient(160deg,#E7F7FB 0%,#F3FCFB 52%,#FFFFFF 100%);
  --footer-bg:#0C2B33;
  --primary:#12B3D4;
  --brand-gradient:linear-gradient(135deg,#12B3D4,#20C1A4);
  --label:#0A9FBF;
  --link-dark:#0A7F99;
  --text-main:#0C2B33;
  --text-body:#4A5B61;
  --text-sub:#5A6B70;
  --border:#E8EFF2;
  --text-faint:#8A9BA1;   /* 図の小さな英字ラベルなど */
  --deep:#06596E;        /* リンク枠・アクセント(ボタンより静かな濃さ) */
  --curtain:#0C2B33;
  --node:#28C6D8;
  --container:1120px;
  --header-h:72px;
}

/* ===============================================================
   ベース
   =============================================================== */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Noto Sans JP',sans-serif;
  color:var(--text-body);
  background:var(--base);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}

/* セクション共通 */
main section{
  position:relative;overflow:hidden;
  padding:100px 0;scroll-margin-top:calc(var(--header-h) + 12px);
}

.eyebrow-label{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.18em;
  color:var(--label);margin-bottom:18px;
}
h2{color:var(--text-main);line-height:1.55;font-weight:800;font-size:36px;letter-spacing:.01em;}
.lead{margin-top:18px;font-size:17px;color:var(--text-body);}

/* ===============================================================
   改行（2026-09-20）
   見出し … HTMLに <wbr> で「意味の切れ目」を書き、そこでしか折り返さない（keep-all）。
            一番長いまとまりすら入らない幅では、はみ出さないように文字の途中で折る（anywhere）。
   本文   … 文節で折り返す。Chrome は auto-phrase、効かないブラウザ（iPhone全般・Firefox）は
            main.js が BudouX で文節の切れ目を入れる。
   =============================================================== */
main{word-break:auto-phrase;}
main p,main li,main dd,main td{text-wrap:pretty;}
h1,h2,h3{word-break:keep-all;overflow-wrap:anywhere;}
/* TOPの本文で「」に入れた太字の語（「人の質」「パートナーシップ・商流支援」など）は途中で割らない。
   最長14文字でSPの1行に収まる。ABOUT/SERVICEの太字は文なので対象外（割らないと画面からはみ出す） */
.philo-text b,.biz-in p b{white-space:nowrap;}

/* ===============================================================
   ヘッダー(sticky・ロゴなしテキストブランド)
   =============================================================== */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  opacity:0;animation:fd-fade-only .35s ease .5s both;
}
.header-inner{
  display:flex;align-items:center;gap:28px;
  height:var(--header-h);
}
/* ロゴ画像（2026-09-20 / #9）。以前は文字組み（青緑＋オレンジの点）だった */
.site-brand{display:inline-flex;align-items:center;min-height:40px;}
.site-brand img{display:block;height:26px;width:auto;}
.gnav{display:flex;align-items:center;gap:28px;margin-left:auto;}
.gnav a{
  font-size:14px;font-weight:500;color:#33474d;position:relative;padding:4px 0;
}
.gnav a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--brand-gradient);transition:width .3s ease;
}
.gnav a:hover::after{width:100%;}
/* いまいるページ。aria-current は main.js がURLを見て付ける（HTMLを4ファイルで同一に保つため） */
.gnav a[aria-current="page"]{color:var(--label);}
.gnav a[aria-current="page"]::after{width:100%;}
.nav-toggle{
  display:none;position:relative;width:42px;height:42px;
  background:none;border:none;cursor:pointer;padding:0;
}
.nav-toggle span{
  position:absolute;left:10px;display:block;width:22px;height:2px;
  background:var(--text-main);border-radius:999px;
  transition:top .22s ease,transform .28s cubic-bezier(.16,1,.3,1),opacity .18s ease;
}
.nav-toggle span:nth-child(1){top:15px;}
.nav-toggle span:nth-child(2){top:20px;opacity:0;}
.nav-toggle span:nth-child(3){top:25px;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){
  top:20px;transform:rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3){
  top:20px;transform:rotate(-45deg);
}
.nav-overlay{
  position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:65;
  background:rgba(12,43,51,.28);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.nav-overlay.open{
  opacity:1;visibility:visible;pointer-events:auto;
}

/* ===============================================================
   FV(ヒーロー) ─ 起動演出とFVは同一セクション内で連動する
   =============================================================== */
.hero{
  position:relative;overflow:hidden;
  background:var(--hero-gradient);
  padding:108px 0 116px;
}

/* 濃色カーテン(FV内に閉じた装飾層。フェードで抜ける) */
.hero-curtain{
  position:absolute;inset:0;z-index:1;
  background:var(--curtain);
  pointer-events:none;
  animation:fd-curtain-out 3.0s ease both;
}

/* 光のノードリレー(開幕: 短い光跡でつながって消える) */
.hero-relay{position:absolute;inset:0;pointer-events:none;}
.hero-relay .dot{position:absolute;border-radius:50%;background:var(--node);opacity:0;}
.hero-relay.top{z-index:2;}
.hero-relay.top .dot{width:10px;height:10px;animation:fd-node-relay .22s cubic-bezier(.16,1,.3,1) both;}
.hero-relay.top .dot:nth-child(1){top:16%;left:6%;animation-delay:.30s;}
.hero-relay.top .dot:nth-child(2){top:34%;left:25%;width:8px;height:8px;animation-delay:.36s;}
.hero-relay.top .dot:nth-child(3){top:15%;left:44%;width:11px;height:11px;animation-delay:.42s;}
.hero-relay.top .dot:nth-child(4){top:32%;left:63%;width:7px;height:7px;animation-delay:.48s;}
.hero-relay.top .dot:nth-child(5){top:17%;left:81%;animation-delay:.54s;}
.hero-relay.top svg{position:absolute;inset:0;width:100%;height:100%;}
.hero-relay.top path{opacity:0;animation:fd-line-relay .22s ease both;}
.hero-relay.top path:nth-child(1){animation-delay:.36s;}
.hero-relay.top path:nth-child(2){animation-delay:.42s;}
.hero-relay.top path:nth-child(3){animation-delay:.48s;}
.hero-relay.top path:nth-child(4){animation-delay:.54s;}

/* 光のノードリレー(CTA下: 演出後にそっと明滅するだけの控えめな余韻) */
.hero-relay.bottom{z-index:4;}
.hero-relay.bottom .dot{
  width:10px;height:10px;
  animation:fd-node-relay .8s cubic-bezier(.16,1,.3,1) both,fd-breathe 4s ease-in-out infinite;
}
.hero-relay.bottom .dot:nth-child(1){top:86%;left:81%;animation-delay:3.10s,3.90s;}
.hero-relay.bottom .dot:nth-child(2){top:89%;left:62%;width:8px;height:8px;animation-delay:3.22s,3.40s;}
.hero-relay.bottom .dot:nth-child(3){top:85%;left:43%;width:11px;height:11px;animation-delay:3.34s,3.40s;}
.hero-relay.bottom .dot:nth-child(4){top:90%;left:24%;width:7px;height:7px;animation-delay:3.46s,3.40s;}
.hero-relay.bottom .dot:nth-child(5){top:87%;left:6%;width:9px;height:9px;animation-delay:3.58s,3.40s;}

/* アンビエントグロー(カーテンが抜けた後のhero背景を支える淡い光) */
.hero-glow{position:absolute;z-index:1;pointer-events:none;opacity:0;}
.hero-glow.a{
  top:0;right:0;width:56%;height:100%;
  background:radial-gradient(circle at 75% 40%,#e6f9f6 0%,rgba(230,249,246,0) 65%);
  animation:fd-glow-in .5s ease .5s both;
}
.hero-glow.b{
  top:-90px;right:8%;width:300px;height:300px;border-radius:50%;filter:blur(6px);
  background:radial-gradient(circle at 35% 35%,rgba(65,203,225,.4),rgba(65,203,225,0) 70%);
  animation:fd-glow-in .5s ease .95s both,fd-breathe 4s ease-in-out 3.1s infinite;
}
.hero-glow.c{
  bottom:-110px;left:-6%;width:320px;height:320px;border-radius:50%;filter:blur(6px);
  background:radial-gradient(circle at 60% 40%,rgba(43,196,166,.32),rgba(43,196,166,0) 70%);
  animation:fd-glow-in .5s ease 1.0s both,fd-breathe 4s ease-in-out 3.1s infinite;
}

/* 光のビーム(タイトルボックス基準で、行間を一瞬だけ走る) */
.title-beam{
  position:absolute;left:0;right:18%;top:50%;height:2px;z-index:-1;
  transform-origin:right;
  background:linear-gradient(90deg,rgba(45,199,216,.85),rgba(45,199,216,0));
  box-shadow:0 0 10px rgba(45,199,216,.5);
  pointer-events:none;opacity:0;
  animation:fd-beam .5s ease 1.05s both;
}

.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);gap:40px;align-items:center;
}
h1{
  margin-top:24px;
  font-size:48px;line-height:1.36;font-weight:900;color:var(--text-main);
  letter-spacing:.01em;
  position:relative;isolation:isolate;
}
.fd-line{display:block;opacity:0;animation:fd-copyin .5s ease both,fd-tone-main 3.0s linear 0s both;}
.fd-line.l1{animation-delay:.35s,0s;}
.fd-line.l2{
  position:relative;display:inline-block;white-space:nowrap;z-index:1;
  animation-delay:1.55s,0s;
}

.hero-sub{
  margin-top:24px;font-size:18px;line-height:1.9;max-width:34em;
  animation:fd-up15 .5s cubic-bezier(.16,1,.3,1) 2.20s both,fd-tone-body 3.0s linear 0s both;
}
.hero-sub + .hero-sub{margin-top:10px;}

/* スクロール誘導(FVセクション最下部・中央固定) */
.hero-scroll{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  opacity:0;animation:fd-fade-only .4s ease 3.4s both;
}
.hero-scroll .label{font-size:11px;font-weight:700;letter-spacing:.14em;color:#7fa6ad;}
.hero-scroll .track{
  width:22px;height:34px;border:1.5px solid #a9cdd4;border-radius:12px;
  display:flex;justify-content:center;padding-top:6px;
}
.hero-scroll .dot{
  width:4px;height:8px;border-radius:2px;background:var(--primary);
  animation:fd-scroll-dot 1.6s ease-in-out 3.3s infinite;
}

/* 右カラム: リング/ネットワークビジュアル(ロゴマークは置かない) */
.hero-visual{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:520px;}
.hero-visual svg{overflow:visible;}
.ring-wrap{
  position:relative;width:480px;height:480px;opacity:0;
  /* 中のSVGは280px。枠(480px)の中で上に詰まっていたため、円の中心が左のコピーより
     100px上にずれていた。中央に置いて揃える（2026-10-09） */
  display:flex;align-items:center;justify-content:center;
  animation:fd-icon-arrive .6s cubic-bezier(.16,1,.3,1) 1.85s both;
}
.hero-ripple{transform-origin:140px 140px;animation:fd-ring-pulse 3.5s ease-in-out 1.85s infinite;}
.hero-ripple .echo{opacity:0;animation:fd-ripple-echo 3.5s ease-in-out 1.85s infinite;}
.hero-ripple .ring{stroke-dasharray:1;stroke-dashoffset:1;animation:fd-ring-draw 1s cubic-bezier(.16,1,.3,1) both;}
.hero-ripple .ring.r1{animation-delay:1.85s;}
.hero-ripple .ring.r2{animation-delay:1.95s;}
.hero-orbit{transform-origin:140px 140px;animation:fd-spin 9s linear 3.2s infinite;}
.hero-orbit.rev{animation:fd-spin 12s linear 3.2s infinite reverse;}
.hero-orbit circle{transform-box:fill-box;transform-origin:center;animation:fd-satellite-pulse 3.5s ease-in-out 1.85s infinite;}
.hero-particle{opacity:0;animation:fd-fade-only .4s ease forwards;}
.hero-particle.p1{animation-delay:2.45s;}
.hero-particle.p2{animation-delay:2.50s;}
.hero-particle.p3{animation-delay:2.55s;}
.hero-core{transform-box:fill-box;transform-origin:center;animation:fd-breathe 4s ease-in-out 3.1s infinite;}

@keyframes fd-curtain-out{
  0%,86%{opacity:1;visibility:visible;}
  100%{opacity:0;visibility:hidden;}
}
@keyframes fd-node-relay{
  0%{opacity:0;transform:scale(.3);}
  30%{opacity:1;transform:scale(1.35);}
  60%{opacity:.9;transform:scale(1);}
  100%{opacity:0;transform:scale(.7);}
}
@keyframes fd-line-relay{
  0%{opacity:0;}20%{opacity:1;}55%{opacity:.6;}100%{opacity:0;}
}
@keyframes fd-glow-in{from{opacity:0;}to{opacity:1;}}
@keyframes fd-beam{
  0%{opacity:0;transform:scaleX(0);}
  25%{opacity:1;}
  75%{opacity:.9;transform:scaleX(1);}
  100%{opacity:0;transform:scaleX(1);}
}
@keyframes fd-copyin{
  0%{opacity:0;transform:translateY(24px);filter:blur(6px);}
  60%{filter:blur(0);}
  100%{opacity:1;transform:translateY(0);filter:blur(0);}
}
@keyframes fd-tone-main{
  0%,86%{color:#fff;}
  100%{color:var(--text-main);}
}
@keyframes fd-tone-body{
  0%,86%{color:#fff;}
  100%{color:var(--text-body);}
}
@keyframes fd-up15{
  0%{opacity:0;transform:translateY(15px);}
  100%{opacity:1;transform:translateY(0);}
}

@keyframes fd-fade-only{from{opacity:0;}to{opacity:1;}}
@keyframes fd-scroll-dot{
  0%{opacity:0;transform:translateY(0);}
  30%{opacity:1;}
  100%{opacity:0;transform:translateY(14px);}
}
@keyframes fd-icon-arrive{
  0%{opacity:0;transform:scale(.6) rotate(15deg);}
  100%{opacity:1;transform:scale(1) rotate(0deg);}
}
@keyframes fd-ring-pulse{
  0%{transform:scale(1);opacity:1;}
  29%{transform:scale(2.2);opacity:.28;}
  100%{transform:scale(1);opacity:1;}
}
@keyframes fd-ripple-echo{
  0%{opacity:0;}25%{opacity:.32;}40%{opacity:0;}75%{opacity:.24;}90%,100%{opacity:0;}
}
@keyframes fd-ring-draw{to{stroke-dashoffset:0;}}
@keyframes fd-spin{to{transform:rotate(360deg);}}
@keyframes fd-satellite-pulse{
  0%{transform:scale(1);}29%{transform:scale(1.5);}100%{transform:scale(1);}
}
@keyframes fd-breathe{0%,100%{opacity:.4;}50%{opacity:.7;}}

/* ===============================================================
   フッター
   =============================================================== */
.site-footer{background:var(--footer-bg);padding:56px 0 34px;}
/* 左にロゴとタグライン、右にナビ。下に区切り線とコピーライト（レイアウト案 v27）。
   ナビはヘッダーと同じ4項目・同じ順序（design.md）。 */
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap;}
/* フッターは白抜きのロゴ（2026-09-20）。以前は文字組みだった */
.site-footer .brand{display:inline-block;}
.site-footer .brand img{display:block;height:24px;width:auto;}
.site-footer .tagline{font-size:14px;color:#9fbcc3;margin:10px 0 0;}
.fnav{display:flex;gap:26px;flex-wrap:wrap;}
.fnav a{font-size:13px;color:#c9dfe5;transition:color .2s ease;}
.fnav a:hover{color:#fff;}
.fnav a[aria-current="page"]{color:#fff;}
.site-footer .copy{
  margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12px;color:#6f939c;letter-spacing:.03em;
}

/* ===============================================================
   スクロールリビール
   =============================================================== */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);}
[data-reveal="left"]{transform:translateX(-26px);}
[data-reveal="right"]{transform:translateX(26px);}
[data-reveal="scale"]{transform:scale(.96);}
[data-reveal="from-top"]{
  transform:translateY(-42px);
}
[data-reveal].is-visible{opacity:1;transform:none;}
[data-reveal].d1{transition-delay:.06s;}
[data-reveal].d2{transition-delay:.14s;}
[data-reveal].d3{transition-delay:.22s;}

/* ===============================================================
   レスポンシブ
   =============================================================== */
@media (max-width:1024px){
  h1{font-size:40px;}
  h2{font-size:30px;}
  .hero-inner{grid-template-columns:1fr;gap:36px;}
  .hero-visual{height:360px;}
  .ring-wrap{width:320px;height:320px;}
  .fd-line.l2{white-space:normal;}

}
@media (max-width:768px){
  main section{padding:64px 0;}

  .hero{
    min-height:calc(100svh - var(--header-h));
    padding:80px 0 88px;
    display:flex;align-items:center;
  }
  .hero-inner{display:block;position:relative;}
  .hero-copy{position:relative;z-index:3;}

  .title-beam{top:46%;right:8%;}
  h1{font-size:33px;}
  /* FVのタイトルはコピーどおり2行（信頼できる人と、／価値ある仕事をつなぐ。）を保つ。
     2行目（11文字）が収まる大きさを画面幅から逆算し、33px と比べて小さいほう（390px で約30px）。
     「価値ある仕事をつな／ぐ。」のように1文字だけ落ちるのを防ぐ（responsive.md）。 */
  .hero h1{font-size:min(33px, calc((100vw - 48px) / 11.4));}
  h2{font-size:24px;}
    .gnav{
    position:fixed;top:var(--header-h);left:0;right:0;z-index:70;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--border);
    padding:8px 24px 16px;transform:translateY(calc(-100% - var(--header-h)));
    visibility:hidden;pointer-events:none;
    transition:transform .3s ease,visibility .3s ease;
  }
  .gnav.open{transform:translateY(0);visibility:visible;pointer-events:auto;}
  .gnav a{padding:14px 0;border-bottom:1px solid var(--border);}
  .gnav a::after{display:none;}
  .gnav a[aria-current="page"]{font-weight:700;}
  .nav-toggle{display:block;margin-left:auto;}

  .hero-visual{
    position:absolute;right:-72px;bottom:24px;z-index:1;
    width:260px;height:260px;opacity:.28;
    pointer-events:none;
  }
  .ring-wrap{width:260px;height:260px;}
  .hero-orbit circle,.hero-particle,.hero-core{opacity:.7;}
  .hero-glow.b,.hero-glow.c{width:200px;height:200px;}
}

/* ===============================================================
   prefers-reduced-motion:全演出を無効化
   =============================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-delay:0s!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .hero-curtain,.hero-relay,.hero-glow,.title-beam{display:none!important;}
  .fd-line,
  .hero-sub,
  .hero-scroll,
  .hero-visual,
  .ring-wrap,
  .site-header{opacity:1!important;}
  .fd-line{color:var(--text-main)!important;}
  .hero-sub{color:var(--text-body)!important;}
  [data-reveal]{opacity:1!important;transform:none!important;}
}

/* ===============================================================
   ページヘッダー(ABOUT / COMPANY / SERVICE 共通)
   TOPのFV(.hero)とは別物。起動演出・拡大リング・ビーム・呼吸は載せない。
   .hero-* のCSSは共用しないこと(FVの演出が巻き添えになる)。
   =============================================================== */
.page-hero{
  position:relative;overflow:hidden;
  padding:calc(var(--header-h) + 84px) 0 88px;
  background:linear-gradient(160deg,#eef8f6,#f6fbfd 60%,var(--base));
  /* ほぼ1画面。下をわずかに覗かせて「続きがある」と分かるようにする。
     100vh にしないのは、スクロールできることに気づかれにくいのと、
     TOPのFVと同じ扱いになってしまうため（ページヘッダーはFVより静か、が方針）。 */
  min-height:88vh;
  /* svh はアドレスバーの出入りで高さが変わらない単位。対応ブラウザではこちらが勝つ。 */
  min-height:88svh;
  display:flex;align-items:center;
}
/* flex item は既定で min-width:auto のため、<br> で区切られた長い行の幅まで
   広がってしまい、SPで右にはみ出す。min-width:0 で縮められるようにする。 */
.page-hero .page-hero-inner{width:100%;min-width:0;}

/* 緑×白の球体。承認された構成レイアウト案（v27）の .orb をそのまま移す。
   ぼかしは 2px だけ。輪郭を残して「球」に見せる。ぼかしすぎると別物になる（一度やった）。
   スクロールで main.js が親の opacity を下げる。 */
.page-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;will-change:opacity;overflow:hidden;}
.page-hero-bg span{position:absolute;display:block;border-radius:50%;filter:blur(2px);}
.page-hero-bg .g1{
  width:250px;height:250px;right:6%;top:6%;
  background:radial-gradient(circle at 34% 30%,#ffffff,#d9f0ee 45%,#bfe6e6);
}
.page-hero-bg .g2{
  width:150px;height:150px;right:30%;top:26%;opacity:.85;
  background:radial-gradient(circle at 34% 30%,#ffffff,#e4f5f2 50%,#cbebe8);
}
.page-hero-bg .g3{
  width:96px;height:96px;right:47%;top:12%;opacity:.8;
  background:radial-gradient(circle at 34% 30%,#ffffff,#eaf8f6 50%,#d8f0ee);
}

/* ゆっくり漂わせる。周期を 12/15/18 と互いに割り切れない数にして、
   3つが同時に同じ動きをしないようにする（揃えるとアニメーションだと気づかれる）。
   往復ではなく3点を巡回させる（往復は同じ道を戻るので単調）。
   濃くなる瞬間も3つでずらす。球体は右上に寄っているので、振れ幅は控えめにする。 */
@keyframes fd-drift-a{
  0%  {transform:translate3d(0,0,0) scale(1);       opacity:.92;}
  33% {transform:translate3d(-34px,18px,0) scale(1.06);opacity:1;}
  66% {transform:translate3d(-14px,36px,0) scale(.97); opacity:.72;}
  100%{transform:translate3d(0,0,0) scale(1);       opacity:.92;}
}
@keyframes fd-drift-b{
  0%  {transform:translate3d(0,0,0) scale(1);       opacity:.70;}
  33% {transform:translate3d(26px,-20px,0) scale(.92); opacity:.95;}
  66% {transform:translate3d(-12px,-30px,0) scale(1.06);opacity:.80;}
  100%{transform:translate3d(0,0,0) scale(1);       opacity:.70;}
}
@keyframes fd-drift-c{
  0%  {transform:translate3d(0,0,0) scale(1);       opacity:1;}
  33% {transform:translate3d(-24px,-26px,0) scale(1.08);opacity:.74;}
  66% {transform:translate3d(-40px,6px,0) scale(.95);  opacity:.90;}
  100%{transform:translate3d(0,0,0) scale(1);       opacity:1;}
}
.page-hero-bg .g1{animation:fd-drift-a 15s ease-in-out infinite;}
.page-hero-bg .g2{animation:fd-drift-b 12s ease-in-out infinite;}
.page-hero-bg .g3{animation:fd-drift-c 18s ease-in-out infinite;}
.page-hero-bg span{will-change:transform;}

.page-hero-inner{position:relative;z-index:1;}
.page-hero h1{
  color:var(--text-main);font-weight:900;font-size:44px;line-height:1.4;letter-spacing:.01em;
}
.page-hero .lead{
  margin-top:20px;max-width:760px;font-size:16px;color:var(--text-sub);
}

/* コピーの登場は既存の [data-reveal] の仕組みに乗せるが、
   ページヘッダーだけは速度を落とす(TOPのFVや各セクションには影響させない)。
   グローバルは .6s / d1=.06s。ここは倍以上かけて、順に立ち上げる。 */
.page-hero [data-reveal]{
  transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.16,1,.3,1);
}
.page-hero .eyebrow-label[data-reveal]{transition-delay:.05s;}
.page-hero h1[data-reveal]{transition-delay:.30s;}
.page-hero .lead[data-reveal]{transition-delay:.62s;}

@media (max-width:768px){
  .page-hero{padding:calc(var(--header-h) + 52px) 0 56px;min-height:88vh;min-height:88svh;}
  .page-hero h1{font-size:30px;}
  .page-hero .lead{margin-top:16px;font-size:15px;}
  /* PC幅を前提にした改行はSPでは切れ方が悪くなるので、自然な折り返しに任せる */
  .page-hero .lead br{display:none;}
  .page-hero-bg .g1{width:150px;height:150px;right:-4%;top:8%;}
  .page-hero-bg .g2{width:92px;height:92px;right:24%;top:28%;}
  .page-hero-bg .g3{width:60px;height:60px;right:44%;top:14%;}
}

@media (prefers-reduced-motion:reduce){
  .page-hero-bg .g1,
  .page-hero-bg .g2,
  .page-hero-bg .g3{animation:none;opacity:1;}
}

/* ===============================================================
   ABOUTページ
   本文は 18px / 行間 1.9(承認されたレイアウト案に合わせる)。
   TOPは現状15px前後で不揃いだが、#18 で揃える。
   =============================================================== */
.about-body{font-size:18px;line-height:1.9;}

/* --- VISION / MISSION の仕切りラベル ---
   「私たちが目指すこと」の全画面パネルは #41 で削除。ラベルだけ残す。 */
.vm-divider{padding:140px 0 52px;background:var(--base);}
.vm-divider .mark{
  margin:0;display:flex;align-items:center;gap:16px;
  font-size:13px;font-weight:900;letter-spacing:.32em;color:var(--link-dark);
}
.vm-divider .mark::after{
  content:"";flex:1;height:1px;background:currentColor;opacity:.25;max-width:280px;
}

/* --- VISION: 淡いグラデ地・大きな文字で「未来を描く」側 --- */
.vision-sec{
  position:relative;overflow:hidden;padding:92px 0 96px;
  background:linear-gradient(135deg,#eaf7f5 0%,#f2fafb 48%,#f7fcfd 100%);
}
.vm-mark{
  display:flex;align-items:center;gap:14px;margin:0 0 24px;
  font-size:13px;font-weight:900;letter-spacing:.3em;color:var(--link-dark);
}
.vm-mark::after{
  content:"";flex:1;height:1px;background:currentColor;opacity:.28;max-width:220px;
}
.vision-h{
  margin:0 0 34px;font-size:clamp(28px,5vw,46px);font-weight:900;
  line-height:1.45;letter-spacing:.01em;text-wrap:balance;color:var(--text-main);
}
.vision-lead{margin:0 0 40px;color:var(--text-body);}
.chant{margin:0 0 40px;}
.chant span{
  display:block;font-size:clamp(19px,3vw,26px);font-weight:700;color:var(--text-main);
  line-height:1.75;letter-spacing:.01em;
}
.chant span + span{margin-top:6px;}
.vision-close{margin:0;color:var(--text-body);}

/* 本文は見出しの右端より右へ出さない。長すぎる行は読む負担になるため。
   幅は px で決め打ちせず、見出しの幅に合わせて自動で決める：
   - 包み（.vision-inner）を fit-content にして、中身のいちばん広いものに合わせる
   - 本文側は contain:inline-size で「幅の計算に参加しない」ようにする
   → 結果として見出しの幅が包みの幅になり、本文はその中で折り返す。
   文言や画面幅が変わっても追従する。 */
.vision-inner{width:fit-content;max-width:100%;}
.vision-inner .vision-lead,
.vision-inner .chant,
.vision-inner .vision-close{contain:inline-size;}

/* --- MISSION: 白地・循環の図で「いま何をするか」側 --- */
.mission-sec{padding:96px 0;background:var(--base);}
.mission-h{
  margin:0 0 34px;font-size:clamp(24px,4.2vw,38px);font-weight:900;
  line-height:1.5;letter-spacing:.01em;text-wrap:balance;color:var(--text-main);
}
/* 本文は図に対して上下中央。図は内側の余白を詰めてあるので、
   中央揃えでも見出しとのあいだが空きすぎない。 */
.mission-cols{display:grid;grid-template-columns:1fr 520px;gap:0 40px;align-items:center;}
/* 本文は、図を右へずらした分だけ広げる（中央の空きを使う）。
   図も同じ量だけ動いているので、本文と図の間隔は gap の 40px のまま変わらない。
   「〜す。」「〜なぐ。」のような語尾だけの行を作らないため。 */
.mission-body{
  width:calc(100% + max(0px, calc((100vw - var(--container)) / 2)));
  max-width:none;
}
/* 図だけ container の外（画面右端側）へ寄せる。左端の揃いは崩さない。
   transform なのでレイアウト（高さ・他要素の位置）には影響しない。
   はみ出した分は main section の overflow:hidden で切れるので、横スクロールは出ない。
   container（1120px）より画面が狭いときは 0 になり、ずれない。 */
.mission-cols .cycle{transform:translateX(max(0px, calc((100vw - var(--container)) / 2)));}
.mission-body p{margin:0 0 18px;color:var(--text-body);}
.mission-body p:last-child{margin-bottom:0;}

/* 信頼の循環(フライホイール)。矢印の頭は無く、円弧を流れる光だけで向きを示す。
   光を止めるなら向きを示す代替を必ず入れること(motion.md 参照)。 */
.cycle{margin:0;}
.cycle svg{display:block;width:100%;height:auto;font-family:inherit;overflow:visible;}
.cycle .nw{font-weight:700;fill:#fff;letter-spacing:.04em;}
.cycle .cc{font-size:24px;font-weight:900;letter-spacing:.2em;fill:var(--link-dark);}
.cycle .cs{font-size:12.5px;font-weight:700;letter-spacing:.26em;fill:var(--text-faint);}
.cycle .flow{animation:fd-cycle-flow 5.5s linear infinite;}
.cycle .flow.d2{animation-delay:-1.83s;}
.cycle .flow.d3{animation-delay:-3.66s;}
@keyframes fd-cycle-flow{to{stroke-dashoffset:var(--len);}}
.cycle .spin{animation:fd-cycle-spin 72s linear infinite;transform-origin:460px 360px;}
@keyframes fd-cycle-spin{to{transform:rotate(360deg);}}

@media (max-width:980px){
  .mission-cols{grid-template-columns:1fr;gap:48px 0;}
  .mission-cols .cycle{transform:none;}   /* 1段組みでは中央寄せに戻す */
  .mission-body{width:auto;max-width:780px;}
  .cycle{max-width:560px;margin-left:auto;margin-right:auto;}
}
@media (max-width:760px){
  .about-body{font-size:16px;}
  /* MISSION の1行目「人と仕事の価値を正しくつなぎ、」（15文字）を1行に収める。
     24px では入らないため、入る大きさまでだけ下げる（390px で約22px）。
     2行目は「信頼が次の仕事を生む循環を／つくる。」で改行し、SPでは3行になる。
     2行に収める案（約19.5px）は、他の見出しより小さくなりすぎるため不採用（2026-09-19）。 */
  .mission-h{font-size:min(24px, calc((100vw - 48px) / 15.5));}
  .vm-divider{padding:72px 0 40px;}
  .vision-sec{padding:64px 0 72px;}
  .mission-sec{padding:64px 0;}
}
@media (prefers-reduced-motion:reduce){
  .cycle .flow,.cycle .spin{animation:none;}
}

/* --- ABOUT: セクション共通（VISION/MISSION 以降で使う） --- */
.about-body .sec{padding:96px 0;}
.about-body .sec.band{background:var(--bg-soft);}
.about-body .eyebrow{
  margin:0 0 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--label);
}
.about-body .eyebrow .ja{letter-spacing:.14em;font-size:11.5px;}
.about-body .eyebrow .rule{width:26px;height:1px;background:currentColor;opacity:.5;flex:none;}
.about-body .sec h2{
  margin:0 0 56px;font-size:clamp(26px,4.3vw,38px);font-weight:900;
  letter-spacing:.01em;line-height:1.45;text-wrap:balance;color:var(--text-main);
}

/* --- STRENGTHS ---
   左に「番号＋名前」、右に本文の2段組み。左は貼り付けたまま右の本文だけ流す。
   番号だけを大きくする形（旧案）には戻さない。固定して残すものが「01」だけでは意味がないため。 */
/* ⚠ 親に overflow:hidden があると position:sticky は働かない。
   サイト共通の `main section{overflow:hidden}` を、このセクションだけ打ち消す。
   打ち消しても、このセクションには画面外へはみ出す装飾が無いので副作用は無い。 */
.st-sec{overflow:visible;}

.st-item{
  display:grid;grid-template-columns:280px 1fr;gap:0 52px;
  padding:52px 0;border-top:1px solid var(--border);
}
.st-item:first-of-type{border-top:none;padding-top:0;}
/* top はヘッダー(72px)＋余白20px。ヘッダーの高さを変えたらここも合わせる。
   align-self:start が無いと grid item が引き伸ばされて sticky が効かない。 */
.st-l{position:sticky;top:calc(var(--header-h) + 20px);align-self:start;}
.st-num{
  margin:0;font-size:13px;font-weight:900;letter-spacing:.22em;
  color:var(--label);font-variant-numeric:tabular-nums;
}
.st-name{margin:8px 0 0;font-size:21px;font-weight:900;letter-spacing:.02em;line-height:1.5;color:var(--text-main);}
.st-h{margin:0 0 22px;font-size:clamp(19px,2.9vw,25px);font-weight:900;line-height:1.55;color:var(--text-main);}
.st-body{max-width:640px;}
.st-body p{margin:0 0 16px;color:var(--text-body);}
.st-body p:last-child{margin-bottom:0;}
.st-body b{font-weight:700;color:var(--text-main);}
/* 見出しだけ中央寄せ。本文は左のまま。 */
.st-sec .eyebrow{justify-content:center;}
/* 見出しは .st-head でラップしている。直接の子セレクタだと外れる。 */
.st-sec .st-head h2{text-align:center;}

/* --- MESSAGE（役員一同より） --- */
.msg-sec .eyebrow{justify-content:center;}
.msg-h{
  margin:0 0 42px;font-size:clamp(23px,3.9vw,34px);font-weight:900;
  line-height:1.55;text-wrap:balance;text-align:center;color:var(--text-main);
}
.msg-body{max-width:760px;margin-inline:auto;}
.msg-body p{margin:0 0 22px;color:var(--text-body);}
.msg-body p.tight{margin-bottom:8px;}
.msg-body b{font-weight:700;color:var(--text-main);}
.sign{
  text-align:center;margin-top:46px;padding-top:26px;border-top:1px solid var(--border);
  font-weight:700;letter-spacing:.06em;color:var(--text-main);
}

@media (max-width:860px){
  .st-item{grid-template-columns:1fr;gap:16px;padding:44px 0;}
  .st-l{position:static;}        /* SPは1段組み。固定すると画面の上半分が見出しで埋まる */
  .st-name{font-size:19px;}
}
@media (max-width:760px){
  .about-body .sec{padding:64px 0;}
  .about-body .sec h2{margin-bottom:36px;}
}

/* --- MANAGEMENT（経営陣） ---
   カードではなく、写真＋文章。「経歴」という見出しは付けない（Pastel #52 / #54）。
   2人目は写真を右に置いて、上下で向きを変える。 */
.pf{
  display:grid;grid-template-columns:300px 1fr;gap:0 56px;
  padding:56px 0;border-top:1px solid var(--border);
}
.pf:first-of-type{border-top:none;padding-top:0;}
.pf.rev{grid-template-columns:1fr 300px;}
.pf.rev .pf-photo{order:2;}
.pf.rev .pf-text{order:1;}
.pf-photo{
  width:100%;aspect-ratio:1/1.1;overflow:hidden;border-radius:4px;background:var(--border);
}
/* object-position を上寄りにして、顔が中心に来るようにする */
.pf-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;}
.pf-latin{font-size:11.5px;font-weight:700;letter-spacing:.18em;color:var(--text-faint);margin:0 0 10px;}
.pf-name{margin:0 0 10px;font-size:clamp(26px,4vw,34px);font-weight:900;letter-spacing:.06em;color:var(--text-main);}
.pf-role{margin:0 0 22px;font-size:13px;font-weight:700;color:var(--label);letter-spacing:.06em;}
.pf-text p{margin:0 0 16px;color:var(--text-body);}
.pf-text p:last-child{margin-bottom:0;}

@media (max-width:760px){
  .pf,.pf.rev{grid-template-columns:1fr;gap:26px;}
  .pf.rev .pf-photo{order:0;}
  .pf.rev .pf-text{order:1;}
  .pf-photo{max-width:280px;}
}

/* ===============================================================
   COMPANYページ
   =============================================================== */
/* --- PROFILE: 基本情報の表 --- */
.tbl{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:22px 28px;border-bottom:1px solid var(--border);}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:none;}
.tbl th{width:240px;font-weight:700;background:var(--bg-soft);color:var(--text-main);}
.tbl td{color:var(--text-body);}

/* --- ACHIEVEMENTS: 実績 ---
   沿革は廃止し実績に置き換えた（Pastel #16）。数字は「約100名」のみ。
   案件数など他の数字や、取引先の社名は出さない。 */
.ach-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.ach-head h2{margin:0;}
.asof{font-size:14px;color:var(--text-sub);}
.ach{
  display:grid;grid-template-columns:1fr 1fr;margin-top:48px;
  border:1px solid var(--border);border-radius:6px;overflow:hidden;
}
.ach > div{padding:54px 40px;text-align:center;}
.ach > div + div{border-left:1px solid var(--border);}
.ach .lab{margin:0 0 22px;font-size:12px;font-weight:900;letter-spacing:.18em;color:var(--label);}
.ach .num{margin:0;font-size:clamp(38px,6vw,64px);font-weight:900;line-height:1.1;letter-spacing:.01em;color:var(--text-main);}
/* カウントアップ中に桁数が変わっても幅が揺れないようにする */
.ach .cnum{font-variant-numeric:tabular-nums;}
.ach .num small{font-size:.42em;font-weight:700;margin:0 .18em;}
.ach .sub{margin:14px 0 0;font-size:15px;color:var(--text-sub);}
.ach .stmt{margin:0;font-size:clamp(20px,3vw,27px);font-weight:900;line-height:1.55;color:var(--text-main);}

/* --- CONTACT: お問い合わせ ---
   Google Map は削除（Pastel #38）。「アクセス」の見出しごと廃止し、地図・住所の再掲はしない。 */
.ct-top{margin-bottom:44px;}
.ct-top h2{margin:0;}
.ct-bot{
  display:grid;grid-template-columns:1fr auto;gap:0 56px;align-items:end;
  border-top:1px solid var(--border);padding-top:40px;
}
.ct-bot p{margin:0;color:var(--text-body);max-width:640px;}
.ct-bot p + p{margin-top:20px;}
/* 導線は枠線のみ。塗りにするとブランド色のラベルと同じ役割に見えてしまう（レビューで不採用）。
   「メールでお問い合わせ」と宛先を縦に並べ、枠全体を押せる範囲にする。 */
.box{
  display:block;text-decoration:none;color:inherit;min-width:360px;position:relative;
  border:1px solid var(--border);border-radius:4px;padding:28px 34px;
  transition:background .22s ease,border-color .22s ease,
             transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease;
}
.box .lab{display:block;margin:0 0 14px;font-size:14px;font-weight:700;color:var(--text-main);letter-spacing:.04em;}
.box .to{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:700;color:var(--deep);}
/* 直接の子に限定する。子孫セレクタだと、矢印の丸（.arw の中のSVG）まで
   23×18px にされて左上に寄ってしまう。一度これで壊した。 */
.box .to > svg{
  width:23px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;
  transition:transform .22s cubic-bezier(.16,1,.3,1);
}
/* アドレスの下線は、左から引かれるように出す（最初から引いておかない） */
.box .addr{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .28s cubic-bezier(.16,1,.3,1);
}
/* 矢印は「→」。「↗」は外部サイトへ移動する意味になり、mailto: と合わない。
   ホバーすると、丸い囲いが「描かれて」から浮き上がる。
   いきなり丸が出ると唐突なので、円周を一周する線として描いてから持ち上げる。 */
.box .arw{
  position:relative;margin-left:auto;flex:none;
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:18px;line-height:1;
  border-radius:50%;background:transparent;box-shadow:none;
  /* 線を描き終えてから浮かせるため、浮きと影と塗りは遅らせて始める */
  transition:transform .30s cubic-bezier(.16,1,.3,1) .20s,
             background .30s ease .20s,
             box-shadow .30s ease .20s;
}
/* 円周 2πr = 2 × π × 18 ≒ 113.1。これを dasharray と offset の基準にする */
.box .arw-ring{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  transform:rotate(-90deg);          /* 真上から描き始める */
  pointer-events:none;
}
.box .arw-ring circle{
  fill:none;stroke:var(--deep);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:113.1;stroke-dashoffset:113.1;
  transition:stroke-dashoffset .46s cubic-bezier(.22,.7,.3,1);
}

.box:hover,
.box:focus-visible{
  border-color:var(--deep);background:#e9f4f8;
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(6,89,110,.18);
}
/* ⚠ hover の指定は @media (hover:hover) で囲む。
   タッチ端末では :hover がタップ後も残り、丸が描かれたまま浮きっぱなしになる。
   :focus-visible は外に置く（キーボード操作では効かせたいため）。 */
@media (hover:hover) and (pointer:fine){
  .box:hover{
    border-color:var(--deep);background:#e9f4f8;
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(6,89,110,.18);
  }
  .box:hover .arw-ring circle{stroke-dashoffset:0;}
  .box:hover .arw{
    transform:translate(6px,-2px);
    background:var(--base);
    box-shadow:0 6px 14px rgba(6,89,110,.20);
  }
  .box:hover .to > svg{transform:translateY(-2px);}
  .box:hover .addr{background-size:100% 1px;}
}
.box:focus-visible .arw-ring circle{stroke-dashoffset:0;}
.box:focus-visible .arw{
  transform:translate(6px,-2px);
  background:var(--base);
  box-shadow:0 6px 14px rgba(6,89,110,.20);
}
.box:focus-visible .to > svg{transform:translateY(-2px);}
.box:focus-visible .addr{background-size:100% 1px;}
/* クリックした瞬間。mailto: はメールソフトが開くだけでページが変わらないので、
   押したことが分かる手応えを残す。押し込み → 影が縮む → 矢印が飛び出す。 */
.box:active{
  transform:translateY(0) scale(.985);
  background:#d9ebf3;
  box-shadow:0 3px 8px rgba(6,89,110,.16);
  transition-duration:.08s;      /* 押した瞬間は速く反応させる */
}
.box:active .arw{
  transform:translate(11px,0);
  box-shadow:0 2px 5px rgba(6,89,110,.22);
  transition-duration:.12s;transition-delay:0s;
}
.box:active .to > svg{transform:translateY(0);transition-duration:.08s;}
.box:focus-visible{outline:2px solid var(--deep);outline-offset:3px;}
/* 二重押下を止めている1.5秒間。押しても反応しないことを見た目で示す。
   pointer-events は切らない（フォーカスとキーボード操作を殺さないため）。 */
.box.is-sending{opacity:.6;cursor:default;}
.box.is-sending,
.box.is-sending:hover{transform:none;box-shadow:none;background:var(--base);border-color:var(--border);}
.box.is-sending .arw-ring circle{stroke-dashoffset:113.1;}
.box.is-sending .arw{transform:none;background:transparent;box-shadow:none;}

@media (prefers-reduced-motion:reduce){
  .box,.box .arw,.box .to > svg,.box .addr{transition:none;}
  .box:hover,.box:focus-visible{transform:none;box-shadow:none;}
  .box:active{transform:none;box-shadow:none;}
  .box:active .arw{transform:none;}
  .box:hover .arw,.box:focus-visible .arw,
  .box:hover .to > svg,.box:focus-visible .to > svg{transform:none;}
  .box:hover .arw,.box:focus-visible .arw{box-shadow:none;}
  .box:active .arw{transform:none;box-shadow:none;}
  .box .arw-ring circle{transition:none;}
  .box:hover .arw-ring circle,.box:focus-visible .arw-ring circle{stroke-dashoffset:0;}
}

@media (max-width:860px){
  .ct-bot{grid-template-columns:1fr;gap:32px;align-items:start;}
  .box{min-width:0;}
}
@media (max-width:720px){
  .tbl th,.tbl td{display:block;width:auto;padding:16px 20px;border-bottom:none;}
  .tbl th{background:var(--bg-soft);}
  .tbl td{border-bottom:1px solid var(--border);}
  .ach{grid-template-columns:1fr;}
  .ach > div + div{border-left:none;border-top:1px solid var(--border);}
  .ach > div{padding:40px 24px;}
}

/* ===============================================================
   SERVICEページ
   =============================================================== */
/* 左に見出しと本文、右に箇条書きの2段組み。
   grid-template-rows で行を分け、本文の1行目と箇条書きのラベルの1行目を揃える。 */
.sv{padding:76px 0 64px;border-top:1px solid var(--border);position:relative;}
.sv:first-of-type{border-top:none;padding-top:20px;}
.sv-in{
  display:grid;grid-template-columns:1fr 340px;grid-template-rows:auto auto;
  gap:0 64px;align-items:start;
}
.sv-head{grid-column:1;grid-row:1;}
.sv-body{grid-column:1;grid-row:2;}
.sv-list{grid-column:2;grid-row:2;padding-top:4px;}
.sv-no{
  margin:0 0 10px;font-size:12.5px;font-weight:900;letter-spacing:.2em;
  color:var(--label);font-variant-numeric:tabular-nums;
}
.sv h2{margin:0 0 26px;font-size:clamp(23px,3.4vw,30px);font-weight:900;line-height:1.5;color:var(--text-main);}
.sv-body p{margin:0 0 20px;color:var(--text-body);}
.sv-body p:last-child{margin-bottom:0;}
.sv-body b{font-weight:700;color:var(--text-main);}
.sv .chant{margin:0 0 20px;}
.sv .chant span{display:block;font-size:19px;font-weight:700;color:var(--text-main);line-height:1.85;}
.sv .chant span + span{margin-top:0;}
.lt{margin:0 0 14px;font-size:13px;font-weight:900;letter-spacing:.14em;color:var(--link-dark);}
/* 箇条書きは薄い面に載せて丸マーカー。項目が語でも文でも同じ見え方で収まる。
   「-」などの文字マーカーは使わない（Markdownに見える）。罫線だけの区切り、
   2列の格子、カード、チップはいずれもレビューで不採用。 */
.pnl{background:var(--bg-soft);border-radius:8px;padding:22px 24px;}
.pnl ul{list-style:none;margin:0;padding:0;}
.pnl li{
  display:flex;gap:12px;align-items:flex-start;font-size:15.5px;
  padding:7px 0;line-height:1.8;color:var(--text-body);
}
.dotm{flex:none;width:9px;height:9px;border-radius:50%;background:var(--label);margin-top:10px;}

@media (max-width:900px){
  .sv-in{grid-template-columns:1fr;gap:26px;}
  .sv-head,.sv-body,.sv-list{grid-column:1;}
  .sv-head{grid-row:1;}
  .sv-body{grid-row:2;}
  .sv-list{grid-row:3;padding-top:0;}
  .sv{padding:52px 0 48px;}
}

/* SERVICE の相談セクションだけ、本文とリンク枠の上端を揃える。
   COMPANY は本文が2段落あり、下端揃え（align-items:end）のままにする。 */
.sv-contact .ct-bot{align-items:start;}

/* --- SERVICE の登場：ラベル → 線が伸びる → 見出し → 本文 → 箇条書き ---
   ブロック全体（.sv-in）でひとつの合図にして、左が終わってから右を動かす。
   個別に [data-reveal] を付けると左右が同時に動いて視線が散る。
   グローバルの [data-reveal] は打ち消し、子要素のアニメーションだけで組む。 */
.sv-in[data-reveal]{opacity:1;transform:none;transition:none;}
.js-reveal .sv-in .sv-no,
.js-reveal .sv-in h3,
.js-reveal .sv-in .sv-body > *,
.js-reveal .sv-in .lt,
.js-reveal .sv-in .pnl li{opacity:0;}

/* ラベルの右へ伸びる線 */
.sv-no{position:relative;display:inline-block;padding-right:84px;}
.sv-no::after{
  content:"";position:absolute;right:0;top:50%;width:70px;height:1px;
  background:var(--label);opacity:.5;transform-origin:left;
}
.js-reveal .sv-no::after{transform:scaleX(0);}

.sv-in.is-visible .sv-no{animation:fd-sv-fade .36s ease both;}
.sv-in.is-visible .sv-no::after{animation:fd-sv-line .5s cubic-bezier(.16,1,.3,1) both .2s;}
.sv-in.is-visible h2{animation:fd-sv-blur .55s ease-out both .5s;}
.sv-in.is-visible .sv-body > *{animation:fd-sv-blur .55s ease-out both .68s;}
.sv-in.is-visible .sv-body > *:nth-child(2){animation-delay:.78s;}
.sv-in.is-visible .sv-body > *:nth-child(3){animation-delay:.88s;}
.sv-in.is-visible .sv-body > *:nth-child(4){animation-delay:.98s;}
.sv-in.is-visible .sv-body > *:nth-child(5){animation-delay:1.08s;}
.sv-in.is-visible .lt{animation:fd-sv-fade .4s ease both .62s;}
/* 箇条書きは位置を動かさず、ぼけから像を結ぶ（ページヘッダーと同じ語彙） */
.sv-in.is-visible .pnl li{animation:fd-sv-blur .62s ease-out both;}
.sv-in.is-visible .pnl li:nth-child(1){animation-delay:.86s;}
.sv-in.is-visible .pnl li:nth-child(2){animation-delay:.95s;}
.sv-in.is-visible .pnl li:nth-child(3){animation-delay:1.04s;}
.sv-in.is-visible .pnl li:nth-child(4){animation-delay:1.13s;}
.sv-in.is-visible .pnl li:nth-child(5){animation-delay:1.22s;}

@keyframes fd-sv-fade{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@keyframes fd-sv-line{from{transform:scaleX(0);}to{transform:scaleX(1);}}
/* ⚠ 終わったあと Safari でぼやけて残ることがあるため、main.js が再生後にアニメーションを外す */
@keyframes fd-sv-blur{from{opacity:0;filter:blur(7px);}to{opacity:1;filter:blur(0);}}

@media (prefers-reduced-motion:reduce){
  .sv-in .sv-no,.sv-in h3,.sv-in .sv-body > *,.sv-in .lt,.sv-in .pnl li{opacity:1;animation:none;}
  .sv-no::after{transform:scaleX(1);}
}

/* --- ABOUT の登場 ---
   SERVICE と同じ語彙に揃える：ラベル → 線が伸びる → 見出し → 本文。
   すべて「位置を動かさず、ぼけから像を結ぶ」。
   セクション（またはブロック）単位でひとつの合図にして、順番を保証する。
   個別に [data-reveal] を付けると同時に動いて順番が崩れる。 */
.vision-sec .container[data-reveal],
.mission-sec .container[data-reveal],
.msg-sec .container[data-reveal],
.st-head[data-reveal],
.st-item[data-reveal],
.mg-head[data-reveal],
.pf[data-reveal]{opacity:1;transform:none;transition:none;}

/* 合図が来るまでは隠す。
   ⚠ .js-reveal（JSが動いたときだけ付く印）の下でのみ効かせる。
   これが無いと、JSが落ちた環境で本文が永久に消えたままになる。 */
.js-reveal .vision-sec .vm-mark,.js-reveal .vision-sec .vision-h,.js-reveal .vision-sec .vision-lead,
.js-reveal .vision-sec .chant,.js-reveal .vision-sec .vision-close,
.js-reveal .mission-sec .vm-mark,.js-reveal .mission-sec .mission-h,
.js-reveal .mission-sec .mission-body,.js-reveal .mission-sec .cycle,
.js-reveal .msg-sec .eyebrow,.js-reveal .msg-sec .msg-h,.js-reveal .msg-sec .msg-body,
.js-reveal .st-head .eyebrow,.js-reveal .st-head h2,
.js-reveal .st-item .st-l,.js-reveal .st-item .st-h,.js-reveal .st-item .st-body p,
.js-reveal .mg-head .eyebrow,.js-reveal .mg-head h2,
.js-reveal .pf .pf-photo,.js-reveal .pf .pf-latin,.js-reveal .pf .pf-name,
.js-reveal .pf .pf-role,.js-reveal .pf .pf-text p{opacity:0;}

/* ラベルの線は SERVICE と同じく「伸びてから残る」。
   ⚠ .eyebrow .rule は COMPANY / SERVICE でも使っているので、
   初期状態を隠すのは ABOUT の animate する箇所だけに絞る。
   全体に当てると、動きを付けていないページで線が消えたままになる。 */
.js-reveal .vm-mark::after,
.js-reveal .st-head .eyebrow .rule,
.js-reveal .msg-sec .eyebrow .rule,
.js-reveal .mg-head .eyebrow .rule{transform:scaleX(0);transform-origin:left;}

/* --- VISION --- */
.vision-sec .is-visible .vm-mark{animation:fd-sv-fade .36s ease both;}
.vision-sec .is-visible .vm-mark::after{animation:fd-sv-line .5s cubic-bezier(.16,1,.3,1) both .2s;}
.vision-sec .is-visible .vision-h{animation:fd-sv-blur .62s ease-out both .5s;}
.vision-sec .is-visible .vision-lead{animation:fd-sv-blur .55s ease-out both .74s;}
.vision-sec .is-visible .chant{animation:fd-sv-blur .55s ease-out both .88s;}
.vision-sec .is-visible .vision-close{animation:fd-sv-blur .55s ease-out both 1.02s;}

/* --- MISSION --- */
.mission-sec .is-visible .vm-mark{animation:fd-sv-fade .36s ease both;}
.mission-sec .is-visible .vm-mark::after{animation:fd-sv-line .5s cubic-bezier(.16,1,.3,1) both .2s;}
.mission-sec .is-visible .mission-h{animation:fd-sv-blur .62s ease-out both .5s;}
.mission-sec .is-visible .mission-body{animation:fd-sv-blur .55s ease-out both .74s;}
/* 図は最後。少し長くかけて、本文を読み終えたころに結ぶ */
.mission-sec .is-visible .cycle{animation:fd-sv-blur .8s ease-out both .92s;}

/* --- STRENGTHS --- */
.st-head.is-visible .eyebrow{animation:fd-sv-fade .36s ease both;}
.st-head.is-visible .eyebrow .rule{animation:fd-sv-line .5s cubic-bezier(.16,1,.3,1) both .2s;}
.st-head.is-visible h2{animation:fd-sv-blur .62s ease-out both .46s;}
/* 各項目は、左の「番号＋名前」が出てから右の本文 */
.st-item.is-visible .st-l{animation:fd-sv-blur .5s ease-out both;}
.st-item.is-visible .st-h{animation:fd-sv-blur .55s ease-out both .18s;}
.st-item.is-visible .st-body p{animation:fd-sv-blur .5s ease-out both .34s;}
.st-item.is-visible .st-body p:nth-of-type(2){animation-delay:.44s;}
.st-item.is-visible .st-body p:nth-of-type(3){animation-delay:.54s;}

/* --- MESSAGE --- */
.msg-sec .is-visible .eyebrow{animation:fd-sv-fade .36s ease both;}
.msg-sec .is-visible .eyebrow .rule{animation:fd-sv-line .5s cubic-bezier(.16,1,.3,1) both .2s;}
.msg-sec .is-visible .msg-h{animation:fd-sv-blur .62s ease-out both .48s;}
.msg-sec .is-visible .msg-body{animation:fd-sv-blur .6s ease-out both .72s;}

/* --- MANAGEMENT --- */
.mg-head.is-visible .eyebrow{animation:fd-sv-fade .36s ease both;}
.mg-head.is-visible .eyebrow .rule{animation:fd-sv-line .5s cubic-bezier(.16,1,.3,1) both .2s;}
.mg-head.is-visible h2{animation:fd-sv-blur .62s ease-out both .46s;}
/* 写真が先に結んでから、名前・役職・本文の順 */
.pf.is-visible .pf-photo{animation:fd-sv-blur .7s ease-out both;}
.pf.is-visible .pf-latin{animation:fd-sv-fade .4s ease both .26s;}
.pf.is-visible .pf-name{animation:fd-sv-blur .55s ease-out both .36s;}
.pf.is-visible .pf-role{animation:fd-sv-fade .4s ease both .5s;}
.pf.is-visible .pf-text p{animation:fd-sv-blur .5s ease-out both .62s;}
.pf.is-visible .pf-text p:nth-of-type(2){animation-delay:.72s;}
.pf.is-visible .pf-text p:nth-of-type(3){animation-delay:.82s;}

@media (prefers-reduced-motion:reduce){
  .vision-sec .vm-mark,.vision-sec .vision-h,.vision-sec .vision-lead,
  .vision-sec .chant,.vision-sec .vision-close,
  .mission-sec .vm-mark,.mission-sec .mission-h,.mission-sec .mission-body,.mission-sec .cycle,
  .msg-sec .eyebrow,.msg-sec .msg-h,.msg-sec .msg-body,
  .st-head .eyebrow,.st-head h2,
  .st-item .st-l,.st-item .st-h,.st-item .st-body p,
  .mg-head .eyebrow,.mg-head h2,
  .pf .pf-photo,.pf .pf-latin,.pf .pf-name,.pf .pf-role,.pf .pf-text p{opacity:1;animation:none;}
  .vm-mark::after,.st-head .eyebrow .rule,.msg-sec .eyebrow .rule,
  .mg-head .eyebrow .rule{transform:scaleX(1);}
}

/* STRENGTHS の見出し。PCは横1行（商流の質 × 人の質 × 提案の質）のまま。
   SPだけ3語を縦に積み、あいだに小さな × を置く（2026-09-19）。
   読み上げでは「商流の質 × 人の質 × 提案の質」と続けて読まれる。 */
.st-title .x{margin:0 .3em;}
@media (max-width:760px){
  .st-title span{display:block;}
  .st-title .x{
    font-size:.55em;font-weight:700;line-height:1;color:var(--label);
    margin:.32em 0;
  }
  /* TOP：縦積みの見出しは塊ごと画面の中央に置く（ABOUTと同じ見え方）。
     ラベルと本文は左揃えのまま（2026-09-20） */
  .philo-sec .st-title{text-align:center;}
  /* BUSINESS：「ITプロフェッショナルの力を、」を1行に。文字サイズは変えず、
     約物・小書きカナの詰め（palt）と字間 -.01em で 368px → 324px にして 375px 幅（使える幅327px）に収める */
  .about-body .biz-sec h2{font-feature-settings:"palt";letter-spacing:-.01em;}
}


@media (max-width:760px){
  .site-brand img{height:22px;}
  .footer-top{flex-direction:column;}
  /* SPはナビを縦積みにする（2026-09-20）。横並びだと折り返して2行になり、区切りが分かりにくい */
  .fnav{flex-direction:column;gap:14px;}
}

/* ===============================================================
   TOP：PHILOSOPHY / BUSINESS（#18）
   本文は他ページと同じ 18px（main.about-body）。
   =============================================================== */
.philo-sec{background:var(--base);}
.philo-in{display:grid;grid-template-columns:1fr 300px;gap:0 64px;align-items:center;}
/* 共通の .about-body .sec h2（下に56px）より強く指定する。見出しと本文を近づける（v27） */
.about-body .philo-sec h2,.about-body .biz-sec h2{margin-bottom:24px;}
.philo-text p,.biz-in p{margin:0 0 18px;color:var(--text-body);max-width:760px;}
.philo-text b,.biz-in b{font-weight:700;color:var(--text-main);}

/* 3つの質が重なるベン図（レイアウト案 v27） */
.venn svg{display:block;width:100%;max-width:280px;height:auto;margin-left:auto;}
.venn text{font-size:14px;font-weight:700;fill:var(--text-main);letter-spacing:.02em;}

.biz-sec{background:linear-gradient(180deg,#edf8fb 0%,#ffffff 75%);}

/* 「私たちについて →」「事業内容を見る →」 */
.more{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  font-size:16px;font-weight:700;color:var(--link-dark);
}
/* 浮き上がりは translate プロパティで（登場アニメの transform:none に上書きされないため） */
.more{transition:translate .28s cubic-bezier(.22,1,.36,1);}
.more .more-arw{transition:transform .2s ease;}
.more .more-tx{position:relative;}
.more .more-tx::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine){
  .more:hover{translate:0 -3px;}
  .more:hover .more-tx::after{transform:scaleX(1);}
  .more:hover .more-arw{transform:translateX(4px);}
}
.more:focus-visible{outline:2px solid var(--deep);outline-offset:3px;}

@media (max-width:860px){
  .philo-in{grid-template-columns:1fr;gap:36px 0;}
  .venn svg{margin:0 auto;max-width:240px;}
}

/* 登場：ABOUT / SERVICE と同じ語彙（ラベル → 線 → 見出し → 本文、ぼけから結ぶ） */
.philo-in[data-reveal],.biz-in[data-reveal]{opacity:1;transform:none;transition:none;}
.js-reveal .philo-in .eyebrow,.js-reveal .philo-in h2,.js-reveal .philo-in .philo-text > p,
.js-reveal .philo-in .more,.js-reveal .philo-in .venn .vc,
.js-reveal .biz-in .eyebrow,.js-reveal .biz-in h2,.js-reveal .biz-in > p,
.js-reveal .biz-in .more{opacity:0;}
.js-reveal .philo-in .eyebrow .rule,.js-reveal .biz-in .eyebrow .rule{transform:scaleX(0);transform-origin:left;}

.philo-in.is-visible .eyebrow,.biz-in.is-visible .eyebrow{animation:fd-sv-fade .36s ease both;}
.philo-in.is-visible .eyebrow .rule,.biz-in.is-visible .eyebrow .rule{animation:fd-sv-line .5s cubic-bezier(.16,1,.3,1) both .2s;}
.philo-in.is-visible h2,.biz-in.is-visible h2{animation:fd-sv-blur .62s ease-out both .46s;}
.philo-in.is-visible .philo-text > p,.biz-in.is-visible > p{animation:fd-sv-blur .55s ease-out both .68s;}
.philo-in.is-visible .philo-text > p:nth-of-type(3){animation-delay:.8s;}
.philo-in.is-visible .more,.biz-in.is-visible .more{animation:fd-sv-fade .4s ease both .96s;}
/* 図は本文のあとに。3つの円が中心から少し離れた位置から、いまの重なりへ寄っていく */
.venn svg{overflow:visible;}
.venn .vc1{--dx:0px;--dy:-30px;}
.venn .vc2{--dx:-26px;--dy:15px;}
.venn .vc3{--dx:26px;--dy:15px;}
@keyframes fd-venn-in{
  from{opacity:0;transform:translate(var(--dx),var(--dy));}
  40%{opacity:1;}
  to{opacity:1;transform:none;}
}
.philo-in.is-visible .venn .vc{animation:fd-venn-in 1.4s cubic-bezier(.22,1,.36,1) both .72s;}

@media (prefers-reduced-motion:reduce){
  .philo-in .eyebrow,.philo-in h2,.philo-in .philo-text > p,.philo-in .more,.philo-in .venn .vc,
  .biz-in .eyebrow,.biz-in h2,.biz-in > p,.biz-in .more{opacity:1;animation:none;}
  .philo-in .eyebrow .rule,.biz-in .eyebrow .rule{transform:scaleX(1);}
}

/* 390px 未満では、見出しを本文幅に比例して縮め、390px と同じ位置で改行させる（2026-09-20）。
   (100vw - 48px) は左右24pxずつを除いた本文幅で、390px のとき 342px。390px 以上の見た目は変わらない。
   縮めないと、<wbr> で区切ったまとまりが入りきらず、「、」「。」が行頭に落ちる。
   TOPのFVタイトルと MISSION の見出しは、すでに同じ考え方の指定を持っているので対象外。 */
@media (max-width:389px){
  .about-body .sec h2{font-size:calc((100vw - 48px) * 26 / 342);}
  .about-body .vision-h{font-size:calc((100vw - 48px) * 28 / 342);}
  .about-body .st-h{font-size:calc((100vw - 48px) * 19 / 342);}
  .about-body .sv h2{font-size:calc((100vw - 48px) * 23 / 342);}
}

/* SPではメールアドレスを1行に収める（2026-09-20）。
   「info@freedia- / inc.co.jp」と途中で折り返していた。
   21pxのままだとアドレスだけで231px必要で、アイコン・矢印・間隔の85pxと合わせて枠に入らない。
   入る大きさを画面幅から逆算する（画面幅 - 173px を、アドレスの文字数ぶん 11 で割る）。
   SPでは枠の内側の余白も 34px → 20px に詰めて、文字を大きく保つ。 */
@media (max-width:560px){
  .box{padding:24px 20px;}
  .box .addr{white-space:nowrap;}
  .box .to{font-size:min(21px, calc((100vw - 173px) / 11));}
}

/* ===============================================================
   ページ遷移の演出（2026-09-20 / #25）
   白い幕 → 羽から遠い小さなドットから順に4つ点く → 羽が浮き上がる → ロゴごと上へ飛ぶ → 次のページへ。
   全体で0.9秒。ABOUT / COMPANY / SERVICE へ移るときだけ出す（TOPは起動演出があるので出さない）。
   ⚠ 羽とドットの位置・大きさは支給ロゴ（logo-mark.svg）の実測どおり。中央寄せや間隔の調整をしないこと。
   合図は main.js。JSが動かなければ幕は出ず、普通に遷移する。
   =============================================================== */
.pt{
  position:fixed;inset:0;z-index:200;background:var(--base);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
}
.pt.is-on{opacity:1;visibility:visible;pointer-events:auto;animation:fd-pt-in .16s ease both;}
.pt-mark{width:128px;height:auto;overflow:visible;}
.pt .pt-wing,.pt circle{opacity:0;}
.pt circle{fill:#2F71E8;transform-box:fill-box;transform-origin:50% 50%;}

/* 羽から遠い小さな点（d4）から、近い大きな点（d1）へ順に点く */
.pt.is-on .pt-d4{animation:fd-pt-dot .24s cubic-bezier(.22,1,.36,1) both .06s;}
.pt.is-on .pt-d3{animation:fd-pt-dot .24s cubic-bezier(.22,1,.36,1) both .15s;}
.pt.is-on .pt-d2{animation:fd-pt-dot .24s cubic-bezier(.22,1,.36,1) both .24s;}
.pt.is-on .pt-d1{animation:fd-pt-dot .24s cubic-bezier(.22,1,.36,1) both .33s;}
/* そのあとに羽が浮き上がる */
.pt.is-on .pt-wing{animation:fd-pt-wing .38s cubic-bezier(.22,1,.36,1) both .41s;}
/* 最後にロゴごと上へ抜ける */
.pt.is-on .pt-mark{animation:fd-pt-up .27s cubic-bezier(.5,0,.75,0) both .65s;}

@keyframes fd-pt-in{from{opacity:0;}to{opacity:1;}}
/* ⚠ 位置合わせの translate は内側の <path> の属性、アニメーションは外側の <g>/<svg> に当てる。
   同じ要素に両方書くと、再生中だけ CSS の transform が属性を打ち消して羽の位置が飛ぶ。 */
@keyframes fd-pt-wing{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes fd-pt-dot{from{opacity:0;transform:scale(.35);}to{opacity:1;transform:none;}}
@keyframes fd-pt-up{from{transform:translateY(0);opacity:1;}to{transform:translateY(-140px);opacity:0;}}

@media (prefers-reduced-motion:reduce){
  /* 動きを減らす設定では幕を出さない（main.js 側でも止めている） */
  .pt{display:none;}
}

/* 404ページ（2026-09-20 / #1）。ヘッダー・フッターは他ページと同じものを使う */
.nf{min-height:64vh;display:flex;align-items:center;background:var(--base);}
/* ⚠ padding の一括指定は .container の左右24pxを消す。縦だけ指定すること */
.nf-in{padding-block:96px;}
/* ⚠ inline-block にしないと、グラデーションが行の幅いっぱい（1120px）に広がり、
   数字には左端の色しか乗らない。文字幅に合わせるため width:fit-content にする */
.nf-code{display:inline-block;font-size:clamp(64px,11vw,132px);font-weight:900;letter-spacing:.04em;line-height:1;
  color:transparent;background-clip:text;-webkit-background-clip:text;margin:0 0 14px;
  /* 共通の --brand-gradient（135deg・2色）は大きな文字だと単色に見えるので、
     ここだけ横方向・3色にして振り幅を出す（2026-09-20） */
  background-image:linear-gradient(100deg,#0E9BBA 0%,#12B3D4 38%,#20C1A4 100%);}
.about-body .nf h1{font-size:clamp(26px,4.3vw,38px);font-weight:900;line-height:1.45;color:var(--text-main);margin:0 0 20px;}
.nf-lead{font-size:17px;color:var(--text-body);margin:0 0 26px;}