@charset "UTF-8";

/* =============================================
kv
============================================= */
.kv {
  position: relative;
}

.kv__title {
  position: absolute;
  top: 6.7%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  left: 50%;
  transform: translateX(-50%);
  top: 6.7%;
}
@media screen and (max-width: 750px) {
  .kv__title {
    width: calc(700 / 750 * 100vw);
  }
}

/* =============================================
intro
============================================= */
.intro {
  position: relative;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url(../../images2026/youji_shogaku/bg_intro.webp?20260315);
  padding-bottom: calc(204px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .intro {
    padding-bottom: calc(204 / 390 * 100vw);
  }
}

.intro_copy {
  display: block;
  text-align: right;
  font-size: calc(10.79px * (750 / 390));
  color: #AEACAC;
  letter-spacing: -0.03em;
  padding-top: calc(8px * (750 / 390));
  padding-right: calc(8px * (750 / 390));
  padding-bottom: calc(56px * (750 / 390));
  line-height: 1.2;
}
@media screen and (max-width: 750px) {
  .intro_copy {
    padding-top: calc(8 / 390 * 100vw);
    padding-right: calc(8 / 390 * 100vw);
    padding-bottom: calc(56 / 390 * 100vw);
    font-size: calc(10.79 / 390 * 100vw);
  }
}

.intro__heading {
  display: block;
  position: relative;
  width: calc(321px * (750 / 390));
  margin-top: calc(120px * (750 / 390));
  margin-inline: auto;
}
@media screen and (max-width: 750px) {
  .intro__heading {
    width: calc(321 / 390 * 100vw);
    margin-top: calc(120 / 390 * 100vw);
  }
}

.intro__img {
  display: block;
  margin-inline: auto;
  width: 698px;
  margin-top: calc(24px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .intro__img {
    width: calc(698 / 750 * 100vw);
    margin-top: calc(24 / 390 * 100vw);
  }
}

.intro__text {
  text-align: center;
  margin-top: calc(32px * (750 / 390));
  font-weight: 900;
  font-size: calc(16px * (750 / 390));
  line-height: 180%;
  color: #0D59A4;
}
@media screen and (max-width: 750px) {
  .intro__text {
    margin-top: calc(32 / 390 * 100vw);
    font-size: calc(16 / 390 * 100vw);
  }
}

/* =============================================
membership-benefit
============================================= */
.membership-benefit {
  position: relative;
  z-index: 1;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url(../../images2026/youji_shogaku/bg_membership_benefit.webp);
  margin-top: calc(-70px * (750 / 390));
  padding-top: calc(84px * (750 / 390));
  padding-bottom: calc(175px * (750 / 390));
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  .membership-benefit {
    margin-top: calc(-70 / 390 * 100vw);
    padding-top: calc(84 / 390 * 100vw);
    padding-bottom: calc(175 / 390 * 100vw);
  }
}

.membership-benefit__heading1 {
  display: block;
  width: 688px;
  margin-inline: auto;
}
@media screen and (max-width: 750px) {
  .membership-benefit__heading1 {
    width: calc(688 / 750 * 100vw);
  }
}

.membership-benefit__heading2 {
  display: block;
  width: 688px;
  margin-top: calc(64px * (750 / 390));
  margin-inline: auto;
}
@media screen and (max-width: 750px) {
  .membership-benefit__heading2 {
    width: calc(688 / 750 * 100vw);
    margin-top: calc(64 / 390 * 100vw);
  }
}

.membership-benefit__heading_sub1 {
  display: block;
  width: 662px;
  margin-inline: auto;
  margin-top: calc(8px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .membership-benefit__heading_sub1 {
    width: calc(662 / 750 * 100vw);
    margin-top: calc(8 / 390 * 100vw);
  }
}

.membership-benefit__image1 {
  display: block;
  width: calc(365px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .membership-benefit__image1 {
    width: calc(365 / 390 * 100vw);
  }
}

.membership-benefit__image2 {
  position: relative;
  display: block;
  width: 100%;
  margin-top: calc(25px * (750 / 390));
  margin-bottom: calc(53px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .membership-benefit__image2 {
    margin-top: calc(25 / 390 * 100vw);
    margin-bottom: calc(53 / 390 * 100vw);
  }
}

.membership-benefit__image2 .btn-detail {
  position: absolute;
  bottom: 0;
  right: calc(24px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .membership-benefit__image2 .btn-detail {
    right: calc(24 / 390 * 100vw);
  }
}

.membership-benefit__image2 .text-note {
  position: absolute;
  left: calc(26px * (750 / 390));
  bottom: 0;
}
@media screen and (max-width: 750px) {
  .membership-benefit__image2 .text-note {
    left: calc(26 / 390 * 100vw);
  }
}

.membership-benefit__items {
  position: relative;
  width: 100%;
  height: calc(733px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .membership-benefit__items {
    height: calc(733 / 390 * 100vw);
  }
}

.membership-benefit__items.is-shogaku {
  height: calc(806px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .membership-benefit__items.is-shogaku {
    height: calc(806 / 390 * 100vw);
  }
}

.membership-benefit__item {
  position: absolute;
  z-index: 1;
}

.membership-benefit__item01 {
  top: calc(26px * (750 / 390));
  left: calc(-4px * (750 / 390));
  width: 279px;
}
@media screen and (max-width: 750px) {
  .membership-benefit__item01 {
    top: calc(26 / 390 * 100vw);
    left: calc(-4 / 390 * 100vw);
    width: calc(279 / 750 * 100vw);
  }
}

.membership-benefit__item02 {
  top: calc(6px * (750 / 390));
  right: 0;
  width: 504px;
}
@media screen and (max-width: 750px) {
  .membership-benefit__item02 {
    top: calc(6 / 390 * 100vw);
    width: calc(504 / 750 * 100vw);
  }
}

.membership-benefit__item02 .text-note {
  position: absolute;
  right: calc(18px * (750 / 390));
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .membership-benefit__item02 .text-note {
    right: calc(18 / 390 * 100vw);
    gap: calc(4 / 390 * 100vw);
  }
}

.membership-benefit__item03 {
  z-index: 2;
  top: calc(234px * (750 / 390));
  left: calc(2px * (750 / 390));
  width: 504px;
}
@media screen and (max-width: 750px) {
  .membership-benefit__item03 {
    top: calc(234 / 390 * 100vw);
    left: calc(2 / 390 * 100vw);
    width: calc(504 / 750 * 100vw);
  }
}

.membership-benefit__item04 {
  z-index: 1;
  top: calc(301px * (750 / 390));
  right: calc(-7px * (750 / 390));
  width: 279px;
}
@media screen and (max-width: 750px) {
  .membership-benefit__item04 {
    top: calc(301 / 390 * 100vw);
    right: calc(-7 / 390 * 100vw);
    width: calc(279 / 750 * 100vw);
  }
}

.membership-benefit__item04 .text-note {
  position: absolute;
  right: calc(31px * (750 / 390));
  bottom: calc(-10px * (750 / 390));
  transform: translate(0, 100%);
}
@media screen and (max-width: 750px) {
  .membership-benefit__item04 .text-note {
    right: calc(31 / 390 * 100vw);
    bottom: calc(-10 / 390 * 100vw);
  }
}

.membership-benefit__item05 {
  z-index: 1;
  top: calc(504px * (750 / 390));
  left: calc(-12px * (750 / 390));
  width: 279px;
}
@media screen and (max-width: 750px) {
  .membership-benefit__item05 {
    top: calc(504 / 390 * 100vw);
    left: calc(-12 / 390 * 100vw);
    width: calc(279 / 750 * 100vw);
  }
}

.membership-benefit__item05 .text-note {
  padding-top: calc(42px * (750 / 390));
  padding-left: calc(28px * (750 / 390));
  white-space: nowrap;
}
@media screen and (max-width: 750px) {
  .membership-benefit__item05 .text-note {
    padding-top: calc(42 / 390 * 100vw);
    padding-left: calc(28 / 390 * 100vw);
  }
}

.membership-benefit__item06 {
  z-index: 2;
  top: calc(461px * (750 / 390));
  right: calc(3px * (750 / 390));
  width: 500px;
}
@media screen and (max-width: 750px) {
  .membership-benefit__item06 {
    top: calc(461 / 390 * 100vw);
    right: calc(3 / 390 * 100vw);
    width: calc(500 / 750 * 100vw);
  }
}

.membership-benefit__item06 .btn-detail {
  position: absolute;
  right: calc(15px * (750 / 390));
  bottom: calc(18px * (750 / 390));
  translate: 0 100%;
}
@media screen and (max-width: 750px) {
  .membership-benefit__item06 .btn-detail {
    right: calc(15 / 390 * 100vw);
    bottom: calc(18 / 390 * 100vw);
  }
}

.membership-benefit__items.is-shogaku .membership-benefit__item01 {
  top: calc(40px * (750 / 390));
  left: calc(32px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .membership-benefit__items.is-shogaku .membership-benefit__item01 {
    top: calc(40 / 390 * 100vw);
    left: calc(32 / 390 * 100vw);
  }
}

.membership-benefit__items.is-shogaku .membership-benefit__item01 .text-note {
  position: absolute;
  bottom: calc(-16px * (750 / 390));
  left: 0;
  transform: translate(0, 100%);
}
@media screen and (max-width: 750px) {
  .membership-benefit__items.is-shogaku .membership-benefit__item01 .text-note {
    bottom: calc(-16 / 390 * 100vw);
  }
}

.membership-benefit__items.is-shogaku .membership-benefit__item02 {
  width: 354px;
  top: 0;
  right: calc(28px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .membership-benefit__items.is-shogaku .membership-benefit__item02 {
    width: calc(354 / 750 * 100vw);
    top: 0;
    right: calc(28 / 390 * 100vw);
  }
}

.membership-benefit__items.is-shogaku .membership-benefit__item03 {
  width: 354px;
  top: calc(262px * (750 / 390));
  left: calc(28px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .membership-benefit__items.is-shogaku .membership-benefit__item03 {
    width: calc(354 / 750 * 100vw);
    top: calc(262 / 390 * 100vw);
    left: calc(28 / 390 * 100vw);
  }
}

.membership-benefit__items.is-shogaku .membership-benefit__item04 {
  top: calc(339px * (750 / 390));
  right: calc(32px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .membership-benefit__items.is-shogaku .membership-benefit__item04 {
    top: calc(339 / 390 * 100vw);
    right: calc(32 / 390 * 100vw);
  }
}

.membership-benefit__items.is-shogaku .membership-benefit__item04 .text-note {
  position: absolute;
  bottom: calc(-16px * (750 / 390));
  right: 0;
  transform: translate(0, 100%);
}
@media screen and (max-width: 750px) {
  .membership-benefit__items.is-shogaku .membership-benefit__item04 .text-note {
    bottom: calc(-16 / 390 * 100vw);
  }
}

.membership-benefit__items.is-shogaku .membership-benefit__item05 {
  top: calc(587px * (750 / 390));
  left: calc(32px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .membership-benefit__items.is-shogaku .membership-benefit__item05 {
    top: calc(587 / 390 * 100vw);
    left: calc(32 / 390 * 100vw);
  }
}

.membership-benefit__items.is-shogaku .membership-benefit__item05 .text-note {
  position: absolute;
  bottom: calc(-16px * (750 / 390));
  left: 0;
  transform: translate(0, 100%);
  padding: 0 !important;
}
@media screen and (max-width: 750px) {
  .membership-benefit__items.is-shogaku .membership-benefit__item05 .text-note {
    bottom: calc(-16 / 390 * 100vw);
  }
}

.membership-benefit__items.is-shogaku .membership-benefit__item06 {
  width: 354px;
  top: calc(510px * (750 / 390));
  right: calc(28px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .membership-benefit__items.is-shogaku .membership-benefit__item06 {
    width: calc(354 / 750 * 100vw);
    top: calc(510 / 390 * 100vw);
    right: calc(28 / 390 * 100vw);
  }
}

.membership-benefit__items.is-shogaku .membership-benefit__item06 .btn-detail {
  bottom: 0;
  right: calc(-20px * (750 / 390));
  translate: 0 0;
}
@media screen and (max-width: 750px) {
  .membership-benefit__items.is-shogaku .membership-benefit__item06 .btn-detail {
    right: calc(-20 / 390 * 100vw);
  }
}

/* =============================================
request-benefit
============================================= */
.request-benefit {
  background-image: url(../../images2026/youji_shogaku/bg_request_benefit.webp);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
  z-index: 2;
  margin-top: calc(-96px * (750 / 390));
  padding-top: calc(82px * (750 / 390));
  padding-bottom: calc(135px * (750 / 390));
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  .request-benefit {
    margin-top: calc(-96 / 390 * 100vw);
    padding-top: calc(82 / 390 * 100vw);
    padding-bottom: calc(135 / 390 * 100vw);
  }
}

.request-benefit__heading {
  display: block;
  margin-inline: auto;
  width: 628px;
}
@media screen and (max-width: 750px) {
  .request-benefit__heading {
    width: calc(628 / 750 * 100vw);
  }
}

.request-benefit__image {
  display: block;
  margin-left: auto;
  width: 688px;
}
@media screen and (max-width: 750px) {
  .request-benefit__image {
    width: calc(688 / 750 * 100vw);
  }
}

.request-benefit__items {
  position: relative;
  margin-bottom: calc(46px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .request-benefit__items {
    margin-bottom: calc(46 / 390 * 100vw);
  }
}

.request-benefit__items .btn-detail {
  position: absolute;
  bottom: 0;
  left: calc(24px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .request-benefit__items .btn-detail {
    left: calc(24 / 390 * 100vw);
  }
}

.request-benefit__item img {
  position: relative;
  width: 685px;
  display: inline-block;
  transition: transform 1s cubic-bezier(0.7, 0, 0.3, 1);
}
@media screen and (max-width: 750px) {
  .request-benefit__item img {
    width: calc(685 / 750 * 100vw);
  }
}

.request-benefit__item01 img {
  left: calc(-16px * (750 / 390));
  transform: translate(50%, 0%) rotate(7.27deg);
}
@media screen and (max-width: 750px) {
  .request-benefit__item01 img {
    left: calc(-16 / 390 * 100vw);
  }
}

.is-visible .request-benefit__item01 img {
  transform: translate(0, 0) rotate(0);
}

.request-benefit__item01 .text-note {
  padding-left: calc(300px * (750 / 390));
  margin-top: calc(-17px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .request-benefit__item01 .text-note {
    padding-left: calc(300 / 390 * 100vw);
    margin-top: calc(-17 / 390 * 100vw);
  }
}

.request-benefit__item02 {
  text-align: right;
}

.request-benefit__item02 img {
  right: calc(-16px * (750 / 390));
  transform: translate(-50%, 0%) rotate(-7.27deg);
}
@media screen and (max-width: 750px) {
  .request-benefit__item02 img {
    right: calc(-16 / 390 * 100vw);
  }
}

.is-visible .request-benefit__item02 img {
  transform: translate(0, 0) rotate(0);
}

.request-benefit__item02 .text-note {
  padding-left: calc(190px * (750 / 390));
  margin-top: calc(17px * (390 / 750));
  text-align: left;
}
@media screen and (max-width: 750px) {
  .request-benefit__item02 .text-note {
    padding-left: calc(190 / 390 * 100vw);
    margin-top: calc(17 / 390 * 100vw);
  }
}

/* =============================================
.campaign
============================================= */
.campaign {
  position: relative;
  z-index: 3;
  background-color: #0E519F;
  border-top-left-radius: calc(20px * (750 / 390));
  border-top-right-radius: calc(20px * (750 / 390));
  margin-top: calc(-27px * (750 / 390));
  padding-top: calc(55px * (750 / 390));
  padding-bottom: calc(84px * (750 / 390));
  padding-inline: calc(16px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .campaign {
    border-top-left-radius: calc(20 / 390 * 100vw);
    border-top-right-radius: calc(20 / 390 * 100vw);
    margin-top: calc(-27 / 390 * 100vw);
    padding-top: calc(55 / 390 * 100vw);
    padding-bottom: calc(84 / 390 * 100vw);
    padding-inline: calc(16 / 390 * 100vw);
  }
}

.campaign__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 523px;
  z-index: 1;
}
@media screen and (max-width: 750px) {
  .campaign__label {
    width: calc(523 / 750 * 100vw);
  }
}

.campaign__heading1 {
  display: flex;
  flex-direction: column;
  gap: calc(2px * (750 / 390));
  text-align: center;
  color: #FFF;
  font-weight: 600;
  line-height: 1.2;
}
@media screen and (max-width: 750px) {
  .campaign__heading1 {
    gap: calc(2 / 390 * 100vw);
  }
}

.campaign__heading1 span:first-child {
  font-size: calc(20px * (750 / 390));
  letter-spacing: 0.3em;
}
@media screen and (max-width: 750px) {
  .campaign__heading1 span:first-child {
    font-size: calc(20 / 390 * 100vw);
  }
}

.campaign__heading1 span:last-child {
  font-size: calc(32px * (750 / 390));
  letter-spacing: 0.1em;
}
@media screen and (max-width: 750px) {
  .campaign__heading1 span:last-child {
    font-size: calc(32 / 390 * 100vw);
  }
}

.campaign__heading2 {
  display: block;
  width: 420px;
  margin-inline: auto;
  margin-top: calc(35px * (750 / 390));
  margin-bottom: calc(32px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .campaign__heading2 {
    width: calc(420 / 750 * 100vw);
    margin-top: calc(35 / 390 * 100vw);
    margin-bottom: calc(32 / 390 * 100vw);
  }
}

.campaign__items {
  position: relative;
  background-color: #FFF1BB;
  border-radius: calc(10px * (750 / 390));
  padding-block: calc(40px * (750 / 390));
  padding-inline: calc(16px * (750 / 390));
  margin-bottom: calc(40px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .campaign__items {
    border-radius: calc(10 / 390 * 100vw);
    padding-block: calc(40 / 390 * 100vw);
    padding-inline: calc(16 / 390 * 100vw);
    margin-bottom: calc(40 / 390 * 100vw);
  }
}

.campaign__items .text-note {
  margin-top: calc(4px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .campaign__items .text-note {
    margin-top: calc(4 / 390 * 100vw);
  }
}

.campaign__item {
  width: 626px;
  margin-inline: auto;
}
@media screen and (max-width: 750px) {
  .campaign__item {
    width: calc(626 / 750 * 100vw);
  }
}

.campaign__item .item-label {
  margin-bottom: calc(8px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .campaign__item .item-label {
    margin-bottom: calc(8 / 390 * 100vw);
  }
}

.campaign__item02 {
  margin-top: calc(16px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .campaign__item02 {
    margin-top: calc(16 / 390 * 100vw);
  }
}

.campaign__item03 {
  margin-top: calc(32px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .campaign__item03 {
    margin-top: calc(32 / 390 * 100vw);
  }
}