@charset "utf-8";
/*
Theme Name: scape
*/
header {
	background-color: #ffffff;
	justify-content: space-between;
	align-items: center;
	padding: 0 4%;
	height: 100px;
	font-weight: 700;
	font-size: clamp(16px, 10.655px + 0.695vw, 24px); 
	position: fixed;
	z-index: 100;
	width: 100%;
	top: 0;
}
/* GIFローディング画面のスタイル */
#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff; /* 背景を白に設定 */
	z-index: 9999; /* メインコンテンツより前に表示する */
}
#loading img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
/* メインコンテンツのスタイル（デフォルトは非表示） */
#content {
	display: none;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.fade-in {
	opacity: 0; /* 初期状態では透明 */
	transform: translateY(50px); /* 少し下に配置 */
	transition: opacity 1.5s cubic-bezier(.2,0,.05,1), transform 1.5s cubic-bezier(.2,0,.05,1); /* アニメーションの設定 */
}
.fade-in.show {
	opacity: 1; /* フェードイン時の最終状態 */
	transform: translateY(0); /* 元の位置に戻る */
}
nav .menu-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.menu {
	display: flex;
	list-style: none;
	align-items: center;
}
.menu li a {
	text-decoration: none;
	padding: 20px;
}
.menu li:nth-child(4) a {
	display: flex
}
.menu li a img {
	width: 10px;
	height: auto;
	margin-left: 5px;
}
.menu li a img:nth-last-child(1){
	display: none;
}
.menu li a:hover img:nth-child(1){
	display: none;
}
.menu li a:hover img:nth-last-child(1){
	display: block;
}
.menu li a:hover {
	color: #CC5448;
}
/* ハンバーガーメニューのスタイル（SP用） */
.hamburger-menu {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}
.hamburger-menu span {
	width: 30px;
	height: 3px;
	transition: 0.3s;
	background-color: #040000;
}
.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 5px);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0; /* 中央のラインを非表示 */
}
.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -5px);
}
.top-bar, .bottom-bar {
    position: absolute;
    background-color: #020000;
    height: clamp(5px, 1.656px + 0.955vw, 20px);
    width: 0;
    transition: width 0.5s cubic-bezier(.2,0,.05,1);
	opacity: 1;
}
.top-bar {
    top: 0;
    left: 0;
}
.bottom-bar {
    bottom: 0;
    right: 0;
}
.top-bar.active {
    width: 100%;
}
.bottom-bar.active {
    width: 100%;
}
.video-container {
	position: relative;
	width: 100%;
	margin: 100px auto 0 auto;
}
.video-container video {
	width: 100%;
	height: auto;
}
/* ノイズエフェクトを表示するためのレイヤー */
.noise-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; /* クリックなどの操作が動画に影響しないようにする */
	z-index: 10;
	opacity: 0;
    transition: opacity 5s cubic-bezier(.2,0,.05,1);
}
.noise-fade-in{
	opacity: 0.08; /* ノイズの薄さを調整 (0.0 から 1.0) */
}
.h2-anim{
	position: relative;
	display: inline-block;
	overflow: hidden;
	opacity: 0; /* 最初は非表示 */
	letter-spacing: 5px;
	padding-bottom: 5px;
}
/* 黒と赤の背景アニメーション */
.h2-anim::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 400%;
	height: 100%;
	background: linear-gradient(to left, #040000 80%, #B20000 20%);
	z-index: -1;
	transform: translateX(-100%); /* 左から登場するように */
	transition: transform 2.4s cubic-bezier(.2,0,.05,1) 0s; /* 1秒後にアニメーション開始 */
}
.h2-anim.h2-anim02::before {
	background: linear-gradient(to left, #040000 90%, #B20000 10%);
	width: 350%;
	transition: transform 2.7s cubic-bezier(.2,0,.05,1) 0s; /* 1秒後にアニメーション開始 */
}
/* アニメーション開始時 */
.h2-anim.show {
	opacity: 1;
}
/* アニメーション開始時の背景の動き */
.h2-anim.show::before {
	transform: translateX(101%); /* 背景が左から右へ移動して消える */
}
/* 各文字のスタイル */
.h2-anim span {
	color: #FFFFFF; /* 黒色に変化 */
	transition: color 0.5s cubic-bezier(.2,0,.05,1); /* 色が徐々に変わる */
}
/* 新しいクラスが付与された時の黒文字 */
.h2-anim span.color-change {
	color: #040000; /* 黒色に変化 */
}

/* 文字下の線アニメーション */
.h2-anim::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #040000;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1s cubic-bezier(.2,0,.05,1) 0.4s; /* 下線は背景が消えた後に表示 */
}

