/* 保証会社 × リモデラ（/insure）専用。
   現行 STUDIO 版（service.remodela.jp/insure、2026-10-15 に画像中心の構成から HTML の構成へ更新されたもの）の
   レイアウト・余白・文字サイズ・色をページ専用にそのまま写している。値は現行のスタイル規則（幅ごと）から取った。
   - 現行 /insure にはサイト共通フッターが無い（ページ末尾はコピーライト1行）が、ほかのページとそろえてサイト共通フッターを出す（コピーライトはフッターのもの）
   - 現行のヘッダーは固定表示で本文の上に重なり、本文は画面上端から100pxの位置で始まる。ここのヘッダーは高さ分の場所を取るので、その分だけ上の余白を減らしている
   ブレークポイントは現行と同じ 1280 / 840 / 540 / 320px。 */
.ins{--g:#286b4a;--band:#4a9970;--cream:#fce9c6;--red:#b60000;--yellow:#fbbc46;--deep:#085f2a;--ink:#242528;--txt:#333;
  display:flex;flex-direction:column;align-items:center;background:#fff;color:var(--txt)}
.ins .ins-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 現行（STUDIO）の文字の折り返し方に合わせる（shared.css の p{text-wrap:pretty} 等は使わない） */
.ins :is(p,h1,h2,h3,li){overflow-wrap:anywhere;text-wrap-style:auto}
.ins strong{display:inline;margin:0}
/* 見やすさの改善: 現行はスマホ幅で語の途中（「リ／モデラ」「タイミ／ング」「月額利／用料」など）で改行していたため、
   <wbr> を入れた文節の区切りでだけ折り返す（1行に収まる PC 幅の見た目は現行と同じ） */
.ins .ins-kw{word-break:keep-all;overflow-wrap:anywhere}
.ins img{display:block;flex:none;max-width:100%;height:auto}

/* ---------- ファーストビュー ---------- */
.ins .ins-hero{width:100%;display:flex;flex-direction:column;align-items:center}
.ins .ins-hero__head{max-width:100%;margin:30px 0 15px;display:flex;flex-direction:column;align-items:center}
.ins .ins-hero__title{max-width:100%;margin:0;display:flex;align-items:center;justify-content:center;gap:0 30px;line-height:1}
.ins .ins-hero__box{flex:none;padding:15px 15px 10px;border:1px solid var(--g);color:var(--g);font-size:40px;font-weight:700;line-height:1;font-feature-settings:'palt' 1}
.ins .ins-hero__x{width:30px}
.ins .ins-hero__logo{width:150px}
.ins .ins-hero__sub{margin:15px 0 0;color:var(--g);font-size:26px;font-weight:700;line-height:1.35;font-feature-settings:'palt' 1}
.ins .ins-free{width:1200px;max-width:100%;margin:0 0 10px;padding:20px 15px;background:var(--band);display:flex;align-items:center;justify-content:center}
.ins .ins-free__text{max-width:100%;margin:0;color:#fffefe;font-size:30px;font-weight:500;line-height:1.35}
.ins .ins-free__text>span{display:block}
.ins .ins-free__text strong{color:inherit;font-weight:800}
.ins .ins-guar{width:1200px;max-width:100%;padding:20px 15px;background:var(--cream);display:flex;align-items:center;justify-content:center}
.ins .ins-guar--hero{margin:0 0 40px}
.ins .ins-guar__badge{width:120px;max-width:calc(100% - 30px)}
.ins .ins-guar--hero .ins-guar__badge{margin-right:30px}
/* 現行どおり文章は折り返さず、帯の幅が足りないときは帯の左右へはみ出して中央に置く */
.ins .ins-guar__text{flex:none;margin:0;color:var(--ink);font-size:30px;font-weight:500;line-height:1.35}
.ins .ins-guar__text strong{color:var(--ink);font-weight:800}

/* ---------- 対象保証会社 ---------- */
.ins .ins-partners{width:100%;display:flex;flex-direction:column;align-items:center}
.ins .ins-partners__title{max-width:100%;margin:0;padding:15px 100px 10px;border-radius:100px;background:var(--g);color:#fff;font-size:20px;font-weight:700;line-height:1.4;text-align:center}
.ins .ins-logos{width:1280px;max-width:100%;padding:30px 0 15px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 50px}
.ins .ins-logo--ark{width:251px;height:74px}
.ins .ins-logo--alpha{width:120px}
.ins .ins-logo--anshin{width:240px}
.ins .ins-logo--ierabu{width:280px}
.ins .ins-logo--jlease{width:240px}
.ins .ins-logo--nap{width:280px}
.ins .ins-logo--nihon{width:317px;height:43px}
.ins .ins-logo--nippon{width:200px}
.ins .ins-partners__note{width:1000px;max-width:100%;margin:10px 0 30px;color:#585858;font-size:14px;line-height:1.4;text-align:right}

/* ---------- 2つの機能 ---------- */
.ins .ins-feat{width:1200px;max-width:100%;padding:40px 30px;background:#e0eae5;display:flex;align-items:center;justify-content:space-between;gap:0 30px}
.ins .ins-card{width:calc(50% - 15px);padding:30px 15px;border-radius:20px;background:#fff;display:flex;flex-direction:column;align-items:center}
.ins .ins-card__tab{width:100%;margin:0;padding:10px 30px 5px;background:var(--g);color:#fff;font-size:22px;font-weight:800;line-height:1.35;font-feature-settings:'palt' 1}
.ins .ins-card__lead{max-width:100%;margin:20px 0 15px;color:var(--ink);font-size:20px;font-weight:800;line-height:1.35;font-feature-settings:'palt' 1}
.ins .ins-card__list{width:600px;max-width:100%;margin:0 0 30px;display:flex;flex-direction:column;gap:10px;color:var(--txt);font-size:16px;font-weight:500;line-height:1.4}
.ins .ins-card__list li{padding-left:15px;border-left:4px solid var(--g)}
.ins .ins-card__list strong{color:var(--ink);font-weight:700}
.ins .ins-card__imgs{max-width:100%;display:flex;align-items:center;justify-content:center;gap:0 30px}
.ins .ins-card__cut{width:250px}
.ins .ins-card__phone{width:160px}

/* ---------- 料金 ---------- */
.ins .ins-price{width:100%;display:flex;flex-direction:column;align-items:center}
/* ＼ 見出し ／ */
.ins .ins-slashes{max-width:100%;margin:0;display:flex;align-items:center;justify-content:center;color:var(--g);font-size:24px;font-weight:700;line-height:1.4}
.ins .ins-slashes__mark{flex:none;margin-right:15px}
.ins .ins-slashes__mark--r{margin:0 0 0 15px}
.ins .ins-price__title{width:100%;margin:70px 0 15px}
.ins .ins-price__band{width:1200px;max-width:100%;margin:0 0 10px;padding:20px 15px;background:var(--band);display:flex;flex-direction:column;align-items:center;justify-content:center}
.ins .ins-price__case{margin:0 0 5px;color:#fff;font-size:16px;font-weight:700;line-height:1.35;font-feature-settings:'palt' 1}
.ins .ins-price__row{display:flex;align-items:center;justify-content:center;gap:0 30px}
.ins .ins-price__box{max-width:100%;padding:20px 50px;border-radius:15px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ins .ins-price__plan{position:relative;margin:0;display:flex;flex-direction:column;align-items:center}
.ins .ins-price__name{color:var(--txt);font-size:16px;font-weight:700;line-height:1.4}
.ins .ins-price__num{display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none}
/* 取り消し線は金額の数字だけに細く引く（「円(+税)/月」には重ねない） */
.ins .ins-price__amount{position:relative;margin-right:5px;font:500 36px/1 Oswald,sans-serif;letter-spacing:-.05em;text-decoration:none}
.ins .ins-price__amount::after{content:'';position:absolute;left:-3px;right:-1px;top:50%;height:2px;margin-top:-1px;background:#d00;pointer-events:none}
.ins .ins-price__unit{margin-top:15px;font-size:14px;font-weight:700;line-height:1.4}
.ins .ins-price__arrow{width:40px}
.ins .ins-price__arrow--down{display:none;width:90px}
.ins .ins-price__zero{height:61px;margin:0;display:flex;align-items:flex-end;justify-content:center;color:#fff}
.ins .ins-price__zero-num{margin-right:5px;font:500 60px/1 Oswald,sans-serif;letter-spacing:-.05em}
.ins .ins-price__zero-unit{font-size:14px;font-weight:700;line-height:1.4}
.ins .ins-price__note{max-width:100%;margin:10px 0 30px;color:var(--txt);font-size:14px;line-height:1.4}

/* ---------- お問い合わせ ---------- */
.ins .ins-contact{width:1400px;max-width:100%;padding:100px;border:1px solid rgba(36,37,40,.1);background:#f0f8f3;display:flex;flex-direction:column;align-items:center;gap:60px}
.ins .ins-contact__head{width:1280px;max-width:100%;padding:0 40px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.ins .ins-contact__catch{margin:0;color:var(--deep);font-size:18px;font-weight:700;line-height:1.75;font-feature-settings:'palt' 1}
.ins .ins-contact__title{margin:0;color:var(--ink);font-size:36px;font-weight:700;line-height:1.35;font-feature-settings:'palt' 1}
.ins .ins-contact__form{width:800px;max-width:100%;padding:60px 15px;background:rgba(255,255,255,.95);display:flex;flex-direction:column;align-items:center}
.ins .ins-contact__frame{width:64%;min-height:120px}
.ins .ins-tel{width:800px;max-width:100%;padding:30px 0;border-radius:12px;background:#fff;box-shadow:5px 5px 0 rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;color:var(--deep)}
.ins .ins-tel__title{margin:0 0 15px;font-size:20px;font-weight:700;line-height:1.4;text-align:center}
.ins .ins-tel__num{margin:0;padding-bottom:15px;display:flex;align-items:center;gap:10px}
.ins .ins-tel__num svg{flex:none;width:36px;height:36px;fill:var(--deep)}
.ins .ins-tel__num a{color:var(--deep);font:800 40px/1.4 Lato,sans-serif;text-decoration:none}
.ins .ins-tel__hours{margin:0;font-size:18px;line-height:1.4}

/* ---------- 1280px 以下 ---------- */
@media (max-width:1280px){
  .ins .ins-free,.ins .ins-guar,.ins .ins-feat,.ins .ins-price__band{width:100%}
  .ins .ins-price__title .ins-slashes__text{font-size:22px;text-align:center}
  .ins .ins-contact{padding:100px 60px}
  .ins .ins-contact__title{font-size:32px}
}
/* ---------- 840px 以下 ---------- */
@media (max-width:840px){
  .ins .ins-hero__box{padding:20px 15px 10px;font-size:54px}
  .ins .ins-hero__logo{width:220px}
  .ins .ins-hero__sub{font-size:34px}
  .ins .ins-logos{gap:5px 30px}
  .ins .ins-logo--anshin{width:220px}
  .ins .ins-logo--nap{width:260px}
  .ins .ins-partners__note{max-width:calc(100% - 30px);margin:10px 15px 30px}
  .ins .ins-feat{flex-direction:column;gap:40px 0}
  .ins .ins-card{width:100%}
  .ins .ins-card__tab{font-size:26px}
  .ins .ins-card__lead{font-size:24px}
  .ins .ins-price__title{width:auto;padding:0 15px}
  .ins .ins-slashes__text{flex:1}
  .ins .ins-price__note{max-width:calc(100% - 30px);margin:10px 15px 30px}
  .ins .ins-contact{padding:50px 40px}
  .ins .ins-contact__head{padding:0 20px}
  .ins .ins-contact__title{font-size:28px}
  .ins .ins-contact__frame{width:100%}
  .ins .ins-tel{width:100%}
}
/* ---------- 見やすさの改善（現行では画面の端で切れていた幅だけ、はみ出さないように縮める） ---------- */
/* 841〜970px: 現行は機能カードの図と画面写真がカードの外へはみ出していた（841px で図の左端が画面外） */
@media (min-width:841px) and (max-width:970px){
  .ins .ins-card__imgs{width:100%}
  .ins .ins-card__cut,.ins .ins-card__phone{flex:0 1 auto;min-width:0}
}
/* 541〜567px: 現行は「保証会社 × リモデラ」が画面の左右で切れていた（541px で左右 8.5px） */
@media (min-width:541px) and (max-width:567px){
  .ins .ins-hero__logo{width:calc(100vw - 348px)}
}
/* 541〜600px: 現行は「保証対応」の丸が画面の左端で切れていた（541px で 13px）。3 行のまま文字を少しだけ縮める */
@media (min-width:541px) and (max-width:600px){
  .ins .ins-guar__text{font-size:min(30px,calc((100vw - 184px) / 13.9))}
}
/* ---------- 540px 以下 ---------- */
@media (max-width:540px){
  /* 現行はヘッダー60pxに対して本文が100pxの位置から始まる */
  .ins .ins-hero__head{margin-top:40px}
  .ins .ins-hero__title{gap:0 15px}
  .ins .ins-hero__box{padding:15px 15px 10px;border-width:2px;font-size:28px}
  .ins .ins-hero__logo{width:130px}
  .ins .ins-hero__sub{font-size:20px}
  .ins .ins-free{margin-bottom:5px;padding:20px 16px}
  .ins .ins-free__text,.ins .ins-guar__text{font-size:19px;line-height:1.5}
  .ins .ins-guar--hero{padding:18px 16px}
  /* 「保証対応」の文が左右16pxの余白に収まるよう、幅に合わせて文字だけ少し縮める（最大19px） */
  .ins .ins-guar__text{font-size:min(19px,calc((100vw - 140px) / 14))}
  .ins .ins-guar__badge{width:90px;max-width:calc(100% - 15px)}
  .ins .ins-guar--hero .ins-guar__badge{margin-right:15px}
  .ins .ins-partners__title{width:80%;padding:15px 15px 10px;font-size:16px}
  .ins .ins-logos{gap:10px 30px;padding:30px 15px}
  .ins .ins-logo--alpha{width:110px}
  .ins .ins-logo--anshin,.ins .ins-logo--jlease{width:200px}
  .ins .ins-logo--ierabu{width:260px}
  .ins .ins-logo--nap{width:220px}
  .ins .ins-logo--nippon{width:180px}
  .ins .ins-partners__note{font-size:13px}
  .ins .ins-feat{padding:40px 10px}
  .ins .ins-card__tab{font-size:22px}
  .ins .ins-card__lead{font-size:20px}
  .ins .ins-card__imgs{width:100%}
  .ins .ins-card__cut{width:calc(60% - 12px)}
  .ins .ins-card__phone{width:calc(40% - 18px)}
  .ins .ins-card__imgs:has(>:only-child) .ins-card__phone{width:40%}
  .ins .ins-price__title{margin:40px 0 5px}
  .ins .ins-slashes{flex-wrap:wrap;align-items:flex-start;font-size:16px}
  .ins .ins-price__title .ins-slashes__text{font-size:16px}
  .ins .ins-price__band{margin-bottom:5px}
  .ins .ins-price__case{margin:15px 0 10px}
  .ins .ins-price__row{width:100%;flex-direction:column;gap:15px 30px}
  .ins .ins-price__box{width:100%;flex-direction:row;padding:20px 15px}
  .ins .ins-price__arrow{display:none}
  .ins .ins-price__arrow--down{display:block}
  .ins .ins-contact{gap:30px;padding:60px 20px}
  .ins .ins-contact__head{padding:0 10px}
  .ins .ins-contact__catch{font-size:14px}
  .ins .ins-contact__title{font-size:20px}
  .ins .ins-contact__form{gap:30px}
  .ins .ins-tel__title{font-size:16px}
  .ins .ins-tel__num{margin-bottom:15px;padding:0}
  .ins .ins-tel__num svg{width:28px;height:28px}
  .ins .ins-tel__num a{font-size:28px}
  .ins .ins-tel__hours{font-size:14px}
}
/* 369px 未満では現行の配置だと「保証対応」の文章・丸が画面の外にはみ出すため、はみ出さずに折り返す */
@media (max-width:368px){
  .ins .ins-guar__text{flex:0 1 auto}
}
/* 321〜345px: 現行は「保証会社 × リモデラ」が画面の左右で切れていた（321px で左右 7.5px） */
@media (min-width:321px) and (max-width:345px){
  .ins .ins-hero__logo{width:calc(100vw - 216px)}
}
/* ---------- 320px 以下 ---------- */
@media (max-width:320px){
  .ins .ins-hero__box{padding:10px 10px 5px;font-size:20px}
  .ins .ins-hero__x{width:20px}
  .ins .ins-hero__logo{width:100px}
  .ins .ins-hero__sub{margin-top:10px;font-size:16px}
  .ins .ins-free,.ins .ins-guar{padding:20px 16px}
  .ins .ins-free__text,.ins .ins-guar__text{flex:1;font-size:16px}
  .ins .ins-free__text strong,.ins .ins-guar__text strong{font-size:18px}
  .ins .ins-guar__badge{width:55px;max-width:calc(100% - 5px)}
  .ins .ins-guar--hero .ins-guar__badge{margin-right:5px}
  .ins .ins-partners__title{width:95%;padding:10px 15px 5px}
  .ins .ins-logos{gap:10px 15px;padding:30px 0}
  .ins .ins-logo--alpha{width:100px;margin:0 10px;max-width:calc(100% - 20px)}
  .ins .ins-logo--ierabu{width:240px}
  .ins .ins-logo--nap{margin:0 10px;max-width:calc(100% - 20px)}
  .ins .ins-logo--nippon{width:160px}
  .ins .ins-feat{padding:20px 10px}
  .ins .ins-card{padding:30px 10px}
  .ins .ins-card__tab{font-size:20px}
  .ins .ins-card__lead{font-size:18px}
  .ins .ins-price__title{margin:40px 0 10px}
  .ins .ins-slashes,.ins .ins-slashes__text{text-align:center}
  .ins .ins-price__band{padding:20px 5px}
  .ins .ins-price__row{gap:10px 30px}
  .ins .ins-price__amount{font-size:28px}
  .ins .ins-price__arrow--down{width:55px;margin-left:5px}
  .ins .ins-price__zero{height:auto}
  .ins .ins-price__zero-num{font-size:40px}
  .ins .ins-price__note{margin:10px 15px}
  .ins .ins-contact{padding:40px 20px}
  .ins .ins-tel__num svg{width:24px;height:24px}
  .ins .ins-tel__num a{font-size:24px}
}