/* =========================================================
   renewal.css — 全ページ共通のトンマナ（TOP改修に合わせた土台）
   読み込み順：main.css・各ページの \3c style> の「後」に置く
   ---------------------------------------------------------
   1. デザイントークン（tokens.css へ移した）
   2. ヘッダー（ロゴ＋タグライン）・旧デザインの透かし
   3. 共通コンポーネント（r-*）：ページ見出し／セクション／見出し／ボタン／リンク／カード／CTA帯
   ページ固有の上書きは assets/css/renewal/*.css に置く
   ========================================================= */

/* ---------- 1. デザイントークン ---------- */
/* 値はすべて tokens.css（SiteHead で最初に読み込む） */
/* 字間はすべての要素で 4%（em は親から px で引き継がれるため、要素ごとに指定し直す） */
:where(*,*::before,*::after){letter-spacing:var(--tracking)}
/* ページ内リンク（目次など）は滑らかにスクロールする。「視差効果を減らす」設定では a11y.css が瞬間移動に戻す */
html{scroll-behavior:smooth}

/* ---------- 2. ヘッダー・透かし ---------- */
/* ページ上部では大きいロゴ＋タグライン、スクロール後（is--fixed）は小さく。
   960〜1023px はメニューが折り返すので、ページ上部でも SP と同じ小さいロゴ（タグラインなし）にする */
.l-header__tagline{display:none}
@media(min-width:1024px){
  .l-header:not(.is--fixed) .l-header__logo a{flex-direction:column;align-items:stretch;gap:7px;width:188px;transition:width .3s var(--ease)}
  .l-header:not(.is--fixed) .l-header__tagline{display:block;font-size:var(--fs-11);font-weight:var(--fw-bold);line-height:1;color:var(--color-text);
    text-align:justify;text-align-last:justify;text-justify:inter-character;letter-spacing:var(--tracking);white-space:nowrap}
}
@media(min-width:1160px){
  .l-header:not(.is--fixed) .l-header__logo a{width:204px}
  .l-header:not(.is--fixed) .l-header__tagline{font-size:var(--fs-12)}
}
/* 全ページのコンテンツ幅をTOPと同じ 1280px（左右40pxの余白込み＝本文1200px）にそろえる */
@media(min-width:960px){
  .l-container,.l-header__inner{max-width:1280px}
  .l-header__inner{padding-left:40px;padding-right:40px}
  .l-bottomCta__container{max-width:1200px}
}
/* 装飾SVGなどによる横スクロールの保険（clip はスクロール領域を作らないので sticky を壊さない） */
.l-layout{overflow-x:clip}
/* 旧デザインの「MO」透かしは使わない */
.l-layout__topBg{display:none!important}

/* ---------- 3. 共通コンポーネント ---------- */
/* 3-1 下層ページの見出し（パンくず → 英字ラベル → 日本語見出し → リード） */
/* hero の上下：PC 48／80px、959px 以下 32／64px。全ページ共通（ページの CSS で上書きしない） */
.r-pageHead{padding:48px 0 80px;background:var(--color-bg);color:var(--color-text)}
.r-pageHead__label{margin:0 0 14px}
.r-pageHead__title{margin:0;font-family:var(--font-copy);font-size:var(--fs-display-1);font-weight:var(--fw-bold);line-height:1.3;letter-spacing:var(--tracking)}
.r-pageHead__lead{margin:22px 0 0;font-size:var(--fs-14);line-height:2.05;color:var(--color-text)}
@media(max-width:959px){.r-pageHead{padding:32px 0 64px}}
/* 例外：すぐ下にページ内のリンクの帯（.c-anchorNav。サービストップ・サービス領域・実績一覧）があるときは、下を PC 64px・959px 以下 48px */
.r-pageHead:has(+ .c-anchorNav){padding-bottom:64px}
@media(max-width:959px){.r-pageHead:has(+ .c-anchorNav){padding-bottom:48px}}
@media(max-width:599px){.r-pageHead__lead br{display:none}}

/* 3-2 セクション（白とグレーの交互で区切る） */
.r-sec{padding:80px 0 88px;background:var(--color-bg);color:var(--color-text)}
.r-sec.is--gray{background:var(--color-bg-subtle)}
.r-sec.is--dark{background:var(--color-bg-dark);color:var(--color-text-on-dark);border-radius:var(--r-card);margin:0 16px}
@media(max-width:767px){.r-sec{padding:64px 0 72px}}
/* SP：外の余白は、ほかのセクションの左右（.l-container の 24px）にそろえる */
@media(max-width:959px){.r-sec.is--dark{margin:0 24px}}

/* 3-3 セクション見出し（「01 Label」＋見出し＋リード） */
.r-head{margin:0 0 40px}
.r-head__label{margin:0 0 12px;display:flex;gap:14px;align-items:baseline}
.r-head__title{margin:0;font-family:var(--font-copy);font-size:var(--fs-display-2);font-weight:var(--fw-bold);line-height:1.25;letter-spacing:var(--tracking)}
.r-head__lead{max-width:820px;margin:18px 0 0;font-size:var(--fs-14);line-height:2.05;color:var(--color-text)}
.r-sec.is--dark .r-head__lead{color:var(--color-text-on-dark)}
@media(max-width:767px){.r-head{margin-bottom:32px}.r-head__lead{margin-top:16px}}

/* 3-4 小見出し（セクション内のブロック見出し） */

/* 3-5 ボタン（黒い角丸＋矢印線）とテキストリンク（枠線の角丸） */
/* セクションの最後の「〜を見る」ボタン（実績・事例をもっと見る・メンバー一覧を見る など）は中央。トップは .p-homeMore（同じ見た目） */
.r-more{margin:32px 0 0;text-align:center}
/* 共通の矢印（ページ移動の印）：<i class="c-arrow" aria-hidden="true"></i>
   入れ物の幅は伸びたあとの長さで固定し、中の線だけを左へ伸ばす（ボタンの大きさは変わらない）。色は文字色 */
