@charset "UTF-8";

/*
MARK: cascade
*/
.pane-contents:has(.open-cp) {
  margin-top: 0;

  .container {
    max-width: 100%;

    /* padding: 0; */
  }

  /*
  .block-event-page {
    margin: 0;
  }

  .pane-main {
    padding: 0;
  } */

  .block-event-page--goods {
    max-width: 1200px;
    margin-inline: auto;
  }
}

/*
MARK: container
*/
.open-cp {
  img {
    height: auto;
    vertical-align: bottom;
  }

  .yellow-btn {
    box-shadow: calc(8 / 750 * 100cqw) calc(8 / 750 * 100cqw) calc(10 / 750 * 100cqw) oklch(0% 0 0deg / 16%);
  }
}

.open-cp-container {
  width: min(500px, 100%);
  margin: auto;
  container-type: inline-size;
}

@media (width >= 751px ) {
  .open-cp {
    position: relative;
    z-index: 1;
    background-image: url("../img/bg_kami.png");
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: 50% var(--open-bg-position, 208px);
    background-size: contain;
    transition: background-position 0.6s;

    .yellow-btn {
      --yellow-btn-fs: calc(32 / 750 * 100cqw);

      max-width: 640px;
      padding-block: 1em;

      &::after {
        width: 1.5em;
      }
    }
  }

  .wrapper:has(#header.fixid) .open-cp {
    --open-bg-position: 118px;
  }
}

@media (width <= 1023px) {
  .open-cp {
    margin-inline: calc((20px + 6.4vw) * -1);
  }
}

@media (width >= 1024px) {
  .open-cp {
    margin-inline: calc((20px + 20px) * -1);
  }
}

/*
MARK: fv
*/
.open-cp-fv {
  position: relative;
  text-align: center;
  background-color: #EAF6FC;
}

.open-cp-fv__image {
  position: relative;
  z-index: 3;
}

@media (width >= 751px ) {
  .open-cp-fv {
    padding-block: 34px 20px;
    background-image: url("../img/bg_kami.png");
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: 50% var(--open-bg-position, 208px);
    background-size: contain;
    transition: background-position 0.6s;
  }
}

/*
MARK: banner
*/
.open-cp-banner {
  position: relative;
}

.open-cp-banner__container {
  position: absolute;
  inset-block-start: 0;
  inset-inline: calc(46 / 750 * 100cqw);
  display: grid;
  gap: calc(32 / 750 * 100cqw);
}

/*
MARK: register
*/
.open-cp-register {
  aspect-ratio: 750 / 382;
  padding-block: calc(50 / 750 * 100cqw);
  padding-inline: calc(47 / 750 * 100cqw);
  background-image: url("../img/img08.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;

  .btn-register {
    --register-margin-top: 0;

    gap: 8px;
    clip-path: none;
  }

}

@media (width >= 751px) {
  .open-cp-register {
    .btn-register {
      max-width: 640px;
    }

    .btn-register__buta {
      width: 28cqw;
    }
  }
}

/*
MARK: law
*/
.open-cp-law {
  padding-inline: calc(87 / 750 * 100cqw);
  background-image: url("../img/img12.png");
  background-repeat: repeat-y;
  background-position: 50% 50%;
  background-size: 100%;
}

.open-cp-law__heading {
  padding-block: 0.2em;
  margin-block-end: 0.25em;
  font-size: calc(28 / 750 * 100cqw);
  color: #fff;
  text-align: center;
  background-color: #333;
}

.open-cp-law__content {
  padding: calc(20 / 26 * 1em);
  padding-inline-end: calc(16 / 26 * 1em);
  margin-block-end: calc(45 / 750 * 100cqw);
  font-size: calc(26 / 750 * 100cqw);
  border: 1px solid #707070;
  border-radius: 1em;

  & > dl {
    height: 15em;
    overflow-y: scroll;
  }

  dt {
    margin-block-end: 0.5em;
    font-size: calc(32 / 26 * 1em);
  }

  dd + dt {
    margin-block-start: 1em;
  }
}

/*
MARK: footer
*/
.open-cp-footer {
  padding-block: min(60px, 60 / 750 * 100vw);
  text-align: center;
  background-color: #FDFDDB;
}

.open-cp-footer__container {
  max-width: 750px;
  margin-inline: auto;
  container-type: inline-size;

  p {
    margin-block-end: 0.5em;
    font-size: calc(28 / 750 * 100cqw);
  }
}

.open-cp-footer__heading {
  padding: 0;
  margin: 0;
  font-size: calc(40 / 750 * 100cqw);
  color: #005BAA;
  border-width: 0;
}

/*
MARK: banner
*/