@charset "UTF-8";
/* =========================================================================
   style-mobile.css — モバイル最適化基盤レイヤー
   -------------------------------------------------------------------------
   読み込み順は最後（functions.php の register_stylesheet 末尾）。
   同一詳細度なら後勝ちで既存 CSS を上書きするため、!important は
   「既存側が !important の箇所」だけに限定して使う。

   前提となる実測値（2026-09-03 / iframe 375px 幅で計測・本番 clovercars.net）
     - トップ        9,055px（≒10.7画面）
     - /stockcars/  13,721px（≒16.3画面）… .sec3_box が 19px 溢れ
     - /booking/     2,950px  /form/ 1,667px（ここは健全）
     - tel リンク高さ 27〜34px、ニュースリンク 29px（44px 未満）
     - 地図 iframe は height=600 固定
   計測していない領域（＝この CSS の対象外）
     - 実機 iOS/Android での指タップ精度、横向き表示
   ========================================================================= */

/* =========================================================================
   1. 基盤：横スクロール防止と box-sizing
   ========================================================================= */

html {
  /* iOS Safari は html だけの overflow-x:hidden を無視することがあるため
     body 側と両方に指定する（既存 style.css に両方あるのを踏襲・明示） */
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  overscroll-behavior-x: none;
}

/* 溢れやすい置換要素の保険。ズームを不要にする前提条件。 */
img,
svg,
video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* テーブル・整形済みテキストは要素内スクロールに閉じ込める
   （ページ全体を横に動かさない） */
