@charset "UTF-8";

/* ===============================================
  top
=============================================== */

/* ------------------------------
  コーポレートトップ：MV ＋ 透過ヘッダー
------------------------------ */
.top-hero {
	position: relative;
	width: 100%;
	z-index: 0;
}

.top-intro {
	position: relative;
	--top-mv-h: 100svh;
	--top-align-inset: calc((100vw - min(88vw, 60em)) / 2 + clamp(2.5rem, 8vw, 4rem));
	--top-about-catch-shift: 0;
}

@media (max-width: 767px) {
	.top-intro {
		--top-mv-sp-header-gap: calc(
			max(6.4rem, calc(min(70vw, 28rem) * 159 / 662)) + 1px + 1rem + env(safe-area-inset-top, 0px)
		);
		--top-mv-h: calc(var(--top-mv-sp-header-gap) + 100vw);
	}
}

@media (min-width: 768px) {
	.top-intro {
		--top-mv-h: min(100svh, 56.25vw);
		--top-align-inset: max(clamp(1.5rem, 4vw, 2rem), calc((100vw - min(92vw, 60em)) / 2));
		--top-about-catch-shift: clamp(0.5rem, 1.2vw, 1.25rem);
	}
}

.header--recruit--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	background-color: transparent;
	border: none;
}

@media (max-width: 767px) {
	body.layout-top.top .header--recruit--overlay.header--recruit {
		background-color: var(--color-white);
		border-top-color: transparent;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

	body.layout-top.top .header--recruit--overlay .header__logo-link {
		background-image: url("/common/img/logo-all.png");
	}
}

@media (min-width: 768px) {
	body.layout-top.top .header__logo-link {
		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
	}
	body.layout-top.top .header__sp,
	body.layout-top.top .header__pc {
		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
	}
}

@media (min-width: 768px) {
	body.layout-top.top .header--recruit--overlay.header--recruit {
		padding-top: 0;
		padding-bottom: 0;
	}

	body.layout-top.top .header__logo {
		width: calc(min(70vw, 28rem) * 0.7);
	}
}

@media (min-width: 960px) {
	body.layout-top.top .header__logo {
		width: calc(clamp(20rem, 40%, 80rem) * 0.7);
	}

	.header--recruit--overlay {
		padding-top: 1.5em;
		padding-bottom: 1.5em;
	}
}
@media (max-width: 959px) {
	body.layout-top.top .header__inner {
		min-height: calc(6.4rem * 0.7);
	}

	body.layout-top.top .header__hamburger {
		width: calc(6.4rem * 0.7);
		min-height: calc(6.4rem * 0.7);
	}
}

@media (min-width: 960px) {
	body.layout-top.top .header__inner {
		gap: 0.6rem;
	}

	body.layout-top.top .header__pc {
		gap: 0.85em;
	}

	body.layout-top.top .header__tel-row {
		gap: 0.35em 1.15em;
	}

	body.layout-top.top .header__nav-list {
		gap: 0.5em 1.35em;
	}
}

body.layout-top.top .header__pc {
	display: none;
}
body.layout-top.top .header__sp {
	display: flex;
}
@media (min-width: 960px) {
	body.layout-top.top .header__pc {
		display: flex;
	}
	body.layout-top.top .header__sp {
		display: none;
	}
}

.top-mv {
	position: relative;
	z-index: 0;
	width: 100%;
	min-height: 100svh;
	background-color: var(--color-gray-light);
}

@media (min-width: 768px) {
	.top-mv {
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		min-height: min(100svh, 56.25vw);
	}
}

.top-mv__media {
	position: relative;
	width: 100%;
	min-height: inherit;
	overflow: hidden;
}

@media (max-width: 767px) {
	.top-mv {
		min-height: 0;
		padding-top: var(--top-mv-sp-header-gap);
		box-sizing: border-box;
	}

	.top-mv__media {
		min-height: 0;
		aspect-ratio: 1 / 1;
	}
}

.top-mv__video-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	overflow: hidden;
	background-color: var(--color-gray-light);
}

.top-mv__video-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
	mix-blend-mode: overlay;
	opacity: 1;
}

.top-mv__video {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	transform: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	border: 0;
	pointer-events: none;
}

.top-mv__catch {
	display: flex;
	position: absolute;
	z-index: 5;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	pointer-events: none;
	text-align: left;
}

@media (max-width: 767px) {
	.top-mv__catch {
		left: 50%;
		top: 0;
		width: max-content;
		max-width: calc(100vw - clamp(1rem, 5vw, 2rem));
		box-sizing: border-box;
		transform: translate(-50%, -80%);
		gap: 0.5em;
		padding: 0;
	}
}

