/* ============================================================
   top.css：トップページ専用
   Figma「01_トップページ」(1920px幅) / 「01_トップページ_SP」(390px幅) の数値が基準。
   PCでは clamp(最小値, 画面幅に比例する値, Figmaの値) で比率を保って縮めます。
   ============================================================ */

/* ===== メインビジュアル ============================================= */
.mv {
  position: relative;
  height: 43.23vw;                 /* 1920px幅で830px（写真の縦横比を保つ） */
}

/* 写真のスライドショー（左半分） */
.mv__slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 49.17%;                   /* 944 / 1920 */
  height: 100%;
  overflow: hidden;
}
.mv__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
}
.mv__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 表示中：少し左にずれて拡大した状態から、元の位置・大きさに戻る */
.mv__slide.is-active {
  z-index: 1;
  opacity: 1;
}
.mv__slide.is-active img {
  animation: mv-zoom-in 1.2s cubic-bezier(0.473, 0.427, 0, 0.993) both;
}
/* 切り替わる時：前の写真が上に重なったまま、右側から幕を引くように消える */
.mv__slide.is-leaving {
  z-index: 2;
  opacity: 1;
  animation: mv-wipe 1.3s cubic-bezier(0.45, 0.05, 0.3, 0.93) forwards;
}
.mv__slide.is-leaving img {
  animation: mv-slide-out 1.3s cubic-bezier(0.473, 0.427, 0, 0.993) forwards;
}
@keyframes mv-zoom-in {
  from { transform: translateX(-38px) scale(1.1); }
  to   { transform: none; }
}
@keyframes mv-wipe {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 100% 0 0); }
}
@keyframes mv-slide-out {
  from { transform: none; }
  to   { transform: translateX(60px); }
}

/* キャッチコピーとリンク（右側） */
.mv__body {
  position: absolute;
  top: 27.7%;                      /* 230 / 830 */
  left: 56.25%;                    /* 1080 / 1920 */
}
.mv__copy {
  font-size: clamp(28px, 2.71vw, 52px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.1em;
  color: var(--color-text);
}
.mv__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px clamp(20px, 2.08vw, 40px);
  margin-top: clamp(24px, 2.92vw, 56px);
}

/* 写真に重なる大きな英字：写真の上では白、白地の上では黒に見える（差の絶対値） */
.mv__en {
  position: absolute;
  left: 1.67vw;                    /* 32 / 1920 */
  bottom: 1.67vw;
  z-index: 3;
  font-size: min(6.1vw, 120px);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
  mix-blend-mode: difference;
  pointer-events: none;
  animation: fade-up 1.4s ease 0.8s both;   /* 下からふわっと出現 */
}

/* 1文字ずつ左から表示（data-split-text。js/top.js が1文字ずつ span で包む） */
.split-char {
  display: inline-block;
  opacity: 0;
  animation: char-in 0.7s ease forwards;
  animation-delay: calc(var(--i) * 0.05s + 0.2s);
}
@keyframes char-in {
  from { opacity: 0; transform: translateX(-0.4em); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

/* ===== WHAT WE DO（グレー背景） ===================================== */
.wwd {
  padding: clamp(100px, 10.42vw, 200px) var(--side-margin);
}
.wwd__inner {
  display: grid;
  grid-template-columns: minmax(0, 718fr) minmax(0, 785fr);
  column-gap: clamp(40px, 5.16vw, 99px);
  max-width: var(--container-wide);
  margin-inline: auto;
}
.wwd__title {
  margin-top: clamp(24px, 2.5vw, 48px);
  font-size: clamp(24px, 2.45vw, 48px);  /* 1行14文字が列の幅に収まる大きさ */
  white-space: nowrap;                    /* <br> の位置だけで改行（Figmaどおり2行） */
}
.wwd__lead {
  margin-top: clamp(24px, 2.08vw, 40px);
  font-size: clamp(18px, 1.35vw, 26px);
  font-weight: 500;
  line-height: 2;
}
.wwd__btns {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: clamp(48px, 5vw, 96px);
}

/* グループ会社一覧（右） */
.wwd__group-toggle {
  display: none;               /* 見出し（開閉ボタン）はSPのみ */
}
.wwd__item {
  display: grid;
  grid-template-columns: clamp(48px, 3.65vw, 70px) 1fr;
  column-gap: clamp(20px, 1.67vw, 32px);
  align-items: center;
  padding: 0 16px 27px;
  border-bottom: 1px solid #c5c5c5;
}
.wwd__item + .wwd__item {
  padding-top: 32px;
}
.wwd__num {
  font-size: clamp(32px, 2.5vw, 48px);
  line-height: 1.13;
  letter-spacing: 0.1em;
  color: #c5c5c5;
}
.wwd__cat,
.wwd__name {
  display: block;
  font-weight: 500;
}
.wwd__cat {
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 2;
  letter-spacing: 0.04em;
}
.wwd__name {
  font-size: clamp(18px, 1.15vw, 22px);
  line-height: 2;
  letter-spacing: 0.05em;
  word-break: keep-all;          /* 社名の途中で改行せず、スペースの位置で改行 */
  overflow-wrap: anywhere;
}

/* ===== CONCEPT ====================================================== */
.concept {
  position: relative;
  isolation: isolate;           /* 流れる英字を写真の下に重ねるため */
  padding: clamp(80px, 8.33vw, 160px) 0 clamp(32px, 2.76vw, 53px);
}
.concept__inner {
  display: grid;
  grid-template-columns: 49.17% 1fr;   /* 写真 944 / 1920（画面の左端から） */
}
.concept__body {
  padding: 0 var(--side-margin) 0 8.75vw;   /* 写真との間 168 / 1920 */
}
.concept__img img {
  width: 100%;
  aspect-ratio: 944 / 720;
  object-fit: cover;
  border-radius: 0 8px 8px 0;
}
.concept__title {
  margin-top: clamp(24px, 2.5vw, 48px);
}
.concept__text {
  margin-top: clamp(24px, 2.5vw, 48px);
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
}
/* 流れる英字：写真の下端に88px（1920px幅時）潜り込む */
.concept__marquee {
  position: relative;
  z-index: -1;
  margin-top: -4.58vw;
  font-size: min(6.77vw, 130px);
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ededed;
}

/* ===== グループの強み（OUR ADVANTAGE・グレー背景） ==================== */
.adv {
  padding: clamp(100px, 8.33vw, 160px) var(--side-margin);
}
.adv__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
}
.adv__title {
  margin-top: clamp(24px, 2.5vw, 48px);
}
.adv__lead {
  margin-top: clamp(24px, 2.5vw, 48px);
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
}

/* カード（2列×2段） */
.adv__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
  margin-top: clamp(48px, 4.17vw, 80px);
}
.adv-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.5vw, 48px);
  min-height: clamp(240px, 15.73vw, 302px);
  padding: clamp(32px, 3.28vw, 63px) clamp(32px, 3.33vw, 64px);
  background-color: var(--color-white);
  border-radius: 8px;
}
.adv-card__icon {
  flex-shrink: 0;
  width: clamp(80px, 7.29vw, 140px);
  height: auto;
}
.adv-card__body {
  position: relative;
  z-index: 1;                    /* 大きな番号より手前 */
}
.adv-card__title {
  font-size: clamp(20px, 1.35vw, 26px);
  font-weight: 500;
  line-height: 2;
}
.adv-card__text {
  margin-top: 16px;
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
}
.adv-card__num {                 /* 右上の大きな薄緑の番号 */
  position: absolute;
  top: 24px;
  right: clamp(32px, 3.33vw, 64px);
  font-size: clamp(72px, 6.25vw, 120px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: #e5f6ec;
}

.adv__btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(48px, 5vw, 96px);
}

