@charset "UTF-8";
/* =========================================================
 * marchAdvance.css
 * 春スキー＆スノボ 先取りがお得！3月出発キャンペーン
 * https://ski.bigs.jp/special/march-ski/
 *
 * 【構成順】FV → キャンペーン名 → 先取り申込期限（1行） → 交通手段から選ぶ＋5タブ
 *           → 商品一覧 → お知らせ → おすすめの理由 → 注意事項 → FAQ
 *           FVを見た直後に交通手段タブへ到達できるよう、上部の説明を最小にしています。
 *
 * 【サイズの基準】既存スキー特集ページ（/special/senko.html）に合わせています。
 *   セクション余白  : 3rem 0（SP） / 5rem 0（PC≥768）      … senko と同値
 *                     ただしFV直下の .pro / .deadlineLine / .tpTabs は詰めています
 *   キャンペーン名  : 2.2rem（SP） / 2.8rem（PC）
 *   セクションH2    : 2.4rem（SP） / 3rem（PC）            … senko と同値
 *   タブ見出し/理由 : 2rem（SP） / 2.4rem（PC）            … キャンペーン名より一段小さく
 *   パネル内 H3     : 2.3rem（SP） / 3rem（PC）            … senko と同値
 *   本文            : 1.6rem（common.css の body を継承）／リードは1.7rem（PC）
 *   ボタン          : padding 1.5rem 1rem / border-radius 50px … senko と同値
 *   コンテンツ最大幅: 1280px（common.css の #wrapper）
 *                     その内側に --mac-content 1100px（理由）と
 *                     --mac-text 900px（読み物）の2段を置き、中央配置は1か所で管理
 *                     タブ・期限帯・商品カード列は 1280px を共有して端を揃える
 *   FV              : 画面幅いっぱい（100vw）。既存特集ページと同じ仕様
 *                     高さは納品比率どおり（PC 1920:500／SP 1:1）に伸縮し、
 *                     --mac-fv-h-sp / --mac-fv-h-pc が広いモニターでの上限
 *
 *   商品カード      : PC 4列（305×172の16:9画像）／SP 縦型1列（全幅16:9画像）
 *
 * 【継承元】thanksSale.min.css / thanksSale-ui.css（商品カード .saleTour 系）
 * 【注意】html{font-size:62.5%} と body の基本指定は common.css が持っています。
 *         このファイルには入れないでください（二重指定になります）。
 * ========================================================= */

/* =========================================================
   1. 変数
   ========================================================= */
:root {
  --mac-accent: #4660ef;        /* アクセント（青） */
  --mac-accent-weak: #eef1ff;   /* 淡いアクセント */
  --mac-accent-dark: #3348c4;   /* 影・押下 */
  --mac-price: #ea1f20;         /* 基本代金の文字色 */
  --mac-area-bg: #848484;       /* エリアラベルの背景 */
  --mac-bg: #f8fbff;            /* セクション背景 */
  --mac-line: #d9e3f2;          /* 罫線 */
  --mac-note: #666;             /* 注釈の文字色 */

  /* 共通コンテンツ幅（#wrapper の 1280px の内側で使う）
     --mac-content : 見出し・カード列・タブなどのブロック幅
     --mac-text    : 読み物（お知らせ・注意事項・FAQ・ポイント）の1行の長さ */
  --mac-content: 1100px;
  --mac-text: 900px;

  /* FVの表示高さの上限。ここだけで調整できます。
     FVは画面幅いっぱい（100vw）に広げ、高さは納品比率どおりに伸縮します。
     この上限は、1920pxより広いモニターで縦に伸びすぎるのを止めるためのものです
     （PC 1920×500 の等倍は 1920px幅で500px高 / SP 390×390 の等倍は 390px幅で390px高）。
     上限を超えた分だけ object-fit:cover で上下が中央基準でトリミングされます。 */
  --mac-fv-h-sp: 39rem;   /* 390px＝SP納品サイズの等倍 */
  --mac-fv-h-pc: 50rem;   /* 500px＝PC納品サイズの等倍 */
}

