/* =========================================================
   Renewal: base
   - 全ページで読み込む（変数・共通コンポーネント・新フッター）
   - 既存 assets/css/style.css との衝突を避けるため、
     リニューアル分のクラスはすべて「r-」接頭辞で命名する
   ========================================================= */

:root {
  /* color（既存 _variables.scss の値をベースに。デザインに合わせて更新） */
  --r-color-text: #313131;
  --r-color-main: #FD7A23;
  --r-color-sub: #3A0000;
  --r-color-bg: #E8EFF2;
  --r-color-white: #fff;

  /* font */
  --r-ff-base: "Noto Sans JP", sans-serif;
  --r-ff-serif: "Noto Serif JP", serif;
  --r-ff-en: "Oswald", sans-serif;

  /* layout */
  --r-inner: 1200px;
  --r-side-pad: 20px;
}

@media (min-width: 768px) {
  :root {
    --r-side-pad: 40px;
  }
}

/* ---------- layout ---------- */
.r-inner {
  width: 100%;
  max-width: calc(var(--r-inner) + var(--r-side-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--r-side-pad);
}

/* ---------- utility ---------- */
/* SP でだけ効く改行 */
.r-br-sp {
  display: none;
}
@media (max-width: 767px) {
  .r-br-sp {
    display: inline;
  }
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 検索キーワードのハイライト（色は仮。デザイナー確認事項 #4） */
.r-highlight {
  background: #ffe9a8;
  color: inherit;
  padding: 0 0.1em;
}

/* ---------- page title（下層ページ共通：KNOWLEDGE / ABOUT / SERVICE） ----------
   Figma: 521:2766  1440×498、内容を上下中央配置 */
.r-page-title {
  --_pt-pad: 64px;
  padding-block: var(--_pt-pad);
  color: var(--r-color-sub);
  font-family: var(--r-ff-base);
  font-weight: 500;
  text-align: center;
}
@media (min-width: 768px) {
  .r-page-title {
    --_pt-pad: 134px;
  }
}

.r-page-title__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
@media (min-width: 768px) {
  .r-page-title__inner {
    gap: 27px; /* Figma 672:9533: 和文下端 352 → リード 379 */
  }
}

.r-page-title__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: normal;
}
.r-page-title__en {
  font-size: 32px;
  font-weight: 500;
}
.r-page-title__ja {
  font-size: 16px;
}
@media (min-width: 768px) {
  /* Figma 672:9533（1440px 時 EN 70 / 和文 30）。狭い画面では画面幅に比例して縮める */
  .r-page-title__head {
    gap: 0;
  }
  .r-page-title__en {
    font-size: clamp(46px, 4.9vw, 70px);
  }
  .r-page-title__ja {
    font-size: clamp(20px, 2.1vw, 30px);
  }
}

.r-page-title__lead {
  font-size: 14px;
  line-height: 2;
}
@media (min-width: 768px) {
  .r-page-title__lead {
    font-size: 16px;
    line-height: 30px;
  }
}
/* SP では改行位置をブラウザに任せる */
@media (max-width: 767px) {
  .r-page-title__lead br {
    display: none;
  }
}

/* ---------- breadcrumb（Figma: 528:2775） ----------
   上下 10px、16px Medium #222、区切り「＞」、先頭に家アイコン 16×16 */
.r-breadcrumb {
  padding-block: 10px;
  font-family: var(--r-ff-base);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: #222;
}
@media (min-width: 768px) {
  .r-breadcrumb {
    font-size: 16px;
  }
  /* Figma は左右 167px（1440幅 → 内容幅 1106px）。r-inner の max-width を外して中央 1106px に揃える */
  .r-breadcrumb .r-inner {
    max-width: none;
    padding-inline: max(var(--r-side-pad), calc((100% - 1106px) / 2));
  }
}

.r-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.r-breadcrumb__list::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: url("../img/icon-breadcrumb-home.svg") no-repeat center / contain;
}
.r-breadcrumb__list li {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.r-breadcrumb__list li + li::before {
  content: "＞";
}
.r-breadcrumb__list a {
  color: inherit;
  text-decoration: none;
}
.r-breadcrumb__list a:hover {
  text-decoration: underline;
}

/* ---------- section head（Figma: 501:4206 ほか） ----------
   ◆(20px #800000) + ラベル 18px bold #800000 / 英字タイトル 65px bold #222 */
.r-sec-head {
  --_accent: #800000;
  display: flex;
  flex-direction: column-reverse; /* タイトルが上、ラベルが下（全幅共通） */
  gap: 0;
  font-family: var(--r-ff-base);
  color: #222;
}
.r-sec-head__label {
  position: relative;
  padding-left: 15px; /* ◆12 + 3 */
  margin-top: -6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 36px;
  color: var(--r-color-sub);
}
.r-sec-head__label::before {
  /* ◆（headinng-symbol.svg 20×21 を mask で描画。色は文字色に追従） */
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 12.6px;
  background-color: currentColor;
  -webkit-mask: url("../img/headinng-symbol.svg") no-repeat center / contain;
  mask: url("../img/headinng-symbol.svg") no-repeat center / contain;
}
.r-sec-head__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
}
@media (min-width: 768px) {
  .r-sec-head {
    gap: 20px;
  }
  .r-sec-head__label {
    margin-top: 0;
    padding-left: 37px;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    color: var(--_accent);
  }
  .r-sec-head__label::before {
    left: 6px;
    top: 2px;
    width: 20px;
    height: 21px;
    background-color: var(--_accent);
  }
  .r-sec-head__title {
    font-size: 65px;
    line-height: 1;
  }
}

