/*
 * サービス扉ページ（/service）＝4領域のカードハブ。
 * 会社系（/role・/about）と分けた「サービスの入口」。各領域トップ（/service/web ほか）へ渡す扉。
 * 版面は下層標準形（subpage.css の2カラム文書）ではなく、独自のカードグリッド。
 * common（tokens/base/common）前提。標準形は読み込まない（functions.php で is_page('service') のみ enqueue）。
 */

/* ページ土台＝グローバル section の全幅padding（トップ用）を無効化 */
.service-hub{padding:0 0 clamp(80px, 9vw, 128px);}
.service-hub section{padding:0; position:static;}

/* ===== 導入（ハブ見出し：H1サービス名＋英字小ラベル → サブ見出し → リード → 罫） ===== */
.svc-head{padding:0 0 clamp(28px, 3vw, 40px); border-bottom:1px solid var(--line);}
.svc-head-head{display:flex; align-items:center; gap:.35em 1em; flex-wrap:wrap;}
/* text-wrap:balance/pretty は撤去（2026-07-19・subpage.css と同判断＝iOS Safariの語中改行・右余白の原因） */
.svc-title{font-family:var(--serif); font-weight:600; font-size:2rem; line-height:1.4; letter-spacing:.01em; margin:0; color:var(--ink);}
.svc-tagline{font-family:var(--serif); font-weight:600; font-size:clamp(1.16rem, 1.0rem + 0.45vw, 1.32rem); line-height:1.55; letter-spacing:.01em; margin:.7em 0 0; color:var(--ink); max-width:var(--measure-lead);}
.svc-lead{margin:1.1em 0 0; color:var(--ink-sub); font-size:1.0rem; line-height:1.9; max-width:var(--measure-lead);}

/* ===== カードグリッド（2×2／SP1列） ===== */
.svc-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(16px, 1.8vw, 24px); margin-top:clamp(38px, 4vw, 54px);}
@media(max-width:760px){ .svc-grid{grid-template-columns:1fr;} }

/* カード＝墨の線画アイコン（各領域の確定モチーフ）＋領域名＋一言＋子ページ列。カード全体がリンク */
.svc-card{position:relative; display:grid; grid-template-columns:96px minmax(0, 1fr) auto; align-items:start; gap:clamp(14px, 1.6vw, 22px); padding:clamp(22px, 2.4vw, 30px); background:var(--bg); border:1px solid var(--line); border-radius:10px; color:var(--ink); text-decoration:none; transition:border-color .25s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);}
/* 領域モチーフ（線画・墨。marketing のみ到達点の赤＝subpage と同じ視覚言語） */
.svc-card-motif{width:96px;}
.svc-card-motif svg{width:100%; height:auto; display:block; fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; overflow:visible;}
.svc-card-motif .fill{fill:var(--ink); stroke:none;}
.svc-card-motif .dot{fill:var(--red); stroke:none;}
.svc-card-motif .ring{stroke:var(--red); opacity:.5;}
.svc-card-body{min-width:0;}
.svc-card-body .ey{margin-bottom:.6em;}
.svc-card-body h2{font-family:var(--serif); font-weight:600; font-size:1.3rem; line-height:1.4; margin:0 0 .5em; color:var(--ink);}
.svc-card-body p{color:var(--ink-sub); font-size:.92rem; line-height:1.8; margin:0 0 .8em;}
.svc-card-children{display:block; font-size:.8rem; color:var(--ink-sub); letter-spacing:.02em;}
.svc-card-arr{align-self:center; color:var(--red); font-weight:700; transition:transform .3s var(--ease);}
@media(max-width:520px){
  .svc-card{grid-template-columns:64px minmax(0, 1fr); gap:14px; padding:20px;}
  .svc-card-motif{width:64px;}
  .svc-card-arr{display:none;}  /* 極小端末はカード全体がタップ域＝矢印は省く */
}

/* ===== ハブ末尾（看板への橋渡し＋CTA） ===== */
.svc-hub-foot{margin-top:clamp(44px, 5vw, 64px); padding-top:clamp(28px, 3vw, 40px); border-top:1px solid var(--line);}
.svc-hub-foot > p{color:var(--ink-sub); max-width:var(--measure-lead); line-height:1.9; margin:0 0 1.4em;}
.svc-hub-foot-actions{display:flex; gap:14px; flex-wrap:wrap;}
/* 枠線ボタン（副CTA）＝subpage.css を読み込まないためここで定義（common の .btn を土台に上書き） */
.btn-secondary{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);}
.btn-secondary::before{background:var(--ink);}

/* hover演出はマウス等の精密ポインターだけに限定し、タッチ後の浮き・影を残さない（uiux-audit P3-4）。 */
@media(hover:hover) and (pointer:fine){
  .svc-card:hover{border-color:var(--ink); box-shadow:0 18px 40px -22px rgba(25, 23, 20, .4); transform:translateY(-2px);}
  .svc-card:hover .svc-card-arr{transform:translateX(5px);}
  .btn-secondary:hover{color:var(--on-accent);}
}
.svc-card:active{transform:translateY(0); box-shadow:none; transition:none;}