@charset "UTF-8";
/* visual */
#mainVisual{position:relative; width:100%; height:850px; margin:0 auto; background:#222; overflow:hidden;}
#mainVisual:after{content:''; clear:both; display:block;}
#mainVisual .swiper-container{width:100%; height:100%;}
#mainVisual .swiper-container .bg01{background:url('../images/main/main_visual_01.jpg') no-repeat right 50% top; background-size:cover;}
#mainVisual .swiper-container .bg02{background:url('../images/main/main_visual_02.jpg') no-repeat right 50% top; background-size:cover;}
#mainVisual .swiper-container .bg03{background:url('../images/main/main_visual_03.jpg') no-repeat right 50% top; background-size:cover;}
#mainVisual .txtBox{position:absolute; width:100%;max-width:1200px; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; cursor:default;text-align:center;}
#mainVisual .txtBox span{display:block; margin:0 auto; color:#fff;font-size:2.5rem; line-height:1.4;text-align:center;}
#mainVisual .txtBox span strong{font-weight:700;}
#mainVisual .txtBox .btnBox{margin:45px auto 0;text-align:center;display:inline-block;}
#mainVisual .txtBox .btnBox a{display:block;font-size:1rem;padding:13px 28px 15px;color:#fff;background:transparent;border:1px solid #fff;transition:all .3s;}
#mainVisual .txtBox .btnBox a:hover{background:#fff;color:#3e6baf;font-weight:500;}
#mainVisual .bgBox{position:absolute; width:100%;z-index:2;top:182px;left:50%;transform:translate(-50%,-50%);text-align:right;padding-right:22px;}
#mainVisual .bgBox .pager{position:relative;display:inline-block;vertical-align: middle;margin-right:12px;}
#mainVisual .bgBox .pager .swiper-pagination{position:initial;display:inline-block; text-align:center;padding:8px 0;background:rgba(0,0,0,.3);width:60px;font-size:0.875rem;border-radius:22px;color:#fff;}
#mainVisual .bgBox .pager .swiper-pagination .swiper-pagination-current{font-weight:700;}
#mainVisual .bgBox .control{position:relative;display:inline-block;vertical-align: middle;}
#mainVisual .bgBox .control .swiper-button-next,#mainVisual .bgBox .control .swiper-button-prev,#mainVisual .bgBox .control .swiper-button-pause,#mainVisual .bgBox .control .swiper-button-play{position:initial;display:inline-block;width:26px;height:26px;border-radius:50%;margin-right:4px;}
#mainVisual .bgBox .control .swiper-button-prev{background:rgba(0,0,0,.3) url('../images/ico_prev.png') no-repeat center center;}
#mainVisual .bgBox .control .swiper-button-pause{background:rgba(0,0,0,.3) url('../images/ico_pause.png') no-repeat center center;}
#mainVisual .bgBox .control .swiper-button-play{background:rgba(0,0,0,.3) url('../images/ico_play.png') no-repeat center center;}
#mainVisual .bgBox .control .swiper-button-play, #mainVisual .bgBox .control .swiper-button-pause{display:none;}
#mainVisual .bgBox .control .swiper-button-play.active, #mainVisual .bgBox .control .swiper-button-pause.active {display: inline-block;}
#mainVisual .bgBox .control .swiper-button-next{background:rgba(0,0,0,.3) url('../images/ico_next.png') no-repeat center center;margin-right:0;}
#mainVisual .icoBox{position:absolute;width:100%;bottom:0;z-index:99;}
#mainVisual .icoBox ul{font-size:0;}
#mainVisual .icoBox ul li{position:relative;display:inline-block;width:25%;border-right:1px solid rgba(255,255,255,.2);box-sizing:border-box;}
#mainVisual .icoBox ul li:last-child{border-right:none;}
#mainVisual .icoBox ul li a{display:block;text-align:center;padding:30px 0 40px;background:rgba(0,0,0,.5);}
#mainVisual .icoBox ul li a .ico{width:80px;height:80px;margin:0 auto 10px;transition:all .1s ease-in-out;}
#mainVisual .icoBox ul li a .ico img{width:100%;}
#mainVisual .icoBox ul li a:hover .ico{transform:translate(0,-5px);}
#mainVisual .icoBox ul li a span{color:#fff;font-size:1.25rem;transition:all .1s ease-in-out;}
#mainVisual .icoBox ul li a:hover span{color:#89ace1;font-weight:500;}

