@charset "UTF-8";

/* recruit
======================================================= */
#recruit {}

.inner {
	margin: auto;
}

#recruit h3 {
	display: flex;
	align-items: center;
	/* 垂直中央揃え */
	justify-content: center;
	/* 横中央揃え */
	margin-bottom: 2.8rem;
	font-size: 2.5rem;
	color: #d81a3a;
	font-family: "Noto Serif JP", serif;
	gap: 1em;
	/* タイトルと線の間隔 */
	position: relative;
}

#recruit h3::before,
#recruit h3::after {
	content: "";
	flex: 1;
	/* 線を左右均等に伸ばす */
	height: 1px;
	background-color: #d81a3a;
	/* 線の色 */
}

/* #recruit h3{
  position: relative;
  margin-bottom: 2.8rem;
  font-size: 3rem;
  color: #d81a3a;
  font-family: "Noto Serif JP", serif;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
#recruit h3::before,
#recruit h3::after {
  content: "";
  display: inline-block;
  width: 160px; 
  height: 3rem;
  background-size: contain;
  background-repeat: no-repeat;
}
#recruit h3::before{
  background-image: url(../images/recruit/h3_before.png);
  background-position: right;
}
#recruit h3::after{
  background-image: url(../images/recruit/h3_after.png);
  background-position: left;
} */

#recruit section {
	margin: 0 auto;
	padding: 2.8rem;
	font-size: 0.9rem;
	line-height: 1.6;
	background-color: #FFF;
}

#recruit section .section {}

#recruit section img {
	width: 100%;
	/* max-width:auto; */
}

#recruit section .content {}

#recruit section .catch {
	margin-bottom: 1.5rem;
	color: #ff61b3;
	font-size: 1.8rem;
}
/* behavior
======================================================= */


/* ======================================= */
/* Delighters */
/* ======================================= */

.delighter.delighter {
	transition:all .6s ease-out;
	transform:translateY(50%);
	opacity:0
}
.delighterL.delighter {/* 左から */
	transition:all .2s ease-out;
	transform:translateX(-15%);
	opacity:0
}
.delighterL_05s.delighter {/* 左から0.5秒後開始 */
	transition:all .6s ease-out .5s;
	transform:translateX(-15%);
	opacity:0
}
.delighterR.delighter {/* 右から */
	transition:all .6s ease-out;
	transform:translateX(15%);
	opacity:0
}
.delighterR_05s.delighter {/* 右から0.5秒後開始 */
	transition:all .6s ease-out .5s;
	transform:translateX(15%);
	opacity:0
}
.delighterR_1s.delighter {/* 右から1秒後開始 */
	transition:all .6s ease-out 1s;
	transform:translateX(15%);
	opacity:0
}
.delighter_BottomLeft.delighter {/* 左下から */
	transition:all .6s ease-out;
	transform:translate(-50%,50%);
	opacity:0
}
.delighter_BottomRight.delighter {/* 右下から */
	transition:all .6s ease-out;
	transform:translate(50%,50%);
	opacity:0
}
.delighter.delighter.started {
	transform:none;
	opacity:1
}
.delighterT.delighter {/* 下から */
	transition:all .6s ease-out;
	transform:translate(0%,50%);
	opacity:0
}
.delighterT_05s.delighter {/* 下から0.5秒後開始 */
	transition:all .6s ease-out .5s;
	transform:translate(0%,50%);
	opacity:0
}
.delighterT_08s.delighter {/* 下から0.8秒後開始 */
	transition:all .6s ease-out .8s;
	transform:translate(0%,50%);
	opacity:0
}
.delighterT_08s_1s.delighter {/* 下から0.8秒後開始 */
	transition:all .9s ease-out .8s;
	transform:translate(0%,50%);
	opacity:0
}


/* mainArea 
========================*/
#recruit section#mainArea div {
  opacity: 0;
  transform: translateY(50px); /* 下から登場 */
  transition:
    opacity 1.8s cubic-bezier(.77,0,.18,1),
    transform 1.8s cubic-bezier(.77,0,.18,1);
}

#recruit section#mainArea div.started {
  opacity: 1;
  transform: translateY(0); /* 元の位置に */
}


/* sendArea 
========================*/
#recruit section#sendArea {}

#recruit section#sendArea ul {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0 auto 2rem;
}

