@charset "utf-8";

/* 設備紹介 */
.amenities {
    padding: 80px 8%;
}

.amenities_content {
    margin-top: 44px;
}

.amenities_item {
    padding: 16px 0;
    border-bottom: 1px dashed #A2A2A2;
}

.small_topic {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}

.item_title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 160%; /* 28.8px */
    letter-spacing: 0.54px;
}

.small_topic img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.amenities_txt {
    margin-top: 10px;
}

.amenities_txt p{
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.48px;
    margin-top: 8px;
}

.item__content_big {
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0.54px;
}

.item__content_important {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 160%;
    letter-spacing: 0.48px;
}

.ame_price {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.48px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.ame_price:hover {
    opacity: 0.6;
}

@media screen and (min-width:768px) {
    .amenities {
        padding: 80px 10% 40px;
    }

    .spBr {
        display: none;
    }

    .topic_amenities {
        font-size: 2.5rem;
    }

    .amenities_item {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
    }

    .amenities_txt {
        margin-top: 0;
        width: 54.86vw;
    }

    .amenities_txt p {
        margin-top: 0;
        font-size: 1.8rem;
        font-weight: 400;
        line-height: 160%; /* 28.8px */
        letter-spacing: 0.54px;
    }

    .item__content_important {
        font-size: 1.9rem;
        font-weight: 600;
        line-height: 160%;
        letter-spacing: 0.57px;
    }

    .small_topic {
        width: 250px;
    }

    .small_topic img {
        width: 28px;
        height: 28px;
    }

    .item_title {
        font-size: 2rem;
        font-weight: 700;
        line-height: 160%; /* 32px */
        letter-spacing: 0.6px;
    }
}

@media screen and (min-width:1024px) {
    .amenities {
        padding: 100px 12.5% 40px;
    }

    .topic_amenities {
        font-size: 3.8rem;
    }
}


/* 過ごし方 */
.stay {
    padding: 0 8% 80px;
}

.section__title {
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl; 
    text-align: left;
    font-size: 2rem;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 3px;
    margin: 0 auto;
}

.subtitle__en {
    text-align: center;
    font-family: "Playfair Display";
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 150%; /* 19.5px */
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

.stay_content {
    margin-top: 48px;
}

.stay_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 48px;
}

.stay_catch {
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 150%; /* 27px */
    letter-spacing: 0.54px;
    border-bottom: 1px solid #8BA69C;
    position: relative;
    z-index: 10;
}

.stay_catch::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(139, 166, 156, 0.35);
    left: -19px;
    top: -7px;
}

.stay_text_content {
    margin-top: 24px;
    text-align: left;
}

.stay_text_content p {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 180%; /* 27px */
    letter-spacing: 0.75px;
    margin-top: 16px;
}

.stay_photo {
    margin-top: 16px;
}

/* 過ごし方　TB */
@media screen and (min-width:768px) {
    .stay {
        padding: 80px 10% 40px;
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 60px;
    }

    .section__title {
        font-size: 2.5rem;
        font-weight: 700;
        line-height: 130%; /* 49.4px */
        letter-spacing: 1.14px;
    }

    .subtitle__en {
        font-size: 1.5rem;
    }

    .stay_content {
        display: flex;
        flex-direction: column;
        gap: 80px;
        margin-top: 80px;
    }

    .stay_item {
        margin-top: 0;
    }
}

/* 過ごし方　PC */
@media screen and (min-width:1024px) {
    .stay {
        padding: 100px 12.5% 40px;
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 80px;
    }

    .section__title {
        font-size: 3.8rem;
        font-weight: 700;
        line-height: 130%; /* 49.4px */
        letter-spacing: 1.14px;
    }

    .subtitle__en {
        font-size: 2rem;
    }

    .stay_content {
        display: flex;
        flex-direction: column;
        gap: 120px;
        margin-top: 100px;
    }

    .stay_item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }

    .stay_paragraph {
        flex: 1;
        text-align: left;
    }

    .stay_catch {
        font-size: 2rem;
        font-weight: 700;
        line-height: 150%; /* 30px */
        letter-spacing: 1.4px;
    }

    .stay_text_content {
        margin-top: 24px;
    }

    .stay_text_content p{
        font-size: 1.8rem;
        font-weight: 400;
        line-height: 180%; /* 32.4px */
        letter-spacing: 0.9px;
        margin-top: 16px;
    }

    .stay_photo {
        flex: 1;
    }

    .stay_item:nth-of-type(2n) {
        flex-direction: row-reverse;
    }
}


/* 宿泊料金 */
.topic {
    color: #1B1B1B;
    font-family: "Noto Serif JP";
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 2.2px;
    text-align: center;
    position: relative;
}


.topic::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 1px;
    background-color: #A2A2A2;

}

.price {
    padding: 0 8% 80px;
}