@media (min-width: 768px) {
	.top-mv__catch {
		left: var(--top-align-inset);
		top: 0;
		right: auto;
		bottom: auto;
		gap: 1.2em;
		padding: 0;
		transform: translateY(calc(-84% + clamp(0.35rem, 1.4vw, 1.1rem)));
	}
}

@media (min-width: 1280px) {
	.top-mv__catch {
		left: calc(var(--top-align-inset) - 3 * var(--top-about-catch-shift));
	}
}

.top-mv__catch-line {
	margin: 0;
	display: inline-block;
	padding: 0.45em 0.75em;
	background-color: var(--color-primary);
	color: var(--color-white);
	font-size: clamp(1.4rem, 2.2vw, 2.2rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.18em;
}

@media (max-width: 767px) {
	.top-mv__catch .top-mv__catch-line {
		white-space: nowrap;
		font-size: 5.5vw;
		padding: 0.38em 0.62em;
		letter-spacing: 0.1em;
	}
}

@media (min-width: 768px) {
	.top-mv__catch .top-mv__catch-line {
		font-size: 2.4em;
		padding: 0.3em 0.5em;
	}
}

@media (min-width: 1280px) {
	.top-mv__catch .top-mv__catch-line {
		font-size: 2.8em;
	}
}

.top-about.section {
	padding-top: 0;
	padding-bottom: 0;
	position: relative;
	z-index: 1;
}

.top-about__bg {
	padding-top: clamp(1.25rem, 3.5vw, 2rem);
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

@media (max-width: 767px) {
	.top-about__bg {
		margin-top: 0;
	}
}

.top-about__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 3vw, 2rem);
}

.top-about__surface {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 3vw, 2rem);
	background-color: var(--color-white);
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2rem) clamp(1.75rem, 4vw, 3rem) clamp(2.5rem, 8vw, 4rem);
	border-radius: clamp(20px, 4vw, 28px) clamp(20px, 4vw, 28px) 0 0;
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
}

.top-about__text {
	min-width: 0;
	padding-top: 3em;
}

.top-about__eyebrow {
	margin: 0 0 0.6em;
	font-family: "Oswald", "Noto Sans JP", sans-serif;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
	text-align: center;
}

.top-about-heading {
	margin: 1em 0 0;
	font-size: clamp(1.8rem, 4.5vw, 2.6rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-text);
	text-align: left;
}

.top-about-lead {
	margin: 0;
}

.top-about__action {
	margin: 0;
}

@media (max-width: 767px) {
	body.layout-top.top .en-heading {
		font-size: 1.1em;
	}

	.top-about__surface {
		padding-top: clamp(1.5rem, 6vw, 8rem);
	}

	.top-about .top-about__text {
		padding-top: 2em;
	}

	.top-about__action {
		padding-bottom: clamp(1.75rem, 6vw, 3rem);
	}
}

.top-about__txt .top-about__action.mgt-md {
	margin-top: 2em !important;
}

@media (max-width: 767px) {
	.top-about .business-card__head {
		padding-left: 0;
		padding-right: 0;
	}
}

.business-card__head--link {
	text-decoration: none;
	color: inherit;
}

@media (hover: hover) {
	.business-card__head--link:hover .business-card__icon {
		opacity: 0.88;
	}
}

.top-about__visual {
	min-width: 0;
	position: relative;
	z-index: 3;
}

.top-about-img {
	display: block;
	width: 60%;
	max-width: 734px;
	height: auto;
	margin-inline: auto;
	padding-top: 2em;
}

@media (min-width: 768px) {
	.top-about-img {
		width: 100%;
		max-width: none;
		margin-inline: auto;
		padding-top: 0;
	}
}

@media (min-width: 768px) {
	.top-about .inner.inner--sm.top-about__inner {
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		min-height: clamp(22rem, 32vw, 30rem);
		overflow: visible;
	}

	.top-about__bg {
		padding-top: clamp(1.5rem, 3vw, 2rem);
		padding-bottom: clamp(5rem, 12vw, 10rem);
	}

	.top-about__inner {
		gap: 0;
	}

	.top-about__surface {
		width: 78vw;
		max-width: 78vw;
		margin-top: clamp(-4em, -5vw, -6.5em);
		margin-left: 0;
		padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 4vw, 3.5rem) clamp(8rem, 15vw, 20rem) var(--top-align-inset);
		border-radius: 0 clamp(48px, 6vw, 88px) clamp(48px, 6vw, 88px) 0;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
	}

	.top-about__visual {
		position: absolute;
		top: 50%;
		right: calc(clamp(2.25rem, 2vw, 4rem) + clamp(3rem, 6vw, 9rem));
		left: auto;
		width: min(37vw, 734px);
		max-width: 734px;
		margin: 0;
		transform: translate(clamp(-2rem, -3.5vw, -1.25rem), -50%);
		pointer-events: none;
	}

	.top-about__visual .top-about-img {
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.top-about__eyebrow {
		font-size: 1.67em;
		text-align: left;
		margin-left: 0;
	}

	.top-about-heading {
		font-size: 2em;
	}

	.top-about-lead {
		width: 60%;
	}
}

