@charset "UTF-8";
/* color tokens */
/* opacity tokens */
/* animation tokens */
/* typography tokens */
/* layout tokens */
/* アクセッサ関数 */
/* pxをコンテナ幅に対する割合に変換する関数 */
/* コンテナ幅対応のレスポンシブ関数 */
/* pcとspのビューポート間を線型的にサイズ変化させる関数 */
/* 画面幅が広→狭になるにつれて値が小→大になる逆方向の線型変化関数 */
/* Swiperボタンの位置 */
/* Swiperボタンのサイズ */
/* メディアクエリ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden !important;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}
header nav {
  position: relative;
  width: 100%;
  pointer-events: auto;
}

main {
  position: relative;
}

canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100dvw;
  height: 100dvh;
}

body {
  font-family: "dnp-shuei-gothic-kin-std", sans-serif;
  color: #1e1e1e;
  font-size: 3rem;
  line-height: 2;
  text-align: justify;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "dnp-shuei-gothic-kin-std", sans-serif;
}

.opening {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center; /* 縦中央 */
  justify-content: center; /* 横中央 */
  z-index: 9999; /* 他要素より前に */
}
.opening .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffffff;
}
.opening .typing-container {
  width: 100%;
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 0;
}
.opening .typing-container .typing-content {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  text-align: left;
  font-size: clamp(16px, 16px + (24px - 16px) * (100vw - 375px) / (1366px - 375px), 24px);
  color: #1e1e1e;
}
.opening .typing-container .typing-content .caret {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: #1e1e1e;
  vertical-align: text-bottom;
  margin-left: 0.2ch;
  transform: translateY(-0.1em);
  animation: blink 0.6s step-start infinite alternate;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.opening .typing-container .typing-content .kana {
  color: #1e1e1e;
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 7px;
  text-decoration-color: #1e1e1e;
}
.opening .typing-container .typing-content .kanji {
  color: #1e1e1e;
}

.base-content, .menu .menu-left .main-visual, .menu .menu-right .menu-inner, .contact .contact-contents, .works, .insert-photo, .about-me, .main-visual {
  container-type: inline-size;
  max-inline-size: 1100px;
  inline-size: clamp(320px, 320px + (1100px - 320px) * (100vw - 375px) / (1366px - 375px), 1100px);
  margin-inline: auto;
  margin-block-end: 180px;
}
@container (min-width: 600px) {
  .base-content, .menu .menu-left .main-visual, .menu .menu-right .menu-inner, .contact .contact-contents, .works, .insert-photo, .about-me, .main-visual {
    margin-block-end: 200px;
  }
}

.main-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-visual .title-group {
  margin: 30.5vh auto;
}
.main-visual .scroll-indicator {
  right: clamp(-30px, 5px - (5px - -30px) * (100vw - 375px) / (1366px - 375px), 5px);
  transform: translateX(100%);
}

.about-me p {
  font-size: 1.125rem;
  line-height: 2;
  letter-spacing: 0.05rem;
}

.insert-photo img {
  display: block;
  max-width: 100%;
  height: auto;
  min-height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
}

.works {
  margin-bottom: 200px;
}

.contact {
  background-color: #212828;
  color: #ffffff;
  margin-inline: auto;
  position: relative;
  padding-top: clamp(40px, 40px + (9.375rem - 40px) * (100vw - 375px) / (1366px - 375px), 9.375rem);
  padding-bottom: clamp(20px, 20px + (6.25rem - 20px) * (100vw - 375px) / (1366px - 375px), 6.25rem);
  border-radius: 20px 20px 0 0;
}
.contact .contact-contents {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-inline: clamp(0rem, 0rem + (1.875rem - 0rem) * (100vw - 375px) / (1366px - 375px), 1.875rem);
  margin-block-end: 0;
}
@media screen and (max-width: 950px) {
  .contact .contact-contents {
    flex-direction: column;
    align-items: flex-start;
  }
}
.contact .contact-contents .c-section-title {
  position: relative;
}
.contact .contact-contents .c-section-title::after {
  content: "";
  position: absolute;
  bottom: clamp(-9px, -9px + (1px - -9px) * (100vw - 375px) / (1366px - 375px), 1px);
  left: 0;
  width: clamp(55px, 55px + (106px - 55px) * (100vw - 375px) / (1366px - 375px), 106px);
  height: 2px;
  background: #ffffff;
}
.contact .contact-contents .c-section-title::before {
  content: "";
  position: absolute;
  bottom: clamp(-19px, -19px + (-15px - -19px) * (100vw - 375px) / (1366px - 375px), -15px);
  left: 0;
  width: clamp(32px, 32px + (61px - 32px) * (100vw - 375px) / (1366px - 375px), 61px);
  height: 2px;
  background: #ffffff;
}
@media screen and (max-width: 950px) {
  .contact .contact-contents .c-section-title {
    align-self: flex-start;
    text-align: left;
    margin-bottom: 100px;
  }
}
.contact .contact-contents .contact-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(55px);
}
@media screen and (max-width: 950px) {
  .contact .contact-contents .contact-form {
    align-self: center;
    transform: translateY(0px);
  }
}
.contact .contact-contents .contact-form .contact-button-wrapper {
  position: relative;
  margin-bottom: 2.5rem;
}
.contact .contact-contents .contact-form .contact-button-wrapper:hover .contact-button {
  opacity: 0.8;
}
.contact .contact-contents .contact-form .contact-button-wrapper::before {
  content: "お気軽にお問い合わせください！";
  position: absolute;
  display: inline-block;
  font-size: 0.938rem;
  color: #ffffff;
  top: -15px;
  transform: translateY(-100%);
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  white-space: nowrap;
}
.contact .contact-contents .contact-form .contact-button {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 1.25rem;
  border-radius: 20px;
  color: #1e1e1e;
  background-color: #ffffff;
  width: clamp(318px, 318px + (467px - 318px) * (100vw - 375px) / (1366px - 375px), 467px);
  height: 60px;
  transition: opacity 0.5s ease;
}
.contact .contact-contents .contact-form .contact-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.875rem;
  display: block;
  width: 0.938rem;
  height: 0.938rem;
  border: solid #1e1e1e;
  border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg);
}
.contact .contact-contents .contact-form .icons {
  display: flex;
  flex-direction: row;
  align-self: flex-end;
  align-items: center;
  gap: 0.938rem;
  margin-bottom: clamp(20px, 20px + (40px - 20px) * (100vw - 375px) / (1366px - 375px), 40px);
}
.contact .contact-contents .contact-form .icons .contact-icon {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 50%;
  transition: opacity 0.5s ease;
}
.contact .contact-contents .contact-form .icons .contact-icon img {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
}
.contact .contact-contents .contact-form .icons .contact-icon:hover {
  opacity: 0.8;
}
.contact .contact-contents .copy-right {
  font-size: 0.938rem;
  align-self: end;
}

