@charset "UTF-8";

/* ++++++++++++++　　　トップページ（index.php）　　　++++++++++++++++++*/



/* ////////////////////////////////////////////////////////////////////////////////////////

　　　　　全てのスクリーンサイズで適用される設定・モバイルファースト
　　　　　
//////////////////////////////////////////////////////////////////////////////////////// */



/*******************************************************　
　　　　　　　　キャッチエリア

*******************************************************/


.catch-area{
	 position: relative;
}

.catch-area img{
	 max-width: 700px;
	width:100%;
}

.catch-image {
    position: absolute;
	top:300px;
	left:80px;
}

.catch-area img{
	display: block;
}

.catch-area-L{
	width:100%;
}

.catch-area-R{
	width:100%;
}

.catch-area-R img{
	max-width: 300px;
	width:100%;
}

h1.catch-copy-01{
	font-size:26px;
	font-weight: bold;
	color:#000000;
	margin:20px 0 10px 0;
}

span.catch-copy01-b{
	font-size: 30px;
}

h2.diagonal{
	width:90%;
	height:45px;
	background:#000000;
	color:#FFF;
	font-size:16px;
	font-weight: bold;
	text-align:left;
	transform:skewX(-10deg);
	line-height: 42px;
	padding:0 5% 0 5%;
}

span.diagonal-copy02-b{
	font-size:16px;
	font-weight: bold;
}

/*背景色（ベタ塗り）の後に画像が表示されるJSエフェクトを使ったアニメーション*/
.mask-wrap{
  display: table;
  overflow: hidden;
}
.mask-wrap .mask{
  display: table;
  position: relative;
  margin-bottom: .25em;
  left: -100%;
  overflow: hidden;
}
.mask-wrap .mask-bg{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
}


.catch-text-block{
	font-size:20px;
	font-weight: bold;
	color:#000000;
	margin:20px 0 0 20px;
	line-height: 40px;
	
}

.catch-reform{
	margin:75px 0 0 0;
	width:100%;
}

.catch-reform-L{
	display: none;
}

.catch-reform-L img{
	max-width: 28px;
	width:100%;
}

.catch-reform-R{
	float: left;
	width:100%;
}

h2.reform-lead{
	color:#000000;
	font-weight: bold;
	font-size:20px;
}

.reform-text-block{
	margin:10px 0 0 0;
}

.reform-text-block-L{
	font-size:20px;
	font-weight: bold;
	font-style: italic;
    font-family: Times New Roman, "ＭＳ Ｐゴシック";
}

span.reform-text-1-b{
	font-size:36px;
}

.reform-text-block-R{
	font-size:18px;
	margin:15px 0 0 0;
	font-weight: bold;
}

span.reform-text-2-b{
	font-size:23px;
}




/*サブタイトル*/

h2.sub_title{
	width:100%;
	font-size:24px;
	font-weight: bold;
	color: #000000;
}

h2.sub_title_2{
	width:100%;
	font-size:24px;
	font-weight: bold;
	color: #000000;
	text-align: center;
}

/*メンバーエリア*/
.member{
	margin:60px 0 0 0;
	width:100%;
}



span.sub-title-text-s{
	font-size:20px;
}

.member-box{
	margin:30px auto 0 auto;
	display: flex;
  justify-content: center;
	text-align: center;
}





/*ふわっと表示*/

ul.gallery {
	list-style: none;
	margin:0 auto;
	text-align: center;
	padding: 0;
}
.gallery li.gallery-item {
	list-style: none;
	float: left;
	max-width: 480px;
	height: auto;
	margin:0 auto;
	display: inline-block;
	position: relative;
	/* アニメーションに関数プロパティ */
	opacity: 0; 	/* フェードインしたいので最初は非表示 */
	bottom: -15px; 	/* 下から上に移動したいので最初はマイナス値 */
	transition: 1s; /* 1秒かけてアニメーション */
}


/* スクロールした時に追加されるclass */
.gallery .gallery-item.fadein {
	opacity: 1;
	bottom: 0;
}

.member-image{
	
}

.member-image img{
	max-width: 480px;
	width:100%;
	margin:0 0 14px 0;
}

.member-title{
	font-size:18px;
	font-weight: bold;
	color: #000000;
	margin:0 0 8px 0;
	text-align: left;
}

