@charset "UTF-8";

:root {
  --main1: #f298be;
  --main1-h: #f05f9e;
  --main2: #70c565;
  --main2-h: #489c3c;

  --trans: 0.2s ease-in-out;
}

#contents * {
  box-sizing: border-box;
}
#contents img {
  display: block;
  user-select: none;
  pointer-events: none;
}

/* fv */
.fv {
  margin-top: 4rem;
  margin-bottom: 5rem;
}
.fv img {
  margin: 0 auto;
}

/* menu */
.menubox-in {
  justify-content: center;
}
.menubox-in > div {
  margin: 25px 12px 0 12px;
}
.menubox-in > div:nth-child(3n) {
  margin-right: 0;
}
.menubox-in > div:first-child,
.menubox-in > div:nth-child(3n + 1) {
  margin-left: 0;
}
.menubox-center > div:first-child {
  margin-right: 10px;
}
.ta-center {
  text-align: center !important;
}

/* button */
.pinklink a {
  position: relative;
  display: block;
  width: 900px;
  margin: 0 auto;
  margin-top: 50px;
  padding: 20px;
  border-radius: 70px;
  letter-spacing: 0.05em;
  font-size: 30px;
  text-align: center;
  color: #fff;
  background-color: var(--main1);
  transition: var(--trans);
  text-shadow: 0px 0px 8px rgb(0 0 0 / 0.3);
}
.pinklink a::after {
  position: absolute;
  content: "";
  top: calc(50% - (1rem / 2));
  right: calc(50% - (52rem / 2));
  width: 1rem;
  aspect-ratio: 1;
  border-right: solid 3px #fff;
  border-bottom: solid 3px #fff;
  rotate: -45deg;
  transition: var(--trans);
}
.green-link a {
  background-color: var(--main2);
}
.pinklink.linkm a {
  padding: 30px;
}
.pinklink small {
  display: block;
  font-size: 16px;
  font-weight: normal;
}
.green-link small {
  display: inline-block !important;
}
.tunen {
  padding-top: 80px;
}
.fsz13pt {
  font-size: 13pt;
}
.mt2rem {
  margin-top: 2rem !important;
}
.mt45rem {
  margin-top: 4.5rem !important;
}

/* PC */
@media screen and (min-width: 600px) {
  .pinklink a:hover::after {
    right: calc(50% - (53rem / 2));
  }
  .pinklink a:hover {
    background-color: var(--main1-h);
  }
  .green-link a:hover {
    background-color: var(--main2-h);
  }
}

/* SP */
@media screen and (max-width: 599px) {
  .menubox-in > div {
    margin: 10px 0 0 0;
  }
  .pinklink a {
    width: 100%;
    margin: 0;
    margin-top: 1.5rem;
    padding: 10px;
    font-size: 20px;
    line-height: 1.2;
  }
  .pinklink a::after {
    top: calc(50% - (0.75rem / 2));
    right: calc(50% - (20rem / 2));
    width: 0.75rem;
    border-width: 2px;
  }
  .pinklink.linkm a {
    margin: 0 10px;
    margin-top: 20px;
    padding: 20px 10px;
    font-size: 24px;
  }
  .pinklink.linkm a::after {
    font-size: 40px;
  }
}