@charset "UTF-8";
:root {
  --logo-text: 1rem;
  --logo-gap: calc(var(--logo-text) * 0.3);
  --logo-padding: calc(var(--logo-text) * 0.2);
  --logo-width: calc(var(--logo-text) * 1.25);
  --logo-height: calc(var(--logo-width) * 1.161);
  --logo-founding: calc(var(--logo-text) * 0.5);
  --clip-hex: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
  scroll-behavior: smooth;
  font-size: 100%;
  font-feature-settings: "palt" on;
}

body {
  overflow-x: hidden;
  background-color: #fbfcf9;
  color: #233145;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}
body.is-scroll-hidden {
  overflow-y: hidden;
}

h1,
h2,
h3 {
  line-height: 1.5;
}

p {
  line-height: 1.8;
  letter-spacing: 0.05rem;
}

dt {
  font-weight: normal;
}

:focus-visible {
  outline: dotted 3px #f4a358;
}

.big-font {
  font-size: clamp(1.5em, 3vw, 2em);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
}

.is-sp,
.is-under-tab {
  display: none;
}

.highlighter {
  font-weight: 400;
  font-style: normal;
  background-image: linear-gradient(to bottom, transparent 75%, rgba(244, 179, 194, 0.75) 75%);
}

.view--bottom-half {
  -webkit-clip-path: polygon(-1% 50%, 101% 50%, 101% 101%, -1% 101%);
          clip-path: polygon(-1% 50%, 101% 50%, 101% 101%, -1% 101%);
}

.view--off {
  visibility: hidden;
}

.opacity0 {
  opacity: 0;
}

.opacity50 {
  opacity: 0.5;
}

.loading-layer {
  display: grid;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.loading-layer.display--none {
  display: none;
}
.loading-layer__screen, .loading-layer__hex-container {
  display: grid;
  place-content: center;
  grid-row: 1/2;
  grid-column: 1/2;
}
.loading-layer__screen {
  place-items: center;
  z-index: 2;
  width: inherit;
  height: inherit;
  background-color: #0a1628;
  color: #fbfcf9;
  transition: all 1s;
}
.loading-layer__logo {
  animation: loading-rotate 2s infinite linear;
}
.loading-layer__hex-container {
  --col: 15;
  --row: 10;
  --length: max(
    calc(100vw / calc(var(--col) - 1)),
    calc(100vh / calc(var(--row) - 2))
  );
  --width: var(--length);
  --width-half: calc(var(--width) / 2);
  --height: calc(var(--width) * 1.1547);
  --height-half: calc(var(--height) / 2);
  --gap: calc(var(--height) / 4);
  display: grid;
  place-items: center;
  grid-auto-flow: column;
  grid-template-columns: repeat(var(--col), var(--width));
  grid-template-rows: repeat(var(--row), var(--height-half));
  row-gap: var(--gap);
  position: relative;
  left: calc(var(--width-half) * -1);
  z-index: 1;
  transform-style: preserve-3d;
}
.loading-layer__hex-cell {
  width: var(--width);
  height: var(--height);
  background-color: #0a1628;
  -webkit-clip-path: var(--clip-hex);
          clip-path: var(--clip-hex);
  scale: 1.03;
}
.loading-layer__hex-cell:nth-child(2n) {
  translate: var(--width-half);
}

.background-layer {
  display: grid;
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #3d77ae;
}
.background-layer--image {
  grid-row: 1/2;
  grid-column: 1/2;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center right 10%;
}
.background-layer .bg--hero {
  background-image: url(../images/bg-hero.jpg);
}
.background-layer .bg--service {
  background-image: url(../images/bg-service.jpg);
  background-position: center center;
}
.background-layer .bg--contact {
  background-image: url(../images/bg-contact.jpg);
  background-position: center center;
}
.background-layer::before {
  grid-row: 1/2;
  grid-column: 1/2;
  opacity: 0.7;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-image: url(../images/pattern_line.svg), linear-gradient(to bottom, rgba(0, 58, 143, 0.25), rgba(10, 22, 40, 0.5));
  background-size: auto;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  content: "";
}

.header {
  --height: max(8vh, 3.5rem);
  z-index: 10;
  position: fixed;
  top: calc(-1 * var(--height));
  left: 0;
  opacity: 0;
  width: 100vw;
  background-color: rgba(35, 49, 69, 0.9);
  color: #fbfcf9;
  transition: top 1s, opacity 1s, background-color 0s;
}
.header.header__view {
  top: 0;
  opacity: 1;
}
.header.bg-color--off {
  background-color: transparent;
}
.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--height);
  margin: 0rem 8vw;
}
.header__logo {
  --logo-text: 1.25rem;
  --logo-gap: calc(var(--logo-text) * 0.3);
  --logo-padding: calc(var(--logo-text) * 0.1);
  --logo-width: calc(var(--logo-text) * 1.25);
  --logo-height: calc(var(--logo-width) * 1.161);
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  opacity: 0.9;
  padding-top: var(--logo-padding);
}
.header__logo--image {
  width: var(--logo-width);
  height: var(--logo-height);
}
.header__logo--text {
  padding-bottom: var(--logo-padding);
  font-family: "Zen Old Mincho", serif;
  font-size: var(--logo-text);
}
.header__logo:hover, .header__logo:focus-visible {
  opacity: 1;
}
.header__menu--list {
  display: flex;
  gap: 2rem;
}
.header__menu--link {
  display: inline-block;
  position: relative;
  opacity: 0.9;
  padding: 0.4rem 0.2rem 0.25rem;
}
.header__menu--link::after {
  position: absolute;
  width: 100%;
  height: 1px;
  top: 100%;
  left: 0;
  background-color: #fbfcf9;
  content: "";
  transform: scale(0, 1);
  transform-origin: top left;
  transition: all 0.25s;
}
.header__menu--link:hover, .header__menu--link:focus-visible, .header__menu--link.is-selected {
  opacity: 1;
}
.header__menu--link:hover::after, .header__menu--link:focus-visible::after, .header__menu--link.is-selected::after {
  transform: scale(1, 1);
}

