@charset "utf-8";

/*
 * File       : rwd-story.css
 * Author     : STUDIO-JT (Sumi)
 * Guideline  : JTstyle.1.1
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01)
 */



/* **************************************** *
 * 1950px
 * **************************************** */
@media (min-width: 1950px){

    /* **************************************** *
     * FERMENTING STORY
     * **************************************** */
    /* FERMENTATION */
    .story-fermentation_bg {background-size: cover;}

}



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

    /* LAYOUT + COMPONENT */
    .story-section {padding: 180rem 0;}

    .story-grid__item + .story-grid__item {margin-top: 140rem;}
    .story-grid__item--type-01 .story-grid__typo {padding-left: 120rem;padding-right: 60rem;}
    .story-grid__item--type-02 .story-grid__typo {padding-left: 100rem;}



    /* **************************************** *
     * CENTER STORY
     * **************************************** */
    /* FUTURE */
    .story-future-goal__inner {padding-left:120rem; padding-right:120rem;}
    .story-future-sticky .story-future-sticky__title {padding-left:120rem;}

    /* OBJECT */
    .story-object__center {height:450rem;}
    .story-object__flower { width: 310rem; height: 268rem;}

    /* ENVIRONMENT */
    .about-illust__leaved { width: 105rem; height: 108rem;}
    .about-illust-medicinal { width: 315rem; height: 260rem;}
    .story-environment__last-img .story-object { width: 405rem; height: 305rem;}
    .about-illust-plant-medicinal { width: 400rem; height: 309rem;}
    .about-illust-leaves { width: 216rem; height: 120rem;}



    /* **************************************** *
     * FERMENTING STORY
     * **************************************** */
     /* HISTORY */
    .story-history {padding-top:250rem;}
    .story-history__item:last-child { margin-right:136rem;}

    /* LIFE */
    .story-life__ilust { width: 380rem; height: 286rem;}
    .story-life__list {margin:0 -50rem;}
    .story-life__item {width: -webkit-calc(33.33% - 100rem);width: calc(33.33% - 100rem); margin: 0 50rem;}

    /* FERMENTATION */
    .story-fermentation { padding-top:240rem;}
    .story-fermentation__list {margin:0 -40rem;}
    .story-fermentation__item {width: -webkit-calc(20% - 80rem);width: calc(20% - 80rem); margin: 0 40rem;}
    .story-fermentation_bg {background-size: cover;}



    /* **************************************** *
     * RESEARCH STORY
     * **************************************** */
    /* NATURE - INTRO */
    .story-nature-intro__object {top:-80rem;}
    .story-nature-intro__ilust {width: 320rem; height: 376rem;}

    /* NATURE - STICKY */
    .story-nature-sticky__ilust {width: 352rem; height: 411rem;}
    .story-nature-sticky .story-nature-sticky__title {padding-left:120rem;}
    .story-nature__list {width:50%;}

    /* SKINCARE */
    .story-skincare__circle {width: 800rem; height: 800rem;}
    .story-skincare__list > li > button > b {font-size:22rem;}
    .story-skincare__list > li > button > p {font-size:15rem;}


}



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

    /* LAYOUT + COMPONENT */
    .story-section {padding: 160rem 0;}
    .story-section__head {margin-bottom: 60rem;}
    .story-section__head h2 {font-size: 34rem;}
    .story-section__subtypo h3 { font-size: 28rem;}
    .story-section__deco-title {font-size:170rem;}

    .story-grid__item + .story-grid__item {margin-top: 120rem;}
    .story-grid__item--type-01 .story-grid__typo {padding-left: 80rem;}
    .story-grid__item--type-02 .story-grid__typo {padding-left: 80rem;padding-right: 80rem;}
    .story-grid__typo b {font-size: 36rem;}
    .story-grid__typo span br, .story-grid__typo b br, .story-grid__typo p br {display: none;}

    /* PAGING */
    .story-paging__title {padding: 130rem 0 100rem}
    .story-paging__title b {font-size:54rem;}


    /* **************************************** *
     * CENTER STORY
     * **************************************** */
    /* FUTURE */
    .story-future-sticky .story-future-sticky__title {padding-left:80rem;}

    /* OBJECT */
    .story-object__center {height:410rem;}
    .story-object__flower { width: 280rem; height: 242rem;}

    /* LOCATION  */
    .story-location.story-section {padding-bottom:160rem;}
    .story-location__content .story-section__deco-title {top:-160rem;}
    .story-location .swiper-slide {height:680rem}

    /* ENVIRONMENT */
    .story-environment.story-section {padding-top:140rem;}
    .story-environment__content {margin-top:300rem;}
    .story-environment__content .story-section__deco-title { top: -165rem;}
    .story-environment__last {margin-top:180rem;}

    /* FUTURE */
    .story-future__list {width:600rem;}
    .story-future-goal__inner {padding-left:80rem; padding-right:80rem;}
    .story-future-goal__text {width:-webkit-calc(100% - 300rem);width:calc(100% - 300rem); padding-right:200rem;}
    .story-future-goal h2 {font-size:38rem;}
    .story-future-goal p {font-size:17rem; margin-top:45rem;}
    .story-future-goal__img { width: 300rem; height: 323rem;}

    /* TIME */
    .story-time .story-section__deco-title {top:30rem;}

    /* NATURE */
    .story-nature-sticky .story-nature-sticky__title {max-width:42%;}


    /* **************************************** *
     * FERMENTING STORY
     * **************************************** */
     .article-story-fermentation .story-section__deco-title { top:-150rem;}

    /* HISTORY */
    .story-history {padding-top:230rem;}
    .story-history__content {margin-top:80rem;}
    .story-history__item { margin-right:160rem;}
    .story-history__item:last-child { margin-right:120rem;}
    .story-history__txt:before {width: -webkit-calc(100% + 160rem);width: calc(100% + 160rem);}

    /* LIFE */
    .story-life__ilust { width: 340rem; height: 256rem;}

    /* FERMENTATION */
    .story-fermentation { padding-top:220rem;}
    .story-fermentation__list {margin:0 -30rem;}
    .story-fermentation__item {width: -webkit-calc(20% - 60rem);width: calc(20% - 60rem); margin: 0 30rem;}
    .story-fermentation__desc {font-size:28rem;}
    .story-fermentation_bg {height:560rem;}


    /* **************************************** *
     * RESEARCH STORY
     * **************************************** */
     .article-story-research .story-section__deco-title {top:-150rem;}

     /* NATURE - INTRO */
    .story-nature-intro {padding-bottom:140rem;}
    .story-nature-intro__object {top:-60rem; right:110rem;}
    .story-nature-intro__ilust {width: 280rem; height: 330rem;}

    /* NATURE - STICKY */
    .story-nature-sticky__ilust {width: 321rem; height: 374rem;}

    /* NATURE - BANNER */
    .story-nature-banner__img {height:800rem;}

    /* SKINCARE */
    .story-skincare__circle {width: 680rem; height: 680rem;}
    .story-skincare__slider {padding:60rem;}
    .story-skincare__list > li > button > b {font-size:20rem;}
    .story-skincare__list > li > button > p {font-size:14rem; margin-top:18rem;}
    .story-skincare__list > li:nth-child(1) {left: -45%;}
    .story-skincare__list > li:nth-child(2) {right: -45%;}
    .story-skincare__list > li:nth-child(3) {right: -45%;}
    .story-skincare__list > li:nth-child(4) {left: -45%;}
    .story-skincare__ctrl button:nth-child(1) { left: 6.5%;}
    .story-skincare__ctrl button:nth-child(2) { right: 6.5%;}
    .story-skincare__ctrl button:nth-child(3) { right: 6.5%;}
    .story-skincare__ctrl button:nth-child(4) { left: 6.5%;}
    .story-skincare__ctrl button {width: 14px;height: 14px;}
    .story-skincare__ctrl button.swiper-pagination-bullet-active:before {width: 20px;height: 20px;border-width: 1px;}

    /* PRODUCT */
    .story-product__item + .story-product__item {margin-top:180rem;}
    .story-product__txt b {font-size:32rem;}
    .story-product__txt p {font-size:22rem;}
    .story-product__desc b {font-size:28rem;}

}



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

    /* LAYOUT + COMPONENT */
    .story-section {padding: 140rem 0;}
    .story-section__head {margin-bottom: 50rem;}
    .story-section__head h2 {font-size: 32rem;}
    .story-section__head p {font-size: 15rem;}
    .story-section__subtypo h3 { font-size: 26rem;}
    .story-section__deco-title {font-size:140rem;}

    .story-grid__item + .story-grid__item {margin-top: 95rem;}
    .story-grid__picture {width: 52%;}
    .story-grid__typo {width: 48%;}
    .story-grid__item--type-01 .story-grid__typo {padding-left: 55rem;padding-right: 40rem;}
    .story-grid__item--type-02 .story-grid__typo {padding-left: 40rem;padding-right: 55rem;}
    .story-grid__typo b {font-size: 28rem;}
    .story-grid__typo p {font-size: 16rem;}
    .story-grid__typo span {font-size: 14rem;}
    .story-grid__typo b + p {margin-top: 20rem;}

    /* PAGING */
    .story-paging__title {padding: 100rem 0 80rem}
    .story-paging__title b {font-size:46rem;}
    .story-paging__title span {font-size:17rem;}
    .story-paging__arrow { width: 70rem; height: 70rem; margin-top:40rem; }



    /* **************************************** *
     * CENTER STORY
     * **************************************** */
    .article-story-center .story-section__head {margin-bottom:60rem;}

    /* OBJECT */
    .story-section.story-object {padding-bottom:0;}
    .story-object__center {height:280rem;}
    .story-object__flower { width: 220rem; height: 191rem; bottom:-60rem;}

    /* LOCATION  */
    .story-location.story-section {padding-bottom:140rem;}
    .story-location__content .story-section__deco-title {top:-125rem;}
    .story-location .swiper-slide {height:520rem}
    .story-location .swiper-ctrl--bullets {bottom:50rem;}
    .story-location__slider-title {font-size:22rem;}

    /* ENVIRONMENT */
    .story-environment.story-section {padding-top:120rem;}
    .story-environment__content {margin-top:220rem;}
    .story-environment__content .story-section__deco-title { top: -130rem; }
    .story-environment__bg {height:460rem;}
    .story-environment__last {margin-top:140rem;}
    .story-environment__last-desc {font-size:20rem;}

    .about-illust__leaved { width: 85rem; height: 88rem;}
    .about-illust-medicinal { width: 220rem; height: 182rem;right: -70rem; top: -175rem;}
    .story-environment__last-img .story-object {width: 263rem;height: 214rem; left: -80rem; top: -130rem;}
    .about-illust-plant-medicinal {width: 250rem;height: 193rem;}
    .about-illust-leaves {width: 146rem;height: 81rem;}

    /* FUTURE */
    .story-future-sticky .story-section__head {max-width:800rem}
    .story-future-sticky .story-future-sticky__title {position:static; padding-left:40rem; padding-right:40rem; max-width:100%;}
    .story-future .story-section__deco-title { top:100rem; left: -17rem;}
    .story-future .story-section__head h2 + p {margin-top:40rem;}
    .story-future .story-section__head h2 br {display:none;}
    .story-future .story-section__head p {font-size:17rem;}
    .story-future .story-section__head p br {display:none;}
    .story-future__container {overflow:visible;}
    .story-future__list {float:none; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; width:auto;}
    .story-future__item {margin-right:30rem; width:520rem;}
    .story-future__item:last-child {margin-right:0;}
    .story-future__item + .story-future__item {margin-top:0;}
    .story-future__item-title {font-size:22rem; margin-top:30rem;}
    .story-future__item-desc {font-size:17rem;}
    .story-future__item-desc br {display:none;}
    .story-future-goal__inner {padding-left:60rem; padding-right:60rem;}
    .story-future-goal__text {width:-webkit-calc(100% - 260rem);width:calc(100% - 260rem);padding-right:100rem;}
    .story-future-goal h2 {font-size:36rem;}
    .story-future-goal p {font-size:16rem; margin-top:40rem;}
    .story-future-goal__img {width:260rem; height:280rem;}

    /* TIME */
    .story-time .story-section__deco-title {top:30rem;}
    .story-time__text.story-section__head {display:block; margin-bottom:60rem;}
    .story-time__title {width:100%;}
    .story-time__desc {width:100%;margin-top:30rem;}
    .story-time__text .story-time__desc p {font-size:17rem;}
    .story-time__container {overflow:visible;}
    .story-time__item {width:420rem; margin-right:30rem;}
    .story-time__item-title {font-size:22rem; margin-top:30rem;}
    .story-time__item-desc {font-size:15rem;}
    .story-time__item-desc br {display:none;}



    /* **************************************** *
     * FERMENTING STORY
     * **************************************** */
     .article-story-fermentation .story-section__deco-title { top:-120rem;}

     /* HISTORY */
     .story-history {padding-top:200rem;}
     .story-history__item {margin-right:120rem;}
     .story-history__item:last-child { margin-right:80rem;}
     .story-history__txt:before {width: -webkit-calc(100% + 120rem);width: calc(100% + 120rem);}
     .story-history__txt span {font-size:15rem;}
     .story-history__txt p {font-size:17rem;}

     /* CULTURE */
    .story-culture__name {font-size:12rem; padding:2rem 8rem;}
    .story-culture__name:after { border-top-width:6rem; border-left-width:3rem; border-right-width:3rem; bottom:-6rem;}
    .story-culture__img {width:40rem; height:40rem; margin-top:9rem;}
    .story-culture__item--sweden {z-index:0;left: 10.7%;}
    .story-culture__item--germany {left: 6.9%;top: 27.8%;}
    .story-culture__item--korea {top: 42%;}
    .story-culture__item--indonesia {top: 73.2%;}
    .story-culture__item--philippine {top: 57.8%;}
    .mfp-gallery.story-culture__popup img.mfp-img {max-height:inherit !important;}
    .mfp-gallery.story-culture__popup .mfp-figure .story-culture__food {padding-top: 35.4%;}
    .mfp-gallery.story-culture__popup .mfp-figure .story-culture__flag {padding-top:7.8%;}

     /* LIFE */
    .story-life__ilust {width: 280rem; height: 211rem;}
    .story-life__list { width:100%; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; margin:0;}
    .story-life__item {width:396rem; margin:0 50rem 0 0;}
    .story-life__item:last-child {margin-right:0;}
    .story-life__txt {margin-top:25rem;}
    .story-life__txt b {font-size:20rem;}
    .story-life__txt span {font-size:15rem;}

     /* FERMENTATION */
    .story-fermentation { padding-top:200rem;}
    .story-fermentation__map { margin-bottom:80rem; width: 400rem; height: 226rem;}
    .story-fermentation__list { width:100%; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; margin:0;}
    .story-fermentation__item {width:248rem; margin:0 30rem 0 0;}
    .story-fermentation__item:last-child {margin-right:0;}
    .story-fermentation__txt {margin-top:25rem;}
    .story-fermentation__txt span {font-size:15rem;}
    .story-fermentation__txt b {font-size:22rem;}
    .story-fermentation__desc {font-size:26rem; margin-top:160rem;}
    .story-fermentation_bg {height:360rem;}



    /* **************************************** *
     * RESEARCH STORY
     * **************************************** */
     .article-story-research .story-section__deco-title {top:-120rem;}

    /* NATURE - INTRO */
    .story-nature-intro {padding-bottom:100rem;}
    .story-nature-intro__img {background-position:left center;}
    .story-nature-intro__object { top: -30rem; right: 70rem;}
    .story-nature-intro__ilust { width: 220rem; height: 259rem; }
    .story-nature-intro__content {height:480rem;}
    .story-nature-intro__txt p {font-size:22rem;}

     /* NATURE - STICKY */
    .story-nature-sticky .story-nature-sticky__title {position:static; padding:0 40rem; max-width:100%;}
    .story-nature-sticky .story-section__head h2 + p {margin-top:30rem;}
    .story-nature-sticky .story-section__head h2 br,
    .story-nature-sticky .story-section__head p br {display:none;}
    .story-nature-sticky__object {display:none;}
    .story-nature-sticky .story-nature__container {overflow:visible;}
    .story-nature__list {float: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; margin-left:0;}
    .story-nature__item {max-width:620rem;}

    /* NATURE - BANNER */
    .story-nature-banner__img {height:680rem;}

    /* SKINCARE */
    .story-skincare__circle {width: 480rem; height: 480rem;}
    .story-skincare__slider {padding:30rem;}
    .story-skincare__list > li:before {margin-bottom:8rem;}
    .story-skincare__list > li > button > b {font-size:18rem;}
    .story-skincare__list > li > button > p {font-size:13rem; margin-top:12rem;}
    .story-skincare__list > li:nth-child(1) {left: -63%; top:1%;}
    .story-skincare__list > li:nth-child(2) {right: -63%; top:1%;}
    .story-skincare__list > li:nth-child(3) {right: -63%;}
    .story-skincare__list > li:nth-child(4) {left: -63%;}
    .story-skincare__ctrl button {width:16rem; height:16rem;}
    .story-skincare__ctrl button.swiper-pagination-bullet-active:before {width:20rem; height:20rem;}

    /* PRODUCT */
    .story-product__item + .story-product__item {margin-top:140rem;}
    .story-product__txt {padding:0 50rem;}
    .story-product__txt b {font-size:30rem;}
    .story-product__txt p {font-size:20rem;  margin-top:35rem;}
    .story-product__txt span {font-size:15rem; margin-top:20rem;}
    .story-product__desc {margin-top:80rem; font-size:15rem;}
    .story-product__desc b {font-size:28rem;}
    .story-product__desc b + p {margin-top:25rem;}

}



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

    /* LAYOUT + COMPONENT */
    .story-section {padding: 100rem 0;}
    .story-section__head {margin-bottom: 42rem;}
    .story-section__head h2 {font-size: 29rem;}
    .story-section__head p {font-size:14rem;}
    .story-section__subtypo h3 {font-size:22rem;}
    .story-section__deco-title {font-size:100rem;}

    .story-grid__item + .story-grid__item {margin-top: 76rem;}
    .story-grid__item--type-01 .story-grid__typo {padding-left: 38rem;padding-right: 12rem;}
    .story-grid__item--type-02 .story-grid__typo {padding-left: 12rem;padding-right: 38rem;}
    .story-grid__typo b {font-size: 24rem;}
    .story-grid__typo b + p {margin-top: 16rem;}
    .story-grid__typo p {font-size:14rem; line-height:1.6;}

    /* PAGING */
    .story-paging__title {padding: 60rem 0 60rem}
    .story-paging__title b {font-size:36rem;}
    .story-paging__title span {font-size:16rem;}
    .story-paging__arrow { width: 60rem; height: 60rem; margin-top:30rem; }



    /* **************************************** *
     * CENTER STORY
     * **************************************** */
    .article-story-center .story-section__head {margin-bottom:50rem;}

    /* LOCATION  */
    .story-location.story-section {padding-bottom:100rem;}
    .story-location__content .story-section__deco-title {top:-88rem;}
    .story-location .swiper-slide {height:400rem}
    .story-location .swiper-ctrl--bullets {bottom:40rem;}
    .story-location__slider-title {font-size:20rem;}

    /* OBJECT */
    .story-object__center {height:210rem;}
    .story-object__flower { width: 150rem; height: 130rem; bottom:-50rem;}

    /* ENVIRONMENT */
    .story-environment.story-section {padding-top:100rem;}
    .story-environment__content {margin-top:160rem;}
    .story-environment__content .story-section__deco-title {top:-90rem;}
    .story-environment__bg {height:340rem;}
    .story-environment__last {margin-top:120rem;}
    .story-environment__last-desc {font-size:18rem; margin-bottom:120rem;}

    .about-illust__leaved {width:61rem; height:63rem;}
    .about-illust-medicinal {width: 156rem; height: 129rem; top:-120rem; right:-50rem;}
    .story-environment__last-img .story-object { width: 206rem;  height: 177rem; top:-110rem;}
    .about-illust-plant-medicinal { width: 201rem; height: 155rem;}
    .about-illust-leaves {width: 110rem;height: 61rem;}

    /* TIME */
    .story-time__item {width:366rem;}
    .story-time__text.story-section__head {margin-bottom:50rem;}
    .story-time__item-title {font-size:20rem;}
    .story-time__item-desc {font-size:14rem; line-height:1.6;}
    .story-time__text .story-time__desc p {font-size:16rem; line-height:1.6;}
    .story-time__text .story-time__desc p br { display:none;}

    /* FUTURE */
    .story-future .story-section__deco-title {top:50rem;}
    .story-future .story-section__head p {font-size:15rem;}
    .story-future .story-section__head p br.jt-middlescreen-br {display:block;}
    .story-future-sticky .story-future-sticky__title {padding-left:32rem; padding-right:32rem; padding-top:32rem;}
    .story-future-goal__inner {padding-left:48rem; padding-right:48rem;}
    .story-future .story-section__head h2 + p {margin-top:30rem;}
    .story-future__item {width:420rem;}
    .story-future__item-title {font-size:20rem;}
    .story-future__item-desc {font-size:16rem; line-height:1.6;}

    .story-future-goal__img { width: 200rem; height: 215rem;}
    .story-future-goal__text {width:-webkit-calc(100% - 200rem);width:calc(100% - 200rem); padding-right:60rem;}
    .story-future-goal h2 {font-size:30rem;}
    .story-future-goal p {font-size:15rem; line-height:1.6; margin-top:30rem;}
    .story-future-goal p br {display:none;}



    /* **************************************** *
     * FERMENTING STORY
     * **************************************** */
     .article-story-fermentation .story-section__deco-title { top:-80rem;}

     /* HISTORY */
    .story-history {padding-top:160rem;}
    .story-history__item {width:220rem; margin-right:104rem;}
    .story-history__item:last-child { margin-right:72rem;}
    .story-history__txt:before {width: -webkit-calc(100% + 104rem);width: calc(100% + 104rem);}
    .story-history__txt span {font-size:14rem;}
    .story-history__txt p {font-size:16rem;}

     /* CULTURE */
    .story-culture__name { font-size:13rem; padding:3rem 6rem 2rem; background:#2d2a29;}
    .story-culture__name:after { border-top-width:4rem; border-left-width:2rem; border-right-width:2rem; border-top-color:#2d2a29; bottom:-4rem;}
    html.ios .story-culture__name:after {bottom: -3rem;}
    .story-culture__img {width:8px; height:8px; background:#2d2a29; border-radius:50%; margin-top:7rem;}
    .story-culture__img figure {display:none;}
    .story-culture__map {padding-top:0; width: 120%; margin-left: -10%;}
    .story-culture__map-img { padding-top: 70%; }
    .mfp-gallery.story-culture__popup .mfp-figure .story-culture__food {padding-top: 48.4%;}

    .story-culture__item--sweden {left: 4.3%;top: 13%;z-index:10;}
    .story-culture__item--germany {left: 5.9%;top: 23%;}
    .story-culture__item--italy {left: 5%;top: 28%;}
    .story-culture__item--ethiopia {left: 11.5%;top: 44%;}
    .story-culture__item--china {left: 34%;top: 32%;}
    .story-culture__item--korea {left: 40%;top: 31%;}
    .story-culture__item--indonesia {left: 34.7%;top: 48.8%;}
    .story-culture__item--philippine {left: 36.3%;top: 43%;}
    .story-culture__item--mexico {right: 15.7%;top: 36.5%;}

    .story-culture-slider {display:block; overflow:visible; margin-top:-190rem;}
    .story-culture-slider .swiper-slide {max-width:340rem; margin-right:30rem;}
    /* .story-culture-slider__img {padding-top: 83.4%; background-repeat: no-repeat;} */
    .story-culture-slider__img img {max-width:100%; display:block;}
    .story-culture-slider__title { margin-top:30rem; font-size:18rem; display:block;}
    .story-culture-slider__desc { margin-top:12rem; font-size:14rem; line-height:1.5;}
    .story-culture-slider__desc br {display:none;}
    .story-culture-slider__flag {max-width: 65rem;margin-top: 30rem;}
    .story-culture-slider__flag img {max-width:100%;}
    .story-culture__item .story-culture__name {opacity:0; visibility:hidden; z-index: 11;}
    .story-culture__item.story-culture__item--active .story-culture__name {opacity:1; visibility:visible; margin-top:7rem;}
    .story-culture__item.story-culture__item--active .story-culture__img {display:none;}

     /* LIFE */
    .story-life__ilust { width: 220rem; height: 166rem;}
    .story-life__item {width:340rem; margin:0 30rem 0 0;}
    .story-life__txt {margin-top:25rem;}
    .story-life__txt b {font-size:19rem;}
    .story-life__txt span {font-size:14rem;}

    /* FERMENTATION */
    .story-fermentation { padding-top:160rem;}
    .story-fermentation__map { margin-bottom: 60rem; width: 360rem; height: 204rem;}
    .story-fermentation__txt span {font-size:14rem;}
    .story-fermentation__txt b {font-size:20rem; font-weight:500;}
    .story-fermentation__desc {font-size:22rem;margin-top:120rem; margin-bottom:100rem;}
    .story-fermentation_bg {height:270rem;}


     /* **************************************** *
     * RESEARCH STORY
     * **************************************** */
    .article-story-research .story-section__deco-title {top:-80rem;}

    /* NATURE - INTRO */
    .story-nature-intro__object {display:none;}
    .story-nature-intro__content {height:360rem;}
    .story-nature-intro__txt {padding:0 80rem;}
    .story-nature-intro__txt p {font-size:20rem;}


    /* NATURE - STICKY */
    .story-nature-sticky .story-nature-sticky__title {padding:0 32rem;}
    .story-nature__item {max-width:480rem;}

    /* NATURE - BANNER */
    .story-nature-banner__img {height:480rem;}
    .story-nature-banner__content {padding:0 80rem;}
    .story-nature-banner__content b {font-size:29rem;}
    .story-nature-banner__content p {font-size:15rem;}

    /* SKINCARE */
    .story-skincare__circle {width: 300rem; height: 300rem;}
    .story-skincare__slider {padding:20rem;}
    .story-skincare__list > li { width: 180rem;}
    .story-skincare__list > li:before {width:49rem; height:52rem;margin-bottom:6rem;}
    .story-skincare__list > li > button > b {font-size:16rem;}
    .story-skincare__list > li > button > p {font-size:12rem; margin-top:8rem;}
    .story-skincare__list > li > button > p br {display:none;}
    .story-skincare__list > li:nth-child(1) {left: -70%; top:-6%;}
    .story-skincare__list > li:nth-child(2) {right: -70%; top:-6%;}
    .story-skincare__list > li:nth-child(3) {right: -70%; bottom:-15%;}
    .story-skincare__list > li:nth-child(4) {left: -70%; bottom:-15%;}
    .story-skincare__ctrl button {width:12rem; height:12rem;}
    .story-skincare__ctrl button.swiper-pagination-bullet-active:before {width:18rem; height:18rem;}
    .story-skincare__ctrl button:nth-child(1) { left: 5.2%;}
    .story-skincare__ctrl button:nth-child(2) { right: 5.2%;}
    .story-skincare__ctrl button:nth-child(3) { right: 5.2%;}
    .story-skincare__ctrl button:nth-child(4) { left: 5.2%;}

    /* PRODUCT */
    .story-product__item + .story-product__item {margin-top: 100rem;}
    .story-product__txt  {padding:0 40rem;}
    .story-product__txt b {font-size: 26rem;}
    .story-product__txt p {font-size:18rem; margin-top:30rem;}
    .story-product__txt span {font-size:14rem; margin-top:15rem;}
    .story-product__txt br {display:none;}
    .story-product__desc {margin-top:60rem; font-size:14rem; line-height:1.6;}
    .story-product__desc b + p {margin-top:20rem;}
    .story-product__desc b {font-size:22rem;}
    .story-product__link {margin-top:30rem;}



}



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

    /* LAYOUT + COMPONENT */
    .story-section {padding:60rem 0 80rem;}
    .story-section__deco-title {font-size:80rem;}
    .story-section__head h2 {font-size:24rem;}
    .story-section__head h2 br {display:none;}
    .story-section__head p {font-size:13rem;}
    .story-section__head p br {display:none;}
    .story-section__head p + p {margin-top:10rem;}
    .article-smallscreen-menu + .story-section {padding-top:112rem;}

    .story-grid__item {display:block;}
    .story-grid__picture {width:100%;}
    .story-grid__typo {width:100%}
    .story-grid__typo b {font-size:20rem;}
    .story-grid__item--type-01 .story-grid__typo {padding:0; margin-top:20rem;}
    .story-grid__item--type-02 {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
    .story-grid__item--type-02 .story-grid__typo {padding:0; margin-top:20rem; -ms-flex-order: 2; -webkit-order: 2; -webkit-box-ordinal-group: 3; order: 2;}
    .story-grid__item--type-02 .story-grid__picture {-ms-flex-order: 1; -webkit-order: 1; -webkit-box-ordinal-group: 2; order: 1;}
    .story-grid__item + .story-grid__item { margin-top:40rem;}
    .story-grid .story-object {display:none;}

    /* PAGING */
    .story-paging__title {padding: 40rem 0 40rem}
    .story-paging__title b {font-size:28rem;}
    .story-paging__title span {font-size:15rem;}
    .story-paging__arrow { width: 50rem; height: 50rem; margin-top:20rem; }



    /* **************************************** *
     * CENTER STORY
     * **************************************** */
    .article-story-center .story-section__head {margin-bottom:40rem;}

    /* LOCATION */
    .story-location.story-section {padding-bottom:60rem;}
    .story-location__content .story-section__deco-title {top:-70rem;margin-left:-5rem;}
    .story-location .swiper-slide {height:200rem;}
    .story-location__slider-title {font-size:18rem;width: 100%; padding: 0 40rem;}
    .story-location__slider-title br {display:none;}
    .story-location .swiper-ctrl--bullets {bottom:16rem;}

    .story-location__slider-img.story-location__slider-img--large {display: none;}
    .story-location__slider-img.story-location__slider-img--small {display: block;}

    /* ENVIRONMENT */
    .story-environment.story-section {padding-top:80rem;}
    .story-environment__content {margin-top:124rem;}
    .story-environment__content .story-section__deco-title { top: -75rem; word-break:keep-all;}
    .story-environment__bg {height:200rem; }
    .story-environment__last {margin-top:80rem;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
    .story-environment__last-img { -ms-flex-order: 1; -webkit-order: 1; -webkit-box-ordinal-group: 2; order: 1;}
    .story-environment__last-img .story-object {width: 115rem;height: 120rem;top: -100rem; left: -55rem;}
    .about-illust-plant-medicinal {width: 123rem;height: 95rem;}
    .about-illust-leaves {width: 56rem;height: 31rem;}
    .story-environment__last-desc { font-size: 16rem; margin-top: 30rem; margin-bottom:0; -ms-flex-order: 2; -webkit-order: 2; -webkit-box-ordinal-group: 3; order: 2;}
    .story-environment__last-desc br {display:none;}

    /* TIME */
    .story-time {padding-top:124rem;}
    .story-time__text.story-section__head {margin-bottom:30rem;}
    .story-time .story-section__deco-title {top:53rem;}
    .story-time__title {padding-right:0;}
    .story-time__desc {margin-top:20rem;}
    .story-time__text .story-time__desc p {font-size:13rem;}
    .story-time__text .story-time__desc p br.jt-smallscreen-br {display:block;}
    .story-time__item {width: 290rem; margin-right:16rem;}
    .story-time__item-title {font-size:18rem; margin-top:20rem;}
    .story-time__item-desc {font-size:13rem;}

    /* FUTURE */
    .story-future-sticky {padding-top:124rem;}
    .story-future-sticky .story-future-sticky__title {padding-left:20rem; padding-right:20rem; padding-top:0;}
    .story-future .story-section__deco-title {top:53rem; left:0;}
    .story-future .story-section__head p {font-size:13rem;}
    .story-future .story-section__head h2 + p {margin-top:20rem;}
    .story-future .story-section__head h2 br.jt-smallscreen-br {display:block;}
    .story-future .story-section__head p br.jt-smallscreen-br {display:block;}
    .story-future .story-section__head p br.jt-middlescreen-br {display:none;}
    .story-future__item {width: 290rem; margin-right:16rem;}
    .story-future__item-title {font-size:18rem;}
    .story-future__item-desc {font-size:14rem;}
    .story-future__item-desc br {display:none;}

    .story-future-goal {padding-bottom:60rem;}
    .story-future-goal__inner {padding-left:20rem; padding-right:20rem;}
    .story-future-goal__content {display:block;}
    .story-future-goal__text {width:100%; padding-right:0;}
    .story-future-goal h2 {font-size:24rem;}
    .story-future-goal p {margin-top:20rem; font-size:14rem;}
    .story-future-goal p br {display:none;}
    .story-future-goal__img { width: 170rem; height: 183rem; margin: 40rem auto 0;}

    /* OBJECT */
    .story-object__center {height: 120rem;}
    .story-object__flower {width: 90rem;height: 78rem;}

     /* **************************************** *
     * FERMENTING STORY
     * **************************************** */
    .article-story-fermentation .story-section__deco-title {top:-73rem;}

    /* HISTORY */
    .article-smallscreen-menu + .story-history { padding-top:176rem; padding-bottom:66rem;}
    .story-history__content {margin-top:57rem;}
    .story-history__item {width:160rem;}
    .story-history__txt {padding-bottom: 23rem; margin-bottom:25rem;}
    .story-history__txt:after {width: 7rem; height: 7rem; bottom: -3rem;}
    .story-history__txt span {font-size:13rem;}
    .story-history__txt p {margin-top:7rem; font-size:14rem; word-break: keep-all; width: auto;}

    /* LIFE */
    .story-life__ilust {display:none;}
    .story-life__item {width:248rem; margin-right:16rem;}
    .story-life__txt {margin-top:21rem;}
    .story-life__txt b {font-size:18rem; }
    .story-life__txt span {font-size:13rem;}
    .story-life__txt span + b {margin-top:5rem;}

    /* FERMENTATION */
    .story-fermentation { padding-top:126rem; padding-bottom:50rem;}
    .story-fermentation .story-section__deco-title span {display:none;}
    .story-fermentation__desc {font-size:18rem; font-weight:bold; margin:80rem 0;}
    .story-fermentation__desc br {display:none;}
    .story-fermentation__map-wrap {margin-right:0;}
    .story-fermentation__map {display:none;}
    .story-fermentation__map--mob {display:block;width: 199rem;height:200rem;margin: 0 auto 60rem;background-repeat: no-repeat; background-size:cover;}
    .story-fermentation__item {width:140rem;margin-right:16rem;}
    .story-fermentation__txt {margin-top:21rem;}
    .story-fermentation__txt span {font-size:13rem;}
    .story-fermentation__txt b {font-size:18rem;}
    .story-fermentation_bg {height:150rem;}

    /* CULTURE */
    .story-culture-slider {margin-top:-93rem;}
    .story-culture-slider .swiper-slide {max-width:248rem; margin-right:16rem;}
    .story-culture__map {margin-left: -4%;}
    .story-culture__img {width:5px; height:5px; }
    .story-culture__name {font-size:12rem;}
    .story-culture__name:after { border-top-width: 5rem; border-left-width: 3rem; border-right-width: 3rem;}
    .story-culture-slider__title {font-size:16rem;}
    .story-culture-slider__desc {font-size:13rem;}
    .story-culture-slider__flag {max-width:45rem; margin-top:19rem;}
    html.android .story-culture__name {padding-top:2rem;}
    html.safari .story-culture__name:after {bottom:-4rem; border-top-width: 5rem; border-left-width: 3rem; border-right-width: 3rem;}

    .story-culture__item a {pointer-events: none;}
    .story-culture__item--sweden {left: -0.4%;top: 7%;z-index:10;}
    .story-culture__item--germany {left: 2%;top: 18%;}
    .story-culture__item--italy {left: 1.6%;top: 23.2%;}
    .story-culture__item--ethiopia {left: 7.3%;top: 39.5%;}
    .story-culture__item--china {left: 32%;top: 27%;}
    .story-culture__item--korea {left: 37.7%;top: 26%;}
    .story-culture__item--indonesia {left: 29.8%;top: 44%;}
    .story-culture__item--philippine {left: 32%;top: 38%;}
    .story-culture__item--mexico {right: 12.5%;top: 32%;}

    .mfp-gallery.story-culture__popup .mfp-figure .story-culture__food {padding-top:68.3%; margin:40rem auto 0;}
    .mfp-gallery.story-culture__popup .mfp-figure .story-culture__flag {width:60rem; padding-top:15%;margin-top:20rem;}


    /* **************************************** *
     * RESEARCH STORY
     * **************************************** */
    .article-story-research .story-section__deco-title {top:-68rem;}

    /* NATURE - INTRO */
    .article-smallscreen-menu + .story-nature-intro { padding-top:176rem; padding-bottom:66rem;}
    .story-nature-intro__content {height:240rem;}
    .story-nature-intro__txt {padding:0 40rem;}
    .story-nature-intro__txt p {font-size:18rem; line-height:1.6;}
    .story-nature-intro__txt p br {display:none;}
    .story-nature-intro__img:after {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: #000000;background: rgba(0, 0, 0, .1);}

    /* NATURE - STICKY */
    .story-nature-sticky .story-nature-sticky__title {padding:0 20rem;}
    .story-nature-sticky .story-section__head br.jt-smallscreen-br {display:block;}
    .story-nature__item {max-width:240rem;}

    /* NATURE - BANNER */
    .story-nature-banner__img {height:240rem; position:relative;}
    .story-nature-banner__img:after {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: #000000;background: rgba(0, 0, 0, .2); z}
    .story-nature-banner__content {padding:0 40rem; z-index:10;}
    .story-nature-banner__content b {font-size:24rem;}
    .story-nature-banner__content p {font-size:13rem;}
    .story-nature-banner__content p br {display:none;}

    /* SKINCARE */
    .story-skincare__slider {padding:10rem;}
    .story-skincare__circle {width: 242rem;height: auto; margin-top:auto;}
    .story-skincare__slider {width: 240rem;height: 240rem; }
    .story-skincare__list {position:relative; margin-top:15rem; padding-top:120rem;}
    .story-skincare__list > li {width:100%; text-align:center;  opacity:0; visibility:hidden; -webkit-transition: opacity .3s, visibility .3s;transition: opacity .3s, visibility .3s;}
    .story-skincare__list > li.active {opacity:1; visibility:visible;}
    .story-skincare__list > li:nth-child(1), .story-skincare__list > li:nth-child(2), .story-skincare__list > li:nth-child(3), .story-skincare__list > li:nth-child(4) {top:0; left:50%; transform:translateX(-50%)}
    .story-skincare__list > li:before { margin:0 auto 15rem; }
    .story-skincare__list > li:nth-child(1):before {float:none; background-position-x: -6rem;}
    .story-skincare__list > li:nth-child(2):before, .story-skincare__list > li:nth-child(3):before {background-position-x: 10rem;}
    .story-skincare__list > li:nth-child(4):before {float:none; background-position-x:0;}
    .story-skincare__ctrl button:nth-child(1) { left: 5.5%;}
    .story-skincare__ctrl button:nth-child(2) { right: 5.5%;}
    .story-skincare__ctrl button:nth-child(3) { right: 5.5%;}
    .story-skincare__ctrl button:nth-child(4) { left: 5.5%;}
    .story-skincare__list > li > button {text-align:center;}
    .story-skincare__list > li:nth-child(1) > button, .story-skincare__list > li:nth-child(4) > button {width:100%; text-align:center;}
    .story-skincare__list > li > button > b {font-size:16rem;}
    .story-skincare__list > li > button > b br {display:none}
    .story-skincare__list > li > button > p {font-size:13rem;}
    .story-skincare__ctrl button {width:9rem; height:9rem;}
    .story-skincare__ctrl button.swiper-pagination-bullet-active:before {width:12rem; height:12rem; border-width:1px;}

    html.ios .story-skincare__circle {width:244rem;}
    html.ios .story-skincare__slider {width: 242rem;height: 242rem; }

    /* PRODUCT */
    .story-product__banner {display:block;}
    .story-product__item + .story-product__item {margin-top:80rem;}
    .story-product__item:nth-child(odd) .story-product__banner {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
	.story-product__item:nth-child(odd) .story-product__img {-ms-flex-order: 1;-webkit-order: 1;-webkit-box-ordinal-group: 2;order: 1;}
	.story-product__item:nth-child(odd) .story-product__txt { -ms-flex-order: 2; -webkit-order: 2; -webkit-box-ordinal-group: 3; order: 2; }
    .story-product__item:nth-child(even) .story-product__banner {display:block;}
    .story-product__txt {display:block;width:100%; padding:30rem;}
    .story-product__txt b {font-size: 24rem;}
    .story-product__txt p {font-size:16rem; margin-top:20rem;}
    .story-product__txt span {font-size:13rem;}
    .story-product__img {display:block; width:100%;}
    .story-product__desc {margin-top:30rem;}
    .story-product__desc b + p {margin-top:10rem;}
    .story-product__desc b {font-size:18rem;}
    .story-product__desc p {font-size:13rem;}
    .story-product__desc p br {display:none;}
    .story-product__link .jt-btn__basic {min-width:150rem;}
    .story-product__link .jt-btn__basic + .jt-btn__basic {margin-left:16rem;}
    html.ios.safari .story-product__item:target:before {content: "";  display: block;  height: 180rem; margin-top: -180rem; visibility: hidden;}

}