/* ===== イデアコンサルティングについて（ABOUT） ======================== */
.about {
  display: grid;
  grid-template-columns: 48.07% 47.24% 1fr;   /* 円の図形は x923 / 1920 から幅907 */
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "text    credo   ."
    "more    credo   ."
    "marquee marquee marquee";
  padding: clamp(80px, 8.33vw, 160px) 0 clamp(56px, 5.83vw, 112px);
  isolation: isolate;                      /* 流れる英字を円の下に重ねるため */
  overflow-x: clip;
}
.about__text {
  grid-area: text;
  padding-left: var(--side-margin);
}
.about__title {
  margin-top: clamp(24px, 2.5vw, 48px);
  font-size: clamp(24px, 2.4vw, 48px);
  white-space: nowrap;
}
.about__table {
  max-width: 648px;
  margin-top: clamp(48px, 4.58vw, 88px);
}
.about__row {
  display: grid;
  grid-template-columns: clamp(140px, 13.75vw, 264px) 1fr;
  padding: 40px 8px;
  border-bottom: 1px solid #c5c5c5;
  font-size: clamp(18px, 1.15vw, 22px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
}
.about__row:first-child {
  padding-top: 0;
}
.about__more {
  grid-area: more;
  padding-left: var(--side-margin);
  margin-top: clamp(48px, 5vw, 96px);
}

/* 3つの経営理念（位置は図形 907x786 に対する％、文字サイズは図形の幅 cqw 基準） */
.credo {
  grid-area: credo;
  align-self: start;
  position: relative;
  margin-top: clamp(12px, 1.15vw, 22px);
  container-type: inline-size;
}
.credo__img {
  width: 100%;
  height: auto;
}
.credo__label {                 /* 右上の縦書きの緑ラベル */
  position: absolute;
  left: 78.5%;
  top: 2.04%;
  width: 5.95%;
  height: 35.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-main);
  color: var(--color-white);
  writing-mode: vertical-rl;
  font-size: 3.09cqw;           /* 28px */
  font-weight: 500;
  line-height: 1.2;
}
.tcy {                          /* 縦書きの中の数字を立てる（縦中横） */
  text-combine-upright: all;
}
.credo__num {
  position: absolute;
  font-size: 9.92cqw;           /* 90px */
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--color-white);
}
.credo__num--1 { left: 33.74%; top: 7.38%; }
.credo__num--2 { left: 29.88%; top: 68.7%; }
.credo__num--3 { left: 72.77%; top: 48.22%; }
.credo__item {                  /* 各円の中心（left）に、文章の中心を合わせる */
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;           /* <br> の位置だけで改行 */
}
.credo__item--1 { left: 50.28%; top: 12.09%; }
.credo__item--2 { left: 29.44%; top: 52.93%; }
.credo__item--3 { left: 69.57%; top: 52.93%; }
.credo__to {
  font-size: 2.21cqw;           /* 20px */
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
}
.credo__to::after {             /* 下の短い緑の線 */
  content: "";
  display: block;
  width: 3.86cqw;
  height: 1px;
  margin: 0.99cqw auto 0;
  background-color: var(--color-main);
}
.credo__text {
  margin-top: 2.43cqw;
  font-size: 2.43cqw;           /* 22px */
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

/* 流れる英字（円の下端に少し潜り込む） */
.about__marquee {
  grid-area: marquee;
  z-index: -1;
  margin-top: -15px;
  font-size: min(6.77vw, 130px);
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ededed;
}

/* ===== 代表メッセージ ================================================
   緑のパネル（左端から 1760/1920 の幅）が2枚。2枚目の途中から下は右側の外がグレー。
   パネル内の濃い緑の斜めの面は ::before を clip-path で斜めに切って表現。 */
.message {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: clamp(80px, 8.75vw, 168px);
  background: linear-gradient(to bottom, transparent clamp(120px, 12.97vw, 249px), var(--color-bg-gray) 0);
}
.message__panel {
  position: relative;
  isolation: isolate;
  width: min(91.67vw, 100%);             /* 1760 / 1920（スクロールバーを含む画面幅基準で、1920px時にFigmaと同じ1760px） */
  overflow: hidden;
  background-color: #03af43;
  border-radius: 0 8px 8px 0;
  color: var(--color-white);
}
.message__panel::before {               /* 濃い緑の斜めの面 */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-main);
  clip-path: polygon(0 68.94%, 100% 34.56%, 100% 100%, 0 100%);
}
.message__panel--1 {
  padding: clamp(80px, 8.33vw, 160px) clamp(40px, 7.08vw, 136px) clamp(48px, 4.58vw, 88px) var(--side-margin);
}
.message__panel--2 {
  border-radius: 0;
  padding: clamp(80px, 8.7vw, 167px) clamp(40px, 7.29vw, 140px) clamp(80px, 9.84vw, 189px) var(--side-margin);
}
.message__panel--2::before {            /* 2枚目は上下反転した形 */
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 77.7%);
}
.message__title {
  margin-top: clamp(24px, 2.5vw, 48px);
  color: var(--color-white);
}

