@charset "UTF-8";

/* ========================================
	style
======================================== */

.anime-wrap {
  display: inline-block;
  overflow: hidden;
}

.anime-wrap span {
  display: inline-block;
	opacity: 0;
}

/* --------- イントロダクション --------- */

.message {
	clip-path: var(--square-bottom-right-down);
}

.message__container {
	margin-top: -35.5vw;
	position: relative;
	overflow: hidden;
	padding-block: clamp(22rem, 6.6272rem + 40.99vw, 55rem) clamp(22rem, 6.6272rem + 40.99vw, 55rem);
}

.message :is(.custom-shape-top, .custom-shape-bottom) {
	clip-path: var(--triangle-left);
	aspect-ratio: var(--triangle-ratio);
	position: absolute;
	right: 0;
}

.message .custom-shape-top {
	inline-size: 80%;
	top: 0;
	background: var(--filter-image-url) var(--filter-image-option),
		url('images/recruit01.jpg') no-repeat right top /cover;
}

.message .custom-shape-bottom {
	inline-size: 85%;
	bottom: 0;
	background: var(--filter-image-url) var(--filter-image-option),
		url('images/recruit02.jpg') no-repeat right top /cover;
}


.message__title {
  position: relative;
  font-size: min(1rem + 4vw, 4.2rem);
  font-weight: 700;
  line-height: 1.7;
  margin-top: -3vw;
}

.u-line {
	position: relative;
  display: inline-block;
}

.u-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 20%;
  width:  0%;
  height: 3px;
  background-color: var(--nawa-green);
  z-index: 0;
	transition: width 0.4s ease;
}

.u-line.appear::after {
  width: 100%;
}

.message__sub-title {
	font-size: clamp(1.6rem, 0.8368rem + 2.04vw, 2.4rem);
	font-weight: 700;
	line-height: 2;
	margin-top: 4rem;
}

.message__copy {
	font-size: 1.4rem;
	font-weight: 500;
	margin-top: 2rem;
}

.message__copy>p:not(:first-child) {
	margin-top: 2em;
}

/* --------- セクション共通設定 --------- */

.section-title {
	text-align: center;
}

.section-title--en {
	display: block;
	font: 400 4rem var(--font-family-en);
}

.section-title--ja {
	display: block;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--text-second-color);
}

/* --------- BENEFITS SECTION --------- */

.benefits {
	clip-path: polygon(0 0, 100% var(--slope), 100% calc(100% - var(--slope)), 0 100%);
	padding-block: clamp(15rem, 4.2864rem + 28.57vw, 38rem) clamp(18rem, 5.4224rem + 33.54vw, 45rem);
	margin-top: -29vw;
	position: relative;
	overflow: hidden;
}

.benefits :is(.custom-shape-top, .custom-shape-bottom) {
	aspect-ratio: var(--triangle-ratio);
	position: absolute;
	left: 0;
}

.benefits .custom-shape-top {
	clip-path: var(--triangle-left);
	transform: scaleX(-1);
	inline-size: 48%;
	top: 0;
	background: var(--filter-image-url) var(--filter-image-option),
		url('images/benefits01.jpg') no-repeat left top /cover;
}

.benefits .custom-shape-bottom {
	clip-path: var(--triangle-right);
	inline-size: 60%;
	bottom: 0;
	background: var(--filter-image-url) var(--filter-image-option),
		url('images/benefits02.jpg') no-repeat left top /cover;
}

.benefits-copy {
	font-size: 1.4rem;
	font-weight: 700;
}

.benefits-copy>p:not(:first-child) {
	margin-top: 0.8em;
}

.text-marker {
	/* background: linear-gradient(transparent 45%, #ffff65 45%); */
	border-bottom: 3px solid var(--nawa-green);
	padding-bottom: 0.2rem;
}

.white__note {
	margin-top: 3rem;
}

.benefits__list {
	margin-top: 13vw;
}

.benefits__list>li {
	--index-size: 45px;
	padding-top: calc(var(--index-size) * sqrt(2) / 2);
	counter-increment: benefits-index;
}

.benefits__header {
	--triangle-size: 23px;
	border: 1px solid var(--nawa-green);
	background: linear-gradient(45deg, var(--nawa-green) var(--triangle-size), #fff var(--triangle-size), #fff calc(100% - var(--triangle-size)), var(--nawa-green) calc(100% - var(--triangle-size)));
	min-block-size: 120px;
	position: relative;
}

.benefits__index {
	display: block;
	inline-size: var(--index-size);
	aspect-ratio: 1 / 1;
	position: absolute;
	left: 0;
	top: 0;
	transform: rotate(45deg) translateY(calc(-50% * sqrt(2)));
	background: var(--nawa-green);
	text-align: center;
	box-shadow: 7px 7px 0px 0px #ffff65;
}

.benefits__index::before {
	content: counter(benefits-index);
	display: block;
	font: 400 3.2rem var(--font-family-en);
	color: #fff;
	position: absolute;
	inset: 0;
	transform: rotate(-45deg);
	display: grid;
	place-items: center;
}

.benefits__title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--nawa-green);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-align: center;
}

.benefits__text {
	font-size: 1.2rem;
	font-weight: 500;
	margin-top: 1em;
}

/* --------- ENTRY SECTION --------- */

.entry {
	margin-top: -29vw;
	clip-path: var(--square-top-right-up);
	padding-top: clamp(18rem, 5.4224rem + 33.54vw, 45rem);
	position: relative;
	overflow: hidden;
}

