/* =================================================================
 * c-service — TOP「サービス」SERVICE セクション（PC）
 * Figma: 2943:125350
 *
 * 構成:
 *   .c-service                オレンジグラデ帯（角丸32 / 左右24inset / padding 96 60）
 *     ├─ .c-service__header    白文字: ラベル + [EN | 説明] + 下線
 *     └─ .c-service__cards
 *         ├─ .c-service__row--large  大カード×3（タイトル26 + ↗ + 説明 + 画像）
 *         └─ .c-service__row--small  小カード×4（タイトル20 + ↗ + 説明）
 *
 *   カード角丸 24/24/24/0（左下のみ角）。↗は見出し行（タイトル右）。
 * ※ TOP では .top-pc（PC表示）専用。SP表示は別 blade（front/top/mobile）が担当。
 * 色・タイポは tokens.css 経由（ハードコード禁止）。
 * =================================================================*/

.c-service {
  align-self: stretch;
  margin: 0 24rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40rem;
  padding: 96rem 60rem;
  border-radius: 32rem;
  background: linear-gradient(108deg, var(--color-orange-01) 0%, var(--color-key) 100%);
  box-sizing: border-box;
}

/* ---------- ヘッダー（白文字） ---------- */
.c-service__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

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

.c-service__head-row {
  display: inline-flex;
  align-items: center;
  gap: 64rem;
}

.c-service__title-en {
  margin-top: -1px;
  font-family: var(--font-en-condensed);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  font-size: var(--fs-h1-pc);           /* 56px */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 84rem;
  white-space: nowrap;
}

.c-service__description {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 600;                     /* Figma SemiBold（tokens に 600 別名なし） */
  color: var(--color-white);
  font-size: var(--fs-body);            /* 16px */
  letter-spacing: var(--letter-spacing-body);
  line-height: 28.8rem;
}

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

/* ---------- カード群 ---------- */
.c-service__cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24rem;
}

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

/* カード共通 */
.c-service__card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16rem;
  padding: 32rem;
  background-color: var(--color-white);
  border-radius: 24rem 24rem 24rem 0;      /* 左下のみ角 */
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  overflow: hidden;                       /* hover時の画像 1.1x をカード内にクリップ */
}

.c-service__card-text {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}

/* 大カード: 本文ブロックを伸ばして画像を下端へ固定。
   行内でカードが同じ高さに揃う（row=align-items:stretch）ため、
   画像の上端・下端が3枚で一致する（Figma: text=flex-[1_0_0]）。 */
.c-service__card--large .c-service__card-text {
  flex: 1;
}

.c-service__card-head {
  display: flex;
  align-items: center;
  gap: 8rem;
}

.c-service__card-title {
  flex: 0 1 auto;                          /* テキスト幅にフィット → hover下線がテキスト下に正しく収まる */
  min-width: 0;
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-01);
}

.c-service__card-arrow { margin-left: auto; }  /* 元の "title flex:1で押し出し" の代替で右端固定 */

.c-service__card--large .c-service__card-title {
  font-size: 26rem;
  letter-spacing: 1.04rem;
  line-height: 46.8rem;
}

.c-service__card--small .c-service__card-title {
  font-size: 20rem;
  letter-spacing: 0.8rem;
  line-height: 36rem;
}

/* ジュエリー（小カード先頭）のみ Figma で一回り大きい */
.c-service__card-title--lg {
  font-size: 22rem;
  letter-spacing: 0.88rem;
  line-height: 39.6rem;
}

.c-service__card-arrow {
  flex-shrink: 0;
  width: 14rem;                          /* Figma: LinkIcon size-[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;
}

.c-service__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;
}

.c-service__card-img {
  width: 100%;
  height: 255rem;
  object-fit: cover;
  border-radius: 16rem;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 指示 5693:90668: hover時に画像 1.1x 拡大（大カードのみ画像あり） */
.c-service__card:hover .c-service__card-img { transform: scale(1.1); }

/* 指示 5693:90577 / 90669: カテゴリーリンクは hover で左→右へ 2px アンダーラインがスライドイン (0.3s ease-in-out)
   ※サービスカードはタイトルのみアニメ（指示「カテゴリ―タイトルのみアニメーションします」） */
.c-service__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-service__card:hover .c-service__card-title { background-size: 100% 2px; }

/* =================================================================
 * SP（TOP モバイル）— .SP ツリー専用オーバーライド
 *   front/top/mobile（services partial）に c-service を @include した際の SP。
 *   Figma SP: 3609:125607（オレンジ帯フルブリード・中央見出し・1カラム縦積み）。
 *   大カード×3=テキスト→画像、小カード×4=テキストのみ。
 *   ※ .SP スコープで PCツリー(.top-pc)に影響させない。
 *   ※ 表記は c-service の「パーツ製品」が Figma SP と一致（旧SPの「パーツ販売」を是正）。
 * =================================================================*/

.SP .c-service {
  margin: 0;
  gap: 24rem;
  padding: 40rem 16rem 48rem;
  border-radius: 0;
}

/* ヘッダー（白文字・中央寄せ・縦積み） */
.SP .c-service__header {
  align-items: center;
  text-align: center;
  gap: 8rem;
}

.SP .c-service__label {
  margin-top: 0;
  font-size: 12rem;
  letter-spacing: 0.48rem;
  line-height: 12rem;
}

/* Figma(SP 5083:331762): 見出しの並びは ラベル → EN → 下線(白) → 説明 の順。
   head-row を contents 化して header(flex column)直下に EN/説明 を出し、
   order で下線(__rule)を EN と説明の間へ差し込む。
   旧実装は下線が説明文の「下」に出ていた（QA No.35）。 */
.SP .c-service__head-row { display: contents; }
.SP .c-service__label       { order: 1; }
.SP .c-service__title-en    { order: 2; }
.SP .c-service__rule        { order: 3; }
.SP .c-service__description { order: 4; }

.SP .c-service__title-en {
  margin-top: 0;
  font-size: 34rem;
  letter-spacing: 1.36rem;
  line-height: 34rem;
}

/* Figma(SP)はラベル/EN見出しのみ中央。説明文は左揃え・全幅（QA No.36） */
.SP .c-service__description {
  align-self: stretch;
  margin-top: 4rem;                 /* 下線→説明の間隔（Figma） */
  font-size: 13rem;
  letter-spacing: 0.52rem;
  line-height: 1.9;
  text-align: left;
}

.SP .c-service__description br { display: none; }   /* SPは自然折返し */

/* カード群：1カラム縦積み */
.SP .c-service__cards {
  gap: 16rem;
}

.SP .c-service__row {
  flex-direction: column;
  gap: 16rem;
}

.SP .c-service__card {
  padding: 20rem;
  gap: 12rem;
}

.SP .c-service__card--large .c-service__card-title {
  font-size: 20rem;
  letter-spacing: 0.8rem;
  line-height: 1.6;
}

.SP .c-service__card--small .c-service__card-title,
.SP .c-service__card-title--lg {
  font-size: 18rem;
  letter-spacing: 0.72rem;
  line-height: 1.6;
}

.SP .c-service__card-arrow {
  width: 16rem;
  height: 16rem;
}

.SP .c-service__card-desc {
  font-size: 13rem;
  letter-spacing: 0.52rem;
  line-height: 1.9;
}

.SP .c-service__card-img {
  height: auto;
  aspect-ratio: 16 / 9;
}