@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');

/* common */
main {
	overflow: hidden;
}
section {
	position: relative;
}
section p {
	margin-bottom: 0 !important;
}
.sections h1 {
	font-size: 80px !important;
	font-weight: 700 !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
	gap: 40px;
	line-height: 1 !important;
	position: absolute;
	top: -.5em;
	left: 0;
	@media screen and (max-width: 834px) {
		left: 16px;
	}
	@media screen and (max-width: 600px) {
		font-size: 55px !important;
		flex-direction: column;
		gap: 8px;
		align-items: flex-start;
		left: -16px !important;
	}
}
.sections h1 span:first-child {
	font-style: italic;
}
.sections h1 span:last-child {
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: .1em;
	color: #fff;
	background: var(--hb-black-color);
	padding: .4em .6em;
}
.sections h2 {
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 40px !important;
}
.sections h2::after,
.sections h2 span::before{
	display: none;
}
.sections h2 span {
	padding: 0;
}
.serif.heading {
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 0;
	@media screen and (max-width: 600px) {
		font-size: 1.6rem !important;
	}
}
.sections section {
	padding: 120px 0 0;
	width: 100%;
	max-width: 1200px;
	margin: auto;
	display: flex;
	flex-direction: column;
	gap: 80px;
	position: relative;
	@media screen and (max-width: 834px) {
		padding: 120px 40px 0;
	}
	@media screen and (max-width: 600px) {
		gap: 60px;
		padding: 120px 0 0;
	}
}
.sections ul {
	padding: 0 !important;
}
.shadow {
    filter: drop-shadow(0px 0px 10px rgb(0 0 0 / 50%));
}
ul.interview-list .title {
	font-size: 1.6em;
	@media screen and (max-width: 834px) {
		font-size: 1.2rem;
	}
}

/* buttons */
section.feature .wp-block-buttons,
section.interview .wp-block-buttons{
	position: absolute;
	right: 20px;
	top: 20px;
	@media screen and (max-width: 1240px) {
		right: 40px;
	}
	@media screen and (max-width: 834px) {
		right: 16px;
		top: -30px;
	}
	@media screen and (max-width: 380px) {
		right: 16px;
		top: 40px;
	}
}

/* bg */
section.appeal::before,
.bg-white::before,
.bg-blue::before{
	content: "";
	display: block;
	background-image: url("/saiyo/wp-content/uploads/2024/02/background_section.jpg");
	background-size: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: .9;
    z-index: -1;
}
section.appeal::before {
	height: calc(100% + 25px);
	@media screen and (max-width: 1024px) {
		height: 100%;
	}
	@media screen and (max-width: 600px) {
		height: calc(100% + 40lvh);
		z-index: -2;
	}
	@media screen and (max-width: 380px) {
		height: calc(100% + 100lvh);
		z-index: -2;
	}
}
.bg-white::before,
.bg-blue::before{
	background: #fff;
	opacity: .85;
	width: 100vw;
	height: calc(100% + 340px);
	margin: 0 calc(50% - 50vw);
	top: -180px;
}
.bg-blue::before {
	background: rgb(var(--hb-main-color));
	top: 0;
	@media screen and (max-width: 1024px) {
		background: var(--hb-text-color);
	}
}
.bg-white,.bg-blue {
	display: flex;
	flex-direction: column;
	gap: 180px;
	@media screen and (max-width: 600px) {
		gap: 100px;
	}
}
.bg-blue {
	padding-top: 160px;
	@media screen and (max-width: 600px) {
		padding-top: 100px;
	}
}

/* jumbotron */

.jumbotron {
	position: relative;
	margin: 0 -40px !important;
	@media screen and (max-width: 834px) {
		margin-right: -16px !important;
		margin-left: -16px !important;
	}
	@media screen and (max-width: 600px) {
		display: flex;
		height: 100svh;
		flex-direction: column;
	}
}
.jumbotron::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, var(--hb-light-color) 50%, transparent 50%);
	background-position: 100% 100%;
	background-size: 200% 100%;
	position: absolute;
	top: -25px;
	left: 0;
	z-index: 0;
	animation: bgExpandAnime 1.5s 1s forwards;
	@media screen and (max-width: 600px) {
		z-index: 2;
		top: 0;
	}
}
p.marquee {
	display: flex;
	margin: 0 !important;
	position: absolute;
	bottom: -80px;
    display: none;
}
span.flowing-text {
	display: flex;
	white-space: nowrap;
}
span.flowing-text::before,
span.flowing-text::after{
	content: "HIBINO INDUSTRY RECRUITMENT";
	font-size: 160px;
	font-family: Lato;
	font-style: italic;
	font-weight: 900;
	z-index: 1;
	line-height: 1;
	color: rgb(var(--hb-main-color));
	color: #000;
	flex: 1;
	mix-blend-mode:overlay;
}
span.flowing-text::before {
	animation: TextMarquee 100s -50s linear infinite;
}
span.flowing-text::after {
	animation: TextMarquee2 100s linear infinite;
}
@keyframes TextMarquee {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(calc(-100% - 1em));
	}
}
@keyframes TextMarquee2 {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-200% - 1em));
	}
}
.jumbotron .wp-block-cover {
	height: calc(100lvh - 127px);
	max-height: 800px;
	margin-bottom: 0 !important;
	@media screen and (max-width: 1024px) {
		aspect-ratio: 5/3;
		height: auto !important;
		width: 100%;
		max-height: calc(100lvh - 120px);
	}
	@media screen and (max-width: 600px) {
		flex: 1;
		align-items: flex-start;
		max-height: unset;
		min-height: unset;
		padding: 0;
		overflow: visible;
	}
}
.jumbotron .wp-block-cover::before {
	content: "";
	display: block;
	width: 100%;
	height: 100lvh;
	position: fixed;
	z-index: -3;
	top: 0;
	left: 0;
	background-image: url("https://hibino-jpn.co.jp/saiyo/wp-content/uploads/2025/03/recruit_mv.jpg");
	background-size: cover;
	background-position: top 0% right 40%;
	opacity: 0;
	animation: fadeIn 0s 1.75s forwards;
	@media screen and (max-width: 1024px) {
		aspect-ratio: 5/3;
		height: auto !important;
		position: absolute;
		max-height: calc(100lvh - 80px);
	}
	@media screen and (max-width: 600px) {
		position: relative;
		width: 100%;
		top: 50px;
		height: calc(100% + 10px) !important;
		aspect-ratio: unset;
		z-index: 1;
		background-position: top 0% right 55.5% !Important;
	}
	@media screen and (max-width: 380px) {
		height: calc(100% - 30px) !important;
	}
}
.jumbotron .wp-block-cover::after{
	content: "";
	background: linear-gradient(to bottom, transparent, #fff);
	display: block;
	width: auto;
	height: 100%;
	position: fixed;
	right: 0;
	bottom: 0;
	clip-path: polygon(100% 20%, 0% 100%, 100% 100%);
	z-index: -1;
	opacity: .4;
	aspect-ratio: 2/5;
	@media screen and (max-width: 600px) {
		width: 100%;
		height: 35%;
		aspect-ratio: 1;
		position: absolute;
		bottom: -60px;
		opacity: 1;
		z-index: 1;
		clip-path: polygon(0 34%, 100% 0, 100% 100%, 0% 100%);
		background: linear-gradient(to top, transparent, #eee 100%);
		mix-blend-mode: luminosity;
	}
	@media screen and (max-width: 380px) {
		min-height: 100px;
		bottom: 0;
	}
}
.jumbotron .wp-block-cover img {
	border-radius: 0 !important;
	position: fixed;
	z-index: -3;
	display: none;
}
.jumbotron .news-box {
	position: absolute;
	bottom: -75px;
	right: 0px;
	z-index: 1;
	color: #fff;
	font-size: .8rem;
	line-height: 2em;
	width: 100%;
	height: 200px;
	@media screen and (max-width: 1024px) {
		max-width: unset;
		right: unset;
		right: 0;
		bottom: -40px;
		margin: 0 !important;
		height: auto;
	}
	@media screen and (max-width: 1023px) {
		bottom: -20px;
		width: 95%;
	}
	@media screen and (max-width: 600px) {
		position: relative;
		flex-direction: column;
		align-items: flex-start;
		bottom: 0;
		gap: 20px;
		padding-bottom: 40px;
		flex-shrink: 0;
		width: 100%;
	}
	@media screen and (max-width: 380px) {
		padding-bottom: 10px;
		gap: 10px;
	}
}
.jumbotron .news-box-inner {
	background: #fff;
	font-weight: 500;
	padding: .5em 0 .5em 2em;
	margin-top: .5em;
	border-radius: 100px 0 0 100px!important;
	flex: 1;
	max-width: 500px;
    gap: 1.5rem;
	@media screen and (max-width: 380px) {
		border-radius: 0;
		padding: .5em 0 .5em 3em;
	}
}
.jumbotron .news-box-inner .title{
	flex-basis: 70px;
	flex-grow: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}
.jumbotron .news-box-inner .title::before,
.jumbotron .news-box-inner .title::after{
	content: "";
	display: block;
	background: rgb(var(--hb-main-color));
	position: relative;
}
.jumbotron .news-box-inner .title::before {
	width: .6em;
	height: .6em;
	border-radius: 100%;
}
.jumbotron .news-box-inner .title::after {
	width: 1px;
	height: 1em;
	left: 10px;
	opacity: .5;
}
.jumbotron .news-box-inner .contents {
	flex: 1 !important;
	font-weight: 600;
	overflow: hidden;
	position: relative;
}
.jumbotron .news-box-inner .contents p {
	animation: marquee 8s linear infinite;
	position: absolute;
	white-space: nowrap;
	padding-left: 100%;
}
@keyframes marquee {
    0% { left: 100%; transform: translate(0); }
    33% { left: 0; transform: translate(0); }
	66% { left: 0; transform: translate(0); }
	100% { left: 0; transform: translate(-100%); }
}
@keyframes marquee {
	0% { transform: translateX(0%); }
	100% { transform: translateX(-100%); }
}
.jumbotron .news-box .mv-ttl {
	font-size: 150px !important;
	font-family: Cormorant Garamond;
	font-weight: 700;
	font-style: italic;
	margin: 0;
	line-height: 1;
	color: rgb(var(--hb-main-color));
	opacity: .8;
	@media screen and (max-width: 1024px) {
		font-size: 80px !important;
	}
	@media screen and (max-width: 1023px) {
		position: absolute;
		top: -87px;
		left: -4%;
		font-size: 130px !important;
		z-index: -1;
		opacity: .6;
	}
	@media screen and (max-width: 600px) {
		position: relative;
		top: 0;
		left: -2%;
		font-size: 115px !important;
		color: #fff;
		opacity: 1;
	}
	@media screen and (max-width: 380px) {
		font-size: 40px !important;
		order: 2;
	}
}
.jumbotron .news-box .mv-subttl {
	font-size: 1.2rem;
	font-family: Noto Serif JP;
	background: rgb(var(--hb-main-color));
	padding: .2em .4em;
	@media screen and (max-width: 600px) {
		position: absolute;
	}
	@media screen and (max-width: 380px) {
		font-size: 1rem;
		position: relative;
		flex-shrink: 0;
	}
}
.slogan{
	line-height: 1.5;
	color: var(--hb-red-color);
	font-family: "Hina Mincho", serif;
	width: 45%;
	position: relative;
	margin-left: auto;
	padding-right: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
    white-space: nowrap;
	opacity: 0;
	animation: fadeInSlogan .5s 2s ease-in-out forwards;
}
p strong {
  font-weight: 700 !important;
}

/* sections */
.sections {
	display: flex;
	flex-direction: column;
	gap: 160px;
	@media screen and (max-width: 600px) {
		gap: 60px;
	}
}
section.appeal {
	padding: 100px 80px;
	width: 100vw;
	margin: 0 calc(50% - 50vw) 180px !important;
	position: relative;
	z-index: 0;
	@media screen and (max-width: 600px) {
		padding: 0 16px 40px;
		margin-bottom: 100px !important;
	}
}
section.appeal .container {
	width: 100%;
	max-width: 1200px;
	margin: auto;
	@media screen and (max-width: 600px) {
		display: flex;
		flex-direction: column;
		gap: 60px;
		padding: 60px 0;
	}
}
section.appeal h1 {
	margin-bottom: 60px !important;
	position: relative;
	white-space: nowrap;
	@media screen and (max-width: 1024px) {
		font-size: 2rem !important;
	}
	@media screen and (max-width: 600px) {
		white-space: normal;
		font-size: 1.4rem !important;
	}
}
section.appeal h1::after {
	content: "";
	display: block;
	width: 100vw;
	height: 30px;
	border-bottom: thin solid rgb(var(--hb-main-color));
	opacity: .5;
	position: absolute;
	right: calc(0px - (100vw - 1200px)/2);
	bottom: -25px;
    z-index: -1;
	@media screen and (max-width: 1024px) {
		right: 0;
	}
}
section.appeal .has-media-on-the-right h1::after {
	left: calc(0px - (100vw - 1200px)/2);
	@media screen and (max-width: 1024px) {
		left: 0;
	}
}
section.appeal h1 span:not(.space) {
	font-size: inherit;
	color: rgb(var(--hb-main-color));
}
section.appeal h1 .space {
	padding-right: 1em;
}
section.appeal .wp-block-media-text {
	grid-template-columns: auto 1fr;
	position: relative;
	@media screen and (max-width: 1024px) {
		padding: 40px 0;
	}
	@media screen and (max-width: 600px) {
		gap: 40px;
		padding: 0;
	}
}
section.appeal .wp-block-media-text.has-media-on-the-right {
	grid-template-columns: 1fr auto;
}
section.appeal .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	padding: 120px 0;
	@media screen and (max-width: 1024px) {
		width: calc(100% - 320px);
		padding: 0;
	}
	@media screen and (max-width: 600px) {
		width: 100%;
		padding: 0 16px !important;
	}
}
section.appeal .wp-block-media-text__content {
	@media screen and (max-width: 600px) {
		padding: 0 16px !important;
	}
}
section.appeal .message01 .wp-block-media-text__content {
	padding-top: 80px;
	@media screen and (max-width: 1024px) {
		padding-top: 0;
	}
}
section.appeal .message01 figure{
	width: auto;
	max-width: 510px;
	aspect-ratio: 2/1;
	@media screen and (max-width: 1024px) {
		position: absolute !important;
		right: -80px;
		z-index: -1;
		width: 400px;
		min-height: unset !important;
	}
	@media screen and (max-width: 600px) {
		position: relative !important;
		right: unset;
		width: 100%;
	}
}
section.appeal .message01 figure img {
	height: auto !important;
	padding-top: 80px;
	@media screen and (max-width: 1024px) {
		padding-top: 0;
	}
	@media screen and (max-width: 834px) {
		bottom: 60px;
		height: calc(100% - 220px) !important;
		object-fit: cover !important;
	}
	@media screen and (max-width: 600px) {
		position: relative !important;
		bottom: 0;
		height: 100% !important;
	}
}
section.appeal .message02 {
	display: flex;
	justify-content: flex-end;
	@media screen and (max-width: 600px) {
		flex-direction: column;
	}
}
section.appeal .message02 figure{
	flex: 1;
	@media screen and (max-width: 1024px) {
		flex: unset;
	}
	@media screen and (max-width: 600px) {
		width: 60%;
		margin-bottom: 0 !important;
	}
}
section.appeal .message03 figure{
	width: 600px;
	@media screen and (max-width: 1024px) {
		position: absolute !important;
		right: -80px;
		top: 0;
		z-index: -1;
		width: 400px;
	}
	@media screen and (max-width: 834px) {
		height: 100%;
	}
	@media screen and (max-width: 600px) {
		position: relative !important;
		right: unset;
		width: 100%;
	}
}
section.appeal .message03 figure img {
	@media screen and (max-width: 834px) {
		position: absolute;
		bottom: 40px;
		height: calc(100% - 200px);
		object-fit: cover;
		object-position: top 85% left 50%;
	}
	@media screen and (max-width: 600px) {
		position: relative !important;
		bottom: 0;
		height: 100% !important;
	}
}
section.feature {
	background: rgb(var(--hb-sub-color),25%);
	backdrop-filter: blur(10px);
	padding: 80px;
	@media screen and (max-width: 1240px) {
		padding: 100px 80px;
	}
	@media screen and (max-width: 834px) {
		padding: 100px 40px 80px;
		margin-right: -16px !important;
	}
	@media screen and (max-width: 600px) {
		width: 100vw;
		margin: calc(50% - 50vw) !important;
		left: 16px;
		padding: 100px 16px 60px 20px;
	}
}
section.feature .flex {
	@media screen and (max-width: 1240px) {
		gap: 40px;
		flex-direction: column;
	}
	@media screen and (max-width: 834px) {
		gap: 80px;
	}
	@media screen and (max-width: 600px) {
		gap: 40px;
	}
}
section.feature ul {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
    flex-shrink: 0;
	gap: 20px;
	counter-reset: list;
	padding-top: 60px;
	@media screen and (max-width: 1240px) {
		order: 2;
	}
	@media screen and (max-width: 834px) {
		padding: 0;
	}
	@media screen and (max-width: 600px) {
		padding-right: 16px !important;
		gap: 10px;
	}
}
section.feature ul li {
	position: relative;
	transition: .5s;
}
section.feature ul a {
	font-size: 1.5rem;
	font-weight: 600;
	padding: 20px 0 20px 74px;
	background: #fff;
	display: block;
	border-radius: 120px;
	line-height: 1.4;
	color: var(--hb-dark-color);
	transition: .5s;
    border: thin solid rgb(var(--hb-sub-color));
	@media screen and (max-width: 600px) {
		font-size: 1.2rem;
		padding: .6em 0 .6em 55px;
	}
}
section.feature ul li::after {
	content: "";
	display: block;
	width: 1.8rem;
	height: 1rem;
	mask-image: url("/saiyo/wp-content/themes/cocoon-child-master/img/icon_arrow_circle.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: url("/saiyo/wp-content/themes/cocoon-child-master/img/icon_arrow_circle.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	background: rgb(var(--hb-sub-color));
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 2rem;
	transition: .2s;
	@media screen and (max-width: 600px) {
		right: 1.2rem;
	}
}
section.feature ul li:hover a {
	background: rgb(var(--hb-sub-color));
}
section.feature ul li:hover::after{
	background: #fff;
	right: 1.2rem;
}
section.feature ul li::before {
	counter-increment: list ;
	content: counter(list) " "; 
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 20px;
	font-size: 50px;
	font-style: italic;
	color: rgb(var(--hb-sub-color));
	line-height: 1;
	transition: .5s;
	@media screen and (max-width: 600px) {
		font-size: 2rem;
	}
}
section.feature ul li:hover::before,
section.feature ul li:hover a,
section.feature ul li:hover a span{
	color: #fff;
}
section.feature ul a span {
	display: block;
	font-size: 14px;
	font-family: Noto Sans JP;
	font-weight: 400;
	color: var(--hb-black-color);
	transition: .5s;
	@media screen and (max-width: 600px) {
		font-size: .7rem;
	}
}
section.feature .text {
	gap: 40px;
	position: relative;
}
section.feature .text p{
	@media screen and (max-width: 1240px) {
		width: 56%;
		margin-left: auto;
	}
	@media screen and (max-width: 834px) {
		margin-left: 0;
		width: 100%;
	}
	@media screen and (max-width: 600px) {
		padding-right: 16px;
	}
}
section.feature .text figure {
	@media screen and (max-width: 1240px) {
		position: absolute;
		left: 0;
		top: 0;
		width: calc(44% - 60px) !important;
		height: 100%;
	}
	@media screen and (max-width: 834px) {
		height: auto;
		position: relative;
		width: 100% !important;
	}
}
section.feature .text figure img {
	width: 100% !important;
	object-fit: cover;
	object-position: left 50% bottom 0%;
	aspect-ratio: 16/9;
	@media screen and (max-width: 1240px) {
		height: 100%;
	}
	@media screen and (max-width: 834px) {
		height: auto;
	}
}
section.feature .swiper-container,
section.feature .swiper{
	border-radius: 15px 0 0 15px;
	max-width: unset;
	@media screen and (max-width: 600px) {
		border-radius: 0;
	}
}
section.feature .swiper-container {
	padding: 40px 0 40px 80px;
	background: #fff;
	position: relative;
	width: calc(100% + 80px + (100vw - 1200px)/2);
	overflow: hidden;
	filter:drop-shadow(0 0 10px rgb(0,0,0,10%));
	@media screen and (max-width: 1240px) {
		width: calc(100% + 120px);
	}
	@media screen and (max-width: 834px) {
		width: calc(100% + 56px);
		padding: 40px 0 20px 60px;
	}
	@media screen and (max-width: 600px) {
		width: 100vw;
		padding: 0;
		background: none;
		left: -36px;
	}
}
section.feature .swiper-container::before {
	content: "";
	display: block;
	width: calc(80px - 1em);
	height: 25px;
	border-bottom: thin solid rgb(var(--hb-sub-color));
	display: inline-block;
	position: absolute;
	left: 0;
	top: 40px;
	@media screen and (max-width: 600px) {
		display: none;
	}
}
section.feature .swiper {
	padding-right: calc((100vw - 1300px)/2 + 40px);
	@media screen and (max-width: 1240px) {
		padding-right: 80px;
	}
	@media screen and (max-width: 1240px) {
		padding-right: 60px;
	}
	@media screen and (max-width: 600px) {
		padding-right: 0;
		border-radius: 0;
	}
}
section.feature .swiper .swiper-wrapper {
	flex-wrap: nowrap;
	gap: 0 !important;
    padding: 40px 0;
	@media screen and (max-width: 600px) {
		padding: 0;
		transition-timing-function: linear;
	}
}
section.feature .swiper .swiper-slide a {
    width: 100%;
}
section.feature .swiper .swiper-slide img{
	aspect-ratio: 16/9;
    width: 100%;
	object-fit: cover;
}
section.feature .swiper .swiper-slide.view-more::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--hb-dark-color);
	position: absolute;
	top: 0;
	left: 0;
	opacity: .5;
	mix-blend-mode: multiply;
}
section.feature .swiper .swiper-slide.view-more a::before{
	content: "VIEW MORE";
	white-space: nowrap;
	color: #fff;
	display: block;
	font-family: Noto Serif JP;
	font-weight: 500;
	font-size: .9rem;
	flex-shrink: 0;
	transition: .2s;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border: thin solid #fff;
	border-radius: 30px;
	padding: .4rem 4rem .4em 1.6em;
	z-index: 1;
	transition: .3s;
}
section.feature .swiper .swiper-slide.view-more a::after {
	content: "";
	display: block;
	width: 1.2rem;
	height: .5em;
	mask-image: url("/saiyo/wp-content/themes/cocoon-child-master/img/icon_arrow_circle.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: url("/saiyo/wp-content/themes/cocoon-child-master/img/icon_arrow_circle.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	background: #fff;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	left: calc(50% + 3.5em);
	z-index: 1;
	transition: .2s;
}
section.feature .swiper .swiper-slide.view-more a:hover::before {
	background: #fff;
	color: var(--hb-text-color);
}
section.feature .swiper .swiper-slide.view-more a:hover::after {
	left: calc(50% + 3.8em);
	background: var(--hb-text-color);
}
section.feature .swiper h3 {
	margin: 0 !important;
	color: var(--hb-dark-color);
	display: flex;
	align-items: center;
	@media screen and (max-width: 600px) {
		padding-left: 2rem !important;
		font-size: 1rem !important;
	}
}
section.feature .swiper h3 span{
	padding: 0 !important;
}
section.feature .swiper .title {
	display: flex;
	align-items: center;
}
section.feature .swiper figure {
	margin: 0;
}
section.feature .swiper .nav-buttons {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
	@media screen and (max-width: 600px) {
		gap: 10px;
        flex-basis: auto !important;
		position: relative;
		left: 22px;
	}
}
section.feature .swiper .nav-buttons .wp-block-buttons {
	margin: 0;
}
section.feature .swiper .nav-buttons .swiper-button-prev,
section.feature .swiper .nav-buttons .swiper-button-next{
	position: relative;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 0;
	width: 50px;
	height: 50px;
	border: thin solid var(--hb-dark-color);
	border-radius: 100%;
}
section.feature .swiper .nav-buttons .swiper-button-prev,
section.feature .swiper .nav-buttons .swiper-button-next{
	position: relative;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 0;
	width: 50px;
	height: 50px;
	border: thin solid var(--hb-dark-color);
	border-radius: 100%;
	@media screen and (max-width: 600px) {
		width: 40px;
		height: 40px;
	}
}
section.feature .swiper .nav-buttons .swiper-button-prev::after,
section.feature .swiper .nav-buttons .swiper-button-next::after{
	font-family: FontAwesome;
	font-size: 1em;
	color: var(--hb-dark-color);
	@media screen and (max-width: 600px) {
		width: 1.2rem !important;
	}
}
section.feature .swiper .nav-buttons .swiper-button-prev::after {
	content: "";
	display: block;
	width: 1.5rem;
	height: 1rem;
	mask-image: url("/saiyo/wp-content/themes/cocoon-child-master/img/icon_arrow.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: url("/saiyo/wp-content/themes/cocoon-child-master/img/icon_arrow.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	background: var(--hb-dark-color);
	transform: rotate(180deg);
}
section.feature .swiper .nav-buttons .swiper-button-next::after {
	content: "";
	display: block;
	width: 1.5rem;
	height: 1rem;
	mask-image: url("/saiyo/wp-content/themes/cocoon-child-master/img/icon_arrow.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: url("/saiyo/wp-content/themes/cocoon-child-master/img/icon_arrow.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	background: var(--hb-dark-color);
}
section.feature .swiper h2 {
	font-size: 25px !important;
}
section.recruit-info h1,section.events h1 {
	color: #fff;
}
section.recruit-info h1 span:last-child,
section.events h1 span:last-child{
	background: #fff;
	color: var(--hb-dark-color);
	font-weight: 600;
}
section.recruit-info .wp-block-list,
section.recruit-info .wp-block-list li{
	display: flex;
	gap: 40px;
	@media screen and (max-width: 834px) {
		gap: 20px;
	}
	@media screen and (max-width: 600px) {
		flex-direction: column;
		gap: 20px;
	}
}
section.recruit-info .wp-block-list li {
	flex: 1;
}
section.recruit-info .wp-block-list li a {
	background: rgb(0,0,0,25%);
	color: #fff;
	width: 100%;
	height: 100%;
	padding: 40px;
	font-size: 1.5rem;
	font-weight: 600;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	border: thin solid #fff;
	position: relative;
	transition: .3s;
	@media screen and (max-width: 834px) {
		font-size: 1.2rem;
	}
	@media screen and (max-width: 600px) {
		flex-direction: row;
		gap: 20px;
		padding: .6em 2em .6em 2em;
		border-radius: 120px;
	}
}
section.recruit-info .wp-block-list li a::before{
	content: "";
	display: block;
	width: 1.2rem;
	height: 1rem;
	mask-image: url("/saiyo/wp-content/themes/cocoon-child-master/img/icon_arrow_circle.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: url("/saiyo/wp-content/themes/cocoon-child-master/img/icon_arrow_circle.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	background: #fff;
	position: absolute;
	bottom: calc(40px + .45em);
	left: calc(50% + .6em);
	z-index: 1;
	transition: .2s;
	@media screen and (max-width: 600px) {
		position: relative;
		bottom: unset;
		left: unset;
		order: 2;
	}
}
section.recruit-info .wp-block-list li a::after {
	content: "VIEW";
	display: inline-block;
	border: thin solid #fff;
	border-radius: 100px;
	padding: .4rem 3.2rem .4em 1.6em;
	font-size: .9rem;
	font-weight: 400;
	transition: .3s;
	@media screen and (max-width: 600px) {
		display: none;
	}
}
section.recruit-info .wp-block-list li a:hover::before {
	background: var(--hb-dark-color);
	left: calc(50% + .8em);
	@media screen and (max-width: 600px) {
		left: unset;
		background: var(--hb-text-color);
	}
}
section.recruit-info .wp-block-list li a:hover {
	@media screen and (max-width: 600px) {
		background: #fff;
		color: var(--hb-text-color);
	}
}
section.recruit-info .wp-block-list li a:hover::after {
	background: #fff;
	color: var(--hb-dark-color);
}
section.events .introduction {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	@media screen and (max-width: 1024px) {
		padding: 100px 40px !important;
	}
	@media screen and (max-width: 834px) {
		padding: 0 56px 80px !important;
		overflow: visible;
	}
	@media screen and (max-width: 600px) {
		padding: 100px 16px 0 !important;
		overflow: visible;
	}
}
section.events .introduction::before,
section.events .introduction::after{
	content: "";
	display: block;
	width: 20%;
	height: 100%;
	background: var(--hb-dark-color);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	@media screen and (max-width: 834px) {
		height: 400px;
		width: 10%;
		top: -120px;
		z-index: -1;
	}
}
section.events .introduction::after {
	width: 60%;
	background: linear-gradient(to right, var(--hb-dark-color) 40%,transparent);
	@media screen and (max-width: 834px) {
		width: 100%;
		height: calc(100% + 120px);
		top: -120px;
		background: linear-gradient(to right, var(--hb-dark-color) 20%,transparent);
	}
	@media screen and (max-width: 600px) {
		height: 400px;
		background: linear-gradient(to right, rgb(var(--hb-main-color)) 40%,transparent);
		mix-blend-mode: multiply;
		opacity: .5;
	}
}
section.events .introduction img{
	width: 100%;
	left: 20%;
	@media screen and (max-width: 834px) {
		top: -120px;
		height: calc(100% + 120px);
		z-index: -1;
		object-position: left 30% top 50%;
	}
	@media screen and (max-width: 600px) {
		left: 0%;
		height: 400px;
		object-position: left 30% top 50%;
	}
}
section.events .serif.heading {
	width: 100%;
	display: block;
}
section.events .introduction .text_wrapper{
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 1200px;
	margin: auto;
	filter: drop-shadow(var(--hb-shadow));
	z-index: 1;
	position: relative;
}
section.events .introduction .worries-text {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	@media screen and (max-width: 834px) {
		gap: 0 !important;
		margin-top: 40px !important;
	}
}
section.events .introduction .worries-text .icon {
	@media screen and (max-width: 834px) {
		flex-basis: 100px !important;
		position: absolute;
		top: -40px;
		z-index: -1;
	}
}
section.events .introduction .worries-text .icon figure{
	clip-path: circle(50%);
	width: 150px !important;
	height: 150px !important;
	background: #fff;
	@media screen and (max-width: 834px) {
		width: 100px !important;
		height: 100px !important;
	}
}
section.events .introduction .worries-text .icon figure img {
	width: 80%;
	height: 100%;
	margin: auto;
	object-fit: contain;
	object-position: top 20px left 0px;
}
section.events .worries-text {
	@media screen and (max-width: 834px) {
		padding-top: 40px !important;
	}
}
section.events .worries-text p{
	background: #fff;
	border-radius: 100px;
	padding: .2rem 1rem;
	display: inline;
	line-height: 2.5;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	font-size: .9rem;
	font-weight: 800;
}
section.events .invitation-text {
	display: flex;
	flex-direction: column;
	gap: 1em;
	width: 560px;
	font-weight: 600;
	@media screen and (max-width: 834px) {
		width: 100%;
		gap: 0;
	}
	@media screen and (max-width: 600px) {
		width: 100%;
		gap: 20px;
	}
}
section.events .invitation-text p {
    line-height: 2;
    font-size: 1.2rem;
	@media screen and (max-width: 600px) {
		font-size: 1rem;
	}
}
section.events .invitation-text p br {
	@media screen and (max-width: 834px) {
		display: none;
	}
	@media screen and (max-width: 600px) {
		display: block;
	}
}

@media screen and (max-width: 1024px) {
	#header {
		z-index: 5;
	}
	.slogan {
		font-size: 50px !important;
		line-height: 1.3;
		transform: translateY(40%);
		width: 100%;
		justify-content: flex-end;
		padding-right: 60px;
	}
	.jumbotron .news-box-inner {
		width: 100%;
		max-width: unset;
		margin: 0 !important;
	}
	section.appeal p br{
		display: none;
	}
	section.appeal .message02 h1 {
		text-align: left;
	}
	section.appeal .message02 p {
		text-align: left;
	}
}
@media screen and (max-width: 1023px) {
	.jumbotron .news-box .flex {
		gap: 8px;
	}
}
@media screen and (max-width: 834px) {
	section.feature h1 {
		left: 0;
	}
	section.feature .wp-block-buttons .wp-block-button.sub-color,
	section.interview .wp-block-buttons .wp-block-button.sub-color{
		border-radius: 50%;
		aspect-ratio: 1;
		width: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1.4;
	}
	section.feature .wp-block-buttons .wp-block-button.sub-color {
		right: 16px;
	}
	section.interview .wp-block-buttons .wp-block-button.sub-color {
		right: -16px;
	}
	section.feature .wp-block-buttons .wp-block-button.sub-color a,
	section.interview .wp-block-buttons .wp-block-button.sub-color a{
		font-size: .8em !important;
	}
	section.feature .wp-block-buttons .wp-block-button.sub-color a::after,
	section.interview .wp-block-buttons .wp-block-button.sub-color a::after{
		display: none;
	}
}
@media screen and (max-width: 600px) {
	.jumbotron .wp-block-cover__inner-container {
		height: 100%;
		z-index: 2;
		position: absolute;
	}
	.slogan {
		font-size: 40px !important;
		line-height: 1.3;
		z-index: 1;
		padding: 0;
		align-self: center;
		top: 84%;
		bottom: unset;
		right: 16px;
		transform: rotate(-5deg);
		text-shadow: 0 0 10px #fff;
	}
	a#entry-button {
		display: none !important;
	}
	.slogan span{
		display: block;
		margin-left: 1em;
	}
	@keyframes MoveToLeft {
	  0% {
	    background-position: top 0% left 0%;
	  }
	  100% {
	    background-position: top 0% left 42%;
	  }
	}
	.jumbotron .news-box .flex {
		gap: 0;
		position: relative;
	}
	.jumbotron .news-box-inner {
		width: calc(100% - 16px);
		align-self: flex-end;
		flex: unset;
		padding: .8em 0 .8em 2em;
		gap: 0;
	}
	.jumbotron .news-box-inner .title::before {
		display: none;
	}
	section.feature div:has(.swiper-button-prev) {
		gap: 20px;
		flex-shrink: 0;
		justify-content: space-between;
	}
	.workplace-nav {
		display: none !important;
	}
	section.feature .wp-block-buttons .wp-block-button.sub-color,
	section.interview .wp-block-buttons .wp-block-button.sub-color{
		width: 60px;
	}
	section.interview .wp-block-buttons .wp-block-button.sub-color {
		right: 0;
	}
	section.interview {
		width: calc(100% + 16px);
	}
	.jumbotron .news-box-inner .contents p {
		animation: marquee 8s linear infinite;
		padding-left: 100%;
	}
	@keyframes marquee {
	    0% { transform: translateX(0%); }
		100% { transform: translateX(-100%); }
	}
}
@media screen and (max-width: 380px) {
	.slogan {
		font-size: 32px !important;
		top: unset;
		bottom: 20px;
		position: absolute;
	}
	.jumbotron .news-box .flex {
		width: 100%;
		justify-content: space-between;
		flex-direction: row;
		display: none;
	}
	section.appeal h1 br{
		display: none;
	}
	section.appeal h1 span.space {
		padding: 0;
	}
}