@charset "utf-8";

.main-head {
    background: #f1e5ec;
}

.main-head h1 {
    text-shadow: 1px 1px 5px rgba(0,0,0,0.6);
}

.box-guide {
    padding-top: 120px;
    margin-bottom: 90px;
}

.box-guide .box-wrap {
    width: 900px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 420px;
}

.box-guide .img-balloon {
    width: 130px;
    position: absolute;
    right: 0;
    top:100px;
}

.box-guide h2 {
    font-size: 28px;
    line-height: 180%;
    margin-bottom: 50px;
}

.box-guide h3 {
    font-size: 28px;
    line-height: 160%;
    margin-bottom: 50px;
}

.box-guide h3 .txt-s {
    font-size: 18px;
}

.box-guide p {
    font-size: 16px;
    line-height: 200%;
}

.box-guide .txt-tel,
.box-guide .txt-point {
    color: #E95383;
}

.box-guide .txt-point {
    font-size: 14px;
    position: relative;
    top: -1px;
}

.box-guide a {
    color: #E95383;
    text-decoration: underline;
}

.box-guide a:hover {
    color: #f3a9c1;
    text-decoration: none;
}

.box-guide img {
    position: absolute;
    right: 0;
    bottom: 0;
}

/******************************************************/

.box-guide .img-balloon.active { animation: fadeBalloon 1.6s 0.3s ease-in-out forwards; }

@keyframes fadeBalloon {
    from { 
        opacity: 0;
        translate: -15% 50%;
    }
    to { 
        opacity: 1;
        translate: 0 0;
    }
}


/******************************************************/

@media screen and (max-width: 900px) {
    
    .box {
        padding: 8% 5%;
    }
    
    .box-guide {
        padding: 15% 5%;
        margin-bottom: 0;
    }

    .box-guide .box-wrap {
        width: 100%;
        padding-bottom: 0;
    }

    .box-guide h2 {
        font-size: 4.3vw;
        line-height: 180%;
        margin-bottom: 8%;
    }
    
    .box-guide h3 {
        font-size: 4.3vw;
        margin-bottom: 8%;
    }
    
    .box-guide h3 .txt-s {
        font-size: 3vw;
    }
    
    .box-guide p {
        font-size: 4vw;
    }
    
    .box-guide .txt-point {
        font-size: 3.4vw;
        top: -0.4vw;
    }
    
    .box-guide img {
        position: relative;
        width: 100%;
    }
    
}