/* =========================================================
   Renewal: service
   ========================================================= */

/* ---------- サービス一覧 イントロ（Figma: 749:10879） ----------
   PC(1440): 内容幅 1110（左右 164）
   ◆20px + ラベル 18px Bold #800000（gap 17）→ 31 → キャッチ 52px Bold #222 lh1.25
   → 28 → 説明 20px Regular #000 lh36。下に 1px のライン（Line 96） */
.r-service-intro {
  padding-block: 48px 40px;
  font-family: var(--r-ff-base);
  color: #222;
}
@media (min-width: 768px) {
  .r-service-intro {
    padding-block: 95px 51px;
  }
}

.r-service-intro__inner {
  width: 100%;
  max-width: calc(1110px + var(--r-side-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--r-side-pad);
}

.r-service-intro__label {
  position: relative;
  margin: 0;
  padding-left: 22px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #800000;
}
.r-service-intro__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 14.1px;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: url("../img/headinng-symbol.svg") no-repeat center / contain;
  mask: url("../img/headinng-symbol.svg") no-repeat center / contain;
}
@media (min-width: 768px) {
  .r-service-intro__label {
    padding-left: 37px;
    font-size: 18px;
    line-height: 18px;
  }
  .r-service-intro__label::before {
    width: 20px;
    height: 20.1px;
  }
}

.r-service-intro__catch {
  margin: 20px 0 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  color: #222;
}
@media (min-width: 768px) {
  .r-service-intro__catch {
    margin-top: 31px;
    font-size: 52px;
    line-height: 1.25;
  }
}
@media (max-width: 767px) {
  .r-service-intro__catch br {
    display: none;
  }
}

.r-service-intro__desc {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: #000;
}
@media (min-width: 768px) {
  .r-service-intro__desc {
    margin-top: 28px;
    font-size: 20px;
    line-height: 36px;
  }
}
@media (max-width: 767px) {
  .r-service-intro__desc br {
    display: none;
  }
}

/* イントロ直下の区切り線（Figma: Line 96 / 全幅 1px） */
.r-service-intro::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 40px;
  background: #d9d9d9;
}
@media (min-width: 768px) {
  .r-service-intro::after {
    margin-top: 51px;
  }
}

/* ---------- サービス 3 本（Figma: 749:10866 / 749:10871 / 749:10876） ----------
   PC(1440): 見出し（r-sec-head）→ 43 → 写真 400×400 ＋ gap 95 ＋ テキスト
   タイトル 44px Bold #3A0000 → 36 → キャッチ 28px Medium #222 lh36
   → 31 → 本文 20px Regular #000 lh36 → 31 → ボタン 184×61 */
.r-service-row {
  padding-block: 48px;
  font-family: var(--r-ff-base);
  color: #222;
}
@media (min-width: 768px) {
  .r-service-row {
    padding-block: 62px 68px;
  }
}
/* Mentoring は全幅のグレー地（Figma Rectangle 255: y1881 h762 #F4F4F4） */
.r-service-row--mentoring {
  background: #f4f4f4;
}
@media (min-width: 768px) {
  .r-service-row--mentoring {
    padding-block: 97px 90px;
  }
}

.r-service-row__inner {
  width: 100%;
  max-width: calc(1110px + var(--r-side-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--r-side-pad);
}

.r-service-row__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 28px;
}
@media (min-width: 768px) {
  .r-service-row__body {
    flex-direction: row;
    align-items: flex-start;
    gap: 95px;
    margin-top: 43px;
  }
}

.r-service-row__photo {
  width: 100%;
  max-width: 400px;
  /* SP は横長にトリミング（PC は 400×400 の正方形） */
  aspect-ratio: 560 / 380;
  border-radius: 12px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .r-service-row__photo {
    flex: 0 0 400px;
    width: 400px;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
  }
}
.r-service-row__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.r-service-row__text {
  min-width: 0;
}
@media (min-width: 768px) {
  .r-service-row__text {
    flex: 1 1 0;
  }
}