/* contents */
#mainContents{clear:both; position:relative; width:100%; min-width:1200px; margin:0 auto; padding:0; background:transparent; box-sizing:border-box; z-index:1;}
#mainContents .con{position:relative; margin:0; padding:0; box-sizing:border-box;}
#mainContents .area01{position:relative;width:55%;padding:80px 80px 80px 10px; background:#3e6baf;background:linear-gradient(-135deg,#3e6baf,75%,#78e8f5); box-sizing:border-box;}
#mainContents .area01:after{content:'';position:absolute;width:auto;height:auto;padding:50% 0 0 88%;bottom:0;right:0;overflow:hidden;background:url('../images/main/bg_txt_kato.png') no-repeat center bottom;background-size:100%;}
#mainContents .area01 .inner{width:640px;float:right;margin:0;padding:0;}
#mainContents .area01 .board{position:relative;margin-bottom:40px;z-index:9;}
#mainContents .area01 .board:last-child{margin-bottom:0;}
#mainContents .area01 .board .boardTitle{font-size:1.75rem;font-weight:700;color:#fff;}
#mainContents .area01 .board .boardList{margin-top:26px;}
#mainContents .area01 .board .boardList li{width:100%;margin-bottom:13px;}
#mainContents .area01 .board .boardList li:last-child{margin-bottom:0;}
#mainContents .area01 .board .boardList li a{display:block;padding:28px 30px;border:1px solid #fff;background:transparent;transition:all .3s ease;line-height:1.2;}
#mainContents .area01 .board .boardList li a:after{content:'';display:block;clear:both;}
#mainContents .area01 .board .boardList li a:hover{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2);}
#mainContents .area01 .board .boardList li a .listTitle{display:inline-block;color:#fff;font-size:1.25rem;font-weight:500;float:left;width:80%;max-width:480px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#mainContents .area01 .board .boardList li a:hover .listTitle{color:#333;}
#mainContents .area01 .board .boardList li a .listDate{display:inline-block;color:#c1cce1;font-size:1rem;line-height:1.4;font-weight:500;float:right;font-family:'Roboto';letter-spacing:-0.035em;}
#mainContents .area01 .board .boardList li a:hover .listDate{color:#aaa;}
#mainContents .area01 .board a.moreBtn{position:absolute;top:0;right:0;width:11px;height:27px;display:inline-block;padding:4px;text-indent:-9999px;background:url('../images/ico_more.png') no-repeat center center;opacity:1;transition:.2s;}
#mainContents .area01 .board a.moreBtn:hover{opacity:.6;}

