.header__item--has-sub > .header__link {
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
}

@media (min-width: 961px) {
  .hero {
    overflow-x: clip;
  }

  .header__item--has-sub > .header__link {
    width: auto;
  }

  .hero__inner {
    width: min(1440px, 100%);
  }
}

@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;
  }

  .header__item--has-sub > .header__link {
    position: relative;
    padding-right: 44px;
  }

  .header__item--has-sub > .header__link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(3.75 * var(--kanal-vw, 1vw));
    width: calc(2.5 * var(--kanal-vw, 1vw));
    height: calc(2.5 * var(--kanal-vw, 1vw));
    border-right: calc(0.313 * var(--kanal-vw, 1vw)) solid #fff;
    border-bottom: calc(0.313 * var(--kanal-vw, 1vw)) solid #fff;
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.3s;
  }

  .header__item--has-sub > .header__link[aria-expanded="true"]::after {
    transform: translateY(-25%) rotate(-135deg);
  }

  .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: 0.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;
}

@media (min-width: 961px) {
  .form .kanal-lf .klf-req::after {
    font-size: clamp(11px, 1.162vw, 17px);
  }
}

.movie__phone {
  position: relative;
}

.movie__play {
  position: absolute;
  z-index: 1;
  inset: calc(2.292 * var(--kanal-vw, 1vw)) calc(2.083 * var(--kanal-vw, 1vw));
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10% / 5.6%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}

.movie__play[hidden] {
  display: none;
}

.movie__play span {
  display: grid;
  place-items: center;
  width: clamp(48px, calc(15 * var(--kanal-vw, 1vw)), 76px);
  aspect-ratio: 1;
  padding-left: .15em;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgb(0 0 0 / 65%);
  font-size: clamp(20px, calc(6 * var(--kanal-vw, 1vw)), 32px);
  line-height: 1;
}

.movie__play:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

@media (min-width: 961px) {
  .movie__play {
    inset: min(15px, 1.042vw) min(13px, .903vw);
  }

  .movie__play span {
    width: clamp(48px, 4.8vw, 72px);
    font-size: clamp(20px, 2.2vw, 30px);
  }
}


/* 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 { left: auto; right: 0; }
}

/* 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: Shadow copies draw their letters from data-text, so the heading text is not written twice in the HTML. */
.hero__title-copy [data-text]::before,
.shadow-text__copy [data-text]::before { content: attr(data-text); }

/* 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 > div.bg-gray{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 > div.bg-black{padding-left:calc(var(--kanal-tab-gutter) + 0px);padding-right:calc(var(--kanal-tab-gutter) + 0px)}
  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) + 30px);padding-right:calc(var(--kanal-tab-gutter) + 30px)}
  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) + 30px);padding-right:calc(var(--kanal-tab-gutter) + 30px)}
  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) + 30px);padding-right:calc(var(--kanal-tab-gutter) + 30px)}
  section > div.hero__body{padding-left:calc(var(--kanal-tab-gutter) + 30.624px);padding-right:calc(var(--kanal-tab-gutter) + 30.624px)}
  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(30px + var(--kanal-tab-gutter));padding-right:calc(30px + var(--kanal-tab-gutter));max-width:none}
  main section.worry{margin-left:calc(0px - var(--kanal-tab-gutter));margin-right:calc(0px - var(--kanal-tab-gutter));padding-left:calc(30px + var(--kanal-tab-gutter));padding-right:calc(30px + var(--kanal-tab-gutter));max-width:none}
  main section.service{margin-left:calc(0px - var(--kanal-tab-gutter));margin-right:calc(0px - var(--kanal-tab-gutter));padding-left:calc(30px + var(--kanal-tab-gutter));padding-right:calc(30px + var(--kanal-tab-gutter));max-width:none}
  main section.movie{margin-left:calc(0px - var(--kanal-tab-gutter));margin-right:calc(0px - var(--kanal-tab-gutter));padding-left:calc(30px + var(--kanal-tab-gutter));padding-right:calc(30px + var(--kanal-tab-gutter));max-width:none}
}


/* 2026-10-26: PC版の動画事例・料金表の前後の余白を調整。 */
@media (min-width: 961px) {
  .movie { padding-top: min(100px, 6.944vw); }
  .after { padding-bottom: min(180px, 12.5vw); }
  .price { padding-top: min(179px, 12.431vw); }
}