/* ----------------------------------------------------------------- * リセット的な最低限の設定 * ----------------------------------------------------------------- */
* {
    box-sizing: border-box;
    /* paddingやborderをwidth/heightに含める */
    margin: 0;
    padding: 0;
}

/* =========================================
   html, body 共通の基本設定
   ========================================= */
html,
body {
    /* 画面幅いっぱいを使用 */
    width: 100%;
    max-width: 100%;

    /* 最小幅（極端に小さい画面対策） */
    min-width: 300px;

    /* 横スクロールを強制的に防止 */
    overflow-x: hidden;

    /* ブラウザ標準の余白をリセット */
    margin: 0;
    padding: 0;

    /* =========================================
       フォント設定
       ========================================= */

    /* 明朝体を優先したフォント指定 */
    font-family:
        "Noto Serif JP",
        "Hiragino Mincho ProN",
        serif;
    /* 文字色（ほぼ黒） */
    color: #222;

    /* フォントを滑らかに表示（Mac向け） */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* =========================================
       背景設定（放射状グラデーション）
       ========================================= */

    /* 
      上中央を起点にした円形グラデーション
      明るい → やや青みのある色へ
    */
    background:
        radial-gradient(circle at top center,
            rgba(255, 255, 255, 0.542),
            rgba(245, 247, 248, 0.9) 40%,
            rgba(157, 161, 230, 0.592) 100%);
}

/* ロゴリンク全体 */
.logo {
    display: flex;
    /* 画像とテキストを横並びor縦並びに調整 */
    /* 縦並びにする場合 */
    align-items: center;
    /* 中央揃え */

    color: #676767;
    /* 文字色 */
}

/* ロゴ画像 */
.logo img {
    width: 30px;
    /* ロゴ幅を調整 */
    height: auto;
    /* 高さ自動で比率を維持 */
    object-fit: contain;
    /* 縦横比を保持 */
    margin: 8px;
    /* テキストとの間隔 */
}

/* ロゴテキスト */
.logo p {
    font-size: 16px;
    /* テキストサイズ */
    margin: 0;
    /* pタグのデフォルトマージンをリセット */
    font-weight: bold;
    /* 太字 */
    text-align: center;
    /* 中央揃え */
}

/* =========================================
   霧（ミスト）表現用の擬似要素
   ========================================= */
body::before {
    /* 擬似要素を表示させるための必須指定 */
    content: "";

    /* 画面全体に固定配置（スクロールしても動かない） */
    position: fixed;
    inset: 0;
    /* top/right/bottom/left: 0; と同じ */

    /* マウス操作・クリックを邪魔しない */
    pointer-events: none;

    /* 背景やコンテンツより背面に配置 */
    z-index: 0;

    /* =========================================
       放射状グラデーション（霧の表現）
       ========================================= */

    /*
      画面中央やや上（50% 20%）を起点に、
      白く淡い霧が広がって消えていくイメージ
    */
    background:
        radial-gradient(circle at 50% 20%,
            rgba(245, 255, 253, 0.647),
            /* 中心の霧 */
            rgb(255, 255, 255) 40%,
            /* 白く広がる */
            rgba(254, 158, 158, 0.6) 70%,
            /* 青みの霧 */
            transparent 100%
            /* 透明へフェード */
        );

    /* =========================================
       ゆっくり呼吸するようなアニメーション
       ========================================= */

    /* 
      mistBreath：霧が膨らんだり薄くなったりする演出
      12秒 / 緩急あり / 無限ループ
    */
    animation: mistBreath 6s ease-in-out infinite;
}

/* =========================================
   霧が呼吸するように濃くなったり薄くなる
   ========================================= */
@keyframes mistBreath {

    /* 霧が最も薄い状態 */
    0% {
        opacity: 0.25;
    }

    /* 霧がゆっくり濃くなる */
    50% {
        opacity: 0.6;
    }

    /* 再び薄く戻る */
    100% {
        opacity: 0.25;
    }
}




h2 {
    text-align: right top;
    margin-bottom: 20px;
}

img,
video {
    max-width: 100%;
    /* 画像・動画が親要素を超えないようにする */
    display: block;
    /* インライン要素からブロック要素に変更 */
    max-width: 100%;

}

/*
 * -----------------------------------------------------------------
 * 基本レイアウト要素
 * -----------------------------------------------------------------
 */

.container {
    padding: 16px 30px;
    /* 左右と上下に余白 */
    max-width: 1100px;
    /* 最大幅 */
    margin: 0 auto;
    /* 中央寄せ */
    padding: 0 auto;

}

.header-inner {
    display: flex;
    align-items: center;
    /* 垂直方向の中央揃え */
    justify-content: space-between;
    /* 要素を両端に寄せて配置 */
    padding: 12px 16px;
}

/*
 * -----------------------------------------------------------------
 * ヘッダー
 * -----------------------------------------------------------------
 */
