@charset "UTF-8";

/* =========================================
   Reset / Base
   ========================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: #ffffff;
  color: #222;
  line-height: 1.7;
}

img {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

picture {
  display: contents;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================
   Swiper コンテナ
   ========================================= */
.main-swiper {
  width: 100%;
  height: 100svh;
  height: 100dvh;
}

.sub-swiper {
  width: 100%;
  height: 100%;
}

/* =========================================
   各スライドの中身
   ========================================= */
.slide-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.slide-image {
  width: 100%;
  height: 100%;
  max-width: 750px;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

/* -----------------------------------------
   slide-stage（画像とホットスポットを重ねる土台）
   - object-fit: contain と同じく、親領域内に収まる最大サイズで
     画像比率を保持して配置
   - スマホ版画像比率: 750:1100
   ----------------------------------------- */
.slide-stage {
  position: relative;
  /* 画像と同じ contain ロジック:
     幅は親いっぱい(=100%) を上限とし、
     高さも親いっぱい(=100%) を上限とする
     幅か高さどちらかが制限にぶつかった時点で、
     aspect-ratio が反対側を自動算出してくれる */
  width: 100%;
  height: auto;       /* 高さは比率から算出 */
  aspect-ratio: 750 / 1100;
  max-height: 100%;   /* 画面高さを超えないよう制限 */
  max-width: 100%;
  margin: auto;       /* 縦横ともに中央配置 */
}

.slide-stage .slide-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* -----------------------------------------
   ホットスポット（共通）
   ----------------------------------------- */
.hotspot {
  position: absolute;
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 20;
  pointer-events: auto;
  text-decoration: none;
  /* スワイプ操作をブラウザが横取りしないように
     pan-x: 横スワイプを通す / pan-y: 縦スワイプを通す
     両方指定でホットスポット上でも縦横スワイプが効く */
  touch-action: pan-x pan-y;
  /* デバッグ可視化: 必要に応じてコメント解除 */
  /* background: rgba(255, 0, 0, 0.25); border: 1px dashed red; */
  -webkit-tap-highlight-color: rgba(0,0,0,0.06);
  border-radius: 8px;
  transition: background 0.15s;
}

.hotspot:active {
  background: rgba(0, 0, 0, 0.05);
}

/* -----------------------------------------
   ホットスポット位置定義（スマホ版・デフォルト）
   ----------------------------------------- */
/* Section 1 */
.hotspot[data-spot="s1-contact"]    { left: 21%; top: 70%; width: 60%; height: 9%; }

/* Section 10（2列 × 3行） */
.hotspot[data-spot="s10-1"] { left: 9.6%;  top: 14%; width: 38.1%; height: 26%; }
.hotspot[data-spot="s10-2"] { left: 52.5%; top: 14%; width: 38.1%; height: 26%; }
.hotspot[data-spot="s10-3"] { left: 9.6%;  top: 43%; width: 38.1%; height: 26%; }
.hotspot[data-spot="s10-4"] { left: 52.5%; top: 43%; width: 38.1%; height: 26%; }
.hotspot[data-spot="s10-5"] { left: 9.6%;  top: 72%; width: 38.1%; height: 26%; }
.hotspot[data-spot="s10-6"] { left: 52.5%; top: 72%; width: 38.1%; height: 26%; }

/* Section 12 */
.hotspot[data-spot="s12-aidojo"]  { left: 0%; top: 23.45%; width: 100%; height: 19.55%; }
.hotspot[data-spot="s12-company"] { left: 7%; top: 51%; width: 86%; height: 11%; }
.hotspot[data-spot="s12-contact"] { left: 7%; top: 68%; width: 86%; height: 11%; }

/* Section 13 */
.hotspot[data-spot="s13-osaka"]    { left: 7.5%; top: 49%; width: 38%; height: 7.5%; }
.hotspot[data-spot="s13-yokohama"] { left: 7.5%; top: 60%; width: 38%; height: 7.5%; }

/* Section 5 内 横スワイプ用矢印（画像内のボタンに合わせた位置 / スマホ版） */
.hotspot.sub-prev { left: 37%;   top: 90.8%; width: 13.5%; height: 9.2%; }
.hotspot.sub-next { left: 50.5%; top: 90.8%; width: 13.9%; height: 9.2%; }

/* サブスワイパー先頭/終端時、対応する矢印を非クリッカブルに
   （画像側でボタンが消えるため、ホットスポット領域を無効化するのみ） */
.sub-swiper.is-beginning .swiper-slide-active .hotspot.sub-prev,
.sub-swiper.is-end .swiper-slide-active .hotspot.sub-next {
  pointer-events: none !important;
  cursor: default !important;
}

/* PC版でしか使わないホットスポットはスマホでは非表示 */
.hotspot.pc-only {
  display: none;
}


/* =========================================
   固定CTAボタン
   - 2枚目以降のスライドで表示（JSで .is-visible 付与）
   - スマホ: 画面最下部に横全幅で固定
   - PC: 画面右下にコンパクトに固定
   ========================================= */
.fixed-cta {
  position: fixed;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  display: block;
}

.fixed-cta.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fixed-cta img {
  display: block;
  width: 100%;
  height: auto;
}

/* スマホ版（〜767px）: 最下部固定・横全幅 */
.fixed-cta {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* セーフエリア対応（iPhoneのホームバー回避） */
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(20px);
}

.fixed-cta.is-visible {
  transform: translateY(0);
}


/* =========================================
   ページネーション
   ========================================= */
.main-pagination {
  position: absolute;
  top: 50% !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

.main-pagination .swiper-pagination-bullet {
  display: block;
  width: 6px;
  height: 6px;
  margin: 0 !important;
  background: rgba(0, 0, 0, 0.25);
  opacity: 1;
  transition: background 0.2s, transform 0.2s;
}

.main-pagination .swiper-pagination-bullet-active {
  background: #ff5a1f;
  transform: scale(1.4);
}

/* サブページネーション（横スワイプの○○○）は非表示 */
.sub-pagination {
  display: none !important;
}


/* =========================================
   モーダル
   ========================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal.is-open {
  display: flex;
  animation: modalFadeIn 0.25s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88svh;
  max-height: 88dvh;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  z-index: 5;
  transition: background 0.2s;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.9);
}

.modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 24px 0;
}

.modal-image {
  width: 100%;
  height: auto;
  display: block;
  background: #f4f4f4;
  margin-bottom: 20px;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0 20px;
  margin-bottom: 12px;
  color: #222;
}

.modal-lead {
  font-size: 0.95rem;
  padding: 0 20px;
  margin-bottom: 20px;
  color: #444;
}

.modal-h3 {
  font-size: 1rem;
  font-weight: 700;
  padding: 0 20px;
  margin: 20px 0 8px;
  color: #ff5a1f;
  border-left: 3px solid #ff5a1f;
  padding-left: 16px;
  margin-left: 20px;
}

.modal-body > p {
  font-size: 0.9rem;
  padding: 0 20px;
  margin-bottom: 12px;
  color: #333;
}

.modal-list {
  padding: 0 20px 0 40px;
  margin-bottom: 12px;
}

.modal-list li {
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: #333;
}

.modal-list li b {
  color: #ff5a1f;
}

body.modal-open .main-swiper {
  pointer-events: none;
}


/* =========================================
   PC版（768px以上）
   - 画像比率を 1600:900 (16:9) に変更
   - ホットスポット位置をPC版に再指定
   - Section 13 を非表示
   ========================================= */
@media (min-width: 768px) {
  body {
    background: #f5f5f5;
  }

  .main-swiper {
    max-width: 100%;
    margin: 0;
    box-shadow: none;
    background: #fff;
  }

  /* slide-stage を PC版の縦横比 16:9 に */
  .slide-stage {
    aspect-ratio: 1600 / 900;
    max-width: 100%;
    max-height: 100%;
  }

  .slide-image {
    max-width: 100%;
  }

  /* スマホ専用スライド（Section 13）を非表示 */
  .swiper-slide.sp-only {
    display: none !important;
  }

  /* PC版ホットスポットを表示 */
  .hotspot.pc-only {
    display: block;
  }

  /* ホットスポット位置（PC版） */
  /* Section 1 */
  .hotspot[data-spot="s1-contact"]    { left: 41.3%; top: 78%; width: 17.1%; height: 8.9%; }

  /* Section 10（3列 × 2行） */
  .hotspot[data-spot="s10-1"] { left: 14.25%; top: 23.33%; width: 16.94%; height: 30.22%; }
  .hotspot[data-spot="s10-2"] { left: 41.44%; top: 23.33%; width: 16.94%; height: 30.22%; }
  .hotspot[data-spot="s10-3"] { left: 68.69%; top: 23.33%; width: 16.94%; height: 30.22%; }
  .hotspot[data-spot="s10-4"] { left: 14.25%; top: 64.11%; width: 16.94%; height: 30.11%; }
  .hotspot[data-spot="s10-5"] { left: 41.44%; top: 64.11%; width: 16.94%; height: 30.11%; }
  .hotspot[data-spot="s10-6"] { left: 68.69%; top: 64.11%; width: 16.94%; height: 30.11%; }

  /* Section 12 */
  .hotspot[data-spot="s12-aidojo"]   { left: 15.19%; top: 19.44%; width: 69.75%; height: 30.56%; }
  .hotspot[data-spot="s12-company"]  { left: 40.88%; top: 75.67%; width: 18.50%; height: 6.22%; }
  .hotspot[data-spot="s12-contact"]  { left: 66.50%; top: 75.67%; width: 18.50%; height: 6.22%; }
  .hotspot[data-spot="s12-osaka"]    { left: 12%;    top: 75%;    width: 33%;    height: 9%; }
  .hotspot[data-spot="s12-yokohama"] { left: 12%;    top: 85%;    width: 33%;    height: 9%; }

  /* Section 5 矢印ボタン（PC版） */
  .hotspot.sub-prev { left: 76.5%; top: 31%; width: 3%;   height: 5%; }
  .hotspot.sub-next { left: 79.5%; top: 31%; width: 3%;   height: 5%; }

  /* メインのページネーションをPCでは少し離す */
  .main-pagination {
    right: 24px !important;
  }
  .main-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }

  /* PC版CTA: 右上にコンパクトに固定 */
  .fixed-cta {
    left: auto;
    right: 24px;
    top: 24px;
    bottom: auto;
    width: auto;
    max-width: 311px;
    padding-bottom: 0;
    /* 自然影でクリックエリアの存在感を出す */
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
    transform: translateY(0) translateX(20px);
  }

  .fixed-cta.is-visible {
    transform: translateY(0) translateX(0);
  }

  .fixed-cta img {
    width: auto;
    max-width: 100%;
  }
}