@charset "utf-8";

/* リセットCSS destyle.css */
/* ============================================ */
*,
::before,
::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
    min-width: 0;
}
html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    -webkit-tap-highlight-color: transparent;
    /* 3*/
}
body {margin: 0;}
main {display: block;}
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
    margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}
dt {font-weight: bold;}
dd {margin-left: 0;}
small {font-size: 80%;}
svg,
img,
embed,
object,
iframe {
    vertical-align: bottom;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: var(--lgreen);
}
tr {
    display: table-row;
    vertical-align: inherit;
    unicode-bidi: isolate;
    border-color: inherit;
}
th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: -internal-center;
    unicode-bidi: isolate;
}
td {
    display: table-cell;
    vertical-align: inherit;
    unicode-bidi: isolate;
}

/* ============================================ */
/* オリジナルCSS */
/* ============================================ */
* {
    margin: 0;
    padding: 0;
}
*,
*:before,
*:after {
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
    overflow: auto;
}
br {
    line-height: 0;
}
img {
    border: none;
    line-height: 0;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}
.full {
    width: 100%;
}
.white {
    color: #fff;
}
a {
    cursor: pointer;
    text-decoration: none;
    background-color: transparent;
    color: inherit;
}
a:hover {
    text-decoration: none;
}
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.db,
.pc {
    display: block;
}
.dn,
.sp {
    display: none;
}
.tel {
    pointer-events: none;
}
/* メディアクエリ */
/* ============================================ */
@media screen and (max-width: 992px) {}

@media screen and (max-width: 768px) {
    .tel {
        pointer-events: inherit;
    }
}


@media screen and (max-width: 480px) {
    img {
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-touch-callout: none;
        -moz-user-select: none;
    }

    /* .sp {
    display:block;
  }
  .pc {
    display:none;
  } */
}





/* ----------------------------------------- */
/* position */
/* ----------------------------------------- */
.relative {position: relative !important;}
.absolute {position: absolute !important;}
iframe {
    border: 0;
    vertical-align: bottom;
}

/* ----------------------------------------- */
/* column */
/* ----------------------------------------- */
.flex {display: flex;}
.rev {flex-direction: row-reverse;}
.jcc {justify-content: center;}
.jcs {justify-content: space-between;}
.jce {justify-content: flex-end;}
.aic {align-items: center;}
.ais {align-items: flex-start;}
.aie {align-items: flex-end;}
.fwrap {flex-wrap: wrap;}
.block {display: block;}
.iblock {display: inline-block;}
.wfit {width: fit-content;}
.contents {display: contents;}

/* ----------------------------------------- */
/* margin,padding */
/* ----------------------------------------- */
.pt36 {padding-top: 3.6rem;}
.pt96 {padding-top: 9.6rem;}
.pb96 {padding-bottom: 9.6rem;}
.pb64 {padding-bottom: 6.4rem;}
.mb8 {margin-bottom: 0.8rem;}
.mb18 {margin-bottom: 1.8rem;}
.mb24 {margin-bottom: 2.4rem;}
.mb32 {margin-bottom: 3.2rem;}
.mb36 {margin-bottom: 3.6rem;}
.mb48 {margin-bottom: 4.8rem;}
.mb64 {margin-bottom: 6.4rem;}
.mb80 {margin-bottom: 8.0rem;}
.mb96 {margin-bottom: 9.6rem;}
.mb100 {margin-bottom: 10rem;}
.mb120 {margin-bottom: 12rem;}
.mb200 {margin-bottom: 20rem;}
@media screen and (max-width: 768px) {
    .pt96 {padding-top: 6.4rem;}
    .pb96 {padding-bottom: 6.4rem;}
    .mb24 {margin-bottom: 1.6rem;}
    .mb32 {margin-bottom: 2rem;}
    .mb48 {margin-bottom: 3.6rem;}
    .mb80 {margin-bottom: 5rem;}
    .mb96 {margin-bottom: 6.4rem;}
    .mb100 {margin-bottom: 7rem;}
    .mb200 {margin-bottom: 10rem;}
}

