@charset "UTF-8";
/* 09_自動車保険_pc / 1440x5030 */
.lead--ins { height: 580px; padding-top: 100px; }        /* デザイン y=442 */
.deco-blob--i1 { top: -131px; left: calc(50% + 383px); width: 449px; height: 510px; }
.deco-blob--i2 { top:  146px; left: calc(50% - 922px); width: 555px; height: 629px; }
.lead--ins .lead__photo { height: 380px; }
.crop--ins-hero > img { left: -12px; top: -141px; width: 482px; height: 724px; }

.points-sec--ins { height: 1360px; }
.point-card__text--ink { color: var(--ink); line-height: 32px; }
.crop--ins-p1 > img { left: -35px; top: -35px; width: 521px; height: 347px; }
.crop--ins-p2 > img { left: -30px; top: -49px; width: 530px; height: 353px; }
.crop--ins-p3 > img { left: -13px; top: -80px; width: 502px; height: 335px; }
.crop--ins-p4 > img { left: -17px; top: -49px; width: 502px; height: 335px; }

/* 保険加入するメリット（左見出し + 右リスト） */
.merit { height: 911px; padding-top: 100px; background: #fff; }
.merit__inner {
  width: 1201px;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: 60px;
}
.merit__head { width: 326px; }
.merit__chips { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.merit__lead { margin-top: 40px; font-size: 16px; line-height: 32px; font-weight: 500; color: #261d1b; }

.merit__list { width: 780px; }
.merit-item {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 32px 0;
  border-top: 1px solid #d8f5e6;
}
.merit-item:last-child { border-bottom: 1px solid #d8f5e6; }
.merit-item__ico {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(90, 174, 78, .1);
  color: var(--green-mid);
  display: grid; place-items: center;
  flex: none;
}
.ico--41 { width: 41px; height: 55px; }
.ico--48 { width: 48px; height: 56px; }
.merit-item__body { width: 640px; }
.merit-item__title { font-size: 22px; line-height: 31px; font-weight: 700; color: var(--green); }
.merit-item__no { font-family: var(--ff-en); font-size: 16px; line-height: 18px; font-weight: 500; color: var(--green-mid); margin-right: 4px; }
.merit-item__text { margin-top: 12px; font-size: 16px; line-height: 32px; font-weight: 500; color: #261d1b; }

.faq { height: 950px; }

/* ============================================================
   SP（760px 以下 / 09_自動車保険）
   ============================================================ */
@media (max-width: 760px) {
  /* 見出しラベル・セクション見出し */
  .lead--ins .label, .points-sec--ins .label,
  .merit .label, .faq--ins .label { font-size: 14px; line-height: 14px; }
  .points-sec--ins .sec-title,
  .faq--ins .sec-title { margin-top: 8px; font-size: 26px; line-height: 36px; }

  /* 導入：写真 → ラベル → 見出し → 本文（文ごとに改行） */
  .lead--ins .deco-blob--i1 { top: -40px; left: auto; right: -130px; width: 260px; height: 300px; }
  .lead--ins .deco-blob--i2 { top: auto; bottom: -60px; left: -150px; width: 260px; height: 300px; }
  section.lead--ins { padding: 32px 0 64px; }
  .lead--ins .lead__inner { width: auto; padding-inline: 16px; gap: 20px; }
  .lead--ins .lead__photo { order: -1; height: auto; aspect-ratio: 343 / 240; border-radius: 6px; }
  /* 元画像は縦長（970x1455）。中央で切ると頭が見切れるので、見本どおり頭〜タブレットが入る位置に寄せる */
  .crop--ins-hero > img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 31%; }
  .lead--ins .lead__chips { margin-top: 8px; gap: 8px; }
  .lead--ins .lead__chip--sm { min-height: 36px; padding: 0 12px 2px; font-size: 18px; line-height: 18px; }
  .lead--ins .lead__chip--lg { min-height: 50px; padding: 0 12px 2px; font-size: 26px; line-height: 26px; }
  .lead--ins .lead__text { margin-top: 16px; font-size: 14px; line-height: 20px; letter-spacing: 0; font-weight: 500; color: var(--ink); }
  .lead--ins .lead__line { display: block; }

  /* お客様から選ばれる理由：縦書き POINT ＋ 写真、写真の下端に見出しをかぶせる */
  section.points-sec--ins { padding-bottom: 60px; }
  .points-sec--ins .points-sec__head { padding-top: 20px; }
  .points-sec--ins .points-grid { margin: 20px 16px 0; gap: 16px; }
  .points-sec--ins .point-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 9px;
    padding: 20px 16px 19px;
    border-radius: 5px;
  }
  .points-sec--ins .point-card__no { grid-area: 1 / 1; align-self: start; margin: 0; writing-mode: vertical-rl; gap: 6px; font-size: 12px; line-height: 12px; }
  .points-sec--ins .point-card__no .label__dot { width: 4px; height: 4px; }
  .points-sec--ins .point-card__photo { grid-area: 1 / 2; width: 100%; height: auto; aspect-ratio: 290 / 161; border-radius: 5px; }
  .crop--ins-p1 > img, .crop--ins-p2 > img,
  .crop--ins-p3 > img, .crop--ins-p4 > img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .points-sec--ins .point-card__chips { grid-area: 2 / 1 / 3 / 3; position: relative; left: auto; top: auto; z-index: 1; margin-top: -53px; gap: 4px; }
  .points-sec--ins .point-card__chip { border-radius: 3px; }
  .points-sec--ins .point-card__chip--sm { min-height: 29px; padding: 0 8px 2px; font-size: 14px; line-height: 14px; }
  .points-sec--ins .point-card__chip--lg { min-height: 38px; padding: 0 8px 2px; font-size: 22px; line-height: 22px; }
  .points-sec--ins .point-card__text { grid-area: 3 / 1 / 4 / 3; margin-top: 13px; font-size: 14px; line-height: 26px; letter-spacing: 0; font-weight: 500; }

  /* 保険加入するメリット：見出し → リード → アイコンを上に置いた縦並び */
  .merit { height: auto; padding: 60px 0 16px; }
  .merit__inner { width: auto; padding: 0 16px; flex-direction: column; gap: 8px; }
  .merit__head { width: 100%; }
  /* 「保険加入する」「メリット」は SP では 1 本の帯につなげる */
  .merit__chips { display: grid; grid-template-columns: auto auto 1fr; gap: 8px 0; margin-top: 8px; }
  .merit__chips .lead__chip--sm { grid-column: 1 / -1; justify-self: start; min-height: 36px; padding: 0 12px 2px; font-size: 18px; line-height: 18px; }
  .merit__chips .lead__chip--lg { min-height: 50px; padding: 0 12px 2px; font-size: 24px; line-height: 24px; }
  .merit__chips .lead__chip--lg:nth-child(2) { padding-right: 0; border-radius: 5px 0 0 5px; }
  .merit__chips .lead__chip--lg:nth-child(3) { padding-left: 0; border-radius: 0 5px 5px 0; }
  .merit__lead { margin-top: 16px; font-size: 14px; line-height: 28px; }
  .merit__lead br { display: none; }

  .merit__list { width: 100%; }
  .merit-item { flex-direction: column; align-items: flex-start; gap: 12px; padding: 25px 0 22px; }
  .merit-item__ico { width: 80px; height: 80px; }
  .merit-item__ico .ico { width: auto; height: 44px; }
  .merit-item__body { width: 100%; }
  .merit-item__title { font-size: 19px; line-height: 26px; letter-spacing: 0; }
  .merit-item__no { font-size: 14px; }
  .merit-item__text { margin-top: 6px; font-size: 14px; line-height: 28px; }

  /* よくある質問 */
  section.faq--ins { padding: 50px 0; }
  .faq--ins .faq__list { margin: 20px 16px 0; gap: 12px; }
  .faq--ins .faq-item { padding: 18px 12px; border-radius: 4px; }
  .faq--ins .faq-item__q { gap: 8px; min-height: 24px; }
  .faq--ins .faq-item__q > span:first-child { gap: 6px; }
  .faq--ins .faq-item__text { font-size: 16px; line-height: 24px; letter-spacing: .02em; font-weight: 500; color: var(--ink); }
  .faq--ins .faq-item__btn { width: 22px; height: 22px; }
  .faq--ins .faq-item__btn::before,
  .faq--ins .faq-item__btn::after { left: 5px; top: 10px; width: 12px; height: 2px; }
  .faq--ins .faq-item__body { margin-top: 13px; padding-top: 20px; align-items: flex-start; }
  .faq--ins .faq-item__body .faq-item__mark { line-height: 22px; }
  .faq--ins .faq-item__body p { font-size: 14px; line-height: 22px; letter-spacing: .04em; font-weight: 500; color: var(--ink); }
}