/* MV透かし（data-mv方式＝html_emailPageと同じ流儀） */
.service_detailPage .subpagesMv .inner[data-mv="production"]::after{content:"PRODUCTION"}
.service_detailPage .subpagesMv .inner[data-mv="coding"]::after{content:"CODING"}
.service_detailPage .subpagesMv .inner[data-mv="testing"]::after{content:"TESTING"}
.service_detailPage .subpagesMv .inner[data-mv="marketing"]::after{content:"MARKETING"}
/* 見出し・本文の余白と行間（svcpMain配下のみ・既存ページに影響しない） */
.svcpMain .commonH2{position:relative;margin:8px 0 30px;padding-bottom:20px;font-size:3rem;line-height:1.5;font-weight:900;letter-spacing:.02em}
.svcpMain .commonH2:first-of-type{margin-top:44px}
/* 見出し下：オレンジの主線＋両脇の細い青ライン（既存flowの下線を拡張） */
.svcpMain .commonH2::before{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:230px;max-width:70%;height:1px;background:#D9E1EC}
.svcpMain .commonH2::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:46px;height:3px;background:#004DA0;border-radius:2px}
/* 英字ラベル（eyebrow）＝見出しの上に小さく。data-en属性で出す */
.svcpMain .commonH2[data-en]{margin-top:66px}
.svcpMain .commonH2[data-en]::first-line{}
.svcp-eyebrow{display:block;text-align:center;font-family:'Zen Kaku Gothic New',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;color:#004DA0;margin:66px 0 2px;text-transform:uppercase}
.svcpMain .svcp-eyebrow + .commonH2{margin-top:0}
.svcpMain p{font-size:1.6rem;line-height:1.9;margin:14px 0;color:#222;font-weight:400}
.svcpMain .svcp-ctaWrap{margin:28px 0 34px}
.svcp-catch{margin-top:6px}
.svcpMain>.inner>.svcp-fig:first-of-type{max-width:500px;margin:14px auto 0}
.svcpMain>.inner>.svcp-fig:first-of-type+.svcp-lead--fv{margin-top:10px}
.svcpMain .svcp-lead.svcp-lead--fv{max-width:640px;margin:6px auto 0;text-align:left;font-size:1.6rem;line-height:1.9;color:#3a4454}
/* service_pages.css — サービス特化4ページ専用（2026-09-04 新規） */
/* 既存CSSには一切手を入れない。読み込みを外せば元に戻る。 */
.svcpMain .pageLead{margin-bottom:24px}
.svcp-catch{text-align:center;font-size:22px;font-weight:700;color:#16283f;margin:0 0 4px;line-height:1.6}
.svcp-lead{text-align:left;font-size:15.5px;line-height:2;margin:0 0 10px;color:#222}
.svcp-ctaWrap{margin:22px 0;text-align:center}
.svcp-btn{display:inline-block;background:#ed6c00;color:#fff;font-weight:700;font-size:16px;padding:14px 44px;border-radius:6px;text-decoration:none}
.svcp-btn:hover{opacity:.85}
.svcp-list{margin:16px 0;padding-left:0;list-style:none}
.svcp-list li{position:relative;padding-left:1.5em;margin:10px 0;font-size:1.6rem;line-height:1.9;color:#222}
.svcp-list li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;border-radius:2px;background:#004da0}
.svcp-note{font-size:13.5px;color:#5a6474;margin:10px 0}
.svcp-tablewrap{overflow-x:auto;margin:14px 0}
.svcp-table{border-collapse:collapse;width:100%;font-size:15px}
.svcp-table th{background:#EAF0F8;color:#16283f;font-weight:700;text-align:left;padding:10px 16px;border-bottom:2px solid #004da0}
.svcp-table td{border-bottom:1px solid #dfe4ec;padding:10px 16px}
.svcp-table td:last-child{white-space:nowrap;font-weight:700}
.svcp-reason h3{font-size:16.5px;color:#004da0;margin:20px 0 6px;font-weight:700}
.svcp-reason p{margin:0 0 10px}
.svcp-env{display:grid;grid-template-columns:1fr 1fr;gap:8px 32px;margin:14px 0;background:#f0f4fa;border-radius:8px;padding:18px 24px}
.svcp-env h3{font-size:14.5px;color:#004da0;margin:8px 0 6px;font-weight:700}
.svcp-env ul{margin:0;padding-left:1.2em}
.svcp-env li{margin:3px 0;line-height:1.8}
.svcp-faq{margin:14px 0}
.svcp-faq dt{font-weight:700;font-size:1.6rem;margin-top:18px;padding-left:1.8em;position:relative;line-height:1.8}
.svcp-faq dt::before{content:"Q";position:absolute;left:0;top:.05em;color:#004da0;font-weight:900;font-size:17px}
.svcp-faq dd{margin:4px 0 0 1.8em;font-size:1.55rem;color:#3a4454;line-height:1.9}
.svcp-rel{margin:34px 0 6px;border-top:1px solid #dfe4ec;padding-top:18px}
.svcp-rel-ttl{font-weight:700;margin:0 0 8px;font-size:14.5px}
.svcp-rel ul{margin:0;padding-left:1.3em}
.svcp-rel li{margin:5px 0}
.svcp-rel a{color:#004da0;display:inline-block;padding:8px 0}
.svcp-rel li{margin:0}
/* MVのh1はテンプレ既定lh1.15＝1行想定。data-mv付き（新4ページのみ）は複数行になるため行間を確保 */
.subpagesMv .inner[data-mv] h1{line-height:1.45}
.svcp-stats{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0}
.svcp-stat{flex:1;min-width:150px;background:#f0f4fa;border-top:3px solid #004da0;border-radius:0 0 8px 8px;padding:16px 12px;text-align:center}
.svcp-stat-num{display:block;font-size:34px;font-weight:900;color:#16283f;line-height:1.2}
.svcp-stat-num small{font-size:18px}
.svcp-stat-label{display:block;font-size:13px;color:#5a6474;margin-top:4px}
/* ===== 完成版ビジュアル用 ===== */
.svcp-fig{margin:20px auto 24px;max-width:620px;text-align:center}
.svcp-fig svg{display:block;width:100%;height:auto}
.svcp-fig img{max-width:100%;height:auto;border-radius:6px;border:1px solid #dfe4ec}
.svcp-fig figcaption{font-size:12.5px;color:#5a6474;margin-top:8px}
.svcp-scope{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin:20px 0 8px}
.svcp-scope>div{background:#f0f4fa;border-radius:8px;padding:14px 6px 12px;text-align:center}
.svcp-scope svg{width:40px;height:40px;display:block;margin:0 auto 8px}
.svcp-scope span{display:block;font-size:12px;font-weight:700;color:#16283f;line-height:1.5}
.svcp-scope small{display:block;font-size:10px;color:#004da0;font-weight:700}
.svcp-envIco{width:26px;height:26px;vertical-align:-7px;margin-right:6px}
.svcp-cases{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.svcp-cases a{display:block;text-decoration:none}
.svcp-cases img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid #dfe4ec;display:block}
.svcp-cases span{display:block;font-size:12.5px;font-weight:700;color:#16283f;margin-top:7px;text-align:center}
.svcp-report{max-width:640px;margin:20px auto;border:1px solid #dfe4ec;border-radius:8px;overflow:hidden;background:#fff}
.svcp-report-head{display:flex;justify-content:space-between;align-items:center;background:#004da0;color:#fff;font-weight:700;font-size:14px;padding:10px 16px}
.svcp-report-date{font-size:11.5px;color:#b9c6da;font-weight:400}
.svcp-report table{width:100%;border-collapse:collapse;font-size:12.5px}
.svcp-report th{background:#f0f4fa;color:#16283f;font-weight:700;text-align:left;padding:7px 12px;border-bottom:1px solid #dfe4ec}
.svcp-report th:not(:first-child),.svcp-report td:not(:first-child){text-align:center;white-space:nowrap}
.svcp-report td{padding:7px 12px;border-bottom:1px solid #eef1f6}
.svcp-report .ok{color:#2c7035;font-weight:700}
.svcp-report .fix{color:#bf5700;font-size:11px;font-weight:700}
.svcp-report-note{font-size:11.5px;color:#5a6474;margin:0;padding:9px 14px 12px}
.svcp-video video{width:100%;max-width:660px;height:auto;border-radius:6px;border:1px solid #dfe4ec}
@media(max-width:760px){.svcp-scope{grid-template-columns:repeat(4,1fr)}.svcp-cases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.svcp-scope{grid-template-columns:repeat(2,1fr)}}
/* プレースホルダー（画像・図解の予定地。素材が入り次第このブロックを差し替える） */
.svcp-ph{display:flex;gap:14px;align-items:center;background:#eef1f6;border:2px dashed #9aa4b4;border-radius:8px;padding:14px 18px;margin:18px 0}
.svcp-ph-box{flex:none;width:96px;height:64px;border-radius:4px;background:linear-gradient(135deg,#c7cdd6,#9fa8b5);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:12px;letter-spacing:.1em}
.svcp-ph-desc{font-size:13px;line-height:1.7;color:#5a6474}
.svcp-ph-desc b{color:#1a2230}
@media(max-width:640px){
.svcp-catch{font-size:18.5px}
.svcp-env{grid-template-columns:1fr}
.svcp-stats{flex-direction:column}
.svcp-ph{flex-direction:column;align-items:flex-start}
}
/* ------------------------------------------------------------------
セクション下端の余白と地色（2026-09-04 修正）
既存ページのコンテンツ節は `sec sec1 secCommonPd` で、`.sec1` が
padding:92px 0 140px と background:#f5f5f5 を持つ。新4ページは
`sec secCommonPd svcpMain` で .sec1 を持たないため、CTA下端と
フッターの間隔が 0px になり「くっついて見える」不具合が出ていた
（実測：既存flow=140px / 新ページ=0px）。既存と同値を明示する。
------------------------------------------------------------------ */
.svcpMain{padding:92px 0 140px;background-color:#f5f5f5}
@media only screen and (max-width:1200px){.svcpMain{padding:90px 0 120px}}
@media only screen and (max-width:768px){.svcpMain{padding:80px 0}}
@media only screen and (max-width:640px){.svcpMain{padding:60px 0}}
/* 横長の説明図（工程の並びなど、横に伸びる図解用）。既定620pxより広く取る */
.svcp-fig--wide{max-width:820px}
/* ------------------------------------------------------------------
本文の版面幅と、キャッチの階層（2026-09-04 五月女指摘）
------------------------------------------------------------------
1) キャッチが本文と同じ16px/400になっていた。
.svcp-catch{font-size:22px;font-weight:700} を書いていたが、
後段の `.svcpMain p{font-size:1.6rem;font-weight:400}` の方が
詳細度が高く（クラス+要素 > クラス）負けていた。実測16px/400。
FVの主役コピーなので、h1(52px)とリード(16px)の中間に置く。
2) コンテナは1100pxだが実テキストは約650pxで終わり、右に450px空く。
見出しは中央揃え・本文は左揃えで1100px幅のため、見出しの中心軸と
本文の視覚的な重心がずれて「左に寄って見える」状態だった。
本文の版面を read幅(760px)に絞り、コンテナ中央に置いて軸を合わせる。
（中央揃えにはしない＝長文の左揃えは可読性のため維持）
------------------------------------------------------------------ */
.svcpMain .svcp-catch{font-size:26px;font-weight:700;color:#16283f;line-height:1.55;text-align:center;margin:0 0 6px}
/* ------------------------------------------------------------------
版面（measure）は2段階に統一する（2026-09-04 五月女承認）
------------------------------------------------------------------
実測で、1ページ内に版面が5種類あった（760/500/640/820/1100）。
とくに料金表・成果事例・環境リストだけが1100pxのまま左端170pxまで
張り出し、本文(340px)より170px外側に出て「ここだけ出っ張って」見えた。
読む幅 760px … 文章・箇条書き・FAQ・注記・料金表（2列しかない表）
見せる幅 820px … 図解・成果事例・環境リスト・工程アイコン（3列以上並ぶもの）
料金表を760pxにするのは、1100px幅に2列だけだと項目名と価格が離れすぎて
視線が飛ぶため。成果事例は3枚並ぶので760pxでは窮屈＝820pxにする。
------------------------------------------------------------------ */
.svcpMain>.inner>p,
.svcpMain>.inner>.svcp-list,
.svcpMain>.inner>.svcp-faq,
.svcpMain>.inner>.svcp-note,
.svcpMain>.inner>.svcp-reason,
.svcpMain>.inner>.svcp-rel,
.svcpMain>.inner>.svcp-tablewrap{max-width:760px;margin-left:auto;margin-right:auto}
.svcpMain>.inner>.svcp-stats,
.svcpMain>.inner>.svcp-env,
.svcpMain>.inner>.svcp-scope,
.svcpMain>.inner>.svcp-cases,
.svcpMain>.inner>.svcp-report,
.svcpMain>.inner>.svcp-fig{max-width:820px;margin-left:auto;margin-right:auto}
/* FVの図・キャッチ・リードは独自幅を持つので上書きしない */
.svcpMain>.inner>.svcp-catch{max-width:820px}
.svcpMain>.inner>.svcp-fig:first-of-type{max-width:500px}
.svcpMain .svcp-lead.svcp-lead--fv{max-width:640px}
/* 900px以下は版面の制限を解除（コンテナ幅に従う） */
@media only screen and (max-width:900px){
.svcpMain>.inner>p,
.svcpMain>.inner>.svcp-list,
.svcpMain>.inner>.svcp-faq,
.svcpMain>.inner>.svcp-note,
.svcpMain>.inner>.svcp-reason,
.svcpMain>.inner>.svcp-rel,
.svcpMain>.inner>.svcp-tablewrap,
.svcpMain>.inner>.svcp-stats,
.svcpMain>.inner>.svcp-env,
.svcpMain>.inner>.svcp-scope,
.svcpMain>.inner>.svcp-cases,
.svcpMain>.inner>.svcp-report,
.svcpMain>.inner>.svcp-fig{max-width:none}
}
@media only screen and (max-width:640px){
.svcpMain .svcp-catch{font-size:19px}
}
/* ------------------------------------------------------------------
役割別サイズの詳細度を回復（2026-09-04）
`.svcpMain p{font-size:1.6rem}` が要素+クラスで勝ち、注記や関連リンク見出しの
指定を潰していた（キャッチと同じ事故）。実測で注記も16px＝本文と同じだった。
注記は本文より小さいことに意味がある（※の補足）ので詳細度を上げて回復する。
※ .svcp-lead が16pxなのは意図的（2026-09-04 五月女判断で本文16pxに統一・
fec9ea7）。ここは戻さない。
------------------------------------------------------------------ */
.svcpMain .svcp-note{font-size:14px;line-height:1.8;color:#5a6474}
.svcpMain .svcp-rel-ttl{font-size:15px;font-weight:700}
/* ==================================================================
セクションの白カード化＋余白の規則化（2026-09-04 試作：メールマーケ支援）
==================================================================
背景が #f5f5f5 一色で、項目の分かれ目が分かりにくいという指摘への対応。
既存 /flow/ が「グレー地に白ブロック」を既に採っているので、それに揃える
（新4ページだけ別の表現にしない）。
余白の規則（実測では224〜844pxとバラバラだった）:
セクション間 = 32px（カード同士の間隔）
カード内の上下 = 56px / 60px
見出し→本文 = 既存の commonH2 の margin に従う
カード内の要素間 = 24px
================================================================== */
.svcpMain>.inner>.svcp-sec{
background:#fff;
border-radius:10px;
padding:56px 60px 60px;
margin:0 0 32px;
max-width:920px;
margin-left:auto;
margin-right:auto;
}
.svcpMain>.inner>.svcp-sec:last-of-type{margin-bottom:0}
/* カード内の1つ目の eyebrow は上余白を詰める（カードのpaddingが担う） */
.svcpMain>.inner>.svcp-sec>.svcp-eyebrow:first-child{margin-top:0}
/* カード内の最後の要素の下マージンを殺す（paddingで持たせる） */
.svcpMain>.inner>.svcp-sec>*:last-child{margin-bottom:0}
/* カード内の版面：カードのpaddingがあるので中央寄せの必要がない。
760/820の関係は保ちつつ、カード幅(920-120=800)に収める */
.svcpMain>.inner>.svcp-sec>p,
.svcpMain>.inner>.svcp-sec>.svcp-list,
.svcpMain>.inner>.svcp-sec>.svcp-faq,
.svcpMain>.inner>.svcp-sec>.svcp-note,
.svcpMain>.inner>.svcp-sec>.svcp-reason,
.svcpMain>.inner>.svcp-sec>.svcp-rel,
.svcpMain>.inner>.svcp-sec>.svcp-tablewrap{max-width:none;margin-left:0;margin-right:0}
.svcpMain>.inner>.svcp-sec>.svcp-stats,
.svcpMain>.inner>.svcp-sec>.svcp-env,
.svcpMain>.inner>.svcp-sec>.svcp-scope,
.svcpMain>.inner>.svcp-sec>.svcp-cases,
.svcpMain>.inner>.svcp-sec>.svcp-report,
.svcpMain>.inner>.svcp-sec>.svcp-fig{max-width:none;margin-left:auto;margin-right:auto}
/* カード内の要素間隔を24pxに揃える（バラつきの解消） */
.svcpMain>.inner>.svcp-sec>*+*{margin-top:24px}
.svcpMain>.inner>.svcp-sec>.svcp-eyebrow+.commonH2{margin-top:0}
.svcpMain>.inner>.svcp-sec>.commonH2{margin-top:0}
@media only screen and (max-width:900px){
.svcpMain>.inner>.svcp-sec{padding:40px 28px 44px;max-width:none;border-radius:8px}
}
@media only screen and (max-width:640px){
.svcpMain>.inner>.svcp-sec{padding:32px 20px 36px;margin-bottom:20px}
}
/* ==================================================================
/service/ 4分岐ハブ（2026-09-04・要件定義 論点2＝A案）
==================================================================
従来の /service/ は9工程を網羅的に説明し /fees/ とほぼ同一構成だった。
特化4ページを足すと同じ説明が3箇所になるため、親を分岐ハブへ再定義する。
色は既存ルールに従う：回遊導線は #004DA0 の輪郭線、オレンジはCV専用。
================================================================== */
.svcHub{max-width:1000px;margin:0 auto}
.svcHub_lead{max-width:760px;margin:0 auto 36px;text-align:center}
.svcHub_lead p{font-size:1.6rem;line-height:1.9;color:#222;margin:0}
.svcHub_cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.svcHub_card{display:flex;flex-direction:column;background:#fff;border:1px solid #dfe4ec;
border-radius:10px;padding:28px 30px 24px;text-decoration:none;color:inherit;
transition:border-color .2s,box-shadow .2s,transform .2s}
.svcHub_card:hover{border-color:#004da0;box-shadow:0 6px 20px rgba(0,77,160,.10);transform:translateY(-2px)}
.svcHub_head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.svcHub_head .svcCard_icon{flex:none;display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:50%;background:#eaf0f8}
.svcHub_ttl{font-size:1.8rem;font-weight:700;line-height:1.5;color:#16283f;margin:0}
.svcHub_txt{font-size:1.5rem;line-height:1.85;color:#3a4454;margin:0 0 14px;flex:1 1 auto}
.svcHub_tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none}
.svcHub_tags li{font-size:1.2rem;line-height:1;color:#004da0;border:1px solid #c9d4e4;
border-radius:999px;padding:6px 10px;background:#f7f9fc}
.svcHub_more{display:inline-block;align-self:flex-start;font-size:1.5rem;font-weight:700;
color:#004da0;border:1px solid #004da0;border-radius:4px;padding:9px 22px}
.svcHub_card:hover .svcHub_more{background:#004da0;color:#fff}
.svcHub_note{max-width:760px;margin:32px auto 0;text-align:center;font-size:1.5rem;
line-height:1.9;color:#3a4454}
.svcHub_note strong{color:#16283f}
@media only screen and (max-width:900px){
.svcHub_cards{grid-template-columns:1fr;gap:18px}
.svcHub_card{padding:24px 22px 20px}
}
@media only screen and (max-width:640px){
.svcHub_lead{margin-bottom:26px}
.svcHub_ttl{font-size:1.65rem}
}
/* ------------------------------------------------------------------
横長図のスマホ対応：640px以下は縦積み版へ差し替える（2026-09-04）
------------------------------------------------------------------
620px幅で設計した横長SVGは、スマホのカード幅(298〜338px)に収まるとき
縮小率0.48〜0.54となり、文字が実寸4.4〜7.1pxまで縮んで読めない（9点とも実測）。
同じ内容を縦配置で描いた --sp 版を併記し、幅で出し分ける。
横スクロールは「気づかれない」ため採らない（料金表カード化と同じ判断基準）。
PC版のSVGは一切変更しないので、PCの見た目は変わらない。
------------------------------------------------------------------ */
.svcp-fig--wide .svcp-svg--sp{display:none}
@media only screen and (max-width:640px){
.svcp-fig--wide .svcp-svg--pc{display:none}
.svcp-fig--wide .svcp-svg--sp{display:block}
}
/* ------------------------------------------------------------------
SP版の図が大きすぎた件の是正（2026-09-04 五月女指摘）
------------------------------------------------------------------
実測：iPhone(390x844)で1つの図が画面の41〜78%を占めていた。
読めるようにするために箱ごと大きくしたのが行き過ぎだった。
SVGは幅に比例して縮むので、幅に上限を掛けて全体を小さくする。
文字の判読限界は約9px。viewBox幅300に対し最小指定が10.5〜13pxなので、
上限290pxなら実効10.2〜12.6pxを確保でき、面積は約32%減る。
SVG本体は書き換えないので、この数行を外せば元に戻る。
------------------------------------------------------------------ */
@media only screen and (max-width:640px){
.svcp-fig--wide .svcp-svg--sp{max-width:290px;margin-left:auto;margin-right:auto}
}
@media only screen and (max-width:360px){
.svcp-fig--wide .svcp-svg--sp{max-width:100%}
}
/* ------------------------------------------------------------------
濃紺べた塗りの緩和（2026-09-05 五月女指摘）
------------------------------------------------------------------
料金表のヘッダー・レポート見出し・図中の箱に #16283f（フッターと同じ
最暗色）を面で使っており、ページの中で単独で目立ちすぎていた。
ブランドガイドラインに #16283f の規定は無く、メインは #004da0。
面で塗る用途はメインブルーに寄せ、表ヘッダーは淡い地＋濃色文字にする。
（文字色としての #16283F は本文インクなので据え置き）
------------------------------------------------------------------ */