@charset "UTF-8";
/*
Template: arkhe
Theme Name: Arkhe Child
Theme URI: https://arkhe-theme.com/ja/
Description: Arkhe用子テーマ
Version: 1.0.0
Text Domain: arkhe
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
*/

.hc-site-header__inner .hc-site-header__cta{
  display:inline-grid;
}

.hc-home-network__stat-icon {
  width: 168px;
  height: 168px;
  padding: 10px;          /* この値を調整して角の見え方を整える */
  box-sizing: border-box;
  background: #fff;       /* 画像の白背景と同じ色 */
  border-radius: 24px;
  margin: 0;              /* figureのデフォルトmarginを消す */
}

.hc-home-network__stat-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* coverだと拡大されるのでcontainがおすすめ */
  display: block;
}

/* =========================================================
 * 0. デザイントークン (Figma準拠)
 *    Wireframe_HONDA_Published_0126_rs より抽出
 * ========================================================= */
:root {
  /* Color */
  --hc-red: #C8102E;
  --hc-red-dark: #B0102A;
  --hc-red-deep: #A40D24;
  --hc-text: #1A1A1A;
  --hc-text-light: #555;
  --hc-text-muted: #888;
  --hc-bg-light-blue: #EEF5FB;
  --hc-bg-soft-blue: #DFEBF7;
  --hc-bg-cream: #FFF8E1;
  --hc-bg-gray: #F5F5F5;
  --hc-bg-section: #FFFFFF;
  --hc-border: #DDD;
  --hc-border-light: #EAEAEA;
  --hc-mint: #C0E1FF;
  --hc-white: #FFFFFF;

  /* Type */
  /* 全フォント Noto Sans JP に統一 (sans/serif トークンとも同値) */
  --hc-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --hc-font-serif: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --hc-fz-h1: 52px;
  --hc-fz-h2: 35px;
  --hc-fz-h2-special: 50px;
  --hc-fz-h3: 20px;
  --hc-fz-body: 18px;
  --hc-fz-card-body: 16px;
  --hc-fz-btn-lg: 19px;
  --hc-fz-btn-sm: 17px;
  --hc-fz-header: 17px;
  --hc-fz-store-lg: 19px;
  --hc-fz-store-sm: 15px;
  --hc-fz-footer: 15px;
  --hc-fz-micro: 14px;
  --hc-lh-heading: 1.45;
  --hc-lh-body: 1.6;

  /* Layout */
  --hc-content-max: 1200px;     /* container content width */
  --hc-section-px: 120px;        /* side padding */
  --hc-section-py: 100px;        /* top/bottom padding */
  --hc-gutter: 24px;             /* grid gutter */
  --hc-card-width: 384px;        /* 4-col card */
  --hc-card-3col: 282px;         /* 3-col card */
  --hc-card-7col: 690px;         /* 7-col card */

  /* Spacing scale */
  --hc-sp-xxs: 8px;
  --hc-sp-xs: 24px;
  --hc-sp-s: 32px;
  --hc-sp-m: 40px;
  --hc-sp-l: 56px;
  --hc-sp-xl: 80px;
  --hc-sp-xxl: 104px;
  --hc-heading-gap: 16px;        /* heading → divider */

  /* Misc */
  --hc-radius-sm: 4px;
  --hc-radius: 8px;
  --hc-radius-lg: 16px;
  --hc-radius-pill: 999px;
  --hc-shadow-card: 0 2px 12px rgba(0,0,0,.06);
  --hc-shadow-card-hover: 0 12px 32px rgba(0,0,0,.12);
  --hc-divider-w: 48px;
  --hc-divider-h: 4px;
  --hc-ease: cubic-bezier(.2,.7,.3,1);
}

/* =========================================================
 * 0.5 Gutenberg ラッパー透過 + Web Font 取り込み
 * ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800&display=swap');

[class*="hc-"] > .wp-block-group__inner-container,
[class*="hc-"] > .wp-block-cover__inner-container {
  display: contents;
}

/* ============================================
 * WP の is-layout-constrained 子要素ルール上書き
 *   theme.json で contentSize を入れると、constrained layout の
 *   inner-container に対し WP が
 *     > :not(.alignfull):not(.alignwide) { max-width; margin:auto }
 *   を適用する。これは hc-* 配下の CSS Grid / Flex レイアウトで
 *   margin:auto が flex 子の整列を狂わせ、max-width が
 *   フル幅セクションの「上書きアウト」を壊す。
 *   親側の display:contents で inner-container は消えているため、
 *   ここでは「contents で透過された inner-container の直下要素」が
 *   実質 hc-* の直接の子になる。その層で WP の制約を打ち消す。
 * ============================================ */
[class*="hc-"] > .wp-block-group__inner-container.is-layout-constrained > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
[class*="hc-"] > .wp-block-cover__inner-container.is-layout-constrained > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* ただし最上位の <main> 直下に置かれた alignfull/alignwide でないコンテンツ
 * (= 普通のテンプレ全体ラッパ) は WP の constrained 設定で中央に寄せたい。
 * このため hc-* 配下のみ上記で打ち消し、最上位は WP デフォルト挙動を維持する。 */

/* ============================================
 * WP の is-layout-* ルール 包括的上書き (Y軸ズレ防止)
 *   WP は :where(.is-layout-flex) に対し既定で
 *     display:flex; flex-wrap:wrap; align-items:center; gap:var(--wp--style--block-gap)
 *   を適用する。`align-items:center` のせいで wp:columns 内のカードが
 *   垂直方向中央寄せになり、トップエッジが揃わない (右カードが下にずれる) 等の
 *   現象を引き起こす。
 *   また :where(.is-layout-constrained) > * + * が
 *   margin-block-start: var(--wp--style--block-gap) を子に自動付与し、
 *   2番目以降の子要素を意図しない位置に押し下げる。
 *
 *   hc-* 配下では子テーマ CSS が明示的にスペース管理しているので、
 *   WP の自動レイアウトは完全に打ち消す。
 * ============================================ */

/* ----- wp:columns の縦揃え -----
 *   WP の :where(.is-layout-flex) は align-items:center を既定で適用するため、
 *   wp:columns 内のカードが垂直中央寄せになり、左右カードのトップエッジが
 *   揃わない (高さ違いで Y軸ズレ) 現象を起こす。
 *   wp:columns は常に上端揃えに固定する。 */
.wp-block-columns.is-layout-flex {
  align-items: flex-start;
}

/* ----- WP の constrained layout 子オートマージン無効化 -----
 *   `:where(.is-layout-constrained) > *` に WP が
 *     max-width: var(--wp--style--global--content-size);
 *     margin-left: auto !important;
 *     margin-right: auto !important;
 *   を適用する。これは hc-* 内のカードや CSS-Grid 構造で、
 *   要素が意図せず中央寄せ・狭幅化される原因になる。
 *   wp:column 内および hc-* 直下の constrained では完全に打ち消す。 */
.wp-block-column.is-layout-constrained > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
[class*="hc-"].wp-block-column.is-layout-constrained > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ----- WP の `> * + *` 自動 margin-block-start 無効化 -----
 *   WP は constrained / flow / flex のいずれの layout でも 2番目以降の子要素に
 *   `margin-block-start: var(--wp--style--block-gap)` を自動付与する。
 *   特に横並び (is-layout-flex) では align-items:center と相まって
 *   「先頭要素だけ上にズレて見える」 / 後続要素が下方向にシフトされる症状を起こす。
 *   hc-* 配下では全ての layout で完全に打ち消し、間隔は子テーマ CSS の
 *   各 hc-* セレクタの margin / gap で明示的に制御する。 */
.wp-block-column.is-layout-constrained > * + *,
[class*="hc-"].is-layout-constrained > * + *,
[class*="hc-"].is-layout-flow > * + *,
[class*="hc-"].is-layout-flex > * + *,
[class*="hc-"] .wp-block-column.is-layout-constrained > * + *,
[class*="hc-"] > .wp-block-group__inner-container.is-layout-constrained > * + *,
[class*="hc-"] > .wp-block-cover__inner-container.is-layout-constrained > * + *,
/* hc-* の子孫として現れる全ての wp-block-group の中の * + * もリセット */
[class*="hc-"] .wp-block-group.is-layout-flex > * + *,
[class*="hc-"] .wp-block-group.is-layout-flow > * + *,
[class*="hc-"] .wp-block-group.is-layout-constrained > * + *,
[class*="hc-"] .wp-block-buttons.is-layout-flex > * + * {
  margin-block-start: 0;
}

/* ============================================
 * Arkhe テーマのスタックマージン無効化
 *   Arkhe は .wp-block-group__inner-container > :not(:first-child) に
 *   margin-top: 1rem を当てる。hc-* 配下では子テーマ CSS の
 *   margin/gap が間隔を制御するので、Arkhe の自動マージンは全て無効化。
 * ============================================ */
[class*="hc-"] > .wp-block-group__inner-container > *,
[class*="hc-"] > .wp-block-cover__inner-container > * {
  margin-top: 0 !important;
}

/* Arkhe テーマの既定タイポを上書き */
body {
  font-family: var(--hc-font-sans);
  font-size: var(--hc-fz-body);
  color: var(--hc-text);
  line-height: var(--hc-lh-body);
  overflow-x: hidden; /* 全幅セクション (width:100vw) のスクロールバー対策 */
}

/* ============================================
 * Arkhe テーマ内の固定ページコンテンツを全幅化
 *   Arkhe デフォルトの .l-content__body は max-width 1200px だが、
 *   トップページ等では各セクションを全幅で表示したい
 * ============================================ */
.home .l-content__body,
.page-template-default .l-content__body {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.home .l-content,
.page-template-default .l-content { padding-top: 0 !important; }

/* =========================================================
 * 1. アニメーション
 * ========================================================= */
@keyframes hc-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hc-zoom-in {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* IntersectionObserver で .is-in-view を付与（functions.php / inline script） */
.hc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--hc-ease), transform .9s var(--hc-ease);
}
.hc-reveal.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hc-reveal,
  .hc-reveal.is-in-view { transition: none; transform: none; opacity: 1; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================
 * 2. 共通: 見出し・ボタン・パンくず
 * ========================================================= */

/* 中央寄せ見出し + 赤い下線 48×4
 * 左右マージンを明示的に auto にして、親が full-width でも H2 が水平中央寄せされるようにする
 * (WP の :where(.is-layout-constrained) > * { margin: auto !important } に依存しないため) */
.hc-section-title {
  text-align: center;
  font-family: var(--hc-font-serif);
  font-weight: 700;
  font-size: var(--hc-fz-h2);
  line-height: var(--hc-lh-heading);
  margin: 0 auto var(--hc-sp-l) !important;
  max-width: var(--hc-content-max);
  position: relative;
  padding-bottom: calc(var(--hc-heading-gap) + var(--hc-divider-h));
  color: var(--hc-text);
}
.hc-section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--hc-divider-w);
  height: var(--hc-divider-h);
  background: var(--hc-red);
}

/* 左寄せ見出し (採用 仕事内容など) */

/* ページタイトル中央 */

/* ============ ボタン ============
 * 共通仕様: 高さ 56px、パディング 0 48px、半角 19px Medium
 * wp:button (二重構造) と <a> 単体の両対応
 * 二重枠線対策: wrapper(.wp-block-button) は背景/枠/影/パディングをすべてリセット
 * 装飾はすべて内側のリンク要素(.wp-block-button__link)に集約
 */
.wp-block-button.hc-btn-primary,
.wp-block-button.hc-btn-dark,
.wp-block-button.hc-store-card__button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
}

.hc-btn-primary,
.wp-block-button.hc-btn-primary > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 56px;
  background: var(--hc-red) !important;
  color: #fff !important;
  padding: 0 var(--hc-sp-m) !important;
  border-radius: var(--hc-radius-pill) !important;
  font-family: var(--hc-font-sans);
  font-size: var(--hc-fz-btn-lg);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border: none !important;
  box-shadow: none !important;
  transition: transform .25s var(--hc-ease), box-shadow .25s var(--hc-ease), opacity .25s;
}
a.hc-btn-primary:hover,
.wp-block-button.hc-btn-primary > .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(200,16,46,.35) !important;
  opacity: 1;
}
a.hc-btn-primary::after,
.wp-block-button.hc-btn-primary > .wp-block-button__link::after {
    content: url('http://hondacarsmienaka.gilgiltown.co.jp/making/wp-content/uploads/2026/06/Vector-9.png');
  font-weight: 700;
  transition: transform .25s var(--hc-ease);
}
a.hc-btn-primary:hover::after,
.wp-block-button.hc-btn-primary > .wp-block-button__link:hover::after { transform: translateX(4px); }

.hc-btn-dark,
.wp-block-button.hc-btn-dark > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 56px;
  background: #3B3B3B !important;
  color: #fff !important;
  padding: 0 var(--hc-sp-m) !important;
  border-radius: var(--hc-radius-pill) !important;
  font-family: var(--hc-font-sans);
  font-size: var(--hc-fz-btn-lg);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border: none !important;
  transition: transform .25s var(--hc-ease), background .25s;
}
.wp-block-button.hc-btn-dark { background: transparent; }
a.hc-btn-dark::after,
.wp-block-button.hc-btn-dark > .wp-block-button__link::after {
  transition: transform .25s var(--hc-ease);
}
a.hc-btn-dark:hover,
.wp-block-button.hc-btn-dark > .wp-block-button__link:hover {
  background: #1A1A1A !important;
  transform: translateY(-2px);
}
a.hc-btn-dark:hover::after,
.wp-block-button.hc-btn-dark > .wp-block-button__link:hover::after { transform: translateX(4px); }

/* テキストリンク + 円形矢印 */
.hc-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .75em;
  color: var(--hc-text);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--hc-fz-card-body);
  transition: gap .25s var(--hc-ease);
}
.hc-link-arrow::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: url("assets/icon-arrow-circle.svg") center / contain no-repeat;
  transition: transform .25s var(--hc-ease);
}
.hc-link-arrow:hover { gap: 1.1em; }
.hc-link-arrow:hover::after { transform: translateX(2px); }

/* コンテナ */

/* 画像プレースホルダー */

/* 戻るボタン */

/* =========================================================
 * 3. ヘッダー  (Figma 仕様: 高さ120px / 2段組)
 * ========================================================= */
.hc-site-header {
  background: #fff;
  border-bottom: 1px solid var(--hc-border-light);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow .25s;
}
.hc-site-header.is-stuck { box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.hc-site-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 48px;
}
.hc-site-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--hc-text);
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}
.hc-site-header__logo a {
  color: var(--hc-text);
  text-decoration: none;
}
.hc-site-header__logo-mark {
  height: 36px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.hc-site-header__shortcuts {
  display: flex;
  gap: 56px;
  justify-content: center;
}
.hc-site-header__shortcut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--hc-text);
  font-weight: 700;
  font-size: var(--hc-fz-header);
}
.hc-site-header__shortcut-icon {
position:relative;
	top:3px;
  color: var(--hc-red);
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.hc-site-header__cta {
  background: var(--hc-red);
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .25s;
}
.hc-site-header__cta:hover { opacity: .9; }
.hc-site-header__cta strong {
  display: block;
  font-size: 14px;
  white-space: nowrap;
}
.hc-site-nav {
  border-top: 1px solid var(--hc-border-light);
  background: #fff;
}
.hc-site-nav__list {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  height: 44px;
}
.hc-site-nav__list li { padding: 0; margin: 0; }
.hc-site-nav__list a {
  color: var(--hc-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
}
.hc-site-nav__list a:hover { color: var(--hc-red); }
/* 当該ページ (現在表示中/その子孫) のメニュー項目は赤字 */
.hc-site-nav__list .hc-site-nav__item.is-current > .hc-site-nav__link { color: var(--hc-red); }
.hc-site-nav__list .has-submenu > .hc-site-nav__link::after {
  content: url('http://hondacarsmienaka.gilgiltown.co.jp/making/wp-content/uploads/2026/06/Vector-1.png');
  color: var(--hc-red);
  font-size: .85em;
  transition: transform .25s var(--hc-ease);
}

/* ============ メガメニュー ============
 * 親 <li> ホバー or キーボードフォーカスで滑らかにフェード+スライドダウン
 */
.hc-site-nav__item { position: static; }  /* full-width パネル基準を nav にする */
.hc-site-nav { position: relative; }

.hc-submenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  border-top: 1px solid var(--hc-border-light);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  pointer-events: none;
  /* 閉じる際: 200ms の遅延を設けてマウスがパネルへ移動する猶予を作る */
  transition:
    opacity .28s var(--hc-ease) .2s,
    transform .28s var(--hc-ease) .2s,
    visibility 0s linear .48s;
  z-index: 90;
}
/* マウスがナビ項目とパネルの間を移動する際に hover を維持するための透過ブリッジ */
.hc-submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 12px;
  background: transparent;
}
.has-submenu:hover > .hc-submenu,
.has-submenu:focus-within > .hc-submenu,
.has-submenu.is-open > .hc-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  /* 開く時は即座に */
  transition:
    opacity .28s var(--hc-ease) 0s,
    transform .28s var(--hc-ease) 0s,
    visibility 0s linear 0s;
}

.hc-submenu__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 32px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
}
.hc-submenu__img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--hc-radius);
}
.hc-submenu__body { padding-top: 8px; }
.hc-submenu__title {
  font-family: var(--hc-font-sans);
  color: var(--hc-red);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 24px;
  line-height: 1.4;
}
.hc-submenu__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hc-submenu__list--cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 32px;
}
.hc-submenu__list li {
  margin: 0;
  padding: 0;
}
.hc-submenu__list a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: var(--hc-text);
  text-decoration: none;
  font-size: var(--hc-fz-card-body);
  font-weight: 500;
  transition: color .2s, gap .25s var(--hc-ease);
}
/* サブメニューの矢印は全て画像(赤丸+白矢印SVG)で統一。
 * --cols / 単列（安心ネットワークシステム等）どちらも同じアイコンになる。 */
.hc-submenu__list a::after {
  content: "";
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: url("assets/icon-arrow-circle.svg") center / contain no-repeat;
  transition: transform .25s var(--hc-ease);
}
.hc-submenu__list a:hover {
  color: var(--hc-red);
  gap: 16px;
}
.hc-submenu__list a:hover::after {
  transform: translateX(2px) scale(1.08);
}

@media (max-width: 900px) {
  .hc-submenu__inner { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .hc-submenu__img { max-width: 280px; }
  .hc-submenu__list--cols { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
 * SP (767px以下): ハンバーガー + ドロワーメニュー
 * ============================================ */
.hc-site-nav__toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 105;
}
.hc-site-nav__toggle span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--hc-text);
  border-radius: 2px;
  transition: transform .3s var(--hc-ease), top .25s var(--hc-ease), opacity .2s;
}
.hc-site-nav__toggle span:nth-child(1) { top: 14px; }
.hc-site-nav__toggle span:nth-child(2) { top: 21px; }
.hc-site-nav__toggle span:nth-child(3) { top: 28px; }

.hc-is-menu-open .hc-site-nav__toggle span { background: var(--hc-text); }
.hc-is-menu-open .hc-site-nav__toggle span:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}
.hc-is-menu-open .hc-site-nav__toggle span:nth-child(2) {
  opacity: 0;
}
.hc-is-menu-open .hc-site-nav__toggle span:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

@media (max-width: 767px) {
  .hc-site-header__inner {
    grid-template-columns: 1fr auto auto;
    height: 64px;
    padding: 0 16px;
    gap: 12px;
    align-items: center;
  }
  .hc-site-header__shortcuts { display: none; }
  .hc-site-header__cta {
    font-size: 11px;
    padding: 6px 14px;
  }
  .hc-site-header__cta strong { font-size: 12px; }
  .hc-site-header__logo { font-size: 15px; gap: 8px; }
  .hc-site-header__logo-mark { height: 28px; width: auto; }

  .hc-site-nav__toggle { display: block; }

  /* ナビ自体は固定オーバーレイ化 */
  .hc-site-nav {
    position: fixed;
    inset: 64px 0 0 0;
    top: 64px;
    background: #fff;
    border-top: 1px solid var(--hc-border-light);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .35s var(--hc-ease);
    z-index: 95;
    padding: 0;
    pointer-events: none;
  }
  .hc-is-menu-open .hc-site-nav {
    transform: translateX(0);
    pointer-events: auto;
  }
  .hc-is-menu-open { overflow: hidden; }

  .hc-site-nav__list {
    display: block;
    flex-direction: column;
    height: auto;
    padding: 0;
    margin: 0;
  }
  .hc-site-nav__item {
    border-bottom: 1px solid var(--hc-border-light);
    width: 100%;
  }
  .hc-site-nav__link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px !important;
    width: 100%;
    font-size: 16px;
  }
  .hc-site-nav__list .has-submenu > .hc-site-nav__link::after {
    content: "＋";
    color: var(--hc-red);
    font-size: 1.1em;
    font-weight: 700;
    transition: transform .25s var(--hc-ease);
  }
  .hc-site-nav__list .has-submenu.is-open > .hc-site-nav__link::after,
  .hc-site-nav__list .has-submenu:focus-within > .hc-site-nav__link::after {
    content: "－";
    transform: none;
  }

  /* サブメニューは静的に開閉 (max-height アニメーション) */
  .hc-submenu {
    position: static;
    background: var(--hc-bg-light-blue);
    box-shadow: none;
    border-top: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--hc-ease);
  }
  .hc-submenu::before { display: none; }
  .has-submenu.is-open > .hc-submenu,
  .has-submenu:focus-within > .hc-submenu {
    max-height: 800px;
  }
  /* ホバーでの開閉はSPでは無効化 */
  .has-submenu:hover > .hc-submenu { max-height: 0; }
  .has-submenu.is-open:hover > .hc-submenu { max-height: 800px; }
  .hc-submenu__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 24px 24px;
  }
  .hc-submenu__img { display: none; }
  .hc-submenu__title { font-size: 16px; margin-bottom: 12px; }
  .hc-submenu__list--cols { grid-template-columns: 1fr; }
  .hc-submenu__list a {
    padding: 12px 0;
    font-size: 15px;
  }
}

/* =========================================================
 * 4. フッター
 * ========================================================= */
.hc-site-footer {
  background: var(--hc-red);
  color: #fff;
  padding: 80px var(--hc-section-px) 32px;
  margin-top: 100px;
  font-family: var(--hc-font-sans);
}
.hc-site-footer__inner {
  max-width: var(--hc-content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
  gap: var(--hc-gutter);
}
.hc-site-footer a {
  color: #fff;
  text-decoration: none;
  font-size: var(--hc-fz-footer);
  line-height: 26px;
  transition: opacity .2s;
}
.hc-site-footer a:hover { opacity: .75; }
.hc-site-footer__col ul,
.hc-site-footer .wp-block-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
}
.hc-site-footer__col ul li,
.hc-site-footer .wp-block-list li {
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
  font-size: var(--hc-fz-footer);
  line-height: 26px;
}
.hc-site-footer__col h3,
.hc-site-footer__col > a {
  font-weight: 700;
  margin: 0 0 8px;
  font-size: var(--hc-fz-footer);
  line-height: 26px;
  color: #fff;
}
.hc-site-footer__col h3 a { color: #fff; text-decoration: none; }
.hc-site-footer__col ul ul { padding-left: 12px !important; margin-top: 4px !important; }
.hc-site-footer__brand {
  text-align: left;
  font-family: var(--hc-font-serif);
}
.hc-site-footer__brand > .wp-block-group__inner-container > p:first-child,
.hc-site-footer__brand p:first-child {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.4;
}
.hc-site-footer__brand p {
  font-family: var(--hc-font-sans);
  font-size: var(--hc-fz-footer);
  line-height: 26px;
  margin-top: 16px;
}
.hc-site-footer__bottom {
  max-width: var(--hc-content-max);
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.25);
  font-size: 13px;
}

/* =========================================================
 * 4.5 ページトップへ戻るボタン (Figma フッター上端 右寄せ)
 * ========================================================= */
.hc-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s var(--hc-ease), transform .25s var(--hc-ease), visibility .25s;
  z-index: 90;
}
.hc-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hc-back-to-top:hover {
  transform: translateY(-2px);
}
/* SVG自体が赤丸+白矢印なので、ボタンいっぱいに表示する */
.hc-back-to-top img {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 700px) {
  .hc-back-to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}

@media (max-width: 900px) {
  .hc-site-footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hc-site-footer__inner { grid-template-columns: 1fr; }
}




/* =========================================================
 * 6. ホーム  支える / 安心ネットワーク セクション
 * ========================================================= */
.hc-home-intro {
  text-align: center;
  padding: var(--hc-section-py) var(--hc-section-px) 40px;
  max-width: calc(var(--hc-content-max) + var(--hc-section-px) * 2);
  margin: 0 auto;
}
.hc-home-intro p {
  color: var(--hc-text);
  font-size: var(--hc-fz-body);
  line-height: 1.85;
}
.hc-home-network__title {
  font-family: var(--hc-font-serif);
  text-align: center;
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  line-height: var(--hc-lh-heading);
  margin: 12px auto 56px !important;
  max-width: var(--hc-content-max);
  position: relative;
  padding-bottom: calc(var(--hc-heading-gap) + var(--hc-divider-h));
}
.hc-home-network__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--hc-divider-w);
  height: var(--hc-divider-h);
  background: var(--hc-red);
}
.hc-home-network__stats {
  display: grid !important;
  grid-template-columns: repeat(2, 384px);
  gap: var(--hc-gutter);
  max-width: 792px;
  margin: 0 auto 56px;
  justify-content: center;
  align-items: stretch;
}
.hc-home-network__stat {
  text-align: center;
  background: transparent;
  padding: 16px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* スタッツアイコン: Figma準拠 - 直接アイコン表示 (白円コンテナなし) */



.hc-home-network__stat p:not(.hc-home-network__stat-icon) {
  font-size: var(--hc-fz-body);
  line-height: 1.8;
  color: var(--hc-text);
  margin: 0;
  font-weight: 400;
}
.hc-home-network__footer {
  text-align: center;
}
.hc-home-network__footer p {
  color: var(--hc-text);
  font-size: var(--hc-fz-body);
  line-height: 1.85;
  margin: 0 auto 40px;
  max-width: 800px;
}

/* =========================================================
 * 7. 店舗カード (Figma: 384px × 455px / 3列 / 24pxギャップ)
 * ========================================================= */
.hc-home-stores {
  padding: var(--hc-section-py) var(--hc-section-px) !important;
  max-width: calc(var(--hc-content-max) + var(--hc-section-px) * 2);
  margin: 0 auto;
}
.hc-store-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hc-gutter);
  max-width: var(--hc-content-max);
  margin: 0 auto;
  align-items: start;
}
.hc-store-card {
  background: #fff;
  border-radius: var(--hc-radius-lg);
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  box-shadow: var(--hc-shadow-card);
  transition: transform .35s var(--hc-ease), box-shadow .35s var(--hc-ease);
}
.hc-store-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hc-shadow-card-hover);
}
/* カード画像プレースホルダー (wp:cover ブロック使用)
 *   - 編集画面で「置換」から画像アップロード可能
 *   - 画像未設定時は CSS で塗ったグレー背景を見せる
 *   - WP が出力するインライン `aspect-ratio: unset;` を !important で上書き
 *   - WP の dim オーバーレイ (<span>) は dim-0 で透明なので、CSS で
 *     カバー本体に背景色を当てて空状態でも色を確保
 */
.hc-store-card__img.wp-block-cover{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 0;
  aspect-ratio: 384 / 240 !important;
  min-height: 0 !important;
  background-color: #EAEAEA !important;
}
.hc-store-card__img.wp-block-cover {
  aspect-ratio: 384 / 220 !important;
  min-height: 0 !important;
  background-color: #DDDDDD !important;
}



/* Cover の内部要素 (背景span + inner-container) は通常通り */
.hc-store-card__img > .wp-block-cover__inner-container{
  display: none; /* 空のinner-container は不要 */
}
.hc-recruit-job-card img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.hc-store-card__body {
  padding: 20px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
	position:relative;
}
.hc-store-card__title {
  font-weight: 700;
  font-size: var(--hc-fz-store-lg);
  line-height: 1.4;
  margin: 0 0 12px !important;
}
.hc-store-card__icons {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin: 0 0 16px !important;
}
.hc-store-card__icons > p { margin: 0; }
/* 設備アイコン: 5種類のサービスを5色で表現 (車椅子=青 / おもてなし=橙 / AED=赤 / 駐車場=緑 / トイレ=紫)
 * wp:image (<figure>) ブロックで配置し、内部の <img> は白塗りSVG。
 * 編集画面では各アイコンの「置換」から店舗ごとに画像差し替え可能。 */
.hc-store-card__icon {
  width: 32px !important;
  height: 32px;
  border-radius: 8px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--hc-red);
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
}
.hc-store-card__icon img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}
/* 背景色はアイコンの並び順ではなく中身(SVG種別)で決定する。
 * これにより AED が2番目に来ても色が入れ替わらない。
 * 店舗ごとに画像を「置換」した場合はalt属性でも判定できるよう両対応。 */
/* src はバンドルSVG／アップロード済みPNG（出入口段差解消-1.png 等）の両方に対応。
 * 駐車場の画像名 "車椅子専用駐車場" は "車椅子"(青) を含むため、
 * 緑のルールを青より後に置き、重複時は緑（駐車場）が勝つようにしている。 */
