/* ==========================================================
  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; }
}

















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

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



.html{font-family: ヒラギノ角ゴ Pro W6,sans-serif; font-size: 16px;}
.fr-heading.-h1{font-size: 1rem;}
.lazyloaded{opacity: 1; -webkit-transition: opacity 3s; transition: opacity 3s;}

header .lazyloaded{opacity: 1; -webkit-transition: opacity 1s; transition: opacity 1s;}

.main_inner {
	max-width: 100%;
    padding-right: 0;
    padding-left: 0;
}

main.main{width: 100%;}


/*   products   */

.preorderItems .products_itemWrapper {
    display: block;
    padding-top: 0;
}

.preorderItems .products_item {
    margin-right: 0;
    width: auto;
}

.preorderItems .products_item a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: none;
}

.preorderItems.products_inner{margin-top:6%;}
.preorderItems .products_itemInner{padding-top:2%;}
.preorderItems .products_itemInner p{display: inline;}
.preorderItems .products_itemPrice,.preorderItems .products_itemName,.preorderItems .products_itemBtn,.otheritems .products_itemPrice{font-size: 0.85rem; line-height: 1.2em;}
.preorderItems .products_itemPrice {margin-top: 0;}
.preorderItems .products_itemsale {color:#bd2035;}
.preorderItems .products_annotation {font-size: 0.7rem;}

.preorderItems .products_itemBtn{
    font-size: 0.5rem;
    background: #000;
    color: #fff;
    padding: 3px;
}

.preorderItems .products_itemBtn.cmgsn{
    background: #666;
    color: #fff;
}


.prdselect .products_itemPrice {font-size: 0.8rem; line-height: 1.0em;}
.prdselect .products_itemsale {font-size: 0.7rem; color:#bd2035;}

/*
.sect01{background: linear-gradient(180deg, transparent 0%, transparent 30%, #adb2b7 30%, #adb2b7 100%); justify-content: center; align-items: center;}
.sect01Img01{z-index:9999; width:60%; text-align:right; margin-left:auto;}
.sect01Img02{width:50%; margin-top:-14%;}
.sect02Img01{width:70%;}
.sect02Img02{width:60%; text-align:right; margin-left:auto;}
.sect03{padding-top:7%; background: linear-gradient(180deg, #808080 0%, #808080 40%, transparent 40%, transparent 100%); justify-content: center; align-items: center;}
.sect03Img01{width:80%;text-align: right;margin-left:auto;}
.sect04{padding-top:10%; background: linear-gradient(180deg, transparent 0%, transparent 20%, #b5a6a5 20%, #b5a6a5 100%); justify-content: center; align-items: center;}
.sect04Img02{width:75%;}
.sect04Img01{margin-top:-6%; width:65%;text-align: right;margin-left:auto;}
.sect05Img01{width:80%; text-align:center; margin-left:auto;}
.sect06{padding-top:10%; background: linear-gradient(180deg, transparent 0%, transparent 30%, #b6bdbb 30%, #b6bdbb 100%); justify-content: center; align-items: center;}
.sect06Img01{width:70%;}
.sect06Img02{width:65%;text-align: right;margin-left:auto;}
.sect07{padding-top:10%; background: linear-gradient(180deg, #bda991 0%, #bda991 50%, transparent 50%, transparent 100%); justify-content: center; align-items: center;}
.sect07Img01{width:80%;}
.sect08Img01{width:80%; text-align:center; margin-left:auto;}
.sect09{padding-top:7%; background: linear-gradient(180deg, #aca89a 0%, #aca89a 60%, transparent 60%, transparent 100%); justify-content: center; align-items: center;}
.sect09Img02{width:60%; text-align:right; margin-left:auto;}
.sect09Img01{width:50%; margin-top:-14%;}
*/

.btn{
    padding-left: 6%;
    padding-right: 6%;
}
.productAll_btn{
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(27, 27, 27);
    display: block;
    font-family: "ヒラギノ角ゴ Pro W6", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 4em;
    margin-top: 21px;
    margin-right: 4vw;
    margin-left: 4vw;
    padding-right: 21px;
    padding-left: 21px;
    text-align: center;
}


@media screen and (max-width: 389px) {
  /* inch for SP */
    .itemSection{padding-right:7%; padding-left:7%;}
    preorderItems .products_itemName,.preorderItems .products_itemBtn{font-size: 0.8rem; line-height: 1.2em;}
    .preorderItems .products_itemPrice{font-size: 0.8rem; line-height: 1.0em;}
    .itemSection p,.preorderIntro p{font-size:0.7rem;} 
    .preorderItems .products_itemBtn{font-size: 0.5rem;}
    .productAll_btn{font-size: 12px;}
    .preorderItems .products_itemInner{padding-top:2%;}
}


@media screen and (max-width: 894px) and (min-width: 390px) {
  /* inch for max-width: 894px */
    .itemSection{padding-right:7%; padding-left:7%;}
}



/* ==========================================================
  6KW and STYLING
========================================================== */

.u-section{
    padding-:0 var(--sp-h-2g);
}
main#keyitem .liveContents{
    display: block;
}
main#keyitem .fr-fixedAnchor{
    background: #f8f8f8;
}
main#keyitem .fr-fixedAnchor_item+.fr-fixedAnchor_item{
    border: 0;
}
main#keyitem {
    background:#f8f8f8;
}

main#keyitem img{
    width:100%;
}

main#keyitem .u-imgAdjustBox_inner img{
    margin:0 auto;
}
main#keyitem .preorderItems.products_inner,
main#keyitem p.fr-sp-mt-xl,
main#keyitem p.fr-pc-mt-xl{
    margin:4% 9%;
}
/*
.imgAdjustBox_inner,
.textBox{
    display: flex;

}

*/

main#keyitem .intro{margin: 0 5%;}

/* #styling */
main#keyitem .style01a{background-image: url(../keyitem/img/img_4styling_02a.png);}
main#keyitem .style01b{background-image: url(../keyitem/img/img_4styling_02b.png);}
main#keyitem .style01c{background-image: url(../keyitem/img/img_4styling_02c.png);}
main#keyitem .style01d{background-image: url(../keyitem/img/img_4styling_02d.png);}

main#keyitem .style02a{background-image: url(../keyitem/img/img_4styling_01a.png);}
main#keyitem .style02b{background-image: url(../keyitem/img/img_4styling_01b.png);}
main#keyitem .style02c{background-image: url(../keyitem/img/img_4styling_01c.png);}
main#keyitem .style02d{background-image: url(../keyitem/img/img_4styling_01d.png);}

main#keyitem .style03a{background-image: url(../keyitem/img/img_4styling_03a.png);}
main#keyitem .style03b{background-image: url(../keyitem/img/img_4styling_03b.png);}
main#keyitem .style03c{background-image: url(../keyitem/img/img_4styling_03c.png);}
main#keyitem .style03d{background-image: url(../keyitem/img/img_4styling_03d.png);}

main#keyitem .style04a{background-image: url(../keyitem/img/img_4styling_04a.png);}
main#keyitem .style04b{background-image: url(../keyitem/img/img_4styling_04b.png);}
main#keyitem .style04c{background-image: url(../keyitem/img/img_4styling_04c.png);}
main#keyitem .style04d{background-image: url(../keyitem/img/img_4styling_04d.png);}

main#keyitem #styling{
    border-top: 1px solid #ccc;

}

main#keyitem #styling .itemSection{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
    
}

main#keyitem #styling .itemEven{
    background-position: left top;

}


@media screen and (max-width: 389px) {
  /* inch for SP */
    main#keyitem #keyword .itemSection{padding-right:0%; padding-left:0%;}
    
    main#keyitem #styling .itemSection{margin-top:-8%; min-height:30vh;}
    main#keyitem #styling .textBox{margin: -7% 33% 0 0;}
    main#keyitem #styling .itemEven .textBox{margin: -8% 0 0 33%;}
    
    .preorderItems .products_itemBtn.cmgsn{display: inline-block;}


}


@media screen and (max-width: 894px) and (min-width: 390px) {
  /* inch for max-width: 894px */
    main#keyitem #keyword .itemSection{padding-right:7%; padding-left:7%;}
    
    main#keyitem #styling .itemSection{margin-top:-14%; min-height:45vh;}
    main#keyitem #styling .textBox{margin: 0 33% 0 0; padding-top: 10%;}
    main#keyitem #styling .itemEven .textBox{margin: auto 0 0 33%;}
}

@media screen and (min-width: 813px) {
 /* inch for PC */
    main#keyitem #keyword .itemSection{padding-right:15%; padding-left:15%;}
    main#keyitem .intro{margin: 0 20%;}
    
    main#keyitem #styling .itemSection{min-height:560px; margin:-10% 10% auto auto; padding-right:20%; padding-left:20%;}
    main#keyitem #styling .itemEven{margin-right:0; margin-left:10%;}
    main#keyitem #styling .textBox{margin: 0 30% 0 0; padding-top: 10vh;}
    main#keyitem #styling .itemEven .textBox{margin: auto 0 0 30%;}
    main#keyitem #styling .preorderItems.products_inner,main#keyitem #styling p.fr-sp-mt-xl,main#keyitem #styling p.fr-pc-mt-xl{margin:4% 0%;}
    main#keyitem .btn{padding-left: 20%; padding-right: 20%; padding-top:4%;}
}

main#keyitem #styling .style01a.itemSection,
main#keyitem #styling .style02a.itemSection,
main#keyitem #styling .style03a.itemSection,
main#keyitem #styling .style04a.itemSection{margin-top:2%;}

.products_item:nth-child(n+4){margin: 0;}




#index{
    background: #f1e8d7;
}

.contentList{
    padding:0 20%;
}

.contentList .content-wrap{
    display: flex;
    width: 100%;

}

.contentList a.content{
}

.contentList .content{
    display: block;
    width: 50%;
    background-size: cover;
    position: relative;
    margin: 5%;
    min-height: 20vh;
    text-decoration: none;
    color:#fff;
    padding: 1em;
}

.contentList .content.item01{
    background-image: url(../img/img_content_item01.jpg);

}

.contentList .content.item02{
    background-image: url(../img/img_content_item02.jpg);
}

.contentList .content.item03{
    background-image: url(../img/img_content_item03.jpg);
}

.contentList .content.item04{
    background-image: url(../img/img_content_item04.jpg);
}


.contentList .content div.lnkTit{
    position: absolute;
    bottom: 0;
    left:0;
    background: #000;
    opacity: 0.7;
    width: 100%;
}

.contentList .content div.lnkTit p{
    line-height: 2em;
    padding-left: 2em;

}



@media screen and (max-width: 389px) {
  /* inch for SP */
   .contentList .content-wrap{
    display: block;
    }
   .contentList .content{
    width: 93%;
    min-height: 35vh;
    margin: 5% 0;
    }
    .contentList{padding:0 7%;}
}


@media screen and (max-width: 894px) and (min-width: 390px) {
  /* inch for max-width: 894px */
    #index .itemSection{padding-right:7%; padding-left:7%;}
        .contentList{
    width: 80%;
}
   .contentList .content-wrap{
    display: block;
    }
   .contentList .content{
    width: 93%;
    min-height: 20vh;
    margin: 5% 0;
    }
    .contentList{padding:0 10%;}
}


@media screen and (min-width: 813px) {
 /* inch for PC */
    #index .itemSection{padding-right:20%; padding-left:20%;}
    .contentList .content{
    min-height: 325px;
    }
}