.c-arrow{position:relative;display:inline-block;flex:none;width:32px;height:1px}
.c-arrow::before{content:"";position:absolute;right:0;top:0;width:22px;height:1px;background:currentColor;transition:width .35s var(--ease)}
.c-arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
/* ホバーで伸びる：矢印を含むリンク。リンクを重ねたカード（矢印がリンクの外にあるもの）はここに足す */
a:hover .c-arrow::before,a:focus-visible .c-arrow::before,
button:not(:disabled):hover .c-arrow::before,
.l-bottomCta__item:hover .c-arrow::before,
.p-topProjects__contentInner:hover .c-arrow::before,
.c-mediaItem:hover .c-arrow::before,
.p-contactThanks__cta:hover .c-arrow::before{width:100%}
.c-arrow.is--s{width:20px}
.c-arrow.is--s::before{width:13px}
.c-arrow.is--s::after{top:-2.5px;width:6px;height:6px}
/* 戻るリンク：左向き */
.c-arrow.is--back{transform:scaleX(-1)}
/* ページ内の下のセクションへのリンク：下向き */
.c-arrow.is--down{transform:rotate(90deg)}
/* 実績（企業情報のステートメント）の「詳細を見る」 */
.c-arrowLink{display:inline-flex;align-items:center;gap:8px;padding:7px 12px}
.c-arrowLink::before{content:none}
/* アイコンつきボタン（記事の著者カード・サイドバーの相談／資料）：ホバーは色がスライドせず、フェードで切り替える */
/* 記事本文のボタン：背景がスライドする演出をやめてフェードに。矢印は body.ts が入れる .c-arrow */
/* 記事カード：矢印は記事ページ下の「関連する記事」だけに出す（一覧のカードには出さない） */
.c-mediaItem::after{content:none}
.c-mediaItem__arrow{display:none}
/* カードの枠線が横からスライドして濃くなる演出は、フェードに置き換える（関連する実績・記事カード・ステートメントの実績） */
.c-overlayBorderLink::before,.c-overlayBorderLink::after,.p-topProjects__main::before,.p-topProjects__main::after{transform:none;opacity:0;transition:opacity .35s var(--ease)}
.c-overlayBorderLink:hover::before,.c-overlayBorderLink:hover::after,.p-topProjects__contentInner:hover .p-topProjects__main::before,.p-topProjects__contentInner:hover .p-topProjects__main::after,.p-topProjects__itemHead:hover ~ .p-topProjects__content .p-topProjects__main::before,.p-topProjects__itemHead:hover ~ .p-topProjects__content .p-topProjects__main::after,.p-topProjects__images:hover ~ .p-topProjects__content .p-topProjects__main::before,.p-topProjects__images:hover ~ .p-topProjects__content .p-topProjects__main::after{transform:none;opacity:1}
/* 記事本文に埋め込んだ実績カード（旧サイトの HTML ブロック）：矢印なし（body.ts で消す）・画像は角丸なし（記事本文の画像の角丸 16px を打ち消す）。矢印のために空けていた右の余白も詰める */
.p-new_service__inner .client-thumb img{border-radius:0}
.p-new_service__inner .client-text{padding-right:24px}
/* 著者カード・シェアボタンの角丸（実績ページと記事ページで共通。記事ページは case.css を読み込まないため、ここに置く） */
.p-mediaAuthor{overflow:hidden;border-radius:var(--r-card)}
.p-mediaAuthor__image{overflow:hidden;border-radius:var(--r-inner)}
@media(prefers-reduced-motion:reduce){.c-arrow::before{transition:none}}
/* アコーディオンの開閉の印（サイト共通：＋／−）：<span class="c-accIcon" aria-hidden="true"></span> を開閉ボタンの右端に置く。
   開いているとき（aria-expanded="true" のボタン・open の details）は − になる */
.c-accIcon{position:relative;flex:none;display:inline-block;width:14px;height:14px;color:var(--color-text)}
.c-accIcon::before,.c-accIcon::after{content:"";position:absolute;left:0;top:6px;width:100%;height:2px;background:currentColor;transition:transform .3s var(--ease)}
.c-accIcon::after{transform:rotate(90deg)}
[aria-expanded="true"] > .c-accIcon::after,details[open] > summary > .c-accIcon::after{transform:rotate(0)}
details.is--closing > summary > .c-accIcon::after{transform:rotate(90deg)}  /* 閉じる動きのあいだは先に ＋ に戻す（site.ts の initDetails） */
/* 置き場所：アコーディオン（.c-acc。components.css）・採用の募集職種（recruit.css）・ドロワー（header.css） */

/* 3-6 カード（枠線なし・角丸の面） */
.r-card{padding:28px 28px 26px;background:var(--color-bg);border-radius:var(--r-card);color:var(--color-text)}
.r-sec:not(.is--gray) .r-card{background:var(--color-bg-subtle)}

/* 3-7 CTA帯（黒い角丸の帯。各ページの最後に置く） */

/* 3-8 数字 */
.r-num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking)}

/* ---------- 4. 総点検での底上げ（対象外ページ含む） ---------- */

/* ---------- 5. 横幅1200pxの徹底 ---------- */
/* 黒い角丸セクションも1200pxの箱に収める（中身は左右40pxの余白で1120px） */
@media(min-width:1232px){
  .p-homeSec.is--dark,.r-sec.is--dark{max-width:1200px;margin-left:auto;margin-right:auto}
}

