@charset "UTF-8";
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;


}


.content{
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-color: #041415;
}

/* メインビジュアル */
.mv{
    background: url(../img/top-main-pc.png);
    position: relative;
}
.mv h1{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align: left;
    margin: 0 auto;
    color: #FDF6F6;
}

/* 黒塗り */
.black-catch{
    position: relative;
    background-color: #041415;
}

.flex-blackout{
    display: flex;
    flex-direction: column;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    align-items: center;
}

.flex-blackout h2{
    text-align: center;
    margin: 2rem auto;
    color: #FDF6F6;
}

.blackout p{
    margin: 0 auto;
    color: #FDF6F6;
}

/* サムネイルセクション */
/* 背景を黒に */
.tile-list{
    background: var(--black);
    padding: 2rem;
}
/* バーベキュープラン */
/* 写真*/
.bbq{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../img/bbq.png);
    position: relative;
    object-fit: cover;
    width: 80vw;
    height: 60svh;
    margin: 2rem auto;
}
/* テキスト部分 (共通) */
.textbox{
    position: absolute;
    top:50%;
    left:30%;
    transform: translate(-50%,-50%);
    width: 30vh;
    height: auto;
    text-align: center;
    margin: 0 auto;
}
.panel-title{
    border-bottom:  0.1rem solid;
    text-align: center;
    margin: 1rem auto;

}
.panel-subtitle{
    text-align: center;
    margin: 1rem auto;
}
.textbox p{
    text-align: left;
    margin: 2rem auto;
}
/* テントサウナ */
.tentsauna{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../img/tentsauna.png);
    position: relative;
    object-fit: cover;
    width: 80vw;
    height: 60svh;
    margin: 2rem auto;
}
/* グランピング */
.glamping{
    background-image:linear-gradient(rgba(0,0,0,0.60),rgba(0,0,0,0.60)), url(../img/glamping.png);
    position: relative;
    width: 80vw;
    height: 60svh;
    margin: 2rem auto;
}
/* オートキャンプ */
.autocamp{
    background-image:linear-gradient(rgba(0,0,0,0.60),rgba(0,0,0,0.60)), url(../img/autocampsite.png);
    position: relative;
    width: 80vw;
    height: 60svh;
    margin: 2rem auto;
}

/* sp */
@media screen and (max-width: 677px) {
    .mv{
        position: relative;
        width: 100vw;
        height: 100vh;
    }
    .mv>h1{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: left;
        vertical-align: center;

    }
    .flex-blackout>h2{
        font-size: clamp(1.5rem,2vw,1.8rem);
    }
    .flex-blackout>p{
        margin-top: 2rem;
    }
    .bbq, .tentsauna, .autocamp, .glamping{
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .textbox{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30vh;
        height: auto;
        text-align: center;
        margin: 0 auto;
    }
}