@media (min-width: 1280px) {
	.top-about .top-about__eyebrow {
		margin-left: calc(-3 * var(--top-about-catch-shift));
	}
}

/* ------------------------------
  トップ：Business / Recruit（service-list__inner 系の full-bleed）
------------------------------ */
.business {
	overflow-x: clip;
	background:
		linear-gradient(to bottom, var(--color-white) 0%, var(--color-white) 50%, transparent 50%),
		linear-gradient(135deg, #FCF9EE, #DBEFF9);
	--business-radius-outer: clamp(20px, 5vw, 80px);
	--business-card-pad-in: clamp(1.45em, 4vw, 2.6em);
	--business-inset-outer: max(
		var(--business-card-pad-in),
		calc((100vw - min(88vw, 73em)) / 2)
	);
}

@media (max-width: 767px) {
	.business {
		background:
			linear-gradient(to bottom, var(--color-white) 0%, var(--color-white) 42%, transparent 42%),
			linear-gradient(135deg, #FCF9EE, #DBEFF9);
	}
}

.business__eyebrow {
	margin: 0 0 0.5em;
	font-family: "Oswald", "Noto Sans JP", sans-serif;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
}

body.layout-top.top .business .business__eyebrow {
	font-size: 1.3rem;
}

@media (min-width: 768px) {
	body.layout-top.top .business .business__eyebrow {
		font-size: 1.67em;
	}
}

.business__title {
	margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}
.business__container {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-inline: 0;
	box-sizing: border-box;
	overflow: visible;
}

.business__item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	width: 100%;
	box-sizing: border-box;
}

.business-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.business-card--left {
	border-radius: 0 var(--business-radius-outer) var(--business-radius-outer) 0;
}

.business-card--right {
	border-radius: var(--business-radius-outer) 0 0 var(--business-radius-outer);
}

.business-card__visual {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 0;
	min-width: 0;
	width: 100%;
}

.business-card__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-width: 0;
}

.business-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.65em;
	margin-top: 0;
	padding-top: clamp(1.5em, 4vw, 2.5em);
	padding-bottom: clamp(1.5em, 4vw, 2.5em);
}

.business-card--left .business-card__body {
	padding-left: var(--business-inset-outer);
	padding-right: var(--business-card-pad-in);
}

.business-card--right .business-card__body {
	padding-right: var(--business-inset-outer);
	padding-left: var(--business-card-pad-in);
}

.business-card__body--white {
	background-color: var(--color-white);
}

.business-card__head {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 0.75em;
	min-width: 0;
}

.business-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(2.5em * 0.8);
	height: calc(2.5em * 0.8);
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-white);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.business-card__icon-symbol {
	font-size: calc(1.1em * 0.8);
	font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
	line-height: 1;
	color: var(--color-white);
}

@media (hover: hover) {
	.business-card__icon:hover {
		opacity: 0.88;
	}
}

.business-card__ttl {
	margin: 0;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.45;
	color: var(--color-text);
	flex: 0 1 auto;
	min-width: 0;
	text-align: left;
}

.business-card__external-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1.1em;
	line-height: 1;
	color: var(--color-primary);
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.business-card__lead {
	margin: 0;
	line-height: 1.65;
	color: var(--color-text);
	text-align: left;
	padding-left: clamp(1em, 4vw, 2em);
	padding-right: clamp(0.5em, 2vw, 1em);
}

@media (max-width: 767px) {
	.business .business__container {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-left: clamp(1.25rem, 4vw, 2rem);
		padding-right: clamp(1.25rem, 4vw, 2rem);
		box-sizing: border-box;
	}

	.business-card--left,
	.business-card--right {
		align-self: stretch;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		max-width: 100%;
		border-radius: var(--business-radius-outer);
	}

	.business-card--left .business-card__body,
	.business-card--right .business-card__body {
		padding-left: var(--business-card-pad-in);
		padding-right: var(--business-card-pad-in);
	}

	.business-card__head {
		padding-left: clamp(1em, 4vw, 2em);
		padding-right: clamp(1em, 4vw, 2em);
	}

	.business-card__lead {
		padding-left: clamp(1em, 4vw, 2em);
		padding-right: clamp(1em, 4vw, 2em);
	}
}

