/* =========================================================
   Renewal: top
   ========================================================= */

/* ---------- ファーストビュー（Figma: 546:2809） ----------
   1440×815、写真は右寄せ 1337 幅（左 103 余白）、キャッチは x=50 / 上 503、白帯 108px、74.67px bold */
.r-fv {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 815;
  overflow: hidden;
}

.r-fv__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(1337 / 1440 * 100%);
  height: 100%;
}
.r-fv__swiper {
  width: 100%;
  height: 100%;
}
.r-fv__swiper .swiper-slide {
  overflow: hidden;
}
.r-fv__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}
.r-fv__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 前後ボタン（旧 FV と同じく Swiper 既定の矢印。白 70%、ホバーで 50%、SP は非表示） */
.r-fv .swiper-button-prev,
.r-fv .swiper-button-next {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
}
.r-fv .swiper-button-prev:hover,
.r-fv .swiper-button-next:hover {
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 767px) {
  .r-fv .swiper-button-prev,
  .r-fv .swiper-button-next {
    display: none;
  }
}

/* ページネーション（Figma: 575:3456 — 10px ドット × 4、間隔 15、下から 22）
   Swiper 本体の .swiper-pagination-horizontal（left:0 / width:100% / bottom:8px）を上書きするため
   .r-fv を付けて詳細度を上げる */
.r-fv .r-fv__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 4px;
  width: auto;
  transform: none;
}
.r-fv__dots .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0;
  background: var(--r-color-white);
  opacity: 0.5;
  transition: opacity 0.3s;
}
.r-fv__dots .swiper-pagination-bullet-active {
  opacity: 1;
}

.r-fv__catch {
  position: absolute;
  z-index: 2; /* Swiper（z-index:1）より前面に */
  left: calc(50 / 1440 * 100%);
  top: calc(503 / 815 * 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(20 / 1440 * 100vw);
  margin: 0;
  font-family: var(--r-ff-base);
  font-weight: 700;
  color: #222;
  line-height: normal;
}
/* 白帯が左から右へワイプして現れる（1行目 → 2行目の順） */
@keyframes r-fv-line-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.r-fv__line {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: r-fv-line-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
  width: fit-content;
  max-width: 97%;
  padding: 0 0 0 16px;
  background: var(--r-color-white);
  font-size: calc(74.67 / 1440 * 100vw); /* 1440px 未満は画面幅に比例、以上は 74.67px 固定 */
  white-space: nowrap;
}
.r-fv__line:nth-child(2) {
  padding-left: 22px;
  animation-delay: 0.6s; /* 1行目から少し遅らせる */
}
@media (prefers-reduced-motion: reduce) {
  .r-fv__line {
    clip-path: none;
    animation: none;
  }
}
@media (min-width: 1440px) {
  .r-fv__catch {
    gap: 20px;
  }
  .r-fv__line {
    font-size: 74.67px;
  }
}

/* SP（Figma: 592:5013、320 幅基準）: 写真 320×284 全幅、白帯 38px は左端から、26px bold、帯間 7px、下 30px */
@media (max-width: 767px) {
  .r-fv {
    aspect-ratio: 320 / 284;
  }
  .r-fv__photo {
    width: 100%;
  }
  .r-fv__catch {
    left: 0;
    top: auto;
    bottom: 30px;
    gap: 7px;
  }
  .r-fv__line {
    height: 38px;
    padding: 0 0 0 16px;
    font-size: 26px;
    line-height: 38px;
  }
  .r-fv__line:nth-child(2) {
    padding-left: 16px;
  }
  .r-fv .r-fv__dots {
    bottom: 12px;
    gap: 10px;
  }
  .r-fv__dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }
}

/* ---------- 企業ロゴマーキー（旧 .p-company-logo-section の複製、上下 padding 28px） ---------- */
.r-logos {
  padding: 28px 0;
}
@media (max-width: 767px) {
  .r-logos {
    padding: 18px 0;
  }
}
.r-logos__ticker {
  overflow: hidden;
  width: 100%;
}
.r-logos__track {
  display: flex;
}
.r-logos__set {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-right: 20px;
  flex-shrink: 0;
}
.r-logos__logo {
  height: 45px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .r-logos__set {
    gap: 40px;
    padding-right: 40px;
  }
  .r-logos__logo {
    height: 70px;
  }
}

/* ---------- Mission（Figma: 440:3111） ----------
   高さ 679、見出し上 122、キャッチ 70px lh120 上 280 */
.r-top-mission {
  padding-block: 51px; /* Figma SP: 高さ 303、Mission 上 51、キャッチ下 ≒51 */
  background: #4a0000 url("../img/top-mission-bg.webp") center / cover no-repeat;
  color: var(--r-color-white);
  text-align: center;
  font-family: var(--r-ff-base);
}
@media (min-width: 768px) {
  /* 1440px で Figma 値（高さ 679 / 上 122・下 100）。狭い画面では画面幅に比例して縮める */
  .r-top-mission {
    min-height: clamp(420px, 47.2vw, 679px);
    padding-block: clamp(64px, 8.5vw, 122px) clamp(56px, 6.9vw, 100px);
  }
}

