@charset "UTF-8";

/* ===============================================
    共通CSSに対して上書き
================================================= */
main {
    margin-top: 50px;
}

@media print, screen and (min-width: 600px) {
    main {
        margin-top: 80px;
    }
}

/* ===============================================
    各ページのCSS
================================================= */

/* パララックスエリア */
.ly_parallaxArea {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    min-height: 300vh;
    background-color: #dcf0ff;
}

/* メインコンテンツ */
main {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    min-height: 300vh;
}

/* メインビジュアル背景（固定） */
.bl_mainVisual_bg {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 600px;
    width: 100%;
    height: 355px;
    overflow: hidden;
    z-index: 0;
    background-color: #dcf0ff;
}

.bl_mainVisual_img {
    position: absolute;
    left: -135.55%;
    top: -48.55%;
    width: 278.72%;
    height: 278.72%;
    max-width: none;
    object-fit: cover;
    transform-origin: center center;
    will-change: left, width, height, top, transform, filter;
}

/* メインビジュアル */
.parallaxArea_first {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 600px;
    width: 100%;
    height: 355px;
    overflow: hidden;
    z-index: 1;
    background-color: transparent;
}

.bl_mainVisual_text {
    position: absolute;
    left: 50%;
    top: calc(100% / 375 * 17);
    transform: translateX(-50%);
    width: calc(100% / 375 * 345);
    font-size: calc(100% / 375 * 24);
    line-height: 1.4;
    opacity: 0;
    z-index: 2;
    will-change: opacity;
}

/* アイコン（ワンソース：大を使用、アニメーションで縮小） */
.bl_mainVisual_icon {
    position: absolute;
    left: 50%;
    top: calc(100% / 375 * 105);
    transform: translate(-50%, 0);
    transform-origin: center top;
    width: calc(100% / 375 * 240);
    /* height: calc(100% / 375 * 240); */
    opacity: 0;
    z-index: 3;
    will-change: opacity, width, height, left, top, transform;
}

/* PC表示（SPの1.6倍） */
@media print,
screen and (min-width: 600px) {
    /* パララックスエリア */
    .ly_parallaxArea {
        min-height: 320vh;
    }

    /* メインコンテンツ */
    main {
        min-height: 320vh;
    }

    /* メインビジュアル背景 */
    .bl_mainVisual_bg {
        top: 80px;
        height: 568px;
    }

    /* メインビジュアル */
    .parallaxArea_first {
        top: 80px;
        height: 568px;
    }

    /* メインビジュアルテキスト（PC：600pxで47px） */
    .bl_mainVisual_text {
        top: calc(100% / 600 * 47);
        font-size: calc(100% / 600 * 38.4);
    }

    /* アイコン（PC：600pxで368px固定） */
    .bl_mainVisual_icon {
        top: calc(100% / 600 * 168);
        width: calc(100% / 600 * 368);
        height: calc(100% / 600 * 370);
    }
}


.bl_mainVisual_koshu {
    position: absolute;
    top: 52.8%;
    left: -100%;
    width: calc(100% / 375 * 179.49);
    opacity: 0;
    z-index: 3;
    will-change: opacity, left;
}
.bl_mainVisual_robo {
    position: absolute;
    top: calc(100% / 375 * 190);
    right: -100%;
    width: calc(100% / 375 * 112);
    opacity: 0;
    z-index: 3;
    will-change: opacity, right;
}

.parallaxArea_second {
    position: fixed;
    top: calc(50px + 355px - 50px);
    left: 50%;
    transform: translateX(-50%);
    max-width: 600px;
    width: 100%;
    max-height: 987px;
    min-height: 617px;
    z-index: 2;
    padding: 0 15px;
}
@media print, screen and (min-width: 600px) {
    .parallaxArea_second {
        top: 570px;
    }
}

.second_text_01 {
    display: block;
    margin: 0 auto;
    padding-top: calc(100% / 375 * 14);
    width: calc(100% / 375 * 318);
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
}

.second_text_02 {
    display: block;
    margin-top: calc(100% / 375 * 24);
    margin-left: 0;
    width: calc(100% / 375 * 243);
    opacity: 0;
    transform: translateX(100%);
    will-change: opacity, transform;
}

.kyt_line {
    position: absolute;
    top: calc(100vw / 375 * 130);
    left: 0;
    width: 100%;
    opacity: 0;
    z-index: 300;
    will-change: opacity;
}

/* PC表示（600px以上は599pxで固定） */
@media print,
screen and (min-width: 600px) {
    .kyt_line {
        top: calc(599px / 375 * 160); /* 599pxで固定: 255.573px */
        max-width: 600px;
    }
}
.kyt_icon {
    position: absolute;
    left: 0;
    /* top: 0; */
    object-fit: cover;
    transform-origin: center center;
    will-change: left, width, height, top, transform, filter;
    z-index: 310;
    opacity: 0;
    width: 100%;
}


/* parallaxArea_third */
.parallaxArea_third {
    position: fixed;
    top: calc(50px + 355px - 50px);
    left: 50%;
    /* transformはGSAPのxPercentで制御するため、CSSでは設定しない */
    max-width: 600px;
    width: 100%;
    z-index: 3;
    padding: 0 15px;
    opacity: 0;
}

/* third_text_01（下からスルッと表示） */
.third_text_01 {
    display: block;
    margin: -5.3333% auto 0;
    width: 100%;
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
}

/* third_text_02（下からふわっと表示） */
.third_text_02 {
    display: block;
    margin: calc(100% / 375 * 24) auto 0;
    width: calc(100% / 345 * 318);
    opacity: 0;
    transform: translateY(40px);
    will-change: opacity, transform;
}

/* Footer非表示（初期状態、最後のスクロールで表示） */
.ly_footer {
    opacity: 0;
    visibility: hidden;
    will-change: opacity, visibility;
}
.parallaxArea_last {
    position: fixed;
    bottom: 0; /* 初期状態で画面下に配置（footerの高さ分はJavaScriptで設定） */
    left: 50%;
    transform: translateX(-50%);
    max-width: 600px;
    width: 100%;
    /* background: #0097E0; */
    padding: 0;
    z-index: 4;
    opacity: 0;
    will-change: bottom, transform, opacity;
}
.last_img {
    width: 100%;
}
@media print, screen and (min-width: 600px) {
    .parallaxArea_last {
        margin-top: 130px;
    }
}