/* ==========================================================================
   リフォーム瑕疵保険ページ（page-defect.php）専用スタイル
   ※ page-insurance.css で確立した .insurance 相当のパターンを .defect として
     再定義しつつ、このページ固有のパーツ（是正セクション、メリット一覧、
     登録事業者セクション）を追加する。
   ========================================================================== */

/* 共通レイアウト
   ------------------------------------------------------------------------ */
.defect .container {
  max-width: 110rem;
  margin: 0 auto;
  padding: 0;
}

@media screen and (max-width: 1023px) {
  .defect .container {
    padding: 0 2rem;
  }
}

/* 瑕疵（かし）保険で安心にリフォーム（リード文）
   ------------------------------------------------------------------------ */
.defect.lead {
  position: relative;
  padding: 6rem 0 8rem;
  background: url(../img/bg-dot.png) 50% 0/23.4rem auto repeat;
}

@media screen and (max-width: 1023px) {
  .defect.lead {
    padding: 6rem 0;
  }
}

.defect.lead .text {
  padding: 4rem 0 0;
  font-weight: 700;
  text-align: center;
}

.defect.lead .text .catch {
  color: #0e86c2;
  font-size: 2.4rem;
  line-height: 1.5;
}

.defect.lead .text p {
  padding: 3rem 0 0;
  font-size: 2rem;
  line-height: 1.5;
}

.defect.lead .read-text {
  max-width: 100rem;
  margin: 4rem auto 0;
  font-size: 1.6rem;
  line-height: 2;
  text-align: left;
}

.defect.lead .read-text:first-of-type {
  margin-top: 5rem;
}

@media screen and (max-width: 1023px) {
  .defect.lead .read-text {
    margin-top: 3rem;
    font-size: 1.5rem;
    line-height: 1.9;
  }

  .defect.lead .read-text:first-of-type {
    margin-top: 3.5rem;
  }
}

.defect.lead .read-text-col .read-text:first-child {
  margin-top: 0;
}

.defect.lead .row {
  display: flex;
  align-items: center;
  gap: 5rem;
  margin: 5rem 0 0;
}

@media screen and (max-width: 1023px) {
  .defect.lead .row {
    display: block;
    margin-top: 4rem;
  }
}

.defect.lead .read-text-col {
  flex: 1;
}

.defect.lead .row .image {
  width: 40rem;
  flex-shrink: 0;
}

@media screen and (max-width: 1023px) {
  .defect.lead .row .image {
    width: auto;
    margin-top: 4rem;
  }
}

.defect.lead .image img {
  display: block;
  width: 100%;
  border-radius: 1.5rem;
}

/* 建築士の現地調査で不備があれば、是正が義務付けられます
   ------------------------------------------------------------------------ */
.defect.proposal {
  padding: 8rem 0 10rem;
  background: #e2f0f8;
}

@media screen and (max-width: 1023px) {
  .defect.proposal {
    padding: 6rem 0 8rem;
  }
}

.defect.proposal .ttl {
  font-weight: 700;
  text-align: center;
}

.defect.proposal .ttl .secondary {
  display: block;
  font-size: 2.2rem;
}

.defect.proposal .ttl .primary {
  display: block;
  padding: 2rem 0 0;
  font-size: 3.2rem;
  line-height: 1.1666666667;
  text-decoration: underline;
  text-decoration-color: #d6e7ba;
  text-decoration-thickness: 1.7rem;
  text-underline-offset: -1.8rem;
}

@media screen and (max-width: 1023px) {
  .defect.proposal .ttl .primary {
    font-size: 2.6rem;
    text-decoration-thickness: 1.3rem;
    text-underline-offset: -1.4rem;
  }
}

.defect.proposal .text p {
  padding: 5rem 0 0;
  font-size: 1.7rem;
  line-height: 1.6470588235;
  text-align: center;
}

@media screen and (max-width: 1023px) {
  .defect.proposal .text p {
    text-align: left;
  }
}

.defect.proposal .image {
  max-width: 70rem;
  margin: 5rem auto 0;
}

@media screen and (max-width: 1023px) {
  .defect.proposal .image {
    margin-top: 4rem;
  }
}