.r-top-mission__catch {
  margin-top: 23px; /* Figma SP: ラベル下端 115 → キャッチ 138 */
  font-size: 24px;
  font-weight: 700;
  line-height: 38px;
  text-shadow: 0 -5px 8px rgba(0, 0, 0, 0.35);
}
@media (min-width: 768px) {
  .r-top-mission__catch {
    margin-top: clamp(28px, 4.3vw, 62px); /* Figma: キャッチ上端 280 */
    font-size: clamp(32px, 4.9vw, 70px);
    line-height: 1.7;
  }
}

/* ---------- Stance（Figma: 440:2236） ----------
   高さ 723、テキスト x=72 / 上 70、キャッチ 32px lh46、ボタン 上 492、画像 653×640（x=720・上 39） */
.r-top-stance {
  padding-block: 51px 61px; /* Figma SP: 高さ 696、Stance 上 51、ボタン下 61 */
  background: var(--r-color-white);
  color: #222;
  font-family: var(--r-ff-base);
}
@media (min-width: 768px) {
  .r-top-stance {
    padding-block: 39px 44px;
  }
}

.r-top-stance__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: calc(1296px + var(--r-side-pad) * 2); /* 1440幅で左端 72px */
  margin-inline: auto;
  padding-inline: var(--r-side-pad);
}
/* SP: 見出し → キャッチ → 画像 → ボタン の順（Figma SP 575:3566） */
@media (max-width: 767px) {
  .r-top-stance__text {
    display: contents;
  }
  .r-top-stance__inner .r-top-stance__photo {
    order: 1;
    margin-top: 27px; /* キャッチ下端 242 → 画像 269（後方の margin:0 より優先） */
  }
  .r-top-stance__btn {
    order: 2;
    width: 100%;
    margin-top: 30px; /* 画像下端 544 → ボタン 574 */
  }
}
@media (min-width: 768px) {
  .r-top-stance__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }
  .r-top-stance__text {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 31px; /* Figma: ラベル上端 70 - セクション上 padding 39 */
  }
}

.r-top-stance__catch {
  margin-top: 11px; /* Figma SP: ラベル下端 115 → キャッチ 126 */
  font-size: 19px;
  font-weight: 700;
  line-height: 29px;
}
@media (min-width: 768px) {
  .r-top-stance__catch {
    margin-top: 36px; /* Figma: Stance 上端 136 → キャッチ上端 236 */
    font-size: 32px;
    line-height: 46px;
  }
}

@media (min-width: 768px) {
  .r-top-stance__btn {
    margin-top: 118px; /* Figma: ボタン上端 492 */
  }
}

.r-top-stance__photo {
  width: 100%;
  max-width: 653px;
  aspect-ratio: 653 / 686;
  margin: 0;
  overflow: hidden;
}
.r-top-stance__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Brand Story（Figma: 440:2340） ----------
   高さ 904、見出し x=72 / 上 90、キャッチ 32px 上 254、本文 18px lh36 幅969 上 342、
   スライダー 600×338 gap 20、上 566〜下端 */
.r-top-story {
  overflow: hidden;
  padding-top: 51px; /* Figma SP: 高さ 708、Brand Story 上 51、スライダー下 60 */
  background: linear-gradient(180deg, rgba(239, 237, 231, 0.44) 0%, rgba(255, 255, 255, 0.44) 100%) var(--r-color-white);
  color: #222;
  font-family: var(--r-ff-base);
}
@media (min-width: 768px) {
  .r-top-story {
    padding-top: 90px;
  }
}

.r-top-story__inner {
  width: 100%;
  max-width: calc(1296px + var(--r-side-pad) * 2); /* 1440幅で左端 72px */
  margin-inline: auto;
  padding-inline: var(--r-side-pad);
}

.r-top-story__catch {
  margin-top: 11px; /* Figma SP: ラベル下端 115 → キャッチ 126 */
  font-size: 19px;
  font-weight: 700;
  line-height: 30px;
}
@media (min-width: 768px) {
  .r-top-story__catch {
    margin-top: 35px; /* Figma: Brand Story 上端 154 → キャッチ上端 254 */
    font-size: 32px;
    line-height: normal;
  }
}

.r-top-story__body {
  margin-top: 21px; /* Figma SP: キャッチ下端 186 → 本文 207 */
  font-size: 14px;
  line-height: 1.75;
  color: #000;
}
.r-top-story__body p + p {
  margin-top: 1.75em; /* SP: 段落間に空行 1 行分 */
}
@media (min-width: 768px) {
  .r-top-story__body {
    max-width: 969px;
    margin-top: 42px; /* Figma: 本文上端 342 */
    font-size: 18px;
    line-height: 36px;
  }
  .r-top-story__body p + p {
    margin-top: 0; /* PC: 段落は続けて表示（Figma 440:2347） */
  }
  /* 最終行の前だけ 1 行空ける（SP は p + p の余白でそのまま空く） */
  .r-top-story__body p.is-spaced {
    margin-top: 36px;
  }
}

