@charset "utf-8";

/* ===================================================
   リセット＆共通
=================================================== */
:root {
  --color-brand: #b69119;
  --color-text: #221505;
  --color-text-white: #fff;
  --color-text-black: #000;
  --color-bg: #dbd4c1;
  --color-bg-dark: #221505;
  --color-bg-dark2: #3f2608;
  --color-bg-black: #000;
  --color-bg-white: #fff;
  --color-accent: #5c410f;
  --font-size-base: 12px;
  --font-size-sm: 10px;
  --font-size-lg: 16px;
  --font-size-xl: 24px;
  --font-size-2xl: 48px;
  --line-height-base: 1.6;
}

body.ticket_info_top {
  position: relative;
  height: 100%;
  margin: 0 auto;
  background: #151515;
  color: #fff;
}
.ticket_info_main h2::after, 
.ticket_info_main h3::before, 
.ticket_info_main h3::after {
  display: none;
}
ol li:before{content: none;}

a{transition: all 200ms 0s ease;}
a:hover{opacity: 0.7;}
h3{padding: 0;}

/* ---------------------------------------------------
   大枠レイアウト
--------------------------------------------------- */
.main-contents { position: relative; }
.mv_box{ display: flex; flex-direction: column; align-items: center; position: absolute; color: #fff; text-shadow: 0 0 20px rgba(0, 0, 0, 0.75); font-weight: 600; line-height: 1.875; z-index: 2; top: 20%; left: 24%; display: none; }
.mv_box p{ text-align: center; margin-bottom: 15px; font-size: 20px; }
.mv_box span{font-size: 18px;}
.mv_box img{ width: 170px; height: 170px; }
.mv_lead_text { flex-direction: column; font-size: var(--font-size-2xl); font-weight: 600; line-height: 1.875; letter-spacing: 3.2px; display: none; margin-bottom: 200px; }
.cd-fixed-bg { position: relative; min-height: 100%; height: 100vh; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; z-index: 1; }
.cd-fixed-bg.cd-bg-1 { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/egift/egift_bg.webp'); }

/* スマホ用は全画面スクロール */
.cd-scroll { width: 100%; height: 100vh; overflow-y: auto; overflow-x: hidden; background: var(--color-bg-black); position: relative; }

/* ---------------------------------------------------
   eGift セクションコンテンツ
--------------------------------------------------- */
.sec-pad { padding: 50px 15px; }
.bg-black { background: #151515; color: #fff; }
.bg-white { background: #fff; color: #333; }
.sec-title { font-size: 22px; text-align: center; margin: 15px 0; font-weight: bold; }

/* header-scroll */
.eg-mv { position: relative; width: 100%;margin-top: 60px; }
.eg-mv img { opacity: 0.7; }
.eg-mv-txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; }
.eg-mv-txt h1 { font-size: 32px; font-weight: normal; margin: 0; }
.eg-mv-txt h1 span { display: block; font-size: 16px; margin-bottom: 10px; line-height: 1.8; }

/* eGiftとは */
.about-desc { line-height: 1.4;font-size: 13px;}

/* 選ばれる理由 */
.reason-list { display: flex; flex-direction: column; gap: 20px; }
.reason-card { border: 1px solid var(--color-brand); padding: 30px 20px; }
.reason-card h3 { font-size: 16px; margin-bottom: 15px; font-weight: normal; padding: 0; }
.reason-card p { font-size: 13px; color: #555; }

/* 商品一覧 */
.product-list { display: flex; flex-direction: column; gap: 30px; }
.product-card { border: 2px solid #888; padding: 10px;}
.product-card img { width: 100%; display: block; }
.product-info { padding: 25px 15px; text-align: left; }
.product-info h3 { font-size: 16px; margin-bottom: 15px; font-weight: normal; }
.product-info p.desc { font-size: 13px; color: #ccc; margin-bottom: 15px; line-height: 1.8; }
.product-price { color: var(--color-brand); font-size: 14px; margin-bottom: 15px;}
.product-price span { font-size: 18px; }

/* ボタン */
.btn-gold { display: block; width: 100%; background: var(--color-brand); color: #fff; text-align: center; padding: 10px 15px; border-radius: 6px; font-size: 14px; border: 1px solid transparent; transition: opacity 0.3s; box-sizing: border-box; text-decoration: none; margin: 0 auto; }
.btn-gold:hover { opacity: 0.8; border: 1px solid transparent; color: #fff; }
.btn-gold.outline { background: transparent; border: 1px solid var(--color-brand); color: var(--color-brand); }
.btn-gold.outline:hover { color: var(--color-brand); border: 1px solid var(--color-brand); }
.inner .button { display: block; background: #b28e12; color: #fff; text-align: center; padding: 10px 15px; font-size: 13px; border-radius: 4px; border: none; width: 100%; }


/* ご利用上の注意 */
#note{padding: 30px;}
.note-list { margin: 0; padding-left: 1em; }
.note-list li { list-style: none; text-align: justify; padding-bottom: 10px; font-size: 12px; color: #ccc; line-height: 1.6; text-indent: -1em; margin: 0; }
.note-list li::before { content: '・'; margin-right: 4px; display: inline; }
.note-list li:last-child { padding: 0; }

/* 贈り方ステップ */
.step-list { display: flex; flex-direction: column; gap: 40px; align-items: center;}
.step-card { position: relative; border: 1px solid var(--color-brand); padding: 20px; text-align: center; width: 100%; background: #fff; }
.step-card p { margin-top: 15px; }
.step-card img { display: block; }
.step-card:not(:last-child)::after { content: "▼"; position: absolute; bottom: -32px; left: 50%; transform: translateX(-50%); color: #111; font-size: 24px; line-height: 1; }

/* -----------------------------------------
   よくある質問 (JSアコーディオン)
----------------------------------------- */
section#faq { margin-top: 0; padding-bottom: 50px; color: #fff; background: #151515; }
.faq-list { display: flex; flex-direction: column; gap: 20px; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 20px; }
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-q { display: flex; align-items: flex-start; gap: 12px; text-align: left; line-height: 1.6; font-size: 16px; position: relative; padding-right: 30px; cursor: pointer; }
.faq-q p { margin: 0; }
.faq-a { display: none; padding-top: 15px; }
.faq-a-inner { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; text-align: left; }
.faq-icon { font-size: 20px; flex-shrink: 0; text-align: center; line-height: 1.2; margin-top: 2px;}
.faq-q .faq-icon, .faq-a-inner .faq-icon, .faq-a-inner .faq-text { color: #fff; }
.faq-a-inner .faq-text { line-height: 1.8; margin: 0; }
.faq-q::before, .faq-q::after { content: ''; position: absolute; background: #fff; top: 50%; transform: translateY(-50%); transition: transform 0.3s, opacity 0.3s; }
.faq-q::before { width: 14px; height: 2px; right: 0; }
.faq-q::after { width: 2px; height: 14px; right: 6px; }
.faq-q.is-open::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }

/* 非日常の休息を (CTAプラン) */
.plan-cards { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.plan-card { display: flex; flex-direction: row; align-items: center; background: #fff; padding: 15px; border: 1px solid #433309; gap: 15px; }
.plan-card img { width: 120px; height: auto; display: block; flex-shrink: 0; border-radius: 6px; }
.plan-card-body { flex: 1; display: flex; flex-direction: column; align-items: center; }
.plan-card .price { color: #433309; font-size: 14px; margin-bottom: 10px; font-weight: bold; }
.plan-card .price span { font-size: 20px; margin: 0 4px; font-family: var(--font-num); }
.plan-card .action { background: var(--color-brand); color: #fff; padding: 10px; border-radius: 4px; font-size: 12px; text-decoration: none; width: 100%; text-align: center; box-sizing: border-box; }
.plan-card .action:hover { opacity: 0.8; }
.cta-btns { display: flex; flex-direction: column; gap: 15px; padding: 0 20px;}

/* おすすめご利用シーン (カルーセル) */
#egiftRecommendScene { padding: 50px 20px; background: #151515; }
#egiftRecommendScene h2 { font-size: 20px; text-align: center; margin-bottom: 30px; color: #fff; border: none; }
#egiftRecommendScene .slider { margin: 0 -10px; }
#egiftRecommendScene .slick-track { display: flex; align-items: stretch; }
#egiftRecommendScene .slick-slide { height: auto; display: flex; }
#egiftRecommendScene .eg-scene-card { background: #fff; border-radius: 10px; overflow: hidden; margin: 0 10px; display: flex; flex-direction: column; height: auto; width: 100%; }
#egiftRecommendScene .eg-scene-card picture { display: block; margin: 0; }
#egiftRecommendScene .eg-scene-card picture img { width: 100%; height: 180px; object-fit: cover; border-radius: 0; margin: 0; }
#egiftRecommendScene .eg-scene-detail { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; text-align: left; }
#egiftRecommendScene .eg-scene-detail h3 { font-size: 16px; font-weight: normal; margin-bottom: 10px; color: #333; text-align: center}
#egiftRecommendScene .eg-scene-detail h3::before { display: none; }
#egiftRecommendScene .eg-scene-detail p { font-size: 14px; color: #333; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
#egiftRecommendScene .eg-scene-btnwrap { margin-top: auto; width: 100%; }
#egiftRecommendScene .eg-scene-btn { display: block; background: #b28e12; color: #fff; text-align: center; padding: 12px; font-size: 13px; border-radius: 4px; border: none; width: 100%; text-decoration: none; box-sizing: border-box; }
#egiftRecommendScene .btn-gold { margin-top: 40px; }
#egiftRecommendScene .slick-dots { position: static; display: flex; justify-content: center; gap: 10px; margin-top: 30px; padding: 0; list-style: none; }
#egiftRecommendScene .slick-dots li { margin: 0; width: 12px; height: 12px; }
#egiftRecommendScene .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 12px; height: 12px; padding: 0; cursor: pointer; color: transparent; border: 1px solid var(--color-brand); outline: none; background: transparent; border-radius: 50%; }
#egiftRecommendScene .slick-dots li.slick-active button { background: var(--color-brand); }

/* PC用調整 */
@media only screen and (min-width: 1024px) {
  .cd-scroll #egiftRecommendScene { padding: 50px 30px; }
  .cd-scroll #egiftRecommendScene .eg-scene-card picture img { height: 160px; }
}

/* フッター直前ボタン & パンくず */
.footer-btns { padding: 0 30px 40px; background: #151515; }
.footer-btns .btn-gold { margin-bottom: 15px; }

#breadcrumbs { background: #151515; border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
#breadcrumbs ol { display: flex; gap: 15px; padding: 20px 30px; margin: 0; color: #fff; font-size: 12px; align-items: center; }
#breadcrumbs ol li::before { display: none; }
#breadcrumbs ol li a { color: #fff; }
#breadcrumbs ol span.arrow { color: #666; }

/* ---------------------------------------------------
   PC用レイアウト
--------------------------------------------------- */
@media only screen and (min-width: 1024px) {
  .cd-fixed-bg.cd-bg-1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(9px);
    z-index: 0;
  }
  .cd-scroll {
    z-index: 1;
  }
  .mv_box, .mv_lead_text {
    display: flex;
  }
  
  /* ========================================================
     【絶対厳守スタイル】
  ======================================================== */
  .cd-scroll { width: 390px; position: absolute; bottom: 0; right: 100px; overflow-y: auto; height: 90vh; border-top-left-radius: 20px; border-top-right-radius: 20px; border: 11px solid var(--color-bg-white); border-bottom: 0; transform: translateZ(0); background: #151515; }
  div.cd-scroll::-webkit-scrollbar { width: 2px; }
  div.cd-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 5px; }
  div.cd-scroll::-webkit-scrollbar-track { background: none; }

  /* -------------------------------------------------------------
     ここから下は common.css のPC用スタイルの影響を解除する上書きCSS
  ------------------------------------------------------------- */
  main.ticket_info_main { margin-left: 0; width: 100%; }
  .cd-scroll #Gnav { display: block; width: 100%; }
  .cd-scroll #sideColumn { position: fixed; bottom: 0; top: auto; left: auto; right: 0; height: calc(90vh - 60px); width: 300px; transform: translateX(100%); }
  .cd-scroll #sideColumn.open { transform: translateX(0); }
  .cd-scroll #sideColumn header.pc { display: none; }
  .cd-scroll #sideColumn ul.group,
  .cd-scroll #sideColumn ul.sns { display: flex; }
  .cd-scroll footer header { margin: 0; width: 100%; }
  .cd-scroll footer a.logo { width: 100%; margin: 40px auto 30px auto; max-width: 250px; }
  .cd-scroll footer nav { display: block; }
  .cd-scroll footer nav ul { margin-right: 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .cd-scroll footer nav ul.etc { display: flex; margin-right: 0; }
  .cd-scroll footer nav ul.etc li.inner { width: 50%; margin-right: 0; }
  .cd-scroll footer nav ul.etc a.external::after { position: absolute; right: 20px; }
} 

/* ========================================================
   slick スライダーのドットナビゲーション (全画面共通)
======================================================== */
#egiftRecommendScene .slick-dots { position: static; display: flex; justify-content: center; gap: 10px; margin-top: 30px; padding: 0; list-style: none; }
#egiftRecommendScene .slick-dots li { margin: 0; width: 12px; height: 12px; }
#egiftRecommendScene .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 12px; height: 12px; padding: 0; cursor: pointer; color: transparent; border: 1px solid var(--color-brand); outline: none; background: transparent; border-radius: 50%; }
#egiftRecommendScene .slick-dots li.slick-active button { background: var(--color-brand); }

@media only screen and (min-width: 1800px) {
  .cd-scroll { right: 12vw; }
}