/* =========================================================================
   AZ Recruit — main stylesheet
   ネイビー×ホワイト＋温かみアクセント。整骨院グループの品位＋今どきのトレンド。
   ========================================================================= */

/* ---- Design tokens ---------------------------------------------------- */
:root{
  --navy-900:#10192e;
  --navy-800:#16223d;
  --navy-700:#1b2a4a;   /* primary */
  --navy-600:#24365c;
  --navy-500:#33487a;
  --ink:#1d2430;
  --muted:#5b6473;
  --line:#e5e9f0;
  --bg:#ffffff;
  --bg-soft:#f5f8fc;
  --bg-soft2:#eef3fa;
  --accent:#13a39a;     /* ティール（ネイビー×ティール） */
  --accent-strong:#0d716b;
  --accent-soft:#dcf9f7;
  --teal:#2f8f86;       /* 補助（信頼/医療） */
  --danger:#c0392b;
  --ok:#1f8a54;

  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 2px 10px rgba(16,25,46,.06);
  --shadow:0 10px 30px rgba(16,25,46,.10);
  --shadow-lg:0 24px 60px rgba(16,25,46,.16);

  --container:1120px;
  --gutter:clamp(16px,4vw,32px);
  --header-h:74px;

  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic Medium","YuGothic",Meiryo,system-ui,sans-serif;
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
}

/* ---- Reset / base ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.85;font-size:16px;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s,opacity .2s}
a:hover{color:var(--accent-strong)}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{line-height:1.4;margin:0;font-weight:700}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---- Layout helpers --------------------------------------------------- */
.container{width:min(100% - var(--gutter)*2,var(--container));margin-inline:auto}
.section{padding:clamp(56px,8vw,108px) 0}
.section--soft{background:var(--bg-soft)}
.section--navy{background:var(--navy-700);color:#fff}
.section__head{text-align:center;margin-bottom:clamp(34px,5vw,56px)}
.eyebrow{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.22em;
  color:var(--accent-strong);margin-bottom:14px;
}
.section--navy .eyebrow{color:var(--accent)}
.section__title{
  font-size:clamp(1.5rem,4.4vw,2.3rem);letter-spacing:.04em;
}
.section__title small{display:block;font-size:.55em;color:var(--muted);font-weight:600;letter-spacing:.18em;margin-top:10px}
.section--navy .section__title small{color:#aeb9cf}
.lead{max-width:760px;margin:18px auto 0;color:var(--muted)}
.section--navy .lead{color:#cdd6e6}

/* ---- Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.95em 2em;border-radius:999px;font-weight:700;letter-spacing:.04em;
  border:2px solid transparent;cursor:pointer;font-size:1rem;line-height:1;
  transition:transform .15s,box-shadow .2s,background .2s,color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(19,163,154,.35)}
.btn--primary:hover{background:var(--accent-strong);color:#fff}
.btn--ghost{background:transparent;border-color:#fff;color:#fff}
.btn--ghost:hover{background:#fff;color:var(--navy-700)}
.btn--navy{background:var(--navy-700);color:#fff}
.btn--navy:hover{background:var(--navy-800);color:#fff}
.btn--lg{padding:1.15em 2.6em;font-size:1.05rem}
.btn--block{width:100%}

/* ---- Header ----------------------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
/* ヘッダーは「絶対に折り返さない」ことを構造で保証する。
   ・全要素 nowrap ＋ flex-wrap:nowrap（文字が途中で折れる崩れを根絶）
   ・余ったときに縮むのはブランド名だけ（min-width:0 ＋ ellipsis）＝ナビは押し出されない
   ・それでも足りない幅では 1100px でハンバーガーへ切り替える（下部の media 参照） */
.site-header__inner{height:100%;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.04em;min-width:0;flex:0 1 auto}
.brand__mark{
  flex:0 0 auto;
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--navy-700);color:#fff;font-weight:800;font-size:1.1rem;letter-spacing:0;
}
.brand__name{
  font-size:1.06rem;color:var(--navy-700);
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand__name span{
  display:block;font-size:.66rem;color:var(--muted);font-weight:600;letter-spacing:.18em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gnav{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(12px,1.5vw,22px);flex:0 0 auto}
.gnav__list{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(10px,1.3vw,20px)}
/* 進路リンク(.gnav__path)は専用スタイルで完結させる。`.gnav__list a`（クラス+要素＝詳細度が上）
   が勝ってしまい、フォント・余白・下線が意図せず上書きされるため :not() で明示的に除外する。 */
.gnav__list a:not(.gnav__path){font-weight:600;font-size:.92rem;color:var(--navy-700);white-space:nowrap}
.gnav__list a:not(.gnav__path):hover{color:var(--accent-strong)}
.gnav__cta{padding:.7em 1.4em;font-size:.9rem;white-space:nowrap;flex:0 0 auto}
.nav-toggle{display:none;background:none;border:0;width:46px;height:46px;cursor:pointer;color:var(--navy-700)}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:26px;height:2px;background:currentColor;position:relative;transition:.25s;
}
.nav-toggle span::before{position:absolute;top:-8px}
.nav-toggle span::after{position:absolute;top:8px}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
body.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}

/* --- 2つの進路（独立／アズで極める）＝ひとつのセグメントとして見せる ---
   6項目が等価に並ぶと「どれが進路の選択肢か」が伝わらないため、
   ①塊にまとめる ②区切り線で実務リンクと分ける ③トップの分岐カード A/B と同じ色の
   ドットを付ける、の3点で一目で分かるようにする。 */
.gnav__paths{
  display:flex;flex-wrap:nowrap;align-items:center;gap:3px;padding:3px;
  background:var(--bg-soft2);border:1px solid var(--line);border-radius:999px;
}
/* ラベルはハンバーガー内（縦積みで幅に余裕がある）でのみ表示。
   横並びのヘッダーに出すと約90px を食って折返しの原因になるため。 */
.gnav__paths-label{
  display:none;padding:0 6px 0 10px;font-size:.66rem;font-weight:700;
  letter-spacing:.16em;color:var(--muted);white-space:nowrap;
}
.gnav__path{
  display:inline-flex;align-items:center;gap:6px;padding:.45em .8em;border-radius:999px;
  font-weight:700;font-size:.88rem;color:var(--navy-700);white-space:nowrap;
  transition:background .2s ease,box-shadow .2s ease,color .2s ease;
}
.gnav__dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%}
/* トップの分岐カード A（アクセント）／B（ネイビー）と同色＝ナビと本文を色で結ぶ */
.gnav__path--a .gnav__dot{background:var(--accent)}
.gnav__path--b .gnav__dot{background:var(--navy-500)}
.gnav__path:hover{background:#fff;box-shadow:var(--shadow-sm);color:var(--navy-700)}
.gnav__path.is-current{background:#fff;box-shadow:var(--shadow-sm)}
.gnav__path--a.is-current{color:var(--accent-strong)}
/* 進路の塊と、以降の実務リンクを分ける区切り */
.gnav__sep{width:1px;height:20px;background:var(--line)}
/* 現在地（実務リンク側） */
.gnav__list a[aria-current="page"]:not(.gnav__path){color:var(--accent-strong)}
.gnav__list a[aria-current="page"]:not(.gnav__path)::after{transform:scaleX(1)}

/* ---- Hero（全面＝柴又院の実写スライダー）-------------------------------
   写真の上に文字を重ねるため、可読性はスクリム（.hero__scrim）で担保する。
   重なり順：写真(0) → スクリム＋ティールの光(1) → コピー/操作UI(2)。 */
.hero{
  position:relative;color:#fff;overflow:hidden;isolation:isolate;
  display:grid;align-items:center;
  min-height:clamp(560px,80vh,780px);
  min-height:clamp(560px,80svh,780px);   /* モバイルのURLバー分を除いた実高さ */
  padding-top:calc(var(--header-h) + clamp(32px,6vw,64px));
  padding-bottom:clamp(40px,7vw,80px);
  /* コピー側は写真が無いぶん地の色がそのまま出る。暗く沈めず、ネイビーの階調で見せる */
  background:linear-gradient(122deg,var(--navy-800) 0%,#223458 52%,#2c4070 100%);
}
/* ティールの光をコピー側に置いて、平坦な暗がりに奥行きと色味を足す */
.hero::after{
  content:"";position:absolute;left:-16%;top:-18%;width:64%;height:136%;z-index:1;
  background:radial-gradient(closest-side,rgba(19,163,154,.20),transparent 72%);pointer-events:none;
}
/* --- スライド本体（クロスフェード） ---
   左端はコピーを載せるため必ず暗くなる＝そこに写真を置いても見えない。
   そこで写真は画面の右側に寄せて配置し、左端はマスクでネイビーへ溶かす。
   （全面に敷いて濃いスクリムで潰すより、実際に見える写真の面積が増える） */
.hero__slides{
  position:absolute;inset:0 0 0 auto;width:62%;z-index:0;
  /* 写真をネイビーへ溶かす帯を長めに取る。短いと境目に暗い帯が立ち、影のように見える */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.22) 14%,rgba(0,0,0,.66) 32%,#000 50%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.22) 14%,rgba(0,0,0,.66) 32%,#000 50%);
}
.hero__slide{
  position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1);
}
.hero__slide.is-active{opacity:1}
.hero__slide img{
  width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  transform-origin:50% 50%;
  /* ズームは全スライドに載せたまま「再生／一時停止」で切り替える。
     is-active を外した瞬間にアニメを消すと、フェードアウト中の1枚が
     等倍へ瞬間復帰して“グッ”と戻って見えるため（表示時間より長い尺にして
     切替時も動きの途中で凍結させる）。 */
  animation:azr-hero-zoom 11s ease-out both;
  animation-play-state:paused;
}
.hero__slide.is-active img{animation-play-state:running}
/* ポインタを載せている間／キーボード操作中は送りもズームも止める（停止ボタンの代わり） */
@media(hover:hover){
  .hero:hover .hero__slide.is-active img,
  .hero:hover .hero__dot[aria-current="true"] span::after{animation-play-state:paused}
}
.hero:focus-within .hero__slide.is-active img,
.hero:focus-within .hero__dot[aria-current="true"] span::after{animation-play-state:paused}
@keyframes azr-hero-zoom{from{transform:scale(1.005)}to{transform:scale(1.09)}}
/* --- スクリムは「写真の上」だけに敷く ---
   写真の無い左側にまで暗幕を掛けると、地のネイビーが黒く沈んで闇のように見える。
   スライドと同じ矩形に限定し、写真とネイビーの境目だけを濃くして文字を守る。 */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(15,23,42,0) 30%,rgba(15,23,42,.38) 54%,rgba(15,23,42,.14) 76%,rgba(15,23,42,.06) 100%),
    linear-gradient(180deg,rgba(15,23,42,.26) 0%,rgba(15,23,42,0) 22%,rgba(15,23,42,0) 66%,rgba(15,23,42,.34) 100%);
}
.hero__inner{position:relative;z-index:2;display:grid;gap:clamp(30px,5vw,52px);align-content:center}
.hero__copy{position:relative;z-index:2;max-width:min(100%,660px)}
.hero__tag{
  display:inline-flex;line-height:inherit;align-items:center;gap:.6em;padding:.55em 1.2em;border-radius:999px;
  background:rgba(19,163,154,.16);border:1px solid rgba(127,227,216,.5);color:#eafaf7;
  font-size:.9rem;font-weight:700;letter-spacing:.08em;margin-bottom:22px;
  box-shadow:0 0 0 4px rgba(19,163,154,.07),0 8px 22px rgba(0,0,0,.14);
}
.hero__tag::before{
  content:"";flex:0 0 auto;width:.55em;height:.55em;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(19,163,154,.55);animation:azr-hire-pulse 2.2s ease-out infinite;
}
@keyframes azr-hire-pulse{
  0%{box-shadow:0 0 0 0 rgba(19,163,154,.55)}
  70%{box-shadow:0 0 0 .6em rgba(19,163,154,0)}
  100%{box-shadow:0 0 0 0 rgba(19,163,154,0)}
}
.hero__title{margin:0;font-weight:700;font-size:clamp(2rem,6vw,3.3rem);letter-spacing:.02em;line-height:1.32;text-wrap:balance;word-break:auto-phrase;text-shadow:0 2px 20px rgba(8,13,26,.45)}
.hero__title em{font-style:normal;color:var(--accent);position:relative;white-space:nowrap}
.hero__sub{margin:24px 0 0;font-size:clamp(1rem,2.4vw,1.18rem);color:#e2e8f2;max-width:34em;text-shadow:0 1px 14px rgba(8,13,26,.5)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
/* --- スライド操作（バー型のドットのみ。停止ボタンは置かず、ホバー／フォーカスで止める） --- */
.hero__controls{display:flex;align-items:center;gap:9px}
.hero__dot{
  appearance:none;-webkit-appearance:none;border:0;background:none;cursor:pointer;
  padding:8px 0;line-height:0;
}
.hero__dot span{
  display:block;width:34px;height:4px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.34);transition:background .25s ease;
}
.hero__dot:hover span{background:rgba(255,255,255,.6)}
/* 表示中の1本は残り時間バーとして満ちていく（一時停止で止まる＝状態が目で分かる） */
.hero__dot span::after{content:"";display:block;height:100%;width:0;border-radius:99px;background:var(--accent)}
.hero__dot[aria-current="true"] span{background:rgba(255,255,255,.5)}
.hero__dot[aria-current="true"] span::after{animation:azr-hero-bar var(--hero-int,6s) linear forwards}
@keyframes azr-hero-bar{from{width:0}to{width:100%}}

