/** Shopify CDN: Minification failed

Line 7:0 Unexpected "<"
Line 107:0 Unexpected "<"

**/
<style>
  /* ベースリセット */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* 背景バナー用ラッパー */
  .banner-wrapper {
    position: relative;
    width: 100%;
    /* 高さはpadding-topで縦横比調整 */
    padding-top: 40%; /* 横長バナーの比率例：1000x400 */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* PC用背景画像 */
  @media (min-width: 768px) {
    .banner-wrapper {
      background-image: url('/cdn/shop/files/banner_2400x960_580357d4-4608-4f2e-bc03-7d606f85b441.webp?v=1754721916');
      padding-top: 40%; /* 1000 / 400 = 2.5なので40% */
    }
  }

  /* スマホ用背景画像 */
  @media (max-width: 767px) {
    .banner-wrapper {
      background-image: url('/cdn/shop/files/banner_900x1200_43d0cda7-1bae-43e8-b7a0-8b27389693e9.webp?v=1754721916');
      padding-top: 133%;
    }
    .p-fair-section-benefit__toggle-media-image {
        max-width: 35rem !important;
    }
  }

  /* 青のグラデーション＋白文字コンテンツ */
  .content {
    background: linear-gradient(180deg, #0d1831 0%, #060c17 100%);
    color: white;
    padding: 1.8em;
    font-size: 1em;
  }


  /* ボタン */
.p-fair-section-benefit__toggle-item-content {
    padding: 4rem 4rem 4rem !important;
}
.p-fair-section-benefit__toggle-media-image {
    max-width: 40rem !important;
} 
  
    .link-button {
        display: inline-block;
        padding: 20px 30px;
        text-decoration: none;
        min-width: 150px;
        max-width: 100%;
        width: 80%; /* 初期幅は親要素の80% */
        text-align: center; /* 文字中央寄せ */
        box-sizing: border-box; /* パディング込みの幅計算 */
    }

    .link-button-primary {
        background-color: #01002e;
        color: #fff;
    }

    .link-button-secondary {
        background-color: #01002e;
        color: #333;
    }

    .link-button-large {
        padding: 20px 30px;
        font-size: 2rem;
    }

    .link-button-small {
        padding: 10px 15px;
        font-size: 1.5rem;
    }

    /* 画面幅が768px以上のとき（タブレット・PC） */
    @media (min-width: 768px) {
        .link-button {
            width: 500px; /* 固定幅にする例 */
        }
    }

    /* 画面幅が480px以下のとき（スマホ） */
    @media (max-width: 480px) {
        .link-button {
            width: 100%; /* より幅を広げてスマホで押しやすくする */
        }
    }
</style>