/* ==========================================================================
   ドローン点検ページ（page-drone.php）専用スタイル
   ※ page-insurance.css / page-defect.css で確立したパターンを .drone として
     再定義しつつ、このページ固有のパーツ（特徴/メリット/状態診断/免許/CTA）
     を追加する。
   ========================================================================== */

/* 共通レイアウト
   ------------------------------------------------------------------------ */
.drone .container {
  max-width: 110rem;
  margin: 0 auto;
  padding: 0;
}
@media screen and (max-width: 1023px) {
  .drone .container {
    padding: 0 2rem;
  }
}

/* ドローンを使ってお住まいを診断しませんか？（リード文）
   ------------------------------------------------------------------------ */
.drone.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) {
  .drone.lead {
    padding: 6rem 0;
  }
}

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

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

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

.drone.lead .read-text {
  max-width: 90rem;
  margin: 4rem auto 0;
  font-size: 1.6rem;
  line-height: 2;
  text-align: left;
}
.drone.lead .read-text:first-of-type {
  margin-top: 5rem;
}
@media screen and (max-width: 1023px) {
  .drone.lead .read-text {
    margin-top: 3rem;
    font-size: 1.5rem;
    line-height: 1.9;
  }
  .drone.lead .read-text:first-of-type {
    margin-top: 3.5rem;
  }
}

.drone.lead .read-text.emphasis {
  font-weight: 700;
  font-size: 1.8rem;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .drone.lead .read-text.emphasis {
    font-size: 1.6rem;
  }
}

/* ドローン点検の特徴
   ------------------------------------------------------------------------ */
.drone.features {
  padding: 8rem 0 10rem;
  background: #e2f0f8;
}
@media screen and (max-width: 1023px) {
  .drone.features {
    padding: 6rem 0;
  }
}

.drone.features .ttl {
  font-size: 2.8rem;
  font-weight: 700;
  text-align: center;
}
span.primary {  display: block;
  padding: 2rem 0 0;
  font-size: 3.6rem;
  line-height: 1.1666666667;
  text-decoration: underline;
  text-decoration-color: #d6e7ba;
  text-decoration-thickness: 1.9rem;
  text-underline-offset: -2rem;
}

@media screen and (max-width: 1023px) {
  .drone.features .ttl {
    font-size: 2.4rem;
  }
}

.drone.features .lead-text {
  max-width: 90rem;
  margin: 3rem auto 0;
  font-size: 1.6rem;
  line-height: 1.9;
  text-align: left;
}
.drone.features .lead-text:first-of-type {
  margin-top: 4rem;
}

.drone.features .lead-text.note {
  font-size: 1.3rem;
  color: #555;
}

.drone.features .merit-box {
  max-width: 84rem;
  margin: 6rem auto 0;
  padding: 6rem 6rem;
  background: #fff;
  border-radius: 2.5rem;
}
@media screen and (max-width: 1023px) {
  .drone.features .merit-box {
    margin-top: 5rem;
    padding: 4rem 2.5rem;
  }
}

.drone.features .merit-box .sttl {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .drone.features .merit-box .sttl {
    font-size: 1.9rem;
  }
}

.drone.features .check-list {
  margin: 3rem 0 0;
}

.drone.features .check-list li {
  padding: 1.2rem 0 1.2rem 3.6rem;
  background: url(../img/exterior_reform_blt02.png) 0 1.5rem/2.4rem auto no-repeat;
  font-size: 1.6rem;
  line-height: 1.6;
}

.drone.features .check-list strong {
  color: #0e86c2;
  font-weight: 700;
}

.drone.features .photo-row {
  display: flex;
  gap: 2rem;
  margin: 6rem 0 0;
}
@media screen and (max-width: 1023px) {
  .drone.features .photo-row {
    display: block;
    margin-top: 4rem;
  }
}

.drone.features .photo-row {
  flex-wrap: wrap;
}