/* ---------- 6. ページ下部CTA（相談しやすい理由） ---------- */
/* 上は直前のセクションの下の余白だけ（ふつうの .r-sec なら PC 88px・SP 72px）。下はカードから下の帯（.l-bottomCta）まで PC 80px・959px 以下 64px */
.r-closingSec{padding:0 0 80px;background:var(--color-bg)}
@media(max-width:959px){.r-closingSec{padding-bottom:64px}}
/* main の中に置いたページ（トップ・404）は、main の下の余白（main.css の 120px）を足さない */
.l-layout__content:has(> .r-closingSec){padding-bottom:0}
/* 直前のセクションの下の余白が 0 のとき（<ClosingCta spaced />）：カードの上は hero の下と同じ PC 80px・959px 以下 64px */
.r-closingSec.is--spaced{padding-top:80px}
@media(max-width:959px){.r-closingSec.is--spaced{padding-top:64px}}
.r-closing{position:relative;display:grid;grid-template-columns:var(--cols-1-1);gap:var(--gap-cols);padding:64px 64px 60px;overflow:hidden;
  background:var(--color-bg-dark);border-radius:var(--r-card);color:var(--color-text-on-dark);isolation:isolate}
.r-closing::before{content:"";position:absolute;z-index:-1;right:-160px;bottom:-220px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,var(--color-bg-on-dark) 0%,transparent 70%)}
.r-closing__label{margin:0 0 20px;display:flex;align-items:baseline;gap:12px;font-size:var(--fs-13);font-weight:var(--fw-regular);color:var(--color-text-on-dark)}
.r-closing__title{margin:0;font-family:var(--font-copy);font-size:var(--fs-display-2);font-weight:var(--fw-bold);line-height:1.3;letter-spacing:var(--tracking)}
.r-closing__lead{margin:22px 0 0;font-size:var(--fs-14);line-height:2;color:var(--color-text-on-dark)}
.r-closing__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.r-closing__btns .c-btn{width:220px}
.r-closing__note{margin:18px 0 0;font-size:var(--fs-13);line-height:1.8;color:var(--color-text-on-dark)}
.r-closing__list{margin:0;padding:0;list-style:none;counter-reset:none;align-self:center}
.r-closing__list li{padding:26px 0;border-top:1px solid var(--color-line-on-dark)}
.r-closing__list li:first-child{padding-top:0;border-top:0}
.r-closing__list li:last-child{padding-bottom:0}
.r-closing__num{margin:0;display:flex;align-items:baseline;gap:12px;font-family:var(--font-num);font-size:var(--fs-13);font-weight:var(--fw-bold);letter-spacing:var(--tracking);color:var(--color-text-on-dark)}
.r-closing__num span{font-family:var(--font-copy);font-size:var(--fs-13);font-weight:var(--fw-regular);letter-spacing:var(--tracking);color:var(--color-text-on-dark)}
.r-closing__catch{margin:10px 0 0;font-family:var(--font-copy);font-size:var(--fs-contact-h3);font-weight:var(--fw-bold);line-height:1.5;letter-spacing:var(--tracking)}
.r-closing__text{margin:8px 0 0;font-size:var(--fs-14);line-height:1.85;color:var(--color-text-on-dark)}
@media(max-width:999px){
  .r-closing{grid-template-columns:1fr;padding:48px 40px}
}
@media(max-width:599px){
  .r-closing{padding:40px 24px;border-radius:var(--r-card)}
  .r-closing__lead br{display:none}
  .r-closing__btns{flex-direction:column}
  .r-closing__btns .c-btn{width:100%}
}

/* ---------- 7. 説明テキスト（リード文）は基本17px ---------- */
.p-homeHead__lead,.r-head__lead,.r-pageHead__lead,.r-closing__lead{font-size:var(--fs-18);line-height:1.9}
.p-homeHead__lead,.r-head__lead{max-width:920px}
/* hero の説明文（.r-pageHead__lead）は固定幅にしない。PC は <br class="u-br"> で文の切れ目で改行する */
@media(max-width:599px){
  .p-homeHead__lead,.r-head__lead,.r-pageHead__lead,.r-closing__lead{font-size:var(--fs-16);line-height:1.85}
}

/* ---------- 8. 領域の見出し（アイコン＋一言＋領域名）：TOPのサービスと共通 ---------- */
.r-areaHead{display:flex;align-items:center;gap:18px}
.r-areaHead__icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:var(--r-inner);background:var(--color-bg-subtle);color:var(--color-text)}
.r-sec.is--gray .r-areaHead__icon{background:var(--color-bg)}
.r-areaHead__icon svg{width:30px;height:30px}
.r-areaHead__need{margin:0 0 6px;font-family:var(--font-copy);font-size:var(--fs-18);font-weight:var(--fw-bold);line-height:1.5;color:var(--color-text)}
.r-areaHead .p-svc__areaName{margin:0;padding-top:0;border-top:0;font-family:var(--font-copy);font-size:var(--fs-heading-3)}
@media(max-width:599px){.r-areaHead__icon{width:52px;height:52px}.r-areaHead__icon svg{width:26px;height:26px}.r-areaHead{gap:14px}}

