/* ----------------------------------
variable
-------------------------------------*/
:root {
  --colorBlack: #2a2c32;
  --colorDarkLightBlue: #5dc9e2;
  --colorLightBlue: #e4f0ff;
  --colorMain: #0f1d7f;
  --colorPaleBlue: #d5e2f1;
  --colorWhite: #fff;
  --fontKusugi: "Kosugi", sans-serif;
  --fontMontserrat: "Montserrat", sans-serif;
}

/* ----------------------------------
common
-------------------------------------*/

html {
  font-family: var(--fontKusugi);
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  width: 100%;
}

img {
  height: 100%;
  width: 100%;
}

a {
  transition: .3s;
}

a:hover {
  opacity: .6;
}

.container1080 {
  margin-inline: auto;
  max-width: calc(1080px + 4rem);
  padding-inline: 2rem;
  width: 100%;
}

.container1320 {
  margin-inline: auto;
  max-width: calc(1320px + 4rem);
  padding-inline: 2rem;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .for-pc {
    display: none;
  }
}


/* ----------------------------------
    header
-------------------------------------*/
.header__container {
  margin-inline: auto;
  max-width: calc(1280px + 4rem);
  padding: 2.9rem 2rem;
  width: 100%;
}

.header__logo {
  display: block;
  max-width: 31.4rem;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .header__logo {
    max-width: 20rem;
  }
}

/* ----------------------------------
    mainvisual
-------------------------------------*/
.mainvisual {
  padding-bottom: 14.4rem;
  position: relative;
}

.mainvisual__treat {
  position: absolute;
  z-index: -1;
}

.mainvisual__treat:nth-of-type(1),
.mainvisual__treat:nth-of-type(3) {
  height: 39.3rem;
  position: absolute;
  width: 30.2rem;
}

.mainvisual__treat:nth-of-type(1) {
  right: -.1rem;
  top: -11rem;
}

.mainvisual__treat:nth-of-type(3) {
  bottom: -2rem;
  right: -.1rem;
}

.mainvisual__treat:nth-of-type(2) {
  height: 51.3rem;
  left: -.67rem;
  top: 23.5rem;
  width: 28.2rem;
}


.mainvisual__logo {
  margin: 2rem auto 0;
  max-width: 52rem;
  width: 100%;
}

.mainvisual__title {
  color: var(--colorMain);
  font-size: 4rem;
  letter-spacing: .17em;
  line-height: 2;
  margin-top: 4rem;
  text-align: center;
}

.mainvisual__text {
  color: var(--colorMain);
  font-size: 2rem;
  letter-spacing: .16em;
  line-height: 2.54;
  margin-top: 4rem;
  padding-inline: 2rem;
  text-align: center;
}

@media screen and (max-width: 1023px) {
  .mainvisual__treat:nth-of-type(1),
  .mainvisual__treat:nth-of-type(3) {
    height: calc(39.3rem / 2);
    width: calc( 30.2rem / 2);
  }

  .mainvisual__treat:nth-of-type(2) {
    height: calc(51.3rem / 2);
    width: calc( 28.2rem / 2);
  }
}

@media screen and (max-width: 767px) {
  .mainvisual__logo {
    width: 50vw;
  }

  .mainvisual__title {
    font-size: 2rem;
  }

  .mainvisual__text {
    font-size: 1.2rem;
  }

  .mainvisual__treat:nth-of-type(1),
  .mainvisual__treat:nth-of-type(3) {
    height: calc(39.3rem / 3);
    width: calc( 30.2rem / 3);
  }

  .mainvisual__treat:nth-of-type(2) {
    height: calc(51.3rem / 3);
    width: calc( 28.2rem / 3);
  }
}

@media screen and (max-width: 450px) {
  .mainvisual__treat:nth-of-type(1),
  .mainvisual__treat:nth-of-type(3) {
    height: calc(39.3rem / 4);
    width: calc( 30.2rem / 4);
  }

  .mainvisual__treat:nth-of-type(2) {
    height: calc(51.3rem / 4);
    width: calc( 28.2rem / 4);
  }
}

/* ----------------------------------
    message
-------------------------------------*/
.message {
  padding-bottom: 23.9rem;
  position: relative;
}

.message__treat {
  bottom: 14.4rem;
  height: 51.3rem;
  left: -7.5rem;
  position: absolute;
  width: 28.2rem;
}

.message__inner {
  background: var(--colorLightBlue);
  clip-path: polygon(11% 0, 100% 0, 100% 87%, 89% 100%, 0 100%, 0 14%);
  padding: 8rem 2rem;
}

.message__hgroup {
  text-align: center;
}

.message__hgroup h2 {
  color: rgba(15, 29, 127, .1);
  font-family: var(--fontMontserrat);
  font-size: 6.4rem ;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
}

.message__hgroup p {
  color: var(--colorMain);
  font-family: var(--fontKusugi);
  font-size: 2.4rem;
  letter-spacing: .1em;
  line-height: 2;
}

