@charset "UTF-8";
* { margin: 0px auto; padding:0px;  outline: none;}

html{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400; font-style: normal;
	letter-spacing:0.1em; line-height: 1.8; letter-spacing: 0.15em;
	font-size: 62.5%;	color:#333333; background: #d2d1b9;
	height:100%;
}

.center{ text-align: center; }
.left{ text-align: left; }
.right{ text-align: right; }
.white{ color:#fff; }
.green{ color:#acec15; }
.bg_black{ background: #333; }


.font_bold{ font-weight: 700; }
.flex{ display: flex; flex-wrap: wrap; justify-content:space-between; }

img{ width:100%; max-width: 750px;}
a{ text-decoration: none;  }
.link_btn:hover,.link_btn:active{ opacity: 0.75; transition: 0.8s; }

h1{ font-size: 1.4rem; font-weight: 500;}
h2{ font-size: 2.0rem; font-weight: 700; text-align: center; margin: 30px auto;}
big{font-size: 1.2em; line-height: 1;}
.text{ font-size: 1.6rem; margin: 20px auto 30px; letter-spacing: 0.1em; }


/* ヘッダー */
.h_title{ position: fixed; top: 15px; left:15px; z-index:97;}
.h_title h1.open{color:#333;}
.header_bg{ position: fixed; top:0; height: 70px; width: 100%; margin:0; padding:0;
	background:url(../images/shain_headerbg_sp.jpg) center/100% 100%; background-size:cover; z-index:96;
}

/* 仕事検索メニュー */
.search{
  display: none; width: 100%; height:60px;
  background:url(../images/shain_footerbg_sp.jpg) center/100% 100%;
	background-size:cover; position: fixed; bottom: 0; z-index:999;
}
.search a{
	display: block; width: 80%; height:50px;
	margin-top:5px; border-radius: 20px; background-color: #fff;
	font-size: 2.5rem; color:#333;
}

.search a:hover,.search a:active{ opacity:0.8; transition: 0.8s; }

/* メイン */
#topimg{  position: relative; width:100%; max-width:1024px; height:100vh;  height: calc(var(--vh, 1vh) * 100);}
.arrow{ position:absolute; bottom: 3%; width:100%; max-width:1024px; font-size: 1.8rem; line-height: 1.5; }
.arrow span{ color: #fff; font-weight:700; }

/*スタッフのメッセージ部分*/
.staff_message{ position: relative; width: 100vw; max-width: 710px; height:122vw; max-height: 460px; font-size: 1.6rem; margin-bottom: 80px;}
.staff_message .lead{ position:absolute; top:40%;}
.staff_message .bg_white{ background-color: #fff; font-size: 2.0rem; line-height:1.8; margin: 20px; padding:0px 15px; }
.staff_message .text{ position:absolute; top:55%; width:80vw; max-width: 400px; padding:20px;}
#message .staff_message	{background:url(../images/shain_staff01_sp.jpg) no-repeat top/100%;}
#culture .staff_message	{background:url(../images/shain_staff02_sp.jpg) no-repeat top left/80%;}
#culture .staff_message .lead{ position:absolute; left:35%;}


/*メッセージ*/
#message{ padding-bottom: 10px; }
#message img{ width:50vw; max-width: 180px; display: block; margin: 30px auto;}

/*キーワードで知るアストジャパン*/
#keyword{
	padding:10px 0 50px;  margin-bottom:30px;
	background:url(../images/bg.png) no-repeat top center/80% 100%; height:100%; }
#keyword .flex_outer{ width:95vw; max-width:710px;}
#keyword a{ color:#333; }

.keywordboxL{ width:90vw; max-width:695px; height:60vw ; max-height:210px; background: #fff; margin:10px auto;}
.keywordboxL img{ display: block; width:30%; max-width:100px; margin:0px auto;}
.keywordboxM{ width:42.53vw;  max-width:340px; height:60vw ;  max-height:210px; background: #fff; margin:10px auto;}
.keywordboxM img{ display: block; width:50%; max-width:100px; margin:20px auto 0px;}
.keywordboxM img.note{ margin:0 auto; }

.text_outer{ position:relative; width:100%; height:60%; top:0; }
.text_outer p{
	font-size:2.0rem; width:100%; height:100%; position:absolute; top:50%; left:50%;
	transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%);
}

/*性別問わず活躍中*/
#culture{ padding:10px 0 60px;}
#culture .img_outer{ width:90%; max-width:710px;}

/* 職場の様子 */
.yt_video{ width:81vw; max-width:720px; height:53vw; max-height:510px; margin-bottom:70px;  position:relative; }
.yt_video iframe{ width:100%; height:100%; }

/*グループ企業*/
.associated_outer{ background:url(../images/bg.png) no-repeat top center/90% 100%; height:100%; padding:10px 0 30px; margin:30px auto;}
.associated_outer p{ width:75%; max-width:380px; margin:20px auto;}
.associated_outer img{ width:100%; }
.associated_outer a{ display: block; background-color: #fff; color:#333;   width:74vw; max-width: 280px; font-size: 1.6rem; line-height: 1.5; padding:10px 0;}
.associated_outer a:hover,.associated_outer a:active{ opacity:0.8; transition: 0.8s; }

/* フッター */
footer{ background:url(../images/shain_footerbg_sp.jpg) center/100% 100%; background-size:cover; margin:0 auto; padding:10px 0 60px; }
.copylight{ width:80%; font-size:1.5rem; color:#333;}


/*-- PC版表示CSS --*/
@media screen and (min-width:561px){
	.sp_area,.sp_br{ display: none; }
	.pc_area{ display: block; }

	h1{ font-size: 1.6rem; }
	h2{ font-size: 3.0rem; margin:50px auto; }
	.maincopy{ font-size: 1.6rem; }
	.text{ font-size: 1.8rem; line-height:1.6; margin:50px auto;}

	.text_outer{ position:relative; width:100%; height:60%; }
	.text_outer p{
		font-size:2.5rem; line-height: 1.5; position:absolute; top:10%;
		transform: translateY(0%) translateX(-50%);　-webkit- transform: translateY(0%) translateX(-50%);
	}
	.text_outer p.position_top{
		top:0;
	}

	.staff_message{ padding:0px; margin-bottom: 150px;}
	.staff_message .bg_white{ font-size: 2.5rem; line-height:2; }

	#message .staff_message	{background:url(../images/shain_staff01_pc.jpg) no-repeat top/100%;}
	#culture .staff_message	{background:url(../images/shain_staff02_pc.jpg) no-repeat top/100%;}
	#culture .staff_message .lead{ position:absolute; text-align: right; top:330px; right:-20px;}
	#culture .staff_message .text{ width:710px; max-width:710px; top:90%;}

	#keyword{
		background:url(../images/bg.png) no-repeat top center/810px 100%; height:100%; }

	.associated_outer{ width:710px; background:url(../images/bg.png) no-repeat top center/100%; height:100%; padding:10px 0 30px; margin:30px auto;}
	.associated_outer img{ width:380px;  display: block; margin:0 auto;}
	.modal_content p{ height: 60%; left: 50%; top: 50%;
		transform: translate(-50%,-50%); }

	footer{ background:url(../images/shain_footerbg_pc.jpg) center/100% 100%; background-size:cover; margin:0 auto; padding:10px 0; }


	/*-- メニュー --*/
	.header_bg{ height: 100px; }
	.h_title{ position: fixed; top: 20px; left:calc((100% - 750px) / 2);}
	.search{  position: fixed; top: 30px; right:calc((100% - 750px) / 2);
		display: block; width: 230px;  background: none; }

	.search a{
		display: block;	width: 230px; height:30px;
		margin-top:5px; border-radius: 20px; border: solid 1px #fff;
		background: none; font-size: 1.6rem; color:#fff; line-height: 30px;
	}
	.search a:hover,.search a:active{ background: #acec15; transition: 0.8s; }
	.search a.open{ background: #fff; color:#686868; }
	.search a.open:hover,.search a.open:active{ background: #fff8d6;  transition: 0.8s; }
}


/*-タブレット版表示CSS-*/
@media screen and (min-width:561px) and (max-width:750px) {
	.h_title{ top: 20px; left:10px;}
	.search{  top: 30px; right:10px;}
}

/*-スマホ版表示CSS-*/
@media screen and (max-width:560px){
	html{padding-bottom: 60px;}
	.pc_area,.pc_br{ display: none; }
	.sp_area{ display: block; }
	.header_bg{ display: none; }

}

/* ナビゲーション　---　PCとタブレット */
@media only screen and (min-width: 561px) {
  #toggle,#menu-box{ display: none; }
  .header_bg{ display: none; }
  #pageTitle{ width:600px; top:15px; left:15%;}
  #pc_searchBtn{
    position: fixed; top:10px; right:10%;
    width: 180px; font-size: 1.4rem;
    border: 1px #fff solid;
    border-radius: 10px; z-index: 99; padding-top: 5px;
  }
  #pc_searchBtn a{ color:#fff; width:100%; height:100%;}
  #pc_searchBtn:hover{  background: #fff;  }
  #pc_searchBtn:hover a{  color:#4a5677; }
}

/* ナビゲーション　---　タブレット */
@media screen and (min-width:561px) and (max-width:750px) {
  #pageTitle{ top:10px; left:10px;}
  #pc_searchBtn{right:10px; }
}

/* ナビゲーション　---　スマホ */
@media only screen and (max-width: 560px) {
  .overlay {
    content: "";
    display: block;
    width: 0; height: 0;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0; left: 0;
    z-index: 2; opacity: 0;
    transition: opacity .5s;
  }
  .overlay.open {
    position:fixed;  z-index: 98;
    width: 100%; height: 100%; opacity: 1;
}
  .menu-trigger {
    display: inline-block;
    width: 30px; height: 26px;
    vertical-align: middle;
    cursor: pointer;
    position: fixed;
    top: 20px; right: 20px;
    z-index: 100;
  }
   .menu-trigger span {
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%; height: 2px;
    background-color: #ffffff;
    transition: all .5s;
  }
 	.menu-trigger span.open{ background-color: #333; }

  .menu-trigger.active { background-color: #ffffff; }
  .menu-trigger.active span { background-color: #333; }
  .menu-trigger span:nth-of-type(1) { top: 0; }
  .menu-trigger.active span:nth-of-type(1) {transform: translateY(12px) rotate(-45deg); }
  .menu-trigger span:nth-of-type(2) { top: 12px; }
  .menu-trigger.active span:nth-of-type(2) { opacity: 0; }
  .menu-trigger span:nth-of-type(3) { bottom: 0; }
  .menu-trigger.active span:nth-of-type(3) { transform: translateY(-12px) rotate(45deg); }

  nav {
    width: 250px; height: 100%;
    padding-top: 100px;
    background-color:#fff;
    position: fixed;
    top: 0; right: 0; z-index: 99;
    transform: translate(250px);
    transition: all .5s; }

  nav.open { transform: translateZ(0); }
  #menu { color: #acec15; text-align:center; padding: 30px 0;  font-size:2rem;}
  #menu p{ padding-top:20px; padding-bottom: 0;}
	#menu a{ display:inline-block; border-bottom: 1px solid #444; color:#686868;  }
  #menu span{ display:inline-block; border-bottom: 1px solid #acec15; }
  #top{ margin-top:50px; margin-bottom:10px; }
}

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 30px);
	transition: all 0.8s ease-out;
 }

 /* topのアニメーションの指定 */
 .topbg { position: relative; width: 100%; height: 100%; }

 .topbg img {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, 0%);
  width: 100%; height: 100%;  max-width: 1240px;
	opacity: 0; object-fit: cover;
  animation :slideshow 15s linear infinite;
}

@keyframes slideshow{
	0%{ opacity: 0; }
  10%{ opacity: 1; }
  32%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}

.topbg img:nth-child(2){ animation-delay: 5s; }
.topbg img:last-child{ animation-delay: 10s; }


 /* モーダル */
.modal{
    display: none; height: 100vh;
    position: fixed;
    top: 0; width: 100%; z-index:9997;
}
.modal__bg{
    position: absolute;
    background: rgba(0,0,0,0.7);
    height: 100vh; width: 100%;
		z-index:9998;
}
.modal_content{
	border-radius: 10%;
	border:solid #929292 3px;
	background: #fff;
	margin:0 auto; padding: 20px;
	width: 85%; max-width:350px;
	height:70%; max-height:440px;
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	z-index:9999;
}

.modal_content p{
	font-size:1.8rem; letter-spacing: 0.04em;
	width: 100%; position: absolute; left: 50%; top: 50%;
	transform: translate(-50%,-50%);
}
.modal-close{
	font-size:3rem; color:#929292; position: absolute;
	right:40px;
}