.hero {
  position: relative;
}

.hero__container {
  position: relative;
  margin: 0 auto;
  width: min(100vw, 1200px);
  z-index: 6;
}

.hero__catch {
  position: absolute;
  width: min(100%, 1200px);
  margin-top: min(1.3vw, 30px);
  margin-left: -1em;
  font-size: clamp(40px, 23.3333333333px + 2.0833333333vw, 50px);
}
@media (max-width: 800px) {
  .hero__catch {
    margin-top: min(1.3vw, 30px);
    font-size: clamp(30px, 21.1764705882px + 2.3529411765vw, 40px);
  }
}

.hero__deco {
  display: block;
  position: relative;
  width: 12em;
}

.hero__copy {
  position: absolute;
  top: 0;
  display: block;
  margin-top: min(3.33vw, 40px);
  padding-left: 2em;
  -webkit-transform: rotate(-9deg);
          transform: rotate(-9deg);
}
.hero__copy span {
  font-size: clamp(32px, 18.6666666667px + 1.6666666667vw, 40px);
}
@media (max-width: 800px) {
  .hero__copy {
    margin-top: 0.8em;
  }
  .hero__copy span {
    font-size: clamp(25px, 18.8235294118px + 1.6470588235vw, 32px);
  }
}

.hero__mv {
  display: block;
  margin: 0 auto;
  width: min(100%, 1200px);
  position: relative;
  z-index: 5;
}
@media (max-width: 800px) {
  .hero__mv {
    width: 100%;
    height: min(60vh, 600px);
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
  }
}

.first__container {
  margin: min(100px, 9.765vw) auto min(40px, 39.06vw);
  width: min(96%, 1024px);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.first__figure {
  width: 52%;
}
@media (max-width: 800px) {
  .first__figure {
    margin-bottom: 10px;
    width: clamp(375px, 70vw, 400px);
  }
}

.first__img {
  width: 100%;
  vertical-align: top;
}

.first__description {
  position: relative;
  margin-left: -4%;
  padding: 3em;
  width: 52%;
  border: 3px solid #3DB9EB;
  background: #fff;
}
@media (max-width: 800px) {
  .first__description {
    margin: 0 auto 12px;
    padding: 1em 5vw 2em;
    width: min(100%, 500px);
  }
}

.first__heading {
  position: relative;
  margin-bottom: 0.5em;
  height: 2em;
  line-height: 2em;
  font-size: clamp(22px, 7.7142857143px + 1.7857142857vw, 26px);
  border-bottom: 4px solid #3DB9EB;
}
.first__heading::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 1.5em;
  height: 4px;
  background: #F2AB2F;
}
@media (max-width: 800px) {
  .first__heading::after {
    width: 1.5em;
  }
}
@media (max-width: 800px) {
  .first__heading {
    font-size: clamp(24px, 20.6666666667px + 0.8888888889vw, 26px);
    border-bottom: 4px solid #3DB9EB;
    text-align: center;
  }
  .first__heading::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 3em;
    height: 4px;
    background: #F2AB2F;
  }
}
@media (max-width: 800px) and (max-width: 800px) {
  .first__heading::after {
    width: 3em;
  }
}

.first__text {
  font-weight: 400;
}
@media (max-width: 800px) {
  .first__text {
    width: 96%;
  }
}