.h2-anim.show::after {
	transform: scaleX(1);
}
.sec01 , .sec03{
	background-image: url(../images/sec01-bg.svg);
	padding-top: clamp(120px, 66.551px + 6.95vw, 200px);
	background-position: center center;
	background-size: cover;
	position: relative;
	padding-bottom: clamp(300px, 166.377px + 17.376vw, 500px);
}
.sec01 .inner, .sec03 .inner {
	flex-direction: column;
	position: relative;
	z-index: 50;
	pointer-events: none;
}
.sec01 p, .sec03 p  , .sec05 p{
	padding: 10px;
	background: linear-gradient(to right,rgba(255,255,255,0.8) 73%,rgba(255,255,255,0.3));
	line-height: 2;
	margin-top: clamp(83px, 54.939px + 3.649vw, 125px);
	width: fit-content;
}
.sec01 .imgArea,.sec03 .imgArea {
	width: 100%;
	margin: 0 auto;
	max-width: 1920px;
	position: absolute;
	height: calc(100% - 250px);
	top: 250px;
	left: 0px;
	right: 0px;
}
.sec01 .imgArea img, .sec03 .imgArea img {
	position: absolute;
	filter: grayscale(100%);
}
.sec01 .imgArea img:hover, .sec03 .imgArea img:hover {
	filter: grayscale(0%);
}
.sec01 .imgArea img:nth-child(1), .sec03 .imgArea img:nth-child(1) {
	width: 55%;
	height: auto;
	right: 0px;
	z-index: 10;
}
.sec01 .imgArea img:nth-child(2), .sec03 .imgArea img:nth-child(2) {
	width: 54%;
	z-index: 5;
	bottom: 250px;
}
.sec01 .imgArea img:nth-child(3) {
	width: 43%;
	bottom: 100px;
	left: 50%;
}
.sec02 {
	padding-top: 100px;
	padding-bottom: 70px;
}

.sec02 h2 {
	font-size: clamp(28px, 18.646px + 1.216vw, 42px);
	border-bottom-style: none;
}
.sec02 .sec02Left {
	width: 50%;
}
.sec02 .sec02Left p {
	margin-top: 40px;
	margin-bottom: clamp(100px, 66.594px + 4.344vw, 150px);
}
.sec02 .sec02Left a , .sec04 .sec04Footer a {
	width: clamp(280px, 199.826px + 10.426vw, 400px);
	height: clamp(60px, 46.638px + 1.738vw, 80px);
	border-radius: clamp(30px, 23.319px + 0.869vw, 40px);
	background-color: #040000;
	color: #ffffff;
	text-decoration: none;
	font-size: clamp(16px, 11.991px + 0.521vw, 22px);
	font-weight: 800;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 2px solid #040000;
}

.sec02 .sec02Left a img , .sec04 .sec04Footer a img {
	width: clamp(10px, 6.659px + 0.434vw, 15px);
	height: auto;
}
.sec02 .sec02Left a img:nth-last-child(1) , .sec04 .sec04Footer a img:nth-last-child(1) {
	display: none;
}

