@charset "UTF-8";
/* ==========================================================================
   受託開発LP（/development/）
   Figma: PlayGround_PD_riepon ✏️[ノーコード]LP作成 / 👑LP (2183:14048)
   ========================================================================== */

.nc-development-template #content {
  padding-top: 0 !important;
}

.nc-development-page {
  /* color tokens */
  --navy: #1b224c;
  --navy-deep: #0b143c;
  --orange: #ff8b08;
  --blue: #21339e;
  --ink: #222;
  --ink-2: #333;
  --ink-sub: #555;
  --ink-mute: #666;
  --ink-body: #0d233a;
  --ink-soft: #5d6370;
  --ink-faint: #747c91;
  --surface: #f7f9fc;
  --card: #f5f7fc;
  --panel: #f4f6fb;
  --chip: #e8e9ed;
  --accent-soft: #fff3d9;
  --line: #d0d0d0;
  --deco-light: #e6e7eb;
  --deco-dark: #bdc0ce;
  --opt-border: #e5e7eb;
  --opt-active-bg: #e9ebf7;
  --opt-active-border: #343e78;
  --wedge: #e3e7ef;

  /* type tokens */
  --jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;
  --en: "Jost", "Noto Sans JP", system-ui, sans-serif;

  position: relative;
  width: 100%;
  color: var(--ink);
  background: #fff;
  font-family: var(--jp);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
}

.nc-development-page *,
.nc-development-page *::before,
.nc-development-page *::after {
  box-sizing: border-box;
}

.nc-development-page a {
  color: inherit;
  text-decoration: none !important;
}

.nc-development-page img {
  max-width: 100%;
  height: auto;
}

/* :where() で詳細度を 0 にして、後続のクラス指定（margin-top など）が必ず勝つようにする */
.nc-development-page :where(h1, h2, h3, h4, p, ul, ol, li) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* アイコンフォントはベースラインで配置されるため、そのままだと文字と光学中心がずれる。
   1em の正方形ボックスにして中央寄せし、テーマ側の margin / line-height も打ち消す。 */
.nc-development-page .material-symbols-outlined {
  display: inline-flex !important;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  line-height: 1 !important;
  text-align: center;
  vertical-align: middle;
}

/* ---------- スクロールで「ふわっと」表示 ---------- */
/* .dev-reveal はJSが画面外の要素にだけ付与するため、JS無効時やファーストビュー内では常に表示される */
.dev-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dev-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .dev-reveal,
  .dev-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 共通レイアウト ---------- */
.dev-wrap {
  width: 100%;
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: 20px;
}

.dev-section {
  position: relative;
  padding-block: clamp(56px, 7vw, 98px);
}

/* ---------- セクション見出し ---------- */
.dev-head {
  margin-bottom: clamp(36px, 5vw, 64px);
  text-align: center;
}

.dev-head-en {
  font-family: var(--en);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: 0.01em;
}

.dev-head-ja {
  margin-top: 6px;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  color: var(--ink);
}

.dev-head-lead {
  margin-top: clamp(18px, 2.4vw, 32px);
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}

/* ---------- 共通ボタン ---------- */
.dev-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 6vw, 100px);
  margin-top: clamp(28px, 4vw, 44px);
}

/* テーマ側のリンク装飾に負けないよう、アイコンと文字の配置を明示的に固定する */
.nc-development-page .dev-btn {
  display: inline-flex !important;
  box-sizing: border-box;
  align-items: center !important;
  justify-content: center !important;
  gap: 9.6px;
  min-width: min(338px, 100%);
  padding: 19px 28.8px;
  border: 0;
  border-radius: 80px;
  font-size: clamp(15px, 1.5vw, 19.2px);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.5 !important;
  text-align: center;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
  transition: transform 0.2s ease, filter 0.2s ease, background-color 0.2s ease;
}

.nc-development-page .dev-btn .material-symbols-outlined {
  font-size: 23.2px;
  color: inherit;
}

.dev-btn:hover {
  transform: translateY(-2px);
}

.dev-btn--primary {
  color: #fff !important;
  background: var(--orange);
}

.dev-btn--white {
  color: var(--navy) !important;
  background: #fff;
}

.dev-btn--navy {
  color: #fff !important;
  background: var(--navy);
}

/* ---------- 共通タグ（ピル） ---------- */
.dev-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.dev-tags li,
.dev-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1.25px solid var(--navy);
  border-radius: 999px;
  font-size: clamp(12px, 1.15vw, 13.8px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--navy);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.dev-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
}

