@charset "utf-8";
/* CSS Document */

.l-wrapper {
	margin-top: 0px;
}

.l-body-inner {
	background: #F8F8F2;
}

.l-recruit-header {
	background: linear-gradient( to bottom, rgba(0, 0, 0, 0.4) 0%, /* 一番上：真っ黒 */ rgba(0, 0, 0, 0) 100% /* 一番下：透明（下の白が透ける） */ );
	transition: 0.6s;
}

.l-recruit-header.is-scrolled {
	background: #FFF;
}

header.is-scrolled .logo-white {
	display: none;
}

header.is-scrolled .logo-normal {
	display: flex;
	transition: 0.6s;
}

header .logo-normal {
	display: none;
}

.l-recruit-header:has(.l-recruit-burger.is-active) .l-recruit-header__logo .logo-white {
	display: none;
}

.l-recruit-header:has(.l-recruit-burger.is-active) .l-recruit-header__logo .logo-normal {
	display: block;
}

.l-recruit-header-menu__nav-ttl {
	color: #FFF;
}

header.is-scrolled .l-recruit-header-menu__nav-ttl {
	color: #000;
	transition: 0.6s;
}

.l-recruit-mv {
	position: relative;
	display: flex;
	justify-content: center;
	height: 100vh;
	margin-bottom: 10vh;
	@media (max-width: 1024px) {
		margin-bottom: 5vh;
	}
}

.l-recruit-mv__slider__inner {
	height: 90vh;
	position: relative;
	&::after {
		content: '';
		background: url("../img/recruit/top/mv-slide-bottom.png");
		background-repeat: repeat-x;
		background-size: auto 100%;
		display: inline-block;
		width: 100%;
		height: 20vh;
		bottom: -1px;
		position: absolute;
		@media (max-width: 1024px) {
			height: 13vh;
			bottom: -3px;
		}
	}
}

.l-recruit-mv__slide-item.swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	@media (max-width: 1024px) {
		&.u-for-pc {
			display: none !important;
		}
		&.u-for-sp {
			display: block !important;
		}
	}
}

.l-recruit-mv__slide-parts {
	position: absolute;
	max-width: 1000px;
	width: 90%;
	z-index: 1;
	bottom: 6rem;
	display: grid;
	place-items: center;
	@media screen and (min-width: 600px) and (max-width: 768px) {
		bottom: 2rem;
	}
	@media (max-width: 599px) {
		bottom: 6rem;
	}
	.l-recruit-mv__link-entry {
		max-width: 500px;
		width: 90%;
		margin: 0px auto;
		font-size: var(--font-size-18px);
        color: var(--font-base-color);
        font-weight: bold;
        border-radius: 10px;
		background: #FFF;
		display: flex;
		align-items: center;
		padding: 28px 3rem;
		position: relative;
		transition: background 0.3s,color 0.3s;
		@media (max-width: 1024px) {
			padding: 16px 2rem;
		}
		&::after {
			content: '';
			background: url("../img/common/icon-white-circle-blue-arrow.svg");
			background-repeat: no-repeat;
			background-size: contain;
			display: inline-block;
			width: 49px;
			height: 49px;
			right: 20px;
			position: absolute;
			@media (max-width: 1024px) {
				width: 30px;
				height: 30px;
			}
		}
		&:hover {
			background: #0075c2;
			color: #FFF;
			&::after {
				background: url("../img/common/icon-white-circle-white-arrow.svg");
			}
		}
	}
	picture {
		height: auto;
		display: flex;
		width: 100%;
		@media (max-width: 768px) {
			max-width: 600px;
		}
	}
}


/* PC（2カラム） */
.l-inner_box {
  display: grid;
  grid-template-columns: minmax(50%, 1fr) 1fr;
  grid-template-rows: auto auto; /* ← 2 行構成にする */
  gap: 3rem 4rem;
}

/* テキスト側（タイトル〜ボタン）は左の 2 行に配置 */
.l-inner_box__title {
  grid-column: 1;
  grid-row: 1;
}

.l-inner_box__text {
  grid-column: 1;
  grid-row: 2;
  max-width: 600px;
  width: 100%;
}

/* 画像は右側で 2 行ぶんを占有（rowspan=2 と同じ） */
.l-inner_box .l-inner_box__image {
  grid-column: 2;
  grid-row: 1 / span 2; /* ← rowspan=2 と同じ */
  align-self: center;
}

@media (max-width: 767.98px) {
  .l-inner_box {
    display: block;
  }

  .l-inner_box__title {
    margin-bottom: 2rem;
  }

  .l-inner_box .l-inner_box__image {
    margin: 2rem 0;
  }
}


