/* ============================================================
   machiit.css — 街の IT 屋さん LP (/machiit) 2026-09 作り直し
   独自トークン。site.css は読み込まない (別ブランド: 親しみやすさ優先)。
   書体だけトップと揃える (Zen Kaku Gothic New + Inter)。

   方針 (plan 2026-09-21):
   ・色は 白 / 墨 / コーラル 1 色。コーラルは「ヒーローの手描き下線・引用符・推奨帯・リンク下線」だけ
   ・ボタンは濃コーラル (#C9432B) 地に白文字 (4.86:1)
   ・カードは料金だけ。他は罫と余白で分ける。番号は「はじめ方」だけ
   ・動きはユーザー操作への応答だけ (details の開閉・フォーカス)。フェードインは使わない
   ============================================================ */

:root{
  --m-paper:#FFFFFF;
  --m-ink:#1F2A37;        /* 本文・見出し (白に 14.5:1) */
  --m-ink-2:#55637A;      /* 補足文 (6.1:1) */
  --m-line:#C7CFDA;       /* 罫 */
  --m-line-soft:#E4E9F0;  /* 薄い罫 (details の区切り) */
  --m-coral:#E9634A;      /* ブランド色 (面・線のみ。小さい文字には使わない) */
  --m-coral-tint:#FDEDE8; /* 推奨帯の面。この上にコーラル文字は置かない (2.9:1) */
  --m-coral-deep:#C9432B; /* ボタン地 */
  --m-coral-deeper:#A8351F;
  --m-ease:cubic-bezier(.25,.6,.3,1);
  --m-max:68rem;
  --m-measure:40rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--m-paper); color:var(--m-ink);
  font-family:'Zen Kaku Gothic New','Hiragino Sans','Noto Sans JP','Yu Gothic UI',system-ui,sans-serif;
  font-size:1rem; line-height:1.9; -webkit-font-smoothing:antialiased;
  font-feature-settings:'palt';
  line-break:strict; word-break:normal; overflow-wrap:anywhere;
}
p, li, dd, summary{text-wrap:pretty}
/* 幅いっぱいの段落は行長を均して 1〜3 文字の孤立行を作らない */
.sec .intro, .scope-note, .plan-foot, .terms li, .faq-group .a p, .faq-group .a li, .m-final p, .compare p, .sources, .m-hero .lead{text-wrap:balance}
.num{font-family:'Inter','Helvetica Neue',Arial,sans-serif; font-variant-numeric:tabular-nums; letter-spacing:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--m-ink); outline-offset:3px}
.wrap{max-width:var(--m-max); margin:0 auto; padding:0 24px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed; top:8px; left:8px; z-index:20; width:auto; height:auto; clip:auto; padding:8px 12px; background:var(--m-paper); color:var(--m-ink); border:1.5px solid var(--m-ink); border-radius:6px}

/* ---------- ヘッダー ---------- */
.m-head{
  position:sticky; top:0; z-index:10; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--m-line-soft);
}
.m-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px}
.m-logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--m-ink)}
.m-logo svg{width:32px; height:32px; flex:none}
.m-logo b{font-size:1.0625rem; font-weight:700; letter-spacing:.02em; line-height:1.2; display:block; white-space:nowrap}
.m-logo small{display:block; font-size:.6875rem; color:var(--m-ink-2); letter-spacing:.06em; line-height:1.3; white-space:nowrap}
.m-head-cta{font-size:.875rem; padding:10px 16px}
@media (max-width:379px){ .m-head .m-head-cta{display:none} }
@media (max-width:479px){ .m-head .m-head-cta{padding:8px 12px; font-size:.8125rem} }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:8px; text-decoration:none;
  font-weight:700; font-size:1rem; line-height:1.3; letter-spacing:.02em;
  border:1.5px solid transparent;
  transition:background-color 200ms var(--m-ease), border-color 200ms var(--m-ease), transform 120ms var(--m-ease);
}
.btn-primary{background:var(--m-coral-deep); color:#fff}
.btn-primary:hover{background:var(--m-coral-deeper)}
.btn-secondary{background:transparent; color:var(--m-ink); border-color:var(--m-ink)}
.btn-secondary:hover{background:#F3F5F8}
.btn:active{transform:translateY(1px)}
.btn small{display:block; font-weight:400; font-size:.75rem; letter-spacing:.04em}
.btn-secondary small{color:var(--m-ink-2)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px 16px; margin-top:32px}
.btn-note{margin-top:12px; font-size:.8125rem; color:var(--m-ink-2)}

/* ---------- ヒーロー ---------- */
.m-hero{padding:72px 0 80px}
.m-hero .kicker{font-size:.9375rem; font-weight:500; color:var(--m-ink-2); letter-spacing:.02em}
.m-hero h1{
  margin-top:14px; font-size:clamp(1.875rem, 1.3rem + 2.6vw, 3rem); font-weight:700; line-height:1.4; letter-spacing:.01em;
  text-wrap:balance;
}
.m-hero h1 .u{position:relative; display:inline-block; white-space:nowrap}
.m-hero h1 .u svg{position:absolute; left:-1%; right:-1%; bottom:-.12em; width:102%; height:.3em; overflow:visible}
.m-hero h1 .u svg path{fill:none; stroke:var(--m-coral); stroke-width:3.5; stroke-linecap:round}
.m-hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,26rem); gap:40px 64px; align-items:start; margin-top:40px}
@media (max-width:899px){ .m-hero-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:419px){ .m-hero h1{font-size:1.75rem} }
@media (max-width:359px){ .m-hero h1{font-size:1.625rem} }
.asks{list-style:none; max-width:32rem}
.asks li{position:relative; padding-left:1.1em; margin-top:14px; font-size:1.0625rem; line-height:1.8; color:var(--m-ink)}
.asks li::before{content:'「'; position:absolute; left:-.1em; top:0; color:var(--m-ink-2)}
.asks li::after{content:'」'; color:var(--m-ink-2)}
.asks .reply{margin-top:22px; padding-left:1.1em; font-weight:700; font-size:1.0625rem}
.asks .reply::before, .asks .reply::after{content:none}
.m-hero .lead{margin-top:28px; font-size:1.0625rem; line-height:1.95; color:var(--m-ink)}
.m-hero .lead b{font-weight:700}
.nw{white-space:nowrap}