.site-header {
    position: fixed;
    /* 画面上部に固定 */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* 最前面に表示 */
    background: rgba(255, 255, 255, 0.95);
    /* 半透明の白背景 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.logo {
    font-weight: 700;
    font-size: 18px;
    color: #111;
    text-decoration: none;
}

/*
 * -----------------------------------------------------------------
 * ハンバーガーメニューボタン (Hamburger)
 * -----------------------------------------------------------------
 */
/* ハンバーガーボタン本体 */
.hamburger {
    width: 50px;
    /* ボタンの横幅（タップしやすいサイズ） */
    height: 50px;
    /* ボタンの高さ */
    display: flex;
    /* 中の線をflexで配置 */
    flex-direction: column;
    /* 縦方向に並べる */
    align-items: center;
    /* 横方向の中央揃え */
    justify-content: center;
    /* 縦方向の中央揃え */
    border: 0;
    /* button要素の枠線を消す */
    background: transparent;
    /* 背景色を透明にする */
    cursor: pointer;
    /* マウスを乗せたとき指カーソル */
}

/* ハンバーガーの3本線 */
.hamburger-line {
    width: 22px;
    /* 線の長さ */
    height: 2px;
    /* 線の太さ */
    background: #111;
    /* 線の色 */
    display: block;
    /* spanをブロック化 */
    margin: 3px 0;
    /* 線同士の間隔 */
    transition:
        transform .25s ease,
        /* 回転・移動のアニメーション */
        opacity .25s ease;
    /* 表示/非表示のアニメーション */
}


/*
 * -----------------------------------------------------------------
 * グローバルナビゲーション（PC用：スマホでは非表示）
 * -----------------------------------------------------------------
 */
.global-nav {
    display: none;
    /* スマホでは非表示 */
    gap: 12px;
}

.global-nav .nav-link {
    text-decoration: none;
    padding: 8px 6px;
    color: #333;
}

/*
 * ================================================================
 * ハンバーガーDrawer（スマホ用スライドインメニュー）
 * ================================================================
 */
.drawer {
    position: fixed;
    top: 75px;
    right: 0;
    /* 右端に配置 */
    width: 75vw;
    /* 画面の75%を覆うパネル */
    max-width: 340px;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 12px rgba(254, 255, 255, 0.15);
    /* 左側に影 */
    transform: translateX(120%);
    /* 初期は右側に隠す */
    transition: transform 0.35s ease;
    z-index: 500;
}

/* メニューが開いた状態 */
.drawer.open {
    transform: translateX(0);
    /* 画面内へスライド */
}

/* 黒背景（タップで閉じるためのオーバーレイ） */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    /* top/right/bottom/left: 0 */
    background: rgba(0, 0, 0, 0.4);
    z-index: 400;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.drawer-backdrop.show {
    opacity: 1;
    /* 背景を表示 */
}

/* Drawer 内のリンク装飾 */
.drawer-nav {
    padding: 32px 20px;
}

.drawer-link {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    color: #333;
    text-decoration: none;
    font-size: 18px;
}

/*
 * ================================================================
 * HERO（メインビジュアル）エリア
 * ================================================================
 */
.hero {
    position: relative;
    /* 子要素の absolute の基準 */
    height: 100vh;
    /* 画面の縦 62% の高さを確保 */
    display: flex;
    /* コンテンツを配置するために flex 使用 */
    align-items: flex-end;
    /* コンテンツを下に寄せる */
    padding: 24px 0 36px;
    margin-top: 56px;
    /* 固定ヘッダーの高さ分、コンテンツを下げる */
    overflow: hidden;
    /* 背景画像や動画がはみ出さないようにする */
    z-index: 10;
}

/* 下部の白いグラデーションオーバー */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* ボタン操作を邪魔しない */


    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 40%,
            /* 上部透明 */
            rgba(255, 255, 255, 0.5) 70%,
            /* 中央少し白 */
            rgba(255, 255, 255, 1) 100%
            /* 下部濃い白 */
        );
    z-index: 20;
    /* ボタンより下 背景より上*/
}

/* 背景メディア（画像・動画共通） */
.hero-media {
    position: absolute;
    /* 親 .hero の中で全体に広げる */
    inset: 0;
    /* top:0 right:0 bottom:0 left:0 と同じ */
    z-index: 0;
    /* 一番下*/
    /* コンテンツより奥に配置 */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 静止画像（背景） */
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 画像をトリミングして枠いっぱいに見せる */
    object-position: center;
    /* 中央を基準にトリミング */
    z-index: 0;
    /* 一番下*/
}

/* 背景動画（PC でのみ表示したい時に使う） */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: none;

    /* スマホでは非表示 */
}

/* メインテキストボックス（タイトル・ボタン） */
.hero-content {
    position: relative;
    z-index: 100;
    top: -68%;
    /* 白いグラデーション背景より手前に表示！これないと後ろになる */

    text-align: center;
    padding: 16px;
    width: 100%;
    text-shadow: 0 0 30px #061239a1;
}

/* タイトル */
.hero-title {
    font-family:
        "Noto Serif JP",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 500;
    letter-spacing: .14em;

    color: #013a4b;

    /* 雨空に浮かぶ白 */
    text-align: center;
    position: relative;
    top: 10%;

    min-width: 298px;


}

/* サブコピー */
.hero-sub {
    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;

    font-size: 0.95rem;
    letter-spacing: .18em;
    text-transform: uppercase;

    color: rgb(1, 55, 62);
    text-align: center;
    text-shadow: 2px 2px rgba(255, 255, 255, 0.874);
}

/* ボタン配置 */
.hero-ctas {
    display: flex;
    /* 横並び */
    gap: 8px;
    /* ボタン間の間隔 */
    flex-wrap: wrap;
    /* スマホで折り返し可能に */
}

/* ボタンの基本スタイル */
.btn {

    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid transparent;
    z-index: 50;
    position: relative;
    ;
}

