html,
body {
  height: 100%;
  font-family: "Montserrat", "senobi-gothic", "Zen Kaku Gothic New", sans-serif;
  color: #4c4c4c;
  margin: 0;
  box-sizing: border-box;
}

/* レイアウト指定 */
main {
  display: grid;
  grid-template-columns: 1fr 6fr;
  margin: 0 auto;
  box-sizing: border-box;
}

.content {
  width: 100%; /* インナーマージンやボーダーなどの余白を考慮せず、親要素に対して100%の幅を持つ */
  min-width: 650px;
  object-fit: fill;
  box-sizing: border-box; /* ボックスサイズをコンテンツボックスからボーダーボックスに変更 */
  padding: 0 0 0 10px; /* 左右の余白を追加 */
}

@media screen and (min-width: 767px) and (max-width: 1000px) {
  .content {
    padding: 0 0 0 0px;
  }
}

@media screen and (max-width: 767px) {
  main {
    display: block;
    max-width: 767px;
    padding: 0;
    margin: 0 auto;
  }

  .content {
    width: 100%;
    max-width: 747px; /* 767pxから左右のpadding分（10px * 2 = 20px）を引いた値 */
    min-width: unset;
    padding: 0 0 0 0px;
  }
}
/***レイアウト指定 ***/

/* 共通クラス */
/*右側 各コンテンツ*/
.home__mv {
  padding-top: 0;
  padding-left: 0px;
}

.home__about,
.home__skills,
.contact__wrapper {
  border-top: none;
  /* padding-top: 2vw;
  padding-bottom: 12vh; */
  padding: 12vh 0;
}

.contact__wrapper {
  margin-bottom: 12vh;
}

/* home セクションタイトル */
.section__ttl {
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20px;
}

.section__ttl-ja {
  font-family: senobi-gothic;
  font-size: 2.6vw;
  font-weight: 400;
  padding: 25px 0px 0px 12px;
  white-space: nowrap;
  letter-spacing: -5px;
  color: #333;
  background-position: left bottom;
  text-align: left;
}

.js-text-effect span {
  display: inline-block; /*必須*/
  opacity: 0;
  visibility: visible;
  transform: rotateY(90deg);
}

.section__ttl-en {
  font-family: Montserrat;
  font-size: 1.65vw;
  font-weight: 300;
  color: #333;
  padding: 0px 0 0 20px;
  overflow: hidden; /* 必須 */
  white-space: nowrap; /* 必須 */
  border-right: 1px solid transparent; /* 初期状態では透明に設定 */
  width: 20%;
}

.section__tti-works,
.section__ttl-about,
.section__ttl-skill,
.section__ttl-contact {
  width: 20%;
}

@keyframes blink {
  50% {
    border-color: transparent; /* 点滅風に見せる */
  }
}

.fade-in-text span {
  opacity: 0;
  display: inline-block;
  animation: fadeIn 0.9s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* ボタン */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 60px;
  padding: 15px 20px;
  margin: 0 50px;
  background-color: #333333da;
  color: #fff;
  border-radius: 5rem;
  transition: 0.8s ease-in;
}

.btn:hover {
  background-color: #9dc4b7;
}

.button_text {
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 300;
  text-align: center;
}

/* transition-btn ページ遷移 */
.transition {
  position: fixed; /* または absolute */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* 他の要素よりも前面に表示されるように */
  transform: translateX(-100%);
  background-color: tomato; /* 背景色が表示されるように */
  transition: opacity 0.5s ease; /* アニメーションの設定 */
}

.transition.visible {
  opacity: 1; /* アニメーション開始時の透明度 */
}


/* about・contactページ 一番上のタイトル */
.about__section--ttl,
.contact__section--ttl {
  font-family: senobi-gothic;
  font-size: 4.4vw;
  font-weight: bolder;
  text-align: left;
  margin: 0 auto;
  padding-top: 9vw;
  line-height: 1.75;
  letter-spacing: -5.3px;
  background-repeat: no-repeat;
  background-size: 9vh;
  background-position: 0px 80px;
  background-color: rgb(255, 255, 255, 0.5);
  background-blend-mode: lighten;
}

/* sp 共通クラス */
/* 1000-767px */
@media screen and (min-width: 767px) and (max-width: 1000px) {
  .home__wrap {
    padding-left: 0;
  }

  .home__works {
    padding-top: 34vw;
  }

  .home__about,
  .home__skills {
    border-top: none;
    padding-top: 15vw;
    padding-bottom: 80px;
  }

  .section__ttl-ja {
    font-size: 24px;
    padding: 0;
  }

  .section__ttl-en {
    font-size: 20px;
    padding: 5px;
  }

  .btn {
    width: 180px;
    height: 60px;
    padding: 10px 20px;
    margin: 0;
  }

  .button_text {
    font-size: 20px;
  }
}

/* 767-425px */
@media screen and (min-width: 425px) and (max-width: 767px) {
  .home__works,
  .home__about,
  .home__skills,
  .contact {
    padding: 50px 10px;
    margin: 0px auto;
    box-sizing: border-box;
  }

  .section__ttl-ja {
    font-size: 22px;
    padding: 15px 0 0px 0px;
  }

  .section__ttl-en {
    font-size: 16px;
    font-weight: 400;
    padding-left: 5px;
    padding-top: 0;
    margin-bottom: 80px;
  }

  .btn {
    width: 180px;
    height: 60px;
    padding: 10px 20px;
    margin: 0;
  }

  .button_text {
    font-size: 20px;
  }

  /* about・contactページ 一番上のタイトル */
  .about__section--ttl,
  .contact__section--ttl {
    font-size: 33px;
    padding: 90px 30px 0 30px;
  }
}

/* 425px以下 */
@media screen and (max-width: 425px) {
  .home__wrap {
    width: 100%;
    max-width: 767px;
    padding-top: 20px;
    padding-left: 0;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .home__mv {
    margin-bottom: 120px;
  }

  .home__about,
  .home__works,
  .home__skills,
  .contact {
    padding: 70px 10px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .section__ttl {
    width: 50%;
  }

  .section__ttl-ja {
    font-size: 22px;
    padding: 10px 0 0 0px;
  }

  .section__ttl-en {
    font-size: 16px;
    font-weight: 400;
    padding-left: 5px;
    margin-bottom: 30px;
    width: 30%;
  }

  /* about・contactページ 一番上のタイトル */
  .about__section--ttl,
  .contact__section--ttl {
    font-size: 30px;
    padding: 90px 30px 0 0px;
  }
}
/*** 共通クラス ***/
/* ローディング */

/*** ローディング ***/
/* header */
/* 下からスクロールした時の動き */
#header {
  transition: opacity 1s ease, transform 0.3s ease;
}

#header.is-hide {
  opacity: 0;
  transform: translateY(-25px);
}

.header__nav {
  height: 20vh;
  width: 100%;
  max-width: 160px;
  margin: 0 auto;
  padding: 35px 20px 0 20px;
  position: fixed;
}

.header__nav li {
  width: 170px;
  font-family: senobi-gothic;
  font-size: 15px;
  font-weight: 300;
  margin-top: 17px;
  text-align: left;
  opacity: 1;
  transition: opacity 0.1s;
  letter-spacing: -1.1px;
}

.header__nav li:hover {
  opacity: 1;
}

.header__nav li:not(:hover):hover {
  opacity: 0.3;
}

.header__nav li a {
  color: #333;
}

.sp__menu__btn,
.sp__header__nav,
.sp__header__nav li {
  display: none;
}

/* sp header */
@media screen and (max-width: 1000px) {
  .header__nav {
    display: none;
  }

  .sp__header__nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 95%;
    height: 90vh;
    background-color: #fefefe;
    border: 10px solid #9dc4b7;
    border-radius: 0 0 100% 0;
    z-index: 9998;
    display: none;
  }

  .sp__nav__list {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10vw;
    align-items: center;
    padding-top: 27%;
    padding-right: 10%;
  }

  .sp__nav__list li {
    display: block;
    font-size: 22px;
    color: #9dc4b7;
    font-family: senobi-gothic;
    letter-spacing: -1.8px;
  }

  /* hamボタン */
  .sp__menu__btn {
    display: block;
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    cursor: pointer;
    z-index: 9999;
    background-color: #9dc4b7;
  }

  .sp__menu__btn {
    position: fixed;
    top: 0px;
    left: 0px;
    display: block;
    content: "";
    padding-left: 0px;
  }

  .sp__menu__btn span {
    top: 15px;
    left: 5px;
  }

  .sp__menu__btn span::after {
    position: absolute;
    top: 15px;
    left: 25px;
    display: block;
    content: "";
    width: 41px;
    height: 3px;
    background-color: #333;
    transition: 0.6s;
    border-radius: 5rem;
  }

  .sp__menu__btn span::before {
    position: absolute;
    top: 33px;
    left: 25px;
    display: block;
    content: "";
    width: 30px;
    height: 3px;
    background-color: #333;
    transition: 0.5s;
    border-radius: 5rem;
  }

  /* ham  クリック時 btn動き */
  .open span::before {
    transform: rotate(-135deg);
    top: 25px;
    width: 28px;
    bottom: 0px;
    background-color: #333;
  }

  .open span::after {
    transform: rotate(-45deg);
    top: 25px;
    width: 28px;
    background-color: #333;
  }

  .sp__menu__btn.open {
    background-color: #fff;
    border-top: 10px solid #9dc4b7;
    border-left: 10px solid #9dc4b7;
    border-radius: 0%;
    background-image: none;
  }
}
/*** header ***/

/* top・mv */
.home__mv {
  position: relative;
  top: 12px;
}

.mv__img img {
  width: 100%;
  top: 12px;
  position: relative;
}

.title {
  position: absolute;
  top: 32%;
  left: 0;
}

.title-text-group {
  padding-top: 14px;
}

/* 日本語 ttl */
.title__sub {
  font-family: senobi-gothic;
  font-size: 1.8vw;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: -0.3rem;
}

/* 名前 ＋ portfolio */
.title__main {
  font-family: montserrat;
  font-size: 3.5vw;
  font-weight: 200;
  line-height: 1.6vw;
  padding-top: 2.6vw;
  letter-spacing: -0.06rem;
}

.hidden {
  visibility: hidden;
}

/* 動く人 イラスト */
/* yellow */
.person-yellow {
  width: 3.6%;
  position: absolute;
  top: 31%;
  left: 51%;
}

.person-yellow img {
  animation: walk 4s normal 0s infinite;
}

/* green */
.person-green {
  width: 3.6%;
  position: absolute;
  top: 81%;
  left: 73%;
}

.person-green img {
  animation: jump 6s normal 0s infinite;
}

/* gray */
.person-gray {
  width: 3.6%;
  position: absolute;
  top: 4%;
  left: 85%;
}

.person-gray img {
  animation: run 6s normal 0s infinite;
}

/* beige */
.person-beige {
  width: 5.5%;
  position: absolute;
  top: 0%;
  left: 25%;
}

.person-beige img {
  animation: greeting 6s normal 0s infinite;
}

@keyframes walk {
  0%,
  60% {
    transform: rotate(0);
  }
  10%,
  70% {
    transform: rotate(-2deg);
  }
  12%,
  72% {
    transform: rotate(2deg);
  }
  14%,
  74% {
    transform: rotate(-2deg);
  }
  16%,
  76% {
    transform: rotate(2deg);
  }
  18%,
  78% {
    transform: rotate(-2deg);
  }
  40%,
  100% {
    transform: rotate(0);
  }
}

