/* ================================================
   COLLECTING FOREST — collecting-forest.css
   collecting-forest.html 専用スタイル
   ※ Design Tokens は style.css の :root に定義済み
   ================================================ */


/* ================================================
   THEME — Collecting Forest
   共通クラスの色・背景をcollecting-forestテーマで上書き
   ================================================ */

body.theme--collecting-forest {
  background-color: #131416;  /* #26282B → #131416 */
}

/* --- intro オーバーライド --- */
/* 外側wrapper: padding 120px 사방 */
.theme--collecting-forest .intro {
  padding: 120px 120px 0 120px;
}

/* 外側カード背景 */
.theme--collecting-forest .intro__section {
  background-color: #26282B;
}

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

/* 左コンテンツ: #26282B + padding 120px 80px + 上下に要素を分散 */
.theme--collecting-forest .intro__content {
  background-color: var(--color-ticket-bg-main);  /* #26282B */
  justify-content: space-between;
}

.theme--collecting-forest .intro__heading     { color: var(--color-ticket-primary); }
.theme--collecting-forest .intro__title       { color: var(--color-ticket-primary); }
.theme--collecting-forest .intro__desc        { color: var(--color-ticket-primary); }
.theme--collecting-forest .intro__detail-text { color: var(--color-ticket-secondary); }

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


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


/* ================================================
   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;
  }

}


/* ================================================
   COLLECTING FOREST RESEARCH — リサーチと課題定義
   ================================================ */
.collecting-forest-research {
  padding: var(--sp-pad-container-v-pc) var(--sp-pad-container-h-pc);
  display: flex;
  flex-direction: column;
  gap: 96px;
}

/* --- リサーチ方法（indent bar + list） --- */
/* heading-block との間は 24px に調整（セクション gap 96px から差し引く） */
.collecting-forest-research__intro {
  display: flex;
  gap: 16px;
  align-items: stretch;
  margin-top: calc(24px - 96px);
}

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

.collecting-forest-research__intro-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.collecting-forest-research__intro-label {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 700;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-primary);
  letter-spacing: 0;
}

.collecting-forest-research__intro-list {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-primary);
  letter-spacing: 0;
  list-style: disc;
  padding-left: 24px;
}

.collecting-forest-research__intro-list li {
  line-height: var(--lh-pc-body);
}

/* --- 課題カード（1枚に3項目） --- */
.collecting-forest-research__card {
  background-color: var(--color-ticket-bg-main);
  border-radius: 16px;
  padding: 48px 60px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* 各 contents（item + sample のセット） */
.collecting-forest-research__contents {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* --- 課題アイテム --- */
.collecting-forest-research__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.collecting-forest-research__item-title {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.collecting-forest-research__item-num {
  font-family: var(--font-helvetica);
  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;
  letter-spacing: 0;
}

.collecting-forest-research__item-heading {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-heading-xsmall);
  font-weight: 700;
  line-height: var(--lh-pc-heading-xsmall);
  color: var(--color-ticket-primary);
  letter-spacing: 0;
}

.collecting-forest-research__item-body {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-primary);
  letter-spacing: 0;
}

/* --- Sample カード（半透明） --- */
.collecting-forest-research__sample {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 48px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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


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

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

  /* SP: heading-block との間は 16px に調整 */
  .collecting-forest-research__intro {
    margin-top: calc(16px - 48px);
  }

  .collecting-forest-research__indent-bar {
    width: 2px;
  }

  .collecting-forest-research__intro-label {
    font-size: var(--size-pc-body);
    line-height: var(--lh-pc-body);
  }

  .collecting-forest-research__intro-list {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
    padding-left: 21px;
  }

  .collecting-forest-research__card {
    padding: 24px 16px;
    gap: 24px;
    border-radius: 16px;
  }

  .collecting-forest-research__contents {
    gap: 24px;
  }

  .collecting-forest-research__item {
    gap: 8px;
  }

  .collecting-forest-research__item-num,
  .collecting-forest-research__item-heading {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

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

  .collecting-forest-research__sample {
    padding: 24px 16px;
  }

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

}


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

  body.theme--collecting-forest {
    background-color: #131416;
  }

  /* SP: intro padding リセット */
  .theme--collecting-forest .intro {
    padding: 0;
  }

  /* SP: intro セクション 縦並び + radius なし */
  .theme--collecting-forest .intro__section {
    background-color: var(--color-ticket-bg-main);
  }

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

  /* SP: MV が上に来る */
  .theme--collecting-forest .intro__mv {
    order: -1;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 375 / 426;
    overflow: hidden;
  }

  /* SP: intro content */
  .theme--collecting-forest .intro__content {
    flex: none;
    background-color: var(--color-ticket-bg-main);
    padding: var(--sp-pad-v-sp) var(--sp-pad-h-sp);
    gap: 48px;
    justify-content: flex-start;
  }

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

}


/* ================================================
   COLLECTING FOREST SOLUTION — 解決策
   ================================================ */
.collecting-forest-solution {
  padding: var(--sp-pad-container-v-pc) var(--sp-pad-container-h-pc);
  display: flex;
  flex-direction: column;
  gap: 96px;
}

/* --- グループ（2つの大セクション） --- */
.collecting-forest-solution__group {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* グループ見出し */
.collecting-forest-solution__group-heading {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-heading-small);
  font-weight: 700;
  line-height: var(--lh-pc-heading-small);
  color: var(--color-ticket-primary);
  letter-spacing: 0;
}

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

/* 各 contents (item + sample) */
.collecting-forest-solution__contents {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* --- アイテム（番号 + 見出し + 本文） --- */
.collecting-forest-solution__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.collecting-forest-solution__item-num {
  font-family: var(--font-helvetica);
  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;
  letter-spacing: 0;
}

.collecting-forest-solution__item-heading {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-heading-xsmall);
  font-weight: 700;
  line-height: var(--lh-pc-heading-xsmall);
  color: var(--color-ticket-primary);
  letter-spacing: 0;
}

.collecting-forest-solution__item-body {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-primary);
  letter-spacing: 0;
}

