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

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

.main_inner {
	padding-bottom: 2rem;
}

/* Flow
------------------------------------------- */
.g-guide_flow { padding: 15px; background-color: #F4F4F4; }
.g-guide_flow-item { display: flex; align-items: center; font-size: 13px; line-height: 19.5px; }
.g-guide_flow-item:not(:first-child) { margin-top: 20px; }
.g-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-weight: 300; margin-right: 9px; }


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

/* .g-msaTabs */
.g-msaTabs { display: flex; border-bottom: 1px solid #dadada; }
.g-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; }
.g-genderTabs .g-msaTab { line-height: 18px; font-weight: 400; border-bottom: 4px solid transparent; }

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

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

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

/* .g-msaContent_models */
.g-msaContent_models { display: flex; flex-wrap: wrap; justify-content: space-between; }
.g-msaContent_model-item { width: calc((100% - 15px)/2); }
.g-msaContent_model-item:not(:nth-child(-n+2)) { margin-top: 21px; }
.g-models_heading { font-weight: 700; font-size: 13px; line-height: 19.5px; }
.g-models_body { font-size: 13px; line-height: 19.5px; margin-top: 9px; }
.g-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.gu-global.com/jp/ja/special-feature/feature/assets/images/chevron_carousel.svg) 0/6.5em 2em no-repeat; }
.swiper-button-next:after { background-position-x: -4em; }
.swiper-pagination-bullets {bottom: 0px;}


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

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

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

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



  /* .g-msaTabs */
  .g-msaTab { display: flex; justify-content: center; align-items: center; height: 76px; border-bottom: 4px solid transparent; }
  .g-genderTabs .g-msaTab { font-size: 20px; line-height: 24px; padding: 0; }
  .g-msaTabs_height .g-msaTab,
  .g-msaTabs_categorys .g-msaTab { font-size: 20px; line-height: 21px; padding: 0; height: 76px; }
  .g-msaTabs_categorys .g-msaTab.active:before { height: 4px; }
  .g-models_body_modelsize,
  .g-models_heading { font-size: 14px; line-height: 19.6px; }
  .g-msaContent_model-item { width: calc((100% - 72px)/4); }
  .g-msaContent_models .g-msaContent_model-item { margin-top: 28px; }
  .g-msaContent_models .g-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.gu-global.com/jp/ja/special-feature/feature/assets/images/chevron_carousel.svg) 0/7em 2em no-repeat; }
  .swiper-button-next:after { background-position-x: -4em; }

}