@charset "UTF-8";
/*
===================================================================
この著作権表示は、必ず残して下さい。
オリジナルバージョンのスタイルシートは、以下のチュートリアルを基にしています。
http://www.codeblog.ch/2009/01/concrete5-theme-erstellenconcrete5-theme-erstellen

This style sheet was modified and used with permission.

By Usagi Project

http://concrete5-japan.org
http://usagi-project.org
===================================================================
*/
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.codeblog.ch/2009/01/concrete5-theme-erstellenconcrete5-theme-erstellen
Copyright (c) 2008 www.mesch.ch, Remo Laubacher. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
html, body {
	margin:0px;
    padding:0px;
	font-size:12px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color:#000;
	line-height:30px;
	min-width:1300px;
}

/* ウィンドウ幅が479〜768pxの場合に適用するCSS */
@media screen and (max-width:1024px){
html, body {
	min-width:100%;
	line-height:24px;
	font-size:14px;
}
}
a {
    text-decoration: none;
}

a:link {
	text-decoration:none;
}
a:visited {
	text-decoration:none;
}
a:hover {
	text-decoration:none;
}
a:active {
	text-decoration:none;
}


.img{
width: 100%;
height: auto;
max-width: 100%;
}
.link:hover {
    -ms-filter: "alpha(opacity=60)";
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}

.im{
max-width: 100%;
height: auto;
width:auto;
}

/* ================================================================ 
ヘッダー
=================================================================== */
#header{
	width:100%;
	height:auto;
	float:left;
	margin-top:20px;
	margin-bottom:0px;
}
@media screen and (max-width:1024px){
#header{
	width:100%;
	height:auto;
	float:left;
	margin-top:0px;
	margin-bottom:0px;
}

}


/* ヘッダー左 */
#h_left{
	width:auto;
	height:auto;
	float:left;
	margin-left:2%;
	margin-right:auto;
	margin-top:10px;
}
#h_rogo{
	width:200px;
	height:auto;
	float:left;
	text-align:left;
}
#h_company{
	width:180px;
	height:auto;
	float:left;
	padding-top:4px;
	text-align:left;
}

@media screen and (max-width:1024px){
#h_left{
	width:100%;
	height:auto;
	float:left;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
}
#h_rogo{
	width:100%;
	height:auto;
	float:left;
	text-align:center;
}
#h_company{
	width:100%;
	height:auto;
	float:left;
	padding-top:4px;
	text-align:center;
}
}



/* ヘッダー右 */
#h_right{
	width:auto;
	height:auto;
	float:right;
	margin-right:2%;
}

#h_contact{
	width:auto;
	height:auto;
	float:left;
}
#h_con_box{
	width:380px;
	height:auto;
}
#h_con_tel{
	width:200px;
	height:auto;
	float:left;
}
#h_con_mail{
	width:180px;
	height:auto;
	float:left;
}

#h_rec_box{
	width:320px;
	height:auto;
	float:left;
	margin-left:10px;
}
	
#h_rec{
	width:150px;
	height:auto;
	float:left;
	margin-left:10px;
}

@media screen and (max-width:1024px){
#h_right{
	width:100%;
	height:auto;
	float:right;
	margin-right:0;
}
#h_contact{
	width:100%;
	height:auto;
	float:left;
}

#h_con_box{
	width:380px;
	height:auto;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}
#h_con_tel{
	width:200px;
	height:auto;
	float:left;
}
#h_con_mail{
	width:180px;
	height:auto;
	float:left;
}
#h_rec_box{
	width:320px;
	height:auto;
	float:none;
	margin-left:auto;
	margin-right:auto;
}
#h_rec{
	width:150px;
	height:auto;
	float:left;
	text-align:center;
	margin-left:0px;
}

}


@media screen and (max-width:479px){
#h_right{
	width:100%;
	height:auto;
	float:right;
	margin-right:0;
}
#h_contact{
	width:100%;
	height:auto;
	float:left;
}

