.heading-l2-content .no {
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.1em;
  font-weight: 900;
  color: var(--color-white);
  text-shadow: 2px 2px 0px var(--color-font-shadow);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/common/bg_title@sp.webp);
  aspect-ratio: 473/180;
  width: 63.0666666667vw;
  font-size: 8.5333333333vw;
  padding-bottom: 2.6666666667vw;
}

.heading-l3-content > div .no {
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.1em;
  font-weight: 900;
  color: var(--color-white);
  text-shadow: 2px 2px 0px var(--color-font-shadow);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/common/bg_title_s@sp.webp);
  aspect-ratio: 319/101;
  width: 42.5333333333vw;
  font-size: 4.8vw;
  padding-bottom: 0.6666666667vw;
}

@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(min(-20px, min(calc(-20 / 768 * 100vh), calc(-20 / 1440 * 100vw))));
  }
}

.cmn-grouping-l2 .cmn-grouping-section-box {
  background: none;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}

.heading-l2 {
  position: fixed;
  inset: 0;
  aspect-ratio: 750/1340;
}

.heading-l2 .heading-bg {
  position: absolute;
  inset: 0;
  width: 100%;
}

.heading-l2 .heading-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.heading-l3 {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 62.6666666667vw;
}

.heading-l3 .heading-bg-img {
  position: absolute;
  inset: 0;
}

.heading-l3 .heading-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.heading-l2-content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  aspect-ratio: 750/1340;
  gap: 5.3333333333vw;
  margin-bottom: -31px;
}

.heading-l2-content .no {
  transform: translateY(-8vw);
}

.heading-l2-content .logo {
  transform: translateY(-8vw);
  width: 90.6666666667vw;
  will-change: transform;
  filter: drop-shadow(0 1.0666666667vw 2.6666666667vw rgba(0, 0, 0, 0.25)) drop-shadow(0 2.6666666667vw 8vw rgba(64, 98, 164, 0.45)) drop-shadow(0 1.0666666667vw 2.6666666667vw rgba(0, 0, 0, 0.25)) drop-shadow(0 2.6666666667vw 8vw rgba(64, 98, 164, 0.45));
}

.heading-l3-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 62.6666666667vw;
  gap: 6.6666666667vw;
  margin-bottom: -31px;
}

.heading-l3-content > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2.6666666667vw;
}

.heading-l3-content > div .logo {
  width: 44.9333333333vw;
  will-change: transform;
  filter: drop-shadow(0 1.0666666667vw 2.6666666667vw rgba(0, 0, 0, 0.25)) drop-shadow(0 2.6666666667vw 8vw rgba(64, 98, 164, 0.45)) drop-shadow(0 1.0666666667vw 2.6666666667vw rgba(0, 0, 0, 0.25)) drop-shadow(0 2.6666666667vw 8vw rgba(64, 98, 164, 0.45));
}

.heading-l3-content h1 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 2.5em;
  line-height: 1.25;
  color: var(--color-white);
  text-shadow: 4px 4px 0 rgba(88, 88, 88, 0.6);
  font-weight: 900;
  margin-block: calc((1em - 1lh) / 2);
  letter-spacing: 0.05em;
  font-size: 8.2666666667vw;
}

.container-l2,
.container-l3 {
  position: relative;
  z-index: 2;
  --bg-height: 30px;
  --bg-width: 1960px;
  mask-image: url("../img/common/footer_mask.svg"), linear-gradient(to bottom, rgba(0, 0, 0, 0) var(--bg-height), rgb(0, 0, 0) var(--bg-height));
  -webkit-mask-image: url("../img/common/footer_mask.svg"), linear-gradient(to bottom, rgba(0, 0, 0, 0) var(--bg-height), rgb(0, 0, 0) var(--bg-height));
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-position: left top, bottom;
  -webkit-mask-position: left top, bottom;
  mask-size: var(--bg-width) calc(var(--bg-height) + 1px), 100% 100%;
  -webkit-mask-size: var(--bg-width) calc(var(--bg-height) + 1px), 100% 100%;
}

.container-l2 .fixed-bg,
.container-l3 .fixed-bg {
  position: sticky;
  top: 0;
  height: calc(100lvh + 31px);
  margin-bottom: -100lvh;
  overflow: hidden;
}

