/* =========================================================
   ピアトゥー協業 事例LP  —  Figma「04 · LP Design」準拠
   デザイン基準幅：1448px
   ========================================================= */

:root {
  /* プライマリーカラー（Figma: color/primary = navy/700） */
  --pt-color-primary: #1f3f70;
  --pt-color-navy: var(--pt-color-primary);      /* 見出し（color/text/heading） */
  --pt-color-navy-2: #184792;                    /* ボタン */
  --pt-color-text: #34507a;                      /* 本文（color/text/body） */
  --pt-color-text-2: var(--pt-color-text);
  --pt-color-text-3: #4a6388;                    /* 補足（color/text/sub） */
  --pt-color-text-secondary: #52647f;
  --pt-color-text-inverse: #ffffff;
  --pt-color-blue: #0875f5;
  --pt-color-blue-num: #4181cc;
  --pt-color-line: #dce6f2;
  --pt-color-bg-page: #ffffff;

  --pt-radius-sm: 8px;
  --pt-radius-md: 16px;
  --pt-radius-full: 999px;

  --pt-page-max: 1448px;

  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--pt-color-text);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

a:focus-visible {
  outline: 3px solid #7fb4ff;
  outline-offset: 3px;
}

.section {
  width: 100%;
  overflow: hidden;
}
.section__inner {
  position: relative;
  max-width: var(--pt-page-max);
  margin: 0 auto;
}

/* ---------- 共通：ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover {
  transform: translateY(-1px);
}

/* =========================================================
   01 HERO
   ========================================================= */
.hero {
  background: #f4fdff; /* rgba(231,250,255,.41) on white */
}
.hero .section__inner {
  display: grid;
  grid-template-columns: 680px 1fr;
  align-items: start;
  padding: 59px 58px 64px;
  min-height: 690px;
}
.hero__eyebrow {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--pt-color-text);
}
.hero__title {
  padding-top: 25px;
  font-size: 60px;
  font-weight: 900;
  line-height: 78.6px;
  color: var(--pt-color-navy);
}
.hero__lead {
  margin-top: 12px;
  font-size: 27px;
  font-weight: 800;
  line-height: 44.55px;
  letter-spacing: -0.675px;
  color: var(--pt-color-navy);
}
.hero__text {
  padding-top: 17px;
  font-size: 15px;
  font-weight: 500;
  line-height: 27.75px;
  color: var(--pt-color-text-3);
}
.hero__stats {
  display: flex;
  gap: 10px;
  padding-top: 24px;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 138px;
  height: 80px;
  padding: 14.5px 13.7px 14.5px 17px;
  background: rgba(255,255,255,.94);
  border-radius: 7px;
  box-shadow: 0 1.7px 10.3px 0 #bcd5fe;
}
.hero-stat__value {
  font-size: 18.8px;
  font-weight: 700;
  line-height: 22.6px;
  color: #3e82ee;
  white-space: nowrap;
}
.hero-stat__label {
  padding-top: 3.4px;
  font-size: 11.1px;
  font-weight: 600;
  color: var(--pt-color-text);
  white-space: nowrap;
}
.hero__cta {
  padding-top: 50px;
}
.hero__cta .btn {
  gap: 18px;
  width: 302px;
  height: 60px;
  border-radius: 14px;
  background: var(--pt-color-navy-2);
  color: var(--pt-color-text-inverse);
  font-size: 20px;
  font-weight: 400;
}
.hero__cta .btn img {
  width: 26px;
  height: 26px;
}

.hero__visual {
  position: relative;
  justify-self: start;
  margin: 35px 0 0 32px;
  width: 558px;
}
.hero__visual::before { /* Background Glow ＋ Mint Glow（Figmaのぼかし画像をCSSで再現） */
  content: "";
  position: absolute;
  left: -55px;
  top: -57px;
  width: 692px;
  height: 538px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 22% 48%, rgba(140,232,210,.55), rgba(140,232,210,0)),
    radial-gradient(closest-side at 84% 58%, rgba(196,180,246,.45), rgba(196,180,246,0)),
    radial-gradient(closest-side at 50% 52%, rgba(110,160,240,.55), rgba(160,205,250,.35) 60%, rgba(200,230,255,0));
  filter: blur(36px);
  z-index: 0;
  pointer-events: none;
}
.hero__visual img {
  position: relative;
  z-index: 1;
  width: 558px;
  height: 496px;
  object-fit: contain;
  object-position: bottom;
  opacity: .88;
}

/* =========================================================
   02 PROJECT OVERVIEW
   ========================================================= */
