@charset "UTF-8";
/* ================================================================================
   九州ライブキッチンステージ 特別企画ページ 専用スタイル
   file  : css/page/stage.css
   page  : stage.php （$extra_css で最後に読み込む）
   scope : .kbs-page 配下のみ（例外：body.stage 起点のパンくず調整）。
           他ページには影響しません。

   トンマナ : 支給FV（紺×金）に合わせた「紺・金・生成り」を基調に、
              ボタンなどの行動導線はサイト共通のオレンジ（#EA7022）に揃える。
   書体     : サイト共通の Noto Sans JP（見出し・本文）＋ Jost（欧文アイブロウ）
              ＋ Oswald（数字）。特別企画ページ（ex_pet_2026）と同じく明朝は使わない。
   サイズ   : 見出し・本文・余白のスケールは ex_pet_2026 と同一。
   前提     : html { font-size: 62.5% }（1rem = 10px）。本ファイルは px 指定で統一。
================================================================================ */


/* ================================================================================
   01. トークン
================================================================================ */
.kbs-page {
  --kbs-navy:      #0D2745;  /* 紺（FV・見出し） */
  --kbs-navy-deep: #071A2D;  /* 深紺（ダーク背景） */
  --kbs-gold:      #C99A3A;  /* 金（FVロゴ） */
  --kbs-gold-light:#E4BD69;  /* 金（暗背景上） */
  --kbs-orange:    #EA7022;  /* サイト基調のオレンジ */
  --kbs-orange-deep:#C25A19;
  --kbs-ink:       #1B1A17;  /* 本文 */
  --kbs-sub:       #3A3833;  /* リード文 */
  --kbs-mute:      #6E6A62;  /* 補助テキスト */
  --kbs-pale:      #F7F3E9;  /* 生成り */
  --kbs-white:     #FCFAF6;

  --kbs-line:      rgba(27, 26, 23, .12);
  --kbs-line-gold: rgba(201, 154, 58, .4);
  --kbs-line-snow: rgba(255, 255, 255, .2);

  --kbs-gothic: "Noto Sans JP", sans-serif;
  --kbs-en:     "Jost", sans-serif;
  --kbs-num:    "Oswald", sans-serif;

  --kbs-inner: 1200px;
  --kbs-pad:   clamp(16px, 5vw, 40px);
}


/* ================================================================================
   02. ルート・共通
================================================================================ */
.kbs-page,
.kbs-page *,
.kbs-page *::before,
.kbs-page *::after {
  box-sizing: border-box;
}

.kbs-page {
  font-family: var(--kbs-gothic);
  color: var(--kbs-ink);
  background: var(--kbs-white);
  font-weight: 400;
  line-height: 1.9;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.kbs-page p,
.kbs-page h2,
.kbs-page h3,
.kbs-page ul,
.kbs-page dl,
.kbs-page dd,
.kbs-page figure { margin: 0; }
.kbs-page ul { list-style: none; padding: 0; }
/* 文節で折り返し、行末の1〜2文字だけが次行に落ちるのを防ぐ（対応ブラウザのみ） */
.kbs-page p,
.kbs-page h2,
.kbs-page h3,
.kbs-page li { word-break: auto-phrase; text-wrap: pretty; }
.kbs-page img { display: block; max-width: 100%; height: auto; }

.kbs-page .kbs-inner {
  width: 100%;
  max-width: var(--kbs-inner);
  margin-inline: auto;
  padding-inline: var(--kbs-pad);
}
.kbs-page .kbs-section { padding: clamp(64px, 9vw, 112px) 0; }

/* スマホでだけ入れたい改行 */
.kbs-page .kbs-br-sp { display: none; }
@media (max-width: 620px) {
  .kbs-page .kbs-br-sp { display: inline; }
}

/* スクロール表示アニメーション */
.kbs-page .kbs-fade {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease-out, transform .9s ease-out;
}
.kbs-page .kbs-fade.is-shown {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .kbs-page .kbs-fade { opacity: 1; transform: none; transition: none; }
}


/* ================================================================================
   03. セクション見出し
================================================================================ */
.kbs-page .kbs-head { margin-bottom: clamp(36px, 5vw, 56px); }
.kbs-page .kbs-head--center { text-align: center; }

.kbs-page .kbs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--kbs-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--kbs-gold);
}
.kbs-page .kbs-eyebrow::before,
.kbs-page .kbs-head--center .kbs-eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
}

