@charset "UTF-8";
/* ==================================================
COMMON
================================================== */
.noMain{
    background: #fff;
}

.noMain #glbMenu .sideSct{
    width: auto;
}
#glbMenu .logoSct{
    height: 60px;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    background: none;
    -webkit-transition: .3s ease;
    transition: .3s ease;
    width: auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#glbMenu .logoSct a{
    padding: 0;
    -webkit-transition: .3s opacity ease;
    transition: .3s opacity ease;
}

.appMenu.scDown #hdrSctn{
    opacity: inherit;
    z-index: 10;
}

.hdrOn.appMenu #hdrSctn{
    opacity: 1;
    z-index: 1;
}

.hdrOn.appMenu #hdrSctn .sideSct,.hdrOn.appMenu #hdrSctn .tagSct{
    opacity: 0;
    z-index: auto;
    -webkit-transition: .3s opacity ease;
    transition: .3s opacity ease;

}

.hdrOn.appMenu.scUp #hdrSctn .sideSct,
.hdrOn.appMenu.scUp #hdrSctn .tagSct,
.hdrOn.appMenu.scUp #glbMenu::after{
    opacity: 1;
}

.hdrOn.appMenu #glbMenu .logoSct{
    opacity: 1;
}
.hdrOn.fixHdr #glbMenu .sideSct,.hdrOn.fixHdr #glbMenu .tagSct{
    opacity: 1;
    z-index: auto;
}

@media screen and (min-width: 641px) {

    #hdrSctn .menu-trigger,#hdrSctn .srchTrg svg{
        color: #fff;
        fill:#fff;
    }
    .hdrOn #hdrSctn .menu-trigger,
    .hdrOn #hdrSctn .srchTrg svg,
    .navion #hdrSctn .menu-trigger,
    .navion #hdrSctn .srchTrg svg{
        color: #2D2D2F;
        fill:#2D2D2F;
    }

    #glbMenu .logoSct{
        height: 72px;
        top: 15px;
    }

    #glbMenu .logoSct a{
        padding: 0;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .hdrOn.fixHdr #glbMenu .logoSct{
        opacity: 1;
    }
    .hdrOn.appMenu.scUp #glbMenu::after{
        opacity: 0;
    }
}
@media screen and (min-width: 961px) {
#glbMenu{
    top: auto;
    bottom: 0;
}

}

#mainArea {
    top: 0;
    left: 0;
    right: 0;
    width: 95%;
    height: 100%;
    padding: 60px 0 0;
    margin: 0 auto;
    position: fixed;
    opacity: 1;
    z-index: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-flow: column-reverse;
    flex-flow: column-reverse;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

#mainArea.mainhide {
    display: none;
}

.collectionArea {
    position: relative;
    padding: 0;
    margin-top: 100vh;
    width: 100%;
    background: #ffffff;
    padding: 40px 0;
}

.contsBlk:not(:last-of-type) {
    margin: 0 auto 100px;
}

.scrollArrow{
    bottom: auto;
    top: -100px;
}
.areaBlk + .areaBlk{
    margin-top: 80px;
}

.fadeOut.slideIn img{
    -webkit-animation: zoomAnim 600ms ease-in-out;
    animation: zoomAnim 600ms ease-in-out;
}


@-webkit-keyframes zoomAnim {
    0% {
        -webkit-transform: scale(0.96);
        transform: scale(0.96);
    }
    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}


@keyframes zoomAnim {
    0% {
        -webkit-transform: scale(0.96);
        transform: scale(0.96);
    }
    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

.popOn{
    overflow: hidden;
    height: 100%;
}

#mainArea .logoSet{
    height: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

}
#mainArea .mainImgSet{
    height: calc(100% - 80px);
    margin: 0;

}

#mainArea .logoSet svg{
    width: 13.6em;
    height: 3.0em;
}
.mainImgSet .mainImg{
    height: 100%;
}


@media screen and (min-width: 641px) {
#mainArea {
    top: 0;
    padding: 15px 0;
    width: calc(100% - 30px);
}
    #mainArea .mainImgSet{
        height: calc(100% - 30px);
        margin: 0;

    }

.mainImgSet .mainImg {
    height: 100%;
    background-size: cover;
    background-position: top;
}
    #mainArea .logoSet {
        position: fixed;
        top: 80vh;
        z-index: 10;
        left: 0;
        right: 0;
    }
    #mainArea .logoSet svg {
        width: 213px;
        height: 47px;
        fill: #fff;
    }

}
@media screen and (min-width: 961px) {

.collectionArea {
    padding: 5vw 0 120px;
}
.areaBlk + .areaBlk{
    margin-top: 120px;
}
    #mainArea {
    top: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    }
    .popOn{
        height: auto;
        overflow-y: auto;
    }

    #mainArea .logoSet svg {
        width: 175.72px;
        height: 39.37px;
    }

}
@media screen and (min-width: 1281px) {

}
/* ==================================================
main
================================================== */

.spBk{
    color: #333333;
}
.spWh{
    color: #ffffff;
}
.spBk .miTxt .tsMore{
    border-bottom: 1px solid #333333;
}
.spWh .miTxt .tsMore{
    border-bottom: 1px solid #ffffff;
}

@media screen and (min-width: 961px) {
.pcBk{
    color: #333333;
}
.pcWh{
    color: #ffffff;
}
.pcBk .miTxt .tsMore{
    border-bottom: 1px solid #333333;
}
.pcWh .miTxt .tsMore{
    border-bottom: 1px solid #ffffff;
}
    #mainArea .mainImgSet{
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .mainImgSet .mainImg{
        height: 96vh;
        background-size: cover;
        background-position: top;
    }
    #mainArea .logoSet{
        position: absolute;
        top: 38%;
        left: 12%;
        right: auto;
        z-index: 10;
    }
}