a.btn.primary {



    display: flex;
    justify-content: center;
    /* テキスト横中央 */
    align-items: center;
    /* テキスト縦中央 */
    width: 130px;
    /* 任意の幅 */
    height: 50px;
    /* 任意の高さ */
    color: #525252;
    border: 0.5px solid rgba(235, 250, 253, 0.795);
    background: linear-gradient(135deg, #ffffffd3, #acb2e770);
    /* 半透明レッド */
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    /* optional */
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

a.btn.primary:hover {
    background: linear-gradient(135deg, #ffffffd1, #6b79f575);
    /* 少し濃く */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}



a.btn.primary:active {
    transform: scale(0.95);
    transition: transform 0.1s;
}

.hero-ctas {
    display: flex;
    justify-content: center;
    /* 横中央 */
    margin-top: 20px;
}

/*
 * -----------------------------------------------------------------
 * パネル（セクション）　いらないから消した
 * -----------------------------------------------------------------
 */

/* -----------------------------------------------------------------
 *セクション1

 * -----------------------------------------------------------------
 */
.card-text {
    max-width: 680px;
    /* 横に広がりすぎない */
    margin: 0 auto;
    /* 中央寄せ */
    padding: 32px 24px;
    /* 余白で呼吸感 */
    text-align: center;
    /* 静かな印象 */
    color: #4a4a4a;
    /*background: rgba(255, 255, 255, .55); */
    backdrop-filter: blur(6px);
    border-radius: 16px;

}


/* 見出し */
.card-text h2 {
    font-family:
        "Noto Serif JP",
        "Hiragino Mincho ProN",
        serif;

    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: .12em;

    color: #2f3a40;
    /* 少し青みのあるグレー */
    margin-bottom: 22px;
}

/* 本文 */
.card-text p {
    font-family:
        "Noto Serif JP",
        "Hiragino Mincho ProN",
        sans-serif;

    font-size: 1.2rem;
    line-height: 2.1;
    letter-spacing: .06em;

    color: #5f6b73;
    /* 雨の日の街色 */
}

.card-w {
    display: flex;
    align-items: flex-start;
    /* ← 縦書きのズレ防止 */



    gap: 40px;
    /* 画像と文字の間隔 */
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}


.card-img {
    flex-shrink: 0;
    /* 画像が縮まないように */
}

.card-img img {
    width: 100%;
    /* ← 好きな大きさに変えてOK */

    height: auto;
    /* ← 好きな大きさに変えてOK */
    object-fit: cover;

}


.card-text {
    writing-mode: vertical-rl;
    width: 200px;
    /* ← 必須：縦書き用の幅 */
    line-height: 1.8;
    /* 読みやすい */
    margin: 0 auto;
}

/* ------ スライドショー共通設定 ------ */
.slideshow {
    position: relative;
    top: 0;
    min-width: 400px;
    /* 好きな横幅に変更OK */
    height: 500px;
    /* 好きな縦幅に変更OK */
    overflow: hidden;
}

.slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;

    opacity: 0;
    transition: opacity 1.5s ease;
    /* クロスディゾルブ */
}

.slideshow .slide.active {
    opacity: 1;
}

/* ================================================================
 *  SECTION2
 * ================================================================
 */




/* セクションタイトル・説明文・カード見出し共通 */
.section-title,
.why-p,
.why-card h3 {

    color: rgb(0, 0, 0);
    /* ベースの文字色は黒 */

    text-shadow:
        0 1px 0 rgb(255, 255, 255),
        0 2px 6px rgba(255, 255, 255, 0.856);
    /* 背景が暗くても読めるように
       白い影を重ねて“にじみ防止” */

    padding: 2px 6px;
    /* 文字の周りに少し余白を持たせる */

    position: relative;
    /* z-index を効かせるため */

    z-index: 5;
    /* 背景や装飾より前に文字を出す */
}


/* 1カード（文章ブロック）の横幅制御 */
.why-item {
    max-width: 720px;
    /* PC時に広がりすぎない上限 */

    width: 100%;
    /* 親に合わせて伸縮 */

    min-width: 500px;
    /* ある程度の可読幅を保証（※スマホ注意） */
}


/* 共通コンテナの高さ指定 */
.container {
    height: 100%;
    /* 親要素基準で高さをフルに使う */
}


/* why-card のレイアウト構造 */
.why-card {
    height: 100%;
    /* 高さを親に合わせる */

    display: flex;
    /* 縦並びレイアウト */

    flex-direction: column;
    /* 上から下へ */

    justify-content: space-between;
    /* 上下に余白を分散 */
}

/* why-card の上下余白 */
.why-card {
    padding: 10vh 0;
    /* ビューポート基準で上下に大きな余白
       → スクロールに余韻が出る */
}


/* 見出し（why-item 内 h3） */
.why-item h3 {
    margin-bottom: 0.5em;
    /* 下に少し余白 */

    font-family:
        "Noto Serif JP",
        "Hiragino Mincho ProN",
        serif;
    /* 明朝系フォントで情緒・文章感を出す */

    font-size: 1.1rem;
    /* やや小さめの上品なサイズ */

    font-weight: 500;
    /* 太すぎない中太 */

    letter-spacing: .12em;
    /* 文字間を広げて余白感を演出 */

    color: #2f3a40;
    /* 少し青みのあるダークグレー */

    margin-bottom: 14px;
    /* 段落との間隔 */
}


/* 説明文（本文） */
.why-p {
    line-height: 2;
    /* 行間を広くして読みやすく */

    padding-bottom: 30px;
    /* 下線との間隔 */

    border-bottom: solid 1px rgba(255, 255, 255, 0.452);
    /* 薄い白の区切り線 */

    width: 80%;
    /* テキスト幅を少し絞って読みやすく */

    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;
    /* 本文はゴシックで可読性重視 */

    font-size: 0.9rem;
    /* 本文用サイズ */

    letter-spacing: .06em;
    /* 少しだけ字間を広げる */

    color: #5f6b73;
    /* 明るめのグレーで優しい印象 */
}



/* ===== 背景画像 + 雨エフェクト ===== */
.rain-bg {
    position: relative;
    background: url('../img/london-bg.jpg') center/cover no-repeat;
    margin: 0 auto;
    min-height: 700px;
    max-width: 1000px;
    /* ←お好みの画像に変えてね */
    overflow: hidden;
    /* 雨がはみ出さないように */
    background-size: cover;
    background-position: 40% center;
    /* ← 左寄りに補正 */
    border-top-right-radius: 400px;
    /* 右上 */
    border-bottom-right-radius: 400px;
    /* 右下 */

    box-shadow: 0 0 100px 100px rgba(205, 237, 255, 0.803) inset;

}

.anshin {
    flex: 1;
    display: flex;
    align-items: center;
    /* ← 縦中央 */
    padding: 12vh 0;
}

.why-card {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10vh 5vh;
}




/* 右端の白い霧（グラデーション） */
.rain-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    /* ← 白い霧の広がり量。好みで調整 */
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 30%,
            rgba(255, 255, 255, 0) 90%);
    z-index: 1;
}

