@charset "UTF-8";
.header__top {
  background-image: radial-gradient(rgba(11, 247, 247, 0.5), rgba(69, 65, 75, 0.5)) !important;
}

.header {
  z-index: 100;
  width: 100%;
  position: fixed;
  background-image: radial-gradient(#0bf7f7, #45414b);
  top: 0;
}
.header .header__inner {
  margin: auto;
  max-width: 136.6rem;
  width: 100%;
  padding-left: 1.8rem;
  padding-right: 1.8rem;
}
.header .header__flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 10rem;
}
.header .header__title {
  font-size: 3rem;
  letter-spacing: 0.1em;
  line-height: 0.83;
  color: #fff;
  font-weight: 700;
}
.header .header__gnavmenu {
  display: flex;
  gap: 3rem;
  font-size: 1.8rem;
  color: #fff;
  line-height: 1.16;
  letter-spacing: 0.1em;
  font-weight: 400;
}
.header .hamburgar {
  display: none;
}
.header .navigation {
  display: none;
}
.header #nav {
  display: none;
}
@media only screen and (max-width:768px) {
  .header .header__flex {
    height: 7rem;
  }
  .header .header__title {
    font-size: 1.8rem;
  }
  .header .header__gnavmenu {
    display: none;
  }
  .header .hamburgar {
    display: block;
    height: 70%;
    aspect-ratio: 1/1;
    position: relative;
    cursor: pointer;
    z-index: 20;
  }
  .header .hamburgar::before, .header .hamburgar::after {
    content: "";
    display: block;
    height: 0.2rem;
    width: 75%;
    background-color: #fff;
    position: absolute;
    transition: 0.2s ease-out;
  }
  .header .hamburgar::before {
    top: 35%;
    left: 5%;
  }
  .header .hamburgar::after {
    bottom: 35%;
    right: 5%;
  }
  .header .hamburgar:hover::before {
    left: 12.5%;
  }
  .header .hamburgar:hover::after {
    right: 12.5%;
  }
  .header .hamburgar.active::before {
    top: 49%;
    left: 12.5%;
    transform: rotate(45deg);
  }
  .header .hamburgar.active::after {
    bottom: 48%;
    right: 12.5%;
    transform: rotate(-45deg);
  }
  .header .in {
    transform: translateX(-100%);
  }
  .header .navigation {
    z-index: 1;
    padding: 6.5rem 4.2rem;
    position: absolute;
    height: 100vh;
    width: 100%;
    left: 100%;
    top: 0;
    background-image: radial-gradient(#0bf7f7, #45414b);
    transition: 0.8s;
    overflow-y: scroll;
    display: block;
  }
  .header #nav {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: 5rem;
  }
  .header .navigation .menu {
    position: relative;
    z-index: 100;
    will-change: transform;
  }
  .header .navigation .menu li {
    text-align: center;
    margin-top: 5rem;
  }
  .header .navigation .menu li a {
    color: #fff;
    font-size: 3.5rem;
    letter-spacing: 0.1em;
  }
}

.about .about__inner {
  padding-left: 1.8rem;
  padding-right: 1.8rem;
  margin: 20rem auto 10rem;
  max-width: 90rem;
  width: 100%;
}
.about .about__title {
  font-size: 5rem;
  font-weight: 300;
  line-height: 1.17;
  letter-spacing: 0.15em;
  color: #222;
  opacity: 0.7;
  text-align: left;
}
.about .about__main {
  max-width: 90rem;
  width: 100%;
  padding-left: 1.8rem;
  padding-right: 1.8rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rem;
}
.about .about__img {
  max-width: 30rem;
  width: 100%;
}
.about .about__img img {
  width: 100%;
}
.about .about__flex {
  max-width: 40rem;
  width: 100%;
}
.about h2 {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.15em;
  color: #222;
  margin-bottom: 2rem;
}
.about h2 span {
  margin-right: 2rem;
}
.about h2 span:last-child {
  margin-right: 0;
}
.about h3 {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.15em;
  color: #222;
  display: block;
  margin-bottom: 2rem;
}
.about dt {
  float: left;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.15em;
  color: #222;
  margin-right: 2rem;
}
.about dd {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.15em;
  color: #222;
  margin-bottom: 2rem;
}
.about dd:last-child {
  margin-bottom: 5rem;
}
@media only screen and (max-width:768px) {
  .about .about__inner {
    margin: 15rem auto 5rem;
  }
  .about .about__title {
    font-size: 4rem;
    font-weight: 300;
    line-height: 1.17;
    letter-spacing: 0.15em;
    color: #222;
    opacity: 0.7;
    text-align: center;
  }
  .about .about__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10rem;
  }
  .about .about__flex {
    text-align: left;
    margin-right: auto;
    max-width: 50rem;
    width: 100%;
    margin-top: 5rem;
  }
}
@media only screen and (max-width:480px) {
  .about h2 {
    font-size: 1.2rem;
  }
  .about h3 {
    font-size: 1.2rem;
  }
  .about dt {
    font-size: 1.2rem;
  }
  .about dd {
    font-size: 1.2rem;
  }
}

.works {
  width: 100%;
  background-color: #f2f2f2;
}
.works .works__inner {
  margin: 10rem auto 0;
  padding-left: 4rem;
  padding-right: 4rem;
  padding-bottom: 20rem;
  width: 100%;
  max-width: 90rem;
}
.works .works__title {
  text-align: left;
  font-size: 5rem;
  font-weight: 300;
  line-height: 1.17;
  letter-spacing: 0.15em;
  color: #222;
  opacity: 0.7;
  padding-top: 10rem;
  margin-bottom: 10rem;
}
.works .works__listBox {
  margin-bottom: 10rem;
}
.works .works__listBox:last-child {
  margin-bottom: 0rem;
}
.works .works__img img {
  width: 100%;
  height: auto;
  cursor: pointer;
}
.works .works__main {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.5;
  color: #222;
}
.works .works__main a:hover {
  opacity: 0.5;
  color: #0bf7f7;
}
.works .works__text h3 {
  margin-bottom: 1rem;
  font-size: 1.6em;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #222;
}
.works .works__text h3 a:hover {
  opacity: 0.5;
  color: #0000cc;
}
.works .works__text p {
  font-size: 1.6em;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #222;
}
@media only screen and (max-width:768px) {
  .works .works__inner {
    margin: 7rem auto 0rem;
    padding-bottom: 10rem;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
  }
  .works .works__title {
    font-size: 4rem;
    font-weight: 300;
    line-height: 1.17;
    letter-spacing: 0.15em;
    color: #222;
    opacity: 0.7;
    text-align: center;
    margin-bottom: 7rem;
  }
}

.contact .contact__inner {
  padding-left: 1.8rem;
  padding-right: 1.8rem;
  margin: 20rem auto 5rem;
  max-width: 60.2rem;
  width: 100%;
}
.contact .contact__title {
  font-size: 5rem;
  font-weight: 300;
  line-height: 1.17;
  letter-spacing: 0.15em;
  color: #222;
  opacity: 0.7;
  text-align: left;
  margin-bottom: 3rem;
}
.contact .contact__announce {
  margin-bottom: 5rem;
  font-size: 1.4rem;
  color: #222;
  font-weight: 300;
  line-height: 1.9;
}
@media only screen and (max-width:768px) {
  .contact .contact__inner {
    margin: 15rem auto 5rem;
  }
  .contact .contact__title {
    font-size: 4rem;
    font-weight: 300;
    line-height: 1.17;
    letter-spacing: 0.15em;
    color: #222;
    opacity: 0.7;
    text-align: center;
  }
}
@media only screen and (max-width:480px) {
  .contact .wpcf7-response-output {
    font-size: 1.2rem;
  }
}

.contact div .wpcf7-response-output {
  border: none;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 1.46;
  color: #0000cc;
  font-weight: 500;
  text-align: center;
}

.reCAPTCHA {
  text-align: center;
}

