@charset "UTF-8";

/*
  ============================================================
  mobile.css
  スマホ（狭い画面）向けの表示調整用。新規追加ファイル。

  【スタイルの分け方】
  1. 共通（.sp-* / #sp_nav / レイアウト解除など）
     … ヘッダ・メニュー・ヒーロー、白背景・固定幅解除・PCヘッダ非表示など
       ※トップは #t_container / #t_head、下層は #container / #head と
         HTMLのIDが違うため、同じルールをセレクタ並記でまとめる
  2. トップ専用（#top）
     … 2×2メニュー・お知らせリストなど、トップだけのもの
  3. 下層共通（body.sp-subpage）
     … 白枠タイトル・パンくず・H1（左アクセント＋下線）・H2帯・本文エリアなど
  4. ページ固有（#point / #laundry など）
     … そのページだけのコンテンツ調整
       （九州MAPチップ、地域一覧の縦カード、店舗詳細など）

  ・既存の all.css / common.css / top.css などは変更しない
  ・このファイルのルールは、原則として画面幅 767px 以下だけ効く
  ・PC（768px 以上）の見た目は従来どおりを維持する
  ・SP用画像は images/sp/ に配置（logo-sp.png / top-sp.jpg など）
  ============================================================
*/

/* SPデザインで使う色 */
:root {
  --sp-blue-main: #4097DD;     /* トップのメニューボタン枠・お知らせ一覧の枠 */
  --sp-blue-menu: #218BBC;     /* ハンバーガーメニューのリンク枠 */
  --sp-blue-heading: #66CCFF;  /* 見出し帯 */
  --sp-blue-chip: #A0D9F0;     /* 地域チップ */
  --sp-footer: #1E8ABB;        /* フッターバー（PCの #footer と同じ） */
}

/*
  SP専用ブロックは PC では非表示。
  狭い画面のメディアクエリ内で表示に切り替える。
*/
#sp_top,
#sp_sub,
#sp_nav,
.sp-news-head,
.sp-region-list,
.map-kyushu-lead,
.sp-pagetop {
  display: none;
}