.hero {
  display: grid;
  place-content: center;
  top: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  color: #fbfcf9;
  font-family: "Zen Old Mincho", serif;
}
.hero__copy-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0 5vw;
  gap: 10vh;
  grid-row: 1/2;
  grid-column: 1/2;
  z-index: 1;
}
.hero__copy-text {
  align-items: stretch;
  height: 25vh;
  font-size: max(8vw, 3.25rem);
  text-align: justify;
  line-height: 1.4;
}
.hero__title {
  --logo-text: max(3.6vw, 1.5rem);
  --logo-gap: calc(var(--logo-text) * 0.3);
  --logo-padding: calc(var(--logo-text) * 0.1);
  --logo-width: calc(var(--logo-text) * 1.25);
  --logo-height: calc(var(--logo-width) * 1.161);
  --logo-founding: calc(var(--logo-text) * 0.4);
  text-align: center;
  transition: all 1.5s 1s;
}
.hero__title.not-entry {
  opacity: 0;
}
.hero__founding {
  font-size: var(--logo-founding);
  line-height: 1;
}
.hero__logo {
  display: flex;
  gap: var(--logo-gap);
  align-items: center;
}
.hero__logo--image {
  width: var(--logo-width);
  height: var(--logo-height);
}
.hero__logo--text {
  padding-bottom: var(--logo-padding);
  font-family: "Zen Old Mincho", serif;
  font-size: var(--logo-text);
}
.hero__scroll {
  grid-row: 1/2;
  grid-column: 1/2;
  place-self: end center;
  z-index: 2;
  padding-bottom: 5vh;
  transition: all 1s 3s;
}
.hero__scroll.not-entry {
  opacity: 0;
}
.hero__scroll--btn {
  display: inline-block;
  opacity: 0.6;
  padding: 0.5rem;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  text-align: center;
  transition: opacity 0.25s;
}
.hero__scroll--btn::after {
  display: block;
  padding-top: 0.2rem;
  font-family: "Font Awesome 6 Free";
  font-size: 1.5rem;
  font-weight: 900;
  content: "\f103";
  animation: hopping 2s infinite;
}
.hero__scroll--btn:hover, .hero__scroll--btn:focus-visible {
  opacity: 1;
}

