/* スミカネ彫刻印刷（架空企業の練習作品）
   値は DESIGN.md（2026-10-08 確定）に基づく */

:root {
  /* 色 */
  --c-primary: #0b57b4;
  --c-primary-hover: #08468f;
  --c-navy: #102c49;
  --c-text: #0e1726;
  --c-text-sub: #4a5868;
  --c-bg: #ffffff;
  --c-bg-alt: #f4f5f8;
  --c-border: #dde3ea;
  --c-tag-bg: #e2e5ea;
  --c-on-primary: #ffffff;
  --c-error: #c0262d;
  --c-error-bg: #fdecec;

  /* 余白（8px 基準） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  /* 文字（PC） */
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-num: 13px;
  --fs-button: 17px;

  --radius: 4px;
  --container: 1200px;
  --gutter: 40px;
  --header-h: 64px;
  --sticky-cta-h: 80px;
  --font: "Noto Sans JP", sans-serif;
}

@media (max-width: 767px) {
  :root {
    --fs-h1: clamp(22px, 6.6vw, 26px); /* 390px で 26px、320px では 3 行に収めるため縮める */
    --fs-h2: 21px;
    --fs-h3: 17px;
    --fs-small: 13px;
    --fs-num: 12px;
    --fs-button: 16px;
    --gutter: 16px;
    --header-h: 56px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--c-primary);
  text-underline-offset: 3px;
}

/* フォーカス：白と青の二重枠（DESIGN.md 4章） */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffffff;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* 本文へ移動 */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--c-bg);
  border-radius: var(--radius);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* 練習作品の表示 */
.practice-note {
  background: var(--c-navy);
  color: #ffffff;
  font-size: var(--fs-small);
  line-height: 1.6;
}

.practice-note p {
  padding-block: var(--space-2);
}

/* ヘッダー */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  color: var(--c-text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}

.global-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.global-nav__link:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

.global-nav__link[aria-current="page"] {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.menu-button {
  display: none;
}

/* ボタン（DESIGN.md 4-1） */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius);
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-family: inherit;
  font-size: var(--fs-button);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.button:hover {
  background: var(--c-primary-hover);
  color: var(--c-on-primary);
}

.button--small {
  min-height: 44px;
  padding: 0 var(--space-4);
  font-size: 15px;
}

.button__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 文字リンク（DESIGN.md 4-2） */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.text-link:hover {
  text-decoration: underline;
}

/* セクション番号（DESIGN.md 4-4） */
.section-num {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-text-sub);
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: 1;
}

.section-num::after {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
}

/* 最初の画面 */
.hero {
  padding-block: var(--space-8) var(--space-9);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-7);
}

.hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.4;
  word-break: auto-phrase;
}

.hero__title span {
  display: inline-block;
}

.hero__lead {
  color: var(--c-text-sub);
  font-size: 18px;
  line-height: 1.8;
}

.hero__lead span {
  display: inline-block;
}

.hero__figure {
  margin: 0;
}

.hero__figure img {
  width: 100%;
  aspect-ratio: 356 / 225;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--c-bg-alt);
}

.hero__figure figcaption {
  margin-top: var(--space-2);
  color: var(--c-text-sub);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.tag {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  background: var(--c-tag-bg);
  color: var(--c-text);
  font-size: 12px;
  font-weight: 700;
}

/* セクション共通 */
.section {
  padding-block: var(--space-9);
}

.section--alt {
  background: var(--c-bg-alt);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.section__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.5;
}

.section__lead {
  max-width: 40em;
  color: var(--c-text-sub);
}

.section__note {
  margin-top: var(--space-4);
  color: var(--c-text-sub);
  font-size: var(--fs-small);
  line-height: 1.7;
}

/* 日本語を句の区切りで折り返す（1文字だけ次の行に残るのを防ぐ） */
.section__title,
.section__lead,
.needs__title,
.needs__text {
  word-break: auto-phrase;
}

/* 02 こんな品物、ご相談ください */
.needs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.needs__card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.needs__icon {
  width: 48px;
  height: 48px;
  color: var(--c-navy);
}

.needs__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.needs__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
}

.needs__text {
  color: var(--c-text-sub);
  line-height: 1.8;
}

