/*
Theme Name: TAKA Auto FSE
Theme URI: https://www.taka-auto.com/
Author: TAKA Auto
Description: TAKAオートのブロックテーマ。Figma デザインから抽出したデザイントークンと、セクション単位のブロックパターンで構成します。
Version: 0.2.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taka-auto-fse
Tags: full-site-editing, blocks, block-patterns
*/

/* このサイトではイタリック体を使わない（ブラウザ既定で斜体になる要素も立てる） */
:where(em, i, cite, address, var, dfn) { font-style: normal; }

/* 数字・英字まわりの共通フォント指定 */
:root { --ta-font-condensed: "Roboto Condensed", "Arial Narrow", sans-serif; }

/* ===== 間隔スケール：gap / margin / padding はすべてこの変数だけを使う =====
   値は 0 と 12px の倍数のみ。新しい間隔が要るときはここに段を足す。 */
:root {
  --ta-space-12: 12px;
  --ta-space-24: 24px;
  --ta-space-36: 36px;
  --ta-space-48: 48px;
  --ta-space-60: 60px;
  --ta-space-72: 72px;
  --ta-space-96: 96px;
  --ta-space-120: 120px;
  /* 可変の段（最小・最大とも 12 の倍数） */
  --ta-space-fluid-72: clamp(48px, 6vw, 72px);
  --ta-space-fluid-96: clamp(60px, 8vw, 96px);
  /* 字送り（dammy テーマと同じ段階） */
  --ta-ls-none: 0;
  --ta-ls-base: 1px;
  --ta-ls-wide: 2px;
  --ta-ls-wider: 4px;
}

/* ===== 共通ユーティリティ（theme.json で表現できない装飾） ===== */

/* セクション背景は全幅、本文幅は theme.json の 1200px に揃える */
.wp-site-blocks { width: 100%; max-width: none; margin-inline: auto; }
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 1000; }
body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}
.ta-header { box-sizing: border-box; max-width: 1600px; margin-inline: auto; padding-inline: var(--ta-space-24); }
/* 基準の文字組み（dammy テーマの作法に合わせる） */
body {
  /* 本文の基準サイズ。base プリセットが PC 16px / SP 15px の流動値を持つ。 */
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.8;
  letter-spacing: var(--ta-ls-none);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
/* 見出しは字送りを詰める */
:is(h1, h2, h3, h4, h5, h6) { letter-spacing: var(--ta-ls-none); }
/* キーボード操作時だけフォーカスを可視化する */
:focus-visible {
  outline: 3px solid var(--wp--preset--color--brand);
  outline-offset: 2px;
}

/* WordPress の既定 block gap を、ページ外枠とトップページのセクション間では使わない */
.wp-site-blocks > * { margin-block-start: 0; }
body.home main.wp-block-group > * { margin-block: 0; }

/* セクション見出し：英字ラベル（5rem）＋ 和文リード（16px）。詳細はファイル末尾の定義を参照。 */
.ta-section-title {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ta-space-12);
  margin-bottom: var(--wp--preset--spacing--60);
}
.ta-section-title__en {
  font-family: var(--ta-font-condensed);
  font-size: 5rem;
  line-height: 1;
  letter-spacing: var(--ta-ls-wider);
  text-transform: uppercase;
  color: var(--wp--preset--color--brand);
}
.ta-section--dark .ta-section-title__en {
  color: var(--wp--preset--color--white);
}
.ta-section-title__ja {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 700;
  line-height: 1;
}
.ta-section-title__desc {
  position: relative;
  z-index: 1;
  max-width: 740px;
  margin: 0;
  line-height: 1.9;
}
.ta-footer p,
.ta-work-card p:not(.ta-work-step) { line-height: 1.9; }
@media (max-width: 781px) {
  .ta-header { padding-inline: var(--ta-space-12); }
}

/* 電話番号表示（Roboto Condensed Bold Italic） */
.ta-tel {
  font-family: var(--ta-font-condensed);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

/* お問い合わせCTA（電話／WEB）の2枚のカード。真ん中の電話番号とボタンは高さが違うので、
   どちらも残りの高さを使って上下中央に置き、上の見出しと下の注記の位置を2枚でそろえる。 */
.ta-cta-banner .ta-card { display: flex; flex-direction: column; gap: var(--ta-space-24); }
.ta-cta-banner .ta-card > * { margin-block: 0; }
.ta-cta-banner .ta-card > :is(.ta-tel, .wp-block-buttons) { flex: 1 1 auto; display: flex; align-items: center; }
/* 電話番号は flex にしたことで text-align が効かなくなるので、中央に寄せ直す */
.ta-cta-banner .ta-card > .ta-tel { justify-content: center; }

/* ヘッダー：ナビのアクティブ下線 */
.ta-header .wp-block-navigation-item.current-menu-item > a::after,
.ta-header .wp-block-navigation-item.current_page_item > a::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 0;
  background: var(--wp--preset--color--brand);
}
.ta-header .wp-block-navigation a { font-size: 13px; font-weight: 400; }
/* 第1階層：ラベルの上に英字のアイブロウ（taka_auto_fse_nav_eyebrow() が出力） */
.ta-header .wp-block-navigation__container > .wp-block-navigation-item > a {
   display: flex; flex-direction: column; align-items: center; }
.ta-header .wp-block-navigation__container > .wp-block-navigation-item.has-child { align-items: flex-end; }
.ta-nav-en {
  font-family: var(--ta-font-condensed);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
/* スマホのドロワーではラベルだけにする */
.wp-block-navigation__responsive-container.is-menu-open .ta-nav-en { display: none; }
/* スマホのドロワーはメガメニューを出さず、上位の項目だけを罫線で区切った1列のリストにする
   （上位の項目はそれぞれ一覧ページへのリンクを持っているので、下層へはそこから辿れる） */
.ta-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.ta-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle { display: none !important; }
.ta-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; padding-top: var(--ta-space-48); }
.ta-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch;
  gap: 0 !important;
  width: 100%;
  border-top: 1px solid rgb(255 255 255 / 20%);
}
.ta-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid rgb(255 255 255 / 20%);
}
.ta-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  padding: var(--ta-space-24) var(--ta-space-12);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 700;
  text-align: left;
}
/* 右端に「進む」の矢印 */
.ta-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ===== ヘッダーのメガメニュー（激安タイヤ販売：3列／店舗サービス：サービス3列＋店舗の2カラム） =====
   パネルはメニュー項目の並び（.wp-block-navigation__container）を基準に absolute で
   メニューのすぐ下・右端揃えに重ねる。ヘッダーの高さは変えない（599px以下はドロワー表示なので対象外）。 */
@media (min-width: 600px) {
  .ta-header .wp-block-navigation__container { position: relative; }
  /* className はパネル（ul）にも付くので、項目（li.has-child）だけを static にする */
  .ta-header .wp-block-navigation .ta-mega.has-child { position: static; }
  .ta-header .wp-block-navigation .ta-mega > .wp-block-navigation__submenu-container {
    top: calc(100% + 12px);
    right: 0;
    left: auto;
    border: 0;
    border-top: 3px solid var(--wp--preset--color--brand);
    /* 背景は少し透かして下の内容をぼかす（色クラスの !important を上書き） */
    background-color: rgb(26 26 26 / 90%) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 16px 32px -16px rgb(0 0 0 / 50%);
  }
  /* 開いた状態（ホバー・フォーカス・クリック）。コアの width:auto / min-width:200px を上書きする。 */
  .ta-header .wp-block-navigation .ta-mega.has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
  .ta-header .wp-block-navigation .ta-mega.has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
  .ta-header .wp-block-navigation .ta-mega.has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
    display: grid;
    gap: var(--ta-space-12);
    min-width: 0;
    padding: var(--ta-space-24);
    /* ふんわり出す：少し上から下りながらフェードイン。@starting-style 非対応のブラウザでは即時に出る。 */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 280ms ease-out, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @starting-style {
    .ta-header .wp-block-navigation .ta-mega.has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
    .ta-header .wp-block-navigation .ta-mega.has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
    .ta-header .wp-block-navigation .ta-mega.has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
  /* 項目からパネルまでの隙間（12px＋上罫3px）でホバーが切れないよう、パネルの上に透明な帯を敷く。
     パネルは幅広く右寄せなので、帯を隙間より高くすると隣のメニュー項目に被さり、ホバーで切り替わらなくなる。 */
  .ta-header .wp-block-navigation .ta-mega > .wp-block-navigation__submenu-container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 15px;
  }
  .ta-header .wp-block-navigation :is(.ta-mega--tire, .ta-mega--products, .ta-mega--news).has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
  .ta-header .wp-block-navigation :is(.ta-mega--tire, .ta-mega--products, .ta-mega--news).has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
  .ta-header .wp-block-navigation :is(.ta-mega--tire, .ta-mega--products, .ta-mega--news).has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
    grid-template-columns: repeat(var(--ta-mega-cols), minmax(0, 1fr));
    width: min(calc(var(--ta-mega-cols) * 200px + 48px), calc(100vw - 32px));
  }
  /* 並べる列数（タイヤ販売3・お知らせ2＝4項目を2×2）。タイヤを探すは「すべての商品」を全幅、カテゴリを2列で並べる。 */
  .ta-header .wp-block-navigation .ta-mega--tire { --ta-mega-cols: 3; }
  .ta-header .wp-block-navigation .ta-mega--products { --ta-mega-cols: 2; }
  .ta-header .wp-block-navigation .ta-mega--products > .wp-block-navigation__submenu-container > .wp-block-navigation-item:first-child { grid-column: 1 / -1; }
  .ta-header .wp-block-navigation .ta-mega--news { --ta-mega-cols: 2; }
  .ta-header .wp-block-navigation .ta-mega--service.has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
  .ta-header .wp-block-navigation .ta-mega--service.has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
  .ta-header .wp-block-navigation .ta-mega--service.has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: var(--ta-space-24);
    width: min(960px, calc(100vw - 32px));
  }
  .ta-mega__col--stores { padding-left: var(--ta-space-24); border-left: 1px solid rgb(255 255 255 / 20%); }
}
@media (min-width: 600px) and (prefers-reduced-motion: reduce) {
  .ta-header .wp-block-navigation .ta-mega > .wp-block-navigation__submenu-container { transition: none !important; transform: none !important; }
}
.ta-header .wp-block-navigation :is(.ta-mega--tire, .ta-mega--products, .ta-mega--news) > .wp-block-navigation__submenu-container > .wp-block-navigation-item,
.ta-header .wp-block-navigation .ta-mega__list > .wp-block-navigation-item { margin: 0; background: transparent; }
.ta-header .wp-block-navigation :is(.ta-mega--tire, .ta-mega--products, .ta-mega--news) > .wp-block-navigation__submenu-container > .wp-block-navigation-item > a,
.ta-header .wp-block-navigation .ta-mega__list a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 10px;
  border: 1px solid rgb(255 255 255 / 20%);
  justify-content: center;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
}
.ta-header .wp-block-navigation :is(.ta-mega--tire, .ta-mega--products, .ta-mega--news) > .wp-block-navigation__submenu-container > .wp-block-navigation-item > a:hover,
.ta-header .wp-block-navigation .ta-mega__list a:hover {
  border-color: var(--wp--preset--color--brand);
  background: rgb(255 255 255 / 8%);
}
.ta-header .wp-block-navigation .ta-mega a[aria-current="page"] { border-color: var(--wp--preset--color--brand); }
/* メガメニュー内では、ナビ共通のアクティブ下線は出さない */
.ta-header .wp-block-navigation .ta-mega .wp-block-navigation__submenu-container .wp-block-navigation-item > a::after { content: none; }
.ta-mega__col { margin: 0; list-style: none; }
.ta-mega__heading {
  margin: 0 0 8px;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.ta-mega__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ta-mega__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ドロワー（599px以下）では縦に積む。サービスは2列。 */
@media (max-width: 599px) {
  .ta-mega__col + .ta-mega__col { margin-top: var(--ta-space-24); }
  .ta-mega__list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ta-header .wp-block-navigation :is(.ta-mega--tire, .ta-mega--products, .ta-mega--news) > .wp-block-navigation__submenu-container { gap: 8px; }
}
.ta-header-utility .ta-tel a { color: var(--wp--preset--color--white); }
.ta-header .ta-tel a { color: var(--wp--preset--color--white); }
.ta-header .ta-header-sticky-actions { display: none; }
.ta-header .ta-header-mobile-phone { display: none; }
.ta-header .ta-header-drawer-sns { display: none !important; }
.ta-header-sticky-actions > * { margin: 0 !important; }
/* 追尾ヘッダーへの切り替えはふわっと：帯が少し上から降りてきて、ロゴと余白はなめらかに縮む */
.ta-site-header .ta-header-band { transition: padding 320ms ease, box-shadow 320ms ease; }
.ta-site-header .ta-header .wp-block-image img { transition: width 320ms ease; }
.ta-site-header.is-compact .ta-header-band,
.ta-site-header.is-expanding .ta-header-band { animation: ta-header-float 420ms cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes ta-header-float {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ta-site-header .ta-header-band,
  .ta-site-header .ta-header .wp-block-image img { transition: none; }
  .ta-site-header.is-compact .ta-header-band,
  .ta-site-header.is-expanding .ta-header-band { animation: none; }
}
.ta-site-header.is-compact .ta-header-utility { display: none; }
.ta-site-header.is-compact .ta-header-band {
  padding-block: var(--ta-space-12) !important;
  box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
}
.ta-site-header.is-compact .ta-header { flex-wrap: nowrap; gap: var(--ta-space-24); }
.ta-site-header.is-compact .ta-header .wp-block-image { margin: 0; flex: 0 0 auto; }
.ta-site-header.is-compact .ta-header .wp-block-image img { width: 150px !important; }
.ta-site-header.is-compact .ta-header .wp-block-navigation__container { gap: 20px !important; }
.ta-site-header.is-compact .ta-header .wp-block-navigation a { white-space: nowrap; }
.ta-site-header.is-compact .ta-header .wp-block-navigation .ta-mega .wp-block-navigation__submenu-container a { font-size: 0.875rem; white-space: normal; }
.ta-site-header.is-compact .ta-header .ta-header-sticky-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--ta-space-12) !important;
}
.ta-site-header.is-compact .ta-header-sticky-actions .ta-tel { margin: 0; font-size: 1.25rem; }
.ta-site-header.is-compact .ta-header-sticky-actions .wp-block-button__link {
  /* 右に矢印が付くぶん、左を一段広くして文字を中央寄りに見せる */
  padding-inline: var(--ta-space-24) var(--ta-space-12);
  font-size: 0.8125rem;
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .ta-site-header.is-compact .ta-header { flex-wrap: wrap; }
  .ta-site-header.is-compact .ta-header-sticky-actions { margin-left: auto !important; }
}
@media (max-width: 781px) {
  .ta-site-header.is-compact .ta-header-sticky-actions { width: 100%; justify-content: flex-end; }
}
@media (max-width: 599px) {
  .ta-site-header .ta-header-utility,
  .ta-site-header.is-compact .ta-header .ta-header-sticky-actions { display: none; }
  .ta-site-header .ta-header-band { padding-block: var(--ta-space-12) !important; }
  .ta-site-header .ta-header {
    flex-wrap: nowrap;
    gap: var(--ta-space-12);
    margin-block-start: 0 !important;
  }
  .ta-site-header .ta-header .wp-block-image { flex: 0 0 auto; margin: 0; }
  .ta-site-header .ta-header .wp-block-image img { width: 150px !important; }
  .ta-site-header .ta-header .ta-header-mobile-phone {
    display: flex;
    flex: 0 0 auto;
    margin: 0 0 0 auto !important;
  }
  .ta-header-mobile-phone .wp-block-button__link {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--wp--preset--color--white);
    font-size: 0;
  }
  .ta-header-mobile-phone .wp-block-button__link::before {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    background: currentColor;
    mask: url("assets/img/icon-phone.svg") center / contain no-repeat;
  }
  .ta-site-header.is-compact .ta-header .wp-block-navigation { margin-left: 0; }
  .ta-header .wp-block-navigation__responsive-container-open {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .ta-header .wp-block-navigation__responsive-container.is-menu-open .ta-header-drawer-sns {
    display: flex !important;
    /* 上はメニュー一覧の最後の罫線で区切れているので、線は引かない */
    margin-top: var(--ta-space-36) !important;
  }
  .ta-header-drawer-sns .wp-social-link,
  .ta-header-drawer-sns .wp-social-link a { width: 36px; height: 36px; }
  .ta-header-drawer-sns .wp-social-link svg { width: 32px; height: 32px; }
}
@media (min-width: 1200px) {
  .ta-header { flex-wrap: nowrap; gap: var(--ta-space-12); padding-inline: var(--ta-space-24) !important; }
  .ta-header .wp-block-navigation__container { flex-wrap: nowrap; gap: 20px !important; }
  .ta-header .wp-block-navigation a { white-space: nowrap; }
}
/* 横幅に余裕のある画面では、1200px 用の詰めた指定をゆるめる */
@media (min-width: 1440px) {
  .ta-header { gap: var(--ta-space-24); padding-inline: var(--ta-space-36) !important; }
  .ta-header .wp-block-navigation__container { gap: var(--ta-space-36) !important; }
}

