/* =============================================================
   GOOD SPORTS v2026 — 総合トップ(goodsports.co.jp/ ・ /en.php)固有
   前提: base.css を先に読み込むこと(トークン・ボタン・ヘッダー・フッター等)

   このページだけが夏冬を同居させるため、冬のシアンに対して
   夏のグリーンを対として持つ。冬WPの site.css とは干渉しない。
   ============================================================= */
:root {
  --gs-green: #37824b;
  --gs-green-d: #128652;
  --gs-ink-d: #12202b;
  --gs-mute: #7b95a6;
}

/* ---- 総合トップのヘッダー(予約CTAを置かず、言語切替とTELのみ) ---- */
.gs-header-corp { padding: 26px 40px; gap: 16px 20px; }
/* line-height:0 が無いと img 下に行送りの余白が出てヘッダーが2px高くなる(デザイン準拠) */
.gs-header-corp .gs-logo { display: block; line-height: 0; }
.gs-header-corp .gs-logo img { height: 40px; width: auto; }
.gs-header-corp .gs-nav { margin-left: auto; gap: 24px; }
.gs-btn-lang {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1.5px solid var(--gs-cyan); color: var(--gs-cyan) !important;
  font-family: Poppins, 'Noto Sans JP', sans-serif; font-size: 12.5px; font-weight: 700;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap;
}
.gs-btn-lang.sm { font-size: 11.5px; padding: 8px 13px; }
.gs-header-tel { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gs-sub); white-space: nowrap; }
.gs-header-tel a { font-family: Poppins, sans-serif; font-weight: 700; font-size: 15px; color: var(--gs-text) !important; }

/* ---- 季節スイッチ(ヒーロー右下のドット) ----
   冬用・夏用の要素を両方出力し、body のクラスで一方だけ見せる。
   既定は $gs_season がサーバ側で body.gs-w / body.gs-s を出す。
   corporate.js が押下で入れ替える(再読み込みなし)。 */
body.gs-w .gs-season-s { display: none !important; }
body.gs-s .gs-season-w { display: none !important; }
.gs-season-btn { cursor: pointer; }

/* ---- ページ共通の下敷き ---- */
.gsv .gs-c-note { display: flex; gap: 8px; font-size: 11.5px; line-height: 2; color: var(--gs-sub); }
.gs-c-lead { text-align: center; font-weight: 900; font-size: 13.5px; color: var(--gs-cyan); }
.gs-c-arrow { position: absolute; right: 22px; font-family: Poppins, sans-serif; font-weight: 700; }

/* =============================================================
   ヒーロー(デスクトップ 1080px〜)
   ============================================================= */
