@charset "UTF-8";
/* ==========================================================================
   株式会社FEA ホームページ
   拠点一覧ページ（locations.html）専用のスタイル
   --------------------------------------------------------------------------
   もとは locations.html の <head> に直接書かれていたスタイルです。
   CSP から style-src 'unsafe-inline' を外すため、2026-09 に外部ファイル化しました。

   当初は HTML に書かれていた順番で locations-1.css / locations-2.css と
   機械的に分けていましたが、名前から中身が分からないため、
   2026-09-18 に1ファイルへまとめました。

   修正するときは、HTML ではなくこのファイルを編集してください。
   ========================================================================== */

header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background 0.3s, box-shadow 0.3s, padding 0.3s;
}
header.scrolled {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
header:not(.scrolled) nav ul li a {
  color: #ffffff;
  text-shadow: none;
}
header:not(.scrolled) nav ul li > a::after {
  background: #ffffff;
}
header:not(.scrolled) .logo img {
  filter: none;
}
header:not(.scrolled) .hamburger span {
  background: #ffffff;
}
header:has(nav ul li.has-dropdown:hover) {
  background: #ffffff;
}
header:has(nav ul li.has-dropdown:hover) nav ul li a {
  color: rgba(0,0,0,0.88);
  text-shadow: none;
}
header:has(nav ul li.has-dropdown:hover) .logo img {
  filter: none;
}
    /* Hide OSM tiles — Japan GeoJSON only, no ocean */
    .leaflet-tile-pane { display: none !important; }
    .leaflet-container { background: #f5f6f8 !important; }
    /* Leaflet popup monotone override */
    .leaflet-popup-content-wrapper {
      border-radius: 0 !important;
      box-shadow: 0 8px 40px rgba(30,51,105,0.16) !important;
      border: 1px solid rgba(30,51,105,0.18) !important;
      background: #ffffff !important;
    }
    .leaflet-popup-tip { background: #ffffff !important; }
    .leaflet-popup-close-button { color: rgba(30,51,105,0.40) !important; font-size: 18px !important; }

    /* ===== SCROLL インジケーター ===== */
    .scroll-down {
      position: fixed;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 900;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: rgba(30,51,105,0.45);
      font-size: 0.68rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      animation: scrollBounce 2.2s ease-in-out infinite;
      cursor: default;
      transition: opacity 0.4s;
      pointer-events: none;
    }
    .scroll-down.hidden {
      opacity: 0;
      visibility: hidden;
    }
    .scroll-down .arrow {
      width: 20px;
      height: 20px;
      border-right: 2px solid rgba(30,51,105,0.45);
      border-bottom: 2px solid rgba(30,51,105,0.45);
      transform: rotate(45deg);
    }
    @keyframes scrollBounce {
      0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
      50%       { transform: translateX(-50%) translateY(8px); opacity: 1; }
    }

/* ==========================================================================
   ここから下は、もと locations-2.css にあった指定です
   （locations.html の <head> の2つめの <style> ブロック）
   ========================================================================== */

:root {
      --header-h: 68px;
      --filter-h: 103px;
      --c-navy:        #1e3369;
      --c-blue:        #2a46a0;
      --c-dark:        #111e45;
      --c-bg:          #f5f6f8;
      --c-bg-mid:      #eef0f5;
      --c-bg-hi:       #e2e6f0;
      --c-border:      rgba(30,51,105,0.14);
      --c-gold:        #1e3369;
      --c-gold-bright: #2a46a0;
      --c-mid:         rgba(30,51,105,0.50);
      --c-text:        #1e3369;
      --c-text-sub:    rgba(30,51,105,0.58);
    }
body { font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; color: #1e3369; background: #f5f6f8; }
/* ※ body には overflow-x: hidden を付けないでください。
   html（common.css）と body の両方に付けると、ブラウザが body もスクロール領域と
   みなすため position: sticky が効かなくなり、地域フィルターのタブが
   スクロール時に固定されず流れていってしまいます。
   横スクロールの抑止は html 側の overflow-x: hidden だけで足りています。 */
.nav-overlay.open ~ * header,
    header { pointer-events: auto; }
.page-hero { margin-top: 0; padding: 160px 8vw 40px;
      min-height: 210px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-sizing: border-box;
      background:linear-gradient(160deg, rgba(17,25,65,0.304) 0%, rgba(30,51,105,0.281) 55%, rgba(10,18,55,0.313) 100%);
      color: #fff;
      border-bottom: 1px solid rgba(255,255,255,0.15);
      position: relative;
      overflow: hidden;
    }
.hero-globe {
      position: absolute;
      bottom: -160px;
      right: -100px;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      overflow: hidden;
      z-index: 1;
      opacity: 0.75;
      pointer-events: none;
      
      box-shadow:
        inset 20px -15px 70px rgba(0,5,20,0.45),
        inset -15px 8px 40px rgba(255,255,255,0.08);
    }
.hero-globe::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 200%;
      height: 100%;
      /* 表示サイズは最大480px（モバイル320px）のため1600pxの元画像は過大。
         全端末で1024px版を使用（250KB → 81KB） */
      background: url("../image/rs/earth-texture-1024.webp") repeat-x left center / 50% 100%;
      animation: globeSpin 24s linear infinite;
      will-change: transform;
    }
.hero-globe::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.053) 0%, rgba(255,255,255,0.0) 38%),
        radial-gradient(circle at 50% 50%, rgba(0,5,20,0.0) 60%, rgba(0,5,20,0.132) 100%);
      pointer-events: none;
    }
