<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
 
body { width: 100%; font-family: 'SUIT-Regular'; color: #272727; position: relative; background-color: #fff; font-size: 0.9rem; } 
section { position: relative; height: 100vh; background: #fff;}



.content-box { width: 1400px; margin: 0 auto; } 
.white-box { position: absolute; background-color: #fff; } 
.swiper-slide { background-size: cover; background-repeat: no-repeat; background-position: center; } 
.img-box { background-size: cover; background-position: center; } 


/* pc */

main { background: url('../img/sub4/4/image1.jpg') no-repeat center/cover; } 
main h1 { position: absolute; top: 50%;  transform: translate(0%, -50%); font-size: 55px; text-align: center; color: #fff; width: 100%; } 


.facility-info { height: auto; } 
.facility-info .content-box { margin: 100px auto; display: flex; } 
.facility-info .content-box&gt; :first-child { width: 50%; height: 525px; background-image: url('../img/sub4/4/image2.jpg');} 
.facility-info .content-box&gt; :last-child { width: 50%; padding-top: 40px; padding-left: 90px; } 
.facility-info .content-box div h2 { font-size: 40px; font-family: '-KITA-Regular'; margin-bottom: 90px; } 
.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&gt; :first-child { width: calc(50% - 100px); height: 850px; background-position: 25%; margin-top: 440px; background-image: url('../img/sub4/4/image3.jpg');} 
.facility-details .content-box&gt; :last-child { width: 50%; display: flex; flex-direction: column; } 
.facility-details .content-box&gt; :last-child&gt; :first-child { width: 100%; height: 935px; margin-bottom: 100px; background-image: url('../img/sub4/4/image4.jpg');} 
.facility-details .content-box&gt; :last-child&gt; :last-child { width: 100%; height: 453px; background-image: url('../img/sub4/4/image1.jpg');} 
.facility-details button { padding: 15px 30px; margin: 100px auto; display: block; border-radius: 25px; text-transform: uppercase; background: none; border: 1px solid #272727; } 


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

@media screen and (max-width: 1400px){
    .content-box { width: calc(100% - 50px); } 
}

@media screen and (max-width: 1200px) { } 


@media screen and (max-width: 1024px){
    .content-box { width: calc(100% - 50px); } 
}


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

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


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


    .other-facility { padding-bottom: 100px; } 
    .other-facility .line { height: 100px; } 
    .other-facility h2 { font-size: 35px; margin: 50px 0; text-align: center; } 
    .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&gt; :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:10px; font-size: 18px; text-shadow: 0 1px 3px rgba(0,0,0,.25);} 
    .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: 60px; } 
}</pre></body></html>