@charset "utf-8";

/*--------------------
 main
 -------------------*/

#skrollr-body{
    background: #fff;
}

body::before {
    content: "";
    position: fixed;
    top: calc(20px + 10.8vw);
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/index/bg_mv.jpg) no-repeat top;
    background-size: 100% auto;
    display: block;
    z-index: -1;
}

.mv--area{
    padding-bottom: 9vw;
    background-size: 100% auto;
    position: relative;
    overflow: hidden;
}
.mv--area .anime-txt{
    position: absolute;
    top: 2vw;
    width: 100%;
}
.mv--area .anime-txt .txt01{
    width: 19%;
}
.mv--area .anime-txt .txt02{
    width: 21%;
    margin-left: 12%;
    margin-top: -7%;
}
.mv--area .mv-txt{
    width: 38%;
    padding-left: 3%;
    padding-top: 41%;
}
.mv--area .catch{
    padding: 9vw 3vw;
    text-align: center;
    position: relative;
    margin-top: -2vw;
    background: url(../img/index/catch_bg.png) no-repeat center center;
    background-size: 100%;
}
.mv--area .catch p{
    display: flex;
    justify-content: center;
}
.mv--area .catch .line02{
    padding-left: 1vw;
    margin-top: 3vw;
}
.mv--area .catch img{
    height: 12.4vw;
    width: auto;
    margin: 0;
}
.mv--area .catch .line02 img{
    height: 10.5vw;
}


.trial2{
    padding: 8vw 0;
}
.trial .inner{
    max-width: 90%;
    position: relative;
}
.trial .ttl{
    width: 94%;
    margin: auto;
}
.trial .arrow{
    width: 15%;
    margin: 4vw auto 6vw;
}
.trial .btn{
    position: absolute;
    bottom: 10.5vw;
    left: 0;
    right: 0;
    margin: auto;
    width: 90%;
}
.trial .btn a{
    font-size: 4vw;
    line-height: 1.6;
    color: #fff;
    font-weight: bold;
    padding: 3vw 3vw;
    text-align: center;
    background: #6397d1;
    border-radius: 2vw;
    display: block;
}

#d_message{
    background: #dcdddd;
    padding: 5vw 0 5vw;
    margin-top: 11vw;
}
#d_message .ttl{
    font-size: 3.8vw;
    text-align: center;
}
#d_message .white_box{
    background: #fff;
    margin-top: 3vw;
    padding: 4vw 0;
}
#d_message .head{
    background: url(../img/index/doctor_img.png) no-repeat right bottom;
    background-size: 51% auto;
    padding: 0 4%;
}
#d_message .head .midashi{
    font-size: 4.6vw;
    line-height: 1.6;
    font-weight: bold;
}
#d_message .head .info{
    margin-top: 6vw;
}
#d_message .head .info .clinic{
    font-size: 3.8vw;
    line-height: 1.6;
}
#d_message .head .info .name{
    font-size: 5.2vw;
    line-height: 1.6;
    letter-spacing: 0.15em;
}
#d_message .head .info .name .en{
    font-size: 3.2vw;
    display: block;
    letter-spacing: 0.05em;
}
#d_message .head .info ul{
    border-top: 1px solid #595757;
    width: 50%;
    padding-top: 2vw;
    margin-top: 2vw;
}
#d_message .head .info ul li{
    font-size: 3.2vw;
    line-height: 1.6;
    margin-left: -1vw;
}
#d_message .main{
    padding: 7vw 4% 4vw;
}
#d_message .main p{
    font-size: 4vw;
}
#d_message .main p.big{
    font-size: 4.5vw;
}
#d_message .main p:not(:first-child){
    margin-top: 6vw;
}
#d_message .main .border_box{
    border: 1px solid #3e3a39;
    padding: 2vw 3vw;
    margin-top: 5vw;
    min-height: 17vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
#d_message .main .border_box+.border_box{
    margin-top: 3vw;
}
#d_message .main .border_box p{
    font-size: 4.1vw;
    line-height: 1.6;
    font-weight: bold;
    text-align: center;
}
#d_message .list{
    margin-top: 6vw;
}
#d_message .list li{
    font-size: 4.5vw;
    text-indent: -1em;
    padding-left: 1em;
}