.sec02 .sec02Left a:hover , .sec04 .sec04Footer a:hover {
	background-color: #ffffff;
	color: #040000;
}
.sec02 .sec02Left a:hover img:nth-child(1) , .sec04 .sec04Footer a:hover img:nth-child(1) {
	display: none;
}
.sec02 .sec02Left a:hover img:nth-last-child(1) , .sec04 .sec04Footer a:hover img:nth-last-child(1) {
	display: block;
}
.sec02 .sec02Right {
	width: 50%;
	max-width: 733px;
	margin-right: -100px;
	filter: grayscale(100%);
	height: auto;
}
.sec02 .sec02Right:hover {
	filter: grayscale(0%);
}
.sec03{
	padding-bottom: clamp(200px, 133.189px + 8.688vw, 300px);
}
.sec03 .imgArea img:nth-child(2){
	bottom: 80px;
}
.sec04 {
	background-image: url(../images/sec04-bg.svg);
	background-position: center center;
	background-size: cover;
	padding-top: clamp(90px, 59.935px + 3.91vw, 135px);
	padding-bottom: clamp(60px, 46.638px + 1.738vw, 80px);
}
.sec04 .inner {
	flex-wrap: wrap;
	gap: 100px;
}
.sec04 .inner > div {
	width: calc(50% - 50px);
}
.sec04 .inner > div:nth-last-child(1) {
	width: 100%;
	text-align: center;
}
.sec04 h2 {
	font-size: clamp(16px, 10.655px + 0.695vw, 24px);
	border-style: none;
	text-align: center;
	width: 100%;
	justify-content: center;
	font-weight: 500;
	flex-wrap: wrap;
}
.sec04LeftInner {
	position: relative;
	max-width: none;
	margin-top: 80px;
}

/* 画像の初期状態 */
.sec04 .zoom-image {
	opacity: 0;
	transform: scale(0.3); /* 初期状態は少し小さく */
	transition: opacity 0.5s cubic-bezier(.2,0,.05,1), transform 0.5s cubic-bezier(.2,0,.05,1);
	width: 63%;
	height: auto;
	margin: 0 auto;
	max-width: 430px;
}
.sec04 .zoom-image:nth-child(1) {
}
.sec04 .zoom-image:nth-child(2) {
	position: absolute;
	top: 7%;
	margin: auto;
	width: 34%;
	right: 0px;
	bottom: 0px;
	left: -4%;
}
.sec04 .zoom-image:nth-child(3) {
	position: absolute;
	width: 46%;
	top: -46px;
	right: 0px;
}
.sec04 .zoom-image:nth-child(4) {
	position: absolute;
	left: -20px;
	width: 40%;
	top: 60px;
}
.sec04 .zoom-image:nth-child(5) {
	position: absolute;
	margin: auto;
	width: 36%;
	left: 0px;
	right: 0px;
	bottom: -50px;
}
.sec04 .zoom-image:nth-child(6) {
	position: absolute;
	right: 0px;
	display: none;
	transition: opacity 0.5s cubic-bezier(.2,0,.05,1), transform 0.5s cubic-bezier(.2,0,.05,1);
}
.sec04 .zoom-image:nth-child(7) {
	position: absolute;
	display: none;
	transition: opacity 0.5s cubic-bezier(.2,0,.05,1), transform 0.5s cubic-bezier(.2,0,.05,1);
}
.sec04 .zoom-image:nth-child(8) {
	position: absolute;
	margin: auto;
	left: 0px;
	right: 0px;
	display: none;
	transition: opacity 0.5s cubic-bezier(.2,0,.05,1), transform 0.5s cubic-bezier(.2,0,.05,1);
}
/* ビューポートに入ったときにズームインするアニメーション */
.sec04 .zoom-image.active {
    opacity: 1;
    transform: scale(1); /* 元のサイズに */
}
.sec04 .sec04Footer a {
	margin: 40px auto 0px auto;
}
.sec04RightInner {
	position: relative;
	margin-top: 50px;
}
/* グラフコンテナのスタイル */
.graph-container {
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	height: 265px; /* 全体の高さ */
	width: 80%;
	opacity: 0; /* 初期状態は非表示 */
	transform: translateY(100px); /* スクロール前は下に位置 */
	transition: opacity 2s cubic-bezier(.2,0,.05,1), transform 0.5s cubic-bezier(.2,0,.05,1);
	position: absolute;
	top:0px;
	left: 20%;
	margin-top: 42px;
}
/* グラフが表示されるときのトランジション */
.graph-container.active {
	opacity: 1;
	transform: translateY(0);
}

