/* makxasfc トップ 2026-11 改修（LINE への集中・FV の順序変更）。
   style.css と style_v2.css は公開中の版とコラム面が共有しているので触らず、この版からだけ読む。 */

/* FV を開いた時点では TOP ボタンを出さない（LINE ボタンへの重なりを防ぐ）。800px 以降は script.js が表示する */
.goTop { display: none; }

.kv2-hero-sp, .kv2-line-sp { display: none; }
.kv2-bottomblock .btns { grid-template-columns: 1fr; }
.kv2-bottomblock .btns .ele img { display: block; width: 100%; height: auto; }
.kv2-bottomblock .tel-part a.tel { display: block; text-decoration: none; }

@media screen and (min-width: 769px) {
  /* 時刻の span は全体の文字色（黒）を直接受けるので、span にも指定する。炎の明るい部分でも読めるよう影を付ける */
  .kv2-bottomblock .tel-part .time,
  .kv2-bottomblock .tel-part .time span {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .85);
  }
  .ctaSection__btn { justify-content: center; }
  .ctaSection__btn .ele { width: 62%; }
  .ctaSection__btn .ele:nth-of-type(1) { margin: 0 auto; }
}

/* 1201〜1365px は電話番号と営業時間が1行に収まらず「（年中無休）」が画面の右で切れるので、1200px 以下と同じ文字の大きさにする */
@media screen and (min-width: 1201px) and (max-width: 1365px) {
  .kv2-bottomblock .tel-part .tel { font-size: 36px; }
  .kv2-bottomblock .tel-part .time { font-size: 12px; }
}