.gs-chero { background: #fff; position: relative; overflow: hidden; }
.gs-chero-grid {
  max-width: 1440px; margin: 0 auto; display: grid;
  grid-template-columns: 1.02fr 1fr; align-items: center;
  min-height: 780px; position: relative;
}
.gs-chero-left { position: relative; z-index: 3; padding: 80px 24px 88px 64px; box-sizing: border-box; }
.gs-chero-h1 {
  margin: 0; font-weight: 900; font-size: clamp(30px, 3.5vw, 50px);
  line-height: 1.42; letter-spacing: .03em; color: var(--gs-ink-d);
}
.gs-chero-kicker { font-weight: 900; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: .04em; color: var(--gs-cyan); }
.gs-chero-kicker .mk { font-size: 11px; vertical-align: top; color: var(--gs-sub); }
.gs-chero-kicker .sub { color: var(--gs-text); font-size: clamp(13px, 1.3vw, 16px); font-weight: 700; }
.gs-chero-brand {
  font-family: Poppins, sans-serif; font-weight: 800; font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: .02em; color: var(--gs-ink-d); margin-top: 12px; line-height: 1;
}
.gs-chero-brand-jp { font-size: 12.5px; color: var(--gs-sub); letter-spacing: .16em; margin-top: 8px; }
.gs-chero-cta-wrap { max-width: 620px; margin-top: 34px; }
.gs-chero-cta { display: flex; gap: 14px; margin-top: 12px; }
.gs-chero-cta a {
  flex: 1; min-width: 0; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; border-radius: 999px; white-space: nowrap; transition: transform .15s ease;
}
.gs-chero-cta a:hover { transform: scale(1.03); }
.gs-chero-cta .pri { background: var(--gs-yellow); color: var(--gs-text) !important; font-weight: 900; padding: 19px 22px; box-shadow: 0 12px 30px rgba(251, 198, 15, .4); }
.gs-chero-cta .sec { background: #fff; border: 1.5px solid var(--gs-cyan); color: var(--gs-cyan) !important; font-weight: 800; padding: 18px 22px; }
.gs-chero-note { margin-top: 18px; }

.gs-chero-visual { position: relative; align-self: stretch; }
.gs-chero-blob { position: absolute; right: -6%; top: -90px; width: 820px; height: 820px; border-radius: 999px; background: var(--gs-cyan); }
.gs-chero-photo {
  position: absolute; right: 2%; top: 20px; width: 660px; height: 660px;
  border-radius: 999px; overflow: hidden; box-shadow: 0 24px 60px rgba(15, 63, 139, .18);
}
.gs-chero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gs-chero-curve {
  position: absolute; left: -24%; right: -14%; bottom: -190px; height: 340px;
  background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: 2;
}
.gs-chero-card {
  position: absolute; right: 44px; bottom: 96px; z-index: 5; width: 390px;
  background: rgba(255, 255, 255, .97); border-radius: 20px; padding: 22px 26px 18px;
  box-shadow: 0 18px 48px rgba(15, 63, 139, .22);
}
.gs-chero-card .hd { text-align: center; font-weight: 900; font-size: 15px; white-space: nowrap; }
.gs-chero-card .sep { border-top: 1px dashed var(--gs-line2); margin: 14px 0 2px; }
.gs-chero-card a { display: flex; align-items: center; gap: 14px; padding: 12px 2px; border-bottom: 1px dotted var(--gs-line); color: var(--gs-text); }
.gs-chero-card a:last-of-type { border-bottom: 0; }
.gs-chero-card .ic {
  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-chero-card .ic.navy { background: var(--gs-navy); }
.gs-chero-card .ic.green { background: var(--gs-green); }
.gs-chero-card .tx { flex: 1; font-weight: 900; font-size: 13.5px; }
.gs-chero-card .ar { color: var(--gs-cyan); font-family: Poppins, sans-serif; }
.gs-chero-dots { position: absolute; right: 44px; bottom: 34px; z-index: 4; display: flex; align-items: center; gap: 12px; }
.gs-chero-dots a { display: inline-block; width: 11px; height: 11px; border-radius: 999px; background: var(--gs-line2); }
.gs-chero-dots .lb { font-family: Poppins, sans-serif; font-size: 10.5px; letter-spacing: .2em; color: var(--gs-mute); white-space: nowrap; }

/* 夏モード: 主役色をグリーンに差し替える */
.gs-chero.is-summer .gs-chero-blob { background: var(--gs-green); }
.gs-chero.is-summer .gs-chero-kicker { color: var(--gs-green); }
.gs-chero.is-summer .gs-c-lead { color: var(--gs-green); }
.gs-chero.is-summer .gs-chero-cta .sec { border-color: var(--gs-green); color: var(--gs-green) !important; }
.gs-chero.is-summer .gs-chero-card .ic { background: var(--gs-green); }
.gs-chero.is-summer .gs-chero-card .ar { color: var(--gs-green); }
.gs-chero-dots a.on { background: var(--gs-cyan); }
.gs-chero.is-summer .gs-chero-dots a.on { background: var(--gs-green); }

/* =============================================================
   ヒーロー(コンパクト 〜1079px)
   ============================================================= */
.gs-hc { background: #fff; position: relative; overflow: hidden; padding: 28px 20px 0; box-sizing: border-box; }
.gs-hc-h1 { margin: 0; font-weight: 900; font-size: 26px; line-height: 1.5; letter-spacing: .03em; color: var(--gs-ink-d); }
.gs-hc-kicker { font-weight: 900; font-size: 14px; letter-spacing: .04em; color: var(--gs-cyan); }
.gs-hc-kicker .mk { font-size: 10px; vertical-align: top; color: var(--gs-sub); }
.gs-hc-kicker .sub { color: var(--gs-text); font-size: 12.5px; font-weight: 700; }
.gs-hc-brand { font-family: Poppins, sans-serif; font-weight: 800; font-size: 24px; letter-spacing: .02em; color: var(--gs-ink-d); margin-top: 10px; line-height: 1; }
.gs-hc-brand-jp { font-size: 11.5px; color: var(--gs-sub); letter-spacing: .16em; margin-top: 6px; }
.gs-hc-visual { position: relative; height: 360px; margin-top: 24px; }
.gs-hc-blob { position: absolute; left: 50%; top: -14px; transform: translateX(-46%); width: 400px; height: 400px; border-radius: 999px; background: var(--gs-cyan); }
.gs-hc-photo {
  position: absolute; left: 50%; top: 24px; transform: translateX(-52%);
  width: 320px; height: 320px; border-radius: 999px; overflow: hidden; box-shadow: 0 18px 44px rgba(15, 63, 139, .18);
}
.gs-hc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gs-hc-curve {
  position: absolute; left: -30%; right: -30%; bottom: -200px; height: 240px;
  background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: 2;
}
.gs-hc-dots { position: absolute; right: 2px; bottom: 6px; z-index: 4; display: flex; align-items: center; gap: 10px; }
.gs-hc-dots a { display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: var(--gs-line2); }
.gs-hc-dots a.on { background: var(--gs-cyan); }
.gs-hc-dots .lb { font-family: Poppins, sans-serif; font-size: 9.5px; letter-spacing: .2em; color: var(--gs-mute); white-space: nowrap; }
.gs-hc-body { position: relative; z-index: 5; margin-top: 6px; }
.gs-hc-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.gs-hc-cta a {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14.5px; border-radius: 999px; white-space: nowrap;
}
.gs-hc-cta .pri { background: var(--gs-yellow); color: var(--gs-text) !important; font-weight: 900; padding: 18px 22px; box-shadow: 0 10px 26px rgba(251, 198, 15, .38); }
.gs-hc-cta .sec { background: #fff; border: 1.5px solid var(--gs-cyan); color: var(--gs-cyan) !important; font-weight: 800; padding: 17px 22px; }
.gs-hc-cta .gs-c-arrow { right: 20px; }
/* .gsv .gs-c-lead / .gsv .gs-c-note より詳細度を上げないと共通値(13.5px/11.5px)に負ける */
.gs-hc .gs-c-lead { font-size: 13px; }
.gs-hc .gs-c-note { margin-top: 16px; font-size: 11px; line-height: 1.9; gap: 7px; }
.gs-hc-links { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.gs-hc-links a { display: flex; align-items: center; gap: 10px; color: var(--gs-text); font-weight: 700; font-size: 12.5px; padding: 9px 2px; border-bottom: 1px dotted var(--gs-line); }
.gs-hc-links a:last-child { border-bottom: 0; }
.gs-hc-links .sq { width: 8px; height: 8px; border-radius: 3px; background: var(--gs-cyan); flex-shrink: 0; }
.gs-hc-links .sq.green { background: var(--gs-green); }
.gs-hc-links .tx { flex: 1; }
.gs-hc-links .ar { color: var(--gs-cyan); }
.gs-hc-links .ar.green { color: var(--gs-green); }

.gs-hc.is-summer .gs-hc-blob { background: var(--gs-green); }
.gs-hc.is-summer .gs-hc-kicker { color: var(--gs-green); }
.gs-hc.is-summer .gs-c-lead { color: var(--gs-green); }
.gs-hc.is-summer .gs-hc-cta .sec { border-color: var(--gs-green); color: var(--gs-green) !important; }
.gs-hc.is-summer .gs-hc-dots a.on { background: var(--gs-green); }

/* ---- デスクトップ / コンパクトの出し分け(1080px 境界) ---- */
.gs-hc { display: none; }
@media (max-width: 1079px) {
  .gs-chero { display: none; }
  .gs-hc { display: block; }
}

/* ---- タブレット縦(768〜1079px): コンパクトを拡大 ---- */
@media (min-width: 768px) and (max-width: 1079px) {
  /* section への一括 padding(20px !important) より後に効かせる必要があるため !important */
  .gs-hc { padding: 44px 40px 0 !important; }
  .gs-hc-h1 { font-size: 38px; }
  .gs-hc-kicker { font-size: 16px; }
  .gs-hc-brand { font-size: 30px; }
  .gs-hc-visual { height: 500px; }
  .gs-hc-blob { width: 560px; height: 560px; }
  .gs-hc-photo { width: 460px; height: 460px; }
  .gs-hc-curve { bottom: -209px; height: 260px; }
  .gs-hc-cta { flex-direction: row; }
  .gs-hc-cta a { flex: 1; }
  .gs-hc-links { flex-direction: row; gap: 8px 24px; flex-wrap: wrap; }
  .gs-hc-links a { border-bottom: 0; padding: 0; }
  .gs-hc-links a .ar { display: none; }
}

/* ---- 英語: 見出しまわりの太さを一段落とす(原本 900→800) ---- */
html[lang^="en"] .gs-chero-h1,
html[lang^="en"] .gs-hc-h1,
html[lang^="en"] .gs-chero-kicker,
html[lang^="en"] .gs-hc-kicker,
html[lang^="en"] .gs-c-lead,
html[lang^="en"] .gs-chero-cta .pri,
html[lang^="en"] .gs-hc-cta .pri,
html[lang^="en"] .gs-chero-card .hd,
html[lang^="en"] .gs-chero-card .tx { font-weight: 800; }
/* 英語のキッカーは補足を改行して2行にする(原本準拠。上余白はDT4px/コンパクト3px) */
html[lang^="en"] .gs-chero-kicker .sub { display: block; margin-top: 4px; }
html[lang^="en"] .gs-hc-kicker .sub { display: block; margin-top: 3px; }

/* =============================================================
   本文セクション(デザイン原本の helmet 内スタイルを移植)
   デザインはクラス名にプレフィックスを持たないが、このページは
   base.css / corporate.css しか読まないので衝突しない。
   数値を原本と一致させるため、クラス名も原本のまま使う。
   ============================================================= */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }

@media (max-width: 1080px) {
  .wm { font-size: 96px !important; }
}
@media (max-width: 1079px) {
  /* チャットのパネルも section なので、ページ用の左右余白を当てない
     (当たると全幅シートの内側に20pxの余白が出る) */
  section:not(.gsc-panel) { padding-left: 20px !important; padding-right: 20px !important; }
  footer { padding-left: 20px !important; padding-right: 20px !important; }
  .sec-h { font-size: 40px !important; }
  .wm { font-size: 60px !important; }
  .resp-1col { grid-template-columns: 1fr !important; }
  .band-pad { padding: 52px 22px !important; }
  .float-cta { left: 0; right: 0; bottom: 16px !important; align-items: center !important; }
  .float-cta a { justify-content: center; font-size: 14.5px !important; padding: 19px 40px !important; }
  .float-cta span { margin-right: 0 !important; }
  .hero-marker span { font-size: 19px !important; padding: 8px 13px !important; }
  .hero-marker .hm-last { font-size: 23px !important; }
  .season-pair { grid-template-columns: 1fr !important; }
  .feature-flip { flex-direction: column !important; align-items: stretch !important; }
  .feature-photo { flex: 0 0 auto !important; height: 220px !important; width: 100% !important; }
  /* 縦積み時は nowrap のカード値を折り返す(運行区間などが列幅を超えるため) */
  .feature-flip div[style*="white-space:nowrap"] { white-space: normal !important; }
}

/* 中間幅(1080〜1420px)のヘッダー圧縮 — 総合トップは原本の値に合わせる
   (base.css の冬WP用より gap と padding がわずかに小さい) */
@media (max-width: 1420px) and (min-width: 1080px) {
  .gs-header-corp .gs-nav { gap: 14px !important; }
  .gs-header-corp .gs-header-cta a { padding: 10px 14px !important; }
}