@charset "utf-8";
/* main
---------------------------------------------------*/
html {
	overflow-x: hidden;
}
h5 {
    margin-bottom: 2rem;
    font-size: 1.05em;
}
.highlight {
    font-size: 2.5em; /* 元のh5より大きく */
    font-weight: bold; /* 必要なら太字に */
}
.facilities {
    margin: 0 auto;
    padding: 0 40px 0 40px;

}
.fc {
	display: flex;
	align-items: center;
	max-width: 1320px;
	padding: 0 60px 0 60px;
}
.image,
.fImg,
.fText {
	width: 50%;
}

.fc {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    gap: 100px;
    padding-bottom: 60px;
}
.fc:last-child {
    padding-bottom: 0;     /* 最後だけ余白なし */
  }

/* 表示状態 */
.fc.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 左右交互のスライド効果（オプション） */
.fc:nth-child(odd) {
    transform: translateX(-40px);
}

.fc:nth-child(even) {
    transform: translateX(40px);
}

.fc.is-visible:nth-child(odd),
.fc.is-visible:nth-child(even) {
    transform: translateX(0);
}

/* 画像とテキストに遅延をつける */
.fc .fImg {
    transition-delay: 0.1s;
}
.image {
    transition-delay: 0.1s;
}

.fc .fText {
    transition-delay: 0.2s;
}
/* カルーセル：外枠 */
.fImg.carousel {
    position: relative;
    aspect-ratio: 6 / 4;
    overflow: hidden;
}

/* スライド基本設定 */
.fImg.carousel .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    filter: blur(25px);
    transform: scale(1.08); /* 中心からじんわり */
    transition: opacity 2.5s ease, filter 2.5s ease, transform 2.5s ease;
}

/* 必ず1枚目は表示しておく（初期白抜け防止） */
.fImg.carousel .slide:first-child {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
}

/* 画像サイズ調整 */
.fImg.carousel .slide > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 動的アニメーションを適用するクラス */
.slide-active {
    opacity: 1 !important;
    filter: blur(0px) !important;
    transform: scale(1) !important;
}


/* レスポンシブ対応 */
@media (max-width: 700px) {
    .fc {
        display: flex;
        flex-direction: column; /* 上下に並べる */
        max-width: 100%;
        gap: 0;
        padding: 0;
    }
     /* 偶数番目の .fc は画像とテキストを入れ替える */
    .fc:nth-child(even) {
        flex-direction: column-reverse; /* テキスト→画像に変更 */
    }
    .image,
    .fImg,
    .fText {
        width: 100%;       /* ← none ではなく 100% にする */
    }
    h5 {
    margin-bottom: 1.2rem;
    font-size: 1.05em;
    }
    .fText {
        margin-bottom: 40px;
    }
}