.c-title {
  position: relative;
}
.c-title__main {
  font-size: clamp(4.063rem, 4.063rem + (8rem - 4.063rem) * (100vw - 375px) / (1366px - 375px), 8rem);
  letter-spacing: 0.45rem;
  line-height: 1;
  margin-bottom: 45px;
  /* spanを立てに並べる */
  display: flex;
  flex-direction: column;
}
.c-title__main .line-break {
  display: inline-block;
}
.c-title__sub {
  position: relative;
  margin-left: clamp(0px, 0px + (12px - 0px) * (100vw - 375px) / (1366px - 375px), 12px);
  font-size: clamp(1rem, 1rem + (1.5rem - 1rem) * (100vw - 375px) / (1366px - 375px), 1.5rem);
  padding-bottom: 20px;
  position: relative;
}
.c-title__sub::after {
  content: "";
  position: absolute;
  bottom: clamp(-9px, -9px + (1px - -9px) * (100vw - 375px) / (1366px - 375px), 1px);
  left: 0;
  width: clamp(55px, 55px + (106px - 55px) * (100vw - 375px) / (1366px - 375px), 106px);
  height: 2px;
  background: #1E1E1E;
}
.c-title__sub::before {
  content: "";
  position: absolute;
  bottom: clamp(-19px, -19px + (-15px - -19px) * (100vw - 375px) / (1366px - 375px), -15px);
  left: 0;
  width: clamp(32px, 32px + (61px - 32px) * (100vw - 375px) / (1366px - 375px), 61px);
  height: 2px;
  background: #1E1E1E;
}

