/*
Theme Name: T&Mロックセンター
Theme URI: https://tmlock.local/
Author: ITAS.U
Description: 仙台市若林区大和町「かぎとはんこの店」T&Mロックセンターのための打ち合わせ用たたき台テーマ。コアブロックのみ・プラグイン不要・外部リソース非依存（システムフォントのみ）。藍＝鍵と防犯、朱＝はんこ。
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tmlock
Tags: full-site-editing, one-column, block-patterns
*/


/* =========================================================
   色の変数（2026-09-27 配色の切り替えのために集約）
   2026-10-04 デザイン第2弾で作り直し：
     A「明るい」（白・淡いグレー・赤。旧 D の色）が標準。黒は文字だけで、黒い帯は使わない
     B「締まる」（白・墨・朱。旧 A の色）は末尾の body.tm-pal-b で上書きし、ヘッダー・3つの安心・対応エリア・フッターを墨の帯にする
   theme.json の色（--wp--preset--color--*）も A の値にそろえてある。
   ========================================================= */
:root{
  --tm-ai:        #1F2328;  /* 墨（旧：藍） */
  --tm-ai-deep:   #15181C;
  --tm-ai-rgb:    31,35,40;
  --tm-ai-deep-rgb: 21,24,28;
  --tm-shu:       #C8372D;  /* 赤（印・ボタン） */
  --tm-shu-deep:  #A42B23;
  --tm-shu-rgb:   200,55,45;
  --tm-shu-pale:  #F0CFCB;
  --tm-shu-wash:  #FCF4F3;
  --tm-washi:     #FFFFFF;  /* 地の色（旧：和紙） */
  --tm-tint-1:    #FAFBFC;
  --tm-tint-2:    #F4F5F7;
  --tm-tint-3:    #E8EBEE;
  --tm-kin:       #9AA3AD;  /* 細線の色（旧：金） */
  --tm-kin-rgb:   154,163,173;
  --tm-line2:     #C9CED5;  /* 押せる枠の線（淡い罫線より一段濃い）2026-10-04 */
}

/* =========================================================
   0. たたき台バナー（CLAUDE.md 絶対ルール2：完成品に見せない）
   ========================================================= */
