/* top */
.top{
    width:100%;
    margin-top:100px;
}

.top-image{
    width:100%;
    height: 400px;
}

/* news */


.index-news-body{
    display:flex;
    justify-content: center;
    align-items: center;
    width:auto;
    margin: 20px auto;
    height: 30px;
}

.index-news-body a{
    text-decoration: underline;
}

.news-box{
    padding: 1px;
    border:solid 1px;
}

.news-topic{
    margin-left:10px;
    
}

/* sauna */

.sauna{
    position:relative;
}

.sauna img{
    width:100%;
    height: 400px;
}

.sauna-box{
    position:absolute;
    left: 50%;
    top: 50%;
    /*コレ*/transform: translate(-50%,-50%);
    width:100%;
    height:350px;
    background-color: rgba(0,0,0, 0.5);
}

.sauna-sentence{
    text-align:center;
    padding:2em 1em;
    color:white;
    position:relative;
    width:auto;
    height: auto;
}

#sauna-title{
    margin-bottom:20px;
}

.sauna-anchor-box{
    position:relative;
    width:100px;
    padding: 0.5em 1em;
    margin: 0 50%;
    transform: translate(-50%, 0);
    font-weight: bold;
    color: white;/*文字色*/
    border: solid 2px white;/*線*/
    border-radius: 10px;/*角の丸み*/
} 

.sauna-anchor-box a{
    color:white
}

/* contents */

.contents{
    display:flex;
    flex-wrap :wrap;
    margin: 0 auto;
}

.content{
    position:relative;
    margin:0.6%;
    width:32%;
}

.content-image{
    width:100%;
    height: 220px;
}

.content-title{
    position: absolute;
    font-size: 20px;
    font-weight: bold;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    color:white;
}

@media screen and (min-width:761px){
    .sauna img{
        width:100%;
        height: 700px;
    }

    .top img{
        width:100%;
        height: 500px;
    }
}


@media screen and (max-width:760px){

    .title{
        font-size: 24px;
    }

    .top{
        margin-top:80px;
    }

    .index-news-body{
        font-size: 12px;
    }

    .sauna-sentence{
        font-size:14px;
    }

    .content{
        margin:10px auto;
        position:relative;
        width:95%;
        height: 300px;
    }

    .content-image{
        width:100%;
        height: 100%;
    }
}

#black{
    color:black;
    font-weight: bold;
}