.r-service-row__title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--r-color-sub);
}
@media (min-width: 768px) {
  .r-service-row__title {
    font-size: 44px;
    line-height: normal;
  }
}
@media (max-width: 767px) {
  .r-service-row__title br {
    display: none;
  }
}

.r-service-row__catch {
  margin: 16px 0 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: #222;
}
@media (min-width: 768px) {
  .r-service-row__catch {
    margin-top: 36px;
    font-size: 28px;
    line-height: 36px;
  }
}

.r-service-row__desc {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: #000;
}
@media (min-width: 768px) {
  .r-service-row__desc {
    margin-top: 31px;
    font-size: 20px;
    line-height: 36px;
  }
}

/* button-white（Figma: 749:10646 ほか） */
.r-service-row__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 184px;
  height: 61px;
  margin-top: 24px;
  border: 1px solid var(--r-color-sub);
  border-radius: 30px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  background: var(--r-color-white);
  color: var(--r-color-sub);
  font-size: 16px;
  font-weight: 400;
  line-height: 36px;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.3s;
}
.r-service-row__more:hover {
  opacity: 0.7;
}
@media (min-width: 768px) {
  .r-service-row__more {
    margin-top: 31px;
    font-size: 18px;
  }
}

/* ---------- サービス下層（既存 p- クラスの上書き） ---------- */
/* リード文は見出しに合わせて中央揃え */
.p-service-single-content-description {
  text-align: center;
}

/* カード内の説明文（.c-description の line-height: 2 を上書き） */
.p-service-card-text-description {
  line-height: 1.5;
}

/* 番号＋見出しの行は上揃え（既存は align 未指定で中央寄りに見える） */
.p-service-card-text-title-set {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .p-service-card-text-title-set {
    margin-bottom: 16px;
  }
}

/* 番号は見出しの 1 行目に合わせる */
@media (min-width: 768px) {
  .p-service-card-number {
    font-size: 2.5rem;
    line-height: 1;
  }
}

/* カードの画像（修正依頼 S-06: 縦に引き伸ばされないよう比率を保つ） */
.p-service-card-img-area {
  overflow: hidden;
}
.p-service-card-img-area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 見出し内の括弧書きは本文より一回り小さく */
.p-service-card-title-text__note {
  display: inline-block;
  font-size: 0.875rem; /* 親 1rem に対して */
}
@media (min-width: 768px) {
  .p-service-card-title-text__note {
    font-size: 1.125rem; /* 親 1.375rem に対して */
  }
}

/* ---------- サービス下層 FV（Figma: 681:9625） ----------
   PC(1440): 左カラムのテキスト x=166 / 幅 494、見出し 30px Bold #222（字間 -1.5px）、
   リード 20px Regular、見出し→リード 28px、リード→ボタン 40px、
   ボタン 306×82・角丸 43.5・#3A0000・影 0 4 4 25%、文字 18px Bold 白（左 68）、矢印 29px
   SP は中央揃えのまま、書体・配色・ボタンの作りを PC に合わせる */
.p-service-hero__content {
  align-items: center;
  max-width: none;
  margin-inline: 0;
}
.p-service-hero__title {
  margin-bottom: 16px;
  color: #222;
  font-family: var(--r-ff-base);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.04em;
  text-align: center;
}
.p-service-hero__description {
  margin-bottom: 24px;
  color: #222;
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}

.p-service-hero__content .p-hero__sub-button {
  position: relative;
  justify-content: flex-start;
  width: 280px;
  max-width: 100%;
  height: 64px;
  padding: 0 24px 0 40px;
  border: 0;
  border-radius: 32px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  font-size: 16px;
  line-height: 1.5;
}
/* 白丸の矢印（既存 arrow.png を流用） */
.p-service-hero__content .p-hero__sub-button::after {
  content: "";
  position: absolute;
  right: 24px;
  width: 24px;
  height: 24px;
  background: url("../../img/arrow.png") no-repeat center / contain;
  transition: transform 0.3s ease;
}
.p-service-hero__content .p-hero__sub-button:hover::after {
  transform: translateX(5px);
}