/* ---- Concept (3つの柱) ------------------------------------------------ */
.concepts{display:grid;gap:clamp(48px,7vw,84px)}
.concept{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;
}
/* システム紹介ブロックは左のダッシュボードカードが背高。中央揃えだと右テキストが縦中央で浮くため上揃えで詰める */
.concept--top{align-items:start}
/* 1/2/3 の区切りを明確化：ブロック間に区切り線＋余白 */
.concept + .concept{padding-top:clamp(48px,7vw,84px)}
.concept + .concept::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(100%,860px);height:1px;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
}
.concept:nth-of-type(even) .concept__media{order:2}
.concept__media{position:relative}
.concept__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);aspect-ratio:16/11;object-fit:cover;width:100%;transition:transform .5s ease}
.concept__media:hover img{transform:scale(1.025)}
/* 3枚組：右に手技(base)とテーピング(third)を上下に配置し、左から反転写真(over)が両方を橋渡しする。
   並びは 右上 → 左中 → 右下 のジグザグ。幅はすべて 16/11。container は 1/1 で、
   この比率の組み合わせでのみ狙いどおりに重なる（値の変更は3枚まとめて）。 */
.concept__media--stack{aspect-ratio:1/1;overflow:visible}
.concept__media--stack .concept__layer{
  position:absolute;aspect-ratio:16/11;object-fit:cover;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  transition:transform .5s ease;will-change:transform;
}
/* width は .concept__media img{width:100%} に勝つ必要があるため --stack 付きで指定する */
.concept__media--stack .concept__layer--base {width:58%;right:0;top:0;z-index:1}
.concept__media--stack .concept__layer--third{width:50%;right:6%;bottom:0;z-index:1}
.concept__media--stack .concept__layer--over {width:50%;left:0;top:35.5%;z-index:2;transform:scaleX(-1);border:5px solid #fff}
.concept__media--stack:hover .concept__layer--base,
.concept__media--stack:hover .concept__layer--third{transform:scale(1.025)}
.concept__media--stack:hover .concept__layer--over{transform:scaleX(-1) scale(1.025)}
/* 番号バッジ：大きく・二重リングで明確に */
.concept__bracket{font-size:clamp(1.35rem,3.4vw,1.9rem);color:var(--navy-700);letter-spacing:.03em}
.concept__lead{margin:14px 0 22px;color:var(--muted)}
.feature{display:flex;gap:16px;padding:18px 0;border-top:1px dashed var(--line)}
.feature:first-of-type{border-top:0}
.feature__icon{
  flex:0 0 auto;width:46px;height:46px;border-radius:13px;
  background:linear-gradient(135deg,var(--accent-soft),#fff);border:1px solid var(--accent-soft);
  color:var(--accent-strong);display:grid;place-items:center;
  transition:transform .25s ease,background .25s ease,color .25s ease;
}
.feature__icon .ic{width:24px;height:24px}
.feature:hover .feature__icon{background:var(--accent);color:#fff;transform:translateY(-2px) rotate(-3deg)}
.feature__body h4{font-size:1.05rem;color:var(--navy-700);margin-bottom:4px}
.feature__body p{margin:0;color:var(--muted);font-size:.96rem}

/* ---- 取扱い機器（技術育成セクション内の開閉パネル） ----------------------- */
/* トグルボタン（リボン風） */
.equip-toggle{
  margin-top:24px;display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  padding:.78em 1.4em;border:0;border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;
  font-family:inherit;font-weight:800;font-size:.97rem;letter-spacing:.02em;
  box-shadow:0 8px 22px rgba(19,163,154,.28);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}
.equip-toggle:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(19,163,154,.38)}
.equip-toggle:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}
.equip-toggle__icon{position:relative;width:17px;height:17px;flex:0 0 auto}
.equip-toggle__icon::before,.equip-toggle__icon::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:2px;transform:translate(-50%,-50%);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.equip-toggle__icon::before{width:15px;height:2.4px}
.equip-toggle__icon::after{width:2.4px;height:15px}
.equip-toggle[aria-expanded="true"] .equip-toggle__icon::after{transform:translate(-50%,-50%) scaleY(0)}

/* リボン開閉パネル（コンセプト全幅にせり出す） */
.equip-panel{
  grid-column:1/-1;order:9;display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
  transition:grid-template-rows .6s cubic-bezier(.22,.61,.36,1),opacity .5s ease,margin-top .6s ease;
}
.equip-panel.is-open{grid-template-rows:1fr;opacity:1;margin-top:clamp(26px,4vw,42px)}
.equip-panel__inner{overflow:hidden;min-height:0}
.equip-panel__lead{margin:0 0 clamp(16px,2.4vw,22px);color:var(--muted)}
.equip__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,24px)}
.equip-card{
  margin:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease;
}
.equip-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.equip-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.equip-card figcaption{padding:clamp(15px,2.2vw,20px)}
.equip-card h4{font-size:1.04rem;color:var(--navy-700);margin-bottom:8px;display:flex;align-items:center;gap:9px}
.equip-card h4::before{content:"";width:7px;height:20px;border-radius:3px;background:var(--accent);display:inline-block;flex:0 0 auto}
.equip-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.72}
@media(max-width:680px){.equip__grid{grid-template-columns:1fr}}