.message__text {
  color: var(--colorMain);
  font-size: 1.5rem;
  letter-spacing: .1em;
  line-height: 2;
  margin-top: 6.4rem;
  text-align: center;
}

.message__name {
  margin: 6.4rem auto 0;
  max-width: 20rem;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .message {
    padding-bottom: 10rem;
  }

  .message__inner {
    clip-path: polygon(11% 0, 100% 0, 100% 96%, 88% 100%, 0 100%, 0 4%);
    padding-block: 4rem;
  }

  .message__treat {
    height: calc(51.3rem / 3);
    left: -2rem;
    width: calc(28.2rem / 3);
  }

  .message__hgroup h2 {
    font-size: 4rem;
  }

  .message__hgroup p {
    font-size: 2rem;
  }

  .message__text {
    font-size: 1.2rem;
    text-align: start;
  }

  .message__name {
    max-width: 15rem;
  }
}

@media screen and (max-width: 450px) {
  .message__treat {
    height: calc(51.3rem / 4);
    width: calc(28.2rem / 4);
  }
}

/* ----------------------------------
    special
-------------------------------------*/
.special {
  background-color: var(--colorMain);
  background-image: url(../images/bg-special.png);
  background-position: top;
  background-repeat: repeat;
  background-size: contain;
  padding-block: 5.9rem;
}

.special__inner {
  background: var(--colorWhite);
  padding: 12rem;
}

.special__hgroup {
  text-align: center;
}

.special__hgroup h2 {
  color: var(--colorMain);
  font-family: var(--fontMontserrat);
  font-size: 6.4rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
}

.special__hgroup p {
  color: var(--colorMain);
  font-size: 2.4rem;
  letter-spacing: .1em;
  line-height: 2;
}

.special__section {
  margin-top: 10rem;
}

.special__sectionTitle {
  border-block: .1rem solid var(--colorMain);
  color: var(--colorMain);
  font-size: 2.8rem;
  letter-spacing: .1em;
  line-height: 2;
  padding-block: .8rem;
  text-align: center;
}

.special__text {
  font-size: 1.8rem;
  letter-spacing: .1em;
  line-height: 2;
  margin-top: 2.4rem;
  text-align: center;
}

.special__subTitle {
  background: var(--colorPaleBlue);
  border-radius: 10rem;
  color: var(--colorMain);
  font-size: 1.8rem;
  letter-spacing: .1em;
  line-height: 2;
  text-align: center;
}

.logo {
  margin-top: 7rem;
}

.logo__column {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 32rem auto;
  margin-top: 3.2rem;
}

.logo__content {
  display: grid;
  gap: 2.4rem;
}

.logo__heading {
  color: var(--colorMain);
  font-size: 1.8rem;
  letter-spacing: .1em;
  line-height: 2;
}

.logo__text {
  font-size: 1.5rem;
  letter-spacing: .1em;
  line-height: 2;
  margin-top: .4rem;
}

.catchphrase {
  margin-top: 7rem;
}

.catchphrase__lead {
  color: var(--colorMain);
  font-size: 4rem;
  letter-spacing: .17em;
  line-height: 2;
  margin-top: 3.2rem;
  text-align: center;
}

.catchphrase__text {
  color: var(--colorBlack);
  font-size: 1.5rem;
  letter-spacing: .1em;
  line-height: 2;
  margin-top: 2.4rem;
  text-align: center;
}

.comments__column {
  display: grid;
  gap: 4rem;
  margin: 6.4rem auto 0;
  max-width: 84rem;
  width: 100%;
}

.comments__columnItem {
  border: .1rem solid var(--colorMain);
  box-shadow: 8px 8px 0 var(--colorMain);
  color: var(--colorMain);
  font-size: 1.5rem;
  letter-spacing: .1em;
  line-height: 2;
  padding: 2.4rem;
}

.comments__columnName {
  font-size: 1.4rem;
  letter-spacing: .1em;
  line-height: 2;
  margin-top: .8rem;
  text-align: end;
}

.special__section--voice .special__sectionTitle {
  font-size: 3.2rem;
}

.voice__inner {
  height: 91.2rem;
  margin-top: 4rem;
  position: relative;
}

.voice__wrapper {
  position: absolute;
  width: 26.2rem;
}

.voice__wrapper:nth-of-type(2) {
  left: 0;
  top: 29rem;
}

.voice__wrapper:nth-of-type(3) {
  left: 22%;
  top: 4rem;
}

.voice__wrapper:nth-of-type(4) {
  right: 17.5%;
  top: 3rem;
}

.voice__wrapper:nth-of-type(5) {
  right: -2rem;
  top: 32rem;
}

.voice__wrapper:nth-of-type(6) {
  bottom: 8.5rem;
  left: 4%;
}

