/* ============================================================
   T&Mロックセンター ── デザイン案1「凛（りん）」 2026-09-28
   style.css ＋ skin-rich.css の上に重ねる差分。

   方針（見本：案件フォルダ 03_デザイン/デザイン方向性3案_2026-09-28.html）
     - 見出しは しっぽり明朝 B1（700のみ）、本文は BIZ UDPゴシック 17px（assets/fonts/ に同梱。使う文字の分だけ＝slim-fonts.py）
     - 余白を多めに。白地に墨、赤はボタンと印だけ
     - 装飾は少なめ。和紙は「はんこの場所」だけに敷き、鍵の話（白地）と見分ける目印にする
     - 急いでいる方向け：営業状況の自動表示／ご用件の入口／スマホ下部の電話バー
   配色の切り替え（A 明るい／B 締まる）はそのまま使える（色は --tm-* 変数から取る）
   ============================================================ */

:root{
  /* 和紙の模様。画像ファイルではなくブラウザが描く式（読み込みはほぼゼロ・外部に頼らない） */
  --tm-washi-tex: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27420%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.9%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.4%200%200%200%200%20.35%200%200%200%200%20.27%200%200%200%201%200%27/%3E%3C/filter%3E%3Cfilter%20id%3D%27f%27%3E%3CfeTurbulence%20type%3D%27turbulence%27%20baseFrequency%3D%27.012%27%20numOctaves%3D%274%27%20seed%3D%275%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.55%200%200%200%200%20.5%200%200%200%200%20.42%20-12%200%200%200%201%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27%20opacity%3D%27.07%27/%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23f%29%27%20opacity%3D%27.55%27/%3E%3C/svg%3E");
  --tm-washi-bg: #F6F2EA;
  --tm-washi-line: #E6DECF;
}

/* ------------------------------------------------------------
   1. 文字
   ------------------------------------------------------------ */
/* 地は白。以前の全面の和紙の縞は外す（和紙ははんこの場所だけ） */
body{ background-image: none; }

h1, h2, h3, .wp-block-site-title{ font-weight: 700; }
.tm-content h2{ letter-spacing: .05em; }
.tm-header .wp-block-site-title a{ font-weight: 700; letter-spacing: .06em; }

/* ------------------------------------------------------------
   2. トップのヒーロー：文字と写真を左右に分ける
      文字を写真に重ねないので、写真が差し替わっても読みやすさが変わらない
   ------------------------------------------------------------ */
.tm-hero--split{
  /* 中の文字の左端計算に「ヒーロー自身の幅」（100cqw）を使う。100vw だとスクロールバーの分ずれる */
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  min-height: clamp(440px, 40vw, 580px);
  background: var(--wp--preset--color--base);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.tm-hero--split > *{ margin-block: 0 !important; }
/* skin-rich.css の写真ヒーロー用の飾り（金の細枠・上下の暗いぼかし）は、この型では使わない */
.tm-hero--split::before,
.tm-hero--split::after{ display: none; }
.tm-hero__body{
  align-self: center;
  /* 文字の左端を本文の列（880px）の左端にそろえる */
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem)
           max(var(--wp--preset--spacing--30), calc((100cqw - var(--wp--style--global--content-size)) / 2));
}
.tm-hero__body > *{ margin-block: 0; }

/* skin-rich.css のヒーロー用ラベル（中央寄せ・左右の罫）を、左寄せ・朱の短い罫に置き換える */
.tm-hero--split .tm-hero__eyebrow{
  left: auto; transform: none;
  display: flex; align-items: center; gap: .8em;
  padding: 0;
  margin-bottom: 1.1rem !important;
  color: var(--wp--preset--color--muted);
  font-size: .8125rem !important;
  letter-spacing: .2em;
  opacity: 1;
}
.tm-hero--split .tm-hero__eyebrow::before{
  content: ""; position: static; flex: none;
  width: 2.2em; height: 2px; background: var(--tm-shu);
}
.tm-hero--split .tm-hero__eyebrow::after{ display: none; }

.tm-hero--split h1{
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 2.9rem);
  line-height: 1.35;
  letter-spacing: .06em;
  text-shadow: none;
  color: var(--wp--preset--color--contrast);
  margin-bottom: .55em;
}
.tm-hero__sub{
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 700;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.25rem);
  line-height: 1.75;
  margin-bottom: .6em !important;
}
.tm-hero__lead{
  font-size: .9375rem;
  color: var(--wp--preset--color--muted);
  max-width: 30em;
  margin-bottom: 1.2rem !important;
}
.tm-hero--split .wp-block-buttons{
  margin-top: 1.4rem; gap: .75rem;
  flex-direction: column; align-items: stretch; max-width: 22rem;
}
.tm-hero--split .wp-block-button__link{ width: 100%; text-align: center; }

.tm-hero__img{ position: relative; margin: 0; min-height: 100%; }
.tm-hero__img img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.tm-hero__img figcaption{
  position: absolute; left: .75rem; bottom: .75rem; margin: 0;
  background: rgba(255,255,255,.88); color: var(--wp--preset--color--muted);
  font-size: .7rem; line-height: 1.5; padding: .25rem .6rem; border-radius: 3px;
}

@media (max-width: 781px){
  .tm-hero--split{ grid-template-columns: 1fr; min-height: 0; }
  .tm-hero__img{ order: -1; min-height: 0; }
  .tm-hero__img img{ aspect-ratio: 16 / 9; height: auto; }
  .tm-hero__body{ padding: 1.75rem 20px 2.25rem; }
}
/* スマホは画面下の電話バーがあるので、ヒーローのボタンは出さない（同じボタンが2つ並ぶため） */
@media (max-width: 600px){
  .tm-hero--split .wp-block-buttons{ display: none; }
}

/* 下層ページのヒーロー（写真に文字を重ねる型）：金の細枠は外して装飾を減らす
   ※下層ページを「タイトル帯」型にするかは未決（CLAUDE.md の論点） */
.wp-block-cover.tm-hero::before{ display: none; }

/* ------------------------------------------------------------
   3. 営業状況（.js-tm-status を functions.php のスクリプトが時刻で書き換える）
   ------------------------------------------------------------ */
