body {
    font-family: 'Noto Serif JP', serif;
}

.top-banner {
    background: #f8f9fa;
    color: #333;
    width: 100%;
    top: 0; /* ページの上部に配置 */
}

.fs-smallest {
    font-size: 0.5rem; /* 必要に応じて調整してください */
}

.gray {
    color: #555555;
}

.space {
    letter-spacing: 4px;
}
.first-view {
    background: url('images/first_view.jpg') no-repeat;
    background-size: cover;
    background-position: center; /* 画像を中央に配置 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-direction: column;
}

@media (max-width: 348px) {
    .first-view {
        height: 50vh; 
    }
}

@media (max-width: 576px) {
    .first-view {
        height: 50vh; 
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .first-view {
        height: 65vh; 
    }
}

@media (min-width: 769px) and (max-width: 929px) {
    .first-view {
        height: 70vh;
    }
}

@media (min-width: 930px) and (max-width: 1069px) {
    .first-view {
        height: 80vh; 
    }
}

@media (min-width: 1070px) and (max-width: 1210px) {
    .first-view {
        height: 90vh; 
    }
}

@media (min-width: 1211px) and (max-width: 1500px) {
    .first-view {
        height: 120vh; 
    }
}

@media (min-width: 1501px) {
    .first-view {
        height: 150vh; 
    }
}

/* 電話・問い合わせのボタンの位置 */
.adjust-bottom {
    bottom: 7%;
}

@media (max-width: 769px) {
    .adjust-bottom {
        bottom: 0%;
    }
}

.main-title {
    position: absolute;
    top: 80px; /* topbannerのすぐ下に配置 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.first-view .container {
    position: relative;
    z-index: 1;
}

.container {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.section-background {
    position: relative;
    background-color: rgba(242, 240, 242, 1);
    z-index: 0; /* 親要素の z-index を 0 に設定 */
}

.section-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/bg_yuri_1.png'), url('images/bg_yuri_2.png'), url('images/bg_yuri_3.png'), url('images/bg_yuri_4.png'), url('images/bg_yuri_5.png');
    background-position: 110% 5%, -5% 15%, 105% 40%, -5% 50%, 110% 80%;
    background-repeat: no-repeat;
    background-size: 30%, 25%, 25%, 25%, 25%;
    opacity: 0.8; /* 透明度を全ての画像に適用 */
    z-index: -1; /* 背景画像の z-index を -1 に設定 */
    pointer-events: none; /* 背景画像がクリックイベントを受け取らないようにする */
}

.plan-img {
    margin-bottom: 1rem;
}

.btn-custom {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.carousel-indicators {
    background-color: rgba(108, 117, 125, 0.8);
    width: 80%;
    height: 5vh;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.carousel-control-prev,
.carousel-control-next {
    background-color: rgba(108, 117, 125, 0.8);
    width: 10%;
    height: 5vh;
    top: 100%;
    transform: translateY(-100%);
}

/* Google mapのサイズ */
iframe {
    width: 100%;
    aspect-ratio: 16/9; 
}
  

footer {
    background: #f8f9fa;
}