/* ----------------------------------------- */
/* text */
/* ----------------------------------------- */
p,
a,
ul,
li,
div {
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.7;
}
/* 文字揃え */
.tac {text-align: center;}
.tar {text-align: right;}
.tal {text-align: left;}

/* 縦書き */
.wmrl {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.small {
    font-size: 10px;
}
.red-txt {
    color: #ab0d0d;
    background: #fffeb7;
}

/* ---------------------------------------------------------------------------------- */
/* メインコンテンツ */
/* ---------------------------------------------------------------------------------- */
body {
    background: linear-gradient(180deg, #d9e9f6 0%, #f8feff 50%, #f5faff 100%);
}
main {
    display: grid;
    /* grid-template-columns: 1fr 750px 1fr; */
    align-items: start;
    max-width: 750px;
    margin: 0 auto;
}
.bg_white {
    background: #fff;
}
.main_wrap {
    grid-column: 2;
    max-width: 750px;
    box-shadow: 0 0 0 1px rgba(15, 60, 130, 0.04), 0 30px 80px rgba(15, 60, 130, 0.14);
}
.fv_medal,.lead-img01,.lead-img02,.lead-img03,.lead-img04 {
    z-index: 1;
}
.laed_wrap {
    margin-top: 130px;
}
.fv_medal {
    top: -130px;
}
.lead-img01 {
    top: 280px;
    left: 30px;
}
.lead-img02 {
    top: 380px;
    right: 40px;
}
.lead-img03 {
    bottom: 400px;
    left: 70px;
}
.lead-img04 {
    bottom: 280px;
    right: 40px;
}
.cta_btn {
    width: 85%;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    animation: ctaPulse 2.4s ease-in-out infinite;
}

.cta_btn img {
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.cta_btn:hover img,
.cta_btn:focus-within img {
    transform: scale(1.05);
    filter: drop-shadow(0 18px 40px rgba(15, 60, 130, 0.25));
}

@keyframes ctaPulse {
    0%, 100% {
        transform: translateX(-50%) translateY(0) scale(1);
    }
    50% {
        transform: translateX(-50%) translateY(-8px) scale(1.04);
    }
}

.onayami .copy_img {
    z-index: 2;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
}
.onayami .onayami_wrap:nth-child(2) {
    z-index: -1;
    margin-top: -145px;
}
.intro_copy02 {
    top: -40px;
    left: 50%;
    z-index: 1;
    width: 100%;
    transform: translateX(-50%);
}
.intro_copy03 {
    bottom: 400px;
    z-index: 1;
}
.intro_copy04 {
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
}
.intro_img02 {
    bottom: 0;
    left: 52%;
    transform: translateX(-50%);
    width: 100%;
}
.features {
    background: #f1fdff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding-bottom: 70px;
}
.features_copy01 {
    padding-top: 35px;
}
.features_copy02 {
    margin-top: -84px;
}
.features .delay-1,
.features .delay-5 {
    right: -10px;
}
.features .delay-3 {
    left: -6px;
}
.media {
    background: #fffcf9;
    padding: 0 15px 80px;
}
.media_title {
    top: 50px;
}
.media_img {
    margin-top: -30px;
}
.media_review {
    margin-top: -100px;
}
.howto {
    background: #f1fdff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 100px;
}
.howto ul {
    background: #fffefa;
    padding: 60px 35px;
}
.howto ul li {
    background: #fff;
    border-radius: 0 70px 0 0;
    margin-bottom: 50px;
    box-shadow: 0 0 0 0px rgba(15, 60, 130, 0.04), 0 0px 15px rgba(15, 60, 130, 0.05);
    padding: 40px 40px 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
        gap: 30px;
}
.howto_title {
    margin-bottom: 50px;
    width: 60%;
}
.movie {
    width: 100%;
    height: auto;
    background: #fff;
    overflow: hidden;
}
.movie video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 5%;
    background: #fff;
}
.faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
    background: #daecfd;
    padding-top: 10vw;
    padding-bottom: 15svw;
}
.faq-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    width: 88%;
    box-shadow: 0 2px 16px rgba(15, 60, 130, 0.1);
}
.faq-q {
    background: #2bc8e4;
    color: #fff;
    padding: 14px 20px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.faq-q span {
    font-size: clamp(20px, 5vw, 26px);
    font-weight: bold;
    line-height: 1.3;
    flex-shrink: 0;
}
.faq-q p {
    font-size: clamp(16px, 3vw, 24px);
    font-weight: bold;
    line-height: 1.6;
    padding-top: 4px;
}
.faq-a {
    padding: 16px 20px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.faq-a span {
    font-size: clamp(20px, 5vw, 26px);
    font-weight: bold;
    color: #2bc8e4;
    line-height: 1.3;
    flex-shrink: 0;
}
.faq-a p {
    font-size: clamp(14px, 3vw, 18px);
    color: #333;
    line-height: 1.85;
    padding-top: 4px;
}
.doctor {
    padding-bottom: 70px;
    background: #fff;
}

body {
    overflow-x: hidden;
}

.animatable {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
    will-change: opacity, transform;
}

.animatable.show {
    opacity: 1;
    transform: translateY(0);
}

.animatable.delay-1 { transition-delay: 0.1s; }
.animatable.delay-2 { transition-delay: 0.2s; }
.animatable.delay-3 { transition-delay: 0.3s; }
.animatable.delay-4 { transition-delay: 0.4s; }
.animatable.delay-5 { transition-delay: 0.5s; }

.footer {
    background: #3a4652;
    padding: 30px;
}
.footer a {
    text-decoration: underline;
}
.footer a:first-child {
    margin-right: 1em;
}



/* レスポンシブ */
@media screen and (max-width: 749px) {
    .laed_wrap {
        margin-top: 18vw;
    }
    .fv_medal {
        top: -18vw;
    }
    .fv_medal {
        padding: 0 10px;
    }
    .lead-img01, .lead-img04{
        width: 40vw;
    }
    .lead-img02, .lead-img03 {
        width: 35vw;
    }
    .lead-img01 {
        top: 22%;
        left: 3%;
    }
    .lead-img02 {
        top: 30%;
        right: 3%;
    }
    .lead-img03 {
        bottom: 25%;
        left: 5%;
    }
    .lead-img04 {
        bottom: 18%;
        right: 3%;
    }
    .cta_btn {
        width: 95%;
        bottom: 7vw;
    }
    .onayami .copy_img {
        bottom: 10vw;
    }
    .onayami .onayami_wrap:nth-child(2) {
        margin-top: -19vw;
    }
    .intro_copy02 {
        top: -5vw;
    }
    .intro_copy03 {
        bottom: 55vw;
        width: 30vw;
    }
    .intro_copy04 {
        bottom: 23vw;
    }
    .features {
        padding-bottom: 13vw;
    }
    .features_copy01 {
        padding-top: 5vw;
    }
    .features_copy02 {
        margin-top: -13vw;
    }
    .media {
        background: #fffcf9;
        padding: 0 2vw 12vw;
    }
    .media_img {
        margin-top: 1vw;
    }
    .media_review {
        margin-top: -10vw;
    }
    .howto {
        padding: 2vw;
        padding-top: 10vw;
        padding-bottom: 10vw;
    }
    .howto_title {
        margin-bottom: 10vw;
        width: 90%;
    }
    .howto ul {
        padding: 8vw 2vw;
    }
    .howto ul li {
        margin-bottom: 8vw;
        padding: 7vw 3vw 10vw 3vw;
        gap: 3vw;
    }
}