@charset "UTF-8";

/* ===================================
    02｜スシローを知る（know/index.html）
    Figma: PC 3309-4886 / SP 3770-61554（v4）
    ・ページ地色は赤。白い角丸パネルが積み上がる構成
    ・数値・見出し・ラベルはすべて HTML テキスト（後から差し替えるため画像化しない）
=================================== */
.main--know {
  padding-top: 0;
  background: var(--color-main);
  overflow-x: clip;
}

/* ===================================
    ヒーロー
=================================== */
.knowHero {
  position: relative;
  height: 70.3rem;
}

.knowHero__img {
  position: absolute;
  top: 11.5rem;
  left: 54.2rem;
  /* Figma では右に 88px はみ出す。広い画面でも右端に隙間が出ないよう right で伸ばす */
  right: -8.8rem;
  height: 52.6rem;
  border-radius: 5rem;
  overflow: hidden;
}

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

.knowHero__body {
  position: absolute;
  top: 22.9rem;
  left: 10.8rem;
  width: 36.4rem;
  color: #fff;
}

.knowHero__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.knowHero__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 8rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-bottom: -0.7rem;
}

.knowHero__ja {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.44;
  letter-spacing: 0.06em;
}

.knowHero__lead {
  margin-top: 5rem;
  font-size: 1.5rem;
  line-height: 1.867;
}

/* ===================================
    CHANGE ブロック（ラベル + 白パネル）
=================================== */
.change {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  width: 138rem;
  max-width: calc(100% - 6rem);
  margin-inline: auto;
}

.change__label {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14.9rem;
  line-height: 1.5;
  letter-spacing: -0.04em;
  color: #f3b7b8; /* 赤地の上で 3:1（大きな文字の下限）を満たす明度 */
}

.change__block--right .change__label {
  text-align: right;
}

/* ラベルに 62px 食い込ませる */
.change__panel {
  position: relative;
  margin-top: -6.2rem;
  padding: 10rem 13rem;
  background: #fff;
  border-radius: 5rem;
}

/* 見出しは「、」の後ろでだけ折り返す（Tab 幅で「く。」だけが次の行に落ちるのを防ぐ） */
.change__panel .sec-heading__ja {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.change__note {
  margin-top: 4rem;
  font-size: 1.2rem;
  line-height: 1.75;
  color: #757575;
}

/* ===================================
    CHANGE 01｜事業のスケール（横スクロールカード）
=================================== */
.scale {
  margin-top: 1.4rem; /* 見出しのすぐ下に操作ボタン（Figma FIN 3770-60858） */
}

.scale .sliderCtrl {
  margin-bottom: 3.6rem;
}

/* Swiper（.JsSlider）の外枠。スライド間の余白は data-slider-gap で入る */
.scale__list {
  /* パネルの左右の端まで流す（1枚目の位置は本文の左端のまま・padding で戻す）。
     スクロール量は自前のインジケーターで表す */
  margin-inline: -13rem;
  padding-inline: 13rem;
  overflow: hidden;
}

/* カードの高さをそろえる（Swiper 既定の height: 100% だと中身の高さのままになる） */
.scale__list .swiper-slide {
  height: auto;
}

.scaleCard {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 32.1rem;
  background: var(--color-gray);
  border-radius: 2rem;
}

.scaleCard__img {
  height: 18rem;
  border-radius: 2rem;
  overflow: hidden;
}

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

.scaleCard__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  padding: 1.8rem;
}

/* キャッチは左に赤い縦線 */
.scaleCard__catch {
  display: flex;
  gap: 1.2rem;
  font-weight: 400 /* Noto Sans JP の 500 は読み込まない（和文1ウェイトぶんの CSS 削減） */;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--color-main);
}

.scaleCard__catch::before {
  content: "";
  flex-shrink: 0;
  width: 0.2rem;
  background: var(--color-main);
}

.scaleCard__num {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.45;
  color: #212121;
}

/* 本文は白いカードに入れる */
.scaleCard__note-box {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
  padding: 1.8rem;
  background: #fff;
  border-radius: 1.5rem;
}

.scaleCard__text {
  font-size: 1.3rem;
  line-height: 1.769;
  color: #1b1b1b;
}

.scaleCard__note {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.667;
  color: #1b1b1b;
}

