@charset "UTF-8";
html {
  scroll-behavior: smooth;
}
.main {
  --gift-pink: #ec80a4;
  --gift-green: #8ac021;
}

/* ---- アンカー位置（このページのみ調整） ----
   module.css の .scroll_adjust は 61px/81px の固定値で #header の実高さ
   （SP 56px / PC 81px ＋ お知らせバー）と合わないため、page.js が測った
   --gift-header-h で上書きする。JSが動かない場合は下のフォールバック値を使用 */
.main .scroll_adjust div {
  padding-top: var(--gift-header-h, 56px);
}
@media screen and (768px <= width) {
  .main .scroll_adjust div {
    padding-top: var(--gift-header-h, 81px);
  }
}

.main .mv {
  position: relative;
  overflow: hidden;
}

.main .mv_text {
  position: absolute;
  left: 0;
}

.main .mv_text.ver_01 {
  top: min(calc(322 / 768 * 100vw),322px);
}

.main .mv_text.ver_02 {
  top: min(calc(458 / 768 * 100vw),458px);
}

.main .mv_text img {
  display: block;
}

/* アニメーション開始まで見えないように初期状態で消しておく。
   .is_js は head のインラインスクリプトが付けるので、
   JS無効／未対応の環境ではこの指定が効かず最初から表示される */
.is_js .main .mv_text img {
  opacity: 0;
}

/* ラッピングの注意事項 ＋ セクションボタン */
.main .gift_info {
  padding: min(calc(30 / 768 * 100vw), 30px) min(calc(24 / 768 * 100vw), 24px)
    min(calc(40 / 768 * 100vw), 40px);
}

/* ---- 注意事項アコーディオン ---- */

.main .gift_note_head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(calc(20 / 768 * 100vw), 20px);
  width: min(calc(400 / 768 * 100vw), 400px);
  margin-inline: auto;
  padding: min(calc(19 / 768 * 100vw), 19px) min(calc(24 / 768 * 100vw), 24px);
  border: none;
  border-radius: 9999px;
  background: var(--gift-pink);
  color: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.main .gift_note_head_text {
  font-size: min(calc(22 / 768 * 100vw), 22px);
  letter-spacing: 0.08em;
  line-height: 1.2;
}
/* プラス・マイナスアイコン */
.main .gift_note_icon {
  position: relative;
  flex-shrink: 0;
  width: min(calc(22 / 768 * 100vw), 22px);
  height: min(calc(22 / 768 * 100vw), 22px);
}
.main .gift_note_icon::before,
.main .gift_note_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: min(calc(2 / 768 * 100vw), 2px);
  background: #fff;
  transform: translate(-50%, -50%);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
/* 閉じている時は縦棒を出して「＋」 */
.main .gift_note_icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
/* 開いている時は縦棒を消して「−」 */
.main .gift_note.is_open .gift_note_icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}
/* 開閉エリア */
.main .gift_note_body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
/* 注意事項・よくあるご質問で共用するためクラス名に依存させない */
.main .is_open > .gift_note_body {
  grid-template-rows: 1fr;
}
.main .gift_note_body_inner {
  overflow: hidden;
  min-height: 0;
}
.main .gift_note_list {
  list-style: none;
  margin: 0;
  padding: min(calc(24 / 768 * 100vw), 24px) 0 0;
  color: var(--gift-pink);
  font-size: min(calc(24 / 768 * 100vw), 24px);
  line-height: 1.7;
}
.main .gift_note_list li {
  position: relative;
  padding-left: 1.2em;
  color: #150c0a;
  font-size: min(calc(20 / 768 * 100vw), 20px);
}
.main .gift_note_list li a{
  text-decoration: underline;
}
.main .gift_note_list li + li {
  margin-top: min(calc(14 / 768 * 100vw), 14px);
}
.main .gift_note_list li::before {
  content: "";
  position: absolute;
  top: 0.4em;
  left: 0.15em;
  width: min(calc(12 / 768 * 100vw), 12px);
  height: min(calc(12 / 768 * 100vw), 12px);
  border-radius: 50%;
  background: var(--gift-pink);
}