#botox p{
    font-size: 3.8vw;
}
#botox p:not(:first-child){
    margin-top: 6vw;
}
#botox .img{
    width: 94%;
    margin: 7vw auto 0;
}

#range{
    padding: 7vw 0;
    margin-top: 8vw;
    background: url(../img/index/range_bg.png) no-repeat center center /cover;
}
#range .circle{
    margin-top: 5vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#range .circle .txt01{
    width: 50%;
    margin-left: 15%;
}
#range .circle .txt02{
    width: 31%;
    margin-top: 14%;
}
#range .circle .txt03{
    width: 31%;
}
#range .circle .txt04{
    width: 35%;
    margin-top: 5%;
}
#range .circle .txt05{
    width: 31%;
}

#b-a{
    padding: 8vw 0;
}
#b-a p:not(:first-child){
    margin-top: 7vw;
}

#about,#about2{
    border-top: 1px solid #9b9b9c;
    padding: 8vw 0;
}
#about2{
    padding-bottom: 10vw;
}
#about .img,#about2 .img{
    width: 59%;
    margin: 6vw auto 0;
}
#about p,#about2 p{
    font-size: 3.8vw;
}
#about p:not(:first-child),
#about2 p:not(:first-child){
    margin-top: 6vw;
}

#injection .box{
    margin-top: 5vw;
}
#injection .box+.box{
    margin-top: 12vw;
}
#injection p{
    font-size: 3.8vw;
}
#injection p:not(:first-child){
    margin-top: 6vw;
}
#injection .main_img{
    width: 90%;
    margin: 6vw auto 0;
}


#risk{
    padding-top: 4vw;
}
#risk p:not(:first-child){
    font-size: 3.8vw;
    margin-top: 6vw;
}
#risk .box{
    border: 1px solid #505050;
    margin-top: 10vw;
    position: relative;
    padding: 7vw 3vw 5vw;
}
#risk .box+.box{
    margin-top: 8vw;
}
#risk .box .num{
    position: absolute;
    top: -4.5vw;
    left: 0;
    right: 0;
    width: 13%;
    background: #fff;
    margin: auto;
    text-align: center;
}
#risk .box .num img{
    width: 68%;
}
#risk .box .strong{
    font-size: 5vw;
    line-height: 1.6;
    font-weight: bold;
    text-align: center;
    margin-top: 0;
}
#risk .box .arrow{
    width: 5%;
    margin: 3vw auto;
    text-align: center;
}
#risk .box .txt{
    font-size: 4vw;
    text-align: center;
    margin-top: 0;
}

#merit{
    padding: 15vw 0 0;
}
#merit .ttl{
    width: 100vw;
    margin-left: -4vw;
}
#merit .merit_box{
    margin-bottom: 8vw;
}
#merit .merit_box .merit02{
    margin-top: -7vw;
}
#merit .merit_box .merit03{
    margin-top: -6vw;
}

#voice{
    padding: 12vw 0 12vw;
}
#voice .cnts-slider{
    margin-top: 5vw;
    margin-left: -4vw;
    width: 100vw;
}
#voice .box{
    padding: 5vw 7%;
    width: 94%;
    margin: 0 auto;
    border: 1px solid #afafb0;
}
#voice .box p{
    font-size: 3.8vw;
}
#voice .box p:not(:first-child){
    margin-top: 3vw;
}
#voice .swiper-button-prev,
#voice .swiper-container-rtl .swiper-button-next{
    background: url(../img/index/arrow_prev.png) no-repeat left center / 100%;
    left: 1vw;
}
#voice .swiper-button-next,
#voice .swiper-container-rtl .swiper-button-prev{
    background: url(../img/index/arrow_next.png) no-repeat left center / 100%;
    right: 1vw;
}
#voice .swiper-button-prev.swiper-button-disabled,
#voice .swiper-button-next.swiper-button-disabled{
    display: none;
}
#voice .swiper-button-prev,
#voice .swiper-button-next{
    width: 5vw;
    height: 16vw;
    margin-top: -8vw;
}