/* ヒーロー：斜め分割背景 */
.ta-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ta-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--wp--preset--color--ink);
  clip-path: polygon(0 0, 62% 0, 48% 100%, 0 100%);
}
@media (max-width: 781px) {
  .ta-hero::before { clip-path: polygon(0 0, 100% 0, 100% 58%, 0 72%); }
}

/* カード共通 */
.ta-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line);
}
.ta-card--shadow { box-shadow: 0 2px 14px rgb(0 0 0 / 7%); }

.wp-block-post-terms.ta-tag {
  box-sizing: border-box;
  width: 7.5em;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--slate);
  line-height: 1.8;
  padding: 0 4px;
  text-align: center;
}
.wp-block-post-terms.ta-tag a { color: inherit; text-decoration: none; }
.wp-block-post-terms.ta-tag .wp-block-post-terms__separator,
.wp-block-post-terms.ta-tag .wp-block-post-terms__separator ~ a { display: none; }
.ta-tag--outline {
  background: transparent;
  color: var(--wp--preset--color--brand);
  border: 1px solid currentColor;
}

/* ステップ番号 */
.ta-step-no {
  font-family: var(--ta-font-condensed);
  font-size: 2.25rem;
  line-height: 1;
}
/* カード内では右肩に絶対配置し、カードの高さや他要素の並びに影響させない */
.ta-card:has(> .ta-step-no) { position: relative; }
.ta-card > .ta-step-no {
  position: absolute;
  top: var(--wp--preset--spacing--40);
  right: var(--wp--preset--spacing--40);
  z-index: 1;
  margin: 0;
  pointer-events: none;
}
.ta-card > .ta-step-no:first-child + * { margin-block-start: 0; }
.ta-card:has(> .ta-step-no) > :is(h2, h3) { padding-right: 2.5em; }

/* 料金表 */
.ta-table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--sm); }
.ta-table th,
.ta-table td { border: 1px solid var(--wp--preset--color--line); padding: var(--ta-space-12); text-align: left; }
.ta-table thead th { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); font-weight: 700; }
.ta-table tbody th { background: var(--wp--preset--color--surface); font-weight: 600; }
.ta-table td.is-price { text-align: right; white-space: nowrap; font-weight: 700; }


/* 本番の本文は .ta-entry、編集画面の本文は .editor-styles-wrapper に入る。両方に同じ指定を当てて見た目をそろえる。 */
:is(.ta-entry, .editor-styles-wrapper) table { width: 100%; border-collapse: collapse; }
:is(.ta-entry, .editor-styles-wrapper) :is(th, td) { border: 1px solid var(--wp--preset--color--line); padding: var(--ta-space-12); }
:is(.ta-entry, .editor-styles-wrapper) img { height: auto; max-width: 100%; }

/* アーカイブ/商品カード：2列（1200px未満は1列）。カード内は左に画像、右に情報。概要は2行まで。 */
.ta-product-grid.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ta-product-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
  align-items: center;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.ta-product-card:hover {
  border-color: var(--wp--preset--color--brand);
  box-shadow: 0 10px 20px -12px rgb(26 26 26 / 45%);
  transform: translateY(-2px);
}
.ta-product-card:has(a:focus-visible) { outline: 3px solid var(--wp--preset--color--brand); outline-offset: 2px; }
.ta-product-card a:focus-visible { outline: 0; }
.ta-product-card .wp-block-post-featured-image { padding: 8px; }
.ta-product-card .wp-block-post-featured-image img { aspect-ratio: 1 / 1; object-fit: contain; }
/* カードはグリッド配置なので、フローレイアウト由来の上マージン（24px）を本文側に付けない。 */
.ta-product-card > * { margin-block: 0; }
.ta-product-card .ta-product-card__body { min-width: 0; padding: 14px 16px 14px 4px; gap: 4px; }
.ta-product-card__title { margin: 0; line-height: 1.4; }
.ta-product-card__title a { color: inherit; text-decoration: none; }
/* 商品名のリンクをカード全面に広げ、カードのどこを押しても詳細へ */
.ta-product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ta-product-card:hover .ta-product-card__title a { color: var(--wp--preset--color--brand); }
.ta-product-card__excerpt .wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--wp--preset--color--slate);
}
.ta-product-card__excerpt .wp-block-post-excerpt__more-text { display: none; }
/* カテゴリ・メーカー、サイズ、価格はそれぞれ1行。収まらない分は省略記号にする。 */
.ta-product-card :is(.ta-product-terms, .ta-product-summary > span) {
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.6;
}
/* カテゴリ・メーカーは概要文と同じ文字にそろえる */
.ta-product-card .ta-product-terms { font-size: 13px; line-height: 1.7; color: var(--wp--preset--color--slate); }
.ta-product-card .ta-product-summary { display: grid; gap: 0; width: 100%; margin: 0; font-weight: 700; }
.ta-product-card .ta-product-summary__label { font-size: 12px; font-weight: 400; }
@media (max-width: 1199px) {
  .ta-product-grid.is-layout-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ta-product-card { transition: none; }
  .ta-product-card:hover { transform: none; }
}

/* 装飾なしリスト（フッターのリンク群など） */
.wp-block-list.is-style-none { list-style: none; padding-left: 0; }
.wp-block-list.is-style-none li { margin-bottom: var(--ta-space-12); }

/* フッター内の見出しは本文より小さく */
.ta-footer h2 { margin-bottom: var(--ta-space-12); }
.ta-footer a { color: inherit; }
.ta-footer a:hover { color: var(--wp--preset--color--brand); }

/* ヒーロー：写真は角丸なしでトリミング */
.ta-hero__photo img { width: 100%; height: auto; object-fit: cover; }
.ta-hero--top { position: relative; }

/* 下層ページヘッダーは帯を低めに。
   タイヤ写真を敷き、その上に暗い透過レイヤーを重ねて見出しの可読性を確保する。
   トップの斜め分割だと右側が明るいままで白文字が読めないため、ここでは全面を覆う。 */
.ta-page-hero {
  min-height: 200px;
  display: flex;
  align-items: center;
  background-color: var(--wp--preset--color--ink);
  /* assets/img/hero-tires.jpg: Markus Winkler / Unsplash（Unsplash License・帰属表示は任意）
     https://unsplash.com/photos/a-bunch-of-tires-stacked-on-top-of-each-other-IkpseSg-68E */
  background-image: url("assets/img/hero-tires.jpg");
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
}
.ta-hero.ta-page-hero { background-color: var(--wp--preset--color--ink); }
.ta-page-hero::before {
  clip-path: none;
  background: linear-gradient(
    90deg,
    rgb(17 17 17 / 90%) 0%,
    rgb(17 17 17 / 82%) 45%,
    rgb(17 17 17 / 66%) 100%
  );
}
/* 帯は display:flex なので、中の見出しブロックは放っておくと内容幅に縮んで
   auto マージンで中央に寄ってしまう。幅100%を与えて本文（main）と同じ
   1200px コンテナに揃え、文字はその左端から始める。 */
.ta-page-hero > .ta-section-title {
  flex: 1 1 auto;
  width: 100%;
  text-align: left;
}
/* 下層ページ見出しの色はファイル末尾のセクション見出し定義のあとで上書きする。 */
.ta-page-hero :is(.wp-block-post-title, .wp-block-query-title) { margin: 0; }
/* リード文の文字色（mark）は保存時に背景の透明指定が落ちるので、ブラウザ既定の黄色い背景を消す。 */
.ta-page-hero mark { background-color: transparent; }

/* カテゴリーカード */
.ta-sale { align-items: flex-start; }
.ta-sale > .wp-block-column { min-width: 0; }
.ta-sale__intro { display: flex; flex-direction: column; gap: var(--ta-space-48); }
.ta-sale__intro > * { margin: 0 !important; }
.ta-sale__intro .ta-brand-logos { justify-content: flex-start; gap: var(--ta-space-24) !important; }
.ta-sale__intro .ta-brand-logos .wp-block-image { margin: 0; }
/* 取扱ブランドを全部並べる版：2列のタイル。ロゴは比率の違う画像も同じ枠（10:3）に収める。 */
.ta-brand-logos--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ta-space-12);
}
.ta-brand-logos--grid > * { margin: 0 !important; }
.ta-brand-logos--grid .wp-block-image { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); }
.ta-brand-logos--grid .wp-block-image a { display: block; }
.ta-brand-logos--grid img { display: block; width: 100%; height: auto; aspect-ratio: 10 / 3; object-fit: contain; padding: 6px; box-sizing: border-box; }
.ta-brand-logos--grid .wp-block-image:has(a):hover { border-color: var(--wp--preset--color--brand); }
@media (max-width: 781px) {
  .ta-brand-logos--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 2カラム表示のときは、左のブランド一覧の下辺を右の製品カテゴリの下辺にそろえる。
   左カラムを右と同じ高さに伸ばし、ブランドのタイルが残りの高さを均等に分け合う（ロゴは枠の中央に収める）。
   右の高さは画面幅で変わるので、タイルの上下の余白もそれに合わせて伸び縮みする。 */
@media (min-width: 782px) {
  .ta-sale { align-items: stretch; }
  .ta-sale__intro .ta-brand-logos--grid { flex: 1 1 auto; grid-auto-rows: 1fr; }
  .ta-sale__intro .ta-brand-logos--grid .wp-block-image,
  .ta-sale__intro .ta-brand-logos--grid .wp-block-image a { display: flex; }
  .ta-sale__intro .ta-brand-logos--grid .wp-block-image a { flex: 1 1 auto; }
  .ta-sale__intro .ta-brand-logos--grid img { height: 100%; min-height: 0; }
}
/* 製品カテゴリは3段：①すべての商品｜おすすめ特選品 ②オールシーズン｜夏用｜冬用 ③ホイール｜その他。
   列数（6列）と各カードの幅（3列ぶん／2列ぶん）はブロックのグリッド設定で指定している。 */
.ta-category-grid > * { min-width: 0; margin: 0 !important; }
.ta-category-card .wp-block-image { margin: 0; }
/* 縦横比（16:9・切り抜き）は画像ブロックの「アスペクト比」設定で指定している */
.ta-category-card img { width: 100%; display: block; }
.ta-category-card h3 a { color: inherit; }

/* ブランドロゴはグレースケールから色付きへ */
.ta-brand-logos img { filter: grayscale(1); opacity: 0.75; transition: filter 160ms ease, opacity 160ms ease; }
.ta-brand-logos img:hover { filter: none; opacity: 1; }

/* お知らせ一覧 */
.ta-notice-item .wp-block-post-title { margin: 0; flex: 1 1 auto; }
.ta-notice-item .wp-block-post-date { margin: 0; }
.ta-notice-item .wp-block-post-terms { margin: 0; }
.ta-notice-item .wp-block-post-terms a { color: inherit; }

/* 絞り込みリンク */
.ta-filters .ta-tag { margin: 0 var(--ta-space-12) var(--ta-space-12) 0; text-decoration: none; }

/* レビューの星 */
.ta-stars { letter-spacing: 0.15em; margin: 0; }

/* 料金表の単位は小さく */
.ta-table small { font-weight: 400; color: var(--wp--preset--color--muted); margin-left: var(--ta-space-12); }

/* 商品カード内の画像は余白なし */
.ta-product-card .wp-block-post-featured-image { margin: 0; }

/* ===== 旧HTMLから変換したページ本文のブロック ===== */

/* 赤字強調（旧 span.s_red_b / div.red_b 由来） */

/* セクション箱（旧 div.m_box 由来）。
   白いカードを積み重ねる見せ方はせず、見出しの赤線と余白だけで区切る。 */
.ta-section-box { margin-block: var(--wp--preset--spacing--60); }
.ta-section-box > :first-child { margin-top: 0; }
.ta-section-box > :last-child { margin-bottom: 0; }

/* 交互に差し込む帯。前後のセクションと背景を変えて章の切れ目を強める。 */
.ta-section-box--alt {
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
  background: #ecedf0;
  background: color-mix(in srgb, var(--wp--preset--color--slate) 9%, var(--wp--preset--color--white));
  border-block: 1px solid var(--wp--preset--color--line);
}
@media (max-width: 781px) {
  .ta-section-box--alt {
    padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
  }
}

/* 交互帯（PRICE / SIMULATION）は背景を画面の左右端まで広げる。
   左右パディングは 0 にして、中の文字を本文と同じ 1200px の列に揃える。 */
:is(.ta-entry, .editor-styles-wrapper) .ta-section-box--alt {
  position: relative;
  isolation: isolate;
  padding-inline: 0;
  background: transparent;
  border-block: 0;
}
:is(.ta-entry, .editor-styles-wrapper) .ta-section-box--alt::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  box-sizing: border-box;
  background: color-mix(in srgb, var(--wp--preset--color--slate) 9%, var(--wp--preset--color--white));
  border-block: 1px solid var(--wp--preset--color--line);
}