@keyframes jump {
  0%,
  100% {
    transform: translateY(0);
  }
  1% {
    transform: translateY(5px);
  }
  3% {
    transform: translateY(-1px);
  }
  5% {
    transform: translateY(6px);
  }
  8% {
    transform: translateY(1px);
  }
  10% {
    transform: translateY(6px);
  }
  12% {
    transform: translateY(1px);
  }
  13%,
  79% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(5px);
  }
  83% {
    transform: translateY(-1px);
  }
  85% {
    transform: translateY(6px);
  }
  88% {
    transform: translateY(1px);
  }
  90% {
    transform: translateY(6px);
  }
  92% {
    transform: translateY(1px);
  }
  92%,
  99% {
    transform: translateY(0);
  }
}

@keyframes greeting {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  10%,
  80% {
    transform: rotate(2deg);
  }
  12%,
  82% {
    transform: rotate(-2deg);
  }
  14%,
  84% {
    transform: rotate(2deg);
  }
  18%,
  88% {
    transform: rotate(-2deg);
  }
  20%,
  90% {
    transform: translateX(1px);
  }
  25%,
  93% {
    transform: translateX(3px);
  }
  30%,
  98% {
    transform: translateX(4px);
  }
}

@keyframes run {
  0%,
  100% {
    transform: translateY(0);
  }
  10%,
  70% {
    transform: rotate(2deg);
  }
  12%,
  72% {
    transform: rotate(-2deg);
  }
  14%,
  74% {
    transform: rotate(2deg);
  }
  18%,
  78% {
    transform: rotate(-2deg);
  }
  20%,
  80% {
    transform: translateX(1px);
  }
  25%,
  85% {
    transform: translateX(3px);
  }
  30%,
  90% {
    transform: translateX(4px);
  }
  40%,
  95% {
    transform: translateX(5px);
  }
}

/* scroll */
.scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scroll-bar {
  width: 1.8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 28vw;
  padding-top: 5vw;
}

.scroll-area {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px; /* 適宜調整 */
}

.mv__scroll-img {
  animation: shake 5s alternate 0.1s infinite;
}

@keyframes shake {
  0% {
    transform: rotate(3deg);
  }
  1% {
    transform: rotate(1deg);
  }
  2% {
    transform: rotate(-2deg);
  }
  3% {
    transform: rotate(1deg);
  }
  45%,
  50% {
    transform: translateY(4px);
  }
  65%,
  70% {
    transform: translateY(6px);
  }
  95%,
  100% {
    transform: translateY(8px);
  }
}

/* スクロールbar */
.scroll-img {
  position: absolute; /* 相対位置指定した親要素からの絶対位置指定 */
  left: 0;
  width: 100%;
  height: auto;
  transition: top 1s ease-out; /* 徐々に表示されるようにする */
  animation: scroll-move 3s ease-in-out infinite,
    scroll-move-hide 3s ease-out infinite;
}

/*=============== stepイメージイラスト =================*/
.scroll-img-container {
  width: 100%;
  max-width: 30px;
}

.scroll-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 30px 0 20px 0;
}

.steps-right {
  transform: rotate(130deg);
  margin-right: 7.5px;
}

.steps-right p {
  transform: rotate(-128deg);
}

.steps-left {
  transform: rotate(123deg);
  margin-left: 10px;
}

.steps-left p {
  transform: rotate(-125deg);
}

.steps-right img,
.steps-left img {
  width: 95%;
  min-width: 14px;
}

.steps-right img {
  transform: translate(0.1vw, 0.5vh);
}

.steps {
  opacity: 0;
  animation: step-animation 3s infinite; /* アニメーションの合計時間を調整 */
}

.steps p {
  font-family: senobi-gothic;
  font-size: 14px;
  display: flex;
  text-align: center;
  /* transform: rotate(220deg); */
  justify-content: center;
  gap: 5px;
}

/* アニメーションの設定 */
@keyframes step-animation {
  0% {
    opacity: 0; /* 非表示 */
  }
  33.33% {
    opacity: 1; /* 表示 */
  }
  35% {
    opacity: 1; /* 表示を維持 */
  }
  70% {
    opacity: 0; /* 非表示 */
  }
  100% {
    opacity: 0; /* 非表示を維持 */
  }
}

/* 各ステップに対してのアニメーションの設定 */
.steps:nth-child(1) {
  animation: step-animation 6s infinite; /* アニメーション周期を3秒に設定 */
}

.steps:nth-child(2) {
  animation: step-animation 6s infinite 0.7s; /* 0.5秒遅れで開始 */
}

.steps:nth-child(3) {
  animation: step-animation 6s infinite 1.4s; /* 1秒遅れで開始 */
}

.steps:nth-child(4) {
  animation: step-animation 6s infinite 1.9s; /* 1.5秒遅れで開始 */
}

.steps:nth-child(5) {
  animation: step-animation 6s infinite 2.4s; /* 2秒遅れで開始 */
}

.steps:nth-child(6) {
  animation: step-animation 6s infinite 2.9s; /* 2.5秒遅れで開始 */
}

/*  */
.sp-title-text-group,
.sp-title__sub,
.sp-title__main {
  display: none;
}

/* sp top・mv (home)*/
/* 1000pxから767pxまで */
@media screen and (min-width: 767px) and (max-width: 1000px) {
  /* 動く人 イラスト */
  .person-yellow {
    width: 4.3%;
    position: absolute;
    top: 48%;
    left: 47%;
  }

  .person-green {
    width: 4.2%;
    position: absolute;
    top: 83%;
    left: 58%;
  }

  .person-gray {
    display: none;
  }

  .person-beige {
    width: 6.2%;
    position: absolute;
    top: 0%;
    left: 15%;
  }

  .title__sub {
    font-size: 22px;
  }

  .title__main {
    font-size: 35px;
    line-height: 0.6;
  }

  /* scroll */
  .scroll-bar {
    width: 2.1%;
    position: absolute;
    left: 28vw;
    margin-top: -50px;
  }

  /* スクロールbar */

  /*=============== stepイメージイラスト =================*/
  .scroll-wrapper {
    gap: 0px;
    margin: 20px 0;
  }

  .steps-right {
    margin-right: 7.5px;
  }

  .steps-left {
    margin-left: 7px;
  }
}

/* 767px～550pxまで */
@media screen and (min-width: 550px) and (max-width: 767px) {
  .home__mv {
    position: relative;
    top: 0px;
    left: 0;
  }

  .mv__img img {
    width: 100%;
    max-width: 767px;
    padding: 10px 0 0 20px;
    box-sizing: border-box;
  }

  .title {
    position: absolute;
    top: 34%;
    left: 6%;
  }

  .title-text-group {
    padding-top: 10px;
  }

  /* 日本語 ttl */
  .title__sub {
    font-family: senobi-gothic;
    font-size: 20px;
    font-weight: 100;
    line-height: 1.76;
  }

  /* 名前 ＋ portfolio */
  .title__main {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.6vw;
    padding-top: 3vw;
  }

  /* 動く人 イラスト */
  .person-yellow {
    width: 7vw;
    position: absolute;
    top: 48%;
    left: 47%;
  }

  .person-green {
    width: 7.1vw;
    position: absolute;
    top: 82%;
    left: 56.5%;
  }

  .person-gray {
    display: none;
  }

  .person-beige {
    width: 8.7vw;
    position: absolute;
    top: 0%;
    left: 15%;
  }

  /* scroll */
  .scroll-bar {
    width: 2.5%;
    position: absolute;
    left: 20vw;
    margin-top: -75px;
  }

  /* スクロールbar */

  /*=============== stepイメージイラスト =================*/
  .scroll-wrapper {
    gap: 0px;
    margin: 20px 0;
  }

  .steps p {
    font-size: 13px;
    gap: 1px;
  }

  .sp-title-text-group,
  .sp-title__sub,
  .sp-title__main {
    display: none;
  }
}

/* 550～425px */
@media screen and (min-width: 425px) and (max-width: 550px) {
  .home__mv {
    position: relative;
    top: 0px;
    left: 0;
  }

  .mv__img img {
    width: 100%;
    max-width: 767px;
    padding: 10px 0 0 20px;
    box-sizing: border-box;
  }

  .title {
    position: absolute;
    top: 34%;
    left: 6%;
  }

  .title-text-group {
    padding-top: 10px;
  }

  /* 日本語 ttl */
  .title__sub {
    font-family: senobi-gothic;
    font-size: 20px;
    font-weight: 100;
    line-height: 1.76;
  }

  /* 名前 ＋ portfolio */
  .title__main {
    font-size: 28px;
    font-weight: 300;
    line-height: 2.6vw;
    padding-top: 3vw;
  }

  /* 動く人 イラスト */
  .person-yellow {
    width: 11.5vw;
    position: absolute;
    top: 39%;
    left: 45%;
    z-index: -1;
  }

  .person-green {
    width: 12.1vw;
    position: absolute;
    top: 15%;
    left: 50.5%;
  }

  .person-gray {
    display: none;
  }

  .person-beige {
    width: 14.2vw;
    position: absolute;
    top: -1.5%;
    left: 33%;
  }

  /* scroll */
  .scroll-bar {
    width: 4.5%;
    position: absolute;
    left: 8vw;
    margin-top: -110px;
  }

  /* スクロールbar */

  /*=============== stepイメージイラスト =================*/
  .scroll-wrapper {
    gap: 8px;
    margin: 20px 0;
  }

  .steps-right {
    margin-right: 1.5px;
  }

  .steps-left {
    margin-left: 1.5px;
  }

  .steps-right img,
  .steps-left img {
    width: 70%;
    min-width: 14px;
  }

  .sp-title-text-group,
  .sp-title__sub,
  .sp-title__main {
    display: none;
  }
}

/* 425px以下 */
@media screen and (max-width: 425px) {
  .home__mv {
    padding-top: 0;
    box-sizing: border-box;
  }

  .mv__img img {
    width: 100%;
    max-width: 767px;
    top: 5px;
    padding-left: 25px;
    box-sizing: border-box;
  }

  .title {
    top: 32%;
    left: 0%;
  }

  .title-text-group,
  .title__sub,
  .title__main {
    display: none;
  }

  .sp-title-text-group {
    display: block;
    padding: 0px 0 5px 10px;
  }

  .sp-title__sub {
    display: block;
    font-family: senobi-gothic;
    font-size: 18px;
    font-weight: 100;
    line-height: 1.7;
    padding-bottom: 2px;
  }

  .sp-title__main {
    display: block;
    font-family: montserrat;
    font-weight: 300;
    font-size: 24px;
    padding-top: 10px;
    text-shadow: 1px 1px 1px #fff;
  }

  .title-text-group,
  .title__sub,
  .title__main {
    display: none;
  }

  /* 動く人 イラスト */
  .person-yellow {
    width: 13.8%;
    position: absolute;
    top: 40%;
    left: 44%;
    z-index: -1;
  }

  .person-green {
    width: 14.2%;
    position: absolute;
    top: 16%;
    left: 51%;
  }

  .person-beige {
    width: 16.8%;
    position: absolute;
    top: -3%;
    left: 29%;
  }

  .person-gray,
  .person-gray img {
    display: none;
  }

  /* scroll */
  .scroll-bar {
    width: 4.5%;
    position: absolute;
    left: 11vw;
    margin-top: -12vh;
  }

  /* スクロールbar */

  /*=============== stepイメージイラスト =================*/
  .scroll-wrapper {
    gap: 5px;
    margin: 20px 0;
  }

  .steps-right {
    margin-right: 1.5px;
  }

  .steps-left {
    margin-left: 1.5px;
  }

  .steps-right img,
  .steps-left img {
    width: 70%;
    min-width: 14px;
  }
  .sp-title-text-group,
  .sp-title__sub,
  .sp-title__main {
    display: block;
    text-shadow: 1px 1px 1px #fff;
  }

  /*=============== stepイメージイラスト =================*/
  .scroll-img-container {
    padding-left: 10px;
  }

  .steps-right {
    transform: rotate(130deg);
    margin-right: 7.5px;
  }

  .steps-left {
    transform: rotate(123deg);
    margin-left: 10px;
  }

  .steps-right img,
  .steps-left img {
    width: 85%;
    min-width: 14px;
  }
}

