@charset "utf-8";

a:link {
  color: #fffc83;
  text-decoration: none;
}

a:visited {
  color: #fffc83;
  text-decoration: none;
}

a:hover {
  color: #fff;
  text-decoration: none;
}

.wrap {
  width: 100%;
  overflow: hidden;
}

.header {
  width: 100%;
  overflow: hidden;
}

.header_inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  background-color: #fff;
}

.header_image {
  position: relative;
  z-index: 2;
}

.header_text_1 {
  position: absolute;
  width: 102%;
  top: -0.6%;
  left: -1%;
  z-index: 1;
}

.header_text_2 {
  position: absolute;
  width: 100%;
  top: 1%;
  left: 0;
  z-index: 3;
  text-align: center;
}

.header_text_2 img {
  width: 12.5%;
}

.header_logo {
  position: absolute;
  width: 100%;
  bottom: 2%;
  left: 0;
  z-index: 3;
  text-align: center;
}

.header_logo img {
  width: 62%;
}

.content {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.bg_1 {
  background-image: url(../img/bg_1.png);
  background-size: 50% auto;
  background-color: #ff83c7;
}

.bg_2 {
  background-image: url(../img/bg_1.png);
  background-size: 50% auto;
  background-color: #4ac8ff;
}

.bg_3 {
  background-image: url(../img/bg_2.png);
  background-size: 20% auto;
}

.hane {
  position: absolute;
  opacity: 0.3;
  z-index: 1;
}

.inner {
  position: relative;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 6rem 0;
  z-index: 2;
}

.title {
  position: relative;
  width: 100%;
  margin: 0 auto 6rem;
  text-align: center;
}

.title img {
  width: 80%;
}

.gpx {
  position: relative;
  width: 100%;
  padding: 5rem;
  background-image: url(../img/frame_1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.award {
  width: 30%;
  margin: 0 auto 2rem;
}

.award-2 {
  width: 25%;
  margin: 0 auto 2rem;
}

.name {
  position: absolute;
  bottom: -1.6rem;
  left: 35%;
  width: 30%;
  aspect-ratio: 1 / 0.2;
  margin: 0 auto;
  background-image: url(../img/name_bg_1.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.name p {
  display: inline-block;
  font-size: 22px;
  font-weight: 500;
  color: #fff;
}

.name p span {
  font-size: 80%;
}

.name p.xid {
  padding: 0 0 0 .5em;
  font-size: 18px;
}

.name p.xid:first-letter {
  font-size: 120%;
}

.gpx-comment {
  width: 70%;
  margin: 5rem auto 0;
  padding: 4rem 5rem 5rem 5rem;
  border-radius: 25px;
  box-shadow: 4px 4px 0 #e459a5;
  background-image: url(../img/bg_2.png);
  background-size: 20% auto;
}

.gpx-title {
  width: 60%;
  margin: 0 auto 3rem;
}

.gpx-comment p {
  color: #ff83c7;
  font-size: 20px;
}

.ex-1 {
  position: relative;
  width: 60%;
  margin: 0 auto 6rem;
  padding: 5rem;
  background-image: url(../img/frame_2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ex-2 {
  position: relative;
  width: 60%;
  margin: 0 auto;
  padding: 5rem;
  background-image: url(../img/frame_3.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.name-ex {
  position: absolute;
  bottom: -1.6rem;
  left: 27%;
  width: 46%;
  aspect-ratio: 1 / 0.2;
  margin: 0 auto;
  background-image: url(../img/name_bg_2.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.name-ex p {
  display: inline-block;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}

.name-ex p span {
  font-size: 80%;
}

.name-ex p.xid {
  padding: 0 0 0 .5em;
  font-size: 18px;
}

.name-ex p.xid:first-letter {
  font-size: 120%;
}

.review-title {
  width: 40%;
  margin: 0 auto 3rem;
}

.review {
  position: relative;
  width: 70%;
  aspect-ratio: 1 / 0.59;
  margin: 0 auto 6rem;
  padding: 0 8rem;
  background-image: url(../img/frame_4.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.review p {
  color: #ff83c7;
  font-size: 16px;
}

.works {
  column-count: 4;
  column-gap: 3rem;
}

.works-item {
  margin-bottom: 3rem;
  display: block;
  break-inside: avoid;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

.works-item img {
  width: 100%;
}

.works-item p {
  padding: .3em 0;
  background-color: #ff83c7;
  text-align: center;
  font-size: 14px;
}

.thanks {
  position: relative;
  width: 100%;
  margin: 6rem auto 0;
  text-align: center;
}

.thanks img {
  width: 80%;
}

.footer {
  position: relative;
  z-index: 3;
}

.footer_inner {
  width: 100%;
  padding: 4rem 0;
}

.social {
  margin: 0 0 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social_item {
  width: 36px;
  margin: 0 1rem;
}

.social_item img {
  width: 100%;
}

.footer p {
  font-size: 12px;
  color: #fff;
  text-align: center;
  letter-spacing: 0;
}

@media screen and (min-width: 1px) and (max-width: 743px) {
  .pc_display {
    display: none;
  }

  .pc {
    display: none;
  }

  .wrap {
    width: 100%;
    overflow: hidden;
  }

  .header_logo {
    bottom: 0;
  }

  .header_logo img {
    width: 66%;
  }

  .bg_1 {
    background-size: 100% auto;
  }

  .bg_2 {
    background-size: 100% auto;
  }

  .bg_3 {
    background-size: 50% auto;
  }

  .inner {
    width: 94%;
    padding: 3rem 0;
  }

  .title {
    width: 100%;
    margin: 0 auto 4rem;
  }

  .title img {
    width: 100%;
  }

  .gpx {
    padding: 2rem;
  }

  .award {
    width: 45%;
    margin: 0 auto 1rem;
  }

  .award-2 {
    width: 40%;
    margin: 0 auto 1rem;
  }

  .name {
    bottom: -2rem;
    left: 17%;
    width: 66%;
  }

  .name p {
    font-size: 4.2vw;
  }

  .name p span {
    font-size: 80%;
  }

  .name p.xid {
    padding: 0 0 0 .5em;
    font-size: 4.2vw;
  }

  .name p.xid:first-letter {
    font-size: 110%;
  }

  .gpx-comment {
    width: 100%;
    margin: 3rem auto 0;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 3px 3px 0 #e459a5;
    background-size: 50% auto;
  }

  .gpx-title {
    width: 80%;
    margin: 0 auto 2rem;
  }

  .gpx-comment p {
    font-size: 3.8vw;
  }

  .ex-1 {
    width: 80%;
    margin: 0 auto 4rem;
    padding: 2.5rem;
  }

  .ex-2 {
    width: 80%;
    padding: 2.5rem;
  }

  .name-ex {
    bottom: -1.5rem;
    left: 17%;
    width: 66%;
  }

  .name-ex p {
    font-size: 3.8vw;
  }

  .name-ex p span {
    font-size: 80%;
  }

  .name-ex p.xid {
    padding: 0 0 0 .5em;
    font-size: 3.8vw;
  }

  .name-ex p.xid:first-letter {
    font-size: 110%;
  }

  .review-title {
    width: 80%;
    margin: 0 auto 1.5rem;
  }

  .review {
    width: 100%;
    aspect-ratio: 1 / 1.36;
    margin: 0 auto 4rem;
    padding: 0 4rem;
    background-image: url(../img/sp_frame_4.png);
  }

  .review p {
    color: #ff83c7;
    font-size: 3.8vw;
  }

  .works {
    width: 94%;
    margin: 0 auto;
    column-count: 2;
    column-gap: 2rem;
  }

  .works-item {
    margin-bottom: 2rem;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
  }

  .works-item img {
    width: 100%;
  }

  .works-item p {
    padding: .3em 0;
    background-color: #ff83c7;
    text-align: center;
    font-size: 3.4vw;
  }

  .thanks {
    margin: 3rem auto 0;
  }

  .thanks img {
    width: 100%;
  }

  .footer_inner {
    width: 100%;
    padding: 4rem 0;
  }

  .social {
    margin: 0 0 2rem;
  }

  .social_item {
    width: 30px;
    margin: 0 1rem;
  }

}

@media screen and (min-width: 744px) and (max-width: 1024px) {
  .sp_display {
    display: none;
  }

  .sp {
    display: none;
  }

  .name {
    bottom: -1.8rem;
    left: 27%;
    width: 46%;
  }

  .name p {
    font-size: 2.8vw;
  }

  .name p.xid {
    font-size: 2.8vw;
  }

  .name p.xid:first-letter {
    font-size: 110%;
  }

  .gpx-comment {
    width: 80%;
    margin: 6rem auto 0;
    padding: 3rem;
  }

  .gpx-title {
    width: 70%;
    margin: 0 auto 2.5rem;
  }

  .gpx-comment p {
    font-size: 2.6vw;
  }

  .award {
    width: 40%;
    margin: 0 auto 1.5rem;
  }

  .award-2 {
    width: 35%;
    margin: 0 auto 1.5rem;
  }

  .ex-1 {
    width: 80%;
    margin: 0 auto 6rem;
    padding: 4rem;
  }

  .ex-2 {
    width: 80%;
    padding: 4rem;
  }

  .name-ex {
    bottom: -2rem;
    left: 25%;
    width: 50%;
  }

  .name-ex p {
    font-size: 2.6vw;
  }

  .name-ex p span {
    font-size: 80%;
  }

  .name-ex p.xid {
    padding: 0 0 0 .5em;
    font-size: 2.6vw;
  }

  .name-ex p.xid:first-letter {
    font-size: 110%;
  }

  .review {
    width: 100%;
    margin: 0 auto 6rem;
    padding: 0 7rem;
  }

  .review p {
    color: #ff83c7;
    font-size: 2.2vw;
  }

  .works {
    width: 100%;
    column-count: 3;
    column-gap: 3rem;
  }

  .works-item {
    margin-bottom: 3rem;
  }

  .works-item p {
    padding: .3em 0;
    font-size: 2vw;
  }

  .thanks {
    margin: 5rem auto 0;
  }

  .thanks img {
    width: 100%;
  }

  .social_item {
    width: 32px;
    margin: 0 1rem;
  }

}

@media screen and (min-width: 1025px) {
  .sp_display {
    display: none;
  }

  .sp {
    display: none;
  }

  .gpx picture,
  .ex-1 picture,
  .ex-2 picture {
    display: block;
    background-color: #fff;
  }

  a.btn_opacity img {
    transition: all 0.3s;
  }

  a.btn_opacity img:hover {
    opacity: 0.6;
  }

  a.btn_over img {
    transition: transform 0.3s;
  }

  a.btn_over img:hover {
    transform: scale(1.05);
  }
}