.overview {
  background: #fff;
}
.overview .section__inner {
  display: grid;
  grid-template-columns: 596px 646px;
  gap: 76px;
  padding: 64px 64px 64px 66px;
}
.overview__title {
  padding-top: 41px;
  color: var(--pt-color-navy);
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
}
.overview__text {
  max-width: 590px;
  font-size: 20px;
  line-height: 31.5px;
  color: var(--pt-color-text);
}
.overview__text--1 {
  padding-top: 28px;
}
.overview__text--2 {
  padding-top: 23px;
}

.roles {
  align-self: start;
  padding: 28px 28px 32px;
  border-radius: 10px;
  background: #f3f6f8;
}
.roles__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--pt-color-navy);
}
.roles__grid {
  display: grid;
  grid-template-columns: 1fr 38px 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 22px;
}
.role-card {
  height: 290px;
  padding: 28px 26px;
  border-radius: 12px;
  background: var(--pt-color-bg-page);
}
.role-card__head {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 26px;
  font-weight: 700;
  color: var(--pt-color-navy);
}
.role-card__head img {
  width: 43px;
  height: 43px;
  flex: none;
}
.role-card__list {
  padding-top: 23px;
}
.role-card__list li {
  position: relative;
  padding-left: 27px;
  font-size: 19px;
  font-weight: 500;
  color: var(--pt-color-text);
}
.role-card__list li + li {
  margin-top: 14px;
}
@media (min-width: 761px) { .role-card__list li { white-space: nowrap; } }
.role-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pt-color-blue);
}
.roles__arrow {
  text-align: center;
  font-size: 34px;
  color: var(--pt-color-blue);
}

/* =========================================================
   03 CHALLENGE
   ========================================================= */
.challenge {
  background: #fff;
}
.challenge .section__inner {
  padding: 50px 80px 45px;
}
.challenge__head {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.challenge__title {
  color: var(--pt-color-navy);
  white-space: nowrap;
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
}
.challenge__text {
  color: var(--pt-color-text);
  width: auto;
  font-size: 18px;
  line-height: 30.4px;
}
.challenge__grid {
  display: grid;
  gap: 16px;
  margin-top: 34px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.challenge-card {
  display: grid;
  min-height: 196px;
  border-radius: 10px;
  background: var(--pt-color-bg-page);
  filter: drop-shadow(0 4px 5px rgba(163,189,255,.25));
  grid-template-columns: 63px 1fr;
  padding: 28px 20px 28px 35px;
  column-gap: 13px;
}
.challenge-card__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.challenge-card__num {
  font-size: 37px;
  font-weight: 700;
  line-height: 37px;
  color: #acc6e4;
}
.challenge-card__side img {
  width: 58px;
  height: 58px;
}
.challenge-card__title {
  font-weight: 700;
  color: var(--pt-color-navy);
  font-size: 22px;
}
.challenge-card__text {
  margin-right: -10px;
  font-size: 17px;
  line-height: 27.5px;
  color: var(--pt-color-text);
  margin-top: 24px;
}

/* =========================================================
   04 AI SOLUTION
   ========================================================= */
.ai {
  position: relative;
  background: linear-gradient(180.09deg, #fff 9.65%, #b6e7f4 57.25%, #4e83d0 104.85%);
}
.ai::before,
.ai::after { /* Mint Glow（CSS再現） */
  content: "";
  position: absolute;
  width: 574px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150,236,220,.75), rgba(150,236,220,0));
  filter: blur(30px);
  pointer-events: none;
}
.ai::before {
  left: -220px;
  top: 300px;
  transform: rotate(129deg);
}
.ai::after  {
  right: -300px;
  top: 230px;
}
.ai .section__inner {
  z-index: 1;
  text-align: center;
  padding: 72px 120px;
}
.ai__title {
  font-weight: 700;
  color: var(--pt-color-navy);
  font-size: 32px;
  line-height: 38px;
}
.ai__text {
  color: var(--pt-color-text);
  margin-top: 12px;
  font-size: 18px;
  line-height: 22px;
}
.process {
  width: 1142px;
  margin: 50px auto 0;
}
.process__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--pt-color-text-secondary);
}
.process__steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 198px;
  height: 109px;
  flex: none;
  padding: 16px 10px;
  border-radius: 16px;
  background: #fff;
}
.process-step--active {
  box-shadow: 0 8px 20px 0 rgba(8,117,245,.22);
}
.process-step__num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .78px;
  color: var(--pt-color-blue-num);
}
.process-step__label {
  font-size: 16px;
  font-weight: 700;
  line-height: 23.2px;
  color: var(--pt-color-primary);
}
.process__arrow {
  flex: none;
  width: 18px;
  font-size: 18px;
  font-weight: 700;
  color: #8fb2da;
}
.ai__stage {
  position: relative;
  width: 1142px;
  padding-bottom: 125px;
  margin: 34px auto 0;
}
.ai__cards {
  display: flex;
  align-items: center;
  gap: 40px;
}
.ai__arrow {
  width: 56px;
  height: 36px;
  flex: none;
}
.ai-card {
  position: relative;
  width: 290px;
  height: 371px;
  flex: none;
}
.ai-card__body {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  height: 327px;
  padding: 76px 16px 0;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px 0 rgba(46,71,158,.26);
}
.ai-card__icon {
  position: absolute;
  left: 90px;
  top: 0;
  width: 110px;
  height: 110px;
  z-index: 1;
}
.ai-card__icon img {
  position: absolute;
}
.ai-card__icon .ai-card__circle {
  inset: 0;
  width: 110px;
  height: 110px;
}
.ai-card__icon .ai-card__glyph {
  left: 24px;
  top: 24px;
  width: 62px;
  height: 62px;
}
.ai-card__name {
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
}
.ai-card--implement .ai-card__name {
  color: var(--pt-color-primary);
}
.ai-card--verify    .ai-card__name {
  color: var(--pt-color-primary);
}
.ai-card--review    .ai-card__name {
  color: var(--pt-color-primary);
}
.ai-card__desc {
  margin-top: 16px;
  font-size: 14px;
  line-height: 26px;
  color: var(--pt-color-text);
}
.ai-card__rule {
  height: 2px;
  margin: 16px 0 0;
  border: 0;
}
.ai-card--implement .ai-card__rule {
  background: rgba(5,99,209,.18);
}
.ai-card--verify    .ai-card__rule {
  background: rgba(77,46,212,.18);
}
.ai-card--review    .ai-card__rule {
  background: rgba(97,56,214,.18);
}
.ai-card__checks {
  margin-top: 14px;
  padding-left: 21px;
  text-align: left;
  font-size: 14px;
  line-height: 27px;
  color: var(--pt-color-text);
}
.ai-card__checks li::before {
  content: "✓";
  margin-right: .6em;
}

