@charset "utf-8";

/* ==========================================
   1. Variables & Root (変数定義)
========================================== */
:root {
  --dist-right-pad: 12px;
  --dist-right: 500px;
  --dist-gap: 32px;
  --dist-side: 30px;      /* 右余白 */
  --dist-left: 24px;      /* 左余白 */
  --dist-height: 700px;   /* 高さはここだけで一括管理 */
}

/* ==========================================
   2. Layout & Common (レイアウト土台)
========================================== */
.dist-wrap {
  margin: 0; padding: 24px 16px 40px;
  display: flex; align-items: stretch; gap: var(--dist-gap);
}

.dist-grid {
  display: flex; gap: var(--dist-gap); align-items: stretch;
  margin-top: 10px;
  padding: 0 var(--dist-side) 0 var(--dist-left); box-sizing: border-box;
}

.dist-section { margin: 0 0 10px; flex: 1; min-height: 0; }
.dist-section:last-child { margin-bottom: 0; }
.dist-subhead { margin: 10px 0 6px; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: #444; }

/* 代理店ページ：ページトップボタン非表示 */
#products ~ .gotop { display: none; }

/* ページタイトル周り */
#products .page-title {
  font-size: 22px; line-height: 76px; font-weight: 400; letter-spacing: 4px;
  margin: 50px 20px 20px; padding: 5px 30px; position: relative; text-align: center; display: inline-block;
}
#products .page-title:before,
#products .page-title:after {
  content: ""; display: block; position: absolute; top: 0; width: 3px; height: 76px; z-index: 1; background-size: cover;
}
#products .page-title:before { left: 0; background: url(../img/h1_Lr.png) left top no-repeat; }
#products .page-title:after { right: 0; background: url(../img/h1_Rr.png) left top no-repeat; }
.page-title .dist-en { font-size: 26px; letter-spacing: .2em; margin-left: 0px; opacity: .65; }
.product_title_name img { max-width: 240px; height: auto; margin-bottom: 6px; opacity: .92; }

#products .product_title_name {
  width: 90%;
  margin: 15px auto 20px auto;
}

/* 代理店案内：トップ説明文のスタイル */
.dist-intro {
  max-width: 850px;         /* PCで横に広がりすぎないよう最大幅を設定 */
  margin: 0px auto 50px;   /* ロゴとの間隔(上)、中央寄せ(左右)、下の要素との間隔(下) */
  padding: 0 20px;          /* 左右の余白 */
  font-size: 14px;          /* 読みやすい文字サイズ */
  line-height: 1.6;         /* ゆったりとした行間 */
  color: #333333;           /* 視認性の高い濃いグレー（真っ黒より馴染みます） */
  text-align: center;       /* タイトルやロゴに合わせて中央揃え */
  word-break: auto-phrase;  /* 単語の途中で不自然に改行されないようにする（最新ブラウザ向け） */
}

/* スマホ閲覧時（画面幅768px以下）の微調整 */
@media screen and (max-width: 768px) {
  .dist-intro {
    font-size: 14px;        /* スマホでは文字を少し小さく */
    margin: 0px auto 40px; /* 上下の余白も少し狭める */
    text-align: left;       /* ★スマホの狭い画面では左揃えの方が読みやすい傾向があります */
  }
}

/* ==========================================
   3. Top Controls (タブ＋検索)
========================================== */
.dist-tools {
  display: grid; grid-template-columns: 1fr var(--dist-right); gap: var(--dist-gap); align-items: center;
  position: relative; z-index: 50; margin: 16px 0 14px;
  padding: 0 var(--dist-side) 0 var(--dist-left); box-sizing: border-box;
}

/* タブ */
.dist-tabs { justify-self: center; display: inline-flex; gap: 36px; align-items: center; }
.dist-tab {
  appearance: none; background: transparent; border: 0; padding: 6px 0;
  font-size: 16px; letter-spacing: .06em; font-weight: 500; color: rgba(0,0,0,.55); cursor: pointer; transition: color .18s ease;
}
.dist-tab:hover { color: rgba(0,0,0,.9); }
.dist-tab.is-active,
.dist-tab[aria-selected="true"] { color: rgba(0,0,0,.95); font-weight: 600; }