.section__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
}

.section__foot .section__note {
  margin-top: 0;
}

/* 03 できる理由 */
.reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reasons__item {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.reasons__img {
  width: 100%;
  aspect-ratio: 212 / 93;
  object-fit: cover;
  background: var(--c-bg-alt);
}

.reasons__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.reasons__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  word-break: auto-phrase;
}

.reasons__text {
  color: var(--c-text-sub);
  line-height: 1.8;
  word-break: auto-phrase;
}

/* 04 対応事例（想定例） */
.tag--title {
  margin: 0 0 0 var(--space-3);
  vertical-align: 0.3em;
}

.cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cases__item {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cases__media {
  position: relative;
}

.cases__img {
  width: 100%;
  aspect-ratio: 170 / 94;
  object-fit: cover;
  background: var(--c-bg-alt);
}

.cases__img--none {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px dashed var(--c-border);
  color: var(--c-text-sub);
  font-size: var(--fs-small);
}

.cases__tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  margin: 0;
}

.cases__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.cases__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  word-break: auto-phrase;
}

.cases__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.cases__list div {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
}

.cases__list dt {
  color: var(--c-text);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.8;
}

.cases__list dd {
  margin: 0;
  color: var(--c-text-sub);
  word-break: auto-phrase;
}

/* 05 事業の紹介 */
.business {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.business li {
  display: flex;
}

.business__card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 150ms ease;
}

.business__card:hover {
  border-color: var(--c-primary);
}

.business__card:hover .business__title {
  color: var(--c-primary);
  text-decoration: underline;
}

.business__img {
  width: 112px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--c-bg-alt);
}

.business__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.business__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  text-underline-offset: 4px;
}

.business__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--c-primary);
}

.business__text {
  color: var(--c-text-sub);
  font-size: var(--fs-small);
  line-height: 1.7;
  word-break: auto-phrase;
}

/* 06 ご相談から納品まで */
.flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

/* 次のステップへの矢印（装飾） */
.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--space-5) / -2 - 5px);
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--c-text-sub);
  border-right: 2px solid var(--c-text-sub);
  transform: translateY(-50%) rotate(45deg);
}

.flow__num {
  color: var(--c-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.flow__icon {
  width: 32px;
  height: 32px;
  color: var(--c-navy);
}

.flow__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  word-break: auto-phrase;
}

.flow__text {
  color: var(--c-text-sub);
  font-size: var(--fs-small);
  line-height: 1.7;
  word-break: auto-phrase;
}

/* 1200px 未満は6列だと狭いため3列×2段にする（折り返すので矢印は出さない） */
@media (max-width: 1199px) {
  .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .flow__step::after {
    display: none;
  }
}

/* 07 よくある質問（DESIGN.md 4-5：開閉式） */
.faq {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-border);
}

.faq__item {
  border-bottom: 1px solid var(--c-border);
}

.faq__heading {
  margin: 0;
  font-size: inherit;
}

.faq__button {
  display: grid;
  grid-template-columns: 28px minmax(0, 5fr) minmax(0, 6fr) 16px;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) var(--space-2);
  border: 0;
  background: transparent;
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
}

.faq__button:hover .faq__question {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--c-navy);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.faq__mark--a {
  background: var(--c-tag-bg);
  color: var(--c-text);
}

.faq__question {
  font-weight: 700;
  line-height: 1.6;
  word-break: auto-phrase;
}

/* 閉じているときだけ、回答の冒頭を1行で見せる（PC） */
.faq__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  overflow: hidden;
  color: var(--c-text-sub);
  font-size: var(--fs-small);
  white-space: nowrap;
}

.faq__summary-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.faq__summary .faq__mark {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.faq__item.is-open .faq__summary {
  visibility: hidden;
}

.faq__chevron {
  width: 16px;
  height: 16px;
  color: var(--c-primary);
  transition: transform 200ms ease;
}

.faq__item.is-open .faq__chevron {
  transform: rotate(90deg);
}

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 200ms ease, visibility 200ms;
}

.faq__item.is-open .faq__panel,
.no-js .faq__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

.faq__answer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 0;
  overflow: hidden;
  padding-inline: var(--space-2);
}