#recruit section#sendArea li {
	width: 40%;
	margin: 0 5%;
}

#recruit section#sendArea li.tel {
	display: none;
}

#recruit section#sendArea li a {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	border: 5px solid #000;
	border-radius: 8px;
}

#recruit section#sendArea li a:hover {
	text-decoration: none;
}

#recruit section#sendArea li a img {
	display: block;
	width: auto;
	margin: 3% 3% 3% 8%;
}

#recruit section#sendArea li a div {
	display: block;
	width: 64%;
	margin-bottom: 0.8rem;
	text-align: center;
}

#recruit section#sendArea li a strong {
	display: block;
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 0.3rem;
}

#recruit section#sendArea li a span {
	display: block;
	font-size: 1rem;
	font-weight: bold;
}

#recruit section#sendArea li.tel a {
	border-color: #589fff;
	color: #589fff;
}

#recruit section#sendArea li.tel a:hover {
	background-color: #cce2ff;
}

#recruit section#sendArea li.mail a {
	border-color: #fc6da3;
	color: #fc6da3;
}

#recruit section#sendArea li.mail a:hover {
	background-color: #ffe3ed;
}

#recruit section#sendArea li.line a {
	border-color: #5ad126;
	color: #5ad126;
}

#recruit section#sendArea li.line a:hover {
	background-color: #daffca;
}

#recruit section#sendArea p {
	text-align: center;
}

@media screen and (max-width: 768px) {

	#recruit section#sendArea ul {
		justify-content: space-between;
	}

	#recruit section#sendArea li {
		width: 28%;
		margin: 0 1.5%;
	}

	#recruit section#sendArea li.tel {
		display: block;
	}

	#recruit section#sendArea li a {
		display: block;
	}

	#recruit section#sendArea li a img {
		display: block;
		width: 60%;
		margin: 3% auto;
	}

	#recruit section#sendArea li a div {
		width: 100%;
	}

	#recruit section#sendArea li a strong {
		font-size: 1.3rem;
	}

	#recruit section#sendArea li a span {
		font-size: 0.8rem;
	}

	#recruit section#sendArea p {
		font-size: 0.75rem;
	}



}


/* introduceArea 
========================*/
#recruit section#introduceArea {
	background: url(../images/recruit/introduce_bg.jpg) no-repeat #FFF;
	background-size: 100%;
}



#introduceArea ul {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 5rem;
}

#introduceArea ul li {
	width: 32%;
	padding: 1.6rem;
	box-sizing: border-box;
	border-radius: 8px;
	border: 1px solid #EEE;
	text-align: center;
	background: rgba(255, 255, 255, 0.87);
	box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.15);
	font-family: "Noto Serif JP", serif;
	line-height: 1.5;
	text-align: center;
}

#introduceArea ul li span {
	display: block;
	margin-bottom: 1rem;
	font-size: 1.2rem;
	font-weight: bold;
	color: #4b3b28;
}

#introduceArea ul li strong {
	display: block;
	font-size: 1.9rem;
	color: #e7137d;
}

#introduceArea .section {
	text-align: center;
}

@media screen and (max-width: 768px) {

	#introduceArea ul {
		display: block;
	}

	#introduceArea ul li {
		width: 100%;
		margin-bottom: 1rem;
	}

	#introduceArea ul li span {
		display: block;
		margin-bottom: 1rem;
		font-size: 1.2rem;
		font-weight: bold;
		color: #4b3b28;
	}

	#introduceArea ul li strong {
		display: block;
		font-size: 1.9rem;
		color: #e7137d;
	}

	#introduceArea .section {
		text-align: center;
	}

	#introduceArea .content {
		text-align: left;
	}
}


/* informationArea 
========================*/
#recruit section#informationArea {}

