/* -------------------------------------- div -------------------------------------- */

.div--front{
    position: relative;
    height: 170vh;
    width: 100%;
    padding: 96px 0px 0px;
    margin: -96px 0px 0px;
    background-color: #000000;
}

.div--content{
    position: relative;
    height: auto;
    width: 100%;
    padding: 0px;
    margin: 0px;
    background-color: var(--background-1);
}

.div--content--reverse{
    background-color: #000000;
}

.div--content--secondary{
    background-color: var(--background-3);
}

.div--download{
    position: relative;
    height: auto;
    width: 100%;
    padding: 0px 0px 160px;
    margin: 0px;
    background-color: var(--background-3);
}

.div--download .text--about{
    text-align: center;
    padding: 0px !important;
}

/* -------------------------------------- container -------------------------------------- */

.container--front{
    display: flex;
    position: sticky;
    height: calc(100vh - 52px);
    width: 100%;
    padding: 0px;
    margin: 0px;
    top: 52px;
    align-items: center;
    justify-content: center;
}

.container--problem{
    box-sizing: border-box;
    display: flex;
    position: relative;
    height: auto;
    width: 1000px;
    padding: 200px 10px;
    margin: 0px auto;
    flex-direction: column;
    gap: 144px;
}

.container--about{
    box-sizing: border-box;
    position: relative;
    height: auto;
    width: 1200px;
    padding: 200px 0px;
    margin: 0px auto;
}

.container--record{
    box-sizing: border-box;
    position: relative;
    height: auto;
    width: 1000px;
    padding: 144px 10px 0px;
    margin: 0px auto;
}

.container--record-content{
    display: flex;
    position: relative;
    height: 200vh;
    width: 100%;
    padding: 0px;
    margin: 0px;
    margin-top: var(--margin-top);
}

.container--observe{
    box-sizing: border-box;
    position: relative;
    height: auto;
    width: 1000px;
    padding: 144px 10px 0px;
    margin: 0px auto;
    text-align: center;
}

.container--observe-scroll{
    position: relative;
    height: 200vh;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.container--observe-scroll .text--about--head{
    padding: 0px 0px 48px !important;
}

.container--observe-content{
    position: relative;
    height: auto;
    width: 100%;
    padding: 32px 0px 200px;
    margin: 0px auto;
    /* transition-property: margin-top;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0,0,0.4,1); */
    transition-property: opacity;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0,0,0.4,1);
}

.container--observe-selector{
    display: flex;
    box-sizing: border-box;
    position: relative;
    height: 92px;
    width: 248px;
    padding: 4px;
    margin: 0px auto;
    border-radius: 20px;
    background-color: var(--background-4);
}

.container--observe-copy{
    position: relative;
    height: 102px;
    width: 100%;
    padding: 42px 0px 0px;
    margin: 0px;
    transition-property: opacity;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0,0,0.4,1);
}

.container--observe-gallery{
    position: relative;
    height: auto;
    width: 100%;
    padding: 0px 0px 200px;
    margin: 0px;
}

.container--observe-gallery--buttons{
    display: flex;
    position: relative;
    height: auto;
    width: auto;
    padding: 0px;
    margin: 0px;
    gap: 18px;
}

.container--observe-gallery--cards{
    box-sizing: border-box;
    position: relative;
    height: 580px;
    width: 100%;
    padding: 40px 0px 0px;
    padding-left: calc((100% - 1000px) / 2);
    margin: 0px;
    overflow: hidden;
    gap: 24px;

}

.container--observe-cards{
    box-sizing: border-box;
    display: flex;
    position: relative;
    height: 100%;
    width: fit-content;
    padding: 0px;
    margin: 0px;
    gap: 24px;
    transition-property: transform;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.52, 0.16, 0.24, 1);
}

.container--reflect{
    box-sizing: border-box;
    position: relative;
    height: auto;
    width: 100%;
    padding: 144px 0px 120px;
    margin: 0px auto;
    text-align: center;
}