/* 雨の効果ｓ） */

.rainning {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;

    margin: auto;
    width: 100vw;
}

.rain {
    position: absolute;
    width: 1px;
    height: 100%;
    min-height: 1000px;
    top: 0;
    left: 50%;
    overflow: hidden;
}

.rain::after {
    content: "";
    display: block;
    position: absolute;
    height: 20vh;
    width: 100%;
    top: -50%;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #848383 80%, #4e5ad8 100%);
    animation: drop 2.8s 0s infinite;
    animation-fill-mode: forwards;
    opacity: .6;
}

.rain:nth-child(1) {
    margin-left: -40%;
}

.rain:nth-child(1)::after {
    animation-delay: 1.2s;
}

.rain:nth-child(2) {
    margin-left: -30%;
}

.rain:nth-child(2)::after {
    animation-delay: 2.5s;
}

.rain:nth-child(3) {
    margin-left: -20%;
}

.rain:nth-child(3)::after {
    animation-delay: .6s;
}

.rain:nth-child(4) {
    margin-left: -10%;
}

.rain:nth-child(4)::after {
    animation-delay: 2.3s;
}

.rain:nth-child(5) {
    margin-left: 0%;
}

.rain:nth-child(5)::after {
    animation-delay: 1s;
}

.rain:nth-child(6) {
    margin-left: 10%;
}

.rain:nth-child(6)::after {
    animation-delay: .3s;
}

.rain:nth-child(7) {
    margin-left: 20%;
}

.rain:nth-child(7)::after {
    animation-delay: 2.6s;
}

.rain:nth-child(8) {
    margin-left: 30%;
}

.rain:nth-child(8)::after {
    animation-delay: 1.9s;
}

.rain:nth-child(9) {
    margin-left: 40%;
}

.rain:nth-child(9)::after {
    animation-delay: .7s;
}

/* ===== ここから2周目 ===== */

.rain:nth-child(10) {
    margin-left: -35%;
}

.rain:nth-child(10)::after {
    animation-delay: 1.3s;
}

.rain:nth-child(11) {
    margin-left: -34%;
}

.rain:nth-child(11)::after {
    animation-delay: 2.3s;
}

.rain:nth-child(12) {
    margin-left: -23%;
}

.rain:nth-child(12)::after {
    animation-delay: 5s;
}

.rain:nth-child(13) {
    margin-left: -10%;
}

.rain:nth-child(13)::after {
    animation-delay: 2.7s;
}

.rain:nth-child(14) {
    margin-left: 5%;
}

.rain:nth-child(14)::after {
    animation-delay: 2s;
}

.rain:nth-child(15) {
    margin-left: 15%;
}

.rain:nth-child(15)::after {
    animation-delay: .6s;
}

.rain:nth-child(16) {
    margin-left: 25%;
}

.rain:nth-child(16)::after {
    animation-delay: 2.3s;
}

.rain:nth-child(17) {
    margin-left: 35%;
}

.rain:nth-child(17)::after {
    animation-delay: 1.3s;
}

.rain:nth-child(18) {
    margin-left: 45%;
}

.rain:nth-child(18)::after {
    animation-delay: .3s;
}

@keyframes drop {
    0% {
        top: -50%;
    }

    100% {
        top: 150%;
    }
}

.naze {
    color: #ff8181a1;
    margin-bottom: 60px;
    width: 200px;
    font-size: 2rem;
}

/*
 * ----------------------------------------------------------------
 * -----------------------------------------------------------------
 * スライダー
 * -----------------------------------------------------------------
 */
/* ===== スライダー全体 ===== */

.tour-title {
    text-align: center;
    margin: 80px auto 40px;
}

/* 見出し */
.tour-title h2 {
    font-family:
        "Noto Serif JP",
        "Hiragino Mincho ProN",
        serif;

    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: .12em;

    color: #2f3a40;
    margin-bottom: 8px;
}

/* サブ情報 */
.tour-title p {
    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;

    font-size: 1rem;
    letter-spacing: .2em;
    text-transform: uppercase;

    color: #7a8790;
    /* 少し薄め */
}

.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* はみ出し防止 */
    margin-top: 40px;
}

/* ===== スライド列 ===== */
.slides {
    display: flex;
    transition: transform 0.6s ease;
    will-change: transform;
}

/* ===== 各スライド ===== */
.slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 24px 16px;
}

/* 見出し */
.slide h2 {
    font-size: 1.2rem;
    margin-bottom: 0.8em;
    line-height: 1.4;
}

/* テキスト */
.slide p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
}

/* ===== 矢印ボタン ===== */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 36px;
    text-align: center;
    z-index: 5;
}

.slider-btn.prev {
    left: 8px;
}

.slider-btn.next {
    right: 8px;
}

/* ===== ドット ===== */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.slider-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #ccc;
    cursor: pointer;
}

