@charset "UTF-8";


/* ++++++++++++++　　　index.css　　　++++++++++++++++++*/


/*=============== ページ内共通指定 ===============*/

/***ボタン設定****/
.btn-base1{
    clear: both;
    display: block;
    width: 90%;
    max-width: 370px;
    height: 54px;
    border-radius: 40px;
    background-color: #fff;
    margin: 0 auto 0 auto;
    /*box-shadow: 2px 2px #ccc;*/
    transition: .4s;
}

.btn-base1:hover{
    /*box-shadow:none;*/
    /*transform: translate3d(2px, 2px, 0);*/
    transform: scale(1.05);
}


.btn-base1 img{
    width: 320px;
    max-width: 320px;
    padding-left: 25px;
}
/*↓widthが　400px以下の場合*/
@media (max-width: 400px){
    
    .btn-base1 img{
    width: 75%;
    padding-left: 10%;
    padding-top: 7px;
    }
}








/***　スライダー部分枠　ストライプバック　****/
.slider-waku{
    padding-bottom: 40px;
    background: repeating-linear-gradient(135deg, #f5f5f5, #f5f5f5 3px, #fff 3px, #fff 8px);
    
}



/*サービスピックアップ一覧*/
/*人材働き方　ピックアップ一覧*/
.pickup__01,
.pickup__02{
     width: 100%;
     max-width: 1000px;
    margin: 20px auto 20px auto;

}


/***　slickスライダー部分　****/


ul.type1 li{
    border: solid 2px #23b5ae;
    overflow: hidden;
}

ul.type2 li{
    border: solid 2px #f7931e;
    overflow: hidden;
}




.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
    transition: transform .3s ease;
}

.slider img:hover{
    transform: scale(1.1)
}



/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}
















/*******************************************************
　キャッチエリア
*******************************************************/
/*1200px以上の背景画像指定*/
.cach-Area{
    height: 535px;
    width: 100%;
    background: url("../images/sf000_cach_back.png") no-repeat ;
    background-size: 2700px;
    background-position: center;

}


/***** 1201px未満 *****/
@media (max-width: 1200px){
    .cach-Area{
    height: auto;
    width: 100%;
    background: none;
    background-color: #fcee21;
    }
}


/*=============== 
キャッチ画像指定
===============*/

/*キャッチ画像 600px以上指定*/


.cach{
	max-width:1200px;/* 　適宜　max-width指定 */
	margin-left:auto;/* 　適宜　マージン指定 */
	margin-right:auto;	
	position:relative;/*　中に入れ子にするinner要素の指定のためpositionを指定　*/
	width:100%;/*　横幅の可変を可能にするため、％指定する　*/
	height:auto;/*　auto指定　実際の高さは、:beforeのpadding-topで指定する　*/
	background:url(../images/sf000_cach.jpg) no-repeat;/*　バックグラウンドに指定する画像を配置　*/
	background-size:contain;/*　バックグラウンドに指定する画像を、縦横比を変えないで、伸縮させる　*/	
}


/* before指定 */
/* 横：高さの比率を paddingで指定し、高さを指定する */
.cach:before{
	content:"";
	display:block;
	padding-top:44.58%;/*H535px/W1200px　*/
	
}

/*キャッチ画像 600px未満指定*/
@media (max-width: 599px){
    .cach{
	max-width:600px;/* 　適宜　max-width指定 */
	margin-left:auto;/* 　適宜　マージン指定 */
	margin-right:auto;	
	position:relative;/*　中に入れ子にするinner要素の指定のためpositionを指定　*/
	width:100%;/*　横幅の可変を可能にするため、％指定する　*/
	height:auto;/*　auto指定　実際の高さは、:beforeのpadding-topで指定する　*/
	background:url(../images/sf000_cach_s.jpg) no-repeat;/*　バックグラウンドに指定する画像を配置　*/
	background-size:contain;/*　バックグラウンドに指定する画像を、縦横比を変えないで、伸縮させる　*/	
    }

    .cach:before{
	content:"";
	display:block;
	padding-top:80.59%;/*H515px/W639px　*/
    }
    
    
}















