@charset "UTF-8";


/* ローディングアニメーション */

#loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #050505;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loading-content {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 250px;
	height: 250px;
}

.loading-logo {
	position: relative;
	width: 60%;
	z-index: 2;
	opacity: 0;
}

.loading-ring-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	filter: drop-shadow(0 0 8px rgba(117, 33, 33, 0.8)) drop-shadow(0 0 15px rgba(36, 66, 115, 0.8));
}

.loading-circle {
	stroke-dasharray: 754;
	stroke-dashoffset: 754;
	stroke-width: 3;
}



/* ------------------------
    メインビジュアル
------------------------ */

.index-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(0deg, #000000, #303030);

}


.hero-gallery {
	position: relative;
	width: 95%;
	max-width: 1300px;
	aspect-ratio: 1200 / 800;
}

.hero-img {
	position: absolute;
	opacity: 0;
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0;
	z-index: 10;
	pointer-events: none;
}


.pos-1 {
	width: 35%;
	top: 13%;
	left: -5%;
	z-index: 2;
}

.pos-2 {
	width: 25%;
	top: -4%;
	left: 30%;
	z-index: 1;
}

.pos-3 {
	width: 31%;
	top: 20%;
	left: 30%;
	z-index: 3;
}

.pos-4 {
	width: 30%;
	top: 46%;
	left: 7%;
	z-index: 2;
}

.pos-5 {
	width: 30%;
	top: 50%;
	left: 35%;
	z-index: 1;
}

.pos-6 {
	width: 32%;
	top: 18%;
	right: 8%;
	z-index: 5;
}

.pos-7 {
	width: 40%;
	top: 50%;
	right: -5%;
	z-index: 1;
}

.pos-8 {
	width: 18%;
	bottom: 10%;
	left: 2%;
	z-index: 3;
}

.pos-9 {
	width: 20.3%;
	bottom: 6%;
	left: 19.7%;
	z-index: 2;
}

.pos-10 {
	width: 25%;
	bottom: -4%;
	left: 40%;
	z-index: 1;
}

.pos-11 {
	width: 20%;
	top: 2%;
	right: 26%;
	z-index: 4;
}

.hero-message {
	position: relative;
	z-index: 20;
	padding-top: 100vh;
	padding-bottom: 60vh;
}

.message-item {
	text-align: center;
	margin-bottom: 20vh;
}

.message-item img {
	width: 90%;
	max-width: 900px;
	height: auto;
}



/* スクロールテキスト発光 */

.message-item svg {
	width: 90%;
	max-width: 900px;
	height: auto;
	display: inline-block;
	overflow: visible;
}

.message-item svg path {
	fill: #ffffff;
	stroke: none;
}

.message-item svg .draw-target path,
.message-item svg .draw-target-2 path {
	fill: rgba(255, 255, 255, 0);
	stroke: #ffffff;
	stroke-width: 1px;
}


@media screen and (max-width: 768px) {
	.hero-gallery {
		width: 100%;
		max-width: none;
		aspect-ratio: 375 / 680;
	}

	.pos-1 {
		width: 50%;
		top: 23%;
		left: 0%;
		z-index: 2;
	}

	.pos-2 {
		width: 30%;
		top: 12%;
		left: 16%;
		z-index: 1;
	}

	.pos-3 {
		width: 39%;
		top: 16%;
		left: 45%;
		z-index: 3;
	}

	.pos-4 {
		width: 45%;
		top: 40%;
		left: 10%;
		z-index: 3;
	}

	.pos-5 {
		width: 45%;
		top: 48%;
		left: 45%;
		z-index: 2;
	}

	.pos-6 {
		width: 50%;
		top: 30%;
		right: 0%;
		z-index: 5;
	}

	.pos-7 {
		width: 44%;
		top: 64.5%;
		right: 0%;
		z-index: 1;
	}

	.pos-8 {
		width: 40%;
		bottom: 30%;
		left: 6%;
		z-index: 3;
	}

	.pos-9 {
		width: 35%;
		bottom: 22%;
		left: 21%;
		z-index: 1;
	}

	.pos-10 {
		width: 34%;
		bottom: 10%;
		left: 40%;
		z-index: 1;
	}

	.pos-11 {
		width: 25%;
		top: 8%;
		right: 30%;
		z-index: 4;
	}
}


/* 横並び */

.layout-01 .layout-01__grid {
	display: flex;
	gap: 60px;
	margin-top: 50px;
}

