@charset "utf-8";

/*---------------------------------------------------
 Slide
---------------------------------------------------*/
.slick-slider {
	height: 100%;
}
#keyvisual {
	position: fixed;
	top: 6vh;
	left: 0;
	width: 100%;
	height: 94vh;
	margin: 0 auto;
 background: #fafafa;
}
#keyvisual .slide div {
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 height: 100%;
 margin: 0;
}
#keyvisual .slide div.bg01 { background-image: url("../images/pc_slide01.jpg"); }
#keyvisual .slide div.bg02 { background-image: url("../images/pc_slide02.jpg"); }
#keyvisual .slide div.bg03 { background-image: url("../images/pc_slide03.jpg"); }
#keyvisual .slide div.bg04 { background-image: url("../images/pc_slide04.jpg"); }
#keyvisual .slide div.bg05 { background-image: url("../images/pc_slide05.jpg"); }
#keyvisual .slide div.bg06 { background-image: url("../images/pc_slide06.jpg"); }
#keyvisual .slide div.bg07 { background-image: url("../images/pc_slide07.jpg"); }
#keyvisual .slide div.bg08 { background-image: url("../images/pc_slide08.jpg"); }
#keyvisual .slide div.bg09 { background-image: url("../images/pc_slide09.jpg"); }
#keyvisual .slide div.bg10 { background-image: url("../images/pc_slide10.jpg"); }
#keyvisual .slide div.bg11 { background-image: url("../images/pc_slide11.jpg"); }
#keyvisual .slide div.bg12 { background-image: url("../images/pc_slide12.jpg"); }


/* ------------------------------------------------------------------
 TOP Contents
-------------------------------------------------------------------*/
#top-container {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
	width: 100%;
	height: 94vh;
	color: #fff;
	background-color: rgba(61,38,34,0.2);
}
#top-container h2 {
	font-size: 2.0rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	margin-top: auto;
}
#top-container p.catchcopy {
	font-size: 7.2rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	font-style: italic;
 font-feature-settings: "palt" 1;
}
#top-container p.catchcopy span {
	display: inline-block;
}
#top-container p.catchcopy span:nth-child(1) {
	margin-right: -0.6em;
}
#top-container .first_meeting {
	padding: 0;
	margin: auto auto 30px;
}
#top-container .first_meeting a {
	padding: 14px 40px;
	text-decoration: none;
	letter-spacing: 0.1em;
}
#top-container .scroll {
 position: relative;
 width: 55px;
}
#top-container .scroll span {
	display: block;
	overflow: hidden;
	width: 1px;
	height: 60px;
	margin: 20px auto 0;
	position: relative;
}
#top-container .scroll span::after {
 content: "";
 display: block;
 width: 1px;
 height: 60px;
 background-color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	transform-origin: center bottom;
 animation: pull 2s infinite;
}
@keyframes pull {
 0%   { transform: translateY(-100%); }
 50%  { transform: translateY(0); }
 100% { transform: translateY(100%); }
}


/* ------------------------------------------------------------------
 Thoughts
-------------------------------------------------------------------*/
#thoughts {
	padding: 75px 0;
	line-height: 2.4;
	letter-spacing: 0.1em;
	background: #fafafa url("../images/pc_bg01.jpg") no-repeat center top;
	background-size: cover;
}
#thoughts h2 {
	font-size: 2.0rem;
	margin-bottom: 70px;
}
#thoughts p {
	margin-bottom: 2em;
}
#thoughts p:last-child {
	font-size: 2.0rem;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
 featureseatures