/* 各グラフバーの基本スタイル */
.graph-bar {
	position: relative;
	width: 70px;
	height: 265px; /* 全体の高さを設定 */
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
}

/* グレー部分のスタイル */
.graph-bar .gray {
	width: 100%;
	height: 0;
	background-color: gray;
	opacity: 0; /* 初期状態は非表示 */
}

.graph-container.active .graph-bar .gray {
	animation: growGray 1s cubic-bezier(.2,0,.05,1) forwards;
	opacity: 1;
}

/* 赤いバー（上部）のスタイル */
.graph-bar .red {
	width: 100%;
	background-color: #CC5448;
	height: 0;
	opacity: 0; /* 初期状態は非表示 */
}

/* 赤い部分が左から右に順に高くなる */
.graph-container.active .graph-bar:nth-child(2) .red {
	opacity: 1;
	animation-delay: 2.2s; /* 1.2秒後に赤色が出現 */
	animation: growRed01 1s cubic-bezier(.2,0,.05,1) forwards;
	animation-delay: 0.4s; /* グレーが出現した1秒後に赤を表示 */
	opacity: 1;
}

.graph-container.active .graph-bar:nth-child(3) .red {
	animation-delay: 2.4s; /* 1.4秒後に赤色が出現 */
	animation: growRed02 1s cubic-bezier(.2,0,.05,1) forwards;
	animation-delay: 0.8s; /* グレーが出現した1秒後に赤を表示 */
	opacity: 1;
}

.graph-container.active .graph-bar:nth-child(4) .red {
	animation-delay: 2.6s; /* 1.6秒後に赤色が出現 */
	animation: growRed03 1s cubic-bezier(.2,0,.05,1) forwards;
	animation-delay: 1.2s; /* グレーが出現した1秒後に赤を表示 */
	opacity: 1;
}

.graph-container.active .graph-bar:nth-child(5) .red {
	animation-delay: 2.8s; /* 1.8秒後に赤色が出現 */
	animation: growRed04 1s cubic-bezier(.2,0,.05,1) forwards;
	animation-delay: 1.6s; /* グレーが出現した1秒後に赤を表示 */
	opacity: 1;
}

.graph-container.active .graph-bar:nth-child(6) .red {
	animation-delay: 2s; /* 2秒後に赤色が出現 */
	animation: growRed05 1s cubic-bezier(.2,0,.05,1) forwards;
	animation-delay: 2s; /* グレーが出現した1秒後に赤を表示 */
	opacity: 1;
}

/* グレー部分のアニメーション */
@keyframes growGray {
	0% {
		height: 0;
	}
	100% {
		height: 80px;/* グレー部分の高さを80pxに固定 */
	}
}

/* 赤い部分のアニメーション */
@keyframes growRed01 {
	0% {
		height: 0;
	}
	100% {
		height: 36px; /* 赤いバーの高さ */
	}
}
@keyframes growRed02 {
	0% {
		height: 0;
	}
	100% {
		height: 72px; /* 赤いバーの高さ */
	}
}
@keyframes growRed03 {
	0% {
		height: 0;
	}
	100% {
		height: 108px; /* 赤いバーの高さ */
	}
}
@keyframes growRed04 {
	0% {
		height: 0;
	}
	100% {
		height: 146px; /* 赤いバーの高さ */
	}
}
@keyframes growRed05 {
	0% {
		height: 0;
	}
	100% {
		height: 184px; /* 赤いバーの高さ */
	}
}

