/* ============================================================
   T&Mロックセンター ── デザイン「作りこみ版」
   style.css（シンプル版）の上に重ねる差分。

   モチーフ
     藍  … 鍵・防犯・信頼
     朱  … はんこ・印章
     鍵歯 … セクションの区切り
     角印 … 見出しの目印
     鍵穴 … カードの目印

   方針
     - 画像・Webフォントは一切使わない（純CSSのみ／会場の電波が弱い前提）
     - 装飾で可読性を落とさない（高齢のお客様も読む前提で、文字は小さくしない）
     - 「差し替え前提」のプレースホルダ表示には手を入れない
   ============================================================ */

/* 色の変数（--tm-*）は style.css の先頭で定義している（配色 A／D の切り替えのため） */

/* ============================================================
   1. 和紙テクスチャ
   紙の目を、ごく薄い縞の重ね合わせで作る
   ============================================================ */
body{
  background-color: var(--tm-washi);
  background-image:
    repeating-linear-gradient(90deg, rgba(var(--tm-ai-rgb),.014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(var(--tm-ai-rgb),.014) 0 1px, transparent 1px 4px);
}

/* 本文まわりは白場を残して読みやすく */
.tm-content > .entry-content{ background: transparent; }

/* ============================================================
   2. ヒーロー
   ふちに金の細線、四隅に「隅金具」を置いて、店構えの質感を出す
   ============================================================ */
.tm-hero{ position: relative; }

/* 内側の金の細枠。

   ヒーロー本体に張る。以前は中身の箱（inner-container）に張っていたが、
   あの箱は中身にぴったりの高さしか無いので、内側に枠を引くと
   上下の線が必ず文字を横切ってしまっていた（実測で 11〜19px の食い込み）。
   ヒーローには上下に大きな余白があるので、こちらなら文字に当たらない。 */
.tm-hero::before{
  content: "";
  position: absolute;
  inset: clamp(.9rem, 2.5vw, 1.75rem);
  border: 1px solid rgba(var(--tm-kin-rgb),.45);
  pointer-events: none;
  z-index: 2;
}

/* 枠に文字が近づきすぎないよう、作りこみ版では左右をさらに広く取る */
.tm-hero > .wp-block-cover__inner-container{
  padding-left: clamp(1.75rem, 6vw, 3.5rem);
  padding-right: clamp(1.75rem, 6vw, 3.5rem);
}

/* 上下のビネットで文字を浮かせる */
.tm-hero::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--tm-ai-deep-rgb),.35) 0%, transparent 28%, transparent 72%, rgba(var(--tm-ai-deep-rgb),.45) 100%);
}
.tm-hero > .wp-block-cover__inner-container{ position: relative; z-index: 2; }

.tm-hero__eyebrow{
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 2.6em;
}
/* ラベルの左右に細い罫 */
.tm-hero__eyebrow::before,
.tm-hero__eyebrow::after{
  content: "";
  position: absolute; top: 50%;
  width: 2em; height: 1px;
  background: rgba(255,255,255,.55);
}
.tm-hero__eyebrow::before{ left: 0; }
.tm-hero__eyebrow::after{ right: 0; }

.tm-hero h1{
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  letter-spacing: .04em;
}

/* ============================================================
   3. 見出し
   h2 の頭に「角印」、中央寄せ見出しの上には落款風の朱印
   ============================================================ */

/* --- 角印マーク（左寄せ h2） --- */
.tm-content h2:not(.has-text-align-center){
  border-left: 0;
  padding-left: 0;
  display: flex;
  align-items: baseline;
  gap: .6em;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(var(--tm-ai-rgb),.14);
}
.tm-content h2:not(.has-text-align-center)::before{
  content: "";
  flex: none;
  width: .78em; height: .78em;
  border: 2px solid var(--tm-shu);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), inset 0 0 0 3px var(--tm-shu);
  opacity: .85;
  transform: translateY(-.02em) rotate(-2deg);
}

