/* トップページのスタイル
   2026年9月18日：design-direction-b2-20260918.html の試作をそのまま本体へ移した。
   旧版は history/20260918-before-redesign/ に退避してある。
   色・余白はこのファイルの :root で定義している。共通の tokens.css とはまだ統一していない。
   ずれの一覧は制作READMEの2026年9月18日の項にある。 */
:root{--cream:#fdfbf7;--cream2:#f7f2e9;--blue:#2ea7e0;--blue-d:#15547c;--blue-l:#eaf6fd;--amber:#ef9d43;--ink:#3e3a39;--head:#22201e;--amb-d:#a8650c;--grn-d:#2f7d55;--ink2:#6f6862;--line:#ece5da;--act:#CC4409}
*{box-sizing:border-box}
body{margin:0;font-family:var(--pl-font);color:var(--ink);background:var(--cream);line-height:1.9;font-size:16px;overflow-x:hidden}
.en{font-family:'Outfit',sans-serif}
h1,h2,h3,h4{font-family:var(--pl-font-heading);font-weight:700;margin:0;line-height:1.45}
/* 2026-09-24: WebPを出し分けるため img を <picture> で包んだ。
   picture が枠として残ると、img への height:100% や、親の flex/grid の指定が
   img まで届かなくなる（.cards3 .ic の画像が256pxのまま出た）。
   display:contents で picture 自身を並びから消し、img を今までどおり
   親の直接の子として扱わせる。 */
picture{display:contents}
p{margin:0}
.wrap{max-width:1160px;margin:auto;padding:0 32px}
.badge{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--blue-d);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 18px;box-shadow:0 2px 8px rgba(62,58,57,.07)}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--amber)}
/* ボタンは3段階。lg=一番押してほしいもの、md=各ブロックの導線、sm=補助 */
.btn{display:inline-flex;align-items:center;gap:18px;text-decoration:none;font-weight:700;border-radius:999px;background:var(--act);color:#fff;box-shadow:0 10px 24px rgba(204,68,9,.28);transition:transform .2s,box-shadow .2s}
.btn-lg{padding:20px 36px;font-size:17px;gap:26px}
.btn-md{padding:14px 26px;font-size:16px;gap:18px}
.btn-sm{padding:10px 18px;font-size:14px;gap:12px}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(204,68,9,.36)}
.btn span{transition:transform .2s}.btn:hover span{transform:translateX(5px)}
.slash{display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:700;color:var(--blue-d)}
.slash:before,.slash:after{content:'';width:16px;height:22px;border-left:2px solid var(--amber)}
.slash:before{transform:rotate(-18deg)}.slash:after{transform:rotate(18deg);border-left:0;border-right:2px solid var(--amber)}
.hl{background-image:linear-gradient(transparent 58%,rgba(239,157,67,.45) 58%,rgba(239,157,67,.45) 96%,transparent 96%);
  background-repeat:no-repeat;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.bl{color:var(--blue-d)}
.spark{position:absolute;fill:var(--amber)}

/* ---------- 説明バー ---------- */
.doc{background:#2b2724;color:#fff;padding:22px 32px;font-size:15px;line-height:1.85}
.doc b{color:var(--amber)}
.doc .wrap{padding:0}
.spot img{width:100%;height:auto;display:block}
.sc .top .spot{display:flex;align-items:flex-end;justify-content:center;height:100%;padding-top:10px}
.sc .top .spot img{width:auto;height:120px}
.ph{outline:2px dashed rgba(46,167,224,.55);outline-offset:3px;border-radius:14px;background:rgba(46,167,224,.06);display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--blue-d);font-weight:700;line-height:1.5;padding:6px}
.sc .top .ph{outline-color:rgba(46,167,224,.5);background:rgba(255,255,255,.5);color:var(--blue-d)}

/* ---------- ヒーロー ---------- */
/* ヒーローの面をヘッダーの高さぶん上へ伸ばす。円はこの面に置くので
   ヘッダーの裏まで続き、途中で切れない。
   --header-h はヘッダーの実測値。ヘッダーの中身を変えたら測り直す。 */
:root{--header-h:85px}
@media(max-width:1080px){:root{--header-h:135px}}
@media(max-width:860px){:root{--header-h:161px}}
@media(max-width:560px){:root{--header-h:199px}}
.site-header{margin-bottom:calc(-1 * var(--header-h))}
.page-top{position:relative;background:var(--cream);overflow:hidden;padding-top:var(--header-h)}
.page-top .arc{position:absolute;border-radius:50%;z-index:0;pointer-events:none}
.page-top .arc1{width:820px;height:820px;left:-330px;top:-300px;background:radial-gradient(circle at 60% 60%,rgba(46,167,224,.17),rgba(46,167,224,0) 66%)}
.page-top .arc2{width:520px;height:520px;right:-120px;top:-170px;background:radial-gradient(circle at 40% 60%,rgba(239,157,67,.20),rgba(239,157,67,0) 66%)}
/* ===== お知らせの帯（2026-09-24 追加）=====
   ヘッダーのすぐ下、ヒーローの手前。page-top の中に置くので、
   広い画面では page-top の padding-top（＝ヘッダーの高さ）ぶん下がった位置に出る。
   狭い画面ではヘッダーが absolute になるため、下の 860px 以下の指定で自分で余白を取る。 */
/* 看板と混ざらないよう、面の色を変えて独立した帯にする。
   生成りの上に淡い水色を敷き、下に線を1本。お知らせはここで終わり、
   ここから下が看板、と目で分かる形にする。 */
.notice{position:relative;z-index:3;margin:0;background:var(--blue-l);
  border-bottom:1px solid rgba(21,84,124,.14)}
.notice>.wrap{max-width:1280px;display:flex;align-items:baseline;gap:18px;
  padding-top:11px;padding-bottom:11px}
.notice-lab{flex:none;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--blue-d);
  background:var(--blue-l);border-radius:999px;padding:5px 13px;margin:0}