/* 写真スライダー（CSS マーキー。About と同方式） */
.r-top-story__slider {
  --_gap: 12px;
  margin-top: 27px; /* Figma SP: 本文下端 471 → スライダー 498 */
  padding-bottom: 60px;
}
@media (min-width: 768px) {
  .r-top-story__slider {
    --_gap: 20px;
    margin-top: 80px; /* Figma: 本文下端 ≒486 → スライダー上端 566 */
    padding-bottom: 0;
  }
}
.r-top-story__track {
  display: flex;
  width: max-content;
  animation: r-top-story-marquee 36s linear infinite;
}
.r-top-story__set {
  display: flex;
  gap: var(--_gap);
  margin: 0;
  padding: 0 var(--_gap) 0 0;
  list-style: none;
}
.r-top-story__item {
  flex-shrink: 0;
  width: 266px; /* Figma SP: 266.5×150 */
  aspect-ratio: 600 / 338;
  overflow: hidden;
}
@media (min-width: 768px) {
  .r-top-story__item {
    width: 600px;
  }
}
.r-top-story__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes r-top-story-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .r-top-story__track {
    animation: none;
  }
}

/* ---------- Service（Figma: 440:2189） ----------
   高さ 1113、模様 773×1021（left 0 / top -195）、見出し x=72 上 100、本文 上 257 幅855、
   カード 620×594 上 394（x=72 / 750）、下 125 */
.r-top-service {
  position: relative;
  padding-block: 51px 60px; /* Figma SP: 高さ 1075、Service 上 51、カード下 60 */
  background: var(--r-color-white);
  color: #222;
  font-family: var(--r-ff-base);
}
@media (min-width: 768px) {
  .r-top-service {
    padding-block: 100px 125px;
  }
}

.r-top-service__bg {
  position: absolute;
  top: -195px;
  left: 0;
  width: 773px;
  height: auto;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 767px) {
  .r-top-service__bg {
    top: -42px;
    left: -72px;
    width: 429px;
  }
}

.r-top-service__inner {
  position: relative;
  width: 100%;
  max-width: calc(1296px + var(--r-side-pad) * 2); /* 1440幅で左端 72px */
  margin-inline: auto;
  padding-inline: var(--r-side-pad);
}

.r-top-service__lead {
  margin-top: 17px; /* Figma SP: ラベル下端 115 → リード 132 */
  font-size: 14px;
  line-height: 1.75;
  color: #000;
}
@media (min-width: 768px) {
  .r-top-service__lead {
    max-width: 955px;
    margin-top: 26px; /* Figma: 本文上端 257 */
    font-size: 18px;
    line-height: 36px;
    color: #222;
  }
}
@media (max-width: 767px) {
  .r-top-service__lead br {
    display: none;
  }
}

.r-top-service__list {
  display: grid;
  gap: 20px; /* Figma SP: カード間 20 */
  margin: 19px 0 0; /* Figma SP: リード下端 276 → カード 295 */
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .r-top-service__list {
    /* 修正依頼 T-04: 3 つを縦に積み、それぞれ横長の枠にする */
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 29px; /* Figma: 本文下端 365 → カード上端 394 */
  }
}

/* サービスカード（Figma: 765:4818 / 修正依頼 T-04）
   PC(1440): カード幅 1280・padding 40・枠 1px rgba(128,0,0,.5)、テキスト列とのgap 89、
   番号 Oswald 80px アウトライン、見出し 43px/50 Bold #3A0000、
   本文 16px/26 #222 ＋ 左に 4×80 のグラデ縦線、ボタン 184×61 右寄せ、写真 400×232
   SP: 写真 → 番号＋見出し → 本文 → ボタンの縦積み */
.r-service-card {
  display: flex;
  flex-direction: column;
  padding: 20px 21px 24px;
  border: 1px solid rgba(128, 0, 0, 0.5);
  background: var(--r-color-white);
}
@media (min-width: 768px) {
  .r-service-card {
    flex-direction: row;
    align-items: center;
    gap: clamp(28px, 6.2vw, 89px);
    padding: 40px;
  }
}

.r-service-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}
@media (min-width: 768px) {
  .r-service-card__body {
    flex: 1 1 auto;
    align-items: flex-end; /* ボタンを右寄せ（Figma: items-end） */
  }
}

.r-service-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
@media (min-width: 768px) {
  .r-service-card__head {
    align-self: flex-start;
    gap: clamp(14px, 1.7vw, 24px);
    margin-top: 0;
  }
}
.r-service-card__num {
  font-family: var(--r-ff-en);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--r-color-sub);
}
@media (min-width: 768px) {
  .r-service-card__num {
    font-size: clamp(48px, 5.6vw, 80px);
    line-height: 1;
  }
}
.r-service-card__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--r-color-sub);
}
@media (min-width: 768px) {
  .r-service-card__title {
    font-size: clamp(22px, 3vw, 43px);
    line-height: 1.16; /* Figma: 43px / lh50 */
  }
}

/* 本文（左に 4×80 のグラデ縦線） */
.r-service-card__text {
  position: relative;
  width: 100%;
  margin-top: 10px;
  padding-left: 14px;
  font-size: 14px;
  line-height: 20px;
  color: #222;
}
.r-service-card__text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 100%;
  max-height: 80px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #800000 0%, #3a0000 100%);
}
@media (min-width: 768px) {
  .r-service-card__text {
    align-self: stretch;
    margin-top: 36px;
    padding-left: 24px; /* 縦線 4 + gap 20 */
    font-size: 16px;
    line-height: 26px;
  }
  .r-service-card__text::before {
    height: 80px; /* Figma: 4×80 固定 */
    max-height: none;
  }
}

