@charset "UTF-8";

/* main
------------------------------------------------------------ */
main {
	width: 100%;
	height: 210px;
	margin-bottom: 40px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	text-align: center;
	position: relative;
}

main.service{
	background-image: url("../images/service/main_bg.jpg");
}
main.case_study{
	background-image: url("../images/case_study/main_bg.jpg");
}
main.company{
	background-image: url("../images/company/main_bg.jpg");
}
main.careers{
	background-image: url("../images/careers/main_bg.jpg");
}
main.column{
	background-image: url("../images/column/main_bg.jpg");
}

main #title {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
main #title h2 {font-size: 240%; font-weight: bold; margin-bottom: 10px;}
main #title p { font-size: 140%;}

@media screen and (max-width:1200px){
	main {
	width: 100%;
	height: 150px;
}
}

/* title
------------------------------------------------------------ */
#breadcrumbs { width: 1200px; margin: 0 auto;}
#breadcrumbs ul {display: flex;}
#breadcrumbs ul li { margin-right: 6px; color: #4394d0;}
#breadcrumbs ul li::before{
 content: "/";
 margin-right: 6px;
}
 #breadcrumbs ul li:first-child::before {
 content: "";
}
#breadcrumbs ul li a { text-decoration: none;}

@media screen and (max-width:1200px){
	#breadcrumbs { width: 90%;}
}


/* menu
------------------------------------------------------------ */
#menu { text-align: center; margin:20px 0 50px 0;}
#menu ul { border-radius: 40px; background: #e0e0e0; display: inline-block; position: relative; font-size: 120%;}
#menu ul li { border-radius: 40px; display: inline-block; z-index: 10; position: relative;}
#menu ul li a {
	display: block;
	text-decoration: none;
	padding: 20px 50px;
	border-radius: 40px;
	font-weight: bold;
}
#menu ul li a:hover {
	color: #4394d0;
}
div#highlight {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: #4394d0;
	border-radius: 40px;
}
#menu ul li a.selected {
	color: #fff;
}


/* table
------------------------------------------------------------ */
table.spec td {padding:1px 6px;}

table.history { width: 100%; box-sizing: border-box; margin-top: 40px;}
table.history th { font-size: 320%; font-weight: bold; padding-right: 30px;}
table.history td { padding: 10px; box-sizing: border-box;}
table.history td.history_title { font-size: 150%; font-weight: bold; padding-left: 100px;}
table.history td.history_line{
	text-align: center;
	vertical-align: middle;
	background-image: url("../images/company/bg_history_blue.svg");
	background-position: top center;
	background-repeat: repeat-y;
	background-size: 3px;
}
table.history td.history_line img {
	vertical-align: middle;
}
table.history td.history_contents { padding: 10px 10px 50px 100px;}

table.common { width: 100%; box-sizing: border-box;}
table.common th { border-bottom: 2px solid #4394d0; padding: 20px; text-align: center; font-weight: bold; white-space: nowrap; vertical-align: top; width: 20%;}
table.common td { border-bottom: 2px solid #e0e0e0; padding: 20px; width: 80%;}

@media screen and (max-width:1200px){
	table.common th { width: 100%; text-align: left; display: block; box-sizing: border-box;}
	table.common td { width: 100%; display: block; box-sizing: border-box; border-bottom: none; margin-bottom: 20px;}
}

/* color box
------------------------------------------------------------ */
div.color_box {
	width: 100%;
	text-align: center;
	padding: 30px 0;
	display: block;
	color: #fff;
	text-decoration: none;
	font-size: 140%;
	margin-bottom: 20px;
}
div.color_box.box_red{background: #d03c3c;}
div.color_box.box_blue{background: #5c97d3;}
div.color_box.box_yellow_green{background: #c0cc62;}
div.color_box.box_light_purple{background: #bd96de;}

/* 採用情報
------------------------------------------------------------ */
h3.h3_recruit { font-size: 100%; font-weight: bold; color: #fff; background: #98802f; display: inline-block; padding: 12px 16px;}

.recruit_left { width: 300px; float: left;}
.recruit_right { width: 880px; float: right; margin-bottom: 20px;}
.recruit_right a .recruit_contents { width: 560px; height: 220px; background: #eaeaea;}
.recruit_right a:hover .recruit_contents { background-color: #4394d0; color: #fff; }
.recruit_right a>div { display: flex; }
.recruit_right a .recruit_contents .recruit_title {
	display: block;
	width: 100%;
	border-bottom: 1px solid #fff;
	background:#eaeaea;
	box-sizing: border-box;
	padding: 20px;
	background-image: url("../icons/icon_tri_blk.svg");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 40px 16px;
	text-decoration: none;
	font-size: 120%;
}
.recruit_right a:hover .recruit_contents .recruit_title {
	background-color: #4394d0;
	color: #fff;
}
.recruit_right .recruit_contents .recruit_text{ padding: 20px 40px;}
.recruit_right .recruit_contents .recruit_text li {
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 20px;
	padding:4px 0 4px 30px;
}

.recruit_right .recruit_contents .recruit_text li.salary{background-image: url("../icons/icon_¥.svg");}
.recruit_right .recruit_contents .recruit_text li.map{background-image: url("../icons/icon_map.svg"); background-size: 20px 30px;}
.recruit_right .recruit_contents .recruit_text li.clock{background-image: url("../icons/icon_clock.svg");}

.recruit_message {
	width: 1200px;
	margin: 0 auto;
	background-image: url("../images/careers/message_bg.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 60px;
	padding: 120px 0;
}
.recruit_message .recruit_message_box{
	color: #fff;
	font-size: 140%;
	line-height: 140%;
	padding: 30px 60px;
	width: 900px;
	margin: 0 auto;
	background:rgba(255,255,255,0.4);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-sizing: border-box;
}

.case_type {
	position: absolute;
	top: 0;
	left: 0;
	color: #707070;
	font-size: 80%;
	padding: 4px 18px;
	background-color: #efeee8;
}

.accordion {
	width: 100%;
	cursor: pointer;
}
.accordion_head {
	position: relative;
	width: 100%;
	background-color: #000;
	color: #fff;
	box-sizing: border-box;
	padding: 20px;
	text-align: center;
	background-image: url(../icons/icon_tri_wht.svg);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 40px 16px;
	font-size: 120%;
}
.accordion_head p {
	font-weight: bold !important;
}
.accordion.active .accordion_head {
	background-image: url(../icons/icon_tri_wht_down.svg);
}
.accordion_body {
	overflow: hidden;
	height: 0;
	background-color: #eaeaea;
	transition: all .25s ease;
	font-size: 120%;
	text-align: center;
}
.accordion_body p {
	font-weight: bold !important;
	padding: 20px;
}
.accordion_body p:hover {
	background-color: #191919;
	color: #fff;
}
.accordion.active .accordion_body {
	height: auto;
}


@media screen and (max-width:1200px){
	.recruit_left { width: 100%; float: none; margin-bottom: 20px;}
	.recruit_right { width: 100%; float: none; display: block; margin-bottom: 20px;}
	.recruit_right img { width: 100%; height: auto;}
	.recruit_right .recruit_contents { width: 100%; height: 220px; background: #eaeaea;}
	
	.recruit_message { width: 100%; padding: 20px 0;}
	.recruit_message .recruit_message_box{
		width: 90%;
		padding: 20px;
		font-size: 100%;
	}
}