/* =========================================================
   2. 全体の共通ルール
   ========================================================= */
* { padding: 0; margin: 0; list-style: none; }

/* セクションの余白と行間を1か所で決める（senko と同じ考え方） */
:is(main > article > section) {
  padding: 3rem 0;
  line-height: 1.6;
}
@media (min-width: 768px) {
  :is(main > article > section) { padding: 5rem 0; }
}

/* 共通コンテナ：中央配置はここでまとめて決める（個別の margin 指定を増やさない） */
.pro,
.merit__list {
  max-width: var(--mac-content);
  margin-inline: auto;
}
/* 商品カード列は #wrapper の 1280px をそのまま使う（絞るとカードが小さくなる） */
.saleTour ul { margin-inline: auto; }
.news__list,
.tpPoint ul,
.notice details,
.faq ul,
.alertText {
  max-width: var(--mac-text);
  margin-inline: auto;
}

/* 中央寄せの見出しブロック */
:is(main > article > section) > h2 {
  text-align: center;
  color: var(--mac-accent);
  font-size: 2.4rem;
  line-height: 1.4;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  :is(main > article > section) > h2 { font-size: 3rem; }
}

/* 背景を敷くセクションは画面幅いっぱいに広げる（senko と同じ手法） */
.is-bleed {
  background: var(--mac-bg);
  padding: 3rem calc(50vw - 50%);
  margin: 0 calc(50% - 50vw);
}
@media (min-width: 768px) {
  .is-bleed { padding: 5rem calc(50vw - 50%); }
}

/* 注釈（本文より一段小さく。セクション側の p 指定に負けないよう p.note で指定する） */
p.note, .note { font-size: 1.3rem; color: var(--mac-note); margin-top: 1rem; line-height: 1.7; }
@media (min-width: 768px) { p.note, .note { font-size: 1.4rem; } }

/* パンくず・FV
   FVは既存特集ページ（senko.html 等）と同じく画面幅いっぱいに広げる。
   パンくずは本文幅（#wrapper 最大1280px）の内側に置いたまま。
   aspect-ratio を明示しているので、画像が未着・読込前でも高さが暴れない。 */
.cmp_header { padding: 0; margin: 0; background-color: inherit; }
/* パンくずは common.css の .cmp_topicpath をそのまま使う（既存特集ページと同じ仕様）。
   HOMEアイコン（/images/ico_home.svg）・区切り矢印・文字サイズ・余白はすべて共通CSS側。
   ここで padding や color を上書きすると既存ページとずれるため、上書きしない。
   ※ ul の class は `cmp_topicpath`（`inv` を付けない）。`inv` は色を白へ反転する指定で、
     白背景の本ページではHOMEアイコンと区切り矢印が見えなくなります。 */
/* 画像そのものを画面幅いっぱいに広げる。
   背景を全幅にする .is-bleed と違い、padding は付けない
   （padding を足すと内側が本文幅に戻ってしまい、画像が広がらない）。 */
.cmp_header .cmp_image {
  display: block;
  margin: 0 calc(50% - 50vw);
}
.cmp_header .cmp_image img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 390 / 390;             /* SP納品サイズ 390×390 */
  max-height: var(--mac-fv-h-sp);
  object-fit: cover; object-position: center;
}
@media (min-width: 768px) {
  .cmp_header .cmp_image img {
    aspect-ratio: 1920 / 500;          /* PC納品サイズ 1920×500 */
    max-height: var(--mac-fv-h-pc);
  }
}
/* FV画像のURLが未記入のときに出る枠。画像URLを入れると実画像に置き換わります */
.cmp_image--empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: min(100vw, var(--mac-fv-h-sp));
  background: var(--mac-accent-weak); border: 2px dashed var(--mac-accent);
  color: var(--mac-accent);
}
@media (min-width: 768px) {
  .cmp_image--empty { height: min(calc(100vw / 3.84), var(--mac-fv-h-pc)); }
}
.cmp_image--empty p { font-size: 1.5rem; font-weight: 700; line-height: 1.8; padding: 0 2rem; }
.cmp_image--empty p span {
  display: block; font-size: 1.2rem; font-weight: 400; color: var(--mac-note); margin-top: .6rem;
}