.member-text{
	font-size:14px;
	color:#444444;
	line-height: 25px;
	text-align: left;
}

/*できることエリア*/
.cando-area{
	margin:40px 0 0 0;
	width:100%;
	background: url("../images_tools/c_img_03.png") no-repeat                                ;
	background-size:548px 409px;
	background-position:right top;
}


p.cando-text{
	display:block;
	color:#000000;
	font-size:16px;
	margin:20px 0 20px 0;
	line-height: 24px;
	text-shadow:0 0 5px #FFF;
}

/*成してきたことエリア*/

/*ふわっと表示その2*/


.job-frame li.job-frame-item {
	
	display: inline-block;
	position: relative;

	/* アニメーションに関数プロパティ */
	opacity: 0; 	/* フェードインしたいので最初は非表示 */
	bottom: -15px; 	/* 下から上に移動したいので最初はマイナス値 */
	transition: 1s; /* 1秒かけてアニメーション */
}


/* スクロールした時に追加されるclass */
.job-frame .job-frame-item.fadein {
	opacity: 1;
	bottom: 0;
}

.job-area{
	margin:70px 0 0 0;
	width:100%;
}


.job-box{
	margin:35px 0 0 5px;
}

ul.job-frame{
	list-style: none;
}



.job-image{
	border:1px solid #e5e5e5;
	background-color: #FFF;
	padding:5px
	
}

.job-image img{
	max-width: 320px;
	width:100%;
	margin:0 0 0 0;
}

.job-catch{
	font-size:19px;
	font-weight: bold;
	color:#000000;
	line-height: 30px;
	margin:20px 2px 0px 2px;
}

.job-industry{
	font-size:14px;
	color:#353535;
	line-height: 30px;
	margin:15px 4px 20px 4px;
	padding:0 0 5px 0;
	border-bottom:1px #b9b9ba solid;
	max-width:320px;
	width:100%;
}

.job-detail{
	font-size:15px;
	color:#353535;
	line-height: 28px;
	margin:15px 2px 20px 2px;
}

/*スタンスエリア*/
.stance-area{
	margin:70px 0 0 0;
	width:100%;
}

.stance-text{
	margin:40px 0 40px 0;
	
}
.stance-L{
	width:100%;
	margin:0 10px 0 5px;
	color: #000000;
    font-size: 18px;
	line-height: 38px;
}

.stance-R{
	text-align: center;
}

.stance-R img{
	max-width: 450px;
	width:100%;
	margin:5px 0 0 0;
}

.stance-sign{
	font-size:15px;
	text-align: right;
	width:100%;
	max-width: 450px;
	margin:10px auto 0 auto;
}

/*会社概要エリア*/
.company-area{
	margin:80px auto 100px auto;
	max-width:540px;
	width:90%;
}

table.campany-detail{
	width:100%;
	border-collapse:collapse;
	font-size:14px;
	font-weight: lighter;
	margin:20px 0 0 0;
}

table.campany-detail th,
table.campany-detail td{
	border-top:1px solid #474545;
	padding: 30px 10px 15px 10px;
}
table.campany-detail th.last-sel,
table.campany-detail td.last-sel{
	border-top:1px solid #474545;
	border-bottom:1px solid #474545;
}
table.campany-detail th{
	text-align: left;
}

table.campany-detail td{
	text-align: right;
}

table.campany-detail td img{
	max-width: 191px;
	width:100%;
}



.company-toi a{
	display: block;
	width:400px;
	height:44px;
	margin:50px auto 0 auto;
	background-color: #515151;
	color:#FFF;
	text-align: center;
	font-size:22px;
	padding:10px 0 0 0;
	font-weight: bold;
	text-decoration:none;
}

.company-toi-text{
	width:400px;
	margin:20px auto 0 auto;
	color:#444444;
	text-align: center;
	font-size:13px;
	
}

/*透過*/
table.campany-detail td a:hover{
	opacity: 0.7 ;	
}

.company-toi a:hover{
	opacity: 0.9 ;	
}

/* ////////////////////////////////////////////////////////////////////////////////////////

　　　　　スクリーンサイズ 幅 480px 以上で適用される設定・上から継承したスタイルを上書き
　　　　　
//////////////////////////////////////////////////////////////////////////////////////// */

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

