@charset "utf-8";

/* ==================================== */
/* ★ 共通設定・リセット ★ */
/* ==================================== */

/* フォントフェイス定義（コメントアウトされていますが、残します） */
/*
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/tyo/common/font/NotoSansJP-900.woff) format('woff');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/tyo/common/font/NotoSansJP-500.woff) format('woff');
}
*/

/* リセットスタイルと基本設定 */
.main div:not([class])::after {
  content: none;
}

.main a {
  text-decoration: none;
}

.main .is-em {
  font-weight: bold;
}

#topbuttonApp,
#searchArea {
  position: relative;
  z-index: 1;
}

/* パンくずリスト */
.breadcrumb__inner {
  width: min(100%, 1024px);
  margin: auto;
  letter-spacing: 0 !important;
}

.is-device-pc :is(#breadcrumbArea, .breadcrumb__contents) {
  height: auto;
  min-height: 28px;
  overflow: auto;
}

.is-device-pc .breadcrumb {
  width: auto;
  margin: 0;
  overflow: hidden;
}

/* root変数定義 */
:root {
  /* カラー */
  --default-color-main: #000000;

  /* フォントサイズ */
  --default-font-size-pc-val: 16;
  --default-font-size-pc: 16px;
  --default-font-size-sp: calc(24vw / 7.5);
  --default-font-size: min(var(--default-font-size-sp), var(--default-font-size-pc));
  --default-ff: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; /* ゴシック体フォントを追加 */
  --default-fw: 500;
  --default-fw-black: 900;

  /* 幅 */
  --default-width-sp-val: 710;
  --default-width-pc-val: 992;
  --default-width-sp: (710vw / 7.5);
  --default-width-pc: 992px;
  --default-width: min(var(--default-width-sp), var(--default-width-pc));
  --default-width2: min(100%, var(--default-width-pc));
  --default-bg-width-pc: max(100%, 1920px);

  /* その他 */
  --default-bg-setting: no-repeat center center / cover;
  --default-icon-arw-r: url(/cmn/icon/icon_arrow_right_white.svg);
  --default-icon-blank: url(/cmn/icon/icon_launch_white.svg);
  --default-icon-brown: url(../images/icon_arrow_right_brown.svg);
  --default-icon-brown-blank: url(../images/icon_launch_brown.svg);
  --default-hover-speed: .3s;
  --default-hover-opacity: .8;
  --default-hover-transition-opacity: opacity var(--default-hover-speed);
}

/* mainコンテンツ共通スタイル */
.main {
  font-family: var(--default-ff);
  font-size: var(--default-font-size);
  color: var(--default-color-main);
  line-height: calc(36 / var(--default-font-size-sp-val));
  padding-bottom: 0 !important;
}

.is-inline-block {
  display: inline-block;
}

/* セクション内部の共通ラッパー（PC/SP共通のベース設定） */
.section__inner {
  width: var(--default-width);
  margin: auto;
  position: relative;
  padding: 16px 0;
}

/* 全体の背景色 */
.bg__star {
  background: #7fcef4;
}

/* ==================================== */
/* ★ セクション共通スタイル（PC/SP） ★ */
/* ==================================== */

/* すべてのセクション内のコンテンツラッパーの基本スタイル */
section .section__inner {
  background-color: #FFF;
  box-sizing: border-box;
}

/* section__title の共通スタイル */
.section__title {
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  color: #FFFFFF;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  padding-top: 15px;
  padding-bottom: 15px;
}

@media (max-width: 750px) {
  section .section__inner {
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
    #event .section__inner {
width: min((700vw / 7.5), 830px);     
       }

  .section__title {
    font-size: min((38vw / 7.5), 32px);
    padding: min((15vw / 7.5), 15px);
    width: 69%;
    margin-bottom: min((30vw / 7.5), 25px);
  }
}
@media (max-width: 750px) {
  .breadcrumb__inner {
    white-space: nowrap !important;
    overflow-x: auto !important;
    padding: 0 !important;
}
  
  .breadcrumb__inner {
  max-width: 100%; /* 親要素がはみ出さないように幅を調整 */
}
    .rn-searchMod__formList{
    padding: 0 !important;
    }
}