.faq__item.is-open .faq__answer,
.no-js .faq__answer {
  padding-bottom: var(--space-4);
}

.faq__answer p {
  max-width: 48em;
  color: var(--c-text-sub);
  line-height: 1.8;
  word-break: auto-phrase;
}

.faq__answer strong {
  color: var(--c-text);
}

.faq__status {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 0 var(--space-2);
  border: 1px solid var(--c-text-sub);
  border-radius: var(--radius);
  color: var(--c-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: 0.1em;
}

.stub__section .faq {
  margin-top: var(--space-4);
}

/* 08 最後の相談ボタン */
.final-cta {
  padding-block: var(--space-9);
  background: var(--c-bg-alt);
}

/* 同じグレーの背景が続くときは線で区切る */
.section--alt + .final-cta {
  border-top: 1px solid var(--c-border);
}

.final-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-7);
}

.final-cta__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.final-cta__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.5;
  word-break: auto-phrase;
}

.final-cta__lead {
  max-width: 34em;
  color: var(--c-text-sub);
  word-break: auto-phrase;
}

.final-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.final-cta__actions .button {
  min-width: 300px;
  min-height: 60px;
}

/* 準備中ページ */
.stub {
  padding-block: var(--space-9);
}

.stub__title {
  margin-top: var(--space-4);
  font-size: var(--fs-h1);
  line-height: 1.4;
}

.stub__text {
  margin-top: var(--space-4);
  color: var(--c-text-sub);
}

.stub__section {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-border);
}

.stub__section h2 {
  font-size: var(--fs-h2);
  line-height: 1.5;
}

.stub__section p {
  margin-top: var(--space-3);
  color: var(--c-text-sub);
}

.stub__back {
  margin-top: var(--space-6);
}

/* 09 フッター（電話はここだけに置く方針。番号は確認中のため未掲載） */
.site-footer {
  background: var(--c-navy);
  color: #ffffff;
  font-size: var(--fs-small);
}

.site-footer a {
  color: #ffffff;
  text-underline-offset: 3px;
}

.site-footer :focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 2px var(--c-navy);
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6) var(--space-7);
  padding-block: var(--space-7);
}

.site-footer__company {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__num {
  color: #c9d3de;
}

.site-footer__name {
  margin-top: var(--space-2);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.site-footer__desc {
  color: #c9d3de;
}

.site-footer__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
}

.site-footer__info div {
  display: grid;
  grid-template-columns: 6em minmax(0, 1fr);
  gap: var(--space-3);
}

.site-footer__info dt {
  font-weight: 700;
}

.site-footer__info dd {
  margin: 0;
  color: #c9d3de;
}

.site-footer__nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 0 var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.site-footer__nav a:hover {
  text-decoration: underline;
}

.site-footer__bottom {
  color: #c9d3de;
  font-size: 12px;
  line-height: 1.7;
}

/* 区切り線を本文の幅にそろえるため、線は内側の段落に引く */
.site-footer__bottom p {
  padding-block: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* 下層ページの見出し部分 */
.page-head {
  padding-block: var(--space-6) var(--space-7);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--c-text-sub);
  font-size: var(--fs-small);
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.breadcrumb li + li::before {
  content: "／";
  margin-right: var(--space-2);
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.page-head__title {
  margin-top: var(--space-2);
  font-size: var(--fs-h1);
  line-height: 1.4;
}

.page-head__lead {
  max-width: 44em;
  margin-top: var(--space-4);
  color: var(--c-text-sub);
  word-break: auto-phrase;
}

.page-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.page-toc a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
}

.page-toc a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.page-toc a:hover {
  text-decoration: underline;
}

/* 404ページ：別のページへ移るリンクなので矢印を右向きにする */
.not-found .page-toc a::before {
  transform: rotate(-45deg);
}

/* 事業・製品：分類ごとの詳細 */
.biz-detail__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--space-7);
}

.biz-detail__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--c-bg-alt);
}

.biz-detail__caption {
  margin-top: var(--space-2);
  color: var(--c-text-sub);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.biz-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.biz-detail__lead {
  color: var(--c-text-sub);
  word-break: auto-phrase;
}

.spec {
  margin: var(--space-3) 0 0;
  border-top: 1px solid var(--c-border);
}

.spec__row {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--c-border);
}

