* {
    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%;
    background-color: #FAF9F7;
    color: #797676;
    margin: 0 auto;
    --s-val:10px;
    font-size: 10px;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 1;
}

@media screen and (max-width: 429px) {
    #lp_container {

        --s-val:2.4vw;
    }
}

#lp_container img {
    width: 100%;
}

#lp_container a {
    text-decoration: none;
}

.bg_white {
    background-color: #FAF9F7;
}

#lp_container a:hover {
    opacity: 0.8;
}
#lp_container .blouse_circle a:hover, #lp_container .frill_circle a:hover, #lp_container .jacket_circle a:hover, #lp_container .rib_knit_circle a:hover, #lp_container .dress_circle a:hover {
    opacity: 0.9;
}

#lp_container li {
    list-style: none;
}

.area_position {
    position: relative;
}

.blouse_circle, .frill_circle, .rib_knit_circle, .dress_circle {
    position: absolute;
    z-index: 1000;
    background-color:inherit;
}

#lp_container h2 {
    font-size: calc(var(--s-val)*2);
    color: #649E9C;
    font-weight: 400;
    margin-bottom: calc(var(--s-val)*2.6);
    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', sans-serif;
    letter-spacing: -0.6px;
}

#lp_container .detail_text_area p {
    font-size: calc(var(--s-val)*1.3);
    line-height: 1.5;
    line-height: 1.7;
    margin-bottom: calc(var(--s-val)*1.4);
    font-weight: 300;
}

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

#lp_container .item_name a {
    color: #649E9C;
    border-bottom:1px solid #649E9C;
    font-size: calc(var(--s-val)*1.1);
    padding-bottom: 0.5%;
    margin-bottom: 4%;
    font-weight: 300;
}

#lp_container .see_btn a {
    font-size: calc(var(--s-val)*1.1);
}

#lp_container .see_btn {
    width: 12%;
    margin: 0 auto;
    position: relative;
}


#lp_container .see_btn a::before {
    position: absolute;
    top: 35%;
    right: -45%;
    content: "";
    width: 13px;
    height: 100%;
    background-image: url(/user_data_sp/pi/img/20240704_eslookbook/arrow_icon.png);
    background-repeat: no-repeat;
    background-size: contain;
}

#lp_container .detail_text_area {
    margin-top: calc(var(--s-val)*5);
    padding-left: calc(var(--s-val)*2);
}

#lp_container .blouse_area .detail_text_area {
    margin-top: calc(var(--s-val)*4)
}

#lp_container .slick-dots li {
    margin: 0;
}

/*slider*/

#lp_container .slick-prev,#lp_container .slick-next {
    display: none;
}

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

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

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

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

#lp_container .slick-dots {
    width: auto;
    bottom: 5px;
}

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

#lp_container .jacket_area .slick-dots {
    right: 9px;
}

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

/*kv*/
.kv_area {
    margin-bottom: calc(var(--s-val)*54.6);
}

/*blouse*/

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

.blouse_slider {
    position: relative;
    width: 69%;
    margin: 0 0 0 auto;
    background-image: url(/user_data_sp/pi/img/20240704_eslookbook/blouse_bg.jpg);
    padding: 2.5%;
}

#lp_container .blouse_circle {
    top: calc(var(--s-val)*-40);
    left: -14%;
    width: 100%;
}

.blouse_area .detail_text_area {
    text-align: right;
    padding-right: calc(var(--s-val)*2);
}

#lp_container .blouse_area .see_btn {
    margin-right: 5%;
}
/*frill skirl*/

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

#lp_container .frill_area h2 {
    margin-bottom: calc(var(--s-val)*2.7);
}

#lp_container .frill_circle {
    top: calc(var(--s-val)* -35.8);
    right: -20%;
    width: 102%;
}

.frill_item {
    background-image: url(/user_data_sp/pi/img/20240704_eslookbook/frill_bg.png);
    background-position: top -4% left 0;
    background-repeat: no-repeat;
    padding: calc(var(--s-val)*3.1) 0 0%;
    background-size: 100%;
}

