@charset "utf-8";

/* 株式会社 スリーエス・サンキュウ | 事業概要ページ　＞　求人・採用情報【お問い合わせ】ページ　CSS
----------------------------------------------------------------------------------------------------*/


/* 画像と文字【中央揃え】箇所*/

.img_area00 {
    position:  relative;        /* 子要素の起点を指定 */
    background-color:  #1c3785;    /* 背景色指定 */
    height: auto;              /* 高さ指定 */
	margin:0;
	padding:0;

}
 
 
/* 374px以下【320px対象】 */
.caption_area00 {
    position:  relative;        /* ※敢えてrelative指定にてスマホ環境では画像下部の配置 */
    background-color:  #fff;    /* 背景色指定 */
	
	/* 透明度設定指定 */
	/*filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;*/
		
    padding: 1%;              /* 余白指定 */
    width:  95%;              /* 幅指定 */
    height: auto;               /* 高さ指定 */
    text-align:  center;        /* 文字を中央揃えに */
    top:  0;                    /* 上からの位置指定 */
    bottom:  0;                 /* 下からの位置指定 */
    left:  0;                   /* 左からの位置指定 */
    right:  0;                  /* 右からの位置指定 */
    margin:  auto;              /* 位置調整と組み合わせて上下中央に */
	
	border-radius: 10px;
}

.caption_area00 > h2 {

	color:  #0d761c;               /* 文字色指定 */
    font-size: 14px;            /* フォントサイズ指定 */

 /* 文字の影
	text-shadow    : 
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff; */

}

/* iPhone */
@media only screen and (min-width:375px) {	
	.caption_area00 > h2 {
    font-size: 15px;
	}
}

@media only screen and (min-width:600px) {	
	.caption_area00 > h2 {
    font-size: 17px;
	}
}	

@media only screen and (min-width:768px) {
	
	.img_area00 {
    background-color:  #fff;    /* 背景色指定 */
	padding:0;
	margin:0;
	}
	
	.caption_area00 {
    position:  absolute;        /* 要素の配置方法を指定 */
    background-color:  transparent;    /* 背景色指定 */
	
    padding: 0% 1% 0 1%;              /* 余白指定 */
    width:  60%;              /* 幅指定 */
    height: 140px;               /* 高さ指定 */
    text-align:  center;        /* 文字を中央揃えに */
    top:  0;                    /* 上からの位置指定 */
    bottom:  0;                 /* 下からの位置指定 */
    left:  0;                   /* 左からの位置指定 */
    right:  0;                  /* 右からの位置指定 */
    margin:  17% auto 0;              /* 位置調整と組み合わせて上下中央に */
	}
	
	
	.caption_area00 > h2 {
    font-size: 14px;
    font-size: 16px;

	line-height:1.5;
	
	/* 文字の影 */
	text-shadow    : 
       1px  1px 0px #ffffff,
      -1px  1px 0px #ffffff,
       1px -1px 0px #ffffff,
      -1px -1px 0px #ffffff,
       1px  0px 0px #ffffff,
       0px  1px 0px #ffffff,
      -1px  0px 0px #ffffff,
       0px -1px 0px #ffffff;
	}
}


@media only screen and (min-width:1024px) {
	.caption_area00 > h2 {
    font-size: 18px;
    font-size: 22px;

	line-height:1.5;
	
	/* 文字の影 */
	text-shadow    : 
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff;
	}
}


/* Mac Safari想定 */
@media only screen and (min-width:1230px) {
	.caption_area00 > h2 {
    font-size: 22px;
	line-height:1.5;
	}
}

@media only screen and (min-width:1280px) {
	
	.caption_area00 > h2 {
    font-size: 22px;
	line-height:1.5;
	}
}


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

	.caption_area00 > h2 {
    font-size: 26px;
	line-height:1.5;
	}
}

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

	.caption_area00 > h2 {
    font-size: 33px;
	line-height:1.5;
	}
}

@media only screen and (min-width:2560px) {
	
	.caption_area00 > h2 {
    font-size: 46px;
	line-height:1.5;
	}
}




/* 画像箇所*/
.img_area {
    position:  relative;        /* 子要素の起点を指定 */
    height:  auto;             /* 高さ指定 */
    width:  100%;              /* 幅指定 */
	margin: 0;
	padding:0;
}
 
/* 画像内キャプション箇所*/
.caption_area {
    position:  absolute;                    /* 要素の配置方法を指定 */
    width:  100%;                           /* 幅指定 */
   	padding:0 0 2% 1%;                     /* 余白指定 */
    box-sizing:  border-box;                /* 崩れ防止 */
    top:  0;                             /* 上からの位置を指定 */
	height:auto;
	margin:0 auto 0;
	clear:both;	
}

