/* ==========================================================================
   sections.css — 各セクション固有のレイアウト
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding-block: var(--space-12) var(--space-20); }

.hero__eyebrow {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.hero__title { margin-bottom: var(--space-6); }

.hero__sub {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.8;
  margin-bottom: var(--space-5);
}

.hero__body {
  color: var(--color-text-muted);
  max-width: 30em;
  margin-bottom: var(--space-10);
}

.hero__media { margin-top: var(--space-12); }

.hero__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background-color: var(--sage-100);
}

@media (min-width: 1024px) {
  .hero { padding-block: var(--space-24) var(--space-32); }

  .hero__inner {
    display: grid;
    grid-template-columns: 58fr 42fr;
    gap: var(--space-16);
    align-items: center;
  }

  .hero__media { margin-top: 0; }

  .hero__img { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   Problem
   ========================================================================== */

.problem__grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .problem__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}

@media (min-width: 1024px) {
  .problem__grid { grid-template-columns: repeat(3, 1fr); }
}

.problem__head { text-align: center; }
.problem__head .section__lede { margin-inline: auto; }

/* ==========================================================================
   Philosophy
   ========================================================================== */

@media (min-width: 1024px) {
  .philosophy__inner {
    display: grid;
    grid-template-columns: 38fr 62fr;
    gap: var(--space-16);
    align-items: start;
  }

  .philosophy__head {
    position: sticky;
    top: calc(var(--header-h) + var(--space-10));
    margin-bottom: 0;
  }
}

.philosophy__key {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  line-height: 1.75;
  margin-block: var(--space-8);
}

/* ==========================================================================
   Areas
   ========================================================================== */

.areas__head { text-align: center; }

.areas .note-block { margin-top: var(--space-10); }

.areas .note-block p {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.85;
}

/* ==========================================================================
   How We Work
   ========================================================================== */

.how__foot {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.85;
  max-width: 32em;
}

/* ==========================================================================
   Cases
   ========================================================================== */

.case-hero {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  display: block;
  transition: border-color var(--dur-fast) var(--ease-inout),
              box-shadow var(--dur-fast) var(--ease-out);
}

.case-hero:hover {
  border-color: var(--sage-400);
  box-shadow: var(--shadow-lift);
}

.case-hero__cat {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--sage-700);
  margin-bottom: var(--space-6);
}

.case-hero__foot {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .case-hero { padding: var(--space-10); }
}

@media (min-width: 1024px) {
  .case-hero__body {
    display: grid;
    grid-template-columns: 38fr 62fr;
    gap: var(--space-12);
    align-items: start;
  }
  .case-hero__foot { border-top: 0; padding-top: 0; }
}

/* 相談事例：モバイルは横スクロール（scroll-snap のみ。JS不使用） */
.case-mini-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--space-4);
  margin-top: var(--space-8);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-4);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
}

.case-mini-list > * { scroll-snap-align: start; }

.case-mini__cat {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--sage-700);
  margin-bottom: var(--space-3);
}

.case-mini__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.case-mini dl { display: grid; gap: var(--space-3); }

.case-mini dt {
  font-size: var(--fs-caption);
  color: var(--color-text-faint);
}

.case-mini dd {
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .case-mini-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

@media (min-width: 1024px) {
  .case-mini-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.cases__foot { margin-top: var(--space-10); }

/* ==========================================================================
   About
   ========================================================================== */

.about__img {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background-color: var(--sage-100);
  margin-bottom: var(--space-8);
}

.about__role {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.about__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  margin-left: var(--space-3);
}

.about__base {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .about__inner {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: var(--space-16);
    align-items: start;
  }
  .about__img { max-width: none; margin-bottom: 0; }
}

/* ==========================================================================
   Diagnosis（ページ内で唯一の濃色面）
   ========================================================================== */

.diagnosis__points {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-10);
}

.dpoint {
  background-color: rgba(251, 246, 234, .08);
  border: 1px solid rgba(251, 246, 234, .16);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.dpoint .icon { color: var(--mustard-300); margin-bottom: var(--space-3); }

.dpoint__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: var(--space-2);
}

/* 半透明カード（8%）の上に乗るため、不透明度を下げすぎるとAAを割る */
.dpoint__body {
  font-size: var(--fs-small);
  line-height: 1.8;
  color: rgba(251, 246, 234, .9);
}

.report {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid rgba(251, 246, 234, .18);
}

.report__img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  background-color: var(--color-bg);
  margin-bottom: var(--space-8);
}

