@charset "UTF-8";

/*=======================================

  こちらにLPページの個別cssを記述してください。

  =======================================*/
/* 注釈 */
.note {
  color: #717171;
  display: block;
}
/* サブアンカー */
.sub-anchor {
  max-width: 1200px;
  padding: 0 20px;
  margin: 0 auto;
}
.sub-anchor-list {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 20px;
  align-items: center;
  justify-content: center;
  margin: 40px auto 0;
}
.sub-anchor-item {
  width: 100%;
  max-width: 212px;
}
.sub-anchor-link {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  border: 1px solid var(--sub-border-color);
  color: var(--btn-color)!important;
  background-color: var(--light-color);
}
@media (hover:hover) {
  .sub-anchor-link:hover {
    color: rgba(34, 34, 34, 0.35)!important;
    background-color: var(--sub-line-color);
  }
}
@media screen and (max-width: 767px) {
  .sub-anchor-item {
    max-width: 140px;
    font-size: 14px;
  }
}
.title-section p{
	text-align: center;
	margin-top: 40px;
}
#main .content{
	background: #FCFCFF;
}
.sec-anchor-item{
	max-width: 230px;
}
@media (max-width:767px) {
	.title-section p{
	text-align: left;
}
	.sec-anchor-list {
        padding: 0;
        grid-gap: 12px;
    }
 .sec-anchor-item{
	max-width: 160px;
}
.sec-anchor-link{
	font-size: 14px;
	text-align: center;
	padding: 10px 0;
	border-radius: 80px;
}
}
@media (max-width: 767px) {
    .title-section p {
        margin-top: 30px;
    }
	.sec-body{
		margin-top: 70px;
	}
}

/*****************************************
美容のプロを目指す
******************************************/
.sec-pro {
	position: relative;
	z-index: 0;
}
@media (max-width:767px) {
  .sec-pro {
	margin-top: 110px;
}
}

