/* ============================================================
   ABOUT (What's TOSHIN) PAGE Styles
   カンプ: 02_toshin_about_v0.ai (1920×5186px)
   縮約率: ×0.667 (1920→1280基準)
   ============================================================ */

/* ============================================================
   0. ABOUT専用ヘッダー：透過処理（淡色背景なのでテキストは暗色維持）
   ============================================================ */
.page-about .sub-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  transition: background-color 0.28s var(--ease-out), border-color 0.28s var(--ease-out);
}

/* 淡色背景のためメニュー要素は暗色のまま（上書き不要） */

.page-about .sub-header.sub-header--scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #e8e7e7;
}

/* ============================================================
   1. Hero セクション
   レイアウト: e-TEC参考 — テキストのみフルワイド
   背景: #dce9ef (--blue-pale)
   ============================================================ */
.about-hero {
  background-color: var(--blue-pale);
  padding-top: 0;
  overflow-x: clip;
  overflow-y: visible;
}

.about-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 40px 60px 77px;
  position: relative;
}

/* テキストエリア（フルワイド） */
.about-hero__text {
  max-width: 800px;
}

/* ヒーロー英字見出し — Bodoni Moda Italic SemiBold
   カンプ: 最上部に大きなセリフ体イタリックの "What's TOSHIN"
   message-hero__en と同パターン */
.about-hero__en {
  font-family: var(--en-font);
  font-size: calc(41rem / 16);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: var(--text-body);
  display: block;
  margin-bottom: calc(20rem / 16);
}

/* メイン見出し（大きい日本語テキスト）*/
.about-hero__subtitle {
  font-family: var(--jp-font);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.12em;
  color: var(--text-body);
  margin: 0 0 32px;
}

/* ラベル + 横線コンテナ */
.about-hero__label {
  display: flex;
  align-items: center;
  gap: 20px;
}

.about-hero__label-line {
  display: block;
  width: 80px;
  height: 1px;
  background-color: var(--text-body);
}

.about-hero__label-text {
  font-family: var(--en-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--text-body);
  text-transform: uppercase;
}

/* ============================================================
   2. 写真スライダー（無限ループ）
   ============================================================ */
.about-photostrip {
  background-color: var(--blue-pale);
  overflow: hidden;
  height: 340px;
}

.about-photostrip__track {
  display: flex;
  gap: 6px;
  animation: aboutSliderScroll 40s linear infinite;
  width: max-content;
}

.about-photostrip__item {
  flex-shrink: 0;
  width: 480px;
  height: 340px;
  overflow: hidden;
}

.about-photostrip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

@media (prefers-reduced-motion: reduce) {
  .about-photostrip__track {
    animation: none;
  }
}

/* ============================================================
   3. 私たちについて（ABOUT セクション）
   design-spec: 右写真 x=281.7, y=1145.1, w=1485.4, h=990.8
   テキスト: x=335.7, y=1081, w=1248px
   ============================================================ */
.about-section {
  background-color: var(--blue-pale);
  padding: 80px 0 80px;
  overflow-x: clip;
}

.about-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 77px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* テキスト部（左カラム） */
.about-section__text {
  padding-top: 8px;
}

/* ABOUT ラベル — Montserrat Bold
   fontSize=18px → ×0.667 = 12px
   tracking=400 → 0.4em (letter-spacing)
   color=#0063ae */
.about-section__label {
  font-family: var(--en-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--blue-entry);
  display: block;
  margin-bottom: 16px;
}

/* 大見出し — Shippori Mincho Bold
   fontSize=36px → ×0.667 = 24px
   leading=63px → line-height=63/36=1.75
   tracking=200 → 0.2em
   color=#231815 */
.about-section__heading {
  font-family: var(--jp-font);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.2em;
  color: var(--text-body);
  margin: 0 0 24px;
}

/* 本文 — Shippori Mincho Bold
   fontSize=18px → ×0.667 = 12px
   leading=31.5px → line-height=31.5/18=1.75
   tracking=75 → 0.075em
   color=#231815, justify */
.about-section__body {
  font-family: var(--jp-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.075em;
  color: var(--text-body);
  text-align: justify;
}

.about-section__body p {
  margin: 0 0 16px;
}

.about-section__body p:last-child {
  margin-bottom: 0;
}

/* 写真（縦積みレイアウト — テキスト下にフルワイド配置） */
.about-section__photo {
  overflow: hidden;
}

.about-section__photo img {
  width: 100%;
  display: block;
}

/* ============================================================
   4. 事業内容（BUSINESS セクション）
   design-spec: 左写真 (043.jpg) w=1138, h=759.1
   テキスト: 右カラム
   ============================================================ */
.about-business {
  background-color: var(--blue-pale);
  padding: 80px 0;
  overflow-x: clip;
}

.about-business__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 77px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* テキスト（縦積み: 上部） */
.about-business__text {
  padding-top: 0;
}

/* 動画ラップ（プレイボタン付き写真） */
.about-business__video-wrap {
  position: relative;
  display: block;
}

.about-business__video-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* プレイボタン — 白円＋グレー三角
   design-spec: x=947.9, y=2601.2, w=98.7 → ×0.667 = 65.8px */
.about-business__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.25s ease;
}

.about-business__play-btn:hover {
  opacity: 0.85;
}

/* 写真／動画（縦積み: テキスト下にフルワイド配置） */
.about-business__photo {
  overflow: hidden;
}

.about-business__photo img {
  width: 100%;
  display: block;
}

