/* 島クリエイト：複数のページで使う部品（事例の枠・お知らせの行・分類の切り替え・ページ送り・表・最後の相談の導線）
   読み込む順：base.css → parts.css → ページの CSS（2026-11-03 site.css を分けた） */

.phone{ position:relative; background:var(--ink); border-radius:26px; padding:8px; }

.phone__scr{ position:relative; height:100%; border-radius:19px; overflow:hidden; background:var(--wh); }


@media (max-width:767px){
}

.contact__h{ word-break:auto-phrase; text-wrap:pretty; }

/* ---------- 事例の枠（トップ・事例のページ共通。仮の枠） ---------- */

.works{ padding:120px 0 140px; }

.works__title{ position:sticky; top:calc(var(--hd) + 40px); height:0; z-index:0; }

.works__title span{ display:block; font-family:var(--en); font-weight:900; font-size:25vw; line-height:.74; letter-spacing:-0.05em; color:var(--wh); text-align:center; white-space:nowrap; }

.works__head{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 32px; padding:0 var(--g); }

/* 事例の一覧とカード（パソコンとスマホの見本の画面）は css/works-mock.css（2026-11-04 分けた） */

.works__more{ position:relative; z-index:1; padding:56px var(--g) 0; text-align:right; }

/* ---------- お知らせの行（トップ・一覧のページ共通） ---------- */

.news{ padding:120px 0; }

.news__list{ border-top:3px solid var(--ink); }

.news__list a{ display:grid; grid-template-columns:130px 110px 1fr auto; gap:16px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--ink); font-size:16px; text-decoration:none; transition:background-color .25s ease,padding .25s ease; }

.news__list a:hover,.news__list a:focus-visible{ background:var(--or-l); padding-left:12px; padding-right:12px; }

.news__d{ font-family:var(--en); font-weight:700; }

.news__c{ font-weight:700; font-size:14px; }

.news__c::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:8px; background:var(--or); vertical-align:.1em; }

.news__t{ font-weight:700; }

/* ---------- 相談への導線（各ページの最後・トップの最後の章） ---------- */

.contact{ background:var(--or); color:var(--ink); padding:120px 0 120px; }

.contact__h{ font-weight:800; font-size:clamp(30px,4.4vw,64px); line-height:1.3; max-width:16em; }

.contact .hb::before{ background:var(--ink); }

.contact__txt{ margin-top:28px; font-weight:700; font-size:clamp(17px,1.4vw,20px); }

.contact__ways{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:56px; border-top:3px solid var(--ink); }

.way{ display:flex; flex-direction:column; gap:4px; padding:28px 24px 28px 0; text-decoration:none; border-bottom:3px solid var(--ink); transition:background-color .3s ease,color .3s ease,padding .3s ease; }

.way + .way{ border-left:3px solid var(--ink); padding-left:24px; }

.way b{ font-weight:800; font-size:clamp(22px,2.3vw,34px); line-height:1.3; }

.way span{ font-size:15px; font-weight:700; }

.way:hover,.way:focus-visible,.way:active{ background:var(--ink); color:var(--or); padding-left:24px; outline:none; }

/* 表（料金・会社概要） */

.tbl{ width:100%; border-collapse:collapse; border-top:6px solid var(--ink); border-bottom:3px solid var(--ink); }

.tbl caption{ caption-side:top; text-align:left; padding:0 0 12px; font-weight:700; font-size:15px; }

.tbl th,.tbl td{ text-align:left; vertical-align:baseline; padding:20px 20px 18px 0; border-bottom:1px solid var(--ink); font-size:16px; line-height:1.75; }

.tbl tr:last-child > *{ border-bottom:0; }

.tbl thead th{ padding:12px 20px 10px 0; font-size:13px; font-weight:700; letter-spacing:.06em; border-bottom:2px solid var(--ink); }

.tbl tbody th{ font-weight:800; }

.tbl--co th{ width:9em; }

.tbl--co a{ word-break:break-all; }

/* 事例・お知らせ：分類の切り替え（見た目だけ） */

.filter{ display:flex; flex-wrap:wrap; gap:2px; border:2px solid var(--ink); background:var(--ink); width:max-content; max-width:100%; }

.filter button{ min-height:44px; padding:0 18px; border:0; background:var(--wh); color:var(--ink); font:inherit; font-weight:800; font-size:15px; cursor:pointer; transition:background-color .25s ease,color .25s ease; }

.filter button:hover{ background:var(--or-l); }

.filter button[aria-pressed="true"]{ background:var(--ink); color:var(--wh); }

.works .filter{ background:var(--wh); }

/* ページ送り */

.pager{ display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; }

.pager a{ display:flex; align-items:center; justify-content:center; min-width:48px; min-height:48px; padding:0 14px; border:2px solid var(--ink); font-family:var(--en); font-weight:900; font-size:16px; text-decoration:none; transition:background-color .25s ease,color .25s ease; }

