@charset "utf-8";

*,
*:before,
*:after {
    box-sizing: border-box;
}

body{
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
}


img {
    max-width: 100%;
    vertical-align: bottom;

}


a {
    text-decoration: none;
}


p {
    font-size: 16px;
}


/*------------------*/


#home {
    min-height: 100vh;
    text-align: center;
    padding-top: 10%;
}


/*------------------*/


.home-wrapper {
    background: #fff;
    border-radius: 30px;
    margin: 0 auto;
    width: 100%;
    /*これで白幅を調整*/
    padding: 30px;
    max-width: 700px;
}


/*------------------*/



.subtitle {
    margin-bottom: 20px;
}

.title {
/*
    font-size: 60px;
    line-height: 1.2;
    margin-bottom: 80px;
    color: #B6D99C;
*/
    margin-bottom: 80px;
    width: 300px;


}


/*------------------*/


.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;

}



.grid img:hover {
    animation-name: yasai__img;
    animation-duration: .6s;
}


.yasai__img {
    transform: rotateY(180deg);
    animation-name: yasai__img;
    animation-duration: 3s;
}


@keyframes yasai__img {
    0% {
        /*スタート地点*/
        transform: translateY(0);
    }


    100% {
        /*終了地点*/
        transform: translateY(-30px);
    }
}


/*------------------*/

.button-start a {
    display: inline-block;
    background: #F7F7CE;
    border-radius: 60px;
    padding: 5px 40px;
    font-size: 30px;
    color: #B6D99C;
    border: 4px solid #B6D99C;
    margin: 50px 0 30px 0;
}


.button-start a:hover {
    background: #B6D99C;
    color: #F7F7CE;
    border: 4px solid #F7F7CE;
}


footer {
    padding: 20px 0;
}


/*------------------
スマホ → PC
------------------*/

@media (min-width: 769px) {

    #home {
        background-image: url(img/bg.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        padding-top: 5%;
    }

    .home-wrapper {
        /*これで白幅を調整*/
        padding: 5%;
        max-width: 750px;

    }

    .subtitle{
margin-top: 40px;
        font-size: 1.6rem;
    }
    
    
    .title{
        width: 350px;
    }
    
    .grid{
        padding: 0;
        max-width: 700px;
    }
    
}


/*------question------------*/

#question{
    background: #fff;
    text-align: center;
    min-height: 100vh;


}


.q-main{
    padding:60px 40px 0 40px;
    max-width: 700px;
    margin:0 auto;
}


.question{
    font-size: 1.8rem;
    line-height: 1.75;
}

@media (min-width: 769px) {
    .q-main{
        padding:80px 40px 0 40px;
    }

.question{
    font-size: 2rem;
    line-height: 1.75;
}
}


.button{
    margin-top: 80px;
}

.button-choice a {
    display: inline-block;
    background: #fff;
    border-radius: 60px;
    padding: 8px 45px;
    color: rgba(30,20,10);
    border: 1px solid rgba(30,20,10);
    margin: 30px 0 0 0;
    font-size: 1.4rem;
    min-width: 250px;
}


.button-choice a:hover {
    background: #B6D99C;
    color: #F7F7CE;
    border: 1px solid #F7F7CE;
}


.flex-img{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12%;
    align-items: center;
    margin: 100px auto 0;
    max-width: 300px;
}



.flex-img img:hover {
    animation-name: queyasai__img;
    animation-duration: .6s;
}


.flex-img img:hover {
    animation-name: queyasai__img;
    animation-duration: .5s;
}


@keyframes queyasai__img {
    0% {
        /*スタート地点*/
        transform: translateY(0);
    }


    100% {
        /*終了地点*/
        transform: translateY(-30px);
    }
}




.q-footer{
    margin-top: 20px;
}




/*--------answer 共通設定----------*/

#answer{
    text-align: center;
    min-height: 100vh;
    background: #fff;


}

.ans-wrapper{
    padding: 0 30px;
    max-width: 600px;
    margin: 0 auto;
    min-height: 100vh;
}


@media (min-width: 769px) {
    .ans-wrapper{
        padding: 30px;
}
}

.circle{
    width: 260px;
    height: 260px;
    margin: 40px auto 10px auto;
}

.ans-wrapper h2{
    font-size: 2rem;
    font-weight: bold;;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}


.ans-contents{
    margin:0 40px;
}

.ans-text{
    text-align: left;
        margin: 5px 0 30px;
}

