@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
:root{
    --baloon-tate:1.3648;
}

body{
    font-family: 'Kosugi Maru', sans-serif;
}

#top{
    height: 40vh;
    background-image: url(../imgs/bg-top.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.nowrap{
    white-space: nowrap;
}

#logo{
    width: 100%;
}

/*気球とリンク*/
#balloon-kuma{
    top:20px;
    margin: 0;
    position: fixed;
    width: 180px;
    height: calc(180px * var(--baloon-tate));
    background-image: url(../imgs/balloon.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 100;
}

#balloon-kuma h5{
    font-size:0.7rem;
    margin-bottom: 0.3.rem;
}

#yorozuclose{
    position: absolute;
    bottom : 28%;
    left: calc(50% - 0.75rem);
    font-size:1.5rem;
}

.yorozulink{
    padding:50px 10px;
    text-align: center;
    font-size: 0.5rem;
}
.yorozulink p{
    margin-bottom: 0;
}
.yorozulink a{
    text-decoration: none;
}

.yorozulink hr{
    margin:0.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
    border: none;
    border-top: 2px dotted blue;
}

/*QA*/
#qa{
    position: fixed;
    bottom:0;
    right:0;
    width: 25%;
}

.blinking{
    animation:blink 1s ease-in-out infinite alternate;
}

.baloon{
    position:absolute;
}

.baloon1{
    width: 65%;
    right: 30%;
    bottom: 0;
}
.baloon2{
    width: 80%;
    right: 75%;
    bottom: -100px;
}
.baloon3{
    width: 70%;
    right: -20%;
    top:-200px;
}

.btn-qa{
    padding:0;
    margin:0;
    background:none;
    border:0;
    overflow:visible;
    cursor:pointer;
/*    filter:drop-shadow(0px 0px 8px rgba(242, 145, 2,0.3)); */
    filter:drop-shadow(0px 0px 8px rgba(13, 110, 253,0.3)); 

/*    filter:drop-shadow(1px 1px 0px #0D6EFD) 
            drop-shadow(-1px 1px 0px #0D6EFD) 
            drop-shadow(1px -1px 0px #0D6EFD) 
            drop-shadow(-1px -1px 0px #0D6EFD);
*/
}

#qaclose{
    position: absolute;
    bottom : 5%;
    right: 5%;
    font-size:1.5rem;
}

.link-kanren a:hover{
    opacity: 0.7;
}

.btn-qa:hover{
    z-index: 100;
}

.ta-justify{
    text-align: justify;
}

.text-decoration-none{
    text-decoration: none;
}

@media screen and (max-width: 768px){
    .sp-none{
        display: none;
    }

    .yorozulink p{
        margin-bottom: 0.3rem;
    }

    #yorozuclose{
        bottom : 27%;
        font-size:1rem;
    }
} 

@media screen and (min-width: 768px) {
    .sp-visible{
        display: none;
    }
    /*気球とリンク*/
    #balloon-kuma{
        margin: 0;
        position: fixed;
        width: 300px;
        height: calc(300px * var(--baloon-tate));
        background-image: url(../imgs/balloon.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 100;
    }

    #balloon-kuma h5{
        font-size:1rem;
    }

    .yorozulink{
        padding:80px 0px;
        text-align: center;
        font-size: 0.8rem;
    }

    .yorozulink hr{
        margin:0.8rem 2rem;
        border: none;
        border-top: 2px dotted blue;
    }
    
   #qa{
        width: 20%;
        padding-right: 3%;
    }
    .baloon2{
        width: 80%;
        right: 75%;
        bottom: -100px;
    }
 }

@media screen and (min-width: 996px) {
    /*気球とリンク*/
    #balloon-kuma{
        margin: 0;
        position: fixed;
        width: 350px;
        height: calc(350px * var(--baloon-tate));
        background-image: url(../imgs/balloon.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 100;
    }

    #balloon-kuma h5{
        font-size:1.3rem;
    }

    .yorozulink{
        padding:90px 20px;
        text-align: center;
        font-size: 1rem;
    }

    .yorozulink hr{
        margin:0.5rem 1rem;
        border: none;
        border-top: 2px dotted blue;
    }

    #qa{ 
        width: 18%; 
        padding-right: 3%;
    }
}
 
@keyframes fuwafuwa {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1);
    }
}

/* このクラスをつけると回転を無限に繰り返します */
.anime-fuwafuwa {
    animation: 2s fuwafuwa infinite;
}