.headertop {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 0;
    padding-top: 50%;
    color: #fff;
    background-color: #fff
}

.headertop .header-top-bg {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 50%;
    content: '';
    transition: 2s;
    background-image: url(/img/top/pc/visual-lash.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto
}

.headertop.mv-anime .header-top-bg {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0
}

.headertop img {
    width: 100%;
    max-width: inherit
}

.headertop .header-show {
    position: absolute;
    top: 0;
    left: 0;
    width: 36.95945945945946vw;
    height: 11.891891891891893vw
}

.headertop .header-show h1 img.mv-1st-in {
    -webkit-transform: translate(-100%,-100%);
    transform: translate(-100%,-100%)
}

.headertop .l-light-bg {
    position: absolute;
    top: 5.8vw;
    left: 0;
    overflow: hidden;
    width: 32.22972972972973vw;
    height: 37.16216216216216vw
}

.headertop .l-light-bg.mv-2nd-in {
    width: 0
}

.headertop .l-light-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 32.22972972972973vw
}

.headertop .l-bg {
    position: absolute;
    top: 5.8vw;
    left: 0;
    width: 32.22972972972973vw;
    height: 37.16216216216216vw
}

.headertop .l-bg img.mv-1st-in {
    -webkit-transform: translate(-100%,0);
    transform: translate(-100%,0)
}

.headertop .header-rash {
    position: absolute;
    top: 15.8vw;
    left: 0;
    width: 32.22972972972973vw;
    height: 27.22972972972973vw
}

.headertop .header-rash.mv-2nd-in {
    -webkit-transform: translate(-100%,-100%);
    transform: translate(-100%,-100%)
}

.headertop .header-rash .header-rash-inner {
    -webkit-transform: skewY(-7.28758deg);
    transform: skewY(-7.28758deg);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%
}

.headertop .header-rash .header-rash-mask {
    overflow: hidden
}