/* スクロール量インジケーター（JS が --scale-pos / --scale-len を更新） */
.scale__bar {
  --scale-len: 0.3;
  --scale-pos: 0;
  position: relative;
  width: 112rem;
  height: 0.3rem;
  margin-top: 3.4rem;
  border-radius: 999px;
  background: #e3e0de;
}

.scale__bar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--scale-len) * 100%);
  height: 100%;
  /* 親幅に対する % なので、PC / Tab / SP のどの幅でもそのまま効く */
  margin-left: calc(var(--scale-pos) * (100% - var(--scale-len) * 100%));
  border-radius: 999px;
  background: var(--color-main);
}

.scale + .change__note,
.scale__bar + .change__note {
  margin-top: 5rem;
}

/* ===================================
    CHANGE 02｜世界のすし（マップ + チップ）
=================================== */
.worldMap {
  position: relative;
  width: 112rem;
  margin-top: 5.6rem;
  aspect-ratio: 1120 / 709;
}

.worldMap__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4rem;
}

/* 数値はテキスト。マップ上に % で配置するので画面幅に追従する */
.worldChip {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  text-align: center;
}

.worldChip__name {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--color-text);
}

.worldChip__value {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.17;
  color: var(--color-text);
}

.worldChip__value b {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 4rem;
  line-height: 1.2;
  color: var(--color-main);
}

.worldChip--cn { left: 76.96%; top: 8.89%; width: 20.45%; }
.worldChip--tw { left: 63.39%; top: 37.38%; width: 14.55%; }
.worldChip--hk { left: 80.98%; top: 44.99%; width: 12.59%; }
.worldChip--th { left: 71.61%; top: 61.21%; width: 12.68%; }
.worldChip--sg { left: 84.46%; top: 72.07%; width: 12.32%; }
.worldChip--kr { left: 9.02%;  top: 59.80%; width: 10.49%; }
.worldChip--id { left: 23.30%; top: 75.18%; width: 10.98%; }
.worldChip--my { left: 11.70%; top: 79.55%; width: 9.11%; }

/* 「店舗」と数字の大きさはチップごとに違う（Figma 3493-21771） */
.worldChip--cn .worldChip__value { font-size: 1.8rem; }
.worldChip--cn .worldChip__value b { font-size: 6.2rem; }
.worldChip--tw .worldChip__value,
.worldChip--th .worldChip__value { font-size: 1.4rem; }
.worldChip--hk .worldChip__value { font-size: 1.3rem; }
.worldChip--sg .worldChip__value { font-size: 1rem; }
.worldChip--kr .worldChip__value b { font-size: 4.6rem; }

/* ---- 登場：円が1つずつ弾んで出る → 中の文字 → 数字がカウントアップ ----
   JS（know/index.js の WorldMapPop）が各チップに --i（出る順番）を入れ、
   画面に入ったら .worldMap に .is-active を付けて数字を数える */
.worldMap.JsWorldMap .worldChip {
  opacity: 0;
  transform: scale(0.3);
  transition:
    opacity 0.3s ease calc(var(--i, 0) * 0.13s),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i, 0) * 0.13s);
}

.worldMap.JsWorldMap .worldChip > * {
  opacity: 0;
  transform: translateY(0.8rem);
  transition:
    opacity 0.4s ease calc(var(--i, 0) * 0.13s + 0.25s),
    transform 0.4s ease calc(var(--i, 0) * 0.13s + 0.25s);
}

.worldMap.JsWorldMap.is-active .worldChip,
.worldMap.JsWorldMap.is-active .worldChip > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .worldMap.JsWorldMap .worldChip,
  .worldMap.JsWorldMap .worldChip > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.worldStat {
  display: flex;
  gap: 2rem;
  margin-top: 3rem;
  width: 112rem;
}

.worldStat__item {
  display: flex;
  align-items: center;
  gap: 3.6rem;
  flex: 1;
  height: 17.5rem;
  padding-left: 4.6rem;
  background: var(--color-main);
  border-radius: 1.6rem;
  color: #fff;
}

.worldStat__ico {
  width: 8.2rem;
  height: auto;
  flex-shrink: 0;
}

.worldStat__label {
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.06;
}

.worldStat__value {
  margin-top: 2rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.3;
  white-space: nowrap;
}