.drone.features .photo-row .image {
  width: calc((100% - 2rem) / 2);
}
@media screen and (max-width: 1023px) {
  .drone.features .photo-row .image {
    width: auto;
  }
  .drone.features .photo-row .image + .image {
    margin-top: 2rem;
  }
}

.drone.features .photo-row .image img {
  display: block;
  width: 100%;
  border-radius: 1.5rem;
}

/* お住まいの状態に合わせた点検を / 国土交通省の飛行許可
   ------------------------------------------------------------------------ */
.drone.diagnosis {
  padding: 8rem 0 0;
  background: #fff;
}
@media screen and (max-width: 1023px) {
  .drone.diagnosis {
    padding: 6rem 0 0;
  }
}

.drone.diagnosis .condition {
  max-width: 90rem;
  margin: 0 auto;
  padding: 6rem;
  background: #e2f0f8;
  border-radius: 2.5rem;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .drone.diagnosis .condition {
    padding: 4rem 2rem;
  }
}

.drone.diagnosis .condition .ttl {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 1023px) {
  .drone.diagnosis .condition .ttl {
    font-size: 2.2rem;
  }
}

.drone.diagnosis .condition p {
  margin: 3rem 0 0;
  font-size: 1.5rem;
  line-height: 1.9;
  text-align: left;
}

.drone.diagnosis .license {
  margin: 10rem calc(-50vw + 50%) 0;
  padding: 6rem calc(50vw - 50%);
  background: #e2f0f8;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .drone.diagnosis .license {
    margin-top: 7rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.drone.diagnosis .license .ttl {
  font-weight: 700;
}

.drone.diagnosis .license .secondary {
  display: block;
  font-size: 2.2rem;
}

.drone.diagnosis .license .primary {
  display: block;
  padding: 2rem 0 0;
  font-size: 3rem;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-color: #d6e7ba;
  text-decoration-thickness: 1.6rem;
  text-underline-offset: -1.7rem;
}
@media screen and (max-width: 1023px) {
  .drone.diagnosis .license .primary {
    font-size: 2.4rem;
    text-decoration-thickness: 1.2rem;
    text-underline-offset: -1.3rem;
  }
}

.drone.diagnosis .license .image {
  max-width: 60rem;
  margin: 5rem auto 0;
}
@media screen and (max-width: 1023px) {
  .drone.diagnosis .license .image {
    margin-top: 4rem;
  }
}

.drone.diagnosis .license .image img {
  display: block;
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.15);
}

.drone.diagnosis .license p {
  max-width: 90rem;
  margin: 3rem auto 0;
  font-size: 1.5rem;
  line-height: 1.9;
  text-align: left;
}
.drone.diagnosis .license p:first-of-type {
  margin-top: 5rem;
}

/* 「屋根、大丈夫かな？」と思ったら、お気軽にご相談ください（CTA）
   ------------------------------------------------------------------------ */
.drone.cta {
  margin: 0 calc(-50vw + 50%) 0;
  padding: 8rem calc(50vw - 50%);
  background: #0e86c2;
}
@media screen and (max-width: 1023px) {
  .drone.cta {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.drone.cta .ttl {
  color: #fff;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .drone.cta .ttl {
    font-size: 2.1rem;
  }
}

.drone.cta .inner {
  max-width: 84rem;
  margin: 5rem auto 0;
  padding: 6rem;
  background: #fff;
  border-radius: 2.5rem;
}
@media screen and (max-width: 1023px) {
  .drone.cta .inner {
    margin-top: 4rem;
    padding: 4rem 2.5rem;
  }
}

.drone.cta .inner p {
  font-size: 1.5rem;
  line-height: 1.9;
}
.drone.cta .inner p + p {
  margin-top: 2rem;
}

.drone.cta .inner p.emphasis {
  font-weight: 700;
  font-size: 1.7rem;
}

.drone.cta .inner .list {
  margin: 1rem 0 2rem 2rem;
  list-style: disc;
}

.drone.cta .inner .list li {
  font-size: 1.5rem;
  line-height: 1.8;
}

.drone.cta .inner strong {
  color: #0e86c2;
  font-weight: 700;
}