@charset "UTF-8";

.pane-contents,
.edit-format {
    background: #EEEADA;
}

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


/* ==================================================
Page Head Custom
================================================== */
#page-head {
    position: sticky;
    top: 141px;
    z-index: 20000;
    background: #EEEADA;

    .bread {
        text-align: left;
        margin-top: 0;
        padding-top: 15px;
    }

    #head-title {

        .logo {
            align-items: center;
            font-size: 16px;
            width: 46%;
            margin: 0 auto;

            img {
                width: 30%;
            }
        }

        .txt-title {
            font-size: 18px;
        }
    }
}

#page-head.js-headHide {
    display: none;
}

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

    #page-head {
        top: 58px;

        .bread {
            margin-top: 0;
            padding-top: 10px;
        }
    
        #head-title {
    
            .logo {
                font-size: 14px;
                width: 75%;
            }
    
            .txt-title {
                font-size: 13px;
            }
        }
    }
    
}

/* ==================================================
Page Body
================================================== */
#page-body {
    max-width: 1080px;
}

.none {
    display: none;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* 共通 */
.articleSet {
    margin-bottom: 60px;

    .section-img {
        transition: all 0.3s;
    }
    .section-img:hover {
        opacity: 0.8;
    }

}

.txt {
    text-align: left;
    justify-content: space-around;
    align-items: center;
    margin: 2% 8%;
    font-size: 16px;
    padding-bottom: 20px;
    color:#5b5b5b;
}

.item-color {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 380px;
    height: 280px;
    display: flex;
    align-items: center;
}


/* popSet01 */
.popSet01 {
    .item-color {
        background-image: url(https://etretokyo.jp/img/usr/static/catalog/2025autumn/page/color_image1.png);
    }
}
/* popSet02 */
.popSet02 {
    .item-color {
        background-image: url(https://etretokyo.jp/img/usr/static/catalog/2025autumn/page/color_image2.png);
    }
}
/* popSet03 */
.popSet03 {
    .item-color {
        background-image: url(https://etretokyo.jp/img/usr/static/catalog/2025autumn/page/color_image3.png);
    }
}
/* popSet04 */
.popSet04 {
    .item-color {
        background-image: url(https://etretokyo.jp/img/usr/static/catalog/2025autumn/page/color_image4.png);
    }
}
/* popSet05 */
.popSet05 {
    .item-color {
        background-image: url(https://etretokyo.jp/img/usr/static/catalog/2025autumn/page/color_image5.png);
    }
}
/* popSet06 */
.popSet06 {
    .item-color {
        background-image: url(https://etretokyo.jp/img/usr/static/catalog/2025autumn/page/color_image6.png);
    }
}
/* popSet07 */
.popSet07 {
    .item-color {
        background-image: url(https://etretokyo.jp/img/usr/static/catalog/2025autumn/page/color_image7.png);
    }
}
/* popSet08 */
.popSet08 {
    .item-color {
        background-image: url(https://etretokyo.jp/img/usr/static/catalog/2025autumn/page/color_image8.png);
    }
}
/* popSet09 */
.popSet09 {
    .item-color {
        background-image: url(https://etretokyo.jp/img/usr/static/catalog/2025autumn/page/color_image9.png);
    }
}
/* popSet10 */
.popSet10 {
    .item-color {
        background-image: url(https://etretokyo.jp/img/usr/static/catalog/2025autumn/page/color_image10.png);
    }
}

/* creditArea */
.creditArea {
    position: relative;

    .credit-image {
        width: 45%;
        margin: 0 auto;
    }

    .credit-list {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        font-size: 15px;
    }
}

/* cosmeCreditArea */
.cosmeCreditArea {
    justify-content: space-evenly;
    align-items: center;

    .credit-image {
        width: 40%;
    }

    .credit-list {
        font-size: 13px;
    }
}

/* checkBtn */
.edit-format .btn-block a, .edit-format .btn-block a.type-rectangle,
#btn-archives a.type-archives {
    background: #EEEADA;
}

#btn-archives {
    padding-bottom: var(--clamp8);
    margin-bottom: 0;
}

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

    .articleSet {
        margin-bottom: 24px;
    }

    .txt {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        align-items: flex-start;
        margin: 2% 5%;
        font-size: 13px;
        padding-bottom: 60px;
    }

    .item-color {
        background-position: left;
        width: 310px;
        height: 220px;
    }

    /* creditArea */
    .creditArea {

        .credit-image {
            width: 60%;
        }

        .credit-list {
            top: 20%;
            font-size: 9px;
        }
    }

    /* cosmeCreditArea */
    .cosmeCreditArea {

        .credit-image {
            width: 50%;
        }

        .credit-list {
            font-size: 7px;
        }
    }

}


/* ==================================================
sliderArea
================================================== */
.slick-slider div {
    transition: none;
}
.slide-box {
    flex-direction: row-reverse;

    .main-slider {
        width: 35%;
        margin: 2% 3% 0 2%;
        z-index: 2;
        transition: none; 
    }

    .contents {
        width: 50%;
        position: relative;

        .color-title {
            font-weight: 700;
            font-size: 90px;
            letter-spacing: 0.02em;
            font-family: "the-seasons", sans-serif;
            /*text-shadow: 4px 4px 4px #00000052;*/
            color: #fff;
        }

        .color-title1 {
            text-align: left;
        }
        .color-title2 {
      position: absolute;
      top: 70%;
      z-index: 1;
      font-size: 200px;
      padding-left: 55%;
        }
      .color-title3 {
      position: absolute;
      right: 7%;
      top: 90%;
      z-index: 1;
      font-size: 200px;
      padding-top: 100px;
        }
        
      .color-title4 {
      position: absolute;
      top: 67%;
      z-index: 1;
      font-size: 200px;
      padding-left: 67%;
        }
        
      .muacredit {
      font-size: 13px;
      color: #999;
      text-align: left;
       
        }  
        
        
        

        .thumb-slider {
            z-index: 2;

            .slides {
                margin: 0 4px;
            }
        }

    }
}

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

    .slide-box {
        flex-wrap: wrap;

        .main-slider,
        .main-slider2 {
            width: 100%;
        }

        .contents {
            width: 100%;

            .color-title {
                font-size: 80px;
                line-height: 1;
            }
            .color-title2 {
                 text-align:right;
                 position: unset;
            }
            .color-title3 {
                 text-align:right;
                 position: unset;
              
            }
            .color-title4 {
                 text-align:right;
                 position: unset;
               
            }
            .muacredit {
      font-size: 10px;
       
        }  
    
        }
    }
}

/* Fade in */
.imgFade {
    opacity: 0;
}

.imgAnim {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes imgAnim {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

.imgFade.fadeT {
    opacity: 0;
    transform: translateY(50px);
    position: relative;
    z-index: 5;
}

.imgAnim.fadeT {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.imgFade.fadeR {
    opacity: 0;
    transform: translateX(50px);
    position: relative;
    z-index: 5;
}

.imgFade.fadeL {
    opacity: 0;
    transform: translateX(-50px);
    position: relative;
    z-index: 5;
}

.imgAnim.fadeR {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.imgAnim.fadeL {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* ==================================================
popupArea
================================================== */
.popupArea {
    background: rgba(238, 234, 218, 1);
    width: 100%;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s ease-in;
}

.js-modalOn .popupArea {
    z-index: 10000;
    visibility: visible;
    opacity: 1;
    transition: all 1s ease-out;
}

.popupArea .js-popupClose {
    font-size: 0;
    width: 35px;
    height: 35px;
    position: absolute;
    right: 20px;
    top: 140px;
    cursor: pointer;
}

.popupArea .js-popupClose::before,
.popupArea .js-popupClose::after {
    content: "";
    height: 1px;
    width: 35px;
    display: block;
    background: #292929;
    position: absolute;
    top: 50%;
    left: 0;
    transform: rotate(-45deg);
    transition: all 0.4s ease-in;
}

.popupArea .js-popupClose::after {
    transform: rotate(45deg);
}

.popupArea .popupWrapSet {
    background: #EEEADA;
    box-sizing: border-box;
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translate(-50%, 6%);
    width: 90%;
    max-height: calc(90svh - 50px);
    overflow-y: auto;
    overscroll-behavior: contain;
    max-width: 1200px;
    /* box-shadow: 0px 6px 48px 0px rgba(0, 0, 0, 0.08); */
}

.popupArea {}

.popupArea .popupSet {
    position: absolute;
    z-index: -10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100svh;
    max-width: 1200px;
    visibility: hidden;
    right: 0;
    margin: 0 auto;
}

.popupArea .popupSet.js-popupOn {
    z-index: 10000;
    visibility: visible;
    opacity: 1;
    transition: all 1s ease-out;
}

@media screen and (max-width: 768px) {
    .popupArea .js-popupClose {
        top: 100px;
    }

}