.worldStat__value b {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 7rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

.worldMap + .worldStat {
  margin-top: 3rem;
}

.worldStat + .change__note {
  margin-top: 3.2rem;
}

/* ===================================
    CHANGE 03｜うまさの基準
    PC は「画像 | グレーのテキストカード」の2カラム。
    SP は「番号 → グレーカード（見出し＋本文）→ 画像」の縦積みになるため、
    .tasteItem__body / __inner は display:contents にして
    画像と本文を直接グリッド / flex へ流し込む。
=================================== */
.taste {
  display: flex;
  flex-direction: column;
  gap: 4.2rem;
  margin-top: 5.6rem;
}

.tasteItem {
  position: relative;
  display: grid;
  grid-template-columns: 58.4rem 48.8rem;
  column-gap: 4.8rem;
  /* 連番が上に 101.875px はみ出す分を確保して前の行に食い込ませない */
  padding-top: 10.19rem;
}

.tasteItem--reverse {
  grid-template-columns: 48.8rem 58.4rem;
}

/* テキスト列のグレー地 */
.tasteItem::before {
  content: "";
  position: absolute;
  top: 10.19rem;
  right: 0;
  bottom: 0;
  width: 48.8rem;
  background: var(--color-gray);
  border-radius: 4rem;
}

.tasteItem--reverse::before {
  right: auto;
  left: 0;
}

.tasteItem__body,
.tasteItem__inner {
  display: contents;
}

.tasteItem__no {
  position: absolute;
  top: 0;
  left: calc(58.4rem + 4.8rem + 1.6rem);
  font-family: var(--font-en);
  font-weight: 500 /* Poppins の 300 は読み込まない */;
  font-size: 13.69rem;
  line-height: 1.067;
  letter-spacing: -0.04em;
  color: var(--color-main);
}

.tasteItem--reverse .tasteItem__no {
  left: 1.6rem;
}

.tasteItem__title {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  margin: 5.05rem 3.2rem 0;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.2;
  color: var(--color-main);
}

.tasteItem--reverse .tasteItem__title {
  grid-column: 1;
}


.tasteItem__img {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: stretch;
  border-radius: 4rem;
  overflow: hidden;
}

.tasteItem--reverse .tasteItem__img {
  grid-column: 2;
}

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

.tasteItem__text {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2;
  /* 以前は min-height 23.7rem の中で本文を縦中央にしていたが、行数（01 だけ6行）で
     上下の空きが変わって見えたため、5行のとき（02〜04）と同じ空き 4.85rem に固定する（2026-09-23） */
  margin: 2.7rem 3.2rem 2.75rem;
  padding: 4.85rem 3.2rem;
  background: #fff;
  border-radius: 3rem;
}

.tasteItem--reverse .tasteItem__text {
  grid-column: 1;
}

.tasteItem__text p {
  font-size: 1.4rem;
  line-height: 2;
  color: var(--color-text);
}

/* ===================================
    CHANGE 04｜テクノロジー
=================================== */
.tech {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 5rem;
}

.techItem {
  display: flex;
  gap: 3.1rem;
  padding: 3rem;
  background: var(--color-gray);
  border-radius: 4rem;
}

.techItem--reverse {
  flex-direction: row-reverse;
}

.techItem__img {
  width: 40.7rem;
  height: 26.9rem;
  flex-shrink: 0;
  border-radius: 3rem;
  overflow: hidden;
}

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

.techItem__img--contain {
  background: #fff;
}

.techItem__img--contain img {
  object-fit: contain;
}

.techItem__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: 4.5rem 5rem;
  background: #fff;
  border-radius: 3rem;
}

.techItem__title {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.2;
  color: var(--color-main);
}

.techItem__text {
  margin-top: 2.4rem;
  font-size: 1.4rem;
  line-height: 1.786;
  color: var(--color-text);
}

/* ===================================
    CHANGE 05｜働く人の環境
=================================== */
.career {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 2.9rem;
}

.careerCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 3rem;
  background: var(--color-gray);
  border-radius: 4rem;
}

.careerCard__ico {
  /* SVG の実寸（Figma の大きさ）は 94〜106px。枠を 140px 四方にすると 1.3〜1.5倍に拡大されて
     大きすぎたので、高さを実寸の最大（106px）にそろえる（2026-09-23） */
  width: 14rem;
  height: 7.6rem; /* 2026-09-23 さらに小さく（実寸 106px の約 0.72 倍） */
  object-fit: contain;
}