.container-l2 .fixed-bg picture,
.container-l2 .fixed-bg img,
.container-l3 .fixed-bg picture,
.container-l3 .fixed-bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.container-l2 .fixed-bg img,
.container-l3 .fixed-bg img {
  object-fit: cover;
}

.container-l2 .inner,
.container-l3 .inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 92vw;
  gap: 20vw;
  padding: 20vw 0;
}

.lead-wrap {
  position: relative;
}

.lead-wrap .lead {
  line-height: 1.66;
  text-align: center;
  font-size: 6.4vw;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--color-white);
  -webkit-text-stroke: 1.3333333333vw #15a8c4;
  text-stroke: 1.3333333333vw #15a8c4;
  filter: drop-shadow(0px 0.8vw 0px #4062a4);
  paint-order: stroke;
}

.ill-wrap {
  pointer-events: none;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%;
  aspect-ratio: 750/1340;
}

.ill-wrap .ill1 {
  position: absolute;
  width: 46.9333333333vw;
  bottom: -6.6666666667vw;
  left: 1.6vw;
}

.ill-wrap .ill2 {
  position: absolute;
  width: 22.2666666667vw;
  bottom: -4vw;
  right: 3.4666666667vw;
}

footer {
  padding-top: 18.6666666667vw;
  position: relative;
  --bg-height: 30px;
  --bg-width: 1960px;
}

footer::before {
  content: "";
  background: var(--color-bg);
  position: absolute;
  left: 0;
  top: calc(var(--bg-height) * -1);
  width: 100%;
  height: calc(var(--bg-height) + 1px);
  mask-image: url("../img/common/footer_mask.svg"), linear-gradient(to bottom, rgba(0, 0, 0, 0) var(--bg-height), rgb(0, 0, 0) var(--bg-height));
  -webkit-mask-image: url("../img/common/footer_mask.svg"), linear-gradient(to bottom, rgba(0, 0, 0, 0) var(--bg-height), rgb(0, 0, 0) var(--bg-height));
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-position: left top, bottom;
  -webkit-mask-position: left top, bottom;
  mask-size: var(--bg-width) calc(var(--bg-height) + 1px), 100% 100%;
  -webkit-mask-size: var(--bg-width) calc(var(--bg-height) + 1px), 100% 100%;
}

