@charset "UTF-8";

#baby_trial {
    max-width: 750px;
    background: #fff;
    box-shadow: 0px 0px 54px 0px rgb(0 0 0 / 30%);
    overflow-x: hidden;
    margin: auto;
}

main {
    margin: auto;
}

@media screen and (max-width: 750px) {
    .inner {
        width: auto;
    }
    main {
        padding-top: 0;
    }
    footer {
        padding-bottom: 5vw;
    }
}

.fv01 {
    background-color: #fff;
    background-image: url(../img/fv_bg01_sp.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 70px;
    text-align: center;
}

.fv02 {
    background-color: #fff;
    background-image: url(../img/fv_bg02_sp.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: center;
}

.fv_tested01 {
    margin-top: 30px;
}

.fv_tested02 {
    margin-top: 20px;
}

.fv02 .caution {
    max-width: 968px;
    margin: 20px auto 0;
    padding: 0 50px;
    font-size: 12px;
    text-align: left;
}

@media screen and (max-width: 750px) {
    .fv01 {
        padding-top: 10vw;
    }
    .fv02 {
        padding: 10vw 0;
        background-image: url(../img/fv_bg02_sp.png);
    }
    .fv02 .caution {
        padding: 0 8%;
    }
    .fv_tested01 {
        margin-top: 0;
    }
    .fv_tested02 {
        margin-top: 0;
    }
}

.damage01 {
    background-color: #fff;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
    padding: 80px 0;
    text-align: center;
}

.lazyloaded.damage01 {
    background-image: url(../img/damage_bg01_sp.png);
}

.damage01_arrow {
    width: 200px;
    margin: 50px auto 0;
}

.damage02 {
    background-color: #fff;
    background-repeat: repeat;
    background-position: top center;
    background-size: 2%;
    text-align: center;
}

.lazyloaded.damage02 {
    background-image: url(../img/damage_bg02.png);
}

.damage02::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: 23%;
    background-repeat: no-repeat;
    background-size: cover;
}

.lazyloaded.damage02::after {
    background-image: url(../img/damage_bg02_arrow_sp.png);
}

@media screen and (max-width: 750px) {
    .damage01 {
        background-size: cover;
        padding: 10vw 0;
    }
    .damage01_arrow {
        margin: 8vw auto 0;
        width: 30%;
    }
    .damage02 {
        background-size: 4%;
    }
    .damage02_inner {
        padding-bottom: 10vw;
    }
}

.development01 {
    background-color: #fff;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 100px;
    text-align: center;
}

.development02 {
    margin: 40px auto 0;
    padding-bottom: 40px;
    position: relative;
    background-size: cover;
    text-align: center;
}

.lazyloaded.development02 {
    background-image: url(../img/development_bg02_sp.png);
}

.development02 .box {
    max-width: 1000px;
    margin: auto;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
}

.development02 .text1 {
    margin: 40px auto 60px;
}

.development02 .bg {
    padding-top: 440px;
}

.development02 .dev02_title {
    width: 72%;
    margin: auto;
}

@media screen and (max-width: 750px) {
    .development01 {
        padding-top: 10vw;
        max-width: 100%;
    }
    .development02 {
        margin: 0 auto;
        padding-bottom: 0;
    }
    .development02 .box {
        left: 0;
        right: 0;
        top: 8vw;
    }
    .development02 .text1 {
        margin: 6vw auto 8vw;
    }
    .development02 .bg {
        padding-top: 67vw;
    }
}

.figure03 {
    max-width: 1000px;
    margin: auto;
    padding-top: 80px;
}

.figure03 .image {
    width: 68%;
    margin: auto;
}

.figure03 .caution {
    margin-top: 20px;
    font-size: 12px;
    text-align: left;
}

.figure04 {
    width: 1000px;
    margin: auto;
    padding: 210px 0 30px;
    position: relative;
}

.figure04 h3 {
    position: absolute;
    z-index: 1;
    width: 64%;
    top: 13%;
    left: 18%;
}

.figure04 .text1 {
    position: absolute;
    z-index: 1;
    width: 39%;
    top: 54%;
    right: 6%;
}

.figure04 .caution {
    display: block;
    color: #756c67;
    font-size: 12px;
    margin-top: 1em;
    margin-left: 1em;
}

.figure03 {
    max-width: 100%;
    padding: 10% 0 5%;
}

.figure03 .image {
    width: 100%;
}

.figure03 .caution {
    font-size: clamp(10px, 2.6vw, 18px);
    margin: 5% 10% auto;
}

.figure04 {
    width: 100%;
    max-width: 100%;
    padding: 37% 0 7%;
}

.figure04 h3 {
    width: 100%;
    top: 6%;
    left: 0%;
}

.figure04 .text1 {
    width: 100%;
    top: 46%;
    right: 0%;
}

.figure04 .caution {
    font-size: clamp(10px, 2.6vw, 19px);
    padding-left: 48%;
    padding-right: 4%;
}

.verification {
    padding: 60px 0;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

.lazyloaded.verification {
    background-image: url(../img/verification_bg01_sp.jpg);
}

.verification_img02 {
    margin-top: 40px;
}

@media screen and (max-width: 750px) {
    .verification {
        padding: 10vw 0;
    }
    .verification_img02 {
        margin-top: 10%;
    }
}

.point01 {
    text-align: center;
}

.point02 {
    background-size: auto, 100% calc(100% - 120px);
    background-repeat: no-repeat, no-repeat;
    background-position: top 380px center, top 120px center;
    padding-bottom: 340px;
    position: relative;
    z-index: 1;
    text-align: center;
}

.lazyloaded.point02 {
    background-image: url(../img/test.png), url(../img/sec13_bg01_sp.png);
}

.point03 {
    background-size: auto, 100% calc(100% - 120px);
    background-repeat: no-repeat, no-repeat;
    background-position: top 40px right, top 40px center;
    padding-bottom: 230px;
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: -340px;
}

.lazyloaded.point03 {
    background-image: url(../img/point_bg03_sp.png), url(../img/point_bg04_sp.png);
}

.point04 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top 40px left;
    padding-bottom: 230px;
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: -230px;
}

.lazyloaded.point04 {
    background-image: url(../img/point_bg05_sp.png);
}

.point05 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top 40px left;
    padding-bottom: 230px;
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: -230px;
}

