:where(.sbw-brand),
:where(.sbw-brand-collagen),
:where(.sbw-b-wellness),
:where(.sbw-questions) {
  --size-xxx-sm: 0.25rem;
  --size-xx-sm: 0.5rem;
  --size-x-sm: 0.75rem;
  --size-sm: 0.875rem;
  --size-md: 1rem;
  --size-x-md: 1.25rem;
  --size-xx-md: 1.5rem;
  --size-lg: 2rem;
  --size-x-lg: 2.5rem;
  --size-xx-lg: 3rem;
  --size-xxx-lg: 3.5rem;
  --size-4x-lg: 4rem;
  --size-max-sm: 16.25rem;
  --size-max-lg: 60rem;
  --size-button-md: 16.25rem;
  --size-button-x-md: 18.43rem;
  --size-button-lg: 21.43rem;
  --size-space-xxx-sm: 0.25rem;
  --size-space-xx-sm: 0.5rem;
  --size-space-x-sm: 0.75rem;
  --size-space-sm: 0.875rem;
  --size-space-md: 1rem;
  --size-space-x-md: 1.25rem;
  --size-space-xx-md: 1.5rem;
  --size-space-lg: 2rem;
  --size-space-x-lg: 2.5rem;
  --size-space-xx-lg: 3rem;
  --size-space-xxx-lg: 3.5rem;
  --size-space-4x-lg: 4rem;
  --color-white: #fff;
  --color-black: #231815;
  --color-gray-light: #e2e2e2;
  --color-gray-dark: #91897d;
  --color-pink: #da428c;
  --color-orange: #ea8b09;
  --color-flesh-light: #f2ebdf;
  --color-flesh: #eee5d7;
  --color-hover: #7b7472;
  --typo-size-x-sm: 0.75rem;
  --typo-size-sm: 0.875rem;
  --typo-size-md: 1rem;
  --typo-size-d-md: 1.125rem;
  --typo-size-x-md: 1.25rem;
  --typo-size-xx-md: 1.5rem;
  --typo-weight-regular: 400;
  --typo-weight-medium: 500;
  --typo-weight-bold: 700;
  --typo-color-white: var(--color-white);
  --typo-color-black: var(--color-black);
  --typo-color-gray-dark: var(--color-gray-dark);
  --typo-color-pink: var(--color-pink);
  --typo-color-orange: var(--color-orange);
}

/*
* top.css
*
*/
body {
  overflow: hidden;
}

.c-breadcrumb {
  border-bottom: none;
  height: 3.4375rem;
}

