@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&family=Zen+Kaku+Gothic+New:wght@500;700&display=swap");

:root {
  --font--1: "Zen Kaku Gothic New", sans-serif;
  --font--2: "Montserrat", sans-serif;
  --font--3: "Hiragino Kaku Gothic W3 JIS2004", sans-serif;
  --font--4: "Hiragino Kaku Gothic W6 JIS2004", sans-serif;
  --medium: 500;
  --semibold: 600;
  --bold: 700;
}

.knitting_ct {
  font-family: var(--font--1);
  font-weight: var(--medium);
  margin: 0 calc(50% - 50vw);
  margin-top: 20px;
  overflow: hidden;
  width: 100vw;
}

.knitting_ct img {
  height: auto;
  width: 100%;
}

.knitting_ct * {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

.knitting-hero_ct {
  position: relative;
}

.knitting-header__title_ct {
  margin-inline: auto;
  margin-bottom: -16px;
  position: relative;
  width: 40.8%;
  z-index: 2;
}

.knitting-header__subtitle_ct {
  position: absolute;
  left: 50%;
  top: 292px;
  top: 57.9365079365079%;
  transform: translateX(-50%);
  width: 54.4%;
  z-index: 2;
}

.knitting-header__caption_ct {
  position: absolute;
  right: 20px;
  right: 8%;
  top: 90px;
  top: 17.8571428571429%;
  width: 8.933333333%;
  z-index: 2;
}

.knitting-hero__main_ct {
  aspect-ratio: 43 / 31;
  position: relative;
  width: 100%;
}

.knitting-hero__main__image_ct {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 0;
}

.knitting-hero__main__image_ct.active {
  opacity: 1;
  z-index: 1;
}

.knitting-hero__sub_ct {
  display: flex;
  justify-content: center;
  gap: 4%;
  margin-top: 45px;
  margin-top: 12%;
}

.knitting-hero__sub_ct .knitting-hero__sub__image_ct {
  width: 15.06849315%;
}

.knitting-hero__sub__image_ct {
  display: none;
}

.knitting-hero__sub__image_ct.visible {
  display: inline-block;
}

.knitting-hero__caption_ct {
  font-size: 13px;
  line-height: 1.923;
  margin-top: 20px;
  text-align: center;
}

.knitting-kinds_ct {
  margin-top: 70px;
}

.knitting-kinds__title_ct {
  font-family: var(--font--1);
  font-weight: var(--medium);
  font-size: 15px;
  text-align: center;
}

.knitting-kinds__items_ct {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-inline: auto;
  margin-top: 22px;
  width: 77.333333333%;
}

.knitting-kinds__item_ct {
  width: 100%;
}

.knitting-kinds_ct .knitting-kinds__link_ct {
  background-color: #e3e435;
  border-radius: 5px;
  display: block;
  padding-left: 10px;
  padding-right: 20px;
  position: relative;
  text-decoration: none;
}

.knitting-kinds__link_ct::after {
  aspect-ratio: 12 / 18;
  background-color: #000;
  content: "";
  -webkit-mask-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.414 17.482"><path d="M0,11.775l1.414-1.414,3.293,3.293V0h2V13.654L10,10.361l1.414,1.414L5.707,17.482Z" fill="red"/></svg>');
  mask-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.414 17.482"><path d="M0,11.775l1.414-1.414,3.293,3.293V0h2V13.654L10,10.361l1.414,1.414L5.707,17.482Z" fill="red"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 2.068965517%;
}

.knitting-kinds__body_ct {
  display: flex;
  align-items: center;
  gap: 10px;
}

.knitting-kinds_ct .knitting-kinds__image_ct {
  width: 45px;
}

.knitting-kinds__caption_ct {
  font-size: 13px;
}

.knitting-content_ct {
  margin-top: 80px;
}

.knitting-content__header_ct {
  margin-bottom: 35px;
}

.knitting-content__title_ct {
  margin-inline: auto;
  margin-bottom: -18px;
  position: relative;
}

.knitting__01_ct .knitting-content__title_ct {
  width: 48%;
}

.knitting__02_ct .knitting-content__title_ct {
  width: 38.933333333%;
}

.knitting__03_ct .knitting-content__title_ct {
  width: 44.533333333%;
}

.knitting-content__caption_ct {
  font-size: 13px;
  line-height: 1.5384;
  margin-top: 20px;
  text-align: center;
}

.knitting-content__subtitle_ct {
  margin-inline: auto;
}

.subtitle__01_ct {
  width: 84.8%;
}

.subtitle__02_ct {
  width: 41.6%;
}

.subtitle__03_ct {
  width: 84.8%;
}

.subtitle__04_ct {
  width: 41.6%;
}

.subtitle__05_ct {
  width: 41.6%;
}

.knitting-content__container_ct {
  position: relative;
}

.knitting-content__container_ct:not(:last-child) {
  margin-bottom: 40px;
  padding-bottom: 40px;
}

.knitting-content__container_ct:not(:last-child)::after {
  background-image: repeating-linear-gradient(90deg, #000000, #000000 5px, transparent 5px, transparent 10px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 1px;
  content: "";
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 90.666666666%;
}

.knitting-content__items_ct {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 25px 0;
  margin-inline: auto;
  margin-top: 25px;
  width: 83.066666666%;
}

.knitting-content__item_ct {
  width: 45.425361155%;
}

.knitting-content__item__link_ct {
  display: block;
  text-decoration: none !important;
}

.knitting-content__item__image_ct {
  position: relative;
}

.knitting-content__item__image_ct::after {
  background-color: rgba(204, 204, 204, 0.5);
  content: "";
  height: 100%;
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 100%;
  z-index: -1;
}

.knitting-content__item__caption_ct {
  font-family: var(--font--3);
  font-size: 12px;
  margin-top: 16px;
}

.knitting-content__item__name_ct {
  line-height: 1.3913;
}

.knitting-content__more_ct {
  margin-inline: auto;
  margin-top: 30px;
  max-width: 280px;
  width: 37.333333333%;
}

.knitting-content__more__link_ct {
  background-color: #E3E435;
  border-radius: 20px;
  display: flex;
  align-items: center;
  font-size: 13px;
  height: 40px;
  padding-left: 30px;
  position: relative;
  text-decoration: none !important;
}

.knitting-content__more__link_ct::before {
  aspect-ratio: 32/ 16;
  background-color: #000;
  content: "";
  -webkit-mask-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.391 15.665"><path d="M22.145,14.25l5.417-5.417H0v-2H27.563L22.145,1.414,23.559,0l7.832,7.832-7.832,7.833Z" fill="%230fff"/></svg>');
  mask-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.391 15.665"><path d="M22.145,14.25l5.417-5.417H0v-2H27.563L22.145,1.414,23.559,0l7.832,7.832-7.832,7.833Z" fill="%230fff"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 11.428571428%;
}

.knitting-content__more__link_ct::after {
  background-color: rgba(204, 204, 204, 0.5);
  border-radius: 20px;
  content: "";
  height: 100%;
  position: absolute;
  right: -2px;
  bottom: -3px;
  width: 100%;
  z-index: -1;
}

.knitting-banner_ct {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-inline: auto;
  margin-top: 70px;
  width: 73.066666666%;
}

.knitting-banner__link_ct {
  display: block;
  text-decoration: none !important;
}

.knitting-banner__caption_ct {
  color: #666;
  font-family: var(--font--3);
  font-size: 12px;
  line-height: 1.2916;
  margin-top: 10px;
  text-align: center;
}

@media (min-width: 768px) {
  .knitting_ct {
    max-width: 1085px;
    margin-inline: auto;
    padding-bottom: 120px;
    padding-top: 100px;
    position: relative;
  }

  .knitting_ct::after {
    border: 1px solid #E6E6E6;
    border-radius: 30px;
    content: "";
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
  }

  .knitting-hero_ct {
    max-width: 1000px;
    margin-inline: auto;
    padding-bottom: 60px;
    position: relative;
    width: 92.1658986175115%;
  }

  .knitting-hero_ct::after {
    background-image: repeating-linear-gradient(90deg, #000000, #000000 3px, transparent 3px, transparent 6px);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 100% 12px;
    content: "";
    height: 1px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 91%;
  }

  .knitting-header__title_ct {
    max-width: 580px;
    width: 58%;
  }

  .knitting-header__subtitle_ct {
    max-width: 330px;
    top: 480px;
    top: 62.015503875969%;
    width: 33%;
  }

  .knitting-header__caption_ct {
    max-width: 48px;
    right: 180px;
    right: 18%;
    top: 110px;
    top: 14.3790849673203%;
    width: 4.8%;
  }

  .knitting-hero__main_ct {
    aspect-ratio: 182 / 131;
    margin-inline: auto;
    max-width: 700px;
    width: 70%;
  }

  .knitting-hero__caption_ct {
    font-size: 19px;
    line-height: 1.7894;
    margin-top: 90px;
    margin-top: 9%;
  }

  .knitting-hero__sub_ct {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px 50%;
    max-width: 1000px;
    margin-top: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 40px;
    top: 5.2287581699346%;
    width: 100%;
  }

  .knitting-hero__sub_ct .knitting-hero__sub__image_ct {
    max-width: 95px;
    width: 9.5%;
  }

  .knitting-kinds_ct {
    margin-top: 80px;
  }

  .knitting-kinds__title_ct {
    font-size: 24px;
  }

  .knitting-kinds__items_ct {
    justify-content: space-between;
    gap: 10px 0;
    margin-top: 30px;
    max-width: 812px;
    width: 74.8387096774194%;
  }

  .knitting-kinds__item_ct {
    width: 49.5073891625616%;
  }

  .knitting-kinds_ct .knitting-kinds__link_ct {
    border-radius: 7px;
  }

  .knitting-kinds__link_ct::after {
    right: 30px;
    width: 8px;
  }

  .knitting-kinds__body_ct {
    gap: 20px;
  }

  .knitting-kinds_ct .knitting-kinds__image_ct {
    width: 60px;
  }

  .knitting-kinds__caption_ct {
    font-size: 18px;
  }

  .knitting-content_ct {
    margin-inline: auto;
    margin-top: 110px;
  }

  .knitting-content__header_ct {
    margin-inline: auto;
    margin-bottom: 70px;
    max-width: 960px;
    width: 88.4792626728111%;
  }

  .knitting-content__title_ct {
    margin-bottom: -25px;
  }

  .knitting__01_ct .knitting-content__title_ct {
    max-width: 260px;
    width: 27.083333333%;
  }

  .knitting__02_ct .knitting-content__title_ct {
    max-width: 210px;
    width: 21.875%;
  }

  .knitting__03_ct .knitting-content__title_ct {
    max-width: 240px;
    width: 25%;
  }

  .knitting-content__caption_ct {
    font-size: 18px;
    line-height: 1.7777;
    margin-top: 30px;
  }

  .knitting-content__container_ct {
    margin-inline: auto;
    max-width: 980px;
    width: 90.3225806451613%;
  }

  .knitting-content__container_ct:not(:last-child)::after {
    background-image: repeating-linear-gradient(90deg, #000000, #000000 3px, transparent 3px, transparent 6px);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 100% 12px;
    width: 100%;
  }

  .knitting-content__container_ct:not(:last-child) {
    margin-bottom: 60px;
    padding-bottom: 60px;
  }

  .subtitle__01_ct {
    max-width: 470px;
    width: 47.9591836734694%;
  }

  .subtitle__02_ct {
    max-width: 200px;
    width: 20.4081632653061%;
  }

  .subtitle__03_ct {
    max-width: 470px;
    width: 47.9591836734694%;
  }

  .subtitle__04_ct {
    max-width: 200px;
    width: 20.4081632653061%;
  }

  .subtitle__05_ct {
    max-width: 200px;
    width: 20.4081632653061%;
  }

  .knitting-content__items_ct {
    justify-content: flex-start;
    gap: 25px 5.073996%;
    max-width: 946px;
    margin-top: 35px;
    width: 96.530612244898%;
  }

  .knitting-content__item_ct {
    width: 21.141649048%;
  }

  .knitting-content__item__caption_ct {
    font-size: 16px;
    margin-top: 20px;
  }

  .knitting-content__item__name_ct {
    line-height: 1.3125;
  }

  .knitting-content__more_ct {
    margin-top: 45px;
    max-width: 195px;
    width: 100%;
  }

  .knitting-content__more__link_ct {
    border-radius: 28px;
    font-size: 19px;
    height: 55px;
    padding-left: 40px;
  }

  .knitting-content__more__link_ct::before {
    right: 26px;
    width: 22px;
  }

  .knitting-content__more__link_ct::after {
    border-radius: 28px;
  }

  .knitting-banner_ct {
    justify-content: space-between;
    gap: 25px 0;
    max-width: 790px;
    margin-top: 115px;
    width: 72.8110599078341%;
  }

  .knitting-banner__item_ct {
    width: 44.93670886%;
  }

  .knitting-banner__caption_ct {
    font-size: 16px;
    margin-top: 15px;
  }
}