/* =========================
   フロントページ専用 CSS
========================= */

/* 横スクロール防止（余白ゼロに） */
html, body {
    margin: 0 auto; /* 中央揃え */
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* 横スクロールを防ぐ */
}

/* =========================
   メインビジュアル（スライダー）
========================= */
.main-slider {
    width: 100%;  /* 横幅を画面いっぱいに */
    height: auto; /* 高さは自動調整 */
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

/* スライダー内の画像 */
.swiper-slide img {
    width: 100%;  /* 画像の横幅をスライダーいっぱいに */
    height: auto; /* 高さは元の比率を維持 */
    object-fit: cover; /* 画像が枠いっぱいにフィット */
    max-height: 70vh; /* 画面の70%以下の高さに制限（調整可能） */
}

/* =========================
   レスポンシブ対応（スマホ用）
========================= */
@media (max-width: 768px) {
    .main-slider {
        height: auto; /* スマホでは高さを短く */
    }

    .swiper-slide img {
       max-height: 50vh; /* スマホでは高さを少し抑える */
    }
}


/* =========================
   スライダーの矢印（ナビゲーション）
========================= */
.swiper-button-next,
.swiper-button-prev {
    color: rgba(139, 69, 19, 0.5) !important; /* 矢印の色を薄い茶色に */
    font-size: 20px !important; /* 矢印のサイズを小さく */
    width: 15px !important; /* ボタンの幅を小さく */
    height: 15px !important; /* ボタンの高さを小さく */
    transition: color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

/* ホバー時に少し濃く */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: rgba(139, 69, 19, 0.8) !important;
    transform: scale(1.1); /* 少し拡大 */
}

/* スマホ用の矢印サイズ調整 */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        font-size: 16px !important; /* スマホではさらに小さく */
        width: 25px !important;
        height: 25px !important;
    }
}


/* =========================
   スライダーのページャー（ドット）
========================= */
/* スライダーのページャー（ドット）のデフォルト設定 */
.swiper-pagination-bullet {
    background: rgba(139, 69, 19, 0.3) !important; /* 非アクティブのドット（薄い茶色） */
    opacity: 0.5 !important;
    transition: background 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* アクティブな●の色を茶色にする */
.swiper-pagination-bullet-active {
    background: #8B4513 !important; /* 茶色 */
    opacity: 1 !important;
}


/* =========================
   共通セクションデザイン
========================= */
.funeral-plan {
    border: 2px solid #ccc;
    border-radius: 10px; /* 角を丸める */
    padding: 20px;
    margin: 30px auto;
    width: 100%;
    max-width: 1200px; /* PCでは最大幅を制限 */
    background: #fffff5;
    text-align: center;
    box-sizing: border-box; /* 余白が横スクロールに影響しないように */
}

/* 火葬式などのイメージ写真を横幅いっぱいに & 余白を追加 */
.funeral-plan img {
    width: 100%;
    height: auto; /* 縦横比を維持 */
    display: block;
    margin: 15px 0; /* 上下に余白を追加 */
    border-radius: 5px; /* 角を少し丸める（お好みで） */
}

/* セクションタイトル */
.plan-title {
    padding: 10px;
    font-size: 20px;
    color: white;
    text-align: center;
}

/* セクションごとのタイトル背景色 */
.plan-kasoushiki .plan-title { background: #ff7f7f; }
.plan-ichinichisou .plan-title { background: #ff7fbf; }
.plan-kazokusou .plan-title { background: #bf7fff; }
.plan-ippansou .plan-title { background: #7f7fff; }

/* 価格エリア */
.price-section {
    display: flex;
    flex-direction: row; /* 横並びに */
gap: 10px;
    display: flex;
    align-items: center; /* 高さを揃える */
}

/* 会員価格アイコン */
.member-price {
    background: #FFD700;
    color: #333;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    display: inline-block;
    height: 40px;
    line-height: 40px;
white-space: nowrap;
}

/* 価格（大きく） */
.price {
    font-size: 36px;
    color: red;
    font-weight: bold;
    line-height: 40px;
}

/* 税込価格 */
.tax-price {
    display: block;
    width: 100%;
}

/* アイコンエリア */
.plan-icons {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 10px 0;
}

.icon-item {
    padding: 8px;
    border-radius: 5px;
    font-size: 14px;
    color: white;
    width: 50px;
    text-align: center;
}

/* アイコン背景色 */
/* plan-kasoushiki のアイコン色 */
.plan-kasoushiki .plan-icons .icon-tsuya { background: #dcdcdc; }
.plan-kasoushiki .plan-icons .icon-kokubetsu { background: #dcdcdc; }
.plan-kasoushiki .plan-icons .icon-kasou { background: #FF6666; }

/* plan-ichinichisou のアイコン色 */
.plan-ichinichisou .plan-icons .icon-tsuya { background: #dcdcdc; } /* オレンジ */
.plan-ichinichisou .plan-icons .icon-kokubetsu { background: #ff7fbf; } /* 紫 */
.plan-ichinichisou .plan-icons .icon-kasou { background: #ff7fbf; } /* 青緑 */

/* plan-kazokusou のアイコン色 */
.plan-kazokusou .plan-icons .icon-tsuya { background: #bf7fff; } /* ゴールド */
.plan-kazokusou .plan-icons .icon-kokubetsu { background: #bf7fff; } /* ネイビー */
.plan-kazokusou .plan-icons .icon-kasou { background: #bf7fff; } /* ダークグリーン */

/* plan-ippansou のアイコン色 */
.plan-ippansou .plan-icons .icon-tsuya { background: #7f7fff; } /* ゴールド */
.plan-ippansou .plan-icons .icon-kokubetsu { background: #7f7fff; } /* ネイビー */
.plan-ippansou .plan-icons .icon-kasou { background: #7f7fff; } /* ダークグリーン */


/* 詳細ボタン */
.detail-button {
    display: block;
    background: #1E0000;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px;
}

/* =========================
   レスポンシブ対応
========================= */
@media (max-width: 768px) {
    .funeral-plan {
        width: 90%;
        max-width: none;
        margin: 20px auto;
    }
}