@charset "utf-8";

/* ---------------------------------------
	max-width: 1024px
--------------------------------------- */

/************************************************************

     Layout | max-width: 1200px

************************************************************/

@media screen and (max-width: 1200px) {}/* max-width: 1200px */


/* ---------------------------------------
	max-width: 1024px
--------------------------------------- */

@media screen and (max-width: 1024px) {

    html { font-size:  16px; }

    .c-story__color .__item .__meta h3{
        font-size: 1.35em;
    }
    .c-story__color .__item .__meta p{
        font-size: .8em;
    }

    /* Special 限定カラー */
    .c-story__special .__head .__loft{
        width: 108px;
        height: 108px;
    }
    .c-story__special .__head .__leafs{
        width: 240px;
        height: 120px;
    }
    .c-story__special .__head .__limited p{
        font-size: 1.6em;
    }
    .c-story__special .__head h2{
        font-size: 2.8em;
    }
    .c-story__special .__column .__item .__meta h3{
        font-size: 1.35em;
    }
    .c-story__special .__column .__item .__meta p{
        font-size: .8em;
    }

}/* max-width: 1024px */


/* ---------------------------------------
	max-width: 800px
--------------------------------------- */

@media screen and (max-width: 800px) {

    html { font-size:  14px; }

    .comingsoon{
        width: 50%;
        height: 56px;
        line-height: 56px;
        left: 50%;
        bottom:-28px;
    }
    .comingsoon em{
        font-size: .9em;
    }

    /************************************************************

         Story

    ************************************************************/
    .c-story{
        position: relative;
        margin: 0 0 9.6vw;
    }
    .c-story__color{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 0 2.4vw;
        margin: 4.8vw auto;
    }
    .c-story__color .__item a{
        padding: 2.4vw;
    }
    .c-story__color .__item a:hover{
        background: none;
    }
    .c-story__color .__item.__posi{
        margin-top: 4.8vw;
    }
    .c-story__color .__item .__thumb{
        margin-bottom: 1.6vw;
    }
    .c-story__color .__item .__product{
        position: absolute;
        width: 30%;
        right: 3.6vw;
        bottom: 1.2vw;
    }
    .c-story__color .__item.__nega .__product{
        bottom: 6.0vw;
    }
    .c-story__color .__item .__meta{
        padding-left: 32px;
    }
    .c-story__color .__item .__meta::before{
        width: 24px;
        height: 24px;
        left: 0;
        top: 2px;
    }
    /* Special 限定カラー */
    .c-story__special{
        padding: 8.0vw 0 4.8vw;
    }
    .c-story__special .__head{
        margin: 0 0 2.4vw;
        text-align: center;
    }
    .c-story__special .__head .__loft{
        width: 72px;
        height: 72px;
    }
    .c-story__special .__head .__loft img{
        width: 100%;
    }
    .c-story__special .__head .__leafs{
        position: absolute;
        width: 180px;
        height: 90px;
    }
    .c-story__special .__head .__limited p{
        font-size: 1.5em;
        color: #7dadad;
        font-family: 'Yellowtail', cursive;
    }
    .c-story__special .__head h2{
        font-size: 2.4em;
    }
    .c-story__special .__column{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 0 2.4vw;
        margin: 4.8vw auto;
    }
    .c-story__special .__column .__item a{
        padding: 2.4vw;
    }
    .c-story__special .__column .__item a:hover{
        background: none;
    }
    .c-story__special .__column .__item.__posi{
        margin-top: 4.8vw;
    }
    .c-story__special .__column .__item .__thumb{
        margin-bottom: 1.6vw;
    }
    .c-story__special .__column .__item .__product{
        position: absolute;
        width: 30%;
        right: 3.6vw;
        bottom: 1.2vw;
    }
    .c-story__special .__column .__item.__nega .__product{
        bottom: 6.0vw;
    }
    .c-story__special .__column .__item .__meta{
        padding-left: 32px;
    }
    .c-story__special .__column .__item .__meta::before{
        width: 24px;
        height: 24px;
        left: 0;
        top: 2px;
    }

    /************************************************************

         Lineup

    ************************************************************/

    .c-lineup__items{
        justify-content: center;
    }
    .c-lineup__items .__item{
        width: 33.333%;
        margin-bottom: 3.6vw;
        text-align: center;
    }
    .c-lineup__items .__item figure img{
        width: 100%;
    }
    .c-lineup__items .__item h3{
        font-size: 1.2em;
    }
    .c-lineup__items .__item p{
        font-size: .7em;
    }

}/* max-width: 800px */


