@font-face {
    font-family: "MelunDisplayR";
    src: url("font/MelunDisplay-Regular.woff2") format(woff2) tech(variations);
}

@font-face {
    font-family: "MelunR";
    src: url("font/Melun-Regular.woff2") format(woff2) tech(variations);
}


body {
    background-color: #FFFDF6;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 0;
}

/* 全ての画像が親要素からはみ出ないようにする基本設定 */
img {
    max-width: 100%;
    height: auto;
}

/* レイヤー設計クラス*/
.layer-box {
    display: grid;
}

.layer {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

/* layer-0クラス ポール */
.layer-0 {
    z-index: -10;
    padding-top: 15vh;
    display: flex;
    justify-content: flex-end;
}

.sign_pole {
    background-color: #D9D9D9;
    width: 3.6vw;
    /* 73.46px */
    height: 100%;
    margin-right: 18vw;

}




.layer-1 {
  z-index: 1;      /* 高さを画面いっぱいにする */
  /* 内容がはみ出たら縦スクロールバーを出す */
}

/* Layer2クラス */
.layer-2 {
    z-index: 2;
}

.layer-3 {
    z-index: 3;
}

.layer-4 {
    z-index: 4;
}

.layer-5 {
    z-index: 5;
}

/* 虚無クラス */
.space {
    padding: 20vh;
}

/* Headerクラス */


.Header {
    height: 100vh;
    margin-bottom: 50vh;
}

.title {
    position: relative;
    align-items: start;
    height: 100vh;

}

/* Headerアニメーション群 */

#title_graex {
    position: absolute;
    left: 2.8vw;
    /* 50px / 1920px */
    top: 2.6vw;
    /* 50px / 1920px */
    width: 2.9vw;
}

#title_graex_left {
    position: absolute;
    transform: translateX(-4vw) translateY(2.6vw) rotate(-90deg);
    /* 70px, 50px */
    left: 2.5vw;
    top: 20.73vw;
    /* 398.03px */
    width: 9.3vw;
    /* 178.53px */
}

#title_graex_right {
    position: absolute;
    top: 2.6vw;
    /* 50px */
    right: 2.5vw;
    /* 100px */
    width: 11.0646vw;
}

#place {
    position: absolute;
    left: 29.6vw;
    /* 566.56px */
    top: 21.7vw;
    /* 408.19px */
    width: 17.45vw;
}

#anim_vec0 {
    position: absolute;
    left: 47vw;
    /* 900.22px */
    top: 4vw;
    /* 73.66px */
    width: 3.4661vw;
}

#anim_vec1 {
    position: absolute;
    left: 13.35vw;
    /* 255.46px */
    top: 6.35vw;
    /* 117.38px */
    width: 13.8755vw;
}

#anim_vec2 {
    position: absolute;
    left: 36.26vw;
    /* 695.21px */
    top: 8vw;
    /* 148.498px */
    width: 14.75vw;
}

#anim_vec3 {
    position: absolute;
    left: 35.17vw;
    /* 675.38px */
    top: 30.5vw;
    /* 561.23px */
    width: 7.67vw;
}

#anim_cat {
    position: absolute;
    right: 35vw;
    /* 675.38px */
    top: 0vw;
    /* 561.23px */
    width: 7.67vw;
}




/* タイトルBOX */

.Title_box {
    display: flex;
    margin-left: 2.5vw;
    align-items: end;
    height: 100vh;

}

#title26 {
    width: 32.8vw;
    margin-bottom: 1%;
}

#date {
    padding-left: 5.2vw;
    /* 100px */
    margin-top: auto;
    margin-bottom: 3%;
    /* -100px */
    width: 12.8542vw;
    height: auto;
}

.sign {
    position: absolute;
    display: grid;
    overflow: hidden;
    right: 0;
    width: 46vw;
    transform: translateY(9.6%);

}

#Sign_main {
    max-width: none;
    margin-right: -6.77vw;
    /* -130px */
    width: 54.53vw;
    /* 1047px */
    height: 54.5vw;
    /* 1047px */
}