@media (min-width: 768px) {
  .p-service-hero__content {
    align-items: flex-start;
    width: 50%;
    /* 1440px で左 166px。狭い画面では画面幅に比例して詰める */
    padding-inline: clamp(24px, 11.5vw, 166px) 40px;
  }
  .p-service-hero__title {
    max-width: 494px;
    margin-bottom: 28px;
    font-size: 30px;
    line-height: normal;
    letter-spacing: -1.5px;
    text-align: left;
  }
  .p-service-hero__description {
    max-width: 494px;
    /* .c-description の margin-inline:auto を打ち消す */
    margin-inline: 0;
    margin-bottom: 40px;
    font-size: 20px;
    line-height: normal;
    text-align: left;
  }

  .p-service-hero__content .p-hero__sub-button {
    margin-inline: 0;
    width: 306px;
    height: 82px;
    padding: 0 39px 0 68px;
    border-radius: 43.5px;
    font-size: 18px;
    line-height: 34px;
  }
  .p-service-hero__content .p-hero__sub-button::after {
    right: 39px;
    width: 29px;
    height: 29px;
  }
}

/* ---------- サービス下層の中見出し（Figma: 684:9646） ----------
   32px Medium #222 中央 ＋ 下に 50×4px の線（間隔 18px） */
.p-service-single-head__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
  padding-left: 0;
  border-left: 0;
  color: #222;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}
.p-service-single-head__title::after {
  content: "";
  position: static;
  display: block;
  width: 50px;
  height: 4px;
  background-color: #222;
  transform: none;
}
@media (min-width: 768px) {
  .p-service-single-head__title {
    margin-bottom: 55px;
    font-size: 32px;
  }
}

/* ---------- フェーズ見出し（Figma: 654:6115） ----------
   44px Medium #222 / lh 1（PC）。SP は寸法のみ従来どおり */
.p-features-phase-title {
  color: #222;
  font-weight: 500;
  line-height: 1;
}

/* ---------- フェーズ図（Figma: 685:9648） ----------
   PC(1440): 4 カラム × 252px、間隔 33px（内容幅 1108）
   矢印は 1・2 枚目の後ろ、ループ矢印は 3 枚目の後ろ（STEP3 → PoC） */
.p-features-image:nth-child(4)::after {
  bottom: -25px;
  width: 40px;
  height: 20px;
  background-image: url("../../img/Polygon.png");
}
.p-features-image:nth-child(3)::after {
  bottom: -34px;
  width: 50px;
  height: 50px;
  background-image: url("../../img/roop.webp");
}
.p-features-image:last-child::after {
  display: none;
}
@media (min-width: 768px) {
  .p-features-images {
    /* Figma: 内容幅 1108（l-inner の 1200 より内側） */
    max-width: 1108px;
    margin-inline: auto;
    gap: 33px;
  }
  .p-features-image {
    flex: 1 1 0;
    min-width: 0;
  }
  .p-features-image img {
    height: auto;
    object-fit: contain;
  }
  .p-features-image::after {
    left: 103%;
    text-align: center;
  }
  .p-features-image:nth-child(4)::after {
    top: 50%;
    bottom: auto;
    width: 4.375rem;
    height: 2.0625rem;
    background-image: url("../../img/Polygon.png");
  }
  .p-features-image:nth-child(3)::after {
    top: 47%;
    bottom: auto;
    left: 107%;
    width: 4.375rem;
    height: 4.375rem;
    background-image: url("../../img/roop.webp");
  }
  .p-features-image:last-child::after {
    display: none;
  }
}