/* ==========================================================
  APP Only
========================================================== */





/* ==========================================================
  Img Style
========================================================== */

/* data-aspect-ratio */
[data-aspect-ratio="823:412"]:before { padding-top: calc((412 / 823) * 100%); }
[data-aspect-ratio="524:150"]:before { padding-top: calc((150 / 524) * 100%); }
[data-aspect-ratio="142:48"]:before { padding-top: calc((48 / 142) * 100%); }
[data-aspect-ratio="158:48"]:before { padding-top: calc((48 / 158) * 100%); }

/* Key Visual */
.fr-img.-kv, .fr-img.-cast { -webkit-backface-visibility: hidden; backface-visibility: hidden; }


/* ==========================================================
  Base Style SP Only
========================================================== */

/* style */
.note { font-size: 11px; }

/* contentsCard */
.fr-contentsCard.-live { padding-top: 36px; padding-right: 15px; padding-left: 15px; }
.fr-contentsCard.-streamList { padding: 36px 0 0; }

/* stream list */
.streamList_title { font-size: 14px; font-weight: 700; }
.streamList_date { font-size: 13px; font-family: "UniqloPro Regular", sans-serif; color: #7d7d7d; }
.streamList_title, .streamList_date { padding-right: 4vw; padding-left: 4vw; }

/* Anchor */
.fr-contentsCard.-live.l-anchorAdjustBox, .js-fixedAnchor_3.l-anchorAdjustBox { margin-top: -68px; padding-top: 68px; }

/* iframe */
.live_screen { width: 100%; height: 640px; }
.iframe-content { width: 100%; height: 640px; }

/* reload */
.reload_link { z-index: 1; }
.reload_text { font-size: 11px; text-align: center; }

/* .castInfo_detail */
.castInfo_detail { background-color: #f4f4f4; padding: 24px 15px; }
.castInfo_detailHeading { font-weight: 700; font-size: 17px; text-align: center; }
.castInfo_detailName { font-weight: 700; font-size: 14px; }

/* .introductory_item */
.introductory_itemTitle { font-size: 14px; font-weight: 700; }
.introductory_itemSize { font-size: 13px; color: #7d7d7d; }
.-live .fr-productGridParent { padding: 15px 0 0; }
.-live .fr-productGrid { width: calc(33.333% - 10px); margin-right: 15px; }
.-live .fr-productGrid:nth-child(3n) { margin-right: 0; }
.-live .fr-productGrid:nth-child(n+4){ margin-top: 21px; }
.-live .fr-productGrid_content { padding: 9px 0 0; }
.-live .fr-productGrid_name, .fr-productGrid_price, .fr-productGrid_text { line-height: 19.5px; margin-top: 3px; }
.-live .fr-productGrid_price { font-family: "UniqloPro Bold", sans-serif; white-space: nowrap; overflow: visible; }
.onsale { font-size: 14px; font-weight: 700; }
.sp-inch { height: 19px; line-height: 19.5px; }

/* lineup */
.lineup_section { padding-right: var(--sp-h-1g); padding-left: var(--sp-h-1g); }
.lineup { display: flex; flex-wrap: wrap; }
.lineup_item { margin-right: 15px; margin-top: 15px; width: calc(50% - 10px); }
.lineup_item:nth-of-type(2n) { margin-right: 0; }
.lineup_body, .lineup_title { margin-top: 9px; }
.lineup_title { font-weight: 700; }
.lineup_item .fr-img { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* Style Hint */
.logo_wrapper { width: 262px; margin-right: auto; margin-left: auto; }
.app_wrapper { margin-top: 9px; margin-bottom: 24px; }
.app_box { display: flex; flex-wrap: nowrap; justify-content: center; margin: 0; }
.appImg_wapper.-appStore { width: 142px; height: 47.5px; margin-right: 9px; }
.appImg_wapper.-googlePlay { width: 158px; height: 47.5px; }

/* negativeMargin */
.negativeMargin-top { margin-top: -15px; }

/* ==========================================================
  Modal Style SP Only
========================================================== */

/* data-aspect-ratio */
[data-aspect-ratio="772:563"]:before { padding-top: calc((563 / 772) * 100%); }
[data-sp-aspect-ratio="611:571"]:before { padding-top: calc((611 / 571) * 100%); }

/* style */
.fr-textLink.-modal { text-align: right; cursor: pointer; }
.modalArea {
  visibility: hidden;
  opacity : 0;
  position: fixed;
  z-index: 12;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: .6s;
}
.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
}
.modalWrapper {
  position: absolute;
  top: 0;
  left: 4vw;
  width: calc(100% - 8vw);
  margin: 21px auto;
  padding: 21px 4vw;
  background-color: #fff;
  overflow: auto;
}
.is-show {
  visibility: visible;
  opacity : 1;
}
.closeModal {
  position: relative;
  z-index: 10;
}
.closeModal:after {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-block;
  content: "";
  width: 19px;
  height: 19px;
  background-image: url(/jp/ja/contents/live-commerce/img/modal_close.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}
.step { display: flex;}
.step_no { border: 1px solid #dadada; font-family: "UniqloPro Light", sans-serif; font-size: 24px; line-height: 30px; text-align: center; width: 30px; height: 30px; }
.step_title { font-weight: 700; font-size: 13px; margin:auto 15px; }
.swiper-parent.-howTo { overflow: visible;}
.swiper-wrapper.-howTo { align-items: flex-start;}
.swiper-button-next.-howTo, .swiper-button-prev.-howTo { top: 60%;}
.swiper-button-next.-howTo { margin-right: -4vw;}
.swiper-button-prev.-howTo { margin-left: -4vw;}


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

  /* ==========================================================
    Base Style PC Only
  ========================================================== */

  /* contentsCard */
  .fr-contentsCard.-live, .fr-contentsCard.-streamList { max-width: 876px; margin-left: auto; margin-right: auto; padding-top: 64px; padding-bottom: 0; }

  /* Anchor */
  .l-anchorAdjustBox { margin-top: -81px; padding-top: 81px; }
  .js-fixedAnchor_3.l-anchorAdjustBox { margin-top: -81px; padding-top: 81px; }

  /* stream list */
  .streamList { display: flex; flex-wrap: wrap; justify-content: center; }
  .streamList_item { display: block; width: calc(33.3% - 16px); }
  .streamList_item:not(:last-child) { margin-right: 24px;}
  .streamList_title { font-size: 14px; }
  .streamList_date { font-size: 14px; line-height: 19.6px; }
  .streamList_title, .streamList_date { padding-right: 0; padding-left: 0; }

  /* override */
  a:hover,
  a:hover img,
  a:hover p,
  a[href]:hover,
  a[href]:hover img,
  a[href]:hover img,
  a[data-link]:hover,
  a[data-link]:hover img {
    cursor: pointer;
    opacity: 0.8;
    text-decoration: none;
  }
  .fr-linkButton { transition: 0.5s; }

  /* iframe */
  .live_screen {
    background-image: url(/jp/ja/contents/live-commerce/img/live_bgimage.jpg?20210222);
    width: 100%;
    height: 640px;
    z-index: 100;
    padding-top: 0;
    text-align: center;
  }
  .iframe-content { width: 360px; }
  .iframe-content:hover { cursor: pointer; opacity: 0.8; }

  /* .castInfo_detail */
  .castInfo_detail { padding: 28px; }
  .castInfo_detailHeading { font-size: 20px; }
  .castInfo_detailName { font-size: 17px; }

  /* .introductory_item */
  .introductory_itemTitle { font-size: 17px; padding-left: 0; }
  .-live .fr-productGridParent { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 20px 0 0; }
  .-live .fr-productGrid { width: calc(20% - 1vw); margin-right: 1vw; }
  .-live .fr-productGrid:nth-child(n+4) { margin-top: 0; }
  .-live .fr-productGrid:nth-child(n+6){ margin-top: 20px; }
  .-live .fr-productGrid:nth-child(2n) { margin-right: 1vw; }
  .-live .fr-productGrid:nth-child(3n) { margin-right: 1vw; }
  .-live .fr-productGrid:nth-child(5n) { margin-right: 0; }
  .-live .fr-productGrid_content { padding-top: 12px; }
  .-live .fr-productGrid_name, .fr-productGrid_price { margin-top: 8px; }
  .-live .fr-productGrid_text { margin-top: 4px; }

  /* Line Up */
  .lineup_section { margin-right: 15%; margin-left: 15%; padding-right: 0; padding-left: 0; }
  .lineup_item { width: calc(25% - 2vw); margin-top: 28px; margin-right: 0; }
  .lineup_body, .lineup_title { margin-top: 8px; }

  /* negativeMargin */
  .negativeMargin-top { margin-top: -28px; }

  /* ==========================================================
    Modal Style PC Only
  ========================================================== */

  /* data-aspect-ratio */
  [data-pc-aspect-ratio="774:514"]:before { padding-top: calc((514 / 774) * 100%); }

  /* style */
  .fr-textLink.-modal { text-align: center; }
  .modalWrapper {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: 625px;
    padding: 28px 72px;
  }
  .closeModal:after {
    position: absolute;
    top: -18px;
    right: -62px;
  }
  .step_no { font-size: 26px; line-height: 39px; justify-content: center; width: 39px; height: 39px; }
  .step_title { font-size: 17px; margin: auto 20px; }
  .swiper-button-next.-howTo, .swiper-button-prev.-howTo { top: 60%;}
  .swiper-button-next.-howTo { margin-right: -72px; }
  .swiper-button-prev.-howTo { margin-left: -72px; }
  .fr-linkButton.-moreButtonHowto { margin: 15px auto 0; }
}

@media screen and (max-width: 389px) {
  /* inch for SP */
  .sp-inch { height: 32px; line-height: 16px;}
}

@media screen and (max-width: 894px) and (min-width: 813px) {
  /* inch for max-width: 894px */
  .pc-inch { height: 32px; line-height: 16px; }
}



/* ==========================================================
  new-me
========================================================== */

/* Property
    --sp-h-05g: 2vw;
    --sp-h-1g: 4vw;
    --sp-h-2g: 8vw;
    --pc-h-s: 12px;
    --pc-h-m: 24px;
    --pc-h-l: 80px;
    --pc-h-xl: 160px; */

#new-me .u-section .u-imgAdjustBox.w100Sp img{width:100%}
#new-me .u-section .u-imgAdjustBox.w90Sp img{width:90%}
#new-me .u-section .u-imgAdjustBox.w80Sp img{width:80%}
#new-me .u-section .u-imgAdjustBox.w70Sp img{width:70%}
#new-me .u-section .u-imgAdjustBox.w60Sp img{width:60%}

#new-me .u-section .u-imgAdjustBox.nmTop{margin-top: -4vw;}
#new-me .u-section .u-imgAdjustBox.taRgt{text-align: right;}
#new-me .u-section .u-imgAdjustBox.taCnt{text-align: center;}
#new-me .u-section .u-imgAdjustBox.nmRgt picture{padding-right:7vw;}

#new-me .u-section{
    padding:0;
}

/*========== 230328 ==========*/
#new-me .cl-Tabs_Inner{
    position: relative;
    /* max-width: 1226px; */
    margin: 0 8vw;
    gap: 6px;
    border-bottom: none;
}
#new-me .cl-Tabs_Inner:before{
    position: absolute;
    content: "";
    width: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #000;
}
#new-me .cl-Tabs_Item{
    font-weight: bold;
    border: solid #7d7d7d;
    border-width: 2px 1px 1px 1px;
    background-color: #e7e7e7;
}
#new-me .cl-Tabs_Item.-isActive{
    border: solid #000;
    border-width: 2px 1px 0 1px;
    background-color: #fff;
}
#new-me .cl-Tabs_Item.-isActive:before{
    border-bottom: none;
}
#new-me .cl-Tabs_Item.commingsoon{
    position: relative;
    border: solid #000;
    border-width: 0 0 1px 0;
    background: linear-gradient(to bottom, #fff 0%, #fff 15%, #e7e7e7 15%);
}
#new-me .cl-Tabs_Item.commingsoon:before{
    content: 'COMMING SOON';
    position: absolute;
    left: 5%;
    width: 90%;
    font-family: inherit;
    font-size: 8px;
    font-weight: normal;
    text-align: center;
    line-height: 2em;
    color: #fff;
    background-color: #b4b4b4;
}
#new-me .cl-Tabs_Item.commingsoon .cl-Tabs_ItemInner{
    line-height: 3em;
    vertical-align: bottom;
    font-size: 80%;
}
#new-me .u-Hover{
    opacity: unset;
}
#new-me .l-Container{
    margin-left: -8vw;
    margin-right: -8vw;
}
.l-Container, .l-SmallContainer{
    width: unset;
    max-width: unset;
}
#new-me .swiper-parent{
    background: #f8f8f8;
}
#new-me h2{
    font-weight: bold;
}
#new-me .sp{
    display: none;
}
#new-me .mainPrd h3{
    display: inline-block;
    width: 25em;
}
#new-me .mainPrd p{
    display: inline-block;
}
#new-me .price{
    display: inline-block;
    width: 5em;
    text-align: right;
}
/* ==================== */