/* 白の帯：ページ背景（base）と区別したいセクションに敷く。--alt と同じく全幅に広げる。 */
:is(.ta-entry, .editor-styles-wrapper) .ta-section-box--white {
  position: relative;
  isolation: isolate;
  padding-block: var(--wp--preset--spacing--70);
}
:is(.ta-entry, .editor-styles-wrapper) .ta-section-box--white::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--wp--preset--color--white);
  border-block: 1px solid var(--wp--preset--color--line);
}

/* SIMULATION の計算例はカードに並べる。金額は下端に揃えたいので、
   カードを縦フレックスにして「総額」を margin-top:auto で押し下げる。 */
.ta-sim-grid { margin-block: var(--wp--preset--spacing--40); }
.ta-sim-grid { padding: 22px 0 0 22px; }
.ta-sim-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ta-space-12);
  padding: var(--wp--preset--spacing--40);
}
/* .ta-entry の見出し既定（上余白48px・xl）が効かないよう詳細度を上げる */
:is(.ta-entry, .editor-styles-wrapper) .ta-sim-card > * { margin: 0 !important; }
:is(.ta-entry, .editor-styles-wrapper) .ta-section-box .ta-sim-card .ta-sim-card__title {
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.5;
}
/* 「例」は円で囲み、カードの左肩に重ねる（カード内の並びには影響させない） */
.ta-sim-card__badge {
  position: absolute;
  top: -22px;
  left: -22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  line-height: 1;
}
.ta-sim-card__items {
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.9;
}
:is(.ta-entry, .editor-styles-wrapper) .ta-sim-card__total {
  margin-top: auto;
  padding-top: var(--ta-space-12);
  border-top: 1px solid var(--wp--preset--color--line);
  font-size: var(--wp--preset--font-size--lg);
}

/* 2つ目以降の中見出しは .ta-entry の見出し余白を残して間隔をあける。 */
.ta-section-box > :is(h2, h3):first-child { margin-top: 0; }

/* ページの大見出し。本文とのジャンプ率を大きくとり、章の切れ目を分かりやすくする。 */
:is(.ta-entry, .editor-styles-wrapper) .ta-section-head {
  margin-top: var(--wp--preset--spacing--60);
  margin-bottom: var(--wp--preset--spacing--40);
  padding: 0 0 var(--ta-space-12);
  border-left: 0;
  border-bottom: 3px solid var(--wp--preset--color--ink);
  /* 本文 1rem に対して約2.5〜2.7倍。プリセットの 2-xl(最大2rem) と 3-xl(最大4.5rem) の中間。 */
  font-size: clamp(1.75rem, 1.15rem + 2.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.01em;
}
:is(.ta-entry, .editor-styles-wrapper) .ta-section-head::before {
  content: "";
  display: block;
  width: 56px;
  height: 5px;
  margin-bottom: var(--ta-space-12);
  background: var(--wp--preset--color--brand);
}
/* 章の先頭に来たときは上の余白を詰める。 */
.ta-section-box > .ta-section-head:first-child { margin-top: 0; }

/* 大見出しの下の中見出しは、差がつくよう一段落とす。 */
:is(.ta-entry, .editor-styles-wrapper) .ta-section-box h3 { font-size: var(--wp--preset--font-size--xl); }



/* 会社概要はスタッフ紹介もカードにしない（写真・名前・紹介文の並び）。 */
.ta-page-company .ta-work-grid { gap: var(--wp--preset--spacing--50); }
.ta-page-company .ta-work-card {
  background: none;
  border: 0;
  box-shadow: none;
}
.ta-page-company .ta-work-card > :not(.wp-block-image) {
  padding-left: 0;
  padding-right: 0;
}
.ta-page-company .ta-work-card > :last-child { padding-bottom: 0; }

.wp-block-table.ta-table { margin-block: var(--wp--preset--spacing--40); }
.wp-block-table.ta-table table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--sm); }
.wp-block-table.ta-table :is(th, td) { border: 1px solid var(--wp--preset--color--line); padding: var(--ta-space-12); text-align: left; }
.wp-block-table.ta-table thead th { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); font-weight: 700; }
.wp-block-table.ta-table tbody th { background: var(--wp--preset--color--surface); font-weight: 600; }
/* 見出しを表の最上段（thead）に持つ表：見出しの代わりにジャンプ先になるので、追尾ヘッダーの下に隠れないようにする */
.wp-block-table.ta-table--sectioned[id] { scroll-margin-top: var(--ta-space-120); }
.wp-block-table.ta-table--sectioned thead { border-bottom: 0; }
.wp-block-table.ta-table--sectioned thead th { font-size: var(--wp--preset--font-size--md); }
/* 作業工賃表は表ごとに中身の長さが違っても「項目：料金＝7：3」にそろえる（表ブロックには列幅の設定がないため CSS で指定） */
.wp-block-table.ta-table--sectioned tbody th { width: 70%; }
.wp-block-table.ta-table td.is-price { text-align: right; white-space: nowrap; font-weight: 700; }
/* 「項目｜料金」の2列表：料金列を右寄せ・太字にする（セル単位のクラスはブロックで持てないため表側で指定） */
.wp-block-table.ta-table--price td { text-align: right; white-space: nowrap; font-weight: 700; }
.wp-block-table.ta-table--price td small {
  margin-left: 0.25em;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
}

/* 埋め込み（Googleマップ・YouTube）はレスポンシブに */
.ta-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.ta-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== 作業事例（旧 div.sagyou_body 由来のカード） ===== */
.ta-work-grid { margin-block: var(--wp--preset--spacing--40); }

.ta-work-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.ta-work-card .wp-block-image { margin: 0; }
.ta-work-card .wp-block-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.ta-work-card > :not(.wp-block-image) {
  margin: 0;
  padding: 0 var(--wp--preset--spacing--40);
}
.ta-work-card > :not(.wp-block-image):first-of-type { padding-top: var(--wp--preset--spacing--40); }
.ta-work-card > :last-child { padding-bottom: var(--wp--preset--spacing--40); }

/* ステップ番号ラベル */
.ta-work-step {
  font-family: var(--ta-font-condensed);
  font-size: var(--wp--preset--font-size--sm);
  letter-spacing: 0.04em;
  margin-bottom: var(--ta-space-12) !important;
}

/* 画面には出さず読み上げにだけ残すテキスト */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 番号だけを円で囲み、カードの右肩に重ねる（見出し行を作らない） */
.ta-work-card:has(> .ta-work-step--badge) { position: relative; }
.ta-work-card > .ta-work-step--badge {
  position: absolute;
  top: var(--ta-space-12);
  right: var(--ta-space-12);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50%;
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
  font-size: 1.375rem;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
}
.ta-work-card > .ta-work-step--badge + * { padding-top: var(--wp--preset--spacing--40); }

/* カード内の説明文は小さめ */
.ta-work-card p:not(.ta-work-step) {
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.9;
}

/* ページ内ジャンプリンク */
/* ボタンの幅設定（25%・50% など）はコアが --wp--style--block-gap を引いて計算するので、実際の間隔と同じ値にそろえる。
   ずれると行の右端が余り、幅の違うボタンの行で右端がそろわなくなる。 */
.ta-jump-links { --wp--style--block-gap: var(--ta-space-12); gap: var(--wp--style--block-gap) !important; margin-block: var(--wp--preset--spacing--40); }
.ta-jump-links .wp-block-button__link { border-width: 1px; }

/* 見出しへジャンプしたとき追尾ヘッダー分の余白を確保 */
:is(.ta-entry, .editor-styles-wrapper) :is(h2, h3)[id] { scroll-margin-top: var(--ta-space-120); }

/* ===== ヒーロー（デザイン実寸: 高さ650px / 見出し72px / 写真686px） ===== */
.ta-hero--top { background: var(--wp--preset--color--white); padding-block: 0; }
.ta-hero--top::before {
  z-index: 1;
  clip-path: polygon(0 0, 68% 0, 46% 100%, 0 100%);
}
.ta-hero__inner {
  min-height: 650px;
  align-items: center;
  margin-inline: auto;
  max-width: var(--wp--style--global--wide-size);
}
.ta-hero__text { position: relative; z-index: 2; color: var(--wp--preset--color--white); padding-block: var(--wp--preset--spacing--70); }
/* 英文キャッチを主役にして、和文はその下に小さく添える。 */
.ta-hero__en {
  margin: var(--ta-space-12) 0 0;
  font-family: var(--ta-font-condensed);
  font-weight: 700;
  white-space: nowrap;
  font-size: 5rem;
  line-height: 1;
  text-transform: uppercase;
}
.ta-hero__title {
  margin: var(--ta-space-12) 0 var(--ta-space-24);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--ta-ls-wide);
}
.ta-hero__lead { margin: 0 0 var(--ta-space-24); line-height: 1.9; }
.ta-hero__lead-mobile-break,
.ta-hero__shop-logo { display: none; }
.ta-hero__call { margin-top: var(--wp--preset--spacing--50); }
.ta-hero__call > p { margin: 0; }
.ta-hero__tel {
  font-size: var(--wp--preset--font-size--hero-sub);
  color: var(--wp--preset--color--brand);
  margin: 0 0 var(--ta-space-12) !important;
}
.ta-hero__tel a { color: inherit; }
.ta-hero__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.ta-hero__media .wp-block-image { height: 100%; margin: 0; }
.ta-hero__photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; }
.ta-tag { display: inline-block; margin: 0; }
/* ショートコードブロックは wpautop で前後に空の <p> を作る。余白が狂うので無効化する。 */
.ta-hero__text > p:empty { display: none; }
.ta-hero__text > .wp-block-buttons .ta-hero__button-mobile { display: none !important; }

@media (max-width: 781px) {
  .ta-hero__inner { min-height: 0; }
  .ta-hero__text { flex-basis: 100% !important; min-width: 0; padding-block: var(--wp--preset--spacing--60); }
  .ta-hero__en { font-size: clamp(1rem, 5.5vw, 3.25rem); }
  .ta-hero--top::before {
    clip-path: none;
    background: linear-gradient(90deg, rgb(26 26 26 / 98%), rgb(26 26 26 / 88%) 70%, rgb(26 26 26 / 58%));
  }
}
@media (max-width: 599px) {
  .ta-hero--top {
    --ta-hero-image-space: 60svh;
    /* SP のボタンの高さ。英字キャッチの下辺を合わせる計算でも使う。 */
    --ta-hero-sp-button-h: 52px;
    padding-inline: var(--ta-space-24) !important;
  }
  .ta-hero--top::before {
    background: linear-gradient(180deg, rgb(26 26 26 / 10%) 0%, rgb(26 26 26 / 18%) 38%, rgb(26 26 26 / 90%) 55%, rgb(26 26 26 / 98%) 100%);
  }
  .ta-hero__text {
    padding-top: 200px;
    padding-bottom: var(--ta-space-48);
  }
  .ta-hero__shop-logo {
    display: block;
    width: 85%;
    margin: var(--ta-space-12) 0 var(--ta-space-24) !important;
  }
  .ta-hero-logo__svg { display: block; width: 100%; height: auto; }
  /* ロゴは1文字ずつ順番に出す。--ta-char-index は SVG 側の <g> に振ってある。 */
  .ta-hero-logo__char {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ta-hero-logo-char 520ms cubic-bezier(0.22, 0.75, 0.3, 1) both;
    animation-delay: calc(120ms + var(--ta-char-index) * 90ms);
  }
  .ta-hero__lead { font-size: clamp(15px, 4vw, 16px) !important; }
  .ta-hero__lead-mobile-break { display: block; }
  .ta-hero__call { display: none; }
  .ta-hero__photo img { object-position: 32% center; }
  .ta-hero__text > .wp-block-buttons .ta-hero__button-desktop { display: none !important; }
  .ta-hero__text > .wp-block-buttons .ta-hero__button-mobile { display: block !important; }
  .ta-hero__text > .wp-block-buttons {
    width: 100%;
    margin-left: 0 !important;
    flex-wrap: nowrap;
    gap: var(--ta-space-12) !important;
  }
  .ta-hero__text > .wp-block-buttons > .wp-block-button {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ta-hero__text > .wp-block-buttons .wp-block-button__link {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--ta-hero-sp-button-h);
    justify-content: center;
    padding: var(--ta-space-12) 8px !important;
    gap: 6px;
    font-size: clamp(0.8125rem, 3.25vw, 0.875rem) !important;
    white-space: nowrap;
  }
  .ta-hero--top .ta-hero__en {
    position: absolute;
    /* 下辺をリード文（「〜最短30分〜。」の行）の下辺に合わせる。
       リード文の下に積まれているのは、リード文とボタンの相殺後のマージン 36px →
       ボタンの高さ（--ta-hero-sp-button-h）→ テキスト列の padding-bottom 48px。
       その合計だけ下辺から戻せば、リード文の下辺とそろう。 */
    top: auto;
    bottom: calc(var(--ta-space-36) + var(--ta-hero-sp-button-h) + var(--ta-space-48));
    right: 0;
    z-index: -1;
    width: max-content;
    margin: 0;
    /* 下辺を固定したぶん上に伸びるので、ヒーローの上端で切れない大きさに抑える。 */
    font-size: clamp(1.875rem, 9.2vw, 2.25rem);
    line-height: 1;
    /* rotate ではなく縦書きにして、要素の下辺＝文字列の終端になるようにする。 */
    writing-mode: vertical-rl;
    pointer-events: none;
  }
}
@keyframes ta-hero-logo-char {
  from { opacity: 0; transform: translateY(5px) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ta-hero-logo__char { animation: none; }
}
@media (max-width: 359px) {
  .ta-hero--top { --ta-hero-image-space: 70svh; }
}

/* プリセットクラスに依存せず見出し実寸を保証する */
.ta-hero__title {
   font-size: var(--wp--preset--font-size--lg); 
    letter-spacing: 0;
  }
/* .ta-section-title__ja のサイズはファイル末尾のアイブロウ定義でまとめて指定 */
.ta-section-title__desc { font-size: var(--wp--preset--font-size--md); }

/* キャンペーンカードの画像比率を揃える */
.ta-card .wp-block-image img { width: 100%; display: block; }
.ta-campaign-card .wp-block-image { margin: 0; }
.ta-campaign-card .wp-block-image img { aspect-ratio: 16 / 9; object-fit: cover; }
/* キャンペーンカード（トップ・お知らせサイドバー共通）：タイトルのリンクをカード全面に広げ、どこを押しても遷移させる */
.ta-campaign-card { position: relative; transition: box-shadow 180ms ease, transform 180ms ease; }
.ta-campaign-card__title a { color: inherit; text-decoration: none; }
.ta-campaign-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ta-campaign-card:hover { box-shadow: 0 6px 22px rgb(0 0 0 / 12%); transform: translateY(-2px); }
.ta-campaign-card:hover .ta-campaign-card__title a { color: var(--wp--preset--color--brand); }
.ta-campaign-card:has(a:focus-visible) { outline: 3px solid var(--wp--preset--color--brand); outline-offset: 2px; }
.ta-campaign-card a:focus-visible { outline: 0; }
@media (prefers-reduced-motion: reduce) {
  .ta-campaign-card { transition: none; }
  .ta-campaign-card:hover { transform: none; }
}
/* サイドバーは縦1列。flex の縦並びだとカードが内容幅に縮むので幅いっぱいにする */
.ta-campaign-list > .ta-campaign-card { width: 100%; }

/* ===== AREA：店舗カード + 関東地図 ===== */
.ta-area { align-items: stretch; }
.ta-area__content { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--60); }
.ta-area__content > * { margin: 0 !important; }
.ta-store-cards {
   display: flex; flex-direction: column; gap: var(--ta-space-12);
  }