#Sign_26 {
    margin: auto;
    transform: translateX(3.5vw);
    width: 25.8755vw;
}



/* conseptクラス */
.consept {
    display: grid;
    align-items: center;
    height: 99vh;
    font-size: 1.55vw;
}

.con_front {
    padding-top: 12%;
    /* 470px */
    display: grid;
    opacity: 0;
    overflow-x: hidden;
}


#con_text {
    line-height: 1.8em;
    color: #0048FF;
    font-family: "Gothic Medium BBB", "游ゴシック B", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;
    padding-left: 6vw;

}

#con_circle {
    width: 9em;
    padding-left: 6vw;
    margin-left: 4.7em;
    margin-bottom: -0.2em;
    margin-top: auto;
}

.con-line-repeat {
    width: 30em;
    height: 1em;
    margin: 6vw;
    margin-bottom: 6em;
    margin-top: auto;
    overflow: hidden;
}

#con_line {
    max-width: none;
    height: 1em;
}

.con_back {
    height: 100%;
    position: relative;
}

#anim_con1 {
    position: absolute;
    transform: translateX(-5.5vw) translateY(-65%);
    /* -85px */
    width: 40vw;
}

#anim_con2 {
    position: absolute;
    width: 18vw;
    left: 45vw;
    top: 0;
    bottom: 80%;
    margin: auto;
}

#anim_con3 {
    position: absolute;
    width: 3vw;
    left: 52vw;
    top: 0;
    bottom: 50%;
    margin: auto;
}

#anim_con4 {
    position: absolute;
    width: 3vw;
    right: 30vw;
    top: 10vh;
}

#anim_con5 {
    position: absolute;
    width: 4vw;
    right: 25vw;
    top: 18vh;
}

#anim_con6 {
    position: absolute;
    width: 50vw;
    bottom: 0;
    right: 8vw;
    transform: translateY(55%);
}

.pole_sign {
    position: absolute;
    width: 37vw;
    padding-bottom: 8%;
    top: 0;
    bottom: 0;
    right: 0;
    display: grid;
    align-items: center;
    overflow: hidden;
}

#pole_sign {
    max-width: none;
    width: 37vw;
}

#pole_bird {
    width: 10vw;
    transform: translateY(30%);
    margin-left: 5vh;
}


/* nooverクラス */
.noover {
    width: 81%;
    height: 200vh;
    /* 1505px */

    /* 230px */
    position: relative;
}

#nov_cat {
    position: absolute;
    width: 8vw;
    bottom: 50vh;
}

.noover_1 {
    margin-top: 30vh;
    display: grid;
    justify-items: right;
    align-items: center;
}

.noover-front {
    position: relative;


}

.noover-back {
    position: relative;

}

.noover-pole-1 {
    background-color: #D9D9D9;
    width: 10vw;
    height: 2vw;
}

#noover1 {
    display: flex;
    margin: 1vw 0 0 auto;
    width: 10vw;
}


#noover2 {
    width: 10vw;
    display: flex;
    margin: 1vw 0 0 auto;
}

/* Informationセクション */
.Information {
    height: 95vh;
}

.inf_back {
    width: 100vw;
    position: relative;
}

.inf_front {
    width: 50vw;
    height: 95vh;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 5vw;
}

#light-1 {
    width: 8vw;
    position: absolute;
    right: 37vw;
}



#light-3 {
    width: 8vw;
    position: absolute;
    bottom: 5vh;
    right: 35vw;
}

.inf-box {
    margin: 2vh 0;
    padding: 1vh 0;
}

.inf-blue-1 {
    width: auto;
    display: flex;
    align-items: flex-end;
    border-bottom: 2px solid #0048FF;
    padding: 1vh 0;
}

.blue-left {
    display: inline-block;
    width: 85%;
}

.blue-right {
    width: 15%;
    text-align: right;
}

.text {
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    font-weight: 400;
}


h2 {
     font-family: "Gothic Medium BBB", "游ゴシック B", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;

    font-size: 1vw;
    color: #EA0000;
}