/* ---- セクションボタン ---- */
.main .gift_section_list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: min(calc(16 / 768 * 100vw), 16px);
  margin: min(calc(30 / 768 * 100vw), 30px) 0 0;
  padding: 0;
}
.main .gift_section_list a {
  display: block;
}
.main .gift_section_list img {
  display: block;
  height: auto;
}

/* ---- 各セクション（タイトル＋スライダー） ---- */

.main .gift_section {
  padding: 0 0 min(calc(60 / 768 * 100vw), 60px);
  overflow: hidden;
  position: relative;
}
.main .gift_section .bg {
  position: absolute;
  left: 0;
  top: -100px;
}
.main .gift_section_ttl {
  margin-bottom: min(calc(40 / 768 * 100vw), 40px);
}

.gift_info .bg1 {
  position: relative;
  margin-top: max(calc(-190 / 768 * 100vw), -190px);
  z-index: -1;
}

.main .gift_section.ver_01 {
  background-color: #fff;
}

.main .gift_section.ver_02 {
  background-color: #fff;
}

.main .gift_section.ver_02 .gift_section_ttl {
  background-color: #fff;
  margin-top: max(calc(-830 / 768 * 100vw), -830px);
}

.main .gift_section.ver_03 {
}
.main .gift_section.ver_03 .gift_section_ttl {
  margin-top: max(calc(-220 / 768 * 100vw), -220px);
}

.main .gift_section.ver_04 {
}
.main .gift_section.ver_04 .gift_section_ttl {
  margin-top: max(calc(-620 / 768 * 100vw), -620px);
}

.main .gift_section.ver_05 {
}

.main .gift_section_ttl img {
  display: block;
  height: auto;
  margin-inline: auto;
}

/* ---- リード文（eギフト／ラッピングセット共通） ---- */
.main .gift_lead {
  margin: 0;
  color: #150c0a;
  font-size: min(calc(22 / 768 * 100vw), 22px);
  line-height: 1.8;
  text-align: center;
}
.gift_section.ver_05 .gift_lead {
  margin-bottom: min(calc(40 / 768 * 100vw), 40px);
}
.main .gift_lead b {
  font-weight: bold;
}

/* ---- eギフト ---- */
/* ＼ オリジナルのカードデザイン！ ／ */
.main .gift_egift_catch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(calc(20 / 768 * 100vw), 20px);
  margin-top: min(calc(30 / 768 * 100vw), 30px);
  color: var(--gift-pink);
  font-size: min(calc(26 / 768 * 100vw), 26px);
  line-height: 1.2;
  font-weight: bold;
}
.main .gift_egift_catch::before,
.main .gift_egift_catch::after {
  content: "";
  width: min(calc(2 / 768 * 100vw), 2px);
  height: min(calc(34 / 768 * 100vw), 34px);
  background: var(--gift-pink);
}
.main .gift_egift_catch::before {
  transform: rotate(-25deg);
}
.main .gift_egift_catch::after {
  transform: rotate(25deg);
}

/* カードデザイン 自動スライド */
.main .gift_card_swiper {
  margin-top: min(calc(24 / 768 * 100vw), 24px);
}
/* 白い靄がはみ出せるよう上下に余白を確保（.swiperはoverflow:hidden） */
.main .gift_card_swiper .swiper {
  padding: min(calc(12 / 768 * 100vw), 12px) 0;
}
.main .gift_card_swiper .swiper-slide {
  width: auto;
}
.main .gift_card_swiper .swiper-slide img {
  display: block;
  height: auto;
  /* カードの周りに白い靄 */
  box-shadow: 0 0 min(calc(6 / 768 * 100vw), 6px)
    min(calc(2 / 768 * 100vw), 2px) #fff;
}
/* 一定速度で流し続けるためイージングを打ち消す */
.main .gift_card_swiper .swiper-wrapper {
  transition-timing-function: linear;
}