.ta-store-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: center;
  gap: var(--ta-space-24);
  margin: 0;
}
.ta-store-card > * { width: 100%; min-width: 0; margin: 0 !important; }
.ta-store-card__info { min-width: 0; }
.ta-store-card__info > * { margin-block: 0; }
.ta-store-card__info > * + * { margin-block-start: var(--ta-space-12); }
.ta-area__map { align-self: stretch; }
/* 対応エリア地図は1枚の画像（assets/img/area-map.png・透過PNG）。
   AREA セクション（.ta-area-section）の上端から下端までを覆う。左端は地図カラムの左端、右端は画面の端。
   幅が足りない分は地図の左側（埼玉の西端）を切り落とし、3店舗の印が入る右側を残す。
   left は地図カラムの位置を再計算している：本文幅（最大 1200px、左右に spacing-50 の余白）の左端 + 店舗カード列 44% + 列の間隔 spacing-50。 */
.ta-area-section {
  --ta-area-content: min(var(--wp--style--global--content-size, 1200px), 100% - 2 * var(--wp--preset--spacing--50));
  position: relative;
  overflow: hidden;
}
.ta-area-section > * { position: relative; z-index: 1; }
.ta-area-section > .ta-area { position: static; }
.ta-area__map .ta-area-map {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100% - var(--ta-area-content)) / 2 + var(--ta-area-content) * 0.44 + var(--wp--preset--spacing--50));
  right: 0;
  z-index: 0;
  margin: 0;
}
.ta-area__map .ta-area-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.ta-area__content { position: relative; z-index: 1; }
@media (max-width: 1200px) {
  .ta-area__map { display: none; }
  .ta-area > .wp-block-column:first-child { flex-basis: 100% !important; }
}
@media (max-width: 599px) {
  .ta-store-card { grid-template-columns: minmax(0, 1fr); }
}

/* ===== FLOW：濃色セクションの見出しと白いステップカード ===== */
.ta-flow-header { align-items: flex-start; }
.ta-flow-header .ta-section-title { margin-bottom: 0; }
.ta-flow-header__aside .ta-card { color: var(--wp--preset--color--ink); }
.ta-flow-header__more { margin-top: var(--wp--preset--spacing--50); }
.ta-section--dark .ta-section-title__ja,
.ta-section--dark .ta-section-title__desc { color: var(--wp--preset--color--white); }

/* カードはデザイン通り白のまま（イラストは線画なので暗背景には置かない） */
.ta-section--dark .ta-card { background: var(--wp--preset--color--white); border-color: transparent; }

.ta-flow-illust {
  position: relative;
  margin: calc(var(--wp--preset--spacing--50) * -1) calc(var(--wp--preset--spacing--50) * -1) var(--wp--preset--spacing--30);
  overflow: hidden;
  background: var(--wp--preset--color--surface);
}
.ta-flow-illust [data-name="illustration"] { width: 100%; }

/* Figma 由来のレイアウトでコンテナクエリ単位(cqw/cqh)を解決するため */
[data-ct="size"] { container-type: size; }

/* ===== NOTICE：お知らせ一覧 + バナー ===== */
/* container-type でセクション幅（スクロールバーを除く）を cqw で参照できるようにし、店舗ビルを画面の右端に寄せる */
.ta-notice-section { position: relative; overflow: hidden; container-type: inline-size; }
.ta-notice__heading {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--ta-space-24);
  margin-bottom: 0;
  z-index: 2;
}
.ta-notice__heading > * { margin: 0 !important; }
.ta-notice__heading .ta-section-title__desc { max-width: none; line-height: 1.6; }
.ta-notice__more { flex-wrap: nowrap; margin-top: var(--wp--preset--spacing--40) !important; }
.ta-notice__more .wp-block-button__link { white-space: nowrap; }
.ta-notice { align-items: stretch; }
.ta-notice > .wp-block-column:first-child {
   position: relative; z-index: 1;
}
.ta-notice-item { border-top: 0 !important; }
.ta-notice-item .wp-block-post-date { flex: 0 0 auto; margin: 0; }
.ta-notice-item .wp-block-post-terms { flex: 0 0 auto; margin: 0; }
/* 日付・カテゴリーのまとまり。PC は横1行（タイトルの左）、スマホはブロックのスマホ設定で縦並びになりタイトルの上に来る */
.ta-notice-item__meta { flex: 0 0 auto; }
.ta-notice-item .wp-block-post-terms a { color: inherit; text-decoration: none; }
.ta-notice-item .wp-block-post-title { flex: 1 1 auto; margin: 0; font-weight: 500; }
.ta-notice-list > :first-child .ta-notice-item { border-top: 1px solid var(--wp--preset--color--line) !important; }
/* お知らせサイドバー（会社概要・キャンペーン・年月アーカイブ）。カードにはせず、リンクの一覧はお知らせ一覧と同じ罫線で区切る */
.ta-news-sidebar__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wp--preset--color--line); }
.ta-news-sidebar__list > li { margin: 0; padding: var(--ta-space-12) 0; border-bottom: 1px solid var(--wp--preset--color--line); font-size: var(--wp--preset--font-size--sm); }
.ta-news-sidebar__list a { color: inherit; text-decoration: none; }
.ta-news-sidebar__list a:hover { color: var(--wp--preset--color--brand); }
.ta-notice__banner { position: relative; min-height: 360px; }
.ta-notice__banner .wp-block-image {
  position: absolute;
  /* 本文幅（最大 1200px）の右端から、セクション（＝画面）の右端までずらす。
     100cqw はセクションの内側（左右 padding の spacing-50 を除いた幅）なので、その padding ぶんも足す。 */
  right: calc(-1 * ((100cqw - min(var(--wp--style--global--content-size, 1200px), 100cqw)) / 2 + var(--wp--preset--spacing--50)));
  bottom: calc(-1 * var(--wp--preset--spacing--80));
  width: 150%;
  max-width: none;
  margin: 0;
}
.ta-notice__banner .wp-block-image a { display: block; }
.ta-notice__banner img { display: block; width: 100%; height: auto; max-width: none; }
@media (max-width: 899px) {
  .ta-notice__heading { display: flex; flex-direction: column; align-items: flex-start; }
  .ta-notice__banner { min-height: 0; }
  .ta-notice__banner .wp-block-image { position: static; width: 100%; }
}

/* ===== タイヤ検索条件（絞り込みフォーム） ===== */
.ta-product-search {
  box-sizing: border-box;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line);
  box-shadow: 0 2px 14px rgb(0 0 0 / 7%);
  padding: var(--wp--preset--spacing--50);
}
.ta-product-search > h2 {
  margin: 0 0 var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1.4;
}
.ta-product-search > p {
  margin: 0 0 var(--wp--preset--spacing--40);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.8;
}

.ta-product-search form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  align-items: end;
}
.ta-product-search label {
  display: flex;
  flex-direction: column;
  gap: var(--ta-space-12);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  color: var(--wp--preset--color--slate);
  line-height: 1.4;
}
/* キーワードは 1 行使い切る */
.ta-product-search label:has(input[name="tire_keyword"]) { grid-column: 1 / -1; }

.ta-product-search input,
.ta-product-search select {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: var(--ta-space-12);
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--ink);
  font-size: 1rem;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.5;
}
.ta-product-search input::placeholder { color: #9ca3af; }
.ta-product-search select {
  appearance: none;
  padding-right: var(--ta-space-36);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23374151' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ta-space-12) center;
  background-size: 11px auto;
  cursor: pointer;
}
.ta-product-search input:hover,
.ta-product-search select:hover { border-color: #c9ced6; }
.ta-product-search input:focus-visible,
.ta-product-search select:focus-visible {
  outline: none;
  border-color: var(--wp--preset--color--brand);
  box-shadow: 0 0 0 3px var(--wp--preset--color--brand-pale);
}

/* 価格：下限と上限の2つのつまみを1本の数直線に重ねる */
.ta-price-range {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  grid-column: 1 / -1;
}
.ta-price-range legend {
  padding: 0;
  margin-bottom: var(--ta-space-12);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  color: var(--wp--preset--color--slate);
}
.ta-price-range__values {
  margin: 0 0 var(--ta-space-12);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}
.ta-price-range__track {
  position: relative;
  height: 28px;
}
/* 数直線のレール */
.ta-price-range__track::before,
.ta-price-range__fill {
  content: "";
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
}
.ta-price-range__track::before { left: 0; right: 0; background: var(--wp--preset--color--line); }
/* 選択中の価格帯を塗る */
.ta-price-range__fill {
  left: calc(11px + (100% - 22px) * var(--lo, 0%) / 100%);
  right: calc(11px + (100% - 22px) * (100% - var(--hi, 100%)) / 100%);
  background: var(--wp--preset--color--brand);
}
.ta-product-search .ta-price-range input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}
.ta-price-range input[type="range"]::-webkit-slider-runnable-track { background: none; border: 0; }
.ta-price-range input[type="range"]::-moz-range-track { background: none; border: 0; }
.ta-price-range input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--wp--preset--color--brand);
  border-radius: 50%;
  background: var(--wp--preset--color--white);
  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
  cursor: grab;
  pointer-events: auto;
  -webkit-appearance: none;
}
.ta-price-range input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border: 3px solid var(--wp--preset--color--brand);
  border-radius: 50%;
  background: var(--wp--preset--color--white);
  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
  cursor: grab;
  pointer-events: auto;
}
.ta-price-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--wp--preset--color--brand-pale); }
.ta-price-range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--wp--preset--color--brand-pale); }
.ta-price-range__scale {
  display: flex;
  justify-content: space-between;
  margin: 4px 0 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
}

.ta-product-search__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--40);
  margin-top: var(--wp--preset--spacing--20);
  padding-top: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--wp--preset--color--line);
}
.ta-product-search__actions button { min-width: 260px; border: 0; font-family: inherit; cursor: pointer; }
.ta-product-search__actions a {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ta-product-search__actions a:hover { color: var(--wp--preset--color--brand); }

@media (max-width: 781px) {
  .ta-product-search { padding: var(--wp--preset--spacing--40); }
  .ta-product-search form { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .ta-product-search__actions button { min-width: 100%; }
}

/* ===== タイヤ一覧：左に絞り込み／右に商品の2カラム ===== */
.ta-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--wp--preset--spacing--50);
  align-items: start;
  margin-top: var(--wp--preset--spacing--50);
}
/* グリッド配置なので、フローレイアウト由来の縦マージンは持たせない。 */
.ta-product-layout > * { margin-block-start: 0; margin-block-end: 0; }
/* 右カラムはフローレイアウトの2番目の子。WordPress の blockGap が上に付くのを止める。 */
.ta-product-layout > .ta-product-layout__main {
  min-width: 0;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* 絞り込みは細い左カラムに入るため1列に積む。 */
.ta-product-layout__side .ta-product-search { padding: var(--wp--preset--spacing--40); }
.ta-product-layout__side .ta-product-search > h2 { font-size: var(--wp--preset--font-size--md); }
.ta-product-layout__side .ta-product-search form {
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--30);
}
.ta-product-layout__side .ta-product-search label:has(input[name="tire_keyword"]) { grid-column: auto; }
.ta-product-layout__side .ta-product-search__actions {
  flex-direction: column;
  align-items: stretch;
  gap: var(--wp--preset--spacing--20);
  padding-top: var(--wp--preset--spacing--30);
}
.ta-product-layout__side .ta-product-search__actions button { min-width: 0; width: 100%; }
.ta-product-layout__side .ta-product-search__actions a { text-align: center; }

/* 商品詳細：右カラムも左の絞り込みと同じ白いブロックにする */
.ta-product-detail { padding: var(--wp--preset--spacing--50); }
.ta-product-detail > :first-child { margin-block-start: 0; }
.ta-product-detail .has-global-padding { padding-inline: 0; }
/* 「円」「インチ」は数字より小さく */
.ta-unit { font-size: 0.72em; font-weight: inherit; margin-left: 0.1em; }
/* 問い合わせボタンと電話番号。電話は「電話で相談」と番号を1行にし、番号を大きく */
.ta-product-quote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ta-space-12) var(--ta-space-24); }
.ta-product-tel {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  white-space: nowrap;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}
.ta-product-tel__label { font-size: var(--wp--preset--font-size--sm); }
.ta-product-tel__number { font-size: var(--wp--preset--font-size--tel); font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; }
.ta-product-tel:hover .ta-product-tel__number { color: var(--wp--preset--color--brand); }

/* タブレット以下は1カラムに戻し、絞り込みを横並びに戻す。 */
@media (max-width: 1023px) {
  .ta-product-layout { grid-template-columns: 1fr; }
  .ta-product-layout__side .ta-product-search form { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .ta-product-layout__side .ta-product-search label:has(input[name="tire_keyword"]) { grid-column: 1 / -1; }
  .ta-product-layout__side .ta-product-search__actions {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .ta-product-layout__side .ta-product-search__actions button { min-width: 260px; width: auto; }
}
@media (max-width: 781px) {
  .ta-product-layout__side .ta-product-search__actions button { min-width: 100%; }
}

/* ===== 店舗別サービスページ（/service/<store>/） ===== */
.ta-store-services { margin-top: var(--wp--preset--spacing--40); }

/* 店舗切替タブ */
.ta-store-tabs {
  flex-wrap: wrap;
  gap: 1px !important;
  background: var(--wp--preset--color--line);
  border: 1px solid var(--wp--preset--color--line);
}
.ta-store-tabs .wp-block-button { flex: 1 1 160px; }
.ta-store-tabs .wp-block-button__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: var(--ta-space-12) var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--ink);
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
  letter-spacing: var(--ta-ls-none);
}
.ta-store-tabs .wp-block-button__link:hover {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  transform: none;
  box-shadow: none;
}
.ta-store-tabs__item.is-current .wp-block-button__link,
.ta-store-tabs__item.is-current .wp-block-button__link:hover {
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
}
.ta-store-tabs__area { font-size: var(--wp--preset--font-size--xs); font-weight: 400; opacity: 0.85; }
.ta-store-tabs__name { font-size: var(--wp--preset--font-size--md); font-weight: 700; }