.catch-area-L{
	float: left;
	width:80%;
}

.catch-area-R{
	float: right;
	width:20%;
}
	
.member-image img{
	max-width: 180px;
	width:100%;
	margin:0 0 14px 0;
}

h2.diagonal{
	width:420px;
	height:45px;
	background:#000000;
	color:#FFF;
	font-size:24px;
	font-weight: bold;
	text-align:left;
	transform:skewX(-10deg);
	line-height: 42px;
	padding:0 0 0 20px;
}

span.diagonal-copy02-b{
	font-size:34px;
	font-weight: bold;
}
	
ul.gallery li.gallery-item{
	display: inline-block;
	list-style: none;
	float: left;
	max-width: 180px;
	margin:0 10px 0 0;
	height: 450px;
}


	

.member-image{
	
}

.member-image img{
	max-width: 220px;
	width:100%;
	margin:0 0 14px 0;
}
	
p.cando-text{
	display:block;
	color:#000000;
	font-size:18px;
	margin:40px 0 40px 0;
	line-height: 38px;
	text-shadow:0 0 5px #FFF;
}
	
ul.job-frame li{
	list-style: none;
	float: left;
	width:47%;
	max-width: 330px;
	margin:0 2% 20px 0;
	height: 800px;
}

ul.job-frame li.li-last{
	margin:0 0 20px 0;
}

ul.job-frame li.marg-01{
	margin:0 2% 20px 0;
}

ul.job-frame li.marg-02{
	margin:0 2% 20px 0;
}
	
}

/* ////////////////////////////////////////////////////////////////////////////////////////

　　　　　スクリーンサイズ 幅 760px 以上で適用される設定・上から継承したスタイルを上書き
　　　　　
//////////////////////////////////////////////////////////////////////////////////////// */

@media only screen and (min-width: 760px) {
	
.catch-area-L{
	float: left;
	width:60%;
}

.catch-area-R{
	float: right;
	width:40%;
}

.catch-text-block{
	font-size:20px;
	font-weight: bold;
	color:#000000;
	margin:80px 0 0 20px;
	line-height: 40px;
	
}
	
h2.reform-lead{
	color:#000000;
	font-weight: bold;
	font-size:25px;
}

.member-image{
	
}

.member-image img{
	max-width: 328px;
	width:100%;
	margin:0 0 14px 0;
}
ul.gallery li{
	display: inline-block;
	list-style: none;
	float: left;
	max-width: 328px;
	margin:0 10px 0 0;
	height: 550px;
}
	
	
/*サブタイトル*/

h2.sub_title{
	width:100%;
	font-size:50px;
	font-weight: bold;
	color: #000000;
}

h2.sub_title_2{
	width:100%;
	font-size:50px;
	font-weight: bold;
	color: #000000;
	text-align: center;
}

span.sub-title-text-s{
	font-size:40px;
}
	
ul.job-frame li{
	list-style: none;
	float: left;
	width:30%;
	max-width: 330px;
	margin:0 2% 20px 0;
	height: 800px;
}

ul.job-frame li.li-last{
	margin:0 0 20px 0;
}

ul.job-frame li.marg-01{
	margin:0 2% 20px 0;
}

ul.job-frame li.marg-02{
	margin:0 2% 20px 0;
}
	
}


/* ////////////////////////////////////////////////////////////////////////////////////////

　　　　　スクリーンサイズ 幅 1000px 以上で適用される設定・上から継承したスタイルを上書き
　　　　　
//////////////////////////////////////////////////////////////////////////////////////// */