.dev-hero-media {
  position: absolute;
  inset: 0 0 clamp(96px, 10vw, 144px) 0;
  z-index: 0;
  background: #101a3d;
}

.dev-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.dev-hero-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 9, 78, 0.3);
}

/* 左側の薄い紺色の装飾（Figma: Rectangle 5 / 752×944 の斜めシェイプ） */
.dev-hero-wedge {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 52.2%;
  background: rgba(27, 34, 76, 0.5);
  clip-path: polygon(0 0, 100% 0, 47.5% 100%, 0 100%);
}

.dev-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(56px, 14vw, 203px);
  padding-right: 16px;
  padding-bottom: clamp(48px, 9vw, 130px);
  padding-left: clamp(20px, 6.4vw, 92px);
  color: #fff;
}

.dev-hero-eyebrow {
  font-size: clamp(17px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.4;
}

.dev-hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: clamp(16px, 2.2vw, 32px);
}

.dev-hero-title span {
  display: inline-block;
  position: relative;
  isolation: isolate;
  padding: 10px 24px;
  background: transparent;
  font-size: clamp(23px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.dev-hero-title span::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  transform: skewX(-24deg);
  background: var(--navy);
  content: "";
}

.dev-hero-lead {
  max-width: 1332px;
  margin-top: clamp(18px, 2.2vw, 32px);
  font-size: clamp(13px, 1.65vw, 24px);
  font-weight: 500;
  line-height: 1.6;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.dev-hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  width: 680px;
  max-width: 100%;
  gap: 18px;
  margin-top: clamp(22px, 2.2vw, 32px);
}

.dev-hero-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 14px 20px;
  border-radius: 99999px;
  font-size: clamp(14px, 1.65vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #fff !important;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.dev-hero-btn svg { width:22px; height:22px; flex:0 0 22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.nc-development-page .dev-hero-btn svg path { fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

.dev-hero-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.dev-hero-btn--primary {
  background: var(--orange);
}

.dev-hero-btn--secondary {
  background: var(--navy);
}

.dev-hero-metrics {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: clamp(96px, 10vw, 144px);
  background: #fff;
}

.dev-hero-metrics-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  width: 100%;
  padding-left: clamp(20px, 6.4vw, 92px);
  padding-right: clamp(20px, 3.5vw, 50px);
}

.dev-hero-metric {
  position: relative;
  flex: 0 1 221px;
  color: var(--navy);
  text-align: center;
}

.dev-hero-metric + .dev-hero-metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: clamp(36px, 4.4vw, 64px);
  border-left: 1px solid var(--navy);
  transform: translateY(-50%);
}

.dev-hero-metric-label {
  font-size: clamp(11px, 1.4vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.dev-hero-metric-value {
  font-size: clamp(22px, 3.3vw, 48px);
  font-weight: 700;
  line-height: 1.2;
}

.dev-hero-metric-value em {
  font-size: 0.62em;
  font-style: normal;
}

/* Keep the photo, copy and metric strip together on desktop and tablet. */
@media (min-width: 761px) {
  .dev-hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - var(--swl-headerH, 64px));
  }

  .dev-hero-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(24px, 4svh, 56px);
  }

  .dev-hero-eyebrow { font-size: clamp(20px, 3svh, 32px); }
  .dev-hero-title { margin-top: clamp(16px, 2svh, 28px); }
  .dev-hero-title span { padding-block: 8px; font-size: clamp(32px, min(4.4vw, 6.2svh), 64px); }
  .dev-hero-lead { margin-top: clamp(16px, 2svh, 28px); font-size: clamp(16px, 2.25svh, 24px); }
  .dev-hero-actions { margin-top: clamp(16px, 2svh, 28px); }
  .dev-hero-btn { font-size: clamp(16px, 2.3svh, 24px); }
  .dev-hero-metrics { flex-shrink: 0; }
}

@media (max-width:1024px) {
  .dev-hero-btn { min-height:64px; }
}
@media (max-width:767px) {
  .dev-hero-btn { min-height:58px; gap:8px; }
  .dev-hero-btn svg { width:18px; height:18px; flex-basis:18px; }
}

/* ==========================================================================
   支援企業ロゴ
   ========================================================================== */
.dev-logos {
  padding: 0;
  background: #fff;
}

.dev-logo-marquee {
  overflow: hidden;
  width: 100%;
  margin-top: 60px;
  padding: 12px 0;
}

.dev-logo-track {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  animation: dev-logo-scroll 70s linear infinite;
}

.dev-logo-item {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 100px;
  padding: 12px;
  box-sizing: border-box;
}

.dev-logo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes dev-logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 4px)); }
}

@media (max-width: 600px) {
  .dev-logo-item {
    flex-basis: 160px;
    width: 160px;
    height: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dev-logo-track { animation: none; }
}

/* ==========================================================================
   お悩み
   ========================================================================== */
.dev-worry {
  padding-block: clamp(48px, 6vw, 80px) clamp(32px, 4vw, 56px);
  background: #fff;
}

.dev-worry-title {
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
  text-align: center;
}

.dev-worry-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(40px, 5.6vw, 80px);
}

/* セクション間の区切り線（中央に下向きのV字ノッチ） */
.dev-worry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dev-worry-balloon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 128px;
  padding: 24px 14px;
  border-radius: 24px;
  background: #f6f6f7;
  text-align: center;
}

.dev-worry-balloon::after {
  position: absolute;
  bottom: -12px;
  left: calc(50% - 13px);
  border-top: 15px solid #f6f6f7;
  border-right: 13px solid transparent;
  border-left: 13px solid transparent;
  content: "";
}

.dev-worry-balloon span { display: block; font-size: 16px; line-height: 1.8; }
.dev-worry-balloon .is-sub { font-weight: 500; color: var(--ink); }
.dev-worry-balloon .is-main { font-weight: 700; color: var(--navy); }

.dev-worry-figure {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: clamp(120px, 14vw, 170px);
  min-height: clamp(120px, 14vw, 170px);
  margin-top: 24px;
}

.dev-worry-role {
  margin-top: 4px;
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 500;
  color: var(--ink-sub);
  text-align: center;
}

/* ==========================================================================
   WHY US
   ========================================================================== */