/* 店舗概要テーブル（コアの table ブロック） */
.ta-store-detail__table { margin-top: 0; }
.ta-store-detail__table tbody th { width: 12.5em; color: var(--wp--preset--color--slate); }
.ta-store-detail__tel { font-weight: 700; white-space: nowrap; }
.ta-store-detail__notes {
  margin: var(--wp--preset--spacing--30) 0 0;
  padding-left: 1.2em;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.9;
}

/* 店舗情報：左に項目、右に店舗写真。段組はコアの columns ブロック。 */
.ta-store-detail__cols,
.ta-store-access__cols {
  gap: var(--wp--preset--spacing--50);
  align-items: flex-start;
}
/* 店舗写真はいずれも縦位置なので、切り抜かず元の比率のまま出す。 */
.ta-store-detail__photo { margin: 0; }
.ta-store-detail__photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--wp--preset--color--line);
}
.ta-store-detail__photo figcaption {
  margin-top: var(--ta-space-12);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
}

/* 店舗へのアクセス：左に行き方、右に地図 */
.ta-store-access__lead {
  margin: 0 0 var(--wp--preset--spacing--30);
}
.ta-store-access__route-title {
  margin: var(--wp--preset--spacing--30) 0 4px !important;
  line-height: 1.5;
}
.ta-store-access__route-body { margin: 0 !important; line-height: 1.9; }
.ta-store-access__note {
  margin: var(--wp--preset--spacing--30) 0 0;
  padding: var(--ta-space-12);
  background: var(--wp--preset--color--surface);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.8;
}
.ta-store-access__map .ta-embed {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--wp--preset--color--line);
}
.ta-store-access__map-link { margin: var(--ta-space-12) 0 0; font-size: var(--wp--preset--font-size--sm); }

@media (max-width: 781px) {
  /* 1カラムに落ちたとき、縦写真が大きくなりすぎるので幅を抑える。 */
  .ta-store-detail__photo { max-width: 360px; }
}

/* サービス導線はカードではなく行リストで並べる */
.ta-store-menu__lead {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--sm);
}
.ta-store-others__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--wp--preset--color--line);
}
.ta-store-others__list > li { border-bottom: 1px solid var(--wp--preset--color--line); }

/* 取り扱いサービスはカードのグリッドで並べる */
.ta-store-menu__grid { gap: var(--wp--preset--spacing--30) !important; }
.ta-store-menu__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: var(--wp--preset--spacing--40) var(--ta-space-36) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.ta-store-menu__card:hover {
  border-color: var(--wp--preset--color--brand);
  box-shadow: 0 10px 20px -12px rgb(26 26 26 / 45%);
  transform: translateY(-2px);
}
/* カード内の見出しなので、セクション見出しの赤い縦罫は外す */
.ta-section-box .ta-store-menu__name {
  margin: 0 !important;
  padding-left: 0;
  border-left: 0;
  line-height: 1.5;
}
.ta-store-menu__name a { color: inherit; text-decoration: none; }
/* カード全体をクリック領域にする */
.ta-store-menu__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* 右下の矢印 */
.ta-store-menu__card::after {
  content: "";
  position: absolute;
  right: var(--ta-space-12);
  bottom: var(--ta-space-12);
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--wp--preset--color--brand);
  border-right: 2px solid var(--wp--preset--color--brand);
  transform: rotate(45deg);
  transition: translate 180ms ease;
}
.ta-store-menu__card:hover::after { translate: 0.25em 0; }
.ta-store-menu__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0 !important;
  line-height: 1.8;
}
@media (prefers-reduced-motion: reduce) {
  .ta-store-menu__card,
  .ta-store-menu__card::after { transition: none; }
  .ta-store-menu__card:hover { transform: none; }
}
.ta-store-others__list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ta-space-12) var(--wp--preset--spacing--40);
  padding: var(--ta-space-12) 0;
}
.ta-store-others__addr { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); }

@media (max-width: 781px) {
  .ta-store-detail__list { grid-template-columns: 1fr; }
  .ta-store-detail__list dt { padding-bottom: 0; border-bottom: 0; }
}

/* ===== よくある質問：左カラムでジャンルを切り替える =====
   JavaScript を使わず、先頭に置いた radio の :checked で表示を切り替える。 */
.ta-faq { margin-block: var(--wp--preset--spacing--50); }
.ta-faq__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ta-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--wp--preset--spacing--50);
  align-items: start;
}

/* 左カラム：ジャンルのタブ */
.ta-faq__nav {
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--white);
}
.ta-faq__nav-title {
  margin: 0;
  padding: var(--ta-space-12) var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ta-faq__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ta-space-12);
  padding: var(--ta-space-12) var(--wp--preset--spacing--30);
  border-top: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}
.ta-faq__tab:first-of-type { border-top: 0; }
.ta-faq__tab:hover { background: var(--wp--preset--color--surface); }
.ta-faq__tab-count {
  flex: 0 0 auto;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
}

/* 右カラム：選ばれたジャンルだけを出す */
.ta-faq__panel { display: none; }
.ta-faq__panel-title {
  margin: 0 0 var(--ta-space-12);
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1.4;
}
.ta-faq__panel-lead {
  margin: 0 0 var(--wp--preset--spacing--30);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.8;
}
/* FAQ の質問・回答（details/summary のアコーディオン）。FAQページのジャンル別パネルとトップページの FAQ（.ta-faq--top）で同じ見た目にする。 */
:is(.ta-faq__panels .ta-faq__list, .ta-faq--top) { border-top: 1px solid var(--wp--preset--color--line); }
:is(.ta-faq__panels, .ta-faq--top) .ta-faq__item { margin: 0; border-bottom: 1px solid var(--wp--preset--color--line); }
:is(.ta-faq__panels, .ta-faq--top) .ta-faq__item > summary {
  display: flex;
  gap: var(--ta-space-12);
  padding: var(--ta-space-12) var(--ta-space-36) var(--ta-space-12) 0;
  position: relative;
  line-height: 1.7;
  cursor: pointer;
  list-style: none;
}
:is(.ta-faq__panels, .ta-faq--top) .ta-faq__item > summary::-webkit-details-marker { display: none; }
:is(.ta-faq__panels, .ta-faq--top) .ta-faq__item > summary::before {
  content: "Q";
  flex: 0 0 auto;
  color: var(--wp--preset--color--brand);
  font-weight: 700;
}
/* 開閉の目印 */
:is(.ta-faq__panels, .ta-faq--top) .ta-faq__item > summary::after {
  content: "＋";
  position: absolute;
  top: 50%;
  right: var(--ta-space-12);
  transform: translateY(-50%);
  color: var(--wp--preset--color--brand);
  font-weight: 700;
}
:is(.ta-faq__panels, .ta-faq--top) .ta-faq__item[open] > summary::after { content: "−"; }
:is(.ta-faq__panels, .ta-faq--top) .ta-faq__item > summary:hover { color: var(--wp--preset--color--brand); }
:is(.ta-faq__panels, .ta-faq--top) .ta-faq__answer {
  margin-block-start: 0;
  display: flex;
  gap: var(--ta-space-12);
  padding: 0 var(--ta-space-36) var(--wp--preset--spacing--30) 0;
}
:is(.ta-faq__panels, .ta-faq--top) .ta-faq__answer::before {
  content: "A";
  flex: 0 0 auto;
  color: var(--wp--preset--color--muted);
  font-weight: 700;
}
:is(.ta-faq__panels, .ta-faq--top) .ta-faq__answer p { margin: 0; line-height: 1.9; }

/* radio と対応するタブ・パネルの状態。ジャンルを足したらここも足す。 */
.ta-faq__radio:nth-of-type(1):checked ~ .ta-faq__layout .ta-faq__tab:nth-of-type(1),
.ta-faq__radio:nth-of-type(2):checked ~ .ta-faq__layout .ta-faq__tab:nth-of-type(2),
.ta-faq__radio:nth-of-type(3):checked ~ .ta-faq__layout .ta-faq__tab:nth-of-type(3),
.ta-faq__radio:nth-of-type(4):checked ~ .ta-faq__layout .ta-faq__tab:nth-of-type(4),
.ta-faq__radio:nth-of-type(5):checked ~ .ta-faq__layout .ta-faq__tab:nth-of-type(5) {
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
}
.ta-faq__radio:nth-of-type(1):checked ~ .ta-faq__layout .ta-faq__tab:nth-of-type(1) .ta-faq__tab-count,
.ta-faq__radio:nth-of-type(2):checked ~ .ta-faq__layout .ta-faq__tab:nth-of-type(2) .ta-faq__tab-count,
.ta-faq__radio:nth-of-type(3):checked ~ .ta-faq__layout .ta-faq__tab:nth-of-type(3) .ta-faq__tab-count,
.ta-faq__radio:nth-of-type(4):checked ~ .ta-faq__layout .ta-faq__tab:nth-of-type(4) .ta-faq__tab-count,
.ta-faq__radio:nth-of-type(5):checked ~ .ta-faq__layout .ta-faq__tab:nth-of-type(5) .ta-faq__tab-count {
  color: var(--wp--preset--color--white);
}
.ta-faq__radio:nth-of-type(1):checked ~ .ta-faq__layout .ta-faq__panel:nth-of-type(1),
.ta-faq__radio:nth-of-type(2):checked ~ .ta-faq__layout .ta-faq__panel:nth-of-type(2),
.ta-faq__radio:nth-of-type(3):checked ~ .ta-faq__layout .ta-faq__panel:nth-of-type(3),
.ta-faq__radio:nth-of-type(4):checked ~ .ta-faq__layout .ta-faq__panel:nth-of-type(4),
.ta-faq__radio:nth-of-type(5):checked ~ .ta-faq__layout .ta-faq__panel:nth-of-type(5) {
  display: block;
}
/* キーボード操作時にどのタブを選んでいるか分かるようにする。 */
.ta-faq__radio:focus-visible ~ .ta-faq__layout .ta-faq__tab { outline-offset: -3px; }
.ta-faq__radio:nth-of-type(1):focus-visible ~ .ta-faq__layout .ta-faq__tab:nth-of-type(1),
.ta-faq__radio:nth-of-type(2):focus-visible ~ .ta-faq__layout .ta-faq__tab:nth-of-type(2),
.ta-faq__radio:nth-of-type(3):focus-visible ~ .ta-faq__layout .ta-faq__tab:nth-of-type(3),
.ta-faq__radio:nth-of-type(4):focus-visible ~ .ta-faq__layout .ta-faq__tab:nth-of-type(4),
.ta-faq__radio:nth-of-type(5):focus-visible ~ .ta-faq__layout .ta-faq__tab:nth-of-type(5) {
  outline: 3px solid var(--wp--preset--color--brand-pale);
}

@media (max-width: 781px) {
  .ta-faq__layout { grid-template-columns: 1fr; }
}

/* ===== 関連記事への導線（本文中のテキストリンク） ===== */
.ta-related-link {
  margin-block: var(--wp--preset--spacing--30) 0;
}
.ta-related-link a {
  position: relative;
  padding-left: 1.1em;
  text-decoration: none;
  text-underline-offset: 3px;
}
.ta-related-link a::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0.1em;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--wp--preset--color--brand);
  border-right: 2px solid var(--wp--preset--color--brand);
  transform: rotate(45deg);
}
.ta-related-link a:hover { text-decoration: underline; }

/* ===== 購入メリットのカードグリッド（4列×2段） ===== */
/* 列数は core/group の grid レイアウト（columnCount:4）が決める。 */
.ta-merit-grid { margin-block: var(--wp--preset--spacing--50); }
.ta-merit-card {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding: var(--wp--preset--spacing--40);
  box-shadow: 0 2px 14px rgb(0 0 0 / 7%);
}
/* constrained 由来の左右 auto マージン（コア側が !important）を打ち消す。 */
.ta-merit-card > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none; }
.ta-merit-card__illust { margin: 0 0 var(--ta-space-12) !important; background: var(--wp--preset--color--surface); }
.ta-merit-card__illust img { display: block; width: 100%; max-width: 200px; height: auto; margin-inline: auto; }
/* 見出しはカード幅（4列時 約230px）で1行に収まるサイズにする */
:is(.ta-entry, .editor-styles-wrapper) .ta-merit-card .ta-merit-card__title {
  margin: 0 0 var(--ta-space-12);
  padding: 0 0 var(--ta-space-12);
  border-left: 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.4;
  letter-spacing: 0;
  text-wrap: balance;
}
/* 8枠目：タイヤを探すページへの導線カード（カード全面がリンク） */
.ta-merit-card--link {
  position: relative;
  justify-content: center;
  border-color: var(--wp--preset--color--brand);
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
  transition: background-color 180ms ease, transform 180ms ease;
}
.ta-merit-card--link:hover { background: #c40000; transform: translateY(-2px); }
.ta-merit-card__en {
  margin: 0 0 4px !important;
  font-family: var(--ta-font-condensed);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--ta-ls-wider);
}
:is(.ta-entry, .editor-styles-wrapper) .ta-merit-card--link .ta-merit-card__title { border-bottom-color: rgb(255 255 255 / 40%); }
.ta-merit-card--link .ta-merit-card__title a { color: inherit; text-decoration: none; }
.ta-merit-card--link .ta-merit-card__title a::after { content: ""; position: absolute; inset: 0; }
.ta-merit-card--link .ta-merit-card__title a::before {
  content: "";
  float: right;
  width: 0.5em;
  height: 0.5em;
  margin: 0.45em 0.2em 0 0;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.ta-merit-card--link:has(a:focus-visible) { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ta-merit-card--link { transition: none; }
  .ta-merit-card--link:hover { transform: none; }
}
.ta-merit-card p {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.9;
}


.wp-block-button__link,
.wp-element-button,
.wp-block-image img,
.wp-block-image.is-style-rounded img,
.wp-block-image .is-style-rounded img,
.wp-block-image.is-style-circle-mask img,
.wp-lightbox-container button,
input,
select,
textarea,
button { border-radius: 0; }

/* ===== 値札（旧 1300/1800/2000.gif をテキスト化したもの） ===== */
.ta-pricetag {
  margin-block: var(--wp--preset--spacing--30);
  text-align: center;
}
.ta-pricetag > * { margin: 0; }
/* カードにするときは高さを揃えて、価格を下端に寄せる。 */
.wp-block-columns:has(> .wp-block-column > .ta-pricetag) > .wp-block-column { display: flex; }
.ta-pricetag.ta-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-block: 0;
  padding: var(--wp--preset--spacing--30);
}
/* 行の間隔は gap だけにする（ブロック間の余白が重なって縦に間延びしていた） */
.ta-pricetag.ta-card > * { margin: 0 !important; }
.ta-pricetag.ta-card > :last-child { margin-top: auto !important; }
/* 黄色い帯は flex で引き伸ばさず、文字幅のまま中央に置く。 */
.ta-pricetag.ta-card .ta-pricetag__lead { align-self: center; margin-bottom: 0; }
/* 元画像の黄色いマーカー帯（実測 #ffee4a 前後） */
.ta-pricetag__lead {
  display: inline-block;
  margin-bottom: var(--ta-space-12);
  padding: 0 var(--ta-space-12);
  background: #ffec3d;
  font-size: clamp(0.9rem, 1.5vw, 1.125rem);
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.ta-pricetag__price {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ta-space-12);
  line-height: 1;
}
.ta-pricetag__unit {
  align-self: flex-start;
  padding-top: 0.4em;
  font-size: clamp(0.95rem, 2.2vw, 1.375rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.ta-pricetag__yen {
  font-family: var(--ta-font-condensed);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

/* ===== Snow Monkey Forms（お問い合わせ） ===== */
/* SMF の日時入力と郵便番号検索結果。 */
.snow-monkey-form .contact-postcode-status {
  display: block;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.5;
}
.snow-monkey-form .ta-smf-visit-label {
  display: block;
  margin: var(--ta-space-12) 0 4px;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
}
/* 必須バッジ（ラベル内に手で入れている span） */
.ta-form-required {
  display: inline-block;
  margin-left: var(--ta-space-12);
  padding: 0 var(--ta-space-12);
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  line-height: 1.6;
  vertical-align: middle;
}

.snow-monkey-form { margin-top: var(--ta-space-36); }
.snow-monkey-form .smf-item { padding-block: var(--ta-space-12); }
.snow-monkey-form .smf-item__label__text { font-weight: 700; }
.snow-monkey-form .smf-item__description {
  margin-top: var(--ta-space-12);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
}

.snow-monkey-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], select, textarea) {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ta-space-48);
  padding: var(--ta-space-12);
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
.snow-monkey-form :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--wp--preset--color--brand);
  box-shadow: 0 0 0 3px var(--wp--preset--color--brand-pale);
}
.snow-monkey-form .smf-checkboxes-control__control,
.snow-monkey-form .smf-radio-buttons-control__control { gap: var(--ta-space-12); }
.snow-monkey-form .smf-label { gap: var(--ta-space-12); }

