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


/* ================================================
   THEME — DHC カラートークン
   ================================================ */
:root {
  --color-dhc-primary:    #06294A;
  --color-dhc-secondary:  rgba(6, 41, 74, 0.65);
  --color-dhc-badge-bg:   rgba(6, 41, 74, 0.1);
  --color-dhc-bg-main:    #E5EEF6;
  --color-dhc-bg-sub:     #FFFFFF;
  --color-dhc-bg-sample:  rgba(0, 0, 0, 0.05);
  --color-dhc-indent-bar: rgba(6, 41, 74, 0.1);
}

body.theme--dhc {
  background-color: #FFFFFF;
}


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


/* ================================================
   SECTION — Intro（DHCオーバーライド）
   ================================================ */
.theme--dhc .intro__section {
  background-color: var(--color-dhc-bg-main);
}

/* content と mv を 1:1 に固定 */
.theme--dhc .intro__section > .intro__content,
.theme--dhc .intro__section > .intro__mv {
  flex: 0 0 50%;
  min-width: 0;
}

.theme--dhc .intro__content {
  background-color: var(--color-dhc-bg-main);
}

.theme--dhc .intro__heading     { color: var(--color-dhc-primary); }
.theme--dhc .intro__title       { color: var(--color-dhc-primary); }
.theme--dhc .intro__desc        { color: var(--color-dhc-primary); }
/* テキスト折り返し */
.theme--dhc .intro__detail-text {
  color: var(--color-dhc-secondary);
  white-space: normal;
  width: 100%;
}

.theme--dhc .intro__details {
  width: 100%;
}

.theme--dhc .intro__detail-item {
  width: 100%;
}


/* ================================================
   SECTION — Overview（DHC固有）
   ================================================ */
.dhc-overview {
  padding: var(--sp-pad-container-v-pc) var(--sp-pad-container-h-pc);
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* --- 見出しブロック --- */
.dhc-overview__heading-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-xl);
}

.dhc-overview__heading-title {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-m);
}

.dhc-overview__label {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 700;
  line-height: var(--lh-pc-body);
  color: var(--color-dhc-secondary);
  letter-spacing: 0;
}

.dhc-overview__heading-medium {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-heading-medium);
  font-weight: 700;
  line-height: var(--lh-pc-heading-medium);
  color: var(--color-dhc-primary);
  letter-spacing: 0;
}

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

.dhc-overview__body p + p {
  margin-top: 0;
}

/* --- インデントブロック --- */
.dhc-overview__indent {
  display: flex;
  gap: var(--sp-gap-l);
  align-items: stretch;
}

.dhc-overview__indent-bar {
  width: 4px;
  flex-shrink: 0;
  background-color: var(--color-dhc-indent-bar);
  align-self: stretch;
}

.dhc-overview__indent-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-xl);
  flex: 1;
}

.dhc-overview__indent-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-m);
}

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

.dhc-overview__indent-text {
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-dhc-primary);
  letter-spacing: 0;
}


/* ================================================
   Responsive — Intro SP（DHC固有）
   ================================================ */
@media (max-width: 768px) {

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

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

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

}


/* ================================================
   Responsive — Overview SP（DHC固有）
   ================================================ */
@media (max-width: 768px) {

  .dhc-overview {
    padding: var(--sp-pad-v-sp) var(--sp-pad-h-sp);
    gap: var(--sp-gap-l);
  }

  .dhc-overview__heading-block {
    gap: var(--sp-gap-l);
  }

  .dhc-overview__label {
    font-size: 12px;
    line-height: 18px;
  }

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

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

  .dhc-overview__indent-bar {
    width: 2px;
  }

  .dhc-overview__indent-items {
    gap: var(--sp-gap-l);
  }

  .dhc-overview__indent-label {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

  .dhc-overview__indent-text {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

}


/* ================================================
   Responsive — Nav Bottom SP（DHC固有）
   ================================================ */
@media (max-width: 768px) {

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

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

}


/* ================================================
   MARQUEE — DHC固有スタイル
   ================================================ */
.dhc-marquee {
  background-color: var(--color-dhc-bg-main);
}


/* ================================================
   DIVIDER
   ================================================ */
.dhc-divider {
  padding: 0 var(--sp-pad-container-h-pc);
}

.dhc-divider__line {
  height: 1px;
  background-color: var(--color-dhc-indent-bar);
  width: 100%;
}

@media (max-width: 768px) {
  .dhc-divider {
    padding: 0 var(--sp-pad-h-sp);
  }
  .dhc-divider__line {
    height: 2px;
  }
}


/* ================================================
   SECTION — Research（課題定義）
   ================================================ */
.dhc-research {
  padding: var(--sp-pad-container-v-pc) var(--sp-pad-container-h-pc);
  display: flex;
  flex-direction: column;
  gap: 96px;
}

/* --- 課題カード（外枠） --- */
.dhc-research__card {
  background-color: var(--color-dhc-bg-main);
  border-radius: 16px;
  padding: 48px 60px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* --- 課題アイテム --- */
.dhc-research__item {
  display: flex;
  flex-direction: column;
}

.dhc-research__item-title {
  display: flex;
  gap: var(--sp-gap-m);
  align-items: flex-start;
}

.dhc-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-dhc-primary);
  letter-spacing: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.dhc-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-dhc-primary);
  letter-spacing: 0;
}

