@charset "utf-8";
/* CSS Document */
/* pc */

#top_navi {
	list-style: none;
	min-width: 960px;
	display: flex;
	flex-wrap: wrap;
}
#top_navi li {
	position: relative;
	width: calc(100% / 3);
}
#top_navi li:nth-of-type(1),
#top_navi li:nth-of-type(2),
#top_navi li:nth-of-type(3),
#top_navi li:nth-of-type(4) {
	width: 50%;
}
#top_navi li img{width:100%; height: auto; vertical-align:bottom; }
#top_navi li p{position: absolute; font-weight: bold;line-height: 1.5em;}
#top_navi li .category{top:0; left:0; display: block; background: #000; color: #FFF; padding: 2px 5px; font-size: 11px;}
#top_navi li p#message{top: calc(50% - 1em); left:15px; font-size: 22px; color:#000;}
#top_navi li p#company{top: calc(50% - 1em); left:15px; font-size: 22px; color:#000;}
#top_navi li p#person{top: calc(50% - 1em); left:15px; font-size: 22px; color:#000;}
#top_navi li p#new_employee{top: calc(50% - 0.5em); left:15px; font-size: 22px; line-height: 1em; color:#FFF; text-shadow: 0px 0px 4px #000;}
#top_navi li p#work{top: calc(50% - 1em); left:15px; font-size: 22px; color:#FFF;}
#top_navi li p#information{top: calc(50% - 1em); left:15px; font-size: 22px; color:#000;}
#top_navi li p#faq{top: calc(50% - 1em); left:15px; font-size: 26px; letter-spacing: 3px; color:#FFF;}
#top_navi li p strong{font-size: 13px;}
#top_navi li a div.arrow{display: none;}

#top_navi li a{ display: block; transition: .3s;}
#top_navi li a:hover{opacity: 0.8; transition: .3s;}
#header_box{position: absolute; top:0; left: 0;}

/* smartPhone */
@media screen and (max-width: 640px) {
	
#top_navi{list-style: none; min-width:inherit;}
#top_navi li,
#top_navi li:nth-of-type(1),
#top_navi li:nth-of-type(2),
#top_navi li:nth-of-type(3),
#top_navi li:nth-of-type(4) {
	width:100%;
}

#top_navi li .category{font-size: 11px;}
#top_navi li p#company{ font-size: 20px;}
#top_navi li p#data{ font-size: 16px;}
#top_navi li p#person{ font-size: 18px;}
#top_navi li p#part1{ font-size: 16px; line-height: 1.2em;}
#top_navi li p#part2{ font-size: 16px; line-height: 1.2em;}
#top_navi li p#part3{ font-size: 16px;; line-height: 1.2em;}
#top_navi li p#work{ font-size: 20px;}
#top_navi li p#information{ font-size: 20px;}
#top_navi li p#faq{ font-size: 22px;}
#top_navi li p strong{font-size: 11px;}
#top_navi li a div.arrow{position: absolute; display: block; padding: 0 7px; font-size: 15px; top:45%; right:2%; text-decoration: none; color: #FFF; background: #E7569A; border-radius: 15px;}

}