@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');

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

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

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

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

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

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

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

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

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

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

.p-limitedofferWrapper .fr-heading {
  margin-top: 24px;
}

body[data-bff-version=v3] .u-fixedAnchorAdjust.-short,
body[data-bff-version=v5] .u-fixedAnchorAdjust.-short,
body[data-bff-version=v3] .u-fixedAnchorAdjust.-inContents,
body[data-bff-version=v5] .u-fixedAnchorAdjust.-inContents {
  margin-top: -102px;
  padding-top: 102px;
}

.u-bgColor-style01 {
  background-color: #EEEDF0;
}

.u-bgColor-style02 {
  background-color: #F5F1E6;
}

.u-bgColor-style03 {
  background-color: #ECEEDD;
}

.p-lineup_inner {
  display: flex;
  flex-wrap: wrap;
}

.p-lineup_image {
  width: calc((120 / 375) * 100%);
}

.p-lineup_body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.p-lineup_body::after {
  position: absolute;
  content: "";
  background: url(https://www.uniqlo.com/jp/ja/special-feature/feature/common/icons/icon-arrow@2.0.0.svg) no-repeat center / cover;
  width: 26.06px;
  height: 14px;
  rotate: 90deg;
}

.p-lifeStyleHeading {
  font-family: 'Libre Baskerville', serif;
}

.p-lifeStyleHeading.-anchor {
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
}

.p-lifeStyleHeading.-sectionHeading {
  font-weight: 400;
  font-size: 20px;
  line-height: 27px;
}

.p-lifeStyleProductHeading {
  font-size: 16px;
  line-height: 24px;
}

.p-lineup_lead {
  font-size: 14px;
  line-height: 18px;
}

.p-lineup_productName {
  font-size: 14px;
  line-height: 18px;
}

.p-mainImageList {
  display: flex;
  flex-direction: column;
}

.fr-quate_container.-movieComment:before,
.fr-quate_container.-movieComment:after {
  background-color: #7d7d7d;
}

.p-categoryAnchorList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.p-categoryAnchorList_item {
  width: calc((99.99999% - 5.6vw) / 3);
  position: relative;
}

.p-categoryAnchorList_item::after {
  position: absolute;
  content: "";
  background: url(https://www.uniqlo.com/jp/ja/special-feature/common/icons/chevron_down.svg) no-repeat center / cover;
  width: 14px;
  height: 7px;
  bottom: 0;
  left: calc(50% - 7px);
  animation: arrowmove 1s ease-in-out infinite;
}

.p-categoryAnchorList_itemInner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(9px + 7px);
}

.p-categoryAnchorList_heading {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}

.fr-bff-products.-bgTransparent {
  background-color: transparent;
}

/* Animation */
@keyframes arrowmove {
  0% {
    bottom: 0%;
  }
  50% {
    bottom: 2%;
  }
  100% {
    bottom: 0%;
  }
}

@keyframes arrowmoveTop {
  0% {
    top: calc((100% - 8.025px) / 2);
  }
  50% {
    top: calc((100% - 13.025px) / 2);
  }
  100% {
    top: calc((100% - 8.025px) / 2);
  }
}

.fadeUp {
  opacity: 0;
}

.fadeUp[data-state="is-show"] {
  animation-name: fadeUp;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.fadeUp.-slow[data-state="is-show"] {
  animation-delay: 0.5s;
}

@keyframes fadeUp {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeDown {
  opacity: 0;
}

.fadeDown[data-state="is-show"] {
  animation-name: fadeDown;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.fadeDown.-slow[data-state="is-show"] {
  animation-delay: 0.5s;
}

@keyframes fadeDown {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*影片*/
.o-VideoAutoPlay_container {
  position: relative;
  padding-top: 100%;
  overflow: hidden;
}

.o-VideoAutoPlay.is-active {
  opacity: 1;
}

.o-VideoAutoPlayButton.-play {
  bottom: 4vw;
  right: 4vw;
}

.o-VideoAutoPlayButton.-muted {
  top: 4vw;
  left: 4vw;
}

.o-VideoAutoPlay {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all .3s;
}

.o-VideoAutoPlayButton[data-button-play="play"],
.o-VideoAutoPlayButton[data-button-play="stop"] {
  background-image: url(/jp/ja/special-feature/bratop/23ss/img/gl/icon-play.svg);
  background-position: 50%;
}

.o-VideoAutoPlayButton[data-button-play="stop"] {
  background-image: url(/jp/ja/special-feature/bratop/23ss/img/gl/icon-stop.svg);
}

.o-VideoAutoPlayButton {
  display: block;
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 24px 24px;
  position: absolute;
}

/*影片*/

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

/*影片*/
  .o-VideoAutoPlay_container {
    padding-top: calc(540 / 960 * 100%);
  }

  .o-VideoAutoPlayButton.-play {
    bottom: 20px;
    right: 20px;
  }

  .o-VideoAutoPlayButton.-muted {
    top: 20px;
    left: 20px;
  }
/*影片*/
  

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

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

  .p-limitedofferWrapper .fr-heading {
    margin-top: 28px;
  }

  body[data-bff-version=v3] .u-fixedAnchorAdjust.-inContents,
  body[data-bff-version=v5] .u-fixedAnchorAdjust.-inContents {
    margin-top: -39px;
    padding-top: 39px;
  }

  .p-lineupList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .p-lineupList_item {
    display: grid;
  }

  .p-lineup_inner {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
  }

  .p-lineup_body {
    display: grid;
    grid-template-rows: auto 1fr;
    padding-top: calc((44 * 100%) / 241);
    padding-bottom: calc(20px + 31px);
  }

  .p-lineup_image {
    width: 100%;
    grid-area: 2 / 1 / 3 / 2;
  }

  .p-lineup_body::after {
    width: 31px;
    height: 31px;
    bottom: 16px;
    left: calc((100% - 19px) / 2);
    animation: arrowmove 1s ease-in-out infinite;
  }

  .p-lifeStyleHeading.-anchor {
    font-size: 20px;
    line-height: 20px;
  }

  .p-lineup_lead {
    font-size: 20px;
    line-height: 28px;
  }

  .p-lineup_productName {
    font-size: 20px;
    line-height: 28px;
  }

  .p-lifeStyleHeading.-sectionHeading {
    font-size: 36px;
    line-height: 50px;
  }

  .p-lifeStyleProductHeading {
    font-size: 24px;
    line-height: 36px;
  }

  .p-container.-little {
    max-width: 624px;
  }

  .p-container.-small {
    max-width: 813px;
  }

  .p-container.-normal {
    max-width: 830px;
  }

  .u-pc-mt-85 {
    margin-top: 85px;
  }

  .u-pc-mt-157 {
    margin-top: 157px;
  }

  /* mainImage */
  .p-mainImageList {
    display: flex;
    flex-direction: row;
    position: relative;
  }

  .p-mainImageList.-reverse {
    display: flex;
    flex-direction: row-reverse;
    position: relative;
  }

  .p-mainImageList_item.-style01-01 {
    width: calc((330 / 830) * 100%);
  }

  .p-mainImageList_item.-style01-02 {
    width: calc((211 / 830) * 100%);
    margin-left: 46px;
    margin-top: 73px;
    z-index: 3;
  }

  .p-mainImageList_item.-style01-03 {
    position: absolute;
    right: 0;
    width: calc((343 / 830) * 100%);
    margin-top: 210px;
  }

  .p-mainImageList_item.-style02-01 {
    width: calc((360 / 813) * 100%);
  }

  .p-mainImageList_item.-style02-02 {
    position: absolute;
    left: 0;
    width: calc((205 / 813) * 100%);
    margin-top: 126px;
    z-index: 2;
  }

  .p-mainImageList_item.-style02-03 {
    position: absolute;
    left: 66px;
    width: calc((280 / 813) * 100%);
    margin-top: 278px;
    z-index: 3;
  }

  .p-mainImageList_item.-style03-01 {
    width: calc((446 / 813) * 100%);
    margin-top: 83px;
  }

  .p-mainImageList_item.-style03-02 {
    position: absolute;
    top: 152px;
    left: 0;
    width: calc((223 / 813) * 100%);
    z-index: 3;
  }

  .p-mainImageList_item.-style03-03 {
    position: absolute;
    left: 88px;
    width: calc((230 / 813) * 100%);
    z-index: 2;
  }

  .p-categoryAnchorList_item {
    width: calc((140 / 1176) * 100%);
  }

  .p-categoryAnchorList_item:not(:nth-of-type(7n)):not(:last-of-type) {
    margin-right: 24px;
  }

  .p-categoryAnchorList_itemInner {
    padding-bottom: calc(12px + 7px);
  }

  .p-categoryAnchorList_heading {
    font-size: 14px;
    line-height: 21px;
  }
}

@media screen and (max-width: 812px) {
  .p-lineupList_item {
    border-top: 1px solid #dadada;
  }

  .p-lineupList_item:last-of-type {
    border-bottom: 1px solid #dadada;
  }

  .p-lineup_body {
    flex: 1;
    margin-left: 21px;
    padding-right: calc(21px + 26.06px);
  }

  .p-lineup_body::after {
    right: 21px;
    animation: arrowmoveTop 1s ease-in-out infinite;
  }

  .p-categoryAnchorList_item:not(:nth-of-type(3n)) {
    margin-right: 2.8vw;
  }

  .p-categoryAnchorList_item:nth-of-type(n + 4) {
    margin-top: 21px;
  }

  /* mainImage */
  .p-mainImageList_item.-style01-01 {
    width: calc((165 / 375) * 100%);
    margin-left: 4vw;
  }

  .p-mainImageList_item.-style01-02 {
    width: calc((145 / 375) * 100%);
    margin-top: -86px;
    align-self: flex-end;
  }

  .p-mainImageList_item.-style01-03 {
    width: calc((275 / 375) * 100%);
    margin-left: 10.667vw;
    margin-top: 35px;
  }

  .p-mainImageList_item.-style02-01 {
    width: calc((180 / 375) * 100%);
    align-self: flex-end;
  }

  .p-mainImageList_item.-style02-02 {
    width: calc((155 / 375) * 100%);
    margin-top: -64px;
    z-index: 3;
  }

  .p-mainImageList_item.-style02-03 {
    width: calc((255 / 375) * 100%);
    margin-left: 21.333vw;
    margin-top: -20px;
  }

  .p-mainImageList_item.-style03-01 {
    width: calc((285 / 375) * 100%);
    align-self: flex-end;
    margin-right: 4vw;
  }

  .p-mainImageList_item.-style03-02 {
    width: calc((145 / 375) * 100%);
    margin-top: -16px;
    z-index: 3;
  }

  .p-mainImageList_item.-style03-03 {
    width: calc((200 / 375) * 100%);
    margin-top: -30px;
    align-self: flex-end;
  }
}