/* ラベルをタイトルの下に置くバリエーション（About Members 等: Figma 575:3819）
   マークアップ側が title → label の順なので column で固定する（表示は共通） */
.r-sec-head--label-below {
  flex-direction: column;
}

/* ---------- section head (centered / on dark)（Figma: 440:3112 ほか） ----------
   共通の .r-sec-head をベースに、中央揃え・濃色背景用の配色にする
   （タイトル 白 50% ／ ラベル・◆ 白）。knowledge の Featured と同じ組み立て
   マークアップ: <div class="r-sec-head r-sec-head-c"> ラベル → タイトル の順 */
.r-sec-head-c {
  --_title-color: rgba(255, 255, 255, 0.5);
  align-items: center;
  text-align: center;
}
.r-sec-head-c .r-sec-head__title {
  color: var(--_title-color);
}
.r-sec-head-c .r-sec-head__label {
  /* ◆ 用の padding-left の分だけ左に戻し、和文そのものを中央に揃える */
  margin-left: -15px;
  font-weight: 500; /* Figma: 和文は Medium */
  color: var(--r-color-white);
}
@media (min-width: 768px) {
  .r-sec-head-c .r-sec-head__label {
    margin-left: -37px;
  }
}
/* ◆ も白に（PC 側の既定はアクセント色） */
.r-sec-head-c .r-sec-head__label::before {
  background-color: var(--r-color-white);
}

/* ---------- button（Figma: 440:2339） ----------
   #3A0000 / 角丸 200 / padding 25 40 / 影 0 4 4 25% / 18px bold 白 lh34 / gap 10 / 矢印 26px */
.r-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px 20px;
  border-radius: 200px;
  background: var(--r-color-sub);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
  color: var(--r-color-white);
  font-family: var(--r-ff-base);
  font-size: 15px;
  font-weight: 700;
  line-height: 25.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: none;
}
/* 既存 style.css の a:hover { opacity: .8 } を打ち消す（ホバーでは矢印だけ動かす） */
.r-btn:hover {
  opacity: 1;
}
.r-btn__icon {
  flex-shrink: 0;
  width: 19.5px;
  height: 19.5px;
  background-color: currentColor; /* 文字色に追従 */
  -webkit-mask: url("../img/btn-arrow.svg") no-repeat center / contain;
  mask: url("../img/btn-arrow.svg") no-repeat center / contain;
  transition: transform 0.3s ease;
}
.r-btn:hover .r-btn__icon {
  transform: translateX(10px); /* ホバーで矢印が右へ 10px */
}
@media (min-width: 768px) {
  .r-btn {
    gap: 10px;
    padding: 25px 40px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-size: 18px;
    line-height: 34px;
  }
  .r-btn__icon {
    width: 26px;
    height: 26px;
  }
}

/* white（Figma: 440:2375）白地・文字 #3A0000（濃色背景用） */
.r-btn--white {
  background: var(--r-color-white);
  color: var(--r-color-sub);
}

/* outline（Figma: 441:3224）184×61、白地、枠 1px #3A0000、角丸 30、18px Regular #3A0000 */
.r-btn--outline {
  min-width: 152px;
  padding: 6px 22px;
  border: 1px solid var(--r-color-sub);
  background: var(--r-color-white);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  color: var(--r-color-sub);
  font-size: 15px;
  font-weight: 400;
  line-height: 36px;
}
@media (min-width: 768px) {
  .r-btn--outline {
    min-width: 184px;
    padding: 12px 22px;
    font-size: 18px;
  }
}

/* ---------- 知見カード（Figma: Component 知見）共通 ----------
   幅 390 / サムネ比 1108:678 / スペーサー10 / タグ h20 / タイトル 20px lh30 / 本文 16px lh26
   既定: 白背景用（タグ #3A0000 地・文字 #222）
   --dark: 濃色背景用（注目の知見。タグ 白地・文字 白） */