/* ---------- 9. 実績の数字パネル（TOPの「03 実績」と共通） ---------- */
.r-proof{display:grid;grid-template-columns:var(--cols-1-2);gap:var(--gap-card);align-items:stretch}
.r-proof__panel{position:relative;display:flex;flex-direction:column;padding:30px 36px 26px;overflow:hidden;background:var(--color-bg-dark);border-radius:var(--r-card);color:var(--color-text-on-dark);isolation:isolate}
.r-proof__panel::before{content:"";position:absolute;z-index:-1;right:-140px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--color-bg-on-dark) 0%,transparent 70%)}
.r-proof__since{margin:0;display:flex;align-items:baseline;gap:12px;font-family:var(--font-copy);font-size:var(--fs-14);font-weight:var(--fw-bold);color:var(--color-text-on-dark)}
.r-proof__since b{font-family:var(--font-num);font-size:var(--fs-13);font-weight:var(--fw-bold);letter-spacing:var(--tracking);text-transform:uppercase;color:var(--color-text-on-dark)}
.r-proof__stats{margin:18px 0 0;padding:0;display:flex;flex-direction:column}
/* 数字のパネルは 1:2 の狭い側。幅が足りないときは、全部の行を「項目名の下に数字（右寄せ）」にそろえる */
.r-proof__stats{container-type:inline-size}
.r-proof__stats div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 0;border-top:1px solid var(--color-line-on-dark)}
.r-proof__stats dt{white-space:nowrap;font-family:var(--font-copy);font-size:var(--fs-14);font-weight:var(--fw-bold);color:var(--color-text-on-dark)}
.r-proof__stats dd{display:flex;align-items:baseline;gap:8px;margin:0;white-space:nowrap;color:var(--color-text-on-dark)}
.r-proof__stats dd span{font-family:var(--font-num);font-size:var(--fs-num);font-weight:var(--fw-bold);line-height:1;letter-spacing:var(--tracking);font-variant-numeric:tabular-nums}
.r-proof__stats dd small{font-family:var(--font-copy);font-size:var(--fs-14);font-weight:var(--fw-bold)}
@container (max-width:400px){.r-proof__stats div{flex-direction:column;align-items:stretch;gap:4px}.r-proof__stats dd{align-self:flex-end}}
.r-proof__note{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--color-line-on-dark);font-size:var(--fs-13);color:var(--color-text-on-dark)}
.r-proof__logos{display:flex;flex-direction:column;justify-content:center;margin:0;padding:32px 36px;background:var(--color-bg);border-radius:var(--r-card)}
.r-sec:not(.is--gray) .r-proof__logos{background:var(--color-bg-subtle)}
.r-proof__logosLabel{margin:0 0 20px;font-family:var(--font-copy);font-size:var(--fs-14);font-weight:var(--fw-bold);color:var(--color-text)}
/* ロゴ（<ClientLogos>）：PC 5 列×4 段、599px 以下は 4 列。白いカードなので、グレーの面の上ではカードに見える */
.r-proof__logoList{--logo-cols:5}
@media(max-width:999px){.r-proof{grid-template-columns:1fr}}
@media(max-width:599px){.r-proof__panel{padding:28px 24px 24px;border-radius:var(--r-card)}.r-proof__logos{padding:24px 20px;border-radius:var(--r-card)}.r-proof__logoList{--logo-cols:4}}

/* ---------- 10. ヘッダーのサービス（メガメニュー）：一覧ページと同じ見せ方 ---------- */
@media(min-width:960px){
  /* パネルは画面の端から左右 24px 離した、浮いたカード（四隅を丸く）。中身の左右の余白 40px はパネルの内側で取る */
  .l-header__mega{left:24px;right:24px;border-radius:var(--r-card)}
  /* メガメニューの中のボタン：旧 main.css の「.l-header__navItem a{display:block}」に負けて矢印が 2 行目に落ちていたので、コンポーネントの表示に戻す */
  .l-header__navItem a.c-btn{display:inline-flex}
  .l-header__megaAll{flex:none}
  .l-header__megaInner{max-width:1280px;padding:28px 40px 32px;grid-template-columns:minmax(0,1fr) 300px;gap:18px 20px}
  .l-header__megaHead{padding-bottom:0;border-bottom:0}
  .l-header__megaType{font-family:var(--font-copy);font-size:var(--fs-18);font-weight:var(--fw-bold);color:var(--color-text)}
  .l-header__megaType small{font-family:var(--font-copy);font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--color-text)}
  .l-header__megaGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .l-header__megaCol{padding:16px 16px 10px;background:var(--color-bg-subtle);border-radius:var(--r-inner)}
  .l-header__megaArea{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:0 0 12px;border-top:0;border-bottom:1px solid var(--color-line);font-family:var(--font-copy);font-size:var(--fs-14);font-weight:var(--fw-bold);line-height:1.35;color:var(--color-text)}
  .l-header__megaArea > span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
  .l-header__megaArea small{font-size:var(--fs-11);font-weight:var(--fw-bold);line-height:1.4;color:var(--color-text);white-space:normal}
  .l-header__megaIcon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-inner);background:var(--color-bg);color:var(--color-text)}
  .l-header__megaIcon svg{width:18px;height:18px}
  .l-header .l-header__megaCol a{position:relative;padding:7px 28px 7px 0!important;font-size:var(--fs-14);font-weight:var(--fw-bold);color:var(--color-text)}
  .l-header__megaCol .c-arrow{position:absolute;right:0;top:50%}
  .l-header .l-header__megaCol a:hover{text-decoration:none}
  .l-header__megaAi{padding:16px;background:var(--color-bg-dark);border-radius:var(--r-inner)}
  .l-header__megaAi .l-header__megaType{padding-bottom:12px;border-bottom:1px solid var(--color-line-on-dark);font-size:var(--fs-14);color:var(--color-text-on-dark);white-space:nowrap}
  .l-header .l-header__megaAi a{flex-direction:row!important;align-items:center;gap:12px;padding:14px 0!important}
  .l-header__megaAi .l-header__megaIcon{background:var(--color-bg-on-dark);color:var(--color-text-on-dark)}
  .l-header__megaAi a > span:not(.l-header__megaIcon){display:flex;flex-direction:column;gap:2px;min-width:0}
  .l-header__megaAi small{font-size:var(--fs-11);font-weight:var(--fw-bold);line-height:1.4;color:var(--color-text-on-dark)}
  .l-header__megaAi b{font-family:var(--font-copy);font-size:var(--fs-14)}
}
@media(min-width:960px){
  /* ナビ項目用の span スタイル（上の黒線・高さ・中央寄せ）がメガメニュー内に効かないように */
  .l-header__mega span,.l-header__drop span{height:auto;font-size:inherit}
  .l-header__mega span::before,.l-header__drop span::before{content:none!important;display:none!important}
  .l-header__megaArea > span:last-child,.l-header__megaAi a > span:not(.l-header__megaIcon){display:flex;flex-direction:column;align-items:flex-start;text-align:left}
  .l-header__megaArea{border-top:0!important;padding-top:0!important;display:flex!important;width:100%}
  .l-header__megaIcon{display:flex!important;width:34px!important;height:34px!important}
}
@media(min-width:960px){
  .l-header__megaInner{grid-template-columns:minmax(0,1fr) 256px}
  .l-header .l-header__megaCol a{font-size:var(--fs-13);letter-spacing:var(--tracking)}
  .l-header__megaCol{padding:16px 14px 10px}
}

