/* main_visual */
.area_visual, .area_visual ul li{position:relative; height:100vh; width:100% !important; background-position:50%; background-size:cover;}
.area_visual > img{z-index:90; position:absolute;}
.area_visual > img.label01{top:5%; right:15%;}
.area_visual > img.label02{top:16%; right:15%;}
.area_visual .visual-item{ position: relative; isolation: isolate; }
.area_visual .visual-item::before{ content: ''; position: absolute; inset: 0; background: hsla(0, 0%, 0%, 0.3); z-index: -1; }
.area_visual ul li .text{position:absolute; margin:0 auto; left:0; bottom:150px; width: 100%; color:#fff; box-sizing: border-box;}
.area_visual ul li .text .wrapper > h2{line-height:1.2; margin-bottom:20px; padding-top:50px; font-size:65px; color:#fff; font-weight:700; letter-spacing:5px; animation: text-focus-in 1s 1 linear;}
.area_visual ul li .text .wrapper > p{line-height:1.8; font-size:18px; font-weight:500; animation: text-focus-in 1.5s 1 linear;}
.area_visual ul li .text .wrapper{position:relative;}

.area_visual ul li .text .pg_area{position:absolute; left:0; top:0; width:180px; height:30px; margin:0 auto; text-align:center;}
.area_visual ul li .text .pg_area .num{position: relative;left:0;top: 0;color:#b6b6b6;width: 180px;}
.area_visual ul li .text .pg_area .num span{position:relative;display:block;color:#fff;font-size: 16px;position: absolute;}
.area_visual ul li .text .pg_area .num span:first-child{top: -13px;left: 0;}
.area_visual ul li .text .pg_area .num span:last-child{position:absolute;top: -13px;right: 0;}
.area_visual ul li .text .pg_area > i{display:block; position:relative;  height:1px; width:105px; margin: 0 auto; background:rgba(255,255,255,0.3);}
.area_visual ul li .text .pg_area > i:after{content:""; position:absolute; opacity:0.9; top:0; left:0; height:100%; background:#ececec; animation:linefill 4s 0s forwards;}

.area_visual .bx-controls.bx-has-controls-direction{position:absolute; width:100%; margin:0 auto; bottom:80px; z-index: 99;}
.area_visual .bx-controls-direction{width:1200px; margin:0 auto;}
.area_visual .bx-controls.bx-has-controls-direction > div > a{display:inline-block; opacity:0.8;width:46px;height:40px;font-size:0;text-indent:-9999px;transition:all 0.3s ease-out 0s;bottom: 50px;z-index: 9999;}
.area_visual .bx-controls.bx-has-controls-direction > div > a:last-child:after{transform:rotate(180deg); -webkit-transform:rotate(180deg);}
.area_visual .bx-controls.bx-has-controls-direction > div > a:first-child{margin-right:35px;}
.area_visual .bx-controls.bx-has-controls-direction > div > a:hover{opacity:1;}

.area_visual a.bx-prev{background:url(../images/main/slide_left.png) no-repeat 50% 50%;}
.area_visual a.bx-next{background:url(../images/main/slide_right.png) no-repeat 50% 50%;}
.area_visual a.bx-prev:before{left:-15px;}
.area_visual a.bx-next:before{right:-15px;}
.area_visual .bx-controls.bx-has-controls-direction > div > a:hover:before{opacity:0.2; transition:0.5s}

.main_tit{line-height:1; margin-bottom:40px; color:#222; font-size:40px; text-align:center;}

/* ani */
@keyframes linefill{0%{width:0%;}100%{width:100%;}}
@keyframes bounce{0%, 15%, 38%, 60%, 75% {transform: translateY(0);}30%{transform: translateY(10px);}45%{transform: translateY(5px);}}
@keyframes bounce2{0%, 60% {transform: translateY(0);}20%, 80%{transform: translateY(4px);} 40%, 100%{transform: translateY(-2px);}}
.text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;
}

@keyframes text-focus-in {0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0;}100% { -webkit-filter: blur(0px);filter: blur(0px); opacity: 1;}}

/* pension */
.area_pension{overflow:hidden; margin:120px 0}
.area_pension .image{float:left; width:750px;}
.area_pension .image ul li{float:left; width:48%;}
.area_pension .image ul li:first-child{margin:50px 4% 0 0;}
.area_pension .text{float:right; margin-top:70px; text-align:right;}
.area_pension .text h2{font-size:40px; color:#222; text-align:right;}
.area_pension .text p{line-height:1.9; margin:22px 0 60px 0; color:#666; font-weight:300}
.area_pension .text a{display:inline-block; padding:15px 35px; background:#142e52; color:#fff; font-size:14px;}

/* room */
.area_room{overflow:hidden;}
.left_slide{position:relative; float:left; width:38%;}
.left_slide .list li{width:100%; height:780px;}
.left_slide .bx-pager.bx-default-pager {z-index:98; position:absolute; bottom:50px; left:50%; margin-left:-37.5px;}
.left_slide .bx-pager-item{float:left; margin:0 8px;}
.left_slide .bx-pager-item .bx-pager-link{opacity:0.5; display:block; width:9px; height:9px; background:#fff; border-radius:50%;  text-indent:-9999px; transition:all 0.3s ease-in-out 0s;}
.left_slide .bx-pager-item .bx-pager-link.active{opacity:1; background:#000; transition:all 0.3s ease 0s;}

.right_room{position: relative; box-sizing:border-box; float:left; width:62%; height:780px; padding:120px 0 100px 0; background:#27292d;}
.right_room .inr{margin-left:80px;}
.right_room .swiper-slide {position:relative;width:370px;transition:0.5s;/* height: 400px; */}
.right_room .swiper-slide a{display:block;width:100%;height: 454px;}
.right_room .swiper-slide .image{width:100%;height: 100%;object-fit: cover;}
.right_room .swiper-slide img{width:100%;height: 100%;object-fit: cover;}
.right_room .swiper-slide:before{opacity:0; content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:rgba(0,0,0,0.7);transition:0.5s}
.right_room .swiper-slide h3{position:absolute; left:30px; bottom:30px; font-size:16px; color:#fff; font-weight:300; transition:0.3s}
.right_room .swiper-slide b{display:block; font-size:23px; color:#fff;}
.right_room .swiper-slide span{opacity:0; position:absolute; display:inline-block; line-height:90px; left:50%; top:50%; width:90px; height:90px; border-radius:50%; border:1px solid rgba(255,255,255,0.5); text-align:center; color:#fff; font-size:14px; font-weight:300;transform: translate(-50%, -50%); transition:0.5s}
.right_room .swiper-slide:hover span{opacity:1; transition:0.5s}
.right_room .swiper-slide:hover h3{opacity:0; transition:0.3s }
.right_room .swiper-slide:hover:before{opacity:1;transition:0.5s}

.right_room .btn{position:absolute; top:130px; right:40%; width:120px;}
.right_room div.swiper-button-next{right:0;}
.right_room div.swiper-button-next:after{display:block; position:absolute;  width:100%; height:100%; background:url(../images/main/slide_right.png) no-repeat 50%; font-size:0px;}
.right_room div[class*="swiper-button"]:focus{outline:none;}
.right_room div.swiper-button-prev{left:0;}
.right_room div.swiper-button-prev:after{display:block; position:absolute; left:0; width:100%; height:100%; background:url(../images/main/slide_left.png) no-repeat 50%; font-size:0px;}
.right_room div[class*="swiper-button"]{display:inline-block; width:46px; height:20px; margin-top:0; transition:0.5s}

.right_room h2{; text-align:left; margin-left:80px; color:#fff;}

/* special */
.area_special{clear: both; overflow:hidden; margin:120px 0 }
.area_special .wrapper > div{position:relative; float:right; width:calc(42% - 10px); height:715px; background-size:cover; background-position:50% 70%;}
.area_special ul{float:left; width:58%; height:715px;}
.area_special ul li {position:relative; float:left; background-size:cover; background-position:50%;}
.area_special ul li:nth-of-type(1) {float:none; width:100%; height:400px; margin-bottom:10px;}
.area_special ul li:nth-of-type(2) {width:calc(50% - 5px); height:305px;}
.area_special ul li:nth-of-type(3){width:calc(50% - 5px); height:305px; margin-left:10px;}
.area_special .wrapper p{position:absolute; left:30px; bottom:30px; color:#fff;}
.area_special .wrapper a{display:block; width:100%; height:100%;}

/* travel */
.area_travel{overflow:hidden;}
.area_travel .swiper-slide {opacity:0.4; position:relative; width:1200px; margin: 0 auto; transition:0.5s}
.area_travel .gallery_top{width:1200px; overflow:visible;}
.area_travel .swiper-slide .image img{width:100%;}
.area_travel .swiper-slide.swiper-slide-active{opacity:1;}
.area_travel h2{text-align:center;}

.area_travel .btn{position:absolute; width:100%; bottom:54px;}
.area_travel .btn .wrapper{position:relative;}
.area_travel div.swiper-button-next{right:40px;}
.area_travel div.swiper-button-next:after{display:block; position:absolute;  width:100%; height:100%; background:url(../images/main/slide_right.png) no-repeat 50%; font-size:0px;}
.area_travel div[class*="swiper-button"]:focus{outline:none;}
.area_travel div.swiper-button-prev{left:auto; right:105px;}
.area_travel div.swiper-button-prev:after{display:block; position:absolute; left:0; width:100%; height:100%; background:url(../images/main/slide_left.png) no-repeat 50%; font-size:0px;}
.area_travel div[class*="swiper-button"]{display:inline-block; width:46px; height:20px; margin-top:0; transition:0.5s}

/* sns */
.area_insta{margin:120px 0;}
.snsList:after{content:''; display:block; clear:both;}
.snsList > li{float:left; width:-webkit-calc(25% - 20px); width:calc(25% - 20px);  margin-right:26px;}
.snsList > li:last-child{margin-right:0;}
.snsList > li a{display:block; transition:all 0.3s ease 0s;}
.snsList > li a > *{display:block;}
.snsList > li a > *:not(.img){padding-left:15px; padding-right:15px; background:#fff;}
.snsList > li .img-box{box-sizing:border-box;overflow:hidden;position:relative;width:100%;padding-top: 100%;background:#fff url(../images/board/no_image.gif) no-repeat 50% 50%; text-align:center;transition:opacity 0.5s ease-out 0s;}
.snsList > li .img-box img{position:absolute; top:0; left:0; width:100%;  transition:all 0.5s ease-out 0s;}


@media all and (max-width:1279px){
	.area_visual .bx-controls-direction{width:96%;}
	.area_pension .image ul li img{width:100%}

	.area_pension .image{width:55%;}
	.area_pension .text{width:40%;}

	.left_slide{display:none;}
	.right_room{width:100%;}
	.right_room .inr{width:96%; margin:0 auto;}
	
	.area_travel .gallery_top{width:80%;}
	.area_travel .swiper-slide{width:900px;}
	.area_travel .swiper-slide .image img{width:100%;}
	.area_travel div.swiper-button-prev{left:50%; right:auto; margin-left:-60px;}
	.area_travel div.swiper-button-next{left:50%; right:auto; margin-right:60px;}

}

@media all and (max-width:980px){
	.right_room h2{margin-left:4%}

	.area_pension .text{margin-top:0}
	.area_pension .text p{margin-bottom:40px; word-break:keep-all;}
	.area_pension .text p br{display:none;}
	
	.right_room h2{font-size:22px; margin-bottom:25px; margin-left:2%;}
	.main_tit,
	.area_pension .text h2{font-size:22px; margin-bottom:25px;}
	
	.area_special .wrapper > div,
	.area_special ul{height:550px;}

	.area_special ul li:nth-of-type(1){height:300px;}
	.area_special ul li:nth-of-type(2),
	.area_special ul li:nth-of-type(3){height:240px;}
}

@media all and (max-width:767px){
	.area_visual ul li .text .wrapper > h2{margin-bottom:12px; font-size:30px;}
	.area_visual ul li .text .wrapper > p{font-size:14px; word-break:keep-all;}
	
	.area_pension{margin:40px 0}
	.area_pension .image ul li{width:90%;}
	.area_pension .image ul li:first-child{display:none;}
	.area_pension .wrapper{display:flex; align-items: center;}
	.area_pension .text h2{text-align:left;}
	.area_pension .text{width:45%; text-align:left;}
	.area_pension .text p{line-height:1.5}
	
	.right_room{height:auto; padding:40px 0}
	.right_room .inr{width:94%;}
	.right_room h2{margin-left:3%;}
	.right_room .swiper-slide{width:300px;}
	.right_room .btn{top:45px; right:50px;}
	.right_room .swiper-slide b{font-size:18px;}
	.right_room .swiper-slide h3{left:15px; bottom:15px; font-size:14px;}

	.area_special{margin:40px 0}
	.area_special ul{width:100%; height:auto;}
	.area_special ul li:before{content:''; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background:rgba(0,0,0,0.4) }
	.area_special ul li:nth-of-type(1){float:left; width: calc(33.3% - 5px); height:200px; margin-right:7px;}
	.area_special ul li:nth-of-type(2){width: calc(33.3% - 5px); height:200px;}
	.area_special ul li:nth-of-type(3){width: calc(33.3% - 5px); height:200px; margin-left:7px;}
	.area_special .wrapper > div{width:100%; height:250px;}
	.area_special .wrapper > div:before{content:''; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background:rgba(0,0,0,0.4) }

	.area_special .wrapper p{width:100%; left:0; bottom:10px; text-align:center;}
	
	.area_travel{width:94%; margin:0 auto;}
	.area_travel .gallery_top{width:100%;}
	.area_travel .swiper-slide{width:100%;}
	.area_travel .btn{display:none;}
	.area_travel .swiper-pagination{position:relative; width:100%; height:4px; background:#efefef; border-radius:10px;}
	.area_travel  .main_pagination{position:relative; width:100%; margin-top:20px;}
	.area_travel .swiper-pagination-progressbar-fill{background: #142e52;}

	.area_insta{margin:40px 0}
	.snsList > li{width: -webkit-calc(50% - 5px);  width: calc(50% - 5px); margin: 0 10px 10px 0;}
	.snsList > li:nth-child(2n){margin-right:0}


}

@media all and (max-width:600px){
	.area_visual ul li .text .pg_area .num,
	.area_visual ul li .text .pg_area{width:160px;}
	.area_visual ul li .text .pg_area > i{width:85px;}
	.area_visual ul li .text .pg_area .num span{font-size:14px;}
	.area_visual .bx-controls.bx-has-controls-direction > div > a:first-child{margin-right:20px;}

	.area_pension .image{width:100%;}
	.area_pension .image ul li{width:48%;}
	.area_pension .image ul li:first-child{display:block; margin-top:20px}
	.area_pension .wrapper{display:block;}

	.area_pension .text{float:none; overflow:hidden; width:100%; padding-top:20px; text-align:center;}
	.area_pension .text h2{text-align:center;}
	.area_pension .text a{padding:7px 19px; font-size:12px;}
	
	.right_room .btn{width:110px; right:10px}
	.right_room .swiper-slide{width:200px;}
	.right_room .swiper-slide span{display:none;}
	.right_room .swiper-slide:before{opacity:0.4}
	.right_room .swiper-slide:hover h3{opacity:1}


	.area_special ul li:nth-of-type(1){width:100%; height:150px; margin-bottom:7px;}
	.area_special ul li:nth-of-type(2),
	.area_special ul li:nth-of-type(3){width: calc(50% - 4px); height:150px; }
	.area_special .wrapper > div{margin-top:7px; height:150px; }


}

@media all and (max-width:413px){
	.area_visual ul li .text .wrapper > h2{font-size:18px;}
}