.r-knowledge-card {
  --_card-text: #222;
  --_tag-bg: var(--r-color-sub);
  --_tag-color: var(--r-color-white);
  --_thumb-bg: #d9d9d9;
  list-style: none;
}
.r-knowledge-card--dark {
  --_card-text: var(--r-color-white);
  --_tag-bg: var(--r-color-white);
  --_tag-color: #ef6268;
  --_thumb-bg: var(--r-color-white);
}

.r-knowledge-card__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: var(--_card-text);
  text-decoration: none;
  transition: opacity 0.3s;
}
.r-knowledge-card__link:hover {
  opacity: 0.8;
}
.r-knowledge-card__thumb {
  width: 100%;
  aspect-ratio: 1108 / 678;
  margin-bottom: 10px; /* Figma のスペーサー 10px */
  background: var(--_thumb-bg);
  overflow: hidden;
}
.r-knowledge-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.r-knowledge-card__cat {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding-inline: 10px;
  background: var(--_tag-bg);
  color: var(--_tag-color);
  font-family: var(--r-ff-base);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}
.r-knowledge-card__title {
  width: 100%;
  font-family: var(--r-ff-base);
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.r-knowledge-card__text {
  width: 100%;
  font-family: var(--r-ff-base);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
@media (min-width: 768px) {
  .r-knowledge-card__title {
    font-size: 20px;
  }
  .r-knowledge-card__text {
    font-size: 16px;
    line-height: 26px;
    -webkit-line-clamp: 2;
  }
}

/* ---------- footer（全ページ共通・刷新。Figma: 575:2922 / 616:3392） ----------
   CTA 720×347 ×2、下段 #3A0000（ロゴ x=162 上 441 / 住所 上 463 / メニュー x=981・1198）、
   最下部にコピーライト（帯 64px） */
.r-footer {
  font-family: var(--r-ff-base);
  color: var(--r-color-white);
}

/* CTA */
.r-footer__cta {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .r-footer__cta {
    grid-template-columns: 1fr 1fr;
  }
}
.r-footer-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 320 / 229; /* Figma SP */
  min-height: 0;
  overflow: hidden;
  color: var(--r-color-white);
  text-decoration: none;
}
@media (min-width: 768px) {
  .r-footer-cta {
    aspect-ratio: 720 / 347;
    min-height: 0;
  }
}
.r-footer-cta__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.r-footer-cta__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.r-footer-cta::after {
  /* 暗いオーバーレイ（Figma: #222 45% / 90%） */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(34, 34, 34, 0.45);
}
.r-footer-cta--contact::after {
  background: rgba(34, 34, 34, 0.75);
}
.r-footer-cta__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px;
  text-align: center;
}
.r-footer-cta__en {
  font-size: 24px; /* Figma SP */
  font-weight: 700;
  line-height: 1.2;
}
.r-footer-cta__ja {
  margin-top: 12px; /* Figma SP: EN 57.5 → JA 95 */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .r-footer-cta__en {
    font-size: clamp(28px, 3.1vw, 44px);
    line-height: 34px;
  }
  .r-footer-cta__ja {
    margin-top: 22px; /* Figma: DOWNLOAD 上 34 → 資料ダウンロード 60 */
    font-size: clamp(16px, 1.4vw, 20px);
  }
}
/* 枠線ボタン（Figma: 白 3px・角丸 46） */
.r-footer-cta__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 280px; /* Figma SP: 280×64 */
  max-width: 100%;
  height: 64px;
  margin-top: 18px; /* Figma SP: JA 95 → ボタン 125 */
  padding: 0 24px;
  border: 3px solid var(--r-color-white);
  border-radius: 46px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  transition: background-color 0.3s, color 0.3s;
}
/* SP は矢印をボタン右端に置く（Figma SP: x=258） */
.r-footer-cta__btn-pc {
  display: none;
}
.r-footer-cta__btn-sp {
  display: inline;
}
@media (min-width: 768px) {
  .r-footer-cta__btn {
    gap: clamp(20px, 2.8vw, 40px);
    width: auto;
    min-width: clamp(230px, 22vw, 320px);
    height: auto;
    margin-top: clamp(16px, 2vw, 29px); /* Figma: ボタン上端 93 */
    padding: clamp(10px, 1.1vw, 16px) clamp(20px, 2.2vw, 32px);
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 34px;
  }
  .r-footer-cta__btn-pc {
    display: inline;
  }
  .r-footer-cta__btn-sp {
    display: none;
  }
}
.r-footer-cta:hover .r-footer-cta__btn {
  background: var(--r-color-white);
  color: var(--r-color-sub);
}
.r-footer-cta__icon {
  position: absolute;
  right: 22px; /* Figma SP: 矢印 x=258（ボタン右端 300 - 20 - 22） */
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("../img/btn-arrow.svg") no-repeat center / contain;
  mask: url("../img/btn-arrow.svg") no-repeat center / contain;
  transition: transform 0.3s;
}
.r-footer-cta:hover .r-footer-cta__icon {
  transform: translateX(6px);
}

