/* ========================================
   snorkeling-plan.css
   シュノーケリングプランページ専用スタイル
   SP基準: 375px / PC基準: 1366px
======================================== */

.snp-page {
  background: #fff;
}

/* ========================================
   FV / ヒーロー（contact.html と同構造）
======================================== */

.snp-hero {
  position: relative;
  background: #e4fcff;
}

/* 海の写真（SP: 通常フロー、コンテナ高さを決定） */
.snp-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 波形エリア（absolute: 写真の上、z-index:1） */
.snp-hero__upper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}

/* 波形 SVG */
.snp-hero__wave {
  display: block;
  width: 100%;
  height: auto;
}

/* タイトルラッパー（波形内 absolute） */
.snp-hero__title-wrap {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  padding-left: 20px;
}

/* タイトル: グラデーションテキスト */
/* Figma: SP_h1 Shippori Mincho B1 Bold 700 / 26px / line-height 36px */
.snp-hero__title {
  font-family: var(--sub-font);
  font-size: var(--fs-26);
  font-weight: 700;
  line-height: 1.4;
  background: var(--bg_gd-color);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ========================================
   パンくずリスト
   pages.css の .breadcrumb を上書き
======================================== */

/* Figma: パンくず y=474 / ヒーロー下端 y=450 → gap 24px */
.snp-breadcrumb-wrap .breadcrumb {
  padding: 24px 20px 0;
  margin-bottom: 0;
}

/* ========================================
   プラン一覧
   Figma: x=20 y=586 w=335 (section_space)
======================================== */

/* Figma: パンくず下端 y=490 → プラン y=586 → gap 96px */
.snp-plans {
  margin-top: 96px;
  padding-bottom: min(51.47vw, 193px); /* フッターまでの余白 */
}

.snp-plans__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 48px; /* Figma: gap 48px */
}

/* ---- プランカード ---- */
/* Figma: column / alignItems:center / gap:24px */

.snp-plan-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* SP: タイトル＋ボタンのラッパー（PC横並び対応のために追加） */
.snp-plan-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* 円形画像 */
/* Figma: Ellipse 10 / 250×250px */
.snp-plan-card__img-wrap {
  margin: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.snp-plan-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* プランタイトル */
/* Figma: SP_h2 Shippori Mincho B1 Bold 700 / 22px / line-height 33px / center */
.snp-plan-card__title {
  font-family: var(--sub-font);
  font-size: var(--fs-22);
  font-weight: 700;
  line-height: 33px;
  text-align: center;
  color: var(--text-color);
  margin: 0;
}

/* プラン詳細ボタン */
/* Figma: w=200 h=31 / 左: テキスト / 右: 丸矢印 / 下: 2px ボーダー */
/* border-bottom はグラデーション hover 対応のため ::after で実装 */
.snp-plan-card__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 200px;
  padding-bottom: 6px;
  text-decoration: none;
  position: relative;
}

.snp-plan-card__btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--main-color);
}

/* ボタンテキスト */
/* Figma: Noto Sans CJK JP Medium 500 / 16px */
.snp-plan-card__btn-text {
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1;
  color: var(--main-color);
}