/* ---------------------------------------
	max-width: 600px
--------------------------------------- */

@media screen and (max-width: 600px) {

    /************************************************************

         Contents | General Settings

    ************************************************************/

    .content{
        position: relative;
        margin: 80px 0 0 0;
    }

    /************************************************************

         Hero

    ************************************************************/

    /*.c-hero{
        position: relative;
        margin: 0;
    }
    .c-hero__column{
        position: relative;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .c-hero .c-hero__ttl{
        width: 80vw;
        height: 21vw;
        right: 0;
        bottom: 48%;
    }
    .c-hero__column .c-hero__copy{
        position: relative;
        width: 100%;
        height: 48vw;
        background-size: cover;
        background-position: bottom;
    }
    .c-hero__column .c-hero__copy h2{
        width: 40vw;
        height: 25vw;
        left: 50%;
        top: 45%;
    }
    .c-hero__column .c-hero__img{
        width: 100%;
        height: 50vh;
        background-image: url(../images/c_hero_img.webp);
        background-size: cover;
        background-position: center center;
    }
	
    .comingsoon{
        width: 80%;
        height: 50px;
        line-height: 50px;
        left: 50%;
        bottom:-25px;
    }
    .comingsoon em{
        font-size: .85em;
    }*/
	.c-hero__pc{
    display: none;
}
.c-hero__sp{
    display: block;
}
        /************************************************************

        Topics

    ************************************************************/
    .c-topics__inner{
        padding: 12.8vw 5vw 0;
    }
    .c-topics .__body{
        padding: 1em;
    }
    .c-topics__items .__item .__column{
        flex-direction: column; 
    }
    .c-topics__items .__item .__thumb{
        width: 90%; 
        margin: 8% 0;
    }
    .c-topics__items .__item .__detail{
        width: 90%; 
    }
 
    .c-topics__items .__item .__txt p{
        font-size: .85em;
    }
	.c-topics__items .__item .__links{
		justify-content: space-between;
	}
    .c-topics__items .__item .__links li a{
        font-size:0.8em;
    }
    .c-topics__items .__item .__links li a::after{
    height: 1.5vw;
    right: 2vw;
    width: 1.5vw;
}
    

    /************************************************************

         About

    ************************************************************/
    .c-about{
        margin: -80px 0 12.8vw;
        padding-top: 80px;
    }
    .c-about__inner{
        padding: 19.2vw 6.4vw 14.4vw;
    }
    .c-about__inner::before{
        width: 10vw;
        height: 10vw;
        left: 0;
        bottom: 0;
    }
    .c-about__inner::after{
        width: 12vw;
        height: 12vw;
        right: 0;
        top: 0;
    }
    .c-about__head{
        position: relative;
        margin: 0 0 4.8vw;
    }
    .c-about__head h2{
        text-align: center;
        font-size: 1.4em;
        font-weight: 400;
    }
    .c-about__head h2 span{
        display: block;
        font-size: 0.9em;
        margin-bottom: .5em;
    }
    .c-about__body p{
        font-size: .85em;
        line-height: 2.0;
    }

    /************************************************************

         Story

    ************************************************************/
    .c-story{
        margin: -80px 0 12.8vw;
        padding-top: 80px;
    }
    .c-story__head{
        margin: 0 0 3.2vw;
        padding: 48px 6.4vw 0;
    }
    .c-story__head::before{
        width: 44px;
        height: 44px;
        margin-left: -22px;
    }
    .c-story__head h2{
        font-size: 1.4em;
    }
    .c-story__head h2 span{
        display: block;
        font-size: 0.9em;
        margin-bottom: .25em;
    }
    .c-story__body p{
        font-size: .85em;
        line-height: 2.0;
    }
    .c-story__color{
        width: 92%;
        margin: 2.4vw auto 9.6vw;
    }
    .c-story__color .__item{
        width: 100%;
        margin-top: 7.2vw;
    }
    .c-story__color .__item a{
        padding: 0vw;
    }
    .c-story__color .__item a:hover{
        background: none;
    }
    .c-story__color .__item.__posi{
        margin-top: 7.2vw;
    }
    .c-story__color .__item .__thumb{
        margin-bottom: 2.4vw;
    }
    .c-story__color .__item .__product{
        width: 30%;
        right: 1.2vw;
        bottom: 0;
    }
    .c-story__color .__item.__nega .__product{
        bottom: 0;
    }
    .c-story__color .__item .__meta{
        padding-left: 28px;
    }
    .c-story__color .__item .__meta::before{
        width: 20px;
        height: 20px;
        left: 0;
        top: 4px;
    }
    .c-story__color .__item .__meta p{
        font-size: .8em;
    }

    /* Special 限定カラー */
    .c-story__special{
        margin-top: calc(9.6vw + 36px);
        padding: 12.0vw 0 9.6vw;
    }
    .c-story__special .__head{
        margin: 0 0 2.4vw;
        text-align: center;
    }
    .c-story__special .__head .__loft img{
        width: 100%;
    }
    .c-story__special .__head .__leafs{
        position: absolute;
        width: 32vw;
        height: 16vw;
    }
    .c-story__special .__head .__limited p{
        font-size: 1.2em;
        color: #7dadad;
        font-family: 'Yellowtail', cursive;
    }
    .c-story__special .__head h2{
        font-size: 2.0em;
    }
    .c-story__special .__column{
        width: 92%;
        margin: 2.4vw auto 9.6vw;
    }
    .c-story__special .__column .__item{
        width: 100%;
        margin-top: 7.2vw;
    }
    .c-story__special .__column .__item a{
        padding: 0vw;
    }
    .c-story__special .__column .__item a:hover{
        background: none;
    }
    .c-story__special .__column .__item.__posi{
        margin-top: 7.2vw;
    }
    .c-story__special .__column .__item .__thumb{
        margin-bottom: 2.4vw;
    }
    .c-story__special .__column .__item .__product{
        width: 30%;
        right: 1.2vw;
        bottom: 0;
    }
    .c-story__special .__column .__item.__nega .__product{
        bottom: 0;
    }
    .c-story__special .__column .__item .__meta{
        padding-left: 28px;
    }
    .c-story__special .__column .__item .__meta::before{
        width: 20px;
        height: 20px;
        left: 0;
        top: 4px;
    }
    .c-story__special .__notice{
        margin: 3.2vw 6.4vw 0;
        text-align: left;
      }
      .c-story__special .__notice p{
        font-size: .8em;
      }

    /************************************************************

         Feature

    ************************************************************/
    .c-feature{
        margin: -80px 0 12.8vw;
        padding-top: 80px;
    }
    .c-feature__head{
        margin: 0 0 3.2vw;
        padding: 48px 6.4vw 0;
    }
    .c-feature__head h2{
        font-size: 1.4em;
    }
    .c-feature__head h2 span{
        display: block;
        font-size: 0.9em;
        margin-bottom: .25em;
    }
    .c-feature__body p{
        font-size: .85em;
        line-height: 2.0;
    }
    .c-feature__fullimg{
        margin: 6.4vw 0;
    }
    .c-feature__fullimg .__notice{
        width: 88%;
        margin: 2.4vw auto;
    }
    .c-feature__fullimg .__notice p{
        font-size: .7em;
        line-height: 1.8;
        padding: 1.2em;
        text-indent: -1.2em;
    }
    .c-feature__fig{
        margin: 0 0 9.6vw;
    }
    .c-feature__column{
        display: flex;
        flex-wrap: wrap;
        padding: 0 6.4vw;
        margin: 0 -3%;
    }
    .c-feature__column .__item{
        width: 44%;
        margin: 3%;
    }
    .c-feature__column .__item figure{
        margin-bottom: .75em;
    }
    .c-feature__column .__item p{
        font-size: .8em;
        line-height: 1.5;
    }

    /************************************************************

         Lineup

    ************************************************************/

    .c-lineup{
        margin: -80px 0 12.8vw;
        padding-top: 80px;
    }
    .c-lineup__head{
        margin: 0 0 3.2vw;
        padding: 48px 6.4vw 0;
    }
    .c-lineup__head h2{
        font-size: 1.4em;
    }
    .c-lineup__head h2 span{
        display: block;
        font-size: 0.9em;
        margin-bottom: .25em;
    }
    .c-lineup__body{
        flex-wrap: wrap;
    }
    .c-lineup__items{
        width: 100%;
        padding: 6vw;
    }
    .c-lineup__size{
        width: 100%;
        padding: 10vw;
    }
    .c-lineup__items .__item{
        width: 50%;
    }
    .c-lineup__probtn a::after{
        width: 1.5vw;
        height: 1.5vw;
        right: 3vw;
    }

    /************************************************************

         Related / E-Commerce Links

    ************************************************************/

    .c-related{
        width: 88%;
        margin: 9.6vw auto;
        padding: 4.8vw 3.2vw;
    }
    .c-related__column{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .c-related__column .__item{
        width: 100%;
    }
    .c-related__column .__item h3{
        font-size: 1.0em;
        text-align: center;
        margin-bottom: 3.6vw;
    }
    .c-ecommerce{
        width: 100%;
    }
    .c-ecommerce__head{
        text-align: center;
        margin-bottom: 2.4vw;
    }
    .c-ecommerce__head h3{
        font-size: 1.0em;
        margin-bottom: 4.8vw;
    }
    .c-ecommerce__column{
        display: flex;
        flex-wrap: wrap;
    }
    .c-ecommerce__column .__item{
        width: 80%;
        margin: 4vw 0;
    }
    .c-ecommerce__column .__item a{
        padding: 5vw;
    }
    .c-ecommerce__column .__item a::after{
        width: 1.5vw;
        height: 1.5vw;
        right: 3vw;
    }


    /************************************************************

         Popup

    ************************************************************/

    .c-popup__column::after{
        display: none;
    }
    .c-popup__column .__item{
        width: 100%;
    }
    .c-popup__column .__item .__txt{
        position: relative;
        padding: 7.2vw 0 7.2vw;
    }
    /*.c-popup__column .__item .__txt::before{
        width: 21vw;
        height: 21vw;
        left: 0;
        top: 0;
    }*/
   /* .c-popup__column .__item .__txt::after{
        position: absolute;
        content: "";
        display: block;
        width: 27vw;
        height: 27vw;
        bottom: 0;
        right: 0;
        background-image: url(../images/c_popup_bg_02.webp);
        background-repeat: no-repeat;
        background-size: 100%;
    }*/
    .c-popup__column .__item .__txt h1{
        font-size: 1.4em;
        margin-bottom: .25em;
    }
    .c-popup__column .__item .__txt h2{
        font-size: 1.0em;
        margin-bottom: 1.0em;
    }
    .c-popup__column .__item .__txt p{
        font-size: .8em;
        line-height: 1.6;
    }
    .c-popup__column .__item .__txt a{
    width: 50%;
}
    .c-popup__column .__item .__txt a::after{
    height: 1.5vw;
    right:3vw;
    width: 1.5vw;
}

}/* max-width: 600px */


/* ---------------------------------------
	max-width: 480px
--------------------------------------- */

@media screen and (max-width: 480px) {}/* max-width: 480px */


/* ---------------------------------------
	max-width: 320px
--------------------------------------- */

@media screen and (max-width: 320px) {
    html { font-size:  13px; }
}/* max-width: 320px */