/**
 * ribon 投稿専用スタイル
 * スラッグが ribon の投稿でのみ読み込まれる
 */

html {
  /* プライベート変数（必要に応じて上書き可能） */
  --_font-size: var(--font-size__base, 10);
  --_width: var(--width__breakpoint, 1240);

  /* 1240px以上: 固定フォントサイズ */
  font-size: calc(var(--_font-size) * 1px);
}

/* 1025px～1240px: リキッドフォントサイズ */
@media (max-width: 1025px) {
  html {
    --_width: 1240;
    font-size: calc((var(--_font-size) / var(--_width)) * 100vw);
  }
}

@media (max-width: 767px) {
  html {
    --_width: 375;
    font-size: calc((var(--_font-size) / var(--_width)) * 100vw);
  }
}

.m-ribon-fv {
  position: relative;
  padding-top: 8.8rem;
  padding-bottom: 9rem;
}

.m-ribon-fv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../../img/ribon/fv-bg.jpg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .m-ribon-fv {
    padding-top: 2.8rem;
    padding-bottom: 0.2rem;
  }

  .m-ribon-fv::before {
    background-image: url(../../img/ribon/fv-bg-sp.jpg);
  }
}

.m-ribon-fv__label {
  font-size: 7.4rem;
  font-weight: var(--fw-bold);
  font-family: var(--font-biz-ud-gothic);
  color: #e6003e;
  line-height: 1.9;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-fv__label {
    font-size: 1.9rem;
  }
}

.m-ribon-fv__title-wrapper {
  margin-top: 9.4rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-fv__title-wrapper {
    margin-top: 2.4rem;
  }
}

.m-ribon-fv__title {
  font-size: clamp(96px, 22.857px + 9.524vw, 160px);
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: #e6003e;
  line-height: 1.5;
  letter-spacing: -0.03em;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-fv__title {
    font-size: 4.2rem;
  }
}

.m-ribon-fv__body {
  display: grid;
  row-gap: 9rem;
  margin-top: 11.2rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-fv__body {
    row-gap: 2.8rem;
    margin-top: 3rem;
  }
}

.m-ribon-fv__text {
  font-size: 7.4rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-medium);
  color: var(--color__black);
  line-height: 2.1;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-fv__text {
    font-size: 1.9rem;
  }
}

.m-ribon-fv__text--accent {
  font-weight: var(--fw-bold);
  line-height: 1.85;
}

.m-ribon-fv__image-wrapper {
  display: grid;
  justify-items: center;
  margin-top: 3rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-fv__image-wrapper {
    margin-top: 0.8rem;
  }
}

.m-ribon-fv__image {
  max-width: 141.5rem;
}

.m-ribon-fv__image img {
  aspect-ratio: 1415 / 1938;
}

@media screen and (max-width: 767px) {
  .m-ribon-fv__image {
    max-width: 36.9rem;
  }
  .m-ribon-fv__image img {
    aspect-ratio: 369 / 505;
  }
}

.m-ribon-intro {
  padding-top: 28rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-intro {
    padding-top: 9.2rem;
  }
}

.m-ribon-intro__title {
  font-size: 12.8rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: #e84385;
  line-height: 1.2;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-intro__title {
    font-size: 3.3rem;
  }
}

.m-ribon-intro__works-wrapper {
  margin-top: 8rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-intro__works-wrapper {
    margin-top: 2rem;
  }
}

.m-ribon-intro__works {
  font-size: 6rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-medium);
  color: var(--color__black);
  line-height: 2.5;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-intro__works {
    font-size: 1.6rem;
  }
}

.m-ribon-intro__lead {
  font-size: 7.4rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: #3fa9f5;
  line-height: 2;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-intro__lead {
    font-size: 1.9rem;
  }
}

.m-ribon-intro__names {
  font-size: 6rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-medium);
  color: var(--color__black);
  line-height: 2.5;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-intro__names {
    font-size: 1.6rem;
  }
}

.m-ribon-product {
  padding-block: 25.6rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-product {
    padding-block: 6.6rem;
  }
}

.m-ribon-product__title {
  font-size: 12.8rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: #e84385;
  line-height: 1.3;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-product__title {
    font-size: 3.3rem;
  }
}

.m-ribon-product__meta-wrapper {
  margin-top: 14.4rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-product__meta-wrapper {
    margin-top: 4rem;
  }
}

.m-ribon-product__meta {
  font-size: clamp(76px, 16.571px + 7.738vw, 128px);
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: #e6003e;
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-product__meta {
    font-size: 3.3rem;
  }
}

.m-ribon-product__desc-wrapper {
  margin-top: 17.6rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-product__desc-wrapper {
    margin-top: 4.5rem;
  }
}