.h3-small {

    font-size: 1.54vw;
    color: #0048FF;
}

.h3-big {
    font-family: "MelunDisplayR";
    font-size: 2vw;
    color: #0048FF;
}

h4 {
    font-family: "MelunR";
    font-size: 1.2vw;
    color: #0048FF;
}

h5 {
    font-family: "MelunR";
    font-size: 1vw;
    color: #0048FF;
}

.h5-map {
    margin: 3vh 0;
}

.inf_pole {
    position: absolute;
    width: 18vw;
    right: 0;
    margin-right: 10vw;
    margin-top: 1vh;
}


.map {
    width: 50vw;
    height: 35vh;
    border-radius: 10px;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    transition: 0.4s;
}

.map:hover{
    filter: none;
    -webkit-filter: none;
    }

/* SNSクラス */

#sns-sec {
    text-align: right;
    align-items: center;
    height: 99vh;
}

.sns_front {
    height: 100vh;
    width: 100vw;
}

#sns_title {
    width: 15vw;
    margin-right:11.5vw;
    margin-left: auto;
    margin-top: 5vh;
}

.sns_back {
    margin-right: 19vw;
    /* 200px */
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
    padding-top: 20vh;
}

#sns_love {
    position: absolute;
    width: 4vw;
    left: 45vw;
    top:30vh;
    transform: translateY(-30vh);
}

#sns_hey {
    position: absolute;
    width: 3vw;
    left: 15vw;
    transform: translateX(5vw) translateY(-5vh) rotate(-60deg);
}

#fire{
    position: absolute;
    width: 7vw;
    left: 5vw;
    bottom: 5vh;

}

.sns_hr {
    margin: 0;
    border: none;
}

.sns-pole-case {
    display: grid;
    align-items: center;
    height: 100%;
}

#sns-pole-box {
    width: 50vw;
    position: absolute;
    right: 0;

}

.phone{
    display: none;
}


.sns-pole {
    display: flex;
    width: 50vw;
    height: 3vh;
    margin-left: auto;
    background-color: #D9D9D9;
    margin-top: 10%;

}

#sns-sign {
    display: flex;
    width: 60vw;
    margin-left: auto;
    margin-right: 5%;
    background-color: transparent;
    position: relative;
}

.sns {
    position: relative;
    width: 12vw;
    padding: 0 2vw;
}

.sns-box {
    width: 18vw;
}

#sns-cat1 {
    position: absolute;
    width: 8vw;
    transform: translateX(25%) translateY(-65%);
}

#sns-cat2 {
    position: absolute;
    width: 8vw;
    transform: translateX(25%) translateY(-70%);
}

#sns_arrow {
    display: none;
}

#sns_arrow2 {
    display: none;
}




#long-box {
    padding-right: 18vw;
    padding-top: 3vh;
    width: 44vw;
}

/* SKYセクション */

.sky {
    height: 150vh;
    width: 100vw;
    overflow: hidden;
    z-index: -20; /* この行を追加 */
    margin-top: auto;
    margin-bottom: 100vh;
}

.sky-empty{
    height: 150vh;
}

.sky-back {
    position: relative;
    z-index: 0;

}

#sky {
    max-width: none;
    width: 120vw;
    height: auto;
    transform: translateX(-10vw);
    overflow: visible;

}

.sky-front {
    align-items: center;
    height: 100vh;
    margin: auto;
    padding-left: 15vw;
}

#sky-kokokara {
    width: 45vw;
    margin-right: 15vw;
}


.cloud {
    position: absolute;
    aspect-ratio: 2 / 1;
    top: 0;
    object-fit: cover;
    object-position: 50% 0%;
}

#cloud1 {
    width: 30vw;
    margin-top: 10vh;
    transform: translateX(-2vw);
}

#cloud2 {
    width: 20vw;
    margin-top: 20vh;
    margin-right: 1vw;
    right: 0;
}

#cloud3 {
    width: 25vw;
    margin-top: 90vh;
    margin-left: 10vw;
}


.bird {
    position: absolute;
    top: 60vh;
    left: 10vw;
}

