@media (max-width: 960px) {
  .header__logo {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .header__toggle {
    width: 44px;
    height: 44px;
    background-size: 28px 2px;
  }

  .header__toggle::before,
  .header__toggle::after {
    left: 8px;
    width: 28px;
    height: 2px;
  }

  .header__toggle::before { top: 13px; }
  .header__toggle::after { bottom: 13px; }

  .header__toggle.is-open::before,
  .header__toggle.is-open::after {
    left: 5px;
    width: 34px;
    height: 2px;
  }

  .form .kanal-lf .klf-label {
    font-size: clamp(14px, calc(3.6 * var(--kanal-vw, 1vw)), 17px);
  }

  .form .kanal-lf .klf-req {
    display: inline-block;
    margin-left: .22em;
    line-height: 1;
    vertical-align: baseline;
  }

  .form .kanal-lf .klf-req::after {
    font-size: clamp(14px, calc(3.6 * var(--kanal-vw, 1vw)), 17px);
    line-height: 1;
    vertical-align: baseline;
  }
}

/* Keep visual order, reading order and keyboard order identical. */
.kanal-lf.lead-form, .form .kanal-lf {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 32px; grid-auto-flow: row; transform: none;
}
.kanal-lf .klf-field { min-width: 0; grid-column: auto; grid-row: auto; order: 0; }
.kanal-lf .klf-field--inquiry { grid-column: 1 / -1; }
.kanal-lf .klf-field .klf-label { margin: 0 0 6px; font-size: 16px; line-height: 1.6; }
.kanal-lf .klf-field .klf-input, .kanal-lf .klf-field .klf-textarea {
  width: 100%; height: 48px; min-height: 48px; margin: 0; padding: 10px 12px;
  font-size: 16px; line-height: 1.5; scroll-margin-top: 100px;
}
.kanal-lf .klf-field .klf-textarea { height: 120px; resize: vertical; }
.kanal-lf .klf-field-error { margin: 6px 0 0; color: #b42318; font-size: 14px; line-height: 1.6; }
.kanal-lf .klf-field-error[hidden] { display: none; }
.kanal-lf .klf-field [aria-invalid="true"] { border: 2px solid #b42318; }
.kanal-lf .klf-field :focus-visible { outline: 2px solid #167981; outline-offset: 3px; }
.kanal-lf .klf-consent, .kanal-lf .klf-btn, .kanal-lf .klf-err, .kanal-lf .klf-done {
  grid-column: 1 / -1; grid-row: auto; order: 0;
}
.kanal-lf.lead-form .klf-consent, .form .kanal-lf .klf-consent { margin: 10px 0 0; font-size: 14px; }
.kanal-lf.lead-form .klf-btn, .form .kanal-lf .klf-btn {
  max-width: 100%; margin: 0 auto; min-height: 56px; height: auto;
  padding: 18px 36px; font-size: 16px; line-height: 1.5; letter-spacing: normal;
  white-space: normal; text-wrap: balance;
}
.kanal-lf.lead-form .klf-err, .form .kanal-lf .klf-err { margin: 0; font-size: 14px; }
@media (max-width: 960px) {
  .kanal-lf.lead-form, .form .kanal-lf { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* 2026-10-16: readable pricing, restrained tablet sizes and resilient form headings. */
.price__note, .diff__note { font-size: 14px; line-height: 1.7; }
.price-table th, .price-table td { font-size: max(12px, 1em); overflow-wrap: anywhere; }
.price-table__head, .price-table__head:first-child { font-size: 12px; }
.price__note { margin-top: 16px; }
.form__title { font-size: clamp(26px, calc(8.4 * var(--kanal-vw, 1vw)), 48px); text-wrap: balance; }
.diff__title-main { font-size: clamp(32px, calc(11.5 * var(--kanal-vw, 1vw)), 58px); text-wrap: balance; }
.form .kanal-lf .klf-btn { width: min(100%, 466px); padding-left: 24px; padding-right: 36px; }
.form .kanal-lf .klf-btn::before { width: 20px; height: 18px; margin-right: 8px; }
.form .kanal-lf .klf-btn::after { width: 16px; height: 16px; right: 12px; }
@media (max-width: 960px) {
  .btn { width: min(100%, 520px); padding: 24px 40px 24px 24px; font-size: clamp(17px, calc(5.2 * var(--kanal-vw, 1vw)), 24px); border-radius: 14px; }
  .btn::before { width: 0; height: 0; margin: 0; right: 18px; border-width: 4px 0 4px 6px; }
  .btn::after { width: 18px; height: 18px; right: 12px; }
  .price-table { table-layout: fixed; }
  .price-table th, .price-table td { padding: 10px 4px; line-height: 1.6; }
  .price-table__head { height: auto; }
  .plan__note { font-size: 14px; }
}
@media (min-width: 601px) and (max-width: 960px) {
  .header__inner { height: 72px; min-height: 72px; padding-block: 12px; }
  .header__logo { width: 129px; }
  .form__frame, .form__body { max-width: 720px; margin-inline: auto; }
  .form__frame { padding: 48px 32px; }
  .form__lead, .faq__lead { font-size: 18px; }
  .faq-item__q { font-size: 20px; }
  .faq-item__a { font-size: 18px; }
  .price__note, .price-table__head, .price-table__head:first-child { font-size: 14px; }
}

@media (min-width: 601px) and (max-width: 960px) {
  main [id] { scroll-margin-top: 90px; }
  .form, .faq, .flow, .price { padding-block: 72px; }
  .form__lead, .faq__lead { margin-top: 28px; }
  .form__body { margin-top: 40px; }
  .faq__list, .flow__list { margin-top: 56px; }
  .faq-item { padding-block: 32px; }
}

/* Keep decorative artwork anchored to the full-width visual, outside the content column. */
@media (min-width: 961px) {
  .hero__deco--1 { width: 100%; background-size: 100% auto; }
}

/* Match the corporate header: bounded content, stable desktop logo and CTA. */
@media (min-width: 961px) {
  .header__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 1440px;
    height: 80px;
    margin-inline: auto;
    padding-inline: min(112px, 7.7777777778vw);
  }
  .header__logo { width: 129px; }
  .header__list { gap: 32px; padding-inline: 16px; }
  .header__link { font-size: 14px; }
  .header__contact { width: 154px; padding: 10px 20px; font-size: 14px; }
}

/* 2026-10-18: タブレット（601〜960px）は、600px 幅のスマホと同じ大きさの形を真ん中に置く。
   それまでは画面の幅に合わせて写真・余白・ボタンが全部伸び、768px で縦が約 37,000px（スマホの 1.6 倍）になっていた。
   スマホ用の決まりの vw は calc(N * var(--kanal-vw, 1vw)) と書いてあり、この幅のときだけ 1vw を 6px（600px 幅のとき）として数える。
   段の背景・帯は画面の端まで、中身だけを 600px の列に入れる。600px 以下と 961px 以上には効かない。 */
@media (min-width: 601px) and (max-width: 960px) {
  :root { --kanal-vw: 6px; --kanal-tab-gutter: calc((100vw - 600px) / 2); }
  .hero__inner{max-width:600px;margin-inline:auto}
  main > section.results{padding-left:calc(var(--kanal-tab-gutter) + 0px);padding-right:calc(var(--kanal-tab-gutter) + 0px)}
  main > section.worry{padding-left:calc(var(--kanal-tab-gutter) + 0.624px);padding-right:calc(var(--kanal-tab-gutter) + 0px)}
  main > section.effect{padding-left:calc(var(--kanal-tab-gutter) + 30px);padding-right:calc(var(--kanal-tab-gutter) + 30px)}
  main > section.compare{padding-left:calc(var(--kanal-tab-gutter) + 0px);padding-right:calc(var(--kanal-tab-gutter) + 0px)}
  main > section.about{padding-left:calc(var(--kanal-tab-gutter) + 30px);padding-right:calc(var(--kanal-tab-gutter) + 30px)}
  main > section.service{padding-left:calc(var(--kanal-tab-gutter) + 30px);padding-right:calc(var(--kanal-tab-gutter) + 30px)}
  main > section.reason{padding-left:calc(var(--kanal-tab-gutter) + 0px);padding-right:calc(var(--kanal-tab-gutter) + 0px)}
  main > section.diff{padding-left:calc(var(--kanal-tab-gutter) + 30px);padding-right:calc(var(--kanal-tab-gutter) + 30px)}
  main > section.cta.cta--1{padding-left:calc(var(--kanal-tab-gutter) + 30.624px);padding-right:calc(var(--kanal-tab-gutter) + 30.624px)}
  main > section.after{padding-left:calc(var(--kanal-tab-gutter) + 30px);padding-right:calc(var(--kanal-tab-gutter) + 30px)}
  main > section.price{padding-left:calc(var(--kanal-tab-gutter) + 9.378px);padding-right:calc(var(--kanal-tab-gutter) + 9.378px)}
  main > section.cta.cta--2{padding-left:calc(var(--kanal-tab-gutter) + 30.624px);padding-right:calc(var(--kanal-tab-gutter) + 30.624px)}
  main > section.flow{padding-left:calc(var(--kanal-tab-gutter) + 63.75px);padding-right:calc(var(--kanal-tab-gutter) + 63.75px)}
  main > section.form{padding-left:calc(var(--kanal-tab-gutter) + 30px);padding-right:calc(var(--kanal-tab-gutter) + 30px)}
  main > section.faq{padding-left:calc(var(--kanal-tab-gutter) + 30px);padding-right:calc(var(--kanal-tab-gutter) + 30px)}
  main > section.cta.cta--3{padding-left:calc(var(--kanal-tab-gutter) + 30.624px);padding-right:calc(var(--kanal-tab-gutter) + 30.624px)}
  section > div.hero__body{padding-left:calc(var(--kanal-tab-gutter) + 12.498px);padding-right:calc(var(--kanal-tab-gutter) + 12.498px)}
  body > footer.footer{padding-left:calc(var(--kanal-tab-gutter) + 12.498px);padding-right:calc(var(--kanal-tab-gutter) + 12.498px)}
  header > div.header__inner{padding-left:calc(var(--kanal-tab-gutter) + 25.002px);padding-right:calc(var(--kanal-tab-gutter) + 28.752px)}
  div > nav.header__nav.js-nav{padding-left:calc(var(--kanal-tab-gutter) + 28.752px);padding-right:calc(var(--kanal-tab-gutter) + 28.128px)}
  main article.case.case--reverse{margin-left:calc(0px - var(--kanal-tab-gutter));margin-right:calc(0px - var(--kanal-tab-gutter));padding-left:calc(30.624px + var(--kanal-tab-gutter));padding-right:calc(30.624px + var(--kanal-tab-gutter));max-width:none}
  main h2.reason__title{margin-left:calc(0px - var(--kanal-tab-gutter));margin-right:calc(0px - var(--kanal-tab-gutter));padding-left:calc(12.498px + var(--kanal-tab-gutter));padding-right:calc(12.498px + var(--kanal-tab-gutter));max-width:none}
}

/* 2026-10-20: keep the two intermediate CTAs inset and plan notes inside the cut-corner cards. */
@media (max-width: 600px) {
  .results > .cta-btn > .btn,
  .reason > .cta-btn > .btn { width: min(89.792vw, 520px); }
  .price__plans .plan__post { margin-top: 0; }
  .price__plans .plan__note {
    margin-top: 0;
    font-size: clamp(10px, 2.8vw, 14px);
    line-height: 1.2;
  }
}
@media (min-width: 961px) {
  .price__plans .plan__note {
    margin-top: 1cqi;
    font-size: clamp(14px, 5.5cqi, 16px);
    line-height: 1.2;
  }
}