/* 350px以下 */

/*** header ***/

/* works */
.home__works {
  padding-top: 5vh;
  margin-top: 33vw;
  width: 100%;
}

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

/* 横スクロールセクション */
.side-scroll {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow-x: hidden;
  padding: 8vh 0 0 0;
  -ms-overflow-style: none; /* IE, Edge 対応 */
  scrollbar-width: none; /* Firefox 対応 */
  width: 100%;
}

.side-scroll-container {
  width: 100%;
  position: relative;
  z-index: 10;
}

/* スクロールダウン */
/*スクロールダウン全体の場所*/
.works-scroll-area {
  position: absolute;
  top: 11%;
  left: -15%;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 13px;
  opacity: 0; /* 初期状態は透明にする */
  transition: opacity 0.5s ease-in-out; /* フェードイン・アウトのトランジション効果 */
  padding-left: 5px;
}

.works-scroll-area p {
  font-family: senobi-gothic;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.01rem;
  color: #9dc4b7;
  writing-mode: vertical-lr;
}

.scrolldown1 {
  width: 50px;
  height: 50px;
  animation: scrolldown 2.5s ease-in-out infinite;
  position: relative;
  margin-top: 15px;
}

.scroll-arrow {
  position: absolute;
  top: 20%;
  left: 20%;
  z-index: 1; /* 矢印の上に線を表示するため */
}

.scrolldown1::after,
.scrolldown1::before {
  content: "";
  position: absolute;
  background: #9dc4b7; /* 線の色を指定 */
  z-index: 0;
}

.scrolldown1::after {
  width: 0.5px; /* 縦の線の太さ */
  height: 20px; /* 縦の線の高さ */
  bottom: 10px; /* 縦の線の下の位置 */
  left: 50%;
  transform: translateX(-50%);
}

.scrolldown1::before {
  width: 8px;
  height: 0.5px;
  bottom: 13px;
  left: 56.5%;
  transform: translateX(-50%) rotate(-45deg);
  border-radius: 50%;
}

/*横スクロール部分 scroll高さ・位置・透過が変化して線が上から下に動く*/
@keyframes scrolldown {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  60% {
    height: 15px;
    opacity: 1;
  }
  80% {
    height: 20px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 30px;
    opacity: 0;
  }
}

/* スクロールコンテナのサイズ調整 */
.side-scroll-list-wrapper {
  position: relative;
  width: 100%; /* 親要素に合わせて全幅 */
  overflow: hidden; /* 必要に応じて調整 */
}

.side-scroll-list {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0 60px;
  width: calc(100vw * (アイテムの数 / 3.5)); /* アイテムの数に応じて調整 */
}

/* 横スクロールアイテムのサイズ調整 */
.side-scroll-item {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 15px;
  width: calc(100vw / 3.5);
  height: auto;
  min-height: 45vh;
  font-size: 32px;
  font-weight: 700;
  box-sizing: border-box;
}

.side-scroll-item + .side-scroll-item {
  margin: 0 30px;
}

.side-scroll-item img {
  width: 100%; /* 画像がアイテムに合わせて全幅になるように */
  height: auto; /* 画像の高さを自動に設定 */
  padding: 10px;
  background-color: #3333330d;
}

.side-scroll-item a {
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  transition: transform 0.3s linear;
}

.side-scroll-item a:hover {
  transform: scale(0.9);
}

.works__gallery-textarea {
  padding: 10px 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

.works__gallery-ttl p {
  font-family: Zen Kaku Gothic New;
  font-size: 14px;
  font-weight: lighter;
  text-align: center;
  display: block;
  padding: 10px;
  color: #333333da;
  letter-spacing: 0.03rem;
  line-height: 1.45;
}

.works__gallery-tool {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5px;
}

.works__gallery-tool p {
  font-family: Zen Kaku Gothic New;
  font-size: 14px;
  font-weight: lighter;
  text-align: center;
  display: block;
  padding: 5px;
  color: #333333da;
  letter-spacing: 0.03rem;
  line-height: 1.45;
}

.works-button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100vw / 3); /* 他のアイテムと同じ幅に設定 */
  position: absolute;
  top: 45%;
  right: 0%;
}

.works-button-wrapper a {
  padding: 15px 30px;
}

/* sp works */
/* 1000-767px */
@media screen and (min-width: 767px) and (max-width: 1000px) {
  .side-scroll-item + .side-scroll-item {
    margin: 0 10px;
  }
}

/* 767-520px以下 */
@media screen and (min-width: 520px) and (max-width: 767px) {
  .works-scroll-area,
  .scrolldown1::after.about-btn-inner,
  .scrolldown1::before,
  .works-scroll-area p {
   display: none;
  }

  .side-scroll {
    padding: 100px 0 0 0;
  }

  /* 横スクロールアイテムのサイズ調整 */
  .side-scroll-item {
    gap: 15px;
    width: calc(100vw / 1);
    height: auto;
  }
}

@media screen and (max-width: 520px) {
  .side-scroll {
    padding: 115px 0 0 0;
  }

  .works-scroll-area,
  .scrolldown1::after.about-btn-inner,
  .scrolldown1::before,
  .works-scroll-area p {
   display: none;
  }

  /* 横スクロールアイテムのサイズ調整 */
  .side-scroll-item {
    display: flex;
    gap: 15px;
    width: calc(100vw / 1.1);
    height: auto;
  }

  .works-button-wrapper {
    width: calc(100vw / 1); /* 他のアイテムと同じ幅に設定 */
  }

  .works__gallery-ttl p {
    font-size: 12px;
  }

  .works__gallery-tool p {
    font-size: 12px;
  }

  .works-button-wrapper a {
    width: 200px;
    height: 80px;
  }
}

/*** works ***/
/* about */
.home__profile__wrap {
  display: flex;
  align-items: center;
  gap: 2vw; /* 左右の間のスペースを設定 */
  padding-top: 5vw;
}

.profile-left {
  width: 65%;
}

.profile-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* 重なりの基準を作るために親要素にrelativeを設定 */
  gap: 0px; /* 重なりを制御するためにgapを0に設定 */
}

.profile-text {
  width: 45vw;
  font-family: Zen Kaku Gothic New;
  font-size: 18px;
  line-height: 1.6;
}

.profile-text span {
  display: block;
}

.profile-img {
  width: 12vw;
  max-width: 150px;
  position: relative; /* 位置を調整 */
  z-index: 2; /* ボタンより前面に表示 */
}
@keyframes sway {
  0%,
  100% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(1deg);
  }
  40% {
    transform: rotate(-2deg);
  }
  60% {
    transform: rotate(0);
  }
  80% {
    transform: rotate(0);
  }
  90% {
    transform: rotate(0);
  }
}

.profile-button-wrapper {
  display: flex;
  justify-content: center; /* ボタンを中央に配置 */
  margin-top: 30px; /* 画像と重なる位置に調整 */
  position: relative; /* 位置を調整 */
  z-index: 1; /* 画像の下に表示 */
  width: calc(100vw / 3); /* 他のアイテムと同じ幅に設定 */
}

.profile-button-wrapper a {
  padding: 15px 30px;
}

/* sp用 プロフィールimg・text*/
.sp__profile__wrap,
.sp__profile-text,
.sp__profile-img,
.sp-profile-button-wrapper {
  display: none;
}

