@charset "utf-8";

.main_con01{margin:100px auto;}
.main_con01 .inner:after{clear:both; content:""; display:block; height:0; visibility:hidden}
.main_con01 .inner{border-radius:100px 0 100px 0; overflow:hidden}
.main_con01 .inner .box{display:block; position:relative; float:left; height:640px; overflow:hidden; transition:all 0.5s; -ms-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s; -moz-transition:all 0.5s;}
.main_con01 .inner .box .text{min-width:420px; display:block; width:100%; padding:0 40px; box-sizing:border-box; position:absolute; left:0; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.main_con01 .inner .box .text h4{margin:0; font-size:40px; color:#0a2873; letter-spacing:0em; font-weight:bold; line-height:1.1; margin-bottom:5px;}
.main_con01 .inner .box .text p{font-size:22px; color:#0a2873; letter-spacing:-0.045em; font-weight:500;}
.main_con01 .inner .box .hover_box{opacity:0; width:50%; min-width:700px; height:100%; background:rgba(255,255,255,0.53); display:table; position:absolute; right:0; top:0; padding:0 90px; box-sizing:border-box; transition:all 0.5s; -ms-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s; -moz-transition:all 0.5s;}
.main_con01 .inner .box .hover_box .center{display:table-cell; vertical-align:middle;}
.main_con01 .inner .box .hover_box .center p{color:#0b1d49; letter-spacing:-0.045em; font-weight:bold; font-size:30px;}
.main_con01 .inner .box .hover_box .center span{margin:25px 0 55px;display:block; font-size:18px; color:#262d3d; letter-spacing:-0.045em; font-weight:300; line-height:1.3;}
.main_con01 .inner .box .hover_box .center a{display:block; width:160px; height:42px; line-height:42px; padding-left:23px; box-sizing:border-box; background:#0a2873; font-size:16px; color:#fff; letter-spacing:0em; font-weight:400; position:relative;}
.main_con01 .inner .box.type02 .hover_box .center a {background-color:#fff; color:#6d6e71; }
.main_con01 .inner .box .hover_box .center a:before{content:""; display:block; width:33px; height:2px; background:#173771; position:absolute; right:-17px; top:calc(50% - 1px)}
.main_con01 .inner .box.type01{width:70%; background:url('/img/main_con01_type01.png')no-repeat left / cover;}
.main_con01 .inner .box.type02{width:30%; background:url('/img/main_con01_type02.png')no-repeat right / cover;}
.main_con01 .inner .box.type02 .text{width:420px; padding:0 60px; left:auto; right:0;}
.main_con01 .inner .box.type02 .text h4{color:#fff;}
.main_con01 .inner .box.type02 .text p{color:#babfc5;}
.main_con01 .inner .box.type02 .hover_box{right:auto; left:0; background:rgba(0,0,0,0.6); padding:0 120px;}
.main_con01 .inner .box.type02 .hover_box p{color:#e9e9e9;}
.main_con01 .inner .box.type02 .hover_box span{color:#999fa8;}
.main_con01 .inner .box.on .hover_box{opacity:1;}
.main_con01 .inner .box.on{width:100%;}
.main_con01 .inner .box.sub_on{width:0%; }

@media all and (max-width:1400px){
	.main_con01 .inner .box .hover_box{min-width:500px; padding:0 60px;}
	.main_con01 .inner .box.type01{width:60%;}
	.main_con01 .inner .box.type02 .hover_box{padding:0 60px;}
	.main_con01 .inner .box.type02{width:40%;}
	.main_con01 .inner .box.on{width:100%;}
	.main_con01 .inner .box.sub_on{width:0%; }
}

@media all and (max-width:1000px){
	.main_con01{margin:10px auto 100px}
	.main_con01 .inner .box{width:100% ; float:none; height:550px;}
	.main_con01 .inner .box .hover_box{max-width:100%; width:100%; display:block; opacity:1; padding:100px 60px; background:none;}
	.main_con01 .inner .box .hover_box .center span{font-size:20px; line-height:30px;}
	.main_con01 .inner .box .text{display:none; padding:0 35px;}
	.main_con01 .inner .box.type01{width:100%;}
	.main_con01 .inner .box.type02{width:100%;}
	.main_con01 .inner .box.type02 .text{width:100%; padding:0 35px;}
	.main_con01 .inner .box.type02 .hover_box{padding:100px 60px; background:rgba(0, 0, 0, 0.1);}
	.main_con01 .inner .box.type02 .hover_box span{color:#ddd;}
}