.slider-dots button.active {
    background: #333;
}

/* reveal（スクロールでフェードイン） * ---------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(1px);
    transition: opacity 2s ease, transform 3s ease;

}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);

}

/* フェードイン初期状態 */
.fadein {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 表示状態 */
.fadein.is-show {
    opacity: 1;
    transform: translateY(0);
    position: relative;
    z-index: 5;
}






/*
 * -----------------------------------------------------------------
 * フォーム
 * -----------------------------------------------------------------
 */
.form label {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
}

.form input,
.form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}


/*
 * -----------------------------------------------------------------
 * その他ユーティリティ・JS連動スタイル
 * -----------------------------------------------------------------
 */

/* スライダー用ドットスタイル（JSで生成される前提） */
.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
    display: inline-block;
    cursor: pointer;
}

.slider-dot.active {
    background: #333;
}

/* ヘッダースペース確保（コンテンツがヘッダー下に隠れないよう） */
main {
    padding-top: 8px;
    /* 必要に応じて調整 */
}

/* スクロールの既定（ブラウザが対応すれば滑らか） */
html {
    scroll-behavior: smooth;
}





.footer-rains {
    height: 100px;

}

/* ===＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
/* === MAP === 
=====================================ーーー==== */
.click-hint {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;

    gap: 10px;
    font-size: 20px;
    color: #ee4a63ba;
    pointer-events: none;
    /* 文字はクリック邪魔しない */
}



.click-hint {
    display: flex;
    align-items: center;
    gap: 12px;
}

.click-hint .dot {
    position: relative;
    /* ← absoluteじゃない */
    width: 28px;
    height: 28px;

    background: #ee4a63ba;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.click-hint .dot::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.section-title {
    font-family:
        "Noto Serif JP",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(1.4rem, 8vw, 2rem);
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1.6;

    color: #ff8181a1;
    /* ロンドンの曇り空色 */
    text-align: center;
    margin: 80px auto 48px;
    text-shadow: 0 6px 16px rgba(255, 185, 185, 0.786)
}


.section-title::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -24px;
    transform: translateX(-50%);

    width: 120px;
    height: 120px;
    background: radial-gradient(circle,
            rgba(47, 58, 64, .12),
            transparent 70%);
    filter: blur(20px);
}

.section-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    background: rgba(47, 58, 64, .4);
    margin: 24px auto 0;
}

.map {
    position: relative;

    border-radius: 12px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

/* ★ 比率を作るのはココだけ */
.map-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 842 / 595;
    border-radius: 10px;
}

/* ★ 中身を全面に広げる役 */
.map-canvas {
    position: absolute;
    inset: 0;
}

/* ★ 画像は箱にフィット */
.map-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 10%;
}

/* ピン */
.map-point {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
}


/* ピン */
.map-point {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /* ピン基準点真ん中に */
    background: #491bfeda;
    color: #fff;
    font-weight: bold;
    border: 1px solid #0718ffde;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

/* ピンの位置（ここを調整） */
.pt1 {
    left: 34%;
    top: 35%;
}

.pt2 {
    left: 68%;
    top: 44%;
}

.pt3 {
    left: 80.1%;
    top: 54%;
}

.pt4 {
    left: 30%;
    top: 63%;
}

.pt5 {
    left: 42%;
    top: 66%;
}

.pt6 {
    left: 48%;
    top: 55%;
}

/* === MODAL === */
.mymodal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.mymodal[aria-hidden="false"] {
    display: flex;
}

.mymodal .panel {
    background: #eefdff;
    border-radius: 10px;
    max-width: 600px;
    width: 100%;
    padding: 20px;
    position: relative;
}

.mymodal .close {
    position: absolute;
    right: 10px;
    top: 10px;
    border: none;
    background: #0e162ed1;
    border-radius: 5px;
    color: #fff;
    padding: 6px 10px;
    cursor: pointer;
}


/* ===== スポット全体のテキスト ===== */
.spot .container {
    padding: 1.5rem 1rem;
}

/* 見出し */
.spot h3 {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
    position: relative;
}

/* 見出しの下線（控えめ） */
.spot h3::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: #333;
    margin-top: 0.5rem;
}

/* 説明文 */
.spot p {
    font-size: 0.95rem;
    line-height: 1.9;
    color: #555;
    letter-spacing: 0.03em;
    margin-bottom: 30px;
}



/*スマホ*/
/* ===== spot 全体のフェードイン ===== */
.fade-spot {
    opacity: 0;
    /* 初期状態は非表示 */
    transform: translateY(40px);
    /* 少し下にずらしておく */
    transition:
        opacity .8s ease,
        /* 透明度を0.8秒で変化 */
        transform .8s ease;
    /* 位置も同時に0.8秒で戻す */
}

/* 画面に入ったら表示 */
.fade-spot.is-visible {
    opacity: 1;
    /* 表示 */
    transform: translateY(0);
    /* 元の位置へ */
}

/* =========================================
   上に重なる写真：少し遅れてフェードイン
   ========================================= */
.img-overlay {
    opacity: 0;
    /* 最初は見せない */
    transition: opacity 2s ease;
    /* ゆっくり2秒かけて表示 */
    transition-delay: 1s;
    /* ★1秒待ってから切り替える */
}

/* spotが表示された後に写真を出す */
.fade-spot.is-visible .img-overlay {
    opacity: 1;
    /* 写真をフェードイン */
}


/* ===== 画像ラップ ===== */
.img-wrap {
    position: relative;
    border-radius: 0px;
    overflow: hidden;
}



.img-wrap {
    position: relative;
    overflow: hidden;

}

/* 共通 */
.img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5000px;

}

/* ベース（最初に見せたい画像） */
.img-base {
    position: relative;
    z-index: 1;
}

