@charset "UTF-8";
html {
    overflow-x: hidden;
    width: 100%;
    font-size: min(calc(1000vw / 1600), 10px);
}
body{
    font-family: "Zen Old Mincho", serif;
    color: #333;
    margin: 0;
    padding: 0;
    background-color: #000;
    overflow-x: hidden;
    width: 100%;
}

/* ローディング画面 */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 1s ease, visibility 1s ease;
}

.loading.is-loaded {
    opacity: 0;
    visibility: hidden;
}

.loading__logo {
    margin-bottom: 4rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    display: flex;
    gap: 4rem;
    justify-content: center;
    align-items: center;
}

.loading__logo figure {
    width: 20rem;
}
.loading__logo img {
    width: 100%;
    height: auto;
}

.loading__text {
    font-size: 3.2rem;
    letter-spacing: 0.15em;
    margin-bottom: 8rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.3s forwards;
}

.loading__bar-wrap {
    width: 30rem;
    height: 1rem;
    background-color: #D9D9D9;
    border-radius: 40px;
    overflow: hidden;
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.5s forwards;
}

.loading__bar {
    width: 0;
    height: 100%;
    background-color: #1262AB;
    border-radius: 40px;
    animation: loadingBar 2.5s ease-in-out 0.8s forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(2rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loadingBar {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: min(calc(1000vw / 375), 10px);
    }
    .loading__logo{
        flex-direction: column;
    }
    .loading__logo figure{
        width: 16rem;
    }
}

/* 親要素：ここで1ページずつの挙動を制御 */
.one-page-container {
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory; /* 縦方向に強制スナップ */
    scroll-behavior: smooth;
    width: 100%;
}

/* c-section06以降は通常スクロール（scroll-snap解除） */
.one-page-container.is-free-scroll {
    scroll-snap-type: none;
}

/* アニメーション中スクロールロック用 */
.one-page-container.is-locked {
    overflow: hidden;
}

/* 念のため、body側もロック */
.page.is-locked {
    overflow: hidden;
    touch-action: none;
}

/* 子要素：各セクション */
.scroll-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    position: relative;
    color: white;
    transition: opacity 0.3s ease;
    opacity: 1;
    --vh: 1vh; /* スマホでのビューポート高さ調整用 */
    --scroll-indicator-height: 110px; /* スクロールインジケーターの高さ（PC） */
    --available-vh: 1vh; /* ウィンドウの高さ - スクロールインジケーターの高さ（スマホ用） */
}

/* c-section06以降はscroll-snapを無効化 */
.c-section06,
.c-section__07,
footer {
    scroll-snap-align: none;
}

/* 画面外に消えた時に非表示 */
.scroll-section.is-hidden {
    opacity: 0;
}

/* 背景動画：画面全体に固定 */
.video-background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

.c-video-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.0s ease-in-out; /* フェード速度 */
}

.c-video-bg__video.is-active {
    opacity: 1;
}

.c-video-bg__video#video-sec01 {
    top: unset;
    bottom: -17vh;
}

/* ========================================================================== */
/* js animation */
/* ========================================================================== */
/* --- 共通の基本設定 --- */
.js-stepFedeIn-item {
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease, filter 1s ease;
    will-change: opacity, transform, filter; /* パフォーマンス向上 */
}

/* パターンB: スケール + ぼかし（別途クラスがある場合） */
.js-scaleBlur {
    transform: scale(1.2);
    filter: blur(5px);
    font-size: 0;
    transition: opacity 3s ease, transform 3s ease, filter 3s ease;
}

/* .js-scaleBlur 内の文字を個別に時間差アニメーションさせる */
.js-scaleBlur span {
    display: inline-block;
    opacity: 0;
    transform: scale(1.2);
    filter: blur(5px);
    transition: opacity 1s ease, transform 1s ease, filter 1s ease;
}

