@charset "utf-8";

/*
 * File       : sub-about.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01) LAYOUT
 * 02) STORY
 * 03) VALUE
 * 04) PROMISE
 * 05) SIMPLY
 * 06) MEMBER
 * 07) PRESS
 * 08) IDENTITY
 */



/* **************************************** *
 * LAYOUT
 * **************************************** */
/* CLEAR */
body.page-template-about .main-container {padding-top: 0;padding-bottom: 0;}

/* PAGE */
body.page-template-about .article-visual__inner {padding-top: 46rem;text-align: center;}

/* GLOBAL */
.about-message h2 {font-size: 80rem;font-weight: 700;line-height: 1.25;color: #fff;}
.about-message b {display: block;font-size: 48rem;font-weight: 700;line-height: 1.12;color: #fff;}
.about-message p {font-size: 36rem;font-weight: 500;line-height: 1.67;letter-spacing: 0.03em;color: #fff;}
.about-message b + p {margin-top: 40rem;}
.about-message p + b {margin-top: 180rem;}
.about-message p + p {margin-top: 102rem;}
.about-message h2 + * {margin-top: 120rem;}



/* **************************************** *
 * VISUAL
 * **************************************** */
.about-trailer {position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
.about-trailer:after {content: '';display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.2);}

/* VOLUME */
.about-trailer__volume {display: block;position: absolute;bottom: 50rem;left: 100rem;font-size: 0;z-index: 2;cursor: pointer;opacity: 0;visibility: hidden;}

.about-trailer__volume-visualizer {display: inline-block;vertical-align: middle;width: 39rem;height: 34rem;position: relative;overflow: hidden;}
.about-trailer__volume-bar {position: absolute;width: 4rem;height: 100%;bottom: 0;background: #fff;}
.about-trailer__volume-bar--01 {left: 0;}
.about-trailer__volume-bar--02 {left: 7rem;}
.about-trailer__volume-bar--03 {left: 14rem;}
.about-trailer__volume-bar--04 {left: 21rem;}
.about-trailer__volume-bar--05 {left: 28rem;}
.about-trailer__volume-bar--06 {left: 35rem;}

.about-trailer__volume-text {display: inline-block;vertical-align: middle;width: 110rem;height: 34rem;margin-left: 16rem;position: relative;}
.about-trailer__volume-text > span {display: block;position: absolute;bottom: -5rem;font-size: 14rem;font-weight: 500;line-height: 1;color: #fff;-webkit-transition: opacity .3s;transition: opacity .3s;}
.about-trailer__volume--play .about-trailer__volume-text > span.about-trailer__volume-on {opacity: 0;}
.about-trailer__volume--pause .about-trailer__volume-text > span.about-trailer__volume-off {opacity: 0;}



/* **************************************** *
 * STORY
 * **************************************** */
.about-story {overflow: hidden;}
.about-story__inner {padding: 300rem 0 380rem;position: relative;}
.about-story__illust {width: 956rem;position: absolute;top: 410rem;left: 50%;margin-left: -1337rem;}
.about-story__illust .jt-lazyload {padding-top: 100.5%;-webkit-animation: spin-frames 120s linear infinite;animation: spin-frames 120s linear infinite;}
.about-story__content {width: 1015rem;margin: 0 0 0 auto;}



/* **************************************** *
 * VALUE
 * **************************************** */
.about-value {position: relative;background: #000;z-index: 2;}
.about-value__title {margin-bottom: 100rem;}

.about-value__inform.about-value__inform--primary {padding: 0 120rem 0 154rem;}
.about-value__inform.about-value__inform--secondary {padding: 0 120rem 0 181rem;}
.about-value__inform b {display: block;font-size: 48rem;font-weight: 700;line-height: 1.125;color: #fff;}
.about-value__inform p {display: block;margin-top: 40rem;font-size: 20rem;font-weight: 500;line-height: 1.6;color: #fff;}

.about-value__object {height: 100%;position: relative;}
.about-value__object-inner {height: 100%;}

.about-value .jt-squared__item__inner {padding-top: 42%;}



/* **************************************** *
 * PROMISE
 * **************************************** */
.about-promise {overflow: hidden;}
.about-promise__inner {padding: 380rem 0 300rem;position: relative;}

.about-promise__illust {width: 1000rem;position: absolute;top: 350rem;left: 50%;margin-left: 460rem;}
.about-promise__illust .jt-lazyload {padding-top: 100%;}
.about-promise__illust-bg {width: 787rem;height: 2243rem;position: absolute;left: -256rem;top: 50%;margin-top: -1121rem;background: no-repeat center center;background-size: cover;}

.about-promise__star {position: absolute;top: 0;bottom: 0;left: 0;right: 0;overflow: hidden;}
.about-promise__star > span {position: absolute;left: 0;bottom: 0;right: 0;top: 0;background: no-repeat center center;background-size: contain;-webkit-animation: 120s marquee-angle-frames linear infinite;animation: 120s marquee-angle-frames linear infinite;will-change: transform;}
.about-promise__star > span:nth-child(2) {width: 100vw;left: 100%;top: 50%;}

/* motion */
.about-promise .jt-motion--appear + .jt-motion--appear {margin-top: 180rem;}



/* **************************************** *
 * SIMPLY
 * **************************************** */
.about-simply {overflow: hidden;}
.about-simply__inner {padding: 300rem 0;background: no-repeat center bottom;background-size: contain;}

.about-simply__illust {margin: 195rem 0 218rem;position: relative;}

.about-simply__illust--node {width: 1072rem;margin: 0 auto;position: relative;z-index: 2;}
.about-simply__playground {width: 100%;position: relative;}
.about-simply--line {position: relative;z-index: 1;}
.about-simply--line svg {display: block;width: 100%;height: auto;}
.about-simply--line path {fill: none;stroke: #fff;stroke-width: 6;stroke-miterlimit: 10;}
.about-simply--ball {width: 100rem;height: 100rem;position: absolute;border-radius: 50%;z-index: 2;}
.about-simply--ball-01 {top: 0;right: 285rem;background: -webkit-linear-gradient(273.54deg, #FFFFFF 24.01%, #FFFFFF 38.94%, #FFF72E 55.59%, #EF5149 72.9%, #000000 115.63%, #0F1D39 150.73%, #4281FF 244.24%);background: linear-gradient(176.46deg, #FFFFFF 24.01%, #FFFFFF 38.94%, #FFF72E 55.59%, #EF5149 72.9%, #000000 115.63%, #0F1D39 150.73%, #4281FF 244.24%);}
.about-simply--ball-02 {top: 97rem;right: 0;background: -webkit-linear-gradient(278.54deg, #FFFFFF -26.15%, #FFFFFF -15.83%, #FFF72E 9.72%, #EF5149 49.34%, #000000 63%, #0F1D39 76.88%, #4281FF 126.17%);background: linear-gradient(171.46deg, #FFFFFF -26.15%, #FFFFFF -15.83%, #FFF72E 9.72%, #EF5149 49.34%, #000000 63%, #0F1D39 76.88%, #4281FF 126.17%);}
.about-simply--ball-03 {top: 228rem;left: 0;background: -webkit-linear-gradient(243.54deg, #FFFFFF 29.42%, #FFFFFF 41.22%, #FFF72E 54.38%, #EF5149 68.06%, #000000 101.83%, #0F1D39 129.58%, #4281FF 203.5%);background: linear-gradient(206.46deg, #FFFFFF 29.42%, #FFFFFF 41.22%, #FFF72E 54.38%, #EF5149 68.06%, #000000 101.83%, #0F1D39 129.58%, #4281FF 203.5%);}
.about-simply--ball-04 {top: 464rem;left: 398rem;background: -webkit-linear-gradient(256.29deg, #FFFFFF -21.95%, #FFFFFF -12.23%, #FFF72E -1.4%, #EF5149 9.87%, #000000 37.69%, #0F1D39 60.54%, #4281FF 121.41%);background: linear-gradient(193.71deg, #FFFFFF -21.95%, #FFFFFF -12.23%, #FFF72E -1.4%, #EF5149 9.87%, #000000 37.69%, #0F1D39 60.54%, #4281FF 121.41%);}

.about-simply__illust--network {width: 1176rem;margin: -275rem auto 0;position: relative;z-index: 1;}
.about-simply__illust--network svg {display: block;width: 100%;height: auto;}



/* **************************************** *
 * MEMBER
 * **************************************** */
.about-member__slogan {padding: 299rem 0 200rem;}
.about-member__slogan h2 {font-size: 100rem;font-weight: 700;line-height: 1.1;letter-spacing: 0.03em;color: #fff;}



/* **************************************** *
 * PRESS
 * **************************************** */
/* PAGE LAYOUT */
body.page-template-press, body.page-template-press .global-container {background: #fff;}

body.page-template-press .main-container {padding-bottom: 0;}

body.page-template-press #logo svg path {fill: #000;}
body.page-template-press #menu-ball > span {background: #000;}
body.page-template-press #menu > li > a {color: #000;}
body.page-template-press #menu > li > ul > li > a {color: #000;background: #fff;border-color: #000;}
body.page-template-press #menu > li > ul > li > a:after {border-color: #000 #000 transparent transparent;}
html.desktop body.page-template-press #menu > li > ul > li > a:hover {color: #fff;background: #000;}
body.page-template-press .minimize#header {background: #fff;border-bottom-color: #000;}
body.page-template-press .footer__draw-line {background: #000;}

body.page-template-press .article-header {text-align: left;}
body.page-template-press .article-title {color: #000;}
body.page-template-press .article-desc {color: #000;}
body.page-template-press .article-desc a {color: #000;}
body.page-template-press .article-desc a > span:before, body.page-template-press .article-desc a > span:after {background: #000;}

body.page-template-press .jt-division__line {background: #000;}

body.page-template-press .jt-loadmore {background: #fff;border-top-color: #000;}
body.page-template-press .jt-loadmore__btn {color: #000;}
body.page-template-press .jt-loadmore__btn > span:after {color: #000;}
body.page-template-press .jt-loadmore__spinner > div {background: #000;}

/* LIST */
.press-recommend {margin-bottom: 160rem;}
.press-recommend h2 {display: block;margin-bottom: 32rem;font-size: 48rem;font-weight: 700;line-height: 1.1;color: #000;}

.press-basic__inner {padding-top: 195rem;}



/* **************************************** *
 * IDENTITY
 * **************************************** */
body.page-template-identity .main-container {padding-bottom: 0;}

.identity-section {padding-top: 300rem;}

.identity-section__title {display: block;font-size: 100rem;font-weight: 700;line-height: 1.1;letter-spacing: 0.03em;text-align: center;color: #fff;}

.identity-category-wrap {margin-bottom: 100rem;text-align: center;}
.identity-category {display: inline-block;min-width: 264rem;padding: 27rem 60rem 22rem 69rem;font-size: 36rem;font-weight: 500;line-height: 1.66;letter-spacing: 0.03em;text-align: center;color: #fff;border: 4rem solid #fff;border-radius: 100%;}
html.mac .identity-category {padding-top: 22rem;}
html.ios .identity-category {padding-top: 26rem;padding-bottom: 24rem;}

.identity-context b {display: block;font-size: 60rem;line-height: 1.25;font-weight: 700;color: #fff;}
.identity-context p {font-size: 36rem;line-height: 1.66;font-weight: 500;letter-spacing: 0.03em;color: #fff;}
.identity-context b + p {margin-top: 78rem;}
.identity-context p + p {margin-top: 64rem;}

.identity-section .jt-separation {margin-top: 300rem;}

.identity-download__kit {margin-top: 300rem;position: relative;font-size: 0;border-top: 4rem solid #fff;}
.identity-download__kit > a {display: block;width: 100%;padding: 82rem 34rem 73rem;position: relative;font-size: 26rem;line-height: 1.75;text-align: center;font-weight: 700;letter-spacing: 0.03em;color: #fff;}
.identity-download__kit > a > span {display: inline-block;position: relative;padding-right: 52rem;}
.identity-download__kit > a > span:after {display: block;width: 26rem;height: 26rem;position: absolute;right: 0;top: 50%;margin-top: -16rem;font-family: 'jt-font';content: '\e92f';font-size: 26rem;line-height: 1;font-weight: normal;font-style: normal;color: #fff;}
.identity-download__kit > a > span em {display: inline-block;position: relative;height: 40rem;overflow: hidden;}
.identity-download__kit > a > span em > i {display: block;height: 40rem;font-style: normal;}
.identity-download__kit > a > span em > i:last-child {position: absolute;top: 0;left: 0;opacity: 0;}
.identity-download__kit > a.jt-btn--rolling {padding-bottom: 60rem;}
.identity-download__kit > a.jt-btn--rolling > span:after {margin-top: -24rem;}
html.mac .identity-download__kit > a {padding-top: 81rem;padding-bottom: 74rem;}
html.mac .identity-download__kit > a > span:after {margin-top: -12rem;}
html.ios .identity-download__kit > a {padding-top: 79rem;padding-bottom: 76rem;}
html.ios .identity-download__kit > a > span:after {margin-top: -13rem;}

/* VISUAL */
.identity-visual {border-bottom: 4rem solid #fff;}
.identity-visual.identity-section {padding-top: 40rem;padding-bottom: 90rem;}
.identity-visual .identity-section__head {position: relative;z-index: 2;}

.identity-visual__logo {width: 1280rem;margin: 23rem auto 0;}
.identity-visual__logo .jt-lazyload {padding-top: 56.25%;}

/* PERSONALITY */
.identity-personality__slide {width: 360%;height: 100vh;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;}
.identity-personality__item {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;width: 120%;height: 100%;position: relative;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

.identity-personality__key {display: block;margin-top: 10rem;position: relative;font-size: 80rem;font-weight: 700;line-height: 1.1;text-align: center;color: #fff;mix-blend-mode: difference;}
html.mac .identity-personality__key {margin-top: 0;}
html.ios .identity-personality__key {margin-top: 0;}

.identity-personality__illust {position: absolute;}
.identity-personality__illust > span {display: block;width: 100%;height: 100%;position: relative;top: 0;left: 0;background: no-repeat center center;background-size: cover;}

.identity-personality__line {display: block;width: 100%;height: 90rem;position: absolute;left: 0;background: #fff;}
.identity-personality__line--01 {top: 0;}
.identity-personality__line--02 {top: -webkit-calc(25% + 45rem);top: calc(25% + 45rem);}
.identity-personality__line--03 {top: -webkit-calc(50% + 90rem);top: calc(50% + 90rem);}
.identity-personality__line--04 {bottom: 0;}

.identity-personality--bold .identity-personality__illust {width: 626rem;height: 626rem;top: 50%;left: 40%;margin-top: -313rem;margin-left: -313rem;}
.identity-personality--bold .identity-personality__key {left: 18%}

.identity-personality--confident .identity-personality__illust--01 {width: 792rem;height: 306rem;top: 0;left: 0;}
.identity-personality--confident .identity-personality__illust--02 {width: 628rem;height: 243rem;bottom: 0;right: 0;}

.identity-personality--contemporary .identity-personality__key {left: 8%;}

/* OBJECT (LOGO + FAVICON) */
.identity-object__lattice {max-width: 1280rem;margin: 0 auto;}
.identity-object__lattice svg {display: block;width: 100%;height: auto;}

.identity-object .identity-download__kit {margin-top: 260rem;border-bottom: 4rem solid #fff;}
.identity-object .identity-download__kit:before {content: '';width: 4rem;height: 100%;position: absolute;top: 0;left: -webkit-calc(50% - 2rem);left: calc(50% - 2rem);background: #fff;}
.identity-object .identity-download__kit > a {display: inline-block;width: 50%;}

.identity-object.identity-section .jt-separation {margin-top: 0;}

.identity-object--logo {margin-top: 150rem;}
.identity-object--favicon {margin-top: 300rem;}

/* SPECTRUM */
.identity-spectrum  {overflow: hidden;}
.identity-spectrum .identity-section__head {position: relative;z-index: 2;}

.identity-spectrum__ball {margin-top: -400rem;padding-top: 56.25%;position: relative;}
.identity-spectrum__ball-inner {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}

.identity-spectrum__color {margin-top: 95rem;}
.identity-spectrum__color-item + .identity-spectrum__color-item {margin-top: 200rem;}
.identity-spectrum__color-item h3 {margin-bottom: 59rem;font-size: 36rem;font-weight: 700;line-height: 1.33;text-align: center;color: #fff;}
.identity-spectrum__palette {position: relative;border: solid #fff;border-width: 4px 0;}
.identity-spectrum__palette > span {height: 100%;position: absolute;top: 0;overflow: hidden;}
.identity-spectrum__palette > span > i {display: block;padding: 54rem 20rem;text-align: center;font-size: 20rem;font-weight: 700;line-height: 1.1;letter-spacing: 0.05em;font-style: normal;color: #fff;}
.identity-spectrum__palette-value {margin-top: 35rem;position: relative;font-size: 0;}
.identity-spectrum__palette-value > li {display: inline-block;vertical-align: middle;position: absolute;top: 0;font-size: 20rem;font-weight: 700;line-height: 1.1;letter-spacing: 0.05em;color: #fff;}
.identity-spectrum__palette-value > li:first-child {position: relative;}
html.mac .identity-spectrum__palette > span > i {padding-top: 51rem;padding-bottom: 51rem;}
html.ios .identity-spectrum__palette > span > i {padding-top: 51rem;padding-bottom: 51rem;}

.identity-spectrum__color--primary .identity-spectrum__palette {height: 285rem;}
.identity-spectrum__color--primary .identity-spectrum__palette > span:nth-child(1) {width: 92.86%;left: 0;background: -webkit-gradient(linear, left top, right top, from(#FFFFFF), color-stop(17.7%, #D5D9E3), color-stop(36%, #4281FE), color-stop(70.4%, #0F1D39), color-stop(78.8%, #000000), color-stop(93.1%, #000000), to(#EE5149));background: -webkit-linear-gradient(left, #FFFFFF 0%, #D5D9E3 17.7%, #4281FE 36%, #0F1D39 70.4%, #000000 78.8%, #000000 93.1%, #EE5149 100%);background: linear-gradient(90deg, #FFFFFF 0%, #D5D9E3 17.7%, #4281FE 36%, #0F1D39 70.4%, #000000 78.8%, #000000 93.1%, #EE5149 100%);}
.identity-spectrum__color--primary .identity-spectrum__palette > span:nth-child(2) {width: 7.14%;right: 0;background: -webkit-gradient(linear, right top, left top, from(#FFFFFF), color-stop(78.3%, #FFF72E), to(#EF5149));background: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF72E 78.3%, #EF5149 100%);background: linear-gradient(270deg, #FFFFFF 0%, #FFF72E 78.3%, #EF5149 100%);}
.identity-spectrum__color--primary .identity-spectrum__palette-value > li:nth-child(2) {left: -webkit-calc(50% - 105rem);left: calc(50% - 105rem);}
.identity-spectrum__color--primary .identity-spectrum__palette-value > li:nth-child(3) {right: 11.2%;}
.identity-spectrum__color--primary .identity-spectrum__palette-value > li:nth-child(4) {right: 0;}
.identity-spectrum__color--primary .identity-context {margin-top: 87rem;}

.identity-spectrum__color--background .identity-spectrum__palette {height: 128rem;}
.identity-spectrum__color--background .identity-spectrum__palette > span {border-right: 4rem solid #fff;}
.identity-spectrum__color--background .identity-spectrum__palette > span:last-child {border-right: none;}
.identity-spectrum__color--background .identity-spectrum__palette > span:nth-child(1) {width: 51.7%;left: 0;background: #000;}
.identity-spectrum__color--background .identity-spectrum__palette > span:nth-child(2) {width: 25.5%;left: 51.7%;background: #313131;}
.identity-spectrum__color--background .identity-spectrum__palette > span:nth-child(3) {width: 14.3%;left: 77.2%;background: #494b52;}
.identity-spectrum__color--background .identity-spectrum__palette > span:nth-child(4) {width: 8.5%;right: 0;background: #6f727b;}
.identity-spectrum__color--background .identity-spectrum__palette-value > li:nth-child(2) {left: 51.4%;}
.identity-spectrum__color--background .identity-spectrum__palette-value > li:nth-child(3) {left: 77%;}
.identity-spectrum__color--background .identity-spectrum__palette-value > li:nth-child(4) {right: 2.6%;}

/* LANGUAGE */
.identity-language__preview-outer {max-width: 1280rem;margin: 100rem auto 144rem;}
.identity-language__preview {padding-top: 56.25%;position: relative;}
.identity-language__preview-inner {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.identity-language__frame {width: 100%;height: 100%;}

.identity-language__element {display: block;margin-bottom: 130rem;font-size: 60rem;font-weight: 500;line-height: 1.1;text-align: center;color: #fff;}

/* TYPOGRAPHY */
.identity-typography__info {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;margin: 100rem 0 200rem;}
.identity-typography__info-txt {width: 54.93%;}
.identity-typography__info-render {width: 45.07%;}
.identity-typography__frame {padding-top: 99.2%;position: relative;}
.identity-typography__frame-inner {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}

.identity-typography__alphabet {font-size: 0;margin: -50rem -60rem;}
.identity-typography__alphabet > li {display: inline-block;vertical-align: top;width: 10%;padding: 50rem 0;}
.identity-typography__alphabet-img {width: 80rem;margin: 0 auto;}
.identity-typography__alphabet-img img {display: block;width: 100%;height: auto;}