.section__wrapper--white {
  position: relative;
  z-index: 2;
  width: 100vw;
  overflow: hidden;
  -webkit-clip-path: polygon(-1% 0, 50% 12.5vw, 101% 0, 101% 100%, 50% calc(100% - 12.5vw), -1% 100%);
          clip-path: polygon(-1% 0, 50% 12.5vw, 101% 0, 101% 100%, 50% calc(100% - 12.5vw), -1% 100%);
  padding: 12.5vw 0;
  background-color: #fbfcf9;
}
.section__wrapper--service, .section__wrapper--contact {
  position: relative;
  z-index: 1;
  width: 100vw;
  overflow: hidden;
  margin: -12.5vw 0;
  padding: 12.5vw 0;
}
.section__wrapper--contact {
  margin-bottom: 0;
  padding-bottom: 0;
}
.section__container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  margin: 0 auto;
  padding: 4rem 0 8rem;
  width: min(90vw, 75rem);
}
.section__title, .section__title--white {
  text-align: center;
  font-size: clamp(3rem, 6vw, 4rem);
  font-family: "Zen Old Mincho", serif;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: all 1s;
}
.section__title.not-entry, .section__title--white.not-entry {
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
          clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.section__title {
  color: #3d77ae;
}
.section__desc, .section__desc--white {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: all 1s 0.5s;
  text-align: center;
}
.section__desc.f-serif, .section__desc--white.f-serif {
  font-family: "Zen Old Mincho", serif;
}
.section__desc.not-entry, .section__desc--white.not-entry {
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
          clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.section__title--white, .section__desc--white {
  color: #fbfcf9;
}

.profile__area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: end;
  gap: 2.2em;
  margin-bottom: 4rem;
  font-size: min(1.35vw, 2.5vh, 1rem);
  transition: all 1s;
}
.profile__area.not-entry {
  opacity: 0;
  translate: 0 20%;
}
.profile__card {
  display: grid;
  transform-style: preserve-3d;
}
.profile__card.not-entry {
  animation: none;
}
.profile__card--front, .profile__card--back {
  display: flex;
  grid-row: 1/2;
  grid-column: 1/2;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
  width: 22em;
  aspect-ratio: 55/91;
  padding: 2em;
  overflow-y: hidden;
  background-color: #f6f8f4;
  box-shadow: -1px -1px 0px 0px rgba(224, 228, 238, 0.5), 2px 2px 4px 0px rgba(162, 169, 178, 0.5);
}
.profile__card--front {
  background-image: linear-gradient(165deg, #fbfcf9 66%, #f6f8f4);
  animation: flip-to-front 0.5s linear 0.5s both 1;
  transform-origin: top right;
}
.profile__card--front.not-entry {
  animation: none;
}
.profile__card--back {
  justify-content: center;
  background-image: linear-gradient(135deg, transparent 0 6%, #84aec8 6% 9%, transparent 9% 12%, #84aec8 12% 88%, transparent 88% 91%, #84aec8 91% 94%, transparent 94% 100%), linear-gradient(165deg, rgba(251, 252, 249, 0.9) 66%, rgba(224, 228, 238, 0.75));
  animation: flip-to-back 0.5s linear 0.5s both 1;
  transform-origin: top left;
}
.profile__card--back.not-entry {
  animation: none;
}
.profile__identity--area {
  text-align: center;
  margin-bottom: 1em;
}
.profile__identity--image {
  border-radius: 50%;
  width: 10em;
  height: 10em;
  margin: 1em;
}
.profile__identity--title {
  color: #3d77ae;
}
.profile__identity--name {
  font-size: 2.5em;
  line-height: 1.4;
}
.profile__identity--en {
  color: #4d596a;
  font-size: 1.25em;
}
.profile__heading {
  color: #3d77ae;
  font-size: 1.5em;
  font-weight: 700;
}
.profile__sub--area {
  display: flex;
  flex-direction: column;
  width: min(100%, 15rem);
}
.profile__text {
  margin-bottom: 0.8em;
}
.profile__sub--heading {
  margin: 1em 0 0.5em;
  color: #3d77ae;
}
.profile__skill--list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.4em;
  -moz-column-gap: 1em;
       column-gap: 1em;
}
.profile__skill--title {
  flex-basis: 6em;
  font-size: 1.2em;
  font-weight: 700;
}
.profile__skill--level {
  color: #4d596a;
  letter-spacing: 0.1em;
}
.profile__skill--desc {
  margin-bottom: 1em;
}
.profile__logo {
  --logo-text: 2em;
  --logo-gap: calc(var(--logo-text) * 0.3);
  --logo-padding: calc(var(--logo-text) * 0.2);
  --logo-width: calc(var(--logo-text) * 1.25);
  --logo-height: calc(var(--logo-width) * 1.161);
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  color: #fbfcf9;
}
.profile__logo--image {
  width: var(--logo-width);
  height: var(--logo-height);
}
.profile__logo--text {
  padding-bottom: var(--logo-padding);
  font-family: "Zen Old Mincho", serif;
  font-size: var(--logo-text);
}
.profile__change-btn--prev, .profile__change-btn--next {
  display: none;
}

.card1 {
  z-index: 3;
  animation: 0.5s move-card1 1.25s both 1;
}

.card2 {
  z-index: 2;
}

.card3 {
  z-index: 1;
  animation: 0.5s move-card2 1.25s both 1;
}

.available-time {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
}

.sns__list {
  display: flex;
  gap: 0.75em;
}

.sns__link {
  display: inline-block;
  opacity: 0.7;
  width: 1.5em;
  aspect-ratio: 1;
  background-color: #233145;
  border-radius: 0.25em;
  color: #fbfcf9;
  font-size: 1em;
  line-height: 1.4em;
  text-align: center;
  transition: opacity 0.25s;
}
.sns__link:hover, .sns__link:focus-visible {
  opacity: 1;
}

.service__area {
  --length-base: min(15vw, 24vh, 12rem);
  --length-margin: calc(var(--length-base) / 8);
  --length-gap: calc(var(--length-base) / 2);
  --length-hex-gap: calc(var(--length-base) / 24);
  --length-image: calc(var(--length-base) / 3);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--length-gap);
  margin: 1rem 0 2rem var(--length-gap);
  font-size: min(1.25vw, 2vh, 1rem);
}
.service__menu {
  width: calc(var(--length-base) * 1.5 - var(--length-hex-gap));
  display: flex;
  padding-top: var(--length-margin);
  padding-bottom: var(--length-margin);
  flex-direction: column;
  gap: var(--length-hex-gap);
}
.service__menu:has(*:focus-visible) {
  outline: dotted 3px #f4a358;
}
.service__menu--item {
  position: relative;
  width: var(--length-base);
  aspect-ratio: 1;
  margin: calc(-1 * var(--length-margin)) 0;
  transition: all 1s;
}
.service__menu--item:nth-child(2n) {
  align-self: flex-end;
}
.service__menu--hidden-radio {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
}
.service__menu--btn {
  display: grid;
  place-content: center;
  place-items: center;
  opacity: 0.3;
  gap: 0.25rem;
  width: 86.6%;
  height: 100%;
  margin: 0 auto;
  background-image: linear-gradient(135deg, rgba(251, 252, 249, 0.9) 20%, rgba(224, 228, 238, 0.5) 80%);
  cursor: pointer;
  -webkit-clip-path: var(--clip-hex);
          clip-path: var(--clip-hex);
  transition: all 0.5s;
}
.service__menu--btn::after {
  width: var(--length-image);
  aspect-ratio: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
}
.service__menu--btn:hover, .service__menu--btn:focus-visible {
  opacity: 0.6;
}
.service__menu--hidden-radio:checked + .service__menu--btn {
  opacity: 1;
}
.service__list {
  display: grid;
  justify-items: center;
  width: calc(var(--length-base) * 3);
  aspect-ratio: 1;
  overflow: hidden;
  transform-style: preserve-3d;
}
.service__list--item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2em;
  grid-row: 1/2;
  grid-column: 1/2;
  width: 86.6%;
  height: 100%;
  padding-bottom: 2em;
  color: #fbfcf9;
  background-image: linear-gradient(135deg, rgba(35, 49, 69, 0.5), rgba(10, 22, 40, 0.5));
  -webkit-clip-path: var(--clip-hex);
          clip-path: var(--clip-hex);
  transition: rotate 0.5s linear, z-index 0s 0.25s linear, opacity 0s 0.25s linear;
}
.service__list--item.front-side {
  z-index: 2;
  opacity: 1;
  rotate: 1 0.5773 0 0deg;
}
.service__list--item.back-side {
  z-index: 0;
  opacity: 0;
  rotate: 1 0.5773 0 -180deg;
}
.service__list--title {
  display: grid;
  place-content: center;
  place-items: center;
  font-size: 2em;
}
.service__list--text {
  margin: 0 2rem;
  font-size: 1.25em;
}