.sec-pro::before {
	content: "";
	position: absolute;
	top: 480px;
	right: 0;
	bottom: -480px;
	left: 0;
	z-index: -1;
	background:
		url("/lp/career/img/cnt-bg01.png")
		no-repeat
		center top
		/ cover;
	pointer-events: none;
}
/*******************************
成長のステップ
*******************************/
.step-inner {
	padding: 30px 20px 140px;
}
.step-title {
	position: relative;
	color: #333333;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	letter-spacing: 0.08em;
}
.step-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -13px;
	width: 36px;
	height: 1px;
	background-color: #707070;
	transform: translateX(-50%);
}
.step-body {
	margin-top: 60px;
}
.step-chart {
	position: relative;
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
}
.step-chart-05::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: -100px;
	left: 0;
	z-index: -1;
	background: url("/lp/career/img/cnt-bg02.png") no-repeat center bottom / 100% 100%;
	pointer-events: none;
}
.step-layout {
	display: grid;
	grid-template-columns: minmax(320px, 480px) minmax(280px, 410px);
	align-items: start;
	justify-content: center;
	column-gap: clamp(36px, 5vw, 68px);
}
.step-visual {
	position: relative;
	width: 100%;
}
.step-pyramid {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	aspect-ratio: 480 / 380;
	margin: 0 auto;
	overflow: visible;
}
.step-chart-05 .step-pyramid {
	aspect-ratio: 480 / 450;
}
.step-pyramid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(180deg, #fff2fd 0%, #dce6ff 100%);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.step-pyramid::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.step-chart-03 .step-pyramid::after {
	background-image: linear-gradient(to bottom, transparent calc(40.3% - 1px), rgba(255, 255, 255, 0.8) calc(40.3% - 1px), rgba(255, 255, 255, 0.8) calc(40.3% + 1px), transparent calc(40.3% + 1px), transparent calc(70.15% - 1px), rgba(255, 255, 255, 0.8) calc(70.15% - 1px), rgba(255, 255, 255, 0.8) calc(70.15% + 1px), transparent calc(70.15% + 1px));
}
.step-chart-05 .step-pyramid::after {
	background-image: linear-gradient(to bottom, transparent calc(27.95% - 1px), rgba(255, 255, 255, 0.8) calc(27.95% - 1px), rgba(255, 255, 255, 0.8) calc(27.95% + 1px), transparent calc(27.95% + 1px), transparent calc(45.96% - 1px), rgba(255, 255, 255, 0.8) calc(45.96% - 1px), rgba(255, 255, 255, 0.8) calc(45.96% + 1px), transparent calc(45.96% + 1px), transparent calc(63.98% - 1px), rgba(255, 255, 255, 0.8) calc(63.98% - 1px), rgba(255, 255, 255, 0.8) calc(63.98% + 1px), transparent calc(63.98% + 1px), transparent calc(81.99% - 1px), rgba(255, 255, 255, 0.8) calc(81.99% - 1px), rgba(255, 255, 255, 0.8) calc(81.99% + 1px), transparent calc(81.99% + 1px));
}
.step-stage {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.step-chart-03 .step-stage:first-child {
	flex: 1.35;
}
.step-chart-05 .step-stage:first-child {
	flex: 1.55;
}
.step-chart-03 .step-stage:first-child .step-stage-num,
.step-chart-03 .step-stage:first-child .step-stage-title,
.step-chart-05 .step-stage:first-child .step-stage-num,
.step-chart-05 .step-stage:first-child .step-stage-title {
	transform: translateY(6px);
}
.step-stage-num {
	color: #6f6fca;
	font-size: 12px;
	line-height: 1.5;
}
.step-stage-title {
	margin-top: 2px;
	color: #000000;
	font-size: clamp(15px, 2.0833vw, 17px);
	font-weight: 700;
	line-height: 1.4;
}
.step-chart-05 .step-stage-title {
	font-size: clamp(15px, 1.7708vw, 17px);
	line-height: 1.35;
}
.step-icon-list {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.step-icon-item {
	position: absolute;
	width: clamp(28px, 3.6458vw, 34px);
	height: clamp(44px, 5.7292vw, 54px);
}
.step-icon-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.step-icon-item:nth-child(1)::before {
	background-image: url(/lp/career/img/step-human-01.png);
}
.step-icon-item:nth-child(2)::before,
.step-icon-item:nth-child(3)::before {
	background-image: url(/lp/career/img/step-human-02.png);
}
.step-copy {
	position: relative;
	margin-top: 22px;
	padding: 8px 20px;
	color: #7d79b9;
	font-size: 18px;
	line-height: 1.5;
	text-align: center;
	letter-spacing: 0.08em;
}
.step-copy::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0) 100%);
}
.step-list {
	display: grid;
	width: 100%;
	margin-top: 0;
}
.step-chart-03 .step-list {
	grid-template-rows: 1.65fr 1.15fr 1.15fr;
	height: auto;
	aspect-ratio: 480 / 450;
}
.step-chart-05 .step-list {
	grid-template-rows: 1.85fr 1.15fr 1.15fr 1.15fr 1.15fr;
	height: auto;
	aspect-ratio: 480 / 510;
}
.step-item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: clamp(34px, 4.2vw, 62px);
	text-align: left;
}
.step-chart-03 .step-item:nth-child(1) {
	grid-row: 3;
}
.step-chart-03 .step-item:nth-child(2) {
	grid-row: 2;
}
.step-chart-03 .step-item:nth-child(3) {
	grid-row: 1;
}
.step-chart-05 .step-item:nth-child(1) {
	grid-row: 5;
}
.step-chart-05 .step-item:nth-child(2) {
	grid-row: 4;
}
.step-chart-05 .step-item:nth-child(3) {
	grid-row: 3;
}
.step-chart-05 .step-item:nth-child(4) {
	grid-row: 2;
}
.step-chart-05 .step-item:nth-child(5) {
	grid-row: 1;
}
.step-item::before {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(100% - 20px);
	height: 1px;
	background-image: linear-gradient(to right, #aeb2ef 6px, transparent 6px);
	background-size: 9px 1px;
	background-repeat: repeat-x;
	transform: translateY(-50%);
}
.step-chart-03 .step-item:nth-child(1)::before {
	left: auto;
	width: clamp(40px, 7vw, 108px);
}
.step-chart-03 .step-item:nth-child(2)::before {
	left: auto;
	width: clamp(108px, 11.979vw, 148px);
}
.step-chart-03 .step-item:nth-child(3)::before {
	left: auto;
	width: clamp(138px, 15.104vw, 170px);
}
.step-chart-05 .step-item:nth-child(1)::before {
	left: auto;
	width: clamp(68px, 7.813vw, 98px);
}
.step-chart-05 .step-item:nth-child(2)::before {
	left: auto;
	width: clamp(98px, 10.938vw, 138px);
}
.step-chart-05 .step-item:nth-child(3)::before {
	left: auto;
	width: clamp(128px, 14.063vw, 178px);
}
.step-chart-05 .step-item:nth-child(4)::before {
	left: auto;
	width: clamp(158px, 17.188vw, 200px);
}
.step-chart-05 .step-item:nth-child(5)::before {
	left: auto;
	width: clamp(158px, 20.313vw, 200px);
}
.step-item-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	color: #000000;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}
.step-item-sr,
.step-item-title-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.step-item-text {
	margin-top: 0;
	color: #000000;
	font-size: clamp(14px, 1.458vw, 16px);
	line-height: 1.8;
}

@media (min-width: 768px) {
	.step-chart-03 .step-icon-item:nth-child(1) {
		left: clamp(17%, 2.8646vw, 22%);
		top: 11%;
	}
	.step-chart-03 .step-icon-item:nth-child(2) {
		left: clamp(10%, 1.8229vw, 14%);
		top: 34%;
	}
	.step-chart-03 .step-icon-item:nth-child(3) {
		left: clamp(-6%, -0.651vw, -3%);
		top: 61%;
	}
	.step-chart-05 .step-icon-item:nth-child(1) {
		left: clamp(23%, 3.125vw, 24%);
		top: 11%;
	}
	.step-chart-05 .step-icon-item:nth-child(2) {
		left: clamp(11%, 1.6927vw, 13%);
		top: 40%;
	}
	.step-chart-05 .step-icon-item:nth-child(3) {
		left: clamp(-12%, -2.083vw, -3%);
		top: clamp(68%, 14vw + 35%, 75%);
	}
}
@media (max-width: 767px) {
	.step-inner {
		padding: 25px 20px 30px;
	}
	.step-title {
		font-size: 17px;
	}
	.step-body {
		margin: 48px 0 0;
	}
	.step-chart {
		max-width: 335px;
	}
	.step-layout {
		display: block;
	}
	.step-visual {
		width: 100%;
	}
	.step-pyramid {
		width: 317px;
		aspect-ratio: 300 / 270;
	}
	.step-chart-05 .step-pyramid {
		aspect-ratio: 300 / 330;
	}
	.step-stage-num {
		font-size: 12px;
		line-height: 1.35;
	}
	.step-stage-title {
		margin-top: 0;
		font-size: 13px;
		line-height: 1.4;
	}
	.step-chart-03 .step-stage:first-child .step-stage-num,
	.step-chart-03 .step-stage:first-child .step-stage-title,
	.step-chart-05 .step-stage:first-child .step-stage-num,
	.step-chart-05 .step-stage:first-child .step-stage-title {
		transform: none;
	}
	.step-chart-03 .step-stage:first-child .step-stage-num,
	.step-chart-03 .step-stage:first-child .step-stage-title {
		transform: translateY(8px);
	}
	.step-chart-05 .step-stage:first-child .step-stage-num,
	.step-chart-05 .step-stage:first-child .step-stage-title {
		transform: translateY(10px);
	}
	.step-icon-item {
		width: 26px;
		height: 43px;
	}
	.step-chart-03 .step-icon-item:nth-child(1) {
		left: 53px;
		top: 45px;
	}
	.step-chart-03 .step-icon-item:nth-child(2) {
		left: 28px;
		top: 135px;
	}
	.step-chart-03 .step-icon-item:nth-child(3) {
		left: -15px;
		top: 218px;
	}
	.step-chart-05 .step-icon-item:nth-child(1) {
		left: 50px;
		top: 50px;
	}
	.step-chart-05 .step-icon-item:nth-child(2) {
		left: 40px;
		top: 154px;
	}
	.step-chart-05 .step-icon-item:nth-child(3) {
		left: -10px;
		top: 280px;
	}
	.step-copy {
		margin-top: 12px;
		font-size: 14px;
	}
	.step-list {
		display: block;
		width: 100%;
		margin: 50px 0;
		aspect-ratio: auto;
	}
	.step-item {
		display: block;
		padding-left: 0;
	}
	.step-item::before {
		display: none;
	}
	.step-item + .step-item {
		margin-top: 34px;
	}
	.step-chart-03 .step-item-title {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
		border: 0;
	}
	.step-chart-03 .step-item-sr {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
	.step-item-text {
		margin-top: 10px;
		font-size: 15px;
	}
}
/* キャリア例 */
.career-inner.cnt {
	max-width: 1120px;
	padding: 34px 27px 39px;
	text-align: center;
}
.career-title {
	color: var(--text-color);
	font-size: 21px;
	font-weight: normal;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-align: center;
}
.career-box {
	margin-top: 29px;
	padding: 60px 126px 57px;
	background-color: #ffffff;
}
.career-profile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
}
.career-profile::before {
	content: "";
	width: 68px;
	height: 82px;
	margin-right: 29px;
}
.sec-pro .career-profile::before {
	background: url(/lp/career/img/career-person01.png) no-repeat center / contain;
}
.sec-management .career-profile::before {
	background: url(/lp/career/img/career-person02.png) no-repeat center / contain;
}
.career-profile-text {
	color: var(--text-color);
	font-size: 17px;
	font-weight: normal;
	line-height: 1.85;
	text-align: left;
	letter-spacing: 0.04em;
}
.career-list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 58px;
	margin-top: 55px;
	text-align: left;
}
.career-list::before {
	content: "";
	position: absolute;
	top: 0;
	left: 6px;
	right: 0;
	height: 1px;
	background-color: #8f8f8f;
}
.career-item {
	position: relative;
	padding-top: 28px;
}
.career-item::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background-color: #c9cdf1;
}
.career-year {
	color: var(--text-color);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
}
.career-text {
	margin-top: 7px;
	color: var(--text-color);
	font-size: 15px;
	font-weight: normal;
	line-height: 1.65;
	letter-spacing: 0.04em;
}
@media (max-width: 767px) {
	.career-inner.cnt {
		padding: 8px 20px 31px;
	}
	.career-title {
		font-size: 20px;
	}
	.career-box {
		margin-top: 22px;
		padding: 34px 25px 37px;
	}
	.career-profile {
		justify-content: flex-start;
		min-height: 78px;
	}
	.career-profile::before {
		flex: 0 0 50px;
		width: 50px;
		height: 60px;
		margin-right: 16px;
	}
	.career-profile-text {
		font-size: 16px;
		line-height: 1.65;
	}
	.career-list {
		display: block;
		margin-top: 27px;
		padding-left: 19px;
	}
	.career-list::before {
		top: 5px;
		left: 0;
		right: auto;
		width: 1px;
		height: calc(100% - 6px);
	}
	.career-item {
		padding: 0 0 26px 20px;
	}
	.career-item:last-child {
		padding-bottom: 0;
	}
	.career-item::before {
		top: 4px;
		left: -24px;
	}
	.career-year {
		font-size: 16px;
	}
	.career-text {
		margin-top: 8px;
		font-size: 15px;
		line-height: 1.75;
	}
}
/* 職種紹介 */
.job-inner.cnt {
	padding: 0 20px;
	text-align: left;
}
.job-list {
	max-width: 1040px;
	margin: 60px auto;
}
.job-item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(220px, 300px) clamp(0px, calc((100vw - 768px) * 0.45), 120px) 1fr;
	column-gap: 40px;
	align-items: start;
	padding: 27px 0 46px;
}
.job-item::after {
	content: "";
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	justify-self: start;
	width: clamp(70px, calc(120px - ((1040px - 100vw) * 0.25)), 100px);
	height: 1px;
	margin-top: 12px;
	background-color: #9b9b9b;
	transform: translateX(clamp(-46px, calc(11px - ((1040px - 100vw) * 0.2)), 11px));
}
.job-trigger {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	width: 100%;
	border: none;
	background: transparent;
	color: #333333;
	font-size: clamp(20px, 2.3vw, 24px);
	font-weight: normal;
	line-height: 1.5;
	text-align: left;
	white-space: nowrap;
	cursor: text;
	pointer-events: none;
	overflow: visible;
}
.job-trigger::after {
	content: none;
}
.job-panel {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
	text-align: left;
}
.job-text {
	color: #333333;
	font-size: 16px;
	font-weight: normal;
	line-height: 1.65;
	letter-spacing: 0.06em;
}
.job-text span {
	display: block;
	margin-top: 24px;
	font-size: 14px;
}
@media (max-width: 767px) {
	.job-inner.cnt {
		padding: 0 7px;
	}
	.job-list {
		max-width: none;
	}
	.job-item {
		position: relative;
		display: block;
		padding: 0;
		border-bottom: 1px solid #707070;
	}
	.job-item::after {
		content: none;
	}
	.job-trigger {
		position: relative;
		z-index: 2;
		display: block;
		width: 100%;
		padding: 17px 40px 17px 14px;
		font-size: 16px;
		font-weight: bold;
		line-height: 1.4;
		white-space: normal;
		cursor: pointer;
		pointer-events: auto;
	}
	.job-trigger::before,
	.job-trigger::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 14px;
		width: 18px;
		height: 1px;
		margin: 0;
		background-color: #000;
	}
	.job-trigger::before {
		transform: translateY(-50%) rotate(90deg);
	}
	.job-trigger::after {
		transform: translateY(-50%);
	}
	.job-item.is-open .job-trigger::before {
		opacity: 0;
	}
	.job-panel {
		position: relative;
		z-index: 2;
		display: none;
		padding: 0 14px 23px;
	}
	.job-item.is-open .job-panel {
		display: block;
	}
	.job-text {
		font-size: 15px;
		line-height: 1.75;
		letter-spacing: 0.04em;
	}
}
/* マネジメントの道を目指す */
.sec-management {
	position: relative;
	z-index: 0;
}
.sec-management::before {
	content: "";
	position: absolute;
	top: 860px;
	right: 0;
	left: 0;
	height: calc(100% - 860px + 100px);
	z-index: -1;
	background:
		url("/lp/career/img/cnt-bg03.png")
		no-repeat
		center top
		/ 100% 100%;
	pointer-events: none;
}
@media (max-width:767px) {
	.sec-management {
	margin-top: 110px;
}
#management .step-list{
	display: none;
}
}
/*****************************************
注目コンテンツ
******************************************/
.sec-attention{
  position: relative;
  z-index: 1;
  margin-top: 190px;
}
.inv-more-wrap{
	padding-bottom: 2px;
}
@media (max-width: 1000px) {
	.inv-list-lp {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
		max-width: 100%;
	}
	.inv-list-lp .inv-item {
		flex: initial;
	}
	.inv-list-lp .inv-name {
		max-width: 260px;
        margin: 20px auto 0;
	}
}
@media (max-width: 767px) {
	.sec-attention{
  margin-top: 120px;
}
	.inv-list-lp .inv-item {
		width: 100%;
	}
	.inv-list-lp .inv-card {
		width: 100%;
	}
	.inv-list-lp .inv-photo img {
		width: 100%;
		max-width: 100%;
	}
	.inv-list-lp .inv-txt {
		width: 100%;
		max-width: 100%;
	}
	.inv-list-lp .inv-job {
		margin-top: clamp(10px, 2.6vw, 14px);
		font-size: clamp(12px, 2.9vw, 16px);
	}
	.inv-list-lp .inv-name {
		margin-top: clamp(4px, 1.6vw, 6px);
		padding-bottom: clamp(10px, 3vw, 12px);
		font-size: clamp(16px, 3.5vw, 20px);
	}
	.inv-list-lp .inv-year {
		margin-top: clamp(10px, 3vw, 12px);
		font-size: clamp(15px, 3.2vw, 18px);
	}
	.inv-list-lp .inv-more-wrap {
		margin-top: clamp(10px, 2.6vw, 14px);
	}
	.inv-list-lp .inv-more {
		max-width: 100%;
		padding: 12px 10px;
		font-size: clamp(16px, 3.2vw, 18px);
	}
}