.report__list { display: grid; gap: var(--space-3); }

.report__list li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: rgba(251, 246, 234, .88);
}

.report__list .icon { flex: none; margin-top: .35em; color: var(--sage-300); }

.report__list li.is-key { color: var(--mustard-300); font-weight: 500; }
.report__list li.is-key .icon { color: var(--mustard-300); }

.diagnosis__cta { margin-top: var(--space-12); }

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

@media (min-width: 768px) {
  .diagnosis__points { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}

@media (min-width: 1024px) {
  .diagnosis__inner {
    display: grid;
    grid-template-columns: 52fr 48fr;
    gap: var(--space-16);
    align-items: start;
  }
  .report { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ==========================================================================
   Final CTA
   ========================================================================== */

.finalcta { text-align: center; }

.finalcta__inner { max-width: 640px; margin-inline: auto; }

.finalcta .cta-group { justify-content: center; align-items: center; }

@media (min-width: 768px) {
  .finalcta .cta-group { flex-direction: row; }
}

/* ==========================================================================
   下層ページ共通
   ========================================================================== */

.page-hero { padding-block: var(--space-12) var(--space-16); }

.page-hero__title { margin-bottom: var(--space-6); }

.page-hero .lede { max-width: 34em; }

.page-hero--invert {
  background-color: var(--sage-700);
  color: var(--color-text-invert);
}

.page-hero--invert .lede { color: rgba(251, 246, 234, .85); }

@media (min-width: 1024px) {
  .page-hero { padding-block: var(--space-16) var(--space-24); }
}

/* 診断ページ：3ステップ */
.flow {
  display: grid;
  gap: var(--space-6);
  counter-reset: flow;
}

.flow__item {
  counter-increment: flow;
  border-top: 2px solid var(--sage-300);
  padding-top: var(--space-5);
}

.flow__num {
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--sage-600);
}

.flow__num::before { content: "STEP " counter(flow); }

.flow__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1875rem;
  margin-block: var(--space-2);
}

.flow__body {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: 1.85;
}

@media (min-width: 768px) {
  .flow { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}

/* 事例詳細 */
.case-detail__stats {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-10);
  border-block: 1px solid var(--color-border);
  margin-block: var(--space-10);
}

@media (min-width: 768px) {
  .case-detail__stats { grid-template-columns: 1.4fr 1fr 1fr; align-items: end; }
}

.case-block { padding-block: var(--space-8); }
.case-block + .case-block { border-top: 1px solid var(--color-border); }

.case-block__key {
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--sage-600);
  margin-bottom: var(--space-3);
}

.case-block__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.case-block--key {
  background-color: var(--mustard-100);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  border-top: 0 !important;
  margin-top: var(--space-8);
}

/* mustard-100 の面では mustard-700 が 3.39:1 で不合格になるため 800 を使う */
.case-block--key .case-block__key { color: var(--mustard-800); }

/* お客様の声などの引用 */
.quote {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  background-color: var(--sage-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--sage-400);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.9;
}

.quote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-style: normal;
  color: var(--color-text-muted);
}

.quote cite::before { content: "── "; }

/* 会社概要・大切にしていること */
.values { display: grid; gap: var(--space-6); }

.value__num {
  font-family: var(--font-num);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sage-600);   /* sage-400 は 2.8:1 でAA不合格だった */
  line-height: 1;
  margin-bottom: var(--space-3);
}

.value__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1875rem;
  margin-bottom: var(--space-2);
}

.value__body {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: 1.85;
}

@media (min-width: 768px) {
  .values { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}

/* 連絡先ブロック */
.contact-block {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.contact-block--primary {
  background-color: var(--sage-700);
  border-color: var(--sage-700);
  color: var(--color-text-invert);
}

.contact-block--primary .muted { color: rgba(251, 246, 234, .78); }

.contact-block__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: var(--space-3);
}

.contact-block .btn { margin-top: var(--space-6); }

@media (min-width: 768px) {
  .contact-block { padding: var(--space-12); }
}

/* 法務文書 */
.legal h2 {
  font-size: 1.25rem;
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.legal h2:first-of-type { margin-top: 0; }

.legal p,
.legal li { color: var(--color-text-muted); }

.legal ul {
  list-style: disc;
  padding-left: 1.4em;
  display: grid;
  gap: var(--space-2);
}

.legal ul li { padding-left: .2em; }

/* 404 */
.errorpage {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
}