@media screen and (min-width: 1080px) {
  .pc-none:not(:root) {
      display: none;
  }
}

@media screen and (max-width: 1079px) {
  .sp-none:not(:root) {
      display: none;
  }
}

@media (hover: hover) {
  .fv__button:hover {
      box-shadow: 0 5px 8px 2px rgba(0, 0, 0, 0.14);
      transform: translateY(-2px);
      filter: brightness(110%);
      text-decoration: none;
      color: #333;
      transition: all 0.3s;
  }
  .fv__button:hover .feature__icon {
      transition: all 0.3s;
      transform: translateX(3px);
  }
  .feature__button:hover {
      box-shadow: 0 5px 8px 2px rgba(0, 0, 0, 0.14);
      transform: translateY(-2px);
      filter: brightness(110%);
      text-decoration: none;
      color: #fff;
      transition: all 0.3s;
  }
  .feature__button:hover .feature__icon {
      transition: all 0.3s;
      transform: translateX(3px);
  }
  .companies__button:hover {
      box-shadow: 0 5px 8px 2px rgba(0, 0, 0, 0.14);
      transform: translateY(-2px);
      filter: brightness(110%);
      text-decoration: none;
      color: #2d96dc;
      transition: all 0.3s;
  }
  .companies__button:hover .columns__icon {
      transition: all 0.3s;
      transform: translateX(3px);
  }
  .flow__button:hover {
      box-shadow: 0 5px 8px 2px rgba(0, 0, 0, 0.14);
      transform: translateY(-2px);
      filter: brightness(110%);
      text-decoration: none;
      color: #fff;
      transition: all 0.3s;
  }
  .flow__button:hover .feature__icon {
      transition: all 0.3s;
      transform: translateX(3px);
  }
  .voices__button:hover {
      box-shadow: 0 5px 8px 2px rgba(0, 0, 0, 0.14);
      transform: translateY(-2px);
      filter: brightness(110%);
      text-decoration: none;
      color: #fff;
      transition: all 0.3s;
  }
  .columns__button:hover {
      box-shadow: 0 5px 8px 2px rgba(0, 0, 0, 0.14);
      transform: translateY(-2px);
      filter: brightness(110%);
      text-decoration: none;
      color: #2d96dc;
      transition: all 0.3s;
  }
  .columns__button:hover .columns__icon {
      transition: all 0.3s;
      transform: translateX(3px);
  }
  .events__button:hover {
      box-shadow: 0 5px 8px 2px rgba(0, 0, 0, 0.14);
      transform: translateY(-2px);
      filter: brightness(110%);
      text-decoration: none;
      color: #fff;
      transition: all 0.3s;
  }
  .events__button:hover .columns__icon {
      transition: all 0.3s;
      transform: translateX(3px);
  }
  .registration__button:hover {
      box-shadow: 0 5px 8px 2px rgba(0, 0, 0, 0.14);
      transform: translateY(-2px);
      filter: brightness(110%);
      text-decoration: none;
      color: #fff;
      transition: all 0.3s;
  }
  .registration__button:hover .footer__img01 {
      transition: all 0.3s;
      transform: translateX(3px);
  }
  .footer__button:hover {
      box-shadow: 0 5px 8px 2px rgba(0, 0, 0, 0.14);
      transform: translateY(-2px);
      filter: brightness(110%);
      text-decoration: none;
      color: #2d96dc;
      transition: all 0.3s;
  }
  .footer__button:hover .footer__img01 {
      transition: all 0.3s;
      transform: translateX(3px);
  }
  .header__button01:hover {
      color: #2d96dc;
  }
  .header__button02:hover {
      background-color: #2d96dc;
      filter: brightness(110%);
      color: #fff;
  }
  .header__button03:hover {
      background-color: #fff;
      filter: brightness(110%);
      color: #2d96dc;
  }
}

.header * {
  box-sizing: border-box;
}

.header {
  padding: 5% 4% 4%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.header a {
  text-decoration: none;
}
.header p {
  margin: 0;
}
@media screen and (min-width: 1080px) {
  .header {
      padding: 1.6% 9.4%;
      position: fixed;
      top: 0;
      left: auto;
      width: 100%;
      z-index: 10;
      background-color: #fff;
      z-index: 300;
  }
}

.header__group01 {
  width: 50%;
}
@media screen and (min-width: 1080px) {
  .header__group01 {
      cursor: pointer;
      width: 16%;
      white-space: nowrap;
  }
}

.header__group02 {
  width: 29%;
}
@media screen and (min-width: 1080px) {
  .header__group02 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 38.2%;
  }
}

@media screen and (min-width: 1080px) and (max-width: 1300px) {
  .header__group02 {
      width: 50%;
  }
}
.header__button01 {
  display: block;
  padding: 1% 1% 1%;
  font-size: 4.2666666667vw;
  font-weight: bold;
  color: #2d96dc;
  text-align: center;
}
@media screen and (min-width: 1080px) {
  .header__button01 {
      font-size: 16px;
  }
}

.header__button02 {
  transition: all 0.3s;
  display: block;
  border: 3px solid #2d96dc;
  border-radius: 5px;
  padding: 1% 1% 1%;
  font-size: 4.2666666667vw;
  font-weight: bold;
  color: #2d96dc;
  text-align: center;
}
@media screen and (min-width: 1080px) {
  .header__button02 {
      font-size: 16px;
      width: 28%;
  }
}

.header__button03 {
  transition: all 0.3s;
  display: block;
  border: 3px solid #2d96dc;
  background-color: #2d96dc;
  border-radius: 5px;
  padding: 1% 1% 1%;
  font-size: 4.2666666667vw;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
@media screen and (min-width: 1080px) {
  .header__button03 {
      font-size: 16px;
      width: 28%;
  }
}

@media screen and (min-width: 1080px) {
  .header__text01 {
      margin-top: 2%;
      font-size: 10px;
  }
}

.header__note {
  display: none;
  position: absolute;
  top: 0%;
  line-height: 1.2;
  left: 100%;
  padding: 4px;
  font-size: clamp(10px, 1vw, 10px);
  font-weight: bold;
  color: #2d96dc;
  border: 2px solid #2d96dc;
}

@media screen and (min-width: 1080px) and (max-width: 1366px) {
  .header__note {
      top: 0%;
      left: 110%;
  }
}

@media screen and (min-width: 1080px) {
  .header__group01:hover .header__note {
      display: block;
  }
}

@media screen and (max-width: 1079px) {
  .header__group01:hover .header__note {
      display: none;
  }
}

@media not screen and (min-width: 1080px) {
  .header__group02 {
      display: none;
  }
}