.lazyloaded.point05 {
    background-image: url(../img/point_bg06_sp.png);
}

.point06 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top 40px left;
    padding-bottom: 30px;
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: -230px;
}

.lazyloaded.point06 {
    background-image: url(../img/point_bg07_sp.png);
}

.point07 {
    background-color: #f8fdff;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 2;
    padding: 60px 0 80px;
}

.lazyloaded.point07 {
    background-image: url(../img/point_bg08_sp.png);
}

.point07 .inner {
    max-width: 1000px;
    margin: auto;
}

@media screen and (max-width: 750px) {
    .point02,
    .point03,
    .point04,
    .point05,
    .point06 {
        background: none;
        margin: 0;
        padding: 0;
    }
    .point07 {
        background-size: cover;
        background-position: 70%;
        padding: 10vw 0;
    }
    .lazyloaded.point07 {
        background-image: url(../img/point_bg08_sp.png);
    }
    .point07 .inner {
        margin: auto;
    }
}

.future {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 60px 0;
    text-align: center;
}

.lazyloaded.future {
    background-image: url(../img/future_bg_sp.png);
}

@media screen and (max-width: 750px) {
    .future {
        padding: 10vw 0;
    }
}

.slide ul {
    width: 100%;
    margin: auto;
    max-width: 1000px;
}

.slide ul .slick-slide {
    margin: 0 15px;
}

.slide ul .slick-slide img {
    max-width: 700px !important;
}

.slide .slick-prev {
    width: 86px;
    height: 86px;
    background: center center / 100% no-repeat;
    left: 2%;
    top: 50%;
}

.lazyloaded.slide .slick-prev {
    background-image: url(../img/arw_L.png);
}

.slide .slick-next {
    width: 86px;
    height: 86px;
    background: center center / 100% no-repeat;
    right: 2%;
    top: 50%;
}

.lazyloaded.slide .slick-next {
    background-image: url(../img/arw_R.png);
}

.slick-prev:before,
.slick-next:before {
    content: "";
}

.slide .slick-prev.slick-disabled,
.slide .slick-next.slick-disabled {
    display: none !important;
}

.slide .slick-dots {
    bottom: -40px;
}

.slide .slick-dots li button:before {
    opacity: 1;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #fb8302;
}

.slide .slick-dots li.slick-active button:before {
    opacity: 1;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fb8302;
    border: 1px solid #fb8302;
}

@media screen and (max-width: 750px) {
    .slide ul li {
        margin: 0 1vw;
    }
    .slide ul .slick-slide img {
        max-width: 72vw !important;
    }
    .slide .slick-prev {
        left: calc(50% - 46vw);
        width: 10vw;
        height: 10vw;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .slide .slick-next {
        right: calc(50% - 46vw);
        width: 10vw;
        height: 10vw;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

#sec07 {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 60px 0 80px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

#sec07.lazyloaded {
    background-image: url(../img/sec07_bg01_sp.png);
}

#sec07 h2 {
    margin-bottom: 40px;
}

@media screen and (max-width: 750px) {
    #sec07 {
        padding: 10vw 0;
    }
    #sec07 h2 {
        margin-bottom: 4vw;
    }
}