/* ボタン 184×61（Figma: button-white）。SP は左右中央、PC は右寄せ */
.r-service-card__btn {
  align-self: center;
  margin-top: 16px;
}
@media (min-width: 768px) {
  .r-service-card__btn {
    align-self: flex-end;
    width: 184px;
    height: 61px;
    margin-top: 24px;
    border-radius: 30px;
    font-size: 18px;
    line-height: 36px;
  }
}

.r-service-card__photo {
  width: 100%;
  aspect-ratio: 400 / 232;
  order: -1; /* SP は写真を先頭に */
  margin: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .r-service-card__photo {
    flex: 0 0 clamp(240px, 27.8vw, 400px);
    width: clamp(240px, 27.8vw, 400px);
    order: 0;
  }
}
.r-service-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Knowledge（Figma: 440:2362） ----------
   高さ 973、見出し上 90、ラベル 150、リード 194、カード（394幅・gap 15）上 336、白ボタン上 799、下 90 */
.r-top-knowledge {
  overflow: hidden;
  padding-block: 51px 61px; /* Figma SP: 高さ 673、Knowledge 上 51、ボタン下 61 */
  background: #4a0000 url("../img/top-knowledge-bg.webp") center / cover no-repeat;
  color: var(--r-color-white);
  text-align: center;
  font-family: var(--r-ff-base);
}
@media (min-width: 768px) {
  .r-top-knowledge {
    padding-block: 90px;
  }
}
.r-top-knowledge .r-sec-head-c {
  --_title-color: #fff; /* このセクションではタイトルも 100% 白 */
}

.r-top-knowledge__lead {
  margin-top: 13px; /* Figma SP: ラベル下端 115 → リード 128 */
  font-size: 14px;
  line-height: 24px;
  text-align: left;
}
@media (min-width: 768px) {
  .r-top-knowledge__lead {
    margin-top: 28px;
    font-size: 18px;
    line-height: 36px;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .r-top-knowledge__lead br {
    display: none;
  }
}

/* スライダー（Swiper: slidesPerView auto / centered / loop） */
.r-top-knowledge__swiper {
  width: 100%;
  margin-top: 20px; /* Figma SP: リード下端 200 → カード 220 */
  overflow: visible;
  text-align: left;
}
@media (min-width: 768px) {
  .r-top-knowledge__swiper {
    margin-top: 70px; /* Figma: リード下端 266 → カード上端 336 */
  }
}
.r-top-knowledge__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* カードが画面幅に収まるときは Swiper を初期化しない（main.js）。
   その場合は中央寄せで静的に並べ、カード幅は余白に合わせて縮める */
.r-top-knowledge__swiper:not(.swiper-initialized) .swiper-wrapper {
  /* Swiper の .swiper-wrapper は content-box なので、
     padding を足すと幅が溢れて中央寄せが右にずれる */
  box-sizing: border-box;
  justify-content: center;
  gap: 15px;
  padding-inline: var(--r-side-pad);
}
.r-top-knowledge__swiper:not(.swiper-initialized) .swiper-slide {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 394px; /* Figma のカード幅を上限に、狭いときは等分で縮む */
}
.r-top-knowledge .swiper-slide {
  width: 280px;
  height: auto;
}
@media (min-width: 768px) {
  .r-top-knowledge .swiper-slide {
    width: 394px;
  }
}
.r-top-knowledge .r-knowledge-card--dark {
  --_thumb-bg: #ead7d7; /* Figma: このセクションのサムネ枠色 */
}

.r-top-knowledge__action {
  margin-top: 26px; /* Figma SP: カード下端 525 → ボタン 551 */
}
@media (min-width: 768px) {
  .r-top-knowledge__action {
    margin-top: 80px; /* Figma: ボタン上端 799 */
  }
}

/* ---------- Case Studies（Figma: 440:2256） ----------
   高さ 826、見出し x=72 上 90、左テキスト x=72（eyebrow 282 / 下線 334 / タイトル 343 / 説明 473）、
   カード 372×435 x=718〜 gap 38 上 269、ドット 726、下 100 */
.r-top-case {
  overflow: hidden;
  padding-block: 51px 60px; /* Figma SP: 高さ 647、Case Studies 上 51、ドット下 60 */
  background: linear-gradient(180deg, rgba(239, 237, 231, 0.44) 0%, rgba(255, 255, 255, 0) 100%);
  color: #222;
  font-family: var(--r-ff-base);
}
@media (min-width: 768px) {
  .r-top-case {
    padding-block: 90px;
  }
}

.r-top-case__head,
.r-top-case__body {
  width: 100%;
  max-width: calc(1296px + var(--r-side-pad) * 2); /* 1440幅で左端 72px */
  margin-inline: auto;
  padding-inline: var(--r-side-pad);
}

.r-top-case__body {
  display: flex;
  flex-direction: column;
  gap: 30px; /* Figma SP: 説明下端 280 → カード 310 */
  margin-top: 36px;
}
/* 横並びは 1100px 以上。それ未満はテキスト → スライダーの縦積み */
@media (min-width: 1100px) {
  .r-top-case__body {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    margin-top: 48px; /* Figma: カード上端 269 */
  }
  .r-top-case__lead {
    flex: 0 0 auto;
    width: 646px; /* カード左端 x=718 */
    padding-top: 13px; /* Figma: eyebrow 上端 282 */
  }
  .r-top-case__slider {
    flex: 1 1 auto;
    min-width: 0;
    /* 左はテキストに被らないよう切り取り、右は画面端まで伸ばす */
    overflow: hidden;
    margin-right: calc(-1 * max(var(--r-side-pad), (100vw - 1296px) / 2)); /* 1440幅で 72px */
  }
}

.r-top-case__eyebrow {
  padding-bottom: 0;
  border-bottom: 1px solid #222;
  font-size: 14px;
  font-weight: 700;
  line-height: 34px;
  color: var(--r-color-sub);
}
@media (min-width: 768px) {
  .r-top-case__eyebrow {
    width: 560px;
    padding-bottom: 18px; /* Figma: eyebrow 282 → 下線 334 */
    font-size: 32px;
  }
}
@media (max-width: 767px) {
  .r-top-case__eyebrow {
    width: fit-content; /* SP: 下線はテキスト幅 */
  }
}

.r-top-case__catch {
  margin-top: 10px; /* Figma SP: 下線 155 → キャッチ 165 */
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
  color: var(--r-color-sub);
}
@media (min-width: 768px) {
  .r-top-case__catch {
    margin-top: 9px; /* Figma: 下線 334 → タイトル 343 */
    font-size: 40px;
    line-height: 55px; /* Figma: 2行目 398 */
  }
}

.r-top-case__desc {
  margin-top: 15px; /* Figma SP: キャッチ下端 217 → 説明 232 */
  font-size: 14px;
  line-height: 24px;
  color: #000;
}
@media (min-width: 768px) {
  .r-top-case__desc {
    margin-top: 20px; /* Figma: 説明 473 */
    font-size: 18px;
  }
}

/* スライダー本体は右側にはみ出させる（切り取りは .r-top-case__slider 側） */
.r-top-case__swiper {
  overflow: visible;
}
@media (max-width: 767px) {
  .r-top-case__slider {
    overflow: hidden;
    /* 右端を画面いっぱいまで広げる（インナーの右 padding 分だけ外へ） */
    margin-right: calc(-1 * var(--r-side-pad));
  }
}
.r-top-case__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.r-top-case__pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 31px; /* Figma SP: カード下端 550 → ドット 581 */
}
.r-top-case__pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0;
  background: #c8c8c8;
  opacity: 1;
}
@media (min-width: 768px) {
  .r-top-case__pagination {
    justify-content: flex-end;
    gap: 9px;
    margin-top: 30px;
    padding-right: 40%; /* Figma: ドット右端 x≒1152（スライダー幅 722 に対して 288） */
  }
  .r-top-case__pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
  }
}
.r-top-case__pagination .swiper-pagination-bullet-active {
  background: var(--r-color-sub);
}

