@charset "utf-8";
/* ********************************************************************************************
FileName: csr.css
Author: Fujimic
001:
002:
003:
******************************************************************************************** */

/* ********************************************************************************************
001:
******************************************************************************************** */
.header ul.globalnavi li.globalnavi_csr {
	background-color: #104e04;
}

.header ul.globalnavi li.globalnavi_csr a {
	color:#fff;
	cursor:pointer;
}

/* ********************************************************************************************
003:
******************************************************************************************** */
#csr_secondimage{position:relative;width:730px;height:210px;}
#csr_secondimage .main_text{position:absolute;top:0px;left:0px;z-index:1;}
#csr_secondimage .image_photo{position:absolute;top:0px;left:467px;z-index:1;}
a#group_guide img{position:absolute;top:170px;left:10px;z-index:10;}
a#group_effort img{position:absolute;top:170px;left:190px;z-index:10;}
a#group_guide:hover img,
a#group_effort:hover img{filter:alpha(opacity=90);opacity:0.9;}

div.dev_triple .first a,div.dev_triple .second a,div.dev_triple .third a,
div.dev_triple .first a span,div.dev_triple .second a span,div.dev_triple .third a span{display:block;cursor:pointer;}

span.sub{display:inline !important;font-size:0.8em;}

/* ********************************************************************************************
004:
******************************************************************************************** */

#topContent,#content{
	font-family: "Scada", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-size:110%;
}

#category{
  clear: both;
  box-sizing:border-box;
  margin:0 0 20px;
  padding:0 0 15px 0;
  width:100%;
  background:url("/csr/images/top/container_car.png") no-repeat scroll -180px bottom;
  height:100px;
}

#category img{
	padding-top:60px;
	display:block;
	margin-left:135px;
	margin-right:auto;
}

.h2mode{
	border-left:#3EB134 10px solid;
    font-size: 150%;
    font-weight: normal;
	padding:0.4em;
	background:#beedba;
	color:#555;
}


.h3mode {
	border-bottom:#3EB134 5px solid;
	color: #357f20;
	font-weight: normal;
	padding:0.5em;
	border-left:none;
	font-size: 130%;
}


.h4mode{
	margin-top:1em;
	font-weight: normal;
	padding:0.5em;
	background:#beedba;
	color:#494444;
	font-size:120%;
}

.h5mode{
	color:#377d1a;
	background:url(/images/common/img_dot_g.gif) left 0.5em no-repeat;
	margin: 0 ;
	padding:0 0 7px 10px;
	border-bottom: none;
	clear:none !important;
}

.h5mode .main_text{
	font-weight: bold !important;
}

.Tate {
	writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
	text-align:center;
	vertical-align:middle;
}

.ml20{
	margin-left:20px;
}

.mr20{
	margin-right:20px;
}

.voice_profile{
	display: flex;
	align-items: center;
}

.job_title{
	float:left;
	margin:0 0 0 20px;
}

/* 2分割小さめ */
div.dev_double_mini{width:880px;}
div.dev_double_mini div.first{float:left;width:440px;}
div.dev_double_mini div.second{float:right;width:440px;}

@media only screen and (max-width: 640px) {
div.dev_double_mini{width:100%;}
div.dev_double_mini div.first,div.dev_double_mini div.second{float:none;width:100%;margin:0px;}
}


/*セカンド*/
ul.column3{
	margin-left:10px;

}
ul.column3 li.sec3{
	list-style:none;
	float:left;
}
ul.column3 li.sec3 a{
	text-decoration:none;
	display:block;
	width:270px;
	margin:10px;
	border:#FFFFFF solid 3px;

}
ul.column3 li.sec3 a:hover{

	border:#85DD70 solid 3px;

}
ul.column3 li.sec3 a h4{

	background:#3EB134;

	color:#FFFFFF;

	padding:0.25em;

}
ul.column3 li.sec3 a p{

	background:#E1E1E1;

	color:#494444;

	padding:0.25em;
}


/* キャプションを画像の左に合わせる */

div.cap {
    display: table;
	margin: 0 auto;
}

div.cap p {
	text-align:left;
	font-size:90%;
	line-height:1.3;
	padding:0.5em;
}


@media only screen and (max-width:640px){
.h2mode{font-size:100%;}


ul.column3 li.sec3{float:none;}

ul.column3 li.sec3 a,
ul.column3 li.sec3 a img{width:500px;}

div.cap p {
	text-align:center;
}

}



@media only screen and (min-width:641px)
{
.pcCap_width {
    display: table;
    width: 160px; /* minimum width */
    *width: auto; /* for IE7 and below */
}
}