/*
 * CORTOMUSO v4 入口ページ（MUSIC / LIVE / AI）用 CSS
 * v4.css（トップと共通）の上に重ねる。色はページごとに --svc（template-service.php の main に指定）。
 * 読み込み: functions.php の cm_v4_enqueue_assets()（入口ページの型のときだけ）
 */

/* ページ上部の帯とタイトル */
.svc-hero{ padding-top:40px; }
.svc-band{ display:inline-flex; align-items:center; gap:14px; padding:10px 22px 10px 12px; background:var(--svc); color:#fff; border:4px solid var(--ink); border-radius:16px; box-shadow:6px 6px 0 var(--ink); }
.svc-num{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:#fff; color:var(--ink); border:3px solid var(--ink); border-radius:10px; font-size:24px; }
.svc-name{ font-size:24px; letter-spacing:.08em; }
.svc-title{ margin:28px 0 0; font-size:clamp(32px,4.4vw,60px); font-weight:700; line-height:1.4; letter-spacing:.04em; }

/* 本文（編集画面で書いた見出し・段落・リスト） */
.svc-body{ padding-top:clamp(28px,4vw,48px); }
.svc-content{ max-width:780px; }
.svc-content > p:first-child{ font-size:clamp(18px,1.8vw,22px); font-weight:700; line-height:1.9; letter-spacing:.04em; margin:0 0 8px; }
.svc-content h2{ display:flex; align-items:center; gap:12px; margin:clamp(40px,5vw,64px) 0 20px; padding-bottom:12px; border-bottom:3px dashed var(--ink); font-size:clamp(22px,2.4vw,30px); font-weight:700; letter-spacing:.04em; line-height:1.5; }
.svc-content h2::before{ content:""; flex-shrink:0; width:16px; height:16px; background:var(--svc); border:3px solid var(--ink); border-radius:5px; }
.svc-content h3{ margin:32px 0 14px; font-size:20px; font-weight:700; line-height:1.6; }
.svc-content p{ margin:0 0 18px; font-size:16px; line-height:2; letter-spacing:.03em; }
.svc-content ul,.svc-content ol{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:12px; }
.svc-content li{ position:relative; padding:14px 18px 14px 50px; background:#fff; border:3px solid var(--ink); border-radius:14px; box-shadow:4px 4px 0 var(--ink); font-size:16px; line-height:1.8; }
.svc-content li::before{ content:"▶"; position:absolute; left:18px; top:14px; font-family:"DotGothic16","Osaka-Mono",monospace; color:var(--svc); font-size:16px; line-height:1.8; }
.svc-content a{ text-decoration:underline; text-decoration-color:var(--svc); text-decoration-thickness:3px; text-underline-offset:4px; font-weight:700; }
.svc-content img{ height:auto; border:3px solid var(--ink); border-radius:14px; }

/* 相談の流れ */
.flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.flow li{ display:flex; flex-direction:column; gap:14px; padding:24px; background:#fff; border:4px solid var(--ink); border-radius:18px; box-shadow:6px 6px 0 var(--ink); }
.flow-n{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--svc); color:#fff; border-radius:8px; font-size:24px; }
.flow-t{ font-size:17px; font-weight:700; line-height:1.7; }
.svc-cta{ margin-top:40px; display:flex; justify-content:center; }
.svc-cta .pill{ font-size:17px; padding:16px 32px; }

/* ほかの入口（トップのカードを小さくした形） */
.gates-mini{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; max-width:860px; }
.gates-mini .gate{ margin-top:0; }  /* v4.css の .gate:nth-child(2)/(3) の階段ずらしはトップ用なので打ち消す */
.gate-mini .gate-head{ min-height:56px; padding:10px 20px; }
.gate-mini svg.illo{ width:min(180px,60%); margin-top:12px; }
.gate-mini .gate-body{ gap:8px; padding:8px 22px 22px; }
.gate-mini .gate-body .t{ font-size:36px; }
.gate-mini .gate-body .h{ font-size:17px; }
.gate-mini .gate-body .d{ display:none; }

@media (max-width: 900px){
  .svc-hero{ padding-top:20px; }
  .svc-band{ gap:10px; padding:8px 16px 8px 10px; box-shadow:5px 5px 0 var(--ink); }
  .svc-num{ width:36px; height:36px; font-size:20px; }
  .svc-name{ font-size:20px; }
  .flow{ grid-template-columns:1fr; gap:18px; }
  .flow li{ flex-direction:row; align-items:center; padding:18px; box-shadow:5px 5px 0 var(--ink); }
  .flow-n{ flex-shrink:0; width:38px; height:38px; font-size:20px; }
  .flow-t{ font-size:16px; }
  .gates-mini{ grid-template-columns:1fr; gap:28px; }
  .gate-mini{ box-shadow:6px 6px 0 var(--ink); border-width:3.5px; }
}

/* 会社概要（template-company.php。2026-09 追加）。本文は編集画面のカスタムHTML（cs-company__*）をそのまま使い、見た目だけ v4 に合わせる */
.co-content{ max-width:780px; }
.co-content .cort-fade{ opacity:1; transform:none; }  /* 旧デザインの「追加 CSS」のふわっと表示用の指定（v4 のページでは出さない）に頼らず、常に表示 */
.co-content .cs-company__ghost,.co-content .cs-company__label{ display:none; }  /* 見出しは上の h1 で出すので、旧デザインの飾り文字は出さない */
.co-content .cs-company__title{ margin:0 0 28px; font-size:clamp(18px,1.8vw,22px); font-weight:700; line-height:1.9; letter-spacing:.04em; }
.co-content .cs-company__title em{ font-style:normal; background:linear-gradient(transparent 62%, var(--accent) 62%); }
.co-content .cs-company__table{ background:#fff; border:4px solid var(--ink); border-radius:18px; overflow:hidden; box-shadow:6px 6px 0 var(--ink); }
.co-content .cs-company__row{ display:grid; grid-template-columns:140px minmax(0,1fr); gap:16px; align-items:baseline; padding:20px 28px; }
.co-content .cs-company__row + .cs-company__row{ border-top:3px dashed var(--ink); }
.co-content .cs-company__key{ font-family:"Bricolage Grotesque","Zen Maru Gothic",sans-serif; font-size:15px; font-weight:800; letter-spacing:.04em; }
.co-content .cs-company__val{ font-size:16px; line-height:1.9; }
.co-content .cs-company__svc{ display:block; }
.co-content .cs-company__svc b{ display:inline-block; min-width:4.2em; font-family:"DotGothic16","Osaka-Mono",monospace; font-weight:400; }
.co-content .cs-company__svc--sub{ margin-top:6px; font-size:14px; }
.co-page .flow-n{ color:var(--ink); }  /* 会社概要は --svc が黄色なので、番号は黒い文字にする */

@media (max-width: 900px){
  .co-content .cs-company__table{ box-shadow:5px 5px 0 var(--ink); }
  .co-content .cs-company__row{ grid-template-columns:1fr; gap:2px; padding:16px 18px; }
}

/* 2026-09 追加：本文（編集画面で書く部分）で、行末の1〜2文字だけが次の行に落ちるのを減らす（対応するブラウザだけで効く。文字の大きさ・余白は変えない） */
.svc-content p,.svc-content li{ text-wrap:pretty; }