@charset "UTF-8";
:root {
  /* ウェイトの定義 */
  --weight-normal: 500;
  --weight-bold: 700;
  --font-main: "Zen Maru Gothic", "Nunito", sans-serif;
  --font-en: "Nunito", sans-serif;
  --font-kerning: "palt";
  /* color */
  --color-primary: #003c68;
  --color-sub1:#12adcb;
  --color-sub2:#ed7845;
  --color-alert: #e53935;
  --text-main: #333333;
  --text-sub: #666;
  --color-white: #ffffff;
  /* Fluid Typography: 16px */
  --fz-base: 1rem;
}
@media (max-width: 1440px) {
  :root {
    --inner-width: 1200px;
  }
}
@media (min-width: 1441px) {
  :root {
    --inner-width: 1400px;
  }
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
  font-family: var(--font-main);
  color: var(--color-text);
  font-size: var(--fz-base);
  font-weight: var(--weight-normal);
  font-size-adjust: 0.51;
  overflow-x: hidden;
}

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

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

textarea {
  resize: vertical;
}

ul, ol {
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ==========================================================================
//画像パスの書き換え
========================================================================== */
.is-block {
  display: block !important;
}

.is-inline {
  display: inline !important;
}

.is-inline-block {
  display: inline-block !important;
}

.is-none {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .is-mobile-block {
    display: block !important;
  }
  .is-mobile-inline {
    display: inline !important;
  }
  .is-mobile-inline-block {
    display: inline-block !important;
  }
  .is-mobile-none {
    display: none !important;
  }
}
@media screen and (min-width: 576px) {
  .is-fablet-block {
    display: block !important;
  }
  .is-fablet-inline {
    display: inline !important;
  }
  .is-fablet-inline-block {
    display: inline-block !important;
  }
  .is-fablet-none {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .is-tablet-block {
    display: block !important;
  }
  .is-tablet-inline {
    display: inline !important;
  }
  .is-tablet-inline-block {
    display: inline-block !important;
  }
  .is-tablet-none {
    display: none !important;
  }
}
@media screen and (min-width: 1200px) {
  .is-desktop-block {
    display: block !important;
  }
  .is-desktop-inline {
    display: inline !important;
  }
  .is-desktop-inline-block {
    display: inline-block !important;
  }
  .is-desktop-none {
    display: none !important;
  }
}
@media screen and (min-width: 1400px) {
  .is-wide-block {
    display: block !important;
  }
  .is-wide-inline {
    display: inline !important;
  }
  .is-wide-inline-block {
    display: inline-block !important;
  }
  .is-wide-none {
    display: none !important;
  }
}
/* ==========================================
   FIXED HEADER（修正版：カプセル型フローティングヘッダー）
========================================== */
.l-fixed-header {
  position: fixed;
  /* 画面上端から少し浮かせることでカプセル感を強調 */
  top: 20px;
  left: 50%;
  transform: translate(-50%, -120px); /* 初期状態は中央を維持して上空に隠す */
  /* 画面幅いっぱいに広がらず、最大幅をインナーコンテナと同期 */
  width: calc(100% - 40px);
  height: 84px; /* デザインのゆったりした縦幅に調整 */
  background-color: rgba(255, 255, 255, 0.98);
  border-radius: 42px; /* 高さの半分の値で完全なカプセル型（角丸）にする */
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08); /* 浮遊感を出す柔らかいシャドウ */
  z-index: 9999;
  box-sizing: border-box;
  font-family: var(--font-main);
  opacity: 0;
  pointer-events: none;
  /* ニョキッと降りてくる滑らかなトランジションモーション */
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

/* JS連動時のアクティブ状態（上端から20px浮いたベストポジションに着地） */
.l-fixed-header.is-show {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

/* ヘッダー内部のレイアウト調整 */
.l-fixed-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 40px; /* カプセルの内側余白を広めに確保 */
  box-sizing: border-box;
}

/* 2行書きロゴテキストのタイポグラフィ調整 */
.l-fixed-header__logo {
  flex-shrink: 0;
}

.l-fixed-header__logo-text {
  display: block;
  font-size: 0.9375rem; /* 約15px */
  font-weight: var(--weight-bold);
  color: var(--text-main);
  line-height: 1.35;
  letter-spacing: 0.02em;
}

/* 隠しチェックボックス */
.l-fixed-header__checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------
   PC用：ナビゲーション・水色サークルリンク
------------------------------------------ */
.l-fixed-header__list {
  display: flex;
  align-items: center;
  gap: 16px; /* リンク同士の間隔 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-fixed-header__link {
  display: flex;
  align-items: center;
  gap: 6px; /* 文字と右側の水色矢印の隙間 */
  color: var(--text-main);
  font-size: 0.875rem; /* 14px */
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: opacity 0.25s ease;
}

/* デザイン通り「スタンプスポット」の文字色を鮮やかな水色にアクセント */
.l-fixed-header__link--highlight {
  color: var(--color-sub1);
}

/* 全てのリンクの右側へ、デザイン通りの水色サークル丸矢印（›）を完全自動生成 */
.l-fixed-header__link::after {
  content: "›";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: var(--color-sub1);
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: var(--weight-normal);
  padding-bottom: 2px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* ホバーインタラクション：矢印がひょこっと右に動く遊び心 */
.l-fixed-header__link:hover {
  opacity: 0.8;
}

.l-fixed-header__link:hover::after {
  transform: translateX(2px);
}

/* ハンバーガーはPCでは非表示 */
.l-fixed-header__hamburger {
  display: none;
}

/* ==========================================
   スマートフォン対応（幅768px以下でのハンバーガースイッチ）
========================================== */
@media (max-width: 1159px) {
  .l-fixed-header {
    top: 10px; /* スマホでは画面を広く使うため上端寄りに */
    width: calc(100% - 20px);
    height: 64px;
    border-radius: 32px;
    padding: 0;
  }
  .l-fixed-header__inner {
    padding: 0 20px;
  }
  .l-fixed-header__logo-text {
    font-size: 0.8125rem; /* 13px相当にスマホ縮小 */
  }
  /* ハンバーガーのボタン化 */
  .l-fixed-header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 20px;
    cursor: pointer;
    z-index: 10001;
    position: relative;
    right: 10px;
  }
  .l-fixed-header__hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  }
  /* スマホのドロップダウンメニュー大改造（カンプからのはみ出しを防ぐ形状） */
  .l-fixed-header__nav {
    position: absolute;
    top: 74px; /* カプセルの下に綺麗に浮くように配置 */
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 16px 0;
    box-sizing: border-box;
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease;
    z-index: 10000;
  }
  .l-fixed-header__list {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }
  .l-fixed-header__list li {
    width: 100%;
  }
  .l-fixed-header__link {
    font-size: 0.9375rem;
    padding: 14px 24px;
    justify-content: space-between; /* スマホメニュー内では矢印を右端に寄せて美しく */
    border-bottom: 1px solid #f5f5f5;
  }
  .l-fixed-header__list li:last-child .l-fixed-header__link {
    border-bottom: none;
  }
  /* ------------------------------------------
     チェックボックス（ON/OFF）時のスマホ展開アニメーション
  ------------------------------------------ */
  .l-fixed-header__checkbox:checked ~ .l-fixed-header__nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  /* ハンバーガーの「×」トランスフォーム */
  .l-fixed-header__checkbox:checked ~ .l-fixed-header__hamburger span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
  }
  .l-fixed-header__checkbox:checked ~ .l-fixed-header__hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .l-fixed-header__checkbox:checked ~ .l-fixed-header__hamburger span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
  }
}
/* ==========================================================================
トップページ以外のメインビジュアル
========================================================================== */
.l-hero-section {
  width: 100%;
  position: relative;
}

.l-hero-section::before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
}

.pankuzu-list {
  position: absolute;
  top: 120px;
  width: 100%;
  color: #fff;
  padding: 0 40px;
}

.pankuzu-list ul {
  display: flex;
  align-items: center;
}

.pankuzu-list ul li a {
  text-decoration: underline;
}

.pankuzu-list ul li a::after {
  display: inline-block;
  content: "";
  width: 6px;
  height: 1px;
  background-color: #fff;
  margin: 0 5px;
  position: relative;
  top: -5px;
}

.hero-head {
  text-align: center;
  color: #fff;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin-top: 20px;
  width: 100%;
  max-width: 840px;
  /* 👇 【追加】画面が1000px未満になったとき、左右に綺麗な余白を残す */
  padding-left: 20px;
  padding-right: 20px;
}

.hero-head h1 {
  margin-bottom: 15px;
}

.hero-head p {
  font-size: 16px;
}

.hero-visual {
  min-height: 528px;
}
.hero-visual img {
  width: auto;
  min-height: 528px;
  height: 100%;
  object-fit: cover;
}

.l-hero-section.spot-main .hero-visual {
  min-height: 720px;
}

.l-hero-section.spot-main::before {
  display: none;
}

.wave-yellow-hero {
  position: absolute;
  left: 0;
  bottom: 0;
}

.l-contents-wrapper {
  background-color: #FFFBEB;
  padding: 100px 0 300px;
}

.l-contents-wrapper.no-pd {
  padding: 100px 0 20px;
}

/* ==========================================================================
共通コンポーネント：一覧へ戻るボタン (c-btn-back)
========================================================================== */
.c-btn-back {
  display: inline-flex;
  align-items: center;
  width: 480px;
  height: 80px;
  background-color: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 100px;
  padding: 0 40px 0 32px;
  box-sizing: border-box;
  font-family: var(--font-main);
  font-feature-settings: var(--font-kerning);
  transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* ボタン内のテキスト記述 */
}
.c-btn-back__text {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  flex-grow: 1;
  text-align: center;
  margin-right: 16px;
}
.c-btn-back {
  /* 左側の丸型矢印（c-btn-actionの構造を美しく反転） */
}
.c-btn-back__arrow {
  position: relative;
  width: 32px;
  height: 32px;
  background-color: var(--color-sub1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-btn-back__arrow::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--color-white);
  border-left: 2px solid var(--color-white);
  transform: rotate(-45deg);
  margin-right: -2px;
}
.c-btn-back {
  /* 🦊 モーション演出：ホバー時にボタン全体が引き締まり、丸矢印が左へとスッと弾むリターンモーション */
}
.c-btn-back:hover {
  background-color: color-mix(in srgb, var(--color-primary) 90%, #000);
  background-color: var(--color-sub1);
}
.c-btn-back:hover .c-btn-back__arrow {
  background-color: var(--color-white);
  transform: translateX(-4px);
}
.c-btn-back:hover .c-btn-back__arrow::after {
  border-top-color: var(--color-sub1);
  border-left-color: var(--color-sub1);
}
.c-btn-back {
  /* クリックした（押し込んだ）瞬間の、心地よいリアルな沈み込み */
}
.c-btn-back:active {
  transform: scale(0.97);
}

/* ==========================================================================
波
========================================================================== */
/* 波パーツ画像の位置調整固定 */
.wave-yellow_top,
.wave-white_top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.wave-yellow_top img {
  width: 100%;
  height: auto;
}

.wave-white_top img {
  width: 100%;
  height: auto;
  transform: rotate(180deg);
}

.wave-white_bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.wave-white_bottom img {
  width: 100%;
  height: auto;
}

.wave-lightyellow_bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.wave-lightyellow_bottom img {
  width: 100%;
  height: auto;
}

.swiper-pagination.l-model-course__pagination {
  transform: rotate(90deg);
  position: absolute;
  left: 35% !important;
  top: 50% !important;
}
@media screen and (max-width: 767px) {
  .swiper-pagination.l-model-course__pagination {
    transform: rotate(0);
    left: 0 !important;
    top: 100% !important;
  }
  .swiper-pagination.l-model-course__pagination .swiper-pagination-bullet {
    margin: 0 10px !important;
    display: inline-block;
  }
}

/* ==========================================================================
   404エラーページ (p-error-404)
   ========================================================================== */
.p-error-404 {
  max-width: var(--inner-width);
  margin: 0 auto;
  padding: 100px 20px 0;
  text-align: center;
  font-family: var(--font-main);
  font-feature-settings: var(--font-kerning);
  /* エラー番号 "404" */
}
.p-error-404__status-code {
  font-family: var(--font-en);
  font-size: 5rem;
  line-height: 1;
  font-weight: var(--weight-bold);
  color: var(--color-sub1);
  margin: 0 0 16px 0;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  .p-error-404__status-code {
    font-size: 4rem;
  }
}
.p-error-404 {
  /* メインのメッセージ */
}
.p-error-404__headline {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  line-height: 1.4;
  margin: 0 0 32px 0;
}
@media (max-width: 768px) {
  .p-error-404__headline {
    font-size: 1.25rem;
  }
}
.p-error-404 {
  /* 説明文テキスト */
}
.p-error-404__lead {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-main);
  margin-bottom: 48px;
}
.p-error-404__lead p {
  margin: 0 0 4px 0;
}
.p-error-404__lead p:last-child {
  margin-bottom: 0;
}
.p-error-404 {
  /* 下部ナビゲーションエリア */
}
.p-error-404__foot {
  display: flex;
  justify-content: center;
}