/* ---------- 11. メガメニュー：AIを軸にした支援形態（右の黒いパネル）の整え ---------- */
@media(min-width:960px){
  .l-header__megaInner{grid-template-columns:minmax(0,1fr) 280px!important;align-items:stretch}
  .l-header__megaAi{display:flex;flex-direction:column;height:100%;padding:18px}
  .l-header__megaAi .l-header__megaType{margin:0 0 6px;padding-bottom:14px;font-size:var(--fs-14);letter-spacing:var(--tracking)}
  .l-header__megaAi ul{display:grid;grid-template-rows:repeat(2,1fr);align-content:center;gap:6px;flex:1;margin:0;padding:0;list-style:none}
  .l-header__megaAi li{display:flex}
  .l-header .l-header__megaAi li > a{width:100%}
  .l-header .l-header__megaAi a{display:flex!important;flex-direction:row!important;align-items:center;gap:12px;
    padding:12px!important;border-radius:var(--r-inner);color:var(--color-text-on-dark);text-decoration:none;
    transition:background-color .25s var(--ease)}
  .l-header .l-header__megaAi a:hover{background:var(--color-bg-on-dark);text-decoration:none}
  .l-header__megaAi .l-header__megaIcon{width:34px!important;height:34px!important;background:var(--color-bg-on-dark);color:var(--color-text-on-dark)}
  .l-header__megaAi a > span:not(.l-header__megaIcon){gap:3px}
  .l-header__megaAi small{font-size:var(--fs-11);line-height:1.45;color:var(--color-text-on-dark)}
  .l-header__megaAi b{font-size:var(--fs-14);font-weight:var(--fw-bold);line-height:1.45;letter-spacing:var(--tracking)}
}

/* ---------- 12. 文字色は黒か白だけにする（グレーの文字を使わない）。例外はサブタイトル（--color-label）だけ ---------- */
/* 旧CSSに直書きされたグレー文字も黒へ */
.l-layout__content,.l-layout__content p,.l-layout__content li,.l-layout__content dd,.l-layout__content dt,
.l-layout__content span,.l-layout__content small,.l-layout__content b,.l-layout__content i,
.l-layout__content h1,.l-layout__content h2,.l-layout__content h3,.l-layout__content h4,.l-layout__content figcaption{color:inherit}
.l-layout__content{color:var(--color-text)}
/* 暗い面の中は白で統一 */
.r-sec.is--dark,.r-sec.is--dark *,
.p-homeSec.is--dark,.p-homeSec.is--dark *,
.r-closing,.r-closing *,
.r-proof__panel,.r-proof__panel *,
.p-svcd__about,.p-svcd__about *,
.p-homeBand__panel.is--dark *{color:var(--color-text-on-dark)}
/* 例外：暗い面の中の白カードは黒文字のまま（ボタンの文字色は components.css が守る） */
.r-proof__logos,.r-proof__logos *{color:var(--color-text)}
/* 矢印（.c-arrow）は、暗い面の中でもボタン・リンクの文字色に従う（白いボタンの中で白くなって見えなくなるのを防ぐ） */
.r-sec.is--dark .c-arrow,.p-homeSec.is--dark .c-arrow,.r-closing .c-arrow,.r-proof__panel .c-arrow,.p-svcd__about .c-arrow,.p-homeBand__panel.is--dark .c-arrow{color:inherit}
/* ヘッダー・ドロワーの補足テキストも黒に */
.l-header__megaType small,.l-drawer__sub a{color:var(--color-text)}
/* 記事ページの著者英字名もグレーをやめる */
.p-mediaAuthor__name-en,.p-mediaAuthor__position{color:var(--color-text)}
/* 旧ページに残っていたグレー文字（切り替えボタン・日付など） */
.p-topProjects__headToggleButton{color:var(--color-text)}

/* ===== 文字色の上書き漏れ（2026-09 全ページ点検） =====
   上の「旧CSSに直書きされたグレー文字も黒へ」（.l-layout__content span などを color:inherit）が、
   コンポーネントごとの文字色より強く効いてしまい、黒地に黒・白地に白になっていた箇所を、コンポーネント側の色に戻す */
/* ページ下部の3カード：白地では黒、ホバーで地が黒になったら白 */
.l-bottomCta__item .l-bottomCta__title{color:var(--color-text)}
.l-bottomCta__item:hover .l-bottomCta__title{color:var(--color-text-on-dark)}
/* 著者カード（黒地）：英字名・肩書 */
.p-mediaAuthor__info .p-mediaAuthor__name-en{color:var(--color-text-on-dark-sub)}
.p-mediaAuthor__info .p-mediaAuthor__position{color:var(--color-text-on-dark)}
/* トップ「AIを軸にした支援形態」の見出しタグ（黒地） */
.l-layout__content .p-homeAiHead__tag{color:var(--color-text-on-dark)}
/* サービス一覧の図：黒地の中の白い箱／黒いタグ */
.l-layout__content .p-svcFig__node.is--main{color:var(--color-text)}
.l-layout__content .p-svcFig__assetTag{color:var(--color-text-on-dark)}
/* フルスタック支援：お受けする条件の番号・理由（黒地） */
.l-layout__content .p-svcd__condNum{color:var(--color-text-on-dark)}
.l-layout__content .p-svcd__condWhy,.l-layout__content .p-svcd__condWhy b,.l-layout__content .p-svcd__condWhy span{color:var(--color-text-on-dark)}