.ai__loop { /* 左右の縦線をカード1・3の中心（145px / 997px）に合わせる */
  position: absolute;
  left: 132px;
  top: 394px;
  width: 878px;
  height: 100px;
}
.ai__loop-svg {
  position: absolute;
  inset: 0;
  width: 878px;
  height: 100px;
  overflow: visible;
}
.ai__loop-label {
  position: absolute;
  left: 50%;
  top: 44px;
  transform: translateX(-50%);
  width: 390px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  background: #2652a4;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

/* =========================================================
   05 SOLUTION FOUNDATION
   ========================================================= */
.foundation {
  background: #fff;
}
.foundation .section__inner {
  padding: 34px 80px 60px;
}
.foundation__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.foundation__title {
  color: var(--pt-color-navy);
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  width: auto;
  padding-top: 14px;
}
.foundation__text {
  font-weight: 500;
  color: var(--pt-color-text);
  padding: 0;
  font-size: 18px;
  line-height: 30.6px;
}
.foundation__grid {
  display: grid;
  align-items: start;
  grid-template-columns: 907fr 354fr;
  gap: 27px;
  margin-top: 32px;
}
.flow {
  display: grid;
  grid-template-columns: 1fr 35px 1fr 35px 1fr 35px 1fr 35px 1fr;
  align-items: center;
  min-height: 286px;
  padding: 23px 27px;
  border-radius: 10px;
  background: rgba(255,255,255,.78);
}
.flow__arrow {
  font-size: 35px;
  color: var(--pt-color-blue);
  line-height: 1;
}
.flow-step {
  text-align: center;
}
.flow-step__head {
  font-size: 17px;
  font-weight: 700;
  color: var(--pt-color-navy);
  white-space: nowrap;
}
.flow-step__num {
  font-size: 20px;
  font-weight: 900;
  color: #869cb7;
}
.flow-step__icon {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  margin: 17px auto 0;
  border-radius: 50%;
}
.flow-step__icon img {
  width: 47px;
  height: 47px;
}
.flow-step--1 .flow-step__icon {
  background: #91d8d6;
}
.flow-step--2 .flow-step__icon {
  background: #8ac8e9;
}
.flow-step--3 .flow-step__icon {
  background: #7dbce1;
}
.flow-step--4 .flow-step__icon {
  background: #71b0da;
}
.flow-step--5 .flow-step__icon {
  background: #357ebf;
}
.flow-step__text {
  padding-top: 11px;
  font-size: 15px;
  line-height: 24.75px;
  color: var(--pt-color-text-2);
}

.base {
  padding: 17px 15px;
  border-radius: 10px;
  background: #eef8ff;
}
.base__title {
  padding-left: 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--pt-color-navy);
}
.base-item {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 98px;
  margin-top: 14px;
  padding: 15px 24px;
  border-radius: var(--pt-radius-sm);
  background: var(--pt-color-bg-page);
}
.base-item img {
  width: 50px;
  height: 50px;
  flex: none;
}
.base-item__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--pt-color-navy);
}
.base-item__text {
  padding-top: 5px;
  font-size: 14px;
  color: var(--pt-color-text-3);
}