#h_con_box{
	width:100%;
	height:auto;
	text-align:center;
}
#h_con_tel{
	width:100%;
	height:auto;
	float:left;
}
#h_con_mail{
	width:100%;
	height:auto;
	float:left;
}
#h_rec_box{
	width:90%;
	height:auto;
	float:none;
	margin-left:auto;
	margin-right:auto;
}
#h_rec{
	width:50%;
	height:auto;
	float:left;
	text-align:center;
	margin-left:0px;
}

}




/* ================================================================ 
アイキャッチ
=================================================================== */
#eye{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	float:left;
	display:block;
}
#eye ul{
	margin:0;
	padding:0;
}

#eye_s{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	float:left;
	display:none;
}
#eye_s ul{
	margin:0;
	padding:0;
}

/* ウィンドウ幅が479〜768pxの場合に適用するCSS */
@media screen and (max-width:479px){
#eye{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	float:left;
	display:none;
}
#eye ul{
	margin:0;
	padding:0;
}

#eye_s{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	float:left;
	display:block;
}
#eye_s ul{
	margin:0;
	padding:0;
}
}



/*=====================================================
トップボタン定義 
=====================================================*/
#top_bt_bg{
	width:100%;
	padding-top:0px;
	padding-bottom:8px;
	background-color:#158FD0;
	float:left;
}
#top_bt{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}
.navi ul{
	margin:0;
	padding:0;
}
.navi li{
	display:inline;
	padding-left:0;
	margin-right:0;
	float:left;
	font-size:20px;
	color:#fff;
	width:19%;
	text-align:center;
	font-weight:500;
}
.navi li+li{
	border-left:1px solid #fff;
}
.navi a{
	color:#fff;
	display:block;
}
.navi a:hover{
	color:#03C;
}

/*----------------------------------レスポンシブ　メニュー----------------------------------*/
.slicknav_menu {
 display:none;
}
 
@media screen and (max-width: 1024px) {
#menu {
 display:none;
}
 
.slicknav_menu {
 display:block;
}
}
/*----------------------------------固定　メニュー----------------------------------*/
.fixed{
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 100;
}

/* ================================================================ 
アイキャッチ上のキャッチ
=================================================================== */
#catch{
	width:100%;
	height:auto;
	float:left;
	text-align:center;
}

@media screen and (max-width: 1024px) {
#catch{
	width:98%;
	height:auto;
	float:left;
	margin-left:1%;
	text-align:left;
}	
}
/* ================================================================ 
コンテンツ
=================================================================== */
#contents{
	width:100%;
	height:auto;
	float:left;
	margin-top:10px;
	margin-bottom:50px;
	margin-left:0%;
}

@media screen and (max-width:479px){
#contents{
	width:98%;
	height:auto;
	float:left;
	margin-top:10px;
	margin-bottom:50px;
	margin-left:1%;
}

}

/* ================================================================ 
フッター
=================================================================== */
#footer_bg{
	width:100%;
	height:auto;
	float:left;
	background-color:#2E308F;
	padding-top:20px;
	padding-bottom:20px;
}
#footer_box{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	max-width:1200px;
}
#footer_left{
	width:46%;
	height:auto;
	float:left;
	margin-left:2%;
	margin-right:2%;
	margin-top:10px;
}
#footer_right{
	width:46%;
	height:auto;
	float:left;
	margin-left:2%;
	margin-right:2%;
}


/* ウィンドウ幅が479〜768pxの場合に適用するCSS */
@media screen and (max-width:769px){
#footer_left{
	width:98%;
	height:auto;
	float:left;
	text-align:center;
	margin-left:1%;
	margin-right:1%;
}
#footer_right{
	width:98%;
	height:auto;
	float:left;
	margin-left:1%;
	margin-right:1%;
	text-align:center;
}

}