.spec__row dt {
  font-weight: 700;
  line-height: 1.8;
}

.spec__row dd {
  margin: 0;
}

.spec__list {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.8;
}

.spec__list li::marker {
  color: var(--c-text-sub);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  padding: 2px var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  font-size: var(--fs-small);
  line-height: 1.7;
}

/* 設備・体制ページ */
.process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

/* 次の工程への矢印（装飾） */
.process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--space-5) / -2 - 5px);
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--c-text-sub);
  border-right: 2px solid var(--c-text-sub);
  transform: translateY(-50%) rotate(45deg);
}

.point {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.point__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-h3);
  line-height: 1.5;
}

.point p {
  color: var(--c-text-sub);
  word-break: auto-phrase;
}

.leadtime {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 44em;
}

.leadtime p {
  word-break: auto-phrase;
}

.leadtime .section__note {
  margin-top: 0;
}

.equip__group {
  margin: var(--space-6) 0 var(--space-4);
  font-size: var(--fs-h3);
  line-height: 1.5;
}

.section__head + .equip__group {
  margin-top: 0;
}

.equip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.equip__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name count"
    "text text";
  align-content: start;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.equip__name {
  grid-area: name;
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  word-break: auto-phrase;
}

.equip__count {
  grid-area: count;
  color: var(--c-primary);
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
}

.equip__text {
  grid-area: text;
  color: var(--c-text-sub);
  font-size: var(--fs-small);
  line-height: 1.7;
  word-break: auto-phrase;
}

@media (max-width: 1199px) {
  .process {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .process__step::after {
    display: none;
  }

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

@media (max-width: 767px) {
  .process,
  .equip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .point {
    padding: var(--space-4);
  }
}

/* 会社概要ページ */
.company-table {
  max-width: 880px;
}

.company-table .spec {
  margin-top: 0;
}

.company-table .spec__row dd {
  line-height: 1.8;
}

/* 項目名（「主な取引先の業種」など）が折り返さない幅にする */
.company-table .spec__row {
  grid-template-columns: 10em minmax(0, 1fr);
}

@media (max-width: 767px) {
  .company-table .spec__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pending-box {
  max-width: 880px;
  padding: var(--space-5);
  border: 1px dashed var(--c-text-sub);
  border-radius: var(--radius);
  color: var(--c-text-sub);
}

.pending-box strong {
  color: var(--c-text);
}

.map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 880px;
  min-height: 240px;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px dashed var(--c-text-sub);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text-sub);
  text-align: center;
}

@media (max-width: 767px) {
  .map-placeholder {
    min-height: 160px;
  }
}

/* お問い合わせ：相談フォーム（DESIGN.md 4-6） */
.practice-alert {
  max-width: 720px;
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-text-sub);
  border-radius: var(--radius);
  background: var(--c-bg-alt);
  color: var(--c-text);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.contact-form {
  max-width: 720px;
  margin-top: var(--space-7);
}

.contact-form__title {
  margin-bottom: var(--space-5);
  font-size: var(--fs-h2);
  line-height: 1.5;
}

.form__fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 0;
}

.field__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  font-weight: 700;
  line-height: 1.5;
}

.field__req,
.field__opt {
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}

.field__req {
  background: var(--c-navy);
  color: #ffffff;
}

.field__opt {
  background: var(--c-tag-bg);
  color: var(--c-text);
}

.field__hint {
  margin: 0;
  color: var(--c-text-sub);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.field__hint strong {
  color: var(--c-text);
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: inherit;
  font-size: 16px; /* スマホで入力時に拡大されないよう 16px 以上 */
  line-height: 1.6;
}

.field__input--textarea {
  min-height: 160px;
  resize: vertical;
}

/* フォーカス：線を青の 2px に（枠の太さが変わっても位置がずれないよう inset の影で表す） */
.field__input:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: inset 0 0 0 1px var(--c-primary);
}

.field__input:focus:not(:focus-visible) {
  outline: none;
}

.field__file {
  max-width: 100%;
  min-height: 44px;
  font-family: inherit;
  font-size: var(--fs-small);
}

.field__file-list {
  margin: 0;
  padding-left: 1.2em;
  color: var(--c-text-sub);
  font-size: var(--fs-small);
}

