@charset "utf-8";

:root {
  /* 文字カラーを #533630 に変更 */
  --color: #533630;
  
  /* 指定されたフォントをウェイト別に変数化 */
  --fontYG-L: "Yu Gothic Pr6N L", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --fontYG-R: "Yu Gothic Pr6N R", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --fontYG-M: "Yu Gothic Pr6N M", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --fontYG-D: "Yu Gothic Pr6N D", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;

  /* ====================================================
     各エリアの余白設定（PC用）
     ※SP用の値は下部の @media 内で上書きしています
  ==================================================== */
  /* MVエリアの余白 */
  --margin-mv-top: 6.533%;
  --margin-mv-bottom: 0%;

  /* 新エリア（横並び）の余白 */
  --margin-showcase-top: 5%;
  --margin-showcase-bottom: 5%;
  --padding-showcase: 8% 6%;

  /* ステップ（How to Enjoy）エリアの余白 */
  --padding-steps: 2% 0;
  --padding-steps-inner: 8% 6%;

  /* 注意事項エリアの余白 */
  --margin-precautions-top: 8%;
  --margin-precautions-bottom: 9.5%;
  --padding-precautions: 7.5% 6% 10%;
}

/* =========================================
   スマホ用・PC用の改行制御クラス
========================================= */
.br-sp { display: none; }
.br-pc { display: inline; }

@media not all and (min-width: 768px) {
  .br-sp { display: inline; }
  .br-pc { display: none; }
}

.giftticket_gf .pc {
  display: block;
}

.giftticket_gf .sp {
  display: none;
}

.giftticket_gf * {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
}

.giftticket_gf a {
  text-decoration: none;
  transition: all 0.2s ease;
}

.giftticket_gf a:hover {
  opacity: 0.7;
}

.giftticket_gf ul, .giftticket_gf dl {
  padding-left: 0;
}

.giftticket_gf p {
  margin-top: 0;
  margin-bottom: 0;
}

.giftticket_gf img {
  height: auto;
  max-width: 100%;
  width: 100%;
}

/* giftticket_gf */
.giftticket_gf {
  /* 背景カラーを #f9ecd9 に変更 */
  background-color: #f9ecd9;
  background-image: none;
  
  color: var(--color);
  font-family: var(--fontYG-R);
  font-feature-settings: "palt";
  font-variant-ligatures: no-common-ligatures;
  letter-spacing: 0.08em;
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  width: 100vw;
}

.giftticket-inner_gf {
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 1255px;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}

.giftticket-content_gf {
  margin-left: auto;
  margin-right: auto;
  width: 63.745%;
}

/* giftticket-mv_gf */
.giftticket-mv_gf {
  /* 変数を使用した余白管理 */
  padding-top: var(--margin-mv-top);
  padding-bottom: var(--margin-mv-bottom);
  position: relative;
}

.giftticket-mv_gf::before,
.giftticket-mv_gf::after {
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  position: absolute;
}

.giftticket-mv__main_gf {
  position: relative;
}

