@charset "UTF-8";

/* KV — Figma(1440px): 1440x486 / 背景 linear-gradient(#f1faf3 59.583%, #fff 81.285%)
   写真 361x260 + 360x260（right0・top48）/ 緑帯 500x68(68,96) + 895x67(68,180) 文字41.456px
   リード29.333px lh46（109,275）/ バッジ442(979,223) / 注記286(1108,392.7)
***************************************************************/
/* 1440px超では要素を左端基準で置くと写真(right:0)と分離して重なるため、
   TOP(.w-mv__inner)と同じく 1440px の内箱を中央に置き、その中で絶対配置する。
   グラデーションの切り替え位置(858px/1170px)も内箱基準にそろえる
   （1440px以下では % が小さいので min() でそちらが選ばれる） */
.w-kv {
  position: relative;
  height: min(486px, 33.75vw);
  background: linear-gradient(
    to right,
    var(--w-green02) min(59.583%, calc(50% + 138px)),
    #fff min(81.285%, calc(50% + 450px))
  );
  overflow: hidden;
}
.w-kv__inner {
  position: relative;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
}
/* Figma: 薄緑の幾何学パターンを 55% で重ねる */
.w-kv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/service/kv_bg.webp") no-repeat center / cover;
  opacity: 0.55;
}
.w-kv__photos {
  position: absolute;
  right: 0;
  top: min(48px, 3.333vw);
  display: flex;
}
.w-kv__photos img {
  display: block;
  width: min(361px, 25.069vw);
  height: min(260px, 18.056vw);
  object-fit: cover;
}
.w-kv__photos img:last-child {
  width: min(360px, 25vw);
}
.w-kv__text {
  position: absolute;
  left: min(68px, 4.722vw);
  top: min(96px, 6.667vw);
}
.w-kv__ttl span {
  display: block;
  width: fit-content;
  height: min(68px, 4.722vw);
  padding: 0 min(32px, 2.222vw) 0 min(37px, 2.569vw);
  background: var(--w-green);
  border-radius: 2px;
  color: #fff;
  font-size: min(41.456px, 2.879vw);
  font-weight: 500;
  line-height: min(68px, 4.722vw);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.w-kv__ttl span + span {
  margin-top: min(16px, 1.111vw);
}
.w-kv__lead {
  margin: min(28px, 1.944vw) 0 0 min(41px, 2.847vw);
  font-size: min(29.333px, 2.037vw);
  font-weight: 500;
  line-height: min(46px, 3.194vw);
  letter-spacing: 0.02em;
  color: var(--w-text);
  white-space: nowrap;
}
.w-kv__badges {
  position: absolute;
  left: min(979px, 67.986vw);
  top: min(223px, 15.486vw);
  width: min(442px, 30.694vw);
  height: auto;
  margin: 0;
}
/* 2行目以降は「※1　」分をぶら下げインデント */
.w-kv__note span {
  display: block;
  padding-left: 2.5em;
  text-indent: -2.5em;
}
.w-kv__note {
  position: absolute;
  left: min(1108px, 76.944vw);
  top: min(392.7px, 27.271vw);
  width: min(286px, 19.861vw);
  font-size: min(10px, 0.694vw);
  line-height: min(14px, 0.972vw);
  letter-spacing: 0.02em;
  color: var(--w-black);
}

/* anchor nav — Figma: 176px の白丸ボタン3つ（gap40・shadow）
   01/02/03 = Outfit 28.235px 緑 / 上段14px 緑 / 下段18px 黒
***************************************************************/
/* Figma: 円はKVに89px重ねる（y=649 / KV下端738）・下に80px */
.w-anchor {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: min(40px, 2.778vw);
  margin-top: calc(min(89px, 6.181vw) * -1);
  padding: 0 20px min(80px, 5.556vw);
  flex-wrap: wrap;
}
.w-anchor a {
  width: 176px;
  height: 176px;
  border-radius: 300px;
  background: #fff;
  box-shadow: 0 4px 2.5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
.w-anchor .num {
  font-family: "Outfit", sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--w-green);
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 12px;
}
.w-anchor .sub {
  font-size: 14px;
  font-weight: 500;
  color: var(--w-green);
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.w-anchor .ttl {
  font-size: 18px;
  font-weight: 600;
  color: var(--w-black);
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.w-anchor a::after {
  content: "";
  width: 0;
  height: 0;
  margin-top: 8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--w-green);
}

/* service section
***************************************************************/
/* Figma(1440px): contents 1088px幅 / 「01」Outfit 80px lh77.165(+0)
   見出し30px(+104) / リード25px lh40(+159) / カード見出し25px(+279) / 枠(+337) */
.w-serviceSec {
  padding: 0 0 100px;
  text-align: center;
}
.w-serviceSec--green {
  background: var(--w-green02);
}
.w-serviceSec__inner {
  max-width: 1128px;
  margin: 0 auto;
  padding: 0 20px;
}
.w-serviceSec__num {
  color: var(--w-green);
  font-family: "Outfit", sans-serif;
  font-size: 80px;
  font-weight: 500;
  line-height: 77.165px;
  letter-spacing: 0.05em;
}
.w-serviceSec__ttl {
  font-size: 30px;
  font-weight: 600;
  color: var(--w-black);
  line-height: 41px;
  letter-spacing: 0.05em;
  margin: 27px 0 14px;
}
.w-serviceSec__ttl .num-inline {
  color: var(--w-green);
  font-size: 40px;
  margin: 0 4px;
}
.w-serviceSec__lead {
  font-size: 25px;
  font-weight: 500;
  color: var(--w-black);
  line-height: 40px;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

.w-serviceCard {
  margin-top: 40px;
  text-align: left;
}
.w-serviceCard + .w-serviceCard {
  margin-top: 20px;
}
.w-serviceCard__label {
  color: var(--w-green);
  font-size: 25px;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
  padding-left: 0;
}
.w-serviceCard__box {
  background: var(--w-green02);
  border: 2px solid var(--w-green);
  border-radius: 20px;
  /* 枠線2pxを含めて内寸968pxにする（Figma: 1088 - 60*2） */
  --card-pad: 58px;
  padding: var(--card-pad);
}
.w-serviceCard__row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.w-serviceCard__text {
  flex: 1 1 484px;
  min-width: 0;
  max-width: 484px;
}
.w-serviceCard__text h3 {
  font-size: 28px;
  font-weight: 600;
  color: var(--w-text);
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}
.w-serviceCard__text p {
  font-size: 18px;
  color: var(--w-text);
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.w-serviceCard__row img {
  flex: 0 1 444px;
  width: 444px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 444 / 305;
  object-fit: cover;
  border-radius: 10px;
}
.w-serviceCard__box .w-more {
  margin-top: 40px;
}
/* Figma: 白枠は緑枠いっぱい（1084px）に広がる。バッジ262x50は白枠の24px上に重なる
   白枠内 padding 58/60（内寸968）: 見出し24px / 本文16px(+56) / 注記12px(+138) / 図解(+186) */
.w-serviceCard__badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 262px;
  max-width: 100%;
  height: 50px;
  margin: 40px auto 0;
  padding: 0;
  background: var(--w-red);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 40px;
}
.w-serviceCard__zeroyen {
  background: #fff;
  border-radius: 10px;
  padding: 60px var(--card-pad);
  margin: -26px calc(var(--card-pad) * -1) 0;
  text-align: center;
}
.w-serviceCard__zeroyen .ttl {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--w-text);
  text-align: center;
  margin-bottom: 20px;
}
.w-serviceCard__zeroyen > p {
  font-size: 16px;
  color: var(--w-text);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
}
.w-serviceCard__zeroyen .small {
  font-size: 12px;
  margin-top: 10px;
}
.w-serviceCard__zeroyen .w-flow__zero {
  margin-top: 30px;
}
.w-serviceCard__zeroyen .w-flow__zero__figure {
  font-size: min(23px, calc((100vw - 300px) / 25.73));
}
/* Figma: サービスページの円は薄ピンク（TOPは枠がピンクなので白） */
.w-serviceCard__zeroyen .w-flow__zero__circle {
  background: #fef2f6;
}
.w-serviceCard__zeroyen .emphasis {
  font-size: 24px;
  font-weight: 700;
  color: var(--w-text);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 20px;
}
.w-serviceCard__zeroyen .pink {
  color: var(--w-red);
}
/* Figma: 小見出し24px(+40) / アイコン列 870px（250px×3・gap60 / 行間40） */
.w-serviceCard__subttl {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--w-text);
  margin: 40px 0 40px;
}
.w-serviceCard__flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 250px));
  justify-content: center;
  column-gap: min(60px, 4vw);
  row-gap: 40px;
  text-align: center;
}
.w-serviceCard__flow .item img {
  width: 90px;
  height: 90px;
  object-fit: contain;
}
.w-serviceCard__flow h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--w-black);
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin: 20px 0 12px;
}
.w-serviceCard__flow p {
  font-size: 14px;
  color: var(--w-black);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
}