.field__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  cursor: pointer;
}

.choice input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--c-primary);
}

/* エラー：線を赤の 2px に。印と文章で伝える（色だけに頼らない） */
.field.is-error .field__input {
  border-color: var(--c-error);
  box-shadow: inset 0 0 0 1px var(--c-error);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--c-error);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.6;
}

.field__error[hidden] {
  display: none;
}

.field__error-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 0.2em;
}

.form-summary {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--c-error);
  border-radius: var(--radius);
  background: var(--c-error-bg);
}

.form-summary__title {
  color: var(--c-error);
  font-size: 17px;
  line-height: 1.5;
}

.form-summary__list {
  margin: var(--space-2) 0 0;
  padding-left: 1.2em;
  font-size: var(--fs-small);
}

.form-summary__list a {
  color: var(--c-error);
  font-weight: 700;
}

.form__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.form__submit {
  min-width: 280px;
}

.form__note {
  color: var(--c-text-sub);
  font-size: var(--fs-small);
}

/* 押せない状態（DESIGN.md 4-1） */
.button:disabled {
  background: #9aa8b8;
  cursor: not-allowed;
}

/* 処理中：背景色は変えず、回る印と「送信中…」で伝える */
.button.is-sending:disabled {
  background: var(--c-primary);
  cursor: progress;
}

.spinner {
  display: none;
  width: 18px;
  height: 18px;
}

.is-sending .spinner {
  display: block;
  animation: spin 800ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.button--secondary {
  background: var(--c-bg);
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
}

.button--secondary:hover {
  background: var(--c-bg-alt);
  color: var(--c-primary-hover);
}

.form-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-alt);
}

.form-done[hidden],
.form[hidden],
.form-summary[hidden] {
  display: none;
}

.form-done__title {
  font-size: var(--fs-h3);
  line-height: 1.5;
}

.form-done__title:focus {
  outline: none;
}

/* お問い合わせページ内のよくある質問：準備中ページの段落の余白を打ち消す */
.stub__section .faq p {
  margin-top: 0;
}

/* スマホ下部の相談ボタン（DESIGN.md 5章） */
.sticky-cta {
  display: none;
}

