@charset "UTF-8";

@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap";
@font-face {
  font-family: "Rakuten SansJP";
  font-weight: 300;
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSansJP_W_Light.woff?v=202604091510) format("woff");
  font-style: normal;
}
@font-face {
  font-family: "Rakuten SansJP";
  font-weight: 400;
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSansJP_W_Regular.woff?v=202604091510) format("woff");
  font-style: normal;
}
@font-face {
  font-family: "Rakuten SansJP";
  font-weight: 500;
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSansJP_W_Medium.woff?v=202604091510) format("woff");
  font-style: normal;
}
@font-face {
  font-family: "Rakuten SansJP";
  font-weight: 600;
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSansJP_W_DemiBold.woff?v=202604091510) format("woff");
  font-style: normal;
}
@font-face {
  font-family: "Rakuten SansJP";
  font-weight: 700;
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSansJP_W_Bold.woff?v=202604091510) format("woff");
  font-style: normal;
}
@font-face {
  font-family: "Rakuten SansJP";
  font-weight: 800;
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSansJP_W_Heavy.woff?v=202604091510) format("woff");
  font-style: normal;
}
@font-face {
  font-family: "Rakuten Sans";
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSans_SBd.woff?v=202604091510) format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Rakuten Sans";
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSans_Blk.woff?v=202604091510) format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Rakuten Sans JP2";
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSansJP2_W-Light.woff2?v=202604091510) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rakuten Sans JP2";
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSansJP2_W-Regular.woff2?v=202604091510) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rakuten Sans JP2";
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSansJP2_W-Medium.woff2?v=202604091510) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rakuten Sans JP2";
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSansJP2_W-DemiBold.woff2?v=202604091510) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rakuten Sans JP2";
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSansJP2_W-Bold.woff2?v=202604091510) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rakuten Sans JP2";
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSansJP2_W-Heavy.woff2?v=202604091510) format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
main {
  font-family: "Rakuten SansJP", sans-serif;
}
.rye-c-accordion__item {
  position: relative;
  background-color: #fff;
  border-radius: 7.125px;
}
.rye-c-accordion__item:nth-of-type(n + 2) {
  margin-top: 34.2px;
}
.rye-c-accordion__item.-no01 {
  padding: 22.8px 18.525px;
}
.rye-c-accordion__item.-no01 .rye-c-accordion__img {
  width: 75.525px;
  left: 17.8125px;
  top: -22.8px;
}
.rye-c-accordion__item.-no01 .rye-c-accordion__headline {
  padding-bottom: 17.1px;
}
.rye-c-accordion__item.-no02 {
  padding: 22.8px 18.525px;
}
.rye-c-accordion__item.-no02 .rye-c-accordion__img {
  width: 69.825px;
  right: 27.075px;
  top: -11.4px;
}
.rye-c-accordion__item.-no02 .rye-c-accordion__headline {
  padding-bottom: 22.8px;
}
.rye-c-accordion__item.-no03 {
  padding: 22.8px 18.525px;
}
.rye-c-accordion__item.-no03 .rye-c-accordion__img {
  width: 96.1875px;
  left: 29.925px;
  top: -24.9375px;
}
.rye-c-accordion__item.-no03 .rye-c-accordion__headline {
  padding-bottom: 17.1px;
}
.rye-c-accordion__item.-no04 {
  padding: 28.5px 18.525px 22.8px;
}
.rye-c-accordion__item.-no04 .rye-c-accordion__img {
  width: 86.925px;
  right: 5.7px;
  top: -15.675px;
}
.rye-c-accordion__item.-no04 .rye-c-accordion__headline {
  padding-bottom: 22.8px;
}
.rye-c-accordion__headline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.rye-c-accordion__text {
  width: 100%;
}
.rye-c-accordion__img {
  position: absolute;
  opacity: 0;
  z-index: 0;
}
.rye-c-accordion__inner {
  position: relative;
  background-color: #fff;
  border-radius: 17.1px;
  overflow: hidden;
  z-index: 1;
}
.rye-c-accordion__button {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: #000;
  padding: 9.975px 0 8.55px;
  cursor: pointer;
  transition: opacity 0.25s;
}
.rye-c-accordion__button:active img {
  transform: scale(0.95);
}
.rye-c-accordion__button:hover {
  opacity: 0.75;
}
.rye-c-accordion__button::before,
.rye-c-accordion__button::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 12.825px;
  height: 2.85px;
  background-color: #000;
  right: 22.0875px;
  transition: transform 0.25s;
}
.rye-c-accordion__button::after {
  transform: rotate(90deg);
}
.rye-c-accordion__button.js-active::after {
  transform: rotate(0deg);
}
.rye-c-accordion__icon {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.25s;
}
.rye-c-accordion__icon:hover {
  opacity: 1 !important;
}
.rye-c-accordion__icon::before {
  content: "";
  display: block;
  position: absolute;
  width: 22.8px;
  height: 22.8px;
  background-color: #fff;
  border-radius: 50%;
  right: 17.1px;
  top: 50%;
  transform: translateY(-50%);
}
.rye-c-accordion__contents {
  display: none;
  padding: 14.25px 17.1px;
  border: 2.85px solid #000;
  border-radius: 17.1px;
  border-top: none;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  color: #000;
}
.rye-c-accordion__contents > * {
  opacity: 0;
}
.rye-c-anchor {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 80%;
  max-width: 530px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%);
}
.rye-c-anchor__item {
  background-color: #fff;
  border: 5px solid #000;
  border-radius: 14px;
  min-height: 110px;
  box-shadow: 7px 7px 0 #000;
  transition: 0.25s;
  transform-origin: right bottom;
  overflow: hidden;
}
@media screen and (max-width: 1450px) {
  .rye-c-anchor__item {
    min-height: 80px;
  }
}
.rye-c-anchor__item:nth-of-type(n + 2) {
  margin-top: 40px;
}
.rye-c-anchor__item:first-of-type .rye-c-anchor__number {
  background-color: #ff8330;
}
.rye-c-anchor__item:nth-of-type(2) .rye-c-anchor__number {
  background-color: #59cab8;
}
.rye-c-anchor__item:nth-of-type(3) .rye-c-anchor__number {
  background-color: #ff686c;
}
.rye-c-anchor__item:active {
  box-shadow: none;
  transform: translateX(7px) translateY(7px);
}
.rye-c-anchor__item:hover {
  transform: scale(1.05);
  transform-origin: right bottom;
}
.rye-c-anchor__item:hover:active {
  box-shadow: none;
  transform: translateX(7px) translateY(7px) scale(1.05);
}
.rye-c-anchor__number {
  color: #fff;
  font-family: "Rakuten Sans";
  font-weight: bold;
  font-size: 50px;
  height: 100%;
  min-height: 110px;
  width: 20%;
  max-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
@media screen and (max-width: 1450px) {
  .rye-c-anchor__number {
    font-size: 32px;
    max-width: 60px;
    min-height: 80px;
  }
}
@media screen and (max-width: 1200px) {
  .rye-c-anchor__number {
    font-size: 24px;
    max-width: 48px;
    min-height: 80px;
  }
}
@media screen and (max-width: 1060px) {
  .rye-c-anchor__number {
    min-height: 88px;
  }
}
.rye-c-anchor__text {
  margin-left: 32px;
  width: 100%;
  flex: 1;
}
@media screen and (max-width: 1450px) {
  .rye-c-anchor__text {
    margin-left: 12px;
  }
}
.rye-c-anchor__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  min-height: 110px;
  transition: opacity 0.25s;
}
@media screen and (max-width: 1450px) {
  .rye-c-anchor__link {
    min-height: 80px;
  }
}
.rye-c-anchor__link:hover {
  text-decoration: none;
}
.anchorBg.-left.-addNav .rye-c-anchor {
  top: 45%;
}
.anchorBg.-left .rye-c-anchor {
  display: none;
}
@media screen and (max-width: 1060px) {
  .anchorBg.-left .rye-c-anchor {
    display: block;
  }
}
.anchorBg.-right .rye-c-anchor {
  display: block;
}
@media screen and (max-width: 1060px) {
  .anchorBg.-right .rye-c-anchor {
    display: none;
  }
}
.rye-p-floating-button.-custom .rye-p-floating-button__container {
  width: auto;
  padding: 16.3875px 11.4px 7.125px;
}
.rye-p-floating-button.-custom .rye-p-floating-button__description {
  color: #333;
  text-align: center;
  line-height: 1.15;
}
.rc-anim.js-scroll-anim-start.-fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.rc-anim.js-scroll-anim-start.-fadeUp-small {
  animation-name: smallFadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.rc-anim.js-scroll-anim-start.-fadeLeft {
  animation-name: fadeInLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.rc-anim.js-scroll-anim-start.-fadeRight {
  animation-name: fadeInRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.rc-anim.js-scroll-anim-start.-fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.rc-anim.js-scroll-anim-start.-fadeInShake {
  animation: fadeInAnime 0.5s ease-in-out forwards,
    shake 2s ease-in-out forwards;
  animation-delay: 0.5s;
  transform-origin: left bottom;
}
.rc-anim.js-scroll-anim-start.-zoomIn {
  animation: zoomIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.rc-anim.js-scroll-anim-start.-long {
  animation-duration: 0.8s;
}
.rc-anim.-stop {
  animation-name: none !important;
  opacity: 1;
}
.rc-anim.-loadStart {
  opacity: 0;
}
.rc-anim.-loadStart.-zoomIn {
  animation: zoomInPcBg 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 0.5s;
}
.rc-anim.-loadStart.-fadeLeft {
  animation-name: fadeInLeftAnimePcBg;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.rc-anim.-loadStart.-fadeRight {
  animation-name: fadeInRightAnimePcBg;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.rc-anim.-loadStart.-delay {
  animation-delay: 1.5s;
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-142.5px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInLeftAnimePcBg {
  from {
    opacity: 0;
    transform: translateX(-456px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
@keyframes fadeInRightAnime {
  from {
    opacity: 0;
    transform: translateX(142.5px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRightAnimePcBg {
  from {
    opacity: 0;
    transform: translateX(142.5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
@keyframes smallFadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(42.75px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(92.625px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes zoomInPcBg {
  0% {
    transform: translateX(-50%) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translateX(-50%) scale(1.2);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: rotate(-20deg);
  }
  40% {
    transform: rotate(20deg);
  }
  60% {
    transform: rotate(-20deg);
  }
  80% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.rye-c-annotation {
  color: #fff;
  line-height: 1.2;
  display: flex;
  text-indent: 0;
  padding-left: 0;
}
.rye-c-annotation.-center {
  justify-content: center;
}
.rye-c-annotation.-gray {
  color: #555;
}
.rye-c-annotation::before {
  content: "※";
  margin-right: 4.275px;
}
.rye-c-bg {
  position: relative;
}
.solution .rye-c-bg {
  background-color: #ff9130;
  padding: 45.6px 22.8px 156.75px;
}
.connection .rye-c-bg {
  background-color: #59cab8;
  padding: 0 22.8px 156.75px;
}
.connection .rye-c-bg::before {
  content: "";
  display: block;
  background-color: #59cab8;
  width: 100%;
  height: 71.25px;
  border-radius: 49.875px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: absolute;
  top: -71.25px;
  left: 0;
}
.trial .rye-c-bg {
  background-color: #feb8ba;
  padding: 0 22.8px 156.75px;
}
.trial .rye-c-bg::before {
  content: "";
  display: block;
  background-color: #feb8ba;
  width: 100%;
  height: 71.25px;
  border-radius: 49.875px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: absolute;
  top: -71.25px;
  left: 0;
}
.gakuwari .rye-c-bg {
  background-color: #ffeba7;
  padding: 0 22.8px 57px;
}
.gakuwari .rye-c-bg::before {
  content: "";
  display: block;
  background-color: #ffeba7;
  width: 100%;
  height: 71.25px;
  border-radius: 49.875px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: absolute;
  top: -71.25px;
  left: 0;
}
.rye-c-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  background-color: #ff41be;
  border: 2.85px solid #ff41be;
  text-align: center;
  color: #fff !important;
  border-radius: 50vh;
  width: 342px;
  min-height: auto;
  padding: 19.95px 0;
  line-height: 1;
}
.rye-c-button span {
  transition: opacity 0.25s;
}
.rye-c-button:hover span {
  opacity: 0.6;
}
.rye-c-button__wrap {
  text-align: center;
}
.rye-c-button.-outline {
  border: 2.85px solid #fff;
}
.rye-c-button.-floating {
  width: 285px;
  min-height: auto;
  padding: 17.1px 0;
}
.rye-c-button.-floating:hover {
  opacity: 0.8 !important;
}
.rye-c-button:hover {
  text-decoration: none;
}
.contents .rye-c-button:hover {
  opacity: 1;
}
.rye-c-headline {
  padding: 0;
  text-align: center;
}
.rye-c-headline img {
  width: 100%;
}
.rye-c-headline.-main {
  width: 80%;
  max-width: 556px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
}
.anchorBg.-left.-addNav .rye-c-headline {
  top: 30%;
}
@media screen and (max-width: 1060px) {
  .anchorBg.-left.-addNav .rye-c-headline {
    width: 60%;
  }
}
.rye-c-imgText {
  text-align: center;
}
.rye-c-imgText img {
  width: 100%;
}
.rye-c-kanban {
  position: relative;
  background-image: url(https://r.r10s.jp/evt/event/young/tieup/mobile/_sp/img/20240702/bg_kanban.png?v=202604091510);
  background-size: cover;
  width: 100%;
  height: 432px;
  min-width: auto;
}
.rye-c-kanban__text {
  position: absolute;
  z-index: 1;
  width: 100%;
  opacity: 0;
}
.rye-c-kanban__text img {
  width: 100%;
}
.rye-c-kanban__text.-headline {
  top: 150.6px;
  animation-name: zoomIn;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
  animation-fill-mode: forwards;
  animation-delay: 1s;
}
.rye-c-kanban__text.-headline.-bubble {
  top: 111.6px;
  animation-name: fadeUp;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}
.rye-c-kanban__text.-voice {
  top: 45.6px;
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.rye-c-kanban__text.-voice.-bubble.-first {
  top: 264.6px;
  animation-name: fadeInLeft;
  animation-delay: 1.5s;
}
.rye-c-kanban__text.-voice.-bubble.-second {
  top: 318.6px;
  animation-name: fadeInRight;
  animation-delay: 1.75s;
}
.rye-c-kanban__text.-annotation {
  top: 403.8px;
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.rye-c-kanban__text.-annotation2 {
  top: 415.2px;
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.rye-c-kanban__human {
  position: absolute;
  opacity: 0;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.rye-c-kanban__human:first-of-type {
  width: 111px;
  top: 4.2px;
  left: 0;
  animation-name: fadeInLeft;
  animation-delay: 2s;
}
.rye-c-kanban__human:nth-of-type(2) {
  width: 109.8px;
  top: 19.2px;
  right: 0;
  animation-name: fadeInRight;
  animation-delay: 2.15s;
}
.rye-c-kanban__human:nth-of-type(3) {
  width: 123px;
  top: 261px;
  left: 0;
  animation-name: fadeInLeft;
  animation-delay: 2.3s;
}
.rye-c-kanban__human:nth-of-type(4) {
  width: 169.8px;
  top: 249.6px;
  right: 0;
  animation-name: fadeInRight;
  animation-delay: 2.35s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  40% {
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12.5vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-31.25vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(31.25vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.rye-c-link {
  display: block;
  background-color: #fff;
  border-radius: 7.125px;
  overflow: hidden;
}
.rye-c-link__inner {
  transition: opacity 0.25s;
}
.rye-c-link img {
  width: 100%;
  transition: 0.25s;
}
.rye-c-link:hover .rye-c-link__inner {
  opacity: 0.75;
}
.rye-c-tab__menuList {
  margin-left: 0;
}
.rye-c-tab__menuItem {
  width: calc((100% - 9.975px) / 2) !important;
  margin: 0;
  flex: 1;
  justify-content: center;
  background-color: #fff;
  border-radius: 0;
  border-top-left-radius: 7.125px;
  border-top-right-radius: 7.125px;
  border: none;
  min-height: auto;
  padding: 19.95px 0;
}
.rye-c-tab__menuItem:nth-of-type(2) {
  margin-left: 9.975px;
}
.rye-c-tab__menuItem[aria-selected="true"] {
  background-color: #ff008c;
  color: #fff;
}
.rye-c-tab__menuItem[aria-selected="true"]::after {
  display: none;
}
.rye-c-tab__menuItem[aria-selected="true"] .rye-c-tab__textBox {
  color: #fff;
}
.rye-c-tab__textBox {
  color: #555;
  line-height: 1;
}
.rye-c-tab__itemContainer {
  border-top: 2.85px solid #ff008c;
  padding: 18.525px;
  border-bottom-left-radius: 7.125px;
  border-bottom-right-radius: 7.125px;
  overflow: hidden;
}
.rye-c-tab__itemBox img {
  width: 100%;
}
.rye-c-tab__itemBox.rc-anim {
  opacity: 0;
}
.rye-c-textLink {
  color: #06f !important;
  text-decoration: underline;
}
.rye-c-video {
  width: 265.05px;
  height: 0;
  padding-top: 471.675px;
  margin: 17.1px auto 0;
  position: relative;
  border-radius: 21.375px;
  overflow: hidden;
}
.rye-c-video::after {
  content: "";
  display: block;
  width: 100%;
  height: 28.5px;
}
.rye-c-video__contents {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.rye-c-slideBanner {
  position: fixed;
  bottom: -120%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: block;
  width: 456px;
  transition: bottom 1.5s;
}
.rye-c-slideBanner.js-active {
  bottom: 0;
}
.rye-c-slideBanner__openButton {
  position: relative;
  width: 456px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 15.675px;
  font-weight: bold;
  padding: 24.225px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.25s !important;
  display: none;
}
.rye-c-slideBanner__openButton:hover {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.8);
}
.rye-c-slideBanner__openButton span {
  position: relative;
  width: 22.8px;
  height: 22.8px;
  margin-left: 8.55px;
}
.rye-c-slideBanner__openButton span::before,
.rye-c-slideBanner__openButton span::after {
  content: "";
  display: block;
  position: absolute;
  background: #fff;
  width: 12.825px;
  height: 2.85px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: transform 0.25s;
}
.rye-c-slideBanner__openButton span::after {
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
.rye-c-slideBanner__openButton span:hover {
  opacity: 1;
}
.rye-c-slideBanner__closeButton {
  position: absolute;
  width: 35.625px;
  height: 35.625px;
  background: #000;
  border-radius: 100%;
  right: 22.8px;
  top: -17.8125px;
  z-index: 1;
  display: none;
  transition: transform 0.25s !important;
}
.rye-c-slideBanner__closeButton:hover {
  opacity: 1 !important;
}
.rye-c-slideBanner__closeButton::before {
  content: "";
  display: block;
  position: absolute;
  background: #fff;
  width: 17.1px;
  height: 2.85px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: transform 0.25s !important;
}
.rye-c-slideBanner__closeButton.js-active {
  display: block;
}
.rye-c-slideBanner__closeButton:hover {
  opacity: 1;
  transform: scale(1.2);
  transform-origin: center;
}
.rye-c-slideBanner__body {
  text-align: center;
  font-size: 17.1px;
  background: #fff;
  display: block;
  overflow: hidden;
  transition: max-height 0.75s;
  max-height: none;
}
.rye-c-slideBanner__inner {
  border-top: 1.425px solid #000;
  padding: 22.8px 25.65px;
}
.rye-c-slideBanner p {
  line-height: 1;
}
.rye-c-slideBanner a {
  transition: opacity 0.25s;
}
.rye-c-slideBanner a:hover {
  opacity: 0.75;
}
.rye-c-slideBanner button {
  cursor: pointer;
}
.rye-c-slideBanner .rye-c-button:hover {
  opacity: 1;
}
.rye-c-toTop {
  bottom: 99.75px;
}
.rye-u-c-ff41be {
  color: #ff41be !important;
}
.rye-u-ffs-palt {
  font-feature-settings: "palt";
}
.rye-u-ti-1 {
  text-indent: -1em;
  padding-left: 1em;
}
.rye-u-lh-120p {
  line-height: 1.2 !important;
}
.rye-u-lh-160p {
  line-height: 1.6 !important;
}
.rye-u-mt-4 {
  margin-top: 5.7px !important;
}
.rye-u-mt-6 {
  margin-top: 8.55px !important;
}
.rye-u-mt-8 {
  margin-top: 11.4px !important;
}
.rye-u-mt-12 {
  margin-top: 17.1px !important;
}
.rye-u-mt-14 {
  margin-top: 19.95px !important;
}
.rye-u-mt-16 {
  margin-top: 22.8px !important;
}
.rye-u-mt-18 {
  margin-top: 25.65px !important;
}
.rye-u-mt-20 {
  margin-top: 28.5px !important;
}
.rye-u-mt-24 {
  margin-top: 34.2px !important;
}
.rye-u-mt-32 {
  margin-top: 45.6px !important;
}
.rye-u-mt-36 {
  margin-top: 51.3px !important;
}
.rye-u-mt-44 {
  margin-top: 62.7px !important;
}
.rye-u-mt-48 {
  margin-top: 68.4px !important;
}
.rye-u-fs-10 {
  font-size: 14.25px !important;
}
.rye-u-fs-11 {
  font-size: 15.675px !important;
}
.rye-u-fs-12 {
  font-size: 17.1px !important;
}
.rye-u-fs-14 {
  font-size: 19.95px !important;
}
.rye-u-fs-15 {
  font-size: 21.375px !important;
}
.rye-u-fz-12 {
  font-size: 17.1px !important;
}
@font-face {
  font-family: "Rakuten Sans";
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSans_SBd.woff?v=202604091510)
    format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Rakuten Sans";
  src: url(https://r.r10s.jp/evt/event/young/_cmn/fonts/RakutenSans_Blk.woff?v=202604091510)
    format("woff");
  font-weight: 700;
  font-style: normal;
}
.contents {
  max-width: 456px;
  margin: auto;
  overflow: hidden;
  border-left: 3px solid #000;
  border-right: 3px solid #000;
  position: relative;
  z-index: 2;
  box-sizing: content-box;
}
.contentsWrap {
  position: relative;
}
.anchorBg {
  width: calc((100% - 462px) / 2);
  min-width: 234px;
  height: 100%;
  position: fixed;
  top: 0;
  padding-top: 80px;
  background-size: cover;
}
.anchorBg.-left {
  left: 0;
  background-image: url(https://r.r10s.jp/evt/event/young/tieup/mobile/_pc/img/20240702/bg_left.png?v=202604091510);
  background-position: left;
  z-index: 1;
}
@media screen and (max-width: 1060px) {
  .anchorBg.-left {
    width: calc(100vw - 462px);
    min-width: 562px;
  }
}
.anchorBg.-right {
  right: 0;
  background-image: url(https://r.r10s.jp/evt/event/young/tieup/mobile/_pc/img/20240702/bg_right.png?v=202604091510);
  background-position: right;
  z-index: 0;
}
.anchorBg__logo {
  position: absolute;
  background-color: #fff;
  max-width: 340px;
  width: 50%;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 16px 0;
}
@media screen and (max-width: 1060px) {
  .anchorBg__logo {
    width: 35%;
  }
}
.anchorBg__logo img {
  vertical-align: middle;
  width: 60%;
  max-width: 214px;
}
.anchorBg.-left.-addNav .anchorBg__logo {
  top: 20%;
}
.rye-l-gakuwariFooter > * {
  position: relative;
  background: #fff;
  z-index: 2;
}
.rye-l-rakutenFooter {
  position: relative;
  z-index: 2;
  background-color: #fff;
}
.rye-l-rakutenHeader {
  position: relative;
  z-index: 3 !important;
}
.solution__comment {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.solution__comment::after {
  content: "";
  display: block;
  position: absolute;
  background-color: #fff;
  width: 34.2px;
  height: 18.525px;
  -webkit-clip-path: polygon(100% 0, 50% 100%, 0 0%);
  clip-path: polygon(100% 0, 50% 100%, 0 0%);
  bottom: -35.625px;
  left: 50%;
  transform: translateX(-50%);
}
.solution__avatar {
  position: relative;
  background-color: #cacaca;
  width: 89.0625px;
  height: 89.0625px;
  border-radius: 50%;
}
.solution__avatar--decoration {
  position: absolute;
  background-image: url(https://r.r10s.jp/evt/event/young/tieup/mobile/_cmn/img/20240702/illust_solution-02.png?v=202604091510);
  background-size: 100%;
  width: 15.675px;
  height: 22.8px;
  top: 3.5625px;
  right: 0.7125px;
  opacity: 0;
}
.solution__avatarInner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.solution__avatar img {
  width: 70.5375px;
  margin-left: 12.1125px;
  margin-top: 2.1375px;
  transform: translateY(92.625px);
}
.connection__commentWrap {
  position: relative;
}
.connection__commentList {
  position: relative;
  height: 516.5625px;
}
.connection__avatar {
  position: absolute;
}
.connection__comment {
  opacity: 0;
}
.connection__comment:first-of-type .connection__avatar {
  width: 121.8375px;
  left: -22.8px;
}
.connection__comment:nth-of-type(2) .connection__avatar {
  width: 102.6px;
  top: 100.4625px;
  right: -18.525px;
}
.connection__comment:nth-of-type(3) .connection__avatar {
  width: 97.6125px;
  top: 282.8625px;
  left: -9.2625px;
}
.connection__bubble {
  position: absolute;
  z-index: 1;
}
.connection__bubble.-text01 {
  width: 307.8px;
  top: 17.1px;
  right: 0;
}
.connection__bubble.-text02 {
  width: 210.9px;
  top: 90.4875px;
  right: 94.7625px;
}
.connection__bubble.-text03 {
  width: 319.9125px;
  top: 178.125px;
  left: 0;
}
.connection__bubble.-text04 {
  width: 277.1625px;
  top: 282.15px;
  right: 38.475px;
}
.connection__bubble.-text05 {
  width: 315.6375px;
  top: 372.6375px;
  right: 0;
}
.connection__bubble.-text06 {
  width: 260.0625px;
  top: 446.025px;
  right: 54.8625px;
}
.trial__improve {
  border: 2.85px solid #fff;
  border-radius: 7.125px;
  background-color: rgba(255, 255, 255, 0.35);
  padding: 22.8px 0;
}
.trial__image {
  padding-top: 15.675px;
  background-color: #fff;
  border-radius: 7.125px;
  overflow: hidden;
  display: block;
}
.trial__image img {
  opacity: 0;
  width: 100%;
}
.terms_box {
  border: solid 5.7px #000;
  border-radius: 14.25px;
  padding: 0 24.225px;
}
.explain_title {
  padding: 22.8px 0;
  margin: 0 -24.225px;
}
.explain_title::after {
  right: 31.35px;
  width: 28.5px;
  height: 28.5px;
}
.explain_title span {
  width: 171px;
}
.explain_main {
  padding: 49.875px 0;
  border-top: 2.85px solid #000;
}
.explain_logo {
  margin: 0 16% 31.35px;
}
.explain_age {
  margin: 0 7% 9.975px;
}
.explain_mes {
  font-size: 22.8px;
  margin: 0 0 38.475px;
}
.explain_list {
  margin: 0 0 35.625px;
}
.explain_list_box {
  padding: 19.95px 0;
  border-radius: 14.25px;
}
.explain_list_no {
  border: 2.85px solid #000;
  border-radius: 142.5px;
  padding: 2.85px 0;
  margin: 0 6% 27.075px;
  font-size: 21.375px;
}
.explain_list_img {
  margin: 0 0 25.65px;
  padding: 0 12.825px;
}
.explain_list_mes {
  font-size: 17.1px;
}
.explain_list_come {
  font-size: 17.1px;
}
.explain_mes2 {
  font-size: 22.8px;
  margin: 0 0 18.525px;
}
.explain_btn a {
  margin: 0 -24.225px -18.525px;
}
.anchor-block {
  display: block;
  opacity: 0;
  height: 32.5px;
  width: 100%;
  margin-top: -32.5px;
}
.anchor-block.-solution {
  background-color: #ff9130;
  opacity: 1;
  height: 0px;
  margin-top: 0px;
}