.container--reflect .text--about{
    padding: 0px !important;
}

.container--reflect .text--about--head{
    padding: 0px 0px 32px !important;
}

.container--reflect-messages{
    display: flex;
    position: relative;
    height: auto;
    width: 100%;
    padding: 72px 0px 0px;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
}

.container--power{
    box-sizing: border-box;
    position: relative;
    height: auto;
    width: 100%;
    padding: 144px 0px 120px;
    margin: 0px auto;
    text-align: center;
}

.container--power::before{
    content: '';
    position: absolute;
    height: 240px;
    width: 100%;
    background: linear-gradient(180deg, var(--Background-1, #FFF) 0%, var(--Background-3, #F5F5F7) 100%);
    top: 0px;
    left: 0px;
}

.container--power .text--about{
    width: 1000px;
    padding: 0px !important;
}

.container--power .text--about--head{
    padding: 0px 0px 32px !important;
}

.container--powers{
    display: flex;
    position: relative;
    height: auto;
    width: 1100px;
    padding: 32px 0px;
    margin: 42px auto 0px;
    border-top: 1px solid var(--separators-1);
}

.container--download{
    box-sizing: border-box;
    position: relative;
    height: 530px;
    width: 1260px;
    padding: 112px;
    margin: 0px auto;
    background-color: var(--background-1);
    border-radius: 52px;
}

/* -------------------------------------- unit -------------------------------------- */

.unit--front{
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
    background-color: var(--brand);
    overflow: hidden;
}

.unit--front-content{
    position: relative;
    height: auto;
    width: 678px;
    padding: 144px 0px 22px;
    margin: 0px auto;
    text-align: center;
}

.unit--problem{
    box-sizing: border-box;
    position: relative;
    height: auto;
    width: 100%;
    padding: 0px 0px 0px 48px;
    margin: 0px;
}

.unit--record-img{
    box-sizing: border-box;
    position: sticky;
    height: 100vh;
    width: 50%;
    padding: 0px;
    margin: 0px;
    top: 0px;
}

.unit--record-content{
    box-sizing: border-box;
    position: relative;
    height: 200vh;
    width: 50%;
    padding: 0px;
    margin: 0px;
    top: 0px;
}

.unit--record-content div.container{
    display: flex;
    position: relative;
    height: 100vh;
    width: 100%;
    padding: 0px;
    margin: 0px;
    align-items: center;
    flex-wrap: nowrap;
}

.unit--record-content .text--about--copy{
    width: auto;
    padding: 0px !important;
}

.unit--observe-img{
    position: sticky;
    height: calc(100vh - 52px);
    width: 840px;
    padding: 0px;
    margin: 0px auto;
    top: 52px;
}

.unit--observe-head{
    display: flex;
    position: relative;
    height: auto;
    width: 1000px;
    padding: 0px;
    margin: 0px auto;
    align-items: flex-end;
    justify-content: space-between;
}

.unit--observe-card{
    position: relative;
    height: 100%;
    width: 415px;
    padding: 0px;
    margin: 0px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(80px);
    transition-property: transform, opacity;
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0, 0, 0.4, 1);
}

.unit--observe-card-img{
    box-sizing: border-box;
    display: flex;
    position: relative;
    height: 420px;
    width: 415px;
    padding: 0px 36px;
    margin: 0px;
    background-color: var(--background-3);
    border-radius: 28px;
    align-items: center;
}

.unit--reflect-message{
    position: relative;
    height: 174px;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.unit--reflect-message--track{
    display: flex;
    position: relative;
    width: fit-content;
    height: 100%;
    animation: scroll var(--duration) linear infinite;
    gap: 24px;
    will-change: transform;
}

.unit--download-logo{
    box-sizing: border-box;
    display: flex;
    position: relative;
    height: 102px;
    width: 102px;
    padding: 0px 0px 2px;
    margin: 0px auto 30px;
    background-color: var(--background-3);
    border-radius: 30px;
    justify-content: center;
    align-items: center;
}

.unit--download-logo svg{
    height: 72px;
}

/* -------------------------------------- text -------------------------------------- */

.text--front{
    position: relative;
    font-size: 54px;
    font-weight: 700;
    color: var(--label-reflect);
    padding: 0px 0px 28px;
    margin: 0px;
}

.text--problem{
    position: relative;
    font-size: 72px;
    font-weight: 600;
    color: var(--label-4);
    padding: 0px;
    margin: 0px;
}

.text--problem span{
    display: block;
    color: var(--label-reflect)
}

.text--problem br{
    display: none;
}

.text--about{
    box-sizing: border-box;
    position: relative;
    width: 980px;
    margin: 0px auto;
}

.text--about.text--about--head{
    font-size: 72px;
    font-weight: 600;
    color: var(--label-1);
    padding: 0px 0px 62px 48px;
}

.text--about.text--about--copy{
    font-size: 24px;
    font-weight: 500;
    color: var(--label-2);
    line-height: 1.4;
    padding: 0px 0px 24px 48px;
}

.text--about.text--about--left{
    text-align: left;
}

.text--eyebrow{
    position: relative;
    font-size: 28px;
    font-weight: 600;
    color: var(--brand);
    padding: 0px 0px 28px;
    margin: 0px;
}

.text--observe{
    position: absolute;
    font-size: 24px;
    font-weight: 500;
    color: var(--label-3);
    line-height: 1.4;
    width: 100%;
    padding: 0px;
    margin: 0px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0,0,0.4,1);
}

.text--observe.active{
    opacity: 1;
    transition-delay: 0.4s;
}

.text--observe-card{
    box-sizing: border-box;
    position: relative;
    font-weight: 500;
    text-align: left;
    padding: 0px;
    margin: 0px;
}

.text--observe-card--head{
    font-size: 32px;
    color: var(--label-1);
}

.text--observe-card--copy{
    font-size: 18px;
    color: var(--label-3);
    line-height: 1.4;
    padding: 28px 14px;
}

.text--power{
    position: relative;
    font-size: 14px;
    font-weight: 500;
    color: var(--label-3);
    line-height: 1.4;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.text--power b{
    display: block;
    font-size: 28px;
    color: var(--brand);
    padding: 0px 0px 12px;
}

/* -------------------------------------- button -------------------------------------- */

.button--nav-download{
    display: flex;
    height: 100%;
    width: auto;
    padding: 0px;
    margin: 0px;
    font-size: 14px;
    font-weight: 400;
    color: var(--label-reflect);
    align-items: center;
    cursor: pointer;
    transition-property: opacity;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0,0,0.4,1);
}

.secondary-nav.reflect .button--nav-download{
    color: var(--label-1);
}

.button--front-download{
    display: flex;
    height: 52px;
    width: auto;
    padding: 0px 26px;
    margin: 0px auto;
    background-color: var(--background-1);
    border-radius: 26px;
    font-size: 24px;
    font-weight: 500;
    color: var(--label-1);
    align-items: center;
    cursor: pointer;
    transition-property: opacity, transform;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0,0,0.4,1);
}

