@charset "utf-8";

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



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

    /* GLOBAL */
    .main-inform {padding: 0 80rem;}
    .main-inform__desc {font-size: 18rem;}
    .main-inform__control {margin-top: 80rem;}

    /* VISUAL */
    .main-visual__letter h2 {font-size: 90rem;}
    .main-visual__letter p {font-size: 30rem;}

    /* PRODUCT */
    .main-product .main-inform__title br {display: none;}
    .main-product .main-inform__desc {margin-top: 30rem;}

    /* TEAM */
    .main-team__who h2 {font-size: 90rem;}

}



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

    /* GLOBAL */
    .main-section__beginning {margin: 230rem 0 120rem;}
    .main-section__beginning h2 {font-size: 70rem;}
    .main-section__beginning p {margin-top: 22rem;font-size: 19rem;}

    .main-inform {padding: 0 50rem;}
    .main-inform__title {font-size: 50rem;}
    .main-inform__desc {font-size: 17rem;}
    .main-inform__cat {font-size: 19rem;}
    .main-inform__control {margin-top: 70rem;}
    html.mac .main-inform__cat sup {margin-top: 2rem;}

    /* VISUAL */
    .main-visual__gradient {width: 480rem;}

    .main-visual__letter__inner {padding-top: 40rem;}
    .main-visual__letter h2 {font-size: 80rem;}
    .main-visual__letter p {font-size: 26rem;}

    /* PORTFOLIO */
    .main-portfolio .main-inform__title {font-size: 80rem;}
    .main-portfolio .main-inform__title > span {padding-right: 74rem;}
    .main-portfolio .main-inform__title > span:after {width: 54rem;height: 54rem;margin-top: -27rem;font-size: 54rem;}

    /* SLOGAN */
    .main-slogan {margin-top: 110rem;}
    .main-slogan__inner {padding: 80rem 0 55rem;}
    html.mac .main-slogan__inner {padding-top: 68rem;padding-bottom: 64rem;}
    html.ios .main-slogan__inner {padding-top: 68rem;padding-bottom: 64rem;}

    /* PRODUCT */
    .main-product .main-inform__title {font-size: 44rem;}
    .main-product .main-inform__title br {display: block;}
    .main-product .main-inform__desc {margin-top: 24rem;}

    /* PRESS */
    .main-press {padding: 180rem 0;}
    .main-press__title {margin-bottom: 74rem;}
    .main-press__title > h2 {font-size: 50rem;}
    .main-press__sub-title {margin-bottom: 30rem;font-size: 36rem;}
    .main-press__recommend {margin-bottom: 110rem;}

    /* TEAM */
    .main-team__who {padding: 180rem 0;}
    .main-team__who h2 {font-size: 80rem;}
    .main-team__who span {font-size: 19rem;}

    .main-team__data .main-team__data__more {padding: 74rem 40rem 64rem;font-size: 30rem;}
    .main-team__data .main-team__data__more > span {padding-right: 90rem;}
    .main-team__data .main-team__data__more > span:after {width: 52rem;height: 52rem;right: 10rem;margin-top: -31rem;font-size: 52rem;}
    html.mac .main-team__data .main-team__data__more {padding-top: 76rem;padding-bottom: 65rem;}
    html.mac .main-team__data .main-team__data__more > span:after {margin-top: -26rem;}
    html.ios .main-team__data .main-team__data__more {padding-top: 69rem;padding-bottom: 68rem;}
    html.ios .main-team__data .main-team__data__more>span:after {margin-top: -26rem;}

    .main-team__aspiration {padding: 56rem 50rem;}
    .main-team__aspiration-ask {font-size: 34rem;}
    .main-team__aspiration-ask br {display: none;}

}



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

    /* GLOBAL */
    .main-section__beginning {margin: 170rem 0 100rem;}
    .main-section__beginning h2 {font-size: 56rem;}
    .main-section__beginning p {margin-top: 16rem;font-size: 17rem;}

    .main-inform__title {font-size: 42rem;}
    .main-inform__desc {margin-top: 20rem;font-size: 16rem;}
    .main-inform__desc br {display: none;}
    .main-inform__cat {margin-bottom: 14rem;font-size: 18rem;}
    .main-inform__cat sup {margin-top: -3rem;-webkit-transform: scale(0.9);-ms-transform: scale(0.9);transform: scale(0.9);}
    .main-inform__control {margin-top: 50rem;}
    html.mac .main-inform__cat sup {margin-top: 0rem;}
    html.ios .main-inform__cat sup {margin-top: 0rem;}

    /* VISUAL */
    .main-visual {height: auto;padding-top: 50.13%;}

    .main-visual__gradient {width: 380rem;}

    .main-visual__letter h2 {font-size: 60rem;}
    .main-visual__letter p {font-size: 22rem;}

    /* PORTFOLIO */
    .main-portfolio .main-inform__title {font-size: 66rem;}
    .main-portfolio .main-inform__title > span {padding-right: 65rem;}
    .main-portfolio .main-inform__title > span:after {width: 46rem;height: 46rem;margin-top: -22rem;font-size: 46rem;}

    /* SLOGAN */
    .main-slogan {margin-top: 100rem;}
    .main-slogan__inner {padding: 72rem 0 52rem;}
    html.mac .main-slogan__inner {padding-top: 60rem;padding-bottom: 61rem;}
    html.ios .main-slogan__inner {padding-top: 60rem;padding-bottom: 61rem;}

    /* PRODUCT */
    .main-product .main-inform__title {font-size: 36rem;}
    .main-product .main-inform__title br {display: none;}

    /* PRESS */
    .main-press {padding: 140rem 0;}
    .main-press__title {margin-bottom: 52rem;}
    .main-press__title > h2 {font-size: 42rem;}
    .main-press__title b {margin-bottom: 12rem;}
    .main-press__title b > span {font-size: 23rem;}
    .main-press__title b > figure {height: 17rem;margin-bottom: 7rem;}
    .main-press__sub-title {margin-bottom: 25rem;font-size: 32rem;}
    .main-press__recommend {margin-bottom: 85rem;}
    .main-press__more {margin-top: 80rem;}

    /* TEAM */
    .main-team__who {padding: 140rem 0;}
    .main-team__who h2 {font-size: 60rem;}
    .main-team__who span {margin-bottom: 25rem;font-size: 18rem;}

    .main-team__line-01 {display: none;}
    .main-team__data {width: 100%;}
    .main-team__data .main-team__data__more {padding: 64rem 40rem 54rem;}
    html.mac .main-team__data .main-team__data__more {padding-top: 61rem;padding-bottom: 60rem;}
    html.ios .main-team__data .main-team__data__more {padding-top: 59rem;padding-bottom: 58rem;}

    .main-team__aspiration {display: none;}

}



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

    /* GLOBAL */
    .main-section__beginning {margin: 160rem 0 80rem;padding: 0 32rem;}
    .main-section__beginning h2 {font-size: 46rem;}
    .main-section__beginning p {font-size: 14rem;}
    .main-section__beginning p br {display: none;}

    .main-inform {padding: 0 32rem;}
    .main-inform__cat {margin-bottom: 10rem;font-size: 16rem;}
    .main-inform__cat sup {margin-left: 4rem;-webkit-transform: scale(0.75);-ms-transform: scale(0.75);transform: scale(0.75);}
    .main-inform__title {font-size: 32rem;line-height: 1.2;}
    .main-inform__title br {display: none;}
    .main-inform__desc {margin-top: 18rem;font-size: 14rem;}
    .main-inform__desc br {display: none;}
    .main-inform__control {margin-top: 32rem;}
    .main-inform__control .jt-btn--basic {min-width: 160rem;padding: 14rem 24rem 8rem;font-size: 13rem;}
    .main-inform__control .jt-btn--basic__marquee span {padding: 14rem 24rem 8rem;font-size: 13rem;}
    html.ios .main-inform__control .jt-btn--basic, html.ios .main-inform__control .jt-btn--basic__marquee span {padding-top: 11rem;padding-bottom: 11rem;}

    /* VISUAL */
    .main-visual {padding-top: 55.13%;}

    .main-visual__gradient {width: 276rem;}

    .main-visual__letter {height: auto;top: inherit;bottom: 50rem;}
    .main-visual__letter__inner {padding-top: 0;}
    .main-visual__letter h2 {font-size: 46rem;}
    .main-visual__letter p {font-size: 20rem;}

    /* PORTFOLIO */
    .main-portfolio .main-inform__title {font-size: 40rem;}
    .main-portfolio .main-inform__title > span {padding-right: 38rem;}
    .main-portfolio .main-inform__title > span:after {width: 28rem;height: 28rem;margin-top: -13rem;right: 0;font-size: 28rem;}

    .main-portfolio__protocol-cloud {width: 100%;height: 100%;top: 0;}

    .main-portfolio__globe {width: 80%;height: 80%;top: 10%;}
    .jt-globe--list > li {width: 12rem;height: 12rem;margin-left: -6rem;margin-top: -6rem;background-size: contain;}
    .jt-globe--list > li.active {width: 18rem;height: 18rem;margin-left: -9rem;margin-top: -9rem;}

    /* SLOGAN */
    .main-slogan__inner {padding: 64rem 0 45rem;}
    html.ios .main-slogan__inner {padding: 58rem 0 50rem;}

    /* PRODUCT */
    .main-product .main-inform__title {font-size: 26rem;}
    .main-product .main-inform__desc {margin-top: 16rem;}

    /* PRESS */
    .main-press {padding: 120rem 0;}
    .main-press__title {margin-bottom: 46rem;}
    .main-press__title > h2 {font-size: 38rem;}
    .main-press__title b > span {font-size: 20rem;}
    .main-press__title b > figure {height: 15rem;margin-bottom: 5rem;}
    .main-press__sub-title {margin-bottom: 20rem;font-size: 28rem;}
    .main-press__recommend {margin-bottom: 75rem;}
    .main-press__more {margin-top: 60rem;}

    /* TEAM */
    .main-team__who {padding: 120rem 0;}
    .main-team__who h2 {font-size: 46rem;}
    .main-team__who span {margin-bottom: 20rem;}

    .main-team__data .jt-member-list__item:nth-child(3) {border-top-width: 2rem;}
    .main-team__data .main-team__data__more {padding: 51rem 32rem 41rem;font-size: 28rem;border-top-width: 2rem;}
    .main-team__data .main-team__data__more > span {padding-right: 65rem;}
    .main-team__data .main-team__data__more > span:after {width: 44rem;height: 44rem;right: 0;margin-top: -26rem;font-size: 44rem;}
    html.ios .main-team__data .main-team__data__more {padding-top: 47rem;padding-bottom: 44rem;}
    html.ios .main-team__data .main-team__data__more > span:after {margin-top: -22rem;}

}



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

    /* GLOBAL */
    .main-section__beginning {margin: 120rem 0 40rem;padding: 0;}
    .main-section__beginning h2 {font-size: 32rem;line-height: 1.2;}
    .main-section__beginning p {font-size: 15rem;}

    .main-dynamic {-webkit-box-ordinal-group: 2;-webkit-order: 1;-ms-flex-order: 1;order: 1;}
    .jt-squared__content > div.main-dynamic {height: auto;padding-top: 100%;}
    .main-dynamic__inner {width: 100%;position: absolute;top: 0;left: 0;}

    .main-inform {padding: 40rem 0 0;-webkit-box-ordinal-group: 3;-webkit-order: 2;-ms-flex-order: 2;order: 2;}
    .main-inform__desc {font-size: 15rem;}
    .main-inform__control .jt-btn--basic {min-width: 200rem;padding: 16rem 24rem 10rem;font-size: 14rem;}
    .main-inform__control .jt-btn--basic__marquee span {padding: 16rem 24rem 10rem;font-size: 14rem;}
    html.ios .main-inform__control .jt-btn--basic, html.ios .main-inform__control .jt-btn--basic__marquee span {padding-top: 13rem;padding-bottom: 13rem;}

    /* VISUAL */
    .main-visual {padding-top: 50rem;padding-bottom: 80rem;margin-bottom: 80rem;border-bottom: 2rem solid #fff;}

    #main-visual__gl {width: 100%;padding-top: 94.17%;position: relative;}
    #main-visual__gl canvas {position: absolute;top: 0;left: 0;}
    #main-visual__gl--movie {width: 116%;padding-top: 100%;left: -8%;position: relative;}
    #main-visual__gl--movie .jt-fullvid-container {position: absolute;top: 0;left: 0;}

    .main-visual__gradient {width: 207rem;height: 580rem;top: inherit;bottom: -207rem;left: 50%;margin-left: -103rem;-webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);}

    .main-visual__star > span {background-image: url(../images/main/visual-particle-star-vert.png);}

    .main-visual__letter {position: relative;bottom: inherit;}
    .main-visual__letter h2 {font-size: 36rem;}
    .main-visual__letter p {font-size: 17rem;}

    /* ABOUT */
    .main-about .jt-squared__item__inner {padding-bottom: 40rem;}

    /* PORTFOLIO */
    .main-portfolio__protocol-cloud:after {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 10;}
    .main-portfolio__globe {width: 100%;height: 100%;top: 0;}
    .main-portfolio__globe:after {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 10;}

    /* SLOGAN */
    .main-slogan {margin-top: 20rem;}
    .main-slogan .jt-division__line {display: block;}
    .main-slogan__inner {padding: 44rem 0 33rem;}
    html.ios .main-slogan__inner {padding-top: 40rem;padding-bottom: 37rem;}

    /* PRESS */
    .main-press {padding: 80rem 0 100rem;overflow: hidden;}
    .main-press__title {margin-bottom: 38rem;}
    .main-press__title > h2 {font-size: 32rem;}
    .main-press__title b > span {font-size: 16rem;}
    .main-press__title b > figure {height: 12rem;margin-bottom: 5rem;}
    .main-press__sub-title {margin-bottom: 15rem;font-size: 24rem;}

    .main-press__recommend {margin: 0 -5rem 50rem;overflow: visible;}
    .main-press__more {margin-top: 42rem;}

    /* TEAM */
    .main-team__who {padding: 100rem 0 10rem;}
    .main-team__who span {font-size: 16rem;}
    .main-team__who h2 {font-size: 36rem;line-height: 1.15;}
    .main-team__who h2 br {display: none;}

    .main-team__data .jt-member-list__item {width: 100%;}
    .main-team__data .jt-member-list__item:nth-child(3) {border-top: none;}
    .main-team__data .main-team__data__more {margin-top: 20rem;padding: 34rem 24rem 28rem;font-size: 20rem;}
    .main-team__data .main-team__data__more > span {padding-right: 40rem;}
    .main-team__data .main-team__data__more > span:after {width: 28rem;height: 28rem;margin-top: -16rem;font-size: 28rem;}
    html.ios .main-team__data .main-team__data__more {padding-top: 30rem;padding-bottom: 29rem;}
    html.ios .main-team__data .main-team__data__more > span:after {margin-top: -14rem;}

}