html {
    /* viewport 375px のとき font-size 16px */
    font-size: calc(100vw * 16 / 375);
    color: darkslategray;
}

.container {
    background-color: #efefef;
    padding-bottom: 5%;
}

p,
span {
    margin: 0;
    padding: 0;
}

span {
    display: inline-block;
}

img {
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0;
    font-family: "Noto Sans JP";
}

h2 {
    margin-top: 5%;
    font-weight: 600;
    font-size: calc(.95rem - 0.2vw);
}

h3 {
    margin-top: 5%;
    margin-bottom: 2.5%;
    font-weight: 600;
    font-size: calc(.78rem - .3vw);
}

.wf-notosansjapanese,
p,
span {
    font-family: "Noto Sans JP";
}

#top-catch,
#top-info {
    margin-top: 5%;
}

#rental {
    display: flex;
    flex-wrap: wrap;
}

#top-info a {
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem;
    width: 3rem;
    font-size: calc(0.44rem - 0.2vw);
    text-decoration: none;
    font-weight: 500;
    color: white;
    background-color: darkgrey;
}

#top-info a:hover {
    background-color: black;
}

#appeal p {
    font-weight: bolder;
    font-size: calc(.75rem - .4vw);
}

#appeal p span {
    display: initial;
    border-bottom: 1px dotted orangered;
    margin-right: 0.2rem;
}

#appeal p span:hover {
    color: orangered;
}

#rental {
    display: flex;
    flex-wrap: wrap;
    gap: 5% 5%;
}

#inquiry,
#wrap-madori-3f {
    flex-basis: 300px;
}

#terms-3f {
    flex-basis: 400px;
}

#terms-3f .table-terms {
    margin-top: 5%;
    display: grid;
    row-gap: .3rem;
}


#terms-3f .table-terms>div {
    display: flex;
    flex-wrap: wrap;
}

#terms-3f .table-terms .title {
    font-weight: 600;
    flex-basis: 100px;
}

#terms-3f .table-terms .detail {
    flex-basis: 250px;
}

#googlemap {
    margin-top: 5%;
    overflow: hidden;
}

#googlemap iframe {
    width: 100%;
}

#nerf3d {
    overflow: hidden;
}

#nerf3d>iframe {
    width: 100%;
    max-width: 667px;
}

/*** font-size ***/

#top-info p,
.sub-text,
#top-catch p {
    font-size: calc(.75rem - .6vw);
}

footer p {
    margin-top: 5%;
    font-size: calc(.24rem - .3vw);
}

.carousel-caption h5 {
    font-size: calc(.5rem - .2vw);
}

.carousel-caption p {
    font-size: calc(.4rem - .2vw);
}

#terms-3f .table-terms p {
    font-size: calc(.6rem - .4vw);
}

@media screen and (min-width: 992px) {

    #top-info h2 {
        font-size: .52rem;
    }

    #top-info p,
    #top-catch p {
        font-size: .4rem;
    }

    .sub-text {
        font-size: .35rem;
    }

    #terms-3f .table-terms .title {
        flex-basis: 110px;
    }

}

@media screen and (min-width: 1200px) {

    #top-info h2 {
        font-size: .4rem;
    }

    #top-info p,
    #top-catch p {
        font-size: calc(.34rem - .3vw);
    }

    .sub-text {
        font-size: .25rem;
    }

    #appeal p {
        font-size: calc(.55rem - .4vw);
    }

    #rental {
        margin-top: 0;
    }

    #terms-3f .table-terms .title {
        flex-basis: 120px;
    }

    #terms-3f .table-terms p {
        font-size: 20px;
    }

    #terms-3f .table-terms .detail {
        flex-basis: 300px;
    }

    h3 {
        font-size: .4rem;
    }
}

@media screen and (min-width: 1400px) {

    #top-info h2 {
        font-size: .4rem;
    }

    #top-info p,
    #top-catch p {
        font-size: 19px;
    }

    .sub-text {
        font-size: .25rem;
    }

    #appeal p {
        font-size: 27px;
    }

    #rental {
        margin-top: 0;
    }
}