@charset "utf-8";



/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定★★★★★ボディの背景色#df2626★★★★★
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #000;	/*全体の文字色*/
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;	/*フォント種類*/
	font-size: 18px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	background: #ffffff;	/*背景色*/
	-webkit-text-size-adjust: 100%;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form{margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
textarea,select,input[type="text"],input[type="checkbox"],input[type="radio"],input[type="button"],input[type="submit"]{font-size: 100%;}
h1,h2,h3,h4,#menubar {font-family:"游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro";}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none; max-width: 100%;height: auto; vertical-align: middle;}　/*★★★★★画像サイズ100％の基本設定*/
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}





/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #1560AD;	/*リンクテキストの色*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
a:hover {
	color: #679b87;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	}





/* slideshow */
#stage {
	position:relative;
	cursor:pointer;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}
#stage ul {
	padding: 0px;
	position:relative;
}
#stage ul li {
	max-width: 100%;
	list-style-type: none;
	position:absolute;
	opacity: 0;
}
#stage img {
	margin-top: 0px;
	margin-bottom: 10px;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}





/* ---------------------------------------------------------------------------
ついかぶん ぼたん
---------------------------------------------------------------------------*/

.button {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	line-height: 25px;
	outline: none;
	background-color: #333;
	color: #fff;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
	width: 90%;
	margin-bottom: 20px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
}

.button:hover {
	background-color: #59b1eb;
	color: #fff;
}

/* ---------------------------------------------------------------------------
ふわ〜っと表示させる　削除したらパキっと色が変わる
---------------------------------------------------------------------------*/

.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

/* ついかぶん おわり */


/*★★★★★★★★★★★★★★★★★★★★★★★★★--改変のはじまり--★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/




.sample {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}



/*---------------------------------------------------------------------------
★★★inner部すべての共通→画面よこサイズなど
---------------------------------------------------------------------------*/
.inner {
	max-width: 1000px;
	margin: 0 auto;
}



/*---------------------------------------------------------------------------
★★★スタッフ紹介の部分→ワイド100％
---------------------------------------------------------------------------*/
.inner_c4 {
	max-width: 1000px;
	margin: 0 auto;
}


/*---------------------------------------------------------------------------
★★★スタッフ紹介の部分→４分割のブロック設定
---------------------------------------------------------------------------*/

.c4 .list {
	float: left;
	width: 25%;/*幅１０００ピクセルで４分割やから２５％やで*/
	padding: 0%;/*スタッフ情報（写真カコミ）の上下左右余白→ピッタシ引っ付けた*/
}


/*---------------------------------------------------------------------------
今回不要★★★スタッフ紹介の部分→タイトル設定→h4
---------------------------------------------------------------------------*/

.c4 .list h4 {
	font-size: 110%;
	width: 90%;
	margin-right: auto;/*タイトルと本文テキストとの行間幅*/
	margin-left: auto;
}


/*---------------------------------------------------------------------------
★★★スタッフ紹介の部分→文字サイズなどの設定→不思議なんやけどロマンチック文字が８５％で同じに見えるんやけど、なんでなん？
---------------------------------------------------------------------------*/

.c4 .list p {
	font-size: 80%;
}



/*---------------------------------------------------------------------------
テーブル設定
---------------------------------------------------------------------------*/

table {
	border: 1px #cccccc solid;
	border-collapse: collapse;
	border-spacing: 0;
	width: 90%;
	font-size: 80%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 15px;
}

table th {
	padding: 5px;
	border: #cccccc solid;
	border-width: 0 0 1px 1px;
	background: #F5F5F5;
	text-align: left;
}

table td {
	padding: 5px;
	border: 1px #cccccc solid;
	border-width: 0 0 1px 1px;
	text-align: left;
}




/*---------------------------------------------------------------------------
★★★ヘッダー部→最上部のヨコ色ケイ、ケイ下右の注釈文字
---------------------------------------------------------------------------*/

header {
	border-top: 50px solid #1560AD;	/*上の線の幅、線種、色*/
}


header p {
	position: absolute;
	right: 3%;		/*ヘッダーに対して左から3%の場所に配置*/
	top: 25px;	/*上から30pxの場所に配置したらギリギリ*/
	font-size: 80%;
	color: #ffffff;
	line-height: 1.3em;
	font-weight: bold;
	text-align: center;
}


/*---------------------------------------------------------------------------
★★★スタッフ紹介部→背景色→div class="contents bg1
---------------------------------------------------------------------------*/

.bg1 {
	background: #dfdfdf;	/*背景色：グレー*/
}


