/* UI バランス確認（2026-10-09）の指摘の修正。全ページで最後に読む。
   ID は ui-balance/cycle-hoken/findings.json の番号。 */

/* PC の固定ヘッダー：画面に残すのはメニューの帯だけ。ロゴ（大きさは今のまま）はスクロールで上に流す。
   ロゴの高さ＝ロゴの幅 × 129/1100。縦スクロールバーの分（約 2px）の誤差は、ロゴの下端の白が 2px 見える側に寄せる。
   見えている高さ（--fixed-header）は main.js・scroll.js が top を引いて計算する。スマホ（767px 以下）は変えない。 */
@media screen and (min-width: 768px) {
  .site-header {
    top: calc(2px - min(100vw, 1100px) * 0.11728);
  }
}
@media screen and (min-width: 1024px) {
  /* JS が --fixed-header を入れる前に # 付き URL で開いたときの既定値も、メニューの帯の高さに合わせる */
  html {
    scroll-padding-top: var(--fixed-header, 104px) !important;
  }
}

/* S1 申込書を請求するボタン：PC もスマホと同じく緑地・白文字。保険料表の下の赤い丸ボタンも緑の角丸にそろえる */
@media screen and (min-width: 768px) {
  .hero .btn-primary,
  .btn-primary {
    color: #fff;
  }
  .cta-apply-wrap {
    max-width: 480px;
  }
  .cta-apply,
  .cta-apply:hover,
  .cta-apply:focus,
  .cta-apply:active {
    background: var(--brand, #117713);
    border-radius: 12px;
  }
  .cta-apply {
    padding: 0.8em 1.6em;
    font-size: clamp(1.8rem, 1.2rem + 1.2vw, 2.6rem);
  }
  .cta-apply:hover,
  .cta-apply:focus {
    background: var(--brand-strong, #0c5d0f);
  }
}
/* S9 緑のボタンに赤い影を残さない（PC・スマホとも） */
.cta-apply,
.cta-apply:hover,
.cta-apply:focus,
.cta-apply:active {
  box-shadow: none;
}

/* S3 お問合わせ帯：見出しを帯の上端に貼り付けない */
@media screen and (min-width: 768px) {
  #contact.contact {
    padding-top: 3.2rem;
  }
}
@media screen and (max-width: 767px) {
  main #contact.contact {
    padding-top: 20px !important;
  }
}

/* S4 2枚のお問合わせカード：見出し・電話番号の高さをそろえ、ボタンは下端にそろえる（横に並ぶ幅だけ） */
@media screen and (min-width: 601px) {
  .contact-card {
    justify-content: flex-start;
  }
  #contact .contact-card > p.contact-line,
  #contact .contact-card > p.contact-web {
    margin-top: auto;
    padding-top: 1rem;
  }
}

/* S10 2行になる質問は、2行目を1行目の文字の頭にそろえる（▶ を外側に出す） */
.faq summary {
  list-style-position: outside;
  margin-left: 1.2em;
}

/* S11 「よくあるご質問」の上の間隔を各ページでそろえる（直前のカード群の下余白を外す） */
#flow-detail {
  padding-bottom: 12px;
}
#howtopay-detail {
  padding-bottom: 0;
}
@media screen and (max-width: 767px) {
  #flow-detail,
  #howtopay-detail {
    padding-bottom: 12px;
  }
}

/* S5 ご契約の流れ：カード右上の小さな番号（見出しの番号と二重）を出さない */
#flow-detail .flow-card:nth-of-type(n)::before {
  content: none;
}

/* S13 事故のとき：流れのカードを本文と同じ幅・同じ左端にし、上から下へ1列で読む（PC） */
@media screen and (min-width: 1024px) {
  #accident-flow .flow-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    max-width: none;
  }
  #accident-flow .flow-list > .flow-card {
    grid-column: 1 !important;
  }
  #accident-flow .flow-list > .flow-card::before,
  #accident-flow .flow-list > .flow-card::after {
    content: none !important;
  }
  #accident-flow .flow-arrow {
    display: block;
    color: #707070;
  }
  #accident-flow .flow-card:has(> img) {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 2.4rem;
    align-items: center;
    text-align: left;
    padding: 1.2rem 2.4rem;
  }
  #accident-flow .flow-card:has(> img) > img {
    grid-column: 1;
    grid-row: 1 / 6;
    width: 160px;
  }
  #accident-flow .flow-card:has(> img) > p {
    grid-column: 2;
    justify-self: start;
  }
  #accident-flow .flow-card:has(> img) > p:nth-of-type(1) { grid-row: 2; }
  #accident-flow .flow-card:has(> img) > p:nth-of-type(2) { grid-row: 3; }
  #accident-flow .flow-card:has(> img) > p:nth-of-type(3) { grid-row: 4; }
}

/* S14 保険開始日：自転車の絵のうすいクリーム色の地を白に寄せる。銀行の絵はほかの絵と同じ高さに */
.start-flow .step .icon img[src$="bycyle-furikae.webp"],
.start-flow .step .icon img[src$="bycyle-haraikomi.webp"] {
  filter: brightness(1.03);
}
.start-flow .step .icon img[src$="bank.webp"] {
  width: auto;
  height: clamp(108px, 18vw, 180px);
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 480px) {
  .hosho .start-flow .step .icon img[src$="bank.webp"] {
    width: auto;
    height: clamp(56px, 20vw, 84px);
    max-width: 100%;
  }
}