@charset "utf-8";

.skipnav.sub {display:none !important;}

#container {padding-bottom:60px;}
#slogan {text-align:center; padding:70px 0; font-size:20px;}
#slogan .s1 {display:inline-block; margin-right:10px;}
#slogan .s2 {width:424px; height:47px; background:url('/placard/img/main/slogan.gif') no-repeat;}

#boxLink>ul {overflow:hidden;}
#boxLink>ul>li {float:left; width:25%; margin-right:2%;}

#boxLink>ul>li>a {display:block; text-align:center; height:260px; padding-top:130px; border-radius:30px 0 30px 0;}
#boxLink>ul>li.l1>a {background:#00875a url('/placard/img/main/boxlink01.gif') no-repeat center 45px;}
#boxLink>ul>li.l2>a {background:#0065a2 url('/placard/img/main/boxlink02.gif') no-repeat center 42px;}
#boxLink>ul>li.l3>a {background:#0089c1 url('/placard/img/main/boxlink03.gif') no-repeat center 48px;}
#boxLink>ul>li.l4>a {background:#008280 url('/placard/img/main/boxlink04.gif') no-repeat center 47px;}
#boxLink>ul>li>a .tit {color:#fff; font-size:22px;}
#boxLink>ul>li>a .txt {margin-top:18px; color:rgba(255,255,255,.6); line-height:1.5em;}

#apply {position:absolute; right:0; top:0; text-align:center; width:19%; border-radius:30px 0 30px 0; background:#fff; overflow:hidden;}
#apply h3 {padding:15px 0; font-size:18px; font-weight:normal; color:#fff; background:#283447;}
#apply ul {width:75%; margin:0 auto;}
#apply ul li {padding:33px 0 35px; border-top:1px dashed #ddd;}
#apply ul li:first-child {border:0;}
#apply ul li a {display:block; padding-top:72px; font-size:16px;}
#apply ul li.a1 a {background:url('/placard/img/main/apply01.gif') no-repeat center 9px;}
#apply ul li.a2 a {background:url('/placard/img/main/apply02.gif') no-repeat center 10px;}
#apply ul li.a3 a {background:url('/placard/img/main/apply03.gif') no-repeat center 10px;}
#apply ul li.a4 a {background:url('/placard/img/main/apply04.gif') no-repeat center 10px;}


#contact {position:absolute; left:27%; top:544px; width:52%; height:260px; padding:40px; margin-top:2%; border-radius:30px 0 30px 0; background:#fff url('/placard/img/main/contact_bg.gif') no-repeat right 40px top 40px;}
/* #contact {position:absolute; right:0; top:544px; width:46%; height:260px; padding:30px 40px; margin-top:2%; border-radius:30px 0 30px 0; background:#fff url('/placard/img/main/contact_bg.gif') no-repeat right 40px top 40px;} */
#contact h3 {font-size:24px; font-weight:normal; color:#e56353;}
#contact .call {position:relative;}
#contact .call p.num {position:absolute; left:150px; top:-2px; font-size:28px; font-weight:bold; color:#504f4f;}
#contact .call p.txt {margin-top:10px; font-size:14px; line-height:1.5em; letter-spacing:-0.02em;}
#contact .bank {position:relative; margin-top:32px;}
#contact .bank p.name {position:absolute; left:150px; top:7px; padding:3px 20px 5px; font-size:13px; font-weight:bold; border-radius:25px; background:#f3f3f3;}
#contact .bank ul {margin-top:10px;}
#contact .bank ul li {display:inline-block; letter-spacing:-0.02em;}

#contact .bank ul li:before {display:inline-block; content:""; width:1px; height:12px; margin:2px 10px 0; background:#ddd;}
#contact .bank ul li:first-child:before {display:none;}


