:root{
    /* --font-size-x-small: calc((24 / 1440) * 100vw);
    --font-size-small: calc((28 / 1440) * 100vw);
    --font-size-normal: calc((60 / 1440) * 100vw);
    --font-size-middle: calc((100 / 1440) * 100vw);
    --font-size-large: calc((112 / 1440) * 100vw);
    --font-size-x-large: calc((150 / 1440) * 100vw);
    --font-size-2x-large: calc((200 / 1440) * 100vw); */

    --font-size-x-small: calc((24 / 1024) * 100vh);
    --font-size-small: calc((28 / 1024) * 100vh);
    --font-size-normal: calc((60 / 1024) * 100vh);
    --font-size-middle: calc((100 / 1024) * 100vh);
    --font-size-large: calc((112 / 1024) * 100vh);
    --font-size-x-large: calc((150 / 1024) * 100vh);
    --font-size-2x-large: calc((200 / 1024) * 100vh);

    --font-size-x-small_sp: calc((16 / 375) * 100vw);
    --font-size-small_sp: calc((20 / 375) * 100vw);
    --font-size-normal_sp: calc((24 / 375) * 100vw);
    --font-size-middle_sp: calc((36 / 375) * 100vw);
    --font-size-large_sp: calc((80 / 375) * 100vw);
    --font-size-x-large_sp: calc((200 / 375) * 100vw);

    --z-index-object-back:3;
    --z-index-building:5;
    --z-index-overlay:7;
    --z-index-index:8;
    --z-index-object-middle:9;
    --z-index-letter:10;
    --z-index-object-front:15;
    --z-index-top-card:20;

    --font-weight-bold :700;
    --font-weight-light :400;

    --letter-spacing-large: calc((2.24 / 1440) * 100vw);
    --letter-spacing-normal: calc((1.92 / 1440) * 100vw);
    --letter-spacing-short: calc((1.2 / 1440) * 100vw);

    --letter-spacing-large_sp: calc((1.6 / 375) * 100vw);
    --letter-spacing-normal_sp: calc((1.28 / 375) * 100vw);
    --letter-spacing-short_sp: calc((0.48 / 375) * 100vw);

    --line-height-large: 200%;
    --line-heigh-middle: 180%;
    --line-height-normal: 160%;
    --line-height-short: 120%;

}
canvas{
    width: 0;
    height: 0;
}
.sp{
    display: none;
}
main{
    background-color: rgba(202, 215, 215, 1);
    height: calc((6676 / 1024) * 100vh);
    overflow: hidden;
}
.main-container{
    padding: calc((160 / 1024) * 100vh) calc((64 / 1440) * 100vw) 0 calc((64 / 1440) * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc((300 / 1024) * 100vh);
}
.top-card-view{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    cursor: pointer;
    perspective: 1000px;
    position: relative;
    z-index: var(--z-index-top-card);
}
.top-card-view > img{
    width: calc((819.812 / 1440) * 100vw);
    transform-style: preserve-3d;
}
#top-card-front{
    transform: rotate(-6deg);
}
#top-card-back{
    transform: rotate(6deg);
}
.top-card-active{
    display: block;
}
.top-card-inactive{
    display: none;
}
.card-flipped{
    transform: rotateY(180deg);
}
.mission-title-view{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc((80 / 1024) * 100vh);
}
.letter{
   z-index: var(--z-index-letter); 
   color: #000;
   font-family: 'Hiragino Sans';
   font-weight: var(--font-weight-bold); 
}
.mission-title-header{
    font-size: var(--font-size-normal);
    text-align: center;
    line-height: var(--line-heigh-middle);
    letter-spacing: var(--letter-spacing-short);
}
.mission-title-body-text{
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-large);
    line-height: var(--line-height-normal);
    height: calc((89 / 1024) * 100vh);
    white-space: nowrap;
}
.mission-body-view{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc((400 / 1024) * 100vh);
    margin-top: calc((100 / 1024) * 100vh);
}
.mission-body-group{
    display: flex;
    flex-direction: column;
    position: relative;
}
.mission-body-group-index{
    font-family: PixelMplus10-Regular;
    font-size: var(--font-size-2x-large);
    font-weight: var(--font-weight-light);
    line-height: normal;
    position: absolute;
    height: fit-content;
    width: fit-content;
    top: 0;
    z-index: var(--z-index-index);
}
.index-left{
    transform: translate(50%, -73%);
}
.index-right{
    right: calc((164 / 1440) * 100vw);
    transform: translate(50%, -73%);
}
.mission-body-group-section{
    margin: 0 calc((224 / 1440) * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc((60 / 1024) * 100vh);
}
.mission-body-group-section-2{
    align-items: end;
}
.mission-body-group-title{
    font-size: var(--font-size-x-large);
    background:  #ffffff;
    /* line-height: var(--line-height-short); */
    display: flex;
    align-items: center;
    width: fit-content;
    white-space: nowrap;
    line-height: 1;
}
.mission-body-group-title-1{
    /* width: calc((750 / 1440) * 100vw); */
    height: calc((119 / 1024) * 100vh);
    white-space: nowrap;
}
.mission-body-group-title-2{
    /* width: calc((900 / 1440) * 100vw); */
    height: calc((119 / 1024) * 100vh);
    white-space: nowrap;
}
.mission-body-group-title-3{
    /* width: calc((750 / 1440) * 100vw); */
    max-height: calc((299 / 1024) * 100vh);
    max-width: calc((864 / 1440)* 100vw);
    white-space: inherit;
}
.mission-body-group-body{
    font-size: var(--font-size-small);
    letter-spacing: var(--letter-spacing-large);
    line-height: var(--line-height-large);
    background-color: #ffffff;
    width: calc((864 / 1440) * 100vw);
}
.value-view{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.value-view-header{
    text-align: center;
    font-size: var(--font-size-normal);;
    line-height: var(--line-heigh-middle);
    letter-spacing: var(--letter-spacing-short);
}
.value-view-title{
    margin-top: calc((80 / 1024) * 100vh);
    text-align: center;
    font-size: var(--font-size-middle);;
    line-height: 1;
    background-color: #ffffff;
    /* width: calc((1088 / 1440) * 100vw); */
    width: fit-content;
    white-space: nowrap;
}
.value-view-body{
    font-size: var(--font-size-x-small);
    line-height:var(--line-height-large);
    letter-spacing: var(--letter-spacing-normal);
    background-color: #ffffff;
    margin: calc((80 / 1024) * 100vh) calc((112 / 1024) * 100vh);
}
.value-view > a{
    margin-bottom:  calc((800 / 1024) * 100vh);
    text-decoration: none;
    color: #000;
    font-size: calc((40 / 1024) * 100vh);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    background: #ffffff;
    padding: calc((60 / 1024) * 100vh) calc((80 / 1024) * 100vh);
    border-radius: calc((120 / 1024) * 100vh);
    z-index: 45;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc((50 / 1024) * 100vh);
}
.value-view > a > img{
    height: calc((33 / 1024) * 100vh);
}
.icon{
    overflow: hidden;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    height: calc((6676 / 1024) * 100vh);
}
/* .icon::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: #cad7d7;
} */
.building{
    z-index: var(--z-index-building);
    position: absolute;
}
/* .building::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: #cad7d7;
} */
.object-back > img, .object-front > img, .object-middle > img{
    width: 100%;
    height: 100%;
}
#building-blue{
    transform: rotate(5.47deg);
    top: calc((-65 / 1024) * 100vh);
    left: calc((-665 / 1440) * 100vw);
}
#building-blue > img{
    width: calc((1270.187 / 1440) * 100vw);
}
#building-red{
    transform: rotate(-3deg);
    top: calc((1185 / 1024) * 100vh);
    right: calc((-525 / 1440) * 100vw);
}
#building-red > img{
    width: calc((1061.567 / 1440) * 100vw);
}
#building-green{
    transform: rotate(-1.462deg);
    /* top: calc((3349 / 1024) * 100vh); */
    bottom: calc((-76 / 1024) * 100vh);
    left: calc((-289 / 1440) * 100vw);
}
#building-green > img{
    width: calc((1013.724 / 1440) * 100vw);
}
#building-white{
    transform: rotate(-2.665deg);
    /* top: calc((4081 / 1024) * 100vh); */
    bottom: calc((-500 / 1024) * 100vh);
    right: calc((-342 / 1440) * 100vw);
}
#building-white > img{
    width: calc((916.874 / 1440) * 100vw);
}
.object-front{
    z-index: var(--z-index-object-front);
    position: absolute;
}
.object-back{
    z-index: var(--z-index-object-back);
    position: absolute;
}
.object-middle{
    z-index: var(--z-index-object-middle);
    position: absolute;
}
#corn{
    top: calc((2.45 / 1024) * 100vh);
    left: calc((30.5 / 1440) * 100vw);
    width: calc((268.297 / 1440) * 100vw);
    transform: rotate(17deg);
}
#ball{
    top: calc((518 / 1024) * 100vh);
    right: calc((95 / 1440) * 100vw);
    width: calc((346 / 1440) * 100vw);
}
#ufo{
    top: calc((1824 / 1024) * 100vh);
    width: calc((260.42 / 1440) * 100vw);
}
#triangular-pyramid{
    top: calc((2041 / 1024) * 100vh);
    right: calc((124 / 1440) * 100vw);
    width: calc((228.639 / 1440) * 100vw);
}
#saturn{
    top: calc((2674 / 1024) * 100vh);
    width: calc((215 / 1440) * 100vw);
}
#clock{
    top: calc((3315 / 1024) * 100vh);
    left: calc((60 / 1440) * 100vw);
    width: calc((258.464 / 1440) * 100vw);
    transform: rotate(-13.73deg);
}
#eye{
    top: calc((4683 / 1024) * 100vh);
    right: calc((64.3 / 1440) * 100vw);
    width: calc((311.744 / 1440) * 100vw);
}
#face{
    top: calc((6167 / 1024) * 100vh);
    width: calc((162 / 1440) * 100vw);
}
.overlay{
    width: 100vw;
    height: calc((6676 / 1024)* 100vh);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    background-color: #cad7d7;
    z-index: var(--z-index-overlay);
    pointer-events: none;
}