.hero-fig{margin:0}
.hero-fig img{display:block; width:100%; height:auto; border-radius:10px}
@media (max-width:899px){ .hero-fig{max-width:28rem} }

/* ---------- セクション共通 ---------- */
.sec{padding:80px 0}
.sec + .sec{border-top:1px solid var(--m-line-soft)}
.sec h2{font-size:clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight:700; line-height:1.5; letter-spacing:.01em}
.sec .intro{margin-top:16px; font-size:1.0625rem; line-height:1.95}
.sec p + p{margin-top:12px}
.sec a:not(.btn){text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--m-coral)}
.sec a:not(.btn):hover{text-decoration-thickness:2px}

/* ---------- できること ---------- */
.can-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:40px 56px; margin-top:40px}
.can h3{font-size:1.0625rem; font-weight:700; color:var(--m-ink-2)}
.can ul{list-style:none; margin-top:8px}
.can li{padding:14px 0; border-top:1px solid var(--m-line-soft)}
.can li:last-child{border-bottom:1px solid var(--m-line-soft)}
.can li b{display:block; font-weight:700; line-height:1.7}
.can li span{display:block; margin-top:2px; font-size:.875rem; color:var(--m-ink-2)}
.demo{margin-top:48px}
.demo h3{font-size:1.0625rem; font-weight:700}
.demo-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:28px; margin-top:16px}
.demo figure{margin:0}
.demo .frame{position:relative; aspect-ratio:16/9; background:#EEF1F5; border:1px solid var(--m-line-soft); border-radius:6px; overflow:hidden}
.demo iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.demo figcaption{margin-top:10px; font-size:.9375rem; line-height:1.8}
.demo figcaption span{display:block; font-size:.8125rem; color:var(--m-ink-2)}
.scope-note{margin-top:40px; padding:16px 20px; border:1px solid var(--m-line); border-radius:6px; font-size:.9375rem}

/* ---------- 対応するのは人です ---------- */
.people p{max-width:var(--m-measure)}
.people-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,24rem); gap:32px 64px; align-items:center; margin-top:8px}
@media (max-width:899px){ .people-grid{grid-template-columns:minmax(0,1fr)} }
.people-fig{margin:0}
.people-fig img{display:block; width:100%; height:auto; border-radius:10px}
.people .promise{margin-top:24px; font-size:1.0625rem; font-weight:700}

/* ---------- はじめ方 ---------- */
.steps{list-style:none; margin-top:36px; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:32px 40px; counter-reset:step}
.steps li{counter-increment:step; position:relative; padding-top:14px; border-top:1px solid var(--m-line)}
.steps li::before{
  content:counter(step); position:absolute; top:-16px; left:0; width:32px; height:32px; border-radius:50%;
  background:var(--m-paper); border:1.5px solid var(--m-ink); display:grid; place-items:center;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif; font-weight:600; font-size:.875rem; line-height:1;
}
.steps h3{margin-top:22px; font-size:1.0625rem; font-weight:700}
.steps p{margin-top:8px; font-size:.9375rem; line-height:1.85}
.steps ul{list-style:none; margin-top:10px}
.steps ul li{border:0; padding:0; margin-top:4px; font-size:.875rem; color:var(--m-ink-2); counter-increment:none}
.steps ul li::before{content:'・'; position:static; width:auto; height:auto; border:0; background:none; display:inline; font-family:inherit; font-size:inherit}