#nurse{
    padding: 5vw 0;
    background: #dcdcdc;
}
#nurse .white_box{
    padding: 0 4% 5vw;
    background: #fff;
    overflow: hidden;
}
#nurse .white_box+.white_box{
    margin-top: 5vw;
}
#nurse .white_box p:not(:first-child){
    margin-top: 6vw;
}
#nurse .white_box p{
    font-size: 3.8vw;
}
#nurse .white_box .ttl{
    width: 92vw;
    margin-left: -4.5%;
}


#reason{
    padding-top: 4vw;
}
#reason .box{
    margin-top: 5vw;
}
#reason .box+.box{
    margin-top: 7vw;
}
#reason .box p{
    font-size: 3.8vw;
}
#reason .box p:not(:first-child){
    margin-top: 3vw;
}

#flow{
    padding: 12vw 0 8vw;
}
#flow .box{
    margin-top: 5vw;
}
#flow .box+.box{
    margin-top: 7vw;
}
#flow .box .num{
    font-size: 4vw;
    margin-bottom: 2vw;
}
#flow .box .flex{
    display: flex;
    justify-content: space-between;
}
#flow .box .flex p{
    width: 50%;
    font-size: 3.8vw;
}
#flow .box .flex .img{
    width: 43%;
}

#visit{
    padding: 8vw 0;
}
#visit p{
    font-size: 3.8vw;
}
#visit p:not(:first-child){
    margin-top: 3vw;
}

#map{
    padding: 8vw 0;
}
#map .gmap{
    position: relative;
    width: 100%;
    height: 80vw;
    overflow: hidden;
}
#map .gmap iframe{
    width: 100%;
    height: 100%;
}






/*▽アニメーション用追加css 2018/11/10 antsdesign*/

/* 点滅 */
.blinking{
    -webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0.5;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0.5;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0.5;}
    100% {opacity:1;}
}

h1 {
    position: relative;
}

h1 img.sp_01_01 {
position: absolute;
top: 20px;
right: 30px;
}

h1 .anime {
position: absolute;
top: 190px;
right: -5px;
}

.animation-bounce
{
    animation:
        bounce 3.5s ease normal 0.5s none running
    ;
    -webkit-animation:
        bounce 3.5s ease normal 0.5s none running
    ;
    -ms-animation:
        bounce 3.5s ease normal 0.5s none running
    ;
}
@keyframes bounce {
    0%, 100%, 20%, 50%, 80% {
        transform: translateY(0px);
    }
    40% {
        transform: translateY(-45px);
    }
    60% {
        transform: translateY(-10px);
    }
}
   

.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 500ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    transition-delay:0.5s;
}

/*▽スピード調整*/

.fadein.two {
    transition-delay:0.2s;
}

.fadein.three {
    transition-delay:0.4s;  
}

.fadein.four {
    transition-delay:0.6s;
}

.fadein.five {
    transition-delay:0.8s;
}

.uk-animation-fade {
    animation-name: uk-fade;
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-delay: 0.1s;
}
.delay.two {
    animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

.delay.three {
    animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}

.delay.four {
    animation-delay: 0.7s;
    -o-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    -webkit-animation-delay: 0.7s;
}

.delay.five {
    animation-delay:1.1s;
    -o-animation-delay:1.1s;
    -moz-animation-delay:1.1s;
    -webkit-animation-delay:1.1s;
}

.delay.six {
    animation-delay: 1.3s;
    -o-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
    -webkit-animation-delay: 1.3s;
}

.anime-txt .uk-animation-fade {
    animation-name: uk-fade;
    animation-duration: 0.1s;
    animation-timing-function: linear;
}

/*▽キラキラアニメ*/

.reflection-img{
    position    :relative;
    overflow    :hidden;
}
 
.reflection {
    height      :100%;
    width       :30px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 1.5s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 1.5s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 1.5s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 1.5s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 1.5s ease-in-out infinite;
}
 
@keyframes reflection {
    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 reflection {
    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; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}