/************************************************************

  common

 *************************************************************/

 main {
  background-color: #fff;
  color: #333;
 }

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none
}

a:hover,
a:hover img,
button:hover {
  opacity: 0.7;
}

section+section {
  padding: 80px 0;
}

.content {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1300px;
    padding: 0 16px;
    width: 100%;
}

.contBlockWrap01.no-bg::before {
  content: none;
}

/*****************************************************************

  fv

 *****************************************************************/
@media screen and (min-width:768px) {
  .fv {
    /* padding: 30px 0;
    text-align: center;
    background-image: url('/img/lp/lp-00061/img/fv_pc_bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
  }

  .fv img {
    width: 100%;
    object-fit: cover;
  }
}

@media screen and (max-width:767px) {
  .fv {}

  .fv img {}
}


/************************************************************************************

 使い方はかんたん！クーポン利用３STEP

 ***********************************************************************************/
.stepSec {
  margin-top: 80px;

  & .title {
    position: relative;
    max-width: 435px;
    margin: 0 auto;
    padding: 0 40px;

    @media screen and (max-width: 530px) {
      max-width: 260px;
    }

    &::before, &::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 50px;
      height: 50px;
      background: url('/img/lp/lp-00062-thanksday/img/titledeco.png') no-repeat center center / contain;

      @media screen and (max-width: 530px) {
        width: 43px;
        height: 43px;
      }
    }

    &::before {
      left: 0;
      transform: translateY(-50%) scaleX(-1);
    }

    &::after {
      right: 0;
      transform: translateY(-50%);
    }

    & h2 {
      font-size: 35px;
      font-weight: bold;
      color: #03A4E2;
      line-height: 55px;
      text-align: center;

      @media screen and (max-width: 530px) {
        font-size: 22px;
        line-height: 41px;
      }

      & .marker {
        font-size: 42px;
        background: linear-gradient(transparent 60%, #ffff99 60%);
        display: inline-block;
        vertical-align: middle;

        @media screen and (max-width: 530px) {
          font-size: 29px;
        }
      }

      & .big {
        font-size: 65px;
        display: inline-block;
        vertical-align: bottom;
        line-height: 1;
        background: linear-gradient(transparent 66%, #ffff99 66%);

        @media screen and (max-width: 530px) {
          font-size: 48px;
        }
      }
    }
  }

  & .step-list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    list-style: none;
    margin-top: 30px;

    @media screen and (max-width: 896px) {
      flex-direction: column;
      align-items: center;
    }

    & .step-card {
      position: relative;
      width: 320px;
      margin-top: 30px;

      &:not(:last-child)::after {
        content: "▶";
        position: absolute;
        right: -31px;
        top: 50%;
        transform: translateY(-50%);
        color: #f7d100;
        font-size: 20px;

        @media screen and (max-width: 896px) {
          content: "▼";
          right: 50%;
          top: auto;
          bottom: -45px;
          transform: translateX(50%);
        }
      }

      & .step-badge {
        position: absolute;
        top: -36px;
        left: 19px;
        display: flex;
        align-items: baseline;
        z-index: 10;
        font-weight: bold;
        color: #f7d100;

        & .step-text {
          font-size: 31px;
          letter-spacing: 1px;
          text-shadow: 
            -1.5px -1.5px 0 #fff,  
            1.5px -1.5px 0 #fff,
            -1.5px  1.5px 0 #fff,
            1.5px  1.5px 0 #fff;
        }

        & .step-num {
          font-size: 51px;
          line-height: 1;
          text-shadow: 
            -1.5px -1.5px 0 #fff,  
            1.5px -1.5px 0 #fff,
            -1.5px  1.5px 0 #fff,
            1.5px  1.5px 0 #fff;
        }
      }

      & .step-content {
        border: 4px solid #00a4e4;
        border-radius: 24px;
        background: #eaf8ff;
        padding: 20px 20px 24px;
        text-align: center;
        box-sizing: border-box;
        min-height: 265px;
        position: relative;
        overflow: hidden;
        z-index: 1;

        &::before {
          content: "";
          position: absolute;
          width: 200%;
          height: 180%;
          bottom: -110%;
          left: -50%;
          background-color: #fff;
          border-radius: 50%;
          z-index: -1;
        }

        & .step-img-box {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 10px;
          width: 120px;
          height: 120px;

          & img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
          }
        }

        & .step-desc {
          font-size: 16px;
          font-weight: bold;
          color: #333;
          line-height: 1.5;
          margin: 0 0 10px 0;

          & .blue {
            color: #06A8E9;
          }

          & small {
            display: block;
            font-weight: normal;
            font-size: 12px;
          }
        }
      }
    }
  }
}



/************************************************************************************

 クーポンチケット

 ***********************************************************************************/
.couponSec {
  margin-top: 50px;

  & .box {
    border: 6px solid #fede02;
    background-color: #fefff8;
    padding: 65px 20px 20px;
    border-radius: 20px;
    max-width: 900px;
    margin: 0 auto;
    background: repeating-linear-gradient(
        -45deg,
        #fffde3,
        #fffef0 12px,
        #ffffff 12px,
        #ffffff 24px
      );
    position: relative;

    @media screen and (max-width: 500px) {
      padding-top: 30px;
    }

    &::before {
      content: "";
      position: absolute;
      top: -49px;
      left: 50%;
      transform: translateX(-50%);
      width: 397px;
      height: 89px;
      background-image: url('/img/lp/lp-00062-thanksday/img/coupontitle.png');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      z-index: 1;

      @media screen and (max-width: 500px) {
        top: -39px;
        width: 288px;
        height: 60px;
      }
    }

    & .flex {
      display: flex;
      justify-content: center;
      align-items: center;

      & .off {
        width: 50%;

        @media screen and (max-width: 500px) {
          width: 40%;
        }

        & img {
          max-width: 300px;
          object-fit: contain;

          @media screen and (max-width: 896px) {
            max-width: 260px;
          }

          @media screen and (max-width: 690px) {
            max-width: 194px;
          }

          @media screen and (max-width: 500px) {
            max-width: 108px;
          }
        }
      }

      & .coupon-banner {
        width: 50%;
        display: flex;
        flex-direction: column;

        @media screen and (max-width: 500px) {
          width: 60%;
        }

        & .coupon {
          background-color: #03AAEB;
          box-shadow: 4px 4px 0 #fede02;
          color: #fff;
          border-radius: 10px;
          padding: 7px 30px 20px;
          font-size: 1.2rem;
          text-align: center;
          line-height: 32px;
          display: inline-block;
          position: relative;

          @media screen and (max-width: 690px) {
            padding: 7px 24px 17px;
            line-height: 20px;
            font-size: 1rem;
          }

          @media screen and (max-width: 500px) {
            padding: 7px 15px 10px;
            font-size: .75rem;
            line-height: 15px;
            box-shadow: 2px 2px 0 #fede02;
          }

          & .ttl {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: #ffffff;
            font-size: 16px;
            font-weight: bold;

            @media screen and (max-width: 450px) {
              font-size: 13px;
            }

            &::before,
            &::after {
              content: "";
              flex: 1;
              height: 0;
              border-bottom: 5px dotted #ffffff;

              @media screen and (max-width: 500px) {
                border-bottom: 3px dotted #ffffff;
              }
            }
          }

          & .en {
            font-size: clamp(1.1rem, 4.5vw, 3.4rem);
            /* font-size: 3.4rem; */
            font-weight: bold;
            background-color: #fff;
            color: #03AAEB;
            border-radius: 10px;
            padding: 0 25px;
          }

          & .deco {
            position: absolute;
            width: 95px;
            height: 95px;
            object-fit: contain;
            top: 64px;
            right: -15px;

            @media screen and (max-width: 896px) {
              width: 75px;
              height: 75px;
            }

            @media screen and (max-width: 690px) {
              width: 60px;
              height: 60px;
              top: 50px;
            }

            @media screen and (max-width: 500px) {
              width: 45px;
              height: 45px;
              top: 33px;
              right: -10px;
            }
          }
        }

        & .copy-guide {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          font-weight: bold;
          cursor: pointer;
          background-color: #fff;
          margin: 10px auto 0;
          width: fit-content;
          padding: 5px 20px;
          border-radius: 30px;
          color: #03AAEB;
          border: 2px solid #fede02;

          & .copy-icon {
            width: 18px;
            height: 18px;
            object-fit: contain;
          }

          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }

  /* & .box {
    background-color: #0065B3;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 20px;

    & .bg {
      position: relative;

      & .bgImg {
        width: 100%;
        max-width: 800px;
        object-fit: contain;
        z-index: -1;
      }

      & .txtBox {
        position: absolute;
        top: 47.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 525px;

        & .ttl {
        }

        & .txt {
          color: #0065B3;
          text-shadow: 
            3px 4px 0 #FEE800;
          font-weight: bold;
          font-size: 5rem;
          line-height: 130px;
          border-bottom: 3px dashed #0065B3;
          margin-bottom: 25px;

          & .num {
            font-size: 10rem;
          }
        }

        & .coupon {
          background-color: #03AAEB;
          color: #fff;
          border-radius: 30px;
          padding: 7px 0 10px;
          font-size: 1.2rem;
          position: relative;

          & .en {
            font-size: 1.8rem;
            font-weight: bold;
          }

          & .deco {
            position: absolute;
            width: 70px;
            height: 70px;
            object-fit: contain;
            top: 3px;
            right: -14px;
          }
        }
      }
    }
  } */
}

.more_btn {
  margin-top: 30px;

  & .btn {
    display: inline-block;
    background-color: #0062ac;
    color: #fff !important;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 50px;
    transition: opacity 0.2s;
    width: 252px;

    &:hover {
      opacity: 0.8;
    }
  }
}

/************************************************************************************

  キャンペーンについて

 *************************************************************************************/
.campaignSec {
  background-color: #EAF8FF;
  padding: 20px 0 40px;
  margin: 90px auto;
  position: relative;

  @media screen and (max-width: 639px) {
    margin: 20px auto;
  }
  
  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 150px;
    background-image: url('/img/lp/lp-00062-thanksday/img/wave.svg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;

    @media screen and (max-width: 639px) {
      height: 74px;
    }
  }

  &::before {
    top: -141px;

    @media screen and (max-width: 639px) {
      top: -73px;
    }
  }

  &::after {
    bottom: -141px;
    transform: rotate(180deg);

    @media screen and (max-width: 639px) {
      bottom: -73px;
    }
  }

  & .title {
    position: relative;
    max-width: 435px;
    margin: 0 auto;
    padding: 0 40px;

    @media screen and (max-width: 530px) {
      max-width: 260px;
    }

    &::before, &::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 50px;
      height: 50px;
      background: url('/img/lp/lp-00062-thanksday/img/titledeco.png') no-repeat center center / contain;

      @media screen and (max-width: 530px) {
        width: 43px;
        height: 43px;
      }
    }

    &::before {
      left: 0;
      transform: translateY(-50%) scaleX(-1);
    }

    &::after {
      right: 0;
      transform: translateY(-50%);
    }

    & h2 {

    & .marker {
      font-size: 35px;
      font-weight: bold;
      color: #03A4E2;
      line-height: 55px;
      text-align: center;
      background: linear-gradient(transparent 60%, #ffff99 60%);
      display: inline-block;
      vertical-align: middle;

      @media screen and (max-width: 530px) {
        font-size: 25px;
        line-height: 42px;
      }
      }
    }
  }


  & .box {
    background-color: #fff;
    border-radius: 20px;
    margin: 30px auto 0;
    padding: 25px 20px;
    max-width: 900px;

    .campaign-detail-list {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;

      & .detail-row {
        display: flex;
        align-items: stretch;
        padding: 20px 0;

        @media screen and (max-width: 896px) {
          flex-direction: column;
        }
    
        &:not(:last-child) {
          border-bottom: 2px dashed #0062ac;
        }

        & .detail-label {
          width: 200px;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          font-size: 16px;
          font-weight: bold;
          color: #0062ac;
          padding-left: 25px;
          border-right: 2px dashed #0062ac;

          @media screen and (max-width: 896px) {
            border-right: unset;
            border-left: 4px solid #0062ac;
            padding-left: 7px;
            margin-bottom: 8px;
          }
        }

        & .detail-value {
          flex-grow: 1;
          margin: 0;
          padding-left: 40px;
          font-size: 14px;
          color: #333;
          line-height: 1.6;
          text-align: left;

          @media screen and (max-width: 896px) {
            padding-left: 13px;
          }

         & ul {
            margin: 0;
            padding-left: 1.2em;
            list-style-type: "・";
            
            li {
              margin-bottom: 4px;

              &:last-child {
                margin-bottom: 0;
              }

              & a {
                text-decoration: underline;
              }
            }
          }
        }

        & .pink {
          color: #FF65A7;
          font-weight: bold;
          font-size: 20px;

          & .big {
            font-size: 27px;
            padding-left: 5px;
          }
        }

        & .pink_note {
          font-size: 14px;
          color: #FF65A7;
          font-weight: bold;
        }
      }
    }
  }
}

/************************************************************************************

  フッター

 *************************************************************************************/
 .contBtn02 {
  margin-top: 0;
  padding-bottom: 60px;
 }

/************************************************************************************

  キャンペーンカルーセル

 *************************************************************************************/

 .sliderSec{
  padding-top: 30px;

  @media screen and (max-width: 500px) {
    padding-top: 0;
  }

    & .title {
    position: relative;
    max-width: 435px;
    margin: 0 auto;
    padding: 0 40px;

    @media screen and (max-width: 530px) {
      max-width: 260px;
    }

    &::before, &::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 50px;
      height: 50px;
      background: url('/img/lp/lp-00062-thanksday/img/titledeco.png') no-repeat center center / contain;

      @media screen and (max-width: 530px) {
        width: 43px;
        height: 43px;
      }
    }

    &::before {
      left: 0;
      transform: translateY(-50%) scaleX(-1);
    }

    &::after {
      right: 0;
      transform: translateY(-50%);
    }

    & h2 {
      font-size: 24px;
      font-weight: bold;
      color: #03A4E2;
      line-height: 42px;
      text-align: center;

      @media screen and (max-width: 530px) {
        font-size: 18px;
        line-height: 30px;
      }

      & .marker {
        font-size: 30px;
        background: linear-gradient(transparent 60%, #ffff99 60%);
        display: inline-block;
        vertical-align: middle;

        @media screen and (max-width: 530px) {
          font-size: 20px;
        }
      }
    }
  }
 }

.lp_cp_bnr_slick {
  width: 90%;
  max-width: 1000px;
  margin: 30px auto;
  opacity: 0;
  transition: opacity .3s linear;
}

.lp_cp_bnr_slick.slick-initialized {
  opacity: 1;
}

.lp_cp_bnr_slick_item {
  margin: 0 10px;
}

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

  .slick-prev {
    left: -15px;
  }

  .slick-next {
    right: -15px;
  }

}

.slick-prev::before,
.slick-next::before {
  color: #ccc;
}

.slick-dots li button::before {
  font-size: 10px;
}

@media (min-width:768px) {
  .service .service_content {
    display: block;
  }
}

.modal .modal_swipe.is-open .modal_swipe_inner {
  box-sizing: border-box;
}

/************************************************************************************

  お問い合わせ

 *************************************************************************************/
/* .contactSec {
  background: linear-gradient(
    to left,
    rgba(69, 184, 226, 0.47) 0%,
    rgba(68, 182, 224, 1.0) 34%,
    rgba(8, 103, 171, 1.0) 100% 
  );

  & .flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px 4%;

    & .txtBox {
      color: #fff;
      text-align: left;

      & h3 {
        font-size: 30px;
        font-weight: 500;
        letter-spacing: 0.08rem;
        margin-bottom: 10px;
      }

      & p {
        letter-spacing: 0.05rem;
      }
    }

    & .infoBox {
      background-color: #fff;
      border-radius: 10px;
      max-width: 600px;
      width: 100%;
      padding: 35px 20px;

      & .infoFlex {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px 4%;

        & .telBox {
          width: 50%;

          & a {
            display: flex;
            justify-content: center;
            align-items: center;

            & img {
              width: 38px;
              height: 38px;
              object-fit: contain;
              margin-top: 6px;
            }

            & span {
              font-weight: bold;
              font-size: 28px;
            }
          }

          & small {
            color: #848484;
            line-height: 14px;
            display: block;
          }
        }

        & .line {
          width: 1.5px;
          height: 80px;
          background-color: #ccc;
          margin: 0 4px;
        }

        & .mailBox {
          width: 50%;

          & a {
          background-color: #0065B3;
          border-radius: 30px;
          padding: 10px 17px;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          gap: 7px;

            & img {
              width: 24px;
              height: 24px;
              object-fit: contain;
            }

            & span {
              color: #fff;
              font-size: 20px;
            }
          }
        } 
      }
    }
  }
} */