@media (max-width: 1600px){
.graph-container {
	height: clamp(118px, -18.032px + 17.69vw, 265px);
	margin-top: clamp(20px, -1.388px + 2.781vw, 42px);
}
/* 各グラフバーの基本スタイル */
.graph-bar {
	width: clamp(30px, -8.887px + 5.057vw, 70px);
	height: clamp(120px, -20.967px + 18.331vw, 265px);
}
/* グレー部分のアニメーション */
@keyframes growGray {
	0% {
		height: 0;
	}
	100% {
		height: clamp(38px, -2.832px + 5.31vw, 80px);
	}
}
/* 赤い部分のアニメーション */
@keyframes growRed01 {
	0% {
		height: 0;
	}
	100% {
		height: clamp(16px, -3.444px + 2.528vw, 36px);
	}
}
@keyframes growRed02 {
	0% {
		height: 0;
	}
	100% {
		height: clamp(32px, -6.887px + 5.057vw, 72px);
	}
}
@keyframes growRed03 {
	0% {
		height: 0;
	}
	100% {
		height: clamp(50px, -6.387px + 7.332vw, 108px);
	}
}
@keyframes growRed04 {
	0% {
		height: 0;
	}
	100% {
		height: clamp(66px, -11.775px + 10.114vw, 146px);
	}
}
@keyframes growRed05 {
	0% {
		height: 0;
	}
	100% {
		height: clamp(82px, -17.163px + 12.895vw, 184px);
	}
}
}
/* 最初のグラフはグレーのみ */
.graph-bar:first-child .red {
	display: none;
}
.sec05 {
	padding-top: clamp(90px, 63.275px + 3.475vw, 130px);
	padding-bottom: clamp(170px, 116.551px + 6.95vw, 250px);
	position: relative;
	overflow: hidden;
}
.sec05 .sec05Inner {
	margin-top: clamp(90px, 63.275px + 3.475vw, 130px);
	pointer-events: none;
	position: relative;
	z-index: 2;
}
.sec05 .sec05Inner h3 {
	font-size: clamp(28px, 19.983px + 1.043vw, 40px);
}
/* h4を囲むコンテナ */
.h4-container {
    overflow: hidden; /* アニメーションが外に出ないように */
    position: relative;
	width: fit-content;
	margin-top: 10px;
}
.sec05 .sec05Inner h4.sec05h4 {
	font-size: clamp(20px, 11.983px + 1.043vw, 32px);
	padding: 3px 7px 8px 7px;
	color: #FFFFFF;
	width: fit-content;
	position: relative;
	display: inline-block; /* 横に並ぶようにする */
    overflow: hidden; /* 背景のアニメーションがはみ出さないように */
}
.sec05 .sec05Inner h4.sec05h4::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* 初期位置は左の画面外 */
    width: 100%;
    height: 100%;
    background-color: #040000; /* 背景の色は黒 */
    z-index: -1; /* テキストの後ろに配置 */
    transition: left 1s cubic-bezier(.2,0,.05,1); /* 左から黒背景が出現するアニメーション */
}
/* アクティブ時に黒背景を左から右に */
.sec05 .sec05Inner h4.sec05h4.active::before {
    left: 0; /* 左から0%に移動して黒背景が表示される */
}
.sec05 .sec05Inner p {
	margin-top: 25px;
}
.sec05 > img{
	filter: grayscale(100%);
	position: absolute;
	top: 400px;
	right: -100px;
	width: 60%;
	height: auto;
	z-index: 1;
}
.sec05 > img:hover{
	filter: grayscale(0%);
}
footer {
	background-color: #040000;
}

footer .footerLink .footerLinkInner {
	width: 50%;
	height: clamp(260px, 179.826px + 10.426vw, 380px);
	justify-content: center;
	align-items: center;
	background-position: center center;
	background-size: cover;
	filter: grayscale(100%);
}
footer .footerLink .footerLinkInner:hover{
	filter: grayscale(0%);
}
footer .footerLink .footerLinkInner:nth-child(1){
	background-image: url("../images/recruit-bg.png");
}
footer .footerLink .footerLinkInner:nth-last-child(1){
	background-image: url("../images/cont-bg.png");
}
footer .footerLink .footerLinkInner a{
	width: clamp(300px, 219.826px + 10.426vw, 420px);
	height: clamp(60px, 46.638px + 1.738vw, 80px);
	border-radius: clamp(30px, 23.319px + 0.869vw, 40px);
	font-size: clamp(24px, 15.983px + 1.043vw, 36px);
	text-decoration: none;
	font-weight: 700;
	color: #040000;
	background-color: #FFFFFF;
	justify-content: center;
	align-items: center;
}
footer .footerLink .footerLinkInner a:hover{
	color: #FFFFFF;
	background-color: #CC5448;
}
footer .footerLink .footerLinkInner a img{
	width: 20px;
	height: auto;
	margin-left: 20px;
	margin-top: -3px;
}
footer .footerLink .footerLinkInner a img:nth-last-child(1){
	display: none;
}
footer .footerLink .footerLinkInner a:hover img:nth-last-child(1){
	display: block;
}
footer .footerLink .footerLinkInner a:hover img:nth-child(1){
	display: none;
}
footer .inner {
	color: #ffffff;
	justify-content: space-between;
	padding-top: 70px;
	flex-wrap: wrap;
	padding-bottom: 40px;
}
footer .footerLeft img{
	width: clamp(180px, 139.913px + 5.213vw, 240px);
	height: auto
}
footer .footerLeft p {
	font-size: clamp(12px, 9.328px + 0.348vw, 16px);
	margin-top: 10px;
}
footer .footerLeft p:nth-child(2) {
	margin-top: 30px;
}