/* 検索ボックス */
.dist-search-wrap { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; }
.dist-search-box { flex: 1; min-width: 0; position: relative; }
.dist-area-select { flex: 0 0 120px; height: 32px; padding: 0 8px; border: 1px solid #8f8f8f; border-radius: 4px; font-size: 14px; box-sizing: border-box; }

#dealerSearch {
  width: 100%; height: 32px; padding: 0 38px; border: 1px solid #8f8f8f; border-radius: 4px; font-size: 14px; box-sizing: border-box;
}
.dist-search-box .search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px;
  pointer-events: none; opacity: .9; display: block; background-size: contain;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'><path d='M21 20l-5.2-5.2a7 7 0 10-1 1L20 21zM4 11a7 7 0 1114 0A7 7 0 014 11z'/></svg>") no-repeat center;
}
.dist-search-meta { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .7; white-space: nowrap; }

.dist-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px;
  background: transparent; border: none; font-size: 18px; line-height: 24px; color: #666;
  cursor: pointer; opacity: .65; display: none; z-index: 2; padding: 0; outline: none;
}
.dist-clear:hover { opacity: 1; }

/* ==========================================
   4. Map & Pins (地図・ピン)
========================================== */
.dist-map { position: relative; z-index: 1; flex: 1; margin-bottom: 0; }
.dist-mapbox { position: relative; height: 500px; }

.dist-mapimg--world { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.dist-mapimg--jp { display: none; width: 46%; max-width: 520px; margin: 0 auto; position: relative; top: 20px; pointer-events: none; }

.dist-mapbox.is-jp .dist-mapimg--world { display: none; }
.dist-mapbox.is-jp .dist-mapimg--jp { display: block; }

.dist-pins { position: absolute; inset: 0; outline: none; z-index: 1; }
.dist-pin { position: absolute; }

button.dist-pin {
  width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0;
  background: rgba(70,170,255,.7); box-shadow: 1px 2px 4px rgba(0,0,0,.18); transform: translate(-50%, -50%);
  cursor: pointer; transition: all .15s ease;
}

button.dist-pin.jp { width: 24px; height: 24px; border-radius: 50%; color: rgba(70,170,255,.7); }
button.dist-pin.jp::after {
  content: ""; position: absolute; left: 50%; top: 85%; transform: translateX(-50%);
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 15px solid currentColor; transition: border-top-color .15s ease;
}

button.dist-pin:hover,
button.dist-pin.is-hover,
button.dist-pin.is-active { background: rgba(0,120,255,.95); box-shadow: none; color: rgba(0,120,255,.95); z-index: 10; }

/* Japanジャンプピン */
button.dist-pin.jp-jump { width: 20px; height: 20px; transform: translate(-50%, -50%) scale(1.05); }
button.dist-pin.jp-jump::after { border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid currentColor; }
button.dist-pin.jp-jump:hover { transform: translate(-50%, -50%) scale(1.15); }

/* ピンラベル（エリア名） */
.pin-label {
  position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); font-size: 11px;
  padding: 3px 6px; background: #fff; color: #222; border: 1px solid rgba(0,0,0,.15); border-radius: 4px;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.08); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 999;
}

/* ==========================================
   5. Tooltips (都道府県の吹き出し)
========================================== */
/* 吹き出しの基本設定（全画面幅で共通） */
.dist-pin.jp { position: absolute; overflow: visible !important; }

.dist-pin.jp .pref-tooltip {
  display: flex !important;
  flex-wrap: wrap; /* ★スマホやタブレットで窮屈な場合は自動で綺麗に折り返す */
  justify-content: flex-start;
  width: max-content;
  max-width: 250px; /* ★画面外へのはみ出しを防止 */
  position: absolute; top: 100%; left: 50%; transform: translateX(-24px) translateY(10px);
  background: rgba(255, 255, 255, 0.98); border: 1px solid #ccd0d4; border-radius: 6px; padding: 6px 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); gap: 5px; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index: 9999;
}

