@charset "utf-8";
section { background: #fff; } 
.content-box { margin: 0 auto; } 
.img-box { background-size: cover; background-position: center; } 

/* pc */
/* main { background: url('../img/sub3/1/image1.jpg') no-repeat center/cover; } */
main .main-slide .swiper-wrapper .s1 { background-image: url('../img/sub3/1/image1.jpg'); }
main .main-slide .swiper-wrapper .s2 { background-image: url('../img/sub3/1/image2.jpg'); }
main .main-slide .swiper-wrapper .s3 { background-image: url('../img/sub3/1/image3.jpg'); }
main .main-slide .swiper-wrapper .s4 { background-image: url('../img/sub3/1/image4.jpg'); }
main .main-slide .swiper-wrapper .s5 { background-image: url('../img/sub3/1/image5.jpg'); }
main .main-slide .swiper-wrapper .s6 { background-image: url('../img/sub3/1/image6.jpg'); }
main .main-slide .swiper-wrapper .s7 { background-image: url('../img/sub3/1/image7.jpg'); }
main h1 { position: absolute; top: 50%; transform: translate(0%, -50%); font-size: 55px; text-align: center; color: #fff; width: 100%; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); z-index: 1; } 
main h1 span { display: block; font-family: 'SUIT-Regular'; font-size: 13px; line-height: 1em; font-weight: 400; margin-bottom: 10px; }


.facility-info { height: auto; border: 1px solid transparent; } 
.facility-info .content-box { margin: 100px auto; display: flex; } 
.facility-info .content-box> :first-child { background-image: url('../img/sub3/1/image2.jpg'); width: 50%; height: 525px; } 
.facility-info .content-box> :last-child { width: 50%; padding-top: 40px; padding-left: 90px; } 
.facility-info .content-box div h2 { font-size: 32px; font-family: '-KITA-Regular'; margin-bottom: 90px; font-weight: 400; } 
.facility-info .content-box div h2 span { display: block; font-size: 12px;  line-height: 1em; font-weight: 400; font-family: 'SUIT-Regular'; }
.facility-info .content-box div p { font-size: 14px; color: #757575; line-height: 2rem; } 


.facility-details { position: relative; height: auto; overflow: hidden; } 
.facility-details .back-txt { position: absolute; top: 230px; color: #f9f9f9; font-size: 120px; text-transform: uppercase; width: max-content; z-index: 0; } 
.facility-details .content-box { position: relative; display: flex; justify-content: space-between; margin: 0 auto; z-index: 5; } 
.facility-details .content-box> :first-child { width: calc(50% - 100px); height: 850px; margin-top: 440px; background-image: url('../img/sub3/1/image5.jpg'); background-position: 60%; } 
.facility-details .content-box> :last-child { width: 50%; display: flex; flex-direction: column; } 
.facility-details .content-box> :last-child> :first-child { width: 100%; height: 935px; margin-bottom: 100px; background-image: url('../img/sub3/1/image4.jpg'); } 
.facility-details .content-box> :last-child> :last-child { width: 100%; height: 453px; background-image: url('../img/sub3/1/image6.jpg'); } 
.facility-details button { padding: 15px 30px; margin: 100px auto; display: block; } 
.facility-details button:hover a { color: #fff; }


.other-facility { height: auto; padding-bottom: 120px; } 
.other-facility .line { width: 50%; height: 170px; border-right: 1px solid #ccc8c2;; } 
.other-facility p { font-size: 14px; margin: 50px 0 15px; line-height: 1em; font-weight: 400; text-align: center; }
.other-facility h2 { font-size: 50px; font-family: '-KITA-Regular'; margin: 0 0 50px; text-align: center; font-weight: 400; } 
.other-facility ul { display: flex; justify-content: space-between; height: 400px; } 
.other-facility ul li { position: relative; width: calc(100% / 5); border-radius: 8px; transition: .6s; padding: 40px 0 0 40px; } 
.other-facility ul .f1 { background-image: url('../img/sub3/1/image2.jpg'); } 
.other-facility ul .f2 { background-image: url('../img/sub3/2/image2.jpg'); } 
.other-facility ul .f3 { background-image: url('../img/sub3/3/image1.jpg'); } 
.other-facility ul .f4 { background-image: url('../img/sub3/4/image1.jpg'); } 
.other-facility ul .f5 { background-image: url('../img/sub3/5/image1.jpg'); } 
.other-facility ul li:hover { width: 630px; } 
.other-facility ul li:hover a { display: block; } 
.other-facility ul> :not(:last-child) { margin-right: 10px; } 
.other-facility ul> :nth-child(6) { background-position: 78%; } 
.other-facility ul> :last-child { background-position: 60%; } 
.other-facility ul li a { display: none; color: #fff; font-size: 40px; font-family: '-KITA-Regular'; z-index: 2; /* transform: scale(0); */ transition: .6s;  width: 100%; height: 100%; line-height: 1.5em; text-shadow: 0 1px 2px rgba(0, 0, 0, .3) } 
.other-facility ul li a p{ display: none;}


footer { border-top: 1px solid #ddd; }

@media screen and (max-width: 1024px){
    .facility-info .content-box div p { line-height: 1.5em; }
    .facility-details .content-box> :first-child { width: calc(50% - 40px); }
}

@media screen and (max-width: 840px) {
    main {height: 65vh;} 
    main h1 { font-size: 40px; }  

    .facility-info { height: auto; } 
    .facility-info .content-box { margin: 80px auto; border: 0.5px solid #ccc8c2; flex-direction: column; } 
    .facility-info .content-box>div { width: 100%; } 
    .facility-info .content-box> :first-child { width: 100%; height: 430px; } 
    .facility-info .content-box> :last-child { width: 100%; padding: 40px; } 
    .facility-info .content-box div h2 { margin-bottom: 30px;} 

    .facility-details .back-txt { display: none; } 
    .facility-details .content-box { flex-direction: column; } 
    .facility-details .content-box> :first-child { width: 100%; height: 400px; margin-top: 0px; margin-bottom: 20px; background-position: 50%; } 
    .facility-details .content-box> :last-child { width: 100%; background-position: 80%; } 
    .facility-details .content-box> :last-child> :first-child { height: 400px; margin-bottom: 20px; background-position: 75%; } 
    .facility-details .content-box> :last-child> :last-child { height: 400px; } 

    .other-facility { padding-bottom: 100px; } 
    .other-facility .line { height: 100px; } 
    .other-facility h2 { font-size: 35px; } 
    .other-facility ul { display: flex; justify-content: space-between; flex-direction: column; height: auto; } 
    .other-facility ul li { position: relative; width: 100%;  height: 60px; border-radius: 5px; padding: 0px 0 0 0px; overflow:hidden;} 
    .other-facility ul> :not(:last-child) { margin-right: 0px; margin-bottom: 10px; } 
    .other-facility ul li a { display: block;  position: absolute; width: 100%; height: 100%; left:0; top: 0; padding-left:10px; padding-top:8px; font-size: 18px; text-shadow: 0 1px 3px rgba(0,0,0,.25); font-weight: 400;} 
    .other-facility ul li a span { display: none; }
    .other-facility ul li a p{ display: block; position: absolute; width:100%; text-align: right; font-size:24px; bottom: 0%; right:0; transform: translateY(50%); text-shadow: 0 1px 3px rgba(0,0,0,.25); opacity: 0; transition: all .55s ease-in-out;}
    .other-facility ul li a p i{ color:#fff; font-size: 32px; } 
    .other-facility ul li.open a p{ opacity: 1; bottom: 11%; right: 10px;}
    .other-facility ul li.active::after { display: none; } 
    .other-facility ul li:hover { width: 100%;  height: 70px; } 
}

@media screen and (max-width: 600px) {
    .facility-info .content-box> :last-child { padding: 40px 20px; }
    .facility-details .content-box> :first-child, .facility-details .content-box> :last-child> :first-child, .facility-details .content-box> :last-child> :last-child { height: 350px; }
}