/* Development solution, matching the training illustrations and layout. */
.dev-solution { position:relative; isolation:isolate; overflow:hidden; padding:172px 0 100px; color:var(--navy); background:#e4e9f4; clip-path:polygon(0 0,50% 96px,100% 0,100% 100%,0 100%); }
.dev-solution::before { position:absolute; z-index:-1; inset:0; background:#d0d6e4; clip-path:polygon(100% 0,100% 100%,65% 100%); content:""; }
.dev-solution__eyebrow { font-size:27px; font-weight:600; letter-spacing:.06em; text-align:center; }
.dev-solution h2 { margin-top:16px; font-size:44px; font-weight:800; text-align:center; letter-spacing:.02em; }
.dev-solution h2 span { display:inline-block; position:relative; z-index:0; padding:3px 25px 8px; margin-right:8px; color:#fff; }
.dev-solution h2 span::before { position:absolute; z-index:-1; inset:0; background:var(--navy); transform:skew(-16deg); content:""; }
.dev-solution__grid { display:grid; grid-template-columns:1fr 44px 1fr 44px 1fr; align-items:center; margin-top:62px; }
.dev-solution article { position:relative; aspect-ratio:1; border-radius:50%; background:#fff; text-align:center; }
.dev-solution article img { position:absolute; top:-7%; left:11%; width:78%; height:68%; margin:0; object-fit:contain; }
.dev-solution article p { position:absolute; top:70%; left:0; width:100%; margin:0; padding:0; color:#24262c; font-size:17px; font-weight:600; line-height:1.7; }
.dev-solution__cross { position:relative; z-index:1; width:54px; height:54px; margin-left:-5px; }
.dev-solution__cross::before,.dev-solution__cross::after { position:absolute; top:24px; left:0; width:54px; height:6px; background:var(--navy); transform:rotate(45deg); content:""; }
.dev-solution__cross::after { transform:rotate(-45deg); }
@media (max-width:1024px) {
  .dev-solution { padding:125px 0 72px; clip-path:polygon(0 0,50% 64px,100% 0,100% 100%,0 100%); }
  .dev-solution__eyebrow { font-size:24px; }
  .dev-solution h2 { font-size:36px; }
  .dev-solution__grid { grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr); margin-top:46px; }
  .dev-solution article p { font-size:15px; }
  .dev-solution__cross { width:36px; height:36px; margin-left:-3px; }
  .dev-solution__cross::before,.dev-solution__cross::after { top:16px; width:36px; height:5px; }
}
@media (max-width:767px) {
  .dev-solution { --dev-solution-slope:clamp(72px,20vw,128px); padding:88px 0 calc(var(--dev-solution-slope) + 24px); clip-path:polygon(0 0,50% 38px,100% 0,100% 100%,0 100%); }
  .dev-solution::before { inset:auto 0 0; height:var(--dev-solution-slope); clip-path:polygon(0 100%,100% 0,100% 100%); }
  .dev-solution__eyebrow { font-size:clamp(18px,4.3vw,23px); letter-spacing:.03em; }
  .dev-solution h2 { margin-top:14px; font-size:clamp(24px,5.4vw,32px); }
  .dev-solution h2 span { margin-right:4px; padding:3px 12px 6px; }
  .dev-solution__grid { grid-template-columns:minmax(0,1fr); gap:44px; margin-top:48px; justify-items:center; }
  .dev-solution article { width:min(100%,300px); }
  .dev-solution article p { font-size:16px; }
  .dev-solution__cross { width:32px; height:32px; margin:0; }
  .dev-solution__cross::before,.dev-solution__cross::after { top:14px; width:32px; height:4px; }
}

.dev-why {
  background: #fff;
}

.dev-why-list {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 7vw, 104px);
}

.dev-why-item {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(24px, 3.4vw, 48px);
  row-gap: 24px;
}

.dev-why-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dev-point {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 191px;
  max-width: 100%;
  height: 45px;
  padding-inline: 20px;
  background: var(--navy);
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  font-family: var(--en);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
}

.dev-why-heading {
  font-size: clamp(19px, 2.3vw, 28px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy);
}

.dev-why-text {
  font-size: clamp(14px, 1.45vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
}

.dev-why-figure {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-why-figure img {
  width: auto;
  max-width: min(100%, 340px);
  /* 正方形の画像（POINT 04）だけ縦に大きくならないよう高さも制限する */
  max-height: 240px;
  height: auto;
}

.dev-why-figure--badge img {
  max-width: min(100%, 180px);
  max-height: 180px;
}

.dev-why-notes {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 712px;
}

.dev-why-note {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--navy);
}

.dev-why-note b {
  font-weight: 400;
}

/* 紺の丸 + 白アイコン */
.dev-why-note-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
}

.dev-why-note-icon .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 20;
  color: #fff;
}

/* 2行に折り返さず1行で収める（狭い画面では折り返しを許可） */
.dev-why-note-text {
  white-space: nowrap;
}

.dev-why-note--plain {
  background: var(--chip);
}

.dev-why-note--accent {
  background: var(--accent-soft);
}

/* ==========================================================================
   CTA帯
   ========================================================================== */
.dev-cta { position:relative; isolation:isolate; overflow:hidden; padding:62px 0; background:var(--navy); color:#fff; }
.dev-cta::before { position:absolute; z-index:-1; inset:0; background:#2b3566; clip-path:polygon(70% 0,100% 0,100% 100%,57% 100%); content:""; }
.dev-cta-inner { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(330px,1fr); align-items:center; gap:56px; width:calc(100% - 96px); max-width:1120px; padding:0; }
.dev-cta-title { color:#fff; font-size:28px; font-weight:700; letter-spacing:-.025em; }
.dev-cta-text { max-width:540px; margin-top:15px; color:#e2e5ef; font-size:14px; line-height:1.9; }
.dev-cta-actions { min-width:0; }
.nc-development-page .dev-cta .dev-btn { width:100%; min-width:0; min-height:90px; padding:16px 20px; gap:16px; border-radius:999px; font-size:22px; font-weight:900; letter-spacing:normal; box-shadow:none; filter:none; }
.dev-cta .dev-btn svg { width:22px; height:22px; flex:0 0 22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

@media (max-width:1024px) {
  .dev-cta { padding-block:48px; }
  .dev-cta-inner { width:calc(100% - 64px); grid-template-columns:minmax(0,1fr); gap:28px; }
  .dev-cta-text { max-width:none; }
  .dev-cta-actions { width:min(100%,420px); }
  .nc-development-page .dev-cta .dev-btn { min-height:76px; font-size:20px; }
}
@media (max-width:767px) {
  .dev-cta { padding-block:40px; }
  .dev-cta::before { clip-path:polygon(0 100%,100% 37%,100% 100%); }
  .dev-cta-inner { width:calc(100% - 40px); gap:24px; justify-items:center; text-align:center; }
  .dev-cta-title { font-size:24px; }
  .dev-cta-actions { width:100%; }
  .nc-development-page .dev-cta .dev-btn { min-height:64px; gap:8px; padding:15px 16px; font-size:clamp(16px,3.8vw,20px); }
}

/* ==========================================================================
   SCOPE OF SERVICES
   ========================================================================== */
.dev-scope {
  overflow: hidden;
  /* 下部は斜め装飾のための余白を大きく取る（Figma: 最後のタグ下に320px） */
  padding-bottom: clamp(80px, 22vw, 320px);
  background: var(--surface);
}

/* 背景の斜め装飾（Figma: Group 302 / Rectangle 163 / Group 303 / Rectangle 164）
   aspect-ratio で角度を固定したまま画面幅に追随させる */
.dev-scope-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.dev-scope-deco--tl {
  top: 0;
  left: 0;
  width: 86.39%;
  aspect-ratio: 1244 / 462;
  background: var(--deco-light);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.dev-scope-deco--tr {
  top: 0;
  left: 55.76%;
  width: 44.24%;
  aspect-ratio: 637 / 338;
  background: var(--deco-dark);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.dev-scope-deco--br {
  bottom: 0;
  left: 14.1%;
  width: 85.9%;
  aspect-ratio: 1237 / 459;
  background: var(--deco-light);
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

.dev-scope-deco--bl {
  bottom: 0;
  left: 0;
  width: 48.13%;
  aspect-ratio: 693 / 367;
  background: var(--deco-dark);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.dev-scope > .dev-wrap {
  position: relative;
  z-index: 1;
}

.dev-scope-list {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4vw, 56px);
}

.dev-scope-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  column-gap: clamp(24px, 3.4vw, 48px);
  row-gap: 24px;
}

.dev-scope-item--reverse .dev-scope-copy { order: 2; }
.dev-scope-item--reverse .dev-scope-figure { order: 1; }

.dev-scope-heading {
  font-family: var(--en);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--navy);
}

.dev-scope-text {
  margin-top: 16px;
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--navy);
}

.dev-scope-copy .dev-tags {
  max-width: 480px;
}

.dev-scope-figure img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-inline: auto;
}

/* ==========================================================================
   PRICE SIMULATOR
   ========================================================================== */
.dev-simulator {
  background: #fff;
}

.estimate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 378px;
  align-items: start;
  gap: 20px;
}

.estimate-questions {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.6vw, 34px);
}

.estimate-question {
  margin-bottom: 14px;
  font-size: clamp(15px, 1.6vw, 20.5px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-2);
}

.estimate-question em {
  margin-right: 6px;
  font-size: clamp(16px, 1.75vw, 22px);
  font-style: normal;
  font-weight: 500;
}

.estimate-question small {
  font-size: 0.86em;
  font-weight: 500;
}

.estimate-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.nc-development-page .estimate-option {
  display: flex !important;
  box-sizing: border-box;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-height: 56px;
  padding: 8px;
  border: 2.5px solid var(--opt-border);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: clamp(15px, 1.45vw, 19px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.nc-development-page .estimate-option .material-symbols-outlined {
  font-size: 24px;
  flex-shrink: 0;
  color: var(--navy);
}

.estimate-option:hover {
  border-color: #c8cee6;
}

.estimate-option.is-active {
  border-color: var(--opt-active-border);
  background: var(--opt-active-bg);
}

/* --- 見積り結果パネル --- */
.estimate-summary {
  position: sticky;
  top: 96px;
}

.estimate-result {
  padding: 24px 20px;
  border-radius: 5px;
  background: var(--panel);
}

.estimate-result-head {
  text-align: center;
}

.estimate-result-en {
  font-family: var(--en);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy);
}

.estimate-result-ja {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.estimate-result-note {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
}

.estimate-totals {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.estimate-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px;
  border-radius: 5px;
  background: #fff;
}

.estimate-total-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-2);
}

.estimate-total-label .material-symbols-outlined {
  font-size: 25px;
  color: var(--ink-2);
}

.estimate-total strong {
  font-size: clamp(26px, 2.6vw, 35px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}

.estimate-restart {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 4px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--navy);
  cursor: pointer;
}

.estimate-restart:hover {
  text-decoration: underline;
}

.estimate-result-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}

.nc-development-page .estimate-result-actions .dev-btn {
  width: 100%;
  min-width: 0;
}

.estimate-selected {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e2e6f2;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-mute);
}

.estimate-selected strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}

.estimate-selected ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ==========================================================================
   FLOW
   ========================================================================== */
/* 上辺が中央でへこむV字、下辺はわずかに右下がり（Figma: Vector 2 / 1400×1624） */
.dev-flow {
  --dip: clamp(36px, 8.4vw, 121px);
  padding-block: clamp(120px, 14.5vw, 209px) clamp(72px, 11vw, 160px);
  background: var(--surface);
  clip-path: polygon(0 0, 48.6% var(--dip), 100% 0, 100% 100%, 0 calc(100% - 22px));
}

.dev-flow-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 34px;
}