.headertop .header-rash .header-rash-mask-return {
    -webkit-transform: skewY(7.28758deg);
    transform: skewY(7.28758deg);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    background-image: url(/img/top/pc/header-rash-trai-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.headertop .header-liner {
    position: absolute;
    top: 0;
    right: 11.621621621621623vw;
    width: 20.06756756756757vw;
    height: 17.702702702702705vw
}

.headertop .header-liner.mv-2nd-in {
    -webkit-transform: translate(0,-100%);
    transform: translate(0,-100%)
}

.headertop .header-liner .header-liner-mask {
    overflow: hidden
}

.headertop .header-liner .header-liner-mask-return {
    background-image: url(/img/top/pc/header-liner-trai-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.headertop .r-light-bg {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    overflow: hidden;
    width: 33.851351351vw;
    height: 100%
}

.headertop .r-light-bg.mv-2nd-in {
    width: 0
}

.headertop .r-light-bg img {
    position: absolute;
    top: 0;
    right: 0;
    width: 33.851351351vw;
    max-width: inherit
}

.headertop .r-bg {
    position: absolute;
    top: 0;
    right: 12.77027027027027vw;
    width: 23.445945945945947vw;
    height: 29.256756756756758vw
}

.headertop .r-bg img.mv-1st-in {
    -webkit-transform: translate(0,-100%);
    transform: translate(0,-100%)
}

.headertop .mv-tt-wrap {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 100%
}

.headertop .mv-tt-wrap .mv-tt-wrap-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    transition: .7s
}

.headertop .mv-tt-wrap .mv-tt-wrap-bg.mv-anime-label {
    width: 0
}

.headertop .mv-tt-wrap .mv-tt-wrap-bg img {
    width: 100%;
    max-width: inherit
}

.headertop .mv-tt-wrap h2 {
    position: relative;
    z-index: 10;
    width: 21.891891891891895vw;
    height: 4.72972972972973vw;
    margin: 0 auto 4.594594594594595vw;
    text-align: center
}

.headertop .mv-tt-wrap h2 img.mv-4th-in {
    opacity: 0
}

.headertop .header-mascara {
    position: absolute;
    right: 17.22972972972973vw;
    bottom: 0;
    width: 21.554054054054056vw;
    height: 18.783783783783786vw
}

.headertop .header-mascara.mv-2nd-in {
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%)
}

.headertop .header-mascara .header-mascara-mask {
    overflow: hidden
}

.headertop .header-mascara .header-mascara-mask-return {
    background-image: url(/img/top/pc/header-mascara-trai-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.mv-slider {
    position: absolute;
    z-index: 111111;
    right: 0;
    bottom: 0;
    width: 160px;
    height: 350px;
    background-color: #200d00
}

.mv-slider .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 5px!important;
    opacity: .7;
    background-color: #ffe280
}

.mv-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
    position: relative;
    top: 1px;
    width: 8px;
    height: 8px;
    opacity: 1
}

.mv-slider .swiper-slide .click-content {
    display: block;
    overflow: hidden;
    height: calc(100% - 30px);
    text-decoration: none;
    color: #fff
}

.mv-slider .swiper-slide .thumb-wrap {
    -webkit-transform: skewX(-8.1301deg);
    transform: skewX(-8.1301deg);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.mv-slider .swiper-slide .thumb-mask {
    overflow: hidden
}

.mv-slider .swiper-slide .thumb {
    overflow: hidden;
    width: 160px;
    height: 140px;
    -webkit-transform: skewX(8.1301deg);
    transform: skewX(8.1301deg);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.mv-slider .swiper-slide .text-box {
    padding: 0 7px
}

.mv-slider .swiper-slide .text-box .ttl {
    font-size: 12px;
    line-height: 1.66;
    padding: 10px 0 20px
}

.mv-slider .swiper-slide .text-box time {
    font-size: 12px;
    margin-left: 3px
}

article {
    position: relative;
    z-index: 2
}

article:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 30%;
    content: '';
    background-color: #fff
}

.concept-sec{  
	background-color: #fff;
	position: relative;
    margin-bottom: 30.6vw;
    padding-bottom: .1vw;
    transition: 1.4s;
    opacity: 1;
	padding:40px 0 50px;
}
.concept-sec:before{position: absolute;
    z-index: -1;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    content: '';
    pointer-events: none;
    border-width: 0 1920px 268px 0;
    border-style: solid;
    border-color: transparent #fff 
}
.concept-lead{
	max-width: 1087px;
    margin: 0 auto 250px;
	text-align:center;
    font-family: 'Noto Serif JP', serif;
}

.concept-lead2{
	max-width: 1087px;
    margin: 100px auto 150px;
	text-align:center;
	font-family: 'Noto Serif JP', serif;
}
.concept-lead-no{
    margin: 100px auto 0px;
}

.concept-lead p,.concept-lead2 p{
	font-size:16px;	line-height:2.8;letter-spacing:2px;
}
.concept-lead h2,.concept-lead2 h2{
   font-size:40px;
   font-weight:normal;
   padding:2em 0 0;letter-spacing:2px;
}
.concept-lead h3,.concept-lead2 h3{
   font-size:30px;
   font-weight:normal;
   padding:2em 0 0;letter-spacing:2px;
}

.concept-lead2 span{
   font-size:30px;
   font-weight:normal;
   padding:1em 0 0;
  display:block;
}

.fadein {
  opacity: 0;
  transform : translate(0, 0px);
  transition : all 3500ms;
}
.fadein2 {
  opacity: 0;
  transform : translate(0, 0px);
  transition : all 4500ms;
}

.fadein.scrollin,.fadein2.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}

.concept-lead2 ul{display: flex; flex-wrap: wrap; justify-content: center;width:100%;padding:60px 100px 80px;}
.concept-lead2 li{width:20%;padding:0 1%;position:relative;}
.concept-lead2 li:first-child {width:23%;padding:0 2.5%;}
.concept-lead2 li p{font-size:12px;line-height:1.8;position:absolute;bottom:20px;left:50%;transform: translate(-50%,0%);}

.background {
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    position: fixed;
    background-position: center center;
    opacity: 0;
-webkit-background-size: cover;
        background-size: cover;
-webkit-transition: all 0.5s ease 0s;
   -moz-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
}
.show .background {
    opacity: 1;
}
.contents .wrap {
    padding: 40vh 0 60vh;
    position: relative;
    z-index: 2;
}
/* design*/
#content01_bg {background-image: url(/img/concept/concept-bg1.jpg);}
#content02_bg {background-image: url(/img/concept/concept-bg2.jpg);}
#content03_bg {background-image: url(images/woman-2711279_1920.jpg);}
#content01 .wrap { background-color: rgba(255,0,0,0);}
#content02 .wrap { background-color: rgba(0,255,0,0);}
#content03 .wrap { background-color: rgba(0,0,255,0.2);}
.text-box {
    padding: 50px 25px;
    width: 480px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
}
.text-box .catch {
    margin: 0 0 10px;
    font-size: 40px;
}
.text-box .copy {
    margin: 0;
    line-height: 2;
}

@media only screen and (min-width: 751px) and (max-width:1180px) {
    .headertop {
        padding-top:590px
    }

    .headertop .header-top-bg {
        padding-top: 590px
    }

    .headertop .header-show {
        width: 436.109px;
        height: 140.312px
    }

    .headertop .l-light-bg {
        top: 68.44px;
        width: 380.297px;
        height: 438.5px
    }

    .headertop .l-light-bg img {
        width: 380.297px
    }

    .headertop .l-bg {
        top: 68.44px;
        width: 380.297px;
        height: 438.5px
    }

    .headertop .header-rash {
        top: 186.44px;
        width: 380.297px;
        height: 321.297px
    }

    .headertop .header-liner {
        right: 137.135px;
        width: 236.797px;
        height: 208.891px
    }

    .headertop .r-light-bg {
        width: 399.438px
    }

    .headertop .r-light-bg img {
        width: 399.438px
    }

    .headertop .r-bg {
        right: 150.689px;
        width: 276.656px;
        height: 345.219px
    }

    .headertop .mv-tt-wrap h2 {
        width: 258.312px;
        height: 55.797px;
        margin: 0 auto 54.216px
    }

    .headertop .header-mascara {
        right: 203.311px;
        width: 254.328px;
        height: 221.641px
    }

    .item {
        margin: -62.54px 0;
        padding: 62.54px 0
    }

    .essence-wrap {
        margin-top: -121.54px
    }

    .news {
        margin-bottom: 361.08px;
        padding-bottom: 1.18px
    }

    .mv-tt-wrap-bg img,section.concept,section.essence {
        width: 1180px!important
    }
	
    .concept-sec {
        margin-bottom: 361.08px;
        padding-bottom: 1.18px
    }
	
	
}

@media only screen and (min-width: 751px) {
    .mv-slider {
        display:block!important
    }

    .mv-slider.mv-4th-in {
        -webkit-transform: translate(100%,0);
        transform: translate(100%,0)
    }

    .item-wrap .item-mask {
        background-color: #fff
    }

    .item .itemlist>a {
        transition: 1s;
        opacity: 1
    }

    .item.scroll-animetion .itemlist>a {
        opacity: 0!important
    }

    .item.scroll-animetion .itemlist>a:nth-of-type(1) {
        -webkit-transform: translate(0,20%);
        transform: translate(0,20%)
    }

    .item.scroll-animetion .itemlist>a:nth-of-type(2) {
        -webkit-transform: translate(0,40%);
        transform: translate(0,40%)
    }

    .item.scroll-animetion .itemlist>a:nth-of-type(3) {
        -webkit-transform: translate(0,60%);
        transform: translate(0,60%)
    }

    .item.scroll-animetion .itemlist>a:nth-of-type(4) {
        -webkit-transform: translate(0,80%);
        transform: translate(0,80%)
    }

    .item .ttl-box {
        top: inherit!important
    }

    .item .itemlist .itemlist-item {
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% auto;
        box-shadow: 0 0 4px 0 rgba(4,0,0,.3)
    }

    .item .itemlist .itemlist-item .item-ttl {
        position: relative
    }

    .item .itemlist .itemlist-item .item-ttl:before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        content: '';
        background-size: 100% auto
    }

    .item .itemlist .itemlist-item:hover {
        margin-top: -124px;
        padding-bottom: 124px;
        transition: .5s;
        transition-property: padding-bottom,margin-top
    }

    .item .itemlist .itemlist-item:hover .item-ttl:before {
        bottom: -124px;
        height: 324px;
        transition: .5s;
        transition-property: height
    }

    .item .itemlist .itemlist-item:hover .item-ttl img {
        transition: .5s;
        opacity: 0
    }

    .item .itemlist .itemlist-item .item-hover {
        display: block;
        transition: .5s;
        opacity: 0
    }

    .item .itemlist .itemlist-item .item-hover:hover {
        opacity: 1
    }

    .item .itemlist .itemlist-item.neck .item-ttl:before {
        background-image: url(/img/top/pc/item-active-neck.png)
    }

    .item .itemlist .itemlist-item.neck:hover {
        background-image: url(/img/top/pc/item-active-neck-item-bg.png)
    }

    .item .itemlist .itemlist-item.lash:hover .item-ttl:before {
        background-image: url(/img/top/pc/item-active-lash.png)
    }

    .item .itemlist .itemlist-item.lash:hover .item-hover {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    .item .itemlist .itemlist-item.liner:hover .item-ttl:before {
        background-image: url(/img/top/pc/item-active-liner.png)
    }

    .item .itemlist .itemlist-item.liner:hover .item-hover {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    .item .itemlist .itemlist-item.mascara:hover .item-ttl:before {
        background-image: url(/img/top/pc/item-active-mascara.png)
    }

    .item .itemlist .itemlist-item.mascara:hover .item-hover {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg)
    }

    .item .itemlist .itemlist-item:hover .item-hover {
        display: block
    }

    .sp-fixed-item-bg {
        display: none!important
    }
	
    section.hugstone:after {
        position: absolute;
        z-index: -1;
        bottom: 100%;
        left: 0;
        width: 100%;
        height: 500px;
        content: '';
        background-color: #fff
    }

    section.hugstone .read-tt {
        width: 297.5px
    }

    section.hugstone .detail-ttl img {
        width: 464px
    }

    section.hugstone .stone-section .stone-info dd .info-list,section.hugstone .stone-section .stone-info dd .info-ttl {
        -webkit-transform: translate(0,20px);
        transform: translate(0,20px)
    }
	
}

@media only screen and (max-width: 750px) {
    article {
        background-color:#fff;
    }

    .headertop {
        width: 100%;
        height: 0;
        padding-top: 740px
    }

    .headertop .header-top-bg {
        width: 100%;
        height: 0;
        padding-top: 740px;
        background-image: url(/img/top/pc/visual-lash.png);
        background-size: 1480px auto
    }

    .headertop .header-show {
        width: 547px;
        height: inherit
    }

    .headertop .l-light-bg {
        top: 333px;
        width: 240px;
        height: 248px
    }

    .headertop .l-light-bg img {
        width: 240px
    }

    .headertop .l-bg {
        position: absolute;
        top: 333px;
        width: 240px;
        height: 276px
    }

    .headertop .header-rash {
        position: absolute;
        top: 406px;
        left: 0;
        width: 240px;
        height: 202px
    }

    .headertop .header-liner {
        right: -20px;
        width: 149px;
        height: 130px
    }

    .headertop .r-light-bg {
        overflow: hidden;
        width: 148px;
        height: 100%
    }

    .headertop .r-light-bg img {
        width: 148px;
        max-width: inherit
    }

    .headertop .r-bg {
        right: -12px;
        width: 176px;
        height: 220px
    }

    .headertop .mv-tt-wrap .mv-tt-wrap-bg img {
        position: relative;
        left: 50%;
        width: 1480px!important;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }

    .headertop .mv-tt-wrap h2 {
        width: 100%;
        height: inherit;
        margin: 0 auto 42px
    }

    .headertop .mv-tt-wrap h2 img {
        width: 541px
    }

    .headertop .header-mascara {
        right: 22px;
        bottom: 237px;
        width: 160px;
        height: 140px
    }

    .mv-slider {
        z-index: 1000;
        top: calc(100vh - 220px);
        right: 0;
        left: 0;
        visibility: hidden;
        overflow: hidden;
        width: 650px;
        height: 210px;
        margin: 0 auto;
        opacity: 0;
        background-color: rgba(0,0,0,0)
    }

    .mv-slider.scroll-slider {
        -webkit-transform: translate(200%,0);
        transform: translate(200%,0)
    }

    .mv-slider:before {
        position: absolute;
        z-index: 5;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 5px;
        content: '';
        background-color: #200d00
    }

    .mv-slider .swiper-pagination-bullets {
        padding-right: 16px;
        text-align: right!important
    }

    .mv-slider .swiper-pagination-bullet {
        margin: 0 6px!important
    }

    .mv-slider .swiper-slide {
        box-sizing: content-box;
        padding: 20px 0 0
    }

    .mv-slider .swiper-slide .click-content {
        position: relative;
        display: flex;
        overflow: inherit;
        height: 190px;
        background-color: #200d00;
        justify-content: space-between;
        align-items: flex-start
    }

    .mv-slider .swiper-slide .click-content:before {
        position: absolute;
        top: 0;
        left: 100%;
        width: 10px;
        height: 100%;
        content: '';
        background-color: #200d00
    }

    .mv-slider .swiper-slide .thumb-wrap {
        position: relative;
        top: -20px;
        width: 220px;
        height: 200px;
        -webkit-transform: skewX(-8.1301deg);
        transform: skewX(-8.1301deg);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0
    }

    .mv-slider .swiper-slide .thumb-mask {
        overflow: hidden
    }

    .mv-slider .swiper-slide .thumb {
        width: 220px;
        height: 200px;
        -webkit-transform: skewX(8.1301deg);
        transform: skewX(8.1301deg);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0
    }

    .mv-slider .swiper-slide .text-box {
        padding: 0 7px
    }

    .mv-slider .swiper-slide .text-box .ttl {
        font-size: 26px;
        line-height: 1.46;
        padding: 16px 26px 0
    }

    .mv-slider .swiper-slide .text-box time {
        font-size: 24px;
        font-weight: 700;
        margin-left: 0;
        color: #c49a3b
    }

    .concept {
        position: relative;
        height: 920px;
        background-image: url(/img/top/sp/visual-neck.png);
        background-size: 100% auto
    }

    .concept .container {
        padding: 30px 0 0
    }

    .concept h2 {
        top: 185px;
        left: 0;
        width: 100%;
        text-align: center
    }

    .concept .kamiwaza-wrap {
        width: 704px;
        height: 680px;
        background-image: url(/img/top/sp/concept-maru.png)
    }

    .concept .kamiwaza-wrap .inner {
        margin-left: 41px;
        padding-top: 222px
    }

    .concept .kamiwaza-wrap p {
        width: 100%;
        margin: 60px auto 0;
        text-align: center
    }

    .concept .kamiwaza-wrap .lavel {
        font-size: 32px;
        position: absolute;
        bottom: -210px;
        left: 0;
        width: 100%;
        height: 180px;
        background-image: url(/img/top/sp/concept-lavel-bg.png)
    }

    .item-wrap,.item-wrap .item {
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0
    }

    .item-wrap .mascara-wrap {
        height: 950px!important
    }

    .item .bg-box {
        display: none!important
    }

    .item .itemlist .itemlist-item-wrap {
        box-shadow: 0 0 4px 0 rgba(4,0,0,.3)
    }

    .item {
        margin: -5.3vw 0;
        padding: 5.3vw 0;
        background-image: none
    }

    .item .container {
        overflow: hidden;
        padding: 0
    }

    .item .ttl-box {
        z-index: 10;
        top: 62px;
        right: 149px;
        width: 136px
    }

    .item .ttl-box h2 {
        width: 100%;
        margin-bottom: 65px
    }

    .item .ttl-box h3 {
        width: 74px
    }

    .item .itemlist {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap
    }

    .item .itemlist .itemlist-item-wrap {
        position: relative;
        width: 100%;
        height: 750px;
        padding: 62px 0 72px;
        transition: 0s;
        background-size: cover;
        box-shadow: none
    }

    .item .itemlist .itemlist-item-wrap:nth-of-type(2),.item .itemlist .itemlist-item-wrap:nth-of-type(3),.item .itemlist .itemlist-item-wrap:nth-of-type(4) {
        margin-top: 0
    }

    .item .itemlist .itemlist-item {
        position: absolute;
        top: 204px;
        left: 80px;
        width: 276px;
        height: 476px;
        box-shadow: 0 0 4px 0 rgba(4,0,0,.3)
    }

    .item .itemlist .itemlist-item.neck {
        background-image: url(/img/top/pc/item-card-neck.png);
        background-image: url(/img/top/pc/item-active-neck-item-bg.png);
        background-position: center bottom;
        background-size: contain
    }

    .item .itemlist .itemlist-item.neck .item-ttl {
        height: 324px;
        margin-top: -124px;
        padding-top: 80px;
        background-image: url(/img/top/pc/item-active-neck.png);
        background-size: 100% auto;
        align-items: flex-start
    }

    .item .itemlist .itemlist-item.lash {
        background: auto 276px;
        background-image: url(/img/top/pc/item-eyelashs-lash.png);
        background-repeat: no-repeat;
        background-position: left bottom
    }

    .item .itemlist .itemlist-item.lash .item-hover {
        bottom: 29px
    }

    .item .itemlist .itemlist-item.lash .item-ttl {
        height: 325px;
        margin-top: -125px;
        padding-top: 64px;
        background-image: url(/img/top/pc/item-active-lash.png);
        background-size: 100% auto;
        align-items: flex-start
    }

    .item .itemlist .itemlist-item.liner {
        background: auto 276px;
        background-image: url(/img/top/pc/item-eyelashs-liner.png);
        background-repeat: no-repeat;
        background-position: left bottom
    }

    .item .itemlist .itemlist-item.liner .item-hover {
        bottom: 22px
    }

    .item .itemlist .itemlist-item.liner .item-ttl {
        height: 324px;
        margin-top: -124px;
        padding-top: 60px;
        background-image: url(/img/top/pc/item-active-liner.png);
        background-size: 100% auto;
        align-items: flex-start
    }

    .item .itemlist .itemlist-item.mascara {
        background: auto 276px;
        background-image: url(/img/top/pc/item-eyelashs-mascara.png);
        background-repeat: no-repeat;
        background-position: left bottom
    }

    .item .itemlist .itemlist-item.mascara .item-hover {
        bottom: 42px
    }

    .item .itemlist .itemlist-item.mascara .item-ttl {
        height: 325px;
        margin-top: -125px;
        padding-top: 60px;
        background-image: url(/img/top/pc/item-active-mascara.png);
        background-size: 100% auto;
        align-items: flex-start
    }

    .item .itemlist .itemlist-item .item-hover {
        position: absolute;
        right: 0;
        left: 0;
        margin: 0 auto
    }

    .item .itemlist .item-ttl {
        display: flex;
        height: 200px;
        background-image: url(/img/top/pc/item-ttl-bg.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        justify-content: center;
        align-items: center
    }

    .item .itemlist .item-ttl img {
        display: none;
        width: 220px
    }

    .essence {
        padding: 147px 0 75px;
        background-color: #c2993b;
        background-image: url(/img/top/pc/essence-bg.png);
        background-size: 1480px auto
    }

    .essence h2 {
        width: 100%;
        margin: 0 auto 105px;
        text-align: center;
        color: #fff
    }

    .essence .essence-corners {
        max-width: 690px;
        height: 1100px;
        margin: 0 auto;
        padding: 24px;
        background-image: url(/img/top/sp/essence-corners-.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover
    }

    .essence .essence-corners .pear-w {
        position: absolute;
        display: inline-block
    }

    .essence .essence-corners .pear-w.pear-w-center,.essence .essence-corners .pear-w.pear-w-left,.essence .essence-corners .pear-w.pear-w-right {
        width: 80px
    }

    .essence .essence-corners .pear-w.pear-w-right {
        top: -39px;
        right: 57px
    }

    .essence .essence-corners .pear-w.pear-w-center {
        top: 256px;
        right: 192px
    }

    .essence .essence-corners .pear-w.pear-w-left {
        bottom: -30px;
        left: 83px
    }

    .essence .essence-corners .pear-p {
        position: absolute;
        top: 190px;
        left: 190px;
        width: 168px
    }

    .essence .essence-corners .inner {
        padding-top: 43px
    }

    .essence .essence-corners .ttl {
        width: 100%;
        margin: 0 auto
    }

    .essence .essence-corners h3 {
        margin: 65px auto 190px
    }

    .essence .essence-corners .tt {
        width: 95%;
        margin: 0 auto
    }

    .news {
        margin-bottom: 520px;
        padding-bottom: 2px;
        background-image: url(/img/top/sp/news-bg-shadow.png)
    }

    .news:before {
        top: calc(100% - 2px)
    }

    .news h2 {
        width: auto;
        padding: 95px 0 100px;
        text-align: center
    }

    .news .newslist {
        max-width: 650px
    }

    .news .newslist-item {
        max-width: 100%;
        margin-bottom: 60px
    }

    .news .newslist-item:nth-of-type(2) {
        transition-delay: .1s
    }

    .news .newslist-item:nth-of-type(3) {
        transition-delay: .2s
    }

    .news .newslist-item:nth-of-type(4) {
        transition-delay: .3s
    }

    .news .newslist-item:nth-of-type(2n-1) {
        margin-right: 0
    }

    .news .newslist-item .thumb-wrap {
        width: 220px;
        height: 200px;
        margin-top: -20px
    }

    .news .newslist-item .text-box {
        position: relative;
        width: calc(100% - 220px);
        height: 100%
    }

    .news .newslist-item .text-box h3 {
        font-size: 26px;
        line-height: 1.4;
        overflow: hidden;
        box-sizing: content-box;
        height: calc(1.4 * 3em);
        padding: 20px 30px 0;
        text-overflow: ellipsis
    }

    .news .newslist-item .text-box time {
        font-size: 24px;
        position: absolute;
        bottom: 9px;
        left: 0
    }

    .news .more-btn {
        width: 240px;
        height: 80px
    }

    .news .more-btn img {
        width: auto
    }

    .concept-wrap,.essence-wrap,section.news {
        z-index: 10
    }

    .essence-wrap {
        margin-top: 0!important
    }
	
section.hugstone {
        position: relative;
        z-index: -1;
        margin-bottom: 20px;
        padding: 125px 0 200px
    }

    section.hugstone .read-tt {
        width: 100%;
        margin: 56px auto 0;
        text-align: center
    }

    section.hugstone .hugstone-main-wrap {
        max-width: 698px;
        margin: 52px auto 0;
        flex-wrap: wrap;
        justify-content: center
    }

    section.hugstone .hugstone-main-wrap .hogstone-main-box {
        width: 100%;
        margin-bottom: 80px;
        text-align: center
    }

    section.hugstone .hugstone-main-wrap .hogstone-main-box h3 {
        margin-bottom: 25px
    }

    section.hugstone .hugstone-main-wrap .hogstone-main-box .tt {
        font-size: 26px;
        line-height: 1.84
    }

    section.hugstone .detail-ttl {
        margin: 0 auto 55px
    }

    section.hugstone .stone-section {
        max-width: calc(100% - 80px);
        margin: 0 auto;
        transition: .8s
    }

    section.hugstone .stone-section h3 {
        width: 200px;
        height: 548px;
        background-image: url(/img/hugstone/sp/hugstone_goldbox.jpg)
    }

    section.hugstone .stone-section .stone-info dt {
        top: 0;
        left: 0;
        width: 64px;
        height: 64px
    }

    section.hugstone .stone-section .stone-info dt:before {
        width: 100%;
        height: 100%;
        -webkit-animation: none;
        animation: none;
        border-width: 6px
    }

    section.hugstone .stone-section .stone-info dd .info-list,section.hugstone .stone-section .stone-info dd .info-ttl {
        visibility: initial;
        opacity: 1
    }

    section.hugstone .stone-section .stone-info dd .info-lavel {
        font-size: 28px;
        position: relative;
        z-index: 2;
        height: 46px;
        padding: 0 15px
    }

    section.hugstone .stone-section .stone-info dd .info-ttl {
        font-size: 28px
    }

    section.hugstone .stone-section .stone-info dd .info-list {
        font-size: 24px
    }

    section.hugstone .stone-section .stone-info dd .info-list li {
        margin-bottom: 0
    }

    section.hugstone .stone-section.incarose h3 {
        float: right
    }

    section.hugstone .stone-section.incarose h3 img {
        width: 120px
    }

    section.hugstone .stone-section.incarose h4 {
        float: left;
        width: 226px;
        margin: 100px 0 0 0
    }

    section.hugstone .stone-section.incarose .stone-this {
        float: left;
        margin: -14px 0 0 0
    }

    section.hugstone .stone-section.incarose .stone-info {
        top: 330px;
        left: calc(100% - 12px)
    }

    section.hugstone .stone-section.incarose .stone-info dd {
        top: 133px;
        right: 157px;
        left: auto
    }

    section.hugstone .stone-section.incarose .stone-info dd .info-ttl {
        margin: 16px 0 16px 16px
    }

    section.hugstone .stone-section.incarose .stone-info dd .info-list {
        margin: 0 0 0 18px
    }

    section.hugstone .stone-section.incarose .stone-info dd .info-line {
        top: -92px;
        left: calc(100% - 98px)
    }

    section.hugstone .stone-section.pearl {
        margin-top: 248px
    }

    section.hugstone .stone-section.pearl h3 {
        float: right
    }

    section.hugstone .stone-section.pearl h3 img {
        width: 122px
    }

    section.hugstone .stone-section.pearl h4 {
        position: relative;
        z-index: 3;
        float: left;
        width: 226px;
        margin: 160px 0 0 0
    }

    section.hugstone .stone-section.pearl .stone-this {
        left: -50px;
        float: left;
        margin: -126px 0 0 0
    }

    section.hugstone .stone-section.pearl .stone-info {
        bottom: 9px;
        left: -93px
    }

    section.hugstone .stone-section.pearl .stone-info dd {
        top: 191px;
        left: 137px
    }

    section.hugstone .stone-section.pearl .stone-info dd .info-lavel {
        margin: -129px 0 0
    }

    section.hugstone .stone-section.pearl .stone-info dd .info-ttl {
        margin-left: 6px
    }

    section.hugstone .stone-section.pearl .stone-info dd .info-list {
        margin: -42px 0 0 75px
    }

    section.hugstone .stone-section.pearl .stone-info dd .info-line {
        top: -150px;
        left: -104px
    }	

    .sp-fixed-item-ttl {
        position: fixed;
        z-index: 1;
        top: 62px;
        right: 149px
    }

    .sp-fixed-item-bg {
        position: fixed;
        z-index: 0;
        top: 0;
        left: 0;
        display: none;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: auto 100vh
    }

    .sp-fixed-item-bg:nth-of-type(2) {
        background-position-x: 82%
    }

    .sp-fixed-item-bg:nth-of-type(4) {
        background-position-x: 82%
    }
	
.concept-sec{ ; 
position: relative;
    margin-bottom: 520px;
    padding-bottom: .1vw;
    transition: 1.4s;
    opacity: 1;
	padding:40px 3.5em 50px;
	background-color:transparent;
}
.concept-sec:before{position: absolute;
    z-index: -1;
    top: calc(100% - 2px);
    left: 0;
    width: 0;
    height: 0;
    content: '';
    pointer-events: none;
    border-width: 0 1920px 568px 0;
    border-style: solid;
    border-color: transparent #fff 
}
.concept-lead{
	max-width: 100%;
    margin: 0 auto 150px;
	text-align:center;
}

.concept-lead2{
	max-width: 100%;
    margin: 0 auto 120px;
	text-align:center;
}

.concept-lead p,.concept-lead2 p{
	font-size:26px;	line-height:2.2;letter-spacing:1px;
}
.concept-lead h2,.concept-lead2 h2{
   font-size:46px;
   font-weight:normal;
   padding:1em 0 0;letter-spacing:1px;
}
.concept-lead h3,.concept-lead2 h3{
   font-size:36px;
   font-weight:normal;
   padding:1em 0 0;letter-spacing:1px;
  line-height:2.2;
}

.concept-lead2 span{
   font-size:36px;
   font-weight:normal;
   padding:1em 0 0;
   display:block;
   line-height:2.2;
}

.fadein {
  opacity: 0;
  transform : translate(0, 0px);
  transition : all 4500ms;
}
.fadein2 {
  opacity: 0;
  transform : translate(0, 0px);
  transition : all 5500ms;
}

.fadein.scrollin,.fadein2.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}

.concept-lead2 ul{display: flex; flex-wrap: wrap; justify-content: center;width:100%;padding:80px 0 50px;}
.concept-lead2 li{width:23%;padding:0 0 0 2%;margin-bottom:0em;}
.concept-lead2 li:first-child {width:23%;padding:0 2% 0 0;}
.concept-lead2 li p{font-size:24px;ine-height:1.8;}	
}