.layout-01 .layout-01__grid .layout-01__item {
	width: 50%;
}

.layout-01__item figure {
	margin-top: 20px;
}

/* figure（画像の入れ物）の高さを固定し、中身を中央に配置 */
.layout-01--balanced .layout-01__item figure {
    height: 350px; /* ★ここで画像全体の「ひとまわり小さめ」のサイズを調整します。お好みで数値を変更してください */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 画像を枠（figure）の高さに合わせて、見切れないように縮小 */
.layout-01--balanced .layout-01__item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 縦横比を崩さずに枠内に収める指定です */
}

.layout-01--balanced strong{
	display: block;
	text-align: center;
	margin-top: 10px;
}

@media only screen and (max-width: 768px) {
	.layout-01 .layout-01__grid {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		gap: 20px;
	}

	.layout-01 .layout-01__grid .layout-01__item {
		width: 100%;
		padding: 0;
		margin-top: 20px;
	}

	.layout-01--balanced .layout-01__item figure {
        height: auto; 
        display: block; 
    }

    /* 画像の横幅を揃え、高さを元の比率に合わせて自動調整する */
    .layout-01--balanced .layout-01__item img {
        width: 100%;  /* ★ここで横幅を揃えます */
        height: auto; /* 高さは画像に合わせて自動で伸び縮みします */
        object-fit: initial; /* PC用のcontainをリセット */
    }

}



/* ボタン */

.view-more-btn {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	gap: 15px;
	position: relative;
	margin-top: 50px;
	padding-right: 20px;
}

.btn-text {
	color: #fff;
	font-family: "Anton", sans-serif;
	font-size: 4rem;
	letter-spacing: .03em;
	line-height: 1;
	text-transform: uppercase;
}

.btn-arrow {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	border: 2px solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
	transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

.btn-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 45%;
	width: 88%;
	height: 2px;
	background-color: #fff;
	transform: translateY(-50%);
	transition: width 0.3s ease;
}

.btn-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -33%;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translateY(-50%) rotate(45deg);
	transition: right 0.3s ease;
}

.view-more-btn:hover .btn-arrow::before {
	width: 108%;
}

.view-more-btn:hover .btn-arrow::after {
	right: -53%;
}


.btn-01 {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 30px;
	background-color: transparent;
	color: #000;
	text-decoration: none;
	padding: 20px 30px;
	font-size: 2.0rem;
	transition: color 0.3s ease;
}

.btn-01::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: -2;
}

.btn-01::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #752121 0%, #244273 100%);
	opacity: 0;
	z-index: -1;
	transition: opacity 0.3s ease;
}

.btn-01 span {
	position: relative;
	display: block;
	width: 40px;
	height: 10px;
	transition: transform 0.3s ease;
}

.btn-01 span::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000;
	transform: translateY(-50%);
	transition: background-color 0.3s ease;
}

.btn-01 span::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 10px;
	height: 10px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	transform: translateY(-50%) rotate(45deg);
	transition: border-color 0.3s ease;
}

.btn-01:hover {
	color: #fff;
}

.btn-01:hover::after {
	opacity: 1;
}

.btn-01:hover span::before {
	background-color: #fff;
}

.btn-01:hover span::after {
	border-color: #fff;
}

.btn-01:hover span {
	transform: translateX(5px);
}

.u-btn-position {
	text-align: center;
	margin-top: 120px;
}

@media only screen and (max-width: 768px) {
	.btn-text {
		font-size: 2.5rem;
	}

	.btn-01 {
		font-size: 1.6rem;
		gap: 20px;
		padding: 20px;
	}

	.btn-01 span {
		width: 30px;
	}

	.u-btn-position {
		margin-top: 70px;
	}
}


/* メンバースライド */
.slide-wrapper {
	overflow: hidden;
	padding: 100px 0;
}

.slide-container {
	overflow: hidden;
	white-space: nowrap;
	margin-bottom: 15px;
}

.slide-container:last-child {
	margin-bottom: 0;
}

.slide-content {
	display: inline-block;
}

.slide-content figure {
	display: inline-block;
	margin: 0 5px;
	width: 40vw;
	max-width: 450px;
	vertical-align: top;
	overflow: hidden;
}


@media only screen and (max-width: 768px) {
	.slide-wrapper {
		padding: 50px 0;
	}

	.slide-content figure {
		width: 50vw;
	}
}

.slide-content figure img {
	display: block;
	width: 100%;
	height: auto;
}

