@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.3em; line-height: 1.8;
	font-size: 62.5%;	color:#686868; background: #fff;
	height:100%;
}

.center{ text-align: center; }
.left{ text-align: left; }
.right{ text-align: right; }
.white{ color:#fff; }
.yellow{ color:#fde263; }

.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;}

.text{ font-size: 1.5rem; margin: 20px auto; }

/* 背景のグラデーション */
.gradient_outer { position: relative; z-index: -2; background: linear-gradient(90deg, #fef5ad,#f8c5b4); }
.gradient_innner{ z-index: -2; width:100%; height:100%; padding:10px 0 30px; background: linear-gradient(115deg, rgba(255, 255,255, 0.1), rgba(255, 255,255, 0.7), rgba(255, 255,255, 0.1)); }

#merit,#nakama{padding-bottom: 30px;}

/* ヘッダー */
.h_title{ position: fixed; top: 15px; left:15px; z-index:97;}
.header_bg{
 position: fixed; top:0; height: 70px; width: 100%; margin:0; padding:0;
 background-color: #fde263; z-index:96;
 }


/* 仕事検索メニュー */
.search{
  display: none; width: 100%; height:60px;
  background: #fde263; 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:#686868;
}

.search a:hover,.search a:active{ background: #fff8d6; transition: 0.8s; }

/* メイン */
#topimg{ position: relative; width:100%; height:100vh;  height: calc(var(--vh, 1vh) * 100);}
.maincopy{ width:100%; font-size: 1.5rem; margin: 40px auto;}
.arrow{
	position:absolute; bottom: 5%; width:100%;
	font-size: 1.8rem; line-height: 1.5;}

/* 縁取り文字(没)
	.arrow{
			text-stroke: 0.005px #FFF;
			-webkit-text-stroke:0.005px #FFF;
			color: transparent;
			}
*/

.arrow span{
		color: #e3a88a; font-weight:700;
		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;
}

/*はたらく魅力*/
#merit .flex{ width:85vw; max-width:750px; }
#merit .flex_innner{
	position: relative;
	width:40vw; height:40vw; max-width:230px; max-height:230px;
	border-radius: 50%; background: #acacac;
	margin:10px auto; }
#merit .flex img{ display: block; width:12%; margin:20px auto 0px;}
#merit .flex p{
	width:100%;
	margin:10px auto; line-height: 1.6;
	position: absolute;
  top: 50%; transform: translateY(-50%) ;
  -webkit- transform: translateY(-50%) ;

}


#makanai .img_outer{
	width:83%; max-width: 750px; position:relative;
	}

#makanai .img_outer::after{
	position:absolute; top:10px; left:10px;
  content:''; width:100%; height:100%;
border:solid 1px #acacac; z-index:-1;
}

/* スタッフの声 */
.yt_video{ width:81vw; max-width:750px; height:53vw; max-height:520px; margin-bottom:70px;  position:relative; }
.yt_video iframe{ width:100%; height:100%; }


/* フッター */
footer{ background:#acacac; color:#1f1f1f; margin:0 auto; padding:20px 0 60px; }
.copylight{ width:80%; font-size:1.5rem; }



/*-- 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: 2.0rem; line-height: 2; margin:50px auto;}

	#anshin img{ height: 368px; max-width:100%; object-fit: cover; }
	#topimg{ background:url(../images/ap_top_pc.jpg) no-repeat 80%/cover;}
	#merit text{ font-size: 2.5rem;  }
	.copylight{ font-size:2rem; }

	/*-- メニュー --*/
	.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: #fde263; 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; }
	#topimg{ background:url(../images/ap_top_sp.jpg) no-repeat top/cover;}

}

/* ナビゲーション　---　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: 28px;
    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.active { background-color: #ffffff; }
  .menu-trigger.active span { background-color: #cccccc; }
  .menu-trigger span:nth-of-type(1) { top: 0; }
  .menu-trigger.active span:nth-of-type(1) {transform: translateY(14px) 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: #fde263; 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 #fde263; }
  #top{ margin-top:50px; margin-bottom:10px; }
}

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

 /* CSSアニメーションの指定 */
 #topimg{ animation: SlideIn 1.0s; }

 /* CSSアニメーションの設定 */
 @keyframes SlideIn {
	 0% { opacity: 0; transform: translateX(-100%); }
	 50% { opacity: 0; transform: translateX(-100%); }
   100% { opacity: 1; transform: translateX(0); }
 }