/* components.css */
/* =========================================================
   components.css — 共通コンポーネントの見た目（ページの CSS の後に読み込む。SiteHead.astro）
   ボタン（src/components/Button.astro）の型・大きさは、ここだけで決める。
   ページ側では置き方（幅・余白）だけを書く
   ========================================================= */

/* ---------- ボタン ---------- */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:var(--r-pill);
  font-family:var(--font-copy);font-weight:var(--fw-bold);line-height:1.3;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.c-btn.has--arrow{justify-content:space-between}
/* ラベルは改行させない（横幅いっぱいのボタンも）。入りきらないときは、入れ物の幅かラベルの文言を直す */
.c-btn.is--block{display:flex;width:100%}
.c-btn__icon{flex:none;width:16px;height:16px}
/* 大きさ（高さ・左右の余白は変数にし、ヘッダーや記事本文の古い指定に負けないようにする） */
.c-btn{min-height:var(--btn-h);padding:8px var(--btn-pr) 8px var(--btn-pl)}
.c-btn--l{--btn-h:58px;--btn-pl:32px;--btn-pr:28px;gap:18px;font-size:var(--fs-14)}
.c-btn--m{--btn-h:48px;--btn-pl:22px;--btn-pr:22px;font-size:var(--fs-14)}
.c-btn--s{--btn-h:44px;--btn-pl:20px;--btn-pr:20px;font-size:var(--fs-14)}
.c-btn--xs{--btn-h:36px;--btn-pl:16px;--btn-pr:16px;gap:8px;font-size:var(--fs-13)}
@media(max-width:599px){
  .c-btn--l{--btn-h:54px}
}
/* ヘッダー（ナビのリンク）・記事本文（下線のアニメーション）の、a 全体への古い指定から守る */
.l-header a.c-btn,.l-mediaContent a.c-btn{height:auto!important;min-height:var(--btn-h);padding:8px var(--btn-pr) 8px var(--btn-pl)!important;background-image:none;text-decoration:none}
/* 型（.c-btn.c-btn--◯◯ と 2 つ重ねて、ページ側の「◯◯ a」のような指定に負けないようにする） */
.c-btn.c-btn--primary{background:var(--color-bg-dark);color:var(--color-text-on-dark)}
.c-btn.c-btn--primary:hover{background:var(--color-bg-dark-hover)}
.c-btn.c-btn--primary .c-btn__icon{filter:brightness(0) invert(1)}
.c-btn.c-btn--secondary{background:var(--color-bg);color:var(--color-text);box-shadow:inset 0 0 0 1px var(--color-line-strong)}
.c-btn.c-btn--secondary:hover{background:var(--color-bg-dark);color:var(--color-text-on-dark)}
.c-btn.c-btn--secondary .c-btn__icon{filter:brightness(0);transition:filter .35s var(--ease)}
.c-btn.c-btn--secondary:hover .c-btn__icon{filter:brightness(0) invert(1)}
.c-btn.c-btn--on-dark{background:var(--color-bg);color:var(--color-text)}
.c-btn.c-btn--on-dark .c-btn__icon{filter:brightness(0)}
.c-btn.c-btn--on-dark:hover{background:var(--color-bg-hover)}
.c-btn.c-btn--on-dark-line{background:transparent;color:var(--color-text-on-dark);box-shadow:inset 0 0 0 1px var(--color-line-on-dark-strong)}
.c-btn.c-btn--on-dark-line:hover{background:var(--color-bg);color:var(--color-text)}
.c-btn.c-btn--on-dark-line .c-btn__icon{filter:brightness(0) invert(1);transition:filter .35s var(--ease)}
.c-btn.c-btn--on-dark-line:hover .c-btn__icon{filter:brightness(0)}
.c-btn:disabled{background:transparent;color:var(--color-text-disabled);box-shadow:inset 0 0 0 1px var(--color-line);cursor:default}
/* 暗い面の中は文字を白にする指定（renewal.css）より強く、型の文字色を守る */
:is(.r-sec.is--dark,.p-homeSec.is--dark,.r-closing,.r-proof__panel,.p-svcd__about) :is(.c-btn--on-dark,.c-btn.c-btn--secondary),
:is(.r-sec.is--dark,.p-homeSec.is--dark,.r-closing,.r-proof__panel,.p-svcd__about) .c-btn--on-dark-line:hover{color:var(--color-text)}
:is(.r-sec.is--dark,.p-homeSec.is--dark,.r-closing,.r-proof__panel,.p-svcd__about) .c-btn--on-dark-line{color:var(--color-text-on-dark)}
:is(.r-sec.is--dark,.p-homeSec.is--dark,.r-closing,.r-proof__panel,.p-svcd__about) .c-btn :is(.c-btn__label,.c-arrow){color:inherit}