/* カード 372×435（SP: 250×240、抜粋なし） */
.r-case-card {
  width: 280px;
  height: auto;
}
@media (min-width: 768px) {
  .r-case-card {
    width: 372px;
  }
}
.r-case-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 240px;
  background: var(--r-color-white);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  color: #6b645c;
  text-decoration: none;
}
.r-case-card__thumb {
  width: 100%;
  aspect-ratio: 372 / 215;
  background: #eee;
  overflow: hidden;
}
.r-case-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.r-case-card__body {
  padding: 10px 16px 23px 10px; /* Figma SP: タグ (10,163)、タイトル x=16 */
}
.r-case-card__tag {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding-inline: 6px;
  background: #ef6268;
  color: var(--r-color-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}
.r-case-card__title {
  margin: 8px 0 0 6px; /* Figma SP: タグ下端 179 → タイトル 187 */
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.r-case-card__text {
  display: none; /* SP: 抜粋なし */
}
@media (min-width: 768px) {
  .r-case-card__body {
    padding: 25px 22px 24px; /* Figma: タグ 240（サムネ下端 215 + 25）、x=801（カード左 779 + 22） */
  }
  .r-case-card__tag {
    height: 20px;
    padding-inline: 14px;
    line-height: 20px;
  }
  .r-case-card__title {
    margin: 13px 0 0; /* Figma: タグ 240 → タイトル 273 */
    -webkit-line-clamp: 2;
  }
  .r-case-card__text {
    margin-top: 14px; /* Figma: タイトル下端 303 → 本文 317 */
    font-size: 16px;
    line-height: 26px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}
.r-top-case__empty {
  font-size: 19px;
  font-weight: 300;
  color: #292929;
}

/* ---------- Topics（Figma: 500:4039 上段） ----------
   高さ 1009、模様 773×1021（left -7 / top -195）、見出し x=72 上 100、リード 257、
   カード 620×557 上 332（x=72 / 750）、タイトル 40px lh50 中央 上 33、写真 528×297 上 154、本文 上 468、下 120 */
.r-top-topics {
  position: relative;
  padding-block: 51px 49px; /* Figma SP: 高さ 915、Topics 上 51、カード下 49 */
  background: var(--r-color-white);
  color: #222;
  font-family: var(--r-ff-base);
}
@media (min-width: 768px) {
  .r-top-topics {
    padding-block: 100px 120px;
  }
}

.r-top-topics__bg {
  position: absolute;
  top: -195px;
  left: -7px;
  width: 773px;
  height: auto;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 767px) {
  .r-top-topics__bg {
    top: -62px;
    left: -2px;
    width: 319px;
  }
}

.r-top-topics__inner {
  position: relative;
  width: 100%;
  max-width: calc(1296px + var(--r-side-pad) * 2); /* 1440幅で左端 72px */
  margin-inline: auto;
  padding-inline: var(--r-side-pad);
}

.r-top-topics__lead {
  margin-top: 17px; /* Figma SP: ラベル下端 115 → リード 132 */
  font-size: 14px;
  line-height: 24px;
  color: #000;
}
@media (min-width: 768px) {
  .r-top-topics__lead {
    max-width: 855px;
    margin-top: 26px; /* Figma: リード上端 257 */
    font-size: 18px;
    line-height: 36px;
    color: #222;
  }
}

.r-top-topics__list {
  display: grid;
  gap: 20px; /* Figma SP: カード間 20 */
  margin: 26px 0 0; /* Figma SP: リード下端 180 → カード 206 */
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .r-top-topics__list {
    /* 1440幅で 620px×2 / gap 58。狭い画面ではカードを縮めてインナー内に収める */
    grid-template-columns: repeat(2, minmax(0, 620px));
    /* 見出し／写真／本文の 3 行。2 枚のカードで行の高さを共有し、
       見出しの行数が違っても写真と本文の位置が揃うようにする */
    grid-template-rows: auto auto auto;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 58px);
    margin-top: 39px; /* Figma: リード下端 293 → カード上端 332 */
  }
}

/* トピックカード 620×557 */
.r-topic-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 23px 21px 12px; /* Figma SP: カード 280、写真 238（左右 21） */
  border: 1px solid rgba(128, 0, 0, 0.5);
  background: var(--r-color-white);
}
@media (min-width: 768px) {
  .r-topic-card {
    min-height: 557px;
    padding: 33px clamp(20px, 3.2vw, 45px) 27px; /* 1440幅で 45（写真 x=118） */
    /* 親グリッドの 3 行をそのまま使い、見出しの行数差で写真がずれないようにする */
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    align-content: start;
    /* ベースの flex 用 align-items: center が grid では行内の縦中央寄せになるため上詰めに戻す */
    align-items: start;
    justify-items: center;
    row-gap: 0;
  }
  /* subgrid 非対応のブラウザ向け: 見出しを 3 行分の高さで固定する */
  @supports not (grid-template-rows: subgrid) {
    .r-topic-card {
      display: flex;
    }
    .r-topic-card__title {
      min-height: 150px; /* lh 50px × 3 行 */
    }
  }
}

.r-topic-card__title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--r-color-sub);
}
@media (min-width: 768px) {
  .r-topic-card__title {
    font-size: 40px;
    line-height: 50px;
  }
}