/* ===== サービス領域ページ（/service/strategy/ など）へのリンク ===== */
.l-header .l-header__megaCol .l-header__megaAreaLink{display:flex!important;align-items:center;gap:8px;width:100%;padding:0 14px 0 0!important;font:inherit;font-size:var(--fs-14);line-height:inherit;color:inherit;text-decoration:none}
.l-header__megaAreaLink > span:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-align:left}
.p-svc__areaMore{margin:16px 0 0}


/* メンバー詳細「主な実績」：「もっと見る」で開くまでは隠す */
.p-aboutCases > li[hidden],.js-memberHistoryCasesMore[hidden]{display:none!important}

/* ===== フォームページのバランス =====
   お問い合わせ・案件のご相談：フォームの白い枠（最大880px）が左に寄っていたので、パンくず・見出しと枠を同じ幅の列にして中央へ
   送信完了ページ（.nc-thanks。src/components/ThanksPage.astro）もフォームの画面と同じ幅にそろえる */
@media(min-width:1024px){
  :is(.nc-contact,.nc-thanks) :is(.nc-head .l-container,.nc-narrow,.c-crumb .l-container){max-width:calc(880px + 80px)}
  :is(.nc-contact,.nc-thanks) .nc-narrow .nc-card{margin-inline:auto}
}
/* 資料ダウンロード（/download/ ・/otsukaresamadesu/）：フォームの列が狭く入力欄が詰まっていたので、本文と釣り合う幅に */

/* ===== メンバー詳細「担当できるサービス」（src/components/MemberServices.astro） =====
   領域ごとに行を分け、サービスは押せることが分かる枠付きのボタンに */
.p-memberSvc{margin:0}
.p-memberSvc__title{margin:0 0 16px;font-family:var(--font-copy);font-size:var(--fs-20);font-weight:var(--fw-bold);line-height:1.5;letter-spacing:var(--tracking);color:var(--color-text)}
.p-memberSvc__groups{border-top:1px solid var(--color-line-strong)}
.p-memberSvc__group{display:grid;grid-template-columns:11.5em minmax(0,1fr);gap:10px 20px;align-items:start;padding:16px 0;border-bottom:1px solid var(--color-line)}
.p-memberSvc__area{display:inline-flex;align-items:center;gap:8px;padding-top:7px;font-size:var(--fs-13);font-weight:var(--fw-bold);line-height:1.4;color:var(--color-text);text-decoration:none}
.p-memberSvc__icon{display:inline-flex;flex:none;width:26px;height:26px;align-items:center;justify-content:center;border-radius:50%;background:var(--color-bg-subtle)}
.p-memberSvc__icon svg{width:15px;height:15px}
.p-memberSvc__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
@media(max-width:599px){
  .p-memberSvc__group{grid-template-columns:1fr;gap:10px}
  .p-memberSvc__area{padding-top:0}
}

/* ===== 案件のご相談フォーム（src/components/ConsultForm.astro） =====
   左に項目名、右に入力。役職・予算はボタンを押して選ぶ形、ご相談内容はカード、知ったきっかけは縦に並ぶ選択肢 */
.p-cform{--cf-gap:22px;color:var(--color-text)}
.p-cform__note{margin:0 0 20px;font-size:var(--fs-13);color:var(--color-text-sub)}
.p-cform__req{margin-left:4px;color:var(--color-error);font-weight:var(--fw-bold)}
.p-cform__row{display:grid;grid-template-columns:11em minmax(0,1fr);gap:10px 28px;padding:var(--cf-gap) 0;border-top:1px solid var(--color-line-subtle)}
.p-cform__cols,.p-cform__col{display:contents}
.p-cform__col:first-child > .p-cform__row:first-child{border-top:0}
.p-cform__label{margin:0;padding-top:12px;font-size:var(--fs-14);font-weight:var(--fw-bold);line-height:1.5}
.p-cform__label small{display:block;margin-top:4px;font-size:var(--fs-12);font-weight:var(--fw-regular);color:var(--color-text-muted)}
.p-cform__field{min-width:0}
.p-cform__pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.p-cform__input{display:block;width:100%;box-sizing:border-box;min-height:50px;padding:12px 16px;border:1px solid transparent;border-radius:var(--r-inner);
  background:var(--color-bg-subtle);font:inherit;font-size:var(--fs-14);color:var(--color-text);transition:border-color .25s var(--ease),background-color .25s var(--ease)}
