@charset "utf-8";

/* 株式会社 スリーエス・サンキュウ | 会社紹介動画ページ　CSS
----------------------------------------------------------------------------------------------------*/

/* 画像箇所*/
.img_area {
    position:  relative;        /* 子要素の起点を指定 */
    height:  auto;             /* 高さ指定 */
    width:  100%;              /* 幅指定 */
}
 
/* 画像内キャプション箇所*/
.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;
}


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


/*※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%;
	}
}*/




/* caption_area h3 */
.caption_area h3{
	font-size: 12px!important;
	line-height: 1.8;
	margin:2.5% 1% 1% 1%; 
	
	  letter-spacing : 0px;/* 文字間 */
		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) {
	
	.img_area {
    height:  400px;/* 高さ指定 */
	}
	.caption_area h3{
	font-size: 14px!important;
	}
}


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

}


@media only screen and (min-width:425px) {
.caption_area h3{
	font-size: 15px!important;
	}
}

@media only screen and (min-width:600px) {
	
	.img_area {
    height:  500px;/* 高さ指定 */
	}
	.caption_area h3{
	font-size: 16px!important;
	line-height: 2;
	}
	
}

@media only screen and (min-width:768px) {
	.img_area {
    height:  600px;/* 高さ指定 */
	}
	
	.caption_area h3{
	font-size: 20px!important;
	margin:5% 5% 0 5%;
	}	
}


@media only screen and (min-width:1024px) {
	
	.img_area {
    height:  650px;/* 高さ指定 */
	}
	
	.caption_area h3{
	font-size: 25px!important;
	margin:1% 3% 0 1%;
	}	
}


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

@media only screen and (min-width:1280px) {
	
	.img_area {
    height:  700px;/* 高さ指定 */
	}
	
	.caption_area h3{
	font-size: 27px!important;
	margin:1.5% 3% 0 1%;
	}	
}


@media only screen and (min-width:1440px) {
	.img_area {
    height:  auto;/* 高さ指定 */
	}
	
	.caption_area h3{
	font-size: 29px!important;
	margin:1.5% 3% 0 2%;
	}	
}

@media only screen and (min-width:1920px) {
	.img_area {
    height:  auto;/* 高さ指定 */
	}
	
	.caption_area h3{
   letter-spacing : 3px;/* 文字間 */
	font-size: 35px!important;
	margin:2% 3% 0 2%;
	}	
}

@media only screen and (min-width:2560px) {
	
	.img_area {
    height:  auto;/* 高さ指定 */
	}
	
	.caption_area h3{
   letter-spacing : 3px;/* 文字間 */
	font-size: 45px!important;
	margin:2% 3% 0 2%;
	}	
}



/* 各ブルーバー見出し箇所 */
.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;
}



/* ここからvideo箇所
----------------------------------------------------------------------------------------------------*/

.videoWrap{
	height:auto;
	background:url(../img/group/earth.png) no-repeat -80% -50%;
}

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


.videoBar{
	padding:1.5% 0 1.5% 1%;
}

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


.videoBar h2{
	padding:0 0 0 3%;
	border-left: 10px solid #0054a6;		
}


.videoWrap i{
	margin:0 1% 0 1%;			
}





/* ここから紹介動画のYouTube箇所
----------------------------------------------------------------------------------------------------*/
.introVideoWrap {
	width:100%;
	height:auto;
}

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

	.introVideoWrap {
	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%;
}

/* ここから紹介動画のYouTube用小見出しタイトル箇所
----------------------------------------------------------------------------------------------------*/

.youubeTitle{
	padding:0.8% 0 0.8% 0%;
	margin:0 auto 0;
	
	border-width: 3px;
  	border-color: rgb(0, 84, 167);
  	border-style: solid;
  	border-radius: 15px;
    /*background-color: rgb(252, 225, 167);*/
  	width: 80%;
  	height: auto;
}

@media only screen and (min-width:768px) {
	.youubeTitle{
  	width: 500px;
	}
}

.youubeTitle h3{
	font-size:20px;
}

@media only screen and (min-width:768px) {
	.youubeTitle h3{
	font-size:25px;
	}
}

/*【レスポンシブ対応】*/
div.vid_contents {
width: 100%;/*背景色を横幅いっぱいに広げる*/
text-align: center;
margin: auto;
/*padding: 4% 4% 4% 4%;ここで動画の周りの余白を調整*/
/*background: #e6e6e6;余白の背景色【デフォルト設定】*/
background: #fff;/*余白の背景色*/

}
video.vid_main {
width: 100%;
max-width: 1000px;/*PC版での最大幅*/
}

@media only screen and (min-width:1024px) {
	video.vid_main {
	max-width: 1000px;/*PC版での最大幅*/
	}
}