.notice ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.notice li{display:flex;align-items:baseline;gap:14px;font-size:14px;line-height:1.75;color:var(--ink)}
.notice time{flex:none;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;color:var(--ink2);letter-spacing:.02em}
/* リンクを付ける場合。押せる高さを確保する。 */
.notice a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue-d);font-weight:600;
  text-decoration:none;border-bottom:1px solid rgba(21,84,124,.35)}
.notice a:hover{border-bottom-color:var(--blue-d)}

.hero{position:relative;background:transparent;padding:30px 0 230px}
/* ヒーローだけ他の節より広い枠を使う（見出しを大きいまま1行に収めるため） */
.hero>.wrap{max-width:1280px}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:44px;align-items:center}
/* 見出しの3行目「その段階から、ご相談ください。」14文字が1行に収まる寸法。
   文字数を変えるときは、下の hero-grid の列幅と合わせて見直す。 */
.hero h1{font-size:clamp(30px,3.2vw,44px);color:var(--head);margin:20px 0 26px;letter-spacing:.005em}
/* 2026-09-18: 見出しの改行位置は行ごとに固定する。自動折り返しだとマーカーが行をまたいで割れる。 */
.hl-line{display:block}
.hero .lead{font-size:17px;line-height:2;color:var(--ink);margin-bottom:30px;max-width:30em}
.hero .loc{font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:12px}
.hero-pic{position:relative}
/* 2026-09-18: ヒーローを線画に変更。透過なので写真用の枠・影・重ね板をやめ、
   淡い面の上に絵を置く形にした。 */
.hero-pic .back{position:absolute;inset:26px -14px 6px 10px;background:var(--blue);opacity:.10;border-radius:190px 28px 190px 28px}
.hero-pic figure{position:relative;margin:0}
.hero-pic img{display:block;width:100%;height:auto}
.hero-pic .sun{position:absolute;right:-26px;top:-26px;width:74px;height:74px;z-index:3}
.hero .facts{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:600;box-shadow:0 2px 7px rgba(62,58,57,.06)}
.chip b{font-family:'Outfit',sans-serif;font-size:19px;color:var(--blue-d);font-weight:700}
/* 2026-09-18: 縦に整列していたのをやめ、位置・大きさ・角度をばらす。
   位置は各要素の style 属性で個別に指定する。 */
.sct{position:absolute;z-index:2}
.sct img{width:100%;height:auto;display:block}
@media(max-width:1340px){.sct.edge{display:none}}
@media(max-width:860px){.sct{display:none}}
.wave{position:absolute;left:0;right:0;bottom:-1px;z-index:1;line-height:0;pointer-events:none}
/* 2026-09-18: 本文は必ず波より上に置く */
.hero>.wrap,.q>.wrap,.benefit>.wrap,.serv>.wrap,.flow-sec>.wrap,.trust>.wrap,.cta-sec>.wrap{position:relative;z-index:2}
.wave svg{width:100%;height:170px;display:block}
.wave.deep svg{height:190px}

