@charset "utf-8";

/*
 * File       : rwd-main.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.0
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01) 1560px
 * 02) 1200px
 * 03) 1023px
 * 04) 860px
 * 05) 540px
 */



/* **************************************** *
 * 1560px
 * **************************************** */
@media (max-width: 1560px) {

    /* LAYOUT */
    .main-section { padding: 110rem 0; }
    .main-section__head p { margin-top: 20rem; }

    /* VISUAL */
    .main-visual__slogan { top: calc(50% - 45rem); }

    .main-visual__datasets-item a { padding: 22rem 66rem 22rem 36rem; }
    .main-visual__datasets-item a > .jt-icon { top: 28rem; right: 36rem; }
    .main-visual__datasets-item a:before { height: 11rem; top: -11rem; }
    .main-visual__datasets-item a:after { top: -11rem; }

    .main-visual__notice { bottom: 138rem; }
    .main-visual__notice .swiper { height: 42rem; }
    .main-visual__notice-cat { padding: 5rem 18rem; }

    /* ABOUT */
    .main-about.main-section { padding-top: 220rem; }

}



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px) {

    /* LAYOUT */
    .main-section { padding: 90rem 0; }

    .main-section__head { margin-bottom: 48rem; }
    .main-section__head p { margin-top: 18rem; }

    .main-section__more { margin-top: 48rem; }

    /* VISUAL */
    .main-visual { height: auto; }
    .main-visual > .wrap { height: 100vh; }
    html.ios .main-visual { min-height: auto; max-height: none; }
    html.ios .main-visual > .wrap { min-height: 100svh; max-height: -webkit-fill-available; }

    .main-visual__notice { bottom: 240rem; }
    .main-visual__notice .swiper { height: 40rem; }
    .main-visual__notice-cat { padding: 4rem 16rem; }

    .main-visual__datasets-list { flex-wrap: wrap; }
    .main-visual__datasets-item { width: 33.33%; }
    .main-visual__datasets-item:nth-last-child(1),
    .main-visual__datasets-item:nth-last-child(2) { width: 50%; border-top: none; }
    .main-visual__datasets-item a { padding: 22rem 60rem 22rem 30rem; }
    .main-visual__datasets-item a > .jt-icon { top: 26rem; right: 30rem; }
    .main-visual__datasets-item:nth-child(3):after { display: none; }
    .main-visual__datasets-item:nth-child(3) a:after { right: 20rem; }

    /* ABOUT */
    .main-about.main-section { padding-top: 180rem; }

    /* ECOSYSTEM */
    .main-ecosystem__banner-content { padding: 70rem 65rem; }

    /* COMMUNITY */
    .main-community__channel { margin: 0 -32rem; }
    .main-community__channel:before { width: calc(100% - 64rem); left: 32rem; }
    .main-community__channel > li { padding: 32rem 32rem 0; }
    .main-community__channel-type { margin-bottom: 15rem; }
    .main-community__channel-list a { display: block; padding: 19rem 25rem 19rem 0; }
    .main-community__channel-list a > b { display: block; margin-bottom: 7rem; padding-left: 32rem; }
    .main-community__channel-list a > b .jt-icon { width: 22rem; }
    .main-community__channel-list a > p { padding-right: 0; text-align: left; }
    .main-community__channel-list a > p .jt-icon { top: -26rem; right: -25rem; }

    .main-community__banner { margin-top: 48rem; }
    .main-community__banner-content { padding: 42rem 48rem 42rem 38rem; }

}

@media (min-width: 1024px) and (max-width: 1200px) and (max-height: 800px) {

    /* VISUAL */
    .main-visual__slogan { top: calc(50% - 10rem); }
    .main-visual__notice { bottom: 45rem; }

    .main-visual__datasets { position: relative; }

}



/* **************************************** *
 * 1023px
 * **************************************** */