/* 文章と写真（1枚目は 文章｜写真、2枚目は 写真｜文章） */
.message__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 26.67vw, 512px);
  grid-template-areas: "text photo";
  column-gap: 32px;
  align-items: start;
  margin-top: clamp(48px, 4.17vw, 80px);
}
.message__body--reverse {
  grid-template-columns: clamp(240px, 26.77vw, 514px) minmax(0, 1fr);
  grid-template-areas: "photo text";
  column-gap: clamp(32px, 2.71vw, 52px);
  margin-top: 0;
}
.message__photo {
  grid-area: photo;
}
.message__photo img {
  width: 100%;
  aspect-ratio: 512 / 655;
  object-fit: cover;
  border-radius: 8px;
}
.message__photo figcaption {
  margin-top: 24px;
  text-align: right;
  font-size: clamp(16px, 1.15vw, 22px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
}
.message__text {
  grid-area: text;
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
}
.message__text p + p {
  margin-top: 2em;                      /* 1行分あける */
}
.message__lead {
  margin-bottom: clamp(24px, 2.08vw, 40px);
  font-size: clamp(22px, 1.67vw, 32px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
/* 1600px未満は文章の列が狭くなるので、Figmaの改行位置（pc-only）を外して自然に折り返す */
@media (max-width: 1599px) {
  .message__text br.pc-only {
    display: none;
  }
}

/* ===== 多様な業種・企業規模に対応（SUPPORT RECORD） =================== */
.support {
  display: grid;
  /* 文章の列 712 / 1920。写真は残り（画面の右端まで）。
     スクロールバーがある環境では写真側が少し狭くなり、文章の折り返しはFigmaどおりに保つ */
  grid-template-columns: min(712px, 37.08vw) minmax(0, 1fr);
  column-gap: clamp(40px, 5.42vw, 104px);
  align-items: end;                               /* 写真の下端を業種タイルの下端に揃える */
  padding-left: var(--side-margin);
  margin-bottom: clamp(80px, 8.33vw, 160px);
}
.support__body {
  max-width: 712px;
}
.support__title {
  margin-top: clamp(24px, 2.5vw, 48px);
}
.support__lead {
  margin-top: clamp(24px, 2.5vw, 48px);
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
}
.support__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 216px));
  gap: 8px;
  margin-top: clamp(24px, 2.5vw, 48px);
}
.support__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(24px, 2.03vw, 39px) 8px clamp(20px, 1.61vw, 31px);
  background-color: var(--color-bg-gray);
  border-radius: 8px;
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
}
.support__item img {
  width: clamp(36px, 2.5vw, 48px);
  height: auto;
}
.support__img img {
  width: 100%;
  aspect-ratio: 944 / 720;
  object-fit: cover;
  border-radius: 8px 0 0 8px;
}