/* ===== タブレット以下：メニューボタンで開閉 ===== */
@media (max-width: 1023px) {
  .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-bg);
    color: var(--c-text);
    font-family: inherit;
    font-size: var(--fs-small);
    font-weight: 700;
    cursor: pointer;
  }

  .menu-button__icon {
    width: 20px;
    height: 20px;
  }

  .header-actions .text-link {
    display: none;
  }

  .global-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 8px 16px rgba(14, 23, 38, 0.08);
  }

  .js .global-nav {
    display: none;
  }

  /* JavaScript が動かない場合は、メニューを常に表示する */
  .no-js .site-header__inner {
    flex-wrap: wrap;
  }

  .no-js .global-nav {
    position: static;
    order: 3;
    width: 100%;
    border-bottom: 0;
    box-shadow: none;
  }

  .no-js .menu-button {
    display: none;
  }

  .js .global-nav.is-open {
    display: block;
    animation: nav-open 200ms ease;
  }

  .global-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-4);
  }

  .global-nav__list li + li {
    border-top: 1px solid var(--c-border);
  }

  .global-nav__link {
    display: flex;
    width: 100%;
    min-height: 52px;
    font-size: 16px;
  }

  .global-nav__item--order {
    display: block;
  }

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

  .needs {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  /* タブレット以下：左に写真、右に文章（DESIGN.md 5章） */
  .reasons {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .reasons__item {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: stretch;
  }

  .reasons__img {
    height: 100%;
    aspect-ratio: auto;
  }

  .cases {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .cases__item {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: stretch;
  }

  .cases__media,
  .cases__img {
    height: 100%;
  }

  .cases__img {
    aspect-ratio: auto;
  }

  .cases__img--none {
    border-bottom: 0;
    border-right: 1px dashed var(--c-border);
  }

  .business {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .biz-detail__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .biz-detail__media {
    max-width: 480px;
  }

  .final-cta__inner,
  .site-footer__inner {
    flex-direction: column;
    align-items: stretch;
  }

  /* 06：タブレットは3列×2段。折り返しで向きが分かりにくくなるため矢印は出さない */
  .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .flow__step::after {
    display: none;
  }
}

@media (min-width: 1024px) {
  .global-nav__item--order {
    display: none;
  }
}

@keyframes nav-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== スマホ ===== */
@media (max-width: 767px) {
  .site-logo {
    font-size: 17px;
  }

  .header-actions .button {
    display: none;
  }

  .hero {
    padding-block: var(--space-6) var(--space-7);
  }

  .hero__inner {
    gap: var(--space-5);
  }

  .hero__body {
    gap: var(--space-4);
  }

  .hero__lead {
    font-size: var(--fs-body);
  }

  /* スマホでは句の区切りで自然に折り返し、3行以内に収める */
  .hero__title span,
  .hero__lead span {
    display: inline;
  }

  .hero__lead {
    word-break: auto-phrase;
  }

  .hero__body .button {
    width: 100%;
  }

  .section {
    padding-block: var(--space-7);
  }

  .section__head {
    margin-bottom: var(--space-5);
  }

  .needs__card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .needs__icon {
    width: 40px;
    height: 40px;
  }

  .reasons__item {
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    gap: var(--space-3);
  }

  .reasons__img {
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
  }

  .reasons__body {
    gap: var(--space-1);
    padding: 0;
  }

  .reasons__item + .reasons__item {
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border);
  }

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

  /* 04：左に小さな写真、右に品物・課題・対応（DESIGN.md 5章） */
  .cases__item {
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .cases__media,
  .cases__img {
    height: auto;
  }

  .cases__img {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
  }

  .cases__img--none {
    border: 1px dashed var(--c-border);
    font-size: 12px;
    text-align: center;
  }

  .cases__tag {
    top: var(--space-1);
    left: var(--space-1);
    padding: 0 var(--space-1);
    font-size: 11px;
  }

  /* 写真と品物名を横に並べ、課題・対応は下に全幅で表示する（狭い幅で文章が細くならないように） */
  .cases__body {
    display: contents;
  }

  .cases__title {
    align-self: center;
  }

  .cases__list {
    grid-column: 1 / -1;
  }

  .cases__list div {
    grid-template-columns: 2.5em minmax(0, 1fr);
    gap: var(--space-1);
  }

  .tag--title {
    margin-left: var(--space-2);
  }

  .form__submit {
    width: 100%;
    min-width: 0;
  }

  .spec__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .form-done {
    padding: var(--space-5);
  }

  /* 05：小さな写真＋分類名＋「>」のリスト（DESIGN.md 5章） */
  .business {
    gap: var(--space-3);
  }

  .business__card {
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .business__img {
    width: 72px;
    height: 60px;
  }

  .business__title {
    justify-content: space-between;
  }

  .business__text {
    display: none;
  }

  /* 08：縦並び。ボタンは全幅 */
  .final-cta {
    padding-block: var(--space-7);
  }

  .final-cta__actions {
    align-items: stretch;
  }

  .final-cta__actions .button {
    min-width: 0;
    width: 100%;
  }

  .final-cta__actions .text-link {
    justify-content: center;
    white-space: normal;
  }

  /* 09：縦並び */
  .site-footer__inner {
    padding-block: var(--space-6);
  }

  .site-footer__nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-4);
  }

  /* 07：スマホは質問だけを1行ずつ（回答の冒頭は出さない） */
  .faq__button {
    grid-template-columns: 28px minmax(0, 1fr) 16px;
    padding-inline: 0;
  }

  .faq__summary {
    display: none;
  }

  .faq__answer {
    padding-inline: 0;
  }

  /* 06：2列×3段（DESIGN.md 5章） */
  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .flow__step {
    padding: var(--space-3);
  }

  .flow__num {
    font-size: 18px;
  }

  .flow__icon {
    width: 28px;
    height: 28px;
  }

  .flow__title {
    font-size: 16px;
  }

  .sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--c-border);
  }

  .sticky-cta .button {
    width: 100%;
  }

  /* 固定ボタンがあるページだけ、最下部が隠れないよう余白を足す */
  body:has(.sticky-cta) {
    padding-bottom: var(--sticky-cta-h);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}