@charset "utf-8";

/* visual */
.area_visual{margin-top:20px;}
.area_visual div {background-size: cover;}
.area_visual .bx-viewport, .bxslider div{height:637px !important;}
.area_visual .bx-wrapper{position:relative;}
.area_visual .bx-controls-direction{position:absolute; top:50%; margin-top:-40px; z-index:99; width:100%;}
.area_visual .bx-prev, .area_visual .bx-next{display:inline-block; position:absolute; opacity:1; overflow:hidden; width:79px; height:79px; transition:all 0.4s ease-out 0s; text-indent:100%; white-space:nowrap;}
.area_visual .bx-prev:hover, .area_visual .bx-next:hover{opacity:0.8;}
.area_visual .bx-prev{left:0; background:#fff url(../images/main/btn_visual_left.png) no-repeat 50% 50%;}
.area_visual .bx-next{right:0; background:#fff url(../images/main/btn_visual_right.png) no-repeat 50% 50%;}

.area_visual .box_visual{width: 440px;}
.area_visual .box_visual > div > span{color:#222;}
.area_visual .box_visual > div > p{line-height:1.5; font-size: 18px;}
.area_visual .box_visual{position:absolute;right:280px;bottom:-30px;text-align:left;z-index:52;padding:35px 55px 55px 35px;background:#fff;box-shadow:13px 11px 30px 0px rgba(0, 0, 0, 0.10);border-width: 10px;border-style: solid;border-image: linear-gradient(to right, #f89f62 0%, #f8d362 50%);border-image-slice: 1;}
.area_visual .box_visual > div > h3{margin-top:6px; margin-bottom:24px; line-height:1; font-weight:300; font-size:37px; color:#222;}

.area_visual .bx-pager-item{float:left; overflow:hidden; margin-right:2px; width:40px; height:3px; background:#e2e2e2; text-indent:100%; white-space:nowrap;}
.area_visual .bx-pager.bx-default-pager{position:absolute; right:304px; bottom:13px; z-index:53;}
.area_visual .bx-pager-item a{display:block;}
.area_visual .bx-pager-link.active, .bx-pager-link:hover{background:#f89f61; transition:all 0.4s ease-out 0s;}

/* content */
#container{position:relative;overflow:hidden;width:100%;/* min-height: 700px; */}
#content{max-width:1200px;box-sizing:border-box;margin: 0 auto;}
#content.main{margin:80px auto 0;}
#content.main article[class^="area_"]{position:relative; float:left;}
#content.main article[class^="area_"] h4{margin-bottom:21px; font-weight:500; font-size:20px; color:#222;}
#content.main article[class^="area_"] h4 + a{display:inline-block; position:absolute; top:-10px; right:0; width:42px; height:42px; border:1px solid #ddd; text-align:center; transition:all 0.2s ease-out 0s;}
#content.main article[class^="area_"] h4 + a img{display:inline-block; padding:13px 0px; vertical-align:middle;}
#content.main article[class^="area_"] h4 + a:after{content:""; position:absolute; top:0; left:0; width:0px; height:100%; background:#000; transition:all 0.2s ease-out 0s;}
#content.main article[class^="area_"] h4 + a:hover:after{width:100%;}
#content.main article[class^="area_"] h4 + a > span > i{transition:all 0.2s ease-out 0s;}
#content.main article[class^="area_"] h4 + a:hover > span > i{opacity:0.5; z-index:99; background:#fff;}
#content.main article[class^="area_"] h4 + a > span > i:nth-child(1){display:inline-block; position:absolute; top:50%; margin-top:-8px; left:50%; width:1px; height:17px; background:#ccc;}
#content.main article[class^="area_"] h4 + a > span > i:nth-child(2){display:inline-block; position:absolute; top:50%; left:50%; margin-left:-8px; width:17px; height:1px; background:#ccc;}
#content.main article[class^="area_"] h4 + a:hover{border:1px solid #000;}

/* notice */
.area_notice{width:446px;}
.area_notice .notice_date{display:table; float:left; width:93px; height:93px; background-image:linear-gradient(-60deg, #f8d362, #f8a56b); text-align:center;}
.area_notice .notice_text{float:left; margin-left:10px; width:337px; background:#f5f5f5; border:3px solid #f5f5f5; transition:all 0.2s ease-out 0s;}
.area_notice .notice_text:hover{border:3px solid #f89f61;}
.area_notice .notice_date > div{display:table-cell; vertical-align:middle;}
#content .area_notice .notice_date > div > p{line-height:1; font-size:45px; color:#fff;}
.area_notice .notice_date > div > span{font-size:14px; color:#fff;}
.area_notice .notice_text > a{display:block; padding:20px 20px;}
#content.main .area_notice .notice_text > a > h6{margin-bottom:5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 16px;}
.area_notice .notice_text > a > p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.area_notice .notice_title_box{overflow:hidden;margin-bottom: 21px;}

.area_notice > ul > li, .area_inquiry > ul > li{position:relative; float:left; border-bottom:1px solid #ddd; width:100%;}
.area_notice > ul > li > a, .area_inquiry > ul > li a{display:block;padding:16px 0;}
#content .area_notice > ul > li > a:hover p, #content .area_inquiry > ul > li a:hover p{color:#f89f61; transition:all 0.2s ease-out 0s;}
.area_notice > ul > li > a > p, .area_inquiry > ul > li > a > p{font-weight:400;color:#222;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;}
.area_notice > ul > li > a > span, .area_inquiry > ul > li > a > span{position:absolute; top:17px; right:0; font-weight:100; font-size:14px; color:#ccc;}

.area_inquiry{margin-left:49px; width:705px;}
.area_inquiry > ul{border-top:2px solid #000;}
.area_inquiry > ul > li > a > em{margin-left:5px;font-weight:500;font-size:13px;color:#f89f61;position: relative;top: -5px;}

@keyframes lazyLoadImg {
	from {
		background-color: #ddd;
	}
	to {
		background-color: #ccc;
	}
}

/* portfolio */
.area_portfolio{margin-top:86px; width:100%;}
.area_portfolio > ul > li{float:left;margin-right:34px;width: 274px;margin-bottom: 40px;}
.area_portfolio > ul > li:last-child{margin-right:0;}
.area_portfolio > ul > li .img_portfolio + span{display:inline-block; margin:20px 0; padding:5px 11px; border:1px solid #ccc; font-weight:300; font-size:14px; color:#666; transition:all 0.3s ease-out 0s;}
#content.main .area_portfolio > ul > li h6{line-height:1;font-weight:500;font-size:16px;color:#222;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.area_portfolio > ul > li  em{display:block; margin-top:7px; font-size:14px; color:#bbb;}
.area_portfolio > ul > li:hover .img_portfolio img{transform:scale(1.05);}
.area_portfolio > ul > li a{display:block;}
.area_portfolio > ul > li:hover span{border:1px solid #f89f61; color:#f89f61;}
.area_portfolio > ul > li .img_portfolio img{transition:all 0.8s ease-out;-webkit-transition:all 0.8s ease-out;height: 100%;width: 100%;object-fit: cover; animation: lazyLoadImg .5s ease-in-out infinite alternate;}
.area_portfolio > ul > li .img_portfolio{overflow:hidden;height: 205px;}
.area_portfolio > ul > li:nth-child(4n){margin-right:0;}

@media all and (max-width:1380px){
	#content.main{max-width:1000px;}
	
	.area_inquiry{margin-left:49px; width:505px;}

	#content.main .area_portfolio > ul > li h6{line-height:1.5;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
	
	.area_portfolio > ul > li{margin-right:20px; width:-webkit-calc(25% - 15px); width:calc(25% - 15px);}
	.area_portfolio > ul > li .img_portfolio + span{margin:15px 0;}
	.area_portfolio > ul > li .img_portfolio{overflow: hidden; height: 165px;}
	
	.area_visual .box_visual{right:120px;}
	.area_visual .bx-pager.bx-default-pager{right:142px;}		
}

@media all and (max-width:1280px){
	#content{max-width:100%; padding:0 4%;}
	
	.area_notice, .area_inquiry{width:-webkit-calc(50% - 20px); width:calc(50% - 20px);}
	.area_notice .notice_text{margin-left:0; padding-left:0; width:100%;}
	.area_notice .notice_date{position:absolute;}
	.area_notice .notice_text > a{padding:20px 20px 20px 110px;}
	.area_notice .notice_text:hover{border:3px solid #f5f5f5;}
	
	.area_inquiry{margin-left:40px;}
	
	.area_portfolio{margin-top:56px;}	
}

@media all and (max-width:1280px){
	#content.main{margin: 40px auto 0;}

	.area_visual{margin-top:0; margin-bottom:50px;}
	.area_visual .box_visual{right:0; padding:30px 50px 80px 30px;}
	.area_visual .bx-controls-direction{top:100%; margin-top:-69px;}
	.area_visual .bx-prev, .area_visual .bx-next{width:69px; height:69px;}
	.area_visual .bx-next{right:auto; left:69px;}
	.area_visual .bx-pager.bx-default-pager{right:20px;}
	.area_visual .box_visual > div > h3{font-size:30px;}
	.area_visual .bx-viewport, .bxslider div{height:540px !important;}
	
	.bxslider > div{background-position:50% 50%; width:100% !important; background-size:cover;}
	
	.area_notice .notice_date > div > p{font-size:35px;}
	.area_notice .notice_date > div > span{font-size:13px;}
	.area_notice .notice_date{width:83px; height:83px;}
	.area_notice .notice_text > a{padding: 14px 20px 14px 97px;}
	.area_notice > ul > li > a, .area_inquiry > ul > li a{padding:13px 0;}

	.area_notice .notice_title_box {margin-bottom: 17px;}

}

/* @media all and (max-width: 705px){
	.area_visual .bx-pager.bx-default-pager{
		display: none;
	}
} */

@media all and (max-width: 767px){
	#content.main{margin:20px auto 0;}
	#content.main p{font-size:14px;}
	
	.area_visual .box_visual > div > h3{font-size:27px;}
	.area_visual .bx-pager.bx-default-pager{right:40px;}
	
	#content .area_notice .notice_date > div > p{font-size:39px;}
	.area_notice .notice_title_box{margin-bottom:7px;}
	.area_notice, .area_inquiry{width:100%;}	
	.area_notice .notice_date{width:80px; height:80px;}
	.area_notice .notice_text > a{padding: 15px 20px 15px 97px;}
	
	.area_inquiry{margin-left:0;}
	.area_inquiry{margin-top:40px; margin-left:0;}
	
	.area_portfolio > ul > li:last-child{display:none;}
	.area_portfolio > ul > li:nth-child(3){margin-right:0;}
	.area_portfolio > ul > li{margin-right:12px; width:-webkit-calc(30% - 6px); width:calc(33% - 6px);}
	.area_portfolio > ul > li:nth-child(4n){margin-right:12px;}
	.area_portfolio > ul > li:nth-child(3n){margin-right:0;}
}

/* @media all and (max-width: 738px){ */
@media all and (max-width: 746px){
	.area_visual{margin-bottom:20px;}
	.area_visual .bx-pager.bx-default-pager{display:none;}
	.area_visual .box_visual{top:auto; right:auto; bottom:0; left:0; width:100%; margin:0 auto; padding:0; background:rgba(255,255,255,0.9); border:none; box-shadow:none;}
	.area_visual .box_visual > div{padding:20px;}
	.area_visual .bx-next{right:0; left:auto;}
	.area_visual .box_visual > div > p br{display:none;}
	.area_visual .bx-prev{right:auto; left:0;}
	.area_visual .box_visual > div > h3{margin-bottom:20px; font-weight:600; font-size:20px;}
	.area_visual .box_visual > div > span{font-size:13px;}
	.area_visual .bx-controls-direction{top:36%; margin-top:0;}
}

@media all and (max-width: 680px){
	.area_portfolio > ul > li{margin-right:12px; width:-webkit-calc(33% - 7px); width:calc(33% - 7px);}
}

@media all and (max-width: 540px){
	#content{margin: 0 auto;}	
	#header .wrapper, .area_visual .wrapper{width:94%; margin:0 3%;}

	.area_visual .bx-prev, .area_visual .bx-next{width:59px; height:59px; background-size:8px;}
	.area_visual .bx-viewport, .bxslider div{height:440px !important;}
	.area_visual .bx-controls-direction{top:53%;margin-top: -1px;}
	.area_visual .bx-prev{right:59px; left:auto;}
	
	.area_portfolio > ul > li:nth-child(2n){margin-right: 0 !important;}
	.area_portfolio > ul > li{margin-right:12px; margin-bottom:30px; width:-webkit-calc(50% - 6px); width:calc(50% - 6px);}
	.area_portfolio > ul > li:last-child{display:block;}
	.area_portfolio > ul > li:nth-child(3){margin-right:12px;}
	.area_portfolio > ul > li > div > a > h6{font-size:14px;}
	.area_portfolio > ul > li .img_portfolio + span{padding:5px; font-size:13px;}
	.area_portfolio > ul > li:nth-child(3n){margin-right: 12px;}
}

@media all and (max-width: 480px){
	#content.main article[class^="area_"] h4{margin-bottom:21px; font-weight:500; font-size:18px; color:#222;}
	#content.main .area_portfolio > ul > li h6{font-size:14px;}

	.area_portfolio > ul > li .img_portfolio{height:150px;}
}

@media all and (max-width: 360px){
	#content.main .area_notice .notice_text > a > h6{font-size:14px;}

	.area_notice .notice_date{width:77px; height:77px;}
	.area_notice .notice_text > a{padding:15px 20px 15px 89px;}
}

/* Cross browsing */
@media all and (-ms-high-contrast:none){
	.area_notice .notice_text > a{padding:22px 20px;}
	.area_notice .notice_title_box{margin-bottom:17px;}
}

@media all and (-ms-high-contrast:none) and (max-width: 1110px){
	.area_notice .notice_text > a{padding:18px 20px 18px 97px;}
	.area_notice .notice_title_box{margin-bottom:14px;}
}

@media all and (-ms-high-contrast:none) and (max-width: 767px){
	.area_notice .notice_title_box{margin-bottom:5px;}
	.area_notice .notice_text > a{padding:17px 20px 17px 97px;}
}