footer .footerLeft a{
	width: fit-content;
	color: #040000;
	background-color: #FFFFFF;
	padding: 7px 20px 5px 20px;
	text-decoration: none;
	font-size: clamp(12px, 9.328px + 0.348vw, 16px);
	font-weight: 900;
	border-radius: 25px;
	margin-top: 40px;
}
footer .footerLeft a:hover {
	background-color: #CC5448;
	color: #FFFFFF;
}
footer .footerLeft a img {
	width: 12px;
	height: auto;
	margin-right: 10px;
	margin-top: -3px;
}
footer .footerLeft a img:nth-last-child(1) {
	display: none;
}
footer .footerLeft a:hover img:nth-last-child(1) {
	display: block;
}
footer .footerLeft a:hover img:nth-child(1) {
	display: none;
}
footer .footerRight ul {
	display: flex;
	list-style: none;
	align-items: center;
	margin: 0;
	padding: 0;
	justify-content: flex-end;
}
footer .footerRight ul li a {
	padding: 15px;
	text-decoration: none;
	font-size: clamp(14px, 11.328px + 0.348vw, 18px);
	font-weight: 900;
}
footer .footerRight ul li a:hover {
	color: #CC5448;
}

footer .footerRight ul li:nth-child(4) a{
	display: flex;
}
footer .footerRight ul li a img{
	width: 8px;
	height: auto;
	margin-left: 5px;
}
footer .footerRight ul li a img:nth-last-child(1){
	display: none;
}
footer .footerRight ul li a:hover img:nth-last-child(1){
	display: block;
}
footer .footerRight ul li a:hover img:nth-child(1){
	display: none;
}
footer .inner > p {
	width: 100%;
	font-size: clamp(10px, 8.664px + 0.174vw, 12px);
	margin-top: 55px;
}




