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

/* トップページ */
.front-page {
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
.front-page.is-visible {
opacity: 1;
}

/* KV */
.front-page .key-visual {
height: 100vh; /* ビューポートの高さに合わせる */
display: flex; /* flexboxで子要素を配置 */
flex-direction: column; /* 縦に並べる */
justify-content: center; /* 垂直方向中央揃え */
align-items: center; /* 水平方向中央揃え */
position: relative; /* 相対位置に設定 */
overflow: hidden; /* はみ出した部分を隠す */
}

.front-page .key-visual::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.2);
z-index: 5;
}

.front-page .key-visual .move {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}

.front-page .key-visual .move video {
position: absolute;
top: 50%;
left: 50%;
object-fit: cover;
transform: translate(-50%, -50%);
width: 101%;
height: 101%;
}



.front-page .key-visual .image-wrapper {
position: absolute;
width: 100%;
height: 100%;
clip-path: inset(0 0 0 0); /* 必要に応じて調整 */
z-index: 1; /* 初期状態では下のレイヤー */
}

.front-page .key-visual .image-wrapper img {
width: 100%;  /* 親要素の幅に合わせる */
height: 100%; /* 親要素の高さに合わせる */
object-fit: cover;  /* 親要素に合わせて画像を切り抜く */
object-position: center; /* 画像の中央に配置 */
}

.front-page .key-visual .image-wrapper.show {
z-index: 2; /* 現在表示されるスライドを前面に */
clip-path: inset(0 0 0 0); /* 表示全体 */
transition: transform 8s ease-in-out; /* 拡大のアニメーションを追加 */
transform: scale(1.1); /* 1.1倍に拡大 */
}

.front-page .key-visual .image-wrapper.hidden {
transform: scale(1.0); /* 元のサイズに戻す */
transition: transform 8s ease-in-out; /* 戻すアニメーションを追加 */
}

.front-page .key-visual .image-wrapper.leave {
transition: clip-path 2.6s cubic-bezier(0.77,0,0.2,1), transform 1s ease-in-out; /* クリップパスと縮小のアニメーション */
z-index: 2; /* 消えるときは前面に配置 */
transform: scale(1.1); /* 拡大効果を保持 */
}

.front-page .key-visual .right-slide .image-wrapper.leave {
clip-path: inset(0 0 100% 0); /* 上から下に消えていく */
}

.front-page .key-visual .left-slide .image-wrapper.leave {
clip-path: inset(100% 0 0 0); /* 下から上に消えていく */
}

.front-page .key-visual .slider-indicator {
position: absolute;
bottom: 1.806vw;
left: 5.556vw;
display: flex;
align-items: center;
font-size: 1.2em;
gap: 1.111vw;
z-index: 3;
}

.front-page .key-visual .slider-indicator .current-slide,
.front-page .key-visual .slider-indicator .total-slides {
color: var(--primary);
font-size: var(--font-size-12);
font-weight: var(--font-weight-en-normal);
line-height: 1.5;
}

.front-page .key-visual .indicator-bar {
position: relative;
width: 9.722vw; /* インジケーターの幅 */
height: 0.069vw;
background-color: var(--gray-90);
overflow: hidden;
}

.front-page .key-visual .indicator-progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: var(--primary);
width: 0;
transition: width 5s linear; /* 5秒かけてインジケーターが伸びる */
}

.front-page .key-visual .description h1 {
font-size: 3.75vw;
line-height: 1.5;
color: #FFFFFF;
margin-bottom:40px;
}

.front-page .key-visual .description h1 span {
display: inline-block;
height: 1.23em;
}