.kbs-page .kbs-title {
  font-size: clamp(23px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .05em;
  color: var(--kbs-navy);
}
.kbs-page .kbs-title-accent { color: var(--kbs-gold); }

/* 双罫：金の細線2本 */
.kbs-page .kbs-rule {
  width: 56px;
  height: 3px;
  margin-top: 20px;
  border-top: 1px solid var(--kbs-gold);
  border-bottom: 1px solid var(--kbs-gold);
}
.kbs-page .kbs-head--center .kbs-rule { margin-inline: auto; }

.kbs-page .kbs-lead {
  font-size: 15px;
  line-height: 2.05;
  color: var(--kbs-sub);
}

/* 見出し＋リードの横並び */
.kbs-page .kbs-head--row {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 32px 72px;
  align-items: end;
}
.kbs-page .kbs-head--row .kbs-lead {
  padding-left: 24px;
  border-left: 1px solid var(--kbs-line-gold);
}
@media (max-width: 900px) {
  .kbs-page .kbs-head--row { grid-template-columns: 1fr; }
}


/* ================================================================================
   04〜05. HERO（支給画像。画像内注記を含め、全体を比率どおり表示）
   パンくず（共通CSSで絶対配置）が画像内ロゴに重ならないよう、上に帯を確保する。
================================================================================ */
.kbs-page .kbs-hero {
  padding-top: 56px;
  background: #FFFFFF;
}
/* PC：pcfv.webp（1600px）／SP（767px以下）：sp.webp（1086px）を <picture> で出し分け */
.kbs-page .kbs-hero picture { display: block; }
.kbs-page .kbs-hero__image {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
}


/* ================================================================================
   06. 開催情報バー
================================================================================ */
.kbs-page .kbs-eventbar {
  background: var(--kbs-navy);
  border-top: 1px solid var(--kbs-line-gold);
  border-bottom: 1px solid var(--kbs-line-gold);
  padding: 26px 0;
  color: #FFFFFF;
}
.kbs-page .kbs-eventbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 40px;
}
.kbs-page .kbs-eventbar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 48px;
}
.kbs-page .kbs-eventbar__item dt {
  font-family: var(--kbs-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--kbs-gold-light);
  line-height: 1.6;
}
.kbs-page .kbs-eventbar__item dd {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.6;
}
.kbs-page .kbs-eventbar__item dd small {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0 6px 0 4px;
  border-radius: 3px;
  background: #FFFFFF;
  color: var(--kbs-navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 2px;
}
@media (max-width: 767px) {
  .kbs-page .kbs-eventbar__inner { flex-direction: column; align-items: stretch; }
  .kbs-page .kbs-eventbar__item dd { font-size: 15px; }
}


/* ================================================================================
   07. ボタン（ex_pet_2026 と同じ形）
================================================================================ */
.kbs-page .kbs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 17px 30px;
  border: 1px solid var(--kbs-orange);
  background: var(--kbs-orange);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background .28s ease, border-color .28s ease;
}
.kbs-page .kbs-btn:hover {
  opacity: 1;
  background: var(--kbs-orange-deep);
  border-color: var(--kbs-orange-deep);
  color: #FFFFFF;
}
.kbs-page .kbs-btn__arrow {
  position: relative;
  display: inline-block;
  flex: none;
  width: 30px;
  height: 1px;
  background: currentColor;
  transition: width .28s ease;
}
.kbs-page .kbs-btn__arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.kbs-page .kbs-btn:hover .kbs-btn__arrow { width: 42px; }
@media (max-width: 767px) {
  .kbs-page .kbs-btn { width: 100%; padding: 16px 20px; font-size: 14px; }
}


