* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    vertical-align: bottom;
}

#lp_container {
    max-width: 430px;
    font-family: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', sans-serif;
    width: 100%;
    color: #797676;
    margin: 0 auto;
    --s-val:10px;
    font-size: 10px;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 1;
    background-color: #FFFDF8;
}

@media screen and (max-width: 429px) {
    #lp_container {
        --s-val:2.3vw;
    }
}

/*スライダー*/

#lp_container .slick-dots {
    bottom: 20px;
    width: 10%;
}

#lp_container  .slick-dots li {
    width: 3px;
    height: 0px;
    margin: 0 5px;
}

#lp_container .slick-dots li button:before {
    font-size :7px;
    color: #fff;
}


#lp_container section {
    margin-bottom: calc(var(--s-val)*15);
}

#lp_container .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #C4A8A8;
}

#lp_container .slick-dots li button:before {
    opacity: 1;
}

/*スライダー*/

#lp_container img {
    width: 100%;
    margin: 0;
    padding: 0;
}

.bg_white {
    background-color: #FFFDF8;
}

#lp_container .kv_area {
    margin-bottom: calc(var(--s-val)*15);
}

#lp_container .slick-slide {
    height: inherit;
}

#lp_container a {
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid #693F2A;
    color: #693F2A;
    padding-bottom: 2px;
    font-size: calc(var(--s-val)*1.1);
}

#lp_container a:hover {
    opacity: 0.8;
}

#lp_container .slick-dotted.slick-slider {
    margin-bottom: 0;
}


/*set-up*/

.set-up_area .skirt_item {
    position: relative;
    width: 72%;
    margin: -7% 0 calc(var(--s-val)*6.5) auto;
}

#lp_container .set-up_box {
    width: 91%;
    background-image: url(/user_data_sp/pi/img/20240802_lookbook/camisole_tops_bg.jpg);
    padding: 7% 0px 12% 5%;
}

#lp_container .top_item {
    position: relative;
    width: 78%;
}

#lp_container h2 {
    position: absolute;
    width: 11%;
}

#lp_container .top_item h2 {
    right: -20%;
    top: 0%;
}

#lp_container .skirt_item h2 {
    bottom: -1%;
    left: -17%;
    width: 10%;
}

.detail_text_area {
    text-align: center;
}


.detail_text_area dl {
    margin-bottom: calc(var(--s-val)*2.2);
}
.detail_text_area dt {
    font-size: calc(var(--s-val)*2);
    margin-bottom: calc(var(--s-val)*2);
    color: #5A5A5A;
}

.detail_text_area dd {
    font-size: calc(var(--s-val)*1.3);
    line-height: 1.5;
}

.item_link {
    line-height: 2.1;
    margin-bottom: 3%;
}

.item_link a {
    margin-bottom: 3%;
}

.all_link {
    width: 15%;
    margin: 0 auto;
}
/*set-up*/

/*frill*/

.content_photo_wrapper {
    margin-bottom: 11%;
}

.frill_vest_area .main_photo {
    position: relative;
    background-image: url(/user_data_sp/pi/img/20240802_lookbook/frill_vest_bg.jpg);
    padding: 8% 9% 14% 5%;
    width: 91%;
}

#lp_container .content_photo_wrapper h2 {
    position: absolute;
    top: 3%;
    right: 6%;
    width: 29%;
}

.frill_vest_area .photo_box {
    display: flex;
    flex-direction: row-reverse;
    position: relative;
}

.frill_vest_area .photo_box .vest_photo_02:nth-child(1) {
    margin-top: -33%;
}

/*blouse*/

.blouse_area .blouse_photo_top {
    width: 86%;
    margin: 0 auto;
    border: 2px solid #C4A8A8;
    padding: 7%;
    margin-bottom: calc(var(--s-val)*5);
}

.blouse_area .photo_box {
    display: flex;
    justify-content: space-between;
    padding: 6% 5% 6% 5%;
    margin-bottom: calc(var(--s-val)*6);
    background-image: url(/user_data_sp/pi/img/20240802_lookbook/tulle_blouse_bg.jpg);
}

.blouse_area .blouse_photo {
    width: 47%;
}

/*gold button tweed gilet*/

#lp_container .gilet_area .content_photo_wrapper {
    margin-bottom: 52%;
}

#lp_container .gilet_area .main_photo {
    position: relative;
    z-index: 1;
}

.gilet_area .gilet_photo_01 {
    background-color: #B89C8D;
    width: 86%;
    padding: 4% 4% 3% 14%;
    margin: 0 auto;
}

.gilet_area .photo_box {
    display: flex;
    position: relative;
    background-image: url(/user_data_sp/pi/img/20240802_lookbook/tweed_gilet_bg.jpg);
    margin-top: -9%;
    z-index: 0;
    padding: 13.5% 0 13%;
}

.gilet_area .photo_box h2,.gilet_area .photo_box .gilet_photo_02:nth-child(2) {
    position: absolute;
}

#lp_container .gilet_area .photo_box h2 {
    left: 9%;
    top: 19%;
    width: 25%;
}

.gilet_area .photo_box .gilet_photo_02:nth-child(3) {
    width: 57%;
    margin: 0 0 0 auto;
}

.gilet_area .photo_box .gilet_photo_02:nth-child(2) {
    width: 62%;
    z-index: -1;
    bottom: -35%;
}

/*onepiece*/

.onepiece_area .onepiece_top_photo {
    position: relative;
}

.onepiece_top_photo_box .slider_area {
    width: 70%;
    margin: calc(var(--s-val)*4) auto;
}

#lp_container .onepiece_area h2 {
    position: inherit;
    width: 60%;
    margin: 0 auto 5%;
}

#lp_container .onepiece_area .onepiece_top_photo {
    background-image: url(/user_data_sp/pi/img/20240802_lookbook/onepiece_bg.jpg);
    padding: 6% 9.5%;
}

#lp_container .onepiece_area .slick-dotted.slick-slider {
    margin-bottom: 50px;
}

#lp_container .onepiece_area  .slick-dots {
    right: 15px;
}

@media screen and (max-width: 429px) {
    #lp_container .kv_area {
        margin-bottom: calc(var(--s-val)* 15.5);
    }

    #lp_container section {
        margin-bottom: calc(var(--s-val)* 15.1);
    }

    .frill_vest_area .photo_box .vest_photo_02:nth-child(1) {
        margin-top: -32%;
    }

    .detail_text_area dl {
        margin-bottom: calc(var(--s-val)* 2.7);
    }

    .blouse_area .blouse_photo_top {
        margin-bottom: calc(var(--s-val)* 5);
    }

    .blouse_area .photo_box {
        padding: 7% 5% 6% 5%;
    }

    .gilet_area .gilet_photo_01 {
        padding: 3% 4% 3% 14%;
    }

    #lp_container .gilet_area .content_photo_wrapper {
        margin-bottom: 53%;
    }

    .detail_text_area dl {
        margin-bottom: calc(var(--s-val)* 2.7);
    }

    #lp_container .onepiece_area .onepiece_top_photo {
        padding: 7% 9.5%;
    }

    #lp_container .onepiece_area .slick-dots {
        right: 15px;
    }
}
/*fade_in*/

/* =======================
アニメーション
====================================== */
#lp_container .fade-in-trigger {
    /* fadein ========= */
    opacity: 0;
  }
  #lp_container .fade-in {
    -webkit-animation-name: anime-fade-in;
            animation-name: anime-fade-in;
    -webkit-animation-duration: 1.2s;
            animation-duration: 1.2s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    opacity: 0;
  }
  @-webkit-keyframes anime-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes anime-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }