/* -------------------------------------------
 * SP
 * ---------------------------------------- */

/* Fig Aspect */
[data-aspect-ratio="330:494"]:before { padding-top:calc((494/330) * 100%) }


/* Flow
------------------------------------------- */
.u-guide_flow { padding: 15px; background-color: #F4F4F4; }
.u-guide_flow-item { display: flex; align-items: center; font-size: 13px; line-height: 19.5px; }
.u-guide_flow-item:not(:first-child) { margin-top: 15px; }
.u-guide_flow-item_num { display: flex; justify-content: center; align-items: center; border: 1px solid #1B1B1B; background-color: #fff; width: 25px; height: 25px; font-size: 18px; line-height: 19.5px; font-family: UniqloPro Regular, sans-serif; font-weight: 300; margin-right: 9px; }


/* Tabs
------------------------------------------- */

/* .u-msaTabs */
.u-msaTabs { display: flex; border-bottom: 1px solid #dadada; }
.u-msaTab { flex: 1; font-size: 15px; line-height: 21px; text-align: center; padding: 0 0 13px 0; margin: 0; border-bottom: 4px solid transparent; color: #ababab; font-weight: 600; cursor: pointer; }
.u-genderTabs .u-msaTab { line-height: 18px; font-family: UniqloPro Bold,sans-serif; font-weight: 400; border-bottom: 4px solid transparent; }

/* .u-msaTabs_categorys */
.u-msaTabs_categorys { flex-wrap: wrap; border-bottom: 0; }
.u-msaTabs_categorys .u-msaTab { display: flex; justify-content: center; align-items: center; flex: auto; width: calc(100%/3); height: 54px; padding: 0; color: #ababab; position: relative; }
.u-msaTabs_categorys .u-msaTab:after { display: block; content: ""; width: 100%; height: 1px; background-color: #dadada; position: absolute; left: 0; bottom: 0; }
.u-msaTabs_categorys .u-msaTab:nth-child(n+4) { width: 50%; }

/* .active */
.u-msaTab.active { color: #1b1b1b; border-bottom: 4px solid #1b1b1b; }
.u-genderTabs .u-msaTab.active { color: #1b1b1b; border-bottom: 4px solid #1b1b1b; }
.u-msaTabs_categorys .u-msaTab.active { border-bottom: 4px solid transparent; }
.u-msaTabs_categorys .u-msaTab.active:before { display: block; content: ""; width: 100%; height: 4px; background-color: #1b1b1b; position: absolute; left: 0; bottom: 1px; }

/* .u-msaContents */
.u-msaContents .u-msaContent { padding: 0; }
.u-msaContents > .u-msaContent { height: 0; overflow: hidden; }
.u-msaContents > .u-msaContent.active { height: auto; overflow: visible; }

/* .u-msaContent_models */
.u-msaContent_models { display: flex; flex-wrap: wrap; justify-content: space-between; }
.u-msaContent_model-item { width: calc((100% - 15px)/2); }
.u-msaContent_model-item:not(:nth-child(-n+2)) { margin-top: 21px; }
.u-models_heading { font-family: "ヒラギノ角ゴ Pro W6", sans-serif; font-weight: 700; font-size: 13px; line-height: 19.5px; }
.u-models_body { font-size: 13px; line-height: 19.5px; margin-top: 9px; }
.u-models_body_modelsize{ font-size: 13px; line-height: 19.5px; color:#7d7d7d; }

/* .swiper-button */
.swiper-button-next,
.swiper-button-prev { height: 30px; width: 30px; }
.swiper-button-next:after,
.swiper-button-prev:after { width: 30px; height: 30px; background: url(../../common/icons/chevron_carousel.svg) 0/6.5em 2em no-repeat; }
.swiper-button-next:after { background-position-x: -4em; }
.size-guide-sp{ width: 100% }


/* -------------------------------------------
 * PC
 * ---------------------------------------- */

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

  /* .u-align-pc-center */
  .u-align-pc-center { text-align: center; }

  /* Flow  */
  .u-guide_flow { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 726px; margin-left: auto; margin-right: auto; padding: 24px; }
  .u-guide_flow-item { width: calc((100% - 24px)/2); font-size: 14px; line-height: 19.6px; }
  .u-guide_flow-item:not(:nth-child(n+3)) { margin-top: 0; }
  .u-guide_flow-item_num { margin-right: 12px; }

  /* .u-msaTabs */
  .u-msaTab { display: flex; justify-content: center; align-items: center; height: 76px; border-bottom: 4px solid transparent; }
  .u-genderTabs .u-msaTab { font-size: 20px; line-height: 24px; padding: 0; }
  .u-msaTabs_height .u-msaTab,
  .u-msaTabs_categorys .u-msaTab { font-size: 20px; line-height: 21px; padding: 0; height: 76px; }
  .u-msaTabs_categorys .u-msaTab.active:before { height: 4px; }
  .u-models_body_modelsize,
  .u-models_heading { font-size: 14px; line-height: 19.6px; }
  .u-msaContent_model-item { width: calc((100% - 72px)/4); }
  .u-msaContent_models .u-msaContent_model-item { margin-top: 28px; }
  .u-msaContent_models .u-msaContent_model-item:not(:nth-child(n+5)) { margin-top: 0; }

  /* .swiper-button */
  .swiper-button-next,
  .swiper-button-prev { height: 40px; width: 40px; }
  .swiper-button-next:after,
  .swiper-button-prev:after { width: 40px; height: 40px; }
  .swiper-button-next:after,
  .swiper-button-prev:after { width: 40px; height: 40px; background: url(../../common/icons/chevron_carousel.svg) 0/7em 2em no-repeat; }
  .swiper-button-next:after { background-position-x: -4em; }


  /* size-guide */
  .size-guide{ text-align: center; }
  .size-guide-sp{ width: auto;}

}

/* popup */
.activePop .popupWhiteBg {
    width: 100vw;
    height: 100vh;
    background-color: white;
    opacity: .75;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}

.activePop .popupContent{
    display: block !important;
}

.popupContentClose{
    display: none !important;
}

.activePop a:hover:not(.fr-tabs_itemLink), 
.activePop a:hover img,.activePop  a:hover p, 
.activePop a[href]:not(.fr-tabs_itemLink):hover, 
.activePop a[href]:hover img,.activePop  a[href]:hover p, 
.activePop a[data-link]:hover, 
.activePop a[data-link]:hover img,{
    opacity: 1 !important;
}

@media screen and (orientation:portrait){

    .activePop .popupContentImg{
        position: fixed;
        top: 15vh;
        left: 50%;
        transform: translateX(-50%);
        overflow: hidden;
        z-index: 3;
        height: 75vh;
        width: 90vw;
    }

    .activePop .popupContentImg img {
        width: 100%;
        height: auto;
    }

    .popupCloseBtn{
        display: inline;
        line-height: 1;
        color: #ff0000;
        border-radius: 50%;
        padding: 0.3em;
        font-size: 26px;
        font-weight: bolder;
        position: fixed;
        top: 12vh;
        right: 8vw;
        cursor: pointer;
        z-index: 4;
    }
}
@media screen and (orientation:landscape){

    .activePop .popupContentImg{
        position: fixed;
        top: 2.5vh;
        left: 50%;
        transform: translateX(-50%);
        overflow: hidden;
        z-index: 120;
        height: 95vh;
    }

    .activePop .popupContentImg img {
        width: auto;
        height: 100%;
    }

    .popupCloseBtn{
        display: inline;
        line-height: 1;
        color: #ff0000;
        border-radius: 50%;
        padding: 0.3em;
        font-size: 26px;
        font-weight: bolder;
        position: fixed;
        top: 5vh;
        right: calc(50% - 45vh);
        cursor: pointer;
        z-index: 120;
    }
}


@media screen and (min-width: 813px) {
    .anchorAdjust {
        padding-top: 70px;

    }
    .img_size{width: 960px;margin: auto;margin-top: 30px}

/* popup */