/* ============================================================
   sections.css — ページ内セクションブロック (複数ページで共有)
   .top_read(5p) / .top_feature(4p) / .top_faq(2p) / .top_room(index) / .site
   ============================================================ */

/*.top_read*/
.top_read{background: url("../img/backgrounds/bk_washi.webp");padding: 7rem 0}
.top_read .read{text-align: center;margin-bottom: 120px;font-size: 1.2rem}
.top_read .read h2{margin-bottom: 0px; font-size:2.5rem;font-weight: bold;letter-spacing: 0.1rem !important;color: #000}

.top_read .read .line{width: 60%;text-align: center;margin: 0 auto}
.top_read .read .line2{background: url("../img/backgrounds/line_2.webp") repeat-y center bottom; padding-bottom: 100px;margin-top: 60px}

@media (max-width: 767px) {
.content-area p{font-size: 1rem}
.top_read{padding: 8rem 0 5rem 0;}
.top_read .read{margin-bottom: 5rem;}

.top_read .read h2{font-size:1.9rem;line-height: 3rem}

.top_read .read{font-size: 1rem;line-height: 2}
.top_read .read p{text-align: left;padding: 0 1rem}

}

/*.top_room*/
.top_room .bk{background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/gallery/hero-12.webp");padding: 10rem 0 12rem;background-size: cover;background-position: center;background-attachment: fixed;}
.top_room .bk .relative{position: relative}
.top_room .bk h2{text-align: center;color: #fff;font-weight: bold; font-size: 2rem;margin-top: 0;line-height: 4rem;}
.top_room .bk .ab1{width: 70%;position: relative;margin: 100px 0 120px; z-index: 2;}
.top_room .bk .ab2{width: 70%;position: relative;float: right; z-index: 1;}
.top_room .bk .ab1 .img,
.top_room .bk .ab2 .img{width: 100%; position: relative; z-index: -1;}
.top_room .bk .ab1 .img img,
.top_room .bk .ab2 .img img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.top_room .bk .ab1 .img img {
    object-position: center;
}
.top_room .bk .ab2 .img img {
    object-position: center bottom;
}

.top_room .bk .ab1 .text,
.top_room .bk .ab2 .text{background: url("../img/backgrounds/bk_washi3.webp");padding:50px 30px; width: 450px;position: absolute;left: 80%;bottom: -20%; z-index: 999;}
.top_room .bk .ab2 .text{position: absolute;right: 80%;left: auto; z-index: 999;}
.top_room .bk .ab1 .text h3,
.top_room .bk .ab2 .text h3{font-size: 1.4rem;border-bottom: 2px solid #ECD9BC; padding-bottom: 20px; margin-bottom: 20px;font-weight: bold;}
@media (max-width: 820px) {
.top_room .bk .ab1 .text{left: 60%}
.top_room .bk .ab2 .text{right: 60%}
}
.site { overflow-x: hidden; }
@media (max-width: 767px) {
.top_room .bk{padding: 7rem 0 5rem}
.top_room .bk h2{font-size: 1.5rem;margin-top: 0;line-height: 2rem;}
.top_room .bk .ab1{width: 100%;position: relative;margin: 100px 0 120px}
.top_room .bk .ab2{width: 100%;position: relative;float: right;}
.top_room .bk .ab1 .text,
.top_room .bk .ab2 .text{width: 90%;padding: 1rem;right: 0; left: 0;position: inherit}
.top_room .bk .ab1 .text{float: right;    margin-top: -3rem;margin-bottom: 5rem}
.top_room .bk .ab2 .text{float: left;    margin-top: -3rem;}
.top_room .bk .ab1 .img,
.top_room .bk .ab2 .img{width: 100%;margin: 0}
.top_room .bk .ab1 .text h3,
.top_room .bk .ab2 .text h3{font-size: 1.2rem; padding-bottom: 15px; margin-bottom: 15px;}
}

/*.top_feature*/
.top_feature{padding: 7rem 0;background: url("../img/backgrounds/bk_washi2.webp");background-size: contain}
.top_feature .flex_feature{display: flex;justify-content: space-between;column-gap:40px;margin: 80px 0 }
.top_feature .flex_feature .img{width: 40%}
.top_feature .flex_feature .text{width: 50%;font-size: 1.2rem}
.top_feature .flex_feature .text .no{font-size: 1rem;margin-bottom: 20px}
.top_feature .flex_feature .text .no span{margin-left: 1rem;vertical-align: super}
.top_feature .flex_feature .text h3{margin-bottom: 30px;font-size: 1.4rem; font-weight: bold}
@media (max-width: 767px) {
.top_feature{padding: 5rem 0;}
.top_feature .flex_feature{display: block;margin: 80px 0 }
.top_feature .flex_feature .img{width: 80%;text-align: center;margin: 0 auto 40px}
.top_feature .flex_feature .text{width: 100%;font-size: 1.2rem}
.top_feature .flex_feature .text .no span img{width: 30%;height: 1px}
.top_feature .flex_feature .text h3{margin-bottom: 30px;font-size: 1.2rem; font-weight: bold}

}

/*.top_faq*/
.top_faq {padding: 7rem 0 6rem;background: url("../img/backgrounds/bk_washi.webp");}
.top_faq dt{padding: 1rem 3rem 1rem 2rem;font-weight: bold;background: url("../img/shared/icons/icon_down.webp") no-repeat 96% center var(--c-beige);margin-bottom: 1rem;background-size: 15px;cursor: pointer}
.top_faq dt.active{padding: 1rem 3rem 1rem 2rem;font-weight: bold;background: url("../img/shared/icons/icon_top.webp") no-repeat 96% center var(--c-beige); background-size: 15px}
.top_faq dd{padding:0 2rem 1rem 2rem;font-weight: bold}
@media (max-width: 767px) {
.top_faq {padding: 8rem 0 5rem 0;}
.indent.sp_no_indent{padding: 0}
}

/* ---------- トップのメインスライダー ----------
   HTML の style="background-image:..." から移設 */
.slide_hero10{background-image: url("../img/gallery/hero-10.webp")}
.slide_hero06{background-image: url("../img/gallery/hero-06.webp")}
.slide_hero07{background-image: url("../img/gallery/hero-07.webp")}