/*
Theme Name: 椎名ITシステム
Theme URI: https://s-itsys.co.jp/
Author: 椎名ITシステム合同会社
Description: 椎名ITシステム合同会社のコーポレートサイト用ブロックテーマ。デザインはテーマ側で固定し、文言はブロックエディタで編集できる構成。
Version: 1.0.11
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: s-itsys
*/

:root{
  --bg:#F1F3F6;
  --panel:#FFFFFF;
  --ink:#121A25;
  --ink-2:#45515E;
  --ink-3:#6D7985;
  --line:#DCE1E7;
  --line-2:#C0C8D1;
  --tint:#E6EAEF;
  --lift:#E7ECF6;
  --lift-line:#B9C5E0;
  --brand:#2E4683;
  --teal:#0F6B67;
  --cta-bg:#2E4683;
  --cta-ink:#F1F4F9;
  --cta-sub:#BDC8E2;
  --cta-btn-bg:#42C0C0;
  --cta-btn-ink:#06302E;
  --ph-bg:#E0E5EA;
  --submit-bg:#2E4683;
  --submit-fg:#F1F4F9;
  --logo-filter:none;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",sans-serif;
  --num:"IBM Plex Sans","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  /* 端末のダークモードに関係なく、いつも明るい表示にする（2026-09-14 椎名さん判断）。
     only を付けると、ブラウザがページを自動で暗くする機能（Android版Chromeの自動ダークテーマ）も止まる */
  color-scheme:only light;
}

*{box-sizing:border-box}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.5;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.n{font-family:var(--num);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em}

.band,.lead,.core,.cta,.formband,.foot{padding-left:28px;padding-right:28px}

/* 2カラムの背骨：左＝ラベルと要約、右＝本文 */
.row{gap:0 52px;align-items:flex-start}
.row .rowhead{flex-basis:176px}
.rowhead{padding-top:5px}
.rowhead h2{font-size:15px;font-weight:700;letter-spacing:.07em;color:var(--ink)}
.rowhead p{margin-top:11px;font-size:12.5px;line-height:1.85;color:var(--ink-3)}
.rowbody{min-width:0}