.price_payment {
    margin-top: 32px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.payment_item {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid #5E7E68;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.8px;
}

.price_topic {
    margin-top: 40px;
    background: #C3D2CB;
    padding: 2px 0;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    line-height: 160%; /* 32px */
    letter-spacing: 1px;
}

.price_price {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.price_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #A2A2A2;
}

.customer {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.48px;
}

.price_group {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.48px;
}

.price_block_kitchen {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.customer_detail {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 160%; /* 22.4px */
    letter-spacing: 0.42px;
}

.kitchen_price_topic {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.48px;
}

.customer_number {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.48px;
}

.kitchen_price {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.price_small {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 25.6px; /* 213.333% */
    letter-spacing: 0.36px;
}

.price_category {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.48px;
}

.category_ditail {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 160%; /* 22.4px */
    letter-spacing: 0.42px;
}

/* 料金　TB */
@media screen and (min-width:768px) {
    .price {
        padding: 80px 10% 40px;
    }

    .topic {
        font-size: 2.5rem;
        margin-bottom: 40px;
    }

        
    .topic::after {
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90px;
    }


    .price_payment {
        margin-top: 50px;
        gap: 20px;
    }

    .payment_item {
            padding: 5px 10px;
            font-size: 1.8rem;
    }

    .price_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 50px;
    }

    .price_block {
        width: 500px;
    }

    .price_topic {
        font-size: 2.1rem;
    }

    .customer,
    .price_group,
    .kitchen_price_topic,
    .customer_number,
    .price_category {
        font-size: 1.7rem;
    }

    .price_small {
        font-size: 1.4rem;
    }

    .category_ditail {
        font-size: 1.5rem;
    }

    

}

/* 料金　PC */
@media screen and (min-width:1024px) {
    .topic {
        font-size: 3.8rem;
    }

    .price {
        padding: 100px 12.5% 40px;
    }

    .price_content {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 5.5vw;
    }

    .topic_price {
        font-size: 3.8rem;
    }

    .price_topic {
        font-size: 2.4rem;
    }

    .customer,
    .price_group,
    .kitchen_price_topic,
    .customer_number,
    .price_category {
        font-size: 1.8rem;
    }

    .price_small {
        font-size: 1.5rem;
    }

    .category_ditail {
        font-size: 1.6rem;
    }
}

/* お問い合わせ */
.contact {
    padding: 0 8%;
    text-align: center;
}

.faq_text_block {
    margin-top: 48px;
    text-align: left;
}

.faq_text {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 180%; /* 27px */
    letter-spacing: 0.75px;
}

.contact__text_block {
    margin-top: 48px;
    text-align: left;
}

.contact_text {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 180%; /* 27px */
    letter-spacing: 0.75px;
}

.btn--faq,
.btn--contactform {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 58px;
    gap: 15px;
    margin: 24px auto 0;
    width: 100%;
    max-width: 380px;
    border-radius: 5px;
    border: 1px solid #303F36;
    background: #E8EFEC;
}

.btn--contactform {
    background-color: #ffffff;
}

.btn--faq:hover,
.btn--contactform:hover {
    opacity: 0.6;
}

.btn--faq_txt,
.btn--contactform_txt {
    color: #303F36;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.8px;
}



/* お問い合わせ　PC */
@media screen and (min-width:768px) {
    .contact {
        padding: 80px 12.5% 40px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 80px;
    }

    .contact_content {
        width: 34.72vw;
        max-width: 500px;
    }

    .contact__title {
        margin: 0;
    }

    .reservation__text_block {
        margin-top: 80px;
    }

    .reservation_text {
        font-size: 1.8rem;
        letter-spacing: 0.9px;
        margin-top: 8px;
    }

    .btn--reservation--wrap {
        margin-top: 40px;
    }

    .faq_text,
    .contact_text {
        font-size: 1.8rem;
        letter-spacing: 0.9px;
        margin-top: 8px;
    }

    
    .contact__text_block {
        margin-top: 60px;
        text-align: left;
    }

    .btn--faq,
    .btn--contactform {
        gap: 20px;
        margin-top: 32px;
        margin-inline: 0;
        width: 100%;
        max-width: 380px;
    }

    .btn--faq_txt,
    .btn--contactform_txt {
        font-size: 2rem;
        font-weight: 700;
        line-height: 160%; /* 25.6px */
        letter-spacing: 0.8px;
    }

    .btn--reservation {
        font-size: 2rem;
        font-weight: 700;
        line-height: 160%; /* 25.6px */
        letter-spacing: 0.8px;
    }

}




/* 予約 */
.reservation {
    padding: 80px 8%;
}

.reservation__text_block {
    text-align: center;
    margin-top: 50px;
}

.reservation_text {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 160%; /* 24px */
    letter-spacing: 0.45px;
    text-align: left;
    margin-top: 8px;
}

.btn--reservation--wrap {
    margin: 32px auto 0;
    width: 100%;
    max-width: 380px;
}

/* 予約　PC */
@media screen and (min-width:768px) {
    .reservation {
        padding: 120px 13% 120px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 80px;
    }

    .reservation__title {
        margin: 0;
    }

    .reservation__text_block {
        margin-top: 48px;
        width: 34.72vw;
        max-width: 500px;
    }

    .reservation_text {
        font-size: 1.8rem;
        letter-spacing: 0.9px;
        margin-top: 8px;
    }

    .btn--reservation--wrap {
        margin: 32px 0 0;
    }

}