@charset "utf-8";
/* CSS Document */
.tenshoku-title-back {
    background-image: url("../images/tenshoku/top-back2.webp");
	width:100%;
	height:330px;
	background-size: cover;
	background-position: center;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:100px 30px 0 30px;
	box-sizing: border-box;
}
.tenshoku-title-back-hairstylist {
    background-image: url("../images/tenshoku/top-back3.webp");
	background-size: cover;
	background-position: center;
}
.tenshoku-title-back-others {
    background-image: url("../images/tenshoku/top-back1.webp");
	background-size: cover;
	background-position: center;
}
@media(max-width:960px){
	.tenshoku-title-back {
	height:300px;
	padding:70px 30px 0 30px;
}
}
.tenshoku-title{
}
.tenshoku-title h1{
	margin:0;
	text-align:center;
	color:#000;
	font-size:30px;
	/*font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-gfamily:initial;*/
}
.tenshoku-title h1 span{
	display:inline-block;
}
.tenshoku-title p{
	margin:0;
	text-align:center;
	color:#AF8DA1;
}
@media(max-width:640px){
	.tenshoku-title h1{
	font-size:25px;
}
}
/*背景色*/
.back-color1{
	background-color:#F5F0F3;
}
/*イントロ*/
.tenshoku-intro {
	width:90%;
	max-width:768px;
	margin:40px auto 0 auto;
	border:double 5px #DCC7DD;
	padding:25px 30px;
	box-sizing: border-box;
	border-radius:20px;
}
.tenshoku-intro p{
	text-align:center;
	font-weight:bold;
	font-size:18px;
	color:#2F2F2F;
	margin-top:10px;
}
.tenshoku-intro p span{
	display:inline-block;
}
@media(max-width:520px){
	.tenshoku-intro {
	padding:20px 15px;
	border-radius:15px;
}
	.tenshoku-intro p{
	font-size:16px;
}
}
.section1 {
	padding:30px 0 50px 0;
	width:90%;
	margin:auto;
}
.section2 {
	padding:30px 0 50px 0;
	width:100%;
	margin:auto;
}
.section1 h2{
	font-weight:bold;
	text-align:center;
	font-size:25px;
	padding:0 30px;
}
.section1 h2 .eng{
	color:#AF8DA1;
	font-weight:bold;
	display:block;
	font-weight:normal;
}
.section1 h2 span{
	display:inline-block;
}
@media(max-width:640px){
	.section1 h2{
	font-size:18px;
	padding:0 30px;
}
	.section1 {
	padding:30px 0;
}
}
.section1 ul{
	padding-left:0;
	list-style:none;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:20px 15px;
	margin-top:50px;
}
.section1 ul li{
	border:solid 1px #AF8DA1;
	border-radius:10px;
	padding:15px 20px;
	width:40%;
	box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.1);
}
.section1 ul li .p-1{
	font-size:18px;
	font-weight:bold;
	margin:0;
}
.section1 ul li .p-1 .under-bar{
	background:linear-gradient(transparent 75%, #DCC7DD 60%);
}
.section1 ul li .p-1 .check{
	width:30px;
	display:inline-block;
}
.section1 ul li .p-1 .check img{
	width:100%;
	display:block;
	margin-bottom:-4px;
}
.section1 ul li .p-2{
	font-size:16px;
	margin:5px 0 0 0;
}
@media(max-width:640px){
.section1 ul li .p-1{
	font-size:16px;
}
.section1 ul li .p-2{
	font-size:15px;
}
.section1 ul li{
	width:100%;
}	
.section1 ul{
	gap:15px 15px;
	margin-top:30px;
}
}

.section-intro1 {
	width:90%;
	max-width:768px;
	margin:auto;
	text-align:center;
}
.section-intro1 span{
	display:inline-block;
}

.point-box {
	margin:30px auto;
}

.point-box1 {
	width:90%;
	max-width:768px;
	margin:auto auto 25px auto;
	background-color:#fff;
	border-radius:20px;
	box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.1);
	padding:20px 0 35px 0;
	box-sizing: border-box;
}
.point-box1 .number{
	width:120px;
	margin:auto;
}
.point-box1 .number img{
	width:100%;
	display:block;
}
.box-content{
	width:90%;
	margin:auto;
	display:flex;
	flex-direction:column;
	align-items:center;
}
.point-box1 h3{
	text-align:center;
	font-size:22px;
	display:inline;
}
.point-box1 h3 span{
	display:inline-block;
	background:linear-gradient(transparent 85%, #DCC7DD 60%);
}

.point-img {
	width:100%;
}
.point-img img{
	width:100%;
	display:block;
}
@media(max-width:640px){
.point-box1 .number{
	width:80px;
	margin:auto;
}	
.point-box1 h3{
	margin:10px 0;
	font-size:20px;
}
}
@media(max-width:520px){
.box-content p{
	font-size:15px;
}
}
/*先輩社員の声*/
.fukidashi {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  padding: 16px;
  border: 2px solid #cbafbf;
  border-radius: 8px;
  background-color: #ffffff;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

.fukidashi::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 77%;
  border-style: solid;
  border-width: 20px 0 0 20px;
  border-color: #cbafbf transparent transparent;
  translate: -50% 100%;
  transform: skew(6deg);
  transform-origin: top;
}

.fukidashi::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 77%;
  border-style: solid;
  border-width: 15.2px 0 0 15.2px;
  border-color: #ffffff transparent transparent;
  translate: calc(-50% + 0.4px) 100%;
  transform: skew(6deg);
  transform-origin: top;
}

