/* =========================================================
   renewal/service.css — サービス系ページ（TOP のトンマナに揃える上書き）
   読み込み順：各ページの \3c style> → renewal.css → このファイル
   対象：
     A. service/index.html                 （.p-svc）
     B. service/owned-media・delegated-marketing・build-inhouse（.p-svcd）
     C. service/crm ほか旧デザイン 5ページ   （.p-serviceList）
   方針：黒・灰・白のみ。区切りは背景色と余白。カードは枠線なし・角丸の面
        （白セクション上ではグレー、グレーセクション上では白）。
        料金・比較の「表」とFAQの行だけは細い罫線を残す。
   ========================================================= */

/* ---------- 0. 共通 ---------- */
/* コンテンツ幅を TOP（1280px）に揃える */
@media(min-width:960px){
  :is(.p-svc,.p-svcd,.p-service) .l-container,:is(.p-svc,.p-svcd,.p-service) .l-header__inner{max-width:1280px}
}
/* 見出しは文節で折り返す（SPで語の途中で切れないように） */
:is(.p-svc,.p-svcd,.p-service) :is(.r-pageHead__title,.r-head__title,.p-svcd__ctaTitle){word-break:auto-phrase}
/* 見出し（.r-head）の直後のコンポーネントは、見出し側の余白（40px）だけにする */
:is(.p-svc,.p-svcd) .r-head + *{margin-top:0}

/* ページ上部：詳細ページの英字ラベルの位置に置く、領域名のタグ（ストラテジー&PM… / AIベース） */
.svc-tag{display:inline-flex;align-items:center;padding:4px 12px;border:1px solid var(--color-line);border-radius:var(--r-pill);
  font-family:var(--font-copy);font-size:var(--fs-12);font-weight:var(--fw-bold);line-height:1.5;letter-spacing:var(--tracking);text-transform:none;
  color:var(--color-text);vertical-align:1px}
.svc-tag.is--ai{background:var(--color-bg-dark);border-color:var(--color-line-strong);color:var(--color-text-on-dark)}
/* ページ上部：キャッチとボタン */
.svc-catch{margin:18px 0 0;font-family:var(--font-copy);font-size:var(--fs-heading-4);font-weight:var(--fw-bold);line-height:1.6;
  letter-spacing:var(--tracking);color:var(--color-text)}
.svc-catch + .r-pageHead__lead{margin-top:16px}
.svc-heroCta{margin:32px 0 0}
@media(max-width:599px){
  .svc-catch{word-break:auto-phrase}
  .svc-heroCta .c-btn{width:100%}
}

/* 黒いセクション（MESSAGE / CONTACT）：TOP の is--dark と同じ角丸の面。下に白い余白を残す */
.svc-dark{margin-bottom:72px}
@media(max-width:599px){.svc-dark{margin-bottom:48px}}

/* ボタン列（黒い面の中） */
@media(max-width:639px){
  .svc-dark .c-btn{width:100%}
}

/* ---------- 1. カードの面（共通ルール） ---------- */
.p-svcd__issue,.p-svcd__why,.p-svcd__scope,.p-svcd__plan,.p-svcd__linkArea,.p-svcd__teamCell,.p-svcd__cell,.p-svcd__offer,.p-svcd__cond,.p-svcd__phase,.p-svcd__flowItem,.p-svcd__problem,.p-svcd__principle,.p-svcd__vsCol{
  background:var(--color-bg-subtle);border:0;border-radius:var(--r-card)}
/* グレーのセクション（.r-sec.is--gray）の中では白い面（クライアントの声と同じ） */
.r-sec.is--gray :is(.p-svcd__issue,.p-svcd__why,.p-svcd__scope,.p-svcd__plan,.p-svcd__linkArea,.p-svcd__teamCell,.p-svcd__cell,.p-svcd__offer,.p-svcd__cond,.p-svcd__phase,.p-svcd__flowItem,.p-svcd__problem,.p-svcd__principle,.p-svcd__vsCol){background:var(--color-bg)}
/* 罫線グリッド（gap:1px＋背景色）をやめ、余白で並べる */
.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__conds,.p-svcd__phases,.p-svcd__problems,.p-svcd__principles{
  gap:16px;background:none;border:0}

/* =========================================================
   A. サービス一覧（.p-svc）
   ========================================================= */
/* 01 2つのアプローチ：比較表（表なので行の罫線は残す） */
.p-svc__compare{gap:16px;background:none;border:0}
.p-svc__compareCol{background:var(--color-bg);border-radius:var(--r-card);overflow:hidden}
.p-svc__compareHead{padding:30px 32px 24px;border-bottom:1px solid var(--color-line-subtle)}
.p-svc__compareLabel{font-size:var(--fs-12);font-weight:var(--fw-bold);letter-spacing:var(--tracking)}
.p-svc__compareName{margin-top:10px;font-family:var(--font-copy);font-size:var(--fs-heading-1);line-height:1.3;letter-spacing:var(--tracking)}
.p-svc__compareCatch{margin-top:10px;font-size:var(--fs-14);line-height:1.8}
.p-svc__compareRow{padding:16px 32px}
.p-svc__compareKey{font-size:var(--fs-12);letter-spacing:var(--tracking)}
.p-svc__compareVal{margin-top:6px;font-size:var(--fs-14);line-height:1.85}
@media(max-width:767px){.p-svc__compareHead{padding:24px 22px 20px}.p-svc__compareRow{padding:14px 22px}}