/* 親要素に .is-show が付いたときに子spanを順番に表示 */
.js-stepFedeIn-item.is-show.js-scaleBlur span {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* 連番クラスごとのディレイ設定 */
.js-scaleBlur .is-blur01 {
    transition-delay: 0s;
}
.js-scaleBlur .is-blur02 {
    transition-delay: 0.3s;
}
.js-scaleBlur .is-blur03 {
    transition-delay: 1s;
}
.js-scaleBlur .is-blur04 {
    transition-delay: 0.9s;
}

/* --- 表示状態（is-showがついた時） --- */
.js-stepFedeIn-item.is-show {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* --- 画像のスケールアニメーション（枠固定） --- */
.js-stepFedeIn-item:has(img),
.js-stepFedeIn-item02,
.js-stepFedeIn-item03 {
    overflow: hidden;
}

.js-stepFedeIn-item img {
    transform: scale(1.2);
    transition: transform 2.5s ease-out;
    will-change: transform;
}

.js-stepFedeIn-item.is-show img {
    transform: scale(1);
}



/* ========================================================================== */
/* コンテンツごとのstyle */
/* ========================================================================== */

.c-section__title {
    font-size: 5.4rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.c-section__subtitle {
    font-size: 1.8rem;
    letter-spacing: 0.2em;
    margin-bottom: 3rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.c-section__description {
    font-size: 2rem;
    line-height: 2;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 768px) {
    .c-section__title {
        font-size: 3.2rem;
    }
    
    .c-section__subtitle {
        font-size: 1.4rem;
    }
    
    .c-section__description {
        font-size: 1.4rem;
    }
    
    .loading__text {
        font-size: 2rem;
        padding: 0 2rem;
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .c-section01 .c-section__title {
        text-align: center;
        margin-left: 3rem;
    }
    .c-section01 .c-section__description {
        margin-bottom: 4rem;
    }

}



.c-section02 {
    position: relative;
    min-height: 100vh;
}

/* 中央に固定される基準コンテナ */
.c-section02__inner {
    position: relative;
    width: 100%;
    max-width: 128rem;
    height: 100%;
    margin: 0 auto;
}
.c-section02 .js-stepFedeIn-item01,
.c-section02 .js-stepFedeIn-item02,
.c-section02 .js-stepFedeIn-item03 {
    position: absolute;
}

.c-section02 .js-stepFedeIn-item01 {
    top: calc(50% - calc(384 / 928 * 100vh));
    left: 14rem;
}

.c-section02 .js-stepFedeIn-item02 {
    top: calc(50% + calc(66 / 928 * 100vh));
    left: 4rem;
    width: 50rem;
}

.c-section02 .js-stepFedeIn-item03 {
    top: 50%;
    left: 74rem;
    transform: translateY(-50%);
    width: 50rem;
}

/* video-sec02 用マスク（動画とコンテンツの間） */
.c-section02::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #092808;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 0;
}

@media screen and (max-width: 768px) {
    .c-section02 .js-stepFedeIn-item01{
        top: calc(var(--available-vh, 1vh) * 5);
        left: 2rem;
    }
    .c-section02 .js-stepFedeIn-item02 {
        top: calc(var(--available-vh, 1vh) * 42);
        left: 2rem;
        width: 22rem;
    }
    .c-section02 .js-stepFedeIn-item03 {
        top: calc(var(--available-vh, 1vh) * 52);
        left: unset;
        right: 2rem;
        width: 18rem;
        transform: unset;
    }
}

/* video-sec03 用マスク */
.c-section03::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #211A05;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 0;
}

/* video-sec04 用マスク */
.c-section04::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #051B21;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 0;
}

/* video-sec05 用マスク */
.c-section05::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 0;
}

/* コンテンツをマスクより前面に */
.c-section02__inner {
    position: relative;
    z-index: 1;
}

/* マスク表示状態 */
.c-section02.is-mask-on::before,
.c-section03.is-mask-on::before,
.c-section04.is-mask-on::before {
    opacity: 0.8;
}
.c-section05.is-mask-on::before {
    opacity: 0.6;
}

/* c-section03 */
.c-section03__inner {
    position: relative;
    width: 100%;
    max-width: 128rem;
    height: 100%;
    margin: 0 auto;
}
.c-section03 .js-stepFedeIn-item01,
.c-section03 .js-stepFedeIn-item02,
.c-section03 .js-stepFedeIn-item03 {
    position: absolute;
}

.c-section03 .js-stepFedeIn-item01 {
    top: calc(50% + calc(4 / 928 * 100vh));
    left: 69rem;
}

.c-section03 .js-stepFedeIn-item02 {
    top: calc(50% - calc(304 / 928 * 100vh));
    left: 8.2rem;
    width: 50rem;
}

.c-section03 .js-stepFedeIn-item03 {
    top: calc(50% - calc(394 / 928 * 100vh));
    left: 77rem;
    width: 50rem;
}

@media screen and (max-width: 768px) {
    .c-section03 img{
        width: unset;
        height: 100%;
    }
    .c-section03 .js-stepFedeIn-item01 {
        top: calc(var(--available-vh, 1vh) * 25);
        left: 2rem;
    }
    .c-section03 .js-stepFedeIn-item02 {
        /* topはJavaScriptで動的に設定（item01の高さ+40px） */
        left: 2rem;
        width: unset;
        height: calc(var(--available-vh, 1vh) * 23.7);
    }
    .c-section03 .js-stepFedeIn-item03 {
        top: calc(var(--available-vh, 1vh) * 2.5);
        left: unset;
        right: 2rem;
        width: unset;
        height: 19.75vh;
    }
}

/* c-section04 */
.c-section04__inner {
    position: relative;
    width: 100%;
    max-width: 128rem;
    height: 100%;
    margin: 0 auto;
}
.c-section04 .js-stepFedeIn-item01,
.c-section04 .js-stepFedeIn-item02 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.c-section04 .js-stepFedeIn-item01 {
    left: 7rem;
}

.c-section04 .js-stepFedeIn-item02 {
    left: 77rem;
    width: 50rem;
}

@media screen and (max-width: 768px) {
    .c-section04__inner{
        padding: 0 2rem;
    }
    .c-section04 .js_stepFedeIn{
        position: absolute;
        top: calc(var(--available-vh, 1vh) * 50);
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 4rem);
        padding-bottom: 12vh;
    }
    .c-section04 .js-stepFedeIn-item01,
    .c-section04 .js-stepFedeIn-item02 {
        position: unset;
        top: unset;
        transform: unset;
        left: unset;
    }
    .c-section04 .js-stepFedeIn-item02{
        margin: 10vw auto 0;
        width: 100%;
        height: 72.6vw;
        display: flex;
        justify-content: center;
    }
    .c-section04 .js-stepFedeIn-item02 img{
        width: unset;
        height: 100%;
    }
}