/* オーバーレイ（スクロールで出す写真） */
.img-overlay {
    position: absolute;
    inset: 0;
    object-fit: cover;
    opacity: 0;
    z-index: 2;
    transition: opacity 1.5s ease;
    transition-delay: 1s;
    /* ← 最初の画像を見せる時間 */

}



/* 表示されたら写真をフェードイン */
.fade-spot.is-visible .img-overlay {
    opacity: 1;
}

.fade-spot {
    transition-delay: 0.2s;
}


.img-wrap {

    overflow: hidden;
    padding: 0 16px;
    /* ← 画面左右に余白 */
}

.img-overlay {
    padding: 0 16px;
    /* ← 画面左右に余白 */

}

.spot-list {
    padding: 0 16px;
    /* ← 画面左右に余白 */
}

/* -----------------------------------------------------------------*/
/* セクション6*/
/*質問部分*/
/* -----------------------------------------------------------------*/


#section6 {
    padding: 80px 0;
}

#section6 h2 {
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-size: 2rem;
    letter-spacing: .15em;
    color: #2f3a40;
    margin-bottom: 48px;
}



#section6 summary {
    cursor: pointer;
    /* マウスを乗せたときに「クリックできる」ことを示す */

    font-family: "Noto Sans JP",
        sans-serif;
    /* 日本語に最適なフォント指定（未対応環境では sans-serif） */

    font-size: 0.95rem;
    /* 少し小さめで読みやすい本文サイズ */

    letter-spacing: .05em;
    /* 文字間隔を少し広げて、FAQ見出しを読みやすく */

    color: #000000;
    /* 文字色：黒 */

    background-color: #ffffffc3;
    /* 半透明の白背景（c3 = 約76%不透明）
       背景画像や動画の上でも文字が読める */

    border: solid #4d74f482 1px;
    /* 薄い青系の枠線で、FAQ項目を区切る */

    position: relative;
    /* 擬似要素（::after など）や z-index を使うための基準 */

    padding-right: 32px;
    /* 右側に余白を作る
       → 矢印アイコン（＋／▼など）を置くスペース用 */
}

#section6 details {
    background: rgba(255, 255, 255, 0.499);
    /* 半透明の白背景
       背景画像・動画の上でも中身が読みやすくなる */

    border-radius: 3px;
    /* 角をほんのり丸くして、硬すぎない印象に */

    padding: 5px 22px 60px;
    /* 内側の余白
       上:5px（summaryとの間）
       左右:22px（文字の読みやすさ）
       下:60px（開いたときの本文余白を広めに確保） */

    margin-bottom: 16px;
    /* FAQ項目同士の間隔 */

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.04);
    /* ふわっと浮かせる影
       白背景でもカード感が出る */

    transition: background .4s ease;
    /* 開閉時や hover 時に
       背景色がなめらかに変化する */
}

/*
 * ----------------------------------------------------------------
 * -----------------------------------------------------------------
 * スライダー
 * -----------------------------------------------------------------
 */
/* ===== スライダー全体 ===== */

/* =====================================================
   商品カード全体
   ===================================================== */
.product__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: stretch;
    /* ← 高さを揃える */
}

.product__list--image-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product__list--image-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;

    background: #ffffff;
    border-radius: 16px;
    padding: 16px;

    /* 浮いて見えるように */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);

    /* ホバー時のなめらか演出 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product__list--image-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.12);
}


/* =====================================================
   商品画像
   ===================================================== */
.product__list--image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}


/* =====================================================
   商品タイトル
   ===================================================== */
.product__list--image-wrapper h3 {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.5;
    color: #222;
    margin-top: 4px;
}


/* =====================================================
   説明テキスト
   ===================================================== */
.product__list--image-wrapper p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
}


/* =====================================================
   価格ブロック（最後の p を価格として強調）
   ===================================================== */
.product__list--image-wrapper p:last-of-type {
    margin-top: 8px;
    padding-top: 12px;

    border-top: 1px solid #e6e6e6;

    font-size: 0.95rem;
    font-weight: 600;
    color: #ff6161;
}



.tour-title {
    text-align: center;
    margin: 80px auto 40px;
}

/* 見出し */
.tour-title h2 {
    font-family:
        "Noto Serif JP",
        "Hiragino Mincho ProN",
        serif;

    font-size: 2rem;
    font-weight: 500;
    letter-spacing: .12em;

    color: #2f3a40;
    margin-bottom: 8px;
}

/* サブ情報 */
.tour-title p {
    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        sans-serif;

    font-size: 1rem;
    letter-spacing: .2em;
    text-transform: uppercase;

    color: #7a8790;
    /* 少し薄め */
}

.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* はみ出し防止 */
    margin-top: 40px;
}

/* ===== スライド列 ===== */
.slides {
    display: flex;
    transition: transform 0.6s ease;
    will-change: transform;
}

/* ===== 各スライド ===== */
.slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 24px 16px;
}

/* 見出し */
.slide h2 {
    font-size: 1.2rem;
    margin-bottom: 0.8em;
    line-height: 1.4;
}

/* テキスト */
.slide p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
}

/* ===== 矢印ボタン ===== */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(9, 50, 253, 0.8);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 36px;
    text-align: center;
    z-index: 5;
}

.slider-btn.prev {
    left: 8px;
}

.slider-btn.next {
    right: 8px;
}

/* ===== ドット ===== */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.slider-dots button {
    width: 18px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #f1ffff;
    cursor: pointer;
}

.slider-dots button.active {
    background: #236cff;
}

/* =====================================================================
   スクロール連動 表示アニメーション
   ===================================================================== */