/* 02 従来型：領域ごとのテーマをカードで */
.p-svc__area{margin-top:56px}
.p-svc__areaHead{gap:8px}
.p-svc__areaName .p-svcPh{display:inline-block}
.p-svc__areaName{padding:0;border:0;display:block;font-family:var(--font-copy);font-size:var(--fs-heading-3);line-height:1.5;letter-spacing:var(--tracking)}
.p-svc__areaLead{font-size:var(--fs-14);line-height:1.9}
.p-svc__items{margin-top:20px;border:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.p-svc__item{display:flex;flex-direction:column;gap:0;padding:24px 24px 22px;border:0;border-radius:var(--r-card);background:var(--color-bg-subtle);
  transition:background-color .3s var(--ease)}
.p-svc__item:hover{background:var(--color-bg-hover)}
.p-svc__itemName{position:relative;display:block;padding-right:24px;font-family:var(--font-copy);font-size:var(--fs-18);line-height:1.5;word-break:auto-phrase}
.p-svc__itemName::after{position:absolute;right:0;top:.2em;margin-left:0;font-size:var(--fs-14);transition:transform .25s var(--ease),color .25s}
.p-svc__item:hover .p-svc__itemName::after{transform:translateX(3px);color:var(--color-text)}
.p-svc__itemBody{flex:1 1 auto;display:flex;flex-direction:column;margin-top:10px}
.p-svc__itemDesc{font-size:var(--fs-14);line-height:1.85}
.p-svc__itemGain{margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--color-line);font-size:var(--fs-14);line-height:1.75}
.p-svc__itemDesc:not(:last-child){margin-bottom:16px}
.p-svc__itemGain::before{display:none}