/* ---- タブ切替 ---- */
.main .gift_tab_list {
  list-style: none;
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  gap: min(calc(14 / 768 * 100vw), 14px);
  margin: 0;
  padding: 0 min(calc(24 / 768 * 100vw), 24px);
}
.main .gift_tab_btn {
  min-width: min(calc(170 / 768 * 100vw), 170px);
  padding: min(calc(10 / 768 * 100vw), 10px) min(calc(20 / 768 * 100vw), 20px);
  border: var(--gift-pink) 1px solid;
  border-radius: 9999px;
  background: #fff;
  color: var(--gift-pink);
  font-size: min(calc(22 / 768 * 100vw), 22px);
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.main .gift_tab_btn.selected {
  background: var(--gift-pink);
  color: #fff;
}
/* 選択中のタブのスライダーだけ表示 */
.main .gift_tab_area {
  display: none;
}
.main .gift_tab_area.selected {
  display: block;
}
.main .gift_tab_area .gift_swiper {
  margin-top: min(calc(30 / 768 * 100vw), 30px);
}

/* ---- 商品スライダー ---- */
.main .gift_swiper {
  /* margin-top: min(calc(-40 / 768 * 100vw), -40px); */
}
.main .gift_swiper .swiper {
  position: relative;
  overflow: visible;
}
.main .gift_swiper .swiper-slide {
  width: min(calc(360 / 768 * 100vw), 360px);
  height: auto;
}
/* 上のテキスト量に関わらずカートの高さを揃えるため、
   スライドを縦フレックスにしてカートを最下部に寄せる */
.main .gift_swiper .gift_item {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}
.main .gift_swiper .gift_item_cart {
  margin-top: auto;
}
.main .gift_swiper .gift_item_img img {
  display: block;
  width: 100% !important;
  max-width: none;
  height: auto;
}
.main .gift_swiper .gift_item_name {
  margin-top: min(calc(18 / 768 * 100vw), 18px);
  font-size: min(calc(22 / 768 * 100vw), 22px);
  color: #150c0a;
  line-height: 1.5;
  text-align: left;
  font-weight: bold;
}
.main .gift_swiper .gift_item_price {
  margin-top: min(calc(6 / 768 * 100vw), 6px);
  font-size: min(calc(20 / 768 * 100vw), 20px);
  line-height: 1.5;
  text-align: left;
  color: #4b4b4b;
}
/* カートの下の注釈（PHPの $note を入れたスライドだけ出る） */
.main .gift_swiper .gift_item_note {
  margin-top: min(calc(14 / 768 * 100vw), 14px);
  padding-left: 1.4em;
  text-indent: -1.4em;
  color: #4b4b4b;
  font-size: min(calc(18 / 768 * 100vw), 18px);
  line-height: 1.5;
  text-align: left;
}

/* ---- ラッピングセットの説明文・スペック ---- */
.main .gift_item_desc {
  margin-top: min(calc(14 / 768 * 100vw), 14px);
  color: #4b4b4b;
  font-size: min(calc(19 / 768 * 100vw), 19px);
  line-height: 1.6;
  text-align: left;
}
.main .gift_item_spec {
  color: #4b4b4b;
  font-size: min(calc(19 / 768 * 100vw), 19px);
  line-height: 1.6;
  text-align: left;
}

.main .gift_item_spec_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main .gift_item_spec_list li {
  padding-left: 1em;
  text-indent: -1em;
}
.main .gift_item_spec_list li::before {
  content: "・";
}

/* 単品カート（module.cssのコンテナクエリが効く幅に抑えて丸ボタンにする） */
.main .gift_item_cart.ver_single {
}
.main .gift_item_cart.ver_single .i_cart101,
.main .gift_item_cart.ver_single .i_cart101_empty {
  justify-content: center;
}

/* ---- もっと見るボタン ---- */
.main .gift_more {
  margin-top: min(calc(30 / 768 * 100vw), 30px);
  padding: 0 min(calc(24 / 768 * 100vw), 24px);
  text-align: center;
}
.main .gift_more_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: min(calc(16 / 768 * 100vw), 16px);
  width: min(calc(350 / 768 * 100vw), 350px);
  padding-block: min(calc(23 / 768 * 100vw), 23px);
  border: var(--gift-green) 1px solid;
  border-radius: 9999px;
  background: #fff;
  color: var(--gift-green);
  font-size: min(calc(22 / 768 * 100vw), 22px);
  line-height: 1.2;
  text-decoration: none;
}
.main .gift_more_btn::after {
  content: "";
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: min(calc(8 / 768 * 100vw), 8px) 0
    min(calc(8 / 768 * 100vw), 8px) min(calc(16 / 768 * 100vw), 16px);
  border-color: transparent transparent transparent var(--gift-green);
}

