/* 道具の写真と連続する番号で、ご相談から契約までの順番を示す。 */
.contract-flow{max-width:1440px;margin:auto;padding:100px 0 80px;background:#f6f2ea}
.contract-heading{display:flex;justify-content:space-between;align-items:end;gap:40px}
.contract-heading h2{font-size:42px;letter-spacing:-.045em;line-height:1.5}
.contract-heading>.eyebrow{margin-bottom:14px}
.contract-heading>p{font-size:16px;line-height:2;color:var(--muted);padding-bottom:4px}
.contract-panorama{margin:42px -20px 8px;mix-blend-mode:multiply}
.contract-panorama img{width:100%;height:auto}
.contract-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;padding:0;margin:0}
.contract-step{position:relative;min-width:0}
.contract-stop{height:66px;position:relative}
.contract-stop:after{content:"";height:1px;background:#9a9f96;position:absolute;top:21px;left:42px;right:0}
.contract-step:last-child .contract-stop:after,.contract-step:last-child .contract-progress{display:none}
.contract-number{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:43px;height:43px;border:1px solid #797e73;border-radius:50%;background:#f6f2ea;font-size:18px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.contract-progress{position:absolute;top:20px;left:43px;right:0;height:3px;background:var(--yellow);z-index:1;transform-origin:left}
.contract-step:last-child .contract-number{background:var(--yellow);border-color:var(--yellow)}
.contract-detail{padding-right:24px}
.contract-step:last-child .contract-detail{padding-right:0}
.contract-stage{font-size:16px;font-weight:700;letter-spacing:-.03em;line-height:1.5;margin-bottom:15px}
.contract-detail h3{font-size:19px;line-height:1.7;letter-spacing:-.035em;min-height:65px;margin-bottom:15px}
.contract-description{font-size:15px;line-height:1.95;color:#50564f;min-height:148px}
.contract-check{border-top:1px solid #b4b8af;padding-top:15px;margin-top:18px;font-size:14px;line-height:1.8;font-weight:600}
.contract-check>span{display:block;font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--muted);margin-bottom:5px}
.contract-mobile-photo{display:none}
.contract-note{font-size:12px;margin-top:40px;padding-top:25px;border-top:1px solid #bfc4ba}
.contract-faq{padding-block:90px 100px}
.contract-faq .faq{border:0;padding:0;display:grid;grid-template-columns:.75fr 1.25fr;column-gap:65px;align-items:start}
.contract-faq .faq>.eyebrow{grid-column:1;grid-row:1;margin-top:18px}
.contract-faq .faq>h2{grid-column:1;grid-row:2;font-size:34px;line-height:1.6;align-self:start}
.contract-faq .faq>details{grid-column:2;margin:0}
.contract-faq .faq>details:nth-of-type(1){grid-row:1/3}
.contract-faq .faq>details:nth-of-type(2){grid-row:3}
.contract-faq .faq>details:nth-of-type(3){grid-row:4}
.contract-faq .faq>details:nth-of-type(4){grid-row:5}
@media(min-width:1001px) and (max-width:1100px){
 .contract-flow .content{width:calc(100% - 64px)}
 .contract-heading h2{font-size:36px}
 .contract-heading>p{max-width:330px}
 .contract-detail{padding-right:18px}
 .contract-stage{font-size:14px}
 .contract-detail h3{font-size:16px;min-height:56px}
 .contract-description{font-size:14px;min-height:220px}
 .contract-check{font-size:12px}
}
@media(max-width:1000px){
 .contract-flow{padding:76px 0 65px}
 .contract-heading{display:block}
 .contract-heading h2{font-size:36px;line-height:1.6}
 .contract-heading>p{font-size:16px;line-height:2;margin-top:25px;padding:0}
 .contract-heading .pc{display:none}
 .contract-panorama{display:none}
 .contract-steps{display:block;margin-top:48px}
 .contract-step{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:15px;position:relative;padding-bottom:45px}
 .contract-step:last-child{padding-bottom:0}
 .contract-stop{grid-column:1;grid-row:1/3;height:auto;position:static}
 .contract-stop:after{top:40px;bottom:0;left:19px;right:auto;width:1px;height:auto}
 .contract-number{width:39px;height:39px;font-size:16px}
 .contract-progress{top:39px;bottom:0;left:18px;right:auto;width:3px;height:auto;transform-origin:top}
 .contract-detail,.contract-step:last-child .contract-detail{grid-column:2;grid-row:1;padding:0}
 .contract-stage{font-size:19px;min-height:39px;display:flex;align-items:center;margin-bottom:14px}
 .contract-detail h3{font-size:20px;min-height:0;line-height:1.8;margin-bottom:16px}
 .contract-description{font-size:15px;line-height:2;min-height:0}
 .contract-check{font-size:13px;margin-top:23px;padding-top:14px;min-height:128px;margin-right:118px;padding-right:0}
 .contract-check>span{font-size:11px;white-space:nowrap}
 .contract-mobile-photo{display:block;position:absolute;bottom:48px;right:-6px;width:110px;height:142px;object-fit:cover;object-position:center;mix-blend-mode:multiply}
 .contract-step:last-child .contract-mobile-photo{bottom:3px}
 .contract-note{font-size:12px;margin-top:38px;padding-top:24px}
 .contract-faq{padding:65px 0 75px}
 .contract-faq .faq{display:block}
 .contract-faq .faq>h2{font-size:30px;margin-bottom:30px}
 .contract-faq .faq>.eyebrow{margin-top:0}
}
@media(max-width:359px){
 .contract-heading h2{font-size:32px}
 .contract-step{column-gap:12px;grid-template-columns:35px minmax(0,1fr)}
 .contract-number{width:35px;height:35px;font-size:15px}
 .contract-stop:after{left:17px;top:35px}
 .contract-progress{left:16px;top:35px}
 .contract-stage{font-size:17px}
 .contract-detail h3{font-size:18px}
 .contract-check{margin-right:100px}
 .contract-mobile-photo{width:96px}
}