/* 丸矢印アイコン */
/* Figma: Ellipse 25×25 fill=#0E3A70 + arrow */
.snp-plan-card__btn-arrow {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.snp-plan-card__btn-arrow img {
  display: block;
  width: 60%;
}

/* ========================================
   PC レイアウト（768px 以上）
   Figma: 1366px 基準
======================================== */

@media (min-width: 768px) {
  /* ---- ヒーロー: 左（波形）+ 右（写真）分割（contact / news-list と同構造） ---- */
  /* Figma: 波形 x=0 y=0 w=432 h=430 / 写真 x=403 y=80 w=963 h=350 */

  .snp-hero {
    height: min(31.48vw, 430px); /* 430/1366 */
    background: transparent;
  }

  /* 写真: PC では absolute で右カラムに配置 */
  .snp-hero__photo {
    position: absolute;
    left: min(29.5vw, 403px); /* 403/1366 */
    right: 0;
    top: 80px;
    bottom: 0;
    z-index: 0;
  }

  .snp-hero__photo picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .snp-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    object-position: top center;
  }

  /* 波形エリア: PC では左カラムとして相対配置 */
  .snp-hero__upper {
    position: relative; /* SP: absolute → PC: relative（コンテナ高さを決定） */
    width: min(32.87vw, 449px); /* 449/1366 */
    height: min(31.48vw, 430px);
    overflow: visible;
    filter: drop-shadow(4px 0 8px rgba(0, 0, 0, 0.12)); /* 右向きシャドウ */
  }

  .snp-hero__upper picture {
    display: block;
    height: 100%;
  }

  .snp-hero__wave {
    width: 100%;
    height: 100%;
  }

  /* タイトル位置: Figma x=51 y=222 */
  .snp-hero__title-wrap {
    width: min(32.87vw, 449px);
    margin: 0;
    top: min(16.25vw, 222px); /* 222/1366 */
    left: 0;
    right: auto;
    padding-left: min(3.73vw, 51px); /* 51/1366 */
  }

  .snp-hero__title {
    font-size: clamp(1.625rem, 1.064rem + 1.17vw, 1.875rem); /* max 30px */
  }

  /* ---- パンくず: Figma x=183 (section_space 左端と同位置) ---- */
  .snp-breadcrumb-wrap .breadcrumb {
    padding: min(1.17vw, 16px) min(13.54vw, 185px) min(1.46vw, 20px);
    margin-bottom: 0;
  }

  /* ---- プラン一覧 ---- */
  /* Figma: パンくず下端 y=462 → プラン y=590 → gap 128px */
  /* Figma: Frame 463 x=239 y=590 w=889 / section_space(1000px)内で中央揃え */
  .snp-plans {
    margin-top: 128px;
    padding-bottom: min(11.71vw, 160px);
  }

  .snp-plans__list {
    max-width: 889px;
    margin: 0 auto;
    gap: 56px; /* Figma: gap 56px */
  }

  /* ---- プランカード: PC では横並び ---- */
  /* Figma: row / alignItems=center / gap=32px */
  .snp-plan-card {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }

  /* 円形画像: PC では 350×350 */
  /* Figma: Ellipse 10 / 350×350px */
  .snp-plan-card__img-wrap {
    width: 350px;
    height: 350px;
    flex-shrink: 0;
  }

  /* PC: テキスト＋ボタンのラッパー */
  /* Figma: w=507 / column / justifyContent=center / alignItems=flex-end / gap=24px */
  .snp-plan-card__body {
    flex: 1;
    align-items: flex-end; /* ボタンを右端に寄せる */
    justify-content: center;
  }

  /* PC: タイトル（PC_h2: Shippori Mincho B1 Bold 700 / 24px / 36px / left） */
  .snp-plan-card__title {
    font-size: var(--fs-24);
    line-height: 36px;
    text-align: left;
    width: 100%; /* テキストエリア幅いっぱいに広げる */
  }

  /* ---- ボタン ホバー ---- */
  /* Figma バリアント2: 下線・テキスト・丸アイコンがグラデーションに変化 / 丸アイコンが5px右移動 */

  .snp-plan-card__btn::after {
    transition: background 0.3s;
  }

  .snp-plan-card__btn .snp-plan-card__btn-arrow {
    transition:
      transform 0.3s,
      background 0.3s;
  }

  /* 下線: グラデーション */
  .snp-plan-card__btn:hover::after {
    background: linear-gradient(250deg, #02487f 4%, #32acc7 80%, #016fb8 100%);
  }

  /* テキスト: グラデーション */
  .snp-plan-card__btn:hover .snp-plan-card__btn-text {
    background: var(--bg_gd-color);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* 丸アイコン: グラデーション + 5px 右移動 */
  /* Figma: Ellipse x=170→175 (+5px) */
  .snp-plan-card__btn:hover .snp-plan-card__btn-arrow {
    background: linear-gradient(270deg, #02487f 8%, #32acc7 100%);
    transform: translateX(5px);
  }
}

@media (min-width: 768px) {
  .ui-btn--arrow {
    position: relative;
    max-width: clamp(10rem, 6.789rem + 6.69vw, 12.5rem);
    margin: 0;
  }
}