#sky-bird {
    width: 20vw;
}

/* workセクション */

#work-sec {
    height: 101vh;
    width: 101vw;
    overflow: hidden;
}



.work-front {
    width: 100vw;
}

.work-back {
    margin-top: 5vh;
}


#work_title {
    display: flex;
    margin-left: auto;
    width: 25vw;
    transform: translateY(-5vh);
    margin-right: 7vw;
}


#work-text {
    margin-left: 3vw;
    font-size: 1.2vw;
    font-weight: 400;
    margin-bottom: 15vh;
    font-family: "Gothic Medium BBB", "游ゴシック B", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;

}

.slider-container {
    width: max-content ;
}

.slider {
    display: flex;
    animation: scroll 30s linear infinite;
}

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

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

.slider video {
    height: 60vh;
    margin: 0 1%; /* ← 現在の設定（左右に15pxの余白） */
    flex-shrink: 0;
    width: auto;
}


.footer-box {
    background-color: #D9D9D9;
    height: 10vh;
    width: 100vw;

}

#work_die {

    width: 15vw;
    margin-right: 11.5vw;
    margin-left: auto;
}

.work-footer {
    margin-top: auto;
    display: grid;
    width: 100vw;
}

.footer-box {
    display: flex;
}

#footer-left {
    width: 47vw;
    height: 10vh;
    padding: 0 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#fotter-title {
    width: 17vw;
}

#fotter-copy {
    width: 15vw;
}

#footer-right {
    width: 50vw;
    margin: auto 0;
    border-left: 1px solid #FFF;
}

.scroller {
    width: 100%;
    overflow: hidden;

}

.scroller__inner {
    padding: 0;
    margin: 1rem 0;
    display: flex;
    list-style: none;
    width: max-content;
    /* アニメーション設定 */
    animation: scroll 50s linear infinite;
}



.scroller__inner li {
    font-family: "MelunDisplayR";
    font-size: 1.2vw;
    padding: 0 1rem;
    /* テキストの左右の余白 */
    color: #FFF;
    /* テキストを改行させない */
}

.kousin{
    width: 100vw;
    margin-top: auto;
    margin-bottom: 10vh;
    overflow: hidden;
    z-index: -20;
    pointer-events: none;
}

/* UIセクション */

.ui {
    position: fixed;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-flow: column;
    pointer-events: none;
}


#ui-left {
    align-items: start;
    height: 22vh;
    margin: 2vw;
    opacity: 0;
}

/* 箱 */
.ui-box {
    bottom: 0;
    height: 40vh;
    pointer-events: auto;
}


.back_ui {
    transform: translateX(10%);
    padding: 1vh 0;

}

.back_ui :hover {
    transition: 0.1s;
    transform: translateX(-10%);
}

#ui-top {
    height: 8vh;
    max-width: none;
}

#back-top {
    width: 0vw;
    margin-left: auto;
}


#ui-info {
    height: 8vh;
    max-width: none;
}

#back-info {
    width: 0vw;
    margin-left: auto;
}


#ui-sns {
    height: 8vh;
    max-width: none;
}

#back-sns {
    width: 0vw;
    margin-left: auto;
}

#ui-concept {
    height: 5vh;
    max-width: none;
}

#back-concept {
    width: 0vw;
    margin-left: auto;
}


.scroll{
    position: fixed;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: end;
    align-items: flex-end;
    flex-flow: column;
    pointer-events: none;
}

#scroll_img{
    margin: 2%;
}