.hc-store-card__icon:has(img[src*="icon-wheelchair"]),
.hc-store-card__icon:has(img[src*="出入口段差解消"]),
.hc-store-card__icon:has(img[alt*="段差"])     { background: #5294E0; }   /* 車椅子 (青) */
.hc-store-card__icon:has(img[src*="icon-hospitality"]),
.hc-store-card__icon:has(img[src*="キッズコーナー"]),
.hc-store-card__icon:has(img[alt*="おもてなし"]),
.hc-store-card__icon:has(img[alt*="キッズ"])   { background: #F08334; }   /* おもてなし (橙) */
.hc-store-card__icon:has(img[src*="icon-aed"]),
.hc-store-card__icon:has(img[src*="AED"]),
.hc-store-card__icon:has(img[alt*="AED"])      { background: #E73E5C; }   /* AED (赤) */
.hc-store-card__icon:has(img[src*="icon-parking"]),
.hc-store-card__icon:has(img[src*="車椅子専用駐車場"]),
.hc-store-card__icon:has(img[alt*="駐車場"])   { background: #6CC18E; }   /* 駐車場 (緑) */
.hc-store-card__icon:has(img[src*="icon-wc"]),
.hc-store-card__icon:has(img[src*="リアフリートイレ"]),
.hc-store-card__icon:has(img[alt*="トイレ"]),
.hc-store-card__icon:has(img[alt*="W.C"])      { background: #A77ED7; }   /* W.C (紫) */
.hc-store-card__info {
  font-size: var(--hc-fz-store-sm);
  line-height: 1.7;
  color:#000;
  margin: 0 0 24px;
  flex: 1;
}
.hc-store-card__button,
.wp-block-button.hc-store-card__button > .wp-block-button__link {
  display: block !important;
  text-align: center;
  min-height: 44px;
  padding: 10px 16px !important;
  border: 3px solid var(--hc-red) !important;
  color: var(--hc-red) !important;
  background: #fff !important;
  border-radius: var(--hc-radius-pill) !important;
  text-decoration: none;
  font-weight: 500;
  font-size: var(--hc-fz-btn-sm);
  font-family: var(--hc-font-sans);
  line-height: 1.4 !important;
  transition: background .25s, color .25s;
}
.wp-block-button.hc-store-card__button { background: transparent; }
.hc-store-card__button:hover,
.wp-block-button.hc-store-card__button > .wp-block-button__link:hover {
  background: var(--hc-red) !important;
  color: #fff !important;
}

/* =========================================================
 * 8. 新車・試乗車情報
 * ========================================================= */
.hc-home-cars {
  padding: var(--hc-section-py) var(--hc-section-px) !important;
  max-width: calc(var(--hc-content-max) + var(--hc-section-px) * 2);
  margin: 0 auto;
}
.hc-car-card {
  text-align: center;
  transition: transform .35s var(--hc-ease);
}
.hc-car-card:hover { transform: translateY(-4px); }

/* =========================================================
 * 9. お知らせ
 * ========================================================= */
.topo-shirase .p-postList__category{
	color:white;
	background-color:#DE1D2F;
	padding:10px 20px 10px 20px;
	margin:0px 15px 20px 15px!important;
}

.topo-shirase .p-postList__category svg{
	display:none;
}

.hc-home-news-wrap {
  padding: var(--hc-section-py) var(--hc-section-px) !important;
  max-width: calc(var(--hc-content-max) + var(--hc-section-px) * 2);
  margin: 0 auto;
}
.hc-news {
  display: grid !important;
  grid-template-columns: 384px 1fr;
  gap: 126px;
  max-width: var(--hc-content-max);
  margin: 0 auto;
}
.hc-news__head h2 {
  font-family: var(--hc-font-serif);
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  line-height: var(--hc-lh-heading);
  margin: 0 0 24px;
  position: relative;
  padding-bottom: 20px;
}
.hc-news__head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--hc-divider-w);
  height: var(--hc-divider-h);
  background: var(--hc-red);
}
.hc-news__head p {
  font-size: var(--hc-fz-body);
  color: var(--hc-text-light);
  margin: 0 0 32px;
}
.hc-news__categories {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 250px;
  margin: 0 !important;
}
.hc-news__item {
  display: grid !important;
  grid-template-columns: auto auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "date badge . arrow"
    "title title title arrow";
  column-gap: 16px;
  row-gap: 12px;
  align-items: center;
  padding: 24px 0 !important;
  border-bottom: 1px solid var(--hc-border-light);
  transition: background .2s;
}
.hc-news__item:first-child {
  border-top: 1px solid var(--hc-border-light);
}
.hc-news__item:hover { background: rgba(0,0,0,.015); }
.hc-news__item > p { margin: 0; }

/* =========================================================
 * 10. ブログカード
 * ========================================================= */
.hc-home-blog {
  padding: var(--hc-section-py) var(--hc-section-px) !important;
  max-width: calc(var(--hc-content-max) + var(--hc-section-px) * 2);
  margin: 0 auto;
}
.hc-blog-card {
  transition: transform .35s var(--hc-ease);
}
.hc-blog-card:hover { transform: translateY(-4px); }

@media (max-width: 1100px) {
  :root { --hc-section-px: 40px; }
  .hc-store-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .hc-news { grid-template-columns: 1fr; gap: 32px; }
  .hc-home-network__stats { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 700px) {
  :root {
    --hc-section-px: 24px;
    --hc-section-py: 56px;
    --hc-fz-h1: 36px;
    --hc-fz-h2: 26px;
    --hc-fz-h2-special: 36px;
    --hc-fz-body: 16px;
  }
  .hc-store-grid{ grid-template-columns: 1fr; }
  .hc-site-header__inner {
    grid-template-columns: auto auto;
    height: auto;
    padding: 12px 16px;
    gap: 16px;
  }
  .hc-site-header__shortcuts { display: none; }
  .hc-site-nav__list {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 16px;
    gap: 8px 16px;
  }
}

/* =========================================================
 * 11. 私たちについて (about) ページ
 * ========================================================= */
/* --- Philosophy hero --- */
.hc-about-hero {
  position: relative;
  min-height: 540px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

/* --- お客様の安心 statement --- */
.hc-about-intro {
  text-align: center;
  padding: var(--hc-section-py) var(--hc-section-px);
  max-width: 900px;
  margin: 0 auto;
}
.hc-about-intro__title {
  font-family: var(--hc-font-serif);
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  line-height: var(--hc-lh-heading);
  margin: 0 0 32px !important;
}
.hc-about-intro p {
  font-size: var(--hc-fz-body);
  line-height: 1.85;
  color: var(--hc-text);
}

/* --- 社長メッセージ preview --- */
.hc-about-message {
  display: grid !important;
  grid-template-columns: 486px 1fr;
  gap: 56px;
  align-items: center;
  max-width: var(--hc-content-max);
  margin-top:0;
  padding: 0 var(--hc-section-px) var(--hc-section-py);
}
.hc-about-message__photo {
  margin: 0 !important;
  border-radius: var(--hc-radius-lg);
  overflow: hidden;
  line-height: 0;
}
.hc-about-message__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hc-about-message__title {
  font-family: var(--hc-font-serif);
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 24px !important;
  line-height: 1.5;
  position: relative;
  padding-bottom: 20px;
}
.hc-about-message__title::after {
  content: "";
  display: block;
  width: var(--hc-divider-w);
  height: var(--hc-divider-h);
  background: var(--hc-red);
  position: absolute;
  left: 0;
  bottom: 0;
}
.hc-about-message__body {
  font-size: var(--hc-fz-body);
  line-height: 1.85;
  color: var(--hc-text);
  margin: 0 0 32px !important;
}

/* --- 沿革 timeline (alignfull, light blue) --- */
.hc-about-history {
  background: var(--hc-bg-light-blue);
  padding: var(--hc-section-py) var(--hc-section-px);
  margin: 0 !important;
}
.hc-about-history__head h2 {
  font-family: var(--hc-font-serif);
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  margin-bottom: 24px;
  line-height: var(--hc-lh-heading);
  position: relative;
  padding-bottom: 16px;
}
.hc-about-history__head h2::after {
  content: "";
  display: block;
  width: var(--hc-divider-w);
  height: var(--hc-divider-h);
  background: var(--hc-red);
  position: absolute;
  left: 0;
  bottom: 0;
}
.hc-about-history__head p {
  color: var(--hc-text-light);
  font-size: var(--hc-fz-body);
  line-height: 1.85;
}

.hc-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.hc-timeline__item {
  position: relative;
  padding: 0 0 32px 48px;
}
/* 赤リング (丸) */
.hc-timeline__item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--hc-red);
  z-index: 1;
}
/* 丸と丸をつなぐ線 (#000 実線) */
.hc-timeline__item::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 24px;
  bottom: -6px;
  width: 2px;
  background: #000;
}
/* 最後の項目: 丸から本文(最後のp要素)の下端まで実線を伸ばす。
 * (.hc-timeline の最後の子は「沿革を全て見る」<p> なので :last-child は不可。
 *  項目は div / リンクは p のため :last-of-type が最終項目に一致する) */
.hc-timeline__item:last-of-type {
  padding-bottom: 0;
}
.hc-timeline__item:last-of-type::after {
  top: 24px;
  bottom: 0;
}
/* その後、実線と同じ高さ分だけ破線テールを続ける。
 * 最終項目の直後にある「沿革を全て見る」リンク <p> に描画する。 */
.hc-timeline > .hc-site-nav__link {
  position: relative;
  margin-top: 0;
}
.hc-timeline > .hc-site-nav__link::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  height: 12rem;
  border-left: 2px dashed #000;
}
.hc-timeline__desc {
  margin: 0;
  font-size: var(--hc-fz-card-body);
  line-height: 1.7;
  color: var(--hc-text-light);
}

/* --- 地域貢献 preview (alignfull, white bg, arched top overlapping 沿革) --- */
.hc-about-region {
  background: #fff;
  border-radius: 50% 50% 0 0 / 100px 100px 0 0;
  padding: 80px var(--hc-section-px) var(--hc-section-py);
  margin-top: -100px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative;
  z-index: 2;
  max-width: none;
}
.hc-about-region__title {
  font-family: var(--hc-font-serif);
  text-align: center;
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  margin: 16px 0 24px !important;
  line-height: var(--hc-lh-heading);
  position: relative;
  padding-bottom: 16px;
}
.hc-about-region__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--hc-divider-w);
  height: var(--hc-divider-h);
  background: var(--hc-red);
}
.hc-about-region__caption {
  text-align: center;
  color: var(--hc-text);
  font-size: var(--hc-fz-body);
  line-height: 1.85;
  margin: 0 0 56px !important;
}
.hc-about-region__item {
  flex: 1;
  padding: 0 !important;
}
.hc-about-region__item h3 {
  font-size: var(--hc-fz-h3);
  font-weight: 700;
  margin: 16px 0 8px !important;
}
.hc-about-region__item p {
  font-size: var(--hc-fz-card-body);
  color: var(--hc-text-light);
  line-height: 1.7;
  margin: 0 !important;
}

/* =========================================================
 * 会社概要ページ (page-id-25)
 * ========================================================= */
.hc-company {
  padding: 70px var(--hc-section-px) var(--hc-section-py);
  max-width: calc(var(--hc-content-max) + var(--hc-section-px) * 2);
  margin: 0 auto;
}
.hc-company__title {
  font-size: 52px !important;
  font-weight: 700;
  line-height: 1.45;
  color: #1A1A1A;
  margin: 0 0 32px !important;
}
.hc-company__lead {
  font-size: 18px;
  line-height: 1.6;
  color: #1A1A1A;
  margin: 0 0 80px !important;
}

/* 会社概要表 */
.hc-info-table {
  max-width: 996px;
  margin: 0 auto !important;
  width: 100%;
  border: 1px solid #9095A0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #fff;
}
.hc-info-table table,
.hc-info-table > table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: none !important;
  margin: 0 !important;
  font-family: var(--hc-font-sans) !important;
  background: #fff !important;
  table-layout: fixed;
}
.hc-info-table tbody tr {
  border: none !important;
}
.hc-info-table th,
.hc-info-table td,
.hc-info-table tbody th,
.hc-info-table tbody td {
  padding: 18px 24px !important;
  border: none !important;
  border-bottom: 1px solid #959595 !important;
  text-align: left !important;
  vertical-align: middle !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-family: var(--hc-font-sans) !important;
}
.hc-info-table tbody tr:last-child th,
.hc-info-table tbody tr:last-child td {
  border-bottom: none !important;
}
.hc-info-table th {
  background: #535355 !important;
  color: #fff !important;
  font-weight: 500 !important;
  width: 282px !important;
  letter-spacing: .3px;
  border-right: 1px solid #959595 !important;
  padding: 18px 16px !important;
}
.hc-info-table td {
  background: #fff !important;
  color: #171A1F !important;
  font-weight: 400 !important;
}

@media (max-width: 900px) {
  .hc-about-message{ grid-template-columns: 1fr; }
  .hc-company {
    padding: 40px 20px 60px;
  }
  .hc-company__title { font-size: 28px !important; }
  .hc-company__lead { font-size: 15px; margin-bottom: 40px !important; }
  .hc-info-table table { table-layout: auto; }
  .hc-info-table th,
  .hc-info-table td {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    border-right: none !important;
  }
  .hc-info-table th {
    border-bottom: 1px solid #959595 !important;
  }
  .hc-info-table tbody tr:last-child th {
    border-bottom: 1px solid #959595 !important;
  }
}

/* =========================================================
 * 12. 沿革ページ
 * ========================================================= */
/* --- 沿革ページ (alignfull, light blue bg, タイムライン) --- */
.hc-history-page {
  background: var(--hc-bg-light-blue);
  padding: var(--hc-section-py) var(--hc-section-px);
  margin: 0 !important;
}
.hc-history-page__inner {
  max-width: var(--hc-content-max);
  margin: 0 auto;
}
.hc-history-page__timeline {
  position: relative;
}
/* 縦の赤い線 (col 1 と col 2 の境界 + 半分のあたり) */
.hc-history-page__timeline::before {
  content: "";
  position: absolute;
  left: 296px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--hc-red);
}
/* 各 行: 画像 (240px) | gap (32px) | dot col (24px) | gap (16px) | text (1fr) */
.hc-history-page__row {
  display: grid !important;
  grid-template-columns: 240px 56px 1fr;
  column-gap: 16px;
  align-items: center;
  padding: 14px 0;
  position: relative;
}
/* 画像 cell: figure (wp:image) */
.hc-history-page__photo {
  margin: 0 !important;
  aspect-ratio: 240 / 197;
  border-radius: 8px;
  overflow: hidden;
  grid-column: 1;
  line-height: 0;
}
.hc-history-page__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* text は常に col 3（descendant selector で inner-container 越し） */
.hc-history-page__row .hc-history-page__text {
  grid-column: 3;
}
/* ドット (CSS pseudo-element に統合) */
.hc-history-page__row::before {
  content: "";
  position: absolute;
  left: 287px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--hc-red);
  z-index: 1;
}
/* 画像付きの行: 大きい赤丸 */
.hc-history-page__row--image::before {
  left: 281px;
  width: 32px;
  height: 32px;
  background: var(--hc-red);
  border: 4px solid var(--hc-bg-light-blue);
}
.hc-history-page__date {
  font-weight: 700;
  font-size: var(--hc-fz-body);
  margin: 0 0 4px !important;
}
.hc-history-page__desc {
  margin: 0 !important;
  font-size: var(--hc-fz-card-body);
  color: var(--hc-text);
  line-height: 1.7;
}
.hc-history-page__link {
  margin-top: 40px !important;
}
.hc-history-page__link a {
  color: var(--hc-text);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hc-history-page__link a::after {
  content: "→";
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hc-red);
  color: #fff;
  text-align: center;
  font-size: 12px;
  line-height: 24px;
}

/* --- 下部ブログセクション --- */
.hc-history-blog {
  background: #fff;
  padding: var(--hc-section-py) var(--hc-section-px);
  margin: 0 !important;
}
.hc-history-blog__lead {
  text-align: center;
  font-size: var(--hc-fz-body);
  font-weight: 700;
  margin: 0 0 56px !important;
}
.hc-history-blog__cta {
  margin-top: 56px !important;
}
.hc-history-blog__cta .wp-block-button__link {
  background: #1A1A1A;
  color: #fff;
  padding: 16px 40px;
  border-radius: var(--hc-radius-pill);
  font-weight: 700;
}

@media (max-width: 800px) {
  .hc-history-page__timeline::before { left: 12px; }
  .hc-history-page__row {
    grid-template-columns: 40px 1fr;
    gap: 16px;
  }
  .hc-history-page__photo { display: none; }
  }

/* =========================================================
 * 13. 社長メッセージ
 * ========================================================= */
.hc-message {
  max-width: var(--hc-content-max);
  margin: var(--hc-section-py) auto;
  padding: 0 var(--hc-section-px);
}
.hc-message__top {
  display: grid !important;
  grid-template-columns: 480px 1fr;
  gap: 56px;
  margin-bottom: 56px;
  align-items: start;
}
.hc-message__title {
  font-family: var(--hc-font-serif);
  font-size: var(--hc-fz-h1);
  font-weight: 700;
  margin: 0 0 32px;
  line-height: var(--hc-lh-heading);
}
.hc-message > p,
.hc-message__intro p {
  font-size: var(--hc-fz-body);
  line-height: 1.95;
  margin: 0 0 24px;
  color: var(--hc-text);
}

@media (max-width: 800px) {
  .hc-message__top { grid-template-columns: 1fr; }
}

/* =========================================================
 * 14. 地域貢献
 * ========================================================= */
/* --- 地域貢献ページ (Figma 54640:2019) --- */
/* 上部タイトル：白bg + センター。padding-bottom を抑えて次セクションへタイトに繋ぐ */
.hc-community {
  text-align: center;
  padding: var(--hc-section-py) var(--hc-section-px) 20px;
  max-width: 900px;
  margin: 0 auto;
}
.hc-community__title {
  font-family: var(--hc-font-serif);
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  margin: 0 0 32px !important;
  line-height: var(--hc-lh-heading);
}
.hc-community__lead {
  color: var(--hc-text);
  font-size: var(--hc-fz-body);
  line-height: 1.85;
}
.hc-community-section__item {
  background: transparent;
}
.hc-community-section__item h3 {
  margin: 16px 0 8px !important;
  font-size: var(--hc-fz-h3);
  font-weight: 700;
}
.hc-community-section__item p {
  font-size: var(--hc-fz-card-body);
  color: var(--hc-text);
  line-height: 1.7;
  margin: 0 !important;
}
.hc-community-section__link {
  max-width: var(--hc-content-max);
  margin: 0 auto !important;
}
.hc-community-section__link a {
  color: var(--hc-text);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hc-community-section__link a::after {
  content: "→";
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hc-red);
  color: #fff;
  text-align: center;
  font-size: 12px;
  line-height: 24px;
}

/* ブログセクション：alignfull, 白bg */
.hc-community-blog {
  background: #fff;
  padding: var(--hc-section-py) var(--hc-section-px);
  margin: 0 !important;
}
.hc-community-blog__lead {
  text-align: center;
  font-weight: 700;
  font-size: var(--hc-fz-body);
  margin: 0 0 56px !important;
}
.hc-community-blog__cta {
  margin-top: 56px !important;
}
.hc-community-blog__cta .wp-block-button__link {
  background: #1A1A1A;
  color: #fff;
  padding: 16px 40px;
  border-radius: var(--hc-radius-pill);
  font-weight: 700;
}

/* =========================================================
 * 15. 採用情報 (page-id-17) — Figma 54640:1763
 * ========================================================= */

/* Arkhe既定の topArea/breadcrumb 非表示 */
body.page-id-17 .p-topArea,
body.page-id-17 #breadcrumb { display: none !important; }
body.page-id-17 .l-main__body > .c-postContent { margin-top: 0 !important; }
.hc-recruit-job-card {
  margin: 0 !important;
  background: #fff;
  border: 1px solid #959595;
  border-radius: 8px;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
}

/* =========================================================
 * 16. 採用情報・部門 (page-id-26 営業) — Figma 54640:1805
 * ========================================================= */

/* Arkhe既定の topArea/breadcrumb 非表示 */
body.page-id-26 .p-topArea,
body.page-id-26 #breadcrumb { display: none !important; }
body.page-id-26 .l-main__body > .c-postContent { margin-top: 0 !important; }

/* ---------- Breadcrumb ---------- */
.hc-dept-breadcrumb-section {
  background: #fff;
  padding: 32px var(--hc-section-px) 24px;
  margin: 0 !important;
}
.hc-dept-breadcrumb {
  max-width: var(--hc-content-max);
  margin: 0 auto !important;
  font-size: 14px;
  color: #555;
}
.hc-dept-breadcrumb a {
  color: #555;
  text-decoration: none;
}
.hc-dept-breadcrumb a:first-child { color: var(--hc-red); }
.hc-dept-breadcrumb a:hover { text-decoration: underline; }
.hc-dept-breadcrumb__sep {
  margin: 0 8px;
  color: #999;
}
.hc-dept-breadcrumb__current {
  color: #1A1A1A;
  font-weight: 500;
}
.hc-dept-job-card__desc {
  font-size: 16px;
  line-height: 1.7;
  color: #1A1A1A;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .hc-dept-breadcrumb-section { padding: 20px 20px 16px; }
}
.hc-job-section { margin-bottom: 56px; }
.hc-job-section h2 {
  font-family: var(--hc-font-serif);
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  margin: 0 0 24px;
  padding-bottom: 20px;
  position: relative;
}
.hc-job-section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--hc-divider-w);
  height: var(--hc-divider-h);
  background: var(--hc-red);
}
.hc-job-section p {
  line-height: 1.85;
  font-size: var(--hc-fz-body);
  color: var(--hc-text);
}

/* =========================================================
 * 18. 応募フォーム / CF7
 * ========================================================= */
.hc-form-wrap {
  background: var(--hc-bg-gray);
  padding: var(--hc-section-py) var(--hc-section-px);
}
.hc-form {
  background: #fff;
  max-width: 900px;
  margin: 0 auto;
  padding: 64px clamp(24px, 5vw, 80px);
  border-radius: var(--hc-radius-lg);
  box-shadow: var(--hc-shadow-card);
}
.hc-form__title {
  text-align: center;
  font-family: var(--hc-font-serif);
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  margin: 0 0 56px !important;
}
.hc-form .wpcf7-form > p {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: center;
  margin: 0 0 24px;
}
.hc-form .wpcf7-form input[type="text"],
.hc-form .wpcf7-form input[type="email"],
.hc-form .wpcf7-form input[type="date"] {
  width: 100%;
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-sm);
  padding: 14px 16px;
  font-size: var(--hc-fz-body);
  font-family: var(--hc-font-sans);
  transition: border-color .2s;
}
.hc-form .wpcf7-form input:focus {
  outline: none;
  border-color: var(--hc-red);
}
.hc-form .wpcf7-form input[type="submit"] {
  display: inline-block;
  background: var(--hc-red);
  color: #fff;
  border: none;
  padding: 16px 56px;
  border-radius: var(--hc-radius-pill);
  font-weight: 500;
  font-size: var(--hc-fz-btn-lg);
  cursor: pointer;
  margin: 24px auto 0;
  transition: opacity .2s, transform .2s;
}
.hc-form .wpcf7-form input[type="submit"]:hover {
  transform: translateY(-2px);
  opacity: .92;
}

@media (max-width: 700px) {
  .hc-form .wpcf7-form > p { grid-template-columns: 1fr; gap: 8px; }
}
.hc-store__title {
  font-family: var(--hc-font-serif);
  text-align: center;
  font-size: var(--hc-fz-h1);
  font-weight: 700;
  margin: 0 0 24px !important;
  line-height: var(--hc-lh-heading);
}
.hc-store__lead {
  text-align: center;
  color: var(--hc-text-light);
  font-size: var(--hc-fz-body);
  margin: 0 0 56px !important;
}
.hc-store__top {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 56px;
}
.hc-store__gallery-main {
  aspect-ratio: 16 / 9;
  background: var(--hc-bg-gray) center/cover no-repeat;
  margin-bottom: 12px;
  border-radius: 8px;
}
.hc-store-info { display: grid; gap: 16px; align-content: flex-start; }

@media (max-width: 800px) {
  .hc-store__top { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
 * 21. クルマ購入ナビ (page-id-19) — Figma 54640:1651
 * ========================================================= */

/* Arkhe既定の topArea/breadcrumb 非表示 */
body.page-id-19 .p-topArea,
body.page-id-19 #breadcrumb { display: none !important; }
body.page-id-19 .l-main__body > .c-postContent { margin-top: 0 !important; }

/* ---------- Section base ---------- */
.hc-buy-section {
  padding: 100px var(--hc-section-px);
  margin: 0 !important;
  background: #fff;
}
.hc-buy-section__caption {
  text-align: center;
  font-size: 16px;
  color: var(--hc-text);
  line-height: 1.85;
  margin: 32px auto 56px !important;
  max-width: 1000px;
}
.hc-buy-section__cta { margin-top: 56px !important; }

/* ---------- Section 1: 購入相談 ---------- */
.hc-buy-section--consultation .hc-buy-section__caption{
  /* Section 1 uses left-aligned heading/caption inside the left column */
}
.hc-buy-consultation {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 32px !important;
  margin: 0 auto !important;
  max-width: var(--hc-content-max);
}
.hc-buy-consultation__left {
  width: 384px;
  flex-shrink: 0;
  margin: 0 !important;
}
.hc-buy-consultation__left .hc-buy-section__heading {
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
}
.hc-buy-consultation__left .hc-buy-section__caption {
  text-align: left !important;
  margin: 0 0 56px !important;
  font-size: 14px;
  line-height: 1.85;
}
.hc-buy-consultation__img {
  width: 378px;
  margin: 0 !important;
  border-radius: 8px;
  overflow: hidden;
}
.hc-buy-consultation__img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 378 / 450;
  object-fit: cover;
}
.hc-buy-consultation__right {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
}
.hc-buy-cards {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 25px;
  margin: 0 !important;
}
.hc-buy-card {
  background: #fff;
  border: 1px solid #959595;
  border-radius: 8px;
  padding: 16px 24px 32px 16px;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hc-buy-card__img {
  margin: 0 auto !important;
  width: 160px;
  height: 117px;
  display: block;
  padding: 8px 0 16px;
}
.hc-buy-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hc-buy-card__title {
  font-size: 20px !important;
  font-weight: 700;
  color: var(--hc-red) !important;
  margin: 0 0 4px !important;
  line-height: 1.8;
  text-align: center;
}
.hc-buy-card__body {
  font-size: 16px;
  line-height: 1.6;
  color: #1A1A1A;
  margin: 0 0 16px !important;
  flex: 1;
}
.hc-buy-card__link {
  text-align: right;
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.7;
}
.hc-buy-card__link a {
  color: #1A1A1A;
  text-decoration: none;
}
.hc-buy-card__link a::after {
  content: url('http://hondacarsmienaka.gilgiltown.co.jp/making/wp-content/uploads/2026/06/Variant3.png');
  margin-left: 4px;

}
.hc-buy-card__link a:hover { text-decoration: underline; }
.hc-buy-section--consultation .hc-buy-section__cta {
  margin: 32px 0 0 !important;
  justify-content: flex-end !important;
}
.hc-buy-section--consultation .hc-buy-section__cta .wp-block-button {
  width: 100%;
}

/* オススメ記事 — full-width yellow card with red badge top-left */
.hc-buy-article {
  background: #FFF7E0;
  border-radius: 8px;
  padding: 0;
  position: relative;
  overflow: hidden;
	width:80%;
}
.hc-buy-article__badge {
  background: var(--hc-red) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700;
  padding: 8px 24px !important;
  display: inline-block;
  margin: 0 !important;
  border-radius: 8px 0 8px 0;
}
.hc-buy-article__body {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 30px !important;
  margin: 0 !important;
  padding:30px;
}
.hc-buy-article__img {
  width: 186px;
  flex-shrink: 0;
  margin: 0 !important;
  border-radius: 8px;
  overflow: hidden;
}
.hc-buy-article__img img {
  width: 100%;
  height: 195px;
  object-fit: cover;
  display: block;
}
.hc-buy-article__text { flex: 1; margin: 0 !important; }
.hc-buy-article__title {
  font-size: 21px !important;
  font-weight: 700;
  margin: 0 0 24px !important;
  line-height: 1.4;
}
.hc-buy-article__excerpt {
  font-size: 14px;
  line-height: 1.7;
  color: #1A1A1A;
  margin: 0 0 24px !important;
}

/* ---------- Section 3: 保険 ---------- */
.hc-buy-insurance-cards {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0 auto !important;
  max-width: var(--hc-content-max);
}
.hc-buy-insurance-card {
  margin: 0 !important;
  background: #fff;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  overflow: hidden;
}
.hc-buy-insurance-card__img {
  margin: 0 !important;
  background: #FFF7E0;
  aspect-ratio: 282 / 166;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hc-buy-insurance-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hc-buy-insurance-card__body {
  padding: 16px;
  margin: 0 !important;
}
.hc-buy-insurance-card__title {
  font-size: 18px !important;
  font-weight: 700;
  margin: 0 0 8px !important;
  color: #1A1A1A;
  line-height: 1.4;
}
.hc-buy-insurance-card__text {
  font-size: 14px;
  line-height: 1.7;
  color: #1A1A1A;
  margin: 0 !important;
}
.hc-buy-faq__title {
  font-family: var(--hc-font-serif);
  font-size: 36px !important;
  font-weight: 700;
  margin: 0 !important;
  line-height: 1.45;
  color: var(--hc-text);
}
.hc-buy-faq__item { margin: 0 0 32px !important; }
.hc-buy-faq__q {
  font-weight: 700;
  font-size: 16px;
  color: #1A1A1A;
  margin: 0 0 8px !important;
  line-height: 1.55;
}
.hc-buy-faq__a {
  font-size: 14px;
  color: #1A1A1A;
  line-height: 1.8;
  margin: 0 !important;
}

/* ---------- Section 5: 勧誘方針 ---------- */


/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .hc-buy-section { padding: 60px 20px; }
  .hc-buy-section__caption { font-size: 14px; }
  .hc-buy-consultation { flex-wrap: wrap !important; gap: 24px !important; }
  .hc-buy-consultation__img { width: 100%; max-width: 400px; margin: 0 auto !important; }
  .hc-buy-cards { grid-template-columns: 1fr; }
  .hc-buy-article { padding: 24px;}
  .hc-buy-article__body { flex-wrap: wrap !important; gap: 16px !important; }
  .hc-buy-article__img { width: 100%; max-width: 280px; height: 180px; margin: 0 auto !important; }
  .hc-buy-insurance-cards { grid-template-columns: repeat(2, 1fr); }
  .hc-buy-faq__title { font-size: 26px !important; }
  .hc-buy-policy-section { padding: 40px 16px; }
  .hc-buy-policy__title { font-size: 24px !important; }
}

/* =========================================================
 * 22. 車検・点検・整備 (page-id-18) — Figma 54640:1458
 * ========================================================= */

/* Arkhe既定の topArea/breadcrumb 非表示 */
body.page-id-18 .p-topArea,
body.page-id-18 #breadcrumb { display: none !important; }
body.page-id-18 .l-main__body > .c-postContent { margin-top: 0 !important; }

/* ---------- Section ---------- */
.hc-inspect-section,
.hc-inspect-stores-section {
  padding: 100px var(--hc-section-px);
  margin: 0 !important;
  background: #fff;
}
.hc-inspect-section--tenken { padding-bottom: 60px; }
.hc-inspect-section__title {
  font-family: var(--hc-font-serif);
  font-size: 36px !important;
  font-weight: 700;
  margin: 0 !important;
  line-height: 1.45;
  color: var(--hc-text);
}
.hc-inspect-section__caption {
  text-align: center;
  font-size: 16px;
  color: var(--hc-text);
  line-height: 1.85;
  margin: 32px auto 0 !important;
  max-width: 1000px;
}

/* ---------- Tabs + Panel (Arkhe Tab block - inspection page) ---------- */
body.page-id-18 .ark-block-tab {
  margin: 56px auto 0 !important;
  max-width: var(--hc-content-max);
  position: relative;
}

/* タブリスト: 左寄せ、横線なし、min-width で短く */
body.page-id-18 .ark-block-tab > .arkb-tabList {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border-bottom: none;        /* ← 横線を削除 */
  align-items: flex-end;
  position: relative;
  z-index: 2;                  /* 水色より前面 */
}
body.page-id-18 .ark-block-tab .arkb-tabList__item {
  flex: 0 0 auto;
  min-width: 160px;            /* 画像に合わせて少し小さく(元220px) */
  margin: 0 !important;
  text-align: center;
}
body.page-id-18 .ark-block-tab .arkb-tabList__button {
  display: block;
  width: 100%;
  background: #DADADA;
  color: #1A1A1A;
  padding: 14px 20px;
  border-radius: 10px 10px 0 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  border: none;
  cursor: pointer;
  transition: background .2s, padding .2s;
  margin-bottom: 0;
}
body.page-id-18 .ark-block-tab .arkb-tabList__button[aria-selected="true"] {
  background: #4A4A4A;
  color: #fff;
  padding: 18px 20px;          /* 選択中は少し背を高く */
}

/* tabBody: タブにピッタリくっつく(隙間なし) */
body.page-id-18 .ark-block-tab > .arkb-tabBody {
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}

/* 水色パネル: 親いっぱいに広げる */
body.page-id-18 .ark-block-tab .arkb-tabBody__content {
  background: var(--hc-bg-light-blue);
  padding: 56px 80px 64px;
  margin: 0 !important;
  border-radius: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
}
body.page-id-18 .ark-block-tab .arkb-tabBody__content[aria-hidden="false"] {
  display: block;
}

body.page-id-18 .ark-block-tab > .arkb-tabBody {
  margin-top: 0 !important;
}

/* レガシー (旧テンプレート使用ページ用フォールバック) */
.hc-inspect-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin: 56px auto 0 !important;
  max-width: var(--hc-content-max);
  align-items: flex-end;
  border-bottom: 1px solid #D9D9D9;
}
.hc-inspect-tab {
  background: #DADADA;
  color: #1A1A1A;
  padding: 18px 24px;
  border-radius: 12px 12px 0 0;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin: 0 !important;
  min-width: 220px;
  text-align: center;
  line-height: 1.4;
  transition: background .2s;
}
.hc-inspect-tab.is-active {
  background: #4A4A4A;
  color: #fff;
  padding: 26px 24px;
}
.hc-inspect-panels {
  margin: 0 auto !important;
  max-width: var(--hc-content-max);
  position: relative;
}
.hc-inspect-panel {
  background: var(--hc-bg-light-blue);
  padding: 56px 80px 64px;
  margin: 0 !important;
  border-radius: 0;
  display: none;
}
.hc-inspect-panel.is-active {
  display: block;
}
.hc-inspect-panel__title {
  text-align: center;
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 56px !important;
  color: var(--hc-text);
}
.hc-inspect-panel__title--left {
  text-align: left !important;
  margin: 0 0 24px !important;
}
.hc-inspect-panel__lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--hc-text);
  margin: 0 0 32px !important;
}

/* ---------- Checklist (Figma 54640:2151 / 2172) ---------- */
.hc-inspect-checklist {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px !important;
  margin: 0 0 40px !important;
  padding: 0 !important;
}
.hc-inspect-checklist--2col {
  grid-template-columns: repeat(2, 1fr);
 
}
.hc-inspect-checklist__item {
  position: relative;
  padding-left: 48px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  color: #000;
  margin: 0 !important;
  min-height: 36px;
  display: flex;
  align-items: center;
}


/* ---------- Point Map (Figma 54640:2183) ---------- */
.hc-inspect-pointmap {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  margin: 0 0 32px !important;
  padding: 0;
}

