@charset "UTF-8";
/* factoring16 only. All assets are local to this directory. */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500 600;
  src: url("../fonts/NotoSansJP-Medium.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700 800;
  src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/NotoSansJP-Black.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/NotoSerifJP-Black.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Klee One";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/KleeOne-SemiBold.woff2") format("woff2");
  font-display: swap;
}
:root {
  --navy: #13245d;
  --blue: #005cc0;
  --orange: #f05e12;
  --orange-deep: #c94c0a;
  --orange-soft: #fff2e7;
  --cta-orange: #f9871d;
  --cta-orange-deep: #ed6324;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --text: #343948;
  --muted: #eff2f6;
  --line: #cdddeb;
  --surface: #edf7fd;
  --content-width: 1000px;
  --hero-width: 1040px;
  --gutter: 24px;
  --section-space: 64px;
  --radius: 12px;
  --diagnosis-space: 350px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  color: var(--text);
  font:
    400 16px/1.8 "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    Meiryo,
    sans-serif;
  -webkit-text-size-adjust: 100%;
}
a {
  color: inherit;
}
button,
input,
select {
  font: inherit;
}
button,
a,
summary {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
[hidden] {
  display: none !important;
}
.sr-only,
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #c49412;
  outline-offset: 4px;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  background: white;
  padding: 12px;
}
.skip-link:focus {
  top: 10px;
}
.container {
  width: min(var(--content-width), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}
/* Header */
.site-header {
  min-height: 88px;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  border-bottom: 1px solid #e1edf5;
}
.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  text-decoration: none;
  color: #203d60;
  font-weight: 800;
}
.brand img {
  width: 48px;
}
.brand span {
  font-size: clamp(22px, 2.1vw, 30px);
  letter-spacing: -0.04em;
}
.brand em {
  font-style: normal;
  color: #b98917;
}
.site-header nav {
  display: flex;
  gap: 12px;
}
.consult-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  border-radius: 8px;
  min-height: 82px;
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 14px 18px;
  border: 1px solid var(--button-edge);
  background: linear-gradient(var(--button-top), var(--button-bottom));
  box-shadow: 0 3px 0 var(--button-edge);
  transition:
    filter 0.15s,
    transform 0.15s;
}
.consult-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.mail {
  --button-top: #007ad0;
  --button-bottom: #0060a4;
  --button-edge: #00508c;
}
.line {
  --button-top: #00b892;
  --button-bottom: #009a7c;
  --button-edge: #007b63;
}
.phone {
  --button-top: #ff8a4b;
  --button-bottom: #ed682b;
  --button-edge: #bd480d;
}
.consult-button small {
  display: block;
  font-size: 12px;
  line-height: 1.5;
}
.consult-button strong {
  display: block;
  font-size: 20px;
  line-height: 1.5;
  white-space: nowrap;
}
.consult-button .button-icon {
  width: 32px;
  max-height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.chevron {
  display: block;
  flex-shrink: 0;
  width: 8px;
  height: 14px;
  background: url("../images/arrow.svg") center/contain no-repeat;
  transform: scaleX(-1);
  margin-left: auto;
}
.site-header .consult-button {
  min-height: 52px;
  padding: 6px 16px;
  gap: 10px;
}
.site-header .consult-button small {
  font-size: 10px;
}
.site-header .consult-button strong {
  font-size: 16px;
}
.site-header .button-icon {
  width: 24px;
}
/* Hero: text and values are editable HTML; background never controls layout. */
.hero {
  background:
    linear-gradient(100deg, #eff8fff2 0%, #e3f2ffdb 54%, #cde7ffb8 100%),
    url("../images/hero-city.png") center top / cover no-repeat;
  background-color: #e6f3ff;
}
.hero-content {
  width: min(var(--hero-width), calc(100% - var(--gutter) * 2));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0 28px;
  align-items: stretch;
  padding-block: 20px 30px;
}
.hero-intro {
  grid-column: 1 / -1;
  width: min(100%, 900px);
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  align-items: center;
  column-gap: 12px;
}
.hero-person {
  display: block;
  width: calc(100% + 40px);
  max-width: none;
  height: auto;
  align-self: end;
  justify-self: end;
}
.hero-copy-text {
  padding: 28px 0 32px;
}
.hero-copy-text p:not(.hero-audience) {
  margin-bottom: 0;
}
/* Handwritten lead: centered above the PC copy; two compact lines on mobile. */
.hero-audience {
  display: table;
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 34px;
  padding: 0 0 12px;
  color: var(--blue);
  font-family: "Klee One", cursive;
  font-size: clamp(22px, 1.95vw, 26px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform: rotate(-6deg);
}
.hero-audience::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 18px;
  right: -12px;
  height: 7px;
  background: linear-gradient(90deg, #005cc033, #005cc0 50%, #005cc066);
  clip-path: polygon(0 75%, 100% 0, 92% 65%, 8% 100%);
}
.hero-category {
  display: table;
  width: fit-content;
  margin-top: 0;
  padding: 4px 14px;
  border-left: 4px solid var(--orange);
  border-radius: 0 4px 4px 0;
  background: #ffffffdb;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.hero h1 {
  margin: 20px 0 22px;
  color: var(--navy);
  font-weight: 900;
  font-family: var(--font-serif);
  font-size: clamp(34px, 3.6vw, 52px);
  letter-spacing: 0.02em;
  line-height: 1.45;
}
/* Two slightly uneven strokes keep the marker editable and crisp at every size. */
.hero-marker {
  position: relative;
  isolation: isolate;
  color: var(--blue);
  white-space: nowrap;
}
.hero-marker::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.015em;
  right: -0.015em;
  bottom: -0.1em;
  height: 0.27em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 26' preserveAspectRatio='none'%3E%3Cpath d='M5 15C48 7 98 12 148 7S201 9 224 4' fill='none' stroke='%23f9871d' stroke-width='7' stroke-linecap='round' opacity='.72'/%3E%3Cpath d='M13 24C80 15 147 21 216 13' fill='none' stroke='%23ed6324' stroke-width='2.3' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  pointer-events: none;
}
.hero-subcopy {
  color: var(--navy);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.7;
}
.hero-subcopy span {
  display: inline-block;
}
.hero-description {
  margin-top: 8px;
  font-size: 15px;
}
.hero-details {
  padding: 18px 22px 14px;
  background: #fffffff5;
  border-top: 4px solid var(--blue);
  border-radius: 4px 4px 12px 12px;
  box-shadow: 0 12px 36px #275b8610;
}
.hero-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0;
}
.hero-numbers > div {
  display: grid;
  grid-template-rows: auto 1fr;
  text-align: center;
}
.hero-numbers > div + div {
  border-left: 1px solid var(--line);
  padding-left: 20px;
}
.hero-numbers dt {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.hero-numbers dd {
  margin: 0;
  color: var(--blue);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}
.hero-numbers dd strong {
  font-family: Arial, sans-serif;
  font-size: 37px;
  letter-spacing: -0.03em;
}
.hero-numbers .hero-fee dd {
  display: flex;
  align-items: baseline;
  justify-content: center;
  align-self: center;
  line-height: 1;
}
.hero-numbers dd .fee-number {
  color: var(--orange);
  font-size: 82px;
}
.first-time {
  display: inline-block;
  border: 1px solid #efb48c;
  border-radius: 4px;
  padding: 3px 7px;
  margin-right: 6px;
  color: var(--orange-deep);
  background: var(--orange-soft);
  font-size: 14px;
}
.hero-numbers .percent {
  color: var(--orange);
  font-size: 26px;
}
.hero-numbers sup {
  color: var(--text);
  font-size: 11px;
  align-self: flex-start;
  padding-top: 12px;
}
.hero-notes {
  font-size: 11px;
  margin-top: 8px;
}
.hero-notes p {
  margin: 0;
}
/* FV quick diagnosis: heading, input and action are independent editing points. */
.hero-quick-diagnosis {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding: 22px 24px;
  background: #fffffff5;
  border: 1px solid #e8c8b2;
  border-top: 4px solid var(--orange);
  border-radius: 4px 4px 12px 12px;
}
.hero-quick-diagnosis h2 {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid var(--orange);
  color: var(--navy);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
}
.hero-quick-controls {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.6fr);
  gap: 14px;
}
.hero-amount-field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #94b5d5;
  border-radius: 8px;
  color: var(--navy);
  background: #f9fcff;
  font-size: 14px;
  font-weight: 700;
}
.hero-amount-field span {
  white-space: nowrap;
}
.hero-quick-diagnosis input {
  appearance: textfield;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
}
.hero-quick-diagnosis input::-webkit-inner-spin-button,
.hero-quick-diagnosis input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.hero-quick-diagnosis .primaryButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 78px;
  padding: 12px 14px;
  margin: 0;
  background: linear-gradient(
    180deg,
    var(--cta-orange),
    var(--cta-orange-deep)
  );
  color: #fff;
  border: 1px solid var(--cta-orange-deep);
  border-radius: 10px;
  box-shadow:
    0 3px 0 #d4511a,
    inset 0 1px 0 #ffffff70;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.5;
  text-shadow: 0 1px 2px #9c3e16b3;
}
.hero-quick-diagnosis .primaryButton:hover {
  background: linear-gradient(180deg, #ed7621, #df571c);
}
.hero-quick-diagnosis .primaryButton svg {
  width: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-quick-diagnosis small {
  display: table;
  margin: 4px auto 0;
  padding: 1px 12px 2px;
  border-radius: 20px;
  background: #bd4710;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-shadow: none;
}
.hero-bottom {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #b8d8eb;
}
.hero-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}
.hero-benefits li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: left;
  padding: 6px 8px;
}
.hero-benefit-icon {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  padding: 11px;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange-deep);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-benefits li + li {
  border-left: 1px solid #b8d8eb;
}
.hero-benefits strong {
  white-space: nowrap;
  display: block;
  color: var(--blue);
  font-size: 18px;
}
.hero-benefits span {
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.hero-reception {
  text-align: center;
}
.hero-reception p {
  margin: 0;
  color: var(--navy);
  line-height: 1.4;
  font-size: 14px;
  font-weight: 700;
}
.hero-reception strong {
  font-family: Arial, sans-serif;
  color: var(--blue);
  font-size: 36px;
}
.hero-reception strong span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
}
.hero-reception small {
  display: block;
  margin-top: 8px;
  font-size: 10px;
}
/* Each CTA is a direct flex child. Comment out any one .cta-item without CSS changes. */
.consultation {
  background: #fff;
  padding: 38px 0;
}
.cta-desktop {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
}
.cta-item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 460px;
}
.cta-item > .consult-button {
  height: 100%;
}
.telephone {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.telephone p {
  font-size: 11px;
  margin: 0 0 2px;
  font-weight: 700;
}
.telephone p strong {
  font-size: 17px;
}
.telephone > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  color: var(--orange);
}
.telephone img {
  width: 32px;
}
.telephone b {
  font-family: Arial, sans-serif;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.telephone small {
  font-size: 11px;
  color: var(--orange);
  margin-top: 3px;
}
.cta-mobile {
  display: none;
}
/* FAQ */
.faq {
  padding: var(--section-space) 0;
  background: #edf7ff;
}
.faq-card {
  background: white;
  border: 1px solid #d5e4ef;
  border-radius: 16px;
  padding: 42px 52px;
  color: var(--navy);
}
.section-heading,
.sectionHeading {
  text-align: center;
}
.section-heading p,
.sectionHeading > span {
  display: block;
  margin: 0;
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.section-heading h2,
.sectionHeading h2 {
  color: var(--navy);
  font-size: 30px;
  line-height: 1.5;
  margin: 10px 0 28px;
}
.sectionHeading > p {
  margin-bottom: 28px;
}
.faq-list {
  max-width: 760px;
  margin: auto;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item:last-child {
  border-bottom: 0;
}
.faq-item summary {
  list-style: none;
  display: grid;
  grid-template-columns: 28px 1fr 14px;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 18px 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.q {
  font-family: Arial, sans-serif;
  font-size: 24px;
  color: var(--blue);
}
.faq-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
}
.faq-item[open] .faq-chevron {
  transform: rotate(225deg);
}
.faq-answer {
  padding: 0 28px 24px 42px;
  font-size: 15px;
  line-height: 1.9;
}
.contact-banner {
  display: none;
}
/* Application: original inputs and validation hooks are preserved. */
.contact {
  padding: var(--section-space) 0;
  background: #edf5fb;
}
.application {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 44px;
  color: var(--text);
}
.form-row {
  display: grid;
  grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.6fr);
  align-items: center;
  gap: 24px;
  margin: 0 0 20px;
  min-width: 0;
}
.form-row > label,
.radio-row legend {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.required,
.diagnosis-section em {
  font-style: normal;
  font-size: 12px;
  line-height: 22px;
  padding: 0 6px;
  background: #ed7125;
  color: white;
  border-radius: 3px;
  font-weight: 500;
  white-space: nowrap;
}
.form-row > input,
.form-row > select,
.select-wrap > select,
.diagnosisFields input:not([type="radio"]),
.diagnosisSide input:not([type="radio"]) {
  display: block;
  width: 100%;
  min-width: 0;
  background: #f5f8fb;
  border: 1px solid #b9cbdc;
  border-radius: 6px;
  min-height: 52px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 16px;
}
.form-row > input::placeholder {
  color: #7b8390;
}
.form-row select:invalid {
  color: #737b88;
}
.form-row select {
  padding-right: 32px;
}
.select-wrap {
  position: relative;
}
.select-wrap > select {
  appearance: none;
}
.select-wrap > img {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  height: 14px;
  transform: translateY(-50%) rotate(90deg);
  pointer-events: none;
}
.application hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 30px 0;
}
.radio-row {
  display: block;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  padding: 0 0 20px;
}
.radio-row legend {
  width: 100%;
  max-width: 380px;
  padding: 0;
  margin-bottom: 12px;
}
.radio-options {
  display: flex;
  align-items: center;
  gap: 16px 30px;
  flex-wrap: wrap;
}
.radio-options label,
.choiceRow label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  padding-block: 5px;
}
.radio-options input,
.consent input,
.choiceRow input {
  accent-color: var(--blue);
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
}
.radio-options small {
  color: #b53b53;
  font-size: 12px;
  display: block;
  width: 100%;
}
.consent {
  text-align: center;
  margin: 32px auto 24px;
  font-size: 14px;
}
.consent p {
  margin: 0 0 12px;
}
.consent a {
  color: var(--blue);
  text-underline-offset: 3px;
}
.consent label {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.submit-button,
.primaryButton {
  display: block;
  width: min(100%, 420px);
  margin: 22px auto 0;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: white;
  font-size: 19px;
  font-weight: 700;
  min-height: 60px;
  padding: 14px 24px;
  text-align: center;
}
.submit-button {
  background: linear-gradient(#ffa827, #f08700);
  box-shadow: 0 3px 0 #c66a00;
}
.submit-button > span {
  margin-left: 18px;
}
.submit-button:disabled {
  opacity: 0.65;
  cursor: wait;
}
.form-error {
  padding: 16px;
  border: 1px solid #dc3b45;
  border-radius: 6px;
  background: #fff3f4;
  color: #a32330;
  font-size: 14px;
}
/* Company information: lower-page section, using the existing company data. */
.company-overview {
  padding-block: var(--section-space);
  background: #eff5f9;
}
.company-overview-heading {
  margin-bottom: 42px;
  text-align: center;
}
.company-overview-heading p {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
}
.company-overview-heading h2 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 900;
  line-height: 1.65;
}
.company-overview-list {
  max-width: 800px;
  margin: 0 auto;
}
.company-overview-list > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
  padding-block: 22px;
  border-bottom: 1px solid #c7d5e6;
}
.company-overview-list dt {
  color: var(--navy);
  font-weight: 700;
}
.company-overview-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.company-overview-list a {
  color: var(--blue);
  font-weight: 700;
  text-underline-offset: 4px;
}
@media (max-width: 768px) {
  .company-overview-heading {
    margin-bottom: 28px;
  }
  .company-overview-heading p {
    margin-bottom: 9px;
    font-size: 13px;
  }
  .company-overview-heading h2 {
    font-size: clamp(22px, 6vw, 30px);
  }
  .company-overview-list > div {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 15px;
    padding-block: 18px;
    font-size: 13px;
  }
}
.site-footer {
  text-align: center;
  font-size: 14px;
  padding: 30px 16px;
}
.site-footer nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.site-footer a {
  text-underline-offset: 4px;
}
.site-footer p {
  margin: 14px 0 0;
}
.sticky-cta {
  display: none;
}
/* Application is the third stage inside the same diagnosis box, as in factoring15. */
.application-step .application {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.application-step .form-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.application-step .radio-row legend {
  max-width: none;
}
/* Diagnosis from factoring15. No new network requests or submit endpoints. */
.diagnosis-section {
  margin-bottom: 0;
}
.diagnosisBox {
  max-width: 640px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 40px;
}
.diagnosisSteps,
.sideProgress {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  gap: 8px;
}
.diagnosisSteps li {
  flex: 1;
  padding: 10px;
  background: #edf2f7;
  text-align: center;
  font-size: 13px;
  border-radius: 4px;
}
.diagnosisSteps [aria-current],
.sideProgress [aria-current] {
  color: #fff;
  background: var(--blue);
}
.diagnosisFields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.diagnosisFields fieldset {
  margin: 0;
  border: 0;
  padding: 0;
  min-width: 0;
}
.diagnosisFields legend {
  margin-bottom: 8px;
}
.diagnosisField {
  display: block;
}
.diagnosisField input {
  margin-top: 8px;
}
.diagnosisField small,
.note {
  display: block;
  color: #667589;
  font-size: 12px;
  line-height: 1.7;
}
.note {
  text-align: center;
  margin-top: 18px;
}
.choiceRow {
  display: flex;
  gap: 12px 22px;
  flex-wrap: wrap;
}
.amountInput {
  display: flex;
  align-items: center;
  gap: 10px;
}
.amountInput input {
  flex: 1;
}
#diagnosis-result {
  text-align: center;
}
.resultCompany {
  color: var(--navy);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.resultAmount {
  color: var(--blue);
  margin-block: 16px;
}
.resultAmount strong {
  font-family: Arial, sans-serif;
  font-size: clamp(28px, 5vw, 52px);
}
.resultAmount span {
  font-size: 20px;
  margin-left: 8px;
}
.resultNote {
  font-size: 13px;
}
#large-amount-note {
  color: var(--orange);
  font-weight: 700;
}
.textButton {
  display: block;
  border: 0;
  background: none;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px;
  margin: 16px auto 0;
  padding: 8px;
}
.diagnosis-context {
  border-left: 3px solid var(--blue);
  padding: 12px 16px;
  background: var(--surface);
  margin: 0 0 28px;
  overflow-wrap: anywhere;
}
.diagnosisSideTab {
  position: fixed;
  z-index: 22;
  right: 0;
  top: 34%;
  writing-mode: vertical-rl;
  padding: 18px 10px;
  border: 0;
  border-radius: 8px 0 0 8px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.diagnosisSide {
  position: fixed;
  right: 16px;
  top: 20px;
  z-index: 24;
  width: 318px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #9cbce3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 28px #1a296420;
  font-size: 14px;
}
.sideHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #fff;
  background: var(--blue);
  padding: 10px 12px;
  font-size: 11px;
}
#close-side-diagnosis {
  width: 32px;
  height: 32px;
  border: 1px solid #ffffff70;
  border-radius: 5px;
  background: none;
  color: white;
  font-size: 24px;
  line-height: 1;
}
.sideBody {
  padding: 18px;
}
.sideLead {
  margin: 0;
  text-align: center;
  color: var(--blue);
  font-size: 13px;
}
.sideBody h2 {
  text-align: center;
  color: var(--navy);
  margin: 2px 0 6px;
  font-size: 28px;
}
.sideFee {
  text-align: center;
  font-size: 11px;
  margin: 0 0 14px;
}
.sideProgress {
  margin-bottom: 20px;
}
.sideProgress li {
  border-radius: 50%;
  background: #edf2f7;
  width: 28px;
  height: 28px;
  text-align: center;
}
.sideProgress [aria-current] {
  background: var(--blue);
}
.sideBody h3 {
  font-size: 16px;
  margin: 0 0 16px;
  color: var(--navy);
}
.sideAmounts,
.sideChoices {
  display: grid;
  gap: 8px;
}
.sideAmounts button,
.sideChoices button {
  border: 1px solid #b2cce2;
  background: #f2f8fc;
  color: var(--navy);
  border-radius: 6px;
  min-height: 40px;
  padding: 8px;
  font-size: 14px;
  font-weight: 700;
}
.sideAmounts button:hover,
.sideChoices button:hover {
  background: #e0effb;
}
.sideAmountExact {
  display: block;
  margin-top: 16px;
  font-size: 12px;
}
.sideAmountExact > span:last-child {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.sideAmountExact input {
  min-width: 0;
  width: 0;
  flex: 1;
}
.sideBody .primaryButton {
  min-height: 48px;
  font-size: 15px;
  padding: 12px;
}
.sideBody [data-side-step="3"] > label {
  display: block;
  margin-top: 14px;
}
.sideBody .choiceRow {
  gap: 12px;
}
.sideBody .choiceRow label {
  font-size: 13px;
}
.sidePhone {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 16px;
  text-align: center;
}
.sidePhone a {
  display: block;
  color: var(--orange);
  font:
    700 28px/1.5 Arial,
    sans-serif;
  text-decoration: none;
}
.sidePhone small {
  font-size: 11px;
}
/* Reserve the actual sidebar width; no body, CTA, or form can sit underneath it. */
@media (min-width: 769px) {
  .diagnosis-open > main > :not(.hero),
  .diagnosis-open > .site-footer {
    margin-right: var(--diagnosis-space);
  }
  .diagnosis-open .cta-desktop {
    flex-wrap: wrap;
  }
  .diagnosis-open .cta-item {
    flex-basis: 240px;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .diagnosis-open .faq-card {
    padding-inline: 24px;
  }

  .hero-intro {
    grid-template-columns: minmax(0, 1fr) 31%;
    gap: 18px;
  }
  .hero-copy-text {
    padding-block: 20px 28px;
  }
  .hero-audience {
    font-size: clamp(20px, 2.25vw, 24px);
  }
  .hero h1 {
    font-size: clamp(31px, 4.2vw, 44px);
  }
  .hero-subcopy {
    font-size: 18px;
  }
  .hero-content {
    column-gap: 18px;
  }
  .hero-details {
    padding-inline: 14px;
  }
  .hero-quick-diagnosis {
    padding-inline: 16px;
  }
  .hero-quick-diagnosis h2 {
    font-size: 19px;
  }
  .hero-quick-controls {
    grid-template-columns: minmax(132px, 0.85fr) minmax(0, 1.3fr);
    gap: 10px;
  }
  .hero-quick-diagnosis input {
    font-size: 28px;
  }
  .hero-quick-diagnosis .primaryButton {
    font-size: clamp(12px, 1.65vw, 14px);
    padding-inline: 8px;
    gap: 4px;
  }
  .hero-quick-diagnosis .primaryButton svg {
    display: none;
  }
  .hero-numbers dd .fee-number {
    font-size: 72px;
  }
  .hero-numbers dd strong {
    font-size: 32px;
  }
  .hero-bottom {
    grid-template-columns: 1fr;
  }
  .site-header {
    padding-inline: 18px;
  }
  .site-header nav .line {
    display: none;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
@media (max-width: 768px) {
  :root {
    --gutter: 16px;
    --section-space: 40px;
  }
  html {
    scroll-padding-top: 16px;
  }
  .site-header {
    min-height: 64px;
    padding: 12px;
    gap: 8px;
  }
  .brand {
    gap: 4px;
  }
  .brand img {
    width: 31px;
  }
  .brand span {
    font-size: clamp(15px, 4vw, 22px);
    letter-spacing: -0.05em;
  }
  .site-header .line,
  .site-header .mail small,
  .site-header .chevron {
    display: none;
  }
  .site-header .mail {
    min-height: 38px;
    padding: 7px 9px;
    gap: 6px;
  }
  .site-header .mail strong {
    font-size: 0;
  }
  .site-header .mail strong::after {
    content: "メール無料相談";
    font-size: 10px;
  }
  .site-header .button-icon {
    width: 18px;
  }
  /* SPの街並みはコピー・人物の高さに合わせ、CTAの高さで拡大させない。 */
  .hero {
    background: #e6f3ff;
  }
  .hero-content {
    display: block;
    padding-block: 22px 26px;
  }
  .hero-intro {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr) 42%;
    gap: 0 8px;
  }
  .hero-intro::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -22px calc(-1 * var(--gutter)) 0;
    background:
      linear-gradient(
        90deg,
        #fffffff2 0%,
        #ffffffe6 48%,
        #ffffffcc 64%,
        #f0f8ff66 100%
      ),
      url("../images/hero-city.png") center bottom / cover no-repeat;
    pointer-events: none;
  }
  .hero-copy-text {
    display: contents;
  }
  .hero-audience {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .hero-audience {
    font-size: clamp(14px, 3.75vw, 20px);
    line-height: 1.35;
    padding-bottom: 8px;
    margin: 0 0 18px 4px;
  }
  .hero-audience span {
    display: block;
  }
  .hero-audience span + span {
    margin-left: 2em;
  }
  .hero-audience::after {
    left: 8px;
    right: -7px;
    height: 5px;
  }
  .hero-category {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    padding: 3px 10px;
    font-size: 10px;
  }
  .hero-person {
    grid-column: 2;
    grid-row: 2 / 6;
    width: 106%;
    align-self: end;
  }
  .hero h1 {
    grid-column: 1 / -1;
    grid-row: 3;
    width: fit-content;
    max-width: 70%;
    font-size: clamp(22px, calc(5.25vw + 2px), 38px);
    margin: 16px 0 14px;
    line-height: 1.5;
    letter-spacing: 0;
  }
  .hero-marker::after {
    /* End under the visible punctuation, leaving space before the portrait. */
    right: 0.6em;
  }
  .hero-subcopy {
    grid-column: 1;
    grid-row: 4;
    font-size: clamp(12px, 3.3vw, 18px);
    line-height: 1.7;
  }
  .hero-description {
    grid-column: 1;
    grid-row: 5;
    font-size: clamp(10px, 2.7vw, 14px);
    line-height: 1.7;
    margin-top: 8px;
    padding-bottom: 18px;
  }
  .hero-details {
    padding: 14px 14px 12px;
    margin-top: 0;
  }
  .hero-numbers {
    gap: 12px;
  }
  .hero-numbers > div + div {
    padding-left: 10px;
  }
  .hero-numbers dt {
    font-size: 13px;
    margin-bottom: 6px;
  }
  .hero-numbers dd {
    font-size: 15px;
  }
  .hero-numbers dd strong {
    font-size: 30px;
  }
  .hero-numbers dd .fee-number {
    font-size: 70px;
  }
  .hero-numbers .percent {
    font-size: 21px;
  }
  .first-time {
    font-size: 10px;
    padding: 2px 4px;
    margin-right: 4px;
  }
  .hero-numbers sup {
    font-size: 9px;
    padding-top: 9px;
  }
  .hero-notes {
    font-size: 9px;
    margin-top: 8px;
  }
  .hero-quick-diagnosis {
    margin-top: 16px;
    padding: 16px;
    gap: 12px;
  }
  .hero-quick-diagnosis h2 {
    font-size: 19px;
    padding-left: 9px;
  }
  .hero-quick-controls {
    grid-template-columns: minmax(105px, 0.85fr) minmax(0, 1.4fr);
    gap: 10px;
  }
  .hero-amount-field {
    padding: 10px;
    font-size: 12px;
  }
  .hero-quick-diagnosis input {
    font-size: 30px;
  }
  .hero-quick-diagnosis .primaryButton {
    min-height: 66px;
    padding: 10px 7px;
    font-size: 13px;
    gap: 4px;
  }
  .hero-quick-diagnosis .primaryButton svg {
    display: none;
  }
  .hero-quick-diagnosis small {
    font-size: 10px;
  }
  .hero-bottom {
    display: block;
    margin-top: 22px;
    padding-top: 20px;
  }
  .hero-benefits li {
    flex-direction: column;
    gap: 6px;
    padding: 2px 4px;
    text-align: center;
  }
  .hero-benefit-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    padding: 9px;
  }
  .hero-benefits strong {
    white-space: nowrap;
    font-size: clamp(12px, 3.5vw, 18px);
  }
  .hero-benefits span {
    font-size: clamp(10px, 2.8vw, 15px);
  }
  .hero-reception {
    margin-top: 24px;
  }
  .hero-reception strong {
    font-size: 32px;
  }
  .hero-reception strong span {
    font-size: 20px;
  }
  .cta-desktop {
    display: none;
  }
  /* SP CTA：参考の白いパネルと青い背景。3つの相談導線は個別に編集可能。 */
  .consultation {
    padding: 40px 20px;
    background:
      linear-gradient(120deg, #1767a9d9, #208ab6c2),
      url("../images/hero-city.png") center / cover no-repeat;
  }
  .cta-mobile {
    display: block;
    max-width: 540px;
    margin: auto;
  }
  .cta-card {
    background: #fff;
    padding: 32px 18px 28px;
    border: 1px solid #ffffffa6;
    border-radius: 2px;
    text-align: center;
  }
  .cta-card h2 {
    color: var(--navy);
    font-size: clamp(22px, 5.6vw, 28px);
    line-height: 1.6;
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.03em;
  }
  .cta-card h2 em {
    font-style: normal;
    color: var(--blue);
  }
  .cta-intro {
    margin-top: 20px;
  }
  .cta-intro p {
    font-size: clamp(12px, 3.2vw, 14px);
    margin: 0;
    line-height: 2;
  }
  .cta-intro p span {
    color: var(--blue);
    font-weight: 700;
  }
  .cta-buttons {
    display: grid;
    gap: 16px;
    margin-top: 26px;
  }
  .cta-card .consult-button {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 7px;
    min-height: 82px;
    gap: 8px;
    padding: 12px;
    border: 0;
    border-radius: 7px;
    background: var(--button-top);
    box-shadow: 0 4px 0 var(--button-edge);
  }
  .cta-card .phone {
    --button-top: #f57923;
    --button-edge: #d95b16;
  }
  .cta-card .mail {
    --button-top: #1684c9;
    --button-edge: #0767a3;
  }
  .cta-card .line {
    --button-top: #26b88b;
    --button-edge: #15936d;
  }
  .cta-card .consult-button small {
    font-size: clamp(10px, 2.8vw, 13px);
    font-weight: 600;
    line-height: 1.5;
  }
  .cta-card .consult-button strong {
    font-size: clamp(18px, 4.8vw, 23px);
    font-weight: 800;
    line-height: 1.5;
    margin-top: 3px;
  }
  .cta-card .button-icon {
    width: 26px;
  }
  .cta-card .chevron {
    width: 7px;
    margin: 0;
  }

  .faq-card {
    padding: 28px 20px;
  }
  .section-heading h2,
  .sectionHeading h2 {
    font-size: 26px;
    margin-bottom: 24px;
  }
  .sectionHeading > p {
    font-size: 14px;
  }
  .faq-item summary {
    grid-template-columns: 22px 1fr 10px;
    gap: 10px;
    font-size: 14px;
    line-height: 1.8;
    min-height: 72px;
  }
  .faq-answer {
    font-size: 14px;
    padding: 0 4px 22px 32px;
  }
  .contact-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: #123f79 url("../images/cta-bg_sp.png") center/cover;
    color: #fff;
    padding: 30px 16px;
  }
  .contact-banner p {
    border: 1px solid white;
    margin: 0;
    padding: 2px 16px;
    font-size: 15px;
  }
  .contact-banner strong {
    font-size: 20px;
  }
  .contact-banner em {
    color: #ffd039;
    font-style: normal;
    font-size: 25px;
  }
  .application {
    padding: 28px 20px;
  }
  .form-row {
    display: block;
    margin-bottom: 24px;
  }
  .form-row > label,
  .radio-row legend {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .form-row > input,
  .form-row > select {
    min-height: 50px;
  }
  .radio-options {
    gap: 10px 24px;
  }
  .radio-options label {
    font-size: 15px;
  }
  .consent {
    font-size: 13px;
  }
  .submit-button,
  .primaryButton {
    font-size: 17px;
    min-height: 56px;
    padding: 14px;
  }
  .site-footer {
    font-size: 12px;
    padding-bottom: 32px;
  }
  .diagnosisBox {
    padding: 24px 18px;
  }
  .diagnosisFields {
    gap: 22px;
  }
  .diagnosisSteps {
    gap: 4px;
  }
  .diagnosisSteps li {
    font-size: 10px;
    padding: 8px 2px;
  }
  .diagnosisField,
  .diagnosisFields legend {
    font-size: 14px;
  }
  .diagnosisSide,
  .diagnosisSideTab {
    display: none;
  }
  .sticky-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
    background: #fffffff2;
    box-shadow: 0 -2px 14px #00396a18;
  }
  .sticky-cta > p {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid #fb7c0b;
    background: white;
    border-radius: 4px;
    color: #f97800;
    margin: 0 0 -3px;
    padding: 2px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }
  .sticky-cta > p strong {
    font-size: 18px;
  }
  .sticky-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 10px;
    color: white;
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
    border-radius: 50px;
  }
  .sticky-cta a > span {
    position: absolute;
    right: 16px;
    font-size: 28px;
    font-weight: 400;
  }
  .sticky-cta a > img {
    width: 29px;
    height: 33px;
    object-fit: contain;
  }
  .sticky-form {
    background: linear-gradient(#f59a22, #ec6624);
    height: 45px;
    box-shadow: 0 3px 0 #9e3d00;
    margin-bottom: 8px;
  }
  .sticky-cta > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .sticky-cta > div > a {
    height: 53px;
  }
  .sticky-line {
    background: linear-gradient(#00dc54, #00af4a);
    box-shadow: 0 3px 0 #00833a;
  }
  .sticky-phone {
    background: linear-gradient(#fa3e32, #df0d08);
    box-shadow: 0 3px 0 #8d0d00;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none;
  }
}

/* Existing policy / company / completion pages */
.document-page {
  color: #333;
}
.document-page main {
  margin: 70px auto 60px;
  width: calc(100% - 40px);
}
.document-page h1 {
  font-size: 39.45px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  margin: 0 0 50px;
  color: #000;
}
.legal-document {
  max-width: 650px;
}
.policy-copy {
  font-size: 16px;
  line-height: 28px;
}
.company-document {
  max-width: 679px;
  padding-top: 16px;
}
.company-document h1 {
  margin-bottom: 44px;
}
.company-document dl {
  margin: 0;
}
.company-document dt {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  margin-top: 12px;
  color: #000;
}
.company-document dd {
  font-size: 16px;
  line-height: 25px;
  margin: 4px 0 0;
}
.company-document dd a {
  text-decoration: none;
}
.back-link {
  display: inline-block;
  margin-top: 42px;
  font-size: 14px;
  color: #005cc0;
  text-underline-offset: 4px;
}
.thanks-document {
  max-width: 701px;
}
.thanks-document h1 {
  margin-bottom: 42px;
}
.thanks-document p {
  font-size: 16px;
  line-height: 28px;
  margin: 0;
}
.thanks-document .errors {
  line-height: 1.8;
  padding-left: 24px;
  color: #ac2435;
}