@keyframes scroll-left {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.slide-top {
	animation: scroll-left 20s linear infinite;
}

.slide-bottom {
	animation: scroll-left 20s linear infinite;
	animation-delay: -2.5s;
}


.slide-content figure img {
	display: block;
	width: 100%;
	height: auto;

	filter: grayscale(100%) brightness(40%);
	transform: scale(1);
	animation: smooth-center-spotlight 20s infinite;
}

/* ■上段 */
.slide-top figure:nth-child(1) img,
.slide-top figure:nth-child(5) img {
	animation-delay: -5s;
}

.slide-top figure:nth-child(2) img,
.slide-top figure:nth-child(6) img {
	animation-delay: 0s;
}

.slide-top figure:nth-child(3) img,
.slide-top figure:nth-child(7) img {
	animation-delay: -15s;
}

.slide-top figure:nth-child(4) img,
.slide-top figure:nth-child(8) img {
	animation-delay: -10s;
}

/* ■下段 */
.slide-bottom figure:nth-child(1) img,
.slide-bottom figure:nth-child(5) img {
	animation-delay: -7.5s;
}

.slide-bottom figure:nth-child(2) img,
.slide-bottom figure:nth-child(6) img {
	animation-delay: -2.5s;
}

.slide-bottom figure:nth-child(3) img,
.slide-bottom figure:nth-child(7) img {
	animation-delay: -17.5s;
}

.slide-bottom figure:nth-child(4) img,
.slide-bottom figure:nth-child(8) img {
	animation-delay: -12.5s;
}


@keyframes smooth-center-spotlight {

	0%,
	5% {
		filter: grayscale(100%) brightness(50%);
		transform: scale(1);
	}

	8%,
	16% {
		filter: grayscale(0%) brightness(110%);
		transform: scale(1.05);
	}

	20%,
	100% {
		filter: grayscale(100%) brightness(50%);
		transform: scale(1);
	}
}



/* ttl */
.ttl-02 {
	font-size: 6rem;
	width: fit-content;
	line-height: 1.5;
}

.ttl-02 img {
	display: inline-block;
	width: auto;
	height: 6rem;
}

.ttl-02 span {
	display: inline-block;
	position: relative;
	font-size: 15rem;
	font-family: "Anton", sans-serif;
	letter-spacing: .03em;
}

.ttl-02:not(:has(span)) {
	margin: 0 auto;
}


.ttl-02+p {
	margin-top: 50px;
}

.ttl-03__01 {
	position: relative;
	font-size: 4.8rem;
	font-weight: 800;
	line-height: 1.5;
	margin-top: 130px;
	letter-spacing: -0.02em;
}

.ttl-03__01+p {
	margin-top: 50px;
}

.ttl-03__02 {
	font-size: 4.8rem;
	font-weight: bold;
	line-height: 1.5;
	margin-top: 150px;
	border-bottom: 1px solid #ccc;
}

.ttl-03__02+p {
	margin-top: 50px;
}

.ttl-04__01 {
	position: relative;
	font-size: 3.8rem;
	font-weight: bold;
	line-height: 1.5;
	margin-top: 100px;
	padding-left: 25px;
}

.ttl-04__01::before {
	content: "";
	width: 10px;
	height: 45px;
	background-color: #fff;
	position: absolute;
	left: 0;
	top: 7px;
}

.ttl-04__02 {
	font-size: 6rem;
	font-weight: bold;
	margin-top: 200px;
	line-height: 1;
}

.ttl-04__02 span {
	font-size: 3rem;
}

@media only screen and (max-width: 768px) {
	.ttl-02 {
		font-size: 3rem;

	}

	.ttl-02 img {
		width: auto;
		height: 3rem;
	}

	.ttl-02 span {
		font-size: 6rem;
	}

	.ttl-03__01 {
		font-size: 2.5rem;
		margin-top: 100px;
	}

	.ttl-03__01+p {
		margin-top: 30px;
	}

	.ttl-03__02 {
		font-size: 2.5rem;
		margin-top: 70px;
	}

	.ttl-03__02+p {
		margin-top: 30px;
	}

	.ttl-04__01 {
		position: relative;
		font-size: 2.2rem;
		font-weight: bold;
		line-height: 1.5;
		margin-top: 70px;
		padding-left: 20px;
	}

	.ttl-04__01::before {
		content: "";
		width: 7px;
		height: 29px;
		background-color: #fff;
		position: absolute;
		left: 0;
		top: 3px;
	}

	.ttl-04__02 {
		font-size: 3rem;
		margin-top: 150px;
	}

	.ttl-04__02 span {
		font-size: 2rem;
	}
}

/* テキスト */
.text-basic {
	font-size: 1.6rem;
	line-height: 5.6rem;
}

.js-text-reveal .char {
	color: rgba(255, 255, 255, 0.15);
	font-weight: bold;
}

.text-point__01 {
	font-size: 30px;
	font-weight: 800;
}

.president-text {
	text-align: right;
	font-size: 1.8rem;
	font-weight: 600;
}


@media only screen and (max-width: 768px) {
	.text-basic {
		line-height: 4rem;
	}

	.text-point__01 {
		font-size: 20px;
	}
}


/* リンク */
.link-01 .link-01__grid {
	display: flex;
	gap: 40px;
	margin-bottom: 70px;
}

.link-01 .link-01__grid .link-01__item {
	width: 50%;
	padding: 0 10px;
	margin-top: 30px;
}

.link-01 .link-01__grid .link-01__item .link-01__link {
	position: relative;
	display: block;
}

.link-01 .link-01__grid .link-01__item .link-01__link:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.link-01 .link-01__grid .link-01__item .link-01__link figure {
	display: block;
	position: relative;
	overflow: hidden;
	padding-top: 60%;
}

.link-01 .link-01__grid .link-01__item .link-01__link figure img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	transition: .3s;
}

