@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
.blk001-pants {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}
.blk001-pants .l-head {
  margin: 0 auto min(calc(80 / 375 * 100vw), 12rem);
}
.blk001-pants .l-issue {
  padding: 0 min(calc(10 / 375 * 100vw), 2rem);
}
.blk001-pants .l-product {
  padding: min(calc(60 / 375 * 100vw), 10rem) 0;
}
.blk001-pants .p-head__mainvisual {
  opacity: 0;
  animation: fadeIn 1s forwards;
  width: 100%;
}
.blk001-pants .p-head__title {
  text-align: center;
  line-height: 1;
  letter-spacing: 0.15em;
  font-size: min(calc(35 / 375 * 100vw), 8rem);
  font-weight: 500;
  transform: scale(0.8, 1);
  font-family: "Jost", sans-serif;
}
.blk001-pants .p-head__comment {
  margin: min(calc(20 / 375 * 100vw), 3rem) auto;
  text-align: center;
  font-size: min(calc(20 / 375 * 100vw), 3rem);
  line-height: 1.5;
  letter-spacing: 0.2em;
}
.blk001-pants .p-head__comment__line {
  text-decoration: underline;
  text-decoration-color: #dbd99e;
  text-decoration-thickness: 1em;
  text-underline-offset: -0.5em;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  letter-spacing: 0.15em;
  letter-spacing: 0.2em;
}
.blk001-pants .p-head__comment-bold {
  font-size: min(calc(25 / 375 * 100vw), 3.5rem);
  font-weight: bold;
  letter-spacing: 0.2em;
}
.blk001-pants .p-head__fukidashi {
  display: block;
  width: 50%;
  max-width: 500px;
  margin: min(calc(50 / 375 * 100vw), 8rem) auto min(calc(25 / 375 * 100vw), 4rem);
}
.blk001-pants .p-head__box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 500px;
  margin: 0 auto;
  padding: 1rem;
}
.blk001-pants .p-head__box.animated .p-head__box__item:nth-child(1) {
  animation: fadeUp 0.5s forwards;
}
.blk001-pants .p-head__box.animated .p-head__box__item:nth-child(2) {
  animation: fadeUp 0.5s forwards;
  animation-delay: 0.3s;
}
.blk001-pants .p-head__box.animated .p-head__box__item:nth-child(3) {
  animation: fadeUp 0.5s forwards;
  animation-delay: 0.6s;
}
.blk001-pants .p-head__box.animated .p-head__box__item:nth-child(4) {
  animation: fadeUp 0.5s forwards;
  animation-delay: 0.9s;
}
.blk001-pants .p-head__box__item {
  display: inline-block;
  border-radius: 50%;
  border: 1px solid;
  max-width: 100px;
  max-height: 100px;
  width: min(calc(80 / 375 * 100vw), 12rem);
  height: min(calc(80 / 375 * 100vw), 12rem);
  opacity: 0;
}
.blk001-pants .p-head__box__item:nth-child(odd) {
  background: #000000;
}
.blk001-pants .p-head__box__item:nth-child(even) {
  background: #474747;
}
.blk001-pants .p-head__box__item a {
  display: block;
  text-align: center;
  color: #ffffff;
  font-size: min(calc(15 / 375 * 100vw), 2rem);
  line-height: min(calc(80 / 375 * 100vw), 10rem);
}
.blk001-pants .p-product__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.blk001-pants .p-product__list.animated .p-product__item:nth-child(1) {
  animation: fadeUp 0.5s forwards;
}
.blk001-pants .p-product__list.animated .p-product__item:nth-child(2) {
  animation: fadeUp 0.5s forwards;
  animation-delay: 0.3s;
}
.blk001-pants .p-product__list.animated .p-product__item:nth-child(3) {
  animation: fadeUp 0.5s forwards;
  animation-delay: 0.6s;
}
.blk001-pants .p-product__list.animated .p-product__item:nth-child(4) {
  animation: fadeUp 0.5s forwards;
  animation-delay: 0.9s;
}
.blk001-pants .p-product__item {
  width: 48%;
  margin-bottom: 8%;
  opacity: 0;
}
.blk001-pants .p-product__image {
  width: 100%;
}
.blk001-pants .p-product__name {
  text-align: center;
  font-weight: bold;
  font-size: min(calc(12 / 375 * 100vw),2rem);
}
.blk001-pants .p-product__price {
  text-align: center;
  font-weight: 800;
  font-size: min(calc(12 / 375 * 100vw),2rem);
}
.blk001-pants .p-product__link {
  display: block;
  margin: min(calc(10 / 375 * 100vw),2rem) auto 0;
  text-align: center;
  font-size: min(calc(12 / 375 * 100vw),2rem);
  font-weight: bold;
  border: 1px solid;
  line-height: 1.5;
}
.blk001-pants .p-issue__item {
  padding-top: 100px;
  margin-top: -100px;
  margin-bottom: min(calc(80 / 375 * 100vw), 10rem);
}
.blk001-pants .p-issue__item:last-child {
  margin-bottom: 0;
}
.blk001-pants .p-issue__heading {
  font-size: min(calc(20 / 375 * 100vw), 5rem);
  text-align: center;
}
.blk001-pants .p-issue__title {
  font-size: min(calc(20 / 375 * 100vw), 3rem);
  text-align: center;
}
.blk001-pants .p-issue__title-bold {
  position: relative;
  z-index: 2;
  display: inline-block;
  letter-spacing: 0.15em;
  letter-spacing: 0.2em;
  font-weight: bold;
  font-size: min(calc(18 / 375 * 100vw), 4rem);
}
.blk001-pants .p-issue__title-bold::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: min(calc(20 / 375 * 100vw), 3rem);
  z-index: -1;
  background-color: #dbd99e;
  transition: width 0.5s ease-out;
}
.blk001-pants .p-issue__title-bold.animated::after {
  width: 100%;
}
.blk001-pants .p-issue__comparison {
  position: relative;
  margin-bottom: min(calc(30 / 375 * 100vw), 4rem);
}
.blk001-pants .p-issue__maru {
  display: inline-block;
  border-radius: 50%;
  border: 1px solid;
  max-width: 100px;
  max-height: 100px;
  width: min(calc(50 / 375 * 100vw), 12rem);
  height: min(calc(50 / 375 * 100vw), 12rem);
  background: #000000;
  color: #ffffff;
  text-align: center;
  line-height: min(calc(50 / 375 * 100vw), 10rem);
  font-size: min(calc(12 / 375 * 100vw), 3rem);
}
.blk001-pants .p-issue__arrow {
  display: block;
  height: 1px;
  background: #000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
.blk001-pants .p-issue__arrow::before {
  content: "";
  width: 2rem;
  height: 2rem;
  border: 0.1em solid currentColor;
  border-right: 0;
  border-bottom: 0;
  transform: rotate(-45deg);
  transform-origin: top left;
  position: absolute;
  top: 50%;
  left: -0.05em;
  box-sizing: border-box;
}
.blk001-pants .p-issue__product__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.blk001-pants .p-issue__product__list.animated .p-issue__product__item:nth-child(1) {
  animation: fadeUp 0.5s forwards;
}
.blk001-pants .p-issue__product__list.animated .p-issue__product__item:nth-child(2) {
  animation: fadeUp 0.5s forwards;
  animation-delay: 0.3s;
}
.blk001-pants .p-issue__product__list.animated .p-issue__product__item:nth-child(3) {
  animation: fadeUp 0.5s forwards;
  animation-delay: 0.6s;
}
.blk001-pants .p-issue__product__list.animated .p-issue__product__item:nth-child(4) {
  animation: fadeUp 0.5s forwards;
  animation-delay: 0.9s;
}
.blk001-pants .p-issue__product__item {
  width: 23%;
  opacity: 0;
}
.blk001-pants .p-issue__product__image {
  width: 100%;
}
.blk001-pants .p-issue__product__name {
  font-size: min(calc(9 / 375 * 100vw), 1.5rem);
  line-height: 1.5;
  text-align: center;
}
.blk001-pants .p-btn {
  text-align: center;
  margin-top: 6rem;
}
.blk001-pants .p-btn a {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  border: 3px solid;
  padding: 0.5rem 2rem;
}

.animation-fadeIn {
  opacity: 0;
  transition: opacity 1s linear;
}
.animation-fadeIn.animated {
  animation: fadeIn 1s forwards;
}

.animation-fadeUp {
  opacity: 0;
  transition: opacity 1s linear;
}
.animation-fadeUp.animated {
  animation: fadeUp 1s forwards;
}

.animation-arrow {
  width: 0;
  transition: opacity 1s linear;
}
.animation-arrow.animated {
  animation: arrow 1s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes arrow {
  0% {
    width: 0;
  }
  100% {
    width: calc(100% - min(16vw, 12rem));
  }
}