@use "sass:math";
@use "sass:meta";
@use "./abstracts" as *;
@use "./base" as *;
@use "./utility" as *;
@use "./layouts" as *;
@use "./components/" as *;

/* pages */
@use "./pages/top" as *;
/* Image-coded layout
   The exported artwork is the source of truth. Interactive controls (tabs, CTA
   links and FAQ answers) remain as HTML so their behaviour and links are kept. */
.image-code-source {
  display: block;
  width: 100%;
  margin: 0 auto;

  img {
    display: block;
    max-width: 85%;
    height: auto;
    margin: 0 auto;
  }
}

.worries {
  > .inner {
    width: min(100%, 1280px);
    max-width: none;
    padding: 0;

    // > :not(.worries-image-code) {
    //   display: none !important;
    // }
  }
}

.worries-image-code {
  &__intro {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: none;
    transform: translateX(-50%);
    background-color: #ddf1ff;

    > .image-code-source {
      max-width: 1280px;
    }
  }

  &__visual {
    position: relative;
    width: 100%;
    max-width: none;
    max-height: 465px;
    margin: 0 auto;
    overflow: hidden;

    > img:not(.worries-image-code__wave) {
      display: block;
      width: min(86%, 960px);
      height: auto;
      margin: 0 auto;
    }
  }

  &__wave {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100vw;
    max-width: none;
    height: auto;
    transform: translateX(-50%);
    z-index: 2;
  }
}