/* ── ヘッダー ─────────────────────────── */
.head{background:var(--panel);border-bottom:1px solid var(--line-2)}
.head{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px 28px;flex-wrap:wrap;padding-top:17px;padding-bottom:17px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:27px;width:auto;display:block;filter:var(--logo-filter)}
.brand span{font-size:16.5px;font-weight:700;letter-spacing:.045em}
.nav{display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.nav a{text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.nav a:hover{color:var(--brand);border-bottom-color:var(--brand)}

/* ── リード ───────────────────────────── */
.lead{background:var(--panel)}
.lead{padding-top:78px;padding-bottom:70px}
.lead h1{
  font-weight:900;font-size:clamp(28px,5vw,42px);
  line-height:1.42;letter-spacing:.005em;
  /* 2026-09-16: 見出し「外注する前に、相談できる情シスがいます。」は1行に844px必要。
     16em（42pxで672px）だとPCでも必ず2行になり、語の途中で割れて右側が空いた。
     21em＝882pxなら1行に収まり、本文の列（944px）も超えない。スマホは容器のほうが狭いので影響なし */
  max-width:21em;
}
.lead h1 span{display:inline-block}
.lead .sub{margin-top:24px;max-width:620px;font-size:17px;color:var(--ink-2);line-height:1.95}
.lead .say{margin-top:26px;max-width:620px;font-size:15.5px;color:var(--ink-2);line-height:2}
.lead .sign{margin-top:24px;font-size:14px;color:var(--ink-3);letter-spacing:.03em}

/* ── 結論ブロック（このページで唯一持ち上げる場所） ── */
.core{background:var(--panel);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.core{padding-top:78px;padding-bottom:86px}
.core h3{font-size:23px;font-weight:900;letter-spacing:.01em;line-height:1.5}
.core .stand{margin-top:16px;max-width:640px;font-size:16px;color:var(--ink-2);line-height:1.95}

.vs{margin-top:34px;overflow-x:auto;border:1px solid var(--line-2);margin-bottom:0}
.vs table{border-collapse:collapse;width:100%;min-width:520px;table-layout:fixed;background:var(--panel)}
.vs th{
  padding:11px 20px;text-align:left;font-size:12.5px;font-weight:500;
  letter-spacing:.05em;border-bottom:1px solid var(--line-2);
}
.vs th:first-child{background:var(--tint);color:var(--ink-3);width:40%}
.vs th:last-child{
  background:var(--lift);color:var(--brand);font-weight:700;
  border-left:1px solid var(--lift-line);
}
.vs td{padding:18px 20px;vertical-align:top;font-size:14.5px;line-height:1.85;border-bottom:1px solid var(--line)}
.vs td:first-child{background:var(--tint);color:var(--ink-2)}
.vs td:last-child{background:var(--lift);color:var(--ink);border-left:1px solid var(--lift-line)}
/* 左セルの補足行: エディタの「イタリック」で入力する（README参照） */
.vs td:first-child em{
  display:block;margin-top:5px;font-style:normal;
  font-size:12.5px;line-height:1.75;color:var(--ink-3);
}
.vs td:last-child strong{color:var(--brand);font-weight:700;display:inline-block}
.vs tr:last-child td{border-bottom:0}
.vs-note{margin-top:13px;font-size:12.5px;color:var(--ink-3);line-height:1.85;max-width:640px}

.wp-block-columns.also{margin-top:46px;margin-bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.also > div{padding-top:20px;border-top:1px solid var(--line-2)}
.also h4{margin:0;font-size:15.5px;font-weight:700;letter-spacing:.02em}
.also p{margin-top:8px;font-size:14.5px;color:var(--ink-2);line-height:1.9}

/* ── 帯 ───────────────────────────────── */
.band{border-bottom:1px solid var(--line)}
.b-service{padding-top:72px;padding-bottom:72px}
.b-works{padding-top:70px;padding-bottom:62px}
.b-price{padding-top:56px;padding-bottom:60px}
.b-rep{padding-top:64px;padding-bottom:64px}
.b-corp{padding-top:56px;padding-bottom:60px}

/* ── 事業内容 ─────────────────────────── */
.svc{display:flex;flex-direction:column;gap:24px;max-width:660px}
.svc h3{font-size:16px;font-weight:700;letter-spacing:.02em;margin-bottom:5px}
.svc p{font-size:15px;color:var(--ink-2);line-height:1.9}
.sub-h{
  margin-top:44px;padding-top:20px;border-top:1px solid var(--line-2);
  font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--ink);
}
.ask{max-width:660px;margin-top:12px;display:flex;flex-direction:column;gap:7px}
.ask li{position:relative;padding-left:19px;font-size:14.5px;color:var(--ink-2);line-height:1.85}
.ask li::before{content:"";position:absolute;left:0;top:.85em;width:10px;height:1px;background:var(--teal)}
.no{max-width:660px;margin-top:12px;display:flex;flex-direction:column;gap:7px}
.no li{font-size:14.5px;color:var(--ink-2);line-height:1.85}

/* ── 実績 ─────────────────────────────── */
.spec{border:1px solid var(--line-2);background:var(--panel);max-width:640px}
.spec .cap{
  padding:10px 18px;border-bottom:1px solid var(--line);background:var(--tint);
  font-size:12.5px;letter-spacing:.05em;color:var(--ink-3);
}
.spec .wp-block-table{margin:0;overflow-x:visible}
.spec table{border-collapse:collapse;width:100%}
.spec td{padding:12px 18px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}
.spec td:last-child{
  text-align:right;white-space:nowrap;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.spec tr:last-child td{border-bottom:0}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;max-width:660px;padding-left:0;list-style:none}
.tags li{
  font-size:12.5px;line-height:1.7;padding:4px 11px;
  border:1px solid var(--line-2);color:var(--ink-2);
}
.cite{margin-top:30px;max-width:660px;border-left:3px solid var(--brand);padding-left:20px}
.cite .k{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--brand)}
.cite a{display:block;margin-top:5px;font-size:16px;font-weight:700;line-height:1.7;color:var(--ink)}
.cite a:hover{color:var(--brand)}
.cite .src{margin-top:5px;font-size:13px;color:var(--ink-3);line-height:1.8}

/* ── 料金 ─────────────────────────────── */
.tbl{overflow-x:auto;border:1px solid var(--line-2);max-width:660px;margin:0}
.tbl table{border-collapse:collapse;width:100%;min-width:440px;background:var(--panel)}
.tbl th,.tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px}
.tbl thead th{font-size:12.5px;font-weight:500;letter-spacing:.05em;color:var(--ink-3);background:var(--tint)}
.tbl tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
.tbl tbody td{color:var(--ink-2)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:last-child{text-align:right;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.note{margin-top:14px;max-width:660px;font-size:13px;color:var(--ink-3);line-height:1.9}

/* ── 代表 ─────────────────────────────── */
.rep{max-width:660px}
.rep .nm{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.rep .nm strong{font-size:22px;font-weight:900;letter-spacing:.04em}
.rep .nm em{font-style:normal;font-family:var(--num);font-size:13px;color:var(--ink-3);letter-spacing:.08em}
.rep .hist{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.rep .hist p{font-size:15px;color:var(--ink-2);line-height:1.9}

/* ── 会社概要 ─────────────────────────── */
.corp{max-width:620px}
.corp .wp-block-table{margin:0;overflow-x:visible}
.corp table{border-collapse:collapse;width:100%}
.corp td{
  padding:11px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--ink-2);vertical-align:top;
}
.corp td:first-child{width:112px;color:var(--ink-3);font-size:13.5px}
.ph{display:inline-block;background:var(--ph-bg);color:var(--ink-3);padding:0 7px;font-size:13.5px}

/* ── 問い合わせ ───────────────────────── */
.cta{background:var(--cta-bg)}
.cta{padding-top:56px;padding-bottom:58px}
.cta h2{font-size:21px;font-weight:700;color:var(--cta-ink);letter-spacing:.02em}
.cta p{margin-top:14px;max-width:600px;font-size:15px;color:var(--cta-sub);line-height:1.95}

/* ── お問い合わせフォーム ─────────────── */
.formband{background:var(--panel);border-top:1px solid var(--line-2)}
.formband{padding-top:52px;padding-bottom:62px}
.form{max-width:600px;display:flex;flex-direction:column;gap:22px}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13.5px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.field .req,.field .opt{
  margin-left:9px;padding:1px 6px;font-size:11px;font-weight:500;letter-spacing:.04em;
  vertical-align:1px;
}
.field .req{background:var(--lift);color:var(--brand);border:1px solid var(--lift-line)}
.field .opt{color:var(--ink-3);border:1px solid var(--line-2)}
.field input,.field textarea{
  width:100%;font-family:inherit;font-size:15px;line-height:1.8;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-2);padding:11px 13px;
  border-radius:0;-webkit-appearance:none;appearance:none;
}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field textarea:focus{
  outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);
}
.form button{
  align-self:flex-start;margin-top:4px;font-family:inherit;
  background:var(--submit-bg);color:var(--submit-fg);border:1px solid var(--submit-bg);
  padding:14px 40px;font-size:15px;font-weight:700;cursor:pointer;
  border-radius:0;-webkit-appearance:none;appearance:none;
}
.form button:hover{background:transparent;color:var(--submit-bg)}
.form .privacy{font-size:13px;color:var(--ink-3);line-height:1.9}

/* ── フッター ─────────────────────────── */
.foot{padding-top:26px;padding-bottom:34px;font-size:12.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--num)}

@media (max-width:781px){
  .row{grid-template-columns:1fr;gap:18px}
  .rowhead{
    padding-top:0;padding-bottom:13px;border-bottom:1px solid var(--line-2);
    display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 16px;
  }
  .rowhead h2{font-size:14px}
  .rowhead p{margin-top:0}
  .wp-block-columns.also{grid-template-columns:1fr;gap:28px}
  .nav{gap:16px;font-size:13px}
  .nav a{padding-top:5px;padding-bottom:5px}
  .lead{padding-top:54px;padding-bottom:50px}
  .core{padding-top:56px;padding-bottom:60px}
  .b-service .wrap,.b-works .wrap,.b-rep{padding-top:52px;padding-bottom:52px}
  .b-price .wrap,.b-corp{padding-top:44px;padding-bottom:48px}
  .corp{grid-template-columns:96px 1fr}
}
@media (max-width:620px){
  .vs{overflow-x:visible}
  .vs table{min-width:0;table-layout:auto}
  .vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .vs table,.vs tbody,.vs tr,.vs td{display:block;width:auto}
  .vs .wp-block-table{overflow-x:visible}
  .vs tr{border-bottom:1px solid var(--line-2)}
  .vs tr:last-child{border-bottom:0}
  .vs td{border-bottom:0;padding:15px 17px}
  .vs td:last-child{border-left:0;border-top:1px solid var(--lift-line)}
  .vs td::before{
    display:block;margin-bottom:6px;font-size:11.5px;letter-spacing:.05em;
    font-weight:700;color:var(--ink-3);
  }
  .vs td:first-child::before{content:"本来なら外注する工程"}
  .vs td:last-child::before{content:"実際にどうしたか";color:var(--brand)}

  /* 料金表：横スクロールをやめて縦積みにする。
     スマホで料金列が画面外に切れるのを防ぐ */
  .tbl{overflow-x:visible}
  .tbl table{min-width:0}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tbl table,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:auto}
  .tbl tr{padding:15px 17px;border-bottom:1px solid var(--line-2)}
  .tbl tbody tr:last-child{border-bottom:0}
  .tbl th,.tbl td{border-bottom:0;padding:0}
  /* core/table はすべて td になるため、1列目を見出しとして扱う */
  .tbl tbody td{margin-top:5px;font-size:14px;line-height:1.8}
  .tbl tbody td:first-child{
    margin-top:0;font-size:15.5px;font-weight:700;color:var(--ink);
  }
  .tbl tbody td:last-child{
    margin-top:9px;text-align:left;font-size:17px;font-weight:700;color:var(--brand);
  }
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* ── WordPress 由来の調整 ───────────────── */
.wp-block-columns.row{margin-bottom:0;gap:0 52px;align-items:flex-start}
.wp-block-column.rowhead{flex-grow:0}
.band > *,.lead > *,.core > *,.cta > *,.formband > *,.foot > *{margin-block-start:0}
.head-inner{max-width:1000px;margin:0 auto}
.head{padding-left:28px;padding-right:28px}
.entry-content > * + *{margin-top:1.4em}

/* 記事ページ（お知らせ用・意図的に簡素） */
.post-head{padding-top:56px;padding-bottom:8px}
.post-head h1{font-size:clamp(24px,4vw,32px);font-weight:900;line-height:1.5}
.post-date{margin-top:14px;font-family:var(--num);font-size:13px;color:var(--ink-3);letter-spacing:.06em}
.post-body{padding-top:24px;padding-bottom:72px;font-size:16px;color:var(--ink-2)}
.post-body h2{font-size:20px;font-weight:700;color:var(--ink);margin-top:2em}
.post-body h3{font-size:17px;font-weight:700;color:var(--ink);margin-top:1.8em}
.post-body a{color:var(--brand);text-underline-offset:3px}
.post-list{padding-top:56px;padding-bottom:72px;display:flex;flex-direction:column}
.post-list article{padding:20px 0;border-bottom:1px solid var(--line)}
.post-list article:first-child{border-top:1px solid var(--line)}
.post-list h2{font-size:16.5px;font-weight:700}
.post-list a{text-decoration:none}
.post-list a:hover{color:var(--brand)}

/* ── Contact Form 7 ─────────────────────
   CF7 が出力するマークアップに、既存のフォーム意匠を当てる。
   フォームの雛形は README.md の「お問い合わせフォーム」を参照。 */
.wpcf7{max-width:600px}
.wpcf7 form.wpcf7-form{display:flex;flex-direction:column;gap:22px}
.wpcf7 .field .wpcf7-form-control-wrap{display:block}
.wpcf7 .field label{display:block}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea{
  width:100%;font-family:inherit;font-size:15px;line-height:1.8;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-2);padding:11px 13px;
  border-radius:0;-webkit-appearance:none;appearance:none;
}
.wpcf7 textarea{min-height:150px;resize:vertical}
.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{color:var(--ink-3)}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.wpcf7 input[type="submit"]{
  align-self:flex-start;font-family:inherit;
  background:var(--submit-bg);color:var(--submit-fg);border:1px solid var(--submit-bg);
  padding:14px 40px;font-size:15px;font-weight:700;cursor:pointer;
  border-radius:0;-webkit-appearance:none;appearance:none;
}
.wpcf7 input[type="submit"]:hover{background:transparent;color:var(--submit-bg)}
.wpcf7 .wpcf7-spinner{display:none}
.wpcf7 .wpcf7-not-valid-tip{margin-top:6px;font-size:13px;color:#B3261E;line-height:1.7}
.wpcf7 .wpcf7-response-output{
  margin:0;padding:13px 16px;font-size:14px;line-height:1.8;
  border:1px solid var(--line-2);background:var(--bg);color:var(--ink-2);
}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--teal);color:var(--teal)}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:#B3261E;color:#B3261E}