/*******************************************************
　最新記事エリア
*******************************************************/
.recentArticles-Area{
    background-color: #fcee21;
    padding-bottom: 40px;
    border-bottom: solid 2px #fff;
}

/*見出し指定*/
.recentArticles-title{
    width: 297px;
    height: 84px;
    background: url("../images/sf000_01title.png") no-repeat;
    background-size: contain;
    margin: 0 auto 0 auto;
}







/*最新記事リスト*/
.company-list-ul__00{
    width: 100%;
    max-width: 1000px;
    margin: 10px auto 25px auto;
    display: flex;
    flex-flow:row wrap;
    justify-content: center;
}





.c-list{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #fff;
    border: solid 1px #ccc;
    border-radius: 6px;
    margin: 10px;
}

.c-list a{
    text-decoration: none;
}

.img-wrapper{
    width: 300px;
    height: 168px;
    border-radius: 6px 6px 0 0; 
    overflow: hidden;
}

.c-list img{
    width: 300px;
    border-radius: 6px 6px 0 0;
    transition: transform .3s ease;
}

.c-list img:hover{
    transform: scale(1.1)
}



.c-list-dl{
    padding: 10px 15px 10px 15px;
    color: #000;
}

.c-list-dl:hover{
    color: #555;
}





.c-list-dt{
    font-size: 16px;
    font-weight: bold;
    line-height: 120%; 
    margin-bottom: 5px;
}

.c-list-dd1{
    font-size: 14px;
    line-height: 140%; 
    margin-bottom: 5px;
}

.c-list-dd2{
    font-size: 12px;
    line-height: 100%; 
}



/*NEWタグ*/
.new-tag{
    position: absolute;
    width: 77px;
    height: 33px;
    top: 7px;
    left: -3px;
}

.new-tag img{
    width: 77px;
    border-radius:0;
}






/*******************************************************
　サービス紹介動画エリア
*******************************************************/
.service-Area{
    clear: both;
    position: relative;
    border-bottom: solid 2px #fff;
}


/*===============
  見出し指定
===============*/
/****見出し指定　800px以上　　****/
.service-title-waku{
    position: relative;
    width: 100%;
    background-color: #23b5ae;
    box-shadow: 0px 1px 3px #777;
}


.service-title-waku-in{
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 0 auto;
    padding-top: 14px;
    padding-bottom: 20px;
}


.photo11{
    position: absolute;
    bottom: 0;
    left: -30px;
    width: 329px;
}


/****見出し指定*　 600px〜799px　　****/
/*　photo11　画像サイズ調整  600px〜800px*/
@media (max-width: 800px){
    .photo11{
    left: -10px;
    width: 30%;
    }
}

/****見出し指定　600px未満　　****/
@media (max-width: 600px){
    .service-title-waku-in{
    padding-bottom: 0px;
    }
    
    
    .photo11{
    position: relative;
    display: block;
    width: 60%;
    max-width: 320px;
    margin: 0 auto 0 auto;
    }
}











.service-title{
    width: 297px;
    height: 76px;
    background: url("../images/sf000_02title.png") no-repeat;
    background-size: contain;
    margin: 0 auto 0 auto;
}



/*下向き三角 */
/* エメラルドグリーン タイプ1 */
.arw-egreen{
    position: relative;
    z-index: 10;
	width: 0;
	height: 0;
	border: 30px solid transparent;
	border-top-color: #23b5ae;
	margin-left:auto;
	margin-right:auto;
}







/*サービス紹介フッター部分*/
.service-foot1{
    width: 100%;
    background-color: #77bab6;
    height: 100px;
}


.service-foot1-in{
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 0 auto;
    height: 100px;
}