.r-topic-card__photo {
  width: 100%;
  aspect-ratio: 528 / 297;
  margin: 9px 0 0; /* Figma SP: タイトル下端 79 → 写真 88 */
  overflow: hidden;
}
@media (min-width: 768px) {
  .r-topic-card__photo {
    margin-top: 21px; /* Figma: タイトル下端 465 → 写真上端 486 */
  }
}
.r-topic-card__photo img:not(.r-member__view) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 掲載誌などトリミングしたくない画像もあるため contain */
}

.r-topic-card__text {
  width: 100%;
  margin-top: 10px; /* Figma SP: 写真下端 222 → 本文 232 */
  font-size: 14px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .r-topic-card__text {
    margin-top: 17px; /* Figma: 写真下端 783 → 本文 800 */
    font-size: 16px;
    line-height: 26px;
  }
}

/* ---------- Members（Figma: 440:2299） ----------
   高さ 1079、見出し x=70 上 51、リード x=76 上 205、
   メイン写真 480×580 x=72 上 379、番号 01 150px（中心 x=482 上 330）、
   縦線 4×74 x=594、肩書 20px / 氏名 30px（x=619）、紹介文 478 幅 x=594 上 473、
   矢印 40px x=1263 / 1322 上 520、サムネ 244×288 x=580/852/1124 上 671、番号 80px、下 120
   ブレイクポイント: 〜767 縦積み（SP）/ 768〜 Figma のレイアウトを維持（1300 までは幅に比例して縮小）
   ※ 768〜1299 の中間レイアウトは廃止。内容幅 1300 を基準に % / vw で比例させる */
.r-top-members {
  overflow: hidden;
  padding-block: 51px 62px; /* Figma SP: 高さ 942、Members 上 51、ドット下 62 */
  background: linear-gradient(180deg, rgba(239, 237, 231, 0.44) 0%, rgba(255, 255, 255, 0.44) 100%);
  color: #222;
  font-family: var(--r-ff-base);
}
@media (min-width: 768px) {
  .r-top-members {
    padding-block: 51px 120px;
  }
}

.r-top-members__inner {
  width: 100%;
  max-width: calc(1300px + var(--r-side-pad) * 2); /* 1440幅で左端 70px */
  margin-inline: auto;
  padding-inline: var(--r-side-pad);
}

.r-top-members__lead {
  margin-top: 24px; /* Figma SP: ラベル下端 115 → リード 139 */
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #000;
}
@media (min-width: 768px) {
  .r-top-members__lead {
    max-width: 67.85%; /* Figma: 882 / 1300 */
    margin-top: 23px; /* Figma: リード上端 205 */
    margin-left: 6px;
    font-size: clamp(14px, 1.25vw, 18px);
    font-weight: 500;
    line-height: 1.72; /* Figma: 31 / 18 */
    color: #222;
  }
}