/* ---------- 丸で囲んだ矢印（src/components/ArrowCircle.astro） ----------
   一覧の行・カードの全体がリンクのときに置く。文字ボタンは置かない。
   矢印は丸の中央：箱（.c-arrow）の幅を線の長さにして中央に置き、ホバーでは箱ごと伸ばす（中央のまま左右に伸びる） */
.c-arrowCircle{display:inline-flex;flex:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--color-line);color:var(--color-text);
  transition:background-color .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease)}
.c-arrowCircle.is--s{width:36px;height:36px}
.c-arrowCircle .c-arrow{width:13px;transition:width .35s var(--ease)}
.c-arrowCircle .c-arrow::before{width:100%;transition:none}
a:hover .c-arrowCircle .c-arrow,a:focus-visible .c-arrowCircle .c-arrow{width:20px}
a:hover .c-arrowCircle,a:focus-visible .c-arrowCircle{background:var(--color-bg-dark);box-shadow:none;color:var(--color-text-on-dark)}
.c-arrowCircle.is--onDark{box-shadow:inset 0 0 0 1px var(--color-line-on-dark-strong);color:var(--color-text-on-dark)}
a:hover .c-arrowCircle.is--onDark,a:focus-visible .c-arrowCircle.is--onDark{background:var(--color-bg-on-dark);box-shadow:inset 0 0 0 1px var(--color-line-on-dark-strong);color:var(--color-text-on-dark)}
@media(max-width:599px){.c-arrowCircle.is--s{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.c-arrowCircle,.c-arrowCircle .c-arrow{transition:none}}

/* ---------- メンバーの写真（.c-memberPhoto） ----------
   メンバーの写真はすべてこのクラスの入れ物に入れる。正方形で、幅に合わせて伸び縮みする（比率は固定）。
   元の写真が縦長でも顔が切れないよう、位置は上寄せ。ページの CSS には置き方（幅・並び）とホバーの動きだけを書く */
.c-memberPhoto{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;border-radius:var(--r-card);background:var(--color-bg-hover)}
.c-memberPhoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}

/* ---------- メンバーのカード（src/components/MemberCard.astro） ----------
   並べる入れ物は <ul class="c-memberCards">（4 列。is--3 で 3 列）。どの場所でも同じ見た目にする（タグは共通のチップ .c-chip） */
.c-memberCards{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}
.c-memberCards.is--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c-memberCard{display:flex;flex-direction:column;min-width:0}
.c-memberCard__link{display:flex;flex-direction:column;color:var(--color-text);text-decoration:none}
.c-memberCard__photo img{transition:transform 1s var(--ease)}
.c-memberCard__link:hover .c-memberCard__photo img{transform:scale(1.04)}
.c-memberCard__role{margin-top:16px;font-family:var(--font-num);font-size:var(--fs-12);font-weight:var(--fw-regular);line-height:1.5;color:var(--color-text)}
.c-memberCard__name{margin-top:6px;font-family:var(--font-copy);font-size:var(--fs-20);font-weight:var(--fw-bold);line-height:1.5}
/* 名前と英字名の間：行の高さ（1.5）の余白に 2px を足す */
.c-memberCard__en{margin-top:2px;font-family:var(--font-num);font-size:var(--fs-11);font-weight:var(--fw-bold);line-height:1.5;color:var(--color-text)}
.c-memberCard__tags{margin:14px 0 0}
@media(max-width:1099px){.c-memberCards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){.c-memberCards,.c-memberCards.is--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){.c-memberCard__name{font-size:var(--fs-18)}}
/* SP（959px 以下）は提供サービスのチップの文字を 10px に（10px の例外。tokens.css の --fs-chip-sp。changelog の 22） */
@media(max-width:959px){.c-memberCard__tags .c-chip{font-size:var(--fs-chip-sp)}}
@media(prefers-reduced-motion:reduce){.c-memberCard__photo img{transition:none}}

