@charset "UTF-8";
:root {
  --ff-helvetica: Helvetica, sans-serif;
  --ff-yu-gothic: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  --clr-tip--black: #000;
  --clr-tip--gray: #A4A9AD;
  --clr-tip--brown: #634C3C;
  --clr-tip--red: #FF372B;
  --clr-tip--orange: #FF6634;
  --clr-tip--khaki: #636753;
  --clr-tip--camel: #DB9A4A;
}

.main-content :where(input, select, textarea, table, th, td, li, a) {
  color: inherit;
  font-family: inherit;
}
.main-content :is(a, a:hover) {
  text-decoration: none;
}

[class*=js-fadein] {
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.8s;
          transition-duration: 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

.js-fadein:not(.is-animated) {
  opacity: 0;
}

.js-fadein-up:not(.is-animated) {
  opacity: 0;
  -webkit-transform: translateY(80px);
          transform: translateY(80px);
}

@media (max-width: 30em) {
  .u-d-n--sp {
    display: none;
  }
}
@media (min-width: 30.0625em) and (max-width: 48em) {
  .u-d-n--tb {
    display: none;
  }
}
@media (min-width: 48.0625em) {
  .u-d-n--pc {
    display: none;
  }
}
@media (max-width: 48em) {
  .u-d-n--not-pc {
    display: none;
  }
}
@media (min-width: 30.0625em) {
  .u-d-n--not-sp {
    display: none;
  }
}
.u-d-b--sp {
  display: none;
}
@media (max-width: 30em) {
  .u-d-b--sp {
    display: block;
  }
}
.u-d-b--tb {
  display: none;
}
@media (min-width: 30.0625em) and (max-width: 48em) {
  .u-d-b--tb {
    display: block;
  }
}
.u-d-b--pc {
  display: none;
}
@media (min-width: 48.0625em) {
  .u-d-b--pc {
    display: block;
  }
}
.u-d-b--not-pc {
  display: none;
}
@media (max-width: 48em) {
  .u-d-b--not-pc {
    display: block;
  }
}
.u-d-b--not-sp {
  display: none;
}
@media (min-width: 30.0625em) {
  .u-d-b--not-sp {
    display: block;
  }
}

.js-diagonal-line {
  z-index: 10;
  position: absolute;
  top: calc(100% + 40px);
  left: calc(50% + 40px);
  background-image: -webkit-gradient(linear, right top, left bottom, color-stop(49.8%, transparent), color-stop(50%, #000), color-stop(50.2%, transparent));
  background-image: linear-gradient(to bottom left, transparent 49.8%, #000 50%, transparent 50.2%);
}
.js-diagonal-line-start {
  position: relative;
}
@media (max-width: 48em) {
  .js-diagonal-line {
    display: none;
  }
}

.contents-gloves {
  font-family: YuGothic, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeSpeed;
}

.pg-mv {
  position: relative;
}
.pg-mv:not(.is-animated) .pg-mv__img img {
  opacity: 0;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.pg-mv:not(.is-animated) .pg-mv__title {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}
.pg-mv:not(.is-animated) .pg-mv__subtitle {
  opacity: 0;
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
}
@media (min-width: 48.0625em) {
  .pg-mv__images {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.pg-mv__img {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
}
.pg-mv__img img {
  -webkit-transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.pg-mv__content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
}
.pg-mv__title {
  text-align: center;
  -webkit-transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
}
.pg-mv__title svg {
  max-width: 288px;
  width: 100%;
  aspect-ratio: 400/88;
}
@media (min-width: 48.0625em) {
  .pg-mv__title svg {
    max-width: 400px;
  }
}
.pg-mv__subtitle {
  -webkit-transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.32s;
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.32s;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.08em;
  margin-top: 16px;
  text-align: center;
}
@media (min-width: 48.0625em) {
  .pg-mv__subtitle {
    font-size: 1.8rem;
    color: #fff;
  }
  .pg-mv__subtitle:not(:first-child) {
    margin-top: 20px;
  }
}

.pg-introduction {
  position: relative;
}
.pg-introduction__img {
  overflow: hidden;
  width: 100%;
  height: 100%;
  aspect-ratio: 375/980;
  position: absolute;
  top: 0;
  left: 0;
}
.pg-introduction__img img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
@media (min-width: 48.0625em) {
  .pg-introduction__img {
    aspect-ratio: 1440/762;
  }
}
.pg-introduction__content {
  position: relative;
  max-width: 300px;
  margin: auto;
  padding: 80px 0 264px;
}
@media (min-width: 48.0625em) {
  .pg-introduction__content {
    max-width: 580px;
    padding: 100px 0 264px;
  }
}
.pg-introduction__header {
  text-align: center;
  font-family: var(--ff-helvetica);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.pg-introduction__category {
  font-size: 2.2rem;
  font-weight: 200;
}
@media (min-width: 48.0625em) {
  .pg-introduction__category {
    font-size: 2rem;
  }
}
.pg-introduction__title {
  font-size: 3.4rem;
  font-weight: bold;
}
@media (min-width: 48.0625em) {
  .pg-introduction__title {
    font-size: 4rem;
  }
}
.pg-introduction__text {
  line-height: 2.8;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  margin-top: 32px;
}
@media (min-width: 48.0625em) {
  .pg-introduction__text {
    line-height: 3;
  }
}

.pg-sections {
  --margin: clamp(40px, calc((100vw - 1200px) / 2), calc((1600px - 1200px) / 2));
  position: relative;
}
@media (min-width: 48.0625em) {
  .pg-sections {
    --margin: clamp(120px, calc((100vw - 1200px) / 2), calc((1600px - 1200px) / 2));
  }
}

.pg-side-anchor {
  position: absolute;
  top: 0;
  right: 0;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  width: var(--margin, 60px);
  height: 100vh;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  will-change: position;
}
.pg-side-anchor.is-fixed-start {
  position: fixed;
}
.pg-side-anchor.is-fixed-end {
  position: absolute;
  top: auto;
  bottom: 0;
}
.pg-side-anchor__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.1rem;
}
@media (min-width: 48.0625em) {
  .pg-side-anchor__items {
    font-size: 1.6rem;
  }
}
.pg-side-anchor__item {
  width: 16px;
  line-height: 1.25;
  font-weight: bold;
  font-family: var(--ff-helvetica);
}
.pg-side-anchor__item:not(.is-current) a {
  border-left: 1px solid transparent;
}
.pg-side-anchor__item.is-current a {
  border-left: 1px solid #000;
}
.pg-side-anchor__item + .pg-side-anchor__item {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ccc;
}
.pg-side-anchor__item a {
  text-decoration: none;
  -webkit-transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.pg-section--lightgray {
  background-color: #f0f0f0;
}

.pg-yt {
  padding: 68px var(--margin) 0;
}
@media (min-width: 48.0625em) {
  .pg-yt {
    padding-top: 80px;
  }
}
.pg-yt__content {
  position: relative;
  aspect-ratio: 1200/675;
}
.pg-yt__content a {
  position: relative;
  z-index: 20;
}
.pg-yt__content img {
  position: relative;
  z-index: 5;
  -webkit-transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.pg-yt__content.is-playing img {
  opacity: 0;
  visibility: hidden;
}
.pg-yt #YTPlayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pg-interview {
  padding: 96px var(--margin);
}
@media (min-width: 48.0625em) {
  .pg-interview {
    padding: 160px var(--margin);
  }
}
.pg-interview--lightgray {
  background: #f0f0f0 url("/static/full/motorcycle/contents/gloves/img/bg-img@sp@2x.png") right bottom no-repeat;
  background-size: 100%;
}
@media (min-width: 48.0625em) {
  .pg-interview--lightgray {
    background-image: url("/static/full/motorcycle/contents/gloves/img/bg-img@pc@2x.png");
    background-size: 46%;
  }
  .pg-interview--lightgray .pg-interview__container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
.pg-interview__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
@media (max-width: 48em) {
  .pg-interview__container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 80px;
  }
}
@media (min-width: 48.0625em) {
  .pg-interview__container {
    gap: 96px;
  }
}
.pg-interview__cell {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.pg-interview__cell:nth-child(2n) {
  -webkit-box-flex: 0.81147541;
      -ms-flex: 0.81147541;
          flex: 0.81147541;
}
.pg-interview__cell > * {
  -webkit-box-ordinal-group: var(--order);
      -ms-flex-order: var(--order);
          order: var(--order);
}
@media (max-width: 48em) {
  .pg-interview__cell {
    display: contents;
  }
}
.pg-interview__title {
  position: relative;
  font-weight: bold;
  margin-bottom: 84px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.pg-interview__title span {
  position: relative;
  z-index: 2;
}
.pg-interview__title svg {
  position: absolute;
  width: 316px;
  height: 68px;
  top: 100%;
  left: 0;
  -webkit-transform: translateY(-1.2em);
          transform: translateY(-1.2em);
}
@media (max-width: 48em) {
  .pg-interview__title {
    font-size: 2rem;
    margin-bottom: -40px;
  }
  .pg-interview__title svg {
    display: none;
  }
}
@media (min-width: 48.0625em) {
  .pg-interview__title {
    font-size: 2.4rem;
    margin-bottom: 84px;
  }
}
.pg-interview__text {
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  line-height: 2.2;
}
@media (max-width: 48em) {
  .pg-interview__text p + p {
    margin-top: 2.2em;
  }
}
@media (min-width: 48.0625em) {
  .pg-interview__text {
    line-height: 2.4;
  }
  .pg-interview__text + .pg-interview__text,
  .pg-interview__text p + p {
    margin-top: 2.4em;
  }
  .pg-interview__text ~ .pg-figure {
    margin-top: 84px;
    max-width: 81.147541%;
  }
}

.pg-figure__container {
  padding: 96px var(--margin);
}
@media (min-width: 48.0625em) {
  .pg-figure__container {
    padding: 160px var(--margin);
  }
}
.pg-figure__img {
  max-width: 800px;
  margin: auto;
}
.pg-figure figcaption {
  max-width: 800px;
  margin: auto;
  margin-top: 24px;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.pg-figure figcaption b:first-child {
  display: inline-block;
  font-size: 1.6rem;
  margin-bottom: 4px;
}
@media (min-width: 48.0625em) {
  .pg-figure + .pg-figure {
    margin-top: 80px;
  }
  .pg-figure figcaption b:first-child {
    font-size: 1.4rem;
  }
}

.pg-products {
  padding: 80px var(--margin);
}
@media (min-width: 48.0625em) {
  .pg-products {
    padding: 140px var(--margin);
  }
}
.pg-products__heading {
  font-size: 2.8rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  font-family: var(--ff-helvetica);
}
@media (min-width: 48.0625em) {
  .pg-products__heading {
    font-size: 3.6rem;
    margin-bottom: 80px;
  }
}
.pg-products__content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 16px;
}
@media (min-width: 48.0625em) {
  .pg-products__content {
    gap: 80px 40px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pg-product {
  font-family: var(--ff-helvetica);
}
.pg-product__img {
  width: 100%;
}
.pg-product__content {
  margin-top: 20px;
}
.pg-product__title {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.pg-product__price {
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-top: 4px;
}
.pg-product__colors {
  margin-top: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}
.pg-product .c-buy-button {
  margin-top: 16px;
}

.pg-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 80px;
}

.c-color-tip {
  width: var(--size, 18px);
  height: var(--size, 18px);
  border-radius: 50%;
  background-color: var(--clr-1, #808080);
}
.c-color-tip--2 {
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(49.9%, var(--clr-1)), color-stop(51%, var(--clr-2)));
  background-image: linear-gradient(to bottom right, var(--clr-1) 49.9%, var(--clr-2) 51%);
}

.c-buy-button {
  font-family: var(--ff, var(--ff-helvetica));
  font-weight: var(--fw, normal);
  position: relative;
  width: var(--w, 66px);
  height: var(--h, 24px);
  color: var(--clr, #000);
  border: 1px solid;
  border-color: var(--bdc, inherit);
  background-color: var(--bgc, transparent);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  font-size: 1.2rem;
}
.c-buy-button a {
  color: inherit;
  font-family: inherit;
  text-decoration: none;
  -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.c-buy-button a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
@media (min-width: 48.0625em) {
  .c-buy-button:hover {
    background-color: var(--bgc-h, var(--bdc, #000));
  }
  .c-buy-button:hover a {
    color: var(--clr-h, #fff);
  }
}

.c-fill-button {
  font-family: var(--ff-yu-gothic);
  font-weight: var(--fw, normal);
  position: relative;
  width: var(--w, 100%);
  height: var(--h, 60px);
  max-width: var(--maw, 280px);
  color: var(--clr, #fff);
  border: 1px solid;
  border-color: var(--bdc, #000);
  background-color: var(--bgc, #000);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  font-size: 1.8rem;
  border-radius: var(--bdr, var(--h, 60px));
  letter-spacing: 0.02em;
  line-height: 1;
}
.c-fill-button a {
  color: inherit;
  font-family: inherit;
  text-decoration: none;
  -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.c-fill-button a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
@media (min-width: 48.0625em) {
  .c-fill-button:hover {
    background-color: var(--bgc-h, var(--bdc, #fff));
    color: var(--clr-h, #000);
  }
}/*# sourceMappingURL=index.css.map */