.voice {
	display:flex;
	justify-content:center;
	gap:20px;
}

.voice-box {
	width:40%;
	position:relative;
	margin-bottom:85px;
}
.voice-box .voice-img{
	width:50px;
	position:absolute;
	bottom:0;
	right:10px;
}
.voice-box .voice-img img{
	width:100%;
	position:absolute;
}
.voice-box .fukidashi p{
}
.voice-box .fukidashi p span{
	display:block;
	color:#8E627C;
	font-weight:bold;
}

.voice-btn {
	width:90%;
	margin:30px auto;
	max-width:700px;
	box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.1);
	border-radius:15px;
}
.voice-btn a{
	display:block;
}
.voice-btn a img{
	display:block;
	width:100%;
}
@media(max-width:640px){
.voice {
	gap:20px;
	flex-wrap:wrap;
}	
.voice-box {
	width:100%;
	margin-bottom:85px;
}
}
.tenshoku-contact {
	background-color:#AF8DA1;
	padding:10px 20px;
	box-sizing: border-box;
}
/*お気軽にお問い合わせください。*/
.contact-intro {
	color:#fff;
	text-align:center;
	font-weight:bold;
	font-size:25px;
}
.contact-intro span{
	display:inline-block;
}
.tenshoku-contact ul{
	list-style:none;
	padding-left:0;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:20px;
	max-width:768px;
	margin:auto;
}
.tenshoku-contact ul li{
	width:30%;
}
.tenshoku-contact ul li a{
	display:block;
	background-color:#fff;
	border-radius:10px;
	width:100%;
	padding:10px 0;
	box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.1);
}
.tenshoku-contact ul li a span{
	width:80px;
	display:block;
	margin:15px auto auto auto;
}
.tenshoku-contact ul li a span img{
	width:100%;
}
.tenshoku-contact ul li a p{
	font-weight:bold;
	text-align:center;
	font-size:18px;
	margin:0;
}
.search-shop {
	width:90%;
	max-width:750px;
	margin:30px auto;
}
.search-shop a{
	margin:auto;
	background-color:#fff;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:100px;
	color:#000;
	font-weight:bold;
	box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.1);
}
.search-shop a span{
	display:block;
	width:50px;
	margin-left:10px;
}
.search-shop a span img{
	display:block;
	width:100%;
}
@media(max-width:640px){
.contact-intro {
	font-size:20px;
}	
}
@media(max-width:480px){
.contact-intro {
	font-size:18px;
}	
.tenshoku-contact ul li{
	width:45%;
}
}
.process {
	max-width:700px;
	margin:80px auto auto auto;
}