/* ---------- 画面幅 767px 以下（スマホ想定） ---------- */
@media screen and (max-width: 767px) {

  /* スマホブラウザが文字サイズを勝手に変えないようにする */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* ページ全体の横はみ出し（横スクロール）を防ぐ */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* =========================================================
     共通パーツ（トップ・下層で同じ見た目）
     ========================================================= */

  /* ロゴ（左）とハンバーガーボタン（右）…画面上部に固定（追従） */
  .sp-header {
    position: fixed;
    top: 22px;
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 16px;
    margin: 0;
    background-color: transparent;
  }

  /* スクロール時: ロゴ縮小のみ（sp-menu.js で is-sp-header-scrolled を付与） */

  .sp-logo {
    display: block;
    line-height: 0;
  }

  .sp-logo img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: #fff;
    transition: width 0.25s ease, height 0.25s ease;
  }

  body.is-sp-header-scrolled .sp-logo img {
    width: 55px;
    height: 55px;
  }

  /* ハンバーガーアイコン（開閉は sp-menu.js）
     背景を白にして、ヒーロー写真に埋もれないようにする */
  .sp-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: 4px 0 0;
    padding: 0;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
  }

  .sp-menu-btn-bar {
    display: block;
    width: 30px;
    height: 2.5px;
    margin: 2.5px 0;
    border-radius: 2px;
    background-color: var(--sp-footer); /* フッターバーと同じ色 */
  }

  /* メインビジュアル（ヒーロー画像） */
  .sp-hero {
    position: relative;
    width: 100%;
    line-height: 0;
  }

  .sp-hero img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ハンバーガー全画面メニュー */
  #sp_nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
    text-align: left;
  }

  /* メニュー開時は背面のスクロールを止める */
  body.is-sp-menu-open {
    overflow: hidden;
  }

  body.is-sp-menu-open #sp_nav {
    display: block;
  }

  .sp-nav-panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 24px 18px 0;
    background-color: #fff;
  }

  .sp-nav-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
  }

  .sp-nav-header .sp-logo img {
    width: 100px;
    height: 100px;
  }

  /* 閉じるボタン（細い大きな ×） */
  .sp-menu-close {
    position: relative;
    width: 48px;
    height: 48px;
    margin: 6px 0 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .sp-menu-close-icon,
  .sp-menu-close-icon::before,
  .sp-menu-close-icon::after {
    display: block;
    width: 28px;
    height: 2px;
    margin: 0 auto;
    border-radius: 1px;
    background-color: var(--sp-blue-menu);
  }

  .sp-menu-close-icon {
    position: relative;
    background-color: transparent;
  }

  .sp-menu-close-icon::before,
  .sp-menu-close-icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
  }

  .sp-menu-close-icon::before {
    transform: rotate(45deg);
  }

  .sp-menu-close-icon::after {
    transform: rotate(-45deg);
  }

  /* メイン8リンク: 左は角ばり・右だけ丸い枠・右矢印（枠 #218BBC） */
  .sp-nav-list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
  }

  .sp-nav-list li {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    border: none;
  }

  .sp-nav-list li:last-child {
    margin-bottom: 0;
  }

  .sp-nav-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 12px 18px 12px 20px;
    border: 1.5px solid var(--sp-blue-menu);
    /* 左は角ばったまま、右側だけ丸くする */
    border-radius: 0 999px 999px 0;
    color: var(--sp-blue-menu);
    font-size: 15px;
    font-weight: bold;
    line-height: 1.35;
    text-decoration: none;
    background-color: #fff;
  }

  .sp-nav-arrow {
    display: inline-block;
    margin-left: 10px;
    color: var(--sp-blue-menu);
    font-size: 18px;
    font-weight: normal;
    line-height: 1;
    flex-shrink: 0;
  }

  /* 下層付きメニュー（アコーディオン） */
  .sp-nav-item-has-sub {
    margin: 0 0 12px;
  }

  .sp-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 18px 12px 20px;
    border: 1.5px solid var(--sp-blue-menu);
    border-radius: 0 999px 999px 0;
    color: var(--sp-blue-menu);
    font-size: 15px;
    font-weight: bold;
    line-height: 1.35;
    text-align: left;
    background-color: #fff;
    cursor: pointer;
    font-family: inherit;
  }

  /* 閉じた状態の + アイコン */
  .sp-nav-toggle-icon {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-left: 10px;
    flex-shrink: 0;
  }

  .sp-nav-toggle-icon::before,
  .sp-nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: var(--sp-blue-menu);
    border-radius: 1px;
  }

  .sp-nav-toggle-icon::before {
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
  }

  .sp-nav-toggle-icon::after {
    width: 2px;
    height: 14px;
    margin: -7px 0 0 -1px;
  }

  /* 開いた状態: − のみ */
  .sp-nav-item-has-sub.is-open .sp-nav-toggle {
    border-radius: 0 25px 0 0;
  }

  .sp-nav-item-has-sub.is-open .sp-nav-toggle-icon::after {
    display: none;
  }

  /*
    下層リンク（青帯・白文字）
  */
  .sp-nav-sub {
    display: none;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    border-radius: 0 0 25px 0;
    background-color: var(--sp-blue-menu);
  }

  .sp-nav-item-has-sub.is-open .sp-nav-sub {
    display: block;
  }

  .sp-nav-sub li {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
  }

  .sp-nav-sub a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 10px 18px 10px 20px;
    border: none;
    border-radius: 0;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.35;
    text-decoration: none;
    background-color: transparent;
  }

  .sp-nav-sub .sp-nav-arrow {
    color: #fff;
  }

  /* PDFリンク */
  .sp-nav-pdf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 5px 0 12px;
    padding: 0;
    list-style: none;
  }

  .sp-nav-pdf li {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
  }

  .sp-nav-pdf a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 12px 10px;
    border: 1px solid var(--sp-blue-menu);
    color: var(--sp-blue-menu);
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
  }

  /* 外部バナー */
  .sp-nav-bnr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
  }

  .sp-nav-bnr li {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    overflow: hidden;
    background-color: transparent;
  }

  .sp-nav-bnr a {
    display: block;
    width: 100%;
    padding: 0;
    min-height: 0;
    line-height: 0;
    text-decoration: none;
  }

  .sp-nav-bnr img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* メニュー下部の会社情報 */
  .sp-nav-foot {
    margin: auto -18px 0;
    padding: 14px 18px 18px;
    background-color: var(--sp-footer);
    color: #fff;
  }

  /* 社名ロゴ画像 */
  .sp-nav-company {
    margin: 0 0 8px;
    line-height: 0;
    text-align: left;
  }

  .sp-nav-company img {
    display: block;
    width: auto;
    height: 40px;
    max-width: 85%;
  }

  .sp-nav-license {
    margin: 0;
    padding: 0;
    font-size: 10px;
    line-height: 1.5;
    font-weight: normal;
    text-align: left;
  }

  /* ---------- ページ骨格（トップ・下層共通。ID違いを並記） ---------- */

  /* 背景を白ベースに */
  body#top,
  body.sp-subpage {
    background-color: #fff;
    background-image: none;
  }

  /* PC用の固定幅・ヘッダー背景を解除し、画面幅いっぱいに広げる */
  #top #t_container,
  body.sp-subpage #container,
  body.sp-subpage#photocatalyst #container,
  body.sp-subpage#architect #container,
  body.sp-subpage#company #container,
  body.sp-subpage#owner #container,
  body.sp-subpage#point #container,
  body.sp-subpage#car #container,
  body.sp-subpage#laundry #container,
  body.sp-subpage#sitemap #container,
  body.sp-subpage#news #container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-image: none;
    overflow-x: hidden;
    /* PCの float + clear:both によるフッター下の空白を防ぐ */
    display: flex;
    flex-direction: column;
  }

  /* 子要素の幅計算を border-box にそろえ、パディング込みではみ出しにくくする */
  #top #t_container *,
  #top #t_container *::before,
  #top #t_container *::after,
  body.sp-subpage #container *,
  body.sp-subpage #container *::before,
  body.sp-subpage #container *::after {
    box-sizing: border-box;
  }

  /* PC用ヘッダー・左メニュー（画像ナビ／PDFバナー等）はスマホでは隠す */
  #top #t_head,
  #top #t_left,
  body.sp-subpage #head,
  body.sp-subpage #left {
    display: none;
  }

  /* SP専用ヘッダブロックを表示（トップ=#sp_top / 下層=#sp_sub） */
  #sp_top,
  #sp_sub {
    display: block;
    position: relative;
    width: 100%;
    text-align: left;
  }

  /* PC用のページトップリンクは非表示（レイアウトにも影響させない） */
  #top #pagetop,
  body.sp-subpage #pagetop {
    display: none;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
  }

  #top #footer,
  body.sp-subpage #footer {
    clear: none;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 16px 10px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background-color: var(--sp-footer);
    color: #fff;
    font-size: 11px;
    text-align: center;
    box-sizing: border-box;
  }

  /* =========================================================
     トップ専用
     ========================================================= */

  /* 主要4メニュー（2列グリッド） */
  .sp-nav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 16px 14px 20px;
    padding: 0;
    list-style: none;
  }

  .sp-nav-grid li {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
  }

  /*
    長いラベル（「洗車場・洗車機のご案内」など）が折り返さず収まるよう、
    狭い幅ではやや小さめの文字・字間にする
  */
  .sp-nav-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 4px;
    border: 2px solid var(--sp-blue-main);
    border-radius: 8px;
    background-color: var(--sp-blue-main);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  @media (min-width: 375px) {
    .sp-nav-grid a {
      font-size: 14px;
      padding: 12px 6px;
      letter-spacing: 0;
    }
  }

  /* ---------- お知らせエリア（既存 #t_right を流用） ---------- */
  #top #t_right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding: 0 14px 20px;
    text-align: left;
    flex: 0 0 auto;
  }

  /* PC用画像見出しを隠し、テキスト見出しに切り替える */
  #top #t_right h1 {
    display: none;
  }

  .sp-news-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 2px solid var(--sp-blue-main);
    border-radius: 8px;
    background-color: #fff;
  }

  .sp-news-title {
    color: #248DBD;
    font-size: 16px;
    font-weight: normal;
  }

  /*「一覧」も「お知らせ」と同じ青・下線なし */
  #top #t_right a.sp-news-list:link,
  #top #t_right a.sp-news-list:visited,
  #top #t_right a.sp-news-list:hover,
  #top #t_right a.sp-news-list:active {
    color: #248DBD;
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;
  }

  #top #t_right ul {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #top #t_right li {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    line-height: 1.55;
    color: #333;
  }

  /* フッター直前（リスト末尾）の下線は付けない */
  #top #t_right li:last-child {
    border-bottom: none;
  }

  #top #t_right li a {
    color: #036;
  }

  /*
    サムネ付きお知らせ: 左に画像・右に文章の2カラム
    画像は固定サイズ + object-fit で切り抜き、隣の項目へはみ出さないようにする
  */
  #top #t_right li:has(img) {
    position: relative;
    padding-left: 100px; /* 画像88px + 余白12px */
    min-height: 94px; /* 上余白 + 画像高さ + 下余白の目安 */
    overflow: hidden;
  }

  #top #t_right li:has(img) img {
    position: absolute;
    left: 0;
    top: 14px; /* li の padding-top に合わせる */
    float: none;
    width: 88px;
    height: 66px;
    max-width: none;
    margin: 0;
    border: 1px solid #036;
    object-fit: cover;
    object-position: center;
  }

  /* 下部の強調文・料金案内（既存 .font01 を含む末尾項目） */
  #top #t_right li .font01 {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
  }

  /* トップ・下層共通: ページトップへ（画像・右下固定・スクロールで表示） */
  #top .sp-pagetop,
  body.sp-subpage .sp-pagetop {
    display: block;
    position: fixed;
    right: 14px;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    z-index: 850;
    width: 60px;
    height: 60px;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    line-height: 0;
    text-decoration: none;
  }

  #top.is-sp-pagetop-visible .sp-pagetop,
  body.sp-subpage.is-sp-pagetop-visible .sp-pagetop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #top .sp-pagetop img,
  body.sp-subpage .sp-pagetop img {
    display: block;
    width: 60px;
    height: 60px;
    border: 0;
  }

  /* =========================================================
    下層共通（body に class="sp-subpage" を付ける）
     ========================================================= */

  /* 下層ヒーロー上の白枠タイトル（画像の上下左右中央） */
  .sp-hero-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    margin: 0;
    padding: 0 14px;
    text-align: center;
    line-height: normal;
  }

  .sp-hero-title span {
    display: inline-block;
    padding: 10px 22px;
    background-color: #fff;
    color: var(--sp-blue-menu);
    font-size: 16px;
    font-weight: bold;
    line-height: 1.35;
    white-space: nowrap;
    /* Figma: Drop Shadow X=0 Y=0 Blur=4（色未指定のため既定の黒25%） */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  }

  body.sp-subpage #right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px 14px 20px;
    text-align: left;
    flex: 0 0 auto;
  }

  body.sp-subpage #pankuzu {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.5;
  }

  body.sp-subpage #pankuzu a {
    color: #036;
  }

  /*
    H1: 左の水色アクセント + 下線
    ※ H2 の水色帯とは別デザイン。背景画像は PC と同じ h1_bg.gif（横リピート）
  */
  body.sp-subpage #right h1 {
    background-color: transparent;
    background-image: url(../images/h1_bg.gif);
    background-repeat: repeat-x;
    background-position: left top;
    border-bottom: 2px solid #95D8E7;
    margin: 0 0 14px;
    padding: 8px 5px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.45;
    color: #000;
  }

  /* H2: 水色帯 */
  body.sp-subpage #right h2 {
    background-color: var(--sp-blue-heading);
    margin: 16px 0 12px;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: bold;
    color: #222;
  }

  body.sp-subpage #main {
    padding: 0;
  }

  /* #main 外の画像（例: 光触媒の photocatalyst01.jpg）も画面幅に収める */
  body.sp-subpage #right img,
  body.sp-subpage #main img {
    max-width: 100%;
    height: auto;
  }

  /* =========================================================
    ページ固有（point）
     ========================================================= */

  /* PCでは左 float の画像を、スマホでは中央寄せ・横並び解除 */
  #point #main .fuka {
    float: none;
    width: 100%;
    margin: 0 0 12px;
    text-align: center;
  }

  #point #main .fuka img {
    margin: 0;
  }

  /* 画像横並び用の余白を解除（fukafuka など） */
  #point #main .dl01 {
    margin-left: 0;
  }

  #point #main .dl01 dd {
    margin-left: 0;
  }

  #point #main .dl02 {
    margin-bottom: 20px;
  }

  #point #main .f_right {
    float: none;
    display: block;
    margin: 12px auto;
    max-width: 100%;
    height: auto;
  }

  #point #main .charge01 {
    margin: 0;
    padding: 0 0 0 1.2em;
  }

  #point #main .charge01 li {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.55;
  }

  /* 料金表（charge.html のみ）: 左項目 → 右詳細を縦積み */
  #point #main table.charge03-stack {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    border: none;
    border-collapse: separate;
  }

  #point #main .charge03-stack tbody {
    display: block;
    width: 100%;
  }

  #point #main .charge03-stack tr {
    display: block;
    width: 100%;
    margin: 0;
    border: 1px solid #666;
    box-sizing: border-box;
  }

  #point #main .charge03-stack tr + tr {
    border-top: none;
  }

  #point #main .charge03-stack th,
  #point #main .charge03-stack td {
    display: block;
    width: auto;
    box-sizing: border-box;
    text-align: left;
    line-height: 1.5;
    border: none;
  }

  #point #main .charge03-stack th {
    border-bottom: 1px solid #666;
  }

  /* =========================================================
     ページ固有（car）
     ========================================================= */

  /*
    コイン洗車場マップ（案B）:
    県見出し → エリア見出し → 1店舗=1カード
    1行目=店舗名 / 2行目=市町村 / 3行目=設備（改行なし）
  */
  #car #main .car-map-group {
    margin: 0 0 24px;
  }

  #car #main .car-map-pref {
    margin: 8px 0 12px;
  }

  #car #main .car-map-area-block {
    margin: 0 0 16px;
  }

  #car #main .car-map-area-title {
    background-color: #C3E9F1;
    margin: 0 0 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: bold;
    color: #222;
  }

  #car #main table.car-map {
    width: 100%;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
  }

  #car #main .car-map thead {
    display: none;
  }

  #car #main .car-map tbody tr {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 12px;
    border: 1px solid #666;
    background-color: #fff;
  }

  #car #main .car-map tbody th,
  #car #main .car-map tbody td {
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid #666;
    padding: 10px 8px;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    vertical-align: top;
    white-space: normal;
    word-break: break-word;
  }

  /* 1行目: 店舗名 */
  #car #main .car-map tbody th {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 100%;
    width: 100%;
    background-color: #C3E9F1;
    font-weight: bold;
    text-align: center;
  }

  /* 2行目: 市町村 */
  #car #main .car-map tbody td:nth-child(2) {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  /* 3行目: 設備を1行につなげる（br を無効化） */
  #car #main .car-map tbody td:last-child {
    flex: 1 1 100%;
    width: 100%;
    border-bottom: none;
  }

  #car #main .car-map tbody td:last-child br {
    display: none;
  }

  /* wash.html: 画像と文章を縦並び */
  #car #main .wash {
    float: none;
    width: 100%;
    margin: 0 0 12px;
    text-align: center;
  }

  #car #main .wash img {
    max-width: 100%;
    height: auto;
    margin: 0;
  }

  #car #main .wash01 {
    margin: 0;
    padding: 0 0 0 1.2em;
  }

  #car #main .wash01 li {
    margin: 0 0 10px;
    line-height: 1.55;
  }

  #car #main .wash02 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    text-align: center;
  }

  #car #main .wash02 img {
    display: block;
    float: none;
    max-width: calc(50% - 5px);
    width: auto;
    height: auto;
    margin: 0;
  }

  /* wash03 料金表: ヘッダ非表示、1行目=コース名 / 2行目=内容・時間・料金 */
  #car #main table.wash03 {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
  }

  #car #main .wash03 thead {
    display: none;
  }

  #car #main .wash03 tbody {
    display: block;
    width: 100%;
  }

  #car #main .wash03 tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    border: 1px solid #666;
    box-sizing: border-box;
  }

  #car #main .wash03 tr + tr {
    border-top: none;
  }

  /* PC用セル枠を打ち消し（詳細度を合わせる） */
  #car #main .wash03 thead th,
  #car #main .wash03 tbody th,
  #car #main .wash03 tbody td {
    box-sizing: border-box;
    border: none;
    line-height: 1.5;
    padding: 8px 10px;
  }

  #car #main .wash03 tbody th {
    width: 100%;
    background-color: #F1FAFC;
    border-bottom: 1px solid #666;
    font-weight: bold;
    text-align: left;
  }

  #car #main .wash03 tbody td {
    background-color: #fff;
    text-align: left;
  }

  /* 内容・時間・料金の列幅を全行で揃える */
  #car #main .wash03 tbody td:nth-child(2) {
    flex: 0 0 70%;
    width: 70%;
    min-width: 0;
  }

  #car #main .wash03 tbody td:nth-child(3),
  #car #main .wash03 tbody td:nth-child(4) {
    flex: 0 0 15%;
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    border-left: 1px solid #666;
  }

  /* foam.html: メリット一覧は縦並び（.foam01 手順は PC どおり横並びのまま） */
  #car #main .foam02 {
    margin: 0;
    padding: 0 0 0 1.2em;
  }

  #car #main .foam02 li {
    margin: 0 0 10px;
    line-height: 1.55;
  }

  /* brush.html: 横並びは維持しつつ画像を縮小 */
  #car #main .brush {
    float: left;
    width: 42%;
    max-width: 140px;
    margin: 0 12px 12px 0;
    padding: 0;
  }

  #car #main .brush img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* =========================================================
     ページ固有（owner）
     ========================================================= */

  /* owner/index.html など: 画像と文章を縦並び */
  #owner #main .owner {
    float: none;
    width: 100%;
    margin: 0 0 12px;
    text-align: center;
  }

  #owner #main .owner img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  /* ユニットハウスで『夢を実現』: 画像と文章を縦並び */
  #owner #main .owner01 img {
    float: none;
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 12px;
  }

  /* 常に清潔 / 店舗の設計サンプル / ご出店資金について のみ横並び */
  #owner #main .owner-side {
    float: left;
    width: auto;
    max-width: 40%;
    margin: 0 12px 12px 0;
    text-align: left;
  }

  #owner #main .owner-side img {
    margin: 0;
    max-width: 128px;
  }

  /* 小規模・中規模・大規模プラン: 写真と設備表を縦積み */
  #owner #shop_info {
    clear: both;
  }

  #owner #shop_img,
  #owner #shop_equipment2,
  #owner #unit_img,
  #owner #unit_equipment {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 0;
  }

  #owner #shop_img,
  #owner #unit_img {
    text-align: center;
  }

  #owner #shop_img img,
  #owner #unit_img img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 0 12px;
  }

  #owner #shop_equipment2 table,
  #owner #unit_equipment table {
    width: 100%;
    margin: 0;
  }

  #owner #shop_equipment2 thead th,
  #owner #unit_equipment thead th {
    min-height: 44px;
    padding: 12px 8px;
    vertical-align: middle;
    text-align: center;
  }

  #owner #shop_equipment2 tbody th,
  #owner #unit_equipment tbody th {
    text-align: left;
    padding: 8px 10px;
    font-size: 14px;
  }

  #owner #shop_equipment2 tbody td,
  #owner #unit_equipment tbody td {
    text-align: center;
    padding: 8px 10px;
    font-size: 14px;
  }

  #owner #main > p img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 12px;
  }

  /* =========================================================
    ページ固有（architect）
     ========================================================= */

  /* 建設風景・看板設置風景: PCは2枚1行、SPは均等間隔で縦並び */
  #architect #main p.a_center {
    margin: 0;
    padding: 0;
    line-height: 0;
    text-align: center;
  }

  #architect #main p.a_center img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto 12px;
  }

  /* =========================================================
    　ページ固有（fukushima）
     ========================================================= */

  /* チラシ・色紙画像: 固定幅270pxの横並びを縦積みに */
  #owner #main.fukushima ul {
    margin: 0 0 12px;
    padding: 0;
    text-align: center;
  }

  #owner #main.fukushima li {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 0;
  }

  #owner #main.fukushima li img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  /* 日程表: nowrap によるはみ出しを防ぎ、狭い画面でも読めるようにする */
  #owner #main.fukushima table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 13px;
  }

  #owner #main.fukushima table td {
    white-space: normal;
    word-break: break-word;
    padding: 8px 6px;
    vertical-align: top;
  }

  #owner #main.fukushima table td:nth-child(1) {
    width: 22%;
  }

  #owner #main.fukushima table td:nth-child(2) {
    width: 24%;
  }

  /* =========================================================
     ページ固有（company）
     ========================================================= */

  /* 会社概要表: 画面幅に収め、nowrap によるはみ出しを防ぐ */
  #company #main table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  #company #main table th,
  #company #main table td {
    white-space: normal;
    word-break: break-word;
    font-size: 14px;
    vertical-align: top;
  }

  #company #main table th {
    width: 28%;
  }

  /* YouTube: 固定幅 570px を解除 */
  #company #main iframe {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    margin: 0 0 16px;
  }

  /* 事務所写真など: PC用 float を解除して縦並び */
  #company #main .company01 {
    float: none;
    width: 100%;
    margin: 0 0 12px;
    text-align: center;
  }

  #company #main .company01 img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto 12px;
  }

  /* #main 直下の大きな写真（head.jpeg など） */
  #company #main > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 0 12px;
  }

  /* Google Map: インライン width:570px を解除 */
  #company #main .company02 {
    clear: both;
    width: 100% !important;
    max-width: 100%;
    height: 280px !important;
    margin: 0 0 16px;
  }

  /* 福利厚生ブロック: float / 2カラムを縦積みに */
  #company #main .fukuri_t {
    overflow: visible;
    margin: 0 0 20px;
  }

  #company #main .f_photo_full,
  #company #main .f_photo,
  #company #main .f_text {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 12px;
    text-align: center;
  }

  #company #main .f_text {
    text-align: left;
  }

  #company #main .f_photo_full img,
  #company #main .f_photo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto 8px;
  }

  #company #main .f_photo_2colum {
    display: block;
    margin: 0 0 12px;
  }

  #company #main .f_photo_2colum p {
    margin: 0 0 12px;
    text-align: center;
  }

  #company #main .f_photo_2colum img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto 8px;
  }

  /* =========================================================
     ページ固有（laundry 九州MAP）
     ========================================================= */

  /*
    地図画像を画面幅に収める。
    イメージマップの座標は縮小でずれるため、スマホではタップ無効にし、
    下の地域チップを主導線にする
  */
  #laundry #map_kyushu img {
    max-width: 100%;
    height: auto;
    pointer-events: none;
  }

  #laundry #map_kyushu map,
  #laundry #map_kyushu area {
    pointer-events: none;
  }

  /* スマホでは地図の操作説明文を隠す */
  #laundry #map_kyushu > p:not(.a_center) {
    display: none;
  }

  #laundry #map_kyushu .map-kyushu-lead {
    display: block;
    margin: 12px 0 20px;
    text-align: center;
    color: #218BBC;
  }

  #laundry #map_kyushu .map-kyushu-lead-main {
    margin: 0 0 6px;
    padding: 0;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.5;
  }

  #laundry #map_kyushu .map-kyushu-lead-sub {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5;
  }

  /* 地域チップ一覧（デザインの余白階層に合わせる） */
  .sp-region-list {
    display: block;
    margin: 24px 0 16px;
    text-align: left;
  }

  /*
    エリア見出し（九州 / 中国）
    帯なしの黒文字。下層共通の H2 水色帯は打ち消す
  */
  body.sp-subpage#laundry #right h2.sp-region-area {
    background-color: transparent;
    background-image: none;
    margin: 32px 0 10px;
    padding: 0;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.4;
    color: #000;
  }

  /* 先頭の「九州」は地図直後なので上余白を抑える */
  body.sp-subpage#laundry #right h2.sp-region-area:first-child {
    margin-top: 12px;
  }

  /*
    県名見出し（福岡県 / 宮崎県）の上下
    上: 前のチップ群から広めに離す / 下: 直下チップとの間も確保
  */
  .sp-region-pref {
    margin: 32px 0 10px;
    padding: 0;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.4;
    color: #000;
  }

  /* 「九州」直後の県チップ行はエリア見出しに近いので上余白を控えめ */
  body.sp-subpage#laundry #right h2.sp-region-area + .sp-region-chips {
    margin-top: 0;
  }

  /* チップ行の直後の県名見出し（福岡県 / 宮崎県） */
  .sp-region-chips + .sp-region-pref {
    margin-top: 32px;
  }

  /* 県名見出し直後のチップ行 */
  .sp-region-pref + .sp-region-chips {
    margin-top: 0;
  }

  /* 宮崎チップ行の直後「中国」見出し */
  .sp-region-chips + h2.sp-region-area {
    margin-top: 32px;
  }

  .sp-region-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* 縦並びチップ（長崎・佐賀など1列、鹿児島・山口の単独行） */
  .sp-region-chips--col {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 20px;
    margin-top: 10px;
  }

  /* 横並びグループの直後の縦並び（例: 福岡3つ → 長崎〜 / 宮崎 → 鹿児島） */
  .sp-region-chips:not(.sp-region-chips--col) + .sp-region-chips--col {
    margin-top: 20px;
  }

  .sp-region-chips li {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
  }

  /* 地域チップ（色 #A0D9F0） */
  .sp-region-chips a {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 10px;
    background-color: var(--sp-blue-chip);
    color: #222;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.3;
    text-decoration: none;
  }

  /* all.css の a:link（#036 + 下線）を打ち消し */
  .sp-region-chips a:link,
  .sp-region-chips a:visited,
  .sp-region-chips a:hover,
  .sp-region-chips a:active {
    color: #222;
    text-decoration: none;
  }

  /* =========================================================
     ページ固有（laundry 地域一覧）
     デザイン: 地図の下に、店舗ごとに縦へ表（カード）が続く形
     ========================================================= */

  /* Google Map: インライン固定幅を解除して画面幅に合わせる */
  #laundry #prefecture #map {
    width: 100% !important;
    max-width: 100%;
    height: 250px !important;
    margin: 0 0 12px;
  }

  /*
    地図凡例（#mark）: 3つの説明画像を1行に収め、PC同様に右寄せ
  */
  #laundry #mark {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    margin: 8px 0 12px;
    text-align: right;
    overflow: hidden;
  }

  #laundry #mark img {
    display: block;
    flex: 0 1 auto;
    margin: 0;
    width: auto;
    height: auto;
    max-height: 24px;
    min-width: 0;
  }

  /*
    店舗一覧を「1店舗＝1カード」の縦積みに組み替える
    （既存 table を活かし、thead は非表示）
  */
  #laundry #prefecture table {
    width: 100%;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
  }

  #laundry #prefecture thead {
    display: none;
  }

  #laundry #prefecture tbody tr {
    display: block;
    margin: 0 0 16px;
    border: 1px solid #666;
    background-color: #fff;
  }

  #laundry #prefecture tbody th,
  #laundry #prefecture tbody td {
    display: block;
    width: auto;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid #666;
    padding: 10px 12px;
    text-align: left;
    font-size: 14px;
    line-height: 1.55;
  }

  /* 店舗名行: PC表ヘッダと同系の水色帯・縦幅を確保して中央寄せ */
  #laundry #prefecture tbody th {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 20px 12px;
    background-color: #C3E9F1;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
  }

  #laundry #prefecture tbody td:last-child {
    border-bottom: none;
  }

  /* =========================================================
     ページ固有（laundry 店舗詳細）
     デザイン: 写真縦並び → 設備表 → ハローコール／アイコン → 地図
     ========================================================= */

  #laundry #shop_info {
    clear: both;
  }

  /* 写真・設備の float を解除して縦積み */
  #laundry #shop_img,
  #laundry #shop_equipment,
  #laundry #shop_equipment2 {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 0;
  }

  #laundry #shop_img {
    text-align: center;
  }

  #laundry #shop_img img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 0 12px;
  }

  #laundry #shop_equipment table,
  #laundry #shop_equipment2 table {
    width: 100%;
    margin: 0 0 16px;
  }

  /* 設備表ヘッダ: 水色帯・中央寄せ */
  #laundry #shop_equipment thead th,
  #laundry #shop_equipment2 thead th {
    min-height: 44px;
    padding: 12px 8px;
    vertical-align: middle;
    text-align: center;
  }

  #laundry #shop_equipment tbody th,
  #laundry #shop_equipment2 tbody th {
    text-align: left;
    padding: 8px 10px;
    font-size: 14px;
  }

  #laundry #shop_equipment tbody td,
  #laundry #shop_equipment2 tbody td {
    text-align: center;
    padding: 8px 10px;
    font-size: 14px;
  }

  /* ハローコール + 電話番号（PC用 float / table-cell を解除） */
  #laundry #shop_equipment #call,
  #laundry #shop_equipment2 #call {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
  }

  #laundry #shop_equipment #call p,
  #laundry #shop_equipment2 #call p {
    display: block;
    float: none;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
  }

  #laundry #shop_equipment #call img,
  #laundry #shop_equipment2 #call img {
    display: block;
    float: none;
    width: auto;
    max-width: 98px;
    height: auto;
    margin: 0;
  }

  /* 設備アイコン（屋根付駐車場・ネットカメラなど）横並び */
  #laundry #shop_equipment2 > p,
  #laundry #shop_equipment > p {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    clear: both;
  }

  #laundry #shop_equipment2 > p img,
  #laundry #shop_equipment > p img {
    display: block;
    float: none;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
  }

  /* 店舗詳細の Google Map（インライン固定幅を解除） */
  #laundry #right > #map,
  #laundry #shop_info + #map {
    width: 100% !important;
    max-width: 100%;
    height: 280px !important;
    margin: 8px 0 16px;
    clear: both;
  }
}