/* -------------------------------------------
 * 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: 700; 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(https://www.uniqlo.com/jp/ja/contents/feature/common/icons/chevron_carousel.svg) 0/6.5em 2em no-repeat; }
.swiper-button-next:after { background-position-x: -4em; }

/* .button */
.seemore_button_container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: -1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  font-family: "ヒラギノ角ゴ Pro W6", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2;
}

.seemore_button_link{
  max-width: 100%;
  display: flex;
  flex: 1;
  min-width: 15rem;
  margin: 1rem 1.5rem;

  word-wrap: break-word;
  align-items: center;
  border: none;
  height: 3.25rem;
  justify-content: center;
  outline: 0;
  overflow: visible;
  padding: 0 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: .18s;
  transition-property: background-color,color;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  width: 100%;
}

.seemore_button_link:after{
  border: 1px solid #1b1b1b;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition-duration: .18s;
  transition-property: border-color;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  border-radius: 0;
  box-sizing: border-box;
}

.banner_container{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.banner_container .banner_link{
  max-width: 100%;
  margin: 1rem 1.5rem;
}

.banner_container .banner_link .banner_img{
  width: 100%;
}

.banner_container .banner_link img{
  max-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(https://www.uniqlo.com/jp/ja/contents/feature/common/icons/chevron_carousel.svg) 0/7em 2em no-repeat; }
  .swiper-button-next:after { background-position-x: -4em; }


  .seemore_button_link{
    max-width: calc(50% - 0.75rem);
  }

  .banner_container{
    max-width: calc(50% + 1rem);
    margin: 0 auto;
  }

  .banner_container .banner_link{
    margin: 1rem 0rem;
  }

  .banner_container .banner_link img{
    max-width: 450px;
  }

}