@import url("/store/miknits/2025aw/css/variables.css");
@import url("/store/miknits/2025aw/css/base.css");
@import url("/store/miknits/2025aw/css/header.css");
@import url("/store/miknits/2025aw/css/gnav.css");
@import url("/store/miknits/2025aw/css/footer.css");

:root {
  --color-bg-accent: #fff5e9;
  --color-text-accent: #be5e09;
  --color-brown: #601e00;
  --color-navy: #1a3c73;
  --color-rightBrown: #b47a15;
  --color-orange: #e94709;
}

html {
  scroll-behavior: auto;
}

body {
  overflow-x: clip;
  line-height: 1.6;
  opacity: 0;
}

body.is-loaded {
  transition: opacity 0.3s ease-out;
  opacity: 1;
}

/* title */
.title {
  display: grid;
  justify-items: center;
  gap: 1.3rem;
  padding-block: 5rem 3.8rem;
}

.title__logo {
  width: 100%;
  max-width: 15.2rem;
}

.title__text {
  width: 100%;
  max-width: 16.6rem;
}

@media (min-width: 801px) {
  .title {
    gap: 1.6rem;
    padding-block: 7.5rem 5rem;
  }

  .title__logo {
    max-width: 29.8rem;
  }

  .title__text {
    max-width: 24.8rem;
  }
}

/* mv */

.mvSwiper {
  --swiper-pagination-bullet-horizontal-gap: 0;
  --swiper-pagination-bottom: 0;
  --swiper-pagination-bullet-inactive-color: #899296;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-size: 1rem;
  --swiper-pagination-color: var(--color-brown);

  padding-bottom: 3.4rem;
}

.mvSwiper .swiper-slide img {
  width: 100%;
  height: auto;
}

.js-mv-swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

@media (min-width: 801px) {
  .mvSwiper {
    padding-bottom: 2.5rem;
    width: var(--pc-width);
    margin-inline: auto;
  }

  .mvSwiper .swiper-slide img {
    width: 100%;
    max-width: 950px;
    aspect-ratio: 930/630;
    object-fit: contain;
    margin-inline: auto;
  }

  .js-mv-swiper-pagination {
    left: 0;
    right: 0;
    justify-content: flex-end;
    max-width: 950px;
    margin-inline: auto;
  }
}

/*.intro */
.intro {
  margin-top: 4rem;
}

.intro__wrapper {
  width: calc(100% - 4rem);
  max-width: 950px;
  margin-inline: auto;
}

.yodogawa {
  font-size: 1.5rem;
  line-height: 2;
}

.profileButton {
  width: fit-content;
  margin-top: 3.2rem;
  padding: 0.7rem 2.4rem 0.7rem 1.8rem;
  font-family: "Shuei KakuGo Gin M";
  font-size: 1.8rem;
  line-height: 2;
  letter-spacing: -0.03em;
  color: #fff;
  background: var(--color-rightBrown);
  border-radius: 0 100vmax 100vmax 0;
}

.profileModal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(255, 255, 255, 0.8);
  transition-property: opacity, visibility;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.profileModal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.profileModal__layer {
  display: flex;
  justify-content: center;
  padding: 8rem 5%;
  width: 100%;
}

.profileModal__body {
  padding: 2rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #fff;
  overflow-y: auto;
  width: 100%;
  max-width: 610px;
  margin-inline: auto;
}

.profileModal__title {
  font-size: 3rem;
}

.profileModal__title rt {
  font-size: 1.1rem;
}

.profileModal__content {
  margin-top: 1rem;
}

.profileModal__bio {
  margin-top: 1rem;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.06em;
}

.profileModal__bio p + p {
  margin-top: 2em;
}

.profileModalSection {
  margin-top: 1rem;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.06em;
}

.profileModalSection a {
  color: #b70e16;
}

.profileModal__close {
  display: block;
  width: fit-content;
  margin-top: 2rem;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  line-height: 2;
  margin-inline: auto;
}

.introSns {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  margin-top: 2rem;
  color: var(--color-rightBrown);
}

.introSns__title {
  font-size: 1.6rem;
}

.introSnsList {
  display: flex;
  gap: 1.8rem;
}

.introSnsList a {
  font-size: 3.4rem;
  color: var(--color-rightBrown);
}

.miknitsShorts {
  position: relative;
  margin-top: 5rem;
  max-width: 180px;
  margin-inline: auto;
}