.voice__wrapper:nth-of-type(7) {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.voice__wrapper:nth-of-type(8) {
  bottom: 2rem;
  right: 2%;
  width: 28.2rem;
}

.voice__item {
  position: relative;
}

.voice__item::before {
  border-radius: 50%;
  content: "";
  height: 20.1rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 20.1rem;
}

.voice__item.bg-lightBlue::before {
  background: rgba(93, 201, 226, .1);
}

.voice__item.bg-pink::before {
  background: rgba(207, 15, 48, .1);
}

.voice__item.bg-purple::before {
  background: rgba(15, 29, 127, .1);
}

.voice__text {
  color: var(--colorMain);
  font-size: 1.4rem;
  letter-spacing: .1em;
  line-height: 2;
}

.voice__name {
  color: var(--colorMain);
  font-size: 1.4rem;
  letter-spacing: .1em;
  line-height: 2;
  margin-top: 1.6rem;
  text-align: end;
}

.voice__illust {
  left: 50%;
  max-width: 51.2rem;
  position: absolute;
  top: 53%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
}

@media screen and (max-width: 1240px) {
  .special__inner {
    padding: 8rem 4rem;
  }


  .voice__wrapper:nth-of-type(8) {
    right: 0;
  }
}

@media screen and (max-width: 1023px) {
  .logo__column {
    grid-template-columns: 1fr;
  }

  .logo__image {
    margin-inline: auto;
    max-width: 40rem;
    width: 100%;
  }

  .voice__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 6rem;
    height: unset;
    justify-content: center;
  }

  .voice__wrapper {
    position: unset;
  }

  .voice__wrapper:nth-of-type(7) {
    transform: unset;
  }

  .voice__illust {
    max-width: 59rem;
    position: unset;
    transform: unset;
  }

  .voice__wrapper:nth-of-type(8) {
    width: 26.2rem;
  }
}

@media screen and (max-width: 767px) {
  .special__inner {
    padding: 4rem 2rem;
  }

  .special__hgroup h2 {
    font-size: 3.2rem;
  }

  .special__hgroup p {
    font-size: 1.8rem;
  }

  .special__section {
    margin-top: 3rem;
  }

  .special__sectionTitle {
    font-size: 1.5rem;
  }

  .special__section--voice .special__sectionTitle {
    font-size: 1.5rem;
  }

  .special__text {
    font-size: 1.4rem;
    text-align: start;
  }

  .catchphrase__lead {
    font-size: 2.5rem;
  }

  .catchphrase__text {
    font-size: 1.4rem;
    text-align: start;
  }

  .comments__column {
    margin-top: 3.6rem;
  }
}

/* ----------------------------------
    footer
-------------------------------------*/
footer {
  background-color: var(--colorMain);
  background-image: url(../images/bg-footer.png);
  background-position: center;
  background-repeat: repeat;
  background-size: contain;
  padding-block: 12rem 0;
}

footer .container1080 {
  position: relative;
  z-index: 1;
}

.registration__title {
  color: var(--colorWhite);
  font-size: 4rem;
  letter-spacing: .1em;
  line-height: 2;
  text-align: center;
}

.registration__text {
  color: var(--colorWhite);
  font-size: 1.4rem;
  letter-spacing: .1em;
  line-height: 2;
  margin-top: 1.6rem;
  text-align: center;
}

.registration__button {
  align-items: center;
  background: var(--colorDarkLightBlue);
  border-radius: 5rem;
  color: var(--colorMain);
  display: flex;
  font-size: 1.8rem;
  height: 6.8rem;
  justify-content: center;
  letter-spacing: .1em;
  line-height: 2;
  margin: 4rem auto 0;
  max-width: 31.7rem;
  width: 100%;
}

.sns__column {
  align-items: center;
  display: grid;
  gap: 3.2rem;
  grid-template-columns: repeat(4,1fr);
  margin: 12rem auto 0;
  max-width: 22.4rem;
}

.footer__copyright {
  color: var(--colorWhite);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .02em;
  margin-top: 6rem;
  text-align: center;
}

.footerBottom__text {
  color: rgba(255, 255, 255, .2);
  font-family: var(--fontMontserrat);
  font-size: 17.6rem;
  height: 15rem;
  letter-spacing: .02em;
  line-height: 1;
  margin-top: 4.5rem;
  overflow: hidden;
  text-align: center;
}

@media screen and  (max-width: 1200px) {
  footer {
    padding-bottom: 0;
  }

  .registration__title {
    font-size: 3rem;
  }

  .registration__text {
    font-size: 1.2rem;
  }

  .registration__button {
    font-size: 1.5rem;
    height: 5rem;
    max-width: 26rem;
  }

  .footerBottom__text {
    font-size: 15vw;
    height: 13vw;
  }
}

.registration__text .for-pc {
  display: block;
}

@media screen and  (max-width: 409px) {
  .registration__text .for-pc {
    display: none;
  }
}