@import "style.css";
@media (max-width: 1400px) {
    .block-success .contactUs {
        padding: 15px 5% 0 0;
    }
}
@media (max-width: 1200px) {
    .block-info .d-flex {
        flex-wrap: wrap;
    }
}
@media (max-width: 768px) {
    h2, p {
        text-align: left;
    }
    h2 {
        line-height: normal;
    }
    .block-certification h2, .block-infoVideo h2, .block-sales h2 {
        margin: 0 auto 15px;
    }
    .block-certification h2, .block-infoVideo h2, .block-sales h2, .spec-list h2 {
        text-align: center;
    }
    .block-warning .d-flex, .colorSlider picture div, .block-design dl, .infoVideo, .block-spec .order-3, .sales-list, #my-form div {
        flex-wrap: wrap;
    }
    .colorSlider {
        margin: 0;
    }
    .colorSlider picture div span {
        width: 100%;
    }
    .colorSlider picture div span:first-of-type {
        padding-bottom: 60%;
    }
    .block-design dl {
        border-radius: 15px;
        overflow: hidden;
    }
    ul.infoVideo li a:before {
        opacity: 1;
    }
    .product {
        margin: 0 auto 25px;
    }
    .block-design dl dt {
        padding: 15px;
    }
    .block-spec .order-3 {
        margin: 0 auto;
        max-width: 320px;
    }
    .block-spec .order-3 li {
        width: 100%;
        max-width: calc(100% / 2);
        padding: 15px;
    }
    .sales-list {
        margin: 0 auto;
        max-width: 300px;
    }
    .sales-list li {
        padding: 0 0 30px;
    }
    .sales-list li:last-of-type {
        padding: 0;
    }
    .rakuten {
        margin: 0 auto;
        max-width: 100%;
    }
    #my-form article {
        padding: 15px 20px;
    }
    #my-form div label {
        width: 100%;
        margin: 0 0 5px;
    }
    .block-certification .container {
        padding: 0 8%;
    }
    .block-certification {
        padding: 50px 0 80px;
    }
    .block-certification h2, .block-infoVideo h2 {
        text-align: center;
    }
    .block-spec ul li {
        margin: 0 0 5px;
    }
    .product {
        max-width: 80%;
    }
}
@media (max-width: 480px) {
    #my-form .btn button i {
        display: none;
    }
    .dialogBox {
        top: 60.5%;
    }
}
@media (min-width: 768px) {
    body {
        font-size: 20px;
    }
    .block-hero {
        background-position: right 50%;
        background-size: 118% auto;
    }
    .dialogBox {
        top: 72%;
        left: 48%;
    }
    .dialogBox p {
        font-size: 1.8vw;
    }
    .dialogBox p:after {
        border-width: 0 1.25vw 2vw;
    }
    .block-hero .container {
        padding: 10% 0 5%;
        height: 64vw;
        display: flex;
        flex-wrap: wrap;
        font-size: 1.75vw;
    }
    h1 {
        text-align: center;
        position: relative;
        top: 8%;
        left: 46%;
        transform: translateX(-50%);
        margin: 0;
        width: 100%;
        font-size: 280%;
        line-height: 1.25;
    }
    .block-hero {
        background-position: right center;
        background-size: cover;
        background-image: url("../img/hero.jpg");
        background-image: -webkit-image-set(url(../img/hero.webp) 1x);
    }
    .features-list {
        width: 100%;
    }
    .features-list ul {
        list-style: none;
        padding: 0;
    }
    .features-list ul li {
        width: calc(100% / 3);
        padding: 0 15px;
    }
    .features-list ul li div {
        font-size: 120%;
    }
    .min-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .block-warning dl dt {
        padding-right: 7%;
    }
    .block-warning dl dd {
        max-width: 420px;
    }
    .block-design dl dt {
        padding: 0 4%;
    }
    .block-design dl dt {
        max-width: 55%;
    }
    .block-design dl dd figure img {
        overflow: hidden;
        border-radius: 15px;
        border: 5px solid #f6f6f6;
    }
    ul.agingSlider {
        list-style: none;
        padding: 00;
    }
    ul.agingSlider li {
        width: calc(100% /4);
        padding: 0 15px;
        opacity: 0;
        transform: translateY(100%);
        transition: all .5s ease-out;
    }
    .block-warning dl dd {
        margin-top: 0;
    }
    .delighter.agingSlider.started li {
        opacity: 1;
        transform: none;
    }
    .delighter.agingSlider.started li:nth-child(1) {
        transition: all .5s ease-out .1s;
    }
    .delighter.agingSlider.started li:nth-child(2) {
        transition: all .5s ease-out .3s;
    }
    .delighter.agingSlider.started li:nth-child(3) {
        transition: all .5s ease-out .5s;
    }
    .delighter.agingSlider.started li:nth-child(4) {
        transition: all .5s ease-out .7s;
    }
    ul.order-3 li {
        opacity: 0;
        transform: translateX(-100%);
        transition: all .5s ease-out;
    }
    ul.infoVideo li a:hover:after, ul.infoVideo li a:hover:before {
        opacity: 1;
    }
    .block-info {}
    .block-info .container {
        justify-content: flex-end;
    }
    .block-info .container article {
        text-align: center;
        max-width: 100%;
        position: relative;
    }
    ul.stepSlider h2 {
        position: absolute;
        top: 10%;
        left: 0;
        width: 100%;
    }
    ul.certificationSlider, ul.infoVideo {
        margin: 0 -15px;
    }
    ul.certificationSlider li {
        width: calc(100% / 3);
        padding: 0 15px;
    }
    ul.infoVideo {
        margin: 0 -25px;
    }
    ul.infoVideo li {
        width: calc(100% / 2);
        padding: 0 25px;
    }
    .block-spec .container {
        display: grid;
        grid-template-columns: 50% 2fr;
        grid-template-rows: auto 1fr;
        padding-right: 7%;
        align-items: center;
    }
    .block-spec .spec-list {
        grid-row: 1 / 3;
    }
    .block-spec ol {
        margin: 50px 0 0;
    }
    .block-spec ol li {
        width: calc(100% / 4);
    }
    .block-spec ol li img {
        max-width: 55%;
    }
    ul.sales-list {
        margin: 0 -15px;
    }
    ul.sales-list li {
        width: calc(100% / 3);
        padding: 0 15px;
    }
    .block-form p span {
        display: block;
    }
    .block-sales a:hover img {
        transform: scale(1.05);
    }
    #my-form .btn button:hover {
        color: #00a29a;
        background-color: #fff;
        border-color: #00a29a;
    }
    .block-design {
        padding: 140px 0;
    }
    .block-design dl:after {
        left: 0;
        height: 130%;
        width: 90%;
    }
    .block-design dl dd img {
        box-shadow: 8px 8px 24px rgba(0, 0, 0, .5);
    }
    .buyNow a {
        max-width: 362px;
    }
    .buyNow a span {
        font-size: 28px;
    }
    .buyNow a i {
        font-size: 70%;
    }
    .bounce2:hover {
        animation: bounce2 2s ease infinite;
    }
    .block-spec .container {
        border-bottom: 1px solid #fff;
        padding: 0 0 70px;
    }
     .buyNow {
        padding: 80px 0;
    }
    .block-introduce {
        background-position: center top;
        background-size: 1024px auto;
        background-image: url(../img/introduce_mediu.jpg);
        background-image: -webkit-image-set(url(../img/introduce_mediu.webp) 1x);
        padding: 650px 0 50px;
    }
    .block-success .contactUs {
        max-width: 100%;
    }
    .block-success .contactUs a:hover {
        color: #d0343a;
        background-color: #fff;
        border-color: #d0343a;
    }
    .block-success .row {
        padding-left: 0;
        max-width: none;
    }
    .block-success .success_copy {
        margin: 0 auto;
        padding: 0 0 30px;
        width: 90%;
    }
    .block-success .success_picture {
        padding-top: 445px;
    }
    .block-success .success_picture:after {
        background-position: right top;
        background-size: 100% auto;
        background-image: url(../img/success_medium.png);
        background-image: -webkit-image-set(url(../img/success_medium.webp) 1x);
        width: 980px;
        left: calc(59% + 74px);
        transform: translateX(-50%);
    }
    .certificationSlider:first-of-type {
        margin-bottom: 50px;
    }
}
@media (min-width: 1024px) {
    .block-introduce {
        height: 50vw;
    }
    .block-introduce {
        height: 50vw;
        background-size: cover;
        background-image: url(../img/introduce.jpg);
        background-image: -webkit-image-set(url(../img/introduce.webp) 1x);
        padding: 0;
        background-attachment: fixed;
    }
    .block-introduce .row article {
        max-width: 50%;
    }
}
@media (min-width: 1200px) {
    section {
        padding: 70px 0;
    }
    .block-spec {
        padding: 70px 0 0 !important;
    }
    h2 span {
        display: block;
    }
    .block-hero .container {
        padding: 6% 0 4%;
        font-size: 1.5vw;
        height: 58vw;
    }
    .block-info .container article {
        max-width: 56%;
    }
    .block-info {
        background-position: center top;
        background-size: cover;
        padding: 70px 0 30px;
        height: 48vw;
        background-attachment: fixed;
        background-image: url(../img/info.jpg);
        background-image: -webkit-image-set(url(../img/info.webp) 1x);
    }
}
@media (min-width: 1280px) {
    .block-success .row {
        width: 100%;
        padding: 0 0 0 5%;
    }
    .block-success .success_copy {
        width: 100%;
        flex: 1;
        padding: 0 90px 0 0;
        max-width: none;
        order: 1;
    }
    .block-success .success_picture {
        max-width: 48%;
        padding-top: 24%;
        order: 2;
    }
    .block-success .success_picture:after {
        background-position: left top;
        background-size: 130% auto;
        left: 0;
        transform: none;
        width: 100%;
    }
}
@media (min-width: 1400px) {
    body {
        font-size: 21px;
    }
    .features-list ul li div {
        font-size: 85%;
    }
    .block-info .container article {
        top: 105%;
    }
    .block-success .row {
        padding-left: 0%;
        width: 90%;
    }
    .block-success picture {
        margin-right: -4%;
    }
}
@media (min-width: 1920px) {
    .block-introduce {
        height: 650px;
        background-position: left 38%;
    }
    .block-success .row {
        align-items: flex-start;
    }
    .block-success .success_picture {
        padding-top: calc(15.5% + 70px);
    }
    .block-success .success_picture:after {
        background-size: 100% auto;
    }
    .block-success .contactUs {
        text-align: left;
    }
}