/* 納品実績セクションの改善。既存CSSと前回の差分CSSの末尾に追記。 */

.results {
  padding-block: clamp(72px, 7vw, 104px);
}

/* 見出しと実績一覧を近づけ、納品先名への視線の流れを整える */
.results .results-intro {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: 36px;
}

.results .results-intro .eyebrow {
  margin-bottom: 18px;
}

.results .results-intro h2 {
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.45;
}

.results .results-intro > p {
  margin: 0;
  color: #d7e9f5;
  font-size: 16px;
  line-height: 2;
}

/* 濃紺背景は維持し、実績そのものを白い面で強調 */
.results .result-groups {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  border: 0;
}

.results .result-groups article {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 30px clamp(24px, 2.4vw, 38px);
  color: var(--ink, #081d36);
  background: #fff;
  border: 0;
}

.results .result-groups article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #087bc1, #00a390);
}

.results .result-index {
  position: absolute;
  top: 32px;
  right: clamp(24px, 2.4vw, 38px);
  color: #5a7486;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .1em;
}

.results .result-groups h3 {
  margin: 0 0 12px;
  padding-right: 44px;
  color: #0864a0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .06em;
}

.results .result-groups strong {
  display: block;
  color: var(--ink, #081d36);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.results .result-groups p {
  margin: 20px 0 0;
  padding-top: 18px;
  color: #455e73;
  border-top: 1px solid #dce7ed;
  font-size: 15px;
  line-height: 1.95;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .results .results-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 28px;
  }

  .results .results-intro h2 {
    font-size: clamp(28px, 7.2vw, 36px);
  }

  .results .results-intro > p {
    font-size: 15px;
  }

  .results .result-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .results .result-groups article {
    padding: 26px 22px;
  }

  .results .result-index {
    top: 28px;
    right: 22px;
  }

  .results .result-groups strong {
    font-size: clamp(22px, 5.8vw, 30px);
  }
}

/* ファーストビュー調整：これまでの追加CSSよりも後ろに追記。 */
/* 既存の h1 > span（3行）を利用。HTML・JavaScriptの変更は不要。 */

/* ヘッダーとページ下部の問い合わせ導線はそのまま残す */
.hero .hero-actions .button-primary {
  display: none;
}

.hero .hero-actions {
  gap: 0;
}