#informationArea .section {
	display: flex;
  /* background: url(../images/recruit/info_bg.jpg) no-repeat left top #FFF;
  background-size: 40%;
  background-position: left top; */
}
/* .section.delighterLtoR.started {
  background-position: 45% top;
} */
#informationArea .section .img{
	flex: 1 1 45%;
	background: url(../images/recruit/info_bg.jpg) no-repeat center center #FFF;
	background-size: cover;
	min-height: 300px;
	opacity: 0;
	transform: translateX(-150px);
	transition: opacity 0.8s cubic-bezier(.77,0,.18,1), transform 1.5s cubic-bezier(.77,0,.18,1);
}
#informationArea .section .img.started {
  opacity: 1;
  transform: translateX(0);
}
#informationArea .section .content {
  flex: 1 1 55%;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transform: translateX(150px);
  transition: opacity 0.s cubic-bezier(.77,0,.18,1), transform 1.5s cubic-bezier(.77,0,.18,1);  
  transition-delay: 0.8s; /* ← ここがポイント */
}
#informationArea .section .content.started {
  opacity: 1;
  transform: translateX(0);
}



@media screen and (max-width: 768px) {
	#informationArea .section {
		display: block;
	}
	#informationArea .section .img{
		background: url(../images/recruit/info_bg.jpg) no-repeat top center #FFF;
		background-size: cover;
		padding-left: 0%;
		/* padding-top: 60%; */
	transform: translateY(150px);
	}
		
	#informationArea .section .content {
		transform: translateY(150px);
	}
}


/* salaryArea 
========================*/
#recruit section#salaryArea {}

#salaryArea .section {
	display: flex;
	flex-direction: row-reverse;
	/* background: url(../images/recruit/saraly_bg.jpg) no-repeat right top #FFF;
	background-size: 40%;
	padding-right: 45%; */
}


#salaryArea .section .img{
	flex: 1 1 45%;
	background: url(../images/recruit/saraly_bg.jpg) no-repeat center center #FFF;
	background-size: cover;
	min-height: 300px;
	opacity: 0;
	transform: translateX(150px);
	transition: opacity 0.8s cubic-bezier(.77,0,.18,1), transform 1.5s cubic-bezier(.77,0,.18,1);
}
#salaryArea .section .img.started {
  opacity: 1;
  transform: translateX(0);
}
#salaryArea .section .content {
  flex: 1 1 55%;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transform: translateX(-150px);
  transition: opacity 0.s cubic-bezier(.77,0,.18,1), transform 1.5s cubic-bezier(.77,0,.18,1);  
  transition-delay: 0.8s; /* ← ここがポイント */
}
#salaryArea .section .content.started {
  opacity: 1;
  transform: translateX(0);
}

#salaryArea .sales {
	margin-bottom: 1.2rem;
}

#salaryArea .sales span {
	display: inline-block;
	padding: 0.5rem;
	background: #d81a3a;
	color: #fff;
	font-size: 1.8rem;
}

#salaryArea .sales strong {
	display: block;
	font-size: 3.5rem;
	font-family: "Noto Serif JP", serif;
	color: #d81a3a;
}

#salaryArea .sales strong b {
	font-size: 4.8rem;
}

@media screen and (max-width: 768px) {
	
	#salaryArea .section {
		display: block;
	}
	#salaryArea .section .img{
		background: url(../images/recruit/saraly_bg.jpg) no-repeat top center #FFF;
		background-size: 80%;
		padding-right: 0%;
		padding-top: 60%;
	transform: translateY(150px);
	}
		
	#salaryArea .section .content {
		transform: translateY(150px);
	}
	#salaryArea .sales span {
		padding: 0.5rem;
		font-size: 1.2rem;
	}

	#salaryArea .sales strong {
		display: block;
		font-size: 2.5rem;
		font-family: "Noto Serif JP", serif;
		color: #d81a3a;
	}

	#salaryArea .sales strong b {
		font-size: 3.2rem;
	}
}




/* faqArea 
========================*/
#recruit section#faqArea {
	background: #fae4e6;
}

#faqArea dl {
	margin-bottom: 1rem;
	border: 3px solid #c2ab60;
	background-color: #FFF;
}

#faqArea dt,
#faqArea dd {
	padding: 1rem;
	margin: auto;
}

#faqArea dt {
	display: block;
	border-bottom: 1px solid #c2ab60;
	font-size: 1.2rem;
	font-weight: bold;
}

#faqArea dt::before {
	display: inline-block;
	content: "Q";
	width: 20px;
	margin-right: 1rem;
	padding: 0.4rem;
	background: #ff61b3;
	color: #FFF;
	font-size: 1.1rem;
	text-align: center;
	line-height: 20px;
	border-radius: 5px;
}

#faqArea dd {
	display: block;
}