.sbw-brand {
  position: relative;
  z-index: 1;
  background-color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.sbw-brand main {
  position: relative;
}
.sbw-brand *,
.sbw-brand *::after,
.sbw-brand *::before {
  box-sizing: inherit;
}

.loading {
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 1.3s cubic-bezier(0.25, 0.25, 0.75, 0.75);
  background-color: #fff;
}
.loaded .loading {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.kv {
  background-color: #edf0f7;

  filter: blur(10px);
}
.kv img {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;

     object-fit: cover;
}
.loaded .kv {
  transition: filter 1.2s cubic-bezier(0.77, 0, 0.275, 1) 0.8s;

  filter: blur(0px);
}
.kv .kv_container {
  width: 100%;
  height: 156.2666666667vw;
}
@media (min-width: 768px) {
  .kv .kv_container {
    margin: 0 auto;
    max-width: 1920px;
    height: 50.5208333333vw;
    max-height: 60.625rem;
  }
}

.message {
  background-image: url("/brand/collagen/img/message_bg_sm.webp");
  background-repeat: no-repeat;
  background-position: calc(50% - 2.125rem) -4.5625rem;
  background-size: 60.375rem 55.25rem;
}
@media (min-width: 768px) {
  .message {
    background-image: url("/brand/collagen/img/message_bg_lg.webp");
    background-repeat: no-repeat;
    background-position: calc(50% - 5.875rem) -2.6875rem;
    background-size: 186.25rem 84.25rem;
  }
}
.message .message_container {
  padding: 0 0.9375rem 3.75rem;
  background-image: url("/brand/collagen/img/message_content_bg_sm.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .message .message_container {
    margin: 0 auto;
    padding: 0 20px 182px;
    max-width: 1030px;
    background-image: url("/brand/collagen/img/message_content_bg_lg.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
}
.message .message_text_01 {
  margin-left: 10px;
  padding-top: 50px;
}
@media (min-width: 768px) {
  .message .message_text_01 {
    margin-left: 40px;
    padding-top: 205px;
  }
}
.message .message_text_02 {
  margin-top: 20px;
  margin-left: 5px;
}
@media (min-width: 768px) {
  .message .message_text_02 {
    margin-top: 60px;
    margin-left: 30px;
  }
}
.message .message_text_03 {
  margin-top: 45px;
}
@media (min-width: 768px) {
  .message .message_text_03 {
    margin-top: 100px;
    margin-left: 40px;
  }
}
.message .message_img {
  display: flex;
  align-items: baseline;
  margin: 3.5rem auto 0;
  max-width: 1000px;

  gap: 0 0.3125rem;
}
@media (min-width: 768px) {
  .message .message_img {
    margin-top: 7.0625rem;

    gap: 0 0.9375rem;
  }
}
.message .message_img img {
  width: 100%;
}

.choice {
  overflow: hidden;
  text-align: center;
}
@media (min-width: 768px) {
  .choice {
    background-image: url("/brand/collagen/img/choice_bg_lg.webp");
    background-repeat: no-repeat;
    background-position: calc(50% + 83.75rem) 4.5rem;
    background-size: 177.625rem 271.875rem;
  }
}
@media (min-width: 768px) {
  .choice .choice_container {
    margin: 0 auto;
    max-width: 1286px;
  }
}
.choice .choice_title {
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
  width: 100%;
  height: 6.25rem;
  background-image: url("/brand/collagen/img/choice_title_bg_sm.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (min-width: 768px) {
  .choice .choice_title {
    margin: 0 auto;
    width: 51.25rem;
    height: 13.625rem;
    background-image: url("/brand/collagen/img/choice_title_bg_lg.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}
.choice .choice_title p {
  margin-bottom: 0.625rem;
  font-size: 0.8125rem;
}
@media (min-width: 768px) {
  .choice .choice_title p {
    margin-bottom: 0.9375rem;
    font-size: 1.6875rem;
  }
}
.choice h2 {
  font-size: 1.3125rem;
  font-weight: 500;
}
@media (min-width: 768px) {
  .choice h2 {
    font-size: 2.25rem;
  }
}
.choice .choice_img {
  display: flex;
  justify-content: center;
  margin-top: 1.875rem;
}
@media (min-width: 768px) {
  .choice .choice_img {
    margin-top: 3.4375rem;
  }
}
.choice .choice_img img {
  width: 100%;
}
.choice .choice_lineup {
  position: relative;
  margin-top: 3.75rem;
  padding: 0 0.9375rem;
}
@media (max-width: 767.98px) {
  .choice .choice_lineup {
    background-image: url("/brand/collagen/img/choice_bg_sm.webp");
    background-repeat: no-repeat;
    background-position: calc(50% + 3.75rem) 12.5rem;
    background-size: 50rem 52rem;
  }
}
@media (min-width: 768px) {
  .choice .choice_lineup {
    margin: auto;
    margin-top: 7.8125rem;
    padding: 0 1.25rem;
    max-width: 970px;
  }
}
.choice .choice_lineup::after {
  content: "";
  position: absolute;
  top: -3.5rem;
  right: -0.1875rem;
  width: 3.125rem;
  height: 12.5rem;
  background-image: url("/brand/collagen/img/choice_life_stage_sm.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (min-width: 768px) {
  .choice .choice_lineup::after {
    top: -3.4375rem;
    right: inherit;
    left: -5.9375rem;
    width: 5.625rem;
    height: 28.75rem;
    background-image: url("/brand/collagen/img/choice_life_stage_lg.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}
.choice .choice_lineup.choice_lineup--three {
  position: relative;
  margin-top: 5rem;
  padding: 0 0 5.625rem;
}
@media (min-width: 768px) {
  .choice .choice_lineup.choice_lineup--three {
    margin-top: 9.375rem;
    padding-bottom: 7.5rem;
  }
}
.choice .choice_lineup.choice_lineup--three::after {
  content: "";
  position: absolute;
  top: -3.125rem;
  right: 0;
  width: 2.375rem;
  height: 12.1875rem;
  background-image: url("/brand/collagen/img/choice_life_style_sm.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (min-width: 768px) {
  .choice .choice_lineup.choice_lineup--three::after {
    top: 5rem;
    right: inherit;
    left: -5.9375rem;
    width: 5.625rem;
    height: 26.25rem;
    background-image: url("/brand/collagen/img/choice_life_style_lg.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}
.choice .choice_lineup.choice_lineup--three .choice_lineup_life {
  margin-top: 3.75rem;
}
@media (min-width: 768px) {
  .choice .choice_lineup.choice_lineup--three .choice_lineup_life {
    margin-top: 6.25rem;

    gap: 0 3.75rem;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_lineup.choice_lineup--three .choice_lineup_life {
    padding: 0;

    gap: 2.5rem 0;
  }
}
.choice .choice_lineup.choice_lineup--three .choice_lineup_life_item {
  display: flex;
  justify-content: center;

  gap: 0 0.75rem;
}
@media (min-width: 768px) {
  .choice .choice_lineup.choice_lineup--three .choice_lineup_life_item {
    flex: 1;
    flex-flow: column;
    justify-content: space-between;
    width: calc(33.3333333333% - 2.4375rem);

    gap: 0;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_lineup.choice_lineup--three .choice_lineup_life_item:nth-of-type(2) {
    flex-flow: row-reverse;

    gap: 0 2.1875rem;
  }
  .choice .choice_lineup.choice_lineup--three .choice_lineup_life_item:nth-of-type(2) .choice_lineup_life_item_img {
    margin-right: -1.875rem;
  }
  .choice .choice_lineup.choice_lineup--three .choice_lineup_life_item:nth-of-type(2) .choice_lineup_life_item_for {
    margin-right: 0;
    margin-left: 0;
  }
  .choice .choice_lineup.choice_lineup--three .choice_lineup_life_item:nth-of-type(2) .choice_lineup_life_item_for p {
    margin-right: 0;
    margin-left: 1.25rem;
  }
}
.choice .choice_lineup.choice_lineup--three .choice_lineup_life_item_img {
  margin-top: 1.25rem;
}
@media (min-width: 768px) {
  .choice .choice_lineup.choice_lineup--three .choice_lineup_life_item_img {
    margin-top: 0;
    padding: 0 1.25rem;
  }
}
.choice .choice_lineup.choice_lineup--three .choice_lineup_life_item_img img {
  width: 100%;
  max-width: 9.375rem;
}
@media (min-width: 768px) {
  .choice .choice_lineup.choice_lineup--three .choice_lineup_life_item_img img {
    width: 100%;
    max-width: inherit;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_lineup.choice_lineup--three .choice_lineup_life_item_for {
    margin-right: -1.375rem;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_lineup.choice_lineup--three .choice_lineup_life_item_for p {
    margin-right: 1.25rem;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_lineup.choice_lineup--three .choice_lineup_life_item_for img {
    width: 100%;
    max-width: 11.875rem;
  }
}
@media (min-width: 768px) {
  .choice .choice_lineup_title {
    padding: 0 1.25rem;
  }
  .choice .choice_lineup_title img {
    margin: auto;
    width: 100%;
    max-width: 41.0625rem;
  }
}
.choice .choice_lineup_sub {
  margin-top: 1.25rem;
  white-space: nowrap;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .choice .choice_lineup_sub {
    margin-top: 1.25rem;
    font-size: 1.75rem;
  }
}
.choice .choice_lineup_life {
  display: flex;
  flex-flow: column;
  margin-top: 4.375rem;
  padding: 0 0.9375rem;

  gap: 6.25rem 0;
}
@media (min-width: 768px) {
  .choice .choice_lineup_life {
    flex-flow: row;
    margin: 4.375rem auto 0;
    padding: 0 1.25rem;
    max-width: 970px;

    gap: 0 8.5rem;
  }
}
@media (min-width: 768px) {
  .choice .choice_lineup_life_item {
    display: flex;
    flex: 1;
    flex-flow: column;
    justify-content: space-between;
    width: calc(50% - 4.25rem);
  }
}
@media (min-width: 768px) {
  .choice .choice_lineup_life_item_img {
    padding: 0 1.25rem;
  }
}
.choice .choice_lineup_life_item_img img {
  width: 14.375rem;
}
@media (min-width: 768px) {
  .choice .choice_lineup_life_item_img img {
    margin-left: 1.25rem;
    width: 18.75rem;
  }
}
.choice .choice_lineup_life_item_title {
  margin-top: 0.5rem;
  margin-right: 1.25rem;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: bold;
}
@media (min-width: 768px) {
  .choice .choice_lineup_life_item_title {
    margin-top: 0.5rem;
    margin-right: 0;
    font-size: 1.25rem;
  }
}
.choice .choice_lineup_life_item_for {
  margin-top: 1.875rem;
}
@media (min-width: 768px) {
  .choice .choice_lineup_life_item_for {
    margin-top: 3.4375rem;
  }
}
.choice .choice_lineup_life_item_for img {
  width: 100%;
}
@media (max-width: 767.98px) {
  .choice .choice_lineup_life_item_for img {
    max-width: 19.375rem;
  }
}
.choice .choice_lineup_life_item_for p {
  position: relative;
  margin-bottom: 0.625rem;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
}
@media (min-width: 768px) {
  .choice .choice_lineup_life_item_for p {
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
  }
}
.choice .choice_lineup_life_item_for p::before,
.choice .choice_lineup_life_item_for p::after {
  content: "";
  position: absolute;
  top: 0;
  margin-left: -0.3125rem;
  width: 1px;
  height: 1.25rem;
  transform: rotate(-15deg);
  background-color: #000;
}
@media (min-width: 768px) {
  .choice .choice_lineup_life_item_for p::before,
  .choice .choice_lineup_life_item_for p::after {
    margin-left: -0.625rem;
    height: 1.875rem;
  }
}
.choice .choice_lineup_life_item_for p::after {
  margin-left: 0.3125rem;
  transform: rotate(15deg);
}
@media (min-width: 768px) {
  .choice .choice_lineup_life_item_for p::after {
    margin-left: 0.625rem;
  }
}
.choice .choice_lineup_btn {
  margin-top: 3.125rem;
  padding: 0 2.8125rem;
}
@media (min-width: 768px) {
  .choice .choice_lineup_btn {
    margin: 5rem auto 0;
    padding: 0;
    width: 80%;
  }
}
.choice .choice_lineup_drink_btn {
  margin-top: 5.3125rem;
  padding: 0 3.75rem;
}
@media (min-width: 768px) {
  .choice .choice_lineup_drink_btn {
    margin-top: 4.375rem;
    padding: 0;
  }
}
.choice .c-button-lineup {
  margin: 0 auto;
  width: auto;
  white-space: nowrap;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: normal;
}
@media (min-width: 768px) {
  .choice .c-button-lineup {
    margin: 0 auto;
    font-size: 1.375rem;
  }
}
.choice .choice_point {
  position: relative;
  padding-top: 3.75rem;
}
@media (min-width: 768px) {
  .choice .choice_point {
    padding-top: 5.625rem;
  }
}
.choice .choice_point::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100vw;
  width: 200vw;
  height: 1px;
  background-color: #000;
}
@media (min-width: 768px) {
  .choice .choice_point_container {
    margin: 0 auto;
    max-width: 1240px;
  }
}
.choice .choice_point_img {
  margin: auto;
  padding: 0 0.9375rem;
}
@media (min-width: 768px) {
  .choice .choice_point_img {
    padding: 0 1.25rem;
  }
}
.choice .choice_point_img img {
  width: 100%;
}
.choice .choice_point_img_01 {
  position: relative;
  margin-top: 1.875rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 768px) {
  .choice .choice_point_img_01 {
    margin-top: 3.75rem;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_01 {
    padding: 0;
  }
}
.choice .choice_point_img_01 img {
  width: 100%;
}
@media (min-width: 768px) {
  .choice .choice_point_img_01 img {
    width: 100%;
    max-width: 62.5rem;
  }
}
.choice .choice_point_img_01 .choice_point_img_01_img {
  position: absolute;
  background-image: url("/brand/collagen/img/choice_point_01_img.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (min-width: 768px) {
  .choice .choice_point_img_01 .choice_point_img_01_img {
    right: -3.5625rem;
    bottom: -4.375rem;
    width: 36.25rem;
    height: 36.25rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  .choice .choice_point_img_01 .choice_point_img_01_img {
    right: -5.7vw;
    bottom: -7vw;
    width: 58vw;
    height: 58vw;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_01 .choice_point_img_01_img {
    bottom: -16vw;
    left: 53%;
    width: 122.6666666667vw;
    height: 122.6666666667vw;
    transform: translateX(-50%);
  }
}
.choice .choice_point_img_01 .choice_point_img_01_img::before {
  content: "";
  position: absolute;
  top: 53%;
  left: 47%;
  width: 9.375rem;
  height: 6.75rem;
  transform: translate(-50%, -50%);
  background-image: url("/brand/collagen/img/choice_point_01_text.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  .choice .choice_point_img_01 .choice_point_img_01_img::before {
    width: 15vw;
    height: 10.8vw;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_01 .choice_point_img_01_img::before {
    width: 32vw;
    height: 28.8vw;
  }
}
.choice .choice_point_img_01 .choice_point_img_01_step_01 {
  position: absolute;
}
@media (min-width: 768px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_01 {
    top: 18.75rem;
    right: 6.875rem;
    width: 9.5rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_01 {
    top: 30vw;
    right: 11vw;
    width: 15.2vw;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_01 {
    top: 64vw;
    right: 21.8666666667vw;
    width: 33.3333333333vw;
  }
}
.choice .choice_point_img_01 .choice_point_img_01_step_02 {
  position: absolute;
}
@media (min-width: 768px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_02 {
    top: 18.75rem;
    right: 21.875rem;
    width: 9.5rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_02 {
    top: 30vw;
    right: 35vw;
    width: 15.2vw;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_02 {
    top: 64vw;
    right: 73.0666666667vw;
    width: 33.3333333333vw;
  }
}
.choice .choice_point_img_01 .choice_point_img_01_step_03 {
  position: absolute;
}
@media (min-width: 768px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_03 {
    top: 6.25rem;
    right: 14.375rem;
    width: 9.5rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_03 {
    top: 10vw;
    right: 23vw;
    width: 15.2vw;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_03 {
    top: 21.3333333333vw;
    right: 47.2vw;
    width: 33.3333333333vw;
  }
}
.choice .choice_point_img_01 .choice_point_img_01_step_01_arrow {
  position: absolute;
  z-index: 1;
  transform: rotate(-120deg);
}
@media (min-width: 768px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_01_arrow {
    right: 16.875rem;
    bottom: 8.5625rem;
    width: 3.125rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_01_arrow {
    right: 27vw;
    bottom: 13.7vw;
    width: 5vw;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_01_arrow {
    right: 56vw;
    bottom: 27.2vw;
    width: 11.7333333333vw;
  }
}
.choice .choice_point_img_01 .choice_point_img_01_step_02_arrow {
  position: absolute;
  z-index: 1;
  transform: rotate(0);
}
@media (min-width: 768px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_02_arrow {
    right: 23.5625rem;
    bottom: 16.8125rem;
    width: 3.125rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_02_arrow {
    right: 37.7vw;
    bottom: 26.9vw;
    width: 5vw;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_02_arrow {
    right: 78.4vw;
    bottom: 55.2vw;
    width: 11.7333333333vw;
  }
}
.choice .choice_point_img_01 .choice_point_img_01_step_03_arrow {
  position: absolute;
  z-index: 1;
  transform: rotate(120deg);
}
@media (min-width: 768px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_03_arrow {
    right: 12.3125rem;
    bottom: 18.125rem;
    width: 3.125rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_03_arrow {
    right: 19.7vw;
    bottom: 29vw;
    width: 5vw;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_01 .choice_point_img_01_step_03_arrow {
    right: 40.5333333333vw;
    bottom: 60.2666666667vw;
    width: 11.7333333333vw;
    transform: rotate(120deg);
  }
}
.choice .choice_point_img_02 {
  display: flex;
  flex-flow: column;
  justify-content: center;
  position: relative;
  margin-left: -0.625rem;
  padding: 2.5rem 0 0;
}
@media (min-width: 768px) {
  .choice .choice_point_img_02 {
    margin-left: 0;
    padding: 6.25rem 0 0;
  }
}
.choice .choice_point_img_02 .choice_point_img_02_01 {
  position: relative;
}
@media (min-width: 768px) {
  .choice .choice_point_img_02 .choice_point_img_02_01 {
    right: 1.6875rem;
    margin: 0 auto;
    width: 100%;
    max-width: 38.125rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .choice .choice_point_img_02 .choice_point_img_02_01 {
    right: 2.109375vw;
    max-width: 47.65625vw;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_02 .choice_point_img_02_01 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -0.625rem;
    width: 100%;
  }
  .choice .choice_point_img_02 .choice_point_img_02_01 img {
    width: 30.625rem;
  }
}
.choice .choice_point_img_02 .choice_point_img_02_02 {
  position: relative;
}
@media (min-width: 768px) {
  .choice .choice_point_img_02 .choice_point_img_02_02 {
    right: 3.75rem;
    margin-top: -2.25rem;
    margin-left: auto;
    width: 100%;
    max-width: 30.625rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .choice .choice_point_img_02 .choice_point_img_02_02 {
    right: 4.6875vw;
    margin-top: -2.8125vw;
    max-width: 38.28125vw;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_02 .choice_point_img_02_02 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6.5625rem;
    margin-left: -1.875rem;
    width: 100%;
  }
}
.choice .choice_point_img_02 .choice_point_img_02_03 {
  position: relative;
}
@media (min-width: 768px) {
  .choice .choice_point_img_02 .choice_point_img_02_03 {
    left: 8.125rem;
    margin-top: -18.875rem;
    margin-right: auto;
    width: 100%;
    max-width: 28.75rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .choice .choice_point_img_02 .choice_point_img_02_03 {
    left: 10.15625vw;
    margin-top: -23.59375vw;
    max-width: 35.9375vw;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_02 .choice_point_img_02_03 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
    margin-left: 1.25rem;
    width: 100%;
  }
}
.choice .choice_point_img_02 .choice_point_img_02_01_bg {
  position: absolute;
  z-index: -1;
  top: 10.3125rem;
  left: -8.125rem;
  width: 57.8125rem;
  height: 57.8125rem;
  background-image: url("/brand/collagen/img/choice_point_02_01_bg_lg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .choice .choice_point_img_02 .choice_point_img_02_01_bg {
    top: 12.890625vw;
    left: -10.15625vw;
    width: 72.265625vw;
    height: 72.265625vw;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_02 .choice_point_img_02_01_bg {
    top: 6.25rem;
    left: 54%;
    width: 46.8125rem;
    height: 46.8125rem;
    transform: translateX(-50%);
    background-image: url("/brand/collagen/img/choice_point_02_01_bg_sm.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}
.choice .choice_point_img_02 .choice_point_img_02_02_bg {
  position: absolute;
  z-index: -1;
  top: -6.875rem;
  left: -5.75rem;
  width: 44.375rem;
  height: 43.5rem;
  background-image: url("/brand/collagen/img/choice_point_02_02_bg_lg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .choice .choice_point_img_02 .choice_point_img_02_02_bg {
    top: -8.59375vw;
    left: -7.1875vw;
    width: 55.46875vw;
    height: 54.375vw;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_02 .choice_point_img_02_02_bg {
    top: -5.75rem;
    left: 71%;
    width: 112vw;
    height: 109.6vw;
    transform: translateX(-50%);
    background-image: url("/brand/collagen/img/choice_point_02_02_bg_sm.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}
.choice .choice_point_img_02 .choice_point_img_02_03_bg {
  position: absolute;
  z-index: -1;
  top: -4.5625rem;
  left: -9.875rem;
  width: 45.375rem;
  height: 44.5rem;
  background-image: url("/brand/collagen/img/choice_point_02_03_bg_lg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .choice .choice_point_img_02 .choice_point_img_02_03_bg {
    top: -5.703125vw;
    left: -12.34375vw;
    width: 56.71875vw;
    height: 55.625vw;
  }
}
@media (max-width: 767.98px) {
  .choice .choice_point_img_02 .choice_point_img_02_03_bg {
    top: -1.875rem;
    left: 25%;
    width: 102.9333333333vw;
    height: 100.5333333333vw;
    transform: translateX(-50%);
    background-image: url("/brand/collagen/img/choice_point_02_03_bg_sm.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}
.choice .choice_point_img_02 .choice_point_img_02_text {
  position: absolute;
  right: 0.9375rem;
  bottom: -1.25rem;
  font-size: 0.75rem;
}
@media (min-width: 768px) {
  .choice .choice_point_img_02 .choice_point_img_02_text {
    right: 7.1875rem;
    bottom: -7.5rem;
    font-size: 0.75rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .choice .choice_point_img_02 .choice_point_img_02_text {
    right: 1.5625vw;
    bottom: -9.375vw;
    font-size: 0.9375vw;
  }
}
.choice .choice_point_img_03 {
  margin-top: 5rem;
}
@media (min-width: 768px) {
  .choice .choice_point_img_03 {
    margin-top: 11.25rem;
  }
}
.choice .choice_point_img_03 img {
  width: 100%;
}
@media (min-width: 768px) {
  .choice .choice_point_img_03 img {
    width: 100%;
    max-width: 62.5rem;
  }
}
.choice .choice_point_img_04 {
  padding-top: 0.625rem;
}
@media (min-width: 768px) {
  .choice .choice_point_img_04 {
    padding-top: 1.25rem;
  }
}
.choice .choice_point_img_04 img {
  width: 100%;
}
@media (min-width: 768px) {
  .choice .choice_point_img_04 img {
    width: 100%;
    max-width: 62.5rem;
  }
}

.recommend {
  overflow: hidden;
  margin-top: 2.5rem;
  padding-top: 3.125rem;
  border-top: 1px solid #231815;
}
@media (min-width: 768px) {
  .recommend {
    margin-top: 11.875rem;
    padding-top: 5.3125rem;
  }
}
.recommend .choice_title {
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
  width: 100%;
  height: 6.25rem;
  background-image: url("/brand/collagen/img/choice_title_bg_sm.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (min-width: 768px) {
  .recommend .choice_title {
    margin: 0 auto;
    width: 51.25rem;
    height: 13.625rem;
    background-image: url("/brand/collagen/img/choice_title_bg_lg.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}
.recommend .choice_title h2 {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 500;
}
@media (min-width: 768px) {
  .recommend .choice_title h2 {
    font-size: 2.1875rem;
  }
}
.recommend .choice_title p {
  margin-bottom: 0.625rem;
  font-size: 0.8125rem;
}
@media (min-width: 768px) {
  .recommend .choice_title p {
    margin-bottom: 0.9375rem;
    font-size: 1.6875rem;
  }
}
.recommend .choice_title + .recommend_text {
  margin-top: 0.9375rem;
}
@media (min-width: 768px) {
  .recommend .choice_title + .recommend_text {
    margin-top: 0.9375rem;
  }
}
.recommend .recommend_content {
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .recommend .recommend_content {
    padding-bottom: 15rem;
    background-image: url("/brand/collagen/img/recommend_bg_lg.webp");
    background-repeat: no-repeat;
    background-position: calc(50% - 2.5rem) -24.0625rem;
    background-size: 236.75rem 235.8125rem;
  }
}
.recommend .recommend_content.recommend_content--lifestyle {
  padding-bottom: 5.5rem;
}
@media (min-width: 768px) {
  .recommend .recommend_content.recommend_content--lifestyle {
    padding-bottom: 8.75rem;
    background-image: url("/brand/collagen/img/recommend_bg_lifestyle_lg.webp");
    background-repeat: no-repeat;
    background-position: calc(50% + 31.875rem) 8.125rem;
    background-size: 169.5rem 129.25rem;
  }
}
.recommend .recommend_head {
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
  height: 24.625rem;
  background-image: url("/brand/collagen/img/recommend_head_bg_sm.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (min-width: 768px) {
  .recommend .recommend_head {
    height: 25.875rem;
    background-image: url("/brand/collagen/img/recommend_head_bg_lg.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}
.recommend .recommend_title + .recommend_text {
  margin-top: 1.25rem;
}
@media (min-width: 768px) {
  .recommend .recommend_title + .recommend_text {
    margin-top: 1.875rem;
  }
}
.recommend .recommend_text {
  text-align: center;
  font-size: 1rem;
  font-weight: normal;
}
@media (min-width: 768px) {
  .recommend .recommend_text {
    font-size: 1.75rem;
    line-height: 1.6;
  }
}
.recommend .recommend_text.recommend_text--large {
  line-height: 2.5;
}
@media (min-width: 768px) {
  .recommend .recommend_text.recommend_text--large {
    font-size: 1.25rem;
  }
}
.recommend .recommend_img {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .recommend .recommend_img {
    margin: 4.0625rem auto 0;
    max-width: 76.625rem;
  }
}
.recommend .recommend_img img {
  width: 100%;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .recommend .recommend_container {
    margin: 0 auto;
    padding-top: 6.875rem;
    width: 100%;
    max-width: 50rem;
  }
}
.recommend .recommend_generation {
  position: relative;
  padding-bottom: 3.75rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation {
    padding: 0 1.25rem 7.5rem;
  }
}
.recommend .recommend_generation:last-child {
  padding-bottom: 0;
}
.recommend .recommend_generation_border {
  position: absolute;
  top: 0;
  left: -100vw;
  width: 200vw;
  height: 1px;
  background-color: #000;
}
.recommend .recommend_generation_title {
  display: flex;
  align-items: center;
  flex-flow: column;
  padding: 0.625rem 1.875rem 0;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_title {
    padding: 1.25rem 0 0;
  }
}
.recommend .recommend_generation_title img {
  margin: 0 auto;
  width: 100%;
  max-width: 6.875rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_title img {
    max-width: 9.375rem;
  }
}
.recommend .recommend_generation_title.recommend_generation_title--02 {
  padding-top: 3.75rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_title.recommend_generation_title--02 {
    padding-top: 8.4375rem;
  }
}
.recommend .recommend_generation_title.recommend_generation_title--02 img {
  margin: 0 auto;
  width: 100%;
  max-width: 7.5rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_title.recommend_generation_title--02 img {
    max-width: 10.375rem;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_title.recommend_generation_title--03 {
    padding-top: 1.875rem;
  }
}
.recommend .recommend_generation_title.recommend_generation_title--03 img {
  margin: 0 auto;
  width: 100%;
  max-width: 15rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_title.recommend_generation_title--03 img {
    max-width: 24.375rem;
  }
}
.recommend .recommend_generation_title.recommend_generation_title--lifestyle {
  margin-top: 3.75rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_title.recommend_generation_title--lifestyle {
    margin-top: 8.125rem;
  }
}
.recommend .recommend_generation_sub {
  font-size: 1.0625rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_sub {
    font-size: 1.875rem;
  }
}
.recommend .recommend_generation_sub_text {
  display: block;
  margin-top: 0.8125rem;
  padding-top: 0.75rem;
  border-top: 1px solid;
  width: 100%;
  text-align: center;
  font-size: 1rem;
  font-weight: normal;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_sub_text {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.9375rem 1.25rem 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    text-align: left;
    font-size: 1.25rem;
    font-weight: bold;
  }
}
.recommend .recommend_generation_lifestage span {
  display: block;
  position: relative;
  margin: 1.875rem auto 0;
  width: 100%;
  max-width: 19.6875rem;
  text-align: center;
  font-family: "ryo-text-plusn";
  font-size: 1.125rem;
  font-weight: bold;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_lifestage span {
    padding: 0;
    max-width: 48.5rem;
    font-size: 2.125rem;
  }
}
.recommend .recommend_generation_lifestage span::before,
.recommend .recommend_generation_lifestage span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2.25rem;
  height: 1px;
  transform: translateY(-50%);
  background-color: #000;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_lifestage span::before,
  .recommend .recommend_generation_lifestage span::after {
    width: 9.6875rem;
  }
}
.recommend .recommend_generation_lifestage span::before {
  left: 0;
}
.recommend .recommend_generation_lifestage span::after {
  right: 0;
}
.recommend .recommend_generation_lifestage .recommend_generation_lifestage_text {
  margin-top: 1.25rem;
  text-align: center;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_lifestage .recommend_generation_lifestage_text {
    margin-top: 3.75rem;
  }
  .recommend .recommend_generation_lifestage .recommend_generation_lifestage_text img {
    width: 100%;
  }
}
.recommend .recommend_generation_list {
  position: relative;
  margin: 1.25rem auto 0;
  padding: 0 1.875rem;
  max-width: 31.25rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_list {
    margin: 3.125rem auto 0;
    padding: 0;
    width: 100%;
    max-width: 31.25rem;
  }
}
.recommend .recommend_generation_list ul {
  display: flex;
  flex-flow: wrap;
  margin-top: 0.625rem;
  list-style: none;

  gap: 0.375rem;
}
.recommend .recommend_generation_list ul li {
  position: relative;
  padding: 0.0625rem 0;
  border: 1px solid #707070;
  width: 100%;
  max-width: calc(100% / 3 - 0.375rem);
  background-color: #fff;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.5px;
  font-size: 0.625rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_list ul li {
    padding: 0.125rem 0;
    width: 100%;
    max-width: calc(100% / 3 - 0.375rem);
    font-size: 0.9375rem;
  }
}
.recommend .recommend_generation_list ul li.recommend_generation_list_up {
  padding-right: 0.3125rem;
  max-width: calc(100% / 3 - 0.6875rem);
}
.recommend .recommend_generation_list ul li.recommend_generation_list_up::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.5rem;
  width: 1.375rem;
  height: 1.375rem;
  transform: translateY(-50%);
  background-image: url("/brand/collagen/img/recommend_generation_up_sm.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_list ul li.recommend_generation_list_up::before {
    right: -0.5rem;
    width: 2rem;
    height: 2rem;
    background-image: url("/brand/collagen/img/recommend_generation_up_lg.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}
.recommend .recommend_generation_list ul li.recommend_generation_list_up2::before {
  background-image: url("/brand/collagen/img/recommend_generation_up2_sm.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_list ul li.recommend_generation_list_up2::before {
    background-image: url("/brand/collagen/img/recommend_generation_up2_lg.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}
.recommend .recommend_generation_list ul li.recommend_generation_list_left {
  text-align: left;
}
.recommend .recommend_generation_list ol {
  position: absolute;
  bottom: -0.375rem;
  left: calc(100% / 3 + 0.75rem);
  list-style: none;
  font-size: 0.5625rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_list ol {
    bottom: -0.1875rem;
    left: calc(100% / 3 + 0.375rem);
    font-size: 0.625rem;
  }
}
.recommend .recommend_generation_list + .recommend_generation_list {
  margin-top: 0.9375rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_list + .recommend_generation_list {
    margin-top: 1.25rem;
  }
}
.recommend .recommend_generation_list.recommend_generation_list--3row {
  margin-top: 0;
  padding: 0;
  max-width: 20rem;
}
.recommend .recommend_generation_list.recommend_generation_list--3row ul li {
  max-width: calc(100% / 3 - 0.375rem);
}
@media (min-width: 768px) {
  .recommend .recommend_generation_list.recommend_generation_list--3row ul li {
    max-width: calc(100% / 2 - 0.375rem);
  }
}
.recommend .recommend_generation_list_title {
  font-size: 0.625rem;
  font-weight: 500;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_list_title {
    font-size: 1.03125rem;
  }
}
.recommend .recommend_generation_product {
  display: flex;
  align-items: center;
  flex-flow: column;
  position: relative;
  margin: 3.125rem auto 0;
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product {
    width: 100%;
    max-width: 23.4375rem;
  }
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product {
    flex-flow: row;
    margin-top: 3.875rem;

    gap: 0 2.5rem;
  }
}
.recommend .recommend_generation_product + .recommend_generation_product {
  margin-top: 5rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product + .recommend_generation_product {
    margin-top: 6.875rem;
  }
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product.recommend_generation_product--reverse {
    flex-flow: row-reverse;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product.recommend_generation_product--reverse .recommend_generation_product_img {
    margin-left: 0;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product.recommend_generation_product--reverse .recommend_generation_product_point {
    top: 0;
    left: 1rem;
    margin-left: 0;
  }
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product.recommend_generation_product--reverse .recommend_generation_product_point {
    left: 0;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product.recommend_generation_product--reverse .recommend_generation_product_point::before {
    right: 1.875rem;
    left: initial;
  }
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product.recommend_generation_product--reverse .recommend_generation_product_point::before {
    right: inherit;
    bottom: -1.0625rem;
    left: 2.5rem;
    width: 1.125rem;
    height: 1.125rem;
    transform: scaleX(-1);
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product.recommend_generation_product--reverse .recommend_generation_product_title {
    margin-top: 1.25rem;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product.recommend_generation_product--before::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -20rem;
    left: 25%;
    width: 32.125rem;
    height: 46.875rem;
    transform: translateX(-50%);
    background-image: url("/brand/collagen/img/recommend_bg_before_sm.webp");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product.recommend_generation_product--after::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -5.625rem;
    left: 62%;
    width: 30.25rem;
    height: 46.875rem;
    transform: translateX(-50%);
    background-image: url("/brand/collagen/img/recommend_bg_after_sm.webp");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product.recommend_generation_product--up .recommend_generation_product_wrap {
    margin-top: -5rem;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product.recommend_generation_product--up::before {
    top: -41.4375rem;
    left: 15%;
  }
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product.recommend_generation_product--up2 .recommend_generation_product_wrap {
    margin-top: -3.125rem;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product.recommend_generation_product--up2::before {
    top: -44.375rem;
  }
}
.recommend .recommend_generation_product.recommend_generation_product--lifestyle {
  margin-top: 1.875rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product.recommend_generation_product--lifestyle {
    margin-top: 5.3125rem;
  }
}
.recommend .recommend_generation_product_img {
  margin-left: auto;
  width: 100%;
  max-width: 20rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product_img {
    display: flex;
    align-items: flex-end;
    margin-left: 0;
    width: 100%;
    max-width: 27.125rem;
  }
}
.recommend .recommend_generation_product_img img {
  width: 100%;
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product_img.recommend_generation_product_img--large {
    max-width: 21.25rem;
  }
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product_wrap {
    width: 21.5625rem;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product_wrap.recommend_generation_product_wrap--up {
    margin-top: -1.25rem;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product_wrap.recommend_generation_product_wrap--up2 {
    margin-top: -0.9375rem;
  }
}
.recommend .recommend_generation_product_point {
  display: flex;
  align-items: center;
  position: relative;
  top: 0;
  right: 1.875rem;
  margin-left: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #fff;
  font-size: 0.6875rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product_point {
    top: -0.625rem;
    right: inherit;
    left: 0.625rem;
    margin-left: 0;
    font-size: 0.8125rem;
  }
}
.recommend .recommend_generation_product_point::before {
  content: "";
  position: absolute;
  right: 2.5rem;
  bottom: -1.0625rem;
  width: 1.125rem;
  height: 1.125rem;
  background-color: inherit;

  -webkit-mask-image: url("/brand/collagen/img/recommend_generation_product_point.svg");

          mask-image: url("/brand/collagen/img/recommend_generation_product_point.svg");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product_point::before {
    right: inherit;
    bottom: -0.6875rem;
    left: 1.875rem;
    width: 0.75rem;
    height: 0.75rem;
    transform: scaleX(-1);
  }
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product_point::before {
    right: 2.5rem;
    bottom: -1.0625rem;
    width: 1.125rem;
    height: 1.125rem;
  }
}
.recommend .recommend_generation_product_point img {
  width: 9.625rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product_point img {
    width: 13.75rem;
  }
}
.recommend .recommend_generation_product_point.recommend_generation--color1 {
  background-color: #75174f;
}
.recommend .recommend_generation_product_point.recommend_generation--color2 {
  background-color: #ebab94;
}
.recommend .recommend_generation_product_point.recommend_generation--color3 {
  background-color: #c6cfad;
}
.recommend .recommend_generation_product_point.recommend_generation--color4 {
  background-color: #a9c5c5;
}
.recommend .recommend_generation_product_title {
  font-size: 0.9375rem;
  font-weight: bold;
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product_title {
    margin: 0 auto 0;
    max-width: 16.875rem;
  }
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product_title {
    font-size: 1.25rem;
  }
}
.recommend .recommend_generation_product_text {
  font-size: 0.8125rem;
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product_text {
    margin: 1rem auto 0;
    max-width: 16.875rem;
  }
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product_text {
    margin-top: 0.625rem;
    font-size: 1rem;
  }
}
.recommend .recommend_generation_product_tag {
  display: flex;
  flex-flow: wrap;
  list-style: none;
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product_tag {
    margin: 1.5625rem auto 0;
    max-width: 16.875rem;

    gap: 0.375rem;
  }
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product_tag {
    margin-top: 1.875rem;

    gap: 0.375rem;
  }
}
.recommend .recommend_generation_product_tag li {
  padding: 0.125rem 0.9375rem;
  border-radius: 5px;
  background-color: #f1f1f0;
  font-size: 0.625rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product_tag li {
    padding: 0.125rem 0.625rem;
    font-size: 0.8125rem;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product_component {
    margin: 0.9375rem auto 0;
    max-width: 16.875rem;
  }
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product_component {
    margin-top: 1.25rem;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_generation_product_component.recommend_generation_product_component--list {
    max-width: 20rem;
  }
}
.recommend .recommend_generation_product_component_title {
  font-size: 0.6875rem;
  font-weight: 500;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product_component_title {
    font-size: 0.9375rem;
  }
}
.recommend .recommend_generation_product_component_text {
  margin-top: 0.3125rem;
  font-size: 0.625rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product_component_text {
    margin-top: 0.625rem;
    font-size: 1rem;
  }
}
.recommend .recommend_generation_product_btn {
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product_btn {
    margin-top: 2.5rem;
  }
}
.recommend .recommend_generation_product_btn .c-button-product {
  margin: auto;
  max-width: 11.25rem;
  text-decoration: none;
}
@media (min-width: 768px) {
  .recommend .recommend_generation_product_btn .c-button-product {
    margin: 0;
    max-width: 15rem;
  }
}
.recommend .recommend_chance {
  position: relative;
  padding: 3.125rem 0 3.75rem;
}
@media (min-width: 768px) {
  .recommend .recommend_chance {
    margin: 0 auto;
    padding: 7.5rem 0 6.875rem;
    width: 100%;
    max-width: 63.125rem;
  }
}
.recommend .recommend_chance_in {
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_in {
    margin-top: 6.875rem;
  }
}
.recommend .recommend_chance_in span {
  display: block;
  position: relative;
  margin: 1.875rem auto 0;
  width: 100%;
  max-width: 21.875rem;
  text-align: center;
  font-family: "ryo-text-plusn";
  font-size: 0.875rem;
  font-weight: bold;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_in span {
    padding: 0;
    max-width: 48.5rem;
    font-size: 1.5625rem;
  }
}
.recommend .recommend_chance_in span::before,
.recommend .recommend_chance_in span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.5625rem;
  height: 1px;
  transform: translateY(-50%);
  background-color: #000;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_in span::before,
  .recommend .recommend_chance_in span::after {
    width: 7.375rem;
  }
}
.recommend .recommend_chance_in span::before {
  left: 0;
}
.recommend .recommend_chance_in span::after {
  right: 0;
}
.recommend .recommend_chance_head {
  text-align: center;
}
.recommend .recommend_chance_sub {
  font-size: 0.8125rem;
  font-weight: bold;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_sub {
    font-size: 1.5625rem;
  }
}
.recommend .recommend_chance_title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 6.25rem;
  background-image: url("/brand/collagen/img/choice_title_bg_sm.webp");
  background-repeat: no-repeat;
  background-position: calc(50% + 1rem) calc(50% - 0.625rem);
  background-size: contain;
  font-size: 1.3125rem;
  font-weight: 500;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_title {
    margin: 0.625rem auto 0;
    width: 51.25rem;
    height: 13.625rem;
    background-image: url("/brand/collagen/img/choice_title_bg_lg.webp");
    background-repeat: no-repeat;
    background-position: 27px calc(50% - 10px);
    background-size: contain;
    font-size: 2.25rem;
  }
}
.recommend .recommend_chance_text {
  margin-top: 1.5625rem;
  font-size: 1rem;
  line-height: 2.1;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_text {
    margin-top: 0.625rem;
    font-size: 1.75rem;
    line-height: 2;
  }
}
.recommend .recommend_chance_list {
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
  margin-top: 2.5rem;
  padding: 0 0.9375rem;

  gap: 2.5rem 0;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_list {
    flex-flow: row;
    margin-top: 5rem;
    padding: 0 1.25rem;

    gap: 0 6.5625rem;
  }
}
.recommend .recommend_chance_item {
  display: flex;
  margin-left: 0.9375rem;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_item {
    flex-flow: column;
    margin-left: 0;
    width: calc(100% / 3 - 4.5625rem);

    gap: 4.375rem 0;
  }
}
.recommend .recommend_chance_item img {
  width: 100%;
  height: 100%;
  vertical-align: middle;

  -o-object-fit: contain;

     object-fit: contain;
}
@media (max-width: 767.98px) {
  .recommend .recommend_chance_item:nth-of-type(3) .recommend_chance_item_before_text {
    margin-left: 0.625rem;
  }
  .recommend .recommend_chance_item:nth-of-type(3) .recommend_chance_item_before img {
    width: 7.8125rem;
  }
}
.recommend .recommend_chance_item_before {
  position: relative;
  z-index: 1;
}
@media (max-width: 767.98px) {
  .recommend .recommend_chance_item_before {
    margin-right: -2.1875rem;
    width: 100%;
    max-width: 10.25rem;
  }
}
.recommend .recommend_chance_item_before_text {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_item_before_text {
    display: block;
    margin-bottom: 2.1875rem;
    text-align: center;
    font-size: 1.1875rem;
  }
}
.recommend .recommend_chance_item_before_text::before,
.recommend .recommend_chance_item_before_text::after {
  content: "";
  position: absolute;
  top: 0;
  margin-left: -0.625rem;
  width: 1px;
  height: 1.25rem;
  transform: rotate(-15deg);
  background-color: #000;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_item_before_text::before,
  .recommend .recommend_chance_item_before_text::after {
    margin-left: -1.125rem;
    height: 1.875rem;
  }
}
.recommend .recommend_chance_item_before_text::after {
  margin-left: 0.625rem;
  transform: rotate(15deg);
}
@media (min-width: 768px) {
  .recommend .recommend_chance_item_before_text::after {
    margin-left: 1.125rem;
  }
}
.recommend .recommend_chance_item_before_img {
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_item_before_img {
    height: 12.5rem;
  }
}
@media (max-width: 1010px) {
  .recommend .recommend_chance_item_before_img {
    height: auto;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_chance_item_before_img {
    margin-top: 0.9375rem;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_chance_item_after.recommend_chance_item_after--up {
    margin-top: 1.25rem;
  }
}
.recommend .recommend_chance_item_after_text {
  margin-top: 0.9375rem;
  text-align: right;
  white-space: nowrap;
  font-size: 0.8125rem;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_item_after_text {
    margin-top: 0.3125rem;
    padding-right: 0;
    text-align: left;
    font-size: 1rem;
  }
}
.recommend .recommend_chance_item_after_img {
  position: relative;
  margin-right: 1.5625rem;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_item_after_img {
    margin-right: 1.5625rem;
    height: 12.5rem;
  }
}
@media (max-width: 1010px) {
  .recommend .recommend_chance_item_after_img {
    height: auto;
  }
}
@media (max-width: 767.98px) {
  .recommend .recommend_chance_item_after_img {
    margin-top: 0.9375rem;
    height: 9rem;
  }
}
.recommend .recommend_chance_item_after_img span {
  position: absolute;
  top: -1.0625rem;
  right: -1.375rem;
  width: 2.75rem;
  height: 2.75rem;
  background-image: url("/brand/collagen/img/recommend_chance_clock_01.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_item_after_img span {
    top: -1.0625rem;
    right: -1.6875rem;
    width: 4rem;
    height: 4rem;
  }
}
.recommend .recommend_chance_item_after_img.recommend_chance_item_after_img--01 span {
  background-image: url("/brand/collagen/img/recommend_chance_clock_01.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
.recommend .recommend_chance_item_after_img.recommend_chance_item_after_img--02 span {
  background-image: url("/brand/collagen/img/recommend_chance_clock_02.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
.recommend .recommend_chance_item_after_img.recommend_chance_item_after_img--03 span {
  background-image: url("/brand/collagen/img/recommend_chance_clock_03.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
.recommend .recommend_chance_message {
  margin-top: 3.75rem;
  text-align: center;
}
@media (min-width: 768px) {
  .recommend .recommend_chance_message {
    margin-top: 7.8125rem;
  }
}
.recommend .recommend_products {
  margin-top: 0;
}
@media (min-width: 768px) {
  .recommend .recommend_products {
    margin-top: 2.5rem;
    margin-bottom: 10.625rem;
  }
}
.recommend .recommend_products_img {
  text-align: center;
}
.recommend .recommend_products_img img {
  width: 100%;
  max-width: 80.375rem;
  vertical-align: middle;
}

.column {
  padding: 3.625rem 0.9375rem 3.75rem;
  background-color: rgba(234, 207, 221, 0.4);
}
@media (min-width: 768px) {
  .column {
    padding: 5.625rem 1.25rem 7.5rem;
  }
}
@media (min-width: 768px) {
  .column .column_container {
    margin: 0 auto;
    max-width: 900px;
  }
}
.column .column_title {
  text-align: center;
}
.column .column_title img {
  width: 100%;
  max-width: 6.25rem;
}
@media (min-width: 768px) {
  .column .column_title img {
    margin: 0 auto;
    max-width: 12.5rem;
  }
}
.column .column_text {
  margin-top: 1.125rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
}
@media (min-width: 768px) {
  .column .column_text {
    margin-top: 3.125rem;
    font-size: 1.5625rem;
  }
}
.column .column_qa {
  display: flex;
  flex-flow: column;
  margin-top: 3.125rem;

  gap: 3.25rem 0;
}
@media (min-width: 768px) {
  .column .column_qa {
    flex-flow: wrap;
    margin-top: 6.25rem;

    gap: 5.5rem 3.75rem;
  }
}
.column .column_qa_card {
  display: flex;
  flex-flow: column;
}
@media (min-width: 768px) {
  .column .column_qa_card {
    width: calc(100% / 2 - 1.875rem);
  }
}
.column .column_qa_title {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 23.4375rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: bold;
}
@media (min-width: 768px) {
  .column .column_qa_title {
    margin-left: 1.25rem;
    max-width: initial;
    text-align: left;
    font-size: 1rem;
  }
}
.column .column_qa_title::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 1.875rem;
  width: 4.9375rem;
  height: 4.125rem;
  transform: translateY(-50%);
  background-image: url("/brand/collagen/img/column_qa_q_lg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (min-width: 768px) {
  .column .column_qa_title::before {
    left: -1.4375rem;
    width: 4.9375rem;
    height: 4.125rem;
    background-image: url("/brand/collagen/img/column_qa_q_sm.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}
.column .column_qa_answer {
  flex: 1;
  margin-top: 1.875rem;
  padding: 0.5rem 0.875rem;
  background-color: #fff;
  font-size: 0.9375rem;
  line-height: 1.45;
}
@media (min-width: 768px) {
  .column .column_qa_answer {
    margin-top: 1.875rem;
    padding: 1.25rem 1.875rem;
    font-size: 1rem;
    line-height: 1.6;
  }
}

.question {
  padding: 2.8125rem 0.9375rem;
  background-color: #f1f1f0;
  text-align: center;
}
@media (min-width: 768px) {
  .question {
    padding: 5rem 1.25rem;
  }
}
.question .question_title {
  display: inline-block;
  font-size: 0.9375rem;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .question .question_title {
    font-size: 1.875rem;
    line-height: 1.6;
  }
}
.question .question_text {
  margin-top: 0.9375rem;
  font-size: 0.875rem;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .question .question_text {
    font-size: 1.875rem;
    line-height: 1.6;
  }
}
.question .question_text a {
  color: inherit;
}

.fixed_banner {
  position: fixed;
  z-index: 1000;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  text-align: center;
  pointer-events: none;
}
.fixed_banner.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.fixed_banner.is-hidden .fixed_banner_small,
.fixed_banner.is-hidden .fixed_banner_large {
  pointer-events: none;
}
.fixed_banner .fixed_banner_container {
  position: relative;
  margin: auto;
  padding: 0.1875rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 768px) {
  .fixed_banner .fixed_banner_container {
    margin: 0 0.9375rem 0.9375rem auto;
    padding: 0;
  }
}
.fixed_banner .fixed_banner_link {
  pointer-events: none;
}
.fixed_banner .fixed_banner_link img {
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (min-width: 768px) {
  .fixed_banner .fixed_banner_link:hover img {
    opacity: 0.8;
  }
}
.fixed_banner img {
  width: 100%;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .fixed_banner img {
    max-width: 25rem;
  }
}
.fixed_banner .fixed_banner_toggle {
  position: absolute;
  top: -2.1875rem;
  right: 0.1875rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  outline: none;
  width: 1.875rem;
  height: 1.875rem;
  cursor: pointer;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  background-color: #919191;
  pointer-events: auto;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
}
@media (min-width: 768px) {
  .fixed_banner .fixed_banner_toggle {
    top: -2.1875rem;
    right: 0;
    width: 1.875rem;
    height: 1.875rem;
  }
  .fixed_banner .fixed_banner_toggle:hover {
    opacity: 0.7;
  }
}
.fixed_banner .fixed_banner_toggle::before,
.fixed_banner .fixed_banner_toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.625rem;
  height: 1px;
  transition: transform 0.15s linear;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
.fixed_banner .fixed_banner_toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.fixed_banner .fixed_banner_toggle.is-active::after {
  transform: translate(-50%, -50%) rotate(0);
}
.fixed_banner .fixed_banner_small {
  position: absolute;
  z-index: 1;
  top: 0.8vw;
  right: 0.5333333333vw;
  width: 23.4666666667vw;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .fixed_banner .fixed_banner_small {
    top: 0;
    right: 0.5rem;
    width: 5.75rem;
  }
}
.fixed_banner .fixed_banner_large {
  position: relative;
  z-index: 2;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  pointer-events: auto;
}
@media (min-width: 768px) {
  .fixed_banner .fixed_banner_large::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    border-radius: 0.9375rem;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
}
.fixed_banner .fixed_banner_large.is-active {
  opacity: 0;
  pointer-events: none;
}

/* modal setting */
.modal,
.movie_modal {
  display: none;
}
.modal.is-open,
.movie_modal.is-open {
  display: block;
}

.modal_overlay,
.movie_modal_overlay {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(35, 24, 21, 0.5);
}

.modal-close {
  margin: var(--size-space-xx-md) auto var(--size-space-sm) auto;
  width: 85%;
  text-align: right;
}
@media (min-width: 768px) {
  .modal-close {
    width: 100%;
    max-width: 62.5rem;
  }
}

.modal-close_icon {
  display: inline-block;
  position: absolute;
  top: calc((var(--size-x-md) + var(--size-space-sm)) * -1);
  right: 0;
  width: var(--size-x-md);
  height: var(--size-x-md);
}
@media (min-width: 768px) {
  .modal-close_icon {
    top: calc((var(--size-x-lg) + var(--size-space-sm)) * -1);
    width: var(--size-x-lg);
    height: var(--size-x-lg);
  }
}

.modal_content {
  position: relative;
  margin: 4.875rem auto 0;
  width: 85%;
  text-align: center;
}
@media (min-width: 768px) {
  .modal_content {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 62.5rem;
    height: 80vh;
  }
}
.modal_content.-movie {
  height: auto;
}

.movie_modal_video {
  width: 100%;
  height: 100%;

  aspect-ratio: 16/9;
}
@media (min-width: 768px) {
  .movie_modal_video {
    width: 73.2064421669vw;
    max-width: 62.5rem;
  }
}

.modal_graphic {
  width: 100%;
  height: 100%;
}
.modal_graphic img {
  width: 100%;
  height: 100%;

  -o-object-fit: contain;

     object-fit: contain;
}

/* modal setting */
.js-fade {
  opacity: 0;
  transition: opacity 0.8s ease, transform 1s ease;
  transform: translateY(1.25rem);
}
.js-fade.scroll {
  opacity: 1;
  transform: translateY(0);
}
.js-fade.js-fadein {
  transform: initial;
}

.js-fade-target {
  opacity: 0;
  transition: all 1s ease;
}
.js-fade-parent.scroll .js-fade-target {
  opacity: 1;
}

.js-fade-delay01 {
  transition-delay: 0.3s;
}
.js-fade-delay02 {
  transition-delay: 0.6s;
}
.js-fade-delay03 {
  transition-delay: 0.9s;
}
.js-fade-delay04 {
  transition-delay: 1.2s;
}
.js-fade-delay05 {
  transition-delay: 1.5s;
}
.js-fade-delay06 {
  transition-delay: 1.8s;
}
.js-fade-delay07 {
  transition-delay: 2.1s;
}
.js-fade-delay08 {
  transition-delay: 2.4s;
}
.js-fade-delay09 {
  transition-delay: 2.7s;
}
.js-fade-delay010 {
  transition-delay: 3s;
}

.js-fade-shift > * {
  opacity: 0;
  transition: all 1s ease;
}
.js-fade-shift.js-fade-shift-up > * {
  transform: translateY(1.25rem);
}

.js-fade-shift.is-shift > *:nth-of-type(1) {
  opacity: 1;
  transition-delay: 0.05s;
}
.js-fade-shift.is-shift > *:nth-of-type(2) {
  opacity: 1;
  transition-delay: 0.1s;
}
.js-fade-shift.is-shift > *:nth-of-type(3) {
  opacity: 1;
  transition-delay: 0.15s;
}
.js-fade-shift.is-shift > *:nth-of-type(4) {
  opacity: 1;
  transition-delay: 0.2s;
}
.js-fade-shift.is-shift > *:nth-of-type(5) {
  opacity: 1;
  transition-delay: 0.25s;
}
.js-fade-shift.is-shift > *:nth-of-type(6) {
  opacity: 1;
  transition-delay: 0.3s;
}
.js-fade-shift.is-shift > *:nth-of-type(7) {
  opacity: 1;
  transition-delay: 0.35s;
}
.js-fade-shift.is-shift > *:nth-of-type(8) {
  opacity: 1;
  transition-delay: 0.4s;
}
.js-fade-shift.is-shift > *:nth-of-type(9) {
  opacity: 1;
  transition-delay: 0.45s;
}
.js-fade-shift.is-shift > *:nth-of-type(10) {
  opacity: 1;
  transition-delay: 0.5s;
}
.js-fade-shift.js-fade-shift-up.is-shift > *:nth-of-type(1) {
  transform: translateY(0);
}
.js-fade-shift.js-fade-shift-up.is-shift > *:nth-of-type(2) {
  transform: translateY(0);
}
.js-fade-shift.js-fade-shift-up.is-shift > *:nth-of-type(3) {
  transform: translateY(0);
}
.js-fade-shift.js-fade-shift-up.is-shift > *:nth-of-type(4) {
  transform: translateY(0);
}
.js-fade-shift.js-fade-shift-up.is-shift > *:nth-of-type(5) {
  transform: translateY(0);
}
.js-fade-shift.js-fade-shift-up.is-shift > *:nth-of-type(6) {
  transform: translateY(0);
}
.js-fade-shift.js-fade-shift-up.is-shift > *:nth-of-type(7) {
  transform: translateY(0);
}
.js-fade-shift.js-fade-shift-up.is-shift > *:nth-of-type(8) {
  transform: translateY(0);
}
.js-fade-shift.js-fade-shift-up.is-shift > *:nth-of-type(9) {
  transform: translateY(0);
}
.js-fade-shift.js-fade-shift-up.is-shift > *:nth-of-type(10) {
  transform: translateY(0);
}
.js-fade-shift.js-fade-shift-delay > *:nth-of-type(1) {
  transition-delay: 0.475s;
}
.js-fade-shift.js-fade-shift-delay > *:nth-of-type(2) {
  transition-delay: 0.65s;
}
.js-fade-shift.js-fade-shift-delay > *:nth-of-type(3) {
  transition-delay: 0.825s;
}
.js-fade-shift.js-fade-shift-delay > *:nth-of-type(4) {
  transition-delay: 1s;
}
.js-fade-shift.js-fade-shift-delay > *:nth-of-type(5) {
  transition-delay: 1.175s;
}
.js-fade-shift.js-fade-shift-delay > *:nth-of-type(6) {
  transition-delay: 1.35s;
}
.js-fade-shift.js-fade-shift-delay > *:nth-of-type(7) {
  transition-delay: 1.525s;
}
.js-fade-shift.js-fade-shift-delay > *:nth-of-type(8) {
  transition-delay: 1.7s;
}
.js-fade-shift.js-fade-shift-delay > *:nth-of-type(9) {
  transition-delay: 1.875s;
}
.js-fade-shift.js-fade-shift-delay > *:nth-of-type(10) {
  transition-delay: 2.05s;
}

.diagnosis {
  overflow: hidden;
  position: relative;
  padding: var(--size-space-xxx-lg) 0;
  border-top: 0.0625rem solid var(--color-black);
  text-align: center;
}
@media (min-width: 768px) {
  .diagnosis {
    padding: 5rem 0;
    height: 36.25rem;
  }
}
.diagnosis_title {
  margin: 0 auto var(--size-space-x-md) auto;
  width: 19.75rem;
}
@media (min-width: 768px) {
  .diagnosis_title {
    margin: 3.125rem auto var(--size-space-x-md) auto;
    width: 28.5625rem;
  }
}
.diagnosis_text {
  font-size: var(--typo-size-md);
}
@media (min-width: 768px) {
  .diagnosis_text {
    margin-bottom: var(--size-space-x-md);
    padding-bottom: var(--typo-size-x-lg);
  }
}
.diagnosis_text p {
  padding-bottom: var(--size-space-sm);
}
.diagnosis .c-button-diagnosis {
  width: 16.25rem;
}
@media (min-width: 768px) {
  .diagnosis .c-button-diagnosis {
    position: relative;
    width: var(--size-button-md);
  }
}
.diagnosis_img-sp {
  margin: var(--size-space-xxx-sm) auto var(--size-space-xx-md);
  width: 17.1875rem;
  pointer-events: none;
}
@media (min-width: 768px) {
  .diagnosis_img-sp {
    display: none;
  }
}
.diagnosis_img-pc {
  display: none;
}
@media (min-width: 768px) {
  .diagnosis_img-pc {
    display: block;
    position: absolute;
    top: 5.125rem;
    left: 50%;
    margin: 0;
    margin-left: calc(-1 * 35.8125rem);
    width: 71.625rem;
  }
}
.diagnosis a {
  margin: 0 auto;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--typo-color-black);
}
.diagnosis a.c-button_md span {
  color: var(--typo-color-white);
}