@media (max-width: 767.98px) {
  /* 注：table に display:block を当てると列の対応が崩れるため使わない。
     実測でこのサイトの表は横に溢れておらず（セルは既に縦積みされている）、
     必要なのは幅の上限だけ。 */
  table {
    max-width: 100%;
  }

  pre,
  code {
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* 長い URL・型番などによる押し出しを防ぐ。
     見出しには当てないこと：.title_top::before / .title2::before などの装飾文字
     （content: attr(data-en) の 80px 英字）は絶対配置で幅が親の半分しか無く、
     anywhere を許すと "Service" が 1 文字ずつ縦に割れる（実機幅で確認済み）。
     また anywhere より break-word のほうが、通常の日本語の折り返しを壊さない。 */
  p,
  li,
  dd,
  dt,
  address {
    overflow-wrap: break-word;
    word-break: normal;
    line-break: strict;
  }

  /* 装飾用の英字は折り返させない（親要素側で見切れるほうが崩れるより良い） */
  .title_top::before,
  .title2::before,
  .boxtitle::before,
  .title_contact::before,
  .title_1::before {
    white-space: nowrap;
  }
}

/* =========================================================================
   2. モバイルの余白・文字スケール（間延び対策の土台）
   -------------------------------------------------------------------------
   :root のトークンをモバイルでだけ縮める。個別セレクタを追いかけるより
   影響範囲が読みやすく、元に戻すのも 1 ブロック削除で済む。
   ========================================================================= */

@media (max-width: 767.98px) {
  :root {
    /* 余白：上限を viewport 連動にして「画面に対して大きすぎる空白」を消す */
    --space-xl: 1.5rem;   /* 32px -> 24px */
    --space-2xl: 2rem;    /* 48px -> 32px */
    --space-3xl: 2.5rem;  /* 64px -> 40px */
    --space-4xl: 3rem;    /* 80px -> 48px */
    --space-5xl: 3.5rem;  /* 100px -> 56px */

    /* 見出し：60px/48px は 375px 幅では収まらない。流体化する */
    --font-size-3xl: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
    --font-size-4xl: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
    --font-size-5xl: clamp(2rem, 1.3rem + 3.4vw, 3.75rem);

    /* 行間：1.8 は 9,000px 級の縦長ページでは冗長。可読性を保てる 1.7 に */
    --line-height-relaxed: 1.7;
  }

  body {
    line-height: 1.7;
  }

  /* 見出しは行間を詰めて塊に見せる（視覚的階層のコントラストを上げる） */
  h1,
  h2,
  h3,
  .title_1,
  .title_top,
  .title_middle,
  .title_contact {
    line-height: 1.3;
  }

  /* 見出し直後の本文は近接させ、見出し前は離す＝グルーピングを明確化 */
  h2 + p,
  h3 + p,
  .title_1 + p,
  .title_top + p {
    margin-top: 0.5em;
  }
}

/* =========================================================================
   3. 縦の間延びを実測箇所で詰める
   -------------------------------------------------------------------------
   トップ 9,055px の内訳計測で効くと判明した箇所のみを対象にする。
   ========================================================================= */

@media (max-width: 767.98px) {
  /* margin-top:100px（article.full.mt100）。実測 1,739px セクションの頭 */
  .mt100 {
    margin-top: var(--space-4xl);
  }

  .mt50 { margin-top: var(--space-2xl); }
  .mt80 { margin-top: var(--space-3xl); }

  /* section.full.top1 > .clovercars2（padding 50/50 実測） */
  .clovercars2,
  .clovercars {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }

  /* .item80（padding 20/20）と .ju_box（padding 24/24, margin-top 24） */
  .ju_box {
    padding-top: 18px;
    padding-bottom: 18px;
    margin-top: 18px;
  }

  /* .full.contact_bk2（padding-top 50 実測） */
  .contact_bk2 {
    padding-top: var(--space-2xl);
  }

  /* 見出しブロックの上下マージン（h2.title_1 は margin 22/22 実測） */
  .title_1,
  .title_top,
  .title_contact {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
  }

  /* セクション間の連続した空きマージンを相殺（空白の二重取りを防ぐ） */
  section + section,
  article + article {
    margin-top: 0;
  }

  /* 下層ページのヒーロー：.hero{height:700px !important} / .title_bk{height:700px}。
     実測で 844px 端末の 83% を背景写真だけが占有し、本文が完全にファーストビュー外へ
     追い出されていた（/maintenance/ 等すべての下層ページ）。
     svh で画面比に連動させ、極端な端末向けに上下限を付ける。 */
  .hero {
    height: 44svh !important;
    min-height: 240px;
    max-height: 400px;
  }

  .title_bk {
    height: 44svh;
    min-height: 240px;
    max-height: 400px;
  }

  /* padding-top:100px !important（.gap_top_100）。既存が !important のため合わせる */
  .gap_top_100 {
    padding-top: var(--space-4xl) !important;
  }

  /* .greenbox2 p は width:80% / margin:50px auto。段落ごとに上下 50px の空きが
     積み上がり、実測 2,998px のブロックを作っていた。横も 20% 捨てている。 */
  .greenbox2 p {
    width: 100%;
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
    padding: 12px 14px;
  }

  /* ヒーロー：.bk_top は CSS 上 min-height:800px。縦長端末で 1 画面を独占するため
     svh に置き換える（アドレスバーの伸縮で高さが暴れるのも防ぐ）。
     注意：トップの #slider / .vegas-container は実測 422px と既に適正なので触らない。
     ここに min-height を足すと逆に伸びる（検証時に +68px の回帰を確認済み）。 */
  .bk_top {
    min-height: 62svh;
  }
}

/* =========================================================================
   4. タップ領域：最小 44×44px（Apple HIG / WCAG 2.2 目標サイズ）
   -------------------------------------------------------------------------
   実測で 27〜34px だった tel リンクとニュース一覧リンクが対象。
   「見た目を大きくする」のではなく、当たり判定だけを広げる。
   ========================================================================= */

@media (max-width: 767.98px) {
  /* 電話番号：主要 CTA（大きく見せている番号）は実寸で 48px 確保する。
     実測 .contact_tel は 34px だった。 */
  .contact_tel,
  .booking-tel,
  .keeper-cta-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
  }

  /* 本文・住所内に混ざる tel リンク（実測 27px）は、行の高さを変えずに
     当たり判定だけ 44px へ広げる。フッターが無駄に伸びるのを防ぐ。 */
  a[href^="tel:"]:not(.contact_tel):not(.booking-tel):not(.keeper-cta-tel) {
    position: relative;
    display: inline-block;
  }

  a[href^="tel:"]:not(.contact_tel):not(.booking-tel):not(.keeper-cta-tel)::after {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }

  /* SP メニュー内リンクは開いた時だけの領域なので実寸で広げてよい */
  .globalMenuSp2 a {
    display: block;
    min-height: 44px;
  }

  /* ニュース一覧リンク：実測 29px。
     実 DOM は ul.list > li.flexbox_news > div.title_news > a（旧 `main li > a` は
     a が div 配下のため 1 件もマッチしていなかった。検証で判明）。

     ここで padding を足すと行が伸びて「間延び」が悪化するため、
     擬似要素で当たり判定だけを 44px に広げる。レイアウト高さは変えない。 */
  .title_news a,
  .flexbox_news a,
  .news_list a,
  .newslist a {
    position: relative;
  }

  .title_news a::after,
  .flexbox_news a::after,
  .news_list a::after,
  .newslist a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }

  /* ボタン類は縦 48px を確保して押し間違いを減らす */
  .btn,
  .btn2,
  .btn-border,
  .foot_a,
  button,
  input[type="submit"],
  input[type="button"],
  .wpcf7-submit {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 隣接ボタンの間隔。指の幅を考えて 8px 以上あける */
  .flexbox2 > a + a,
  .midashi_block > a + a {
    margin-top: 10px;
  }

  /* タップ時のハイライトを明示（押せたか分かる＝摩擦の低減） */
  a,
  button {
    -webkit-tap-highlight-color: rgba(0, 99, 58, 0.18);
  }
}

/* =========================================================================
   5. ハンバーガーメニュー
   -------------------------------------------------------------------------
   実測：42×42px・線色 #BBB・z-index 3。写真の上に重なると視認できず、
   タップ領域も 44px 未満。
   ========================================================================= */

@media (max-width: 767.98px) {
  .hamburger2 {
    width: 48px;
    height: 48px;
    right: 12px;
    top: 12px;
    z-index: 1002;
    border-radius: 50%;
    background: rgba(0, 55, 5, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  }

  .hamburger2 span {
    width: 22px;
    left: 13px;
    background: #fff;
  }

  .hamburger2 span:nth-child(1) { top: 17px; }
  .hamburger2 span:nth-child(2) { top: 23px; }
  .hamburger2 span:nth-child(3) { top: 29px; }

  .hamburger2.active span:nth-child(1),
  .hamburger2.active span:nth-child(2),
  .hamburger2.active span:nth-child(3) {
    top: 23px;
  }

  .globalMenuSp2 {
    z-index: 1001;
  }

  /* メニュー内リンクの当たり判定と区切り */
  .globalMenuSp2 ul li a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 20px;
  }
}

/* =========================================================================
   6. 横溢れの根本原因（実測で特定した固定幅）
   -------------------------------------------------------------------------
   overflow-x:hidden は「隠す」だけで、中身は切れたままになる。
   溢れている要素そのものを畳む。
   ========================================================================= */