.miknitsShorts__text01 {
  position: absolute;
  top: 0;
  left: 100%;
  width: 10%;
  max-width: 22rem;
  margin-left: 2.3rem;
}

.miknitsShorts__text02 {
  position: absolute;
  bottom: 0;
  right: 100%;
  width: 20%;
  max-width: 46rem;
  margin-right: 2rem;
}

.miknitsShorts__video {
  aspect-ratio: 9/16;
}

.miknitsShorts__video iframe {
  width: 100%;
  height: 100%;
}

@media (min-width: 801px) {
  .intro__wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5.6rem 3rem;
    width: var(--pc-width);
  }

  .profile {
    grid-row: 2/3;
    grid-column: 1/2;
  }

  .profileButton {
    margin-top: 0;
  }

  .profileModal__layer {
    display: flex;
    padding: 8rem 25rem;
  }

  .profileModalSection h3 {
    font-size: 1.6rem;
  }

  .introSns {
    grid-row: 2/3;
    grid-column: 2/3;
    display: flex;
    align-items: center;
    gap: 2.2rem;
    align-self: center;
    margin-top: 0;
  }

  .miknitsShorts {
    margin-top: 0;
    max-width: 175px;
    margin-inline: 0;
  }

  .miknitsShorts__text01 {
    margin-left: 1.3rem;
  }

  .miknitsShorts__text02 {
    position: absolute;
    bottom: -2.7rem;
    right: auto;
    left: 100%;
    max-width: unset;
    width: 23.3rem;
    margin-right: 0;
    margin-left: 2.2rem;
  }

  .miknitsShorts__video {
    aspect-ratio: 9/16;
  }

  .miknitsShorts__video iframe {
    width: 100%;
    height: 100%;
  }
}

/* articles */
.articles {
  margin-top: 7.4rem;
  padding-inline: 2.3rem;
  overflow: hidden;
}

.articlesSwiper {
  --swiper-pagination-bullet-horizontal-gap: 0;
  --swiper-pagination-bottom: 0;
  --swiper-pagination-bullet-inactive-color: #899296;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-size: 1rem;
  --swiper-pagination-color: var(--color-orange);

  padding-bottom: 3.4rem;
  overflow: visible;
}

.articlesSwiper .swiper-slide {
  width: 20.6rem;
  height: auto;
}

.article {
  display: flex;
  height: 100%;
}

.article__inner {
  display: flex;
  flex-direction: column;
}

.article__title {
  flex: 1;
  line-height: 1.7;
  margin-block: 1.6rem 0.8rem;
  font-size: 1.1rem;
}

.article__title span {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.3rem;
  letter-spacing: 0.09em;
  line-height: 1.4;
}

.article__date {
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #808080;
}

.js-articlesSwiper-pagination {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

@media (min-width: 801px) {
  .articles {
    margin-top: 4.4rem;
    padding: 0;
  }

  .articles__inner {
    position: relative;
    width: var(--pc-width);
    max-width: 1000px;

    margin-inline: auto;
    overflow: hidden;
  }

  .articles__inner::before {
    content: "";
    display: block;
    height: 5px;
    width: 100%;
    background: top left / auto 5px repeat-x
      url("/store/miknits/2025aw/img/index/border.webp");
  }

  .articlesSwiper {
    position: static;
    --swiper-pagination-bullet-horizontal-gap: 0;
    --swiper-pagination-bottom: 0;
    --swiper-pagination-bullet-inactive-color: #899296;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-size: 1rem;
    --swiper-pagination-color: var(--color-orange);

    width: calc((100% - 80px) / 3);
    margin: 0;
    margin-top: 4rem;
    padding-bottom: 5rem;
  }

  .articlesSwiper .swiper-slide {
    width: auto;
  }

  .article__title {
    margin-block: 1.6rem 1.8rem;
    font-size: 1.3rem;
    line-height: 1.45;
  }

  .article__title span {
    margin-top: 0.5rem;
    font-size: 1.5rem;
    line-height: 1.35;
  }

  .article__date {
    font-family: "Shuei KakuGo Gin R";
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    line-height: 1;
  }

  .js-articlesSwiper-pagination {
    justify-content: flex-end;
  }
}

/* wrapper */
.wrapper {
  width: calc(100% - 2rem);
  position: relative;
  margin-top: 4.8rem;
  padding-top: 8rem;
  margin-inline: auto;
}

@media (min-width: 801px) {
  .wrapper {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 7rem;
    max-width: 1250px;
    width: var(--pc-width);
    margin-top: 7.2rem;
    padding-top: 12rem;
  }
}

.sideNav {
  display: none;
}

@media (min-width: 801px) {
  .sideNav {
    display: block;
    position: sticky;
    top: 12rem;
    left: 0;
    padding-bottom: 4rem;
  }

  .sideNavList {
    display: grid;
    justify-items: end;
    gap: 2rem;
  }

  .sideNavItem__link {
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    letter-spacing: 0.09em;
    line-height: 2;
    color: var(--color-navy);
  }

  .sideNavItem__link::after {
    content: "";
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    margin-left: 1.3rem;
    background: center / contain no-repeat
      url("/store/miknits/2025aw/img/index/double_arrow.svg");
  }

  .sideNavItem__link--01::before {
    content: "";
    display: block;
    width: 6rem;
    height: 4.5rem;
    margin-right: -0.5rem;
    background: center / contain no-repeat
      url("/store/miknits/2025aw/img/index/sideNav_icon01.svg");
  }

  .sideNavItem__link--02::before {
    content: "";
    display: block;
    width: 4.7rem;
    height: 4.3rem;
    margin-right: 1.6rem;
    background: center / contain no-repeat
      url("/store/miknits/2025aw/img/index/sideNav_icon02.svg");
  }

  .sideNavItem__link--03::before {
    content: "";
    display: block;
    width: 1.6rem;
    height: 4.2rem;
    margin-right: 1.2rem;
    background: center / contain no-repeat
      url("/store/miknits/2025aw/img/index/sideNav_icon03.svg");
  }

  .sideNavItem__link--04::before {
    content: "";
    display: block;
    width: 2.7rem;
    height: 2.4rem;
    margin-right: 1.2rem;
    background: center / contain no-repeat
      url("/store/miknits/2025aw/img/index/sideNav_icon04.svg");
  }

  .sideNavItem__link--05::before {
    content: "";
    display: block;
    width: 6.8rem;
    height: 4.4rem;
    margin-right: 0.1rem;
    background: center / contain no-repeat
      url("/store/miknits/2025aw/img/index/sideNav_icon05.svg");
  }
  .sideNavItem__link--06::before {
    content: "";
    display: block;
    width: 2.4rem;
    height: 2.7rem;
    margin-right: 1rem;
    background: center / contain no-repeat
      url("/store/miknits/2025aw/img/index/sideNav_icon06.svg");
  }
}

/* content */
.content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5rem;
  padding-bottom: 3.8rem;
}

@media (min-width: 801px) {
  .content {
    gap: 3rem;
    padding-bottom: 18rem;
  }
}

/* items */
.items {
}

.items:not(:first-child)::before {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  margin-bottom: 3.5rem;
  background: top left / auto 5px repeat-x
    url("/store/miknits/2025aw/img/index/border.webp");
}

.items__header {
  display: grid;
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem 1.8rem;
  color: var(--color-navy);
}

.items__title {
  grid-row: 1/2;
  grid-column: 2/3;
  font-size: 2.2rem;
  letter-spacing: 0.09em;
  line-height: 1.45;
}

.items__description {
  grid-row: 2/3;
  grid-column: 1/3;
  font-size: 1.5rem;
  line-height: 1.6;
}

.items__icon {
  grid-row: 1/2;
  grid-column: 1/2;
  width: 7rem;
}

.items__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  margin-top: 1.8rem;
}

.items__content + .items__content {
  margin-top: 8rem;
}

.items__bottom {
  margin-top: 4rem;
}

.items__point {
}

.items__banner {
  display: block;
  margin-top: 4rem;
}

@media (min-width: 801px) {
  .items:not(:first-child)::before {
    margin-bottom: 4rem;
  }

  .items__header {
    gap: 0 3rem;
  }

  .items__title {
    font-size: 2.8rem;
    line-height: 2;
  }

  .items__description {
    grid-row: 2/3;
    grid-column: 2/3;
  }

  .items__description span {
    display: block;
  }

  .items__icon {
    grid-row: 1/3;
    width: 13rem;
  }

  .items__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8rem 3rem;
    margin-top: 3.2rem;
  }

  .items__content + .items__content {
    margin-top: 6rem;
  }

  .items__content--col1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .items__bottom {
    margin-top: 7rem;
    margin-inline: auto;
    max-width: 720px;
  }

  .items__point {
    max-width: 590px;
  }

  .items__banner {
    margin-top: 7rem;
    margin-bottom: 6.4rem;
  }
}

/*item */
.item {
  display: flex;
  flex-direction: column;
}

.item__img {
  aspect-ratio: 430/287;
  object-fit: cover;
}

.item__title {
  margin-top: 2rem;
  font-size: 1.8rem;
  letter-spacing: 0.09em;
  line-height: 1.25;
  text-align: center;
  color: var(--color-navy);
}

.item__title:first-child {
  margin-top: 0;
}

.item__button {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  gap: 0.5rem;
  padding-inline: 1.6rem;
  width: fit-content;
  margin-inline: auto;
  font-family: "Shuei KakuGo Gin M";
  font-size: 1.6rem;
  line-height: 2;
  color: #fff;
  background: var(--color-navy);
  border-radius: 100vmax;
}

.item__button::after {
  content: "";
  display: block;
  width: 1.3rem;
  height: 1.6rem;
  background: center / contain no-repeat
    url("/store/miknits/2025aw/img/index/double_arrow_wh.svg");
}

.item__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.itemCards {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 1rem;
}

.itemCard {
  position: relative;
  width: calc(50% - 0.5rem);
}

.itemCard__name {
  margin-top: 2rem;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  line-height: 2;
  text-align: center;
}

.itemCard__price {
  margin-top: -1rem;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  line-height: 2;
  text-align: center;
}

.itemCard__price span {
  font-size: 1.2rem;
}

.itemCard__info {
  margin-top: -0.5rem;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  line-height: 2;
  text-align: center;
  color: #be5e09;
}

.itemCard__soldout {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32%;
  max-width: 8rem;
}

@media (min-width: 801px) {
  .item__title {
    margin-top: 2rem;
  }

  .item__button {
    margin-top: 2rem;
  }

  .item__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-top: 2rem; */
  }

  .item__row .item__title {
    margin: 0;
  }

  .item__row .item__button {
    margin: 0;
  }

  .item__button::after {
    content: "";
    display: block;
    width: 1.3rem;
    height: 1.6rem;
    background: center / contain no-repeat
      url("/store/miknits/2025aw/img/index/double_arrow_wh.svg");
  }

  .itemCards {
    gap: 3rem 1rem;
    margin-top: 3rem;
  }

  .itemCards--row5 .itemCard {
    width: calc((100% - 4rem) / 5);
  }

  .itemCards--row5 {
    justify-content: flex-start;
  }
  .itemCards--row4 {
    gap: 4rem;
    justify-content: flex-start;
  }

  .itemCards--row4 .itemCard {
    width: calc((100% - 12rem) / 4);
  }

  .item__contentImg {
    margin-top: auto;
  }
}

/* yomimono */
.yomimono {
  padding: 3.4rem 2rem 8rem;
  color: var(--color-brown);
  background: var(--color-bg-accent);
}

.yomimono__inner {
  max-width: 900px;
  margin-inline: auto;
}

.yomimono__head {
  display: grid;
  gap: 1.4rem 1.2rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.yomimono__icon {
  width: 7rem;
}

.yomimono__title {
  font-size: 1.8rem;
  letter-spacing: 0.09em;
}

.yomimono__text {
  grid-column: 1/3;
  font-size: 1.5rem;
}

.yomimono__banners {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.yomimono__banners img {
  border-radius: 6px;
}

@media (min-width: 801px) {
  .yomimono {
    padding: 7.2rem 4rem;
  }

  .yomimono__head {
    gap: 0 3rem;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
  }

  .yomimono__icon {
    grid-row: 1/3;
    width: 13rem;
  }

  .yomimono__title {
    font-size: 2.8rem;
    line-height: 2;
  }

  .yomimono__text {
    grid-column: 2/3;
    font-size: 1.5rem;
  }

  .yomimono__banners {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    margin-top: 5rem;
  }

  .yomimono__banners img {
    border-radius: 6px;
  }
}

/* pageTop */
.pageTop {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 100000;
  width: 4.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

.pageTop.is-visible {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 801px) {
  .pageTop {
    right: 3rem;
    bottom: 3rem;
  }
}