#mainContents .area02{position:relative;width:45%;padding:80px 10px 80px 80px; background:#fff;box-sizing:border-box;}
#mainContents .area02 .inner{width:380px;margin:0;padding:0;}
#mainContents .area02 .popup{width:380px;height:380px;overflow:hidden;margin-bottom:40px;}
#mainContents .area02 .popup img{width:100%;object-fit:cover;}
#mainContents .area02 .popup .bgBox{position:absolute; z-index:2;top:12px;right:12px;text-align:right;}
#mainContents .area02 .popup .bgBox .pager{position:relative;display:inline-block;vertical-align: middle;margin-right:12px;}
#mainContents .area02 .popup .bgBox .pager .swiper-pagination{position:initial;display:inline-block; text-align:center;padding:8px 0;background:rgba(0,0,0,.3);width:60px;font-size:0.875rem;border-radius:22px;color:#fff;}
#mainContents .area02 .popup .bgBox .pager .swiper-pagination .swiper-pagination-current{font-weight:700;}
#mainContents .area02 .popup .bgBox .control{position:relative;display:inline-block;vertical-align: middle;}
#mainContents .area02 .popup .bgBox .control .swiper-button-next,#mainContents .area02 .popup .bgBox .control .swiper-button-prev,#mainContents .area02 .popup .bgBox .control .swiper-button-pause,#mainContents .area02 .popup .bgBox .control .swiper-button-play{position:initial;display:inline-block;width:26px;height:26px;border-radius:50%;margin-right:4px;}
#mainContents .area02 .popup .bgBox .control .swiper-button-prev{background:rgba(0,0,0,.3) url('../images/ico_prev.png') no-repeat center center;}
#mainContents .area02 .popup .bgBox .control .swiper-button-pause{background:rgba(0,0,0,.3) url('../images/ico_pause.png') no-repeat center center;}
#mainContents .area02 .popup .bgBox .control .swiper-button-play{background:rgba(0,0,0,.3) url('../images/ico_play.png') no-repeat center center;}
#mainContents .area02 .popup .bgBox .control .swiper-button-play, #mainContents .area02 .popup .bgBox .control .swiper-button-pause{display:none;}
#mainContents .area02 .popup .bgBox .control .swiper-button-play.active, #mainContents .area02 .popup .bgBox .control .swiper-button-pause.active {display: inline-block;}
#mainContents .area02 .popup .bgBox .control .swiper-button-next{background:rgba(0,0,0,.3) url('../images/ico_next.png') no-repeat center center;margin-right:0;}
#mainContents .area02 .video{position:relative;width:380px;height:264px;overflow:hidden;}
#mainContents .area02 .video .videoTitle{background:#333;border-bottom:2px solid #000;}
#mainContents .area02 .video .videoTitle span{display:inline-block;padding:12px 0 12px 16px;;font-size:1.375rem;font-weight:700;color:#fff;line-height:1.1;}
#mainContents .area02 .video .swiper-container{overflow:visible;}
#mainContents .area02 .video .bgBox{position:absolute; z-index:2;top:-40px;right:12px;text-align:right;}
#mainContents .area02 .video .bgBox .pager{position:relative;display:inline-block;vertical-align: middle;margin-right:12px;}
#mainContents .area02 .video .bgBox .pager .swiper-pagination{position:initial;display:inline-block; text-align:center;padding:8px 0;background:rgba(0,0,0,.3);width:60px;font-size:0.875rem;border-radius:22px;color:#fff;}
#mainContents .area02 .video .bgBox .pager .swiper-pagination .swiper-pagination-current{font-weight:700;}
#mainContents .area02 .video .bgBox .control{position:relative;display:inline-block;vertical-align: middle;}
#mainContents .area02 .video .bgBox .control .swiper-button-next,#mainContents .area02 .video .bgBox .control .swiper-button-prev,#mainContents .area02 .video .bgBox .control .swiper-button-pause,#mainContents .area02 .video .bgBox .control .swiper-button-play{position:initial;display:inline-block;width:26px;height:26px;border-radius:50%;margin-right:4px;}
#mainContents .area02 .video .bgBox .control .swiper-button-prev{background:rgba(0,0,0,.3) url('../images/ico_prev.png') no-repeat center center;}
#mainContents .area02 .video .bgBox .control .swiper-button-pause{background:rgba(0,0,0,.3) url('../images/ico_pause.png') no-repeat center center;}
#mainContents .area02 .video .bgBox .control .swiper-button-play{background:rgba(0,0,0,.3) url('../images/ico_play.png') no-repeat center center;}
#mainContents .area02 .video .bgBox .control .swiper-button-play, #mainContents .area02 .video .bgBox .control  .swiper-button-pause{display:none;}
#mainContents .area02 .video .bgBox .control .swiper-button-play.active, #mainContents .area02 .video .bgBox .control .swiper-button-pause.active {display: inline-block;}
#mainContents .area02 .video .bgBox .control .swiper-button-next{background:rgba(0,0,0,.3) url('../images/ico_next.png') no-repeat center center;margin-right:0;}

#mainContents .area03{position:relative;width:100%;border-top:1px solid #ddd;padding:30px 0;background:#e9e9e9;clear:both;box-sizing:border-box;}
#mainContents .area03 .linkBanner {padding:0 40px;}
#mainContents .area03 .linkBanner ul li a{border:1px solid #ddd;display:block;position:Relative;overflow:hidden;}
#mainContents .area03 .linkBanner ul li a:hover{border:1px solid #89ace1;}
#mainContents .area03 .linkBanner ul li a img{width:100%;}
#mainContents .area03 .linkBanner .bgBox{position:absolute;top:0;left:0;width:100%;height:100%;clear:both;}
#mainContents .area03 .linkBanner .bgBox .control{position:relative;height:100%;clear:both;}
#mainContents .area03 .linkBanner .bgBox .control .swiper-button-next,#mainContents .area03 .linkBanner .bgBox .control .swiper-button-prev{position:absolute;top:50%;transform:translateY(-50%);display:inline-block;width:26px;height:26px;border-radius:50%;margin:0;}
#mainContents .area03 .linkBanner .bgBox .control .swiper-button-prev{background:rgba(0,0,0,.3) url('../images/ico_prev.png') no-repeat center center;left:0;}
#mainContents .area03 .linkBanner .bgBox .control .swiper-button-next{background:rgba(0,0,0,.3) url('../images/ico_next.png') no-repeat center center;right:0;}



@media only screen and (max-width:1279px){
	#mainVisual{height:700px;}
	#mainContents{min-width:960px;}
	#mainContents .area01,#mainContents .area02{padding:60px 40px;}
	#mainContents .area01 .inner, #mainContents .area02 .inner{width:100%;}
}