.l-inner_box__title {
	font-size: clamp(3rem,6vw,6rem);
	font-weight: bold;
	color: var(--font-base-color);
	margin-bottom: 4rem;
	@media (max-width: 767.98px) {
		margin-bottom: 2rem;
	}
}

.l-inner_box__catch {
	font-size: clamp(1.8rem,3vw,3.6rem);
	font-weight: bold;
	color: var(--font-base-color);
	margin-bottom: 2rem;
}

.l-inner_box__desc {
	font-size: clamp(1.4rem,1.6vw,1.8rem);
	font-weight: 500;
	text-align: justify;
	line-height: var(--line-height-base);
}

.l-inner_box__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #0075c2;
	max-width: 440px;
	width: 90%;
	margin: 4vw 0px 0px;
	padding: 32px 5rem;
	font-size: clamp(1.4rem,1.6vw,1.8rem);
	font-weight: bold;
	border-radius: 10px;
	border: 1px solid #0075c2;
	color: #FFF;
	position: relative;
	transition: background 0.3s,color 0.3s;
	@media (max-width: 980px) {
		padding: 16px 2rem;
	}
	&::after {
		content: '';
		background: url("../img/common/icon-white-circle-white-arrow.svg");
		background-repeat: no-repeat;
		background-size: contain;
		display: inline-block;
		width: 49px;
		height: 49px;
		right: 20px;
		position: absolute;
		@media (max-width: 980px) {
			width: 30px;
			height: 30px;
			right: 0px;
			position: relative;
		}
	}
	&:hover {
		background: #FFF;
		color: var(--font-base-color);
		&::after {
			background: url("../img/common/icon-white-circle-blue-arrow.svg");
		}
	}
}




.p-message_box {
	position: relative;
}

.p-message_box__text {
	max-width: 640px;
	width: 90%;
	margin: 3rem auto 0px;
	position: relative;
	z-index: 1;
}

.p-message_box__catch {
	color: var(--font-base-color);
	font-size: clamp(2rem,4vw,4rem);
	font-weight: bold;
	margin-bottom: 6rem;
}

.p-message_box__desc {
	font-size: clamp(1.4rem,1.6vw,1.8rem);
	font-weight: 500;
	line-height: var(--line-height-base);
	text-align: justify;
	max-width: 640px;
	width： 100%;
	@media (max-width: 1024px) {
		width: 60%;
		margin-inline: 10vw auto;
	}
	@media (max-width: 768px) {
		width: 100%;
		margin-inline: auto;
	}
}

.p-message_box__image {
	position: absolute;
	top: 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	z-index: 0;
	width: 100%;
	@media (max-width: 768px) {
		position: relative;
	}
	span {
		display: block;
		width: 100%;
		height: auto;
		img {
			width: 100%;
			object-fit: cover;
			display: block;
		}
	}
	.message_img_01 {
		left: 8vw;
		top: 26rem;
		position: relative;
		max-width: 351px;
		width: 16vw;
		@media (max-width: 1360px) {
			left: 3vw;
			width: 14vw;
		}
		@media (max-width: 768px) {
			width: 36vw;
			left: 5vw;
			top: 8rem;
		}
	}
	.message_img_02 {
		max-width: 531px;
		width: 20vw;
		position: relative;
		top: 20rem;
		@media (max-width: 768px) {
			top: 6vw;
			width: 40vw;
		}
	}
	.message_img_03 {
		right: 6vw;
		top: 50rem;
		position: absolute;
		max-width: 480px;
		width: 20vw;
		@media (min-width: 1920px) {
			top: 55rem;
		}
		@media (max-width: 1024px) {
			top: 38vw;
		}
		@media (max-width: 980px) {
			top: 50vw;
		}
		@media (max-width: 768px) {
			right: 10vw;
			width: 40vw;
			top: 40vw;
		}
	}
}

.p-movie {
	padding-block: 9rem 10rem;
	@media (max-width: 1920px) {
		padding-block: 10rem 10rem;
	}
	@media (max-width: 1024px) {
		padding-block: 8rem 10rem;
	}
	@media (max-width: 767.98px) {
		padding-block: 15rem 5rem;
	}
	.l-inner_box__title {
		text-align: center;
	}
}

_::-webkit-full-page-media, _:future, :root .p-movie {
  padding-block: 15rem 5rem;
}

.p-movie_box {
	display: grid;
	place-items: center;
	max-width: 1000px;
	width: 100%;
	margin: 0px auto;
	iframe {
		width: 100%;
		height: 100%;
		aspect-ratio: 16/9;
	}
}