/*---------------------------------------------------------------------------
★★★求人情報、会社概要部→div class="contents bg2
---------------------------------------------------------------------------*/

.bg2 {
	background: #ffffff;	/*背景色：ホワイト*/
}



/*---------------------------------------------------------------------------
★★★スタッフ写真部　求人情報　会社概要を囲む設定　div class="contents bg1　および　bg2
---------------------------------------------------------------------------*/
.contents {
	clear: both;
	overflow: hidden;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;	/*contentsグレー部のbottomあき量　0％をふやすとグレーがふえる*/
	padding-left: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

/*---------------------------------------------------------------------------
★★★h2タグの設定（インフォメーション部）
---------------------------------------------------------------------------*/
.contents h2 {
	clear: both;
	margin-bottom: 0px;
	font-size: 130%;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	color: #000000;
	margin-top: 0px;
}



/*---------------------------------------------------------------------------
★★★ロマンチックビューの説明文言部→すべてをかこむ背景など、ラップ設定
---------------------------------------------------------------------------*/

.head-contents {
	clear: both;
	overflow: hidden;
	padding-top: 0px;
	padding-right: 25%;
	padding-bottom: 5%;
	padding-left: 25%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align: center;
	color: #000000;
}


/*---------------------------------------------------------------------------
★★★ロマンチックビューの説明文言部→キャッチ、ボディ、立道日本語ロゴ
---------------------------------------------------------------------------*/

.head-contents h1 {
	clear: both;
	margin-top: 50px;
	margin-bottom: 10px;
	font-size: 130%;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	color: #000000;
}


.head-contents img {
	width: 300px;
	margin-bottom: 30px;
	}


.head-contents p {
	text-align: left;
	font-size: 85%;
}




/*---------------------------------------------------------------------------
★★★list　タグに対する上下の余白設定　％を増やすと余白が増えるよ〜ん
---------------------------------------------------------------------------*/

.list {
	overflow: hidden;
	position: relative;
	margin-top: 1%;/*インフォメーション３カラムブロックの内の余白*/
	margin-bottom: 1%;/*インフォメーション３カラムブロックの内の余白*/
}

.list a {
	overflow: hidden;
	text-decoration: none;
	display: block;
	
}


/*---------------------------------------------------------------------------
★★★list　h4タグタイトルフォント設定
---------------------------------------------------------------------------*/
.list h4 {
	padding: 0;
	border: none;
	font-size: 200%;	/*タイトル文字サイズ*/
	color: #1560AD;		/*タイトル文字色*/
	line-height: 1.2em;
	overflow: hidden;	/*１行を超えた部分の非表示設定*/
	margin-bottom: 2%;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
}



/*---------------------------------------------------------------------------
★★★スタッフ紹介写真のブロックのはじまり→本文テキストの設定　段落タグ設定
---------------------------------------------------------------------------*/
.list p {
	padding: 0 !important;
	line-height: 1.8;
	overflow: hidden;
	width: 90%;
	display: block;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	color: #000000;
}

/*---------------------------------------------------------------------------
★★★スタッフ紹介　figureが割当られている　写真と文章との余白設定
---------------------------------------------------------------------------*/

.list figure img {
	margin: 0 0 5% 0;	/*上、右、下、左への画像の外側にとるスペース*/
	}
	





/*★★★★★カラム％幅、パディング％内余白--------------------------------------------*/

.list {
	float: left;	/*左に回り込み*/
	padding: 0%;	/*ボックス内の余白の上書き*/
	width: 50%;		/*幅*/
}

/*h4タグ*/
.list h4 {
	font-size: 110%;
	width: 90%;
	margin-right: auto;/*タイトルと本文テキストとの行間幅*/
	margin-left: auto;
}

/*p段落タグ*/
.list p {
	font-size: 85%;
	/*（height: 12.6em;	）←ここにコレをいれるとListブロックでの表示する高さが制限できる→上の「.list p」の「1.8」×「表示させたい行数」を設定。5.4だと3行分になる。*/
	color: #000000;
}

.list img {

	margin-top: 10px;
	margin-bottom: 10px;
}






/*---------------------------------------------------------------------------
★★★　パソコン用　コピーライト部分
---------------------------------------------------------------------------*/
#footer {
	clear: both;
	text-align: center;
	background: #1560AD;	/*背景色*/
	padding-top: 1%;
	padding-bottom: 2%;
	margin-top: -0px;
}