/* ===== サービス一覧（OUR SERVICES・緑背景） ========================== */
.services {
  padding: clamp(100px, 8.33vw, 160px) var(--side-margin);
  color: var(--color-white);
}
.services__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
}
.services__head {
  display: grid;
  grid-template-columns: minmax(0, 512fr) minmax(0, 1056fr);
  column-gap: 32px;
}
.services__title {
  margin-top: clamp(24px, 2.5vw, 48px);
  color: var(--color-white);
}
.services__lead {
  font-size: clamp(22px, 1.67vw, 32px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.services__text {
  margin-top: clamp(24px, 2.08vw, 40px);
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
}
.services__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  margin-top: clamp(48px, 5vw, 96px);
}

/* カード：見出しと右上の英字を同じ行に置き、その下に線を引く */
.svc {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  min-height: clamp(320px, 20.21vw, 388px);
  padding: 40px clamp(24px, 2.08vw, 40px);
  background-color: var(--color-white);
  border-radius: 8px;
  color: var(--color-text);
}
.svc__icon {                     /* 左下の大きな薄いアイコン */
  position: absolute;
  left: 32px;
  bottom: 16px;
  z-index: -1;
  width: clamp(120px, 9.38vw, 180px);
  height: auto;
}
.svc__head,
.svc__en {
  padding-bottom: 16px;
  border-bottom: 1px solid #999;
}
.svc__head {
  grid-column: 1;
  grid-row: 1;
}
.svc__en {
  grid-column: 2;
  grid-row: 1;
  padding-left: 8px;
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 36px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #999;
  white-space: nowrap;
}
.svc__toggle {                   /* PCではただの見出し（押せない） */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  font-size: clamp(18px, 1.15vw, 22px);
  font-weight: 500;
  line-height: 36px;
  letter-spacing: 0.05em;
  text-align: left;
  color: var(--color-text);
  pointer-events: none;
}
.svc__plus {
  display: none;
}
.svc__body {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}
.svc__text {
  margin-top: 16px;
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
}
.svc__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
}
.svc__logo {
  position: relative;
  z-index: 1;                    /* カード全体のリンクより手前（ロゴは外部サイトへ） */
  min-width: 0;
}
.svc__logo img {
  width: auto;
  max-width: 100%;
  height: auto;
}
.svc__logo:hover {
  opacity: 0.7;
}
.svc__logo-text {                /* 文字で作られたロゴ（明朝体） */
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  line-height: 1.5;
}
.svc__logo-text--gold {
  font-size: clamp(18px, 1.25vw, 24px);
  letter-spacing: 0.05em;
  color: #b09843;
}
.svc__logo-text--black {
  font-size: clamp(14px, 0.94vw, 18px);
  color: #000;
}
.svc__more {
  margin-left: auto;
}
.svc__more .link-arrow__icon {
  display: block;
  width: 40px;
  height: 40px;
  background-size: 12px;
}
.svc__more::after {              /* カード全体をクリックできるようにする */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
}
.svc:hover .svc__more .link-arrow__icon {
  transform: translateX(4px);
}

/* ===== グループ会社紹介（GROUP COMPANIES） =========================== */
.groups {
  padding: clamp(80px, 8.33vw, 160px) var(--side-margin) clamp(100px, 10.42vw, 200px);
}
.groups__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
}
.groups__head {
  display: grid;
  grid-template-columns: minmax(0, 512fr) minmax(0, 1056fr);
  column-gap: 32px;
}
.groups__title {
  margin-top: clamp(24px, 2.5vw, 48px);
}
.groups__lead {
  font-size: clamp(18px, 1.35vw, 26px);
  font-weight: 500;
  line-height: 2;
}
.groups__list {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 5vw, 96px);
  margin-top: clamp(48px, 5vw, 96px);
}

