@charset "utf-8";
html {
    font-family: ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, Osaka, ＭＳ Ｐゴシック, ms pgothic, sans-serif;
    color: #333;
    background: #fff;
    height: 100%
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, textarea, p, th, td, section, article {
    margin: 0;
    padding: 0
}
.wrapper img {
    width: 100%;
    vertical-align: top;
    border: 0;
}
.wrapper {
    max-width: 750px;
    margin: 0 auto;
    line-height: 0;
    overflow: hidden;
}
/*q&a*/
#cont04{
    background: #d4f2fd;
    padding-bottom: 10%;
}
ul.qa_list {
    width: calc(670/750 * 100%);
    margin: 0 auto;
}
li.qa_list_item {
    padding-bottom: 4%;
}
.qa_cont{
    display: none;
}
.qa_header{
  position: relative;
  cursor: pointer;
}
.qa_header::before{
    content: "";
    right: 4.5%;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    background: url(../images/icon_plus.png);
    width: 29px;
    height: 29px;
}
.qa_header.open::before{
    background: url(../images/icon_min.png);
    width: 29px;
    height: 6px;
}
@media only screen and (max-width: 600px) {
    .qa_header::before{
        width: 15px;
        height: 15px;
        background-size: contain;
    }
    .qa_header.open::before{
        width: 15px;
        height: 3px;
        background-size: contain;
    }
}
/*cv*/
.cv-area {
    width: 100%;
    position: relative;
}
.cv-btn {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(696/750 * 100%);
}
.cv-btn a{
    position: relative;
    overflow: hidden;
    display: block;
}
.cv-btn a:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -100%;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shine 3s ease-in-out infinite;
}
@keyframes shine {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

@-webkit-keyframes shine {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
/*slide 1*/
.slide{
    padding: 11% 0 9%;
}
.slide02{
    background: url(../images/slide_bg.jpg) no-repeat;
    background-size: cover;
    padding: 11% 0 9%;
}
.slide.slide02.slick-initialized.slick-slider.slick-dotted{
    padding-top: 49%;
}
.slide02 .slick-dots{
    bottom: 1.5%;
}
.slide02 .slick-dots li button{
    background: #e3e3e3;
}
.slide02 .slick-dots li button:before{
    background: #e3e3e3;
}
.slick-dots li button{
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
}
.slick-dots li button:before{
    background: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    color: unset;
}
.slick-dots li.slick-active button:before{
    background: #0093d7;
    width: 16px;
    height: 16px;
    color: unset;
}
.slick-dots{
    bottom: 5.5%;
}
#form_upsell{
    display: none;
}
.slick-prev:before,
.slick-next:before {
    content: "";
}
.slide02 .slick-prev {
    background: url(../images/prev.png) no-repeat;
    background-size: 100% 100%;
    width: calc(19/750 * 100%);
    height: 2.4%;
    left: 28%;
    z-index: 999;
    top: 97.8%;
}
.slide02 .slick-next {
    background: url(../images/next.png) no-repeat;
    background-size: 100% 100%;
    width: calc(19/750 * 100%);
    height: 2.4%;
    right: 28%;
    z-index: 999;
    top: 97.8%;
}
.slide02 .slick-prev:hover, .slick-prev:focus{
    background: url(../images/prev.png) no-repeat;
    background-size: 100% 100%;
}
.slide02 .slick-next:hover, .slick-next:focus{
    background: url(../images/next.png) no-repeat;
    background-size: 100% 100%;
}
.slide.slide01.slick-initialized.slick-slider.slick-dotted {
    width: calc(670/750 * 100%);
    margin: 0 auto;
    padding-bottom: 13%;
    padding-top: 0;
}
.slideT{
    background: #d4f2fd;
}
@media only screen and (max-width: 600px) {
    .slide02 .slick-prev {
        background: url(../images/prev.png) no-repeat;
        background-size: 100% 100%;
        width: calc(19/750 * 100%);
        height: 2.4%;
        left: 28%;
        z-index: 999;
        top: 99%;
    }
    .slide02 .slick-next {
        background: url(../images/next.png) no-repeat;
        background-size: 100% 100%;
        width: calc(19/750 * 100%);
        height: 2.4%;
        right: 28%;
        z-index: 999;
        top: 99%;
    }
    .slide02 .slick-dots{
        bottom: 0.5%;
    }
    .slide.slide01.slick-initialized.slick-slider.slick-dotted {
        padding-bottom: 11%;
        padding-top: 0;
    }
    .slick-dots li button{
        width: 8px;
        height: 8px;
        padding: 4px;
      }
      .slick-dots li button:before{
        width: 8px;
        height: 8px;
        color: unset;
      }
      .slick-dots li.slick-active button:before{
        background: #0093d7;
        width: 8px;
        height: 8px;
        color: unset;
      }
      .slick-dots{
        bottom: 5%;
      }
      .slick-dots li{
        width: 2.5%;
        height: 2.5%;
      }
}
/*slide 2*/
#slide02{
    --scroll-gap: 30px;
    background: #d4f2fd;
}
@keyframes infiniteScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - var(--scroll-gap) / 2));
  }
}
.scroll_main{
    width: calc(670/750 * 100%);
    background: #fff;
    margin: 0 auto;
}
.scroll_wrap {
  overflow: hidden;
  margin: 0 auto;
  width: calc(600/670 * 100%);
}
.scroll_track {
  width: max-content;
  animation: infiniteScroll 18s linear infinite;

  &:hover {
    animation-play-state: paused;
  }
}
.scroll_inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 var(--scroll-gap);
  padding-top: 2px;
  padding-bottom: 2px;
}
.scroll_cont {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  min-width: 13vw;
  aspect-ratio: 1 / 1;
}
@media screen and (max-width:600px){
     .scroll_cont img {
        width: 92.5%;
        height: 100%;
        object-fit: cover;
        display:block;
    }
    .scroll_cont{
        width: 6.18%;
        transform: translateZ(0);
        aspect-ratio: 16 / 9;
    }
    #slide02{
    --scroll-gap: 0px;
    }
    .scroll_track {
        width: max-content;
        animation: infiniteScroll 18s linear infinite;
        transform: translate3d(0,0,0);
        will-change: transform;
    }
    .scroll_wrap {
        overflow: hidden;
    }
}
/*floating*/
.bottom-cv {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    transform: translateY(100%);
    transition: transform .4s linear 0s;
}
.bottom-cv img{
  width: auto;
  max-width: 100%;
}
.bottom-cv.is-show {
  transform: translateY(0);
}
@media screen and (max-width:750px){
  .bottom-cv{
    width: 100%;
  }
}