/* 強調語の下に、ロゴの青緑から青へつながる細い線 */
.hero .hero-copy > h1 em {
  padding-bottom: .06em;
  background-image: linear-gradient(90deg, #00a390, #087bc1);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 3px;
}

@media (prefers-reduced-motion: no-preference) {
  /* 既存の見出し全体のアニメーションとの二重再生を防ぐ */
  .hero .hero-copy > h1 {
    animation: none;
  }

  .hero .hero-copy > h1 > span {
    animation: bantwo-title-reveal .82s cubic-bezier(.22, 1, .36, 1) both;
  }

  .hero .hero-copy > h1 > span:nth-child(1) {
    animation-delay: .06s;
  }

  .hero .hero-copy > h1 > span:nth-child(2) {
    animation-delay: .19s;
  }

  .hero .hero-copy > h1 > span:nth-child(3) {
    animation-delay: .32s;
  }

  .hero .hero-copy > h1 em {
    animation: bantwo-title-underline .55s ease-out .78s both;
  }

  /* 見出しに続いて説明文・導線を表示 */
  .hero .hero-copy > .hero-lead {
    animation-delay: .75s;
  }

  .hero .hero-copy > .hero-actions {
    animation-delay: .88s;
  }

  .hero .hero-copy > .trust-row {
    animation-delay: .98s;
  }

  @keyframes bantwo-title-reveal {
    from {
      opacity: 0;
      transform: translateY(18px);
      clip-path: inset(100% 0 0 0);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      clip-path: inset(0);
    }
  }

  @keyframes bantwo-title-underline {
    from { background-size: 0 3px; }
    to { background-size: 100% 3px; }
  }
}

/* 動きを減らす設定では、最初から静止した状態で表示 */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-copy > h1,
  .hero .hero-copy > h1 > span,
  .hero .hero-copy > h1 em {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .hero .hero-copy > h1 em {
    background-size: 100% 3px;
  }
}

/* バントゥ：セクション用アニメーション。既存CSSの末尾に追記、または別ファイルで読み込み。 */
/* 本文を隠す初期スタイルは設けません。JavaScriptがなくてもすべて読めます。 */

@media (prefers-reduced-motion: no-preference) {
  /* 前回の納品実績パネルの上辺に、図面を引くようなライン演出 */
  .results .result-groups article.bantwo-motion-entering::before {
    transform-origin: left center;
    animation: bantwo-result-rule .56s cubic-bezier(.22, 1, .36, 1)
      var(--bantwo-enter-delay, 0ms) both;
  }

  @keyframes bantwo-result-rule {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* 実際にクリックできる問い合わせボタンだけに、小さな反応を付ける */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .contact-section .contact-button > svg {
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
  }

  .contact-section .contact-button:hover > svg,
  .contact-section .contact-button:focus-visible > svg {
    transform: translate(5px, -50%);
  }
}

/* 動きを減らす設定・印刷時は、アニメーション中でも本文をすぐ表示 */
@media (prefers-reduced-motion: reduce), print {
  .bantwo-motion-entering {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .results .result-groups article.bantwo-motion-entering::before {
    animation: none !important;
    transform: none !important;
  }

  .contact-section .contact-button > svg {
    transition: none;
  }
}

/* 2026-09-01 client review: readable type, navigation and revised service blocks. */
:root { --body-copy: #263b4c; }
.site-header { min-height: 104px; height: auto; gap: 24px; padding: 20px clamp(22px, 3.4vw, 64px); }
.brand { flex-shrink: 0; gap: 15px; }
.brand .brand-mark { flex-basis: 62px; width: 62px; height: 62px; }
.brand .brand-mark img { width: 92px; height: 92px; }
.brand strong { font-size: 21px; letter-spacing: .045em; white-space: nowrap; }
.desktop-nav { min-width: 0; gap: clamp(18px, 2vw, 32px); font-size: 16px; }
.primary-menu { gap: clamp(18px, 1.65vw, 28px); }
.primary-menu a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.header-contact { gap: 12px; white-space: nowrap; }
.nav-toggle { display: none; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.nav-toggle::before { content: ""; width: 18px; height: 12px; border-block: 2px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
.nav-toggle:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.site-header [hidden] { display: none !important; }

.eyebrow { font-size: 14px; }
.hero .eyebrow { font-size: 15px; letter-spacing: .12em; }
.hero .text-link { font-size: 17px; min-height: 44px; }
.hero .trust-row { font-size: 18px; color: #365367; flex-wrap: wrap; }
.hero-lead { color: var(--body-copy); }
.hero-visual::after { background: linear-gradient(180deg, rgba(4,25,42,.16) 0%, transparent 32%, rgba(4,25,42,.04) 55%, rgba(4,25,42,.68) 100%); }
.strength-image::after { background: linear-gradient(180deg, transparent 45%, rgba(6,29,54,.70) 100%); }
.visual-caption, .image-label { text-shadow: 0 1px 3px rgba(4,25,42,.45); }
.concerns { color: var(--ink); background: var(--mist); }
.concerns .eyebrow { color: var(--navy); font-size: 14px; }
.concerns .eyebrow span { background: var(--teal); }
.concern-list li { border-bottom-color: rgba(7,61,130,.16); }
.concern-list li:nth-child(-n+2) { border-top-color: rgba(7,61,130,.16); }
.concern-list li > span { color: #00756b; }

.services .section-heading > p,
.strength-lead,
.estimate-heading > p:last-child {
  color: var(--body-copy); font-size: 18px; line-height: 1.95;
}
.service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.service-body { padding: 30px 28px; }
.service-card { color: #192b3b; background: #fff; }
.service-card h3 { font-size: clamp(22px, 1.7vw, 26px); line-height: 1.55; }
.service-card p, .service-card li { color: #1d2c38; font-size: 17px; line-height: 1.9; }
.service-card li { margin-block: 12px; }
.service-subsection { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.service-subsection h3 { margin: 0 0 14px; font-size: 22px; }
.service-subsection ul { margin: 0; padding: 0; border: 0; }
.strength-copy { min-width: 0; padding-right: 0; }
.strength-list h3 { font-size: 20px; }
.strength-list p { color: var(--body-copy); font-size: 17px; line-height: 1.9; }
.strength-list article > span { color: #007c72; font-size: 13px; }

.results .results-intro > p { color: #eef6fb; font-size: 18px; line-height: 1.95; }
.results .result-groups p { color: #263b4c; font-size: 18px; line-height: 2; }
.results .result-groups h3 { font-size: 16px; }
.estimate-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 24px 36px; flex-wrap: wrap; }
.estimate-heading h2 { font-size: clamp(34px, 3.4vw, 52px); }
.estimate-mail-link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 16px 22px; border: 1px solid var(--navy); color: var(--navy); background: #fff; font-size: 18px; line-height: 1.5; font-weight: 700; }
.estimate-mail-link:hover { background: #eaf5f8; }
.document-title span { font-size: 22px; }
.document-columns li { grid-template-columns: 38px minmax(0, 1fr); font-size: 18px; line-height: 1.8; padding-block: 20px; }
.document-columns li span { color: #426278; font-size: 13px; }
.estimate-note { font-size: 17px; line-height: 1.9; color: #203c4c; padding: 22px 26px; }
.contact-copy, .contact-actions { min-width: 0; }
.contact-copy h2 { font-size: clamp(34px, 3vw, 48px); text-wrap: balance; }
.contact-copy > p:last-child { color: #f0f6fa; font-size: 18px; line-height: 1.95; }
.contact-button > span { font-size: 14px; }
.contact-button > small { color: #d6e8f3; font-size: 13px; }
.contact-button > strong { overflow-wrap: anywhere; font-size: clamp(20px, 1.9vw, 27px); }
.mail-button > span { color: #00796e; }
.company { max-width: 1520px; grid-template-columns: .4fr minmax(0, 1fr); }
.company dt { color: #3d586b; font-size: 16px; }
.company dd { font-size: 17px; overflow-wrap: anywhere; }
.company dl > div { grid-template-columns: 110px minmax(0, 1fr); padding-block: 24px; }
.footer-meta { flex-wrap: wrap; font-size: 14px; }

@media (max-width: 1200px) {
  .site-header { flex-wrap: wrap; min-height: 88px; padding-block: 14px; gap: 14px; }
  .brand .brand-mark { width: 56px; height: 56px; flex-basis: 56px; }
  .brand .brand-mark img { width: 82px; height: 82px; }
  .brand strong { font-size: 20px; }
  .nav-toggle:not([hidden]) { display: inline-flex; }
  .desktop-nav { width: 100%; display: grid; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
  .primary-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px; }
  .desktop-nav > a.header-contact { display: inline-flex; justify-content: center; justify-self: start; }
  .header-contact:hover { color: #fff; }
  .service-body { padding: 28px 22px; }
  .strengths { gap: 44px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .section { padding-inline: 30px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .service-card:last-child .service-photo { aspect-ratio: auto; min-height: 360px; }
  .service-card:last-child .service-photo img { position: absolute; inset: 0; }
  .section-heading { gap: 36px; }
  .contact-section { gap: 35px; padding-inline: 30px; }
  .contact-button { padding-right: 42px; padding-left: 20px; }
  .contact-button > svg { right: 16px; }
}
@media (max-width: 760px) {
  .site-header { padding: 12px 18px; min-height: 80px; gap: 12px; }
  .brand { gap: 9px; }
  .brand .brand-mark { width: 46px; height: 46px; flex-basis: 46px; }
  .brand .brand-mark img { width: 68px; height: 68px; }
  .brand strong { font-size: 17px; letter-spacing: .025em; }
  .nav-toggle { padding: 10px; font-size: 13px; gap: 6px; }
  .primary-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 16px; }
  .desktop-nav > a.header-contact { font-size: 16px; }
  .hero .eyebrow { font-size: 14px; letter-spacing: .06em; }
  .hero .text-link { font-size: 16px; }
  .hero .trust-row { font-size: 14px; }
  .hero-lead { font-size: 16px; }
  .service-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .service-body { padding: 28px 24px; }
  .service-card h3 { font-size: 23px; }
  .service-subsection h3 { font-size: 21px; }
  .services .section-heading > p, .strength-lead,
  .strength-list p, .service-card p, .service-card li,
  .results .results-intro > p, .results .result-groups p,
  .estimate-heading > p:last-child, .estimate-note,
  .contact-copy > p:last-child { font-size: 16px; line-height: 1.95; }
  .strength-list h3 { font-size: 18px; }
  .strength-list article { grid-template-columns: 24px minmax(0, 1fr); gap: 16px; }
  .results .result-groups h3 { font-size: 15px; }
  .estimate-heading-row { display: grid; gap: 24px; }
  .estimate-heading h2 { font-size: 34px; line-height: 1.45; }
  .estimate-mail-link { font-size: 16px; justify-self: start; padding: 14px 18px; gap: 10px; }
  .document-title span { font-size: 20px; }
  .document-columns li { font-size: 17px; grid-template-columns: 28px minmax(0, 1fr); }
  .estimate-note { padding: 20px; }
  .contact-copy h2 { font-size: 34px; }
  .contact-button { padding-right: 50px; }
  .contact-button > svg { right: 20px; }
  .company { grid-template-columns: minmax(0, 1fr); }
  .company dl > div { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .company dt, .company dd { font-size: 16px; }
}
@media (max-width: 359px) {
  .site-header { padding-inline: 14px; }
  .brand strong { font-size: 16px; }
  .nav-toggle { font-size: 12px; padding-inline: 8px; }
  .nav-toggle::before { display: none; }
}
/* Print and keyboard focus must never wait for a visual entrance. */
.hero .hero-actions:focus-within { animation: none; opacity: 1; transform: none; }
@media print {
  .hero-copy > :not(.blueprint-drawing), .hero .hero-copy > h1 > span,
  .hero .hero-copy > h1 em { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero .hero-copy > h1 em { background-size: 100% 3px; }
  .nav-toggle { display: none !important; }
}