/* ---- ボックス・巾着のご注文について（開閉） ---- */
.main .gift_notice {
  margin-top: min(calc(30 / 768 * 100vw), 30px);
  padding: 0 min(calc(23 / 768 * 100vw), 23px);
}
.main .gift_notice_head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(calc(18 / 768 * 100vw), 18px);
  margin-inline: auto;
  padding: min(calc(14 / 768 * 100vw), 14px) min(calc(28 / 768 * 100vw), 28px);
  border: #000 1px solid;
  border-radius: 9999px;
  background: #fff;
  color: #150c0a;
  font-size: min(calc(22 / 768 * 100vw), 22px);
  line-height: 1.3;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
/* プラス・マイナスアイコン */
.main .gift_notice_icon {
  position: relative;
  flex-shrink: 0;
  width: min(calc(20 / 768 * 100vw), 20px);
  height: min(calc(20 / 768 * 100vw), 20px);
}
.main .gift_notice_icon::before,
.main .gift_notice_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: min(calc(2 / 768 * 100vw), 2px);
  background: #150c0a;
  transform: translate(-50%, -50%);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
/* 閉じている時は縦棒を出して「＋」 */
.main .gift_notice_icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
/* 開いている時は縦棒を消して「−」 */
.main .gift_notice.is_open .gift_notice_icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}
.main .gift_notice_list {
  list-style: none;
  margin: 0;
  padding: min(calc(24 / 768 * 100vw), 24px) 0 0;
  color: #150c0a;
  font-size: min(calc(19 / 768 * 100vw), 19px);
  line-height: 1.7;
  text-align: left;
}
.main .gift_notice_list li {
  padding-left: 1em;
  text-indent: -1em;
}
.main .gift_notice_list li + li {
  margin-top: 0.4em;
}
.main .gift_notice_list a {
  color: #150c0a;
  text-decoration: underline;
}

/* ---- よくあるご質問（開閉） ---- */
/* 区切り画像はinlineだと行間の余白が出るのでblockにする */
.main .gift_qa_border img {
  display: block;
  height: auto;
}
.main .gift_qa {
  padding: min(calc(40 / 768 * 100vw), 40px) min(calc(24 / 768 * 100vw), 24px)
    min(calc(50 / 768 * 100vw), 50px);
  background: #fac9cd;
}
.main .gift_qa_inner {
  padding: min(calc(30 / 768 * 100vw), 30px) min(calc(24 / 768 * 100vw), 24px);
  background: #fff;
}
.gift_qa_ttl {
  margin-bottom: min(calc(40 / 768 * 100vw), 40px);
}
.main .gift_qa_ttl img {
  display: block;
  height: auto;
  margin-inline: auto;
}
.main .gift_qa_list {
  list-style: none;
  margin: min(calc(20 / 768 * 100vw), 20px) 0 0;
  padding: 0;
}
.main .gift_qa_item + .gift_qa_item {
  margin-top: min(calc(24 / 768 * 100vw), 24px);
}
/* 質問（開閉ボタン）… 区切り線はQの下に固定（開閉に関わらず表示） */
.main .gift_qa_q {
  display: flex;
  align-items: center;
  gap: min(calc(12 / 768 * 100vw), 12px);
  width: 100%;
  padding: 0 0 min(calc(32 / 768 * 100vw), 32px);
  border: none;
  border-bottom: #fac9ce 2px solid;
  background: none;
  color: #150c0a;
  font-size: min(calc(22 / 768 * 100vw), 22px);
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.main .gift_qa_q_text {
  flex: 1;
  font-weight: bold;
}
.main .gift_qa_mark {
  flex-shrink: 0;
  line-height: 1;
}
.main .gift_qa_mark img {
  display: block;
  height: auto;
}
/* プラス・マイナスアイコン */
.main .gift_qa_icon {
  position: relative;
  flex-shrink: 0;
  width: min(calc(25 / 768 * 100vw), 25px);
  height: min(calc(25 / 768 * 100vw), 25px);
  margin-top: 0.3em;
}
.main .gift_qa_icon::before,
.main .gift_qa_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: min(calc(4 / 768 * 100vw), 4px);
  background: var(--gift-pink);
  transform: translate(-50%, -50%);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
/* 閉じている時は縦棒を出して「＋」 */
.main .gift_qa_icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
/* 開いている時は縦棒を消して「−」 */
.main .gift_qa_item.is_open .gift_qa_icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}
/* 回答 */
.main .gift_qa_a {
  display: flex;
  align-items: flex-start;
  gap: min(calc(12 / 768 * 100vw), 12px);
  padding: min(calc(14 / 768 * 100vw), 14px) 0 0;
}
.main .gift_qa_a_text {
  flex: 1;
  color: #4b4b4b;
  font-size: min(calc(20 / 768 * 100vw), 20px);
  line-height: 1.8;
}
.main .gift_qa_a_text p {
  margin: 0;
}
.main .gift_qa_a_text a {
  text-decoration: underline;
}
.main .gift_qa_note {
  margin-top: 0.5em !important;
}
.main .gift_qa_img {
  margin-top: min(calc(16 / 768 * 100vw), 16px);
}
.main .gift_qa_img img {
}
/* その他よくあるご質問はこちら */
.main .gift_qa_more {
  margin-top: min(calc(24 / 768 * 100vw), 24px);
  text-align: center;
  font-size: min(calc(22 / 768 * 100vw), 22px);
}
.main .gift_qa_more a {
  color: #150c0a;
  text-decoration: underline;
  font-weight: bold;
}

