/* ==========================================================================
   Editorial sub pages (services.html / cases.html) — shared kit (.pg-*)
   トップページと同じ「紺の文字と余白、オレンジは一点だけ」の調子を下層ページに広げる。
   イラストは生成りの紙に紺の線で描いているので、面も同じ紙色で受けて境目を消す。
   body に .pg を付けたページだけで読み込む（style.css の共通部品には手を入れない）。
   ========================================================================== */
.pg {
  --pg-ink: #152b3d;
  --pg-muted: #56636f;
  --pg-soft: #7a8792;
  --pg-line: #e4ddd1;
  --pg-line-cool: #dde5eb;
  --pg-paper: #f8f4ea;
  --pg-paper-deep: #f2ecdf;
  --pg-cool: #f4f7f9;
  --pg-blue: #2f6a92;
  --pg-night: #0e2133;
  --pg-night-line: #26394b;
}
.pg main { color: var(--pg-ink); }

/* Sections ----------------------------------------------------------------- */
.pg-section { padding: 120px 0; }
/* 紙色はイラストの書き出し時に合わせた値。面に模様を足すと絵の地との間に段差が出るので無地にする */
.pg-section--paper { background: var(--pg-paper); }

/* 見出しの番号と英字ラベル。番号だけ朱にして、ページの中の現在地を示す */
.pg-eyebrow {
  display: flex; align-items: center; gap: 14px; width: fit-content;
  font-size: 12.5px; font-weight: 600; line-height: 1.6; letter-spacing: .16em;
  text-transform: uppercase; color: #48667d; font-feature-settings: "palt";
}
.pg-eyebrow__num {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--color-primary-dark); letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.pg-eyebrow__num::after { content: ""; width: 32px; height: 1px; background: #b9c7d1; }
.pg-title {
  margin-top: 16px; font-size: clamp(28px, 3.1vw, 42px); font-weight: 600;
  line-height: 1.5; letter-spacing: -.015em; color: var(--pg-ink);
}
.pg-head {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px 80px; align-items: end; margin-bottom: 64px;
}
.pg-head__lead { color: var(--pg-muted); font-size: 15px; line-height: 2.05; max-width: 520px; }
.pg-head--stack { grid-template-columns: minmax(0, 1fr); max-width: 860px; }

/* Text link with a round arrow (same gesture as the homepage) -------------- */
.pg-link {
  display: inline-flex; align-items: center; gap: 16px; min-height: 44px;
  font-size: 14px; font-weight: 600; letter-spacing: .04em; line-height: 1.6;
  color: var(--pg-ink); font-feature-settings: "palt";
}
.pg-link::after {
  content: "→"; display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border: 1px solid #c3d1db; border-radius: 50%;
  font-size: 13px; line-height: 1; color: var(--pg-blue);
  transition: background-color .25s, border-color .25s, color .25s, transform .3s var(--ease-out);
}
.pg-link:hover::after, .pg-link:focus-visible::after { background: var(--pg-ink); border-color: var(--pg-ink); color: #fff; }
.pg-link.ext::after { content: "↗"; font-size: 13px; color: var(--pg-blue); }
.pg-link.ext:hover::after, .pg-link.ext:focus-visible::after { color: #fff; }
.pg-link--light { color: #f3f7fa; }
.pg-link--light::after { border-color: #4a6378; color: #bfe0f5; }
.pg-link--light:hover::after, .pg-link--light:focus-visible::after { background: #fff; border-color: #fff; color: var(--pg-ink); }

/* 紺の副ボタン（オレンジの主ボタンの隣に置く） */
.btn--ink { background: transparent; color: var(--pg-ink); border-color: #b7c6d1; }
.btn--ink:hover { background: var(--pg-ink); border-color: var(--pg-ink); color: #fff; }

/* Hero ---------------------------------------------------------------------- */
.pg-hero { position: relative; overflow: hidden; background: var(--pg-paper); border-bottom: 1px solid var(--pg-line); }
.pg-hero .breadcrumb { padding-top: 22px; }
.pg-hero .breadcrumb [aria-current] { color: var(--pg-ink); }
.pg-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 24px 56px; align-items: center; padding: 28px 0 64px;
}
.pg-hero__copy > * { animation: hero-rise .7s var(--ease-out) both; }
.pg-hero__copy > :nth-child(2) { animation-delay: .06s; }
.pg-hero__copy > :nth-child(3) { animation-delay: .12s; }
.pg-hero__copy > :nth-child(4) { animation-delay: .18s; }
.pg-hero__copy > :nth-child(5) { animation-delay: .24s; }
.pg-hero__copy > :nth-child(6) { animation-delay: .3s; }
.pg-hero__title {
  margin-top: 18px; font-size: clamp(34px, 4.4vw, 56px); font-weight: 600;
  line-height: 1.3; letter-spacing: -.02em; color: var(--pg-ink);
}
.pg-hero__statement {
  margin-top: 26px; font-size: clamp(18px, 1.75vw, 22px); font-weight: 500;
  line-height: 1.85; letter-spacing: .01em; color: var(--pg-ink); font-feature-settings: "palt";
}
.pg-hero__lead { margin-top: 18px; max-width: 560px; color: var(--pg-muted); font-size: 15px; line-height: 2.05; }
.pg-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.pg-hero__actions .btn { min-height: 52px; padding-inline: 26px; font-size: 14px; }
.pg-hero__actions .btn--primary::after { content: "→"; transition: transform .3s var(--ease-out); }
.pg-hero__actions .btn--primary:hover::after { transform: translateX(3px); }
/* 絵の紙色は書き出し時に --pg-paper へ合わせてある。四辺だけ地へ溶かし、額縁に入れずに面へ直接描いたように見せる */
.pg-hero__art { margin: 0 -12px 0 0; animation: hero-rise .9s .15s var(--ease-out) both; }
.pg-hero__art img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}

/* In-page index: three numbered destinations under the hero ----------------- */
.pg-index {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--pg-line); margin-bottom: 8px;
}
.pg-index a {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 18px; align-items: start; padding: 26px 28px 30px 0;
  transition: color .25s;
}
.pg-index a + a { padding-left: 28px; border-left: 1px solid var(--pg-line); }
.pg-index a::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--color-primary); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.pg-index a:hover::before, .pg-index a:focus-visible::before { transform: scaleX(1); }
.pg-index__num { grid-row: 1 / 3; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--color-primary-dark); padding-top: 3px; font-variant-numeric: tabular-nums; }
.pg-index__name { font-size: 17px; font-weight: 600; line-height: 1.6; letter-spacing: .01em; }
.pg-index__desc { grid-column: 2; font-size: 13px; line-height: 1.85; color: var(--pg-muted); }
.pg-index a::after {
  content: "↓"; grid-column: 3; grid-row: 1 / 3; align-self: center;
  display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #c9d5de;
  border-radius: 50%; font-size: 12px; color: var(--pg-blue);
  transition: background-color .25s, border-color .25s, color .25s, transform .3s var(--ease-out);
}
.pg-index a:hover::after, .pg-index a:focus-visible::after { background: var(--pg-ink); border-color: var(--pg-ink); color: #fff; transform: translateY(2px); }

/* Framed illustration: the same paper, a hairline and a soft corner -------- */
.pg-art { margin: 0; overflow: hidden; border-radius: 24px; background: var(--pg-paper); border: 1px solid var(--pg-line); }
.pg-art img { width: 100%; height: 100%; object-fit: cover; }

/* Closing contact band (navy, like the homepage) ----------------------------- */
.pg-contact { position: relative; isolation: isolate; overflow: hidden; background: var(--pg-night); color: #f3f6f8; padding: 112px 0; }
.pg-contact::before {
  content: ""; position: absolute; z-index: -1; inset: -70% -20% -90% 34%;
  background: url('../assets/hero-signal.svg') center / cover no-repeat; opacity: .32; pointer-events: none;
}
.pg-contact__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px 88px; align-items: center; }
.pg-contact .pg-eyebrow { color: #9fc3dc; }
.pg-contact .pg-eyebrow__num { color: #ffb27a; }
.pg-contact .pg-eyebrow__num::after { background: #4b6479; }
.pg-contact h2 { margin-top: 16px; font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; line-height: 1.55; letter-spacing: -.015em; }
.pg-contact__lead { margin-top: 20px; max-width: 520px; font-size: 15px; line-height: 2.05; color: #bfd0dd; }
.pg-contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 36px; }
.pg-contact .btn--primary { min-height: 58px; padding: 16px 30px; font-size: 14.5px; }
.pg-contact .btn--primary::after { content: "→"; transition: transform .3s var(--ease-out); }
.pg-contact .btn--primary:hover::after { transform: translateX(3px); }

/* 相談の流れ（番号付きの縦の段） */
.pg-steps { counter-reset: pg-step; border-top: 1px solid var(--pg-night-line); }
.pg-steps li {
  counter-increment: pg-step; display: grid; grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px 20px; padding: 22px 0; border-bottom: 1px solid var(--pg-night-line);
}
.pg-steps li::before {
  content: counter(pg-step, decimal-leading-zero); grid-row: 1 / 3;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; color: #ffb27a; padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.pg-steps strong { font-size: 16px; font-weight: 600; letter-spacing: .02em; color: #f3f7fa; }
.pg-steps span { font-size: 13px; line-height: 1.9; color: #a9bccb; }

/* Footer joins the navy close, as on the homepage ----------------------------- */
.pg .footer { background: #08121d; color: #aebecb; border-top: 1px solid #1b2c3d; }
.pg .footer__bottom { border-color: #24313f; color: #91a5b7; }
.pg .footer__pmark span { color: #91a5b7; }
.pg .footer__pmark img { background: #fff; padding: 4px; border-radius: 4px; }

/* Responsive ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .pg-section { padding: 96px 0; }
  .pg-head { gap: 24px 48px; }
  .pg-hero__grid { gap: 24px 32px; }
  .pg-index a { padding-right: 18px; }
  .pg-index a + a { padding-left: 18px; }
  .pg-index a::after { display: none; }
  .pg-contact__inner { gap: 48px; }
}
@media (max-width: 768px) {
  .pg-section { padding: 76px 0; }
  .pg-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 40px; }
  .pg-head__lead { font-size: 14.5px; max-width: none; }
  .pg-hero__grid { grid-template-columns: 1fr; padding: 16px 0 40px; gap: 8px; }
  .pg-hero__art { order: -1; margin: 0 -24px; }
  .pg-hero__statement { margin-top: 18px; }
  .pg-hero__actions { margin-top: 28px; }
  .pg-index { grid-template-columns: 1fr; }
  .pg-index a, .pg-index a + a { padding: 20px 0; border-left: 0; }
  .pg-index a + a { border-top: 1px solid var(--pg-line); }
  .pg-index a::after { display: grid; }
  .pg-contact { padding: 72px 0; }
  .pg-contact__inner { grid-template-columns: 1fr; gap: 40px; }
  .pg-contact::before { inset: -20% -70% -20% 0; opacity: .2; }
  .pg .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .pg .footer__grid > div:first-child { grid-column: 1 / -1; max-width: 440px; }
}
@media (max-width: 480px) {
  .pg-hero__actions .btn, .pg-contact .btn--primary { width: 100%; }
  .pg-steps li { grid-template-columns: 40px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pg-hero__copy > *, .pg-hero__art { animation: none; }
  .pg-link::after, .pg-index a::before, .pg-index a::after { transition: none; }
}