/* 行政書士秤谷幸治事務所 ── 素材：札（Flat Design）／差し色 #5E338A（菫・ディープ）
   角丸の札を機能ごとに色分けして並べる。色そのものが用途の見出しになる。
   明朝の見出しを使わない。角丸ゼロにしない。強調色を1色に絞らない。ぼかし影を使わない。 */

:root{
  --ji:#FFFFFF;      /* 地 */
  --men:#E9E4F1;     /* 面 */
  --tint:#D7BFF0;    /* 彩度のある淡地。#E9E4F1 は彩度が足りず有彩と数えられない */
  --kz:#28272B;      /* 構造 */
  --ac:#5E338A;      /* 差し色 */
  --kei:#DCD7E4;     /* 細い罫 */
  --kei2:#C6BFD3;    /* 少し濃い罫 */
  --usu:#5B5566;     /* 淡い文字 */

  /* 用途ごとの色。**この素材は強調色を1色に絞らない**（ブリーフの禁止事項）。
     白地でいずれも 4.5:1 以上。札の縁と見出しにだけ使い、地には敷かない。 */
  --f-tel:#1B6340;   /* 電話 */
  --f-mail:#5E338A;  /* メール */
  --f-map:#1F5390;   /* アクセス */
  --f-time:#8A4A16;  /* 受付時間 */

  --men-w:1100px;    /* 版面 */
  --ma:104px;        /* 節の間隔 */
  --r:10px;          /* 札の角丸 */
  --r-s:6px;

  /* 文字サイズはこの8段だけ。0.5px刻みの微差を並べない */
  --f12:12px; --f14:14px; --f16:16px; --f18:18px;
  --f21:21px; --f25:25px; --f30:30px; --f36:36px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ji);color:var(--kz);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:var(--f16);line-height:1.85;letter-spacing:.05em;
  font-feature-settings:"palt" 1;line-break:strict;overflow-wrap:break-word;
}
svg{display:block;max-width:100%;height:auto}
img{max-width:100%;height:auto;display:block;border:0;border-radius:var(--r)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.25em}
h1,h2,h3,h4{font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;font-weight:700;
            line-height:1.4;letter-spacing:.03em;margin:0;
            font-feature-settings:"palt" 1;font-kerning:normal}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
caption{text-align:left}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ── 版面 ─────────────────────────────── */
.wrap{width:100%;max-width:var(--men-w);margin:0 auto;padding:0 28px}

/* ── ヘッダー ─────────────────────────── */
.bar{border-bottom:1px solid var(--kei);background:var(--ji);position:sticky;top:0;z-index:20}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
         min-height:64px;flex-wrap:wrap}
.brand{font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;font-weight:700;
       font-size:var(--f18);letter-spacing:.04em;
       display:inline-flex;align-items:center;min-height:44px}
/* 押せる大きさは44x44を割らない（WCAG 2.5.5・design-standards） */
.menu{display:flex;gap:10px;flex-wrap:wrap}
.menu a{font-size:var(--f14);color:var(--usu);letter-spacing:.06em;
        display:inline-flex;align-items:center;justify-content:center;
        min-height:44px;min-width:44px;padding:0 8px;border-radius:var(--r-s)}
.menu a:hover{color:var(--ac);background:var(--men);text-decoration:none}

/* ── ヒーロー：split-right-image ────────── */
.open{background:var(--men);padding:56px 0 60px}
.open__in{display:grid;grid-template-columns:1fr 420px;gap:0 44px;align-items:center}
.badge{display:inline-block;font-size:var(--f12);letter-spacing:.10em;color:var(--ac);
       border:1px solid var(--ac);border-radius:999px;padding:5px 14px;background:var(--ji)}