/* =========================================================
   06 SYSTEM SCALE
   ========================================================= */
.scale {
  background: linear-gradient(136.4deg, #f7fcff 8.49%, #eaf6ff 91.51%);
}
.scale .section__inner {
  display: flex;
  gap: 28px;
  padding: 44px 80px;
}
.scale__intro {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 420px;
  min-height: 414px;
  padding-top: 16px;
}
.scale__title {
  color: var(--pt-color-navy);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
}
.scale__text {
  font-weight: 500;
  color: var(--pt-color-text);
  margin-top: 18px;
  font-size: 18px;
  line-height: 32px;
}
.scale__illust {
  width: 420px;
  height: 150px;
  margin-top: auto;
}
.scale__grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: auto;
  flex: 1;
  min-width: 0;
}
.scale__row {
  display: grid;
  gap: 12px;
}
.scale__row--top {
  height: 220px;
  grid-template-columns: 312px 1fr;
}
.scale__row--bottom {
  grid-template-columns: repeat(3, 1fr);
  height: 182px;
}
.scale-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px 0 rgba(74,115,178,.07);
}
.scale-card--process {
  padding: 22px 24px;
}
.scale__stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}

.scale-card__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--pt-color-navy);
}
.scale-card--process .scale-card__label {
  font-size: 14px;
}
.scale-card__value {
  margin-top: 4px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--pt-color-navy);
  white-space: nowrap;
}
.scale-card__value .n {
  font-weight: 900;
  color: var(--pt-color-blue-num);
}
.scale-card__unit {
  font-size: 20px;
}
.scale-card--process .scale-card__value {
  margin-top: 6px;
  line-height: 1.1;
}
.scale-card--process .n {
  font-size: 60px;
}
.scale-card--process .sp {
  display: inline-block;
  width: .9em;
}
.scale-card--bottom .n {
  font-size: 44px;
}
.scale-card--reports .scale-card__value {
  line-height: 30px;
  margin-top: 2px;
}
.scale-card--reports .scale-card__value .scale-card__unit {
  font-size: 18px;
}
.scale-card--reports .n {
  font-size: 32px;
}

.scale-card__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scale-card__foot::before {
  content: "";
  height: 1px;
  background: var(--pt-color-line);
}
.scale-card__desc {
  font-size: 12px;
  line-height: 20.5px;
  color: var(--pt-color-text-2);
}
.scale-card--process .scale-card__desc {
  font-size: 12.5px;
  line-height: 22px;
}

.scale-card--wide {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 28px;
}
.scale-card--wide .scale-card__main {
  flex: 1;
  min-width: 0;
}
.scale-card--wide .n {
  font-size: 52px;
}
.scale-card--wide .scale-card__value {
  margin-top: 0;
  line-height: 1.1;
}
.scale-card--wide .scale-card__unit {
  font-size: 21px;
}
.scale-card__note {
  font-size: 14px;
  font-weight: 500;
}
.scale-card--wide .scale-card__desc {
  flex: none;
  height: 58px;
  display: flex;
  align-items: center;
  padding-left: 28px;
  border-left: 1px solid var(--pt-color-line);
  font-size: 12.5px;
  line-height: 21.5px;
  width: 180px;
}

/* =========================================================
   07 QUALITY
   ========================================================= */