/* ── 記事・固定ページの本文（プライバシーポリシー等） ──
   グローバルで list-style:none にしているため、本文中では戻す。 */
.post-body > *{margin-top:1.5em}
.post-body > *:first-child{margin-top:0}
.post-body > h2{margin-top:2.6em}
.post-body > h2:first-child{margin-top:0}
.post-body ul,.post-body ol{margin:0;padding-left:1.5em}
.post-body ul{list-style:disc}
.post-body ol{list-style:decimal}
.post-body li{margin-top:7px;line-height:1.9}
.post-body li::marker{color:var(--ink-3)}
.post-body .wp-block-table{margin:0;overflow-x:auto}
.post-body table{border-collapse:collapse;width:100%;min-width:420px;font-size:14.5px;background:var(--panel)}
.post-body th,.post-body td{
  padding:11px 14px;border:1px solid var(--line);
  text-align:left;vertical-align:top;line-height:1.8;
}
.post-body th{background:var(--tint);color:var(--ink-3);font-weight:500;font-size:13px}
.post-body .lead-note{
  padding:16px 18px;border-left:3px solid var(--brand);background:var(--panel);
  font-size:14.5px;line-height:1.9;
}
.post-body .rev{font-size:13px;color:var(--ink-3);line-height:1.9}

/* フッターのリンク（プライバシーポリシー） */
.foot .foot-links{margin-bottom:10px}
.foot .foot-links a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.foot .foot-links a:hover{color:var(--brand)}