@media (max-width: 1023px) {

    /* LAYOUT */
    .main-section { padding: 80rem 0; }

    .main-section__head { margin-bottom: 44rem; }
    .main-section__head p { margin-top: 15rem; }

    .main-section__more { margin-top: 44rem; }

    /* VISUAL */
    .main-visual > .wrap { height: auto; }
    html.ios .main-visual > .wrap { min-height: auto; max-height: none; }

    .main-visual__slogan { padding: 160rem 0 195rem; position: relative; top: auto; transform: none; }

    .main-visual__notice { bottom: 32rem; }
    .main-visual__notice .swiper { height: 38rem; }
    .main-visual__notice-cat { margin-right: 12rem; padding-top: 3rem; }

    .main-visual__datasets { position: relative; }
    .main-visual__datasets-item a { padding: 20rem 58rem 20rem 28rem; }
    .main-visual__datasets-item a > .jt-icon { top: 24rem; right: 28rem; }
    .main-visual__datasets-item a:before { height: 10rem; top: -10rem; }
    .main-visual__datasets-item a:after { top: -10rem; font-size: 13rem; line-height: 19rem; }

    /* ABOUT */
    .main-about.main-section { padding-top: 160rem; }

    /* ECOSYSTEM */
    .main-ecosystem__banner-content { padding: 64rem 52rem; }
    .main-ecosystem__info { margin-top: 50rem; }

    /* COMMUNITY */
    .main-community__channel { margin: 0 -26rem; }
    .main-community__channel:before { width: calc(100% - 52rem); left: 26rem; }
    .main-community__channel > li { padding: 32rem 26rem 0; }
    .main-community__channel-list a > b { margin-bottom: 5rem; padding-left: 26rem; }
    .main-community__channel-list a > b .jt-icon { width: 18rem; top: calc(50% - 1rem); transform: translateY(-50%); }
    .main-community__channel-list a > p .jt-icon { top: -24rem; }

    .main-community__banner { margin-top: 44rem; }
    .main-community__banner-content { padding: 42rem 44rem 42rem 34rem; }
    .main-community__banner-desc { margin-top: 10rem; }

}