.pager a[aria-current="page"]{ background:var(--ink); color:var(--wh); }

.pager a:hover,.pager a:focus-visible{ background:var(--or); color:var(--ink); }

.pager .pager__next{ font-family:var(--ja); font-weight:800; font-size:15px; }

@media (max-width:1023px){
  .tbl--plan thead{ display:none; }
  .tbl--plan,.tbl--plan tbody,.tbl--plan tr,.tbl--plan th,.tbl--plan td{ display:block; }
  .tbl--plan tr{ display:grid; grid-template-columns:1fr auto; gap:2px 16px; padding:18px 0 16px; border-bottom:1px solid var(--ink); }
  .tbl--plan tr:last-child{ border-bottom:0; }
  .tbl--plan caption{ display:block; }
  .tbl.tbl--plan th,.tbl.tbl--plan td{ padding:0; border:0; }
  .tbl--plan td[data-l]{ grid-column:1 / -1; font-size:15px; }
  .tbl--plan td[data-l]::before{ content:attr(data-l) "："; font-weight:700; }
}

@media (max-width:767px){
  .works{ padding:88px 0 96px; }
  .works__title span{ font-size:30vw; }
  .works__more{ text-align:left; padding-top:40px; }
  .news{ padding:88px 0; }
  .news__list a{ grid-template-columns:auto 1fr auto; gap:2px 16px; }
  .news__t{ grid-column:1 / 3; }
  .news__list .arw{ grid-row:1 / 3; grid-column:3; align-self:center; }
  .contact{ padding:88px 0 96px; }
  .contact__h{ font-size:30px; }
  .contact__ways{ grid-template-columns:1fr; margin-top:40px; }
  .way{ padding:22px 0; }
  .way + .way{ border-left:0; padding-left:0; }
  .way:hover,.way:focus-visible,.way:active{ padding-left:12px; }
  .tbl th,.tbl td{ padding:14px 12px 14px 0; font-size:15px; }
  .tbl--co,.tbl--co tbody,.tbl--co tr,.tbl--co th,.tbl--co td{ display:block; width:auto; }
  .tbl--co tr{ padding:14px 0; border-bottom:1px solid var(--ink); }
  .tbl--co tr:last-child{ border-bottom:0; }
  .tbl--co th,.tbl--co td{ padding:0; border:0; }
  .tbl--co th{ font-size:13px; }
  .filter{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; width:100%; }
  .filter--4{ grid-auto-flow:row; grid-template-columns:1fr 1fr; }
  .filter button{ padding:0 8px; font-size:14px; }
}

/* 共通の CSS の幅ごとの調整のうち、このファイルの指定より後に効かせるもの（ファイルを分けても順番を保つための写し） */
@media (max-width:1023px){
  .sub .wrap--split > .hb{ position:relative; top:auto; }
}
@media (prefers-reduced-motion:reduce){
  html.js .wipe,html.js .hb::before{ clip-path:none !important; }
}

/* お問い合わせの章の小さな約束（2026-11-08） */
.contact__sm{ display:block; margin-top:6px; font-size:14px; font-weight:700; }

/* お問い合わせの章（全ページ。2026-11-08 本人が C を選択、全ページへ）：左に見出し、右に2つの迷い */
.contact--q .wrap{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0 64px; align-items:start; }
.contact--q .contact__h,.contact--q .contact__txt{ grid-column:1; }
.contact--q .contact__ways{ grid-column:1 / -1; }
.cq{ grid-column:2; grid-row:1 / span 2; }
.cq__lb{ font-weight:800; font-size:15px; margin-bottom:12px; }
.cq__i{ border-top:3px solid var(--ink); padding:20px 0 26px; }
.cq__q{ font-weight:800; font-size:clamp(20px,1.8vw,26px); line-height:1.4; }
.cq__a b{ display:block; margin:8px 0 2px; font-weight:800; font-size:17px; }
.cq__a span{ display:block; font-size:15px; line-height:1.8; word-break:auto-phrase; text-wrap:pretty; }
@media (max-width:1023px){
  .contact--q .wrap{ display:block; }
  .cq{ margin-top:40px; }
}

/* 最初の説明文の断り書き（2026-11-08） */
.pg__lead .pg__note{ display:block; margin-top:14px; font-size:13px; line-height:1.7; }

/* ページの頭の説明文の下の一言（お返事の目安など。お問い合わせ・送信後のページ） */
.pg__note2{ margin-top:16px; font-weight:800; font-size:16px; }
.news__list li[hidden]{ display:none; }

/* スマホで押しやすく（2026-11-09 通し点検。kit:gate の「32px 未満の的」）：見た目は変えず、押せる範囲だけ上下に広げる */
.hd__logo{ display:inline-flex; align-items:center; min-height:44px; }
.crumb a{ display:inline-block; padding:12px 4px; margin:-12px -4px; }
.tbl--co td a,.reach dd a{ display:inline-block; padding:8px 0; margin:-8px 0; }