@charset "UTF-8";

/* --------------------------------------------------------------------------------------
   キービジュアル
--------------------------------------------------------------------------------------- */

.page-29 { background-image: url(../img/office/key_index.jpg); }

/* --------------------------------------------------------------------------------------
   本社・営業所案内
--------------------------------------------------------------------------------------- */

.anchor {
	margin-top: 50px;
	overflow: hidden;
}

.anchor li {
	float: left;
	margin-bottom: 7px;
	margin-right: 7px;
	width: 160px;
}

.anchor li:nth-child(6n) { margin-right: 0; }

.anchor li a {
	border: 1px solid #155891;
	color: #155891;
	display: block;
	font-size: 91%;
	letter-spacing: normal;
	padding: 9px 14px;
	position: relative;
	transition: all .3s ease;
}

.anchor li a::after {
	border-right: solid 1px #155891;
	border-top: solid 1px #155891;
	content: '';
	display: inline-block;
	height: 4px;
	position: absolute;
	right: 4%;
	top: 40%;
	-ms-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	transition: all .3s ease;
	vertical-align: middle;
	width: 4px;
}

.banner-link { margin-top: 40px; }

.banner-link li { margin-top: 9px; }
.banner-link li:first-child { margin-top: 0; }

.banner-link a {
	border: 1px solid #155891;
	color: #155891;
	display: block;
	font-size: 123%;
	letter-spacing: 7px;
	padding: 17px 14px;
	position: relative;
	text-align: center;
	transition: all .3s ease;
}

.banner-link a::after {
	border-right: solid 1px #155891;
	border-top: solid 1px #155891;
	content: '';
	display: inline-block;
	height: 6px;
	position: absolute;
	right: 6%;
	top: 46%;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: all .3s ease;
	vertical-align: middle;
	width: 6px;
}

.banner-link .recruit-link a { letter-spacing: 1px; }

.itemlist .column .one-detail {
	float: none;
	overflow: hidden;
	position: relative;
	width: auto;
}

.itemlist .column .one-detail table {
	float: left;
	width: 48%;
}

.itemlist .column .one-detail p {
	clear: both;
	float: left;
	width: 48%;
}

.itemlist .column .one-detail .banner-link {
	margin-top: 0;
	position: absolute;
	right: 0;
	top: 3%;
	width: 48%;
}

/* --------------------------------------------------------------------------------------
   IOSのタップ用
--------------------------------------------------------------------------------------- */

@media (min-width: 980px) {

	.anchor li a:hover,
	.banner-link a:hover {
		background-color: #155891;
		color: #fff;
		text-decoration: none;
	}

	.anchor li a:hover::after,
	.banner-link a:hover::after {
		border-right: solid 1px #fff;
		border-top: solid 1px #fff;
	}
}

/* --------------------------------------------------------------------------------------
   タブレット
--------------------------------------------------------------------------------------- */

@media (max-width: 979px) {

	.anchor li {
		margin-bottom: 1%;
		margin-right: 1%;
		width: 19%;
	}

	.anchor li:nth-child(6n) { margin-right: 1%; }
	.anchor li:nth-child(5n) { margin-right: 0; }

	.itemlist .column section p { margin-left: 0; }

	.itemlist .column {
		padding-bottom: 14%;
		position: relative;
	}

	.banner-link {
		bottom: 5%;
		left: 5%;
		margin-top: 0;
		position: absolute;
		width: 90%;
	}

	.banner-link li {
		float: left;
		margin-top: 0;
		width: 47%;
	}

	.banner-link li:nth-child(2n) { float: right; }

	.itemlist .column .one-detail table {
		float: none;
		width: 100%;
	}

	.itemlist .column .one-detail p {
		float: none;
		margin: 3% 0 0;
		width: auto;
	}

	.itemlist .column .one-detail .banner-link {
		bottom: auto;
		left: auto;
		margin-top: 4%;
		overflow: hidden;
		position: relative;
		right: auto;
		top: auto;
		width: auto;
	}
}

/* --------------------------------------------------------------------------------------
   スマホ
--------------------------------------------------------------------------------------- */

@media (max-width: 766px) {

	.anchor { margin-top: 6%; }

	.anchor li {
		margin-bottom: 2%;
		margin-right: 2%;
		width: 49%;
	}

	.anchor li:nth-child(5n) { margin-right: 2%; }

	.anchor li:nth-child(2n) { margin-right: 0; }

	.itemlist .column { padding-bottom: 5%;	}

	.banner-link {
		bottom: auto;
		left: auto;
		margin-top: 5%;
		position: relative;
		width: auto;
	}

	.banner-link li {
		float: none;
		width: auto;
	}

	.banner-link li:nth-child(2n) {
		float: none;
		margin-top: 3%;
	}
}