@media (min-width: 751px) {
  section .section__inner {
    max-width: 992px;
    margin: 0 auto;
    border-radius: 15px;
    padding: 30px 0;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .section__title {
    font-size: 42px;
    padding: 15px 30px;
    width: 40%; /* 意図的な幅であれば維持 */
    margin: 2% auto;
  }
}

/* ==================================== */
/* ★ 各セクション固有のスタイル ★ */
/* ==================================== */

/* headerArea */
#headerArea {
  position: relative;
}

.mv__header--wrapper {
  background: #f34f8a;
  color: #fff;
}

.mv__header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: var(--default-width);
  height: min((120vw / 7.5), 120px);
  margin: 0 auto;
  font-size: min((24vw / 7.5), 24px);
  font-weight: 700;
  padding-bottom: min((8vw / 7.5), 8px);
}

.mv__header--bg--image {
  height: min((579vw / 5.5px), 650px);
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.mv__header--galaxy {
  text-align: center;
  line-height: 1;
}

.mv__header--galaxy--en {
  font-size: min((54vw /7.5), 62px);
  display: block;
}

.mv__header--galaxy--special {
  font-size: min((54vw /7.5), 62px);
  padding: min((18vw / 7.5), 18px) min((48vw / 7.5), 115px) 0 min((15vw / 7.5), 20px);
}

.mv__logo-image {
  width: 100%;
  height: auto;
  display: block;
}

.mv__logo-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -51%);
  z-index: 10;
}

@media (max-width: 749px) {
  .mv__logo-wrapper {
    width: 100vw;
  }
}

@media (min-width: 750px) {
  .mv__logo-wrapper {
    width: 53vw;
    transform: translate(-50%, -51%);
  }
          #event .section__inner {
    width: var(--default-width);
            }
}

/* mainArea */
#mainArea {
  font-weight: var(--default-fw);
}

/* event セクション */
#event {
  /*padding: min((10vw / 7.5), 10px) 0 0;  上の余白をさらに減らします */
  padding-top: 5%;
  margin-bottom: 5%;
}


/* eventセクションのタイトル */
.section__title_1 {
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  color: #FFFFFF;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  display: block;
  margin: 0 auto; /* 中央寄せにするため */
  box-sizing: border-box;
  padding: 0 0 8px;
  width: 100%;
  background-color: #ea5541;
  margin-bottom: min((5vw / 7.5), 5px); /* 下の余白をさらに減らします */
  font-size: min((38vw / 7.5), 25px);
}

.small {
  font-size: 0.9rem;
}

.section__text_1 strong {
  font-size: 1.6rem;
  vertical-align: -1px;
  color: #d84315;
}

/* eventセクションのテキストと画像のラッパー */
.event-content {
  display: flex;
  flex-direction: column; /* SPは縦並び */
  gap: min((30vw / 7.5), 25px);
  align-items: center;
  padding: 0 min((15vw / 7.5), 15px);
}

/* eventセクションのテキスト */
.section__text_1 {
  font-size: 1.1rem;
  text-align: center; /* SPでは中央寄せ */
  line-height: 1.4;
  margin-bottom: 0;
  color: #333; /* section__inner の白背景に合う色に調整 */
  flex-shrink: 0;
}
/* #event セクション内のボタンの背景色を変更 */
#event .event-button-wrapper .base-button__link{
  background-color: #f34f8a; /* 例: ピンク色。お好みの色に変更してください */
  color: #fff; /* 文字色を白に保つ */
    padding: 10px 20px;
    border-radius: 10px;
      margin: 3% 0;

}

#event .event-button-wrapper {
  background-color: #e60012; /* ホバー時の色 (例: 少し濃い赤) */
  opacity: 1; /* デフォルトのopacity変化を無効にする場合は1に */
}
.base-button__link{
    display: block;
    margin: 3% auto;
    text-align: center;
}