/* 前後ボタン（画像の縦中央に配置） */
.main .gift_swiper .swiper-button-prev,
.main .gift_swiper .swiper-button-next {
  --swiper-navigation-size: min(calc(20 / 768 * 100vw), 20px);
  top: min(calc(180 / 768 * 100vw), 180px);
  width: min(calc(52 / 768 * 100vw), 52px);
  height: min(calc(52 / 768 * 100vw), 52px);
  margin-top: 0;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #e1799c;
  opacity: 0.8;
  border: 2px solid #fff;
  color: #fff;
}
.main .gift_swiper .swiper-button-prev {
  left: min(calc(20 / 768 * 100vw), 20px);
  right: auto;
}
.main .gift_swiper .swiper-button-next {
  right: min(calc(20 / 768 * 100vw), 20px);
  left: auto;
}
.main .gift_swiper .swiper-button-prev::after,
.main .gift_swiper .swiper-button-next::after {
  font-weight: bold;
}

/* ドット（マークアップに .swiper-pagination があるスライダーだけ出る）
   .swiper の外に置いているので絶対配置を解除してスライダーの下に並べる */
.main .gift_swiper .swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(calc(14 / 768 * 100vw), 14px);
  margin-top: min(calc(30 / 768 * 100vw), 30px);
}
.main .gift_swiper .swiper-pagination-bullet {
  width: min(calc(14 / 768 * 100vw), 14px);
  height: min(calc(14 / 768 * 100vw), 14px);
  margin: 0 !important;
  background: #f0f0f0;
  opacity: 1;
}
.main .gift_swiper .swiper-pagination-bullet-active {
  background: #a0a0a0;
}

/* ファッション　モーダル */
.main .js_fashion_modal .modal_modmicro_overlay {
  padding: 20px 0;
}
@media screen and (768px <= width) {
  .main .js_fashion_modal .modal_modmicro_overlay {
    padding: 20px 20px;
  }
}
.main .js_fashion_modal .swiper {
  --swiper-pagination-bullet-inactive-color: #b4b4b4;
  --swiper-pagination-color: #000;
  padding: 0 0 10px;
}
.main .js_fashion_modal .modal_modmicro_container {
  max-width: 800px;
}
.main .js_fashion_modal .swiper-slide {
  text-align: center;
}
.main .js_fashion_modal .swiper-slide img {
  width: 100% !important;
  max-width: none;
}
.main .js_fashion_modal .swiper-pagination {
  position: static;
  margin: 10px 0 0;
}
.main .js_fashion_modal .swiper-button-next,
.main .js_fashion_modal .swiper-button-prev {
  display: none;
}
@media screen and (992px <= width) {
  .main .js_fashion_modal .swiper-button-next,
  .main .js_fashion_modal .swiper-button-prev {
    display: block;
    color: #000;
  }
}
/* ファッション　モーダル */