/* ================================================================================
   08. INTRO
================================================================================ */
.kbs-page .kbs-intro {
  background: linear-gradient(135deg, #FFFFFF 50%, var(--kbs-pale));
}
.kbs-page .kbs-intro__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 32px 80px;
  align-items: start;
}
.kbs-page .kbs-intro .kbs-head { margin-bottom: 0; }
.kbs-page .kbs-intro__copy {
  padding-top: 28px;
  border-top: 1px solid var(--kbs-line-gold);
}
.kbs-page .kbs-intro__copy p {
  font-size: 15px;
  line-height: 2.05;
  color: var(--kbs-sub);
}
.kbs-page .kbs-intro__copy p + p { margin-top: 1.2em; }
@media (max-width: 900px) {
  .kbs-page .kbs-intro__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .kbs-page .kbs-intro__copy p { font-size: 14px; line-height: 1.95; }
}


/* ================================================================================
   09. 4つのテーマ
================================================================================ */
.kbs-page .kbs-pillars { background: var(--kbs-pale); }
.kbs-page .kbs-pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.kbs-page .kbs-pillar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 300px;
  padding: 28px;
  color: #FFFFFF;
}
/* 背景写真（iStock ベーシック） */
.kbs-page .kbs-pillar {
  background-color: var(--tone-deep);
  background-image: var(--photo);
  background-position: center;
  background-size: cover;
}
/* 写真の上にテーマ色を重ね、上は写真を見せ・下は文字が読める濃さにする */
.kbs-page .kbs-pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tone) 30%, transparent) 0%,
    color-mix(in srgb, var(--tone) 55%, transparent) 45%,
    color-mix(in srgb, var(--tone-deep) 92%, transparent) 100%);
}
.kbs-page .kbs-pillar::after {
  content: "";
  position: absolute;
  top: -65px;
  right: -65px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255, 255, 255, .23);
  border-radius: 50%;
}
.kbs-page .kbs-pillar--beef   { --tone: #A92621; --tone-deep: #52171A; --photo: url("../../images/stage/theme_beef.webp"); }
.kbs-page .kbs-pillar--fish   { --tone: #0F629A; --tone-deep: #0B3355; --photo: url("../../images/stage/theme_fish.webp"); }
.kbs-page .kbs-pillar--tea    { --tone: #3C7346; --tone-deep: #1C3A2E; --photo: url("../../images/stage/theme_tea.webp"); }
.kbs-page .kbs-pillar--shochu { --tone: #825020; --tone-deep: #3E2B1F; --photo: url("../../images/stage/theme_shochu.webp"); }

.kbs-page .kbs-pillar__num {
  display: block;
  font-family: var(--kbs-num);
  font-size: 14px;
  letter-spacing: .12em;
  opacity: .8;
}
.kbs-page .kbs-pillar__char {
  display: block;
  margin: 28px 0 24px;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  opacity: .18;
}
.kbs-page .kbs-pillar__title {
  margin-bottom: 8px;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
}
.kbs-page .kbs-pillar__text {
  font-size: 14px;
  line-height: 1.85;
}
@media (max-width: 900px) {
  .kbs-page .kbs-pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .kbs-page .kbs-pillar-grid { gap: 10px; }
  .kbs-page .kbs-pillar { min-height: 230px; padding: 20px; }
  .kbs-page .kbs-pillar__char { margin: 20px 0 18px; font-size: 46px; }
  .kbs-page .kbs-pillar__text { font-size: 13px; }
}


/* ================================================================================
   10. LIVE EXPERIENCE
================================================================================ */
.kbs-page .kbs-experience {
  color: #FFFFFF;
  background: radial-gradient(circle at 20% 0, #244B72 0, var(--kbs-navy) 42%, var(--kbs-navy-deep) 100%);
}
.kbs-page .kbs-experience .kbs-title { color: #FFFFFF; }
.kbs-page .kbs-experience .kbs-eyebrow { color: var(--kbs-gold-light); }

.kbs-page .kbs-experience__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.kbs-page .kbs-experience__card {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--kbs-line-snow);
  background: rgba(255, 255, 255, .06);
}
.kbs-page .kbs-experience__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 28px;
  border-radius: 50%;
  background: var(--kbs-gold);
  color: var(--kbs-navy-deep);
}
.kbs-page .kbs-experience__icon svg { width: 28px; height: 28px; }
.kbs-page .kbs-experience__en {
  margin-bottom: 6px;
  font-family: var(--kbs-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--kbs-gold-light);
}
.kbs-page .kbs-experience__title {
  margin-bottom: 14px;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
}
.kbs-page .kbs-experience__text {
  font-size: 15px;
  line-height: 2;
  color: rgba(255, 255, 255, .86);
}
.kbs-page .kbs-note {
  margin-top: 28px;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .7);
}
@media (max-width: 767px) {
  .kbs-page .kbs-experience__grid { grid-template-columns: 1fr; gap: 16px; }
  .kbs-page .kbs-experience__text { font-size: 14px; line-height: 1.95; }
}


/* ================================================================================
   11. DISCOVER & CONNECT
================================================================================ */
.kbs-page .kbs-scene { background: var(--kbs-pale); }
.kbs-page .kbs-scene__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px 72px;
  align-items: center;
}
.kbs-page .kbs-scene__image img {
  width: 100%;
  box-shadow: 16px 16px 0 rgba(201, 154, 58, .55);
}
.kbs-page .kbs-scene__image figcaption {
  margin-top: 22px;
  font-size: 11.5px;
  color: var(--kbs-mute);
}
.kbs-page .kbs-scene .kbs-head { margin-bottom: 28px; }
.kbs-page .kbs-scene__list li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--kbs-line);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
}
.kbs-page .kbs-scene__list li:first-child { border-top: 1px solid var(--kbs-line); }
.kbs-page .kbs-scene__list span {
  flex: none;
  font-family: var(--kbs-num);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--kbs-gold);
}
@media (max-width: 900px) {
  .kbs-page .kbs-scene__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .kbs-page .kbs-scene__image img { box-shadow: 10px 10px 0 rgba(201, 154, 58, .55); }
  .kbs-page .kbs-scene__list li { font-size: 14px; }
}