/* PC向け調整 */
@media (min-width: 751px) {
  .section__text_1 {
    display: inline-block; 
    flex-direction: column; /* 縦並びを基本とする（テキストブロックとボタンブロック） */
    align-items: center; /* 中央寄せ */
    justify-content: center; /* 垂直方向の中央寄せ */
    /* text-align: center; は .section__text_1 自体に既に定義されているので不要であれば削除 */
  }

  /* PCでのテキストとボタンの間の余白を調整 */
  .event-button-wrapper {
    margin-top: 30px; /* PCでの余白 */
    width: auto; /* ボタンが内容の幅に収まるように */
  }
}
/* 黄色の下線スタイル */
.highlight-yellow-underline {
  text-decoration: underline; /* 下線を引く */
  text-decoration-color: yellow; /* 下線の色を黄色に設定 */
  text-decoration-thickness: 3px; /* 下線の太さを調整 (任意) */
}
.event-image-wrapper {
  text-align: center;
  margin-top: 0;
  flex-shrink: 0;
  max-width: 100%;
}

.event__photo,
.event__image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

@media (min-width: 751px) {
  /* PC向け */
  #event {
    padding: min((85vw / 7.5), 50px) 0 0;
  }

  #event .section__title_1 {
    font-size: 32px;
    padding: 0 0 10px;
    margin-bottom: 28px;
  }

  .small {
    font-size: 1.9rem;
  }

  .event-content {
    flex-direction: row; /* PCは横並び */
    justify-content: center;
    align-items: center; /* 上端揃え */
    gap: 10px;
    padding: 0 30px;
  }

  .section__text_1 {
    flex: 1;
    text-align: left; /* PCでは左寄せ */
    max-width: 50%;
  }

  .event-image-wrapper {
    flex: 1;
    max-width: 50%;
  }

  .event__image {
    max-width: 360px;
  }
}

/* product セクション */
#product {
  --sec-ttl-mb: min((50vw / 7.5), 53px);
  --sec-ttl-size-h: min((123vw / 7.5), 123px);
}

#product .section__inner {
  /* ネストされたメディアクエリを修正 */
  width: var(--default-width); /* デフォルト値を適用 */
}

@media (width <= 980px) {
  #product .section__inner {
        width: var(--default-width);
  }
}

#product.section__text { /* このセレクタは `section__text` クラスが #product IDを持つ要素に適用されるという意味なので、HTML構造と照らし合わせる必要があります */
  text-align: center;
  font-size: 1.3rem;
}

.product-content {
  text-align: center;
  padding: 0 min((30vw / 7.5), 50px);
}

.product-content h3 {
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 3%;
  line-height: 1.8rem;
}

.product__list {
  display: grid;
  color: #000;
  padding: 4%;
}

.product__list--inner {
  font-size: min((20vw / 7.5), 12px);
  line-height: 1.4;
  color: inherit;
  font-weight: normal;
  background: #fff;
  border: 1px solid #848484;
  display: grid;
  grid-template-columns: min((243.5vw / 7.5), 280px) 1fr;
  gap: min((10vw / 7.5), 10px) min((20vw / 7.5), 30px);
  position: relative;
}

.product__list--image-wrapper {
  width: 100%;
  padding-top: calc((628 / 944) * 100%);
  position: relative;
}