.open__h{font-size:var(--f36);margin:18px 0 0}
.open__h em{font-style:normal;
            background:linear-gradient(transparent 62%,#C9A9E8 62%,#C9A9E8 92%,transparent 92%)}
.open__p{font-size:var(--f16);margin-top:18px;max-width:30em;color:var(--kz)}
.open__note{margin-top:14px;font-size:var(--f12);color:var(--usu)}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.open__fig{margin:0}
.open__fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.open__cap{margin-top:8px;font-size:var(--f12);color:var(--usu)}

/* ── ボタン ───────────────────────────── */
.btn,.btn--accent{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;min-width:44px;padding:0 24px;border-radius:var(--r);
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;font-weight:700;
  font-size:var(--f14);letter-spacing:.06em;border:2px solid var(--kz);
  background:var(--ji);color:var(--kz)}
.btn:hover{background:var(--men);text-decoration:none}
.btn--accent{background:var(--ac);border-color:var(--ac);color:#fff}
.btn--accent:hover{background:#4C296F;border-color:#4C296F;text-decoration:none}

/* ── 節 ───────────────────────────────── */
.sec{padding:var(--ma) 0}
.sec--layer{background:var(--men)}
.mark{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.mark__no{font-size:var(--f12);color:var(--ac);letter-spacing:.14em;font-weight:700}
.mark__en{font-size:var(--f12);color:var(--usu);letter-spacing:.16em;text-transform:uppercase}
.sec__ttl{font-size:var(--f30);margin:0 0 18px}
.sec__lead{font-size:var(--f16);max-width:44em;margin-bottom:34px;color:var(--kz)}
.p{font-size:var(--f16);margin-bottom:16px}
.micro{font-size:var(--f12);color:var(--usu);letter-spacing:.08em}
.hr{border:0;border-top:1px solid var(--kei);margin:0}

/* ── 札（この素材の署名）─────────────────
   用途ごとに色を変えた角丸の札。色が用途の見出しになる。 */
/* 2026-08-29：4段だと1行15字。基準は16字（check_responsive）。2段に落とす。 */
.fuda{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fuda__i{border:2px solid var(--kei2);border-radius:var(--r);padding:18px 16px;
         background:var(--ji);display:flex;flex-direction:column;gap:6px}
.fuda__i--tel{border-color:var(--f-tel)}
.fuda__i--mail{border-color:var(--f-mail)}
.fuda__i--map{border-color:var(--f-map)}
.fuda__i--time{border-color:var(--f-time)}
.fuda__k{font-size:var(--f12);letter-spacing:.12em;font-weight:700}
.fuda__i--tel .fuda__k{color:var(--f-tel)}
.fuda__i--mail .fuda__k{color:var(--f-mail)}
.fuda__i--map .fuda__k{color:var(--f-map)}
.fuda__i--time .fuda__k{color:var(--f-time)}
.fuda__v{font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;font-weight:700;
         font-size:var(--f18);line-height:1.5;word-break:break-all}
.fuda__n{font-size:var(--f12);color:var(--usu)}

/* ── 確認の一覧（checklist）──────────── */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.checks li{display:flex;gap:10px;align-items:flex-start;
           border:1px solid var(--kei);border-radius:var(--r-s);padding:12px 14px}
.tick{flex:0 0 auto;margin-top:.35em;color:var(--ac)}

/* ── お悩み（rows）──────────────────── */
.rows{display:flex;flex-direction:column;gap:0}
.rows > li{display:grid;grid-template-columns:64px 1fr 1.3fr;gap:0 20px;
           padding:24px 0;border-top:1px solid var(--kei)}
.rows > li:last-child{border-bottom:1px solid var(--kei)}
.rows__no{font-size:var(--f12);color:var(--ac);font-weight:700;letter-spacing:.12em}
.rows__t{font-size:var(--f18);font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;
         font-weight:700;line-height:1.5}
.rows__d{font-size:var(--f14);color:var(--kz)}
.rows__d .micro{display:block;margin-top:8px}

/* ── 表 ───────────────────────────────── */
.tbl th,.tbl td{text-align:left;padding:16px 0;border-top:1px solid var(--kei);
                vertical-align:top;font-size:var(--f14)}
.tbl th{width:30%;padding-right:20px;font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;
        font-weight:700;font-size:var(--f16)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:1px solid var(--kei)}
.tbl__yen{color:var(--ac);font-weight:700;white-space:nowrap}

/* ── よくある質問 ─────────────────────── */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.faq__i{border-top:1px solid var(--kei);padding:22px 0}
.faq__i:nth-last-child(-n+2){border-bottom:1px solid var(--kei)}
.faq__q{font-size:var(--f18);margin-bottom:8px}
.faq__a{font-size:var(--f14);color:var(--kz)}

/* ── 帯（CTA）─────────────────────────── */
.cta{padding:56px 0;background:var(--men);
     border-top:2px solid var(--ac);border-bottom:2px solid var(--ac)}
.cta--dark{background:var(--kz);border-color:var(--kz);color:#fff}
.cta__grid{display:grid;grid-template-columns:1fr 380px;gap:0 44px;align-items:center}
.cta__ttl{font-size:var(--f25)}
.cta__p{font-size:var(--f14);margin-top:12px;max-width:34em}
.cta--dark .cta__p{color:#E4E1EA}
.cta__tel{font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;font-weight:700;
          font-size:var(--f36);letter-spacing:.02em;color:var(--ac);
          display:inline-flex;align-items:center;min-height:48px}
.cta--dark .cta__tel{color:#D8BEF2}
.cta__hours{font-size:var(--f12);color:var(--usu);margin-top:4px}
.cta--dark .cta__hours{color:#B9B3C4}
.cta--dark .btn{background:transparent;border-color:#fff;color:#fff}
.cta--dark .btn:hover{background:rgba(255,255,255,.12)}

/* ── 進め方（numbered）──────────────── */
.hr__base{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 28px}
.hr__i{border-top:2px solid var(--kei2);padding:22px 0}
.hr__lead{font-size:var(--f18);margin-bottom:8px}
.hr__n{font-size:var(--f21);color:var(--ac);font-weight:700;
       font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif}

/* ── 流れ（timeline）────────────────── */
/* 5段だと1行13字。3段にして2行に折る。 */
.tl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tl__i{position:relative;padding:0 12px 0 0}
.tl__b{border:2px solid var(--kei2);border-radius:var(--r);padding:14px 12px;
       background:var(--ji);min-height:96px}
.tl__i--now .tl__b{border-color:var(--ac)}
.tl__n{font-size:var(--f12);color:var(--ac);font-weight:700;letter-spacing:.12em}
.tl__t{font-size:var(--f16);font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;
       font-weight:700;margin-top:4px;line-height:1.5}
.tl__d{font-size:var(--f12);color:var(--usu);margin-top:6px}

/* ── 取扱分野 ─────────────────────────── */
/* 2026-08-29：帯と節の地を彩度のある色にしたら有彩9.94%（目標4.2〜6.3）で行き過ぎ、
   同時に淡地が52〜67%（下限76%）まで落ちた。**彩度のある地は面積を絞る。**
   節の地は淡地(--men)に戻し、有彩は分野カード4枚ぶんだけで作る。 */
.sec--tint{background:var(--men)}
.cat{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cat__i{background:var(--tint);border:2px solid var(--ac);border-radius:var(--r);
        padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.cat__h{font-size:var(--f21)}
.cat__p{font-size:var(--f14)}
.cat__s{display:flex;flex-direction:column;gap:6px}
.cat__s li{font-size:var(--f12);color:#463F52;padding-left:16px;position:relative}
.cat__s li::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:2px;
                   background:var(--ac)}
.cat__go{margin-top:auto;padding-top:6px}
.cat__i .btn{background:var(--ji)}

/* ── 段組みの散文 ───────────────────── */
.prose{columns:2;column-gap:44px}
.prose .p{break-inside:avoid}

/* ── 図版 ─────────────────────────────── */
.fig{margin:0}
.fig--wide{margin:0}
.fig img{width:100%}
.fig figcaption,.cap{margin-top:10px;font-size:var(--f12);color:var(--usu);line-height:1.8}
.split{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:start}
.split--half{grid-template-columns:440px 1fr}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trio img{aspect-ratio:4/3;object-fit:cover}
.duo img{aspect-ratio:4/3;object-fit:cover}
.band img{width:100%;aspect-ratio:8/3;object-fit:cover}

/* ── フォーム ─────────────────────────── */
/* 入力欄は16pxを下回らせない。下回るとiOSが打つたびに画面を拡大する */
.fld{display:block;width:100%;max-width:34em;border:2px solid var(--kei2);
     border-radius:var(--r-s);padding:12px 14px;font-family:inherit;font-size:16px;
     color:var(--kz);background:var(--ji);letter-spacing:.04em;min-height:48px}
.fld:focus{outline:none;border-color:var(--ac)}
textarea.fld{min-height:9em;line-height:1.85}

/* ── フッター：sitemap-dark ────────────── */
/* 2026-08-29：404・thanks のような短いページで、濃色ベタが23.78%まで上がっていた
   （目標4.4〜12.0%）。押せる大きさ44pxは保ったまま、余白と行数を削る。 */
.end{background:var(--kz);color:#EFECF3;padding:16px 0 10px}
.end__in{display:flex;justify-content:space-between;align-items:center;
         flex-wrap:wrap;gap:4px 24px}
.end__n{font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;font-weight:700;
        font-size:var(--f18)}
.end__a{font-size:var(--f12);color:#C4BED0;margin-top:2px}
.end__nav{display:flex;flex-wrap:wrap;gap:0 2px;margin:0}
.end__nav a{font-size:var(--f12);color:#C4BED0;
            display:inline-flex;align-items:center;justify-content:center;
            min-height:44px;min-width:44px;padding:0 8px;border-radius:var(--r-s)}
.end__nav a:hover{color:#fff;background:rgba(255,255,255,.10);text-decoration:none}
.end__c{font-size:var(--f12);color:#9C95AA;border-top:1px solid #3E3C44;
        padding-top:6px;margin-top:6px}

/* ── 動き：fade-up / 500ms（効果は2つまで）── */
.pre{opacity:0;transform:translateY(14px)}
.on{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
@media (prefers-reduced-motion:reduce){
  .pre{opacity:1;transform:none}
  .on{transition:none}
}

/* ── 幅 ───────────────────────────────── */
@media (max-width:900px){
  :root{--ma:64px}
  .open__in,.cta__grid,.split,.split--half{grid-template-columns:1fr;gap:28px}
  .fuda{grid-template-columns:1fr 1fr}
  .cat{grid-template-columns:1fr}
  .checks,.faq,.hr__base{grid-template-columns:1fr}
  .faq__i:nth-last-child(-n+2){border-bottom:0}
  .faq__i:last-child{border-bottom:1px solid var(--kei)}
  .rows > li{grid-template-columns:1fr;gap:8px}
  .tl{grid-template-columns:1fr 1fr}
  .tl__i{padding:0 8px 8px 0}
  .prose{columns:1}
  .open__h{font-size:var(--f30)}
  .sec__ttl{font-size:var(--f25)}
  .cta__tel{font-size:var(--f30)}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .fuda{grid-template-columns:1fr}
  .duo,.trio{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr}
}