#sec08 {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    padding: 10% 0;
}

#sec08.lazyloaded {
    background-image: url(../img/sec08_bg_sp.png);
}

#sec08 h2 {
    margin-bottom: 8%;
}

#sec09 {
    background-size: 100% auto, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: top center, top center;
    padding: 300px 0 60px;
    margin-bottom: -50px;
    position: relative;
    z-index: 2;
}

#sec09.lazyloaded {
    background-image: url(../img/sec09_bg01_sp.png), url(../img/sec09_bg02_sp.png);
}

#sec09 .inner {
    max-width: 650px;
    margin: auto;
}

#sec09 .inner h2 {
    margin-bottom: 30px;
}

#sec09 .inner .img01 {
    margin-bottom: 20px;
}

#sec09 .inner .img03 {
    margin-bottom: 50px;
}

#sec09 .btn {
    text-align: center;
}

#sec09 .mv {
    max-width: 740px;
    margin: auto auto 50px;
}

#sec09 .mv .iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

#sec09 .mv .iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 750px) {
    #sec09 {
        padding: 38vw 0 10vw;
        margin-bottom: 0;
    }
    #sec09 .inner h2 {
        margin-bottom: 6vw;
    }
    #sec09 .inner .img01 {
        margin-bottom: 0;
    }
    #sec09 .inner .img03 {
        margin-bottom: 3vw;
    }
    #sec09 .btn {
        max-width: 78vw;
        margin: auto;
        text-align: center;
    }
    #sec09 .mv {
        max-width: 78vw;
        margin: auto auto 6vw;
    }
}

#sec10 {
    background-color: #fcfcfa;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding: 60px 0 80px;
}

#sec10.lazyloaded {
    background-image: url(../img/sec10_bg_sp.png);
}

#sec10 .inner {
    max-width: 650px;
    margin: auto;
}

#sec10 .inner h2 {
    margin-bottom: 72%;
}

#sec10 .inner .img01 {
    text-align: center;
}

#sec10 .slide.lazyloaded .slick-prev {
    background-image: url(../img/arw_L2.png);
}

#sec10 .slide.lazyloaded .slick-next {
    background-image: url(../img/arw_R2.png);
}

@media screen and (max-width: 750px) {
    #sec10 {
        padding: 10vw 0;
    }
    #sec10 .inner h2 {
        margin-bottom: 56vw;
    }
}

#sec13 h2 {
    margin-bottom: 20px;
    text-align: center;
}

#sec13 .bg05 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 2;
    padding: 60px 0 80px;
}

#sec13 .bg05.lazyloaded {
    background-image: url(../img/sec13_bg05_sp.png);
}

#sec13 .bg05 .inner {
    max-width: 1000px;
    margin: auto;
    text-align: center;
}

#sec13 .bg06 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 2;
    padding: 80px 0;
}

#sec13 .bg06.lazyloaded {
    background-image: url(../img/sec13_bg06_sp.png);
}

#sec13 .bg06 .inner {
    max-width: 1000px;
    margin: auto;
    text-align: center;
}

#sec13 .bg06 .img09 {
    margin-bottom: 60px;
}

@media screen and (max-width: 750px) {
    #sec13 h2 {
        margin-bottom: 4vw;
    }
    #sec13 .bg05 {
        padding: 10vw 0;
    }
    #sec13 .bg05 .inner {
        max-width: 100%;
    }
    #sec13 .bg06 {
        padding: 8vw 0 10vw;
    }
    #sec13 .bg06 .inner {
        max-width: 100%;
    }
    #sec13 .bg06 .img09 {
        margin-bottom: 2vw;
    }
}

@media only screen and (min-width:768px) { .sp { display:none !important; } }
@media only screen and (max-width:767px) { .pc { display:none !important; } }

#baby_trial img { width:100%; display:block; vertical-align:bottom; }
#baby_trial a img { transition:opacity ease 0.3s; }
#baby_trial .pr { position:relative; }
#baby_trial .pa { position:absolute; }
#baby_trial .df { display:flex; }
#baby_trial .fww { flex-wrap:wrap; }
#baby_trial .jcc { justify-content:center; }
#baby_trial .jcsb { justify-content:space-between; }
#baby_trial .jcfs { justify-content:flex-start; }
#baby_trial .aic { align-items:center; }
#baby_trial .tc { text-align:center; }
#baby_trial .hac { left:50%; transform:translateX(-50%); }

body {
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: #fffcf4;
}
body::-webkit-scrollbar { display:none; }

header {
    background: rgba(255,255,255,0.75);
    max-width: 750px;
    width: 100%;
    height: 70px;
    position: fixed;
    left: calc(50% - 375px);
    top: 0;
    padding: 0 0 0 25px;
    z-index: 999;
}