/* ── WordPress上での表示の補正（2026-09-13・実サイトに一時的に差し込んで効果を確認済み） ──
   1) ヘッダー：内側の箱が内容の幅まで縮んで中央に寄っていたのを、全幅に戻す
      （静的版から移したとき、内側の箱に当てるべき指定が外側の .head に当たっていたため）
   2) 「幅をそろえる」レイアウトの中で、幅を指定した要素（リード文など）が
      WordPress標準の指定で中央寄せされるのを、左端をそろえた配置に戻す
   3) WordPress標準の表の装飾（見出し下の太線・全セルの枠線）を消し、デザインの罫線に戻す
   4) 料金表の1列目（区分）をPCでも太字にする
   5) 問い合わせ帯の見出しを、どのテンプレートでも白文字にする */
.head-inner{width:100%;max-width:var(--wp--style--global--content-size,944px)}
.lead.is-layout-constrained > *,
.core.is-layout-constrained > *,
.band.is-layout-constrained > *,
.cta.is-layout-constrained > *,
.formband.is-layout-constrained > *,
.foot.is-layout-constrained > *{
  margin-left:max(0px,calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
  margin-right:auto !important;
}
.wp-block-table.vs thead,.wp-block-table.tbl thead{border-bottom:1px solid var(--line-2)}
.wp-block-table.vs :is(td,th),.wp-block-table.tbl :is(td,th),
.spec .wp-block-table :is(td,th),.corp .wp-block-table :is(td,th){border-top:0;border-right:0}
.wp-block-table.vs :is(td,th):first-child,.wp-block-table.tbl :is(td,th),
.spec .wp-block-table :is(td,th),.corp .wp-block-table :is(td,th){border-left:0}
.tbl tbody td:first-child{font-weight:700;color:var(--ink)}
.cta .wp-block-heading{color:var(--cta-ink)}

/* Contact Form 7：送信ボタンの行と注意書き */
.wpcf7 .field-submit{margin-top:4px}
.wpcf7 .privacy a{color:var(--ink-2);text-underline-offset:3px}

/* ── 2026-09-14 追加（実サイトに一時的に差し込んで効果を確認済み） ──
   1) 記事・固定ページ（プライバシーポリシー・404・お知らせ）：左右の余白がなく、
      スマホで見出し・本文・表が画面の端に貼りついていた。トップの帯と同じ左右28pxを付ける
      （PCは中央寄せの幅944pxのままで、配置は変わらない）
   2) 本文の表：最小幅420pxのせいでスマホでは横スクロールになっていたのを、画面幅に収めて折り返す
   3) お問い合わせフォームの同意チェックボックス（CF7 の [acceptance]。フォームの雛形は README 参照）：
      CF7標準CSSの左の余白（1em）を消して入力欄と左端をそろえ、チェックの色をブランド色にする
   4) 押せない状態の送信ボタン（CF7の初期設定では、同意にチェックするまで押せない）の見た目 */
.post-head,.post-body,.post-list{padding-left:28px;padding-right:28px}
@media (max-width:620px){
  .post-body table{min-width:0}
}
.wpcf7 .field-consent .wpcf7-list-item{margin:0}
.wpcf7 .field-consent label{
  display:inline-flex;align-items:flex-start;gap:10px;
  font-size:14px;line-height:1.8;color:var(--ink);cursor:pointer;
}
.wpcf7 .field-consent input[type="checkbox"]{flex:none;width:18px;height:18px;margin:4px 0 0;accent-color:var(--brand)}
.wpcf7 .field-consent .wpcf7-list-item-label::before,
.wpcf7 .field-consent .wpcf7-list-item-label::after{content:none}
.wpcf7 input[type="submit"]:disabled{opacity:.45;cursor:not-allowed}
.wpcf7 input[type="submit"]:disabled:hover{background:var(--submit-bg);color:var(--submit-fg)}

/* ── 2026-09-17 追加（実サイトに一時的に差し込んで効果を確認済み） ──
   お問い合わせフォームの注意書き：.form .privacy の指定はWordPress版のフォーム（.wpcf7）に当たらず、
   本文と同じ16px・黒で表示されていた。原型のデザインどおり13px・灰色にする。
   並び順を「注意書き → 同意チェック → 送信」にしたため、上下の間隔はフォームの gap（22px）に任せ、余白は付けない */
.wpcf7 .privacy{margin:0;font-size:13px;color:var(--ink-3);line-height:1.9}

/* ── 2026-09-18（1.0.8 で方式を変更。1.0.7 の word-break:keep-all は取りやめ） ──
   スマホで見出しが語の途中で割れていた（「相談で／きる」「話を聞／かせて」「済ま／せる」）。
   1.0.7 では word-break:keep-all を使ったが、**Safari（iPhone）では読点での折り返しが
   許されず**、文全体が一続き扱いになって「くださ／い。」と割れた（iPhone 16 実機で確認）。
   → 方式を変更：見出しの中に <br>（ブロックエディタの Shift+Enter）を入れておき、
     1行に収まる画面幅では CSS で <br> を無効にする。Safari でも確実に効く。
   しきい値は「その見出しが1行に収まる幅」から決めた（実測）:
     .cta の見出し … 621px以上で1行（17文字×21px）
     .rowbody h3   … 781px以上（この幅で段組みが横並びに戻る）
     .lead h1      … 1000px以上（42px×20文字＝840pxが本文の列944pxに収まる幅）
   .lead h1 のスマホの字詰めは 1.0.7 のまま残す（2行目「相談できる情シスがいます。」が
   28pxだと iPhone の幅に収まらず、「。」だけが3行目に落ちるため）。 */
@media (max-width:620px){
  .lead h1{font-size:min(28px,calc(7.4vw - 4px))}
}
@media (min-width:621px){.cta .wp-block-heading br{display:none}}
@media (min-width:781px){.rowbody h3 br{display:none}}
@media (min-width:1000px){.lead h1 br{display:none}}

/* ── 2026-09-20 追加（実サイトに一時的に差し込んで 393px / 1280px で確認済み） ──
   外部（AI活用コミュニティの運営者。SEO・ダイレクトレスポンスの専門家）から
   「最初に目に入る部分で、何をしている会社で誰の役に立つのかが分かりにくい」と指摘を受けた。
   1) ヘッダーの社名の横に業務の説明を置く（全ページに出る。プライバシーポリシーから入った人にも伝わる）
      スマホでは社名が2行に割れてしまうため、620px以下では社名の下の行に回す
   2) 見出しの直下に「誰向けか」の一文を足せるようにする。ブロックエディタで
      追加CSSクラスを付けなくても済むよう、h1 の直後の段落（.sub 以外）に見た目を当てる */
.brand .tagline{
  margin:0;padding-left:12px;border-left:1px solid var(--line);
  font-size:12.5px;font-weight:500;color:var(--ink-3);letter-spacing:.04em;white-space:nowrap;
}
.lead h1 + p:not(.sub){
  margin-top:24px;max-width:620px;
  font-size:17px;line-height:1.95;color:var(--ink);font-weight:500;
}
@media (max-width:620px){
  .brand{flex-wrap:wrap}
  .brand .tagline{flex-basis:100%;padding-left:0;border-left:0;margin-top:2px;font-size:12px;letter-spacing:.03em;white-space:normal}
}

/* ── 2026-09-20 追加（フィードバックの△への対応。実サイトで確認済み） ──
   代表の資格が名前の列挙だけで何の一覧か分からない、という指摘（椎名さん）。
   小さな見出し（例：保有資格）を置けるようにする。ブロックエディタで追加CSSクラスを
   付けなくて済むよう、タグ一覧（.tags）の直前の段落に見た目を当てる（:has を使用）。
   ページ内の .tags は2つ（実績の領域・代表の資格）だが、どちらも直前は <div> なので、
   意図して段落を足したときだけ効く。 */
p:has(+ .tags){margin:26px 0 0;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--brand)}
p:has(+ .tags) + .tags{margin-top:10px}