/* アイコンが2パーツに分かれているカード（ピン + チェック） */
.careerCard__ico--stack {
  position: relative;
  display: block;
  width: 14rem;
  height: 7.6rem;
}

.careerCard__ico--stack img {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.careerCard__ico--stack img:first-child {
  top: 50%;
  width: 5.3rem;
  height: auto;
}

.careerCard__ico--stack img:last-child {
  top: 39.9%; /* ピンの頭の中に置く（枠の高さを変えても同じ位置になる割合） */
  width: 2rem;
  height: auto;
}

.careerCard__title {
  word-break: keep-all; /* 1行に収まらないときは「、」の後ろで折る（Figma では 04・05 は1行） */
  overflow-wrap: anywhere;
  margin-top: 1rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.45;
  text-align: center;
  min-height: 5.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

.careerCard__tag {
  margin-top: 1.8rem;
  padding: 0.6rem 1.4rem;
  background: #fff;
  border-radius: 5rem;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.385;
  text-align: center;
  color: var(--color-main);
}

.careerCard__text {
  margin-top: 1.8rem;
  width: 100%;
  font-size: 1.4rem;
  line-height: 2;
  color: var(--color-text);
}

.career + .change__note {
  margin-top: 2.8rem;
}

/* ===================================
    CHANGE 06｜お客さまの声
=================================== */
.voice {
  display: flex;
  gap: 6.5rem;
  margin-top: 5rem;
}

.voiceCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.voiceCard__case {
  width: 20rem;
  padding: 0.5rem;
  background: var(--color-main);
  border-radius: 3rem;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.43;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fff;
}

.voiceCard__balloon {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 9.6rem;
  margin-top: 1.7rem;
  padding: 2.2rem 2.3rem;
  background: var(--color-gray);
  border-radius: 2rem;
}

/* 吹き出しのしっぽ（左下） */
.voiceCard__balloon::after {
  content: "";
  position: absolute;
  left: 3.8rem;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 2.05rem 2.45rem 0 0;
  border-color: var(--color-gray) transparent transparent transparent;
}

.voiceCard__balloon p {
  font-size: 1.4rem;
  line-height: 1.643;
  color: var(--color-text);
}

.voiceCard__arrow {
  width: 2rem;
  height: auto;
  margin-top: 4.7rem;
}

.voiceCard__after {
  margin-top: 0.1rem;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 6.065rem;
  letter-spacing: -0.01em;
  color: var(--color-main);
  margin-bottom: -1.4rem;
}

.voiceCard__result {
  width: 100%;
  padding: 1.8rem;
  background: var(--color-main);
  border-radius: 2rem;
}

.voiceCard__resultText {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.733;
  text-align: center;
  color: #fff;
}

.voiceCard__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  height: 18.7rem;
  margin-top: 1.8rem;
  padding: 1.8rem;
  background: #fff;
  border-radius: 1.2rem;
}

.voiceCard__photo img {
  /* flex アイテムの min-width:auto は画像の実寸になり縮まないので 0 に落とす */
  min-width: 0;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
}

/* SP 専用の要素（PC / Tab では出さない） */
.careerCard__no,
.voiceCard__avatar,
.scale__dots {
  display: none;
}

/* ===================================
    Tablet（751〜1024px）
    横 2 カラムが収まらないので縦積みにする
=================================== */
@media screen and (max-width: 1024px) {
  .knowHero {
    height: auto;
    padding: calc(var(--header-h) + 4rem) 4rem 6rem;
  }

  .knowHero__img {
    position: relative;
    inset: auto; /* PC 用の top / left / right を打ち消す（relative だと効いてしまう） */
    height: auto;
    aspect-ratio: 986 / 526;
    margin-bottom: 4rem;
  }

  /* 枠の高さは aspect-ratio で決まるため、img の height: 100% は iOS Safari で解決されず
     画像本来の比率の高さで描かれて下が切れる。枠いっぱいに絶対配置して object-fit で収める */
  .knowHero__img img {
    position: absolute;
    inset: 0;
  }

  .knowHero__body {
    position: static;
    width: 100%;
  }

  .change {
    width: auto;
    max-width: none;
    margin-inline: 3rem;
  }

  .change__panel {
    padding: 8rem 5rem;
  }

  .scale__list {
    margin-inline: -5rem;
    padding-inline: 5rem;
  }

  .scale__bar,
  .worldMap,
  .worldStat {
    width: 100%;
  }

  /* 「CHANGE 01」は PC の 149px のままだと 751〜880px で2行に折れるので、画面幅に合わせて縮めて1行に保つ
     （文字幅は番号によって最大およそ 5.5em。左右の余白 3rem ずつを引いた幅に収める） */
  .change__label {
    font-size: min(14.9rem, calc((100vw - 6rem) / 5.7));
    white-space: nowrap;
  }

  /* CHANGE 02 の数字カードは横2枚だと大きな数字が収まらないので縦に積む */
  .worldStat {
    flex-direction: column;
  }

  /* ---- CHANGE 03（縦積み・常時オープン） ---- */
  .tasteItem {
    display: block;
    padding: 3rem;
    background: var(--color-gray);
    border-radius: 4rem;
  }

  .tasteItem::before {
    display: none;
  }

  .tasteItem__body,
  .tasteItem__inner {
    display: block;
  }

  .tasteItem__no {
    position: static;
    display: block;
    font-size: 8rem;
    line-height: 1;
  }

  .tasteItem__title {
    margin: 1.6rem 0 2.4rem;
  }

  .tasteItem__img {
    width: 100%;
    height: auto;
    aspect-ratio: 584 / 372;
    margin-bottom: 2.4rem;
  }

  .tasteItem__text {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 3rem;
  }

  /* ---- CHANGE 04 ---- */
  .techItem,
  .techItem--reverse {
    flex-direction: column;
    align-items: stretch;
  }

  .techItem__img {
    width: 100%;
    height: auto;
    aspect-ratio: 407 / 269;
  }

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

  .voice {
    flex-wrap: wrap;
    gap: 4rem;
  }

  .voiceCard {
    flex: 1 1 28rem;
  }
}

/* ===================================
    SP（〜750px）Figma 3770-61554（390px 幅・v4）
    PC と同じ「大きな CHANGE ラベル ＋ 白パネル」を CHANGE ごとに積む。
    ・マップ下のチップは 2 カラムの横長カード（国名｜数）
    ・CHANGE 03 は 番号 → グレーカード → 画像 の縦積み
    ・CHANGE 05 はアイコン付きの縦積みカード
    ・CHANGE 06 は AFTER の英字を出す
=================================== */
@media screen and (max-width: 750px) {
  /* 登場：SP のチップは横長の行なので、弾ませずに下からフェードで順に出す */
  .worldMap.JsWorldMap .worldChip {
    transform: translateY(1.6rem);
    transition:
      opacity 0.5s ease calc(var(--i, 0) * 0.08s),
      transform 0.5s cubic-bezier(0.22, 0.68, 0.24, 1) calc(var(--i, 0) * 0.08s);
  }

  .worldMap.JsWorldMap .worldChip > * {
    transform: none;
    transition-delay: calc(var(--i, 0) * 0.08s + 0.15s);
  }

  /* ---- ヒーロー（テキストが先、画像が後） ---- */
  .knowHero {
    display: flex;
    flex-direction: column;
    padding: calc(var(--header-h) + 2.8rem) 0 0;
  }

  .knowHero__body {
    order: 1;
    padding: 0 2rem;
  }

  .knowHero__img {
    order: 2;
    margin: 3.2rem 0 0 2rem;
    aspect-ratio: 370 / 198;
    border-radius: 2rem 0 0 2rem;
  }

  /* Figma 3770-61568：英字と和文の間は 4px あける */
  .knowHero__en {
    font-size: 5.2rem;
    line-height: 1.5;
    margin-bottom: 0.4rem;
  }

  .knowHero__ja {
    font-size: 1.4rem;
  }

  .knowHero__lead {
    margin-top: 2.8rem;
    font-size: 1.4rem;
    line-height: 1.714; /* 14px / 24px（Figma 3770-61571） */
  }

  /* ---- CHANGE ラベル ＋ 白パネル（CHANGE ごとに1枚） ---- */
  .change {
    gap: 4rem;
    width: auto;
    max-width: none;
    margin: 4.8rem 1rem 0;
  }

  .change__label {
    font-size: 5.6rem;
    line-height: 1.5;
  }

  /* ラベルに 22px 食い込ませる */
  .change__panel {
    margin-top: -2.2rem;
    padding: 4.8rem 2rem;
    border-radius: 3rem;
  }

  .change__note {
    font-size: 1.2rem;
    line-height: 1.667;
  }

  .change__panel .sec-heading__ja {
    font-size: 2.2rem;
    line-height: 1.455;
    letter-spacing: 0;
  }

  .change__panel .sec-heading__en {
    margin-top: 0.1rem;
    font-size: 1.3rem;
    line-height: 1.538;
    letter-spacing: 0;
  }

  /* ---- CHANGE 01｜横スクロールカード ---- */
  .scale {
    margin-top: 2rem;
  }

  .scale .sliderCtrl {
    margin-bottom: 2.5rem; /* Figma FIN 3891-23583：ボタンの下 25px */
  }

  .scale__list {
    margin-inline: -2rem;
    padding-inline: 2rem;
  }

  .scaleCard {
    width: 26.6rem;
  }

  .scaleCard__img {
    height: 15rem;
  }

  .scaleCard__catch {
    font-weight: 500; /* Figma 3770-61589：Zen Kaku Medium */
  }

  .scaleCard__note-box {
    padding: 1.4rem;
  }

  /* スクロール量の帯（PC と同じ。ドットは使わない） */
  .scale__bar {
    width: 100%;
    height: 0.4rem;
    margin-top: 2.4rem;
    background: var(--color-gray);
  }

  .scale__dots {
    display: none;
  }

  .scale + .change__note {
    margin-top: 3.6rem;
  }

  /* ---- CHANGE 02｜マップ + 国チップ（2カラムの横長カード） ---- */
  .worldMap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    width: auto;
    margin-top: 2.8rem;
    aspect-ratio: auto;
  }

  /* Figma 3770-61655：地図はグレーの枠（330×230）いっぱいに拡大して上下左右を少し切る */
  .worldMap__img {
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    aspect-ratio: 330 / 230;
    object-fit: cover;
    background: var(--color-gray);
    border-radius: 1.6rem;
  }

  .worldChip,
  .worldChip--cn,
  .worldChip--tw,
  .worldChip--hk,
  .worldChip--th,
  .worldChip--sg,
  .worldChip--kr,
  .worldChip--id,
  .worldChip--my {
    position: static;
    left: auto;
    top: auto;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    width: auto;
    aspect-ratio: auto;
    padding: 1.2rem;
    border-radius: 1.2rem;
    background: var(--color-gray);
    text-align: left;
  }

  .worldChip__name {
    font-size: 1.3rem;
    line-height: 1.85;
    color: #212121;
  }

  /* SP はカードに並べ替えるので、数字の大きさはすべて揃える */
  .worldChip__value,
  .worldChip--cn .worldChip__value,
  .worldChip--tw .worldChip__value,
  .worldChip--hk .worldChip__value,
  .worldChip--th .worldChip__value,
  .worldChip--sg .worldChip__value {
    flex-direction: row;
    align-items: baseline;
    gap: 0.2rem;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1;
    color: #212121;
    white-space: nowrap;
  }

  .worldChip__value b,
  .worldChip--cn .worldChip__value b,
  .worldChip--kr .worldChip__value b {
    font-size: 2rem;
    line-height: 1.2;
  }

  /* ---- CHANGE 02｜数字カード（赤地・白アイコン） ---- */
  .worldStat {
    flex-direction: column;
    gap: 0.8rem;
    width: auto;
  }

  .worldMap + .worldStat {
    margin-top: 1.6rem;
  }

  .worldStat__item {
    gap: 1.8rem;
    height: auto;
    padding: 1.8rem 2.2rem;
  }

  .worldStat__ico {
    width: auto;
    height: 5.2rem;
  }

  .worldStat__label {
    font-size: 1.3rem;
    line-height: 1.23;
  }

  .worldStat__value {
    margin-top: 0.8rem;
    font-size: 1.8rem;
    line-height: 2;
  }

  /* 行の高さは親の 36px に合わせる（1 だと大きな数字の分だけ行が 9px 高くなる・Figma 3770-61971） */
  .worldStat__value b {
    font-family: var(--font-sub);
    font-size: 3.8rem;
    line-height: 0.5;
    letter-spacing: 0;
  }

  .worldStat + .change__note {
    margin-top: 1.6rem;
  }

  /* ---- CHANGE 03｜番号 → グレーカード（見出し＋本文）→ 画像 ---- */
  .taste {
    gap: 3.6rem;
    margin-top: 2.8rem;
  }

  .tasteItem {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: none;
    border-radius: 0;
  }

  .tasteItem__body,
  .tasteItem__inner {
    display: contents;
  }

  /* 番号はカードの上に 26px 食い込む */
  .tasteItem__no {
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    order: 0;
    display: block;
    margin-bottom: -2.6rem;
    padding-left: 0.8rem;
    font-size: 6.4rem;
    line-height: 1.5;
  }

  .tasteItem__title {
    order: 1;
    margin: 0;
    padding: 3.6rem 2rem 0;
    background: var(--color-gray);
    border-radius: 2.4rem 2.4rem 0 0;
    font-size: 2rem;
    line-height: 1.5;
  }

  .tasteItem__text {
    order: 2;
    display: block;
    min-height: 0;
    margin: 0;
    padding: 1.6rem 2rem 2rem;
    background: var(--color-gray);
    border-radius: 0 0 2.4rem 2.4rem;
  }

  .tasteItem__text p {
    padding: 1.8rem 2rem;
    background: #fff;
    border-radius: 1.6rem;
    font-size: 1.4rem;
    line-height: 1.857;
    color: #212121;
  }

  .tasteItem__img {
    order: 3;
    width: 100%;
    height: auto;
    aspect-ratio: 330 / 200;
    margin: 1.6rem 0 0;
    border-radius: 2.4rem;
  }

  /* ---- CHANGE 04 ---- */
  .tech {
    gap: 1.6rem;
    margin-top: 2.8rem;
  }

  /* Figma 3770-62031：グレーのカード（余白 14px）に 画像 → 白い本文ボックス（赤い見出し） */
  .techItem {
    gap: 1.4rem;
    padding: 1.4rem;
    border-radius: 2.4rem;
  }

  .techItem__img {
    aspect-ratio: 302 / 180;
    border-radius: 1.6rem;
  }

  .techItem__card {
    padding: 2.4rem 2rem;
    border-radius: 1.6rem;
  }

  .techItem__title {
    font-size: 2rem;
    line-height: 1.3;
  }

  .techItem__text {
    margin-top: 1.2rem;
    font-size: 1.4rem;
    line-height: 1.786;
  }

  /* ---- CHANGE 05｜アイコン付きカード（縦積み） ---- */
  .career {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin-top: 2.8rem;
  }

  .careerCard {
    padding: 2.8rem 2.4rem;
    border-radius: 2.4rem;
  }

  .careerCard__ico,
  .careerCard__ico--stack {
    width: 10rem;
    height: 5.6rem;
  }

  .careerCard__ico--stack img:first-child {
    width: 3.9rem;
  }

  .careerCard__ico--stack img:last-child {
    width: 1.47rem;
  }

  .careerCard__title {
    margin-top: 1.4rem;
    font-size: 1.8rem;
    line-height: 1.444;
    min-height: 0;
  }

  .careerCard__tag {
    width: 100%;
    margin-top: 1.4rem;
    padding: 0.6rem 1.6rem;
    font-size: 1.2rem;
    line-height: 1.5;
  }

  .careerCard__text {
    margin-top: 1.4rem;
    font-size: 1.4rem;
    line-height: 1.857;
    color: #212121;
  }

  .career + .change__note {
    margin-top: 2rem;
  }

  /* ---- CHANGE 06｜VOICE（PC と同じカードを縦に積む） ---- */
  .voice {
    flex-direction: column;
    gap: 4rem;
    margin-top: 2.4rem;
  }

  /* CASE の帯は 2px の枠ぶん高い（Figma 3770-62151） */
  .voiceCard__case {
    border: 0.2rem solid var(--color-main);
  }

  /* 吹き出しの本体は 92px（しっぽ込みで 112px・Figma 3770-62154） */
  .voiceCard__balloon {
    min-height: 9.2rem;
  }

  .voiceCard__balloon p {
    line-height: 1.643;
    color: #212121;
  }

  .voiceCard__arrow {
    margin-top: 2.4rem;
  }

  /* AFTER は赤い箱に 22px 食い込ませる */
  .voiceCard__after {
    margin: -0.5rem 0 -2.2rem;
    line-height: 1.4286; /* 86.6px（Figma 3770-62166） */
    letter-spacing: 0.04em;
  }

  .voiceCard__result {
    position: relative;
  }

  .voiceCard__resultText {
    line-height: 1.733;
  }
}