@media (max-width: 768px) {
	header {
		height: clamp(50px, 21.531px + 8.134vw, 84px);
	}
    .menu {
	display: none; /* SPでは初期状態でメニューを非表示 */
	flex-direction: column;
	gap: 20px;
	background-color: #ffffff;
	padding: 20px;
	position: absolute;
	top: 36px;
	right: 0px;
	width: 200px;
    }
    .menu.active {
	display: flex; /* ハンバーガーメニューをクリックすると表示 */
	align-items: flex-start;
    }
    .hamburger-menu {
        display: flex; /* SPではハンバーガーボタンを表示 */
    }
	.menu li:nth-child(4) a {
		padding: 0px 20px;
	}
.menu li a img {
	width: 7px;
	margin-top: 4px;
}
	.video-container {
		margin-top: clamp(50px, 21.531px + 8.134vw, 84px);
	}
	.h2-anim{
		letter-spacing: 3px;
	}
	.sec01 .inner{
		height: clamp(434px, 35.435px + 113.876vw, 910px);
	}
	.sec03 .inner{
		height: clamp(533px, 271.756px + 74.641vw, 845px);
	}
	.sec01 .imgArea img, .sec03 .imgArea img{
		position: relative;
	}
	.sec01 , .sec03 {
		padding: clamp(50px, 16.507px + 9.569vw, 90px) 0;
	}
	.sec01{
		background-image: url(../images/sp-bg01.svg);
	}
	.sec03{
		background-image: url(../images/sp-bg02.svg);
	}
	.sec04{
		background-image: url(../images/sp-bg03.svg);
	}
	.sec01 .imgArea, .sec03 .imgArea {
		top: 0px;
		height: auto;
	}
	.sec01 .imgArea img:nth-child(1), .sec03 .imgArea img:nth-child(1) {
		width: 73%;
		margin-top: clamp(100px, 61.483px + 11.005vw, 146px);
		margin-left: auto;
	}
	.sec03 .imgArea img:nth-child(1) {
		height: auto;
		aspect-ratio: 292 / 149;
		object-fit: cover;
	}
	.sec01 .imgArea img:nth-child(2), .sec03 .imgArea img:nth-child(2) {
		width: 71%;
		margin-top: 70px;
		bottom: inherit;
	}
	.sec03 .imgArea img:nth-child(2) {
		margin-top: 210px;
		height: auto;
		aspect-ratio: 292 / 157;
	}
	.sec01 .imgArea img:nth-child(3) {
	width: 58.4%;
	height: auto;
	bottom: 0px;
		left: 41.63%;
	right: 0;
	aspect-ratio: 229 / 159;
	object-fit: cover;
		margin-top: -72px;
	}
.sec01 p, .sec03 p, .sec05 p {
	margin: clamp(90px, -31.411px + 34.689vw, 235px) auto 0;
	padding: 5px;
	max-width: 474px;
}
.sec02 {
	padding-top: clamp(50px, 16.507px + 9.569vw, 90px);
	padding-bottom: clamp(50px, 16.507px + 9.569vw, 90px);
}
.sec02 h2 {
	font-size: clamp(19px, 16.488px + 0.718vw, 22px);
	margin-bottom: clamp(145px, 2.656px + 40.67vw, 315px);
	margin-left: auto;
	margin-right: auto;
}
.sec02 .inner {
	flex-direction: column;
	position: relative;
}
.sec02 .sec02Left {
	width: 100%;
}
.sec02 .sec02Left p {
	margin: 20px auto;
	text-align: center;
}

.sec02 .sec02Left a, .sec04 .sec04Footer a {
	margin: 20px auto 0px;
	width: 140px;
	height: 25px;
	font-size: 12px;
	border-radius: clamp(20px, 3.254px + 4.785vw, 40px);
	font-family: "A-OTF-ShinGoPro";
	gap: 5px;
	padding: 4px 0 3px;
}
.sec02 .sec02Left a img, .sec04 .sec04Footer a img{
	margin-top: -1px;
}
.sec02 .sec02Right {
	width: 65%;
	top: 35px;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0 auto;
	position: absolute;
	filter: none;
}
	.sec04{
		padding: clamp(50px, 16.507px + 9.569vw, 90px) 0;
	}
.sec04 h2 {
	font-size: clamp(13px, 10.488px + 0.718vw, 16px);
}
.sec04 h2 img {
	width: 15px;
	height: auto;
	margin: 5px 5px;
}
.sec04 .inner {
	flex-direction: column;
	gap: 70px;
}
.sec04 .inner > div {
	width: 100%;
}
.sec04 .inner > div:nth-last-child(1){
	margin-top: -30px;
}
.sec04LeftInner{
	max-width: 430px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	margin-top: 20px;
}
.sec04 .zoom-image {
	width: 52%;
}
.sec04 .zoom-image:nth-child(1) {
	margin: 50px auto 20px;
	transition: opacity 1s cubic-bezier(.2,0,.05,1), transform 1s cubic-bezier(.2,0,.05,1);
}
.sec04 .zoom-image:nth-child(2) {
	width: 28%
}
.sec04 .zoom-image:nth-child(3) {
	display: none;
}
.sec04 .zoom-image:nth-child(4) {
	display: none;
}
.sec04 .zoom-image:nth-child(5) {
	display: none;
}
.sec04 .zoom-image:nth-child(6) {
	width: 55%;
	display: block;
	top: -22%;
	max-width: 300px;
}
.sec04 .zoom-image:nth-child(7) {
	width: 40%;
	display: block;
	top: -8%;
	max-width: 210px;
}
.sec04 .zoom-image:nth-child(8) {
	width: 60%;
	display: block;
	bottom: -40px;
	max-width: 300px;
}
.sec04RightInner{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}
.graph-container{
	height: clamp(98px, 1.708px + 27.512vw, 213px);
	margin-top: clamp(10px, -0.048px + 2.871vw, 22px);
	width: 69%;
	left: 28%;
}
.graph-bar {
	width: clamp(22px, -3.763px + 6.87vw, 49px);
	height: clamp(102px, 1.522px + 28.708vw, 222px)
}
/* グレー部分のアニメーション */
@keyframes growGray {
	0% {
		height: 0;
	}
	100% {
		height: clamp(38px, 1.158px + 10.526vw, 82px);
	}
}

/* 赤い部分のアニメーション */
@keyframes growRed01 {
	0% {
		height: 0;
	}
	100% {
		height: clamp(12px, 1.115px + 3.11vw, 25px);
	}
}
@keyframes growRed02 {
	0% {
		height: 0;
	}
	100% {
		height: clamp(24px, 2.230px + 6.22vw, 50px);
	}
}
@keyframes growRed03 {
	0% {
		height: 0;
	}
	100% {
		height: clamp(36px, 3.344px + 9.33vw, 75px);
	}
}
@keyframes growRed04 {
	0% {
		height: 0;
	}
	100% {
		height: clamp(50px, -0.239px + 14.354vw, 110px);
	}
}
@keyframes growRed05 {
	0% {
		height: 0;
	}
	100% {
		height: clamp(60px, 1.388px + 16.746vw, 130px);
	}
}
.sec05{
	padding: clamp(50px, 16.507px + 9.569vw, 90px) 0;
}
.sec05 .sec05Inner {
	margin-top: 40px;
}
.sec05 .sec05Inner h3 {
	font-size: clamp(13px, 10.488px + 0.718vw, 16px);
}
.sec05 .sec05Inner h4.sec05h4 {
	line-height: 1.4;
	font-size: clamp(13px, 10.488px + 0.718vw, 16px);
	padding: 4px 5px 5px;
}
.sec05 .sec05Inner p {
	margin-top: -3px;
	padding-top: 3px;
}
.sec05 > img {
	width: 100vw;
	filter: none;
	top: 150px;
	right: 0;
}
footer .footerLink .footerLinkInner:nth-child(1){
	background-image: url("../images/cont-bg.png");
}
footer .footerLink .footerLinkInner:nth-last-child(1){
	background-image: url("../images/recruit-bg.png");
}
footer .footerLink {
	flex-direction: column;
}
footer .footerLink .footerLinkInner {
	width: 100%;
	height: clamp(120px, 19.522px + 28.708vw, 240px);
}
footer .footerLink .footerLinkInner a {
	width: 160px;
	height: auto;
	font-size: 12px;
	border-radius: clamp(20px, 3.254px + 4.785vw, 40px);
	font-family: "A-OTF-ShinGoPro";
	padding: 8px 0 7px;
}
footer .footerLink .footerLinkInner a img {
	width: 9px;
	margin-left: 5px;
	margin-top: -1px;
}
footer .footerLeft p {
	font-size: clamp(12px, 10.092px + 0.509vw, 14px);
}
footer .footerRight {
	margin-top: 50px;
}

footer .footerRight ul {
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-left: -5px
}
footer .footerRight ul li a {
	font-size: clamp(12px, 10.092px + 0.509vw, 14px);
	padding: 10px;
}
footer .footerLeft img{
	width: auto;
	height: clamp(19px, 14.813px + 1.196vw, 24px);
}
footer .footerLeft a{
	width: 160px;
	height: 40px;
	justify-content: center;
	align-items: center;
	font-size: clamp(12px, 9.488px + 0.718vw, 15px);
}
footer .footerLeft a img {
	width: 16px;
}
}