/* ============================================================
   5. DATA セクション（数字で見る東信化学工業）
   design-spec: 9カード 3×3
   各カード: fill=#cbd8d9
   数値フォント: DINAlternate Bold 28.9px → Roboto Bold 19.3px
   ラベルフォント: Yu Go Bold 16px → Noto Sans JP Bold 10.7px
   ============================================================ */
.about-data {
  background-color: var(--blue-pale);
  padding: 80px 0 100px;
}

.about-data__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 77px;
}

/* DATA ラベル — Montserrat Bold, #0063ae */
.about-data__label {
  font-family: var(--en-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--blue-entry);
  display: block;
  margin-bottom: 16px;
}

/* 大見出し — Shippori Mincho Bold, 36px→24px */
.about-data__heading {
  font-family: var(--jp-font);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.2em;
  color: var(--text-body);
  margin: 0 0 40px;
}

/* 3×3 グリッド
   design-spec: 各カード幅 ≈ 406.7px → ×0.667 = 271.3px
   gap ≈ 2〜4px → 3px */
.about-data__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

/* ---- Data Card ----
   design-spec: fill=#cbd8d9 (#cbd8d9)
   各カードは正方形 ≈ 335×335px → ×0.667 = 223.6px
   padding: 上16px, 左右16px, 下20px */
.data-card {
  background-color: #cbd8d9;
  aspect-ratio: 1.5 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px 20px;
  text-align: center;
  color: var(--blue-entry);
}

/* ラベル — Noto Sans JP Bold
   fontSize=16px → ×0.667 = 10.7px
   leading=28px → line-height=28/16=1.75
   tracking=200 → 0.2em
   color=#0063ae */
.data-card__label {
  font-family: var(--jp-font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.2em;
  color: var(--blue-entry);
  display: block;
  width: 100%;
  text-align: center;
}

/* SVGアイコンエリア */
.data-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-entry);
  flex: 1;
  padding: 8px 0;
}

/* 数値ラッパー */
.data-card__value-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.data-card__value-wrap--ratio {
  gap: 0;
}

/* 数値 — Roboto Bold (DINAlternate代替)
   fontSize=28.9px → ×0.667 = 19.3px
   leading=50.6px → line-height=50.6/28.9=1.75
   color=#0063ae */
.data-card__value {
  font-family: var(--en-font-sans);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: var(--blue-entry);
}

/* 単位 */
.data-card__unit {
  font-family: var(--jp-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--blue-entry);
}

.data-card__unit--colon {
  font-family: var(--en-font-sans);
  font-size: 24px;
  font-weight: 600;
  padding: 0 2px;
}

/* 年代構成カード（2行） */
.data-card__multi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}

.data-card__multi-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.data-card__multi-label {
  font-family: var(--jp-font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--blue-entry);
  letter-spacing: 0.1em;
}

.data-card__multi-value {
  font-family: var(--en-font-sans);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--blue-entry);
}

.data-card__multi-value small {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-entry);
}

/* ============================================================
   6. フルワイド帯写真（DATA下〜NEXT上）
   カンプ: DATA グリッド下にフル幅の工場外観写真
   ============================================================ */
.about-band {
  width: 100%;
  overflow: hidden;
}

.about-band__img {
  width: 100%;
  display: block;
}

/* ============================================================
   7. NEXT カード（人を知る）
   design-spec: 背景=#0063ae, 高さ約370px → ×0.667 = 247px
   "NEXT": fontSize=26px Bodoni Moda Italic SemiBold, color=#fff
   "PEOPLE": fontSize=16px Montserrat Bold, color=#fff
   "人を知る": fontSize=28px Shippori Mincho, color=#fff
   "VIEW MORE": fontSize=14px Montserrat Bold, color=#fff
   ============================================================ */
/* about-next は廃止 → style.css の .ct-next を使用 */


/* ============================================================
   8. Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .about-hero__inner {
    padding: 60px 40px 48px;
  }

  .about-section__inner {
    padding: 0 40px;
    gap: 32px;
  }

  .about-business__inner {
    padding: 0 40px;
    gap: 32px;
  }

  .about-data__inner {
    padding: 0 40px;
  }

}

@media (max-width: 768px) {
  /* ヘッダー：モバイルでは固定白背景 */
  .page-about .sub-header {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid #e8e7e7;
  }

  .about-hero__inner {
    padding: 64px 24px 40px;
  }

  .about-hero__en {
    font-size: clamp(24px, 5.5vw, 36px);
  }

  .about-hero__subtitle {
    font-size: clamp(18px, 4vw, 24px);
    line-height: 1.65;
    margin-bottom: 24px;
  }

  .about-hero__label-text {
    font-size: 12px;
  }

  .about-hero__label-line {
    width: 50px;
  }

  .about-photostrip {
    height: 200px;
  }

  .about-photostrip__item {
    height: 200px;
    width: 300px;
  }

  .about-section {
    padding: 60px 0;
  }

  .about-section__inner,
  .about-business__inner {
    padding: 0 24px;
    gap: 24px;
  }

  .about-section__heading,
  .about-data__heading {
    font-size: 20px;
  }

  .about-business {
    padding: 60px 0;
  }

  .about-data {
    padding: 60px 0 80px;
  }

  .about-data__inner {
    padding: 0 24px;
  }

  .about-data__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .about-hero__en {
    font-size: 22px;
  }

  .about-hero__subtitle {
    font-size: 15px;
  }

  .about-data__grid {
    grid-template-columns: 1fr;
  }

  .data-card {
    aspect-ratio: 2 / 1;
    flex-direction: row;
    justify-content: flex-start;
    padding: 16px 20px;
    gap: 16px;
  }

  .data-card__value {
    font-size: 32px;
  }
}