/* ---------- テキストリンク ----------
   ホバーで下線が左から右へ伸び、離すと右へ縮む（現行サイトの .c-underlineLink と同じ動き）。サイト全体でこの定義だけを使う。
   下線は背景で引くので、折り返した 2 行目以降にも付く。下線を付ける要素は inline のまま使う
   （カードのタイトルなどブロックの要素は、中の文字を <span class="c-textLink"> で包む）
   - ふだんは下線なし（ナビ・パンくず・フッター・カードのタイトル）…… .c-textLink
   - ふだんから薄いグレーの下線（本文・注記の中のリンク。リンクと分かるように）…… .c-textLink.is--inline
   クラスを付けられないもの（記事本文・生成する HTML・全ページにあるパンくず）は、下のセレクタの一覧に足す。
   ホバーで下線を出す指定（:hover の text-decoration:underline）はチェックが知らせる（text-link）
   下線と文字のあいだは 2px 空ける（padding-bottom 3px＝下線の太さ 1px＋2px。inline の要素なので行の高さは変わらない）。ふだんから下線のある .is--inline も同じ。
   フッターのサービス名は inline-block で、行の高さの分すでに空いているので足さない */
.c-textLink,
.c-crumb__list a,
.p-area__issueService a,.p-area__svcName a,.p-area__table tbody th a,
.l-mediaContent .lwptoc .lwptoc_item a{
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:right bottom;background-size:0 1px;
  padding-bottom:3px;text-decoration:none;transition:background-size .35s var(--ease)}
.l-footer__sub a.c-textLink{padding-bottom:0}
.c-textLink.is--inline,
.l-mediaContent a,
.p-pp .p-co__main a,.p-cform__legal a,.p-contactHero__note a,.p-co__map,.p-aboutTable__map{
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--color-line),var(--color-line));background-repeat:no-repeat;
  background-position:right bottom,left bottom;background-size:0 1px,100% 1px;
  padding-bottom:3px;text-decoration:none;transition:background-size .35s var(--ease)}
/* ホバー：リンクそのもの、またはリンク（カード）の中のタイトル */
a.c-textLink:hover,a.c-textLink:focus-visible,a:hover .c-textLink,a:focus-visible .c-textLink,.c-mediaItem:hover .c-textLink,
.c-crumb__list a:hover,
.p-area__issueService a:hover,.p-area__svcName a:hover,.p-area__table tbody th a:hover,
.l-mediaContent .lwptoc .lwptoc_item a:hover{background-position:left bottom;background-size:100% 1px}
a.c-textLink.is--inline:hover,a.c-textLink.is--inline:focus-visible,
.l-mediaContent a:hover,
.p-pp .p-co__main a:hover,.p-cform__legal a:hover,.p-contactHero__note a:hover,.p-co__map:hover,.p-aboutTable__map:hover{
  background-position:left bottom,left bottom;background-size:100% 1px,100% 1px}
@media(prefers-reduced-motion:reduce){.c-textLink,.c-textLink.is--inline{transition:none}}

/* ---------- パンくず（src/components/Breadcrumb.astro） ----------
   hero の外、ヘッダーの直下の独立した帯（線なし）。折り返さず、はみ出す分は横スクロール（スクロールバーは隠す）
   現在地（href の無い項目）は薄いグレー。リンクの下線はテキストリンクと同じ動き */