.dist-pin.jp .pref-tooltip::before {
  content: ""; position: absolute; bottom: 100%; left: 24px; border: 6px solid transparent; border-bottom-color: #ffffff;
}

.dist-pin.jp .pref-tooltip span { 
  font-size: 11px; color: #444; background: #f4f4f4; padding: 1px 5px; border-radius: 3px; display: inline-block; white-space: nowrap; 
}

/* マウスホバー時、またはタップでアクティブになった時にフワッと表示 */
.dist-pin.jp:hover .pref-tooltip,
.dist-pin.jp.is-active .pref-tooltip { 
  opacity: 1; visibility: visible; transform: translateX(-24px) translateY(6px); 
}

/* ==========================================
   6. Right List Column (リスト・カード)
========================================== */
.dist-list { display: flex; flex-direction: column; min-width: 0; width: var(--dist-right); }

.dist-listbox {
  width: 100%; height: 500px; display: flex; flex-direction: column; box-sizing: border-box;
  padding: var(--dist-right-pad); margin: 0 0 12px;
  background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: 13px;
  overflow-y: auto; scrollbar-gutter: stable;
}

.dist-group { margin-bottom: 20px; }
.dist-group h3 { display: none; }

.area-title {
  position: relative; text-align: center; font-size: 12px; font-weight: bold; color: #333;
  background: rgba(70, 170, 255, 0.08); padding: 8px 10px; margin: 16px 0 8px 0; border-radius: 4px; letter-spacing: 0.05em;
}
.count-badge {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #666;
  background: rgba(255, 255, 255, 0.8); padding: 2px 6px; border-radius: 99px; display: inline-block;
}

/* カードデザイン */
.dist-cards { flex: 1; scrollbar-gutter: stable; }
.dist-scroll-spacer { height: 370px; }

.dist-card {
  padding: 12px 14px; margin: 6px 0; background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: 8px;
  text-align: left; font-size: 14px; line-height: 1.4; transition: background .2s ease, color .2s ease; cursor: pointer;
}
.dist-list-item.is-hover, .dist-card.is-hover, .dist-card:hover { background: #e8e8e8; }
.dist-list-item.is-active, .dist-card.is-active { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.22); color: inherit; }

.dist-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin: 0; padding: 0; }
.dist-name { font-size: 14px; font-weight: 600; line-height: 1.25; margin: 0 0 4px; }
.dist-flag { font-size: 16px; line-height: 1; }
.dist-loc { font-size: 12px; opacity: .85; margin-top: 2px; }