/* ---------- Flow chart (車検) ---------- */
.hc-flow {
  margin: 0 auto !important;
  width: 100%;
  max-width: 900px;
}
.hc-flow__steps {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0 24px !important;
  position: relative;
}
.hc-flow__steps::before {
  content: "";
  position: absolute;
  left: 31px;
  right: 31px;
  top: 50%;
  height: 1px;
  background: #B5B5B5;
  z-index: 0;
}
.hc-flow__step-box {
  width: 62px;
  height: 63px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #1A1A1A;
  border-radius: 6px;
  margin: 0 !important;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  line-height: 1;
  padding: 4px 0;
}
.hc-flow__step-box span {
  font-size: 9px;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0;
  display: block;
}
.hc-flow__step-box b,
.hc-flow__step-box strong {
  font-size: 22px;
  font-weight: 700;
  color: #1A1A1A;
  display: block;
  line-height: 1;
}
.hc-flow__step-box--filled {
  background: #6E6E6E;
  border-color: #6E6E6E;
}
.hc-flow__step-box--filled span,
.hc-flow__step-box--filled b { color: #fff; }
.hc-flow__step-dot {
  width: 14px;
  height: 13px;
  background: #B5B5B5;
  margin: 0 !important;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: block;
}
.hc-flow__pills {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin: 0 !important;
}
.hc-flow__pill {
  width: 40px;
  min-height: 160px;
  background: #fff;
  border: 1px solid #1A1A1A;
  border-radius: 999px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  font-size: 13px;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 !important;
  padding: 14px 0;
  letter-spacing: .08em;
  flex-shrink: 0;
  line-height: 1.3;
}
.hc-flow__pill--dashed {
  background: transparent;
  border-style: dashed;
  border-color: #6E6E6E;
  color: #6E6E6E;
}
.hc-flow__pill--fill1 { background: #F2F2F2; border-color: #F2F2F2; }
.hc-flow__pill--fill2 { background: #DCDCDC; border-color: #DCDCDC; }
.hc-flow__pill--fill3 { background: #C0C0C0; border-color: #C0C0C0; color: #fff; }
.hc-flow__pill--fill4 { background: #6E6E6E; border-color: #6E6E6E; color: #fff; }

/* ---------- Flow chart (点検 timeline) ---------- */
.hc-flow--tenken { max-width: 1000px; }
.hc-flow__years {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0 24px !important;
  position: relative;
}
.hc-flow__years::before {
  content: "";
  position: absolute;
  left: 31px;
  right: 31px;
  top: 50%;
  height: 1px;
  background: #B5B5B5;
  z-index: 0;
}
.hc-flow__year {
  margin: 0 !important;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.hc-flow__year--icon {
  width: 62px;
  height: 63px;
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #1A1A1A;
  padding-bottom: 6px;
  background-image: url('assets/icon-car-mini.svg');
  background-repeat: no-repeat;
  background-position: center 6px;
  background-size: 32px auto;
}
.hc-flow__year--box {
  width: 62px;
  height: 63px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #1A1A1A;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
}
.hc-flow__year--shaken {
  border-color: #E45151;
  color: #E45151;
}
.hc-flow__pills--tenken .hc-flow__pill {
  border-style: solid;
  border-color: #1A1A1A;
  background: #fff;
}
.hc-flow__pill--invisible {
  visibility: hidden;
  border: none !important;
  background: transparent !important;
  display: block;
}
.hc-flow__pill--shaken {
  background: #FCEBEB !important;
  border-color: #E45151 !important;
  color: #E45151 !important;
}
.hc-flow__note {
  font-size: 13px;
  color: #1A1A1A;
  line-height: 1.7;
  margin: 32px 0 0 !important;
  text-align: left;
}

/* ---------- Panel CTA button (red primary) ---------- */
.hc-inspect-panel__cta { margin-top: 40px !important; }
.hc-inspect-panel__cta .wp-block-button__link,
.hc-inspect-stores-cta .wp-block-button__link,
.hc-btn-primary .wp-block-button__link {
  background: var(--hc-red) !important;
  color: #fff !important;
  padding: 18px 56px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 450 !important;
  border: none !important;
  position: relative;
}
.hc-inspect-panel__cta .wp-block-button__link::after,
.hc-inspect-stores-cta .wp-block-button__link::after,
.hc-btn-primary .wp-block-button__link::after {
  content: url('http://hondacarsmienaka.gilgiltown.co.jp/making/wp-content/uploads/2026/06/Vector-9.png');
  margin-left: 8px;
}
.hc-inspect-pack__img {
  width: 384px;
  flex-shrink: 0;
  margin: 0 !important;
  border-radius: 8px;
  overflow: hidden;
}
.hc-inspect-pack__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Section: 店舗情報 ---------- */
.hc-inspect-stores {
  display: grid !important;
  grid-template-columns: repeat(3, 384px);
  gap: 24px;
  justify-content: center;
  margin: 56px auto 0 !important;
  max-width: var(--hc-content-max);
}
.hc-inspect-store {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 16px !important;
  background: #fff;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  padding: 16px;
  margin: 0 !important;
}
.hc-inspect-store__img {
  width: 109px;
  height: 109px;
  flex-shrink: 0;
  margin: 0 !important;
  background: #EAEAEA;
  border-radius: 6px;
  overflow: hidden;
}
.hc-inspect-store__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hc-inspect-store__body {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
}
.hc-inspect-store__name {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 8px !important;
  color: var(--hc-text);
}
.hc-inspect-store__name::after { 
	content:url('http://hondacarsmienaka.gilgiltown.co.jp/making/wp-content/uploads/2026/06/Variant3.png') ;
	display:inline-block;
}
.hc-inspect-store__meta {
  font-size: 12px;
  color: #1A1A1A;
  line-height: 1.7;
  margin: 0 !important;
}
.hc-inspect-stores-cta { margin-top: 56px !important; }

/* ---------- FAQ ---------- */
.hc-inspect-faq {
  background: #fff;
  padding: 100px var(--hc-section-px);
  margin: 0 !important;
}
.hc-inspect-faq__inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 80px !important;
  margin: 0 auto !important;
  max-width: var(--hc-content-max);
}
.hc-inspect-faq__head {
  width: 280px;
  flex-shrink: 0;
  margin: 0 !important;
}
.hc-inspect-faq__list {
  flex: 1;
  margin: 0 !important;
}
.hc-inspect-faq__item {
  margin: 0 0 32px !important;
}
.hc-inspect-faq__q {
  font-weight: 700;
  font-size: 16px;
  color: #1A1A1A;
  margin: 0 0 8px !important;
  line-height: 1.55;
}
.hc-inspect-faq__a {
  font-size: 14px;
  color: #1A1A1A;
  line-height: 1.8;
  margin: 0 !important;
}
.hc-btn-dark .wp-block-button__link {
  background: #1A1A1A !important;
  color: #fff !important;
  padding: 18px 40px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  border: none !important;
}
.hc-btn-dark .wp-block-button__link::after {
  margin-left: 8px;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .hc-inspect-section,
  .hc-inspect-stores-section,
  .hc-inspect-faq { padding: 60px 20px; }
  .hc-inspect-section__title{ font-size: 26px !important; }
  .hc-inspect-section__caption { font-size: 14px; }
  .hc-inspect-tabs { flex-wrap: wrap !important; }
  .hc-inspect-tab { min-width: auto; padding: 12px 14px; font-size: 13px; }
  .hc-inspect-tab.is-active { padding: 16px 16px; }
  .hc-inspect-panel { padding: 32px 16px; }
  .hc-flow,
  .hc-flow--tenken { overflow-x: auto; padding-bottom: 8px; }
  .hc-flow__steps,
  .hc-flow__years,
  .hc-flow__pills { min-width: 700px; }
  .hc-flow--tenken .hc-flow__years,
  .hc-flow--tenken .hc-flow__pills { min-width: 900px; }
  .hc-inspect-pack__img { width: 100%; max-width: 280px; margin: 0 auto !important; }
  .hc-inspect-stores { grid-template-columns: 1fr; }
  .hc-inspect-faq__inner { flex-wrap: wrap !important; gap: 32px !important; }
  .hc-inspect-faq__head { width: 100%; }
}

/* =========================================================
 * 23. 安心ネットワークシステム
 * ========================================================= */

/* Arkhe既定のページタイトル/パンくずを非表示（hcテンプレ実装済みページ） */
body.page-id-20 .p-topArea,
body.page-id-20 #breadcrumb,
body.page-id-30 .p-topArea,
body.page-id-30 #breadcrumb,
body.page-id-15 .p-topArea,
body.page-id-15 #breadcrumb,
body.page-id-16 .p-topArea,
body.page-id-16 #breadcrumb,

body.page-id-24 .p-topArea,
body.page-id-24 #breadcrumb,
body.page-id-25 .p-topArea,
body.page-id-25 #breadcrumb { display: none !important; }
body.page-id-20 .l-main__body > .c-postContent,
body.page-id-30 .l-main__body > .c-postContent,
body.page-id-15 .l-main__body > .c-postContent,
body.page-id-16 .l-main__body > .c-postContent,

body.page-id-24 .l-main__body > .c-postContent,
body.page-id-25 .l-main__body > .c-postContent { margin-top: 0 !important; }
.hc-network-overview {
  background: #fff;
  border-radius: 50% 50% 0 0 / 100px 100px 0 0;
  padding: 80px var(--hc-section-px) var(--hc-section-py);
  margin-top: -100px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative;
  z-index: 2;
  max-width: none;
}
.hc-network-overview__heading {
  font-family: var(--hc-font-serif);
  text-align: center;
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  margin: 0 0 56px !important;
  position: relative;
  padding-bottom: 20px;
}
.hc-network-overview__heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--hc-divider-w);
  height: var(--hc-divider-h);
  background: var(--hc-red);
}
.hc-network-overview__lead {
  text-align: center;
  font-size: var(--hc-fz-card-body);
  color: var(--hc-text-light);
  margin: 0 0 56px !important;
  line-height: 1.8;
}
.hc-network-overview__item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  margin: 0 !important;
}
.hc-network-overview__item > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

.hc-network-flow {
  background: #fff;
  padding: var(--hc-section-py) var(--hc-section-px);
}
.hc-network-flow__heading {
  font-family: var(--hc-font-serif);
  text-align: center;
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  margin: 0 0 56px !important;
  position: relative;
  padding-bottom: 20px;
}
.hc-network-flow__heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--hc-divider-w);
  height: var(--hc-divider-h);
  background: var(--hc-red);
}
/* --- 対応の流れ チャート（Figma 「Group 288」 1200x724 実寸準拠） ---
 * speech bubble は icon 右端より左に重なって配置し、z-index で icon を上に
 * することで Figma 通り「テキストボックスがアイコンの下にもぐる」効果を出す.
 * chip は arrow X 軸 (左 x=450 / 右 x=816) に transform: translateX(-50%)
 * で中央揃えし、各 arrow segment はチップ・テキストボックスから 3px マージン
 * を空けて 10 セグメント (中央A + 左4 + 右5) で描画する.
 */
.hc-flow-chart {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  aspect-ratio: 1200 / 724;
  padding: 0;
  background-image: url("assets/flow-arrows.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
/* z-index: msg(下) < icon(中) < label(上) で
 *   - msg 左端は icon の下にもぐる
 *   - label はアイコン内最下部にオーバーレイ (Figma 通り) */
.hc-flow-chart .hc-flow-msg  { z-index: 1; }
.hc-flow-chart .hc-flow-icon { z-index: 2; }
.hc-flow-chart .hc-flow-label{ z-index: 3; }
.hc-flow-chart .hc-flow-time { z-index: 4; transform: translateX(-50%); }
/* wp:group の inner-container は Arkhe で display:contents になっているので、
   class で直接指定して絶対配置にする */
.hc-flow-chart .hc-flow-icon,
.hc-flow-chart .hc-flow-label,
.hc-flow-chart .hc-flow-msg,
.hc-flow-chart .hc-flow-time {
  position: absolute;
  margin: 0 !important;
  box-sizing: border-box;
}
.hc-flow-chart .hc-flow-icon { line-height: 0; }
.hc-flow-chart .hc-flow-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 役職アイコン (viewBox 1200x724)
 * 18:32 gap を縮めるため sales/recv2 をやや上に, 18:33 用 UP 矢印スペース確保のため
 * mech2 も上に. 整備1 と 受付2 のy位置調整で全体のフロー改善 */
.hc-flow-icon--customer { top:  0.00%; left: 39.00%; width: 22.00%; aspect-ratio: 264 / 120; }
.hc-flow-icon--recv1    { top: 23.48%; left: 23.33%; width:  9.17%; aspect-ratio: 110 / 90;  }
.hc-flow-icon--sales    { top: 40.30%; left: 55.83%; width: 10.00%; aspect-ratio: 120 / 90;  }
.hc-flow-icon--mech1    { top: 45.00%; left:  1.67%; width:  9.58%; aspect-ratio: 115 / 100; }
.hc-flow-icon--recv2    { top: 58.00%; left: 55.83%; width: 10.00%; aspect-ratio: 120 / 100; }
.hc-flow-icon--mech2    { top: 77.00%; left: 26.00%; width:  9.17%; aspect-ratio: 110 / 100; }

/* 役職ラベル（アイコン直下、お客様のみアイコン内最下部にオーバーレイ） */
.hc-flow-label {
  font-weight: 700;
  color: #1A1A1A;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
/* ラベル (viewBox 1200x724) — 全アイコン内部最下部にオーバーレイ. icon top% に追従 */
.hc-flow-label--customer { top: 13.00%; left: 39.00%; width: 22.00%; font-size: 15px; }
.hc-flow-label--recv1    { top: 33.40%; left: 23.33%; width:  9.17%; font-size: 12px; }
.hc-flow-label--sales    { top: 50.30%; left: 55.83%; width: 10.00%; font-size: 12px; }
.hc-flow-label--mech1    { top: 56.10%; left:  1.67%; width:  9.58%; font-size: 12px; }
.hc-flow-label--recv2    { top: 69.00%; left: 55.83%; width: 10.00%; font-size: 12px; }
.hc-flow-label--mech2    { top: 88.00%; left: 26.00%; width:  9.17%; font-size: 12px; }

/* メッセージバブル — left 端は icon の下にもぐらせ、padding-left を 6%にして
 * テキスト開始位置を icon 右端の外側に押し出す (文字見切れ防止) */
.hc-flow-msg {
  background: #DCE9F2;
  border-radius: 14px;
  padding: 10px 18px 10px 6%;
  font-size: 13px;
  line-height: 1.4;
  color: #1A1A1A;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
}
/* スピーチバブル (viewBox 1200x724) — msg center = icon center で Y軸完全揃え
 * msg top = icon top + (icon height - msg height)/2
 * msg height ~52 vbx, icon height 90 (recv1/sales) or 100 (mech1/recv2/mech2) */
.hc-flow-msg--recv1 { top: 26.10%; left: 28.00%; width: 47.00%; min-height: 5.00%; }
.hc-flow-msg--sales { top: 42.96%; left: 60.83%; width: 39.17%; min-height: 5.00%; }
.hc-flow-msg--mech1 { top: 48.34%; left:  6.00%; width: 42.00%; min-height: 5.00%; }
.hc-flow-msg--recv2 { top: 61.33%; left: 60.83%; width: 39.17%; min-height: 5.00%; }
.hc-flow-msg--mech2 { top: 80.25%; left: 33.00%; width: 42.00%; min-height: 5.00%; }

/* 時刻チップ（赤ピル） — チップ自体は ▼ を持たず、コネクタ矢印 (background SVG) を見せる */
.hc-flow-time {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 2;
}
.hc-flow-time__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(228, 81, 81, 0.7);
  color: #fff;
  padding: 4px 13px 4px 9px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(228, 81, 81, 0.35);
}
/* 時計アイコン — Figma準拠の SVG (黒い縁取り円 + 黒い時針/分針)
 * 純粋な SVG なので拡縮しても綺麗。背景画像で表示し、チップ pill 内に組み込む */
.hc-flow-time__ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("assets/icon-clock.svg") no-repeat center / contain;
  flex-shrink: 0;
}
/* 時刻チップ位置 (viewBox 1200x724) — Figma 通り chip を arrow の外側にオフセット
 *   - 左 chip: center x=30% (= 360 vbx) → arrow x=450 の左外側
 *   - 右 chip: center x=75% (= 900 vbx) → arrow x=816 の右外側 */
/* 各 chip を上下 textbox の Y 中央に厳密に配置
 * chip 中心 y = (前 msg 下端 + 次 msg 上端) / 2
 * chip top% = (chip 中心 - chip 高さ17) / 724 */
.hc-flow-time--1830 { top: 35.77%; left: 75.00%; }
.hc-flow-time--1831 { top: 38.47%; left: 30.00%; }
.hc-flow-time--1832 { top: 53.38%; left: 75.00%; }
.hc-flow-time--1833 { top: 72.03%; left: 75.00%; }
.hc-flow-time--1849 { top: 65.54%; left: 30.00%; }
.hc-network-area__title {
  font-family: var(--hc-font-serif);
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  margin: 0 0 56px !important;
  position: relative;
  padding-bottom: 20px;
  display: inline-block;
}
.hc-network-area__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--hc-divider-w);
  height: var(--hc-divider-h);
  background: var(--hc-red);
}

.hc-network-stats {
  background: #383838;
  color: #fff;
  padding: var(--hc-section-py) var(--hc-section-px);
}
.hc-network-stats h2{
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  margin: 0 0 24px !important;
  font-family: var(--hc-font-serif);
  position: relative;
  padding-bottom: 20px;
  color: #fff !important;
}
.hc-network-stats p {
  font-size: var(--hc-fz-card-body);
  line-height: 1.85;
}
.hc-network-stats__sub {
  font-size: 13px;
  color: rgba(255,255,255,.75);
  margin: 0 !important;
  line-height: 1.4;
}
.hc-network-stats__num {
  font-size: 48px;
  font-weight: 700;
  color: var(--hc-mint) !important;
  line-height: 1;
  letter-spacing: -1px;
  font-family: var(--hc-font-sans);
}
.hc-network-stats__unit {
  font-size: 22px;
  font-weight: 700;
  margin-left: 4px;
}
.hc-network-stats__note {
  font-size: 12px;
  color: rgba(255,255,255,.8) !important;
  margin: 4px 0 0 !important;
  line-height: 1.6;
}

.hc-network-emergency {
  text-align: center;
  padding: var(--hc-section-py) var(--hc-section-px);
  max-width: calc(var(--hc-content-max) + var(--hc-section-px) * 2);
  margin: 0 auto;
}
.hc-network-emergency h2 {
  color: var(--hc-red);
  font-family: var(--hc-font-serif);
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  margin: 0 0 16px !important;
}
.hc-network-emergency__lead {
  font-weight: 700;
  margin: 0 0 24px !important;
}

.hc-network-episodes {
  background: var(--hc-bg-light-blue);
  padding: var(--hc-section-py) var(--hc-section-px);
}
.hc-network-episodes__title {
  font-family: var(--hc-font-serif);
  text-align: center;
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  margin: 0 0 56px !important;
}
.hc-network-episodes__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hc-gutter);
  max-width: var(--hc-content-max);
  margin: 0 auto;
}
.hc-network-episode {
  background: #fff;
  border-radius: var(--hc-radius-lg);
  padding: 32px;
  text-align: center;
  box-shadow: var(--hc-shadow-card);
}
.hc-network-episode__icon {
  width: 64px;
  height: 64px;
  background: var(--hc-bg-light-blue);
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.hc-network-episode__body {
  font-size: var(--hc-fz-card-body);
  line-height: 1.85;
  color: var(--hc-text-light);
  text-align: left;
}

.hc-network-fee {
  padding: var(--hc-section-py) var(--hc-section-px);
  max-width: calc(var(--hc-content-max) + var(--hc-section-px) * 2);
  margin: 0 auto;
}
.hc-network-fee__title {
  font-family: var(--hc-font-serif);
  text-align: center;
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  margin: 0 0 16px !important;
}
.hc-network-fee__caption {
  text-align: center;
  font-size: var(--hc-fz-card-body);
  color: var(--hc-text-light);
  margin: 0 0 40px !important;
  line-height: 1.8;
}
.hc-network-fee__table table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
  max-width: var(--hc-content-max);
}
.hc-network-fee__table th,
.hc-network-fee__table td {
  padding: 16px;
  border-bottom: 1px solid var(--hc-border-light);
  text-align: center;
  font-size: var(--hc-fz-card-body);
}
.hc-network-fee__table thead th {
  background: #6E6E6E;
  color: #fff;
  font-weight: 500;
  border: none;
}
.hc-network-fee__table tbody th {
  background: transparent;
  font-weight: 400;
}
.hc-network-fee__subtitle {
  font-size: var(--hc-fz-h3);
  font-weight: 700;
  margin: 32px 0 16px !important;
}
.hc-network-fee__note {
  background: #FFF8DE;
  padding: 16px 20px;
  font-size: 13px;
  color: #555;
  line-height: 1.8;
  margin-top: 24px;
}

.hc-network-outro {
  text-align: center;
  padding: var(--hc-section-py) var(--hc-section-px);
  max-width: 900px;
  margin: 0 auto;
}

/* --- 画像プレースホルダー（wp:image / wp:cover 対応） --- */
.hc-placeholder-img {
  margin: 0 !important;
  line-height: 0;
}
.hc-placeholder-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hc-placeholder--circle {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px !important;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  border: none;
  display: block;
}
.hc-placeholder--circle img { border-radius: 50%; }




/* Home stat-icon as wp:image (figure) — keep centered & circular */
figure.hc-home-network__stat-icon {
  margin: 0 auto 20px !important;
  width: 96px;
  height: 96px;
  display: block;
  overflow: hidden;
  border-radius: 50%;         /* 50% → 角丸に変更 */
  background: #fff;            /* 画像周囲の余白色 */
  padding: 20px;                /* 内側に余白を作って画像を縮める */
  box-sizing: border-box;
}
figure.hc-home-network__stat-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;         /* cover → contain に変更（全体を収める） */
  border-radius: 0;            /* 子側の角丸は不要 */
}

/* === SP（〜768px）対応：絶対配置を解除して縦並びにフォールバック ===
 * (削除) R6 (style.css 末尾) に一本化。
 *        700-768px の中間ブレークポイントは Tablet 層 (100. Tablet Override)
 *        と R6 (max-width:600px) の組み合わせで対応。 */

@media (max-width: 900px) {
  .hc-network-episodes__grid { grid-template-columns: 1fr; }
}


.hc-club-overview {
  background: #fff;
  border-radius: 50% 50% 0 0 / 100px 100px 0 0;
  padding: 80px var(--hc-section-px) var(--hc-section-py);
  margin-top: -100px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative;
  z-index: 2;
  max-width: none;
}
.hc-club-overview__title {
  position: relative;
  padding-bottom: 20px;
  font-family: var(--hc-font-serif);
  text-align: center;
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  margin: 0 0 16px !important;
}
.hc-club-overview__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--hc-divider-w);
  height: var(--hc-divider-h);
  background: var(--hc-red);
}
.hc-club-overview__caption {
  text-align: center;
  font-size: var(--hc-fz-body);
  color: var(--hc-text-light);
  margin: 0 0 56px !important;
  line-height: 1.85;
}

/* === wp:table block: 比較表をFigma準拠のカラム別カード風に === */
.hc-club-table {
  max-width: var(--hc-content-max);
  margin: 0 auto !important;
  overflow-x: auto;
}
/* Arkhe親テーマの table {border-top, border-right} を打ち消す */
.hc-club-table > table,
.hc-club-table table {
  width: 100%;
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 12px 0 !important;
  table-layout: fixed;
}
/* Arkhe親の .wp-block-table td,th { border-bottom, border-left } を打ち消す + 共通 */
.hc-club-table th,
.hc-club-table td {
  border: none;
  padding: 18px 16px;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.7;
  background: #fff;
  color: #1A1A1A;
}

/* === thead：列ヘッダーをカード上部風に === */
.hc-club-table thead th {
  background: #E8E8E8;
  color: #1A1A1A;
  border: 1px solid #DDD !important;
  border-bottom: none !important;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
  padding: 20px 16px 18px;
  border-radius: 8px 8px 0 0;
  height: 120px;
}
/* 列幅：左ラベル14% + 3プラン各 28.6% */
.hc-club-table thead th:first-child {
  background: transparent !important;
  border: none !important;
  width: 14%;
  height: auto;
}
.hc-club-table thead th:nth-child(2),
.hc-club-table thead th:nth-child(3),
.hc-club-table thead th:nth-child(4) {
  width: 28.66%;
}
.hc-club-table thead th.is-vip {
  color: #fff;
  position: relative;
background:#008c7a; 
}
.hc-club-table thead th.is-vip::before {
  content: "★ ";
  color: gold;
  font-size: 1.1em;
  vertical-align: middle;
}
.hc-club-table__sub {
  display: block;
  font-weight: 400;
  font-size: 12px;
  opacity: .85;
  margin-top: 6px;
  line-height: 1.55;
}

/* === tbody：行ラベル列 (th) は左固定、薄いセパレータ === */
.hc-club-table tbody th {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid #E5E5E5 !important;
  font-weight: 700;
  white-space: normal;
  width: 16%;
  vertical-align: middle;
  text-align: center;
  font-size: 15px;
  color: #1A1A1A;
  padding: 20px 8px;
}

/* === tbody：データセル (td) はカラム別の縦カード続きとして === */
.hc-club-table tbody td {
  border-left: 1px solid #DDD !important;
  border-right: 1px solid #DDD !important;
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: none !important;
  text-align: left;
  vertical-align: top;
  padding: 20px 18px;
}
/* 1行目の上ボーダーは要らない（thead と接続） */
.hc-club-table tbody tr:first-child td {
  border-top: none !important;
}
/* 最終行：列カードの下端を丸める */
.hc-club-table tbody tr:last-child td {
  border-bottom: 1px solid #DDD !important;
  border-radius: 0 0 8px 8px;
}

/* === ◯ / × / ✓ マークの専用セル === */
.hc-club-table .is-check,
.hc-club-table .is-cross {
  text-align: center !important;
  vertical-align: middle !important;
  font-weight: 700;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.hc-club-table .is-check {
  color: var(--hc-red);
  font-size: 30px;
  line-height: 1;
}
.hc-club-table .is-check--vip {
  color: #2A9D5C;
  font-size: 34px;
}
.hc-club-table .is-cross {
  color: #1A1A1A;
  font-size: 22px;
  line-height: 1;
}

.hc-club-table ul { margin: 0; padding-left: 1.2em; }

/* レスポンシブ：900px以下では横スクロール許容（min-widthで縮みすぎ防止） */
@media (max-width: 900px) {
  .hc-club-table > table,
  .hc-club-table table {
    min-width: 800px;
  }
  .hc-club-table th,
  .hc-club-table td {
    padding: 14px 10px;
  }
}

.hc-club-steps {
  background: var(--hc-bg-light-blue);
  border-radius: var(--hc-radius-lg);
  padding: var(--hc-section-py) var(--hc-section-px);
  margin: var(--hc-section-py) auto !important;
  max-width: calc(var(--hc-content-max) + var(--hc-section-px) * 2);
}
.hc-club-steps__title {
  font-family: var(--hc-font-serif);
  text-align: center;
  font-size: var(--hc-fz-h2);
  font-weight: 700;
  margin: 0 0 56px !important;
  position: relative;
  padding-bottom: 20px;
}
.hc-club-steps__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--hc-divider-w);
  height: var(--hc-divider-h);
  background: var(--hc-red);
}
.hc-club-steps__grid {
  display: grid !important;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  gap: 16px;
  align-items: center;
  max-width: var(--hc-content-max);
  margin: 0 auto;
}
.hc-club-step {
  background: #fff;
  border-radius: 8px;
  padding: 40px 24px 32px;
  text-align: center;
  position: relative;
  border: 1px solid #959595;
}
.hc-club-step:nth-child(3) { background: #F6F6F6; }
.hc-club-step:nth-child(5) { background: #E8E8E8; }
.hc-club-step__num {
  position: absolute !important;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  background: #DE1D2F;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  margin: 0 !important;
  line-height: 1;
}
.hc-club-step__body {
  font-size: var(--hc-fz-card-body);
  line-height: 1.7;
  margin: 0 !important;
  color: #21272A;
}
.hc-club-arrow {
  text-align: center;
  color: #6FA9E0;
  font-size: 2rem;
  margin: 0 !important;
  align-self: center;
  font-weight: 700;
}
.hc-club-contact__lead {
  font-weight: 700;
  margin-bottom: 32px !important;
  font-size: var(--hc-fz-body);
}

@media (max-width: 900px) {
  .hc-club-steps__grid { grid-template-columns: 1fr; }
  .hc-club-arrow { transform: rotate(90deg); }
  .hc-club-table { font-size: 13px; }
  .hc-club-table th, .hc-club-table td { padding: 12px 8px; }
}

.z-index-3{
	z-index:3;
}

/* 店舗名とアイコンを横並びに */
.hc-store-card__header {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 16px !important;
}

.hc-store-card__title {
  margin: 0 !important;
  flex: 1;
  min-width: 0;
	position:relative;
}

/* アイコンを2段グリッドに（3列×2行） */
.hc-store-card__icons {
  display: grid !important;
  grid-template-columns: repeat(2, 32px);
  gap: 6px !important;
  margin: 0 !important;
  flex-shrink: 0;
	position:absolute;
	right:10px;
	bottom:5rem;
}

/* ボタンを左寄せ＋コンテンツ幅に */
.wp-block-button.hc-store-card__button {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  text-align: left;
}

.hc-store-card__button,
.wp-block-button.hc-store-card__button > .wp-block-button__link {
  display: inline-block !important;
  width: auto !important;
  padding: 10px 40px !important;
}

/* =========================================================
 * 99. SP Override Layer  (Figma SP wireframe @ 390px 準拠)
 *     fileKey: 73taF6gr6soi2awaplWUcF  Hi-fi_ALL_Mobile v5
 *     - 600px 以下で発火
 *     - デザイントークン (--hc-*) を SP 値に再定義 → 全選択子へ波及
 *     - 続いてレイアウト崩し (grid→1col, padding, hero高さ 等) を追記
 * ========================================================= */
@media (max-width: 600px) {
  :root {
    /* ----- Type (Figma SP) ----- */
    --hc-fz-h1: 30px;
    --hc-fz-h2: 24px;
    --hc-fz-h2-special: 22px;
    --hc-fz-h3: 17px;
    --hc-fz-body: 14px;
    --hc-fz-card-body: 14px;
    --hc-fz-btn-lg: 15px;
    --hc-fz-btn-sm: 17px;
    --hc-fz-header: 15px;
    --hc-fz-store-lg: 19px;
    --hc-fz-store-sm: 15px;
    --hc-fz-footer: 12px;
    --hc-fz-micro: 12px;

    /* ----- Layout (Figma SP) ----- */
    --hc-content-max: 358px;     /* 390 - 16*2 */
    --hc-section-px: 16px;
    --hc-section-py: 48px;
    --hc-gutter: 16px;

    /* ----- Spacing scale (SP) ----- */
    --hc-sp-xxs: 16px;           /* Figma quirk: xxs > xs */
    --hc-sp-xs: 8px;
    --hc-sp-s: 16px;
    --hc-sp-m: 24px;
    --hc-sp-l: 30px;
    --hc-sp-xl: 40px;
    --hc-sp-xxl: 56px;
    --hc-heading-gap: 8px;
    --hc-card-width: 100%;
    --hc-card-3col: 100%;
    --hc-card-7col: 100%;
    --hc-divider-w: 40px;
    --hc-divider-h: 3px;
  }

  /* ----- Global container ----- */
  body { font-size: var(--hc-fz-body); }

  /* alignfull 以外のブロックは画面端 16px のセクション余白を持たせる */
  .wp-block-group.alignfull,
  .wp-block-cover.alignfull { padding-left: 0; padding-right: 0; }

  /* hc-* セクション共通: 左右 16px 上下 48px に圧縮 */
  [class*="hc-"][class*="-section"],
  .hc-home-intro,
  .hc-home-stores,
  .hc-home-cars,
  .hc-home-news-wrap,
  .hc-home-blog,
  .hc-about-intro,
  .hc-about-history,
  .hc-about-region,
  .hc-network-overview,
  .hc-network-stats,
  .hc-network-fee,
  .hc-network-episodes,
  .hc-network-outro,
  .hc-network-emergency,
  .hc-club-overview,
  .hc-club-steps,
  .hc-buy-policy-section,
  .hc-inspect-stores-section,
  .hc-inspect-faq,
  .hc-dept-breadcrumb-section,
  .hc-job-section,
  .hc-community-section,
  .hc-community-blog,
  .hc-history-blog,
  .hc-company {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* footer は別ルールあり -> マージン詰める */
  .hc-site-footer { margin-top: 48px; padding: 48px 16px 24px; }

  /* ----- Heading divider 寸法を SP に ----- */
  .hc-section-title::after{ width: 40px; height: 3px; margin-top: 8px; }

  /* ----- 共通グリッドを 1 カラム化 ----- */
  .hc-home-network__stats,
  .hc-store-grid,
  .hc-news,
  .hc-network-episodes__grid,
  .hc-club-steps__grid,
  .hc-buy-cards,
  .hc-buy-insurance-cards,
  .hc-inspect-panels,
  .hc-inspect-stores{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 100% !important;
  }

  /* 画像は SP で 100% 幅・height auto を基本に */
  .wp-block-image img,
  .hc-placeholder-img img { max-width: 100%; height: auto; }
}

/* ---------- Section: Home (390px) ---------- */
@media (max-width: 600px) {

  /* 支える intro */
  .hc-home-intro { padding-top: 48px !important; padding-bottom: 32px !important; }
  .hc-home-network__title { font-size: 24px !important; }
  .hc-home-network__stats { gap: 32px !important; }
  .hc-home-network__stat-icon { width: 120px !important; height: 120px !important; }
  .hc-home-network__footer { margin-top: 32px; }

  /* 店舗情報セクション */
  .hc-home-stores {
  }
  .hc-store-card { width: 100% !important; max-width: 358px; margin: 0 auto; }
  .hc-store-card__img { min-height: 180px !important; }
  .hc-store-card__title { font-size: 19px !important; }
  .hc-store-card__icons {
    position: static !important;
    grid-template-columns: repeat(5, 32px) !important;
    margin-top: 8px !important;
  }
  .hc-store-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* News list */
  .hc-news__item {
    grid-template-columns: 1fr !important;
    padding: 16px 0 !important;
    gap: 4px !important;
  }

  /* ボタン共通 */
  .wp-block-button.hc-btn-primary .wp-block-button__link,
  .hc-btn-primary .wp-block-button__link {
    font-size: 15px !important;
    padding: 14px 28px !important;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    text-align: center;
  }
}

/* ---------- Section: About (Philosophy / Message / History / Community / Company) ---------- */
@media (max-width: 600px) {
  .hc-about-hero{
    min-height: 280px !important;
    height: auto;
    padding: 40px 16px !important;
  }

  /* 社長メッセージ */
  .hc-message { padding: 48px 16px !important; }
  .hc-message__title { font-size: 22px !important; }

  /* 沿革 timeline */
  .hc-history-page__row,
  .hc-history-page__row--image {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .hc-history-page__date { font-size: 16px; }
  .hc-history-page__photo { width: 100% !important; }
  .hc-timeline__item { padding-left: 16px !important; }
  .hc-timeline__desc { font-size: 14px; }

  /* 会社概要表 */
  .hc-info-table { font-size: 13px; }
  .hc-info-table th, .hc-info-table td { padding: 12px 8px !important; display: block; width: 100%; }
  .hc-info-table th { background: var(--hc-bg-gray); }

  /* 地域貢献 */
  .hc-about-region__title { font-size: 22px !important; }
  .hc-about-region__caption { font-size: 13px; }
}

/* ---------- Section: 安心ネットワーク / 倶楽部 ---------- */
@media (max-width: 600px) {
  .hc-network-stats__num { font-size: 40px !important; }
  .hc-network-stats__unit { font-size: 14px; }
  .hc-network-fee__table { font-size: 13px; }
  .hc-network-fee__table th,
  .hc-network-fee__table td { padding: 10px 6px !important; }

  /* 倶楽部 step */
  .hc-club-step { padding: 24px 16px !important; }
  .hc-club-step__num { font-size: 32px !important; }
  .hc-club-arrow { transform: rotate(90deg); margin: 8px auto; }
  .hc-club-table { font-size: 12px; }
  .hc-club-table th, .hc-club-table td { padding: 10px 6px !important; }
}

/* ---------- Section: 車検・点検・整備 (inspection) ---------- */
@media (max-width: 600px) {
  .hc-inspect-tabs { flex-wrap: wrap; gap: 8px; }
  .hc-inspect-tab { font-size: 13px !important; padding: 10px 14px !important; flex: 1 1 30%; text-align: center; }
  .hc-inspect-section { padding: 48px 16px !important; }
  .hc-inspect-section__title { font-size: 22px !important; }
  .hc-inspect-section__heading { font-size: 18px !important; }
  .hc-inspect-pack__img img { width: 100% !important; height: auto !important; }
  .hc-inspect-panel { padding: 24px 16px !important; }
  .hc-inspect-panel__title { font-size: 18px !important; }
  .hc-inspect-checklist { grid-template-columns: 1fr !important; gap: 8px !important; }
  .hc-inspect-checklist--2col { grid-template-columns: 1fr !important; }
  .hc-inspect-store__body { padding: 16px !important; }
  .hc-inspect-store__name { font-size: 16px; }

  /* 工程フロー (chart) — SP は R6 で縦並び。ここでは何もしない */

  .hc-inspect-faq__q,
  .hc-buy-faq__q{ font-size: 14px !important; padding: 14px 36px 14px 16px !important; }
  .hc-inspect-faq__a,
  .hc-buy-faq__a{ font-size: 14px !important; padding: 0 16px 16px !important; }
}

/* ---------- Section: くるま購入ナビ (purchase-guide) ---------- */
@media (max-width: 600px) {
  .hc-buy-section { padding: 48px 16px !important; }
  .hc-buy-section__heading { font-size: 18px !important; }
  .hc-buy-section__caption { font-size: 13px; }
  .hc-buy-card { padding: 0 !important; }
  .hc-buy-card__body { padding: 16px !important; }
  .hc-buy-card__title { font-size: 16px !important; }
  .hc-buy-insurance-card__title{ font-size: 17px !important; }
  .hc-buy-article { flex-direction: column !important; }
  .hc-buy-article__img { width: 100% !important; max-width: none !important; }
  .hc-buy-article__title { font-size: 16px !important; }
  .hc-buy-consultation { flex-direction: column !important; gap: 24px !important; }
  .hc-buy-consultation__left,
  .hc-buy-consultation__right { width: 100% !important; }
  .hc-buy-policy__title { font-size: 20px !important; }
  .hc-buy-policy__lead { font-size: 14px; }
}

/* ---------- Section: 採用 (recruit) ---------- */
@media (max-width: 600px) {
  .hc-job-section { padding: 32px 16px !important; }

  /* フォーム */
  .hc-form { padding: 24px 16px !important; }
  .hc-form__title { font-size: 18px !important; }
  .hc-form input[type="text"],
  .hc-form input[type="email"],
  .hc-form input[type="tel"],
  .hc-form textarea,
  .hc-form select { font-size: 16px; /* iOS zoom 回避 */ padding: 10px 12px; }
}

/* ---------- Section: 店舗詳細 (store-detail) ---------- */
@media (max-width: 600px) {
  .hc-store__top,
  .hc-store__gallery{ padding: 0 16px; }
  .hc-store__title { font-size: 26px !important; }
  .hc-store__lead { font-size: 14px; }
  .hc-store__gallery {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .hc-store__gallery-main img{ width: 100% !important; height: auto !important; }
  .hc-store-info__table th,
  .hc-store-info__table td {
    display: block;
    width: 100%;
    padding: 8px 0 !important;
    font-size: 14px;
  }
  .hc-store-info__table th { font-weight: 700; padding-top: 12px !important; }
}

/* ---------- Footer SP (Figma準拠: 12px / 2列) ---------- */
@media (max-width: 600px) {
  .hc-site-footer__inner { gap: 24px; }
  .hc-site-footer__brand { font-size: 16px; }
  .hc-site-footer__col { font-size: 12px; }
  .hc-site-footer__col a { font-size: 12px; line-height: 1.8; }
  .hc-site-footer__bottom { font-size: 11px; padding-top: 16px; }
}
/* ===== END SP Override Layer ===== */


/* =========================================================
 * 99b. SP/Tablet Header Override (Figma準拠)
 *      - SP (390px) / Tablet (768px) ともに「ロゴ + ハンバーガー」のみ
 *      - CTA・ショートカット・デスクトップナビは <=1024 で全て非表示
 *      - 既存実装はトグルボタンを <nav> 内部に置き、その <nav> を
 *        position:fixed + transform:translateX(100%) でオフスクリーン化
 *        していたため、トグル自身も画面外に消えていた (タップ不能で
 *        ドロワーが開けず、Gutenbergのデフォルト幅でnav <ul>が静的に
 *        描画されると "ヘッダーが画面全域を覆う" 見た目になっていた)。
 *      - 修正方針:
 *          (1) .hc-site-nav は transform/overlay化せず透明コンテナに
 *          (2) .hc-site-nav__toggle は position:fixed で常時表示
 *          (3) .hc-site-nav__list を実体のドロワーパネルとして
 *              translateX(100%)→0 で出し入れする
 * ========================================================= */
/* デスクトップではドロワーは出さない */
.hc-site-drawer { display: none; }

@media (max-width: 1024px) {
  /* ----- ヘッダーバー: ロゴ + ハンバーガー の 2col ----- */
  .hc-site-header__inner {
    grid-template-columns: 1fr auto !important;
    height: 60px !important;
    padding: 0 16px !important;
    gap: 12px !important;
    max-width: 100%;
  }
  /* デスクトップ向け CTA / ショートカットは隠す (Figma 準拠) */
  .hc-site-header__shortcuts,
  .hc-site-header__cta {
    display: none !important;
  }
  /* SP/Tablet ではメガメニュー <ul> は表示しない。ドロワー側を出す */
  .hc-site-nav__list { display: none !important; }
  .hc-site-header__logo {
    font-size: 14px;
    gap: 8px;
  }
  .hc-site-header__logo-mark {
    height: 36px;
    width: auto;
  }

  /* ----- nav 自体は透明コンテナ化 (overlay化しない) ----- */
  .hc-site-nav {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
    height: 0;            /* 静的フローには高さを取らせない */
    margin: 0;
    padding: 0;
  }

  /* ----- ハンバーガートグル: ヘッダー右上に固定表示 ----- */
  .hc-site-nav__toggle {
    display: block !important;
    position: fixed !important;
    top: 10px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 200 !important;       /* ドロワーパネル(z:95)より前面に */
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
  }
  .hc-site-nav__toggle span {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    background: var(--hc-red, #c8102e) !important;   /* Figma: 赤いライン */
    height: 3px !important;
    border-radius: 2px;
  }
  .hc-site-nav__toggle span:nth-child(1) { top: 12px !important; }
  .hc-site-nav__toggle span:nth-child(2) { top: 21px !important; }
  .hc-site-nav__toggle span:nth-child(3) { top: 30px !important; }

  /* ----- メガメニュー(.hc-site-nav__list)はSP/Tabletでは完全非表示 -----
       SPは別途 wp_nav_menu(drawer_menu) で .hc-site-drawer を出すため、
       primary 側のメガメニュー <ul> は DOM 上は残しつつ display:none。 */
  .hc-site-nav__list,
  .hc-site-nav__list * {
    display: none !important;
  }
  .hc-is-menu-open {
    overflow: hidden;
  }
}

/* タブレット(601-1024)はロゴをやや大きめに */
@media (min-width: 601px) and (max-width: 1024px) {
  .hc-site-header__inner {
    height: 70px !important;
    padding: 0 24px !important;
  }
  .hc-site-header__logo { font-size: 18px; }
  .hc-site-header__logo-mark { height: 44px; }
  .hc-site-drawer { top: 70px !important; inset: 70px 0 0 0 !important; }
}
/* ----- SP ドロワーメニュー (.hc-site-drawer) ----- */
@media (max-width: 1024px) {
  .hc-site-drawer {
    display: block !important;
    position: fixed;
    inset: 60px 0 0 0;
    top: 60px;
    background: #fff;
    border-top: 1px solid var(--hc-border-light);
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(100%);
    transition: transform .35s var(--hc-ease);
    z-index: 95;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    pointer-events: none;
  }
  .hc-is-menu-open .hc-site-drawer {
    transform: translateX(0);
    pointer-events: auto;
  }
  .hc-is-menu-open { overflow: hidden; }

  .hc-site-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .hc-site-drawer__list > li {
    border-bottom: 1px solid var(--hc-border-light);
    position: relative;
  }
  .hc-site-drawer__list a {
    display: block;
    padding: 18px 56px 18px 24px;
    color: var(--hc-text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
  }
  /* 子要素 (サブメニュー) */
  .hc-site-drawer__list .sub-menu,
  .hc-site-drawer__list .children {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--hc-bg-light-blue, #eef4f7);
    transition: max-height .35s var(--hc-ease);
  }
  .hc-site-drawer__list li.is-open > .sub-menu,
  .hc-site-drawer__list li.is-open > .children {
    max-height: 1200px;
  }
  .hc-site-drawer__list .sub-menu a,
  .hc-site-drawer__list .children a {
    padding: 14px 24px 14px 40px;
    font-size: 14px;
    font-weight: 500;
    border-top: 1px solid rgba(0,0,0,.06);
  }
  /* JS で追加される + / - ボタン */
  .hc-site-drawer__expand {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--hc-red);
    font: inherit;
  }
  .hc-site-drawer__expand::after {
    content: "＋";
    font-size: 20px;
    font-weight: 700;
    color: var(--hc-red);
  }
  .hc-site-drawer__list li.is-open > .hc-site-drawer__expand::after {
    content: "－";
  }
}
/* ===== END SP/Tablet Header Override ===== */


/* =========================================================
 * 99c. wp-block-cover ヒーロー画像の押し出し対策
 *      - WordPress の wp-block-cover__image-background は本来
 *        absolute / 100% / object-fit:cover で背面に敷かれる想定だが、
 *        lazyload.js が src を data: GIF (6x2) のままにしている間、
 *        img の width/height 属性 (例: 2560x1707) がそのまま使われて
 *        ヒーローが画面を埋め尽くす高さになる事象を確認。
 *      - 全ブレークポイントで強制的に背景化する。
 * ========================================================= */
.wp-block-cover .wp-block-cover__image-background,
.wp-block-cover img.wp-block-cover__image-background,
.hc-about-hero > img{
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: 50% 50%;
  z-index: 0;
  border: none;
}
/* hero 内側 (タイトル等) は前面に */
.wp-block-cover > .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}
/* ===== END Cover Image Background Fix ===== */


/* =========================================================
 * 99d. SP/Tablet 追加レイアウト修正
 *      Figma 確認時に検出された個別の崩れに対応:
 *      (1) .hc-network-overview の -100px オーバーラップが SP/Tablet で
 *          直下のヒーロー内 .hc-network-hero__badge と衝突
 *          → ヒーロー余白を増やし、オーバーラップ量を縮小
 *      (2) .hc-flow-chart はデスクトップ実寸 1200x724 を縦横比固定で
 *          縮小すると、SP では各要素が潰れて読めず吹き出しが折れる
 *          → SP/Tablet ともに min-width:700px + 横スクロール
 *      (3) wp-block-cover 内の <h1> 等が pagespeed の lazyload で
 *          z-index 不足で背景画像に隠れることがあるため z-index 明示
 * ========================================================= */
@media (max-width: 1024px) {
  .hc-network-overview {
    margin-top: -40px !important;
    padding-top: 56px !important;
    border-radius: 32px 32px 0 0 / 32px 32px 0 0 !important;
  }
  .hc-network-overview__heading {
    margin-top: 0 !important;
    margin-bottom: 32px !important;
  }
  .hc-network-overview__lead {
    margin-bottom: 32px !important;
  }

  /* (2) 対応フローチャートは横スクロール固定 (Tablet >=601px のみ。SP は R6 で縦並び) */
}

/* Tablet (601px〜1024px) のみ: flow-chart は横スクロール表示 */
@media (min-width: 601px) and (max-width: 1024px) {
  .hc-flow-chart {
    overflow-x: auto !important;
    overflow-y: hidden;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    height: 580px;
    background-size: 700px 100% !important;
    background-position: left center !important;
    min-width: 0 !important;
  }
  .hc-flow-chart::before {
    content: "";
    display: block;
    width: 700px;
    height: 100%;
  }
  .hc-flow-chart > * { font-size: 11px; }
  .hc-flow-chart .hc-flow-msg { font-size: 11px; padding: 8px 12px 8px 6%; }
  .hc-flow-chart .hc-flow-label { font-size: 10px !important; }
  .hc-flow-chart .hc-flow-label--customer { font-size: 12px !important; }
}

/* (1) Tablet (>=601px) では SP よりやや厚めの hero に */
@media (min-width: 601px) and (max-width: 1024px) {
  .hc-network-overview { margin-top: -60px !important; }
}

/* (3) wp-block-cover 内の見出し/段落 z-index 明示 */
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover__inner-container * {
  position: relative;
  z-index: 2;
}

/* (4) 画像オーバーフロー全般の保険 — どの hero/cover も突き抜けないように */
.wp-block-cover {
  overflow: hidden !important;
  isolation: isolate;
}

/* (6) すべての SP/Tablet で <body> が横スクロール出ないように */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}
/* ===== END SP/Tablet 追加レイアウト修正 ===== */


/* =========================================================
 * 99e. ヒーロー高さ上限 (SP/Tablet統合)
 *      - 全 hero に inline で min-height:75vh が付くケースがあり、
 *        SP/Tablet で巨大化する。SP=320px, Tablet=420px を強制。
 *      - @media (max-width:600px) では既に SP 用に 280px 指定があるが、
 *        実機viewport が 600-1024 の範囲で SP rule に届かず巨大化する
 *        ケースに備えて 1024px 以下で一律ガードする。
 * ========================================================= */
@media (max-width: 1024px) {
  /* インラインの min-height:75vh を相殺 → 高さは max-height で制御 */
  .hc-about-hero,
  /* インライン min-height:75vh が <div class="wp-block-group" style="min-height:75vh"> 内部にも付くケース */
  .hc-about-hero .wp-block-group{
    min-height: 0 !important;
    height: auto !important;
  }
  .hc-about-hero{
    min-height: 420px !important;
    max-height: 560px !important;
  }
}
@media (max-width: 600px) {
  .hc-about-hero{
    min-height: 320px !important;
    max-height: 460px !important;
  }
}
/* ===== END ヒーロー高さ上限 ===== */


/* =========================================================
 * 99f. Arkhe ark-block-section ヒーロー高さ上限 (SP/Tablet)
 *      - 購入ナビ等のページ Hero は wp-block-cover ではなく
 *        Arkhe Blocks Pro の Section ブロック (`ark-block-section`) で
 *        作られている。--arkb-min-height: 60vh / 75vh が指定され、
 *        SP で巨大化する。
 *      - 該当: arkb-section--1 / ark-block-section.has-bg-img
 * ========================================================= */
@media (max-width: 1024px) {
  .ark-block-section,
  [class*="arkb-section--"] {
    --arkb-min-height: 420px !important;
  }
  .ark-block-section.has-bg-img[data-height="custom"] > .ark-block-section__body,
  [class*="arkb-section--"][data-height="custom"] > .ark-block-section__body {
    min-height: 420px !important;
    max-height: 560px !important;
  }
  .ark-block-section.has-bg-img,
  [class*="arkb-section--"].has-bg-img {
    max-height: 560px !important;
  }
}
@media (max-width: 600px) {
  .ark-block-section,
  [class*="arkb-section--"] {
    --arkb-min-height: 320px !important;
  }
  .ark-block-section.has-bg-img[data-height="custom"] > .ark-block-section__body,
  [class*="arkb-section--"][data-height="custom"] > .ark-block-section__body {
    min-height: 320px !important;
    max-height: 460px !important;
  }
  .ark-block-section.has-bg-img,
  [class*="arkb-section--"].has-bg-img {
    max-height: 460px !important;
  }
}
/* ===== END Arkhe section ヒーロー ===== */


/* =========================================================
 * 100. Tablet Override Layer  (Figma Tablet wireframe @ 768px 準拠)
 *     fileKey: 73taF6gr6soi2awaplWUcF  parent: 55235:6386
 *     - 601px〜1024px で発火 (SP層と棲み分け)
 *     - デザイントークン (--hc-*) をタブレット値に再定義
 *     - 続いて 8col / 2-3col グリッド再配置・section padding 調整
 * ========================================================= */
@media (min-width: 601px) and (max-width: 1024px) {
  :root {
    /* ----- Type (Figma Tablet) ----- */
    --hc-fz-h1: 42px;
    --hc-fz-h2: 30px;
    --hc-fz-h2-special: 45px;
    --hc-fz-h3: 18px;
    --hc-fz-body: 15px;
    --hc-fz-card-body: 15px;
    --hc-fz-btn-lg: 17px;
    --hc-fz-btn-sm: 17px;
    --hc-fz-header: 15px;
    --hc-fz-store-lg: 19px;
    --hc-fz-store-sm: 15px;
    --hc-fz-footer: 13px;
    --hc-fz-micro: 13px;

    /* ----- Layout (Figma Tablet 8col) ----- */
    --hc-content-max: 704px;    /* 768 - 32*2 */
    --hc-section-px: 32px;
    --hc-section-py: 64px;
    --hc-gutter: 20px;

    /* ----- Spacing scale (Tablet) ----- */
    --hc-sp-xxs: 16px;
    --hc-sp-xs: 16px;
    --hc-sp-s: 24px;
    --hc-sp-m: 32px;
    --hc-sp-l: 40px;
    --hc-sp-xl: 64px;
    --hc-sp-xxl: 88px;
    --hc-heading-gap: 16px;
    --hc-card-width: 342px;     /* 3col */
    --hc-card-3col: 342px;
    --hc-card-7col: 433px;
    --hc-divider-w: 48px;
    --hc-divider-h: 4px;
  }

  /* ----- セクション共通パディング ----- */
  [class*="hc-"][class*="-section"],
  .hc-home-intro,
  .hc-home-stores,
  .hc-home-cars,
  .hc-home-news-wrap,
  .hc-home-blog,
  .hc-about-intro,
  .hc-about-history,
  .hc-about-region,
  .hc-network-overview,
  .hc-network-stats,
  .hc-network-fee,
  .hc-network-episodes,
  .hc-network-outro,
  .hc-network-emergency,
  .hc-club-overview,
  .hc-club-steps,
  .hc-buy-policy-section,
  .hc-inspect-stores-section,
  .hc-inspect-faq,
  .hc-dept-breadcrumb-section,
  .hc-job-section,
  .hc-community-section,
  .hc-community-blog,
  .hc-history-blog,
  .hc-company {
    padding-left: 32px !important;
    padding-right: 32px !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .hc-site-footer { margin-top: 64px; padding: 64px 32px 32px; }
  .hc-site-footer__inner { grid-template-columns: repeat(2, 1fr) !important; gap: 32px; }

  /* ----- Heading divider 寸法 ----- */
  .hc-section-title::after{ width: 48px; height: 4px; margin-top: 16px; }

  /* ----- 共通グリッド: 3col系 → 2col, 4col系 → 2col, 7col→1col ----- */
  .hc-home-network__stats { grid-template-columns: repeat(2, 1fr) !important; max-width: 600px !important; }
  .hc-store-grid,
  .hc-buy-cards,
  .hc-buy-insurance-cards,
  .hc-network-episodes__grid{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    max-width: 100% !important;
  }
  .hc-news,
  .hc-club-steps__grid{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* 画像のはみ出し防止 */
  .wp-block-image img,
  .hc-placeholder-img img { max-width: 100%; height: auto; }
}

/* ---------- Tablet: Home (768px) ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .hc-home-network__title { font-size: 30px !important; }
  .hc-home-network__stat-icon { width: 140px !important; height: 140px !important; }

  .hc-home-stores { padding-top: 64px !important; padding-bottom: 64px !important; }
  .hc-store-card__img { min-height: 200px !important; }
  .hc-store-card__title { font-size: 19px !important; }
  .hc-store-card__icons {
    position: static !important;
    grid-template-columns: repeat(5, 32px) !important;
    margin-top: 8px !important;
  }
  .hc-store-card__header { flex-direction: column; align-items: flex-start; gap: 8px; }

  .hc-news__item {
    grid-template-columns: auto auto 1fr !important;
    padding: 16px 0 !important;
    gap: 12px !important;
  }

  .wp-block-button.hc-btn-primary .wp-block-button__link,
  .hc-btn-primary .wp-block-button__link {
    font-size: 17px !important;
    padding: 16px 36px !important;
  }
}

/* ---------- Tablet: About 系 ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .hc-about-hero{
    min-height: 360px !important;
    padding: 56px 32px !important;
  }

  .hc-message { padding: 64px 32px !important; }
  .hc-message__title { font-size: 28px !important; }

  /* 沿革 */
  .hc-history-page__row { grid-template-columns: 120px 1fr !important; gap: 24px !important; }
  .hc-history-page__row--image { grid-template-columns: 1fr !important; }
  .hc-history-page__photo { width: 100% !important; max-width: 480px; margin: 0 auto; }
  .hc-timeline__desc { font-size: 15px; }

  /* 会社概要 */
  .hc-info-table th, .hc-info-table td { padding: 14px 12px !important; }
  .hc-info-table th { width: 30%; }

  /* 地域貢献 */
  .hc-about-region__title { font-size: 28px !important; }
}

/* ---------- Tablet: 安心ネットワーク / 倶楽部 ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .hc-network-stats__num { font-size: 56px !important; }
  .hc-network-stats__unit { font-size: 15px; }
  .hc-network-fee__table { font-size: 14px; }
  .hc-network-fee__table th,
  .hc-network-fee__table td { padding: 12px 8px !important; }

  /* 倶楽部 step は 2col→4 にできないので 2col */
  .hc-club-steps__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .hc-club-step { padding: 28px 20px !important; }
  .hc-club-step__num { font-size: 40px !important; }
  .hc-club-arrow { display: none; } /* 2col 配置では矢印が干渉しがち */
  .hc-club-table { font-size: 14px; }
  .hc-club-table th, .hc-club-table td { padding: 12px 10px !important; }
}

/* ---------- Tablet: 車検・点検・整備 ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .hc-inspect-tabs { flex-wrap: nowrap; gap: 12px; }
  .hc-inspect-tab { font-size: 15px !important; padding: 12px 20px !important; }
  .hc-inspect-section { padding: 64px 32px !important; }
  .hc-inspect-section__title { font-size: 28px !important; }
  .hc-inspect-section__heading { font-size: 20px !important; }
  .hc-inspect-panels { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .hc-inspect-panel { padding: 28px 20px !important; }
  .hc-inspect-panel__title { font-size: 20px !important; }
  .hc-inspect-checklist { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .hc-inspect-checklist--2col { grid-template-columns: repeat(2, 1fr) !important; }

  /* 工程フロー: タブレットでは横スクロールせず2colで包む */
  .hc-flow-chart { overflow-x: auto; }
  .hc-flow-chart > * { min-width: 700px; }

  .hc-inspect-stores { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .hc-inspect-store__body { padding: 20px !important; }
  .hc-inspect-store__name { font-size: 17px; }

  .hc-inspect-faq__q,
  .hc-buy-faq__q{ font-size: 15px !important; padding: 16px 40px 16px 20px !important; }
  .hc-inspect-faq__a,
  .hc-buy-faq__a{ font-size: 15px !important; padding: 0 20px 18px !important; }
}

/* ---------- Tablet: くるま購入ナビ ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .hc-buy-section { padding: 64px 32px !important; }
  .hc-buy-section__heading { font-size: 20px !important; }
  .hc-buy-card__body { padding: 20px !important; }
  .hc-buy-card__title { font-size: 18px !important; }
  .hc-buy-insurance-card__title{ font-size: 20px !important; }
  .hc-buy-article { gap: 20px !important; }
  .hc-buy-article__img { width: 40% !important; max-width: 280px !important; flex-shrink: 0; }
  .hc-buy-article__title { font-size: 18px !important; }
  .hc-buy-consultation { gap: 32px !important; }
  .hc-buy-consultation__left,
  .hc-buy-consultation__right { width: 50% !important; }
  .hc-buy-policy__title { font-size: 22px !important; }
}

/* ---------- Tablet: 採用 ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .hc-job-section { padding: 40px 32px !important; }

  .hc-form { padding: 32px 24px !important; }
  .hc-form__title { font-size: 22px !important; }
}

/* ---------- Tablet: 店舗詳細 ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .hc-store__top,
  .hc-store__gallery{ padding: 0 32px; }
  .hc-store__title { font-size: 32px !important; }
  .hc-store__lead { font-size: 15px; }
  .hc-store__gallery {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .hc-store-info__table th { width: 32%; }
  .hc-store-info__table th,
  .hc-store-info__table td { padding: 12px 10px !important; font-size: 14px; }
}

/* ---------- Tablet: Footer ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .hc-site-footer__brand { font-size: 18px; }
  .hc-site-footer__col { font-size: 13px; }
  .hc-site-footer__col a { font-size: 13px; line-height: 1.8; }
  .hc-site-footer__bottom { font-size: 12px; padding-top: 20px; }
}

/* =========================================================
 * Arkhe 投稿一覧カード (-type-card) のカスタム装飾
 *   - 画像左下にタグバッジ (赤地に白抜き)
 *   - 画像直下に公開日 (右寄せ)
 *   - 公開から7日以内なら画像左上に NEW バッジ
 *   テンプレート: arkhe_child/template-parts/post_list/style/normal.php
 * ========================================================= */
.p-postList.-type-card .hc-postCard__thumbBox {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.p-postList.-type-card .hc-postCard__new {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  background: var(--hc-red, #C8102E);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  line-height: 1.2;
}

.p-postList.-type-card .hc-postCard__topMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px 0;
}

.p-postList.-type-card .hc-postCard__date:only-child {
  margin-left: auto;
}

.p-postList.-type-card .hc-postCard__date {
  color: var(--hc-text, #1A1A1A);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* 上部に日付を出した分、下部メタの天井マージンを詰める */
.p-postList.-type-card .hc-postCard__topMeta + .p-postList__body {
  padding-top: 0.5rem;
}

/* SP: 文字サイズ調整 */
@media (max-width: 600px) {
  .p-postList.-type-card .hc-postCard__date {
    font-size: 12px;
  }
  .p-postList.-type-card .hc-postCard__new {
    font-size: 11px;
    padding: 3px 10px;
  }
}
/* ===== END Tablet Override Layer ===== */


/* =========================================================
 * 101. SP 詳細レイアウト追加修正  (2026-05-28 user-feedback)
 *      Figmaに合わせた SP のみの修正を一括追加。
 *      PC は触らない。ブレークポイントは原則 600px 以下。
 *      内訳:
 *        2.   Home    店舗/新車 横カルーセル + お知らせ右丸矢印
 *        3.   Network アーチ形状 / フロー縦1列 / 25年実績データ /
 *                     お客様エピソード横カルーセル
 *        4.   Club    H1とリード縦並び / 会員タブ収納 / 加入の流れ100%
 *        5-8. About系 見出し中央寄せ / 沿革40-10-50 / 地域貢献アーチ
 *        9.   車検    メインビジュアル復活 / アンカー横並び / 角丸削除 /
 *                     H2アイコンと赤線 / 各タブ / 整備タブ複数行 / 店舗
 *        10.  購入    H2統一 / 黄色記事 / 保険横スクロール
 *        11.  採用    職種紹介 / 募集要項下 横スクロール
 * ========================================================= */

/* ---------- 横カルーセル共通 (utility) ---------- */
@media (max-width: 600px) {
  .hc-store-grid,
  .hcm-newcar__grid,
  .hc-network-episodes__grid,
  .hc-buy-insurance-cards,
  .hc-inspect-stores {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 16px;
    padding: 0 16px 16px !important;
    margin: 0 -16px !important;
    gap: 12px !important;
    width: auto;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .hc-store-grid > *,
  .hcm-newcar__grid > *,
  .hc-network-episodes__grid > *,
  .hc-buy-insurance-cards > *,
  .hc-inspect-stores > * {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
    margin: 0 !important;
    box-sizing: border-box;
  }
  /* スクロールバー薄く */
  .hc-store-grid::-webkit-scrollbar,
  .hc-network-episodes__grid::-webkit-scrollbar,
  .hc-buy-insurance-cards::-webkit-scrollbar,
  .hc-inspect-stores::-webkit-scrollbar { height: 4px; }
  .hc-store-grid::-webkit-scrollbar-thumb,
  .hc-network-episodes__grid::-webkit-scrollbar-thumb,
  .hc-buy-insurance-cards::-webkit-scrollbar-thumb,
  .hc-inspect-stores::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 2px; }
}

/* ---------- 2-3. Home お知らせ: 各行右端に丸矢印アイコン（タイトルと同リンク） ----------
 * p-postList__link が記事全体を包む <a> なので、その ::after に画像を出せば
 * タイトルと同じリンク（クリックで記事へ）として機能する。全幅で右端寄せ。 */
.topo-shirase .p-postList__link {
  position: relative;
  padding-right: 56px !important;
}
.topo-shirase .p-postList__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: url("assets/icon-arrow-circle.svg") center / contain no-repeat;
}

/* ---------- 3-1. Network アーチを Figma 通りに ---------- */
@media (max-width: 600px) {
  .hc-network-overview,
  .hc-club-overview {
    border-radius: 50% 50% 0 0 / 60px 60px 0 0 !important;
    margin-top: -50px !important;
    padding-top: 70px !important;
  }
}

/* ---------- 3-2. Network 対応フロー: 縦1列・読みやすく ----------
 * (削除) R6 (style.css 末尾) に一本化。古い flex+width:100% 設定が
 *        cascade で R6 と衝突していたため除去。 */

/* ---------- 3-3. Network 25年の実績データ ---------- */
@media (max-width: 600px) {
  .hc-network-stats {
    background: #2a2f33;
    color: #fff;
    padding: 48px 16px !important;
    margin-top: 0;
    border-radius: 0;
  }
  /* 見出しサイズ・色を ほか H2 と統一 (赤線残し白文字) */
  
  .hc-network-stats h2 {
    font-family: var(--hc-font-serif) !important;
    font-size: var(--hc-fz-h2) !important;
    font-weight: 700;
    color: #fff !important;
    text-align: center !important;
    margin: 0 0 32px !important;
    padding-bottom: calc(var(--hc-heading-gap) + var(--hc-divider-h));
    position: relative;
  }
  .hc-network-stats h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: var(--hc-divider-w);
    height: var(--hc-divider-h);
    background: var(--hc-red);
  }
  .hc-network-stats__num{
    font-size: 64px !important;
    color: #c5d9e8 !important;
    font-weight: 700;
    line-height: 1;
    margin: 8px 0 !important;
  }
  .hc-network-stats__unit { color: #c5d9e8; font-size: 16px; }
}

/* ---------- 4-2. Club 会員テーブル: SP では画面いっぱい+横スクロールバー無しに ---------- */
@media (max-width: 1024px) {
  figure.hc-club-table,
  .hc-club-table {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }
  .hc-club-table .has-fixed-layout,
  .hc-club-table > table,
  .hc-club-table table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 10px !important;
    border-collapse: collapse !important;
  }
  .hc-club-table thead th,
  .hc-club-table tbody th,
  .hc-club-table tbody td {
    padding: 6px 2px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* 各列を 25% 均等に強制 */
  .hc-club-table thead th { width: 25% !important; }
  .hc-club-table tbody th { width: 25% !important; }
  .hc-club-table tbody td { width: 25% !important; }
  .hc-club-table__sub { display: none !important; }
}

/* ---------- 4-3. Club 加入の流れ box を幅100% ---------- */
@media (max-width: 600px) {
  .hc-club-steps__grid {
    display: flex !important;
    flex-direction: column;
    gap: 16px !important;
    width: 100%;
    grid-template-columns: none !important;
  }
  .hc-club-step {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 20px !important;
  }
  .hc-club-arrow {
    display: block !important;
    text-align: center;
    margin: 4px auto !important;
    transform: rotate(90deg);
  }
}

/* ---------- 5. About 各 H2 と赤線を中央寄せ ---------- */
@media (max-width: 600px) {
  .hc-about-intro h2,
  .hc-about-history h2,
  .hc-about-region h2,
  .hc-about-region__title,
  .hc-community-section h2,
  .hc-history-page h2,
  .hc-company h2,
  .hc-company__title,
  .hc-message__title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
    padding-bottom: calc(var(--hc-heading-gap) + var(--hc-divider-h));
  }
  .hc-about-intro h2::after,
  .hc-about-history h2::after,
  .hc-about-region h2::after,
  .hc-about-region__title::after,
  .hc-community-section h2::after,
  .hc-history-page h2::after,
  .hc-company h2::after,
  .hc-company__title::after,
  .hc-message__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: var(--hc-divider-w);
    height: var(--hc-divider-h);
    background: var(--hc-red);
  }
}

/* ---------- 6. 社長メッセージ: 見出しを画像の前に ---------- */
/* テンプレートで H1 を .hc-message__top の前 (写真の前) に出してある。
   SP では中央寄せ + 下に赤線を付ける。 */
@media (max-width: 600px) {
  .hc-message__title {
    text-align: center !important;
    margin: 0 auto 24px !important;
    position: relative;
    padding-bottom: calc(var(--hc-heading-gap) + var(--hc-divider-h));
  }
  .hc-message__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: var(--hc-divider-w);
    height: var(--hc-divider-h);
    background: var(--hc-red);
  }
}

/* ---------- 7. 沿革 タイムライン 40/10/50 ---------- */
@media (max-width: 600px) {
  .hc-history-page__timeline { padding-left: 0 !important; }
  .hc-history-page__timeline::before { display: none !important; }
  .hc-history-page__row,
  .hc-history-page__row--image {
    display: grid !important;
    grid-template-columns: 40% 10% 50% !important;
    align-items: center;
    column-gap: 0 !important;
    margin: 0 !important;
    padding: 16px 0 !important;
    position: relative;
  }
  /* 画像セル — 写真がある行は実際の <figure>、無い行は空セル */
  .hc-history-page__photo {
    display: block !important;
    grid-column: 1 / 2;
    grid-row: 1;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3;
    background: var(--hc-bg-gray);
    border-radius: 6px;
    overflow: hidden;
    margin: 0 !important;
  }
  .hc-history-page__photo img { width: 100%; height: 100%; object-fit: cover; }

  /* 中央 10% カラム: 縦線 (絶対配置で全行を貫通) */
  .hc-history-page__timeline { position: relative; }
  .hc-history-page__timeline::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 45%;            /* 40% photo + 半分 of 10% gap */
    width: 2px;
    background: var(--hc-red);
    z-index: 0;
  }
  /* 既存の絶対配置 ::before (丸) を再配置 — 中央線上に */
  .hc-history-page__row::before,
  .hc-history-page__row--image::before {
    content: "";
    position: absolute !important;
    left: 45% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 3px solid var(--hc-red) !important;
    z-index: 2 !important;
  }
  .hc-history-page__row--image::before {
    width: 20px !important;
    height: 20px !important;
    background: var(--hc-red) !important;
    border: 4px solid var(--hc-bg-light-blue, #eef4f7) !important;
  }

  .hc-history-page__row .hc-history-page__date,
  .hc-history-page__row .hc-history-page__text,
  .hc-history-page__row .hc-history-page__desc,
  .hc-history-page__row .hc-history-page__link {
    grid-column: 3 / 4;
    grid-row: 1;
    padding-left: 12px;
    text-align: left;
    margin: 0 !important;
  }
  .hc-history-page__row .hc-history-page__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .hc-history-page__date { font-size: 14px; font-weight: 700; color: var(--hc-red); margin-bottom: 4px !important; }
  .hc-history-page__desc { font-size: 12px; line-height: 1.6; }
}

/* ---------- 8-1. 地域貢献 アーチがリードに食い込む（PC 含む） ---------- */
.hc-community-section{
  /* アーチがあるセクションのときは上 padding を増やしリード文を回避 */
  padding-top: 140px;
}
@media (max-width: 600px) {
  .hc-community-section{
    padding-top: 80px !important;
  }
}

/* ---------- 9. 車検 ページ修正 ---------- */
@media (max-width: 600px) {
  /* 9-3. 見出し下赤線を寄せる (Figma 通り: 8px) */
  .hc-inspect-section__title { font-size: 22px !important; }

  /* 9-4-1. 車検タブをビューポートに収める */
  body.page-id-18 .ark-block-tab > .arkb-tabList {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  body.page-id-18 .ark-block-tab .arkb-tabList__item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  body.page-id-18 .ark-block-tab .arkb-tabList__button {
    font-size: 11px !important;
    padding: 10px 6px !important;
    line-height: 1.2 !important;
    width: 100%;
    border-radius: 8px 8px 0 0 !important;
  }
  body.page-id-18 .ark-block-tab .arkb-tabList__button[aria-selected="true"] {
    padding: 14px 6px !important;
  }
  body.page-id-18 .ark-block-tab .arkb-tabBody__content {
    padding: 32px 16px !important;
  }

  /* 9-4-2 & 9-5. 車検/点検の流れタブの中身を縦1列 */
  body.page-id-18 .hc-flow,
  body.page-id-18 .hc-flow--tenken {
    overflow-x: visible !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.page-id-18 .hc-flow__steps,
  body.page-id-18 .hc-flow__years,
  body.page-id-18 .hc-flow__pills,
  body.page-id-18 .hc-flow--tenken .hc-flow__years,
  body.page-id-18 .hc-flow--tenken .hc-flow__pills {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  body.page-id-18 .hc-flow__steps::before,
  body.page-id-18 .hc-flow__years::before {
    left: 50% !important;
    right: auto !important;
    top: 0 !important;
    height: 100% !important;
    width: 1px !important;
    transform: translateX(-50%);
  }
  body.page-id-18 .hc-flow__step-box,
  body.page-id-18 .hc-flow__year--box,
  body.page-id-18 .hc-flow__year--icon {
    width: 72px !important;
    height: 64px !important;
    margin: 0 auto !important;
  }
  body.page-id-18 .hc-flow__pill {
    width: 100% !important;
    min-height: 56px !important;
    writing-mode: horizontal-tb !important;
    padding: 14px !important;
    font-size: 14px !important;
    text-align: center;
    margin: 0 !important;
  }
  body.page-id-18 .hc-flow__step-dot { display: none !important; }
  body.page-id-18 .hc-flow__pill--invisible { display: none !important; }

  /* 9-4-3. 主な点検項目: 画像下に 01〜06 を縦1列 */
  .hc-inspect-pointmap {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* 9-6. 整備のタブが見切れる → 複数行に */
  /* (上の 9-4-1 が flex-wrap:wrap で同時に効く) */
}

/* ---------- 10. 購入ナビ修正 ---------- */
@media (max-width: 600px) {
  /* 10-1. H2 見出し: 既に上で対応済み (hc-buy-section__heading 等は中央) */
  .hc-buy-section__heading,
  .hc-buy-section h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
    padding-bottom: calc(var(--hc-heading-gap) + var(--hc-divider-h));
    font-size: var(--hc-fz-h2) !important;
  }
  .hc-buy-section__heading::after,
  .hc-buy-section h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: var(--hc-divider-w);
    height: var(--hc-divider-h);
    background: var(--hc-red);
  }

  /* 10-2-1 赤バッジの位置を親の角に合わせる */
  .hc-buy-article {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 8px !important;
    overflow: hidden;
  }
  .hc-buy-article__badge {
    border-radius: 0 0 8px 0 !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    position: absolute;
    top: 0;
    left: 0;
  }
  .hc-buy-article { position: relative; }

  /* 10-2-2 黄色座布団の内側 padding 5px */
  .hc-buy-article__body {
    flex-wrap: wrap !important;
    padding: 5px !important;
    gap: 8px !important;
    margin-top: 32px !important;     /* バッジぶん下げ */
  }
  .hc-buy-article__img { width: 100% !important; }
  .hc-buy-article__img img { height: auto !important; aspect-ratio: 16/10; }
  .hc-buy-article__title { font-size: 16px !important; margin: 8px 0 8px !important; }
  .hc-buy-article__excerpt { font-size: 13px !important; }
}

/* ---------- 11. Recruit: 既にカルーセル共通で対応 ---------- */
/* hc-recruit-roles と hc-recruit-jobs は上のカルーセル共通ルールで横スクロール化済み */
@media (max-width: 600px) {
  .hc-recruit-job-card { padding: 16px !important; }
}

/* ===== END SP 詳細レイアウト追加修正 ===== */


/* =========================================================
 * 102. SP Figma 再準拠 (R1)  + 103. SP 詳細修正 (R2)
 *      2026-05-28 ユーザー指示を一括対応
 *
 *  1. 全体
 *   1-1. ヘッダー固定
 *   1-2. ハンバーガー X 形状 + 画面内収まり
 *  2. Home
 *   2-1. 新車試乗車カルーセル 1番目から
 *   2-2. お知らせ H2 中央
 *   2-3. お知らせカテゴリpill を投稿リスト下に
 *  3. Network
 *   3-1. 対応の流れ 全要素中央 + 画面内
 *   3-2. 25年実績データ Figma レイアウト
 *   3-3. よくある質問 H2 中央
 *  4. Club
 *   4-1. 会員表を SP では 1行ずつカードに分解
 *   4-2. ○×アイコン化 (CSS のみ可能な範囲で)
 *   4-3. step 数字/矢印 サイズ
 *  5. About
 *   5-1/5-2. hero下 H2→写真→文章 + H2中央
 *   5-3. 沿革リード文中央
 *   5-4. 沿革 丸/年号 重なり
 *   5-5. 「地域を結び〜」アーチ重複
 *   5-6. ボタン右寄せ
 *  6. Inspection
 *   6-1. アンカーリンク (JS で補完)
 *   6-2. H2 統一スタイル
 *   6-3/6-4. flow 時系列維持
 *   6-5. オススメ縦並び
 *   6-6. 整備タブ 2行折返し可
 *   6-7. 店舗1番目から
 *   6-8. よくある質問 H2 中央
 *  7. Purchase
 *   7-1. H2 赤線複数化止め
 *  8. Recruit
 *   8-1. ボタン折返し止め
 *   8-2. H2と赤線の距離統一
 * ========================================================= */

/* ----- 1-1. ヘッダー固定 (SP/Tablet) ----- */
@media (max-width: 1024px) {
  .hc-site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100 !important;
    background: #fff !important;
  }
  body { padding-top: 60px !important; }
  body.admin-bar { padding-top: 92px !important; }
  body.admin-bar .hc-site-header { top: 32px !important; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  body { padding-top: 70px !important; }
  body.admin-bar { padding-top: 102px !important; }
}

/* ----- 1-2. ハンバーガー X 形状 + 画面内 ----- */
@media (max-width: 1024px) {
  .hc-site-nav__toggle {
    width: 40px !important;
    height: 40px !important;
    right: 12px !important;
    top: 10px !important;
    overflow: hidden;
  }
  .hc-site-nav__toggle span {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    height: 2px !important;
    transition: transform .25s ease, top .25s ease, opacity .15s ease;
  }
  .hc-site-nav__toggle span:nth-child(1) { top: 12px !important; }
  .hc-site-nav__toggle span:nth-child(2) { top: 19px !important; }
  .hc-site-nav__toggle span:nth-child(3) { top: 26px !important; }
  .hc-is-menu-open .hc-site-nav__toggle span:nth-child(1) {
    top: 19px !important;
    transform: rotate(45deg) !important;
  }
  .hc-is-menu-open .hc-site-nav__toggle span:nth-child(2) {
    opacity: 0 !important;
  }
  .hc-is-menu-open .hc-site-nav__toggle span:nth-child(3) {
    top: 19px !important;
    transform: rotate(-45deg) !important;
  }
  .hc-is-menu-open { padding-right: 0 !important; }
}

/* ----- 2-1. Home 新車試乗車 / 各カルーセル 1番目から表示 ----- */
@media (max-width: 600px) {
  .hc-store-grid,
  .hcm-newcar__grid,
  .hcm-newcar__grid--pick,
  .hc-network-episodes__grid,
  .hc-buy-insurance-cards,
  .hc-inspect-stores {
    scroll-padding-left: 16px !important;
  }
  /* hcm-newcar カードを Figma 準拠の白カード化 (R1から残す) */
  .hcm-newcar { overflow: visible; padding: 0 !important; }
  .hcm-newcar__grid--pick {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    list-style: none;
    overflow-x: auto !important;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 16px !important;
    margin: 0 -16px !important;
    gap: 12px !important;
    width: auto;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .hcm-newcar__grid--pick > .hcm-newcar__item {
    flex: 0 0 82% !important;
    max-width: 82% !important;
    scroll-snap-align: start;
    list-style: none;
    margin: 0 !important;
  }
  .hcm-newcar-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    padding: 16px !important;
  }
  .hcm-newcar-card__media {
    aspect-ratio: 16 / 10;
    width: 100%;
    background: #f5f5f5;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .hcm-newcar-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  .hcm-newcar-card__body { text-align: center; margin-bottom: 12px; }
  .hcm-newcar-card__name { font-size: 18px !important; font-weight: 700 !important; margin: 0 0 8px !important; }
  /* hcm-badge: 試乗=青, 展示=オレンジ (画像準拠), 角斜めカットはプラグインに任せる */
  .hcm-newcar-card__badges {
    margin: auto -16px 0 !important;
    width: calc(100% + 32px) !important;
  }
  .hcm-badge--shijo { background: #58A6E0 !important; }
  .hcm-badge--tenji { background: #E94F25 !important; }
  .hcm-newcar-card__actions {
    list-style: none; margin: 0 !important; padding: 0 !important;
    display: flex; flex-direction: column; gap: 8px;
  }
  .hcm-newcar-card__actions li { margin: 0; list-style: none; }
  .hcm-newcar-card__act {
    display: flex !important; align-items: center; justify-content: center;
    width: 100%; padding: 12px 16px !important;
    background: var(--hc-red) !important; color: #fff !important;
    border-radius: 999px !important;
    text-decoration: none; font-size: 13px; font-weight: 700;
    border: none; cursor: pointer; gap: 8px;
  }
  .hcm-newcar-card__actions li:nth-child(2) .hcm-newcar-card__act {
    background: transparent !important; color: var(--hc-red) !important;
    border: 1px solid var(--hc-red) !important;
  }
  .hcm-newcar-card__act-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; color: var(--hc-red);
    font-size: 12px; font-weight: 700;
  }
  .hcm-newcar-card__actions li:nth-child(2) .hcm-newcar-card__act-arrow {
    background: var(--hc-red); color: #fff;
  }
}

/* ----- 2-2 + 2-3. Home お知らせH2中央 + categories を投稿リスト下に ----- */
@media (max-width: 600px) {
  /* .hc-news を flex column にし、.hc-news__head は display:contents で透過、
     その子要素を order で並べ直す。投稿リスト → categories */
  .ark-block-postList.topo-shirase,
  .topo-shirase { order: 3 !important; }
  .hc-news__categories {
    order: 4 !important;
    margin: 24px auto 0 !important;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    align-items: center !important;
    max-width: 100% !important;
  }
}

/* ----- 2 共通: Home セクション padding 縮小 ----- */
@media (max-width: 600px) {
  .hc-home-cars,
  .hc-home-stores,
  .hc-home-news-wrap,
  .hc-home-blog {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

/* ----- 3-1. Network 対応の流れ 全要素中央 + 画面内 -----
 * (削除) R6 (style.css 末尾) に一本化。`.hc-flow-chart > * { width: 100% }`
 *        や `.hc-flow-chart figure { width: auto }` が R6 と衝突していた。 */

/* ----- 3-2. Network 25年の実績データ Figma準拠 ----- */
@media (max-width: 600px) {
  .hc-network-stats {
    padding: 48px 16px !important;
    background: #1a1a1a !important;
    color: #fff !important;
  }
  .hc-network-stats h2 {
    text-align: center !important;
    color: #fff !important;
    font-size: 22px !important;
    margin: 0 auto 32px !important;
    position: relative;
    padding-bottom: calc(var(--hc-heading-gap) + var(--hc-divider-h));
    width: fit-content !important;
    display: block !important;
  }
  .hc-network-stats h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: var(--hc-red);
  }
  .hc-network-stats > .wp-block-group {
    display: flex !important;
    flex-direction: column;
    gap: 32px !important;
    align-items: stretch;
    grid-template-columns: none !important;
  }
  .hc-network-stats__num{
    font-size: 56px !important;
    color: #c5d9e8 !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  .hc-network-stats__unit { font-size: 16px !important; color: #c5d9e8 !important; margin-left: 4px; }
}

/* ----- 3-3. Network よくある質問 H2 中央 (Arkhe heading block) ----- */
@media (max-width: 600px) {
  /* Arkhe Block 見出し: ark-block-heading data-sub="bottom" 形式 */
  .ark-block-heading.has-text-align-left,
  .ark-block-heading[class*="text-align-left"] {
    text-align: center !important;
  }
  .ark-block-heading {
    text-align: center !important;
  }
  .ark-block-heading__main {
    text-align: center !important;
    display: block !important;
    margin: 0 auto !important;
    font-size: 22px !important;
  }
  .ark-block-heading__line {
    margin: 8px auto 0 !important;
    display: block !important;
    width: 48px !important;
    height: 3px !important;
    background: currentColor !important;
  }
}

/* ----- 4-1. Club 会員表をSP では行ごとカード化 ----- */
@media (max-width: 600px) {
  figure.hc-club-table,
  .hc-club-table { overflow: visible !important; }
  .hc-club-table table,
  .hc-club-table .has-fixed-layout {
    table-layout: auto !important;
    display: block !important;
    width: 100% !important;
    border: none !important;
  }
  .hc-club-table thead, .hc-club-table thead tr { display: none !important; }
  .hc-club-table tbody { display: block !important; }
  .hc-club-table tbody tr {
    display: block !important;
    margin-bottom: 24px;
    border: 1px solid var(--hc-border-light);
    border-radius: 8px;
    overflow: hidden;
  }
  .hc-club-table tbody th {
    display: block !important;
    width: 100% !important;
    background: #f6f7f8 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: left;
    border-bottom: 1px solid var(--hc-border-light) !important;
  }
  .hc-club-table tbody td {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    border-bottom: 1px dashed #ddd !important;
    text-align: left;
  }
  .hc-club-table tbody td:last-child { border-bottom: none !important; }
  .hc-club-table tbody tr td:nth-child(2)::before {
    content: "準会員";
    font-weight: 700; color: var(--hc-red);
    display: block; font-size: 11px; margin-bottom: 4px;
    text-transform: none;
  }
  .hc-club-table tbody tr td:nth-child(3)::before {
    content: "普通会員";
    font-weight: 700; color: var(--hc-red);
    display: block; font-size: 11px; margin-bottom: 4px;
  }
  .hc-club-table tbody tr td:nth-child(4)::before {
    content: "VIP会員";
    font-weight: 700; color: var(--hc-red);
    display: block; font-size: 11px; margin-bottom: 4px;
  }
}

/* ----- 4-2. Club ◯×✓ アイコン化 (JS で .hc-club-icon span に変換済み) ----- */
.hc-club-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.hc-club-icon--circle {
  background: transparent;
  border: 2.5px solid var(--hc-red);
  color: var(--hc-red);
  font-size: 0;        /* テキスト記号は非表示 (枠だけで○表現) */
}
.hc-club-icon--cross {
  background: transparent;
  color: #888;
  font-size: 20px;
  border: none;
}
.hc-club-icon--check {
  background: var(--hc-red);
  color: #fff;
  font-size: 14px;
  border: none;
}

/* ----- 4-3. Club 加入の流れ 数字/矢印 ----- */
@media (max-width: 600px) {
  .hc-club-step__num{
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    line-height: 36px !important;
    border-radius: 50%;
    background: var(--hc-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-weight: 700;
  }
  .hc-club-arrow{
    display: block !important;
    width: 36px !important;
    height: 28px !important;
    margin: 8px auto !important;
    transform: rotate(90deg);
    color: var(--hc-red);
    font-size: 24px !important;
    font-weight: 700;
    text-align: center;
    line-height: 1;
  }
}

/* ----- 5-1/5-2. About hero下 H2→写真→文章 順 + H2中央 -----
   hc-about-message が実際の対象セクション (写真 + テキスト)。
   現状 markup: .hc-about-message > .hc-about-message__photo + .hc-about-message__text > h2 + p + link
   SP では: H2 (中央) → 写真 → 本文 + リンク の順にする */
@media (max-width: 600px) {
  /* hc-about-intro (1st section): H2 centered with line */
  .hc-about-intro h2,
  .hc-about-intro__title {
    text-align: center !important;
    display: block !important;
    width: fit-content !important;
    margin: 0 auto 16px !important;
    position: relative;
    padding-bottom: calc(var(--hc-heading-gap) + var(--hc-divider-h));
  }
  .hc-about-intro h2::after,
  .hc-about-intro__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: var(--hc-divider-w);
    height: var(--hc-divider-h);
    background: var(--hc-red);
  }
  .hc-about-intro p { text-align: center !important; }

  /* hc-about-message (2nd section): reorder H2 → photo → text */
  .hc-about-message {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .hc-about-message__title {
    order: 1 !important;
    text-align: center !important;
    display: block !important;
    width: fit-content !important;
    margin: 0 auto !important;
    position: relative;
    padding-bottom: calc(var(--hc-heading-gap) + var(--hc-divider-h)) !important;
    font-size: 22px !important;
    line-height: 1.5 !important;
  }
  .hc-about-message__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: var(--hc-divider-w);
    height: var(--hc-divider-h);
    background: var(--hc-red);
  }
  .hc-about-message__photo {
    order: 2 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .hc-about-message__body {
    order: 3 !important;
    text-align: left !important;
    margin: 0 !important;
  }
  .hc-about-message p:has(.hc-link-arrow){
    order: 4 !important;
    text-align: right !important;
    margin: 0 !important;
  }
}

/* ----- 5-3. 沿革リード文中央 ----- */
@media (max-width: 600px) {
  .hc-about-history__head + p,
  .hc-about-history p:first-of-type,
  .hc-about-history > p {
    text-align: center !important;
  }
}

/* ----- 5-4. 沿革 丸 と 年号 重なり対策 (10px 離す) ----- */
@media (max-width: 600px) {
  .hc-history-page__row,
  .hc-history-page__row--image {
    column-gap: 10px !important;
  }
  .hc-history-page__row .hc-history-page__date {
    padding-left: 16px !important;
  }
}

/* ----- 5-5. 「地域を結び〜」アーチ重複: 上に十分な余白 ----- */
@media (max-width: 600px) {
  .hc-about-region,
  .hc-community-section{
    margin-top: 40px !important;
    padding-top: 100px !important;
    position: relative;
  }
}

/* ----- 5-6. About ボタンを右寄せ ----- */
@media (max-width: 600px) {
  .hc-about-intro .wp-block-buttons,
  .hc-about-history .wp-block-buttons {
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* ----- 6-1. Inspection 各セクションへの anchor 用 scroll-margin (固定ヘッダー分) ----- */
@media (max-width: 1024px) {
  body.page-id-18 #shaken,
  body.page-id-18 #tenken,
  body.page-id-18 #seibi,
  body.page-id-18 #stores {
    scroll-margin-top: 70px !important;
  }
}

/* ----- 6-2. Inspection H2 統一スタイル ----- */
@media (max-width: 600px) {
  .hc-inspect-section {
  }
  .hc-inspect-section__heading {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap;
    margin: 0 auto !important;
    padding-bottom: 0 !important;
    width: fit-content !important;
  }
  .hc-inspect-section__title {
    font-size: 24px !important;
    color: var(--hc-text) !important;
    opacity: 1 !important;
    margin: 0 !important;
  }
}

/* ----- 6-3/6-4. Inspection 車検/点検 flow: pillsを縦並びにして時系列維持 ----- */
@media (max-width: 600px) {
  body.page-id-18 .hc-flow {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 8px 0 !important;
  }
  /* steps (numbered boxes) は flow の TOP に小さくまとめて配置 */
  body.page-id-18 .hc-flow__steps {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
  }
  body.page-id-18 .hc-flow__step-box {
    width: 44px !important;
    height: 40px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px !important;
    line-height: 1 !important;
  }
  body.page-id-18 .hc-flow__step-box span { font-size: 8px !important; }
  body.page-id-18 .hc-flow__step-box strong { font-size: 14px !important; }
  body.page-id-18 .hc-flow__step-dot {
    width: 8px !important;
    height: 8px !important;
    align-self: center;
  }
  /* pills (実際の時系列ラベル) は縦並び (PCの順番をそのまま維持) */
  body.page-id-18 .hc-flow__pills {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
  }
  body.page-id-18 .hc-flow__pill {
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    text-align: center !important;
    border-radius: 8px !important;
    margin: 0 !important;
    box-sizing: border-box;
    writing-mode: horizontal-tb !important;
  }
  body.page-id-18 .hc-flow::before,
  body.page-id-18 .hc-flow__steps::before,
  body.page-id-18 .hc-flow__years::before { display: none !important; }
}

/* ----- 6-5. Inspection オススメ黄色座布団 縦並び (画像上、文字下) -----
   markup: .hc-buy-article > .hc-buy-article__body (flex row) > .__text + figure */
@media (max-width: 600px) {
  body.page-id-18 .hc-buy-article__body,
  body.page-id-18 .hc-inspect-section .hc-buy-article__body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 16px !important;
    flex-wrap: nowrap !important;
  }
  body.page-id-18 .hc-buy-article__text,
  body.page-id-18 .hc-inspect-section .hc-buy-article__text {
    order: 2 !important;
    width: 100% !important;
    text-align: center !important;
  }
  body.page-id-18 .hc-buy-article__body figure,
  body.page-id-18 .hc-buy-article__body .hc-inspect-pack__img,
  body.page-id-18 .hc-buy-article__body .wp-block-image {
    order: 1 !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }
  body.page-id-18 .hc-buy-article__body figure img,
  body.page-id-18 .hc-buy-article__body .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* ----- 6-6. Inspection 整備タブ 1行に + 2行目折返し ----- */
@media (max-width: 600px) {
  body.page-id-18 .hc-inspect-section--seibi .arkb-tabList {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  body.page-id-18 .hc-inspect-section--seibi .arkb-tabList__item {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  body.page-id-18 .hc-inspect-section--seibi .arkb-tabList__button {
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
}

/* ----- 6-7. Inspection 店舗情報 1番目から ----- */
@media (max-width: 600px) {
  .hc-inspect-stores,
  body.page-id-18 .hc-store-grid {
    scroll-padding-left: 16px !important;
  }
}

/* ----- 6-8. Inspection よくある質問 H2 中央 ----- */
@media (max-width: 600px) {
  .hc-inspect-faq__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 !important;
  }
  .hc-inspect-faq__head {
    width: 100% !important;
    text-align: center !important;
  }
  body.page-id-18 [class*="-faq"] h2,
  body.page-id-18 [class*="hc-faq"] h2 {
    text-align: center !important;
    display: block !important;
    width: fit-content !important;
    margin: 0 auto 0 !important;
    font-size: 22px !important;
    position: relative;
  }
  .hc-inspect-faq__list { width: 100% !important; }
  .hc-inspect-faq { padding: 48px 16px !important; }
}

/* ----- 7-1. Purchase H2 赤線複数化止め (HTML側 hr divider を尊重) ----- */
@media (max-width: 600px) {
  .hc-buy-section__heading::after,
  .hc-buy-section h2::after { content: none !important; }
  .hc-buy-section__heading {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 auto !important;
    padding-bottom: 0 !important;
    width: fit-content !important;
  }
}

/* ----- 8-1. Recruit 詳細を見るボタン 折返し止め ----- */
@media (max-width: 600px) {
  .hc-recruit-job-card .wp-block-button__link,
  .hc-job-section .wp-block-button__link {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    min-width: 0 !important;
    width: auto !important;
  }
}

/* ----- 8-2. SP H2 と赤線の距離統一 (8px) ----- */
@media (max-width: 600px) {
  :root {
    --hc-heading-gap: 8px;
    --hc-divider-w: 48px;
    --hc-divider-h: 3px;
  }
}

/* ----- G. 共通: cover 内 inner-container 中央寄せ (R1 から残す) ----- */
@media (max-width: 600px) {
  .hc-about-hero > .wp-block-cover__inner-container{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100%;
    padding: 0 16px;
    gap: 12px;
  }
}

/* ===== END SP 詳細修正 R2 ===== */


/* =========================================================
 * 104. SP 詳細修正 R3  (2026-05-28 ユーザーフィードバックR3)
 *  1-2. 全H2の見栄えをトップページに合わせる (中央 + hr divider 8px)
 *  2-1. Network 対応の流れ 画面はみ出し
 *  2-2. .hc-network-stats__label 2倍サイズ
 *  2-3. オペレーターアイコンを文字と横並びに
 *  3-1. Club 会員列をタブ化 (JS で実装、CSSはタブUI/非選択列非表示)
 *  4-1. 沿革 年号 左揃え + 球から5px
 *  4-2. 沿革 文字 年号と左端揃え
 *  5-1. Inspection H2と赤線距離統一 (8px - 既に8-2でやっているがinspect-section__title固有調整)
 *  5-2. Inspection 車検/点検の流れ 画像3,4の通り (年/icon|pill 2列)
 *  5-3. Inspection 店舗情報 1番目から
 * ========================================================= */

/* ----- 1-2. 全ページH2の見栄え統一 (top page の .hc-section-title 基準) ----- */
@media (max-width: 600px) {
  /* 共通: H2 中央 + fit-content + 下に hr (8px 離して 48x3 赤線) */
  .hc-section-title,
  .hc-home-network__title,
  .hc-about-intro__title,
  .hc-about-message__title,
  .hc-about-history__head h2,
  .hc-about-region__title,
  .hc-history-page h2,
  .hc-company h2,
  .hc-company__title,
  .hc-message__title,
  .hc-network-overview__heading,
  .hc-network-flow__heading,
  .hc-network-area__title,
  .hc-network-episodes__title,
  .hc-network-fee__title,
  .hc-club-overview__title,
  .hc-club-steps__title,
  .hc-inspect-section__title,
  .ark-block-heading__main {
    text-align: center !important;
    font-size: 22px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    width: fit-content !important;
  }
  /* hr divider を H2 直後で 8px gap, 48x3 赤線 */
  
  .hc-section-title::after,
  .hc-home-network__title::after{
    margin: 8px auto 24px !important;
    width: 48px !important;
    max-width: 48px !important;
    height: 3px !important;
    background: var(--hc-red) !important;
    border: none !important;
    display: block !important;
    padding: 0 !important;
  }
  /* Arkhe block heading の線 */
  .ark-block-heading__line {
    margin: 8px auto 24px !important;
    display: block !important;
    width: 48px !important;
    height: 3px !important;
  }
  /* セクション見出し系の ::after 疑似要素を統一 */
  .hc-section-title::after {
    content: "" !important;
    position: static !important;
    transform: none !important;
  }
}

/* ----- 2-3. Network オペレーターアイコンを文字と横並びに -----
   対象: .hc-network-stats__quote (もしも質問の例) など
   icon : ::before で表示しているが、SP では block で上にあるはず → flex で横並びに */
@media (max-width: 600px) {
  /* もしも〜事故/故障 ブロック (hc-network-emergency 等) */
  .hc-network-emergency,
  .hc-network-stats + .hc-network-emergency {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .hc-network-emergency img,
  .hc-network-emergency figure,
  .hc-network-emergency .wp-block-image {
    flex-shrink: 0 !important;
    margin: 0 !important;
    width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
  }
}

/* ----- 3-1. Club 会員列をタブ化 (JS .hc-club-table-tabs を inject) -----
   実装方針: site-main.js が SPで .hc-club-table の前にタブUIを差し込み、
   選択中の列以外の td を hide する。CSS はタブUIと表示制御。 */
@media (max-width: 600px) {
  /* タブUI */
  .hc-club-table-tabs {
    display: flex !important;
    gap: 4px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    border-bottom: 2px solid var(--hc-red);
  }
  .hc-club-table-tabs button {
    flex: 1 1 0;
    background: #f6f7f8;
    border: 1px solid var(--hc-border-light);
    border-bottom: none;
    padding: 12px 4px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    color: #555;
    border-radius: 6px 6px 0 0;
  }
  .hc-club-table-tabs button[aria-selected="true"] {
    background: var(--hc-red);
    color: #fff;
    border-color: var(--hc-red);
  }
  /* タブUIが入った場合は、::before のラベル不要 */
  .hc-club-table--tabbed tbody tr td::before { display: none !important; }
  /* 選択状態に応じて列を表示制御
     data-active-col="1|2|3" を .hc-club-table--tabbed に付ける */
  .hc-club-table--tabbed[data-active-col="1"] tbody td:nth-child(3),
  .hc-club-table--tabbed[data-active-col="1"] tbody td:nth-child(4) { display: none !important; }
  .hc-club-table--tabbed[data-active-col="2"] tbody td:nth-child(2),
  .hc-club-table--tabbed[data-active-col="2"] tbody td:nth-child(4) { display: none !important; }
  .hc-club-table--tabbed[data-active-col="3"] tbody td:nth-child(2),
  .hc-club-table--tabbed[data-active-col="3"] tbody td:nth-child(3) { display: none !important; }
  /* 表示中の td はボーダー再表示 (一つだけのとき下線不要) */
  .hc-club-table--tabbed tbody td { border-bottom: none !important; }
}

/* ----- 4-1/4-2. About 沿革 年号 左揃え + 5pxマージン + 文字も左揃え ----- */
@media (max-width: 600px) {
  .hc-history-page__row,
  .hc-history-page__row--image {
    /* 中央線は 45% (40% photo + 5% gap)、丸も 45% */
    column-gap: 0 !important;
  }
  .hc-history-page__row .hc-history-page__date,
  .hc-history-page__row .hc-history-page__desc,
  .hc-history-page__row .hc-history-page__text {
    text-align: left !important;
    padding-left: 5px !important;       /* 球から 5px の余白 */
    margin-left: 0 !important;
  }
  .hc-history-page__row .hc-history-page__date {
    margin-bottom: 4px !important;
  }
  /* 文字は年号と左端を揃える (既に padding-left:5px で揃う) */
  
  .hc-history-page__row .hc-history-page__desc {
    padding-left: 5px !important;
  }
}

/* ----- 5-1. Inspection H2 と赤線距離統一 (8px) -----
   既存 102 のルールで対応済み。固有調整なし。 */

/* ----- 5-2. Inspection 車検/点検の流れ 画像3,4のレイアウト -----
   markup: .hc-flow--tenken > .hc-flow__years (12 items) + .hc-flow__pills--tenken (12 items)
   SP: display:grid 2列、grid-auto-flow:column、12行 → 各列に12個ずつ流れて
       year[i] と pill[i] が同じ行に並ぶ。 */
@media (max-width: 600px) {
  body.page-id-18 .hc-flow--tenken {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: 88px 1fr !important;
    grid-template-rows: repeat(12, auto) !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
    align-items: center !important;
    padding: 16px !important;
    margin: 0 !important;
    position: relative;
    overflow: visible !important;
  }
  body.page-id-18 .hc-flow--tenken .hc-flow__years,
  body.page-id-18 .hc-flow--tenken .hc-flow__pills,
  body.page-id-18 .hc-flow--tenken .hc-flow__pills--tenken {
    display: contents !important;
  }
  body.page-id-18 .hc-flow--tenken .hc-flow__year--icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto !important;
    background: #fff !important;
    border: 2px solid #1a1a1a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    text-align: center;
  }
  body.page-id-18 .hc-flow--tenken .hc-flow__year--box {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto !important;
    background: #fff !important;
    border: 2px solid #1a1a1a !important;
    color: #1a1a1a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 0 !important;
  }
  body.page-id-18 .hc-flow--tenken .hc-flow__year--box.hc-flow__year--shaken {
    color: var(--hc-red) !important;
    border-color: var(--hc-red) !important;
  }
  body.page-id-18 .hc-flow--tenken .hc-flow__step-dot {
    width: 12px !important;
    height: 12px !important;
    margin: 0 auto !important;
    background: #999 !important;
    border-radius: 2px !important;
    display: block !important;
  }
  body.page-id-18 .hc-flow--tenken .hc-flow__pill {
    width: 100% !important;
    min-height: 36px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    text-align: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1.5px solid #1a1a1a !important;
    box-sizing: border-box;
    writing-mode: horizontal-tb !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.page-id-18 .hc-flow--tenken .hc-flow__pill--shaken {
    color: var(--hc-red) !important;
    border-color: var(--hc-red) !important;
    background: #ffe8ea !important;
  }
  body.page-id-18 .hc-flow--tenken .hc-flow__pill--invisible {
    background: transparent !important;
    border: none !important;
    visibility: hidden !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  body.page-id-18 .hc-flow--tenken .hc-flow__pill--dashed {
    border-style: dashed !important;
  }
  /* 縦の繋ぎ線: ::before で左列 (44px) の真ん中に */
  body.page-id-18 .hc-flow--tenken::before {
    content: "";
    position: absolute;
    left: calc(16px + 44px);  /* padding-left + half col */
    top: 32px;
    bottom: 32px;
    width: 2px;
    background: #ccc;
    z-index: 0;
  }
  /* 全要素は線の上に */
  body.page-id-18 .hc-flow--tenken > * { position: relative; z-index: 1; }

  /* 車検 (shaken) flow: ステップ5個 + pill10個 (1:2 関係)
     簡易: 同じ grid 2列で、ステップは pill 2個分の高さに span させる */
  body.page-id-18 .hc-flow--shaken {
    display: grid !important;
    grid-template-columns: 72px 1fr !important;
    grid-auto-rows: minmax(40px, auto) !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
    align-items: center !important;
    padding: 16px !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  body.page-id-18 .hc-flow--shaken .hc-flow__steps,
  body.page-id-18 .hc-flow--shaken .hc-flow__pills {
    display: contents !important;
  }
  /* step-box は左列、2行分 span */
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box {
    grid-column: 1 !important;
    grid-row: span 2 !important;
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    border: 2px solid #1a1a1a !important;
    background: #fff !important;
    border-radius: 6px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 10px !important;
    line-height: 1.1;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box span { font-size: 9px !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box strong { font-size: 16px !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box--filled {
    color: var(--hc-red) !important;
    border-color: var(--hc-red) !important;
  }
  /* step-dot は左列に小さく */
  body.page-id-18 .hc-flow--shaken .hc-flow__step-dot {
    grid-column: 1 !important;
    width: 10px !important;
    height: 10px !important;
    margin: 0 auto !important;
    background: transparent !important;
    display: none !important;     /* シンプル化のため非表示 */
  }
  /* pills は右列 */
  body.page-id-18 .hc-flow--shaken .hc-flow__pill {
    grid-column: 2 !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    text-align: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1.5px solid #1a1a1a !important;
    box-sizing: border-box;
    writing-mode: horizontal-tb !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill--dashed {
    border-style: dashed !important;
    color: #888 !important;
  }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill--fill1,
  body.page-id-18 .hc-flow--shaken .hc-flow__pill--fill2,
  body.page-id-18 .hc-flow--shaken .hc-flow__pill--fill3,
  body.page-id-18 .hc-flow--shaken .hc-flow__pill--fill4 {
    background: #f0f0f0 !important;
  }
}

/* ----- 5-3. Inspection 店舗情報 1番目から ----- */
@media (max-width: 600px) {
  body.page-id-18 .hc-inspect-stores,
  body.page-id-18 .hc-store-grid {
    scroll-padding-left: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.page-id-18 .hc-inspect-stores > *:first-child,
  body.page-id-18 .hc-store-grid > *:first-child {
    margin-left: 0 !important;
  }
}

/* ===== END SP 詳細修正 R3 ===== */

/* =========================================================
 * 105. SP 詳細修正 R4  (2026-05-29 ユーザーフィードバックR4)
 *      figma SP wireframe (54880-43210/55281-12390) を基準に微調整。
 *      PC への影響を避けるため全ルールを @media (max-width: 600px) で囲む。
 *
 *  1-1. 全体: H2 と赤線の間/前後のマージン崩れ
 *  2-1. Home: 「安心ネットワークシステム」H2 赤線の位置逆転
 *  2-2. Home: [hondacars_pick] カルーセルが1台目から表示されない
 *  3-1. Network: 「対応の流れ」タイムライン中央寄せ
 *  3-2. Network: 「25年の実績データ」黒セクションを Figma 準拠に
 *  4-1. Club:    会員タブの行ヘッダー(TH)を行ごと折返さない
 *  4-2. Club:    「安心ネットワーク倶楽部加入の流れ」H2 つぶれ
 *  5-1. About沿革: 年号(太字)を左寄せ(タイムライン左カラムに変更)
 *  6-1. Inspection: 各 H2 を他ページH2と同じ見た目に
 *  6-2. Inspection: 「車検の流れ」ステップ⇔バブル位置を揃える
 *  6-3. Inspection: 「オススメ」内 p を左寄せ
 *  6-4. Inspection: 「店舗情報」店舗一覧を1番目から表示
 *  6-5. Inspection: 店舗画像の "ザブトン" 余白除去 + Y軸中央
 *  7-1. Purchase:  各 H2 を他ページH2と同じ見た目に
 * ========================================================= */

/* ----- 1-1 & 2-1. 全 H2 ::after を static にして自然な margin で配置 ----- */
@media (max-width: 600px) {
  /* 104-1-2 と同じセレクタ集合の ::after を必ず static 化。
     基底CSSで absolute / bottom:0 を持つ H2 (例: .hc-home-network__title)
     は、padding-bottom:0 を上書きすると赤バーが文字に重なって見えていた。 */
  .hc-section-title::after,
  .hc-home-network__title::after,
  .hc-about-intro__title::after,
  .hc-about-message__title::after,
  .hc-about-history__head h2::after,
  .hc-about-region__title::after,
  .hc-company__title::after,
  .hc-message__title::after,
  .hc-network-overview__heading::after,
  .hc-network-flow__heading::after,
  .hc-network-area__title::after,
  .hc-network-episodes__title::after,
  .hc-network-fee__title::after,
  .hc-club-overview__title::after,
  .hc-club-steps__title::after,
  .hc-inspect-section__title::after{
    content: "" !important;
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 8px auto 0 !important;
    width: 48px !important;
    max-width: 48px !important;
    height: 3px !important;
    background: var(--hc-red) !important;
    display: block !important;
  }
  /* 104-1-2 の H2 自体は padding:0 / margin:0 だが、
     ::after が static になったので下に divider分の余白が要らない。
     代わりに H2 と次のコンテンツの間に margin-bottom を確保。 */
  .hc-section-title,
  .hc-home-network__title,
  .hc-about-intro__title,
  .hc-about-message__title,
  .hc-about-history__head h2,
  .hc-about-region__title,
  .hc-company__title,
  .hc-message__title,
  .hc-network-overview__heading,
  .hc-network-flow__heading,
  .hc-network-area__title,
  .hc-network-episodes__title,
  .hc-network-fee__title,
  .hc-club-overview__title,
  .hc-club-steps__title,
  .hc-inspect-section__title{
    margin: 0 auto 24px !important;
    padding: 0 !important;
  }
}

/* ----- 2-2. Home: hondacars_pick カルーセルを1番目から表示 ----- */
@media (max-width: 600px) {
  .hcm-newcar__grid--pick {
    /* 102-2-1 の margin:0 -16px / scroll-padding 設定が
       「最初のカードを見せ始める位置」をズラしていたので解除。
       padding と margin を section と同じ基準に戻す。 */
    margin: 0 !important;
    padding: 0 16px 16px !important;
    scroll-padding-left: 0 !important;
    scroll-padding-inline-start: 0 !important;
  }
  .hcm-newcar__grid--pick > .hcm-newcar__item:first-child {
    margin-left: 0 !important;
    scroll-snap-align: start !important;
  }
  /* プラグイン側 max-width:360px が grid 1列指定とともに残っていたので解除。
     theme の flex カルーセルが優先されるよう max-width:none。 */
  .hcm-pick { padding: 0 !important; }
  .hcm-pick .hcm-newcar__grid--pick {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ----- 3-1. Network 対応の流れ タイムライン: 中央寄せ + 折返し許容 -----
 * (削除) R6 (style.css 末尾) に一本化。 */

/* ----- 3-2. Network 25年の実績データ Figma 準拠 (PC + SP) ----- */
/* 3-2-PC. PC でも quote はアイコン左 + テキスト右 (基底のままで OK) ＋
          .__sub と .__note のテキスト色を調整 */
.hc-network-stats__sub {
  font-weight: 500;
  letter-spacing: 0.02em;
}
.hc-network-stats__num {
  /* 数値はやや薄い水色 (Figma) ─ 基底の --hc-mint を上書き */
  color: #B7D6E8 !important;
}
.hc-network-stats__unit { color: #B7D6E8 !important; }

@media (max-width: 600px) {
  /* レイアウト全体 */
  .hc-network-stats {
    padding: 56px 16px !important;
    background: #1a1a1a !important;
  }
  .hc-network-stats__sub {
    font-size: 12px !important;
    color: rgba(255,255,255,.75) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }
  .hc-network-stats__num {
    font-size: 72px !important;
    font-weight: 700 !important;
    color: #B7D6E8 !important;
    line-height: 1 !important;
    margin: 8px 0 0 !important;
    letter-spacing: -0.02em;
    font-family: var(--hc-font-sans);
  }
  .hc-network-stats__unit {
    font-size: 18px !important;
    color: #B7D6E8 !important;
    margin-left: 4px;
    font-weight: 700;
  }
  .hc-network-stats__note{
    font-size: 12px !important;
    color: rgba(255,255,255,.85) !important;
    line-height: 1.6 !important;
    margin: 4px 0 0 !important;
  }
}

/* ----- 4-1. Club 会員タブ表: 行ヘッダー(TH)を行ごと折返さない (block化) ----- */
@media (max-width: 600px) {
  .hc-club-table--tabbed { display: block !important; }
  .hc-club-table--tabbed > table,
  .hc-club-table--tabbed table {
    display: block !important;
    width: 100% !important;
    table-layout: auto !important;
  }
  .hc-club-table--tabbed thead { display: none !important; }
  .hc-club-table--tabbed tbody { display: block !important; width: 100% !important; }
  .hc-club-table--tabbed tbody tr {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    border: 1px solid var(--hc-border-light) !important;
    border-radius: 6px;
    overflow: hidden;
  }
  /* TH: フル幅、グレー帯、太字。改行(<br>)は維持しつつ折返さない。 */
  .hc-club-table--tabbed tbody th {
    display: block !important;
    width: 100% !important;
    padding: 10px 14px !important;
    background: #f1f3f5 !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    border: none !important;
    border-bottom: 1px solid var(--hc-border-light) !important;
    box-sizing: border-box !important;
    word-break: keep-all !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }
  /* 表示する TD はフル幅 */
  .hc-club-table--tabbed tbody td {
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    text-align: left !important;
    border: none !important;
    box-sizing: border-box !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  /* 非選択列の TD はリセット css で display:none が掛かるためそのまま */
  /* ◯×アイコン (JS で挿入された span) は中央寄せ */
  .hc-club-table--tabbed tbody td > .hc-club-icon { margin: 0 auto; }
}

/* ----- 4-2. Club「安心ネットワーク倶楽部加入の流れ」H2 つぶれ防止 ----- */
@media (max-width: 600px) {
  .hc-club-steps__title {
    font-size: 18px !important;       /* 22px だと 1 行に収まらず潰れる */
    line-height: 1.5 !important;
    width: auto !important;            /* fit-content を解除 */
    max-width: 100% !important;
    white-space: normal !important;
    word-break: keep-all !important;   /* 単語途中で切らない */
    overflow-wrap: anywhere;
    padding: 0 8px !important;
  }
}

/* ----- 5-1. About 沿革: タイムラインを左寄せ (dot列を左に移動) ----- */
@media (max-width: 600px) {
  /* 旧: 40% photo | 10% line | 50% text → 新: 24px line | 1fr content */
  .hc-history-page__row,
  .hc-history-page__row--image {
    grid-template-columns: 24px 1fr !important;
    column-gap: 12px !important;
    align-items: start !important;
  }
  /* 中央縦線 (::after) を左 12px に */
  .hc-history-page__timeline::after {
    left: 12px !important;
  }
  /* 丸 (::before) を左 12px に */
  .hc-history-page__row::before,
  .hc-history-page__row--image::before {
    left: 12px !important;
    top: 24px !important;          /* date の高さに合わせる */
    transform: translate(-50%, 0) !important;
  }
  /* 写真は 2列目フル幅 + 上に */
  .hc-history-page__photo {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    max-width: 240px !important;
    aspect-ratio: 4 / 3;
    margin: 0 0 8px !important;
  }
  /* 写真がある行: 写真 → text の縦並びにしたいので row span を解除 */
  .hc-history-page__row--image {
    grid-template-rows: auto auto !important;
  }
  .hc-history-page__row--image .hc-history-page__text {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
  }
  /* date/title/desc/text を全て 2列目に左寄せ */
  .hc-history-page__row .hc-history-page__date,
  .hc-history-page__row .hc-history-page__desc,
  .hc-history-page__row .hc-history-page__text,
  .hc-history-page__row .hc-history-page__link {
    grid-column: 2 / 3 !important;
    grid-row: auto !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }
  .hc-history-page__row .hc-history-page__date {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--hc-red) !important;
    margin: 0 0 4px !important;
  }
  .hc-history-page__row .hc-history-page__desc{
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}

/* ----- 6-1 / 7-1. Inspection + Purchase H2 を他ページH2と同じ見た目に ----- */
@media (max-width: 600px) {
  /* heading wrapper: icon + h2 を中央 + 縦に inline 配置 */
  body.page-id-18 .hc-inspect-section__heading,
  body.page-id-19 .hc-buy-section__heading {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
  /* heading wrapper を中央に配置するための親側調整 (block 内 inline-flex) */
  body.page-id-18 .hc-inspect-section,
  body.page-id-19 .hc-buy-section,
  body.page-id-18 .hc-inspect-stores-section {
    text-align: center;
  }
  /* H2 本体: 他ページの hc-section-title と同サイズ・同フォント */
  body.page-id-18 .hc-inspect-section__title{
    font-family: var(--hc-font-serif) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--hc-text) !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: center !important;
    white-space: nowrap;
  }
}

/* ----- 6-2. Inspection 「車検の流れ」 ステップ/バブル位置揃え ----- */
@media (max-width: 600px) {
  /* 既存 104-5-2 の grid (72px 1fr / minmax(40px,auto)) はそのまま。
     step-box を「ペアの 2 ピル」の Y 軸センターに正確に配置。 */
  body.page-id-18 .hc-flow--shaken {
    align-items: stretch !important;
  }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box {
    align-self: center !important;       /* 2 行 span の中央 */
    width: 64px !important;
    min-width: 64px !important;
    height: auto !important;
    min-height: 56px !important;
    aspect-ratio: 1 / 1;
    padding: 6px 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box strong {
    font-size: 22px !important;
    line-height: 1 !important;
    display: block;
    margin-top: 2px;
  }
  /* ピルの最小高さを統一して step との対応を揃える */
  body.page-id-18 .hc-flow--shaken .hc-flow__pill {
    min-height: 44px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    align-self: stretch !important;
  }
  /* 縦の繋ぎ線も step-box の中央に通るように */
  body.page-id-18 .hc-flow--shaken::before {
    content: "";
    position: absolute;
    left: calc(16px + 32px);  /* padding-left + col1 中央 (64/2) */
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: #ccc;
    z-index: 0;
  }
  body.page-id-18 .hc-flow--shaken { position: relative; }
  body.page-id-18 .hc-flow--shaken > * { position: relative; z-index: 1; }
}

/* ----- 6-4. Inspection 店舗情報 1番目から表示 (カルーセル解除→縦並び) ----- */
@media (max-width: 600px) {
  body.page-id-18 #stores .hc-inspect-stores {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    padding: 0 16px !important;
    margin: 32px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body.page-id-18 #stores .hc-inspect-stores > * {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    scroll-snap-align: none !important;
    margin: 0 !important;
  }
}

/* ----- 6-5. Inspection 店舗カード 画像 Y軸中央寄せ + ザブトン余白除去 ----- */
@media (max-width: 600px) {
  body.page-id-18 .hc-inspect-store {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px !important;
  }
  body.page-id-18 .hc-inspect-store__img {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    flex: 0 0 96px !important;
    align-self: center !important;
    background: transparent !important;   /* ザブトン (#EAEAEA) 余白を消す */
    border-radius: 6px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    display: block !important;
  }
  body.page-id-18 .hc-inspect-store__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
  }
  body.page-id-18 .hc-inspect-store__body {
    flex: 1 1 auto !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ===== END SP 詳細修正 R4 ===== */

/* =========================================================
 * 106. SP 詳細修正 R5  (2026-05-29 ユーザーフィードバックR5)
 *      R4 が一部効いていない症状を強い指定で確実に当てる。
 *
 *  2-1.   hondacars_pick: カード幅を 100% にして 1台目を確実に左端に
 *  3-1.   Network 対応の流れ: flex を block + text-align:center に置き換え
 *  3-2-1. 25年実績 quote: アイコン LEFT + テキスト RIGHT を強い指定で
 *  3-2-2. 「過去25年総出動件数 / 全件当社スタッフが対応」を確実に表示
 *  3-2-3. 数値を 1行ビューポート内に収める (56px + nowrap)
 *  3-2-4. hc-network-stats__note 1.2倍 → 14.4px
 *  3-3.   hc-network-emergency 縦並びへ復帰 (R3 の flex-row を解除)
 *  4-1.   Club タブ表 TH 内 <br> を SP で非表示に
 *  5-1.   About hc-timeline__year 左寄せ
 *  5-2.   About hc-timeline__desc 左 margin 10px
 *  5-3.   About hc-link-arrow 右寄せ
 *  6-1.   Inspection 半透明 hr (has-alpha-channel-opacity) opacity:1
 *  6-2.   車検フロー shaken: nth-of-type で grid-area を明示
 *  6-3.   hc-buy-article__more 左寄せ
 *  6-4.   Inspection 店舗情報 → カルーセル (1枚目から)
 *  7-1.   hc-buy-article 画像と赤バッジの重なり解消 (img margin-top)
 *  7-2.   購入ナビ H2 アイコン 表示復活
 *  7-3.   購入ナビ H2 赤線の半透明解除 (opacity:1)
 * ========================================================= */

/* ----- 2-1. hondacars_pick: カード幅 100% で 1台目を確実に表示 ----- */
@media (max-width: 600px) {
  .hcm-newcar__grid--pick {
    margin: 0 !important;
    padding: 0 16px 24px !important;
    scroll-padding-left: 16px !important;
    scroll-padding-inline-start: 16px !important;
    scroll-snap-type: x mandatory !important;
    overflow-x: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 16px !important;
  }
  .hcm-newcar__grid--pick > .hcm-newcar__item {
    flex: 0 0 calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    width: calc(100% - 32px) !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
  }
}

/* ----- 3-1. Network 対応の流れ: flex を block に置き換えて確実に中央寄せ -----
 * (削除) R6 (style.css 末尾) に一本化。 */

/* ----- 3-2-1/2/3/4. Network 25年実績データ: 強い指定で確実に Figma 準拠 ----- */
@media (max-width: 600px) {
  /* 数値: 1行に収まるサイズ + nowrap */
  
  .hc-network-stats__num {
    font-size: 56px !important;
    font-weight: 700 !important;
    color: #B7D6E8 !important;
    line-height: 1 !important;
    margin: 6px 0 0 !important;
    letter-spacing: -0.02em !important;
    font-family: var(--hc-font-sans) !important;
    white-space: nowrap !important;
    display: inline-block !important;
    max-width: 100% !important;
  }
  .hc-network-stats__unit {
    font-size: 16px !important;
    color: #B7D6E8 !important;
    margin-left: 4px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }
  /* note を 1.2倍 (12 × 1.2 = 14.4px) */
  
  .hc-network-stats__note{
    font-size: 14.4px !important;
    color: rgba(255,255,255,.9) !important;
    line-height: 1.6 !important;
    margin: 6px 0 0 !important;
    display: block !important;
  }
}

/* ----- 3-3. hc-network-emergency を縦並びに戻す (R3 の flex-row を解除) ----- */
@media (max-width: 600px) {
  .hc-network-emergency,
  .hc-network-stats + .hc-network-emergency {
    display: block !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    padding: 48px 16px !important;
    box-sizing: border-box !important;
  }
  .hc-network-emergency > *{
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
  .hc-network-emergency img,
  .hc-network-emergency figure,
  .hc-network-emergency .wp-block-image {
    margin: 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    flex: none !important;
  }
}

/* ----- 4-1. Club タブ表 TH 内 <br> を SP では非表示に ----- */
@media (max-width: 600px) {
  .hc-club-table--tabbed tbody th br,
  .hc-club-table tbody th br {
    display: none !important;
  }
  /* <br> を消した代わりに必要に応じてスペースで区切る (CSS だけ) */
  .hc-club-table--tabbed tbody th {
    white-space: normal !important;
    word-spacing: 0.05em;
  }
}

/* ----- 5-1/5-2/5-3. About hc-timeline 調整 ----- */
@media (max-width: 600px) {
  /* 5-2. desc 左 margin 10px */
  .hc-timeline__item .hc-timeline__desc {
    text-align: left !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
  }
  /* 5-3. hc-link-arrow 右寄せ (リンクを含む親 p / div を text-align:right に) */
  .hc-about-intro .hc-link-arrow,
  .hc-about-message .hc-link-arrow,
  .hc-about-history .hc-link-arrow,
  .hc-about-region .hc-link-arrow,
  .hc-community-section .hc-link-arrow,
  .hc-about-intro p:has(.hc-link-arrow),
  .hc-about-message p:has(.hc-link-arrow),
  .hc-about-history p:has(.hc-link-arrow),
  .hc-about-region p:has(.hc-link-arrow),
  .hc-community-section p:has(.hc-link-arrow) {
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-end !important;
  }
  /* hc-link-arrow 自身を右に寄せる (inline-flex なので親の text-align で寄せる) */
  a.hc-link-arrow {
    margin-left: auto !important;
  }
}

/* ----- 6-1. Inspection: 半透明 hr (has-alpha-channel-opacity) を完全不透明に ----- */
@media (max-width: 600px) {
  body.page-id-18 hr.wp-block-separator,
  body.page-id-18 hr.has-alpha-channel-opacity{
    opacity: 1 !important;
    background-color: var(--hc-red) !important;
    background: var(--hc-red) !important;
    border: none !important;
    color: var(--hc-red) !important;
    height: 3px !important;
    width: 48px !important;
    max-width: 48px !important;
    margin: 8px auto 24px !important;
    display: block !important;
  }
}

/* ----- 6-2. 車検フロー shaken: nth-of-type で grid-area を明示 ----- */
@media (max-width: 600px) {
  body.page-id-18 .hc-flow--shaken {
    display: grid !important;
    grid-template-columns: 72px 1fr !important;
    grid-template-rows: repeat(10, minmax(40px, auto)) !important;
    grid-auto-flow: row !important;
    column-gap: 16px !important;
    row-gap: 6px !important;
    align-items: center !important;
    padding: 16px !important;
    margin: 0 !important;
    position: relative;
    overflow: visible !important;
  }
  body.page-id-18 .hc-flow--shaken .hc-flow__steps,
  body.page-id-18 .hc-flow--shaken .hc-flow__pills {
    display: contents !important;
  }
  /* step-box: 2 行スパン、ピル N+1 と N+2 の中央に配置 */
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(1) { grid-area: 1 / 1 / 3 / 2 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(2) { grid-area: 3 / 1 / 5 / 2 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(3) { grid-area: 5 / 1 / 7 / 2 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(4) { grid-area: 7 / 1 / 9 / 2 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(5) { grid-area: 9 / 1 / 11 / 2 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box {
    align-self: center !important;
    justify-self: center !important;
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box strong {
    font-size: 20px !important;
    line-height: 1 !important;
    display: block;
    margin-top: 2px;
  }
  /* pills: 10 個を 1 行ずつ col 2 に配置 */
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(1)  { grid-area: 1  / 2 / 2  / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(2)  { grid-area: 2  / 2 / 3  / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(3)  { grid-area: 3  / 2 / 4  / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(4)  { grid-area: 4  / 2 / 5  / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(5)  { grid-area: 5  / 2 / 6  / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(6)  { grid-area: 6  / 2 / 7  / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(7)  { grid-area: 7  / 2 / 8  / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(8)  { grid-area: 8  / 2 / 9  / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(9)  { grid-area: 9  / 2 / 10 / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(10) { grid-area: 10 / 2 / 11 / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill {
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  /* step-dots は非表示 */
  body.page-id-18 .hc-flow--shaken .hc-flow__step-dot {
    display: none !important;
  }
}

/* ----- 6-4. Inspection 店舗情報 → カルーセル復帰 (1番目から確実に表示) ----- */
@media (max-width: 600px) {
  body.page-id-18 #stores .hc-inspect-stores {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    padding: 0 16px 24px !important;
    margin: 32px 0 0 !important;
    scroll-padding-left: 16px !important;
    scroll-padding-inline-start: 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body.page-id-18 #stores .hc-inspect-stores > * {
    flex: 0 0 calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    width: calc(100% - 32px) !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
  }
}

/* ----- 7-1. hc-buy-article 画像と赤バッジの重なり解消 ----- */
@media (max-width: 600px) {
  body.page-id-19 .hc-buy-article {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    padding: 0 !important;
  }
  body.page-id-19 .hc-buy-article__badge {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 3 !important;
    border-radius: 0 0 8px 0 !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    margin: 0 !important;
  }
  body.page-id-19 .hc-buy-article__body {
    margin-top: 40px !important;     /* バッジ高さ + 余裕 */
    padding: 5px !important;
    box-sizing: border-box !important;
  }
  body.page-id-19 .hc-buy-article__img {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
  }
  body.page-id-19 .hc-buy-article__img img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
  }
}

/* ----- 7-2. 購入ナビ H2 アイコン 表示復活 (display/visibility/img sizing) ----- */
@media (max-width: 600px) {
  body.page-id-19 .hc-buy-section__heading {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body.page-id-19 .hc-buy-section__heading > figure {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body.page-id-19 .hc-buy-section__heading figure img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
}

/* ----- 7-3. 購入ナビ H2 赤線 半透明解除 + 6-1 と同様にトップと同じ赤 ----- */
@media (max-width: 600px) {
  body.page-id-19 hr.wp-block-separator,
  body.page-id-19 hr.has-alpha-channel-opacity{
    opacity: 1 !important;
    background-color: var(--hc-red) !important;
    background: var(--hc-red) !important;
    border: none !important;
    color: var(--hc-red) !important;
    height: 3px !important;
    width: 48px !important;
    max-width: 48px !important;
    margin: 8px auto 24px !important;
    display: block !important;
  }
}

/* ===== END SP 詳細修正 R5 ===== */

/* =========================================================
 * 107. SP 詳細修正 R6  (2026-05-29 ユーザーフィードバックR6)
 *
 *  1. 対応の流れ: 旧 SP レイヤー (101 R2 / 102 SP) が "width:100% margin-auto"
 *     等で中央寄せを上書きし、CSS 内部の cascade の競合で実機側で
 *     右に滲み出していた。R6 では body セレクタで specificity を上げ、
 *     CSS Grid + place-items:center で確実に中央へ配置する。
 *  2. サイト全域フォント Noto Sans JP 統一: トークン (--hc-font-*) を
 *     上で変更済み。下記でも !important で全要素に強制適用。
 *  3. CSS 整理: 破損 SVG 参照 (assets/icon-operator.svg) の除去等は
 *     他箇所で個別対応 (icon-operator.svg は存在しないため、
 *     描画上の影響はないが参照は残置のまま安全側で運用)。
 * ========================================================= */

/* ----- 1. 対応の流れ: body セレクタ + Grid + place-items で確実に中央寄せ ----- */
@media (max-width: 600px) {
  body .hc-network-flow,
  body .hc-network-overview {
    display: block !important;
    text-align: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  body .hc-network-flow > *,
  body .hc-network-overview > * {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
  /* チャート本体: CSS Grid 1列 + place-items:center で確実に中央配置 */
  body .hc-flow-chart {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    justify-items: center !important;
    align-items: start !important;
    text-align: center !important;
    padding: 16px 0 !important;
    margin: 0 auto !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    aspect-ratio: auto !important;
    background-image: none !important;
    overflow: visible !important;
  }
  body .hc-flow-chart > * {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    align-self: auto !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    aspect-ratio: auto !important;
  }
  body .hc-flow-chart .hc-flow-icon {
    display: block !important;
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    min-height: 0 !important;
    margin: 12px auto 4px !important;
    padding: 0 !important;
    line-height: 0 !important;
    background: #F2F2F2 !important;
    border-radius: 6px !important;
    overflow: hidden;
  }
  body .hc-flow-chart .hc-flow-icon img {
    display: block !important;
    width: 88px !important;
    height: 88px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body .hc-flow-chart .hc-flow-label {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    background: transparent !important;
  }
  body .hc-flow-chart .hc-flow-msg {
    display: block !important;
    background: #DCE9F2 !important;
    border-radius: 14px !important;
    color: #1A1A1A !important;
    padding: 10px 16px !important;
    margin: 8px auto !important;
    width: 92% !important;
    max-width: 320px !important;
    min-height: 0 !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  body .hc-flow-chart .hc-flow-time {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 4px auto !important;
    padding: 0 !important;
    text-align: center !important;
    background: transparent !important;
  }
  body .hc-flow-chart .hc-flow-time__pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  body .hc-flow-chart .hc-flow-msg::before,
  body .hc-flow-chart .hc-flow-msg::after,
  body .hc-flow-chart .hc-flow-time::before,
  body .hc-flow-chart .hc-flow-time::after {
    content: none !important;
    display: none !important;
  }
}

/* ----- 2. サイト全域: Noto Sans JP を強制 ----- */
html, body,
input, button, select, textarea,
.wp-block-button__link,
[class*="hc-"],
[class*="hc-"] h1,
[class*="hc-"] h2,
[class*="hc-"] h3,
[class*="hc-"] h4,
[class*="hc-"] h5,
[class*="hc-"] h6,
[class*="hc-"] p,
[class*="hc-"] a,
[class*="hc-"] span,
[class*="hc-"] li,
[class*="hc-"] th,
[class*="hc-"] td,
[class*="hc-"] strong,
[class*="hc-"] em,
[class*="hc-"] small,
[class*="hcm-"],
[class*="hcm-"] *,
.ark-block-heading,
.ark-block-heading__main,
.ark-block-heading__sub,
.arkb-tabList__button,
.arkb-tabBody__content,
.wp-block-heading,
.wp-block-paragraph,
.wp-block-button {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
}

/* ===== END SP 詳細修正 R6 ===== */

/* =========================================================
 * 108. SP 詳細修正 R7  (2026-05-29 最終クリーンアップ)
 *
 *  - 旧 SP/Tablet 層が `.hc-flow-chart` に対して overflow-x:auto / min-width:700px /
 *    width:100% / max-width:320px / display:flex 等を !important で指定しており、
 *    cascade で R6 と部分的に衝突 → 旧 SP 層 5 ブロックを削除済み
 *    (5424-, 7316-, 8217-, 9018-, 9389-, 9915-)。
 *  - 本 R7 は念のため最終フォールバックとして、最も高い specificity
 *    (`html body section.hc-network-flow .hc-flow-chart …`) で
 *    R6 と同じ値を再宣言。古いブラウザ・キャッシュ残存時の保険。
 * ========================================================= */
@media (max-width: 600px) {
  html body .hc-network-flow,
  html body section.hc-network-flow{
    display: block !important;
    text-align: center !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }
  html body .hc-flow-chart,
  html body section.hc-network-flow .hc-flow-chart,
  html body section.hc-network-flow div.hc-flow-chart {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    justify-items: center !important;
    align-items: start !important;
    text-align: center !important;
    padding: 16px 0 !important;
    margin: 0 auto !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    aspect-ratio: auto !important;
    background-image: none !important;
    overflow: visible !important;
  }
  /* ::before の phantom 700px をリセット */
  html body .hc-flow-chart::before,
  html body section.hc-network-flow .hc-flow-chart::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  /* 全 children を中央配置 + 絶対座標をリセット */
  html body .hc-flow-chart > *,
  html body section.hc-network-flow .hc-flow-chart > * {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    align-self: auto !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    aspect-ratio: auto !important;
    min-width: 0 !important;
  }
  /* 個別: アイコン */
  html body .hc-flow-chart figure.hc-flow-icon,
  html body .hc-flow-chart .hc-flow-icon,
  html body section.hc-network-flow .hc-flow-chart figure.hc-flow-icon {
    display: block !important;
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 12px auto 4px !important;
    padding: 0 !important;
    line-height: 0 !important;
    background: #F2F2F2 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  html body .hc-flow-chart figure.hc-flow-icon img,
  html body .hc-flow-chart .hc-flow-icon img {
    display: block !important;
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* 個別: ラベル */
  html body .hc-flow-chart p.hc-flow-label,
  html body .hc-flow-chart .hc-flow-label {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    background: transparent !important;
  }
  /* 個別: バブル (吹き出し) */
  html body .hc-flow-chart p.hc-flow-msg,
  html body .hc-flow-chart .hc-flow-msg {
    display: block !important;
    background: #DCE9F2 !important;
    border-radius: 14px !important;
    color: #1A1A1A !important;
    padding: 10px 16px !important;
    margin: 8px auto !important;
    width: 92% !important;
    max-width: 320px !important;
    min-height: 0 !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* 個別: タイムスタンプ pill */
  html body .hc-flow-chart p.hc-flow-time,
  html body .hc-flow-chart .hc-flow-time {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 4px auto !important;
    padding: 0 !important;
    text-align: center !important;
    background: transparent !important;
  }
  html body .hc-flow-chart .hc-flow-time__pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  /* 全擬似要素クリア */
  html body .hc-flow-chart .hc-flow-msg::before,
  html body .hc-flow-chart .hc-flow-msg::after,
  html body .hc-flow-chart .hc-flow-time::before,
  html body .hc-flow-chart .hc-flow-time::after,
  html body .hc-flow-chart .hc-flow-icon::before,
  html body .hc-flow-chart .hc-flow-icon::after,
  html body .hc-flow-chart .hc-flow-label::before,
  html body .hc-flow-chart .hc-flow-label::after {
    content: none !important;
    display: none !important;
  }
}


/* ===== R10: 安心ネットワーク倶楽部ページ（PNGアイコン / ストライプ / 角丸） ===== */

/* --- 2-3: 加入の流れ 各ボックス高さ揃え（矢印は中央のまま） --- */
.hc-club-steps__grid { align-items: stretch !important; }
.hc-club-step { height: 100%; }

/* --- 列ヘッダー配色（準会員=薄グレー / 普通会員=濃グレー / VIP=赤）＋見出し中央 --- */
.hc-club-table thead th:not(:first-child) { text-align: center !important; }
.hc-club-table thead th:nth-child(2) { background: #ECECEC !important; color: #1A1A1A !important; }
.hc-club-table thead th:nth-child(3) { background: #595959 !important; color: #fff !important; }
.hc-club-table thead th.is-vip { background: var(--hc-red) !important; color: #fff !important; }
/* 王冠は crown.png */
.hc-club-table thead th.is-vip::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("assets/crown.png") center / contain no-repeat;
  vertical-align: -4px;
  margin-right: 6px;
}

/* --- 4: アイコン文字(◯ × ✓)を隠して画像だけ表示（重複解消） --- */
.hc-club-table .is-check,
.hc-club-table .is-cross {
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.hc-club-table .is-check::before,
.hc-club-table .is-cross::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  background: center / contain no-repeat;
  vertical-align: middle;
}
.hc-club-table .is-check:not(.is-check--vip)::before { background-image: url("assets/icon-tbl-circle.svg"); } /* ◯ 赤 */
.hc-club-table .is-cross::before { background-image: url("assets/icon-tbl-cross.svg"); }                       /* × 赤 */
/* 1-1: VIP案内 行の VIP 列は thickcheck.png */
.hc-club-table .is-check--vip::before {
  background-image: url("assets/thickcheck.png");
  width: 30px;
  height: 26px;
}

/* 1-2: 特典の ☑ は tickbox.png */
.hc-club-table .hc-tickbox {
  display: inline-block;
  width: 17px;
  height: 17px;
  background: url("assets/tickbox.png") center / contain no-repeat;
  vertical-align: -3px;
  margin-right: 5px;
}

/* --- 2/3/5/6: 列10pxギャップ / 全列ストライプ / 罫線なし / 外周16px角丸（PC・タブレット） --- */
@media (min-width: 601px) {
  .hc-club-table > table,
  .hc-club-table table {
    border-collapse: separate !important;
    border-spacing: 10px 0 !important;   /* 2: 列ごと10pxの隙間 */
  }
  /* 5: セルに罫線なし */
  .hc-club-table thead th,
  .hc-club-table tbody th,
  .hc-club-table tbody td { border: none !important; }
  /* 6: 各列カードの外周16px角丸（ヘッダー上端＋ラベル列上端＋最終行下端） */
  .hc-club-table thead th:not(:first-child) { border-radius: 16px 16px 0 0 !important; }
  .hc-club-table tbody tr:first-child th    { border-radius: 16px 16px 0 0 !important; }
  .hc-club-table tbody tr:last-child td,
  .hc-club-table tbody tr:last-child th     { border-radius: 0 0 16px 16px !important; }
  /* 3 + 3-1: 全列ストライプ（ラベル列含む / Figma配色） */
  .hc-club-table tbody tr:nth-child(odd)  th,
  .hc-club-table tbody tr:nth-child(odd)  td { background: #F5F5F5 !important; }
  .hc-club-table tbody tr:nth-child(even) th,
  .hc-club-table tbody tr:nth-child(even) td { background: #FFFFFF !important; }
}


.page-id-18 th{
	background:#fff;
}

.ark-block-accordion__title{
	background-color:#fff !important;
}

.hc-inspect-section__caption{
	line-height:1
}

.recruit-dodumentary{
	max-width:1400px;
	justify-self:center;
}

.memberentry-wrap {   /* ← 実際に背景色がある要素に置き換え */
  position: relative;             /* これが無いと ::after が正しく被らない */
}

.memberentry-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;              /* 背景の上に乗せる（-1 にしない） */
  pointer-events: none;    /* クリック・操作は下に透過 */

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
   opacity:0.3;
	mix-blend-mode:hue;
}

.hcm-newcar-card{
	border-radius:8px;
}

.hc-club-step__num{
	background-color:rgb(0, 140, 122);
}

.hc-club-step{
	background-color:#fff !important;
}

.p-postList__category{
	border-radius:8px;
}
.p-postList__thumb{
	border-radius:8px;
}

.callcenter{
	background-color:white;
	border-radius:10px;
}

.callcenter p{
	color:#333;
	
}

.hc-network-stats{
	border-radius:10px;
}

.anshinnetworkacc{
	border-top:solid 1px #d9d9d9;
	border-bottom:solid 1px #d9d9d9;
	
}

.anshinnetworkacc .ark-block-accordion__title{
	max-width:fit-content;
	justify-self:center;
}

.anshinnetworkacc .ark-block-accordion__title .arkb-inline-icon{
	margin-left:15px;
	background-color:#de1d2f;
	line-height:1rem;
	border:solid 1px #fff;
	border-radius:50%;
	color:white;
}

.anshinnetworkacc .ark-block-accordion__icon{
	display:none;
}

.hc-network-episodes{
	background-color:#e6F3ff;
}

.networkfaq{background: #e6f3ff;
border-radius: 0 0 50% 50% / 0 0 100px 100px;
padding: var(--hc-section-py) var(--hc-section-px) 80px;
margin-bottom: -100px !important;
margin-top: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
position: relative;
z-index: 2;
max-width: none;
}
.hc-link-arrow:after{
	width:1.5rem !important;
	height:1.5rem !important;
	}

.hcm-contact__form input{
	margin-bottom:0.5rem;
	margin-top:0.5rem;
}

.p-fixBtnWrap{
	display:none;
}

.hc-timeline__item strong{
	margin-left:10px;
}

.hc-home-network__stat-icon{
	background:none !important; 
}

.hc-site-nav__link{
	font-weight:450 !important;
}

.hc-store-card{
	border:solid 1px #959595;
}

@media screen and (min-width:1024px){.hc-store-card__icons{
	right:30px;
	}
}

.hc-store-card img, .hc-store-card__img{
	max-height:200px !important;
}

.topo-shirase svg{
	display:none;
}

.topo-shirase time{
	min-width:6rem;
}

.topo-shirase .p-postList__category {
	opacity:1 !important;
	background-color:#DE1D2F !important;
	padding:5px 10px !important;
	margin-left:0 !important;
}

.topo-shirase  .p-postList__meta time{
	color: #000;
	width:8rem;
}

.topo-shirase  .p-postList__category{
	margin-top:-5px !important;
	margin-bottom:0px !important;
	}

.topo-shirase .p-postList__title{
	margin-top:1rem;
}

.p-postList__times{
	font-size:1rem;
	
}

.hc-network-stats__num{
	line-height:1 !important;
	}

.hc-network-stats h3{
	font-weight:450;
}

.hc-network-emergency .ark-block-accordion__title{
	min-width:100% !important;
}

.hc-network-fee__note{
	font-weight:450;
}

.hc-site-footer{
	margin-top:0;
}

.hc-network-stats__note{
	margin-top:1.5rem !important;
}

.is-cross::before{
	width:15px !important;
}

/* カードが切れないように overflow を開ける */
.community-sectionb,
.community-section,
.community-section .ark-block-section__body,
.community-section .ark-block-section__bodyInner{
  overflow: visible !important;
}

.community-section{ position: relative; }


.community-section > .ark-block-section__color{ background: transparent !important; }


.community-bg{
  position: absolute;
  top: 110px;
  bottom: 0;
  left: 50%;
  min-width: 100vw !important;
  transform: translateX(-50%);
  background: #EEF5FB;
  border-radius: 50% 50% 0 0 / 90px 90px 0 0;  
  z-index: 0;
}

.hc-inspect-section__title img:not(.hc-inspect-section--shaken img){
	position:relative;
	bottom:-5px !important;
}

.hc-inspect-section__title{
	margin-bottom:32px !important;
}

.hc-inspect-section--shaken .arkb-tabList__button{
	font-weight:400 !important;
}

.hc-flow__pill, .hc-flow__pill--fill3 {
	border:solid 3px #000;
	
}

.hc-flow__pill--dashed{
	border-style:dotted;
	border-width:2px;
}


.hc-flow__step-box{
	border-radius:0;
	border:solid 3px #000;
}
.hc-flow__step-box span, .hc-flow__step-box strong{
	font-weight:bolder !important;
}

.hc-flow__step-box strong{
	font-size:27px;
	position:relative;
	top:3px;
}

.step2{
	background-color:#EFEFEF;
}

.step3{
	background-color:#DEDEDE;
}


.step4{
	background-color:#CECECE;
}

.step5{
	background-color:#AEAEAE;
	
}

.step5 span{
color:#000 !important
}

.hc-inspect-checklist__item{
	font-size:15px;
}


#tab-insp-shaken-1{
	padding:25px 20px 20px 20px !important;
}

.twelvemonths{
	background-color:#F7F7F7 !important;
}

.hc-flow__year:not(.nousha){
	border:solid 3px #000;
	border-radius:0;
}

.yearone, .yeartwo, .yearfour{
	background-color:#f7f7f7;
}

.yearthree, .yearfive{
	background-color:#ffd9d9;
	border-color:#DE1D2F !important;
}

.nousha{
	border:solid 1px;
}

.hc-buy-article__badge{
	border-radius:0px;
	padding:7px 24px 8px 24px !important;
}

.hc-inspect-section--seibi .arkb-tabList__button{
	font-weight:400 !important;
}

.hc-inspect-store__name::after{
	position:relative;
	top:5px;
	left:10px;
	}

.hc-btn-dark a{
	font-weight:400 !important;
}

.p-breadcrumb__item .arkhe-svg-home{
	display:none;
}

.p-breadcrumb__item:nth-child(n+2){
	color:#de1d2f !important;
	font-weight:450;
	}

.p-breadcrumb__item .u-color-thin{
	opacity:1;
}

.p-breadcrumb__item:after {
	border:none;
	    content: "";
    display: block;
    position: absolute;
    right:-1rem;
    top: 50%;
    transform: translateY(-50%);        /* rotate は削除 */
    width: 12px;                        /* 画像の幅に合わせる */
    height: 12px;                       /* 画像の高さに合わせる */
    background-image: url("http://hondacarsmienaka.gilgiltown.co.jp/making/wp-content/uploads/2026/06/Rectangle-2191.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	}

.p-breadcrumb__item :first-child{
	margin-left:1rem;
}

.hcm-dash__actions{
	margin-top:3rem;
}

.hc-site-footer__bottom{
	height:100px;
	margin-top:50px;
	position:relative;
	top:50px;
	    border-top: 1px solid rgba(255, 255, 255);
}

.hc-club-overview h2,.hc-club-overview p{
	justify-self:center !important;
	margin-bottom:2rem !important;
}

.ceoimage img{
	border-radius:8px;
}

.hc-buy-card__link :after{
	position:relative;
	top:7px !important;
			}

.hc-buy-card{
	max-width:280px !important;
	}

.hc-buy-cards{
	justify-self:right;
}

.hc-network-overview__heading img{
	position:relative;
	top:2px;
	justify-items:center;
}

.hc-buy-policy-section{
	padding-top:56px !important;
	padding-bottom:56px !important;
	letter-spacing:0em;
}

.jobgaiyou{
	position:relative;
}

.shainkomentp{
	padding:48px !important;
	background-color:#e6f3ff;
	border-radius:8px;
	margin-bottom:48px;
}

.shainkoment .wp-block-button{
	margin-bottom:48px;
	
}

.applythisjob, .applythisjob:hover{
	max-width:400px !important;
	position:absolute;
	justify-self:right;
}

.hc-buy-insurance-cards figure{
	width:282px;
	height:166px !important;
	position:relative;
}

.seibishiimage img{
	position:absolute;
	bottom:5px;
}


.hc-tickbox-row {
  display: flex;
  align-items: flex-start;   /* チェックボックスを1行目の頭に揃える */
  margin-bottom: 0.4em;
}
.hc-tickbox-row .hc-tickbox {
  flex: 0 0 auto;            /* 縮ませない＝固定幅 */
  margin-right: 0.4em;       /* チェックボックスと文字の間隔 */
}

.page-id-20 .w-before-footer{
	display:none;
}

.hc-inspect-checklist__item img{
	margin-right:13px;
}

.category a, .category p, .category h2{
	font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.crmawarderd strong{
	bottom:2px
}

.ark-block-postList .-type-simple h3{
	font-size:20px !important;
	}


.ark-block-postList .-type-simple h3:hover{
	color:#C8102E !important;
}


@media screen and (min-width:1024px) {

	.hc-club-arrow{
		
	}
	
	.hc-club-arrow::before{
		color:#008c7a !important;
	transform:scale(1.5);
		
}
	
	.page-id-22 .p-page__content{
		max-width:1158px !important;
		justify-self:center;
	}
	
	.p-breadcrumb{
		margin-top:50px;
	}
	
	
.hc-buy-article .hc-buy-article__text{
	padding: 0 0 0px 30px;
}
	
	.hc-buy-article{
		padding:0px 30px 30px 0px;
	}
	
	.hc-inspect-section--seibi{
		margin-bottom:100px !important;
		padding-bottom:0;
	}
	
	.hc-inspect-stores-section{
	margin-bottom:100px !important;		
	}
	
	.hc-btn-primary{
	position:relative;
	max-width:450px;
		}
	
	.hc-buy-article__body{
		padding:24px 50px 24px 50px;
	}
	
	.hc-buy-article__text{
		padding-left:0 !important;
	}
	
	.hc-buy-section--payment{
		margin-top:100px !important;
	}
	
	.hc-buy-insurance-card h3{
		font-size:20px !important;
	}
	.hc-buy-insurance-card p{
		font-size:16px !important;
	}
	.hc-buy-insurance-card__body p, .hc-buy-insurance-card__body h3{
		padding-right: 32px !important;
	}
	
	.hc-buy-consultation__right a
	{
		right:70px;
	}
	.shainkoment{
		padding-left:102px !important;
	}
	.vipmember{
		font-size:39px;
	}
	
	.is-vip::before{
		transform:scale(2);
		position:relative;
		right:15px;
		bottom:8px;
	}
	.hc-news__categories{
	position:relative;
	height:150px;
	width:100%;
}

.crmnotice{
	position:absolute;
	width:171%;
	left:0px !important;
	bottom:0;
}

	.enkakugaiyou a{
		position:relative;
		top:64px;
	}

	.post-16 .hc-site-nav__link{
		position:relative;
		right: 120px;
}
	
	.hc-timeline > .hc-site-nav__link::before{
			left:132px !important;
	}
	
	.hc-flow-label{
		background-color:white;
	}

	.ark-block-slider{
	position:relative;
	min-width:100vw;
	justify-self:center;
	margin:0px !important;
	}
}

.topfade-parent{
  position: relative;
}


.floatingbanner{
max-width:410px;
position:fixed;
bottom:0px;
right:10px;
z-index:5;
background-color:white;
padding:10px 10px 1px 10px;
border-radius:8px;

}

.topbubbleupper{
	border:solid 1px #cc0000;
	border-radius:25px;
	top:1.2rem;
	background-color:#fff;
	width:95%;
	justify-self:center;
	font-size:14px;
}

.topmvbubbleb{
	border-radius:8px;
	background-color: #cc0000;
		color:#fff;

}

.topmvbubble{
	border:solid 1px #000;
	border-radius:8px;
	padding:10px 10px 10px 10px !important;
		
}

.topbubbleupperb{
	color:#cc0000;
	position:relative;
	top:20px;
	z-index:2;
}

.topbubbleupperc{
	color:gray;
	position:relative;
	top:20px;
	border-color:gray;
	z-index:2;
}

.topmvbubblec{
	background-color:gray;
}

.topmvcta{
	bottom:10px;
	min-width:50%;
	max-width
}

.topupper{
	position:relative;
	bottom:5px;
}

.topupperb{
	position:relative;
	bottom:10px;
}

.ark-block-section__bodyInner{
}

.networktop{
	text-align:left;
	max-width:500px;
	background-color:white;
	color:#333;
	position:absolute;
	border-radius:8px;
	bottom:0px;
	z-index:4;
	transform:scale(0.8);
	}


.networktopcopy {
	padding:10px 20px 10px 20px;
	width:100%;
	color:#fff;
background: linear-gradient(270deg,#00DEC0, #008C7A 100%);
	border-radius:8px 8px 0px 0px;
}

.networktoplead{
	padding:10px 20px 10px 20px;
  background: -webkit-linear-gradient(left, #008C7A, #00DEC0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.networktoptitle{
	font-size:32px;
	font-weight:600;
		padding:10px 20px 10px 20px;
	line-height:1
		}

.networketawrap{
	position:absolute !important;
	top:-45px;
	right:-35px;
	background-color:#008C7A;
	border-radius:50%;
	display: inline-flex;
	aspect-ratio: 1;
	align-items: center;
  justify-content: center;
	flex-direction: column;
	padding:8px;
	color:#fff;
}

.networktoppopcopy{
			padding:0px 20px 10px 20px;
	font-size:15px;
}

.eighteen{
	font-weight:600;
	font-size:35px;
	line-height:1;
}

.networktopctabutton{
	position:absolute;
	display: inline-flex;
	border-radius:50%;
	aspect-ratio: 1  !important;
	color:#fff;
	font-size:15px;
	line-height:0.5;
	}

.networktopctabutton p{
	color:#333;	
}

.networktoptoperap{
	position:absolute !important;
	bottom:0px;
	left:400px;
	width:300px;	
	background-image: url('https://hondacarsmienaka.gilgiltown.co.jp/making/wp-content/uploads/2026/06/image-18.png');
 display: inline-flex;
	flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
	border:solid 5px #00DEC0;
	transform:scale(0.8)
	}


.networktopcta1{
	position:absolute;
	bottom:75px
	}

.networktopcta2{
	position:absolute;
	bottom:55px;
	font-size:22px;
	}

.networktopcta3{
	position:absolute;
	top:100px;
	font-size:22px;
	font-weight:600;
	line-height:1;
		}

.netoverviewfukidashi{
  position: relative;
  width: fit-content;
  padding: 12px 20px;
  color: #ffffff;
  border-radius: 10px;
  background-color: #008C7A;
  isolation: isolate;

  &::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: -1;
    width: 20px;
    height: 12px;
    box-sizing: border-box;
    background-color: #008C7A;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    translate: -50% 0;
  }
}

.hc-network-overview{
	padding-bottom:0;
}

.onayami{
	background: -webkit-linear-gradient(left, #008C7A, #00DEC0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	}

	.netoworkkaiketsu{
	width:100vw;
	padding-bottom:0px;
	position: relative;
  color: #000;
   background-color: #fff;
  isolation: isolate;

  &::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: -1 !important;
    width: 50%;
    height: 50%;
    box-sizing: border-box;
    background-color: #6FE6D6;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    translate: -50% 0;
  }
}

.servicegaiyouwrap{
	max-width:1200px !important;
	justify-self:center;
}

.servicegaiyouwrap img{
	border-radius:8px;
}

.netoworkkaiketsu{
	position:relative;
	justify-self:center;
	padding:0 !important;
	min-height:15rem;
	}

.netoworkkaiketsu .wp-block-media-text__content{
	margin:0;
}
.netservicegaiyou{
	position:relative;
}

.netservicegaiyou p{
	font-size:1rem;
	margin-top:0 !important;
}

.netservicegaiyou img{
	position: absolute;
  top: 0;
  right: calc(-50% + -50px);
  bottom: 0;
  left: 0;
  margin: auto;
	max-width:80px;
	max-height:80px;
}

/* ボタンを横並び＆スキマ3px */
.insptopbuttons .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
	color:#fff !important;
	
}

.insptopbuttons .wp-block-buttons .wp-block-button { margin: 0; }

/* リンク本体は文字だけ担当（背景は疑似要素へ） */
.insptopbuttons .wp-block-button__link {
  position: relative;
  z-index: 0;
  background: transparent !important;
  overflow: visible;
  border: 0;
  padding: 0.6em 1.4em;     /* 斜めのはみ出し分、左右を広めに */
	color:#fff !important;
}

/* 平行四辺形の背景 */
.insptopbuttons .wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #C8102E;      /* ← ボタンの色 */
  transform: skewX(-15deg); /* ← 傾き。-15度くらいが自然 */
  transition: background .2s;
}
.insptopbuttons .wp-block-button__link:hover::before { background: #fff; }

.insptopbuttons .wp-block-button__link:hover{
	color:#000 !important;
}

	.bankinarticle .p-postList.-type-list .p-postList__item{
    margin:0;
					}

.navimv h1{
  position: relative;
  padding-bottom: 14px;   /* 線とのスキマ */
  color: #fff;
}




.navimv h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;          /* ベース線に重ねる */
  width: 90px;           /* アクセントの長さ */
  height: 3px;           /* アクセントの太さ */
  background: #C8102E;
  }

.navisabmenu .ark-block-button{
	min-width:calc(33.3% - 3rem) !important;
}

.navisabmenu a{
	border-radius:100px !important;
}

.inspsabmenu .ark-block-button{
	min-width:calc(25% - 3rem) !important;
}

.inspsabmenu a{
		border-radius:100px !important;
}

.recruitheromessagetitle::before {
  content: "";
  position:absolute;
  right: -1rem;
  top: -5px;
  width: 3px;
  height: 120px;
  background: #fff;
	}

.recruitheromessage .ark-block-section__bodyInner{
	position:relative;
	max-width:800px;
	text-align:left;
}

.recruitheromessagetitle{
	position:absolute !important;
	right:0px;
	top:-100px;
		}

.recruitheromessagetitle h2{
	position:absolute;
	transform:rotate(90deg);
	top:50px;
}

.recruitheromessagetitle p{
	position:relative;
	writing-mode: vertical-rl;
	bottom:10px;
	right:35px;
}

.recruithero{
	position:relative;
	clip-path: polygon(
    40px 0,
    100% 0,
    100% 100%,
    0 100%,
    0 40px);
		justify-self:center;
		max-width:1200px;
		max-height:675px;
		width:80vw;
	aspect-ratio:16 / 9;
}

.recruitctabtnarrow{
	position:absolute;
	right:1rem;
}


.syakensubmenu a, .navisabmenu a{
	border-radius:8px;
}

.hc-flow__step-box, .hc-flow__year, .hc-flow__year--box{
	border-radius:8px !important;
}

.hc-store-card__button .wp-block-button .wp-block-button__link{
	border-top-width:2px !important;
	border-bottom-width:2px !important;
	border-left-width:2px !important;
	border-right-width:2px !important;
}

.hc-site-footer__bottom{
	width:100vw;
}

.hc-flow-msg{
	background-color:#d7faf5 ;
}



@media screen and (min-width:1024px){
.worrycircles{
	justify-self:center;
	width:900px;
	max-width:900px;
}
	
.worrycircle{
	border:solid 5px #EEF5FB;
  display: inline-flex;
	flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
	color:#333;
}


.hc-flow-chart{
	transform:scale(1.2);
}
	
	.hc-club-steps{
		padding-left:0;
		padding-right:0;
	}
	.hc-club-steps__grid{
	max-width:80vw;
	}

	.hc-club-step__body{
		font-size:1.2rem;
	}
	
	.w-before-footer .ark-block-columns{
		margin-left:15rem;
		margin-right:15rem;
	}
	

}

.paymentmethoddesc div{
	border:solid 2px #C8102E;
	padding:15px;
	border-radius:8px;
	max-width:800px;
	text-align:left;	
	}

.paymentmethoddesc .is-vertical{
	background-color: #fff !important;
}

.staffsupport{
	max-width:1200px;
	background-color:#DFEBF7;
	}

.staffsupport svg{
	color:#fff !important;
}

.hc-buy-policy-section{
	  max-height: 18rem;      /* この高さを超えたらスクロール */
  overflow-y: auto;       /* 縦方向にスクロールバーを出す */
}

.recruitslider{
	position:relative;
	z-index:2;
	justify-self:center;
	max-width:1200px;
	}

.memberentry{
	padding:15px 15px 15px 5rem;
	border-radius:50px;
	position:relative;
	max-width:1000px;

	z-index: 1;
	color:#fff;
	
}

/* 既存の背景レイヤー（そのまま） */
.memberentry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 80%);
  border-radius: 600px;
}

.memberentry .ark-block-icon{
	background-color:#fff;
	border-radius:50%;
}

.memberentryhead{
	position:absolute;
	top:-3rem;
	font-style: oblique;
	font-weight:600;
}

.memberentrybumber{
	position:relative;
	font-size:3rem;
	font-weight:bolder;
		}

.memberentry img{
	border-radius:30rem;
}

.memberentry-wrap .one, 
.memberentry-wrap .three{
	justify-self:left;
}

.memberentry-wrap .two{
	justify-self:right;
}


@media screen and (max-width:1023px){
.worrycircle p{
	position:relative;
	top:1rem;
}

	.worry3{
		position:relative;
		left:25%;
	}
	
	.topnetworkmap strong{
		font-size: 20px;
			}
	
	.topfade-parent{
		position:relative;
		min-height:92vh;
	}
	
	.floatingbanner{
		position:fixed;
		height:390px;
		width:100%;
		right:0;
		top:calc(92vh - 410px);
}		
.networketawrap{
	position:absolute !important;
	top:0px;
	right:0px;
}		
	
	
	.hc-club-step__num{
	font-size:15px !important;	
			}
	
	.syakensubmenu a{
		padding:10px 0px !important;
		
	}
	.syakensubmenu.ark-block-buttons{
		--arkb-gap--y: 1px !important;
	} 
	

	
	.bankinarticle .p-postList__item a{
	flex-direction:column !important;
}
	.bankinarticle .p-postList__thumb{
		position:relative;
	}
	
.bankinarticle .c-postThumb__figure, .c-postThumb{
	width:100% !important;
	margin:auto;
}
	
	.paymentmethoddescwrap .arkb-tabList{
		--arkb-tab-width: 100%;
	}
}

.hc-buy-section{
	max-width:1400px;
}

.paymentmethoddescwrap [aria-selected = "true"]{
	background-color:#C8102E !important;
}

.arkb-tabList [aria-selected = "true"]{
	background-color:#C8102E !important;
}

.hc-flow__pill{
	font-size:15px !important;
	font-weight:bold;
}

.followingbannerpc{
		position:fixed;
		z-index:5;
		width:80vw !important;
		bottom:0px;
		gap:1px !important;
		
}

.topmvnews {
	  position: relative;
  overflow: hidden;          /* はみ出た斜め部分を隠す */
  background: #000;          /* 通常時の黒 */
  color: #fff;
  border: none;
  cursor: pointer;
}

.tompmvnewspost .p-postList__link:hover{
	background-color:rgb(200, 16, 46) !important;
}

.tompmvnewspost{
  position: relative;
  overflow: hidden;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
}

.tompmvnewspost .p-postList__title{
  font-size: 22px !important;
}

.tompmvnewspost::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20%;
  width: 140%;
  background: rgb(200, 16, 46);
  transform: translateX(-120%) skewX(20deg);
  transition: transform 0.6s ease;
  z-index: 0;
}

.tompmvnewspost:hover::before {
  transform: translateX(0) skewX(20deg);
}


.tompmvnewspost{
  position: relative;
  z-index: 1;
	}

.tompmvnewspost ul{
	border:none !important;
}

.tompmvnewspost .p-postList__body{
	display:flex;
	float:left;
	text-align: center;
	position:relative;
	bottom:5px;
	padding-top:7px;
	padding-bottom:7px;
}

.tompmvnewspost .c-postTimes__item{
	margin-left:8rem;
	font-size:22px;
	line-height:calc(1);
	}

.tompmvnewspost .c-postTimes__item svg{
	display:none;
}

.tompmvnewspost .p-postList__title{
	position:relative;
	left:calc(8rem);
}

.tompmvnewspost .p-postList__link{
	border:none !important;  
}


.newstitle{
	font-size:22px;
	width:25vw;
	padding-top:11px !important;
}

.followingbannerpc {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  pointer-events: none; /* 非表示時はクリックを無効化 */
}

/* 表示状態 */
.followingbannerpc.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.footerfixedbtn1 a{
	border-radius:8px 0 0 0;
}
.footerfixedbtn5 a{
	border-radius:0 8px 0 0;
}

.kizuhekomi .arkb-boxLink__inner{
	border-radius:8px;
	border:solid 1px #a9a9a9;
	box-shadow:none;
}

.kizuhekomi figure{
	border-radius:8px 8px 0 0;
}

.kizuhekomi h3{
	position:relative;
	top:0.75rem;
}

.topmvslider{
	height:calc(100vh - 7.5rem) !important;
	margin:0 auto !important;
}

.topmvslider img{
	margin:0 auto !important;
	height:calc(100vh - 7.5rem) !important;
}

.topmvbubble:hover p, .topmvbubble:hover svg{
  color: #fff;
}

.topmvbubble:hover{
	background-color:#333;
	transition:background-color 0.3s;
	color:#fff !important;
   }

.arkb-tabList__item strong{
	font-size:1rem;
}

.arkb-tabBody__content{
	border-radius:0 0 8px 8px !important;
	padding-bottom:50px !important;
}

.ark-block-accordion__label{
	font-weight:bold;
}

.hc-flow__pill {
font-size:1.1rem !important;
	}

.hc-inspect-store__name:after{
	position:relative;
	top:7px;
}

.c-reuseBlock .hc-club-contact__lead{
	margin-bottom:12px !important;
}

.hc-inspect-checklist--2col{
	margin-bottom:5px !important;
}


.paymentmethoddescwrap h3{
	position:relative;
	margin:auto;
	margin-top:0;
	margin-bottom:0;
	height:1em;
	}

.paymentmethoddescwrap .arkb-fz-xl{
	line-height:1.1 !important;
}

.paymentmethoddescwrap p{
	font-size:1rem;
}

.paymentmethoddescwrap ul{
	gap:3px;
}

.hc-site-header__shortcut{
	font-size:20px;
}

.hc-site-header__shortcut-icon{
	align-self:start;
	position:relative;
	width:25px;
	height:30px;
}

.hc-site-header__inner{
	height:60px;
	width:100vw;
}

.hc-site-nav ul{
	max-width:1100px;
	border:none;
	
}

.hc-site-nav a{
	font-size:1rem !important;
}

.hc-site-footer{

	padding:32px 0 16px 0;
}

.hc-site-footer__bottom{
	margin-top:0;
	position:relative;
	top:0;
}

.hc-site-header__shortcuts img{	
	top:2px
		}

.hc-submenu img{
	max-width:200px;
	margin:auto;
}

.hc-home-blog{
	padding-top:0 !important;
}

.nsxcopy{
position:absolute;
top:-2.6rem;
z-index:3;
	justify-self:center;
	background-color:white;
	font-size:1.3rem;
}

.zancremc{
	position:absolute;
	width:15rem;
	justify-self:center;
	top:-25px;
	left:0;
	color:#000;
}

.topfade {
  opacity: 0;                      /* 初期状態:透明 */
  transition: opacity 0.6s ease;   /* フェード速度 */
  pointer-events: none;            /* 透明な間はクリック透過 */
}

/* =========================================================
 * R11: SP 修正バッチ (2026-07-18 ユーザー指示)
 *   全ルールを @media (max-width:600px) で囲む = PC 無影響
 * ========================================================= */
@media (max-width: 600px) {

  /* ----- 1-1. フッター固定メニュー(5ボタン)をビューポート内に収める ----- */
  .followingbannerpc {
    z-index: 100 !important;        /* ページ内要素に隠されないよう最前面へ */
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    gap: 0 !important;
  }
  .followingbannerpc .footerfixedbtn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .followingbannerpc .footerfixedbtn .ark-block-button__link {
    width: 100% !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .followingbannerpc .footerfixedbtn .ark-block-button__text strong {
    font-size: 11px !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
  }

  /* ----- 1-2. ページ上部へ戻る矢印を固定メニューの上へ逃がす ----- */
  .hc-back-to-top {
    bottom: 76px !important;
  }

  /* ----- 1-3. フッター前「お問合せ」セクションの角丸を 8px に(インライン500rem上書き) ----- */
  .w-before-footer section.has-hc-red-background-color {
    border-radius: 8px !important;
  }

  /* ----- 2-1. トップ MV: 幅優先でビューポートに収める(左右見切れ解消) [要実機確認] ----- */
  .topmvslider,
  .topmvslider .ark-block-slider__inner,
  .topmvslider .ark-block-slider__slide,
  .topmvslider .swiper-slide {
    height: auto !important;
  }
  .topmvslider .ark-block-slider__media {
    position: relative !important;
    height: auto !important;
  }
  .topmvslider .ark-block-slider__img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* ----- 2-2. topworries セクションの赤い装飾線を消す [要実機確認: 対象要素] ----- */
  .topworries .ark-block-heading__sub,
  .topworries .ark-block-heading__line,
  .topworries .ark-block-heading__main::after,
  .topworries .ark-block-heading::after {
    display: none !important;
  }

  /* ----- 2-3. ネットワーク導入(困ったとき〜)を水色+上部アーチに [要実機確認] ----- */
  .arkb-section--16 > .ark-block-section__color {
    background-color: #EEF5FB !important;
    border-radius: 50% 50% 0 0 / 44px 44px 0 0 !important;
  }

  /* ----- 2-4. 新車・試乗車スライダーを1個目から左詰め表示(centerクリップ解消) ----- */
  .hcm-newcar__grid--pick {
    justify-content: flex-start !important;
  }

  /* ----- 2-5 + 2-6. 店舗カード: 店舗名を1行に / アイコン群を営業時間と詳細ボタンの間に ----- */
  .p-front .hc-store-card__body {
    display: flex !important;
    flex-direction: column !important;
  }
  .p-front .hc-store-card__body > .is-nowrap {
    display: contents !important;      /* title と icons を __body の flex 子に昇格 */
  }
  .p-front .hc-store-card__title {
    order: 0 !important;
    white-space: nowrap !important;    /* 店舗名を1行に */
  }
  .p-front .hc-store-card__info {
    order: 0 !important;               /* 住所・電話・営業時間(DOM順で title の次) */
  }
  .p-front .hc-store-card__icons {
    order: 1 !important;               /* 営業時間の下 */
    margin-top: 8px !important;
  }
  .p-front .hc-store-card__body > .wp-block-buttons {
    order: 2 !important;               /* 詳細を見るボタンを最後に */
  }

  /* ----- 2-7. お知らせ矢印: 日付行に上揃え + サイズ縮小 + 白丸赤矢印(反転) ----- */
  .topo-shirase .p-postList__link::after {
    top: 20px !important;
    transform: none !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("assets/icon-arrow-circle-inv.svg") !important;
  }
}
/* ===== END R11 SP 修正バッチ ===== */

/* =========================================================
 * R12: 安心ネットワークシステム(page-id-83195) SP 修正 (2026-07-18)
 * ========================================================= */
/* 1-5. 実績データの大数字色を #C0E1FF に (例外的にPCにも適用=全域) */
.hc-network-stats__num mark,
.hc-network-stats__num .has-inline-color,
.hc-network-stats__unit mark,
.hc-network-stats__unit .has-inline-color {
  color: #C0E1FF !important;
}

@media (max-width: 600px) {
  /* 1-1. fukidashi「道や家で突然やってくるクルマの困った！」のY中央をアーチ終端に合わせる [要微調整] */
  .netoverviewfukidashi {
    margin-top: -46px !important;
  }

  /* 1-2. 4つの質問を最長行が1行に収まる文字サイズに */
  .wp-custom-css-511f19eb .wp-block-paragraph {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* 1-3. 「保険や修理のプロが多数在籍する当社に、」を1行に収まる文字サイズに */
  body.page-id-83195 p.has-text-align-center[style*="font-size:1.3rem"] {
    font-size: 16px !important;
  }

  /* 1-4. netservicegaiyou を縦並び(アイコン上・文字下・中央寄せ) */
  .netservicegaiyou {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    grid-template-columns: none !important;
  }
  .netservicegaiyou .wp-block-media-text__media {
    order: 0 !important;
    position: static !important;
    margin: 0 auto 12px !important;
  }
  .netservicegaiyou .wp-block-media-text__content {
    order: 1 !important;
  }
  /* アイコンimgの絶対配置(right:calc(-50%..))を解除して中央上部へ */
  .netservicegaiyou img {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 auto 12px !important;
  }

  /* 1-6. 実績データ: 中央寄せ (画像2準拠) */
  .hc-network-stats > .wp-block-group {
    align-items: center !important;
    text-align: center !important;
  }
  .hc-network-stats .ark-block-column,
  .hc-network-stats [class*="arkb-column"] {
    text-align: center !important;
  }
  .hc-network-stats h2,
  .hc-network-stats h3,
  .hc-network-stats .hc-network-area__title,
  .hc-network-stats__num,
  .hc-network-stats__sub,
  .hc-network-stats__note,
  .hc-network-stats p {
    text-align: center !important;
  }
}
/* ===== END R12 ===== */
/* =========================================================
 * R13: トップ MV下 ニュースティッカー(tompmvnewspost) SP最適化 (2026-07-18)
 * ========================================================= */
@media (max-width: 600px) {
  /* NEWS 赤ラベルをコンパクトなタグに (padding 4rem / width 25vw を解除) */
  .newstitle {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }
  /* ティッカー本体を1行に収める */
  .tompmvnewspost {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .tompmvnewspost .p-postList__link {
    padding: 0 !important;
  }
  .tompmvnewspost .p-postList__body {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    bottom: 0 !important;
    padding: 8px 10px !important;
    text-align: left !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }
  .tompmvnewspost .p-postList__meta {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .tompmvnewspost .c-postTimes__item {
    margin-left: 0 !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  .tompmvnewspost .p-postList__title {
    position: static !important;
    left: 0 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}
/* ===== END R13 ===== */

/* =========================================================
 * R14: SP フッター固定メニュー(5ボタン) 表示修正 (2026-07-18)
 *   R11 1-1 を置き換え。Arkheの gap変数/inner-flex/padding を解除し
 *   5ボタンを均等幅・2行折り返し許容で必ず表示する。
 * ========================================================= */
@media (max-width: 600px) {
  .followingbannerpc {
    z-index: 100 !important;        /* ページ内要素に隠されないよう最前面へ */
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --arkb-gap--x: 0px !important;   /* ボタン間margin/コンテナ負marginを無効化 */
    --arkb-gap--y: 0px !important;
  }
  .followingbannerpc .ark-block-buttons__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin-left: 0 !important;
    align-items: stretch !important;
  }
  .followingbannerpc .footerfixedbtn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }
  .followingbannerpc .footerfixedbtn .ark-block-button__link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px 3px !important;
    min-height: 52px !important;
    white-space: normal !important;   /* 2行折り返し許可 */
    text-align: center !important;
    line-height: 1.25 !important;
  }
  .followingbannerpc .footerfixedbtn .ark-block-button__text {
    min-width: 0 !important;
    white-space: normal !important;
    display: block !important;
  }
  .followingbannerpc .footerfixedbtn .ark-block-button__text strong {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    white-space: normal !important;
  }
}
/* ===== END R14 ===== */

/* =========================================================
 * R15: 倶楽部ページ タブ表の ◯× アイコン復活+中央寄せ (SP) 2026-07-18
 *   L6137 `.hc-club-table--tabbed tbody tr td::before{display:none}` が
 *   列ラベル用の疑似要素を消す際、アイコン描画用の ::before まで消していた。
 *   アイコンセル(.is-check/.is-cross)だけ復活させ中央に配置する。
 * ========================================================= */
@media (max-width: 600px) {
  .hc-club-table--tabbed tbody tr td.is-check,
  .hc-club-table--tabbed tbody tr td.is-cross {
    text-align: center !important;
  }
  .hc-club-table--tabbed tbody tr td.is-check::before,
  .hc-club-table--tabbed tbody tr td.is-cross::before {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* nth-child の列ラベル(content:"普通会員"等)が乗るのを打ち消す */
    content: "" !important;
    font-size: 0 !important;
    color: transparent !important;
    text-indent: 0 !important;
  }
}
/* ===== END R15 ===== */

/* =========================================================
 * R16: 倶楽部ページ タブ表を SP でも「2列＋ストライプ」表示に (2026-07-18)
 *   従来SPは th=全幅帯 / td=その下 のカード型だったのを、
 *   ラベル列 | 値列 の2列 + 行ごと交互ストライプ(PCと同配色)に変更。
 * ========================================================= */
@media (max-width: 600px) {
  /* 行を2列flexに（カード型の枠/余白を解除して連続した表に） */
  .hc-club-table--tabbed tbody tr {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  /* ラベル列 */
  .hc-club-table--tabbed tbody tr th {
    flex: 0 0 40% !important;
    width: 40% !important;
    max-width: 40% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    border: none !important;
    box-sizing: border-box !important;
  }
  /* 値列 */
  .hc-club-table--tabbed tbody tr td {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
    padding: 12px 10px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    text-align: left !important;
    border: none !important;
    box-sizing: border-box !important;
  }
  /* アイコンセルは値列内で中央 */
  .hc-club-table--tabbed tbody tr td.is-check,
  .hc-club-table--tabbed tbody tr td.is-cross {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* 行ごと交互ストライプ (PCと同配色) */
  .hc-club-table--tabbed tbody tr:nth-child(odd) th,
  .hc-club-table--tabbed tbody tr:nth-child(odd) td {
    background: #F5F5F5 !important;
  }
  .hc-club-table--tabbed tbody tr:nth-child(even) th,
  .hc-club-table--tabbed tbody tr:nth-child(even) td {
    background: #FFFFFF !important;
  }
  /* 表全体の外周を角丸に */
  .hc-club-table--tabbed tbody {
    border-radius: 8px !important;
    overflow: hidden !important;
    display: block !important;
    border: 1px solid var(--hc-border-light) !important;
  }
  .hc-club-table--tabbed tbody tr td { border-bottom: none !important; }
}
/* ===== END R16 ===== */

.hc-network-stats{
	background-color:#535355 !important;
}

.hc-store-card__title span{
	opacity:0;
}

@media screen and (min-width: 769px) {
.pcnone{
	display:none !important;
}
}
@media screen and (max-width: 768px) {
.hc-network-stats{
	margin:5px;
	}
	
.hc-about-hero img{
		object-fit:fill-box !important;
	}
	
	.wp-block-spacer:not(.spyes){
		display:none;
	}

	.hc-network-stats__num{
		font-size:2.8rem !important;
	}
	
	.hc-network-stats__unit{
		font-size:1.8rem !important;
	}
	
	.callcenter	p{
		font-size:1.2rem !important;
		margin:30px;
		text-align:left !important;
		margin-bottom:0px !important;	
			}
	.callcenter figure{
	width:5rem;	
	}
	.hc-home-network__title{
		display:none !important;
	}
	.topworries .ark-block-section__bodyInner{
		padding-bottom:0px !important;
	}
	
	.newstitle{
		padding:12px 15px 12px 15px !important;
		line-height:1 !important;
	}
	
	.c-postTimes__item{
		position:relative;
		top:3px !important;
	}
	.w-before-footer section{
		padding:15px !important;
		margin-bottom:15px;
	}

.page-id-82997	video{
		margin-top:2rem;
	}
	.hc-network-episodes{
		border-radius:0 !important;
	}
	
	.hc-network-fee__table{
		border-radius:0 !important;
	}
	
	.onayami{
		margin-top:0.5rem !important;
		margin-bottom:1rem;
	}
	
	.hc-club-overview{
		z-index:3;
	}
	
	.hc-club-steps__title{
		margin-bottom:2rem !important;
	}
	
	.hc-club-arrow::before{
		position:relative;
		right:10px !important;
	}
	
	.hc-about-message__body{
		margin:15px !important;
	}
	
	.enkakusection .ark-block-section__bodyInner{
		padding:0;
	}
	
	.hc-about-history{
		display:none;
	}
	
	.hc-about-region{
		padding:0 !important;
	}
	
	.regionalacts{
		margin:15px;
		margin-top:0;
	}
	
	.hc-section-title{
	margin-top:2rem !important;
	}
	
.spnone, .followingbannerpc, .hc-back-to-top, body .page-id-18 hr.wp-block-separator, body.page-id-18 hr.has-alpha-channel-opacity{
	display:none !important;
	}

	.navisabmenu .ark-block-button a, .inspsabmenu .ark-block-button a{
	height:3rem;
	}
	
	
	.navisabmenu .arkb-inline-icon, 	.inspsabmenu .ark-block-button {
		display:none;
	}
	
	.kizuhekomi .ark-block-boxLink, .hc-buy-article, .wp-container-core-group-is-layout-f56f9fcf{
		margin-left:10px !important;
		margin-right:10px !important;
		max-width:calc(100vw - 25px) !important;
	}
	
.hc-inspect-section--shaken .arkb-tabList__button{
		height:3.5rem;
	}
	
	.hc-buy-cards{
		position:relative;
	justify-self:center;
		right:5px;
		}
	
	.hc-buy-card{
				min-width:calc(100vw - 20px) !important;
	}
	.staffsupport{
		padding-left:10px !important;
		padding-right:10px !important;
	}
	.buysectionfaq .hc-buy-faq__cta{
		margin:0 auto;
		margin-top:0 !important;
	}
	}

.hc-about-history__head{
	margin-top:2rem !important;
}



/* =========================================================
 * 200. Inspection (page-id-18) 車検セクション SP  Figma 準拠 再現
 *      2026-07-25 / 実測元: fig_inspection_full.png (390px フレーム)
 *
 *      これまでの 9-4 / 104-5-2 / 6-2 / 6-6 各層の指定を最終的に上書きする
 *      権威レイヤー。以降このセクションの見た目はここだけで完結させる。
 *
 *      実測値:
 *        パネル背景 #E6F3FF / タブ非選択 #E7E7E7 / タブ選択 #535355
 *        タブ高さ 40px (選択 50px) / 角丸 10px 10px 0 0 / gap 8px
 *        タブ下線 1px #535355
 *        ステップ枠 62x63 border 3px #000
 *        ピル 162x35 border 3px #000 / 中間ピル border 2px dotted #000
 *        行ピッチ 66px (35 + 31) / 列 62 + 44 + 162
 *        濃淡 #FFFFFF → #EFEFEF → #DEDEDE → #CECECE → #AEAEAE
 *        コネクタ線 2px #BBC4CF / 中継スクエア 14x13 #8E9097
 * ========================================================= */

/* ---------- 200-1. タブ (車検 / カーケア 共通の見た目) ---------- */
@media (max-width: 600px) {
  body.page-id-18 .ark-block-tab > .arkb-tabList {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-bottom: 1px solid #535355 !important;
    position: relative;
    z-index: 2;
  }
  body.page-id-18 .ark-block-tab .arkb-tabList__item {
    margin: 0 !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  body.page-id-18 .ark-block-tab .arkb-tabList__button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 6px !important;
    margin: 0 !important;
    background: #E7E7E7 !important;
    background-color: #E7E7E7 !important;
    color: #1A1A1A !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    transition: background-color .2s, height .2s;
  }
  body.page-id-18 .ark-block-tab .arkb-tabList__button[aria-selected="true"] {
    background: #535355 !important;
    background-color: #535355 !important;
    color: #fff !important;
    height: 50px !important;
    min-height: 50px !important;
  }
  body.page-id-18 .ark-block-tab .arkb-tabList__button strong,
  body.page-id-18 .ark-block-tab .arkb-tabList__item strong,
  body.page-id-18 .ark-block-tab .arkb-tabList__button .arkb-fz {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
  }
  /* 車検 / 点検: 幅 110px 固定 (狭い端末では均等に縮む)・左寄せ */
  body.page-id-18 .hc-inspect-section--shaken .arkb-tabList__item,
  body.page-id-18 .hc-inspect-section--tenken .arkb-tabList__item {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: 110px !important;
  }
  /* カーケア: 内容幅 + 折返し */
  body.page-id-18 .hc-inspect-section--seibi .arkb-tabList__item {
    flex: 0 1 auto !important;
    width: auto !important;
  }
  body.page-id-18 .hc-inspect-section--seibi .arkb-tabList__button {
    width: auto !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

/* ---------- 200-2. 車検タブ本体パネル ---------- */
@media (max-width: 600px) {
  /* パネル背景は Figma 実測 #E6F3FF (旧 --hc-bg-light-blue #EEF5FB より僅かに青い) */
  body.page-id-18 .ark-block-tab .arkb-tabBody__content {
    background: #E6F3FF !important;
    box-sizing: border-box !important;
  }
  body.page-id-18 .hc-inspect-section--shaken .arkb-tabBody__content {
    padding: 32px 16px 36px !important;
  }
  /* パネル見出し「車検の流れ」「点検の流れ」 */
  body.page-id-18 .hc-inspect-section--shaken .hc-inspect-panel__title,
  body.page-id-18 .hc-inspect-section--tenken .hc-inspect-panel__title {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #1A1A1A !important;
    text-align: center !important;
    margin: 0 0 49px !important;
  }
  body.page-id-18 .hc-inspect-section--shaken .hc-inspect-panel__title--left,
  body.page-id-18 .hc-inspect-section--tenken .hc-inspect-panel__title--left {
    text-align: left !important;
    margin: 0 0 24px !important;
  }
}

/* ---------- 200-3. 車検の流れ (grid 2列 x 9行) ---------- */
@media (max-width: 600px) {
  body.page-id-18 .hc-flow--shaken {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 162px) !important;
    grid-template-rows: repeat(9, 35px) !important;
    column-gap: 44px !important;
    row-gap: 31px !important;
    align-items: center !important;
    justify-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 268px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }
  body.page-id-18 .hc-flow--shaken .hc-flow__steps,
  body.page-id-18 .hc-flow--shaken .hc-flow__pills {
    display: contents !important;
  }

  /* 縦のコネクタ線: 1列目 (62px) の中央 = 31px */
  /* NOTE: 5836 行の `body.page-id-18 .hc-flow::before { display:none !important }` が
     .hc-flow--shaken にも当たる (同要素が hc-flow クラスも持つ) ため display を明示的に戻す */
  body.page-id-18 .hc-flow--shaken::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 30px !important;
    right: auto !important;
    top: 17px !important;
    bottom: 17px !important;
    width: 2px !important;
    height: auto !important;
    background: #BBC4CF !important;
    z-index: 0 !important;
  }

  /* --- ステップ枠: 奇数行 (ピルと中心を揃える) --- */
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(1) { grid-area: 1 / 1 / 2 / 2 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(2) { grid-area: 3 / 1 / 4 / 2 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(3) { grid-area: 5 / 1 / 6 / 2 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(4) { grid-area: 7 / 1 / 8 / 2 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(5) { grid-area: 9 / 1 / 10 / 2 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box {
    box-sizing: border-box !important;
    width: 62px !important;
    min-width: 62px !important;
    height: 63px !important;
    min-height: 63px !important;
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    justify-self: center !important;
    align-self: center !important;
    background: #fff !important;
    border: 3px solid #000 !important;
    border-radius: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box span {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #1A1A1A !important;
    letter-spacing: 0 !important;
    display: block !important;
  }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box strong,
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box b {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #1A1A1A !important;
    display: block !important;
    position: static !important;
    top: auto !important;
    margin: 0 !important;
  }
  /* step5 の赤枠 (旧仕様) を打ち消す */
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box--filled,
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box--filled span,
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box--filled strong,
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box--filled b {
    border-color: #000 !important;
    color: #1A1A1A !important;
  }

  /* --- 中継スクエア: 偶数行 --- */
  body.page-id-18 .hc-flow--shaken .hc-flow__step-dot:nth-of-type(1) { grid-area: 2 / 1 / 3 / 2 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-dot:nth-of-type(2) { grid-area: 4 / 1 / 5 / 2 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-dot:nth-of-type(3) { grid-area: 6 / 1 / 7 / 2 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-dot:nth-of-type(4) { grid-area: 8 / 1 / 9 / 2 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-dot {
    display: block !important;
    width: 14px !important;
    height: 13px !important;
    min-width: 14px !important;
    background: #8E9097 !important;
    border: none !important;
    border-radius: 3px !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* --- ピル: 2列目 1〜9行 --- */
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(1) { grid-area: 1 / 2 / 2 / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(2) { grid-area: 2 / 2 / 3 / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(3) { grid-area: 3 / 2 / 4 / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(4) { grid-area: 4 / 2 / 5 / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(5) { grid-area: 5 / 2 / 6 / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(6) { grid-area: 6 / 2 / 7 / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(7) { grid-area: 7 / 2 / 8 / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(8) { grid-area: 8 / 2 / 9 / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(9) { grid-area: 9 / 2 / 10 / 3 !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: stretch !important;
    align-self: center !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    background: #fff !important;
    border: 3px solid #000 !important;
    border-radius: 999px !important;
    color: #1A1A1A !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .02em !important;
    text-align: center !important;
    padding: 0 8px !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  /* 中間ピル: 点線 2px / 塗りなし */
  body.page-id-18 .hc-flow--shaken .hc-flow__pill--dashed {
    background: transparent !important;
    border: 2px dotted #000 !important;
    border-style: dotted !important;
    color: #1A1A1A !important;
  }
  /* 濃淡 (ステップ枠 / ピル で対応させる) */
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(1),
  body.page-id-18 .hc-flow--shaken .hc-flow__pill:nth-of-type(1) { background: #FFFFFF !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(2),
  body.page-id-18 .hc-flow--shaken .hc-flow__pill--fill1 { background: #EFEFEF !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(3),
  body.page-id-18 .hc-flow--shaken .hc-flow__pill--fill2 { background: #DEDEDE !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(4),
  body.page-id-18 .hc-flow--shaken .hc-flow__pill--fill3 { background: #CECECE !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__step-box:nth-of-type(5),
  body.page-id-18 .hc-flow--shaken .hc-flow__pill--fill4 { background: #AEAEAE !important; }
  body.page-id-18 .hc-flow--shaken .hc-flow__pill--fill3,
  body.page-id-18 .hc-flow--shaken .hc-flow__pill--fill4 { color: #1A1A1A !important; }
}

/* ---------- 200-4. 「車検を予約する」CTA ---------- */
@media (max-width: 600px) {
  body.page-id-18 .hc-inspect-section--shaken .hc-inspect-panel__cta {
    margin-top: 59px !important;
  }
}


/* =========================================================
 * 201. Inspection (page-id-18) 点検の流れ SP  Figma 準拠 再現
 *      2026-07-26 / 実測元: fig_inspection_full.png (390px フレーム)
 *
 *      修正点:
 *        (1) 5-2 層の `background: #fff !important` が
 *            .hc-flow__year--icon の background-image (車 SVG) を
 *            まとめて打ち消していたのを復活
 *        (2) hc-flow__step-dot を貫く縦の実線 (2px #BAC1CB) を追加
 *        (3) 「年」のタイミングの枠/ピルだけ border 3px、
 *            中間の点検ピル・納車枠は 1.5px に
 *
 *      実測値:
 *        列 62px + gap 18px + 162px = 242px (中央寄せ)
 *        行 1行目 63px / 2〜12行目 35px / row-gap 44px (ピッチ 79px)
 *        納車枠 62x63 border 1.5px #000 (塗りなし・車アイコン 30px)
 *        年枠   62x63 border 3px #000 / bg #F7F7F7
 *        車検年 62x63 border 3px #DE1D2F / bg #FFD9D9 / 文字 #DE1D2F
 *        通常ピル 162x35 border 1.5px #000 / bg #FFF
 *        法定ピル 162x35 border 3px  #000 / bg #F7F7F7
 *        車検ピル 162x35 border 3px  #DE1D2F / bg #FFD9D9
 *        中継スクエア 14x13 #8E9097 / 縦線 2px #BAC1CB
 *
 *      DOM 順 (grid-auto-flow: column で 12行 x 2列に流し込む):
 *        years : 納車 dot dot 1年目 dot 2年目 dot 3年目 dot 4年目 dot 5年目
 *        pills : (invisible) 1ヶ月 6ヶ月 法定 安心 法定 安心 車検 安心 法定 安心 車検
 *      ※ pills の 1 個目だけ <span>、以降 <p> なので
 *        p:nth-of-type(k) = 行 k+1 に対応する。
 * ========================================================= */
@media (max-width: 600px) {
  /* 見出し「点検の流れ」→ 納車枠 までの余白 (車検側は 49px、点検は枠が
     行からはみ出さないぶん 33px) */
  body.page-id-18 .hc-inspect-section--tenken .hc-inspect-panel__title {
    margin: 0 0 33px !important;
  }
  body.page-id-18 .hc-inspect-section--tenken .hc-inspect-panel__title--left {
    margin: 0 0 24px !important;
  }

  /* ---------- グリッド ---------- */
  body.page-id-18 .hc-flow--tenken {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: 62px minmax(0, 162px) !important;
    grid-template-rows: 63px repeat(11, 35px) !important;
    column-gap: 18px !important;
    row-gap: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 242px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }
  body.page-id-18 .hc-flow--tenken .hc-flow__years,
  body.page-id-18 .hc-flow--tenken .hc-flow__pills,
  body.page-id-18 .hc-flow--tenken .hc-flow__pills--tenken {
    display: contents !important;
  }

  /* ---------- (2) hc-flow__step-dot を貫く縦の実線 ---------- */
  /* 1列目 (62px) の中央 = 31px。納車枠の下端 (63px) から最終年枠まで。
     年枠は塗りがあるので線は枠の背面で隠れる。 */
  /* NOTE: 5836 行の `body.page-id-18 .hc-flow::before { display:none !important }` が
     .hc-flow--tenken にも当たるため display を明示的に戻す */
  body.page-id-18 .hc-flow--tenken::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 30px !important;
    right: auto !important;
    top: 63px !important;
    bottom: 17px !important;
    width: 2px !important;
    height: auto !important;
    background: #BAC1CB !important;
    z-index: 0 !important;
  }
  body.page-id-18 .hc-flow--tenken .hc-flow__step-dot {
    display: block !important;
    width: 14px !important;
    height: 13px !important;
    min-width: 14px !important;
    background: #8E9097 !important;
    border: none !important;
    border-radius: 3px !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* ---------- (1) 納車枠 + 車の SVG ---------- */
  body.page-id-18 .hc-flow--tenken .hc-flow__year--icon {
    box-sizing: border-box !important;
    width: 62px !important;
    min-width: 62px !important;
    height: 63px !important;
    min-height: 63px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    justify-self: center !important;
    align-self: center !important;
    /* background 一括指定で background-image を消さないこと */
    background-color: transparent !important;
    background-image: url('assets/icon-car-mini.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center 4px !important;
    background-size: 32px auto !important;
    border: 1.5px solid #000 !important;
    border-radius: 0 !important;
    color: #1A1A1A !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* ---------- (3) 「年」枠: 太枠 ---------- */
  body.page-id-18 .hc-flow--tenken .hc-flow__year--box {
    box-sizing: border-box !important;
    width: 62px !important;
    min-width: 62px !important;
    height: 63px !important;
    min-height: 63px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    align-self: center !important;
    background: #F7F7F7 !important;
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    color: #1A1A1A !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  body.page-id-18 .hc-flow--tenken .hc-flow__year--box.hc-flow__year--shaken {
    background: #FFD9D9 !important;
    border-color: #DE1D2F !important;
    color: #DE1D2F !important;
  }

  /* ---------- ピル ---------- */
  body.page-id-18 .hc-flow--tenken .hc-flow__pill {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: stretch !important;
    align-self: center !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    background: #FFFFFF !important;
    border: 1.5px solid #000 !important;
    border-radius: 999px !important;
    color: #1A1A1A !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .02em !important;
    text-align: center !important;
    padding: 0 8px !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  /* (3) 年と同じ行のピル (法定12ヶ月点検) も太枠。
     <span> の invisible が 1 個目なので p:nth-of-type(k) = 行 k+1 */
  body.page-id-18 .hc-flow--tenken .hc-flow__pill:nth-of-type(3),
  body.page-id-18 .hc-flow--tenken .hc-flow__pill:nth-of-type(5),
  body.page-id-18 .hc-flow--tenken .hc-flow__pill:nth-of-type(9) {
    background: #F7F7F7 !important;
    border-width: 3px !important;
  }
  /* 車検ピル (行 8 / 12) */
  body.page-id-18 .hc-flow--tenken .hc-flow__pill--shaken {
    background: #FFD9D9 !important;
    border: 3px solid #DE1D2F !important;
    color: #DE1D2F !important;
  }
  /* 納車行のダミーピル */
  body.page-id-18 .hc-flow--tenken .hc-flow__pill--invisible {
    visibility: hidden !important;
    background: transparent !important;
    border: none !important;
    height: 63px !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  body.page-id-18 .hc-flow--tenken .hc-flow__pill--dashed {
    border-style: solid !important;
  }
}

/* 5年目枠が最終行から 14px はみ出すぶん、注記との間隔を確保 (Figma 実測 53px) */
@media (max-width: 600px) {
  body.page-id-18 .hc-inspect-section--tenken .hc-flow__note {
    margin: 56px 0 0 !important;
  }
}


/* =========================================================
 * 202. 点検の流れ: ピル内の画像 (「法定12ヶ月点検」の "12") の
 *      縦方向への伸長を防止  ※PC / SP 共通・メディアクエリ外
 *
 *      .hc-flow__pill は PC で writing-mode: vertical-rl + display:flex。
 *      この状態だと flex の主軸が「縦」になるため、中の <img> が
 *      主軸方向(高さ)に伸びるブラウザがあり、「12」が縦に引き伸ばされて
 *      ピルを突き破る崩れが出る (Chrome では再現せずエンジン依存)。
 *      さらに PageSpeed の遅延読み込みでプレースホルダ(1x1 gif / 空)に
 *      差し替わる瞬間があり、内在アスペクト比が当てにならない。
 *      → 物理サイズを固定し、flex の伸縮も止める。
 *      画像実寸: image-12.png = 161x122 / 表示は 18x14 (block の指定)
 * ========================================================= */
.hc-flow__pill img {
  flex: 0 0 auto !important;
  align-self: center !important;
  width: 18px !important;
  height: 14px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 18px !important;
  max-height: 14px !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}

/* =========================================================
 * GUARD: 追加CSS の `.arkb-section--15{z-index:-1}` 対策 (2026-07-26)
 *
 *   Arkhe 親テーマは `.l-content{position:relative; z-index:0}` を持ち、
 *   #content がスタッキングコンテキストを作る。その中のセクションに
 *   負の z-index を付けると描画順が
 *     .l-content の背景 → 負z-indexのセクション → .c-postContent 等の通常フロー
 *   となり、セクションが透明な .c-postContent の「下」に落ちる。
 *   body 背景はキャンバスに伝播するため見た目は全く変わらないが、
 *   そのセクション内のリンク/ボタンはタップもクリックも一切通らなくなる。
 *
 *   実害: HOME2「安心ネットワークシステム」CTAボタン (.anshinshosai) と
 *         network-system ページ .hc-network-outro 内の tel: リンクが無反応。
 *
 *   本体は「外観 > カスタマイズ > 追加CSS」から削除済みだが、
 *   カスタマイザーを開いたまま再保存すると古い内容ごと復活してしまうため、
 *   ここで恒久的に無効化しておく。
 *
 *   NOTE: arkb-section--N はページ毎にレンダリング時採番される連番で、
 *         ページが違えば別ブロックを指す。セレクタに使ってはいけない。
 * ========================================================= */
.arkb-section--15 {
  z-index: auto !important;
}