.button--observe-selector{
    box-sizing: border-box;
    display: flex;
    position: relative;
    height: 100%;
    width: 50%;
    padding: 4px 0px 0px;
    margin: 0px;
    background-color: var(--background-transparent);
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--label-3);
    fill: var(--label-3);
    cursor: pointer;
    gap: 5px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition-property: color, fill;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0,0,0.4,1);
}

.button--observe-selector.active{
    color: var(--label-2);
    fill: var(--label-2);
}

.button--observe-card{
    box-sizing: border-box;
    display: flex;
    position: relative;
    height: 36px;
    width: 36px;
    padding: 0px;
    margin: 0px;
    background-color: var(--background-4);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-property: opacity;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0,0,0.4,1);
}

.button--observe-card.inactive{
    opacity: 0.4;
    cursor: default;
}

.container--observe-gallery--buttons .button--observe-card:nth-child(1){
    padding: 0px 2px 0px 0px;
}

.container--observe-gallery--buttons .button--observe-card:nth-child(2){
    padding: 0px 0px 0px 2px;
}

.button--observe-card svg{
    display: block;
    height: 17px;
}

.button--download{
    display: flex;
    position: relative;
    font-size: 24px;
    font-weight: 400;
    color: var(--brand);
    padding: 0px;
    margin: 42px auto 0px;
    background-color: transparent;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition-property: transform;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0,0,0.4,1);
}

