/* --- 1. 変数と基本設定 --- */
:root {
    --main-red: #c0392b;
    --gold: #d4af37;
    --dark-grey: #333;
    --light-bg: #fdfaf5;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    margin: 0;
    line-height: 1.6;
    color: var(--dark-grey);
    background-color: var(--light-bg);
}

.container {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 0;
}

/* --- 2. ヘッダー（画像が表示されない原因を修正） --- */
.hero {
    /* グラデーションを少し薄くし、画像が最優先で出るように記述 */
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                url('images/sakura55anniversary.jpeg') no-repeat center center;
    background-size: cover;
    color: white;
    text-align: center;
    padding: 80px 0;
    min-height: 300px;
}

.hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 10px 0; font-weight: 900; }
.hero .date { font-size: 1.2rem; font-weight: bold; background: var(--gold); display: inline-block; padding: 5px 30px; border-radius: 50px; margin: 15px 0; }
.catchphrase { font-weight: bold; margin-bottom: 20px; text-shadow: 1px 1px 5px rgba(0,0,0,0.5); }

/* 動画エリアのレスポンシブ設定 */
.video-section { margin-top: 30px; max-width: 600px; margin-left: auto; margin-right: auto; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-caption { font-size: 0.8rem; margin-top: 10px; color: #ddd; }

/* --- 3. お彼岸 --- */
.higan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.higan-card { background: white; border: 1px solid #ddd; padding: 15px; text-align: center; border-radius: 8px; }
.higan-card span { display: block; font-weight: bold; color: var(--main-red); }
.higan-card.highlight { border: 2px solid var(--main-red); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

/* --- 4. メイン謝恩価格（インパクト重視） --- */
.benefit-box { background: white; border-radius: 12px; padding: 40px 20px; margin-bottom: 30px; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.08); text-align: center; }
.badge { position: absolute; top: -15px; left: 20px; background: var(--main-red); color: white; padding: 5px 15px; border-radius: 4px; font-weight: bold; z-index: 10; }

.trust-copy { font-size: 1rem; color: #666; margin-bottom: 5px; }
.sale-main-title { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; line-height: 1.4; margin-bottom: 25px; }
.gold-impact { color: var(--main-red); font-size: 1.5em; border-bottom: 5px solid var(--gold); display: inline-block; padding: 0 5px; }

/* 割引枠：二重線で高級感を出す */
.price-impact-container {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 30px 10px; border: 3px double var(--gold); background: #fff; border-radius: 10px; margin-bottom: 30px;
}

.price-card { flex: 1; min-width: 0; }
.card-label { font-size: 0.8rem; color: var(--main-red); font-weight: bold; border: 1px solid var(--main-red); padding: 2px 8px; display: inline-block; margin-bottom: 10px; }

/* 数字とテキストの下揃え */
.card-body-wrapper { display: flex; align-items: flex-end; justify-content: center; gap: 5px; }
.side-text { font-size: 0.9rem; font-weight: bold; line-height: 1.3; text-align: right; white-space: nowrap; margin-bottom: 12px; }
.huge-num { font-size: clamp(3.5rem, 10vw, 6rem); font-weight: 900; color: var(--main-red); line-height: 0.8; letter-spacing: -3px; }
.percent { font-size: 1.5rem; font-weight: 900; color: var(--main-red); margin-bottom: 12px; }

.plus-icon-circle { background: #333; color: #fff; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; }

/* --- 5. 条件・特典 --- */
.gogo-chance { background: #fff9e6; padding: 20px; border: 2px dashed var(--gold); border-radius: 10px; margin-top: 20px; }
.condition-grid { display: flex; gap: 10px; margin-top: 15px; }
.condition-item { flex: 1; background: white; padding: 15px 5px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.icon-wrapper img { width: 80px; height: 80px; object-fit: contain; margin-bottom: 5px; }

.benefit-content { display: flex; align-items: center; gap: 20px; text-align: left; }
.benefit-image { flex: 1; }
.benefit-image img { width: 100%; border-radius: 8px; display: block; } /* 画像が表示されない時は枠が出るように */
.benefit-text { flex: 1.5; }
.benefit-box.reverse .benefit-content { flex-direction: row-reverse; }
.present-list { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; }
.present-list li { background: #eee; padding: 3px 12px; border-radius: 20px; font-size: 0.8rem; }

/* --- 6. 在庫一掃・フッター --- */
.clearance { background: var(--dark-grey); color: white; text-align: center; padding: 60px 0; }
.clearance-impact { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 20px 0; }
.small-price { font-size: 1.2rem; color: #aaa; }
.big-price { font-size: clamp(3rem, 10vw, 6rem); font-weight: 900; color: var(--gold); line-height: 1; }

.shop-nav { text-align: center; padding: 60px 0; }
.btn-store { background: var(--dark-grey); color: white; padding: 15px 40px; text-decoration: none; border-radius: 5px; font-weight: bold; }

footer { text-align: center; padding: 40px 0 140px; font-size: 0.8rem; color: #999; }

.fixed-reserve-btn {
    position: fixed; right: 20px; bottom: 20px; width: 110px; height: 110px;
    background: #ff9800; color: white; border-radius: 50%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; text-decoration: none; font-weight: bold; font-size: 0.85rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 9999;
}

/* --- 7. スマホ表示 --- */
@media (max-width: 650px) {
    .higan-grid, .condition-grid, .benefit-content, .benefit-box.reverse .benefit-content, .price-impact-container { flex-direction: column; }
    .card-body-wrapper { align-items: center; flex-direction: column; gap: 0; }
    .side-text { text-align: center; margin-bottom: 5px; }
    .plus-icon-circle { margin: 10px 0; transform: rotate(90deg); }
    footer { padding-bottom: 140px; }
}

/* --- ロゴの調整 --- */
.logo-inline {
    height: 1.5em;        /* 文字の高さに対して1.5倍程度の大きさに制限 */
    width: auto;          /* 横幅は自動計算 */
    vertical-align: middle; /* 文字の真ん中の高さに合わせる */
    margin: 10px 5px;     /* 上下に少し余白を作って窮屈さを解消 */
    display: inline-block;
}

/* スマホではロゴが画面からはみ出さないよう調整 */
@media (max-width: 650px) {
    .logo-inline {
        height: 1.2em;    /* スマホでは少しだけ控えめに */
        max-width: 80%;   /* 画面幅の80%を超えないように */
    }
    .higan-info h2 {
        font-size: 1.4rem; /* 見出し自体のサイズもスマホ用に調整 */
        line-height: 1.8;
    }
}

/* お彼岸セクションの見出し全体を中央寄せ */
.higan-info {
    text-align: center;
}

.higan-title {
    display: inline-block; /* 中身の幅に合わせる */
    text-align: center;
    margin-bottom: 30px;
}

.higan-text-top {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--dark-grey);
}

/* ロゴと「で！」を横並びにして下揃えにする */
.higan-logo-group {
    display: flex;
    align-items: flex-end; /* 下揃え */
    justify-content: center;
    gap: 8px; /* ロゴと文字の間隔 */
}

/* ロゴを大きく調整 */
.logo-inline-big {
    height: 4.5rem;      /* ロゴをはっきり大きく（お好みで調整してください） */
    width: auto;
    display: block;
}

/* 「で！」の文字調整 */
.higan-text-bottom {
    font-size: 1.8rem;   /* ロゴに合わせて文字も大きく */
    font-weight: bold;
    margin-bottom: 5px;  /* ロゴのベースラインに合わせる微調整 */
    color: var(--dark-grey);
}

/* スマホ表示の調整 */
@media (max-width: 650px) {
    .higan-text-top { font-size: 1rem; }
    .logo-inline-big { height: 3rem; } /* スマホでは少し抑える */
    .higan-text-bottom { font-size: 1.4rem; }
}

/* 特典エリアのテキストをセンタリング */
.benefit-text-center {
    flex: 1.5;
    text-align: center; /* 全体を中央寄せ */
    display: flex;
    flex-direction: column;
    align-items: center; /* 中身の要素も中央に配置 */
}

/* 見出しを赤い枠で囲む */
.red-border-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--main-red);
    border: 2px solid var(--main-red); /* 赤い枠線 */
    padding: 5px 20px;
    display: inline-block;
    margin-bottom: 15px;
    background-color: #fff;
}

/* 処分引取料が のテキスト */
.disposal-txt {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0;
    color: var(--dark-grey);
}

/* 「半額」を巨大・赤文字で目立たせる */
.hangaku-impact {
    font-size: 5.5rem; /* インパクト重視のサイズ */
    font-weight: 900;
    color: var(--main-red);
    line-height: 1;
    margin: 10px 0;
    letter-spacing: 0.1em;
}

/* 注釈テキスト */
.small-note {
    font-size: 0.85rem;
    color: #666;
}

/* スマホ対応 */
@media (max-width: 650px) {
    .hangaku-impact {
        font-size: 4rem;
    }
    .red-border-title {
        font-size: 1.2rem;
    }
}

/* 閉じるボタンのコンテナ */
.close-btn-container {
    text-align: center;
    padding: 40px 0;
    background-color: #fff; /* 背景を白にして区切りを明確に */
    border-top: 1px solid #ddd;
}

.btn-close {
    background-color: var(--dark-grey);
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-close:hover {
    background-color: #555; /* ホバー時に少し明るく */
}

.close-note {
    font-size: 0.8rem;
    color: #888;
    margin-top: 10px;
}

/* スマホでの調整 */
@media (max-width: 650px) {
    .btn-close {
        width: 80%; /* スマホでは押しやすいよう横幅を広げる */
        padding: 18px 0;
    }
}
/* クリックできることを示すカーソル */
.zoom-img {
    cursor: pointer;
    transition: opacity 0.3s;
}
.zoom-img:hover { opacity: 0.8; }

/* モーダル背景（最初は非表示） */
.modal {
    display: none;
    position: fixed;
    z-index: 10000; /* 最前面 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9); /* 真っ暗な背景 */
    cursor: zoom-out;
}

/* 拡大される画像 */
.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border: 3px solid #fff;
}

/* 閉じるボタン (×) */
.modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* キャプション */
.modal-caption {
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    position: absolute;
    width: 100%;
    bottom: 20px;
}