/* ── 1.0.11（2026-10-23）サイト改善：一部だけLP寄りにする ──────────────
   足したパターン：相談ボタン／ご相談の流れ・よくあるご質問／代表（短い紹介）／会社概要ページ
   原稿は 事業計画/サイト改善_原稿（たたき台）.md（2026-10-23 確定） */

/* 相談ボタン（コアのボタンブロック）。フォームの送信ボタンと同じ見た目にそろえる */
.wp-block-buttons.consult{margin-top:28px;gap:12px}
.wp-block-buttons.consult .wp-block-button__link{
  font-family:inherit;background:var(--submit-bg);color:var(--submit-fg);
  border:1px solid var(--submit-bg);border-radius:0;
  padding:14px 36px;font-size:15px;font-weight:700;line-height:1.6;letter-spacing:.04em;
  text-decoration:none;
}
.wp-block-buttons.consult .wp-block-button__link:hover{background:transparent;color:var(--submit-bg)}

/* ご相談の流れ（番号つきの手順） */
.b-flow,.b-faq{padding-top:56px;padding-bottom:60px}
.flow{max-width:660px;margin:0;padding-left:0;list-style:none;counter-reset:flow;display:flex;flex-direction:column;gap:18px}
.flow li{position:relative;padding-left:44px;font-size:14.5px;color:var(--ink-2);line-height:1.85;counter-increment:flow}
.flow li::before{
  content:counter(flow);position:absolute;left:0;top:1px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);background:var(--panel);
  font-family:var(--num);font-size:13px;font-weight:600;color:var(--brand);
}
.flow li strong{display:block;font-size:15px;font-weight:700;color:var(--ink)}