/* =========================================================
   3. FV直下（キャンペーン名の見出し ＋ 申込期限1行）
      FVから交通手段タブまでのスクロール量を抑えるため、上下余白は最小にする。
      キーワードチップとリード文は出力していない（訴求はFVバナー画像内で行う）。
   ========================================================= */
.pro { text-align: center; padding: 1.6rem 0 0; }
@media (min-width: 768px) { .pro { padding: 2rem 0 0; } }
.pro h2 {
  color: var(--mac-accent);
  font-size: 2.2rem;
  line-height: 1.4;
  margin-bottom: 0;
}
@media (min-width: 768px) { .pro h2 { font-size: 2.8rem; } }

/* 先取り申込期限：リボン見出し＋タグ2枚。画像は使わずCSSだけで作る。
   縦幅を増やさないため、PCは1行に並べ、SPでもタグを詰めて配置する。 */
.deadlineLine { text-align: center; padding: 1rem 0 .4rem; }
@media (min-width: 768px) { .deadlineLine { padding: 1.2rem 0 .6rem; } }
.deadlineLine__text {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .5rem .8rem; line-height: 1.3;
}
@media (min-width: 768px) { .deadlineLine__text { gap: 1rem; } }

/* リボン見出し（左右に切り込み） */
.deadlineLine__ttl {
  display: inline-block; background: #ffd83d; color: #d1365c;
  font-weight: 700; font-size: 1.3rem; letter-spacing: .04em;
  padding: .4rem 1.6rem; line-height: 1.4;
  clip-path: polygon(0 0, 100% 0, calc(100% - .8rem) 50%, 100% 100%, 0 100%, .8rem 50%);
}
@media (min-width: 768px) { .deadlineLine__ttl { font-size: 1.5rem; padding: .45rem 2rem; } }