/*---------------------------------------------------------------------------
★★★　パソコン用　フッターロゴ／PCのみロゴが小さい
---------------------------------------------------------------------------*/
#footer img {
	width: 25%;
	margin-top: 2%;
	margin-bottom: 1%;
}

/*---------------------------------------------------------------------------
★★★　パソコン用　フッターフォントサイズ　および　フォント色
---------------------------------------------------------------------------*/

#footer p {
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
}





/*画面幅1200px以上の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1200px){

/*inner共通
---------------------------------------------------------------------------*/
.inner {
	width: 1000px;	/*サイト幅*/
}

}



/*★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

画面幅750px以下の設定　→　480以下もふくまれるよ

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/


@media screen and (max-width:750px){

/*---------------------------------------------------------------------------
★★★inner共通設定
---------------------------------------------------------------------------*/

.inner {
	width: auto;
}



/*---------------------------------------------------------------------------
★★★スマホサイズのブロック設定（※２カラムも３カラムと１列レイアウトと同じように設定しなおす）
---------------------------------------------------------------------------*/

.list {
	margin: 0 !important;
	padding: 0% !important;/*左右幅の余白／０％以上で余白がつく*/
	float: none !important;
	width: auto !important;
	
}

.list:last-of-type {
	margin-bottom: 10px !important; /*インフォメーション個別情報の最下段本文テキスト下の余白 削除してもいいのかな*/
}


.list h4 {
	font-size: 150% !important;
	font-weight: bold !important;
}

.list p {
	font-size: 100% !important;
	line-height: 1.5 !important;/*本文の行間*/
	height: auto !important;
	padding: 0px 0px 20px !important;	/*上、左右、下への余白*/
}
	

/*---------------------------------------------------------------------------
★★★スマホサイズ共通→bg2 h2　タイトル文字サイズ
---------------------------------------------------------------------------*/

.bg2 h2 {
	font-size : 150% !important;
	margin-top: -5px !important;
}

	
	
.head-contents {
	padding-right: 6% !important;
	padding-left: 6% !important;
	line-height: 1.6 !important;/*本文の行間*/

}
	
.contents h2, .contents h3,.contents h4 {
	margin-bottom: 20px;/*インフォメーションタイトルと本文の行間幅*/
	text-align: center;
}

}	/*削除不可／@media screen and (max-width:750px)*/



/*★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

画面幅480px以下の設定　→

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/


@media screen and (max-width:480px){

/*---------------------------------------------------------------------------
★★★スマホボディ基本設定→基本の文字サイズ→これを基準にそれぞれの要素でサイズを変更
---------------------------------------------------------------------------*/
body {
	font-size: 14px;
}

/*---------------------------------------------------------------------------
★★★最上部ライン下の文字サイズ設定
---------------------------------------------------------------------------*/

header p {
	
	right: 3%;		/*ヘッダーに対して左から3%の場所に配置*/
	top: 30px;	/*ヘッダーに対して上から38pxの場所に配置*/	
}


/*---------------------------------------------------------------------------
テーブル設定
---------------------------------------------------------------------------*/

table {
	font-size: 100%;
}


/*---------------------------------------------------------------------------
★★★スマホにした際にグレーバック間の余白がでるのをマイナス設定で相殺　div class="contents bg1　および　bg2
---------------------------------------------------------------------------*/
.contents {
	margin-top: -10px;

}


/*---------------------------------------------------------------------------
★★★スマホコンテンツ→見出しタイトル文字のサイズ、センター揃え、などなど
---------------------------------------------------------------------------*/
.contents h2, .contents h3,.contents h4 {
	margin-bottom: 20px;/*インフォメーションタイトルと本文の行間幅*/
	font-size: 150%;
	text-align: center;
}

/*段落タグ設定*/
.contents p {
	padding: 0px 10px 20px;	/*上、左右、下への余白*/
}



/*---------------------------------------------------------------------------
★★★スマホコンテンツ→スタッフベース（グレー部）のマージン
---------------------------------------------------------------------------*/

.contents {
	margin-bottom: 10px;
}




}	/*削除不可／@media screen and (max-width:480px)*/




/*---------------------------------------------------------------------------
パソコンで見たときは"pc"のclassがついた画像が表示される
---------------------------------------------------------------------------*/


.pc { display: block !important; }
.sp { display: none !important; }


/*---------------------------------------------------------------------------
スマートフォンで見たときは"sp"のclassがついた画像が表示される
---------------------------------------------------------------------------*/

@media only screen and (max-width: 750px) {
	
.pc { display: none !important; }
.sp { display: block !important; }

}