@charset "utf-8";

/*
 * File       : sub-center.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 01) LAYOUT + COMPONENT
 * 02) TOUR
 * 03) PLOT
 * 04) PURPOSE
 * 05) BANNER
 * 06) RESEARCH
 * 07) HISTORY
 * 08) WATCH
 * 09) LOCATION
 * 10) MATERIAL
 * 11) MOVIE
 * 12) PAGING
 * 13) PROCESS
 * 14) PRODUCT
 * 15) ANTIAGING
 * 16) ENZYME
 * 17) INGREDIENT
 * 18) FIELD
 * 19) PROMISE
 * 20) FORWARD
 */



/* **************************************** *
 * LAYOUT + COMPONENT
 * **************************************** */
.center-section {padding: 200rem 0;position: relative;}
.center-section.center-section--full {padding-top: 0;padding-bottom: 0;}

/* HEAD */
.center-section__head {margin-bottom: 77rem;text-align: center; will-change: transform;}
.center-section__head h2 {font-size: 36rem;font-weight: 600;line-height: 1.4;color: #000;}
.center-section__head p {margin-top: 15rem;font-size: 16rem;font-weight: 400;line-height: 1.63;color: #666;}
.center-section__head .jt-btn__basic {margin-top: 27rem;}

.center-section__subtypo h3 {font-size: 30rem;font-weight: 600;line-height: 1.47;color: #000;}

/* GRID */
.center-grid {position: relative;}
.center-grid__item {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;}
.center-grid__item + .center-grid__item {margin-top: 160rem;}

.center-grid__picture {width: 57.143%;}
.center-grid__picture .jt-lazyload {padding-top: 68.82%;}

.center-grid__typo {width: 42.857%;}
.center-grid__item--type-01 .center-grid__typo {padding-left: 196rem;padding-right: 87rem;}
.center-grid__item--type-02 .center-grid__typo {padding-left: 148rem;padding-right: 87rem;}
.center-grid__typo span {display: block;margin-bottom: 4rem;font-size: 16rem;font-weight: 500;line-height: 1.63;color: #000;}
.center-grid__typo b {display: block;font-size: 36rem;font-weight: 600;line-height: 1.4;color: #000;}
.center-grid__typo p {font-size: 16rem;font-weight: 400;line-height: 1.63;color: #666;}
.center-grid__typo b + p {margin-top: 31rem;}
.center-grid__typo p + p {margin-top: 13rem;}

.center-grid__item--extend .center-grid__typo.center-grid__typo--clone {display: none;}

/* STICKY LABEL */
.center-sticky-label {width: 335rem;position: absolute;top: 0;right: 0;background: #2D2A29;z-index: 499;}
.center-sticky-label.js-fixed {position: fixed;top: 90rem;}
body.ie-banner-open .center-sticky-label.js-fixed {top:153rem;}

.center-sticky-label__inner {display: block;width: 100%;height: 100%;padding: 51rem 30rem 64rem 30rem;position: relative;overflow: hidden;}

.center-sticky-label b {display: block;font-size: 16rem;font-weight: 600;line-height: 1.1;color: #fff;}
.center-sticky-label p {margin-top: 8rem;font-size: 12rem;font-weight: 400;line-height: 1.5;color: #ccc;}
.center-sticky-label__img {width: 184rem;margin: 32rem auto 0;}
.center-sticky-label__img img {display: block;width: 100%;height: auto;}
.center-sticky-label .jt-lazyload {padding-top: 60%;}
.center-sticky-label .jt-btn__underline {position: absolute;right: 18rem;bottom: 15rem;z-index: 2;}

.center-sticky-label__close {display: block;width: 32rem;height: 32rem;padding: 0;margin: 0;position: absolute;right: 12rem;top: 12rem;background: none;border: none;border-radius: 0;z-index: 2;cursor: pointer;}
.center-sticky-label__close:after {display: block;width: 100%;height: 100%;font-family: 'jt-font';content: '\e921';font-size: 26rem;line-height: 32rem;font-weight: normal;font-style: normal;text-align: center;color: #fff;}

.center-sticky-label__typo {display: none;height: 207rem;cursor: pointer;}
.center-sticky-label__typo > span {display: block;padding-left: 21rem;padding-bottom: 1rem;position: relative;font-size: 13rem;font-weight: 600;line-height: 1.1;white-space: nowrap;color: #fff;-webkit-transform: rotate(90deg) translateX(100%);-ms-transform: rotate(90deg) translateX(100%);transform: rotate(90deg) translateX(100%);}
.center-sticky-label__typo > span:before {display: block;width: 22rem;height: 22rem;position: absolute;top: 50%;margin-top: -11rem;left: -13rem;font-family: 'jt-font';content: '\e922';font-size: 22rem;line-height: 1;font-weight: normal;font-style: normal;text-align: center;color: #fff;-webkit-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);}

.center-sticky-label.center-sticky-label--fold {width: 52rem;-webkit-transition: right .3s;transition: right .3s;}
.center-sticky-label.center-sticky-label--fold:before {width:10rem; height:100%; background: #2D2A29; position:absolute; right:-9rem; top:0; content:''; display:block;}
.center-sticky-label.center-sticky-label--fold .center-sticky-label__typo {display: block;}
.center-sticky-label.center-sticky-label--fold .center-sticky-label__inner {display: none;}
html.desktop .center-sticky-label.center-sticky-label--fold:hover {right:9rem;}

/* PAGE SETTING */
body.page-template-center-introduce .main-container,
body.page-template-center-beginning .main-container,
body.page-template-center-testing .main-container {overflow-x:hidden;}
body.page-template-center-introduce .center-sticky-label__img {width: 200rem;}

body.page-template-center-greeting .center-sticky-label__typo {height: 180rem;}
body.page-template-center-testing .center-sticky-label__typo {height: 171rem;}
body.page-template-center-beginning .center-sticky-label__typo {height: 192rem;}
body.page-template-center-fermenting .center-sticky-label__typo {height: 210rem;}



/* **************************************** *
 * TOUR
 * **************************************** */
.center-tour__content {position: relative;}
.center-tour .swiper-control-fraction {display:none;}

/* SLIDER */
.center-tour__slider-bg {width: 100%;position: relative;padding-top: 40.5%;}
.center-tour__slider-bg > span {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: no-repeat center center;background-size: cover;}
.center-tour__slider-bg > span.center-tour__slider-bg--small {display: none;}

.center-tour__title {padding-right: 160rem;}
.center-tour__title > span {display: block;font-size: 20rem;font-weight: 500;line-height: 82rem;color: #000;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

/* PREVIEW */
.center-tour__preview {width: 185rem;height: 110rem;position: absolute;top: 56rem;right: 59rem;z-index: 2;opacity: 0;}
.center-tour__preview-typo {position: absolute;top: 4rem;left: 0;font-size: 12rem;line-height: 1.33;font-weight: 600;color: #fff;}
.center-tour__preview-illust {display: block;width: 100%;height: auto;}
.center-tour__preview-illust > g:not(:first-child) {opacity: 0;}

/* PAGE SETTING */
body.page-template-center-greeting .center-tour__preview-illust > g.center-tour__preview-greeting {opacity: 1;}
body.page-template-center-testing .center-tour__preview-illust > g.center-tour__preview-testing {opacity: 1;}
body.page-template-center-beginning .center-tour__preview-illust > g.center-tour__preview-beginning {opacity: 1;}
body.page-template-center-fermenting .center-tour__preview-illust > g.center-tour__preview-fermenting {opacity: 1;}



/* **************************************** *
 * PLOT
 * **************************************** */
.center-plot.center-section {padding: 138rem 0 100rem;}

/* plan */
.center-plot__plan {max-width: 840rem;margin: 0 auto;position: relative;}
.center-plot__plan .jt-lazyload {padding-top: 63.45%;}

.center-plot__plan-area {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
.center-plot__plan-area svg {display: block;width: 100%;height: auto;}
.center-plot__plan-area svg g {opacity: 0;}

.center-plot__plan-step {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 2;pointer-events: none;}
.center-plot__plan-step svg {display: block;width: 100%;height: auto;}

.center-plot__plan-data {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 3;pointer-events: none;}
.center-plot__plan-data li {display: block;position: absolute;}
.center-plot__plan-data li:nth-child(1) {bottom: 80rem;right: 42rem;}
.center-plot__plan-data li:nth-child(2) {top: 72rem;right: 76rem;}
.center-plot__plan-data li:nth-child(3) {top: 72rem;left: 422rem;}
.center-plot__plan-data li:nth-child(4) {top: 72rem;left: 113rem;}
.center-plot__plan-data b {display: block;padding: 11rem 22rem;font-size: 20rem;font-weight: 500;line-height: 1.1;color: #000;cursor: pointer;}
.center-plot__plan-data span {width: 220rem;padding: 20rem 20rem;position: absolute;top: 0;left: 50%;margin-left: -110rem;font-size: 14rem;letter-spacing: -0.025em;line-height: 1.57;font-weight: 400;word-break: break-all;color: #fff;background: #2D2A29;border-radius: 4rem;-webkit-transform: translateY(-113%);-ms-transform: translateY(-113%);transform: translateY(-113%);opacity: 0;}
.center-plot__plan-data span:before {display: block;width: 24rem;height: 24rem;position: absolute;bottom: -17rem;left: 50%;margin-left: -12rem;font-family: 'jt-font';content: '\e920';font-size: 24rem;font-weight: normal;line-height: 1;font-style: normal;color: #2D2A29;}

.center-plot__plan-info {position:absolute; left:16rem; bottom:84rem;}
.center-plot__plan-info b { font-size:16rem; font-weight:700; color:#000; margin-bottom:21rem; display:block;}
.center-plot__plan-info p {font-size:16rem; line-height:1.63; color:#666;}

.center-plot__plan-desc { display:none;}

/* around */
.center-plot__around {width: 1136rem;margin: 0 auto; position:relative;}
.center-plot__around--small, .center-plot__around-txt {display:none;}
.center-plot__around .jt-lazyload {padding-top: 55.11%;}

.center-plot__dot {position:absolute;width: 100%;height: 100%;top: 0;left: 0;}
.center-plot__dot > span {width:24rem; height:24rem; border:2rem solid transparent; border-radius:50%;  display: block;position: absolute; -webkit-transition: border .3s, background .3s; transition:border .3s, background .3s; }
.center-plot__dot > span:before {width:12rem;height:12rem;background:#000;border-radius: 50%; content:''; display:block; position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%)}
.center-plot__dot > span.center-plot__dot--active {-webkit-animation-duration: 3s;animation-duration: 3s; -webkit-animation-name: border; animation-name: border; }
@-webkit-keyframes border { 0% { border-color:#ddd; background:#fff; }  30% { border-color:#000; background:#fff; } 90% { border-color:#000; background:#fff; } }
@keyframes border { 0% { border-color:#ddd; background:#fff; }  30% { border-color:#000; background:#fff; } 90% { border-color:#000; background:#fff; } }

.article-greeting-room .center-plot__dot--01 {left: 12.4%;top: 56%;}
.article-greeting-room .center-plot__dot--02 {left: 44.3%;top: 9.7%;}
.article-greeting-room .center-plot__dot--03 {left: 49.8%;top: 26%;}
.article-greeting-room .center-plot__dot--04 {left: 56.5%;top: 64.9%;}
.article-greeting-room .center-plot__dot--05 {right: 19.1%;top: 51.6%;}

.article-center-testing .center-plot__dot--01 {left: 15.4%;top: 26.8%;}
.article-center-testing .center-plot__dot--02 {left: 15.4%;top: 54.6%;}
.article-center-testing .center-plot__dot--03 {left: 49.2%;top: 34.7%;}
.article-center-testing .center-plot__dot--04 {left: 59.7%;top: 64.3%;}
.article-center-testing .center-plot__dot--05 {left: 42%;top: 68%;}

.article-center-beginning .center-plot__dot--01 {left: 36%;top: 44.8%;}
.article-center-beginning .center-plot__dot--02 {left: 47.5%;top: 17.9%;}
.article-center-beginning .center-plot__dot--03 {right: 23.8%;top: 35.7%;}

.article-center-fermenting .center-plot__dot--01 {right: 22%;top: 44.5%;}
.article-center-fermenting .center-plot__dot--02 {left: 53.4%;top: 12.6%;}
.article-center-fermenting .center-plot__dot--03 {left: 29.9%;top: 22%;}
.article-center-fermenting .center-plot__dot--04 {left: 18.7%;top: 38%;}
.article-center-fermenting .center-plot__dot--05 {left: 49.3%;top: 60.9%;}
.article-center-fermenting .center-plot__dot--06 {left: 48.4%;top: 78.1%;}


/* PAGE SETTING */
body.page-template-center-greeting .center-plot .center-section__head,
body.page-template-center-testing .center-plot .center-section__head,
body.page-template-center-beginning .center-plot .center-section__head,
body.page-template-center-fermenting .center-plot .center-section__head {margin-bottom: 38rem;}



/* **************************************** *
 * PURPOSE
 * **************************************** */
.center-purpose {height: 954rem;}
.center-purpose__item {overflow:hidden;}

.center-purpose__slider {width: 100%;height: 100%;}

.center-purpose__bg {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: no-repeat center center;background-size: cover;z-index: 1;-webkit-transform: scale(1.05) rotate(0.01deg);-ms-transform: scale(1.05) rotate(0.01deg);transform: scale(1.05) rotate(0.01deg);-webkit-transition: -webkit-transform 3.8s linear;transition: -webkit-transform 3.8s linear;transition: transform 3.8s linear;transition: transform 3.8s linear, -webkit-transform 3.8s linear;}
.swiper-slide-active .center-purpose__bg {-webkit-transform: scale(1) rotate(0deg);-ms-transform: scale(1) rotate(0deg);transform: scale(1) rotate(0deg);}

.center-purpose__typo {display: block;width: 100%;padding: 0 87rem;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);font-size: 30rem;font-weight: 500;line-height: 1.4;text-align: center;color: #fff;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;z-index: 2;}



/* **************************************** *
 * BANNER
 * **************************************** */
.center-banner  {min-height: 954rem;}

.center-banner__bg {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: no-repeat center center;background-size: cover;background-attachment: fixed;z-index: 1;}
html.mobile .center-banner__bg, html.mac .center-banner__bg {background-attachment:inherit;}

.center-banner__content {width: 100%;padding: 0 120rem;position: absolute;top: 50%;text-align: center;-webkit-transform: translateY(-50%);-ms-transform:  translateY(-50%);transform:  translateY(-50%);z-index: 2;}
.center-banner__content .center-banner__content-inner > span {display: block;margin-bottom: 6rem;font-size: 16rem;font-weight: 400;line-height: 1.63;color: #fff;}
.center-banner__content b {display: block;font-size: 30rem;font-weight: 600;line-height: 1.4;color: #fff;}
.center-banner__content p {margin-top: 17rem;font-size: 16rem;font-weight: 400;line-height: 1.87;color: #ddd;}



/* **************************************** *
 * RESEARCH
 * **************************************** */
.center-research {height: 954rem;}

/* SLIDER */
.center-research-slider-wrap {width: 100%;height: 100%;}
.center-research-slider__item > div {float: left;height: 100%;position: relative;overflow: hidden;}
.center-research-slider__first {width: 50%;}
.center-research-slider__last {width: 50%;background: #f8f8f8;}
.center-research-slider__bg {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;background-size: cover;z-index: 1;-webkit-transform: scale(1.03) rotate(0.01deg);-ms-transform: scale(1.03) rotate(0.01deg);transform: scale(1.03) rotate(0.01deg);-webkit-transition: -webkit-transform 2s linear;transition: -webkit-transform 2s linear;transition: transform 2s linear;transition: transform 2s linear, -webkit-transform 2s linear;}
.swiper-slide-active .center-research-slider__bg {-webkit-transform: scale(1) rotate(0deg);-ms-transform: scale(1) rotate(0deg);transform: scale(1) rotate(0deg);}

.center-research-slider__content {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;width: 100%;height: 100%;position: relative;z-index: 2;}

/* INDEX */
.center-research-slider__index {display: table;width: 260rem;height: 100%;position: absolute;top: 0;left: 236rem;z-index: 10;}
.center-research-slider__index-inner {display: table-cell;vertical-align: middle;}

.center-research-slider__title {display: block;margin-bottom: 40rem;font-size: 36rem;font-weight: 600;line-height: 1.25;color: #fff;}

.center-research-slider__pagination .swiper-pagination {display: block;position: relative;text-align: left;}
.center-research-slider__pagination .swiper-pagination-bullet {display: block;width: 100%;height: auto;padding: 20rem 0 19rem;font-size: 18rem;font-weight: 500;line-height: 1.4;color: #fff;background: none;border-bottom: 1rem solid rgba(255, 255, 255, .3);border-radius: 0;opacity: 1;-webkit-transition: border .3s;transition: border .3s;}
.center-research-slider__pagination .swiper-pagination-bullet:after {display: none;}
.center-research-slider__pagination .swiper-pagination-bullet > span {display: inline-block;position: relative;-webkit-transition: padding .3s;transition: padding .3s;}
.center-research-slider__pagination .swiper-pagination-bullet > span:after {display: block;width: 22rem;height: 22rem;margin-top: -13rem;position: absolute;top: 50%;left: -5rem;font-family: 'jt-font';content: '\e91b';font-size: 22rem;line-height: 1;font-weight: normal;text-align: center;color: #fff;opacity: 0;-webkit-transition: opacity .3s, left .2s;transition: opacity .3s, left .2s;}
.center-research-slider__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background: none;}
.center-research-slider__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active > span {padding-left: 32rem;}
.center-research-slider__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active > span:after {opacity: 1;left: 0;}
html.desktop .center-research-slider__pagination .swiper-pagination-bullet:hover {border-bottom-color: #fff;}
html.mac .center-research-slider__pagination .swiper-pagination-bullet:focus, html.mobile .center-research-slider__pagination .swiper-pagination-bullet:focus {outline:none;}
html.ie11 .center-research-slider__pagination .swiper-pagination-bullet > span:after { margin-top:-11rem;}
html.ipad .center-research-slider__pagination .swiper-pagination-bullet > span:after {margin-top:-11rem;}

/* SCHEME */
.center-research__scheme {width: 100%;padding: 0 172rem;font-size: 0;}
.center-research__scheme li {display: inline-block;vertical-align: top;width: 248rem;margin-right: 48rem;}
.center-research__scheme li:last-child {margin-right: 0;}

.center-research__scheme-pic .jt-lazyload {padding-top: 56.45%;}
.center-research__scheme-txt {margin-top: 32rem;text-align: center;}
.center-research__scheme-txt b {display: block;font-size: 20rem;font-weight: 600;line-height: 1.4;color: #000;}
.center-research__scheme-txt p {margin-top: 17rem;font-size: 14rem;font-weight: 400;line-height: 1.71;color: #666;}



/* **************************************** *
 * HISTORY
 * **************************************** */
.center-history.center-section {padding: 250rem 0;}

.center-history__bg {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;background-size: cover;background-attachment: fixed;}
.center-history__bg:after {content: '';position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: #000000;background: rgba(0, 0, 0, .4);}
html.mobile .center-history__bg, html.mac .center-history__bg {background-attachment:inherit;}

.center-history__content {position: relative;}
.center-history__content:after {content: '';display: table;clear: both;}

.center-history__title {float: left;width: 60%;padding: 0 148rem;}
.center-history__title > span {display: block;margin-bottom: 35rem;font-size: 18rem;line-height: 1.44;font-weight: 400;color: #fff;}
.center-history__title > b {display: block;font-size: 36rem;font-weight: 600;line-height: 1.25;color: #fff;}

.center-history__list {float: left;width: 40%;}
.center-history__list li {padding-left: 23rem;position: relative;}
.center-history__list li:before {content: '';display: block;width: 2rem;height: 100%;position: absolute;left: 0;top: 0;background: #ddd;}
.center-history__list li + li {margin-top: 58rem;}
.center-history__list b {display: block;font-size: 20rem;line-height: 1.1;font-weight: 600;color: #fff;}
.center-history__list p {margin-top: 17rem;font-size: 18rem;line-height: 1.44;font-weight: 400;color: #fff;}



/* **************************************** *
 * WATCH
 * **************************************** */
.center-watch {background: #f8f8f8;}
.center-watch.center-section {padding-top: 124rem; padding-bottom:180rem;}

.center-watch .wrap {z-index: 2;}
.center-watch .center-section__head {margin-bottom: 0;}
.center-watch .center-section__head h2 {font-weight: 700;}

.center-watch__illust {margin-top: -128rem;padding-top: 29.5%;position: relative;z-index: 1;}
.center-watch__illust-pic {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;background-size: cover;}
.center-watch__illust-pic svg {width: 100%; height: 100%;}
.center-watch .center-watch__illust-pic #arrow {opacity:0; -webkit-transition: opacity .3s;transition: opacity .3s;}
html.desktop .center-watch .center-watch__illust-pic.showroom-hover #arrow {opacity:1;-webkit-transition-delay: .1s;transition-delay: .1s;}
html.desktop .center-watch .center-watch__illust-pic.showroom-hover #showroom-win-light > path { fill: #FFE55C !important; opacity: .5; -webkit-transition: .8s; transition: .8s;}



/* **************************************** *
 * LOCATION
 * **************************************** */
.center-location {overflow: hidden; height: 640rem;}

.center-location__info {display: table;table-layout: fixed;width: 50%;height: 100%;padding: 0 87rem 0 322rem;position: absolute;right: 0;top: 0; bottom:0; background: #ffffff;background: rgba(255, 255, 255, .8);z-index: 2;}
.center-location__info-inner {display: table-cell;vertical-align: middle;}
.center-location__info b {display: block;margin-bottom: 19rem;font-size: 36rem;line-height: 1.33;letter-spacing: -0.025em;font-weight: 700;color: #000;}
.center-location__info p {font-size: 16rem;line-height: 1.63;font-weight: 400;color: #666;}
.center-location__info p > span {display: block;font-size: 14rem;line-height: 1.57;font-weight: 500;}
.center-location__info p > span.jt-smallscreen-bold {display:inline-block; font-size: 16rem;line-height: 1.63;font-weight: 400;color: #666;}
.center-location__info p + p {margin-top: 16rem;}
.center-location__info .jt-btn__basic {margin-top: 37rem;}

/* MAPBOX */
.location-mapbox__outer {height: 640rem;position: relative;z-index: 1;}
.location-mapbox__inner {width: 150%;height: 100%;position: absolute;left: -50%;top: 0;}
.location-mapbox {width: 100%;height: 100%;outline: none;}
html.ie11 .location-mapbox  {}



/* **************************************** *
 * MATERIAL
 * **************************************** */
.center-material {background: #f8f8f8;overflow: hidden;}
.center-material .center-section__head {margin-bottom: 38rem;text-align: left;}

/* slider */
.center-material__slider {overflow: visible;}
.center-material__slider .swiper-navigation {top:32.5%;}
.center-material__gallery .center-material__slider .swiper-navigation {top:32%;}

.center-material__item {display: inline-block;vertical-align: top;width: auto;margin-right: 48rem;}
.center-material__item:last-child {margin-right: 0;}

.center-material__item--primary {width: 246rem;}
.center-material__item--secondary {width: 396rem;}
.center-material__item--third {width: 396rem;}

.center-material__link {display: block;}

.center-material__img {position: relative;}
.center-material__img img {display: block;width: 100%;height: auto;}

.center-material__txt {padding-top: 15rem;text-align: right;}
.center-material__txt span {display: block;margin-bottom: 5rem;font-size: 16rem;font-weight: 500;line-height: 1.63;color: #000;}
.center-material__txt b {display: block;font-size: 24rem;line-height: 1.33;font-weight: 700;color: #000;}
.center-material__txt p {font-size: 16rem;line-height: 1.63;font-weight: 600;color: #666;}
.center-material__txt p > span {display:inline-block;font-size: 16rem;line-height: 1.63;font-weight: 600;color: #666;}
.center-material__txt b + p {margin-top: 30rem;}

/* type simple */
.center-material__basic .center-material__item {width: 692rem;}
.center-material__basic .center-material__img .jt-lazyload {padding-top: 65.89%;}
.center-material__basic .center-material__txt {padding-top: 40rem;text-align: left;}
.center-material__basic .center-material__txt p {font-weight: 400;}



/* **************************************** *
 * MOVIE
 * **************************************** */
.center-movie__player {position: relative;}
.center-movie__player-inner {position: relative;width: 100%;padding-top: 56.25%;}
.center-movie__player-inner iframe {width: 100%;height: 100%;position: absolute;top: 0;left: 0;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;background: #000;}
.center-movie__player-inner #center-movie__video {width: 100%;height: 100%;position: absolute;top: 0;left: 0;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;background: #000;}
.center-movie__poster {width: 100%;height: 100%;position: absolute;top: 0;left: 0;cursor: pointer;z-index: 100;}
.center-movie__poster-image {position: absolute;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;background-size: cover;}
.center-movie__poster-overlay {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: rgba(0, 0, 0, .5);}
.center-movie__poster-overlay-btn {display: block;width: 100rem;height: 100rem;margin-top: -50rem;margin-left: -50rem;position: absolute;top: 50%;left: 50%;background: rgba(255,255,255,0.1);border: 2rem solid #fff;border-radius: 50%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transform: scale(1) translateZ(0);transform: scale(1) translateZ(0);-webkit-transition: background .3s;transition: background .3s;}
.center-movie__poster-overlay-btn:after {content: '';width: auto;height: auto;display: block;position: absolute;top: 50%;left: 50%;margin-top: -8rem;margin-left: -4rem;font-style: normal;border-top: 8rem solid transparent;border-bottom: 8rem solid transparent;border-left: 12rem solid #fff;-webkit-transition: border .3s;transition: border .3s;}
html.desktop .center-movie__poster:hover .center-movie__poster-overlay-btn {background: #fff;}
html.desktop .center-movie__poster:hover .center-movie__poster-overlay-btn:after {border-left-color: #2D2A29;}

.center-movie__list {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-align: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;border-bottom: 1rem solid rgba(0,0,0,0.6);}
.center-movie__list > li {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;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;position: relative;cursor: pointer;}
.center-movie__list > li:after {content: '';width: 100%;height: 3rem;position: absolute;left: 0;bottom: -2rem;background: #000;opacity: 0;-webkit-transform-origin: center center;-ms-transform-origin: center center;transform-origin: center center;-webkit-transition: 1s cubic-bezier(.23, 1, .32, 1);transition: 1s cubic-bezier(.23, 1, .32, 1);}
.center-movie__list > li > span {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;display: block;padding: 33rem 20rem 32rem;font-size: 20rem;font-weight: 500;line-height: 1.5;text-align: center;color: rgba(0,0,0,0.6);-webkit-transition: color .4s;transition: color .4s;}
html.desktop .center-movie__list > li:hover > span, .center-movie__list > li.current > span {color: #000;}
.center-movie__list > li.current:after {opacity: 1;}



/* **************************************** *
 * PAGING
 * **************************************** */
.center-paging {overflow: hidden;}

.center-paging__scene {position: relative;overflow: hidden;z-index: 1;}
.center-paging__room {width: 620rem;position: absolute;bottom: 0;left: 50%;margin-left: -310rem;}
.center-paging__room .jt-lazyload {padding-top: 130.91%;-webkit-transition: -webkit-transform 2.5s cubic-bezier(0.19,1,0.22,1);transition: -webkit-transform 2.5s cubic-bezier(0.19,1,0.22,1);transition: transform 2.5s cubic-bezier(0.19,1,0.22,1);transition: transform 2.5s cubic-bezier(0.19,1,0.22,1), -webkit-transform 2.5s cubic-bezier(0.19,1,0.22,1);}
.center-paging__door .jt-lazyload {padding-top: 50.13%;}

.center-paging__link {display:block;width: 620rem;position: absolute;bottom: 0;left: 50%;margin-left: -310rem;padding-top: 42.51%;z-index: 10;}

.center-paging__sign {display: inline-block;padding: 30rem;position: absolute;top: 27%;left: 50%;margin-left: 377rem;font-size: 24rem;font-weight: 500;line-height: 1.3;letter-spacing: -0.025em;color: #fff;z-index: 2;}
.center-paging__sign > span {padding-right: 40rem;position: relative;}
.center-paging__sign > span:after {display: block;width: 21rem;height: 21rem;position: absolute;top: 50%;margin-top: -10rem;right: 0;font-family: 'jt-font';content: '\e903';font-size: 21rem;line-height: 1;font-weight: normal;font-style: normal;text-align: center;color: #fff;}
.center-paging__sign > b {display: block;margin-top: 21rem;font-size: 18rem;font-weight: 400;line-height: 1;color: #fff;}

.center-paging--hover .center-paging__room .jt-lazyload {-webkit-transform: scale(1.03) rotate(0.01deg);-ms-transform: scale(1.03) rotate(0.01deg);transform: scale(1.03) rotate(0.01deg);}

.article-center-fermenting .center-paging__bg {height:954rem;}
.article-center-fermenting .center-paging__bg > div { background-image:url(../images/sub/center/center-paging-natural.jpg);}
.article-center-fermenting .center-paging__bg--01 { height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center;}
.article-center-fermenting .center-paging__bg--01:before { display:block; content:''; width:100%; height:100%; position:absolute; left:0; right:0; top:0; bottom:0; background: #000000; background:rgba(0, 0, 0, .5);}
.article-center-fermenting .center-paging__bg--02 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; -webkit-clip-path:circle(380rem at center); clip-path:circle(380rem at center); background-size:cover; background-repeat:no-repeat; background-position:center;}
.article-center-fermenting .center-paging__txt { margin-top:26rem; position: absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); text-align:center; color:#fff; }
.article-center-fermenting .center-paging__txt b { font-size:40rem; line-height:1.3; font-weight:600;}
.article-center-fermenting .center-paging__txt p { margin-top:20rem; margin-bottom:55rem; font-size:18rem; line-height:1.75; font-weight:400;}
html.ie11 .article-center-fermenting .center-paging__bg--02 {width:760rem; height:760rem; border-radius:50%; left:50%; top:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); background-size:auto 100vh; overflow:hidden;}



/* **************************************** *
 * PROCESS
 * **************************************** */
.center-process {background: #f8f8f8;overflow: hidden;}

.center-process__illust {position: absolute;}
.center-process__illust > span {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;background-size: cover;}
.center-process__illust--flower {width: 367rem;height: 317rem;right: -15rem;top: 264rem;}
.center-process__illust--leaf {width: 122rem;height: 127rem;right: -30rem;bottom: -75rem;}
.center-process__illust--circle {width: 100%;padding-top: 100%;top: -30rem;left: 0;}
.center-process__illust--circle > span {border: 1rem solid #707070;border-radius: 50%;}

.center-process__step {margin: 121rem 0 80rem;position: relative;font-size: 0;}
.center-process__step-item {/*width: 396rem;*/width: 22.904%;display: inline-block;vertical-align: top;position: relative;}
.center-process__step-item:after {display: block;width: 63rem;height: 63rem;position: absolute;/*right: -167rem;*/right: -42.2%;bottom: 208rem;font-family: 'jt-font';content: '\e91f';font-size: 63rem;font-weight: normal;font-style: normal;line-height: 1;color: #000;}
.center-process__step-item+.center-process__step-item {/*margin-left: 270rem;*/margin-left: 15.61%;}
.center-process__step-item:nth-child(2) {margin-top: 134rem;}
.center-process__step-item:nth-child(3) {margin-top: 254rem;}
.center-process__step-item:nth-child(3):after {display: none;}
.center-process__step b {display: block;margin-bottom: 17rem;font-size: 16rem;font-weight: 500;line-height: 1.62;color: #000;}
.center-process__step .jt-lazyload {padding-top: 121.21%;}

.center-process__note {text-align: center;}
.center-process__note-illust {width: 42rem;margin: 0 auto;}
.center-process__note-illust .jt-lazyload {padding-top: 211.9%;}
.center-process__note b {display: block;margin-top: 63rem;font-size: 24rem;line-height: 1.45;font-weight: 700;color: #000;}
.center-process__note p {margin-top: 27rem;font-size: 16rem;line-height: 1.625;font-weight: 400;color: #666;}



/* **************************************** *
 * PRODUCT
 * **************************************** */
.center-product {overflow: hidden;}

.center-product .center-section__head {text-align: left;}
.center-product .center-section__head p {margin-top: 39rem;}

/* slider */
.center-product__slider {overflow: visible;}
.center-product__slider .swiper-navigation { top:30%;}

.center-product__item {display: inline-block;vertical-align: top;width: auto;margin-right: 48rem;}
.center-product__item:last-child {margin-right: 0;}
.center-product__item--primary {width: 544rem;}
.center-product__item--secondary {width: 396rem;}

.center-product__img {position: relative;}
.center-product__img > img {display: block;width: 100%;height: auto;}

.center-product__txt {padding-top: 44rem;}
.center-product__txt b {display: block;font-size: 20rem;line-height: 1.33;font-weight: 600;color: #000;}
.center-product__txt p {margin-top: 14rem;font-size: 16rem;line-height: 2;font-weight: 400;color: #666;}



/* **************************************** *
 * ANTIAGING
 * **************************************** */
.center-antiaging {background: #faf9f7; }

.center-antiaging .center-section__head {margin-bottom: 125rem;}

.center-antiaging__slider {overflow:visible;}
.center-antiaging__list {margin: 80rem -61rem 0;font-size: 0; width: auto; display: block;}
.center-antiaging__item {display: inline-block;vertical-align: top;width: 33.33%;padding: 0 61rem;}
.center-antiaging__img figure {padding-top: 141.5%;}
.center-antiaging__txt {margin-top: 42rem;}
.center-antiaging__txt b {font-size: 24rem;line-height: 1.45;font-weight: 500;color: #000;}
.center-antiaging__txt p {margin-top: 19rem;font-size: 16rem;line-height: 1.65;font-weight: 400;color: #666;}



/* **************************************** *
 * ENZYME
 * **************************************** */
/*.center-enzyme {background: #151515;}

.center-enzyme .center-section__subtypo {position: absolute;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}
.center-enzyme .center-section__subtypo h3 {color: #fff;}

.center-enzyme__content {padding: 127rem 0;position: relative;}

.center-enzyme__img {max-width: 1093rem;margin: 0 auto;}
.center-enzyme__img img {display: block;width: 100%;height: auto;}

.center-enzyme__button {display: block;margin: 0;padding: 20rem 20rem;position: absolute;right: -20rem;top: 50%;font-size: 20rem;font-weight: 500;line-height: 1;color: #fff;background: none;border: none;cursor: pointer;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}
.center-enzyme__button span {position: relative;padding-right: 73rem;}
.center-enzyme__button span:before {width: 63rem;height: 63rem;position: absolute;right: 0;top: 50%;margin-top: -32rem;font-family: 'jt-font';content: '\e91f';font-size: 63rem;line-height: 1;font-weight: normal;font-style: normal;color: #fff;}
*/

.center-enzyme {background: #000;}

.center-enzyme .center-section__subtypo {position: absolute;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%); z-index:10;}
.center-enzyme .center-section__subtypo h3 {color: #fff;}

.center-enzyme__content {position: relative;overflow: hidden;}
.center-enzyme__img {max-width: 960rem;margin: 0 auto;}
.center-enzyme__video {padding-top: 99.17%;position: relative;overflow: hidden;}

.jt-bgvid__video {width: 100%;height: 100%;position: absolute;top: 0;left: 0;overflow: hidden;}
.jt-bgvid__video:after {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
.jt-bgvid__video video {display: block;width: auto;height: auto;min-width: 100%;min-height: 100%;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.jt-bgvid__poster {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.jt-bgvid__poster-bg {display: block;position: relative;width: 100%;height: 100%;background: no-repeat center center;background-size: cover;}



/* **************************************** *
 * INGREDIENT
 * **************************************** */
.center-ingredient {background: #faf9f7;}
.center-ingredient.center-section {padding: 378rem 0;}

.center-ingredient__content {position: relative;}
.center-ingredient__content:after {content: '';display: table;clear: both;}

.center-ingredient .center-section__subtypo {position: absolute;top: 29rem;}

.center-ingredient__list {float: right;width: 887rem;margin: 0 -24rem;position: relative;font-size: 0;}
.center-ingredient__slider {overflow:visible;}
.center-ingredient__item {display: inline-block;vertical-align: top;width: 33.33%;padding: 0 24rem;text-align: center;}
.center-ingredient__img {max-width: 248rem;margin: 0 auto;}
.center-ingredient__img .jt-lazyload {padding-top: 57.145%;}
.center-ingredient__item b {display: block;margin-top: 26rem;font-size: 20rem;line-height: 1.4;font-weight: 500;color: #000;}



/* **************************************** *
 * FIELD
 * **************************************** */
.center-field__content {position: relative;}
.center-field__content:after {content: '';display: table;clear: both;}

.center-field .center-section__head {margin-bottom: 0;position: absolute;right: 0;top: 4rem;text-align: right;}

.center-field__head-arrow {display: inline-block;width: 37rem;height: 37rem;position: relative;margin-top: 22rem;margin-right: -5rem;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.center-field__head-arrow:after {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'jt-font';content: '\e901';font-size: 37rem;font-weight: normal;line-height: 1;text-align: center;color: #000;}

.center-field__item {width: 100%;}
.center-field__item:nth-child(odd) {float: left;}
.center-field__item:nth-child(even) {float: right;}
.center-field__item:nth-child(1) {/*max-width: 692rem;*/max-width: 40.024%;}
.center-field__item:nth-child(2) {/*max-width: 544rem;*/max-width: 31.464%;margin-top: 415rem;}
.center-field__item:nth-child(3) {/*max-width: 840rem;*/max-width: 48.583%;margin-top: 369rem;}
.center-field__item:nth-child(1) .center-field__img .jt-lazyload {padding-top: 109.9%;}
.center-field__item:nth-child(2) .center-field__img .jt-lazyload {padding-top: 130.5%;}
.center-field__item:nth-child(3) .center-field__img .jt-lazyload {padding-top: 66.7%;}
.center-field__txt {margin-top: 43rem;}
.center-field__txt b {display: block;font-size: 24rem;line-height: 1.45;font-weight: 500;color: #000;}
.center-field__txt p {margin-top: 10rem;font-size: 16rem;line-height: 1.65;font-weight: 400;color: #666;}



/* **************************************** *
 * PROMISE
 * **************************************** */
.center-promise__img {display: block; width: 100%; height: 840rem; background: no-repeat center center; background-size:cover; background-attachment: fixed;}
.center-promise__img .jt-lazyload {padding-top: 44.14%;}
.center-promise__txt {padding: 156rem 0;text-align: center;}
.center-promise__txt p {font-size: 24rem;line-height: 2;font-weight: 500;color: #000;}
html.mobile .center-promise__img, html.mac .center-promise__img {background-attachment:inherit;}



/* **************************************** *
 * FORWARD
 * **************************************** */
.center-forward__sldie {width: 100%;}
.center-forward__item {padding: 117rem 0;}
.center-forward__img {width: 544rem;margin: 0 auto;overflow: hidden;}
.center-forward__bg {width: 100%;padding-top: 132.35%;position: relative;background: no-repeat center center;background-size: cover;-webkit-transform: scale(1.03) rotate(0.01deg);-ms-transform: scale(1.03) rotate(0.01deg);transform: scale(1.03) rotate(0.01deg);-webkit-transition: -webkit-transform 2s linear;transition: -webkit-transform 2s linear;transition: transform 2s linear;transition: transform 2s linear, -webkit-transform 2s linear;}
.swiper-slide-active .center-forward__bg {-webkit-transform: scale(1) rotate(0deg);-ms-transform: scale(1) rotate(0deg);transform: scale(1) rotate(0deg);}
.center-forward__txt {width: 310rem;height: 100%;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;position: absolute;right: 96rem;top: 0;}
.center-forward__txt-inner {width: 100%;}
.center-forward__txt b {display: block;font-size: 24rem;line-height: 1.3;font-weight: 600;color: #000;}
.center-forward__txt p {margin-top: 16rem;font-size: 16rem;line-height: 1.62;font-weight: 400;color: #666;}

.center-forward__typo {position: absolute;left: 236rem;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);z-index: 2;}
.center-forward__typo h2 {font-size: 36rem;font-weight: 600;line-height: 1.45;color: #000;}

.scenter-forward__control {width: 544rem;position: absolute;bottom: 71rem;left: 50%;margin-left: -272rem; z-index:10;}
.scenter-forward__control .swiper-pagination {position: relative;bottom: auto;font-size: 14rem;font-weight: 500;line-height: 1;text-align: left;color: #666;}
.scenter-forward__control .swiper-play-state {height: 32rem;position: absolute;right: -12rem;top: -10rem;z-index: 11;}
.scenter-forward__control .swiper-play-state__btn:after {font-size: 26rem;line-height: 32rem;color: #000;}