/* ---------- 問いかけ ---------- */
.q{background:var(--blue-l);position:relative;padding:20px 0 210px}
.q .eyeb{text-align:center;margin-bottom:10px}
.q h2{text-align:center;font-size:clamp(26px,3vw,38px);color:var(--head);margin:10px 0 14px}
.q .sub{text-align:center;color:var(--ink2);font-size:16px;margin-bottom:44px}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:22px}
.qc{background:#fff;border-radius:22px;padding:28px 26px;box-shadow:0 4px 16px rgba(21,84,124,.09);position:relative;transition:transform .22s,box-shadow .22s}
.qc:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(21,84,124,.15)}
/* 2026-09-18: 問いかけの灰色アイコンは削除。番号と見出しで内容は伝わる。 */
.qc .ic svg{width:26px;height:26px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qc:nth-child(1) .ic{background:#fdf0e0}.qc:nth-child(1) .ic svg{stroke:#c9761a}
.qc:nth-child(2) .ic{background:#e6f4fc}.qc:nth-child(2) .ic svg{stroke:var(--blue-d)}
.qc:nth-child(3) .ic{background:#e8f5ee}.qc:nth-child(3) .ic svg{stroke:#2f7d55}
.qc h3{font-size:20px;color:var(--head);margin-bottom:9px}
.qc p{font-size:16px;color:#5c5754;line-height:1.85}
.qc .num{position:absolute;right:20px;top:14px;font-family:'Outfit',sans-serif;font-size:36px;font-weight:700;color:rgba(21,84,124,.09);line-height:1}
.q .wave svg{height:180px}
.q .answer{text-align:center;margin-top:40px;font-size:19px;font-weight:700;color:var(--blue-d)}

/* ---------- 大きな英字見出し ---------- */
.serv{background:var(--cream);padding:10px 0 200px;position:relative}
.head{position:relative;margin-bottom:40px}
.big{font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(46px,8vw,104px);line-height:.95;color:var(--blue);opacity:.10;letter-spacing:-.02em}
.jp{position:absolute;left:0;bottom:6px;font-family:var(--pl-font-heading);font-weight:700;font-size:clamp(23px,3vw,36px);color:var(--head)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:24px}
.sc{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 4px 14px rgba(62,58,57,.07);transition:transform .22s,box-shadow .22s}
.sc:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(62,58,57,.14)}
.sc .top{height:134px;position:relative;display:flex;align-items:center;justify-content:center}
/* 2026-09-18: 色相は青一本に。濃さだけ3段階に変え、紺は番号のバッジに点で使う。 */
.sc:nth-child(1) .top{background:#EAF5FC}
.sc:nth-child(2) .top{background:#CBE7F7}
.sc:nth-child(3) .top{background:#A6D6F0}
.sc .no{position:absolute;left:24px;bottom:-21px;width:44px;height:44px;border-radius:50%;
  background:var(--blue-d);color:#fff;font-family:'Outfit',sans-serif;font-weight:700;font-size:17px;
  display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 4px 12px rgba(21,84,124,.28)}
.sc .top .ph{width:88px;height:74px}
.sc .body{padding:36px 24px 26px}
.sc .lab{font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;margin-bottom:6px}
.sc .lab{color:var(--blue-d)}
.sc h3{font-size:20px;color:var(--head);margin-bottom:10px}
.sc p{font-size:16px;color:#5c5754;line-height:1.85;margin-bottom:16px}
/* 2026-09-18: .sc の中だけに効いていたため、研修の帯ではボタンにならず文字リンクのままだった。 */
.more{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  font-size:16px;font-weight:700;text-decoration:none;padding:14px 26px;border-radius:999px;
  border:1.6px solid currentColor;background:#fff;transition:background .2s,color .2s,transform .2s}
.more{color:var(--blue-d)}
.more:hover{background:var(--blue-d);color:#fff;transform:translateY(-1px)}
.more span{transition:transform .2s}.more:hover span{transform:translateX(4px)}

@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:34px}.scatter{display:none}.hero{padding-bottom:110px}.jp{position:static}.big{opacity:.12}}

/* ===== ここから本体化（2026-09-18） ===== */
/* ヘッダー */

/* 目指す状態 */
.benefit{background:#FCF3E7;position:relative;padding:20px 0 200px}
.benefit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:46px;align-items:center;margin-top:34px}
.benefit-copy>div+div{margin-top:28px}
.benefit-copy h3{font-size:20px;color:var(--head);margin-bottom:8px}
.benefit-copy h3:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amber);margin-right:10px;vertical-align:.18em}
.benefit-copy p{font-size:16px;line-height:1.95;color:#5c5754}
.benefit-pic{position:relative}
.benefit-pic .back{position:absolute;inset:22px -12px 4px 8px;background:var(--amber);opacity:.14;border-radius:28px 190px 28px 190px}
.benefit-pic figure{position:relative;margin:0}
.benefit-pic img{width:100%;height:auto;display:block}
.benefit-close{margin-top:38px;text-align:center;font-size:19px;font-weight:700;color:var(--head)}

/* サービス：01と02はカード、03は帯（03のブランド方針：三つを同じ形で並べない） */
.cards2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:26px}
.training{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px 30px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;box-shadow:0 4px 14px rgba(62,58,57,.06)}
.training .lab{font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--blue-d);margin-bottom:6px}
.training h3{font-size:20px;color:var(--head);margin-bottom:10px}
.training p{font-size:16px;color:#5c5754;line-height:1.85;margin-bottom:16px;max-width:52em}
.training .pic{width:150px}
.training .pic img{width:100%;height:auto;display:block}
/* 2026-09-18: 試作ページ時代のヘッダー指定が残っていて、狭い画面でメニューが右端へ飛んでいた。
   ヘッダーの指定はこのファイルの末尾にまとめてある。 */
@media(max-width:760px){.benefit-grid{grid-template-columns:1fr;gap:26px}.training{grid-template-columns:1fr}.training .pic{width:130px;justify-self:center}}

/* 進め方 */
.flow-sec{background:#EAF5FC;position:relative;padding:20px 0 200px}
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:26px;margin-top:38px;position:relative}
.step{background:#fff;border-radius:22px;padding:26px 24px;box-shadow:0 4px 16px rgba(21,84,124,.08);position:relative}
.step .n{font-family:'Outfit',sans-serif;font-weight:700;font-size:15px;color:#fff;background:var(--blue-d);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step:nth-child(4) .n{background:var(--amber);color:var(--head)}
.step h3{font-size:20px;color:var(--head);margin-bottom:9px}
.step p{font-size:16px;color:#5c5754;line-height:1.85}

/* 実績紹介 */
.trust{background:var(--cream);position:relative;padding:20px 0 200px}
.trust .cat{font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--blue-d);margin:30px 0 6px}
.trust .lead{font-size:16px;color:#5c5754;margin-bottom:26px}
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:24px;list-style:none;padding:0;margin:0}
.works li{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 3px 12px rgba(62,58,57,.06);transition:transform .22s,box-shadow .22s}
.works li:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(62,58,57,.12)}
.works img{width:100%;height:150px;object-fit:cover;object-position:top center;display:block;border-bottom:1px solid var(--line)}
.works .t{padding:16px 18px 18px}
.works h4{font-size:16px;color:var(--head);margin-bottom:7px;line-height:1.6}
.works p{font-size:14px;color:#5c5754;line-height:1.8}
.sched{margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:start;box-shadow:0 4px 14px rgba(62,58,57,.06)}
.sched figure{margin:0;border-radius:16px;overflow:hidden}
.sched figure img{width:100%;height:auto;display:block}
.sched h3,.sched h4{font-size:20px;color:var(--head);margin:6px 0 10px}
.sched>div>p{font-size:16px;color:#5c5754;line-height:1.85;margin-bottom:18px}
.themes{list-style:none;padding:0;margin:0}
.themes li{display:flex;gap:14px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.7}
.themes li:first-child{border-top:0}
.themes .d{font-family:'Outfit',sans-serif;font-weight:700;color:var(--blue-d);min-width:98px;display:flex;gap:8px;align-items:center}
.themes .d i{font-family:var(--pl-font);font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#EAF5FC;color:var(--blue-d)}
.themes li.done .d i{background:#EFEAE2;color:#7a736c}
.note{font-size:13px;color:#7a736c;margin-top:14px}

/* 相談（CTA） */
.cta-sec{background:var(--blue-d);color:#fff;position:relative;padding:20px 0 74px}
.cta-sec h2{color:#fff;font-size:clamp(26px,3vw,38px);margin:10px 0 16px}
/* 紺の上ではマーカーが濁るので、文字色をアンバーにする（#F4B978 on #15547C は約5.6:1） */
.cta-sec .hl{background-image:none;color:#F4B978}
.cta-sec>.wrap>p{font-size:16px;line-height:2;color:#DCEAF3}
.person{display:flex;gap:22px;align-items:flex-start;margin:32px 0 34px;max-width:760px}
.person img{width:112px;height:140px;object-fit:cover;border-radius:16px;flex-shrink:0}
.person p{font-size:16px;line-height:1.95;color:#DCEAF3;margin-bottom:12px}
.person .nm{font-weight:700;color:#fff;font-size:16px}
.person .nm span{display:block;font-weight:400;font-size:13px;color:#BFD8E6;margin-top:3px}
.person a{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:15px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.55);padding:12px 0 3px;margin-top:0}
.cta-actions{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.cta-phone{display:flex;flex-direction:column;line-height:1.35}
.cta-phone a{font-family:'Outfit',sans-serif;font-weight:700;font-size:30px;color:#fff;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.cta-phone span{font-size:12.5px;color:#BFD8E6}

@media(max-width:760px){.sched{grid-template-columns:1fr}.foot{grid-template-columns:1fr}.person{flex-direction:column}.cta-actions{gap:20px}}

/* ===== ヘッダー（2026-09-18 改）=====
   参考5サイトに合わせ、メニューを白い丸みのある帯（カプセル）に入れて浮かせる。
   スクロールしても上に残り、背景は生成りを透かしてぼかす。 */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;
  padding:14px max(24px,calc((100% - 1280px)/2));
  background:transparent;transition:background .25s,box-shadow .25s,backdrop-filter .25s}
/* 先頭では透明にして、ヒーローの円をヘッダーの裏まで続かせる。
   スクロールしたときだけ下地を出す（濃い面の上で文字が読めなくなるため）。 */
.site-header.is-stuck{background:rgba(253,251,247,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 18px rgba(21,84,124,.10)}
.brand-lockup{display:flex;align-items:center;gap:14px}
.site-header .brand{display:flex;align-items:center;min-height:44px}
.site-header .brand img{height:46px;display:block}
.site-header .company{font-size:16px;font-weight:700;color:var(--head);line-height:1.35;letter-spacing:.01em}
.site-header .company span{display:block;font-size:10.5px;font-weight:600;color:var(--blue-d);letter-spacing:.02em}
.nav-pill{margin-left:auto;display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:5px 6px 5px 14px;box-shadow:0 4px 16px rgba(21,84,124,.08)}
.nav-pill nav{display:flex;align-items:center;gap:2px}
.nav-pill nav a{color:var(--head);text-decoration:none;font-size:14px;font-weight:700;padding:9px 14px;border-radius:999px;transition:background .2s,color .2s}
.nav-pill nav a:hover{background:#EAF5FC;color:var(--blue-d)}
.site-header .contact-link{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--act);color:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 5px 14px rgba(204,68,9,.26);transition:transform .2s,box-shadow .2s}
.site-header .contact-link:hover{color:#fff;transform:translateY(-2px);box-shadow:0 9px 20px rgba(204,68,9,.34)}
.header-phone{display:flex;flex-direction:column;line-height:1.3}
.header-phone a{display:flex;align-items:center;gap:7px;font-family:'Outfit',sans-serif;font-weight:700;font-size:21px;color:var(--blue-d);text-decoration:none}
.header-phone span{font-size:11px;color:var(--ink2);padding-left:27px}
/* ===== サービスのプルダウン（2026-09-21 追加）=====
   サービスが4本になり、トップレベルに並べると項目が7つになって幅に入らない。
   サービスだけ一段下げる。マウスを乗せない人にも開けるよう、押しても開くようにする。 */
.nav-item{position:relative}
.nav-pill nav>a,.nav-pill nav .nav-btn{position:relative}
.nav-pill nav .nav-btn{font:inherit;font-size:14px;font-weight:700;color:var(--head);
  border:0;background:none;cursor:pointer;padding:9px 12px 9px 14px;border-radius:999px;
  display:inline-flex;align-items:center;gap:7px;transition:background .2s,color .2s}
.nav-pill nav .nav-btn:hover,.nav-pill nav .nav-btn[aria-expanded="true"]{background:#EAF5FC;color:var(--blue-d)}
.nav-btn .caret{width:11px;height:8px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}
.nav-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav-sub{position:absolute;top:calc(100% + 14px);left:50%;z-index:60;
  min-width:234px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px;
  box-shadow:0 16px 36px rgba(21,84,124,.17);display:flex;flex-direction:column;
  opacity:0;transform:translateX(-50%) translateY(-7px);transition:opacity .18s,transform .18s}
.nav-sub.is-open{opacity:1;transform:translateX(-50%)}
.nav-sub::before{content:"";position:absolute;top:-7px;left:50%;margin-left:-6px;width:12px;height:12px;
  background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.nav-sub a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;
  font-size:14px;font-weight:700;color:var(--head);text-decoration:none;white-space:nowrap}
.nav-sub a:hover{background:#EAF5FC;color:var(--blue-d)}

/* いま開いているページ。文字色と、下のアンバーの線で示す。 */
.nav-pill nav>a[aria-current="page"],.nav-pill nav .nav-btn.is-current{color:var(--blue-d)}
.nav-pill nav>a[aria-current="page"]::after,.nav-pill nav .nav-btn.is-current::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2.5px;border-radius:2px;background:var(--amber)}
.nav-sub a[aria-current="page"]{background:#EAF5FC;color:var(--blue-d)}
.nav-sub a[aria-current="page"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);margin-left:auto;flex-shrink:0}
/* お問い合わせは朱色のボタンなので下線が引けない。内側に白い輪郭を出して現在地を示す。 */
.site-header .contact-link[aria-current="page"]{box-shadow:0 5px 14px rgba(204,68,9,.26),inset 0 0 0 2px rgba(255,255,255,.6)}

/* ===== 下層ページのヘッダー（2026-09-21 追加）=====
   トップは先頭で透明にしてヒーローの円を透かす。下層は開いた時点から白い帯を出し、
   下に線を1本引く。トップと下層の区別を、ヘッダーの振る舞いの差で示す。 */
.site-header.sub{margin-bottom:0;padding-top:10px;padding-bottom:10px;
  background:rgba(253,251,247,.93);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.site-header.sub.is-stuck{box-shadow:0 2px 18px rgba(21,84,124,.10)}
.site-header.sub .brand{display:flex;align-items:center;min-height:44px}
.site-header.sub .brand img{height:40px}
/* 帯が独立したので、下の面をヘッダーの裏まで伸ばす必要がなくなった。 */
.page-top.sub{padding-top:0}
/* 光の円はトップより静かにする。下層は本文を読みに来た人が見るため。 */
.page-top.sub .arc1{width:600px;height:600px;left:-260px;top:-230px}
.page-top.sub .arc2{display:none}

.ico{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ===== フッター（2026-09-18 改）===== */
.site-footer{background:var(--cream2);padding:0 0 26px;position:relative}
.site-footer .wave.top{position:relative;bottom:auto;line-height:0}
.site-footer .wave.top svg{width:100%;height:110px;display:block}
.foot{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:36px;
  max-width:1160px;margin:auto;padding:22px 32px 34px}
.foot .logo{width:132px;margin-bottom:18px}
.foot .cname{font-family:var(--pl-font-heading);font-weight:700;font-size:15px;color:var(--head);margin-bottom:12px}
.foot .line{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:#5c5754;line-height:1.75;margin-bottom:8px}
.foot .line .ico{color:var(--blue-d);margin-top:3px}
.foot .line .tel{display:inline-flex;align-items:center;gap:9px;min-height:44px}
.foot .line .tel .ico{margin-top:0}
.foot .tel{display:flex;align-items:center;gap:9px;font-family:'Outfit',sans-serif;font-weight:700;font-size:22px;color:var(--blue-d);text-decoration:none;white-space:nowrap}
.foot h3,.foot h4{font-size:13px;color:var(--blue-d);margin-bottom:10px;letter-spacing:.04em;padding-bottom:9px;border-bottom:1px solid var(--line)}
.foot nav{display:flex;flex-direction:column}
.foot nav a{font-size:13.5px;color:#5c5754;text-decoration:none;min-height:44px;display:flex;align-items:center;gap:8px;transition:color .2s,padding-left .2s}
.foot nav a:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--line);flex-shrink:0;transition:background .2s}
.foot nav a:hover{color:var(--blue-d);padding-left:4px}
.foot nav a:hover:before{background:var(--amber)}
.foot nav a.sub{margin-left:14px;font-size:12.5px;color:#7a736c}
.foot nav a.sub:before{width:10px;height:1px;border-radius:0}
.foot-spot{position:absolute;right:18px;bottom:6px;width:92px;height:auto;opacity:.9;pointer-events:none}
.foot-bottom{max-width:1160px;margin:auto;padding:16px 32px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-bottom .copy{font-family:'Outfit',sans-serif;font-size:12.5px;color:var(--ink2);letter-spacing:.04em}
.foot-bottom .totop{display:inline-flex;align-items:center;min-height:44px;gap:8px;font-size:13px;font-weight:700;color:var(--blue-d);text-decoration:none;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:#fff;transition:transform .2s,box-shadow .2s}
.foot-bottom .totop:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(21,84,124,.12)}

/* ===== 画面が狭いときのヘッダー（2026-09-18 作り直し）=====
   1080px以下：メニューを2段にする。
   860px以下：ヘッダーとヒーローを切り離し、ヘッダーは動かさない。
   広い画面での一体感（円がヘッダーの裏まで続く）は、狭い画面ではやらない。 */
@media(max-width:1180px){
  .nav-pill nav a{padding:9px 11px;font-size:13.5px}
  .site-header .contact-link{padding:0 16px}
  .header-phone a{font-size:19px}
}
@media(max-width:1080px){
  .site-header{flex-wrap:wrap;row-gap:10px;padding:12px 20px}
  .site-header .brand img{height:40px}
  .site-header .company{font-size:15px}
  .header-phone{margin-left:auto;align-items:flex-end}
  .nav-pill{order:3;width:100%;margin-left:0;padding:5px 6px;justify-content:space-between}
  .nav-pill nav{flex:1;justify-content:space-around}
}
@media(max-width:620px){
  .site-header{gap:10px;padding:12px 18px}
  .site-header .brand img{height:36px}
  .site-header .company{font-size:13.5px}
  .header-phone a{font-size:18px;gap:5px}
  .header-phone a .ico{width:15px;height:15px}
  .header-phone span{font-size:10.5px;padding-left:0;text-align:right}
  .nav-pill{gap:6px;padding:5px}
  .nav-pill nav{gap:0}
  .nav-pill nav a{padding:9px 6px;font-size:12.5px;white-space:nowrap}
  .site-header .contact-link{padding:0 13px;font-size:12.5px;white-space:nowrap;flex-shrink:0}
}

/* ===== 狭い画面の細かい調整（2026-09-18）===== */
@media(max-width:430px){
  .site-header{padding:11px 18px;gap:10px}
  .site-header .brand img{height:32px}
  .site-header .company{font-size:12.5px}
  .brand-lockup{gap:10px}
  .header-phone a{font-size:16px}
  .header-phone span{font-size:10px}
  .nav-pill nav a{padding:9px 5px;font-size:12px}
  .site-header .contact-link{padding:0 11px;font-size:12px}
}
/* 見出しの3行目は、狭い画面では2行に分ける。
   入れ子の span を block にするとマーカーが崩れるので、br の表示切り替えで行う。 */
.sp-br{display:none}
@media(max-width:860px){.sp-br{display:inline}}

/* 波は preserveAspectRatio:none で横に潰れるため、幅が狭いほど急な曲線になる。
   同じなだらかさに見えるよう、幅に比例して高さを下げる。 */
@media(max-width:1080px){.wave svg{height:130px}.wave.deep svg{height:145px}.q .wave svg{height:138px}.site-footer .wave.top svg{height:84px}}
@media(max-width:860px){.wave svg{height:96px}.wave.deep svg{height:104px}.q .wave svg{height:100px}.site-footer .wave.top svg{height:62px}}
@media(max-width:620px){.wave svg{height:62px}.wave.deep svg{height:68px}.q .wave svg{height:66px}.site-footer .wave.top svg{height:42px}}
/* 波の高さを下げたぶん、節の下の余白も詰める */
@media(max-width:860px){.hero{padding-bottom:150px}.q{padding-bottom:140px}.benefit{padding-bottom:140px}.serv{padding-bottom:140px}.flow-sec{padding-bottom:140px}.trust{padding-bottom:140px}}
@media(max-width:620px){.hero{padding-bottom:110px}.q{padding-bottom:104px}.benefit{padding-bottom:104px}.serv{padding-bottom:104px}.flow-sec{padding-bottom:104px}.trust{padding-bottom:104px}}
@media(max-width:380px){
  .site-header{padding:10px 16px;gap:8px}
  .site-header .brand img{height:28px}
  .site-header .company{font-size:12px}
  .brand-lockup{gap:8px}
  .header-phone a{font-size:15px}
  .nav-pill nav a{padding:9px 4px;font-size:11.5px}
  .site-header .contact-link{padding:0 10px;font-size:11.5px}
  .wrap{padding-left:18px;padding-right:18px}
}
/* 340px以下では社名の文字を省く。ロゴが社名を兼ねる。 */
@media(max-width:340px){
  .site-header .company{display:none}
  .nav-pill nav a{padding:9px 3px;font-size:11px}
  .site-header .contact-link{padding:0 9px;font-size:11px}
}
/* 狭い画面では太陽が画面の外へ出て横スクロールの原因になるので、内側へ寄せる */
@media(max-width:620px){.hero-pic .sun{right:2px;top:-14px;width:56px;height:56px}}

/* ===== 狭い画面：フッターと見出しの折り返し（2026-09-18）===== */
@media(max-width:760px){
  /* 3列のままだと1列あたり100px程度になり、電話番号まで折り返していた */
  .foot{grid-template-columns:1fr;gap:26px;padding:18px 20px 28px}
  .foot .tel{font-size:24px;white-space:nowrap}
  .foot .line{font-size:14px}
  .foot-spot{display:none}
  .foot-bottom{padding:16px 20px 0}
  .site-footer{padding-bottom:22px}
  .cta-actions{gap:18px}
  .person{gap:16px}
}
@media(max-width:620px){
  /* 見出しが「〜ま／す。」のように末尾1〜2文字で折り返していたので、少し小さくする */
  .jp{font-size:21px;line-height:1.5}
  .big{font-size:52px}
  .sc h3{font-size:18px;line-height:1.55}
  .sc h3 br{display:none}
  .training h3{font-size:18px;line-height:1.55}
  .training h3 br{display:none}
  .qc h3{font-size:18px;padding-right:44px}
  .qc h3 br{display:none}
  .step h3{font-size:18px}
  .benefit-close{font-size:17px}
  .q .answer{font-size:18px}
  .works h4{font-size:15.5px}
  .cta-sec h2{font-size:26px}
  .cta-phone a{font-size:26px}
}
/* ボタンの文言が長く2行になるとき、矢印が右端に離れて読みにくいので詰める */
@media(max-width:1000px){
  .more{justify-content:center;gap:12px;text-align:left}
  .more span{flex-shrink:0}
}
/* 狭い画面ではボタンの文言が2行になっていたので、少し小さくして1行に収める */
@media(max-width:700px){.more{font-size:15px;padding:13px 18px;gap:10px}}
@media(max-width:400px){.more{font-size:14.5px;padding:13px 14px}}

/* ===== 狭い画面のヘッダー（2026-09-18 作り直し）=====
   帯をやめ、ロゴの板と丸いボタンをヒーローの上に浮かせる。
   参考：レイクサイド動物病院のスマホ表示。帯で画面の上を122px使っていたのをやめる。 */
.sp-actions{display:none}
.sp-menu{display:none}
@media(max-width:860px){
  :root{--header-h:0px}
  .site-header{position:absolute;top:0;left:0;right:0;z-index:60;display:block;
    margin-bottom:0;padding:0;background:transparent;box-shadow:none}
  .site-header.is-stuck{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .page-top{padding-top:0}
  .hero{padding-top:104px}
  /* ヘッダーが absolute で浮いているぶん、帯が自分で上の余白を取る。
     帯があるときは、その下のヒーローの余白を詰める。 */
  /* ロゴの白い板が66px。その下に少しだけ空けて帯を置く。 */
  .notice{margin-top:66px}
  .notice+.hero{padding-top:18px}
  .notice>.wrap{flex-direction:column;align-items:flex-start;gap:8px;padding-top:12px;padding-bottom:12px}
  /* 日付を本文と同じ行から流す。縦に積むと1件3行になり、見出しが画面の下へ押し出される。 */
  .notice li{display:block;font-size:14px;line-height:1.75}
  .notice time{display:inline;margin-right:9px}

  /* ロゴは白い板に載せ、左上に寄せる（右下だけ丸める） */
  .brand-lockup{position:absolute;top:0;left:0;display:flex;align-items:center;gap:10px;
    background:#fff;border-radius:0 0 22px 0;padding:12px 20px 12px 18px;
    box-shadow:0 4px 18px rgba(21,84,124,.10)}
  .site-header .brand img{height:34px}
  .site-header .company{font-size:12.5px}

  .nav-pill{display:none}
  .header-phone{display:none}

  .sp-actions{display:flex;position:absolute;top:14px;right:14px;gap:10px;align-items:center}
  .circle-btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    border:0;cursor:pointer;box-shadow:0 5px 16px rgba(21,84,124,.22);transition:transform .2s,box-shadow .2s}
  .circle-btn:hover{transform:translateY(-2px)}
  .circle-btn.tel{background:#fff;color:var(--blue-d);text-decoration:none}
  .circle-btn.tel svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .circle-btn.menu{background:var(--blue-d);flex-direction:column;gap:5px;padding:0}
  .circle-btn.menu span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .22s,opacity .18s}
  .circle-btn.menu.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .circle-btn.menu.is-open span:nth-child(2){opacity:0}
  .circle-btn.menu.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .sp-menu{display:block;position:absolute;top:78px;right:14px;left:14px;z-index:59;
    background:#fff;border:1px solid var(--line);border-radius:22px;padding:14px;
    box-shadow:0 18px 44px rgba(21,84,124,.18);
    opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s}
  .sp-menu.is-open{opacity:1;transform:none}
  .sp-menu nav{display:flex;flex-direction:column}
  .sp-menu nav a{display:flex;align-items:center;min-height:52px;padding:0 10px;font-size:15.5px;font-weight:700;
    color:var(--head);text-decoration:none;border-bottom:1px solid var(--line)}
  .sp-menu nav a:hover{color:var(--blue-d)}
  .sp-menu .sp-cta{width:100%;justify-content:space-between;margin-top:14px}
  .sp-menu .sp-tel{display:flex;flex-direction:column;align-items:center;margin-top:14px;padding:10px 0 4px;
    font-family:'Outfit',sans-serif;font-weight:700;font-size:26px;color:var(--blue-d);text-decoration:none}
  .sp-menu .sp-tel span{font-family:var(--pl-font);font-weight:400;font-size:11.5px;color:var(--ink2);margin-top:2px}
  .page-top .arc1{width:560px;height:560px;left:-220px;top:-190px}
  .page-top .arc2{width:380px;height:380px;right:-130px;top:-120px}

  /* 下層でも、狭い画面はロゴの板と丸ボタンを浮かせる形のまま。白い帯にすると
     画面の上を取られるため、広い画面の帯はここで打ち消す。 */
  .site-header.sub{position:absolute;padding:0;background:transparent;
    -webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;box-shadow:none}
  .site-header.sub.is-stuck{box-shadow:none}
  .site-header.sub .brand img{height:34px}

  /* 項目が7つになったので、1行の高さを少し下げ、画面から出るときは中でスクロールさせる。 */
  .sp-menu{max-height:calc(100vh - 96px);overflow-y:auto}
  .sp-menu nav a{min-height:48px}
  .sp-menu nav a:last-child{border-bottom:0}
  .sp-menu .sp-group{margin:16px 0 2px;padding:0 10px;font-size:12px;font-weight:700;
    color:var(--ink2);letter-spacing:.05em}
  .sp-menu nav>.sp-group:first-child{margin-top:2px}
  .sp-menu nav a[aria-current="page"]{color:var(--blue-d)}
  .sp-menu nav a[aria-current="page"]::after{content:"";width:6px;height:6px;border-radius:50%;
    background:var(--amber);margin-left:10px;flex-shrink:0}
}
@media(max-width:430px){
  .brand-lockup{padding:11px 16px 11px 14px;gap:8px}
  .site-header .brand img{height:30px}
  .site-header .company{font-size:11.5px}
  .sp-actions{top:12px;right:12px;gap:8px}
  .circle-btn{width:48px;height:48px}
  .sp-menu{top:70px;left:12px;right:12px}
  .hero{padding-top:92px}
}
/* 幅が狭いと青とオレンジの円が横に重なり、混ざって濁った色になる。
   下へ移すとイラストの下の青い板（半透明）に透けて、そこでも混ざる。
   狭い画面に2つ置く余地がないので、オレンジは出さない。
   暖色はイラストの太陽とCTAボタンが担う。 */
@media(max-width:660px){
  .page-top .arc1{width:520px;height:520px;left:-210px;top:-180px}
  .page-top .arc2{display:none}
}
/* 代表紹介から、自社での使い方へ送る小さなリンク（紺の面の中） */
.person .more-inline{display:inline-flex;align-items:center;min-height:44px;gap:8px;margin-top:2px;
  font-size:14.5px;font-weight:700;color:#BFE3F5;text-decoration:none;
  border-bottom:1px solid rgba(191,227,245,.5)}
.person .more-inline:hover{color:#fff;border-bottom-color:#fff}