@media (min-width: 768px) {
	.business {
		--business-inset-outer: max(
			var(--business-card-pad-in),
			calc((100vw - min(92vw, 73em)) / 2)
		);
	}

	.business-card__visual {
		aspect-ratio: 16 / 8;
	}

	.business-card__img {
		width: 100%;
		height: 100%;
		min-height: 0;
		object-fit: cover;
		object-position: center;
	}

	.business__item {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		gap: clamp(2.5rem, 5vw, 15rem);
	}

	.business-card {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		align-self: stretch;
	}

	.business-card__body {
		flex: 1 1 auto;
		min-height: 0;
	}

	.business-card--right {
		margin-top: 0;
		transform: translateY(clamp(4rem, 10vw, 8rem));
	}

	.business__container {
		padding-bottom: clamp(4rem, 10vw, 8rem);
	}

	.business-card__ttl {
		font-size: 1.25em;
	}
}

.recruit__container {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-top: clamp(2.5rem, 6vw, 4rem);
	overflow: hidden;
	border-radius: clamp(40px, 8vw, 72px);
	background-color: var(--color-primary);
	color: var(--color-white);
}

.recruit__content {
	padding-top: clamp(3.25rem, 9vw, 6rem);
	padding-right: clamp(2.5em, 5vw, 5em);
	padding-left: clamp(2.5em, 5vw, 5em);
	text-align: center;
}



.recruit__eyebrow {
	display: inline-block;
	margin: 0 0 1.35em;
	padding-bottom: 0.45em;
	font-size: 1.1em;
	font-weight: 700;
	letter-spacing: 0.06em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}

.recruit__lead {
	margin: 0 0 0.85em;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.55;
	color: var(--color-white);
}

.recruit__text {
	margin: 0;
	font-size: 0.95em;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.95);
}

.recruit__btn {
	margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.recruit__btn .c-btn-primary {
	width: auto;
	min-width: 10em;
}

.recruit__visual {
	display: block;
	margin-top: auto;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	line-height: 0;
}

.recruit__img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.recruit__eyebrow {
		font-size: 1.6em;
	}
	.recruit__lead {
		font-size: 2.7em;
	}

	.recruit__text {
		font-size: 1em;
	}
}

/* ------------------------------
  トップ：INSTAGRAM / INFORMATION
------------------------------ */
@media (max-width: 767px) {
	.information .c-column {
		align-items: stretch;
		width: 100%;
	}

	.information .information__item {
		width: 100%;
		max-width: 100%;
		align-self: stretch;
	}

	.information__link {
		text-align: left;
	}

	.information__more {
		text-align: left;
	}

	.information__more-link {
		justify-content: center;
	}
}

.information__heading {
	margin: 0 0 1em;
	font-family: "Oswald", "Noto Sans JP", sans-serif;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--color-gray-dark);
}

.information__placeholder {
	margin: 0;
	color: var(--color-gray-dark);
}

.information__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.89em;
}

.information__list .information__row:nth-child(odd) .information__link {
	background-color: var(--color-gray-light);
}

.information__link {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: 1.8em 1.25em;
	text-decoration: none;
	color: inherit;
}

.information__date {
	color: var(--color-primary);
	font-family: "Noto Sans JP", sans-serif;
	letter-spacing: 0.04em;
}

.information__title {
	color: var(--color-text);
	font-weight: 400;
	line-height: 1.5;
	transition: color 0.2s ease;
}

@media (hover: hover) {
	.information__link:hover .information__title {
		color: var(--color-primary);
	}
}

.information__empty {
	margin: 0;
	color: var(--color-gray-dark);
	font-size: 0.89em;
}

.information__more {
	margin: 1.25em 0 0;
	text-align: right;
	font-size: 0.89em;
}

.information__more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.65em;
	text-decoration: none;
	color: var(--color-text);
	font-weight: 400;
}

.information__more-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-white);
}

.information__more-icon svg {
	display: block;
}

@media (hover: hover) {
	.information__more-link:hover .information__more-icon {
		opacity: 0.88;
	}
}

.certificate__marks {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1em 1.25em;
}

.certificate__mark {
	flex: 0 1 200px;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.certificate img {
	display: block;
	max-width: 200px;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.certificate__marks {
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: stretch;
		gap: clamp(0.35rem, 2.5vw, 0.65rem);
	}

	.certificate__mark {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}

	.certificate img {
		max-width: 100%;
		width: 100%;
		height: auto;
		object-fit: contain;
	}
}