@charset "UTF-8";

/* --- 共通設定・フォント --- */
:root {
    --font-en: 'Cormorant Garamond', serif;
    --font-ja-title: 'Shippori Mincho', serif;
    --font-ja-body: 'Noto Sans Javanese', sans-serif;
    --bg-light-green: #e9f5e9; /* コンセプトと同じ基本の背景色 */
    --main-green: #a3c9a8;
    --dark-green: #2f4532;
    --brown: #4a3621;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
body {
    font-family: var(--font-ja-body);
    line-height: 1.8;
    color: #333;
    /* サイト全体のベースを薄緑に統一 */
    background-color: var(--bg-light-green); 
    overflow-x: hidden;
}

/* --- 1. ヒーローセクション (ここは画像が全画面) --- */
.hero {
    width: 100%;
    overflow: hidden;
}

.hero-image-container {
    position: relative;
    width: 100vw;
    line-height: 0;
}

.hero-main-img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-logo {
    width: 180px;
    position: absolute;
    top: 40px;
    left: 40px;
}

.hero-logo img {
    width: 100%;
}

.hero-catchphrase {
    position: absolute;
    top: 70px;
    right: 5%;
    font-family: var(--font-ja-title);
    font-size: 3.5vw;
    color: var(--brown);
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.15em;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 1);
}
/* --- コンセプト上の注釈 --- */
.demo-notice {
    font-size: 0.75rem;
    color: #8a7e72;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}
/* --- 2. コンセプトセクション --- */
.concept {
    padding: 100px 20px;
    text-align: center;
}

.concept-header-box {
    background-color: var(--main-green);
    display: inline-block;
    padding: 30px 60px;
    border-radius: 25px;
    margin-bottom: 50px;
}

.section-title {
    font-family: var(--font-ja-title);
    font-size: 1.8rem;
    color: var(--dark-green);
    margin-bottom: 10px;
}

.concept-body {
    max-width: 800px;
    margin: 0 auto 60px;
    line-height: 2.2;
}

.concept-body p {
    margin-bottom: 30px;
    color: var(--brown);
}

.concept-images {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 50px;
}

.circle-img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
    border: 6px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* --- 注意事項ボックス（装飾フェーズ完全再現版） --- */
.concept-info-card {
    background-color: #ffffff;
    /* 枠線を少し太くし、色をデザインに合わせる */
    border: 2px solid #a3c9a8; 
    border-radius: 25px;       /* 角丸をより強調 */
    padding: 50px 40px;        /* 上下の余白を広げてゆったりと */
    max-width: 800px;          /* ボックスの横幅 */
    margin: 60px auto 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    
    /* 中身を中央に寄せる */
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.info-card-title {
    font-family: var(--font-ja-title);
    font-size: 1.4rem;         /* タイトルを少し大きく */
    color: #4a3621;            /* 濃い茶色 */
    margin-bottom: 30px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;     /* 中身の幅に合わせる */
    text-align: left;          /* 文章は左揃え */
}

.info-list li {
    font-family: var(--font-ja-body);
    font-size: 1.05rem;
    color: #4a3621;            /* 文字色を茶系に合わせる */
    margin-bottom: 25px; /* 文章が増えたので間隔を広げます */
    line-height: 1.6;
}
.info-sub {
    display: block;      /* 改行して表示 */
    font-size: 0.9rem;   /* 少し小さく */
    color: #6d8c5d;      /* 優しい緑色（または茶色でも◎） */
    margin-top: 5px;     /* 上の文との隙間 */
    font-weight: normal; /* 太字にせずスッキリと */
}
/* リストの先頭の「・」をデザインに合わせる */
.info-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #a3c9a8;            /* 記号を緑色に */
    font-weight: bold;
}

/* --- 3. 動物紹介 (背景色をコンセプトと統一) --- */
.animals-intro {
  background-color: var(--bg-light-green);
    /* 下側の余白を 0 にして、メッセージとの隙間を最小限にします */
    padding: 60px 20px 0px;
}

.animal-item {
    display: flex;
    flex-wrap: wrap; /* タイトルを一行目に、画像と説明を二行目にするため */
    align-items: stretch; /* 画像と説明ボックスの高さを揃える */
    max-width: 1100px;
    margin: 0 auto 100px;
    gap: 0 40px; /* 横の隙間は40px、縦は一旦0 */
}

/* 1. タイトルを一番上に配置する設定 */
.animal-desc h3 {
    width: 100%; /* 親のflexの中で幅いっぱいに */
    order: -1;   /* 強制的に一番上に持ってくる */
    text-align: left;
    font-size: 2rem;
    color: var(--dark-green);
    margin-bottom: 25px;
    padding-left: 0;
}

/* 2. 画像エリアの調整 */
.animal-image {
    flex: 1.2;
    display: flex; /* 高さを揃えるための設定 */
}

.animal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 高さが伸びても画像が歪まないように */
    border-radius: 20px;
}