/* sp about */
@media screen and (max-width: 767px) {
  .home__profile__wrap,
  .profile-text,
  .profile-img {
    display: none;
  }

  .sp__profile__wrap {
    display: block;
    gap: 50px;
    padding-top: 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sp__profile-img {
    display: block;
    width: 100%;
    text-align: center;
    animation: sway 3s infinite ease;
  }

  .sp__profile-img img {
    width: 50%;
    max-width: 200px;
    margin: 0 auto;
  }

  .about-btn-inner {
    width: 70%;
  }

  .sp__profile-text-block {
    display: block;
    width: 100%;
  }

  .sp__profile-text {
    display: block;
    font-family: Zen Kaku Gothic New;
    width: 100%;
    font-size: 16px;
    line-height: 1.95;
    margin: 0 auto;
    overflow: hidden;
  }

  .sp__profile-text span {
    display: block;
  }

  .sp-profile-button-wrapper {
    display: block;
    margin: 0;
  }

  .sp-profile-button-wrapper a {
    width: 200px;
    height: 80px;
  }
}
/**** about ****/
/* skills */
.skills {
  border-top: none;
  padding-top: 8vw;
  padding-bottom: 7vw;
}

.skills__box {
  margin-top: 6vw;
  padding-bottom: 2vh;
  padding-right: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.skill__group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.skill__group-item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-top: 25px;
  max-width: 1680px;
  border: 3px solid rgb(157, 196, 183, 1); /* border-top と border-left */
  border-right: 13px solid rgb(157, 196, 183, 1);
  border-bottom: 13px solid rgb(157, 196, 183, 1);
  border-radius: 0 10px 10px 10px; 
}

/* skillテキスト部分 */
.skills__ttl-wrapper {
  width: 35%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.skill-img {
  width: 100%;
  min-height: 40px;
}

.skill-img:hover {
  transform: rotate(-5deg);
}

.skills-text {
  font-family: Zen Kaku Gothic New;
  font-size: 18px;
  color: #222;
  width: 60%;
  text-align: left;
  line-height: 1.7;
  opacity: 1;
  background-color: transparent;
}

.skills-text.show {
  opacity: 1;
  letter-spacing: 0px;
  color: #222;
}

.skills-text.moving {
  opacity: 1;
}

/* sp skills (home)*/
/* 1000-767px */
@media screen and (min-width: 767px) and (max-width: 1000px) {
  .skills__group {
    margin-top: 6vw;
    padding-bottom: 2vh;
    padding-right: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .skill__group {
    width: 100%;
    max-width: 780px;
    justify-content: space-around;
    padding: 0;
  }

  .skill__group-item {
    width: 100%;
    margin: 20px auto;
    padding: 5px 10px;
  }

  .skills__ttl-wrapper,
  .skills__html-wrapper {
    width: 50%;
  }

  .skill-img {
    width: 100%;
    margin: 0 auto;
  }

  .skills-text {
    font-size: 18px;
    width: 100%;
    text-align: left;
    line-height: 1.7;
    opacity: 1;
    padding: 10px;
  }

  .skills-text.show {
    width: 100%;
    padding: 10px;
  }
}

/* 425-767px以下 */
@media screen and (min-width: 425px) and (max-width: 767px) {
  .skills__box {
    padding-right: 0;
    margin: 0 auto;
  }

  .skills__group {
    padding-top: 20px;
    padding-right: 0;
  }

  .skill__group {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .skill__group-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    margin: 10px;
  }

  /* skillテキスト部分 */
  .skills__ttl-wrapper {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
  }

  .skill-img {
    width: 60%;
    min-width: 240px;
    min-height: 40px;
    margin: 0 auto;
  }

  .skills-text {
    font-size: 16px;
    width: 100%;
    text-align: left;
    line-height: 1.7;
    padding: 10px;
  }
}

/* 400px以下 */
@media screen and (max-width: 425px) {
  .skills__box {
    padding-right: 0;
    margin: 0 auto;
  }

  .skills__group {
    padding: 0px;
  }

  .skill__group-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    margin: 10px;
    border-right: 10px solid #9dc4b7;
    border-bottom: 10px solid #9dc4b7;
  }

  /* skillテキスト部分 */
  .skills__ttl-wrapper {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
  }

  .skill-img {
    width: 100%;
    min-height: 40px;
  }

  .skills-text {
    font-size: 16px;
    width: 100%;
    text-align: left;
    line-height: 1.7;
    padding: 10px;
  }
}

/*** skills ***/
/* contact */
/* .contact {
  padding: 18vw 0;
} */

.contact__wrapper {
  width: 67vw;
  display: flex;
  justify-content: center;
  gap: 3vw;
  align-items: center;
  margin-top: 10vw;
  padding: 20px 0;
  border-top: 1px solid rgb(102, 102, 102, 0.2);
  border-bottom: 1px solid rgb(102, 102, 102, 0.2);
}

.contact-form__text {
  width: 33vw;
  font-family: Zen Kaku Gothic New;
  font-size: 16px;
  line-height: 1.7;
}

.contact-form__text span {
  display: inline-block;
  padding-top: 15px;
}

.contact-form-btn {
  text-align: center;
  line-height: 7.5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-form-btn a {
  padding: 25px 45px;
  border-radius: 1vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #333333da;
}

.contact-form-btn a:hover {
  background-color: #9dc4b7;
  background-blend-mode: lighten;
  transition: 0.2s;
}

.contact-btn-ja {
  font-family: Zen Kaku Gothic New;
  font-size: 1.2vw;
  font-weight: 500;
  color: #f5f5f5;
}

.contact-btn-en {
  font-family: Montserrat;
  font-size: 1vw;
  padding-top: 0.8vw;
  color: #f5f5f5;
}

/* sp contact */
@media screen and (min-width: 767px) and (max-width: 1000px) {
  .contact__wrapper {
    width: 100%;
    max-width: 1000px;
    gap: 30px;
  }

  .contact-form__text {
    width: 45%;
    font-family: Zen Kaku Gothic New;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0.003rem;
  }

  .contact-btn-ja {
    font-size: 16px;
    font-weight: 500;
  }
}

@media screen and (max-width: 767px) {
  .contact {
    padding: 100px 20px 180px 20px;
  }

  .contact__wrapper {
    width: 100%;
    max-width: 480px;
    height: 290px;
    display: block;
    margin: 60px auto 0 auto;
    border-top: none;
    border-bottom: none;
  }

  .contact-form__text {
    width: 100%;
    max-width: 480px;
    font-size: 16px;
    line-height: 2;
    letter-spacing: -0.04em;
    margin: 0 auto;
    padding: 10px 0;
  }

  .contact-form__text span {
    display: inline-block;
    /* padding-top: 20px; */
  }

  /* color・radius  btnで共通クラス */
  .contact-btn-area {
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: center;
  }

  .contact-form-btn {
    width: 300px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    margin: 80px auto 0 auto;
  }

  .contact-btn-ja {
    font-size: 18px;
    font-weight: 500;
  }

  .contact-btn-en {
    font-size: 16px;
    padding-top: 10px;
  }
}
/*** contact ***/
/* footer */
.footer-container {
  background-color: #9dc4b7;
  /* background-image: url(../img/footer-bgi-clear.png); */
  background-size: cover;
  background-repeat: no-repeat;
  /* background-color: rgba(255, 255, 255, 0.9); */
  background-blend-mode: lighten;
  box-sizing: border-box;
  padding-top: 60px;
}

.footer {
  width: 100%;
  box-sizing: border-box;
}

.person-red {
  width: 100%;
  border-bottom: 1px solid #333;
  padding-top: 50px;
}

.person-redpair-img {
  width: 2.5vw;
  transform: rotateY(180deg);
  animation: walk2 50s ease infinite, walk2-hide 51s infinite;
}

.person-red-img {
  width: 2.5vw;
  transform: rotateY(180deg);
  animation: walk3 50s ease infinite, walk3-hide 51s infinite;
}

@keyframes walk2 {
  0% {
    transform: translateX(0px) rotateY(180deg) rotate(3deg);
  }
  1% {
    transform: translateX(10px) rotateY(180deg) rotate(-2deg);
  }
  2% {
    transform: translateX(20px) rotateY(180deg) rotate(2deg);
  }
  3% {
    transform: translateX(30px) rotateY(180deg) rotate(-2deg);
  }
  4% {
    transform: translateX(40px) rotateY(180deg) rotate(3deg);
  }
  5% {
    transform: translateX(50px) rotateY(180deg) rotate(-3deg);
  }
  6% {
    transform: translateX(60px) rotateY(180deg) rotate(3deg);
  }
  7% {
    transform: translateX(70px) rotateY(180deg) rotate(-3deg);
  }
  8% {
    transform: translateX(80px) rotateY(180deg) rotate(3deg);
  }
  9% {
    transform: translateX(90px) rotateY(180deg) rotate(-3deg);
  }
  10% {
    transform: translateX(100px) rotateY(180deg) rotate(3deg);
  }
  11% {
    transform: translateX(110px) rotateY(180deg) rotate(-3deg);
  }
  12% {
    transform: translateX(120px) rotateY(180deg) rotate(3deg);
  }
  13% {
    transform: translateX(130px) rotateY(180deg) rotate(-3deg);
  }
  14% {
    transform: translateX(140px) rotateY(180deg) rotate(3deg);
  }
  15% {
    transform: translateX(150px) rotateY(180deg) rotate(-3deg);
  }
  16% {
    transform: translateX(160px) rotateY(180deg) rotate(3deg);
  }
  17% {
    transform: translateX(170px) rotateY(180deg) rotate(-3deg);
  }
  18% {
    transform: translateX(180px) rotateY(180deg) rotate(3deg);
  }
  19% {
    transform: translateX(190px) rotateY(180deg) rotate(-3deg);
  }
  20% {
    transform: translateX(200px) rotateY(180deg) rotate(3deg);
  }
  21% {
    transform: translateX(210px) rotateY(180deg);
  }
  22% {
    transform: translateX(220px) rotateY(180deg) rotate(3deg);
  }
  23% {
    transform: translateX(230px) rotateY(180deg) rotate(-3deg);
  }
  24% {
    transform: translateX(240px) rotateY(180deg) rotate(3deg);
  }
  25% {
    transform: translateX(250px) rotateY(180deg) rotate(-3deg);
  }
  26% {
    transform: translateX(260px) rotateY(180deg) rotate(3deg);
  }
  27% {
    transform: translateX(270px) rotateY(180deg) rotate(-3deg);
  }
  28% {
    transform: translateX(280px) rotateY(180deg) rotate(3deg);
  }
  29% {
    transform: translateX(290px) rotateY(180deg) rotate(-3deg);
  }
  30% {
    transform: translateX(300px) rotateY(180deg) rotate(3deg);
  }
  31% {
    transform: translateX(310px) rotateY(180deg) rotate(-3deg);
  }
  32% {
    transform: translateX(320px) rotateY(180deg) rotate(3deg);
  }
  33% {
    transform: translateX(330px) rotateY(180deg) rotate(-3deg);
  }
  34% {
    transform: translateX(340px) rotateY(180deg) rotate(3deg);
  }
  35% {
    transform: translateX(350px) rotateY(180deg) rotate(-3deg);
  }
  36% {
    transform: translateX(360px) rotateY(180deg) rotate(3deg);
  }
  37% {
    transform: translateX(370px) rotateY(180deg) rotate(-3deg);
  }
  38% {
    transform: translateX(380px) rotateY(180deg) rotate(3deg);
  }
  39% {
    transform: translateX(390px) rotateY(180deg) rotate(-3deg);
  }
  40% {
    transform: translateX(400px) rotateY(180deg) rotate(3deg);
  }
  41% {
    transform: translateX(410px) rotateY(180deg) rotate(-3deg);
  }
  42% {
    transform: translateX(420px) rotateY(180deg) rotate(3deg);
  }
  43% {
    transform: translateX(430px) rotateY(180deg) rotate(-3deg);
  }
  44% {
    transform: translateX(440px) rotateY(180deg) rotate(3deg);
  }
  45% {
    transform: translateX(450px) rotateY(180deg) rotate(-3deg);
  }
  46% {
    transform: translateX(460px) rotateY(180deg) rotate(3deg);
  }
  47% {
    transform: translateX(470px) rotateY(180deg) rotate(-3deg);
  }
  48% {
    transform: translateX(480px) rotateY(180deg) rotate(3deg);
  }
  49% {
    transform: translateX(490px) rotateY(180deg) rotate(-3deg);
  }
  50% {
    transform: translateX(500px) rotateY(180deg) rotate(3deg);
  }
  51%,
  99% {
    transform: translateX(500px) rotateY(180deg) rotate(3deg);
  }
}

@keyframes walk3 {
  0% {
    transform: translateX(0px) rotateY(180deg) rotate(-4deg);
  }
  1.2% {
    transform: translateX(10px) rotateY(180deg) rotate(4deg);
  }
  2.2% {
    transform: translateX(20px) rotateY(180deg) rotate(-4deg);
  }
  3.2% {
    transform: translateX(30px) rotateY(180deg) rotate(4deg);
  }
  4.2% {
    transform: translateX(40px) rotateY(180deg) rotate(-4deg);
  }
  5.2% {
    transform: translateX(50px) rotateY(180deg) rotate(4deg);
  }
  6.2% {
    transform: translateX(60px) rotateY(180deg) rotate(-4deg);
  }
  7.2% {
    transform: translateX(70px) rotateY(180deg) rotate(4deg);
  }
  8.2% {
    transform: translateX(80px) rotateY(180deg) rotate(-4deg);
  }
  9.2% {
    transform: translateX(90px) rotateY(180deg) rotate(4deg);
  }
  10.2% {
    transform: translateX(100px) rotateY(180deg) rotate(-4deg);
  }
  11.2% {
    transform: translateX(110px) rotateY(180deg) rotate(4deg);
  }
  12.2% {
    transform: translateX(120px) rotateY(180deg) rotate(-4deg);
  }
  13.2% {
    transform: translateX(130px) rotateY(180deg) rotate(4deg);
  }
  14.2% {
    transform: translateX(140px) rotateY(180deg) rotate(-4deg);
  }
  15.2% {
    transform: translateX(150px) rotateY(180deg) rotate(4deg);
  }
  16.2% {
    transform: translateX(160px) rotateY(180deg) rotate(-4deg);
  }
  17.2% {
    transform: translateX(170px) rotateY(180deg) rotate(4deg);
  }
  18.2% {
    transform: translateX(180px) rotateY(180deg) rotate(-4deg);
  }
  19.2% {
    transform: translateX(190px) rotateY(180deg) rotate(4deg);
  }
  20.2% {
    transform: translateX(200px) rotateY(180deg);
  }
  21.2% {
    transform: translateX(210px) rotateY(180deg) rotate(4deg);
  }
  22.2% {
    transform: translateX(220px) rotateY(180deg);
  }
  23.2% {
    transform: translateX(230px) rotateY(180deg) rotate(4deg);
  }
  24.2% {
    transform: translateX(240px) rotateY(180deg);
  }
  25.2% {
    transform: translateX(250px) rotateY(180deg) rotate(4deg);
  }
  26.2% {
    transform: translateX(260px) rotateY(180deg);
  }
  27.2% {
    transform: translateX(270px) rotateY(180deg) rotate(4deg);
  }
  28.2% {
    transform: translateX(280px) rotateY(180deg);
  }
  29.2% {
    transform: translateX(290px) rotateY(180deg) rotate(4deg);
  }
  30.2% {
    transform: translateX(300px) rotateY(180deg);
  }
  31.2% {
    transform: translateX(310px) rotateY(180deg) rotate(4deg);
  }
  32.2% {
    transform: translateX(320px) rotateY(180deg);
  }
  33.2% {
    transform: translateX(330px) rotateY(180deg) rotate(4deg);
  }
  34.2% {
    transform: translateX(340px) rotateY(180deg);
  }
  35.2% {
    transform: translateX(350px) rotateY(180deg) rotate(4deg);
  }
  36.2% {
    transform: translateX(360px) rotateY(180deg);
  }
  37.2% {
    transform: translateX(370px) rotateY(180deg) rotate(4deg);
  }
  38.2% {
    transform: translateX(380px) rotateY(180deg);
  }
  39.2% {
    transform: translateX(390px) rotateY(180deg) rotate(4deg);
  }
  40.2% {
    transform: translateX(400px) rotateY(180deg);
  }
  41.2% {
    transform: translateX(410px) rotateY(180deg) rotate(4deg);
  }
  42.2% {
    transform: translateX(420px) rotateY(180deg);
  }
  43.2% {
    transform: translateX(430px) rotateY(180deg) rotate(4deg);
  }
  44.2% {
    transform: translateX(440px) rotateY(180deg);
  }
  45.2% {
    transform: translateX(450px) rotateY(180deg) rotate(4deg);
  }
  46.2% {
    transform: translateX(460px) rotateY(180deg);
  }
  47.2% {
    transform: translateX(470px) rotateY(180deg) rotate(4deg);
  }
  48.2% {
    transform: translateX(480px) rotateY(180deg);
  }
  49.2% {
    transform: translateX(490px) rotateY(180deg) rotate(4deg);
  }
  50.2% {
    transform: translateX(500px) rotateY(180deg);
  }
  51.2%,
  99% {
    transform: translateX(500px) rotateY(180deg) rotate(3deg);
  }
}

@keyframes walk2-hide {
  0%,
  100% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
}

@keyframes walk3-hide {
  0%,
  100% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
}

.footer__wrapper {
  width: 100%;
  display: flex; /* 横並びにするためにflexを使用 */
  justify-content: center; /* 領域間にスペースを確保 */
  align-items: center; /* 上下中央に揃える */
  padding: 1vw 2vw 7vw 2vw;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ttl共通 */
.footer-ttl {
  display: flex;
  align-items: center; /* 縦の中央揃え */
  padding: 0 5px;
}

.footer-ttl-text {
  font-family: Montserrat;
  font-size: 14px;
}

/* sitemap */
.sitemap__area {
  width: 55%; /* sitemapの幅を55%に設定 */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2vw;
}


/* site-map ボタン */
.sitemap__nav {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 80%;
}

.sitemap-item-wrapper {
  display: flex;
  align-items: center; /* 上下中央に揃える */
}

.sitemap-item-wrapper .footer-btn {
  display: block;
  width: 70%;
  cursor: pointer;
  border: none;
  padding: 10px 0;
  background: #9dc4b7;
  border: 1px solid #4c4c4c;
  color: #333;
}

.sitemap-item-wrapper .footer-btn .sitemap-item-btn-inner {
  height: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sitemap-item-wrapper .footer-btn .sitemap-item-btn-inner .footer-btn-text {
  padding: 5px;
  text-align: center;
}

.footer-btn-text {
  font-size: 16px;
  color: #333;
  padding: 0 20px;
}

.footer-btn-en {
  font-family: Montserrat;
}

.footer-btn-ja {
  font-family: senobi-gothic;
}

/* sns */
.footer-sns-wrap {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 縦並びにする */
}

.sns__area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.footer-ttl-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin: 0 auto;
}

.sns-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

.sns-icon-img {
  transition: 0.5s ease-in-out;
  text-align: center;
  padding: 15px;
  border-radius: 50%;
}

.sns-icon-img img {
  width: 100%;
  max-width: 25px;
  display: inline-block; /* imgを横並びにする */
}

.sns-icon-img:hover {
  background-color: #f5f5f5;
  background-blend-mode: lighten;
}


.sp-sns-icon {
  display: none;
}

/* コピーライト */
.copyright {
  color: #f5f5f5;   
}

/* sp footer (footer right/ leftのspは別で記載) */
/* 1000-767px */
@media screen and (min-width: 767px) and (max-width: 1000px) {
  .person-redpair img {
    width: 30px;
  }

  .person-red img {
    width: 30px;
  }
}

/* 767px以下 */
@media screen and (max-width: 767px) {
  .footer-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: color;
    box-sizing: border-box;
    padding: 50px 0 0 0;
  }

  .person-redpair-img {
    width: 30px;
    transform: rotateY(180deg);
    animation: sp-walk 10s ease infinite, walk2-hide 11s infinite;
  }

  .person-red-img {
    width: 30px;
    transform: rotateY(180deg);
    animation: sp-walk 10s ease infinite, walk3-hide 11s infinite;
  }

  @keyframes sp-walk {
    0%,
    100% {
      transform: rotateY(180deg);
    }
    10% {
      transform: translateX(3px) rotateY(180deg) rotate(3deg);
    }
    15% {
      transform: translateX(8px) rotateY(180deg) rotate(-3deg);
    }
    20% {
      transform: translateX(13px) rotateY(180deg) rotate(3deg);
    }
    25% {
      transform: translateX(18px) rotateY(180deg) rotate(-3deg);
    }
    30% {
      transform: translateX(23px) rotateY(180deg) rotate(3deg);
    }
    35% {
      transform: translateX(28px) rotateY(180deg) rotate(-3deg);
    }
    40% {
      transform: translateX(33px) rotateY(180deg) rotate(3deg);
    }
    45% {
      transform: translateX(38px) rotateY(180deg) rotate(-3deg);
    }
    50% {
      transform: translateX(43px) rotateY(0deg) rotate(3deg);
    }
    55% {
      transform: translateX(48px) rotateY(0deg) rotate(-3deg);
    }
    60% {
      transform: translateX(43px) rotateY(0deg) rotate(3deg);
    }
    65% {
      transform: translateX(38px) rotateY(0deg) rotate(-3deg);
    }
    70% {
      transform: translateX(33px) rotateY(0deg) rotate(3deg);
    }
    75% {
      transform: translateX(28px) rotateY(0deg) rotate(-3deg);
    }
    80% {
      transform: translateX(23px) rotateY(0deg) rotate(3deg);
    }
    85% {
      transform: translateX(18px) rotateY(0deg) rotate(-3deg);
    }
    90% {
      transform: translateX(13px) rotateY(0deg) rotate(3deg);
    }
    95% {
      transform: translateX(8px) rotateY(0deg) rotate(-3deg);
    }
  }

  .footer__wrapper {
    width: 100%;
    max-width: 767px;
    display: block;
    padding: 0 15px 75px 15px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* sitemap */
  .sitemap__area {
    display: block;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
  }

  .footer-ttl-text {
    width: 90%;
    margin: 0 auto;
    text-align: left;
  }

  .sitemap__nav {
    width: 100%;
}
 
  .sitemap-item-wrapper {
    justify-content: center;
    width: 100%;
  }

  .sitemap-item-wrapper .footer-btn {
    width: 80%;
  }

 

  .footer-ttl-map {
    width: 100%;
    max-width: 380px;
    padding: 45px 0 30px 0;
    text-align: left;
    font-size: 22px;
    font-weight: 800;
  }

  .sitemap__nav {
    width: 90%;
    margin: 0 auto;
  }

  /* sns */
  .footer-sns-wrap {
    width: 100%;
  }

  .sns__area {
    display: flex;
    flex-direction: row;
    width: 35%;
    min-width: 230px;
    margin: 30px auto 10px auto;
  }

  .footer-ttl-sns {
    font-size: 22px;
    font-weight: 800;
    padding-top: 0px;
  }

  .sns-icon {
    gap: 15px;
  }
}

/* footer left */
.footer-img-left {
  margin-top: -20px;
}

.footer-img-left img {
  width: 1.7vw;
  position: fixed;
  left: 6vw;
  bottom: 11vw;
}

/* footer right */
.footer-img-right {
  width: 50px;
  position: fixed;
  right: 5.5vw;
  bottom: 5px;
  padding: 1.7vw 2.2vw 1.7vw 2.7vw;
}

.top-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.5vw;
  border: 1px solid #f5f5f5;
  border-radius: 50%;
  background-color: #f5f5f5; /* 背景色 */
  box-shadow: 0 1px 0 #dedede; /* 影の太さ・色 */
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 100;
}

.top-btn:hover {
  box-shadow: none;
  background-color: #f5f5f5;
  transform: translateY(5px);
  transition: ease 0.1s;
  border: 1px solid #f5f5f5;
}

.top-btn-arrow {
  width: 2vw;
  height: 2vw;
  position: fixed;
  margin-bottom: 20px;
  padding: 0 5px 20px 5px;
}

.top-btn-arrow span {
  display: block;
  width: 100%;
  height: 100%;
}

.top-btn-arrow span::after {
  content: "";
  display: block;
  width: 0.1vw;
  height: 1vw;
  background: #333;
  position: absolute;
  top: 0.3vw;
  right: 30%;
  transform: rotate(135deg);
  border-radius: 5vw;
}

.top-btn-arrow span::before {
  content: "";
  display: block;
  width: 0.1vw;
  height: 1vw;
  background: #333;
  position: absolute;
  top: 0.3vw;
  left: 30%;
  transform: rotate(45deg);
  border-radius: 5vw;
}

.top-btn img {
  width: 1.2vw;
  padding: 38px 5px 10px 5px;
  margin: 0 auto;
  position: absolute;
}

.top-btn:hover .top-btn-arrow span::after,
.top-btn:hover .top-btn-arrow span::before,
.top-btn:hover .top-btn-arrow,
.top-btn:hover .top-btn-text {
  color: #fff;
  transition: ease-out 0.2s;
}

/* copyright */
.copyright {
  font-family: Zen Kaku Gothic New;
  font-size: 10px;
  text-align: center;
  padding-top: 1vw;
  padding-bottom: 1.5vw;
  margin-top: 5vw;
}

/* sp footer right・left */
/* 1000-767px */
@media screen and (min-width: 767px) and (max-width: 1000px) {
  .top-btn {
    padding: 30px;
    width: 30px;
    height: 30px;
    position: fixed;
    backdrop-filter: contrast(4) blur(5px);
    border: 0.5px solid #9dc4b72a;
    position: absolute;
    bottom: 7vw;
    left: 5px;
  }

  .top-btn a {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .top-btn-arrow {
    width: 20px;
    height: 20px;
    position: relative;
    margin-bottom: 5px;
  }

  .top-btn-arrow span {
    width: 20px;
    position: absolute;
    bottom: 18px;
  }

  .top-btn-arrow span::after {
    content: "";
    display: block;
    width: 1px;
    height: 10px;
    background: #333;
    position: absolute;
    top: 10px;
    right: 51%;
    transform: rotate(135deg);
    border-radius: 5vw;
  }

  .top-btn-arrow span::before {
    content: "";
    display: block;
    width: 1px;
    height: 10px;
    background: #333;
    position: absolute;
    top: 10px;
    left: 7%;
    transform: rotate(45deg);
    border-radius: 5vw;
  }

  .top-btn img {
    width: 13px;
    padding-top: 20px;
  }

  .top-btn-text {
    display: none;
  }

  .copyright {
    font-size: 10px;
    padding: 20px 0;
  }
}

/* 767px以下 */
@media screen and (max-width: 767px) {
  .footer-img-left {
    display: none;
  }

  .footer-img-left img {
    display: none;
  }

  .footer-img-right {
    width: 45px;
    height: 65px;
    position: absolute;
    right: 20px;
    padding: 10px;
  }

  .top-btn {
    right: 0px;
    bottom: 0px;
    padding: 15px;
    width: 100vw;
    height: 50px;
    position: fixed;
    backdrop-filter: contrast(8) blur(5px);
    background-color: #9dc4b72a;
    border: none;
    border-radius: 0;
    left: 0;
  }


  .top-btn a {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .top-btn-arrow {
    width: 20px;
    height: 20px;
    position: relative;
    margin-bottom: 5px;
  }

  .top-btn-arrow span {
    position: absolute;
    bottom: 15px;
  }

  .top-btn-arrow span::after {
    content: "";
    display: block;
    width: 1px;
    height: 10px;
    background: #333;
    position: absolute;
    top: 10px;
    right: 51%;
    transform: rotate(135deg);
    border-radius: 5vw;
  }

  .top-btn-arrow span::before {
    content: "";
    display: block;
    width: 1px;
    height: 10px;
    background: #333;
    position: absolute;
    top: 10px;
    left: 8%;
    transform: rotate(45deg);
    border-radius: 5vw;
  }

  .top-btn img {
    width: 16px;
    padding-top: 27px;
    margin: 0 auto;
  }

  .top-btn-text {
    display: none;
  }

  .copyright {
    font-size: 10px;
    margin-top: -70px;
      height: 100%;
      font-family: senobi-gothic;
      font-weight: 300;
      font-size: 10px;
  }
}

/*** TOPpage footer ***/
/* works 制作物の紹介ページ */
.works__container {
  padding-top: 5vw;
  width: 100%;
  min-width: 300px;
  padding-left: 80px;
}

/* slider部分 */
.works__slider {
  /* background-color: #efefef28; */
  padding: 20px;
}

/* 真ん中以外  スライド */
.slider-img img {
  height: auto;
  opacity: 0.3;
  transform: scale(0.9); /*スライドサイズ80%にする*/
  transition: opacity 0.5s, transform 0.6s; /*スライド透過率50％・拡大アニメーション.5秒*/
  width: 52vw;
  padding: 10px;
}

.slider-img img:hover {
  cursor: pointer;
}

/* 真ん中  スライド */
.works__slider .slick-center img {
  opacity: 1;
  transform: scale(0.9);
}

.works__slider .slick-center img:hover {
  cursor: auto;
}

.works__slider-item {
  width: 86%;
}

.slick-active img {
  width: 100%;
  margin: 0 auto;
  /* padding: 10px; */
  border: 3px solid #d6d6d6;
  background-color: #fff;
}

/* スライダー dotsのところ（img） */
.slick-dots {
  bottom: -17vw;
  width: 100%;
  text-align: left;
}

.slick-dots li {
  width: 13vw;
  opacity: 0.3;
}

.slick-dots li + .slick-dots li {
  margin: 20px;
}

.slick-dots .slick-active {
  opacity: 1;
  transform: translate(-10px, -10px);
  transition: 0.4s;
  border: none;
}

.slick-dots img {
  height: auto;
  opacity: 0.8;
  transform: scale(0.8); /*スライドサイズ80%にする */
  transition: opacity 0.5s, transform 0.6s; /*スライド透過率50％・拡大アニメーション.5秒 */
}

.slick-dots .slick-active img {
  border: none;
  opacity: 1;
  transform: scale(1);
}

/* sp works slider ( 制作物の紹介部分はworks最後に記載) */
@media screen and (max-width: 767px) {
  .works__container {
    padding: 0px;
    box-sizing: border-box;
    background-image: url(../img/prof-text-back-06.png);
    background-size: contain;
    background-color: rgb(255, 255, 255, 0.55);
    background-blend-mode: lighten;
  }

  .works__wrap {
    width: 100%;
    max-width: 767px;
    padding: 100px 30px;
    box-sizing: border-box;
  }

  /* slider部分 */
  .works__slider {
    background-color: #efefef5e;
    padding: 15px;
  }

  .works__slider,
  .slick-initialized,
  .slick-slider {
    margin: 0 auto;
  }

  /* 真ん中以外  スライド */
  .slider-img img {
    opacity: 1;
    transform: scale(0.8); /*スライドサイズ80%にする*/
    transition: opacity 1s, transform 0.6s; /*スライド透過率50％・拡大アニメーション.5秒*/
    width: 100%;
    max-width: 767px;
  }

  .slider-img img:hover {
    cursor: pointer;
  }

  /* 真ん中  スライド */
  .works__slider .slick-center img {
    opacity: 1;
    transform: scale(1);
  }

  .works__slider .slick-center img:hover {
    cursor: auto;
  }

  /* 後ろのスライドちょい見せ */
  .works__slider .slick-list {
    padding: 0 0px 0 0 !important;
    /* padding: 0 0 0 0 !important; */
  }

  .works__slider-item {
    width: 86%;
    /* width: 78%; */
  }

  .slick-active img {
    margin: 0 auto;
    padding: 0px;
    border: 3px solid #d6d6d6;
    background-color: #fff;
  }

  /* スライダー dotsのところ（img） */
  .slick-dots {
    bottom: -17vw;
    width: 100%;
    text-align: left;
    display: flex;
    /* justify-content: space-around; */
    justify-content: flex-start;
    gap: 20px;
  }

  .slick-dots li {
    width: 13%;
    opacity: 0.3;
  }

  .slick-dots li + .slick-dots li {
    margin: 0px;
  }

  .slick-dots .slick-active {
    transform: translate(0px, 0px);
  }

  .slick-dots img {
    height: auto;
    opacity: 0.8;
    transform: scale(0.8); /*スライドサイズ80%にする */
    transition: opacity 0.5s, transform 0.6s; /*スライド透過率50％・拡大アニメーション.5秒 */
  }

  .slick-dots .slick-active img {
    border: none;
    opacity: 1;
    transform: scale(1);
  }
}

/* works 紹介部分 */
.works__information {
  display: block;
  font-family: Zen Kaku Gothic New;
  padding-top: 17vw;
}

.works-ttl {
  font-size: 1.5vw;
  font-weight: bold;
  padding-top: 8vw;
}

/* 使用ツール・制作期間 */
.works-tool,
.works-period {
  display: flex;
  font-size: 1.3vw;
  padding-top: 3vw;
}

.tool-ttl,
.period-ttl {
  font-size: 1.3vw;
  text-align-last: left;
  width: 8vw;
  border-right: 2px solid #333;
}

.use-tool,
.production-period {
  font-size: 1.3vw;
  padding-left: 2vw;
}
/*** 使用ツール・制作期間 ***/

.works-text {
  font-size: 1.3vw;
  padding-top: 3vw;
}

/* 制作物  全体img */
.works__gallery {
  width: 100%;
  min-width: 300px;
  padding-top: 3vw;
  padding-bottom: 50px;
}

.works__gallery--list {
  width: 70%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10vw;
  padding-top: 16vw;
  padding-bottom: 5vw;
}

.works__gallery--list img {
  width: 50%;
}

/* sp works テキスト・gallery部分(sp works sliderは別記載)
380～767px */
@media screen and (min-width: 380px) and (max-width: 767px) {
  /* works 紹介部分 */
  .works__information {
    padding-top: 90px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .works-ttl {
    font-size: 18px;
    padding-top: 80px;
  }

  /* 使用ツール・制作期間 */
  .works-tool,
  .works-period {
    display: block;
    font-size: 16px;
    padding-top: 55px;
    width: 100%;
    max-width: 500px;
  }

  .tool-ttl,
  .period-ttl {
    font-size: 16px;
    font-weight: bold;
    border-right: none;
    width: 100%;
    padding-bottom: 15px;
  }

  .use-tool,
  .production-period {
    font-size: 14px;
    padding-left: 0;
  }

  .works-text {
    font-size: 14px;
    padding-top: 55px;
  }

  /* 制作物  全体img */
  .works__gallery {
    width: 100%;
    max-width: 500px;
    padding: 110px 0px;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 auto;
  }

  .works__gallery--list {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0;
    margin: 0 auto;
  }

  .works__gallery--list img {
    width: 100%;
    max-width: 500px;
    padding-top: 50px;
  }
}

/* 380px以下 */
@media screen and (max-width: 380px) {
  /* works 紹介部分 */
  .works__information {
    padding-top: 50px;
  }

  .works-ttl {
    font-size: 18px;
    padding-top: 80px;
  }

  /* 使用ツール・制作期間 */
  .works-tool,
  .works-period {
    display: block;
    font-size: 16px;
    padding-top: 55px;
    width: 100%;
    max-width: 500px;
  }

  .tool-ttl,
  .period-ttl {
    font-size: 14px;
    font-weight: bold;
    border-right: none;
    width: 100%;
    padding-bottom: 15px;
  }

  .use-tool,
  .production-period {
    font-size: 14px;
    padding-left: 0;
  }

  .works-text {
    font-size: 14px;
    padding-top: 55px;
  }

  /* 制作物  全体img */
  .works__gallery {
    width: 100%;
    max-width: 500px;
    padding: 110px 0px;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 auto;
    position: relative;
    left: 50%;
    transform: translate(-50%);
  }

  .works__gallery--list {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0;
    margin: 0 auto;
  }

  .works__gallery--list img {
    width: 100%;
    max-width: 500px;
    padding-top: 50px;
  }
}

/*** works ***/
/* about */
/* topタイトル（about・contact共通 共通クラス管理） */
.sp-top-ttl {
  display: none;
}

.about__wrap {
  padding-left: 80px;
}

.about__section--ttl span {
  display: block;
}

/* メッセージ部分 */
.about__text__area {
  padding-top: 8vw;
}

.about__sub-text {
  font-family: Zen Kaku Gothic New;
  font-size: 1.87vw;
  line-height: 2.2;
}

.about__sub-text + .about__sub-text {
  padding-top: 12vw;
}

.about__sub-text span,
.about__main-text span {
  display: block;
}

.profile__wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 80px;
}
:root {
  --duration: 2.4s;
  --ease: ease;
  --delay: 0.6s;
}

.about__main-text {
  width: 32vw;
  font-family: Zen Kaku Gothic New;
  font-size: 2.8vw;
  font-weight: 400;
  line-height: 2;
  letter-spacing: -0.02em;
  padding-right: 10px;
  padding-bottom: 4vw;
  -webkit-background-clip: text;
  opacity: 0;
  transform: translate(-20px, 0);
}

.fade-left {
  transition: opacity var(--duration) var(--ease) var(--delay),
    transform var(--duration) var(--ease) var(--delay);
}

.fade-left.in-view {
  opacity: 1;
  transform: translate(0, 0);
}

.about__name {
  display: block;
  font-family: Zen Kaku Gothic New;
  font-size: 1.6vw;
  padding-top: 3vw;
}

.about__img {
  width: 32vw;
}

.about__img img {
  width: 100%;
}

/* sp about */
@media screen and (max-width: 767px) {
  .sp-top-ttl {
    display: block;
    font-family: lato;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.45;
    text-align: center;
    position: relative;
    top: 30px;
    left: 50%;
    transform: translate(-50%, -2.5%);
  }

  .sp-top-ttl span {
    display: block;
    position: relative; /* absoluteからrelativeに変更 */
    margin-top: 8px; /* 間隔をあけるためのマージン */
    left: 0; /* 位置調整 */
    top: 0; /* 位置調整 */
  }

  .sp-top-ttl span:first-child {
    margin-top: 0; /* 最初のspanにはマージンを適用しない */
  }

  .about__wrap {
    padding: 100px 30px 0 30px;
  }

  /* メッセージ部分 */
  .about__text__area {
    padding-top: 60px;
  }

  .about__sub-text {
    font-size: 14px;
    line-height: 2.2;
  }
  /* テキスト  『』部分 */
  .subtext-group-top {
    font-size: 12px;
    padding-top: 10px;
  }

  .subtext-group-center {
    display: block;
    font-size: 12px;
  }

  .about__sub-text + .about__sub-text {
    padding-top: 100px;
  }

  .about__sub-text span {
    display: block;
    line-height: 2.8;
    letter-spacing: 0.04em;
  }

  .about__main-text span {
    line-height: 2.2;
  }

  .profile__wrap {
    display: block;
    padding-bottom: 80px;
  }

  .about__main-text {
    width: 80%;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.02em;
    padding-right: 10px;
    padding-bottom: 4vw;
  }

  .about__name {
    display: block;
    font-size: 12px;
    padding-top: 35px;
  }

  .about__img {
    width: 100%;
    max-width: 767px;
    margin-top: -100px;
    margin-bottom: 80px;
    margin-right: 20px;
    display: flex;
    justify-content: end;
  }

  .about__img img {
    width: 65%;
    border-radius: 60%;
    margin-right: -20px;
  }
}

/*** about ***/
/* contact */
/* topタイトル（about・contact共通 共通クラス管理） */
/* ↓テキスト */
.contact__wrap {
  padding-left: 80px;
}

.contact__text__area {
  padding-top: 8vw;
  padding-bottom: 8vw;
}

.contact__sub-text {
  font-family: Zen Kaku Gothic New;
  font-size: 1.32vw;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.contact__sub-text span {
  display: block;
}

.contact__sub-text + .contact__sub-text {
  padding-top: 4vw;
}
/* sns */
.contact__sns__area {
  width: 70vw;
  padding-top: 2vw;
  display: flex;
  justify-content: flex-start;
  gap: 7vw;
  align-items: center;
}

.sns__icon {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.sns__icon__img {
  width: 1.75vw;
  color: #739087;
  padding-right: 1vw;
}

.sns__ttl {
  display: inline-block;
  font-family: Zen Kaku Gothic New;
  font-size: 1.32vw;
  position: relative;
  padding-right: 3vw;
  text-align: left;
}

.sns__arrow {
  display: inline-block;
  color: #333333;
  line-height: 0.5vw;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0.22em 0.32em;
  border-left-color: currentColor;
  border-right: 0;
  padding-right: 2vw;
}

.sns__account {
  display: inline-block;
  font-family: Zen Kaku Gothic New;
  font-size: 1.32vw;
  width: 9vw;
}

.sns__account:hover {
  opacity: 0.6;
  text-decoration: underline solid 0.6px #333;
  text-underline-offset: 8px;
}

/* sp about */
@media screen and (max-width: 767px) {
  .contact__wrap {
    padding: 100px 30px 0 30px;
  }

  .contact__text__area {
    padding-top: 100px;
    padding-bottom: 120px;
  }

  .contact__sub-text {
    font-size: 16px;
    line-height: 2.1;
    letter-spacing: 0.001em;
  }

  .contact__sub-text span {
    display: block;
  }

  .contact__sub-text + .contact__sub-text {
    padding-top: 80px;
  }

  .contact__sns__area {
    width: 100%;
    max-width: 767px;
    padding-top: 40px;
    display: block;
  }

  .sns__icon {
    justify-content: flex-start;
    padding-bottom: 17px;
  }

  .sns__icon__img {
    width: 20px;
    padding-right: 16px;
  }

  .sns__ttl {
    font-size: 14px;
    position: relative;
    padding-right: 16px;
  }

  .sns__arrow {
    color: #333333;
    line-height: 0.5vw;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 0.25em 0.34em;
    border-left-color: currentColor;
    border-right: 0;
  }

  .sns__account {
    font-size: 14px;
    width: 88px;
    padding-left: 10px;
  }

  .sns__account:hover {
    opacity: 0.6;
    text-decoration: underline solid 0.6px #333;
    text-underline-offset: 8px;
  }
}

/* フォーム */
.contact__form {
  max-width: 600px;
  padding-bottom: 120px;
}

.contact__form__item {
  display: flex;
  flex-wrap: wrap;
  gap: 1vw;
  justify-content: flex-start;
  margin-bottom: 50px;
}

.contact__form__label,
.contact__form__input {
  padding: 10px;
}

.contact__form__label {
  width: 90%;
  display: flex;
  align-items: center;
  font-family: Zen Kaku Gothic New;
}

.contact__form__input {
  width: 80%;
  font-family: Zen Kaku Gothic New;
  font-size: 1.17vw;
  border: 1px solid #eeeeee;
  background-color: #eeeeee;
  border-radius: 1em;
}

.contact__form__input:focus-visible {
  outline: #e6f5b2 auto 1px;
}

.contact__form__required {
  font-family: Zen Kaku Gothic New;
  font-size: 1.1vw;
  color: #333;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 5px;
  padding: 5px 5px;
  margin: 0 0 0 18px;
}

textarea.contact__form__input {
  height: 160px;
}

.contact__form__submit {
  text-align: center;
  width: 80%;
}

.button {
  height: 100%;
}

.contact__form__submit button {
  font-family: Zen Kaku Gothic New;
  font-size: 1.3vw;
  font-weight: 500;
  color: #fff;
  background-color: #9dc4b7;
  border: 1px solid #9dc4b7;
  border-radius: 2vw;
  padding: 0.5vw 3vw;
  transition: 0.4s;
  cursor: pointer;
}

.contact__form__submit button:hover {
  opacity: 0.6;
  background-color: transparent;
  color: #333;
}

/* sp about(フォーム部分) */
@media screen and (max-width: 767px) {
  .contact__form {
    width: 100%;
    max-width: 767px;
  }

  .contact__form__item {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    justify-content: flex-start;
    width: 100%;
    max-width: 676px;
    margin-bottom: 50px;
  }

  .contact__form__label,
  .contact__form__input {
    padding: 10px;
  }

  .contact__form__input {
    width: 100%;
    font-size: 16px;
    border-radius: 6px;
  }

  .contact__form__input:focus-visible {
    outline: #e6f5b2 auto 12px;
  }

  .contact__form__required {
    font-family: Zen Kaku Gothic New;
    font-size: 10px;
    color: #333;
    background-color: #fff;
    border: 1px solid #333;
    border-radius: 5px;
    padding: 5px 5px;
    margin: 0 0 0 18px;
  }

  textarea.contact__form__input {
    height: 160px;
  }

  .contact__form__submit {
    text-align: center;
    margin: 0 auto;
  }

  .contact__form__submit button {
    font-size: 16px;
    font-weight: 300;
    color: #9dc4b7;
    background-color: #fff;
    border: 1px solid #9dc4b7;
    width: 210px;
    height: 50px;
    border-radius: 5px;
  }
}

/*** contact ***/
/* works-gallery */
.gallery {
  padding-right: 30px;
  padding-bottom: 140px;
}

.article-wrap {
  display: flex;
  justify-content: flex-start;
  gap: 8vw;
  padding-bottom: 18vw;
}

.works-gallery-block {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc(40% - 4.6%);
  height: 24vw;
  margin: 1.8%;
  perspective: 1600px;
  cursor: pointer;
  box-sizing: border-box;
}

.works-gallery-block a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.works-item-wrapper {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.005);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
  transform-origin: center center;
}

.works-item-wrapper::before {
  content: "";
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  transition: all 0.2s ease-in;
  box-shadow: 0 8px 38px rgba(42, 42, 42, 0.6);
}

.works-item-wrapper:hover::before {
  box-shadow: 0 14px 64px rgba(42, 42, 42, 0.5);
}

.works-gallery-img {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.works-gallery-img::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0.01);
}

.works-gallery-img .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}

.works-gallery-img .lighting {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.item-content {
  pointer-events: none;
  padding: 17% 1px 20px;
  color: #333;
  position: absolute;
  top: 17vw;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.item-content h6 {
  font-family: Zen Kaku Gothic New;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  padding-top: 2.2vw;
  margin-bottom: 1%;
  transform: translateZ(100px);
}

.item-content .tool {
  width: 100%;
  font-family: Zen Kaku Gothic New;
  font-size: 16px;
  color: #333;
  padding-top: 1vw;
  transform: translateZ(70px);
}

/* sp works-gallery */

@media screen and (max-width: 767px) {
  .gallery {
    padding-right: 0px;
    padding-bottom: 100px;
  }

  .article-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 160px;
    padding-bottom: 160px;
  }

  .works-gallery-block {
    width: calc(80% - 4.6%);
    height: 240px;
    margin: 1.8%;
    perspective: 1600px;
  }

  .item-content {
    width: 100%;
    max-width: 767px;
    padding: 0px 0px 0px;
    position: relative;
    top: 0px;
    left: 0;
  }

  .item-content h6 {
    width: 100%;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    padding-top: 15px;
    margin-bottom: 0;
    transform: translateZ(100px);
  }

  .item-content .tool {
    width: 100%;
    font-size: 12px;
    color: #333;
    padding-top: 8px;
    transform: translateZ(70px);
  }
}
/*** works-gallery ***/

/* thanks page */
.thanks-page {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 1500px;
  height: 100vh;
  margin: 0 auto;
  text-align: center;
  background-color: #fff;
  position: relative;
}

.tanks-wrap {
  margin: 0 auto;
  width: 100%;
}

.thanks-inner {
  width: 100%;
  max-width: 750px;
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*thankyou アニメーション  */
.thanks-animation {
  font-family: Montserrat;
  font-weight: 700;
  font-size: 65px;
  color: #666;
  border-right: 3px solid #666;
  width: 100%;
  height: 90px;
  margin: 0 auto 50px auto;
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: typing 4s steps(13, end),
    blink-caret 0.5s step-end infinite alternate;
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}

.thanks-animation span {
  padding: 0 20px;
}

/* テキスト */
.thanks-textarea {
  margin-bottom: 100px;
  width: 100%;
  max-width: 1000px;
}

.thanks-text-inner {
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.thanks-text {
  font-family: Zen Kaku Gothic New;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  color: #666;
  line-height: 1.5;
  letter-spacing: -0rem;
  padding: 0 20px;
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
}

.thanks-text span {
  display: inline-block;
  text-align: left;
  width: 100%; /* 必要に応じて幅を調整 */
  margin: 0 auto;
}

.thanks-text + .thanks-text {
  margin-top: 15px;
}

/* ハート */
.heart-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(10vw + 40px); /* 動的にサイズを調整 */
  width: calc(10vw + 40px); /* 動的にサイズを調整 */
  margin: 0 auto;
}

.heart {
  display: inline-block;
  position: relative;
  width: 100%; /* 親要素に対して100% */
  height: 100%; /* 親要素に対して100% */
  transform: rotate(45deg);
  transform-origin: 50% 50%; /* 中心を基準に回転 */
  z-index: -1;
  animation: fall 3.5s linear 0s 1;
}

@keyframes fall {
  0% {
    transform: scale(0.8, 1.4) translate(0%, -100%);
  }
  10% {
    transform: scale(0.8, 1.4) translate(0%, -15%);
  }
  20% {
    transform: scale(1.4, 0.6) translate(0%, 30%);
  }
  30% {
    transform: scale(0.9, 1.1) translate(0%, -10%);
  }
  40% {
    transform: scale(0.95, 1.2) translate(0%, -30%);
  }
  50% {
    transform: scale(0.95, 1.2) translate(0%, -10%);
  }
  60% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  70% {
    transform: scale(1, 1) translate(0%, 0%) rotate(20deg);
  }
  74% {
    transform: scale(1, 1) translate(0%, 0%) rotate(-10deg);
  }
  77% {
    transform: scale(1, 1) translate(0%, 0%) rotate(-15deg);
  }
  80% {
    transform: scale(1, 1) translate(0%, 0%) rotate(10deg);
  }
  83% {
    transform: scale(1, 1) translate(0%, 0%) rotate(15deg);
  }
  87% {
    transform: scale(1, 1) translate(0%, 0%) rotate(20deg);
  }
  90% {
    transform: scale(1, 1) translate(0%, 0%) rotate(25deg);
  }
  93% {
    transform: scale(1, 1) translate(0%, 0%) rotate(30deg);
  }
  97% {
    transform: scale(1, 1) translate(0%, 0%) rotate(35deg);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%) rotate(40deg);
  }
}
.heart div {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  background: rgb(255, 248, 248);
}

.heart div:after,
.heart div:before {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: rgb(255, 248, 248);
}

.heart div:before {
  left: -50%;
  border-radius: 50% 0 0 50%;
}

.heart div:after {
  top: -50%;
  border-radius: 50% 50% 0 0;
}

/* ボタン */
.thanks-btn-area {
  width: 100%;
  max-width: 1000px;
  margin-top: 50px;
}

.thanks-btn {
  position: relative;
}

.thanks-btn a {
  width: 40%;
  height: 4vw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px 10px 10px;
  border: 1px solid #333;
  border-radius: 3rem;
  margin: 0 auto;
}

.thanks-btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.thanks-btn a:hover {
  background-color: #9dc4b7c0;
  transition: 0.4s;
  border-radius: 5rem;
  border: none;
}

.thanks-btn a:hover .thanks-btn-text {
  color: #fff;
}

.thanks-btn a:hover .thanks-btn-arrow span::after,
.thanks-btn a:hover .thanks-btn-arrow span::before {
  background: #fff;
}

.thanks-btn:hover .thanks-btn-arrow {
  transform: translateX(-10px);
  transition: ease-in-out 0.3s;
}

.thanks-btn-arrow span {
  display: block;
  width: 2vw;
  height: 2vw;
  padding-left: 1vw;
  position: relative;
  left: 1.2vw;
}

.thanks-btn-arrow span::after {
  content: "";
  display: block;
  width: 0.1vw;
  height: 1vw;
  background: #333;
  position: absolute;
  top: 38%;
  right: 50%;
  transform-origin: right center;
  border-radius: 5vw;
  transform: rotate(-45deg);
}

.thanks-btn-arrow span::before {
  content: "";
  display: block;
  width: 0.1vw;
  height: 1vw;
  background: #333;
  position: absolute;
  top: 8%;
  right: 50%;
  transform-origin: right center;
  border-radius: 5vw;
  transform: rotate(45deg);
}

.thanks-btn-inner {
  width: 78%;
  margin: 0 auto;
}

.thanks-btn-text {
  font-family: montserrat;
  font-size: 1.2vw;
  width: 100%;
  text-align: center;
  margin: 0;
  padding-right: 10px;
}

.top-line {
  width: 100vw;
  height: 8px;
  background-color: #9dc4b7;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.right-line {
  width: 8px;
  height: 100vh;
  background-color: #9dc4b7;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transform: rotate(180deg);
}

.left-line {
  width: 8px;
  height: 100vh;
  background-color: #9dc4b7;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  transform: rotate(180deg);
}

.bottom-line {
  width: 100vw;
  height: 8px;
  background-color: #9dc4b7;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
}

/* メディアクエリでサイズ調整 */
@media (max-width: 1000px) {
  .thanks-animation {
    width: 100%;
    max-width: 350px;
    font-size: 40px;
    height: 50px;
    line-height: 45px;
    margin: 80px auto 80px auto;
  }

  .thanks-animation span {
    padding: 0 10px;
  }

  /* テキスト */
  .thanks-textarea {
    margin-bottom: 80px;
    width: 100%;
    max-width: 1000px;
  }

  .thanks-text-inner {
    margin: 0 auto;
    padding: 20px 5px 0 5px;
    width: 100%;
    max-width: 250px;
  }

  .thanks-text {
    font-family: Zen Kaku Gothic New;
    text-align: center;
    font-size: 18px;
    color: #666;
    line-height: 1.5;
    letter-spacing: -0rem;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    min-width: 135px;
  }

  .thanks-text span {
    display: inline-block;
    text-align: left;
    width: 100%; /* 必要に応じて幅を調整 */
    min-width: 135px;
    margin: 0 auto;
  }

  /* ハート */
  .heart-area {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(10vw + 40px); /* 動的にサイズを調整 */
    width: calc(10vw + 40px); /* 動的にサイズを調整 */
    margin: 0 auto;
  }

  .heart {
    display: inline-block;
    position: relative;
    width: 100%; /* 親要素に対して100% */
    height: 100%; /* 親要素に対して100% */
    transform: rotate(45deg);
    transform-origin: 50% 50%; /* 中心を基準に回転 */
    z-index: -1;
  }

  .heart div {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: rgb(252, 224, 224);
  }

  .heart div:after,
  .heart div:before {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(252, 224, 224);
  }

  .heart div:before {
    left: -50%;
    border-radius: 50% 0 0 50%;
  }

  .heart div:after {
    top: -50%;
    border-radius: 50% 50% 0 0;
  }

  /* ハート */
  .heart-area {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(10vw + 40px); /* 動的にサイズを調整 */
    width: calc(10vw + 40px); /* 動的にサイズを調整 */
    margin: 0 auto;
  }

  .heart {
    display: inline-block;
    position: relative;
    width: 100%; /* 親要素に対して100% */
    height: 100%; /* 親要素に対して100% */
    transform: rotate(45deg);
    transform-origin: 50% 50%; /* 中心を基準に回転 */
    z-index: -1;
  }

  .heart div {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: rgb(255, 235, 235);
  }

  .heart div:after,
  .heart div:before {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(255, 235, 235);
  }

  .heart div:before {
    left: -50%;
    border-radius: 50% 0 0 50%;
  }

  .heart div:after {
    top: -50%;
    border-radius: 50% 50% 0 0;
  }
  /* ボタン */
  .thanks-btn-area {
    width: calc(40vw + 100px);
    margin: 0 auto;
    margin-top: 120px;
  }

  .thanks-btn {
    position: relative;
  }

  .thanks-btn a {
    width: 200px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 20px;
    border: 1px solid #333;
    border-radius: 3rem;
    margin: 0 auto;
  }

  .thanks-btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .thanks-btn a:hover {
    background-color: #9dc4b7c0;
    transition: 0.4s;
    border-radius: 5rem;
    border: none;
  }

  .thanks-btn a:hover .thanks-btn-text {
    color: #fff;
  }

  .thanks-btn a:hover .thanks-btn-arrow span::after,
  .thanks-btn a:hover .thanks-btn-arrow span::before {
    background: #fff;
  }

  .thanks-btn:hover .thanks-btn-arrow {
    transform: translateX(-10px);
    transition: ease-in-out 0.3s;
  }

  .thanks-btn-arrow span {
    display: block;
    width: 16px;
    height: 16px;
    padding-left: 1vw;
    position: relative;
    left: 10px;
  }

  .thanks-btn-inner {
    width: 100%;
    margin: 0 auto;
  }

  .thanks-btn-arrow span::after {
    content: "";
    display: block;
    width: 1px;
    height: 10px;
    background: #333;
    position: absolute;
    top: 6px;
    right: 50%;
    transform-origin: right center;
    border-radius: 5vw;
    transform: rotate(-45deg);
  }

  .thanks-btn-arrow span::before {
    content: "";
    display: block;
    width: 1px;
    height: 10px;
    background: #333;
    position: absolute;
    top: 0;
    right: 50%;
    transform-origin: right center;
    border-radius: 5vw;
    transform: rotate(45deg);
  }

  .thanks-btn-text {
    font-size: 14px;
    width: 100%;
  }
}

/* about */
/* topタイトル（about・contact共通 共通クラス管理） */
.sp-top-ttl {
  display: none;
}

.about__section--ttl span {
  display: block;
}

.aboutprof__img {
  width: 31.5vw;
}

.aboutprof__img img {
  width: 65%;
  border-radius: 50%;
}

/* メッセージ部分 */
.aboutprof__text__area {
  padding: 0px 0 20px 20px;
}

.aboutprof-mydate {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
  padding-bottom: 8vw;
  background-image: url(../img/prof-text-back-06.png);
  background-size: cover;
  background-repeat: no-repeat;
  transform: rotate(180deg);
}

.aboutprof-mydate p,
.aboutprof__img {
  transform: rotate(-180deg);
}

.aboutprof__my-text {
  display: flex;
  flex-direction: column;
  line-height: 2.3;
  text-shadow: 1px 1px #fff;
  width: 45%;
}

.prof-name-en {
  font-family: Montserrat;
  font-size: 33px;
  font-weight: 400;
  text-align: left;
  line-height: 1.2;
}

.prof-name-jp {
  font-family: Senobi-gothic;
  font-size: 16px;
  font-weight: 300;
}

.prof-hobby {
  font-family: Senobi-gothic;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: -0.1px;
}

.aboutprof__sub-text {
  font-family: Zen Kaku Gothic New;
  font-size: 18px;
  font-weight: 300;
  line-height: 2.3;
  background-image: url(../img/prof-text-back-06.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 10px 20px 0 20px;
  text-shadow: 1px 1px #fff;
}

.aboutprof__sub-text span,
.aboutprof__main-text span {
  display: block;
}

.profprofile__wrap {
  padding-bottom: 80px;
}

:root {
  --duration: 2.4s;
  --ease: ease;
  --delay: 0.6s;
}

.aboutprof__main-text {
  font-family: Zen Kaku Gothic New;
  font-size: 28px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: -0.02em;
  padding: 4vw 10px 4vw 40px;
  -webkit-background-clip: text;
  opacity: 0;
  transform: translate(-3px, 0);
}

.fade-left {
  transition: opacity var(--duration) var(--ease) var(--delay),
    transform var(--duration) var(--ease) var(--delay);
}

.fade-left.in-view {
  opacity: 1;
  transform: translate(0, 0);
}

.aboutprof__name {
  display: block;
  font-family: Zen Kaku Gothic New;
  font-size: 1.6vw;
  padding-top: 3vw;
}

/* sp about */
@media screen and (max-width: 767px) {
  .sp-top-ttl {
    display: block;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.45;
    text-align: center;
    position: relative;
    top: 10px;
    left: 50%;
    transform: translate(-50%, -2.5%);
  }

  .sp-top-ttl span {
    display: block;
    position: relative; /* absoluteからrelativeに変更 */
    margin-top: 8px; /* 間隔をあけるためのマージン */
    left: 0; /* 位置調整 */
    top: 0; /* 位置調整 */
  }

  .sp-top-ttl span:first-child {
    margin-top: 0; /* 最初のspanにはマージンを適用しない */
  }

  .aboutprof__img {
    width: 100%;
    margin-top: 125px;
  }

  .aboutprof__img img {
    width: 100%;
    border-radius: 0%;
  }

  /* メッセージ部分 */
  .aboutprof__text__area {
    padding: 0px 0 20px 0px;
  }

  .aboutprof__wrap {
    padding: 0px 30px;
  }

  .aboutprof-mydate {
    display: block;
  }

  .aboutprof__my-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    width: 100%;
    padding: 5px 0;
    position: absolute;
    bottom: -10px;
    left: 0px;
    background: linear-gradient(
      315deg,
      transparent 45%,
      rgba(255, 255, 255, 1) 55%
    );
  }

  .prof-name-en {
    font-family: Montserrat;
    font-size: 22px;
    font-weight: 400;
    text-align: left;
  }

  .prof-name-jp {
    font-family: Senobi-gothic;
    font-size: 15px;
    text-align: left;
  }

  .prof-hobby {
    font-family: Senobi-gothic;
    font-size: 14px;
    text-align: left;
  }

  .aboutprof__sub-text {
    padding: 60px 0 0 20px;
  }

  .aboutprof__sub-text span,
  .aboutprof__main-text span {
    padding: 0 10px;
  }

  .profprofile__wrap {
    padding-top: 30px;
    padding-bottom: 0px;
  }

  .aboutprof__name {
    font-size: 14px;
    padding-top: 30px;
  }
}

/*** about ***/