.product__list--image {
  object-fit: contain;
  object-position: center top;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.product__list--type {
  background: #000;
  color: #fff;
  text-align: center;
  padding: .2em .2em .25em;
  font-weight: bold;
  align-content: center;
  position: relative;
}

.product__list--label-wrapper:has(.product__list--label.is-economy) {
  display: none;
}

.product__list--label {
  font-size: min((20vw / 7.5), 11px);
  line-height: 1.2;
  color: #fff;
  padding: .5em .75em;
  font-weight: bold;
  background: var(--product-label-bg, #000);
}

.product__list--label.is-business {
  --product-label-bg: #001a4b;
}

.product__list--title,
.product__list--minmax {
  font-size: min((24vw / 7.5), 16px);
  font-weight: bold;
}

.product__list--minmax {
  color: #e70000;
}

.product__list--detail,
.product__list--price {
  color: #333;
}

.product__list--detail,
.product__list--minmax~[class^="product__list--"] {
  margin-top: .25em;
}

@media (width < 861px) {
  .product__list--item:not(:first-child) {
    --yohaku: min((20vw / 7.5), 15px);
    margin-top: var(--yohaku);
  }

  .product__list--inner {
    padding: min((18vw / 7.5), 15px);
    grid-template-areas:
      "img label"
      "img txt";
    grid-template-rows: max-content 1fr;
    align-items: start;
  }

  .product__list--inner:has(.product__list--label.is-economy) {
    grid-template-areas: "img txt";
  }

  .product__list--image-wrapper {
    grid-area: img;
  }

  .product__list--label-wrapper {
    grid-area: label;
    display: flex;
    flex-wrap: wrap;
    gap: min((10vw / 7.5), 8px);
  }

  .product__list--text-wrapper {
    grid-area: txt;
  }

  .product__list--detail {
    margin-top: min((15vw / 7.5), 15px);
  }

  .product__list--price {
    margin-top: min((20vw / 7.5), 20px);
  }
}

@media (861px <= width) {
  .product__list {
    --gap: 20px;
    --col-num: 3;
    grid-template-columns: repeat(auto-fit, calc((100% - var(--gap) * (var(--col-num) - 1)) / var(--col-num)));
    justify-content: center;
    gap: var(--gap);
  }

  .product__list--item,
  .product__list--data {
    display: contents;
  }

  .product__list--inner {
    grid-template-columns: 1fr;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;
    border: 1px solid #e7e7df;
  }

  .product__list--label-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
  }

  .product__list--image-wrapper {
    display: grid;
    grid-template-rows: auto 1fr;
  }

  .product__list--image-wrapper .product__list--image {
    width: 100%;
    height: auto;
  }

  .product__list--type {
    padding: .5em;
  }

  .product__list--text-wrapper {
    padding: 8px 10px 10px;
    display: grid;
    align-content: space-between;
    gap: 1em;
  }
}

@media (981px <= width) {
  .product__list {
    --col-num: 3;
    --gap: 10px;
  }
}

/* ホバーエフェクト */
@media (hover: hover) and (pointer: fine) {
  .product__list--inner > [class$="-wrapper"] {
    transition: var(--default-hover-transition-opacity);
  }

  .product__list--inner:hover > [class$="-wrapper"] {
    opacity: var(--default-hover-opacity);
  }
}

/* appeal セクション */
#appeal {
  padding: min((85vw / 7.5), 50px) 0;
}

#appeal .section__inner {
    width: var(--default-width);
                background: #fff;
}

#appeal .section__title {
  width: 100%;
  background-color: #00428e;
}

@media (max-width: 750px) {
  #appeal .section__title {
    position: relative;
    overflow: hidden;
    padding-left: min((15vw / 7.5) + 30px, 45px);
    padding-right: min((15vw / 7.5) + 30px, 45px);
  }
  #appeal .section__inner {
            width: min((700vw / 7.5), 830px);
}
}

@media (min-width: 751px) {
  #appeal .section__title {
    width: 100%;
    background-color: #00428e;
    margin: 0 auto 28px;
    position: relative;
    overflow: hidden;
  }
}

/* 左側のイラスト（コメントアウトされていますが、残します） */
/*
#appeal .section__title::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-image: url('/campaign/world-travel-festival/images/coupon_image1.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
}
*/

/* 右側のイラスト（コメントアウトされていますが、残します） */
/*
#appeal .section__title::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-image: url('/campaign/world-travel-festival/images/coupon_image2.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
}
*/