/* ==================================================
collection
================================================== */

.lineBlk{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 0 auto;
}

.colSet{
    margin: 0 auto 20px;
    position: relative;
    min-width: 0;
    max-width: 100%;
}
.colImgSet{
    margin: 0 auto;
    width: 92%;
    overflow: hidden;
    padding: 0 0 20px;
}
@media screen and (min-width: 641px) {
    .colSet{
        margin: 0 auto 60px;
    }
    .colImgSet{
        padding: 0 0 30px;
    }

}
@media screen and (min-width: 961px) {
    .lineBlk{
        width: 95vw;
    }
    .colSet{
        margin: 0;
    }
    .colImgSet{
        margin: 0 ;
        width: 100%;
        padding: 0 0 10px;
    }
}



.colSet .colTxtSet{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: 92%;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.cBtn{
    position: relative;
    padding: 0 0 0 1.4em;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1;
}
.cBtn::before, .cBtn::after {
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    display: inline-block;
    width: 10px;
    height: 1px;
    background: #999999;
    -webkit-transition: .3s opacity ease;
    transition: .3s opacity ease;
}
.cBtn:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.creditOn .cBtn{
    position: absolute;
    left: 0.6em;
    top: 1.0em;
    font-size: 2.4rem;
    color: #ffffff;
    padding: 0;
    width: 90px;
    text-align: left;
}

.creditOn .cBtn::before,.creditOn .cBtn::after{
    top: 50%;
    left: auto;
    -webkit-transform: translate(0,0)rotate(-45deg);
    transform: translate(0,0)rotate(-45deg);
    right: 0;
    width: 20px;
    background: #ffffff;
}
.creditOn .cBtn::after{
    right: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

 .creditTxt{
    opacity: 0;
     display: none;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-flow: column;
     flex-flow: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     position: absolute;
     top: 50vh;
     width: 100%;
     left: 0;
     -webkit-transform: translate(0,-50%);
     transform: translate(0,-50%);
     color: #ffffff;
     -webkit-transition: .3s opacity ease;
     transition: .3s opacity ease;
}
.creditOn .creditTxt{
    opacity: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.creditOn .creditTxt li{
    line-height: 1;
    font-weight: 200;
}
.creditOn .creditTxt li+li{
    margin: 2em auto 0;
}
.creditOn .creditTxt li a{
    display: inline-block;
    width: auto;
    position: relative;
    padding: 0 30px;

}
.creditOn .creditTxt li a::after{
    width: 20px;
    content: url("/common/img/cart_w.svg");
    height: 20px;
    position: absolute;
    right: 0;
    top: 60%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

.colTxtSet::before{
    content: "";
    width: 100vw;
    height: 100vh;
    background: rgba(105,105,105,0);
    position: fixed;
    top: 0;
    z-index: -1;
    opacity: 0;
    right: 100vw;
    -webkit-transition: .3s opacity ease;
    transition: .3s opacity ease;
}
.creditOn.colTxtSet::before{
    background: rgba(105,105,105,.93);
    z-index: 0;
    opacity: 1;
    right: 0;
    -webkit-transition: .3s opacity ease;
    transition: .3s opacity ease;
}

.creditOn.colTxtSet{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 10000;
}



@media screen and (min-width: 641px) {
    .creditOn .cBtn{
        position: absolute;
        left: 1.6em;
        top: 2.35em;
        font-size: 1.6rem;
    }

    .creditOn .creditTxt li a::after{
        top: 50%;
    }
}
    @media screen and (min-width: 961px) {
        .colSet .colTxtSet{
            width: 100%;
            position: relative;
        }
        .creditOn.colTxtSet{
            position: relative;
            height: auto;
        }
        .colSet .cBtn {
            left: 0;
            padding: 0;
            margin: 0;
            width: 68px;
            height: 1.0rem;
            top: 0;
            cursor: pointer;
            font-size: 1.0rem;
            letter-spacing: 0.1em;
        }
        .creditOn .colSet .cBtn {
            width: 40px;
        }
        .colTxtSet::before{
            content: none;
        }
        .creditOn .cBtn{
            color: #808080;
            position: relative;
            font-size: 0;
            text-align: center;
        }

        .cBtn::before, .cBtn::after {
            width: 9px;
        }
        .cBtn:after {
        }
        .creditOn .cBtn::before,.creditOn .cBtn::after{
            right: auto;
            left: 0;
            width: 9px;
            background: #999999;
        }
        .creditOn .cBtn::after{
            right: auto;
        }
    .creditTxt{
        width: calc(100% - 90px);
        -ms-flex-flow: wrap;
        flex-flow: wrap;
        -webkit-transform: translate(0);
        transform: translate(0);
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .creditOn .creditTxt{
        color: inherit;
        color: #000;
        position: absolute;
        top: 10%;
        left: 20px;
        opacity: 1;
        width: 100%;
    }
    .creditOn .creditTxt li{
        margin: 0 1.5em .5em 0;
    }
    .creditOn .creditTxt li+li{
        margin:0 1.5em .5em 0;
    }
        .creditOn .creditTxt li a{
            padding: 0 15px 0 0;
        }
        .creditOn .creditTxt li a::after{
            content: url("/common/img/cart.svg");
            width: 12px;
            height: 12px;
        }
}