.entry .custom-shape {
	aspect-ratio: var(--triangle-ratio);
	position: absolute;
	top: 0;
	right: 0;
	clip-path: var(--triangle-left);
	inline-size: 62%;
	background: var(--filter-image-url) var(--filter-image-option),
		url('images/entry.jpg') no-repeat left top /cover;
}

.entry__list {
	max-inline-size: 1000px;
	margin-inline: auto;
}

.entry__list>li {
	counter-increment: entry-index;
}

.entry__list>li>a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--text-base);
	padding: 2.6rem 1em 2.6rem 4.4rem;
	border-bottom: 1px solid #989898;
	position: relative;
	transition: color 0.3s ease;
}

.entry__list>li:first-child>a {
	border-top: 1px solid #989898;
}

.entry__list>li>a::before {
	content: counter(entry-index, decimal-leading-zero);
	font: 400 2.4rem/1 var(--font-family-en);
	color: var(--nawa-green);
	position: absolute;
	left: 3px;
	top: 0.5em;
}

.entry__text {
	font-size: 1.4rem;
	font-weight: 600;
	transition: transform 0.3s ease;
}

.entry__text>span {
	display: block;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 2.25;
}

.entry__list svg {
	inline-size: 14px;
	block-size: 14px;
}

/* ========================================
	1180px未満専用スタイル（TAB&SP）
======================================== */
@media screen and (width < 1180px) {}

/* ========================================
	1024px未満専用スタイル（TAB）
======================================== */
@media screen and (width < 1024px) {}

/* ========================================
	768px未満専用スタイル（SP）
======================================== */
@media screen and (width < 768px) {

	/* --------- BENEFITS SECTION --------- */

	.text-marker {
		border-bottom: 2px solid var(--nawa-green);
	}

	.kenko-logo {
		inline-size: 50%;
		margin: 1rem auto 0;
	}

	.benefits__list {
		padding-inline: 8%;
	}	

	.benefits__list>li:not(:first-child) {
		margin-top: 2.4rem;
	}

}

/* ========================================
	768px以上（PC&TAB）
======================================== */
@media screen and (768px <=width) {

	/* --------- イントロダクション --------- */

	.message__title {
		font-size: clamp(4rem, 1.9024rem + 2.73vw, 6rem);
		line-height: 1.7;
		text-underline-offset: 14px;
	}

	.u-line::after {
		height: 4px;
	}

	.message__sub-title {
		font-size: clamp(2.2rem, 1.1504rem + 1.37vw, 3.2rem);
		line-height: 1.45;
		margin-top: 7.5rem;
	}

	.message__copy {
		font-size: 1.6rem;
		margin-top: 5rem;
	}

	/* --------- セクション共通設定 --------- */

	.section-title--en {
		font-size: 7rem;
	}

	.section-title--ja {
		font-size: 2rem;
	}

	/* --------- BENEFITS SECTION --------- */

	.benefits-copy-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		max-inline-size: 1000px;
		margin-inline: auto;
		gap: 4rem;
	}

	.benefits-copy {
		flex: 1;
		font-size: 1.6rem;
		line-height: 2.1;
	}

	.kenko-logo {
		max-inline-size: 200px;
		flex-shrink: 0;
	}

	.white__note {
		max-inline-size: 1000px;
		margin-inline: auto;
	}

	.benefits__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4.5rem 5%;
		margin-top: 10rem;
	}

	.benefits__list>li {
		--index-size: 68px;
		inline-size: 300px;
	}

	.benefits__header {
		min-block-size: 185px;
	}

	.benefits__index::before {
		font-size: 4rem;
	}

	.benefits__title {
		font-size: 2.2rem;
	}

	.benefits__text {
		font-size: 1.4rem;
	}

	/* --------- ENTRY SECTION --------- */

	.entry__list {
		margin-top: 10rem;
	}

	.entry__list>li>a {
		padding: 3.4rem 3rem 3.4rem 6rem;
	}

	.entry__list>li>a::before {
		top: 0.5em;
	}

	.entry__text {
		display: flex;
		align-items: center;
		gap: 0 0.75em;
		font-size: 1.6rem;
	}

	.entry__text>span {
		display: inline-block;
		font-size: 2.4rem;
	}

}

/* ========================================
	マウスポインタ専用
======================================== */
@media (hover:hover) and (pointer: fine) {

	/* --------- ENTRY SECTION --------- */

	.entry__list>li>a:hover {
		color: var(--nawa-green);
	}

	.entry__list>li>a:hover .entry__text {
		transform: translateX(4px);
	}

}

/* ========================================
	768px以上1180px未満専用スタイル（TAB）
======================================== */
@media screen and (768px <=width < 1180px) {}

/* ========================================
	1180px以上専用スタイル（PC）
======================================== */
@media print,
screen and (1180px <=width) {

	/* --------- イントロダクション --------- */

	.message__container {
		padding-block: clamp(50rem, -3.6368rem + 45.45vw, 110rem) clamp(50rem, 3.5152rem + 35.39vw, 102rem);
	}

	.message .custom-shape-top {
		inline-size: 77%;
	}

	.message .custom-shape-bottom {
		inline-size: 80%;
	}

	/* --------- BENEFITS SECTION --------- */

	.benefits {
		padding-block: clamp(35rem, 8.1824rem + 22.73vw, 65rem) clamp(45rem, 9.2432rem + 30.3vw, 85rem);
	}

	.benefits-copy-wrap {
		gap: 8rem;
	}

	.benefits-copy {
		font-size: 1.8rem;
		line-height: 2.3;
	}

	/* --------- ENTRY SECTION --------- */

	.entry {
		padding-top: clamp(42rem, 3.56rem + 32.58vw, 85rem);
	}

	.entry .custom-shape {
		inline-size: 62%;
	}
	
}