/* =========================================================
renewal/about.css — あり方・会社・メンバー系ページ
対象：reason / nice-to-meet-you / company（index・molts・kascade・kraft・staut・oar-free・statement）/ member（一覧・個別）
読み込み順：renewal.css の「後」
---------------------------------------------------------
1. 共通（コンテンツ幅・ページ末CTA・タグ・ヒーロー画像）
2. 事例カード（コンポーネント WorkCard に移した：components.css の .c-workCard。並べる入れ物 .p-aboutCases だけここ）（人物カードは MemberCard：.c-memberCard）
3. 会社情報（理念・概要表・グループ）
4. 7つの質問（reason）
5. 私たちのあり方（nice-to-meet-you / p-stance）
6. メンバー個別（プロフィール・職歴）
7. company/statement（旧TOPの実績一覧）
========================================================= */
/* ---------- 1. 共通 ---------- */
@media(min-width:960px){.l-container{max-width:1280px}}
.p-about{padding-bottom:0!important;color:var(--color-text)}
.p-about .r-pageHead__lead p{margin:0}
.p-about .r-pageHead__lead p+p{margin-top:12px}
.p-about .r-head__lead p{margin:0}
.p-about img{max-width:100%}
/* ローカルでは assets/uploads/ の写真が無い：代替テキストを出さずグレーの面だけ残す */
.p-aboutProfile__photo img,.p-stance__workImg img,.p-aboutProjects .p-topProjects__images img{color:transparent;font-size:0}
/* 見出しの改行位置（文節で折り返す） */
.p-about .r-pageHead__title,.p-about .r-head__title,.p-stance .p-stance__h2{word-break:auto-phrase;text-wrap:balance}
/* ページ末のCTA帯 */
/* タグ（提供領域など）：小さな角丸チップ */
/* 下層ヒーロー画像（角丸・写真が無いときもグレーの面で崩さない） */
/* 数字（TOP p-homeProof と同じ見せ方） */
.p-aboutProof{display:grid;grid-template-columns:var(--cols-1-2);gap:var(--gap-cols);align-items:center}
.p-aboutProof__stats{margin:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--color-line)}
.p-aboutProof__stats div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--color-line)}
.p-aboutProof__stats dt{font-size:var(--fs-14);font-weight:var(--fw-regular);color:var(--color-text)}
.p-aboutProof__stats dd{margin:0;font-size:var(--fs-14);font-weight:var(--fw-bold);white-space:nowrap}
.p-aboutProof__stats dd .r-num{margin:0 6px 0 2px;font-size:var(--fs-num);font-weight:var(--fw-bold);line-height:1;letter-spacing:var(--tracking)}
.p-aboutProof__note{margin:10px 0 0;font-size:var(--fs-13);color:var(--color-text)}
@media(max-width:999px){.p-aboutProof{grid-template-columns:1fr}}
/* カード群（r-card を並べる） */
/* ---------- 2. 人物カード（TOP「ご相談の流れ」の担当者カードと同じ形） ---------- */
/* 事例カード（TOP p-homeCases と同じ見せ方） */
.p-aboutCases{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
/* 3 件を横一列（DLY・OAR FREE の実績） */
.p-aboutCases.is--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:959px){.p-aboutCases.is--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:699px){.p-aboutCases,.p-aboutCases.is--3{grid-template-columns:1fr;gap:32px}}
/* ---------- 3. 会社情報 ---------- */
/* 理念：TOP「Our Way」と同じ黒い角丸セクション */
/* 会社概要の表：罫線を残す */
.p-aboutOverview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 64px}
.p-aboutOverview.is--single{gap:0 64px}
.p-aboutTable{margin:0;border-top:1px solid var(--color-line-strong)}
.p-aboutTable div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--color-line);font-size:var(--fs-14);line-height:1.8}
.p-aboutTable dt{font-weight:var(--fw-bold);color:var(--color-text)} /* 項目名は太字（会社情報の .p-co__table と同じ。changelog の 22） */
.p-aboutTable dd{margin:0}
.p-aboutTable__map{margin-left:8px;font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--color-text);white-space:nowrap}
.p-aboutTable__map:hover{color:var(--color-text)}
.p-aboutOverview.is--single .p-aboutOverview__col+.p-aboutOverview__col .p-aboutTable{border-top-color:var(--color-line-strong)}
@media(max-width:959px){.p-aboutOverview,.p-aboutOverview.is--single{grid-template-columns:1fr;gap:40px}
.p-aboutOverview.is--single{gap:0}.p-aboutOverview.is--single .p-aboutOverview__col+.p-aboutOverview__col .p-aboutTable{border-top:0}
.p-aboutTable div{grid-template-columns:88px minmax(0,1fr);font-size:var(--fs-14)}}
/* グループ一覧：白い角丸の面 */
.p-aboutGroup{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.p-aboutGroup li{display:flex}
.p-aboutGroup__link{position:relative;display:flex;flex-direction:column;width:100%;padding:28px;background:var(--color-bg);border-radius:var(--r-card);
color:var(--color-text);text-decoration:none;transition:box-shadow .35s var(--ease)}
.r-sec:not(.is--gray) .p-aboutGroup__link{background:var(--color-bg-subtle)}
/* ホバー：サービスのカード・NOTE のカードと同じ濃い枠線（1.5px）。見出しがロゴの画像なので下線は無し。背景の色は変えない */
.p-aboutGroup__link:hover,.p-aboutGroup__link:focus-visible{box-shadow:inset 0 0 0 1.5px var(--color-line-strong)}
/* ロゴは高さをそろえる（幅は各ロゴの比率のまま。会社情報のグループ一覧と同じ考え方） */
.p-aboutGroup__logo{display:flex;align-items:center;height:32px;padding-right:48px}
.p-aboutGroup__logo img{display:block;width:auto;max-width:100%;height:100%}
.p-aboutGroup__text{margin-top:18px;font-size:var(--fs-14);line-height:1.9;color:var(--color-text)}
/* 矢印はロゴの行の右端（ロゴの高さ 32px の真ん中） */
.p-aboutGroup__more{position:absolute;right:28px;top:calc(28px + 16px);transform:translateY(-50%)}
@media(max-width:767px){.p-aboutGroup{grid-template-columns:1fr;gap:10px}.p-aboutGroup__link{padding:24px 22px}.p-aboutGroup__more{right:22px;top:calc(24px + 16px)}}
/* グループ会社のページ見出し（ロゴ） */
/* DLY・OAR FREE の hero のロゴ：高さは PC 48px・SP 40px で固定 */
.p-aboutCompanyHead .r-pageHead__title img{display:block;width:auto;height:48px}
@media(max-width:959px){.p-aboutCompanyHead .r-pageHead__title img{height:40px}}
/* サービス提供領域 */
.p-aboutIntro{max-width:820px;margin:0 0 40px}
.p-aboutIntro p{margin:0 0 1.2em;font-size:var(--fs-14);line-height:2.05;color:var(--color-text)}
.p-aboutIntro section{margin:0}
.p-aboutService{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.p-aboutService li{display:flex}
.p-aboutService__link{position:relative;display:flex;flex-direction:column;width:100%;padding:24px 22px;background:var(--color-bg);border-radius:var(--r-card);color:var(--color-text);text-decoration:none;transition:box-shadow .35s var(--ease)}
/* ホバー：NOTE のカードと同じく、濃い枠線（1.5px）と見出しの下線（.c-textLink）。背景の色は変えない */
.p-aboutService__link:hover,.p-aboutService__link:focus-visible{box-shadow:inset 0 0 0 1.5px var(--color-line-strong)}
/* 見出しの行：左に見出し、右端に矢印（changelog の 22 で右下から移した） */
.p-aboutService__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.p-aboutService__arrow{flex:none}
.p-aboutService__name{font-family:var(--font-copy);font-size:var(--fs-18);font-weight:var(--fw-bold);line-height:1.5}
.p-aboutService__text{margin-top:8px;font-size:var(--fs-14);line-height:1.85;color:var(--color-text)}
@media(max-width:1099px){.p-aboutService{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){.p-aboutService{grid-template-columns:1fr;gap:10px}}
/* 子会社ページ（OAR FREE・DLY）のサービス提供領域：PC（960px 以上）は左に説明文、右にサービスのカードを縦 1 列（1:1。changelog の 22）。
959px 以下は説明文 → カード（上の 2／1 列）の縦並び */
@media(min-width:960px){
.p-aboutSplit{display:grid;grid-template-columns:var(--cols-1-1);gap:var(--gap-cols);align-items:start}
.p-aboutSplit .p-aboutIntro{max-width:none;margin:0}
.p-aboutSplit .p-aboutIntro > section > :last-child{margin-bottom:0}
.p-aboutSplit .p-aboutService{grid-template-columns:1fr}
}
/* ---------- 4. 7つの質問（reason） ---------- */
/* 目次：質問のリスト（罫線の行） */
/* Q2：支援領域・体制 */
/* Q3：お問い合わせの種類 */
/* Q4：支援先の内訳 */
/* Q5：特徴（番号つきの行） */
/* Q6：成果実感度・推奨率 */
/* Q7：クライアントの声 */
/* ---------- 5. 私たちのあり方（p-stance の上書き） ---------- */
.p-stance .p-stance__sec{padding:80px 0 88px}
.p-stance .p-stance__side .r-head__label{margin-bottom:12px}
.p-stance .p-stance__h2{padding-left:0;font-family:var(--font-copy);font-size:var(--fs-heading-1);line-height:1.3;letter-spacing:var(--tracking)}
.p-stance .p-stance__h2::before{display:none}
.p-stance .p-stance__side .p-stance__lead{margin-top:18px;font-size:var(--fs-16);line-height:1.95;color:var(--color-text)}
.p-stance .p-stance__h3,.p-stance .p-stance__subhead,.p-stance .p-stance__close{font-family:var(--font-copy)}
.p-stance .p-stance__close{font-size:var(--fs-heading-3);border-top-color:var(--color-line-strong)}
.p-stance .p-stance__p{font-size:var(--fs-14)}
.p-stance .p-stance__statNum{font-family:var(--font-num);font-weight:var(--fw-bold);font-size:var(--fs-num);letter-spacing:var(--tracking)}
.p-stance .p-stance__stat{border-top-width:1px}
.p-stance .p-stance__logos img{border-radius:var(--r-inner);mix-blend-mode:multiply}
.p-stance .p-stance__workImg{border-radius:var(--r-card)}
.p-stance .p-stance__workCatch{font-family:var(--font-copy)}
.p-stance .p-stance__voices{gap:16px}
.p-stance .p-stance__voice{padding:26px 26px 22px;border-top:0;background:var(--color-bg);border-radius:var(--r-card)}
.p-stance .p-stance__voice blockquote{font-size:var(--fs-14);color:var(--color-text)}
.p-stance .p-stance__more{text-align:right}
.p-stance .p-stance__side{top:112px}
@media(min-width:1024px){.p-stance .p-stance__grid{grid-template-columns:340px minmax(0,1fr)}}
@media(max-width:1023px){.p-stance .p-stance__voices{gap:10px}}
@media(max-width:767px){.p-stance .p-stance__sec{padding:64px 0 72px}}
/* 締め：黒い角丸セクション（TOP「Our Way」と同じトーン） */
.p-stance .l-layout__content,.p-stance main.l-layout__content{padding-bottom:88px!important}
@media(max-width:767px){.p-stance .l-layout__content{padding-bottom:64px!important}}
/* ---------- 6. メンバー個別 ---------- */
.p-aboutProfile__grid{display:grid;grid-template-columns:var(--cols-2-1);gap:var(--gap-cols);align-items:start}
.p-aboutProfile .r-pageHead__label{text-transform:none;letter-spacing:var(--tracking)}
/* 肩書き：h2・16px・レギュラー・黒（英字ラベルの共通の見た目より強くする） */
.p-aboutProfile h2.p-aboutProfile__role{font-family:var(--font-copy);font-size:var(--fs-16);font-weight:var(--fw-regular);line-height:1.6;color:var(--color-text)}
.p-aboutProfile__en{margin:10px 0 0;font-family:var(--font-num);font-size:var(--fs-16);font-weight:var(--fw-bold);letter-spacing:var(--tracking);color:var(--color-text)}
.p-aboutProfile .r-pageHead__lead{margin-top:28px;font-size:var(--fs-16)}
@media(max-width:959px){.p-aboutProfile__grid{grid-template-columns:1fr}
.p-aboutProfile__photo{order:-1;max-width:320px}}
@media(max-width:599px){.p-aboutProfile__photo{max-width:none}}
/* 職歴タイムライン：既存の構造を活かし、TOPの紙面に寄せる */
.p-aboutHistory{margin:0!important;padding:0!important}
.p-aboutHistory .p-memberHistory__timeline{margin:0;padding:0}
.p-aboutHistory .p-memberHistory__group{display:grid;grid-template-columns:var(--cols-1-3);gap:var(--gap-cols);padding:32px 0 40px;border-top:1px solid var(--color-line-strong)}
.p-aboutHistory .p-memberHistory__group+.p-memberHistory__group{border-top-color:var(--color-line)}
/* 入社年月の無いメンバー（職歴を書いていない人）は、実績・執筆記事を横いっぱいに */
.p-aboutHistory .p-memberHistory__body:only-child{grid-column:1/-1}
.p-aboutHistory .p-memberHistory__header{position:static;width:auto;margin:0;padding:0;border:0;background:none}
.p-aboutHistory .p-memberHistory__header::before,.p-aboutHistory .p-memberHistory__header::after,
.p-aboutHistory .p-memberHistory__group::before,.p-aboutHistory .p-memberHistory__group::after,
.p-aboutHistory .p-memberHistory__timeline::before,.p-aboutHistory .p-memberHistory__timeline::after{display:none}
.p-aboutHistory .p-memberHistory__date,.p-aboutHistory .p-memberHistory__date span{background:none!important}
.p-aboutHistory .p-memberHistory__date{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0;text-align:left}
.p-aboutHistory .p-memberHistory__year{font-family:var(--font-num);font-size:var(--fs-28);font-weight:var(--fw-bold);line-height:1.1;letter-spacing:var(--tracking)}
.p-aboutHistory .p-memberHistory__label{font-size:var(--fs-18);font-weight:var(--fw-bold);color:var(--color-text)}
.p-aboutHistory .p-memberHistory__body{min-width:0;margin:0;padding:0;border:0}
.p-aboutHistory .p-memberHistory__item+.p-memberHistory__item{margin-top:32px;padding-top:32px;border-top:1px solid var(--color-line)}
.p-aboutHistory .p-memberHistory__title{margin:0;font-family:var(--font-copy);font-size:var(--fs-heading-3);font-weight:var(--fw-bold);line-height:1.55}
@media(max-width:959px){.p-aboutHistory .p-memberHistory__title{font-size:var(--fs-20)}} /* 職歴の h3：PC 24px・SP 20px */
.p-aboutHistory .p-memberHistory__description{margin:12px 0 0;font-size:var(--fs-14);line-height:2;color:var(--color-text)}
.p-aboutHistory .p-memberHistory__section{margin-top:48px}
.p-aboutHistory .p-memberHistory__sectionTitle{margin:0 0 16px;font-family:var(--font-copy);font-size:var(--fs-18);font-weight:var(--fw-bold)}
/* 執筆コンテンツ：NOTE 一覧と同じカード（components.css の .c-mediaCards.is--cols2）。最大 6 件 */
/* 主な実績：共通のアコーディオン（・components.css の .c-acc） */
.p-aboutHistory .p-aboutCases{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:959px){.p-aboutHistory .p-memberHistory__group{grid-template-columns:1fr;padding:28px 0 32px}}
@media(max-width:599px){.p-aboutHistory .p-aboutCases{grid-template-columns:1fr}}
/* ---------- 7. company/statement ---------- */
.p-aboutStatementHead .r-pageHead__title{max-width:900px;font-size:var(--fs-heading-1);line-height:1.5}
.p-aboutStatementHead .r-pageHead__title br{display:none}
.p-aboutProof.is--head{display:block;max-width:560px;margin-top:40px}
.p-aboutHeadBtns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:36px}
.p-aboutProjects{padding:0!important;margin:0!important;background:none!important}
.p-aboutProjects .p-topProjects__headToggle{display:flex;gap:6px;margin:0 0 24px}
/* ds-allow:raw-button -- 表示の切り替えタブ（詳細／簡易）。行動のボタンではない */
.p-aboutProjects .p-topProjects__headToggleButton{height:38px;padding:0 18px;border:1px solid var(--color-line);border-radius:var(--r-pill);background:var(--color-bg);font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--color-text);cursor:pointer}
.p-aboutProjects .p-topProjects__headToggleButton.is--selected{background:var(--color-bg-dark);border-color:var(--color-line-strong);color:var(--color-text-on-dark)}
.p-aboutProjects .p-topProjects__item{margin-top:0!important;padding:28px;border-radius:var(--r-card);background:var(--color-bg);border:0!important;overflow:hidden}
@media(max-width:599px){.p-aboutProjects .p-topProjects__item{padding:20px}}
.p-aboutProjects .p-topProjects__list{display:flex;flex-direction:column;gap:12px}
.p-aboutProjects .p-topProjects__mainImage,.p-aboutProjects .p-topProjects__thumbnail{border-radius:var(--r-inner);overflow:hidden;background:var(--color-bg-hover)}
.p-aboutProjects .p-topProjects__title{font-family:var(--font-copy)}
.p-aboutProjects .p-topProject__more{margin-top:32px;text-align:right}
.p-aboutProjects .p-topProjects__headToggle{width:auto;padding:0;background:none}
.p-aboutProjects .p-topProjects__headToggleButton{flex:0 0 auto;box-shadow:none!important}
.p-aboutProjects .p-topProjects__inner{margin-top:0}
/* ---------- SP の細部 ---------- */
.p-aboutHistory .p-memberHistory__articleMeta{flex-direction:row;align-items:center;justify-content:flex-start}
/* 総点検：小さすぎた文字の底上げ */
/* グループ会社紹介文中の箇条書き（company/dly） */
.p-aboutIntro ul{margin:0 0 1.2em;padding:0;list-style:none;border-top:1px solid var(--color-line)}
.p-aboutIntro li{position:relative;padding:10px 0 10px 22px;border-bottom:1px solid var(--color-line);font-size:var(--fs-14);font-weight:var(--fw-bold);line-height:1.75}
.p-aboutIntro li::before{content:"";position:absolute;left:2px;top:22px;width:8px;height:1px;background:var(--color-bg-dark)}
/* ---------- メンバー一覧：縦一列（写真左・情報右） ---------- */
/* ---------- メンバー一覧：横4列・正方形の写真（.c-memberPhoto）・名前の右に丸の矢印 ---------- */
/* 並び：写真 → 名前 → 英字 → 肩書き → 特長 */
/* 詳細ページへの導線：名前の右（カードの下の段の右端）に丸の矢印（ArrowCircle）。文字が矢印に重ならないよう右をあける */
/* 並び：写真 → 肩書き → 名前 → 英字名 → リンク（肩書きを大きく） */
/* メンバー一覧：一覧のセクションは白・上下の余白 0（上は hero の下 80／64px、下は の 80／64px） */
.r-sec.p-memberList{padding:0;background:var(--color-bg)}
/* メンバー詳細：コアメンバーの下は 0（相談ブロックまでは の 80／64px） */
.r-sec.p-memberCore{padding-bottom:0}
/* メンバー詳細：担当できるサービス（hero の下の独立したセクション。上は hero の下 80／64px、下も 80／64px） */
.r-sec.p-memberSvcSec{padding:0 0 80px}
/* hero と担当できるサービスのあいだは、指示で 48px（PC・SP とも）。hero の下の余白（80／64px）の例外 */
.r-pageHead.p-aboutProfile:has(+ .p-memberSvcSec){padding-bottom:48px}
@media(max-width:959px){.r-sec.p-memberSvcSec{padding-bottom:64px}}
/* 職歴・実績のセクションがないメンバーは、すぐ下がコアメンバー（白）なので、白どうしの余白を重ねない */
.p-memberSvcSec + .p-memberCore{padding-top:0}
/* メンバー詳細「主な実績」の「もっと見る」（src/components/MemberCases.astro）：上下に線の行・中央に「もっと見る」＋＋のアイコン。ホバーで線と文字を濃く */
.p-memberCasesMore{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin:40px 0 0;padding:20px 0;border:0;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);border-radius:0;
background:none;color:var(--color-text);font-family:var(--font-copy);font-size:var(--fs-14);font-weight:var(--fw-bold);line-height:1.5;cursor:pointer;transition:border-color .35s var(--ease)}
.p-memberCasesMore:hover{border-color:var(--color-line-strong)}
.p-memberCasesMore:focus-visible{outline:2px solid var(--color-line-strong);outline-offset:2px}