@media screen and (max-width: 768px) {
  /* 順序: 帯 → ホリエモン → 出張買取のテキスト（2行）→ LINE → 3つの特徴。
     背景は kv2611_bg_sp.webp の1枚（人物が炎に溶け、下へ向かって青に変わる）。高さはすべて vw で決まるので機種で崩れない */
  .kv2 { background: url("../images/new/kv2611_bg_sp.webp") no-repeat 50% 0 / 100% auto; aspect-ratio: auto; }
  .kv2-hero-sp { display: block; height: calc(340/375*100vw); }
  .kv2-topblock { padding: 0 6.25vw 6.25vw; }
  .kv2-ttl01 {
    position: absolute;
    top: calc(6/375*100vw);
    left: 50%;
    width: 88%;
    margin: 0;
    transform: translateX(-50%);
  }
  .kv2-ttl02 { width: calc(300/375*100vw); }
  /* img の width/height は PC 用画像の比率なので、スマホ用画像（712×244）の比率を先に確保する。無いと読み込み時に LINE ボタンが動く */
  .kv2-ttl02 img { display: block; width: 100%; height: auto; aspect-ratio: 712 / 244; }
  .kv2-line-sp { display: block; margin-top: calc(8/375*100vw); }
  .kv2-line-sp img { display: block; width: 100%; height: auto; }
  .kv2 .kv-intro-list { margin-top: calc(14/375*100vw); }
  .kv2-bottomblock { margin-top: 0; padding-top: calc(4/375*100vw); background: #fff; }
  .kv2-bottomblock .btns { display: none; }
  .ctaSection__btn { justify-content: center; }
  .ctaSection__btn .ele { width: 74%; }
  .ctaSection__btn .ele:nth-of-type(1) { margin: 0 auto; }
  /* チャットワークを外すと電話が2番目になるので、電話の色を指定し直す */
  .fixedFooter .ele { flex: 1 1 0; width: auto; }
  .fixedFooter .ele:nth-of-type(2) { background: #243369; }
  .fixedFooter .ele:first-child { flex: 2 1 0; }
  .fixedFooter .ele:first-child > img { width: 20px; }
  .fixedFooter .ele:first-child > span { font-size: 14px; line-height: 1.2; }
}

/* スマホは画面外のセクションの描画を後回しにする（最初の計算が 2,438 要素→785 要素になり、LCP が約3.3秒縮む。2026-11-07 実測）。
   高さの概算は 390px の実測値。次のものは内側が枠の外へ出るか、固定表示の子を持つので対象にしない（切れる）:
   successSection / selSection / youtubeSection-container / programPopup / jissekiSection。
   ページ内リンクと # 付き URL では html.fc-cv-off で後回しをやめる（fc-lp-lighten.ts） */
@media screen and (max-width: 768px) {
  body > .appear { content-visibility: auto; contain-intrinsic-size: auto 477px; }
  body > .recruit { content-visibility: auto; contain-intrinsic-size: auto 1475px; }
  body > .supportSection-new { content-visibility: auto; contain-intrinsic-size: auto 778px; }
  body > .recSection { content-visibility: auto; contain-intrinsic-size: auto 313px; }
  body > .experienceSection { content-visibility: auto; contain-intrinsic-size: auto 959px; }
  body > .suiSection { content-visibility: auto; contain-intrinsic-size: auto 776px; }
  body > .riskSection { content-visibility: auto; contain-intrinsic-size: auto 483px; }
  body > .bgBorder { content-visibility: auto; contain-intrinsic-size: auto 1617px; }
  body > .ctaSection { content-visibility: auto; contain-intrinsic-size: auto 365px; }
  body > .featureSection { content-visibility: auto; contain-intrinsic-size: auto 3921px; }
  body > .featureTable { content-visibility: auto; contain-intrinsic-size: auto 947px; }
  body > .supportSection { content-visibility: auto; contain-intrinsic-size: auto 504px; }
  body > .supportTable { content-visibility: auto; contain-intrinsic-size: auto 590px; }
  body > .toolSection { content-visibility: auto; contain-intrinsic-size: auto 412px; }
  body > #operation2 { content-visibility: auto; contain-intrinsic-size: auto 647px; }
  body > .stepSection { content-visibility: auto; contain-intrinsic-size: auto 2705px; }
  body > section#operation:not(.consultantSection) { content-visibility: auto; contain-intrinsic-size: auto 1545px; }
  body > .modelSection { content-visibility: auto; contain-intrinsic-size: auto 740px; }
  body > .modelOptionSection { content-visibility: auto; contain-intrinsic-size: auto 433px; }
  body > .flowSection { content-visibility: auto; contain-intrinsic-size: auto 539px; }
  body > .costSection { content-visibility: auto; contain-intrinsic-size: auto 1528px; }
  body > #consultant { content-visibility: auto; contain-intrinsic-size: auto 2601px; }
  body > .operationSection.consultantSection { content-visibility: auto; contain-intrinsic-size: auto 1875px; }
  body > .faqSection { content-visibility: auto; contain-intrinsic-size: auto 1186px; }
  body > .pressColumns { content-visibility: auto; contain-intrinsic-size: auto 884px; }
  body > .aboutSection { content-visibility: auto; contain-intrinsic-size: auto 995px; }
  html.fc-cv-off body > * { content-visibility: visible; }
}

/* メニューに「コラム」を足すと、1439px 以下は既定の幅（743px）に収まらず折り返すので、1行に保つ */
@media screen and (min-width: 769px) and (max-width: 1439px) {
  .header__nav { flex: 1 1 auto; width: auto; min-width: 0; justify-content: flex-end; column-gap: 4px; }
  .header__nav .ele { white-space: nowrap; font-size: clamp(11px, 1.02vw, 14px); padding-left: 5px; padding-right: 5px; }
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .header__nav .ele { font-size: 10px; padding-left: 2px; padding-right: 2px; }
  .header__nav { column-gap: 0; }
}

/* トップからコラムへの導線 */
.pressColumns { padding: 72px 20px; background: #fafafa; }
.pressColumns__inner { max-width: 1040px; margin: 0 auto; }
.pressColumns__ttl { font-size: 28px; font-weight: 700; line-height: 1.4; text-align: center; letter-spacing: .05em; color: #243369; }
.pressColumns__lead { margin-top: 12px; font-size: 15px; line-height: 1.8; text-align: center; }
.pressColumns__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0 0; padding: 0; list-style: none; }
.pressColumns__card { display: block; height: 100%; padding: 20px; background: #fff; border: 1px solid #e4e4ee; border-radius: 12px; color: inherit; text-decoration: none; }
.pressColumns__cat { display: inline-block; margin-bottom: 12px; padding: 4px 10px; background: #ffe51c; border-radius: 4px; font-size: 12px; font-weight: 700; }
.pressColumns__title { font-size: 16px; font-weight: 700; line-height: 1.6; }
.pressColumns__excerpt { margin-top: 8px; font-size: 13px; line-height: 1.7; color: #4a4a6a; }
.pressColumns__more { display: block; width: fit-content; margin: 32px auto 0; padding: 14px 32px; border: 2px solid #243369; border-radius: 40px; font-weight: 700; color: #243369; text-decoration: none; }
@media screen and (max-width: 767px) {
  .pressColumns { padding: 48px 16px; }
  .pressColumns__ttl { font-size: 22px; }
  .pressColumns__list { grid-template-columns: 1fr; }
}