.caption_area:after{
	display: table;
	content: "";
	clear: both;
}



/*※h2を画像上に内層する場合【初期時は不使用】*/

/*.caption_area h2{
	width:100%;
	margin:0 0 1% 0;
	padding:0.5% 1% 0% 3%;
	background:#0054a7 url(../img/business/logistics/blueThreeColor.png) no-repeat right center;
	background-size:  contain;
	clear:both;
	border-left: 15px solid #006fbb;
}


@media only screen and (min-width:768px) {
	.caption_area h2{
	width:65%;
	padding:0.5% 1% 0% 3%;
	}
}

@media only screen and (min-width:2560px) {
	.caption_area h2{
	width:65%;
	padding:0.7% 1% 0.5% 3%;
	}
}*/



/* 画像箇所エリア320px以下height指定*/
.img_area {
   height:  380px;/*  高さ指定 */
   background:#e3f7e8;
}

/* caption_area h2 */
.caption_area h2{
	font-size: 18px!important;
	color:#0d761c!important;
	margin:25% 1% 1% 1%; 
	
	/* letter-spacing : 4px;文字間 */
	text-shadow    : 
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff; /* 文字の影 */	
}

.caption_area h3{
	font-size: 16px!important;
	line-height: 1.5;
	margin:15% 1% 1% 1%; 	
　  letter-spacing : 0px;/* 文字間 */	
}

/* iPhone */
@media only screen and (min-width:375px) {
	
	.img_area {
    height:  400px;/*  高さ指定 */
	}
	
	.caption_area h2{
	font-size: 21px!important;
	margin:25% 1% 1% 1%; 
	}
	
	.caption_area h3{
	font-size: 16px!important;
	margin:15% 1% 1% 1%; 	
	}
}


/* iPhone　Plus */
@media only screen and (min-width:414px) {
	.img_area {
    height:  430px;/*  高さ指定 */
	}
	
	.caption_area h2{
	font-size: 23px!important;
	margin:25% 1% 1% 1%; 
	}
	
	.caption_area h3{
	font-size: 16px!important;
	margin:15% 1% 1% 1%;
	line-height: 1.8;
	}
}


@media only screen and (min-width:425px) {
	.img_area {
    height:  440px;/*  高さ指定 */
	}
	
	.caption_area h2{
	font-size: 24px!important;
	margin:25% 1% 1% 1%; 
	}
	
	.caption_area h3{
	font-size: 17px!important;
	font-size: 16px!important;

	margin:15% 1% 1% 1%;
	line-height: 1.8;
	}
}

@media only screen and (min-width:600px) {
	.img_area {
    height:  500px;/*  高さ指定 */
	}
	
	.caption_area h2{
	font-size: 34px!important;
	margin:25% 1% 1% 1%; 
	}
	
	.caption_area h3{
	font-size: 18px!important;
	margin:15% 1% 1% 1%;
	line-height: 1.8;
	}	
}

@media only screen and (min-width:768px) {
	.img_area {
    height:  270px;/*  高さ指定 */
	margin:-2% 0 0 0;
	}
	
	.caption_area h2{
	font-size: 38px!important;
	margin:0% 1% 1% 1%; 
	}
	
	.caption_area h3{
	font-size: 21px!important;
	margin:0% 1% 1% 1%;
	line-height: 1.8;
	
	text-shadow    : 
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff; /* 文字の影 */	
	}	
}


@media only screen and (min-width:1024px) {
	
	.img_area {
    height:  300px;/*  高さ指定 */
	margin:-1.5% 0 0 0;
	}
	
	.caption_area h2{
	font-size: 40px!important;
	margin:0% 1% 1% 1%; 
	}
	
	.caption_area h3{
	font-size: 22px!important;
	margin:0% 1% 1% 1%;
	line-height: 1.8;
	}	

}


/* Mac Safari想定 */
@media only screen and (min-width:1230px) {
	
	.img_area {
    height:  330px;/*  高さ指定 */
	}
	
	.caption_area h2{
	font-size: 45px!important;
	margin:0% 1% 1% 1%; 
	}
	
	.caption_area h3{
	font-size: 25px!important;
	margin:0% 1% 1% 1%;
	line-height: 1.8;
	}
}

