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

    l-inner

**************************************/
.l-inner {
  width: 100%;
  max-width: calc(100% - 5rem);
  margin-inline: auto;
  padding-inline: 2.5rem;
}
@media screen and (min-width: 769px) {
  .l-inner {
    max-width: calc(100% - 20rem);
    padding-inline: 10rem;
  }
}

.l-important {
  padding-block: 1.875rem 1.4rem;
}
@media screen and (min-width: 769px) {
  .l-important {
    padding-block: 1.875rem 0rem;
  }
}

.l-cause {
  padding-block: 0rem 12.5%;
}
@media screen and (min-width: 769px) {
  .l-cause {
    padding-block: 0rem 7%;
  }
}

.l-hope {
  padding-block: 8% 5%;
}
@media screen and (min-width: 769px) {
  .l-hope {
    padding-block: 6% 5%;
  }
}

.l-solution {
  padding-block: 8% 10%;
}
@media screen and (min-width: 769px) {
  .l-solution {
    padding-block: 5.5% 4.6%;
  }
}

.l-method {
  padding-block: 8% 10%;
}
@media screen and (min-width: 769px) {
  .l-method {
    padding-block: 5% 5%;
  }
}

.l-demerit {
  padding-block: 11% 13%;
}
@media screen and (min-width: 769px) {
  .l-demerit {
    padding-block: 5% 5%;
  }
}

.l-merit {
  padding-block: 12% 1%;
}
@media screen and (min-width: 769px) {
  .l-merit {
    padding-block: 0% 4.5%;
  }
}

.l-easy {
  padding-block: 13% 13%;
}
@media screen and (min-width: 769px) {
  .l-easy {
    padding-block: 5.4% 5.4%;
  }
}

.l-check {
  padding-block: 0 13%;
}
@media screen and (min-width: 769px) {
  .l-check {
    padding-block: 1% 4%;
  }
}

/**************************************

    u-line-orange (マーカー線オレンジ)

**************************************/
.u-line__orange {
  background: linear-gradient(
    85deg,
    rgba(247, 203, 107, 0.7),
    rgba(251, 169, 128, 0.7)
  );
  background-position: 0 100%; /* 下部に配置 */
  background-size: 0% 40%; /* 高さ30%分だけ色をつける */
  background-repeat: no-repeat;
  display: inline;
  transition: background-size 1.5s ease-out;
}
@media screen and (min-width: 769px) {
  .u-line__orange {
  }
}

.u-line__orange.on {
  background-size: 100% 40%; /* アニメーションで横に伸びる */
}
@media screen and (min-width: 769px) {
  .u-line__orange.on {
  }
}

/**************************************

    u-br (改行)

**************************************/
.u-br__sp {
  display: inline;
}
@media screen and (min-width: 769px) {
  .u-br__sp {
    display: none;
  }
}

/**************************************

    u-text__annotation (注釈)

**************************************/
.u-text__annotation {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo",
    sans-serif;
  color: #454545;
  font-weight: 400;
  font-size: 2.4vw;
}
@media screen and (min-width: 769px) {
  .u-text__annotation {
    font-size: 0.95vw;
  }
}