/* メディアクエリでイラストのサイズと位置を調整 */
/*
@media (max-width: 750px) {
  #appeal .section__title::before {
    left: 2px;
    width: 12vw;
    height: 13vw;
  }
  #appeal .section__title::after {
    right: 0;
    width: 12vw;
    height: 13vw;
  }
}

@media (min-width: 751px) {
  #appeal .section__title::before {
    left: 0;
    width: 80px;
    height: 80px;
  }
  #appeal .section__title::after {
    right: 0;
    width: 80px;
    height: 80px;
  }
}
*/

/* .section__text は appeal セクション外の汎用テキストに適用 */
#appeal .section__text {
  line-height: 1.6;
  font-size: 1.2rem;
  text-align: center;
  padding: 0 min((30vw / 7.5), 50px) min((40vw / 7.5), 30px);
}

/* .section__text_bold はdl,dt,ddのボタン風デザイン用 */
#appeal .section__text_bold {
  font-weight: 700;
  display: inline-block;
  background-color: #e60012;
  color: #FFFFFF;
  padding: min((15vw / 7.5), 12px) min((30vw / 7.5), 25px);
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  white-space: nowrap;
  margin-bottom: 1%;
}

/* dl.coupon-terms のスタイル */
.coupon-terms {
  text-align: center;
}


.coupon-terms dt {
  display: inline-block;
  font-size: min((32vw / 7.5), 18px);
  font-weight: bold;
  background-color: #e60012; /* ボタンの背景色 */
  color: #FFFFFF; /* 文字色を白に */
  padding: 1% 40%;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  margin-bottom: 10px; /* SPで複数行になる場合の上下余白 */
}

.coupon-terms dd {
  display: inline-block;
  font-size: min((32vw / 7.5), 18px);
  /*font-weight: bold;*/
  color: #333;
  margin-left: 0;
  margin-bottom: 10px; /* SPで複数行になる場合の上下余白 */
}

@media (min-width: 751px) {
  .coupon-terms dt,
  .coupon-terms dd {
    font-size: 18px;
    padding: 8px 25px;
    margin-bottom: 10px; /* PCでは横並びなので不要 */
    margin-right: 0.5em;
  }

.coupon-terms_appeal{
  text-align: left;
}
}

.appeal__list {
  display: grid;
  gap: min((64vw / 7.5), 70px) 20px;
  margin-top: min((100vw / 7.5), 60px);
  padding: min((70vw / 7.5), 45px) min((30vw /7.5), 50px) min((100vw /7.5), 52px);
}

.appeal__list--item {
  display: grid;
}

.appeal__list--item--titles {
  display: flex;
  gap: 0 min((40vw / 7.5), 40px);
  align-items: center;
  padding-left: min((27vw / 7.5), 15px);
  background: #f34f8a;
  color: #fff;
  font-size: min((40vw / 7.5), 32px);
  height: min((70vw / 7.5), 58px);
  line-height: 1;
}

.appeal__list--item--point {
  width: min((92vw / 7.5), 70px);
  height: min((92vw / 7.5), 70px);
  z-index: 1;
}

.appeal__list--item--photo {
  width: 100%;
  position: relative;
  padding-top: calc((432 / 650) * 100%);
}

.appeal__list--item--image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.appeal__list--item--text {
  margin-top: min((54vw / 7.5), 54px);
}

@media (min-width: 750px) {
  .appeal__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .appeal__list--item {
    grid-template-rows: auto auto 1fr;
  }

  .appeal__list--item--titles {
    gap: 0 min((12vw / 7.5), 12px);
    font-size: min((20vw /7.5), 32px);
  }

  .appeal__list--item--text {
    margin-top: min((20vw / 7.5), 20px);
  }
}