/* 3. 説明文ボックスの調整 */
.animal-desc {
    flex: 1;
    background-color: #f9fff0;
    padding: 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 中のテキストを上下中央に */
    text-align: center;      /* テキストを左右中央に */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    
    /* タイトルの位置を調整するための相対配置 */
    position: relative;
}

.animal-item.reverse {
    /* flex-direction: row-reverse; でHTMLの並び順に関わらず左右を逆にします */
    flex-direction: row-reverse; 
    position: relative; /* タイトルの基準にするため追加 */
}
/* 反転時のタイトルの位置調整 */
.animal-item.reverse .animal-desc h3 {
    position: absolute;
    top: -60px;    /* ボックスより上に飛ばす */
    left: 0;        /* ★ここを0にすることで左端（文章ボックスの左端）に合わせる */
    right: auto;    /* 右固定を解除 */
    width: 100%;    /* 幅をいっぱいに広げる */
    text-align: left; /* 文字を左寄せにする */
    margin: 0;
}


/* HTML構造上、h3がanimal-descの中にあるので、
   h3だけをボックスの外（画像の上）に飛ばす魔法のコード */
.animal-item .animal-desc h3 {
    position: absolute;
    top: -60px; /* ボックスの上に配置 */
    left: 0;
    margin: 0;
}


/* 段落ごとの調整 */
.desc-title {
    font-weight: bold;
    color: #6d8c5d;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.desc-text {
    line-height: 2;
    color: #444;
}
/* --- 動物紹介下のメッセージ --- */
.closing-message {
   background-color: var(--bg-light-green);
    padding: 40px 20px 80px; /* 上の余白をさらに詰め、下に余裕を */
    text-align: center;
}
.closing-message-inner {
    /* ★重要：文字の横幅を制限して、視線が散らばらないようにする */
    max-width: 600px; 
    margin: 0 auto;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.4); /* ほんの少し白を混ぜて文字を浮かす */
    border-radius: 30px;
    position: relative;
}
/* 飾り：手書き風の引用符を配置（「ここを読んで」のサイン） */
.closing-message-inner::before {
    content: "“";
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 4rem;
    color: var(--main-green);
    font-family: serif;
    opacity: 0.3;
}
.closing-message p {
   font-family: var(--font-ja-title);
    font-size: 1.25rem; /* 読みやすく少し大きく */
    color: var(--brown);
    line-height: 2.3; /* 行間をゆったり取って「読む」リズムを作る */
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}
/* ★しまりを持たせるための装飾：上下に薄い線を入れる */

.closing-message p:last-child {
    margin-bottom: 0;
}
/* --- 5. ご利用の流れセクション --- */
.usage-flow {
    background-color: #fff4e6; /* 薄いパステルオレンジ */
    padding: 100px 20px;
    text-align: center;
}

/* セクションタイトル（共通設定がある場合は不要ですが念のため） */
.usage-flow .section-title {
    margin-bottom: 60px;
    font-size: 2rem;
    color: var(--brown);
}

/* ステップ4つの並び */
.flow-steps {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 80px;
    flex-wrap: wrap; /* スマホで折り返す設定 */
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
}