/**************************************

    共通img用設定

**************************************/
img,
picture {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/**************************************

    p-fv 

**************************************/
.p-fv__image {
  aspect-ratio: 750/1099;
}
@media screen and (min-width: 769px) {
  .p-fv__image {
    aspect-ratio: 1920/867;
  }
}

.p-fv__image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
@media screen and (min-width: 769px) {
  .p-fv__image img {
  }
}

/**************************************

    p-worries (最近老けたかも)

**************************************/
.p-worries__content-image {
  aspect-ratio: 750/947;
}
@media screen and (min-width: 769px) {
  .p-worries__content-image {
    aspect-ratio: 1920/733;
  }
}

.p-worries__content-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
@media screen and (min-width: 769px) {
  .p-worries__content-image img {
  }
}

/**************************************

    p-important (顔の印象は目元できまる)

**************************************/
.p-important {
  background: url(../images/ribas/important/important__bg.png) no-repeat left
    center / cover;
}
@media screen and (min-width: 769px) {
  .p-important {
    background: url(../images/ribas/important/important__bg-pc.png) no-repeat
      left center / cover;
  }
}

.p-important__contents-wrapper {
  display: grid;
}
@media screen and (min-width: 769px) {
  .p-important__contents-wrapper {
  }
}

/* 事実 */
.p-important__content-text-top {
  aspect-ratio: 241/225;
  width: 34%;
  justify-self: center;
  margin-right: 2.5rem;
}
@media screen and (min-width: 769px) {
  .p-important__content-text-top {
    aspect-ratio: 214/199;
    width: 12%;
    margin-right: 0;
  }
}

.p-important__contents {
  aspect-ratio: 712/561;
  width: 100%;
  margin-top: 4rem;
  margin-left: 1.2rem;
  justify-self: center;
}
@media screen and (min-width: 769px) {
  .p-important__contents {
    aspect-ratio: 902/506;
    width: 54%;
    margin-top: -4%;
    margin-left: 8%;
  }
}

/**************************************

    p-cause (顔が老けて見える原因は)

**************************************/
.p-cause {
  background: url(../images/ribas/cause/cause__bg.png) no-repeat left center /
    cover;
}
@media screen and (min-width: 769px) {
  .p-cause {
    background: url(../images/ribas/cause/cause__bg-pc.png) no-repeat left
      center / cover;
  }
}

.p-cause__title {
  aspect-ratio: 750/129;
}
@media screen and (min-width: 769px) {
  .p-cause__title {
    aspect-ratio: 1194/140;
    justify-self: center;
    width: 62%;
  }
}

.p-cause__contents-wrapper {
  display: grid;
}
@media screen and (min-width: 769px) {
  .p-cause__contents-wrapper {
  }
}

.p-cause__graph {
  aspect-ratio: 725/601;
  justify-self: center;
  width: 100%;
  margin-top: 5vh;
}
@media screen and (min-width: 769px) {
  .p-cause__graph {
    aspect-ratio: 809/557;
    width: 47%;
    margin-top: 2%;
  }
}

.p-cause__card01 {
  aspect-ratio: 700/1215;
  margin-top: 4vh;
  justify-self: center;
}
@media screen and (min-width: 769px) {
  .p-cause__card01 {
    aspect-ratio: 1201/1034;
    width: 70%;
    margin-top: 4%;
  }
}

.p-cause__card02 {
  aspect-ratio: 603/623;
  width: 86%;
  justify-self: center;
  margin-top: 4.5vh;
}
@media screen and (min-width: 769px) {
  .p-cause__card02 {
    aspect-ratio: 854/557;
    width: 50%;
    margin-top: 6%;
  }
}

/**************************************

    p-hope (諦めるのはまだ早い)

**************************************/
.p-hope {
  background: #fcfeff;
}
@media screen and (min-width: 769px) {
  .p-hope {
  }
}

.p-hope__contents-wrapper {
  display: grid;
}
@media screen and (min-width: 769px) {
  .p-hope__contents-wrapper {
  }
}

.p-hope__contents {
  aspect-ratio: 705/349;
  justify-self: center;
}
@media screen and (min-width: 769px) {
  .p-hope__contents {
    aspect-ratio: 966/408;
    width: 57%;
    margin-left: 1%;
  }
}

.p-hope__text-top {
  font-family: "dnp-shuei-ymincho-std", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 6.6vw;
  letter-spacing: 0.04em;
  justify-self: center;
}
@media screen and (min-width: 769px) {
  .p-hope__text-top {
    font-size: 1.8vw;
    margin-top: 2rem;
  }
}

.p-hope__text-bottom {
  aspect-ratio: 699/143;
  margin-top: 2.5rem;
  justify-self: center;
}
@media screen and (min-width: 769px) {
  .p-hope__text-bottom {
    aspect-ratio: 949/52;
    width: 55%;
    margin-top: 4.6rem;
  }
}

/**************************************

    p-solution (-5歳を目指せます)

**************************************/
.p-solution {
  background: url(../images/ribas/solution/solution__bg.png) no-repeat top -2% center /
    cover;
}
@media screen and (min-width: 769px) {
  .p-solution {
    background: url(../images/ribas/solution/solution__bg-pc.png) no-repeat top
      center / cover;
  }
}

.p-solution__contents-wrapper {
  display: grid;
}
@media screen and (min-width: 769px) {
  .p-solution__contents-wrapper {
  }
}

.p-solution__text-top {
  aspect-ratio: 579/210;
  width: 84%;
  margin-left: 2rem;
  justify-self: center;
}
@media screen and (min-width: 769px) {
  .p-solution__text-top {
    aspect-ratio: 454/175;
    width: 27%;
    margin-right: 2rem;
  }
}

.p-solution__text-main {
  aspect-ratio: 666/249;
  width: 95%;
  margin-top: -2.7%;
  margin-left: 1.5rem;
  justify-self: center;
}
@media screen and (min-width: 769px) {
  .p-solution__text-main {
    aspect-ratio: 932/166;
    width: 55%;
    margin-top: -1.7%;
    margin-left: 0rem;
  }
}

.p-solution__card {
  aspect-ratio: 602/925;
  width: 86%;
  margin-top: 3.3rem;
  margin-inline: auto;
  justify-self: center;
}
@media screen and (min-width: 769px) {
  .p-solution__card {
    aspect-ratio: 1202/466;
    width: 70%;
    margin-top: -1rem;
  }
}

/**************************************

    p-method__ (おすすめ方法3選)

**************************************/
.p-method {
  background: url(../images/ribas/method/method__bg.png) no-repeat top center /
    cover;
}
@media screen and (min-width: 769px) {
  .p-method {
    background: url(../images/ribas/method/method__bg-pc.png) no-repeat top
      center / cover;
  }
}

.p-method__contents-wrapper {
  display: grid;
  justify-self: center;
}
@media screen and (min-width: 769px) {
  .p-method__contents-wrapper {
  }
}

.p-method__title {
  aspect-ratio: 562/427;
  width: 81%;
  margin-top: 0.9rem;
  margin-left: -0.9rem;
  justify-self: center;
}
@media screen and (min-width: 769px) {
  .p-method__title {
    aspect-ratio: 810/191;
    width: 47%;
    margin-top: 1.9rem;
    margin-left: 3.1rem;
  }
}

.p-method__scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden; /* ← 追加 */
  /* -webkit-overflow-scrolling: touch; */
  width: 100%;
  position: relative;
}
@media screen and (min-width: 769px) {
  .p-method__scroll-wrapper {
    overflow: visible;
  }
}
@media screen and (min-width: 769px) {
  .scroll-hint-icon {
    transform: none;
    height: auto;
  }

  .scroll-hint-text {
    font-size: 16px;
    font-weight: 500;
  }
}