.giftticket-mv__img_gf {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

.giftticket-subtitle_gf {
  font-size: clamp(12px, 1.91vw, 24px);
  margin-left: 0;
  margin-right: 0;
  position: absolute;
  top: 3.75%;
  width: 1.2em;
}

.giftticket-subtitle_gf:nth-of-type(1) {
  right: 8.75%;
}

.giftticket-subtitle_gf:nth-of-type(2) {
  left: 2%;
  width: 3.5em;
}

.giftticket-title_gf {
  margin-top: 1.25%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4.75%;
  width: 70%;
}

.giftticket-lead_gf {
  font-family: var(--fontYG-M);
  font-size: clamp(15px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 2.2;
  text-align: center;
}

.giftticket-lead_gf .small-lead {
  display: block;
  font-family: var(--fontYG-R);
  font-size: clamp(11px, 1.6vw, 18px);
  line-height: 2.2;
  margin-top: 1em;
}

/* =========================================
   新エリア：横並びレイアウト
========================================= */
.giftticket-showcase_gf {
  /* 変数を使用した余白管理 */
  margin-top: var(--margin-showcase-top);
  margin-bottom: var(--margin-showcase-bottom);
  position: relative;
  z-index: 2;
}

/* 背景を白にして角を丸くする設定 */
.giftticket-showcase_gf .giftticket-content_gf {
  background-color: #ffffff; 
  border-radius: 24px;
  /* 変数を使用した余白管理 */
  padding: var(--padding-showcase);
  box-sizing: border-box;
}

.fc-showcase-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8%;
}

.fc-showcase-item.reverse {
  flex-direction: row-reverse;
}

.fc-showcase-img {
  width: 48%;
}

.fc-showcase-text {
  width: 45%;
  font-family: var(--fontYG-R);
  font-size: clamp(12px, 1.5vw, 18px);
  line-height: 2;
  letter-spacing: 0.1em;
}

.fc-showcase-conclusion {
  text-align: center;
  margin-top: 10%;
  font-family: var(--fontYG-M);
  font-size: clamp(12px, 1.6vw, 20px);
  line-height: 2;
  letter-spacing: 0.1em;
}

/* giftticket-steps_gf (枠デザイン) */
.giftticket-steps_gf {
  position: relative;
  /* 変数を使用した余白管理 */
  padding: var(--padding-steps);
}

.giftticket-steps_gf .giftticket-content_gf {
  background-color: transparent;
  background-image: url(../images/frame-bg.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  /* 変数を使用した余白管理 */
  padding: var(--padding-steps-inner); 
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.giftticket-steps__inner_gf {
  margin-top: 0;
}

.giftticket-step__title_gf {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.giftticket-steps__items_gf {
  margin-top: 0%;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.giftticket-step_gf {
  display: flex;
  justify-content: space-between;
  padding-top: 6%;
  padding-bottom: 6%;
  position: relative;
}

.giftticket-step_gf:not(:last-child)::after {
  background-image: url(../images/line.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  position: absolute;
  padding-top: 3.92%;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 89.019%;
}

.giftticket-step__img_gf {
  width: 45%;
}

.giftticket-step__cap_gf {
  width: 52%;
}

.giftticket-step__num_gf {
  width: 30.769%;
}

.giftticket-step__text_gf {
  font-family: var(--fontYG-R);
  font-size: clamp(10px, 1.8vw, 18px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.8;
  margin-top: 1em;
}


/* giftticket-precautions_gf (注意事項エリア) */
.giftticket-precautions_gf {
  position: relative;
  color: #000000;
}

.giftticket-precautions__inner_gf {
  /* 背景画像を削除し、カラーコードを指定 */
  background-color: #fbe5cd; 
  background-image: none;
  
  /* 変数を使用した余白管理 */
  margin-top: var(--margin-precautions-top);
  margin-bottom: var(--margin-precautions-bottom);
  padding: var(--padding-precautions);
}

.giftticket-precautions__title_gf {
  font-family: var(--fontYG-D);
  font-size: clamp(14px, 2.15vw, 27px);
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
}

.giftticket-precautions__list_gf {
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
}

/* ▼ リストエリアのCSS構造を ul/li ベースに更新 ▼ */
.fc-precaution-group {
  margin-bottom: 2em;
}

.fc-precaution-title {
  font-family: var(--fontYG-D);
  font-size: clamp(12px, 1.5vw, 18px);
  font-weight: bold;
  margin-bottom: 0.5em;
}

.fc-precaution-group ul li {
  font-family: var(--fontYG-R);
  font-size: clamp(10px, 1.3vw, 16px);
  line-height: 1.7;
  margin-bottom: 0.4em;
  padding-left: 1em;
  text-indent: -1em; /* 最初の1文字（・や※）を左に突き出させる */
}

/* 通常のリスト項目には「・」を付与 */
.fc-precaution-group ul li::before {
  content: "・";
}

/* class="note" のリスト項目には「※」を付与 */
.fc-precaution-group ul li.note::before {
  content: "※";
}


/* =========================================
   スマホ用レスポンシブ設定
========================================= */
@media not all and (min-width: 768px) {
  :root {
    /* ====================================================
       各エリアの余白設定（スマホ用に上書き）
    ==================================================== */
    --margin-mv-top: 10.5%;
    --margin-mv-bottom: 0%;
    
    --margin-showcase-top: 10%;
    --margin-showcase-bottom: 15%;
    --padding-showcase: 8% 5%;
    
    --padding-steps: 2% 0;
    --padding-steps-inner: 12% 8%;
    
    --margin-precautions-top: 5%; /* 元のスマホ指定に準拠 */
    --margin-precautions-bottom: 10%;
    --padding-precautions: 10% 5% 5%;
  }

  .giftticket_gf .pc {
    display: none;
  }
  .giftticket_gf .sp {
    display: block;
  }

  .giftticket-inner_gf {
    padding-left: 0;
    padding-right: 0;
  }

  .giftticket-content_gf {
    width: 90%;
  }

  .giftticket-mv__img_gf {
    margin-top: 0%;
    width: 90%;
  }

  .giftticket-subtitle_gf {
    font-size: clamp(15px, 4vw, 30px);
    position: relative;
    top: auto;
    margin-left: auto;
    margin-right: auto;
    width: 21em;
  }

  .giftticket-title_gf {
    margin-top: 5%;
    margin-bottom: 8%;
    width: 80%;
  }

  .giftticket-lead_gf {
    font-size: clamp(14px, 5vw, 30px);
  }
  .giftticket-lead_gf .small-lead {
    font-size: clamp(16px, 3.2vw, 18px);
  }

  /* スマホ表示時の新エリア設定 */
  .giftticket-showcase_gf .giftticket-content_gf {
    width: 92%;
    border-radius: 16px;
  }

  .fc-showcase-item {
    margin-bottom: 10%;
  }

  .fc-showcase-text {
    font-size: clamp(10px, 4vw, 14px);
    line-height: 1.8;
  }

  .fc-showcase-conclusion {
    font-size: clamp(12px, 4.3vw, 16px);
    margin-top: 12%;
  }

  /* giftticket-steps_gf (スマホの枠) */
  .giftticket-steps_gf .giftticket-content_gf {
    background-image: url(../images/frame-bg_sp.png);
  }

  .giftticket-steps__items_gf {
    width: 100%;
  }

  .giftticket-step__title_gf {
    width: 70%;
  }

  .giftticket-step_gf {
    padding-top: 8%;
    padding-bottom: 8%;
  }

  .giftticket-step__text_gf {
    font-size: clamp(11px, 3.7vw, 16px);
  }

  /* giftticket-precautions_gf */
  .giftticket-precautions_gf::before {
    display: none;
  }

  .giftticket-precautions__title_gf {
    font-size: clamp(16px, 4.2vw, 22px);
  }

  .giftticket-precautions__list_gf {
    width: 90%;
  }

  /* ▼ SP用のリストフォントサイズ更新 ▼ */
  .fc-precaution-title {
    font-size: clamp(13px, 3.5vw, 18px);
  }

  .fc-precaution-group ul li {
    font-size: clamp(11px, 3.2vw, 15px);
  }
}

/* =========================================
   リンク用スタイル
========================================= */
/* 詳細度を上げて、全体指定の a タグの text-decoration: none; を上書きします */
.giftticket_gf a.giftticket-precautions__link_gf {
  color: #0066cc; /* 青色 */
  text-decoration: underline; /* アンダーラインを表示 */
}
.giftticket_gf a.giftticket-precautions__link_gf:hover {
  color: #66a3e0; /* マウスオーバー時の薄めの青色 */
  text-decoration: underline; /* マウスオーバー時もアンダーラインを維持 */
  opacity: 1; /* 全体の opacity: 0.7 を打ち消して色だけを変更する */
}