@charset "UTF-8";
/* =========================================================
   DEGORAとは（PC版）
   1rem = デザイン上の10px（XD 1440px幅基準）。共通パーツは style.css
   ========================================================= */

/* ---------- KV・導入 ---------- */
.ab-hero { height: 75.6rem; }
.ab-hero__img { position: absolute; left: 0; top: 7.7rem; width: 144rem; height: 36rem; overflow: hidden; }
.ab-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.ab-hero__ttl { position: absolute; left: 0; top: 23.92rem; width: 144rem; text-align: center; font-size: 3.4rem; line-height: 3.4rem; font-weight: 700; }
.ab-hero__txt { position: absolute; left: 0; width: 144rem; text-align: center; font-size: 2.4rem; line-height: 3.5rem; font-weight: 400; }
.ab-hero__txt--1 { top: 48.5rem; }
.ab-hero__txt--2 { top: 57.2rem; font-weight: 700; }

/* ---------- 選ばれる理由 ---------- */
.ab-reason { height: 207.4rem; }
.ab-reason__bg { position: absolute; inset: 0; background: #f5f5f5; clip-path: polygon(0% 0%, 100% 7.14%, 100% 100%, 0% 100%); }
.ab-reason__island { position: absolute; left: 0; top: 149.8rem; width: 144rem; height: 57.6rem; overflow: hidden; }
.ab-reason__island img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ab-reason__v { position: absolute; left: 118.3rem; top: 0; width: 8.2rem; height: 43.9rem; z-index: 2; }
.ab-reason__v img { width: 100%; height: 100%; }

.reason { position: absolute; left: 0; width: 144rem; }
.reason--1 { top: 14.5rem; }
.reason--2 { top: 54.8rem; }
.reason--3 { top: 95rem; }
.reason--4 { top: 131.7rem; }
.reason__icon { position: absolute; left: 17.6rem; top: 0; width: 13rem; height: 9.65rem; }
.reason__icon img { width: 100%; height: 100%; }
.reason__label { position: absolute; left: 1.5rem; top: -.885rem; font-size: 1.8rem; line-height: 1.8rem; font-weight: 700; white-space: nowrap; z-index: 1; }
.reason__body { position: absolute; left: 33.1rem; top: 1.7rem; }
.reason__bar {
  display: inline-block; height: 3.8rem; padding: 0 .9rem;
  background: var(--ink); color: var(--white);
  font-size: 2.4rem; line-height: 3.8rem; font-weight: 700; white-space: nowrap;
}
.reason__ttl { margin-top: 2.02rem; font-size: 3.4rem; line-height: 3.4rem; font-weight: 700; }
.reason__txt { font-size: 2.4rem; line-height: 3.5rem; font-weight: 400; white-space: nowrap; }
.reason__ttl + .reason__txt { margin-top: 3.08rem; }
.reason__txt + .reason__txt { margin-top: 1.2rem; }

/* ---------- 根拠（お客様の声・実績データ） ---------- */
.ab-proof { height: 216.3rem; z-index: 1; background: var(--white); }
.ab-proof__v { position: absolute; left: 0; top: 0; }
.ab-proof__col { position: absolute; top: 15rem; overflow: hidden; }
.ab-proof__col img { position: absolute; left: 0; width: 8.3rem; height: 57.3rem; }
.ab-proof__col--1 { left: 26.8rem; width: 8.4rem; height: 26.4rem; }
.ab-proof__col--1 img { top: .3rem; }
.ab-proof__col--2 { left: 17.6rem; width: 8.3rem; height: 31.3rem; }
.ab-proof__col--2 img { top: -26.4rem; }

.ab-head { position: absolute; display: flex; align-items: center; gap: 1.5rem; font-size: 3.6rem; line-height: 4.8rem; font-weight: 700; white-space: nowrap; }
.ab-head__tag { display: block; height: 4.8rem; padding: 0 .8rem; background: var(--ink); color: var(--white); }
.ab-head--voice { left: 99.6rem; top: 20rem; }
.ab-head--data { left: 17.6rem; top: 135.7rem; }

.voice { position: absolute; }
.voice__bubble {
  position: relative; width: max-content; padding: 3.8rem 4.2rem 0;
  border-radius: 2.9rem;
  font-size: 2.4rem; line-height: 3.5rem; font-weight: 400; white-space: nowrap;
}
.voice__bubble p + p { margin-top: 1.2rem; }
.voice__bubble .voice__name { margin-top: .98rem; font-size: 2rem; text-align: right; }
.voice__person { position: absolute; z-index: 2; }
/* 右端（1265px）・左端（176px）はXDの位置に合わせ、人物は枠に約4rem重ねる（XDと同じ重なり具合） */
.voice--mh { right: 17.5rem; top: 28.2rem; }
.voice--mh .voice__bubble { height: 27.2rem; background: #e1e9db; }
.voice--mh .voice__person { right: calc(100% - 3.66rem); bottom: -1.17rem; width: 11.57rem; height: 28.37rem; }
.voice--ty { left: 17.6rem; top: 58.9rem; }
.voice--ty .voice__bubble { height: 34.2rem; background: #ecf2f8; }
.voice--ty .voice__person { left: calc(100% - 4.5rem); bottom: -.82rem; width: 10.5rem; height: 28.43rem; }
.voice--so { right: 17.5rem; top: 96.1rem; }
.voice--so .voice__bubble { height: 30.7rem; background: #fbf2de; }
.voice--so .voice__person { right: calc(100% - 4.2rem); bottom: -1.17rem; width: 14.5rem; height: 24.83rem; }
/* 入力中の「…」（JSで追加） */
.typing { position: absolute; display: flex; gap: .7rem; padding: 1.4rem 2rem; border-radius: 2.4rem; opacity: 0; z-index: 3; }
.typing i { width: 1rem; height: 1rem; border-radius: 50%; background: rgba(35, 30, 25, .45); }

.ab-chart { left: 17.6rem; top: 143.5rem; width: 109rem; height: 62.8rem; }

/* ---------- 約束 ---------- */
.ab-promise { height: 80rem; z-index: 2; border-radius: 4.1rem 4.1rem 0 0; overflow: hidden; }
.ab-promise__bg { position: absolute; left: 0; top: -4rem; width: 144rem; height: 94.2rem; }
.ab-promise__bg img { width: 100%; height: 100%; object-fit: cover; }
.ab-promise__ttl { position: absolute; left: 39.8rem; top: 10rem; width: 64.5rem; height: 9.4rem; z-index: 2; }
.ab-promise__ttl img { width: 100%; height: 100%; }
.ab-promise__box { left: 17.5rem; top: 22.2rem; width: 109rem; height: 47.8rem; }
.ab-promise__box p { position: absolute; left: 0; right: 0; text-align: center; font-weight: 700; white-space: nowrap; }
.ab-promise__t1, .ab-promise__t3 { font-size: 2.4rem; line-height: 3.8rem; }
.ab-promise__t1 { top: 4.6rem; }
.ab-promise__t2 { top: 13.6rem; font-size: 4rem; line-height: 4rem; }
.ab-promise__t3 { top: 19.6rem; }
.ab-promise__box .btn { left: 35rem; top: 37.3rem; }
.marker {
  background: linear-gradient(transparent 58%, rgba(18, 168, 157, .28) 58%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html.js .marker { background-size: 0% 100%; }
/* 行ごとに分けたマーカー（JS） */
.marker.is-split { background: none; }
.mk-line {
  background: linear-gradient(transparent 58%, rgba(18, 168, 157, .28) 58%) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- CTA ---------- */
.ab-cta { height: 36.4rem; z-index: 2; background: var(--white); }
.ab-cta .cta { left: 47rem; top: 15rem; }

/* =========================================================
   DEGORAとは（スマホ版・767px以下）
   PC版をもとに望月チームで組んだレイアウト（375px幅基準）
   ========================================================= */
@media (max-width: 767px) {
  /* ---- KV・導入 ---- */
  .ab-hero { height: auto; padding: 21.6rem 2rem 5.6rem; }
  .ab-hero__img { top: 6rem; width: 37.5rem; height: 12rem; }
  .ab-hero__img img { object-position: 18% 50%; }
  .ab-hero__ttl { top: 10.4rem; width: 37.5rem; font-size: 2.2rem; line-height: 2.2rem; }
  .reason__bar, .reason__txt, .ab-promise__box p, .voice__bubble p { text-wrap: pretty; }
  .ab-hero__txt { position: relative; top: auto; width: auto; font-size: 1.35rem; line-height: 2.4rem; }
  .ab-hero__txt--2 { margin-top: 1.4rem; font-weight: 700; }

  /* ---- 選ばれる理由 ---- */
  .ab-reason { height: auto; padding: 7.6rem 2rem 15rem; }
  .ab-reason__bg { clip-path: polygon(0% 0%, 100% 2.4%, 100% 100%, 0% 100%); }
  .ab-reason__island { top: auto; bottom: 0; width: 37.5rem; height: 20rem; }
  .ab-reason__island img { object-position: 50% 10%; }
  .ab-reason__v { left: auto; right: 2rem; top: 3.2rem; width: 3.6rem; height: 19.27rem; }
  .reason { position: relative; left: auto; width: auto; display: grid; grid-template-columns: 8.4rem 1fr; column-gap: 1.2rem; align-items: center; }
  .reason__body { display: contents; }
  .reason__icon { grid-column: 1; grid-row: 1; }
  .reason__bar { grid-column: 2; grid-row: 1; justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: 0 !important; background: none !important; }
  .reason__bar > span { display: block; padding: .3rem .8rem; background: var(--ink); color: var(--white); font-size: 1.4rem; line-height: 2rem; white-space: nowrap; }
  .reason__ttl, .reason__txt { grid-column: 1 / -1; }
  .reason__txt .line { display: inline; overflow: visible; }
  .reason__txt .line > span { display: inline; }
  .reason__txt .line.b { display: block; }
  .reason--1, .reason--2, .reason--3, .reason--4 { top: auto; }
  .reason + .reason { margin-top: 4.8rem; }
  .reason__icon { position: relative; left: auto; width: 8.4rem; height: 6.24rem; }
  .reason__label { left: .9rem; top: -.6rem; font-size: 1.1rem; line-height: 1.1rem; }
  .reason__bar { height: auto; padding: .4rem .8rem; font-size: 1.4rem; line-height: 2.1rem; white-space: normal; }
  .reason__ttl { margin-top: 1.6rem; font-size: 1.9rem; line-height: 2.8rem; }
  .reason__txt { font-size: 1.35rem; line-height: 2.4rem; white-space: normal; }
  .reason__ttl + .reason__txt { margin-top: 2rem; }
  .reason__txt + .reason__txt { margin-top: .8rem; }
  .reason--1 .reason__icon { margin-top: 0; }
  /* 1つ目は右上の縦書きを避ける */
  .reason--1 .reason__ttl, .reason--1 .reason__txt, .reason--1 .reason__bar { margin-right: 4.4rem; }
  .reason--1 .reason__txt + .reason__txt { margin-right: 0; }

  /* ---- 根拠 ---- */
  .ab-proof { height: auto; padding: 4.8rem 2rem 6rem; }
  .ab-proof__v { position: relative; height: 16rem; }
  .ab-proof__col { top: 0; }
  .ab-proof__col img { width: 3.63rem; height: 25.07rem; }
  .ab-proof__col--1 { left: 4rem; width: 3.68rem; height: 11.55rem; }
  .ab-proof__col--1 img { top: .13rem; }
  .ab-proof__col--2 { left: 0; width: 3.63rem; height: 13.7rem; }
  .ab-proof__col--2 img { top: -11.55rem; }
  .ab-head { position: relative; left: auto; top: auto; gap: 1rem; font-size: 2rem; line-height: 2.8rem; }
  .ab-head__tag { height: 2.8rem; padding: 0 .6rem; }
  .ab-head--voice { margin-top: -5.1rem; justify-content: flex-end; }
  .ab-head--data { margin-top: 4.8rem; }

  .voice { position: relative; left: auto; right: auto; top: auto; margin-top: 2rem; }
  .voice__bubble { width: auto !important; }
  .ab-head--voice + .voice { margin-top: 13.6rem; }
  .voice__bubble { position: relative; left: auto !important; top: auto !important; width: auto !important; height: auto !important; padding: 1.8rem 1.8rem 1.6rem !important; border-radius: 1.8rem; font-size: 1.3rem; line-height: 2.2rem; white-space: normal; }
  .voice__bubble br { display: none; }
  .voice__bubble p + p { margin-top: .8rem; }
  .voice__bubble .voice__name { margin-top: .8rem; font-size: 1.1rem; }
  .voice__person { top: auto !important; bottom: calc(100% - 1.6rem); }
  .voice--mh .voice__person { left: auto; right: 1.2rem; bottom: calc(100% - 1.6rem); width: 5.6rem; height: 13.73rem; }
  .voice--ty .voice__person { left: 1.2rem; right: auto; bottom: calc(100% - 1.6rem); width: 5.1rem; height: 13.81rem; }
  .voice--so .voice__person { left: auto; right: 1.2rem; bottom: calc(100% - 1.6rem); width: 7rem; height: 11.99rem; }
  .voice + .voice { margin-top: 13.6rem; }

  .ab-chart { position: relative; left: auto; top: auto; width: 33.5rem; height: auto; margin-top: 1.6rem; }

  /* ---- 約束 ---- */
  .ab-promise { height: auto; z-index: 2; padding: 5.6rem 2rem 6rem; border-radius: 2.4rem 2.4rem 0 0; }
  .ab-promise__bg { top: -4rem; width: 37.5rem; height: calc(100% + 8rem); }
  .ab-promise__bg img { object-position: 40% 50%; }
  .ab-promise__ttl { position: relative; left: auto; top: auto; width: 30rem; height: 4.37rem; margin: 0 auto; }
  .ab-promise__box { position: relative; left: auto; top: auto; width: auto; height: auto; margin-top: 2.4rem; padding: 2.4rem 1.6rem 2.8rem; border-radius: 1.6rem; }
  .ab-promise__box p { position: relative; top: auto; white-space: normal; }
  .ab-promise__t1, .ab-promise__t3 { font-size: 1.3rem; line-height: 2.3rem; }
  .ab-promise__t2 { margin-top: 1.2rem; font-size: 1.8rem; line-height: 2.8rem; }
  .ab-promise__t3 { margin-top: 1.2rem; }
  .ab-promise__box .btn { left: auto; top: auto; width: 26rem; margin-top: 2rem; }
  .marker { background-image: linear-gradient(transparent 60%, rgba(18, 168, 157, .28) 60%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

  /* ---- CTA ---- */
  .ab-cta { height: auto; padding: 5rem 0; }
  .ab-cta .cta { left: auto; top: auto; }
}

/* ---- スマホ：お客様の声は吹き出しの横に全身（案C・2026-09-25 隊長決定） ---- */
@media (max-width: 767px) {
  .voice, .ab-head--voice + .voice, .voice + .voice { display: flex; align-items: flex-end; margin-top: 2.4rem; }
  .ab-head--voice + .voice { margin-top: 2rem; }
  .voice--mh, .voice--so { flex-direction: row-reverse; }
  .voice__bubble { flex: 1; min-width: 0; }
  .voice .voice__person { position: relative; left: auto; right: auto; bottom: auto; top: auto; flex: none; margin-bottom: -.8rem; }
  .voice--ty .voice__person { margin-right: -2.6rem; }
  .voice--mh .voice__person, .voice--so .voice__person { margin-left: -2.6rem; margin-right: 0; }
  .voice--mh .voice__person { width: 6.55rem; height: 16.06rem; }
  .voice--ty .voice__person { width: 5.97rem; height: 16.16rem; }
  .voice--so .voice__person { width: 8.19rem; height: 14.03rem; }
  .voice .voice__bubble { padding-left: 2.2rem !important; padding-right: 2.2rem !important; }
}