@media (min-width: 980px) {
  .appeal__list {
    grid-template-areas:
      "resort resort resort"
      "entertainment entertainment entertainment"
      "gourmet shopping kids";
    grid-template-columns: repeat(3, 1fr);
  }

  :is(.resort, .entertainment) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
  }

  :is(.resort, .entertainment) .appeal__list--item--text {
    margin: min((20vw / 7.5), 20px) 22px 0;
  }

  .resort {
    grid-area: resort;
    grid-template-areas:
      "img ttl"
      "img txt";
  }

  .entertainment {
    grid-area: entertainment;
    grid-template-areas:
      "ttl img"
      "txt img";
  }

  :is(.gourmet, .shopping, .kids) {
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "ttl"
      "img"
      "txt";
  }

  :is(.gourmet, .shopping, .kids) .appeal__list--item--photo {
    padding-top: calc((220 / 320) * 100%);
  }

  .gourmet {
    grid-area: gourmet;
  }

  .shopping {
    grid-area: shopping;
  }

  .kids {
    grid-area: kids;
  }

  .appeal__list--item--titles {
    grid-area: ttl;
  }

  .appeal__list--item--text {
    grid-area: txt;
  }

  .appeal__list--item--photo {
    grid-area: img;
    padding-top: calc((300 / 500) * 100%);
  }
}

/* coupon セクション */
.coupon__list {
  display: grid;
  gap: min((30vw / 7.5), 20px);
  grid-template-columns: 1fr;
  padding: 0 min((30vw / 7.5), 50px);
}

/* coupon__item にリボンを配置するための準備 */
.coupon__item {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  border: 6px solid #e60012;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3.8%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* リボン自体のスタイル変更 */
.ribbon {
  --f: .5em;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1.8;
  padding-inline: 1lh;
  padding-bottom: var(--f);
  background-color: #e60012;
  color: #fff;
  font-weight: bold;
  text-align: center;
  z-index: 10;
  transform: translate(calc(-1 * (1 - cos(45deg))*100%), -100%) rotate(-45deg);
  transform-origin: 100% 100%;
  clip-path: polygon(0% calc(100% - var(--f)), 0% 100%, var(--f) calc(100% - var(--f)), calc(100% - var(--f)) calc(100% - var(--f)), 100% 100%, 100% calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px));
}

/* クーポン条件テキスト（上部） */
.coupon__condition-text {
  font-size: min((28vw / 7.5), 20px);
  font-weight: bold;
  line-height: 1.4;
  color: #333;
  padding-bottom: min((10vw / 7.5), 8px);
  border-bottom: 1px dashed #cccccc;
  width: 100%;
}

/* クーポン割引額 */
.coupon__discount {
  font-size: min((32vw / 7.5), 24px);
  font-weight: bold;
  line-height: 1.4;
  margin-top: min((15vw / 7.5), 10px);
  margin-bottom: min((10vw / 7.5), 8px);
  color: #333;
}

.coupon__discount strong {
  font-size: min((60vw / 7.5), 48px);
  color: #d84315;
  display: block;
}

/* クーポンコード表示部分 */
.coupon__code-display-inline {
  font-size: min((22vw / 7.5), 16px);
  font-weight: bold;
  color: #555;
  margin-bottom: min((20vw / 7.5), 15px);
  word-break: break-all;
  padding: 5px 10px;
  background-color: #eee;
  border-radius: 4px;
  line-height: 1.2;
}

/* クーポンGETボタン（通常版） */
.coupon__get-button {
  width: min((400vw / 7.5), 300px);
  padding: .8em 1em;
  font-size: min((22vw / 7.5), 18px);
  background: #e60012;
  border-radius: 200px;
  color: #fff;
  grid-template-columns: 1fr;
}

.coupon__get-button::after {
  content: none;
}

/* ポップアップのスタイル */
.coupon__popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.coupon__popup-overlay.is-active {
  display: flex;
  opacity: 1;
}

.coupon__popup-content {
  background-color: #fff;
  padding: min((40vw / 7.5), 40px) min((30vw / 7.5), 30px);
  border-radius: 8px;
  width: min(90%, 500px);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.coupon__popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: min((40vw / 7.5), 30px);
  cursor: pointer;
  color: #999;
  line-height: 1;
}

.coupon__popup-message {
  font-size: min((35vw / 7.5), 24px);
  font-weight: bold;
  color: #f34f8a;
  margin-bottom: min((20vw / 7.5), 15px);
}

