@charset "UTF-8";

h2 {
    padding: 150px 0 20px;
    text-align: center;
}

main .visual {
    text-align: center;
}

main .visual img {
    max-width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

.h2-text {
    padding: 50px 45px;
}

.h2-text .h2-text1,
.h2-text .h2-text2 {
    padding-bottom: 25px;
}

.bg-green {
    background-color: #a8c3a0;
}

.toc .flex {
    justify-content: space-between;
    flex-wrap: wrap;
}

.toc ul {
    padding: 30px 45px 10px;
}

.toc li {
    width: 300px;
    line-height: 50px;
    margin-bottom: 30px;
}

.toc li a {
    display: block;
    color: #333;
    border-bottom: 1px solid #333;
    transition: color 0.2s,border 0.2s; 
}

.toc li a:hover {
    color: #f05050;
    border-bottom: 1px solid #f05050;
}

.toc li a::before {
    content: "∨";
    padding: 0 10px;
}

.double .flex {
    justify-content: space-between;
    gap: 50px;
}

.double .inner {
    padding: 100px 45px;
}

#room,
#dining,
#multi,
#others {
    width: 440px;
}

.double h3 {
    text-align: center;
    padding-bottom: 10px;
}

.double p {
    text-align: justify;
}

#bath {
    padding: 75px 0 100px;
}

#neigh {
    padding-bottom: 75px;
}

.bg-green #bath,
.bg-green #neigh {
    justify-content: center;
    align-items: center;
    gap: 45px;
}

.bg-green h3 {
    text-align: center;
    padding-bottom: 50px;
}

#bath p,
#bath h3 {
    padding-left: 45px;
    max-width: 280px;
}

#neigh p,
#neigh h3 {
    padding-right: 45px;
    max-width: 360px;
}

/* ブレイクポイント1 */
@media screen and (max-width: 1050px) {

    .toc li {
        width: 250px;
    }

    #bath img {
        width: 500px;
        height: 500px;
    }

    #neigh img {
        max-width: 100%;
        height: 300px;
        object-fit: cover;
    }

    .double img {
        width: 330px;
        height: 264px;
    }

    .double .flex {
        justify-content: space-around;
    }

    #room,
    #dining,
    #multi,
    #others {
        width: 330px;
    }

    h3 {
        font-size: 28px;
    }
}

/* ブレイクポイント2 */
@media screen and (max-width: 880px) {

    .toc li {
        width: 200px;
    }

    #bath img {
        width: 100%;
        height: 500px;
        object-fit: cover;
    }

    .bg-green #bath,
    .bg-green #neigh {
        gap: 30px;
    }

    .bg-green h3 {
        padding-bottom: 30px;
    }

    .double img {
        width: 40vw;
        height: auto;
    }

    #room,
    #dining,
    #multi,
    #others {
        width: 40vw;
    }
}

/* ブレイクポイント3 */
@media screen and (max-width: 700px) {

    .toc li {
        width: 155px;
    }
}

/* ブレイクポイント4 */
@media screen and (max-width: 620px) {

    .toc li {
        width: 200px;
    }

    h2 {
        font-size: 40px;
        padding: 180px 0 10px;
        text-align: center;
    }

    main .visual img {
        height: 300px;
    }

    .h2-text {
        padding: 40px 30px;
    }

    .double .flex {
        flex-direction: column;
        align-items: center;
    }

    .double .inner {
        padding: 100px 45px;
    }

    .double img {
        width: auto;
        height: auto;
        max-width: 440px;
    }

    #room,
    #dining,
    #multi,
    #others {
        width: auto;
        max-width: 440px;
    }

    .bg-green #neigh {
        flex-direction: column;
        gap: 0;
    }

    #neigh p,
    #neigh h3 {
        padding: 0 30px 10px;
        max-width: 100%;
    }

    #neigh p {
        padding: 0 30px 0;
    }
}

/* ブレイクポイント5 */
@media screen and (max-width: 500px) {

    body main p,
    body .toc li a {
        font-size: 15px;
    }

    .toc ul {
        padding: 20px 20px 10px;
    }

    .toc li {
        width: 48%;
        margin-bottom: 20px;
    }

    .toc li a::before {
        padding: 0 3px;
    }

    .double .inner {
        padding: 80px 0;
        text-align: center;
    }

    .double img {
        width: 90vw;
        height: 250px;
        object-fit: cover;
    }

    .double p {
        width: 90vw;
    }

    #neigh img {
        height: 200px;
    }

    #neigh p {
        padding: 0;
        width: 90vw;
    }

    .bg-green #bath,
    .bg-green #neigh {
        gap: 15px;
    }

    #bath p,
    #bath h3 {
        padding-left: 15px;
    }

    #bath {
        padding: 75px 0 75px;
    }

    h3 {
        font-size: 24px;
    }

    .double h3 {
        padding-top: 3px;
    }

}