@charset "UTF-8";
/* reset
---------------------------------------- */
*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

* {
  margin: 0;
}

html, body {
  font-family: "M PLUS Rounded 1c", sans-serif;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
}
@media only screen and (max-width: 1200px) {
  p {
    font-size: max(1.317715959vw, 0.9375rem);
  }
}
@media only screen and (max-width: 767px) {
  p {
    font-size: max(4vw, 0.9375rem);
  }
}

#root, #__next {
  isolation: isolate;
}

/* main
---------------------------------------- */
html:is(.is-fixed) {
  overflow: hidden;
}

/* main
---------------------------------------- */
main {
  overflow: hidden;
}

/* inner
---------------------------------------- */
.inner {
  max-width: 75rem;
  padding: 0 20px;
  margin: 0 auto;
}

/* section
---------------------------------------- */
.sec {
  padding-bottom: 5rem;
}
@media only screen and (max-width: 1200px) {
  .sec {
    padding-bottom: max(5.8565153734vw, 1.75rem);
  }
}
@media only screen and (max-width: 767px) {
  .sec {
    padding-bottom: max(7.4666666667vw, 1.75rem);
  }
}

/* header
---------------------------------------- */
@media only screen and (max-width: 767px) {
  html {
    position: relative;
  }
  html::before {
    display: block;
    content: "";
    width: 100vw;
    height: 100dvh;
    background: url(../images/menu_bg_sp_01.svg) no-repeat center/cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    visibility: hidden;
    opacity: 0;
  }
  html:is(.is-fixed)::before {
    visibility: visible;
    opacity: 1;
  }
}