.m-ribon-product__desc {
  font-size: clamp(36px, 8.571px + 3.571vw, 60px);
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-medium);
  color: var(--color__black);
  line-height: 2.5;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-product__desc {
    font-size: 1.6rem;
  }
}

.m-ribon-product__count {
  font-size: 7.4rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: #3fa9f5;
  line-height: 2;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-product__count {
    font-size: 1.9rem;
  }
}

.m-ribon-product__list li {
  font-size: 6rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-medium);
  color: var(--color__black);
  line-height: 2.5;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-product__list li {
    font-size: 1.6rem;
  }
}

.m-ribon-product__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 6.6rem;
  row-gap: 8.2rem;
  margin-top: 16.2rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-product__gallery {
    column-gap: 1.5rem;
    row-gap: 1rem;
    margin-top: 3.7rem;
  }
}

.m-ribon-product__item {
  display: grid;
  justify-items: center;
  row-gap: 0.6rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-product__item {
    row-gap: 0;
  }
}

.m-ribon-product__frame {
  aspect-ratio: 1 / 1;
}

.m-ribon-product__item-title {
  font-size: clamp(25px, 5.571px + 2.53vw, 42px);
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-regular);
  color: var(--color__black);
  line-height: 1.2;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-product__item-title {
    font-size: 1.1rem;
  }
}

.m-ribon-product__info {
  margin-top: 14rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-product__info {
    margin-top: 4rem;
  }
}

.m-ribon-product__info-text-wrapper {
  margin-top: 4.6rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-product__info-text-wrapper {
    margin-top: 1rem;
  }
}

.m-ribon-product__info-text {
  font-size: 6rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-medium);
  color: var(--color__black);
  line-height: 2.5;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-product__info-text {
    font-size: 1.6rem;
  }
}

.m-ribon-product__info-text--accent {
  font-weight: var(--fw-bold);
  color: #e6003e;
}

.m-ribon-product__note-wrapper {
  margin-top: 3.8rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-product__note-wrapper {
    margin-top: 1rem;
  }
}

.m-ribon-product__note {
  font-size: 5rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-medium);
  color: var(--color__black);
  line-height: 1.5;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-product__note {
    font-size: 1.3rem;
  }
}

.m-ribon-product__warn-wrapper {
  margin-top: 12.8rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-product__warn-wrapper {
    margin-top: 3rem;
  }
}

.m-ribon-product__warn {
  font-size: clamp(35px, 9.857px + 3.274vw, 57px);
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: #e6003e;
  line-height: 2;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  border-bottom: 8px solid #fff024;
}

@media screen and (max-width: 767px) {
  .m-ribon-product__warn {
    font-size: 1.5rem;
    border-bottom: 2px solid #fff024;
  }
}

.m-ribon-product__cta {
  margin-top: 26rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-product__cta {
    margin-top: 7.2rem;
  }
}

.m-ribon-product__btn {
  display: grid;
  grid-template-columns: max-content 4.2rem;
  align-items: center;
  justify-content: center;
  column-gap: 4rem;
  font-size: 7.3rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1.7;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  background-color: #e84385;
  border-radius: 9999px;
  padding-block: 2rem;
  box-shadow: 8px 8px 0 #000;
  transition: box-shadow 0.3s ease;
}

@media screen and (max-width: 767px) {
  .m-ribon-product__btn {
    grid-template-columns: max-content 1.1rem;
    column-gap: 0.8rem;
    font-size: 1.9rem;
    padding-block: 0.2rem;
    box-shadow: 2px 4px 0 #000;
  }
}

.m-ribon-product__btn:hover {
  box-shadow: none;
}

.m-ribon-product__btn-icon {
  display: inline-block;
  width: 4.2rem;
  height: 6.2rem;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media screen and (max-width: 767px) {
  .m-ribon-product__btn-icon {
    width: 1.1rem;
    height: 1.6rem;
  }
}

.m-ribon-product__tagline-wrapper {
  margin-top: 13.8rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-product__tagline-wrapper {
    margin-top: 4rem;
  }
}

.m-ribon-product__tagline {
  font-size: clamp(76px, 16.571px + 7.738vw, 128px);
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: #e6003e;
  line-height: 1.5;
  letter-spacing: -0.03em;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-product__tagline {
    font-size: 3.3rem;
  }
}

.m-ribon-product__tagline-sub-wrapper {
  margin-top: 6rem;
}

@media screen and (max-width: 767px) {
  .m-ribon-product__tagline-sub-wrapper {
    margin-top: 1.4rem;
  }
}

.m-ribon-product__tagline-sub {
  font-size: 6rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-medium);
  color: var(--color__black);
  line-height: 2.5;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (max-width: 767px) {
  .m-ribon-product__tagline-sub {
    font-size: 1.6rem;
  }
}