.contactform {
  width: 100%;
}
.contactform .contactform__inner {
  max-width: 90rem;
  width: 100%;
  margin: auto;
}
.contactform .contact__name,
.contactform .contact__Furigana,
.contactform .contact__email,
.contactform .contact__phone,
.contactform .contact__content {
  text-align: center;
  display: flex;
  margin-bottom: 3.1rem;
  justify-content: left;
  flex-direction: column;
}
.contactform .contact__content {
  margin-bottom: 9.4rem;
}
.contactform .contact___none {
  margin: auto;
  max-width: 60.2rem;
  width: 100%;
  text-align: left;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  line-height: 1.444;
  color: #222;
}
.contactform .contact__fourth {
  margin: auto;
  max-width: 60.2rem;
  width: 100%;
  text-align: left;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  line-height: 1.444;
  color: #222;
}
.contactform .contact__label {
  margin: auto;
  max-width: 60.2rem;
  width: 100%;
  text-align: left;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  line-height: 1.444;
  color: #222;
}
.contactform .contact__label:after {
  content: "必須";
  width: 2.7rem;
  height: 1.9rem;
  padding: 0.05rem 0.535rem;
  background-color: #c2bcbc;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.46;
  border-radius: 0.3rem;
  text-align: center;
}
.contactform .contact__second:after {
  margin-left: 1rem;
}
.contactform .contact__third:after {
  margin-left: 1rem;
}
.contactform .contact__category:after {
  margin-left: 1rem;
}
.contactform .input {
  text-align: left;
  max-width: 60.2rem;
  width: 100%;
  height: 3.3rem;
  border: solid 1px #222;
  border-radius: 0.6rem;
  padding-left: 1.6rem;
  margin-top: 0.5rem;
  font-size: 1.6rem;
}
.contactform textarea {
  font-size: 1.6rem;
}
.contactform .input::-moz-placeholder, .contactform .input__text::-moz-placeholder {
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  line-height: 1.46;
  color: #c2bcbc;
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
}
.contactform .input::placeholder,
.contactform .input__text::placeholder {
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  line-height: 1.46;
  color: #c2bcbc;
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (max-width:375px) {
  .contactform .input::-moz-placeholder, .contactform .input__text::-moz-placeholder {
    font-size: 1.1rem;
  }
  .contactform .input::placeholder,
  .contactform .input__text::placeholder {
    font-size: 1.1rem;
  }
}
.contactform .input__text {
  margin: auto;
  display: flex;
  height: 21.7rem;
  resize: none;
  padding-top: 0.7rem;
  margin-top: 0.5rem;
}
.contactform .contact__btn {
  max-width: 30rem;
  width: 100%;
  text-align: center;
  margin: 0 auto 9rem;
  position: relative;
  cursor: pointer;
}
.contactform .contact__submit {
  max-width: 30rem;
  width: 100%;
  height: 8rem;
  border-radius: 3rem;
  border: 1px solid #222;
  background-color: #fff;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.45;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.contactform .wpcf7-not-valid-tip {
  margin-top: 0.3rem;
  text-align: left;
  color: #dc3232;
  font-size: 1.2em;
  font-weight: normal;
  display: block;
}
.contactform .wpcf7-spinner {
  display: none;
}
@media only screen and (max-width:768px) {
  .contactform .contact__submit {
    height: 6rem;
    border-radius: 2rem;
  }
}

.arrow {
  margin-top: 11.1rem;
  margin-bottom: 5rem;
  display: flex;
  justify-content: space-between;
}
.arrow .PREVIOUS__img {
  width: 100%;
}
.arrow .NEXT__img {
  width: 100%;
}
.arrow .next-link-container {
  margin-left: auto;
}
@media only screen and (max-width:480px) {
  .arrow {
    margin-bottom: 11.5rem;
  }
  .arrow .PREVIOUS__img {
    width: 70%;
  }
  .arrow .NEXT__img {
    width: 70%;
  }
}

.single-work__color {
  opacity: 0.5;
}

footer {
  margin-top: auto;
  width: 100%;
  background-image: radial-gradient(#0bf7f7, #45414b);
  padding-left: 1.8rem;
  padding-right: 1.8rem;
}
footer .footer__inner {
  margin: auto;
}
footer .footer__gnavmenu {
  display: flex;
  gap: 2rem;
  padding-top: 1rem;
  margin-bottom: 4rem;
}
footer .footer__gnavitem {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.17;
  letter-spacing: 0.15em;
  color: #fff;
}
footer .footer__title {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.17;
  letter-spacing: 0.15em;
  color: #fff;
  text-align: right;
  padding-bottom: 1rem;
}
@media only screen and (max-width:480px) {
  footer .footer__gnavmenu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2rem;
  }
  footer .footer__gnavitem {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.17;
    letter-spacing: 0.15em;
  }
  footer .footer__title {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.17;
    letter-spacing: 0.05em;
    text-align: center;
  }
}
@media only screen and (max-width:375px) {
  footer .footer__right {
    display: block;
  }
}

* {
  box-sizing: border-box;
}

.grecaptcha-badge {
  visibility: hidden;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: space-between;
}

a {
  color: inherit;
  text-decoration: none;
}

li {
  list-style: none;
}

.archive__color,
.contact__color,
.about__color,
.front__color {
  opacity: 0.5;
}

.mv {
  position: relative;
  z-index: 1;
  height: 50rem;
  overflow: hidden;
  background-image: radial-gradient(#0bf7f7, #45414b);
}
@media only screen and (max-width:480px) {
  .mv {
    height: 40rem;
  }
}
.mv .mv__Animation {
  font-size: 6rem;
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: 0.15em;
  color: #fff;
  font-family: Helvetica, sans-serif, Arial;
  position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  will-change: transform;
  mix-blend-mode: normal;
}
.mv .mv__Animation span {
  display: inline-block;
}
.mv .mv__circles {
  display: grid;
  place-items: center;
  grid-template-columns: repeat(5, 1fr);
}
.mv .mv__circles li {
  aspect-ratio: 1/1;
  border-radius: 50%;
  position: relative;
  will-change: transform;
  mix-blend-mode: exclusion;
  background-color: #0bf7f7;
  opacity: 0.6;
}
@media only screen and (max-width:768px) {
  .mv .mv__Animation {
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.17;
    letter-spacing: 0.15em;
    color: #fff;
  }
}
@media only screen and (max-width:480px) {
  .mv .mv__Animation {
    font-size: 2.3rem;
    font-weight: 500;
    line-height: 1.17;
    letter-spacing: 0.15em;
    color: #fff;
  }
}

.cards {
  padding-left: 1.8rem;
  padding-right: 1.8rem;
  margin-top: 15rem;
  margin-bottom: 15rem;
}
.cards .cards__title {
  text-align: center;
  font-size: 5rem;
  font-weight: 300;
  line-height: 1.17;
  letter-spacing: 0.15em;
  color: #222;
  opacity: 0.7;
  margin-bottom: 12rem;
}
.cards .cards__flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10%;
}
@media only screen and (max-width:768px) {
  .cards .cards__flex {
    display: flex;
    flex-direction: column;
  }
}
.cards .cards__inner {
  max-width: 25rem;
  width: 100%;
  height: 30rem;
  display: flex;
  justify-content: center;
  padding: 2rem 0;
  text-align: center;
  border-radius: 1.5rem;
  box-shadow: 2rem 2rem 5rem rgba(0, 0, 0, 0.5);
  background-color: #c2bcbc;
  -webkit-backdrop-filter: blur(0.5rem);
          backdrop-filter: blur(0.5rem);
  overflow: hidden;
  padding-left: 2rem;
  padding-right: 2rem;
}
@media only screen and (max-width:768px) {
  .cards .cards__inner {
    margin-bottom: 5rem;
  }
  .cards .cards__inner:last-child {
    margin-bottom: 0;
  }
}
.cards .cards__inner .cards__content {
  padding: 2rem;
  transform: translateY(20rem);
  opacity: 0;
  transition: 0.5s;
  position: relative;
}
.cards .cards__inner:hover .cards__content {
  transform: translateY(0);
  opacity: 1;
}
.cards .cards__inner .cards__content h4 {
  color: #222;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.cards .cards__inner .cards__content p {
  text-align: justify;
  width: 90%;
  margin: auto;
  font-size: 1.2rem;
  color: #222;
  font-weight: 400;
}
.cards .cards__inner .cards__content a {
  text-decoration: none;
  padding: 0.8rem 4rem;
  width: 90%;
  height: 20%;
  background: #fff;
  margin-top: 1.5rem;
  border-radius: 2.5rem;
  font-weight: 500;
  font-size: 2rem;
  box-shadow: 0rem 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3rem auto;
}
@media only screen and (max-width:480px) {
  .cards .cards__title {
    font-size: 4rem;
    font-weight: 300;
    line-height: 1.17;
    letter-spacing: 0.15em;
    color: #222;
    opacity: 0.7;
  }
}

.topworks {
  background-color: #f2f2f2;
  padding-left: 1.8rem;
  padding-right: 1.8rem;
}
.topworks .topworks__inner {
  width: 100%;
  margin: auto;
  padding-bottom: 8rem;
}
.topworks .topworks__title {
  text-align: center;
  font-size: 5rem;
  font-weight: 300;
  line-height: 1.17;
  letter-spacing: 0.15em;
  color: #222;
  opacity: 0.7;
  padding-top: 12rem;
  margin-bottom: 12rem;
}
.topworks .topworks__container {
  width: 100%;
  max-width: 102.4rem;
  margin: 0 auto;
}
.topworks .topworks__center {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
  grid-gap: 3rem;
  justify-items: center;
}
.topworks .topworks__listBox {
  max-width: 35rem;
  width: 100%;
  margin-bottom: 5rem;
}
.topworks .topworks__img {
  transition: 0.3s;
}
.topworks .topworks__img img {
  max-width: 35rem;
  width: 100%;
  height: 20rem;
}
.topworks .topworks__img:hover {
  transition: 0.3s;
  transform: scale(1.03, 1.03);
}
@media only screen and (max-width:480px) {
  .topworks .topworks__title {
    font-size: 4rem;
    font-weight: 300;
    line-height: 1.17;
    letter-spacing: 0.15em;
    color: #222;
    opacity: 0.7;
  }
}
@media only screen and (max-width:375px) {
  .topworks .topworks__center {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    grid-gap: 1rem;
    justify-items: center;
  }
  .topworks .topworks__listBox {
    max-width: 22rem;
    width: 100%;
    margin-bottom: 5rem;
  }
  .topworks .topworks__img img {
    max-width: 22rem;
    width: 100%;
    height: 15rem;
  }
}

#headerActive {
  background-image: radial-gradient(rgba(11, 247, 247, 0.6), rgba(69, 65, 75, 0.6));
}