@media only screen and (max-width:1023px){
	#mainVisual{height:500px;}
	#mainVisual .swiper-container{max-width:1023px;}
	#mainVisual .txtBox{top:32%;}
	#mainVisual .txtBox span{font-size:2rem;word-break: keep-all;padding:0 12px;}
	#mainVisual .txtBox .btnBox{margin-top:20px;}
	#mainVisual .bgBox{top:30px;}
	#mainVisual .icoBox{bottom:10px;}
	#mainVisual .icoBox ul li{width:50%;}
	#mainVisual .icoBox ul li:nth-child(1),#mainVisual .icoBox ul li:nth-child(2){border-bottom:1px solid rgba(255,255,255,.2);}
	#mainVisual .icoBox ul li:nth-child(2){border-right:none;}
	#mainVisual .icoBox ul li a{padding:12px 0;}
	#mainVisual .icoBox ul li a .ico{width:60px;height:60px;margin:0 auto;}
	#mainVisual .icoBox ul li a span{font-size:1rem;}
	#mainContents{min-width:100%;}

	#mainContents .area01, #mainContents .area02{width:100%;padding:60px 0;overflow: hidden;}
	#mainContents .area01 .inner, #mainContents .area02 .inner{max-width:960px;padding:0 10px;float:none;margin:0 auto;}
	#mainContents .area01 .board .boardTitle{font-size:1.5rem;}
	#mainContents .area01 .board .boardList li{margin-bottom:8px;}
	#mainContents .area01 .board .boardList li a{padding:24px 26px;}
	#mainContents .area01 .board .boardList li a .listTitle{font-size:1.125rem;}
	#mainContents .area01 .board a.moreBtn{height:24px;}
	#mainContents .area02 .popup{width:48%;height:0px;padding-bottom:48%;margin:0 auto 40px;float:left;}
	#mainContents .area02 .video{width:48%;height:0px;padding-bottom:48%;margin:0 auto;float:right;}
	#mainContents .area02 .video .swiper-container{background:#000;padding:16% 0;}
	#mainContents .area02 .video .videoTitle span{font-size:1.5rem;}
	#mainContents .area03 .linkBanner{padding:0 35px;}
	#mainContents .area03 .linkBanner .bgBox{padding:0 10px;}

}

@media only screen and (max-width:768px){
	#mainVisual .swiper-container{max-width:768px;}
	#mainVisual .txtBox span{font-size:1.75rem;}
	#mainVisual .bgBox{width:auto;right:10px;left: initial;top:15px;transform:translate(0,0);padding-right:0;}
	#mainVisual .bgBox .inner{min-width:auto;padding:0;}
	#mainContents .area01,#mainContents .area02{padding:40px 0;}
	#mainContents .area01 .board{margin-bottom:30px;}
	#mainContents .area01 .board .boardTitle{font-size:1.25rem;}
	#mainContents .area01 .board a.moreBtn{height:20px;}
	#mainContents .area01 .board .boardList{margin-top:20px;}
	#mainContents .area01 .board .boardList li{margin-bottom:4px;}
	#mainContents .area01 .board .boardList li a{padding:18px 20px;}
	#mainContents .area01 .board .boardList li a .listTitle{font-size:1rem;width: calc(100% - 80px);}
	#mainContents .area01 .board .boardList li a .listDate{font-size:0.875rem;width:70px;}
	#mainContents .area02 .popup{width:100%;padding-bottom:100%;margin-bottom:30px;}
	#mainContents .area02 .video{width:100%;height:48px;padding-bottom:56.25%;}
	#mainContents .area02 .video .swiper-container{background:transparent;padding:0;}
	#mainContents .area02 .video .videoTitle span{font-size:1.25rem;}
	#mainContents .area03{padding:15px 0;}

}

@media only screen and (max-width:540px){
	#mainVisual{height:400px; margin:0 auto;}
	#mainVisual .swiper-container{max-width:540px;}
	#mainVisual .swiper-container .bg01{background-position:right 48% top;}
	#mainVisual .swiper-container .bg02{background-position:right 48% top;}
	#mainVisual .txtBox span{font-size:1.375rem;}
	#mainVisual .txtBox span br{display:none;}
	#mainVisual .txtBox .btnBox a{font-size:0.875rem;padding:9px 12px 11px;}
	#mainVisual .icoBox ul li a .ico{width:45px;height:45px;}
	#mainVisual .icoBox ul li a span{font-size:0.875rem;}
}