/* ============================================================
   税理士法人BAMC 共通スタイル（新デザイン）
   ============================================================ */
/* ============================================================
   カラートークン（統合マーケティング指示書 v2.2 / 6-5「色の面積効果」準拠）

   同じカラーコードでも、大面積では明るい色はより明るく・暗い色はより暗く見える。
   そのため用途を3つに分け、機械的な流用を禁止する。定義は creative_spec.md と同期。

     -fill / --surface-*  … background に指定してよい（セクション背景・ベタ塗り）
     -ink  / --line-*     … color / border に指定してよい（テキスト・罫線）
     -badge               … ボタン・塗りバッジ（大小の中間サイズ）

   併記した比率は白文字または白背景に対する WCAG コントラスト比。
   ============================================================ */
:root{
  /* 中間サイズ（ボタン・塗りバッジ）。旧 --navy。分割前からの参照が多いため名前を維持 */
  --navy:#15294d; --navy-dk:#0e1d39; --navy-pale:#eef2f8;
  --navy-badge:#15294d;
  /* 大面積用：暗色は大面積で沈むため明度を上げる */
  --navy-fill:#182f58;      /* 白文字 13.24:1 */
  --navy-fill-dk:#101f3c;   /* 白文字 16.36:1 */
  /* 小面積用：暗色は小面積で薄く見えるため明度を下げる */
  --navy-ink:#122342;       /* on白 15.62:1 */

  /* ゴールド。旧 --gold #b08d3f は on白 3.12:1 で AA 不適合のため、
     テキスト・ベタ塗りには使わず、3px以上の装飾罫線・ドット専用とする */
  --gold:#b08d3f; --gold-dk:#8f7030;
  --gold-rule:#b08d3f;      /* 装飾罫線・ドット専用 */
  --gold-fill:#8a6a2a;      /* ベタ塗り。白文字 5.03:1 */
  --gold-ink:#8a6a2a;       /* テキスト。on白 5.03:1 */

  --ink:#2d2d2d; --gray:#6f6f6f; --line:#e4e4e4;
  --line-strong:#d8d8d8;    /* 記事ページの太罫線 */
  /* --lgray #9a9a9a は白背景で 2.81:1（不適合）／暗背景で 5.49:1（適合）。
     地の明度で可否が反転するため、用途別に分けて使う */
  --lgray:#9a9a9a;
  --mute-weak:#6e6e6e;      /* 明背景のテキスト。on白 5.10 / surface-1 4.72 / surface-2 4.54 */
  --mute-fill:#767676;      /* 白抜きベタバッジ。白文字 4.54:1 */
  --mute-on-dark:#9a9a9a;   /* 暗背景のテキスト。on --dark 5.49:1 */

  --bg:#ffffff; --dark:#262423; --dark2:#1c1b1a;
  /* 淡い背景。--soft は暖色(色相60°)、--off は寒色(220°)で色相が割れていたため
     --surface-1 に寄せて統一する。旧名は既存参照のため残す */
  --surface-1:#f5f6f8; --surface-2:#eef2f8; --surface-3:#dde1e8;
  --soft:#f5f6f8; --off:#f5f6f8;
  --white:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans JP",sans-serif;color:var(--ink);background:var(--bg);line-height:1.9;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* height:auto を必ず添える。img に width/height 属性（CLS対策）を出しているので、
   これが無いと横幅だけ縮んで高さが属性値のまま残り、画像が縦に潰れる */
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.serif{font-family:"Noto Serif JP",serif}

/* ===== 右側固定ナビ ===== */
.side{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;display:flex;flex-direction:column;gap:2px}
.side a{writing-mode:vertical-rl;background:var(--navy);color:#fff;font-size:15px;font-weight:700;letter-spacing:.16em;padding:26px 15px;transition:.2s}
.side a:nth-child(2){background:var(--dark)}
.side a:hover{opacity:.88}

/* ===== ヘッダー（2段） ===== */
/* タグ名 header で指定すると、記事ページの <header class="article-header">
   （記事タイトルの見出しブロック）まで position:sticky になり、
   記事タイトルが画面上部に貼りついてサイトヘッダーを覆い隠していた。
   サイトヘッダーは body 直下の1個だけなので、そこに限定する。 */
body>header{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--line)}
.topbar{border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center}
.logo-svg{height:30px;width:auto;display:block}
.top-right{display:flex;align-items:center;gap:20px}
.top-right .extra{font-size:12.5px;color:var(--gray);font-weight:500}
.top-right .extra:hover{color:var(--navy)}
.top-right .dl{font-size:12.5px;color:var(--gray);font-weight:500;background:var(--soft);padding:8px 15px}
.top-right .dl:hover{color:var(--navy)}
.tel-nav{display:flex;align-items:center;gap:10px;padding-left:6px}
.tel-nav .num{font-family:"Noto Serif JP",serif;font-size:20px;font-weight:600;color:var(--navy);letter-spacing:.02em;display:flex;align-items:center;gap:7px;white-space:nowrap}
.tel-nav .num::before{content:"";width:15px;height:15px;flex:none;background-color:var(--gold);-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat}
.tel-nav small{font-size:11px;font-weight:500;color:var(--gray);letter-spacing:.02em}
.tel-nav:hover .num{color:var(--navy-dk)}
.gnav-in{display:flex;align-items:stretch}
.gnav-in>a{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 12px;height:54px;font-size:14.5px;font-weight:700;letter-spacing:.02em;transition:color .2s}
.gnav-in>a:hover{color:var(--navy)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.hamburger span{width:26px;height:2px;background:var(--ink)}

/* ===== 下層ページヒーロー ===== */
.page-hero{position:relative;background:var(--navy-fill);color:#fff;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.06),transparent 60%)}
.page-hero .wrap{position:relative;padding:64px 32px 58px;text-align:center}
.page-hero .en{font-family:"Noto Serif JP",serif;font-size:clamp(30px,4.4vw,44px);font-weight:600;letter-spacing:.04em;line-height:1.1}
.page-hero .jp{margin-top:12px;font-size:14px;font-weight:500;letter-spacing:.14em;color:#c6cedd}
.breadcrumb{border-bottom:1px solid var(--line);background:var(--soft)}
/* height を固定すると、記事タイトルが長い日にモバイルで2行に折り返したとき
   帯の外へ文字がはみ出す（枠線をまたいで本文に重なる）。
   flex-wrap:wrap で折り返す設計なので、高さは min-height で下限だけ決める。 */
.breadcrumb .wrap{display:flex;align-items:center;gap:6px 10px;min-height:46px;padding-top:12px;padding-bottom:12px;
  font-size:12px;line-height:1.6;color:var(--gray);flex-wrap:wrap}
.breadcrumb a:hover{color:var(--navy)}
.breadcrumb .sep{color:var(--mute-weak)}

/* ===== 見出し ===== */
.shead{text-align:center;margin-bottom:48px}
.shead .en{font-family:"Noto Serif JP",serif;font-size:clamp(28px,4vw,40px);font-weight:600;color:var(--ink);line-height:1.1;letter-spacing:.02em}
.shead .jp{margin-top:12px;font-size:14px;font-weight:700;color:var(--gray);letter-spacing:.1em}
.lead-c{text-align:center;max-width:760px;margin:0 auto 8px;color:var(--gray);font-size:15px;line-height:2}
h2.blk{font-family:"Noto Serif JP",serif;font-size:clamp(20px,2.6vw,26px);font-weight:600;color:var(--navy);letter-spacing:.05em;line-height:1.5;margin-bottom:22px;padding-left:16px;border-left:4px solid var(--navy)}

/* ===== ボタン ===== */
.btn-navy{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;font-size:15px;font-weight:700;padding:16px 40px;transition:.2s}
.btn-navy:hover{background:var(--navy-dk)}.btn-navy::after{content:"›";line-height:1;transform:translateY(-1px)}
.btn-line{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);color:var(--ink);font-size:14px;font-weight:700;padding:14px 38px;transition:.2s}
.btn-line:hover{background:var(--ink);color:#fff}.btn-line::after{content:"›";line-height:1;transform:translateY(-1px)}

section{padding:84px 0}

/* ===== お問い合わせCTAバンド ===== */
.cta-band{background:var(--navy-fill);color:#fff;text-align:center}
.cta-band .en{font-family:"Noto Serif JP",serif;font-size:40px;font-weight:600;line-height:1}
.cta-band h2{font-family:"Noto Serif JP",serif;margin:12px 0 10px;font-size:22px;font-weight:600;letter-spacing:.05em}
.cta-band p{font-size:14px;color:#cdd5e3;max-width:560px;margin:0 auto 28px}
.cta-band .tel a{font-family:"Noto Serif JP",serif;font-size:32px;font-weight:600;color:#fff;letter-spacing:.04em}
.cta-band .tel small{display:block;font-size:12px;color:#aeb8cd;margin-top:6px}
.cta-band .acts{margin-top:26px}
.cta-band .btn-navy{background:#fff;color:var(--navy)}.cta-band .btn-navy:hover{background:#e7ecf3}

/* ===== フッター ===== */
footer{background:var(--dark);color:#bdbdbd;font-size:13px}
.foot-main{padding:64px 0 40px}
/* フッター上段：縦罫線なし。住所ブロックを伸縮させ、メニュー3列は64px間隔で右端まで展開する。
   見出しと項目の左端を揃えるため ul のマーカーとインデントは廃止。 */
.foot-top{display:flex;flex-wrap:wrap;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-top>.foot-logo{flex:1 1 290px}
.foot-top>div:not(.foot-logo){padding-left:64px}
footer ul{list-style:none}
.foot-top ul{padding-left:0}
/* ~1200px：住所ブロックを1行使い切りにし、メニュー3列を下段に等間隔で配置 */
@media(max-width:1200px){
  .foot-top{justify-content:space-between;row-gap:34px}
  .foot-top>.foot-logo{flex:0 0 100%}
  .foot-top>div:not(.foot-logo){padding-left:0}
}
.foot-logo .nm{font-family:"Noto Serif JP",serif;font-weight:700;font-size:21px;color:#fff;letter-spacing:.06em;margin-bottom:14px}
.foot-logo .nm small{display:block;font-family:"Noto Serif JP",serif;font-weight:500;font-size:12px;color:#9a9a9a;letter-spacing:.18em;margin-top:4px}
.foot-addr{line-height:1.95;color:#9a9a9a}
footer h4{font-size:12px;letter-spacing:.1em;color:#fff;font-weight:700;margin-bottom:16px}
footer ul li{margin-bottom:10px}
footer ul a{color:#a8a8a8}
footer ul a:hover{color:#fff}
.foot-bottom{background:var(--dark2)}
.foot-bottom .wrap{display:flex;justify-content:space-between;align-items:center;min-height:60px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;gap:10px;font-size:11.5px;color:#888}
.foot-bottom .links a{margin-right:18px}
.foot-bottom .links a:hover{color:#fff}

/* ===== スクロール表示（控えめ） ===== */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.rv.rv-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none!important}}

/* ===== 詳しく解説（サービスページ本文） ===== */
#detail{background:var(--soft)}
.prose{max-width:900px;margin:0 auto}
.prose h3{font-family:"Noto Serif JP",serif;font-size:19px;font-weight:600;color:var(--navy);margin:36px 0 14px;padding-left:14px;border-left:3px solid var(--navy);line-height:1.5}
.prose h3:first-child{margin-top:0}
.prose p{font-size:15px;color:var(--ink);line-height:2.15;margin-bottom:18px}
.prose p:last-child{margin-bottom:0}

/* ===== 関連記事（サービスページ） ===== */
.relnews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.relnews-grid a{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:.2s}
.relnews-grid a:hover{box-shadow:0 12px 28px rgba(0,0,0,.1);transform:translateY(-4px)}
/* 高さ固定にしないこと。サムネイルSVGは1200×630で、枠の比率がずれると
   object-fit:cover が上下を切り、カテゴリ名・法人名・日付が消える
   （2026-09-24 ブログ一覧と同じ不具合をここでも修正） */
.relnews-grid .th{aspect-ratio:1200/630;background:var(--navy-pale);overflow:hidden;position:relative}
.relnews-grid .th img{width:100%;height:100%;object-fit:cover}
.relnews-grid .th .ni{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Noto Serif JP",serif;color:#c3ccdb;font-size:20px;letter-spacing:.1em}
.relnews-grid .bd{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.relnews-grid .meta{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.relnews-grid time{font-family:"Noto Serif JP",serif;font-size:13px;color:var(--gray)}
.relnews-grid .cat{font-size:10.5px;font-weight:700;padding:2px 8px;border:1px solid var(--navy);color:var(--navy)}
.relnews-grid .cat.news{background:var(--navy);color:#fff}
.relnews-grid h3{font-size:14px;font-weight:700;line-height:1.6;color:var(--ink)}

@media(max-width:1024px){
  .topbar-in{height:58px}
  .top-right .extra,.top-right .dl{display:none}
  .tel-nav small{display:none}
  .tel-nav .num{font-size:19px}
  .logo-svg{height:26px}
  .hamburger{display:flex;margin-left:8px}
  .gnav{display:none;border-top:1px solid var(--line)}
  header.open .gnav{display:block}
  .gnav-in{flex-direction:column;align-items:stretch}
  .gnav-in>a{flex:none;height:auto;padding:15px 26px;border-bottom:1px solid var(--line);font-size:15px;justify-content:flex-start;text-align:left}
  .gnav-in>a:last-child{border-bottom:none}
  .side{display:none}
  .relnews-grid{grid-template-columns:repeat(3,1fr)}
  /* 画面右の縦タブ(.side)が消える幅から、下部固定バーに切り替える。
     これがないと、スマホでは最下部までスクロールしない限り
     問い合わせ導線に到達できない。 */
  .fixbar{display:grid}
  /* バーの実高(59px)＋iPhoneのホームインジケータ領域。固定値だと最下部が隠れる */
  body{padding-bottom:calc(59px + env(safe-area-inset-bottom,0px))}
}

/* ── モバイル下部固定バー ──
   装飾は既存のネイビーとゴールドのみ。点滅・拡大などの動きは使わない。 */
.fixbar{display:none;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:75;
        border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -2px 14px rgba(0,0,0,.14);
        padding-bottom:env(safe-area-inset-bottom,0px)}
/* 下パディングを2px厚くして、2段のテキスト塊を光学的中央（やや上）へ逃がす。
   下段のsmallは視覚的に軽く、数値中央だと塊が沈んで見えるため。 */
.fixbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;
          min-height:58px;padding:9px 8px 11px;color:#fff;font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1.3}
.fixbar .t{background:var(--navy)}
.fixbar .f{background:var(--gold-fill)}
/* opacityで薄めるとコントラストが3.86:1(AA不適合)になるため、不透明のまま使う */
.fixbar small{margin-top:3px;font-size:10.5px;font-weight:500;letter-spacing:.02em}
@media(max-width:360px){
  .fixbar a{font-size:13px}
  .fixbar small{font-size:10px}
}
@media print{ .fixbar{display:none} }
@media(max-width:430px){
  .top-right{gap:10px}
  .tel-nav{padding-left:0}
  .tel-nav .num{font-size:16.5px;gap:5px}
  .tel-nav .num::before{width:13px;height:13px}
  .logo-svg{height:23px}
  .hamburger{margin-left:4px;padding:8px 4px}
}
@media(max-width:760px){
  .foot-top{flex-direction:column;gap:28px}
  .relnews-grid{grid-template-columns:1fr}
  /* モバイルの文字サイズ調整（見出しと本文のバランス） */
  section{padding:56px 0}
  .page-hero .wrap{padding:44px 24px 40px}
  .page-hero .en{font-size:27px}
  .page-hero .jp{margin-top:8px;font-size:12.5px}
  .shead{margin-bottom:34px}
  .shead .en{font-size:27px;line-height:1.35}
  .shead .jp{margin-top:10px;font-size:12.5px}
  /* 本文(.prose p)が15pxなので、見出しは21pxで差をつける。
     以前は19px、1行指定のものは min(19px,4.1vw)＝390px幅で16pxまで縮み、
     本文とほとんど同じ大きさになっていた（2026-08-27 修正） */
  h2.blk{font-size:21px;line-height:1.6;letter-spacing:.03em}
  /* 「1行に収める」指定はモバイルでは解除する。
     縮小して1行に収めるより、素直に2行へ折り返して大きさを保つほうが読みやすい。
     PC側の指定は生きているので、HTMLのクラスはそのままでよい */
  h2.blk.blk-1line{font-size:21px;letter-spacing:.03em;white-space:normal;padding-left:16px;border-left-width:4px}
  /* PC向けに入れている見出しの改行は、モバイルでは折り返し位置が合わないので消す */
  h2.blk .br-pc{display:none}
  .prose h3{font-size:17px}
  .cta-band .en{font-size:30px}
  .cta-band h2{font-size:19px}
  .cta-band .tel a{font-size:28px}
}

/* キーボード操作時のフォーカス表示（ブランドカラー） */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* アンカーリンク着地時に固定ヘッダーへ潜り込まないようにする */
section[id],div[id],[id].shead{scroll-margin-top:132px}
@media(max-width:860px){section[id],div[id],[id].shead{scroll-margin-top:74px}}

/* ===== 日本語の改行位置の調整（2026-08-24 文章校正） =========================
   見出し・短いリード文が「決断」「税理士」「お引き受け」のように
   熟語や文節の途中で折り返されるのを防ぐ。文言・タグ・クラスは変更していない。

     word-break:keep-all …… 全ブラウザ対応。読点・句点・中黒・空白でのみ折り返す
     word-break:auto-phrase … 対応ブラウザのみ有効（上の行を上書き）。文節単位で折り返す
     overflow-wrap:break-word … 1行に収まらない語がある場合の横あふれ防止

   ※ 長い本文段落には keep-all を当てていない。行末が大きく余って
      かえって読みにくくなるため、段落は auto-phrase のみを指定する。
      auto-phrase 非対応のブラウザでは従来どおりの折り返しになる（劣化しない）。
   -------------------------------------------------------------------------- */
/* ★ keep-all はPC幅でだけ有効にする（2026-08-27 実機で不具合を確認）
   keep-all は「読点・句点・中黒・空白でしか折り返さない」指定。
   Chrome は次行の auto-phrase で上書きされるので問題ないが、
   auto-phrase 未対応のブラウザ（Safari／iPhone）では keep-all が生き残る。
   記事の見出しには「旦那からの生活費の一部を貯金に回していたお金が重加算税の対象になった実話」
   のように読点が1つも無い36字の連続があり、折り返せずに画面外へはみ出して
   横スクロールが発生していた。
   モバイルは行が短く、そもそも熟語の途中で折り返しても不自然に見えないため、
   素直に既定の折り返しに任せる。 */
@media(min-width:761px){
  h1,h2,h3,h4,
  .hero .lead,
  #service .sintro,
  .kiso .ex,
  .foot-addr{
    word-break:keep-all;
    word-break:auto-phrase;
    overflow-wrap:break-word;
  }
}
@media(max-width:760px){
  h1,h2,h3,h4,
  .hero .lead,
  #service .sintro,
  .kiso .ex,
  .foot-addr{
    word-break:normal;
    overflow-wrap:anywhere;
  }
}

/* ★ 行末に1〜2文字だけ残さない（2026-08-27）
   「毎月お伺いする、月次巡回監査。」が
       毎月お伺いする、月次巡回監
       査。
   のように、最後の1文字だけ次の行に落ちて見栄えが悪くなっていた。
   text-wrap:balance は各行の長さをそろえて折り返す指定で、
       毎月お伺いする、
       月次巡回監査。
   のように分かれる。見出し・短いリード・カードの文言に当てる。
   対応していないブラウザでは、これまでどおりの折り返しになるだけで
   壊れることはない（Chrome 114+／Safari 17.5+／Firefox 121+ で有効）。
   長い本文には当てないこと。行数が多いと効果がなく、処理も重くなる。 */
h1,h2,h3,h4,
.hero .lead,
.lead,.lead-c,.sintro,.note,
.targets li,.cases .c h4,.reasons h3,.rsn h3,
.smenu h3,.svcfeat h3,.svcmenu h3,.menu-list .it h3,
.know .k h4,.entry .t,.smn a h3,
.cta-band h2,.cta-band p,
.article-title,.post h3{
  text-wrap:balance;
}
p,li,dd,dt,td,th,figcaption,
.lead,.lead-c,.sintro,.note,.smn-prep{
  word-break:auto-phrase;
}
/* グリッド／フレックスの子は既定が min-width:auto で、
   「中身の最小幅」より狭くできない。上の auto-phrase は文節ひとかたまりを
   最小幅とみなすため、320px級の画面では文節が入りきらず枠を突き抜ける。
   （法人案内の「職歴」欄が実際に20pxはみ出していた／2026-09-24 実機で確認）
   文字が入るグリッドの子には、縮んでよいと明示しておく。 */
dl>dt,dl>dd{min-width:0}
/* 長いURL・メールアドレス・英単語は単語の途中で折り返せないため、
   スマホ幅で画面外へはみ出す。1行に収まらないときだけ折る指定を全体に入れる。 */
p,li,dd,dt,td,th,figcaption,a,blockquote,address{
  overflow-wrap:break-word;
}

/* ★ 入力欄の文字は16px以上にすること（2026-08-27）
   iOS Safari は font-size が16px未満の入力欄をタップすると、
   読めるように画面を自動で拡大する。拡大されたまま戻らないため、
   利用者からは「横幅がおかしい」「はみ出している」ように見える。
   お問い合わせフォームが15px、記事検索が14pxで該当していた。
   ここを下げると同じ不具合が再発するので、16px未満にしないこと。
   ボタンは対象外（拡大が起きるのは文字を入力する欄だけ）。
   各ページの style が後から読み込まれ、しかも .search input や
   form input[type=text] のほうが詳細度が高いため、!important で押さえている。 */
@media(max-width:1024px){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
  select,
  textarea{font-size:16px !important}
}