/* 🏠 トップへ戻るボタン (c-btn-home)
   ※c-btn-submitやc-btn-actionの構造を踏襲しています */
.c-btn-home {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: 320px;
  height: 56px;
  background-color: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 100px;
  padding: 0 16px 0 32px;
  box-sizing: border-box;
  transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-btn-home__text {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  flex-grow: 1;
  text-align: center;
}
.c-btn-home__arrow {
  position: relative;
  width: 32px;
  height: 32px;
  background-color: var(--color-sub1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-btn-home__arrow::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  transform: rotate(45deg);
  margin-left: -2px;
}
.c-btn-home {
  /* 🦊 ホバーモーション */
}
.c-btn-home:hover {
  background-color: color-mix(in srgb, var(--color-primary) 90%, #000);
}
.c-btn-home:hover .c-btn-home__arrow {
  background-color: var(--color-white);
  transform: translateX(4px);
}
.c-btn-home:hover .c-btn-home__arrow::after {
  border-top-color: var(--color-sub1);
  border-right-color: var(--color-sub1);
}
.c-btn-home:active {
  transform: scale(0.97);
}

/* トップページ以外波なし */
.footer-contact .wave-lightblue_top,
.footer-contact .l-cta__head {
  display: none;
}

.index-page .footer-contact .l-cta__head,
.index-page .footer-contact .wave-lightblue_top {
  display: block;
}

/* ユーティリティ: PCのみ改行用 */
@media (max-width: 768px) {
  .u-hidden-sp {
    display: none !important;
  }
}
/* セクション全体のベース（背景を少しグレーなどにしてカードを際立たせる想定） */
.l-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  position: relative;
  top: -150px;
}

/* 白背景の角丸カード（デザインのメインコンテナ） */
.l-cta__inner {
  position: relative; /* ガーランド配置の基準点 */
  width: 100%;
  max-width: 1000px; /* デザインの横幅に応じて調整 */
  background-color: #fff;
  border-radius: 24px;
  padding: 60px 40px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

/* 左上のガーランド（飾りフラッグ）の再現 */
/* ※本番環境ではイラストのSVG/PNG画像をbackgroundに指定するのが最も確実です */
.l-cta__garland {
  position: absolute;
  top: -20px;
  left: -40px;
  width: 260px;
  height: 144px;
  background-image: url("../images/common/garland.png");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none; /* クリックを阻害しない */
}

/* コンテンツ中央揃え */
.l-cta__content {
  text-align: center;
  position: relative;
  z-index: 1;
}

/* バッジとタイトル */
.l-cta__head {
  margin-bottom: 32px;
}

.l-cta__badge {
  display: inline-block;
  background-color: var(--color-sub1); /* #12adcb */
  color: var(--color-white);
  font-size: 0.875rem; /* 14px */
  font-weight: var(--weight-bold);
  padding: 6px 24px;
  border-radius: 20px;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

.l-cta__title {
  color: var(--color-primary);
  font-size: 2.25rem; /* 36px */
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  line-height: 1.3;
}

/* リード文 */
.l-cta__lead {
  color: var(--text-main);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.8;
  margin-bottom: 40px;
  letter-spacing: 0.04em;
}

/* アクションエリア・ボタン */
.l-cta__action {
  display: flex;
  justify-content: center;
}

.l-cta__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  width: 100%;
  max-width: 380px;
  height: 64px;
  border-radius: 32px;
  font-weight: var(--weight-bold);
  font-size: 1.125rem; /* 18px */
  letter-spacing: 0.1em;
  box-shadow: 0 6px 20px rgba(0, 59, 108, 0.2);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 矢印のサークルパーツ */
.l-cta__btn-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-color: var(--color-sub1);
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 白い小さな矢印（擬似要素で作成） */
.l-cta__btn-arrow::after {
  display: block;
  content: "";
  position: absolute;
  top: 14px;
  left: 13px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

/* --- モーショングラフィックス（ホバー時）のアニメーション --- */
.l-cta__btn:hover {
  background-color: var(--color-sub1);
  box-shadow: 0 12px 28px rgba(0, 59, 108, 0.3);
}

.l-cta__btn:hover .l-cta__btn-arrow {
  transform: translate(4px, -50%); /* 矢印サークルが少し右に跳ねる */
}

/* --- スマートフォン対応 (レスポンシブ) --- */
@media (max-width: 768px) {
  .l-cta {
    padding: 60px 16px;
  }
  .l-cta__inner {
    padding: 50px 20px 40px 20px;
    border-radius: 16px;
  }
  /* スマホ時はガーランドの位置とサイズを微調整 */
  .l-cta__garland {
    top: -15px;
    left: -15px;
    width: 120px;
    height: 120px;
  }
  .l-cta__title {
    font-size: 1.75rem; /* 28px */
  }
  .l-cta__lead {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.6;
    margin-bottom: 32px;
    text-align: left; /* スマホ長文は左揃えの方が見やすいため調整（お好みでセンターのままでもOK） */
  }
  .l-cta__btn {
    height: 56px;
    font-size: 1rem;
  }
  .l-cta__btn-arrow {
    right: 12px;
    width: 28px;
    height: 28px;
  }
}
.footer-contact {
  background-image: url(../images/common/contct_bg_photo.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 794px;
  position: relative;
}

.wave-lightblue_top,
.wave-darkblue_bottom {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
}

.wave-lightblue_top {
  top: -1px;
}

.wave-darkblue_bottom {
  bottom: 0;
}

/* フッター全体のコンテナ */
.l-footer {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0 0 60px 0; /* 上部の波形エリア分の余白 */
  font-family: var(--font-main);
  letter-spacing: 0.05em;
}

/* インナー幅の制限とレイアウト（PC基準） */
.l-footer__inner {
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  display: block;
}

/* 左右エリアの配置 */
.l-footer__branding {
  width: 35%;
  float: left;
}

.l-footer__info {
  width: 60%;
  float: right;
  font-size: 0.9375rem;
  padding-top: 60px;
}

/* フロートクリア */
.l-footer__inner::after {
  content: "";
  display: table;
  clear: both;
}

/* ロゴとコピーライト */
.l-footer__logo-wrapper {
  margin-bottom: 40px;
}

.l-footer__logo {
  max-width: 240px;
  height: auto;
}

.l-footer__copyright {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 20px;
}

/* お問い合わせ・主催の各行構造 */
.l-footer__row {
  margin-bottom: 14px;
  display: block;
}

.l-footer__row::after {
  content: "";
  display: table;
  clear: both;
}

/* 「主催」「お問い合わせ」の水色バッジ */
.l-footer__label {
  display: block;
  float: left;
  width: 120px;
  text-align: center;
  background-color: var(--color-sub1);
  color: #fff;
  font-weight: var(--weight-bold);
  font-size: 0.8125rem;
  padding: 4px 0;
  border-radius: 20px;
  margin-right: 24px;
}

/* テキストコンテンツ側 */
.l-footer__content {
  float: left;
  width: calc(100% - 144px);
  line-height: 1.7;
}

.l-footer__office-name {
  font-weight: var(--weight-bold);
}

.l-footer__subtext {
  font-weight: var(--weight-normal);
  font-size: 0.875rem;
  opacity: 0.9;
}

/* 電話番号・メールアドレスの装飾 */
.l-footer__contact-details {
  margin-top: 8px;
}

.l-footer__tel-wrapper,
.l-footer__mail-wrapper {
  font-size: 1rem;
}

.l-footer__prefix {
  font-family: var(--font-en);
  font-weight: var(--weight-bold);
  color: var(--color-sub1);
  margin-right: 12px;
}

.l-footer__prefix-mail {
  font-family: var(--font-en);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  margin-right: 12px;
}

.l-footer__tel {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  color: var(--color-sub1);
  vertical-align: -1px;
  transition: opacity 0.2s ease;
  text-decoration: underline;
}

.l-footer__tel:hover {
  opacity: 0.8;
}

.l-footer__hours {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 10px;
}

.l-footer__mail {
  font-family: var(--font-en);
  color: var(--color-white);
  padding-bottom: 2px;
  transition: opacity 0.2s ease;
}

.l-footer__mail:hover {
  opacity: 0.8;
}

/* ページトップボタン */
.l-footer__top-back {
  position: absolute;
  right: 40px;
  top: 20px;
  width: 70px;
  height: 70px;
  display: block;
  text-align: center;
  transition: 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.l-footer__top-back:hover {
  transform: translateY(-5px);
}

/* --- スマートフォン対応 --- */
@media (max-width: 768px) {
  .l-footer {
    padding: 60px 0 40px 0;
  }
  .l-footer__inner {
    padding: 0 20px;
  }
  .l-footer__branding,
  .l-footer__info {
    width: 100%;
    float: none;
  }
  .l-footer__branding {
    text-align: center;
    margin-bottom: 40px;
  }
  .l-footer__logo-wrapper {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
  }
  .l-footer__label {
    float: none;
    margin-bottom: 8px;
    width: 100px;
  }
  .l-footer__content {
    float: none;
    width: 100%;
    margin-bottom: 24px;
  }
  .l-footer__tel {
    font-size: 1.3rem;
    display: inline-block;
    margin-top: 4px;
  }
  .l-footer__hours {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }
  .l-footer__top-back {
    right: 20px;
    bottom: 10px;
    width: 54px;
    height: 54px;
  }
  .l-footer__top-back-inner {
    line-height: 54px;
    font-size: 0.6875rem;
  }
  .l-footer__top-back::before {
    top: 8px;
  }
}
/* ==========================================================================
   0. BASE & BODY
   ========================================================================== */
body {
  background-image: url(../images/common/bg_noise_blue.png);
  background-repeat: repeat;
  background-position: center 0;
  background-size: contain;
}

/* ==========================================================================
   1. MAIN VISUAL（メインビジュアルセクション）
   ========================================================================== */
.l-main-visual {
  position: relative;
  width: 100%;
  min-height: 900px;
  padding: 0 0 160px;
  box-sizing: border-box;
  font-family: var(--font-main);
  letter-spacing: 0.04em;
  overflow-x: hidden;
}

.l-main-visual__inner {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 20px 0;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}

/* 1-1. 左側：グローバルナビゲーション */
.l-main-visual__nav {
  position: absolute;
  top: -20px;
  z-index: 10;
  width: 260px;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 44px 16px 24px;
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.l-main-visual__nav-logo {
  max-width: 185px;
  margin: 0 auto;
}

.l-main-visual__nav-logo img {
  margin: 0 auto;
}

.l-main-visual__nav-list {
  display: flex;
  flex-direction: column;
}

.l-main-visual__nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background-color: #ffffff;
  border-bottom: dotted 2px #e0e0e0;
  color: var(--text-main);
  font-size: 15px;
  font-weight: var(--weight-bold);
  transition: all 0.3s ease;
}

.l-main-visual__nav-list li:last-child a {
  border-bottom: none;
}

.l-main-visual__nav-link::after {
  content: "›";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: var(--color-sub1);
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: var(--weight-normal);
  padding-bottom: 2px;
  box-sizing: border-box;
}

.l-main-visual__nav-link:hover {
  background-color: var(--color-sub1);
  color: #ffffff;
}

/* 1-2. 中央：コンテンツメイン */
.l-main-visual__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 5;
  padding-top: 40px;
}

.l-main-visual__title {
  width: 100%;
  max-width: 620px;
  margin-bottom: 32px;
}

.l-main-visual__img-title {
  width: 100%;
  height: auto;
  display: block;
}

.l-main-visual__lead-block {
  color: #ffffff;
}

.l-main-visual__lead-text {
  font-size: 20px;
  line-height: 1.8;
  font-weight: var(--weight-bold);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.l-main-visual__lead-text ruby {
  ruby-position: over;
}

.l-main-visual__lead-text rt {
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  padding-bottom: 2px;
}

.l-main-visual__highlight {
  color: #ffffff;
  background: linear-gradient(transparent 50%, var(--color-sub2) 50%);
  padding: 2px;
  font-weight: var(--weight-bold);
  display: inline;
  margin: 0;
}

/* 1-3. 装飾：ポラロイド配置 */
.l-main-visual__photos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.l-main-visual__photo-item {
  position: absolute;
}

.l-main-visual__photo-item img {
  display: block;
  width: 100%;
  height: auto;
}

.l-main-visual__photo-item--left-top {
  width: 367px;
  top: 320px;
  left: -64px;
  z-index: 2;
}

.l-main-visual__photo-item--left-bottom {
  width: 452px;
  top: 560px;
  left: -87px;
}

.l-main-visual__photo-item--right-top {
  width: 515px;
  top: -45px;
  right: -158px;
  z-index: 2;
}

.l-main-visual__photo-item--right-middle {
  width: 356px;
  top: 300px;
  right: -63px;
}

.l-main-visual__photo-item--right-bottom {
  width: 267px;
  top: 570px;
  right: 70px;
}

/* 1-4. メインビジュアル レスポンシブ（1200px / 1024px / 768px） */
@media (max-width: 1200px) {
  .l-main-visual__nav {
    display: none !important;
  }
  .l-main-visual__inner {
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 1024px) {
  .l-main-visual__photo-item {
    opacity: 0.4;
  }
}
@media (max-width: 768px) {
  .l-main-visual {
    padding: 90px 0 80px 0;
    min-height: auto;
  }
  .l-main-visual__inner {
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    gap: 24px;
  }
  .l-main-visual__nav {
    position: relative;
    top: 0;
    display: none !important;
    width: 100%;
    max-width: 340px;
    padding: 16px;
  }
  .l-main-visual__nav-logo {
    margin-bottom: 16px;
    max-width: 140px;
  }
  .l-main-visual__nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .l-main-visual__nav-link {
    padding: 8px 10px;
    font-size: 0.75rem;
    border-bottom: none;
  }
  .l-main-visual__nav-list li:last-child {
    grid-column: 1/3;
  }
  .l-main-visual__content {
    padding-top: 0;
    width: 100%;
  }
  .l-main-visual__title {
    max-width: 280px;
    margin-bottom: 20px;
  }
  .l-main-visual__lead-text {
    font-size: 14px;
    line-height: 1.6;
  }
  .l-main-visual__highlight {
    font-size: 0.875rem;
    padding: 1px 6px;
  }
  .l-main-visual__photos {
    display: none;
  }
}
/* ==========================================================================
   2. CAMPAIGN OVERVIEW（景品・期間・動画紹介）
   ========================================================================== */
.l-campaign-overview {
  background-color: #fffbe6;
  padding: 100px 0;
  font-family: var(--font-main);
  letter-spacing: 0.03em;
}

.l-campaign-overview__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.l-campaign-overview__main-lead {
  text-align: center;
  color: var(--text-main);
  font-size: 1.5rem;
  line-height: 1.6;
  margin-bottom: 40px;
  font-weight: var(--weight-bold);
}

/* 2-1. ポラロイドバナー */
.l-campaign-overview__presents-banner {
  background-image: url(../images/top/overview_presents_bg.png);
  background-repeat: no-repeat;
  background-size: 1300px auto;
  background-position: center center;
}

.l-campaign-overview__presents-list {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
  gap: 0;
}

.l-campaign-overview__img-presents {
  display: inline-block;
  max-width: 480px;
  height: auto;
}

/* 2-2. スケジュールカード */
.l-campaign-overview__schedule-card {
  width: 100%;
  margin: 0 auto 80px auto;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.l-campaign-overview__schedule-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-campaign-overview__schedule-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.l-campaign-overview__schedule-item:first-child {
  border-right: 2px dotted #cccccc;
}

.l-campaign-overview__schedule-item img {
  width: 100%;
  max-width: 410px;
  height: auto;
  display: block;
}

/* 2-3. 動画紹介ブロック */
.l-campaign-overview__video-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin: 0 auto 80px;
  max-width: 960px;
}

.l-campaign-overview__video-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.l-campaign-overview__video-badge {
  font-size: 0.8125rem;
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 4px;
  margin-bottom: 16px;
}

.l-campaign-overview__video-title {
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  color: #003b6c;
  line-height: 1.4;
  margin-bottom: 16px;
}

.l-campaign-overview__video-text {
  font-size: 0.875rem;
  color: var(--text-main);
  line-height: 1.7;
  margin-bottom: 24px;
}

.l-campaign-overview__logo-sub {
  width: 160px;
  height: auto;
}

.l-campaign-overview__logo-sub img {
  display: block;
}

.l-campaign-overview__video-media {
  flex: 1.2;
  max-width: 520px;
  width: 100%;
}

.l-campaign-overview__video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}

.l-campaign-overview__video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 2-4. 2連ボタン */
.l-campaign-overview__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.l-campaign-overview__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #003b6c;
  color: #ffffff;
  width: 100%;
  max-width: 480px;
  height: 80px;
  border-radius: 40px;
  font-weight: var(--weight-bold);
  font-size: 1.0625rem;
  letter-spacing: 0.05em;
  box-shadow: 0 6px 20px rgba(0, 59, 108, 0.2);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, box-shadow 0.3s ease;
}

.l-campaign-overview__btn-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-color: var(--color-sub1);
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.l-campaign-overview__btn-arrow::after {
  display: block;
  content: "";
  position: absolute;
  top: 14px;
  left: 13px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.l-campaign-overview__btn:hover {
  background-color: var(--color-sub1);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 59, 108, 0.3);
}

.l-campaign-overview__btn:hover .l-campaign-overview__btn-arrow {
  transform: translate(4px, -50%);
}

/* 2-5. キャンペーン レスポンシブ（768px） */
@media (max-width: 768px) {
  .l-campaign-overview {
    padding: 60px 0;
  }
  .l-campaign-overview__main-lead {
    font-size: 1.125rem;
    padding: 0 10px;
    text-align: left;
  }
  .l-campaign-overview__presents-banner {
    margin-bottom: 32px;
  }
  .l-campaign-overview__schedule-card {
    padding: 32px 16px;
    margin-bottom: 50px;
  }
  .l-campaign-overview__schedule-list {
    flex-direction: column;
    gap: 32px;
  }
  .l-campaign-overview__schedule-item {
    width: 100%;
    padding: 0;
  }
  .l-campaign-overview__schedule-item:first-child {
    border-right: none;
  }
  .l-campaign-overview__schedule-item img {
    max-width: 320px;
    margin: 0 auto;
  }
  .l-campaign-overview__video-block {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 50px;
  }
  .l-campaign-overview__video-info {
    align-items: center;
    text-align: center;
  }
  .l-campaign-overview__video-title {
    font-size: 1.25rem;
  }
  .l-campaign-overview__video-media {
    max-width: 100%;
  }
  .l-campaign-overview__actions {
    flex-direction: column;
    gap: 16px;
    padding: 0 10px;
  }
  .l-campaign-overview__btn {
    max-width: 100%;
    height: 56px;
    font-size: 13px;
    font-feature-settings: "palt";
    letter-spacing: -0.05rem;
  }
  .l-campaign-overview__btn-arrow {
    right: 12px;
    width: 28px;
    height: 28px;
  }
  .l-campaign-overview__btn-arrow::after {
    top: 11px;
    left: 11px;
  }
}
/* ==========================================================================
   3. ABOUT（くじゅう＆ユネスコエコパークとは）
   ========================================================================== */
.l-about {
  background-color: #ffffff;
  padding: 0 0 140px 0;
  position: relative;
  overflow: hidden;
  font-family: var(--font-main);
  letter-spacing: 0.03em;
}

/* 右下の背景山線画 */
.l-about::after {
  display: block;
  content: "";
  width: 617px;
  height: 110px;
  background-image: url(../images/common/line_yama.png);
  background-repeat: no-repeat;
  background-size: 617px 110px;
  background-position: 0 0;
  position: absolute;
  right: -200px;
  bottom: 0;
}
@media screen and (max-width: 767px) {
  .l-about::after {
    width: 200px;
    height: 55px;
    background-size: auto 55px;
    right: 0;
  }
}

.l-about-hero {
  position: relative;
}

/* 3-1. 上部ヒーロー */
.l-about__hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 80px;
}

.l-about__flag-deco {
  position: absolute;
  top: -20px;
  left: 40px;
  width: 120px;
  height: 60px;
  background-image: url("/images/top/about_flag.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 3;
}

.l-about__hero-media {
  flex: 1;
  max-width: 780px;
}

.l-about__hero-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 3-2. 縦書き短冊タイトル（Positioningのバグ修正版） */
.l-about__heading-wrapper {
  width: 160px;
  position: absolute;
  right: 40px;
  top: -170px;
  z-index: 5;
  display: flex;
}

.l-about__badge {
  height: 150px;
  writing-mode: vertical-rl;
  background-color: var(--color-sub1);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  padding: 12px 6px;
  border-radius: 10px;
  line-height: 1.2;
  position: absolute;
  right: 0;
  top: 0;
  letter-spacing: 0.1em;
}

.l-about__title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
}

.l-about__title-line {
  writing-mode: vertical-rl;
  background-color: #ffffff;
  color: var(--color-primary);
  font-family: var(--font-main);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  box-sizing: border-box;
}

.l-about__title-line--sub {
  font-size: 1.875rem;
  padding: 10px 8px 14px 8px;
  transform: translateX(60px); /* left指定から安定したtransformに変更 */
}

.l-about__title-line--main {
  font-size: 1.875rem;
  padding: 10px 8px 22px 8px;
  transform: translateX(-55px);
}

/* 3-3. 下部：紹介コンテンツ */
.l-about__content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 20px 0;
  position: relative;
  z-index: 2;
}

.l-about__block {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  max-width: 850px;
}

.l-about__block-media {
  flex-shrink: 0;
  width: 260px;
}

.l-about__spot-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.l-about__block-body {
  flex: 1;
}

.l-about__block-title {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  margin-bottom: 12px;
  display: flex;
  align-items: flex-end;
}

.l-about__pin-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: var(--color-sub2);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  margin-right: 10px;
  position: relative;
  margin-bottom: 8px;
}

.l-about__pin-icon::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #ffffff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.l-about__block-text {
  font-size: 0.875rem;
  color: #555555;
  line-height: 1.75;
  text-align: justify;
}

.l-about__mountain-deco {
  position: absolute;
  bottom: -40px;
  right: 0;
  width: 320px;
  opacity: 0.8;
  z-index: 1;
  pointer-events: none;
}

/* 3-4. ABOUT レスポンシブ（768px） */
@media (max-width: 768px) {
  .l-about {
    padding: 0 0 80px 0;
  }
  .l-about__inner {
    padding: 0 20px;
  }
  .l-about__hero {
    flex-direction: column;
    margin-bottom: 120px;
  }
  .l-about__flag-deco {
    left: 20px;
  }
  .l-about__heading-wrapper {
    position: relative; /* 絶対配置を解除して自然なブロックフローに */
    top: auto;
    right: auto;
    width: 100%;
    display: flex;
    flex-direction: column; /* 上にバッジ、下にタイトル */
    align-items: start;
    gap: 12px;
    margin-top: 0;
    margin-bottom: 0;
  }
  .l-about__badge {
    position: relative; /* absolute解除 */
    writing-mode: horizontal-tb; /* 横書き化 */
    height: auto;
    width: auto;
    font-size: 0.8125rem; /* 13px */
    padding: 12px 12px;
    border-radius: 8px;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .l-about__title {
    position: relative; /* absolute解除 */
    display: flex;
    flex-direction: column; /* 1行目と2行目を縦に並べる */
    align-items: start;
    gap: 0; /* 行間の隙間 */
    width: 100%;
  }
  .l-about__title-line {
    writing-mode: horizontal-tb; /* 横書き化 */
    display: inline-block;
    background-color: #efefef;
    line-height: 1.3;
    text-align: left;
    width: fit-content;
  }
  .l-about__title-line--sub {
    font-size: 1.375rem;
    padding: 6px 6px;
    margin-top: 0;
    transform: none; /* PC用の横ズレを完全リセット */
  }
  /* 2行目：ユネスコエコパークとは */
  .l-about__title-line--main {
    font-size: 1.375rem;
    padding: 6px 6px 8px;
    transform: none; /* PC用の横ズレを完全リセット */
  }
  .l-about__content {
    gap: 40px;
  }
  .l-about__block {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .l-about__block-media {
    width: 100%;
    max-width: 100%;
  }
  .l-about__block-title {
    font-size: 1.0625rem;
    justify-content: center;
  }
  .l-about__block-text {
    font-size: 0.875rem;
  }
  .l-about__mountain-deco {
    width: 200px;
    bottom: -20px;
  }
}
/* ==========================================================================
   4. MODEL COURSE（モデルコース）
   ========================================================================== */
.l-model-course {
  position: relative;
  background-image: url("../images/common/bg_noise_yellow.png");
  background-size: 100% auto;
  background-repeat: repeat;
  padding: 50px 0 300px;
  font-family: var(--font-main);
}
@media screen and (max-width: 767px) {
  .l-model-course {
    padding: 50px 0 200px;
  }
}

.l-model-course__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 100px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

/* 4-1. 左側：タイトル・テキスト */
.l-model-course__info {
  flex: 1;
  max-width: 340px;
  display: flex;
  flex-direction: column;
}

.l-model-course__heading-wrapper {
  width: 150px;
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
  position: relative;
}

.l-model-course__badge {
  writing-mode: vertical-rl;
  background-color: var(--color-sub1);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  padding: 16px 8px;
  border-radius: 12px;
  line-height: 1.2;
  position: absolute;
  right: 0;
}

.l-model-course__title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  padding: 0;
}

.l-model-course__title-line {
  writing-mode: vertical-rl;
  background-color: #ffffff;
  color: var(--color-primary);
  font-family: var(--font-main);
  font-weight: var(--weight-bold);
  line-height: 1;
  box-sizing: border-box;
  position: relative;
}

.l-model-course__title-line--sub {
  font-size: 2.125rem;
  padding: 10px 8px 12px 8px;
  transform: translateX(50px);
}

.l-model-course__title-line--main {
  font-size: 2.125rem;
  padding: 10px 10px 12px 10px;
  transform: translateX(-65px);
}

.l-model-course__body {
  margin-bottom: 32px;
}
@media screen and (max-width: 767px) {
  .l-model-course__body {
    margin-bottom: 0;
  }
}

.l-model-course__text {
  color: var(--text-main);
  font-size: 0.9375rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.l-model-course__text:last-child {
  margin-bottom: 0;
}

/* 4-2. 統合ボタン */
.l-model-course__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: #ffffff;
  width: 100%;
  max-width: 280px;
  height: 54px;
  border-radius: 32px;
  font-weight: var(--weight-bold);
  font-size: 16px;
  box-shadow: 0 6px 20px rgba(0, 59, 108, 0.2);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, box-shadow 0.3s ease;
}

.l-model-course__btn-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-color: var(--color-sub1);
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.l-model-course__btn-arrow::after {
  display: block;
  content: "";
  position: absolute;
  top: 9px;
  left: 8px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.l-model-course__btn:hover {
  background-color: var(--color-sub1);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 59, 108, 0.3);
}

.l-model-course__btn:hover .l-model-course__btn-arrow {
  transform: translate(4px, -50%);
}

/* 4-3. 右側：フォトフレーム＆スライダー */
.l-model-course__slider-container {
  position: relative;
  padding-top: 150px;
}

/* SCSSのバグをネイティブメディアクエリへ修正 */
.l-model-course__stamp-deco {
  position: absolute;
  top: 50px;
  right: -120px;
  z-index: 10;
  pointer-events: none;
  transform: rotate(-5deg);
  width: 266px;
  height: 157px;
}

@media (max-width: 480px) {
  .l-model-course__stamp-deco {
    width: 133px;
    height: auto;
    position: absolute;
    top: 0px;
    right: 0px;
  }
}
.l-model-course__polaroid {
  position: relative;
  width: 100%;
  max-width: 630px;
  background-color: #ffffff;
  padding: 16px 16px 24px 16px;
  box-shadow: 0 8px 24px var(--color-polaroid-shadow);
  border-radius: 2px;
  transform: rotate(2deg);
  box-sizing: border-box;
}

.l-model-course__polaroid::before,
.l-model-course__polaroid::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 2px;
  z-index: -1;
}

.l-model-course__polaroid::before {
  transform: rotate(-2deg) translate(-4px, 2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.l-model-course__polaroid::after {
  transform: rotate(0.5deg) translate(2px, 4px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.l-model-course__swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.l-model-course__slide-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.l-model-course__polaroid-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  background-color: #f4f4f4;
}

.l-model-course__polaroid-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.l-model-course__polaroid-caption {
  font-family: var(--font-main);
  font-weight: var(--weight-bold);
  color: #333333;
  font-size: 1.125rem;
  text-align: center;
  margin-top: 18px;
  letter-spacing: 0.02em;
}

/* 4-4. Swiperインジケーター（バグ修正・安定化） */
.l-model-course__pagination.swiper-pagination-bullets.swiper-pagination-vertical {
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 5;
}

.l-model-course__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  opacity: 1;
  margin: 10px; /* 強制ローテーションをせず、マージン高さを綺麗に均等化 */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.l-model-course__pagination .swiper-pagination-bullet-active {
  background-color: var(--color-sub1);
}

/* 4-5. モデルコース レスポンシブ（960px / 768px） */
@media (max-width: 960px) {
  .l-model-course__heading-wrapper {
    display: block;
    justify-content: start;
    gap: 0;
    width: auto;
  }
  .l-model-course__badge {
    font-size: 0.6875rem;
    padding: 12px 6px;
    margin-top: 8px;
    writing-mode: horizontal-tb;
    left: 0;
    display: inline-block;
    position: relative;
  }
  .l-model-course__title {
    gap: 12px;
    display: block;
  }
  .l-model-course__title-line--sub {
    font-size: 1.375rem;
    padding: 10px 6px 10px 6px;
    margin-top: 15px;
    transform: none;
    writing-mode: horizontal-tb;
    display: block;
    width: 230px;
  }
  .l-model-course__title-line--main {
    font-size: 1.375rem;
    padding: 10px 6px 10px 6px;
    transform: none;
    writing-mode: horizontal-tb;
  }
  .l-model-course__inner {
    flex-direction: column;
    gap: 40px;
  }
  .l-model-course__slider-container {
    width: 100%;
    padding-right: 0;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .l-model-course__polaroid {
    max-width: 85%;
  }
  .l-model-course__pagination.swiper-pagination-bullets.swiper-pagination-vertical {
    right: auto;
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 16px;
  }
  .l-model-course__pagination .swiper-pagination-bullet {
    margin: 0 !important;
  }
}
@media (max-width: 768px) {
  .l-model-course__action {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -120px;
  }
  .l-model-course__btn {
    height: 56px;
    font-size: 1rem;
    margin: 0 auto;
  }
  .l-model-course__btn-arrow {
    right: 12px;
    width: 28px;
    height: 28px;
  }
  .l-model-course__btn-arrow::after {
    top: 11px;
    left: 11px;
  }
}
/* ==========================================================================
   5. HUSHTAG CAMPAIGN（ハッシュタグキャンペーン）
   ========================================================================== */
.l-hushtag-campaign {
  position: relative;
  padding: 100px 20px 240px 20px;
  background-color: #ffffff;
}

/* 5-1. ヘッディングエリア */
.l-hushtag-headding {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 70px;
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
}

.l-hushtag-headding::before {
  display: block;
  content: "";
  position: absolute;
  top: -220px;
  left: -120px;
  width: 260px;
  height: 144px;
  background-image: url(../images/common/garland.png);
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  .l-hushtag-headding::before {
    top: -90px;
    left: 0;
    width: 130px;
    height: 74px;
  }
}

.l-hushtag-headding__media {
  flex: 1;
  max-width: 360px;
}

.l-hushtag-headding__img-main {
  width: 100%;
  height: auto;
}

.l-hushtag-headding__body {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.l-hushtag-headding__title {
  width: 95%;
  margin: 0 auto 15px;
}
@media screen and (max-width: 767px) {
  .l-hushtag-headding__title {
    margin: 0 auto;
  }
}

.l-hushtag-headding__img-title {
  width: 100%;
  height: auto;
  display: block;
}

.l-hushtag-headding__overview {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.l-hushtag-headding__lead {
  flex: 1.2;
  color: var(--text-main);
  line-height: 1.7;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding-top: 15px;
}

.l-hushtag-headding__present {
  flex: 1;
  max-width: 240px;
}

.l-hushtag-headding__img-present {
  width: 100%;
  height: auto;
  display: block;
}

/* 5-2. インナーグリッドドットカード */
.l-hushtag__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  border-radius: 20px;
  background-color: #e1f5fe;
  background-image: radial-gradient(#ffffff 10%, transparent 10%);
  background-size: 20px 20px;
  background-position: center center;
  padding: 5% 5% 7.5%;
  font-family: var(--font-main);
  letter-spacing: 0.03em;
}

.l-hushtag__section-title {
  text-align: center;
  color: var(--text-main);
  font-size: 1.875rem;
  margin-bottom: 48px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
}

.l-hushtag__step-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 80px;
}

.l-hushtag__step-item {
  position: relative;
}

.l-hushtag__step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 12px;
  border-color: var(--color-sub1) transparent transparent transparent;
  z-index: 2;
}

.l-hushtag__step-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.03);
}

.l-hushtag__step-number {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 32px;
}

.l-hushtag__step-number span {
  color: #ffffff;
  font-family: var(--font-en);
  font-size: 1.625rem;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.l-hushtag__step-body {
  flex: 1;
}

.l-hushtag__step-body--with-qr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.l-hushtag__step-main-info {
  flex: 1;
}

.l-hushtag__qr-code {
  flex-shrink: 0;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.l-hushtag__qr-code img {
  display: block;
  width: 120px;
}

.l-hushtag__step-title {
  color: var(--color-sub1);
  font-size: 1.1875rem;
  font-weight: var(--weight-bold);
  margin-bottom: 8px;
}

.l-hushtag__step-text {
  color: var(--text-main);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.l-hushtag__step-sub-text {
  display: block;
  font-size: 0.875rem;
  color: var(--text-sub);
  margin-top: 4px;
}

.l-hushtag__link {
  color: var(--color-sub1);
  font-weight: var(--weight-bold);
  text-decoration: underline !important;
}

/* 5-3. 注意事項 */
.l-hushtag__notes {
  margin-top: 60px;
}

.l-hushtag__notes-title {
  text-align: center;
  color: var(--text-main);
  font-size: 1.375rem;
  margin-bottom: 28px;
  position: relative;
  font-weight: var(--weight-bold);
}

.l-hushtag__notes-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 10px;
}

.l-hushtag__notes-list li {
  position: relative;
  padding-left: 14px;
  font-size: 0.875rem;
  color: var(--text-main); /* 未定義指定を修正 */
  line-height: 1.7;
  list-style: none;
}

.l-hushtag__notes-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--weight-bold);
}

.l-hushtag__notes-sub {
  display: block;
  font-size: 0.8125rem;
  opacity: 0.85;
  margin-top: 2px;
}

/* ==========================================================================
   SNS運用ポリシーバナー (c-btn-policy)
   ========================================================================== */
.l-hushtag__policy {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.c-btn-policy {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 540px;
  height: 52px;
  background-color: var(--color-white);
  border: 1px solid #dcdcdc;
  border-radius: 100px;
  text-decoration: none;
  color: var(--text-main);
  position: relative;
  padding: 0 56px 0 24px;
  box-sizing: border-box;
  transition: border-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (max-width: 560px) {
  .c-btn-policy {
    padding: 0 44px 0 16px;
    height: 48px;
  }
}
.c-btn-policy__text {
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}
.c-btn-policy__text br {
  display: none;
}
@media (max-width: 767px) {
  .c-btn-policy__text {
    font-size: 0.8125rem;
    text-align: center;
    white-space: normal;
  }
  .c-btn-policy__text br {
    display: block;
    content: "";
    margin-top: 4px;
  }
}
.c-btn-policy {
  /* 右側の丸型別窓アイコン（デザインのトンマナを他と統一） */
}
.c-btn-policy__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: var(--color-sub1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (max-width: 560px) {
  .c-btn-policy__icon {
    width: 24px;
    height: 24px;
    right: 10px;
  }
}
.c-btn-policy__icon::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  transform: rotate(45deg);
  margin-left: -2px;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (max-width: 560px) {
  .c-btn-policy__icon::after {
    width: 5px;
    height: 5px;
  }
}
.c-btn-policy:hover {
  border-color: var(--color-sub1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.c-btn-policy:hover .c-btn-policy__icon {
  background-color: var(--color-primary);
}
.c-btn-policy:hover .c-btn-policy__icon::after {
  transform: translate(2px, 0) rotate(45deg);
}

/* 5-4. ハッシュタグ レスポンシブ（768px） */
@media (max-width: 768px) {
  .l-hushtag-campaign {
    padding: 60px 12px 100px 12px;
  }
  .l-hushtag-headding {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
  }
  .l-hushtag-headding__media {
    max-width: 240px;
    margin: 0 auto 15px;
  }
  .l-hushtag-headding__overview {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .l-hushtag-headding__lead {
    text-align: left;
    font-size: 15px;
  }
  .l-hushtag-headding__present {
    max-width: 100%;
    margin: 0 auto;
  }
  .l-hushtag__section-title {
    font-size: 1.375rem;
    margin-bottom: 32px;
  }
  .l-hushtag__step-card {
    padding: 24px 16px;
    flex-direction: column;
    text-align: center;
  }
  .l-hushtag__step-number {
    margin-right: 0;
    margin-bottom: 16px;
    width: 60px;
    height: 60px;
  }
  .l-hushtag__step-number span {
    font-size: 1.375rem;
  }
  .l-hushtag__step-body--with-qr {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  .l-hushtag__qr-code {
    margin: 4px auto 0 auto;
  }
  .l-hushtag__step-title {
    font-size: 1.0625rem;
  }
  .l-hushtag__step-text {
    font-size: 0.875rem;
    text-align: left;
  }
  .l-hushtag__notes-title {
    font-size: 1.1875rem;
  }
  .l-hushtag__notes-list li {
    font-size: 0.8125rem;
  }
}
/* ==========================================================================
   6. FAQ（よくある質問）
   ========================================================================== */
.l-faq {
  padding: 100px 20px 300px;
  font-family: var(--font-main);
  letter-spacing: 0.04em;
}

.l-faq__inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.l-faq__head {
  text-align: center;
  color: #ffffff; /* 未定義変数へのフォールバックとしてカラー直指定 */
  margin-bottom: 48px;
}

.l-faq__badge {
  display: inline-block;
  background-color: #ffffff;
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  color: var(--color-sub1);
  padding: 4px 16px;
  margin-bottom: 12px;
  letter-spacing: 0.1em;
  border-radius: 20px;
}

.l-faq__title {
  font-size: 2rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
}

.l-faq__list {
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.7);
}

.l-faq__item {
  overflow: hidden;
  border-top: #ffffff solid 1px;
}

.l-faq__summary {
  display: flex;
  align-items: center;
  padding: 24px 32px;
  cursor: pointer;
  position: relative;
  list-style: none;
  user-select: none;
}

.l-faq__summary::-webkit-details-marker {
  display: none;
}

.l-faq__q-letter {
  font-family: var(--font-en);
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  color: var(--color-sub1);
  margin-right: 16px;
  line-height: 1;
}

.l-faq__question {
  color: var(--text-main);
  font-weight: var(--weight-bold);
  font-size: 1.0625rem;
  padding-right: 40px;
  flex: 1;
}

.l-faq__icon {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
}

.l-faq__icon::before,
.l-faq__icon::after {
  content: "";
  position: absolute;
  background-color: var(--color-sub1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.l-faq__icon::before {
  top: 8px;
  left: 0;
  width: 18px;
  height: 2px;
}

.l-faq__icon::after {
  top: 0;
  left: 8px;
  width: 2px;
  height: 18px;
}

.l-faq__item[open] .l-faq__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.l-faq__item[open] .l-faq__icon::before {
  transform: rotate(180deg);
}

.l-faq__content {
  padding: 0 32px 28px 32px;
}

.l-faq__answer-wrapper {
  display: flex;
  align-items: flex-start;
  border-top: 1px dotted #e0e0e0;
  padding-top: 20px;
}

.l-faq__a-letter {
  font-family: var(--font-en);
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  color: var(--color-sub2);
  margin-right: 16px;
  line-height: 1.25;
}

.l-faq__answer {
  color: var(--text-main); /* 汎用変数へ紐付け */
  line-height: 1.7;
  flex: 1;
}

.l-faq__answer p {
  margin-bottom: 8px;
}

.l-faq__answer p:last-child {
  margin-bottom: 0;
}

.l-faq__answer a {
  color: var(--color-sub2); /* 未定義変数を実在変数へマッピング */
}

.l-faq__detail-block {
  margin-top: 16px;
  background-color: #f9f9f9;
  padding: 16px;
  border-radius: 8px;
}

.l-faq__detail-heading {
  font-weight: var(--weight-bold);
  color: var(--text-main);
  margin-bottom: 8px;
  font-size: 0.875rem;
}

.l-faq__detail-list {
  margin-bottom: 16px;
  padding-left: 4px;
}

.l-faq__detail-list:last-child {
  margin-bottom: 0;
}

.l-faq__detail-list li {
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 12px;
  color: #555555;
}

.l-faq__detail-list li:last-child {
  margin-bottom: 0;
}

/* 6-1. FAQ レスポンシブ（768px） */
@media (max-width: 768px) {
  .l-faq {
    padding: 60px 12px 160px;
  }
  .l-faq__head {
    margin-bottom: 32px;
  }
  .l-faq__title {
    font-size: 1.625rem;
  }
  .l-faq__summary {
    padding: 20px 16px;
  }
  .l-faq__question {
    font-size: 0.9375rem;
  }
  .l-faq__icon {
    right: 16px;
  }
  .l-faq__content {
    padding: 0 16px 20px 16px;
  }
  .l-faq__q-letter,
  .l-faq__a-letter {
    font-size: 1.125rem;
    margin-right: 10px;
  }
}
/* ==========================================================================
   検索ブロック コンポーネント (c-search-block)
   ========================================================================== */
.c-search-block {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 70px;
  border-bottom: solid 1px #ddd;
  box-sizing: border-box;
}
.c-search-block form {
  width: 100%;
  max-width: 803px;
  margin: 0 auto;
}
.c-search-block__row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .c-search-block__row {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
  }
}
.c-search-block__row.m-keyword {
  margin-bottom: 32px;
}
.c-search-block__row.m-keyword .c-search-block__label {
  align-items: center;
  height: 48px;
}
@media (max-width: 768px) {
  .c-search-block__row.m-keyword .c-search-block__label {
    height: auto;
  }
}
.c-search-block {
  /* 左側のラベル・アイコンエリア */
}
.c-search-block__label {
  display: flex;
  align-items: center;
  width: 180px;
  flex-shrink: 0;
  padding-top: 5px;
}
@media (max-width: 768px) {
  .c-search-block__label {
    width: 100%;
    padding-top: 0;
  }
}
.c-search-block__label h2 {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  font-feature-settings: var(--font-kerning);
  margin: 0;
}
.c-search-block__icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  margin-right: 8px;
}
.c-search-block__icon img {
  width: 100%;
  height: auto;
}
.c-search-block {
  /* 右側のコンテンツエリア */
}
.c-search-block__content {
  flex-grow: 1;
  width: 100%;
}
.c-search-block__content.m-flex {
  display: flex;
  gap: 12px;
}
@media (max-width: 560px) {
  .c-search-block__content.m-flex {
    flex-direction: column;
  }
}
.c-search-block {
  /* キーワード入力欄 */
}
.c-search-block__input {
  flex-grow: 1;
  max-width: 500px;
  height: 48px;
  padding: 0 16px;
  background-color: var(--color-white);
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  font-size: 0.9375rem;
  color: var(--text-main);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (max-width: 560px) {
  .c-search-block__input {
    max-width: 100%;
    width: 100%;
  }
}
.c-search-block__input::placeholder {
  color: var(--text-sub);
  opacity: 0.7;
}
.c-search-block__input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.c-search-block {
  /* 検索ボタン */
}
.c-search-block__submit {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 48px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.05em;
  font-feature-settings: var(--font-kerning);
  transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (max-width: 560px) {
  .c-search-block__submit {
    width: 100%;
  }
}
.c-search-block__submit:hover {
  background-color: color-mix(in srgb, var(--color-primary) 85%, #fff);
}
.c-search-block__submit:active {
  transform: scale(0.98);
}
.c-search-block {
  /* タグの並びラッパー */
}
.c-search-block__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
}

/* 🏷️ 丸型選択タグ（c-search-tag） */
.c-search-tag {
  cursor: pointer;
  user-select: none;
}
.c-search-tag input[type=checkbox] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.c-search-tag__text {
  display: inline-block;
  padding: 8px 20px;
  background-color: var(--color-white);
  border: 1px solid #dcdcdc;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: var(--weight-normal);
  color: var(--text-main);
  text-align: center;
  transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-search-tag:hover .c-search-tag__text {
  border-color: var(--color-sub1);
  color: var(--color-sub1);
  transform: translateY(-1px);
}
input[type=checkbox]:checked + .c-search-tag__text {
  background-color: var(--color-sub1);
  border-color: var(--color-sub1);
  color: var(--color-white);
  font-weight: var(--weight-bold);
  transform: translateY(0);
}
input[type=checkbox]:focus-visible + .c-search-tag__text {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   検索結果一覧セクション (c-result-section)
   ========================================================================== */
.c-result-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 50px 20px 0;
  box-sizing: border-box;
  /* 件数表示 */
}
.c-result-section__counter {
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  .c-result-section__counter {
    margin-bottom: 20px;
  }
}
.c-result-section {
  /* リストコンテナ */
}
.c-result-section__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 件数テキストのスタイル */
.c-result-counter {
  font-family: var(--font-main);
  font-feature-settings: var(--font-kerning);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.c-result-counter__current {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
}
.c-result-counter__divider {
  font-size: 1rem;
  color: var(--text-sub);
}
.c-result-counter__total {
  font-size: 1rem;
  font-weight: var(--weight-normal);
  color: var(--text-main);
}

/* 🪪 結果カードコンポーネント */
.c-result-card {
  display: flex;
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (max-width: 768px) {
  .c-result-card {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
}
.c-result-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 60, 104, 0.06);
}
.c-result-card {
  /* 左側：画像エリア */
}
.c-result-card__img-wrap {
  position: relative;
  width: 280px;
  height: 170px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .c-result-card__img-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
  }
}
.c-result-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-result-card:hover .c-result-card__img {
  transform: scale(1.04);
}
.c-result-card {
  /* 📍 エリアバッジ (写真左下の白い角丸ラベル) */
}
.c-result-card__area-badge {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--color-white);
  padding: 6px 16px 6px 12px;
  border-top-right-radius: 12px;
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
}
.c-result-card__area-badge img {
  width: 12px;
  height: auto;
}
.c-result-card {
  /* 右側：コンテンツエリア */
}
.c-result-card__body {
  flex-grow: 1;
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (max-width: 768px) {
  .c-result-card__body {
    padding-left: 0;
  }
}
.c-result-card {
  /* カテゴリ表記 */
}
.c-result-card__category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  color: var(--color-sub1);
}
.c-result-card__category img {
  width: 15px;
  height: auto;
}
.c-result-card {
  /* スポットタイトル */
}
.c-result-card__title {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  margin: 8px 0 0 0;
  line-height: 1.4;
  font-feature-settings: var(--font-kerning);
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e2e2;
}
@media (max-width: 768px) {
  .c-result-card__title {
    font-size: 1.25rem;
    padding-bottom: 12px;
  }
}
.c-result-card {
  /* こだわり条件タグ（テキスト一覧） */
}
.c-result-card__tags {
  font-size: 0.8125rem;
  color: var(--text-sub);
  margin: 12px 0 0 0;
  line-height: 1.6;
}
.c-result-card {
  /* 右下ボタンのラッパー */
}
.c-result-card__more {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .c-result-card__more {
    margin-top: 16px;
  }
}

/* 🏹 詳しくみるリンク（c-result-link） */
.c-result-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.c-result-link__text {
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
}
.c-result-link__arrow {
  position: relative;
  width: 28px;
  height: 28px;
  background-color: var(--color-sub1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-result-link__arrow::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  transform: rotate(45deg);
  margin-left: -2px;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-result-card:hover .c-result-link__arrow {
  background-color: var(--color-primary);
}
.c-result-card:hover .c-result-link__arrow::after {
  transform: translate(2px, 0) rotate(45deg);
}

/* ==========================================================================
   ページネーション コンポーネント (c-pager) ➔ WordPressの出力をハック
   ========================================================================== */
.c-pager-container {
  max-width: 1000px;
  margin: 100px auto 0;
  padding: 40px 20px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .c-pager-container {
    margin-top: 50px;
  }
}

.c-pager {
  display: flex;
  justify-content: center;
}
.c-pager ul.page-numbers {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 480px) {
  .c-pager ul.page-numbers {
    gap: 8px;
  }
}
.c-pager ul.page-numbers li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.c-pager ul.page-numbers .page-numbers {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--text-sub);
  text-decoration: none;
  font-family: var(--font-main);
  transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (max-width: 480px) {
  .c-pager ul.page-numbers .page-numbers {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
  }
}
.c-pager ul.page-numbers .page-numbers:not(.current):not(.prev):not(.next):hover {
  color: var(--color-primary);
  background-color: rgba(0, 60, 104, 0.05);
}
.c-pager ul.page-numbers .page-numbers.current {
  background-color: var(--color-white);
  color: var(--color-sub1);
  font-weight: var(--weight-bold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.c-pager ul.page-numbers .prev {
  font-size: 0;
  position: relative;
  color: var(--text-main);
}
.c-pager ul.page-numbers .prev::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(-135deg);
}
.c-pager ul.page-numbers .prev:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: translateX(-2px);
}
.c-pager ul.page-numbers .next {
  font-size: 0;
  position: relative;
  background-color: var(--color-sub1);
  color: var(--color-white);
}
.c-pager ul.page-numbers .next::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  transform: rotate(45deg);
  margin-left: -2px;
}
.c-pager ul.page-numbers .next:hover {
  background-color: var(--color-primary);
  transform: translateX(2px);
}

/* ==========================================================================
   スポット詳細ヒーロースライダー (spot-slider)
   ========================================================================== */
.hero-visual.spot-slider {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background-color: #000;
}
@media (max-width: 768px) {
  .hero-visual.spot-slider {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1/1 !important;
  }
}
.hero-visual.spot-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-visual.spot-slider img.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
@media (max-width: 768px) {
  .hero-visual.spot-slider img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}

/* ==========================================================================
   スポット詳細メイン情報 (p-spot-detail)
   ========================================================================== */
.p-spot-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  font-family: var(--font-main);
  font-feature-settings: var(--font-kerning);
  /* スポットメインタイトル */
}
.p-spot-detail__title {
  font-size: 2.25rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  margin: 0 0 16px 0;
  line-height: 1.3;
  padding-bottom: 20px;
  border-bottom: 2px solid #222222;
}
@media (max-width: 768px) {
  .p-spot-detail__title {
    font-size: 1.75rem;
    padding-bottom: 14px;
  }
}
.p-spot-detail {
  /* 体験名リスト */
}
.p-spot-detail__experiences {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}
.p-spot-detail__experience-item {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
}
@media (max-width: 768px) {
  .p-spot-detail__experience-item {
    font-size: 1rem;
  }
}
.p-spot-detail {
  /* スポット説明文 */
}
.p-spot-detail__lead {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-main);
  margin: 0 0 40px 0;
}
@media (max-width: 768px) {
  .p-spot-detail__lead {
    font-size: 0.9375rem;
    margin-bottom: 30px;
  }
}
.p-spot-detail {
  /* スペック情報エリア */
}
.p-spot-detail__specs {
  margin-bottom: 60px;
  border-top: 1px solid #e2e2e2;
}
@media (max-width: 768px) {
  .p-spot-detail__specs {
    margin-bottom: 40px;
  }
}
.p-spot-detail {
  /* アクションボタン（2連） */
}
.p-spot-detail__actions {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
}
@media (max-width: 768px) {
  .p-spot-detail__actions {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 30px;
  }
}

/* 📋 スペック行コンポーネント（p-spot-spec-row） */
.p-spot-spec-row {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid #e2e2e2;
}
@media (max-width: 600px) {
  .p-spot-spec-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 0;
  }
}
.p-spot-spec-row__label {
  display: flex;
  align-items: center;
  width: 160px;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}
@media (max-width: 600px) {
  .p-spot-spec-row__label {
    width: 100%;
  }
}
.p-spot-spec-row__label h2 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}
.p-spot-spec-row__icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  margin-right: 8px;
}
.p-spot-spec-row__icon img {
  width: 100%;
  height: auto;
}
.p-spot-spec-row__value {
  flex-grow: 1;
  margin: 0;
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
}
@media (max-width: 600px) {
  .p-spot-spec-row__value {
    width: 100%;
    padding-left: 28px;
    box-sizing: border-box;
  }
}

/* 🔵 アクションボタン（c-btn-action） */
.c-btn-action {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 56px;
  background-color: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 100px;
  padding: 0 16px;
  box-sizing: border-box;
  transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}
@media (max-width: 768px) {
  .c-btn-action {
    width: 100%;
    max-width: 340px;
  }
}
.c-btn-action__text {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
}
.c-btn-action__arrow {
  position: absolute;
  right: 10px;
  width: 32px;
  height: 32px;
  background-color: var(--color-sub1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-btn-action__arrow::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  transform: rotate(45deg);
  margin-left: -2px;
}
.c-btn-action:hover {
  background-color: var(--color-sub1);
}
.c-btn-action:hover .c-btn-action__arrow {
  background-color: var(--color-white);
  transform: translateX(4px);
}
.c-btn-action:hover .c-btn-action__arrow::after {
  border-top-color: var(--color-sub1);
  border-right-color: var(--color-sub1);
}
.c-btn-action:active {
  transform: scale(0.97);
}

/* ==========================================================================
   スポット基本情報ブロック (p-spot-info) ➔ 🛠️ 左右の余白を修正しました！
   ========================================================================== */
.p-spot-info {
  max-width: 800px;
  margin: 80px auto 0;
  box-sizing: border-box;
  font-family: var(--font-main);
  font-feature-settings: var(--font-kerning);
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 32px 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
@media (max-width: 768px) {
  .p-spot-info {
    margin-top: 50px;
    padding: 24px 20px;
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px);
  }
}
.p-spot-info__row {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 24px 0;
  border-bottom: 1px solid #e2e2e2;
}
@media (max-width: 600px) {
  .p-spot-info__row {
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
  }
}
.p-spot-info__row:first-child {
  padding-top: 8px;
}
.p-spot-info__row:last-child {
  border-bottom: none;
  padding-bottom: 8px;
}
.p-spot-info__row.is-hidden {
  display: none !important;
}
.p-spot-info {
  /* 左側：項目ラベル */
}
.p-spot-info__label {
  width: 240px;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--color-sub1);
  line-height: 1.5;
}
@media (max-width: 600px) {
  .p-spot-info__label {
    width: 100%;
  }
}
.p-spot-info {
  /* 右側：内容 */
}
.p-spot-info__value {
  flex-grow: 1;
  margin: 0;
  font-size: 1rem;
  font-weight: var(--weight-normal);
  color: var(--text-main);
  line-height: 1.5;
}
@media (max-width: 600px) {
  .p-spot-info__value {
    width: 100%;
  }
}
.p-spot-info__link-tel {
  color: inherit;
  text-decoration: none;
}
@media (max-width: 768px) {
  .p-spot-info__link-tel {
    color: var(--color-primary);
    text-decoration: underline;
  }
}
.p-spot-info__link-web {
  color: var(--text-main);
  text-decoration: underline;
  transition: color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.p-spot-info__link-web:hover {
  color: var(--color-primary);
}
.p-spot-info__sns-list {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* 📱 SNS単体アイコン（c-sns-icon） */
.c-sns-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-sns-icon img {
  width: 100%;
  height: auto;
}
.c-sns-icon:hover {
  transform: translateY(-2px);
}
.c-sns-icon.m-facebook:hover {
  filter: drop-shadow(0 2px 4px rgba(24, 119, 242, 0.3));
}
.c-sns-icon.m-instagram:hover {
  filter: drop-shadow(0 2px 4px rgba(225, 48, 108, 0.3));
}
.c-sns-icon.m-x:hover {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.c-sns-icon.m-line:hover {
  filter: drop-shadow(0 2px 4px rgba(6, 199, 85, 0.3));
}

/* ==========================================================================
   スポットマップブロック (p-spot-map)
   ========================================================================== */
.p-spot-map {
  max-width: 800px;
  margin: 48px auto 0;
  padding: 0 20px;
  box-sizing: border-box;
  font-family: var(--font-main);
  font-feature-settings: var(--font-kerning);
}
@media (max-width: 768px) {
  .p-spot-map {
    margin-top: 40px;
  }
}
.p-spot-map__head {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}
.p-spot-map__head h2 {
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin: 0;
}
.p-spot-map__icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  margin-right: 8px;
}
.p-spot-map__icon img {
  width: 100%;
  height: auto;
}
.p-spot-map {
  /* 🗺️ マップ本体ラッパー */
}
.p-spot-map__body {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  margin-bottom: 100px;
  border: none;
}
@media (max-width: 768px) {
  .p-spot-map__body {
    margin-bottom: 60px;
  }
}
.p-spot-map__body iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
.p-spot-map__foot {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   スタンプラリー参加方法ブロック (p-rally-howto)
   ========================================================================== */
.p-rally-howto {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
  font-family: var(--font-main);
  font-feature-settings: var(--font-kerning);
  /* ヘッドエリア */
}
.p-rally-howto__head {
  margin-bottom: 32px;
}
.p-rally-howto {
  /* メイン見出し */
}
.p-rally-howto__title {
  font-size: 2rem;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin: 16px 0 0 0;
  letter-spacing: 0.03em;
}
.p-rally-howto {
  /* リード文 */
}
.p-rally-howto__lead {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  line-height: 1.8;
  margin-bottom: 48px;
}
.p-rally-howto__lead p {
  margin: 0 0 8px 0;
}
.p-rally-howto__lead p:last-child {
  margin-bottom: 0;
}
.p-rally-howto {
  /* コンテンツエリア（ロゴ＆QRの並び） */
}
.p-rally-howto__content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .p-rally-howto__content {
    flex-direction: column;
    gap: 32px;
  }
}
.p-rally-howto {
  /* ロゴラッパー */
}
.p-rally-howto__logo {
  width: 260px;
  flex-shrink: 0;
}
.p-rally-howto__logo img {
  width: 100%;
  height: auto;
}
.p-rally-howto {
  /* 二次元コード群のラッパー */
}
.p-rally-howto__codes {
  display: flex;
  gap: 32px;
}
.p-rally-howto {
  /* 注記 */
}
.p-rally-howto__note {
  font-size: 0.875rem;
  color: var(--text-sub);
  margin: 0;
}

/* 🏷️ アクセントバッジ（c-badge-accent） */
.c-badge-accent {
  display: inline-block;
  background-color: var(--color-sub1);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  padding: 6px 24px;
  border-radius: 100px;
  letter-spacing: 0.05em;
}

/* 🔳 二次元コードボックス（c-code-box） */
.c-code-box {
  display: flex;
  align-items: stretch;
  background-color: var(--color-white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  overflow: hidden;
  /* 横のリボンラベル部分（アプリ版 / WEB版） */
}
.c-code-box__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  flex-shrink: 0;
}
.c-code-box__label img {
  height: 100%;
  width: auto;
  object-fit: contain;
}
.c-code-box {
  /* 二次元コードの画像エリア */
}
.c-code-box__image {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
}
.c-code-box__image img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   スタンプラリー参加手順 (p-rally-flow)
   ========================================================================== */
.p-rally-flow {
  max-width: 1140px;
  margin: 60px auto 0;
  padding: 0 20px;
  font-family: var(--font-main);
  font-feature-settings: var(--font-kerning);
  /* 見出し（\ 参加手順 /） */
}
.p-rally-flow__title {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-align: center;
  margin: 0 0 40px 0;
  letter-spacing: 0.05em;
}
.p-rally-flow {
  /* フロー全体を包むリスト */
}
.p-rally-flow__list {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1024px) {
  .p-rally-flow__list {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
}
.p-rally-flow {
  /* 🏹 各ステップの親要素 ＆ 隣り合うカードの間の矢印を擬似要素で実装 */
}
.p-rally-flow__item {
  position: relative;
  width: calc((100% - 72px) / 4);
}
@media (max-width: 1024px) {
  .p-rally-flow__item {
    width: 100%;
    max-width: 320px;
  }
}
.p-rally-flow__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  /* CSSでシャープな右向き三角形を描画 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 12px;
  border-color: transparent transparent transparent var(--color-sub1);
  z-index: 2;
}
@media (max-width: 1024px) {
  .p-rally-flow__item:not(:last-child)::after {
    /* スマホ・タブレット時はカードの「下」に向けて「下向き三角形」にスイッチ */
    top: auto;
    bottom: -28px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-width: 12px 10px 0 10px;
    border-color: var(--color-sub1) transparent transparent transparent;
  }
}

/* 📱 個別の白い角丸カード (c-flow-card) */
.c-flow-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 24px 20px;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-flow-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 60, 104, 0.04);
}
.c-flow-card {
  /* 上部：イラスト・スマホ画面エリア */
}
.c-flow-card__img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-flow-card__img img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.c-flow-card {
  /* 下部：テキストエリア */
}
.c-flow-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-grow: 1;
}
.c-flow-card {
  /* ステップ数（FLOW 01 など） */
}
.c-flow-card__step {
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  color: var(--color-sub1);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.c-flow-card {
  /* 説明文テキスト */
}
.c-flow-card__text {
  font-size: 0.875rem;
  font-weight: var(--weight-normal);
  color: var(--text-main);
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

/* ==========================================================================
   景品情報 ＆ 応募ルールブロック (p-rally-prizes)
   ========================================================================== */
.l-contents-wrapper-wave {
  width: 100%;
  background-image: url(../images/common/bg_noise_yellow.png);
  background-size: 100% auto;
  background-repeat: repeat;
  padding: 0 0 300px;
  position: relative;
}

.l-contents-wrapper-wave .wave-yellow_top {
  position: relative;
}
.l-contents-wrapper-wave .wave-yellow_top img {
  margin-bottom: 80px;
}

.p-rally-prizes::before {
  display: block;
  content: "";
  position: absolute;
  top: -220px;
  left: -70px;
  width: 260px;
  height: 144px;
  background-image: url(../images/common/garland.png);
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  .p-rally-prizes::before {
    top: -90px;
    left: 0;
    width: 130px;
    height: 74px;
  }
}

.p-rally-prizes {
  max-width: 1140px;
  margin: 60px auto 0;
  padding: 0 20px;
  font-family: var(--font-main);
  font-feature-settings: var(--font-kerning);
  position: relative;
  z-index: 2;
  /* ヘッドエリア */
}
.p-rally-prizes__head {
  text-align: center;
  margin-bottom: 48px;
}
.p-rally-prizes__title {
  font-size: 2rem;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin: 16px 0 0 0;
}
.p-rally-prizes__lead {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  margin: 24px 0 0 0;
}
.p-rally-prizes {
  /* A〜Cコース用の3カラムグリッド */
}
.p-rally-prizes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 96px;
}
@media (max-width: 960px) {
  .p-rally-prizes__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.p-rally-prizes {
  /* D〜Eコース用の縦並びリスト */
}
.p-rally-prizes__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  margin-bottom: 64px;
}
@media (max-width: 840px) {
  .p-rally-prizes__list {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* 🏅 ギザギザのポイントバッジ（c-point-badge）
   ※実際の実装では、ギザギザ型の背景画像を background-image に設定するのが最も堅牢です */
.c-point-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  text-align: center;
  z-index: 3;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.c-point-badge.m-brown {
  background-image: url("../images/common/badge-cookie-brown.svg");
}
.c-point-badge.m-blue {
  background-image: url("../images/common/badge-cookie-blue.svg");
}
.c-point-badge.m-cyan {
  background-image: url("../images/common/badge-cookie-cyan.svg");
}
.c-point-badge strong {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  font-family: var(--font-en);
  line-height: 1;
}
.c-point-badge span {
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  margin-top: 2px;
}

.p-rally-prizes__list .c-point-badge {
  color: var(--color-primary);
  top: -30px;
  left: 0px;
}

/* 🏷️ コース名ラベル（共通） */
.c-course-label {
  width: 85px;
  display: block;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  padding: 2px 14px;
  border-radius: 100px;
  margin-bottom: 12px;
  text-align: center;
}

/* 🪪 A〜Cコース：カードモジュール (c-prize-card) */
.c-prize-card {
  display: flex;
  flex-direction: column;
}
.c-prize-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 8px;
  overflow: hidden;
  border: 6px solid var(--color-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  margin-bottom: 16px;
}
.c-prize-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-prize-card__caption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 0.6875rem;
  color: var(--color-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.c-prize-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.c-prize-card__title {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  line-height: 1.4;
  margin: 0 0 16px 0;
  min-height: 2.8em;
}
.c-prize-card__winners {
  padding-bottom: 8px;
  border-bottom: 1px solid #222222;
  margin-bottom: 8px;
}
.c-prize-card__sub-note {
  font-size: 0.8125rem;
  color: var(--text-sub);
  line-height: 1.5;
  margin: 0;
}

/* 🔳 D〜Eコース：横長リストモジュール (c-prize-row) */
.c-prize-row {
  display: flex;
  align-items: flex-start;
  height: 100%;
  box-sizing: border-box;
}
.c-prize-row__badge-area {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  margin-right: 16px;
}
.c-prize-row__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.c-prize-row__title {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  line-height: 1.5;
  margin: 0 0 16px 0;
  min-height: 3em;
}
.c-prize-row__winners {
  margin-top: auto;
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid #222222;
  margin-bottom: 8px;
}
.c-prize-row__sub-note {
  font-size: 0.8125rem;
  color: var(--text-sub);
  margin: 8px 0 0 0;
}

/* 🎯 当選人数テキスト用の共通クラス */
.c-winners-text {
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  margin: 0;
}
.c-winners-text .m-orange {
  color: var(--color-sub2);
  font-size: 1.0625rem;
}
.c-winners-text .m-orange strong {
  font-size: 1.625rem;
  font-weight: var(--weight-bold);
  margin: 0 2px;
}

/* ==========================================================================
   📄 応募ルール ＆ 注記セクション (p-rally-rules)
   ========================================================================== */
.p-rally-rules {
  margin-top: 64px;
  text-align: left;
}
.p-rally-rules__block {
  margin-bottom: 32px;
}
.p-rally-rules__block h4 {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  margin: 0 0 12px 0;
}
.p-rally-rules__block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.p-rally-rules__block ul li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-main);
  margin-bottom: 8px;
  text-indent: -1em;
  padding-left: 1em;
}
.p-rally-rules__block ul li:last-child {
  margin-bottom: 0;
}
.p-rally-rules__block {
  /* 応募例のリストスタイル（黒丸ポチ） */
}
.p-rally-rules__block.m-example ul li {
  text-indent: -1.2em;
  padding-left: 1.2em;
}
.p-rally-rules__block.m-example ul li::before {
  content: "●";
  color: var(--text-main);
  font-size: 0.8rem;
  margin-right: 6px;
}
.p-rally-rules {
  /* 最下部の登録商標などの小さな注記 */
}
.p-rally-rules__foot-notes {
  margin-top: 40px;
  border-top: 1px solid #dcdcdc;
  padding-top: 24px;
}
.p-rally-rules__foot-notes p {
  font-size: 0.8125rem;
  color: var(--text-sub);
  margin: 0 0 6px 0;
}
.p-rally-rules__foot-notes p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   モデルコース カテゴリメニュー (p-course-menu)
   ========================================================================== */
.p-course-menu {
  max-width: 1000px;
  margin: 0 auto 70px;
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 40px 56px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  text-align: center;
  font-family: var(--font-main);
  font-feature-settings: var(--font-kerning);
}
@media (max-width: 768px) {
  .p-course-menu {
    padding: 32px 20px;
  }
}
.p-course-menu {
  /* 「カテゴリから探す」見出し */
}
.p-course-menu__title {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  margin: 0 0 24px 0;
  letter-spacing: 0.03em;
}
.p-course-menu {
  /* ナビゲーションコンテナ */
}
.p-course-menu__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 768px) {
  .p-course-menu__list {
    flex-wrap: wrap;
    gap: 10px 8px;
  }
}
.p-course-menu__item {
  display: inline-flex;
}

/* 🏷️ タブボタン単体モジュール (c-course-tab) */
.c-course-tab {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 132px;
  height: 48px;
  background-color: #dcdcdc;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: var(--weight-bold);
  text-decoration: none;
  border-radius: 8px;
  box-sizing: border-box;
  transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* 🦊 通常タブのホバー時：プライマリの濃紺へ滑らかに変色 */
}
.c-course-tab:not(.is-active):hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-1px);
}
.c-course-tab {
  /* 🎯 アクティブ（選択中）状態のスタイル（デザイン上の1泊2日） */
}
.c-course-tab.is-active {
  background-color: var(--color-sub1);
  color: var(--color-white);
  cursor: default;
}
.c-course-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: var(--color-sub1) transparent transparent transparent;
}

.p-course-menu.other-category {
  background: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0);
  margin-top: 80px;
}

.p-course-menu.other-category .c-course-tab.is-active::after {
  display: none;
}

/* ==========================================================================
   モデルコース詳細ブロック (p-model-course)
   ========================================================================== */
.p-model-course {
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 0 20px;
  font-family: var(--font-main);
  font-feature-settings: var(--font-kerning);
  /* -------------------------------------------
     上部：コース概要
     ------------------------------------------- */
}
.p-model-course__head {
  margin-bottom: 32px;
}
.p-model-course__title {
  display: flex;
  align-items: center;
  font-size: 1.75rem;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  padding-bottom: 16px;
  border-bottom: 2px solid #222222;
  margin: 0 0 24px 0;
}
.p-model-course__icon {
  width: 28px;
  margin-right: 12px;
  display: inline-flex;
}
.p-model-course__icon img {
  width: 100%;
  height: auto;
}
.p-model-course {
  /* 概要の2カラムレイアウト */
}
.p-model-course__summary {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
}
@media (max-width: 840px) {
  .p-model-course__summary {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.p-model-course__main-img {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
.p-model-course__main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-model-course {
  /* 右側：インデックスボックス */
}
.p-model-course__index {
  text-align: left;
}
.p-model-course__index-title {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 2px dotted var(--color-sub1);
}
.p-model-course__index-icon {
  width: 18px;
  margin: 0 10px;
  display: inline-flex;
}
.p-model-course__index-icon img {
  width: 100%;
  height: auto;
}
.p-model-course__index-list {
  margin: 0;
  padding-left: 40px;
}
.p-model-course__index-list li {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  line-height: 1.8;
  margin-bottom: 12px;
  position: relative;
}
.p-model-course__index-list li span {
  display: block;
  position: absolute;
  left: -40px;
  color: var(--color-sub1);
  font-family: var(--font-en);
  font-size: 1.25rem;
}
.p-model-course {
  /* -------------------------------------------
     下部：タイムライン＆スポット詳細カード
     ------------------------------------------- */
}
.p-model-course__body {
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 56px 48px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  margin-bottom: 120px;
}
@media (max-width: 768px) {
  .p-model-course__body {
    padding: 40px 20px;
    margin-bottom: 60px;
  }
}
.p-model-course {
  /* 💰 合計獲得ポイントエリア */
}
.p-model-course__total-points {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  background-color: #fef0cd;
  height: 64px;
  border-radius: 12px;
  margin-top: 40px;
}
.p-model-course__total-points span {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
}
.p-model-course__total-points strong {
  font-size: 2rem;
  font-weight: var(--weight-bold);
  color: var(--color-sub2);
}

/* ⏱️ タイムラインアイテム個別モジュール (c-timeline-item) */
/* ==========================================================================
   タイムライン個別アイテム (c-timeline-item) - デザイン完全再現版
   ========================================================================== */
.c-timeline-item {
  display: flex;
  position: relative;
  margin-bottom: 40px;
  gap: 20px;
  /* -------------------------------------------
     左側：バッジ ＆ 矢印付きドット縦線エリア
     ------------------------------------------- */
}
.c-timeline-item__badge-area {
  width: 64px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.c-timeline-item {
  /* ⚙️ ギザギザのナンバリングバッジ */
}
.c-timeline-item .c-timeline-badge {
  position: relative;
  z-index: 3;
  width: 48px;
  height: 48px;
  background-image: url("../images/common/badge-cookie-cyan.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  font-family: var(--font-en);
}
.c-timeline-item {
  /* 🗺️ 【最重要】次のスポットへ続く「矢印付きのドット縦線」の表現 */
}
.c-timeline-item:not(:last-child) .c-timeline-item__badge-area::after {
  content: "";
  position: absolute;
  top: 52px;
  bottom: 10px;
  width: 0;
  border-left: 3px dotted #2ca6cb;
  z-index: 1;
}
.c-timeline-item:not(:last-child) .c-timeline-item__badge-area::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: #2ca6cb transparent transparent transparent;
  z-index: 2;
}
.c-timeline-item {
  /* -------------------------------------------
     右側：コンテンツ本体
     ------------------------------------------- */
}
.c-timeline-item__content {
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
}
@media (max-width: 840px) {
  .c-timeline-item__content {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 48px;
  }
}
.c-timeline-item__text-wrap {
  text-align: left;
  display: flex;
  flex-direction: column;
  padding-top: 7px;
}
.c-timeline-item {
  /* スポットタイトル */
}
.c-timeline-item__title {
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  margin: 0 0 12px 0;
  line-height: 1.3;
}
.c-timeline-item {
  /* メタテキスト [有料 ...] */
}
.c-timeline-item__meta {
  font-size: 0.875rem;
  color: #666666;
  margin: 0 0 12px 0;
  font-weight: var(--weight-bold);
}
.c-timeline-item__meta .m-orange {
  color: var(--color-sub2);
}
.c-timeline-item__meta .m-blue {
  color: var(--color-sub1);
}
.c-timeline-item {
  /* スポット説明文 */
}
.c-timeline-item__desc {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-main);
  margin: 0 0 20px 0;
}
.c-timeline-item {
  /* -------------------------------------------
     🏷️ タブ・タグエリア（九重町 / 1pt）
     ------------------------------------------- */
}
.c-timeline-item__tags {
  display: flex;
  gap: 12px;
}
.c-timeline-item__tags span {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px 0 12px;
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  border-radius: 100px;
}
.c-timeline-item__tags .c-tag-location {
  background-color: #ededed;
  color: var(--text-main);
}
.c-timeline-item__tags .c-tag-point {
  background-color: #fceecb;
  color: var(--text-main);
}
.c-timeline-item__tags .c-tag-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  padding: 0;
}
.c-timeline-item__tags .c-tag-icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.c-timeline-item {
  /* 🖼️ 各スポットの右側イメージ（角丸を忠実に再現） */
}
.c-timeline-item__img {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}
.c-timeline-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
お問い合わせフォーム (p-contact-form)
========================================================================== */
.p-contact-form {
  max-width: 900px;
  margin: 0 auto;
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 100px 56px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  font-family: var(--font-main);
  font-feature-settings: var(--font-kerning);
}
@media (max-width: 768px) {
  .p-contact-form {
    padding: 40px 24px;
  }
}
.p-contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.p-contact-form {
  /* 入力行のレイアウト */
}
.p-contact-form__row {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}
.p-contact-form__row.m-textarea {
  align-items: flex-start;
}
.p-contact-form__row.m-textarea .p-contact-form__label {
  padding-top: 12px;
}
@media (max-width: 768px) {
  .p-contact-form__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
  }
}
.p-contact-form {
  /* 左側：項目ラベルエリア */
}
.p-contact-form__label {
  display: flex;
  align-items: center;
  width: 240px;
  flex-shrink: 0;
}
.p-contact-form__label label {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--text-main);
  cursor: pointer;
}
.p-contact-form {
  /* 右側：コンテンツ（入力フィールド）エリア */
}
.p-contact-form__content {
  flex-grow: 1;
  width: 100%;
}
.p-contact-form__content.m-name-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 480px) {
  .p-contact-form__content.m-name-grid {
    grid-template-columns: 1fr;
  }
}
.p-contact-form {
  /* ⌨️ プレーンな入力フィールド共通定義 (input[type="text"], [type="email"]) */
}
.p-contact-form__input, .p-contact-form__textarea {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background-color: var(--color-white);
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  font-size: 1rem;
  color: var(--text-main);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.p-contact-form__input.m-full, .m-full.p-contact-form__textarea {
  max-width: 100%;
}
.p-contact-form__input::placeholder, .p-contact-form__textarea::placeholder {
  color: #a0a0a0;
  opacity: 1;
}
.p-contact-form__input, .p-contact-form__textarea {
  /* 🦊 フォーカス時のエフェクト：枠線がプライマリになり、かすかな浮遊感を演出 */
}
.p-contact-form__input:focus, .p-contact-form__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 60, 104, 0.08);
}
.p-contact-form {
  /* 📝 お問い合わせ内容用テキストエリア */
}
.p-contact-form__textarea {
  height: 240px;
  padding: 16px;
  resize: vertical;
}
.p-contact-form {
  /* 同意チェックボックスのラッパー */
}
.p-contact-form__consent {
  margin: 60px 0 40px;
  display: flex;
  justify-content: center;
}
.p-contact-form {
  /* 送信ボタンのラッパー */
}
.p-contact-form__submit {
  display: flex;
  justify-content: center;
}

/* 🏷️ [必須] バッジ (c-badge-required) */
.c-badge-required {
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  color: var(--color-alert);
  margin-left: 8px;
  letter-spacing: 0;
}

/* 🔲 同意チェックボックスコンポーネント (c-consent-checkbox) */
.c-consent-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-size: 1rem;
  color: var(--text-main);
}
.c-consent-checkbox input[type=checkbox] {
  width: 20px;
  height: 20px;
  margin: 0 12px 0 0;
  cursor: pointer;
  accent-color: var(--color-sub1);
}
.c-consent-checkbox__link {
  color: var(--color-sub1);
  text-decoration: underline;
  transition: color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-consent-checkbox__link:hover {
  color: var(--color-primary);
}
.c-consent-checkbox__content.m-name-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  /* 子要素にCF7のラッパーが挟まっても追従させる */
}
.c-consent-checkbox__content.m-name-grid > .wpcf7-form-control-wrap {
  width: 100%;
}
@media (max-width: 480px) {
  .c-consent-checkbox__content.m-name-grid {
    grid-template-columns: 1fr;
  }
}