.first__btn {
  display: block;
  position: relative;
  width: 25%;
  height: 3em;
  line-height: 3em;
  font-size: clamp(16px, 9.3333333333px + 0.8333333333vw, 20px);
  text-align: center;
  letter-spacing: 0;
  z-index: 2;
}
.first__btn a {
  display: block;
  width: 100%;
  height: 100%;
  background: #3DB9EB;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.first__btn a:link,
.first__btn a:visited,
.first__btn a:active,
.first__btn a:hover {
  color: #fff;
}
.first__btn a::after {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 50%;
  right: 0.5em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-style: solid;
  border-width: 0.6em 0 0.6em 0.6em;
  border-color: transparent transparent transparent #fff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform-origin: center 0.3em;
          transform-origin: center 0.3em;
}
.first__btn a:hover::after {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}
@media (max-width: 800px) {
  .first__btn {
    font-size: 16px;
    width: 200px;
  }
}
.first__btn::before, .first__btn::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.first__btn::before {
  background: #F2E52F;
}
.first__btn::after {
  background: #EE6337;
}
.first__btn:hover::before {
  -webkit-transform: rotate(4deg) scale(1.05);
          transform: rotate(4deg) scale(1.05);
}
.first__btn:hover::after {
  -webkit-transform: rotate(1.5deg) scale(1.05);
          transform: rotate(1.5deg) scale(1.05);
}
.first__btn span {
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.first__btn:hover span {
  letter-spacing: 0.075em;
}
@media (min-width: 801px) {
  .first__btn {
    position: absolute;
    right: -1em;
    bottom: 0;
  }
}

.procedure {
  position: relative;
  z-index: 5;
  overflow: visible;
}
.procedure::before, .procedure::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}
.procedure::before {
  background: #3DB9EB;
  -webkit-transform: skew(0, -1deg);
          transform: skew(0, -1deg);
  height: 100%;
  z-index: -1;
}
.procedure::after {
  background: #F2E52F;
  -webkit-transform: skew(0, -3deg);
          transform: skew(0, -3deg);
  height: 100%;
  z-index: -2;
}

.procedure__letter {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 90%;
  width: min(1300px, 100%);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.procedure__container {
  margin: 0 auto;
  padding: 150px 0 50px;
  width: min(90%, 976px);
}
@media (max-width: 800px) {
  .procedure__container {
    padding: min(100px, 18.75vw) 0 min(50px, 6.25vw);
  }
}

.procedure__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.procedure__item {
  width: 48%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.procedure__img {
  width: 100%;
}

.procedure__btn {
  display: block;
  position: relative;
  background: #fff;
  margin-top: -2em;
  width: 90%;
  height: 2.7em;
  border: 4px solid #EE6337;
  line-height: calc(2.7em - 8px);
  text-align: center;
  overflow: hidden;
  font-size: clamp(16px, -19.7142857143px + 4.4642857143vw, 26px);
}
@media (max-width: 800px) {
  .procedure__btn {
    margin: 0;
    width: 100%;
    border: 2px solid #EE6337;
    line-height: calc(2.7em - 4px);
    font-size: clamp(14px, 8.7058823529px + 1.4117647059vw, 20px);
  }
}
.procedure__btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -120%;
  width: 110%;
  height: 110%;
  -webkit-transform: skewX(-25deg);
          transform: skewX(-25deg);
  background: #EE6337;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.procedure__btn:hover::before {
  left: -5%;
}
.procedure__btn span {
  position: relative;
  z-index: 3;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.procedure__btn:hover span {
  color: #fff;
}

.event__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  width: min(100%, 1024px);
}

.event__copy-container {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 1em;
  width: 16em;
  font-size: clamp(24px, 14px + 1.25vw, 30px);
}
@media (max-width: 800px) {
  .event__copy-container {
    font-size: clamp(16px, 14.2352941176px + 0.4705882353vw, 18px);
    margin-top: 2.5em;
    width: 16em;
  }
}

.event__copy {
  position: absolute;
  top: 50%;
  left: 50%;
  padding-left: 0.5em;
  -webkit-transform: rotate(-2deg) translate(-50%, -50%);
          transform: rotate(-2deg) translate(-50%, -50%);
  color: #fff;
  z-index: 4;
}

.event__deco {
  width: 100%;
}

.event__img {
  margin-top: min(80px, 12.4vw);
  max-width: 750px;
  width: 100%;
}
@media (max-width: 800px) {
  .event__img {
    margin-top: 4em;
  }
}

.event__text {
  margin: -1em 0 0.5em;
  padding: 2em 4em;
  width: 90%;
  border: 4px solid #3DB9EB;
  background: #fff;
  font-weight: 400;
  z-index: 4;
}
@media (max-width: 800px) {
  .event__text {
    margin: 0.5em 0.5em;
    padding: 1.5em 2em;
    width: 100%;
    font-size: 14px;
  }
}

.event__btn {
  display: block;
  position: relative;
  width: 200px;
  height: 3em;
  line-height: 3em;
  font-size: clamp(16px, 9.3333333333px + 0.8333333333vw, 20px);
  text-align: center;
  letter-spacing: 0;
  z-index: 2;
}
.event__btn a {
  display: block;
  width: 100%;
  height: 100%;
  background: #3DB9EB;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.event__btn a:link,
.event__btn a:visited,
.event__btn a:active,
.event__btn a:hover {
  color: #fff;
}
.event__btn a::after {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 50%;
  right: 0.5em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-style: solid;
  border-width: 0.6em 0 0.6em 0.6em;
  border-color: transparent transparent transparent #fff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform-origin: center 0.3em;
          transform-origin: center 0.3em;
}
.event__btn a:hover::after {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}
@media (max-width: 800px) {
  .event__btn {
    font-size: 16px;
    width: 200px;
  }
}
.event__btn::before, .event__btn::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.event__btn::before {
  background: #F2E52F;
}
.event__btn::after {
  background: #EE6337;
}
.event__btn:hover::before {
  -webkit-transform: rotate(4deg) scale(1.05);
          transform: rotate(4deg) scale(1.05);
}
.event__btn:hover::after {
  -webkit-transform: rotate(1.5deg) scale(1.05);
          transform: rotate(1.5deg) scale(1.05);
}
.event__btn span {
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.event__btn:hover span {
  letter-spacing: 0.075em;
}

.report__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  width: min(98%, 1024px);
}
@media (max-width: 800px) {
  .report__container {
    width: 100%;
  }
}

.report__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 1em;
  padding: 2em 4em;
  width: min(100%, 1024px);
  background: #fff;
}
@media (max-width: 800px) {
  .report__list {
    padding: 1em 1em;
  }
}

.report__link {
  position: relative;
}
@media (max-width: 800px) {
  .report__link:not(:nth-child(1)) {
    display: none;
  }
}
.report__link::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -4%;
  border-radius: 0.5em;
  width: 108%;
  height: 100%;
  background: #D4F2FF;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
}
@media (max-width: 800px) {
  .report__link::before {
    width: 100%;
    left: 0;
  }
}
.report__link:hover::before {
  opacity: 0.5;
}

.report__item {
  position: relative;
  margin-bottom: 1px;
  padding: 1em 0;
  display: grid;
}
@media (min-width: 801px) {
  .report__item {
    grid-template: "img title time" "img event event" "img text  text" 2fr/auto 1fr auto;
  }
}
@media (max-width: 800px) {
  .report__item {
    padding: 5%;
    grid-template: "img   img   img" "title title title" "event event event" "text  text  text" "..... ..... time";
  }
}
.report__link:not(:last-child) .report__item::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 1px;
  width: min(80vw, 880px);
  background: #060606;
}
@media (max-width: 800px) {
  .report__link:not(:last-child) .report__item::after {
    display: none;
  }
}

