.mb-5 {
    margin-bottom: 2rem;
}

.f-main-content h2 {
    margin: 0 0 40px;
    color: #041B46;
    font-size: 40px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .f-main-content h2 {
        margin: 0 0 1rem;
        font-size: 24px;
    }
}

.f-main-content h2 img {
    display: inline-block;
    width: 100%;
    height: 180px;
    margin-right: 1rem;
    object-fit: contain;
}

.f-main-banner {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3枚並べる */
    gap: 20px;          /* ★ここを20pxに修正（ギフトリストと揃える） */
    width: 100%;
    margin: 0 0 60px 0; /* ★下の余白を60pxに統一 */
    padding: 0;
    list-style: none;
}

/* バナー画像も正方形に合わせる場合 */
.f-main-banner li img {
    width: 100%;
    aspect-ratio: 16 / 9; /* バナー比率に合わせて調整してください（正方形なら 1/1） */
    object-fit: cover;
    display: block;
}

/* スマホ対応：バナーもスマホでは2列にするなら */
@media (max-width: 767px) {
    .f-main-banner {
        grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
        gap: 10px;
    }
}

.gift-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gift-icon {
    width: 30px;
    height: auto;
}

.gift-text {
    font-size: 20px;
    line-height: 1;
}

/* ギフト商品表示エリア */
.gift-product-box {
    margin-top: 20px;
    max-width: 300px;
}
.gift-product-box a {
    text-decoration: none;
    color: #333;
    display: block;
}

.product-name {
    margin: 0.5px 0 4px;    /* 画像との隙間を小さくする */
    font-weight: bold;
    font-size: 0.95rem;
    color: #333;
}

.product-price {
    margin: 10px 0;
    font-size: 0.9rem;
    font-weight: bold;
    color: #333;
}

/* スマホ用調整 */
@media (max-width: 767px) {
    .product-name {
        font-size: 1.1rem;
    }
    .product-price {
        font-size: 1rem;
    }
}

/* 商品ボックス全体 */
.gift-product-box {
    margin-top: 20px;
    max-width: 300px;
}
.gift-product-box a {
    text-decoration: none;
    display: block;
}

/* 4つを並べる親要素 */
.gift-products-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PCは4列 */
    gap: 20px;
    margin-top: 20px;
}

/* 各商品アイテムの枠 */
.gift-product-item {
    text-align: left;
}

/* 修正前（高さ固定になっている箇所）を以下のように変更 */
.gift-product-item img {
    width: 100%;
    aspect-ratio: 1 / 1;      /* ★ここがポイント：幅と高さの比率を1:1(正方形)にする */
    object-fit: cover;        /* ★画像が枠からはみ出さないように中心を基準に切り抜く */
    display: block;
    background-color: #fff;   /* 余白が出た場合の背景色 */
}

/* スマホでは2列にする */
@media (max-width: 767px) {
    .gift-products-list {
  
      grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* ランキングセクションの上に大きな余白を作る */
.ranking-section {
    margin-top: 60px; /* ここで調整してください（数値を大きくすると空きます） */
    margin-bottom: 20px;
}

/* セクション全体の余白 */
.section-container {
    margin-top: 60px;
    margin-bottom: 20px;
}

/* タイトルエリアの調整 */
.gift-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* グリッドレイアウト */
.gift-products-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* 商品画像：正方形で揃える */
.gift-product-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* テキストの固定 */
.product-name {
    min-height: 3em; 
    margin: 8px 0 4px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #333;
    line-height: 1.5; /* 行間を少し開けて読みやすくします（任意） */
}
    margin: 8px 0 4px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #333;
}

/* スマホ対応 */
@media (max-width: 767px) {
    .gift-products-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* 【重要】既存レイアウトへの干渉を防ぐ */
.f-main-content h2 img {
    height: auto !important;
}

/* --- 1. バナー専用の設定（4/3の長方形） --- */
.f-main-banner li img {
    width: 100%;
    aspect-ratio: 4 / 3;  /* ここでバナーだけを4/3にする */
    object-fit: cover;
    display: block;
}

/* --- 2. 商品画像専用の設定（別の比率にしたい場合） --- */
.gift-product-item img {
    width: 100%;
    aspect-ratio: 1 / 1;  /* 例：商品は正方形にする場合 */
    /* もし商品も長方形で良いならここを 4/3 にしてください */
    object-fit: cover;
    display: block;
    background-color: #fff;
}

/* --- 3. 全体のレイアウト設定 --- */
.f-main-banner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0;
    margin-bottom: 60px;
}

.gift-products-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.gift-product-item img {
    object-fit: contain !important;
}

/* 親要素 */
.gift-product-item a {
    position: relative;
    display: block;
}

/* 王冠ラベルの共通設定 */
.rank-crown {
    position: absolute;
    top: -15px;
    left:-15px;
    z-index: 10;
    width: 60px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* 順位ごとの王冠画像を指定 */
.rank-1 { background-image: url('https://img21.shop-pro.jp/PA01521/534/etc_base64/MbDM.png?cmsp_timestamp=20260713121142'); }
.rank-2 { background-image: url('https://img21.shop-pro.jp/PA01521/534/etc_base64/MrDM.png?cmsp_timestamp=20260713164003'); }
.rank-3 { background-image: url('https://img21.shop-pro.jp/PA01521/534/etc_base64/M7DM.png?cmsp_timestamp=20260713164056'); }
.rank-4 { background-image: url('https://img21.shop-pro.jp/PA01521/534/etc_base64/NLDM.png?cmsp_timestamp=20260713170329'); }