.header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  position: fixed;
  top: 0.75rem;
  left: 0;
  right: 0;
  z-index: 100;
  /* hamburger-button
  ---------------------------------------- */
  /* global nav
  ---------------------------------------- */
}
@media only screen and (max-width: 767px) {
  .header {
    padding-left: 0.4375rem;
    padding-right: 0.4375rem;
    top: 0.625rem;
  }
}
.header__logo {
  width: 100%;
  max-width: 18.8125rem;
}
@media only screen and (max-width: 1080px) {
  .header__logo {
    width: auto;
    max-width: none;
    height: 2.75rem;
  }
}
@media only screen and (max-width: 840px) {
  .header__logo {
    height: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .header__logo {
    width: 100%;
    max-width: 16.6875rem;
    height: auto;
  }
}
.header__logo-link {
  display: block;
  width: 100%;
  height: 100%;
}
.header__logo-figure {
  width: 100%;
  height: 100%;
}
.header__logo-figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (max-width: 1080px) {
  .header__logo-figure img {
    width: auto;
    height: 2.75rem;
  }
}
@media only screen and (max-width: 840px) {
  .header__logo-figure img {
    height: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .header__logo-figure img {
    width: 100%;
    max-width: 16.6875rem;
    height: auto;
  }
}
.header__hamburger-button {
  display: none;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .header__hamburger-button {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    background-color: #FFFFFF;
    border: none;
    border-radius: 50%;
    padding: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
}
.header__hamburger-container, .header__hamburger-icon {
  display: inline-block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.header__hamburger-container {
  width: 2.625rem;
  height: 2.25rem;
  z-index: 10;
}
.header__hamburger-container.is-active .header__hamburger-icon {
  max-width: 27px;
}
.header__hamburger-container.is-active .header__hamburger-icon:nth-child(1) {
  top: 17px;
  left: 1px;
  -webkit-transform: translateY(0.375rem) rotate(-45deg);
          transform: translateY(0.375rem) rotate(-45deg);
}
.header__hamburger-container.is-active .header__hamburger-icon:nth-child(2) {
  opacity: 0;
}
.header__hamburger-container.is-active .header__hamburger-icon:nth-child(3) {
  left: 1px;
  bottom: 20px;
  -webkit-transform: translateY(-0.875rem) rotate(45deg);
          transform: translateY(-0.875rem) rotate(45deg);
}
.header__hamburger-container.is-active .header__hamburger-text {
  left: 16px;
}
.header__hamburger-icon {
  width: 100%;
  max-width: 23px;
  height: 3px;
  background-color: #286EB9;
  border-radius: 2px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  left: 0;
  right: 0;
}
.header__hamburger-icon:nth-child(1) {
  top: 13px;
}
.header__hamburger-icon:nth-child(2) {
  top: 22px;
}
.header__hamburger-icon:nth-child(3) {
  bottom: 26px;
}
.header__hamburger-text {
  position: absolute;
  left: 10px;
  bottom: 8px;
  color: #000000;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.header__nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "M PLUS Rounded 1c", sans-serif;
  position: relative;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  letter-spacing: 0.02em;
}
@media only screen and (max-width: 1180px) {
  .header__nav {
    font-size: 0.75rem;
    gap: 12px;
  }
}
@media only screen and (max-width: 840px) {
  .header__nav {
    font-size: 0.6875rem;
    gap: 12px;
  }
}
@media only screen and (max-width: 767px) {
  .header__nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 32px;
    width: calc(100% - 80px);
    background-color: #FFFFFF;
    border-radius: 60px;
    padding: 3rem 32px 3.25rem;
    color: #286EB9;
    font-size: 0.9375rem;
    letter-spacing: 0.1em;
    position: absolute;
    top: 7.875rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
  }
  .header__nav:is(.is-open) {
    visibility: visible;
    opacity: 1;
  }
}
.header__nav-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
  height: 3.75rem;
  background-color: #FFFFFF;
  border-radius: 100vw;
  padding: 1.25rem 40px;
  list-style: none;
}
@media only screen and (max-width: 1180px) {
  .header__nav-list {
    gap: 18px;
    padding: 1.25rem 32px;
  }
}
@media only screen and (max-width: 1080px) {
  .header__nav-list {
    height: 2.75rem;
  }
}
@media only screen and (max-width: 940px) {
  .header__nav-list {
    gap: 13px;
    padding: 1.25rem 17px;
  }
}
@media only screen and (max-width: 840px) {
  .header__nav-list {
    max-height: 2rem;
    padding: 1rem 17px;
  }
}
@media only screen and (max-width: 767px) {
  .header__nav-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
    height: auto;
    max-height: unset;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
  }
}
.header__nav-link {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.header__nav-link:hover, .header__nav-link:active {
  color: #286EB9;
}
@media only screen and (max-width: 767px) {
  .header__nav-link:hover, .header__nav-link:active {
    color: #000000;
  }
}
.header__nav-event {
  height: 3.75rem;
  background-color: #FFFFFF;
  border-radius: 100vw;
  padding: 1rem 32px 1.25rem 24px;
}
@media only screen and (max-width: 1180px) {
  .header__nav-event {
    padding: 1rem 32px 1.25rem 24px;
  }
}
@media only screen and (max-width: 1080px) {
  .header__nav-event {
    height: 2.75rem;
    padding: 0.5rem 32px 0.5rem 24px;
  }
}
@media only screen and (max-width: 940px) {
  .header__nav-event {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0.5rem 17px 0.5rem 13px;
  }
}
@media only screen and (max-width: 840px) {
  .header__nav-event {
    max-height: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .header__nav-event {
    height: auto;
    background-color: transparent;
    padding: 0;
  }
}
.header__nav-event-link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
  position: relative;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.header__nav-event-link:hover, .header__nav-event-link:active {
  color: #286EB9;
}
@media only screen and (max-width: 767px) {
  .header__nav-event-link:hover, .header__nav-event-link:active {
    color: #000000;
  }
}
.header__nav-event-link::before {
  display: block;
  content: "";
  width: 28px;
  height: 28px;
  background: url(../images/icon_note_01.svg) no-repeat center/contain;
}
@media only screen and (max-width: 940px) {
  .header__nav-event-link::before {
    width: 21px;
    height: 21px;
  }
}
@media only screen and (max-width: 767px) {
  .header__nav-event-link::before {
    display: none;
  }
}

/* footer
---------------------------------------- */
.footer {
  background-color: #F0F8FD;
  padding-top: 5.875rem;
  padding-bottom: 1.3125rem;
}
@media only screen and (max-width: 1200px) {
  .footer {
    padding-top: max(6.8814055637vw, 4rem);
    padding-bottom: max(1.5373352855vw, 1.0625rem);
  }
}
@media only screen and (max-width: 767px) {
  .footer {
    padding-top: max(17.0666666667vw, 4rem);
    padding-bottom: max(4.5333333333vw, 1.0625rem);
  }
}
.footer .footer-link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 40px;
  padding-left: 0;
  margin-bottom: 2.75rem;
  list-style: none;
}
@media only screen and (max-width: 1200px) {
  .footer .footer-link {
    gap: max(2.9282576867vw, 20px);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: max(3.2210834553vw, 2.5rem);
  }
}
@media only screen and (max-width: 767px) {
  .footer .footer-link {
    gap: max(5.6vw, 1.3125rem);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: max(10.6666666667vw, 2.5rem);
  }
}
.footer .footer-link__item {
  width: calc((100% - 80px) / 3);
  max-width: 22.5rem;
}
@media only screen and (max-width: 1200px) {
  .footer .footer-link__item {
    width: max((100% - 5.8565153734vw) / 3, (100% - 2.5rem) / 3);
    max-width: max(26.3543191801vw, 12.5rem);
  }
}
@media only screen and (max-width: 767px) {
  .footer .footer-link__item {
    width: 100%;
    max-width: unset;
  }
}
.footer .footer-sns-link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
  border-bottom: 1px solid #286EB9;
  padding-left: 0;
  padding-bottom: 4.5rem;
  margin-bottom: 2.5rem;
  list-style: none;
}
@media only screen and (max-width: 1200px) {
  .footer .footer-sns-link {
    gap: max(1.4641288433vw, 16px);
    padding-bottom: max(5.270863836vw, 2.5rem);
    margin-bottom: max(2.9282576867vw, 1.875rem);
  }
}
@media only screen and (max-width: 767px) {
  .footer .footer-sns-link {
    gap: max(5.3333333333vw, 16px);
    padding-bottom: max(10.6666666667vw, 2.5rem);
    margin-bottom: max(10.6666666667vw, 2.5rem);
  }
}
.footer .footer-sns-link__item {
  width: calc((100% - 40px) / 3);
  max-width: 2.5625rem;
}
@media only screen and (max-width: 1200px) {
  .footer .footer-sns-link__item {
    width: max((100% - 5.8565153734vw) / 3, 100% - 0.6666666667rem);
  }
}
.footer .footer-logo {
  margin-bottom: 2.125rem;
}
@media only screen and (max-width: 1200px) {
  .footer .footer-logo {
    margin-bottom: max(2.4890190337vw, -1.75rem);
  }
}
@media only screen and (max-width: 767px) {
  .footer .footer-logo {
    margin-bottom: max(8vw, -1.875rem);
  }
}
.footer .footer-logo img {
  width: 12.4375rem;
  margin-left: auto;
  margin-right: auto;
}
.footer .copyright {
  display: block;
  font-size: 0.75rem;
  line-height: 2.4666666667;
  letter-spacing: 0.02em;
  text-align: center;
}
@media only screen and (max-width: 1200px) {
  .footer .copyright {
    font-size: max(0.878477306vw, 0.625rem);
  }
}

/* ttl
---------------------------------------- */
.ttl {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
}
.ttl--primary {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2.375rem;
}
@media only screen and (max-width: 1200px) {
  .ttl--primary {
    margin-bottom: max(2.7818448023vw, 2rem);
  }
}
@media only screen and (max-width: 767px) {
  .ttl--primary {
    margin-bottom: max(4.2666666667vw, 1rem);
  }
}
.ttl--primary .ja {
  font-size: 2.875rem;
  letter-spacing: 0.07em;
  position: relative;
}
@media only screen and (max-width: 1200px) {
  .ttl--primary .ja {
    font-size: max(3.3674963397vw, 2.125rem);
  }
}
@media only screen and (max-width: 767px) {
  .ttl--primary .ja {
    font-size: max(5.8666666667vw, 1.375rem);
  }
}
.ttl--primary .ja::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
}
.ttl--primary:is(.deco-note) .ja::before {
  aspect-ratio: 53/63;
  width: 3.3125rem;
  background: url(../images/pic_note_blue_01.svg) no-repeat center/contain;
  left: -22px;
}
@media only screen and (max-width: 1200px) {
  .ttl--primary:is(.deco-note) .ja::before {
    width: max(3.8799414348vw, 1.5625rem);
    left: max(-1.6105417277vw, -0.8125rem);
  }
}
@media only screen and (max-width: 767px) {
  .ttl--primary:is(.deco-note) .ja::before {
    width: max(6.4vw, 1.8125rem);
    left: max(-3.7333333333vw, -0.8125rem);
  }
}
.ttl--primary:is(.deco-trumpet) .ja::before {
  aspect-ratio: 1/1;
  width: 6.8125rem;
  background: url(../images/pic_trumpet_orange_01.svg) no-repeat center/contain;
  top: calc(50% - 0.5rem);
  left: -14px;
}
@media only screen and (max-width: 1200px) {
  .ttl--primary:is(.deco-trumpet) .ja::before {
    width: max(7.9795021962vw, 2.9375rem);
    left: max(-1.0248901903vw, -0.375rem);
  }
}
@media only screen and (max-width: 767px) {
  .ttl--primary:is(.deco-trumpet) .ja::before {
    width: max(12.5333333333vw, 2.9375rem);
    top: max(50% - 1.3333333333vw, 50% - 0.3125rem);
    left: max(-3.7333333333vw, -0.375rem);
  }
}
.ttl--primary:is(.deco-horn) .ja::before {
  aspect-ratio: 91/110;
  width: 5.6875rem;
  background: url(../images/pic_horn_pink_01.svg) no-repeat center/contain;
  top: calc(50% - 0.375rem);
  left: -31px;
}
@media only screen and (max-width: 1200px) {
  .ttl--primary:is(.deco-horn) .ja::before {
    width: max(6.6617862372vw, 3rem);
    top: max(50% - 0.439238653vw, 50% - 0.1875rem);
    left: max(-2.2693997072vw, -1rem);
  }
}
@media only screen and (max-width: 767px) {
  .ttl--primary:is(.deco-horn) .ja::before {
    width: max(12vw, 2.8125rem);
    top: max(50% + 0.2666666667vw, 50% + 0.0625rem);
    left: max(-4.2666666667vw, -1rem);
    -webkit-transform: rotate(14deg) translate(-100%, -50%);
            transform: rotate(14deg) translate(-100%, -50%);
  }
}
.ttl--primary:is(.deco-harp) .ja::before {
  aspect-ratio: 58/65;
  width: 3.625rem;
  background: url(../images/pic_harp_pink_01.svg) no-repeat center/contain;
  top: calc(50% + 0.25rem);
  left: -24px;
}
@media only screen and (max-width: 1200px) {
  .ttl--primary:is(.deco-harp) .ja::before {
    width: max(4.2459736457vw, 2.125rem);
    top: max(50% + 0.2928257687vw, 50% + 0.125rem);
    left: max(-1.756954612vw, -0.75rem);
  }
}
@media only screen and (max-width: 767px) {
  .ttl--primary:is(.deco-harp) .ja::before {
    width: max(9.0666666667vw, 2.125rem);
    top: max(50% + 9.6vw, 50% + 2.25rem);
    left: max(5.8666666667vw, 1.375rem);
  }
}
.ttl--primary:is(.deco-small-drum) .ja::before {
  aspect-ratio: 55/70;
  width: 4.125rem;
  background: url(../images/pic_small-drum_green_01.svg) no-repeat center/contain;
  top: calc(50% - 1.0625rem);
  left: -29px;
}
@media only screen and (max-width: 1200px) {
  .ttl--primary:is(.deco-small-drum) .ja::before {
    width: max(4.0263543192vw, 2.0625rem);
    top: max(50% + 1.2445095168vw, 50% + 0.5625rem);
    left: max(-2.1229868228vw, -0.9375rem);
  }
}
@media only screen and (max-width: 767px) {
  .ttl--primary:is(.deco-small-drum) .ja::before {
    width: max(10.9333333333vw, 2.5625rem);
    top: max(50% - 3.4666666667vw, 50% - 0.8125rem);
    left: max(-3.2vw, -0.75rem);
  }
}
.ttl--primary:is(.deco-harp-y) .ja::before {
  aspect-ratio: 55/95;
  width: 3.4375rem;
  background: url(../images/pic_harp_pink_yellow_01.svg) no-repeat center/contain;
  top: calc(50% - 1.625rem);
  left: -13px;
}
@media only screen and (max-width: 1200px) {
  .ttl--primary:is(.deco-harp-y) .ja::before {
    width: max(4.0263543192vw, 1.5625rem);
    top: max(50% - 1.9033674963vw, 50% - 0.8125rem);
    left: max(-0.9516837482vw, -0.4375rem);
  }
}
.ttl--primary:is(.ttl--small) .ja {
  font-size: 2.375rem;
}
@media only screen and (max-width: 1200px) {
  .ttl--primary:is(.ttl--small) .ja {
    font-size: max(2.7818448023vw, 1.25rem);
  }
}
@media only screen and (max-width: 767px) {
  .ttl--primary:is(.ttl--small) .ja {
    font-size: max(5.3333333333vw, 1.25rem);
  }
}
.ttl--primary:is(.ttl--small) .en {
  margin-top: 0.0625rem;
  font-size: 1.375rem;
}
@media only screen and (max-width: 1200px) {
  .ttl--primary:is(.ttl--small) .en {
    font-size: max(1.6105417277vw, 0.875rem);
  }
}
@media only screen and (max-width: 767px) {
  .ttl--primary:is(.ttl--small) .en {
    font-size: max(3.7333333333vw, 0.875rem);
  }
}
.ttl--primary:is(.ttl--medium) {
  margin-bottom: 2.9375rem;
}
@media only screen and (max-width: 1200px) {
  .ttl--primary:is(.ttl--medium) {
    margin-bottom: max(3.4407027818vw, 2rem);
  }
}
.ttl--primary:is(.ttl--medium) .ja {
  font-size: 2.5rem;
}
@media only screen and (max-width: 1200px) {
  .ttl--primary:is(.ttl--medium) .ja {
    font-size: max(2.9282576867vw, 1.375rem);
  }
}
@media only screen and (max-width: 767px) {
  .ttl--primary:is(.ttl--medium) .ja {
    font-size: max(5.8666666667vw, 1.375rem);
  }
}
.ttl--primary:is(.ttl--medium) .en {
  margin-top: 0.0625rem;
  font-size: 1.5rem;
}
@media only screen and (max-width: 1200px) {
  .ttl--primary:is(.ttl--medium) .en {
    font-size: max(1.756954612vw, 0.875rem);
  }
}
@media only screen and (max-width: 767px) {
  .ttl--primary:is(.ttl--medium) .en {
    font-size: max(3.7333333333vw, 0.875rem);
  }
}
.ttl--primary .en {
  margin-top: 0.3125rem;
  font-size: 1.5rem;
  letter-spacing: 0.07em;
}
@media only screen and (max-width: 1200px) {
  .ttl--primary .en {
    font-size: max(1.756954612vw, 0.875rem);
  }
}
@media only screen and (max-width: 767px) {
  .ttl--primary .en {
    margin-top: max(0.5333333333vw, 0.125rem);
    font-size: max(3.7333333333vw, 0.875rem);
  }
}
.ttl--secondary {
  margin-bottom: 1.875rem;
  color: #FD774C;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}
@media only screen and (max-width: 1200px) {
  .ttl--secondary {
    margin-bottom: max(2.196193265vw, 1.25rem);
    font-size: max(2.635431918vw, 1.25rem);
  }
}
@media only screen and (max-width: 767px) {
  .ttl--secondary {
    margin-bottom: max(3.7333333333vw, 0.875rem);
    font-size: max(5.3333333333vw, 1.25rem);
    text-align: left;
  }
}

/* color
---------------------------------------- */
*:is(.color-blue) {
  color: #286EB9;
}

*:is(.color-purple) {
  color: #9D25CE;
}

*:is(.color-green) {
  color: #42C757;
}

*:is(.color-pink) {
  color: #F959C2;
}

*:is(.color-orange) {
  color: #FD774C;
}

*:is(.color-yellow) {
  color: #FDC300;
}

*:is(.color-white) {
  color: #FFFFFF;
}

/* link
---------------------------------------- */
.link {
  text-decoration: underline;
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.link:hover, .link:active {
  color: #286EB9;
  text-decoration: none;
}
.link--inner {
  color: #286EB9;
  font-weight: 700;
  text-decoration: underline;
}
.link--inner:hover, .link--inner:active {
  -webkit-text-decoration: noneS;
          text-decoration: noneS;
}
.link--round {
  display: inline-block;
  background-color: #FFFFFF;
  border: 1px solid #286EB9;
  padding: 1.3125rem 2rem;
  border-radius: 100vw;
  color: #286EB9;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1111111111;
  text-align: center;
  letter-spacing: 0.02em;
  text-decoration: none;
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 1200px) {
  .link--round {
    padding: max(1.5373352855vw, 0.625rem) max(2.3426061493vw, 1rem);
    font-size: max(1.317715959vw, 0.9375rem);
  }
}
@media only screen and (max-width: 767px) {
  .link--round {
    padding: max(5.0666666667vw, 0.625rem) max(8.5333333333vw, 1rem);
    font-size: max(4vw, 0.9375rem);
  }
}
.link--round:hover, .link--round:active {
  background-color: #286EB9;
  color: #FFFFFF;
}
.link--size-01 {
  width: 100%;
  max-width: 28rem;
}
@media only screen and (max-width: 1200px) {
  .link--size-01 {
    max-width: max(32.7964860908vw, 18.75rem);
  }
}
@media only screen and (max-width: 767px) {
  .link--size-01 {
    max-width: max(89.6vw, 21rem);
  }
}
.link--size-02 {
  width: 100%;
  max-width: 24.75rem;
}
@media only screen and (max-width: 1200px) {
  .link--size-02 {
    max-width: max(28.9897510981vw, 15.625rem);
  }
}
@media only screen and (max-width: 767px) {
  .link--size-02 {
    max-width: max(89.6vw, 21rem);
  }
}
.link--size-03 {
  width: 100%;
  max-width: 22.5rem;
}
@media only screen and (max-width: 1200px) {
  .link--size-03 {
    max-width: max(26.3543191801vw, 12.5rem);
  }
}
@media only screen and (max-width: 767px) {
  .link--size-03 {
    max-width: unset;
  }
}
.link--external:hover::after {
  background: url(../images/icon_external_white_01.svg) no-repeat center/contain;
}
.link--external::after {
  display: inline-block;
  content: "";
  width: 1.1875rem;
  height: 1.1875rem;
  background: url(../images/icon_external_01.svg) no-repeat center/contain;
  margin-left: 0.625rem;
  vertical-align: sub;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (max-width: 1200px) {
  .link--external::after {
    width: max(1.3909224012vw, 0.875rem);
    height: max(1.3909224012vw, 0.875rem);
  }
}
@media only screen and (max-width: 767px) {
  .link--external::after {
    width: max(4vw, 0.875rem);
    height: max(4vw, 0.875rem);
  }
}
.link--external:is(.link--round)::after {
  position: absolute;
  top: 50%;
  right: 1.875rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (max-width: 1200px) {
  .link--external:is(.link--round)::after {
    right: max(2.196193265vw, 0.9375rem);
  }
}
@media only screen and (max-width: 767px) {
  .link--external:is(.link--round)::after {
    right: max(6.4vw, 1.5rem);
  }
}

/* card
---------------------------------------- */
.card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 2.8125rem 56px;
}
@media only screen and (max-width: 1200px) {
  .card {
    gap: max(3.2942898975vw, 1.25rem) max(4.0995607613vw, 24px);
  }
}
@media only screen and (max-width: 767px) {
  .card {
    gap: max(5.0666666667vw, 1.1875rem) max(6.4vw, 24px);
    margin-top: max(5.3333333333vw, 1.25rem);
  }
}
.card__item {
  width: calc((100% - 56px) / 2);
}
@media only screen and (max-width: 767px) {
  .card__item {
    width: 100%;
  }
}
.card__figure {
  border-radius: 20px;
  margin-bottom: 1.375rem;
}
@media only screen and (max-width: 1200px) {
  .card__figure {
    margin-bottom: max(1.6105417277vw, 0.75rem);
  }
}
@media only screen and (max-width: 767px) {
  .card__figure {
    border-radius: 14px;
    margin-bottom: max(3.2vw, 0.75rem);
  }
}
.card__copy {
  font-weight: 500;
  line-height: 1.6666666667;
  letter-spacing: 0.07em;
}
@media only screen and (max-width: 767px) {
  .card__copy {
    line-height: 1.5;
    letter-spacing: 0.06em;
  }
}

.modal-container {
  counter-reset: num;
}

.modal-cards {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 100px;
  padding-left: 0;
  list-style: none;
}
.modal-cards + .modal-cards {
  margin-top: 5.3125rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards {
    gap: 6.25rem 8vw;
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards {
    gap: 20vw 8vw;
  }
}
@media only screen and (max-width: 540px) {
  .modal-cards {
    gap: max(0.2666666667vw, 6.25rem) 8vw;
  }
}
.modal-cards:is(.col3) .modal-cards__item {
  width: calc((100% - 200px) / 3);
  max-width: 16.625rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards:is(.col3) .modal-cards__item {
    width: calc((100% - 24vw) / 3);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards:is(.col3) .modal-cards__item {
    width: max(36.2666666667vw, 8.5rem);
  }
}
.modal-cards__item {
  position: relative;
  counter-increment: num;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.modal-cards__item:is(.fig-01, .fig-02, .fig-03)::before, .modal-cards__item:is(.fig-01, .fig-02, .fig-03)::after {
  display: block;
  content: "";
  position: absolute;
  z-index: 1;
}
.modal-cards__item:is(.fig-01)::before {
  aspect-ratio: 304/280;
  width: 19rem;
  background: url(../images/img_musical_01.svg) no-repeat center/contain;
  top: 0.75rem;
  left: -0.5625rem;
  -webkit-transform: rotate(8deg) translateX(-100%);
          transform: rotate(8deg) translateX(-100%);
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:is(.fig-01)::before {
    width: max(22.2547584187vw, 11.875rem);
    top: max(0.878477306vw, 0.375rem);
    left: max(-0.6588579795vw, -0.3125rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:is(.fig-01)::before {
    display: none;
  }
}
.modal-cards__item:is(.fig-02)::after {
  aspect-ratio: 320/353;
  width: 20rem;
  background: url(../images/img_musical_02.svg) no-repeat center/contain;
  top: 5rem;
  right: -3.625rem;
  -webkit-transform: rotate(-10deg) translateX(100%);
          transform: rotate(-10deg) translateX(100%);
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:is(.fig-02)::after {
    width: max(23.4260614934vw, 11.875rem);
    top: max(5.8565153734vw, 2.5rem);
    right: max(-2.9282576867vw, -1.25rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:is(.fig-02)::after {
    display: none;
  }
}
.modal-cards__item:is(.fig-03)::before {
  aspect-ratio: 360/335;
  width: 22.5rem;
  background: url(../images/img_musical_03.svg) no-repeat center/contain;
  top: -1.1875rem;
  right: -4.75rem;
  -webkit-transform: rotate(3deg) translateX(-100%);
          transform: rotate(3deg) translateX(-100%);
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:is(.fig-03)::before {
    width: max(26.3543191801vw, 11.875rem);
    top: max(-1.3909224012vw, -0.625rem);
    right: max(0.7320644217vw, 0.3125rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:is(.fig-03)::before {
    display: none;
  }
}
.modal-cards__item:is(.col2) {
  counter-increment: unset;
  aspect-ratio: 266/305;
  width: calc((100% - 200px) / 3);
  max-width: 16.625rem;
  visibility: hidden;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:is(.col2) {
    width: calc((100% - 12vw) / 3);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:is(.col2) {
    display: none;
  }
}
.modal-cards__item:has(#flute-piccolo) {
  top: 0.125rem;
  left: -1.1875rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:has(#flute-piccolo) {
    left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:has(#flute-piccolo) {
    top: max(15.7333333333vw, 3.6875rem);
    left: max(-4.5333333333vw, -1.0625rem);
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
}
.modal-cards__item:has(#oboe-bassoon) {
  top: 2.4375rem;
  left: 0.5625rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:has(#oboe-bassoon) {
    left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:has(#oboe-bassoon) {
    top: max(30.9333333333vw, 7.25rem);
    -webkit-transform: rotate(9deg);
            transform: rotate(9deg);
  }
}
.modal-cards__item:has(#clarinet) {
  top: 4.6875rem;
  left: 2.25rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:has(#clarinet) {
    left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:has(#clarinet) {
    top: max(10.9333333333vw, 2.5625rem);
    left: max(-0.2666666667vw, -0.0625rem);
    -webkit-transform: rotate(11deg);
            transform: rotate(11deg);
  }
}
.modal-cards__item:has(#saxophone) {
  top: -0.8125rem;
  left: 5.375rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:has(#saxophone) {
    top: max(-0.9516837482vw, -0.4375rem);
    left: max(16.1054172767vw, 6.875rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:has(#saxophone) {
    top: max(18.9333333333vw, 4.4375rem);
    left: max(3.4666666667vw, 0.8125rem);
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
}
.modal-cards__item:has(#trumpet) {
  top: 1.125rem;
  left: 10.125rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:has(#trumpet) {
    top: max(1.317715959vw, 0.5625rem);
    left: max(17.5695461201vw, 7.5rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:has(#trumpet) {
    top: max(-3.2vw, -0.75rem);
    left: max(-4vw, -0.9375rem);
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
}
.modal-cards__item:has(#horn) {
  top: -2.9375rem;
  left: -2.0625rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:has(#horn) {
    left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:has(#horn) {
    top: max(8vw, 1.875rem);
    left: max(1.3333333333vw, 0.3125rem);
    -webkit-transform: rotate(7deg);
            transform: rotate(7deg);
  }
}
.modal-cards__item:has(#trombone) {
  top: -1.6875rem;
  left: -1.5625rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:has(#trombone) {
    left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:has(#trombone) {
    top: max(-13.8666666667vw, -3.25rem);
    left: max(-1.8666666667vw, -0.4375rem);
    -webkit-transform: rotate(11deg);
            transform: rotate(11deg);
  }
}
.modal-cards__item:has(#euphonium) {
  top: 0.4375rem;
  left: 1.875rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:has(#euphonium) {
    left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:has(#euphonium) {
    top: max(-2.4vw, -0.5625rem);
    left: max(0.5333333333vw, 0.125rem);
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
}
.modal-cards__item:has(#tuba) {
  top: -3.6875rem;
  left: 9.0625rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:has(#tuba) {
    top: max(-4.3191800878vw, -1.875rem);
    left: max(21.9619326501vw, 9.375rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:has(#tuba) {
    top: max(-23.4666666667vw, -5.5rem);
    left: max(0.2666666667vw, 0.0625rem);
    -webkit-transform: rotate(-7deg);
            transform: rotate(-7deg);
  }
}
.modal-cards__item:has(#contrabass) {
  top: -2.625rem;
  left: 15.8125rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:has(#contrabass) {
    top: max(-3.074670571vw, -1.3125rem);
    left: max(23.4260614934vw, 10rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:has(#contrabass) {
    top: max(-13.8666666667vw, -3.25rem);
    left: max(3.2vw, 0.75rem);
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}
.modal-cards__item:has(#percussion) {
  top: -6.375rem;
  left: -2.9375rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:has(#percussion) {
    left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:has(#percussion) {
    top: max(-35.2vw, -8.25rem);
    left: max(-0.5333333333vw, -0.125rem);
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
.modal-cards__item:has(#piano) {
  top: -5.0625rem;
  left: -1.625rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:has(#piano) {
    left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:has(#piano) {
    top: max(-25.3333333333vw, -5.9375rem);
    left: max(-0.5333333333vw, -0.125rem);
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
.modal-cards__item:has(#harp) {
  top: -1.625rem;
  left: 1.125rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__item:has(#harp) {
    left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__item:has(#harp) {
    top: max(-46.4vw, -10.875rem);
    left: max(-42.6666666667vw, -10rem);
    -webkit-transform: rotate(-7deg);
            transform: rotate(-7deg);
  }
  .modal-cards__item:has(#harp)::after {
    display: block;
    content: "";
    aspect-ratio: 191/211;
    width: max(51.7333333333vw, 12.125rem);
    background: url(../images/img_musical_sp_02.svg) no-repeat center/contain;
    -webkit-transform: rotate(8deg) translateX(100%);
            transform: rotate(8deg) translateX(100%);
    position: absolute;
    top: max(4vw, 0.9375rem);
    left: -30%;
  }
}
@media only screen and (max-width: 540px) {
  .modal-cards__item:has(#harp) {
    left: max(-23.7333333333vw, -5.5625rem);
  }
  .modal-cards__item:has(#harp)::after {
    left: max(-9.6vw, -2.25rem);
  }
}
.modal-cards__item:is(.deg_3) {
  -webkit-transform: rotate(3deg);
          transform: rotate(3deg);
}
.modal-cards__item:is(.deg_rev3) {
  -webkit-transform: rotate(-3deg);
          transform: rotate(-3deg);
}
.modal-cards__item:is(.deg_5) {
  -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
}
.modal-cards__item:is(.deg_rev5) {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.modal-cards__item:is(.deg_6) {
  -webkit-transform: rotate(6deg);
          transform: rotate(6deg);
}
.modal-cards__item:is(.deg_7) {
  -webkit-transform: rotate(7deg);
          transform: rotate(7deg);
}
.modal-cards__item:is(.deg_rev8) {
  -webkit-transform: rotate(-8deg);
          transform: rotate(-8deg);
}
.modal-cards__item:is(.deg_10) {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}
.modal-cards__item:is(.deg_rev11) {
  -webkit-transform: rotate(-11deg);
          transform: rotate(-11deg);
}
.modal-cards__link {
  display: block;
  aspect-ratio: 266/305;
  background-color: #FFFFFF;
  border: none;
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  top: 0;
  -webkit-box-shadow: 4px 4px 30px rgba(249, 119, 202, 0.2941176471);
          box-shadow: 4px 4px 30px rgba(249, 119, 202, 0.2941176471);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__link {
    padding: max(1.466992665vw, 0.75rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__link {
    padding: max(3.2vw, 0.75rem) max(3.2vw, 0.75rem) max(2.6666666667vw, 0.625rem);
  }
}
.modal-cards__link:hover, .modal-cards__link:active {
  -webkit-transform: translateY(-1.875rem);
          transform: translateY(-1.875rem);
}
.modal-cards__link:hover::after, .modal-cards__link:active::after {
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}
.modal-cards__link::before {
  display: block;
  content: counter(num, decimal-leading-zero);
  color: #000000;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 3rem;
  letter-spacing: 0.02em;
  font-weight: 800;
  position: absolute;
  top: -2.25rem;
  left: 1.0625rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__link::before {
    font-size: max(3.513909224vw, 1.625rem);
    top: -2.635431918vw;
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__link::before {
    font-size: max(6.9333333333vw, 1.625rem);
    top: -12%;
    left: max(2.6666666667vw, 0.625rem);
  }
}
.modal-cards__link::after {
  display: block;
  content: "";
  width: 3rem;
  height: 3rem;
  background: url(../images/icon_plus_01.svg) no-repeat center/contain;
  position: absolute;
  right: -1.25rem;
  bottom: -1.4375rem;
  z-index: 1;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__link::after {
    width: max(3.513909224vw, 1.75rem);
    height: max(3.513909224vw, 1.75rem);
    right: max(-1.4641288433vw, -0.625rem);
    bottom: max(-1.6837481698vw, -0.75rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__link::after {
    width: max(7.4666666667vw, 1.75rem);
    height: max(7.4666666667vw, 1.75rem);
    right: max(-2.6666666667vw, -0.625rem);
    bottom: max(-1.8666666667vw, -0.4375rem);
  }
}
.modal-cards__link#flute-piccolo .modal-cards__figure::before {
  top: 1.5rem;
  right: 8.875rem;
}
@media only screen and (max-width: 767px) {
  .modal-cards__link#flute-piccolo .modal-cards__figure::before {
    top: max(4.8vw, 1.125rem);
    left: max(5.3333333333vw, 1.25rem);
    -webkit-transform: rotate(13deg);
            transform: rotate(13deg);
  }
}
.modal-cards__link#oboe-bassoon .modal-cards__figure::before {
  top: 0.6875rem;
  left: -0.1875rem;
}
@media only screen and (max-width: 767px) {
  .modal-cards__link#oboe-bassoon .modal-cards__figure::before {
    top: max(1.6vw, 0.375rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__link#clarinet .modal-cards__figure::before {
    top: 0;
    left: max(22.6666666667vw, 5.3125rem);
    -webkit-transform: rotate(13deg);
            transform: rotate(13deg);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__link#saxophone .modal-cards__figure::before {
    top: 0;
    left: max(22.6666666667vw, 5.3125rem);
    -webkit-transform: rotate(13deg);
            transform: rotate(13deg);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__link#trumpet .modal-cards__figure::before {
    top: max(1.0666666667vw, 0.25rem);
    left: max(23.2vw, 5.4375rem);
    -webkit-transform: rotate(13deg);
            transform: rotate(13deg);
  }
}
.modal-cards__link#horn .modal-cards__figure::before {
  top: 0.75rem;
  left: 1.625rem;
  right: unset;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__link#horn .modal-cards__figure::before {
    top: max(0.878477306vw, 0.375rem);
    left: max(1.9033674963vw, 0.8125rem);
    right: unset;
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__link#horn .modal-cards__figure::before {
    top: max(0.5333333333vw, 0.125rem);
    left: max(10.4vw, 2.4375rem);
    -webkit-transform: rotate(14deg);
            transform: rotate(14deg);
  }
}
.modal-cards__link#horn .modal-cards__figure img {
  -webkit-transform: rotate(13deg) scale(0.95);
          transform: rotate(13deg) scale(0.95);
}
@media only screen and (max-width: 767px) {
  .modal-cards__link#trombone .modal-cards__figure::before {
    top: max(-0.2666666667vw, -0.0625rem);
    left: max(23.2vw, 5.4375rem);
    -webkit-transform: rotate(13deg);
            transform: rotate(13deg);
  }
}
.modal-cards__link#euphonium .modal-cards__figure::before {
  top: 9.0625rem;
  left: unset;
  right: 1.0625rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__link#euphonium .modal-cards__figure::before {
    top: max(10.6149341142vw, 4.5rem);
    left: unset;
    right: max(1.2445095168vw, 0.5625rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__link#euphonium .modal-cards__figure::before {
    top: max(2.4vw, 0.5625rem);
    left: max(-0.2666666667vw, -0.0625rem);
    right: unset;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
}
.modal-cards__link#euphonium .modal-cards__figure img {
  -webkit-transform: rotate(8deg);
          transform: rotate(8deg);
}
@media only screen and (max-width: 767px) {
  .modal-cards__link#tuba .modal-cards__figure::before {
    top: max(-0.2666666667vw, -0.0625rem);
    left: max(23.2vw, 5.4375rem);
    -webkit-transform: rotate(13deg);
            transform: rotate(13deg);
  }
}
.modal-cards__link#contrabass .modal-cards__figure::before {
  top: 1.375rem;
  left: 0.375rem;
  right: unset;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__link#contrabass .modal-cards__figure::before {
    top: max(1.6105417277vw, 0.6875rem);
    left: max(0.439238653vw, 0.1875rem);
    right: unset;
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__link#contrabass .modal-cards__figure::before {
    top: max(-0.2666666667vw, -0.0625rem);
    left: unset;
    right: 0;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
}
.modal-cards__link#contrabass .modal-cards__figure img {
  -webkit-transform: rotate(-14deg);
          transform: rotate(-14deg);
}
@media only screen and (max-width: 767px) {
  .modal-cards__link#percussion .modal-cards__figure::before {
    top: max(-0.2666666667vw, -0.0625rem);
    left: unset;
    right: 0;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
}
.modal-cards__link#piano .modal-cards__figure::before {
  top: 0.875rem;
  left: -0.1875rem;
  right: unset;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__link#piano .modal-cards__figure::before {
    top: max(1.0248901903vw, 0.4375rem);
    left: max(-0.2196193265vw, -0.0625rem);
    right: unset;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
}
.modal-cards__link#harp .modal-cards__figure::before {
  top: 3.75rem;
  left: 0.25rem;
  right: unset;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__link#harp .modal-cards__figure::before {
    top: max(4.39238653vw, 1.875rem);
    left: max(0.2928257687vw, 0.125rem);
    right: unset;
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__link#harp .modal-cards__figure::before {
    top: max(10.4vw, 2.4375rem);
    left: max(-0.5333333333vw, -0.125rem);
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
}
.modal-cards__figure {
  display: block;
  max-width: 13.625rem;
  position: relative;
}
.modal-cards__figure::before {
  display: block;
  content: "";
  width: 2.375rem;
  height: 3.125rem;
  background: url(../images/icon_note_pink_01.svg) no-repeat center/contain;
  position: absolute;
  top: -0.625rem;
  right: 0.8125rem;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__figure::before {
    width: max(2.7818448023vw, 1.25rem);
    height: max(3.6603221083vw, 1.4375rem);
    top: max(-0.7320644217vw, -0.3125rem);
    right: max(0.9516837482vw, 0.4375rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__figure::before {
    width: max(6.4vw, 1.5rem);
    height: max(6.4vw, 1.5rem);
    top: max(-2.6666666667vw, -0.625rem);
    right: max(3.4666666667vw, 0.8125rem);
  }
}
.modal-cards__ttl {
  display: block;
  margin-top: 9px;
  color: #000000;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.07em;
  text-align: center;
}
@media only screen and (max-width: 1200px) {
  .modal-cards__ttl {
    font-size: max(1.4641288433vw, 0.875rem);
    margin-top: max(0.6588579795vw, 0.25rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal-cards__ttl {
    margin-top: max(1.0666666667vw, 0.25rem);
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 3.5rem 1.875rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  z-index: 100;
  background-color: rgba(255, 239, 245, 0.1);
  -webkit-backdrop-filter: blur(30px);
          backdrop-filter: blur(30px);
}
@media only screen and (max-width: 767px) {
  .modal {
    padding: 3.375rem 1.25rem;
  }
}
.modal:is(.is-active) {
  display: block;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  overflow: auto;
}
.modal__overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.modal__content {
  position: relative;
  width: 100%;
  max-width: 59.1508052709vw;
  min-width: 660px;
  border-radius: 30px;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 767px) {
  .modal__content {
    max-width: unset;
    min-width: unset;
  }
}
.modal .swiper {
  overflow: visible;
}
.modal .swiper-slide {
  background: rgb(255, 255, 255);
  border-radius: 30px;
  padding: 4rem 64px 2.5rem;
}
@media only screen and (max-width: 767px) {
  .modal .swiper-slide {
    border-radius: 16px;
    padding: 2.5rem 20px 1.25rem;
  }
}
.modal__close-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  right: 22px;
  top: 1.25rem;
  width: 3.0625rem;
  height: 3.0625rem;
  background: #F1F3F4;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10;
}
@media only screen and (max-width: 767px) {
  .modal__close-btn {
    width: 1.5625rem;
    height: 1.5625rem;
    right: 10px;
    top: 0.5rem;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}
.modal__close-btn picture {
  width: 100%;
  height: 100%;
  max-width: 2.5rem;
  max-height: 2.5rem;
}
@media only screen and (max-width: 767px) {
  .modal__close-btn picture {
    max-width: 0.8125rem;
    max-height: 0.8125rem;
  }
}
.modal__num {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 4.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  position: absolute;
  top: -3.375rem;
  left: 59px;
}
@media only screen and (max-width: 767px) {
  .modal__num {
    font-size: 3rem;
    top: -2.125rem;
    left: 1.25rem;
  }
}
.modal__row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.modal__row:is(.col2) {
  gap: 24px;
}
@media only screen and (max-width: 767px) {
  .modal__row:is(.col2) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2.5rem;
  }
}
.modal__row:is(.col2) .modal__col {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: calc((100% - 24px) / 2);
}
@media only screen and (max-width: 767px) {
  .modal__row:is(.col2) .modal__col {
    width: 100%;
  }
}
.modal__row:is(.col2) .modal__figure {
  width: 100%;
}
.modal__col {
  width: 100%;
}
.modal__figure {
  aspect-ratio: 480/306;
  width: 100%;
}
.modal__figure img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  -o-object-fit: cover;
     object-fit: cover;
}
.modal__figure:is(.figure-2) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  aspect-ratio: unset;
}
.modal__figure:is(.figure-2) img {
  aspect-ratio: 480/306;
  width: calc((100% - 24px) / 2);
}
@media only screen and (max-width: 767px) {
  .modal__figure:is(.figure-2) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }
  .modal__figure:is(.figure-2) img {
    width: 100%;
    height: auto;
  }
}
.modal__ttl {
  margin-top: 1.875rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: 0.07em;
}
@media only screen and (max-width: 1200px) {
  .modal__ttl {
    margin-top: 2.196193265vw;
    font-size: max(2.196193265vw, 1.5rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal__ttl {
    margin-top: 1rem;
    font-size: 1.375rem;
  }
}
.modal__copy {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-top: 1.3125rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.07em;
}
@media only screen and (max-width: 1200px) {
  .modal__copy {
    margin-top: 1.5373352855vw;
    font-size: max(1.317715959vw, 0.875rem);
  }
}
@media only screen and (max-width: 767px) {
  .modal__copy {
    margin-top: 0.375rem;
    font-size: 0.9375rem;
    line-height: 1.75;
    letter-spacing: 0.06em;
  }
}
.modal__audio-ttl {
  margin-top: 2.1875rem;
  font-size: 1.125rem;
  font-weight: 700;
}
@media only screen and (max-width: 1200px) {
  .modal__audio-ttl {
    margin-top: 2.5622254758vw;
    font-size: max(1.317715959vw, 0.875rem);
  }
}
.modal__audio-ttl + .modal__audio {
  margin-top: 0.5rem;
}
@media only screen and (max-width: 1200px) {
  .modal__audio-ttl + .modal__audio {
    margin-top: 0.25rem;
  }
}
.modal__audio {
  width: 100%;
  max-width: 32.8125rem;
  margin-top: 2.1875rem;
}
@media only screen and (max-width: 1200px) {
  .modal__audio {
    margin-top: 2.5622254758vw;
  }
}
.modal .swiper-button-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 48px;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .modal .swiper-button-container {
    gap: 32px;
    margin-top: 0.9375rem;
  }
}
.modal .swiper-button-next, .modal .swiper-button-prev {
  position: static;
  width: 2.9375rem;
  height: 2.9375rem;
  margin-top: 0;
  cursor: pointer;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .modal .swiper-button-next, .modal .swiper-button-prev {
    width: 1.875rem;
    height: 1.875rem;
  }
}
.modal .swiper-button-next:hover, .modal .swiper-button-prev:hover {
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}
.modal .swiper-button-next:after, .modal .swiper-button-prev:after {
  color: transparent;
  font-family: unset;
  width: 100%;
  height: 100%;
  background: url(../images/icon_arrow_01.svg) no-repeat center/contain;
}
.modal .swiper-button-next:after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: unset;
  right: auto;
}

/* box
---------------------------------------- */
.box {
  border-radius: 31px;
  padding: 3rem 48px 4.5rem;
}
@media only screen and (max-width: 1200px) {
  .box {
    padding: max(3.513909224vw, 1.25rem) max(3.513909224vw, 20px) max(3.513909224vw, 2rem);
  }
}
.box--bg {
  background: #F0F8FD;
}
.box--bg-white {
  background-color: #FFFFFF;
  border-radius: 18px;
  padding: 3rem 72px 3.375rem;
}
@media only screen and (max-width: 1200px) {
  .box--bg-white {
    padding: max(3.513909224VW, 1.5rem) max(5.270863836VW, 20PX) max(3.953147877vw, 2rem);
  }
}
@media only screen and (max-width: 767px) {
  .box--bg-white {
    padding: max(6.4VW, 1.5rem) max(5.3333333333VW, 20PX) max(8.5333333333vw, 2rem);
  }
}
.box--mod01 {
  border-radius: 56px 56px 0 0;
}

.only-pc {
  display: block;
}

.only-sp {
  display: none;
}

@media only screen and (max-width: 767px) {
  .only-pc {
    display: none;
  }
  .only-sp {
    display: block;
  }
}
/* display
---------------------------------------- */
.display--inline {
  display: inline;
}
.display--inline-block {
  display: inline-block;
}
.display--block {
  display: block;
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 767px) {
  .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

/* width
---------------------------------------- */
.main .w-10 {
  width: 100%;
}
@media only screen and (max-width: 1279px) {
  .main .w-10 {
    width: 10%;
  }
}
.main .w-20 {
  width: 100%;
}
@media only screen and (max-width: 1279px) {
  .main .w-20 {
    width: 20%;
  }
}
.main .w-30 {
  width: 100%;
}
@media only screen and (max-width: 1279px) {
  .main .w-30 {
    width: 30%;
  }
}
.main .w-40 {
  width: 100%;
}
@media only screen and (max-width: 1279px) {
  .main .w-40 {
    width: 40%;
  }
}
.main .w-50 {
  width: 100%;
}
@media only screen and (max-width: 1279px) {
  .main .w-50 {
    width: 50%;
  }
}
.main .w-60 {
  width: 100%;
}
@media only screen and (max-width: 1279px) {
  .main .w-60 {
    width: 60%;
  }
}
.main .w-70 {
  width: 100%;
}
@media only screen and (max-width: 1279px) {
  .main .w-70 {
    width: 70%;
  }
}
.main .w-80 {
  width: 100%;
}
@media only screen and (max-width: 1279px) {
  .main .w-80 {
    width: 80%;
  }
}
.main .w-90 {
  width: 100%;
}
@media only screen and (max-width: 1279px) {
  .main .w-90 {
    width: 90%;
  }
}
.main .w-100 {
  width: 100%;
}
@media only screen and (max-width: 1279px) {
  .main .w-100 {
    width: 100%;
  }
}
.main .w-sp-10 {
  width: 10%;
}
.main .w-sp-20 {
  width: 20%;
}
.main .w-sp-30 {
  width: 30%;
}
.main .w-sp-40 {
  width: 40%;
}
.main .w-sp-50 {
  width: 50%;
}
.main .w-sp-60 {
  width: 60%;
}
.main .w-sp-70 {
  width: 70%;
}
.main .w-sp-80 {
  width: 80%;
}
.main .w-sp-90 {
  width: 90%;
}
.main .w-sp-100 {
  width: 100%;
}
.main .w-unset {
  width: unset;
}

/* 余白
---------------------------------------- */
.main .mt-0 {
  margin-top: 0 !important;
}
.main .mt-10 {
  margin-top: 0.625rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-10 {
    margin-top: 0.9375rem;
  }
}
.main .mt-20 {
  margin-top: 1.25rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-20 {
    margin-top: 1.5625rem;
  }
}
.main .mt-30 {
  margin-top: 1.875rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-30 {
    margin-top: 2.1875rem;
  }
}
.main .mt-40 {
  margin-top: 2.5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-40 {
    margin-top: 2.8125rem;
  }
}
.main .mt-50 {
  margin-top: 3.125rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-50 {
    margin-top: 3.4375rem;
  }
}
.main .mt-60 {
  margin-top: 3.75rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-60 {
    margin-top: 4.0625rem;
  }
}
.main .mt-70 {
  margin-top: 4.375rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-70 {
    margin-top: 4.6875rem;
  }
}
.main .mt-80 {
  margin-top: 5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-80 {
    margin-top: 5.3125rem;
  }
}
.main .mt-90 {
  margin-top: 5.625rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-90 {
    margin-top: 5.9375rem;
  }
}
.main .mt-100 {
  margin-top: 6.25rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-100 {
    margin-top: 6.875rem;
  }
}
.main .mt-4 {
  margin-top: 0.25rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-4 {
    margin-top: 0.5rem;
  }
}
.main .mt-8 {
  margin-top: 0.5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-8 {
    margin-top: 1rem;
  }
}
.main .mt-16 {
  margin-top: 1rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-16 {
    margin-top: 1.5rem;
  }
}
.main .mt-24 {
  margin-top: 1.5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-24 {
    margin-top: 2rem;
  }
}
.main .mt-32 {
  margin-top: 2rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-32 {
    margin-top: 2.5rem;
  }
}
.main .mt-40 {
  margin-top: 2.5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-40 {
    margin-top: 3rem;
  }
}
.main .mt-48 {
  margin-top: 3rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-48 {
    margin-top: 3.5rem;
  }
}
.main .mt-56 {
  margin-top: 3.5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-56 {
    margin-top: 4rem;
  }
}
.main .mt-64 {
  margin-top: 4rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-64 {
    margin-top: 4.5rem;
  }
}
.main .mt-72 {
  margin-top: 4.5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-72 {
    margin-top: 5rem;
  }
}
.main .mt-80 {
  margin-top: 5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-80 {
    margin-top: 5.5rem;
  }
}
.main .mt-88 {
  margin-top: 5.5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-88 {
    margin-top: 6rem;
  }
}
.main .mt-96 {
  margin-top: 6rem;
}
@media only screen and (max-width: 1279px) {
  .main .mt-96 {
    margin-top: 6.5rem;
  }
}
.main .mb-0 {
  margin-bottom: 0 !important;
}
.main .mb-10 {
  margin-bottom: 0.625rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-10 {
    margin-bottom: 0.9375rem;
  }
}
.main .mb-20 {
  margin-bottom: 1.25rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-20 {
    margin-bottom: 1.5625rem;
  }
}
.main .mb-30 {
  margin-bottom: 1.875rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-30 {
    margin-bottom: 2.1875rem;
  }
}
.main .mb-40 {
  margin-bottom: 2.5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-40 {
    margin-bottom: 2.8125rem;
  }
}
.main .mb-50 {
  margin-bottom: 3.125rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-50 {
    margin-bottom: 3.4375rem;
  }
}
.main .mb-60 {
  margin-bottom: 3.75rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-60 {
    margin-bottom: 4.0625rem;
  }
}
.main .mb-70 {
  margin-bottom: 4.375rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-70 {
    margin-bottom: 4.6875rem;
  }
}
.main .mb-80 {
  margin-bottom: 5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-80 {
    margin-bottom: 5.3125rem;
  }
}
.main .mb-90 {
  margin-bottom: 5.625rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-90 {
    margin-bottom: 5.9375rem;
  }
}
.main .mb-100 {
  margin-bottom: 6.25rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-100 {
    margin-bottom: 6.875rem;
  }
}
.main .mb-4 {
  margin-bottom: 0.25rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-4 {
    margin-bottom: 0.5rem;
  }
}
.main .mb-8 {
  margin-bottom: 0.5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-8 {
    margin-bottom: 1rem;
  }
}
.main .mb-16 {
  margin-bottom: 1rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-16 {
    margin-bottom: 1.5rem;
  }
}
.main .mb-24 {
  margin-bottom: 1.5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-24 {
    margin-bottom: 2rem;
  }
}
.main .mb-32 {
  margin-bottom: 2rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-32 {
    margin-bottom: 2.5rem;
  }
}
.main .mb-40 {
  margin-bottom: 2.5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-40 {
    margin-bottom: 3rem;
  }
}
.main .mb-48 {
  margin-bottom: 3rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-48 {
    margin-bottom: 3.5rem;
  }
}
.main .mb-56 {
  margin-bottom: 3.5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-56 {
    margin-bottom: 4rem;
  }
}
.main .mb-64 {
  margin-bottom: 4rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-64 {
    margin-bottom: 4.5rem;
  }
}
.main .mb-72 {
  margin-bottom: 4.5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-72 {
    margin-bottom: 5rem;
  }
}
.main .mb-80 {
  margin-bottom: 5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-80 {
    margin-bottom: 5.5rem;
  }
}
.main .mb-88 {
  margin-bottom: 5.5rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-88 {
    margin-bottom: 6rem;
  }
}
.main .mb-96 {
  margin-bottom: 6rem;
}
@media only screen and (max-width: 1279px) {
  .main .mb-96 {
    margin-bottom: 6.5rem;
  }
}
.main .m-auto {
  margin-left: auto;
  margin-right: auto;
}

/* 位置調整
---------------------------------------- */
.main .t-align--left {
  text-align: left;
}
.main .t-align--center {
  text-align: center;
}
.main .t-align--right {
  text-align: right;
}
.main .v-align--top {
  vertical-align: top;
}
.main .v-align--middle {
  vertical-align: middle;
}
.main .v-align--baseline {
  vertical-align: baseline;
}
.main .v-align--bottom {
  vertical-align: bottom;
}

/* ボーダー
---------------------------------------- */
.border {
  border: 1px solid;
}
.border--color-01 {
  border-color: #ccc;
}
.border--color-02 {
  border-color: #25CED7;
}

/* テキスト
---------------------------------------- */
.txt-mod01 {
  text-decoration: underline;
}

/* mv
---------------------------------------- */
.mv {
  width: 100%;
  aspect-ratio: 1366/1086;
  background: url(../images/mv_bg_01.svg) no-repeat center/cover;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .mv {
    aspect-ratio: 375/866;
    background: url(../images/mv_bg_sp_01.svg) no-repeat center/cover;
  }
}
.mv__ttl {
  width: 69.4729136164vw;
  position: absolute;
  top: 6.0761346999vw;
  left: -14.2752562225vw;
  z-index: 2;
}
@media only screen and (max-width: 767px) {
  .mv__ttl {
    width: 147.7333333333vw;
    position: relative;
    top: 15.2vw;
    left: 45%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.mv__figure {
  aspect-ratio: 768/512;
  width: 56.2225475842vw;
  overflow: hidden;
  border-radius: 40px 0 0 40px;
  position: absolute;
  top: 10.102489019vw;
  right: 0;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .mv__figure {
    aspect-ratio: 355/237;
    width: 94.6666666667vw;
    margin-top: 0.1875rem;
    margin-left: auto;
    margin-right: 0;
    position: relative;
    top: 0px;
    right: 0px;
  }
}
.mv__lead {
  color: #286EB9;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 2.2380952381;
  letter-spacing: 0.13em;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.5387994143vw;
}
@media only screen and (max-width: 1200px) {
  .mv__lead {
    font-size: max(1.5373352855vw, 0.9375rem);
  }
}
@media only screen and (max-width: 767px) {
  .mv__lead {
    font-size: max(4vw, 0.9375rem);
    line-height: 2;
    bottom: 9.6vw;
  }
}
.mv .deco {
  position: absolute;
  z-index: 2;
}
.mv .deco--i-horn {
  width: 14.1288433382vw;
  top: 3.513909224vw;
  left: 19.2532942899vw;
}
@media only screen and (max-width: 767px) {
  .mv .deco--i-horn {
    width: 28vw;
    top: 14.4vw;
    left: 28vw;
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
}
.mv .deco--i-saxophone {
  width: 13.1039531479vw;
  top: 37.5549048316vw;
  left: 31.9180087848vw;
}
@media only screen and (max-width: 767px) {
  .mv .deco--i-saxophone {
    width: 24.2666666667vw;
    top: 82.6666666667vw;
    left: 73.6vw;
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
}
.mv .deco--i-trumpet {
  width: 14.494875549vw;
  top: 17.7159590044vw;
  left: 28.6237188873vw;
}
@media only screen and (max-width: 767px) {
  .mv .deco--i-trumpet {
    width: 29.3333333333vw;
    top: 39.4666666667vw;
    left: 65.6vw;
  }
}
.mv .deco--i-violin {
  width: 9.7364568082vw;
  top: 40.2635431918vw;
  left: -0.2196193265vw;
}
@media only screen and (max-width: 767px) {
  .mv .deco--i-violin {
    width: 19.7333333333vw;
    top: 76.8vw;
    left: -3.2vw;
  }
}
.mv .deco--p-note {
  width: 5.1976573939vw;
  top: 44.9487554905vw;
  left: 52.1229868228vw;
}
@media only screen and (max-width: 767px) {
  .mv .deco--p-note {
    width: 12.2666666667vw;
    top: 21.3333333333vw;
    left: 64.8vw;
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
.mv .deco--p-small-drum {
  width: 6.0761346999vw;
  top: 44.0702781845vw;
  left: 87.1888726208vw;
}
@media only screen and (max-width: 767px) {
  .mv .deco--p-small-drum {
    width: 13.3333333333vw;
    top: 160.5333333333vw;
    left: 78.4vw;
  }
}
.mv .deco--p-tambourine {
  width: 8.0527086384vw;
  top: 45.60761347vw;
  left: 18.7408491947vw;
}
@media only screen and (max-width: 767px) {
  .mv .deco--p-tambourine {
    width: 16vw;
    top: 162.1333333333vw;
    left: 8.5333333333vw;
  }
}
.mv .deco--p-trumpet {
  width: 8.9311859444vw;
  top: 8.7115666179vw;
  left: 3.3674963397vw;
}
@media only screen and (max-width: 767px) {
  .mv .deco--p-trumpet {
    width: 17.8666666667vw;
    top: 25.3333333333vw;
    left: 5.6vw;
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}

@-webkit-keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
}

@keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
}
#mv .swiper-slide-active img,
#mv .swiper-slide-duplicate-active img,
#mv .swiper-slide-prev img {
  -webkit-animation: zoomUp 10s linear 0s normal both;
          animation: zoomUp 10s linear 0s normal both;
}
#mv .swiper-slide img {
  height: auto;
  width: 100%;
}

@-webkit-keyframes swing_01 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
  }
}

@keyframes swing_01 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
  }
}
@-webkit-keyframes swing_02 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
  }
}
@keyframes swing_02 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
  }
}
.swing_01 {
  -webkit-animation: swing_01 1.5s steps(2, end) 0s infinite normal forwards;
          animation: swing_01 1.5s steps(2, end) 0s infinite normal forwards;
}

.swing_02 {
  -webkit-animation: swing_01 1.5s steps(2, end) 0.25s infinite normal forwards;
          animation: swing_01 1.5s steps(2, end) 0.25s infinite normal forwards;
}

/* Topics
---------------------------------------- */
.topics {
  padding-bottom: 12.75rem;
}
@media only screen and (max-width: 1200px) {
  .topics {
    padding-bottom: max(14.934114202vw, 5.625rem);
  }
}
@media only screen and (max-width: 767px) {
  .topics {
    padding-bottom: max(24vw, 5.625rem);
  }
}
.topics .topics-list {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  font-family: "M PLUS Rounded 1c", sans-serif;
  list-style: none;
}
.topics .topics-list__item {
  position: relative;
}
.topics .topics-list__item::after {
  display: block;
  content: "";
  width: 100%;
  height: 3px;
  background: url(../images/icon_border_dashed_01.svg) repeat-x left center/contain;
  margin-top: 1.5625rem;
}
@media only screen and (max-width: 1200px) {
  .topics .topics-list__item::after {
    margin-top: max(1.8301610542vw, 1.125rem);
    height: max(0.2196193265vw, 2px);
  }
}
@media only screen and (max-width: 767px) {
  .topics .topics-list__item::after {
    margin-top: max(4vw, 0.9375rem);
  }
}
.topics .topics-list .topics-list__item + .topics-list__item {
  margin-top: 1.8125rem;
}
@media only screen and (max-width: 1200px) {
  .topics .topics-list .topics-list__item + .topics-list__item {
    margin-top: 2.1229868228vw;
  }
}
@media only screen and (max-width: 767px) {
  .topics .topics-list .topics-list__item + .topics-list__item {
    margin-top: max(4.8vw, 1.125rem);
  }
}
.topics .topics-list__flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 767px) {
  .topics .topics-list__flexbox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.topics .topics-list__info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.topics .topics-list__date {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05936em;
  margin-right: 21px;
}
@media only screen and (max-width: 1200px) {
  .topics .topics-list__date {
    font-size: max(1.1713030747vw, 0.875rem);
    margin-right: max(1.1713030747vw, 8px);
  }
}
@media only screen and (max-width: 767px) {
  .topics .topics-list__date {
    font-size: max(3.7333333333vw, 0.875rem);
    letter-spacing: 0.032em;
  }
}
.topics .topics-list__cat {
  border-radius: 100vw;
  border: 1px solid #286EB9;
  color: #286EB9;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05936em;
  background: #FFFFFF;
  margin-right: 19px;
  padding: 0.125rem 15px;
  position: relative;
  top: -0.0625rem;
}
@media only screen and (max-width: 1200px) {
  .topics .topics-list__cat {
    font-size: max(1.0248901903vw, 0.75rem);
    margin-right: max(1.3909224012vw, 10px);
  }
}
@media only screen and (max-width: 767px) {
  .topics .topics-list__cat {
    font-size: max(3.2vw, 0.75rem);
    padding: 0.125rem 11px;
  }
}
.topics .topics-list__copy {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.05936em;
}
.topics .topics-list__copy.link.link--external:hover::after {
  background: url(../images/icon_external_01.svg) no-repeat center/contain;
}
@media only screen and (max-width: 1200px) {
  .topics .topics-list__copy {
    font-size: max(1.317715959vw, 0.9375rem);
  }
}
@media only screen and (max-width: 767px) {
  .topics .topics-list__copy {
    display: block;
    margin-top: max(2.6666666667vw, 0.625rem);
    font-size: max(4vw, 0.9375rem);
    letter-spacing: 0.016em;
  }
}

/* Introduction
---------------------------------------- */
.introduction {
  background: #FFF0EB;
  position: relative;
}
.introduction::before {
  display: block;
  aspect-ratio: 1366/125;
  width: 100%;
  content: "";
  background: url(../images/bg_wave_01.svg) no-repeat top center/cover;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
@media only screen and (min-width: 1440px) {
  .introduction::before {
    position: relative;
    top: 3vw;
  }
}
@media only screen and (max-width: 767px) {
  .introduction::before {
    aspect-ratio: 375/42;
    background: url(../images/bg_wave_sp_01.svg) no-repeat top center/cover;
  }
}
.introduction .ttl--primary {
  margin-top: -4.8125rem;
  margin-bottom: 2.625rem;
}
@media only screen and (max-width: 1200px) {
  .introduction .ttl--primary {
    margin-top: max(-5.6368960469vw, -2.5rem);
    margin-bottom: max(3.074670571vw, 2rem);
  }
}
@media only screen and (max-width: 767px) {
  .introduction .ttl--primary {
    margin-top: max(-0.8vw, 0.1875rem);
    margin-bottom: max(7.7333333333vw, 1.8125rem);
  }
}
.introduction .row.content_01 {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
  margin-bottom: 2.375rem;
  padding-left: 32px;
  padding-right: 32px;
}
@media only screen and (max-width: 1200px) {
  .introduction .row.content_01 {
    margin-bottom: max(2.7818448023vw, 2rem);
    padding-left: max(2.3426061493vw, 20px);
    padding-right: max(2.3426061493vw, 20px);
  }
}
@media only screen and (max-width: 767px) {
  .introduction .row.content_01 {
    gap: max(11.7333333333vw, 2.75rem);
    margin-bottom: max(11.2vw, 2.625rem);
    padding-left: 0;
    padding-right: 0;
  }
}
.introduction .row.content_01 .copy-container {
  width: calc(55% - 12px);
}
@media only screen and (max-width: 767px) {
  .introduction .row.content_01 .copy-container {
    width: 100%;
  }
}
.introduction .row.content_01 .copy-container p {
  line-height: 2.1111111111;
  letter-spacing: 0.06em;
}
@media only screen and (max-width: 767px) {
  .introduction .row.content_01 .copy-container p {
    line-height: 1.75;
  }
}
.introduction .row.content_01 .figure-container {
  width: calc(45% - 12px);
  max-width: 495px;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 767px) {
  .introduction .row.content_01 .figure-container {
    width: 100%;
    max-width: unset;
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.introduction .box--bg-white + .box--bg-white {
  margin-top: 2.5rem;
}
@media only screen and (max-width: 1200px) {
  .introduction .box--bg-white + .box--bg-white {
    margin-top: max(2.9282576867vw, 1.25rem);
  }
}
@media only screen and (max-width: 767px) {
  .introduction .box--bg-white + .box--bg-white {
    margin-top: max(5.3333333333vw, 1.25rem);
  }
}
.introduction .box--bg-white.content_03 .row {
  gap: 3.5rem 56px;
}
@media only screen and (max-width: 1200px) {
  .introduction .box--bg-white.content_03 .row {
    gap: 2.8125rem 4.0995607613vw;
  }
}
.introduction .box--bg-white.content_03 .copy-container, .introduction .box--bg-white.content_03 .figure-container {
  width: calc((100% - 56px) / 2);
}
@media only screen and (max-width: 767px) {
  .introduction .box--bg-white.content_03 .copy-container, .introduction .box--bg-white.content_03 .figure-container {
    width: 100%;
  }
}
.introduction .box--bg-white.content_03 .copy-container p {
  font-weight: 500;
  line-height: 1.7777777778;
  letter-spacing: 0.06em;
}
@media only screen and (max-width: 767px) {
  .introduction .box--bg-white.content_03 .copy-container p {
    line-height: 1.5;
  }
}
@media only screen and (max-width: 767px) {
  .introduction .box--bg-white.content_03 .figure-container:is(.only-sp) {
    margin-top: max(5.3333333333vw, 1.25rem);
    margin-bottom: max(3.2vw, 0.75rem);
  }
}
.introduction .box--bg-white.content_03 .figure-container img {
  border-radius: 20px;
}

/* Musical Instrument
---------------------------------------- */
.musical {
  background-color: rgba(249, 89, 194, 0.1);
  padding-top: 9.875rem;
  padding-bottom: 7.75rem;
}
@media only screen and (max-width: 1200px) {
  .musical {
    padding-top: max(11.5666178624vw, 3.75rem);
    padding-bottom: max(9.0775988287vw, 3.625rem);
  }
}
@media only screen and (max-width: 767px) {
  .musical {
    padding-top: max(32vw, 7.5rem);
    padding-bottom: 0;
  }
}
.musical .ttl--primary {
  position: relative;
  left: 1.25rem;
}
@media only screen and (max-width: 1200px) {
  .musical .ttl--primary {
    left: max(-1.4641288433vw, -1.25rem);
  }
}
@media only screen and (max-width: 767px) {
  .musical .ttl--primary {
    left: unset;
  }
}
.musical .ttl--primary::after {
  display: block;
  content: "クリック（スマホではタップ）すると音が流れます";
  width: 25.5rem;
  height: 8.1875rem;
  background: url(../images/pic_introduction_sub_02.svg) no-repeat center/contain;
  color: transparent;
  position: absolute;
  top: -3.375rem;
  left: -3rem;
  z-index: 1;
}
@media only screen and (max-width: 1200px) {
  .musical .ttl--primary::after {
    width: max(29.8682284041vw, 7.5rem);
    top: -4.0263543192vw;
    left: 0.0732064422vw;
  }
}
@media only screen and (max-width: 767px) {
  .musical .ttl--primary::after {
    width: max(57.6vw, 13.5rem);
    height: max(24vw, 5.625rem);
    background: url(../images/pic_introduction_sub_sp_02.svg) no-repeat center/contain;
    top: -185%;
    left: -2.9333333333vw;
  }
}
@media only screen and (max-width: 540px) {
  .musical .ttl--primary::after {
    width: max(57.6vw, 13.5rem);
    height: max(24vw, 5.625rem);
    background: url(../images/pic_introduction_sub_sp_02.svg) no-repeat center/contain;
    top: -26.9333333333vw;
    left: -2.9333333333vw;
  }
}
.musical .ttl--primary .ja::after {
  display: block;
  content: "音源は実際に音楽隊員が弾いています！";
  width: 20.5rem;
  height: 8.625rem;
  background: url(../images/pic_introduction_sub_01.svg) no-repeat center/contain;
  color: transparent;
  position: absolute;
  top: -2.5rem;
  right: -23rem;
  z-index: 1;
}
@media only screen and (max-width: 1200px) {
  .musical .ttl--primary .ja::after {
    width: max(24.0117130307vw, 11.25rem);
    top: max(-5.270863836vw, -3rem);
    right: max(-4.39238653vw, -2.5rem);
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@media only screen and (max-width: 767px) {
  .musical .ttl--primary .ja::after {
    width: max(53.6vw, 12.5625rem);
    background: url(../images/pic_introduction_sub_sp_01.svg) no-repeat center/contain;
    top: 170%;
    right: max(17.8666666667vw, 4.1875rem);
  }
}
@media only screen and (max-width: 540px) {
  .musical .ttl--primary .ja::after {
    width: max(53.6vw, 12.5625rem);
    height: max(24vw, 5.625rem);
    background: url(../images/pic_introduction_sub_sp_01.svg) no-repeat center/contain;
    top: max(14.1333333333vw, 3.3125rem);
    right: max(17.8666666667vw, 4.1875rem);
  }
}

/* MEC
---------------------------------------- */
@media only screen and (max-width: 767px) {
  .mec {
    margin-top: -5vw;
  }
}
@media only screen and (max-width: 600px) {
  .mec {
    margin-top: -8vw;
  }
}
@media only screen and (max-width: 500px) {
  .mec {
    margin-top: max(-26.6666666667vw, -8.75rem);
    position: relative;
    z-index: 1;
  }
}
.mec .movie-bg {
  height: clamp(400px, 43.4846266471vw, 720px);
  overflow: hidden;
  position: relative;
  z-index: -1;
}
@media only screen and (max-width: 767px) {
  .mec .movie-bg {
    height: clamp(224px, 43.4846266471vw, 720px);
    z-index: 1;
  }
}
.mec .movie-bg__content {
  min-width: 150%;
  min-height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.mec .inner {
  padding-top: 25%;
  margin-top: -25%;
}
@media only screen and (max-width: 767px) {
  .mec .ttl--primary {
    text-align: center;
  }
}
.mec .box {
  margin-top: -9.4375rem;
  padding: 6.4375rem 72px 8.4375rem;
}
@media only screen and (max-width: 1200px) {
  .mec .box {
    padding: max(11.0541727672VW, 2.5rem) max(5.270863836VW, 20PX) max(9.8828696925vw, 5.625rem);
  }
}
@media only screen and (max-width: 767px) {
  .mec .box {
    padding: max(10.6666666667vw, 2.5rem) 0 max(12.5333333333vw, 2.9375rem);
    margin-top: 0;
  }
}
@media only screen and (max-width: 540px) {
  .mec .box {
    margin-top: 0;
  }
}
.mec .box > p {
  margin-bottom: 4.625rem;
  line-height: 2.1111111111;
  letter-spacing: 0.06em;
}
@media only screen and (max-width: 1200px) {
  .mec .box > p {
    margin-bottom: max(5.4172767204vw, 2rem);
  }
}
@media only screen and (max-width: 767px) {
  .mec .box > p {
    margin-bottom: max(8.5333333333vw, 2rem);
    line-height: 1.75;
    text-align: left;
  }
}
.mec .box .card {
  position: relative;
}
.mec .box .card::before, .mec .box .card::after {
  display: block;
  content: "";
  position: absolute;
}
.mec .box .card::before {
  aspect-ratio: 530/483;
  width: 32.125rem;
  background: url(../images/bg_puddle_01.svg) no-repeat center/contain;
  top: -9.8125rem;
  left: 48.25rem;
}
@media only screen and (max-width: 1200px) {
  .mec .box .card::before {
    width: max(37.6281112738vw, 16.0625rem);
    top: max(-11.4934114202vw, -5rem);
    left: max(56.5153733529vw, 24.0625rem);
  }
}
@media only screen and (max-width: 767px) {
  .mec .box .card::before {
    background: url(../images/bg_puddle_sp_01.svg) no-repeat center/contain;
    width: max(117.3333333333vw, 27.5rem);
    top: -11.6%;
    left: max(39.7333333333vw, 9.3125rem);
  }
}
.mec .box .card::after {
  aspect-ratio: 468/378;
  width: 55.125rem;
  background: url(../images/bg_puddle_02.svg) no-repeat center/contain;
  top: 15.75rem;
  left: -37.1875rem;
}
@media only screen and (max-width: 1200px) {
  .mec .box .card::after {
    width: max(64.5680819912vw, 27.5625rem);
    top: max(18.4480234261vw, 7.8125rem);
    left: max(-43.5578330893vw, -18.75rem);
  }
}
@media only screen and (max-width: 767px) {
  .mec .box .card::after {
    background: url(../images/bg_puddle_sp_02.svg) no-repeat center/contain;
    width: max(173.3333333333vw, 40.625rem);
    top: 38.1%;
    left: max(-107.2vw, -25.125rem);
  }
}
.mec .box .card__item {
  position: relative;
  z-index: 1;
}

/* Women’s Drum Corps
---------------------------------------- */
.drum-corps {
  background-color: #F2FCF2;
  padding-bottom: 16.375rem;
  position: relative;
}
@media only screen and (max-width: 1200px) {
  .drum-corps {
    padding-bottom: max(19.1800878477vw, 8.1875rem);
  }
}
@media only screen and (max-width: 767px) {
  .drum-corps {
    padding-bottom: max(26.6666666667vw, 6.25rem);
  }
}
.drum-corps::before {
  display: block;
  aspect-ratio: 1366/119;
  width: 100%;
  content: "";
  background: url(../images/bg_wave_02.svg) no-repeat top center/cover;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1440px) {
  .drum-corps::before {
    position: relative;
    top: 3vw;
  }
}
@media only screen and (max-width: 767px) {
  .drum-corps::before {
    background: url(../images/bg_wave_sp_02.svg) no-repeat top center/cover;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
.drum-corps .ttl--primary {
  margin-top: -4.625rem;
}
@media only screen and (max-width: 1200px) {
  .drum-corps .ttl--primary {
    margin-top: max(-5.4172767204vw, -2.5rem);
  }
}
@media only screen and (max-width: 767px) {
  .drum-corps .ttl--primary {
    margin-top: max(4.2666666667vw, 1rem);
    margin-bottom: max(8.5333333333vw, 2rem);
  }
}
@media only screen and (max-width: 767px) {
  .drum-corps .ttl--primary .en {
    text-align: center;
  }
}
.drum-corps .inner > p {
  margin-bottom: 4.625rem;
  line-height: 2.1111111111;
  letter-spacing: 0.06em;
}
@media only screen and (max-width: 1200px) {
  .drum-corps .inner > p {
    margin-bottom: max(5.4172767204vw, 2rem);
  }
}
@media only screen and (max-width: 767px) {
  .drum-corps .inner > p {
    line-height: 1.75;
    text-align: left;
  }
}

/* Concert
---------------------------------------- */
.bg-wave {
  position: relative;
}
.bg-wave::before {
  display: block;
  aspect-ratio: 1366/120;
  width: 100%;
  content: "";
  background: url(../images/bg_wave_03.svg) no-repeat top center/cover;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
@media only screen and (max-width: 767px) {
  .bg-wave::before {
    background: url(../images/bg_wave_sp_03.svg) no-repeat top center/cover;
  }
}

.concert {
  padding-bottom: 8.5625rem;
}
@media only screen and (max-width: 1200px) {
  .concert {
    padding-bottom: max(10.0292825769vw, 4.375rem);
  }
}
@media only screen and (max-width: 767px) {
  .concert {
    padding-bottom: max(44.8vw, 10.5rem);
  }
}
.concert .ttl--primary {
  margin-top: -3.5625rem;
}
@media only screen and (max-width: 1200px) {
  .concert .ttl--primary {
    margin-top: max(-4.1727672035vw, -1.75rem);
  }
}
@media only screen and (max-width: 767px) {
  .concert .ttl--primary {
    padding-top: max(13.3333333333vw, 3.125rem);
    margin-bottom: max(8.5333333333vw, -2rem);
  }
}
.concert .youtube {
  aspect-ratio: 1043/586;
  width: 100%;
  max-width: 65.1875rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
  position: relative;
}
@media only screen and (max-width: 1200px) {
  .concert .youtube {
    max-width: max(76.3543191801vw, 37.5rem);
    margin-bottom: max(4.6852122987vw, 2rem);
  }
}
.concert .youtube::before, .concert .youtube::after {
  display: block;
  content: "";
  position: absolute;
  z-index: -1;
}
.concert .youtube::before {
  aspect-ratio: 1596/871;
  width: 108.75rem;
  background: url(../images/bg_puddle_03.svg) no-repeat center/contain;
  top: calc(50% + 2.9375rem);
  left: calc(50% - 5.125rem);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media only screen and (max-width: 1200px) {
  .concert .youtube::before {
    width: max(127.3792093704vw, 43.75rem);
    top: max(50% + 3.4407027818vw, 50% + 1.5625rem);
    left: max(50% - 6.0029282577vw, 50% - 2.5625rem);
  }
}
@media only screen and (max-width: 767px) {
  .concert .youtube::before {
    background: url(../images/bg_puddle_sp_03.svg) no-repeat center/contain;
    width: max(242.6666666667vw, 56.875rem);
    top: max(50% + 14.6666666667vw, 50% + 3.4375rem);
    left: max(50% + 3.7333333333vw, 50% + 0.875rem);
  }
}
.concert .youtube::after {
  aspect-ratio: 1366/1013;
  width: 85.375rem;
  background: url(../images/bg_youtube_01.png) no-repeat center/contain;
  top: calc(50% - 0.9375rem);
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media only screen and (max-width: 1200px) {
  .concert .youtube::after {
    width: max(100vw, 48rem);
    top: max(50% - 1.0980966325vw, 50% - 0.5rem);
  }
}
@media only screen and (max-width: 767px) {
  .concert .youtube::after {
    aspect-ratio: 375/555;
    background: url(../images/bg_youtube_sp_01.png) no-repeat center/contain;
    width: 112%;
    top: max(50% + 10.4vw, 50% + 2.4375rem);
  }
}
.concert .youtube iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 23px;
}

/* Event
---------------------------------------- */
.event {
  background: url(../images/bg_puddle_04.svg) no-repeat center/cover;
  padding-top: 7.9375rem;
  padding-bottom: 9.5625rem;
}
@media only screen and (max-width: 1200px) {
  .event {
    padding-top: max(9.2972181552vw, 10.3125rem);
    padding-bottom: max(11.2005856515vw, 5rem);
  }
}
@media only screen and (max-width: 767px) {
  .event {
    background: url(../images/bg_puddle_sp_04.svg) no-repeat center/cover;
    padding-top: max(51.4666666667vw, 12.0625rem);
    padding-bottom: max(66.1333333333vw, 15.5rem);
  }
}
.event .inner {
  position: relative;
}
.event .inner::before, .event .inner::after {
  display: block;
  content: "";
  position: absolute;
}
.event .inner::before {
  aspect-ratio: 322/491;
  width: 21.25rem;
  background: url(../images/img_event_01.png) no-repeat center/contain;
  top: -5.0625rem;
  left: -2.8125rem;
}
@media only screen and (max-width: 1200px) {
  .event .inner::before {
    width: max(21.9619326501vw, 6.25rem);
    top: max(-5.9297218155vw, -2.5rem);
    left: max(-3.2942898975vw, 1.875rem);
  }
}
@media only screen and (max-width: 767px) {
  .event .inner::before {
    aspect-ratio: 325/147;
    width: max(96vw, 22.5rem);
    background: url(../images/img_event_sp_01.png) no-repeat center/contain;
    top: -80%;
    left: 0;
  }
}
.event .inner::after {
  aspect-ratio: 354/481;
  width: 23.25rem;
  background: url(../images/img_event_02.png) no-repeat center/contain;
  top: -3.25rem;
  right: -4.1875rem;
}
@media only screen and (max-width: 1200px) {
  .event .inner::after {
    width: max(24.1581259151vw, 6.25rem);
    top: max(-3.8067349927vw, -1.5625rem);
    right: max(-4.9048316252vw, 1.5625rem);
  }
}
@media only screen and (max-width: 767px) {
  .event .inner::after {
    aspect-ratio: 316/159;
    width: max(94.6666666667vw, 22.1875rem);
    background: url(../images/img_event_sp_02.png) no-repeat center/contain;
    top: unset;
    right: 0;
    bottom: -91%;
  }
}
.event .inner > p {
  margin-bottom: 3.4375rem;
  line-height: 2.1111111111;
  letter-spacing: 0.06em;
}
@media only screen and (max-width: 1200px) {
  .event .inner > p {
    margin-bottom: max(4.0263543192vw, 1.875rem);
  }
}
@media only screen and (max-width: 767px) {
  .event .inner > p {
    text-align: left;
  }
}/*# sourceMappingURL=style.css.map */