/* リモデラ INSURE（/remodela-insure）専用。保証会社（代位弁済のご担当者）向け。
   色・部品の感じは AI入居時点検（/checksheet）とそろえている（リモデラの緑系・角丸のカード・黄色のグラデーションボタン）。
   相談CTA（.t-contact）はトップと同じ部品なので top.css を共用する。
   shared.css の汎用クラス（.flow / .card / .hero など）とぶつからないよう、すべて rins- で始める。
   ブレークポイントは他の LP と同じ 1280 / 1024 / 840 / 540 / 320px。 */
.rins{--g:#286b4a;--g2:#309873;--deep:#085f2a;--ink:#242528;--txt:#333;--sub:#5b6470;--pale:#e9f2ed;--mint:#f0f8f3;--line:rgba(36,37,40,.12);--warn:#fff4dc;--warn-ink:#8a5a00;background:#fff;color:var(--ink)}
.rins img{display:block}
.rins strong{display:inline;margin:0;font-weight:700}
.rins h1,.rins h2,.rins h3{font-weight:700;font-feature-settings:'palt' 1}
/* 語の途中で折り返さないよう、<wbr> の位置（文節の区切り）でだけ折り返す */
.rins .rins-kw{word-break:keep-all;overflow-wrap:anywhere}

/* 役割のラベル（見分け用の色だけ。保証会社＝塗り、管理会社＝緑の枠、賃借人＝灰色の枠） */
.rins .rins-role{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:5.6em;padding:5px 12px 4px;border-radius:24px;font-size:14px;font-weight:700;line-height:1.3;letter-spacing:.04em;white-space:nowrap}
.rins .rins-role--gc{background:var(--deep);color:#fff}
.rins .rins-role--pm{background:#fff;color:var(--deep);box-shadow:inset 0 0 0 2px var(--g2)}
.rins .rins-role--tenant{background:#fff;color:#4b5563;box-shadow:inset 0 0 0 2px #9aa3ad}

/* セクション見出し（緑の大見出し＋左そろえのリード） */
.rins .rins-h2{color:var(--deep);font-size:38px;line-height:1.35;text-align:center}
/* 2行以上になるリードは左そろえ（1行に収まるときは幅が縮んで中央に来る） */
.rins .rins-lead{width:fit-content;max-width:820px;margin:20px auto 0;color:var(--txt);font-size:18px;font-weight:500;line-height:1.85;text-align:left}

/* ---------- ファーストビュー ---------- */
.rins-hero{position:relative;z-index:1;isolation:isolate;padding:80px 40px 90px;background:var(--mint)}
.rins-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:url(img/hero-bg.webp) center top/cover no-repeat;opacity:.8;pointer-events:none}
.rins-hero__in{width:1280px;max-width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:56px}
.rins-hero__copy{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.rins .rins-hero__for{padding:6px 16px 5px;border-radius:99px;background:var(--deep);color:#fff;font-size:15px;font-weight:700;line-height:1.4;letter-spacing:.04em}
.rins .rins-hero__catch{margin-top:20px;color:var(--ink);font-size:38px;font-weight:800;line-height:1.45}
.rins-hero__em{color:var(--deep);background:linear-gradient(transparent 68%,#ffef5c 68%,#ffef5c 92%,transparent 92%)}
.rins .rins-hero__title{margin-top:20px;line-height:1}
.rins .rins-hero__title img{width:440px;max-width:100%;height:auto}
.rins .rins-hero__lead{max-width:640px;margin-top:24px;color:var(--txt);font-size:18px;font-weight:500;line-height:1.85}
.rins .rins-hero__tags{margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.rins-hero__tags li{padding:7px 16px 6px 12px;border:1px solid rgba(40,107,74,.35);border-radius:99px;background:#fff;display:flex;align-items:center;gap:6px;color:var(--ink);font-size:15px;font-weight:700;line-height:1.3}
.rins-hero__tags svg{flex:none;width:18px;height:18px;fill:var(--g2)}
.rins-hero__btns{width:100%;margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.rins-hero__btn{min-width:260px;padding:16px 30px;border-radius:64px;box-shadow:3px 3px 0 rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;gap:6px;color:#282828;font-size:20px;font-weight:700;line-height:1.3;transition:opacity .3s}
.rins-hero__btn:hover{opacity:.85}
.rins-hero__btn--contact{background:linear-gradient(90deg,#ff6 0%,#ffb054 100%)}
.rins-hero__btn--dl{background:#fff;box-shadow:3px 3px 0 rgba(0,0,0,.2),inset 0 0 0 1px rgba(36,37,40,.2)}
.rins-hero__btn svg{flex:none;width:24px;height:24px;fill:#333}
.rins-hero__media{flex:none;width:520px;margin:0}
.rins-hero__video{aspect-ratio:16/9;overflow:hidden;border:6px solid #fff;border-radius:20px;background:#0f6a2c;box-shadow:0 14px 34px rgba(8,95,42,.18)}
.rins-hero__video video{display:block;width:100%;height:100%;object-fit:cover}
.rins .rins-hero__media figcaption{margin-top:14px;color:var(--txt);font-size:14px;font-weight:600;line-height:1.6;text-align:center}

/* ---------- お悩み ---------- */
.rins-worry{padding:80px 60px 70px;background:var(--g2);display:flex;flex-direction:column;align-items:center}
.rins-worry__in{width:1200px;max-width:100%;display:flex;flex-direction:column;align-items:center}
.rins .rins-worry__title{margin-bottom:36px;color:#fff;font-size:34px;line-height:1.4;text-align:center}
.rins .rins-worry__list{width:100%;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none}
.rins-worry__item{padding:22px 20px;border:3px solid var(--deep);border-radius:10px;background:#fff;display:flex;align-items:center;gap:16px}
.rins-worry__icon{flex:none;width:64px;height:64px;border-radius:50%;background:var(--pale);display:grid;place-items:center}
.rins-worry__icon svg{width:34px;height:34px;fill:var(--deep)}
.rins .rins-worry__text{flex:1;min-width:0;margin:0;color:var(--ink);font-size:18px;font-weight:500;line-height:1.6}
.rins .rins-worry__text strong{font-weight:800}

/* ---------- 2つの代位弁済請求フロー ---------- */
/* PC では2枚を左右に並べ、見出し・イラスト・流れ・まとめの段を subgrid で横にそろえる */
.rins-routes{padding:90px 40px 100px;background:var(--pale);display:flex;flex-direction:column;align-items:center}
.rins-routes__in{width:1200px;max-width:100%}
.rins-routes__grid{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);column-gap:36px}
.rins-route{grid-row:span 5;display:grid;grid-template-rows:subgrid;row-gap:0;overflow:hidden;border:1px solid rgba(36,37,40,.15);border-radius:16px;background:#fff;box-shadow:3px 3px 0 rgba(0,0,0,.1)}
.rins .rins-route__band{margin:0;padding:16px 24px;background:var(--g);color:#fff;font-size:20px;font-weight:700;line-height:1.4;text-align:center}
.rins-route__head{padding:24px 28px 0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.rins .rins-route__name{padding:3px 12px 2px;border-radius:6px;background:var(--pale);color:var(--deep);font-size:15px;font-weight:700;line-height:1.6}
.rins .rins-route__title{color:var(--ink);font-size:26px;line-height:1.45}
.rins-route__fig{margin:18px 28px 0;border-bottom:2px solid var(--pale);display:flex;align-items:flex-end;justify-content:center}
.rins .rins-route__fig img{width:100%;max-width:520px;height:auto}
.rins .rins-route__steps{margin:0;padding:24px 28px 8px;display:flex;flex-direction:column;list-style:none}
.rins-route__steps li{position:relative;display:flex;align-items:center;gap:14px;padding:12px 0}
/* 段と段の間の下向き矢印（役割ラベルの列の中央） */
.rins-route__steps li+li::before{content:'';position:absolute;top:-7px;left:calc(2.8em + 12px - 8px);width:16px;height:12px;background:var(--g2);clip-path:polygon(0 0,100% 0,50% 100%)}
.rins .rins-route__steps .rins-role{width:7.2em}
.rins .rins-route__do{margin:0;color:var(--ink);font-size:17px;font-weight:500;line-height:1.6}
.rins .rins-route__sum{margin:16px 28px 28px;padding:16px 20px;border-radius:12px;background:var(--mint);color:var(--ink);font-size:16px;font-weight:500;line-height:1.8;align-self:end}

/* ---------- できること（Point 01〜） ---------- */
.rins-feature{padding:100px 100px 30px;background:#fff;display:flex;flex-direction:column;align-items:center}
.rins-feature>.rins-h2{margin-bottom:56px}
.rins-point:last-child{margin-bottom:70px}
.rins-point{width:1200px;max-width:100%;margin-bottom:90px;display:flex;align-items:center;gap:70px}
.rins-point--rev{flex-direction:row-reverse}
.rins-point__fig{flex:none;width:calc(46% - 35px);margin:0;display:flex;flex-direction:column;align-items:center}
.rins .rins-point__fig figcaption{margin-top:12px;color:var(--sub);font-size:14px;font-weight:600;line-height:1.6;text-align:center}
.rins-point__body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.rins .rins-point__title{width:100%;margin-top:0;color:var(--ink);font-size:30px;line-height:1.45}
.rins .rins-point__lead{margin:16px 0 0;color:var(--txt);font-size:18px;font-weight:500;line-height:1.8}
.rins .rins-point__box{width:100%;margin:20px 0 0;padding:22px 26px;border-radius:12px;background:var(--pale);display:flex;flex-direction:column;gap:14px;list-style:none}
.rins-point__box li{position:relative;padding-left:22px;color:var(--ink);font-size:16px;font-weight:500;line-height:1.75}
.rins-point__box li::before{content:'';position:absolute;top:.6em;left:2px;width:10px;height:10px;border-radius:50%;background:var(--g2)}
.rins .rins-point__box strong{display:block;font-size:17px}

/* ---------- 審査の流れ（ステータス） ---------- */
.rins-steps{padding:90px 40px 100px;background:var(--pale);display:flex;flex-direction:column;align-items:center}
.rins-steps__in{width:1200px;max-width:100%}
.rins .rins-steps__list{margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;list-style:none}
.rins-step{position:relative;padding:24px 22px 26px;border:1px solid rgba(36,37,40,.15);border-radius:16px;background:#fff;box-shadow:3px 3px 0 rgba(0,0,0,.1);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
/* カードの間の矢印 */
.rins-step+.rins-step::before{content:'';position:absolute;top:50%;left:-30px;width:20px;height:24px;background:var(--g2);clip-path:polygon(0 0,100% 50%,0 100%);translate:0 -50%}
/* 手順の番号は全ページ共通の「STEP 1」の札。見出しより目立たせない */
.rins .rins-step__no{width:fit-content;margin:0;padding:4px 12px 3px;border:1px solid var(--g);border-radius:99px;background:#fff;color:var(--g);font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.04em;white-space:nowrap}
.rins .rins-step__status{padding:4px 12px 3px;border-radius:6px;background:var(--pale);color:var(--deep);font-size:14px;font-weight:700;line-height:1.5}
.rins .rins-step__title{color:var(--ink);font-size:20px;line-height:1.45}
.rins .rins-step__text{margin:0;color:var(--ink);font-size:16px;font-weight:500;line-height:1.75}

/* ---------- よくある質問（/checksheet と同じ作り） ---------- */
.rins-faq{padding:100px 100px 80px;border-top:1px solid rgba(36,37,40,.1);background:#fff;display:flex;flex-direction:column;align-items:center}
.rins-faq__in{width:1280px;max-width:100%;padding:0 40px;display:flex;align-items:flex-start;gap:80px}
.rins-faq__head{flex:none;width:340px}
.rins .rins-faq__title{color:var(--ink);font-size:40px;line-height:1.35}
.rins-faq__list{flex:2;min-width:0;display:flex;flex-direction:column;gap:10px}
.rins .rins-faq__item{margin:0;padding:0;border:0;border-radius:0;background:#fff}
.rins .rins-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px;border:1px solid transparent;border-radius:12px;font-weight:700;list-style:none;cursor:pointer;transition:border-color .3s cubic-bezier(.4,.4,0,1)}
.rins .rins-faq__item summary::before,.rins .rins-faq__item summary::after{content:none}
.rins-faq__item summary::-webkit-details-marker{display:none}
.rins .rins-faq__item summary:hover{border-color:rgba(36,37,40,.7)}
.rins-faq__q-row{flex:1;min-width:0;display:flex;align-items:flex-start;gap:20px}
.rins-faq__q{flex:none;color:var(--ink);font-size:28px;font-weight:700;line-height:1}
.rins-faq__question{flex:1;min-width:0;color:var(--ink);font-size:18px;font-weight:700;line-height:1.7}
.rins-faq__icon{flex:none;width:40px;height:40px;padding:7px;border:1px solid rgba(36,37,40,.1);border-radius:96px;fill:var(--ink);transition:rotate .3s cubic-bezier(.4,.4,0,1),border-color .3s cubic-bezier(.4,.4,0,1)}
.rins-faq__item summary:hover .rins-faq__icon{border-color:rgba(36,37,40,.7)}
.rins-faq__item[open] .rins-faq__icon{rotate:180deg}
.rins-faq__item.is-closing .rins-faq__icon{rotate:0deg}
.rins-faq__answer{overflow:hidden}
.rins .rins-faq__answer p{margin:0;padding:5px 15px 15px 63px;color:var(--ink);font-size:17px;font-weight:500;line-height:1.8}

/* お悩みとフローの間の波（/checksheet と同じ画像） */
.rins .rins-wave{width:100%;height:auto;margin-top:-4px;background:var(--pale);rotate:180deg}

/* 画面のイメージ（実際の画面の項目名どおりに HTML で描いたもの） */
.rins-app{width:100%;max-width:480px;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#f6f7f9;box-shadow:0 14px 34px rgba(8,95,42,.14);text-align:left}
.rins .rins-app__bar{padding:10px 14px;background:var(--deep);display:flex;align-items:center;gap:6px;color:#fff;font-size:14px;font-weight:700;line-height:1.3}
.rins-app__bar span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45)}
.rins-app__bar span:nth-child(3){margin-right:8px}
.rins-app__body{margin:14px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;flex-direction:column;gap:12px}
.rins .rins-app__head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink);font-size:15px;font-weight:700;line-height:1.4}
.rins-app__chip{flex:none;padding:3px 10px;border:1px solid var(--g);border-radius:6px;color:var(--g);font-size:12px;font-weight:700;line-height:1.5}
.rins-app__item{padding:12px;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:10px}
.rins .rins-app__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:var(--ink);font-size:14px;font-weight:700;line-height:1.5}
.rins-app__row span:last-child{flex:none;color:var(--sub);font-size:12px;font-weight:600}
.rins-app__row b{margin-left:4px;color:var(--ink);font-size:14px}
.rins .rins-app__grid{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rins-app__grid div{padding:7px 9px;border-radius:8px;background:#f6f7f9;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.rins .rins-app__grid dt{color:var(--sub);font-size:12px;font-weight:600;line-height:1.4}
.rins .rins-app__grid dd{margin:0;display:flex;align-items:center;gap:4px;color:var(--ink);font-size:12px;font-weight:700;line-height:1.4}
.rins-app__badge{padding:2px 8px;border-radius:5px;font-size:12px;font-weight:700;line-height:1.5}
.rins-app__badge--green{background:#dcfce7;color:#166534}
.rins-app__badge--red{background:#fee2e2;color:#991b1b}
.rins-app__badge--blue{background:#dbeafe;color:#1e40af}
.rins-app__badge--gray{background:#f3f4f6;color:#4b5563}
.rins-app__thumb{display:inline-block;width:30px;height:24px;border-radius:4px;background:linear-gradient(135deg,#d7e1db,#eef2ef 60%,#cfd9d3)}
.rins .rins-app__radio{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:13px;font-weight:700;line-height:1.4}
.rins-app__radio span{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.rins-app__radio span::before{content:'';width:14px;height:14px;border:2px solid #9aa3ad;border-radius:50%;background:#fff}
.rins-app__radio span.is-on::before{border-color:var(--g);background:radial-gradient(circle,var(--g) 0 3px,#fff 3.5px)}

/* 「できること」の中の案件の区分（フローの帯と同じ言葉・同じ緑） */
.rins-group{width:1200px;max-width:100%;margin:0 0 50px;padding-bottom:14px;border-bottom:2px solid var(--pale);display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.rins .rins-group__band{padding:8px 20px 7px;border-radius:99px;background:var(--g);color:#fff;font-size:18px;font-weight:700;line-height:1.4}
.rins .rins-group__name{padding:3px 12px 2px;border-radius:6px;background:var(--pale);color:var(--deep);font-size:16px;font-weight:700;line-height:1.6}

/* 取り込み画面のイメージ */
.rins-form{display:flex;flex-direction:column;gap:5px}
.rins-form--two{flex-direction:row;gap:10px}
.rins-form--two>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.rins .rins-form__label{color:var(--ink);font-size:12px;font-weight:700;line-height:1.4}
.rins-form__label em{margin-left:2px;color:#dc2626;font-style:normal}
.rins .rins-form__files{padding:8px;border:1px dashed #b9c3bd;border-radius:8px;background:#fafcfb;display:flex;flex-wrap:wrap;gap:6px}
.rins-form__files span{padding:3px 8px 3px 6px;border:1px solid var(--line);border-radius:6px;background:#fff;display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-size:12px;font-weight:600;line-height:1.4}
/* PDF のアイコン（赤い書類の形。文字は入れない） */
.rins-form__files span::before{content:'';flex:none;width:11px;height:14px;background:#dc2626;clip-path:polygon(0 0,62% 0,100% 30%,100% 100%,0 100%)}
.rins .rins-form__input{height:28px;border:1px solid #d5dbd8;border-radius:6px;background:#fff}
.rins .rins-form__seg{display:flex;border:1px solid #d5dbd8;border-radius:8px;overflow:hidden}
.rins-form__seg span{flex:1;padding:5px 4px;color:var(--sub);font-size:12px;font-weight:700;line-height:1.4;text-align:center}
.rins-form__seg span+span{border-left:1px solid #d5dbd8}
.rins-form__seg span.is-on{background:var(--pale);color:var(--deep)}
.rins .rins-form__btns{display:flex;justify-content:flex-end;gap:8px}
.rins-form__btns span{padding:6px 14px;border-radius:99px;box-shadow:inset 0 0 0 1px #d5dbd8;color:var(--ink);font-size:12px;font-weight:700;line-height:1.4}
.rins-form__btns span.is-main{background:var(--deep);box-shadow:none;color:#fff}

/* AI査定の明細のイメージ */
.rins-tbl{border:1px solid var(--line);border-radius:8px}
.rins .rins-tbl__tr{display:grid;grid-template-columns:minmax(0,1fr) 70px 42px 70px 34px;align-items:center;gap:6px;padding:8px 10px;color:var(--ink);font-size:12px;font-weight:500;line-height:1.45}
.rins .rins-tbl__tr+.rins-tbl__tr{border-top:1px solid var(--line)}
.rins-tbl__tr span:nth-child(n+2){text-align:right}
.rins-tbl__tr span:last-child{display:flex;justify-content:center}
.rins-tbl__tr small{display:block;color:var(--sub);font-size:12px}
.rins .rins-tbl__th{background:#f3f5f4;color:var(--sub);font-size:12px;font-weight:700;line-height:1.35}
.rins .rins-tbl__th span{text-align:center}
.rins .rins-tbl__th span:first-child{text-align:left}
.rins .rins-tbl__legend{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--ink);font-size:12px;font-weight:600;line-height:1.5}
.rins-tbl__legend span{display:inline-flex;align-items:center;gap:5px}
/* 査定の印（緑のチェック＝ガイドラインに準拠、黄色の！＝個別審査が必要） */
.rins-mark{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-style:normal}
.rins-mark--ok{background:#16a34a}
.rins-mark--ok::before{content:'';width:9px;height:5px;margin-top:-2px;border:solid #fff;border-width:0 0 2px 2px;rotate:-45deg}
.rins-mark--check{background:#f5b301}
.rins-mark--check::before{content:'!';color:#fff;font-size:13px;font-weight:800;line-height:1}

/* 回答フォームのイメージ（スマホ） */
.rins-phone{width:300px;max-width:100%;padding:20px 16px 22px;border:10px solid #1f2523;border-radius:40px;background:#fff;box-shadow:0 14px 34px rgba(8,95,42,.18);display:flex;flex-direction:column;gap:12px}
.rins .rins-phone__app{padding-bottom:10px;border-bottom:1px solid var(--line);color:var(--deep);font-size:14px;font-weight:800;line-height:1.3;text-align:center}
.rins .rins-phone__steps{margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;list-style:none}
.rins-phone__steps li{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--sub);font-size:12px;font-weight:600;line-height:1.3;text-align:center}
.rins-phone__steps span{width:22px;height:22px;border-radius:50%;background:#e5e7eb;display:grid;place-items:center;color:var(--sub);font-family:Overpass,sans-serif;font-size:12px;font-weight:800}
.rins-phone__steps li.is-on{color:var(--deep);font-weight:700}
.rins-phone__steps li.is-on span{background:var(--deep);color:#fff}
.rins .rins-phone__note{padding:8px 10px;border-radius:8px;background:var(--mint);color:var(--ink);font-size:12px;font-weight:500;line-height:1.55}
.rins-phone__item{padding:10px;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:5px}
.rins .rins-phone__name{color:var(--ink);font-size:13px;font-weight:700;line-height:1.4}
.rins-phone__name span{display:block;color:var(--sub);font-size:12px;font-weight:600}
.rins .rins-phone__label{margin-top:2px;color:var(--sub);font-size:12px;font-weight:700;line-height:1.4}
.rins .rins-phone__sel{padding:6px 8px;border:1px solid var(--g2);border-radius:6px;background:#fff;color:var(--ink);font-size:12px;font-weight:600;line-height:1.5}
.rins .rins-phone__photo{display:flex;align-items:center;gap:4px;color:var(--g);font-size:12px;font-weight:700;line-height:1.4}
.rins-phone__photo svg{flex:none;width:16px;height:16px;fill:var(--g)}
.rins .rins-phone__btn{padding:9px;border-radius:99px;background:var(--deep);color:#fff;font-size:13px;font-weight:700;line-height:1.3;text-align:center}

/* 代位弁済額と通知書のイメージ */
.rins-calc{width:100%;max-width:480px;padding:20px;border:1px solid var(--line);border-radius:14px;background:#f6f7f9;box-shadow:0 14px 34px rgba(8,95,42,.14);display:flex;flex-direction:column;align-items:stretch;gap:14px}
.rins-calc__row{display:flex;align-items:center;gap:6px}
.rins .rins-calc__box{flex:1;min-width:0;padding:10px 8px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;flex-direction:column;gap:2px}
.rins-calc__box span{color:var(--sub);font-size:12px;font-weight:600;line-height:1.4}
.rins-calc__box b{color:var(--ink);font-family:Overpass,'Noto Sans JP',sans-serif;font-size:18px;font-weight:800;line-height:1.3;white-space:nowrap}
.rins .rins-calc__box--total{border:2px solid var(--g2)}
.rins-calc__box--total b{color:var(--deep)}
.rins-calc__op{flex:none;color:var(--sub);font-size:16px;font-weight:800}
.rins-doc{width:86%;margin:0 auto;padding:18px 20px;border:1px solid var(--line);border-radius:4px;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:6px}
.rins .rins-doc__title{color:var(--ink);font-size:15px;font-weight:800;line-height:1.4;letter-spacing:.3em;text-align:center}
.rins .rins-doc__to{margin-bottom:4px;color:var(--ink);font-size:12px;font-weight:600;line-height:1.4}
.rins .rins-doc__tr{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:12px;font-weight:500;line-height:1.4}
.rins .rins-doc__tr--total{border-bottom:2px solid var(--g2);color:var(--deep);font-weight:800}
.rins .rins-calc__btn{align-self:flex-end;padding:7px 16px;border-radius:99px;background:var(--deep);color:#fff;font-size:12px;font-weight:700;line-height:1.4}

.rins .rins-steps__note{margin-top:24px;color:var(--txt);font-size:14px;font-weight:500;line-height:1.7}

/* ---------- 1280px 以下 ---------- */
@media (max-width:1280px){
  .rins-hero{padding:70px 50px 80px}
  .rins-hero__in{gap:40px}
  .rins .rins-hero__catch{font-size:34px}
  .rins .rins-hero__title img{width:400px}
  .rins-hero__media{width:440px}
  .rins-worry{padding:70px 50px 60px}
  .rins .rins-worry__title{font-size:30px}
  .rins-worry__item{padding:18px 16px;gap:12px}
  .rins-worry__icon{width:56px;height:56px}
  .rins-worry__icon svg{width:30px;height:30px}
  .rins .rins-worry__text{font-size:17px}
  .rins .rins-h2{font-size:34px}
  .rins-routes{padding:80px 40px 90px}
  .rins-routes__grid{column-gap:28px}
  .rins .rins-route__title{font-size:23px}
  .rins-route__head{padding:22px 22px 0}
  .rins-route__fig{margin:16px 22px 0}
  .rins .rins-route__steps{padding:20px 22px 6px}
  .rins .rins-route__sum{margin:14px 22px 24px}
  .rins-feature{padding:90px 60px 20px}
  .rins-point{gap:50px}
  .rins-point__fig{width:calc(46% - 25px)}
  .rins .rins-point__title{font-size:27px}
  .rins-steps{padding:80px 40px 90px}
  .rins-faq{padding:90px 60px 70px}
  .rins-faq__in{padding:0;flex-direction:column;gap:30px}
  .rins-faq__head{width:auto}
  .rins-faq__list{width:100%}
}
/* ---------- 1024px 以下（ファーストビューと流れを縦に） ---------- */
@media (max-width:1024px){
  .rins-hero__in{flex-direction:column;align-items:stretch;gap:36px}
  .rins-hero__copy{align-items:flex-start}
  .rins .rins-hero__lead{max-width:none}
  .rins-hero__media{width:min(640px,100%);margin:0 auto}
  .rins-route__steps li{gap:12px}
  .rins .rins-route__do{font-size:16px}
  .rins .rins-steps__list{max-width:560px;margin-left:auto;margin-right:auto;grid-template-columns:1fr;gap:40px}
  .rins-step+.rins-step::before{top:-31px;left:50%;width:24px;height:20px;translate:-50% 0;clip-path:polygon(0 0,100% 0,50% 100%)}
  .rins .rins-steps__note{max-width:560px;margin-left:auto;margin-right:auto}
}
/* ---------- 900px 以下（お悩みを1列に） ---------- */
@media (max-width:900px){
  .rins .rins-worry__list{grid-template-columns:1fr;max-width:620px;margin:0 auto;gap:14px}
}
/* 画面のイメージは、図の幅が狭いとき（PC の2段組みの 1024px 前後・スマホ）に詰めて見せる */
.rins-app{container:rins-app/inline-size}
.rins-calc{container:rins-calc/inline-size}
@container rins-app (max-width:440px){
  /* 「工事原価」の列を省き、項目名を折り返さずに読めるようにする */
  .rins .rins-tbl__tr{grid-template-columns:minmax(0,1fr) 40px 70px 28px;gap:6px;padding:7px 8px}
  .rins-tbl__tr span:nth-child(2){display:none}
}
@container rins-app (max-width:300px){
  /* さらに狭いときは「負担割合」の列も省き、項目名が語の途中で折れないようにする */
  .rins .rins-tbl__tr{grid-template-columns:minmax(0,1fr) 66px 24px;gap:4px;padding:6px}
  .rins-tbl__tr span:nth-child(3){display:none}
}
/* 代位弁済額の式は、図が狭いときは縦に積む（PC の2段組みでは横並び） */
@container rins-calc (max-width:400px){
  .rins-calc__row{flex-direction:column;align-items:stretch;gap:4px}
  .rins .rins-calc__box{flex-direction:row;align-items:baseline;justify-content:space-between}
  .rins-calc__op{align-self:center;line-height:1}
  .rins-doc{width:100%;padding:14px}
}
/* ---------- 840px 以下（フローとできることを1列に） ---------- */
@media (max-width:840px){
  .rins-hero{padding:50px 40px 60px}
  .rins .rins-hero__catch{font-size:30px}
  .rins .rins-hero__title img{width:360px}
  .rins .rins-hero__lead{font-size:17px}
  .rins-worry{padding:50px 40px 44px}
  .rins .rins-worry__title{margin-bottom:28px;font-size:26px}
  .rins .rins-h2{font-size:28px}
  .rins .rins-lead{font-size:16px}
  .rins-routes{padding:44px 40px 70px}
  .rins-routes__grid{max-width:620px;margin-left:auto;margin-right:auto;grid-template-columns:1fr;grid-template-rows:none;row-gap:32px}
  .rins-route{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column}
  .rins .rins-route__band{font-size:19px}
  .rins-feature{padding:70px 40px 10px}
  .rins-feature>.rins-h2{margin-bottom:44px}
  .rins-group{margin-bottom:36px}
  .rins-point,.rins-point--rev{margin-bottom:70px;flex-direction:column;align-items:stretch;gap:30px}
  .rins-point__fig{width:100%}
  .rins .rins-point__title{font-size:25px}
  .rins .rins-point__lead{font-size:16px}
  .rins-steps{padding:70px 40px}
  .rins-faq{padding:70px 40px 60px}
  .rins .rins-faq__title{font-size:34px}
  .rins-faq__list{width:calc(100% + 30px);margin:0 -15px}
}
/* ---------- 540px 以下 ---------- */
@media (max-width:540px){
  .rins-hero{padding:36px 20px 48px}
  .rins .rins-hero__for{font-size:14px}
  .rins .rins-hero__catch{margin-top:16px;font-size:25px}
  .rins .rins-hero__title{margin-top:16px}
  .rins .rins-hero__title img{width:min(300px,100%)}
  .rins .rins-hero__lead{margin-top:18px;font-size:16px;line-height:1.8}
  .rins .rins-hero__tags{margin-top:18px;gap:8px}
  .rins-hero__tags li{padding:6px 12px 5px 9px;font-size:14px}
  .rins-hero__tags svg{width:16px;height:16px}
  .rins-hero__btns{margin-top:26px;flex-direction:column;gap:12px}
  .rins-hero__btn{width:100%;min-width:0;padding:14px 20px;font-size:18px}
  .rins-hero__video{border-width:4px;border-radius:14px}
  .rins .rins-hero__media figcaption{font-size:14px}
  .rins-worry{padding:40px 20px 34px}
  .rins .rins-worry__title{margin-bottom:22px;font-size:21px}
  .rins-worry__item{padding:14px 12px}
  .rins-worry__icon{width:48px;height:48px}
  .rins-worry__icon svg{width:26px;height:26px}
  .rins .rins-worry__text{font-size:16px}
  .rins .rins-h2{font-size:23px}
  .rins .rins-lead{margin-top:14px;font-size:15px}
  .rins .rins-role{font-size:14px;padding:4px 8px 3px}
  .rins-routes{padding:34px 20px 60px}
  .rins-routes__grid{margin-top:28px;row-gap:24px}
  .rins .rins-route__band{padding:12px 16px;font-size:17px}
  .rins-route__head{padding:18px 16px 0;gap:8px}
  .rins .rins-route__name{font-size:14px}
  .rins .rins-route__title{font-size:20px}
  .rins-route__fig{margin:12px 16px 0}
  .rins .rins-route__steps{padding:16px 16px 4px}
  .rins-route__steps li{gap:10px;padding:10px 0}
  .rins .rins-route__steps .rins-role{width:6.4em}
  .rins-route__steps li+li::before{left:calc(3.2em - 8px)}
  .rins .rins-route__do{font-size:15px}
  .rins .rins-route__sum{margin:12px 16px 18px;padding:14px;font-size:15px}
  .rins-feature{padding:56px 20px 0}
  .rins-feature>.rins-h2{margin-bottom:36px}
  .rins .rins-group__band{padding:7px 16px 6px;font-size:16px}
  .rins .rins-group__name{font-size:14px}
  .rins-point,.rins-point--rev{margin-bottom:56px;gap:24px}
  .rins .rins-point__title{font-size:21px}
  .rins .rins-point__lead{margin-top:12px;font-size:15px}
  .rins .rins-point__box{padding:18px 16px;gap:12px}
  .rins-point__box li{padding-left:18px;font-size:15px}
  .rins-point__box li::before{width:8px;height:8px}
  .rins .rins-point__box strong{font-size:16px}
  .rins-app__body{margin:8px;padding:10px;gap:10px}
  .rins-app__item{padding:10px}
  .rins .rins-app__row{flex-direction:column;gap:2px}
  .rins-phone{width:280px;border-width:9px;border-radius:36px}
  /* 画面のイメージ：スマホでは図の中の文字を13px以上にする */
  .rins-app__chip,.rins-app__row span:last-child,.rins .rins-app__grid dt,.rins .rins-app__grid dd,.rins-app__badge,
  .rins .rins-form__label,.rins-form__files span,.rins-form__seg span,.rins-form__btns span,
  .rins .rins-tbl__tr,.rins-tbl__tr small,.rins .rins-tbl__th,.rins .rins-tbl__legend,
  .rins-phone__steps li,.rins .rins-phone__note,.rins-phone__name span,.rins .rins-phone__label,.rins .rins-phone__sel,.rins .rins-phone__photo,
  .rins-calc__box span,.rins .rins-doc__to,.rins .rins-doc__tr,.rins .rins-calc__btn{font-size:13px}
  .rins-steps{padding:56px 20px}
  .rins .rins-steps__list{margin-top:30px}
  .rins-step{padding:20px 18px 22px}
  .rins .rins-step__title{font-size:19px}
  .rins .rins-step__text{font-size:15px}
  .rins .rins-steps__note{font-size:14px}
  .rins-faq{padding:56px 20px 50px}
  .rins .rins-faq__title{font-size:28px}
  .rins-faq__list{width:calc(100% + 20px);margin:0 -10px}
  .rins .rins-faq__item summary{gap:10px;padding:12px 10px}
  .rins-faq__q-row{gap:12px}
  .rins-faq__q{font-size:24px}
  .rins-faq__question{font-size:16px;line-height:1.65}
  .rins-faq__icon{width:34px;height:34px;padding:5px}
  .rins .rins-faq__answer p{padding:4px 10px 12px 46px;font-size:15px;line-height:1.75}
}
/* ---------- 320px 以下 ---------- */
@media (max-width:320px){
  .rins-hero{padding:30px 15px 40px}
  .rins .rins-hero__catch{font-size:22px}
  .rins-worry{padding:36px 15px 30px}
  .rins-routes{padding:30px 15px 50px}
  .rins-feature{padding:50px 15px 0}
  .rins-steps{padding:50px 15px}
  .rins-faq{padding:50px 15px 44px}
  .rins .rins-faq__answer p{padding-left:10px}
}
/* 動きを減らす設定の端末ではホバー・開閉のアニメーションを止める（動画の自動再生は rins.js で止める） */
@media (prefers-reduced-motion:reduce){
  .rins .rins-faq__item summary,.rins-faq__icon,.rins-hero__btn{transition:none}
}