.link-01 .link-01__grid .link-01__item .link-01__link:hover img {
	transform: scale(1.1);
	transition: .3s;
}

.link-01 .link-01__grid .link-01__item .link-01__link p {
	position: absolute;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	bottom: -40px;
	gap: 30px;
	background-color: transparent;
	color: #000;
	text-decoration: none;
	padding: 20px 30px;
	font-size: 2.0rem;
	transition: color 0.3s ease;

}

.link-01 .link-01__grid .link-01__item .link-01__link p::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: -2;

}


.link-01 .link-01__grid .link-01__item .link-01__link p span {
	position: relative;
	display: block;
	width: 40px;
	height: 10px;
	transition: transform 0.3s ease;
}

.link-01 .link-01__grid .link-01__item .link-01__link p span::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000;
	transform: translateY(-50%);
	transition: background-color 0.3s ease;
}

.link-01 .link-01__grid .link-01__item .link-01__link p span::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 10px;
	height: 10px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	transform: translateY(-50%) rotate(45deg);
	transition: border-color 0.3s ease;
}


@media only screen and (max-width: 768px) {
	.link-01 .link-01__grid {
		display: flex;
		flex-wrap: wrap;
		gap: 60px;
	}

	.link-01 .link-01__grid .link-01__item {
		width: 100%;
		padding: 0;
		margin-top: 20px;
	}

	.link-01 .link-01__grid .link-01__item .link-01__link {
		position: relative;
		display: block;
		height: 100%;
		background-color: #00A6BD;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	.link-01 .link-01__grid .link-01__item .link-01__link:hover {
		transform: translateY(-5px);
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	}

	.link-01 .link-01__grid .link-01__item .link-01__link figure {
		display: block;
		position: relative;
		overflow: hidden;
		padding-top: 50%;
	}

	.link-01 .link-01__grid .link-01__item .link-01__link figure img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		font-family: 'object-fit: cover;';
		transition: .3s;
	}

	.link-01 .link-01__grid .link-01__item .link-01__link:hover img {
		transform: scale(1.1);
		transition: .3s;
	}

	.link-01 .link-01__grid .link-01__item .link-01__link p {
		font-size: 1.6rem;
		gap: 20px;
		padding: 20px;
	}

	.link-01 .link-01__grid .link-01__item .link-01__link p::before {}
}

/* トップページ */
.top-concept {
	position: relative;
	padding: 200px 0 500px;
	background-color: #000;
}

.top-concept .light-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}

.top-concept .light-effect {
	position: absolute;
	top: -24%;
	right: -30%;
	width: 150%;
	height: 150%;
	background: conic-gradient(from 180deg at 80% 20%,
			transparent 0deg,
			rgba(117, 33, 33, 0.2) 15deg,
			/* ふんわりした光の輪郭 */
			rgba(117, 33, 33, 0.8) 30deg,
			/* 光の中心（透明度を上げてしっかり発色させました） */
			rgba(117, 33, 33, 0.2) 45deg,
			transparent 70deg);
	-webkit-mask-image: radial-gradient(circle at 80% 20%, black 10%, transparent 90%);
	mask-image: radial-gradient(circle at 80% 20%, black 10%, transparent 90%);
	transform-origin: 80% 20%;
	animation: sway 5s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 0;
}

