@charset "UTF-8";
.visually-hidden  {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section  {
  padding: 100px 24px;
  text-align: center;
}

.section-blue  {
  background: var(--pale);
}

.section-heading span  {
  display: block;
  color: #b3b4b4;
  font-family: "Momo Trust Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 16px;
}

.section-heading h2  {
  margin-top: 24px;
  color: #03b9d8;
  font-size: 34px;
  font-weight: 700;
  line-height: 34px;
}

.section-lead  {
  margin: 54px auto 64px;
  color: #000;
  font-size: 24px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -.01em;
}

.section-mark  {
  position: absolute;
  z-index: 2;
  right: 7.64%;
  top: -66px;
  width: 139px;
  height: 139px;
  opacity: .5;
  pointer-events: none;
}

/* ヒーローは overflow を付けない（iPhone の Safari では overflow-x: clip でも縦に切れ、SPで下にはみ出す丸が欠けるため）。
横にはみ出す人物と十字は、ヒーローと同じ大きさの箱（.hero-people・.hero-marks）の中で切る */
.hero  {
  position: relative;
  z-index: 1;
  height: 662px;
  color: #fff;
  background: linear-gradient(155.38deg, #1782e5 28.991%, #03b9d8 59.425%);
}

.hero-people, .hero-marks  {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-otis  {
  position: absolute;
  top: -6px;
  left: max(0px, calc(16.3889% - 171px));
  width: 342px;
  text-align: center;
  z-index: 1;
  color: #ffffff66;
  font-family: "Share Tech", sans-serif;
  font-size: 240px;
  font-weight: 400;
  line-height: 270px;
}

.hero-en  {
  position: absolute;
  z-index: 1;
  left: 5.7639%;
  top: 222px;
  color: rgba(255,255,255,.4);
  font-family: "Momo Trust Sans", sans-serif;
  font-size: 24px;
  line-height: 31px;
  letter-spacing: .12em;
}

.hero h1  {
  position: absolute;
  z-index: 5;
  left: 4.7917%;
  top: 250px;
  font-size: 95px;
  font-weight: 300;
  letter-spacing: .05em;
  line-height: 110px;
}

.hero-letter-e  {
  letter-spacing: -.01em;
  /* spanの境界に残る親の字間を相殺する */
  margin-right: -.05em;
}

.hero-letter-i  {
  letter-spacing: -.03em;
}

.hero-people img  {
  position: absolute;
  z-index: 2;
  bottom: 0;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom;
}

.hero-people .person-left  {
  left: 39.0972%;
  width: 400px;
  height: 566px;
}

.hero-people .person-center  {
  left: 54.7917%;
  width: 480px;
  height: 680px;
  z-index: 4 !important;
}

.hero-people .person-right  {
  left: 71.5278%;
  width: 400px;
  height: 566px;
  z-index: 3 !important;
}

.hero-mark  {
  position: absolute;
  width: 180px;
  height: 180px;
  opacity: 1;
}

.mark-one  {
  left: 80.8333%;
  top: 28px;
}

.mark-two  {
  left: 43.125%;
  top: 251px;
}

.mark-three  {
  left: 89.5139%;
  top: 303px;
}

.hero-points  {
  --p: 1px;
  position: absolute;
  z-index: 8;
  left: 3.8194%;
  top: 496px;
  display: flex;
  gap: calc(26 * var(--p));
  list-style: none;
}

.hero-points li  {
  position: relative;
  flex: none;
  width: calc(232 * var(--p));
  height: calc(182 * var(--p));
  border-radius: 50%;
  color: #0065d8;
  background: #ffffd6;
  box-shadow: 0 calc(14 * var(--p)) 0 #e2de05, calc(6 * var(--p)) calc(20 * var(--p)) calc(8 * var(--p)) #00000040;
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
}

.hero-point-copy  {
  position: absolute;
  white-space: nowrap;
}

.hero-point-copy > span, .hero-point-copy > strong  {
  display: block;
}

.hero-point-tax .hero-point-copy  {
  top: calc(32 * var(--p));
  left: calc(7 * var(--p));
  width: calc(218 * var(--p));
  font-size: calc(34 * var(--p));
  line-height: calc(25 * var(--p));
}

.hero-point-tax .hero-point-times  {
  line-height: calc(38 * var(--p));
  padding-top: calc(5 * var(--p));
}

.hero-point-tax .hero-point-cash  {
  line-height: calc(30 * var(--p));
  letter-spacing: -.06em;
  margin-top: calc(-3 * var(--p));
}

.hero-point-ki, .hero-point-flow  {
  letter-spacing: -.06em;
}

.hero-point-ya  {
  letter-spacing: -.12em;
}

.hero-point-tax .hero-point-flow  {
  line-height: calc(34 * var(--p));
  margin-top: calc(3 * var(--p));
}

.hero-point-solution .hero-point-copy  {
  top: calc(59 * var(--p));
  left: calc(8 * var(--p));
  width: calc(217 * var(--p));
  font-size: calc(38 * var(--p));
  line-height: calc(36 * var(--p));
}

.hero-point-solution .hero-point-copy > span:last-child  {
  font-size: calc(26 * var(--p));
  margin-top: calc(5 * var(--p));
}

.hero-point-network .hero-point-copy  {
  top: calc(41 * var(--p));
  left: calc(21 * var(--p));
  width: calc(190 * var(--p));
  font-size: calc(22 * var(--p));
  line-height: calc(27 * var(--p));
}

.hero-point-network .hero-point-copy > span:nth-child(2)  {
  margin-top: calc(-1 * var(--p));
}

.hero-point-ne  {
  letter-spacing: -.10em;
}

.hero-point-tsu  {
  letter-spacing: -.20em;
}

.hero-point-network strong  {
  font-size: calc(38 * var(--p));
  line-height: calc(45 * var(--p));
  margin-top: calc(2 * var(--p));
}

/* 丸はヒーローの外へ重ね、実績の帯は背景だけ全幅に広げる */
.hero-stats  {
  --s: calc(min(100vw, 1440px) / 1440);
  position: relative;
  z-index: 0;
  height: calc(360 * var(--s));
  background: linear-gradient(174.63deg, #1782e5 17.58%, #03b9d8 106.13%);
  container-type: inline-size;
}

.hero-stats-list  {
  --s: calc(min(100cqw, 1440px) / 1440);
  display: flex;
  justify-content: center;
  gap: calc(38 * var(--s));
  padding-top: calc(73 * var(--s));
  list-style: none;
}

.hero-stats-card  {
  position: relative;
  flex: none;
  width: calc(360 * var(--s));
  height: calc(220 * var(--s));
  border-radius: calc(20 * var(--s));
  color: #000;
  background: #fff;
  box-shadow: calc(8 * var(--s)) calc(8 * var(--s)) calc(8 * var(--s)) #00000040;
  font-weight: 700;
  text-align: center;
}

.hero-stat-copy  {
  position: absolute;
  top: calc(25 * var(--s));
  left: calc(4 * var(--s));
  width: calc(352 * var(--s));
  white-space: nowrap;
}

.hero-stat-label, .hero-stat-number, .hero-stat-detail  {
  display: block;
}

.hero-stat-label  {
  font-size: calc(28 * var(--s));
  line-height: calc(47 * var(--s));
}

.hero-stat-number  {
  color: #ff0000;
  font-size: calc(70 * var(--s));
  line-height: calc(67 * var(--s));
  letter-spacing: -.01em;
}

.hero-stat-number small  {
  font-size: calc(40 * var(--s));
  line-height: 1;
}

/* カンマの字形は原稿に合わせて縦の長さと後ろの余白を調整する */
.hero-stat-comma  {
  position: relative;
  left: -.03em;
  display: inline-block;
  margin-right: -.04em;
  line-height: 1;
  transform: translateY(.07em) scaleY(.63);
  transform-origin: 50% 75%;
}

.hero-stat-detail  {
  font-size: calc(28 * var(--s));
  line-height: calc(42 * var(--s));
}

/* Figmaの文字枠とWebフォントのベースライン差を、行ごとの位置で合わせる */
.hero-stat-total .hero-stat-copy > span, .hero-stat-total .hero-stat-number,
.hero-stat-retention .hero-stat-label, .hero-stat-retention .hero-stat-number  {
  position: absolute;
  width: 100%;
}

.hero-stat-total .hero-stat-label  {
  top: calc(-6 * var(--s));
}

.hero-stat-total .hero-stat-number  {
  top: calc(31 * var(--s));
  padding-right: calc(3 * var(--s));
}

.hero-stat-total .hero-stat-detail  {
  top: calc(105 * var(--s));
}

.hero-stat-note  {
  position: absolute;
  top: calc(181 * var(--s));
  left: calc(33 * var(--s));
  width: calc(294 * var(--s));
  font-size: calc(12 * var(--s));
  font-weight: 400;
  line-height: calc(22 * var(--s));
  letter-spacing: -.01em;
  white-space: nowrap;
}

.hero-stat-retention .hero-stat-copy  {
  top: calc(17 * var(--s));
}

.hero-stat-retention .hero-stat-label, .hero-stat-retention .hero-stat-number  {
  line-height: calc(69 * var(--s));
}

.hero-stat-retention .hero-stat-label  {
  top: calc(11 * var(--s));
}

.hero-stat-retention .hero-stat-number  {
  top: calc(61 * var(--s));
}

.hero-stat-retention .hero-stat-note  {
  letter-spacing: .02em;
}

.hero-stat-retention::after  {
  content: "";
  position: absolute;
  top: calc(149 * var(--s));
  left: calc(119 * var(--s));
  width: calc(123 * var(--s));
  height: calc(4 * var(--s));
  background: #e2de05;
}

.hero-laurel  {
  position: absolute;
  top: calc(24 * var(--s));
  left: calc(52 * var(--s));
  width: calc(56 * var(--s));
  height: calc(150 * var(--s));
}

.hero-laurel-right  {
  left: calc(251.5 * var(--s));
  transform: scaleX(-1);
}

.hero-stat-chinese .hero-stat-copy  {
  top: calc(30 * var(--s));
}

.hero-stat-chinese .hero-stat-label  {
  line-height: calc(40 * var(--s));
  transform: translateY(calc(-2 * var(--s)));
}

.hero-stat-chinese .hero-stat-detail  {
  margin-top: calc(52 * var(--s));
  color: #ff0000;
  font-size: calc(44 * var(--s));
  line-height: calc(62 * var(--s));
  transform: translateX(calc(3 * var(--s)));
}

/* 赤ベタは原稿（高さ37px）より上下に2pxずつ伸ばす（先方指示）。文字は字面が上下中央に来るよう、下の余白で持ち上げる（実測で上6.5px・下6.25px。1100px以下は別に指定） */
.hero-stat-badge  {
  position: absolute;
  top: calc(51 * var(--s));
  left: calc(123 * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(106 * var(--s));
  height: calc(41 * var(--s));
  padding-bottom: calc(2.5 * var(--s));
  border-radius: calc(5 * var(--s));
  color: #fff;
  background: #ff0000;
  font-size: calc(30 * var(--s));
  line-height: 1;
}

/* 1101px以上：左のブロック（OTIS・英字・見出し・丸）は左に、右のブロック（人物3人と十字）は並びを保ったまま右に固定する
1440pxより広いときは中身を中央の1440pxに収め、背景のグラデーションだけ広げる（--o は左右にはみ出た幅の半分）。狭いときは左右のブロックとも同じ比率で縮める（--u はデザインの1px。ヒーロー幅÷1440、最大1px） */
@media (min-width: 1101px)  {
  .hero  {
    --u: calc(min(100cqw, 1440px) / 1440);
    --o: max(0px, (100cqw - 1440px) / 2);
    container-type: inline-size;
  }
  /* 左のブロックも人物と同じく、ヒーローの左下を基準に --u で縮める（見出しが95pxになり、固定のままだと1101〜1200px台で左の人物の顔に重なるため） */
  .hero-otis  {
    top: calc(662px - 668 * var(--u));
    left: calc(65 * var(--u) + var(--o));
    width: auto;
    text-align: left;
    font-size: calc(240 * var(--u));
    line-height: calc(270 * var(--u));
  }
  .hero-en  {
    top: calc(662px - 440 * var(--u));
    left: calc(84 * var(--u) + var(--o));
    font-size: calc(24 * var(--u));
    line-height: calc(31 * var(--u));
  }
  .hero h1  {
    top: calc(662px - 412 * var(--u));
    left: calc(79 * var(--u) + var(--o));
    font-size: calc(95 * var(--u));
    line-height: calc(110 * var(--u));
  }
  .hero-points  {
    --p: var(--u);
    top: calc(662px - 166 * var(--u));
    left: calc(55 * var(--u) + var(--o));
  }
  .hero-people .person-left  {
    right: calc(477 * var(--u) + var(--o));
    left: auto;
    width: calc(400 * var(--u));
    height: calc(566 * var(--u));
  }
  .hero-people .person-center  {
    right: calc(171 * var(--u) + var(--o));
    left: auto;
    width: calc(480 * var(--u));
    height: calc(680 * var(--u));
  }
  .hero-people .person-right  {
    right: calc(10 * var(--u) + var(--o));
    left: auto;
    width: calc(400 * var(--u));
    height: calc(566 * var(--u));
  }
  /* 十字は下端（662px）からの距離で縮める。右端の十字は1440pxの枠から26pxはみ出す。切る箱はヒーロー全幅のままにして、1440pxより広いときに途中で切れないようにする（位置は --o の分ずらす） */
  .hero-mark  {
    width: calc(180 * var(--u));
    height: calc(180 * var(--u));
  }
  .mark-one  {
    top: calc(662px - 636 * var(--u));
    right: calc(142 * var(--u) + var(--o));
    left: auto;
  }
  .mark-two  {
    top: calc(662px - 511 * var(--u));
    right: calc(656 * var(--u) + var(--o));
    left: auto;
  }
  .mark-three  {
    top: calc(662px - 399 * var(--u));
    right: calc(-26 * var(--u) + var(--o));
    left: auto;
  }
}

.services  {
  min-height: 1900px;
  padding-bottom: 180px;
}

.service-list  {
  position: relative;
  left: -6px;
  display: grid;
  padding-top: 12px;
  gap: 60px;
  max-width: 1146px;
  margin: 0 auto;
  text-align: left;
}

.service-card  {
  position: relative;
  display: grid;
  grid-template-columns: 558px 1fr;
  min-height: 300px;
  border-radius: 5px;
  background: #e2f5f8;
  box-shadow: 10px 10px 0 #f5f5f5;
}

.service-card:hover  {
  background: #bcf5ff;
}

.service-tag  {
  position: absolute;
  top: -16px;
  left: -18px;
  width: 272px;
  height: 50px;
  border-radius: 5px;
  background: var(--yellow);
  font-size: 20px;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: 1px;
  text-align: center;
}

/* 吹き出しのしっぽ（右辺が垂直の直角三角形） */
.service-tag::after  {
  content: "";
  position: absolute;
  top: 100%;
  left: 206px;
  border-top: 16px solid var(--yellow);
  border-left: 22px solid transparent;
}

.service-copy  {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--copy-top, 84px) 70px 40px 76px;
  border-right: 4px solid #fff;
}

.service-copy h3  {
  margin-bottom: 24px;
  color: #03b9d8;
  font-size: 34px;
  line-height: 41px;
}

.service-copy p  {
  max-width: 401px;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -.01em;
}

.service-detail  {
  position: relative;
  display: flex;
  align-items: center;
  padding: 40px 260px 40px 60px;
}

.service-detail ul  {
  list-style: none;
  font-size: 24px;
  font-weight: 500;
  line-height: 35px;
}

.service-detail li + li  {
  margin-top: 25px;
}

.service-detail li::before  {
  content: "−";
  margin-right: 14px;
}

.service-detail li p  {
  margin: 8px 0 7px 27px;
  font-size: 18px;
  line-height: 30px;
}

.service-detail img  {
  position: absolute;
  top: 50%;
  right: calc(166px - var(--icon-w) / 2);
  width: var(--icon-w);
  height: var(--icon-h);
  transform: translateY(-50%);
  object-fit: cover;
}

/* アイコンの表示枠はFigmaのカードごとの寸法（PC / SP） */
.service-card:nth-child(1)  {
  --icon-w: 192px;
  --icon-h: 166px;
  --icon-sp-w: 175px;
  --icon-sp-h: 151px;
}

.service-card:nth-child(2)  {
  --copy-top: 80px;
  --icon-w: 169px;
  --icon-h: 146px;
  --icon-sp-w: 140px;
  --icon-sp-h: 120px;
}

.service-card:nth-child(3)  {
  --copy-top: 74px;
  --icon-w: 183px;
  --icon-h: 157px;
  --icon-sp-w: 168px;
  --icon-sp-h: 144px;
}

.service-card:nth-child(4)  {
  --copy-top: 78px;
  --icon-w: 177px;
  --icon-h: 152px;
  --icon-sp-w: 146px;
  --icon-sp-h: 125px;
}

.service-card:nth-child(n+3) .service-copy h3  {
  margin-bottom: 20px;
}

.service-card:nth-child(1) .service-detail img  {
  margin-top: 21px;
  right: 58px;
}

.about  {
  position: relative;
  min-height: 1060px;
  padding-top: 100px;
}

.about-inner  {
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  gap: 111px;
  width: calc(100% - 77px);
  max-width: 1219px;
  margin: 82px 0 0 max(0px, calc((100% - 1152px) / 2));
  text-align: left;
}

.representative  {
  position: relative;
  align-self: start;
  height: 646px;
  border-radius: 10px;
  background-image: url("../img/top/about-otsuki.webp"), linear-gradient(146.4deg, #1782e5 28.991%, #03b9d8 59.425%);
  background-position: 56% 26.33%, center;
  background-size: 160% auto, cover;
  background-repeat: no-repeat;
}

.representative figcaption  {
  position: absolute;
  right: -51px;
  bottom: 44px;
  display: grid;
  align-content: center;
  gap: 6px;
  width: 168px;
  height: 142px;
  padding: 24px 30px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 5px 6px 9px #0003;
  color: #000;
  font-size: 14px;
  line-height: 19px;
}

.representative figcaption strong  {
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
  white-space: nowrap;
}

.representative figcaption small, .representative figcaption span  {
  font-size: 14px;
  line-height: 19px;
}

.about-copy h3  {
  margin-bottom: 26px;
  font-family: "Noto Serif JP", serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 51.5px;
}

.about-copy p  {
  max-width: 555px;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 35px;
}

.about-copy ul  {
  margin-top: 51px;
  list-style: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 40px;
}

.about-copy li::before  {
  content: "−";
  margin-right: 6px;
}

.team  {
  min-height: 1078px;
  padding-bottom: 131px;
}

.member-list  {
  position: relative;
  left: -11px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 1176px;
  margin: 89px auto 0;
  text-align: left;
}

.member  {
  position: relative;
}

.member figure  {
  position: relative;
  height: 240px;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}

/* TOPではホバーで写真を変えない（スタッフ紹介ページのみ変化。依頼による） */
.member figure::before  {
  position: absolute;
  inset: 0;
  background: linear-gradient(146.4deg, #1782e5 28.991%, #03b9d8 59.425%);
  content: "";
}

.member figure img  {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member figcaption  {
  position: absolute;
  left: 16px;
  bottom: 8px;
  color: #fff;
  font-family: "Baskervville", serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 28px;
  text-shadow: 2px 2px 4px rgba(0,0,0,.5);
}

.member h3  {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
}

.member p  {
  font-size: 12px;
  line-height: 18px;
}

.team-note  {
  margin: 98px auto 84px;
  font-size: 24px;
  line-height: 54px;
}

.workflow  {
  min-height: 1170px;
  padding-bottom: 137px;
}

.step-list  {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1160px;
  margin: 128px auto 129px;
  list-style: none;
  text-align: left;
}

/* 時間軸の横線と右端の矢印（横線は矢印の腕の先の約2px手前で止める。先方の「正」の見本に合わせる） */
.step-list::before  {
  content: "";
  position: absolute;
  top: 418px;
  left: 5px;
  right: 33px;
  border-top: 1px solid #000;
}

.step-list::after  {
  content: "";
  position: absolute;
  top: 398px;
  right: 11px;
  width: 20px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40'%3E%3Cpath d='M.4.4 19.6 20 .4 39.6' fill='none' stroke='%23000'/%3E%3C/svg%3E") no-repeat;
}

.step-list li  {
  position: relative;
  min-height: 466px;
  padding: 6px 30px 0 38px;
}

.step-list li:not(:last-child)::after  {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 322px;
  border-right: 1px solid #000;
}

.step-no  {
  display: block;
  width: 220px;
  max-width: 100%;
  margin-bottom: 30px;
  color: var(--blue);
  font-family: "Oswald", sans-serif;
  font-size: 50px;
  font-weight: 300;
  line-height: 55px;
  letter-spacing: -.01em;
  text-align: center;
}

.step-list h3  {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  max-width: 100%;
  min-height: 52px;
  margin-bottom: 18px;
  padding: 8px 5px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-size: 22px;
  line-height: 28px;
  text-align: center;
}

.step-list p  {
  max-width: 220px;
  font-size: 18px;
  line-height: 24px;
}

.step-time  {
  position: absolute;
  top: 442px;
  left: 38px;
  width: 220px;
  max-width: calc(100% - 68px);
  font-size: 20px;
  line-height: 24px;
  text-align: center;
}

.step-time::before  {
  content: "";
  position: absolute;
  top: -34px;
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cyan);
}

.voices  {
  min-height: 1962px;
  padding-bottom: 111px;
}

.voice-list  {
  position: relative;
  left: -5px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 54px;
  max-width: 1200px;
  margin: 81px auto 114px;
}

.voice-card  {
  position: relative;
  min-height: 700px;
  padding: 32px 32px 30px;
  border-radius: 10px;
  background: var(--lavender);
  text-align: left;
}

.voice-photo  {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: 10px;
}

.sample-label  {
  position: absolute;
  top: 171px;
  left: calc(50% - 49px);
  z-index: 1;
  width: 103px;
  height: 23px;
  background: var(--yellow);
  color: #d91616;
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  text-align: center;
}

.voice-category  {
  position: relative;
  display: block;
  width: 200px;
  max-width: 100%;
  height: 36px;
  margin: -15px auto 0;
  border-radius: 10px;
  background: #ae81d5;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}

.voice-copy  {
  min-height: 380px;
  margin-top: 17px;
  padding: 17px 23px 16px;
  border-radius: 10px;
  background: #fff;
}

.voice-person  {
  position: relative;
  min-height: 82px;
  margin: 0 -30px;
  padding-bottom: 30px;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
}

.voice-person strong  {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.voice-person small  {
  line-height: 1;
}

.voice-copy h3  {
  min-height: 84px;
  margin: 15px 0 10px;
  color: #b156ca;
  font-size: 19px;
  font-weight: 500;
  line-height: 28px;
}

.voice-copy > p:last-child  {
  color: #000;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
}

.client-count  {
  margin-bottom: 63px;
  line-height: 54px;
  font-size: 20px;
  font-weight: 700;
}

.client-count strong  {
  color: #03b9d8;
  font-size: 54px;
  white-space: nowrap;
}

.client-count small  {
  display: block;
  margin-top: 17px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}

/* 取引先ロゴのスライダー（セクションの左右余白を打ち消して画面幅いっぱいに表示） */
.logo-slider  {
  position: relative;
  margin: 0 -24px 78px;
  overflow: hidden;
}

.logo-row + .logo-row  {
  margin-top: 24px;
}

.logo-row + .logo-row .logo-track  {
  margin-left: 62px;
}

.logo-track  {
  display: flex;
  gap: 21px;
  margin-left: 0;
  list-style: none;
  transition: transform .5s ease;
  will-change: transform;
}

.logo-track li  {
  flex: 0 0 215px;
  height: 115px;
  background: #fff;
}

.logo-track img  {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-arrow  {
  position: absolute;
  z-index: 1;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #03b9d8;
}

.logo-arrow::before  {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}

.logo-arrow:hover  {
  filter: brightness(1.08);
}

.logo-prev  {
  top: 40px;
  left: 62px;
}

.logo-prev::before  {
  transform: translate(-30%, -50%) rotate(-45deg);
}

.logo-next  {
  top: 179px;
  right: 55px;
}

.logo-next::before  {
  transform: translate(-70%, -50%) rotate(135deg);
}

.retention  {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  width: 400px;
  min-height: 230px;
  max-width: 100%;
  margin: 0 auto;
  padding: 36px 25px 25px;
  border: 2px solid #c3c3c3;
  border-radius: 20px;
  box-shadow: 6px 6px 6px #0004;
}

.retention span  {
  color: #000;
  font-size: 28px;
  font-weight: 700;
  line-height: 40px;
}

.retention strong  {
  border-bottom: 4px solid #e2de05;
  color: var(--cyan);
  font-size: 85px;
  line-height: 84px;
}

.retention strong small  {
  font-size: 54px;
}

/* 月桂樹（右側は左の素材を反転して使う） */
.retention .laurel  {
  position: absolute;
  top: 27px;
  left: 45px;
  width: 68px;
  height: 182px;
}

.retention .laurel-right  {
  right: 45px;
  left: auto;
  transform: scaleX(-1);
}

.retention-note  {
  margin-top: 27px;
  color: #000;
  font-size: 16px;
  line-height: 22px;
}

.columns  {
  min-height: 1148px;
  padding-bottom: 98px;
  background: #e2f5f8;
}

.column-list  {
  max-width: 880px;
  margin: 68px auto 0;
  list-style: none;
  text-align: left;
}

/* カテゴリー欄は先方指示で2文字分（40px）広げる。下の余白は1行分（27px）。1行の行は min-height で従来どおりの高さ */
.column-list li  {
  display: grid;
  grid-template-columns: 113px 132px minmax(0, 1fr);
  align-items: start;
  gap: 25px;
  min-height: 131px;
  padding: 76px 0 27px;
  border-bottom: 1px solid #000;
  color: #000;
  font-size: 20px;
  line-height: 27px;
}

.column-list li:first-child  {
  min-height: 71px;
  padding-top: 16px;
}

.column-list a  {
  text-decoration: none;
}

.column-list a:hover  {
  text-decoration: underline;
}

.contact  {
  min-height: 1260px;
  padding-bottom: 110px;
}

.contact-form  {
  display: grid;
  justify-items: center;
  gap: 52px;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.form-row  {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  align-items: start;
  gap: 38px;
  width: 100%;
}

.form-row label  {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 19px;
  padding-top: 7px;
  color: #b3b4b4;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
  white-space: nowrap;
}

.required, .optional  {
  display: inline-block;
  flex: 0 0 45px;
  width: 45px;
  height: 28px;
  color: #fff;
  font-size: 15px;
  line-height: 28px;
  text-align: center;
}

.required  {
  background: #ff8b8b;
}

.optional  {
  background: #62cafa;
}

.form-row input, .form-row select, .form-row textarea  {
  width: 400px;
  max-width: 100%;
  min-width: 0;
  height: 46px;
  min-height: 0;
  padding: 6px 20px;
  border: 1px solid #000;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font-size: 20px;
  line-height: 32px;
}

.form-row textarea  {
  width: 600px;
  height: 240px;
  resize: vertical;
}

.contact-form button:disabled  {
  cursor: not-allowed;
  opacity: 1;
}

.form-trap  {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.privacy-link  {
  color: var(--blue);
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
}

.office  {
  min-height: 560px;
  padding: 94px 24px 64px;
}

.office-inner  {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 532px);
  gap: 77px;
  max-width: 1064px;
  margin: 0 auto;
}

.office h2  {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: baseline;
  gap: 13px;
  margin-top: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid #879aaa;
  color: var(--cyan);
  font-size: 24px;
  line-height: 38px;
}

.office h2 span  {
  color: #b3b4b4;
  font-family: "Momo Trust Sans", sans-serif;
  font-size: 17px;
}

.office-info dl  {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 29px 15px;
  margin-top: 27px;
  color: #000;
  font-size: 16px;
  line-height: 24px;
}

.office-info dt  {
  font-weight: 400;
}

.office-access h3  {
  margin-bottom: 8px;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

.office-map  {
  display: block;
  width: 100%;
  height: 302px;
  border: 0;
  background: #d3d3d3;
}

.office-access p  {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  margin-top: 15px;
  color: #000;
  font-size: 16px;
  line-height: 27px;
}

.office-access p strong  {
  font-weight: 400;
}

.about .mark-bottom  {
  right: auto;
  left: 10.9%;
  top: auto;
  bottom: -50px;
}

.team  {
  position: relative;
}

.team .mark-bottom  {
  top: auto;
  bottom: -72px;
}

/* ページ内リンクで飛んだとき、前のセクションの飾りが見えないよう着地位置を下げる */
#team  {
  scroll-margin-top: -50px;
}

#workflow  {
  scroll-margin-top: -72px;
}

.voice-photo img  {
  position: absolute;
  top: -9.77%;
  left: -35.34%;
  width: 196.71%;
  height: 180.58%;
  max-width: none;
  object-fit: cover;
}

.voice-card-kuroshima .voice-photo img  {
  top: -18.07%;
  left: .07%;
  width: 101.26%;
  height: 189.08%;
}

.voice-card-edo .voice-photo img  {
  top: -41.63%;
  left: -84.92%;
  width: 250.03%;
  height: 222.54%;
}

/* 仮のイラスト（2026-10-28差し替え）：Figmaの画像の切り抜き（STRETCHの変換）をそのまま位置と大きさに換算 */
.voice-card-amatsuji .voice-photo img  {
  top: -16.50%;
  left: -4.26%;
  width: 108.67%;
  height: 123.48%;
}

.voice-card .voice-category  {
  margin-top: -19px;
  margin-bottom: 21px;
}

.voice-person small  {
  font-size: 14px;
}

/* 名前の下の吹き出し線（Figma：黒1px。しっぽは線の長さの44.65%の位置から、縦に13px下りて右上へ戻る三角。上は開いている） */
.voice-person  {
  --voice-line: #000;
}

.voice-person::before  {
  content: "";
  position: absolute;
  right: 30px;
  bottom: 13px;
  left: 30px;
  border-top: 1px solid var(--voice-line);
}

.voice-person::after  {
  content: "";
  position: absolute;
  left: calc(30px + (100% - 60px) * .4465 - .5px);
  bottom: 0;
  width: 12px;
  height: 14px;
  border-left: 1px solid var(--voice-line);
  background: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--voice-line) calc(50% - .5px), var(--voice-line) calc(50% + .5px), transparent calc(50% + .5px)), #fff;
}

.column-dots  {
  display: flex;
  flex-direction: column;
  width: 24px;
  height: 144px;
  margin: 66px auto 77px;
  color: #000;
  font-size: 20px;
  line-height: 24px;
}

.column-dots span  {
  display: block;
}

.form-row select  {
  -webkit-appearance: none;
  appearance: none;
  height: 44px;
  padding-right: 46px;
}

.form-select  {
  position: relative;
}

.form-select::after  {
  content: "";
  position: absolute;
  top: 11px;
  left: 606px;
  width: 15px;
  height: 15px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
  pointer-events: none;
}

.form-message + button  {
  margin-top: 20px;
}

.office-info dd:first-of-type  {
  margin-bottom: -14px;
}

@media (min-width: 1101px)  {
  .about-copy h3  {
    font-size: 40px;
    line-height: 57px;
  }
  .about-copy ul  {
    font-weight: 500;
  }
  .client-count  {
    font-size: 22px;
  }
  .client-count strong  {
    font-size: 56px;
  }
  .client-count small  {
    font-size: 16px;
  }
}

@media (max-width: 1100px)  {
  .hero h1  {
    font-size: 74.4595px;
    line-height: 87.027px;
  }
  /* タブレットの実績カードもSPと同じ240×140px。744pxの有効幅でも3枚が収まる */
  .hero-stats  {
    height: 230px;
  }
  .hero-stats-list  {
    --s: 1px;
    gap: clamp(6px, calc((100cqw - 744px) / 8 + 6px), 24px);
    padding-top: 47px;
  }
  .hero-stats-card  {
    width: 240px;
    height: 140px;
    border-radius: 20px;
    box-shadow: 6px 6px 6px #00000040;
  }
  .hero-stat-copy  {
    top: 3px;
    left: 2px;
    width: 236px;
  }
  .hero-stat-label  {
    font-size: 18px;
    line-height: 47px;
  }
  .hero-stat-number  {
    font-size: 46px;
    line-height: 46px;
  }
  .hero-stat-number small  {
    font-size: 28px;
  }
  .hero-stat-detail  {
    font-size: 18px;
    line-height: 27px;
  }
  .hero-stat-total .hero-stat-label  {
    top: 0;
  }
  .hero-stat-total .hero-stat-number  {
    top: 34px;
  }
  .hero-stat-total .hero-stat-detail  {
    top: 83px;
  }
  .hero-stat-note  {
    top: 112px;
    left: 27px;
    width: 186px;
    font-size: 8px;
    line-height: 22px;
    letter-spacing: .005em;
  }
  .hero-stat-retention .hero-stat-copy  {
    top: 16px;
    left: 70px;
    width: 100px;
  }
  .hero-stat-retention .hero-stat-label, .hero-stat-retention .hero-stat-number  {
    line-height: 44px;
  }
  .hero-stat-retention .hero-stat-label  {
    top: 1px;
  }
  .hero-stat-retention .hero-stat-number  {
    top: 33px;
  }
  .hero-stat-retention .hero-stat-note  {
    top: 110.9px;
    left: 29.5px;
    width: 178.3px;
    letter-spacing: .01em;
  }
  .hero-stat-retention::after  {
    top: 96px;
    left: 79px;
    width: 80px;
    height: 2px;
  }
  .hero-laurel  {
    top: 17.2px;
    left: 35.1px;
    width: 38.8px;
    height: 94.1px;
  }
  .hero-laurel-right  {
    left: 165px;
  }
  .hero-stat-chinese .hero-stat-copy  {
    top: 20px;
    left: 10px;
    width: 220px;
  }
  .hero-stat-chinese .hero-stat-label  {
    line-height: 26px;
    transform: translateY(3px);
  }
  .hero-stat-chinese .hero-stat-detail  {
    margin-top: 36px;
    font-size: 28px;
    line-height: 40px;
    transform: none;
  }
  /* 行の高さ20pxではiPhoneだけ文字が約1px下がった（フォントの高さ約29pxとの差が奇数で、端数の振り方がChromeと違うためと推定。Chromeで21pxにすると同じずれが再現できる）。
  差が偶数になる21pxにして、下の余白1pxで文字を持ち上げる（Chromeでは上下の空き約4.9px・4.2pxで変更前と同じ） */
  .hero-stat-badge  {
    top: 34px;
    left: 70px;
    width: 80px;
    height: 28px;
    padding-bottom: 1px;
    font-size: 20px;
    line-height: 21px;
  }
  .service-card  {
    grid-template-columns: 1fr 1fr;
  }
  .service-list, .member-list, .voice-list  {
    left: 0;
  }
  .service-copy  {
    justify-content: center;
    padding: 40px 40px 40px 45px;
  }
  .service-detail  {
    padding-right: 140px;
    padding-left: 40px;
  }
  .service-detail ul  {
    font-size: 20px;
  }
  .service-detail li p  {
    font-size: 15px;
    line-height: 26px;
  }
  .service-detail img  {
    right: 25px;
    width: calc(var(--icon-w) * .6);
    height: calc(var(--icon-h) * .6);
  }
  .service-card:nth-child(1) .service-detail img  {
    right: 25px;
    margin-top: 0;
  }
  .step-list li  {
    padding-right: 16px;
    padding-left: 16px;
  }
  .step-no, .step-list h3, .step-list p  {
    width: auto;
    max-width: none;
  }
  .step-list p  {
    font-size: 15px;
  }
  .step-time  {
    left: 16px;
    width: calc(100% - 32px);
    max-width: none;
    font-size: 16px;
  }
  .about-inner  {
    grid-template-columns: 45% minmax(0, 1fr);
    gap: 70px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .member-list, .voice-list  {
    gap: 20px;
  }
}

@media (max-width: 760px)  {
  /* 共通（SP版Figma 393幅の寸法） */
  .section  {
    padding: 48px 34px 75px;
  }
  .section-heading span  {
    font-size: 16px;
    line-height: 16px;
  }
  .section-heading h2  {
    margin-top: 8px;
    font-size: 22px;
    line-height: 34px;
  }
  .section-lead  {
    max-width: 264px;
    margin: 21px auto 49px;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
  }
  .services .section-lead  {
    margin-top: 16px;
    margin-bottom: 47px;
  }
  .section > .pill  {
    width: 260px;
    max-width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 0;
    font-size: 18px;
    font-weight: 500;
  }
  /* 393px原稿の左位置（OTIS 25px・英字40px・見出し37px）を優先し、幅に応じて中央からの距離を調整する。
  375pxまでは文字の大きさを保ち、374px以下だけ縮める。393pxより広い画面でも人物に近づかないよう拡大しない */
  /* 背景はPCと同じFigmaの塗りでも、393×662の箱に置くと向きが変わる（Figmaの行列から換算） */
  .hero  {
    --k: clamp(3.75px, 1vw, 3.93px);
    background: linear-gradient(120.78deg, #1782e5 28.99%, #03b9d8 59.43%);
  }
  .hero-otis  {
    top: 0;
    left: calc(50% - var(--k) * 43.6387);
    width: auto;
    font-size: 200px;
    line-height: 1.125;
    text-align: left;
  }
  .hero-mark  {
    width: 100px;
    height: 100px;
    opacity: .5;
  }
  .hero-en  {
    top: 189px;
    left: calc(50% - var(--k) * 39.8219);
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: .12em;
    white-space: nowrap;
  }
  .hero h1  {
    top: 223px;
    left: calc(50% - var(--k) * 40.5852);
    font-size: 52px;
    line-height: 63px;
    letter-spacing: .05em;
  }
  /* 人物3人はSPデザイン（393px）の並びのまま中央に置く（画面が広くても間隔を広げない） */
  .hero-people .person-left  {
    left: calc(50% - 226.5px);
    width: 192px;
    height: 272px;
  }
  .hero-people .person-center  {
    left: calc(50% - 117px);
    width: 231px;
    height: 327px;
  }
  .hero-people .person-right  {
    right: auto;
    left: calc(50% - 1.5px);
    width: 193px;
    height: 272px;
  }
  .mark-one  {
    top: 331px;
    right: auto;
    left: calc(50% + 80.5px);
  }
  .mark-two  {
    top: 443px;
    right: auto;
    left: calc(50% - 206.5px);
  }
  .mark-three  {
    top: 478px;
    right: auto;
    left: calc(50% + 134.5px);
  }
  .hero-points  {
    --p: 1px;
    top: 615px;
    right: 0;
    left: 0;
    justify-content: center;
    gap: 14px;
  }
  .hero-points li  {
    width: calc(108 * var(--p));
    height: calc(90 * var(--p));
    box-shadow: 0 calc(7 * var(--p)) 0 #e2de05, calc(3.6 * var(--p)) calc(10.6 * var(--p)) calc(4.8 * var(--p)) #00000040;
  }
  .hero-point-tax .hero-point-copy  {
    top: calc(15.9 * var(--p));
    left: calc(11 * var(--p));
    width: calc(84 * var(--p));
    font-size: calc(16 * var(--p));
    line-height: calc(15 * var(--p));
  }
  .hero-point-tax .hero-point-times  {
    line-height: calc(17 * var(--p));
    padding-top: calc(1 * var(--p));
  }
  .hero-point-tax .hero-point-cash  {
    line-height: calc(13 * var(--p));
    letter-spacing: -.07em;
    margin-top: calc(-2 * var(--p));
  }
  .hero-point-ki, .hero-point-flow  {
    letter-spacing: -.07em;
  }
  .hero-point-ya  {
    letter-spacing: -.10em;
  }
  .hero-point-tax .hero-point-flow  {
    line-height: calc(16 * var(--p));
    margin-top: calc(1 * var(--p));
  }
  .hero-point-solution .hero-point-copy  {
    top: calc(30.4 * var(--p));
    left: calc(4 * var(--p));
    width: calc(100 * var(--p));
    font-size: calc(18 * var(--p));
    line-height: calc(18 * var(--p));
  }
  .hero-point-solution .hero-point-copy > span:last-child  {
    font-size: calc(12 * var(--p));
    margin-top: calc(3 * var(--p));
  }
  .hero-point-network .hero-point-copy  {
    top: calc(21.3 * var(--p));
    left: calc(9.4 * var(--p));
    width: calc(88 * var(--p));
    font-size: calc(10 * var(--p));
    line-height: calc(12 * var(--p));
  }
  .hero-point-network .hero-point-copy > span:nth-child(2)  {
    margin-top: 0;
  }
  .hero-point-network strong  {
    font-size: calc(18 * var(--p));
    line-height: calc(22 * var(--p));
    margin-top: calc(1 * var(--p));
  }
  .hero-stats  {
    height: 600px;
    background: linear-gradient(141.48deg, #1782e5 -3.56%, #1784e5 35.88%, #03b9d8 84.64%);
  }
  .hero-stats-list  {
    flex-direction: column;
    align-items: center;
    gap: 19px;
    padding-top: 85px;
  }
  /* 各セクションの上下余白 */
  /* サービス内容の上は、FVの青い帯との空きを半分にする（先方指示） */
  .services  {
    min-height: 0;
    padding-top: 53px;
    padding-bottom: 101px;
  }
  .about  {
    min-height: 0;
    padding-top: 40px;
    padding-bottom: 67px;
  }
  .team  {
    min-height: 0;
    padding-top: 51px;
    padding-bottom: 95px;
  }
  .workflow  {
    min-height: 0;
    padding-bottom: 63px;
  }
  .workflow .section-lead  {
    margin-bottom: 6px;
  }
  .voices  {
    min-height: 0;
    padding-bottom: 85px;
  }
  /* 代表ご挨拶 */
  .about-inner  {
    display: flex;
    flex-direction: column;
    gap: 23px;
    margin-top: 19px;
  }
  .about-copy h3  {
    min-height: 88px;
    margin-bottom: 15px;
    font-size: 24px;
    line-height: 35px;
  }
  .about-copy p  {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 22px;
  }
  .about-copy ul  {
    margin-top: 17px;
    font-size: 12px;
    line-height: 24px;
  }
  /* スタッフ紹介 */
  .team .section-lead  {
    max-width: 270px;
    margin-bottom: 35px;
  }
  .member-list  {
    grid-template-columns: 1fr;
    gap: 39px;
    max-width: 324px;
    margin: 0 auto;
  }
  .member figure  {
    height: 216px;
  }
  .member figcaption  {
    left: 12px;
    bottom: 7px;
    font-size: 27px;
    line-height: 26px;
  }
  .member h3  {
    margin-top: 14px;
    font-size: 24px;
    line-height: 28px;
  }
  .member p  {
    min-height: 36px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 18px;
  }
  .team-note  {
    max-width: 262px;
    margin: 22px auto 38px;
    font-size: 12px;
    line-height: 18px;
  }
  /* 利用者の声（件数） */
  .client-count  {
    margin-bottom: 33px;
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
  }
  .client-count strong  {
    font-weight: 700;
  }
  /* 「国内外」の後の足した半角はSPでは改行の行末になるので出さない */
  .client-count-space  {
    display: none;
  }
  /* 「1,000社」の行だけ上に5px広げ、1行目との間を空ける（先方指示） */
  .client-count strong  {
    font-size: 36px;
    line-height: 1;
  }
  .client-count small  {
    margin-top: 8px;
    font-size: 10px;
    line-height: 14px;
  }
  /* サービス内容（SP：中央揃えのカード、アイコンを本文と項目の間に配置） */
  .service-list  {
    gap: 64px;
    max-width: 320px;
    padding-top: 0;
  }
  .service-card  {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 46px 0 38px;
    box-shadow: 8px 8px 0 #f5f5f5;
  }
  .service-tag  {
    top: -18px;
    left: calc(50% - 100px);
    width: 200px;
    height: 36px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 36px;
    letter-spacing: .7px;
  }
  .service-tag::after  {
    left: 35px;
    border-top-width: 12px;
    border-left-width: 16px;
  }
  .service-card:nth-child(1)  {
    min-height: 460px;
  }
  .service-card:nth-child(2)  {
    min-height: 492px;
  }
  .service-card:nth-child(3)  {
    min-height: 416px;
  }
  .service-card:nth-child(4)  {
    min-height: 415px;
  }
  .service-copy  {
    display: block;
    padding: 0 43px 0 42px;
    border-right: 0;
  }
  .service-copy h3, .service-card:nth-child(n+3) .service-copy h3  {
    margin-bottom: 10px;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
  }
  .service-copy p  {
    max-width: none;
    font-size: 12px;
    line-height: 18px;
  }
  .service-detail  {
    flex-direction: column;
    align-items: stretch;
    padding: 0 20px 0 42px;
  }
  .service-detail img, .service-card:nth-child(1) .service-detail img  {
    position: static;
    top: auto;
    right: auto;
    order: -1;
    width: var(--icon-sp-w);
    height: var(--icon-sp-h);
    margin: 17px auto 0;
    transform: none;
  }
  .service-card:nth-child(1) .service-detail img  {
    position: relative;
    left: 4px;
  }
  .service-card:nth-child(2) .service-detail img  {
    position: relative;
    left: -16px;
  }
  .service-card:nth-child(3) .service-detail img  {
    position: relative;
    left: -8px;
    margin-top: 7px;
  }
  .service-card:nth-child(4) .service-detail img  {
    position: relative;
    left: -11px;
    margin-top: 13px;
  }
  .service-detail ul  {
    font-size: 20px;
    line-height: 29px;
  }
  .service-detail li + li  {
    margin-top: 14px;
  }
  /* Figma SP はカードごとに項目の位置・間隔が異なる */
  .service-card:nth-child(1) .service-detail li + li  {
    margin-top: 29px;
  }
  .service-card:nth-child(2) .service-detail ul  {
    margin-top: 21px;
  }
  .service-card:nth-child(4) .service-detail ul  {
    margin-top: 12px;
  }
  .service-card:nth-child(n+3) .service-detail li + li  {
    margin-top: 23px;
  }
  .service-detail li::before  {
    margin-right: 12px;
  }
  .service-detail li p  {
    margin: 2px 0 14px 22px;
    font-size: 14px;
    line-height: 22px;
  }
  /* ご利用の流れ（SP：縦の時間軸と下向き矢印） */
  .step-list  {
    display: block;
    width: 292px;
    max-width: 100%;
    min-height: 905px;
    margin: 0 auto 58px;
  }
  /* 縦線は矢印の腕の先の高さ（下端から11px）で止める */
  .step-list::before  {
    top: 36px;
    bottom: 11px;
    left: 77px;
    right: auto;
    border-top: 0;
    border-left: 1px solid #000;
  }
  .step-list::after  {
    top: auto;
    bottom: -3px;
    right: auto;
    left: 64px;
    width: 28px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Cpath d='M.4.4 14 13.6 27.6.4' fill='none' stroke='%23000'/%3E%3C/svg%3E");
  }
  .step-list li  {
    min-height: 0;
    padding: 26px 0 0 130px;
  }
  .step-list li + li  {
    margin-top: 19px;
  }
  .step-list li:nth-child(3)  {
    margin-top: 11px;
  }
  .step-list li:nth-child(4)  {
    margin-top: 4px;
  }
  .step-list li:not(:last-child)::after  {
    content: none;
  }
  .step-no  {
    width: 148px;
    margin: 0 0 15px;
    font-size: 34px;
    line-height: 40px;
  }
  .step-list h3  {
    width: 148px;
    min-height: 35px;
    margin-bottom: 12px;
    padding: 5px;
    border-radius: 7px;
    font-size: 15px;
    line-height: 21px;
  }
  .step-list p  {
    max-width: 148px;
    font-size: 12px;
    line-height: 16px;
  }
  .step-time  {
    top: 90px;
    left: -16px;
    width: 80px;
    max-width: none;
    font-size: 13px;
    line-height: 16px;
    text-align: right;
    white-space: nowrap;
  }
  .step-time::before  {
    top: 1px;
    left: 87px;
    width: 14px;
    height: 14px;
  }
  /* 取引先ロゴ（SP） */
  .logo-slider  {
    margin: 0 -34px 55px;
  }
  .logo-row + .logo-row  {
    margin-top: 13px;
  }
  .logo-track  {
    gap: 11px;
    margin-left: -5px;
  }
  .logo-row + .logo-row .logo-track  {
    margin-left: -98px;
  }
  .logo-track li  {
    flex-basis: 115px;
    height: 61px;
  }
  .logo-arrow  {
    width: 36px;
    height: 36px;
  }
  /* 左右とも上下2段の間に揃える（Figma SP） */
  .logo-prev  {
    top: 50px;
    left: 21px;
  }
  .logo-next  {
    top: 50px;
    right: 15px;
  }
  .section-mark  {
    right: 7.4%;
    top: -35px;
    width: 70px;
    height: 70px;
  }
  .about .mark-bottom  {
    left: 9.16%;
    bottom: -35px;
  }
  .team .mark-bottom  {
    right: 9.16%;
    bottom: -35px;
  }
  #team, #workflow  {
    scroll-margin-top: -35px;
  }
  /* ページ内リンクで飛んだとき、見出しを画面の上から95pxに置く（上の余白を減らした54px分を戻す） */
  #services  {
    scroll-margin-top: -8px;
  }
  .representative  {
    width: 320px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 520 / 646;
    align-self: center;
    background-position: 54% 26%, center;
  }
  .representative figcaption  {
    right: -15px;
    bottom: 26px;
    gap: 3px;
    width: 120px;
    height: 80px;
    min-width: 0;
    padding: 11px;
  }
  .representative figcaption strong  {
    font-size: 20px;
    line-height: 26px;
  }
  .representative figcaption small, .representative figcaption span  {
    font-size: 10px;
    line-height: 12px;
  }
  .voice-list  {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    max-width: 320px;
    margin: 36px auto 44px;
  }
  .voice-card  {
    min-height: 615px;
    padding: 28px 28px 26px;
  }
  .voice-photo  {
    height: auto;
    aspect-ratio: 300 / 220;
    border-radius: 9px;
  }
  /* SPのFigmaはイラストの切り抜きがPCと少し違う */
  .voice-card-amatsuji .voice-photo img  {
    top: -19.72%;
    left: -5.65%;
    width: 110.96%;
    height: 126.09%;
  }
  .sample-label  {
    top: 153px;
    left: calc(50% - 45px);
    width: 91px;
    height: 20px;
    font-size: 13px;
    line-height: 20px;
  }
  .voice-category  {
    width: 176px;
    height: 32px;
    margin-top: -13px;
    border-radius: 9px;
    font-size: 14px;
    line-height: 32px;
  }
  .voice-card .voice-category  {
    margin-top: -17px;
    margin-bottom: 18px;
  }
  .voice-copy  {
    min-height: 334px;
    margin-top: 15px;
    padding: 15px 20px 14px;
    border-radius: 9px;
  }
  .voice-person  {
    min-height: 72px;
    margin: 0 -26px;
    padding-bottom: 26px;
    font-size: 12px;
    line-height: 23px;
  }
  .voice-person strong  {
    font-size: 18px;
  }
  .voice-person small  {
    font-size: 12px;
  }
  /* SPデザイン：しっぽは幅10px・深さ12px、線は#333 */
  .voice-person  {
    --voice-line: #333;
  }
  .voice-person::before  {
    right: 26px;
    bottom: 11px;
    left: 26px;
  }
  .voice-person::after  {
    left: calc(26px + (100% - 52px) * .4465 - .5px);
    bottom: -1px;
    width: 11px;
    height: 13px;
  }
  .voice-copy h3  {
    min-height: 74px;
    margin: 13px 0 9px;
    font-size: 17px;
    line-height: 25px;
  }
  .voice-copy > p:last-child  {
    font-size: 12px;
    line-height: 19px;
  }
  .retention  {
    align-content: start;
    width: 260px;
    min-height: 154px;
    padding: 24px 15px 15px;
  }
  .retention span  {
    font-size: 19px;
    line-height: 27px;
  }
  .retention strong  {
    border-bottom-width: 2px;
    font-size: 57px;
    line-height: 56px;
  }
  .retention strong small  {
    font-size: 36px;
  }
  .retention .laurel  {
    top: 18px;
    left: 29px;
    width: 44px;
    height: 118px;
  }
  .retention .laurel-right  {
    right: 29px;
    left: auto;
  }
  .retention-note  {
    margin-top: 18px;
    font-size: 10px;
    line-height: 14px;
  }
  .columns  {
    min-height: 740px;
    padding: 49px 24px 80px;
  }
  /* Figma SP：見出しから1件目まで81px、日付から本文まで26px、本文の行間14px、1件の間隔112px */
  .column-list  {
    max-width: 288px;
    margin: 55px auto 0 calc(50% - 136.5px);
  }
  .column-list li, .column-list li:first-child  {
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    gap: 9px 24px;
    min-height: 0;
    padding: 39.5px 0 15.5px;
    font-size: 12px;
    line-height: 20px;
  }
  .column-list li:first-child  {
    padding-top: 0;
  }
  .column-list li:nth-child(4)  {
    display: none;
  }
  .column-list a  {
    grid-column: 1 / -1;
    line-height: 14px;
  }
  .column-dots  {
    height: 90px;
    margin: 32px auto 27px;
    font-size: 12px;
    line-height: 15px;
  }
  .columns > .pill  {
    width: 260px;
    max-width: 100%;
    min-width: 0;
    height: 44px;
  }
  .contact  {
    min-height: 745px;
    padding: 77px 24px;
  }
  .contact .section-lead  {
    max-width: none;
    margin: 19px -14px 53px;
    font-size: 12px;
    line-height: 26px;
  }
  .contact-form  {
    gap: 26px;
    width: 327px;
    max-width: 100%;
    margin: 0 auto;
  }
  .form-row  {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 8px;
  }
  .form-row label  {
    gap: 7px;
    padding-top: 4px;
    font-size: 10px;
    line-height: 14px;
  }
  .required, .optional  {
    flex-basis: 20px;
    width: 20px;
    height: 12px;
    font-size: 9px;
    line-height: 12px;
  }
  .form-row input, .form-row select, .form-row textarea  {
    width: 171px;
    max-width: 100%;
    height: 22px;
    min-height: 0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    line-height: 16px;
  }
  .form-row select  {
    padding-right: 24px;
  }
  .form-select::after  {
    top: 5px;
    left: min(278px, calc(100% - 16px));
    width: 9px;
    height: 9px;
  }
  .form-row textarea  {
    width: 200px;
    height: 94px;
    min-height: 94px;
  }
  .form-message + button  {
    width: 260px;
    max-width: 100%;
    min-width: 0;
    height: 44px;
    margin-top: 37px;
    font-size: 18px;
    font-weight: 500;
  }
  .privacy-link  {
    margin-top: 2px;
    font-size: 12px;
    line-height: 14px;
  }
  .office  {
    min-height: 766px;
    padding: 50px 24px 19px;
  }
  .office-inner  {
    grid-template-columns: minmax(0, 1fr);
    gap: 39px;
    max-width: 286px;
  }
  .office h2  {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 0;
    padding-bottom: 32px;
    border-bottom: 2px solid #777;
    font-size: 22px;
    line-height: 31px;
  }
  .office h2 span  {
    margin: 0;
    font-size: 16px;
    line-height: 26px;
  }
  .office-info dl  {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 29px 15px;
    margin-top: 18px;
    font-size: 12px;
    line-height: 14px;
  }
  .office-info dd:first-of-type  {
    margin-bottom: -18px;
  }
  .office-info dd:first-of-type, .office-info dd:last-child  {
    white-space: nowrap;
  }
  .office-access h3  {
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 14px;
  }
  .office-map  {
    width: 286px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .office-access p  {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    margin-top: 10px;
    font-size: 10px;
    line-height: 14px;
  }
}

@media (max-width: 390px)  {
  .hero-points  {
    gap: 12px;
  }
}

@media (max-width: 374px)  {
  .hero  {
    --k: min(1vw, 3.93px);
  }
  .hero-otis  {
    font-size: calc(200 * var(--k) / 3.74);
  }
  .hero-en  {
    font-size: calc(20 * var(--k) / 3.74);
  }
  .hero h1  {
    font-size: calc(52 * var(--k) / 3.74);
    line-height: calc(63 * var(--k) / 3.74);
  }
  .hero-points  {
    --p: .9px;
    gap: 8px;
  }
}

@media (max-width: 350px)  {
  .service-copy  {
    padding-right: 24px;
    padding-left: 24px;
  }
  .service-detail  {
    padding-right: 18px;
    padding-left: 24px;
  }
  /* リード文の1行目（全角22文字）が収まるよう縮める */
  .team .section-lead  {
    font-size: 11px;
  }
}

@media (min-width: 761px) and (max-width: 1100px)  {
  /* タブレットは従来のPC比率で文字を縮め、字形の左端を丸にそろえる */
  .hero-otis  {
    top: -6px;
    left: calc(3.8194% - 14px);
    width: auto;
    text-align: left;
  }
  .hero-en  {
    top: 222px;
    left: calc(3.8194% + 1px);
  }
  .hero h1  {
    left: calc(3.8194% - 1px);
  }
  .hero-points  {
    --p: .79px;
    top: 542px;
  }
  /* 人物3人は1440pxと同じ並び（重なりと間隔）のまま右端に寄せて縮める。--u はデザインの1px。
  1101px以上と同じく幅÷1440で縮め、狭い幅では見出し（右端約400px）と重なりすぎないよう、3人の幅（867px分）が残りの幅に収まる大きさにする */
  .hero  {
    --u: min(100cqw / 1440, (100cqw - 340px) / 867);
    container-type: inline-size;
  }
  .hero-people .person-left  {
    right: calc(477 * var(--u));
    left: auto;
    width: calc(400 * var(--u));
    height: calc(566 * var(--u));
  }
  .hero-people .person-center  {
    right: calc(171 * var(--u));
    left: auto;
    width: calc(480 * var(--u));
    height: calc(680 * var(--u));
  }
  .hero-people .person-right  {
    right: calc(10 * var(--u));
    left: auto;
    width: calc(400 * var(--u));
    height: calc(566 * var(--u));
  }
  .about-inner  {
    gap: 64px;
  }
  .about-copy h3  {
    font-size: 24px;
    line-height: 36px;
  }
  .member figcaption  {
    left: 12px;
    font-size: 22px;
    white-space: nowrap;
  }
  .voice-card  {
    padding-right: 24px;
    padding-left: 24px;
  }
  .voice-copy  {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (min-width: 761px) and (max-width: 900px)  {
  .voice-list  {
    grid-template-columns: minmax(0, 1fr);
    max-width: 360px;
    margin-right: auto;
    margin-left: auto;
  }
}