@media screen and (max-width: 480px) {
    /* 480px以下に適用されるCSS（スマホ用） */

    .sign_pole {
    background-color: #D9D9D9;
    width: 4.5vw;
    /* 73.46px */
    height: 100%;
    margin-right: 14.5vw;

    }

    .layer-pole {
    background-color: #D9D9D9;
    width: 4.5vw;
    /* 73.46px */
    height: 100%;
    margin-right: 14.5vw;

    }



    /* 虚無クラス */
    .space {
        padding: 1vh;
    }

    .title{
        overflow: hidden;
    }

    #title_graex {
        position: absolute;
        left: 5vw;
        /* 50px / 1920px */
        top: 13vw;
        /* 50px / 1920px */
        width: 13.8vw;
    }

    #title_graex_left {
        position: absolute;
        transform: translateX(-20vw) rotate(-90deg);
        /* 70px, 50px */
        left: 5vw;
        top: 85vh;
        /* 398.03px */
        width: 47.4vw;
        /* 178.53px */
    }

    #title_graex_right {
        position: absolute;
        top: 13vw;
        /* 50px */
        right: 2.5vw;
        /* 100px */
        width: 40.5vw;
    }

    #place {
        position: absolute;
        top: 70vh;
        /* 408.19px */
        width: 78vw;
        transform: translateX(-20vw)
    }

    #anim_vec0 {
        position: absolute;
        opacity: 0;
    }

    #anim_vec1 {
        position: absolute;
        transform: translateX(-20vw) rotate(13.92deg);
        left: 13.35vw;
        top: 17vh;
        width: 37vw;
    }

    #anim_vec2 {
        position: absolute;
        margin-top: 56vh;
        /* 148.498px */
        width: 39vw;
        transform: translateX(35vw)
    }

    #anim_vec3 {
        position: absolute;
        left: 30vw;
        /* 675.38px */
        top: 37vh;
        /* 561.23px */
        width: 20vw;
    }

    /* タイトルBOX */
    .Title_box {
        flex-direction: column;
        align-items: start;

    }

    #title26 {
        width: auto;
        height: 14vh;
        margin: auto;
        padding-top: 60%;
        padding-right: 20%;
    }

    #date {
        transform: rotate(-15deg);
        margin-top: 0;
        margin-bottom: 3%;
        /* -100px */
        margin-left: auto;
        margin-right: auto;
        width: auto;
        height: 15vh;

    }

    /* サインポール */
    .sign {
        position: absolute;
        display: grid;
        overflow: hidden;
        margin-top: 10vh;
        height: auto;
        width: 50vw;

    }

    #Sign_main {
        margin-right: -6.77vw;
        /* -130px */
        width: 65vw;
        height: auto;
    }

    #Sign_26 {
        margin: auto;
        transform: translateX(3.5vw);
        width: 30vw;
    }

    .ui{
        display: none;
    }

    /* conseptクラス */

    .consept {
    font-size: 1.65vh;
    }

    .con_front {
        width: auto;
        overflow:visible;
        height: 100vh;
        align-items: flex-end;
    }


    #con_text{
        width: 60vw;
        word-break: break-all;
        line-height: 2em;
        max-width:100%;
        padding-left: 12vw;
        letter-spacing: auto;
    }

    .con-line-repeat {
        display: none;
    }

    #con_circle {
        margin-left: 7em;
        width: 8em;
        margin-bottom: 0.2em;
    }

    #anim_con1 {
        transform: translateX(-5.5vw) translateY(-35%) rotate(-10deg);
        /* -85px */
        width: 70vw;
    }

    #anim_con2 {
        display: none;
    }

    #anim_con3 {
        display: none;
    }

    #anim_con4 {
        display: none;
    }

    #anim_con5 {
        display: none;
    }

    #anim_con6 {
        position: absolute;
        width: 50vw;
        bottom: 0;
        right: 8vw;
        transform: translateY(55%);
    }

    .pole_sign {
        align-items: start;
        margin-top: 10vw;
        width: auto;

    }

    #pole_sign {
        transform: translateX(15vw);
        height: 15vh;
        width: auto;
    }

    .noover {
     padding: clamp(24px, 20vw, 230px) 0;

}
.kousin{
    width: 100vw;
    height: auto;
    margin-bottom: 10vh;
    overflow: hidden;
    z-index: -20;
    pointer-events: none;
}

    /* Informationセクション */

    .inf_front {
        width: 60vw;
        height: auto;
        margin-top: auto;
        margin-bottom: auto;
        padding-top: 10vh;
        margin-left: 5vw;
    }

    .inf-box {
        margin: 1vh 0;
        padding: 1vh 0;
    }

    .inf-blue-1 {
        width: auto;
        display: flex;
        align-items: flex-end;
        border-bottom: 1px solid #0048FF;
        padding: 1vh 0;
    }

    .inf_pole{
        width: 35vw;
        margin-right: 0vw;
    }

    h2 {
        font-size: 1.5vw;
    }

    .h3-small {
        font-size: 2vw;
    }

    .h3-big {
        font-size: 3.5vw;
    }

    h4 {
        font-size: 1.7vw;
    }

    .map{
        width: 100%;
    }


