/* =================================================================
 * c-about — TOP「大王製作所について」ABOUT セクション（PC/SP 共通）
 * Figma: PC 2943:125693 / SP 1200:8721
 *
 * 構成（grid-template-areas で PC/SP の配置順を切替）:
 *   .c-about               セクション
 *   .c-about__inner        白カード（grid）
 *     ├─ .c-about__text    見出し + 本文（area: text）
 *     │   ├─ .c-about__heading  JP小ラベル + EN大 + 下線バー
 *     │   └─ .c-about__body     キャッチ（コトルビ付き）+ リード文
 *     ├─ .c-about__link    会社概要ボタン pill（area: link）
 *     └─ .c-about__media   画像 <picture>（area: image）
 *
 *   PC: "text  image" / "link  image"   …左テキスト＋右画像
 *   SP: "text" "image" "link"           …中央寄せ縦積み（見出し→…→画像→ボタン）
 *
 * PCファースト（Figma 1440）。SP は 1023.98px（TOPの .top-pc/.top-sp 1024px 切替に整合）。
 * 色・タイポは tokens.css 経由（ハードコード禁止）。
 * =================================================================*/

.c-about {
  width: 100%;
  box-sizing: border-box;
}

.c-about__inner {
  display: grid;
  grid-template-columns: 1fr min(800px, 48%);
  grid-template-areas:
    "text  image"
    "link  image";
  column-gap: 48rem;
  row-gap: 40rem;
  align-items: start;
  width: 100%;
  padding: 96rem 70rem;
  background-color: var(--color-white);
  border-radius: 32rem;
  box-sizing: border-box;
}

/* ---------- テキスト列（見出し + 本文） ---------- */
.c-about__text {
  grid-area: text;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40rem;
}

/* 見出し（JP小ラベル + EN大 + 下線バー） */
.c-about__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.c-about__label {
  margin-top: -2rem;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-key);
  font-size: var(--fs-body);            /* 16px */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 24rem;
}

.c-about__title-en {
  font-family: var(--font-en-condensed);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-01);
  font-size: var(--fs-h1-pc);           /* 56px */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 84rem;
}

.c-about__rule {
  width: 60rem;
  height: 2rem;
  background-color: var(--color-key);
}

/* ---------- 本文ブロック ---------- */
.c-about__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32rem;
}

/* キャッチコピー + コト ルビ */
.c-about__catch {
  position: relative;
  width: 436rem;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 32rem;
  letter-spacing: 1.28rem;
  line-height: 57.6rem;
  color: var(--color-neutral-01);
}

.c-about__catch-key {
  color: var(--color-key);
  letter-spacing: 0.41rem;
}

.c-about__catch-default {
  color: var(--color-neutral-01);
  letter-spacing: 0.41rem;
}

/* 「体験」を相対配置にして、その上へコトルビを中央寄せ（DOM順・折返しに強い） */
.c-about__catch-ruby {
  position: relative;
}

.c-about__catch-koto {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-key);
  font-size: 14rem;
  letter-spacing: 3.5rem;
  line-height: 1;
  white-space: nowrap;
}

.c-about__lead {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  color: var(--color-neutral-01);
  font-size: var(--fs-body);            /* 16px */
  letter-spacing: var(--letter-spacing-body);
  line-height: 28.8rem;
}

/* ---------- 会社概要ボタン（pill / border:key） ---------- */
.c-about__link {
  position: relative;
  grid-area: link;
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16rem;
  height: 56rem;
  padding: 16rem 20rem 16rem 40rem;
  background-color: var(--color-white);
  border: 2rem solid var(--color-key);
  border-radius: 32rem;
  text-decoration: none;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  transition:
    color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 指示 5693:91009: c-button と同じ「ふわっと反転」スライドイン背景 */
.c-about__link::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-light-orange-02);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: -1;
  pointer-events: none;
}
.c-about__link:hover::before { transform: translateY(0); }
.c-about__link:hover { border-color: var(--color-white); }

.c-about__link-text {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-01);
  font-size: var(--fs-body);            /* 16px */
  letter-spacing: var(--letter-spacing-heading);
  white-space: nowrap;
}

/* ↗ 矢印：色制御のため mask-image（共通アイコン link-arrow.svg） */
.c-about__link-arrow {
  flex-shrink: 0;
  width: 14rem;                          /* Figma: Primary_link btn_white の LinkIcon 14px */
  height: 14rem;
  background-color: var(--color-key);
  -webkit-mask: url("/img/common/icons/link-arrow.svg") no-repeat center / contain;
          mask: url("/img/common/icons/link-arrow.svg") no-repeat center / contain;
}

/* ---------- 画像（<picture>） ---------- */
.c-about__media {
  grid-area: image;
  align-self: center;
  justify-self: end;
  display: block;
  width: 100%;
}

.c-about__image {
  display: block;
  width: 100%;
  height: auto;
}

/* =================================================================
 * SP（≤1023.98px）— Figma SP 1200:8721 準拠（中央寄せ縦積み）
 * =================================================================*/
@media (max-width: 1023.98px) {

  .c-about__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "image"
      "link";
    column-gap: 0;
    row-gap: 20rem;
    justify-items: center;
    align-items: stretch;
    padding: 48rem 16rem;
    border-radius: 40rem;
  }

  .c-about__text {
    width: 100%;
    align-items: center;
    gap: 16rem;
  }

  .c-about__heading {
    align-items: center;
  }

  .c-about__label {
    font-size: 12rem;
    line-height: 12rem;
    letter-spacing: 0.48rem;
  }

  .c-about__title-en {
    font-size: 34rem;
    line-height: 34rem;
    letter-spacing: 1.36rem;
  }

  .c-about__body {
    width: 100%;
    align-items: center;
    gap: 16rem;
  }

  .c-about__catch {
    width: 100%;
    max-width: 358rem;
    text-align: center;
    font-size: 22rem;
    line-height: 35.2rem;
    letter-spacing: 0.88rem;
  }

  .c-about__catch-koto {
    font-size: 8rem;
    letter-spacing: 2rem;
  }

  .c-about__lead {
    width: 100%;
    font-size: 14rem;
    line-height: 25.2rem;
    letter-spacing: 0.56rem;
  }

  .c-about__link {
    justify-self: center;
    align-self: center;
  }

  .c-about__link-text {
    font-size: 14rem;
    letter-spacing: 0.56rem;
  }

  .c-about__media {
    justify-self: stretch;
    width: 100%;
  }
}