/* よくあるご質問（質問と答えを罫線で区切って並べる） */
.faq{max-width:660px}
.faq .q{margin-top:0;padding-top:18px;border-top:1px solid var(--line);font-size:15px;font-weight:700;color:var(--ink);line-height:1.8}
.faq .q:first-child{padding-top:0;border-top:0}
.faq .a{margin-top:6px;padding-bottom:18px;font-size:14.5px;color:var(--ink-2);line-height:1.9}
.faq .a:last-child{padding-bottom:0}

/* 代表（短い紹介） */
.rep .sum{margin-top:16px;font-size:15px;color:var(--ink-2);line-height:1.9}
.rep .qual{margin-top:10px;font-size:13.5px;color:var(--ink-3);line-height:1.9}
.rep .more{margin-top:14px;font-size:14px}
.rep .more a{color:var(--brand);text-underline-offset:3px}

/* 会社概要ページ（固定ページ /company/）
   1) 資格の一覧を本文用のリスト装飾から外す
   2) 代表のまとまり（.rep は幅660px）が「幅をそろえる」レイアウトで中央寄せになるのを、左端そろえに戻す
      （トップの .lead などと同じ対処。2026-10-23 プレビューで中央に寄るのを確認して追加） */
.post-body .tags{list-style:none;padding-left:0}
.post-body .tags li{margin-top:0}
.post-body .rep{
  margin-left:max(0px,calc((100% - var(--wp--style--global--content-size,944px)) / 2)) !important;
  margin-right:auto !important;
}

@media (max-width:781px){
  .b-flow,.b-faq{padding-top:44px;padding-bottom:48px}
}