/* ---------- 料金 ---------- */
.plans{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; margin-top:40px; align-items:stretch}
@media (max-width:899px){ .plans{grid-template-columns:minmax(0,1fr); max-width:34rem} }
.plan{border:1px solid var(--m-line); border-radius:10px; padding:56px 24px 24px; background:var(--m-paper); position:relative; display:flex; flex-direction:column}
.plan-badge{position:absolute; top:0; left:0; right:0; margin:0; padding:6px 24px; background:var(--m-coral-tint); color:var(--m-ink); font-size:.75rem; font-weight:700; letter-spacing:.06em; border-radius:9px 9px 0 0}
.plan.is-rec{border-color:var(--m-coral)}
.plan h3{font-size:1.25rem; font-weight:700; line-height:1.4}
.plan .for{margin-top:8px; font-size:.875rem; line-height:1.8; color:var(--m-ink-2)}
@media (min-width:900px){ .plan .for{min-height:4.2em} }
.plan .price{margin-top:18px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.plan .price .num{font-size:2.25rem; font-weight:600; line-height:1}
.plan .price .unit{font-size:.875rem; color:var(--m-ink-2)}
.plan dl{margin-top:22px; border-top:1px solid var(--m-line-soft)}
.plan dt{margin-top:14px; font-size:.75rem; letter-spacing:.06em; color:var(--m-ink-2)}
.plan dd{font-size:.9375rem; line-height:1.75}
.plan dd small{display:block; font-size:.8125rem; color:var(--m-ink-2)}
.plan .btn{width:100%; margin-top:auto}
.plan dl{margin-bottom:24px}
/* PC 3 列: 説明文・価格・項目・ボタンの各行を 3 枚で揃える (subgrid 非対応ブラウザは flex 列にフォールバック) */
@supports (grid-template-rows: subgrid){
  @media (min-width:900px){
    .plan{display:grid; grid-template-rows:subgrid; grid-row:span 5; row-gap:0; align-content:start}
    .plan .for{min-height:0}
    .plan .btn{align-self:end; margin-top:0}
  }
}
.plan-foot{margin-top:28px; font-size:.9375rem}
.plan-foot b{font-weight:700}
.terms{margin-top:40px}
.terms h3{font-size:1.0625rem; font-weight:700}
.terms ul{list-style:none; margin-top:10px}
.terms li{position:relative; padding-left:1.1em; margin-top:8px; font-size:.9375rem; line-height:1.85}
.terms li::before{content:''; position:absolute; left:0; top:.9em; width:6px; height:1px; background:var(--m-ink)}
.terms .tax{margin-top:16px; font-size:.875rem; color:var(--m-ink-2)}

/* ---------- 採用と比べると ---------- */
.compare{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:32px 56px; margin-top:36px}
.compare h3{font-size:1.0625rem; font-weight:700}
.compare p{margin-top:10px; font-size:.9375rem; line-height:1.9}
.sources{margin-top:28px; font-size:.75rem; line-height:1.8; color:var(--m-ink-2)}
.sources a{color:inherit}

/* ---------- FAQ ---------- */
.faq-group{margin-top:36px}
.faq-group h3{font-size:1.0625rem; font-weight:700; padding-bottom:10px; border-bottom:1px solid var(--m-line)}
.faq-group details{border-bottom:1px solid var(--m-line-soft)}
.faq-group summary{
  list-style:none; cursor:pointer; padding:16px 36px 16px 0; position:relative; font-weight:700; line-height:1.7;
}
.faq-group summary::-webkit-details-marker{display:none}
.faq-group summary::after{
  content:''; position:absolute; right:6px; top:50%; width:10px; height:10px; margin-top:-7px;
  border-right:1.5px solid var(--m-ink); border-bottom:1.5px solid var(--m-ink); transform:rotate(45deg);
  transition:transform 200ms var(--m-ease);
}
.faq-group details[open] summary::after{transform:rotate(225deg); margin-top:-2px}
.faq-group summary:hover{color:var(--m-coral-deep)}
.faq-group .a{padding:0 0 18px; font-size:.9375rem; line-height:1.9}
.faq-group .a p + p{margin-top:8px}
.faq-group .a ul{margin:8px 0 0 1.2em}
.faq-group .a li{margin-top:4px}

/* ---------- 最後の一押し ---------- */
.m-final{padding:88px 0 96px; background:#F7F9FB}
.m-final h2{font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight:700; line-height:1.5}
.m-final p{margin-top:14px; font-size:1.0625rem}

/* ---------- フッター ---------- */
.m-foot{padding:48px 0 56px; border-top:1px solid var(--m-line-soft); font-size:.75rem; line-height:1.8; color:var(--m-ink-2)}
.m-foot h2{font-size:.75rem; font-weight:700; color:var(--m-ink); margin-top:16px}
.m-foot h2:first-child{margin-top:0}
.m-foot p{max-width:var(--m-measure)}
.m-foot .legal{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:8px 48px}
.m-foot .bottom{margin-top:32px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; align-items:baseline}
.m-foot .bottom nav{display:flex; gap:20px}
.m-foot a{color:var(--m-ink-2)}
.m-foot a:hover{color:var(--m-ink)}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{transition:none !important}
}
@media print{
  .m-head, .btn-row, .m-final .btn-row{display:none}
  .faq-group details{border:0}
}