.point-flex{
    display: grid;
    margin-bottom: 50px;
}

.point-flex p{
    margin:0 0 10px;
    padding: 4px;
}


@media (min-width: 769px) {
    .point-flex p{
        margin:0 30px 10px 30px;
    }
}

.top-back{
    margin-top: 12px;
}

.other:hover,
.top-back:hover{
    opacity: 0.6;
}


/*--------answer-ichigo 各設定----------*/


#ichigo img{
/*
    background: rgba(195,158,200,.4);
    border-radius: 50%;
*/
    padding: 20px;
}


#ichigo .point{
    color: #c39ec8;
    font-size: 1.3rem;
    font-weight:bold;
}

#ichigo .point-flex p{
    background: #c39ec8;
    color: #fff;
    border-radius: 10px;
}


#ichigo .other a{
    color: #c39ec8;
}

#ichigo .top-back a{
    color: #c39ec8;

}

/*--------answer-remon 各設定----------*/

#remon img{
/*
    background: rgba(112,200,220,.4);
    border-radius: 50%;
*/
    padding: 20px;
}


#remon .point{
    color: #70C8DC;
    font-size: 1.3rem;
    font-weight:bold;
}

#remon .point-flex p{
    background: #70C8DC;
    color: #fff;
    border-radius: 10px;
}


#remon .other a{
    color: #70C8DC;
}

#remon .top-back a{
    color: #70C8DC;

}
/*--------answer-kyu 各設定----------*/


#kyu img{
/*
    background: rgba(200,149,16,.4);
    border-radius: 50%;
*/
    padding: 20px;
}


#kyu .point{
    color: #C89510;
    font-size: 1.3rem;
    font-weight:bold;
}

#kyu .point-flex p{
    background: #C89510;
    color: #fff;
    border-radius: 10px;
}


#kyu .other a{
    color: #C89510;
}

#kyu .top-back a{
    color: #C89510;

}
/*--------answer-momo 各設定----------*/

#momo img{
/*
    background: rgba(196,157,180,.4);
    border-radius: 50%;
*/
    padding: 20px;
}

#momo .point{
    color: #C49DB4;
    font-size: 1.3rem;
    font-weight:bold;
}

#momo .point-flex p{
    background: #C49DB4;
    color: #fff;
    border-radius: 10px;

}


#momo .other a{
    color: #C49DB4;
}

#momo .top-back a{
    color: #C49DB4;

}
/*--------answer-nasu 各設定----------*/


#nasu img{
/*
    background: rgba(200,189,22,.4);
    border-radius: 50%;
*/
    padding: 20px;
}



#nasu .point{
    color: #C8BD16;
    font-size: 1.3rem;
    font-weight:bold;
}

#nasu .point-flex p{
    background: #C8BD16;
    color: #fff;
    border-radius: 10px;

}


#nasu .other a{
    color: #C8BD16;
}

#nasu .top-back a{
    color: #C8BD16;

}
/*--------answer-nashi 各設定----------*/

#nashi img{
/*
    background: rgba(219,156,196,.4);
    border-radius: 50%;
*/
    padding: 20px;
}


#nashi .point{
    color: #DB9CC4;
    font-size: 1.3rem;
    font-weight:bold;
}

#nashi .point-flex p{
    background: #DB9CC4;
    color: #fff;
    border-radius: 10px;
}


#nashi .other a{
    color: #DB9CC4;
}

#nashi .top-back a{
    color: #DB9CC4;

}
/*--------answer-kabo 各設定----------*/

#kabo img{
/*
    background: rgba(199,101,24,.4);
    border-radius: 50%;
*/
    padding: 20px;
}



#kabo .point{
    color: #C76518;
    font-size: 1.3rem;
    font-weight:bold;
}

#kabo .point-flex p{
    background: #C76518;
    color: #fff;
    border-radius: 10px;

}


#kabo .other a{
    color:#C76518;
}

#kabo .top-back a{
    color: #C76518;

}
/*--------answer-ninjin 各設定----------*/

#ninjin img{
/*
    background: rgba(142,204,170,.4);
    border-radius: 50%;
*/
    padding: 20px;
}

#ninjin .point{
    color: #8ECCAA;
    font-size: 1.3rem;
    font-weight:bold;
}

#ninjin .point-flex p{
    background: #8ECCAA;
    color: #fff;
    border-radius: 10px;

}

#ninjin .other a{
    color: #8ECCAA;
    
}

#ninjin .top-back a{
    color: #8ECCAA;

}
/*--------answer-ore 各設定----------*/

#ore img{
/*
    background: rgba(125,190,53,.4);
    border-radius: 50%;
*/
    padding: 20px;
}

#ore .point{
    color: #7DBE35;
    font-size: 1.3rem;
    font-weight:bold;
}

#ore .point-flex p{
    background: #7DBE35;
    color: #fff;
    border-radius: 10px;
}

#ore .other a{
    color: #7DBE35;
}

#ore .top-back a{
    color: #7DBE35;

}
/*--------answer-piman 各設定----------*/

#piman img{
/*
    background: rgba(201,128,18,.4);
    border-radius: 50%;
*/
    padding: 20px;
}

#piman .point{
    color: #C98012;
    font-size: 1.3rem;
    font-weight:bold;
}

#piman .point-flex p{
    background: #C98012;
    color: #fff;
    border-radius: 10px;
}

#piman .other a{
    color: #C98012;
}

#piman .top-back a{
    color: #C98012;

}

/*--------answer-ringo 各設定----------*/

#ringo img{
/*
    background: rgba(164,169,212,.4);
    border-radius: 50%;
*/
    padding: 20px;
}

#ringo .point{
    color: #A4A9D4;
    font-size: 1.3rem;
    font-weight:bold;
}

#ringo .point-flex p{
    background: #A4A9D4;
    color: #fff;
    border-radius: 10px;
}

#ringo .other a{
    color: #A4A9D4;
}

#ringo .top-back a{
    color: #A4A9D4;

}

/*--------answer-tomato 各設定----------*/

#tomato img{
/*
    background: rgba(246,181,93,.4);
    border-radius: 50%;
*/
    padding: 20px;
}

#tomato .point{
    color: #F6B55D;
    font-size: 1.3rem;
    font-weight:bold;
}

#tomato .point-flex p{
    background: #F6B55D;
    color: #fff;
    border-radius: 10px;
}

#tomato .other a{
    color: #F6B55D;
}


#tomato .top-back a{
    color: #F6B55D;
    
}

/*------other------------*/

#other{
    background: #fff;
    text-align: center;
    min-height: 100vh;

}

.o-main{
    padding:150px 21px 0 20px;
    max-width: 700px;
    margin: 0 auto;
}

.grid-other{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    
    margin-bottom: 100px;
}




#other .top-back a{
    color: #333;
}

.o-footer{
    margin-top: 50px;
}

.grid-other img{
    padding: 10px 15px;
}


@media (min-width: 769px) {
    .o-main{
        padding:150px 80px 0 80px;
        max-width: 700px;
        margin: 0 auto;
    }
    
    .grid-other{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
        
        margin-bottom: 100px;
    }
}

/*------------------*/

.ichigo:hover{
    background: rgba(195,158,200,.4);
    color: #fff;
    border-radius: 50%;
    padding: 10px;
}

.ore:hover{
    background: rgba(125,190,53,.4);
    color: #fff;
    border-radius: 50%;
    padding: 10px;
}

.tomato:hover{
    background: rgba(246,181,93,.4);
    color: #fff;
    border-radius: 50%;
    padding: 10px;
}

.momo:hover{
    background: rgba(196,157,180,.4);
    color: #fff;
    border-radius: 50%;
    padding: 10px;
}

.kabo:hover{
    background: rgba(199,101,24,.4);
    color: #fff;
    border-radius: 50%;
    padding: 10px;
}

.nashi:hover{
    background: rgba(219,156,196,.4);
    color: #fff;
    border-radius: 50%;
    padding: 10px;
}

.nasu:hover{
    background: rgba(200,189,22,.4);
    color: #fff;
    border-radius: 50%;
    padding: 10px;
}

.kyu:hover{
    background: rgba(200,149,16,.4);
    color: #fff;
    border-radius: 50%;
    padding: 10px;
}

.ninjin:hover{
    background: rgba(142,204,170,.4);
    color: #fff;
    border-radius: 50%;
    padding: 10px;
}

.remon:hover{
    background: rgba(112,200,220,.4);
    color: #fff;
    border-radius: 50%;
    padding: 10px;
}

.piman:hover{
    background: rgba(201,128,18,.4);
    color: #fff;
    border-radius: 50%;
    padding: 10px;
}

.ringo:hover{
    background: rgba(164,169,212,.4);
    color: #fff;
    border-radius: 50%;
    padding: 10px;
}