@media only screen and (min-width: 1000px) {

/*******************************************************　
　　　　　　　　キャッチエリア

*******************************************************/
	
.reform-text-block-L{
	float: left;
	font-size:20px;
	font-weight: bold;
	font-style: italic;
    font-family: Times New Roman, "ＭＳ Ｐゴシック";
}

span.reform-text-1-b{
	font-size:36px;
}

.reform-text-block-R{
	float: left;
	font-size:18px;
	margin:15px 0 0 20px;
	font-weight: bold;
}
	
.catch-area-L{
	float: left;
	width:50%;
}

.catch-area-R{
	float: right;
	width:50%;
}

.catch-area-R img{
	max-width: 598px;
	width:100%;
}

h1.catch-copy-01{
	font-size:45px;
	font-weight: bold;
	color:#000000;
	margin:180px 0 10px 0;
}

span.catch-copy01-b{
	font-size: 52px;
}

h2.diagonal{
	width:420px;
	height:45px;
	background:#000000;
	color:#FFF;
	font-size:24px;
	font-weight: bold;
	text-align:left;
	transform:skewX(-10deg);
	line-height: 42px;
	padding:0 0 0 20px;
}



.catch-text-block{
	font-size:20px;
	font-weight: bold;
	color:#000000;
	margin:80px 0 0 20px;
	line-height: 40px;
	
}

.catch-reform{
	margin:75px 0 0 0;
	width:100%;
}

.catch-reform-L{
	display: none;
}

.catch-reform-L img{
	max-width: 28px;
	width:100%;
}

.catch-reform-R{
	float: left;
	width:100%;
}

h2.reform-lead{
	color:#000000;
	font-weight: bold;
	font-size:30px;
}

.reform-text-block{
	margin:10px 0 0 0;
}

.reform-text-block-L{
	font-size:20px;
	font-weight: bold;
	font-style: italic;
    font-family: Times New Roman, "ＭＳ Ｐゴシック";
}

span.reform-text-1-b{
	font-size:36px;
}

.reform-text-block-R{
	font-size:18px;
	margin:15px 0 0 0;
	font-weight: bold;
}

span.reform-text-2-b{
	font-size:23px;
}

/*メンバーエリア*/


ul.gallery{
	list-style: none;
}

ul.gallery li.gallery-item {
	list-style: none;
	float: left;
	max-width: 300px;
	margin:0 20px 0 0;
	height: 550px;
}



.member-image{
	
}

.member-image img{
	max-width: 328px;
	width:100%;
	margin:0 0 14px 0;
}

.member-title{
	font-size:18px;
	font-weight: bold;
	color: #000000;
	margin:0 0 8px 0;
}

.member-text{
	font-size:14px;
	color:#444444;
	line-height: 25px;
}
	



}

/* ////////////////////////////////////////////////////////////////////////////////////////

　　　　　スクリーンサイズ 幅 1200px 以上で適用される設定・上から継承したスタイルを上書き
　　　　　
//////////////////////////////////////////////////////////////////////////////////////// */

@media only screen and (min-width: 1200px) {
	
/*******************************************************　
　　　　　　　　キャッチエリア

*******************************************************/
	
.catch-reform-L{
	display: block;
	float: left;
	width:5%;
	margin:0 0 0 10px;
}

.catch-reform-R{
	float: left;
	width:87%;
}

/*メンバーエリア*/
.member{
	margin:60px 0 0 0;
	width:100%;
}



span.sub-title-text-s{
	font-size:44px;
}

.member-box{
	margin:30px 0 0 -65px;
}

ul.gallery{
	list-style: none;
}

ul.gallery li.gallery-item{
	list-style: none;
	float: left;
	max-width: 360px;
	margin:0 30px 0 30px;
	height: 550px;
}


.member-image{
	
}

.member-image img{
	max-width: 328px;
	width:100%;
	margin:0 0 14px 0;
}

.member-title{
	font-size:18px;
	font-weight: bold;
	color: #000000;
	margin:0 0 8px 0;
}

.member-text{
	font-size:14px;
	color:#444444;
	line-height: 25px;
}

ul.job-frame li{
	list-style: none;
	float: left;
	max-width: 330px;
	margin:0 90px 20px 0;
	height: 700px;
}

ul.job-frame li.li-last{
	margin:0 0 20px 0;
}

ul.job-frame li.marg-01{
	margin:25px 90px 20px 0;
}

ul.job-frame li.marg-02{
	margin:50px 0 0 0;
}

.stance-L{
	float:left;
	max-width:695px;
	margin:0 50px 0 5px;
	color: #000000;
    font-size: 18px;
	line-height: 38px;
}
	
.stance-R{
	float:left;
}
	
.stance-sign{
	font-size:15px;
	text-align: right;
	width:100%;
	margin:10px 0 0 0;
}
	
}