.cording::after {
  background-image: url(../images/icon-cording.svg);
}

.design::after {
  background-image: url(../images/icon-design.svg);
}

.wordpress:after {
  background-image: url(../images/icon-wordpress.svg);
}

.works__list {
  --width: min(90vw, 60rem);
  --gap: 6vw;
  --col: 2;
  --length: calc(
    (var(--width) - (var(--gap) * (var(--col) - 1))) / var(--col)
  );
  margin: 1rem auto 4rem;
  width: var(--width);
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--col), var(--length));
  place-content: center;
}
.works__item {
  width: 100%;
  transition: all 1s;
}
.works__item.not-entry {
  opacity: 0;
  translate: 0 30%;
}
.works__link {
  display: block;
  color: rgba(162, 169, 178, 0.75);
  transition: all 0.5s;
}
.works__link:hover, .works__link:focus-visible {
  color: #003a8f;
}
.works__link.construction {
  opacity: 0.7;
  cursor: not-allowed;
}
.works__link.construction:hover, .works__link.construction:focus-visible {
  color: rgba(162, 169, 178, 0.75);
  outline: none;
}
.works__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
  width: inherit;
}
.works__card--image {
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.works__card--caption {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.works__card--title {
  font-size: 1.25rem;
}

.works-modal {
  display: grid;
  place-content: center;
  place-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  transition: all 0.25s;
}
.works-modal.is-waiting {
  display: none;
}
.works-modal.opacity0 {
  opacity: 0;
}
.works-modal__screen {
  grid-column: 1/2;
  grid-row: 1/2;
  width: inherit;
  height: inherit;
  background-color: rgba(10, 22, 40, 0.75);
}
.works-modal__container {
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
  width: min(90vw, 75rem);
  height: 90vh;
  padding: 2rem 0;
  border-radius: 1rem;
  background-color: #fbfcf9;
}
.works-modal__close-btn {
  display: block;
  position: absolute;
  top: 1rem;
  right: 2rem;
  width: 2.5rem;
  aspect-ratio: 0.866/1;
  background-color: #3d77ae;
  text-align: center;
  color: #fbfcf9;
  font-size: 1.75rem;
  -webkit-clip-path: var(--clip-hex);
          clip-path: var(--clip-hex);
  transition: all 0.25s;
}
.works-modal__close-btn:hover, .works-modal__close-btn:focus-visible {
  background-color: #003a8f;
}
.works-modal__box {
  grid-column: 1/2;
  grid-row: 1/2;
  height: 100%;
  overflow-y: auto;
}

.works-article {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  padding: 1rem min(6vw, 4rem) 3rem;
}
.works-article.is-waiting {
  display: none;
}
.works-article__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.works-article__heading {
  font-size: 1.5rem;
  color: #3d77ae;
  font-weight: bold;
}
.works-article__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.works-article__list--title {
  color: #84aec8;
}
.works-article__list--title::after {
  content: "：";
}
.works-article__list--desc.symbol--dot::before {
  content: "・";
}
.works-article__text-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.works-article__link {
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  background-color: #84aec8;
  color: #fbfcf9;
  transition: all 0.5s;
}
.works-article__link:hover, .works-article__link:focus-visible {
  background-color: #3d77ae;
}
.works-article__collection {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3rem;
}
.works-article__collection--image {
  width: 100%;
}
.works-article__text-link {
  color: #003a8f;
  text-decoration: underline;
  transition: background 0.25s linear;
}
.works-article__text-link:hover {
  background: rgba(132, 174, 200, 0.25);
}

.form-area {
  display: grid;
  place-content: center;
  place-items: center;
}

.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-row: 1/2;
  grid-column: 1/2;
  margin-top: 1rem;
  gap: 3rem;
  transition: all 1s 1s;
}
.contact-form.not-entry {
  opacity: 0;
  translate: 0 20%;
}
.contact-form__box {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  width: min(80vw, 40rem);
}
.contact-form__heading {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  width: 100%;
  color: #f6f8f4;
}
.contact-form__input {
  padding: 0.75rem;
  border-radius: 0.5rem;
  background-color: rgba(251, 252, 249, 0.75);
  color: #003a8f;
  transition: all 0.25s;
}
.contact-form__input:focus {
  background-color: #fbfcf9;
  outline: none;
  box-shadow: 0 0 0.5rem rgba(251, 252, 249, 0.75);
}
.contact-form__input:required + .contact-form__heading::before {
  display: inline-block;
  width: 3rem;
  padding: 0.1rem;
  box-sizing: border-box;
  border-radius: 2px;
  background-color: #bd3528;
  border: 1px solid rgba(224, 228, 238, 0.5);
  vertical-align: baseline;
  font-size: 0.75rem;
  text-align: center;
  content: "必須";
  transition: all 0.25s;
}
.contact-form__input:required:valid + .contact-form__heading::after {
  background-color: #3d77ae;
  text-align: center;
  content: "OK";
}
.contact-form__btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: #e77433;
  color: #fbfcf9;
  font-size: 1.25rem;
  box-shadow: 3px 3px 4px rgba(35, 49, 69, 0.5);
  cursor: pointer;
  transition: all 0.25s;
}
.contact-form__btn:hover, .contact-form__btn:focus-visible {
  background-color: #f4a358;
  box-shadow: 2px 1px 4px rgba(35, 49, 69, 0.5);
  transform: translateY(2px);
}
.contact-form__btn:disabled {
  z-index: -1;
  background-color: #78818e;
  cursor: not-allowed;
  box-shadow: 3px 3px 4px rgba(35, 49, 69, 0.5);
  transform: translateY(0px);
}