-------------------------------------------------------------------*/
#features {
	padding: 100px 0;
	background: #fafafa url("../images/pc_bg02.jpg") no-repeat center top;
	background-size: cover;
}
.features_section {
	max-width: var(--max-width);
	margin: 80px auto;
}
.features_section h3 {
 font-size: 2.6rem;
 letter-spacing: 0.01em;
 padding: 0 0 15px;
 border-bottom: 1px solid #ff7043;
 margin-bottom: 30px;
}
.features_section h4 {
	font-size: 2.0rem;
	margin-bottom: 2em;
	line-height: 2;
}
.features_section .col2 p {
	font-size: 1.4rem;
 text-align: justify;
	line-height: 2;
}
.features_section .col2 {
	display: flex;
	justify-content: space-between;
}
.features_section .col2 figure {
	width: 50%;
}
.features_section .col2 > div {
	width: 46.5%;
	padding: 0;
	margin: 1em 0 0 auto;
}


/* ------------------------------------------------------------------
 Numbers
-------------------------------------------------------------------*/
#numbers {
	padding: 80px 0 60px;
}
#benefits {
	padding: 0 0 80px;
}
#numbers h2.section-title,
#numbers p.section-lead,
#benefits h2.section-title {
	margin-bottom: 60px;
}
.block-list {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
 max-width: var(--max-width);
 margin: 0 auto;
}
.block {
	width: 33%;
	padding: 10px 20px 30px;
	background-color: #fef2df;
}
.block h3 {
	font-size: 2.0rem;
	text-align: center;
}
.block h3 em {
	font-style: normal;
	font-size: 3.8rem;
	margin: 0 0.2em;
}
.block figure.icon {
	display: block;
	width: 60px;
	aspect-ratio: 1/1;
	margin: 40px auto 50px;
}
.block p {
	font-size: 1.4rem;
	line-height: 1.5;
}
#benefits .block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 30px 20px;
}


/* ------------------------------------------------------------------
 Candidate
-------------------------------------------------------------------*/
#candidate {
	padding: 80px 0;
	background: #fafafa url("../images/pc_bg03.jpg") no-repeat center top;
	background-size: cover;
}
.candidate_inner {
	min-width: var(--min-width);
	padding: 50px 0;
	margin-top: 80px;
	background-image: linear-gradient(#f8c8ba 0 0), url("../images/pc_bg03.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-blend-mode: multiply;
}
.ideal_container {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: var(--max-width);
	margin: 0 auto;
}
.candidate_img {
 flex: 1;
	max-height: 530px;
 margin-left: calc(50% - 50vw);
 margin-right: 3.2%;
	aspect-ratio: 263 / 212;
	mask-image: url("../images/candidate_img-mask.svg");
	mask-repeat: no-repeat;
	mask-position: right 0px top 50%;
	mask-size: cover;
}

@media only screen and (max-width: 1200px){
 .candidate_img {
  margin-left: -80px;
 }
}
.candidate_img img {
	width: 100%;
	height: 100%;
	max-height: 530px;
	aspect-ratio: 263 / 212;
	object-fit: cover;
}
.ideal_list {
	width: 54%;
}
.ideal_list .ideal {
	display: flex;
	align-items: flex-start;
	margin: 0 0 30px auto;
}
.ideal_list .ideal .num,
.flowchart .chart p.num {
 width: 55px;
 height: 55px;
 padding: 0;
	margin-right: 30px;
 font-size: 3.8rem;
 line-height: 51px;
 text-align: center;
 clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.ideal_list .ideal .num {
 flex: 0 0 55px;
 color: #ed6d45;
 background-color: #fff;
}
.ideal_list .ideal h3 {
 font-size: 2.0rem;
 line-height: 55px;
 letter-spacing: 0.1em;
 margin: 0 auto 0.5em;
}

/* ------------------------------------------------------------------
 Interview
-------------------------------------------------------------------*/
#interview {
	padding: 115px 0 135px;
	background: #fafafa url("../images/pc_bg04.jpg") no-repeat center top;
	background-size: cover;
}
#interview .staff-list {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	max-width: var(--max-width);
	margin: 80px auto 0;
}
.staff-list .staff {
	width: 49%;
	padding: 2%;
	margin-bottom: 40px;
	background-color: #fff;
}
.staff-list .staff a {
	text-decoration: none;
	color: #3d2622;
}
.staff-list .staff figcaption {
	margin-top: 20px;
}
.staff-list .staff p {
	font-size: 1.4rem;
}
.staff-list .staff .name {
	display: flex;
	align-items: center;
	margin: 20px 0 0;
}
.staff-list .staff .name span.icon {
	width: 40px;
	aspect-ratio: 1/1;
	clip-path: circle();
	background-color: #e0e0e0;
}
.staff-list .staff .name span.initial {
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin-left: 0.5em;
	color: #000;
}


