/* =============================================================
   GOOD SPORTS v2026 — 冬WP(White Season)のページ固有コンポーネント
   前提: base.css を先に読み込むこと(トークン・ボタン・ヘッダー等)
   対象: バス / レンタル / シーズンレンタル / 冬トップ(日英)
   ============================================================= */

/* ---- hero (desktop) ---- */
.gs-hero { max-width: 1440px; margin: 0 auto; box-sizing: border-box; position: relative; }
.gs-hero-wm {
  position: absolute; left: 0; right: 0; top: 34%;
  font-family: Poppins, sans-serif; font-weight: 800; font-size: 190px; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(7, 182, 227, .13);
  pointer-events: none; white-space: nowrap; overflow: hidden; z-index: 0;
}
.gs-hero-grid { display: grid; grid-template-columns: .9fr 1.4fr; gap: 0; align-items: stretch; position: relative; }
.gs-hero-left { display: flex; flex-direction: column; padding: 40px 24px 32px 48px; position: relative; z-index: 1; }
.gs-hero-kicker { display: flex; align-items: center; gap: 12px; }
.gs-hero-kicker::before { content: ''; display: inline-block; width: 34px; height: 2px; background: var(--gs-cyan); }
.gs-hero-kicker span { font-family: Poppins, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .24em; color: var(--gs-cyan); }
.gs-marker { margin: 30px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-weight: 900; letter-spacing: .05em; line-height: 1; }
.gs-marker .m0w { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: fit-content; }
.gs-marker .m0k { color: var(--gs-text); font-size: 20px; font-weight: 900; letter-spacing: 0; text-align: justify; text-align-last: justify; }
.gs-marker .m0 { background: var(--gs-text); color: #fff; font-size: 21px; padding: 9px 22px; letter-spacing: .08em; }
.gs-marker .tail { display: inline-block; width: .5em; overflow: visible; }
.gs-marker .m1 { background: var(--gs-text); color: #fff; font-size: 34px; padding: 12px 22px; }
.gs-marker .m2 { background: var(--gs-cyan); color: #fff; font-size: 34px; padding: 12px 22px; }
/* inline-flex だと「。」が別の項目として扱われ、帯が2行になったとき文章から離れて
   右端に取り残される。文字と同じ流れに置く */
.gs-marker .m3 { background: var(--gs-yellow); color: var(--gs-text); font-size: 44px; padding: 14px 22px; display: inline-block; }
.gs-marker .m3 small { font-size: 30px; }
.gs-hero-news { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--gs-body-c); padding-top: 36px; }
.gs-hero-news .d { color: var(--gs-cyan); font-family: Poppins, sans-serif; font-weight: 600; }
.gs-hero-news .t { background: var(--gs-cyan); color: #fff; font-size: 10px; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.gs-hero-news .s { white-space: normal; }  /* お知らせの詳細ページが無いので省略せず全文を出す */
.gs-hero-photo { position: relative; min-height: 820px; z-index: 1; }
.gs-hero-photo .ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 94%, 50% 100%, 0 94%);
}
.gs-hero-card {
  position: absolute; right: 32px; bottom: 48px; background: rgba(255, 255, 255, .97);
  border-radius: 18px; padding: 28px 32px; text-align: center;
  box-shadow: 0 16px 44px rgba(15, 63, 139, .24); max-width: 420px;
}
.gs-hero-card .hc-title { font-weight: 900; font-size: clamp(15px, 1.8vw, 20px); letter-spacing: .04em; white-space: nowrap; }
.gs-hero-card .hc-title .c { color: var(--gs-cyan); }
.gs-hero-card .hc-badges { display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; margin-top: 10px; }
.gs-hero-card .b-month { background: var(--gs-cyan); color: #fff; font-weight: 900; font-size: 11.5px; padding: 5px 14px; border-radius: 999px; }
.gs-hero-card .b-off { background: var(--gs-red); color: #fff; font-weight: 900; font-size: 11.5px; padding: 5px 12px; border-radius: 999px; }
.gs-hero-card .b-normal { font-size: 12px; font-weight: 700; color: var(--gs-sub); }
.gs-strike { text-decoration: line-through; text-decoration-color: var(--gs-red); text-decoration-thickness: 2px; }
.gs-hero-card .hc-price { display: flex; align-items: baseline; justify-content: center; gap: 2px; white-space: nowrap; margin-top: 4px; font-weight: 900; color: var(--gs-text); }
.gs-hero-card .hc-price .n { font-family: Poppins, sans-serif; font-weight: 800; font-size: clamp(34px, 3.8vw, 50px); color: var(--gs-cyan); padding: 0 6px; letter-spacing: 0; }
.gs-hero-card .hc-price .u { font-size: clamp(14px, 1.6vw, 18px); }
.gs-hero-card .hc-sep { border-top: 1px dashed var(--gs-line2); margin: 16px 0 12px; }
.gs-hero-card .hc-web { color: var(--gs-cyan); font-weight: 900; font-size: clamp(14px, 1.7vw, 19px); margin-top: 6px; letter-spacing: .02em; white-space: nowrap; }
.gs-hero-card .gs-btn-cta { display: block; font-size: clamp(12.5px, 1.3vw, 15px); padding: 16px 14px; border-radius: 999px; margin-top: 18px; box-shadow: 0 8px 20px rgba(251, 198, 15, .4); }
/* hero mobile */
.gs-hero-m-head { position: relative; z-index: 2; padding: 13px 20px 0; box-sizing: border-box; }
.gs-hero-m-head .gs-marker { margin-top: 18px; gap: 8px; }
.gs-hero-m-head .gs-marker .m0w { gap: 7px; }
.gs-hero-m-head .gs-marker .m0k { font-size: 13.5px; }
.gs-hero-m-head .gs-marker .m0 { font-size: 14.5px; padding: 7px 15px; }
.gs-hero-m-head .gs-marker .m1, .gs-hero-m-head .gs-marker .m2 { font-size: 21px; padding: 9px 15px; }
.gs-hero-m-head .gs-marker .m3 { font-size: 28px; padding: 10px 15px; }
.gs-hero-m-head .gs-marker .m3 small { font-size: 20px; }
/* 狭い画面では inline-flex だと本文だけが折り返して句点が行末に取り残される。
   通常のインラインフローに戻して、句点が本文に続くようにする。 */
.gs-hero-m-head .gs-marker .m3 { display: inline-block; line-height: 1.35; }
.gs-hero-m-photo { position: relative; margin-top: -34px; z-index: 0; }
.gs-hero-m-photo .ph-wrap { height: 400px; position: relative; }
.gs-hero-m-photo .ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
}
/* 割引バッジ。条件と割引率を 1 行に並べる(レンタルのヒーローと同じ組み方)。
   2 段だと縦に伸びて、下に続くマーカーの帯を押し下げてしまう */
.gs-hero-m-badge {
  position: absolute; top: 14px; right: 14px; background: #fff; border: 2px solid var(--gs-yellow);
  border-radius: 10px; padding: 6px 14px; transform: rotate(3deg);
  box-shadow: 0 6px 18px rgba(15, 63, 139, .16);
  display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
}
.gs-hero-m-badge .l1 { font-weight: 700; font-size: 10px; letter-spacing: .1em; color: var(--gs-text); }
.gs-hero-m-badge .l2 { color: var(--gs-cyan); font-weight: 900; font-size: 13px; }
.gs-hero-m-badge .l2 .n { font-family: Poppins, sans-serif; font-size: 16px; }
/* 表示テスト: 割引バッジの中身を 2 通り用意して出し分ける。
   a = 現行の 1 行、b = パソコンの料金カードと同じ 3 つ並び。
   どちらを出すかはヘッダーの小さなスクリプトが読み込みの最初に決めるので、
   もう一方が一瞬見えることはない。JS が動かない環境では a が出る */
.gs-hero-m-badge-b { display: none; }
html.gs-ab-badge-b .gs-hero-m-badge-a { display: none; }
html.gs-ab-badge-b .gs-hero-m-badge-b { display: flex; gap: 7px; align-items: center; }
.gs-hero-m-badge-b .b-month { background: var(--gs-cyan); color: #fff; font-weight: 900; font-size: 10.5px; padding: 4px 11px; border-radius: 999px; }
.gs-hero-m-badge-b .b-off { background: var(--gs-red); color: #fff; font-weight: 900; font-size: 10.5px; padding: 4px 10px; border-radius: 999px; }
.gs-hero-m-badge-b .b-normal { font-size: 10.5px; font-weight: 700; color: var(--gs-sub); }
.gs-hero-m-markers { position: absolute; left: 12px; bottom: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* 割引バッジは帯の一番上に並べる(レンタルと同じ置き方)。
   単独で使うときの右上固定は、この中では効かせない */
.gs-hero-m-markers .gs-hero-m-badge { position: static; transform: none; }
/* マーカーの見た目は .k1 / .k2 に限定する。子孫セレクタにすると、
   同じ枠に置いた別デザインのバッジ(白地・黄枠)の中の span まで塗ってしまう。 */
.gs-hero-m-markers .k1, .gs-hero-m-markers .k2 {
  background: var(--gs-cyan); color: #fff; font-weight: 900;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); white-space: nowrap;
}
.gs-hero-m-markers .k1 { font-size: 15.5px; padding: 9px 14px; letter-spacing: .05em; }
/* 金額が大きいぶん行送りをそのままにすると帯が縦に間延びする。
   数字の高さに合わせて詰め、上下の余白は padding で作る */
.gs-hero-m-markers .k2 { font-size: 14px; padding: 10px 15px; letter-spacing: .03em; display: flex; align-items: baseline; line-height: 1.05; }
/* 金額はページで一番大きい数字にする。デスクトップの料金カード(.hc-price .n)と
   同じ主役の扱いで、地の文字との差を 2.4 倍まで開く */
.gs-hero-m-markers .k2 .n { font-family: Poppins, sans-serif; font-weight: 800; font-size: 34px; padding: 0 5px; color: var(--gs-yellow); }
.gs-hero-m-cv { padding: 18px 20px 0; box-sizing: border-box; }
.gs-hero-m-cv .cv-card { background: #fff; border-radius: 16px; padding: 20px 18px; margin-top: 14px; text-align: center; box-shadow: 0 10px 28px rgba(15, 63, 139, .12); }
.gs-hero-m-cv .cv-card .l1 { font-weight: 900; font-size: 13px; white-space: nowrap; }
.gs-hero-m-cv .cv-card .l1 .y { color: var(--gs-yellow); font-family: Poppins, 'Noto Sans JP', sans-serif; font-size: 16px; }
.gs-hero-m-cv .cv-card .l2 { color: var(--gs-cyan); font-weight: 900; font-size: 18px; margin-top: 6px; white-space: nowrap; }
.gs-hero-m-cv .gs-btn-cta { display: block; font-size: 13.5px; padding: 15px 12px; border-radius: 999px; margin-top: 14px; box-shadow: 0 8px 20px rgba(251, 198, 15, .35); }

/* ---- route card ---- */
.gs-route-card { background: #fff; border: 1px solid var(--gs-line); border-radius: 16px; padding: 20px 24px; box-shadow: 0 8px 24px rgba(15, 63, 139, .08); max-width: 420px; margin-top: 36px; }
.gs-route { display: flex; align-items: center; }
.gs-route .pt { text-align: center; flex-shrink: 0; }
.gs-route .pt .lbl { font-size: 11px; color: var(--gs-sub); }
.gs-route .pt .nm { font-weight: 900; font-size: 14px; white-space: nowrap; }
.gs-route .line { flex: 1; position: relative; margin: 0 14px; height: 34px; }
.gs-route .line::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 3px dotted var(--gs-cyan); }
.gs-route .line .dot-l, .gs-route .line .dot-r { position: absolute; top: 50%; width: 9px; height: 9px; background: var(--gs-cyan); border-radius: 999px; }
.gs-route .line .dot-l { left: 0; transform: translate(-2px, -50%); }
.gs-route .line .dot-r { right: 0; transform: translate(2px, -50%); }
.gs-route .line .bus {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--gs-cyan); color: #fff; font-size: 16px; width: 34px; height: 34px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
}
.gs-route-note { text-align: center; font-size: 12px; color: var(--gs-body-c); margin-top: 10px; }
.gs-route-note strong { color: var(--gs-cyan); font-family: Poppins, 'Noto Sans JP', sans-serif; font-size: 14px; }

/* ---- cyan announce band ---- */
.gs-announce { background: var(--gs-cyan); }
.gs-announce-in {
  max-width: 1440px; margin: 0 auto; padding: 18px 48px; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px;
}
.gs-announce-in .msg { color: #fff; font-weight: 900; font-size: 17px; white-space: nowrap; }
.gs-announce-in .pill { display: inline-flex; align-items: center; background: #fff; color: var(--gs-text); font-weight: 700; font-size: 12px; padding: 8px 20px; border-radius: 999px; white-space: nowrap; }
.gs-announce-in .pill .n { color: var(--gs-cyan); font-family: Poppins, sans-serif; font-weight: 700; }

/* ---- point cards ---- */
.gs-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 32px; position: relative; margin-top: 64px; }
.gs-point { background: #fff; color: var(--gs-text); border-radius: 24px; padding: 0 32px 32px; box-shadow: var(--gs-shadow-lg); text-align: center; margin-top: 44px; position: relative; }
.gs-point .ph-wrap {
  width: 112px; height: 112px; margin: -44px auto 0; position: relative; border-radius: 999px;
  border: 4px solid #fff; box-shadow: 0 8px 24px rgba(15, 63, 139, .16); box-sizing: border-box; overflow: hidden;
}
.gs-point .ph-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.gs-point .num { font-family: Poppins, sans-serif; font-weight: 800; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--gs-cyan); margin-top: 18px; }
.gs-point .plabel { color: var(--gs-gold); font-family: Poppins, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .14em; margin-top: 6px; }
.gs-point .ttl { font-weight: 900; font-size: 16px; line-height: 1.9; margin-top: 10px; }
.gs-hl { background: linear-gradient(transparent 62%, var(--gs-yellow) 62%); }

/* ---- price band ---- */
.gs-price-wrap { max-width: 1280px; margin: 96px auto 0; padding: 0 40px; box-sizing: border-box; }
.gs-price-band { background: var(--gs-cyan); border-radius: 28px; padding: 80px 64px 72px; position: relative; overflow: hidden; color: #fff; }
.gs-price-band .gs-wm { top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 230px; -webkit-text-stroke: 2px rgba(255, 255, 255, .12); }
.gs-price-band .snow { position: absolute; border-radius: 999px; background: rgba(255, 255, 255, .32); }
.gs-price-head { position: relative; text-align: center; }
.gs-badge-bubble {
  display: inline-block; background: #fff; border: 3px solid var(--gs-yellow); color: var(--gs-text);
  font-weight: 900; font-size: 15px; padding: 12px 32px; border-radius: 999px; position: relative;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}
.gs-badge-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 12px solid var(--gs-yellow);
}
.gs-badge-bubble::before {
  content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); z-index: 1;
  width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 9px solid #fff;
}
.gs-badge-bubble .n { color: var(--gs-red); font-family: Poppins, sans-serif; font-size: 18px; }
/* 英語だと割引の表記が「25% / Off」と割れる。数字と Off は離さない。
   バッジ本体の折り返しは span の手前の空白で行う(そのため空白は span の外に置く) */
.gs-badge-bubble .n, .gs-price-cv .l2 .y, .gs-hero-m-badge .l2,
.gs-nb, .gs-float-cta .n { white-space: nowrap; }
.gs-price-head h2 { margin: 28px 0 0; font-weight: 900; font-size: 34px; letter-spacing: .06em; color: #fff; }
.gs-price-head h2 .u { background: linear-gradient(transparent 68%, rgba(251, 198, 15, .9) 68%); padding: 0 2px; }
.gs-price-head .note { margin: 16px 0 0; font-size: 13.5px; line-height: 2.1; }
.gs-price-head .note strong { color: #fff; border-bottom: 2px solid var(--gs-yellow); }
.gs-tickets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 56px 48px; max-width: 960px; margin: 56px auto 0; }
.gs-ticket-wrap { position: relative; }
.gs-ticket-cat {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: 15px; padding: 10px 38px; box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.gs-ticket-badge {
  position: absolute; top: -24px; right: 14px; z-index: 2; width: 88px; height: 88px;
  border-radius: 999px; background: var(--gs-red); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.2; transform: rotate(10deg);
  box-shadow: 0 8px 20px rgba(190, 2, 19, .35);
}
.gs-ticket-badge .n { font-family: Poppins, sans-serif; font-weight: 800; font-size: 26px; }
.gs-ticket-badge .n small { font-size: 15px; }
.gs-ticket-badge .off { font-weight: 900; font-size: 12px; letter-spacing: .08em; }
.gs-ticket {
  position: relative; background: #fff; border-radius: 18px; color: var(--gs-text);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .16); display: flex; align-items: stretch; overflow: hidden;
}
.gs-ticket-stub {
  flex-shrink: 0; width: 74px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; border-right: 2px dashed var(--gs-line2);
  background: #f4f8fa; padding: 18px 0;
}
.gs-ticket-stub .ico { font-size: 22px; }
.gs-ticket-stub .lbl { writing-mode: vertical-rl; font-family: Poppins, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .3em; color: var(--gs-cyan); }
.gs-ticket-notch { position: absolute; left: 74px; width: 18px; height: 18px; border-radius: 999px; background: var(--gs-cyan); transform: translateX(-50%); }
.gs-ticket-notch.a { top: -9px; }
.gs-ticket-notch.b { bottom: -9px; }
.gs-ticket-body { flex: 1; padding: 42px 20px 24px; }
.gs-ticket-body .limited { text-align: center; font-weight: 900; font-size: 15px; color: var(--gs-cyan); }
.gs-price-row { display: flex; align-items: baseline; justify-content: center; gap: 12px; white-space: nowrap; margin-top: 4px; }
.gs-price-row .old { font-size: 17px; font-weight: 700; color: var(--gs-sub); }
/* 打ち消し線は中の span に引く。.old 自体に引くと、モバイルで .old を幅100%の行にしたとき
   線が文字の外まで伸びてしまう */
.gs-price-row .old > span { text-decoration: line-through; text-decoration-color: var(--gs-red); text-decoration-thickness: 3px; }
.gs-price-row .num { font-family: Poppins, sans-serif; font-weight: 800; font-size: 68px; line-height: 1; color: var(--gs-yellow); letter-spacing: -.01em; }
.gs-price-row .yen { font-weight: 900; font-size: 26px; }
.gs-ticket-body .normal { font-size: 12px; color: var(--gs-sub); margin-top: 8px; text-align: center; }
.gs-deadline {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 22px; padding: 12px 26px; margin-top: 44px; font-size: 13px; font-weight: 700;
}
.gs-deadline .tag { color: var(--gs-yellow); font-family: Poppins, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .26em; }
.gs-deadline .d { color: var(--gs-yellow); font-family: Poppins, 'Noto Sans JP', sans-serif; font-size: 17px; }
.gs-price-note { font-size: 12px; line-height: 2.2; margin-top: 18px; opacity: .95; }
.gs-price-cv { margin-top: 48px; position: relative; }
.gs-price-cv .l1 { font-weight: 900; font-size: 18px; }
.gs-price-cv .l2 { font-weight: 900; font-size: 26px; margin-top: 8px; }
.gs-price-cv .l2 .y { color: var(--gs-yellow); font-family: Poppins, 'Noto Sans JP', sans-serif; font-size: 34px; }
.gs-price-cv .l3 { font-size: 13px; margin-top: 8px; opacity: .95; }
.gs-price-cv .gs-btn-cta { font-weight: 900; font-size: clamp(13px, 1.6vw, 17px); padding: 20px clamp(24px, 4vw, 56px); margin-top: 26px; box-shadow: 0 14px 36px rgba(0, 0, 0, .22); }
@media (max-width: 1079px) {
  .gs-price-wrap { padding: 0 20px; }
  .gs-price-band { padding: 52px 22px; }
  .gs-price-row .num { font-size: 42px; }
  .gs-price-row .yen { font-size: 18px; }
  .gs-ticket { flex-direction: column; }
  .gs-ticket-stub { width: auto; flex-direction: row; gap: 8px; padding: 10px 14px; border-right: none; border-bottom: 2px dashed var(--gs-line2); }
  .gs-ticket-stub .lbl { writing-mode: horizontal-tb; letter-spacing: .22em; }
  .gs-ticket-notch { left: auto; top: 44px; transform: translateY(-50%); }
  .gs-ticket-notch.a { left: -9px; }
  .gs-ticket-notch.b { left: auto; right: -9px; bottom: auto; }
  .gs-ticket-badge { width: 62px; height: 62px; top: -16px; right: 8px; }
  .gs-ticket-badge .n { font-size: 18px; }
  .gs-price-row { gap: 8px; }
  .gs-offer-panel .gs-price-row { flex-wrap: wrap; row-gap: 2px; }
}

/* ---- timetable ---- */
.gs-tt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 32px; margin-top: 56px; position: relative; }
.gs-tt-card { background: #fff; border-radius: 20px; padding: 32px 30px 26px; box-shadow: var(--gs-shadow-lg); }
.gs-tt-card.single { max-width: 640px; margin: 32px auto 0; }
.gs-route-head { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; }
.gs-route-head .line { width: 120px; position: relative; margin: 0 22px; height: 30px; flex-shrink: 0; }
.gs-route-head .line::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 3px dotted var(--gs-cyan); }
.gs-route-head .line .bus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--gs-cyan); color: #fff; font-size: 13px; width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
/* 時刻表カードの見出し。地名がカードの中で一番大きい要素になるようにし、
   「出発 / 到着」はラベルとして小さく置く(点線を詰めた分を地名に回す) */
.gs-route-head .pt .lbl {
  display: inline-block; background: #f2fafd; border: 1px solid #b8e4f3; color: #0595bb;
  font-weight: 900; font-size: 10px; letter-spacing: .1em; padding: 3px 11px; border-radius: 999px;
}
.gs-route-head .pt .nm { font-weight: 900; font-size: clamp(19px, 2.3vw, 26px); line-height: 1.35; letter-spacing: .01em; white-space: nowrap; margin-top: 7px; }
.gs-tt-period { text-align: center; margin-top: 12px; }
.gs-tt-period .new,
.gs-newsline .new {
  display: inline-block; background: #5f9412; color: #fff;
  font-family: Poppins, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .16em;
  padding: 4px 12px; border-radius: 999px; line-height: 1.4; flex-shrink: 0;
}
.gs-tt-period .new { margin-right: 10px; vertical-align: 1px; }
.gs-tt-period .range { background: var(--gs-pale); color: var(--gs-navy); font-family: Poppins, sans-serif; font-weight: 600; font-size: 11.5px; padding: 5px 16px; border-radius: 999px; }
.gs-tt-scroll { overflow-x: auto; }
.gs-tt { min-width: 480px; width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 20px; }
.gs-tt tr.head { border-bottom: 2px solid var(--gs-text); }
.gs-tt tr.head td { padding: 8px 4px; font-weight: 700; }
.gs-tt tr.head td .no {
  display: inline-block; background: #f4f8fa; border: 1px solid var(--gs-line); color: var(--gs-navy);
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 12px; padding: 4px 10px; border-radius: 8px;
}
.gs-tt tr { border-bottom: 1px solid var(--gs-line3); }
.gs-tt tr:last-child { border-bottom: none; }
.gs-tt td { padding: 12px 4px; }
.gs-tt td.place { color: var(--gs-cyan); font-weight: 700; }
/* 停留所名は、収まらないときだけ意味の切れ目で折る。
   wbr は nowrap でも改行機会として働くため、後半を block にして切り替える。
   パソコンは1行、スマホは「新千歳空港 / 国内線ターミナル」の形で必ず2行 */
.gs-tt td.place .p1, .gs-tt td.place .p2 { white-space: nowrap; }
@media (min-width: 1080px) {
  .gs-tt td.place { white-space: nowrap; }
  /* 停留所名を1行に保つと便が多い表で数px あふれるので、その分を左右の余白から返す */
  .gs-tt td { padding-left: 2px; padding-right: 2px; }
}
@media (max-width: 1079px) { .gs-tt td.place .p2 { display: block; } }
.gs-tt td.rest, .gs-tt tr.rest td { color: var(--gs-gold); font-weight: 700; }
.gs-tt td.time { text-align: center; font-family: Poppins, sans-serif; font-weight: 600; }
.gs-tt td.rest-v { text-align: center; color: var(--gs-gold); }
.gs-tt-footnote { font-size: 11px; color: var(--gs-sub); margin-top: 10px; text-align: right; }
.gs-tt-notes { font-size: 12px; line-height: 2.3; color: var(--gs-body-c); text-align: center; margin-top: 40px; }
.gs-tt-notes .r,
.gs-connect-note .r { color: var(--gs-red); }
/* 接続時間の下の注意書き。時刻表の下の注意書き(.gs-tt-notes)と同じ扱いにする */
.gs-connect-note { max-width: 920px; margin: 16px auto 0; text-align: center; font-size: 12px; color: var(--gs-body-c); line-height: 2.3; }
/* スマホでは1項目1行にする。中央揃えのまま流し込むと、折り返しの位置で
   ※ の頭が行ごとにずれて不揃いに見える(実測で 26 / 182 / 26 / 233px と散っていた)。
   1 項目を1ブロックにして左を揃え、続きの行は ※ の下に潜り込ませる */
@media (max-width: 767px) {
  .gs-tt-notes,
  .gs-connect-note { text-align: left; }
  .gs-tt-notes .r,
  .gs-connect-note .r { display: block; float: left; margin-right: 4px; }
  .gs-tt-notes .n,
  .gs-connect-note .n { display: block; overflow: hidden; margin-bottom: 6px; }
}

/* ---- connect cards ---- */
.gs-connect { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 32px; max-width: 920px; margin: 72px auto 0; }
.gs-connect-card { position: relative; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--gs-shadow-lg); }
.gs-connect-card .hd {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 24px 28px 0; font-weight: 900; font-size: 16px; white-space: nowrap; color: var(--gs-text);
}
.gs-connect-card .hd::before { content: ''; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.gs-connect-card .hd.dom::before { background: var(--gs-cyan); }
.gs-connect-card .hd.intl::before { background: var(--gs-navy); }
.gs-connect-card .hd-sep { border-bottom: 1px dashed var(--gs-line2); margin: 14px 28px 0; }
.gs-connect-card .bd { padding: 10px 28px 24px; }
.gs-connect-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.gs-connect-row + .gs-connect-row { border-top: 1px dotted var(--gs-line2); }
.gs-connect-row .q { font-size: 13.5px; }
.gs-connect-row .v { color: var(--gs-red); font-weight: 900; font-size: 15px; white-space: nowrap; }
.gs-connect-row .v .n { font-family: Poppins, sans-serif; font-size: 26px; }

/* ---- alert / info boxes ---- */
.gs-box { position: relative; border: 1px solid var(--gs-line); border-radius: 16px; padding: 34px 40px 32px; background: #fff; margin-top: 64px; }
.gs-box.alert { border: 2px solid var(--gs-red); border-radius: 20px; padding: 34px 44px 36px; margin-top: 72px; }
.gs-box.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.gs-box-head { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--gs-text); padding-bottom: 16px; margin-bottom: 26px; }
.gs-box-head::before { content: ''; width: 7px; height: 26px; background: var(--gs-lime); flex-shrink: 0; }
.gs-box.alert .gs-box-head::before, .gs-box-head.red::before { background: var(--gs-red); }
.gs-box-head span { font-weight: 900; font-size: 18px; letter-spacing: .04em; }
.gs-box-strip { background: #fdf1f2; border-radius: 12px; padding: 16px 24px; text-align: center; }
.gs-box-strip .big { color: var(--gs-red); font-weight: 900; font-size: 15px; }
.gs-box-strip .big .n { font-family: Poppins, 'Noto Sans JP', sans-serif; font-size: 22px; padding: 0 2px; }
.gs-box-strip .sub { font-size: 12px; color: var(--gs-body-c); margin-top: 4px; }
.gs-note-list { font-size: 13.5px; line-height: 2.2; color: var(--gs-body-c); display: flex; flex-direction: column; gap: 12px; }
.gs-note-list > div { border-bottom: 1px dotted var(--gs-line2); padding-bottom: 12px; }
.gs-note-list > div:last-child { border-bottom: none; padding-bottom: 0; }
.gs-note-list .mk { color: var(--gs-red); font-weight: 900; }
.gs-note-list .mk.c { color: var(--gs-cyan); }
.gs-note-list .sub { font-size: 12px; color: var(--gs-sub); }
.gs-pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; margin-top: 24px; }
.gs-pay-card { background: #f4f8fa; border-radius: 14px; padding: 20px 26px; }
.gs-pay-card .hd { display: flex; align-items: center; gap: 10px; }
.gs-pay-card .hd .ico { width: 38px; height: 38px; border-radius: 999px; background: var(--gs-cyan); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.gs-pay-card .hd .t { color: var(--gs-cyan); font-weight: 900; font-size: 15px; }
.gs-pay-card p { margin: 10px 0 0; font-size: 12.5px; line-height: 2; color: var(--gs-body-c); }
.gs-stat-pills { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.gs-stat-pill { display: inline-flex; align-items: baseline; gap: 8px; background: #f4f8fa; border: 1px solid var(--gs-line); border-radius: 999px; padding: 8px 22px; font-size: 12.5px; font-weight: 700; color: var(--gs-body-c); }
.gs-stat-pill .c { color: var(--gs-cyan); font-family: Poppins, 'Noto Sans JP', sans-serif; font-weight: 800; font-size: 17px; }
.gs-stat-pill .r { color: var(--gs-red); font-family: Poppins, sans-serif; font-weight: 800; font-size: 17px; }
.gs-anchor-tags { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 24px; }
.gs-anchor-tags a { display: inline-flex; align-items: center; gap: 6px; color: var(--gs-cyan); font-weight: 700; font-size: 12.5px; }
.gs-anchor-tags a > span:first-child { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.gs-anchor-tags a .ar { font-size: 10px; }
/* 二次アクション用の下線テキストリンク(CTA階層v3) */
.gs-link { display: inline-flex; align-items: center; gap: 8px; color: var(--gs-cyan); font-weight: 700; }
.gs-link > span:first-child { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
/* チケット内の種別表記(旧ライムピルの置き換え) */
.gs-ticket-kind-en { text-align: center; font-family: Poppins, sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .26em; color: var(--gs-cyan); }
.gs-ticket-kind { text-align: center; font-weight: 900; font-size: 22px; margin-top: 4px; }
.gs-ticket-kind span { background: linear-gradient(transparent 64%, rgba(251, 198, 15, .9) 64%); padding: 0 4px; }
/* 国際線到着ガイドのミニステップレール */
.gs-mini-flow { display: flex; flex-direction: column; }
.gs-mini-flow .row { display: flex; gap: 14px; }
.gs-mini-flow .rail { display: flex; flex-direction: column; align-items: center; }
.gs-mini-flow .dot { width: 14px; height: 14px; border-radius: 999px; border: 4px solid var(--gs-yellow); background: #fff; box-sizing: border-box; flex-shrink: 0; }
.gs-mini-flow .rail .ln { flex: 1; width: 0; border-left: 2px dotted var(--gs-cyan); margin: 4px 0; }
.gs-mini-flow .bd { padding-bottom: 16px; }
.gs-mini-flow .step { color: var(--gs-cyan); font-family: Poppins, sans-serif; font-weight: 700; font-size: 12.5px; }
.gs-mini-flow .t { font-weight: 700; font-size: 13px; }
.gs-mini-flow .s { font-size: 12px; color: var(--gs-sub); line-height: 1.9; }
/* Contact ネイビー帯 */
.gs-contact-wrap { max-width: 1280px; margin: 120px auto 0; padding: 0 40px; box-sizing: border-box; }
.gs-contact-band { background: var(--gs-navy); border-radius: 28px; padding: 72px 64px; position: relative; overflow: hidden; color: #fff; text-align: center; }
.gs-contact-band .gs-wm { top: 36%; left: 50%; transform: translate(-50%, -50%); font-size: 170px; -webkit-text-stroke: 2px rgba(255, 255, 255, .10); }
.gs-contact-band h2 { margin: 0; font-family: Poppins, sans-serif; font-weight: 800; font-size: 60px; color: #fff; }
.gs-contact-band h2 .y { color: var(--gs-yellow); }
.gs-contact-band .sub { margin: 8px 0 0; font-size: 12px; letter-spacing: .2em; opacity: .85; }
.gs-contact-band .lead { margin: 26px 0 0; font-weight: 900; font-size: 22px; line-height: 1.9; }
.gs-contact-band .lead .u { background: linear-gradient(transparent 68%, rgba(251, 198, 15, .9) 68%); padding: 0 2px; }
.gs-contact-band .desc { margin: 12px 0 0; font-size: 14px; line-height: 2.1; opacity: .95; }
.gs-contact-band .ctas { display: flex; justify-content: center; gap: 20px; margin-top: 36px; flex-wrap: wrap; }
.gs-btn-white { display: inline-flex; align-items: center; gap: 12px; background: #fff; color: var(--gs-text) !important; font-weight: 600; border-radius: 999px; white-space: nowrap; font-family: Poppins, 'Noto Sans JP', sans-serif; letter-spacing: .06em; }
.gs-btn-white .ar { color: var(--gs-cyan); }
@media (max-width: 1079px) { .gs-contact-wrap { padding: 0 20px; } .gs-contact-band { padding: 52px 22px; } .gs-contact-band h2 { font-size: 40px; } }
.gs-h3 { color: var(--gs-cyan); font-weight: 900; font-size: 17px; margin-top: 32px; }
.gs-table { min-width: 480px; width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
.gs-table tr.head { border-bottom: 2px solid var(--gs-text); }
.gs-table tr { border-bottom: 1px solid var(--gs-line3); }
.gs-table tr:last-child { border-bottom: none; }
.gs-table td { padding: 12px 6px; }
.gs-table td.h { color: var(--gs-gold); font-weight: 700; }
.gs-table td.place { color: var(--gs-cyan); font-weight: 700; }
.gs-table td.ok { text-align: center; color: var(--gs-cyan); font-weight: 900; }
.gs-table td.ng { text-align: center; color: var(--gs-red); font-weight: 900; }
.gs-table td.c { text-align: center; }
.gs-table-note { font-size: 12px; line-height: 2.2; color: var(--gs-sub); margin-top: 12px; }
.gs-refund-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; margin-top: 16px; }
.gs-refund-card { background: #f4f8fa; border-radius: 12px; padding: 18px 22px; font-size: 12.5px; line-height: 2; color: var(--gs-body-c); }
.gs-method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; margin-top: 20px; }
.gs-method-card { background: #f4f8fa; border-radius: 12px; padding: 18px 22px; }
.gs-method-card .t { color: var(--gs-cyan); font-weight: 700; font-size: 14px; }
.gs-method-card p { margin: 6px 0 0; font-size: 12.5px; line-height: 2; color: var(--gs-body-c); }
.gs-company-band { background: var(--gs-pale); border-radius: 12px; padding: 18px 24px; margin-top: 24px; font-size: 12.5px; color: var(--gs-navy); line-height: 2; text-align: center; }
.gs-terms-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.gs-red-frame { border: 2px solid var(--gs-red); border-radius: 10px; padding: 12px 20px; text-align: center; font-size: 13px; color: var(--gs-body-c); }
.gs-red-frame .n { color: var(--gs-red); font-weight: 900; font-size: 17px; }
.gs-wifi-note { display: inline-block; border: 1px solid var(--gs-cyan); border-radius: 12px; padding: 12px 22px; margin-top: 18px; background: #fff; }
.gs-wifi-note .l1 { color: var(--gs-cyan); font-weight: 700; font-size: 12.5px; line-height: 1.9; }
.gs-wifi-note .l2 { font-size: 10.5px; color: var(--gs-sub); margin-top: 4px; line-height: 1.8; }
@media (max-width: 1079px) {
  .gs-box, .gs-box.alert { padding: 26px 20px; }
}

/* ---- flow ---- */
.gs-flow-band { background: var(--gs-pale); margin-top: 120px; position: relative; overflow: hidden; }
.gs-flow-band .gs-wm { top: 64px; left: 0; font-size: 170px; -webkit-text-stroke: 2px rgba(15, 63, 139, .10); }
.gs-flow-in { max-width: 1080px; margin: 0 auto; padding: 96px 40px; box-sizing: border-box; position: relative; }
.gs-flow-list { margin-top: 56px; display: flex; flex-direction: column; }
.gs-flow-row { display: flex; gap: 22px; align-items: stretch; }
.gs-flow-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 64px; }
.gs-flow-num { font-family: Poppins, sans-serif; font-weight: 800; font-size: 40px; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--gs-cyan); }
.gs-flow-dot { width: 16px; height: 16px; border-radius: 999px; border: 5px solid var(--gs-yellow); background: #fff; box-sizing: border-box; margin-top: 12px; }
.gs-flow-line { flex: 1; width: 0; border-left: 3px dotted var(--gs-cyan); margin-top: 6px; }
.gs-flow-card { flex: 1; background: #fff; border-radius: 16px; padding: 22px 30px; box-shadow: 0 10px 28px rgba(15, 63, 139, .08); margin-bottom: 26px; }
.gs-flow-card.last { margin-bottom: 0; }
.gs-flow-card .hd { display: flex; align-items: center; flex-wrap: wrap; }
.gs-flow-card .hd .t { font-weight: 900; font-size: 17px; }
.gs-flow-card .hd .tag-y { font-weight: 900; font-size: 12.5px; margin-left: 12px; white-space: nowrap; background: linear-gradient(transparent 62%, var(--gs-yellow) 62%); padding: 0 3px; }
.gs-flow-card .hd .tag-c { color: var(--gs-cyan); font-weight: 900; font-size: 12.5px; margin-left: 12px; white-space: nowrap; border-bottom: 2px solid var(--gs-cyan); padding-bottom: 1px; }
.gs-flow-card p { margin: 8px 0 0; font-size: 13px; line-height: 2.1; color: var(--gs-body-c); }
@media (max-width: 1079px) {
  .gs-flow-in { padding: 64px 20px; }
  .gs-flow-rail { width: 40px; }
  .gs-flow-num { font-size: 26px; -webkit-text-stroke: 1.5px var(--gs-cyan); }
  .gs-flow-card { padding: 16px 18px; }
  .gs-flow-row { gap: 14px; }
}

/* ---- meeting point ---- */
.gs-map-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 24px; }
.gs-map-grid .cell { min-height: 320px; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--gs-line); }
.gs-map-grid .cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1079px) { .gs-map-grid { grid-template-columns: 1fr; } }


/* =============================================================
   レンタルページ固有コンポーネント(デザインシステム v3)
   ============================================================= */
/* ギアタグ型プランカード(ハトメ穴付き) */
.gs-gear-card { position: relative; background: #fff; border-radius: 34px 34px 18px 18px; color: var(--gs-text); box-shadow: 0 16px 44px rgba(0, 0, 0, .16); padding: 58px 30px 28px; display: flex; flex-direction: column; }
.gs-gear-hole { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 999px; background: var(--gs-cyan); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3), 0 0 0 6px #eef4f8; }
.gs-gear-kind-en { font-family: Poppins, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .26em; color: var(--gs-cyan); text-align: center; }
.gs-gear-kind { font-weight: 900; font-size: 28px; margin-top: 8px; text-align: center; }
.gs-gear-kind .hl-y { background: linear-gradient(transparent 64%, rgba(251, 198, 15, .9) 64%); padding: 0 4px; }
.gs-gear-kind .hl-c { background: linear-gradient(transparent 64%, rgba(7, 182, 227, .35) 64%); padding: 0 4px; }
.gs-gear-copy { color: #8bb52a; font-weight: 700; font-size: 14px; line-height: 2; margin-top: 18px; }
.gs-maker-tag { border: 1px solid var(--gs-line); border-radius: 6px; font-family: Poppins, sans-serif; font-weight: 700; font-size: 10.5px; padding: 5px 10px; color: var(--gs-text); }
.gs-maker-btn { display: inline-block; background: #fff; border: 1px solid var(--gs-line); border-bottom: 3px solid var(--gs-cyan); border-radius: 10px; font-family: Poppins, sans-serif; font-weight: 800; font-size: 15px; padding: 14px 26px; color: var(--gs-text) !important; box-shadow: 0 6px 18px rgba(15, 63, 139, .06); transition: border-color .15s ease, color .15s ease; }
.gs-maker-btn:hover { color: var(--gs-cyan) !important; border-color: var(--gs-cyan); }
/* カラースクエア凡例 */
.gs-csq { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.gs-csq::before { content: ''; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; background: var(--sq, var(--gs-cyan)); }
.gs-csq.lime { --sq: var(--gs-lime); }
.gs-csq.yellow { --sq: var(--gs-yellow); }
.gs-csq.cyan { --sq: var(--gs-cyan); }
.gs-csq.navy { --sq: var(--gs-navy); }
.gs-csq .t { font-weight: 900; font-size: 14.5px; }
.gs-csq-s::before { width: 10px; height: 10px; }
.gs-csq-s .t { font-size: 12px; }
/* タイポ見出し(—英字—) */
.gs-typo-head { display: flex; align-items: center; justify-content: center; gap: 14px; }
.gs-typo-head::before, .gs-typo-head::after { content: ''; display: inline-block; width: 28px; height: 2px; background: var(--gs-cyan); }
.gs-typo-head span { font-family: Poppins, sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .24em; color: var(--gs-cyan); }
/* カタログ破線カード */
.gs-cat-card { background: #fff; color: var(--gs-text); border: 1px dashed #9ecbe0; border-radius: 12px; padding: 20px 22px; }
.gs-cat-card .maker { font-family: Poppins, sans-serif; font-weight: 700; font-size: 11px; color: var(--gs-sub); margin-top: 12px; }
.gs-cat-card .model { font-family: Poppins, sans-serif; font-weight: 800; font-size: 19px; color: var(--gs-cyan); }
.gs-cat-card .spec { font-size: 11.5px; line-height: 1.9; color: var(--gs-body-c); margin-top: 8px; }
.gs-cat-card .level { color: var(--gs-cyan); font-weight: 900; font-size: 12px; letter-spacing: .06em; border-bottom: 2px solid var(--gs-cyan); padding-bottom: 2px; }
.gs-cat-card .copy { color: var(--gs-cyan); font-weight: 900; font-size: 13.5px; line-height: 1.9; margin-top: 10px; }
.gs-cat-card .desc { margin: 6px 0 0; font-size: 11.5px; line-height: 1.9; color: var(--gs-sub); }
.gs-cat-card .new { color: #8bb52a; font-family: Poppins, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .18em; }
.gs-cat-card .ladies { color: #d4677a; font-weight: 700; font-size: 11px; letter-spacing: .08em; }
.gs-cat-card .ph { margin-top: 14px; border-radius: 8px; overflow: hidden; background: #fff; }
.gs-cat-card .ph img { display: block; width: 100%; height: auto; }
/* FEATURES 行 */
.gs-feature-item { display: flex; align-items: center; gap: 14px; padding: 16px 4px; font-size: 14px; font-weight: 700; }
.gs-feature-item::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; border-radius: 999px; border: 5px solid var(--gs-yellow); background: #fff; box-sizing: border-box; }
.gs-feature-item.bb { border-bottom: 1px dotted var(--gs-line); }
/* シアンのオファーパネル */
.gs-offer-panel { position: relative; background: var(--gs-cyan); border-radius: 20px; padding: 44px 32px 40px; color: #fff; overflow: hidden; }
.gs-offer-panel .gs-wm { top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 120px; -webkit-text-stroke: 2px rgba(255, 255, 255, .12); }
.gs-offer-panel .limited { font-weight: 900; font-size: 16px; position: relative; }
.gs-offer-panel .gs-price-row { gap: 14px; margin-top: 14px; position: relative; }
.gs-offer-panel .gs-price-row .old { color: #fff; opacity: .85; }
.gs-offer-panel .gs-price-row .num { font-size: 76px; }
.gs-offer-panel .note { font-size: 12px; margin-top: 10px; opacity: .9; position: relative; }
.gs-offer-panel .gs-btn-cta { display: block; max-width: 640px; margin: 26px auto 0; font-weight: 900; font-size: clamp(14px, 1.6vw, 17px); padding: 20px 24px; text-align: center; box-shadow: 0 14px 36px rgba(0, 0, 0, .22); position: relative; }
/* Step ラベル(料金シアン帯内) */
.gs-step-en { font-family: Poppins, sans-serif; font-weight: 800; font-size: 30px; color: var(--gs-yellow); }
.gs-step-t { font-weight: 900; font-size: 20px; margin-top: 4px; }
/* 対応サイズカード */
.gs-size-card { background: #fff; color: var(--gs-text); border-radius: 16px; padding: 24px; box-shadow: 0 10px 28px rgba(15, 63, 139, .08); }
.gs-size-card .t { color: var(--gs-cyan); font-weight: 900; font-size: 14.5px; }
.gs-size-card .ph { margin-top: 14px; border-radius: 8px; overflow: hidden; background: #fff; }
.gs-size-card .ph img { display: block; width: 100%; height: auto; }
.gs-size-card .row { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px dotted var(--gs-line); padding: 11px 2px; font-size: 12px; }
.gs-size-card .row .v { font-weight: 700; line-height: 1.9; }
.gs-size-card .note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.9; color: var(--gs-sub); }
/* 白パネル(シアン帯内の料金表など) */
.gs-white-panel { position: relative; background: #fff; border-radius: 18px; color: var(--gs-text); box-shadow: 0 16px 44px rgba(0, 0, 0, .16); }

/* ---- タブピル(シーズンレンタル) ---- */
.gs-tabs { display: inline-flex; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: 6px; gap: 6px; flex-wrap: wrap; justify-content: center; }
.gs-tab-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 34px; border-radius: 999px; background: transparent; color: #fff !important; font-weight: 900; font-size: 15px; white-space: nowrap; transition: background .15s ease; }
.gs-tab-btn .en { font-family: Poppins, sans-serif; font-weight: 600; font-size: 9.5px; letter-spacing: .18em; opacity: .75; }
.gs-tab-btn.active { background: #fff; color: var(--gs-cyan) !important; }

/* 白パネルの上に置く場合。既定のタブは濃い背景に敷く前提で
   非アクティブが白文字固定のため、そのままだと白地に白で見えない。 */
.gs-tabs.on-light { background: var(--gs-snow); border-color: var(--gs-line); }
.gs-tabs.on-light .gs-tab-btn { color: var(--gs-sub) !important; }
/* 非アクティブ側も「押して切り替えられる」と分かるよう、薄い枠のピルにする */
.gs-tabs.on-light .gs-tab-btn:not(.active) { background: rgba(255, 255, 255, .6); border: 1px solid var(--gs-line); }
.gs-tabs.on-light .gs-tab-btn:hover { color: var(--gs-text) !important; }
/* アクティブは白地に濃い文字。シアン地に白文字だとコントラスト比 2.4 で読みにくい。
   選択中であることは白背景・影・英字のシアンで示す。 */
.gs-tabs.on-light .gs-tab-btn.active {
  background: #fff; color: var(--gs-text) !important; box-shadow: 0 4px 14px rgba(15, 63, 139, .16);
}
.gs-tabs.on-light .gs-tab-btn.active .en { color: var(--gs-cyan); opacity: 1; }

/* ---- Service カード / コラージュ(総合トップ) ---- */
/* 反応は位置でなく状態: カードは動かさず、行き先を示す矢印だけ進める */
.gs-svc-card .gs-link > span:last-child { display: inline-block; transition: transform .15s ease; }
.gs-svc-card:hover .gs-link > span:last-child { transform: translateX(4px); }
.gs-svc-card:hover .gs-link { color: #0595bb; }  /* 基底のシアンより一段濃く */

/* モバイル/タブレット: ヒーロー(お知らせ行)と告知バンドの間に余白 */
@media (max-width: 1079px) {
  .gs-announce { margin-top: 32px; }
}

/* 英語: マーカー見出しは語の途中で折り返さず、行ごとに帯を作る */
html[lang^="en"] .gs-marker span { white-space: normal; }
html[lang^="en"] .gs-marker .m3 { align-items: baseline; }

/* =============================================================
   UPDATE 02: タブレット縦(768〜1079px)
   モバイル用の固定値がこの帯にそのまま効いていたため、
   コピーが小さく・ヒーロー写真が横長に潰れていた。
   ・文字は幅に連動(clamp)させ、デスクトップ値へ近づける
   ・ヒーロー写真は高さを幅連動にし、pc画像(16:9)の比率に合わせる
   ・ページ側のインライン font-size を上書きするため !important を使う
     (スマホ表示は一切変えない: 767px以下にはこのブロックは効かない)
   ============================================================= */
@media (min-width: 768px) and (max-width: 1079px) {

  /* --- ヒーロー見出し(マーカー) --- */
  .gs-hero-m-head { padding: 34px 32px 0; }
  .gs-hero-m-head .gs-marker { margin-top: 22px; gap: 10px; }
  .gs-hero-m-head .gs-marker .m1,
  .gs-hero-m-head .gs-marker .m2 {
    font-size: clamp(24px, 3.05vw, 32px) !important;
    padding: 11px 20px !important;
  }
  .gs-hero-m-head .gs-marker .m3 {
    font-size: clamp(31px, 3.95vw, 42px) !important;
    padding: 13px 20px !important;
  }
  .gs-hero-m-head .gs-marker .m3 small { font-size: clamp(22px, 2.75vw, 29px) !important; }
  /* 英語は語が長いぶん一段控えめに */
  html[lang^="en"] .gs-hero-m-head .gs-marker .m1,
  html[lang^="en"] .gs-hero-m-head .gs-marker .m2 { font-size: clamp(21px, 2.65vw, 28px) !important; }
  html[lang^="en"] .gs-hero-m-head .gs-marker .m3 { font-size: clamp(26px, 3.35vw, 35px) !important; }

  /* --- ヒーロー写真: 400px固定をやめ、pc画像(約16:9)の比率に寄せる --- */
  .gs-hero-m-photo { margin-top: -44px; }
  .gs-hero-m-photo .ph-wrap { height: min(58vw, 620px); }
  .gs-hero-m-photo picture { display: contents; }

  /* --- 写真上のマーカー・バッジ --- */
  .gs-hero-m-markers { left: 22px; bottom: 30px; gap: 10px; }
  .gs-hero-m-markers .k1 { font-size: clamp(17px, 2.15vw, 22px); padding: 11px 18px; }
  .gs-hero-m-markers .k2 { font-size: clamp(14px, 1.75vw, 18px); padding: 10px 18px; }
  .gs-hero-m-markers .k2 .n { font-size: clamp(34px, 4.1vw, 43px); }
  .gs-hero-m-badge { top: 20px; right: 22px; padding: 8px 18px; }
  .gs-hero-m-badge .l1 { font-size: 11.5px; }
  .gs-hero-m-badge .l2 { font-size: 15px; }
  .gs-hero-m-badge .l2 .n { font-size: 19px; }
  html.gs-ab-badge-b .gs-hero-m-badge-b { gap: 9px; }
  .gs-hero-m-badge-b .b-month,
  .gs-hero-m-badge-b .b-off { font-size: 12px; padding: 5px 13px; }
  .gs-hero-m-badge-b .b-normal { font-size: 12px; }

  /* --- ヒーロー直下のCVカード --- */
  .gs-hero-m-cv { padding: 22px 32px 0; }
  .gs-hero-m-cv .cv-card {
    max-width: 620px; margin-left: auto; margin-right: auto; padding: 26px 28px;
  }
  .gs-hero-m-cv .cv-card .l1 { font-size: 15px; }
  .gs-hero-m-cv .cv-card .l1 .y { font-size: 19px; }
  .gs-hero-m-cv .cv-card .l2 { font-size: 22px; }
  .gs-hero-m-cv .gs-btn-cta { font-size: 15.5px; padding: 17px 14px; }

  /* --- お知らせ行・ルートカード --- */
  .gs-hero-news { padding-left: 32px; padding-right: 32px; font-size: 13.5px; }
  .gs-hero-news .s { max-width: none; }
  .gs-route-card { max-width: 620px; margin-left: auto; margin-right: auto; }

  /* --- セクションの左右余白(20px→32px) --- */
  .gs-sec { padding-left: 32px; padding-right: 32px; }
  .gs-announce-in { padding-left: 32px; padding-right: 32px; }

}

/* プランの見出しがスマホで「スタンダードプラ / ン」と1文字だけ泣き別れしていた。
   カード内側が 231px しかなく、28px の見出し10文字(パフォーマンスプラン)が入らない。
   カードの左右余白を詰めて字面も少し落とし、1行に収める。 */
@media (max-width: 767px) {
  .gs-gear-card { padding-left: 20px !important; padding-right: 20px !important; }
  .gs-gear-kind { font-size: clamp(17px, 5.6vw, 28px); }
  /* マーカーの左右余白 4px が効いて、375px では文字が枠より 1px だけ広くなっていた */
  .gs-gear-kind .hl-y, .gs-gear-kind .hl-c { padding: 0 2px; }
}

/* ------------------------------------------------------------------
   UPDATE 03  レンタル: メーカー詳細 / 板カタログ
   ------------------------------------------------------------------ */
.gs-maker-d { }
.gs-maker-d > summary::-webkit-details-marker { display: none; }
.gs-maker-d > summary::marker { content: ''; }
.gs-maker-d[open] { flex-basis: 100%; }
.gs-maker-d[open] > summary { background: var(--gs-cyan); color: #fff; border-color: var(--gs-cyan); }
.gs-board-d > summary::-webkit-details-marker { display: none; }
.gs-board-d > summary::marker { content: ''; }
.gs-board-d[open] .faq-plus { transform: rotate(45deg); }
/* グリッド内でカードが自然幅に押し広げられるのを防ぐ */
.gs-board { min-width: 0; }
.gs-board img { max-width: 100%; }
.gs-board .gs-en { overflow-wrap: anywhere; }
/* 狭い画面で告知文が nowrap のまま横にはみ出し、ページに横スクロールが出るのを防ぐ */
@media (max-width: 767px) {
  .gs-announce-in .msg { white-space: normal; text-align: center; }
}

/* カタログ: 画像はクリックで原寸を開く / 「すべて見る」は塗りつぶさない軽いボタン */
.gs-cat-card a.ph { display: block; line-height: 0; }
.gs-cat-card { min-width: 0; }
.gs-more-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  list-style: none; cursor: pointer; margin: 0 auto; max-width: 400px;
  background: #fff; border: 2px solid var(--sq, var(--gs-cyan)); border-radius: 999px;
  padding: 14px 30px; font-weight: 900; font-size: 14px; color: var(--sq, var(--gs-cyan));
  transition: background .15s ease, color .15s ease;
}
.gs-more-btn.lime { --sq: var(--gs-lime); }
.gs-more-btn.yellow { --sq: #c79a00; }
.gs-more-btn.cyan { --sq: var(--gs-cyan); }
.gs-more-btn::-webkit-details-marker { display: none; }
.gs-more-btn .faq-plus { font-size: 17px; font-weight: 700; transition: transform .2s ease; }
.gs-more-btn:hover { background: var(--sq, var(--gs-cyan)); color: #fff; }

/* =============================================================
   レンタル予約 — 受け取り・返却方法の選択モーダル
   旧 /rental/confirm/(中間ページ)の置き換え。フォームは 1 本で、
   受け取り×返却の組み合わせが商品(product_id)に対応する。
   ページ内に .gs-pickup-overlay を置いたページだけで動く。
   ============================================================= */
.gs-pickup-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: none; align-items: flex-end; justify-content: center;
  padding: 16px; background: rgba(15, 34, 54, .55);
}
.gs-pickup-overlay.open { display: flex; animation: gsPickupFade .18s ease-out; }
@media (min-width: 768px) { .gs-pickup-overlay { align-items: center; } }
.gs-pickup {
  background: #fff; border-radius: 22px; width: 100%; max-width: 760px;
  padding: 0; position: relative; box-sizing: border-box;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden;
  box-shadow: 0 32px 80px rgba(15, 40, 70, .34);
}
.gs-pickup-overlay.open .gs-pickup { animation: gsPickupUp .26s cubic-bezier(.22, .8, .36, 1); }
@keyframes gsPickupFade { from { opacity: 0; } }
@keyframes gsPickupUp { from { transform: translateY(18px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .gs-pickup-overlay.open, .gs-pickup-overlay.open .gs-pickup { animation: none; }
}
/* 閉じるボタンは見出しと同じ行に置き、中身と一緒にスクロールさせる。
   固定にすると狭い端末で本文に重なるため。画面外に出ても、
   背景のタップと Esc で閉じられる(site.js)。 */
.gs-pickup-close {
  flex-shrink: 0; width: 38px; height: 38px;
  border: 1px solid var(--gs-line); border-radius: 999px;
  background: var(--gs-snow); color: var(--gs-sub);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.gs-pickup-close:hover { background: #e9f0f4; }
.gs-pickup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 0 0 20px; }
.gs-pickup-kicker { font-family: Poppins, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .24em; color: var(--gs-cyan); }
.gs-pickup-title { margin: 12px 0 0; font-weight: 900; font-size: 26px; line-height: 1.45; letter-spacing: .02em; color: var(--gs-text); }
.gs-pickup-lead { margin: 10px 0 0; font-size: 13px; line-height: 2; color: var(--gs-body-c); }
.gs-pickup-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 26px 40px 24px; }

/* 主要の2プラン。塗りの角丸は CTA だけに使い、プラン名は見出しとして組む
   (色は番号の四角・英字ラベル・枠線だけに乗せ、面は塗らない) */
.gs-plan-main { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gs-plan {
  display: flex; flex-direction: column; text-decoration: none;
  border: 2px solid var(--gs-cyan); border-radius: 18px; padding: 26px 28px;
  box-shadow: 0 14px 34px rgba(15, 63, 139, .1); background: #fff;
}
.gs-plan.c2 { border-color: #8bb52a; }
.gs-plan .hd { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.gs-plan .no {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: var(--gs-cyan); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Poppins, sans-serif; font-weight: 800; font-size: 13px;
}
.gs-plan.c2 .no { background: #8bb52a; }
.gs-plan .lb { font-family: Poppins, sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: .2em; color: var(--gs-cyan); white-space: nowrap; }
.gs-plan.c2 .lb { color: #8bb52a; }
.gs-plan .nm { display: block; font-weight: 900; font-size: 20px; line-height: 1.55; margin-top: 13px; color: var(--gs-text); }
.gs-plan .bd { display: block; flex: 1; margin-top: 9px; font-size: 13px; line-height: 2; color: var(--gs-body-c); }
.gs-plan .go {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 20px; padding: 18px 20px; border-radius: 999px;
  background: var(--gs-yellow); color: var(--gs-text);
  font-weight: 900; font-size: 15px; white-space: nowrap;
  box-shadow: 0 12px 28px rgba(251, 198, 15, .42); transition: transform .15s ease;
}
.gs-plan:hover .go { transform: scale(1.03); }

/* 3つ目は「受け取りと返却で方法が違う場合」の併用。主要2つと同格にしない */
.gs-plan-sub {
  display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center;
  margin-top: 22px; padding: 20px 24px; border-radius: 14px; background: #f6f9fb;
}
.gs-plan-sub .hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gs-plan-sub .no {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  background: #eef3fb; color: var(--gs-navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Poppins, sans-serif; font-weight: 800; font-size: 10px;
}
.gs-plan-sub .lb { font-family: Poppins, sans-serif; font-weight: 600; font-size: 9.5px; letter-spacing: .2em; color: var(--gs-sub); white-space: nowrap; }
.gs-plan-sub .nm { display: block; font-weight: 900; font-size: 14.5px; line-height: 1.6; margin-top: 9px; color: var(--gs-text); }
.gs-plan-sub .bd { margin: 6px 0 0; font-size: 12px; line-height: 1.95; color: var(--gs-sub); max-width: 520px; }
.gs-plan-sub .go2 {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  background: #fff; border: 1.5px solid var(--gs-yellow); color: var(--gs-text);
  font-weight: 900; font-size: 12.5px; padding: 13px 24px; border-radius: 999px;
  text-decoration: none; transition: background .15s ease;
}
.gs-plan-sub .go2:hover { background: #fffaea; }
.gs-plan-sub .go2 .gs-en { color: #c79a00; }

.gs-pickup-foot { margin: 24px -40px -24px; padding: 20px 40px 22px; background: #f4f8fa; }
.gs-pickup-foot p { margin: 0; font-size: 12.5px; line-height: 2; color: var(--gs-body-c); }
.gs-pickup-foot a { font-weight: 700; }

@media (max-width: 1079px) {
  .gs-pickup-head { padding: 0 0 12px; gap: 10px; }
  .gs-pickup-close { width: 32px; height: 32px; font-size: 13px; }
  /* 「ご希望のプランを選択してください」「プランや用具は…選べます。」が
     それぞれ1行に収まる大きさにする(閉じるボタンの分を差し引いた幅で計算) */
  .gs-pickup-title { font-size: 15.5px; margin-top: 6px; letter-spacing: .01em; }
  /* 英語は文が長いぶん少し落とす(Choose how you want to receive your gear) */
  html[lang^="en"] .gs-pickup-title { font-size: 14px; }
  .gs-pickup-lead { margin-top: 6px; font-size: 10.5px; line-height: 1.8; letter-spacing: 0; }
  .gs-pickup-kicker { font-size: 9.5px; letter-spacing: .22em; }
  .gs-pickup-body { padding: 14px 16px 22px; }
  .gs-plan-main { grid-template-columns: 1fr; gap: 11px; }
  .gs-plan { border-radius: 15px; padding: 15px 16px 16px; box-shadow: 0 10px 24px rgba(15, 63, 139, .09); }
  .gs-plan .hd { gap: 9px; }
  .gs-plan .no { width: 27px; height: 27px; border-radius: 9px; font-size: 12px; }
  .gs-plan .lb { font-size: 8.5px; letter-spacing: .18em; }
  .gs-plan .nm { font-size: 16px; line-height: 1.5; margin-top: 8px; }
  .gs-plan .bd { margin-top: 6px; font-size: 11px; line-height: 1.9; }
  .gs-plan .go { margin-top: 11px; padding: 14px; font-size: 13.5px; box-shadow: 0 8px 20px rgba(251, 198, 15, .32); }
  .gs-plan-sub { grid-template-columns: 1fr; gap: 0; margin-top: 11px; padding: 15px 16px 16px; border-radius: 13px; }
  .gs-plan-sub .no { width: 20px; height: 20px; border-radius: 6px; font-size: 9.5px; }
  .gs-plan-sub .lb { font-size: 8.5px; letter-spacing: .18em; }
  .gs-plan-sub .nm { font-size: 13px; line-height: 1.55; margin-top: 7px; }
  .gs-plan-sub .bd { margin-top: 5px; font-size: 10.5px; line-height: 1.85; }
  .gs-plan-sub .go2 { margin-top: 11px; padding: 11px 20px; font-size: 11.5px; }
  .gs-pickup-foot { margin: 10px 0 0; padding: 13px 15px; border-radius: 12px; }
  .gs-pickup-foot p { font-size: 10.5px; line-height: 1.85; }
}
@media (max-width: 359px) {
  .gs-pickup-title { font-size: 12.5px; }
  .gs-pickup-lead { font-size: 9.5px; }
}

/* ---- ヒーローのスライドショー ----
   既存の .gs-hero-photo / .gs-hero-m-photo の中で使う。
   1枚目以外を重ねて置き、opacity で切り替える。 */
.gs-hero-slides { position: relative; width: 100%; height: 100%; }
.gs-hero-slides .ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s ease;
}
.gs-hero-slides .ph.is-on { opacity: 1; }
/* JS が動かない環境では 1 枚目だけ出す。JS が動けば is-on が付いた枚が勝つ。
   :first-child に .ph:not(.is-on) を重ねると打ち消し合うので、
   「is-on が 1 つも無いとき」だけ 1 枚目を出す書き方にする。 */
.gs-hero-slides:not(:has(.is-on)) .ph:first-child { opacity: 1; }

/* ---- 料金表: WEB割価格と定価の並記 ----
   セル内で「定価(小さく打ち消し)」を上、「WEB割価格」を下に置く。
   定価は WEB割 ÷ 0.75(= 25%OFF)で算出した値。 */
.gs-price-cell { display: flex; flex-direction: column; align-items: center; line-height: 1.35; }
.gs-price-cell .was {
  font-family: Poppins, sans-serif; font-size: 11.5px; color: var(--gs-sub);
  text-decoration: line-through; text-decoration-color: var(--gs-red);
  text-decoration-thickness: 2px;
}
.gs-price-cell .now {
  font-family: Poppins, sans-serif; font-weight: 800; font-size: 16px;
  color: var(--gs-text); letter-spacing: -.01em; margin-top: 1px;
}
/* 通常料金を伏せて運用する場合。値は HTML に残したまま隠すだけなので、
   ページ側の $gs_show_regular を true に戻せばそのまま復活する。 */
.gs-price-card.hide-was .gs-price-cell .was { display: none; }
.gs-price-card.hide-was .gs-price-cell .now { margin-top: 0; }
/* WEB割であることを表の見出しでも示す */
.gs-web-badge {
  display: inline-block; background: var(--gs-yellow); color: var(--gs-text);
  font-weight: 900; font-size: 10px; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}

/* ---- ページ内リンクバー ----
   画面下端に固定する 4 項目のアンカーバー。料金・時刻表など
   ページ後方にある情報へ 1 タップで着けるようにする。
   スクロール条件は付けず常時出す(追尾CTAだけが後から出る)。 */
.gs-page-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid #dbe7ee;
  box-shadow: 0 -6px 24px rgba(15, 63, 139, .10);
}
.gs-page-nav > div {
  max-width: 760px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.gs-page-nav a {
  display: flex; align-items: center; justify-content: center;
  gap: 9px; padding: 11px 6px; color: #22303a; text-decoration: none;
}
.gs-page-nav a + a { border-left: 1px solid #e9f0f4; }
.gs-page-nav a:hover { background: #f2fafd; }
.gs-page-nav a:focus-visible { background: #f2fafd; outline: 2px solid var(--gs-cyan); outline-offset: -2px; }
.gs-page-nav .ic {
  width: 26px; height: 26px; border-radius: 999px;
  background: #f2fafd; border: 1.5px solid #b8e4f3; flex-shrink: 0; color: #07b6e3;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Poppins, 'Noto Sans JP', sans-serif; font-weight: 800; font-size: 15px;
}
.gs-page-nav .lb { font-weight: 900; font-size: 11.5px; letter-spacing: .04em; white-space: nowrap; }
.gs-page-nav .lb-s { display: none; }
/* バーの高さぶん、フッター下に余白を作って隠れないようにする */
.gs-page-nav-spacer { height: 56px; }
/* 追尾CTAはバーのすぐ上(15px)へ退避する。バーの高さは 52px */
.gs-float-cta.has-pagenav { bottom: 67px; }
@media (max-width: 1079px) {
  .gs-page-nav > div { max-width: none; }
  .gs-page-nav a { padding: 10px 4px; gap: 6px; }
  .gs-page-nav .ic { width: 22px; height: 22px; font-size: 12px; }
  .gs-page-nav .lb { font-size: 10.5px; }
  .gs-page-nav-spacer { height: 52px; }
  .gs-float-cta.has-pagenav { bottom: 78px; }
}
/* スマホは 4 項目だと 1 枠が狭く文字が潰れるので、注意事項を落として 3 項目にする */
@media (max-width: 767px) {
  .gs-page-nav > div { grid-template-columns: repeat(3, 1fr); }
  .gs-page-nav a[data-gse-pos="notes"] { display: none; }

  /* 短いラベル(配列の5番目)を持つページは、スマホでも4項目を並べる。
     アイコンとラベルは横並びのまま。バーの高さを変えないので spacer と追尾CTAは触らない。 */
  .gs-page-nav--4 > div { grid-template-columns: repeat(4, 1fr); }
  .gs-page-nav--4 a { padding: 10px 2px; gap: 5px; }
  .gs-page-nav--4 .ic { width: 20px; height: 20px; font-size: 11px; }
  .gs-page-nav--4 .lb.has-short { display: none; }
  .gs-page-nav--4 .lb-s { display: inline; font-size: 10px; font-weight: 900; letter-spacing: .02em; white-space: nowrap; }
  /* 追尾CTA はバー(高さ 46px)の 15px 上に置く */
  .gs-float-cta.has-pagenav { bottom: 61px; }
}
/* バーで隠れない位置に飛ばす(固定ヘッダーぶんの余白) */
.gs-anchor { scroll-margin-top: 90px; }
/* ページ内リンクは滑らせて移動する。動きを減らす設定の環境では従来どおり即座に飛ばす */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =============================================================
   料金表(2026 デザイン)
   カード内は タブ(受取方法) → 受取方法パネル → 大人/小人ごとに
   見出し・凡例バー・表 の順。数値はすべて WEB割料金で、
   各セルの上段に通常料金を打ち消し線付きで併記する。
   ============================================================= */
.gs-price-card {
  position: relative; background: #fff; border-radius: 22px; margin-top: 40px;
  padding: 40px 40px 38px; color: var(--gs-text); text-align: left;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .16);
}
.gs-price-card .card-label { font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--gs-sub); }
.gs-price-card .card-en {
  font-family: Poppins, sans-serif; font-weight: 800; font-size: 32px;
  color: var(--gs-cyan); margin-top: 4px; letter-spacing: -.01em;
}
/* カード内のタブはデザインに合わせて枠なし・淡い下地にする */
.gs-price-card .gs-tabs.on-light { background: #eef4f8; border: none; padding: 5px; gap: 4px; }
.gs-price-card .gs-tabs.on-light .gs-tab-btn { padding: 11px 30px; font-size: 14px; }

/* 受取方法の説明パネル(タブで切り替わる) */
.gs-price-panel { background: #f2fafd; border-radius: 16px; padding: 24px 28px 26px; margin-top: 22px; }
.gs-price-panel .p-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gs-price-panel .p-head .t { font-weight: 900; font-size: 14.5px; }
.gs-price-panel .p-head .s { font-weight: 700; font-size: 11.5px; color: var(--gs-sub); }
.gs-price-panel .p-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 16px 28px; margin-top: 18px;
}
.gs-price-panel .p-item { border-top: 1px dotted #cfdde6; padding-top: 14px; }
.gs-price-panel .p-item .n { display: flex; align-items: center; gap: 8px; }
.gs-price-panel .p-item .n i { width: 9px; height: 9px; border-radius: 3px; background: var(--gs-cyan); flex-shrink: 0; }
.gs-price-panel .p-item .n b { color: #0595bb; font-weight: 900; font-size: 12.5px; white-space: nowrap; }
.gs-price-panel .p-item .d { font-size: 11.5px; line-height: 2; color: var(--gs-body-c); margin-top: 6px; }
.gs-price-panel .p-more { text-align: right; margin-top: 16px; }
.gs-price-panel .p-more a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gs-cyan); font-weight: 700; font-size: 12.5px;
}
.gs-price-panel .p-more a .u { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* 表ごとの見出し(大人 / 小人)。
   .gs-price-head は別用途(ヒーローの価格カード等)で既に使われているので名前を分ける。 */
.gs-pt-head { display: flex; align-items: baseline; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
.gs-pt-head .en {
  font-family: Poppins, sans-serif; font-weight: 800; font-size: 28px;
  color: var(--gs-cyan); letter-spacing: -.01em;
}
.gs-pt-head .ja { font-size: 12.5px; font-weight: 900; color: var(--gs-text); }
.gs-pt-head .age { font-size: 11.5px; font-weight: 700; color: var(--gs-sub); }
/* 幅が足りる場合だけ右端へ寄る。モバイルでは折り返す */
.gs-pt-head .badge { margin-left: auto; font-weight: 900; font-size: 13.5px; white-space: nowrap; }

/* 凡例バー: 表の数字が WEB割料金であることを表ごとに明示する */
.gs-price-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fffaea; border: 2px solid var(--gs-yellow); border-radius: 12px;
  padding: 12px 18px; margin-top: 16px;
}
/* 割引率はこの表の要点なので、凡例の中で一番強く出す */
.gs-price-legend .off { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.gs-price-legend .off .n {
  font-family: Poppins, sans-serif; font-weight: 800; font-size: 30px;
  color: var(--gs-red); line-height: 1; letter-spacing: -.02em;
}
.gs-price-legend .off .u { font-weight: 900; font-size: 16px; color: var(--gs-red); }
/* 割引率ではなく「WEB予約料金」のように語句だけを出すページ用 */
.gs-price-legend .off.web .u { font-size: 17px; letter-spacing: .02em; }

/* ---- 対象ホテルの一覧(開閉) ----
   件数が多く常時出すと縦に伸びるので、v1 と同じく畳んでおく。
   Bootstrap の collapse は積んでいないので details で同じ挙動にする。 */
.gs-hotel-list { margin-top: 16px; }
.gs-hotel-list > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  color: var(--gs-cyan); font-weight: 700; font-size: 13px; white-space: nowrap;
  list-style: none;
}
.gs-hotel-list > summary::-webkit-details-marker { display: none; }
.gs-hotel-list > summary span {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.gs-hotel-list > summary::after {
  content: "＋"; font-weight: 700; text-decoration: none; transition: transform .15s ease;
}
.gs-hotel-list[open] > summary::after { content: "−"; }
.gs-hotel-list > ul {
  margin: 14px 0 0; padding: 14px 0 0; list-style: none;
  border-top: 1px dotted var(--gs-line2);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 6px 20px;
}
.gs-hotel-list > ul li {
  font-size: 12px; line-height: 1.9; color: var(--gs-body-c);
  padding-left: 14px; position: relative;
}
.gs-hotel-list > ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 2px; background: var(--gs-cyan);
}

/* =============================================================
   バス・レンタル両方に誘導する CTA(小)
   FAQ とホワイトシーズントップのように、どちらのサービスの
   訪問者も来るページで使う。帯もボタンも本文の邪魔をしない寸法。
   ============================================================= */
.gs-cta-both {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  background: var(--gs-cyan); border-radius: 24px; padding: 40px 44px;
}
.gs-cta-both .wm {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: Poppins, sans-serif; font-weight: 800; font-size: 120px; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .12);
  pointer-events: none; white-space: nowrap;
}
.gs-cta-both .in { position: relative; }
.gs-cta-both .t { font-weight: 900; font-size: clamp(16px, 1.7vw, 19px); }
.gs-cta-both .s { font-size: 12.5px; line-height: 1.9; margin-top: 8px; opacity: .95; }
.gs-cta-both .btns { display: flex; justify-content: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.gs-cta-both .btns a {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-weight: 800; font-size: 14px; padding: 13px 24px; border-radius: 999px;
  transition: transform .15s ease;
}
.gs-cta-both .btns a:hover { transform: translateY(-2px); }
.gs-cta-both .b-bus { background: var(--gs-yellow); color: var(--gs-text); box-shadow: 0 10px 26px rgba(0, 0, 0, .2); }
.gs-cta-both .b-rental { background: #fff; color: var(--gs-text); box-shadow: 0 10px 26px rgba(0, 0, 0, .16); }
.gs-cta-both .b-sub { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 700; border: 1px solid rgba(255, 255, 255, .5); }
.gs-cta-both .b-sub span { font-size: 12px; }
.gs-cta-both .tel { font-size: 12.5px; margin-top: 18px; }
.gs-cta-both .tel span { font-family: Poppins, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .04em; }
@media (max-width: 1079px) {
  .gs-cta-both { padding: 32px 20px; border-radius: 20px; }
  .gs-cta-both .wm { font-size: 74px; }
  .gs-cta-both .btns { gap: 10px; }
  .gs-cta-both .btns a { font-size: 13px; padding: 12px 20px; }
}
.gs-price-legend .bar { width: 2px; align-self: stretch; background: var(--gs-yellow); }
.gs-price-legend .d { font-size: 12px; line-height: 1.9; color: var(--gs-body-c); }
.gs-price-legend .d strong { color: var(--gs-text); }
.gs-price-legend .d .sm {
  text-decoration: line-through; text-decoration-color: var(--gs-red);
  text-decoration-thickness: 2px; color: var(--gs-sub);
}

/* 表本体 */
.gs-price-scroll { overflow-x: auto; overflow-y: hidden; margin-top: 14px; }
.gs-price-table { min-width: 720px; width: 100%; border-collapse: collapse; }
.gs-price-table tr.head { border-bottom: 2px solid var(--gs-text); }
.gs-price-table tr.head td {
  padding: 0 10px 12px; text-align: center; vertical-align: bottom;
  font-family: Poppins, 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 12.5px;
  color: var(--gs-text); white-space: nowrap;
}
.gs-price-table tr.head td:first-child { padding-left: 2px; }
/* 宅配便は1日間の設定が無いので、その列の見出しだけ落として見せる */
.gs-price-table.no-day1 tr.head td:nth-child(2) { color: #9fb4c1; }
.gs-price-table tr { border-bottom: 1px solid #e9f0f4; }
.gs-price-table tr:last-child { border-bottom: none; }
.gs-price-table td.place { padding: 15px 10px 15px 2px; color: #0595bb; font-weight: 900; font-size: 13px; line-height: 1.7; }
.gs-price-table td.c { padding: 12px 10px; text-align: center; white-space: nowrap; }
.gs-price-table td.na { padding: 15px 10px; text-align: center; color: #c3d2db; font-size: 13px; }
/* 「以降1日」列を帯で強調する。7列目だけを対象にするので、
   colspan で1行にまとめている販売のみの行には掛からない。 */
.gs-price-table tr.head td:nth-child(7) { background: #f2fafd; border-radius: 10px 10px 0 0; }
.gs-price-table tr td:nth-child(7) { background: #f2fafd; }
/* 販売のみ(小物セット)の行。品目名は他の行と同じ左寄せ、
   日数ごとの値が無いぶんは 1 セルにまとめて金額と注記を中央に置く。 */
.gs-price-table tr.sale-row td { padding-bottom: 4px; }
.gs-price-table td.sale { padding: 15px 10px 4px; text-align: center; }
.gs-price-table td.sale .in { display: inline-flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; }
.gs-price-table td.sale .n { font-family: Poppins, sans-serif; font-weight: 800; font-size: 17px; color: var(--gs-cyan); }
.gs-price-table td.sale .note { color: var(--gs-red); font-size: 11px; }

@media (max-width: 1079px) {
  .gs-price-card { padding: 26px 18px 28px; border-radius: 18px; }
  /* 料金表の切り替えタブ。狭い画面では縦に折り返して「タブ」に見えなくなるため、
     必ず左右に並べる。選択中との差が分かるよう、選んでいない側は背景を持たせない
     (以前は白60%で、白のアクティブとほとんど見分けが付かなかった) */
  .gs-price-card .gs-tabs.on-light,
  .gs-tabs.on-light { display: flex; width: 100%; flex-wrap: nowrap; padding: 5px; gap: 4px; }
  /* 827行の .gs-price-card 付きの指定に負けないよう、同じ詳細度で並べる */
  .gs-price-card .gs-tabs.on-light .gs-tab-btn,
  .gs-tabs.on-light .gs-tab-btn { flex: 1 1 0; min-width: 0; padding: 9px 5px; font-size: 11.5px; white-space: normal; line-height: 1.3; }
  .gs-price-card .gs-tabs.on-light .gs-tab-btn .en,
  .gs-tabs.on-light .gs-tab-btn .en { font-size: 8px; letter-spacing: .08em; }
  .gs-price-card .gs-tabs.on-light .gs-tab-btn:not(.active),
  .gs-tabs.on-light .gs-tab-btn:not(.active) { background: transparent; border-color: transparent; color: var(--gs-sub) !important; }
  .gs-price-card .gs-tabs.on-light .gs-tab-btn.active,
  .gs-tabs.on-light .gs-tab-btn.active { box-shadow: 0 3px 10px rgba(15, 63, 139, .2); }
  .gs-price-panel { padding: 18px 16px 20px; }
  .gs-price-legend { gap: 10px; padding: 12px 14px; }
  .gs-price-legend .bar { display: none; }
  .gs-price-legend .d { flex: 1 1 100%; font-size: 11.5px; }
  .gs-price-legend .off .n { font-size: 25px; }
  .gs-price-legend .off .u { font-size: 14px; }
  .gs-pt-head { margin-top: 34px; gap: 8px 12px; }
  .gs-pt-head .en { font-size: 24px; }
  /* カードの左右いっぱいまで表を伸ばして、横スクロールの幅を稼ぐ */
  .gs-price-scroll { margin-left: -18px; margin-right: -18px; padding: 0 18px; }
  .gs-price-table { min-width: 620px; }
}

/* ------------------------------------------------------------------
   UPDATE 04  JAL SKI 専用ページの料金セクション(受領デザイン準拠)
   通常レンタルと料金体系が違うため、専用のカードとして持つ。
   ------------------------------------------------------------------ */
.gs-jal-price-card {
  position: relative; background: #fff; border-radius: 22px; margin-top: 40px;
  padding: 40px 40px 38px; color: #22303a; box-shadow: 0 16px 44px rgba(15, 63, 139, .12);
}
.gs-jal-panel { border-radius: 16px; padding: 24px 28px 26px; margin-top: 22px; }
.gs-jal-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fff; border: 2px solid #fbc60f; border-radius: 12px; padding: 12px 18px; margin-top: 16px;
}
.gs-jal-table { min-width: 720px; width: 100%; border-collapse: collapse; }

@media (max-width: 1079px) {
  .gs-jal-price-card { padding: 26px 18px 28px !important; border-radius: 18px !important; }
  .gs-jal-panel { padding: 18px 16px 20px !important; }
  .gs-jal-legend { gap: 10px !important; padding: 12px 14px !important; }
  /* 縦棒(区切り)は幅が足りないので隠し、説明文は折り返して全幅に */
  .gs-jal-legend > span:nth-child(2) { display: none !important; }
  .gs-jal-legend > span:last-child { font-size: 11.5px !important; flex: 1 1 100%; }
  /* 表はカードの外まで広げてスクロールさせる */
  .gs-jal-price-card .gs-price-scroll { margin-left: -18px; margin-right: -18px; padding: 0 18px; }
  .gs-jal-table { min-width: 620px !important; }
}

/* ---- バスページ v2/v3 の新規ブロック(モバイル) ----
   2026-08-19 デザイン差分(handoff-bus-v2-v3)。日英で共通のクラスを使う。
   details 系はバスページの FAQ ブロックだけに効かせる(他ページの details を触らない)。 */
@media (max-width: 1079px) {
  .glance-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .pad-card    { padding: 22px 18px !important; }
  .band-pad    { padding: 52px 22px !important; }

  /* 日本語: 乗り継ぎ早見表 */
  .conn-panel { padding: 22px 16px !important; }
  .conn-card  { padding: 14px 14px !important; gap: 10px !important; }
  .conn-bus   { width: 80px !important; }
  .conn-bus > span:last-child { font-size: 20px !important; }

  /* 日本語: 早割の階段グラフ */
  .stair-label { font-size: 12px !important; }
  .stair-price { font-size: 17px !important; }

  /* 英語: 徒歩時間のラベル行 */
  .qa-row { flex-direction: column !important; gap: 10px !important; }
  .qa-row > span:first-child { width: auto !important; align-self: flex-start; padding: 7px 18px !important; }

  #bus-faq details, #faq details { padding: 18px 18px !important; }
  #bus-faq details summary, #faq details summary { font-size: 14px !important; }

  /* 時刻表カードの経路見出し(FROM/TO)。英語は施設名が長く、nowrap のままだと
     スマホで 10px 前後はみ出して画面に横スクロールが出るため、ここだけ折り返す。 */
  .gs-route-head .pt .nm { white-space: normal; font-size: 18px; margin-top: 6px; }
  /* 発着地をカードの左右端に置き、余った幅をすべて点線に回す。
     地名は縮めず1行に保ち(画面幅に応じて字を小さくする)、その分を点線の長さにする。
     点線が短いと「出発 → 到着」の関係が読み取りにくいため */
  .gs-route-head { justify-content: space-between; }
  .gs-route-head .pt { flex: 0 0 auto; }
  .gs-route-head .pt .nm { white-space: nowrap; font-size: clamp(14px, 4.3vw, 18px); }
  .gs-route-head .pt:last-child { text-align: right; }
  .gs-route-head .line { flex: 1 1 auto; width: auto; min-width: 36px; margin: 0 10px; }
  /* 英語は地名が長く、18px だと「Niseko / Hirafu」まで割れる。
     短い地名が1行に収まるところまで落とす(長い空港名は語の切れ目で2行になる) */
  html[lang^="en"] .gs-route-head .pt { flex: 0 1 auto; }
  html[lang^="en"] .gs-route-head .pt .nm { white-space: normal; font-size: 15px; }
  html[lang^="en"] .gs-route-head .line { width: auto; margin: 0 8px; }
}

/* ---- シーズンレンタル v2/下層ページ(モバイル) ----
   2026-08-19 デザイン差分(handoff-season)。日英で共通のクラスを使う。 */
@media (max-width: 1079px) {
  .resp-1col   { grid-template-columns: 1fr !important; }
  /* 1列に落ちた写真は高さ固定をやめて元の縦横比で見せる(190px固定+coverだと横長写真の左右が切れる) */
  .resp-1col > span[style*="height:190px"] { height: auto !important; }
  .resp-1col > span[style*="height:190px"] img { position: static !important; height: auto !important; }
  .price-table { min-width: 520px; }
  .tl-when     { font-size: 12px !important; }
  #season-faq details, #jr-faq details, #ns-faq details { padding: 18px 18px !important; }
  #season-faq details summary, #jr-faq details summary, #ns-faq details summary { font-size: 14px !important; }
}
.price-scroll { overflow-x: auto; overflow-y: hidden; }

/* ---- シーズンレンタル(英語)のヒーロー: デスクトップ/モバイルの出し分け ----
   デザイン側は isDesktop / isMobile の条件分岐。実装では CSS で切り替える。
   既存の .gs-hero-m-* (v2026 のモバイルヒーロー部品)とは別物なので名前を分けている。 */
.gs-season-hero-m { display: none; }
@media (max-width: 1079px) {
  .gs-season-hero-d { display: none; }
  .gs-season-hero-m { display: block; }
}


/* ---- シーズンレンタル系ページの背景 ----
   デザインは body に #edf4f8、その上に 104px 間隔のグリッド線を敷いている。
   ページ側の set_query_var('gs_body_class','gs-season-bg') で有効になる。 */
body.gs-season-bg {
  background-color: #edf4f8;
  background-image:
    linear-gradient(#f4f9fb 1px, transparent 1px),
    linear-gradient(90deg, #f4f9fb 1px, transparent 1px);
  background-size: 104px 104px;
}

/* ---- モバイルで表の右端が画面の外に出る件 ----
   表はすべて overflow-x:auto の div に入れて横スクロールさせているが、
   375px 幅では料金など右端の列が初期表示に入らず、スクロールできること自体も伝わらない。
   3列までの表は min-width を外して枠内に折り返す。
   4列以上は各セルが 60px 前後まで潰れて読めなくなるので、横スクロールのままにする。
   3列でもセルの文章が長い表(サイズ表など)は class="gs-tbl-keep" を付けて対象から外す。 */
@media (max-width: 520px) {
  div[style*="overflow-x:auto"] > table:not(:has(tr > *:nth-child(4))):not(.gs-tbl-keep) {
    min-width: 0 !important;
    width: 100% !important;
  }
  div[style*="overflow-x:auto"] > table:not(:has(tr > *:nth-child(4))):not(.gs-tbl-keep) th,
  div[style*="overflow-x:auto"] > table:not(:has(tr > *:nth-child(4))):not(.gs-tbl-keep) td {
    white-space: normal !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    width: auto !important;
  }
}

/* 3列でも列幅の配分が偏って右端が潰れる表は、モバイルで均等割りにする */
@media (max-width: 520px) {
  div[style*="overflow-x:auto"] > table.gs-tbl-fixed {
    table-layout: fixed;
  }
  /* 列幅を固定すると、英語の長い語や住所が列からはみ出すので、どこでも折り返せるようにする。
     列幅は fixed で決まっているので、auto の表で起きる「列が潰れる」副作用は出ない */
  div[style*="overflow-x:auto"] > table.gs-tbl-fixed th,
  div[style*="overflow-x:auto"] > table.gs-tbl-fixed td {
    overflow-wrap: anywhere;
  }
}

/* =============================================================
   AT A GLANCE の発車時刻(バス02 日英)
   1079px 以下では横並びだと行末が不揃いになるため、
   空港発 / ひらふ発を縦に積み、時刻は4列グリッドで等幅に並べる。
   ============================================================= */
@media (max-width: 1079px) {
  .glance-dep { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .dep-sep { display: none !important; }
  .dep-grp { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 5px !important; align-items: stretch !important; }
  .dep-lbl { grid-column: 1 / -1; font-size: 10px !important; color: #22303a !important; margin-bottom: 1px; }
  .dep-grp > span:not(.dep-lbl) { text-align: center; padding: 5px 4px !important; font-size: 11.5px !important; }
}

/* ---- 時刻表のモバイル対応 ----
   3列以下の表(ニセコ→札幌駅など)は min-width を外して枠内に収める。
   4列以上は横スクロールのままにし、ヒント(gs-scrollhint)で気づけるようにする。 */
@media (max-width: 520px) {
  .gs-tt-scroll .gs-tt:not(:has(tr > *:nth-child(4))) { min-width: 0 !important; width: 100% !important; }
}
/* 表の上に置く帯。右寄せの小さな灰色文字だと、すぐ上の日付バッジの
   付属物に見えて気づかれなかった。表の幅いっぱいの帯にして、
   表そのものの見出しとして読めるようにする */
.gs-scrollhint {
  display: none; align-items: center; justify-content: center; gap: 6px;
  font-size: 10px; font-weight: 900; color: var(--gs-cyan); letter-spacing: .02em;
  background: rgba(7, 182, 227, .1); border-radius: 999px;
  padding: 5px 12px; margin: 12px 0 4px;   /* 上の日付バッジと密着すると、ラベルが2段あるように見える */
}
.gs-scrollhint .ar { display: inline-block; font-size: 12px; animation: gsHintSwipe 1.5s ease-in-out infinite; }
@keyframes gsHintSwipe { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@media (max-width: 767px) { .gs-scrollhint { display: flex; } }
@media (prefers-reduced-motion: reduce) { .gs-scrollhint .ar { animation: none; } }
/* 接続時間の行: スマホは縦積みに統一する(「120分以上」の行だけラベルが折り返して不揃いになるため) */
@media (max-width: 480px) {
  .gs-connect-row { flex-direction: column; align-items: stretch; gap: 0; }
  .gs-connect-row .v { text-align: right; }
}

/* ---- 画像のタップ拡大(gs-zoom を付けた画像) ---- */
img.gs-zoom { cursor: zoom-in; }
.gs-zoom-overlay {
  position: fixed; inset: 0; z-index: 100000; background: rgba(10, 22, 30, .9);
  display: none; align-items: center; justify-content: center; padding: 18px;
  cursor: zoom-out;
}
.gs-zoom-overlay.is-on { display: flex; }
.gs-zoom-overlay img { max-width: 100%; max-height: 100%; border-radius: 10px; background: #fff; }
.gs-zoom-overlay::after {
  content: '\00d7'; position: absolute; top: 8px; right: 16px;
  color: #fff; font-size: 36px; line-height: 1; opacity: .9;
}
/* 割引パネルの価格はスマホでは一回り小さく(76pxのままだと375pxからあふれる) */
@media (max-width: 1079px) {
  /* 基本定義(padding: 44px 32px)より後に置かないと同詳細度の後勝ちで効かない */
  .gs-offer-panel { padding: 36px 20px 34px; }
  .gs-offer-panel .gs-price-row { gap: 8px; }
  /* 価格行はシアンのパネル内だけでなく、プランカードの中にもある。
     1行に「打ち消しの定価 / 1日 / 値引き後」を横並びにすると 375px で 60px はみ出すため、
     打ち消しの定価だけを独立した行に置いて全部見せる。
     2026-08-28 にパネル内だけ直して、カード側が残っていた */
  .gs-price-row { flex-wrap: wrap; gap: 2px 8px; }
  .gs-price-row .old { flex: 0 0 100%; text-align: center; }
  .gs-price-row .num { font-size: clamp(32px, 10.5vw, 46px) !important; }
  .gs-price-row .yen { font-size: 18px !important; }
  /* 数字は画面幅に比例させ、from / JPY と合わせて必ず1行に収める
     (46px 固定だと 375px 幅で行が折り返し、価格の並びが崩れて見えた) */
  .gs-offer-panel .gs-price-row .num { font-size: clamp(32px, 10.5vw, 46px); }
  /* 日本語のボタン文言はスマホ幅で1行に収まらないことがある。切らずに折り返す */
  .gs-offer-panel .gs-btn-cta { white-space: normal; line-height: 1.6; }
}
/* 最小幅の機種(320px 帯)では前後の語も縮めて価格を1行に保つ。
   前後の語は inline の 19px 指定を持つため !important で上書きする */
@media (max-width: 359px) {
  .gs-price-row { gap: 2px 4px; }
  .gs-price-row > span { font-size: 15px !important; }
  .gs-price-row .num { font-size: 29px !important; }
  .gs-price-row .yen { font-size: 15px !important; }
}

/* 施設写真の3枚並び。スマホでは横幅が3等分されて縦長に潰れる
   (375px で 1枚 82px 幅 × 200px 高になっていた)。1列に落として大きく見せる */
@media (max-width: 767px) {
  .resp-photo { grid-template-columns: 1fr !important; }
  .resp-photo .cell { min-height: 0 !important; }
  .resp-photo .cell img { position: static !important; width: 100%; height: auto;
    max-height: 62vh; object-fit: contain; }
}

/* =============================================================
   借り方診断(レンタル02)。挙動は _shared/v2026/rental-sim.js、
   文言と分岐はテンプレート側の #rental-sim[data-sim] にある
   ============================================================= */
.gs-sim { background: #fff; border-radius: 20px; padding: 34px 36px 30px;
  box-shadow: 0 12px 36px rgba(15, 63, 139, .10); margin-top: 36px; }
.gs-sim-q { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.gs-sim-no { font-family: Poppins, sans-serif; font-weight: 800; font-size: 11.5px;
  letter-spacing: .18em; color: var(--gs-cyan); flex-shrink: 0; }
.gs-sim-qt { font-weight: 900; font-size: clamp(15px, 1.8vw, 18px); line-height: 1.7; }
.gs-sim-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px; margin-top: 18px; }
.gs-sim-opt { text-align: left; background: #f4f9fb; border: 1.5px solid #dbe7ee; border-radius: 14px;
  padding: 16px 18px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.gs-sim-opt:hover { border-color: var(--gs-cyan); background: #eef8fc; }
.gs-sim-opt-t { display: block; font-weight: 900; font-size: 14px; line-height: 1.7; color: var(--gs-text); }
.gs-sim-opt-s { display: block; font-size: 11.5px; line-height: 1.9; color: var(--gs-sub); margin-top: 4px; }
.gs-sim-done { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px dotted #dbe7ee; padding: 12px 2px; cursor: pointer; }
.gs-sim-done-q { flex: 1; font-size: 12.5px; color: var(--gs-sub); }
.gs-sim-done-a { font-weight: 900; font-size: 13px; color: var(--gs-cyan); }
.gs-sim-done::after { content: '\21bb'; color: var(--gs-sub); font-size: 14px; flex-shrink: 0; }
.gs-sim-result-head { font-weight: 900; font-size: 13px; color: var(--gs-sub); margin-top: 20px; }
.gs-sim-card { border: 2px solid var(--gs-cyan); border-radius: 16px; padding: 22px 24px; margin-top: 14px; }
.gs-sim-card-plan { border-color: var(--gs-yellow); }
.gs-sim-card-t { font-weight: 900; font-size: clamp(16px, 2vw, 20px); line-height: 1.6; }
.gs-sim-card-p { font-family: Poppins, sans-serif; font-weight: 800; font-size: 24px;
  color: var(--gs-cyan); margin-top: 6px; }
.gs-sim-card-l { font-size: 13px; line-height: 2.1; color: var(--gs-body-c); margin-top: 8px; }
.gs-sim-points { margin: 12px 0 0; padding-left: 1.2em; font-size: 12.5px; line-height: 2; color: var(--gs-body-c); }
.gs-sim-acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.gs-sim-cta { font-size: 15px; padding: 16px 32px; }
.gs-sim-again { background: none; border: 0; text-decoration: underline; text-underline-offset: 4px;
  font-size: 12.5px; color: var(--gs-sub); cursor: pointer; padding: 6px 2px; }
@media (max-width: 767px) {
  .gs-sim { padding: 26px 20px 24px; border-radius: 16px; }
  .gs-sim-cta { width: 100%; text-align: center; }
}

/* ------------------------------------------------------------------
   グリッドの列数(スマホ・タブレット)
   .gs-map-grid はページ側が style="grid-template-columns:…" と直接書いており、
   417行の「1079px以下は1列」がインラインに負けて効いていなかった。
   ・2列指定 … 1079px以下は1列。国際線の乗り継ぎ枠が1枠150pxまで潰れて
     「入国審 / 査」と語中で折り返し、プランの特徴は日本語で5行に割れていた
   ・3列指定 … 1079px以下は2列、767px以下は1列(写真のみ)
   [style*="1fr 1fr"] は3列指定にも部分一致するので、3列の指定を後ろに置く。
   このブロックは resp-photo(1211行)より後ろに置くこと。前に置くと写真が2列に戻る。
   ------------------------------------------------------------------ */
@media (max-width: 1079px) {
  .gs-map-grid[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
  .gs-map-grid[style*="1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 767px) {
  .gs-map-grid[style*="1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------
   レンタルのご利用期間(色の棒 + ラベル + 日付)
   スマホでは1行に収まらず「スタンダードレンタ / ル：」「12月2日〜3月 / 29日」と
   ラベルも日付も途中で折り返して読みにくかったので、日付を次の行へ送る。
   ------------------------------------------------------------------ */
.gs-period-row { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; }
.gs-period-row .bar { width: 14px; height: 4px; border-radius: 2px; flex-shrink: 0; }
@media (max-width: 767px) {
  .gs-period-row { flex-wrap: wrap; align-items: flex-start; row-gap: 4px; column-gap: 10px; }
  .gs-period-row .bar { margin-top: 9px; }
  /* 02では日付のspanにgs-enが付いていないので、棒以外のspanで拾う */
  .gs-period-row > span:not(.bar) { flex: 0 0 100%; padding-left: 24px; }
}
@media (max-width: 359px) {
  /* 「パフォーマンスレンタル：」が2行に割れるので、この幅だけ字を落とす */
  .gs-period-row { font-size: 13px; column-gap: 8px; }
  /* 英語の「Easy Web Booking on PC ･ Mobile」が nowrap のまま 28px はみ出し、
     ページに横スクロールが出ていた。折り返さずに収まる大きさへ落とす */
  html[lang^="en"] .gs-hero-m-cv .cv-card .l2 { font-size: 15px; }
  .gs-period-row > span:not(.bar) { padding-left: 22px; }
}

/* メーカーのボタンはスマホだと1行に2つしか入らず、11メーカーで縦に長く伸びていた。
   字と余白を詰めて1行に3つ並ぶようにする(親のgapはページ側のインライン指定を上書き) */
@media (max-width: 767px) {
  .gs-maker-btn { font-size: 11.5px; padding: 8px 11px; border-radius: 9px; border-bottom-width: 2px; letter-spacing: .01em; }
  /* 親のgapはページ側がインラインで12pxと書いているので、:has で絞って詰める */
  div:has(> .gs-maker-d) { gap: 8px !important; }
  .gs-maker-d { max-width: 100%; }
}

/* スキーの分類の凡例(パウダー / ゲレンデ / パウダー&ゲレンデ)。
   スマホで中央寄せのままだと3項目の左端が揃わず読みにくいので、
   左に寄せて説明を名前の下に送る。色の四角の右端に説明の頭を合わせる。 */
@media (max-width: 767px) {
  .gs-legend { justify-content: flex-start !important; gap: 14px !important; text-align: left; }
  .gs-legend-item { flex: 0 0 100%; flex-wrap: wrap; gap: 3px 12px !important; }
  .gs-legend-item > span:not(.gs-csq) { flex: 0 0 100%; padding-left: 21px; box-sizing: border-box; }
  /* パソコン向けの改行位置のままだと右に150px近く余ったまま3行になるので、
     スマホでは自然に流す */
  .gs-legend-item br { display: none; }
}

/* 白いカードの余白 40px はスマホだと広すぎ、中身の幅が 255px しか残らない。
   「初心者にも安心のセットレン / タル」と語の途中で折り返していた。
   余白を詰め、見出しは意味の切れ目でだけ改行させる。 */
@media (max-width: 767px) {
  div[style*="padding:40px"] { padding: 26px 22px !important; }
  .gs-lead-jp { font-size: 19px !important; line-height: 1.55; }
}

/* 見出しの泣き別れ対策。
   日本語はどこでも折り返せるため、スマホだと「選択しよ / う」「おまかせ / 。」のように
   最後の1文字だけが次行に残る。text-wrap: balance は行の長さを均して最終行が
   極端に短くなるのを防ぐ(Safari 17.4 / Chrome 114 以降。未対応なら従来どおり折り返す)。
   句読点は行末にぶら下げて、句点だけが次行に落ちるのを減らす。 */
@media (max-width: 767px) {
  h1, h2, h3, h4,
  .gs-sec-lead, .gs-marker, .gs-hero-m-h .m3, .gs-badge-bubble, .limited,
  .gs-typo-head + div, .gs-gear-kind, .gs-lead-jp, .gs-csq .t,
  div[style*="font-weight:900"], div[style*="font-weight:800"] {
    /* 行の長さを均して、最終行に1文字だけ残るのを防ぐ(見出し向け) */
    text-wrap: balance;
  }
  .gs-sec-lead, .gs-marker, .gs-typo-head + div { hanging-punctuation: allow-end; }
  /* 料金セクションの見出しは34pxあり、幅306pxに「スノーボードレンタル」が入らず
     「スノーボードレン / タル」と割れていた */
  .gs-price-head h2 { font-size: 26px; }
  /* トップの「グッドスポーツが選ばれる理由」は32pxで、使える幅222pxに
     「グッドスポーツが」(256px)が入らず「グッドスポー / ツが選ばれる / 理由」と3行に割れていた */
  h2[style*="font-size:32px"] { font-size: 26px !important; }
}

/* ------------------------------------------------------------------
   予約プランの選択(受け取り・返却の選択モーダルの中身)
   現行サイトの申し込みページと同じ3プランを並べる。
   受け取りと返却を別々に選ばせる形は、実際の商品の分かれ方と読み手の理解が
   合わなかったため取りやめた(2026-08-29 種田さんの指摘)。
   ------------------------------------------------------------------ */
.gs-plan-pick { display: grid; gap: 12px; margin-top: 18px; }
.gs-plan-opt {
  display: block; background: #fff; border: 1px solid var(--gs-line); border-radius: 14px;
  padding: 16px 18px; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gs-plan-opt:hover, .gs-plan-opt:focus-visible {
  border-color: var(--gs-cyan); box-shadow: 0 8px 22px rgba(15, 63, 139, .12);
}
.gs-plan-opt .pt {
  display: inline-block; font-weight: 900; font-size: 13.5px; line-height: 1.5;
  color: #fff; background: var(--gs-cyan); padding: 6px 15px; border-radius: 999px;
}
.gs-plan-opt.c2 .pt { background: var(--gs-lime); color: var(--gs-text); }
.gs-plan-opt.c3 .pt { background: var(--gs-navy); }
.gs-plan-opt .ps { display: block; margin-top: 10px; font-size: 12px; line-height: 1.85; color: var(--gs-body-c); }
.gs-plan-opt .pb {
  display: block; margin-top: 12px; text-align: center; font-weight: 900; font-size: 13px;
  color: var(--gs-text); background: var(--gs-yellow); border-radius: 999px; padding: 11px 14px;
}
@media (max-width: 767px) {
  .gs-plan-pick { gap: 10px; }
  .gs-plan-opt { padding: 13px 14px; }
  .gs-plan-opt .pt { font-size: 12.5px; padding: 5px 12px; }
  .gs-plan-opt .ps { font-size: 11.5px; line-height: 1.8; }
  .gs-plan-opt .pb { font-size: 12.5px; padding: 10px 12px; }
}

/* 日本語の折り返しは文節単位にする(Safari 18.4 / Chrome 119 以降。未対応なら従来どおり)。
   画面幅によらず本文にも効かせる。指定が無いと
   「レンタル商品はスキースタイル・ / レベル・ご予算に合わせて」のように
   中黒の直後で切れて読みにくくなる。 */
body { word-break: auto-phrase; }

/* 1080〜1109px ではメニューと予約ボタンが1段に収まらず、ヘッダーが2段になる
   (このリンクだけで196px使うため)。この幅のときは表記を短くして1段に保つ。 */
.gs-nav-mini { display: none; }
@media (max-width: 1109px) {
  .gs-nav-full { display: none; }
  .gs-nav-mini { display: inline; }
}

/* チャットを開いている間は、画面下のページ内リンクを隠す。
   キーボードが出ると入力欄と重なって邪魔になるため */
body.gsc-open .gs-page-nav,
body.gsc-open .gs-float-cta { display: none; }

/* 320px 幅(iPhone SE 第1世代相当)で、1行に固定した見出しが画面からはみ出し、
   ページが横に動いてしまうのを防ぐ。375px 以上には影響しない。
   ・日本語トップ「グッドスポーツでまるごと」… 24px のままだと 12px 超過
   ・英語スキーバス02 の到着案内 … 13px のままだと 16px 超過 */
/* 並びの中身が縮めないと、枠より広い列が作られてページが横に動く。
   grid / flex の子は既定で「内容より小さくならない」ため、明示的に許可する */
@media (max-width: 1079px) {
  .gs-map-grid > *, .gs-map-grid > * > *,
  .resp-1col > *, .resp-2col > *, .resp-photo > * { min-width: 0; }
}
@media (max-width: 359px) {
  /* この幅で枠に収まらない見出し・説明を落とす。375px 以上の見た目は変わらない */
  .gs-route-guide-h { font-size: 13.5px !important; }
  /* メーカーの特徴。「スペクトラル・ブレード」など、分割を止めた語がこの幅では収まらない */
  .gs-maker-d { font-size: 12px; }
  /* この幅は余白がほとんど無い。並びの中は深いところまで縮めるようにする */
  .resp-1col *, .resp-2col *, .resp-photo *, .gs-map-grid * { min-width: 0; }
  /* ヒーロー下の申込カードの1行目。1行に固定したままだとこの幅で枠から出る */
  .gs-hero-m-cv .cv-card .l1 { white-space: normal; font-size: 11.5px; }
  /* この幅では、分割を止めた語も折り返してよい(横に動くより読めるほうが良い) */
  .gs-nb { white-space: normal; }
  .gs-maker-d ul, .gs-maker-d li, .gs-maker-d > * { min-width: 0; }
  /* 写真の上のマーカー帯。金額を大きくしたぶん、この幅では枠から出る */
  .gs-hero-m-markers .k1 { font-size: 13px; padding: 7px 12px; }
  .gs-hero-m-markers .k2 { font-size: 12px; padding: 8px 12px; }
  .gs-hero-m-markers .k2 .n { font-size: 27px; }
  .gs-hero-m-badge { padding: 5px 11px; }
  .gs-hero-m-badge .l1 { font-size: 9px; letter-spacing: .04em; }
  /* 背景の飾り文字は、この幅だと枠から出てページが横に動く。装飾なので切ってよい */
  .gs-wm, .wm { max-width: 100%; overflow: hidden; }
  /* トップのヒーロー帯(クラスを持たず、インラインで 24px 指定) */
  .gs-marker span[style*="font-size:24px"] {
    font-size: 20px !important; padding-left: 12px !important; padding-right: 12px !important;
  }
  /* 英語スキーバス02 の到着案内(インラインで 13px + 1行固定) */
  span[style*="font-size:13px"][style*="white-space:nowrap"] { font-size: 11.5px !important; }
}

/* メニューを開いている間は、追尾の予約ボタンとチャットを隠す。
   どちらもメニュー(z-index 90)と同じか手前に出る作りで、重なって見えるため */
body.gs-menu-open .gs-float-cta,
body.gs-menu-open .gs-page-nav,
body.gs-menu-open .gsc-launcher,
body.gs-menu-open .gsc-panel { display: none !important; }

/* 時刻表カードはスマホでは余白を 5px 詰め、その分を表の幅に回す
   (このクラスは日英の ski-bus / ski-bus02 の時刻表カードだけで使う) */
@media (max-width: 767px) {
  .gs-tt-card { padding: 27px 25px 21px; }
}

/* 新設路線のお知らせ。時刻表カードの NEW バッジと同じ見た目にして、
   リード文の中に埋もれていた一文を独立させる */
.gs-newsline {
  display: flex; align-items: center; gap: 12px;
  max-width: 720px; margin: 18px auto 0; padding: 14px 20px;
  background: #fff; border: 2px solid #5f9412; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(95, 148, 18, .14);
  text-align: left;
}
.gs-newsline .txt { font-weight: 900; font-size: 14px; line-height: 1.9; color: var(--gs-text); }
@media (max-width: 767px) {
  .gs-newsline { gap: 10px; padding: 12px 16px; align-items: flex-start; }
  .gs-newsline .new { margin-top: 2px; }
  .gs-newsline .txt { font-size: 13px; }
}

/* ==================================================================
   レンタル受付前(2026-27 は 11 月開始予定)の非稼働表示
   body.gs-rental-closed が付いたページでは、レンタル予約に向かう
   ボタンをすべて押せない灰色にする。バスの予約ボタンは対象外。
   受付開始時は functions.php の $closed を false にすれば元に戻る。
   ================================================================== */
.gs-rental-closed a[href*="rental-form"],
.gs-rental-closed a[data-gs-pickup],
.gs-rental-closed [data-gse-pos="header_rental"],
.gs-rental-closed [data-gse-pos="header_rental_m"],
.gs-rental-closed [data-gse-pos="drawer_rental"],
.gs-rental-closed [data-gse-pos="floating"]:not([href*="bus-form"]),
.gs-rental-closed [data-gse-pos="header_page_cta"],
.gs-rental-closed [data-gse-pos="header_page_cta_m"],
.gs-rental-closed [data-gse-pos="hero"],
.gs-rental-closed [data-gse-pos="hero_m"] {
  background: #e6eef3 !important;
  color: #93a8b5 !important;
  border-color: #d6e3ea !important;
  box-shadow: none !important;
  pointer-events: none !important;
  cursor: default !important;
}
/* 中の文字・数字も同じ灰色に(黄色や色付きの指定を上書きする) */
.gs-rental-closed a[href*="rental-form"] *,
.gs-rental-closed a[data-gs-pickup] *,
.gs-rental-closed [data-gse-pos="floating"]:not([href*="bus-form"]) *,
.gs-rental-closed [data-gse-pos="header_page_cta"] *,
.gs-rental-closed [data-gse-pos="header_page_cta_m"] *,
.gs-rental-closed [data-gse-pos="hero"] *,
.gs-rental-closed [data-gse-pos="hero_m"] * {
  color: #93a8b5 !important;
  background: transparent !important;
}
/* 追尾ボタンに付く割引バッジは、受付前は出さない */
.gs-rental-closed .gs-float-cta .badge,
.gs-rental-closed .gs-float-badge { display: none !important; }
/* 受付前は電話での申し込みも受け付けないため、電話ボタンも同じ灰色にする
   (フッターの問い合わせ先やヘッダーの電話表示は対象外) */
.gs-rental-closed .gs-btn-cta[href^="tel:"] {
  background: #e6eef3 !important;
  color: #93a8b5 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}