/* --- 中央寄せ見出しの印 ---
   輪郭だけの印は「はんこ」と読み取ってもらえなかった。
   輪の形をどう工夫しても、文字が入っていないものは印章に見えない。

   そこで、印はやめない代わりに**押す場所を絞った**。
   はんこの話をしているセクションでだけ、文字入りの朱印を押す。
   それ以外の見出しは、素直な朱の短い罫にする（シンプル版と同じ）。
   藍＝鍵／朱＝はんこ、という約束を薄めないための判断。 */

/* はんこのセクションの中央寄せ見出しにだけ、文字入りの丸印を押す */
/* style.css の「セクション最初の見出しは上余白 0」より詳しい指定にして、
   印を押すぶんの余白を確保する（:first-child まで書かないと負ける） */
.tm-section--hanko h2.has-text-align-center,
.tm-section--hanko h2.has-text-align-center:first-child{
  margin-top: 3rem !important;
  padding-bottom: 0;
}
.tm-section--hanko h2.has-text-align-center::after{
  content: "印";
  content: "印" / "";
  position: absolute; left: 50%; bottom: auto; top: -3rem;
  width: 2.1rem; height: 2.1rem; margin-left: -1.05rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--tm-shu);
  color: #fff;
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85);
  opacity: .92;
  transform: rotate(-4deg);
}

/* ============================================================
   4-b. ヘッダーのメニュー
   6項目の日本語ラベルは横に並べると長く、601〜900px では
   3行に折り返してヘッダーが 205px（本来 108px）まで膨らむ。
   横幅を縮めたときに縦スクロールが増える原因になっていた。
   一行に収まらない幅では、まとめボタン（ハンバーガー）のままにする。
   ============================================================ */
@media (min-width: 600px) and (max-width: 899.98px){
  .tm-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){
    display: none;
  }
  .tm-header .wp-block-navigation__responsive-container-open:not(.always-shown){
    display: flex;
  }
}

/* h3 は藍の細い縦罫 */
.tm-content h3{
  padding-left: .55em;
  border-left: 3px solid var(--tm-shu-pale);
}
.tm-card h3{
  border-left: 0;
  padding-left: 0;
}

/* ============================================================
   4. セクション区切り ── 鍵
   細い罫を渡し、その上に鍵を一本だけ置く
   ============================================================ */
.tm-section{ position: relative; }
.tm-section--tint,
.tm-section--hanko,
.tm-section--dark{ border-top: 0; }

/* 細い罫を一本渡し、その左に「鍵そのもの」を一本だけ置く。
   歯を端から端まで繰り返すと、鍵ではなく縞模様に見えてしまう。
   頭（輪）・軸・刻み を有限の形で描いて、はじめて鍵だと分かる。

   座標（左端 = --tm-key-x を原点、単位 px）
     頭    x  0〜14   y  1〜15   輪（外径14・内径6）
     軸    x 13〜96   y6.5〜9.5
     刻み  x 62〜96   y9.5〜16.5  深い歯と浅い歯を互い違いに
     罫    鍵の左右に、鍵をよけて渡す */
.tm-section--tint::before,
.tm-section--hanko::before,
.tm-section--dark::before,
.tm-footer::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 20px;
  pointer-events: none;

  --tm-key-x:  clamp(1.25rem, 6vw, 4.5rem);
  --tm-key-c:  rgba(var(--tm-ai-rgb),.62);
  --tm-rule-c: rgba(var(--tm-ai-rgb),.20);

  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle at 7px 8px, transparent 0 3px, var(--tm-key-c) 3.5px 7px, transparent 7.5px),
    linear-gradient(var(--tm-key-c), var(--tm-key-c)),
    repeating-linear-gradient(90deg, var(--tm-key-c) 0 4px, transparent 4px 12px),
    repeating-linear-gradient(90deg, transparent 0 6px, var(--tm-key-c) 6px 9px, transparent 9px 12px),
    linear-gradient(var(--tm-rule-c), var(--tm-rule-c)),
    linear-gradient(var(--tm-rule-c), var(--tm-rule-c));
  background-size:
    14px 20px,
    83px 3px,
    34px 7px,
    34px 4px,
    calc(var(--tm-key-x) - 8px) 1px,
    calc(100% - var(--tm-key-x) - 104px) 1px;
  background-position:
    var(--tm-key-x) 0,
    calc(var(--tm-key-x) + 13px) 6.5px,
    calc(var(--tm-key-x) + 62px) 9.5px,
    calc(var(--tm-key-x) + 62px) 9.5px,
    0 7.5px,
    100% 7.5px;
}

