@charset "utf-8";
/*****************************************
	style.css
	ツルハドラッグ用スタイルシート
******************************************/

/*******************************
 自由ヘッダー
*******************************/
#header .content {
}
#header .content .free {
}
.header_inner {
	padding: 15px 0;
}
#logo {
}
#logo img {
	max-width: 292px;
}
#header .content .free h1 {
	line-height: 67px;
	padding-left: 300px;
}
#naviMenu {
	background: #e8172b;
	border-top: 8px solid #274fb6;
}
/*******************************
 フッター
*******************************/
#footer {
	border-top: 1px solid #274fb6;
}
/*******************************
 自由フッター
*******************************/
#footer .content .free {
}

/*******************************
 #headContent .free
*******************************/
.kv {
	background-color: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#add0fa+1,bcf2ec+100 */
	background: #add0fa; /* Old browsers */
	background: -moz-linear-gradient(top, #add0fa 1%, #bcf2ec 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #add0fa 1%,#bcf2ec 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #add0fa 1%,#bcf2ec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#add0fa', endColorstr='#bcf2ec',GradientType=0 ); /* IE6-9 */;
}
.sp_hd_box{
    display: none;
    text-align: center;
    color: #274fb6!important;
}
.sp_hd_box .hd_upper{
	color: #e8172b!important;
}

.base_white {
	overflow: hidden;
}
#headContent .free h2.sp_kvcatch {
	display: none;
}
.search001 .areaMAP {
	background: url("../img/map.gif") no-repeat scroll left top #f5f5f5;
	height: 380px;
	position: relative;
}
ul.btnPre {
}
ul.btnPre li {
	position: absolute;
}
ul.btnPre li.preTokyo {
	top:230px;
	left: 230px;
}
ul.btnPre li.preChiba {
	top:250px;
	left: 550px;
}
ul.btnPre li.preSaitama {
	top:130px;
	left: 230px;
}
ul.btnPre li.preIbaraki {
	top:130px;
	left: 550px;
}
ul.btnPre li a {
	width: 180px;
}

.typeBox {
	border-top: 3px solid #274fb6;
	border-left: 1px solid #beedfe;
	border-right: 1px solid #beedfe;
	border-bottom: 1px solid #beedfe;
}
.typeBox h3 {
	background-color: #beedfe;
	color: #000000;
}

ul.btnc1 li a {
	background-color: #e8172b;
}
ul.btnc1 li a:hover {
	background-color: #274fb6;
}
.content_jobmerit h2 {
	background: url("../img/h2shadow.gif") repeat-x scroll 0 top #beedfe;
	padding: 14px 3% 12px;
}
.base_blue {
	background-color: #f0ffff;
	overflow: hidden;
}

.intwrap {
	margin-top: 30px;
}

.intwrap ul.int_btn {
	font-size: 0;
	margin-bottom: 40px;
	overflow: hidden;
}

.intwrap ul.int_btn li {
	width: 32%;
	margin-right: 2%;
	float: left;
}

.intwrap ul.int_btn li:last-child {
	margin-right: 0;
}

.intwrap ul.int_btn li p {
	font-size: 18px;
	color: #000;
	text-align: center;
	line-height: 1.4;
	background: #beedfe;
	padding: 10px 0;
	border-top: solid 2px #274fb6;
	position: relative
}

.intwrap ul.int_btn li p span {
	display: block;
}

.intwrap ul.int_btn li p:after {
   border: solid 8px transparent;
   border-top: solid 12px #e8172b;
   content: "";
   height: 0;
   width: 0;
   top: 50%;
   right: 6%;
   margin: -6px 0 0;
   display: inline-block;
   position: absolute;
}

.intwrap ul.int_btn li img {
	width: 100%;
}

.staff_box {
	width: 100%;
	display: table;
	margin-bottom: 30px;
}

.staff_box img {
	width: 100%;
	display: table-cell;
	vertical-align: middle;
}

.staff_box .staff_info {
	width: 50%;
	padding-left: 20px;
	background: #beedfe;
	border-top: solid 2px #274fb6;
	display: table-cell;
	vertical-align: middle;
}

.staff_box .staff_info .int_title {
	font-size: 24px;
	font-weight: 600;
}

.staff_box .staff_info .staff_name {
	font-size: 16px;
	font-weight: 600;
	padding-top: 10px;
	line-height: 1.4;
}

.staff_box .staff_info .staff_name span {
	display: block;
}

.intwrap .int_box {
	font-size: 0;
	padding: 0 40px;
	margin: 0 0 30px;
	overflow: hidden;
}