@keyframes globeSpin {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
@media (prefers-reduced-motion: reduce) {
  .hero-globe::before { animation: none; }
}
@media (max-width: 768px) {
  .hero-globe { width: 320px; height: 320px; right: -80px; bottom: -120px; opacity: 0.55; }
}
.hero-top {
      display: flex; justify-content: space-between; align-items: center;
      gap: 32px; margin-bottom: 0;
      position: relative;
      z-index: 2;
    }
.hero-top-left { flex: 1; }
.hero-count-box {
      flex-shrink: 0; text-align: right;
      padding-top: 4px;
    }
.hero-count-label {
      font-size: 0.68rem; letter-spacing: 0.25em; color: rgba(255,255,255,0.65);
      margin-bottom: 6px; text-transform: uppercase;
    }
.hero-count-number {
      font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 200;
      letter-spacing: 0.04em; line-height: 1; color: #fff;
      text-shadow: 0 2px 16px rgba(0,0,0,0.5);
    }
.hero-count-number span {
      font-size: 1.1rem; font-weight: 300; margin-left: 4px;
      color: rgba(255,255,255,0.85); letter-spacing: 0.1em;
    }
.hero-count-note {
      font-size: 0.68rem; color: rgba(255,255,255,0.55);
      letter-spacing: 0.1em; margin-top: 6px;
    }
@media (max-width: 600px) {
  .hero-top { flex-direction: row; align-items: flex-end; gap: 12px; }
  .hero-count-box { text-align: right; padding-top: 0; }
  .hero-count-label { font-size: 0.56rem; letter-spacing: 0.18em; margin-bottom: 3px; }
  .hero-count-number { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .hero-count-number span { font-size: 0.8rem; }
  .hero-count-note { font-size: 0.56rem; margin-top: 3px; }
}
@media (max-width: 400px) {
  .page-hero h1 { font-size: 1.5rem; }
  .hero-count-number { font-size: clamp(1.3rem, 7.5vw, 1.9rem); }
  .hero-count-note { font-size: 0.5rem; letter-spacing: 0.05em; white-space: nowrap; }
}
.page-hero .breadcrumb { font-size: 0.72rem; color: rgba(255,255,255,0.50); margin-bottom: 16px; letter-spacing: 0.1em; }
.page-hero .breadcrumb a { color: rgba(255,255,255,0.50); text-decoration: none; }
.page-hero .breadcrumb a:hover { color: #ffffff; }
.page-hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: 0.15em; margin-bottom: 6px; font-weight: 300; text-shadow: 0 2px 12px rgba(0,0,0,0.45); }
.page-hero .hero-sub { font-size: 0.78rem; color: #c8960a; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 0; font-weight: 400; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
/* ── 地域フィルターの帯 ──
   タブの形・大きさ・左右のスクロール案内は共通ファイル（css/section-nav.css）に
   まとめてあります。ここでは「ヘッダーの下に貼り付く」動きと、
   このページ用の紺色だけを指定しています。

   ※ セレクタを .region-filter.section-nav-wrap と2つ重ねているのは、
      共通ファイルが後から読み込まれるため、1つだけだと共通側の指定
      （position: relative）に負けてしまうからです。 */
.region-filter.section-nav-wrap {
      position: sticky;
      top: var(--header-h);
      z-index: 50;
      margin: 0;
      border-top: none;
      border-bottom: 1px solid rgba(255,255,255,0.12);
      background: #1e3369;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
/* タブは <button> なので、ブラウザ標準の書体・カーソルを打ち消す */
.region-btn.section-nav-pill {
      font-family: inherit;
      letter-spacing: 0.06em;
      cursor: pointer;
      margin-bottom: 0;
    }
/* 左右のスクロール案内のぼかしを、この帯の紺色に合わせる */
.region-filter .section-nav-fade-left {
      background: linear-gradient(to right, #1e3369, rgba(30,51,105,0));
    }
.region-filter .section-nav-fade-right {
      background: linear-gradient(to left, #1e3369, rgba(30,51,105,0));
    }
.page-content {
      max-width: 1300px; margin: 0 auto; padding: 0 3vw 80px;
      display: flex; align-items: stretch; gap: 0;
    }
#map-container {
      position: sticky; top: calc(var(--header-h) + var(--filter-h));
      scroll-margin-top: calc(var(--header-h) + var(--filter-h));
      width: 30%; flex-shrink: 0;
      height: calc(100vh - var(--header-h) - var(--filter-h));
      border-radius: 0; overflow: hidden;
      box-shadow: 4px 0 16px rgba(30,51,105,0.12);
      border: none; border-right: 2px solid #1e3369;
      margin-bottom: 0;
      order: -1; 
    }
#map { width: 100%; height: 100%; }

#rightPane {
      flex: 1; padding: 32px 28px 60px;
      overflow-y: visible;
      background: #f5f6f8;
    }
#cardsContainer {
      scroll-margin-top: calc(var(--header-h) + var(--filter-h) + 16px);
    }
.location-section { margin-bottom: 32px; }
.region-heading {
      font-size: 0.68rem; letter-spacing: 0.3em; color: var(--c-gold);
      font-weight: 500; margin-bottom: 12px; padding-left: 2px;
      display: flex; align-items: center; gap: 12px;
      text-transform: uppercase;
    }
.region-heading::after { content: ""; flex: 1; height: 1px; background:linear-gradient(90deg, rgba(30,51,105,0.066), transparent); }
.count-badge {
      display: inline-block; background: transparent;
      color: rgba(30,51,105,0.40); border-radius: 0;
      padding: 0; font-size: 0.68rem; font-weight: 400; margin-left: 4px;
      letter-spacing: 0.1em;
    }
.location-cards { display: flex; flex-direction: column; gap: 0; }
.location-card {
      background: #ffffff; border-radius: 0; padding: 13px 20px;
      border-left: 3px solid rgba(30,51,105,0.20);
      border-bottom: 1px solid rgba(30,51,105,0.08);
      display: flex; align-items: center; gap: 0;
      transition: border-left-color 0.2s, background 0.2s;
    }
.location-card:hover { border-left-color: rgba(30,51,105,0.20); background: #ffffff; }
.location-card.highlighted { border-left-color: #1e3369; background: #eef0f5; }
.location-card h3 {
      font-size: 0.84rem; color: #1e3369; margin-bottom: 0;
      letter-spacing: 0.04em; width: 172px; flex-shrink: 0; font-weight: 600;
      padding-right: 12px; white-space: nowrap;
    }
.location-card p {
      font-size: 0;
      margin: 0; flex: 1;
      display: flex; flex-direction: column; gap: 4px;
      min-width: 0;
    }
.card-address {
      font-size: 0.78rem; color: rgba(30,51,105,0.88); white-space: normal;
      min-width: 0;
    }
.card-sub {
      display: flex; align-items: center; gap: 0; flex-wrap: nowrap;
    }
.card-fax-row { display: flex; align-items: center; }
.card-tel, .card-fax {
      font-size: 0.72rem; color: rgba(30,51,105,0.68); white-space: nowrap;
      flex-shrink: 0; padding-right: 16px;
    }
.card-tel::before { content: "TEL "; color: rgba(30,51,105,0.45); font-size: 0.66rem; }
.card-fax::before { content: "FAX "; color: rgba(30,51,105,0.45); font-size: 0.66rem; }
.map-link {
      display: inline-block; margin-left: auto; padding-left: 20px; flex-shrink: 0;
      font-size: 0.75rem;
      color: #1e3369; text-decoration: none; border-bottom: 1px solid rgba(30,51,105,0.30);
      letter-spacing: 0.06em;
    }
.map-link:hover { border-bottom-color: var(--c-gold); }
.map-link-mobile { display: none; }
@media (max-width: 900px) {
  .page-content { flex-direction: column; gap: 0; }
  #map-container {
        position: static; width: 100%; height: 360px;
        border-right: none; border-top: 1px solid rgba(30,51,105,0.10); border-bottom: none;
        order: 0; 
      }
  #rightPane { padding: 24px 16px 48px; overflow-y: visible; }
  .location-card { flex-direction: column; align-items: flex-start; gap: 6px; border-left-width: 2px; }
  .location-card h3 { min-width: unset; width: auto; }
  .location-card p { flex-direction: column; align-items: flex-start; width: 100%; }
  .card-address { white-space: normal; }
  .card-sub { flex-direction: column; align-items: flex-start; flex-wrap: wrap; gap: 6px; width: 100%; }
  .card-tel, .card-fax { padding-right: 0; }
  .card-fax-row { width: 100%; }
  .map-link-desktop { display: none; }
  .map-link-mobile { display: inline-block; margin-left: auto; padding-left: 16px; }
  .region-filter.section-nav-wrap {
        position: sticky;
        top: var(--header-h);
        z-index: 100;
        margin: 0;
        border-top: none;
      }
}

@media (max-width: 480px) {
  .page-hero {
        padding: 50px 6vw 26px;
      }
  .page-hero h1 {
        font-size: 2rem;
        line-height: 1.5;
      }
  .page-hero .hero-sub {
        font-size: 0.68rem;
        letter-spacing: 0.2em;
      }
}