.quality {
  background: linear-gradient(118.6deg, #fff 7.74%, #eef8ff 92.27%);
}
.quality .section__inner {
  padding: 22px 80px 48px;
}
.quality__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0 11px;
}
.quality__intro {
  width: auto;
}
.eyebrow {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2.56px;
  color: var(--pt-color-blue);
}
.quality__title {
  color: var(--pt-color-navy);
  white-space: nowrap;
  font-weight: 700;
  padding-top: 19px;
  font-size: 28px;
  line-height: 48px;
}
.quality__text {
  font-size: 20px;
  font-weight: 500;
  line-height: 30.6px;
  color: var(--pt-color-text);
  max-width: none;
  padding-top: 4px;
}
.quality__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 2026-09-18: minmax(0,1fr) で 1181-1400px のはみ出しを防ぐ */
  gap: 15px;
  margin-top: 26px;
}
.q-stat {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 184px;
  padding: 28px 35px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(222,255,255,.48) 0%, rgba(204,236,255,.83) 70.19%);
}
.q-stat__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #fff;
}
.q-stat__icon img {
  width: 47px;
  height: 47px;
}
.q-stat__value {
  font-size: 25px;
  font-weight: 700;
  line-height: 33.75px;
  color: var(--pt-color-primary);
  white-space: nowrap;
}
.q-stat__value .n {
  font-size: 57px;
  font-weight: 900;
  line-height: 57px;
}
.q-stat__value--rate .n {
  display: block;
  line-height: 62px;
}
.q-stat__value--rate {
  line-height: 30px;
}
.q-stat__note {
  padding-top: 13px;
  font-size: 13px;
  color: var(--pt-color-text-3);
}
.quality__features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 2026-09-18: 1fr の最小幅=内容幅で 1181-1400px にはみ出すため minmax(0,1fr) */
  gap: 18px;
  margin-top: 36px;
}
.q-feature {
  display: flex;
  align-items: center;
  gap: 21px;
  min-height: 125px;
  padding: 10px 12px 10px 30px;
  border-radius: 9px;
  background: #e0f0fa;
}
.q-feature img {
  width: 55px;
  height: 55px;
  flex: none;
}
.q-feature__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--pt-color-primary);
}
.q-feature__text {
  padding-top: 8px;
  color: var(--pt-color-text-3);
  font-size: 16px;
  line-height: 1.2;
}
@media (min-width: 1401px) { .q-feature__text { white-space: nowrap; } }  /* 2026-09-18: 1181-1400px で4枚目が右に切れるため 1401px 以上に限定 */
.quality__notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 24px;
  color: var(--pt-color-text);
  padding-top: 34px;
}

/* =========================================================
   08 VOICE
   ========================================================= */
.voice {
  background: #fff;
}
.voice .section__inner {
  padding: 60px 80px 83px;
}
.voice__title {
  font-weight: 700;
  color: #74808b;
  font-size: 28px;
  line-height: 34px;
  padding-top: 12px;
}
.voice__quote {
  position: relative;
  border: 1.5px solid #c7ddf7;
  border-radius: var(--pt-radius-md);
  margin-top: 41px;
  min-height: 191px;
  padding: 47px 54px 40px 199px;
}
.voice__quote::before {
  content: "\201C";
  position: absolute;
  left: 46px;
  top: 24px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 91px;
  line-height: 91px;
  color: #a9cff8;
}
.voice__quote p {
  max-width: 980px;
  font-size: 19px;
  font-weight: 500;
  line-height: 38px;
  color: var(--pt-color-text);
}
.voice__quote figcaption {
  /* 2026-09-18 変更: コメントが3行以上になると本文と重なるため、絶対配置→本文の下に置く（タブレット以下と同じ挙動） */
  position: static;
  text-align: right;
  margin-top: 16px;
  font-size: 14px;
  color: var(--pt-color-text-3);
}

/* =========================================================
   09 OUR SUPPORT
   ========================================================= */
