.page-bag,
.page-bag .l-page {
  -webkit-font-smoothing: antialiased
}

.page-bag .l-page {
  margin-top: 64px
}

@media screen and (min-width:992px) {
  .page-bag .l-page {
    margin-top: 80px
  }
}

.page-bag .js-fadeIn {
  opacity: 0;
  overflow: hidden;
  transform: translateY(32px);
  transition: opacity .8s ease-in-out .02s, transform .02s ease-in-out
}

.page-bag .js-fadeIn img {
  transform: scale(1.05);
  transition: transform .8s ease-in-out .02s;
  transition-timing-function: cubic-bezier(.5, 0, 0, 1)
}

.page-bag .js-fadeIn.is-active {
  opacity: 1;
  transform: translateY(0)
}

.page-bag .js-fadeIn.is-active img {
  transform: scale(1)
}

.page-bag .common {
  background-color: #fff
}

.page-bag .common__text {
  margin: 0 auto
}

@media screen and (min-width:992px) {
  .page-bag .common__text {
    max-width: 880px;
    padding-left: 40px;
    padding-right: 40px
  }
}

.page-bag .common__text .title {
  font-size: clamp(18px, 2.2177419355vw, 22px);
  font-weight: 500;
  letter-spacing: .1em;
  text-align: center
}

.page-bag .act {
  padding: 38px 26px 0;
  width: 100%
}

@media screen and (min-width:992px) {
  .page-bag .act {
    margin-left: auto;
    margin-right: auto;
    padding: 40px 0 0
  }
}

.page-bag .act--second {
  padding-top: 10px
}

@media screen and (min-width:992px) {
  .page-bag .act--second {
    padding-top: 20px
  }
}

.page-bag .act a {
  align-items: center;
  background-color: #f4f0e9;
  border: 1px solid #929292;
  display: flex;
  flex-flow: column;
  height: 67px;
  justify-content: center;
  margin: 0 auto;
  max-width: 275px;
  row-gap: 5px;
  transition: .2s ease;
  width: 100%
}

@media(any-hover:hover) {
  .page-bag .act a:hover {
    background-color: #929292;
    opacity: 1;
    transition: .2s ease
  }

  .page-bag .act a:hover p {
    color: #f4f0e9;
    transition: .2s ease
  }

  .page-bag .act a:hover .arrow path {
    stroke: #f4f0e9;
    transition: stroke .2s ease
  }
}

@media screen and (min-width:992px) {
  .page-bag .act a {
    height: 144px;
    row-gap: 20px
  }
}

.page-bag .act a p {
  font-size: clamp(13px, 1.4112903226vw, 14px);
  font-weight: 500
}

.page-bag .main-visual {
  background-color: #fff;
  position: relative
}

.page-bag .main-visual .main-visual__title {
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: 0 auto;
  padding: 0 0 3.3%;
  position: absolute;
  text-align: center;
  top: 51%;
  width: 100%
}

@media screen and (min-width:768px) {
  .page-bag .main-visual .main-visual__title {
    background: none;
    left: 3.2%;
    margin: 0;
    padding: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50%
  }
}

@media screen and (min-width:992px) {
  .page-bag .main-visual .main-visual__title {
    left: 7.98%;
    width: -moz-fit-content;
    width: fit-content
  }
}

@media screen and (min-width:1440px) {
  .page-bag .main-visual .main-visual__title {
    width: 532px
  }
}

.page-bag .main-visual .main-visual__title-inner {
  background-color: rgba(0, 0, 0, .4);
  margin: 0 auto;
  padding: 25px 24px;
  width: 100%
}

@media screen and (min-width:554px) {
  .page-bag .main-visual .main-visual__title-inner {
    max-width: 509px
  }
}

@media screen and (min-width:768px) {
  .page-bag .main-visual .main-visual__title-inner {
    background: none;
    max-width: none;
    padding: 0
  }
}

.page-bag .main-visual .main-visual__title .logo {
  font-size: clamp(20px, 1.8055555556vw, 28px);
  font-weight: 500;
  letter-spacing: .1em
}

.page-bag .main-visual .main-visual__title .logo p {
  border-bottom: 1px solid #fff;
  color: #fff;
  display: inline-block;
  margin: 0 auto;
  padding-bottom: 12px
}

@media screen and (min-width:768px) {
  .page-bag .main-visual .main-visual__title .logo p {
    border-bottom: 1px solid #707070;
    color: #000
  }
}

@media screen and (min-width:992px) {
  .page-bag .main-visual .main-visual__title .logo p {
    padding-bottom: 6px
  }
}

.page-bag .main-visual .main-visual__title .title {
  color: #fff;
  font-size: clamp(24px, 2.2222222222vw, 32px);
  font-weight: 500;
  letter-spacing: .1em;
  margin-top: 16px
}

@media screen and (min-width:768px) {
  .page-bag .main-visual .main-visual__title .title {
    color: #000;
    margin-top: 24px
  }
}

.page-bag .main-visual .main-visual__img {
  aspect-ratio: 390/600;
  width: 100%
}

@media screen and (min-width:768px) {
  .page-bag .main-visual .main-visual__img {
    aspect-ratio: 1440/730
  }

  .page-bag .main-visual .main-visual__img img {
    height: 600px;
    -o-object-fit: cover;
    object-fit: cover
  }
}

@media screen and (min-width:992px) {
  .page-bag .main-visual .main-visual__img img {
    height: auto;
    -o-object-fit: initial;
    object-fit: fill
  }
}

.page-bag .intro {
  background-color: #fff
}

.page-bag .intro .intro-container {
  margin: 0 auto;
  padding: clamp(80px, 10.0806451613vw, 100px) 7.6% 0;
  text-align: center
}

@media screen and (max-width:389px) {
  .page-bag .intro .intro-container {
    padding: clamp(80px, 10.0806451613vw, 100px) 4% 0
  }
}

@media screen and (min-width:992px) {
  .page-bag .intro .intro-container {
    max-width: 880px;
    padding-left: 40px;
    padding-right: 40px
  }
}

.page-bag .intro__head {
  font-size: clamp(20px, 2.6209677419vw, 26px);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.7
}

.page-bag .intro__description {
  font-size: clamp(13px, 1.4112903226vw, 14px);
  letter-spacing: .05em;
  line-height: 2.14;
  padding-top: clamp(30px, 4.0322580645vw, 40px);
  text-align: start
}

@media screen and (max-width:389px) {
  .page-bag .intro__description {
    padding-left: 7%;
    padding-right: 7%
  }
}

.page-bag .bag {
  padding-top: clamp(80px, 17.1370967742vw, 120px)
}

.page-bag .bag .common__content {
  height: auto
}

.page-bag .bag .common__content .head {
  margin: 0 auto;
  position: relative;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content
}

.page-bag .bag .common__content .head:before {
  background-image: url(https://wako.itembox.design/item/assets/images/2025annenakamura/annenakamura-bag/content_head-left.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 11px;
  left: -8%;
  position: absolute;
  top: 0;
  width: 12px
}

@media screen and (min-width:992px) {
  .page-bag .bag .common__content .head:before {
    height: 14px;
    left: -14%;
    width: 15px
  }
}

.page-bag .bag .common__content .head:after {
  background-image: url(https://wako.itembox.design/item/assets/images/2025annenakamura/annenakamura-bag/content_head-right.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 11px;
  position: absolute;
  right: -8%;
  top: 0;
  width: 12px
}

@media screen and (min-width:992px) {
  .page-bag .bag .common__content .head:after {
    height: 14px;
    right: -14%;
    width: 15px
  }
}

.page-bag .bag .common__content .head h4 {
  font-size: clamp(18px, 2.2177419355vw, 22px);
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.82;
  padding-top: 8px
}

.page-bag .bag .common__wrapper-container {
  padding: 40px 0 80px
}

@media screen and (min-width:992px) {
  .page-bag .bag .common__wrapper-container {
    padding: 0 0 150px
  }
}

.page-bag .bag .common__wrapper {
  display: block
}

@media screen and (min-width:992px) {
  .page-bag .bag .common__wrapper {
    align-items: center;
    display: flex
  }
}

@media screen and (min-width:1200px) {
  .page-bag .bag .common__wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 1300px;
    width: 100%
  }
}

@media screen and (min-width:1440px) {
  .page-bag .bag .common__wrapper {
    overflow: visible
  }
}

.page-bag .bag .common__wrapper .image {
  height: -moz-fit-content;
  height: fit-content;
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
  width: 100%
}

.page-bag .bag .common__wrapper .image img {
  aspect-ratio: 39/52
}

@media screen and (min-width:992px) {
  .page-bag .bag .common__wrapper .image {
    margin-left: 0;
    margin-right: 0;
    max-width: 800px;
    position: relative;
    width: 61.5%
  }
}

@media screen and (min-width:1440px) {
  .page-bag .bag .common__wrapper .image {
    width: 100%
  }
}

.page-bag .bag .common__wrapper .image .note {
  font-size: clamp(11px, 1.2096774194vw, 12px);
  letter-spacing: .05em;
  margin-top: 10px;
  padding: 0 10.2%
}

@media screen and (min-width:992px) {
  .page-bag .bag .common__wrapper .image .note {
    max-width: 420px;
    padding: 0;
    width: 100%
  }
}

.page-bag .bag .common__wrapper .info {
  padding: 40px 10.2% 44px
}

@media screen and (min-width:992px) {
  .page-bag .bag .common__wrapper .info {
    margin-top: 0;
    padding: 0 4%
  }
}

.page-bag .bag .common__wrapper .info .detail {
  font-size: clamp(13px, 1.4112903226vw, 14px);
  letter-spacing: .05em;
  line-height: 1.85;
  margin: 0 auto;
  max-width: 509px;
  padding: 26px;
  position: relative
}

@media screen and (min-width:992px) {
  .page-bag .bag .common__wrapper .info .detail {
    margin: 0 auto;
    max-width: 377px;
    padding: 50px
  }
}

.page-bag .bag .common__wrapper .info .detail:before {
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  content: "";
  height: 35.5px;
  left: 0;
  position: absolute;
  top: 0;
  width: 22px
}

@media screen and (min-width:1440px) {
  .page-bag .bag .common__wrapper .info .detail:before {
    height: 121px;
    width: 65px
  }
}

.page-bag .bag .common__wrapper .info .detail:after {
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  bottom: 0;
  content: "";
  height: 35.5px;
  position: absolute;
  right: 0;
  width: 22px
}

@media screen and (min-width:1440px) {
  .page-bag .bag .common__wrapper .info .detail:after {
    height: 121px;
    width: 65px
  }
}

.page-bag .bag .common__wrapper .info .detail--wide {
  min-width: 314px
}

@media screen and (min-width:992px) {
  .page-bag .bag .common__wrapper .info .detail--wide {
    max-width: 382px
  }
}

.page-bag .bag .common__wrapper--right {
  position: relative
}

.page-bag .bag .common__wrapper--right:before {
  background-color: rgba(141, 119, 80, .4);
  bottom: 0;
  content: "";
  height: 100%;
  left: 50%;
  max-width: 600px;
  position: absolute;
  transform: translateX(-50%);
  width: 92.3%;
  z-index: -1
}

@media screen and (min-width:992px) {
  .page-bag .bag .common__wrapper--right:before {
    height: 70%;
    left: auto;
    max-width: none;
    right: 0;
    top: 50%;
    transform: translateX(0) translateY(-50%);
    width: 102%
  }
}

@media screen and (min-width:1440px) {
  .page-bag .bag .common__wrapper--right:before {
    height: 68%
  }
}

@media screen and (min-width:992px) {
  .page-bag .bag .common__wrapper--right .image {
    padding-top: 80px
  }

  .page-bag .bag .common__wrapper--right .note {
    height: 70px;
    margin-left: auto;
    text-align: right
  }
}

.page-bag .bag .common__wrapper--left {
  margin-top: 80px;
  position: relative
}

@media screen and (min-width:992px) {
  .page-bag .bag .common__wrapper--left {
    flex-direction: row-reverse;
    margin-top: 18px
  }
}

.page-bag .bag .common__wrapper--left:before {
  background-color: hsla(38, 33%, 94%, .4);
  bottom: 0;
  content: "";
  height: 100%;
  left: 50%;
  max-width: 600px;
  position: absolute;
  transform: translateX(-50%);
  width: 92.3%;
  z-index: -1
}

@media screen and (min-width:992px) {
  .page-bag .bag .common__wrapper--left:before {
    height: 70%;
    left: 0;
    max-width: none;
    right: auto;
    top: 50%;
    transform: translateX(0) translateY(-50%);
    width: 102%
  }
}

@media screen and (min-width:1440px) {
  .page-bag .bag .common__wrapper--left:before {
    height: 57.5%
  }
}

.page-bag .bag .common__wrapper--left .info .detail:before {
  border-left: 1px solid #b2b2b2;
  border-top: 1px solid #b2b2b2
}

.page-bag .bag .common__wrapper--left .info .detail:after {
  border-bottom: 1px solid #b2b2b2;
  border-right: 1px solid #b2b2b2
}

@media screen and (min-width:992px) {
  .page-bag .bag .common__wrapper--left .image {
    padding-top: 82px
  }

  .page-bag .bag .common__wrapper--left .note {
    height: 70px;
    margin-right: auto;
    text-align: left;
    vertical-align: top
  }
}

.page-bag .about {
  margin-top: 100vh;
  padding: 103px 3.8% 0;
  width: 100%
}

@media screen and (min-width:992px) {
  .page-bag .about {
    padding: 150px 13.6% 0
  }
}

.page-bag .about-container {
  background-color: hsla(0, 0%, 95%, .5);
  padding: 38px 30px 53px;
  width: 100%
}

@media screen and (min-width:1440px) {
  .page-bag .about-container {
    margin: 0 auto;
    max-width: 1047px;
    padding: 66px 124px 107px
  }
}

.page-bag .about .japanese {
  margin: 0 auto;
  width: 242px
}

.page-bag .about .japanese img {
  aspect-ratio: 271/82
}

@media screen and (min-width:992px) {
  .page-bag .about .japanese {
    width: 271px
  }
}

.page-bag .about .title {
  font-size: clamp(18px, 2.2177419355vw, 22px);
  font-weight: 500;
  letter-spacing: .1em;
  margin-top: 10px;
  text-align: center
}

@media screen and (min-width:992px) {
  .page-bag .about .title {
    margin-top: 15px
  }
}

@media screen and (min-width:1440px) {
  .page-bag .about .common__text {
    padding: 0
  }
}

.page-bag .about .description {
  font-size: clamp(13px, 1.4112903226vw, 14px);
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 2.15;
  padding: 30px 0 0;
  text-align: start
}

@media screen and (min-width:992px) {
  .page-bag .about .description {
    padding: 50px 0 0
  }
}

.page-bag .section-collection {
  background-color: #fff;
  padding: 80px 7.7% 0
}

@media screen and (min-width:992px) {
  .page-bag .section-collection {
    padding: 100px 2.7% 0
  }
}

.page-bag .section-collection .title {
  line-height: 1.56
}

.page-bag .section-collection__list {
  align-items: center;
  display: flex;
  flex-flow: column;
  gap: 40px;
  justify-content: center;
  padding-top: 40px
}

@media screen and (min-width:992px) {
  .page-bag .section-collection__list {
    align-items: flex-start;
    flex-flow: row;
    gap: 20px
  }
}

.page-bag .section-collection__item {
  max-width: 440px;
  text-align: center;
  width: 100%
}

.page-bag .section-collection__image {
  aspect-ratio: 4/3;
  height: -moz-fit-content;
  height: fit-content;
  max-width: 440px;
  width: 100%
}

.page-bag .section-collection__image img {
  width: 100%
}

.page-bag .section-collection__content h4 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .1em;
  margin-top: 20px
}

@media screen and (min-width:992px) {
  .page-bag .section-collection__content h4 {
    font-size: clamp(15px, 1.5vw, 18px)
  }
}

@media screen and (min-width:1200px) {
  .page-bag .section-collection__content h4 {
    font-size: 18px
  }
}

.page-bag .section-collection__content .description {
  font-size: clamp(11px, 1.2096774194vw, 12px);
  letter-spacing: .05em;
  line-height: 1.45;
  margin-top: 15px;
  padding: 0 4.5%;
  text-align: start
}

@media screen and (min-width:992px) {
  .page-bag .section-collection__content .description {
    padding: 0 8%
  }
}

.page-bag .section-collection__content .act {
  margin: 20px auto 0;
  padding: 0
}

.page-bag .section-collection__content .act a {
  align-items: center;
  -moz-column-gap: 10px;
  column-gap: 10px;
  flex-flow: row;
  height: 35px;
  justify-content: center;
  width: 200px
}

@media screen and (min-width:992px) {
  .page-bag .section-collection__content .act a {
    height: 42px
  }
}

.page-bag .section-collection__content .act a p {
  margin-bottom: 0;
  position: relative
}

.page-bag .section-movie {
  background-color: #fff;
  margin: 0 auto;
  padding: clamp(80px, 10.0806451613vw, 100px) 7.69% 0;
  text-align: center;
  width: 100%
}

.page-bag .section-movie__title {
  font-size: clamp(18px, 2.2177419355vw, 22px);
  font-weight: 500;
  letter-spacing: .1em
}

@media screen and (min-width:992px) {
  .page-bag .section-movie__title {
    align-items: center;
    display: flex;
    gap: 28px;
    justify-content: center
  }
}

.page-bag .section-movie__description {
  font-size: clamp(16px, 2.2177419355vw, 22px);
  font-weight: 500;
  margin-top: 15px
}

.page-bag .section-movie__content {
  aspect-ratio: 16/9;
  height: auto;
  margin: 25px auto 0;
  max-width: 1280px
}

@media screen and (min-width:992px) {
  .page-bag .section-movie__content {
    margin-top: 30px
  }
}

.page-bag .section-movie__content iframe {
  height: 100%;
  width: 100%
}

.page-bag .section-bg {
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: -1
}

.page-bag .section-bg .bg-01 {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 100%
}

.page-bag .section-bg .bg-01.is-active {
  opacity: 1;
  visibility: visible
}

.page-bag .section-bg .bg-01 img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%
}

.page-bag .section-bg .bg-01 .note {
  bottom: clamp(10px, 1.6129032258vw, 16px);
  color: #fff;
  font-size: clamp(11px, 1.2096774194vw, 12px);
  left: clamp(14px, 1.6129032258vw, 16px);
  position: absolute
}

.page-bag .about__link {
  background-color: #fff;
  padding: clamp(60px, 10.0806451613vw, 100px) 0
}

.page-bag .about__link .about__link-container {
  margin: 0 auto;
  max-width: 500px;
  padding: 0 7.7%
}

@media screen and (min-width:992px) {
  .page-bag .about__link .about__link-container {
    max-width: 714px;
    padding: 0 40px
  }
}

.page-bag .about__link .about__link-inner {
  background-color: #f4f0e9;
  border: 1px solid #929292;
  display: grid;
  grid-template-columns: 29.56% 70.44%;
  transition: .2s ease
}

@media(any-hover:hover) {
  .page-bag .about__link .about__link-inner:hover {
    background-color: #929292;
    opacity: 1;
    transition: .2s ease
  }

  .page-bag .about__link .about__link-inner:hover .text {
    color: #f4f0e9;
    transition: .2s ease
  }

  .page-bag .about__link .about__link-inner:hover .arrow path {
    stroke: #f4f0e9;
    transition: stroke .2s ease
  }

  .page-bag .about__link .about__link-inner:hover .image img {
    transform: scale(1.2);
    transition: .2s ease
  }
}

.page-bag .about__link .image {
  height: 100%;
  overflow: hidden
}

.page-bag .about__link .image img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform .2s ease
}

.page-bag .about__link .text {
  align-items: center;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  gap: 20px;
  justify-content: space-between;
  letter-spacing: 0;
  padding: 12px 26px 12px 34px;
  transition: .2s ease
}

@media screen and (max-width:389px) {
  .page-bag .about__link .text {
    padding: 12px 15px
  }
}

@media screen and (min-width:992px) {
  .page-bag .about__link .text {
    align-items: center;
    flex-flow: column;
    font-size: 16px;
    justify-content: center
  }
}

.page-apparel {
  -webkit-font-smoothing: antialiased
}

.page-apparel .l-page {
  margin-top: 64px
}

@media screen and (min-width:992px) {
  .page-apparel .l-page {
    margin-top: 80px
  }
}

.page-apparel .js-fadeIn {
  opacity: 0;
  overflow: hidden;
  transform: translateY(32px);
  transition: opacity .8s ease-in-out .02s, transform .02s ease-in-out
}

.page-apparel .js-fadeIn img {
  transform: scale(1.05);
  transition: transform .8s ease-in-out .02s;
  transition-timing-function: cubic-bezier(.5, 0, 0, 1)
}

.page-apparel .js-fadeIn.is-active {
  opacity: 1;
  transform: translateY(0)
}

.page-apparel .js-fadeIn.is-active img {
  transform: scale(1)
}

.page-apparel .common {
  background-color: #fff
}

.page-apparel .common__text {
  margin: 0 auto
}

@media screen and (min-width:992px) {
  .page-apparel .common__text {
    max-width: 880px;
    padding-left: 40px;
    padding-right: 40px
  }
}

.page-apparel .common__text .update {
  height: 77px;
  margin: 0 auto;
  width: 133px
}

.page-apparel .common__text .title {
  font-size: clamp(18px, 2.2177419355vw, 22px);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.56;
  text-align: center
}

.page-apparel .common__text .description {
  font-size: clamp(13px, 1.4112903226vw, 14px);
  letter-spacing: .05em;
  line-height: 1.85;
  padding: clamp(30px, 4.0322580645vw, 40px) 7.6% 0;
  text-align: start
}

@media screen and (min-width:992px) {
  .page-apparel .common__text .description {
    padding: 40px 0 0;
    text-align: center
  }

  .page-apparel .common__text .description--start {
    text-align: start
  }
}

.page-apparel .common__content {
  height: auto
}

@media screen and (min-width:992px) {
  .page-apparel .common__content {
    margin: 0 auto;
    padding: 0 3%;
    width: 100%
  }
}

@media screen and (min-width:1200px) {
  .page-apparel .common__content {
    max-width: calc(1280px + 11%);
    padding: 0 5.5%
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .common__content {
    max-width: 1280px;
    padding-left: 0;
    padding-right: 0
  }
}

@media screen and (min-width:992px) {
  .page-apparel .common__content .title {
    margin-top: clamp(30px, 5vw, 60px)
  }
}

@media screen and (min-width:1200px) {
  .page-apparel .common__content .title {
    margin-top: clamp(70px, 7.6388888889vw, 110px)
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .common__content .title {
    margin-top: 185px
  }
}

.page-apparel .common__content .title .recommendation {
  margin: 0 auto 21px;
  width: 144px
}

.page-apparel .common__content .title .recommendation img {
  aspect-ratio: 173/29;
  width: 100%
}

@media screen and (min-width:992px) {
  .page-apparel .common__content .title .recommendation {
    height: 29px;
    margin-bottom: 50px;
    width: 173px
  }
}

.page-apparel .common__content .head {
  margin: 0 auto;
  position: relative;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content
}

.page-apparel .common__content .head:before {
  background-image: url(https://wako.itembox.design/item/assets/images/2025annenakamura/annenakamura-apparel/content_head-left.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 11px;
  left: 0;
  position: absolute;
  top: 0;
  width: 12px
}

@media screen and (min-width:992px) {
  .page-apparel .common__content .head:before {
    height: 14px;
    width: 15px
  }
}

.page-apparel .common__content .head:after {
  background-image: url(https://wako.itembox.design/item/assets/images/2025annenakamura/annenakamura-apparel/content_head-right.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 11px;
  position: absolute;
  right: 0;
  top: 0;
  width: 12px
}

@media screen and (min-width:992px) {
  .page-apparel .common__content .head:after {
    height: 14px;
    width: 15px
  }
}

.page-apparel .common__content .head h4 {
  font-size: clamp(18px, 2.2177419355vw, 22px);
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.82;
  padding-top: 8px
}

.page-apparel .common__content .head--apart:before {
  left: -6%
}

.page-apparel .common__content .head--apart:after {
  right: -6%
}

@media screen and (min-width:1440px) {
  .page-apparel .common__content .image {
    width: 820px
  }
}

.page-apparel .common__content .image img {
  width: 100%
}

.page-apparel .common__content .image--sub-item {
  margin-left: auto;
  max-width: 560px;
  width: 83%
}

@media screen and (min-width:554px) {
  .page-apparel .common__content .image--sub-item {
    margin: 0 auto
  }
}

@media screen and (min-width:992px) {
  .page-apparel .common__content .image--sub-item {
    max-width: none;
    width: 100%
  }
}

.page-apparel .common__content .image .note {
  font-size: clamp(11px, 1.2096774194vw, 12px);
  letter-spacing: .05em;
  margin: 10px auto 0;
  max-width: 640px;
  width: 100%
}

.page-apparel .common__content .info {
  padding: 0 9.2%
}

@media screen and (min-width:992px) {
  .page-apparel .common__content .info {
    margin-top: 60px;
    padding: 0 4%
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .common__content .info {
    margin-top: 60px;
    padding: 0
  }
}

.page-apparel .common__content .info .detail {
  font-size: clamp(13px, 1.4112903226vw, 14px);
  letter-spacing: .05em;
  line-height: 1.85;
  padding: 30px;
  position: relative
}

@media screen and (min-width:992px) {
  .page-apparel .common__content .info .detail {
    margin: 0 auto;
    max-width: 377px;
    padding: 50px
  }
}

.page-apparel .common__content .info .detail:before {
  border-left: 1px solid #b2b2b2;
  border-top: 1px solid #b2b2b2;
  content: "";
  height: 73px;
  left: 0;
  position: absolute;
  top: 0;
  width: 45px
}

@media screen and (min-width:1440px) {
  .page-apparel .common__content .info .detail:before {
    height: 121px;
    width: 65px
  }
}

.page-apparel .common__content .info .detail:after {
  border-bottom: 1px solid #b2b2b2;
  border-right: 1px solid #b2b2b2;
  bottom: 0;
  content: "";
  height: 73px;
  position: absolute;
  right: 0;
  width: 45px
}

@media screen and (min-width:1440px) {
  .page-apparel .common__content .info .detail:after {
    height: 121px;
    width: 65px
  }
}

.page-apparel .common__content .info .act {
  padding: 0 26px;
  width: 100%
}

@media screen and (min-width:992px) {
  .page-apparel .common__content .info .act {
    margin-left: auto;
    margin-right: auto;
    padding: 0
  }
}

.page-apparel .common__content .info .act a {
  align-items: center;
  background-color: #f4f0e9;
  border: 1px solid #929292;
  display: flex;
  flex-flow: column;
  height: 67px;
  justify-content: center;
  margin: 0 auto;
  max-width: 275px;
  row-gap: 5px;
  transition: .2s ease;
  width: 100%
}

@media(any-hover:hover) {
  .page-apparel .common__content .info .act a:hover {
    background-color: #929292;
    opacity: 1;
    transition: .2s ease
  }

  .page-apparel .common__content .info .act a:hover p {
    color: #f4f0e9;
    transition: .2s ease
  }

  .page-apparel .common__content .info .act a:hover .arrow path {
    stroke: #f4f0e9;
    transition: stroke .2s ease
  }
}

@media screen and (min-width:992px) {
  .page-apparel .common__content .info .act a {
    height: 106px;
    row-gap: 15px
  }
}

@media screen and (min-width:1200px) {
  .page-apparel .common__content .info .act a {
    height: 144px;
    row-gap: 30px
  }
}

.page-apparel .common__content .info .act a p {
  font-size: clamp(13px, 1.4112903226vw, 14px);
  font-weight: 500
}

@media screen and (min-width:992px) {
  .page-apparel .common__content--right {
    -moz-column-gap: 20px;
    column-gap: 20px;
    display: grid;
    grid-template-columns: 53% 1fr;
    grid-template-rows: auto 1fr
  }
}

@media screen and (min-width:992px) and (min-width:1200px) {
  .page-apparel .common__content--right {
    -moz-column-gap: 40px;
    column-gap: 40px
  }
}

@media screen and (min-width:992px) and (min-width:1440px) {
  .page-apparel .common__content--right {
    -moz-column-gap: 75px;
    column-gap: 75px;
    grid-template-columns: auto 1fr
  }
}

.page-apparel .common__content--right .head {
  align-items: center;
  display: flex;
  grid-column: 2/3;
  grid-row: 1/2;
  margin-top: 0
}

.page-apparel .common__content--right .image {
  grid-column: 1/2;
  grid-row: 1/3
}

@media screen and (min-width:992px) {
  .page-apparel .common__content--right .image {
    padding-right: 0
  }
}

.page-apparel .common__content--right .info {
  grid-column: 2/3;
  grid-row: 2/3
}

@media screen and (min-width:992px) {
  .page-apparel .common__content--sub {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    justify-content: end
  }
}

@media screen and (min-width:1200px) {
  .page-apparel .common__content--sub {
    align-items: start;
    -moz-column-gap: 6.25%;
    column-gap: 6.25%;
    grid-template-columns: auto auto
  }
}

.page-apparel .common__content--sub .head {
  align-items: center;
  display: flex;
  grid-column: 1/2;
  grid-row: 1/2;
  margin-top: 0
}

.page-apparel .common__content--sub .image {
  grid-column: 2/3;
  grid-row: 1/3
}

@media screen and (min-width:992px) {
  .page-apparel .common__content--sub .image {
    padding-left: 0
  }
}

@media screen and (min-width:1200px) {
  .page-apparel .common__content--sub .image {
    max-width: 670px
  }
}

.page-apparel .common__content--sub .info {
  grid-column: 1/2;
  grid-row: 2/3
}

@media screen and (min-width:992px) {
  .page-apparel .common__content--sub .info {
    margin-top: clamp(40px, 4.1666666667vw, 60px);
    padding: 0
  }

  .page-apparel .common__content--left {
    -moz-column-gap: 20px;
    column-gap: 20px;
    display: grid;
    grid-template-columns: 1fr 52%;
    grid-template-rows: auto 1fr
  }
}

@media screen and (min-width:1200px) {
  .page-apparel .common__content--left {
    -moz-column-gap: 40px;
    column-gap: 40px
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .common__content--left {
    -moz-column-gap: 75px;
    column-gap: 75px;
    grid-template-columns: auto 1fr
  }
}

.page-apparel .common__content--left .head {
  align-items: center;
  display: flex;
  grid-column: 1/2;
  grid-row: 1/2;
  margin-top: 0
}

.page-apparel .common__content--left .image {
  grid-column: 2/3;
  grid-row: 1/3
}

@media screen and (min-width:992px) {
  .page-apparel .common__content--left .image {
    padding-left: 0
  }
}

.page-apparel .main-visual {
  background-color: #fff;
  position: relative
}

.page-apparel .main-visual .main-visual__title {
  bottom: 0;
  height: -moz-fit-content;
  height: fit-content;
  margin: 0 auto;
  padding: 0 3.3% 3.3%;
  position: absolute;
  text-align: center;
  width: 100%
}

@media screen and (min-width:768px) {
  .page-apparel .main-visual .main-visual__title {
    left: 8.47%;
    margin: 0;
    padding: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50%
  }
}

@media screen and (min-width:992px) {
  .page-apparel .main-visual .main-visual__title {
    width: -moz-fit-content;
    width: fit-content
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .main-visual .main-visual__title {
    width: 532px
  }
}

.page-apparel .main-visual .main-visual__title-inner {
  background: hsla(0, 0%, 100%, .9);
  margin: 0 auto;
  max-width: 509px;
  padding: 25px 24px;
  width: 100%
}

@media screen and (min-width:768px) {
  .page-apparel .main-visual .main-visual__title-inner {
    background: none;
    max-width: none;
    padding: 0
  }
}

.page-apparel .main-visual .main-visual__title .logo {
  font-size: clamp(20px, 1.8055555556vw, 28px);
  font-weight: 500;
  letter-spacing: .1em
}

.page-apparel .main-visual .main-visual__title .logo p {
  border-bottom: 1px solid #707070;
  display: inline-block;
  margin: 0 auto;
  padding-bottom: 12px
}

@media screen and (min-width:992px) {
  .page-apparel .main-visual .main-visual__title .logo p {
    padding-bottom: 6px
  }
}

.page-apparel .main-visual .main-visual__title .title {
  font-size: clamp(24px, 2.2222222222vw, 32px);
  font-weight: 500;
  letter-spacing: .1em;
  margin-top: 16px
}

@media screen and (min-width:768px) {
  .page-apparel .main-visual .main-visual__title .title {
    margin-top: 24px
  }
}

.page-apparel .main-visual .main-visual__img {
  aspect-ratio: 390/600;
  width: 100%
}

@media screen and (min-width:768px) {
  .page-apparel .main-visual .main-visual__img {
    aspect-ratio: 1440/730
  }

  .page-apparel .main-visual .main-visual__img img {
    height: 600px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 40% 50%;
    object-position: 40% 50%
  }
}

@media screen and (min-width:992px) {
  .page-apparel .main-visual .main-visual__img img {
    height: auto;
    -o-object-fit: initial;
    object-fit: fill;
    -o-object-position: initial;
    object-position: initial
  }
}

.page-apparel .intro {
  background-color: #fff
}

.page-apparel .intro .intro-container {
  margin: 0 auto;
  padding: clamp(80px, 10.0806451613vw, 100px) 7.6% 0;
  text-align: center
}

@media screen and (max-width:389px) {
  .page-apparel .intro .intro-container {
    padding: clamp(80px, 10.0806451613vw, 100px) 4% 0
  }
}

@media screen and (min-width:992px) {
  .page-apparel .intro .intro-container {
    max-width: 880px;
    padding-left: 40px;
    padding-right: 40px
  }
}

.page-apparel .intro__head {
  font-size: clamp(20px, 2.6209677419vw, 26px);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.7
}

.page-apparel .intro__description {
  font-size: clamp(13px, 1.4112903226vw, 14px);
  letter-spacing: .05em;
  line-height: 2.15;
  margin-top: clamp(30px, 4.0322580645vw, 40px);
  text-align: start
}

.page-apparel .coat {
  padding-bottom: clamp(80px, 15.1209677419vw, 150px);
  padding-top: clamp(80px, 10.0806451613vw, 100px)
}

.page-apparel .coat .common__content,
.page-apparel .coat .info,
.page-apparel .coat .info .act {
  margin-top: 40px
}

@media screen and (min-width:1200px) {
  .page-apparel .coat .info .act {
    margin-top: 60px
  }
}

.page-apparel .coat .image-01__swiper-container {
  box-sizing: border-box;
  margin: 40px auto 0;
  max-width: 640px;
  width: 100%
}

@media screen and (min-width:992px) {
  .page-apparel .coat .image-01__swiper-container {
    margin-top: 0;
    max-width: none
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .coat .image-01__swiper-container {
    width: 820px
  }
}

.page-apparel .coat .image-01__swiper-container .image-01__swiper {
  overflow: hidden;
  padding-left: 10px;
  padding-right: 20px;
  padding-top: 12px
}

@media screen and (min-width:992px) {
  .page-apparel .coat .image-01__swiper-container .image-01__swiper {
    padding-left: 0;
    padding-right: 10px
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .coat .image-01__swiper-container .image-01__swiper {
    padding-left: 0;
    padding-right: 20px;
    padding-top: 16px
  }
}

@media screen and (min-width:992px) {
  .page-apparel .coat .image-01__swiper-container .image-01__swiper .note {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
    width: 401px
  }
}

.page-apparel .coat .image-01__swiper-container .swiper-wrapper {
  display: flex;
  position: relative;
  z-index: 0
}

@media screen and (min-width:992px) {
  .page-apparel .coat .image-01__swiper-container .swiper-wrapper {
    width: 100%
  }
}

.page-apparel .coat .image-01__swiper-container .swiper-wrapper:before {
  aspect-ratio: 360/480;
  background-color: #f4f0e9;
  content: "";
  height: 100%;
  position: absolute;
  right: -10px;
  top: -12px;
  width: 100%
}

@media screen and (min-width:1440px) {
  .page-apparel .coat .image-01__swiper-container .swiper-wrapper:before {
    right: -20px;
    top: -16px
  }
}

.page-apparel .coat .image-01__swiper-container .swiper-wrapper img {
  aspect-ratio: 360/480;
  height: auto;
  max-width: 800px;
  position: relative;
  width: 100%;
  z-index: 999
}

.page-apparel .coat .image-01__swiper-container .swiper-wrapper .image-01__swiper-act {
  bottom: 0;
  padding-bottom: 9px;
  padding-right: 12px;
  position: absolute;
  right: 0;
  z-index: 1000
}

@media screen and (min-width:992px) {
  .page-apparel .coat .image-01__swiper-container .swiper-wrapper .image-01__swiper-act {
    padding-bottom: 13px;
    padding-right: 15px
  }
}

.page-apparel .coat .swiper-pagination-bullet {
  background-color: #929292;
  height: 7px;
  margin: 0 4.5px;
  opacity: 1;
  width: 7px
}

@media screen and (min-width:992px) {
  .page-apparel .coat .swiper-pagination-bullet {
    height: 11px;
    width: 11px
  }
}

.page-apparel .coat .swiper-pagination-bullet-active {
  background-color: #fff
}

.page-apparel .coat .coat-sub {
  margin-top: 60px
}

@media screen and (min-width:992px) {
  .page-apparel .coat .coat-sub {
    margin-top: 130px
  }
}

.page-apparel .coat .coat-sub .image {
  margin-top: 30px
}

@media screen and (min-width:992px) {
  .page-apparel .coat .coat-sub .image {
    margin-top: 0
  }
}

.page-apparel .coat .coat-sub .image .note {
  padding-left: 0;
  padding-right: 45px
}

@media screen and (min-width:554px) {
  .page-apparel .coat .coat-sub .image .note {
    padding-right: 0
  }
}

@media screen and (min-width:992px) {
  .page-apparel .coat .coat-sub .image .note {
    margin: 10px 0 0;
    width: 430px
  }

  .page-apparel .coat .coat-sub .info {
    margin-top: 60px
  }
}

.page-apparel .coat .coat-sub .info .act {
  margin-top: clamp(40px, 6.0483870968vw, 60px)
}

@media screen and (min-width:992px) {
  .page-apparel .coat>.common__content>.image--01>.note {
    margin: 10px 0 0 auto;
    padding-left: 0;
    padding-right: 10px;
    text-align: right;
    width: 410px
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .coat>.common__content>.image--01>.note {
    padding-right: 20px;
    width: 420px
  }
}

.page-apparel .jacket {
  margin-top: 100vh;
  padding-top: clamp(100px, 15.1209677419vw, 150px)
}

.page-apparel .jacket .common__content {
  margin-top: 40px
}

@media screen and (min-width:992px) {
  .page-apparel .jacket .common__content {
    margin-top: 60px
  }
}

.page-apparel .jacket .image .image-02__container {
  box-sizing: border-box;
  margin: 40px auto 0;
  max-width: 640px;
  padding-left: 20px;
  padding-right: 10px;
  padding-top: 12px;
  position: relative;
  width: 100%
}

@media screen and (min-width:992px) {
  .page-apparel .jacket .image .image-02__container {
    margin-top: 0;
    max-width: none;
    padding-left: 10px;
    padding-right: 0
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .jacket .image .image-02__container {
    padding-left: 20px;
    padding-top: 16px;
    width: 820px
  }
}

.page-apparel .jacket .image .image-02__container:before {
  aspect-ratio: 360/480;
  background-color: #1d4270;
  content: "";
  height: calc(100% - 12px);
  left: 10px;
  position: absolute;
  top: 0;
  width: calc(100% - 30px)
}

@media screen and (min-width:992px) {
  .page-apparel .jacket .image .image-02__container:before {
    left: 0;
    width: calc(100% - 10px)
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .jacket .image .image-02__container:before {
    height: calc(100% - 16px);
    width: calc(100% - 20px)
  }
}

.page-apparel .jacket .image .image-02__container img {
  aspect-ratio: 360/480;
  height: auto;
  max-width: 800px;
  position: relative;
  width: 100%
}

@media screen and (min-width:992px) {
  .page-apparel .jacket .image .note {
    margin: 10px 0 0;
    width: 410px
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .jacket .image .note {
    width: 420px
  }
}

.page-apparel .jacket .info,
.page-apparel .jacket .info .act {
  margin-top: 40px
}

@media screen and (min-width:1200px) {
  .page-apparel .jacket .info .act {
    margin-top: 60px
  }
}

.page-apparel .jacket>.common__content>.image--02>.note {
  padding-left: 20px;
  padding-right: 10px
}

@media screen and (min-width:992px) {
  .page-apparel .jacket>.common__content>.image--02>.note {
    padding-left: 10px;
    padding-right: 0
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .jacket>.common__content>.image--02>.note {
    padding-left: 20px
  }
}

.page-apparel .gilet {
  padding-top: clamp(100px, 15.1209677419vw, 150px)
}

.page-apparel .gilet .common__content {
  margin-top: 40px
}

@media screen and (min-width:992px) {
  .page-apparel .gilet .common__content {
    margin-top: 60px
  }
}

.page-apparel .gilet .image-03__container {
  box-sizing: border-box;
  margin: 40px auto 0;
  max-width: 640px;
  padding-left: 10px;
  padding-right: 20px;
  padding-top: 12px;
  position: relative;
  width: 100%
}

@media screen and (min-width:992px) {
  .page-apparel .gilet .image-03__container {
    margin-top: 0;
    max-width: none;
    padding-left: 0;
    padding-right: 10px
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .gilet .image-03__container {
    padding-right: 20px;
    padding-top: 16px;
    width: 820px
  }
}

.page-apparel .gilet .image-03__container:before {
  aspect-ratio: 360/480;
  background-color: #efefef;
  content: "";
  height: calc(100% - 12px);
  position: absolute;
  right: 10px;
  top: 0;
  width: calc(100% - 30px)
}

@media screen and (min-width:992px) {
  .page-apparel .gilet .image-03__container:before {
    right: 0;
    width: calc(100% - 10px)
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .gilet .image-03__container:before {
    height: calc(100% - 16px);
    width: calc(100% - 20px)
  }
}

.page-apparel .gilet .image-03__container img {
  aspect-ratio: 360/480;
  height: auto;
  max-width: 800px;
  position: relative;
  width: 100%
}

.page-apparel .gilet .note {
  padding-left: 10px;
  padding-right: 20px
}

.page-apparel .gilet .info,
.page-apparel .gilet .info .act {
  margin-top: 40px
}

@media screen and (min-width:1200px) {
  .page-apparel .gilet .info .act {
    margin-top: 60px
  }
}

@media screen and (min-width:992px) {
  .page-apparel .gilet>.common__content>.image--03>.note {
    margin: 10px 0 0 auto;
    padding-left: 0;
    padding-right: 10px;
    text-align: right;
    width: 410px
  }
}

@media screen and (min-width:1440px) {
  .page-apparel .gilet>.common__content>.image--03>.note {
    padding-right: 20px;
    width: 420px
  }
}

.page-apparel .section-variation {
  margin-top: clamp(100px, 20.1612903226vw, 200px)
}

.page-apparel .section-variation .title {
  line-height: 1.82
}

.page-apparel .section-variation .swiper-container {
  margin-top: 40px
}

@media screen and (min-width:1440px) {
  .page-apparel .section-variation .swiper-container {
    margin: 60px auto 0;
    max-width: 1360px;
    width: 100%
  }
}

.page-apparel .section-variation .section-variation__item {
  transform: scale(.76) translateY(-5%);
  transition: transform .7s
}

@media screen and (min-width:554px) {
  .page-apparel .section-variation .section-variation__item {
    transform: scale(.76) translateY(-4%)
  }
}

@media screen and (min-width:992px) {
  .page-apparel .section-variation .section-variation__item {
    transform: scale(.76) translateY(-3%)
  }
}

.page-apparel .section-variation .section-variation__swiper {
  overflow: hidden
}

.page-apparel .section-variation .section-variation__swiper-act {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 1000
}

.page-apparel .section-variation .section-variation__swiper-act .swiper-button-prev {
  left: 7.7%;
  transition: .2s ease
}

@media(any-hover:hover) {
  .page-apparel .section-variation .section-variation__swiper-act .swiper-button-prev:hover:after {
    border-right-color: #929292;
    transform: translateX(-5px);
    transition: .2s ease
  }
}

@media screen and (min-width:425px) {
  .page-apparel .section-variation .section-variation__swiper-act .swiper-button-prev {
    left: 8.4%
  }
}

@media screen and (min-width:554px) {
  .page-apparel .section-variation .section-variation__swiper-act .swiper-button-prev {
    left: 9%
  }
}

@media screen and (min-width:768px) {
  .page-apparel .section-variation .section-variation__swiper-act .swiper-button-prev {
    left: 13.4%
  }
}

@media screen and (min-width:992px) {
  .page-apparel .section-variation .section-variation__swiper-act .swiper-button-prev {
    left: calc(50% - 293px)
  }
}

.page-apparel .section-variation .section-variation__swiper-act .swiper-button-next {
  right: 7.7%
}

@media(any-hover:hover) {
  .page-apparel .section-variation .section-variation__swiper-act .swiper-button-next:hover:after {
    border-left-color: #929292;
    transform: translateX(5px);
    transition: .2s ease
  }
}

@media screen and (min-width:425px) {
  .page-apparel .section-variation .section-variation__swiper-act .swiper-button-next {
    right: 8.4%
  }
}

@media screen and (min-width:554px) {
  .page-apparel .section-variation .section-variation__swiper-act .swiper-button-next {
    right: 9%
  }
}

@media screen and (min-width:768px) {
  .page-apparel .section-variation .section-variation__swiper-act .swiper-button-next {
    right: 13.4%
  }
}

@media screen and (min-width:992px) {
  .page-apparel .section-variation .section-variation__swiper-act .swiper-button-next {
    right: calc(50% - 293px)
  }
}

.page-apparel .section-variation .section-variation__swiper-act .swiper-button-next:after,
.page-apparel .section-variation .section-variation__swiper-act .swiper-button-prev:after {
  content: ""
}

.page-apparel .section-variation .section-variation__swiper-act .swiper-button-prev:after {
  border-bottom: 8.5px solid transparent;
  border-right: 15px solid #d9d9d9;
  border-top: 8.5px solid transparent;
  transition: .2s ease
}

@media screen and (min-width:992px) {
  .page-apparel .section-variation .section-variation__swiper-act .swiper-button-prev:after {
    border-bottom: 13px solid transparent;
    border-right: 22px solid #d9d9d9;
    border-top: 13px solid transparent
  }
}

.page-apparel .section-variation .section-variation__swiper-act .swiper-button-next:after {
  border-bottom: 8.5px solid transparent;
  border-left: 15px solid #d9d9d9;
  border-top: 8.5px solid transparent;
  transition: .2s ease
}

@media screen and (min-width:992px) {
  .page-apparel .section-variation .section-variation__swiper-act .swiper-button-next:after {
    border-bottom: 13px solid transparent;
    border-left: 22px solid #d9d9d9;
    border-top: 13px solid transparent
  }
}

.page-apparel .section-variation .swiper-slide {
  width: auto
}

.page-apparel .section-variation .swiper-slide .swiper-slide-inner {
  margin: 0 auto;
  max-width: 498px;
  text-align: center;
  width: 100%
}

@media screen and (min-width:1440px) {
  .page-apparel .section-variation .swiper-slide .swiper-slide-inner {
    width: 498px
  }
}

.page-apparel .section-variation .swiper-slide img {
  height: auto;
  width: 100%
}

.page-apparel .section-variation .section-variation__content {
  opacity: 0;
  transition: opacity .7s ease, visibility .7s ease;
  transition-delay: 0s;
  visibility: hidden;
  width: 100%
}

.page-apparel .section-variation .section-variation__content h4 {
  font-size: clamp(16px, 1.814516129vw, 18px);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.63;
  margin-top: 18px;
  padding: 0 30px;
  text-align: center
}

@media screen and (max-width:389px) {
  .page-apparel .section-variation .section-variation__content h4 {
    padding: 0 20px
  }
}

.page-apparel .section-variation .section-variation__content .description {
  font-size: clamp(11px, 1.2096774194vw, 12px);
  letter-spacing: .05em;
  line-height: 1.45;
  margin-top: 16px;
  text-align: start
}

.page-apparel .section-variation .section-variation__content .act {
  background-color: #f4f0e9;
  border: 1px solid #929292;
  height: clamp(35px, 4.2338709677vw, 42px);
  margin: 30px auto 0;
  width: 200px
}

.page-apparel .section-variation .section-variation__content .act a {
  align-items: center;
  display: flex;
  flex-flow: row;
  gap: 13px;
  height: 100%;
  justify-content: center;
  width: 100%
}

@media(any-hover:hover) {
  .page-apparel .section-variation .section-variation__content .act a:hover {
    background-color: #929292;
    opacity: 1;
    transition: .2s ease
  }

  .page-apparel .section-variation .section-variation__content .act a:hover p {
    color: #f4f0e9;
    transition: .2s ease
  }

  .page-apparel .section-variation .section-variation__content .act a:hover .arrow path {
    stroke: #f4f0e9;
    transition: stroke .2s ease
  }
}

.page-apparel .section-variation .section-variation__content .act a p {
  font-size: clamp(13px, 1.4112903226vw, 14px);
  font-weight: 500
}

.page-apparel .section-variation .section-variation__item.swiper-slide-active .section-variation__content,
.page-apparel .section-variation .section-variation__item.swiper-slide-duplicate-active .section-variation__content {
  opacity: 1;
  transition-delay: .3s;
  visibility: visible
}

.page-apparel .section-variation .section-variation__item.swiper-slide-active,
.page-apparel .section-variation .section-variation__item.swiper-slide-duplicate-active {
  position: relative;
  transform: scale(1);
  z-index: 1
}

.page-apparel .section-movie {
  background-color: #fff;
  margin: 0 auto;
  padding: clamp(100px, 15.1209677419vw, 150px) 7.69% 0;
  text-align: center;
  width: 100%
}

.page-apparel .section-movie__title {
  font-size: clamp(18px, 2.2177419355vw, 22px);
  font-weight: 500;
  letter-spacing: .1em
}

@media screen and (min-width:992px) {
  .page-apparel .section-movie__title {
    align-items: center;
    display: flex;
    gap: 28px;
    justify-content: center
  }
}

.page-apparel .section-movie__description {
  font-size: clamp(16px, 2.2177419355vw, 22px);
  font-weight: 500;
  margin-top: 15px
}

.page-apparel .section-movie__content {
  aspect-ratio: 16/9;
  height: auto;
  margin: 25px auto 0;
  max-width: 1280px
}

@media screen and (min-width:992px) {
  .page-apparel .section-movie__content {
    margin-top: 30px
  }
}

.page-apparel .section-movie__content iframe {
  height: 100%;
  width: 100%
}

.page-apparel .section-bg {
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: -1
}

.page-apparel .section-bg .bg-01 {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 100%
}

.page-apparel .section-bg .bg-01.is-active {
  opacity: 1;
  visibility: visible
}

.page-apparel .section-bg .bg-01 img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%
}

.page-apparel .section-bg .bg-01 .note {
  bottom: clamp(10px, 1.6129032258vw, 16px);
  color: #fff;
  font-size: clamp(11px, 1.2096774194vw, 12px);
  left: clamp(14px, 1.6129032258vw, 16px);
  position: absolute
}

@media screen and (min-width:992px) {
  .page-apparel .section-bg .bg-01 .note {
    color: #000
  }
}

.page-apparel .about__link {
  background-color: #fff;
  padding: clamp(60px, 10.0806451613vw, 100px) 0
}

.page-apparel .about__link .about__link-container {
  margin: 0 auto;
  max-width: 500px;
  padding: 0 7.7%
}

@media screen and (min-width:992px) {
  .page-apparel .about__link .about__link-container {
    max-width: 714px;
    padding: 0 40px
  }
}

.page-apparel .about__link .about__link-inner {
  background-color: #f4f0e9;
  border: 1px solid #929292;
  display: grid;
  grid-template-columns: 29.56% 70.44%;
  transition: .2s ease
}

@media(any-hover:hover) {
  .page-apparel .about__link .about__link-inner:hover {
    background-color: #929292;
    opacity: 1;
    transition: .2s ease
  }

  .page-apparel .about__link .about__link-inner:hover .text {
    color: #f4f0e9;
    transition: .2s ease
  }

  .page-apparel .about__link .about__link-inner:hover .arrow path {
    stroke: #f4f0e9;
    transition: stroke .2s ease
  }

  .page-apparel .about__link .about__link-inner:hover .image img {
    transform: scale(1.2);
    transition: .2s ease
  }
}

.page-apparel .about__link .image {
  height: 100%;
  overflow: hidden
}

.page-apparel .about__link .image img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform .2s ease
}

.page-apparel .about__link .text {
  align-items: center;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  gap: 20px;
  justify-content: space-between;
  letter-spacing: 0;
  padding: 12px 26px 12px 34px;
  transition: .2s ease
}

@media screen and (max-width:389px) {
  .page-apparel .about__link .text {
    padding: 12px 15px
  }
}

@media screen and (min-width:992px) {
  .page-apparel .about__link .text {
    align-items: center;
    flex-flow: column;
    font-size: 16px;
    justify-content: center
  }
}