/* ------------------------------------------------------------------
 Flow
-------------------------------------------------------------------*/
#flow {
	padding: 115px 0 25px;
	background: #fafafa url("../images/pc_title_bg.jpg") no-repeat 0 0;
	background-size: contain;
}
.flowchart {
 display: flex;
 justify-content: center;
	max-width: var(--max-width);
 margin: 210px auto 0;
	column-gap: 5px;
}
.flowchart .chart {
	display: flex;
	flex-direction: column;
	width: 33%;
	padding: 26px 20px 35px;
	background: #fff3e0 url("../images/flow_bg.jpg") no-repeat 0 0;
	background-size: cover;
}
.flowchart .chart p.num {
	position: relative;
	margin: 0 auto;
 color: #fff;
 background-color: #ff7043;
}
.flowchart .chart .chart_hd {
	position: relative;
	margin-bottom: 20px;
}
.flowchart .chart .chart_hd::before {
	content: "▶";
	display: block;
	width: 10px;
	height: 10px;
	font-size: 12px;
	line-height: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	color: #ff7043;
	transform: translate(-50px, -50%);
}

.flowchart .chart h3 {
	text-align: center;
	font-size: 2.0rem;
	margin-bottom: 20px;
}
.flowchart .chart figure {
	margin-bottom: 30px;
}
.flowchart .chart figure+p {
	font-size: 1.4rem;
	line-height: 2;
	letter-spacing: 0.1em;
	text-align: justify;
}

/* ------------------------------------------------------------------
 Job Description
-------------------------------------------------------------------*/
#job_description {
	padding: 100px 0 50px;
}
#job_description .table-wrap {
	max-width: var(--max-width);
	margin: 80px auto 60px;
	padding: 80px;
	background-color: #fff3e0;
}
#job_description .table-wrap table {
	width: 92%;
	margin: 0 auto;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: #fff;
}
#job_description .table-wrap table,
#job_description .table-wrap table th,
#job_description .table-wrap table td {
	border: 1px solid #bdbdbd;
}
#job_description .table-wrap table th,
#job_description .table-wrap table td {
	padding: 20px 26px;
	vertical-align: top;
	text-align: left;
}
#job_description .table-wrap table td {
	font-weight: 400;
}

/* ------------------------------------------------------------------
 Break Point 767px
-------------------------------------------------------------------*/
@media only screen and (max-width: 767px){
	#numbers h2.section-title, 
	#numbers p.section-lead, 
	#benefits h2.section-title {
  margin-bottom: 30px;
 }
/* Slide
---------------------------------------------------*/
 .slick-slider {
  height: 100%;
 }
 #keyvisual {
		top: auto;
  height: auto;
  aspect-ratio: 3 / 4;
 }
 #keyvisual .slide div.bg01 { background-image: url("../images/sp_slide01.jpg"); }
 #keyvisual .slide div.bg02 { background-image: url("../images/sp_slide02.jpg"); }
 #keyvisual .slide div.bg03 { background-image: url("../images/sp_slide03.jpg"); }
 #keyvisual .slide div.bg04 { background-image: url("../images/sp_slide04.jpg"); }
 #keyvisual .slide div.bg05 { background-image: url("../images/sp_slide05.jpg"); }
 #keyvisual .slide div.bg06 { background-image: url("../images/sp_slide06.jpg"); }
 #keyvisual .slide div.bg07 { background-image: url("../images/sp_slide07.jpg"); }
 #keyvisual .slide div.bg08 { background-image: url("../images/sp_slide08.jpg"); }
 #keyvisual .slide div.bg09 { background-image: url("../images/sp_slide09.jpg"); }
 #keyvisual .slide div.bg10 { background-image: url("../images/sp_slide10.jpg"); }
 #keyvisual .slide div.bg11 { background-image: url("../images/sp_slide11.jpg"); }
 #keyvisual .slide div.bg12 { background-image: url("../images/sp_slide12.jpg"); }
	