.wpcf7 form fieldset.hidden-fields-container {
  border: none !important; /* 💡 枠線を完全に消去 */
  margin: 0 !important; /* 余計な外白をゼロに */
  padding: 0 !important; /* 余計な内白をゼロに */
  height: 0 !important; /* 高さをなくしてスペースを詰め、隙間バグを防ぐ */
  min-height: 0 !important; /* 念のため最小高さも制限 */
  overflow: hidden !important; /* 万が一の中身のはみ出しも完全に隠す */
}

/* ==========================================================================
   🚀 Contact Form 7 対応：送信ボタン (c-btn-submit)
   ========================================================================== */
/* ボタンと矢印を包むラッパー（位置基準） */
.c-btn-submit__wrapper {
  position: relative;
  display: inline-block;
  width: 320px;
  height: 56px;
}

/* CF7が生成する input[type="submit"] 本体のスタイル */
input[type=submit].c-btn-submit {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 100px;
  font-family: var(--font-main);
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-align: center;
  /* 💡 矢印と被らないように、右側のパディングを多めに確保 */
  padding: 0 48px 0 48px;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* 🦊 ホバーエフェクト（input単体へのホバー） */
}
input[type=submit].c-btn-submit:hover {
  background-color: var(--color-sub1);
}
input[type=submit].c-btn-submit:active {
  transform: scale(0.97);
}