.button--download svg{
    display: block;
    height: 14px;
}

/* -------------------------------------- img -------------------------------------- */

.img--front{
    display: block;
    position: relative;
    height: 1384px;
    width: auto;
    padding: 0px;
    margin: 0px auto;
}

.img--problem{
    display: block;
    position: relative;
    height: 107px;
    width: auto;
    padding: 0px 0px 20px;
    margin: 0px;
}

.container--problem > .unit--problem:nth-child(2) .img--problem { height:86px; }
.container--problem > .unit--problem:nth-child(4) .img--problem { height:123px; }

.img--about{
    position: relative;
    height: auto;
    width: 1200px;
    padding: 0px 0px 44px;
    margin: 0px;
    border-radius: 52px;
}

.img--record{
    position: absolute;
    height: auto;
    width: 386px;
    top: 50%;
    transform: translateY(-50%);
}

.img--observe{
    position: absolute;
    height: auto;
    width: 100%;
    padding: 0px;
    margin: 0px;
    top: 0px;
    /* bottom: 0px; */
    left: 0px;
    opacity: 0;
    transition-property: opacity;
    transition-delay: 0.4s;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0,0,0.4,1);
}

.img--observe.active{
    opacity: 1;
    transition-delay: 0s;
    z-index: -1;
}

.img--observe-card{
    position: relative;
    height: auto;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.img--reflect-message{
    display: block;
    width: 414px;
}

.logo-front{
    position: relative;
    height: 32px;
    width: auto;
    padding: 0px 0px 24px;
    margin: 0px auto;
}

.svg--record{
    display: block;
    position: relative;
    height: 72px;
    width: auto;
    padding: 32px 0px 24px;
    flex-shrink: 0;
}

.indicator--observe-selector{
    position: absolute;
    height: calc(100% - 8px);
    width: 120px;
    padding: 0px;
    margin: 0px;
    border-radius: 16px;
    background-color: var(--background-1);
    top: 4px;
    left: 4px;
    transition-property: left;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.52, 0.16, 0.24, 1);
}

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