/* 1社分：文章（左） ｜ 写真＋何社目か（右） */
.group-row {
  display: grid;
  grid-template-columns: minmax(0, 680fr) minmax(0, 784fr);
  column-gap: clamp(40px, 7.08vw, 136px);
  align-items: start;
}
.group-row__text {
  display: flex;
  flex-direction: column;
}
.group-row__name {
  display: flex;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid #c5c5c5;
  font-size: clamp(22px, 1.67vw, 32px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.group-row__num {
  flex-shrink: 0;
  min-width: 1.75em;               /* 番号の幅をそろえる（社名の頭を揃える） */
  font-size: inherit;
  letter-spacing: 0.1em;
  color: var(--color-main);
}
.group-row__body {
  margin-top: 32px;
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
}
.group-row__body p + p {
  margin-top: 2em;                 /* 1行分あける */
}
.group-row__more {
  align-self: flex-end;
  margin-top: clamp(40px, 3.33vw, 64px);
}

.group-row__media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  column-gap: 24px;
}
.group-row__media img {
  width: 100%;
  aspect-ratio: 736 / 670;
  object-fit: cover;
  border-radius: 8px;
}
/* 何社目か：上に「01／04」、下に点（今の会社が緑） */
.group-row__count {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
}
.group-row__count p {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
}
.group-row__dots {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.group-row__dots li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #c5c5c5;
}
.group-row__dots li.is-current {
  background-color: var(--color-main);
}

/* ===== お客様の声（CUSTOMER REVIEWS・グレー背景） ==================== */
.voices {
  padding: clamp(80px, 8.33vw, 160px) 0;
}
.voices__head {
  text-align: center;
}
.voices__title {
  margin-top: clamp(24px, 2.5vw, 48px);
}
.voices__row {
  --marquee-duration: 70s;
  margin-top: 23px;
  pointer-events: auto;            /* 共通の帯はクリック不可にしているので、マウスで止められるよう戻す */
}
.voices__head + .voices__row {
  margin-top: clamp(24px, 2.5vw, 48px);
}
.voices__row--2 {
  margin-top: -46px;               /* 上段の閉じ引用符の下に重ねる（Figmaどおり） */
}
.voices__row:hover .marquee__track {
  animation-play-state: paused;    /* 読めるようにマウスを乗せている間は止める */
}
.voices__row .marquee__track {
  align-items: stretch;
}
.voices__row .marquee__track > * {
  padding-right: 0;                /* 共通の「文と文の間」は使わず、カードの margin で間隔を取る */
}

/* 口コミカード（左上と右下に大きな緑の引用符） */
.voice {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 512px;
  min-height: 217px;
  margin: 25px 35px 82px 17px;     /* 引用符のはみ出し分（左17・上25・右19＋カード間16・下82） */
  padding: 32px 16px 24px 32px;
  background-color: var(--color-white);
  border-radius: 8px;
  white-space: normal;
}
.voices__row--2 .voice {
  min-height: 251px;
}
.voice::before,
.voice::after {
  position: absolute;
  font-family: var(--font-en);
  font-size: 106px;
  line-height: 159px;
  color: var(--color-main);
}
.voice::before {
  content: "“";
  top: -25px;
  left: -17px;
}
.voice::after {
  content: "”";
  right: -19px;
  bottom: -82px;
}
.voice__text {
  font-size: clamp(20px, 1.35vw, 26px);
  font-weight: 500;
  line-height: 2;
}
.voice__meta {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0 32px;
  margin-top: auto;
  padding-top: 8px;
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #999;
}
.voices__more {
  margin-top: clamp(16px, 0.83vw, 16px);
  text-align: center;
}

/* ===== ニュース・コラム（NEWS/COLUMN） =============================== */
.news {
  padding: clamp(80px, 8.33vw, 160px) var(--side-margin) 0;
}
.news__inner {
  display: grid;
  grid-template-columns: minmax(0, 648fr) minmax(0, 920fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "head list"
    "more list";
  column-gap: 32px;
  max-width: var(--container-wide);
  margin-inline: auto;
}
.news__head { grid-area: head; }
.news__title {
  margin-top: clamp(24px, 2.5vw, 48px);
}
.news__more {
  grid-area: more;
  margin-top: clamp(40px, 4.17vw, 80px);
}
.news__list { grid-area: list; }

/* 記事1件：サムネイル ｜ 日付・タイトル・抜粋・矢印（全体がリンク） */
.news-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 376fr) minmax(0, 512fr);
  column-gap: 32px;
  align-items: center;
  padding: 40px 0;
  border-bottom: 1px solid #c5c5c5;
}
.news-item:first-child { padding-top: 0; }
.news-item:last-child  { padding-bottom: 0; border-bottom: 0; }
.news-item__img {
  width: 100%;
  aspect-ratio: 376 / 208;
  object-fit: cover;
  border-radius: 8px;
}
.news-item__body {
  display: flex;
  flex-direction: column;
}
.news-item__date {
  font-size: 1rem;
  line-height: 1.25;
}
.news-item__title {
  margin-top: 8px;
  font-size: clamp(18px, 1.15vw, 22px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
}
.news-item__title a::after {     /* 記事1件全体をクリックできるようにする */
  content: "";
  position: absolute;
  inset: 0;
}
.news-item__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;         /* 2行で「…」 */
  overflow: hidden;
  margin-top: 16px;
  font-size: clamp(14px, 0.83vw, 16px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.news-item__arrow {
  align-self: flex-end;
  width: 40px;
  height: 40px;
  margin-top: 16px;
  background-size: 12px;
}
.news-item:hover .news-item__arrow {
  transform: translateX(4px);
}

/* ===== 提携先一覧 =================================================== */
.partners {
  padding: clamp(100px, 10.21vw, 196px) var(--side-margin) clamp(40px, 2.92vw, 56px);
}
.partners__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
}
.partners__title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(24px, 1.67vw, 32px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.partners__title::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-main);
}
.partners__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 40px;
}
.partners__cat {
  padding-bottom: 8px;
  border-bottom: 1px solid #c5c5c5;
  font-size: clamp(20px, 1.35vw, 26px);
  font-weight: 500;
  line-height: 2;
  color: var(--color-main);
}
.partners__list {
  margin-top: 16px;
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #000;
  word-break: keep-all;          /* 社名の途中で改行せず、スペースやカッコの前で改行 */
  overflow-wrap: anywhere;
}