.p-cform__input::placeholder{color:var(--color-text-muted)}
.p-cform__input:focus{outline:none;border-color:var(--color-line-strong);background:var(--color-bg)}
.p-cform__textarea{min-height:180px;line-height:1.8;resize:vertical}
/* 押しボタン式（役職・予算） */
.p-cform__chips{display:grid;gap:8px}
.p-cform__chips.is--position{grid-template-columns:repeat(5,minmax(0,1fr))}
.p-cform__chips.is--budget{grid-template-columns:repeat(4,minmax(0,1fr))}
.p-cform__chip{position:relative;cursor:pointer}
.p-cform__chip input,.p-cform__card input,.p-cform__option input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.p-cform__chip{display:block}
.p-cform__chip span{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;min-height:52px;padding:8px 6px;border:1px solid var(--color-line);border-radius:var(--r-inner);background:var(--color-bg);
  font-size:var(--fs-14);font-weight:var(--fw-bold);line-height:1.35;text-align:center;white-space:nowrap;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.p-cform__chip:hover span{border-color:var(--color-line-strong)}
.p-cform__chip input:checked + span{border-color:var(--color-line-strong);background:var(--color-bg-dark);color:var(--color-text-on-dark)}
.p-cform__chip input:focus-visible + span,.p-cform__card input:focus-visible + .p-cform__cardBody,.p-cform__option input:focus-visible + span{outline:2px solid var(--color-line-strong);outline-offset:2px}
/* ご相談内容（カード・複数選択） */
.p-cform__cards{display:flex;flex-direction:column;gap:8px}
.p-cform__card{position:relative;cursor:pointer}
.p-cform__cardBody{display:grid;grid-template-columns:11.5em minmax(0,1fr);align-items:center;gap:4px 16px;min-height:52px;box-sizing:border-box;padding:10px 16px 10px 46px;border:1px solid var(--color-line);border-radius:var(--r-inner);background:var(--color-bg);
  transition:border-color .2s var(--ease),background-color .2s var(--ease)}
/* ds-allow:raw-radius -- チェックボックスの四角の角（小さなコンポーネントなので 5px） */
.p-cform__cardBody::before{content:"";position:absolute;left:16px;top:50%;margin-top:-9px;width:18px;height:18px;border:1.5px solid var(--color-line);border-radius:5px;background:var(--color-bg)}
.p-cform__cardBody b{font-size:var(--fs-14);line-height:1.5}
.p-cform__cardBody small{font-size:var(--fs-13);line-height:1.6;color:var(--color-text-sub)}
.p-cform__card:hover .p-cform__cardBody{border-color:var(--color-line-strong)}
.p-cform__card input:checked + .p-cform__cardBody{border-color:var(--color-line-strong);background:var(--color-bg-subtle)}
.p-cform__card input:checked + .p-cform__cardBody::before{border-color:var(--color-line-strong);background:var(--color-bg-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
/* 知ったきっかけ（縦並びの選択肢） */
.p-cform__options{display:flex;flex-direction:column;gap:8px}
.p-cform__option{position:relative;cursor:pointer}
.p-cform__option span{display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 16px;border:1px solid var(--color-line);border-radius:var(--r-inner);background:var(--color-bg);font-size:var(--fs-14);font-weight:var(--fw-regular);line-height:1.5;
  transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.p-cform__option span::before{content:"";flex:none;width:18px;height:18px;border:1.5px solid var(--color-line);border-radius:50%;background:var(--color-bg);box-sizing:border-box}
.p-cform__option:hover span{border-color:var(--color-line-strong)}
.p-cform__option input:checked + span{border-color:var(--color-line-strong);background:var(--color-bg-subtle);font-weight:var(--fw-bold)}
.p-cform__option input:checked + span::before{border:5px solid var(--color-line-strong)}
/* 入力漏れ */
.p-cform__row.is--invalid .p-cform__label{color:var(--color-error)}
.p-cform__row.is--invalid .p-cform__input{border-color:var(--color-error)}
.p-cform__row.is--invalid .p-cform__chip span,.p-cform__row.is--invalid .p-cform__option span{border-color:var(--color-error-line)}
.p-cform__error{margin:20px 0 0;padding:14px 16px;border-radius:var(--r-inner);background:var(--color-error-bg);color:var(--color-error);font-size:var(--fs-14);line-height:1.7}
/* ボットよけ（見えない欄） */
.p-cform__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.p-cform__legal{margin:24px 0 0;padding-top:24px;border-top:1px solid var(--color-line-subtle);font-size:var(--fs-13);line-height:1.9;color:var(--color-text-sub)}
.p-cform__legal a{color:var(--color-text)}
.p-cform__submit{margin-top:28px;text-align:center}
.p-cform__button{width:320px;max-width:100%}
@media(max-width:767px){
  .p-cform__row{grid-template-columns:1fr;gap:10px;padding:18px 0}
  .p-cform__label{padding-top:0}
  .p-cform__chips.is--position{grid-template-columns:repeat(3,minmax(0,1fr))}
  .p-cform__chips.is--budget{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-cform__cardBody{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.p-cform *{transition:none!important}}

/* 2列のフォーム（資料ダウンロード）：左に入力欄（お名前〜メール）、右に選ぶ項目（役職・領域）。項目名は上に */
@media(min-width:960px){
  .p-cform--split .p-cform__cols{display:grid;grid-template-columns:var(--cols-1-1);gap:var(--gap-cols);align-items:start}
  .p-cform--split .p-cform__col{display:block}
  .p-cform--split .p-cform__col > .p-cform__row:first-child{border-top:0;padding-top:4px}
}
.p-cform--split .p-cform__row{grid-template-columns:1fr;gap:10px;padding:18px 0}
.p-cform--split .p-cform__label{padding-top:0}
.p-cform--split .p-cform__label small{display:inline;margin:0 0 0 8px}

/* ===== 会社案内ダウンロード（/download/）：フォームを横幅いっぱいの2列に ===== */
.p-dlForm{max-width:none}
/* 2列のとき：左の列の役職ボタンは3列、送信まわりは右の列の最後（ボタンは列の幅いっぱい） */
.p-cform--split .p-cform__chips.is--position{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-cform--split .p-cform__foot .p-cform__legal{margin-top:8px}
.p-cform--split .p-cform__foot .p-cform__submit{margin-top:20px}
.p-cform--split .p-cform__foot .p-cform__button{width:100%}

/* ===== フォームの「必須」の印はすべて赤（#dc2626。月報登録と同じ色）にそろえる ===== */
.p-cform__req,.l-layout__content .p-cform__req{color:var(--color-error)}
/* お問い合わせの種類（総合お問い合わせ）：3つを同じ大きさで横並び（スマホは縦に） */
.p-cform__chips.is--type{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:767px){.p-cform__chips.is--type{grid-template-columns:1fr}}

/* サービスのメガメニュー：上から 見出し → 4 つの領域（4 列）→ AI を軸にした支援形態の段。
   AI の段は、見出しを上（下に罫線）、2 つのメニューをその下に横に並べる。メニューの右端に矢印 */
@media(min-width:960px){
  .l-header__megaInner{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"head" "grid" "ai"!important}
  .l-header__megaAi{flex-direction:column;align-items:stretch;gap:0;height:auto;padding:16px 18px 12px}
  .l-header__megaAi .l-header__megaType{flex:none;margin:0 0 8px;padding:0 0 12px;border-bottom:1px solid var(--color-line-on-dark)}
  .l-header__megaAi ul{grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .l-header .l-header__megaAi a{padding:8px 12px!important;border-bottom:0}
  .l-header__megaAi a .c-arrow{margin-left:auto}
}
/* 画面が狭いときは、領域名が1行に収まるよう アイコンを名前の上に置く */
@media(min-width:960px) and (max-width:1199px){
  .l-header .l-header__megaCol .l-header__megaAreaLink{flex-direction:column;align-items:flex-start!important;gap:6px;font-size:var(--fs-13);white-space:nowrap}
}



/* 見出しの説明文の改行（<br class="u-br">）：文の切れ目で改行し、PCの行数を増やさないように入れている。
   999px 以下は自然な折り返しにまかせる。hero の説明文（.r-pageHead__lead）は固定幅なしで入れ物いっぱいに広がるので、1000px の幅（約 51 字）で 1 行に収まる区切りにする */
@media(max-width:999px){.u-br{display:none}}
/* ページ下部の相談ブロックは2カラムで説明文の幅が画面幅とともに縮むため、1280px未満では改行を外す */
@media(max-width:1279px){.r-closing__lead .u-br{display:none}}

/* ---------- サブタイトル（見出しの上の英字ラベル。「01 CONSULTATION」「Projects」など） ----------
   見た目（書体・大きさ・字間・大文字・色）はここだけで決める。各ページの CSS には配置（余白・並び）だけを書く。
   色は --color-label（黒より薄い）。暗い面の上は --color-text-on-dark-sub。番号（<b>01</b>）も同じ色。
   新しく作るときは .c-label（小さい方は .c-label.is--s）を使う */
body :is(.c-label,.r-pageHead__label,.r-head__label,.p-homeHead__label,.p-co__label,.nc-secLabel,.r-closing__label b,
  .r-summary__label,.p-casePost__asideTitle,.p-mediaSidebar__pickTitle){
  font-family:var(--font-num);font-size:var(--fs-13);font-weight:var(--fw-bold);letter-spacing:var(--tracking);text-transform:uppercase;color:var(--color-label)}
body :is(.c-label.is--s,.r-summary__label,.p-casePost__asideTitle,.p-mediaSidebar__pickTitle){font-size:var(--fs-12)}
body :is(.c-label,.r-head__label,.p-homeHead__label,.p-co__label,.nc-secLabel) b{color:inherit}
body :is(.r-sec.is--dark .r-head__label,.p-homeSec.is--dark .p-homeHead__label,.r-closing__label,.is--dark .c-label),
body :is(.r-sec.is--dark .r-head__label,.p-homeSec.is--dark .p-homeHead__label,.r-closing__label,.is--dark .c-label) b{color:var(--color-text-on-dark-sub)}

/* ===== 長文は両端そろえ =====
   記事本文・説明文・リード文など、何行にもなる文章。1 行だけの文や、改行（<br>）の前の行はそろえない（最後の行と同じ扱い）。
   中央寄せの入れ物の中の文（ご挨拶の CTA・404 など）は入れない。説明文を新しく作ったら、ここに足す */
:is(.l-mediaContent p,.l-mediaContent li,
  .r-pageHead__lead,.r-head__lead,.p-homeHead__lead,.r-closing__lead,.r-closing__text,
  .c-voice__text,.p-mediaAuthor__bio,.p-memberHistory__description,.c-acc__text,
  .p-aboutGroup__text,.p-aboutService__text,.p-aboutIntro p,.p-co__text,.p-pp__list li,.p-co__groupText,.p-stance__lead,.p-rc__note,.p-rc__endNote,
  .p-homeArea__desc,.p-homeCheck__text,.p-homeFlow__text,.p-homePeople__lead,.p-homePeople__text,.p-homePlan__desc,
  .p-svc__secLead,.p-svc__areaLead,.p-svc__itemDesc,.p-svc__aiText,.p-svc__aiPhaseText,.p-svcAi__text,.p-area__svcLead,
  .p-svcd__blockLead,.p-svcd__scopeLead,.p-svcd__covLead,.p-svcd__covNote,.p-svcd__issueText,.p-svcd__cellText,.p-svcd__condText,
  .p-svcd__whyText,.p-svcd__vsText,.p-svcd__teamText,.p-svcd__phaseText,.p-svcd__offerDesc,.p-svcd__planText,.p-svcd__planNote,
  .p-svcd__linkText,.p-svcd__ctaText,.p-svcd__aboutBody p,.p-svcd__condWhy,.p-svcd__planFit,.p-area__planFit,.p-downloadThanks__text,
  .p-homeWay__body p,.p-homeWay__points p:not([class]),.p-way__prose p,.p-way__steps p:not([class]),.p-way__points li span,.p-rc__points span,.p-rc__items p:not([class]),.p-rc__sys p:not([class]),.p-rc__jobBody,.p-svcd__ctaPromise){text-align:justify}

/* フォーム営業のお断り（LeadForm.astro）。上の規約の一文に続けて、区切り線なしで出す */
.p-cform__legal.p-cform__salesNote{margin-top:8px;padding-top:0;border-top:0}
/* Cloudflare Turnstile（ロボット判定）。普段は表示されず、確認が必要なときだけここに出る */
.p-cform__turnstile{margin-top:16px}
.p-cform__turnstile:empty{display:none}