@charset "utf-8";

/*
 * File       : sub-story.css
 * Author     : STUDIO-JT (Sumi)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 01) LAYOUT + COMPONENT
 * 02) CENTER STORY
 */



/* **************************************** *
 * LAYOUT + COMPONENT
 * **************************************** */
.page-template-story-center .main-container,
.page-template-story-fermentation .main-container,
.page-template-story-research .main-container {overflow-x:hidden;}{overflow-x:hidden;}

.story-section {padding: 200rem 0;position: relative;}
.story-section.story-section--full {padding-top: 0;padding-bottom: 0;}

.story-object > div {background-repeat:no-repeat;background-size: cover;}

/* HEAD */
.story-section__head {margin-bottom: 77rem;text-align: center;}
.article-story-center .story-section__head {margin-bottom: 100rem;}
.story-section__head h2 { font-size: 36rem;font-weight: 600;line-height: 1.3;color: #000;}
.story-section__head h2 + p {margin-top: 15rem;}
.story-section__head p {font-size: 16rem;font-weight: 400;line-height: 1.63;color: #666;}
.story-section__head p + p {margin-top:18rem;}
.story-section__head .jt-btn__basic {margin-top: 27rem; }

.story-section__deco-title {font-size:200rem; font-weight:600;line-height: 1.4;color: #f5f5f5; letter-spacing:-0.025em; position:absolute; white-space: nowrap;}

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

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

.story-grid__typo {width: 42.857%;}
.story-grid__item--type-01 .story-grid__typo {padding-left: 196rem;padding-right: 87rem;}
.story-grid__item--type-02 .story-grid__typo {padding-left: 148rem;padding-right: 87rem;}
.story-grid__typo b {display: block;font-size: 40rem;font-weight: 600;line-height: 1.4;color: #000;}
.story-grid__typo p {font-size: 20rem;font-weight: 400;line-height: 1.8;color: #000;}
.story-grid__typo b + p {margin-top: 31rem;}
.story-grid__typo p + p {margin-top: 13rem;}

/* PAGING */
.page-template-story-center .story-paging { background-image:url(../images/sub/story/story-paging-fermentation.jpg);}
.page-template-story-fermentation .story-paging { background-image: url(../images/sub/story/story-paging-research.jpg);}
.story-paging {background-repeat:no-repeat; max-height:493rem; background-size:cover;}
.story-paging__title {display:block;padding: 156rem 0 100rem;color:#fff;text-align:center;}
.story-paging__title b {font-size:60rem;line-height: 1.34;display:block;}
.story-paging__title span {font-size:18rem;line-height: 1.45;margin-top: 3rem;display:block;}
.story-paging__arrow {width:79rem;height:79rem;border:1rem solid #fff;border-radius:50%;position:relative;margin: 48rem auto 0; -webkit-transition: background .3s; transition:background .3s; }
.story-paging__arrow:after {font-family: 'jt-font';content:'\e929';font-size:20rem;color:#fff;line-height: 1rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); -webkit-transition: color .3s; transition:color  .3s;}
html.desktop .story-paging:hover .story-paging__arrow { background:#fff; }
html.desktop .story-paging:hover .story-paging__arrow:after {color:#000;} 



/* **************************************** *
 * CENTER STORY
 * **************************************** */
 /* LOCATION */
.story-location.story-section {padding-bottom:180rem;}
.story-location__content { position:relative;}
.story-location__content .story-section__deco-title {width:100%; text-align:center; left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);top: -175rem;z-index: -1;}
.story-location__slider-img {height:100%; background-size:cover; opacity: 0;  -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: opacity .3s, transform 3.8s linear; -webkit-transition:opacity .3s, -webkit-transform 3.8s linear; transition:opacity .3s, -webkit-transform 3.8s linear; transition:opacity .3s, transform 3.8s linear; transition: opacity .3s, transform 3.8s linear, -webkit-transform 3.8s linear;}
.story-location .swiper-slide .story-location__slider-img:before {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: #000000;background: rgba(0, 0, 0, .1);}
.swiper-slide-active .story-location__slider-img {-webkit-transform: scale(1) rotate(0deg);-ms-transform: scale(1) rotate(0deg);transform: scale(1) rotate(0deg);}
.story-location__slider-img.story-location__slider-img--small {display: none;}
.story-location__slider-title {position:absolute;width:80%; left: 50%;top: 50%;text-align: center;font-size:24rem; line-height:1.6; color: #fff;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.story-location__slider-title > span {display: block;}
.story-location .swiper-slide {height:800rem;background:#f8f8f8;}
.story-location .swiper-lazy-loaded { opacity: 1;}
.story-location .swiper-ctrl--bullets {bottom:60rem;}

/* ILLUST OBJECT */
.story-section.story-object { padding-bottom:80rem;}
.story-object__center {width: 100%;height: 539rem;background-position: 65% center;}
.story-object__flower {width: 347rem;height: 300rem;background-position: center center;position:absolute; right:-10rem; bottom:0;}

/* ENVIRONMENT */
.story-environment.story-section {padding-top:156rem;}
.story-environment__bg {display: block; width: 100%; height: 560rem; background: no-repeat center top; background-size:cover; background-attachment: fixed;}
.story-environment__content {margin-top:328rem; position:relative;}
.story-environment__content .story-section__deco-title {top:-185rem; left:-15rem;}
.story-environment__last {margin-top:195rem;}
.story-environment__last-desc {margin-bottom:154rem; font-size:24rem; line-height:1.7; font-weight:600; text-align:center;}
.story-environment__last-img {position:relative;}
.story-environment__last-img figure {padding-top:44.1%;}
.story-environment__last-img .jt-motion-img img {opacity:1}
html.mobile .story-environment__bg, html.mac .story-environment__bg {background-attachment:inherit;}

.about-illust__leaved { width:122rem; height:125rem; position:absolute;right:-7rem; top:-95rem; }
.about-illust-medicinal {width:337rem;height:279rem;position:absolute;right: -124rem;top: -234rem;}
.story-environment__last-img .story-object {width:437rem;height:325rem;position:absolute;left: -166rem;top: -205rem;}
.about-illust-plant-medicinal {width:421rem;height:325rem;position:absolute;left: 0;top: 0;}
.about-illust-leaves {width:236rem;height:131rem;position:absolute;right: 0;bottom: 41rem;z-index: 10;}

/* TIME */
.story-time {padding:243rem 0 200rem;background:#f5f5f5;}
.story-time .story-section__deco-title {left:0;top: 64rem;color:#fff;}
.story-time__text.story-section__head {margin-bottom:81rem; text-align:left;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;}
.story-time__text .story-time__desc p {font-size:18rem; line-height:1.8;}
.story-time__title {width:34.3%;  padding-right:60rem;}
.story-time__desc { width:65.7%; color:#666;}
.story-time__list {font-size:0;}
.story-time__item {width: 31.464%;margin-right: 48rem;margin-right: 2.78%;display:inline-block;vertical-align:top;}
.story-time__item:last-child {margin-right:0;}
.story-time__item figure {padding-top:73.6%;}
.story-time__item figure img {max-width:100%;}
.story-time__item-title {font-size:24rem; line-height:1.5; font-weight:600; margin-top:42rem;}
.story-time__item-desc {font-size:16rem; line-height:1.65; margin-top:9rem; color:#666;}

/* FUTURE */
.story-future {position:relative; overflow:hidden;}
.story-future .story-section__deco-title {top:-75rem;left:-27rem; position:absolute;}
.story-future .story-section__head p {font-size:18rem; line-height:1.8;}
.story-future .story-section__head h2 + p {margin-top:60rem;}
.story-future figure {padding-top:30.6%;}
.story-future-sticky {position:relative;}
.story-future-sticky .story-future-sticky__title {position: absolute; padding-top:90rem; padding-left:235rem; max-width:45%;}
.story-future-sticky .story-section__head {text-align:left; position:relative; z-index:10;}
.story-future-sticky:after {clear:both; content:''; display:block;}
.story-future__list {width:692rem;float:right; display:block;}
.story-future__item + .story-future__item {margin-top:120rem;}
.story-future__item figure {padding-top:65.9%;}
.story-future__item img { display:block;-webkit-transform:scale(1.15); -ms-transform:scale(1.15); transform:scale(1.15); -webkit-transition: transform 1.2s;-webkit-transition:-webkit-transform 1.2s;transition:-webkit-transform 1.2s;transition:transform 1.2s;transition: transform 1.2s, -webkit-transform 1.2s;}
.story-future__item--active img {-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
.story-future__item-title {font-size:24rem; font-weight:600; margin-top:42rem;}
.story-future__item-desc {font-size:18rem; line-height:1.8; color:#666; margin-top:14rem;}
html.ie11 .story-future-sticky__title {width:50%;}

.story-future-goal {background:#ede8e2; padding:200rem 0 120rem;}
.story-future-goal__inner {padding-left:182rem; padding-right:280rem;}
.story-future-goal__content {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}
.story-future-goal h2 {font-size:40rem; font-weight:600;}
.story-future-goal p {margin-top:40rem; font-size:18rem; line-height:1.8; color:#666;}
.story-future-goal__text {width: -webkit-calc(100% - 386rem);width: calc(100% - 386rem); padding-right:100rem;}
.story-future-goal__img {width:386rem; height:415rem; background-repeat:no-repeat; background-size:contain;}


/* **************************************** *
 * FERMENTING STORY
 * **************************************** */
.article-story-fermentation .story-section__deco-title {left:50%;top: -170rem;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:100%;text-align:center;}

/* HISTORY */
.story-history {padding-top:270rem;}
.story-history__slider {overflow:visible;}
.story-history__slider .swiper-wrapper { align-items: flex-end; cursor: -webkit-grab; cursor: grab;}
.story-history__item {width: 248rem; margin-right:196rem;}
.story-history__item:last-child { margin-right:109rem;}
.story-history__txt:before {width: -webkit-calc(100% + 196rem);width: calc(100% + 196rem);height:1rem;background:#999;content:'';display:block;position:absolute;bottom: 0;left:0;}
.story-history__txt:after {width:11rem;height:11rem;background:#000;border-radius:50%;content:'';display:block;position:absolute;bottom: -5rem;left:0;}
.story-history__img .jt-lazyload {padding-top: 129%;}
.story-history__txt {padding-bottom: 21rem;margin-bottom: 58rem;text-align: left;position:relative; word-break: keep-all;}
.story-history__txt span {font-size:16rem; line-height:1.5; font-weight:400; letter-spacing:-0.025em;}
.story-history__txt p {font-size:18rem; line-height:1.3; font-weight:500; word-break: break-all; width: 342rem;}

/* CULTURE */
.story-culture {padding-top: 154rem;}
.story-culture__map {position:relative; padding-top:29rem;}
.story-culture__map-img {width:100%; padding-top:49%; /* height:696rem;  */background-repeat: no-repeat; background-size:100% auto; }
.story-culture__list {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.story-culture__item {position:absolute;}
.story-culture__item a {display:block;}
html.desktop .story-culture__item a:hover .story-culture__img {width:80rem;height:80rem;}
.story-culture__name {background:#807e7e;border-radius:2rem;color:#fff;font-size:13rem;font-weight:500;line-height: 1.4;padding: 3rem 10rem;position:relative;-webkit-transition: background .3s; transition:background .3s}
.story-culture__name:after {border-top: 8rem solid #807e7e;border-left: 4rem solid transparent;border-right: 4rem solid transparent;content:'';display:block;position:absolute;bottom: -7rem;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%); -webkit-transition: border-color .3s; transition:border-color .3s}
html.desktop .story-culture__item a:hover .story-culture__name {background:#000;}
html.desktop .story-culture__item a:hover .story-culture__name:after {border-top-color:#000;}
.story-culture__img {width:48rem;height:48rem;margin: auto;margin-top: 12rem;border-radius:50%;overflow:hidden;-webkit-transition:all .3s;transition: all .3s;position: absolute;left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);}
.story-culture__img figure {padding-top:100%;}
html.safari .story-culture__name:after {bottom:-7rem;}

/* .story-culture__item--sweden {left: 7.7%;top: 6%; z-index:10;}
.story-culture__item--germany {left: 11.6%;top: 19.1%;}
.story-culture__item--italy {left: 6.6%;top: 24%;} */
.story-culture__item--sweden {left: 7.7%;top: 17.9%;z-index:10;}
.story-culture__item--germany {left: 8.8%;top: 31.2%;}
.story-culture__item--italy {left: 7.1%;top: 43.3%;}
.story-culture__item--ethiopia {left: 12.5%;top: 65.5%;}
.story-culture__item--china {left: 34%;top: 42%;}
.story-culture__item--korea {left: 40.5%;top: 46%;}
.story-culture__item--indonesia {left: 35.6%;top: 72%;}
.story-culture__item--philippine {left: 38.3%;top: 59.9%;}
.story-culture__item--mexico {right: 17%;top: 53%;}

.story-culture__popup .mfp-title img {width:72rem;display: block;text-align: center;}
.mfp-gallery.story-culture__popup .mfp-close {display:block;position:absolute;right: 20rem;top: 20rem;font-size:0;width: 40rem;height: 40rem;line-height: 40rem;padding: 0;text-align: center;opacity: 1; cursor:pointer;}
.mfp-gallery.story-culture__popup .mfp-close:before {font-family: 'jt-font';content:'\e946';font-size:27rem;color:#333;}
.mfp-gallery.story-culture__popup .mfp-figure .story-culture__food {position: relative;overflow: hidden;background: #f5f5f5;padding-top: 32.9%;max-width: 396rem;margin: 100rem auto 44rem;}
.mfp-gallery.story-culture__popup .mfp-figure .story-culture__food img { display: block; width: 100%; position: absolute; left: 0; top: 0; margin:0;}
.mfp-gallery.story-culture__popup .mfp-figure .story-culture__flag {position: relative;overflow: hidden;background: #f5f5f5;padding-top: 7%;width: 72rem;margin: 40rem auto 0;}
.mfp-gallery.story-culture__popup .mfp-figure .story-culture__flag img { display: block; width: 100%; position: absolute; left: 0; top: 0; }
.story-culture-slider {display:none;}


/* LIFE */
.story-life {padding-top: 235rem;}
.story-life__ilust {width:430rem;height:323rem;position:absolute;right: -6rem;top: -7rem;}
.story-life__container {overflow:visible;}
.story-life__list {font-size:0; margin:0 -61rem; width:auto; display:block;}
.story-life__item { display:inline-block; vertical-align:top; width:-webkit-calc(33.33% - 122rem); width:calc(33.33% - 122rem); margin:0 61rem;}
.story-life__img figure {padding-top: 121.1%;}
.story-life__txt {margin-top:32rem;}
.story-life__txt span {font-size:16rem;font-weight:500;line-height: 1.3;display:block;}
.story-life__txt b {font-size:24rem;line-height: 1.6;display:block;}
.story-life__txt span + b {margin-top:7rem;}

/* FERMENTATION */
.story-fermentation {background:#ede8e2;padding-bottom:100rem;padding-top: 260rem;}
.story-fermentation .story-section__deco-title {width:100%;color:#f3f0ed;text-align:center;top: -177rem;}
.story-fermentation__map-wrap {margin-right:52rem;}
.story-fermentation__map {width: 446rem;height:253rem;margin: 0 auto 100rem;background-repeat: no-repeat; background-size:cover;}
.story-fermentation__map--mob {display:none;}
.story-fermentation__container {overflow:visible;}
.story-fermentation__list {width:auto; display:block; font-size:0; margin:0 -61rem;}
.story-fermentation__item { display:inline-block; vertical-align:top; width:-webkit-calc(20% - 122rem); width:calc(20% - 122rem); margin:0 61rem;}
.story-fermentation__img figure {padding-top:121%;}
.story-fermentation__txt {margin-top:30rem; text-align:center;}
.story-fermentation__txt b {margin-top: 5rem;font-size:24rem;display:block;}
.story-fermentation__txt span {font-size:16rem;display:block;}
.story-fermentation__desc {margin: 200rem 0 130rem;text-align:center;font-size:30rem;font-weight:500; line-height:1.6;}
.story-fermentation_bg {width: 100%;height: 665rem;background-repeat: no-repeat;background-position: 24% center;}
html.mac .story-fermentation_bg {height:666rem;}


/* **************************************** *
 * RESEARCH STORY
 * **************************************** */
.article-story-research .story-section__deco-title {left:50%; top:-188rem; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); width:100%; text-align:center;}

/* NATURE - INTRO */
.story-nature-intro {padding-top:290rem; padding-bottom:160rem;}
.story-nature-intro__content {height: 600rem;position: relative;}
.story-nature-intro__img {width: 100%;height: 100%;background: no-repeat center center;background-size: cover;z-index: 1;}
.story-nature-intro__txt {width: 100%;padding: 0 120rem;position: absolute;top: 50%;left: 50%;text-align: center;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);z-index: 2;}
.story-nature-intro__txt p {font-size: 24rem;font-weight: 500;line-height: 1.6;color: #fff;}
.story-nature-intro__object { position: absolute; right: 153rem; top: -112rem;}
.story-nature-intro__ilust {width:363rem; height:428rem;}

/* NATURE - BANNER */
.story-nature-banner__img {height: 954rem;background: no-repeat center center;background-size: cover;z-index: 1;background-attachment: fixed;}
.story-nature-banner__content {width: 100%;padding: 0 120rem;position: absolute;top: 50%;left: 50%;text-align: center;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.story-nature-banner__content span {display: block;margin-bottom: 12rem;font-size: 16rem;font-weight: 400;line-height: 1.63;color: #fff;}
.story-nature-banner__content b {display: block;font-size: 30rem;font-weight: 600;line-height: 1.4;color: #fff;}
.story-nature-banner__content p {margin-top: 17rem;font-size: 16rem;font-weight: 500;line-height: 1.87;color: #fff;}
html.mobile .story-nature-banner__img, html.mac .story-nature-banner__img {background-attachment:inherit;}

/* NATURE - STICKY */
.story-nature-sticky {position:relative;}
.story-nature-sticky .story-nature-sticky__title {position: absolute;padding-top: 45rem;padding-left:235rem; max-width:41%;}
.story-nature-sticky .story-section__head {text-align:left; position:relative; z-index:10;}
.story-nature-sticky .story-section__head h2 + p {margin-top:41rem;}
.story-nature-sticky:after {clear:both; content:''; display:block;}
.story-nature-sticky__object {position:absolute;left: -10rem;top: 444rem;}
.story-nature-sticky__ilust {width:392rem; height:457rem;}
.story-nature__list {width: 840rem;float:right; display:block;}
.story-nature__item + .story-nature__item {}
.story-nature__item figure {padding-top: 54.25%;}
.story-nature__item img { display:block;}
html.ie11 .story-nature-sticky .story-nature-sticky__title {width:50%; max-width:50%;}

/* SKINCARE */
.story-skincare {position: relative;}
.story-skincare__circle {width: 840rem;height: 840rem;margin: 46rem auto 0;position: relative;z-index: 1;}
.story-skincare__slider {width: 100%; height:100%; position: relative;padding: 76rem;}
.story-skincare__slider .swiper-wrapper {border:1rem solid #ddd; border-radius:50%;}
.story-skincare__slider-img {height:100%; background-size:cover; opacity: 0;background-size: contain; background-repeat: no-repeat; backface-visibility: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;}
.story-skincare .swiper-lazy-loaded { opacity: 1;}
#story-skincare__svg {width: 100%;height: auto;position: absolute;top: 0;left: 0;-webkit-transform: rotate(-12deg);-ms-transform: rotate(-12deg);transform: rotate(-12deg);}
#story-skincare__circle-line {visibility: hidden;}
.story-skincare__list {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.story-skincare__list > li {width: 290rem;position: absolute;cursor: pointer;}
.story-skincare__list > li:nth-child(1) {top: 8.4%;left: -40%;text-align: right;}
.story-skincare__list > li:nth-child(1) > button {  text-align: right;}
.story-skincare__list > li:nth-child(2) {top: 8.4%;right: -40.5%;}
.story-skincare__list > li:nth-child(3) {bottom: 5.9%;right: -40.4%;}
.story-skincare__list > li:nth-child(4) {bottom: 2.7%;left: -40%;text-align: right;}
.story-skincare__list > li:nth-child(4) > button {  text-align: right;}
.story-skincare__list > li > button { width:100%; display:inline-block; text-align:left; padding:0; background:none; border:none; cursor:pointer;}
.story-skincare__list > li > button > p {margin-top: 21rem;font-size: 16rem;line-height: 1.65;color: #666;position:relative;}
.story-skincare__list > li > button > b {display: block;font-size: 24rem;font-weight: 600;line-height: 1.41;color: #222;-webkit-transition: color 400ms;transition: color 400ms;position:relative;}
.story-skincare__list > li:before {content:'';display:block;width:72rem;height:76rem;margin-bottom: 12rem;background-repeat:no-repeat; background-size:cover;}
.story-skincare__list > li:nth-child(1):before, .story-skincare__list > li:nth-child(4):before {float:right;}
.story-skincare__list > li.story-skincare__friendly:before { background-image:url(../images/sub/story/research-skincare-icon-friendly.png);}
.story-skincare__list > li.story-skincare__beneficial:before { background-image:url(../images/sub/story/research-skincare-icon-beneficial.png);}
.story-skincare__list > li.story-skincare__protection:before { background-image:url(../images/sub/story/research-skincare-icon-protection.png);}
.story-skincare__list > li.story-skincare__absorption:before { background-image:url(../images/sub/story/research-skincare-icon-absorption.png);}
.story-skincare__ctrl {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.story-skincare__ctrl .swiper-pagination {width: 100%;height: 100%;position: relative;z-index: 120;}
.story-skincare__ctrl button {opacity:1; width: 20rem;height: 20rem;position: absolute;background: #ddd;border-radius: 100%;cursor: pointer;-webkit-transition: background 400ms;transition: background 400ms;}
.story-skincare__ctrl button:before {content:''; display: block;width: 100%;height: 100%;position: absolute;top: 50%;left: 50%;-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);border-radius: 100%;-webkit-transition: width 400ms, height 400ms;transition: width 400ms, height 400ms; will-change:transform;}
.story-skincare__ctrl button.swiper-pagination-bullet-active {background: #000;}
.story-skincare__ctrl button.swiper-pagination-bullet-active:before {width: 28rem;height: 28rem;border: 2rem solid #000;}
/*.story-skincare__ctrl button:nth-child(1) {top: 22.1%;left: 7%;}
.story-skincare__ctrl button:nth-child(2) {top: 22.1%;right: 6.6%;}
.story-skincare__ctrl button:nth-child(3) {bottom: 21.4%;right: 6.6%;}
.story-skincare__ctrl button:nth-child(4) {bottom: 21.4%;left: 7%;}*/
.story-skincare__ctrl button:nth-child(1) {top: 22%;left: 7.1%;}
.story-skincare__ctrl button:nth-child(2) {top: 22%;right: 7.1%;}
.story-skincare__ctrl button:nth-child(3) {bottom: 21.5%;right: 7.1%;}
.story-skincare__ctrl button:nth-child(4) {bottom: 21.5%;left: 7.1%;}
html.ie11 .story-skincare__ctrl button  {overflow:visible;}

/* PRODUCT */
.story-product__content {}
.story-product__banner { display: table; width: 100%;}
.story-product__item:target:before {content: "";  display: block;  height: 80rem; margin-top: -80rem; visibility: hidden;}
.story-product__item + .story-product__item {margin-top:200rem;}
/* .story-product__item:nth-child(even) .story-product__banner {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: inherit;-ms-flex-direction: inherit;flex-direction: inherit;}
.story-product__item:nth-child(even) .story-product__txt {display:table; -ms-flex-order: 2; -webkit-order: 2; -webkit-box-ordinal-group: 3; order: 2;}
.story-product__item:nth-child(even) .story-product__txt-inner {display: table-cell; vertical-align: middle;}
.story-product__item:nth-child(even) .story-product__img {-ms-flex-order: 1; -webkit-order: 1; -webkit-box-ordinal-group: 2; order: 1;} */
.story-product__img { display: table-cell; vertical-align: middle; width: 50%;}
.story-product__img figure {padding-top: 99%;}
.story-product__txt {display: table-cell;vertical-align: middle;width: 50%;color:#fff;padding: 0 87rem;}
.story-product__txt b {font-size:36rem; font-weight:600;}
.story-product__txt p {margin-top:44rem; font-size:24rem; font-weight:500; line-height:1.5;}
.story-product__txt span {margin-top:23rem; font-size:16rem; font-weight:400; line-height:1.63; display:block;}
.story-product__item--sum .story-product__txt { background:#c19d75;}
.story-product__item--mission .story-product__txt {background:#2d2a29}
.story-product__desc {text-align:center; margin-top:102rem; font-size:16rem; line-height:1.8; color:#111;}
.story-product__desc b {font-size:30rem;}
.story-product__desc b + p {margin-top:30rem;}
.story-product__link {margin-top:40rem; font-size:0;}
.story-product__link .jt-btn__basic {min-width:185rem;}
.story-product__link .jt-btn__basic + .jt-btn__basic {margin-left:30rem;}