.p-method__table {
  aspect-ratio: 950/748;
  display: block;
  min-width: 40rem; /* 表画像の実寸還付は95remだけどデカすぎる感じがする */
  max-width: 100%; /* ← これが超重要！親幅に合わせて縮まないようにする */
  margin-top: 4.4rem;
  margin-left: 4%;
}
@media screen and (min-width: 769px) {
  .p-method__table {
    aspect-ratio: 1200/748;
    width: 63%;
    justify-self: center;
    min-width: auto;
    max-width: 100%;
    margin-left: 0;
  }
}

.scroll-hint {
  position: relative;
}

.p-method__icon {
  aspect-ratio: 115/56;
  width: 17%;
  margin-top: 7%;
  justify-self: center;
}
@media screen and (min-width: 769px) {
  .p-method__icon {
    aspect-ratio: 115/56;
    width: 7%;
    margin-top: 2%;
  }
}

.p-method__contents {
  aspect-ratio: 619/401;
  width: 88%;
  margin-top: 2.5rem;
  justify-self: center;
}
@media screen and (min-width: 769px) {
  .p-method__contents {
    aspect-ratio: 905/277;
    width: 52%;
    margin-top: 1rem;
  }
}

.p-method__text {
  font-family: "dnp-shuei-ymincho-std", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 3.6vw;
  letter-spacing: 0.04em;
  line-height: calc(3.6vw * 1.6); /* ← 文字サイズ × 行送り倍率 */
  justify-self: center;
  text-align: center;
  position: relative;
}
@media screen and (min-width: 769px) {
  .p-method__text {
    font-size: 1.1vw;
    line-height: calc(1.1vw * 2); /* ← 文字サイズ × 行送り倍率 */
  }
}

/* 水玉左 */
.p-method__text::before {
  position: absolute;
  content: "";
  bottom: -38%;
  left: -6vw;
  background: url(../images/ribas/method/method__icon02.png) no-repeat center /
    contain;
  width: 14.7vw;
  height: 14.7vh;
  aspect-ratio: 107/116;
}
@media screen and (min-width: 769px) {
  .p-method__text::before {
    bottom: 9%;
    left: -5.5vw;
    width: 9vw;
    height: 9vh;
  }
}

/* 水玉右 */
.p-method__text::after {
  position: absolute;
  content: "";
  transform: rotate(-33deg);
  top: -7vh;
  right: -7vw;
  background: url(../images/ribas/method/method__icon02.png) no-repeat center /
    contain;
  width: 14.7vw;
  height: auto;
  aspect-ratio: 107/116;
}
@media screen and (min-width: 769px) {
  .p-method__text::after {
    top: -4vh;
    right: -6.4vw;
    width: 6vw;
    height: auto;
  }
}

/* 注釈 */
.p-method__text-annotation {
  text-align: right;
  margin-top: 3rem;
  margin-right: 4%;
}
@media screen and (min-width: 769px) {
  .p-method__text-annotation {
    margin-right: 20%;
  }
}

/**************************************

    p-demerit (アイクリームや美の容医療デメリット)

**************************************/
.p-demerit {
  background: url(../images/ribas/demerit/demerit__bg.png) no-repeat top center /
    cover;
}
@media screen and (min-width: 769px) {
  .p-demerit {
    background: url(../images/ribas/demerit/demerit__bg-pc.png) no-repeat top
      center / cover;
  }
}

.p-demerit__contents-wrapper {
  display: grid;
}
@media screen and (min-width: 769px) {
  .p-demerit__contents-wrapper {
  }
}

.p-demerit__title {
  aspect-ratio: 655/117;
  justify-self: center;
  width: 93%;
}
@media screen and (min-width: 769px) {
  .p-demerit__title {
    aspect-ratio: 1198/106;
    width: 68%;
  }
}

.p-demerit__card-wrapper {
  display: grid;
  row-gap: 4vh;
  justify-self: center;
  width: 96%;
  margin-top: 5vh;
}
@media screen and (min-width: 769px) {
  .p-demerit__card-wrapper {
    width: 70%;
    grid-template-columns: 1fr 1fr;
    column-gap: 1vw;
    justify-self: center;
    margin-top: 3%;
  }
}

.p-demerit__card01 {
  aspect-ratio: 697/726;
  justify-self: center;
}
@media screen and (min-width: 769px) {
  .p-demerit__card01 {
    aspect-ratio: 610/645;
  }
}

.p-demerit__card02 {
  aspect-ratio: 694/807;
  justify-self: center;
}
@media screen and (min-width: 769px) {
  .p-demerit__card02 {
    aspect-ratio: 610/645;
  }
}

/**************************************

    p-merit (ニードルパッチなら！)

**************************************/
.p-merit {
  background: url(../images/ribas/merit/merit__bg.jpg) no-repeat top center /
    cover;
  position: relative;
}
@media screen and (min-width: 769px) {
  .p-merit {
    background: url(../images/ribas/merit/merit__bg-pc.jpg) no-repeat top center /
      cover;
  }
}

/* .p-merit::before {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/ribas/merit/merit__icon.png) no-repeat center /
    contain;
  width: 14.7vw;
  height: 14.7vh;
  aspect-ratio: 112/67;
}
@media screen and (min-width: 769px) {
  .p-merit::before {
    width: 5.9vw;
    height: 5.9vh;
  }
} */

.p-merit__contents-wrapper {
  display: grid;
  row-gap: 3vh;
}
@media screen and (min-width: 769px) {
  .p-merit__contents-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0;
  }
}

/* .p-merit__contents {
  aspect-ratio: 661/466;
  justify-self: center;
  width: 94%;
  margin-top: 5%;
}
@media screen and (min-width: 769px) {
  .p-merit__contents {
    aspect-ratio: 668/407;
    width: 39%;
  }
} */

.p-merit__card {
  aspect-ratio: 736/522;
  justify-self: center;
  width: 100%;
  margin-top: 0;
}
@media screen and (min-width: 769px) {
  .p-merit__card {
    aspect-ratio: 1236/427;
    width: 72%;
  }
}

.p-merit__text-top {
  font-family: "dnp-shuei-ymincho-std", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 3.9vw;
  letter-spacing: 0.04em;
  line-height: calc(3.9vw * 1.6); /* ← 文字サイズ × 行送り倍率 */
  justify-self: center;
  text-align: center;
  margin-top: -2vh;
}
@media screen and (min-width: 769px) {
  .p-merit__text-top {
    font-size: 1.2vw;
    line-height: calc(1.2vw * 2);
    margin-top: -4.1%;
  }
}

.p-merit__text-bottom {
  aspect-ratio: 497/135;
  justify-self: center;
  width: 72%;
  margin-top: 0vh;
  margin-left: 2rem;
}
@media screen and (min-width: 769px) {
  .p-merit__text-bottom {
    aspect-ratio: 1030/119;
    width: 51%;
    margin-top: -1.2%;
    margin-left: 0;
  }
}

/* 注釈 */
.p-merit__text-annotation {
  text-align: right;
  margin-top: 6%;
  margin-right: 0.6rem;
}
@media screen and (min-width: 769px) {
  .p-merit__text-annotation {
    text-align: right;
    margin-top: 0;
    margin-left: auto; /* ← 右寄せになる */
    margin-right: 15%;
  }
}

/**************************************

    p-easy (安くて続けやすい)

**************************************/
.p-easy {
  background: url(../images/ribas/easy/easy__bg.png) no-repeat top center /
    cover;
}
@media screen and (min-width: 769px) {
  .p-easy {
    background: url(../images/ribas/easy/easy__bg-pc.png) no-repeat top center /
      cover;
  }
}
.p-easy__contents-wrapper {
  display: grid;
}
@media screen and (min-width: 769px) {
  .p-easy__contents-wrapper {
  }
}

.p-easy__text-top {
  aspect-ratio: 570/116;
  justify-self: center;
  width: 81%;
}
@media screen and (min-width: 769px) {
  .p-easy__text-top {
    aspect-ratio: 731/49;
    width: 43%;
  }
}

.p-easy__text-middle {
  aspect-ratio: 490/129;
  justify-self: center;
  width: 71%;
  margin-top: 5%;
}
@media screen and (min-width: 769px) {
  .p-easy__text-middle {
    aspect-ratio: 442/54;
    width: 26%;
    margin-top: 1%;
  }
}

.p-easy__text-bottom {
  aspect-ratio: 583/64;
  justify-self: center;
  width: 82%;
  margin-top: 3rem;
}
@media screen and (min-width: 769px) {
  .p-easy__text-bottom {
    aspect-ratio: 449/55;
    width: 27%;
    margin-top: 2rem;
  }
}

/**************************************

    p-check (どれを買えばいいかわからない)

**************************************/
.p-check {
  background: url(../images/ribas/check/check__bg.png) no-repeat top 1rem center /
    cover;
}
@media screen and (min-width: 769px) {
  .p-check {
    background: url(../images/ribas/check/check__bg-pc.png) no-repeat top center /
      cover;
  }
}
.p-check__contents-wrapper {
  display: grid;
}
@media screen and (min-width: 769px) {
  .p-check__contents-wrapper {
  }
}

.p-check__title {
  aspect-ratio: 750/171;
  justify-self: center;
  width: 100%;
  margin-top: -0.5rem;
}
@media screen and (min-width: 769px) {
  .p-check__title {
    aspect-ratio: 1346/168;
    width: 69%;
    margin-top: 1rem;
  }
}

.p-check__text-top {
  aspect-ratio: 245/74;
  justify-self: center;
  width: 36%;
  margin-top: 2%;
}
@media screen and (min-width: 769px) {
  .p-check__text-top {
    aspect-ratio: 160/54;
    width: 9%;
    margin-top: -1%;
  }
}

.p-check__card {
  aspect-ratio: 683/550;
  justify-self: center;
  width: 98%;
  margin-top: 4rem;
}
@media screen and (min-width: 769px) {
  .p-check__card {
    aspect-ratio: 991/455;
    width: 58%;
    margin-top: 2%;
  }
}

/**************************************

    20241024の最初のsection,margin調整用

**************************************/
#meritarea3 {
}
@media screen and (min-width: 769px) {
  #meritarea3 {
    background: url(../images/ribas/sec04-haikei-sp.jpg) repeat;
    background-size: contain;
    padding-top: 60px;
  }
}
#meritarea3 .check-area .item2:first-of-type {
  margin-top: 0;
  padding-top: 60px;
}

#meritarea3 .item:last-of-type {
  padding-top: 60px;
}

/**************************************

    3つのポイント構成front4-gssのみ修正20250807

**************************************/
.p-point__title01 {
}
@media screen and (min-width: 769px) {
  .p-point__title01 {
  }
}

.p-point__title01 img {
  aspect-ratio: 487/256;
}
@media screen and (min-width: 769px) {
  .p-point__title01 img {
    aspect-ratio: 1090/86;
  }
}

.p-point__title02 {
}
@media screen and (min-width: 769px) {
  .p-point__title02 {
  }
}

.p-point__title02 img {
  aspect-ratio: 573/256;
}
@media screen and (min-width: 769px) {
  .p-point__title02 img {
    aspect-ratio: 1090/86;
  }
}

.p-point__card-image02 {
}
@media screen and (min-width: 769px) {
  .p-point__card-image02 {
  }
}

.p-point__card-image02 img {
  aspect-ratio: 614/445;
}
@media screen and (min-width: 769px) {
  .p-point__card-image02 img {
    aspect-ratio: 464/361;
  }
}

.check-img2--02 {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .check-img2--02 {
    width: 45%;
  }
}

.sec04-flex-text--02 {
  margin-top: 0;
}