#new-me .u-section.title{
    text-align: center;
    padding: 0;
    background: #ecebef;  /* 230310 */
}

/*========== 230328 ==========*/
#new-me .u-section.title .comment{
font-family: 'Times New Roman', 'YuMincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'MS PMincho', serif;
line-height: 1.6em;
font-size: 0.85rem;
}
#new-me .u-section.title .muse{
    padding-right: 8vw;
    padding-left: 8vw;
}
#new-me .u-section.title span{
    font-weight: bold;
}
/* ==================== */

#new-me .title .pc { display: block !important; }
#new-me .title .sp { display: none !important; }

#new-me .video-area{
    padding-left: 8vw;
    padding-right: 8vw;
} 
#new-me .video {
    position: relative;
    width:100%;
    height:0;
    padding-top: 56.25%;
  }
#new-me .video iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ==================== */

/*===== 230310 =====*/
#new-me .leadSection{
    padding-right: 8vw;
    padding-left:8vw;
    background-color: #f8f8f8;
}
/* ==================== */

/*===== 230310 =====*/
#new-me h1{
    position: relative;
}
#new-me h1:before {
    content: '';
    position: absolute;
    bottom: 0;
    display: inline-block;
    width:20%;
    height: 1px;
    background-color: #000;
}
/* ==================== */