.dhc-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-dhc-primary);
  letter-spacing: 0;
}

/* --- サンプル画像エリア --- */
.dhc-research__sample {
  background-color: var(--color-dhc-bg-sample);
  border-radius: 16px;
  padding: 48px 60px;
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: center;
}

.dhc-research__sample-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-l);
  align-items: center;
  flex: 1;
}

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

.dhc-research__sample-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.dhc-research__sample-img--app {
  max-width: 253px;
}


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

  .dhc-research {
    padding: var(--sp-pad-v-sp) var(--sp-pad-h-sp);
    gap: var(--sp-gap-xxxl);
  }

  .dhc-research__card {
    padding: var(--sp-gap-xl) var(--sp-gap-l);
    gap: var(--sp-gap-xl);
  }

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

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

  .dhc-research__sample {
    flex-direction: column;
    gap: var(--sp-gap-xl);
    padding: var(--sp-gap-xl) var(--sp-gap-l);
  }

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

}


/* ================================================
   SECTION — Solution（解決策）
   ================================================ */
.dhc-solution {
  background-color: var(--color-dhc-bg-main);
  padding: var(--sp-pad-container-v-pc) var(--sp-pad-container-h-pc);
  display: flex;
  flex-direction: column;
  gap: 96px;
}

/* --- 白カード（リスト全体を包む） --- */
.dhc-solution__list {
  background-color: var(--color-dhc-bg-sub);
  border-radius: 16px;
  padding: 48px 60px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* --- 解決策アイテム（番号+本文+サンプル） --- */
.dhc-solution__detail {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* --- バッジ（サンプル内ラベル） --- */
.dhc-solution__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: var(--radius-s);
  background-color: var(--color-dhc-badge-bg);
  font-family: var(--font-helvetica);
  font-size: var(--size-pc-body);
  font-weight: 700;
  line-height: var(--lh-pc-body);
  color: var(--color-dhc-primary);
  letter-spacing: 0;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}

/* --- サンプルエリア（ダーク背景） --- */
.dhc-solution__sample {
  background-color: var(--color-dhc-bg-sample);
  border-radius: 16px;
  padding: 48px 60px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
}

.dhc-solution__sample-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-xl);
  align-items: center;
  width: 100%;
}

/* シャドー + フレア の横並び */
.dhc-solution__sample-row {
  display: flex;
  gap: 48px;
  width: 100%;
  align-items: flex-start;
}

.dhc-solution__sample-group--half {
  flex: 1;
  min-width: 0;
}

/* --- 画像レイアウト --- */
.dhc-solution__img-row {
  display: flex;
  gap: var(--sp-gap-xl);
  align-items: flex-start;
  width: 100%;
}

/* 縦長画像(750/1624) */
.dhc-solution__img--tall {
  flex: 1;
  min-width: 0;
  aspect-ratio: 750 / 1624;
  object-fit: cover;
  display: block;
}

/* 横長画像(375/812) - ECサイト */
.dhc-solution__img--half {
  flex: 1;
  min-width: 0;
  aspect-ratio: 375 / 812;
  object-fit: cover;
  display: block;
}

/* 単体・センター表示 */
.dhc-solution__img--single {
  display: block;
  max-width: 276px;
  width: 100%;
  aspect-ratio: 750 / 1624;
  object-fit: cover;
}

/* ワイド画像(3840/2160) - コンセプトグリッド */
.dhc-solution__img--wide {
  width: 100%;
  aspect-ratio: 3840 / 2160;
  object-fit: cover;
  display: block;
}

/* 6枚グリッド */
.dhc-solution__img-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-gap-xl);
  width: 100%;
}