@media only screen and (min-width:1280px) {
	
	.img_area {
    height:  340px;/*  高さ指定 */
	margin:-1.3% 0 0 0;

	}
	
	.caption_area h2{
	font-size: 45px!important;
	margin:0% 1% 1% 1%; 
	}
	
	.caption_area h3{
	font-size: 25px!important;
	margin:1% 1% 1% 1%;
	line-height: 2.0;
	}
}


@media only screen and (min-width:1440px) {
	.img_area {
    height:  350px;/*  高さ指定 */
	margin:-1.2% 0 0 0;
	}
	
	.caption_area h2{
	font-size: 45px!important;
	margin:0% 1% 1% 1%; 
	}
	
	.caption_area h3{
	font-size: 25px!important;
	margin:1% 1% 1% 1%;
	line-height: 2.0;
	}
}

@media only screen and (min-width:1920px) {
	.img_area {
    height:  550px;/*  高さ指定 */
	margin:-0.8% 0 0 0;

	}
	
	.caption_area h2{
	font-size: 65px!important;
	margin:0% 1% 1% 1%; 
	}
	
	.caption_area h3{
	font-size: 35px!important;
	margin:1% 1% 1% 1%;
	line-height: 2.0;
	}
}

@media only screen and (min-width:2560px) {
	
	.img_area {
    height:  700px;/*  高さ指定 */
	}
	
	.caption_area h2{
	font-size: 85px!important;
	margin:0% 1% 1% 1%; 
	}
	
	.caption_area h3{
	font-size: 50px!important;
	margin:1% 1% 1% 1%;
	line-height: 2.0;
	}
}








.recruitVideoWrap {
	width:100%;
	height:auto;
}

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

	.recruitVideoWrap {
	width:70%;
	margin:0 auto 0;	
	}
}



/* 【768px以下のスマホ環境の場合：YouTube動画　*/

.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}


/*各interview箇所*/
.interview{
	width:100%;
	height:auto;
	margin:0 0 0 0;
	padding:0 0 2% 0;
	clear:both;	
}


.interview p{
	margin:1% 1% 1% 1%!important;
	font-size: 15px!important;
	line-height: 1.5!important;
	text-align: justify;

}

/* iPhone */
@media only screen and (min-width:375px) {
	
	.interview p{
	margin:1% 1% 1% 1%!important;
	font-size: 16px!important;
	}
	
}

@media only screen and (min-width:425px) {
	
	.interview p{
	margin:1% 1% 1% 1%!important;
	font-size: 18px!important;
	}
	
}

@media only screen and (min-width:600px) {
	
	.interview p{
	margin:1% 1% 1% 1%!important;
	font-size: 18px!important;
	}
	
}

@media only screen and (min-width:768px) {
	
	.interview{
	padding:0 0 15% 0;
	}
	
	.interview p{
	margin:1% 1% 1% 1%!important;
	font-size: 18px!important;
	font-size: 17px!important;
	}

}

@media only screen and (min-width:1024px) {
	.interview{
	padding:0 0 20% 0;
	}
	
	.interview p{
	margin:1% 1% 1% 1%!important;
	font-size: 16px!important;
	}
}

/* Mac Safari想定 */
@media only screen and (min-width:1230px) {
	
	.interview{
	padding:0 0 20% 0;
	}
	
	.interview p{
	margin:1% 1% 1% 1%!important;
	font-size: 18px!important;
	}

}


@media only screen and (min-width:1280px) {
	
	.interview p{
	margin:1% 1% 1% 1%!important;
	font-size: 18px!important;

	}

}

@media only screen and (min-width:1440px) {
	
	.interview p{
	margin:1% 1% 1% 1%!important;
	font-size: 19px!important;
	line-height: 1.8!important;
	}
}

@media only screen and (min-width:1920px) {
	
	.interview p{
	margin:1% 2% 1% 1%!important;
	font-size: 22px!important;
	line-height: 1.8!important;
	}

}


@media only screen and (min-width:2560px) {
	
	.interview p{
	margin:1% 2% 1% 1%!important;
	font-size: 28px!important;
	line-height: 1.8!important;
	}

}
.interview:after{
	display: table;
	content: "";
	clear: both;
}


/*各項目箇所*/
.service{
	width:100%;
	height:auto;
	margin:0 0 0 0;
	padding:0 0 2% 0;
	clear:both;	
}

@media only screen and (min-width:1024px) {
	.service{
	padding:0 0 2% 0;
	}
}

.service:after{
	display: table;
	content: "";
	clear: both;
}

/* 各ブロック背景色用*/
.serviceBack{
	background:#efefef;
	}
	
.serviceBack02{
	background:#ebf7ff;
	}