/* 藍ベタの帯の上では金にする */
.tm-section--dark::before{
  --tm-key-c:  rgba(var(--tm-kin-rgb),.9);
  --tm-rule-c: rgba(var(--tm-kin-rgb),.35);
}

/* 藍ベタのセクションは、奥行きのあるグラデーションに */
.tm-section--dark{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.08) 0%, transparent 60%),
    linear-gradient(160deg, var(--tm-ai) 0%, var(--tm-ai-deep) 100%);
}
.tm-section--dark h2.has-text-align-center::after{
  background: var(--tm-kin);
  opacity: .9;
}

/* はんこのセクションは、朱をほんのり効かせた紙面に */
.tm-section--hanko{
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(var(--tm-shu-rgb),.05) 0%, transparent 70%),
    var(--tm-shu-wash);
}

/* 明るい帯は、上端が鍵・下端がただの線だと不ぞろいに見える。
   下端は上端に渡した罫と同じ濃さの細線でそろえる。藍ベタは面で終わらせる。 */
.tm-section--tint,
.tm-section--hanko{ border-bottom: 1px solid rgba(var(--tm-ai-rgb),.12); }
.tm-section--dark{ border-bottom: 0; }

/* ============================================================
   5. カード ── 鍵穴の目印と、隅の飾り罫
   ============================================================ */
.tm-card{
  position: relative;
  border-color: rgba(var(--tm-ai-rgb),.16);
  background:
    linear-gradient(180deg, #fff 0%, var(--tm-tint-1) 100%);
  box-shadow: 0 1px 3px rgba(var(--tm-ai-deep-rgb),.06), 0 8px 24px -18px rgba(var(--tm-ai-deep-rgb),.5);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tm-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(var(--tm-ai-deep-rgb),.08), 0 16px 34px -20px rgba(var(--tm-ai-deep-rgb),.55);
  border-color: rgba(var(--tm-ai-rgb),.3);
}

/* 右上の隅飾り */
.tm-card::after{
  content: "";
  position: absolute; top: 0; right: 0;
  width: 22px; height: 22px;
  border-top: 2px solid var(--tm-shu-pale);
  border-right: 2px solid var(--tm-shu-pale);
  border-top-right-radius: 4px;
  pointer-events: none;
}

/* 鍵穴は、一部のカードに付く小さな印ではなく、すべてのカードの背景に敷く透かしにする。
   印として置くと「なぜこのカードにだけ付いているのか」が分からず、かえって迷わせる。
   薄く大きく敷けば、意味を読み取らせずに「鍵の店」の気配だけが残る。
   区切りが「鍵」で、カードが「鍵穴」。差し込む先、という対。 */
.tm-card::before{
  content: "";
  position: absolute;
  right: 14px; bottom: 12px;
  width: 68px; height: 88px;
  pointer-events: none;
  --tm-wm: rgba(var(--tm-ai-rgb),.055);
  /* 丸＋下に向かって広がる台形＝本物の鍵穴の形。
     以前は四角を2つ重ねていて、下の横長の四角が左右に出っ張り、鍵穴に見えなかった（2026-09-27） */
  background: var(--tm-wm);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 88'%3E%3Ccircle cx='34' cy='26' r='20'/%3E%3Cpath d='M27 38h14l7 50H20z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 88'%3E%3Ccircle cx='34' cy='26' r='20'/%3E%3Cpath d='M27 38h14l7 50H20z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 急ぎのカードは朱の透かしに */
.tm-card--urgent::before{ --tm-wm: rgba(var(--tm-shu-rgb),.06); }

/* 番号は朱印を押したように */
.tm-card__num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  font-size: 1.05rem !important;
  font-weight: 700;
  color: #fff !important;
  opacity: 1;
  background: var(--tm-shu);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85), inset 0 0 0 3px var(--tm-shu);
  transform: rotate(-3deg);
  letter-spacing: 0;
}