/* タグ（荷札）。ふちのストライプは repeating-linear-gradient、穴は ::before */
.dlTag {
  display: inline-block; padding: 3px; border-radius: .6rem;
  background: repeating-linear-gradient(45deg,
              #ffd83d 0 5px, #ffffff 5px 10px, #8fd0ef 10px 15px, #ffffff 15px 20px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
.dlTag__in {
  position: relative; display: flex; align-items: baseline; gap: .5rem;
  background: #fff; border-radius: .45rem; padding: .3rem 1rem .3rem 1.9rem;
}
/* 荷札のひも穴 */
.dlTag__in::before {
  content: ""; position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  width: .7rem; height: .7rem; border-radius: 50%;
  background: #efe6d2; box-shadow: inset 0 0 0 1px #cdbfa4;
}
.dlTag__for { font-size: 1.2rem; font-weight: 700; color: #444; }
.dlTag strong { font-size: 1.6rem; font-weight: 700; white-space: nowrap; }
.dlTag--air strong { color: var(--mac-accent); }
.dlTag--ground strong { color: var(--mac-price); }
@media (min-width: 768px) {
  .dlTag__in { padding: .4rem 1.4rem .4rem 2.3rem; gap: .7rem; }
  .dlTag__for { font-size: 1.4rem; }
  .dlTag strong { font-size: 1.9rem; }
}
.deadlineLine .note { margin-top: .4rem; width: 100%; }

/* =========================================================
   4. おすすめの理由（アイコン＋短い見出し＋1〜2行の説明）
      FVとタイトルのすぐ下に置くので、縦を使わないことを優先する。
      senko.html の「ここがポイント！」の情報密度に合わせる。
      アイコンは既存の Font Awesome キットを使用（新規ライブラリは追加しない）。
   ========================================================= */
/* 商品一覧の下に置く。予約導線より前には入れない */
.merit--compact.is-bleed { padding-block: 2.6rem; }
@media (min-width: 768px) { .merit--compact.is-bleed { padding-block: 3.6rem; } }
/* 見出しは重くしない（メインタイトルより一段小さく） */
.merit--compact > h2 { font-size: 2rem; margin-bottom: 1.8rem; }
@media (min-width: 768px) { .merit--compact > h2 { font-size: 2.4rem; margin-bottom: 2.4rem; } }

.merit__list { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .merit__list { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }

/* SPは「アイコン左・文字右」の横型にして縦を使わない */
.merit__item {
  background: #fff; border-radius: 10px; padding: 1.4rem 1.6rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
  display: flex; align-items: center; gap: 1.4rem; text-align: left;
}
/* PCは3項目を横並びにするので、中は縦積みの中央揃え */
@media (min-width: 768px) {
  .merit__item {
    flex-direction: column; align-items: center; text-align: center;
    padding: 2rem 1.6rem; gap: 0;
  }
}
.merit__icon {
  flex: 0 0 auto;
  display: flex; justify-content: center; align-items: center;
  width: 4.4rem; height: 4.4rem;
  border-radius: 50%; background: var(--mac-accent-weak); color: var(--mac-accent);
}
@media (min-width: 768px) {
  /* senko の .senko-merit__icon（60px）に合わせる */
  .merit__icon { width: 5.6rem; height: 5.6rem; margin-bottom: 1.2rem; }
}
.merit__icon i { font-size: 2.2rem; line-height: 1; }
@media (min-width: 768px) { .merit__icon i { font-size: 2.6rem; } }

.merit__body { min-width: 0; }
.merit__item h3 {
  font-size: 1.8rem; color: var(--mac-accent); margin-bottom: .4rem;
  line-height: 1.4; letter-spacing: .02em;
}
@media (min-width: 768px) { .merit__item h3 { font-size: 2rem; margin-bottom: .8rem; } }
.merit__item p { font-size: 1.5rem; line-height: 1.7; }
@media (min-width: 768px) { .merit__item p { font-size: 1.6rem; line-height: 1.8; } }

/* =========================================================
   5. お知らせ
   ========================================================= */
.news__topic { font-size: 1.6rem; border-bottom: 1px solid #dfdfdf; padding-bottom: 1.2rem; line-height: 1.7; }
.news__topic:not(:last-of-type) { margin-bottom: 1.2rem; }
.news__topic span { display: flex; gap: .8rem; align-items: center; margin-bottom: .6rem; line-height: normal; font-size: 1.5rem; }
.news__topic span::before {
  content: "NEWS"; display: block; width: 4.5em; font-size: 1.1rem; text-align: center;
  border-radius: 3px; color: #fff; background-color: var(--mac-accent); padding: .3rem 0; font-weight: 700;
}

/* =========================================================
   6. 交通手段タブ（単層5分類）
   ========================================================= */
/* 交通手段タブは申込期限のすぐ下。上の余白は詰める */
.tpTabs { padding-top: 2rem; }
@media (min-width: 768px) { .tpTabs { padding-top: 2.6rem; } }
.tpTabs__title {
  text-align: center; font-size: 2rem; font-weight: 700;
  color: var(--mac-accent); margin-bottom: 1.6rem;
}
@media (min-width: 768px) { .tpTabs__title { font-size: 2.4rem; margin-bottom: 2rem; } }

/* 販売期間による出し分け。期間を設定した場合だけ is-gated が付き、JSが解除する。
   期間を使わない場合は is-gated が付かないので、JSが動かなくても表示される。 */
.tpTabs.is-gated { display: none; }

/* タブは中央寄せ。画面幅いっぱいには広げない（senko / blackfriday と同じ考え方） */
.tpTabs__nav {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem;
  max-width: 640px; margin: 0 auto 2rem;
}
@media (min-width: 768px) {
  /* PCでは本文幅（#wrapper 1280px）いっぱいに5等分。
     期限帯・商品カード列と左右の端が揃う（senko のタブも本文幅いっぱい） */
  .tpTabs__nav {
    grid-template-columns: repeat(5, 1fr);
    max-width: none;
    gap: 1rem;
  }
}
.tpTabs__nav .tp {
  appearance: none; cursor: pointer;
  border: 2px solid var(--mac-accent); background: #fff; color: var(--mac-accent);
  font-weight: 700; font-size: 1.6rem; line-height: 1.35;
  border-radius: .5em; padding: 1.2rem .6rem; transition: .2s;
  font-family: inherit;
}
@media (min-width: 768px) {
  .tpTabs__nav .tp { font-size: 1.8rem; padding: 1.6rem .8rem; }
}
.tpTabs__nav .tp:hover { background: var(--mac-accent-weak); }
.tpTabs__nav .tp.is-active { background: var(--mac-accent); color: #fff; }
.tpTabs__panels { margin-top: .5rem; }
.tpPanel { display: none; }
.tpPanel.is-active { display: block; }

/* 各パネル先頭の申込期限の帯 */
.tpDeadline {
  background: var(--mac-accent-weak); border-left: 6px solid var(--mac-accent);
  padding: 1.4rem 1.8rem; font-size: 1.7rem; margin-bottom: 2rem; border-radius: .3em; line-height: 1.5;
}
.tpDeadline strong { font-size: 1.25em; color: var(--mac-price); }

/* 交通手段ごとのポイント */
.tpPoint { margin-bottom: 2.4rem; }
.tpPoint h3 {
  text-align: center; font-size: 2.3rem; font-weight: 700; color: var(--mac-accent);
  margin-bottom: 1.5rem; line-height: 1.4;
}
@media (min-width: 768px) { .tpPoint h3 { font-size: 3rem; } }
.tpPoint ul { padding-left: 2rem; }
.tpPoint li { list-style: disc; font-size: 1.7rem; font-weight: 600; margin-bottom: .8rem; line-height: 1.6; }
.tpPoint li span { display: block; font-size: 1.4rem; font-weight: 400; color: var(--mac-note); }

/* 販売期間外の案内 */
.alertText { text-align: center; padding: 4rem 1rem; }
.alertText p { font-size: 1.8rem; line-height: 1.8; margin-bottom: 2rem; }
.alertText .tour-btn {
  display: inline-flex; justify-content: center; align-items: center;
  background: var(--mac-accent); color: #fff; padding: 1.5rem 3rem; border-radius: 50px;
  font-weight: 600; font-size: 1.6rem; text-decoration: none;
  box-shadow: 1px 3px 1px 0 var(--mac-accent-dark);
}

/* 商品が0件の交通手段 */
.comingSoon {
  text-align: center; padding: 5rem 1rem; line-height: 1.8; font-size: 1.7rem;
  background: #fff; border-radius: 10px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);
}
.comingSoon span {
  display: block; font-size: 2.2rem; font-weight: 700; color: var(--mac-accent);
  margin-bottom: .8rem; letter-spacing: .05em;
}

/* =========================================================
   7. 商品カード（thanksSale.min.css / thanksSale-ui.css を継承）
      情報の順序：エリア → スキー場 → ホテル → 設定日 → キャンペーン内容 → 基本代金
   ========================================================= */
.saleTour ul {
  padding: 0; display: grid; grid-template-columns: repeat(1, 1fr); gap: 2rem;
}
@media (min-width: 768px) {
  .saleTour ul { grid-template-columns: repeat(4, 1fr); }
  /* 商品が4枚に満たない交通手段は、カードを中央に寄せる。
     4列グリッドのまま置くと左端に固まって「左寄り」に見えるため。 */
  .saleTour ul[data-count="1"] { grid-template-columns: minmax(0, 305px); justify-content: center; }
  .saleTour ul[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 305px)); justify-content: center; }
  .saleTour ul[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 305px)); justify-content: center; }
}
.saleTour ul li {
  list-style: none; position: relative; background-color: #fff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1); border-radius: 10px; overflow: hidden;
}
.saleTour ul li a { display: flex; transition: .3s; text-decoration: none; color: inherit; }
@media (min-width: 768px) { .saleTour ul li a { flex-direction: column; } }
.saleTour ul li::before {
  content: ""; display: inline-block; width: 1.5rem; height: 1.5rem; background: #333;
  -webkit-mask: url(https://bigs.jp/icon/fontawesome/up-right-from-square-solid.svg) no-repeat center center/contain;
  mask: url(https://bigs.jp/icon/fontawesome/up-right-from-square-solid.svg) no-repeat center center/contain;
  position: absolute; top: 1.5rem; right: 1.5rem; z-index: 1;
}

/* 画像：カードごとの高さがバラつかないよう比率を固定 */
.saleTour .image { width: 25%; overflow: hidden; }
@media (min-width: 768px) { .saleTour .image { width: 100%; } }
.saleTour .image img {
  width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}

.saleTour .text { width: 75%; padding: 1.5rem; box-sizing: border-box; font-size: 1.5rem; }
@media (min-width: 768px) { .saleTour .text { width: 100%; padding: 2rem; } }
.saleTour .text::after {
  content: "予約はこちら"; display: block; background: var(--mac-accent); color: #fff;
  padding: 1.2rem .75rem; font-weight: 600; font-size: 1.5rem; border-radius: 50px;
  text-align: center; margin-top: 1.2rem;
}
@media (min-width: 768px) { .saleTour .text::after { font-size: 1.7rem; } }

/* エリア／交通手段のラベル */
.saleTour .text .area { display: flex; gap: .8rem; font-size: 1.3rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.saleTour .text .area span {
  background: var(--mac-area-bg); color: #fff; padding: .5rem .8rem; border-radius: .3em; font-weight: 600;
}
.saleTour .text .area span.icon1 { background: #32a842; }  /* JR */
.saleTour .text .area span.icon2 { background: #1ea6cf; }  /* 飛行機（北海道） */
.saleTour .text .area span.icon3 { background: #d65579; }  /* マイカー */
.saleTour .text .area span.icon4 { background: #dd631b; }  /* 朝発バス */
.saleTour .text .area span.icon5 { background: #1b7bdd; }  /* 夜発バス */

/* スキー場（カード内で最も目立たせる） */
.saleTour .text .slope { font-size: 1.9rem; font-weight: 700; line-height: 1.4; color: var(--mac-accent); }
.saleTour .text .slope::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro"; content: "\f7d0"; font-weight: 900; margin-right: .4em;
}
/* ホテル */
.saleTour .text .ttl-hotel { font-size: 1.6rem; font-weight: 500; line-height: 1.4; margin-top: .6rem; }
.saleTour .text .ttl-hotel::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro"; content: "\f594"; font-weight: 900; margin-right: .4em;
}
/* ツアー設定日 */
.saleTour .text .depart { font-size: 1.4rem; font-weight: 500; line-height: 1.4; margin-top: .6rem; color: #444; }
.saleTour .text .depart::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro"; content: "\f073"; font-weight: 900; margin-right: .4em;
}
.saleTour .text .depart span::before { content: "出発設定日："; }
/* キャンペーン内容 */
.saleTour .text .point { margin-top: 1rem; }
.saleTour .text .point span {
  display: inline-block; background: #fff4e5; color: #b3541e; border: 1px solid #f0b27a;
  border-radius: .3em; padding: .5rem .9rem; font-size: 1.4rem; font-weight: 700; line-height: 1.5;
}
/* 基本代金 */
.saleTour .text .price {
  color: var(--mac-price); font-size: 1.3rem; margin-top: 1.2rem;
  display: flex; flex-direction: column; align-items: flex-end; font-weight: 500;
}
.saleTour .text .price::before { content: "基本代金（税込・お一人様あたり）"; display: block; }
.saleTour .text .price span { font-size: 2.2rem; font-weight: 700; }

/* 飛行機（data-tp="air"）だけ、金額の下に価格変動型の注意書きを添える。
   ラベルは5分類とも共通の「基本代金（税込・お一人様あたり）」のまま。 */
.tpPanel[data-tp="air"] .saleTour .text .price::after {
  content: "※価格変動型ツアー";
  display: block;
  color: var(--mac-note);
  font-size: 1.2rem;
  font-weight: 400;
  margin-top: .2rem;
  line-height: 1.5;
}

/* 一覧リンクの帯 */
.tourListLink { margin-top: 3rem; }
.tourListLink a {
  background: var(--mac-accent-weak); border: 1px solid var(--mac-accent);
  padding: 1.5rem 1rem; display: flex; justify-content: center; align-items: center;
  border-radius: 50px; text-align: center; color: var(--mac-accent); font-weight: 600;
  font-size: 1.7rem; text-decoration: none; box-shadow: 1px 3px 1px 0 var(--mac-accent);
}

/* =========================================================
   8. 注意事項・よくある質問
   ========================================================= */
.notice details { font-size: 1.6rem; }
.notice summary { cursor: pointer; font-weight: 600; text-decoration: underline; width: fit-content; }
.notice details p { margin-top: 1.2rem; line-height: 1.9; }

.faq ul { padding: 0; }
.faq li { border-bottom: 1px solid #e7e7e7; margin-bottom: 1.5rem; }
.faq h3 {
  cursor: pointer; display: flex; column-gap: 1rem; padding-bottom: 1.5rem;
  font-size: 1.7rem; align-items: center; line-height: 1.6;
}
@media (min-width: 768px) { .faq h3 { font-size: 2rem; } }
.faq h3::before { content: "Q"; color: var(--mac-accent); font-size: 2.2rem; font-weight: 700; }
.faq h3 span { flex: 1; }
.faq .accordionWrap { display: none; padding-bottom: 1.5rem; font-size: 1.6rem; line-height: 1.9; }
.faq .accordionWrap.is-open { display: block; }

/* =========================================================
   9. SP（〜767px）：横型カード
       thanksSale-ui.css の考え方を踏襲しつつ、文字が小さくなりすぎないよう
       PCから極端に縮小せず、最低 1.2rem を確保する。
   ========================================================= */
@media (max-width: 767px) {
  .saleTour ul { gap: 1.2rem; }

  /* SPは縦型カード：画像をカード上部に全幅16:9で置く。
     PCのカードと同じ切り取り方になるので、入稿写真がそのまま見える。
     （画像を左に置く横型にすると、横長写真の左右6割が切れてしまう） */
  .saleTour ul li a { flex-direction: column; flex-wrap: nowrap; }
  .saleTour .image { width: 100%; flex: 0 0 auto; }
  .saleTour .image img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .saleTour .text { width: 100%; padding: 1.2rem 1.4rem 0; }

  /* エリア・交通手段のラベルは画像の上へ重ねる（thanksSale / senko と同じ手法） */
  .saleTour .text .area {
    position: absolute; top: .8rem; left: .8rem; z-index: 1;
    margin: 0; font-size: 1.2rem; gap: .5rem;
  }
  .saleTour .text .area span { padding: .3rem .7rem; }

  .saleTour .text .slope { font-size: 1.7rem; }
  .saleTour .text .ttl-hotel { font-size: 1.5rem; margin-top: .4rem; }
  .saleTour .text .depart { font-size: 1.35rem; margin-top: .4rem; }
  .saleTour .text .point { margin-top: .6rem; }
  .saleTour .text .point span { font-size: 1.35rem; padding: .35rem .7rem; }
  .saleTour .text .price { font-size: 1.2rem; margin-top: .8rem; }
  .saleTour .text .price span { font-size: 2rem; }
  .tpPanel[data-tp="air"] .saleTour .text .price::after { font-size: 1.15rem; }

  /* 「予約はこちら」はテキスト列から出して、カード幅いっぱいの下段に置く */
  .saleTour .text::after { display: none; }
  .saleTour ul li a::after {
    content: "予約はこちら"; order: 3;
    width: calc(100% - 2.8rem); margin: 1.2rem 1.4rem 1.4rem; box-sizing: border-box;
    background: var(--mac-accent); color: #fff; border-radius: 50px;
    padding: 1rem .75rem; font-weight: 600; font-size: 1.5rem; text-align: center;
  }

  .tpTabs__nav { max-width: 100%; }
  .tpDeadline { font-size: 1.5rem; padding: 1.2rem 1.4rem; }
}