.intwrap .int_box h3 {
	font-size: 22px;
	margin-bottom: 10px;
}

.intwrap .int_box p {
	font-size: 14px;
}

.int_box.img_r p {
	width: 60%;
	text-align: justify;
	padding-right: 2%;
	float: left;
}

.int_box.img_r img {
	width: 38%;
	float: right;
}

.int_box.img_l p {
	width: 60%;
	text-align: justify;
	padding-left: 2%;
	float: right;
}

.int_box.img_l img {
	width: 38%;
	float: left;
}

.intwrap .btnl1 li {
	margin: 40px 0;
}
/*******************/
/*   ロケスマボタン
/*******************/
.btn_location a {
    background: url(../img/location.png) 23% center no-repeat #ff1a1f;
    border-radius: 5px;
    color: #fff !important;
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin: 0 auto 20px;
    padding: 10px 0;
    text-align: center;
    width: 460px;
}
.btn_location a:hover {
	opacity: 0.7;
}

@media screen and (max-width: 768px) {
.btn_location a {
    width: 94%;
    background-position:6% center;
}
}
/*************** レスポンシブ **********************/
@media screen and (max-width: 800px) {
	ul.btnPre li.preIbaraki {
		left: 525px;
		top: 100px;
	}
	ul.btnPre li.preChiba {
		left: 525px;
		top: 270px;
	}
}
@media screen and (max-width: 768px) {
	.search001 .areaMAP {
		background: none;
		height: auto;
	}
	ul.btnPre {
		margin: 0 auto;
		max-width: 620px;
		width: 94%;
	}
	ul.btnPre li {
		position: relative;
		left: unset !important;
		top: unset !important;
		float: left;
		margin: 0 0 20px 3%;
		width: 48.5%;
	}
	ul.btnPre li:nth-child(odd) {
		margin-left: 0;
	}
	ul.btnPre li a {
		width: 100%;
	}
	.intwrap ul.int_btn {
		margin-bottom: 20px;
	}
	.intwrap ul.int_btn li {
		width: 49%;
		margin-bottom: 2%;
	}
	.intwrap ul.int_btn li:nth-child(2) {
		margin-right: 0;
	}
	.intwrap ul.int_btn li p {
		font-size: 14px;
	}
	.intwrap ul.int_btn li p::after {
		border: solid 6px transparent;
		border-top: solid 9px #e8172b;
	}
	.staff_box img {
		display: block;
	}
	.staff_box .staff_info {
		width: 100%;
		display: block;
		padding:  10px 20px;
	}
	.staff_box .staff_info .int_title {
		font-size: 16px;
	}
	.staff_box .staff_info .staff_name {
		font-size: 14px;
	}
	.intwrap .int_box {
		padding: 0;
		margin: 10px 0 0;
	}
	.intwrap .int_box h3 {
		font-size: 18px;
		margin-bottom: 5px;
	}
	.int_box.img_r p,
	.int_box.img_l p {
		width: 100%;
		padding-right: 0;
		padding-left: 0;
		float: none;
	}
	.int_box.img_r img,
	.int_box.img_l img {
		width: 100%;
		padding: 0 20px;
		margin-top: 10px;
		float: none;
	}
}
@media screen and (max-width: 670px) {
	#logo {
		max-width: 298px;
		width: 60%;
	}
	#header .content .free h1 {
		background-color: #e81726;
		border-top: 8px solid #274fb6;
		color: #ffffff;
	}
}
@media screen and (max-width: 640px) {
	.sp_hd_box{
	    display: block;
	    overflow: hidden;
	    margin-top: 5vw;
	}
	.sp_hd_box .hd_upper{
	  font-size: 3.8vw;
	  font-weight: bold;
	  margin-bottom: 10px;
	}
	.sp_hd_box .hd_upper:before{
	    content: "";
	    height: 3px;
	    width: 40px;
	    display: inline-block;
	    background: #e8172b;
	    transform: rotate(45deg);
	    margin-bottom: 8px;
	}
	.sp_hd_box .hd_upper:after{
	    content: "";
	    height: 3px;
	    width: 40px;
	    display: inline-block;
	    background: #e8172b;
	    transform: rotate(-45deg);
	    margin-bottom: 8px;
	}
	.sp_hd_box .hd_lower{
	  font-size: 7vw;
	  line-height: 1.2;
	  font-weight: bold;
	}
}
@media screen and (max-width: 420px) {
	.sp_hd_box .hd_upper:before,
	.sp_hd_box .hd_upper:after{
	    width: 30px;
	}
	.intwrap ul.int_btn li p {
    font-size: 12px;
	}
}