.c-crumb{padding:20px 0 0}
.c-crumb__list{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin:0;padding:0;list-style:none;font-size:var(--fs-12);line-height:1.8;color:var(--color-text);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.c-crumb__list::-webkit-scrollbar{display:none}
.c-crumb__list li{flex:none;white-space:nowrap}
.c-crumb__list li+li::before{content:"/";margin-right:10px;color:var(--color-text-disabled)}
.c-crumb__list a{color:var(--color-text)}
.c-crumb__list [aria-current="page"]{color:var(--color-text-muted)}
@media(max-width:599px){.c-crumb{padding-top:16px}}

/* ---------- クライアントの声（src/components/VoiceList.astro・VoiceCard.astro） ----------
   私たちのあり方ページのカードが基本。ふだんはグレーの面、グレーのセクション（.r-sec.is--gray）の中では白い面
   事例がある声だけ、カード全体がリンク（ホバーで面の色が変わり、矢印が伸びる） */
.c-voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.c-voices > li{display:flex;min-width:0}
.c-voice{display:flex;flex-direction:column;width:100%;margin:0;padding:28px 28px 24px;background:var(--color-bg-subtle);border-radius:var(--r-card);color:var(--color-text)}
a.c-voice{transition:background-color .35s var(--ease)}
a.c-voice:hover,a.c-voice:focus-visible{background:var(--color-bg-hover)}
.r-sec.is--gray .c-voice{background:var(--color-bg)}
.r-sec.is--gray a.c-voice:hover,.r-sec.is--gray a.c-voice:focus-visible{background:var(--color-bg-hover)}
.c-voice__text{position:relative;display:block;flex:1;margin:0;padding-top:22px;font-size:var(--fs-14);line-height:1.95}
/* ds-allow:raw-font-family -- 飾りの引用符（“）だけ Georgia */
.c-voice__text::before{content:"\201C";position:absolute;left:-2px;top:-12px;font-family:Georgia,"Times New Roman",serif;font-size:var(--fs-48);font-weight:var(--fw-bold);line-height:1;color:var(--color-line)}
.c-voice__meta{display:flex;flex-direction:column;gap:2px;margin-top:20px;padding-top:16px;border-top:1px solid var(--color-line);font-size:var(--fs-13)}
.c-voice__meta b{font-size:var(--fs-14)}
.c-voice__more{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:var(--fs-13);font-weight:var(--fw-bold)}
@media(max-width:959px){.c-voices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){.c-voices{grid-template-columns:minmax(0,1fr);gap:12px}.c-voice{padding:24px 20px 20px}}

/* ---------- 著者・担当者のカード（src/components/AuthorCard.astro） ----------
   実績詳細（担当者）と記事詳細（著者情報）で共通。黒い角丸の面。実績詳細の見た目を正とした
   上から 肩書き（400・グレー）→ 名前 → 英字名（白）（MemberCard と同じ順。3 つを .p-mediaAuthor__names で包む）。見出しの下の線は薄いグレー
   記事本文の中の [member] ブロック（.block-member。src/lib/body.ts）も同じ HTML なので、見出しの線以外は同じ見た目にする */
.p-mediaAuthor .p-mediaAuthor__heading{font-family:var(--font-copy);font-weight:var(--fw-bold)}
.p-mediaAuthor .p-mediaAuthor__content{border-top-color:var(--color-line-on-dark)}
:is(.p-mediaAuthor,.block-member) .p-mediaAuthor__position{margin-top:0;line-height:1.5;font-weight:var(--fw-regular);color:var(--color-text-on-dark-sub)}
:is(.p-mediaAuthor,.block-member) .p-mediaAuthor__name-jp{margin-top:10px;font-family:var(--font-copy);font-weight:var(--fw-bold)}
:is(.p-mediaAuthor,.block-member) .p-mediaAuthor__name-en{margin-top:10px;color:var(--color-text-on-dark)}
:is(.p-mediaAuthor,.block-member) .p-mediaAuthor__bio{line-height:1.85;color:var(--color-text-on-dark)}
:is(.p-mediaAuthor,.block-member) .p-mediaAuthor__expertiseList{margin:16px 0 0}
/* SP：写真と「肩書き・名前・英字名」を同じ幅で横に並べ、紹介文はその下に全幅で置く */
@media(max-width:959px){
  :is(.p-mediaAuthor,.block-member) .p-mediaAuthor__profile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:20px 16px}
  :is(.p-mediaAuthor,.block-member) .p-mediaAuthor__image{width:auto;height:auto}
  :is(.p-mediaAuthor,.block-member) .p-mediaAuthor__info{display:contents}
  :is(.p-mediaAuthor,.block-member) .p-mediaAuthor__bio{grid-column:1/-1;margin-top:0}
}

