/* =================================================================
 * c-advantage — TOP「製品の特徴と品質」ADVANTAGE セクション（PC）
 * Figma: 2943:125726
 *
 * 構成:
 *   .c-advantage              セクション（透明・背景は親 .about-advantage-bg-wrapper）
 *     ├─ .c-advantage__header   見出し（左）+ 説明文（右）横並び
 *     │   ├─ .c-advantage__heading  JP小ラベル + EN大 + 下線バー
 *     │   └─ .c-advantage__description
 *     └─ .c-advantage__cards
 *         ├─ .c-advantage__row（1段目: 縦カード×3）
 *         └─ .c-advantage__row（2段目: 横カード×2）
 *
 *   カード = リンク全体。角丸は 32/32/32/0（左下のみ角）。
 *   body は flex column で「テキスト上・↗右下」を全カード統一。
 *
 * ※ TOP では .top-pc（PC表示）専用に配線。SP表示は別 blade（front/top/mobile）が担当。
 *    SP対応（Figma 1200:10062）は ABOUT 同様に後追いで c-about 方式に統合予定。
 * 色・タイポは tokens.css 経由（ハードコード禁止）。
 * =================================================================*/

.c-advantage {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48rem;
  padding: 96rem 70rem;
  box-sizing: border-box;
}

/* ---------- ヘッダー（見出し + 説明文 横並び） ---------- */
.c-advantage__header {
  display: flex;
  align-items: center;
  gap: 64rem;
  width: 100%;
}

.c-advantage__heading {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.c-advantage__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-advantage__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-advantage__rule {
  width: 60rem;
  height: 2rem;
  background-color: var(--color-key);
}

.c-advantage__description {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 600;                     /* Figma SemiBold（tokens に 600 別名が無いため実値指定） */
  color: var(--color-neutral-01);
  font-size: var(--fs-body);            /* 16px */
  letter-spacing: var(--letter-spacing-body);
  line-height: 28.8rem;
}

/* ---------- カードグリッド ---------- */
.c-advantage__cards {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  width: 100%;
}

.c-advantage__row {
  display: flex;
  align-items: stretch;
  gap: 24rem;
  width: 100%;
}

/* カード（リンク全体） */
.c-advantage__card {
  flex: 1;
  min-width: 0;
  display: flex;
  background-color: var(--color-white);
  border-radius: 32rem 32rem 32rem 0;      /* 左下のみ角 */
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.c-advantage__card--v { flex-direction: column; }
.c-advantage__card--h { flex-direction: row; }

/* カード画像（<picture> は display:contents で透過させ、img を従来通りレイアウト） */
.c-advantage__card-media {
  display: contents;
}
.c-advantage__card-img {
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 指示 5693:90668: hover時に画像 1.1x 拡大 */
.c-advantage__card:hover .c-advantage__card-img { transform: scale(1.1); }

/* 指示 5693:90577 / 90669: カテゴリーリンクは hover で左→右へ 2px アンダーラインがスライドイン (0.3s ease-in-out)
   ※特長と品質は「イメージとカテゴリ―タイトルのみアニメーション」 */
.c-advantage__card-title {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0 2px;
  transition: background-size 0.3s ease-in-out;
}
.c-advantage__card:hover .c-advantage__card-title { background-size: 100% 2px; }
.c-advantage__card--v .c-advantage__card-img {
  width: 100%;
  height: 250rem;
}
.c-advantage__card--h .c-advantage__card-img {
  width: 200rem;
  height: 200rem;
  flex-shrink: 0;
}

/* カード本体（テキスト上・↗右下） */
.c-advantage__card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.c-advantage__card--v .c-advantage__card-body { padding: 20rem 16rem 20rem 24rem; }
.c-advantage__card--h .c-advantage__card-body { padding: 20rem 16rem; }

.c-advantage__card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.c-advantage__card--v .c-advantage__card-content { justify-content: flex-start; padding-bottom: 8rem; }
.c-advantage__card--h .c-advantage__card-content { justify-content: center; padding-bottom: 6rem; }

.c-advantage__card-title {
  align-self: flex-start;                  /* テキスト幅に揃えて hover下線がテキスト下に正しく収まる */
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-01);
  font-size: 22rem;
  letter-spacing: 0.88rem;
  line-height: 39.6rem;
  white-space: nowrap;
}

.c-advantage__card-desc {
  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;
}

/* ↗ 矢印：色制御のため mask-image（共通アイコン link-arrow.svg） */
.c-advantage__card-arrow {
  align-self: flex-end;
  flex-shrink: 0;
  width: 14rem;                          /* Figma: LinkIcon 14px（2943:125726） */
  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;
}

/* =================================================================
 * SP（≤1023.98px）— Figma SP 1200:10062（中央寄せヘッダー + 1カラム縦積み）
 * 全カード画像上。画像は <picture> で SP 用に出し分け。
 * =================================================================*/
@media (max-width: 1023.98px) {

  .c-advantage {
    gap: 16rem;
    padding: 48rem 20rem;
  }

  /* ヘッダー: 縦積み中央寄せ */
  .c-advantage__header {
    flex-direction: column;
    align-items: center;
    gap: 20rem;
  }
  .c-advantage__heading { align-items: center; gap: 6rem; }
  .c-advantage__label { font-size: 12rem; line-height: 12rem; letter-spacing: 0.48rem; }
  .c-advantage__title-en { font-size: 34rem; line-height: 34rem; letter-spacing: 1.36rem; }
  .c-advantage__description {
    align-self: stretch;
    font-weight: 500;
    font-size: 14rem;
    line-height: 25.2rem;
    letter-spacing: 0.56rem;
  }

  /* カード: 1カラム縦積み・全カード画像上 */
  .c-advantage__cards { gap: 16rem; }
  .c-advantage__row { flex-direction: column; gap: 16rem; }
  .c-advantage__card--h { flex-direction: column; }

  .c-advantage__card--v .c-advantage__card-img { width: 100%; height: 140rem; }
  .c-advantage__card--h .c-advantage__card-img { width: 100%; height: auto; aspect-ratio: 3.5; }

  .c-advantage__card--v .c-advantage__card-body,
  .c-advantage__card--h .c-advantage__card-body { padding: 12rem 24rem 20rem; }
  .c-advantage__card--h .c-advantage__card-content { justify-content: flex-start; padding-bottom: 0; }

  .c-advantage__card-title { font-size: 20rem; line-height: 36rem; letter-spacing: 0.8rem; }
  .c-advantage__card-desc { font-size: 14rem; line-height: 25.2rem; letter-spacing: 0.56rem; }
}