/* ================================================
   TICKET — ticket.css
   ticket.html 専用スタイル
   ※ Design Tokens は style.css の :root に定義済み
   ================================================ */


/* ================================================
   THEME — Ticket
   共通クラスの色・背景をticketテーマで上書き
   ================================================ */

body.theme--ticket {
  font-family: var(--font-helvetica);
  letter-spacing: 0;
  word-break: break-word;
  overflow-wrap: break-word;
  background-color: var(--color-ticket-bg-page);  /* #131416 */
}

/* --- intro オーバーライド --- */
.theme--ticket .intro__section {
  background-color: #26282B;
}

.theme--ticket .intro__section > .intro__content,
.theme--ticket .intro__section > .intro__mv {
  flex: 0 0 50%;
  min-width: 0;
}

.theme--ticket .intro__content {
  background-color: var(--color-ticket-bg-main);
}
.theme--ticket .intro__heading     { color: var(--color-ticket-primary); }
.theme--ticket .intro__title       { color: var(--color-ticket-primary); }
.theme--ticket .intro__desc        { color: var(--color-ticket-primary); }
.theme--ticket .intro__detail-text { color: var(--color-ticket-secondary); }

/* --- mission オーバーライド --- */
.theme--ticket .mission {
  background-color: var(--color-ticket-bg-main);
}

/* --- overview オーバーライド --- */
.theme--ticket .section__label          { color: var(--color-ticket-secondary); }
.theme--ticket .section__heading-medium { color: var(--color-ticket-primary); }
.theme--ticket .section__heading-small  { color: var(--color-ticket-primary); }
.theme--ticket .section__body           { color: var(--color-ticket-primary); }
.theme--ticket .section__indent-bar     { background-color: rgba(255, 255, 255, 0.15); }
.theme--ticket .section__indent-label   { color: var(--color-ticket-primary); }
.theme--ticket .section__indent-text    { color: var(--color-ticket-primary); }
.theme--ticket .section__bullet-items   { color: var(--color-ticket-primary); }


/* ================================================
   BADGE — ticket固有
   ================================================ */
.badge--ticket {
  background-color: var(--color-ticket-badge-bg);
  font-size: var(--size-pc-caption);
  line-height: var(--lh-pc-caption);
  color: var(--color-ticket-secondary);
}


/* ================================================
   TICKET OVERVIEW — Unique Structure（キオスク比較）
   ================================================ */

.ticket-section__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: stretch;
  width: 100%;
}

.ticket-section__col-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-width: 0;
  height: 100%;
}