@media screen and (max-width: 1600px) {

    /* -------------------------------------- div -------------------------------------- */

    .div--download{
        padding: 0px 0px 128px;
    }

    /* -------------------------------------- container -------------------------------------- */

    .container--front{
        height: calc(100vh - 44px);
        top: 44px;
    }

    .container--problem{
        width: 800px;
        padding: 160px 8px;
        gap: 115px;
    }

    .container--about{
        width: 960px;
        padding: 160px 0px;
    }

    .container--record{
        width: 800px;
        padding: 115px 8px 0px;
    }

    .container--observe{
        width: 800px;
        padding: 115px 8px 0px;
    }

    .container--observe-scroll .text--about--head{
        padding: 0px 0px 38px !important;
    }

    .container--observe-content{
        padding: 26px 0px 160px;
    }

    .container--observe-selector{
        height: 74px;
        width: 198px;
        padding: 3px;
        border-radius: 16px;
    }

    .container--observe-copy{
        height: 82px;
        padding: 34px 0px 0px;
    }

    .container--observe-gallery{
        padding: 0px 0px 160px;
    }

    .container--observe-gallery--buttons{
        gap: 14px;
    }

    .container--observe-gallery--cards{
        height: 464px;
        padding: 32px 0px 0px;
        padding-left: calc((100% - 800px) / 2);
        gap: 19px;

    }

    .container--observe-cards{
        gap: 19px;
    }

    .container--reflect{
        padding: 115px 0px 96px;
    }

    .container--reflect-messages{
        padding: 58px 0px 0px;
        gap: 19px;
    }

    .container--power{
        padding: 115px 0px 96px;
    }

    .container--power::before{
        height: 192px;
    }

    .container--power .text--about{
        width: 800px;
    }

    .container--power .text--about--head{
        padding: 0px 0px 26px !important;
    }

    .container--powers{
        width: 880px;
        padding: 26px 0px;
        margin: 34px auto 0px;
    }

    .container--download{
        height: 424px;
        width: 1008px;
        padding: 90px;
        border-radius: 42px;
    }

    /* -------------------------------------- unit -------------------------------------- */

    .unit--front-content{
        width: 542px;
        padding: 115px 0px 18px;
    }

    .unit--problem{
        padding: 0px 0px 0px 38px;
    }

    .unit--observe-img{
        height: calc(100vh - 42px);
        width: 672px;
        top: 42px;
    }

    .unit--observe-head{
        width: 800px;
    }

    .unit--observe-card{
        width: 332px;
        transform: translateY(64px);
    }

    .unit--observe-card-img{
        height: 336px;
        width: 332px;
        padding: 0px 29px;
        border-radius: 22px;
    }

    .unit--reflect-message{
        height: 139px;
    }

    .unit--reflect-message--track{
        gap: 19px;
    }

    .unit--download-logo{
        height: 82px;
        width: 82px;
        padding: 0px 0px 2px;
        margin: 0px auto 24px;
        border-radius: 24px;
    }

    .unit--download-logo svg{
        height: 58px;
    }

    /* -------------------------------------- text -------------------------------------- */

    .text--front{
        font-size: 43px;
        padding: 0px 0px 22px;
    }

    .text--problem{
        font-size: 58px;
    }

    .text--about{
        width: 784px;
    }

    .text--about.text--about--head{
        font-size: 58px;
        padding: 0px 0px 50px 38px;
    }

    .text--about.text--about--copy{
        font-size: 19px;
        padding: 0px 0px 19px 38px;
    }

    .text--eyebrow{
        font-size: 22px;
        padding: 0px 0px 22px;
    }

    .text--observe{
        font-size: 19px;
    }

    .text--observe-card--head{
        font-size: 26px;
    }

    .text--observe-card--copy{
        font-size: 14px;
        padding: 22px 11px;
    }

    .text--power{
        font-size: 11px;
    }

    .text--power b{
        font-size: 22px;
        padding: 0px 0px 10px;
    }

    /* -------------------------------------- button -------------------------------------- */

    .button--nav-download{
        font-size: 11px;
    }

    .button--front-download{
        height: 42px;
        padding: 0px 21px;
        border-radius: 21px;
        font-size: 19px;
    }

    .button--observe-selector{
        padding: 3px 0px 0px;
        border-radius: 13px;
        font-size: 11px;
        gap: 4px;
    }

    .button--observe-card{
        height: 29px;
        width: 29px;
    }

    .container--observe-gallery--buttons .button--observe-card:nth-child(1){
        padding: 0px 2px 0px 0px;
    }

    .container--observe-gallery--buttons .button--observe-card:nth-child(2){
        padding: 0px 0px 0px 2px;
    }

    .button--observe-card svg{
        display: block;
        height: 14px;
    }

    .button--download{
        font-size: 19px;
        margin: 34px auto 0px;
        gap: 5px;
    }

    .button--download svg{
        height: 11px;
    }

    /* -------------------------------------- img -------------------------------------- */

    .img--front{
        height: 1107px;
    }

    .img--problem{
        height: 86px;
        padding: 0px 0px 16px;
    }

    .container--problem > .unit--problem:nth-child(2) .img--problem { height:86px; }
    .container--problem > .unit--problem:nth-child(4) .img--problem { height:123px; }

    .img--about{
        width: 960px;
        padding: 0px 0px 35px;
        border-radius: 42px;
    }

    .img--record{
        width: 309px;
    }

    .img--reflect-message{
        width: 331px;
    }

    .logo-front{
        height: 26px;
        padding: 0px 0px 19px;
    }

    .svg--record{
        height: 58px;
        padding: 26px 0px 19px;
    }

    .indicator--observe-selector{
        height: calc(100% - 6px);
        width: 96px;
        border-radius: 13px;
        top: 3px;
        left: 3px;
    }
    
}