@media (min-width: 768px) {
.front-page{
margin:0 auto 140px; 
}
.front-page .key-visual .slider-indicator {
position: absolute;
bottom: 26px;
left: 80px;
display: flex;
align-items: center;
font-size: 1.2em;
gap: 16px;
z-index: 3;
}

.front-page .key-visual .indicator-bar {
position: relative;
width: 140px; /* インジケーターの幅 */
height: 1px;
background-color: var(--gray-90);
overflow: hidden;
}

.front-page .key-visual .description {
position: absolute;
width: 90%;
bottom:5%;
left:2.5%;
z-index:50;
}

.front-page .key-visual .en_txt{
position: relative;
display: block;
font-size:5rem;
font-weight: 800;
line-height: .9;
letter-spacing: .1rem;
white-space: nowrap;
color:rgba(232,56,46,1);
margin-bottom:40px;
}


.front-page .key-visual .description h1 {
font-size:3.6rem;
font-weight:800;
line-height: 1;
margin-bottom:0px;
color: #FFFFFF;
letter-spacing: .1rem;
}

.front-page .key-visual .description h1 span {
display: inline-block; /* 下線が正しく表示されるようにする */
height: 1;
}

.front-page .key-visual .description p.fade-in-text {
font-size:1rem;
font-weight:600;
line-height: 1.8;
color: #FFFFFF;
margin-left: 5px;
}

.front-page .recruit-button {
bottom: 26px;
right: 32px;
width: 405px;
height: 75px;
border-radius: 4px;
border: solid 1px #FFFFFF;
background-color: rgba(255, 255, 255, 0.6); /* 背景色白、透明度60% */
backdrop-filter: blur(10px); /* 背景のぼかしエフェクト */
-webkit-backdrop-filter: blur(10px); /* Safari用のベンダープレフィックス */
display: flex; /* 2カラム表示のためにflexboxを使用 */
align-items: center;
}

.front-page .recruit-button img {
width: 110px;
height: auto; /* アスペクト比を保つ */
margin-right: 24px; /* 画像とテキスト間のスペース */
}

.front-page .recruit-button .recruit-text h2 {
font-size: 18px;
line-height: 1.5;
margin-bottom: 4px;
}

.front-page .recruit-button .recruit-text p {
font-size: 12px;
}

.front-page .recruit-button .recruit-text p::after {
content: "";
display: inline-block;
background-color: #FFFFFF;
width: 19px;
height: 1px;
margin-left: 8px;
vertical-align: middle;
}

.front-page .recruit-button .arrow-icon {
background: #FFFFFF;
border-radius: 50%;
width: 24px;
height: 24px;
position: absolute;
right: 16px;
}

.front-page .recruit-button .arrow-icon img {
width: 12px;
height: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}

.front-page .recruit-button .close-button {
position: absolute;
top: -12px;
right: -12px;
background: #FFFFFF;
border: none;
cursor: pointer;
border-radius: 50%;
width: 24px;
height: 24px;
}

.front-page .recruit-button .close-button img {
width: 12px;
height: 12px;
position: absolute;
margin: auto;
top: 0;
right: 0;
left: 0;
bottom: 0;
}



}
@media (max-width: 767px) {
.front-page .key-visual {
overflow: visible;
}

.front-page .key-visual .bg-slider .slider-container {
display: flex;
flex-direction: column; /* 縦に並べる */
width: 100%;
height: 100%;
}

.front-page .key-visual .bg-slider .slider-container .left-slide {
width: 100%; /* 横幅を100%に */
height: 50%; /* 高さを50%に変更 */
position: relative;
overflow: hidden;
}

.front-page .key-visual .bg-slider .slider-container .right-slide {
width: 100%;
height: 50%;
position: relative;
overflow: hidden;
}

.front-page .key-visual .bg-slider .slider-container .right-slide .move{
width: 100%; /* 横幅を100%に */
height: 100%; /* 高さを50%に変更 */
position: relative;
overflow: hidden;
}

.front-page .key-visual .bg-slider .slider-container .right-slide .move::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 101%;
height: 101%;
background:rgba(61, 145, 255, 0.2);
z-index: 1;
}

.front-page .key-visual .bg-slider .slider-container .right-slide .move video {
position: absolute;
top: 50%;
left: 50%;
object-fit: cover;
transform: translate(-50%, -50%);
width: 101%;
height: 101%;
}

.front-page .key-visual .right-slide .image-wrapper.leave {
clip-path: inset(0 100% 0 0); /* 右から左に消えていく */
}

.front-page .key-visual .left-slide .image-wrapper.leave {
clip-path: inset(0 0 0 100%); /* 左から右に消えていく */
}

.front-page .key-visual .description {
position: absolute;
width: 90%; /* 左右のマージン分（24px + 24px）を引いた幅 */
top:35%;
left: 5%; /* 左側に24pxの余白を確保 */
z-index:5;
}


.front-page .key-visual .en_txt{
position: relative;
display: block;
font-size:2.2rem;
font-weight: 800;
line-height: 1;
letter-spacing: .1rem;
white-space: nowrap;
color:rgba(232,56,46,1);
margin-bottom:30px;
}

.front-page .key-visual .description h1 {
font-size:1.6rem;
font-weight:800;
line-height: 1;
margin-bottom:10px;
color: #FFFFFF;
letter-spacing: .1rem;
}

.front-page .key-visual .description h1 span {
display: inline-block; /* 下線が正しく表示されるようにする */
height: 1;
}

.front-page .key-visual .description p.fade-in-text {
font-size:.8rem;
font-weight:600;
line-height: 1.8;
color: #FFFFFF;
margin-left: 5px;
}

.front-page .key-visual .move {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}

.front-page .key-visual .move video {
position: absolute;
top: 50%;
left: 50%;
object-fit: cover;
transform: translate(-50%, -50%);
width: 101%;
height: 101%;
}


}