@charset "utf-8";

/*
 * File       : sub.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 * Dependency : css/jt-strap.css
 *
 * SUMMARY:
 * 01) CONTACT
 * 02) BRAND
 * 03) ABOUT
 */



/* **************************************** *
 * CONTACT
 * **************************************** */
/* INTRO */
.contact-intro {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;position: relative;border-bottom: solid #000;}
.contact-intro:after {content: '';display: block;width: 1px;height: 100%;position: absolute;top: 0;left: 50%;background: #000;}
.contact-intro > div {width: 50%;position: relative;}
.contact-intro__img .jt-lazyload {padding-top: 106%;}
.contact-intro__rolling {position: absolute;top: 39.6%;left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);}
.contact-intro__typo {position: absolute;left: 60rem;bottom: 58rem;}

/* PROCESS */
.contact-process__step {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-align: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;counter-reset: item;border-top: 1px solid #000;}
.contact-process__step > li {width: 25%;padding: 30rem 40rem 34rem;position: relative;border-left: 1px solid #000;border-bottom: 1px solid #000;}
.contact-process__step > li:nth-child(4n+1) {border-left: none;}
.contact-process__step > li:before {content: counter(item);counter-increment: item;display: block;font-size: 15rem;line-height: 1.86;font-weight: 700;}
.contact-process__step > li:last-child {display: none;}
.contact-process__step > li:last-child:before {display: none;}
.contact-process__illust {width: 80%;max-width: 256rem;margin: 58rem auto 88rem;position: relative;}
.contact-process__illust .jt-lazyload {padding-top: 74.21%;}
.contact-process__illust svg {display: block;width: 100%;height: auto;}
.contact-process__text .jt-text--07 {margin-top: 11rem;}

.contact-process__question {position: relative;}
.contact-process__question-note {position: absolute;top: 26%;left: 35%;background: no-repeat center center;background-size: contain;}
.contact-process__question-note-primary {width: 3rem;height: 5rem;background-image: url(../images/sub/contact/contact-process-question-note-01.svg);}
.contact-process__question-note-secondary {width: 6rem;height: 5rem;background-image: url(../images/sub/contact/contact-process-question-note-02.svg);}

.contact-process__plan {position: relative;}
.contact-process__plan-mark {width: 31rem;height: 27rem;position: absolute;bottom: 21%;right: 42%;background: url(../images/sub/contact/contact-process-plan-mark.svg) no-repeat center center;background-size: contain;}

/* REQUEST */
.contact-request {padding-bottom: 200rem;}
.contact-request__content {position: relative;}
.contact-request__content:after {content: '';display: table;clear: both;}
.contact-request__content > div:nth-child(1) {padding-top: 120rem;}
.contact-request__content > div:nth-child(2) {padding-top: 124rem;}
.contact-request__title {float: left;width: -webkit-calc(100% - 920rem);width: calc(100% - 920rem);}
.contact-request__form {float: right;width: 840rem;padding-right: 60rem;}

html.mobile .contact-request__title.js-fixed {position: fixed;top: 0;left: 60rem;}
html.mobile .contact-request__title.js-fixed.js-clear {position: absolute;left: 0;top: inherit;bottom: 0;}

/* ADDRESS */
.contact-address__list {position: relative;font-size: 0;}
.contact-address__list:after {content: '';display: block;width: 1px;height: 100%;position: absolute;left: 50%;top: 0;background: #000;}
.contact-address__item {display: inline-block;vertical-align: top;width: 50%;padding: 61rem 0 185rem;}
.contact-address__item:last-child {padding-left: 60rem;}
.contact-address__item .jt-text--07 {margin: 19rem 0 10rem;}
.contact-address__item .jt-text--07 > span {display: block;}
.contact-address__item .jt-btn__underline {margin-top: 17rem;margin-left: -26rem;}



/* **************************************** *
 * BRAND
 * **************************************** */
/* VISUAL */
.brand-visual {border: solid #000;border-width: 1px 0;}
.brand-visual .jt-lazyload {padding-top: 53%;}

/* STORY */
.brand-story__content {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;position: relative;}
.brand-story__content:after {content: '';display: block;width: 1px;height: 100%;position: absolute;right: 552rem;top: 0;background: #000;}

.brand-story__philosophy {width: -webkit-calc(100% - 552rem);width: calc(100% - 552rem);padding-top: 62rem;}
.brand-story__philosophy .jt-text--05 {margin-top: 39rem;}
.brand-story__philosophy .jt-btn__underline {margin-top: 12rem;margin-left: -26rem;}

.brand-story__affiliates {width: 552rem;}
.brand-story__parentheses {max-width: 112rem;margin: 223rem auto;}
.brand-story__parentheses .jt-lazyload {padding-top: 61.6%;}

.brand-story__company .jt-btn__underline {margin: 15rem 0 -14rem -26rem;}



/* **************************************** *
 * ABOUT
 * **************************************** */
/* INTRO */
.about-intro {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;position: relative;border: solid #000;border-width: 1px 0;}
.about-intro:after {content: '';display: block;width: 1px;height: 100%;position: absolute;top: 0;left: 50%;background: #000;}
.about-intro > div {width: 50%;position: relative;}
.about-intro__img .jt-lazyload {padding-top: 106%;}
.about-intro__who {position: absolute;left: 60rem;top: 62rem;}
.about-intro__typo {position: absolute;left: 60rem;bottom: 58rem;}
.about-intro__typo p + p {margin-top: 30rem;}

/* VALUE */
.about-value__key {position: relative;font-size: 0;}
.about-value__key:before, .about-value__key:after {content: '';display: block;width: 1px;height: 100%;position: absolute;top: 0;background: #000;}
.about-value__key:before {left: 33.33%;}
.about-value__key:after {right: 33.33%;}
.about-value__key + .about-value__key {border-top: 1px solid #000;}

.about-value__unit {display: inline-block;vertical-align: top;width: 33.33%;padding-top: 33.33%;position: relative;}
.about-value__unit-inner {width: 100%;height: 100%;position: absolute;top: 0;left: 0;padding: 40rem;}

.about-value__attribute .jt-text--06 {margin-top: 17rem;}

.about-value__image .jt-lazyload {padding-top: 100%;}

.about-value__which {width: -webkit-calc(100% - 80rem);width: calc(100% - 80rem);position: absolute;bottom: 40rem;}
.about-value__which > li {padding: 12rem 0 9rem;border-bottom: 1px solid #000;}

.about-value__choice {padding-right: 50%;position: relative;}
.about-value__choice > b:last-child {position: absolute;right: 0;}

.about-value__typo {position: absolute;bottom: 40rem;}

.about-value__unit--wide {width: 66.66%;}
.about-value__unit--wide .about-value__unit-inner {padding: 0;}
.about-value__unit--wide .about-value__image .jt-lazyload {padding-top: 50%;}

.about-value__key--comma:before {display: none;}