@media (max-width: 767.98px) {
  /* /stockcars/ で 375px 幅に対し右端 394px まで溢れていた実測箇所。
     width:400px の絶対配置ボックスを、通常フローの全幅ラベルに戻す */
  .sec3_list .sec3_box {
    position: static;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding: 12px 16px;
  }

  .sec3_list li:nth-child(1) .sec3_box,
  .sec3_list li:nth-child(2) .sec3_box,
  .sec3_list li:nth-child(3) .sec3_box,
  .sec3_list li:nth-child(4) .sec3_box {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }

  /* #main_contents の width:850px 固定 */
  #main_contents {
    width: 100%;
    max-width: 100%;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* .demo は既存側が min-width:350px !important。320px 端末で 30px 溢れる */
  .demo {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 既存側 !important の固定幅 */
  .paget-content2 {
    width: 100% !important;
  }

  /* サービス紹介の重ね合わせレイアウト（593px / 470px + 負マージン）を
     モバイルでは素直な縦積みに戻す */
  .right_des,
  .left_des,
  .left_photo,
  .right_photo {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    min-height: 0;
  }

  .right_des,
  .left_des {
    margin-top: 0;
    padding: 20px 18px 24px;
  }

  .left_photo,
  .right_photo {
    max-height: none !important;
  }

  .left_photo img,
  .right_photo img {
    width: 100%;
    height: 200px;
  }

  /* 全幅演出（width:100vw + margin:calc(50% - 50vw)）は縦スクロールバーが
     出る環境で 100vw > clientWidth となり溢れる。モバイルでは素直に全幅へ */
  .fullsize,
  article.topback {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* 内側コンテナの左右余白を統一（現状 88.8% / 70% が混在） */
  .l-inner {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .l-inner2 {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* flexbox 系は縮まずに溢れる典型。折り返しと最小幅を許可する */
  .flexbox,
  .flexbox2,
  .stockbox {
    flex-wrap: wrap;
  }

  .flexbox > *,
  .flexbox2 > *,
  .stockbox > * {
    min-width: 0;
  }
}

/* =========================================================================
   7. メディア・埋め込み
   ========================================================================= */

@media (max-width: 767.98px) {
  /* Google マップ：height=600 固定は実測で contact_bk2(1,471px) の 41%。
     地図としての用は 260px で足りる */
  .contact_bk2 iframe[src*="google.com/maps"],
  iframe[src*="google.com/maps"] {
    height: 260px !important;
    display: block;
  }

  /* YouTube 等は 16:9 を維持したまま全幅 */
  .movie iframe,
  iframe[src*="youtube"],
  iframe[src*="vimeo"] {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/* =========================================================================
   8. フォーム：iOS の自動ズーム防止と入力しやすさ
   -------------------------------------------------------------------------
   iOS Safari は font-size < 16px の入力欄でフォーカス時に自動ズームする。
   「どの要素もズームを必要としない」ためには 16px 以上が必須条件。
   ========================================================================= */

@media (max-width: 767.98px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  select,
  textarea,
  .wpcf7-form-control {
    font-size: 16px !important;
    max-width: 100%;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 6px;
  }

  textarea {
    min-height: 120px;
  }

  /* ラベルと入力欄を近接させ、項目間は離す */
  label {
    display: block;
    margin-bottom: 6px;
  }

  .wpcf7-form p {
    margin-bottom: var(--space-lg);
  }

  /* 送信ボタンは全幅・親指の届く高さ */
  .wpcf7-submit,
  form input[type="submit"] {
    width: 100%;
    min-height: 52px;
    font-size: 1.0625rem;
  }
}

/* =========================================================================
   9. モバイル追従 CTA バー
   -------------------------------------------------------------------------
   目標アクション（予約フォーム送信 / LINE 相談 / 在庫車）へ、
   スクロール位置に関係なく 1 タップで到達できるようにする。
   トップ 10.7 画面・在庫 16.3 画面という実測の縦長さに対する直接の対策。
   マークアップは parts-mobile-cta.php。
   ========================================================================= */

.cc-mcta {
  display: none;
}

@media (max-width: 767.98px) {
  .cc-mcta {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* 親テーマに a:visited{color:#800080} がある。詳細度 (0,1,1) で
     .cc-mcta__btn (0,1,0) に勝つため、訪問済みだと文字とアイコンが紫になる。
     getComputedStyle は :visited の色を返さない仕様なので計算値では気付けず、
     スクリーンショットで初めて判明した。全状態を明示して打ち消す。 */
  .cc-mcta__btn:link,
  .cc-mcta__btn:visited,
  .cc-mcta__btn:hover,
  .cc-mcta__btn:focus,
  .cc-mcta__btn:active {
    color: #1f2a24;
  }

  .cc-mcta__btn--primary:link,
  .cc-mcta__btn--primary:visited,
  .cc-mcta__btn--primary:hover,
  .cc-mcta__btn--primary:focus,
  .cc-mcta__btn--primary:active {
    color: #fff;
  }

  .cc-mcta__btn--line:link,
  .cc-mcta__btn--line:visited,
  .cc-mcta__btn--line:hover,
  .cc-mcta__btn--line:focus,
  .cc-mcta__btn--line:active {
    color: #0b7a3f;
  }

  .cc-mcta__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    padding: 8px 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #1f2a24;
    background: #fff;
    border: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.07);
    transition: background-color 0.15s ease;
  }

  .cc-mcta__btn:first-child {
    border-left: 0;
  }

  .cc-mcta__btn:active {
    background: #eef4f0;
  }

  .cc-mcta__icon {
    width: 21px;
    height: 21px;
    flex: none;
  }

  /* 主行動＝予約。色で優先順位を示す（装飾ではなく意味づけ） */
  .cc-mcta__btn--primary {
    background: var(--color-primary, #00633a);
    color: #fff;
  }

  .cc-mcta__btn--primary:active {
    background: var(--color-primary-dark, #003705);
  }

  .cc-mcta__btn--line {
    color: #0b7a3f;
  }

  /* バーがコンテンツ（特にフッターと送信ボタン）を覆わないよう下駄を履かせる */
  body.cc-has-mcta {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  /* ページ内アンカー遷移時に固定バーへ潜り込まないようにする */
  :target {
    scroll-margin-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
}

/* 予約ページ本体ではウィザードの「次へ / 送信」と競合するため出さない */
body.page-booking .cc-mcta,
body.cc-hide-mcta .cc-mcta {
  display: none;
}

body.page-booking.cc-has-mcta,
body.cc-hide-mcta.cc-has-mcta {
  padding-bottom: 0;
}

/* =========================================================================
   10. モーション配慮
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   11. フォント：端末標準フォントを正式指定にする
   -------------------------------------------------------------------------
   実測（2026-09-03 本番・375px）：fonts.googleapis.com / fonts.gstatic.com への
   リクエストは 0 件。style.css の @import が仕様上無効な位置にあり、
   BIZ UDPGothic / Lato / Nothing You Could Do はいずれも読み込まれていなかった。

   方針：Web フォントを追加せず（＝ダウンロード 0 バイト・描画待ちなし）、
         端末に最初から入っている日本語フォントを明示的に指定する。
         これまで `sans-serif` 任せで端末ごとに不定だった字面が確定し、
         iOS は Hiragino Sans、Android は Noto Sans JP を確実に使う。
   ========================================================================= */

:root {
  --font-family-base:
    'BIZ UDPGothic',
    'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
    'Noto Sans JP', 'Noto Sans CJK JP',
    'Yu Gothic Medium', 'Yu Gothic', Meiryo,
    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* 見出し用の欧文（Lato）は未ロード。数字・英字が本文と揃うよう
     同じ系統のシステム書体に寄せる */
  --font-family-display:
    system-ui, -apple-system, 'Segoe UI', Roboto,
    'Hiragino Sans', 'Noto Sans JP', sans-serif;
}

/* style.css の `*{ font-family: 'BIZ UDPGothic', sans-serif }` と同一詳細度。
   後読みのため上書きされる。 */
* {
  font-family: var(--font-family-base);
}

/* Lato 指定箇所（h2 等）は未ロードで実質 sans-serif だった。
   ウェイトで見出しらしさを出す方向に切り替える。 */
h1,
h2,
h3,
.title_1,
.title_top,
.title_middle {
  font-family: var(--font-family-display);
  font-weight: 700;
}

@media (max-width: 767.98px) {
  /* 注：本文への letter-spacing 付与は日本語だと折り返しが増えてページが縦に
     伸びるため入れない（検証で確認）。字間を触るのは見出しと数字だけにする。 */
  h1,
  h2,
  h3,
  .title_1,
  .title_top {
    letter-spacing: 0.01em;
  }

  /* 数字（電話番号・価格・年式）は等幅で読み違いを防ぐ */
  a[href^="tel:"],
  .contact_tel,
  .booking-tel,
  .price,
  .cc-price {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
  }
}

/* =========================================================================
   12. 長い表の折りたたみ（js/mobile-ux.js が <details> でくるむ）
   -------------------------------------------------------------------------
   /maintenance/ の法定点検項目表は実測 2,511px + 6,187px = 8,698px で
   ページ全体（20,922px）の 41%。参照用の一覧が本文と CTA を分断していた。
   JS が動かなければ表はそのまま表示されるので情報は失われない。
   ========================================================================= */

.cc-table-collapse {
  margin: var(--space-lg) 0;
  border: 1px solid rgba(0, 99, 58, 0.28);
  border-radius: 8px;
  background: #fff;
}

.cc-table-collapse__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 700;
  color: var(--color-primary, #00633a);
  list-style: none;
  -webkit-tap-highlight-color: rgba(0, 99, 58, 0.18);
}

.cc-table-collapse__summary::-webkit-details-marker {
  display: none;
}

/* 開閉状態を示す矢印。閉じている＝まだ中身がある、が一目で分かるようにする */
.cc-table-collapse__summary::after {
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.cc-table-collapse[open] > .cc-table-collapse__summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.cc-table-collapse[open] > .cc-table-collapse__summary {
  border-bottom: 1px solid rgba(0, 99, 58, 0.18);
}

.cc-table-collapse > table {
  margin: 0;
}

/* =========================================================================
   13. フッターの営業日カレンダー
   -------------------------------------------------------------------------
   症状：モバイルでカードが極端に狭く、定休日の丸印と日付が重なってはみ出す。

   原因（2026-09-03 実測 / 390px 幅）：
     style-footer-calendar.css の
       .item30 .cc-footer-calendar { margin: 0 auto; }
     で左右マージンが auto になっている。フレックスコンテナ（.item30 は
     display:flex / flex-direction:column）の中では、交差軸のマージンが auto だと
     align-items:stretch が効かなくなり、アイテムは幅いっぱいに伸びず
     min-content 幅まで縮む。結果カードは親 343px に対して 193px しかなく、
     .cc-cal-day は aspect-ratio:1 のまま 20px 角になっていた。
     そこへ 12〜13px の日付と ::after の丸印（bottom:3px）が入るため、
     文字と印が干渉して「はみ出て」見えていた。

   対策：幅を明示して親いっぱいに広げる（auto マージンは中央寄せとして残す）。
   実測結果：390px 幅で 193px → 343px、セル 20px → 42px
             320px 幅で 193px → 273px、セル 20px → 32px（いずれも溢れ無し）
   ========================================================================= */

@media (max-width: 767.98px) {
  .item30 .cc-footer-calendar,
  .foot_panel .cc-footer-calendar {
    width: 100%;
    max-width: 100%;
  }

  /* 親の左右パディングを外して横幅を稼ぐ。
     .l-inner 側に 16px の余白が残るので画面端には触れない。 */
  .foot_panel .item30 {
    padding-left: 0;
    padding-right: 0;
  }

  /* 広がったぶん可読性を上げる。
     style-footer-calendar.css の @media(max-width:480px) が 12px / 10px に
     落としているので、詳細度を 1 段上げて打ち消す。 */
  .cc-footer-calendar .cc-cal-day-num {
    font-size: 14px;
  }

  .cc-footer-calendar .cc-cal-weekday {
    font-size: 12px;
  }
}