@media screen and (max-width: 480px) {
    .pc{
        display: none;
    }
    .sp{
        display: flex;
    }
    .main-container{
        padding: calc((48 / 667) * 100vh) calc((20 / 375) * 100vw) 0 calc((20 / 375) * 100vw);
        gap: calc((160 / 667) * 100vh);
    }
    .top-card-view > img{
        width: calc((300 / 375) * 100vw);
    }
    .mission-title-view{
        gap: calc((20 / 667) * 100vh);
    }
    .mission-title-header{
        margin-bottom: calc((20 / 667) * 100vh);
        font-size: var(--font-size-normal_sp);
        letter-spacing: var(--letter-spacing-short_sp);
        line-height: 180%;
    }
    .mission-title-body-text{
        font-size: var(--font-size-middle_sp);
        line-height: 180%;
        height: calc((29 / 667) * 100vh);
    }
    .mission-body-view{
        gap: calc((240 / 667) * 100vh);
        margin:0;
    }
    .mission-body-group-index{
        font-size: var(--font-size-x-large_sp);
        top: calc((-160 / 667) * 100vh);
        position: absolute;
    }
    .index-left{
        transform: translate(0, 27%);
    }
    .index-right{
        right: 0;
        transform: translate(0, 27%);
    }
    .mission-body-group-section{
        margin: 0;
        gap: calc((40 / 667) * 100vh);
    }
    .mission-body-group-section-2{
        align-items: start;
    }
    .mission-body-group-title{
        font-size: var(--font-size-large_sp);
        line-height: 120%;
        height: calc((159 / 667) * 100vh);
        white-space: normal;
    }
    .mission-body-group-title-1{
        width: calc((240 / 375) * 100vw);
    }
    .mission-body-group-title-2{
        width: calc((320 / 375) * 100vw);
    }
    .mission-body-group-title-3{
        width: calc((320 / 375) * 100vw);
    }
    .mission-body-group-body{
        font-size: var(--font-size-small_sp);
        letter-spacing: var(--letter-spacing-large_sp);
        line-height: 200%;
        width: auto;
    }
    .value-view-header{
        font-size: var(--font-size-normal_sp);
        letter-spacing: var(--letter-spacing-short_sp);
        line-height: 180%;
    }
    .value-view-title{
        margin-top: calc((40 / 667) * 100vh);
        font-size: var(--font-size-middle_sp);
        width: calc((335 / 375) * 100vw);
    }
    .value-view-body{
        margin: calc((60 / 667) * 100vh) 0;
        font-size: var(--font-size-x-small_sp);
        letter-spacing: var(--letter-spacing-normal_sp);
        line-height: 200%;
    }
    .value-view > a{
        margin-bottom:  calc((160 / 667) * 100vh);
        font-size: calc((18 / 667) * 100vh);
        padding: calc((24 / 667) * 100vh) calc((32 / 375) * 100vw);
        border-radius: calc((120 / 667) * 100vh);
        gap: calc((8 / 667) * 100vh);
    }
    .value-view > a > img{
        height: calc((13 / 667) * 100vh);
    }
    #building-blue{
        transform: rotate(-3.731deg);
        top: calc((36.82 / 667) * 100vh);
        left: calc((-232.9 / 375) * 100vw);
        transform-origin: top right; 
    }
    #building-blue > img{
        width: calc((446.121 / 375) * 100vw);
    }
    #building-red{
        transform: rotate(1.556deg);
        top: calc((437.11 / 667) * 100vh);
        right: calc((-227.44 / 375) * 100vw);
        transform-origin: top right; 
    }
    #building-red > img{
        width: calc((446.695 / 375) * 100vw);
    }
    #building-green{
        transform: rotate(4.897deg);
        top: calc((2263 / 667) * 100vh);
        bottom: 0;
        left: calc((-339 / 375) * 100vw);
    }
    #building-green > img{
        width: calc((470.455 / 375) * 100vw);
    }
    #building-white{
        transform: none;
        /* top: calc((3090 / 667) * 100vh); */
        bottom: calc((-25 / 667) * 100vh);
        right: calc((-316 / 375) * 100vw);
    }
    #building-white > img{
        width: calc((494.826 / 375) * 100vw);
    }
    #corn{
        top: calc((-32 / 667) * 100vh);
        left: calc((15 / 375) * 100vw);
        width: calc((113.884 / 375) * 100vw);
        transform: rotate(16.285deg);
    }
    #ball{
        top: calc((370 / 667) * 100vh);
        right: calc((-23 / 375) * 100vw);
        width: calc((160 / 375) * 100vw);
    }
    #ufo{
        top: calc((941 / 667) * 100vh);
        width: calc((100 / 375) * 100vw);
    }
    #triangular-pyramid{
        top: calc((1161 / 667) * 100vh);
        right: calc((20 / 375) * 100vw);
        width: calc((140 / 375) * 100vw);
    }
    #saturn{
        top: calc((1724 / 667) * 100vh);
        width: calc((109 / 375) * 100vw);
    }
    #clock{
        top: calc((2702 / 667) * 100vh);
        left: calc((188 / 375) * 100vw);
        width: calc((143.155 / 375) * 100vw);
        transform: rotate(9.858deg);
    }
    #face{
        top: calc((4538 / 667) * 100vh);
        width: calc((80 / 375) * 100vw);
    }
}


@media screen and (max-height: 700px) {
    main, .icon, .overlay{
        height: calc((4728 / 667) * 100vh);
    }
}