/* 罫線パネルは和紙寄りに */
.tm-panel{
  background: linear-gradient(180deg, var(--tm-washi) 0%, var(--tm-tint-2) 100%);
  border-left-color: var(--tm-shu-pale);
  border-left-width: 4px;
}

/* ============================================================
   6. リスト ── 点を「鍵の頭」に見立てる
   ============================================================ */
.tm-content ul.wp-block-list li::before{
  width: .5rem; height: .5rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  top: .68em;
  background: var(--tm-shu);
}
.tm-section--dark ul.wp-block-list li::before{ background: var(--tm-kin); opacity: .95; }

/* ============================================================
   7. 表 ── 帳場の台帳のような見た目に
   ============================================================ */
.wp-block-table table{
  background: #fff;
  box-shadow: 0 1px 3px rgba(var(--tm-ai-deep-rgb),.05);
}
.wp-block-table thead th{
  background: linear-gradient(180deg, var(--tm-ai) 0%, var(--tm-ai-deep) 100%);
  letter-spacing: .08em;
}
.wp-block-table tbody tr:nth-child(even) td{ background: var(--tm-tint-1); }
.tm-deflist table td:first-child{
  background: linear-gradient(90deg, var(--tm-tint-2) 0%, var(--tm-tint-1) 100%);
  border-right: 2px solid var(--tm-shu-pale);
}
/* 料金表は数字を見やすく */
.tm-pricetable table td:not(:first-child){
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================================================
   8. よくある質問
   ============================================================ */
.tm-faq{
  border-color: rgba(var(--tm-ai-rgb),.16);
  box-shadow: 0 1px 2px rgba(var(--tm-ai-deep-rgb),.04);
}
.tm-faq summary{
  background: linear-gradient(180deg, var(--tm-tint-1) 0%, var(--tm-tint-2) 100%);
}
.tm-faq summary::before{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em; height: 1.5em;
  background: var(--tm-shu);
  color: #fff;
  border-radius: 3px;
  font-size: .8em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), inset 0 0 0 2px var(--tm-shu);
  transform: rotate(-3deg);
  vertical-align: -.25em;
}
.tm-faq[open] summary{ background: linear-gradient(180deg, var(--tm-tint-3) 0%, var(--tm-tint-3) 100%); }

/* ============================================================
   9. ボタン
   ============================================================ */
.wp-block-button__link{
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.wp-block-button__link:hover{ transform: translateY(-1px); box-shadow: 0 3px 0 rgba(0,0,0,.14); }
.wp-block-button__link:active{ transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.12); }

/* ============================================================
   10. ヘッダー / フッター
   ============================================================ */
/* backdrop-filter は使わない。

   指定すると、そのヘッダーが「画面いっぱいに開くメニュー」の位置の基準に
   なってしまい、まとめボタンで開いたメニューがヘッダーの高さ（約100px）の
   箱に閉じ込められて、中に縦スクロールバーが出る。
   このヘッダーは固定表示ではないので、ぼかしても背景に何も無く、利点が無い。 */