/* 03 AIベース：白い面を2枚 */
.p-svc__ai{gap:16px;background:none;border:0}
.p-svc__aiCard{padding:40px 40px 36px;background:var(--color-bg);border-radius:var(--r-card)}
.p-svc__aiNum{font-size:var(--fs-13);letter-spacing:var(--tracking)}
.p-svc__aiName{margin-top:8px;font-family:var(--font-copy);font-size:var(--fs-heading-1);line-height:1.35;letter-spacing:var(--tracking)}
.p-svc__aiCatch{margin-top:10px;font-size:var(--fs-16)}
.p-svc__aiText{max-width:820px;font-size:var(--fs-14);line-height:2.05}
.p-svc__aiPhase{gap:12px;background:none;border:0}
.p-svc__aiPhaseItem{padding:20px 22px;border-radius:var(--r-inner);background:var(--color-bg-subtle)}
.p-svc__aiPhaseLabel{font-size:var(--fs-12);letter-spacing:var(--tracking)}
.p-svc__aiPhaseName{font-family:var(--font-copy);font-size:var(--fs-18)}
.p-svc__aiPhaseText{font-size:var(--fs-14);line-height:1.85}
.p-svc__aiListLabel{font-size:var(--fs-13);letter-spacing:var(--tracking)}
.p-svc__aiList{gap:8px;background:none;border:0}
.p-svc__aiList li{padding:12px 16px;border-radius:var(--r-inner);background:var(--color-bg-subtle);font-size:var(--fs-14)}
@media(max-width:767px){.p-svc__aiCard{padding:28px 22px 26px}.p-svc__aiList{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 04 実績（p-svc / p-svcd 共通）：TOP の事例と同じ組み */
.p-svc__works,.p-svcd__works{gap:40px 24px}
/* サービス詳細の実績（3 件）：件数が奇数のときは 2 列（2＋1 で空きが出る）にせず、959px 以下は 1 列にする */
.p-svcd__works:has(> :nth-child(odd):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:959px){.p-svcd__works:has(> :nth-child(odd):last-child){grid-template-columns:minmax(0,1fr)}}
.p-svc__more,.p-svcd__more{margin-top:32px}

/* 最後の CTA 帯 */

/* =========================================================
   B. サービス詳細（.p-svcd）
   ========================================================= */
.p-svcd__h3{padding-top:0;border-top:0;display:block;font-family:var(--font-copy);font-size:var(--fs-heading-3);line-height:1.5;letter-spacing:var(--tracking)}
.p-svcd__block{margin-top:72px}
.p-svcd__blockLead{max-width:820px;margin:12px 0 0;font-size:var(--fs-14);line-height:2.05;color:var(--color-text)}

/* よくある課題・こんな状況 */
.p-svcd__issues{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-svcd__issue{padding:26px 26px 24px}
.p-svcd__issueMark{font-size:var(--fs-13);letter-spacing:var(--tracking)}
.p-svcd__issueTitle{margin-top:10px;font-family:var(--font-copy);font-size:var(--fs-20);line-height:1.55}
.p-svcd__issueText{margin-top:10px;font-size:var(--fs-14);line-height:1.85}
@media(max-width:1023px){.p-svcd__issues{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.p-svcd__issues{grid-template-columns:1fr;gap:10px}.p-svcd__issue{padding:22px 20px}}

/* THE MOLTSなら（番号＋本文） */
.p-svcd__whys{gap:12px}
.p-svcd__why{grid-template-columns:112px minmax(0,1fr)}
.p-svcd__whyNum{padding:30px 0 0 32px;font-size:var(--fs-40);font-weight:var(--fw-bold);letter-spacing:var(--tracking);font-variant-numeric:tabular-nums}
.p-svcd__whyBody{padding:30px 36px 30px 0}
.p-svcd__whyTitle{font-family:var(--font-copy);font-size:var(--fs-heading-3);line-height:1.55}
.p-svcd__whyText{margin-top:12px;font-size:var(--fs-14);line-height:2}
@media(max-width:767px){.p-svcd__why{grid-template-columns:1fr}.p-svcd__whyNum{padding:24px 22px 0;font-size:var(--fs-32)}.p-svcd__whyBody{padding:12px 22px 26px}}

/* クライアントの声 */
.p-svcd__h3 + .c-voices{margin-top:24px}
/* 件数が奇数（いまは 3 件）のときは、2 列（2＋1 で空きが出る）にせず 1 列にする */
@media(max-width:959px){.p-svcd .c-voices:has(> li:nth-child(odd):last-child){grid-template-columns:minmax(0,1fr)}}

/* 支援範囲 */
.p-svcd__scope{padding:28px 30px 24px}
.p-svcd__scopeHead{gap:12px}
.p-svcd__scopeNum{font-size:var(--fs-13);letter-spacing:var(--tracking)}
.p-svcd__scopeName{font-family:var(--font-copy);font-size:var(--fs-heading-3)}
.p-svcd__scopeLead{margin-top:8px;font-size:var(--fs-14);color:var(--color-text)}
.p-svcd__scopeList{margin-top:14px;border-top:0;gap:0 24px}
.p-svcd__scopeList li{padding:5px 0 5px 16px;border-bottom:0;font-size:var(--fs-14);line-height:1.7}
.p-svcd__scopeList li::before{top:calc(5px + .85em)}
@media(max-width:639px){.p-svcd__scope{padding:22px 20px 20px}}

/* 提供形態（料金。価格の上下の細罫は残す） */
.p-svcd__plan{padding:30px 28px 28px}
.p-svcd__planWho{font-size:var(--fs-12);letter-spacing:var(--tracking)}
.p-svcd__planName{margin-top:8px;font-family:var(--font-copy);font-size:var(--fs-heading-3)}
.p-svcd__planPrice{margin-top:18px;padding:16px 0;border-color:var(--color-line-subtle)}
.p-svcd__planPriceValue{font-size:var(--fs-48);font-weight:var(--fw-bold);letter-spacing:var(--tracking)}
.p-svcd__planText{margin-top:18px;font-size:var(--fs-14);line-height:1.9}
.p-svcd__planFit{font-size:var(--fs-14)}
.p-svcd__planFit b{font-size:var(--fs-12);letter-spacing:var(--tracking)}
.p-svcd__planNote{font-size:var(--fs-13)}
@media(max-width:1023px){.p-svcd__plans{gap:10px}}

/* 他のサービスと連動 */
.p-svcd__linkArea{padding:28px 28px 22px}
.p-svcd__linkCombo{font-size:var(--fs-13);letter-spacing:var(--tracking)}
.p-svcd__linkTitle{margin-top:12px;padding-top:0;border-top:0;font-family:var(--font-copy);font-size:var(--fs-20);line-height:1.55}
.p-svcd__linkText{margin:10px 0 22px;font-size:var(--fs-14);line-height:1.9}
.p-svcd__linkList{padding:10px 0 0;border-top:1px solid var(--color-line)}
.p-svcd__linkList li,.p-svcd__linkList li:last-child{border:0}
.p-svcd__linkList a{margin:0 -10px;padding:9px 36px 9px 10px;border-radius:var(--r-inner);transition:background-color .25s var(--ease)}
.p-svcd__linkList a::after{content:none}
.p-svcd__linkList .c-arrow{position:absolute;right:12px;top:50%}
.p-svcd__linkList a:hover{padding-left:10px;background:var(--color-bg)}
.r-sec.is--gray .p-svcd__linkList a:hover{background:var(--color-bg-subtle)}
.p-svcd__linkList b{font-size:var(--fs-14)}
.p-svcd__linkList span{font-size:var(--fs-13)}
@media(max-width:639px){.p-svcd__linkArea{padding:22px 20px 18px}}

/* 分業型 vs フルスタック（フルスタック側を黒い面に） */
.p-svcd__vsCol{padding:30px 30px 28px}
.p-svcd__vsLabel{font-size:var(--fs-12);letter-spacing:var(--tracking)}
.p-svcd__vsName{margin-top:10px;font-family:var(--font-copy);font-size:var(--fs-heading-3);line-height:1.5}
/* ds-allow:raw-button -- 図の中のラベル */
.p-svcd__vsNode{height:32px;padding:0 14px;border:0;border-radius:var(--r-pill);background:var(--color-bg);font-size:var(--fs-13)}
.p-svcd__vsText{margin-top:20px;font-size:var(--fs-14);line-height:1.9}
.p-svcd__vsCol:not(.is--muted),.r-sec.is--gray .p-svcd__vsCol:not(.is--muted){background:var(--color-bg-dark);color:var(--color-text-on-dark)}
.p-svcd__vsCol:not(.is--muted) .p-svcd__vsLabel{color:var(--color-text-on-dark)}
.p-svcd__vsCol:not(.is--muted) .p-svcd__vsName{color:var(--color-text-on-dark)}
.p-svcd__vsCol:not(.is--muted) .p-svcd__vsText{color:var(--color-text-on-dark)}
.p-svcd__vsCol:not(.is--muted) .p-svcd__vsArrow{color:var(--color-text-on-dark)}
.p-svcd__vsCol:not(.is--muted) .p-svcd__vsNode{background:var(--color-bg-on-dark);color:var(--color-text-on-dark)}
.p-svcd__vsCol:not(.is--muted) .p-svcd__vsNode.is--key{background:var(--color-bg);color:var(--color-text)}
@media(max-width:767px){.p-svcd__vsCol{padding:24px 22px}}

/* なぜ1人で全部できるのか */
.p-svcd__team{margin-top:24px}
.p-svcd__teamCell{padding:28px 28px 26px}
.p-svcd__teamCell.is--dark,.r-sec.is--gray .p-svcd__teamCell.is--dark{background:var(--color-bg-dark)}
.p-svcd__teamRole{font-size:var(--fs-12);letter-spacing:var(--tracking)}
.p-svcd__teamName{margin-top:8px;font-family:var(--font-copy);font-size:var(--fs-20)}
.p-svcd__teamText{font-size:var(--fs-14);line-height:1.9}
.p-svcd__teamTags li{padding:5px 12px;border:0;border-radius:var(--r-pill);background:var(--color-bg);font-size:var(--fs-13)}
@media(max-width:767px){.p-svcd__teamCell{padding:24px 22px}}

/* 番号付きグリッド（能力・成果・流れ） */
.p-svcd__cells.is--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.p-svcd__cell{padding:24px 24px 26px}
.p-svcd__cellNum{font-size:var(--fs-13);letter-spacing:var(--tracking)}
.p-svcd__cellName{margin-top:8px;font-family:var(--font-copy);font-size:var(--fs-18);line-height:1.5}
.p-svcd__cellText{margin-top:8px;font-size:var(--fs-14);line-height:1.85}
@media(max-width:1023px){.p-svcd__cells.is--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.p-svcd__cells,.p-svcd__cells.is--2,.p-svcd__cells.is--4{grid-template-columns:1fr}.p-svcd__cell{padding:20px 20px 22px}}

/* できること・構築するもの（2列のカード） */
.p-svcd__offers{border-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.p-svcd__offer{display:flex;flex-direction:column;gap:0;padding:26px 28px 24px}
.p-svcd__offer > div{flex:1 1 auto;display:flex;flex-direction:column}
.p-svcd__offerName{font-family:var(--font-copy);font-size:var(--fs-20);line-height:1.5}
.p-svcd__offerDesc{margin-top:10px;font-size:var(--fs-14);line-height:1.85}
.p-svcd__offerGain{margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--color-line);font-size:var(--fs-14);line-height:1.75}
.p-svcd__offerDesc:not(:last-child){margin-bottom:16px}
.p-svcd__offerGain::before{display:none}
@media(max-width:767px){.p-svcd__offers{grid-template-columns:1fr;gap:10px}.p-svcd__offer{padding:22px 20px}}

/* 受けられる条件 */
.p-svcd__cond{padding:26px 26px 24px}
.p-svcd__condNum{border-radius:50%;font-size:var(--fs-13)}
.p-svcd__condName{margin-top:14px;font-family:var(--font-copy);font-size:var(--fs-18);line-height:1.5}
.p-svcd__condText{font-size:var(--fs-14);line-height:1.85}
.p-svcd__condWhy{margin-top:16px;padding:26px 30px;border-radius:var(--r-card)}
.p-svcd__condWhy b{font-family:var(--font-copy);font-size:var(--fs-18)}
.p-svcd__condWhy span{font-size:var(--fs-14);line-height:1.95}
@media(max-width:639px){.p-svcd__conds{gap:10px}}

/* フェーズ（ビルド型） */
.p-svcd__phase{padding:28px 28px 26px}
.p-svcd__phase.is--build,.r-sec.is--gray .p-svcd__phase.is--build{background:var(--color-bg-dark)}
.p-svcd__phaseLabel{font-size:var(--fs-12);letter-spacing:var(--tracking)}
.p-svcd__phaseName{margin-top:10px;font-family:var(--font-copy);font-size:var(--fs-20)}
.p-svcd__phaseCatch{font-size:var(--fs-14)}
.p-svcd__phaseText{margin-top:12px;font-size:var(--fs-14);line-height:1.9}
@media(max-width:1023px){.p-svcd__phases{gap:10px}}

/* 具体的な進め方 */
.p-svcd__flow{border-top:0;display:flex;flex-direction:column;gap:10px}
.p-svcd__flowItem{padding:22px 28px;border-bottom:0}
.p-svcd__flowNum{font-size:var(--fs-22);font-weight:var(--fw-bold);letter-spacing:var(--tracking)}
.p-svcd__flowBody b{font-family:var(--font-copy);font-size:var(--fs-18)}
.p-svcd__flowBody span{font-size:var(--fs-14);line-height:1.85}
@media(max-width:767px){.p-svcd__flowItem{padding:20px 20px}}

/* よくある質問（面を並べる） */

/* PROBLEM（箇条書き付きカード） */
.p-svcd__problem{padding:28px 28px 24px}
.p-svcd__problemMark{font-size:var(--fs-13);letter-spacing:var(--tracking)}
.p-svcd__problemTitle{margin-top:10px;font-family:var(--font-copy);font-size:var(--fs-heading-3);line-height:1.55}
.p-svcd__problemList{margin-top:14px;border-top:0}
.p-svcd__problemList li{padding:6px 0 6px 16px;border-bottom:0;font-size:var(--fs-14);line-height:1.8}
.p-svcd__problemList li::before{top:calc(6px + .9em)}
@media(max-width:1023px){.p-svcd__problems{gap:10px}}
@media(max-width:639px){.p-svcd__problem{padding:22px 20px 20px}}

/* ABOUT：数字 */
.p-svcd__principles{margin-top:20px;gap:12px}
.p-svcd__principle{grid-template-columns:220px minmax(0,1fr)}
.p-svcd__principleName{padding:28px 0 26px 28px}
.p-svcd__principleName small{font-size:var(--fs-12);letter-spacing:var(--tracking)}
.p-svcd__principleName b{font-family:var(--font-copy);font-size:var(--fs-20)}
.p-svcd__principleBody{padding:28px 32px 26px 0}
.p-svcd__principleBody b{font-family:var(--font-copy);font-size:var(--fs-18)}
.p-svcd__principleBody span{font-size:var(--fs-14);line-height:1.9}
.p-svcd__aboutMore{margin-top:28px;text-align:left}
@media(max-width:767px){.p-svcd__principle{grid-template-columns:1fr}
  .p-svcd__principleName{padding:22px 22px 0}.p-svcd__principleBody{padding:10px 22px 22px}}

/* MESSAGE（黒い面） */
.p-svcd__message{padding:88px 0 80px}
.p-svcd__messageBody{max-width:760px;gap:16px}
.p-svcd__messageBody p{font-size:var(--fs-14);line-height:2.05;color:var(--color-text-on-dark)}
.p-svcd__messageCta{margin-top:40px;padding-top:0;border-top:0;align-items:center}
@media(max-width:767px){.p-svcd__message{padding:64px 0 56px}}
/* PC（960px 以上）：見出しの下で、本文（左）とボタン（右）を 2:1 に並べる。ボタンは縦に 2 つ・列の幅いっぱい・下端を本文の下端にそろえる。959px 以下は縦一列のまま */
@media(min-width:960px){
  .p-svcd__message .l-container{display:grid;grid-template-columns:var(--cols-2-1);column-gap:var(--gap-cols);align-items:end}
  .p-svcd__message .r-head{grid-column:1 / -1}
  .p-svcd__messageCta{flex-direction:column;align-items:stretch;margin-top:0}
  .p-svcd__messageCta .c-btn{width:100%}
}

/* CONTACT（オウンドメディア：黒い面） */
.p-svcd__cta{padding:88px 0 80px}
.p-svcd__ctaTitle{font-family:var(--font-copy);font-size:var(--fs-display-2);line-height:1.35;letter-spacing:var(--tracking)}
.p-svcd__ctaText{margin-top:20px;font-size:var(--fs-14);line-height:2.05;color:var(--color-text-on-dark)}
.p-svcd__ctaButtons{margin-top:36px;align-items:center}
.p-svcd__ctaSide{padding:30px 30px 28px;border:0;border-radius:var(--r-inner);background:var(--color-bg-on-dark)}
.p-svcd__ctaSideLabel{font-size:var(--fs-13);letter-spacing:var(--tracking);color:var(--color-text-on-dark)}
.p-svcd__ctaFlow b{font-family:var(--font-copy);font-size:var(--fs-16)}
.p-svcd__ctaFlow span{font-size:var(--fs-14);color:var(--color-text-on-dark)}
.p-svcd__ctaPromise{border-top-color:var(--color-line-inverse);font-size:var(--fs-14);color:var(--color-text-on-dark)}
.p-svcd__ctaPromise b{font-size:var(--fs-14)}
.p-svcd__ctaTopics{margin-top:56px;padding-top:0;border-top:0}
.p-svcd__ctaTopicsLabel{font-size:var(--fs-13);letter-spacing:var(--tracking);color:var(--color-text-on-dark)}
.p-svcd__ctaTopicsList li{padding:8px 16px;border-color:var(--color-line-inverse);border-radius:var(--r-pill);font-size:var(--fs-14)}
@media(max-width:639px){.p-svcd__cta{padding:64px 0 56px}.p-svcd__ctaSide{padding:24px 20px}.p-svcd__ctaButtons{flex-direction:column;align-items:stretch}}

/* =========================================================
   C. 旧デザインのサービス一覧（.p-serviceList）
   サイドバー付きの2カラムは維持し、見出し・カード・余白を TOP に合わせる
   ========================================================= */
/* サイドバー（PC）：罫線の箱をやめ、グレーの角丸の面に */

/* 総点検：小さすぎた文字の底上げ */
.p-svc__aiPhaseText,.p-svcd__planFit{font-size:var(--fs-14)}

/* ===== サービス一覧：分かれ目と遷移を分かりやすく ===== */
/* 目的から探す（hero の下のページ内リンク）：見た目は components.css の .c-anchorNav と線のタブ。PC 3 列×2 段・1023px 以下 2 列・599px 以下 1 列。説明は 12px */
.p-svcJump .c-lineTabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-svcJump .c-lineTab__sub{font-size:var(--fs-12)}
@media(max-width:1023px){.p-svcJump .c-lineTabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){.p-svcJump .c-lineTabs{grid-template-columns:1fr}}

/* 領域ごとに白い箱で区切る */
#conventional .p-svc__area{margin-top:20px;padding:40px;background:var(--color-bg);border-radius:var(--r-card);scroll-margin-top:80px}
/* 見出し → 罫線 → 左：説明とボタン／右：サービスの一覧（幅は 1：2） */
#conventional .p-svc__areaHead{padding-bottom:28px;border-bottom:1px solid var(--color-line-strong)}
#conventional .p-svc__areaBody{display:grid;grid-template-columns:var(--cols-1-2);gap:var(--gap-cols);padding-top:28px}
#conventional .p-svc__areaLead{margin:0;font-size:var(--fs-14);line-height:1.9;color:var(--color-text)}
#conventional .r-areaHead__icon{background:var(--color-bg-subtle)}
/* サービスは名前・説明・得られることを縦に。名前の右に丸の矢印（ArrowCircle） */
#conventional .p-svc__items{display:block;margin:0;background:none;border:0;gap:0}
#conventional .p-svc__item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:0 0 24px;margin:0 0 24px;background:none;border:0;border-radius:0;border-bottom:1px solid var(--color-line-subtle);color:var(--color-text);text-decoration:none;transition:background-color .3s var(--ease)}
#conventional .p-svc__item:last-child{margin-bottom:0;border-bottom:0}
#conventional .p-svc__itemName{grid-column:1;grid-row:1;font-family:var(--font-copy);font-size:var(--fs-20);font-weight:var(--fw-bold);line-height:1.5}
#conventional .p-svc__itemMore{grid-column:2;grid-row:1}
#conventional .p-svc__itemBody{grid-column:1/-1;min-width:0}
#conventional .p-svc__itemDesc{margin:0;font-size:var(--fs-14);line-height:1.85;color:var(--color-text)}
#conventional .p-svc__itemGain{margin:6px 0 0;padding:0;border:0;font-size:var(--fs-14);font-weight:var(--fw-bold);line-height:1.7;color:var(--color-text)}
#conventional .p-svc__itemGain::before{content:"→ ";color:var(--color-text)}
#ai{scroll-margin-top:96px}
@media(max-width:959px){
  #conventional .p-svc__areaBody{grid-template-columns:1fr}
}
@media(max-width:599px){
  #conventional .p-svc__area{padding:28px 20px 20px;border-radius:var(--r-card)}
  #conventional .p-svc__areaHead{padding-bottom:20px}
  #conventional .p-svc__areaBody{padding-top:20px}
  #conventional .p-svc__item{padding-bottom:20px;margin-bottom:20px}
}
#conventional .p-svc__area:first-of-type{margin-top:0}
#conventional .p-svc__itemName::after{content:none;display:none}
#conventional .p-svc__itemName{position:static;padding-right:0}

/* AIを軸にした支援形態：1つずつ箱に入れ、最後に詳細ボタン */
#ai .p-svc__ai{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#ai .p-svc__aiCard{display:flex;flex-direction:column;padding:40px 40px 36px;background:var(--color-bg-subtle);border:0;border-radius:var(--r-card)}
#ai .p-svc__aiCard .r-areaHead{padding-bottom:24px;border-bottom:1px solid var(--color-line-strong)}
#ai .p-svc__aiCard .r-areaHead__icon{background:var(--color-bg-dark);color:var(--color-text-on-dark)}
#ai .p-svc__aiCatch{margin-top:20px}
@media(max-width:999px){#ai .p-svc__ai{grid-template-columns:1fr}}
@media(max-width:599px){#ai .p-svc__aiCard{padding:28px 20px 24px;border-radius:var(--r-card)}}
#ai .p-svc__aiList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#ai .p-svc__aiList li{padding:10px 14px;background:var(--color-bg);border:0;border-radius:var(--r-inner);font-size:var(--fs-14);font-weight:var(--fw-bold);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ai .p-svc__aiPhase{display:flex;flex-direction:column;gap:0;margin-top:22px;background:var(--color-bg);border:0;border-radius:var(--r-inner);padding:4px 20px}
#ai .p-svc__aiPhaseItem{display:grid;grid-template-columns:130px minmax(0,1fr);gap:2px 16px;padding:14px 0;border:0;border-top:1px solid var(--color-line-subtle);background:none}
#ai .p-svc__aiPhaseItem:first-child{border-top:0}
#ai .p-svc__aiPhaseLabel{grid-row:1/3;font-size:var(--fs-12);letter-spacing:var(--tracking);color:var(--color-text)}
#ai .p-svc__aiPhaseName{font-size:var(--fs-14);font-weight:var(--fw-bold)}
#ai .p-svc__aiPhaseText{font-size:var(--fs-14);line-height:1.75;color:var(--color-text)}
@media(max-width:599px){#ai .p-svc__aiPhaseItem{grid-template-columns:1fr}#ai .p-svc__aiPhaseLabel{grid-row:auto}}

/* ===== 02 AIを軸にした支援形態：横長カードを縦に積む（左：説明／右：解説図） ===== */
.p-svcAi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
/* Coming soon の行（is--soon）は 2 つ横に並べる。公開中の行は 1 行を全部使う。SP は 1 列 */
.p-svcAi__row:not(.is--soon){grid-column:1/-1}
@media(max-width:959px){.p-svcAi{grid-template-columns:minmax(0,1fr)}}
.p-svcAi__row{display:grid;grid-template-columns:var(--cols-1-1);gap:var(--gap-cols);align-items:stretch;padding:40px;background:var(--color-bg-subtle);border-radius:var(--r-card);scroll-margin-top:80px}
.p-svcAi__body{display:flex;flex-direction:column;min-width:0}
.p-svcAi__body .r-areaHead{padding-bottom:22px;border-bottom:1px solid var(--color-line-strong)}
.p-svcAi__body .r-areaHead__icon{background:var(--color-bg-dark);color:var(--color-text-on-dark)}
.p-svcAi__text{margin:20px 0 0;font-size:var(--fs-14);line-height:1.95;color:var(--color-text)}
.p-svcAi__row.is--soon{grid-template-columns:1fr;min-height:0}
.p-svcAi__soon{margin:20px 0 0}
.p-svcAi__tags{display:flex;flex-wrap:wrap;gap:var(--gap-tag);margin:18px 0 0;padding:0;list-style:none}
.p-svcAi__tags li{padding:6px 12px;border-radius:var(--r-pill);background:var(--color-bg);font-size:var(--fs-13);font-weight:var(--fw-bold);line-height:1.5}
.p-svcAi__more{margin:auto 0 0;padding-top:28px}
.p-svcAi__more .c-btn{width:100%}
/* 解説図 */
.p-svcAi__fig{display:flex;flex-direction:column;justify-content:center;gap:14px;margin:0;padding:28px;background:var(--color-bg);border-radius:var(--r-inner)}
.p-svcFig__label{margin:0 0 12px;font-family:var(--font-copy);font-size:var(--fs-14);font-weight:var(--fw-bold);color:var(--color-text)}
.p-svcFig__block{padding:20px;border-radius:var(--r-inner)}
.p-svcFig__block.is--before{background:var(--color-bg-subtle)}
.p-svcFig__block.is--after{background:var(--color-bg-dark);color:var(--color-text-on-dark)}
.p-svcFig__block.is--after .p-svcFig__label{color:var(--color-text-on-dark)}
.p-svcFig__flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.p-svcFig__node{display:inline-flex;flex-direction:column;justify-content:center;min-height:40px;padding:6px 12px;border-radius:var(--r-inner);background:var(--color-bg);color:var(--color-text);font-size:var(--fs-13);font-weight:var(--fw-bold);line-height:1.4;box-shadow:inset 0 0 0 1px var(--color-line)}
.p-svcFig__node.is--sm{min-height:32px;padding:4px 10px;font-size:var(--fs-12)}
.p-svcFig__group{display:grid;grid-template-columns:repeat(2,auto);gap:4px}
.p-svcFig__node.is--main{flex:1;min-height:52px;background:var(--color-bg);box-shadow:none;font-size:var(--fs-14)}
.p-svcFig__node.is--main small{margin-top:2px;font-size:var(--fs-12);font-weight:var(--fw-regular);color:var(--color-text)}
.p-svcFig__block.is--after .p-svcFig__node:not(.is--main){background:var(--color-bg-on-dark);color:var(--color-text-on-dark);box-shadow:inset 0 0 0 1px var(--color-line-on-dark-strong)}
.p-svcAi__arrow{position:relative;display:block;width:18px;height:1px;background:var(--color-bg-muted)}
.p-svcAi__arrow::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid var(--color-line);border-right:1px solid var(--color-line);transform:rotate(45deg)}
.p-svcFig__both{position:relative;display:block;width:30px;height:1px;background:var(--color-bg)}
.p-svcFig__both::before,.p-svcFig__both::after{content:"";position:absolute;top:-3px;width:6px;height:6px;border-top:1px solid var(--color-line-inverse)}
.p-svcFig__both::before{left:0;border-left:1px solid var(--color-line-inverse);transform:rotate(-45deg)}
.p-svcFig__both::after{right:0;border-right:1px solid var(--color-line-inverse);transform:rotate(45deg)}
/* 狭い画面では、意思決定者とビルダーを縦に並べ、矢印も縦にする（横並びだとビルダーの枠が細くなり、1〜2 文字ずつ折り返すため） */
@media(max-width:599px){
  .p-svcFig__block.is--after .p-svcFig__flow{flex-direction:column;align-items:stretch}
  .p-svcFig__block.is--after .p-svcFig__both{width:1px;height:24px;margin:0 auto}
  .p-svcFig__block.is--after .p-svcFig__both::before{left:-3px;top:0;transform:rotate(45deg)}
  .p-svcFig__block.is--after .p-svcFig__both::after{left:-3px;right:auto;top:auto;bottom:0;transform:rotate(135deg)}
}
.p-svcFig__support{margin-top:10px;padding:8px 12px;border-radius:var(--r-inner);background:var(--color-bg-on-dark);font-size:var(--fs-13);line-height:1.6;color:var(--color-text-on-dark)}
.p-svcFig__support span{display:inline-block;margin-right:8px;padding:1px 8px;border-radius:var(--r-pill);background:var(--color-bg);color:var(--color-text);font-size:var(--fs-12);font-weight:var(--fw-bold)}
.p-svcFig__cap{margin:12px 0 0;font-size:var(--fs-13);font-weight:var(--fw-bold);line-height:1.6}
.p-svcFig__block.is--before .p-svcFig__cap{color:var(--color-text)}
.p-svcFig__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.p-svcFig__steps li{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 16px;background:var(--color-bg-subtle);border-radius:var(--r-inner)}
.p-svcFig__steps li:last-child{background:var(--color-bg-dark);color:var(--color-text-on-dark)}
.p-svcFig__steps li+li::before{content:"";position:absolute;left:-12px;top:50%;width:12px;height:1px;background:var(--color-bg-muted)}
.p-svcFig__phase{font-family:var(--font-num);font-size:var(--fs-11);font-weight:var(--fw-bold);letter-spacing:var(--tracking);color:var(--color-text)}
.p-svcFig__steps li:last-child .p-svcFig__phase{color:var(--color-text-on-dark)}
.p-svcFig__steps b{font-family:var(--font-copy);font-size:var(--fs-14);line-height:1.4}
.p-svcFig__steps span:last-child{font-size:var(--fs-13);line-height:1.7}
.p-svcFig__asset{display:flex;align-items:center;gap:10px;margin-top:16px;padding:14px 16px;border-radius:var(--r-inner);box-shadow:inset 0 0 0 1px var(--color-line-strong);font-size:var(--fs-14);font-weight:var(--fw-bold);line-height:1.6}
.p-svcFig__assetTag{flex:0 0 auto;padding:3px 10px;border-radius:var(--r-pill);background:var(--color-bg-dark);color:var(--color-text-on-dark);font-size:var(--fs-12)}
@media(max-width:999px){.p-svcAi__row{grid-template-columns:1fr}}
@media(max-width:599px){
  .p-svcAi__row{padding:24px 18px;border-radius:var(--r-card)}
  .p-svcAi__fig{padding:18px}
  .p-svcFig__steps{grid-template-columns:1fr}
  .p-svcFig__steps li+li::before{left:50%;top:-12px;width:1px;height:12px}
}
@media(min-width:1100px){.p-svcAi__row{min-height:536px}}

/* ---------- サービス下層：THE MOLTSなら の「私たちについて」（黒パネル） ---------- */
.p-svcd__about{display:grid;grid-template-columns:var(--cols-2-1);gap:0;margin:0 0 48px;overflow:hidden;background:var(--color-bg-dark);border-radius:var(--r-card);color:var(--color-text-on-dark)}
.p-svcd__aboutImg{position:relative;margin:0;min-height:100%;background:var(--color-bg-dark)}
.p-svcd__aboutImg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;color:transparent;font-size:0}
.p-svcd__aboutBody{padding:36px 40px}
.p-svcd__aboutBody .p-svcd__aboutLabel{margin:0 0 18px;font-family:var(--font-copy);font-size:var(--fs-heading-3);font-weight:var(--fw-bold);letter-spacing:var(--tracking);line-height:1.5;color:var(--color-text-on-dark)}
.p-svcd__aboutBody p{margin:0 0 14px;font-size:var(--fs-16);line-height:1.95;color:var(--color-text-on-dark)}
.p-svcd__aboutStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--color-line-on-dark)}
.p-svcd__aboutStats dt{font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--color-text-on-dark)}
.p-svcd__aboutStats dd{display:flex;align-items:baseline;gap:5px;margin:6px 0 0;font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--color-text-on-dark)}
.p-svcd__aboutStats dd span{font-family:var(--font-num);font-size:var(--fs-heading-2);font-weight:var(--fw-bold);line-height:1;letter-spacing:var(--tracking);font-variant-numeric:tabular-nums}
.p-svcd__aboutLinks{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0!important}
/* 番号つきの強み（.p-svcd__whys）のあとに置くときは、上に余白をとる */
.p-svcd__whys + .p-svcd__about{margin:48px 0 0}
@media(max-width:767px){
  .p-svcd__about{grid-template-columns:1fr;margin-bottom:36px}
  .p-svcd__whys + .p-svcd__about{margin-top:36px}
  .p-svcd__aboutImg{min-height:0;aspect-ratio:16/9}
  .p-svcd__aboutBody{padding:24px 22px}
  .p-svcd__aboutStats{grid-template-columns:1fr;gap:12px}
  .p-svcd__aboutLinks .c-btn{width:100%}
}

/* ---------- サービス下層：ページ上部のロゴ＋CTA（TOPと同じ見せ方） ---------- */
.svc-heroProof{margin:40px 0 0}
/* ロゴ（<ClientLogos bordered>・2:1 のカード・角丸 8px は components.css の .c-logos）。ここでは列の数だけ：PC 10 列×2 段・999px 以下 5 列・599px 以下 4 列 */
.svc-heroLogos{--logo-cols:10}
.svc-heroCta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.svc-heroCta .c-btn{min-width:240px}
@media(max-width:999px){
  .svc-heroLogos{--logo-cols:5}
}
@media(max-width:599px){
  .svc-heroProof{margin-top:28px}
  .svc-heroLogos{--logo-cols:4}
  .svc-heroCta{flex-direction:column}
  .svc-heroCta .c-btn{width:100%}
}

/* =========================================================
   対応チャネル・コンテンツ・CMS（p-svcd__cov）
   サービス詳細に「何を扱えるか」を並べるブロック
   ========================================================= */
.p-svcd__cov{margin-top:44px;border-top:1px solid var(--color-line)}
.p-svcd__covRow{display:grid;grid-template-columns:270px minmax(0,1fr);gap:48px;
  padding:38px 0;border-bottom:1px solid var(--color-line)}
.p-svcd__covNum{display:block;font-family:var(--font-num);font-size:var(--fs-12);font-weight:var(--fw-bold);
  letter-spacing:var(--tracking);color:var(--color-text)}
.p-svcd__covName{margin:8px 0 0;font-family:var(--font-copy);font-size:var(--fs-heading-3);font-weight:var(--fw-bold);
  line-height:1.45;letter-spacing:var(--tracking);color:var(--color-text)}
.p-svcd__covLead{margin:10px 0 0;font-size:var(--fs-14);line-height:1.9;color:var(--color-text)}

.p-svcd__covItems{margin:0;padding:0;list-style:none}
.p-svcd__covItem{display:grid;grid-template-columns:170px minmax(0,1fr);gap:24px;
  align-items:start;padding:16px 0;border-bottom:1px solid var(--color-line-subtle)}
.p-svcd__covItem:first-child{padding-top:0}
.p-svcd__covItem:last-child{padding-bottom:0;border-bottom:0}
.p-svcd__covItemName{font-family:var(--font-copy);font-size:var(--fs-14);font-weight:var(--fw-bold);
  line-height:1.7;color:var(--color-text)}

.p-svcd__covTags{display:flex;flex-wrap:wrap;gap:var(--gap-card) var(--gap-tag);margin:0;padding:0;list-style:none}
.p-svcd__covTags li{padding:6px 13px;background:var(--color-bg);border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--color-line);font-size:var(--fs-13);line-height:1.6;color:var(--color-text)}
.r-sec.is--gray .p-svcd__covTags li{background:var(--color-bg);box-shadow:none}
.p-svcd__covNote{margin:26px 0 0;font-size:var(--fs-13);line-height:1.95;color:var(--color-text)}
/* チップだけが並ぶ行：左（番号・見出し・説明）とチップの縦位置を中央でそろえる（左右 2 列のとき） */
@media(min-width:1024px){
  .p-svcd__covRow:has(> .p-svcd__covBody > .p-svcd__covTags){align-items:center}
}

@media(max-width:1023px){
  .p-svcd__covRow{grid-template-columns:1fr;gap:20px;padding:30px 0}
  .p-svcd__covLead{max-width:640px}
}
@media(max-width:639px){
  .p-svcd__covItem{grid-template-columns:1fr;gap:10px;padding:14px 0}
  .p-svcd__covTags li{font-size:var(--fs-13);padding:5px 11px}
}

/* ===== /service/ 見出し右の図（4つの領域の重なりと、真ん中のAI） ===== */
.p-svcHeroFig{margin:0;color:var(--color-text);pointer-events:none}
.p-svcHeroFig svg{display:block;width:100%;height:auto;overflow:visible}
.p-svcHeroFig__orbit circle{fill:none;stroke:var(--color-line);stroke-width:1;stroke-dasharray:2 5}
/* ds-allow:raw-color -- 図の円の、ごく薄い塗り */
.p-svcHeroFig__circles circle{fill:rgba(29,25,23,.035);stroke:var(--color-line-strong);stroke-width:1}
.p-svcHeroFig__labels text{font-family:var(--font-copy);font-size:var(--fs-13);font-weight:var(--fw-bold);fill:var(--color-bg-dark)}
.p-svcHeroFig__labels text.is--en{font-family:var(--font-num);font-size:var(--fs-11);letter-spacing:var(--tracking);fill:var(--color-bg-dark)}
.p-svcHeroFig__core circle{fill:var(--color-accent)}
.p-svcHeroFig__ai{font-family:var(--font-num);font-size:var(--fs-11);font-weight:var(--fw-bold);letter-spacing:var(--tracking);fill:var(--color-bg-dark)}
/* 960px 以上：文字（左）と図（右）を 3:2 の 2 列に、上下の中央でそろえる。959px 以下は文字 → 図の縦並び（あいだ 48px・図は最大 520px で中央） */
@media(min-width:960px){
  /* ds-allow:column-ratio -- サービストップの hero の文字と図は、指示で 3:2（changelog の 16） */
  .p-svcHead .l-container{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--gap-cols);align-items:center}
}
/* 図の上の空き：文字の下から、図の見えている上端（点線の円。図の上から 14／520）まで 40px。600〜959px は図が 520px なので 40−14＝26px */
@media(max-width:959px){.p-svcHeroFig{max-width:520px;margin:26px auto 0}}
/* 図の幅が 460px より狭くなる幅（1279px 以下）では、図の中のラベルが小さくなりすぎないよう大きくし（PC 13／11 → 16／14。375px で表示は約 10px）、
   はみ出しが画面の端にかからないよう円に 10 寄せる（左のラベルは右へ、右のラベルは左へ。円の線にはかからない） */