/* 🏹 ラッパーの右側に絶対配置で重ねる丸矢印（span） */
.c-btn-submit__arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  width: 32px;
  height: 32px;
  background-color: var(--color-sub1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-btn-submit__arrow::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  transform: rotate(45deg);
  margin-left: -2px;
  transition: border-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.c-btn-submit__arrow {
  /* 🦊 モーション連動：
     ユーザーがボタン（.c-btn-submit）をホバーした際、隣の矢印（.c-btn-submit__arrow）をアニメーションさせる */
}
.c-btn-submit:hover + .c-btn-submit__arrow {
  background-color: var(--color-white);
  transform: translateY(-50%) translateX(4px);
}
.c-btn-submit:hover + .c-btn-submit__arrow::after {
  border-top-color: var(--color-sub1);
  border-right-color: var(--color-sub1);
}

.p-error-404 {
  /* 💡 外部の文章校正ツールなどの自動割り込みによる装飾を強制リセット */
}
.p-error-404 * {
  background-color: transparent !important;
  text-shadow: none !important;
}
.p-error-404 *[data-gramm-id], .p-error-404 *[class*=grammarly] {
  display: none !important;
}

.p-contact-form .wpcf7-form-control-wrap {
  width: auto;
}

/* ==========================================================================
   🚨 Contact Form 7：送信完了メッセージの配置・中央揃え最適化（送信前非表示版）
   ========================================================================== */
.p-contact-form .wpcf7-response-output {
  display: none !important;
}

form.wpcf7-form {
  display: flex;
  flex-direction: column;
}
form.wpcf7-form > .wpcf7-response-output {
  display: block !important;
  width: 100%;
  max-width: 600px;
  margin: 24px auto 0 !important;
  padding: 12px 20px !important;
  text-align: center !important;
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  border-radius: 8px;
  box-sizing: border-box;
  border: 2px solid transparent !important;
  background-color: transparent !important;
  color: transparent !important;
}
form.wpcf7-form.sent > .wpcf7-response-output {
  border-color: var(--color-sub1) !important;
  background-color: rgba(6, 199, 85, 0.05) !important;
  color: var(--text-main) !important;
}
form.wpcf7-form.invalid > .wpcf7-response-output {
  border-color: var(--color-alert) !important;
  background-color: rgba(255, 0, 0, 0.03) !important;
  color: var(--color-alert) !important;
}

.wpcf7 .screen-reader-response {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}/*# sourceMappingURL=style.css.map */