.ticket-section__col-diagram {
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.ticket-section__diagram-card {
  border-radius: 16px;
  height: 100%;
  min-height: 416px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ticket-section__diagram-img--pc {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ticket-section__diagram-img--sp {
  display: none;
  max-width: 100%;
  height: auto;
}


/* ================================================
   Responsive — Ticket SP
   ================================================ */
@media (max-width: 768px) {

  .theme--ticket .intro__section > .intro__content,
  .theme--ticket .intro__section > .intro__mv {
    flex: none;
    width: 100%;
  }

  .theme--ticket .intro__mv {
    aspect-ratio: 375 / 392;
  }

  .badge--ticket {
    font-size: var(--size-sp-caption);
    line-height: var(--lh-sp-caption);
  }

  .ticket-section__columns {
    display: flex;
    flex-direction: column;
    gap: var(--sp-gap-xxxl);
    width: 100%;
  }

  /* col-text: flex child として幅を 100% に制限 */
  .ticket-section__col-text {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: var(--sp-gap-l);
    justify-content: flex-start;
    height: auto;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-all;
  }

  .ticket-section__col-diagram {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding-top: 0;
    box-sizing: border-box;
  }

  .ticket-section__diagram-card {
    height: auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    flex-direction: column;
    gap: var(--sp-gap-xl);
  }

  .ticket-section__diagram-img--pc,
  .ticket-section__diagram-img--sp {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  .ticket-section__diagram-img--pc { display: none; }
  .ticket-section__diagram-img--sp { display: block; }

}


/* ================================================
   TICKET RESEARCH — リサーチと課題定義
   ================================================ */
.ticket-research {
  padding: 120px 240px;
  display: flex;
  flex-direction: column;
  gap: 96px;
}

/* --- グループ --- */
.ticket-research__group {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* --- 要件カード（PC:横並び） --- */
.ticket-research__req-cards {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

/* --- ダークカード共通 --- */
.ticket-research__card {
  background-color: var(--color-ticket-bg-main);
  border-radius: 16px;
  padding: 48px 60px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.ticket-research__req-card {
  flex: 1;
  gap: 16px;
}

/* --- 番号アイテム --- */
.ticket-research__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* PC: body-detail は item-header/body の旧構造と同じ扱い */
.ticket-research__body-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* PC: content div (title + body を包む) */
.ticket-research__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* PC: external-link（出典） */
.ticket-research__external-link {
  display: flex;
  align-items: center;
}

.ticket-research__item-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.ticket-research__item-title {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
  height: fit-content;
}

.ticket-research__item-num {
  font-size: var(--size-pc-heading-xsmall);
  font-weight: 700;
  line-height: var(--lh-pc-heading-xsmall);
  color: var(--color-ticket-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.ticket-research__item-heading {
  font-size: var(--size-pc-heading-xsmall);
  font-weight: 700;
  line-height: var(--lh-pc-heading-xsmall);
  color: var(--color-ticket-primary);
}

/* 番号なし見出し */
.ticket-research__item-heading--no-num {
  font-size: var(--size-pc-heading-xsmall);
  font-weight: 700;
  line-height: var(--lh-pc-heading-xsmall);
  color: var(--color-ticket-primary);
}

.ticket-research__item-source {
  font-size: var(--size-pc-caption);
  font-weight: 400;
  line-height: var(--lh-pc-caption);
  color: var(--color-ticket-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.ticket-research__item-body {
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-primary);
}

/* --- インタビューメタ（indent） --- */
.ticket-research__meta {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.ticket-research__meta-bar {
  width: 4px;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.15);
}

.ticket-research__meta-items {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.ticket-research__meta-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ticket-research__meta-label {
  font-size: var(--size-pc-body);
  font-weight: 700;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-primary);
  white-space: nowrap;
}

.ticket-research__meta-text {
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-primary);
  white-space: nowrap;
}

/* --- サンプルカード（半透明） --- */
.ticket-research__sample {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 48px 60px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 16px;
}

.ticket-research__sample-caption {
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-secondary);
  text-align: center;
}

.ticket-research__sample-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.ticket-research__img-row {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 100%;
}

/* PC/SP 画像切り替え */
.ticket-research__sample-img--pc {
  display: block;
  max-width: 100%;
  height: auto;
}

.ticket-research__sample-img--sp {
  display: none;
  max-width: 100%;
  height: auto;
}


/* ================================================
   Responsive — Ticket Research SP
   ================================================ */
@media (max-width: 768px) {

  .ticket-research {
    padding: 48px 16px;
    gap: 48px;
  }

  .ticket-research__group { gap: 24px; }

  /* 要件カード: 縦並び */
  .ticket-research__req-cards {
    flex-direction: column;
    height: auto;
    gap: 16px;
  }

  .ticket-research__card {
    padding: 24px 16px;
    gap: 32px;
    border-radius: 16px;
  }

  .ticket-research__req-card {
    gap: 8px;
  }

  /* SP: item 全体の gap */
  .ticket-research__item { gap: 24px; }

  /* SP: body-detail の gap */
  .ticket-research__body-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* SP: content (title + body が gap なしで密着) */
  .ticket-research__content {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* SP: title (番号 + 見出し) */
  .ticket-research__item-title {
    height: fit-content;
  }

  .ticket-research__item-num,
  .ticket-research__item-heading,
  .ticket-research__item-heading--no-num {
    font-size: var(--size-sp-body);
    line-height: 24px;
  }

  .ticket-research__item-heading,
  .ticket-research__item-heading--no-num {
    word-break: break-all;
    overflow-wrap: break-word;
    min-width: 0;
  }

  /* SP: body (padding-left 20px でインデント) */
  .ticket-research__item-body {
    font-size: var(--size-sp-body);
    line-height: 24px;
    padding-left: 20px;
  }

  /* SP: no-num の body はインデントなし */
  .ticket-research__item-body--no-num {
    padding-left: 0;
  }

  /* SP: external-link (出典) */
  .ticket-research__external-link {
    padding-left: 20px;
  }

  .ticket-research__item-source {
    font-size: 12px;
    line-height: 18px;
    white-space: normal;
  }

  /* インタビューメタ: 縦並び */
  .ticket-research__meta-bar { width: 2px; }

  .ticket-research__meta-items {
    flex-direction: column;
    gap: 16px;
  }

  .ticket-research__meta-label,
  .ticket-research__meta-text {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
    white-space: normal;
  }

  /* サンプルカード */
  .ticket-research__sample {
    padding: 24px 16px;
    gap: 24px;
    margin-top: 0;
  }

  .ticket-research__sample-caption {
    font-size: var(--size-sp-caption);
    line-height: var(--lh-sp-caption);
  }

  .ticket-research__img-row {
    flex-direction: column;
    gap: 16px;
  }

  /* SP 画像に切り替え */
  .ticket-research__sample-img--pc { display: none; }
  .ticket-research__sample-img--sp { display: block; }

}


/* ================================================
   TICKET SOLUTION — 解決策
   ================================================ */
.ticket-solution {
  padding: 120px 240px;
  display: flex;
  flex-direction: column;
  gap: 96px;
}

/* ダークリストカード */
.ticket-solution__list {
  background-color: var(--color-ticket-bg-main);
  border-radius: 16px;
  padding: 48px 60px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* 各 detail 項目 */
.ticket-solution__detail {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* テキスト部 */
.ticket-solution__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ticket-solution__item-title {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.ticket-solution__item-num {
  font-size: var(--size-pc-heading-xsmall);
  font-weight: 700;
  line-height: var(--lh-pc-heading-xsmall);
  color: var(--color-ticket-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.ticket-solution__item-heading {
  font-size: var(--size-pc-heading-xsmall);
  font-weight: 700;
  line-height: var(--lh-pc-heading-xsmall);
  color: var(--color-ticket-primary);
}

.ticket-solution__item-body {
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-primary);
}

/* 半透明 sample カード */
.ticket-solution__sample {
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  position: relative;
  overflow: hidden;
}

/* PC/SP 画像切り替え */
.ticket-solution__sample-img--pc {
  display: block;
  max-width: 100%;
  height: auto;
}

.ticket-solution__sample-img--sp {
  display: none;
  max-width: 100%;
  height: auto;
}

/* アニメーション overlay（項目 3） */
.ticket-solution__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(4px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ticket-solution__play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #FFFFFF;
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  border-radius: 999px;
  padding: 0 16px 0 24px;
  height: 48px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.ticket-solution__play-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}


/* ================================================
   Responsive — Ticket Solution SP
   ================================================ */
@media (max-width: 768px) {

  .ticket-solution {
    padding: 48px 16px;
    gap: 48px;
  }

  .ticket-solution__list {
    padding: 24px 16px;
    gap: 32px;
    border-radius: 16px;
  }

  .ticket-solution__detail { gap: 24px; }

  .ticket-solution__item { gap: 8px; }

  .ticket-solution__item-num,
  .ticket-solution__item-heading {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

  .ticket-solution__item-body {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
    padding-left: 20px;
  }

  .ticket-solution__sample {
    gap: 24px;
  }

  .ticket-solution__play-btn {
    font-size: var(--size-sp-body);
    padding: 8px 16px 8px 20px;
    height: auto;
  }

  /* SP 画像に切り替え */
  .ticket-solution__sample-img--pc { display: none; }
  .ticket-solution__sample-img--sp { display: block; }

}


/* ================================================
   TICKET RESULT — 結果
   ================================================ */
.ticket-result {
  background-color: var(--color-ticket-bg-main);
  padding: 120px 240px;
  display: flex;
  flex-direction: column;
  gap: 96px;
}

/* フィードバックリスト */
.ticket-result__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 各フィードバック: indent bar + body */
.ticket-result__feedback {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.ticket-result__feedback-bar {
  width: 4px;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.15);
}

.ticket-result__feedback-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.ticket-result__feedback-quote {
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-primary);
}

.ticket-result__feedback-source {
  font-size: var(--size-pc-caption);
  font-weight: 400;
  line-height: var(--lh-pc-caption);
  color: var(--color-ticket-secondary);
  white-space: nowrap;
}

/* まとめテキスト */
.ticket-result__summary {
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-primary);
}

.ticket-result__summary p + p {
  margin-top: 16px;
}


/* ================================================
   Responsive — Ticket Result SP
   ================================================ */
@media (max-width: 768px) {

  .ticket-result {
    padding: 48px 16px;
    gap: 48px;
  }

  .ticket-result__feedback-bar { width: 2px; }

  .ticket-result__feedback-quote {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

  .ticket-result__feedback-source {
    font-size: var(--size-sp-caption);
    line-height: var(--lh-sp-caption);
    white-space: normal;
  }

  .ticket-result__summary {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

}


/* ================================================
   TICKET WRAP-UP — 振り返り
   ================================================ */
.ticket-wrapup {
  background-color: var(--color-ticket-bg-wrapup);
  padding: 120px 240px;
  display: flex;
  flex-direction: column;
  gap: 96px;
}

/* セクション見出し */
.ticket-wrapup__label {
  font-size: var(--size-pc-body);
  font-weight: 700;
  line-height: var(--lh-pc-body);
  color: rgba(28, 28, 28, 0.3);
}

.ticket-wrapup__heading {
  font-size: var(--size-pc-heading-medium);
  font-weight: 700;
  line-height: var(--lh-pc-heading-medium);
  color: #1C1C1C;
}

/* 各 学び グループ */
.ticket-wrapup__group {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.ticket-wrapup__subheading {
  font-size: var(--size-pc-heading-small);
  font-weight: 700;
  line-height: var(--lh-pc-heading-small);
  color: #1C1C1C;
}

.ticket-wrapup__body {
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: #1C1C1C;
}

.ticket-wrapup__body p + p { margin-top: 16px; }

.ticket-wrapup__body ul {
  list-style: disc;
  padding-left: 24px;
  margin-top: 0;
  margin-bottom: 0;
}

.ticket-wrapup__body li { line-height: var(--lh-pc-body); }

/* 学び① 画像エリア（PC: 横並び） */
.ticket-wrapup__images {
  display: grid;
  grid-template-columns: minmax(0, 761fr) minmax(0, 270fr) minmax(0, 270fr);
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.ticket-wrapup__img-wide {
  border-radius: 10px;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 761 / 480;
  object-fit: cover;
}

.ticket-wrapup__img-screen {
  border-radius: var(--radius-s, 4px);
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1080 / 1920;
  height: auto;
  object-fit: cover;
}

/* PC/SP 画像切り替え */
.ticket-wrapup__img--pc { display: block; }
.ticket-wrapup__img--sp { display: none; }

/* 学び② sample カード */
.ticket-wrapup__sample {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 48px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.ticket-wrapup__sample-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-s, 4px);
  position: relative;
  z-index: 1;
}

/* PC/SP 画像切り替え */
.ticket-wrapup__img--pc { display: block; }
.ticket-wrapup__img--sp { display: none; }

/* overlay: ライトテーマ */
.ticket-wrapup__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* play ボタン: ライトテーマ（白背景 + 黒テキスト） */
.ticket-wrapup__play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #1C1C1C;
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  border-radius: 999px;
  padding: 0 16px 0 24px;
  height: 48px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.ticket-wrapup__play-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}




/* ================================================
   DIVIDER LINE
   ================================================ */
.divider-line {
  width: 100%;
  padding: 0 var(--sp-pad-container-h-pc);
  box-sizing: border-box;
}

.divider-line::after {
  content: '';
  display: block;
  height: 1px;
  background-color: rgba(136, 140, 150, 0.2);
  width: 100%;
}

/* ================================================
   Responsive — Divider SP
   ================================================ */
@media (max-width: 768px) {

  .divider-line {
    padding: 0 var(--sp-pad-h-sp);
  }

  .divider-line::after {
    height: 1px;
  }

}



/* ================================================
   TICKET FOOTER — プロジェクト情報まとめ
   ================================================ */
.ticket-footer {
  background-color: var(--color-ticket-bg-page);
  padding: var(--sp-pad-container-v-pc) var(--sp-pad-container-h-pc);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 96px;
}

/* 見出しブロック */
.ticket-footer__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-xl);
  text-align: center;
  width: 100%;
}

.ticket-footer__title {
  font-size: var(--size-pc-heading-large);
  font-weight: 700;
  line-height: var(--lh-pc-heading-large);
  color: var(--color-ticket-primary);
}

.ticket-footer__desc {
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-primary);
}

/* バッジ + テキストのリスト */
.ticket-footer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-gap-xl);
  width: 100%;
}

/* 각バッジアイテム */
.ticket-footer__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-gap-m);
}

.ticket-footer__item .badge {
  align-self: center;
}

.ticket-footer__text {
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-secondary);
  text-align: center;
}

.ticket-footer__text p + p {
  margin-top: 2px;
}


/* ================================================
   Responsive — Ticket Footer SP
   ================================================ */
@media (max-width: 768px) {

  .ticket-footer {
    padding: var(--sp-pad-v-sp) var(--sp-pad-h-sp);
    gap: 64px;
  }

  .ticket-footer__heading {
    gap: var(--sp-gap-m);
  }

  .ticket-footer__title {
    font-size: var(--size-sp-heading-medium);
    line-height: var(--lh-sp-heading-medium);
  }

  .ticket-footer__desc {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

  .ticket-footer__text {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

}


/* ================================================
   Responsive — Ticket Wrap-up SP
   ================================================ */
@media (max-width: 768px) {

  .ticket-wrapup {
    padding: 48px 16px;
    gap: 48px;
  }

  .ticket-wrapup__group { gap: 24px; }

  .ticket-wrapup__label {
    font-size: 12px;
    line-height: 18px;
  }

  .ticket-wrapup__heading {
    font-size: var(--size-sp-heading-medium);
    line-height: var(--lh-sp-heading-medium);
  }

  .ticket-wrapup__subheading {
    font-size: var(--size-pc-body);
    line-height: var(--lh-sp-body);
  }

  .ticket-wrapup__body {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

  /* 学び① 画像: 縦並び */
  .ticket-wrapup__images {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* SP: list画像 */
  .ticket-wrapup__img-wide {
    width: 100%;
    height: 215px;
    flex-shrink: unset;
    object-fit: cover;
    border-radius: 10px;
  }

  /* SP: PC screen 非表示 */
  .ticket-wrapup__img-screen {
    display: none;
  }

  /* SP: スクリーンショット 2枚横並び */
  .ticket-wrapup__images-row {
    display: flex !important;  /* img--sp の display:block を上書き */
    gap: 8px;
    width: 100%;
  }

  /* SP: screen 画像 (aspect-ratio で高さ自動) */
  .ticket-wrapup__img-screen-sp {
    flex: 1;
    min-width: 0;
    aspect-ratio: 1080 / 1920;
    object-fit: cover;
    border-radius: var(--radius-s, 4px);
    display: block;
  }

  /* SP 画像切り替え */
  .ticket-wrapup__img--pc { display: none; }
  .ticket-wrapup__img--sp { display: block; }

  .ticket-wrapup__sample {
    padding: 24px 16px;
  }

  .ticket-wrapup__play-btn {
    font-size: var(--size-sp-body);
    height: auto;
    padding: 8px 16px 8px 20px;
  }

}

/* ================================================
   intro__detail-text — テキスト折り返し
   ================================================ */
.intro__detail-text {
  white-space: normal;
}


/* ================================================
   NAV BOTTOM — Dark テーマ 背景色オーバーライド
   ================================================ */
.theme--ticket .nav-bottom__group {
  background-color: rgba(255, 255, 255, 0.2);
}

.theme--ticket .nav-bottom__home {
  background-color: rgba(255, 255, 255, 0.2);
}

.theme--ticket .nav-bottom__home:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.theme--ticket .nav-bottom__gradient--right {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}

.theme--ticket .nav-bottom__gradient--left {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}


/* ================================================
   MARQUEE — ticket固有スタイル
   ================================================ */
.ticket-marquee {
  background-color: #26282B;
}