.popup {
  grid-row: 1/2;
  grid-column: 1/2;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  z-index: 2;
  width: 90%;
  padding: 2rem;
  background: rgba(61, 119, 174, 0.9);
  box-shadow: -1px -1px rgba(224, 228, 238, 0.5), 1px 1px rgba(35, 49, 69, 0.5), 1rem 1rem 1rem rgba(35, 49, 69, 0.5);
  color: #fbfcf9;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  animation: popup 0.5s ease both;
}
.popup.is-waiting {
  display: none;
}
.popup__user-name {
  font-size: 1.5em;
}
.popup__email-title {
  font-size: 0.9em;
  color: #e0e4ee;
}
.popup__email-address {
  font-size: 1.5em;
  font-weight: 700;
  color: #f4a358;
}
.popup__close {
  display: block;
  margin: 0 auto;
  padding: 0.25rem 0.5rem 0.5rem;
  border-radius: 3px;
  text-align: center;
  background: #003a8f;
}
.popup__close:hover, .popup__close:focus-visible {
  background: rgba(0, 58, 143, 0.75);
}

.footer {
  display: grid;
  place-content: center;
  position: relative;
  z-index: 10;
  margin: 0 0 0;
  padding: 1rem;
  background-color: #0a1628;
  color: #fbfcf9;
}
.footer__container {
  color: #e0e4ee;
}