/* ------------------------------------------------------------------
 TOP Contents
-------------------------------------------------------------------*/
	#top-container {
  height: auto;
  aspect-ratio: 3 / 4;
 }
	#top-container h2 {
  font-size: 4.4vw;
  text-align: center;
		margin: 30px auto auto;
 }
	#top-container p.catchcopy {
  font-size: 8.8vw;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.1em;
		margin: auto auto 60px;
 }
	#top-container .first_meeting {
  margin: 0 auto;
 }
	#top-container .scroll {
  width: 100%;
 }
	#top-container .scroll img {
  display: none;
 }
	#top-container .scroll span {
  display: block;
  width: auto;
  height: auto;
  margin: 0 auto;
  padding-top: 60px;
	}
	#top-container .scroll span::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
  border-width: 0 0 1px 1px;
  background-color: transparent;
  transform: rotate(-45deg) translate(20px, -10px);
  animation: pull_sp 2s infinite;
 }
	
/* ------------------------------------------------------------------
 Thoughts
-------------------------------------------------------------------*/
	#thoughts {
  padding: 40px 0;
		line-height: 2;
  background: #fafafa url(../images/sp_bg01.jpg) no-repeat 0px 0px;
		background-size: cover;
	}
 #thoughts h2 {
  font-size: 5.6vw;
  margin-bottom: 25px;
 }
 #thoughts p:last-child {
  font-size: 5.6vw;
 }
	
/* ------------------------------------------------------------------
 Features
-------------------------------------------------------------------*/
	#features {
  padding: 50px 0;
		background: #fafafa url(../images/sp_bg02.jpg) no-repeat center;
		background-size: cover;
 }
	.features_section {
  margin: 40px auto;
  width: 94%;
 }
	.features_section h3 {
  font-size: 5.6vw;
  padding-bottom: 5px;
 }
	.features_section .col2 {
		display: block;
	}
	.features_section .col2 figure, 
	.features_section .col2 > div {
		width: 100%;
		margin-bottom: 20px;
	}
	.features_section h4 {
  font-size: 5.6vw;
  line-height: 1.8;
		letter-spacing: 0.1em;
		margin-bottom: 1em;
 }
	
/* ------------------------------------------------------------------
 Numbers
-------------------------------------------------------------------*/
	#numbers {
  padding: 40px 0 30px;
 }
	.block-list {
  flex-direction: column;
  width: 94%;
  gap: 10px;
 }
	.block {
  width: 100%;
		position: relative;
		padding: 10px 15px 20px;
 }
	.block h3 {
  text-align: left;
  font-size: 4.6vw;
  margin: 0 0 15px 50px;
 }
	.block h3 em {
  font-size: 6.4vw;
 }
	.block figure.icon {
  width: 35px;
  position: absolute;
  top: 0;
  left: 0;
  margin: 15px 0 0 20px;
 }
	.block p {
  font-size: 100%;
  line-height: 1.8;
  text-align: justify;
 }
	
	#benefits {
  padding: 10px 0 40px;
 }
	#benefits .block {
		flex-grow: 1;
		min-height: 5em;
  padding: 10px 15px;
 }
	#benefits .block h3 {
		margin: 0;
	}
 	
/* ------------------------------------------------------------------
 Candidate
-------------------------------------------------------------------*/
	#candidate {
  padding: 40px 0;
  background: #fafafa url(../images/sp_bg03.jpg) no-repeat center top;
  background-size: cover;
 }
	.candidate_inner {
  width: 94%;
  min-width: auto;
  margin: 30px auto;
  padding: 0 0 20px;
		background-image: linear-gradient(#f8c8ba 0 0), url(../images/sp_bg03.jpg);
 }
 .ideal_container {
  flex-direction: column;
  width: 100%;
 }
 .candidate_img {
  max-height: none;
  margin: 0 -3% 20px;
  mask-image: none;
 }
	.ideal_list {
  width: 94%;
  margin: 0 auto;
 }
	.ideal_list .ideal:last-child {
		margin-bottom: 0;
	}
	.ideal_list .ideal .num {
		flex: 0 0 30px;
	}
	.ideal_list .ideal .num,
	.flowchart .chart p.num {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  font-size: 20px;
  line-height: 28px;
 }
	.ideal_list .ideal h3 {
  font-size: 5.2vw;
  line-height: 1.6;
  margin-bottom: 1em;
 }

/* ------------------------------------------------------------------
 Interview
-------------------------------------------------------------------*/
	#interview {
		padding: 40px 0;
  background: #fafafa url(../images/sp_bg04.jpg) no-repeat center top;
  background-size: cover;
 }
	#interview .staff-list {
  flex-direction: column;
  width: 94%;
  margin: 0 auto;
 }
	.staff-list .staff {
  width: 100%;
  padding: 10px;
		margin-bottom: 20px;
 }
	.staff-list .staff .name span.icon {
  width: 30px;
 }
	.staff-list .staff .name span.initial {
  font-size: 4.2vw;
 }
	
/* ------------------------------------------------------------------
 Flow chart
-------------------------------------------------------------------*/
	#flow {
  padding: 40px 0 0;
  background: #fafafa url(../images/sp_title_bg.jpg) no-repeat 0 0;
  background-size: contain;
 }
	#flow h2.section-title.white {
		margin: 60px auto 80px;
	}
	#flow p.section-lead.white {
  font-size: 4.2vw;
		text-align: center;
  padding: 30px 0 0;
		color: #3d2622;
	}
	.flowchart {
  flex-direction: column;
  width: 92%;
  margin: 40px auto 0;
		position: relative;
 }
	.flowchart .chart {
		width: 100%;
		padding: 20px 15px;
  margin-bottom: 30px;
		position: relative;
 }
 .flowchart .chart::after {
  content: "";
  width: 15px;
  height: 10px;
  background-color: #ff7043;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 20px);
	}
	.flowchart .chart:last-child {
		margin-bottom: 0;
	}
	.flowchart .chart:last-child::after {
		content: none;
	}
	.flowchart .chart .chart_hd {
		width: 30px;
		position: absolute;
		top: 20px;
		left: 20px;
	}
	.flowchart .chart .chart_hd::before {
		content: none;
	}
	.flowchart .chart h3 {
  font-size: 5.6vw;
  line-height: 1.5;
  padding-left: 40px;
  text-align: left;
 }
	.flowchart .chart figure {
  width: 55%;
  margin: 0 auto 20px;
 }
	
/* ------------------------------------------------------------------
 Job Description
-------------------------------------------------------------------*/
	#job_description {
		padding: 40px 0 10px;
	}
	#job_description .table-wrap {
  margin: 40px auto 20px;
  background-color: transparent;
  padding: 0;
 }
	#job_description .table-wrap table {
  border-width: 1px 0 0 0;
 }
	#job_description .table-wrap table th,
	#job_description .table-wrap table td {
  display: block;
  padding: 10px;
		border-top: none;
 }
	#job_description .table-wrap table th {
		padding-bottom: 0;
		border-bottom: none;
	}
	#job_description .table-wrap table td {
		padding-top: 0;
	}

}
@keyframes pull_sp {
  0% { transform: rotate(-45deg) translate(20px, -10px); }
  100% { transform: rotate(-45deg) translate(0px, 10px); }
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}