/* 写真と数字バッジを包むコンテナ */
.step-image-wrap {
    position: relative; /* 数字を重ねる基準 */
    width: 160px;
    height: 160px;
    margin-bottom: 20px;
}

/* 〇で配置する写真 */
.step-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    
    /* 1. 白枠を太く (5px → 8px) */
    border: 8px solid #fff; 
    
    /* 2. 影を濃く、シャープに (rgba(0,0,0,0.1) → 0.2) */
    box-shadow: 0 6px 20px rgba(0,0,0,0.2); 
    
    /* アニメーション用の設定（任意） */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-item:hover .step-img {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

/* 数字バッジ（左上に重ねる） */
.step-circle {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 50px;
    height: 50px;
    background-color: #ff9f43; /* オレンジ */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: bold;
    font-family: var(--font-en); /* 英字フォント */
    border: 3px solid #fff;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.15);
    z-index: 1;
}

/* ステップのテキスト */
.step-text {
    font-family: var(--font-ja-title);
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--brown);
    margin-top: 10px;
}

/* --- 安心のお約束ボックス --- */
.safety-box {
    background-color: #fffde6; /* パステルイエロー */
    border: 2px dashed #f1c40f; /* 黄色の点線枠 */
    border-radius: 30px;
    padding: 50px 40px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    align-items: center; /* 中身を中央へ */
}

.safety-title {
    font-family: var(--font-ja-title);
    font-size: 1.5rem;
    color: #d35400; /* 濃いオレンジ色 */
    margin-bottom: 30px;
    font-weight: bold;
}

.safety-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left; /* 文章は左揃え */
    display: inline-block;
}

.safety-list li {
    font-family: var(--font-ja-body);
    font-size: 1.05rem;
    color: var(--brown);
    margin-bottom: 15px;
    position: relative;
    padding-left: 1.8em;
    line-height: 1.7;
}

/* 文頭の「〇」の装飾 */
.safety-list li::before {
    content: "〇";
    position: absolute;
    left: 0;
    color: #f1c40f;
    font-weight: bold;
    font-size: 1.1rem;
}
/* --- 6. 料金プランセクション --- */
.pricing {
   background-color: var(--bg-light-green); 
    padding: 100px 20px 20px; /* 3番目の値を 100px → 20px に減らします */
    width: 100%;
}
.pricing .section-title {
    text-align: center; /* 文字を中央へ */
    width: 100%;        /* 幅を100%にして中央寄せを機能させる */
    margin-bottom: 60px;
    display: block;      /* 確実にブロック要素として扱う */
}
.pricing-flex {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto 40px; /* ボックス全体を中央へ */
}

/* プランボックス（薄い黄色） */
.price-box {
    background-color: #fffde6; /* パステルイエロー */
    border-radius: 30px;
    padding: 40px;
    flex: 1;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #f1e7bc;
}

.price-type {
    font-family: var(--font-ja-title);
    font-size: 1.5rem;
    color: #d35400;
    margin-bottom: 10px;
}

.drink-include {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}

.price-main {
    margin-bottom: 20px;
    border-bottom: 2px dashed #f1e7bc;
    padding-bottom: 20px;
}

.price-main .amount {
    font-family: var(--font-en);
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--brown);
}

.price-main .tax, .price-main .unit {
    font-size: 1rem;
    color: var(--brown);
}