.tm-status{
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .1em .6em;
  padding: .45em 1em;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  background: #fff;
  font-size: .9375rem; line-height: 1.5;
}
.tm-status i{ width: .7em; height: .7em; border-radius: 50%; background: #9AA0A6; flex: none; }
.tm-status[data-open="1"] i{ background: #1E8E3E; box-shadow: 0 0 0 3px rgba(30,142,62,.18); }
.tm-status b{ font-weight: 700; white-space: nowrap; }
.tm-status span{ color: var(--wp--preset--color--muted); font-size: .9em; white-space: nowrap; }

/* ヘッダーの営業時間の行も、営業中は緑の点を付ける */
.tm-header-tel__hours[data-open="1"]::before{
  content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .35em;
  border-radius: 50%; background: #1E8E3E; vertical-align: .05em;
}

/* ------------------------------------------------------------
   4. 「どんなご用件ですか？」の入口
   ------------------------------------------------------------ */
.tm-content ul.tm-entry__list{
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.75rem;
  max-width: var(--wp--style--global--content-size);
  margin: 1.5rem auto 0;
}
.tm-content ul.tm-entry__list li{ padding: 0; margin: 0; }
.tm-content ul.tm-entry__list li::before{ display: none; }

.tm-tile{
  display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .2rem;
  height: 100%; align-content: start;
  padding: 1.1rem 0 1.25rem;
  border-top: 2px solid var(--tm-ai);
  color: inherit; text-decoration: none;
}
.tm-tile::before{
  content: ""; grid-row: span 2;
  width: 2.2rem; height: 2.2rem; margin-top: .1rem;
  background: var(--tm-shu);
  -webkit-mask: var(--tm-icon) center / contain no-repeat;
          mask: var(--tm-icon) center / contain no-repeat;
}
.tm-tile b{ font-size: 1.0625rem; line-height: 1.5; }
.tm-tile b::after{ content: " →"; color: var(--tm-shu); }
.tm-tile span{ font-size: .9375rem; line-height: 1.75; color: var(--wp--preset--color--muted); }
.tm-tile:hover b{ color: var(--tm-shu); }

/* アイコン（線画。色は --tm-shu で塗る） */
.tm-tile--lock { --tm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3Ccircle cx='12' cy='14.6' r='1.3'/%3E%3Cpath d='M12 15.9v2'/%3E%3C/svg%3E"); }
.tm-tile--key  { --tm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='12' r='4.5'/%3E%3Ccircle cx='7.5' cy='12' r='1.4'/%3E%3Cpath d='M12 12h9.5M18 12v3.2M21 12v2.2M15.3 12v1.8'/%3E%3C/svg%3E"); }
.tm-tile--stamp{ --tm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3.5h5a1.5 1.5 0 0 1 1.5 1.5v2.2c0 1.3-1.2 2-1.2 3.3v1.5H9.2V10.5C9.2 9.2 8 8.5 8 7.2V5a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Crect x='5' y='12' width='14' height='4.2' rx='1'/%3E%3Cpath d='M4 20.5h16'/%3E%3C/svg%3E"); }
.tm-tile--safe { --tm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='15.5' rx='2'/%3E%3Ccircle cx='12' cy='11.3' r='3.8'/%3E%3Cpath d='M12 7.5v1.4M12 13.7v1.4M8.2 11.3h1.4M14.4 11.3h1.4M6.5 19v1.8M17.5 19v1.8'/%3E%3C/svg%3E"); }

.tm-entry__more{
  max-width: var(--wp--style--global--content-size);
  margin: 1.25rem auto 0 !important;
  font-size: .9375rem; color: var(--wp--preset--color--muted);
}
@media (max-width: 600px){
  .tm-content ul.tm-entry__list{ grid-template-columns: 1fr; gap: 0; }
  .tm-tile{ padding: 1rem 0; }
}

/* ------------------------------------------------------------
   5. 和紙は「はんこの場所」だけ
      鍵の話は白地、はんこの話は和紙。スクロール中の目印になる。
      料金表・カードの下は無地のまま（文字を読みやすく保つ）
   ------------------------------------------------------------ */
.tm-section--hanko,
.tm-page-hanko .tm-section--tint{
  background: var(--tm-washi-bg) var(--tm-washi-tex);
  border-top: 1px solid var(--tm-washi-line);
  border-bottom: 1px solid var(--tm-washi-line);
}

/* ------------------------------------------------------------
   6. スマホ：画面下に「電話する｜フォーム」を固定
   ------------------------------------------------------------ */
.tm-callbar{ display: none; }
@media (max-width: 600px){
  .tm-callbar{
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--wp--preset--color--border);
    box-shadow: 0 -4px 14px rgba(0,0,0,.08);
    font-family: var(--wp--preset--font-family--sans);
  }
  .tm-callbar a{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 54px; border-radius: 6px; text-decoration: none;
    font-weight: 700; font-size: 1rem; line-height: 1.3; letter-spacing: .03em;
  }
  .tm-callbar small{ font-weight: 400; font-size: .7rem; }
  .tm-callbar__tel{ background: var(--tm-shu); color: #fff; }
  .tm-callbar__form{ border: 2px solid var(--tm-ai); color: var(--tm-ai); background: #fff; }
  .tm-callbar a:focus-visible{ outline: 3px solid var(--tm-ai); outline-offset: 2px; }

  /* バーの分だけ、ページの最後を持ち上げる */
  body{ padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  /* 配色の切り替えボタン（打ち合わせ用）はバーの上に逃がす */
  .tm-palswitch{ bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* ヘッダーの2段目（電話・お問い合わせ）は下のバーと重複するので外し、1段にする */
  .tm-header{ grid-template-areas: "title nav" !important; row-gap: 0 !important; }
  .tm-header__cta{ display: none !important; }
}

/* ============================================================
   7. 下層ページの見出し（2026-09-28）
      ・良い実写があるページ（鍵・会社概要・お問い合わせ）… トップと同じ「文字左・写真右」を小さく
      ・写真が用意できないページ（はんこ・金庫・引っ越し・法人）… 写真を使わない「タイトル帯」
        右側に、そのページの印（印影・ダイヤル・家・建物）を薄く大きく置く
      どちらも文字の左端は本文の列にそろえ、上に「トップ › ページ名」の道しるべを出す
   ============================================================ */
.tm-crumb{
  font-size: .8125rem !important; color: var(--wp--preset--color--muted);
  margin-top: 0 !important; margin-bottom: 1rem !important; letter-spacing: .04em;
}
.tm-crumb a{ color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.tm-crumb a:hover{ color: var(--tm-shu); }
.tm-crumb span{ margin: 0 .6em; opacity: .6; }

.tm-pagehead__lead{
  font-size: 1rem; color: var(--wp--preset--color--muted); margin-top: 0 !important; margin-bottom: 0 !important;
}
.tm-pagehead .tm-hero__eyebrow,
.tm-hero--sub .tm-hero__eyebrow{
  left: auto; transform: none;
  display: flex; align-items: center; gap: .8em; padding: 0;
  margin-top: 0 !important; margin-bottom: .6rem !important;
  color: var(--wp--preset--color--muted); font-size: .8125rem !important; letter-spacing: .2em; opacity: 1;
}
.tm-pagehead .tm-hero__eyebrow::before{ content: ""; position: static; width: 2.2em; height: 2px; background: var(--tm-shu); }
.tm-pagehead .tm-hero__eyebrow::after{ display: none; }

.tm-pagehead h1,
.tm-hero--sub h1{
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem) !important;
  line-height: 1.4; letter-spacing: .06em;
  margin-top: 0 !important; margin-bottom: .45em !important;
  text-align: left;
}

/* --- 写真ありの下層ページ --- */
.tm-hero--sub{ min-height: clamp(300px, 30vw, 420px); }
@media (max-width: 781px){
  .tm-hero--sub .tm-hero__img img{ aspect-ratio: 2 / 1; }
}

/* --- タイトル帯 ---
   ※中の文字は margin の左右を指定しないこと。constrained レイアウトの左右 auto（本文の列 880px にそろえる）が消えて、左端に寄ってしまう（2026-10-02） */
.tm-pagehead{
  position: relative; overflow: hidden;
  margin-top: 0 !important;
  padding: clamp(2.25rem, 5vw, 3.5rem) var(--wp--preset--spacing--30) clamp(2.25rem, 5vw, 3.25rem);
  background: var(--tm-tint-2);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.tm-pagehead > *{ position: relative; z-index: 1; }
.tm-pagehead::after{
  content: ""; position: absolute; z-index: 0;
  top: 50%; right: max(16px, calc((100vw - var(--wp--style--global--content-size)) / 2 - 3rem));
  width: clamp(120px, 17vw, 210px); aspect-ratio: 1;
  transform: translateY(-50%) rotate(-6deg);
  background: rgba(var(--tm-shu-rgb), .13);
  -webkit-mask: var(--tm-motif) center / contain no-repeat;
          mask: var(--tm-motif) center / contain no-repeat;
}
/* はんこのページは和紙の帯（はんこの場所＝和紙、の約束どおり） */
.tm-pagehead--hanko{
  background: var(--tm-washi-bg) var(--tm-washi-tex);
  border-bottom-color: var(--tm-washi-line);
}
.tm-pagehead--hanko{ --tm-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='35' fill='none' stroke='%23000' stroke-width='5'/%3E%3Ccircle cx='40' cy='40' r='28' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Crect x='27' y='23' width='11' height='8' rx='1.5'/%3E%3Crect x='27' y='36' width='11' height='8' rx='1.5'/%3E%3Crect x='27' y='49' width='11' height='8' rx='1.5'/%3E%3Crect x='42' y='23' width='11' height='8' rx='1.5'/%3E%3Crect x='42' y='36' width='11' height='8' rx='1.5'/%3E%3Crect x='42' y='49' width='11' height='8' rx='1.5'/%3E%3C/svg%3E"); }
.tm-pagehead--safe{ --tm-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='15.5' rx='2'/%3E%3Ccircle cx='12' cy='11.3' r='3.8'/%3E%3Cpath d='M12 7.5v1.4M12 13.7v1.4M8.2 11.3h1.4M14.4 11.3h1.4M6.5 19v1.8M17.5 19v1.8'/%3E%3C/svg%3E"); }
.tm-pagehead--moving{ --tm-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.2 12 4l9 7.2'/%3E%3Cpath d='M5.5 9.4V20h13V9.4'/%3E%3Crect x='10' y='13.5' width='4' height='6.5'/%3E%3Ccircle cx='13.2' cy='16.8' r='.5'/%3E%3C/svg%3E"); }
.tm-pagehead--business{ --tm-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.5' width='14' height='17'/%3E%3Cpath d='M8.5 7h2M13.5 7h2M8.5 10.5h2M13.5 10.5h2M8.5 14h2M13.5 14h2M10.5 20.5v-3h3v3M3 20.5h18'/%3E%3C/svg%3E"); }
@media (max-width: 600px){
  .tm-pagehead::after{ top: 1.25rem; transform: rotate(-6deg); width: 96px; right: 12px; opacity: .8; }
}

/* 見出し（帯・写真）の直後の本文は、しっかり間を空ける。色帯が続くときは 0 のまま */
.entry-content > .tm-pagehead + :not(.tm-section),
.entry-content > .tm-hero--split + :not(.tm-section){
  margin-top: var(--wp--preset--spacing--50) !important;
}

/* ============================================================
   8. お問い合わせページの電話番号：中央にそろえる
      skin-rich.css で上下に罫を引くため inline-block にしており、中央寄せが効いていなかった
   ============================================================ */
.tm-tel.has-text-align-center{ display: table; margin-inline: auto !important; }
.tm-tel a{ color: var(--wp--preset--color--contrast); text-decoration: none; }
.tm-tel a:hover{ color: var(--tm-shu); }
.tm-tel-note{ font-size: .875rem; color: var(--wp--preset--color--muted); }

/* ============================================================
   9. スマホで開くメニュー（2026-09-28）
      上に店名、項目ごとにアイコンと一言の説明、下に営業状況・電話・フォーム・所在地。
      店名と連絡先は functions.php の tmlock_nav_overlay_extras() が足している
   ============================================================ */
.tm-navhead, .tm-navfoot{ display: none; }
.wp-block-navigation-item__description{ display: none; }

.wp-block-navigation__responsive-container.is-menu-open{ padding: 14px 20px 28px !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{ top: 6px; right: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg{ width: 30px; height: 30px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  padding-top: 0 !important; align-items: stretch !important; gap: 0 !important;
  max-width: 560px; margin-inline: auto;
}

.is-menu-open .tm-navhead{
  display: block; padding: .15rem 3rem 1rem 0; margin-bottom: .25rem;
  border-bottom: 2px solid var(--tm-ai);
  font-family: var(--wp--preset--font-family--serif); font-weight: 700; font-size: 1.2rem;
  letter-spacing: .06em; color: var(--tm-ai); text-decoration: none; line-height: 1.35;
}
.is-menu-open .tm-navhead small{
  display: block; font-family: var(--wp--preset--font-family--sans); font-weight: 400;
  font-size: .72rem; letter-spacing: .14em; color: var(--wp--preset--color--muted);
}

.is-menu-open .wp-block-navigation-item{ position: relative; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display: block !important; padding: .85rem 2rem .85rem 2.6rem !important;
  font-size: 1.0625rem !important; font-weight: 700; line-height: 1.45;
}
.is-menu-open .wp-block-navigation-item__description{
  display: block; margin-top: .15rem;
  font-size: .8rem; font-weight: 400; color: var(--wp--preset--color--muted); line-height: 1.5;
}
/* 右端の「›」 */
.is-menu-open .wp-block-navigation-item::after{
  content: ""; position: absolute; right: .6rem; top: 50%;
  width: .5rem; height: .5rem; margin-top: -.25rem;
  border-top: 2px solid var(--wp--preset--color--muted); border-right: 2px solid var(--wp--preset--color--muted);
  transform: rotate(45deg);
}
/* 左端のアイコン */
.is-menu-open .wp-block-navigation-item::before{
  content: ""; position: absolute; left: .1rem; top: 1rem;
  width: 1.6rem; height: 1.6rem; background: var(--tm-shu);
  -webkit-mask: var(--tm-icon) center / contain no-repeat;
          mask: var(--tm-icon) center / contain no-repeat;
}
.tm-nav--keys    { --tm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='12' r='4.5'/%3E%3Ccircle cx='7.5' cy='12' r='1.4'/%3E%3Cpath d='M12 12h9.5M18 12v3.2M21 12v2.2M15.3 12v1.8'/%3E%3C/svg%3E"); }
.tm-nav--hanko   { --tm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3.5h5a1.5 1.5 0 0 1 1.5 1.5v2.2c0 1.3-1.2 2-1.2 3.3v1.5H9.2V10.5C9.2 9.2 8 8.5 8 7.2V5a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Crect x='5' y='12' width='14' height='4.2' rx='1'/%3E%3Cpath d='M4 20.5h16'/%3E%3C/svg%3E"); }
.tm-nav--safe    { --tm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='15.5' rx='2'/%3E%3Ccircle cx='12' cy='11.3' r='3.8'/%3E%3Cpath d='M12 7.5v1.4M12 13.7v1.4M8.2 11.3h1.4M14.4 11.3h1.4M6.5 19v1.8M17.5 19v1.8'/%3E%3C/svg%3E"); }
.tm-nav--moving  { --tm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.2 12 4l9 7.2'/%3E%3Cpath d='M5.5 9.4V20h13V9.4'/%3E%3Crect x='10' y='13.5' width='4' height='6.5'/%3E%3C/svg%3E"); }
.tm-nav--business{ --tm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.5' width='14' height='17'/%3E%3Cpath d='M8.5 7h2M13.5 7h2M8.5 10.5h2M13.5 10.5h2M10.5 20.5v-3h3v3'/%3E%3C/svg%3E"); }
.tm-nav--company { --tm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
/* いま見ているページは朱で示す */
.is-menu-open .wp-block-navigation-item.current-menu-item > a{ color: var(--tm-shu) !important; }
.is-menu-open .wp-block-navigation-item.current-menu-item{ box-shadow: inset 3px 0 0 var(--tm-shu); }

/* 下の連絡先 */
.is-menu-open .tm-navfoot{
  display: grid; gap: .6rem; margin-top: 1.5rem; width: 100%;
  font-family: var(--wp--preset--font-family--sans);
}
.is-menu-open .tm-navfoot .tm-status{ justify-self: start; margin: 0 0 .2rem; }
.is-menu-open .tm-navfoot a{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 56px; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 1.05rem; line-height: 1.3;
}
.is-menu-open .tm-navfoot small{ font-weight: 400; font-size: .72rem; }
.is-menu-open .tm-navfoot__tel{ background: var(--tm-shu); color: #fff !important; }
.is-menu-open .tm-navfoot__form{ border: 2px solid var(--tm-ai); color: var(--tm-ai) !important; }
.is-menu-open .tm-navfoot__addr{ margin: .4rem 0 0; font-size: .8rem; color: var(--wp--preset--color--muted); text-align: center; line-height: 1.7; }

/* ヘッダーとページ先頭の見出し（帯・写真）の間に、テンプレートの既定の隙間（24px）が白く残るのを消す */
main.tm-content:has(> .entry-content > :is(.tm-hero, .tm-pagehead):first-child){ margin-block-start: 0 !important; }
/* メニュー内の営業状況は2行になりやすいので、丸い札ではなく横長の箱にする */
.is-menu-open .tm-navfoot .tm-status{ justify-self: stretch; border-radius: 8px; }
/* 下層ページの写真は、高さを文字の側に合わせる（写真の縦横比で見出しが縦長にならないように） */
@media (min-width: 782px){
  .tm-hero--sub .tm-hero__img img{ position: absolute; inset: 0; }
}

/* ============================================================
   10. テスト版の注意（2026-10-02）。本番公開時に functions.php の tmlock_test_banner と一緒に外す
       画面に固定はしない（スマホで読む場所を削らないため）
   ============================================================ */
.tm-testbar{
  background: var(--tm-ai); color: #fff;
  font-family: var(--wp--preset--font-family--sans);
  font-size: .8125rem; line-height: 1.6; letter-spacing: .03em;
  text-align: center; padding: .5rem 1rem;
}
.tm-testbar strong{ font-weight: 700; margin-right: .3em; }

/* ============================================================
   11. お問い合わせフォーム（Contact Form 7・案2）2026-10-02
       急いでいる方・年配の方でも迷わないように：
       文字は 17px 以上（スマホで勝手に拡大されない）、押す場所は 52px 以上、
       ご用件は大きな選択ボタン、必須／任意をはっきり表示
   ============================================================ */
.tm-cf7, .wpcf7{ max-width: var(--wp--style--global--content-size); margin-inline: auto; }
.tm-form{
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem;
  background: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: 8px;
  padding: clamp(1.25rem, 4vw, 2.25rem);
}
.tm-form__intro{ margin: 0; font-size: .9375rem; color: var(--wp--preset--color--muted); }
.tm-form__row{ display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.tm-form__label{
  font-weight: 700; font-size: 1.0625rem; line-height: 1.5; padding: 0;
  display: flex; align-items: center; gap: .6em;
}
.tm-form__req, .tm-form__opt{
  font-size: .72rem; font-weight: 700; line-height: 1; letter-spacing: .06em;
  padding: .3em .55em; border-radius: 3px;
}
.tm-form__req{ background: var(--tm-shu); color: #fff; }
.tm-form__opt{ background: var(--tm-tint-3); color: var(--wp--preset--color--muted); }
.tm-form__intro .tm-form__req{ margin: 0 .2em; vertical-align: .1em; }
.tm-form__hint{ margin: 0; font-size: .875rem; color: var(--wp--preset--color--muted); line-height: 1.7; }
.tm-form__privacy{ margin: 0; font-size: .875rem; color: var(--wp--preset--color--muted); }

/* 入力欄 */
.tm-form input[type="text"],
.tm-form input[type="tel"],
.tm-form input[type="email"],
.tm-form select,
.tm-form textarea{
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 1.0625rem; line-height: 1.6; color: var(--wp--preset--color--contrast);
  background: #fff; border: 1.5px solid #B9B6B0; border-radius: 6px;
  padding: .75rem .9rem; min-height: 3.25rem;
}
.tm-form textarea{ min-height: 9rem; resize: vertical; }
.tm-form select{
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235E5F63' stroke-width='1.8'/%3E%3C/svg%3E") right .9rem center / 12px no-repeat;
}
.tm-form ::placeholder{ color: #A3A09A; }
.tm-form input:focus, .tm-form select:focus, .tm-form textarea:focus{
  outline: 3px solid rgba(var(--tm-shu-rgb), .35); outline-offset: 0; border-color: var(--tm-shu);
}
.tm-form input[type="file"]{ font: inherit; font-size: .9375rem; width: 100%; max-width: 100%; }
.tm-form input[type="file"]::file-selector-button{
  font: inherit; font-weight: 700; margin-right: .8rem; cursor: pointer;
  padding: .6rem 1rem; border-radius: 6px; border: 1.5px solid var(--tm-ai); background: #fff; color: var(--tm-ai);
}

/* ご用件：大きな選択ボタン（2列。スマホも2列で押しやすく） */
.tm-form .wpcf7-radio{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.tm-form .wpcf7-radio .wpcf7-list-item{ margin: 0; }
.tm-form .wpcf7-radio label{
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  min-height: 3.25rem; padding: .6rem .7rem;
  border: 1.5px solid #B9B6B0; border-radius: 6px; background: #fff;
  font-weight: 700; font-size: 1rem; line-height: 1.4; white-space: nowrap;
}
.tm-form .wpcf7-radio input{ width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--tm-shu); flex: none; }
.tm-form .wpcf7-radio label:has(input:checked){ border-color: var(--tm-shu); background: var(--tm-shu-wash); color: var(--tm-shu-deep); }
.tm-form .wpcf7-radio label:has(input:focus-visible){ outline: 3px solid rgba(var(--tm-shu-rgb), .35); }

/* 送信ボタン */
.tm-form__submit{ position: relative; }
.tm-form input[type="submit"]{
  font: inherit; font-weight: 700; font-size: 1.125rem; letter-spacing: .08em; cursor: pointer;
  width: 100%; min-height: 3.6rem; border: 0; border-radius: 6px;
  background: var(--tm-shu); color: #fff;
}
.tm-form input[type="submit"]:hover{ background: var(--tm-shu-deep); }
.tm-form input[type="submit"]:disabled{ opacity: .6; cursor: default; }
.tm-form .wpcf7-spinner{ position: absolute; right: 1rem; top: 50%; margin: -12px 0 0; }

/* エラー・送信結果 */
.tm-form .wpcf7-not-valid{ border-color: #C0392B !important; background: #FFF8F7; }
.tm-form .wpcf7-not-valid-tip{ color: #B3261E; font-size: .875rem; font-weight: 700; margin-top: .3rem; }
.wpcf7 form .wpcf7-response-output{
  margin: 1rem 0 0 !important; padding: 1rem 1.2rem !important; border-radius: 6px;
  font-size: 1rem; line-height: 1.7; border-width: 2px !important;
}
.wpcf7 form.sent .wpcf7-response-output{ border-color: #1E8E3E !important; background: #F1F8F3; color: #1B5E2B; font-weight: 700; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{ border-color: #C0392B !important; background: #FFF8F7; color: #8E1F14; }
.wpcf7-screen-reader-response{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============================================================
   12. スマホでの改行（2026-10-02）
       見出し・質問・表のマス・太字は、phrase-wrap.py が入れた <wbr>（文節の切れ目）でだけ改行する。
       本文は文字単位のまま、最後の行に1〜2文字だけ残らないようにする（text-wrap: pretty）
   ============================================================ */
/* 見出し・太字：文節の切れ目（<wbr>）でだけ改行。1文節が画面幅より長いときだけ、やむなくどこでも折る */
h1, h2, h3, h4, summary, .tm-tile b, .tm-content li strong, .tm-content p strong{
  word-break: keep-all; overflow-wrap: anywhere;
}
/* 表のマス：anywhere だと表の列幅の計算が「1文字幅」まで縮んでどこでも折れてしまうので break-word にする */
td, th, .wp-block-table td, .wp-block-table th{
  word-break: keep-all; overflow-wrap: break-word;
}
/* 行の長さをそろえる（balance）は大見出しだけ。3行以上になる見出しだと真ん中が短くなって読みにくいため */
h1, h2.has-text-align-center{ text-wrap: balance; }  /* 中央寄せの見出し（2行までの短いもの）は左右の長さをそろえる */
h2, h3, h4, summary{ text-wrap: wrap; }
.tm-content p, .tm-content li, .tm-content figcaption, .tm-content td, .tm-tile span:not(.tm-tail):not(.tm-nowrap), .tm-footer p{ text-wrap: pretty; }
span.tm-nowrap{ white-space: nowrap !important; }
/* 段落の最後の文節（phrase-wrap.py が包む）は途中で折らない＝最後の行が1〜2文字にならない */
span.tm-tail{ white-space: nowrap !important; }  /* text-wrap（white-space の一部）に上書きされないよう強めに */
/* スマホの表：余白を詰めて1列目（作業内容など）の幅を確保する。狭いと「出張費（仙台｜市内）」と折れるため */
@media (max-width: 600px){
  .wp-block-table th, .wp-block-table td{ padding: .55rem .45rem; }
  /* 料金表は文字を一回り小さくして、言葉を途中で折らずに画面幅に収める（右の列が切れないように） */
  .tm-pricetable table td,
  .tm-pricetable table th{ font-size: .8125rem; padding: .5rem .35rem; }
}
/* スマホの料金表・店舗情報の表は列の幅を固定する。
   言葉を途中で折らない設定（keep-all）だと、長い言葉の分だけ表が画面より広がって右の列が切れるため。
   幅を固定すれば、収まらない言葉だけがマスの中で折り返される */
@media (max-width: 600px){
  .wp-block-table table{ table-layout: fixed; width: 100%; }
  /* 金額が並ぶ3列の表だけ、金額の列の幅を決める */
  .tm-pricetable table:has(thead th:nth-child(3)) thead th:not(:first-child){ width: 6.6em; }
  /* 2列の表（引っ越しの「やること／時期」など）は、2列目も文章なので折り返してよい */
  .tm-pricetable table:not(:has(thead th:nth-child(3))) td{ white-space: normal; }
  .tm-deflist table td:first-child{ width: 6.5em; }
}

/* ============================================================
   13. デザイン第2弾「整（せい）」（2026-10-04）
       見本：案件フォルダ 03_デザイン/デザイン第2弾3案_2026-10-04.html（社長が「整」×配色 A「明るい」を選択）
       考え方：飾りを足すのではなく、形をそろえる（引き算）。
         - 見出しは1種類（左寄せ＋まっすぐな角印）。番号つきの見出しは番号だけ
         - カードの影・右上の朱の折り返し・鍵穴の透かし、鍵の形の区切り線はやめる
         - 押せる入口は淡い面の札。料金表の黒い見出し行はやめ、数字を主役に
         - 判断に必要な文字は 17px 以上、押す場所は 48px 以上
         - 配色 B「締まる」は、ヘッダー・3つの安心・対応エリア・フッターを墨の帯にする
       ※skin-rich.css の飾りを打ち消す指定が多い。本番で一本化するときは skin-rich.css 側を消して整理する
   ============================================================ */

/* ---- 13-1. 見出し：1種類にそろえる ---- */
.tm-content h2,
.tm-content h2:not(.has-text-align-center),
.tm-content h2.has-text-align-center{
  display: flex; align-items: center; gap: .55em;
  text-align: left;
  border-left: 0; padding-left: 0;
  border-bottom: 0; padding-bottom: 0;
  margin-top: 3.5rem;
  letter-spacing: .05em;
}
/* 角印：まっすぐ・二重線（内側の線は outline で描くので、地の色を問わない） */
.tm-content h2::before,
.tm-content h2:not(.has-text-align-center)::before{
  content: ""; flex: none; position: static;
  width: .62em; height: .62em;
  border: 2px solid var(--tm-shu); border-radius: 1px;
  outline: 2px solid var(--tm-shu); outline-offset: -6px;
  box-shadow: none; opacity: 1; transform: none;
}
.tm-content h2.has-text-align-center::after{ display: none; }
/* はんこの帯の見出し：上の丸い「印」のぶん空けていた余白を戻す */
.tm-section--hanko h2.has-text-align-center,
.tm-section--hanko h2.has-text-align-center:first-child{ margin-top: 0 !important; }
/* 番号つきの見出し（1. 鍵開け／① 前の住人の…）は番号が目印なので、角印を重ねない */
.tm-content h2.tm-h-num::before{ display: none; }
.tm-content h3,
.tm-content h3.has-text-align-center{ border-left: 0; padding-left: 0; text-align: left; color: var(--wp--preset--color--contrast); }

/* 中央寄せの文は左寄せに（見出しが左なので）。対応エリアの帯・お電話の番号だけは中央のまま */
.tm-content p.has-text-align-center:not(.tm-tel):not(.tm-tel-note){ text-align: left; }
.tm-content .wp-block-buttons.is-content-justification-center{ justify-content: flex-start; }
.tm-content .tm-section--dark h2{ justify-content: center; }
.tm-content .tm-section--dark p.has-text-align-center:not(.tm-tel):not(.tm-tel-note){ text-align: center; }
.tm-content .tm-section--dark .wp-block-buttons.is-content-justification-center{ justify-content: center; }
.tm-content .tm-section:has(.tm-tel) h2{ justify-content: center; }

/* ---- 13-2. 区切り：鍵の形の線はやめ、白と淡いグレーの帯の交互で切り替える ---- */
.tm-section--tint::before,
.tm-section--hanko::before,
.tm-section--dark::before,
.tm-footer::before{ display: none; }
.tm-section--tint{ border-bottom: 0; }

/* ---- 13-3. カード：影・折り返し・透かしをやめ、細い枠だけ ---- */
.tm-card{
  display: flex; flex-direction: column;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 4px;
  box-shadow: none; transition: none;
  padding: 1.5rem;
}
.tm-card:hover{ transform: none; box-shadow: none; border-color: var(--wp--preset--color--border); }
.tm-card::before,
.tm-card::after{ display: none; }
.tm-card--link,
.tm-card--urgent{ border-top: 1px solid var(--wp--preset--color--border); }
.tm-card h3{ font-size: 1.25rem; line-height: 1.5; margin-bottom: .5rem; }
.tm-card p{ font-size: 1.0625rem; }
/* 「3つの安心」の番号は、整では出さない（順番のある話ではないため） */
.tm-card__num{ display: none !important; }
/* 押せるカード（こんなときは）：カード全体を押せるようにし、リンクの行は下にそろえる */
.tm-card--link{ position: relative; }
.tm-card--link > p:last-child{ margin-top: auto; padding-top: .5rem; font-weight: 700; }
.tm-card--link > p:last-child a::after{ content: ""; position: absolute; inset: 0; }
.tm-card--link:hover{ border-color: var(--tm-ai); }
/* はんこの種類のカード：価格の行を下にそろえる */
.tm-page-hanko .tm-card > p:last-child{ margin-top: auto; }

/* ---- 13-4. 箇条書き・パネル ---- */
.tm-panel{
  background: var(--tm-tint-2);
  border-left: 0; border-radius: 4px;
  padding: 1.25rem 1.5rem;
}
.tm-content ul.wp-block-list li::before{
  width: 6px; height: 6px; border-radius: 0; transform: none;
  top: .8em; left: .3rem;
  background: var(--wp--preset--color--muted); opacity: 1;
}
/* 箇条書きも文節の切れ目でだけ改行（phrase-wrap.py が <wbr> を入れる） */
.tm-content li{ word-break: keep-all; overflow-wrap: anywhere; }

/* ---- 13-5. 「どんなご用件ですか？」の入口：淡い面の札＋右端の矢印 ---- */
.tm-content ul.tm-entry__list{ gap: .75rem 1.25rem; }
.tm-tile{
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 1rem; align-items: start;
  padding: 1.25rem;
  background: var(--tm-tint-2);
  border: 1px solid var(--tm-line2);
  border-radius: 4px;
  box-sizing: border-box;  /* height:100% と余白で、下の行や文にはみ出さないように */
}
.tm-tile::before{ width: 2rem; height: 2rem; }
.tm-tile b, .tm-tile span{ grid-column: 2; }
.tm-tile b{ font-size: 1.125rem; }
.tm-tile b::after{ content: none; }
.tm-tile span{ font-size: 1.0625rem; }
.tm-tile::after{
  content: "→"; grid-column: 3; grid-row: 1 / span 2; align-self: center;
  font-size: 1.25rem; color: var(--tm-ai);
}
.tm-tile:hover{ border-color: var(--tm-ai); }
.tm-tile:hover b{ color: inherit; text-decoration: underline; text-underline-offset: .25em; }
.tm-entry__more{ font-size: 1.0625rem; }
.tm-entry__more a{ white-space: nowrap; }
@media (max-width: 600px){
  .tm-content ul.tm-entry__list{ gap: .75rem; }
  .tm-tile{ padding: 1rem; }
}

/* ---- 13-6. ご依頼の流れ ---- */
.tm-content ol.tm-flow li{
  font-size: 1.0625rem; border-radius: 4px;
  border-color: var(--wp--preset--color--border);
}
.tm-content ol.tm-flow li::before{ background: var(--tm-ai); }
.tm-content ol.tm-flow li strong{ font-size: 1.0625rem; }

/* ---- 13-7. 表：黒い見出し行をやめ、数字を主役に ---- */
.wp-block-table table{
  background: var(--wp--preset--color--base); box-shadow: none;
  border-top: 2px solid var(--tm-ai);
  font-size: 1.0625rem;
}
.wp-block-table th,
.wp-block-table td{
  border: 0; border-bottom: 1px solid var(--wp--preset--color--border);
  padding: .85rem 1rem;
}
.wp-block-table thead th{
  background: var(--tm-tint-2);
  color: var(--wp--preset--color--muted);
  border-color: var(--wp--preset--color--border);
}
.wp-block-table tbody tr:nth-child(even) td{ background: transparent; }
.tm-deflist table td:first-child{ background: var(--tm-tint-2); border-right: 0; }
/* 3列の料金表（品目・税抜・税込）：金額は右寄せ、税込を太字 */
.tm-pricetable table:has(thead th:nth-child(3)) :is(td, th):not(:first-child){ text-align: right; }
.tm-pricetable table:has(thead th:nth-child(3)) td:nth-child(3){ font-weight: 700; }
.tm-lbl{ display: none; }
@media (max-width: 600px){
  .wp-block-table th, .wp-block-table td{ font-size: 1.0625rem; }
  /* 3列の料金表は「品目名の下に税抜／税込」に組み替える（17px で読めるように。見出しの文字は phrase-wrap.py が入れる） */
  .tm-pricetable table:has(thead th:nth-child(3)){ table-layout: auto; }
  .tm-pricetable table:has(thead th:nth-child(3)) thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tm-pricetable table:has(thead th:nth-child(3)) :is(tbody, tr, td){ display: block; }
  .tm-pricetable table:has(thead th:nth-child(3)) tr{
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .75rem;
    padding: .75rem .15rem; border-bottom: 1px solid var(--wp--preset--color--border);
  }
  .tm-pricetable table:has(thead th:nth-child(3)) td{
    border: 0; padding: 0; font-size: 1.0625rem; line-height: 1.6;
    text-align: left !important; white-space: normal;
  }
  .tm-pricetable table:has(thead th:nth-child(3)) td:first-child{ grid-column: 1 / -1; font-weight: 700; margin-bottom: .15rem; }
  .tm-pricetable table:has(thead th:nth-child(3)) td[colspan]{ grid-column: 1 / -1; font-weight: 400; }
  .tm-pricetable .tm-lbl{ display: inline; font-weight: 400; color: var(--wp--preset--color--muted); margin-right: .4em; }
}

/* ---- 13-8. ボタン：影・浮き上がりをやめる ---- */
.wp-block-button__link{ box-shadow: none; border-radius: 4px; }
.wp-block-button__link:hover,
.wp-block-button__link:active{ transform: none; box-shadow: none; }

/* ---- 13-9. 対応エリア（.tm-section--dark）：A は淡い面（style.css）、B は墨の帯。スマホは左寄せ ---- */
body:not(.tm-pal-b) .tm-section--dark :focus-visible{ outline-color: var(--tm-shu); }
@media (max-width: 600px){
  .tm-content .tm-section--dark h2{ justify-content: flex-start; }
  .tm-content .tm-section--dark p.has-text-align-center:not(.tm-tel):not(.tm-tel-note){ text-align: left; }
  /* 画面下の電話バーと同じボタンなので、スマホでは出さない（ヒーローと同じ扱い） */
  .tm-section--dark .wp-block-buttons{ display: none; }
}

/* ---- 13-10. フッター：17px・リンクは 48px ---- */
.tm-footer{ font-size: 1.0625rem; }
.tm-footer h2{ font-size: 1.125rem; }
.tm-footer .wp-block-navigation{ font-size: 1.0625rem; width: 100%; }
.tm-footer .wp-block-navigation__container{ gap: 0 !important; width: 100%; }
.tm-footer .wp-block-navigation-item{ width: 100%; border-bottom: 1px solid var(--wp--preset--color--border); }
.tm-footer .wp-block-navigation-item__content{ display: flex !important; align-items: center; min-height: 48px; width: 100%; }
.tm-footer .wp-block-navigation a::after{ display: none; }
.tm-copyright{ font-size: .875rem; }

/* ---- 13-11. 文字の大きさ：判断に必要な文字は 17px 以上 ---- */
.tm-hero__lead,
.tm-status,
.tm-pagehead__lead,
.tm-tel-note,
.tm-map-note,
.tm-access-steps figcaption,
.tm-faq summary, .tm-faq > p,
.tm-form__intro, .tm-form__hint, .tm-form__privacy{ font-size: 1.0625rem !important; }
.tm-crumb{ font-size: .875rem !important; }
.tm-status{ border-radius: 4px; border-color: var(--tm-line2); }
.tm-form .wpcf7-radio label{ font-size: 1.0625rem; }
/* 幅 380px 以下では、ご用件の選択ボタンを1列に（2列だと「はんこのこと」がはみ出すため） */
@media (max-width: 380px){ .tm-form .wpcf7-radio{ grid-template-columns: 1fr; } }
/* よくある質問の「Q」：傾けない */
.tm-faq summary::before{ transform: none; }
/* フォームの記入例は、読める濃さに（以前の #A3A09A は薄すぎた） */
.tm-form ::placeholder{ color: var(--wp--preset--color--muted); opacity: 1; }
@media (max-width: 600px){
  .tm-content h2{ letter-spacing: .03em; }
  .tm-hero--split h1, .tm-pagehead h1{ letter-spacing: .03em; }
}

/* ---- 13-12. スマホのメニューボタン：押す場所 48px＋「メニュー」の文字 ---- */
.tm-header .wp-block-navigation__responsive-container-open{
  min-width: 48px; min-height: 48px; align-items: center; justify-content: center; gap: .3rem;
  padding: 0 .6rem; border: 1px solid var(--tm-line2); border-radius: 4px;
}
.tm-header .wp-block-navigation__responsive-container-open::after{
  content: "メニュー"; font-size: .875rem; font-weight: 700; letter-spacing: .04em;
}
.wp-block-navigation__responsive-container-close{
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px;
}

/* ---- 13-13. 仮写真の注記は、写真の上に重ねず下に出す（「写真に文字を重ねない」約束どおり） ---- */
.tm-hero__img figcaption{
  position: static; background: none; border-radius: 0;
  padding: .35rem 20px 0; font-size: .75rem;
}
@media (min-width: 782px){
  .tm-hero__img:has(figcaption) img{ position: absolute; inset: 0 0 2rem 0; height: calc(100% - 2rem); }
  .tm-hero__img figcaption{
    position: absolute; left: 0; right: 0; bottom: 0; height: 2rem;
    display: flex; align-items: center; padding: 0 .75rem;
    background: var(--wp--preset--color--base);
  }
}

/* ---- 13-14. ページ内の近道（鍵・金庫・会社概要・お問い合わせ） ---- */
.tm-jump{ display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin-top: 1.25rem !important; }
.tm-jump a{
  display: inline-flex; align-items: center; gap: .35em;
  min-height: 48px; padding: 0 1rem;
  font-size: 1.0625rem; font-weight: 700; line-height: 1.3; text-decoration: none;
  color: var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--tm-line2); border-radius: 4px;
}
.tm-jump a::after{ content: "↓"; font-weight: 400; color: var(--wp--preset--color--muted); }
.tm-jump a:hover{ border-color: var(--tm-ai); }
/* 飛んだ先の見出しが画面の上にぴったり付かないように */
.tm-content [id]{ scroll-margin-top: 1.5rem; }

/* ---- 13-15. 下層ページの見出しの目印：形は同じ角、中の模様だけページで変える
       鍵＝鍵穴／はんこ＝印影／金庫＝ダイヤル／引っ越し＝家／法人＝建物／会社概要＝地図の印／お問い合わせ＝手紙 ---- */
.tm-pagehead h1,
.tm-hero--sub h1{ position: relative; padding-left: 1.55em; }
.tm-pagehead h1::before,
.tm-hero--sub h1::before,
.tm-pagehead h1::after,
.tm-hero--sub h1::after{
  content: ""; position: absolute; left: 0; top: .14em;
  width: 1.12em; height: 1.12em;
}
.tm-pagehead h1::before,
.tm-hero--sub h1::before{ border: 2px solid var(--tm-shu); border-radius: 2px; box-sizing: border-box; }
.tm-pagehead h1::after,
.tm-hero--sub h1::after{
  background: var(--tm-shu);
  -webkit-mask: var(--tm-mark) center / 62% no-repeat;
          mask: var(--tm-mark) center / 62% no-repeat;
}
.tm-page-keys    { --tm-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8.5' r='4.2'/%3E%3Cpath d='M9.9 11.2 8.2 21h7.6l-1.7-9.8z'/%3E%3C/svg%3E"); }
.tm-page-hanko   { --tm-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='35' fill='none' stroke='%23000' stroke-width='6'/%3E%3Crect x='26' y='21' width='12' height='10' rx='1.5'/%3E%3Crect x='26' y='35' width='12' height='10' rx='1.5'/%3E%3Crect x='26' y='49' width='12' height='10' rx='1.5'/%3E%3Crect x='42' y='21' width='12' height='10' rx='1.5'/%3E%3Crect x='42' y='35' width='12' height='10' rx='1.5'/%3E%3Crect x='42' y='49' width='12' height='10' rx='1.5'/%3E%3C/svg%3E"); }
.tm-page-safe    { --tm-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3'/%3E%3C/svg%3E"); }
.tm-page-moving  { --tm-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.2 12 4l9 7.2'/%3E%3Cpath d='M5.5 9.4V20h13V9.4'/%3E%3Crect x='10' y='13.5' width='4' height='6.5'/%3E%3C/svg%3E"); }
.tm-page-business{ --tm-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.5' width='14' height='17'/%3E%3Cpath d='M8.5 7h2M13.5 7h2M8.5 10.5h2M13.5 10.5h2M10.5 20.5v-3h3v3'/%3E%3C/svg%3E"); }
.tm-page-company { --tm-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
.tm-page-contact { --tm-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='M3.5 7 12 13l8.5-6'/%3E%3C/svg%3E"); }
/* 帯の右側の大きな模様は、傾けず控えめに */
.tm-pagehead::after{ transform: translateY(-50%); background: rgba(var(--tm-ai-rgb), .07); }
.tm-pagehead--hanko::after{ background: rgba(var(--tm-shu-rgb), .13); }
@media (max-width: 600px){
  .tm-pagehead::after{ transform: none; }
}

/* ---- 13-16. 配色 B「締まる」：ヘッダー・3つの安心・対応エリア・フッターを墨の帯に ---- */
.tm-pal-b .tm-header{
  background-color: var(--tm-ai) !important; color: #fff;
  border-bottom: 0; box-shadow: none;
}
.tm-pal-b .tm-header .wp-block-site-title a{ color: #fff; }
.tm-pal-b .tm-header .wp-block-site-tagline,
.tm-pal-b .tm-header-tel__label,
.tm-pal-b .tm-header-tel__hours{ color: rgba(255,255,255,.78); }
.tm-pal-b .tm-header-tel strong{ color: #fff; }
.tm-pal-b .tm-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content{ color: #fff; }
.tm-pal-b .tm-header .wp-block-navigation__responsive-container-open{ color: #fff; border-color: rgba(255,255,255,.45); }
.tm-pal-b .tm-testbar{ border-bottom: 1px solid rgba(255,255,255,.18); }

.tm-pal-b .tm-section--dark,
.tm-pal-b .tm-section.tm-trust{ background: var(--tm-ai) !important; color: #fff; }
.tm-pal-b .tm-trust h2,
.tm-pal-b .tm-trust h3{ color: #fff; }
.tm-pal-b .tm-trust .tm-card{ background: transparent; border-color: rgba(255,255,255,.24); color: #fff; }
.tm-pal-b .tm-trust .tm-card p{ color: rgba(255,255,255,.92); }

.tm-pal-b .tm-footer{ background: var(--tm-ai); color: #fff; border-top: 0; }
.tm-pal-b .tm-footer h2,
.tm-pal-b .tm-footer a{ color: #fff; }
.tm-pal-b .tm-footer .wp-block-navigation-item{ border-bottom-color: rgba(255,255,255,.18); }
.tm-pal-b .tm-footer .wp-block-separator{ border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.18); }
.tm-pal-b .tm-copyright{ color: rgba(255,255,255,.7); }
.tm-pal-b :is(.tm-header, .tm-trust, .tm-section--dark, .tm-footer) :focus-visible{ outline-color: #fff; }

/* 入口・押せるカードの枠も墨で締める */
.tm-pal-b .tm-tile{ background: var(--wp--preset--color--base); border-color: var(--tm-ai); }
.tm-pal-b .tm-card--link{ border-color: var(--tm-ai); }

/* ============================================================
   14. 2026-10-07 打ち合わせの反映（2026-10-08）
       ・トップの「お知らせ」欄（投稿が無いときは functions.php が欄ごと出さない）
       ・お知らせ1件のページ（templates/single.html）
       ・出典の注記（金庫ページのメーカー情報）
   ============================================================ */
.tm-news{ padding-block: 1.25rem; border-bottom: 1px solid var(--wp--preset--color--border); }
.tm-news__query{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem 2rem; align-items: start; }
.tm-content h2.tm-news__title{ margin: 0 !important; font-size: 1.125rem; letter-spacing: .08em; }
.tm-news__list{ list-style: none; margin: 0 !important; padding: 0; }
.tm-news__list li{ display: flex; flex-wrap: wrap; gap: .1rem 1.25rem; align-items: baseline; padding: .15rem 0; margin: 0 !important; }
.tm-news__list li::before{ display: none !important; }
.tm-news__list .wp-block-post-date{ font-size: .9375rem; color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
.tm-news__list h3{ margin: 0 !important; font-family: var(--wp--preset--font-family--sans); font-size: 1.0625rem; font-weight: 700; }
.tm-news__list h3 a{ color: inherit; }
@media (max-width: 600px){
  .tm-news__query{ grid-template-columns: 1fr; }
}
.tm-single .tm-single__date{ color: var(--wp--preset--color--muted); font-size: .9375rem; margin-bottom: .25rem; }
.tm-single h1.tm-single__title{ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.45; margin-top: 0; }
.tm-single__back{ margin-top: 2.5rem !important; }
.tm-source{ font-size: .875rem; color: var(--wp--preset--color--muted); }
/* 2026-10-08 若生様の写真（スマホで撮った縦長の写真）を、枠の形にそろえて切り取る */
.tm-page-keys .tm-content .wp-block-columns:not(.are-vertically-aligned-center) .tm-photo img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tm-page-safe .tm-section .tm-photo img{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 60%; }
/* はんこページ「書体と印材」：印材と印影の写真は正方形でそろえ、大きくしすぎない */
.tm-content .tm-hanko-samples{ justify-content: flex-start; }
.tm-content .tm-hanko-samples > .wp-block-column{ flex: 0 1 280px !important; }
.tm-hanko-samples .tm-photo img{ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* 鍵のサービス「出張して伺います」：車の写真2枚は同じ高さにそろえる */
.tm-car .tm-photo img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* 会社概要のアクセス：サンデーの正面は看板が切れないよう 16:9 で */
.tm-page-company .tm-photo.alignwide img{ aspect-ratio: 16 / 9; object-position: center 35%; }
/* 2026-10-09 タイトル帯の見出し：目印のぶんの左余白を幅に含める。
   含めないと、本文幅（880px）の中央寄せで見出しだけが余白の半分だけ左にずれ、目印がパンくずより左に出ていた */
.tm-pagehead h1,
.tm-hero--sub h1{ box-sizing: border-box; }
/* 2026-10-10 会社概要の見出し写真（カウンター正面）：上寄せで切り取る。
   カウンターの「合カギ 880円」はぼかしてある（店頭の表示がサイトの 900円と違うため）。上寄せにすると、スマホではぼかしが画面の外に出る */
.tm-page-company .tm-hero__img img{ object-position: center top; }
/* 2026-10-11 プライバシーポリシー：見出しの目印と帯の模様（盾＋チェック）。フォームの下の一文は小さめに */
.tm-page-privacy-policy{ --tm-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.4 7.5 9.5 4.3-1.1 7.5-4.9 7.5-9.5V6z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.tm-pagehead--privacy{ --tm-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.4 7.5 9.5 4.3-1.1 7.5-4.9 7.5-9.5V6z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.tm-form-note{ font-size: .9375rem; margin-top: 1rem; }
.tm-copyright a{ color: inherit; margin-right: .5em; }
/* 2026-10-17 会社概要のアクセス：入口の当店の表示（目印）。写真を大きくしすぎない */
.tm-content .tm-photo--sign{ max-width: 560px; margin-left: auto; margin-right: auto; }
.tm-photo--sign img{ width: 100%; height: auto; }
/* 2026-10-17 はんこ／会社の印鑑：角印の見本は正方形のまま見せる（3:2 で切ると印の四隅が欠ける） */
.tm-photo--seal{ max-width: 360px; }
.tm-photo.tm-photo--seal img{ aspect-ratio: 1 / 1 !important; object-fit: cover; width: 100%; height: auto; }