.video-wrapper {
    position: relative;
    width: 100%;
    margin-inline: auto;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    display: block;
}


.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: spin 0.8s linear infinite;
    display: none; /* 初期は非表示 */
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}


.controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: none;
    z-index: 99;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-wrapper.is-controls-visible .controls {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

video {
    position: relative;
    z-index: 1;
}

/* 左側（再生ボタン） */
.controls-left {
    display: flex;
    align-items: center;
    margin-right: 10px;
	@media (max-width: 767.98px) {
    	margin-right: 5px;
	}
}

/* 再生ボタン */
.controls-left button#playPause {
    background: var(--back-base-color);
    color: #FFF;
    border: 0;
    padding-block: 5px;
    padding-inline: 2rem;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
	img  {
		height: 18px;
	}
	@media (max-width: 767.98px) {
		padding-inline: 3vw;
	}
}

/* 右側全体のボックス */
.controls-right-box {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    background: var(--back-base-color);
    border-radius: 8px;
    padding: 4px 12px;
}

/* 中央（シークバー + 時間） */
.controls-center {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0; /* ← レスポンシブで潰れない */
}

/* 右側（音量・全画面） */
.controls-right {
    display: flex;
    align-items: center;
}

/* ============================
   SEEK BAR（シークバー）
============================ */
/* ベース */
#seekBar {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 60px;
    height: 4px;
    border-radius: 2px;
    outline: none;
    position: relative;
    z-index: 50;

    /* 再生済み + バッファ済みの白の階層 */
    background:
        /* 再生済み（最も濃い白） */
        linear-gradient(to right,
            rgba(255,255,255,0.75) var(--seek-progress),
            transparent var(--seek-progress)
        ),
        /* バッファ済み（中間の白） */
        linear-gradient(to right,
            rgba(255,255,255,0.55) var(--buffer-progress),
            rgba(255,255,255,0.15) var(--buffer-progress)
        );
}


/* Chrome / Edge / Safari */
#seekBar::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent; /* ← 背景は #seekBar 側で管理 */
    border-radius: 2px;
}

#seekBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    margin-top: -5px;
    cursor: pointer;
}

/* Firefox */
#seekBar::-moz-range-track {
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
}

#seekBar::-moz-range-progress {
    height: 4px;
    background: rgba(255,255,255,0.75);
    border-radius: 2px;
}

#seekBar::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}


/* 進捗ゲージ（Chrome / Edge / Safari） */
#seekBar::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(
        to right,
        #fff var(--seek-progress, 0%),
        rgba(255,255,255,0.3) var(--seek-progress, 0%)
    );
    border-radius: 2px;
}

#seekBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    margin-top: -5px;
    cursor: pointer;
}

/* Firefox */
#seekBar::-moz-range-track {
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
}

#seekBar::-moz-range-progress {
    height: 4px;
    background: #fff;
    border-radius: 2px;
}

#seekBar::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

#timeDisplay {
    color: #fff;
    font-size: 14px;
}


/* 右：音量・全画面 */
.controls-right button {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
	padding-inline: 4px;
	img  {
		height: 18px;
	}
}

.controls input[type="range"] {
    flex: 1;
}

.seek-tooltip {
    position: absolute;
    bottom: 42px;
    padding: 4px 8px;
    background: #FFF;
    color: #000;
    font-size: 12px;
    border-radius: 4px;
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
    z-index: 9999;
    display: none;
}

.seek-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #FFF;
}



.p-greeting {
	padding-block: 10rem;
	@media (max-width: 767.98px) {
		padding-block: 5rem;
	}
}

.p-invironment {
	padding-block: 10rem;
	background: var(--back-base-color);
	@media (max-width: 767.98px) {
		padding-block: 5rem;
	}
}

.p-invironment .l-inner_box__title,
.p-invironment .l-inner_box__desc {
	color: #FFF;
}

.p-invironment .l-inner_box__link {
	transition: background 0.3s,color 0.3s;
	border: 1px solid #FFF;
	background: #FFF;
	color: #0075C2;
	&::after {
		background: url("../img/common/icon-white-circle-blue-arrow.svg");
		background-size: contain;
	}
	&:hover {
		border: 1px solid #FFF;
		background: #0075C2;
		color: #FFF;
		&::after {
			background: url("../img/common/icon-white-circle-white-arrow.svg");
		}
	}
}