@media(max-width:1279px){
  .p-svcHeroFig__labels text{font-size:var(--fs-16)}
  .p-svcHeroFig__labels text.is--en{font-size:var(--fs-14)}
  .p-svcHeroFig__labels text[text-anchor="end"]{transform:translateX(10px)}
  .p-svcHeroFig__labels text:not([text-anchor]){transform:translateX(-10px)}
  /* 日英の行の間を PC と同じ比率（日本語の行の高さの 0.14）に：文字を大きくしたぶん、英字の行を 5 下げる */
  .p-svcHeroFig__labels text.is--en[text-anchor="end"]{transform:translate(10px,5px)}
  .p-svcHeroFig__labels text.is--en:not([text-anchor]){transform:translate(-10px,5px)}
}
/* 599px 以下：図は列の 80%（ラベルが画面の端にかからないよう、全体を小さく）。図が小さくなるぶん、ラベルは 20／16 にして表示を 10px 前後に保つ
   上の空き 40px は、図の幅（列の 80%）に対する 14／520 を引く（margin の % は列の幅に対する割合なので 0.8×14／520＝2.154%） */
@media(max-width:599px){
  .p-svcHeroFig{width:80%;margin-top:calc(40px - 2.154%)}
  .p-svcHeroFig__labels text{font-size:var(--fs-20)}
  .p-svcHeroFig__labels text.is--en{font-size:var(--fs-16)}
  /* 文字が大きいぶん、円に寄せるのは 4 だけ（10 だと左のラベルが円の線から 2px まで近づく） */
  .p-svcHeroFig__labels text[text-anchor="end"]{transform:translateX(4px)}
  .p-svcHeroFig__labels text:not([text-anchor]){transform:translateX(-4px)}
  .p-svcHeroFig__labels text.is--en[text-anchor="end"]{transform:translate(4px,10px)}
  .p-svcHeroFig__labels text.is--en:not([text-anchor]){transform:translate(-4px,10px)}
}

/* サービス詳細：セクションの説明文（.r-head__lead）は幅を固定しない（列いっぱい） */
.p-svcd .r-head__lead{max-width:none}