/* ---------- 実績のカード（src/components/WorkCard.astro） ----------
   実績一覧・実績詳細の関連する実績・サービス一覧・領域ページ・サービス詳細で共通。囲み（面の色）は付けず、画像の下に文字を置く。カード全体がリンク
   上から 画像（16:10・角丸）→ 会社名 → キャッチ → タイトル。ホバーで画像が少し拡大する。並べる入れ物の間隔は下の「カードの間隔」 */
.c-workCard{display:flex;flex-direction:column;min-width:0;color:var(--color-text);text-decoration:none}
.c-workCard__image{display:block;overflow:hidden;aspect-ratio:16/10;border-radius:var(--r-card);background:var(--color-bg-hover)}
.c-workCard__image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.c-workCard:hover .c-workCard__image img,.c-workCard:focus-visible .c-workCard__image img{transform:scale(1.04)}
.c-workCard__client{display:block;margin-top:14px;font-size:var(--fs-13);font-weight:var(--fw-regular);line-height:1.8;color:var(--color-text)}
.c-workCard__catch{display:block;margin-top:6px;font-family:var(--font-copy);font-size:var(--fs-16);font-weight:var(--fw-bold);line-height:1.55;
  letter-spacing:var(--tracking)}
.c-workCard__title{display:block;margin-top:6px;font-size:var(--fs-14);font-weight:var(--fw-regular);line-height:1.8;color:var(--color-text)}

/* ---------- チップ（.c-chips／.c-chip） ----------
   サービス・カテゴリへのリンクを小さな角丸で並べるときは、すべてこれを使う
   提供サービス（メンバーカード・支援事例のカード・著者カード）、note のカテゴリ（記事カード・記事詳細・メンバー詳細の経歴）
   <ul class="c-chips"><li><a class="c-chip" href="…">…</a></li></ul>（div に a を並べてもよい）
   ふだんは白地に薄い線、ホバーで線が濃くなる（リンクの無いチップ＝href の無い a は、表示だけでホバーしても変わらない）。暗い面の上は is--onDark（透明地に薄い白の線、ホバーで線だけが白に。面の色は変えない）
   記事本文の中（[member] ブロック）でも崩れないよう、ul・li・a は本文のスタイルより強くしている */
.c-chips{display:flex;flex-wrap:wrap;gap:var(--gap-tag)}
ul.c-chips{padding:0;list-style:none}
ul.c-chips > li{display:flex;margin:0;padding:0;line-height:1}
ul.c-chips > li::before{content:none}
a.c-chip{display:inline-block;padding:3px 10px;border:1px solid var(--color-line);border-radius:var(--r-pill);background:var(--color-bg);
  font-size:var(--fs-12);font-weight:var(--fw-regular);line-height:1.5;color:var(--color-text);text-decoration:none;transition:border-color .35s var(--ease),background-color .35s var(--ease)}
a.c-chip[href]:hover,a.c-chip[href]:focus-visible{border-color:var(--color-line-strong);background:var(--color-bg);color:var(--color-text)}
a.c-chip.is--onDark{border-color:var(--color-line-on-dark-strong);background:transparent;color:var(--color-text-on-dark)}
a.c-chip.is--onDark:hover,a.c-chip.is--onDark:focus-visible{border-color:var(--color-line-inverse);background:transparent;color:var(--color-text-on-dark)}