/* 単体センター */
.dhc-solution__img-center {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* --- サンプル画像（単体イメージボックス） --- */
.dhc-solution__sample-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* PC/SP 切り替え — Research */
.dhc-research__sample-img--pc { display: block; max-width: 100%; height: auto; }
.dhc-research__sample-img--sp { display: none; }

/* PC/SP 切り替え — Solution */
.dhc-solution__sample-img--pc { display: block; }
.dhc-solution__sample-img--sp { display: none; }


/* --- グラデーション: play サンプルコンテナ（ticket方式） --- */
.dhc-solution__play-sample {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dhc-solution__play-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dhc-solution__play-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-gap-m);
  height: 48px;
  padding: 0 16px 0 24px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  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;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.dhc-solution__play-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}


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

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

  .dhc-solution__sample-img--pc { display: none; }
  .dhc-solution__sample-img--sp { display: block; }

  /* 2. sample-item: label と画像の gap 8px */
  .dhc-research__sample-item {
    gap: 8px;
  }

  /* 3. sample-group: badge と画像の gap 16px */
  .dhc-solution__sample-group {
    gap: var(--sp-gap-l);
  }

  /* 4. research__card gap 24px */
  .dhc-research__card {
    gap: var(--sp-gap-xl);
  }

  /* 5. solution__detail gap 24px */
  .dhc-solution__detail {
    gap: var(--sp-gap-xl);
  }

  .dhc-solution__play-btn {
    height: 40px;
    padding: 0 16px 0 20px;
  }

  .dhc-solution {
    padding: var(--sp-pad-v-sp) var(--sp-pad-h-sp);
    gap: var(--sp-gap-xxxl);
  }

  .dhc-solution__list {
    padding: var(--sp-gap-xl) var(--sp-gap-l);
    gap: 32px;
  }

  .dhc-solution__badge {
    font-size: var(--size-sp-caption);
    line-height: var(--lh-sp-caption);
    padding: 6px 10px;
  }

  .dhc-solution__sample {
    padding: var(--sp-gap-xl) var(--sp-gap-l);
    gap: var(--sp-gap-xl);
  }

  .dhc-solution__img-row {
    flex-wrap: wrap;
    gap: var(--sp-gap-m);
  }

  /* SP: 2列グリッド */
  .dhc-solution__img-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-gap-m);
  }

  .dhc-solution__sample-row {
    flex-direction: column;
    gap: var(--sp-gap-xl);
  }

  .dhc-solution__img--single {
    max-width: 188px;
  }

}


/* ================================================
   MARQUEE — 共通スタイル（style.css fallback）
   ================================================ */
.marquee {
  overflow: hidden;
  padding: 120px 0;
}

.marquee__track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  width: 300px;
  aspect-ratio: 375 / 812;
  height: auto;
  display: block;
  flex-shrink: 0;
  object-fit: cover;
  background-color: var(--color-dhc-bg-main);
}

@keyframes marquee-scroll {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@media (max-width: 768px) {
  .marquee {
    padding: 48px 0;
  }
  .marquee__track {
    gap: 20px;
  }
  .marquee__item {
    width: 130px;
    aspect-ratio: 375 / 812;
  }
}


/* ================================================
   SECTION — Wrapup
   ================================================ */
.dhc-wrapup {
  background-color: var(--color-dhc-bg-sub);
  padding: var(--sp-pad-container-v-pc) var(--sp-pad-container-h-pc);
  display: flex;
  flex-direction: column;
  gap: 96px;
  align-items: center;
}

.dhc-wrapup__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
  width: 100%;
}

.dhc-wrapup__title {
  font-size: var(--size-pc-heading-large);
  font-weight: 700;
  line-height: var(--lh-pc-heading-large);
  color: var(--color-dhc-primary);
  letter-spacing: 0;
}

.dhc-wrapup__desc {
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-dhc-primary);
  letter-spacing: 0;
  text-align: center;
}

.dhc-wrapup__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.dhc-wrapup__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.dhc-wrapup__item .badge {
  align-self: center;
}

.dhc-wrapup__item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  font-size: var(--size-pc-body);
  font-weight: 400;
  line-height: var(--lh-pc-body);
  color: var(--color-dhc-secondary);
  letter-spacing: 0;
  text-align: center;
}

@media (max-width: 768px) {
  .dhc-wrapup {
    padding: var(--sp-pad-v-sp) var(--sp-pad-h-sp);
    gap: 64px;
  }

  .dhc-wrapup__title {
    font-size: 24px;
    line-height: 36px;
  }

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

  .dhc-wrapup__item-text {
    font-size: var(--size-sp-body);
    line-height: var(--lh-sp-body);
  }

  .dhc-wrapup__br--pc {
    display: none;
  }
}