.p-career {
	max-height: 65vh;
	@media (max-width: 980px) {
		max-height: 100%;
	}
	.l-inner_box {
		gap: 0rem 0rem;
		align-items: center;
		@media (max-width: 980px) {
			display: block;
		}
	}
}

.p-career .l-inner_box__text {
	grid-column: 1;
    grid-row: 1;
	max-width: 600px;
	@media (max-width: 980px) {
		padding-block: 5rem;
	}
}

.career-photo-wrapper {
	@media (max-width: 980px) {
		display: none;
	}
}

/* ★ rotate をかけるのは “外側の枠” だけ */
.career-photo-wrapper__shape {
	overflow: hidden;
	width: auto;
    height: 65vh;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    display: flex;
	justify-content: center;
	align-items: center;
}

/* ★ 平行四辺形の形を作るのは “内側のレイヤー” */
.career-photo-wrapper__inner {
    overflow: visible;
    display: flex;
	justify-content: center;
    gap: 10px;
	height: 120%;
    transform: rotate(10deg);
}

/* ★ スライダー本体は絶対に回転させない */
.l-career-photo__slider-left,
.l-career-photo__slider-right {
    overflow: hidden;
    margin-inline: 0;
}

/* スライドもまっすぐ */
.l-career-photo__slider-left .swiper-slide,
.l-career-photo__slider-right .swiper-slide {
}

/* 画像もまっすぐ */
.l-career-photo__slider-left .swiper-slide img,
.l-career-photo__slider-right .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.l-career-photo__slider-left .swiper-wrapper,
.l-career-photo__slider-right .swiper-wrapper {
    transition-timing-function: linear !important;
}



.p-crosstalk {
	padding-block: 10rem;
	@media (max-width: 767.98px) {
		padding-block: 5rem;
	}
}

.crosstalk_box_ttl_inner {
	font-size: clamp(1.8rem,2.6vw,2.6rem);
}

.crosstalk_box:nth-of-type(n+3) {
    margin-top: 10rem;
	@media (max-width: 767.98px) {
    	margin-top: 0rem;
	}
}

.crosstalk_box_ttl_inner {
	margin-top: 0px;
}

.crosstalk_box_ttl::after {
	content: '';
	background: url("../img/common/icon-blue-circle-white-arrow.svg");
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 40px;
	height: 40px;
	right: 0px;
	position: absolute;
}

.crosstalk_category {
	padding: 2.4rem 3rem;
	@media (max-width: 980px) {
		padding: 5px 3rem 2px;
	}
}

.p-numbers {
	padding-block: 10rem;
	@media (max-width: 767.98px) {
		padding-block: 5rem;
	}
	.l-inner_box {
		grid-template-columns: minmax(40%,auto) 1fr;
		gap: 3rem;
		align-items: stretch;
		@media (max-width: 767.98px) {
			grid-template-columns: 1fr;
		}
	}
	.l-inner_box__link {
		margin: 4vw 0px 0px;
		max-width: 490px;
		width: 100%;
	}
}

.p-numbers_btn_wrap {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 2rem;
	width: 100%;
	@media (max-width: 767.98px) {
		gap: 1rem;
	}
}

.p-numbers_btn {
	display: flex;
	align-items: center;
	background: var(--back-base-color);
	color: #FFF;
	border-radius: 10px;
	padding: 2rem;
	font-size: clamp(1.4rem,2.2vw,2.2rem);
	font-weight: bold;
	position: relative;
	cursor: pointer;
	transition: background 0.3s,color 0.3s;
	border: 1px solid #0075c2;
	@media (max-width: 767.98px) {
		padding: 1rem;
	}
	&::after {
		content: '';
		background: url("../img/common/ct_aarow.png");
		background-repeat: no-repeat !important;
		background-size: contain !important;
		display: inline-block;
		width: 8px;
		height: 14px;
		right: 30px;
		position: absolute;
		@media (max-width: 980px) {
			right: 15px;
		}
	}
	&:hover {
		background: #FFF;
		color: #0075c2;
		&::after {
			background: url("../img/common/ct_aarow_blue.png");
		}
	}
}

#numbers_main {
	background: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3rem;
	margin-bottom: 2rem;
	height: 300px;
	img {
		transition: opacity .3s ease; opacity: 1;
	}
	@media (max-width: 767.98px) {
		height: 200px;
		padding: 1rem 1rem 2rem;
		img {
			height: 100%;
			object-fit: contain;
		}
	}
}

.p-numbers_image_title {
	display: flex;
	justify-content: center;
	font-size: clamp(1.8rem,2.4vw,2.4rem);
	font-weight: bold;
	background: #FFF;
	padding-top: 30px;
}