.c-section05__inner {
    position: relative;
    width: 100%;
    max-width: 128rem;
    height: 100%;
    margin: 0 auto;
}

.c-section05 .js-stepFedeIn-item01 {
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%) scale(1);
    left: 50%;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .c-section05 .js-stepFedeIn-item01 {
        top: calc(var(--available-vh, 1vh) * 50);
    }
    
    /* Chrome専用の調整（スマホ） */

    .is-chrome-mobile .c-section05 .js-stepFedeIn-item01,
    .is-chrome-mobile .c-section06 .js_stepFedeIn{
        top: calc(var(--available-vh, 1vh) * 48) !important;
    }
    .is-chrome-mobile .c-section04 .js_stepFedeIn{
        top: calc(var(--available-vh, 1vh) * 30) !important;
    }
}

/* c-section06 */
.c-section06 {
    position: relative;
    background-color: #fff;
}

.c-section06::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../../common/img/140th/sec06_bg.png') no-repeat center center;
    background-size: cover;
    transition: opacity 1s ease;
    z-index: 0;
    opacity: 0;
}

.c-section06.is-bg-visible::before {
    opacity: 1;
}

.c-section06__inner {
    position: relative;
    width: 100%;
    max-width: 128rem;
    height: 100%;
    margin: 0 auto;
}

.c-section06 .c-section__title {
    color: #333;
    text-shadow: none;
}
.c-section06 .c-section__description {
    color: #333;
    text-shadow: none;
}

.c-section06 .c-section__box--item {
    margin: 12rem auto ;
}

.c-section06 .js_stepFedeIn {
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%) scale(1);
    left: 50%;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .c-section06{
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    .c-section06 .js_stepFedeIn {
        top: calc(var(--available-vh, 1vh) * 50);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .c-section06__inner {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 2rem;
    }
}

/* c-section07 */
section.scroll-section.c-section__07 {
    background-color: #fff;
    height: unset;
}
.scroll-section.c-section__07.is-hidden{
    opacity: 1!important;
}
.c-section07__inner {
    position: relative;
    width: 100%;
    max-width: 100rem;
    margin: 0 auto;
    padding: 12rem 0 4rem;
}

.c-section07__inner .content01 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}
.c-section07__inner .content01 img {
    width: 13.4rem;
    margin-right: 4rem;
}
.c-section07__inner .content01 p {
    line-height: 1.75;
    letter-spacing: 0.2rem;
    color: #333;
}

.c-section07__inner .content02{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 4rem auto 0;
    gap: 4rem;
}

.c-section07__inner .content02 a{
    width: 100%;
    max-width: 48rem;
    background-color: #1262AB;
    transition: 0.3s;
    position: relative;
}

.c-section07__inner .content02 a:hover{
    opacity: 0.8;
}

.c-section07__inner .content02 a figure{
    width: 100%;
    object-fit: cover;
    position: relative;
    overflow: hidden;
}

.c-section07__inner .content02 a figure img{
    width: 100%;
}

.c-section07__inner .content02 a p{
    flex: 1;
    text-align: center;
    color: #fff;
    font-weight: bold;
    justify-content: center;
    font-size: 2rem;
    letter-spacing: 0.3rem;
    height: 12rem;
    padding: 2rem;
    line-height: 1.3;
}