/* ================================================================================
   12. RECOMMENDED FOR
================================================================================ */
.kbs-page .kbs-audience { background: #FFFFFF; }
.kbs-page .kbs-audience__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.kbs-page .kbs-audience__card {
  padding: 32px 28px;
  border-top: 3px solid var(--kbs-gold);
  background: var(--kbs-white);
  box-shadow: 0 1px 0 var(--kbs-line);
}
.kbs-page .kbs-audience__title {
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--kbs-navy);
}
.kbs-page .kbs-audience__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--kbs-sub);
}
@media (max-width: 900px) {
  .kbs-page .kbs-audience__grid { grid-template-columns: 1fr; gap: 12px; }
  .kbs-page .kbs-audience__card { padding: 24px 22px; }
}


/* ================================================================================
   13. CTA
================================================================================ */
.kbs-page .kbs-cta {
  padding: clamp(56px, 7vw, 88px) 0;
  color: #FFFFFF;
  background: linear-gradient(120deg, #0C294A, #0A5A72);
}
.kbs-page .kbs-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px 60px;
}
.kbs-page .kbs-cta .kbs-eyebrow { color: var(--kbs-gold-light); }
.kbs-page .kbs-cta .kbs-title { color: #FFFFFF; }
.kbs-page .kbs-cta__date {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .86);
}
@media (max-width: 900px) {
  .kbs-page .kbs-cta__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  .kbs-page .kbs-cta__inner { align-items: stretch; }
}