/* ===== RECRUIT / STAY CONNECTED（写真のバナー2枚） ==================== */
.bnrs {
  padding: clamp(40px, 3.54vw, 68px) var(--side-margin) 0;
}
.bnrs__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: var(--container-wide);
  margin-inline: auto;
}
.bnr {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 784 / 320;
  overflow: hidden;
  border-radius: 8px;
  color: var(--color-white);
}
.bnr__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}
.bnr:hover .bnr__img {
  transform: scale(1.05);
}
/* RECRUIT：左側の斜めの面（ベージュの細い帯＋緑のグラデーション） */
.bnr--recruit::before,
.bnr--recruit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.bnr--recruit::before {
  background-color: #f6dfc9;
  clip-path: polygon(0 0, 39.12% 0, 44.39% 100%, 0 100%);
}
.bnr--recruit::after {
  background: linear-gradient(136deg, #21cb61, var(--color-main) 45%);
  clip-path: polygon(0 0, 45.03% 0, 38.65% 100%, 0 100%);
}
/* STAY CONNECTED：写真に濃い緑の半透明を重ねる */
.bnr--stay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(52, 86, 83, 0.6);
}
.bnr__body {
  position: absolute;
  display: flex;
  flex-direction: column;
}
.bnr--recruit .bnr__body {
  left: 5.61%;                   /* 44 / 784 */
  top: 26.9%;                    /* 86 / 320 */
}
.bnr--stay .bnr__body {
  inset: 0;
  align-items: center;
  justify-content: center;
}
.bnr__en {
  font-size: clamp(36px, 2.92vw, 56px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bnr__ja {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.bnr__arrow {                    /* 白い丸に緑の矢印。外部サイトは斜め上向き */
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M0 4h9M6 1l3 3-3 3' fill='none' stroke='%2300a23d' stroke-width='1'/%3E%3C/svg%3E") center / 12px no-repeat;
  transition: transform 0.2s;
}
.bnr__arrow--ext {
  transform: rotate(-45deg);
}
.bnr:hover .bnr__arrow {
  transform: translateX(4px);
}
.bnr:hover .bnr__arrow--ext {
  transform: rotate(-45deg) translateX(4px);
}

/* ===== 小さめのPC〜タブレット（1279px以下）：ABOUT を1列に ============
   （横並びのままだと円が小さくなり、中の文字が読みにくくなるため） */
@media (max-width: 1279px) {
  /* ABOUT：文章 → 円 → 流れる英字 → 詳しくみる の順に縦に並べる */
  .about {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "text" "credo" "marquee" "more";
  }
  .about__text {
    padding-right: var(--side-margin);
  }
  .about__title {
    white-space: normal;
  }
  .credo {
    justify-self: center;
    width: min(100%, 720px);
    margin-top: 48px;
  }
  .about__marquee {
    z-index: auto;
  }
  .about__more {
    justify-self: center;
    padding-left: 0;
    margin-top: 24px;
  }
}

/* ===== タブレット（769〜1023px）：2列のセクションを1列に =============== */
@media (max-width: 1023px) {
  .wwd__inner,
  .concept__inner {
    grid-template-columns: 1fr;
    row-gap: 64px;
  }
  .wwd__title {
    white-space: normal;
  }
  .concept__img {
    margin-right: var(--side-margin);
  }
  .concept__body {
    padding-left: var(--side-margin);
  }
  .concept__marquee {
    z-index: auto;
    margin-top: 24px;
  }
  .adv__list {
    grid-template-columns: 1fr;
  }
  .adv__btns {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .adv__btns .btn-box {
    max-width: none;
  }

  /* 代表メッセージ：写真 → 文章 の順に縦に並べる */
  .message__body,
  .message__body--reverse {
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "text";
    row-gap: 48px;
  }
  .message__body--reverse {
    margin-top: 0;
  }
  .message__photo {
    width: min(100%, 512px);
  }

  /* 業種：文章・タイル → 写真 の順に縦に並べる */
  .support {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .support__body {
    max-width: none;
    padding-right: var(--side-margin);
  }

  /* サービス一覧：見出しは縦に、カードは2列に */
  .services__head {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .services__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* グループ会社：写真 → 文章 の順に縦に並べる */
  .groups__head {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .group-row {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .group-row__media {
    order: -1;
  }

  /* ニュース：見出し → 記事 → 一覧をみる */
  .news__inner {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "head" "list" "more";
    row-gap: 48px;
  }
  .news__more {
    margin-top: 0;
  }
  /* 提携先：2列 */
  .partners__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* バナー：縦に並べる */
  .bnrs__inner {
    grid-template-columns: 1fr;
  }
}

/* ===== スマホ（768px以下） ========================================== */
@media (max-width: 768px) {
  /* --- WHAT WE DO --- */
  .wwd {
    padding: 80px 16px;
  }
  .wwd__inner {
    grid-template-columns: 1fr;
    row-gap: 64px;
  }
  .wwd__title {
    margin-top: 20px;
    font-size: 1.875rem;        /* 30px */
  }
  .wwd__lead {
    margin-top: 40px;
    font-size: 1.25rem;         /* 20px */
  }
  .wwd__btns {
    gap: 16px;
    margin-top: 56px;
  }
  .wwd__btns .btn-box {
    max-width: none;
    height: 72px;
    font-size: 1.125rem;
  }
  .wwd__btns .btn-box::after {
    width: 8px;
    height: 8px;
  }

  /* グループ会社一覧：見出しをタップで開閉 */
  .wwd__group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 2;
    color: var(--color-text);
  }
  .wwd__group-icon {               /* 「−」（閉じている時は「＋」） */
    position: relative;
    width: 20px;
    height: 2px;
    margin-right: 5px;
    background-color: var(--color-main);
  }
  .wwd__group-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: inherit;
    transform: rotate(90deg);
    transition: transform 0.3s;
  }
  .wwd__group-toggle[aria-expanded="true"] .wwd__group-icon::after {
    transform: rotate(0deg);
  }
  .wwd__list {
    margin-top: 24px;
  }
  .wwd__list.is-closed {
    display: none;
  }
  .wwd__item {
    grid-template-columns: 38px 1fr;
    column-gap: 20px;
    padding: 0 0 16px;
  }
  .wwd__item + .wwd__item {
    padding-top: 16px;
  }
  .wwd__num {
    font-size: 1.625rem;        /* 26px */
  }
  .wwd__cat {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
  }
  .wwd__name {
    font-size: 1rem;
  }

  /* --- CONCEPT --- */
  .concept {
    padding: 80px 0 40px;
  }
  .concept__inner {
    row-gap: 48px;
  }
  .concept__img {
    margin-right: 16px;
  }
  .concept__body {
    padding: 0 16px;
  }
  .concept__title {
    margin-top: 20px;
    font-size: 1.875rem;
  }
  .concept__text {
    margin-top: 40px;
    font-size: 1rem;
  }
  .concept__marquee {
    z-index: auto;
    margin-top: 8px;
    font-size: 4.25rem;         /* 68px */
  }

  /* --- グループの強み：カードは縦1列、アイコンを上の中央に --- */
  .adv {
    padding: 80px 16px;
  }
  .adv__title {
    margin-top: 20px;
    font-size: 1.875rem;
  }
  .adv__lead {
    margin-top: 32px;
    font-size: 1rem;
  }
  .adv__list {
    gap: 58px;                  /* Figma上の見た目のカード間隔 */
    margin-top: 40px;
  }
  .adv-card {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-height: 0;
    padding: 26px 30px 36px;
  }
  .adv-card__icon {
    align-self: center;
    width: 100px;
  }
  .adv-card__title {
    font-size: 1.625rem;        /* 26px */
    line-height: 1.5;
  }
  .adv-card__text {
    font-size: 1rem;
    line-height: 1.7;
  }
  .adv-card__num {
    top: 128px;
    right: 30px;
    font-size: 5rem;            /* 80px */
  }
  .adv__btns {
    margin-top: 57px;
  }
  .adv__btns .btn-box {
    height: 72px;
    font-size: 1.125rem;
  }

  /* --- ABOUT --- */
  .about {
    padding: 80px 0 120px;
  }
  .about__text {
    padding-inline: 16px;
  }
  .about__title {
    margin-top: 20px;
    font-size: 1.875rem;
  }
  .about__table {
    margin-top: 32px;
  }
  .about__row {
    grid-template-columns: 1fr;       /* 項目名の下に内容 */
    padding: 16px 8px;
    font-size: 1.125rem;
    line-height: 1.78;
  }
  .about__row:first-child {
    padding-top: 0;
  }
  .credo {
    width: 111%;                       /* 画面より少し大きく（Figma 433px / 390px） */
    max-width: none;
    margin-top: 38px;
  }
  .credo__label { font-size: 3.92cqw; }
  .credo__num   { font-size: 12cqw; }
  .credo__to,
  .credo__text  { font-size: 2.77cqw; }
  .about__marquee {
    margin-top: -40px;
    font-size: 5rem;                   /* 80px */
  }
  .about__more {
    margin-top: 23px;
  }

  /* --- 代表メッセージ：パネルは画面幅いっぱい。2枚目の下にグレー --- */
  .message {
    padding-bottom: 165px;
    margin-bottom: 80px;
    background: linear-gradient(to bottom, transparent 50%, var(--color-bg-gray) 50%);
  }
  .message__panel,
  .message__panel--2 {
    width: 100%;
    border-radius: 0;
    padding: 80px 16px;
  }
  .message__title {
    margin-top: 20px;
    font-size: 1.875rem;
  }
  .message__body {
    margin-top: 56px;
  }
  .message__photo {
    width: auto;
    margin-inline: 7px;               /* 写真 344px / 358px */
  }
  .message__photo img {
    aspect-ratio: 344 / 260;          /* SPは横長 */
    object-position: center 22%;
  }
  .message__photo figcaption {
    margin-top: 8px;
    font-size: 1.125rem;
  }
  .message__text {
    font-size: 1rem;
  }
  .message__lead {
    margin-bottom: 24px;
    font-size: 1.5rem;                /* 24px */
  }

  /* --- 業種 --- */
  .support {
    padding-left: 16px;
    margin-bottom: 81px;
  }
  .support__body {
    padding-right: 16px;
  }
  .support__title {
    margin-top: 20px;
    font-size: 1.875rem;
  }
  .support__lead {
    margin-top: 40px;
    font-size: 1rem;
  }
  .support__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 48px;
  }
  .support__item {
    gap: 4px;
    padding: 24px 4px 14px;
    font-size: 0.875rem;
  }
  .support__item img {
    width: 40px;
  }

  /* --- サービス一覧：見出しをタップで開閉する一覧 --- */
  .services {
    padding: 80px 16px;
    background-color: #03af43;          /* SPはFigmaで少し明るい緑 */
  }
  .services__title {
    margin-top: 20px;
    font-size: 1.875rem;
  }
  .services__head {
    row-gap: 48px;
  }
  .services__lead {
    font-size: 1.5rem;                  /* 24px */
  }
  .services__text {
    font-size: 1rem;
  }
  .services__list {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 48px;
  }
  .svc {
    display: block;
    min-height: 0;
    padding: 0;
  }
  .svc__icon,
  .svc__en {
    display: none;
  }
  .svc__head {
    padding: 0;
    border: 0;
  }
  .svc__toggle {
    min-height: 69px;
    padding: 16px 20px;
    font-size: 1.125rem;
    pointer-events: auto;
  }
  .svc__plus {                          /* ＋（開いている時は −） */
    display: block;
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 2px;
    margin-left: 12px;
    background-color: var(--color-main);
  }
  .svc__plus::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: inherit;
    transform: rotate(90deg);
    transition: transform 0.3s;
  }
  .svc__toggle[aria-expanded="true"] .svc__plus::after {
    transform: rotate(0deg);
  }
  .svc__body {
    padding: 0 20px 20px;
  }
  .svc__body.is-closed {
    display: none;
  }
  .svc__text {
    margin-top: 0;
    font-size: 0.9375rem;
  }
  .svc__more::after {
    display: none;                      /* SPでは見出しで開閉するので、カード全体リンクにしない */
  }

  /* --- お客様の声：カードは小さめの正方形、会社名とお名前は縦に並べる --- */
  .voices {
    padding: 80px 0;
  }
  .voices__title {
    margin-top: 20px;
    font-size: 1.875rem;
  }
  .voices__row {
    --marquee-duration: 45s;
  }
  .voices__head + .voices__row {
    margin-top: 8px;
  }
  .voices__row--2 {
    margin-top: -67px;                  /* 上段のカードとの間を約17px（Figmaどおり）に */
  }
  .voice,
  .voices__row--2 .voice {
    width: 231px;
    min-height: 231px;
    margin: 30px 23px 54px 8px;
    padding: 39px 7px 20px 14px;
  }
  .voice::before {
    top: -30px;
    left: -8px;
  }
  .voice::after {
    right: -14px;
    bottom: -84px;
  }
  .voice__text {
    font-size: 1rem;
    line-height: 1.5;
  }
  .voice__meta {
    flex-direction: column;
    align-items: flex-end;
    font-size: 1rem;
    text-align: right;
  }
  .voices__more {
    margin-top: 0;
  }

  /* --- ニュース：サムネイルの下に文章 --- */
  .news {
    padding: 80px 16px 0;
  }
  .news__title {
    margin-top: 20px;
    font-size: 1.875rem;
  }
  .news__more {
    text-align: center;
  }
  .news-item {
    grid-template-columns: 1fr;
    row-gap: 32px;
    padding: 32px 0;
  }
  .news-item__img {
    aspect-ratio: 358 / 198;
  }
  .news-item__title {
    font-size: 1.125rem;
  }
  .news-item__excerpt {
    font-size: 0.875rem;
  }

  /* --- 提携先：1列 --- */
  .partners {
    padding: 89px 16px 54px;
  }
  .partners__title {
    font-size: 1.5rem;
  }
  .partners__cols {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }
  .partners__cat {
    font-size: 1.5rem;
    line-height: 1.5;
  }
  .partners__list {
    font-size: 1rem;
  }

  /* --- バナー --- */
  .bnrs {
    padding: 81px 16px 0;
  }
  .bnrs__inner {
    gap: 31px;
  }
  .bnr {
    aspect-ratio: 358 / 170;
  }
  .bnr--recruit .bnr__body {
    left: 5.3%;
    top: 27.6%;
  }
  .bnr__en {
    font-size: 1.75rem;           /* 28px */
  }
  .bnr__ja {
    gap: 11px;
    font-size: 0.875rem;
  }
  .bnr__arrow {
    width: 18px;
    height: 18px;
    background-size: 7px;
  }

  /* --- グループ会社紹介 --- */
  .groups {
    padding: 80px 16px;
  }
  .groups__title {
    margin-top: 20px;
    font-size: 1.875rem;
  }
  .groups__lead {
    font-size: 1.25rem;                 /* 20px */
  }
  .groups__list {
    gap: 72px;
    margin-top: 72px;
  }
  .group-row__media {
    grid-template-columns: minmax(0, 1fr) 24px;
    column-gap: 8px;
  }
  .group-row__media img {
    aspect-ratio: 326 / 202;            /* SPは横長 */
  }
  .group-row__count {
    padding-bottom: 4px;
  }
  .group-row__count p {
    font-size: 0.875rem;
  }
  .group-row__dots {
    gap: 8px;
  }
  .group-row__dots li {
    width: 6px;
    height: 6px;
  }
  .group-row__name {
    align-items: center;
    font-size: 1.5rem;                  /* 24px（番号は32px） */
    letter-spacing: 0.08em;
  }
  .group-row__num {
    font-size: 2rem;
  }
  .group-row__body {
    margin-top: 32px;
    font-size: 1rem;
  }
  .group-row__more {
    margin-top: 16px;
  }
}

/* ===== スマホ（768px以下）：メインビジュアル ========================= */
@media (max-width: 768px) {
  /* コピー → 写真 → 英字（写真の下端に重なる） → リンク の順に縦に並べる */
  .mv {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 24px 0 80px;
    container-type: inline-size;   /* 中の文字サイズを、実際に使える横幅(cqi)基準にする */
    overflow-x: clip;              /* 英字の末尾の字間（見えない余白）で横にはみ出さないように */
  }
  .mv__body {
    display: contents;
  }
  .mv__copy {
    order: 1;
    padding-inline: 18px;
    font-size: min(26px, calc((100cqi - 36px) / 13.2));   /* 1行12文字＋字間が必ず収まる大きさ（390px幅で26px） */
  }
  .mv__slider {
    order: 2;
    position: relative;
    width: 100%;
    height: 88.2vw;                          /* 390x344 */
    margin-top: 24px;
  }
  .mv__en {
    order: 3;
    position: relative;
    left: auto;
    bottom: auto;
    margin: -11cqi 0 0 11px;                 /* 写真の下端に重ねる */
    font-size: 11.28cqi;                     /* 390px幅で44px */
    white-space: nowrap;                     /* <br> の位置だけで改行（2行） */
  }
  .mv__links {
    order: 4;
    display: flex;             /* 390px幅では2つ＋1つ。狭い画面では入りきらない分を次の行へ */
    flex-wrap: wrap;
    gap: 22px 17px;
    margin: 40px 16px 0;
  }
  .mv__links .link-arrow {
    font-size: 0.875rem;
  }
}

/* 動きを減らす設定のときはアニメーションしない */
@media (prefers-reduced-motion: reduce) {
  .mv__slide img,
  .mv__slide.is-leaving,
  .mv__en,
  .split-char {
    animation: none !important;
    opacity: 1;
  }
}