/* 各ブルーバー見出し箇所 */
.img_areaBlueBar {
    position:  relative;        /* 子要素の起点を指定 */
    height:  auto;             /* 高さ指定 */
    width:  100%;              /* 幅指定 */
    margin:0 0 2% 0;
	padding:0;
	clear:both;

}
 
/*静脈物流　箇所*/
.caption_areaBlueBar {
    position:  absolute;                    /* 要素の配置方法を指定 */
    top:  0;                             /* 上からの位置を指定 */

    width:  100%;/* 幅指定 */  
	height:auto;
	margin:0;
                        
	padding:0%;
	clear:both;
	box-sizing:  border-box;                /* 崩れ防止 */
}


.caption_areaBlueBar h2{
	padding:0.3% 0 0 4%;
	margin:0!important;
}
	

/* iPhone */
@media only screen and (min-width:375px) {

	.caption_areaBlueBar h2{
	padding:1% 0 0 4%;
	margin:0!important;
	}
}


/* iPhone　Plus */
@media only screen and (min-width:414px) {
	
	.caption_areaBlueBar h2{
	padding:0.1% 0 0 5%;
	}
}

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

	.caption_areaBlueBar h2{
	padding:0.5% 0 0 5%;
	}
	
	
}

/* 426pxから、767pxの間の間隔調整 */
@media only screen and (min-width:600px) {
	
	.img_areaBlueBar{
	width:90%;
	}

	.caption_areaBlueBar h2{
	padding:1% 0 0 4%;
	}	
}


@media only screen and (min-width:768px) {	
	
	.img_areaBlueBar{
	width:80%;
	}
	
	.caption_areaBlueBar h2{
	padding:0.8% 0 0 4%;
	}	
}

@media only screen and (min-width:1024px) {
	
	.img_areaBlueBar{
	width:70%;
	}
	.caption_areaBlueBar h2{
	padding:1.2% 0 0 4%;
	}	
	
}

/* Mac Safari想定 */
@media only screen and (min-width:1230px) {
	
	.caption_areaBlueBar h2{
	padding:1.5% 0 0 4%;
	}	
}
	
@media only screen and (min-width:1280px) {
	
	
}

@media only screen and (min-width:1440px) {
	
	.img_areaBlueBar{
	width:60%;
	}
	.caption_areaBlueBar h2{
	padding:1.3% 0 0 4%;
	font-size:38px!important;
	}	
		
}

@media only screen and (min-width:1920px) {
	
	.caption_areaBlueBar h2{
	padding:1.5% 0 0 4%;
	font-size:42px!important;
	}	
}


@media only screen and (min-width:2560px) {
	
	.img_areaBlueBar{
	width:80%;
	}
	
	.caption_areaBlueBar h2{
	padding:1.7% 0 0 4%;
	font-size:70px!important;
	}	
	
}

.img_areaBlueBar,
.caption_areaBlueBar:after{
	display: table;
	content: "";
	clear: both;
}



/* 事業概要【宅配配送】ページ内の【主な取扱品目　箇所】
----------------------------------------------------------------------------------------------------*/
.responTable01,
.responTable02 {
  border-collapse: collapse;
  width: 100%;
}


.responTable01 p,
.responTable02 p{
	font-size:18px; 
}

@media only screen and (min-width: 768px) {
	.responTable01 p,
	.responTable02 p {
	font-size:19px; 
	}
}

@media only screen and (min-width: 1024px) {
	.responTable01 p,
	.responTable02 p {
	font-size:21px; 
	font-size:19px; 

	}
}

/* Mac Safari想定 */
@media only screen and (min-width: 1230px) {
	.responTable01 p,
	.responTable02 p {
	font-size:22px; 
	font-size:19px; 
	}
}

@media only screen and (min-width: 1280px) {
	.responTable01 p,
	.responTable02 p {
	font-size:22px;
	font-size:19px; 
	}
}

@media only screen and (min-width: 1440px) {
	.responTable01 p,
	.responTable02 p {
	font-size:23px; 
	font-size:20px; 

	}
}

@media only screen and (min-width: 1920px) {
	.responTable01 p,
	.responTable02 p {
	font-size:25px; 
	font-size:22px; 

	}
}

@media only screen and (min-width: 2560px) {
	.responTable01 p,
	.responTable02 p {
	font-size:35px; 
	font-size:33px; 
	}
}
 
.responTable01 th,
.responTable01 td,
.responTable02 th,
.responTable02 td  {
  border: 1px solid #cccdce;  
  padding: 8px;
}
 