/* ---------------------------------------------------------------------
   reveal：空気感重視の「ゆっくりフェード」
   ・背景・セクション全体向け
   ・存在感はあるが動きは最小限
   --------------------------------------------------------------------- */
.reveal {
    /* 初期状態：透明 */
    opacity: 0;

    /* ほぼ動かさず、わずかにズラすことで“生きた感じ”を出す */
    transform: translateY(1px);

    /* 表示までの変化を滑らかに */
    transition:
        opacity 2s ease,
        transform 3s ease;
}

/* reveal：表示状態 */
.reveal.is-visible {
    /* 完全に表示 */
    opacity: 1;

    /* 元の位置に戻す */
    transform: translateY(0);
}


/* ---------------------------------------------------------------------
   fadein：視線誘導用の「分かりやすいフェード」
   ・カード、画像、テキスト単体向け
   ・動きがはっきりしていてテンポが良い
   --------------------------------------------------------------------- */

/* フェードイン初期状態 */
.fadein {
    /* 非表示 */
    opacity: 0;

    /* 下から持ち上がるような動き */
    transform: translateY(30px);

    /* reveal より短く、キビキビした動き */
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

/* fadein：表示状態 */
.fadein.is-show {
    /* 表示 */
    opacity: 1;

    /* 元の位置へ */
    transform: translateY(0);

    /*
     * 他の装飾（霧・雨・背景）より前に出す
     * 文字やカードの視認性を確保
     */
    position: relative;
    z-index: 5;
}

/*
/*
/*
 * =====================================================================
 * フッター：雨（水面）＋文字レイヤー構成
 *
 * レイヤー構造（下 → 上）
 *  1. footer 背景
 *  2. #raindrop-footer        …… raindrops.js の水面キャンバス
 *  3. #raindrop-footer::before… 水面の質感を足すグラデーション
 *  4. .footer-content         …… フッター文字（最前面）
 *
 * ポイント
 *  - 水面は画面幅いっぱいに描画（右端欠け対策済）
 *  - 文字は必ず可読性を優先
 *  - クリック・選択などの操作は一切妨げない
 * =====================================================================
 */


/* ---------------------------------------------------------------------
   フッター全体（レイヤーの基準）
   --------------------------------------------------------------------- */
footer {
    /* 水面・擬似要素配置の基準にする */
    position: relative;

    /* 雨・水面と馴染む半透明の背景色 */
    background: #2f5f775c;

    /* raindrops やグラデーションのはみ出しを隠す */
    overflow: hidden;
}


/* ---------------------------------------------------------------------
   raindrops 水面レイヤー
   --------------------------------------------------------------------- */
#raindrop-footer {
    /*
     * absolute にすることで footer 内に固定表示
     * （スクロールに追従）
     */
    position: absolute;
    top: 0;

    /*
     * ▼ 右端欠け対策
     *  - left をマイナス
     *  - width を viewport 幅 + α
     *  → Safari / Chrome 両対応
     */
    left: -2px;
    width: calc(100vw + 4px);

    /* 水面の高さ */
    height: 200px;

    /* マウス操作を完全に透過 */
    pointer-events: none;

    /* フッター文字より背面 */
    z-index: 1;

    /* 擬似要素（質感レイヤー）の基準 */
    overflow: hidden;
}


/* ---------------------------------------------------------------------
   水面の質感を足すグラデーションレイヤー
   --------------------------------------------------------------------- */
#raindrop-footer::before {
    /* 擬似要素を表示させる */
    content: "";

    /* raindrop-footer 全体に重ねる */
    position: absolute;
    inset: 0;

    /* 操作を邪魔しない */
    pointer-events: none;

    /*
     * 水面グラデーション
   
     */
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 1));

    /* raindrops 表現の上に重ねる */
    z-index: 0;

    /*
     * overlay 合成で
     * 水面と背景を自然に馴染ませる
     */
    mix-blend-mode: overlay;
}


/* ---------------------------------------------------------------------
   フッター文字（最前面）
   --------------------------------------------------------------------- */
.footer-content {
    /* 水面・グラデーションより前 */
    position: relative;
    z-index: 2;

    /* 文字配置 */
    text-align: center;
    padding: 40px 0;

    /*
     * 水面があっても可読性を保つため
     * 白背景を敷く
     */
    background: #ffffff;
    color: #555555;
}

/*
 * ================================================================
 * メディアクエリ：PC向け（768px以上）
 * ================================================================
 */
@media (min-width: 768px) {

    /* ============================================================
       PC共通
       ============================================================ */

    /* マップ／リスト切り替え（PC） */
    .map-section {
        display: block;
    }

    .spot-list {
        display: none;
    }

    /* 横スクロール防止 */
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* ヒーローエリア（PC） */
    .hero {
        min-height: 80vh;
        margin-top: 72px;
    }

    /* ヘッダー */
    .header-inner {
        padding: 18px 32px;
    }

    /* ナビゲーション（PC） */
    .global-nav {
        display: flex;
        align-items: center;
    }

    .hamburger {
        display: none;
    }

    .drawer,
    .drawer-backdrop {
        display: none;
    }

    /* ヒーロービデオ（PC） */
    .hero-video {
        display: block;
    }

    /* スライダー（PC） */
    .slide {
        min-width: 40%;
        flex: 0 0 40%;
    }

    .slides {
        gap: 18px;
    }

    /* ============================================================
       PC：カード
       ============================================================ */

    /* カード全体：横並び */
    .card-w {
        display: flex;
        flex-direction: row;
        align-items: start;
        gap: 40px;
        height: 600px;
    }

    /* カードテキスト：縦書き */
    .card-text {
        writing-mode: vertical-rl;
        /* 右→左 */
        text-align: start;
        width: auto;
        height: 100%;
    }

    /* カード画像（PC） */
    .card-img img {
        width: 320px;
        height: auto;
    }
}