/* shopArea 
========================*/
#recruit section#shopArea {
	background-color: #fffaec;
}

#shopArea table {
	width: 100%;
}

#shopArea th,
#shopArea td {
	padding: 0.5rem;
	border: 1px solid #DDD;
}

#shopArea th {
	font-size: 1.2rem;
	background: #c2ab60;
	color: #FFF;
}

#shopArea td {}

@media screen and (max-width: 768px) {
	#shopArea th {
		width: 3.5rem;
		font-size: 0.8rem;
	}
}

/* contactArea 
========================*/
#recruit section#contactArea {}

#contactArea .section {

	background: url(../images/recruit/contact_bg.png) no-repeat left top #FFF;
	background-size: contain;
	padding-left: 60%;
	margin-bottom:3rem;

}

#contactArea .contact{
	padding:0 1rem;
}
#contactArea .text{
	font-size: 1.1rem;
	text-align: center;
}
#recruit section#contactArea ul {
	width: 100%;
	margin: 0 auto 2rem;
}
#recruit section#contactArea li {
	display: block;
	margin: 0 auto 1rem;
}

#recruit section#contactArea li a {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	border: 5px solid #000;
	border-radius: 8px;
}

#recruit section#contactArea li a:hover {
	text-decoration: none;
}

#recruit section#contactArea li a img {
	display: block;
	width: 50px;
	margin: 0% 4% 0% 4%;
}

#recruit section#contactArea li a div {
	display: flex;
	align-items: center;
	width: 80%;
	text-align: center;
}

#recruit section#contactArea li a strong {
	display: block;
	font-size: 2rem;
	font-weight: bold;
}

#recruit section#contactArea li a span {
	display: block;
	margin: 0 0.4rem;
	font-size: 0.9rem;
	font-weight: bold;
}

#recruit section#contactArea li.tel a {
	border-color: #589fff;
	color: #589fff;
}

#recruit section#contactArea li.tel a:hover {
	background-color: #cce2ff;
}

#recruit section#contactArea li.mail a {
	border-color: #fc6da3;
	color: #fc6da3;
}

#recruit section#contactArea li.mail a:hover {
	background-color: #ffe3ed;
}

#recruit section#contactArea li.line a {
	border-color: #5ad126;
	color: #5ad126;
}

#recruit section#contactArea li.line a:hover {
	background-color: #daffca;
}

#recruit section#contactArea p {
	text-align: center;
}

@media screen and (max-width: 768px) {

	#recruit section#contactArea ul {
		/* justify-content: space-between; */
	}

	#recruit section#contactArea li {
		/* width: 28%;
		margin: 0 1.5%; */
	}

	#recruit section#contactArea li.tel {
		/* display: block; */
	}

	#recruit section#contactArea li a {
		/* display: block; */
	}

	#recruit section#contactArea li a img {
		/* display: block;
		width: 60%;
		margin: 3% auto; */
	}

	#recruit section#contactArea li a div {
		width: 100%;
	}

	#recruit section#contactArea li a strong {
		font-size: 1.3rem;
	}

	#recruit section#contactArea li a span {
		font-size: 0.8rem;
	}

	#recruit section#contactArea p {
		font-size: 0.75rem;
	}


	#contactArea .text{
		font-size: 0.9rem;
		text-align: left;
	}

}



@media screen and (max-width: 768px) {
	#contactArea .section {
		background: url(../images/recruit/contact_bg.png) no-repeat top center #FFF;
		background-size: 100%;
		padding-left: 0%;
		padding-top: 70%;
	}
}



@media screen and (max-width: 768px) {

	#recruit .inner {
		padding-bottom: 3rem;
	}

	#recruit h3 {
		font-size: 1.8rem;
		gap: 0.5em;
		/* タイトルと線の間隔 */
	}

	#recruit h3::before,
	#recruit h3::after {}

	#recruit section {
		margin: 0 auto;
		padding: 0.8rem;
		font-size: 0.84rem;
		line-height: 1.6;
		background-color: #FFF;
	}

	#recruit section .catch {
		margin-bottom: 1.5rem;
		color: #ff61b3;
		font-size: 1.3rem;
	}

	#recruit .section .content {
		padding: 5%;
		background: rgba(255, 255, 255, 0.9);
	}

}