@media (min-width: 768px) {
  .worries-image-code.tab-bodys {
    padding-top: 40px;
  }

  .strengths {
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
}

.reason,
.card,
.claim,
.example {
  > .inner {
    width: min(100%, 1280px);
    max-width: none;
    padding: 0;

    // > :not(.image-code-source) {
    //   display: none !important;
    // }
  }
}

.coverage .image-code-heading {
  ~ .coverage_ttl,
  ~ .lead {
    display: none;
  }
}

@media (max-width: 767px) {
  .worries {
    > .inner {
      width: 100%;
    }
  }

  .worries-image-code__intro {
    left: auto;
    width: 100%;
    transform: none;
    background-color: transparent;
  }

  .reason,
  .card,
  .claim,
  .example {
    > .inner {
      width: 100%;
      margin-inline: 0;
    }
  }

  .flow > .inner {
    width: 100%;
    margin-inline: 0;
  }
}

.footer-note-image {
  display: block;
  width: min(100%, 960px);
  margin: 0 auto;

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 767px) {
  // body .coverage .panels .panel {
  //   overflow: hidden;
  //   margin-bottom: 7px;
  //   border: 1px solid #eee5cb;
  //   border-radius: 10px !important;
  //   box-shadow: 0 7px 0 #c4b89b !important;
  // }
}

.faq .accordion-head .ttl {
  picture,
  img {
    display: block;
    max-width: 100%;
  }

  img {
    width: auto;
    height: auto;
  }
}

.cvr {
  .cpt01--image {
    &::before,
    &::after {
      display: none;
    }
  }

  .cpt01__image {
    display: block;
    width: min(421px, 100%);

    img {
      display: block;
      width: 100%;
      height: auto;
    }

    .cpt02__image {
      display: block;
      width: min(830px, 100%);
    }
      img {
        display: block;
        width: 100%;
        height: auto;
      }
  }
}

// .products_mustread {
//   .accordion-body {
//     > :not(.products-mustread-image) {
//       display: none !important;
//     }
//   }
// }

.products-mustread-image {
  &,
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

// .coverage-slider .panel {
//   > :not(.carousel-panel-image) {
//     display: none !important;
//   }
// }

.carousel-panel-image {
  &,
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.timing-qa-image {
  &,
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  &--q {
    width: auto;
  }

  &--a {
    width: 100%;
  }
}

.section-title-image {
  &,
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.voice .voice_ttl--image,
.timing .timing_ttl--image {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.voice .voice_ttl--image {
  padding: 0;
}

.timing .timing_ttl--image {
  margin-bottom: calc(45 / var(--artboard-size) * var(--scale));
}

// .faq {
//   .faq_ttl--image {
//     width: min(100%, 1280px);
//     margin: 0 auto;

//     &::before,
//     &::after,
//     span {
//       display: none !important;
//     }
//   }

  .faq-heading-image,
  .faq-heading-image img,
  .faq-category-title--image picture,
  .faq-category-title--image img {
    display: block;
    width: 100%;
    height: auto;
  }

  // .faq-category-title--included {
  //   display: none !important;
  // }

  .category .faq-category-title--image {
    display: block;
    width: min(100%, 1280px);
    margin: 0 auto;

    &::before,
    &::after {
      display: none;
    }
  }

@media (max-width: 767px) {
  .faq .faq_ttl--image {
    width: min(100%, 750px);
  }

  .faq .category .faq-category-title--image {
    width: min(100%, 751px);
  }

  .voice .voice_ttl--image,
  .timing .timing_ttl--image {
    width: 100%;
  }

  .timing .timing_ttl--image {
    margin-bottom: 0;
  }
}

// .flow {
//   > .inner {
//     width: min(100%, 1280px);
//     max-width: none;
//     padding: 0;

//     > :not(.flow-image-code) {
//       display: none !important;
//     }
//   }
// }

.flow-image-code {
  &,
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

// Exported carousel slides already contain the background, corners and space.
// .coverage .panels {
//   padding: 0 !important;
//   background: transparent !important;
//   border-radius: 0 !important;
//   box-shadow: none !important;

//   &::before {
//     display: none !important;
//   }

//   .coverage-slider {
//     margin-top: 0 !important;
//   }

//   .item {
//     min-height: 0 !important;
//     padding: 0 !important;
//   }

//   .panel {
//     width: 100% !important;
//     height: auto !important;
//     padding: 0 !important;
//     background: transparent !important;
//     border-radius: 0 !important;
//     box-shadow: none !important;
//   }
// }

.voice-card-image {
  &,
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media (min-width: 768px) {
  .voice .tab-body-cat .panel,
  .voice .tab-body-dog .panel {
    // > :not(.voice-card-image) {
    //   display: none !important;
    // }

    width: 100%;
    height: auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }
}

@media (max-width: 767px) {
  .voice .tab-body-cat .panel,
  .voice .tab-body-dog .panel {
    // > :not(.voice-card-image) {
    //   display: none !important;
    // }

    width: 100%;
    height: auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }

  .voice .tab-body-cat .voice-card-image,
  .voice .tab-body-dog .voice-card-image {
    display: block !important;
  }
}

@media (max-width: 767px) {
  .coverage .panels .panel {
    width: 100%;
    height: auto;
  }
}

.mb_10 {
  margin-bottom: 10px;
}

.mv {
  padding: calc(50/var(--artboard-size) * var(--scale)) 0;
  background-color: #d8f2ff;
  background-image: url("../images/FV_bg_pc.png");
}
@media (max-width: 767.98px) {
  .mv {
    padding: calc(10/var(--artboard-size) * var(--scale)) 0;
    margin-bottom: calc(-160/var(--artboard-size) * var(--scale));
    background-image: url("../images/FV_bg_sp.png");
  }
}

@media (max-width: 767.98px) {
  .cvr {
      /* padding: 0 20px; */
  }
}

.btn_area {
  padding: 0 20px;
  background-color: #d8f2ff;
}

.cvr {
  margin-top:0;
  padding-bottom: 70px;
}

@media (max-width: 767.98px) {
  .btn_copy {
    width: 70% !important;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 10px;
  }
  .cvr .cvr__inner .btn img{
    height: calc(72 / var(--artboard-size) * var(--scale));;
  }
  .btn_copy2 {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }
}

.products .products_mustread dd.accordion-body{
  padding: 0 !important;
}

.coverage .panels {
  position: relative;
  width: 100%;
  padding: calc(50 / var(--artboard-size) * var(--scale)) calc(40 / var(--artboard-size) * var(--scale));
  background-color: #f0ead6;
  border-radius: calc(15 / var(--artboard-size) * var(--scale));
  box-shadow: 0 calc(10 / var(--artboard-size) * var(--scale)) 0 #bfb39d;
}

.coverage .panels .item{
  padding: 0 !important;
}

.cvr .cvr__inner .btn {
  min-height: calc(150 / var(--artboard-size) * var(--scale));
  gap: calc(10 / var(--artboard-size) * var(--scale)) !important;
  padding: calc(5 / var(--artboard-size) * var(--scale)) !important;
}

.cvr .cvr__inner .btn span {
  font-size: calc(22 / var(--artboard-size) * var(--scale)) !important;
}

.worries {
  padding-bottom: 0 !important;
}

.reason{
  padding-bottom: 0 !important;
}

.mb_50{
  margin-bottom: 50px !important;
}

.claim .pic {
  max-width: 960px;
}

.inner_claim{
  max-width: 960px !important;
  margin: 0 auto;
}

.claim .claim_ttl{
  width: 60%;
  margin: 50px auto;
}

.sticker_image{
  margin: 20px auto;
}

.claim .sticker picture img{
  width: 100% !important;
}

.footer .menu .inner .info{
  font-size: calc(20 / var(--artboard-size) * var(--scale));
}

.claim_cont{
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 20px;
}

@media (max-width: 767.98px) {
  .cvr{
    padding-bottom: 30px;
    padding-top: 50px;
    margin-top: 40px;
  }
  .mv_title{
    padding:20px;
  }
  .pet_tab>.tab-head{
    background-color: #d8f2ff;
  }
  .image-code-source img{
    max-width: 100%;
  }
  .btn_area{
    padding-left: 0;
    padding-right: 0;
  }
  .cvr .cvr__inner .btn {
    min-height: calc(170 / var(--artboard-size) * var(--scale));
}
.cv2{
    padding-top: 0;
    margin-top: 0;
}
.reason_title {
  width: 100% !important;
  padding: 20px;
}
.claim .claim_ttl{
  width: 100%;
  padding: 0 20px;
  margin: 20px auto;
}
.pd_20{
  padding: 20px;
  margin: 0 auto;
}
.Q1{
  width: 90%;
}
.Q2{
  width: 71%;
}
.Q3{
  width: 79%;
}
.flow{
  padding: 100px 20px 20px 20px;
}
.pet_tab>.tab-head .tab-btn {
  height: calc(150 / var(--artboard-size) * var(--scale));
}
}

.reason_title {
  width: 60%;
  margin: 0 auto;
}
#strengths{
  background-color: #fff;
}

.pet_tab>.tab-head .tab-btn {
  height: calc(130 / var(--artboard-size) * var(--scale));
}

.cp_area{
  padding-top:4%;
  margin: 0 auto;
}