/* merit — 共通CSS(common.css)のスタイルを使用。緑背景なので円は白にする
***************************************************************/
.w-serviceSec--green {
  padding-top: 70px;
}
/* Figma: 緑背景の下端から「03」まで100px */
.w-serviceSec--green + .w-serviceSec {
  padding-top: 100px;
}
.w-serviceSec--green .w-merit__item__icon {
  background: #fff;
}
.w-serviceSec--green .w-merit__row:first-of-type {
  margin-top: 50px;
}
.w-serviceSec--green .w-cvBtn {
  margin: 60px 0 0;
}

/* 支店カードは common.css の共通スタイルを使用。リードとの間隔だけこのページで指定
***************************************************************/
.w-serviceSec .w-final__list {
  margin-top: 30px;
}


/* タブレット域: Figma実寸の内側余白だと収まらないので詰める */
@media all and (max-width: 1200px) {
  .w-serviceCard__box {
    --card-pad: 40px;
  }
}

@media all and (max-width: 680px) {
  /* Figma SP(390px): ページタイトル帯は無し / パンくず帯40px / KV 390x519(y100)
     写真 321x201(right0・top29) / 緑帯3本 265・315・199（x-5・38/39/39・24px）
     リード16px lh24(+261) / バッジ350(+329.66) / 注記330(+463)
     アンカー 153px円を 上1・下2 の三角配置(+29) */
  .w-pageTitle {
    display: none;
  }
  .w-kv {
    height: 519px;
    background: #fff;
  }
  /* Figma SP: 背景（白＋パターン）はバッジまでの400pxで、注記は白地 */
  .w-kv::before {
    inset: auto;
    left: 0;
    top: 0;
    width: 100%;
    height: 400px;
    background: var(--w-green02) url("../img/service/kv_bg.webp") no-repeat left top / 171.03% 100%;
    opacity: 1;
  }
  .w-kv__photos {
    top: 29px;
  }
  .w-kv__photos img {
    width: 321px;
    height: 201px;
  }
  .w-kv__photos img:last-child {
    display: none;
  }
  .w-kv__text {
    left: -5px;
    top: 111.8px;
  }
  .w-kv__ttl span {
    height: 38px;
    padding: 0 20px 0 22.5px;
    font-size: 24px;
    line-height: 38px;
  }
  .w-kv__ttl span + span {
    margin-top: 10px;
  }
  .w-kv__lead {
    margin: 12px 0 0 25px;
    font-size: 16px;
    line-height: 24px;
    white-space: normal;
  }
  .w-kv__badges {
    left: 20px;
    top: 329.66px;
    width: 350px;
  }
  .w-kv__note {
    left: 30px;
    top: 463px;
    width: 330px;
    font-size: 10px;
    line-height: 14px;
  }
  /* Figma SP: アンカーの円は薄緑（PCは白） */
  .w-anchor a {
    background: var(--w-green02);
    box-shadow: 0 3.48px 2.18px rgba(0, 0, 0, 0.1);
  }
  .w-anchor .num {
    font-size: 24px;
    line-height: 23.7px;
    margin-bottom: 12px;
  }
  .w-anchor .sub {
    font-size: 12px;
  }
  .w-anchor .ttl {
    font-size: 16px;
  }
  .w-anchor a::after {
    margin-top: 9px;
    border-left-width: 7px;
    border-right-width: 7px;
    border-top-width: 8.7px;
  }
  .w-anchor {
    display: grid;
    grid-template-columns: 153px 153px;
    justify-content: center;
    column-gap: 24px;
    row-gap: 4px;
    margin-top: 29px;
    padding: 0 20px 60px;
  }
  .w-anchor a:first-child {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .w-anchor a {
    width: 153px;
    height: 153px;
  }
  /* Figma SP: セクション左右25px / 「01」80px(+0) / 見出し20px(+88) / リード16px lh26(+138)
     カード(+220) ラベル18px lh27 / 枠 padding 30/25（内寸290）/ 見出し18px lh27(+30)
     本文16px lh24(+104) / 写真 290x199(+292) / ボタン 270x60(+511)
     ※セクション番号は 70px/lh68 に変更。80pxだと contents02 の高さが Figma SP の
       2052px より10px大きくなり、見た目もデザインより大きかったため。
       これに伴い見出し以降のオフセットは上記より10px上にずれる */
  .w-serviceSec {
    padding: 0 0 60px;
  }
  /* 緑背景セクションの上余白。PC用の指定(70px)は上の .w-serviceSec 一括指定に
     負けてSPで0になるため、SP用に再指定する */
  .w-serviceSec--green {
    padding-top: 50px;
  }
  .w-serviceSec__inner {
    padding: 0 25px;
  }
  .w-serviceSec__num {
    font-size: 70px;
    line-height: 68px;
  }
  .w-serviceSec__ttl {
    font-size: 20px;
    line-height: 30px;
    margin: 10px 0 20px;
  }
  .w-serviceSec__lead {
    font-size: 16px;
    line-height: 26px;
  }
  .w-serviceCard {
    margin-top: 30px;
  }
  .w-serviceCard + .w-serviceCard {
    margin-top: 30px;
  }
  .w-serviceCard__label {
    display: block;
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 15px;
  }
  .w-serviceCard__box {
    --card-pad: 23px;
    padding: 30px var(--card-pad);
  }
  .w-serviceCard__row {
    flex-direction: column;
    gap: 20px;
  }
  /* 縦積みでは flex-basis が高さになってしまうので解除 */
  .w-serviceCard__text {
    flex: none;
    max-width: none;
  }
  .w-serviceCard__text h3 {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .w-serviceCard__text p {
    font-size: 16px;
    line-height: 1.5;
  }
  .w-serviceCard__row img {
    flex: none;
    width: 100%;
    height: 199px;
    aspect-ratio: auto;
  }
  .w-serviceCard__box .w-more {
    width: 270px;
    margin-top: 20px;
  }
  /* Figma SP: バッジ217x41 / 白枠は緑枠いっぱい(336) padding 50/22
     見出し18px 2行 / 本文14px lh21 / 注記12px / 図解は2段 / 強調20px 3行
     小見出し18px 2行(改行固定) / アイコン列は1列250px（アイコン80px・h4 16px・本文12px） */
  .w-serviceCard__badge {
    width: 217px;
    height: 41px;
    margin-top: 20px;
    font-size: 18px;
  }
  .w-serviceCard__zeroyen {
    padding: 50px 22px;
    margin: -20px calc(var(--card-pad) * -1) 0;
  }
  .w-serviceCard__zeroyen .ttl {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .w-serviceCard__zeroyen > p {
    font-size: 14px;
    line-height: 1.5;
  }
  .w-serviceCard__zeroyen .small {
    font-size: 12px;
  }
  .w-serviceCard__zeroyen .w-flow__zero {
    margin-top: 30px;
  }
  .w-serviceCard__zeroyen .w-flow__zero__figure {
    flex-wrap: wrap;
    row-gap: 0;
    /* 1段目（円−円）でちょうど折り返す幅にする（＝白枠の内寸 100vw - 98px いっぱい） */
    width: 16.35em;
    margin: 0 auto;
    font-size: min(17.79px, calc((100vw - 98px) / 16.35));
  }
  .w-serviceCard__zeroyen .w-flow__zero__circle:last-of-type {
    margin-right: 1.865em;
  }
  .w-serviceCard__zeroyen .emphasis {
    font-size: 20px;
    margin-top: 20px;
  }
  .w-serviceCard__subttl {
    font-size: 18px;
    margin: 30px 0 30px;
  }
  .w-serviceCard__flow {
    grid-template-columns: 250px;
    row-gap: 35px;
  }
  .w-serviceCard__flow .item img {
    width: 80px;
    height: 80px;
  }
  .w-serviceCard__flow h4 {
    font-size: 16px;
    margin: 14px 0 10px;
  }
  .w-serviceCard__flow p {
    font-size: 12px;
  }
}