@charset "UTF-8";

/**********************************************************
 * ボタンパーツ
 **********************************************************/

/*
VIEW
================================================ */
.button__view,
.button__view--fill {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: fit-content;
  line-height: 1;
  overflow: hidden;
  padding: 19px 47px;
  font-size: 31.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-radius: 36px;
  z-index: 2;
}
.button__view--fill {
  border: 1px solid var(--color-main-dark);
}

@media (768px <= width < 1920px) {
  .button__view,
  .button__view--fill {
    padding: 0.99vw 2.448vw;
    font-size: 1.641vw;
    border-radius: 1.875vw;
  }
}

@media (width < 768px) {
  .button__view,
  .button__view--fill {
    padding: 2.4vw 4.8vw;
    font-size: 4.267vw;
    border-radius: 4.8vw;
  }
}

/* ===== 枠線ピンクのVIEWボタン ===== */
.button__view {
  color: var( --color-main-light);
  background-color: var(--color-light);
}
.button__view:hover {
  color: var(--color-light);
  background-color: transparent;
}
.button__view::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 100%;
  background-color: var(--color-main-dark);
  content: '';
  transition: width .3s ease;
}
.button__view:hover::before {
  width: 100%;
}

/* ===== ピンク背景のVIEWボタン ===== */
.button__view--fill {
  background: transparent;
  color: var(--color-light);
}
.button__view--fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-main-dark);
  z-index: -2;
}
.button__view--fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-light);
  transform: scaleX(0);
  transform-origin: left;
  z-index: -1;
  transition: none;
}
.button__view--fill:hover {
  color: var(--color-main-dark);
}
.button__view--fill:hover::after {
  transform: scaleX(1);
  transition: transform .3s ease;
}

/*
VIEW MORE
================================================ */
.button__more {
  position: relative;
  display: block;
  width: 333px;
}
@media (768px <= width < 1920px) {
  .button__more {
    width: 17.344vw;
  }
}

@media (width < 768px) {
  .button__more {
    width: 44.04vw; /* 165.15px */
  }
  .button__more.button__more--small {
    width: 31.467vw; /* 118px */
  }
}

/* 反対向きバージョン */
.button__more--reverse svg {
  transform: scaleX(-1);
  transform-origin: center; /* 中心で反転 */
}
.button__more span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  margin-left: 70px;
  font-size: 27px;
  letter-spacing: .1em;
  line-height: 1;
}
.button__more.button__more--small span {
  font-size: 30px;
}
.button__more.button__more--reverse span {
  margin-left: 100px;
}
.button__more svg {
  width: 100%;
  height: auto;
  display: block;
}
.view-more {
  fill: none;
  stroke: var(--color-light);
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 2px;
}

@media (768px <= width < 1920px) {
  .button__more span {
    font-size: 1.406vw;
  }
  .button__more.button__more--small span {
    font-size: 1.563vw;
  }
}

@media (width < 768px) {
  .button__more span {
    font-size: 3.6vw;
  }
  .button__more.button__more--small span {
    font-size: 2.933vw;
  }
}

/* 初期状態：線は全部見えている */
.animated-line {
  stroke-dasharray: 900;
  stroke-dashoffset: 0;
}

/* hover中だけ「消える」→「描く」を順番に再生 */
.button__more:hover .animated-line {
  animation:
    erase-line 1.25s linear forwards,
    draw-line  1.25s linear forwards 0.7s;
  /* animation-iteration-count: infinite; */
}

/* １：左から右に消えていく（0 → -900） */
@keyframes erase-line {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -900; }
}

/* ２：左から右に描かれていく（900 → 0） */
@keyframes draw-line {
  from { stroke-dashoffset: 900; }
  to   { stroke-dashoffset: 0; }
}

@media (768px <= width < 1920px) {
  .button__more span {
    margin-left: 3.646vw;
  }
  .button__more.button__more--reverse span {
    margin-left: 5.208vw;
  }
  .view-more {
    stroke-width: 0.104vw;
  }
}
@media (width < 768px) {
  .button__more span {
    margin-left: 9.067vw;
  }
  .button__more.button__more--small span {
    margin-left: 5.6vw;
  }
  .button__more.button__more--reverse span {
    margin-left: 13.333vw;
  }
  .view-more {
    stroke-width: 0.533vw;
  }
}

/*
BUY NOW
================================================ */
.button__buy {
  display: inline-block;
  margin-top: 50px;
  padding: 14px 40px;
  font-size: 34px;
  font-weight: 600;
  border-radius: 36px;
  letter-spacing: 0.05em;
  color: var(--products-button);
  background: var(--color-light);
}
@media (768px <= width < 1920px) {
  .button__buy {
    margin-top: 2.604vw;
    padding: 0.729vw 2.083vw;
    font-size: 1.771vw;
    border-radius: 1.875vw;
  }
}
@media (width < 768px) {
  .button__buy {
    margin-top: 8vw;
    padding: 2.133vw 5.333vw;
    font-size: 4.667vw; /* 17.5px */
    border-radius: 5.067vw;
  }
}