.responTable01 th {
  background: #f6f6f6;
  text-align: left;
  width: 120px;
  width: 20%;
}

.responTable02 th {
  background: #f6f6f6;
  text-align: left;
  width: 50%;
}

.responTable01 td,
.responTable02 td {
  background: #fff;
  text-align: left;  
}
 
@media only screen and (max-width: 800px) {
  .responTable01 tr,
  .responTable01 th,
  .responTable01 td,
  .responTable02 tr,
  .responTable02 th,
  .responTable02 td {
    display: block;
    width: auto;
    width: 100%;

  }
  
  .responTable01 tr:first-child,
  .responTable02 tr:first-child {
    border-top: 1px solid #cccdce;  
  }
  
  .responTable01 th,
  .responTable01 td,
  .responTable02 th,
  .responTable02 td {
    border-top: none;
  }
}

/*　【勤務地/応募方法等詳細はこちらから照会】文言で使用　*/
.introduction{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	width:95%;
	padding:3% 5% !important;
	background:#f9d59d;
}

@media only screen and (min-width: 601px) {
	.introduction{
	width:80%;
	padding:3% 5% !important;
	background:#f9d59d;
	}
}


.introduction h2 a{
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	width:97%;
	margin:0 auto 1%;
	padding:2% 2% 2% 2%;
	display:block;

	background:#f6f6f6;	
	
	text-align:center;
	color:#024080!important;
}

.introduction p{
	padding:0;
}

@media only screen and (min-width: 768px) {
	.introduction p{
	padding:0 1.5% 0 1.5%;
	}
}

/*【高収入GETのチャンス！・働く曜日や時間に制限のある方！・家の近所で職を探している方！当社の営業所一覧はこちら】で使用*/
.serviceOffice a:link,
.serviceOffice a:visited {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	width:95%;
	padding:3% 1% !important;
	background:#e9eefc!important;
	margin:0 auto 0;
	display:block;
}

.serviceOffice a:hover{
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  opacity:0.80;
  
  -webkit-transition: 1.5s;
  -moz-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 1.5s;
}

.serviceOffice h2 {
	color:#ba0f0f!important;
	
	text-shadow    : 
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff; /* 文字の影 */	
}


.recruitMail a:link,
.recruitMail a:visited
 {
	width:90%;	
    border-radius: 5px;
	margin:5% auto;
	padding:3% 0;
	background:#2866a7;
	display:block;
	text-align:center;
	color:#fff;
	font-weight:bold;
	font-size:22px;
}

.recruitMail a:hover{
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  opacity:0.80;
  
  -webkit-transition: 1.5s;
  -moz-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 1.5s;
}

/*【お問い合わせメール】で使用*/
@media only screen and (min-width: 375px) {
	.recruitMail a:link,
	.recruitMail a:visited {
	font-size:23px;
	}
}

/* iPhone plus*/
@media only screen and (min-width: 414px) {
	.recruitMail a:link,
	.recruitMail a:visited {
	font-size:25px;
	}
}


@media only screen and (min-width: 425px) {
	.recruitMail a:link,
	.recruitMail a:visited {
	font-size:28px;
	}
}

@media only screen and (min-width: 600px) {
	.recruitMail a:link,
	.recruitMail a:visited {
	font-size:30px;
	}
}

@media only screen and (min-width: 768px) {
	.recruitMail a:link,
	.recruitMail a:visited {
	font-size:32px;
	}
	
	.serviceOffice a:link {
	width:65%;
	padding:3% 1% !important;
	}
}


@media only screen and (min-width: 1024px) {
	.recruitMail a:link,
	.recruitMail a:visited {
	width:40%;	
	font-size:35px;
	padding:2% 0;

	}
}

/* Mac Safari想定 */
@media only screen and (min-width:1230px) {
		
	.recruitMail a:link,
	.recruitMail a:visited 
	{
	font-size:37px;
	}
}

@media only screen and (min-width:1280px) {
	.recruitMail a:link,
	.recruitMail a:visited {
	font-size:37px;
	}
}


@media only screen and (min-width: 1440px) {
	.recruitMail a:link,
	.recruitMail a:visited {
	font-size:40px;
	}
}

@media only screen and (min-width:1920px) {
	.recruitMail a:link,
	.recruitMail a:visited {
	font-size:50px;
	}
	
}

@media only screen and (min-width:2560px) {
	.recruitMail a:link,
	.recruitMail a:visited {
	font-size:70px;
	}
}

.recruitMail i {
	margin:0 3% 0 0;
}