@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");
  
  .mv_title {
    display: none;
    &.mv01_img {
      display: block;
    }
  }
  @for $i from 1 through 6 {
    &.mv0#{$i} {
      .mv0#{$i}_img {
        display: block;
      }
      @if $i > 1 {
        .mv01_img {
          display: none;
        }
      }
      @if $i == 2 {
        background: url(../images/FV2_bg_pc.png) #d8f2ff left top / auto 100% repeat-x;
        .inner {
          max-width: calc(1000 / var(--artboard-size) * var(--scale));
        }
        & + .btn_area{
          padding-top: calc(50/var(--artboard-size)*var(--scale));
        }
      }
      @if $i >= 4 {
        background: #d8f2ff;
        padding: calc(25 / var(--artboard-size) * var(--scale)) 0;
        .mv_title {
          margin-right: -9%;
        }
        @media (max-width: 767.98px) {
          & + .btn_area{
            margin-top: ;
          }
        }
      }
      @if $i == 4 {
        padding-top: 0;
      }
      @if $i == 5 {
        .mv_title {
          margin-right: -13%;
        }
      }
      @media (max-width: 767.98px) {
        @if $i >= 4 {
          margin-bottom: calc(-450 / var(--artboard-size) * var(--scale));
          .mv_title {
            margin-right: 0;
            padding-right: 0;
          }
        }
      }
    }
  }
}
@media (max-width: 767.98px) {
  .mv {
    padding: calc(10/var(--artboard-size) * var(--scale)) 0;
    margin-bottom: calc(-20/var(--artboard-size) * var(--scale));
    background-image: url("../images/FV_bg_sp.png");
  }
  .mv.mv02 {
    background: none;
    padding: 0;
    .mv02_img {
      padding: 0;
    }
  }
}

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

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

  .cpt01 {
    picture{
      display: none;
    }
  }
  @for $i from 1 through 6 {
    &.cvr0#{$i} .cpt0#{$i}__image { display: block; }
    @if $i >= 4 {
      &.cvr0#{$i} .cpt01{
        padding-bottom: 5px;
      }
    }
  }
  .cpt02__image {
    width: min(847px, 100%);
  }
  .cpt03__image {
    width: min(449px, 100%);
  }
  .cpt04__image {
    width: min(536px, 100%);
  }
  .cpt05__image {
    width: min(500px, 100%);
  }
  .cpt06__image {
    width: min(624px, 100%);
  }
  .cvr__green{
    display: none;
    max-width: 525px;
    width: 100%;
    &:hover {
      opacity: .8;
    }
  }
  &.cvr04 .cvr__green{
    display: block;
  }
  &.cvr04 .cvr__basic,
  &.cvr04 .cvr__light{
    display: none;
  }
  &.cvr05 .cvr__light,
  &.cvr06 .cvr__light {
    display: none;
    @media (min-width: 768px) {
      .cvr__inner > .cvr__basic {
        max-width: 525px;
      }
    }
  }
  @media (max-width: 767.98px) {
    &.cvr04 .cpt01 {
      width: 86% !important;
    }
    &.cvr05 .cpt01 {
      width: 80% !important;
    }
    &.cvr06 .cpt01 {
      width: 96% !important;
    }
  }
}

.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: 20px 0 25px;
    margin-top: 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));
}