#light-1 {
    width: 15vw;
    right: auto;
    top: 7vh;
    left: 5vw;
}



#light-3 {
    width: 10vw;
    bottom: 5vh;
    right: 3vw;
}

#sns_title {
    width: 30vw;
    transform: translateX(10vw);
    margin-top: 7vh;
}

#sns-pole-box {
    width: 50vw;
    position: absolute;
    right: 0;
    height: 60vh;

}


.sns-pole
    {display: flex;
    width: 30vw;
    height: 2vw;
    margin-left: auto;
}


.sns-pole-case
    {
        height : calc(100% / 3) ;
        display: grid;
        align-items: center;
    }


.phone{
    display: flex;
}

#sns-sign {
    display: grid;
    width: auto;
    margin-right: 0;
    height: 60vh;
    margin-bottom: 20vh;
}

.sns{
    width: 27vw;
    padding: 2vh 0;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 10vw;
}

.sns-box {
    width: 100%;
    right: 0;
    display: flex;
    top: 30%;
}

#sns-cat2{
    display: none;
}

#sns-cat1{
    display: none;
}

#long-box {
    display: none;
}

#long-box {
    width: 100%;
}

#sns_love {
    transform: rotate(-30deg);
    position: absolute;
    width: 15vw;
    left: 10vw;
    top: 45vh;
}

#sns_hey {
    display: none;
}

#fire {
    display: none;
}

#sns_arrow {
    display: inline;
    position: absolute;
    width: 30vw;
    left: 15vw;
    top: 15vh;
}

#sns_arrow2 {
    display: inline;
    transform: rotate(-80deg);
    position: absolute;
    width: 10vw;
    left: 20vw;
    top: 75vh;
}



.sky {
    height: auto;
    margin-top: 680vh;
    pointer-events: none;
}
.sky-front {
    margin: 0;
    padding-left: 30vw;
}

.sky-empty{
    height: 125vh;
}


.sky-back {
    position: relative;
    z-index: 0;
}

#sky {
    width: 300vw;
    height: auto;
}

#sky-kokokara{
    margin-top: 30vh;
    width: 50vw;
}

.bird {
    top: 40vh;
}
#cloud1 {
    margin-top: 20vh;

}

#cloud2 {
    margin-top: 30vh;
    left:0;
margin-left: 70vw;
}


#cloud3 {
    margin-top: 60vh;

}

#work_title {
    width: 55vw;
    transform:translateX(14vw) ;
    margin-top: 30vh;
}

#work-text {
    font-size: 2.5vw;
    margin-bottom: auto;
}

.slider img {
    height: 30vh;
}

#footer-left {
    width: 47vw;
    height: 10vh;
    padding: 0 2vw;
    display: grid;
}

#fotter-title {
    width: 100%;
}

#fotter-copy {
    width: 100%;
}

.scroller__inner li {
    font-size: 1rem;
    /* テキストを改行させない */
}

.slider {
    animation: scroll 40s linear infinite;
}

.scroller__inner {
    animation: scroll 80s linear infinite;
}

#work_die {
    margin-right: 9.5vw;
}

}


/* scrollify.jsに関係する記述はここかから */



/* .layer-1{
    background-color: #ff000070;
}

.layer-2{
    background-color: #eeff0070;
}

.layer-3{
    background-color: #00ff4470;
}
.layer-4{
    background-color: #ff000070;
}

.layer-5{
    background-color: #ff000070;
} */

/* * {
    outline: 1px solid red;
} */