/* ===== メイン ===== */
.r-top-members__main {
  position: relative;
  margin-top: 42px; /* Figma SP: リード下端 259 → 番号 301 */
}
@media (min-width: 768px) {
  .r-top-members__main {
    margin-top: clamp(34px, 4.375vw, 63px); /* Figma: リード下端 267 → 番号ボックス上端 330 */
    margin-left: 2px; /* 写真 x=72 */
  }
}
.r-top-members__slides {
  margin: 0;
  padding: 0;
  list-style: none;
}

.r-member {
  --_photo-w: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px; /* Figma SP: 写真下端 562 → 赤バー 571 */
  padding-top: 21px; /* Figma SP: 番号 301 → 写真 322 */
  height: auto;
}
@media (min-width: 768px) {
  .r-member {
    --_photo-w: min(480px, 36.923%); /* Figma: 480 / 1300 */
    flex-direction: row;
    align-items: flex-start;
    gap: 3.231%; /* Figma: 写真右端 552 → 縦線 594（42 / 1300） */
    padding-top: clamp(26px, 3.4vw, 49px); /* Figma: 番号 330 → 写真 379 */
  }
}

/* 大番号（アウトライン文字）: 写真の右上に重ねる */
.r-member__num,
.r-member-thumb__num {
  font-family: var(--r-ff-en);
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1px var(--r-color-sub);
  line-height: 1;
  pointer-events: none;
}
.r-member__num {
  position: absolute;
  top: 0;
  right: 0; /* Figma SP: 右端を写真右端に揃える */
  z-index: 2;
  font-size: 63px;
  line-height: 46px;
}
@media (min-width: 768px) {
  .r-member__num {
    right: auto;
    /* Figma: 番号左端 395 = 写真右端 552 - 157（157 / 480 = 32.7%） */
    left: calc(var(--_photo-w) * 0.673);
    font-size: clamp(70px, 10.4vw, 150px);
    line-height: 0.733; /* Figma: 110 / 150 */
    transform: translateY(0.133em); /* lh のボックス内でグリフを下げる（20 / 150） */
  }
}

.r-member__photo {
  position: relative;
  flex-shrink: 0;
  width: var(--_photo-w);
  max-width: 480px;
  aspect-ratio: 280 / 240; /* Figma SP: 280×240 */
  margin: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .r-member__photo {
    aspect-ratio: 480 / 580;
  }
}
.r-member__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}
.r-member__photo img:not(.r-member__view) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* VIEW + バッジ（modal-view-icon.svg 95×91。Topics カードで使用） */
.r-member__view {
  position: absolute;
  right: 12px;
  bottom: 11px;
  display: block;
  width: 55px;
  height: auto;
  opacity: 0.8;
  transition: opacity 0.3s;
  pointer-events: none;
}
/* カード全体（写真・テキストどこでも）のホバーで濃く */
.r-topic-card:hover .r-member__view,
.r-topic-card__open:hover .r-member__view {
  opacity: 1;
}
@media (min-width: 768px) {
  .r-member__view {
    right: 10px;
    bottom: 10px;
    width: 95px;
  }
}

.r-member__info {
  flex: 1 1 auto;
  min-width: 0;
}
@media (min-width: 768px) {
  .r-member__info {
    /* Figma 幅 478 を上限に、1300 未満では残り幅いっぱいまで広げる
       （紹介文の行数を抑え、右下のサムネと衝突させないため） */
    max-width: 478px;
  }
}
.r-member__position,
.r-member__name {
  position: relative;
  padding-left: 12px; /* Figma SP: 縦線 x=20 → テキスト 32 */
  font-weight: 700;
  line-height: 18px;
}
.r-member__position {
  padding-top: 2px;
  font-size: 15px;
  letter-spacing: 1.5px;
}
.r-member__name {
  margin-top: 7px;
  font-size: 20px;
  letter-spacing: 2px;
}
.r-member__position::before {
  /* 赤い縦線（SP 2×50 / PC 4×74。肩書〜氏名にまたがる） */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 50px;
  background: #800000;
}
@media (min-width: 768px) {
  .r-member__position,
  .r-member__name {
    padding-left: clamp(16px, 1.736vw, 25px); /* Figma: 縦線 x=594 → テキスト 619 */
  }
  .r-member__position {
    font-size: clamp(15px, 1.389vw, 20px);
    line-height: 1.5; /* Figma: 20px / lh30 */
    letter-spacing: 0.2em;
  }
  .r-member__name {
    margin-top: 5px;
    font-size: clamp(21px, 2.083vw, 30px);
    line-height: 1; /* Figma: 30px / lh30 */
    letter-spacing: 0.1em;
  }
  .r-member__position::before {
    width: 4px;
    height: clamp(50px, 5.139vw, 74px);
  }
}
.r-member__text {
  margin-top: 15px; /* Figma SP: 氏名下端 616 → 紹介文 631 */
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: #6b645c;
}
@media (min-width: 768px) {
  .r-member__text {
    margin-top: clamp(14px, 1.875vw, 27px); /* Figma: 氏名下端 446 → 紹介文 473 */
    font-size: clamp(12px, 1.25vw, 18px);
    line-height: 1.7; /* Figma: 31 / 18 */
  }
}