.report__figure {
  grid-area: img;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 1.2em;
  width: min(250px, 24.41vw);
  overflow: hidden;
}
@media (max-width: 800px) {
  .report__figure {
    margin: 0 auto 0.5em;
    width: min(300px, 70vw);
  }
}

.report__link .report__img {
  width: 250px;
  height: 167px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.report__link:hover .report__img {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.report__title {
  grid-area: title;
  margin-bottom: 0.2em;
  padding: 0 2em 0 5px;
  width: 100%;
  font-size: clamp(18px, -3.4285714286px + 2.6785714286vw, 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(15px, 0px + 2.5vw, 20px);
}

.report__time {
  grid-area: time;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: clamp(14px, 6.8571428571px + 0.8928571429vw, 16px);
}
@media (max-width: 800px) {
  .report__time {
    position: relative;
    padding-left: 5px;
  }
  .report__time::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 1px;
    width: 150%;
    background: #060606;
  }
}

.report__event {
  grid-area: event;
  margin-bottom: 0.5em;
  border-top: 2px solid #414141;
}
@media (max-width: 800px) {
  .report__event {
    margin-bottom: 1em;
  }
}

.report__event-name {
  display: inline-block;
  padding: 0.5em 1em;
  background: #414141;
  color: #fff;
  font-size: clamp(14px, 6.8571428571px + 0.8928571429vw, 16px);
}

.report__text {
  grid-area: text;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  padding-left: 5px;
  font-weight: 400;
}
@media (max-width: 800px) {
  .report__text {
    margin-bottom: 1em;
    font-size: clamp(15px, 12px + 0.5vw, 16px);
    -webkit-line-clamp: 6;
  }
}

.report__btn {
  display: block;
  position: relative;
  width: 250px;
  height: 3em;
  line-height: 3em;
  font-size: clamp(16px, 9.3333333333px + 0.8333333333vw, 20px);
  text-align: center;
  letter-spacing: 0;
  z-index: 2;
}
.report__btn a {
  display: block;
  width: 100%;
  height: 100%;
  background: #3DB9EB;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.report__btn a:link,
.report__btn a:visited,
.report__btn a:active,
.report__btn a:hover {
  color: #fff;
}
.report__btn a::after {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 50%;
  right: 0.5em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-style: solid;
  border-width: 0.6em 0 0.6em 0.6em;
  border-color: transparent transparent transparent #fff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform-origin: center 0.3em;
          transform-origin: center 0.3em;
}
.report__btn a:hover::after {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}
@media (max-width: 800px) {
  .report__btn {
    font-size: 16px;
    width: 200px;
  }
}
.report__btn::before, .report__btn::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.report__btn::before {
  background: #F2E52F;
}
.report__btn::after {
  background: #EE6337;
}
.report__btn:hover::before {
  -webkit-transform: rotate(4deg) scale(1.05);
          transform: rotate(4deg) scale(1.05);
}
.report__btn:hover::after {
  -webkit-transform: rotate(1.5deg) scale(1.05);
          transform: rotate(1.5deg) scale(1.05);
}
.report__btn span {
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.report__btn:hover span {
  letter-spacing: 0.075em;
}

.sns__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto 100px;
  width: min(98%, 1024px);
}
@media (max-width: 800px) {
  .sns__container {
    margin: 0 auto min(20vw, 100px);
  }
}

.sns__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
.sns__list::after {
  content: "";
  display: block;
  position: absolute;
  width: 80%;
  height: 2px;
  left: 50%;
  bottom: -1.5em;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #060606;
}

.sns__item {
  margin: 0 0.3em;
  width: 70px;
  height: 70px;
  background: #fff;
  border: 1px solid #060606;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.sns__item:hover.--twitter {
  background: #1d9bf0;
}
.sns__item:hover.--instagram {
  background: #FF0B76;
}
.sns__item:hover.--facebook {
  background: #1877f2;
}

.sns__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
}

.sns__item:hover.--twitter .sns__img, .sns__item:hover.--instagram .sns__img, .sns__item:hover.--facebook .sns__img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}/*# sourceMappingURL=index.css.map */