/* ---------- Coming soon（.c-soon） ----------
   準備中のサービス（src/data/service-areas.ts の comingSoon）に付ける文字。囲みは付けない。リンクにはしない
   <span class="c-soon">Coming soon</span>。暗い面の上は is--onDark。大きく見せる場所（トップ・サービス一覧のカード）は is--l */
.c-soon{display:inline-block;flex:0 0 auto;font-family:var(--font-num);font-size:var(--fs-14);font-weight:var(--fw-bold);letter-spacing:var(--tracking);line-height:1.4;color:var(--color-text);white-space:nowrap;vertical-align:middle}
.c-soon.is--onDark{color:var(--color-text-on-dark)}
.c-soon.is--l{font-size:var(--fs-24)}

/* ---------- ご支援企業のロゴ（src/components/ClientLogos.astro・データは src/data/client-logos.ts） ----------
   画像（400×200 の WebP）に白地まで入っているので、カードは角を丸めた画像（2:1・マスの幅いっぱい）
   列の数は置き場所のクラスで --logo-cols を決める（既定 5 列）。間隔は 4px（図の中の部品として、下の「カードの間隔」の対象外）
   白い面の上に置くときは is--bordered（<ClientLogos bordered />）で薄い線を引く */
.c-logos{display:grid;grid-template-columns:repeat(var(--logo-cols,5),minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.c-logos > li{min-width:0;margin:0;padding:0;overflow:hidden;border-radius:var(--r-inner);background:var(--color-bg)}
.c-logos > li::before{content:none}
.c-logos.is--bordered > li{border:1px solid var(--color-line-subtle)}
.c-logos img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:contain}

/* ---------- 線のタブ（.c-lineTabs／.c-lineTab） ----------
   上の線＋番号＋言葉。トップの「よくあるご相談」の領域タブと、サービス領域ページの配下のサービスへのリンク（hero の下）。
   選んでいるとき（.is--active）とホバーは濃い線・濃い文字、ほかは薄い線・薄い文字。button でも a でもよい */
.c-lineTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-card);margin:0;padding:0;list-style:none}
.c-lineTab{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;height:100%;margin:0;padding:16px 0;border:0;border-top:1px solid var(--color-line-mid);border-radius:0;
  background:none;color:var(--color-text-muted);font-family:var(--font-copy);font-weight:var(--fw-bold);text-align:left;text-decoration:none;cursor:pointer;
  transition:color .35s var(--ease),border-color .35s var(--ease)}
.c-lineTab:hover,.c-lineTab.is--active{border-top-color:var(--color-line-strong);color:var(--color-text)}
/* 選ぶものではないリンクの並び（サービス領域ページの配下のサービス）は .c-lineTabs.is--strong：ふだんから濃く、ホバーは名前の下線（.c-textLink）で示す */
.c-lineTabs.is--strong .c-lineTab{border-top-color:var(--color-line-strong);color:var(--color-text)}
.c-lineTab:focus-visible{outline:2px solid var(--color-line-strong);outline-offset:2px}
.c-lineTab__num{font-family:var(--font-num);font-size:var(--fs-12);line-height:1;letter-spacing:var(--tracking)}
.c-lineTab__text{font-size:var(--fs-16);line-height:1.55;letter-spacing:var(--tracking)}
.c-lineTab__sub{margin-top:-4px;font-size:var(--fs-14);font-weight:var(--fw-regular);line-height:1.6;letter-spacing:var(--tracking)}
/* ページ内のセクションへ飛ぶ線のタブ（サービス領域ページ・実績一覧）：番号の行の右端に下向きの矢印（.c-arrow.is--s.is--down）。ホバーでボタンと同じく線が伸びる
   矢印は横向きの箱を 90° 回しているので、見た目が箱の右端より 6px 内側・4px 下に来る。見た目を列の右端から 8px 内側・番号の高さにそろえる（margin-right 2px＋6px＝8px） */