@media screen and (max-width: 1068px){

    /* -------------------------------------- div -------------------------------------- */

    .div--download{
        box-sizing: border-box;
        padding: 0px 38px 128px;
    }

    /* -------------------------------------- container -------------------------------------- */

    .container--problem{
        width: 690px;
        padding: 120px 0px;
        gap: 90px;
    }

    .container--about{
        max-width: 1136px;
        width: 100%;
        padding: 120px 38px;
    }

    .container--record{
        max-width: 876px;
        width: 100%;
        padding: 115px 38px 0px;
    }

    .container--observe{
        max-width: 876px;
        width: 100%;
        padding: 115px 38px 0px;
    }

    .container--observe-content{
        padding: 24px 0px 120px;
    }

    .container--observe-copy{
        height: 80px;
        padding: 24px 0px 0px;
    }

    .container--observe-gallery{
        box-sizing: border-box;
        padding: 0px 0px 120px;
    }

    .container--observe-gallery--cards{
        padding: 28px 38px 0px;
    }

    .container--reflect{
        padding: 115px 0px 120px;
    }

    .container--power{
        box-sizing: border-box;
        padding: 0px 38px 120px;
    }

    .container--power .text--about--head{
        width: 460px;
        padding: 0px 0px 24px !important;
    }

    .container--power .text--about--copy{
        width: 550px;
    }

    .container--powers{
        width: 100%;
        padding: 36px 0px 0px;
        margin: 36px auto 0px;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 24px;
    }

    .container--download{
        height: 400px;
        width: 100%;
        padding: 72px;
    }

    .container--download .text--about{
        width: 100%;
    }

    /* -------------------------------------- unit -------------------------------------- */

    .unit--problem{
        padding: 0px 0px 0px 30px;
    }

    .unit--observe-head{
        box-sizing: border-box;
        width: 100%;
        padding: 0px 38px 0px;
    }

    /* -------------------------------------- text -------------------------------------- */

    .text--problem{
        font-size: 56px;
    }

    .text--about{
        width: 690px;
    }

    .text--about.text--about--head{
        font-size: 56px;
        padding: 0px 0px 42px 30px;
    }

    .text--about.text--about--copy{
        font-size: 18px;
        padding: 0px 0px 18px 30px;
    }

    .text--observe-card--copy{
        font-size: 16px;
        padding: 18px 14px;
    }

    .text--observe-card--copy br{
        display: none;
    }

    .text--power{
        display: block;
        width: 248px;
        font-size: 13px;
        flex-shrink: 0;
    }

    .text--power b{
        font-size: 24px;
    }

    /* -------------------------------------- button -------------------------------------- */
    

    /* -------------------------------------- img -------------------------------------- */
    

    .img--problem{
        height: 72px;
        padding: 0px 0px 12px;
    }

    .container--problem > .unit--problem:nth-child(2) .img--problem { height:72px; }
    .container--problem > .unit--problem:nth-child(4) .img--problem { height:90px; }

    .img--about{
        width: 100%;
        padding: 0px 0px 24px;
        border-radius: 32px;
    }

    .img--record{
        width: 274px;
        padding: 0px 0px 0px 24px;
    }

}