/* 情報エリア */
.r-footer__info {
  padding-block: 54px 24px; /* Figma SP: ロゴ上 54 */
  background: var(--r-color-sub);
}
@media (min-width: 768px) {
  .r-footer__info {
    padding-block: clamp(56px, 6.5vw, 94px) clamp(40px, 5vw, 72px); /* Figma: ロゴ上 94 */
  }
}
.r-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center; /* SP: ロゴ・住所は中央 */
  gap: 64px;
  width: 100%;
  max-width: calc(1116px + var(--r-side-pad) * 2); /* 1440幅で左端 162px */
  margin-inline: auto;
  padding-inline: var(--r-side-pad);
}
@media (min-width: 768px) {
  .r-footer__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }
}
.r-footer__logo {
  display: inline-block;
  transition: opacity 0.3s;
}
.r-footer__logo:hover {
  opacity: 0.8;
}
.r-footer__brand {
  text-align: center;
}
@media (min-width: 768px) {
  .r-footer__brand {
    text-align: left;
  }
}
.r-footer__logo img {
  display: block;
  width: 216px; /* Figma SP */
  height: auto;
}
@media (min-width: 768px) {
  .r-footer__logo img {
    width: clamp(200px, 19.5vw, 280px); /* Figma: ロゴ 280 幅相当 */
  }
}
.r-footer__address {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
}
@media (min-width: 768px) {
  .r-footer__address {
    margin-top: clamp(8px, 1vw, 14px);
    font-size: clamp(14px, 1.15vw, 16px);
    font-weight: 700;
    line-height: 34px;
  }
}

/* メニュー（2列） */
.r-footer__menu {
  /* 左列 5 / 右列 6 の不揃いな 2 列にするため、セルは明示的に配置する */
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: repeat(6, auto);
  justify-content: start;
  gap: 10px 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 左列: ホーム / Third Baseについて / サービス / 知見 / 支援実績 */
.r-footer__menu > li:nth-child(1) { grid-area: 1 / 1; }
.r-footer__menu > li:nth-child(2) { grid-area: 2 / 1; }
.r-footer__menu > li:nth-child(3) { grid-area: 3 / 1; }
.r-footer__menu > li:nth-child(4) { grid-area: 4 / 1; }
.r-footer__menu > li:nth-child(5) { grid-area: 5 / 1; }
/* 右列: お知らせ / 会社概要 / お問い合わせ / 採用情報 / プライバシーポリシー / サイトポリシー */
.r-footer__menu > li:nth-child(6)  { grid-area: 1 / 2; }
.r-footer__menu > li:nth-child(7)  { grid-area: 2 / 2; }
.r-footer__menu > li:nth-child(8)  { grid-area: 3 / 2; }
.r-footer__menu > li:nth-child(9)  { grid-area: 4 / 2; }
.r-footer__menu > li:nth-child(10) { grid-area: 5 / 2; }
.r-footer__menu > li:nth-child(11) { grid-area: 6 / 2; }
.r-footer__menu > li {
  width: 141px;
}
@media (min-width: 768px) {
  .r-footer__menu {
    justify-content: normal;
    width: auto;
    gap: clamp(14px, 1.5vw, 22px) clamp(40px, 15vw, 217px);
  }
  .r-footer__menu > li {
    width: auto;
  }
}
.r-footer__menu a {
  color: var(--r-color-white);
  font-size: 13px; /* Figma SP */
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  transition: opacity 0.3s;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .r-footer__menu a {
    font-size: clamp(15px, 1.25vw, 18px);
  }
}
.r-footer__menu a:hover {
  opacity: 0.7;
}

/* コピーライト */
.r-footer__copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  background: var(--r-color-sub);
  font-size: 10px; /* Figma SP */
  font-weight: 700;
  line-height: 34px;
}
@media (min-width: 768px) {
  .r-footer__copyright {
    height: 64px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 16px;
  }
}

/* ---------- header（既存 style.css の上書き） ---------- */
.p-header__list li a {
  font-size: 1rem;
}

/* ---------- サブページ FV の暗幕 ---------- */
/* 写真が明るくタイトルが読みにくいページ用。画像の上に薄い暗幕を重ねる */
.r-sub-fv--overlay .p-sub-fv__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(34, 34, 34, 0.15) 0%, rgba(34, 34, 34, 0.4) 100%);
  pointer-events: none;
}