#board {position:relative; width:79%; height:260px; border-radius:30px 0 30px 0; background:#fff; background:linear-gradient(to right bottom, #163a77 30%, #283447, #283447);}
#board .tit {position:absolute; padding:30px 40px;}
#board .tit h3 {color:#fff; font-size:25px; text-shadow:1px 0 0 #283447, -1px 0 0 #283447, 0 1px 0 #283447, 0 -1px 0 #283447;}
#board .tit h3 span {display:block; font-size:14px; font-weight:400; letter-spacing:0; text-indent:2px;}
#board .tit p {color:#fff; margin-top:20px; font-size:14px; line-height:150%; text-shadow:1px 0 0 #283447, -1px 0 0 #283447, 0 1px 0 #283447, 0 -1px 0 #283447;}
#board .list {margin-left:300px; height:260px; padding:30px 35px 30px 40px; background:#fff; border-radius:0 0 30px 0; overflow:hidden;}
#board .list li {position:relative;}
#board .list li:not(:first-child) {margin-top:20px;}
#board .list li:not(:first-child):before {position:absolute; top:-10px; left:0; right:0; border-top:1px dashed #ddd; content:"";}
#board .list li a{position:relative; display:block; width:100%; padding-right:80px; font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#board .list li a span.date {position:absolute; right:0; top:0; color:#a2a2a2; font-size:17px;}
#board .more {position:absolute; left:40px; bottom:35px; display:block; width:30px; height:30px; font-size:0;}
#board .more:before {position:absolute; left:50%; top:0; bottom:0; width:2px; background:#fff; transform:translateX(-50%); content:"";}
#board .more:after {position:absolute; top:50%; left:0; right:0; height:2px; background:#fff; transform:translateY(-50%); content:"";}

/*pc*/
@media all and (min-width:801px){	
	#boxLink>ul>li {margin-top:2%;}
	#boxLink>ul>li.l4 {clear:left; }
}



/*tablet~mobile*/
@media screen and (max-width:800px){
	#slogan {padding:30px 0;}
	#slogan .s1 {display:block; font-size:18px;}
	#slogan .s1 br {display:none;}
	#slogan .s2 {max-width:80%; margin-top:10px; background-size:100%;}

	#boxLink>ul>li {width:49%;}
	#boxLink>ul>li:nth-of-type(even) {margin-right:0;}
	#boxLink>ul>li:nth-of-type(n+3) {margin-top:2%;}
	#contact, #apply {position:static; margin-top:3%; width:100%; height:auto;}

	#apply ul {width:100%; margin:20px auto; padding-bottom:0; overflow:hidden;}
	#apply ul li {float:left; width:33.3%; padding:20px 0 10px; border-top:0; border-left:1px solid #ddd;}

	#board {width:100%; height:auto; margin-bottom:4%;}
	#board .tit {position:static; text-align:center; padding:10px 0;}
	#board .tit h3 {font-size:20px; font-weight:400;}
	#board .tit h3 span {display:none;}
	#board .tit p {display:none;}
	#board .list {margin-left:0; height:auto; padding:20px;}
	#board .list li a{font-size:15px;}
	#board .list li a span.date {font-size:15px;}
	#board .more {left:auto; bottom:auto; right:10px; top:10px; width:25px; height:25px;}

}


/*mobile*/
@media screen and (max-width:640px){
	#boxLink>ul>li>a {height:190px; padding-top:110px;}
	#boxLink>ul>li>a .tit {font-size:19px;}
	#boxLink>ul>li>a .tit span {display:block;}
	#boxLink>ul>li>a .txt {display:none;}

	#apply ul li a span {display:none;}
}


/*mobile*/
@media screen and (max-width:480px){
	#contact {text-align:center;}
	#contact .call p.num, #contact .bank p.name  {position:static; margin-top:5px;}
}


#layerpop { display:inline-block; position:absolute; top:200px; right:10px; border:1px solid #23498d; z-index:500000; box-shadow:1px 1px 6px rgba(0,0,0,0.5); }
#layerpop>p { overflow:hidden; font-size:0; /*overflow-y:scroll; height:588px;*/ }
#layerpop>div { padding:0 10px; height:47px; background:#23498d; text-align:right; line-height:46px; font-weight:500; }
#layerpop>div label { color:#fff; font-size:13px; }
#layerpop>div input[type=button] { margin-left:20px; padding:5px 15px 7px 15px; height:25px; border:0px; background:#fff; color:#373737; font-size:14px; line-height:14px; font-weight:500; }