/*===============
  フッターイラスト＆photo指定
===============*/
/* フッターイラスト＆photo 800px以上*/
.illst1{
    position: absolute;
    bottom: 0;
    left:-35px;
    width: 541px;
}

.photo12{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 302px;
}


/****フッターイラスト＆photo　 800px未満　　****/
@media (max-width: 800px){
    .illst1{
    left: 0px;
    width: 60%;
    max-width: 400px;
    }
    .photo12{
    width: 60%;
    max-width: 250px;
    }
}




.service-foot2{
    width: 100%;
    background-color: #23b5ae;
    padding: 37px 0 37px 0;
}










/*******************************************************
　人材採用・働き方取り組み紹介動画エリア
*******************************************************/
.workstyle-Area{
    clear: both;
    border-bottom: solid 2px #fff;
   
}

/*===============
  見出し指定
===============*/
/****見出し指定　800px以上　　****/
.workstyle-title-waku{
    position: relative;
    width: 100%;
    background-color: #f29600;
    box-shadow: 0px 1px 3px #777;
}

.workstyle-title-waku-in{
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 0 auto;
    padding-top: 12px;
    padding-bottom: 16px;
}




.photo21{
    position: absolute;
    bottom: 0;
    left: 0px;
    width: 302px;
}


/****見出し指定*　 600px〜799px　　****/
/*　photo21　画像サイズ調整  600px〜799px*/
@media (max-width: 800px){
    .photo21{
    left: -8px;
    width: 30%;
    }
}

/****見出し指定　600px未満　　****/
@media (max-width: 600px){
    .workstyle-title-waku-in{
    padding-bottom: 0px;
    }
    
    
    .photo21{
    position: relative;
    display: block;
    width: 60%;
    max-width: 302px;
        padding-top: 5px;
    margin: 0 auto 0 auto;
    }
}










.workstyle-title{
    width: 297px;
    height: 90px;
    background: url("../images/sf000_03title.png") no-repeat;
    background-size: contain;
    margin: 0 auto 0 auto;
}


/*下向き三角 */
/* オレンジ タイプ */
.arw-org{
    position: relative;
    z-index: 10;
	width: 0;
	height: 0;
	border: 30px solid transparent;
	border-top-color: #f29600;
	margin-left:auto;
	margin-right:auto;
}















.workstyle-foot1{
    width: 100%;
    background-color: #f3c17c;
    height: 100px;
    
}


.workstyle-foot1-in{
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 0 auto;
    height: 100px;
}


/*===============
  フッターイラスト＆photo指定
===============*/
/* フッターイラスト＆photo 800px以上*/
.illst2{
    position: absolute;
    bottom: 0;
    left:-35px;
    width: 541px;
}


.photo22{
    position: absolute;
    bottom: 0;
    right: 0px;
    width: 291px;
}

/****フッターイラスト＆photo　 800px未満　　****/
@media (max-width: 800px){
    .illst2{
    left: 0px;
    width: 60%;
    max-width: 400px;
    }
    .photo22{
    width: 60%;
    max-width: 250px;
    }
}






.workstyle-foot2{
    width: 100%;
    background-color: #f29600;
    padding: 37px 0 37px 0;
}









/*******************************************************
　シャイニーフィルムとはエリア
*******************************************************/
.aboutSF-Area{
    clear: both;
    margin-bottom: 80px;
}

.aboutSF{
    width: 100%;
    max-width: 910px;
    margin: 30px auto 30px auto;
}

.aboutSF-L{
    float: left;
    width: 35%;
    max-width: 350px;
    margin-left: 3%;
}


.aboutSF-L img{
    width: 90%;
    max-width: 263px;
}


.aboutSF-R{
    float: right;
    width: 60.9%;
    max-width: 555px;
}


.aboutSF-R h3{
    font-size: 20px;
    font-weight: bold;
    line-height: 100%;
    margin-bottom: 10px;
}


.aboutSF-text{
    font-size: 16px;
    line-height: 180%;
    margin-bottom: 20px;
}