.c-lineTab__head{display:flex;align-items:center;justify-content:space-between;gap:8px;align-self:stretch}
.c-lineTab__head .c-arrow.is--down{top:-4px;margin-right:2px}
/* hero の下に置く、ページ内のセクションへのリンクの帯。下の空きは 16px・タブ同士の空きも 16px（PC・SP 共通）。飛んだ先は画面の上から 80px（各ページの CSS の scroll-margin-top） */
.c-anchorNav{padding:0 0 16px;background:var(--color-bg)}
.c-anchorNav .c-lineTabs{gap:16px}

/* ---------- 記事のカード（.c-mediaCards の中の src/components/cms/MediaItem.astro） ----------
   NOTE の一覧と同じ枠のカード。NOTE の一覧・カテゴリ別一覧・トップの NOTE で共通（ページの CSS に書き写さない）。
   PC 3 列・999px 以下 2 列・599px 以下 1 列。.is--cols2 は PC も 2 列（記事詳細の関連する記事）。
   タイトルの高さは行数なり。横に並ぶカードは高さがそろい（グリッドの stretch）、アイコンとカテゴリはカードの下にそろう（.c-mediaItem__meta の margin-top:auto） */
.c-mediaCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card-link);margin:0;padding:0;border-top:0;list-style:none;opacity:1}
.c-mediaCards .c-mediaItem{display:flex;flex-direction:column;min-height:0;padding:22px;border:0;border-radius:var(--r-card);
  background:var(--color-bg);box-shadow:inset 0 0 0 1px var(--color-line);transition:box-shadow .35s var(--ease)}
.c-mediaCards .c-mediaItem:hover{background:var(--color-bg);box-shadow:inset 0 0 0 1.5px var(--color-line-strong)}
.c-mediaCards .c-mediaItem::before{display:none}
.c-mediaCards .c-mediaItem .c-overlayBorderLink{border-radius:var(--r-card)}
.c-mediaCards .c-overlayBorderLink::before,.c-mediaCards .c-overlayBorderLink::after{display:none}
.c-mediaCards .c-overlayBorderLink:focus-visible{outline:2px solid var(--color-line-strong);outline-offset:2px}
.c-mediaCards .c-mediaItem__content{display:flex;flex-direction:column;gap:0;width:100%;height:100%}
.c-mediaCards .c-mediaItem__title{display:block;margin:0;font-size:var(--fs-16);line-height:1.65}
/* 執筆者のアイコンとカテゴリは、どの幅でも横並び・左寄せ（main.css は 959px 以下で縦並びにしていて、align-items:center と重なると中央に寄る） */
.c-mediaCards .c-mediaItem__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:auto;padding-top:16px;border-top:0}
.c-mediaCards .c-mediaItem__date{display:none}
.c-mediaCards .c-mediaItem__tags .c-chip:nth-of-type(n+2){display:none}
.c-mediaCards .c-mediaItem__metaInner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.c-mediaCards .c-mediaItem__tags{max-height:26px;overflow:hidden}
.c-mediaCards .c-mediaItem__author{display:flex;align-items:center;gap:8px}
.c-mediaCards .c-mediaItem__avatar{display:block;flex:none;width:32px;height:32px;overflow:hidden;border-radius:50%;background:var(--color-bg-hover)}
.c-mediaCards .c-mediaItem__avatar img{display:block;width:100%;height:100%;object-fit:cover;color:transparent;font-size:0}
.c-mediaCards.is--cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:999px){.c-mediaCards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){
  .c-mediaCards,.c-mediaCards.is--cols2{grid-template-columns:1fr}
}

/* ---------- カードの間隔（縦横とも） ----------
   リンクのカード（カード全体が詳細へのリンク）は var(--gap-card-link)＝24px、情報だけのカードは var(--gap-card)＝8px。
   新しくカードを並べるときは、入れ物をどちらかの一覧に足す（ページの CSS に gap を書かない）。
   ボタンの並び・チップ・タブ・フォーム・写真の帯・図の中の部品は対象外。 */
