/* Text-first edition, 2026-09-07. Original design is preserved in 保存版.
   Palette reference: daini2.co.jp/service-introduction-014/css/style.css.
   Reading reference: urulabo.com/jk-t2-b2vflm/ (source declarations).
   Orange is an accent; body copy stays charcoal. Legacy token names are
   retained so the existing components share the same palette. */
:root {
  --container: 37rem;
  --reading: 37rem;
  --ink: #333333;
  --ink-soft: #333333;
  --muted: #555555;
  --paper: #ffffff;
  --warm: #ffffff;
  --accent: #ff7326;
  --accent-hover: #f5681b;
  --button-bg: #ca4b00;
  --button-hover: #b53f00;
  --teal: #b8440d;
  --teal-dark: #943909;
  --teal-soft: #fff1e8;
  --coral: #b8440d;
  --yellow: #fff34d;
  --emphasis: #d00032;
  --line: #e2dfda;
  --shadow: none;
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1rem;
}
body {
  background: #f3f3f3; overflow-wrap: anywhere; line-height: 2; font-feature-settings: normal;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.site-header, main, .site-footer, .mobile-action { width: 100%; max-width: 42rem; margin-inline: auto; }
main { background: var(--white); }
.container, .header-inner { width: min(calc(100% - 2.5rem), var(--container)); }
.site-header { position: relative; background: var(--white); border-color: var(--line); }
.header-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding-block: 1rem; }
.brand { gap: 0.4rem; }
.brand-name { font-size: 1.125rem; }
.brand-tagline { display: block; font-size: 0.875rem; }
.header-license { margin: 0; text-align: left; }
.header-license, .header-license strong { font-size: 0.75rem; }
.header-cta { font-size: 0.875rem; }

/* FV art direction is deferred; only apply the shared readable layout. */
.hero { padding: 2rem 0 2.5rem; background: var(--white); }
.hero::after { display: none; }
.hero-grid { gap: 1.75rem; }
h1 { font-size: clamp(1.75rem, 8vw, 2.75rem); line-height: 1.3; }
.hero-brand, .hero-promise { white-space: normal; }
.hero-card { box-shadow: none; padding: 1.25rem; background: var(--paper); border-color: var(--line); }
.hero-results { gap: 0.75rem; }
.hero-results dt { font-size: 1.375rem; }

/* All substantive content remains one column at every viewport width. */
.hero-grid, .hero-results, .application-worry-grid,
.insight-list, .reality-list, .self-fit-list, .support-grid, .jobs-grid,
.fit-axis-grid, .experience-grid, .review-grid, .advisor-grid, .advisor-stats,
.mismatch-examples, .cta-concerns, .consultation-form, .axis-result ul,
.method-flow, .review-card dl div, .flow-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.support-card--wide, .method-flow span:last-child,
.consultation-form .button, .consultation-form .form-note { grid-column: auto; }
.hero-grid > *, .advisor-grid > *, .consultation-form > * { min-width: 0; }
.advisor-copy { order: 0; }
.advisor-stats { order: 1; }

