@charset "utf-8";

/* -------------------------------------

---------------------------------------- */
@media screen and (max-width:800px){

	#sp-nav{
		display:inline-block;
	}
	#nav-toggle{
		display:inline-block;
	}

	#nav-toggle {
	  position: fixed;
	  top: 10px;
	  right: 0px;
	  height: 32px;
	  cursor: pointer;
	  background:#fff;
	  border-radius:3px 0 0 3px;
	  padding:7px 15px 5px 5px;
	}
	#nav-toggle > div {
	  position: relative;
	  width: 36px;
	}
	#nav-toggle span {
	  width: 100%;
	  height: 2px;
	  left: 0;
	  display: block;
	  background: #555;
	  position: absolute;
	  transition: top .2s ease, -webkit-transform .3s ease-in-out;
	  transition: transform .3s ease-in-out, top .2s ease;
	  transition: transform .3s ease-in-out, top .2s ease, -webkit-transform .3s ease-in-out;
	}
	#nav-toggle span:nth-child(1) {
	  top: 6px;
		left:3px;
	}
	#nav-toggle span:nth-child(2) {
	  top: 16px;
		left:3px;
	}
	#nav-toggle span:nth-child(3) {
	  top: 26px;
		left:3px;
	}
	#nav-toggle:hover span:nth-child(1) {
	  top: 6px;
	}
	#nav-toggle:hover span:nth-child(3) {
	  top: 26px;
	}

	.open #nav-toggle span {
	  background: #555;
	}
	.open #nav-toggle span:nth-child(1) {
	  top: 15px;
	  -webkit-transform: rotate(45deg);
	          transform: rotate(45deg);
	}
	.open #nav-toggle span:nth-child(2) {
	  top: 15px;
	  width: 0;
	  left: 50%;
	}
	.open #nav-toggle span:nth-child(3) {
	  top: 15px;
	  -webkit-transform: rotate(-45deg);
	          transform: rotate(-45deg);
	}

	/* z-index */
	#nav-toggle {
	  z-index: 1000;
	}


	#sp-nav {
	  background: #000;
	  color: #fff;
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  z-index: 990;
	  text-align: center;
	  display: flex;
	  visibility: hidden;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  font-size: 29px;
	  opacity: 0;
	  transition: opacity .4s ease, visibility .4s ease;
	}

	#sp-nav a {
	  display: block;
	  color: #fff;
	  text-decoration: none;
	  padding: 3px 0;
	  font-size: 18px;
	  transition: color .3s ease;
	}
	#sp-nav a:hover {
	  color: #666;
	}
	#sp-nav ul {
	  list-style: none;
	}
	#sp-nav ul li {
	  opacity: 0;
	  -webkit-transform: translateX(200px);
	          transform: translateX(200px);
	  transition: opacity .2s ease, -webkit-transform .4s ease;
	  transition: transform .4s ease, opacity .2s ease;
	  transition: transform .4s ease, opacity .2s ease, -webkit-transform .4s ease;
	}
	#sp-nav ul li:nth-child(2) {
	  transition-delay: .15s;
	}
	#sp-nav ul li:nth-child(3) {
	  transition-delay: .3s;
	}
	#sp-nav ul li:nth-child(4) {
	  transition-delay: .45s;
	}
	#sp-nav ul li:nth-child(5) {
	  transition-delay: .6s;
	}
	#sp-nav ul li:nth-child(6) {
	  transition-delay: .75s;
	}
	#sp-nav ul li:nth-child(7) {
	  transition-delay: .9s;
	}

	/* open */
	.open {
	  overflow: hidden;
	}
	.open #sp-nav {
	  visibility: visible;
	  opacity: 0.9;
	}
	.open #sp-nav li {
	  opacity: 1;
	  -webkit-transform: translateX(0);
	          transform: translateX(0);
	  transition: opacity .9s ease, -webkit-transform 1s ease;
	  transition: transform 1s ease, opacity .9s ease;
	  transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
	}


	#sp-nav .sp-social-links{
		padding:15px 0 0 0;
	}
	#sp-nav .sp-social-links a{
		display:inline-block;
	}
	#sp-nav .sp-social-links img{
		width:40px;
		margin:0 3px;
	}
	#sp-nav .sp-social-links i{
		font-size:40px;
		color:#333;
		margin:0 1px;
	}
	#sp-nav .sp-social-links i.fa-youtube{
		color:#f00;
	}
	#sp-nav .sp-social-links i.fa-facebook-square{
		color:#1877f2;
	}
	#sp-nav .sp-social-links i.fa-instagram{
		color:#CF2E92;
	}


	#sp-nav .sp-social-links  i.fa-tiktok{
		color:#333;
		font-size:36px;
	}

	.container{
		width:100%;
	}






	.more-detail-link {
		width:100%;
		padding:10px 10px;
		font-size:1.1em;
	}




	/* -------------------------------------------
	 * トップページ[採用情報]
	 --------------------------------------------- */
	.index-recruit-block{
		background:#fbf7b0;
		padding:50px 0;
	}


	.recruit-area-title,
	.recruit-area-title-02{
		color:#fff;
		background:#ffc100;
		padding:4px 5px;
		text-align:center;
		font-size:16px;
	}
	.recruit-area-title-02{
		background:#00a9b8;
	}

	.recruit-flex-block{
		display:flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding:0 10px;
	/*
		justify-content: space-around;
		align-content: stretch;
	*/
	}
	.recruit-flex-block .recruit-flex-item{
		position:relative;
		background:#fff;
		width:100%;
		box-shadow:none;
		margin-bottom:3em;
		margin-left:0px;
	}

	.recruit-flex-block .recruit-flex-item:hover {
		transform: translateY(-5px);
		transition: all 0.5s;
		box-shadow: 5px 5px #ee5599;
	}

	.recruit-flex-block .recruit-flex-item:hover .recruit-job{
		transition: all 0.5s;
		background:#f48ea0;
	}

	.recruit-flex-block .recruit-flex-item:hover .recruit-job-kango{
		transition: all 0.5s;
		background:#009bf9;
	}
	.recruit-flex-block .recruit-flex-item:hover .recruit-job-jimu{
		transition: all 0.5s;
		background:#4ad028;
	}

	.index-recruit-box{
		position:relative;
		display:block;
		background:#fff;
		width:100%;
	}

	.recruit-flex-block .recruit-flex-item .recruit-type-01,
	.recruit-flex-block .recruit-flex-item .recruit-type-02{
		display: table-cell;
		vertical-align: middle;
		text-align:center;
		background:#4395ff;
		border-radius:50%;
		height:70px;
		width:70px;
		overflow:hidden;
		position:absolute;
		right:0px;
		bottom:0px;
	}
	.recruit-flex-block .recruit-flex-item .recruit-type-02{
		background:#5ccb0e;
	}
	.recruit-flex-block .recruit-flex-item .recruit-type-01>div,
	.recruit-flex-block .recruit-flex-item .recruit-type-02>div{
		font-size:20px;
		color:#fff;
		line-height:1.1;
		padding-top:10px;
		 font-family: "新ゴ M","Shin Go Medium";
	}

	.recruit-flex-block .recruit-flex-item .recruit-job{
		background:#f16980;
		color:#fff;
		padding:8px 8px;
		line-height:1.;
		font-size:20px;
		text-align:center;
		 font-family: "新ゴ M","Shin Go Medium";
	}

	.recruit-flex-block .recruit-flex-item .recruit-job-kango{
		background:#0089dc;
	}
	.recruit-flex-block .recruit-flex-item .recruit-job-jimu{
		background:#43b825;
	}

	.recruit-flex-block .recruit-flex-item .recruit-job span{
		background:#fff;
		font-size:14px;
		padding:1px 8px;
		border-radius:2px;
		color:#f16980;
	}
	.recruit-flex-block .recruit-flex-item .recruit-job-kango span{
		color:#1a1aff;
	}
	.recruit-flex-block .recruit-flex-item .recruit-job-jimu span{
		color:#1aca4a;
	}



	.recruit-flex-block .recruit-flex-item .recruit-img{
		height:120px;
		overflow:hidden;
	}
	.recruit-flex-block .recruit-flex-item .recruit-img>img{
		width:100%;
	}
	.recruit-flex-block .recruit-flex-item .recruit-box-inner{
		padding:5px 10px;
	}
	.recruit-flex-block .recruit-flex-item .recruit-box-inner .facility-name{
		color:#333;
		 font-family: "新ゴ M","Shin Go Medium";
		font-size:16px;
	}
	.recruit-flex-block .recruit-flex-item .recruit-box-inner .facility-place{
		color:#87ba45;
		font-size:14px;
		line-height:1.1;
		margin:5px 0;
	}
	.recruit-flex-block .recruit-flex-item  .facility-type{
		border:solid 1px #f16980;
		color:#f16980;
		font-size:14px;
		padding:2px 10px;
		display:inline-block;
		line-height:1;
	}



	/* ---- */
	.more-recruit-link {
		display: inline-block;
		font-size:20px;
		margin:5px 0;
		background:#ffc100;
		color:#fff;
		padding:10px 20px;
		border:solid 2px #ffc100;
		text-align: center;
		text-decoration: none;
		outline: none;
	}
	.more-recruit-link::before,
	.more-recruit-link::after {
		position: absolute;
		z-index: -1;
		display: block;
		content: '';
	}
	.more-recruit-link,
	.more-recruit-link::before,
	.more-recruit-link::after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: all .3s;
		transition: all .3s;
	}
	.more-recruit-link:hover{
	  background-color: #fff;
	  border-color: #ffc100;
	  color: #ffc100;
	}



	/* 下層ページ見出し */
	.page-header{
		height:150px;
	}
	.page-header h1{
		display:inline-block;
		background:#ffc100;
		box-shadow: 5px 5px rgb(255,255,255,0.8);
		margin-top:50px;
		color:#fff;
		font-size:20px;
		padding:5px 15px;
	}
	.page-header-interview h1,
	.page-header-entry h1{
		background:#669d1e;
	}



	/* -------------------------------------------
	 * コンテンツ
	 --------------------------------------------- */
	.content{
	}

	.content-about,
	.content-recruit
	{
		background:#fbf7b0;
	}
	.content-interview{
		background:#91bf3e;
	}

	/* -------------------------------------------
	 * 
	 --------------------------------------------- */







}
@media screen and (min-width: 481px) and (max-width: 800px) {


	.page-section .right-img, .page-section .left-img{
		max-height:250px;
	}

}