@keyframes sway {
	0% {
		transform: rotate(-3deg) scale(1);
		opacity: 0.7;
	}

	100% {
		transform: rotate(4deg) scale(1.05);
		opacity: 1;
	}
}

.top-concept .content {
	position: relative;
	z-index: 1;
}


.top-concept::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: 300px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
	pointer-events: none;
	z-index: 5;
}

.top-concept::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 300px;
	background: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
	z-index: 5;
}

.top-worker {
	position: sticky;
	background-color: transparent;
}



.worker-bg {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1;
	background-color: #000;

	/* ノイズ画像(Base64) と 3つのグラデーション */
	background-image:
		/* 半透明のノイズ画像（これならブレンドモード不要で色が飛びません） */
		url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAAAAAABhwMhFAAAABXRSTlM/fz+/vz3r3PMAAAAhSURBVDjLjYxBDQAwCAS/4t85A/0zQA8wYwLMGMB8oH0f4f9w5m8P8QAAAABJRU5ErkJggg=="),
		radial-gradient(circle at var(--x-0) var(--y-0), #752121 var(--s-start-0), transparent var(--s-end-0)),
		radial-gradient(circle at var(--x-1) var(--y-1), #244273 var(--s-start-1), transparent var(--s-end-1)),
		radial-gradient(circle at var(--x-2) var(--y-2), #752121 var(--s-start-2), transparent var(--s-end-2));

	/* blend-modeは使用しません（これが色飛びの原因でした） */

	/* ノイズはリピート、グラデーションは画面全体 */
	background-repeat: repeat, no-repeat, no-repeat, no-repeat;
	background-size: 50px 50px, 100% 100%, 100% 100%, 100% 100%;

	animation: heat-mesh-blend 15s ease-in-out infinite alternate;

	transform: translateZ(0);
	backface-visibility: hidden;
	contain: paint;
}

/* 変数（0〜2のみに減らします） */
@property --x-0 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 20%;
}

@property --y-0 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 90%;
}

@property --s-start-0 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 10%;
}

@property --s-end-0 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 60%;
}

@property --x-1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 80%;
}

@property --y-1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 80%;
}

@property --s-start-1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 10%;
}

@property --s-end-1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 70%;
}

@property --x-2 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 40%;
}

@property --y-2 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 20%;
}

@property --s-start-2 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 5%;
}

@property --s-end-2 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 55%;
}

/* アニメーションもシンプルに */
@keyframes heat-mesh-blend {
	0% {
		--x-0: 20%;
		--y-0: 90%;
		--s-start-0: 10%;
		--s-end-0: 60%;
		--x-1: 80%;
		--y-1: 80%;
		--s-start-1: 10%;
		--s-end-1: 70%;
		--x-2: 40%;
		--y-2: 20%;
		--s-start-2: 5%;
		--s-end-2: 55%;
	}

	100% {
		--x-0: 50%;
		--y-0: 10%;
		--s-start-0: 0%;
		--s-end-0: 80%;
		--x-1: 30%;
		--y-1: 30%;
		--s-start-1: 15%;
		--s-end-1: 85%;
		--x-2: 80%;
		--y-2: 80%;
		--s-start-2: 0%;
		--s-end-2: 65%;
	}
}

.worker-content {
	position: relative;
	z-index: 2;
	/* 次のセクション(.top-recruitment)が被さるよう、2のままにします */

	/* ▼▼▼ 追加：コンテンツ側も独立したレイヤーとして手前に強制配置します ▼▼▼ */
	transform: translateZ(0);
	/* ▲▲▲ */

	margin-top: -100vh;
	padding-top: 300px;
	padding-bottom: 400px;
}





.top-recruitment {
	position: relative;
	background-color: #000000;
	z-index: 4;
}


.recruitment-bg {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 1;
	overflow: hidden;
}


.glow-red,
.glow-blue {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
}