@media (max-width: 900px) {
  .is-under-tab {
    display: inline;
  }
  .hero__copy-text {
    font-size: min(12vw, 5rem);
  }
  .hero__title {
    --logo-text: min(6vw, 2.5rem);
  }
  .profile__area {
    grid-template-columns: repeat(1, 1fr);
    position: relative;
    font-size: 1rem;
  }
  .profile__card {
    grid-row: 1/2;
    grid-column: 1/2;
    animation: none;
    transition: translate 0.25s;
  }
  .profile__card.move-right {
    translate: 110%;
  }
  .profile__change-btn--prev, .profile__change-btn--next {
    display: inline-block;
    z-index: 10;
    position: absolute;
    top: calc(50% - 2.5rem);
    color: rgba(10, 22, 40, 0.5);
    font-size: 3.5rem;
    transition: opacity 1s 1s;
  }
  .profile__change-btn--prev:active, .profile__change-btn--next:active {
    color: rgba(10, 22, 40, 0.75);
  }
  .profile__change-btn--prev.not-entry, .profile__change-btn--next.not-entry {
    opacity: 0;
  }
  .profile__change-btn--prev {
    left: -0.5rem;
  }
  .profile__change-btn--next {
    right: -0.5rem;
  }
  .works__link {
    color: #233145;
  }
  .works__link.construction {
    color: rgba(162, 169, 178, 0.75);
  }
  .works-modal__close-btn {
    right: 1rem;
  }
  .works-article {
    grid-template-columns: repeat(1, 1fr);
    gap: 4rem;
  }
}
@media (max-width: 600px) {
  .is-sp {
    display: inherit;
  }
  .background-layer {
    height: 100vh;
  }
  .header {
    top: 0;
    opacity: 1;
  }
  .header__container {
    margin: 0 0;
  }
  .header__menu {
    --length-base: 4rem;
    display: grid;
    position: fixed;
    top: 2rem;
    right: 1rem;
    transition: opacity 0.5s;
  }
  .header__menu__switch {
    display: grid;
    place-content: center;
  }
  .header__menu__switch--item {
    grid-row: 1/2;
    grid-column: 1/2;
    width: var(--length-base);
    aspect-ratio: 1;
  }
  .header__menu__switch--hidden-radio {
    display: none;
  }
  .header__menu__switch--btn {
    display: grid;
    place-content: center;
    visibility: hidden;
    width: 86.6%;
    height: 100%;
    background-color: rgba(10, 22, 40, 0.75);
    font-size: 1.5rem;
    -webkit-clip-path: var(--clip-hex);
            clip-path: var(--clip-hex);
    rotate: 0 1 0 -180deg;
    transition: rotate 0.5s, visibility 0s 0.2s;
  }
  .header__menu__switch--hidden-radio:checked + .header__menu__switch--btn {
    visibility: visible;
    rotate: 0 1 0 0deg;
  }
  .header__menu--list {
    flex-direction: column;
    gap: 0.1rem;
    position: relative;
    left: calc(var(--length-base) * -0.433 - 0.1rem);
    margin: calc(var(--length-base) * -0.125 + 0.1rem) 0;
  }
  .header__menu--list.display--none {
    display: none;
  }
  .header__menu--item {
    position: relative;
    width: var(--length-base);
    aspect-ratio: 1;
    margin: calc(var(--length-base) * -0.125) 0;
  }
  .header__menu--item:nth-child(2n) {
    left: calc(var(--length-base) * 0.433 + 0.1rem);
    z-index: 2;
  }
  .header__menu--link {
    display: grid;
    place-content: center;
    visibility: hidden;
    width: 86.6%;
    height: 100%;
    background-color: rgba(10, 22, 40, 0.75);
    font-size: 0.8rem;
    padding-bottom: 0.5rem;
    -webkit-clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
            clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
    transition: all 0.5s;
  }
  .header__menu--link.menu-on {
    animation: menu-on 1s ease forwards;
  }
  .header__menu--link.is-selected {
    background-color: rgba(162, 169, 178, 0.5);
    color: #fbfcf9;
  }
  .hero__scroll {
    padding-bottom: 10vh;
  }
  .service__area {
    --length-base: min(25vw, 10rem);
    --length-gap: calc(var(--length-base) / 3);
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-size: min(2.5vw, 1rem);
  }
  .service__menu {
    flex-direction: row;
    justify-content: space-between;
    width: calc(86.6% + var(--length-base) * 0.134);
    padding-top: 0;
    padding-bottom: 0;
  }
  .service__menu--item {
    margin: 0;
  }
  .service__menu--item:nth-child(2n) {
    align-self: flex-start;
  }
  .service__list {
    width: 100%;
  }
  .works__list {
    --width: 80vw;
    --col: 1;
    --gap: 4rem;
  }
}
@keyframes loading-rotate {
  0% {
    rotate: 0 0 1 0;
  }
  100% {
    rotate: 0 0 1 360deg;
  }
}
@keyframes hopping {
  50% {
    transform: translateY(0.4rem);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes flip-to-front {
  0% {
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transform: translateX(-100%) rotate3d(0, 1, 0, -180deg);
  }
  49% {
    opacity: 1;
    visibility: hidden;
    z-index: -1;
    box-shadow: 1px 1 1px rgba(224, 228, 238, 0.75);
  }
  50% {
    visibility: visible;
    z-index: 1;
    transform: translateX(0) rotate3d(0, 1, 0, -90deg);
  }
  100% {
    visibility: visible;
    z-index: 1;
    transform: translateX(0) rotate3d(0, 1, 0, 0deg);
  }
}
@keyframes flip-to-back {
  0% {
    visibility: visible;
    z-index: 1;
    transform: translateX(0) rotate3d(0, 1, 0, 0deg);
  }
  49% {
    visibility: visible;
    z-index: 1;
    box-shadow: 1px 1px 1px rgba(224, 228, 238, 0.75);
  }
  50% {
    visibility: hidden;
    z-index: -1;
    transform: translateX(100%) rotate3d(0, 1, 0, 90deg);
  }
  100% {
    visibility: hidden;
    z-index: -1;
    transform: translateX(100%) rotate3d(0, 1, 0, 180deg);
  }
}
@keyframes move-card1 {
  0% {
    translate: calc(100% + 2.2em) 0 0;
  }
  100% {
    translate: 0 0 0;
  }
}
@keyframes move-card2 {
  0% {
    translate: calc((100% + 2.2em) * -1) 0 0;
  }
  100% {
    translate: 0 0 0;
  }
}
@keyframes flip-hex {
  0% {
    rotate: 1 0.5773 0 0;
  }
  100% {
    rotate: 1 0.5773 0 -180deg;
  }
}
@keyframes popup {
  0% {
    opacity: 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  100% {
    opacity: 1;
    -webkit-clip-path: polygon(0 0, 110% 0, 110% 110%, 0 110%);
            clip-path: polygon(0 0, 110% 0, 110% 110%, 0 110%);
  }
}
@keyframes menu-on {
  0% {
    visibility: visible;
    opacity: 0;
    background-color: rgba(251, 252, 249, 0.75);
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}