#new-me h2{
    font-size: 1.2rem;
}

#new-me .itemSection{
    min-height: 50vh;
    padding-right: 8vw;
    padding-left:8vw;
    padding-bottom: 8vw;
    background: linear-gradient(transparent 50%, #ecebef 50%);  /* 230328*/
}

#new-me .itemSection.landscape{
    background: linear-gradient(transparent 40%, #ecebef 40%);  /* 230310 */
}

#new-me .u-imgAdjustBox img{
  border: 6px solid #fff;
  box-sizing: border-box;
}

#new-me .title .u-imgAdjustBox img{
  border: none;
}

#new-me .anchorList{
    margin-left: 8vw;
    margin-right: 8vw;
    border-top: 1px solid #666;
    margin-top: 8vw;
}

#new-me .anchorList li img{
    width:  100%;
}

#new-me .anchorList li{
    border-bottom: 1px solid #666;
    padding: 2vw 0;
}

#new-me .mainPrd a{
    display: inline-block;
}

#new-me .products{
    position: relative;
    display: inline-block;
    width: 100%;    /* 230310 */
}

#new-me .products:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 100%;
  display: inline-block;
  width: 30%;
  height: 1px;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  /* background-color: #C1C1C1;   */
}

#new-me .products li{
    padding-bottom:0.7em;
    font-size:0.85rem;
    line-height: 1.5em;
}

#new-me .products li a{
    display: inline;
}

#new-me .onsale{
    font-weight: normal;
}

#new-me .onsale .price{
    color:#D21316;
}

#new-me .products li span.btn,
#new-me .mainPrdPrice span.btn{
    border:1px solid #1b1b1b;
    padding:0.4em 1em;
    margin-left:1.5em;
    font-size: 0.55rem;
    color: #e7e7e7;   /* 230310 */
    background: #1b1b1b; /* 230310 */
}

#new-me .btnGroup{
    margin-left: 8vw;
    margin-right: 8vw;
    margin-top: 4vw;
    padding-bottom: 4vw;
}

#new-me .lnkBtn a{
    display:block;
    text-align:center;
    line-height:1.5em;
    border:1px solid #1b1b1b;
    border-radius:2px;
    padding: 1em;
}

@media screen and (max-width: 480px) {
    /* inch for SP */

    #new-me .title .pc { display: none !important; }
    #new-me .title .sp { display: block !important; }
    
    #new-me .itemSection{
        background: linear-gradient(transparent 32%, #ecebef 32%);  /* 230310 */
    }
    
    #new-me .itemSection.landscape{
        background: linear-gradient(transparent 30%, #ecebef 30%);  /* 230310 */
    }

    /*========== 230328 ==========*/
    #new-me .l-Container{
        margin-left: -15px;
        margin-right: -15px;
    }
    #new-me .mainPrd h3, #new-me .mainPrd p{
        display: block;
    }
    #new-me .price{
        display: inline-block;
        width: 3.5em;
        text-align: left;
    }
    #new-me .sp{
        display: block;
    }
    /* ===== 230505 ===== */
    #new-me .mainPrd a{
        text-decoration: underline;
    }
#new-me .mainPrd h3{
    width: 100%;
    overflow-wrap: break-word;
}
/* ==================== */
    #new-me .products li span.btn,
#new-me .mainPrdPrice span.btn{
    display: none;  /* 230505 */
    margin-left:0;
}
    /* ==================== */
    /* inch for SP */
}


@media screen and (max-width: 928px) and (min-width: 480px) {
    /* inch for max-width: 894px */

    #new-me .u-section .u-imgAdjustBox.w100Sp img{width:50%}
    #new-me .u-section .u-imgAdjustBox.w90Sp img{width:55%}
    #new-me .u-section .u-imgAdjustBox.w80Sp img{width:55%}
    #new-me .u-section .u-imgAdjustBox.w70Sp img{width:40%}
    #new-me .u-section .u-imgAdjustBox.w60Sp img{width:40%}
    #new-me .u-section .u-imgAdjustBox.w90Pc img{width:90%}

    #new-me .u-section .u-imgAdjustBox.nmTop{margin-top: -36vw;}
    #new-me .u-section .u-imgAdjustBox.taRgtPc{text-align: right;}
    #new-me .u-section .u-imgAdjustBox.nmRgt picture{padding-right:0;}

    #new-me .main_inner {
        max-width: 100%;
        margin: 0;
        padding: 0; 
    }

    #new-me .itemSection{
        background: linear-gradient(transparent 35%, #ecebef 35%);  /* 230328 */
    }
    
    #new-me .itemSection.landscape{
        background: linear-gradient(transparent 30%, #ecebef 30%);  /* 230310 */
    }

    #new-me .itemSectionInner{
        max-width: 90%;
        margin: 0 auto;
    }

    /* #new-me .products, */
    #new-me .lnkBtn,
    #new-me .mainPrd{
        /* margin-left: 14vw;
        margin-right: 14vw; */
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }

    #new-me .u-section.title p{
        font-size:1.1rem;
        line-height: 2em;
    }

    #new-me .u-section{
        margin: 0;
    }

    #new-me .btnGroup{
        margin-left: 14vw;
        margin-right: 14vw;
        margin-top: 4vw;
        padding-bottom: 4vw;
    }


    /* inch for max-width: 894px */
}

@media screen and (min-width: 928px) {
    /* inch for PC */
    #new-me .u-section .u-imgAdjustBox.w100Sp img{width:50%}
    #new-me .u-section .u-imgAdjustBox.w90Sp img{width:55%}
    #new-me .u-section .u-imgAdjustBox.w80Sp img{width:55%}
    #new-me .u-section .u-imgAdjustBox.w70Sp img{width:40%}
    #new-me .u-section .u-imgAdjustBox.w60Sp img{width:40%}
    #new-me .u-section .u-imgAdjustBox.w90Pc img{width:90%}

    #new-me .u-section .u-imgAdjustBox.nmTop{margin-top: -36vw;}
    #new-me .u-section .u-imgAdjustBox.taRgtPc{text-align: right;}
    #new-me .u-section .u-imgAdjustBox.nmRgt picture{padding-right:0;}

    #new-me .main_inner {
        max-width: 100%;
        margin: 0;
        padding: 0; 
    }
   
    /* ========== 230328 ========== */
    #new-me .cl-Tabs{
        margin-left: 8vw;
        margin-right: 8vw;
    }
    #new-me .cl-Tabs_Inner{
        max-width: 1226px;
        margin: 0 auto;
    }
    /* ==================== */

    #new-me .itemSectionInner{
        max-width: 90%;
        margin: 0 auto;
    }

/*===== 230310 =====*/
    #new-me .video-area{
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    } 
    #new-me .leadSection{
        text-align: center;
    }
    #new-me h1:before {
        left: 40%;
    }
    /* #new-me .price{
        margin-left: 0.5em;
    } */
/* ==================== */

    #new-me .products,
    #new-me .lnkBtn,
    #new-me .mainPrd{
        /* margin-left: 17vw;
        margin-right: 17vw; */
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }

    #new-me .u-section.title p{
        font-size:1.1rem;
        line-height: 2em;
    }

    #new-me .u-section{
        margin: 0;
    }

    #new-me .btnGroup{
        margin-left: 14vw;
        margin-right: 14vw;
        margin-top: 4vw;
        padding-bottom: 4vw;
    }
    /* inch for PC */
}