/* 送信・確認ボタン */
.snow-monkey-form .smf-action { margin-top: var(--ta-space-36); gap: var(--ta-space-12); }
.snow-monkey-form .smf-button-control__control {
  border: 0;
  background-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.snow-monkey-form .smf-button-control__control:hover { background-color: #c40000; }
.snow-monkey-form .smf-button-control__control[data-action="back"],
.snow-monkey-form .smf-button-control__control[value="入力画面に戻る"] {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
}

/* エラー表示 */
.snow-monkey-form .smf-error-messages { color: var(--wp--preset--color--brand); font-weight: 700; }
.snow-monkey-form .smf-error-messages .smf-error-message { margin-top: var(--ta-space-12); }

/* 進捗表示 */
.snow-monkey-form .smf-progress-tracker { margin-bottom: var(--ta-space-36); gap: var(--ta-space-12); }

/* ===== タイヤ・ホイールの取り扱いメーカー ===== */
.ta-pickup-grid { margin-block: var(--wp--preset--spacing--50); }
.ta-pickup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0 !important;
  padding: var(--wp--preset--spacing--40);
  box-shadow: 0 2px 14px rgb(0 0 0 / 7%);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
/* ロゴのリンクをカード全面に広げ、カードのどこを押しても遷移させる */
.ta-pickup-card .wp-block-image a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ta-pickup-card:hover { box-shadow: 0 6px 22px rgb(0 0 0 / 12%); transform: translateY(-2px); }
.ta-pickup-card:has(a:focus-visible) { outline: 3px solid var(--wp--preset--color--brand); outline-offset: 2px; }
.ta-pickup-card a:focus-visible { outline: 0; }
@media (prefers-reduced-motion: reduce) {
  .ta-pickup-card { transition: none; }
  .ta-pickup-card:hover { transform: none; }
}
/* ブロックは flow レイアウト。縦フレックスなので、
   constrained の左右 auto マージンが付くと中身が中央寄せに縮む（コア側が !important）。 */
.ta-pickup-card > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none; }
.ta-pickup-card .wp-block-image { margin-block: 0 var(--ta-space-12); }
/* ロゴ画像はすべて 1000×300 の帯に揃えてあるので、その比率のまま収める。 */
.ta-pickup-card .wp-block-image img {
  width: 100%;
  aspect-ratio: 10 / 3;
  object-fit: contain;
}
:is(.ta-entry, .editor-styles-wrapper) .ta-pickup-card h3 {
  margin-top: 0;
  margin-bottom: var(--ta-space-12);
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.4;
}
.ta-pickup-card p { line-height: 1.9; }
.ta-pickup-card .ta-pickup-card__description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

@media (max-width: 599px) {
  .ta-pickup-card { padding: var(--wp--preset--spacing--30); }
}

/* ===== タイヤ購入ステップ比較 =====
   2つの買い方を左右に並べ、各ステップは上から下へ矢印でつなぐ。
   TAKAオート側を主役にするため、通常購入側はグレースケールにする（文字は読める濃さを保つ）。 */
.ta-step-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--wp--preset--spacing--50);
  margin-block: var(--wp--preset--spacing--50);
}
.ta-step-compare > * { margin-block-start: 0; margin-block-end: 0; }

.ta-step-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--wp--preset--spacing--40);
  border: 1px solid var(--wp--preset--color--line);
}
.ta-step-flow > * { margin-block: 0; }
/* .ta-entry の見出し既定（上余白48px）が効かないよう詳細度を上げる */
:is(.ta-entry, .editor-styles-wrapper) .ta-step-flow .ta-step-flow__title {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.4;
}

/* ステップ本体：縦並び。間に下向きの矢印を置く。 */
/* ブロックの flex レイアウト（横並び・上揃え）より優先させる */
.ta-step-flow__steps {
  display: flex;
  flex-direction: column !important;
  align-items: stretch !important;
  --ta-step-gap: var(--wp--preset--spacing--50);
  gap: var(--ta-step-gap) !important;
  margin: 0;
}
.ta-step-flow__steps > * { margin-block-start: 0; margin-block-end: 0; }

.ta-step {
  position: relative;
  min-width: 0;
  text-align: center;
}
.ta-step + .ta-step::before {
  content: "";
  position: absolute;
  top: calc(var(--ta-step-gap) / -2);
  left: 50%;
  width: 12px;
  height: 12px;
  border-right: 3px solid var(--wp--preset--color--slate);
  border-bottom: 3px solid var(--wp--preset--color--slate);
  transform: translate(-50%, -70%) rotate(45deg);
}
.ta-step__image { margin: 0; }
/* 画像リンクは inline-block で縮むため、列幅いっぱいに広げる。 */
.ta-step__image a { display: block; }
/* 通常購入側の4枚は同じ大きさ。下側の余白が出ないよう、縦横とも控えめにする（TAKAオート側は下で大きくする）。 */
.ta-step__image img {
  width: min(100%, 400px);
  margin-inline: auto;
  height: 130px;
  object-fit: cover;
  display: block;
}
.ta-step__label {
  margin: var(--ta-space-12) 0 0;
  line-height: 1.6;
  text-align: center;
}

.ta-step-flow--other { background: var(--wp--preset--color--surface); }
.ta-step-flow--other .ta-step-flow__title,
.ta-step-flow--other .ta-step__image img { filter: grayscale(1) contrast(1.15); }

/* TAKAオート側：赤枠と帯で強調する。 */
.ta-step-flow--taka {
  border: 3px solid var(--wp--preset--color--brand);
  background: var(--wp--preset--color--white);
  box-shadow: 0 2px 14px rgb(0 0 0 / 7%);
}
/* 「かんたん2ステップ」は右肩に重ねる（見出しの位置に影響させない） */
.ta-step-flow--taka .ta-step-flow__badge {
  position: absolute;
  top: 0;
  right: var(--wp--preset--spacing--40);
  z-index: 1;
  margin: 0 !important;
  transform: translateY(-50%);
  padding: 4px var(--ta-space-12);
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  line-height: 1.6;
}
/* 見出しサイズは通常購入側（lg）と揃え、色だけで差をつける */
.ta-step-flow--taka .ta-step__label { font-size: var(--wp--preset--font-size--md); }
/* TAKAオート側は2ステップしかないので、写真を大きく見せる。 */
.ta-step-flow--taka .ta-step__image img { height: 220px; }
.ta-step-flow--taka .ta-step + .ta-step::before {
  border-right-color: var(--wp--preset--color--brand);
  border-bottom-color: var(--wp--preset--color--brand);
}
/* スタッフのひとこと：薄ピンクの箱をステップの幅いっぱいに（アイコン・しっぽは付けない） */
.ta-step-voice {
  display: flex;
  align-items: stretch;
  gap: var(--ta-space-12);
  margin-top: var(--ta-space-12) !important;
}
.ta-step-voice > * { margin: 0 !important; }
.ta-step-voice__bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: var(--ta-space-12);
  border-radius: 8px;
  background: var(--wp--preset--color--review);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
}

/* 左右のカードで行の位置を共有し、TAKAオート側の2枚目を通常購入側の STEP3 と同じ高さから始める。
   見出し1行＋ステップ4行をカード間で subgrid で揃え、TAKAオート側は1枚で2行ぶん使う（吹き出しの分の高さを左の2ステップで分け合い、余白を出さない）。 */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 782px) {
    .ta-step-compare { grid-template-rows: auto repeat(4, auto); row-gap: 0; }
    .ta-step-flow { display: grid; grid-row: 1 / span 5; grid-template-rows: subgrid; row-gap: 0; }
    .ta-step-flow > .ta-step-flow__title { grid-row: 1; }
    .ta-step-flow__steps {
      display: grid !important;
      grid-row: 2 / span 4;
      grid-template-rows: subgrid;
      row-gap: var(--ta-step-gap) !important;
    }
    .ta-step-flow--taka .ta-step { grid-row: span 2; }
  }
}

@media (max-width: 781px) {
  .ta-step-compare { grid-template-columns: minmax(0, 1fr); }
  .ta-step-flow { padding: var(--wp--preset--spacing--30); }
  .ta-step__image img { height: 120px; }
  .ta-step-flow--taka .ta-step__image img { height: 180px; }
}

/* ===== TAKAオートについて（業務内容・ピット動画） ===== */
.ta-about-columns { align-items: stretch; }
.ta-about-columns > .wp-block-column { min-width: 0; }
.ta-about__content,
.ta-about__media { display: flex; flex-direction: column; align-items: stretch; gap: var(--ta-space-24); }
.ta-about__content > *,
.ta-about__media > * { margin: 0 !important; }
.ta-about-services table { table-layout: auto; }
.ta-about-services tbody th { width: 32%; vertical-align: top; }
.ta-about-services tbody td { vertical-align: top; }
@media (min-width: 782px) {
  .ta-about__media .wp-block-embed { display: flex; flex: 1 1 auto; min-height: 280px; }
  .ta-about__media .wp-block-embed__wrapper { flex: 1 1 auto; min-height: 0; }
  .wp-embed-responsive .ta-about__media .wp-block-embed__wrapper::before { display: none; }
  .ta-about__media .wp-block-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
}
.ta-card .ta-embed { margin-top: var(--ta-space-12); }

/* SNS アイコン（コアの social-links ブロック） */
.ta-sns { gap: var(--ta-space-12) !important; }
.ta-sns .wp-block-social-link { margin: 0; }
.ta-sns .wp-social-link a { padding: 0; transition: transform 180ms ease, opacity 180ms ease; }
.ta-sns .wp-social-link a:hover { transform: translateY(-2px); opacity: 0.8; }
.ta-footer .ta-sns .wp-social-link,
.ta-footer .ta-sns .wp-social-link a { width: 48px; height: 48px; }
.ta-footer .ta-sns .wp-social-link svg { width: 42px; height: 42px; }
/* ヘッダー最上段（本番と同じく右上に SNS を置く行） */
.ta-header-utility {
  box-sizing: border-box;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--ta-space-24);
  margin-bottom: var(--ta-space-12);
}
.ta-header-tagline { margin: 0 !important; font-size: 13px !important; letter-spacing: 0.1em; line-height: 1.4; white-space: nowrap; }
.ta-header-utility__actions { margin-left: auto !important; gap: var(--ta-space-24) !important; }
.ta-header-utility__actions > * { margin: 0 !important; }
.ta-header-utility .ta-tel { font-size: 1.5rem; }
/* 右に矢印が付くぶん、左の padding を右より一段広くする */
.ta-header-utility .wp-block-button__link { font-size: 0.9rem; padding-inline: var(--ta-space-24) var(--ta-space-12); white-space: nowrap; }
/* 本番と同じ 30×30 */
.ta-header-utility .ta-sns .wp-social-link,
.ta-header-utility .ta-sns .wp-social-link a {
  width: 30px;
  height: 30px;
}
.ta-header-utility .ta-sns .wp-social-link svg {
  width: 30px;
  height: 30px;
}
@media (min-width: 1200px) {
  .ta-header-utility { padding-inline: var(--ta-space-24); }
}
@media (min-width: 1440px) {
  .ta-header-utility { padding-inline: var(--ta-space-36); }
  .ta-header-utility .ta-tel { font-size: 1.75rem; }
  .ta-header-utility .wp-block-button__link { font-size: 0.9375rem; padding-inline: var(--ta-space-36) var(--ta-space-24); }
}
@media (max-width: 781px) {
  .ta-header-utility { padding-inline: var(--ta-space-12); }
  .ta-header-tagline { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .ta-sns .wp-social-link a { transition: none; }
  .ta-sns .wp-social-link a:hover { transform: none; }
}

.ta-section-title__en:not(.has-lg-font-size):not(.has-xs-font-size) {
  align-self: flex-start;
  margin: 0;
  font-family: var(--ta-font-condensed);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  letter-spacing:0;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
}
.ta-section--dark .ta-section-title__en:not(.has-lg-font-size):not(.has-xs-font-size) {
  color: var(--wp--preset--color--white);
}

.ta-section-title__ja:not(.has-3-xl-font-size) {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ta-ls-wide);
}

.ta-section--dark .ta-section-title__ja:not(.has-3-xl-font-size) { color: var(--wp--preset--color--white); }

.wp-block-button__link,
.wp-element-button,
.snow-monkey-form .smf-button-control__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-weight: 500;
  border-width: 1px;
  letter-spacing: 0.04em;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.snow-monkey-form .smf-button-control__control:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -12px rgb(26 26 26 / 45%);
}
.wp-block-button__link:active,
.wp-element-button:active,
.snow-monkey-form .smf-button-control__control:active {
  transform: translateY(0);
  box-shadow: none;
}
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.snow-monkey-form .smf-button-control__control:focus-visible {
  outline: 3px solid var(--wp--preset--color--brand-pale);
  outline-offset: 2px;
}

/* ===== ボタンの大きさは3段階 =====
   標準：theme.json のボタン設定（文字 sm・余白 12/24）＋高さ48px。
   大（.ta-btn--lg）：CTA・検索・フォーム送信。小（.ta-btn--sm）：表の中・ページ内ジャンプ。
   ボタンブロックは className が外側の div に付くので、両方の付き方に対応させる。 */
.wp-element-button { min-height: 48px; }
.ta-btn--lg.wp-element-button,
.ta-btn--lg .wp-element-button,
.snow-monkey-form .smf-button-control__control {
  min-height: 56px;
  padding: var(--ta-space-12) var(--ta-space-24);
  font-size: var(--wp--preset--font-size--md);
}
.ta-btn--sm.wp-element-button,
.ta-btn--sm .wp-element-button,
.ta-jump-links .wp-element-button {
  min-height: 36px;
  padding: 8px var(--ta-space-12);
  font-size: var(--wp--preset--font-size--xs);
}

/* ===== 赤いボタンのグラデーション =====
   左上の明るい赤から右下の深い赤へ、ほとんど気づかない程度に流す。上半分にはごく薄いハイライトを重ねる。
   幅200%で敷き、ホバーで右半分（深い側）へずらす。
   アウトライン型（赤枠・白地）には付けない。
   エディタで色を指定したボタン（.has-background）はその色を優先する。:where() で詳細度を上げず、
   店舗タブなど個別に背景を指定した部品の指定が勝つようにしている。 */
:root {
  --ta-btn-gradient:
    linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, rgb(255 255 255 / 0%) 52%),
    linear-gradient(115deg, #d60000 0%, #d00000 34%, #c40000 58%, #b00000 100%);
}
.wp-element-button:not(:where(.has-background)),
.snow-monkey-form .smf-button-control__control {
  background-image: var(--ta-btn-gradient);
  background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 0% 50%;
  transition:
    background-position 320ms ease,
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
.wp-element-button:not(:where(.has-background)):hover,
.snow-monkey-form .smf-button-control__control:hover { background-position: 0 0, 100% 50%; }
.is-style-outline > .wp-element-button,
.is-style-outline > .wp-element-button:hover { background-image: none; }
@media (prefers-reduced-motion: reduce) {
  .wp-element-button,
  .snow-monkey-form .smf-button-control__control { transition: none; }
}

/* 矢印は「次に進む」導線のボタンだけに付ける（ページ内ジャンプ・検索・送信ボタンは除く） */
.wp-block-buttons:not(.ta-jump-links):not(.ta-store-tabs) .wp-block-button__link::after {
  content: "";
  flex: none;
  width: 0.42em;
  height: 0.42em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transition: translate 180ms ease;
}
.wp-block-buttons:not(.ta-jump-links):not(.ta-store-tabs) .wp-block-button__link:hover::after {
  translate: 0.22em 0;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link,
  .wp-element-button,
  .snow-monkey-form .smf-button-control__control { transition: none; }
  .wp-block-button__link:hover,
  .wp-element-button:hover,
  .snow-monkey-form .smf-button-control__control:hover { transform: none; }
  .wp-block-buttons:not(.ta-jump-links):not(.ta-store-tabs) .wp-block-button__link::after { transition: none; }
}

/* ===== 店舗カードの詳細／電話／地図リンク ===== */
.ta-store-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ta-space-12);
}
.ta-store-actions > * { margin-block-start: 0; }
.ta-store-actions > .wp-block-buttons { width: 100%; min-width: 0; }
.ta-store-actions .wp-block-button__link {
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--ta-space-12);
}
/* 電話・地図のアイコンボタン（ボタンブロック）。文字は読み上げ用に残し、見た目はアイコンだけにする。 */
.ta-store-actions .ta-store-actions__icons { display: flex; justify-content: space-between; gap: var(--ta-space-12); width: 100%; }
@media (max-width: 599px) {
  .ta-store-actions .ta-store-actions__icons { justify-content: flex-start; gap: var(--ta-space-24); }
}
.ta-store-actions .ta-icon-btn { flex: none; margin: 0; }
.ta-store-actions .ta-icon-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 0;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--brand);
  font-size: 0;
  line-height: 0;
  transition:
    color 180ms ease,
    transform 180ms ease;
}
.ta-store-actions .ta-icon-btn .wp-block-button__link::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  background-color: currentColor;
  -webkit-mask: var(--ta-icon) center / contain no-repeat;
  mask: var(--ta-icon) center / contain no-repeat;
}
/* アイコンボタンには「次へ」の矢印を付けない */
.ta-store-actions .wp-block-buttons .ta-icon-btn .wp-block-button__link::after { content: none; }
.ta-store-actions .ta-icon-btn .wp-block-button__link:hover {
  background: transparent;
  color: #c40000;
  transform: translateY(-2px);
}
.ta-store-actions .ta-icon-btn .wp-block-button__link:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .ta-store-actions .ta-icon-btn .wp-block-button__link { transition: none; }
  .ta-store-actions .ta-icon-btn .wp-block-button__link:hover { transform: none; }
}

/* 日付はサイト全体で「2026.10.24」の形・同じ大きさ・太字なし。数字が揃う Roboto Condensed で組む */
.wp-block-post-date,
.wp-block-post-date time,
.ta-notice-item .wp-block-post-date {
  font-family: var(--ta-font-condensed);
  font-weight: 400;
  letter-spacing: var(--ta-ls-base);
  font-variant-numeric: tabular-nums;
}

/* 下層ページの見出しはトップのセクション見出しと同じ組み方。写真の上なので英字・和文とも白。 */
.ta-page-hero .ta-section-title__en:not(.has-lg-font-size):not(.has-xs-font-size),
.ta-page-hero .ta-section-title__ja:not(.has-3-xl-font-size) {
  color: var(--wp--preset--color--white);
}
/* 英字は 4rem・字間なし。最長の CAR ELECTRONICS（約490px）が収まる 500px に左の列を固定し、
   どのページでもリード文の書き出し位置を揃える。 */
.ta-page-hero .ta-section-title__en:not(.has-lg-font-size):not(.has-xs-font-size) {
  /* 最大 4rem。狭い画面では、最長の CAR ELECTRONICS（文字サイズの約7.7倍の幅）が
     見出し帯の内側（画面幅 − 左右の余白 spacing-40）に1行で収まるサイズまで小さくする。 */
  font-size: min(4rem, (100vw - 2 * var(--wp--preset--spacing--40)) / 7.8);
  letter-spacing: 0;
  white-space: nowrap;
}
@media (min-width: 900px) {
  .ta-page-hero .ta-section-title--split { grid-template-columns: 500px minmax(0, 1fr); }
}

/* ===== 店舗ページ：店長紹介の横長カード（店舗情報の左カラム内） ===== */
/* 店長紹介はサイト共通の .ta-card に乗せる。 */
.ta-store-manager {
  margin-top: var(--wp--preset--spacing--50);
  overflow: hidden;
}
/* 写真は 120px の正方形を左上に置き、役職・氏名・ひとことは右の欄にまとめる（スマホでも横並びのまま） */
.ta-store-manager__card {
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin-bottom: 0 !important;
}
.ta-store-manager .ta-store-manager__card > .ta-store-manager__photo-col {
  flex: 0 0 120px !important;
  width: 120px !important;
  padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
  box-sizing: content-box;
}
.ta-store-manager__photo { margin: 0 !important; }
.ta-store-manager .ta-store-manager__photo img {
  display: block;
  width: 120px;
  height: 120px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--wp--preset--color--surface);
}
.ta-store-manager .ta-store-manager__card > .ta-store-manager__body { flex: 1 1 auto !important; min-width: 0; padding: var(--wp--preset--spacing--40); }
.ta-store-manager__body > * { margin: 0; }
.ta-store-manager__body > * + * { margin-top: var(--ta-space-12) !important; }
.ta-store-manager__caption > * { margin: 0 !important; }
.ta-store-manager__role {
  font-family: var(--ta-font-condensed);
  color: var(--wp--preset--color--brand);
  letter-spacing: var(--ta-ls-wide);
}
.ta-store-manager__name { margin-top: 2px !important; line-height: 1.3; }
.ta-store-manager__kana {
  margin-left: 0.6em;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  color: var(--wp--preset--color--muted);
}
.ta-store-manager__message {
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.9;
}

/* コアの columns は 781px 以下で自動的に1カラムになる */


/* ===== セクション見出し：英字＋和文の右にリード文を並べる =====
   英字と和文は .ta-section-title__head（縦並びのグループブロック、間隔はブロックの「ブロックの間隔」で 12px）に
   まとめてあり、左列に1つの塊として置く。リード文の高さに引っぱられて英字と和文の間が広がらない。 */
.ta-section-title--split {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--ta-space-48);
  row-gap: var(--ta-space-12);
  align-items: end;
}
.ta-section-title--split > * { margin: 0 !important; }
/* 右側にリード文とリンクなどを並べるときは __aside でまとめる */
.ta-section-title--split > .ta-section-title__aside {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--ta-space-12);
}
.ta-section-title__aside > * { margin: 0 !important; }
.ta-section-title__aside > .ta-section-title__desc { max-width: none; }
.ta-section-title--split > .ta-section-title__desc {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  max-width: none;
}
@media (max-width: 899px) {
  /* 縦並びでは 2列用の align-items: end が右寄せになるので、左ぞろえ（幅いっぱい）に戻す */
  .ta-section-title--split { display: flex; flex-direction: column; align-items: stretch; }
}
/* 下層ページの見出し帯は常に --split で組み、リード文（カスタムフィールドにつないだ段落）が空のページは
   段落を隠してタイトルだけの1列に戻す。編集画面では空でも入力できるよう段落を残す。 */
.ta-section-title__desc:empty { display: none; }
/* 2列用の align-items: end が縦並びでは「右寄せ」になるので、左寄せに戻す */
.ta-section-title--split:has(> .ta-section-title__desc:empty) { display: flex; align-items: flex-start; }

/* ===== PRICE：オプション料金カードの下（枠の外）に詳細ボタン ===== */
.ta-price-side { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.ta-price-side > * { margin: 0 !important; }

/* ===== SUPPORTED：対応車種カード（5枚） ===== */
.ta-supported-cards > * { margin: 0 !important; }
.ta-supported-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ta-space-12);
  padding: var(--ta-space-24) var(--ta-space-12);
  text-align: center;
}
.ta-supported-card > * { margin: 0 !important; }
.ta-supported-card__illust { width: 100%; max-width: 160px; }
.ta-supported-card__illust img { display: block; width: 100%; height: auto; }
.ta-supported-card__name {
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.6;
}

/* ===== 交換を受け付けられないタイヤの例：イラスト付きカード ===== */
.ta-ng-cards > * { margin: 0 !important; }
.ta-ng-card {
  display: flex;
  flex-direction: column;
  gap: var(--ta-space-12);
  padding: var(--ta-space-24);
}
.ta-ng-card > * { margin: 0 !important; }
.ta-ng-card__illust { align-self: center; width: 100%; max-width: 180px; }
.ta-ng-card__illust img { display: block; width: 100%; height: auto; }
.ta-ng-card__title { font-size: var(--wp--preset--font-size--md); line-height: 1.5; }
.ta-ng-card p { line-height: 1.8; }

/* ===== 窒素ガス充填・廃タイヤ処分：2カラム ===== */
.ta-option-pair { margin-block: var(--wp--preset--spacing--60); }
.ta-option-pair > .ta-section-box { margin: 0 !important; }

/* ===== サービス（/service/ と下層）：左にサービスナビ、右に本文 ===== */
.ta-service-layout {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--wp--preset--spacing--60);
  align-items: start;
}
.ta-service-layout > * { margin-block: 0 !important; }
.ta-service-layout__main { min-width: 0; }
.ta-service-layout__main > .wp-block-post-content > :first-child { margin-top: 0; }
/* タイヤ預かりページの本文見出しは背景やマーカーを付けずに表示する。 */
.ta-tire-storage-page .ta-service-layout__main .wp-block-post-content :is(h1, h2, h3, h4, h5, h6),
.ta-tire-storage-page .ta-service-layout__main .wp-block-post-content :is(h1, h2, h3, h4, h5, h6) *,
.ta-tire-storage-page .ta-service-layout__main .wp-block-post-content p.has-background,
.ta-tire-storage-page .ta-service-layout__main .wp-block-post-content p.has-background *,
.ta-tire-storage-page .ta-service-layout__main .wp-block-post-content p:has(> strong:only-child):not(:has(.ta-em-red)),
.ta-tire-storage-page .ta-service-layout__main .wp-block-post-content p:has(> strong:only-child):not(:has(.ta-em-red)) strong {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: var(--wp--preset--color--ink) !important;
}
.ta-tire-storage-page .ta-service-layout__main .wp-block-post-content :is(h1, h2, h3, h4, h5, h6)::before,
.ta-tire-storage-page .ta-service-layout__main .wp-block-post-content :is(h1, h2, h3, h4, h5, h6)::after { content: none !important; }
/* ヘッダーが上部固定（縮小時 約100px）なので、その下に止める。
   全項目が画面内に収まるよう行間を詰め、それでも入らない低い画面ではナビ内だけスクロールさせる。 */
.ta-service-layout__side {
  position: sticky;
  top: 112px;
  max-height: calc(100vh - 112px - var(--ta-space-24));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ta-service-nav__title {
  margin: 0 0 8px;
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 700;
  line-height: 1.4;
}
.ta-service-nav__list + .ta-service-nav__title { margin-top: var(--ta-space-24); }
/* 罫線は1pxの隙間から下地の線色を見せて引く（列数が変わっても崩れない） */
.ta-service-nav__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--line);
}
.ta-service-nav__list > li { margin: 0; background: var(--wp--preset--color--white); }
/* サービス一覧・作業事例・店舗（.is-wide）は全幅 */
.ta-service-nav__list > li.is-wide { grid-column: 1 / -1; }
.ta-service-nav__list a {
  position: relative;
  display: block;
  padding: 8px calc(var(--wp--preset--spacing--30) + 1em) 8px var(--wp--preset--spacing--30);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
.ta-service-nav__list a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--wp--preset--spacing--30);
  width: 0.45em;
  height: 0.45em;
  border-top: 2px solid var(--wp--preset--color--brand);
  border-right: 2px solid var(--wp--preset--color--brand);
  transform: translateY(-50%) rotate(45deg);
}
/* 2列の項目は幅が狭いので矢印を付けず、2行まで折り返す */
.ta-service-nav__list > li:not(.is-wide) a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px 10px;
  font-size: 13px;
  text-align: center;
}
.ta-service-nav__list > li:not(.is-wide) a::after { content: none; }
.ta-service-nav__list a:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--brand); }
.ta-service-nav__list a[aria-current="page"] {
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
}
.ta-service-nav__list a[aria-current="page"]::after { border-color: var(--wp--preset--color--white); }
@media (max-width: 1023px) {
  .ta-service-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 折りたたみパネル（.ta-sp-panel）：商品検索の絞り込みとサービス・店舗メニューで共通 =====
   PC は常に開いて左カラムに置く。1023px 以下はヘッダーの下に追従するバーにし、押すと下に重ねて開く（assets/js/sp-panel.js）。 */
.ta-sp-panel { margin: 0; }
.ta-sp-panel__toggle { display: none; }
@media (max-width: 1023px) {
  .ta-product-layout__side,
  .ta-service-layout__side {
    position: sticky;
    top: var(--ta-header-h, 0px);
    z-index: 50;
    max-height: none;
    overflow: visible;
  }
  .ta-sp-panel { position: relative; }
  .ta-sp-panel__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ta-space-12);
    min-height: 48px;
    padding: 0 var(--ta-space-12);
    border: 1px solid var(--wp--preset--color--line);
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--ink);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
  }
  .ta-sp-panel__toggle::-webkit-details-marker { display: none; }
  .ta-sp-panel__toggle::after {
    content: "";
    flex: none;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid var(--wp--preset--color--brand);
    border-bottom: 2px solid var(--wp--preset--color--brand);
    transform: translateY(-25%) rotate(45deg);
    transition: transform 180ms ease;
  }
  .ta-sp-panel[open] > .ta-sp-panel__toggle::after { transform: translateY(25%) rotate(-135deg); }
  .ta-sp-panel__body {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--ta-header-h, 0px) - 64px);
    max-height: calc(100dvh - var(--ta-header-h, 0px) - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--ta-space-12);
    border: 1px solid var(--wp--preset--color--line);
    border-top: 0;
    background: var(--wp--preset--color--white);
    box-shadow: 0 12px 24px -12px rgb(0 0 0 / 30%);
  }
  /* パネルの中では、検索ボックス自体の枠・影・見出しは要らない */
  .ta-sp-panel__body .ta-product-search { padding: 0 !important; border: 0; box-shadow: none; }
  .ta-sp-panel__body .ta-product-search > h2 { display: none; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .ta-sp-panel__toggle::after { transition: none; }
}

/* 店舗概要カード（サービス一覧） */
.ta-store-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30);
}
.ta-store-overview > * { margin: 0 !important; }
.ta-store-overview__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.ta-store-overview__card:hover {
  border-color: var(--wp--preset--color--brand);
  box-shadow: 0 10px 20px -12px rgb(26 26 26 / 45%);
  transform: translateY(-2px);
}
.ta-store-overview__photo { margin: 0 !important; }
.ta-store-overview__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ta-store-overview__body { display: flex; flex-direction: column; gap: 4px; padding: var(--wp--preset--spacing--40); }
.ta-store-overview__body > * { margin: 0 !important; }
.ta-store-overview__area { color: var(--wp--preset--color--brand); font-weight: 700; letter-spacing: var(--ta-ls-wide); }
:is(.ta-entry, .editor-styles-wrapper) .ta-store-overview__name { margin: 0 0 4px !important; font-size: var(--wp--preset--font-size--lg); line-height: 1.4; }
.ta-store-overview__name a { color: inherit; text-decoration: none; }
/* カード全体をクリック領域にする */
.ta-store-overview__name a::after { content: ""; position: absolute; inset: 0; }
.ta-store-overview__addr { line-height: 1.7; }
.ta-store-overview__hours { color: var(--wp--preset--color--muted); line-height: 1.7; }
@media (max-width: 1023px) {
  .ta-store-overview { grid-template-columns: minmax(0, 1fr); }
  .ta-store-overview__card { flex-direction: row; }
  .ta-store-overview__photo { flex: 0 0 38%; }
  .ta-store-overview__photo img { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ta-store-overview__card { transition: none; }
  .ta-store-overview__card:hover { transform: none; }
}

/* ===== 車検のコース紹介：2枚のカード ===== */
.ta-course-cards { margin-block: var(--wp--preset--spacing--40); }
.ta-course-cards > * { margin: 0 !important; }
.ta-course-card { display: flex; flex-direction: column; gap: var(--ta-space-12); padding: var(--ta-space-24); }
.ta-course-card > * { margin: 0 !important; }
:is(.ta-entry, .editor-styles-wrapper) .ta-section-box .ta-course-card .ta-course-card__title {
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.4;
}
.ta-course-card p { line-height: 1.8; }
/* 3枚版（廃車の必要書類）。カードが狭くなるので見出しを一段小さくし、書類は箇条書きにする。 */
:is(.ta-entry, .editor-styles-wrapper) .ta-section-box .ta-course-cards--3 .ta-course-card .ta-course-card__title { font-size: var(--wp--preset--font-size--md); }
.ta-course-card__note { margin-top: -6px !important; line-height: 1.6; }
.ta-course-card__list { padding-left: 1.2em; font-size: var(--wp--preset--font-size--sm); line-height: 1.8; }

/* ===== エアバルブの種類：2枚のカード ===== */
.ta-valve-cards > * { margin: 0 !important; }
.ta-valve-card { display: flex; flex-direction: column; gap: var(--ta-space-12); padding: var(--ta-space-24); }
.ta-valve-card > * { margin: 0 !important; }
.ta-valve-card__title { font-size: var(--wp--preset--font-size--md); line-height: 1.5; }
.ta-valve-card p { line-height: 1.8; }

/* ===== FAQ（トップ）：質問リストの右にジャンル案内と「もっと見る」 ===== */
.ta-faq-home { align-items: stretch !important; }
.ta-faq-home .ta-faq { margin: 0; }
.ta-faq-home__side { display: flex; flex-direction: column; gap: var(--ta-space-24); }
/* 質問を閉じた状態で左右の下辺を揃える：ジャンル案内を伸ばし、行の高さを均等に配分する */
.ta-faq-home__side > .ta-faq-genres { display: flex; flex: 1 1 auto; flex-direction: column; }
.ta-faq-genres > .ta-faq-genres__list { display: flex; flex: 1 1 auto; flex-direction: column; }
.ta-faq-genres__list > .ta-faq-genres__item { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; }
/* 質問を開いたら右カラムは伸ばさない */
.ta-faq-home:has(.ta-faq__item[open]) .ta-faq-home__side { align-self: flex-start; }
@media (max-width: 781px) {
  .ta-faq-home__side { align-self: auto !important; }
}
.ta-faq-home__side > * { margin: 0 !important; }
.ta-faq-genres__title {
  margin: 0;
  padding: var(--ta-space-12) var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ta-faq-genres > * { margin: 0; }
.ta-faq-genres__list > * { margin: 0; }
.ta-faq-genres__item + .ta-faq-genres__item { border-top: 1px solid var(--wp--preset--color--line); }
/* ジャンル名のリンクを項目全面に広げ、どこを押してもそのジャンルへ */
.ta-faq-genres__item {
  position: relative;
  padding: var(--ta-space-12) calc(var(--wp--preset--spacing--30) + 1.2em) var(--ta-space-12) var(--wp--preset--spacing--30);
}
.ta-faq-genres__item > * { margin: 0; }
.ta-faq-genres__item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--wp--preset--spacing--30);
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid var(--wp--preset--color--brand);
  border-right: 2px solid var(--wp--preset--color--brand);
  transform: translateY(-50%) rotate(45deg);
}
.ta-faq-genres__item:hover { background: var(--wp--preset--color--surface); }
.ta-faq-genres__name { gap: var(--ta-space-12); }
.ta-faq-genres__name > * { margin: 0; }
.ta-faq-genres__label { font-size: var(--wp--preset--font-size--sm); font-weight: 700; line-height: 1.5; }
.ta-faq-genres__label a { color: var(--wp--preset--color--ink); text-decoration: none; }
.ta-faq-genres__label a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.ta-faq-genres__item:hover .ta-faq-genres__label a { color: var(--wp--preset--color--brand); }
.ta-faq-genres__item:has(a:focus-visible) { outline: 3px solid var(--wp--preset--color--brand); outline-offset: -3px; }
.ta-faq-genres__label a:focus-visible { outline: 0; }
.ta-faq-genres__count {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.5;
}
.ta-faq-genres__summary {
  margin-top: 4px !important;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.7;
}

/* ===== 店舗カードのアイコン：CSS マスクで描く（ボタンの ::before が --ta-icon を使う） ===== */
.ta-icon-btn--tel {
  --ta-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.8' stroke-linecap='round'%3E%3Crect x='6.5' y='2' width='11' height='20' rx='2'/%3E%3Cline x1='10.5' y1='18.6' x2='13.5' y2='18.6'/%3E%3C/svg%3E");
}
.ta-icon-btn--map {
  --ta-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.8' stroke-linejoin='round'%3E%3Cpath d='M12 21.5c4.2-4.6 6.4-7.9 6.4-10.6A6.4 6.4 0 0 0 5.6 10.9c0 2.7 2.2 6 6.4 10.6Z'/%3E%3Ccircle cx='12' cy='10.6' r='2.3'/%3E%3C/svg%3E");
}

/* 画面が狭いときはアイブロウの実寸を詰める。5rem のままだと SIMULATION などの
   長い英字がビューポートを超えて切れるため。末尾に置いて :not() 付きの指定にも効かせる。 */
@media (max-width: 781px) {
  .ta-section-title__en,
  .ta-section-title__en:not(.has-lg-font-size):not(.has-xs-font-size) {
    font-size: clamp(2.25rem, 10vw, 5rem);
  }
}

/* カード内の文字はサイト全体で 15px にそろえる。
   見出し・電話番号・価格・番号バッジなど、大きさで役割を示す要素は対象外。商品カードは独自の文字サイズを保つため対象外。
   ブロックの文字サイズ指定（has-*-font-size は !important）より優先させるため !important を付ける。 */
:is(.ta-card, .ta-merit-card, .ta-pickup-card, .ta-work-card, .ta-sim-card, .ta-store-menu__card, .ta-supported-card, .ta-ng-card, .ta-category-card)
  :is(p, li, dt, dd, th, td):not(.ta-product-card *, .ta-tel, .ta-step-no, .ta-work-step, .ta-pricetag__lead, .ta-pricetag__price, .ta-sim-card__total, .ta-sim-card__badge, .ta-section-title__en, [class*="__title"], [class*="-font-size"]:not(.has-xs-font-size, .has-sm-font-size, .has-base-font-size, .has-md-font-size)) {
  font-size: 15px !important;
}

/* ===== タイヤご購入キャンペーン（/tire-wheel/tire-purchase/）：特典カードは本文幅いっぱいにせず中央に ===== */
.ta-section-box > .ta-purchase-offer { max-width: 560px !important; margin: var(--wp--preset--spacing--40) auto !important; text-align: center; }
.ta-purchase-offer .ta-pricetag__lead { align-self: center; }

/* ===== ページャー（一覧のページ送り）と、記事ページの前後リンク ===== */
.wp-block-query-pagination { gap: 8px !important; margin-top: var(--wp--preset--spacing--50); }
.wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next),
.wp-block-post-navigation-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0 var(--ta-space-12);
  box-sizing: border-box;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--ink);
  font-family: var(--ta-font-condensed);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next),
.wp-block-post-navigation-link a { font-family: inherit; padding: 0 var(--ta-space-24); }
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover,
.wp-block-post-navigation-link a:hover { border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand); }
.wp-block-query-pagination .page-numbers.current {
  border-color: var(--wp--preset--color--brand);
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
}
.wp-block-query-pagination .page-numbers.dots { min-width: auto; padding: 0 4px; border-color: transparent; background: transparent; }
/* 前へ・次へは矢印をコアの記号ではなく罫線で描く */
.wp-block-query-pagination :is(.wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow) { display: none; }
.wp-block-query-pagination-previous::before,
.wp-block-query-pagination-next::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}
.wp-block-query-pagination-previous::before { transform: rotate(-135deg); }
.wp-block-query-pagination-next::after { transform: rotate(45deg); }
@media (max-width: 599px) {
  .wp-block-query-pagination .page-numbers { min-width: 40px; height: 40px; }
  /* 前へ・次へは文字を隠して矢印だけの四角にし、1行に収める */
  .wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) { width: 40px; height: 40px; padding: 0; font-size: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-query-pagination .page-numbers,
  .wp-block-post-navigation-link a { transition: none; }
}

/* ===== スマホ（599px 以下）：見やすさは保ったまま余白を詰め、縦スクロールを短くする =====
   余白はブロックの設定もテーマの CSS も spacing プリセットと --ta-space-* を参照しているので、その値をまとめて小さくする。
   セクションの左右 spacing-50（36px）とカード内側 spacing-40（24px）が重なって文章が画面端から遠かったのも、これで詰まる。
   html:root にしているのは、WordPress が出力する :root のプリセット定義より優先させるため。 */
@media (max-width: 599px) {
  html:root {
    --ta-space-36: 24px;
    --ta-space-48: 32px;
    --wp--preset--spacing--40: 16px;
    --wp--preset--spacing--50: 16px;
    --wp--preset--spacing--60: 32px;
    --wp--preset--spacing--70: 32px;
    --wp--preset--spacing--80: 40px;
  }

  /* 2列の表（項目｜内容）は、項目の下に内容を置く縦並びにする */
  main table:not(:has(tr > :nth-child(3))),
  main table:not(:has(tr > :nth-child(3))) :is(thead, tbody, tfoot, tr, th, td) { display: block; width: 100% !important; box-sizing: border-box; }
  main table:not(:has(tr > :nth-child(3))) tr + tr :is(th, td):first-child { border-top: 0; }
  main table:not(:has(tr > :nth-child(3))) :is(th, td) + :is(th, td) { border-top: 0; }
  main table:not(:has(tr > :nth-child(3))) td { text-align: left !important; white-space: normal !important; }
  main table:not(:has(tr > :nth-child(3))) :is(th, td) { padding: 8px var(--ta-space-12) !important; }
  /* 3列以上の表は縦並びにすると比べにくいので、余白と文字を小さくして横に収める */
  main table:has(tr > :nth-child(3)) { font-size: 13px !important; }
  main table:has(tr > :nth-child(3)) :is(th, td) { padding: 8px 6px !important; }
  /* 項目名と金額は途中で折り返さない（説明文の入るセル＝colspan は折り返す） */
  main table:has(tr > :nth-child(3)) tr:not(:has([colspan])) :is(th, td) { white-space: nowrap; }

  /* フッター最下部：プライバシーポリシーの下、一番下にコピーライトを1行で */
  /* 店舗タブ：3つ目（千葉）だけが折り返して全幅になっていたので、1行目に葛飾本店を全幅、2行目に2店舗を並べる */
  .ta-store-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ta-store-tabs > .wp-block-button { width: auto; }
  .ta-store-tabs > .wp-block-button:first-child { grid-column: 1 / -1; }

  /* フッター：会社ロゴ・プライバシーポリシー・コピーライトは中央に */
  .ta-footer__logo { margin-inline: auto !important; text-align: center; }
  .ta-footer__logo img { display: block; margin-inline: auto; }
  .ta-footer__bottom { flex-direction: column-reverse; align-items: center !important; gap: var(--ta-space-12) !important; text-align: center; }
  .ta-footer__copyright { font-size: min(13px, 2.9vw) !important; white-space: nowrap; }

  /* 青い CTA：電話番号を大きく、カードの上下の余白を詰める */
  .ta-cta-banner .ta-card { gap: var(--ta-space-12); }
  .ta-cta-banner .ta-card > .ta-tel { font-size: clamp(2.25rem, 11vw, 2.75rem) !important; }
}