.dev-flow-list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  border-left: 2px dashed #415a77;
  transform: translateX(-1px);
}

.dev-flow-item {
  position: relative;
  width: 440px;
  max-width: calc(50% - 72px);
}

.dev-flow-item:nth-child(even) {
  margin-left: auto;
}

.dev-flow-item::after {
  content: "";
  position: absolute;
  top: 71px;
  width: 28px;
  height: 28px;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--navy);
}

.dev-flow-item:nth-child(odd)::after {
  right: -72px;
  transform: translateX(50%);
}

.dev-flow-item:nth-child(even)::after {
  left: -72px;
  transform: translateX(-50%);
}

.dev-flow-card {
  position: relative;
  min-height: 178px;
  padding: 44px 190px 20px 21px;
  border-radius: 12px;
  background: #fff;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}

.dev-flow-item:hover .dev-flow-card,
.dev-flow-item:focus-within .dev-flow-card {
  transform: scale(1.035);
  box-shadow: 0 14px 32px rgba(27, 34, 76, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .dev-flow-card {
    transition: none;
  }

  .dev-flow-item:hover .dev-flow-card,
  .dev-flow-item:focus-within .dev-flow-card {
    transform: none;
  }
}

.dev-flow-step {
  position: absolute;
  top: -30px;
  left: 21px;
  font-family: var(--en);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}

.dev-flow-heading {
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
}

.dev-flow-text {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-body);
}

.dev-flow-figure {
  position: absolute;
  right: 4px;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 180px;
  height: 100%;
  pointer-events: none;
}

.dev-flow-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
}

