@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Barlow:wght@600;700&display=swap');

/* ============================================================
   売却査定依頼（SALE）専用スタイル
   - 元サイト(au-plus-home.com fp-19392)のデザインを移植
   - 元CSSの html{font-size} 切替えはサイト全体に影響するため、
     .sale-fp-page 配下に閉じたスケール変数 --rf へ変換している
     （62.5%=10px / 55%=8.8px / 50%=8px に対応）
   ============================================================ */

.sale-fp-page{
  --main-color:#6D461F;
  --sub-color:#EE8700;
  --gray:#858282;
  --main-lh:1.7em;
  --rf:10px;
  --padding: calc(8 * var(--rf)) 0;

  font-family:'Noto Sans JP', sans-serif;
  color:#282828;
  background:#F6F4E8;
  padding: calc(9 * var(--rf)) 0 0;
  box-sizing:border-box;
}
.sale-fp-page .sale-title p,
.sale-fp-page .sale-footer-tel{ font-family:'Barlow', sans-serif; }
.sale-fp-page .br-sp{ display:none; }
.sale-fp-page img{ max-width:100%; }

/* btn
---------------------------------------------------------------------------- */
.sale-fp-page .red-btn,
.sale-fp-page .white-btn{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:90%;
  max-width:300px;
  background:var(--main-color);
  border-radius:3rem;
  padding:1rem 1rem 1.2rem;
  margin:0 auto;
  box-sizing:border-box;
  text-decoration:none;
  transition:.3s;
}
.sale-fp-page .red-btn::before,
.sale-fp-page .white-btn::before{
  position:absolute;
  content:"";
  width:24px;
  height:24px;
  background:url(/uploads/sale/icon-arrow-red.svg) no-repeat center/contain;
  top:50%;
  right:15px;
  transform:translateY(-50%);
}
.sale-fp-page .white-btn::before{
  background:url(/uploads/sale/icon-arrow-white.svg) no-repeat center/contain;
}
.sale-fp-page .red-btn p,
.sale-fp-page .white-btn p{
  font-size:1.8rem;
  font-weight:600;
  line-height:1em;
  color:#fff;
  margin:0;
}
.sale-fp-page .white-btn{ background:#fff; margin:0; }
.sale-fp-page .white-btn p{ color:var(--main-color); }
.sale-fp-page .yellow{ color:#FFF83A; }
.sale-fp-page .red-btn:hover{ background:var(--sub-color); transform:scale(1.05); }
.sale-fp-page .white-btn:hover{ background:#fffc9d; transform:scale(1.05); }

/* title
---------------------------------------------------------------------------- */
.sale-fp-page .sale-title{ text-align:center; margin-bottom:5rem; }
.sale-fp-page .sale-title p{
  font-size:2.6rem;
  font-weight:700;
  line-height:1em;
  letter-spacing:0.5rem;
  color:var(--main-color);
  margin:0;
}
.sale-fp-page .sale-title h3{
  font-size:4rem;
  line-height:1em;
  letter-spacing:0.3rem;
  color:#1C1C1C;
  border:none;
  padding:0;
  margin:0 auto 2rem;
}
.sale-fp-page section > p{
  font-size:1.8rem;
  font-weight:500;
  line-height:var(--main-lh);
  text-align:center;
  margin:5rem auto;
}

/* mainvisual
---------------------------------------------------------------------------- */
.sale-fp-page .sale-mv{
  display:flex;
  justify-content:center;
  align-items:center;
  width:calc(100% - 18rem);
  margin:0 auto;
}
.sale-fp-page .sale-mv .mv-txt{
  width:42.5%;
  max-width:740px;
  background:#fff;
  border-radius:2rem 0 0 2rem;
  padding:6rem 7rem 4rem;
  box-sizing:border-box;
}
.sale-fp-page .sale-mv .mv-txt h2{
  font-size:3.5rem;
  line-height:1.5em;
  text-align:center;
  padding:0;
  margin:0 0 2rem;
}
.sale-fp-page .sale-mv .mv-txt h2 span{ font-size:1.25em; color:var(--main-color); }
.sale-fp-page .sale-mv .mv-txt > p{
  font-size:1.8rem;
  font-weight:500;
  line-height:var(--main-lh);
  padding:0;
  margin:0 0 3rem;
}
.sale-fp-page .sale-mv figure{
  width:57.5%;
  max-width:1000px;
  border-radius:2rem;
  overflow:hidden;
  margin:0;
}
.sale-fp-page .sale-mv figure img{ display:block; width:100%; }

/* greeting / about-wrapper
---------------------------------------------------------------------------- */
.sale-fp-page .greeting-wrapper{ padding:var(--padding); box-sizing:border-box; }
.sale-fp-page .about-wrapper{ padding:var(--padding); box-sizing:border-box; }
.sale-fp-page .about-wrapper h5{
  font-size:3rem;
  text-align:center;
  background:none;
  padding:0;
  margin:0 auto;
  color:var(--main-color);
}
.sale-fp-page .about-wrapper h5 span{ color:var(--main-color); }
.sale-fp-page .about-wrapper > p{ margin:3rem auto 5rem; }

/* service-wrapper
---------------------------------------------------------------------------- */
.sale-fp-page .service-wrapper{
  background:#F6F4E8;
  padding:var(--padding);
  box-sizing:border-box;
  text-align:center;
}
.sale-fp-page .s-box-wrapper{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  max-width:1280px;
  margin:0 auto;
}
.sale-fp-page .s-box{ width:48%; max-width:600px; }
.sale-fp-page .s-box figure{ margin:0; }
.sale-fp-page .s-box figure img{ display:block; width:100%; }
.sale-fp-page .s-box h4{
  font-size:2.5rem;
  color:var(--main-color);
  text-align:center;
  padding:0;
  margin:2rem 0;
}
.sale-fp-page .s-box > p{
  font-size:1.8rem;
  font-weight:500;
  padding:0;
  margin:0 0 5rem;
  text-align:left;
}

/* online-wrapper
---------------------------------------------------------------------------- */
.sale-fp-page .online-wrapper{
  display:flex;
  flex-direction:row-reverse;
  background:#fff;
}
.sale-fp-page .online-wrapper figure{ width:50%; margin:0; }
.sale-fp-page .online-wrapper figure img{ display:block; width:100%; height:100%; object-fit:cover; }
.sale-fp-page .online-txt{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:50%;
  background:#fff;
  padding:7rem;
  box-sizing:border-box;
}
.sale-fp-page .online-wrapper .sale-title{ margin-bottom:0; }
.sale-fp-page .online-wrapper .sale-title p,
.sale-fp-page .online-wrapper .sale-title h3{
  letter-spacing:0.5rem;
  text-align:left;
  line-height:1.5em;
}
.sale-fp-page .online-txt > p{
  font-size:1.8rem;
  font-weight:500;
  line-height:var(--main-lh);
  margin:2rem 0 5rem;
}

/* policy-wrapper
---------------------------------------------------------------------------- */
.sale-fp-page .policy-wrapper{
  background:#fff;
  padding:var(--padding);
  padding-top:4rem;
  box-sizing:border-box;
}

/* support / btn-box / direct-title
---------------------------------------------------------------------------- */
.sale-fp-page section.service-wrapper.support{ background:#fff; }
.sale-fp-page .btn-box .red-btn{ max-width:460px; padding:2rem; border-radius:5rem; margin-bottom:1rem; }
.sale-fp-page .direct-box .direct-title{
  color:var(--main-color);
  font-size:3.5rem;
  text-align:center;
  font-weight:bold;
  border-bottom:solid 2px;
  display:inline-block;
  margin-bottom:-10px;
  margin-top:20px;
  border-radius:0;
}
.sale-fp-page .direct-box .s-box-wrapper{ margin-top:65px; }

/* contact footer
---------------------------------------------------------------------------- */
.sale-fp-page .sale-footer-wrapper{
  background:var(--main-color);
  padding:var(--padding);
  box-sizing:border-box;
}
.sale-fp-page .sale-footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:92%;
  max-width:1400px;
  margin:0 auto;
}
.sale-fp-page .sale-footer-wrapper .sale-title{ margin-bottom:0; }
.sale-fp-page .sale-footer-wrapper .sale-title h3,
.sale-fp-page .sale-footer-wrapper .sale-title p{ color:#fff; text-align:left; }
.sale-fp-page .footer-txt{ text-align:right; }
.sale-fp-page .sale-footer-tel{
  position:relative;
  display:inline-block;
  font-size:6.5rem;
  font-weight:600;
  line-height:1em;
  color:#fff;
  padding:0 0 0 5rem;
  box-sizing:border-box;
  text-decoration:none;
}
.sale-fp-page .sale-footer-tel::before{
  position:absolute;
  content:"";
  width:3.5rem;
  height:4.7rem;
  background:url(/uploads/sale/icon-tel.svg) no-repeat center/contain;
  top:54%;
  left:0;
  transform:translateY(-50%);
}
.sale-fp-page .footer-txt > p{
  font-size:1.8rem;
  font-weight:500;
  color:#fff;
  padding:0;
  margin:2rem 0 4rem;
}
.sale-fp-page .footer-txt .white-btn{ width:100%; max-width:480px; margin:0 0 0 auto; }
.sale-fp-page .footer-txt .white-btn p{ position:relative; padding:0 0 0 3.5rem; }
.sale-fp-page .footer-txt .white-btn p::before{
  position:absolute;
  content:"";
  width:2.5rem;
  height:1.8rem;
  background:url(/uploads/sale/icon-mail.svg) no-repeat center/contain;
  top:54%;
  left:0;
  transform:translateY(-50%);
}
.sale-fp-page .footer-txt .white-btn:hover{ transform:scale(1.05); }

/* 1600px
---------------------------------------------------------------------------- */
@media screen and (max-width:1600px){
  .sale-fp-page section > p{ font-size:1.4vw; margin:4rem auto; }
  .sale-fp-page .red-btn,
  .sale-fp-page .white-btn{ width:80%; max-width:350px; }
  .sale-fp-page .red-btn p,
  .sale-fp-page .white-btn p{ font-size:1.4vw; }
  .sale-fp-page .sale-mv{ width:calc(100% - 8rem); }
  .sale-fp-page .sale-mv .mv-txt{ padding:4vw 3vw 3vw; }
  .sale-fp-page .sale-mv .mv-txt h2{ font-size:2.2vw; }
  .sale-fp-page .sale-mv .mv-txt > p{ font-size:1.2vw; margin:0 0 2rem; }
  .sale-fp-page .s-box-wrapper{ width:92%; margin:0 auto; }
  .sale-fp-page .s-box h4{ font-size:1.8vw; }
  .sale-fp-page .s-box > p{ font-size:1.4vw; margin:0 0 4rem; }
  .sale-fp-page .online-txt{ padding:4vw 3vw; }
  .sale-fp-page .online-txt > p{ font-size:1.2vw; margin:2rem 0 3rem; }
  .sale-fp-page .about-wrapper h5{ font-size:2.4vw; margin:3.5rem auto; }
  .sale-fp-page .about-wrapper > p{ margin:3rem auto 5rem; }
}

/* 1024px (--rf:8.8px ＝ 55%相当)
---------------------------------------------------------------------------- */
@media screen and (max-width:1024px){
  .sale-fp-page{ --rf:8.8px; }
  .sale-fp-page .sale-title p{ letter-spacing:0.7rem; }
  .sale-fp-page section > p{ font-size:1.7vw; }
  .sale-fp-page .red-btn,
  .sale-fp-page .white-btn{ border-radius:5rem; }
  .sale-fp-page .red-btn p,
  .sale-fp-page .white-btn p{ font-size:2vw; }
  .sale-fp-page .sale-mv{ flex-direction:column-reverse; }
  .sale-fp-page .sale-mv figure{ width:100%; }
  .sale-fp-page .sale-mv .mv-txt{
    width:100%;
    max-width:100%;
    border-radius:0 0 2rem 2rem;
    padding:3vw 3vw 4vw;
    margin-top:-2rem;
    z-index:1;
  }
  .sale-fp-page .sale-mv .mv-txt h2{ font-size:3.2vw; }
  .sale-fp-page .sale-mv .mv-txt > p{ font-size:1.7vw; margin:0 0 3rem; }
  .sale-fp-page .s-box > p{ font-size:1.5vw; }
  .sale-fp-page .online-txt > p{ font-size:1.5vw; }
  .sale-fp-page .sale-footer-tel{ font-size:6vw; }
}

/* 768px (--rf:8px ＝ 50%相当)
---------------------------------------------------------------------------- */
@media screen and (max-width:768px){
  .sale-fp-page{ --rf:8px; --main-lh:1.5em; --padding:calc(6 * var(--rf)) 0; }
  .sale-fp-page .br-pc{ display:none; }
  .sale-fp-page .br-sp{ display:block; }
  .sale-fp-page{ padding:5rem 0 0; }
  .sale-fp-page .sale-title p{ font-size:4vw; letter-spacing:0.5rem; }
  .sale-fp-page .sale-title h3{ font-size:6.2vw; margin-bottom:4vw; letter-spacing:normal !important; }
  .sale-fp-page section > p{ width:92%; font-size:3.6vw; text-align:left; }
  .sale-fp-page .sale-title{ margin-bottom:8vw; }
  .sale-fp-page .red-btn,
  .sale-fp-page .white-btn{ max-width:400px; margin:0 auto; }
  .sale-fp-page .red-btn p,
  .sale-fp-page .white-btn p{ font-size:3.4vw; }
  .sale-fp-page .sale-mv{ width:92%; }
  .sale-fp-page .sale-mv .mv-txt h2{ font-size:5vw; }
  .sale-fp-page .sale-mv .mv-txt > p{ font-size:3.4vw; }
  .sale-fp-page .online-wrapper{ flex-direction:column-reverse; }
  .sale-fp-page .online-wrapper figure{ width:100%; }
  .sale-fp-page .online-txt{ width:100%; padding:5vw 4vw 7vw; }
  .sale-fp-page .online-txt > p{ font-size:3vw; margin:2.5rem auto; }
  .sale-fp-page .s-box-wrapper{ flex-wrap:wrap; }
  .sale-fp-page .s-box{ width:100%; max-width:100%; margin:0; }
  .sale-fp-page .s-box h4{ font-size:4.4vw; }
  .sale-fp-page .s-box > p{ font-size:3.4vw; margin:0 0 4rem; }
  .sale-fp-page .about-wrapper h5{ font-size:5vw; margin:3rem auto 0; }
  .sale-fp-page .sale-footer-inner{ flex-direction:column; }
  .sale-fp-page .sale-footer-wrapper .sale-title{ margin-bottom:6vw; }
  .sale-fp-page .sale-footer-wrapper .sale-title h3{ font-size:5vw; text-align:center; }
  .sale-fp-page .sale-footer-wrapper .sale-title p{ font-size:8vw; text-align:center; }
  .sale-fp-page .footer-txt{ text-align:center; }
  .sale-fp-page .sale-footer-tel{ font-size:11vw; padding-left:8.5vw; }
  .sale-fp-page .sale-footer-tel::before{ width:6vw; height:8vw; }
  .sale-fp-page .footer-txt > p{ font-size:3.4vw; margin:2rem auto 3rem; }
  .sale-fp-page .footer-txt .white-btn{ width:90%; margin:0 auto; }
}

/* 560px
---------------------------------------------------------------------------- */
@media screen and (max-width:560px){
  .sale-fp-page .direct-box .direct-title{ font-size:5.6vw; }
  .sale-fp-page .direct-box .s-box-wrapper{ margin-top:40px; }
}