.c-section07__inner .content02 a p span{
    position: relative;
    display: block;
}
.c-section07__inner .content02 a p span::before{
    content: '';
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5rem;
    height: 0.7rem;
    background: url('../../common/img/140th/arrow.svg') no-repeat;
    background-size: cover;
    z-index: 0;
}

@media screen and (max-width: 768px) {
    .c-section07 {
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    .c-section07__inner{
        padding: 6rem 2rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .c-section07__inner .content01 img{
        margin-right: 0;
        margin-bottom: 2rem;
    }
    .c-section07__inner .content01{
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .c-section07__inner .content02{
        flex-wrap: wrap;
        gap: 2rem;
    }
    .c-section07__inner .content02 a{
        width: 100%;
        max-width: 100%;
    }
    .c-section07__inner .content02 a p{
        font-size: 1.8rem;
    }
    .c-section07__inner .content02 a figure{
        border-width: 0 0 15rem 2.5rem;
    }
}



/* ==========================================================================
   c-link__radius
   ========================================================================== */
   .c-link__radius {
    display: block;
    max-width: 35rem;
    width: 100%;
    padding: 2rem 4rem;
    border-radius: 100px;
    border: 1px solid #1262AB;
    background-color: #1262AB;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    color: #fff;
    position: relative;
    transition: .3s;
    line-height: 1.2;
    overflow: hidden;
    z-index: 1;
    margin: 4rem auto 0;
}

.c-link__radius::after {
    content: "";
    position: absolute;
    right: 2.8rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg) translateY(-50%);
    transition: .3s;
}

.c-link__radius:hover {
    background-color: #fff;
    color: #1262AB;
}

.c-link__radius:hover::after{
    border-top: 2px solid #1262AB;
    border-right: 2px solid #1262AB;
}

/* footer */
footer{
    text-align: center;
    padding: 2rem 0;
    font-size: 1.4rem;
    color: #fff;
    background-color: #1262AB;
}



/* ==========================================================================
   スクロールインジケーター（固定位置）
   ========================================================================== */
.c-scroll-indicator {
    position: fixed;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    pointer-events: none;
}

/* 表示状態 */
.c-scroll-indicator.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: pointer;
}

/* スクロール中は非表示 */
.c-scroll-indicator.is-scrolling {
    opacity: 0;
    visibility: hidden;
}

.c-scroll-indicator__line {
    width: 2px;
    height: 6rem;
    background-color: #979797;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.c-scroll-indicator__ball {
    width: 2px;
    height: 2rem;
    background-color: #fff;
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
    animation: scrollIndicatorBall 1.5s ease-in-out infinite;
}

@keyframes scrollIndicatorBall {
    0% {
        top: 0;
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        top: calc(100% - 2rem);
        opacity: 0;
    }
}

.c-scroll-indicator__text {
    margin-top: 1rem;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    color: #fff;
}

/* c-section06表示中は文字色を変更（JavaScriptで制御） */
.c-scroll-indicator.is-dark-mode .c-scroll-indicator__text {
    color: #333;
}

.c-scroll-indicator.is-dark-mode .c-scroll-indicator__ball {
    background-color: #333;
}

@media screen and (max-width: 768px) {
    .scroll-section {
        --scroll-indicator-height: 90px; /* スクロールインジケーターの高さ（スマホ） */
    }
    
    .c-scroll-indicator {
        bottom: 3rem;
    }
    
    .c-scroll-indicator__line {
        height: 5rem;
    }
    
    .c-scroll-indicator__ball {
        height: 1.6rem;
    }
    
    @keyframes scrollIndicatorBall {
        0% {
            top: 0;
            opacity: 1;
        }
        50% {
            opacity: 1;
        }
        100% {
            top: calc(100% - 1.6rem);
            opacity: 0;
        }
    }
    
    .c-scroll-indicator__text {
        font-size: 1rem;
    }
}

/* utility */
.u-align--center{
    text-align: center;
}

.u-only--sp{
    display: none;
}
@media screen and (max-width: 768px) {
    .u-only--sp{
        display: block;
    }
}

.u-content--right{
    margin: 0 0 0 auto;
}
.u-align--right{
    text-align: right;
}

.c-link_wrap{
    margin-top: 12rem;
}
@media screen and (max-width: 768px) {
    .c-link_wrap{
        margin-top: 6rem;
    }
}

.c-text-link{
    display: block;
    max-width: 31rem;
    position: relative;
    transition: 0.3s;
    color: #1262AB;
}
.c-text-link span{
    padding-right: 10rem;
    position: relative;
    display: block;
}
.c-text-link::before{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 7rem;
    height: 1rem;
    background: url('../../common/img/140th/arrow_b.svg') no-repeat;
    z-index: 0;
}

.c-text-link:hover{
    opacity: 0.8;
}