.coupon__code-display {
  background-color: #eee;
  border: 1px dashed #ccc;
  padding: min((20vw / 7.5), 15px);
  margin-bottom: min((20vw / 7.5), 20px);
  font-size: min((40vw / 7.5), 28px);
  font-weight: bold;
  color: #333;
  word-break: break-all;
}

.coupon__popup-detail {
  font-size: min((24vw / 7.5), 16px);
  line-height: 1.6;
  color: #555;
  text-align: left;
  margin-bottom: min((30vw / 7.5), 25px);
}

/* ポップアップ内の「クーポン対象商品を探す」ボタンのスタイル変更 */
.coupon__search-product-button {
  padding: 3%;
  margin-top: min((20vw / 7.5), 15px);
  width: min((600vw / 7.5), 400px);
  background: #e60012;
  border-radius: 200px;
  color: #fff;
  grid-template-columns: 1fr;
}

.coupon__search-product-button::after {
  content: none;
}

/* PCとSPでリボン・クーポン関連のフォントサイズを調整 */
@media (max-width: 750px) {
  .ribbon {
    font-size: min((28vw / 7.5), 18px);
  }
    #present .section__inner {
width: min((700vw / 7.5), 830px); 
 }
}

@media (min-width: 750px) {
  .coupon__list {
    grid-template-columns: repeat(2, 1fr);
    margin-top: min((50vw / 7.5), 40px);
  }

  .coupon__condition-text {
    font-size: 20px;
    padding-bottom: 10px;
  }

  .coupon__discount {
    font-size: 24px;
    margin-top: 15px;
  }

  .coupon__discount strong {
    font-size: 2.8vw;
  }

  .coupon__code-display-inline {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .coupon__get-button {
    font-size: 18px;
    width: 300px;
  }

  .coupon__search-product-button {
    width: 400px;
  }
}

@media (min-width: 980px) {
  .ribbon {
    font-size: 1.5rem;
  }
  #present .section__inner {
    width: var(--default-width);
  }
}

/* present セクション */
#present {
  padding: min((85vw / 7.5), 50px) 0;
}


/* presentセクションのタイトル */
.section__title_2 {
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  color: #FFFFFF;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  padding: min((15vw / 7.5), 15px); /* SPでの上下左右パディング */
  width: 100%;
  background-color: #f34f8a;
  margin-bottom: min((30vw / 7.5), 25px); /* SPでのタイトル下余白 */
  font-size: min((38vw / 7.5), 32px);
}

.present__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.present__list--item {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.present__list--item:last-child {
  margin-bottom: 0;
}

.present__list--item--image {
  max-width: 90%;
  height: auto;
  display: block;
  margin: auto;
 /* padding: 0 min((30vw / 7.5), 50px);*/
}

@media (min-width: 750px) {
  .section__title_2 {
    font-size: 42px;
    padding: 15px 30px;
    margin-bottom: 28px;
  }
  .present__list--item--image {
  max-width: 100%;
 /* padding: 0 min((30vw / 7.5), 50px);*/
}
}

/* searchArea */
#searchArea {
  margin-bottom: min((50vw / 7.5), 60px);
}

@media (min-width: 741px) {
  #searchArea {
    padding-bottom: 130px;
  }
}

/* hover */
@media (hover : hover) and (pointer : fine) {
  .tbj__list--item--link,
  .base-text-link,
  .base-button__link {
    transition: var(--default-hover-transition-opacity);
  }

  .tbj__list--item--link:hover,
  .base-text-link:hover,
  .base-button__link:hover {
    opacity: var(--default-hover-opacity);
  }
}

/* Breakpoint SP */
.br-sp {
  display: none;
}

@media (max-width: 750px) {
  .br-sp {
    display: block;
  }
      #searchArea {
width: min((700vw / 7.5), 830px); 
margin: 0 auto;
 }
}

.small{
    font-size: 14px;
  text-align: left;
  font-weight: 400;
}

@media (max-width: 750px) {
.small{
  font-size: 14px;
}
}