.tm-header{
  background: #fff;
  border-bottom-color: rgba(var(--tm-ai-rgb),.14);
  box-shadow: 0 1px 0 rgba(var(--tm-kin-rgb),.35);
}
.tm-header .wp-block-site-title a{ letter-spacing: .04em; }

.wp-block-navigation a{ position: relative; }
.wp-block-navigation a::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -.35em;
  height: 2px;
  background: var(--tm-shu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.wp-block-navigation a:hover::after{ transform: scaleX(1); }

.tm-footer{
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(var(--tm-ai-rgb),.045) 0%, transparent 70%),
    linear-gradient(180deg, var(--tm-tint-2) 0%, var(--tm-tint-3) 100%);
  border-top: 0;
  position: relative;
}
/* フッターの上端も同じ鍵で受ける（形は「4. セクション区切り」の共通定義） */
.tm-footer::before{
  --tm-key-c:  rgba(var(--tm-ai-rgb),.5);
  --tm-rule-c: rgba(var(--tm-ai-rgb),.18);
}
.tm-footer h2{
  display: flex;
  align-items: baseline;
  gap: .5em;
  border-bottom: 0;
  padding-bottom: 0;
}

/* ============================================================
   11. 電話番号
   ============================================================ */
.tm-tel{
  display: inline-block;
  padding: .1em .6em;
  border-top: 2px solid var(--tm-shu-pale);
  border-bottom: 2px solid var(--tm-shu-pale);
}

/* ============================================================
   12. 動きを減らす設定の尊重
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .tm-card,
  .wp-block-button__link,
  .wp-block-navigation a::after{ transition: none; }
  .tm-card:hover,
  .wp-block-button__link:hover{ transform: none; }
}

/* カードの透かしをページごとに：はんこ＝印影、金庫＝ダイヤル。ほかは鍵穴（2026-09-27） */
.tm-page-hanko .tm-card::before,
.tm-page-safe .tm-card::before{ width: 76px; height: 76px; }
.tm-page-hanko .tm-card::before{
  --tm-wm: rgba(var(--tm-shu-rgb),.07);
  -webkit-mask: 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%3Ccircle cx='40' cy='40' r='27' fill='none' stroke='%23000' stroke-width='2'/%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") center / contain no-repeat;
          mask: 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%3Ccircle cx='40' cy='40' r='27' fill='none' stroke='%23000' stroke-width='2'/%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") center / contain no-repeat;
}
.tm-page-safe .tm-card::before{
  -webkit-mask: 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='37' fill='none' stroke='%23000' stroke-width='3'/%3E%3Crect x='38.5' y='6' width='3' height='9' transform='rotate%280 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%2830 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%2860 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='9' transform='rotate%2890 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%28120 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%28150 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='9' transform='rotate%28180 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%28210 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%28240 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='9' transform='rotate%28270 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%28300 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%28330 40 40%29'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Crect x='38' y='22' width='4' height='10' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: 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='37' fill='none' stroke='%23000' stroke-width='3'/%3E%3Crect x='38.5' y='6' width='3' height='9' transform='rotate%280 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%2830 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%2860 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='9' transform='rotate%2890 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%28120 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%28150 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='9' transform='rotate%28180 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%28210 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%28240 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='9' transform='rotate%28270 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%28300 40 40%29'/%3E%3Crect x='38.5' y='6' width='3' height='5' transform='rotate%28330 40 40%29'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Crect x='38' y='22' width='4' height='10' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* アクセス：地図は横長、その下に「①駐車場 ②2階へ」の写真2枚 */
.tm-map--wide{ aspect-ratio: 2 / 1; }
@media (max-width: 600px){ .tm-map--wide{ aspect-ratio: 4 / 3; } }
.tm-access-steps{ margin-top: 1.25rem !important; }
.tm-access-steps figcaption{ font-size: .85rem !important; color: var(--wp--preset--color--contrast) !important; line-height: 1.6; }
.tm-temp{ font-size: .72rem; color: var(--wp--preset--color--muted); }