/* ===== 矢印 ===== */
.r-top-members__nav {
  position: relative;
  z-index: 3; /* Swiper 本体（z-index:1）より前面に。これがないとスライドに覆われてクリックできない */
  display: none; /* SP は矢印なし（ドットで送る） */
  justify-content: flex-end;
  gap: 19px; /* Figma: 1263 → 1322（40 幅） */
  margin-top: 16px;
}
@media (min-width: 768px) {
  .r-top-members__nav {
    position: absolute;
    /* 1100 未満では紹介文が右端まで伸びるので、番号（01）の行に逃がす */
    top: 0;
    right: 0.6%; /* 1440幅: 右端 1362 */
    display: flex;
    margin: 0;
  }
}
@media (min-width: 1100px) {
  .r-top-members__nav {
    top: clamp(132px, 13.194vw, 190px); /* Figma: 520 - 330 */
  }
}
.r-top-members__dots {
  position: static;
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 20px; /* Figma SP: サムネ下端 854 → ドット 874 */
}
.r-top-members__dots .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0;
  background: #c8c8c8;
  opacity: 1;
}
.r-top-members__dots .swiper-pagination-bullet-active {
  background: var(--r-color-sub);
}
@media (min-width: 768px) {
  .r-top-members__dots {
    display: none;
  }
}
.r-top-members__prev,
.r-top-members__next {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: no-repeat center / contain;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.r-top-members__prev {
  background-image: url("../img/slider-prev.svg");
}
.r-top-members__next {
  background-image: url("../img/slider-next.svg");
}
.r-top-members__prev:hover,
.r-top-members__next:hover {
  opacity: 1;
}

/* ===== サムネ（現在の次の3名） ===== */
.r-top-members__thumbs {
  --_gap: 10px;
  position: relative;
  z-index: 2; /* Swiper 本体（z-index:1）より前面に。スライドに覆われてクリックできなくなるのを防ぐ */
  display: flex;
  gap: var(--_gap);
  margin: 25px 0 0; /* Figma SP: 紹介文下端 727 → サムネ 752 */
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .r-top-members__thumbs {
    --_gap: 3.553%; /* Figma: 580 → 852（28 / 788） */
    justify-content: flex-end;
    width: 60.615%; /* Figma: 244×3 + 28×2 = 788 / 1300 */
    margin-top: -22.154%; /* サムネ上端 671 をメイン写真下端 959 に揃える（288 / 1300） */
    margin-left: auto;
    padding-right: 0.154%; /* Figma: サムネ x=580 / 852 / 1124 */
    pointer-events: none;
  }
  .r-member-thumb {
    pointer-events: auto;
  }
}
.r-member-thumb {
  width: min(244px, calc((100% - var(--_gap) * 2) / 3)); /* 3列で収まる幅（最大 244） */
  flex-shrink: 0;
}
.r-member-thumb.is-current {
  display: none;
}
.r-member-thumb__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.r-member-thumb__num {
  position: absolute;
  top: -34px;
  right: 4px;
  z-index: 2;
  display: none; /* SP は番号なし */
  font-size: 40px;
}
@media (min-width: 768px) {
  .r-member-thumb__num {
    display: block;
    top: -0.7em; /* Figma: 番号ボックス 600（lh 内グリフ）→ サムネ 671 に一部重なる */
    right: 12%;
    font-size: clamp(40px, 5.556vw, 80px);
    line-height: 1.375; /* Figma: 110 / 80 */
  }
}
.r-member-thumb__photo {
  display: block;
  width: 100%;
  aspect-ratio: 86.7 / 102.3; /* Figma SP（PC 244/288 とほぼ同比率） */
  background: #ebefe7;
  overflow: hidden;
}
.r-member-thumb__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* モーダル共通のフェードイン */
@keyframes r-member-modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* モーダル表示中は背面をスクロールさせない */
body.is-modal-open {
  overflow: hidden;
}

/* ---------- Topics 画像拡大モーダル（Figma: 500:4185 / 500:4188） ---------- */
.r-topic-card__photo {
  position: relative;
}
.r-topic-card__open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.r-topic-card__open img:not(.r-member__view) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.r-topic-modal {
  width: min(975px, calc(100% - 60px)); /* はみ出す閉じるボタン分の余白を確保 */
  max-width: none;
  max-height: calc(100% - 60px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.r-topic-modal::backdrop {
  background: rgba(34, 34, 34, 0.9); /* Figma: #222 の全面オーバーレイ */
}
.r-topic-modal[open] {
  animation: r-member-modal-in 0.25s ease-out;
}
/* 閉じる（赤い菱形 + ×）Figma: 55×56。
   1023px 以下は箱が画面いっぱいになるため内側に、1024px 以上は箱の外（右上）に置く */
.r-topic-modal__close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 44px;
  height: 45px;
  padding: 0;
  border: 0;
  background: var(--r-color-sub);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  cursor: pointer;
}
@media (min-width: 1024px) {
  .r-topic-modal__close {
    top: -18px;
    right: -14px;
    width: 55px;
    height: 56px;
  }
}
.r-topic-modal__close::before,
.r-topic-modal__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 2px;
  background: var(--r-color-white);
}
.r-topic-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.r-topic-modal__close::after {
  transform: translate(-50%, -50%) rotate(135deg);
}

.r-topic-modal__box {
  position: relative;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  background: var(--r-color-white);
  line-height: 0;
}
.r-topic-modal__box img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 60px);
  object-fit: contain;
}