/* ================================================================
   ロンドンマップ画像（共通）
   ================================================================ */
.london-map {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*
 * ================================================================
 * メディアクエリ：スマホ向け（767px以下）
 * ================================================================
 */
/* =====================================================
   スライダー（ツアー）モバイル最適化
   ===================================================== */
@media (max-width: 767px) {
    .product__list--image-wrapper {
        padding: 14px;
        border-radius: 14px;
    }

    .product__list--image-wrapper h3 {
        font-size: 1rem;
    }

    .product__list--image-wrapper p {
        font-size: 0.85rem;
    }
}

@media (max-width: 767px) {

    /* クリック誘導ヒント */
    .click-hint {
        display: none;
    }

    /* カード：縦並び（SP） */
    .card-w {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 auto;
    }

    .card-text {
        writing-mode: horizontal-tb;
        text-align: left;
        width: 100%;
    }

    /* マップ／リスト切り替え（SP） */
    .map-section {
        display: none;
    }

    .spot-list {
        display: grid;
        gap: 32px;
    }
}







/*ーーーーーーーーーーーーーーーー*/
.scroll-indicator {
    display: inline-block;
    font-size: 1.5rem;
    padding-top: 70px;
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    color: #c32408c6;
    z-index: 300000;
}

.scroll-indicator::before {
    animation: scroll 3.5s infinite;
    border: solid #0a1b9d;
    border-width: 0 0 1px 1px;
    content: "";
    display: inline-block;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    transform: rotate(135deg);
    width: 20px;
    height: 20px;
}

@keyframes scroll {
    0% {
        transform: rotate(-45deg) translate(0, 0);
    }

    80% {
        transform: rotate(-45deg) translate(-30px, 30px);
    }

    0%,
    80%,
    100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}






.scroll-rain {
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #000000;
    font-size: 12px;
    letter-spacing: 0.2em;
    z-index: 600000;
}

.scroll-rain::before {
    content: "";
    display: block;
    width: 2px;
    height: 48px;
    margin: 0 auto 10px;

    background-image: repeating-linear-gradient(to bottom,
            rgba(105, 119, 247, 0.9)3px,
            rgb(80, 155, 221)3px,
            transparent 10px,
            transparent 10px);

    animation: rain-drop 3.5s infinite ease-in-out;
}

@keyframes rain-drop {

    0%,
    80%,
    100% {
        opacity: 0.3;
    }

    40% {
        opacity: 1;
    }
}






/* ================================
   カーソル位置に出現する水滴エフェクト
   JSで動的に生成される要素用
   ================================ */
.cursor-drop {
    position: fixed;
    /* 画面基準で配置（スクロールしてもズレない） */
    z-index: 50000;
    /* 他要素の上に必ず表示させる */
    width: 10px;
    /* 水滴の横幅 */
    height: 10px;
    /* 水滴の高さ */
    border-radius: 90% 50%;
    /* 完全な円ではなく、少し歪ませて水滴感を出す */
    pointer-events: none;
    /* マウス操作を邪魔しない（超重要） */
    background: rgba(170, 191, 255, 0.219);
    /* 薄い水色＋半透明で雨粒表現 */
    transform: translate(-50%, -50%);
    /* left/top を中心基準に合わせる */
    animation: drip 2s ease-out forwards;
    filter: blur(0.4px);
    /* 落ちて消えるアニメーション */
}

/* ================================
   水滴が落ちて消える動き
   ================================ */
@keyframes drip {

    /* 出現直後 */
    0% {
        opacity: 0.8;
        /* はっきり見える状態 */
        transform: translate(-50%, -50%) scale(1);
        /* 元の位置・サイズ */
    }

    /* 消える直前 */
    100% {
        opacity: 0;
        /* フェードアウト */
        transform: translate(-50%, 50px) scale(0.3);
        /* 少し下に落ちながら小さくなり、滴るように消える */
    }

}

/* 修正パーと */
.form label:nth-of-type(1),
.form label:nth-of-type(2) {
    max-width: 100%;
}

@media (min-width: 768px) {

    .form label:nth-of-type(1),
    .form label:nth-of-type(2) {
        max-width: 320px;
    }
}

.hero-title {

    text-shadow:
        0 0 6px rgb(255, 255, 255),
        0 0 16px rgb(255, 255, 255),
        0 0 32px rgb(246, 255, 255),
        0 0 46px rgb(255, 255, 255);

}

button.btn.primary {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 200px;
    height: 50px;

    margin: 40px auto 0;
    /* ← 横中央確定 */

    color: #000;
    border: 1px solid rgba(255, 255, 255, 0.929);
    background: #eeedfff8;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
}

/* マップのピン*/

.map-point {
    position: absolute;
    width: 28px;
    height: 28px;

    background: #ee4a63ba;
    /* Googleマップ赤っぽい */
    border-radius: 50% 50% 50% 0;
    transform: translate(-50%, -100%) rotate(-45deg);

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    border: none;
}


.map-point::after {
    content: attr(data-label);
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
    font-weight: bold;
    color: #f33854;
}

.map-point:hover {
    transform: translate(-50%, -100%) rotate(-45deg) scale(1.1);
}

.map-point:active {
    transform: translate(-50%, -100%) rotate(-45deg) scale(0.95);
}

.map-point::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(230, 0, 35, 0.4);
    border-radius: 50%;
    animation: pulse 2s infinite;
    z-index: -1;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    70% {
        transform: scale(2);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*最終変更*/
.product__list--image-wrapper {
    font-family: "Noto Sans JP", sans-serif;
}