/* アイコンエリア */
.price-icons {
    font-size: 1.8rem;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.price-icons .plus {
    font-size: 1.2rem;
    color: #ccc;
}

.price-detail {
    margin-bottom: 25px;
    font-size: 1rem;
    color: #4a3621;
}

.price-detail .note {
    font-size: 0.8rem;
    color: #999;
}

/* オプションエリア */
.price-option {
    background-color: rgba(255, 255, 255, 0.6);
    padding: 15px;
    border-radius: 15px;
}

.option-tag {
    font-weight: bold;
    font-size: 0.9rem;
    color: #e67e22;
    margin-bottom: 5px;
}

/* ボックスをまたぐ追加ドリンク案内 */
.additional-drink {
    max-width: 930px; /* ボックス2つ分の目安 */
    margin: 0 auto 20px ;
    background-color: #fff;
    padding: 15px;
    border-radius: 50px;
    text-align: center;
    border: 1px solid #f1e7bc;
}

.additional-drink p {
    color: var(--brown);
    font-weight: bold;
}

.additional-drink span {
    color: #d35400;
    font-size: 1.2rem;
}

/* --- 7. 予約セクション --- */
.reservation {
    background-color: var(--bg-light-green);
    /* 1番目の値を 80px → 0px にして、料金プランとの隙間を最小限にします */
    padding: 0px 20px 100px; 
    text-align: center;
}

.reservation-box {
    background-color: #fff;
    border-radius: 40px;
    padding: 60px 40px;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.reservation-title {
    font-family: var(--font-ja-title);
    font-size: 1.8rem;
    color: var(--brown);
    margin-bottom: 20px;
}

.reservation-text {
    font-size: 1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* ボタンレイアウト */
.reservation-buttons {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 30px;
}

/* 共通ボタン要素 */
.btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 20px 40px;
    border-radius: 50px;
    transition: all 0.3s ease;
    width: 320px;
    box-shadow: 0 6px 0 rgba(0,0,0,0.1); /* 立体感 */
    position: relative;
    top: 0;
}

.btn:hover {
    top: 3px; /* 押し込んだような動き */
    box-shadow: 0 3px 0 rgba(0,0,0,0.1);
}

.btn-sub {
    font-size: 0.8rem;
    margin-bottom: 2px;
    opacity: 0.9;
}

.btn-main {
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* メイン予約：テラコッタオレンジ */
.btn-primary {
    background-color: #d35400;
    color: #fff;
}
.btn-primary:hover {
    background-color: #e67e22;
}

/* 当日予約：オリーブグリーン */
.btn-secondary {
    background-color: #6d8c5d;
    color: #fff;
}
.btn-secondary:hover {
    background-color: #82a373;
}

.reservation-note {
    font-size: 0.85rem;
    color: #999;
}

/* --- 8. フッターセクション --- */
.footer {
    background-color: #a3c9a8; /* コンセプトボックスと同じ緑 */
    padding: 60px 20px 30px;
    text-align: center;
    color: #fff; /* 基本の文字色は白 */
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-bottom: 30px;
}

/* 英語ロゴ：大きく、エレガントに */
.footer-logo .en {
    font-family: var(--font-en);
    font-size: 3.5rem; /* 大きめに配置 */
    line-height: 1;
    letter-spacing: 0.05em;
}

/* 日本語ロゴ：少し控えめに */
.footer-logo .ja {
    font-family: var(--font-ja-title);
    font-size: 1.2rem;
    letter-spacing: 0.3em;
    font-weight: bold;
    margin-left: 0.3em; /* 字間を空けた分を調整 */
}

/* コピーライト */
.copyright {
    font-size: 0.8rem;
    opacity: 0.8;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 20px;
    display: inline-block;
}

/* --- フッターの架空店舗ラベル --- */
.demo-label {
    font-size: 0.8rem; /* あえて小さくすることで「注釈」らしさを出します */
    font-weight: normal;
    margin-left: 8px;
    opacity: 0.8;
    vertical-align: middle;
}

/* 英語ロゴ内の small タグ用調整 */
.footer-logo .en .demo-label {
    font-size: 1.2rem; /* 英語ロゴが大きいので、これくらいがバランス良し */
}

/* --- 追従予約ボタン --- */
.floating-btn {
   position: fixed;
    bottom: 30px;
    
    /* ★ 1240px以下の時は、右端から20pxの位置に必ず表示する */
    right: 90px; 
    
    width: 90px;
    height: 90px;
    background-color: #d35400;
    color: #fff;
    text-decoration: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    
    /* レースのような点線装飾 */
    border: 3px solid #fff;
    outline: 2px dashed rgba(255, 255, 255, 0.7);
    outline-offset: -6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.floating-btn-text {
    font-family: var(--font-ja-title);
    font-size: 1rem;
    writing-mode: horizontal-tb;
    letter-spacing: 0.1em;
    margin-right: -0.1em; /* センター微調整 */
    text-align: center;
    line-height: 1.2;
    display: block;/
}

/* マウスを乗せた時の動き */
.floating-btn:hover {
   transform: scale(1.05) translateY(-5px); /* 傾けずに、少し大きく＆浮かせる */
    background-color: #e67e22;
}
/* ==============================================
   mofu mofu - メディアクエリ (作り直し版)
   ブレイクポイント:
     1300px: floatingボタンを右端固定に切り替え
     1000px: タブレット対応
      768px: スマホ対応
      375px: 小型スマホ対応
   ============================================== */


/* =====================
   1300px以下（ワイド→中間）
   floating-btnの位置だけ調整
   ===================== */
@media (max-width: 1300px) {
    .floating-btn {
        /* ビューポート幅に合わせて自然に右端へ移動 */
        right: calc(50% - 550px);
        width: 100px;
        height: 100px;
        outline-width: 3px;
        outline-offset: -8px;
    }
}


/* =====================
   1000px以下（タブレット）
   ===================== */
@media (max-width: 1000px) {

    /* --- floating-btn --- */
    .floating-btn {
        bottom: 20px;
        right: 15px;
        width: 75px;
        height: 75px;
    }
    .floating-btn-text {
        font-size: 0.85rem;
    }

    /* --- hero --- */
    .hero-catchphrase {
        font-size: 2.5vw;
    }

    /* --- concept --- */
    .concept-header-box {
        padding: 25px 40px;
    }

    /* --- animals --- */
    .animal-item {
        gap: 0 25px;
        margin-bottom: 80px;
    }

    /* --- pricing --- */
    .pricing-flex {
        gap: 20px;
    }

    /* --- reservation --- */
    .btn {
        width: 260px;
        padding: 18px 30px;
    }
}


/* =====================
   768px以下（スマホ）
   ===================== */
@media (max-width: 768px) {

    /* -------
       Hero
    ------- */
    .hero-logo {
        width: 90px;
        top: 15px;
        left: 15px;
    }
    .hero-catchphrase {
        font-size: 3.8vw;
        top: 20px;
        right: 15px;
        letter-spacing: 0.08em;
    }

    /* -------
       共通
    ------- */
    .section-title {
        font-size: 1.3rem;
    }

    /* -------
       Concept
    ------- */
    .concept {
        padding: 60px 15px;
    }
    .concept-header-box {
        padding: 20px;
        width: 100%;
        border-radius: 15px;
    }
    .concept-images {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .circle-img {
        width: 100px;
        height: 100px;
        border-width: 3px;
    }
    .concept-info-card {
        padding: 30px 20px;
        width: 95%;
        border-radius: 15px;
    }
    .info-card-title {
        font-size: 1.05rem;
    }
    .info-list li {
        font-size: 0.95rem;
    }
    .info-sub {
        font-size: 0.85rem;
    }

    /* -------
       Animals
       h3がposition:absoluteのためスマホでは解除する
    ------- */
    .animals-intro {
        padding: 40px 15px 0;
    }
    .animal-item {
        flex-direction: column;
        margin-bottom: 60px;
        gap: 0;
        position: relative;
        padding-top: 0;
    }
    /* PC用のabsolute配置を解除 */
    .animal-item .animal-desc h3 {
        position: static;
        text-align: center;
        font-size: 1.6rem;
        margin-bottom: 15px;
        width: 100%;
        order: -1;
        top: auto;
        left: auto;
    }
    .animal-image {
        width: 100%;
        margin-bottom: 0;
    }
    .animal-image img {
        border-radius: 15px;
        height: 220px;
    }
    .animal-desc {
        width: 100%;
        padding: 25px 20px;
        border-radius: 0 0 15px 15px;
        text-align: left;
    }

    /* reverse時の打ち消し（スマホでは画像上・テキスト下に戻す） */
    .animal-item.reverse {
        flex-direction: column;
    }
    .animal-item.reverse .animal-desc h3 {
        position: static;
        text-align: center;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        margin: 0 0 15px;
    }

    /* -------
       Closing message
    ------- */
    .closing-message {
        padding: 30px 15px 60px;
    }
    .closing-message p {
        font-size: 1.05rem;
        line-height: 2;
    }

    /* -------
       Usage flow
    ------- */
    .usage-flow {
        padding: 60px 15px;
    }
    .usage-flow .section-title {
        margin-bottom: 40px;
    }
    .flow-steps {
        gap: 25px 15px;
        margin-bottom: 50px;
    }
    .step-item {
        width: 45%; /* 2列 */
    }
    .step-image-wrap {
        width: 130px;
        height: 130px;
    }
    .step-circle {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }

    /* -------
       Safety box
    ------- */
    .safety-box {
        padding: 30px 20px;
        width: 95%;
        border-radius: 20px;
    }
    .safety-title {
        font-size: 1.2rem;
    }

    /* -------
       Pricing
    ------- */
    .pricing {
        padding: 60px 15px 20px;
    }
    .pricing-flex {
        flex-direction: column;
        align-items: center;
    }
    .price-box {
        width: 100%;
        max-width: 100%;
        padding: 30px 20px;
    }
    .additional-drink {
        width: 100%;
        border-radius: 15px;
        margin-bottom: 0;
    }

    /* -------
       Reservation
    ------- */
    .reservation {
        padding: 0 15px 60px;
    }
    .reservation-box {
        padding: 40px 20px;
        border-radius: 25px;
    }
    .reservation-buttons {
        flex-direction: column;
        align-items: center;
    }
    .btn {
        width: 100%;
        max-width: 300px;
        padding: 15px 20px;
    }
    .btn-main {
        font-size: 1.1rem;
    }

    /* -------
       Footer
    ------- */
    .footer {
        padding: 50px 20px 20px;
    }
    .footer-logo .en {
        font-size: 2.5rem;
    }
    .footer-logo .ja {
        font-size: 1rem;
    }
    .footer-logo .en .demo-label {
        font-size: 0.9rem;
    }

    /* -------
       floating-btn（1000pxと重複なし・ここでは変化なし）
    ------- */
}


/* =====================
   375px以下（小型スマホ: iPhone SE等）
   ===================== */
@media (max-width: 375px) {

    /* Hero */
    .hero-logo {
        width: 75px;
        top: 10px;
        left: 10px;
    }
    .hero-catchphrase {
        font-size: 4.2vw;
        top: 15px;
        right: 10px;
    }

    /* Concept */
    .concept {
        padding: 50px 12px;
    }
    .section-title {
        font-size: 1.15rem;
    }
    .circle-img {
        width: 85px;
        height: 85px;
    }
    .info-card-title {
        font-size: 0.95rem;
    }
    .info-list li {
        font-size: 0.88rem;
    }

    /* Animals */
    .animal-image img {
        height: 180px;
    }
    .animal-desc {
        padding: 20px 15px;
    }
    .animal-item .animal-desc h3 {
        font-size: 1.4rem;
    }
    .desc-title {
        font-size: 1rem;
    }
    .desc-text {
        font-size: 0.9rem;
    }

    /* Flow */
    .step-item {
        width: 45%;
    }
    .step-image-wrap {
        width: 110px;
        height: 110px;
    }
    .step-text {
        font-size: 1rem;
    }

    /* Pricing */
    .price-box {
        padding: 25px 15px;
    }
    .price-main .amount {
        font-size: 2rem;
    }

    /* Reservation */
    .reservation-box {
        padding: 30px 15px;
    }
    .btn {
        max-width: 100%;
    }

    /* Footer */
    .footer-logo .en {
        font-size: 2rem;
    }

    /* floating-btn */
    .floating-btn {
        width: 65px;
        height: 65px;
        bottom: 15px;
        right: 10px;
    }
    .floating-btn-text {
        font-size: 0.78rem;
    }
}