.c-section-title {
  position: relative;
  font-size: clamp(3rem, 3rem + (6rem - 3rem) * (100vw - 375px) / (1366px - 375px), 6rem);
  margin-bottom: 57px;
  white-space: nowrap;
  position: relative;
}
.c-section-title::after {
  content: "";
  position: absolute;
  bottom: clamp(-9px, -9px + (1px - -9px) * (100vw - 375px) / (1366px - 375px), 1px);
  left: 0;
  width: clamp(55px, 55px + (106px - 55px) * (100vw - 375px) / (1366px - 375px), 106px);
  height: 2px;
  background: #1E1E1E;
}
.c-section-title::before {
  content: "";
  position: absolute;
  bottom: clamp(-19px, -19px + (-15px - -19px) * (100vw - 375px) / (1366px - 375px), -15px);
  left: 0;
  width: clamp(32px, 32px + (61px - 32px) * (100vw - 375px) / (1366px - 375px), 61px);
  height: 2px;
  background: #1E1E1E;
}
.c-section-title::after {
  bottom: clamp(0px, 0px + (10px - 0px) * (100vw - 375px) / (1366px - 375px), 10px);
}
.c-section-title::before {
  bottom: clamp(-10px, -10px + (-6px - -10px) * (100vw - 375px) / (1366px - 375px), -6px);
}

.card .swiper {
  overflow: visible;
}
.card .swiper-area {
  position: relative;
}
.card .swiper-slide {
  width: 816px;
  max-width: 816px;
}
@media screen and (max-width: 600px) {
  .card .swiper-slide {
    width: 464px;
    max-width: 464px;
  }
}
.card .swiper-button-prev,
.card .swiper-button-next {
  position: absolute;
  z-index: 1;
  top: clamp(61px, 61px + (150px - 61px) * (100vw - 375px) / (1366px - 375px), 150px);
  transform: translateY(-25%);
}
.card .swiper-button-prev {
  left: -25px;
}
.card .swiper-button-next {
  right: -65px;
}
.card .slide-media {
  padding-top: 58.8235294118%;
  border-radius: 20px;
}
.card .slide-content {
  display: flex;
  flex-direction: column;
  padding: 3.2rem 0;
  gap: 10px;
}
@media screen and (max-width: 600px) {
  .card .slide-content {
    padding: 1.5rem 0;
  }
}
.card .slide-content .slide-text {
  font-size: 0.938rem;
  line-height: 2;
}
@media screen and (max-width: 600px) {
  .card .slide-content .slide-text {
    margin-bottom: 0.625rem;
  }
}
.card .slide-content .slide-link {
  font-size: 0.938rem;
  align-self: flex-end;
  margin-top: auto;
  position: relative;
  transform: translateX(-15%);
  position: relative;
}
.card .slide-content .slide-link::after {
  content: "";
  position: absolute;
  width: 115%;
  height: 10px;
  border-bottom: 1px solid #1e1e1e;
  border-right: 1px solid #1e1e1e;
  /* 傾きを調節 */
  transform: skew(60deg);
  /* 下線矢印の位置補正 */
  left: -5px;
  bottom: -2px;
}
.card [class*=swiper]:focuXs {
  outline: none;
}
.card .slide-media,
.card .thumb-media {
  position: relative;
  overflow: hidden;
}
.card .slide-media img,
.card .thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.card .swiper-button-prev,
.card .swiper-button-next {
  display: grid;
  place-content: center;
  width: 3.563rem;
  height: 3.563rem;
  cursor: pointer;
  transition: opacity 0.8s cubic-bezier(0.2, 1, 0.2, 1), transform 0.8s cubic-bezier(0.2, 1, 0.2, 1), background-color 0.8s cubic-bezier(0.2, 1, 0.2, 1);
}
@media screen and (max-width: 600px) {
  .card .swiper-button-prev,
  .card .swiper-button-next {
    width: 49.6px;
    height: 49.6px;
    opacity: 0.9;
  }
}
.card .swiper-button-prev::before,
.card .swiper-button-next::before {
  position: absolute;
  background-color: #939393;
  inset: 0;
  content: "";
  border-radius: 50%;
}
.card .swiper-button-prev::after,
.card .swiper-button-next::after {
  width: 1.2rem;
  height: 1.2rem;
  content: "";
  border: solid #dddddd;
  border-width: 3px 3px 0 0;
}
.card .swiper-button-prev.swiper-button-disabled,
.card .swiper-button-next.swiper-button-disabled {
  transition: opacity 0.8s cubic-bezier(0.2, 1, 0.2, 1), transform 0.8s cubic-bezier(0.2, 1, 0.2, 1), background-color 0.8s cubic-bezier(0.2, 1, 0.2, 1);
  pointer-events: none;
  opacity: 0.3;
  border-radius: 50%;
  cursor: default;
}
.card .swiper-button-prev::after {
  margin-left: 0.4rem;
  transform: rotate(-135deg);
}
.card .swiper-button-next::after {
  margin-right: 0.4rem;
  transform: rotate(45deg);
}
.card .swiper-button-prev.swiper-button-disabled,
.card .swiper-button-next.swiper-button-disabled {
  transition: none;
  pointer-events: none;
  opacity: 0.3;
  border-radius: 50%;
  cursor: default;
}