.tm-draft-banner{
  position: sticky; top: 0; z-index: 999;
  background: #B4453C;
  color: #fff;
  font-family: var(--wp--preset--font-family--sans);
  font-size: .8125rem; line-height: 1.5;
  letter-spacing: .04em;
  text-align: center;
  padding: .5rem 1rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.tm-draft-banner__controls{
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  vertical-align: middle;
}

/* 打ち合わせ用の切り替えスイッチ（トップ案／デザイン） */
.tm-switcher{
  display: inline-flex;
  align-items: center;
  gap: .3em;
  background: rgba(0,0,0,.16);
  border-radius: 999px;
  padding: .15em .3em;
  white-space: nowrap;
}
.tm-switcher__label{
  font-size: .9em;
  opacity: .8;
  padding-left: .5em;
}
.tm-switcher__opt{
  display: inline-block;
  padding: .15em .75em .2em;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  line-height: 1.5;
  transition: background-color .15s ease, color .15s ease;
}
.tm-switcher__opt:hover{ background: rgba(255,255,255,.22); color: #fff; }
.tm-switcher__opt.is-current{
  background: #fff;
  color: #B4453C;
  font-weight: 700;
}
.tm-switcher__opt.is-current:hover{ background: #fff; color: #B4453C; }

@media (max-width: 782px){
  .tm-draft-banner{ font-size: .75rem; padding: .45rem .75rem; }
  .tm-draft-banner__text{ display: block; margin-bottom: .4rem; }
  .tm-draft-banner__controls{ gap: .4rem; }
}

/* =========================================================
   1. 下地
   ========================================================= */
body{ -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6{ text-align: left; }
.has-text-align-center{ text-align: center; }

/* 見出しは明朝。店の質感を出しつつ、外部フォントは使わない */
h1,h2,h3{
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 600;
  letter-spacing: .02em;
}

/* h2 は藍の罫で区切る（装飾ではなく構造） */
.tm-content h2{
  margin-top: 3.5rem;
  padding-left: .8rem;
  border-left: 4px solid var(--wp--preset--color--primary);
}
.tm-content h2.has-text-align-center{
  border-left: 0; padding-left: 0;
  margin-top: 4rem; padding-bottom: .8rem;
  position: relative;
}
.tm-content h2.has-text-align-center::after{
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 2.5rem; height: 2px; margin-left: -1.25rem;
  background: var(--wp--preset--color--accent);
}
.tm-content h3{
  margin-top: 2.25rem;
  color: var(--wp--preset--color--primary);
}

/* =========================================================
   2. ヒーロー（cover）── 全幅・背景画像つき
   ========================================================= */
.wp-block-cover h1{
  font-size: clamp(1.55rem, 1.1rem + 2.2vw, 2.6rem);
  line-height: 1.45;
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 600;
}
.wp-block-cover p{ text-align: center; }
.wp-block-cover .has-x-large-font-size{
  font-size: clamp(1.1rem, .9rem + 1vw, 1.4rem);
  font-weight: 600;
  letter-spacing: .03em;
}

/* トップのヒーローはヘッダー直下に密着させる */
.tm-hero{ margin-top: 0 !important; }
.tm-content > .tm-hero:first-child{ margin-block-start: 0; }

/* ヒーローの文字は左右に余白を取る。端に寄ると読みにくく、
   作りこみ版では金の枠に文字が当たってしまう */
.tm-hero > .wp-block-cover__inner-container{
  padding-left: var(--wp--preset--spacing--30);
  padding-right: var(--wp--preset--spacing--30);
}

/* 下層ページのヒーローはトップより控えめに */
.tm-hero--page h1{ font-size: clamp(1.45rem, 1.15rem + 1.5vw, 2.15rem); }

/* 小見出し（ヒーロー上部のラベル） */
.tm-hero__eyebrow{
  font-family: var(--wp--preset--font-family--sans);
  font-size: .8125rem !important;
  letter-spacing: .18em;
  opacity: .85;
  margin-bottom: .4rem !important;
}

/* ヒーロー内の「差し替えます」注記は控えめに */
.tm-hero__note{
  font-family: var(--wp--preset--font-family--sans);
  font-size: .75rem !important;
  opacity: .6;
  margin-top: 1.5rem !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   2-b. セクション帯（全幅の色面で区切る）
   ========================================================= */
.tm-section{ margin-top: 0 !important; margin-bottom: 0 !important; }

/* 帯どうしが隣り合うときは 0 のまま（色面を途切れさせたくない）。
   ただし通常のコンテンツと隣り合うときは余白を空ける。
   これが無いと、カードの下端が帯の上端にぴたりと貼りついてしまう。 */
.entry-content > *:not(.tm-section):not(.tm-hero) + .tm-section{
  margin-top: var(--wp--preset--spacing--50) !important;
}
/* 帯のあとに本文が続く場合も同じだけ空ける（見出しは自前の余白があるので触らない） */
.entry-content > .tm-section + *:not(.tm-section):not(.wp-block-heading){
  margin-top: var(--wp--preset--spacing--50);
}
.tm-section--tint{ background: var(--wp--preset--color--surface); }
.tm-section--hanko{
  background: var(--tm-shu-wash);
  border-top: 1px solid var(--tm-shu-pale);
  border-bottom: 1px solid var(--tm-shu-pale);
}
.tm-section--dark{
  background: var(--wp--preset--color--primary);
  color: #fff;
}
.tm-section--dark h2,
.tm-section--dark h3{ color: #fff; }
.tm-section--dark h2.has-text-align-center::after{ background: #fff; opacity: .6; }
.tm-section--dark a{ color: #fff; text-decoration: underline; }
.tm-section--dark ul.wp-block-list li::before{ background: #fff; opacity: .7; }
.tm-section--dark .wp-block-table th,
.tm-section--dark .wp-block-table td{ border-color: rgba(255,255,255,.25); }

/* セクション内の最初の見出しは上余白を詰める */
.tm-section > .wp-block-heading:first-child,
.tm-section h2:first-child{ margin-top: 0 !important; }

/* =========================================================
   2-c. カード / パネル
   ========================================================= */
.tm-card{
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 4px;
  padding: 1.5rem 1.4rem;
  box-shadow: 0 1px 2px rgba(26,34,51,.04);
}
.tm-card > *:first-child{ margin-top: 0 !important; }
.tm-card > *:last-child{ margin-bottom: 0; }
.tm-card h3{
  margin-top: 0 !important;
  font-size: 1.0625rem;
  border-left: 0;
  padding-left: 0;
}
.tm-card p{ font-size: .9375rem; line-height: 1.85; }

/* 通し番号（3つの安心） */
.tm-card__num{
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.75rem !important;
  line-height: 1;
  color: var(--wp--preset--color--accent);
  opacity: .45;
  margin-bottom: .5rem !important;
  letter-spacing: .05em;
}

/* 上辺に藍のラインを引いて「箱」であることを示す */
.tm-card--link,
.tm-card--urgent{ border-top: 3px solid var(--wp--preset--color--primary); }
.tm-card--urgent{ border-top-color: var(--wp--preset--color--accent); }

/* 罫線だけの軽いパネル（箇条書きの受け皿） */
.tm-panel{
  background: var(--wp--preset--color--surface);
  border-left: 3px solid var(--wp--preset--color--border);
  border-radius: 3px;
  padding: 1.25rem 1.4rem;
}
.tm-panel > *:first-child{ margin-top: 0 !important; }
.tm-panel > *:last-child{ margin-bottom: 0; }

/* 強調したいリード文 */
.tm-lead{
  font-size: 1.0625rem;
  line-height: 1.95;
}
.tm-section--tint .tm-lead{ margin-bottom: 0; }

/* 電話番号（お問い合わせ） */
.tm-tel{
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem) !important;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
  letter-spacing: .06em;
  margin-bottom: .5rem !important;
}

/* =========================================================
   2-d. 本制作の構成メモ（スタブページ用）
   ========================================================= */
.tm-draft-plan{
  background: #EEF3F8;
  border: 1px solid #C9D8E6;
  border-left: 4px solid var(--wp--preset--color--primary);
  border-radius: 3px;
  color: #24425F;
  font-family: var(--wp--preset--font-family--sans);
  font-size: .8125rem !important;
  line-height: 1.85;
  padding: .9rem 1.2rem;
}

/* =========================================================
   3. ボタン
   ========================================================= */
.wp-block-button__link{
  border-radius: 3px;
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 700; letter-spacing: .04em;
  padding: .9rem 1.9rem;
  transition: background-color .15s ease, color .15s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background: var(--wp--preset--color--accent);
  color: #fff;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{ background: var(--tm-shu-deep); }
.wp-block-button.is-style-outline .wp-block-button__link{
  border: 2px solid currentColor;
  background: transparent;
}
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link{ color: #fff; }
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background: #fff; color: var(--wp--preset--color--contrast); border-color: #fff;
}

/* =========================================================
   4. リスト・引用
   ========================================================= */
.tm-content ul.wp-block-list{ list-style: none; padding-left: 0; }
.tm-content ul.wp-block-list li{
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .7rem;
  line-height: 1.85;
}
.tm-content ul.wp-block-list li::before{
  content: ""; position: absolute; left: .25rem; top: .72em;
  width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--wp--preset--color--accent);
}
.wp-block-quote{
  border-left: 4px solid var(--wp--preset--color--primary);
  background: var(--wp--preset--color--surface);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-size: .95em;
}
.wp-block-quote p:last-child{ margin-bottom: 0; }

/* =========================================================
   5. 表（料金表・店舗情報）
   ========================================================= */
.wp-block-table{ margin: 1.75rem 0; overflow-x: auto; }
.wp-block-table table{
  border-collapse: collapse;
  width: 100%;
  font-size: .95rem;
  line-height: 1.7;
}
.wp-block-table th,
.wp-block-table td{
  border: 1px solid var(--wp--preset--color--border);
  padding: .8rem 1rem;
  text-align: left;
  vertical-align: top;
}
.wp-block-table thead th{
  background: var(--wp--preset--color--primary);
  color: #fff;
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 700;
  letter-spacing: .03em;
  border-color: var(--wp--preset--color--primary);
}
/* thead の無い定義型テーブル（店舗情報）は1列目を見出し扱いにする */
.tm-deflist table td:first-child{
  background: var(--wp--preset--color--surface);
  font-weight: 700;
  white-space: nowrap;
  width: 8.5em;
}
/* 料金表：金額の列は「900円 〜」が途中で折り返さないようにする */
.tm-pricetable table td:not(:first-child){
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 600px){
  .wp-block-table th,
  .wp-block-table td{ padding: .6rem .7rem; font-size: .875rem; }
  .tm-deflist table td:first-child{ width: 6.5em; white-space: normal; }
}

/* =========================================================
   6. 差し替え前提の注記（CLAUDE.md 絶対ルール5）
   ========================================================= */
.placeholder-note{
  background: #FBF6EC;
  border: 1px dashed #C9AE8C;
  color: #7A5B3A;
  font-family: var(--wp--preset--font-family--sans);
  font-size: .8125rem;
  line-height: 1.75;
  padding: .7rem 1rem;
  border-radius: 3px;
}

/* 画像プレースホルダ：差し替え前提であることが一目で分かる見た目に */
.tm-placeholder{ margin-top: 1.75rem; margin-bottom: 1.75rem; }
.tm-placeholder img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 2px dashed #C9AE8C;
  background: #FBF6EC;
  padding: 4px;
}
.tm-placeholder figcaption{
  margin-top: .5rem;
  background: #FBF6EC;
  border: 1px dashed #C9AE8C;
  border-radius: 3px;
  color: #7A5B3A;
  font-family: var(--wp--preset--font-family--sans);
  font-size: .75rem;
  line-height: 1.7;
  padding: .45rem .8rem;
  text-align: left;
}

/* =========================================================
   6-b. よくある質問（core/details のアコーディオン）
   ========================================================= */
.tm-faq{
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 4px;
  background: var(--wp--preset--color--base);
  margin-bottom: .75rem;
  overflow: hidden;
}
.tm-faq summary{
  cursor: pointer;
  list-style: none;
  padding: 1rem 3rem 1rem 1.2rem;
  position: relative;
  font-weight: 700;
  font-size: .9375rem;
  background: var(--wp--preset--color--surface);
  transition: background-color .15s ease;
}
.tm-faq summary::-webkit-details-marker{ display: none; }
.tm-faq summary:hover{ background: var(--tm-tint-3); }
.tm-faq summary::before{
  content: "Q";
  font-family: var(--wp--preset--font-family--serif);
  color: var(--wp--preset--color--accent);
  font-weight: 700;
  margin-right: .6em;
}
.tm-faq summary::after{
  content: ""; position: absolute; right: 1.2rem; top: 50%;
  width: .5rem; height: .5rem; margin-top: -.35rem;
  border-right: 2px solid var(--wp--preset--color--primary);
  border-bottom: 2px solid var(--wp--preset--color--primary);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.tm-faq[open] summary::after{ transform: rotate(-135deg); margin-top: -.15rem; }
.tm-faq > p{
  padding: 1.1rem 1.2rem;
  margin: 0;
  font-size: .9375rem;
}

/* =========================================================
   7. カラム
   ========================================================= */
@media (min-width: 782px){
  .wp-block-columns{ gap: 2.5rem; }
}
.wp-block-column > h3:first-child{ margin-top: 0; }

/* =========================================================
   8. ヘッダー / フッター
   ========================================================= */
.tm-header{ border-bottom: 1px solid var(--wp--preset--color--border); }
.tm-header .wp-block-site-title a{
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 600;
  text-decoration: none;
  color: var(--wp--preset--color--primary);
  letter-spacing: .02em;
}
.tm-header .wp-block-site-tagline{
  font-size: .75rem;
  color: var(--wp--preset--color--muted);
  margin-top: .15rem;
  letter-spacing: .02em;
}
.wp-block-navigation{
  font-family: var(--wp--preset--font-family--sans);
  font-size: .9rem;
  font-weight: 500;
}
.wp-block-navigation a{ text-decoration: none; }
.wp-block-navigation a:hover{ color: var(--wp--preset--color--accent); }

.tm-footer{
  background: var(--wp--preset--color--surface);
  border-top: 3px solid var(--wp--preset--color--primary);
  margin-top: 0;
  font-size: .875rem;
}
/* テンプレートパーツ同士の既定の隙間（block-gap）を打ち消す。
   これが残っていると、末尾が帯のページでフッターとの間に線が浮く。 */
main.tm-content + .wp-block-template-part{ margin-block-start: 0 !important; }

/* フッター手前の余白は、本文の最後のブロックに持たせる。
   最後がセクション帯のときは色面をフッターまで続けたいので、余白を付けない。
   （main 側に padding-bottom を持たせると、この出し分けができない） */
.entry-content > *:last-child:not(.tm-section){
  margin-bottom: var(--wp--preset--spacing--60);
}
.tm-footer h2{
  font-size: 1rem;
  border-left: 0;
  padding-left: 0;
  margin-top: 0;
}
.tm-footer .wp-block-navigation{ font-size: .8125rem; }
.tm-footer a{ color: var(--wp--preset--color--primary); }
.tm-copyright{
  color: var(--wp--preset--color--muted);
  font-size: .75rem;
  text-align: center;
}

/* =========================================================
   8-b. キーボード操作の位置表示
   マウスを使わない方・拡大して見る方のために、
   いま操作している場所を必ず目に見える形で示す。
   ブラウザ既定の細い枠は、この配色だと沈んで見えないため上書きする。
   ========================================================= */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible{
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
/* 藍ベタの帯・ヒーロー・たたき台バナーの上では、朱が沈むので白にする */
.tm-section--dark :focus-visible,
.wp-block-cover :focus-visible,
.tm-draft-banner :focus-visible{
  outline-color: #fff;
}
/* よくある質問の見出しは、枠が箱の内側で切れないよう内寄せにする */
.tm-faq summary:focus-visible{ outline-offset: -3px; }

/* =========================================================
   9. ページ見出し
   ========================================================= */
.tm-page-header{
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.tm-page-header .wp-block-post-title{
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  margin: 0;
  text-align: center;
  color: var(--wp--preset--color--primary);
}


/* =========================================================
   配色 B「締まる」（白・墨・朱）── 2026-10-04 旧 A を基に、墨の帯で締める
   墨の帯の指定（ヘッダー・3つの安心・対応エリア・フッター）は design-rin.css の 13.
   ========================================================= */
body.tm-pal-b{
  --wp--preset--color--contrast: #232325;
  --wp--preset--color--primary:  #232325;
  --wp--preset--color--accent:   #B8372B;
  --wp--preset--color--surface:  #EFEDE9;
  --wp--preset--color--border:   #DEDBD5;
  --wp--preset--color--muted:    #55565A;
  --tm-ai:        #232325;
  --tm-ai-deep:   #19191B;
  --tm-ai-rgb:    35,35,37;
  --tm-ai-deep-rgb: 25,25,27;
  --tm-shu:       #B8372B;
  --tm-shu-deep:  #962C22;
  --tm-shu-rgb:   184,55,43;
  --tm-shu-pale:  #EBCBC7;
  --tm-shu-wash:  #FBF3F2;
  --tm-washi:     #FFFFFF;
  --tm-tint-1:    #FAF9F7;
  --tm-tint-2:    #EFEDE9;
  --tm-tint-3:    #E6E3DE;
  --tm-kin:       #B9B3AA;
  --tm-kin-rgb:   185,179,170;
  --tm-line2:     #B9B5AE;
}
/* ここから下の「body:not(.tm-pal-b)」は配色 A（明るい）だけに効く指定（旧 D の指定をそのまま A に移した） */
/* ヒーロー：暗い覆いをやめ、明るい覆いに黒い文字 */
body:not(.tm-pal-b) .tm-hero .wp-block-cover__background{
  background-color: #F4F5F7 !important;
  opacity: .74 !important;
}
body:not(.tm-pal-b) .tm-hero::after{ background: none; }
body:not(.tm-pal-b) .tm-hero .wp-block-cover__inner-container,
body:not(.tm-pal-b) .tm-hero h1,
body:not(.tm-pal-b) .tm-hero p{ color: #1F2328 !important; text-shadow: none; }
body:not(.tm-pal-b) .tm-hero__eyebrow::before,
body:not(.tm-pal-b) .tm-hero__eyebrow::after{ background: rgba(31,35,40,.35); }
body:not(.tm-pal-b) .tm-hero .is-style-outline .wp-block-button__link{ color: #1F2328; border-color: rgba(31,35,40,.45); }
/* 黒い帯 → 淡いグレーの帯 */
body:not(.tm-pal-b) .tm-section--dark{
  background: var(--tm-tint-2) !important;
  color: var(--tm-ai);
}
body:not(.tm-pal-b) .tm-section--dark h2,
body:not(.tm-pal-b) .tm-section--dark h3,
body:not(.tm-pal-b) .tm-section--dark a{ color: var(--tm-ai); }
body:not(.tm-pal-b) .tm-section--dark h2.has-text-align-center::after,
body:not(.tm-pal-b) .tm-section--dark ul.wp-block-list li::before{ background: var(--tm-shu); opacity: 1; }
body:not(.tm-pal-b) .tm-section--dark::before{
  --tm-key-c:  rgba(31,35,40,.45);
  --tm-rule-c: rgba(31,35,40,.16);
}
body:not(.tm-pal-b) .tm-section--dark .wp-block-table th,
body:not(.tm-pal-b) .tm-section--dark .wp-block-table td{ border-color: rgba(31,35,40,.15); }
body:not(.tm-pal-b) .tm-section--dark .is-style-outline .wp-block-button__link{ color: var(--tm-ai); border-color: rgba(31,35,40,.45); }

/* =========================================================
   配色の切り替えボタン（打ち合わせ用。本番公開前に外す）
   ========================================================= */
.tm-palswitch{
  position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 9999;
  display: flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: 999px;
  padding: 4px 4px 4px 12px; box-shadow: 0 4px 16px rgba(0,0,0,.14);
  font-family: var(--wp--preset--font-family--sans); font-size: 12px; color: #444;
}
.tm-palswitch a{
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  color: #444; text-decoration: none; font-weight: 700;
}
.tm-palswitch a:hover{ background: #F1F1F1; }
.tm-palswitch a.is-current{ background: #2F2F31; color: #fff; }
.tm-palswitch a:focus-visible{ outline: 2px solid #B8372B; outline-offset: 2px; }

/* 撮影した写真（仮置き含む）。プレースホルダの破線枠は付けない */
.tm-photo img{ border-radius: 4px; display: block; }
.tm-photo figcaption{ font-size: .75rem; color: var(--wp--preset--color--muted); margin-top: .4rem; text-align: left; }

/* =========================================================
   2026-09-27 磨き込み（配色 A／D 共通）
   ========================================================= */

/* ヘッダー右上の電話番号。鍵屋は電話が入口なので全ページに出す */
.tm-header__top{ gap: 1rem; }
.tm-header__nav{ margin-top: .75rem; }
.tm-header-tel{ margin: 0; text-align: right; line-height: 1.3; flex-shrink: 0; }
.tm-header-tel a{ display: block; color: inherit; text-decoration: none; }
.tm-header-tel__label{ display: block; font-size: .72rem; color: var(--wp--preset--color--muted); letter-spacing: .06em; }
.tm-header-tel strong{
  display: block; font-size: 1.55rem; color: var(--tm-shu);
  letter-spacing: .03em; font-variant-numeric: tabular-nums;
}
.tm-header-tel a:hover strong{ text-decoration: underline; }
.tm-header-tel__hours{ display: block; font-size: .72rem; color: var(--wp--preset--color--muted); }
@media (max-width: 600px){
  .tm-header-tel__label, .tm-header-tel__hours{ display: none; }
  .tm-header-tel strong{ font-size: 1.05rem; }
  .tm-header .wp-block-site-tagline{ display: none; }
}

/* 横長の写真は高さを抑える（縦に大きすぎてページを占領しないように） */
.tm-photo.alignwide img{ width: 100%; aspect-ratio: 16 / 7; object-fit: cover; height: auto; }

/* ご依頼の流れ：番号付きの5ステップ */
.tm-content ol.tm-flow{
  list-style: none; counter-reset: flow; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem;
  max-width: var(--wp--style--global--content-size); margin: 1.75rem auto 1.25rem;
}
.tm-content ol.tm-flow li{
  counter-increment: flow; position: relative; margin: 0;
  background: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: 6px;
  padding: 2.75rem .9rem 1rem; font-size: .85rem; line-height: 1.65; color: var(--wp--preset--color--muted);
}
.tm-content ol.tm-flow li::before{
  content: counter(flow); position: absolute; top: .85rem; left: .9rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tm-shu); color: #fff; font-weight: 700; font-size: .8rem;
}
.tm-content ol.tm-flow li strong{ display: block; color: var(--wp--preset--color--contrast); font-size: .95rem; margin-bottom: .25rem; }
@media (max-width: 781px){
  .tm-content ol.tm-flow{ grid-template-columns: 1fr; }
  .tm-content ol.tm-flow li{ padding: .9rem 1rem .9rem 3.2rem; }
  .tm-content ol.tm-flow li::before{ top: .95rem; }
}

/* 配色 A：ヒーローは文字のまわりだけ明るくして、写真を周りに見せる */
body:not(.tm-pal-b) .tm-hero .wp-block-cover__background{ opacity: .6 !important; }
body:not(.tm-pal-b) .tm-hero::after{
  background: radial-gradient(ellipse 58% 68% at 50% 50%, rgba(244,245,247,.82) 0%, rgba(244,245,247,.35) 70%, rgba(244,245,247,0) 100%);
}
/* 配色 A：フッターは白地にして、直前のグレーの帯と分ける */
body:not(.tm-pal-b) .tm-footer{ background: #fff; border-top: 1px solid var(--wp--preset--color--border); }

/* 本文の途中にある横並びカードは、見出し・本文と同じ幅にそろえる。
   左寄せの見出し（本文幅 720px）の下にカードだけ広い幅（1120px）で並ぶと、
   左端がずれてガタガタに見えるため（2026-09-27）。
   中央寄せの見出しで始まる色帯（.tm-section）の中は広いままでよい。 */
/* 2026-09-27 更新：幅は2種類だけに統一する。
   ① 文字・カード・表・写真 … 本文幅（theme.json の contentSize = 880px）
   ② ヒーローと色帯の背景 … 画面いっぱい（alignfull）
   以前はカードだけ 1120px に広がる箇所があり、上下で幅が変わってガタガタに見えていた。 */
.tm-content .alignwide{
  max-width: var(--wp--style--global--content-size) !important;
}
.tm-content .wp-block-columns.alignwide{ gap: 1rem !important; }

/* Googleマップの埋め込み：横幅いっぱい・高さは比率で */
.tm-map{ position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; border: 1px solid var(--wp--preset--color--border); }
.tm-map iframe{ position: absolute; inset: 0; width: 100%; height: 100%; }
.tm-map-note{ font-size: .8rem; color: var(--wp--preset--color--muted); margin-top: .5rem !important; }

/* スマホで開くメニュー：左右に余白を取り、1項目ずつ区切って押しやすく */
.wp-block-navigation__responsive-container.is-menu-open{
  padding: 1rem 20px 2rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  padding-top: 3rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  gap: 0 !important; width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  width: 100%; border-bottom: 1px solid var(--wp--preset--color--border);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display: block; padding: .95rem .25rem !important; font-size: 1rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open a::after{ display: none; }

/* ヘッダー右上：電話番号＋お問い合わせボタン（メニューからは外した。2026-09-27） */
.tm-header__cta{ gap: 1rem; flex-shrink: 0; }
.tm-header-form{ margin: 0; }
.tm-header-form a{
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 3rem; padding: .35rem 1.1rem; border-radius: 4px;
  background: var(--tm-shu); color: #fff; text-decoration: none;
  font-weight: 700; font-size: .9rem; line-height: 1.25; letter-spacing: .04em;
}
.tm-header-form a:hover{ background: var(--tm-shu-deep); }
.tm-header-form a:focus-visible{ outline: 2px solid var(--tm-shu); outline-offset: 2px; }
.tm-header-form__sub{ font-size: .68rem; font-weight: 500; opacity: .9; }
@media (max-width: 600px){
  .tm-header__cta{ gap: .5rem; }
  .tm-header-form a{ min-height: 2.4rem; padding: .3rem .7rem; font-size: .78rem; }
  .tm-header-form__sub{ display: none; }
}

/* スマホのヘッダー：1段目＝店名とメニューボタン、2段目＝電話とお問い合わせを半分ずつ。
   3つを1段に詰めると店名が3行に折れてしまうため（2026-09-27） */
@media (max-width: 600px){
  .tm-header{
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title nav" "cta cta";
    align-items: center;
    row-gap: .6rem;
  }
  .tm-header__top{ display: contents !important; }
  .tm-header__top > .wp-block-group:first-child{ grid-area: title; margin: 0 !important; }
  .tm-header .wp-block-site-title{ white-space: nowrap; font-size: 1.05rem; }
  .tm-header__nav{ grid-area: nav; margin: 0 !important; }
  .tm-header__cta{ grid-area: cta; display: grid !important; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0 !important; }
  .tm-header-tel{ text-align: center; }
  .tm-header-tel a{
    display: flex; align-items: center; justify-content: center; min-height: 2.6rem;
    border: 1px solid var(--tm-shu); border-radius: 4px;
  }
  .tm-header-tel strong{ font-size: 1rem; }
  .tm-header-form a{ display: flex; width: 100%; min-height: 2.6rem; font-size: .85rem; }
}

/* 見出しの最後の1文字だけが次の行に落ちないように */
.tm-hero h1, .tm-hero p{ text-wrap: balance; }
/* 地図の隣に並ぶ写真は、地図と同じ 3:2 にそろえる */
.tm-section .wp-block-columns .tm-photo img{ width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }