@charset "UTF-8";
:root {
  --main-color-blue: #1f2e43;
  --main-color-gold: #8b744b;
  --font-Shippori: "Shippori Mincho", serif;
  --trim: trim-both cap alphabetic;
}

.page {
  button {
    padding: 0;
    border: none;
  }
  a {
    text-decoration: none;
  }
}
.page img {
  width: auto;
}

.page-wrap {
  display: flex;
}

@media screen and (min-width:769px) {
    body,
    .wrapper {
        overflow: unset;
    }
}

/* ------------------------------
    ナビゲーション
------------------------------ */
.page-nav {
  position: relative;
  width: calc((100% - 550px) / 2);
  top: 0;
  left: 0;
  background-color: #c2d5e3;
  padding-block: 50px;
  transition: background-color 0.3s;
}
.page-nav.nav-1, .page-nav.nav-3 {
  background-color: #f2f1ec;
}
.page-nav nav {
  position: sticky;
  width: 460px;
  max-width: 90%;
  max-height: calc(100vh - (140px + 30px));
  top: 140px;
  margin-inline: auto;
  padding: 70px 8% 55px;
  background: #fff;
  box-shadow: 0 0 30px rgba(160, 160, 160, 0.2);
  clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px);
  overflow-y: auto;
  overflow-x: hidden;
}
.page-nav nav .page-nav-title {
  text-align: center;
  margin-bottom: 50px;
}
.page-nav nav .page-nav-list .page-nav-list-item + .page-nav-list-item {
  margin-top: 5px;
}
.page-nav nav .page-nav-list .page-nav-list-item .page-nav-list-item-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  -moz-column-gap: 5px;
       column-gap: 5px;
  width: min(350px, 100%);
  height: 60px;
  padding-inline: 20px 25px;
  background: #f2f1ec;
}
.page-nav nav .page-nav-list .page-nav-list-item .page-nav-list-item-button span {
  font-family: var(--font-Shippori);
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 700;
  color: #313131;
}
.page-nav nav .page-nav-list .page-nav-list-item .page-nav-list-item-button svg {
  transition: transform 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  .page-nav nav .page-nav-list .page-nav-list-item .page-nav-list-item-button:hover {
    opacity: 1;
  }
  .page-nav nav .page-nav-list .page-nav-list-item .page-nav-list-item-button:hover svg {
    transform: translateX(10px);
  }
}
@media screen and (max-width: 1100px) {
  .page-nav {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .page .page-nav {
    display: none;
  }
}
/* ------------------------------
    メインコンテンツ
------------------------------ */
.page-content {
  container-type: inline-size;
  width: 550px;
}

@media screen and (max-width: 1100px) {
  .page-content {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .page-content {
    width: 100%;
  }
}
.page-section {
  padding: 10.6666666667cqw 5.3333333333cqw 13.3333333333cqw;
}
.page-section .page-section-inner {
  padding-inline: 5.3333333333cqw;
}
.page-section .page-section-head {
  margin-bottom: 8cqw;
}
.page-section .page-section-subhead {
  font-family: var(--font-Shippori);
  font-size: 5.6cqw;
  text-align: center;
  font-weight: 700;
  color: var(--main-color-blue);
  text-box: var(--trim);
  margin-bottom: 5.3333333333cqw;
}
.page-section .page-section-lead {
  font-size: 3.7333333333cqw;
  line-height: 2.1428571429;
  text-box: var(--trim);
  font-feature-settings: "palt";
  text-align: justify;
  letter-spacing: 0.03em;
}
.page-section p:not(.page-section-lead) {
  font-size: 3.4666666667cqw;
  line-height: 2;
  text-box: var(--trim);
  font-feature-settings: "palt";
  text-align: justify;
}

/* コラム */
.column {
  position: relative;
  margin-top: 10.6666666667cqw;
  padding: 10.6666666667cqw 5.3333333333cqw 8cqw;
  background: #f2f1ec;
}
.column::before, .column::after {
  content: "";
  position: absolute;
  width: 4.1333333333cqw;
  aspect-ratio: 1/1;
  background: #fff;
}
.column::before {
  top: -0.1333333333cqw;
  left: -0.1333333333cqw;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.column::after {
  bottom: -0.1333333333cqw;
  right: -0.1333333333cqw;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.column .column-head-01 {
  position: absolute;
  width: 28.2666666667cqw;
  top: -2.9333333333cqw;
  left: 50%;
  transform: translateX(-50%);
}
.column .column-head-02 {
  font-family: var(--font-Shippori);
  font-size: 5.0666666667cqw;
  font-weight: 700;
  color: var(--main-color-blue);
  text-align: center;
  line-height: 1.2631578947;
  text-box: var(--trim);
  padding-bottom: 4.6666666667cqw;
  margin-bottom: 6.6666666667cqw;
  background-image: linear-gradient(to right, var(--main-color-gold) 0.2666666667cqw, transparent 0.2666666667cqw);
  background-size: 1.3333333333cqw 0.2666666667cqw;
  background-repeat: repeat-x;
  background-position: left bottom;
}
.column .column-image {
  margin-top: 6.6666666667cqw;
}

.column-tag .column-image {
  width: 60.4cqw;
  margin-inline: auto;
}

/* fv */
#fv .mv {
  position: relative;
}
#fv .mv figure {
  line-height: 0;
}
#fv .mv figure img {
  width: 100%;
  backface-visibility: unset;
}
#fv .mv h1 {
  position: absolute;
  width: 67.3333333333cqw;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}
#fv .fv-lead {
  font-size: 3.7333333333cqw;
  text-align: center;
  line-height: 2.1428571429;
  color: #ffffff;
  text-box: var(--trim);
  padding-block: 46.6666666667cqw 20cqw;
  background: var(--main-color-blue);
}

@media screen and (min-width: 769px) {
  #fv .fv-links {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  #fv .fv-lead {
    padding-bottom: 16cqw;
  }
  #fv .fv-links {
    background-color: var(--main-color-blue);
    padding: 0 10.6666666667cqw 20cqw;
  }
  #fv .fv-links .fv-links-item + .fv-links-item {
    margin-top: 8cqw;
  }
  #fv .fv-links .fv-links-item a {
    font-family: var(--font-Shippori);
    font-size: 4.2666666667cqw;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 16cqw;
    background-color: var(--main-color-gold);
  }
  #fv .fv-links .fv-links-item a .arrow {
    position: absolute;
    bottom: -3.3333333333cqw;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.6666666667cqw;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #fff;
    border: 0.2666666667cqw solid var(--main-color-gold);
    animation: move-arrow 2s infinite ease-in-out;
  }
  #fv .fv-links .fv-links-item a .arrow::before {
    content: "";
    display: block;
    width: 2.1333333333cqw;
    height: 2.1333333333cqw;
    border-right: 0.2666666667cqw solid var(--main-color-gold);
    border-bottom: 0.2666666667cqw solid var(--main-color-gold);
    transform: translateY(-25%) rotate(45deg);
  }
}
@keyframes move-arrow {
  0% {
    bottom: -3.3333333333cqw;
  }
  20% {
    bottom: -5.3333333333cqw;
  }
  40% {
    bottom: -3.3333333333cqw;
  }
}
/* collor */
#collor .collor-list {
  margin-top: 10.6666666667cqw;
}
#collor .collor-list .collor-item {
  position: relative;
}
#collor .collor-list .collor-item + .collor-item {
  margin-top: 9.3333333333cqw;
}
#collor .collor-list .collor-item .collor-item-decoration {
  position: absolute;
  top: 0;
}
#collor .collor-list .collor-item .collor-item-decoration:where(.collor-item:nth-of-type(odd) *) {
  right: -6.6666666667cqw;
}
#collor .collor-list .collor-item .collor-item-decoration:where(.collor-item:nth-of-type(even) *) {
  left: -6.6666666667cqw;
}
#collor .collor-list .collor-item .collor-item-decoration.text-regular {
  width: 18.4cqw;
}
#collor .collor-list .collor-item .collor-item-decoration.text-wide {
  width: 13.8666666667cqw;
}
#collor .collor-list .collor-item .collor-item-decoration.text-button {
  width: 12.8cqw;
}
#collor .collor-list .collor-item .collor-item-decoration.text-cleric {
  width: 13.6cqw;
}
#collor .collor-list .collor-item .collor-item-image {
  position: relative;
  width: 61.3333333333cqw;
  margin: 0 auto 8cqw;
}
#collor .collor-list .collor-item .collor-item-image figcaption {
  font-size: 4.5333333333cqw;
  line-height: 1;
  color: #fff;
  text-box: var(--trim);
  font-feature-settings: "palt";
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
  padding: 2.6666666667cqw 3.3333333333cqw;
  background: var(--main-color-blue);
}
#collor .collor-list .collor-item .collor-item-image figcaption:where(.collor-item:nth-of-type(odd) *) {
  left: -8.6666666667cqw;
}
#collor .collor-list .collor-item .collor-item-image figcaption:where(.collor-item:nth-of-type(even) *) {
  right: -8.6666666667cqw;
}
#collor .collor-about {
  margin-top: 8cqw;
}
#collor .collor-about .collor-about-item {
  border-top: 0.1333333333cqw solid #313131;
}
#collor .collor-about .collor-about-item + .collor-about-item {
  border-bottom: 0.1333333333cqw solid #313131;
}
#collor .collor-about .collor-about-item dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5.3333333333cqw;
  cursor: pointer;
  pointer-events: all;
}
#collor .collor-about .collor-about-item dt span {
  font-size: 3.4666666667cqw;
  font-weight: 600;
  text-box: var(--trim);
}
#collor .collor-about .collor-about-item dt::after {
  content: "";
  width: 4.1333333333cqw;
  aspect-ratio: 31/17;
  background: url(/ec/img/usr/pg/campaign/m_shirts_s/25aw/arrow_black.png) top left/100% 100% no-repeat;
  transform: rotate(180deg);
  transition: transform 0.5s;
}
#collor .collor-about .collor-about-item dt.active::after {
  transform: rotate(0);
}
#collor .collor-about .collor-about-item dd {
  display: none;
  padding-block: 2.6666666667cqw 8cqw;
}
#collor .collor-about .about-size .size-image {
  margin-top: 8cqw;
}
#collor .collor-about .about-size .size-image.size-image-01 {
  width: 65.3333333333cqw;
  margin-inline: auto;
}
#collor .collor-about .about-style .style-item {
  width: 68cqw;
  margin: 8cqw auto 0;
}
#collor .collor-about .about-style .style-item .style-head {
  text-align: center;
  text-box: unset;
  font-feature-settings: unset;
  margin-bottom: 5.3333333333cqw;
}
#collor .collor-about .about-style .style-item .style-head .head-01 {
  font-size: 3.7333333333cqw;
  font-weight: 700;
  line-height: 1;
  color: var(--main-color-gold);
  display: inline-block;
  margin-bottom: 2.6666666667cqw;
}
#collor .collor-about .about-style .style-item .style-head .head-02 {
  font-size: 3.2cqw;
  color: #fff;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  text-box: var(--trim);
  display: inline-block;
  width: 32cqw;
  background: var(--main-color-gold);
  padding-block: 2cqw;
}
#collor .collor-about .about-style .style-item .style-image {
  width: 52cqw;
  margin: 0 auto 5.3333333333cqw;
}
#collor .collor-about .about-style .style-item .style-lead {
  font-size: 2.9333333333cqw;
  font-feature-settings: unset;
}

/* fabric */
#fabric {
  background: #e2ebf5;
}
#fabric .fabric-list {
  padding-inline: 5.3333333333cqw;
  margin-top: 10.6666666667cqw;
}
#fabric .fabric-list .fabric-item + .fabric-item {
  margin-top: 12cqw;
}
#fabric .fabric-list .fabric-item .fabric-item-image {
  position: relative;
  width: 61.3333333333cqw;
  margin: 0 auto 5.3333333333cqw;
}
#fabric .fabric-list .fabric-item .fabric-item-image figcaption {
  position: absolute;
  top: 5.3333333333cqw;
}
#fabric .fabric-list .fabric-item .fabric-item-image figcaption:where(.fabric-item:nth-of-type(odd) *) {
  left: -4cqw;
}
#fabric .fabric-list .fabric-item .fabric-item-image figcaption:where(.fabric-item:nth-of-type(even) *) {
  right: -4cqw;
}
#fabric .fabric-list .fabric-item .fabric-item-image figcaption:where(.fabric-item:nth-of-type(even) *) span {
  margin-inline: auto 0;
}
#fabric .fabric-list .fabric-item .fabric-item-image figcaption span {
  font-size: 4.5333333333cqw;
  line-height: 1;
  color: #fff;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  background: var(--main-color-gold);
  padding: 2cqw 3.3333333333cqw;
}
#fabric .fabric-list .fabric-item .fabric-item-image figcaption span + span {
  margin-top: 0.6666666667cqw;
}

/* care */
#care .care-banner-01 {
  margin-bottom: 16cqw;
}
#care .care-banner-01 .care-banner-head {
  font-family: var(--font-Shippori);
  font-size: 4.5333333333cqw;
  font-weight: 700;
  text-align: center;
  color: var(--main-color-blue);
  margin-bottom: 4cqw;
}
#care .care-banner-01 .care-banner-image {
  padding-inline: 2cqw;
}
#care .care-slider-wrap {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  margin-top: 10.6666666667cqw;
}
#care .care-slider {
  position: relative;
  display: block;
  transition: transform 0.5s ease;
  padding-bottom: 1.0666666667cqw;
}
#care .care-slider img {
  display: inline-block;
}
#care .care-slider .care-slider-item {
  width: 100%;
  flex-shrink: 0;
}
#care .care-slider .care-slider-item .care-table {
  width: 100%;
}
#care .care-slider .care-slider-item .care-table th, #care .care-slider .care-slider-item .care-table td {
  vertical-align: middle;
  border-top: 0.2666666667cqw solid #a0a0a0;
}
#care .care-slider .care-slider-item .care-table:last-of-type th, #care .care-slider .care-slider-item .care-table:last-of-type td {
  border-bottom: 0.2666666667cqw solid #a0a0a0;
}
#care .care-slider .care-slider-item .care-table thead .care-table-head-text {
  padding-block: 4cqw;
}
#care .care-slider .care-slider-item .care-table thead .care-table-head-text figure {
  margin: 0 auto 4cqw;
}
#care .care-slider .care-slider-item .care-table thead .care-table-head-text figure.text-max {
  width: 49.3333333333cqw;
}
#care .care-slider .care-slider-item .care-table thead .care-table-head-text figure.text-non {
  width: 52.6666666667cqw;
}
#care .care-slider .care-slider-item .care-table thead .care-table-head-text figure.text-easy {
  width: 54cqw;
}
#care .care-slider .care-slider-item .care-table thead .care-table-head-text p {
  line-height: 1.5384615385;
  text-align: center;
  font-weight: 500;
  font-feature-settings: unset;
}
#care .care-slider .care-slider-item .care-table thead .care-table-head-image {
  padding-block: 2.6666666667cqw;
}
#care .care-slider .care-slider-item .care-table thead .care-table-head-image figure {
  text-align: center;
  height: 33.3333333333cqw;
}
#care .care-slider .care-slider-item .care-table thead .care-table-head-image figure img {
  max-height: 100%;
}
#care .care-slider .care-slider-item .care-table tbody th {
  font-size: 3.2cqw;
  line-height: 1.6666666667;
  text-align: center;
  width: 18.6666666667cqw;
  background: #eeeeee;
}
#care .care-slider .care-slider-item .care-table tbody th:where(.row-gold *) {
  color: #fff;
  background: var(--main-color-gold);
}
#care .care-slider .care-slider-item .care-table tbody td {
  font-size: 3.7333333333cqw;
  font-weight: 500;
  text-align: center;
  padding-block: 2.6666666667cqw;
}
#care .care-slider .care-slider-item .care-table tbody td .star {
  color: #ac6a00;
}
#care .care-slider .care-slider-item .care-table tbody td:where(.material *) {
  line-height: 1.4375;
  height: 16cqw;
  padding-block: 0;
}
#care .care-slider .care-slider-item .care-table tbody td:where(.form *) .form-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 7.3333333333cqw;
       column-gap: 7.3333333333cqw;
}
#care .care-slider .care-slider-item .care-table tbody td:where(.form *) .form-flex .form-icon {
  width: 6.6666666667cqw;
}
#care .care-slider .care-slider-item .care-table tbody td:where(.stretch *) {
  padding-block: 2.6666666667cqw;
}
#care .care-slider .care-slider-item .care-table tbody td:where(.stretch *) span {
  line-height: 1;
}
#care .care-slider .care-slider-item .care-table tbody td:where(.feature *) {
  height: 29.3333333333cqw;
  padding-block: 0;
}
#care .care-slider .care-slider-item .care-table tbody td:where(.feature *) .feature-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 3.3333333333cqw;
       column-gap: 3.3333333333cqw;
}
#care .care-slider .care-slider-item .care-table tbody td:where(.feature *) .feature-icons .feature-icons-item {
  height: 13.3333333333cqw;
}
#care .care-slider .care-slider-item .care-table tbody td:where(.feature *) .feature-icons .feature-icons-item img {
  max-height: 100%;
}
#care .care-slider .care-slider-item .care-table tbody .row-gold td {
  border-right: 0.5333333333cqw solid var(--main-color-gold);
}
#care .care-slider .care-slider-item .care-table tbody .row-gold:where(:not(.row-gold + *)) th, #care .care-slider .care-slider-item .care-table tbody .row-gold:where(:not(.row-gold + *)) td {
  border-top: 0.5333333333cqw solid var(--main-color-gold);
}
#care .care-slider .care-slider-item .care-table tbody .row-gold:not(:has(+ .row-gold)) th, #care .care-slider .care-slider-item .care-table tbody .row-gold:not(:has(+ .row-gold)) td {
  border-bottom: 0.5333333333cqw solid var(--main-color-gold);
}
#care .care-slider .slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: flex-start;
  -moz-column-gap: 8cqw;
       column-gap: 8cqw;
  margin-top: 4cqw;
}
#care .care-slider .slick-dots li button {
  font-size: 0;
  width: 2cqw;
  aspect-ratio: 1/1;
  background-color: #c7bbab;
  border-radius: 50%;
  transition: background-color 0.3s;
}
#care .care-slider .slick-dots li.slick-active button {
  background-color: var(--main-color-blue);
}
#care .care-slider .slick-arrow {
  font-size: 0;
  display: block;
  position: absolute;
  width: 2.2666666667cqw;
  height: 4.1333333333cqw;
  top: auto;
  bottom: 0;
  background-size: 100% 100%;
  transition: opacity 0.3s;
  background-color: transparent;
}
#care .care-slider .slick-arrow.slick-next {
  right: 13.3333333333cqw;
  background-image: url(/ec/img/usr/pg/campaign/m_shirts_s/25aw/slider_arrow_next.png);
}
#care .care-slider .slick-arrow.slick-prev {
  left: 13.3333333333cqw;
  background-image: url(/ec/img/usr/pg/campaign/m_shirts_s/25aw/slider_arrow_prev.png);
}
#care .care-movie {
  margin-top: 10.6666666667cqw;
}
#care .care-movie dt {
  font-family: var(--font-Shippori);
  font-size: 4.5333333333cqw;
  font-weight: 700;
  line-height: 1;
  color: var(--main-color-blue);
  text-align: center;
  margin-bottom: 6.6666666667cqw;
}
#care .care-movie dd {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}
#care .care-movie dd iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#care .care-banner-02 {
  margin-top: 10.6666666667cqw;
}
#care .care-banner-02 .care-banner-image {
  padding-inline: 2cqw;
  margin-bottom: 5.3333333333cqw;
}
#care .care-banner-02 p {
  font-family: var(--font-Shippori);
  line-height: 1;
  text-align: center;
  font-feature-settings: "palt";
  text-box: unset;
}
#care .care-banner-02 .care-banner-text-bold {
  font-size: 4.5333333333cqw;
  font-weight: 700;
  margin-bottom: 2cqw;
}
#care .care-banner-02 .care-banner-text-meium {
  font-size: 3.7333333333cqw;
  font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
  #care .care-slider .slick-dots li button:hover {
    background-color: var(--main-color-blue);
  }
  #care .care-slider .slick-arrow:hover {
    opacity: 0.5;
  }
}
/* recommend */
#recommend {
  background: #f2f1ec;
}
#recommend .recommend-title {
  margin-bottom: 17.3333333333cqw;
}
#recommend .recommend-content {
  position: relative;
  background: #fff;
  padding: 17.3333333333cqw 5.3333333333cqw 6.6666666667cqw;
}
#recommend .recommend-content + .recommend-content {
  margin-top: 17.3333333333cqw;
}
#recommend .recommend-content .recommend-head {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 3.3333333333cqw;
       column-gap: 3.3333333333cqw;
  position: absolute;
  top: -6.6666666667cqw;
  left: 50%;
  transform: translateX(-50%);
}
#recommend .recommend-content .recommend-head.line2 {
  top: -9.3333333333cqw;
}
#recommend .recommend-content .recommend-head .recommend-head-number {
  width: 13.3333333333cqw;
}
#recommend .recommend-content .recommend-head .recommend-head-text span {
  width: -moz-max-content;
  width: max-content;
  line-height: 1;
}
#recommend .recommend-content .recommend-head .recommend-head-text .recommend-head-text-mega {
  font-family: "Noto Serif JP", serif;
  font-size: 8cqw;
  font-weight: 600;
  color: var(--main-color-blue);
  display: flex;
  align-items: center;
}
#recommend .recommend-content .recommend-head .recommend-head-text .recommend-head-text-mega small {
  font-size: 4cqw;
}
#recommend .recommend-content .recommend-head .recommend-head-text .recommend-head-text-mega:where(.content-01 *, .content-02 *) {
  font-size: 10cqw;
}
#recommend .recommend-content .recommend-head .recommend-head-text .recommend-head-text-small {
  font-size: 3.2cqw;
  font-weight: 500;
  font-feature-settings: "palt";
  display: block;
}
#recommend .recommend-content .recommend-image {
  width: 29.2cqw;
  margin: 0 auto 5.3333333333cqw;
}
#recommend .recommend-content .recommend-subhead {
  font-family: var(--font-Shippori);
  font-size: 5.0666666667cqw;
  font-weight: 700;
  line-height: 1.3157894737;
  text-align: center;
  margin-bottom: 4cqw;
}
#recommend .recommend-content .recommend-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3.3333333333cqw;
  margin-top: 6.6666666667cqw;
}
#recommend .recommend-content .recommend-icons .recommend-icon {
  width: 16cqw;
}
#recommend .recommend-content .recommend-item {
  padding-top: 8cqw;
  margin-top: 6.6666666667cqw;
  border-top: 0.4cqw solid #a0a0a0;
}
#recommend .recommend-content .recommend-item .recommend-item-head {
  width: 44.5333333333cqw;
  margin: 0 auto 8cqw;
}
#recommend .recommend-content .recommend-item .recommend-item-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6.6666666667cqw 9.3333333333cqw;
}
#recommend .recommend-content .recommend-item .recommend-item-list li {
  width: 29.3333333333cqw;
}
#recommend .recommend-content .recommend-item .recommend-item-list li .recommend-item-image {
  width: 25.3333333333cqw;
  margin: 0 auto 2.6666666667cqw;
}
#recommend .recommend-content .recommend-item .recommend-item-list li .recommend-item-name {
  font-size: 2.9333333333cqw;
  font-weight: 500;
  text-align: left;
  font-feature-settings: unset;
}
#recommend .recommend-content .recommend-item .recommend-item-list li.comingsoon {
  width: 68cqw;
}
#recommend .recommend-content .recommend-item .recommend-item-btn {
  width: 100%;
  margin-top: 6.6666666667cqw;
}
#recommend .recommend-content .recommend-item .recommend-item-btn a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--main-color-blue);
  border: 0.2666666667cqw solid var(--main-color-blue);
  padding: 4cqw 5.3333333333cqw 4cqw 6.6666666667cqw;
}
#recommend .recommend-content .recommend-item .recommend-item-btn a span {
  font-size: 4.2666666667cqw;
  font-weight: 500;
  line-height: 1.5625;
  color: #fff;
  text-align: left;
}
#recommend .recommend-content .recommend-item .recommend-item-btn a::after {
  content: "";
  display: block;
  background-color: #fff;
  width: 5.0666666667cqw;
  height: 2.5333333333cqw;
  transition: background-color 0.3s;
  clip-path: polygon(0 1.0666666667cqw, 2.6666666667cqw 1.0666666667cqw, 2.6666666667cqw 0, 100% 50%, 2.6666666667cqw 100%, 2.6666666667cqw 1.4666666667cqw, 0 1.4666666667cqw);
}

@media (hover: hover) and (pointer: fine) {
  #recommend .recommend-content .recommend-item .recommend-item-btn a:hover {
    background: #fff;
    opacity: 1;
  }
  #recommend .recommend-content .recommend-item .recommend-item-btn a:hover span {
    color: var(--main-color-blue);
  }
  #recommend .recommend-content .recommend-item .recommend-item-btn a:hover::after {
    background-color: var(--main-color-blue);
  }
}
/* bottom-banner */
#bottom-banner {
  padding: 20cqw 5.3333333333cqw;
}
#bottom-banner figure {
  width: 64cqw;
  margin-inline: auto;
}
#bottom-banner figure figcaption {
  font-size: 3.2cqw;
  text-align: center;
  font-weight: 500;
  text-underline-offset: 0.6666666667cqw;
  margin-top: 2cqw;
}

/* ------------------------------
    サイド背景
------------------------------ */
.bg-container {
  position: relative;
  width: calc((100% - 550px) / 2);
}
.bg-container .bg-wrapper {
  position: sticky;
  width: 100%;
  height: calc(100vh - 122px);
  top: 122px;
  left: 0;
}
.bg-container .bg-wrapper .bg-item {
  position: absolute;
  width: 100%;
  height: calc(100vh - 122px);
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s;
  background-size: cover;
  background-position: top center;
  overflow: hidden;
}
.bg-container .bg-wrapper .bg-item .bg-item-text {
  position: absolute;
  top: 10px;
  right: 0;
}
.bg-container .bg-wrapper .bg-item .bg-item-number {
  position: absolute;
  bottom: 0;
  left: 2.9197080292%;
}
.bg-container .bg-wrapper .bg-item.active {
  opacity: 1;
}
.bg-container .bg-wrapper .bg-item:nth-of-type(1) {
  background-image: url(/ec/img/usr/pg/campaign/m_shirts_s/25aw/bg_01.jpg);
  z-index: 1;
  opacity: 1;
}
.bg-container .bg-wrapper .bg-item:nth-of-type(2) {
  background-image: url(/ec/img/usr/pg/campaign/m_shirts_s/25aw/bg_02.jpg);
  z-index: 2;
}
.bg-container .bg-wrapper .bg-item:nth-of-type(2) .bg-item-text {
  width: calc(143 / 685 * 100%);
}
.bg-container .bg-wrapper .bg-item:nth-of-type(2) .bg-item-number {
  width: 34.3065693431%;
}
.bg-container .bg-wrapper .bg-item:nth-of-type(3) {
  background-image: url(/ec/img/usr/pg/campaign/m_shirts_s/25aw/bg_03.jpg);
  z-index: 3;
}
.bg-container .bg-wrapper .bg-item:nth-of-type(3) .bg-item-text {
  width: calc(143 / 685 * 100%);
}
.bg-container .bg-wrapper .bg-item:nth-of-type(3) .bg-item-number {
  width: 37.2262773723%;
}
.bg-container .bg-wrapper .bg-item:nth-of-type(4) {
  background-image: url(/ec/img/usr/pg/campaign/m_shirts_s/25aw/bg_04.jpg);
  z-index: 4;
}
.bg-container .bg-wrapper .bg-item:nth-of-type(4) .bg-item-text {
  width: calc(195 / 685 * 100%);
}
.bg-container .bg-wrapper .bg-item:nth-of-type(4) .bg-item-number {
  width: 36.7883211679%;
}
.bg-container .bg-wrapper .bg-item:nth-of-type(5) {
  background-image: url(/ec/img/usr/pg/campaign/m_shirts_s/25aw/bg_05.jpg);
  z-index: 5;
}
.bg-container .bg-wrapper .bg-item:nth-of-type(5) .bg-item-text {
  width: calc(286 / 685 * 100%);
}

@media screen and (max-width: 1100px) {
  .bg-container {
    display: none;
  }
}/*# sourceMappingURL=index.css.map */