/* --- Sample カード --- */
.collecting-forest-solution__sample {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 48px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

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


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

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

  .collecting-forest-solution__group {
    gap: 16px;
  }

  .collecting-forest-solution__group-heading {
    font-size: var(--size-pc-body);
    line-height: var(--lh-pc-body);
  }

  .collecting-forest-solution__card {
    padding: 24px 16px;
    gap: 32px;
    border-radius: 16px;
  }

  .collecting-forest-solution__contents {
    gap: 24px;
  }

  .collecting-forest-solution__item {
    gap: 8px;
  }

  .collecting-forest-solution__item-num,
  .collecting-forest-solution__item-heading {
    font-size: var(--size-sp-body);
    line-height: 24px;
  }

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

  .collecting-forest-solution__sample {
    padding: 24px 16px;
  }

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

}


/* ================================================
   COLLECTING FOREST RESULT — 結果
   ================================================ */
.collecting-forest-result {
  background-color: #EDEDED;
  padding: var(--sp-pad-container-v-pc) var(--sp-pad-container-h-pc);
}

.collecting-forest-result__label {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 700;
  line-height: var(--lh-pc-body);
  color: rgba(28, 28, 28, 0.3);
  letter-spacing: 0;
}

.collecting-forest-result__heading {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-heading-medium);
  font-weight: 700;
  line-height: var(--lh-pc-heading-medium);
  color: #1C1C1C;
  letter-spacing: 0;
}

.collecting-forest-result__body {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: #1C1C1C;
  letter-spacing: 0;
}

.collecting-forest-result__body p + p {
  margin-top: 24px;
}


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

  .collecting-forest-result {
    padding: var(--sp-pad-v-sp) var(--sp-pad-h-sp);
  }

  .collecting-forest-result__label {
    font-size: 12px;
    line-height: 18px;
  }

  .collecting-forest-result__heading {
    font-size: var(--size-sp-heading-medium);
    line-height: var(--lh-sp-heading-medium);
  }

  .collecting-forest-result__body {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

}


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

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

.collecting-forest-footer__title {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-heading-large);
  font-weight: 700;
  line-height: var(--lh-pc-heading-large);
  color: var(--color-ticket-primary);
  letter-spacing: 0;
}

.collecting-forest-footer__desc {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-primary);
  letter-spacing: 0;
}

/* バッジ + テキスト + ダウンロードボタン */
.collecting-forest-footer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-gap-xl);
  width: 100%;
}

.collecting-forest-footer__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-gap-m);
}

.collecting-forest-footer__item .badge {
  align-self: center;
}

.collecting-forest-footer__text {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-ticket-secondary);
  text-align: center;
  letter-spacing: 0;
}

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

.collecting-forest-footer__download {
  display: flex;
  gap: var(--sp-gap-l);
  align-items: center;
}


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

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

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

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

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

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

}

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


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

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

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

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

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


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