/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px) {

    /* LAYOUT */
    .main-section { padding: 70rem 0; }

    .main-section__head { margin-bottom: 36rem; }
    .main-section__head p { margin-top: 12rem; }
    .main-section__more { margin-top: 38rem; }

    /* VISUAL */
    .main-visual > .wrap { height: 100vh; }
    html.ios .main-visual > .wrap { min-height: 100svh; max-height: -webkit-fill-available; }
    
    .main-visual__slogan { top: calc(50% - 25rem); transform: translateY(-50%); }
    .main-visual__slogan p { margin-top: 12rem; }
    .main-visual__actions { margin-top: 32rem; }

    .main-visual__notice { bottom: 25rem; }
    .main-visual__notice .swiper { height: 36rem; }
    .main-visual__notice-cat { margin-right: 8rem; padding: 2rem 12rem 4rem; }
    html.ios .main-visual__notice-cat { padding-top: 3rem; padding-bottom: 3rem; }

    .main-visual__datasets-item a { padding: 18rem 54rem 18rem 24rem; }
    .main-visual__datasets-item a > span { margin-top: 3rem; }
    .main-visual__datasets-item a > .jt-icon { width: 8rem; right: 24rem; }
    .main-visual__datasets-item a:after { padding: 6rem 12rem 7rem; font-size: 12rem; line-height: 17rem; }
    .main-visual__datasets-loading { transform: scale(0.8) translateY(-50%); }
    html.ios .main-visual__datasets-item a > .jt-icon { top: 22rem; }

    /* ABOUT */
    .main-about.main-section { padding-top: 140rem; }

    /* ECOSYSTEM */
    .main-ecosystem__banner-content { padding: 52rem 42rem; }
    .main-ecosystem__banner-typo br { display: none; }

    /* COMMUNITY */
    .main-community__channel { margin: 0 -24rem; }
    .main-community__channel:before { width: calc(100% - 48rem); left: 24rem; }
    .main-community__channel > li { padding: 22rem 24rem 0; }
    .main-community__channel-type { margin-bottom: 7rem; }
    .main-community__channel-list a { padding: 16rem 25rem 16rem 0; }
    .main-community__channel-list a > b { margin-bottom: 4rem; padding-left: 23rem; }
    .main-community__channel-list a > b .jt-icon { width: 16rem; top: 50%; }
    .main-community__channel-list a > p .jt-icon { width: 8rem; top: -21rem; }

    .main-community__banner { margin-top: 38rem; }
    .main-community__banner-content { padding-top: 38rem; padding-bottom: 38rem; }
    .main-community__banner-desc br { display: none; }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px) {

    /* LAYOUT */
    .main-section { padding: 60rem 0; }
    .main-section__head { margin-bottom: 32rem; }
    .main-section__head br { display: none; }
    .main-section__head p { padding: 0 14rem; }

    /* VISUAL */
    .main-visual__slogan { padding: 0 14rem; }
    .main-visual__slogan br { display: none; }

    .main-visual__actions { margin-top: 25rem; }
    .main-visual__actions > .jt-btn__basic { display: block; width: 220rem; margin: 0 auto; }
    .main-visual__actions > .jt-btn__basic:not(:last-child) { margin-right: auto; margin-bottom: 8rem; }

    .main-visual__notice { padding: 20rem 20rem 17rem; bottom: 20rem; background: rgba(255,255,255,0.2); border-radius: 8rem; }
    .main-visual__notice .wrap-narrow { margin: 0; }
    .main-visual__notice .swiper { width: 100%; height: auto; }
    .main-visual__notice-item { padding: 0; }
    .main-visual__notice-link { display: block; }
    .main-visual__notice-cat { margin-right: 0; margin-bottom: 8rem; padding: 0 8rem 2rem; }
    .main-visual__notice-title { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
    html.android .main-visual__notice-cat { padding-top: 2rem; padding-bottom: 1rem; }
    html.ios .main-visual__notice { padding-bottom: 16rem; }
    html.ios .main-visual__notice-cat { padding-top: 2rem; padding-bottom: 2rem; }

    .main-visual__datasets { margin-top: 15rem; }
    .main-visual__datasets-item { width: 100%; }
    .main-visual__datasets-item:nth-last-child(1), .main-visual__datasets-item:nth-last-child(2) { width: 100%; }
    .main-visual__datasets-item:not(:first-child) { border-top: none; }
    .main-visual__datasets-item:not(:last-child):after { display: none; }
    .main-visual__datasets-item a { padding: 16rem 44rem 18rem 14rem; }
    .main-visual__datasets-item a:before, .main-visual__datasets-item a:after { display: none; }
    .main-visual__datasets-item a > .jt-icon { right: 14rem; top: 22rem; }
    .main-visual__datasets-loading { transform: scale(0.65) translateY(-50%); }
    html.ios .main-visual__datasets-item a { padding-top: 17rem; padding-bottom: 15rem; }
    html.ios .main-visual__datasets-item a > .jt-icon { top: 20rem; }

    /* ABOUT */
    .main-about.main-section { padding-top: 120rem; }
    .main-about .main-about__typo br { display: none; }

    /* ECOSYSTEM */
    .main-ecosystem__banner { margin: 0 -14rem; }
    .main-ecosystem__banner-bg, .main-ecosystem__banner-bg:after, .main-ecosystem__banner-bg .jt-background-video__vod, .main-ecosystem__banner-bg .jt-background-video__poster { border-radius: 0; }
    .main-ecosystem__banner-link { margin-top: 14rem; }
    .main-ecosystem__banner-content { display: block; padding: 49rem 28rem 50rem; text-align: center; }

    .main-ecosystem__info { margin-top: 30rem; }

    /* COMMUNITY */
    .main-community__channel { display: block; margin: 40rem 0 0; }
    .main-community__channel:before { display: none; }
    .main-community__channel > li { width: 100%; padding: 56rem 0 0; border-right: none; }
    .main-community__channel > li:first-child { padding-top: 0; }
    .main-community__channel-type { margin-bottom: 0; padding-bottom: 16rem; border-bottom: 1px solid var(--color-base-line); }
    .main-community__channel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14rem; }
    .main-community__channel-list a { padding: 20rem 25rem 21rem 0; }
    html.ios .main-community__channel-list a { padding-top: 21rem; padding-bottom: 20rem; }

    .main-community__banner { margin-top: 56rem; }
    .main-community__banner > li { border-radius: 12rem; }
    .main-community__banner-content { display: block; padding: 28rem 24rem 30rem; text-align: center; }
    .main-community__banner-desc { margin-top: 8rem; }
    .main-community__banner-link { margin-top: 14rem; }

}