@media screen and (max-width: 767px){

    /* -------------------------------------- div -------------------------------------- */

    .div--download{
        padding: 0px 24px 96px;
    }

    /* -------------------------------------- container -------------------------------------- */

    .container--problem{
        box-sizing: border-box;
        max-width: 738px;
        width: 100%;
        padding: 88px 24px;
    }

    .container--about{
        padding: 96px 24px;
    }

    .container--record{
        padding: 96px 24px 0px;
    }

    .container--record .text--about--head{
        text-align: center;
    }

    .container--record-content{
        height: 170vh;
    }

    .container--observe{
        padding: 96px 0px 0px;
    }

    .container--observe .text--about--head{
        padding: 0px 24px 24px !important;
    }

    .container--observe-gallery--cards{
        padding: 28px 24px 0px
    }
    
    .container--observe-gallery{
        padding: 0px 0px 96px;
    }

    .container--reflect{
        padding: 96px 0px 96px;
    }

    .container--reflect .text--about--copy{
        padding: 0px 24px 0px !important;
    }

    .container--power{
        padding: 0px 24px 96px;
    }

    .container--power .text--about--head{
        width: 100%;
    }

    .container--power .text--about--copy{
        width: 100%;
        padding: 0px 12px 0px !important;
    }

    .container--download{
        display: flex;
        height: 380px;
        padding: 32px 32px 48px;
        border-radius: 24px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    
    .container--download .text--about--head{
        font-size: 24px !important;
    }

    /* -------------------------------------- unit -------------------------------------- */

    .unit--front-content{
        box-sizing: border-box;
        width: 100%;
        padding: 60px 24px 18px;
    }

    .unit--problem{
        padding: 0px;
    }

    .unit--record-img{
        width: 100%;
        top: 50%;
        background: linear-gradient(180deg, rgba(245, 245, 247, 0) 0%, rgba(245, 245, 247, 1) 5%);
        z-index: 1;
    }

    .unit--record-content{
        position: absolute;
        height: 80vh;
        width: 100%;
    }
    
    .unit--record-content div.container{
        box-sizing: border-box;
        height: 90vh;
        padding: 0px 24px;
        align-items: flex-start;
        text-align: center;
    }

    .unit--record-content div.container:nth-child(2){
        margin-top: -35vh;
    }

    .unit--observe-img{
        width: 100vw;
    }

    .unit--observe-head{
        padding: 0px 24px
    }

    .unit--observe-card{
        width: calc(100vw - 48px);
    }

    .unit--observe-card-img{
        width: 100%;
        padding: 0px 24px;
    }

    /* .unit--reflect-message--track{
        animation: none;
    } */

    /* -------------------------------------- text -------------------------------------- */

    .text--front{
        font-size: 38px;
        padding: 0px 24px 18px;
    }

    .text--problem{
        font-size: 38px;
    }

    .text--problem br{
        display: block;
    }

    .text--about{
        width: 100%;
    }

    .text--about.text--about--copy br{
        display: none;
    }

    .text--about.text--about--head{
        font-size: 38px;
        padding: 0px 0px 32px;
    }

    .text--about.text--about--copy{
        font-size: 17px;
        font-weight: 400;
        padding: 0px 0px 18px;
    }

    .text--observe{
        box-sizing: border-box;
        font-size: 16px;
        width: 100%;
        padding: 0px 30px;
    }

    .text--observe br{
        display: none;
    }

    /* -------------------------------------- button -------------------------------------- */

    .button--download{
        font-size: 18px;
        margin: 12px auto 0px
    }

    /* -------------------------------------- img -------------------------------------- */

    .img--front{
        height: 720px;
    }

    .img--about{
        width: 100vw;
        border-radius: 0px;
        margin-left: -24px;
    }
    
    .img--record{
        width: 100%;
        padding: 0px;
        top: 0px;
        transform: none;
    }

    .svg--record{
        margin: 0px auto;
        padding: 12px 0px 8px;
    }

}