.section, .final-cta { padding-block: 3rem; }
.section h2, .final-cta h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(1.625rem, 6.5vw, 2rem);
  font-weight: 800;
  line-height: 1.6;
  padding-bottom: 0.875rem;
  border-bottom: 2px solid var(--accent);
  letter-spacing: 0;
  text-wrap: initial;
}
.section h2 br, .final-cta h2 br, .fit-method > h3 br { display: none; }
.lead-copy { margin-bottom: 1.75rem; }
.lead-conclusion { padding: 1rem; }
#main-content :is(p, li, dd) { font-size: 1.125rem; line-height: 2; letter-spacing: 0.02em; }
#main-content strong { font-weight: 700; }
#main-content p { margin-bottom: 1.4rem; }
#main-content p:last-child { margin-bottom: 0; }
#main-content :is(.section-kicker, .eyebrow, .worry-resolve-label, .tool-label,
  .example-label, .fit-step-label, .job-flow-label, .review-tag,
  .review-source, .source-note, .form-note, .button-note, .hero-card-label) {
  font-size: 0.875rem;
  line-height: 1.75;
}
#main-content .hero-card-title { font-size: 1.375rem; line-height: 1.55; }
#main-content .philosophy-lead { font-size: 1.25rem; }
#main-content .job-flow-arrow { font-size: 1.75rem; }
.section-kicker, .eyebrow { letter-spacing: 0.05em; }
.application-worry-grid h3, .support-card h3, .job-card h3, .review-card h3,
.flow-list h3, .fit-step h3, .fit-method > h3, .experience-section > h3 {
  font-size: 1.25rem; font-weight: 700; line-height: 1.65; margin: 0 0 1rem;
}
.experience-grid h4, .fit-axis-grid h4, .self-analysis-tool h4 {
  font-size: 1.125rem; line-height: 1.65;
}
.application-worry-grid, .support-grid, .jobs-grid, .review-grid, .experience-grid { gap: 2rem; }
.application-worry-grid article, .support-card, .job-card, .review-card {
  padding: 0 0 1.75rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  box-shadow: none;
}
.self-analysis-tool {
  padding: 1rem;
  border: 1px solid var(--line);
  box-shadow: none;
}
.application-worry-grid span {
  position: static; display: block; width: auto; height: auto; margin-bottom: 0.5rem;
  color: var(--teal-dark); background: none; border-radius: 0; font-size: 0.875rem;
}
.section .support-number, .job-card > span, .fit-axis-grid span { font-size: 0.875rem; }
.fit-step-label, .job-flow-label { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.fit-step-label span, .job-flow-label span { font-size: 0.875rem; flex-shrink: 0; }
.fit-step { padding-block: 1.75rem; border-color: var(--line); }
.reality-list li, .self-fit-list li {
  padding: 0 0 1.5rem 1.4rem; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; background: var(--white);
}
.reality-list li::before, .self-fit-list li::before { left: 0; top: 0; }
.reality-list li strong, .self-fit-list li strong { line-height: 1.65; }
.fit-support-note { background: var(--white); }
.self-analysis-tool { margin-bottom: 1.5rem; }
.section .tool-label, .support-example .example-label { color: var(--teal-dark); }
.support-example { padding: 1rem; }
.method-statement { text-align: left; background: var(--white); border-color: var(--line); }
.method-statement strong, .method-statement > span, .method-statement small { display: block; }
.method-statement > span { margin: 0.2rem 0; }
.method-statement br { display: none; }
.method-statement small { margin-top: 0.5rem; font-size: 0.875rem; }
.method-flow i, .method-flow i:last-of-type { display: block; text-align: center; }

.job-card { background: var(--white); }
.job-card strong {
  display: inline; padding: 0.1rem 0; background: linear-gradient(transparent 55%, var(--yellow) 55%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  border-radius: 0; font-size: 1.125rem; line-height: 2;
}
.job-flow-arrow { margin-block: 1.5rem; }
.fit-method { padding: 1.5rem 0 0; color: var(--ink); background: var(--white); border: 0; border-top: 2px solid var(--accent); border-radius: 0; }
.fit-method > h3, .fit-axis-grid h4 { color: var(--ink); }
.fit-method .section-kicker, .fit-axis-grid span { color: var(--teal-dark); }
.fit-intro, .fit-axis-grid p, .fit-axis-grid ul { margin-top: 0; color: var(--ink-soft); }
.fit-axis-grid article { padding: 1rem 0; background: var(--white); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.experience-grid article { background: var(--paper); border-left-color: var(--teal); }
.experience-section { margin-top: 2rem; }
.review-notice strong { font-size: 0.875rem; }
.review-tag { color: var(--teal-dark); letter-spacing: 0; }
.review-card dl div { gap: 0.3rem; padding-block: 1rem; }
.review-card dt { color: var(--teal-dark); font-size: 0.875rem; }

.flow-list li { min-height: 0; padding: 1.25rem 0; gap: 0.75rem; border-top: 1px solid var(--line); }
.flow-list li::before { display: none; }
.flow-list > li > span {
  position: static; display: block; width: auto; height: auto; color: var(--teal-dark);
  background: none; border-radius: 0; font-size: 0.875rem; text-align: left;
}
.flow-list div { padding: 0; }
.advisor-section { color: var(--ink); background: var(--paper); }
.advisor-copy h2, .advisor-name strong { color: var(--ink); }
.advisor-copy > p, .advisor-stats span { color: var(--ink-soft); }
.advisor-copy .section-kicker, .advisor-stats strong { color: var(--teal-dark); }
.advisor-name { border-color: var(--line); }
.advisor-stats div { background: var(--white); border-color: var(--line); }
.advisor-stats span { font-size: 1rem; }
.advisor-copy .source-note { color: var(--muted); }
.philosophy-section { background: var(--white); }
.mismatch-examples p { background: var(--paper); border-color: var(--teal); }
.philosophy-quote { padding: 1.25rem; }
.philosophy-quote p { color: var(--white); }
.faq-list summary { font-size: 1rem; line-height: 1.75; }

.mid-cta { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.25rem; }
.mid-cta p { margin: 0; }
.mid-cta .button, .hero-copy .button, .final-cta .button, .button-note { width: 100%; min-width: 0; }
.button { box-shadow: none; border-radius: 0.75rem; font-size: 1rem; padding: 1rem; }
.button span { min-width: 0; }
.button > span[aria-hidden] { flex-shrink: 0; }
.final-cta { text-align: left; color: var(--ink); background: var(--white); border-top: 3px solid var(--accent); }
.final-cta .section-kicker { margin-inline: 0; }
.final-cta p, .final-cta .cta-concerns p, .cta-assurances li { color: var(--ink); }
.cta-assurances { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: start; gap: 0.5rem; }
.consultation-form { padding: 1.25rem; gap: 0; border: 1px solid var(--line); }
.form-field label { font-size: 1rem; }
.form-field label span, .form-field label small { font-size: 0.875rem; }
.form-field input, .form-field select { min-width: 0; }
.mobile-action { display: block; }
.site-footer { padding-bottom: 7rem; background: #222222; }
.site-footer p { font-size: 0.875rem; color: #eeeeee; }
.footer-small, .footer-disclaimer { font-size: 0.875rem !important; color: #eeeeee; }

/* Small, consistent accents rather than full green panels. */
.brand-name, .hero-brand { color: var(--ink); }
.section-kicker { color: var(--muted); font-weight: 700; }
.section-kicker::before { display: none; }
.eyebrow { color: var(--ink); background: var(--teal-soft); border-radius: 0.375rem; }
.hero-results div { background: var(--white); border: 1px solid var(--line); text-align: left; }
.hero-results dt { color: var(--ink); }
.hero-points li::before { color: var(--ink); background: var(--accent); }
.lead-conclusion { padding: 0; background: none; border: 0; border-radius: 0; }
.lead-conclusion strong, .text-marker {
  color: var(--ink); font-weight: 700;
  background: linear-gradient(transparent 55%, var(--yellow) 55%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.text-emphasis, .section h2 em { color: var(--emphasis); font-weight: 700; }
.fit-step-label span, .job-flow-label span { color: var(--ink); background: var(--accent); }
.support-example { background: #fafafa; border: 0; border-left: 3px solid var(--accent); border-radius: 0; }
.support-card--accent { background: var(--white); border-color: var(--line); }
.job-card h3 { padding-bottom: 0; border-bottom: 0; }
.job-card strong { color: var(--ink); }
.experience-grid article, .mismatch-examples p { border-left-color: var(--accent); }
.review-notice { color: var(--ink-soft); }
.review-card dl div { border-color: var(--line); }
.philosophy-quote { color: var(--ink); background: var(--white); border: 0; border-left: 3px solid var(--accent); border-radius: 0; text-align: left; }
.philosophy-quote p { color: var(--ink-soft); }
.mid-cta { color: var(--ink); background: var(--white); border: 0; border-top: 1px solid var(--line); padding-inline: 0; border-radius: 0; }
.mid-cta p { color: var(--ink-soft); }
.mid-cta strong { color: var(--ink); }
.button--primary, .button--light, .consultation-form .button, .header-cta {
  color: var(--white); background: var(--button-bg); box-shadow: none;
}
.header-cta { border-radius: 0.5rem; }
.final-cta .section-kicker, .final-cta h2 { color: var(--ink); }
.final-cta .cta-concerns p { background: #fafafa; border: 0; border-left: 2px solid var(--line); border-radius: 0; }
.cta-assurances li::before { color: var(--accent); }
.form-field input:focus, .form-field select:focus {
  border-color: var(--teal); outline: 0.15rem solid var(--teal); outline-offset: 0.15rem;
}
:focus-visible { outline: 0.2rem solid var(--teal); outline-offset: 0.2rem; }
@media (hover: hover) and (pointer: fine) {
  .button:hover, .header-cta:hover { background: var(--button-hover); box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (prefers-contrast: more) { :root { --line: #747474; } }

/* A clear pause before each new subject, including on small screens. */
#main-content > .section,
#main-content > .final-cta {
  background: #fff;
  border-top: 1rem solid #eeeeee;
  padding-block: 2.5rem 3rem;
}
#main-content :is(.section, .final-cta) h2 {
  margin-top: 0;
  padding: 0 0 0 0.875rem;
  border-bottom: 0;
  border-left: 0.3rem solid var(--accent);
}
@media (prefers-contrast: more) {
  #main-content > .section,
  #main-content > .final-cta { border-top-color: #b8b8b8; }
}