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

#flow{
	width: 95%;/*コンテンツの幅*/
	margin: 0 auto;
	padding: 100px 0 100px;
}
#flow a{
	text-decoration: none;
	color: #000;
}

#contents_f{
	width:100%;
	margin:auto;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	position:relative;
/*	background-color: #EDEFF0;*/
	background-color: #E3E6E8;
}

.p_left{
	width: 50%;/*コンテンツの幅の半分を指定*/
	float: left;
}
.p_right{
	width: 50%;/*コンテンツの幅の半分を指定*/
	float: right;
}
.pro_div{
	width: 90%;/*ブロックの幅を決める*/
	margin: 0 auto;
}
/***************************************************************/
.menu{
	margin-bottom: 40px;
}

.c_icon{
	width: 1em;
	margin: 5px auto;
	font-size: 20px;
	text-align: center;
	color: #333;
}/*fa-caret-down（▼のアイコンの名前）*/

/***************************************************/
.n_num{
	margin-right: 10px;
	width: 2em;
	display: inline-block;
	text-align: center;
}

.pad_15{
	padding: 5px;
}

/******************流れの写真*******************************************/
.p_img{
	height: 120px;
	float: right;
	margin-right: 80px;
	margin-bottom: 10px;
	margin-top: -30px;
}

/******************外部リンクアイコン*******************************************/
.el_css{
	float: right;
	color: #666;
	display: inline-block;
	margin: auto;/**/
	margin-top: 2px;/*アイコン位置調整用*/
	margin-right: 16px;/**/
	height: 20px;
}/*fa-external-link*/
/***************************************************/



/******************仕事内容紹介******************************************/
.n_job_naiyou{
	background-color: #fff;
	margin-top: 10px;
	margin-bottom: 25px;
	padding: 20px 30px;
	height: 130px;/*仕事内容の高さ*/
	line-height: 2em;
	box-shadow: 1px 1px 10px #D4D4D4;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-size:auto 100%;
	background-repeat:no-repeat;
	background-position: right;
}


/***************************************************/
#senpai_line{
	border: none;
    border-top:dashed 5px #aaa;
    height:5px;
	margin-top: 100px;
	margin-bottom: -5px;
}

/******************作業名のＣＳＳ******************************/
.n_job_title0,.n_job_title1,.n_job_title2,.n_job_title3,.n_job_title4,.n_job_title5{
	padding: 8px;
	font-size: 20px;
	box-shadow: 2px 2px 10px #D4D4D4;
	font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.n_job_title0{
	background-color: #FCF6E9;
	border-left: 10px solid #FDC44F;
}
.n_job_title1{
	background-color: #E9F6FF;
	border-left: 10px solid #80D4FF;
}
.n_job_title2{
	background-color: #FFF1EA;
	border-left: 10px solid #F47324;
}
.n_job_title3{
	background-color: #F0E4F7;
	border-left: 10px solid #8E5EA8;
}
.n_job_title4{
	background-color: #F4FFED;
	border-left: 10px solid #88CB58;
}
.n_job_title5{
	background-color: #FFE9F2;
	border-left: 10px solid #FF66A6;
}


/*********************************2018/04/19********************************************/
.fl-ushitani{
	background-image:url(../voice_data/mv_ushitani_sp.png);
}
.fl-akiyama{
	background-image:url(../voice_data/mv_akiyama_sp.png);
}
.fl-niwata{
	background-image:url(../voice_data/mv_niwata.png);
}
.fl-takeda{
	background-image:url(../voice_data/mv_takeda.png);
}
.fl-hurukawa{
	background-image:url(../voice_data/mv_hurukawa.png);
}
.fl-hosokoshi{
	background-image:url(../voice_data/mv_hosokoshi.png);
}
.fl-none{
	background-image:url(../voice_data/mv_none.png);
}

.f70{
	width: 70%;
}

.fl-hirayama{
	background-image:url(../voice_data/mv_hirayama.png);
}
.fl-tsutsumi{
	background-image:url(../voice_data/mv_tsutsumi.png);
}
.fl-haga{
	background-image:url(../voice_data/mv_haga.png);
}


/***************************タブ関連ＣＳＳ****************************/
/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  background-color: #fff;
/*  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 5px solid /*#5ab4bd*/#F37E1E;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
	border-radius: 8px 8px 0 0;
	box-shadow:0px 1px 0px 2px rgb(0,0,0,0.75);
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: /*#5ab4bd*/#F37E1E;
  color: #fff;
}