@media screen and (min-width: 768px) {
  .heading-l2-content .no {
    background-image: url(../img/common/bg_title@pc.webp);
    aspect-ratio: 261/91;
    width: min(261px, min( calc(261 / 1440 * 100vw)));
    font-size: min(32px, min( calc(32 / 1440 * 100vw)));
    padding-bottom: min(10px, min( calc(10 / 1440 * 100vw)));
  }

  .heading-l3-content > div .no {
    background-image: url(../img/common/bg_title_s@pc.webp);
    aspect-ratio: 362/122;
    width: min(181px, min( calc(181 / 1440 * 100vw)));
    font-size: min(24px, min( calc(24 / 1440 * 100vw)));
    padding-bottom: min(10px, min( calc(10 / 1440 * 100vw)));
  }

  .cmn-grouping-l2 .cmn-grouping-section-box {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
  }

  .cmn-card-container {
    justify-content: flex-start;
    width: min(954px, min( calc(954 / 1440 * 100vw)));
  }

  .heading-l2 {
    aspect-ratio: 1440/800;
  }

  .heading-l3 {
    height: min(370px, min( calc(370 / 1440 * 100vw)));
  }

  .heading-l2-content {
    aspect-ratio: 1440/800;
    margin-bottom: -2.1527777778vw;
    gap: min(10px, min( calc(10 / 1440 * 100vw)));
  }

  .heading-l2-content .no {
    transform: translateY(max(-30px, max( calc(-30 / 1440 * 100vw))));
  }

  .heading-l2-content .logo {
    filter: drop-shadow(0 min(8px, min( calc(8 / 1440 * 100vw))) min(20px, min( calc(20 / 1440 * 100vw))) rgba(0, 0, 0, 0.25)) drop-shadow(0 min(20px, min( calc(20 / 1440 * 100vw))) min(60px, min( calc(60 / 1440 * 100vw))) rgba(64, 98, 164, 0.45)) drop-shadow(0 min(8px, min( calc(8 / 1440 * 100vw))) min(20px, min( calc(20 / 1440 * 100vw))) rgba(0, 0, 0, 0.25)) drop-shadow(0 min(20px, min( calc(20 / 1440 * 100vw))) min(60px, min( calc(60 / 1440 * 100vw))) rgba(64, 98, 164, 0.45));
  }

  .heading-l2-content .logo {
    width: min(680px, min( calc(680 / 1440 * 100vw)));
    transform: translateY(max(-30px, max( calc(-30 / 1440 * 100vw))));
  }

  .heading-l3-content {
    height: min(370px, min( calc(370 / 1440 * 100vw)));
    gap: min(20px, min( calc(20 / 1440 * 100vw)));
    margin-bottom: -2.1527777778vw;
  }

  .heading-l3-content > div {
    padding-top: min(10px, min( calc(10 / 1440 * 100vw)));
  }

  .heading-l3-content > div .logo {
    filter: drop-shadow(0 min(8px, min( calc(8 / 1440 * 100vw))) min(20px, min( calc(20 / 1440 * 100vw))) rgba(0, 0, 0, 0.25)) drop-shadow(0 min(20px, min( calc(20 / 1440 * 100vw))) min(60px, min( calc(60 / 1440 * 100vw))) rgba(64, 98, 164, 0.45)) drop-shadow(0 min(8px, min( calc(8 / 1440 * 100vw))) min(20px, min( calc(20 / 1440 * 100vw))) rgba(0, 0, 0, 0.25)) drop-shadow(0 min(20px, min( calc(20 / 1440 * 100vw))) min(60px, min( calc(60 / 1440 * 100vw))) rgba(64, 98, 164, 0.45));
  }

  .heading-l3-content > div .logo {
    width: min(380px, min( calc(380 / 1440 * 100vw)));
  }

  .heading-l3-content h1 {
    font-size: min(45px, min( calc(45 / 1440 * 100vw)));
  }

  .container-l2,
  .container-l3 {
    --bg-height: calc(30 / 1440 * 100vw);
    --bg-width: calc(1960 / 1440 * 100vw);
  }

  .container-l2 .fixed-bg,
  .container-l3 .fixed-bg {
    height: calc(100lvh + 2.1527777778vw);
  }

  .container-l2 .inner,
  .container-l3 .inner {
    width: min(1024px, min( calc(1024 / 1440 * 100vw)));
    gap: min(120px, min( calc(120 / 1440 * 100vw)));
    padding: min(120px, min( calc(120 / 1440 * 100vw))) 0;
  }

  .lead-wrap .lead {
    font-size: min(32px, min( calc(32 / 1440 * 100vw)));
    -webkit-text-stroke: min(8px, min( calc(8 / 1440 * 100vw))) #15a8c4;
    text-stroke: min(8px, min( calc(8 / 1440 * 100vw))) #15a8c4;
    filter: drop-shadow(0px min(5px, min( calc(5 / 1440 * 100vw))) 0px #4062a4);
  }

  .ill-wrap {
    aspect-ratio: 1440/800;
  }

  .ill-wrap .ill1 {
    left: auto;
    right: 50%;
    margin-right: 24vw;
    width: min(500px, min( calc(500 / 1440 * 100vw)));
    bottom: max(-205px, max( calc(-205 / 1440 * 100vw)));
    margin-right: min(180px, min( calc(180 / 1440 * 100vw)));
  }

  .ill-wrap .ill2 {
    right: auto;
    left: 50%;
    margin-left: 48vw;
    width: min(233px, min( calc(233 / 1440 * 100vw)));
    bottom: max(-420px, max( calc(-420 / 1440 * 100vw)));
    margin-left: min(360px, min( calc(360 / 1440 * 100vw)));
  }

  footer {
    --bg-height: calc(30 / 1440 * 100vw);
    --bg-width: calc(1960 / 1440 * 100vw);
    padding-top: min(120px, min( calc(120 / 1440 * 100vw)));
  }
}

@media screen and (max-width: 767.8px) {
  .heading-l3-content > div .no {
    width: 21.6vw;
    font-size: 3.7333333333vw;
  }

  .lead-wrap {
    margin-left: -1.3333333333vw;
    margin-right: -1.3333333333vw;
  }
}