.defect.proposal .image img {
  display: block;
  width: 100%;
  border-radius: 1.5rem;
}

/* 瑕疵保険のメリット
   ------------------------------------------------------------------------ */
.defect.diagnosis {
  padding: 8rem 0 10rem;
  background: #fff;
}

@media screen and (max-width: 1023px) {
  .defect.diagnosis {
    padding: 6rem 0;
    border-radius: 3rem 3rem 0 0;
    margin-top: -3rem;
  }
}

.defect.diagnosis .merit-intro {
  text-align: center;
}

.defect.diagnosis .merit-intro .ttl {
  color: #0e86c2;
  font-size: 2.8rem;
  font-weight: 700;
}

@media screen and (max-width: 1023px) {
  .defect.diagnosis .merit-intro .ttl {
    font-size: 2.4rem;
  }
}

.defect.diagnosis .merit-intro .image {
  max-width: 60rem;
  margin: 5rem auto 0;
}

@media screen and (max-width: 1023px) {
  .defect.diagnosis .merit-intro .image {
    margin-top: 4rem;
  }
}

.defect.diagnosis .merit-intro .image img {
  display: block;
  width: 100%;
}

.defect.diagnosis .merit-intro p {
  max-width: 90rem;
  margin: 4rem auto 0;
  font-size: 1.6rem;
  line-height: 1.9;
  text-align: left;
}

.defect.diagnosis .merit-list {
  margin: 10rem 0 0;
  padding: 7rem 6rem;
  background: #e2f0f8;
  border-radius: 3rem;
}

@media screen and (max-width: 1023px) {
  .defect.diagnosis .merit-list {
    margin: 7rem 0 0;
    padding: 5rem 2rem;
  }
}

.defect.diagnosis .merit-item {
  display: flex;
  align-items: center;
  gap: 5rem;
}

.defect.diagnosis .merit-item+.merit-item {
  margin-top: 6rem;
}

.defect.diagnosis .merit-item:nth-child(even) {
  flex-direction: row-reverse;
}

@media screen and (max-width: 1023px) {

  .defect.diagnosis .merit-item,
  .defect.diagnosis .merit-item:nth-child(even) {
    display: block;
  }

  .defect.diagnosis .merit-item+.merit-item {
    margin-top: 5rem;
  }
}

.defect.diagnosis .merit-item .image {
  width: 46rem;
  flex-shrink: 0;
}

@media screen and (max-width: 1023px) {
  .defect.diagnosis .merit-item .image {
    width: auto;
  }
}

.defect.diagnosis .merit-item .image img {
  display: block;
  width: 100%;
  border-radius: 1.5rem;
}

.defect.diagnosis .merit-item .text {
  flex: 1;
}

@media screen and (max-width: 1023px) {
  .defect.diagnosis .merit-item .text {
    margin-top: 2.5rem;
  }
}

.defect.diagnosis .merit-item .sttl {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}

.defect.diagnosis .merit-item .text p {
  margin: 1.5rem 0 0;
  font-size: 1.5rem;
  line-height: 1.8;
}

/* 瑕疵保険の登録事業者です
   ------------------------------------------------------------------------ */
.defect.diagnosis .registration {
  margin: 10rem calc(-50vw + 50%) 0;
  padding: 8rem calc(50vw - 50%);
  background: #e2f0f8;
  text-align: center;
}

@media screen and (max-width: 1023px) {
  .defect.diagnosis .registration {
    margin-top: 7rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.defect.diagnosis .registration .ttl {
  font-size: 2.6rem;
  font-weight: 700;
}

@media screen and (max-width: 1023px) {
  .defect.diagnosis .registration .ttl {
    font-size: 2.2rem;
  }
}

.defect.diagnosis .registration .image {
  max-width: 40rem;
  margin: 5rem auto 0;
  padding: 2rem;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.15);
}

@media screen and (max-width: 1023px) {
  .defect.diagnosis .registration .image {
    margin-top: 4rem;
  }
}

.defect.diagnosis .registration .image img {
  display: block;
  width: 100%;
}

.defect.diagnosis .registration p {
  max-width: 90rem;
  margin: 4rem auto 0;
  font-size: 1.5rem;
  line-height: 1.9;
  text-align: left;
}