.glow-red {
	width: 55vw;
	height: 55vw;
	background: radial-gradient(circle, #752121 0%, transparent 80%);
	top: 10%;
	left: -10vw;
}

.glow-blue {
	width: 40vw;
	height: 40vw;
	background: radial-gradient(circle, #244273 0%, transparent 80%);
	bottom: 0vw;
	right: -10vw;
}

.recruitment-content {
	position: relative;
	z-index: 2;
	margin-top: -100vh;
	padding: 200px 0 0;
}

.top-recruitment::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: 300px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
	pointer-events: none;
	z-index: 3;
}


.recruitment-read {
	position: relative;
}


.recruitment-content figure {
	max-width: 540px;
	width: 40vw;
	position: absolute;
	right: 0;
	top: 60%;
}

@media only screen and (max-width: 890px) {
	.recruitment-content figure {
		width: 40vw;
		position: absolute;
		right: 5%;
		top: 70%;
	}
}

@media only screen and (max-width: 660px) {
	.recruitment-content figure {
		width: 60vw;
		position: absolute;
		right: 0%;
		top: 110%;
	}
}

.support-box {
	margin: 500px 0 300px;
}

.support-grid {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 150px;
}

.support-ttl {
	width: 35%;
}

.support-body {
	width: 60%;
	border-left: 1px solid #fff;
	padding-left: 50px;
}

.support-body .btn-01 {
	margin-top: 30px;
}


.requirements-content {
	overflow: hidden;
}

.requirements-innner {
	position: relative;
	max-width: 1200px;
	width: 100%;
	aspect-ratio: 1200 / 900;
	margin: 0 auto 250px;
}

.requirements__ttl-area {
	position: absolute;
	top: 6.25%;
	left: 5%;
	z-index: 10;
}

.requirements__text-area {
	position: absolute;
	bottom: 28%;
	right: 8%;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}


.requirements__img-area {
	position: absolute;
}

.requirements__img-area img {
	width: 100%;
	height: auto;
	display: block;
}

.requirements__img-01 {
	bottom: 20%;
	left: -3%;
	width: 32%;
}

.requirements__img-02 {
	top: 5%;
	left: 43%;
	width: 24%;
}

.requirements__img-03 {
	bottom: 10%;
	left: 35%;
	width: 22%;
}

.requirements__img-04 {
	top: 15%;
	right: 0;
	width: 26%;
}

.requirements__img-05 {
	bottom: 0;
	right: -6%;
	width: 26%;
}

.text-loop {
	overflow: hidden;
}

.text-loop__wrapper {
	display: flex;
	width: max-content;
	animation: slide-scroll 30s linear infinite;
}

.text-loop__group {
	display: flex;
}

.text-loop__text {
	font-size: 6rem;
	flex-shrink: 0;
	white-space: nowrap;
	padding-right: 2rem;
}

@keyframes slide-scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.top-contact {
	position: relative;
	padding: 100px 0;
	background-color: #0a0a0a;

	background-image:
		/* 半透明のノイズ画像 */
		url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAAAAAABhwMhFAAAABXRSTlM/fz+/vz3r3PMAAAAhSURBVDjLjYxBDQAwCAS/4t85A/0zQA8wYwLMGMB8oH0f4f9w5m8P8QAAAABJRU5ErkJggg=="),
		radial-gradient(circle at 15% 25%, #000000 10%, transparent 75%),
		radial-gradient(circle at 70% 60%, #333333 5%, transparent 65%),
		radial-gradient(circle at 40% 90%, #1a1a1a 20%, transparent 80%);

	/* blend-modeは使用しません */
	background-repeat: repeat, no-repeat, no-repeat, no-repeat;
	background-size: 50px 50px, 100% 100%, 100% 100%, 100% 100%;
}

.top-contact .btn-01 {
	margin-top: 70px;
}

.tel-text {
	display: block;
	font-size: 6rem;
	margin-top: 70px;
}



@media only screen and (max-width: 768px) {

	.top-concept {
		padding: 200px 0 300px;
	}

	.glow-red,
	.glow-blue {
		filter: blur(50px);
	}


	.glow-red {
		width: 50vw;
		height: 50vw;
		background: radial-gradient(circle, #752121 0%, transparent 130%);
		top: 20%;
		left: 0vw;
	}

	.glow-blue {
		width: 50vw;
		height: 50vw;
		background: radial-gradient(circle, #244273 0%, transparent 80%);
		bottom: 40vw;
		right: -10vw;
	}

	.support-box {
		margin: 200px 0;
	}

	.support-grid {
		flex-direction: column;
		margin-bottom: 100px;
	}

	.support-ttl {
		width: 100%;
		margin-bottom: 20px;
	}

	.support-body {
		width: 100%;
		border-left: none;
		border-top: 1px solid #fff;
		padding-left: 0;
		padding-top: 30px;
	}

	.support-body .btn-01 {
		text-align: center;
	}

	.support-btn {
		text-align: center;
	}

	.requirements-innner {
		aspect-ratio: 375 / 950;
		margin: 0 auto 150px;
	}

	.requirements__ttl-area {
		top: 12.6%;
		left: 5%;
		width: 90%;
	}

	.requirements__text-area {
		top: 52%;
		left: 20%;
		right: auto;
		bottom: auto;
		width: 80%;
		transform: none;
		align-items: flex-start;
		gap: 15px;
	}

	.requirements__img-01 {
		top: 35%;
		bottom: auto;
		left: 0;
		width: 50%;
	}

	.requirements__img-02 {
		top: 14%;
		left: auto;
		right: 14%;
		width: 40%;
	}


	.requirements__img-03 {
		top: 74%;
		bottom: auto;
		left: 0;
		width: 44%;
	}

	.requirements__img-04 {
		top: 29%;
		right: 0;
		width: 41%;
	}

	.requirements__img-05 {
		top: 70%;
		bottom: auto;
		right: -6%;
		width: 52%;
	}


	.text-loop__text {
		font-size: 5rem;
	}

	.top-contact {
		padding: 70px 0;
	}

	.top-contact .btn-01 {
		margin-top: 30px;
	}
	.tel-text {
		display: block;
		font-size: 4rem;
		margin-top: 30px;
	}

}


/* 下層ページ背景スタイル */
.l-lower {
	background-color: #000000;
	position: relative;
	z-index: 0;
	padding: 300px 0 200px;
}

.l-lower .c-lower-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.l-lower .c-lower-bg__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
}

.l-lower .c-lower-bg__glow--red {
	width: 55vw;
	height: 55vw;
	background: radial-gradient(circle, #752121 0%, transparent 80%);
	top: 10%;
	left: -10vw;
}

.l-lower .c-lower-bg__glow--blue {
	width: 40vw;
	height: 40vw;
	background: radial-gradient(circle, #244273 0%, transparent 80%);
	bottom: 0vw;
	right: -10vw;
}



@media only screen and (max-width: 768px) {
	.l-lower {
		padding-top: 120px;
	}

	.l-lower .c-lower-bg__glow {
		filter: blur(50px);
	}


	.l-lower .c-lower-bg__glow--red {
		width: 50vw;
		height: 50vw;
		background: radial-gradient(circle, #752121 0%, transparent 130%);
		top: 20%;
		left: 0vw;
	}

	.l-lower .c-lower-bg__glow--blue {
		width: 50vw;
		height: 50vw;
		background: radial-gradient(circle, #244273 0%, transparent 80%);
		bottom: 40vw;
		right: -10vw;
	}

}

/* 背景半透明黒 */
.bg-deco__blk {
	background-color: rgba(0, 0, 0, 0.3);
	padding: 50px 30px;
}

#page-concept .bg-deco__blk {
	padding: 100px 30px;
	margin-top: 150px;
}

#page-heat_insulation_work .bg-deco__blk {
	margin-top: 50px;
}

/* 写真一枚配置 */
.img-wrap__big {
	width: 100%;
	max-width: 700px;
	margin: 50px auto 0;
}

/* 箇条書き */
.example-list {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 70px;
}

.example-list li {
	white-space: nowrap;
}

/* テーブル */
.common-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 10px;
	font-size: 1.8rem;
	line-height: 2;
}

.common-table th,
.common-table td {
	padding: 15px 20px;
	color: #fff;
	text-align: left;
	vertical-align: middle;
}

.common-table th {
	background-color: rgba(255, 255, 255, 0.3);
	font-weight: normal;
}

.common-table td {
	background-color: rgba(255, 255, 255, 0.1);
}

.common-table th:first-child,
.common-table td:first-child {
	width: 30%;
}

.td-map {
	margin-top: 20px;
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 70%;
}

.td-map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* テーブル（横スライド） */
.table-scroll-wrapper {
	width: 100%;
	overflow-x: scroll;
	margin-top: 50px;

	/* Firefox向けのスクロールバー指定 */
	scrollbar-width: thin;
	scrollbar-color: #888 rgba(255, 255, 255, 0.1);

	padding-bottom: 10px;
}

/* ▼ WebKit系（Chrome, Safari, Edgeなど）向けのスクロールバー指定 ▼ */

.table-scroll-wrapper::-webkit-scrollbar {
	height: 8px;
}

.table-scroll-wrapper::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 4px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 4px;
}

.table-scroll-wrapper .common-table {
	min-width: 800px;
}

/* テーブル（カラム落ち） */
.stacked-table {
	margin-top: 100px;
}

/* 採用情報　トップメッセージ */
.recruitment-top-message {
	text-align: center;
}

/* リスト */
.point-list li {
	margin-top: 50px;
	line-height: 2.8;
}

.point-list span {
	font-size: 1.8rem;
}

/* 採用情報　ポイント部分 */
.point-cont {
	display: flex;
	gap: 60px;
	margin-top: 60px;
}

.point-cont__inner {
	background-color: rgba(0, 0, 0, 0.3);
	padding: 50px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1;
	gap: 10px;
}

.point-cont__icon {
	width: 200px;
	height: 200px;
	margin: 0 0 20px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.point-cont__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.point-cont__inner .text-basic {
	line-height: 2;
}

/* 問い合わせ */
.tel-cont {
	border: 1px solid #fff;
	text-align: center;
	padding: 50px 0;
	margin-top: 50px;
}

.tel-cont .tel-text {
	margin-top: 0;
	word-break: break-all;
	display: block;
	font-size: 5rem;
}



@media only screen and (max-width: 768px) {

	.bg-deco__blk {
		padding: 50px 15px;
	}

	#page-concept .bg-deco__blk {
		padding: 50px 15px;
		margin-top: 100px;
	}

	.img-wrap__big {
		margin: 30px auto 0;
	}

	.example-list {
		grid-template-columns: 1fr;
		gap: 15px;
	}


	/* テーブル（カラム落ち） */
	.stacked-table {
		margin-top: 70px;
	}

	.stacked-table,
	.stacked-table tbody,
	.stacked-table tr,
	.stacked-table th,
	.stacked-table td,
	.stacked-table th:first-child,
	.stacked-table td:first-child {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.stacked-table tr {
		margin-bottom: 10px;
	}

	.stacked-table th {
		margin-bottom: 10px;
	}

	.recruitment-top-message {
		text-align: left;
	}

	.point-cont {
		flex-direction: column;
		gap: 30px;
		margin-top: 30px;
	}

	.point-cont__icon {
		width: 160px;
		height: 160px;
	}

	.tel-cont .tel-text {
		display: block;
		font-size: 2.2rem;
		margin-top: 30px;
	}

}

/* メンバー画像のギャラリー */

.gallery-container {
	display: grid;
	gap: 15px;
	margin: 50px auto 0;
	grid-template-columns: repeat(2, 1fr);
}


.gallery-item {
	overflow: hidden;
	aspect-ratio: 1 / 1;
}


.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


@media (min-width: 768px) {
	.gallery-container {
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
	}

	.gallery-item {
		aspect-ratio: 4 / 3;
	}
}

/* 私たちの使命ページ　スライダー*/
.slide-04 {
	width: 100%;
	max-width: 640px;
	margin: 50px auto 0;
}

.slide-04 .slick-dots {
	width: auto;
	position: relative;
	bottom: unset;
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px;
}

.slide-04 .slick-dots li {
	overflow: hidden;
	width: calc(20% - 10px);
	margin: 10px 5px 0;
	padding-top: calc(20% - 10px);
}

.slide-04 .slick-dots li::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	transition: .3s;
	z-index: 1;
	pointer-events: none;
}

.slide-04 .slick-dots li.slick-active::before {
	background-color: transparent;
	opacity: 1;
	transition: .3s;
}

.slide-04 .slick-dots li img {
	display: block;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	transition: .3s;
}

.slide-04 .slick-dots li:hover img {
	transform: scale(1.1);
	transition: .3s;
}

@media only screen and (max-width: 768px) {
	.slide-04 {
		width: 100%;
		max-width: 640px;
		margin: 20px auto 0;
	}

	.slide-04 .slick-dots {
		width: auto;
		position: relative;
		bottom: unset;
		display: flex;
		flex-wrap: wrap;
		margin: 0 -2.5px;
	}

	.slide-04 .slick-dots li {
		overflow: hidden;
		width: calc(20% - 5px);
		margin: 5px 2.5px 0;
		padding-top: calc(20% - 5px);
	}

	.slide-04 .slick-dots li::before {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		background-color: rgba(0, 0, 0, 0.5);
		transition: .3s;
		z-index: 1;
		pointer-events: none;
	}

	.slide-04 .slick-dots li.slick-active::before {
		background-color: transparent;
		transition: .3s;
	}

	.slide-04 .slick-dots li img {
		display: block;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		font-family: 'object-fit: cover;';
	}
}