header h1 { width: 220px; }

main { margin: 0; }

#baby_trial {
    max-width: 750px;
    background: #fff;
    box-shadow: 0px 0px 54px 0px rgb(0 0 0 / 30%);
    overflow-x: hidden;
    margin: auto;
}

footer {
    height: unset;
    margin: 0 0 50px;
}

@media screen and (max-width:750px) {
    header {
        width: 100vw;
        height: 9.333vw;
        left: calc(50% - 50vw);
        padding: 0 0 0 3.333vw;
    }
    header h1 { width: 29.333vw; }
    footer { height: unset; margin: 0; }
}

.slide ul { width: 100%; left: 0%; }
.slide ul li { margin: 0 15px; }
.slide .slick-prev,
.slide .slick-next { z-index: 10; border-radius: 50%; font-size: 0; opacity: 0.8; }
.slide .slick-prev::before,
.slide .slick-next::before { display: none; }
.slide .slick-slide img { display: block; margin: auto; }
.slide .slick-dots { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; list-style: none; }
.slide .slick-dots li { background: #ffffff; width: 20px; height: 20px; border: solid 2px #ff9a37; border-radius: 50%; }
.slide .slick-dots li.slick-active { background: #ff9a37; }
.slide .slick-dots li button { display: none; }

@media screen and (max-width:750px) {
    .slide ul li { margin: 0 2.333vw; }
    .slide .slick-dots li { width: 2.667vw; height: 2.667vw; border: solid 0.267vw #ff9a37; }
}

#baby_trial .bttn { width: 79.734%; cursor: pointer; }
#baby_trial .bttn02 { bottom: 3%; }

#baby_trial .coupon { width: 97%; cursor: pointer; }
#baby_trial .coupon02 { top: 13.3vw; }

@media screen and (min-width: 750px) {
    #baby_trial .coupon02 { top: 100px; }
}

.note {
    font-size: min(16px, 3vw);
    padding: 0 6% 6%;
    margin-top: 1%;
}

#baby_trial .links div { background: url('../img/links/bg.png') center top / 100% repeat-y; }
#baby_trial .links div.branches { padding: 0 0 75px; }
#baby_trial .links div.branches ul { width: 56.533%; margin: 30px auto 0; }
#baby_trial .links div.branches ul li { margin: 0 0 30px; }
#baby_trial .links div.branches ul li:nth-child(1) { width: 96.698%; }
#baby_trial .links div.branches ul li:nth-child(2) { width: 34.434%; }
#baby_trial .links div.branches ul li:nth-child(3) { width: 27.830%; }
#baby_trial .links div.branches ul li:nth-child(4) { width: 100%; margin-bottom: 0; }
#baby_trial .links div.branches ul li a { font-size: 32px; color: #649ed5; text-decoration: underline; margin: 0 0 30px; }
#baby_trial .links div.tel { padding: 0 0 75px; }
#baby_trial .links div.tel .number { width: 65.334%; margin: 40px auto 30px; }
#baby_trial .links div.tel .txt { font-size: 24px; }
#baby_trial .links div.sns ul:nth-of-type(1) { width: 69.6%; padding: 40px 0; margin: 0 auto; }
#baby_trial .links div.sns ul:nth-of-type(2) { width: 50.0%; margin: 0 auto; }
#baby_trial .links div.sns ul:nth-of-type(1) li { width: 47.893%; }
#baby_trial .links div.sns ul:nth-of-type(2) li { width: 24.268%; }
#baby_trial footer .logo { width: 46.668%; padding: 50px 0; margin: 0 26.5%; }
#baby_trial footer small { font-size: 20px; }

@media screen and (max-width:750px) {
    #baby_trial .links div.branches { padding: 0 0 10vw; }
    #baby_trial .links div.branches ul { margin: 4vw auto 0; }
    #baby_trial .links div.branches ul li { margin: 0 0 4vw; }
    #baby_trial .links div.branches ul li a { font-size: 4.267vw; margin: 0 0 4vw; }
    #baby_trial .links div.tel { padding: 0 0 10vw; }
    #baby_trial .links div.tel .number { margin: 5.333vw auto 4vw; }
    #baby_trial .links div.tel .txt { font-size: 3.2vw; }
    #baby_trial .links div.sns ul:nth-of-type(1) { padding: 5.333vw 0; }
    #baby_trial footer .logo { padding: 6.667vw 0; }
    #baby_trial footer small { font-size: 2.667vw; }
}

.fv-area {
    margin-bottom: -30px;
}

@media screen and (max-width: 750px) {
    .fv-area {
        margin-bottom: calc((-30/750)*100vw);
    }
}

.cv-part {
    background-color: #f7edca;
}