body :is(
  .c-memberCards,.p-aboutCases,.p-aboutGroup,.p-aboutService,
  .p-case__grid,.p-caseRelated__list,
  .p-homeCases,.p-homePlan__grid,
  .p-media__list,.p-mediaDetail__relatedList,
  .p-svc__works,.p-svcd__works,
  .l-bottomCta__contents
){gap:var(--gap-card-link)}
/* 事例のカード・メンバーのカードの一覧は、縦だけ 48px（画像の下に文字が続くので、行の区切りを広く取る） */
body :is(.c-memberCards,.p-case__grid,.p-caseRelated__list,.p-svc__works,.p-svcd__works,.p-homeCases,.p-aboutCases){row-gap:var(--gap-card-row)}
body :is(
  .c-voices,.r-proof,.p-homeProof,.p-homeArea__grid,.c-accList,
  .p-area__issues,.p-area__planList,.p-area__whys,.p-area__services,.p-area__others,
  .p-svcd__issues,.p-svcd__whys,.p-svcd__scopes,.p-svcd__plans,.p-svcd__links,.p-svcd__vs,.p-svcd__team,.p-svcd__cells,
  .p-svcd__offers,.p-svcd__conds,.p-svcd__phases,.p-svcd__problems,.p-svcd__principles,.p-svcd__flow
){gap:var(--gap-card)}

/* ---------- アコーディオン（.c-acc。src/components/Accordion.astro・記事本文の FAQ は body.ts の accordionHtml()） ----------
   2 つの型：ふつう（メンバー詳細の主な実績など）と .is--qa（よくある質問。左に Q／A）。開閉は site.ts の setAccordion（高さのアニメーション）。
   面は、ふだん薄いグレー、グレーのセクション（.r-sec.is--gray）の中では白。並べる入れ物は .c-accList（間 8px。上のカードの間隔の一覧） */
.c-accList{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.c-acc{margin:0;overflow:hidden;border-radius:var(--r-card);background:var(--color-bg-subtle)}
.r-sec.is--gray .c-acc{background:var(--color-bg)}
.c-acc__toggle{position:relative;display:flex;gap:16px;align-items:baseline;width:100%;margin:0;padding:20px 56px 20px 24px;border:0;background:none;
  font-family:var(--font-copy);font-size:var(--fs-16);font-weight:var(--fw-bold);line-height:1.6;letter-spacing:var(--tracking);text-align:left;color:var(--color-text);cursor:pointer}
.c-acc__toggle:focus-visible{outline:2px solid var(--color-line-strong);outline-offset:-2px;border-radius:var(--r-card)}
.c-acc__toggle > .c-accIcon{position:absolute;right:24px;top:50%;margin-top:-7px}
.c-acc__mark{flex:none;font-family:var(--font-num);font-size:var(--fs-14);font-weight:var(--fw-bold);color:var(--color-text)}
.c-acc__content{height:0;overflow:hidden;transition:height .4s var(--ease)}
.c-acc__body{display:flex;gap:16px;padding:0 56px 22px 24px;font-size:var(--fs-14);line-height:1.95;color:var(--color-text)}
.c-acc__text{flex:1 1 0;min-width:0}
.c-acc__text > :first-child{margin-top:0}
.c-acc__text > :last-child{margin-bottom:0}
.c-acc__text p{margin:0;font-size:inherit;line-height:inherit}
.c-acc__text p + p{margin-top:12px}
@media(max-width:599px){
  .c-acc__toggle{padding:18px 48px 18px 18px;font-size:var(--fs-14)}
  .c-acc__toggle > .c-accIcon{right:18px}
  .c-acc__body{padding:0 18px 20px}
}
@media(prefers-reduced-motion:reduce){.c-acc__content{transition:none}}

/* a11y.css */
/* 全ページ共通：アクセシビリティの最低限の対応（SiteHead で最後に読み込む） */

/* キーボード操作のときだけ、フォーカス位置をはっきり見せる */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-line-strong);
  outline-offset: 3px;
}
:where(.is--dark, .svc-dark, .l-footer, .l-header__megaAi) :where(a, button):focus-visible {
  outline-color: var(--color-line-inverse);
}

/* 動きを減らす設定の人には、フェードイン・スクロール・切り替えのアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}