/* 現代的で美しいデザインのためのリセットと基本設定 */
html {
    /* 画面幅に応じてフォントサイズを可変にする（スマホ375px幅で16px基準）
       画面が768pxになった時（約32.7px）で拡大がストップするよう制限 */
    font-size: clamp(10px, 4.266vw, 32.76px);
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #ffffff;
    /* リッチなダーク系の背景色で画像を際立たせる */
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    font-size: 1rem;
    /* htmlの基準サイズを引き継ぐ */
}

.bg-color1 {
    background: linear-gradient(to bottom, transparent 1.25rem, rgba(110, 205, 227, 0.15) 1.25rem);
}

/* =========================================
   ユーティリティクラス (汎用margin調整)
   HTMLのclassに直接書き込んで余白をサクッと調整できます
   例: class="faq-item mt-20" とすると上に20px空く
   ========================================= */

/* Margin Top (上余白) */
.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-25 {
    margin-top: 25px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-50 {
    margin-top: 50px !important;
}

.mt-60 {
    margin-top: 60px !important;
}

.mt-80 {
    margin-top: 80px !important;
}

.mt-100 {
    margin-top: 100px !important;
}

.pt-50 {
    padding-top: 50px !important;
}

/* Margin Bottom (下余白) */
.mb-5 {
    margin-bottom: 5px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-25 {
    margin-bottom: 25px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}

.mb-80 {
    margin-bottom: 80px !important;
}

.mb-100 {
    margin-bottom: 100px !important;
}

/* Margin Right (右余白) */
.mr-5 {
    margin-right: 5px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.mr-30 {
    margin-right: 30px !important;
}

/* Margin Left (左余白) */
.ml-5 {
    margin-left: 5px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.ml-15 {
    margin-left: 15px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.ml-30 {
    margin-left: 30px !important;
}

/* 自動中央揃えなどの便利クラス */
.margin-auto {
    margin: auto !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.relative {
    position: relative;
}

/* 少しだけ位置を上げる */
.mt-1 {
    position: relative;
    top: -0.7px;
}

.mt-postion10 {
    position: relative;
    /* 450pxの時に-30pxになるよう可変に設定 (-30/450*100) */
    top: -6.67vw;
}

.mt-postion11 {
    position: absolute;
    /* 450pxの時に-30pxになるよう可変に設定 (-30/450*100) */
    top: 353vw;
    left: 50%;
    transform: translateX(-50%);
}

.mt-postion12 {
    position: absolute;
    top: 208vw;
    left: 50%;
    transform: translateX(-50%);
}

.mt-postion13 {
    position: absolute;
    top: 450vw;
    left: 50%;
    transform: translateX(-50%);
}

/* コンテナの最大幅 768px 以上では固定 */
@media (min-width: 768px) {
    .mt-postion10 {
        top: -51.2px;
    }

    .mt-postion11 {
        top: 2712px;
    }

    .mt-postion12 {
        top: 1603.2px;
    }

    .mt-postion13 {
        top: 3456px;
    }
}


/* ページ全体を構成するコンテナ */
.image-container {
    width: 100%;
    max-width: 768px;
    /* 最大サイズを768pxに設定 */
    background-color: #ffffff;
    /* 立体感を出す影 */
    position: relative;
    /* 読み込み時のフェードイン＆スライドアップアニメーション */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* 貼り付ける画像自体の設定 */
.main-image {
    width: 100%;
    height: auto;
    display: block;
}

.main-image-line {
    width: 90%;
    margin: 0 auto;
}

.logo {
    width: 40%;
    margin: 0 auto;
}

/* アニメーション定義 */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* オプション: お申し込みボタンなどのスタイル (HTMLでコメントアウト解除した場合適用) */
.cta-section {
    padding: 30px 20px;
    text-align: center;
    background-color: #ffffff;
    border-top: 2px solid #f0f0f0;
    border-radius: 0 0 8px 8px;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 50px;
    box-shadow: 0 6px 15px rgba(255, 71, 87, 0.3);
    transition: all 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 71, 87, 0.4);
}

.property-wrapper {
    z-index: 10;
    width: 89%;
    position: absolute;
    top: 105vw;
    left: 50%;
    transform: translateX(-50%);
    overflow: visible;
}

@media (min-width: 768px) {
    .property-wrapper {
        top: 812px;
    }
}

.property-example-swiper {
    overflow: hidden;
}

/* --- 物件カード --- */
.property-card {
    background: #fff;
    border: 0.1875rem solid #b0e0f0;
    border-radius: 10px;
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
}

.card-number {
    text-align: center;
    font-size: 1.125rem;
    color: #6ECDE3;
    margin-bottom: 0.25rem;
    letter-spacing: 0.05em;
}

.card-number span {
    color: #6ECDE3;
    font-family: 'Ledger', serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
}

/* 還元金 */
.cashback {
    text-align: center;
    margin-bottom: 0.8rem;
}

.cashback-text {
    font-size: 1.125rem;
    font-weight: 700;
    color: #333;
}

.cashback-amount {
    font-size: 2.5rem;
    font-weight: 900;
    color: #5bc0de;
    line-height: 1.1;
    letter-spacing: 0.1em;
}

.cashback-unit {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
}

/* 写真グリッド */
.photo-grid {
    display: grid;
    margin-right: 10px;
    margin-left: 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 4.5rem 4.5rem;
    /* ここで行の高さを直接指定します */
    margin-bottom: 1rem;
    overflow: hidden;
}

.photo-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 画像を包むディブ（もしHTMLに残っている場合）の高さも合わせる */
.photo-placeholder {
    height: 100%;
}


/* 所在地 */
.location {
    text-align: left;
    margin-bottom: 0.75rem;
    font-size: 0.6rem;
    color: #6ECDE3;
    line-height: 1.4;
    margin-left: 5%;
    letter-spacing: 0.2em;
    font-weight: 700;
}

.location img {
    width: 3.5%;
}

/* 物件詳細テーブル */
.detail-table {
    width: 95%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    font-size: 0.6rem;
    margin: 0 auto;
}

.detail-table td {
    padding: 0.1rem 0.1rem;
    /* border: 1px solid #ddd; */
}

.detail-table .label-cell {
    background: #6ECDE3;
    color: #fff;
    font-weight: 700;
    font-size: 0.5rem;
    white-space: nowrap;
    text-align: center;
}

.detail-table .value-cell {
    background: #fff;
    color: #6ECDE3;
    font-weight: 500;
}

/* LINEボタン */
.line-btn {
    display: block;
    width: 80%;
    background: #06c755;
    color: #fff;
    text-align: center;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.4rem;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: opacity 0.2s;
    margin: 0 auto;
    margin-top: 1rem;
}

.line-btn:hover {
    opacity: 0.85;
}


/* =========================================
   物件紹介セクション
   ========================================= */
.properties-section {
    background-color: #ffffff;
}

/* 見出し */
.properties-title {
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    color: #111;
    letter-spacing: 0.2em;
    margin-bottom: 0px;
}

/* 「選び放題」のハイライト */
.highlight-blue {
    color: #61c5dd;
    /* 画像の水色に合わせる */
    /* 文字を少し大きく */
}

/* =========================================
   カスタムマーキースライダー（上部物件画像自動流れ）
   ========================================= */
.cs-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 0.625rem 0 1.5625rem;
    margin-bottom: 0.3125rem;
}

.cs-marquee-track {
    display: flex;
    will-change: transform;
}

.cs-marquee-slide.property-card-img {
    flex: 0 0 auto;
    width: calc(33.333% - 0.625rem);
    min-width: 11.25rem;
    margin-right: 0.9375rem;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid gray;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
}

.cs-marquee-slide.property-card-img img {
    width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* =========================================
   カスタム物件カードスライダー
   ========================================= */
.cs-prop-wrapper {
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.cs-prop-track {
    display: flex;
    will-change: transform;
}

.cs-prop-track.animating {
    transition: transform 0.35s ease-out;
}

.cs-prop-item {
    flex: 0 0 77%;
    padding: 0 0.625rem;
}

/* 注意書き */
.properties-notes {
    padding: 0 1.25rem;
    padding-top: 0.625rem;
    color: #444;
    font-size: 0.45rem;
    line-height: 1.6;
}

.properties-notes p {
    margin: 0 0 0.5rem 0;
}


/* =========================================
   FAQセクション (Q2)
   ========================================= */
.faq-section {
    width: 100%;
    margin-top: 40px;
}

.faq-top {
    background-color: #61c5dd;
    position: relative;
    padding: 35px 20px 20px;
    text-align: center;
}

.faq-badge {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: #61c5dd;
    font-size: 1.4rem;
    font-weight: bold;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.faq-woman {
    position: absolute;
    top: -65px;
    left: 10px;
    width: 90px;
    z-index: 10;
}

.faq-title {
    color: white;
    font-size: 1.35rem;
    line-height: 1.5;
    margin: 0;
    letter-spacing: 0.05em;
    font-weight: bold;
}

.faq-bottom {
    background-color: #eaf6f7;
    padding: 20px 15px;
}

.faq-innerbox {
    background-color: white;
    border-radius: 12px;
    padding: 25px 15px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.faq-answer-lead {
    color: #61c5dd;
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 20px;
    letter-spacing: 0.05em;
}

.faq-answer-highlight {
    font-size: 1.35rem;
}

.faq-example-title-wrap {
    margin-bottom: 15px;
}

.faq-example-label {
    display: inline-block;
    background-color: #61c5dd;
    color: white;
    padding: 5px 20px;
    border-radius: 2px;
    font-size: 0.85rem;
    font-weight: bold;
}

.faq-example-heading {
    font-size: 1.8rem;
    font-weight: 900;
    margin: 5px 0 0;
    color: #000;
    letter-spacing: 0.1em;
}

/* FAQ内のスライダー */
.faq-swiper {
    width: 100%;
    padding-bottom: 5px;
}

.swiper-slide.faq-card {
    width: 85%;
    /* 左右のカードが少し見えるように */
    border: 2px solid #61c5dd;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    background: white;
    height: auto;
}

.faq-card-number {
    color: #61c5dd;
    font-size: 1.3rem;
    font-family: serif;
    margin-bottom: 5px;
}

.faq-card-cashback {
    font-size: 1.1rem;
    font-weight: bold;
    color: #111;
    margin-bottom: 10px;
}

.cashback-price {
    font-size: 2rem;
    color: #61c5dd;
    margin: 0 2px;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 10px;
}

.faq-grid img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 2px;
}

.faq-location {
    color: #61c5dd;
    font-size: 0.75rem;
    text-align: left;
    margin-bottom: 15px;
    font-weight: bold;
    line-height: 1.4;
}

.icon-pin {
    display: inline-block;
    margin-right: 3px;
}

.faq-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin-bottom: 15px;
    font-size: 0.75rem;
}

.faq-table th {
    background-color: #61c5dd;
    color: #fff;
    padding: 6px 4px;
    border-radius: 2px;
    font-weight: normal;
    text-align: center;
    width: 25%;
}

.faq-table td {
    color: #61c5dd;
    padding: 6px 4px;
    font-weight: bold;
    background-color: #f7fcfe;
    text-align: left;
    width: 25%;
}

.btn-green {
    display: block;
    background-color: #00ca00;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.05rem;
    padding: 12px;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    margin-top: 5px;
    letter-spacing: 0.05em;
}

.faq-footer {
    margin-top: 35px;
}

.faq-footer-subtitle {
    font-size: 1.05rem;
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 1px solid #111;
    display: inline-block;
    padding-bottom: 5px;
}

.underline-blue {
    color: #61c5dd;
}

.faq-footer-title {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.4;
    margin: 15px 0;
}

.marker-yellow {
    background: linear-gradient(transparent 60%, #ffff00 60%);
    padding: 0 2px;
}

.icon-house {
    width: 28px;
    vertical-align: bottom;
}

.faq-note {
    font-size: 0.65rem;
    color: #555;
    text-align: left;
    line-height: 1.4;
    margin-top: 15px;
}

/* =========================================
   カスタムフォトギャラリーセクション (3段スライダー)
   ========================================= */
.gallery-section {
    background-color: #61c5dd;
    padding: 15px 0;
    overflow: hidden;
    margin-top: -5px;
}

/* 各段のラッパー */
.cs-gallery-row {
    overflow: hidden;
    margin-bottom: 8px;
}

.cs-gallery-row:last-child {
    margin-bottom: 0;
}

/* トラック（アニメーション） */
.cs-gallery-track {
    display: flex;
    will-change: transform;
}

/* スライド（画像）の見た目 */
.cs-gallery-slide {
    flex: 0 0 auto;
    width: 37%;
    max-width: 300px;
    margin-right: 10px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid black;
    box-sizing: border-box;
}

.cs-gallery-slide img {
    width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* アニメーション定義（JS側でどちらかをセット） */
@keyframes cs-scroll-rtl {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes cs-scroll-ltr {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

.cs-gallery-track.rtl {
    animation: cs-scroll-rtl 18s linear infinite;
}

.cs-gallery-track.ltr {
    animation: cs-scroll-ltr 18s linear infinite;
}

.buleback {
    background-color: rgba(110, 205, 227, 0.1);
}

.buleback-notes {
    padding: 0 40px;
    color: #444;
    font-size: 0.55rem;
    line-height: 1.6;
    padding-bottom: 35px;
}

/* =========================================
   利用者様の声セクション
   ========================================= */
.voice-section {
    background-color: #ffffff;
    padding-top: 0px;
    padding-right: 0px;
    position: relative;
    overflow: hidden;
}


.cs-voice-wrapper {
    width: 100%;
    padding: 0 10px 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.cs-voice-track {
    display: flex;
    will-change: transform;
}

.cs-voice-track.animating {
    transition: transform 0.35s ease-out;
}

.cs-voice-slide {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.voice-number {
    color: #61c5dd;
    font-size: 2.2rem;
    font-family: serif;
    margin-bottom: 15px;
    text-align: center;
}

.voice-img-container {
    width: 87%;
    margin-left: 10%;
    /* 大画面でも広がりすぎないように */
    position: relative;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.voice-img {
    width: 100%;
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.voice-user-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #274377;
    color: white;
    padding: 10px 25px;
    font-size: 1.05rem;
    font-weight: bold;
    z-index: 10;
}

.voice-card {
    background-color: white;
    width: 90%;
    border-radius: 30px;
    padding: 50px 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    margin-top: -20px;
    /* 画像に被せる */
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

.voice-card-title {
    color: #61c5dd;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4;
    margin: 0 0 20px;
    letter-spacing: 0.05em;
}

.voice-card-text {
    font-size: 0.8rem;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

/* スライダーの操作部分（1/3 ページネーションと矢印ボタン） */
.voice-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    margin-top: 2.5rem;
}

.voice-btn {
    background-color: #274377;
    color: white;
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.2);
    user-select: none;
    z-index: 10;
}

.voice-btn.disabled {
    opacity: 0.5;
    cursor: auto;
}

/* ページ数(1/3)の表示 */
.voice-pagination {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
    position: static;
    /* 自由に配置するため */
    width: auto;
}

/* =========================================
   よくある質問 (アコーディオン) セクション
   ========================================= */
.faq-accordion-section {
    background-color: #273b5e;
    /* 背景のネイビーブルー */
    padding: 50px 20px 60px;
    padding-bottom: 40px;
}

.faq-accordion-title {
    color: white;
    text-align: center;
    font-size: 1.8rem;
    margin: 0 0 40px;
    letter-spacing: 0.1em;
    font-weight: bold;
}

.faq-accordion-container {
    max-width: 600px;
    margin: 0 auto;
}

.faq-item {
    background-color: white;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.faq-question {
    display: flex;
    align-items: center;
    padding: 20px 20px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.faq-q-icon {
    color: #4aa0d5;
    /* 水色 */
    font-size: 2.2rem;
    font-weight: bold;
    margin-right: 15px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
}

.faq-q-text {
    font-weight: bold;
    font-size: 0.9rem;
    color: #111;
    flex: 1;
    /* 残りのスペースを埋める */
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.faq-toggle-icon {
    position: relative;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    flex-shrink: 0;
}

/* +と-のアイコンをCSSで作る */
.faq-toggle-icon::before,
.faq-toggle-icon::after {
    content: '';
    position: absolute;
    background-color: #111;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 横線 */
.faq-toggle-icon::before {
    width: 20px;
    height: 3px;
    border-radius: 2px;
}

/* 縦線 */
.faq-toggle-icon::after {
    width: 3px;
    height: 20px;
    border-radius: 2px;
}

/* 開いている状態(active)の時は縦棒を消してマイナス(-)にする */
.faq-item.active .faq-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.faq-item.active .faq-toggle-icon::before {
    /* 必要に応じてマイナスを少し太く・大きくするならここで調整 */
}

/* 開閉のアニメーション設定 (CSS Gridによる高さのトランジション) */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer-inner {
    overflow: hidden;
}

.faq-answer p {
    padding: 0 20px 30px 30px;
    /* アイコンの幅分字下げ */
    margin: 0;
    color: #333;
    line-height: 1.6;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* =========================================
   フッターセクション
   ========================================= */
.site-footer {
    background-color: #38B6FF;
    /* 画像の明るい水色 */
    color: white;
    text-align: center;
    /* 下側はcopyrightで確保 */
}

.footer-logo img {
    padding-top: 30px;
    padding-bottom: 15px;
    width: 30%;
    max-width: 250px;
    height: auto;
}

.footer-cta-button {
    display: inline-block;
    background-color: #00c300;
    /* LINEグリーン */
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 8px;
    width: 92%;
    max-width: 500px;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    margin-bottom: 40px;
    letter-spacing: 0.1em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    color: white;
}

.footer-info,
.footer-hours {
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
}

.footer-copyright {
    border-top: 2px solid white;
    /* 白い水平線 */
    padding: 20px 15px;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
}

/* 固定フッターバナー */
.fixed-footer-banner {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 768px;
    z-index: 9999;
    pointer-events: auto;
    /* iPhoneのセーフエリア（ホームインジケータ）対応 */
    padding-bottom: env(safe-area-inset-bottom);
    /* 上から真ん中まで透明、下半分を白に設定 */
    background: linear-gradient(to bottom, transparent 50%, #fff 50%);
}

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

/* フッターがバナーと被らないように余白を追加（必要に応じて調整） */
body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
}