.support {
  background: var(--pt-color-bg-page);
}
.support .section__inner {
  padding: 40px 80px 0;
}
.support__title {
  font-weight: 700;
  color: var(--pt-color-primary);
  font-size: 28px;
  line-height: 34px;
}
.support__cols {
  display: grid;
  grid-template-columns: 632px 632px;
  gap: 24px;
  margin: 28px 0 0;
}
.support-col {
  min-width: 0;
  padding: 7px 20px 20px;
  background: #f8f8f8;
}
.support-col__title {
  padding: 5px 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
.support-col__text {
  font-size: 16px;
  line-height: 28.8px;
}
.support-col--scope .support-col__title,
.support-col--scope .support-col__text {
  color: var(--pt-color-text-3);
}
.support-col--scope .support-col__text {
  padding-top: 8px;
  margin-right: -6px;
}
.support-col--consult .support-col__title {
  color: var(--pt-color-text-secondary);
}
.support-col--consult .support-col__text {
  padding-top: 8px;
  color: var(--pt-color-text);
}
.support__foot {
  display: grid;
  grid-template-columns: 111px 1fr;
  column-gap: 31px;
  align-items: start;
  padding: 67px 0 70px;
}
.support__label {
  padding: 3px 10px;
  background: #eef4fd;
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  color: var(--pt-color-text-secondary);
  white-space: nowrap;
}
.support__domain {
  font-size: 16px;
  line-height: 27.8px;
  color: var(--pt-color-text-secondary);
}
.support__note {
  font-size: 13px;
  line-height: 24px;
  color: #6c7f97;
}

/* =========================================================
   10 CTA
   ========================================================= */
.cta {
  background: linear-gradient(270deg, #fff 0%, #63a8d9 43%, #2b4b99 73%);
}
.cta .section__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 303px;
  padding: 46px 136px 46px 80px;
}
.cta__title {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -1.68px;
  color: var(--pt-color-text-inverse);
}
.cta__text {
  padding-top: 8px;
  font-size: 22px;
  line-height: 41.8px;
  color: var(--pt-color-text-inverse);
}
.cta .btn {
  flex: none;
  gap: 21px;
  width: 360px;
  height: 59px;
  margin-top: 18px;
  border-radius: 16.6px;
  background: var(--pt-color-navy-2);
  color: var(--pt-color-text-inverse);
  font-size: 21.6px;
  font-weight: 400;
  box-shadow: 0 3.6px 3.6px 0 rgba(255,255,255,.25);
}
.cta .btn img {
  width: 28px;
  height: 28px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width: 1401px) { .foundation__text { white-space: nowrap; margin-right: -40px; } }
@media (max-width: 1400px) {
  .hero .section__inner { grid-template-columns: minmax(0, 620px) 1fr; }
  .hero__visual { margin-left: 24px; width: auto; }
  .hero__visual img { width: 100%; height: auto; }

  .overview .section__inner { grid-template-columns: 1fr 1fr; gap: 40px; }

  .foundation__grid { grid-template-columns: 1fr 320px; }
  .support__cols { grid-template-columns: 1fr 1fr; }
  .ai .section__inner { padding-left: 40px; padding-right: 40px; }

  .scale__grid { width: auto; flex: 1; min-width: 0; }
  .scale-card--wide .scale-card__desc { width: 190px; }
  /* 2026-09-18: 1181-1400px で右カードが切れる（グリッド幅 692px に固定幅の内容が入らない）→ 規模セクションだけ縦積みを 1400px から適用 */
  .scale .section__inner { flex-direction: column; }
  .scale__intro { width: auto; min-height: 0; }
  .scale__illust { margin-top: 24px; }
  .q-stat { padding: 28px 24px; gap: 16px; }  /* 2026-09-18: 1181-1400px で3枚目が7px はみ出すため余白を詰める */

  .ai__stage, .process { transform: scale(.9); transform-origin: top center; }
  .ai__stage { margin-bottom: -60px; }
  .process { margin-bottom: -11px; }
}

@media (max-width: 1180px) {
  .hero .section__inner { grid-template-columns: 1fr; min-height: 0; }
  .hero__visual { margin: 40px auto 0; max-width: 520px; }
  .hero__title { font-size: 52px; line-height: 1.3; }
  .hero__stats { flex-wrap: wrap; }

  .overview .section__inner { grid-template-columns: 1fr; }

  .challenge__head { flex-direction: column; }
  .challenge__title { white-space: normal; }
  .challenge__text { width: auto; }
  .challenge__grid { grid-template-columns: 1fr; }

  .ai__stage { transform: none; margin-bottom: 0; width: auto; padding-bottom: 0; }
  .process { transform: none; width: auto; margin-bottom: 0; }
  .process__steps { flex-wrap: wrap; justify-content: center; }
  .process__arrow { display: none; }
  .process-step { width: calc(33.333% - 7px); min-width: 150px; height: auto; }
  .ai__cards { flex-direction: column; gap: 16px; }
  .ai__arrow { transform: rotate(90deg); }
  .ai__loop { position: static; width: auto; height: auto; margin-top: 28px; }
  .ai__loop-svg { display: none; }
  .ai__loop-label { position: static; transform: none; margin: 0 auto; max-width: 100%; }

  .foundation__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .foundation__title { width: auto; }
  .foundation__grid { grid-template-columns: 1fr; }

  .scale .section__inner { flex-direction: column; }
  .scale__intro { width: auto; min-height: 0; }
  .scale__illust { margin-top: 24px; }

  .quality__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .quality__stats { grid-template-columns: 1fr; }
  .quality__features { grid-template-columns: 1fr 1fr; }

  .support__cols { grid-template-columns: 1fr; }
  .voice__quote figcaption { position: static; text-align: right; margin-top: 12px; }
  .support__foot { grid-template-columns: 1fr; row-gap: 8px; }
  .support__label { justify-self: start; }
  .cta { background: linear-gradient(160deg, #2b4b99 30%, #63a8d9); }

  .cta .section__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 980px) {
  /* 2026-09-18: 761-980px で上段（312px + 横長カード）が収まらず右が切れる → 上段を1列に */
  .scale__row--top { grid-template-columns: 1fr; height: auto; }
  .scale-card--process { min-height: 170px; }
  .flow { padding: 23px 16px; }
}

@media (max-width: 760px) {
  .hero .section__inner,
  .overview .section__inner,
  .challenge .section__inner,
  .foundation .section__inner,
  .scale .section__inner,
  .quality .section__inner,
  .voice .section__inner,
  .support .section__inner,
  .ai .section__inner,
  .cta .section__inner { padding-left: 20px; padding-right: 20px; }

  .hero__title { font-size: 36px; }
  .hero__text br, .overview__text br, .challenge-card__text br, .scale__text br,
  .quality__text br, .support-col__text br, .cta__text br, .overview__title br { display: none; }
  .hero__lead { font-size: 20px; line-height: 1.6; }
  .hero-stat { width: calc(50% - 5px); height: 72px; }
  .hero__visual::before { left: -10%; top: -8%; width: 120%; height: 116%; }
  .hero__cta .btn { width: 100%; }

  .overview__title,
  .foundation__title,
  .quality__title,
  .voice__title,
  .support__title { font-size: 28px; line-height: 1.45; white-space: normal; }
  .challenge__title, .ai__title, .cta__title { font-size: 24px; line-height: 1.45; letter-spacing: -0.5px; }
  .challenge__title br { display: none; }
  .support__title { line-height: 1.45; }
  .support__foot { padding: 32px 0 48px; }
  .ai__text { font-size: 16px; }

  .roles__grid { grid-template-columns: 1fr; }
  .roles__arrow { transform: rotate(90deg); }
  .role-card { height: auto; }

  .flow { grid-template-columns: 1fr; row-gap: 12px; }
  .flow__arrow { transform: rotate(90deg); text-align: center; }

  .scale__title { font-size: 30px; line-height: 1.45; }
  .scale__illust { width: 100%; height: auto; }
  .scale__row--top, .scale__row--bottom { grid-template-columns: 1fr; height: auto; }
  .scale-card { min-height: 170px; }
  .scale-card--wide { flex-direction: column; align-items: flex-start; justify-content: center; padding: 20px 24px; gap: 12px; }
  .scale-card--wide .scale-card__desc { width: auto; height: auto; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--pt-color-line); }
  .scale-card__value { white-space: normal; }

  .q-stat { padding: 24px 20px; }
  .q-stat__icon { width: 72px; height: 72px; }
  .q-stat__icon img { width: 38px; height: 38px; }
  .q-stat__value .n { font-size: 44px; }
  .quality__features { grid-template-columns: 1fr; }

  .voice .section__inner { padding-bottom: 56px; }
  .voice__quote { padding: 88px 24px 28px; min-height: 0; }
  .voice__quote figcaption { position: static; margin-top: 12px; text-align: right; }
  .voice__quote::before { left: 20px; top: 12px; }

  .support__cols { margin: 20px 0 0; }
  .process-step { width: calc(50% - 5px); min-width: 0; }

  .cta__text { font-size: 17px; line-height: 1.8; }
  .cta .btn { width: 100%; height: 64px; margin-top: 0; font-size: 18px; gap: 16px; border-radius: 16px; }
  .cta .btn img { width: 30px; height: 30px; }
}

/* ===== 共通ヘッダー／フッター（/ai-driven-dev/ から移植・2026-09-18） ===== */
/* --- LPヘッダー／フッター（2026-08-29 デッドエンド解消） --- */
html{scroll-padding-top:78px}
.lp-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid #E4EAE7}
.lp-header-inner{max-width:1120px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;justify-content:flex-start;gap:20px}
.lp-header-logo{display:flex;align-items:center;flex-shrink:0}
.lp-header-logo img{width:128px;height:auto;display:block}
.lp-header-nav{display:flex;align-items:center;gap:20px}
.lp-header-nav--right{margin-left:auto}
.lp-header-nav a,.lp-nav-parent{font-size:13.5px;font-weight:600;color:#12211C;text-decoration:none;white-space:nowrap}
.lp-header-nav a:hover{color:#0B8662}
.lp-nav-item{position:relative}
.lp-nav-parent{cursor:default;display:inline-flex;align-items:center;gap:4px}
.lp-nav-parent::after{content:"";width:6px;height:6px;border-right:1.5px solid #5A6B64;border-bottom:1.5px solid #5A6B64;transform:rotate(45deg) translateY(-2px)}
.lp-nav-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:10px;display:none;z-index:110}
.has-drop:hover .lp-nav-drop,.has-drop:focus-within .lp-nav-drop{display:block}
.lp-nav-drop a{display:block;background:#fff;border:1px solid #E4EAE7;border-top:none;padding:10px 18px;font-size:13px;min-width:190px}
.lp-nav-drop a:first-child{border-top:1px solid #E4EAE7;border-radius:8px 8px 0 0}
.lp-nav-drop a:last-child{border-radius:0 0 8px 8px}
.lp-nav-drop a:hover{background:#F3F8F6}
.lp-header-cta{background:#0B8662;color:#fff !important;border-radius:999px;padding:9px 20px;font-size:13px !important}
.lp-header-cta:hover{background:#0A7355;color:#fff !important}
.lp-menu-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;padding:0;border:none;background:none;cursor:pointer;flex-shrink:0}
.lp-menu-btn span{display:block;width:100%;height:2px;background:#12211C;border-radius:2px}
.lp-drawer-bg{position:fixed;inset:0;background:rgba(18,33,28,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:190}
.lp-drawer-bg.is-open{opacity:1;pointer-events:auto}
.lp-drawer{position:fixed;top:0;right:0;bottom:0;width:82%;max-width:320px;background:#fff;box-shadow:-6px 0 24px rgba(18,33,28,.15);transform:translateX(100%);transition:transform .25s;z-index:200;overflow-y:auto;padding:70px 24px 32px}
.lp-drawer.is-open{transform:translateX(0)}
.lp-drawer-link,.lp-drawer-group summary{display:block;padding:14px 0;font-size:15px;font-weight:600;color:#12211C;text-decoration:none;border-bottom:1px solid #E4EAE7;list-style:none;cursor:pointer;position:relative}
.lp-drawer-group summary::-webkit-details-marker{display:none}
.lp-drawer-group summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:16px;color:#5A6B64}
.lp-drawer-group[open] summary::after{content:"–"}
.lp-drawer-group a{display:block;padding:11px 0 11px 14px;font-size:13.5px;color:#5A6B64;text-decoration:none;border-bottom:1px solid #F0F3F1}
.lp-drawer-group a:last-child{border-bottom:none}
.lp-drawer-cta{color:#0B8662 !important}
.lp-footer{background:#12211C;color:#C6D2CC;margin-top:0}
.lp-footer-inner{max-width:1120px;margin:0 auto;padding:44px 22px 26px;display:flex;gap:48px;justify-content:space-between;flex-wrap:wrap}
.lp-footer-brand{max-width:360px}
.lp-footer-brand img{width:150px;height:auto;display:block;margin-bottom:14px;filter:brightness(0) invert(1)}
.lp-footer-brand p{font-size:12.5px;line-height:1.9;color:#9DAFA7}
.lp-footer-nav{display:grid;grid-template-columns:repeat(2,minmax(120px,auto));gap:11px 40px;align-content:start}
.lp-footer-nav a{font-size:13px;color:#C6D2CC;text-decoration:none}
.lp-footer-nav a:hover{color:#fff;text-decoration:underline}
.lp-footer-copy{max-width:1120px;margin:0 auto;padding:0 22px 26px;font-size:11.5px;color:#7C8D86}
@media(max-width:820px){
  html{scroll-padding-top:62px}
  .lp-header-inner{padding:9px 16px;gap:10px}
  .lp-header-logo img{width:104px}
  .lp-header-nav{gap:0}
  .lp-header-nav a:not(.lp-header-cta),.lp-header-nav .lp-nav-item{display:none}
  .lp-header-cta{padding:8px 15px;font-size:12px !important}
  .lp-menu-btn{display:flex}
  .lp-footer-inner{gap:28px;padding:32px 18px 20px}
  .lp-footer-copy{padding:0 18px 20px}
}