/* ==========================================================================
   CASE STUDY
   ========================================================================== */
.dev-case {
  background: #fff;
}

.dev-case-projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.dev-case-project {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 22px;
  border-radius: 16px;
  background: var(--card);
}

.dev-case-project-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.dev-case-project-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dev-case-project .dev-tag {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 11px;
}

.dev-case-project-title {
  margin-top: 10px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy-deep);
}

.dev-case-project-text {
  margin-top: 12px;
  font-size: clamp(13px, 1.25vw, 14px);
  font-weight: 400;
  line-height: 1.9;
  color: var(--ink-soft);
}

.dev-case-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.dev-case-fact {
  padding: 13px 15px;
  border-radius: 9px;
  background: #fff;
}

.dev-case-fact small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-faint);
}

.dev-case-fact strong {
  display: block;
  margin-top: 3px;
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 700;
  color: var(--navy);
}

.dev-case-others {
  margin-top: clamp(32px, 3.4vw, 48px);
}

.dev-case-others-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.dev-case-other-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.dev-case-other {
  display: flex;
  flex-direction: column;
  padding: 9px 9px 13px;
  border-radius: 10px;
  background: var(--card);
}

.dev-case-other-image {
  height: 104px;
  overflow: hidden;
  border-radius: 7px;
  background: #fff;
}

.dev-case-other-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dev-case-other h4 {
  margin: 11px 3px 9px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy-deep);
}

.dev-case-other-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: auto 3px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
}

.dev-case-other-link .material-symbols-outlined {
  font-size: 14px;
}

.dev-case-other-link:hover {
  text-decoration: underline !important;
}

.dev-case-archive {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: min(420px, 100%);
  min-width: 0;
  min-height: 68px;
  margin: clamp(24px, 2.6vw, 32px) auto 0;
  padding: 16px 20px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 999px;
  background: var(--navy);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: #fff !important;
  transition: transform 0.2s ease;
}

.dev-case-archive:hover {
  transform: translateY(-2px);
}