.hamburger-trigger,
#hamburger-menu {
  position: fixed;
  top: clamp(30px, 30px + (45px - 30px) * (100vw - 375px) / (1366px - 375px), 45px);
  right: clamp(30px, 30px + (45px - 30px) * (100vw - 375px) / (1366px - 375px), 45px);
  width: clamp(30px, 30px + (50px - 30px) * (100vw - 375px) / (1366px - 375px), 50px);
  height: clamp(20px, 20px + (40px - 20px) * (100vw - 375px) / (1366px - 375px), 40px);
  cursor: pointer;
  background: none;
  border: none;
  z-index: 3;
}
.hamburger-trigger span,
#hamburger-menu span {
  position: absolute;
  width: 100%;
  height: 2px;
  background: #1e1e1e;
  left: 0;
  transition: all 0.5s ease;
}
.hamburger-trigger span:nth-of-type(1),
#hamburger-menu span:nth-of-type(1) {
  top: 0;
}
.hamburger-trigger span:nth-of-type(2),
#hamburger-menu span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger-trigger span:nth-of-type(3),
#hamburger-menu span:nth-of-type(3) {
  bottom: 0;
}
.hamburger-trigger.active span:nth-of-type(1),
#hamburger-menu.active span:nth-of-type(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.hamburger-trigger.active span:nth-of-type(2),
#hamburger-menu.active span:nth-of-type(2) {
  opacity: 0;
}
.hamburger-trigger.active span:nth-of-type(3),
#hamburger-menu.active span:nth-of-type(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 2;
  visibility: hidden;
  will-change: transform;
  display: grid;
  grid-template-columns: 1fr 45vw;
  align-items: center;
}
.menu .menu-left {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu .menu-left .main-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu .menu-left .main-visual .title-group {
  margin: 30.5vh auto;
  transform: scale(0.65);
}
.menu .menu-right {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(40px, 40px + (60px - 40px) * (100vw - 375px) / (1366px - 375px), 60px);
}
.menu .menu-right .menu-inner .menu-links {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(30px, 30px + (50px - 30px) * (100vw - 375px) / (1366px - 375px), 50px);
  gap: clamp(30px, 30px + (50px - 30px) * (100vw - 375px) / (1366px - 375px), 50px);
  width: -moz-fit-content;
  width: fit-content;
}
.menu .menu-right .menu-inner .menu-links .menu-link {
  position: relative;
  text-decoration: none;
  font-size: clamp(48px, 48px + (64px - 48px) * (100vw - 375px) / (1366px - 375px), 64px);
  line-height: 1;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}
.menu .menu-right .menu-inner .menu-links .menu-link::after {
  background-color: #1E1E1E;
  bottom: -8px;
  content: "";
  width: 100%;
  height: 2px;
  left: 5px;
  position: absolute;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s;
}
.menu .menu-right .menu-inner .menu-links .menu-link:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
.menu .menu-right .menu-inner .menu-links .menu-link:hover {
  opacity: 0.8;
}
.menu .menu-right .menu-inner .menu-links .menu-link > .char {
  filter: blur(8px);
  opacity: 0;
}
.menu .menu-right .menu-inner .menu-icons {
  display: flex;
  gap: clamp(20px, 20px + (30px - 20px) * (100vw - 375px) / (1366px - 375px), 30px);
  justify-content: flex-start;
  width: -moz-fit-content;
  width: fit-content;
}
.menu .menu-right .menu-inner .menu-icons .menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  transition: opacity 0.5s ease;
}
.menu .menu-right .menu-inner .menu-icons .menu-icon img {
  width: clamp(30px, 30px + (50px - 30px) * (100vw - 375px) / (1366px - 375px), 50px);
  height: clamp(30px, 30px + (50px - 30px) * (100vw - 375px) / (1366px - 375px), 50px);
  -o-object-fit: contain;
     object-fit: contain;
}
.menu .menu-right .menu-inner .menu-icons .menu-icon:hover {
  opacity: 0.8;
}
@media screen and (max-width: 599px) {
  .menu {
    grid-template-columns: 1fr;
  }
  .menu .menu-left {
    display: none;
  }
  .menu .menu-right {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(40px, 40px + (60px - 40px) * (100vw - 375px) / (1366px - 375px), 60px);
  }
  .menu .menu-right .menu-inner {
    all: unset;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    align-items: flex-start;
  }
  .menu .menu-right .menu-inner .menu-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: clamp(30px, 30px + (50px - 30px) * (100vw - 375px) / (1366px - 375px), 50px);
    gap: clamp(30px, 30px + (50px - 30px) * (100vw - 375px) / (1366px - 375px), 50px);
    width: auto;
  }
  .menu .menu-right .menu-inner .menu-links .menu-link {
    font-size: clamp(48px, 48px + (64px - 48px) * (100vw - 375px) / (1366px - 375px), 64px);
    line-height: 1;
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    white-space: nowrap;
  }
  .menu .menu-right .menu-inner .menu-icons {
    display: flex;
    gap: clamp(20px, 20px + (30px - 20px) * (100vw - 375px) / (1366px - 375px), 30px);
    justify-content: flex-start;
    width: auto;
  }
  .menu .menu-right .menu-inner .menu-icons .menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .menu .menu-right .menu-inner .menu-icons .menu-icon img {
    width: clamp(30px, 30px + (50px - 30px) * (100vw - 375px) / (1366px - 375px), 50px);
    height: clamp(30px, 30px + (50px - 30px) * (100vw - 375px) / (1366px - 375px), 50px);
    -o-object-fit: contain;
       object-fit: contain;
  }
}

.scroll-indicator {
  position: absolute;
  right: clamp(-70px, 5px - (5px - -70px) * (100vw - 375px) / (1366px - 375px), 5px);
  bottom: clamp(-18px, -18px + (100px - -18px) * (100vw - 375px) / (1366px - 375px), 100px);
  font-size: clamp(16px, 16px + (20px - 16px) * (100vw - 375px) / (1366px - 375px), 20px);
  color: #1e1e1e;
  writing-mode: vertical-rl;
}
.scroll-indicator::after {
  animation: scroll 2s infinite;
  position: absolute;
  content: "";
  background-color: #1E1E1E;
  width: 1px;
  height: 115%;
  border-right: none;
  bottom: -12px;
  left: 0%;
  transform-origin: bottom left;
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}/*# sourceMappingURL=style.css.map */