.process-box {
	display:flex;
	margin-bottom:50px;
}
.process-box .step{
	width:100px;
	min-width:100px;
	height:100px;
	background-color:#CBAFBF;
	border-radius:100px;
	display:flex;
	justify-content:center;
	align-items:center;
	color:#fff;
	text-align:center;
	font-weight:bold;
	font-size:25px;
	line-height:30px;
	margin-right:20px;
	position:relative;
}
.process-box .step-color2{
	background-color:#636363;
}
.process-box .step::after{
	content:"";
	width:1px;
	height:100px;
	display:block;
	background-color:#373737;
	position:absolute;
	top:100%;
	left:50%;
}
.process-box:last-child .step::after{
	display:none;
}
.process-box .step p{
	text-align:center;
	font-weight:bold;
	font-size:25px;
	line-height:30px;
	margin:0;
}

.step-content {
	
}
.step-content p{
	margin:0;
}
.step-content span{
	font-size:20px;
	font-weight:bold;
	display:block;
}
.step-content a{
	display:block;
	text-decoration:underline;
	font-weight:bold;
}
@media(max-width:520px){
.step-content span{
	font-size:18px;
}
.step-content p{
	font-size:15px;
}
.step-content a{
	font-size:15px;
}
.process-box .step{
	width:80px;
	min-width:80px;
	height:80px;
	border-radius:100px;
	margin-right:20px;
}
.process-box .step p{
	font-size:20px;
	line-height:25px;
	margin:0;
}
.process-box .step::after{
	height:120px;
}
}
/*よくある質問*/
.faq{
	width:90%;
	max-width:760px;
	margin:auto;
	/*font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	color:#737373;*/
}
.faq-item {
  margin-top: 20px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  /*border: 1px solid #878787;*/
}

.faq-question__wrap {
  position: relative;
  /*background: #0C89B7;*/
	background:#fff;
  padding: 5px 50px 5px 55px;
  cursor: pointer;
  width:100%;
  margin:0;
  box-sizing: border-box;
	border: 1px solid #737373;
}

.minus-icon {
  position: absolute;
  content: "";
  width: 20px;
  height: 3px;
  background: #737373;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.plus-icon {
  position: absolute;
  content: "";
  width: 20px;
  height: 3px;
  background: #737373;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: ease all 0.5s; /* 擬似要素のトランジションを追加 */
}

.plus-icon.active {
  transform: translateY(-50%);
}

.faq-question__title {
  font-weight: bold;
  color: #737373;
  font-size: 18px;
  position: relative;
	margin:10px;
}
.faq-question__title::before {
    position: absolute;
    color: #AF8DA1;
    content: "Q";
    top: 50%;
    left: -35px;
    transform: translateY(-50%);
  }

.faq-answer__wrap {
  background: #fff;
  padding: 10px 5px 10px 55px;
  transition: ease all 0.5s; /* 擬似要素のトランジションを追加 */
  height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.faq-answer__wrap.active {
  height: auto;
  padding: 10px 5px 10px 55px;
}
.faq-answer__wrap {
  background: #fff;
  opacity: 0;
  padding: 10px 5px 10px 55px;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  transition: ease all 0.7s; /* 擬似要素のトランジションを追加 */
}

.faq-answer__wrap.active {
  opacity: 1;
  padding: 10px 5px 10px 55px;
}

.faq-answer__title {
  position: relative;
  font-weight: bold;
  color: #000;
  font-size: 16px;
}

.faq-answer__title::before {
    position: absolute;
    color: #000;
    content: "A";
    top: 50%;
    left: -35px;
    transform: translateY(-50%);
  }

.faq-answer__text {
  margin-top: 5px;
}
@media(max-width:768px){
.faq-question__wrap {
  padding: 5px 40px 5px 40px;
}	
}
@media(max-width:520px){
.faq-item {
  margin-top: 10px;
}
.faq-question__title {
  font-size: 15px;
  margin:7px;
}
.faq-answer__title {
  font-size: 15px;
}
}
/*よくある質問ここまで*/
/*最後に*/
.message {
	max-width:640px;
	margin:30px auto;
	border:double 5px #DCC7DD;
	padding:25px 30px;
	box-sizing: border-box;
	border-radius:20px;
}
.message h2{
	margin:0;
}
.message-title{
	
}
.message p{
	text-align:center;
	font-weight:bold;
	font-size:18px;
	color:#2F2F2F;
	margin-top:10px;
}
@media(max-width:520px){
	.message {
	margin:20px auto;
	padding:20px 15px;
	border-radius:15px;
}
	.message p{
	font-size:16px;
}
}