.dev-case-archive .material-symbols-outlined {
  font-size: 26px;
  flex-shrink: 0;
  color: #fff;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
/* Training-style question bands; retain the development accordion behavior. */
.dev-faq { background: #fff; }
.dev-faq .faq { display: grid; gap: 16px; }
.dev-faq .faq-item { border: 0; }
.nc-development-page .faq-question {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: 48px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 25px 30px;
  border: 0;
  background: #f5f6fa;
  color: var(--navy);
  font-family: inherit;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .01em;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color .2s;
}
.nc-development-page .faq-question:hover { background: #eceff6; }
.nc-development-page .faq-question:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.dev-faq .faq-number { font: 700 38px/1.2 Inter, sans-serif; letter-spacing: -.06em; }
.dev-faq .faq-toggle { position: relative; width: 30px; height: 30px; }
.dev-faq .faq-toggle::before,
.dev-faq .faq-toggle::after {
  position: absolute; top: 14px; left: 4px; width: 22px; height: 2px;
  border-radius: 2px; background: currentColor; content: "";
}
.dev-faq .faq-toggle::after { transform: rotate(90deg); transition: transform 280ms cubic-bezier(.22,1,.36,1), opacity 220ms; }
.dev-faq .faq-item.is-open .faq-toggle::after { transform: rotate(180deg); opacity: 0; }
.dev-faq .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.dev-faq .faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.dev-faq .faq-answer-inner { overflow: hidden; min-height: 0; }
.dev-faq .faq-answer-inner p {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px;
  margin: 0; padding: 27px 30px 31px;
  color: #343741; font-size: 16px; font-weight: 400; line-height: 2.05; overflow-wrap: anywhere;
}
.dev-faq .faq-a { padding-top: 2px; color: var(--navy); font: 600 27px/1.45 Inter, sans-serif; letter-spacing: -.05em; }
@media (max-width: 1024px) {
  .nc-development-page .faq-question { grid-template-columns: 40px minmax(0, 1fr) 30px; gap: 14px; padding: 22px 24px; font-size: 19px; }
  .dev-faq .faq-number { font-size: 32px; }
  .dev-faq .faq-answer-inner p { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 24px; }
}
@media (max-width: 767px) {
  .dev-faq .faq { gap: 12px; }
  .nc-development-page .faq-question { grid-template-columns: 28px minmax(0, 1fr) 24px; gap: 9px; padding: 20px 14px; font-size: 16px; line-height: 1.75; }
  .dev-faq .faq-number { font-size: 26px; }
  .dev-faq .faq-toggle { width: 24px; height: 24px; }
  .dev-faq .faq-toggle::before, .dev-faq .faq-toggle::after { top: 11px; left: 3px; width: 18px; }
  .dev-faq .faq-answer-inner p { grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 22px 14px; font-size: 15px; line-height: 1.95; }
  .dev-faq .faq-a { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .dev-faq .faq-toggle::after, .nc-development-page .faq-question, .dev-faq .faq-answer { transition: none; }
}

/* ==========================================================================
   最終CTA
   ========================================================================== */
/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 1024px) {
  .estimate-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 40px);
  }

  .estimate-summary {
    position: static;
    order: 1;
  }

  .estimate-result-actions {
    flex-direction: row;
  }

  .dev-case-other-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dev-why-item,
  .dev-scope-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .dev-why-figure,
  .dev-scope-figure {
    order: 2;
  }

  .dev-why-item--01 .dev-why-notes {
    order: 3;
  }

  .dev-scope-item--reverse .dev-scope-copy,
  .dev-scope-item--reverse .dev-scope-figure {
    order: initial;
  }

  .dev-scope-item--reverse .dev-scope-figure {
    order: 2;
  }

  .dev-flow-list {
    --flow-axis: 13px;
    padding-top: 34px;
    gap: 64px;
  }

  .dev-flow-list::before {
    top: 18.4px;
    left: var(--flow-axis);
    transform: translateX(-1px);
  }

  .dev-flow-item,
  .dev-flow-item:nth-child(even) {
    width: calc(100% - 40px);
    max-width: none;
    margin-left: 40px;
    margin-right: 0;
  }

  .dev-flow-item::after,
  .dev-flow-item:nth-child(odd)::after,
  .dev-flow-item:nth-child(even)::after {
    right: auto;
    top: calc(-30px + 14.4px);
    left: calc(var(--flow-axis) - 40px);
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 760px) {
  /* Landscape photo, a three-column facts strip, then the existing actions. */
  .dev-hero {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 16px;
    grid-template-rows: minmax(16px, 1fr) auto auto auto auto auto;
    align-items: stretch;
  }
  .dev-hero-media { position: relative; inset: auto; grid-area: 1 / 1 / 5 / -1; min-height: 62.5vw; }
  .dev-hero-media img { position: absolute; inset: 0; object-position: center 32%; }
  .dev-hero-scrim { background: linear-gradient(0deg, rgba(15,22,53,.78), rgba(15,22,53,.4) 30%, rgba(15,22,53,.06) 65%); }
  .dev-hero-wedge { position: relative; inset: auto; grid-area: 1 / 1 / 5 / -1; width: 100%; background: rgba(46,56,98,.90); clip-path: polygon(0 0,57% 0,25% 100%,0 100%); }
  .dev-hero-inner { display: contents; }
  .dev-hero-eyebrow, .dev-hero-title, .dev-hero-lead { position: relative; z-index: 2; color: #fff; }
  .dev-hero-eyebrow { grid-area: 2 / 2; margin: 0; padding-top: 0; font-size: 16px; }
  .dev-hero-title { grid-area: 3 / 2; margin-top: 12px; gap: 4px; }
  .dev-hero-title span { position: relative; isolation: isolate; padding: 4px 10px; background: transparent; font-size: clamp(17px, 4.8vw, 30px); letter-spacing: -.025em; white-space: nowrap; }
  .dev-hero-lead { grid-area: 4 / 2; margin-top: 12px; padding-bottom: 16px; font-size: clamp(12px, 3.2vw, 16px); line-height: 1.7; }
  .dev-hero-metrics { grid-area: 5 / 1 / 6 / -1; min-height: 0; padding: 18px 12px; }
  .dev-hero-metrics-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; }
  .dev-hero-metric { display: block; min-width: 0; padding: 0 6px; }
  .dev-hero-metric + .dev-hero-metric::before { height: 36px; }
  .dev-hero-metric-label { font-size: clamp(9px, 2.6vw, 13px); line-height: 1.6; white-space: nowrap; }
  .dev-hero-metric-value { margin-top: 3px; font-size: clamp(24px, 6.4vw, 36px); white-space: nowrap; }
  .dev-hero-metric-value em { font-size: .52em; }
  .dev-hero-actions { grid-area: 6 / 2; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 12px; margin: 0; padding-bottom: 24px; }
  .dev-hero-btn { flex-direction: row; width: 100%; min-width: 0; min-height: 58px; padding: 14px 18px; font-size: 17px; box-shadow: none; }

  .dev-worry-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .dev-worry-balloon {
    min-height: 112px;
    padding: 20px 12px;
  }


  .estimate-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .estimate-result-actions {
    flex-direction: column;
  }

  .dev-case-projects {
    grid-template-columns: minmax(0, 1fr);
  }

  .dev-case-project-image {
    height: 200px;
  }

  .dev-btn {
    width: 100%;
    min-width: 0;
  }

  .dev-btn-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .dev-flow-card {
    padding: 40px 20px 150px;
    min-height: 0;
  }

  .dev-flow-figure {
    right: 50%;
    width: 150px;
    height: 140px;
    transform: translateX(50%);
  }

  .dev-flow-figure img {
    object-position: bottom center;
  }

  .dev-point {
    width: 168px;
    height: 40px;
  }

  .dev-why-note-text {
    white-space: normal;
  }

}

@media (max-width: 480px) {
  .dev-case-other-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dev-case-other-image {
    height: 150px;
  }


}

/* FV metric band: match the training page's left wedge and right-side figures. */
@media (min-width: 1025px) {
  .dev-hero-metrics::before {
    position: absolute;
    inset: 0;
    background: #929ab2;
    clip-path: polygon(0 0, 29% 0, 25% 100%, 0 100%);
    content: "";
    pointer-events: none;
  }
  .dev-hero-metrics-inner {
    position: relative;
    width: 72%;
    margin-left: auto;
    padding: 0 44px 0 22px;
  }
  .dev-hero-metric {
    min-width: 0;
    padding: 0 clamp(18px, 1.9vw, 32px);
    text-align: left;
  }
  .dev-hero-metric + .dev-hero-metric::before {
    border-left: 1px dashed #7c8195;
  }
}