.dist-card .dist-address,
.dist-card address { line-height: 1.35; white-space: pre-line; overflow: visible; }
.dist-addr {
  font-size: 13px; line-height: 1.5; margin-top: 2px; white-space: pre-line;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

.dist-card .dist-url { display: inline-block; margin-top: 3px; font-size: 14px; color: #222; text-decoration: none; transition: color .2s ease; }
.dist-card .dist-url:hover, .dist-card .dist-url:focus-visible { color: #1976d2; }
.dist-note { font-size: 14px; opacity: .75; margin-top: 4px; line-height: 1.35; }

/* バッジ（デモ・展示品） */
.dist-badges { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
.dist-badge { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; cursor: pointer; }
.dist-badge--demo { background: #2b7cff; }
.dist-badge--showroom { background: #2bb673; }
.dist-badge:hover::after {
  content: attr(data-tooltip); position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  white-space: nowrap; background: rgba(0,0,0,.8); color: #fff; font-size: 11px; line-height: 1.4;
  padding: 4px 8px; border-radius: 6px; z-index: 20;
}


/* ==========================================
   7. Responsive (メディアクエリ・レスポンシブ制御)
========================================== */

/* --- タブレット・スマホ環境（画面幅1050px以下） --- */
@media (max-width: 1050px) {
  
  /* ★修正：PC版の「z-index: 50」を強制リセットし、メニューの裏に隠れるようにする */
  .dist-tools { 
    grid-template-columns: 1fr !important;
    position: relative !important; /* 念のため固定(sticky)も確実に無効化 */
    top: auto !important;
    z-index: 1 !important; /* ★ここを1に下げることでハンバーガーメニューの裏に回ります */
    background: transparent !important;
  }
  
  /* JSで付与される検索中クラス（is-searching）を使って100%確実に地図を隠す */
  body.is-searching .dist-map { display: none !important; }

  /* 地図を上、リストを下にして「縦積み」にする */
  .dist-grid {
    display: flex !important; flex-direction: column !important; width: 100% !important; margin: 0 !important;
    padding: 0 var(--dist-side) 0 var(--dist-left) !important; /* 左右の余白を美しく復活 */
    gap: 24px;
  }
  
  .dist-map { display: block !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin: 0 auto 30px auto !important; padding: 0 !important; }
  .dist-mapbox { width: 100% !important; max-width: 100% !important; }
  .dist-mapimg--jp { width: 55%; max-width: 480px; top: 10px; }
  
  /* リストエリアを画面幅100%にし、内側の余白を復活させる */
  .dist-list { display: block !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin: 0 !important; padding: 0 !important; }
  .dist-listbox { width: 100% !important; height: auto !important; max-height: none !important; overflow-y: visible !important; padding: var(--dist-right-pad) !important; }
  
  .product_title_name img { max-width: 220px; }
  .distri_contents #products {
    padding-top: 40px; 
  }
}

/* --- スマホ・小タブレット（768px以下）：サイズ微調整 --- */
@media (max-width: 768px) {
  :root { --dist-right: 100%; --dist-side: 10px; --dist-left: 10px; }
  
  .dist-scroll-spacer { display: none; }
  
  .dist-card { padding: 8px 12px; margin-bottom: 10px; border-radius: 14px; }
  .dist-card h3 { font-size: 14px; margin-bottom: 3px; line-height: 1.25; }
  .dist-card p { font-size: 12px; line-height: 1.25; margin-bottom: 2px; }
  .dist-card a { font-size: 12px; }
  
  .distributors #products .page-title { line-height: 1.4; }
  .distributors .dist-card .dist-addr { -webkit-line-clamp: 2; font-size: 13px; line-height: 1.3; }
  .distributors .dist-card .dist-url { font-size: 12px; margin-top: 2px; }
  .distributors .dist-name { line-height: 1.8; }
}

/* --- スマホ特化（700px以下）：地図完全非表示 --- */
@media (max-width: 700px) {
  .dist-map { display: none !important; }
  .dist-listbox { border-radius: 12px; }
  .dist-tabs { gap: 20px; }
  .dist-tab { font-size: 14px; }
  .product_title_name img { max-width: 200px; }
}

/* ==========================================
   このページ（代理店ページ）専用の余白調整
   他のページには一切影響させない
========================================== */

/* 1. #products 自身の上のスペース（元: 80px）を狭くする */
.distributors .subPage_contents #products {
  padding-top: 30px !important; /* ★ 80pxから好きな数値に減らしてください */
}

/* 2. さらにタイトル上のスペース（元: 50px）も狭くしたい場合 */
.distributors #products .page-title {
  margin-top: 20px !important; /* ★ 50pxから好きな数値に減らしてください */
}

/* ==========================================
   中間サイズのPC画面（1051px 〜 1400px）での
   日本地図の大きさと位置の最適化
========================================== */
@media (min-width: 1051px) and (max-width: 1400px) {
  .dist-mapimg--jp {
    width: 65% !important;       /* 元の46%から拡大して余白を埋める */
    max-width: 600px !important; /* 上限サイズも少し大きくする */
    top: 60px !important;        /* 元の20pxから少し下へ下げて、縦のバランスを整える */
  }
}

/* スマホ画面（幅767px以下）のときだけ高さを調整する */
@media screen and (max-width: 767px) {
  #products .page-title:before, 
  #products .page-title:after {
    height: 40px !important; /* ここを調整（40px〜50pxくらいが適当です） */
    top: 50%;               /* 縦方向のズレも防ぐために中央寄せ */
    transform: translateY(-50%);
  }
}