/* ================================================================ 
ページトップ
=================================================================== */
.page-top {
    position: fixed;
    bottom: 60px;
    right: 40px;
    padding: 14px 10px 14px 10px;
    background: #06F;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 16px;
	color:#fff;
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

.page-top:hover {
    background:#9CF;
}


/* ================================================================ 
ここからデザイン関係のスタイルシート
=================================================================== */

/* =====エリアのデザイン関係=====*/
.area_1{
	width:100%;
	height:auto;
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
}
.area_2{
	width:100%;
	height:auto;
	max-width:300px;
	margin-left:auto;
	margin-right:auto;
}
.area_3{
	width:100%;
	height:auto;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
}

.title_main{
	width:100%;
	height:auto;
	text-align:center;
	margin-top:50px;
	margin-bottom:30px;
	float:left;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:36px;
	font-weight:bolder;
	color:#2E308F;
	line-height:0px;
}

@media screen and (max-width:479px){
.title_main{
	margin-top:20px;
	margin-bottom:20px;
}
}


/* =====ボックス関係=====*/

/* -----皆様を犯罪のところ-----*/
.hanzai_1{
	width:40%;
	height:auto;
	float:left;
}
.hanzai_2{
	width:50%;
	height:auto;
	float:left;
	margin-left:10%;
}

@media screen and (max-width:769px){
.hanzai_1{
	width:100%;
	height:auto;
	float:left;
	text-align:center;
}
.hanzai_2{
	width:100%;
	height:auto;
	float:left;
	margin-left:0;
	font-size:14px;
	line-height:24px;
}
	
}



/* -----業務内容のところ（３カラム）-----*/
.waku_3{
	width:32.3333%;
	height:auto;
	margin-left:0.5%;
	margin-right:0.5%;
	float:left;
	margin-bottom:60px;
}

@media screen and (max-width:479px){
.waku_3{
	width:100%;
	height:auto;
	margin-left:0;
	margin-right:0;
	float:left;
	margin-bottom:20px;
}
	
}

/* -----会社案内のところ（２カラム）-----*/
.waku_2{
	width:44%;
	height:auto;
	margin-left:3%;
	margin-right:3%;
	float:left;
	margin-bottom:60px;
}

@media screen and (max-width:769px){
.waku_2{
	width:98%;
	height:auto;
	margin-left:1%;
	margin-right:1%;
	float:left;
	margin-bottom:20px;
}

}

@media screen and (max-width:479px){
.waku_2{
	width:100%;
	height:auto;
	margin-left:0;
	margin-right:0;
	float:left;
	margin-bottom:20px;
}
	
}

/* -----会社方針のところ-----*/
.housin{
	width:92%;
	height:auto;
	padding: 10px 4% 10px 4%;
	margin-bottom:10px;
	border:solid 1px #2E308F;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;	
}

/* -----お気軽にのところ-----*/
.okigaru_tel{
	width:40%;
	padding-left:5%;
	padding-right:5%;
	padding-top:5px;
	font-size:24px;
	color:#0070BF;
	text-align:center;
	font-weight:bolder;
	float:left;
}
.okigaru_con{
	width:39%;
	padding-left:5%;
	padding-right:5%;
	font-size:24px;
	color:#0070BF;
	text-align:center;
	font-weight:bolder;
	border-left:#999 solid 2px;
	float:left;
}

@media screen and (max-width:479px){
.okigaru_tel{
	width:90%;
	padding-left:5%;
	padding-right:5%;
	padding-top:5px;
	font-size:24px;
	color:#0070BF;
	text-align:center;
	font-weight:bolder;
	float:left;
}
.okigaru_con{
	width:90%;
	padding-left:5%;
	padding-right:5%;
	font-size:24px;
	color:#0070BF;
	text-align:center;
	font-weight:bolder;
	border-left:#999 solid 0px;
	float:left;
}
	
}

.contact{
	width:100%;
	height:auto;
	max-width:400px;
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
}

/* ウィンドウ幅が0〜479pxの場合に適用するCSS */
@media screen and (max-width:479px){

.contact{
	width:98%;
	height:auto;
	max-width:400px;
	margin-left:1%;
	margin-right:auto;
	margin-top:20px;
}
}



/* -----テーブル-----*/

/* -----採用情報のところ-----*/

table.type01 {
	border-collapse: separate;
	border-spacing: 0;
	text-align:center;
	line-height: 1;
	margin-left:auto;
	margin-right:auto;
}
table.type01 th {
	width:auto;
	padding: 0;
	text-align:center;
	font-size:40px;
	color:#BC1D2C;
	font-weight:bolder;
}
table.type01 td {
	padding: 0 0 0 0px;
	text-align:center;
	color:#000;
	font-size:24px;
	font-weight:bolder;
}
/* ウィンドウ幅が479〜768pxの場合に適用するCSS */
@media screen and (max-width:479px){
table.type01 th {
	width:100%;
	padding: 0;
	display:block;
	text-align:center;
	font-size:30px;
	color:#BC1D2C;
	font-weight:bolder;
}
table.type01 td {
	padding: 0 0 0 00px;
	text-align:center;
	color:#000;
	line-height:40px;
	width:100%;
	display:block;
}
}

/* -----募集内容のところ-----*/
table.type02 {
	border-collapse: separate;
	border-spacing: 0;
	text-align:left;
	line-height: 1;
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
	margin-bottom:40px;
	width:100%;
	max-width:800px;
	border-top:#808081 solid 1px;
	border-left:#808081 solid 1px;
}
table.type02 th {
	width:30%;
	padding: 10px 0 10px 3%;
	text-align:left;
	font-size:16px;
	color:#FFF;
	background-color:#00ABEC;
	border-bottom:#808081 solid 1px;
	border-right:#808081 solid 1px;
}
table.type02 td {
	padding: 10px 0 10px 3%;
	text-align:left;
	color:#000;
	font-size:16px;
	border-bottom:#808081 solid 1px;
	border-right:#808081 solid 1px;
	background-color:#FFF;
}
@media screen and (max-width:769px){
table.type02 {
	border-collapse: separate;
	border-spacing: 0;
	text-align:left;
	line-height: 1;
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
	margin-bottom:40px;
	width:100%;
	max-width:800px;
	border-top:#808081 solid 1px;
	border-left:#808081 solid 1px;
}
table.type02 th {
	width:30%;
	padding: 10px 0 10px 3%;
	text-align:left;
	font-size:14px;
	color:#FFF;
	background-color:#00ABEC;
	border-bottom:#808081 solid 1px;
	border-right:#808081 solid 1px;
}
table.type02 td {
	padding: 10px 0 10px 3%;
	text-align:left;
	color:#000;
	font-size:12px;
	border-bottom:#808081 solid 1px;
	border-right:#808081 solid 1px;
	background-color:#FFF;
}
}

@media screen and (max-width:479px){
table.type02 {
	border-collapse: separate;
	border-spacing: 0;
	text-align:left;
	line-height: 1;
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
	margin-bottom:40px;
	width:98%;
	max-width:800px;
	border-top:#808081 solid 1px;
	border-left:#808081 solid 1px;
}

table.type02 th {
	width:97%;
	padding: 10px 0 10px 3%;
	text-align:left;
	font-size:16px;
	color:#FFF;
	background-color:#00ABEC;
	border-bottom:#808081 solid 1px;
	border-right:#808081 solid 1px;
	display:block;
}
table.type02 td {
	width:97%;
	padding: 10px 0 10px 3%;
	text-align:left;
	color:#000;
	font-size:16px;
	border-bottom:#808081 solid 1px;
	border-right:#808081 solid 1px;
	background-color:#FFF;
	display:block;
}
}

/* -----会社概要のところ-----*/


table.type03 th {
	width:20%;
	padding: 10px 0 10px 0;
	color:#2E308F;
	font-weight:bolder;
	border-bottom:dashed 1px #A4A6A9;
	text-align:left;
}
table.type03 td {
	width:80%;
	padding: 10px 0 10px 0px;
	color:#000;
	border-bottom:dashed 1px #A4A6A9;
	text-align:left;
}
/* ウィンドウ幅が479〜768pxの場合に適用するCSS */
@media screen and (max-width:479px){
table.type03 th {
	width:100%;
	padding: 10px 0 0px 0;
	color:#2E308F;
	font-weight:bolder;
	border-bottom:dashed 0px #A4A6A9;
	text-align:left;
	display:block;
}
table.type03 td {
	width:100%;
	padding: 10px 0 10px 0px;
	color:#000;
	border-bottom:dashed 1px #A4A6A9;
	text-align:left;
	display:block;
}
}