.frill_item ul{
    display: flex;
}

#lp_container .frill_area .detail_text_area p {
    margin-bottom: calc(var(--s-val)*2.2);
}

.frill_item ul li:last-child {
    margin-top: calc(var(--s-val)* 11.8);
}

#lp_container .frill_area .see_btn {
    margin-left: 0;
}

/*jacket*/

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

.jacket_area .jacket_circle {
    position: absolute;
    top: -116.5%;
    left: -6px;
    width: 103%;
}

.jacket_slider {
    background-image: url(/user_data_sp/pi/img/20240704_eslookbook/jacket_bg.png);
    padding: calc(var(--s-val)* 2.5) calc(var(--s-val)* 2.5) calc(var(--s-val)*3) calc(var(--s-val)* 2.3);
    padding-right: calc(var(--s-val)* 7);
}

#lp_container .jacket_area .detail_text_area {
    padding-left: 0;
}

.jacket_text {
    text-align: center;
}

#lp_container .jacket_area h2 {
    margin-bottom: calc(var(--s-val)*3);
}

#lp_container .jacket_area .detail_text_area p {
    margin-bottom: calc(var(--s-val)*3.2);
}
/*ribbon*/

.rib_knit_area {
    margin-bottom: calc(var(--s-val)* 51.3);
}

.rib_knit_area .rib_knit_circle {
    top: calc(var(--s-val)* -50);
    left: -18%;
    width: 102%;
}


.rib_knit_area .rib_knit_item {
    position: relative;
    background-image: url(/user_data_sp/pi/img/20240704_eslookbook/rib_knit_bg.png);
    background-repeat: no-repeat;
    background-position: top 2% left 50%;
    padding-top: 11%;
}

.rib_knit_area .rib_knit_item .rib_knit_item_1 {
    width: 57.5%;
    display: block;
}

.rib_knit_area .rib_knit_item .rib_knit_item_2 {
    position: absolute;
    right: 0;
    top: -17%;
    width: 56%;
}

#lp_container .rib_knit_area .detail_text_area p {
    margin-bottom: calc(var(--s-val)*2.5);
}

#lp_container .rib_knit_area .see_btn {
    margin-left: 0;
}
/*dress*/

.dress_area {
    margin-bottom: calc(var(--s-val)*23);
}

.dress_area .area_position {
    background-image: url(/user_data_sp/pi/img/20240704_eslookbook/dress_bg.png);
    padding: calc(var(--s-val)*2.5) 0;
}

.dress_circle {
    top: -91%;
    right: -20%;
    width: 103%;
}

.dress_item.slick-slide {
    padding-right: 2.2%;
}

.dress_area .slick-slider .slick-track, .dress_area .slick-slider .slick-list {
    display: flex;
    padding-right: 32%;
}

#lp_container .dress_area .detail_text_area {
    text-align: center;
    padding-left: 0;
}

#lp_container .dress_area .detail_text_area {
    margin-top: calc(var(--s-val)*5.4);
}

#lp_container .dress_area h2 {
    margin-bottom: calc(var(--s-val)*2.9);
}

#lp_container .dress_area .detail_text_area p {
    margin-bottom: calc(var(--s-val)*2.1);
}

#lp_container .dress_area .item_name {
    margin-bottom: calc(var(--s-val)*1.8);
}

/*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;
    }
  }
  #lp_container .fade-up-trigger {
    /* fade-up ========= */
    opacity: 0;
  }
  #lp_container .fade-up {
    -webkit-animation-name: anime-fade-up;
            animation-name: anime-fade-up;
    -webkit-animation-duration: 1.1s;
            animation-duration: 1.1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    opacity: 0;
  }
  @-webkit-keyframes anime-fade-up {
    from {
      opacity: 0;
      -webkit-transform: translateY(100px);
              transform: translateY(100px);
    }
    to {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @keyframes anime-fade-up {
    from {
      opacity: 0;
      -webkit-transform: translateY(100px);
              transform: translateY(100px);
    }
    to {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }