@charset "UTF-8";
/* //////////////////////////////////////////////////

Title : style.scss
For   : Page/feature/2024/240305_mensboxers/

Created       : 2024-03-05
Last Modified : 2024-03-05

==========================================

Content

////////////////////////////////////////////////// */
:root {
  --container-fluid: 100%;
  --container-wide: 900px;
  --container-narrow: 660px;
  --color-dark: #555555;
  --color-light: #f1f1f1;
  --color-light-gray: #E4E4E4;
  --font-ja: "游ゴシック Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  --font-en: var(--font-common);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  a:hover {
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --rate: 100vw / 750;
    --default-footer-gap: calc(50 * 100vw / 750);
    --design-lp-gap: 120;
    --container-gap: calc(45 * var(--rate));
    --spacer: calc(140 * var(--rate));
    --title-size-lrg: calc(40 * var(--rate));
    --title-size-sml: calc(32 * var(--rate));
    --heading-size-lrg: calc(32 * var(--rate));
    --heading-size-sml: calc(32 * var(--rate));
    --text-size-mid: calc(24 * var(--rate));
    --text-size-sml: calc(20 * var(--rate));
    --text-size-button: calc(22 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  :root {
    --rate: 1px;
    --container-gap: 0;
    --spacer: calc(120 * var(--rate));
    --title-size-lrg: calc(23 * var(--rate));
    --title-size-sml: calc(18 * var(--rate));
    --heading-size-lrg: calc(20 * var(--rate));
    --heading-size-sml: calc(18 * var(--rate));
    --text-size-mid: calc(14 * var(--rate));
    --text-size-sml: calc(12 * var(--rate));
    --text-size-button: calc(15 * var(--rate));
  }
}
body {
  background-color: var(--color-light-gray);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .lp {
    padding-bottom: calc(var(--design-lp-gap) * var(--rate) - var(--default-footer-gap));
  }
  .hidden-sml {
    display: none !important;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .hidden-lrg {
    display: none !important;
  }
}
/* ========== main layout */
.container__lp {
  max-width: var(--container-wide);
  margin-inline: auto;
  color: var(--color-dark);
  font-family: var(--font-family, var(--font-ja));
  font-feature-settings: "palt";
}
.container__lp img,
.container__lp a,
.container__lp picture {
  display: var(--display, block);
}
.container__lp img {
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}
.container__lp h2,
.container__lp h3 {
  font-weight: inherit;
}
.container__shell--products {
  padding-inline: var(--container-gap);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .container__shell + * {
    -webkit-margin-before: var(--spacer);
            margin-block-start: var(--spacer);
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .container__lp {
    -webkit-padding-before: 20px;
            padding-block-start: 20px;
    -webkit-padding-after: 120px;
            padding-block-end: 120px;
  }
  .container__shell + * {
    -webkit-margin-before: var(--spacer);
            margin-block-start: var(--spacer);
  }
}
/* ========== common */
.contents {
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.contents__heading {
  position: relative;
  font-size: var(--heading-size-lrg);
  font-family: var(--font-en);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1;
}
.contents__inner {
  display: grid;
}
.contents__colorName {
  font-size: var(--heading-size-sml);
  font-family: var(--font-en);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.25;
}
.contents__description {
  font-size: var(--text-size-mid);
  letter-spacing: var(--letter-spacing, 0.075em);
  text-align: justify;
}
.contents__price {
  -webkit-margin-before: 2.8em;
          margin-block-start: 2.8em;
  font-size: var(--text-size-sml);
  letter-spacing: 0.1em;
}
.contents__price a {
  --display: inline;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .contents__heading {
    -webkit-padding-after: calc(30 * var(--rate));
            padding-block-end: calc(30 * var(--rate));
  }
  .contents__heading + .contents__inner {
    -webkit-margin-before: calc(60 * var(--rate) - 4 * var(--rate));
            margin-block-start: calc(60 * var(--rate) - 4 * var(--rate));
  }
  .contents__inner {
    grid-template-columns: 100%;
  }
  .contents__inner + .contents__inner {
    -webkit-margin-before: var(--margin-block-start, calc(var(--spacer) - 4 * var(--rate)));
            margin-block-start: var(--margin-block-start, calc(var(--spacer) - 4 * var(--rate)));
  }
  .contents__inner + .contents__inner--narrowGap {
    --margin-block-start: calc(var(--spacer) + 20 * var(--rate));
  }
  .contents__column--thumb + .contents__column--thumb {
    -webkit-margin-before: calc(40 * var(--rate));
            margin-block-start: calc(40 * var(--rate));
  }
  .contents__column--thumb + .contents__column--details {
    -webkit-margin-before: var(--margin-block-start, calc(80 * var(--rate) - 0.5em + 4 * var(--rate)));
            margin-block-start: var(--margin-block-start, calc(80 * var(--rate) - 0.5em + 4 * var(--rate)));
  }
  .contents__colorName + .contents__description {
    -webkit-margin-before: 1em;
            margin-block-start: 1em;
  }
  .contents__description {
    line-height: 2;
  }
  .container__shell--products .contents__column--thumb + .contents__column--details {
    --margin-block-start: calc(58 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .contents__heading {
    -webkit-padding-after: 15px;
            padding-block-end: 15px;
  }
  .contents__heading + .contents__inner {
    -webkit-margin-before: 40px;
            margin-block-start: 40px;
  }
  .contents__inner {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    row-gap: calc(45px - 0.5em);
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
  .contents__inner + .contents__inner {
    -webkit-margin-before: calc(var(--spacer) - 20px);
            margin-block-start: calc(var(--spacer) - 20px);
  }
  .contents__column--fill {
    grid-column: span 2;
  }
  .contents__column--wide {
    max-width: 500px;
  }
  .contents__column--narrow {
    max-width: 380px;
  }
  .contents__colorName + .contents__description {
    -webkit-margin-before: 0.5em;
            margin-block-start: 0.5em;
  }
  .contents__description {
    line-height: 2;
  }
}
/* ========== firstView */
.firstView__title, .firstView__lead, .firstView__products {
  padding-inline: var(--container-gap);
}
.firstView__title {
  text-align: center;
  line-height: 1;
}
.firstView__title span {
  display: block;
}
.firstView__title--sub {
  font-size: var(--title-size-sml);
}
.firstView__title--main {
  font-size: var(--title-size-lrg);
}
.firstView__lead {
  font-size: var(--text-size-mid);
  text-align: center;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .firstView__title {
    -webkit-margin-before: calc(80 * var(--rate));
            margin-block-start: calc(80 * var(--rate));
  }
  .firstView__title--sub {
    letter-spacing: 0.14em;
  }
  .firstView__title--main {
    -webkit-padding-before: 1em;
            padding-block-start: 1em;
    letter-spacing: 0.12em;
  }
  .firstView__lead {
    -webkit-margin-before: calc(65 * var(--rate) - 0.5em);
            margin-block-start: calc(65 * var(--rate) - 0.5em);
    line-height: 2;
    letter-spacing: 0.1em;
  }
  .firstView__products {
    -webkit-margin-before: calc(var(--spacer) - 0.5em + 4 * var(--rate));
            margin-block-start: calc(var(--spacer) - 0.5em + 4 * var(--rate));
  }
  .firstView__products .contents__description {
    --letter-spacing: .065em;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .firstView__title {
    -webkit-margin-before: 80px;
            margin-block-start: 80px;
  }
  .firstView__title--sub {
    letter-spacing: 0.15em;
  }
  .firstView__title--main {
    -webkit-padding-before: 1.1em;
            padding-block-start: 1.1em;
    letter-spacing: 0.13em;
  }
  .firstView__lead {
    -webkit-margin-before: calc(40px - 0.5em);
            margin-block-start: calc(40px - 0.5em);
    line-height: 2;
    letter-spacing: 0.085em;
  }
  .firstView__products {
    -webkit-margin-before: calc(var(--spacer) - 20px - 1em);
            margin-block-start: calc(var(--spacer) - 20px - 1em);
  }
  .firstView__products .contents__description {
    --letter-spacing: .08em;
  }
}
/* ========== button */
.container__button {
  --display: grid;
  place-items: center;
  margin-inline: auto;
  background-color: var(--color-light);
  font-size: var(--text-size-button);
  letter-spacing: 0.075em;
}
.container__button span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container__button span::after {
  content: "";
  position: relative;
  border-right: 1px solid var(--color-dark);
  border-bottom: 1px solid var(--color-dark);
  width: var(--arrow-size);
  height: var(--arrow-size);
  transform: rotate(-45deg);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .container__button {
    width: calc(540 * var(--rate));
    height: calc(80 * var(--rate));
  }
  .container__button span {
    gap: calc(10 * var(--rate));
  }
  .container__button span::after {
    --arrow-size: calc(10 * var(--rate));
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .container__button {
    width: 440px;
    height: 60px;
  }
  .container__button span {
    gap: 10px;
  }
  .container__button span::after {
    --arrow-size: 5px;
  }
}
/* ========== animation */
.js-fadeIn {
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.5rem);
  transition: all 1.5s;
}
.js-fadeIn.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.js-border {
  position: relative;
}
.js-border::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-dark);
  transition: all 1.8s ease 0.5s;
}
.js-border.is-show::after {
  width: 100%;
}