/* QiSync システムカード：分析ダッシュボード風の背景＋手前に QiSync ブランド */
.system-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:16/11;background:#e7eef6;
}
/* --- 背景：ダッシュボードモック --- */
.dash{position:absolute;inset:0;display:flex;flex-direction:column;background:linear-gradient(160deg,#f4f8fc,#e7eef6)}
.dash__bar{display:flex;align-items:center;gap:7px;padding:9px 12px;background:#fff;border-bottom:1px solid #e3e9f1}
.dash__dot{width:9px;height:9px;border-radius:50%;background:#d7dde6}
.dash__dot:nth-child(1){background:#ff6b5e}.dash__dot:nth-child(2){background:#ffd36b}.dash__dot:nth-child(3){background:#5fd07a}
.dash__title{margin-left:6px;font-size:.7rem;color:#8a96a8;font-weight:600}
.dash__blur{filter:blur(3.5px);opacity:.55;font-weight:700;user-select:none}
.dash__body{flex:1;display:flex;flex-direction:column;gap:8px;padding:10px clamp(10px,1.6vw,16px);min-height:0}
.dash__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi{background:#fff;border:1px solid #e7edf4;border-radius:9px;padding:7px 10px;display:flex;flex-direction:column;gap:2px;box-shadow:0 4px 10px rgba(20,40,80,.04)}
.kpi small{font-size:.56rem;color:#9aa6b6;font-weight:600}
.kpi b{font-size:.9rem;color:var(--navy-700);line-height:1}
.kpi__spark{height:4px;border-radius:3px;margin-top:3px;background:linear-gradient(90deg,#2fa79b,#7fd1c8)}
.dash__row{flex:1;display:grid;grid-template-columns:1.1fr 1.1fr .85fr;gap:8px;min-height:0}
.panel{background:#fff;border:1px solid #e7edf4;border-radius:9px;padding:8px 9px;display:flex;flex-direction:column;gap:6px;box-shadow:0 4px 10px rgba(20,40,80,.04);overflow:hidden}
.panel__t{font-size:.56rem;color:#9aa6b6;font-weight:700}
.bars{flex:1;display:flex;align-items:flex-end;gap:5px}
.bars i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:linear-gradient(180deg,#2fa79b,#bfe7e2);animation:azr-rise 1s ease both}
.panel--line svg{flex:1;width:100%;height:100%}
.line-area{fill:rgba(47,167,155,.16);stroke:none}
.line-stroke{fill:none;stroke:#2fa79b;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.panel--donut{align-items:center;justify-content:center}
.donut{flex:0 0 auto;margin:auto;width:clamp(50px,8vw,72px);height:clamp(50px,8vw,72px);border-radius:50%;
  background:conic-gradient(#2fa79b 0 45%,#7fd1c8 45% 72%,var(--accent) 72% 100%);
  -webkit-mask:radial-gradient(circle at center,#0000 50%,#000 51%);mask:radial-gradient(circle at center,#0000 50%,#000 51%)}
/* --- 手前：QiSync ブランドレイヤー --- */
.system-card__brand{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:radial-gradient(ellipse at center,rgba(13,80,74,.46),rgba(13,80,74,.18) 58%,transparent 80%)}
.qi-logo{font-family:Arial,Helvetica,"Segoe UI",sans-serif;font-size:clamp(1.8rem,5.2vw,3rem);font-weight:800;
  color:#fff;line-height:1;text-shadow:0 6px 24px rgba(0,0,0,.4)}
.qi-logo__mark{color:#7fe3d8}
.qi-logo__sub{font-size:clamp(.62rem,1.7vw,.82rem);font-weight:700;color:#eafaf7;letter-spacing:.14em;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.system-card__cap{margin:12px 0 0;font-size:.82rem;color:var(--muted);text-align:center;font-weight:600}
@keyframes azr-rise{from{transform:scaleY(0);transform-origin:bottom}}

/* ---- Stats / strip ---------------------------------------------------- */
/* ---- Facts（数字で見る、働く環境）--------------------------------------
   「半透明カード4等分＋アクセント色の巨大数字」は量産LPの定型なので採らない。
   主役（年間休日）を1つだけ大きく置き、残りはヘアラインで仕切った明細に落とす。
   数字は白。アクセント色は主役左の縦罫だけに絞る（色ではなく大小で序列を作る）。 */
.facts{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);align-items:stretch;
  max-width:940px;margin-inline:auto;
}
/* 縦罫はブロック全高に通す。主役の文字量が明細より少なくても、余白が
   「余った」ではなく「取った」ように見え、左右2カラムが1つの版面に締まる。 */
.facts__hero{
  display:flex;flex-direction:column;justify-content:center;
  padding-left:clamp(16px,2vw,24px);border-left:2px solid var(--accent);
}
.facts__key{display:block;font-size:.8rem;font-weight:700;letter-spacing:.18em;color:#aeb9cf}
/* 主役の上限は section__title（2.3rem）の約1.5倍まで。5.6rem では見出しの2.4倍・
   明細 dd b の3.6倍になり、数字だけが版面から浮いて別物に見えた。 */
.facts__num{
  margin:10px 0 0;color:#fff;font-weight:800;line-height:.95;white-space:nowrap;
  font-size:clamp(2.5rem,5vw,3.4rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.facts__num .facts__unit{font-size:.36em;margin-left:6px}
.facts__note{margin:16px 0 0;font-size:.88rem;line-height:1.9;color:#cdd6e6}
.facts__list{margin:0}
.facts__row{
  display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:0 20px;align-items:baseline;
  padding:18px 0;border-top:1px solid rgba(255,255,255,.14);
}
.facts__row:first-child{border-top:0;padding-top:0}
.facts__row dt{font-size:.84rem;color:#aeb9cf}
.facts__row dd{margin:0;color:#fff}
.facts__row dd b{
  font-size:1.55rem;font-weight:800;line-height:1.2;
  letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.facts__unit{font-size:.5em;font-weight:700;margin-left:2px}
.facts__sub{display:block;margin-top:5px;font-size:.82rem;line-height:1.8;color:#aeb9cf}

/* ---- Cards (福利厚生/勤務地など) ------------------------------------- */
.grid{display:grid;gap:clamp(16px,2.4vw,26px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,3vw,30px);box-shadow:var(--shadow-sm);
}
.card h3{font-size:1.12rem;color:var(--navy-700);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.card h3::before{content:"";width:8px;height:22px;border-radius:3px;background:var(--accent);display:inline-block}
.card p{margin:0;color:var(--muted)}
.card ul.tick li{padding-left:1.5em;position:relative;margin:.35em 0}
.card ul.tick li::before{content:"✓";position:absolute;left:0;color:var(--accent-strong);font-weight:800}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  padding:.5em 1em;border-radius:999px;background:var(--bg-soft2);color:var(--navy-700);
  font-weight:600;font-size:.9rem;border:1px solid var(--line);
}

/* ---- Spec table (募集要項) ------------------------------------------- */
.spec{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.spec th,.spec td{text-align:left;padding:18px clamp(16px,2.4vw,26px);border-bottom:1px solid var(--line);vertical-align:top}
.spec th{
  width:30%;background:var(--bg-soft);color:var(--navy-700);font-weight:700;white-space:nowrap;
}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec td .note{color:var(--muted);font-size:.9rem;display:block;margin-top:4px}
@media(max-width:600px){
  .spec th,.spec td{display:block;width:auto}
  .spec th{border-bottom:0;padding-bottom:4px}
  .spec td{padding-top:6px}
}

/* ---- Timeline (沿革) -------------------------------------------------- */
.timeline{position:relative;margin-left:8px;padding-left:28px}
.timeline::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 24px}
.timeline li::before{content:"";position:absolute;left:-33px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.timeline time{font-weight:800;color:var(--navy-700);margin-right:12px}

/* ---- CTA band --------------------------------------------------------- */
.cta-band{
  background:linear-gradient(120deg,var(--accent),var(--accent-strong));color:#fff;text-align:center;
  padding:clamp(48px,7vw,84px) 0;
}
.cta-band h2{font-size:clamp(1.5rem,4vw,2.2rem);letter-spacing:.04em}
.cta-band p{margin:14px auto 28px;max-width:40em;color:#fff8ee}
.cta-band .btn--ghost{border-color:#fff}
.cta-band__tel{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;margin-top:22px;font-weight:800;font-size:clamp(1.15rem,4.5vw,1.3rem)}
.cta-band__tel small{font-weight:600;font-size:.8rem;opacity:.9}
/* 副導線＝お問い合わせ（応募を決めきれない層の受け皿） */
.cta-band__sub{margin:18px auto 0;max-width:40em;font-size:.92rem;color:#effffd}
.cta-band__sub a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cta-band__sub a:hover{color:#fff;opacity:.85}

/* ---- Form ------------------------------------------------------------- */
.form-wrap{max-width:760px;margin-inline:auto}
.formrow{margin-bottom:22px}
.formrow > label,.formlabel{display:block;font-weight:700;color:var(--navy-700);margin-bottom:8px}
.req,.opt{font-size:.72rem;font-weight:700;padding:.2em .6em;border-radius:5px;margin-left:8px;vertical-align:.1em}
.req{background:#fdecea;color:var(--danger)}
.opt{background:var(--bg-soft2);color:var(--muted)}
.input,.textarea,.select{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;color:var(--ink);background:#fff;transition:border .2s,box-shadow .2s;
}
.input:focus,.textarea:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(19,163,154,.18);outline:none}
.textarea{min-height:150px;resize:vertical}
.choices{display:flex;flex-wrap:wrap;gap:10px 22px}
.choice{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);cursor:pointer}
.choice input{width:18px;height:18px;accent-color:var(--accent)}
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:18px}
.consent input{margin-top:5px;width:20px;height:20px;accent-color:var(--accent);flex:0 0 auto}
.formhint{color:var(--muted);font-size:.86rem;margin-top:6px}
/* honeypot — must stay visually hidden but present in DOM */
.az-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-note{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);border-radius:10px;padding:14px 16px;color:#7a5a1c;font-size:.9rem;margin-bottom:26px}
.form-errors{background:#fdecea;border:1px solid #f5c6c0;color:var(--danger);border-radius:10px;padding:16px 18px;margin-bottom:24px}
.form-errors ul{list-style:disc;padding-left:1.3em}
.field-error .input,.field-error .textarea,.field-error .select{border-color:var(--danger)}
.field-error .msg{color:var(--danger);font-size:.85rem;margin-top:6px;display:block}

/* ---- Notices ---------------------------------------------------------- */
.notice-ok{
  max-width:680px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(34px,6vw,60px);box-shadow:var(--shadow)
}
.notice-ok .ico{width:78px;height:78px;border-radius:50%;background:#e8f7ef;color:var(--ok);display:grid;place-items:center;margin:0 auto 22px;font-size:2.2rem}

/* ---- Breadcrumb / page head ------------------------------------------ */
.page-hero{
  background:linear-gradient(120deg,var(--navy-800),var(--navy-600));color:#fff;
  padding-top:calc(var(--header-h) + clamp(34px,6vw,64px));padding-bottom:clamp(34px,6vw,60px);
}
.page-hero h1{font-size:clamp(1.6rem,4.6vw,2.4rem);letter-spacing:.04em}
.page-hero p{margin:12px 0 0;color:#cdd6e6}
.crumbs{font-size:.84rem;color:#aeb9cf;margin-bottom:14px}
.crumbs a:hover{color:#fff}

/* ---- Article (固定ページ本文) ---------------------------------------- */
.prose{max-width:820px;margin-inline:auto}
.prose h2{font-size:1.4rem;color:var(--navy-700);margin:2em 0 .7em;padding-bottom:.3em;border-bottom:2px solid var(--line)}
.prose h3{font-size:1.15rem;color:var(--navy-700);margin:1.6em 0 .5em}
.prose p{margin:1em 0}
/* グローバルの ul リセット（list-style:none）を本文だけ元に戻す。規約類は箇条書きが読点の代わりになる。 */
.prose ul{list-style:disc;margin:1em 0;padding-left:1.4em}
.prose li{margin:.45em 0}
/* 外部規約へのリンクは長い。狭い幅で版面をはみ出さないよう任意位置で折る。 */
.prose a{color:var(--accent-strong);text-decoration:underline;overflow-wrap:anywhere}
.prose-meta{margin-top:2.4em;font-size:.9rem;color:var(--muted)}

/* ---- Footer ----------------------------------------------------------- */
.site-footer{background:var(--navy-900);color:#cdd6e6;padding:clamp(48px,7vw,72px) 0 28px}
.site-footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:36px}
.site-footer .brand__name{color:#fff}
.site-footer__desc{margin:16px 0 0;font-size:.92rem;color:#9fabc2;max-width:30em}
.fcol__title{margin:0;line-height:1.4;font-weight:700;color:#fff;font-size:.95rem;letter-spacing:.1em;margin-bottom:14px}
.fcol a{display:block;padding:9px 0;font-size:.92rem;color:#cdd6e6}
.fcol a:hover{color:var(--accent)}
.site-footer__info{font-size:.9rem;line-height:2}
.site-footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:#8b97ad}

/* ---- 常時表示のフローティングCTA（PC＝右下／SP＝下部バー）------------- */
.float-cta{
  position:fixed;right:clamp(14px,1.6vw,22px);bottom:clamp(16px,2vw,26px);z-index:95;
  display:flex;flex-direction:column;align-items:stretch;gap:10px;width:222px;
  opacity:0;visibility:hidden;transform:translateX(calc(100% + 30px));
  transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .3s ease,visibility .42s;
}
.float-cta.is-show{opacity:1;visibility:visible;transform:none}
.float-cta__item{
  display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;
  background:#fff;color:var(--navy-700);border:1px solid var(--line);box-shadow:var(--shadow);
  font-weight:700;font-size:.92rem;line-height:1.25;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.float-cta__item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:var(--navy-700)}
.float-cta__ic{
  flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-strong);
}
.float-cta__ic .ic{width:17px;height:17px}
.float-cta__tx{display:flex;flex-direction:column;min-width:0}
.float-cta__tx small{font-size:.66rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
/* 優先度：応募（アクセント塗り）＞ 相談（ネイビー縁）＞ 電話（無地） */
.float-cta .is-contact{border-color:var(--navy-500)}
.float-cta .is-contact .float-cta__ic{background:var(--bg-soft2);color:var(--navy-700)}
.float-cta .is-entry{
  background:var(--accent);color:#fff;border-color:transparent;padding:14px 16px;font-size:1rem;
  box-shadow:0 12px 28px rgba(19,163,154,.4);
}
.float-cta .is-entry:hover{background:var(--accent-strong);color:#fff}
.float-cta .is-entry .float-cta__ic{background:rgba(255,255,255,.22);color:#fff}
.float-cta .is-entry small{color:#e4fffc}

/* ---- Utilities -------------------------------------------------------- */
.center{text-align:center}
.mt-l{margin-top:clamp(28px,4vw,44px)}

/* ---- 自社院紹介ページ ------------------------------------------------- */
.clinic-figure{margin:0}
.clinic-figure img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-sm);display:block}
.clinic-greeting{display:grid;grid-template-columns:260px 1fr;gap:clamp(20px,3.4vw,40px);align-items:center;max-width:880px;margin-inline:auto}
.clinic-greeting__photo{margin:0}
.clinic-greeting__photo img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-sm);display:block}
.clinic-greeting__role{color:var(--muted);font-size:.92rem;margin:0}
.clinic-greeting__name{font-size:1.5rem;font-weight:800;color:var(--navy-700);margin:.1em 0 .8em;letter-spacing:.04em}
.clinic-greeting__body p:last-child{color:var(--muted);line-height:1.85;margin:0}
.clinic-gallery figure{margin:0}
.clinic-gallery img{width:100%;aspect-ratio:5/3;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-sm);display:block}
@media(max-width:680px){
  .clinic-greeting{grid-template-columns:1fr;max-width:380px}
}

/* =========================================================================
   Pain → Solution（共感→ワンストップ解決）
   ========================================================================= */
.solves{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:clamp(24px,4vw,40px)}
.solve{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:clamp(20px,2.4vw,26px);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.solve:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent-soft)}
.solve__pain{display:flex;gap:10px;align-items:flex-start;font-weight:700;color:var(--navy-700);line-height:1.55}
.solve__tag{
  flex:0 0 auto;align-self:flex-start;margin-top:2px;font-size:.72rem;font-weight:800;letter-spacing:.04em;
  color:#9aa3b3;background:#eef1f6;border-radius:999px;padding:3px 10px;
}
.solve__fix{
  display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding-top:14px;
  border-top:1px dashed var(--line);color:var(--muted);line-height:1.6;
}
.solve__icon{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent-soft),#fff);border:1px solid var(--accent-soft);color:var(--accent-strong);
}
.solve__icon .ic{width:18px;height:18px}
.solves__note{margin-top:18px;font-size:.82rem;color:var(--muted)}

/* =========================================================================
   Roadmap（独立までのステップ）＋ 2つのゴール
   ========================================================================= */
.roadmap{
  list-style:none;margin:clamp(24px,4vw,40px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);
}
.step{position:relative;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 22px 24px}
/* ステップ間のコネクタ（横並び時のみ） */
.step:not(:last-child)::after{
  content:"";position:absolute;top:42px;right:calc(-1 * clamp(16px,2vw,24px) / 2 - 6px);
  width:12px;height:12px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);
  transform:rotate(45deg);
}
.step__no{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;font-weight:800;font-size:1.1rem;
  box-shadow:0 8px 18px rgba(19,163,154,.3);margin-bottom:14px;
}
.step__t{font-size:1.06rem;color:var(--navy-700);margin-bottom:6px}
.step__d{color:var(--muted);font-size:.92rem;line-height:1.6}
.step__ph{color:var(--accent-strong);font-weight:700;font-size:.84rem}

.goals{margin-top:clamp(36px,5vw,56px);display:grid;gap:clamp(18px,2.4vw,28px)}
.goals__head h3{font-size:clamp(1.3rem,3vw,1.7rem);color:var(--navy-700)}
.goals__head p{margin-top:10px;color:var(--muted);max-width:62ch}
.goals__cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,22px)}
.goal{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:clamp(22px,2.6vw,28px);
}
.goal__icon{
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;margin-bottom:14px;
  background:linear-gradient(135deg,var(--accent-soft),#fff);border:1px solid var(--accent-soft);color:var(--accent-strong);
}
.goal__icon .ic{width:26px;height:26px}
.goal h4{font-size:1.1rem;color:var(--navy-700);margin-bottom:6px}
.goal p{color:var(--muted);line-height:1.65}

/* スタッガ出現は [data-stagger]（JSが付与・--i で遅延）に一本化 → Animations セクション参照 */

/* =========================================================================
   共通パーツ（トップ刷新／分岐ページで使用）
   ========================================================================= */
/* SP でのみ改行させる br */
.sp-br{display:none}

/* ページ内アンカー：固定ヘッダーに隠れないよう余白を確保 */
section[id]{scroll-margin-top:calc(var(--header-h) + 12px)}

/* チェックリスト（.card 外でも使えるよう汎用化） */
.tick li{padding-left:1.5em;position:relative;margin:.35em 0}
.tick li::before{content:"✓";position:absolute;left:0;color:var(--accent-strong);font-weight:800}

/* 要望・志向のリスト（・付き） */
.wishes li{position:relative;padding-left:1.35em;margin:.4em 0;color:var(--ink)}
.wishes li::before{content:"";position:absolute;left:.2em;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
/* ・付きなので行頭を揃える。2カラムの grid ブロック自体を中央寄せし、中の行は左寄せ */
.wishes--center{
  display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:10px 44px;
  max-width:900px;margin:clamp(20px,3vw,32px) auto 0;
}
.wishes--center li{margin:0;font-weight:700;color:var(--navy-700)}
.wishes--center li::before{top:.78em}

/* 定義・リード強調ブロック */
.define{
  max-width:840px;margin-inline:auto;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:clamp(28px,4.4vw,48px);
}
.define__body{margin:0;font-size:clamp(1.15rem,2.8vw,1.5rem);font-weight:700;color:var(--navy-700);line-height:1.7}
.define__body strong{color:var(--accent-strong)}
.define__note{margin:16px 0 0;color:var(--muted)}

/* =========================================================================
   ① 理念（必要とされる存在）— 非対称2カラム
   左＝ラベル＋明朝の大見出し／右＝本文。色面ではなく余白と1本の罫線で見せる。
   ========================================================================= */
.mission{
  display:grid;grid-template-columns:minmax(190px,.6fr) 1fr;
  gap:clamp(22px,4.6vw,68px);align-items:start;
  max-width:1000px;margin-inline:auto;
}
.mission__side{position:relative;padding-right:clamp(18px,3vw,38px)}
/* 2カラム間の細い罫線（上端はアクセント→下へフェード） */
.mission__side::after{
  content:"";position:absolute;top:.5em;right:0;bottom:0;width:1px;
  background:linear-gradient(180deg,var(--accent),var(--line) 70%,transparent);
}
.mission__eyebrow{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.24em;
  color:var(--accent-strong);margin-bottom:16px;
}
.mission__title{
  font-family:var(--serif);font-size:clamp(1.6rem,4.4vw,2.5rem);line-height:1.5;
  letter-spacing:.08em;color:var(--navy-700);font-weight:700;
}
.mission__body{padding-top:.35em}
.mission__p{margin:0;color:var(--muted);font-size:1.02rem;text-wrap:pretty}
.mission__quote{
  margin:clamp(22px,3.2vw,34px) 0;padding:.15em 0 .15em clamp(16px,2.4vw,26px);
  border-left:3px solid var(--accent);
  font-family:var(--serif);font-size:clamp(1.15rem,3vw,1.62rem);font-weight:700;
  line-height:1.75;letter-spacing:.05em;color:var(--navy-700);
}
/* 行単位で span を切り、端末幅に依存した不自然な折返しを防ぐ */
.mission__quote span{display:block;text-wrap:balance}

/* =========================================================================
   ② 分岐セクション（A 独立 ／ B アズで極める）
   ========================================================================= */
.branch{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,28px);margin-top:clamp(28px,4vw,44px)}
.branch__card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:clamp(26px,3.2vw,38px);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.branch__card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--accent-soft)}
.branch__card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.branch__card--a::before{background:linear-gradient(90deg,var(--accent),var(--accent-strong))}
.branch__card--b::before{background:linear-gradient(90deg,var(--navy-500),var(--navy-700))}
.branch__label{
  position:absolute;top:clamp(20px,2.6vw,28px);right:clamp(20px,2.6vw,28px);
  font-size:1.5rem;font-weight:800;color:var(--line);letter-spacing:.04em;line-height:1;
}
.branch__icon{
  display:grid;place-items:center;width:54px;height:54px;border-radius:16px;margin-bottom:16px;
  background:linear-gradient(135deg,var(--accent-soft),#fff);border:1px solid var(--accent-soft);color:var(--accent-strong);
}
.branch__card--b .branch__icon{background:linear-gradient(135deg,var(--bg-soft2),#fff);border-color:var(--line);color:var(--navy-700)}
.branch__icon .ic{width:28px;height:28px}
.branch__card h3{font-size:clamp(1.2rem,2.8vw,1.45rem);color:var(--navy-700);margin-bottom:10px}
.branch__card > p{margin:0 0 16px;color:var(--muted)}
.branch__card .tick{margin-bottom:clamp(20px,2.6vw,26px)}
.branch__card .btn{margin-top:auto}

/* =========================================================================
   ③ 関連業者との繋がり
   ========================================================================= */
.partners{
  margin-top:clamp(44px,6vw,72px);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,3.4vw,40px);
}
.partners__head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.partners__icon{
  flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,var(--accent-soft),#fff);border:1px solid var(--accent-soft);color:var(--accent-strong);
}
.partners__icon .ic{width:26px;height:26px}
.partners__head h3{font-size:clamp(1.15rem,2.6vw,1.4rem);color:var(--navy-700)}
.partners__lead{margin:0 0 18px;color:var(--muted)}
.partners .chip{background:#fff}

/* =========================================================================
   独立ページ：段階（stages）＋ スケジュール（flow）
   ========================================================================= */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px)}
.stage{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:clamp(24px,3vw,32px);
  transition:transform .25s ease,box-shadow .25s ease;
}
.stage:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.stage__no{
  display:inline-block;font-size:.9rem;font-weight:800;letter-spacing:.14em;
  color:var(--accent-strong);margin-bottom:8px;
}
.stage__t{font-size:1.15rem;color:var(--navy-700);margin-bottom:10px}
.stage__d{margin:0 0 14px;color:var(--muted);font-size:.95rem}

.flow-wrap{
  margin-top:clamp(28px,4vw,44px);background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:clamp(24px,3.2vw,36px);
}
.flow__t{font-size:1.1rem;color:var(--navy-700);text-align:center;margin-bottom:clamp(18px,2.6vw,26px)}
.flow{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);
}
.flow li{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;
  padding:.85em 1em;font-weight:700;color:var(--navy-700);
}
.flow li:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:calc(-1 * clamp(14px,2vw,22px) / 2 - 5px);
  width:10px;height:10px;margin-top:-5px;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg);
}
.flow__n{
  flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.82rem;font-weight:800;
}
.flow__note{margin:clamp(18px,2.6vw,24px) 0 0;color:var(--muted);font-size:.94rem}

/* =========================================================================
   先達の声（抜粋カード／一覧）
   ========================================================================= */
.voice-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px)}
.voice{
  position:relative;margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:clamp(24px,3vw,32px);
}
.voice__icon{
  display:grid;place-items:center;width:44px;height:44px;border-radius:13px;margin-bottom:14px;
  background:linear-gradient(135deg,var(--accent-soft),#fff);border:1px solid var(--accent-soft);color:var(--accent-strong);
}
.voice__icon .ic{width:24px;height:24px}
.voice p{margin:0;color:var(--ink);font-size:.98rem;line-height:1.8}
.voice p::before{content:"「"}
.voice p::after{content:"」"}
.voice cite{display:block;margin-top:12px;font-style:normal;font-size:.82rem;font-weight:700;letter-spacing:.1em;color:var(--muted)}

.voice-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,26px)}
.voice-group{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:clamp(22px,2.8vw,30px);
}
.voice-group__t{display:flex;align-items:center;gap:12px;font-size:1.1rem;color:var(--navy-700);margin-bottom:14px}
.voice-group__t small{margin-left:auto;font-size:.74rem;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.voice-group__icon{
  flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent-soft),#fff);border:1px solid var(--accent-soft);color:var(--accent-strong);
}
.voice-group__icon .ic{width:22px;height:22px}
.voice-list li{
  position:relative;padding:12px 0 12px 1.6em;border-top:1px dashed var(--line);
  color:var(--muted);font-size:.94rem;line-height:1.75;
}
.voice-list li:first-child{border-top:0}
.voice-list li::before{content:"“";position:absolute;left:0;top:.55em;font-size:1.5rem;line-height:1;color:var(--accent);font-weight:800}

/* =========================================================================
   アズで極めるページ：近年の改革例
   ========================================================================= */
.reforms{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,20px)}
.reform{
  display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:clamp(18px,2.4vw,24px);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.reform:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent-soft)}
.reform__icon{
  flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:linear-gradient(135deg,var(--accent-soft),#fff);border:1px solid var(--accent-soft);color:var(--accent-strong);
}
.reform__icon .ic{width:24px;height:24px}
.reform__body h3{font-size:1.03rem;color:var(--navy-700);margin-bottom:5px}
.reform__body p{margin:0;color:var(--muted);font-size:.93rem}
.reform__body a{color:var(--accent-strong);text-decoration:underline}


/* =========================================================================
   Animations — 効果的に、過剰でなく
   ========================================================================= */
/* --- reveal：単調にならないよう出現パターンを出し分ける（data-reveal は JS が付与）--- */
.reveal{
  opacity:0;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1),
             filter .9s ease,clip-path 1s cubic-bezier(.22,.61,.36,1);
}
.reveal[data-reveal="up"]{transform:translateY(38px);filter:blur(6px)}
.reveal[data-reveal="fade"]{transform:none}
.reveal[data-reveal="left"]{transform:translate3d(-46px,12px,0)}
.reveal[data-reveal="right"]{transform:translate3d(46px,12px,0)}
.reveal[data-reveal="scale"]{transform:scale(.945);filter:blur(6px)}
.reveal[data-reveal="mask"]{clip-path:inset(0 0 100% 0);transform:translateY(18px)}
.reveal.is-in{opacity:1;transform:none;filter:none}
/* clip-path は mask のみ。終端を負値にして影・hover の持ち上がりを切らない */
.reveal[data-reveal="mask"].is-in{clip-path:inset(-20% -20% -20% -20%)}

/* --- 子要素の時間差出現（JS が data-stagger と --i を付与）--- */
[data-stagger].is-in > *{
  animation:azr-fade-up .75s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i,0) * .09s);
}
/* 見出しは eyebrow → タイトル（下からワイプ）→ リード の順で立ち上げる */
.section__head.is-in .section__title{animation:azr-title-in .85s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--i,0) * .09s)}

.concept.is-in .feature{animation:azr-fade-up .8s cubic-bezier(.22,.61,.36,1) both}
.concept.is-in .feature:nth-of-type(2){animation-delay:.16s}
/* コンセプト：写真と本文を左右から寄せ、奇数/偶数で向きを反転させて反復感を消す */
.concept.is-in .concept__media{animation:azr-media-in-l 1.05s cubic-bezier(.22,.61,.36,1) both}
.concept.is-in .concept__body{animation:azr-body-in-r .95s cubic-bezier(.22,.61,.36,1) .08s both}
.concept:nth-child(even).is-in .concept__media{animation-name:azr-media-in-r}
.concept:nth-child(even).is-in .concept__body{animation-name:azr-body-in-l}
@keyframes azr-media-in-l{from{opacity:0;transform:translateX(-38px) scale(1.04);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes azr-media-in-r{from{opacity:0;transform:translateX(38px) scale(1.04);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes azr-body-in-l{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes azr-body-in-r{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes azr-title-in{from{opacity:0;transform:translateY(16px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-30% -30% -30% -30%)}}
/* 3枚組は container ではなくレイヤー単位で時間差出現（右上→右下→重ねの順） */
.concept.is-in .concept__media--stack{animation:none}
.concept__media--stack .concept__layer{opacity:0}
.concept.is-in .concept__layer--base{animation:azr-stack-in 1s cubic-bezier(.22,.61,.36,1) .05s both}
.concept.is-in .concept__layer--third{animation:azr-stack-in 1s cubic-bezier(.22,.61,.36,1) .28s both}
.concept.is-in .concept__layer--over{animation:azr-stack-in-flip 1s cubic-bezier(.22,.61,.36,1) .5s both}
@keyframes azr-stack-in{from{opacity:0;transform:translateY(26px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes azr-stack-in-flip{from{opacity:0;transform:scaleX(-1) translateY(26px) scale(.96);filter:blur(6px)}to{opacity:1;transform:scaleX(-1);filter:none}}
/* 取扱い機器カード：パネルを開いたときに時間差で出現 */
.equip-panel.is-open .equip-card{animation:azr-fade-up .7s cubic-bezier(.22,.61,.36,1) both}
.equip-panel.is-open .equip-card:nth-child(2){animation-delay:.1s}
.equip-panel.is-open .equip-card:nth-child(3){animation-delay:.2s}
.equip-panel.is-open .equip-card:nth-child(4){animation-delay:.3s}
@keyframes azr-fade-up{from{opacity:0;transform:translateY(30px) scale(.97);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}

/* ヒーロー：ロード時の段階的フェードアップ */
.hero__tag,.hero__title,.hero__sub,.hero__actions{opacity:0;animation:azr-hero-in .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero__title{animation-delay:.12s}
.hero__sub{animation-delay:.26s}
.hero__actions{animation-delay:.4s}
.hero__slides{opacity:0;animation:azr-hero-media 1.2s cubic-bezier(.2,.7,.2,1) forwards}
.hero__controls{opacity:0;animation:azr-fade-up .7s ease .8s forwards}
@keyframes azr-hero-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes azr-hero-media{from{opacity:0}to{opacity:1}}
/* ヒーロー背景のゆっくりした光のゆらぎ */
.hero::after{animation:azr-glow 9s ease-in-out infinite alternate}
@keyframes azr-glow{from{opacity:.7;transform:translateY(0)}to{opacity:1;transform:translateY(20px)}}
.hero__slide img{will-change:transform}
/* 強調語（施術師）にアンダーラインを引く */
.hero__title em::after{
  content:"";position:absolute;left:0;right:0;bottom:-.14em;height:.1em;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),rgba(19,163,154,0));
  transform:scaleX(0);transform-origin:left;animation:azr-underline .9s cubic-bezier(.22,.61,.36,1) .8s forwards;
}
@keyframes azr-underline{to{transform:scaleX(1)}}

/* スクロール進捗バー（ヘッダー下端／JS が --p を更新）— 読み進み感を出す */
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.scroll-progress::after{
  content:"";display:block;height:100%;width:100%;transform:scaleX(var(--p,0));transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--accent-strong));
}

/* パララックス（JS が --py を更新。要素は translateY するだけなので低コスト） */
.is-parallax{transform:translate3d(0,var(--py,0px),0)}

/* カード/ボタンのマイクロインタラクション */
.card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--accent-soft)}
.chip{transition:transform .2s ease,background .2s ease,color .2s ease}
.chip:hover{transform:translateY(-2px);background:var(--accent-soft);color:var(--accent-strong)}
/* ボタンの光沢スイープ */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .6s ease}
.btn:hover::after{left:140%}
/* グロナビのアンダーライン */
.gnav__list a:not(.gnav__path){position:relative}
.gnav__list a:not(.gnav__path)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.gnav__list a:not(.gnav__path):hover::after{transform:scaleX(1)}
/* ヘッダのスクロール時の陰影 */
.site-header{transition:box-shadow .3s ease,background .3s ease}
.site-header.is-scrolled{box-shadow:0 6px 24px rgba(16,25,46,.10)}
@media(prefers-reduced-motion:reduce){
  .reveal,.hero__tag,.hero__title,.hero__sub,.hero__actions,.hero__slides,.hero__controls,
  [data-stagger] > *,.section__head .section__title,
  .concept.is-in .feature,.concept.is-in .concept__media,.concept.is-in .concept__body,
  .equip-panel.is-open .equip-card,
  .system-card__row span,.system-card__bars i{
    animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;
  }
  .concept__media--stack .concept__layer{opacity:1!important;animation:none!important}
  .concept__layer--over{transform:scaleX(-1)!important}
  .hero__title em::after{animation:none;transform:scaleX(1)}
  .hero__tag::before{animation:none}
  .hero::after{animation:none}
  /* スライダー：自動送りは JS 側で止める。ここでは寄り演出とバーの動きを消し、
     現在地は満ちた状態のバーで示す（動かないが「今どれか」は分かる） */
  .hero__slide img{animation:none}
  .hero__slide{transition:none}
  .hero__dot[aria-current="true"] span::after{animation:none;width:100%}
  .btn::after{display:none}
  .is-parallax{transform:none!important}
  .float-cta{transition:none}
  html{scroll-behavior:auto}
}

/* =========================================================================
   Responsive
   ========================================================================= */
/* 中間幅：コピーの折返し幅が写真側へ食い込むため、写真を少し細く・コピーを少し狭く */
@media(min-width:901px) and (max-width:1200px){
  .hero__slides{width:56%}
  .hero__copy{max-width:min(100%,54%)}
}
@media(max-width:900px){
  /* 横に並べる幅がないため写真は全面へ戻し、スクリムを縦基調に切り替える
     （左右に寄せると写真も文字も両方が狭くなるだけで、どちらも読めなくなる） */
  .hero{min-height:clamp(520px,74svh,660px)}
  .hero__slides{inset:0;width:auto;-webkit-mask-image:none;mask-image:none}
  .hero__scrim{
    background:
      linear-gradient(180deg,rgba(13,20,38,.78) 0%,rgba(13,20,38,.55) 34%,rgba(13,20,38,.58) 66%,rgba(13,20,38,.84) 100%),
      linear-gradient(100deg,rgba(13,20,38,.34),rgba(13,20,38,.12));
  }
  .concept,.concept:nth-child(even) .concept__media{grid-template-columns:1fr;order:0}
  .concept__media{order:0!important}
  /* 1カラム化で幅いっぱいになると 1/1 の3枚組が縦に伸びすぎるため上限を設ける */
  .concept__media--stack{width:min(100%,520px);margin-inline:auto}
  /* 非対称2カラムは幅が要る。1カラム化して主役→明細の縦の流れに切り替える */
  .facts{grid-template-columns:1fr;gap:clamp(26px,5vw,34px)}
  .site-footer__top{grid-template-columns:1fr 1fr}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  /* ロードマップ：横並び→縦並び、コネクタは非表示 */
  .roadmap{grid-template-columns:1fr}
  .step:not(:last-child)::after{display:none}
  /* 独立ページ：段階カード・声の抜粋を1カラムへ */
  .stages,.voice-teaser{grid-template-columns:1fr}
  /* スケジュールflow：2カラム化（折返しで矢印が破綻するため矢印は隠す） */
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow li:not(:last-child)::after{display:none}
  /* 縦に積むと中央寄せでは項目の文字数ぶん番号の位置がずれる。
     行頭で揃える（`.wishes--center` と同じ方針＝縦並びのマーカーは必ず左端に揃える）。 */
  .flow li{justify-content:flex-start;padding-left:1.25em}
}
/* ---- ナビの折りたたみ（1100px）------------------------------------------
   進路セグメント＋実務リンク4本＋応募CTA を横1列に収めるには実測で約960px必要（＝ビューポート約1030px）。安全側に 1140px を境界とする。
   これ未満はハンバーガーへ畳む。**下部バーCTAやカラム落ちの 760px とは別物**なので
   ブレークポイントを分けている（760px まで横並びを粘ると必ずヘッダーが折り返す）。 */
@media(max-width:1140px){
  .gnav__list,.gnav__cta{display:none}
  .nav-toggle{display:block;flex:0 0 auto;margin-left:auto;position:relative;z-index:101}
  .site-header__inner{gap:10px}
  .brand{flex:1 1 auto}
  /* 閉時はパネル高さに依存せず visibility で確実に隠す（白バーがヘッダーに被るバグ対策）*/
  .gnav{position:fixed;left:0;right:0;top:var(--header-h);background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;padding:10px var(--gutter) 22px;gap:0;
    box-shadow:var(--shadow);max-height:calc(100dvh - var(--header-h));overflow:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s ease}
  body.nav-open .gnav{opacity:1;visibility:visible;transform:none}
  body.nav-open .gnav__list{display:flex}
  .gnav__list{flex-direction:column;align-items:stretch;width:100%;gap:0}
  /* display:block にしないと a がインラインのまま＝区切り線がテキスト幅にしか引かれず不揃いになる */
  .gnav__list a:not(.gnav__path){display:block;padding:15px 4px;border-bottom:1px solid var(--line);font-size:1rem}
  body.nav-open .gnav__cta{display:inline-flex;margin-top:16px;width:100%}
  /* 進路セグメント：縦積みの白カード＋ラベル表示（幅に余裕があるので役割を明示できる） */
  .gnav__paths{
    flex-direction:column;align-items:stretch;gap:8px;
    border-radius:var(--radius);padding:12px;margin:8px 0 12px;
  }
  .gnav__paths-label{display:block;padding:0 2px 2px;font-size:.68rem}
  .gnav__path{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:13px 14px;font-size:.98rem;box-shadow:var(--shadow-sm);
  }
  .gnav__dot{width:10px;height:10px}
  .gnav__sep{display:none}
}
@media(max-width:760px){
  :root{--header-h:62px}
  body{padding-bottom:74px}
  .choices{flex-direction:column;gap:10px}
}
@media(max-width:760px){
  /* ペイン解決・2ゴール・分岐・声一覧・改革例：1カラム化 */
  .solves,.goals__cards,.branch,.voice-groups,.reforms{grid-template-columns:1fr}
  .sp-br{display:inline}
  /* 2カラムだと1項目が折り返して・の行頭が揃わなくなるため縦1列へ */
  .wishes--center{grid-template-columns:auto;gap:8px;justify-content:start}
  /* 理念：非対称2カラム → 縦積み（罫線は見出し下のアンダーラインに切替） */
  .mission{grid-template-columns:1fr;gap:clamp(18px,4vw,26px)}
  .mission__side{padding-right:0;padding-bottom:clamp(14px,3vw,20px)}
  .mission__side::after{top:auto;right:auto;left:0;bottom:0;width:56px;height:2px;
    background:linear-gradient(90deg,var(--accent),var(--line))}
  .mission__title br{display:none}
  .mission__body{padding-top:0}
  /* フローティングCTA：右下フロート → 画面下部の固定バー */
  .float-cta{
    left:0;right:0;bottom:0;width:auto;flex-direction:row;gap:0;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(16,25,46,.12);
    transform:translateY(100%);transition:transform .35s ease,opacity .25s ease,visibility .35s;
  }
  .float-cta__item{
    flex:1 1 0;flex-direction:column;justify-content:center;gap:2px;
    border:0;border-radius:0;box-shadow:none;padding:9px 4px;font-size:.78rem;text-align:center;
  }
  .float-cta__item:hover{transform:none;box-shadow:none}
  .float-cta .is-entry{flex:1.5 1 0;border-radius:0;box-shadow:none;padding:9px 4px;font-size:.86rem}
  .float-cta__ic{width:22px;height:22px}
  .float-cta__ic .ic{width:14px;height:14px}
  .float-cta__tx{align-items:center}
  .float-cta__tx small{font-size:.6rem}
}
/* grid--2（キャリアの要望カード）は長文のため 640px で1カラム化し、521〜640px の窮屈な折返しを回避 */
@media(max-width:640px){
  .grid--2{grid-template-columns:1fr}
}
@media(max-width:520px){
  .grid--3{grid-template-columns:1fr}
  /* ラベル列を畳んで、ラベル→数字の縦積みにする */
  .facts__row{grid-template-columns:1fr;gap:2px}
  .site-footer__top{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
}

/* ---- SPヘッダーの崩れ対策（nowrap/ellipsis は基本スタイル側。ここは縮小のみ）---- */
@media(max-width:760px){
  .brand__name{font-size:.96rem;line-height:1.25}
  .brand__name span{font-size:.58rem}
  /* ヒーローの職種タグ：ピル→角丸ボックスにして折返しを整える */
  .hero__tag{
    display:inline-block;white-space:normal;text-align:center;line-height:1.65;
    border-radius:14px;padding:.6em 1.05em;font-size:.82rem;max-width:100%;
    text-wrap:balance;word-break:auto-phrase;
  }
  .hero__tag::before{display:none} /* 折返しボックスでは先頭ドットが浮くため非表示 */
}
@media(max-width:430px){
  .brand__name span{display:none} /* 極小端末ではサブタイトルを隠して崩れ防止 */
}