/* =========================================================
   修正一覧（2026-10-24）トップページ分の修正案
   ========================================================= */

/* ---------- PC（751px以上） ---------- */
@media (min-width: 751px) {

  /* 2番：タイトルは今と同じ 64px。1行目（1791px）は内容幅 1400px に入らないので
     「を、」と「整理する。」の2か所で改行して3行に組む（HTML 側の <br>）。
     3行ぶん（+100px）とボタン（+94px）で高さが増えるので、ヒーローを 168px 伸ばし、
     ロゴ帯を下げて「バッジ→見出し→下線→ボタン→ロゴ帯」の 40px 間隔を守る */
  .fv { height: 1208px; }
  /* 背景の写真は、いまと同じ大きさ（1081px）のまま。伸ばすと写真が粗くなるので（実寸 941px）、
     増えた下の部分は写真の下端と同じ色で埋め、写真の下端をなじませる */
  .fv { background: rgb(1, 9, 27); }
  .fv__bg { height: 1081px; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
  .partners { top: 821px; }

  /* 4番：下線の下に、サイト共通のボタンと電話番号 */
  .fv__cta {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 40px;
    pointer-events: auto;
  }
  .fv__tel {
    margin: 0;
    color: var(--paper);
    font-family: var(--f-jp);
    font-size: 18px;
    line-height: 1.7;
    white-space: nowrap;
  }
  .fv__tel a { color: inherit; }
  .fv__tel b { font-size: 22px; letter-spacing: .02em; }
  .fv__tel-label { margin-right: 1em; }

  /* 5番：先頭が JUDGEとは になる。先頭の面が持っていた
     「浮いている目次カードの逃げ 250px」をそちらへ移す。
     中の 120px は 0 にして、見出しの位置をいまと同じにする */
  .company { padding-top: 250px; }
  /* JUDGEとはの面は overflow:hidden で、上に浮いている目次カードの上半分が切れる。
     写真の横はみ出し（1920幅の装飾レイヤー）だけ切り、縦は見せる */
  .company { overflow: clip visible; }
  .company__inner { padding-top: 0; }
  /* 写真は 728px 決め打ちなので、伸びた面に合わせる（切り取りは cover のまま） */
  .company__photo,
  .company__photo img { height: 100%; }
  /* 写真の上端は、いまはサービスの面の下端（#043187）に接していた。
     先頭になると暗いヒーローと目次カードの横に接して、空の明るい色が一直線に切れて見える。
     目次カードの逃げ 250px のぶんだけ、上から暗がりの中にふっと現れるようにする */
  .company__photo {
    -webkit-mask-image: linear-gradient(280.9deg, #000 37.8%, rgba(0, 0, 0, 0) 82.8%),
                        linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 250px);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(280.9deg, #000 37.8%, rgba(0, 0, 0, 0) 82.8%),
                linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 250px);
    mask-composite: intersect;
  }
  .service { padding-top: 120px; }
}

/* ---------- 4番：ヒーローのボタンの色（2案） ----------
   すぐ上の小見出しが金の帯なので、金のボタンだと同じ色が上下に重なる。
   どちらも、暗いヒーローの上で金と別の色にする */

/* 案1　白い面：見出し・下線と同じ白で、ヒーローの中でいちばん強いもの＝押す場所 */
.fv__btn--white { background: #fff; color: var(--navy-deep); }
.fv__btn--white .btn__icon path { fill: var(--navy-deep); }

/* 案2　白い線：法人・自治体のヒーロー（btn--ghost）と同じ型 */
.fv__btn--line {
  background: none;
  box-shadow: inset 0 0 0 1px #fff;
  font-weight: 700;
  letter-spacing: .04em;
}
.fv__btn--line:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 750px) {
  .fv__btn--line { box-shadow: inset 0 0 0 .1rem #fff; }
}

/* ---------- PC・スマホ共通 ---------- */
/* 5番：2面で1つのグラデーション。面と一緒に入れ替えて、ヒーローから暗→中→明と続く流れを残す */
.company { background: linear-gradient(180deg, #010c21 0%, #043187 100%); }
.service { background: linear-gradient(0deg, #6b98ed -3.8%, #043187 103%); }

/* ---------- スマホ（750px以下） ---------- */
@media (max-width: 750px) {

  /* 2番：言葉の切れ目で4行に組む。いちばん長い「「よくわからない」を、」（11字）が
     64px だと内容幅 670px に入らず5行に崩れるので、入る大きさにする（行間の比率はいまと同じ 1.5） */
  .fv__title { font-size: 6rem; line-height: 9rem; }

  /* 5番：目次カードの下は、いまと同じく次のかたまりまで 10rem */
  .company__pn { padding-bottom: 10rem; }
  /* 写真の上端が暗い面に一直線で切れないよう、上から現れるようにする（下の消え方はいまのまま） */
  .company__photo {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 14%, #000 20%, rgba(0, 0, 0, 0) 70%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 14%, #000 20%, rgba(0, 0, 0, 0) 70%);
  }

  /* 4番：見出し→下線と同じ 4rem で積む */
  .fv__cta { margin-top: 4rem; }
  .fv__cta .btn { width: 100%; }
  .fv__tel {
    margin: 3rem 0 0;
    color: var(--paper);
    font-family: var(--f-jp);
    font-size: 2.6rem;
    line-height: 1.7;
  }
  .fv__tel a { color: inherit; }
  .fv__tel b { font-size: 3.4rem; letter-spacing: .02em; }
  /* 「お電話でのご相談」を1行目、番号と受付時間を2行目にして、時間だけが落ちないようにする */
  .fv__tel-label { display: block; }
  .fv__tel-hours { white-space: nowrap; }
}
/* メニュー（9・10番）は全ページ共通なので teian-common.css に分けた */

/* ---------- 4番：ボタンと電話番号を押せるように（スマホも） ----------
   文字の箱（.fv__body）は後ろの点を拾うため押せない指定になっている。PC だけ押せるように戻していたので、
   スマホでも押せなかった。幅に関係なく、ボタンと電話番号の箱は押せるようにする */
.fv__cta { pointer-events: auto; }
/* ボタンの文字が「無料で相談す／る」と折れないように */
.fv__btn { white-space: nowrap; }

/* 言葉の途中で折れないように（文字は変えない）：見出しの「よくわから／ない」、答えの「維持管／理費」。まとまりごと折らない */
.fv__title .nw,
.faq .nw { white-space: nowrap; }
/* 4番：幅が狭い PC（800px あたり）で、電話番号の行が右端で切れていた。1行に入らない幅では、電話番号を次の行に回す */
@media (min-width: 751px) {
  .fv__cta { flex-wrap: wrap; row-gap: 16px; }
}
/* 2・4番：幅 751〜1200px では見出しが4行になる幅があり、ボタンと電話番号がロゴの帯に重なっていた。
   この幅だけ、見出しの箱とロゴの帯を上から順に並べ、PC と同じ間（ボタン → ロゴの帯 43px、ロゴの帯 → 面の下 123px）を保つ */
@media (max-width: 1200px) and (min-width: 751px) {
  .fv { height: auto; display: flow-root; }
  .fv__body { position: relative; top: auto; left: auto; transform: none; margin: 242px auto 0; }
  .partners { position: relative; top: auto; margin: 43px 0 123px; }
}

/* ---------- 右の押せる星：少し下げる（星どうしの並びはそのまま、箱ごと 40px 下へ） ---------- */
@media (min-width: 751px) {
  .fv__nodes { top: 182px; }
}