/* 
Theme name: Word Press NAOKI HATA PORTFOLIO
*/

@charset "utf-8";

html {
  font-size: 100%;
}
body {
  color: #121212;
  font-family: "Zen Old Mincho", "EB Garamond", serif;
  font-feature-settings: "palt";
  overflow-wrap: break-word;
  line-height: 2;
  position: relative;
  background-color: #dec79e;
  /* scroll-behavior: smooth; */
}

body.no-scroll {
  overflow: hidden;
}


a {
  color: #121212;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
li {
  list-style: none;
}

/* サイドメニューの横幅分だけ左にmarginをとる */
.container {
  position: relative;
}
/* コンテンツ幅を設定するための共通クラス */
.wrapper {
  max-width: 980px;
  padding: 80px 20px 80px 20px;
  margin: 0 auto 0 5%;
}
.wrapper2 {
  max-width: 65%;
  /* 870px */
  padding: 80px 120px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.7);
}

/*
  セクションタイトル用の共通クラス
  両サイドの線は疑似要素で作成して、Flexboxで横並びに配置
  ※beforeが左の線、afterが右の線
  */
.sec-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 2.25rem;
  margin-bottom: 60px;
  text-align: center;
  letter-spacing: 2px;
}
.sec-title2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 3.875rem;
  margin-bottom: 15%;
  text-align: center;
  letter-spacing: 2px;
  width: 60%;
}
.sec-title::before,
.sec-title::after {
  border-top: 1px solid;
  content: "";
  width: 28%;
}

.sec-title2::before {
  border-top: 2px solid;
  content: "";
  width: 10%;
}
.sec-title2::after {
  border-top: 2px solid;
  content: "";
  width: 10%;
}

/*-------------------------------------------
  ヘッダー
  -------------------------------------------*/

#header {
  width: 20vw; /* 画面の10%の幅 */
  height: 100vh;
  padding: 2%;
  position: fixed;
  right: 0;
  top: 0;
  /* backdrop-filter: blur(10px); ぼかし効果 */
  background: linear-gradient(
    to left,
    rgba(94, 92, 92, 0.55),
    rgba(91, 88, 88, 0)
  );
  /* background: rgba(157, 152, 152, 0.1);  */
  z-index: 9999;
  opacity: 0;
  animation: l-header 0.8s ease-in-out 1.5s forwards;
  color: #060606;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes l-header {
  0% {
    opacity: 0;
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

#header .section-title {
  writing-mode: vertical-rl;
  margin-bottom: 5%;
  margin-top: 15%;
  display: flex;
  flex-direction: column;
  /* z-index: 2; */
}

#header .section-title .en {
  /* display: block; */
  font-size: 1.5rem;
  letter-spacing: 3px;
  margin-top: -10%;
}

#header .section-title .ja {
  /* display: block; */
  font-size: 3.85rem;
  letter-spacing: 0.3em;
}

#header .l-header-nav-menu {
  margin-bottom: 60px;
}

/* ハンバーガーメニュー */

#header .hamburger-menu {
  position: fixed;
  top: 48%;
  right: 25%;
  z-index: 1;
  /* left: calc(100vw - 130px); */
  animation: l-header 0.8s ease-in-out 3s forwards;
}

#header .hamburger {
  position: relative;
  display: block;
  width: 90px;
  height: 65px;
  cursor: pointer;
  transition: 0.5s;
  color: #000;
}

.hamburger span {
  border-radius: 4px;
  display: block;
  position: absolute;
  left: 0;
  height: 1px;
  transition: 0.5s;
  background: #000;
  transition: all 0.4s;
  box-sizing: border-box;
}
.hamburger a {
  display: inline-block;
  padding-top: 50%;
  width: 120%;
  height: 20vh;
}

.buger_box {
  width: 100%;
}

.hamburger span:nth-child(1) {
  /* color: #fff; */
  background: none;
  text-align: left;
  font-size: 0.875rem;
  bottom: 3%;
  left: 12%;
  width: 100%;
  height: 15px;
  line-height: 1;
  text-transform: uppercase;
  opacity: 1;
  letter-spacing: 3px;
}

.hamburger span:nth-child(2) {
  /* color: #fff; */
  background: none;
  text-align: center;
  font-size: 1.2rem;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15px;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
}
.open.hamburger span:nth-child(1) {
  opacity: 0;
}

.open.hamburger span:nth-child(2) {
  /* color: #fff; */
  background: none;
  text-align: center;
  font-size: 0.875rem;
  bottom: 0;
  left: -11%;
  width: 100%;
  height: 15px;
  line-height: 1;
  text-transform: uppercase;
  opacity: 1;
}

.hamburger span:nth-child(3) {
  width: 110px;
  bottom: -95%;
  transform: rotate(90deg);
  transition: 0.8s ease;
}

.hamburger span:nth-child(4) {
  bottom: -70%;
  width: 75px;
  transform: rotate(90deg);
  transition: 0.8s ease;
}

.hamburger span:nth-child(5) {
  bottom: -45%;
  width: 40px;
  transform: rotate(90deg);
  transition: 0.8s ease;
}

a:hover span:nth-child(3) {
  width: 70px;
  transform: rotate(-180deg);
}
a:hover span:nth-child(4) {
  width: 70px;
  transform: rotate(-180deg);
} /* 真ん中の線を消す */
a:hover span:nth-child(5) {
  width: 70px;
  transform: rotate(-180deg);
} /* 真ん中の線を消す */

.buger_menu {
  width: 100%;
  height: 100vh;
  /* top: -490%; */
  position: fixed;
  /* transform: translateX(0%); */
  transition: opacity 1s, ease-in-out;
  transition: 1s ease-in-out;
  opacity: 0;
  pointer-events: none;
  z-index: 90;
}

#video-container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100vh;
  /* max-width: 900px; */
}

.video-player {
  width: 100%;
  height: 110vh;
  object-fit: fill;
  position: fixed;
  top: 0%;
  /* aspect-ratio: 6 / 3; */
}

.video-player1 {
  width: 100%;
  height: 110vh;
  object-fit: fill;
  position: fixed;
  top: 0%;
  /* aspect-ratio: 6 / 3; */
}

.section-title2 {
  width: 45%;
  height: auto;
  border-radius: 10px;
  color: #000;
  position: absolute;
  right: 50%;
  top: 5%;
  display: flex;
  flex-direction: column;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgb(248, 231, 231, 0.8),
    rgba(255, 245, 245, 0)
  );
}

#video-container .section-title2 .en {
  display: block;
  font-size: 1.5rem;
  letter-spacing: 3px;
  margin-top: -4%;
  background: linear-gradient(
    to right,
    rgb(134, 130, 130 0.8),
    rgba(255, 245, 245, 0)
  );
}

#video-container .section-title2 .ja {
  display: block;
  font-size: 3.25rem;
  letter-spacing: 0.5em;
  margin-left: 7%;
  line-height: normal;
}
#video-container .section-title2 .ja2 {
  display: block;
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  margin-left: 8%;
  margin-bottom: 3%;
}
.section-title3 {
  width: 30%;
  height: auto;
  border-radius: 10px;
  color: #000;
  position: absolute;
  bottom: 5%;
  right: 18%;
  /* margin-top: calc(45% + 13 * (100vw - 1281px)/639); */
  display: flex;
  flex-direction: column;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgb(248, 231, 231, 0.8),
    rgba(255, 245, 245, 0)
  );
}

#video-container .section-title3 .en {
  display: block;
  font-size: 1.5rem;
  letter-spacing: 3px;
  margin-top: -6%;
  margin-left: 6%;
  background: linear-gradient(
    to right,
    rgb(134, 130, 130 0.8),
    rgba(255, 245, 245, 0)
  );
}

#video-container .section-title3 .ja {
  /* display: block; */
  font-size: 1.25rem;
  letter-spacing: 0.5em;
  margin-left: 15%;
  margin-bottom: 1%;
}

.section-title3 a {
  padding-bottom: 2px;
  position: relative;
}

.section-title3 a::after {
  content: "";
  position: absolute;
  left: 10%;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: rgb(1, 1, 1);
  transition: width 0.3s ease, left 0.3s ease;
  /* アニメーションの設定 */
}

.section-title3 a:hover::after {
  width: 100%;
  /* 下線を伸ばす */
  left: 0;
}

.buger_menu.open {
  /* transform: translateX(-86%); */
  width: 100vw;
  top: 0%;
  opacity: 1;
  pointer-events: auto;
  z-index: 99;
}

.open.hamburger span:nth-child(3) {
  width: 70px;
  bottom: -40%;
  transform: rotate(90deg);
  transition: 0.8s ease;
}

.open.hamburger span:nth-child(4) {
  /* bottom: -70%;
  width: 75px;
  transform: rotate(90deg);
  transition: 0.8s ease; */
  opacity: 0;
}

.open.hamburger span:nth-child(5) {
  bottom: -70%;
  width: 70px;
  transform: rotate(90deg);
  transition: 0.8s ease;
}

.open .hamburger span {
  background-color: #fff;
}
.open .buger_box span:nth-child(3) {
  transform: translateY(10px) rotate(-315deg);
}
.open .buger_box span:nth-child(4) {
  opacity: 0;
}
.open .buger_box span:nth-child(5) {
  transform: translateY(-10px) rotate(315deg);
}

.open .no-hover a:hover span:nth-child(3) {
  width: 70px;
  transform: rotate(-180deg);
}
.open .no-hover a:hover span:nth-child(4) {
  opacity: 0;
} /* 真ん中の線を消す */
.open .no-hover a:hover span:nth-child(5) {
  width: 70px;
  transform: rotate(-180deg);
} /* 真ん中の線を消す */

.l-header-nav-menu .menu-item a {
  padding: 15px;
  text-align: center;
  cursor: pointer;
  color: #060606;
  transition: color 0.3s;
}

.menu-item a {
  color: black; /* デフォルトの色 */
  text-decoration: none;
  transition: color 0.3s ease;
}

.menu-item.scrolled a,
.menu-item.scrolled a span {
  /* color: rgb(175, 174, 174); スクロール時に色を変更 */
  color: rgb(255, 255, 255); /* スクロール時に色を変更 */
}

.menu-item.scrolled a span:nth-child(3) {
  background-color: rgb(255, 255, 255);
  /* color: rgb(175, 174, 174); スクロール時に色を変更 */
  display: inline-block; /* 幅を調整 */
}
.menu-item.scrolled a span:nth-child(4) {
  background-color: rgb(255, 255, 255);
  /* color: rgb(175, 174, 174); スクロール時に色を変更 */
  display: inline-block; /* 幅を調整 */
}
.menu-item.scrolled a span:nth-child(5) {
  background-color: rgb(255, 255, 255);
  /* color: rgb(175, 174, 174); スクロール時に色を変更 */
  display: inline-block; /* 幅を調整 */
}

#header .l-header-nav-menu li {
  font-size: 0.875rem;
  padding: 8px 0;
}

.l-header-nav-sns {
  position: absolute;
  right: 8%;
  bottom: 5%;
  text-align: center;
}

.menu_box a {
  padding-bottom: 4px;
  position: relative;
}

.menu_box a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: rgb(1, 1, 1);
  transition: width 0.3s ease, left 0.3s ease;
  /* アニメーションの設定 */
}

.menu_box a:hover::after {
  width: 100%;
  /* 下線を伸ばす */
  left: 0;
}

.menu-item.scrolled a:hover::after {
  background-color: rgb(175, 174, 174);
}

/*-------------------------------------------
  Video
  -------------------------------------------*/
/*
  動画を全画面表示
  */
/* #video {
    width: 100%;
    height: 100vh;
    aspect-ratio: 4 / 3;
  } */
/*
  「position: fixed;」で動画を固定し、「top: -220px;」で表示位置を調整
  z-indexでマイナスを設定して、他のコンテンツの下に隠れるようにする
  */
/* #video .bg-video {
    position: fixed;
    top: -220px;
    z-index: -10;
  } */

/* #video {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0; 
    top: 0;
    overflow: hidden; 
    opacity: 1;
    transition: opacity 1.5s ease-in-out; 
  } */

#video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 1.5s ease-in-out; /* フェードの時間 */
}

/* 背景動画のスタイル */
#video .bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画面いっぱいにフィットさせる */
  position: fixed;
  top: 0;
  left: 0; /* サイドバー分オフセット */
  opacity: 1;
  transition: opacity 1.5s ease-in-out; /* フェードの時間 */
}

#video2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 1.5s ease-in-out; /* フェードの時間 */
}

/* 背景動画のスタイル */
#video2 .bg-video {
  width: 100%;
  height: 130%;
  object-fit: cover; /* 画面いっぱいにフィットさせる */
  position: fixed;
  top: 0;
  left: 0; /* サイドバー分オフセット */
  opacity: 1;
  transition: opacity 1.5s ease-in-out; /* フェードの時間 */
}

.main-title {
  position: fixed;
  top: 35%;
  right: 25%;
  z-index: 5;
  opacity: 0;
  color: #1c1919;
  animation: main-title 0.8s ease-in-out 0.3s forwards;
}

@keyframes main-title {
  0% {
    opacity: 0;
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.main-title-logo {
  display: block;
}

.main-title-text {
  display: block;
  /* padding: 0 0 0 5px; */
  color: #060606;
  font-size: 8rem;
  opacity: 0;
  animation: main-title 0.8s ease-in-out 0.5s forwards;
}

.main-title-text2 {
  display: block;
  color: #060606;
  font-size: 8rem;
  /* padding-left: 5%; */
  margin-top: -80%;
  animation: main-title 0.8s ease-in-out 0.8s forwards;
}
.main-title-text3 {
  display: block;
  color: #060606;
  font-size: 3rem;
  padding: 5% 0 0 85%;
  margin-top: -80%;
  animation: main-title 0.8s ease-in-out 1s forwards;
}

.scroll {
  display: inline-block;
  padding-top: 70px;
  position: relative;
  z-index: 99;
  margin: 3%;
}
.scroll::before {
  animation: scroll 3.5s infinite;
  border: solid #000;
  border-width: 0 0 1px 1px;
  content: "";
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: rotate(-45deg);
  width: 20px;
  height: 20px;
}
@keyframes scroll {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
  }
  0%,
  80%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

.scroll2 {
  display: inline-block;
  padding-top: 70px;
  position: absolute;
  z-index: 99;
  margin: 1.5%;
  top: 0%;
}
.scroll2::before {
  animation: scroll 3.5s infinite;
  border: solid #000;
  border-width: 0 0 1px 1px;
  content: "";
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: rotate(-45deg);
  width: 20px;
  height: 20px;
}
@keyframes scroll {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
  }
  0%,
  80%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

/*-------------------------------------------
Project
-------------------------------------------*/
/* 背景に黒の透過グラデーションを設定 */
#project {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  color: #fff;
  position: relative;
  z-index: 10;
  margin-top: 50%;
}
#project2 {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  color: #121212;
  position: relative;
  z-index: 10;
}

#project .list {
  display: flex;
  flex-direction: column;
  gap: 5%;
  /* justify-content: space-between;
  flex-wrap: wrap; */
}
#project .list li {
  width: 65%;
  min-height: 50vh;
  background-color: #ffffff9c;
  border-radius: 5%;
  /* display: flex; */
  /* flex-direction: row;
  align-items: center; */
  /* border: solid 1px #fff; */
  margin-bottom: 50px;
  /* position: relative; */
}
#project .list :nth-child(2) {
  flex-direction: row-reverse;
  margin-left: auto;
}

#project .list li a {
  display: block;
  width: 20%;
  margin: 0 auto 5%;
  background-color: rgb(254, 254, 254);
  text-align: center;
  border: 2px solid rgb(226, 216, 216);
  border-radius: 23px;
  transition: 0.8s;
}
#project .list li a:hover {
  background-color: #adaba9;
}

/* #project .list li a::after {
  content: "";
  box-shadow: 0 -35px 33px -30px #2e2e2e inset;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
} */
#project .list .name {
  color: #fff;
  font-size: 0.75rem;
  position: absolute;
  bottom: 4px;
  left: 7px;
  z-index: 5;
}

#project2 .list {
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
  /* justify-content: space-between;
  flex-wrap: wrap; */
}
#project2 .list li {
  width: 30%;
  min-height: 50vh;
  background-color: #ffffff9c;
  border-radius: 5%;
  /* display: flex; */
  /* flex-direction: row;
  align-items: center; */
  /* border: solid 1px #fff; */
  margin-bottom: 50px;
  position: relative;
}
/* #project2 .list :nth-child(2) {
  flex-direction: row-reverse;
  margin-left: auto;
} */

#project2 .list li a {
  display: block;
  width: 50%;
  margin: 5% auto;
  background-color: rgb(254, 254, 254);
  text-align: center;
  border: 2px solid rgb(226, 216, 216);
  border-radius: 23px;
  transition: 0.8s;
}
#project2 .list li a:hover {
  background-color: #adaba9;
}

/* #project .list li a::after {
  content: "";
  box-shadow: 0 -35px 33px -30px #2e2e2e inset;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
} */
#project2 .list .name {
  color: #fff;
  font-size: 0.75rem;
  position: absolute;
  bottom: 4px;
  left: 7px;
  z-index: 5;
}

.project_text {
  width: 100%;
  color: #060606;
  padding: 5%;
}
.project_text2 {
  width: 100%;
  color: #060606;
  padding: 5%;
  margin-bottom: 85%;
}

.project_text3 {
  width: 100%;
  color: #060606;
  padding: 5%;
  padding-bottom: 5%;
  margin-bottom: 108%;
}

.text_title {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 10%;
}
.text_title2 {
  font-size: 1.45rem;
  font-weight: 900;
  margin-bottom: 10%;
}

.project_text p {
  letter-spacing: 1px;
  margin-bottom: 3%;
}
.project_imge {
  padding: 3%;
}
.project_imge2 {
  position: absolute;
  top: 60%;
  padding: 3%;
}

.about {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about .btn {
  width: 300px;
  height: 60px;
  line-height: 3.5;
  display: inline-block;
  color: #ffffff;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  margin-top: 12%;
}

.about .btn span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  letter-spacing: 2px;
}

/*
.btn::before 右の赤線
.btn::after 下の赤線
.btn span::before 左の赤線
.btn span::after 上の赤線
*/
.about .btn::before,
.about .btn::after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #d4c4c4f2;
  transition: all 0.3s ease;
}

.about .btn span::before,
.about .btn span::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #d4c4c4f2;
  transition: all 0.3s ease;
}

.about .btn::before,
.about .btn span::before {
  width: 2px;
  height: 50%;
}

.about .btn::after,
.about .btn span::after {
  width: 20%;
  height: 2px;
}

/*
ホバー時の縦の動作
右の赤線と左の赤線の高さを100%にする
*/
.about .btn:hover::before,
.about .btn span:hover::before {
  height: 100%;
}

/*
ホバー時の横の動作
下の赤線と上の赤線の横幅を100%にする
*/
.about .btn:hover::after,
.about .btn span:hover::after {
  width: 100%;
}

.about .btn .contact_btn {
  color: #000;
}

.fade {
  opacity: 0;
  transform: translateX(50px);
  transition: 0.8s;
}

.fade.active {
  opacity: 1;
  transform: translateX(0px);
}

.fade4 {
  opacity: 0;
  transform: translateX(0px);
  transition: 1.5s;
}

.fade4.active4 {
  opacity: 1;
  transform: translateX(0px);
}

.fade1 {
  opacity: 0;
  transform: translateX(-50px);
  transition: 0.8s;
}

.fade1.active1 {
  opacity: 1;
  transform: translateX(0px);
}

.fade2 {
  opacity: 0;
  transform: translateY(50px);
  transition: 0.8s;
}

.fade2.active2 {
  opacity: 1;
  transform: translateY(0px);
}

/*-------------------------------------------
  Feature
  -------------------------------------------*/
/* 背景に黒の透過を設定 */
#feature {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding-bottom: 80px;
  position: relative;
  z-index: 10;
}
#feature .list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5%;
}
#feature .list li {
  width: 30%;
  margin-bottom: 3%;
  font-size: 0.875rem;
  text-align: center;
}

#feature .list li a {
  width: 100%;
  border: solid 1px #fff;
  border-radius: 50%;
  color: #fff;
  display: block;
  padding: calc(50% - 11px) 0;
  margin-bottom: 15px;
  text-align: center;
  position: relative;
  /* ホバー時用の要素を隠すために設定 */
  overflow: hidden;
}
/*
  ホバー時のスライドを疑似要素で作成
  「left: -100%;」で左側に隠しておく
  */
#feature .list .text1 a::before {
  content: "";
  width: 100%;
  height: 110%;
  background-color: #fff;
  background: url(	’http://naokihata.site/portfolio/wp-content/themes/WP_Portfolio/img/web_15474213.png’) center center no-repeat;
  background-size: 70% 70%;
  position: absolute;
  top: 0;
  left: -100%;
  opacity: 1;
  transition: 0.5s ease;
}
/* ホバー時に「left: 0;」を設定して右に移動させる */
#feature .list .text1 a:hover::before {
  left: 0;
}
#feature .list .text2 a::before {
  content: "";
  width: 100%;
  height: 110%;
  background-color: #fff;
  background: url(/wp-content/themes/WP_Portfolio/img/css-3_732190.png) center center no-repeat;
  background-size: 70% 70%;
  position: absolute;
  top: 0;
  left: -100%;
  opacity: 1;
  transition: 0.5s ease;
}
/* ホバー時に「left: 0;」を設定して右に移動させる */
#feature .list .text2 a:hover::before {
  left: 0;
}
#feature .list .text3 a::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  background: url(/wp-content/themes/WP_Portfolio/img/js_5968292.png) center center no-repeat;
  background-size: 70% 70%;
  position: absolute;
  top: 0;
  left: -100%;
  opacity: 1;
  transition: 0.5s ease;
}
/* ホバー時に「left: 0;」を設定して右に移動させる */
#feature .list .text3 a:hover::before {
  left: 0;
}
#feature .list .text4 a::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  background: url(/wp-content/themes/WP_Portfolio/img/php_5968332.png) center center no-repeat;
  background-size: 70% 70%;
  position: absolute;
  top: 0;
  left: -100%;
  opacity: 1;
  transition: 0.5s ease;
}
/* ホバー時に「left: 0;」を設定して右に移動させる */
#feature .list .text4 a:hover::before {
  left: 0;
}
#feature .list .text5 a::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  background: url(/wp-content/themes/WP_Portfolio/img/wordpress_2190440.png) center center no-repeat;
  background-size: 70% 70%;
  position: absolute;
  top: 0;
  left: -100%;
  opacity: 1;
  transition: 0.5s ease;
}
/* ホバー時に「left: 0;」を設定して右に移動させる */
#feature .list .text5 a:hover::before {
  left: 0;
}
#feature .list .title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.char {
  opacity: 0;
  transform: translateY(20px);
  /* animation: fadeUp 0.5s ease-out forwards; */
}
/*  */
/* @keyframes fadeUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* 文字ごとに遅延をつける */
/* .char:nth-child(1) { animation-delay: 1.1s; }
.char:nth-child(2) { animation-delay: 1.2s; }
.char:nth-child(3) { animation-delay: 1.3s; }
.char:nth-child(4) { animation-delay: 1.4s; }
.char:nth-child(5) { animation-delay: 1.5s; }
.char:nth-child(6) { animation-delay: 1.6s; }  */

.hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.show {
  opacity: 1 !important; /* ★強制的に適用 */
  transform: translateY(0) !important; /* ★強制的に適用 */
}

/*-------------------------------------------
  Flow
  -------------------------------------------*/
#flow {
  background-color: #fff;
  padding-top: 40px;
  position: relative;
  z-index: 10;
}
#flow .step {
  display: flex;
  margin-top: 60px;
}
#flow .figure {
  position: relative;
}

#flow .figure li {
  width: 200px;
  height: 80px;
  line-height: 80px;
  background-color: #414141;
  color: #fff;
  font-size: 0.875rem;
  margin-bottom: 57%;
  position: relative;
  text-align: center;
}

#flow .figure li:nth-child(2){
  margin-bottom: 47%;
}
/*
  図形の三角部分を疑似要素で作成
  「position」を使用して、四角の下に配置
  */
#flow .figure li::before {
  content: "";
  border-top: 30px solid #414141;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  position: absolute;
  top: 80px;
  right: 0;
  left: 0;
  margin: 0 auto;
}
#flow .figure li:last-child {
  margin-bottom: 0;
}
#flow .description {
  margin-left: 12%;
}
#flow .description dt {
  border-bottom: solid 1px #121212;
  font-size: 1.25rem;
  padding-bottom: 8px;
  margin-bottom: 10px;
  position: relative;
}
/*
  丸数字を作成
  「position」を使用して、タイトルの左側に配置
  */
#flow .description dt span {
  width: 35px;
  height: 35px;
  line-height: 35px;
  background-color: #414141;
  border-radius: 50%;
  color: #fff;
  display: block;
  font-size: 1rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: -45px;
}
#flow .description dd {
  margin-bottom: 43px;
}
#flow .description dd:last-child {
  margin-bottom: 0;
}

/*-------------------------------------------
  Contact
  -------------------------------------------*/
#contact {
  background-color: #fff;
  padding-bottom: 80px;
  position: relative;
  z-index: 10;
}
#contact .link {
  display: flex;
  justify-content: center;
  margin-top: 60px;
  gap: 5%;
}
#contact .link .item {
  width: 45%;
  border: solid 1px #121212;
  display: block;
  font-size: 1.25rem;
  position: relative;
  padding: 50px 0;
  text-align: center;
  transition: 0.1s;
}
#contact .link .item::before {
  content: "";
  border-top: 20px solid transparent;
  border-right: 20px solid #121212;
  position: absolute;
  right: 4px;
  bottom: 4px;
}
/*
  ホバー時は枠線を太くする
  「border」ではなく「outline」を使用することで、ホバー時にレイアウトがずれるのを防ぎます。
  ※詳細を知りたい方は、borderとoutlineの違いについて検索してみてください。
  */
#contact .link .item:hover {
  outline: solid 3px #121212;
}
#contact .link .item img {
  width: 20%;
  height: auto;
  margin-bottom: 5px;
}

/*-------------------------------------------
フッター
/* -------------------------------------------*/
#footer {
  max-width: 100%;
  position: relative;
  z-index: 990;
  display: flex;
}

.footer_container {
  width: 125%;
  background-color: #121212;
  /* background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); */
  color: #fff;
  padding: 20px 0;
  position: relative;
  z-index: 991;
}
.footer_container2 {
  width: 140%;
  /* background-color: #121212; */
  background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  color: #fff;
  padding: 7px 0;
  position: relative;
  z-index: 991;
}

.footer_spese {
  width: 30%;
  background-color: #fff;
  position: relative;
  z-index: 991;
}
.footer_spese2 {
  width: 30%;
  background-color: #121212;
  position: relative;
  z-index: 991;
}

#footer .menu {
  display: flex;
  justify-content: center;
  margin: 30px 0 60px 0;
}
#footer .menu li {
  border-right: solid 1px #fff;
  font-size: 0.875rem;
  padding: 0 20px;
}
#footer .menu li:last-child {
  border-right: none;
}
#footer .menu li a {
  color: #fff;
  letter-spacing: 2px;
}
#footer .copyright {
  font-size: 0.75rem;
  text-align: center;
}

.c-txt {
  padding-bottom: 5px;
  position: relative;
}
.c-txt::before {
  background: #ded6d1;
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.3s;
}
.c-txt:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

/*-------------------------------------------
トップへ戻るボタン
-------------------------------------------*/
/*
右下に固定で配置
表示・非表示の切り替えはjQueryで行うため、詳細は「main.js」のコメントを参照
*/
#to-top {
  width: 50px;
  height: 50px;
  background-color: #121212;
  border: solid 1px #fff;
  border-radius: 50%;
  position: fixed;
  right: 20%;
  bottom: 25px;
}
/*
中の三角は疑似要素で作成
*/
#to-top::after {
  content: "";
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
  position: relative;
  left: 17px;
  bottom: 8px;
}

/*************** 問い合わせフォーム ****************/

.Form {
  width: 100%;
  height: 255vh;
  /* position: relative; */
  background-image: url(/wp-content/themes/WP_Portfolio/img/AdobeStock_1163616321.jpeg);
  background-size: 160% 100%; /* 画像を画面いっぱいに拡大・縮小 */
  background-position: center; /* 画像を中央に配置 */
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-attachment: fixed; /* スクロール時も背景を固定 */
}

/* .Form.open {
  display: none;
} */

/* .form-title-container {
   position: relative;
  
} */

.form-title {
  text-align: center;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  margin-bottom: 3%;
  padding-top: 3%;
}

.form-title h1 {
  font-size: 2rem;
  font-weight: normal;
  letter-spacing: 15px;
  margin-bottom: 2%;
}

.form-title h2 {
  font-size: 1rem;
  font-weight: normal;
  margin-bottom: 5%;
  letter-spacing: 5px;
}

.form-title-text {
  width: 60%;
  margin: 0 auto;
  font-size: 0.875rem;
  font-weight: normal;
  margin-bottom: 5%;
  text-align: center;
  line-height: 3;
}

@media screen and (max-width: 480px) {
  .Form {
    margin-top: -50px;
    height: 255vh;
    width: 140%;
  }
}
.Form-Item {
  /* border-top: 1px solid #ddd; */
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }
}
/* .Form-Item:nth-child(5) {
  border-bottom: 1px solid #ddd;
} */
.Form-Item-Label {
  width: 100%;
  max-width: 248px;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
}
.Form-Item-Label.isMsg {
  margin-top: 8px;
  margin-bottom: auto;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label.isMsg {
    margin-top: 0;
  }
}
.Form-Item-Label-Required {
  border-radius: 6px;
  margin-right: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 48px;
  display: inline-block;
  text-align: center;
  background: #a62227;
  color: #fff;
  font-size: 14px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
  }
}
.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  /* margin-left: 40px; */
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  flex: 1;
  margin-top: 5%;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Btn {
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 280px;
  display: block;
  letter-spacing: 0.05em;
  background: #6e6969;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}


@media screen and (max-width: 480px) {
  .Form-Btn {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 16px;
  }
}
.Form-privacy {
  font-size: 16px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: auto;
  flex: 1;
  width: 100%;
  max-width: 410px;    border: 1px solid #ddd;
    border-radius: 6px;
}

.Form-privacy-text {
  line-height: 24px;
}

.Form-privacy-info {
  line-height: 24px;
  margin-top: 16px;
  text-align: left;
}

.form__privacyCheckbox {
  margin-top: 10%;
}

.form__privacyCheckbox .wpcf7-list-item-label {
  display: inline-block;
  font-size: 20px;
  padding-left: 32px;
  margin-top: 24px;
  position: relative;
}

.form__privacyCheckbox .wpcf7-list-item-label::before {
  content: "";
  width: 24px;
  height: 24px;
  background: #fff;
  border: 2px solid rgba(158, 118, 100, .8);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.wpcf7-not-valid-tip {
  display: none;
}

.wpcf7-not-valid-tip {
  color: #dc3232;
  font-size: 1em;
  font-weight: 400;
  display: block;
}
/* @media screen and (max-width: 768px) {
  .wrapper {
    max-width: 100%;
  }
} */



@media (min-width: 1440px) and (max-width: 1920px) {
  .wrapper {
    max-width: 70%;
    padding: 80px 20px 80px 20px;
    margin: 0 auto 0 5%;
  }

  .wrapper2 {
    max-width: calc(870px + 240*(100vw - 1440px) / 480);
    padding: 80px calc(120px + -20*(100vw - 1440px) / 480);
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.7);
  }

  li {
    font-size: calc(18px + 8*(100vw - 1440px) / 480);
  }

  p {
    font-size: calc(14px + 12*(100vw - 1440px) / 480);
  }

  .sec-title {
    font-size: calc(36px + 25*(100vw - 1440px) / 480);
    margin-bottom: 60px;
    letter-spacing: 2px;
  }

  .text_title {
    font-size: calc(24px + 32*(100vw - 1440px) / 480);
    font-weight: 900;
    margin-bottom: 10%;
  }

  .text_title2 {
    font-size: calc(24px + 12*(100vw - 1440px) / 480);
    font-weight: 900;
    margin-bottom: 10%;
  }

  .project_text2 p {
    font-size: calc(14px + 12*(100vw - 1440px) / 480);
    letter-spacing: 1px;
  }
  .project_text3 p {
    font-size: calc(14px + 12*(100vw - 1440px) / 480);
  }

  /* header */

  .scroll {
    font-size: calc(12px + 20*(100vw - 1440px) / 480);
}

  #header .section-title .ja {
     letter-spacing: 0.3em;
     font-size: calc(60px + 20*(100vw - 1440px) / 480);
  }

  .main-title-text {
    font-size: calc(128px + 50*(100vw - 1440px) / 480);
  }
  .main-title-text2 {
    font-size: calc(128px + 50*(100vw - 1440px) / 480);
  }

  .hamburger span:nth-child(1) {    
    font-size: calc(14px + 15*(100vw - 1440px) / 480);
    bottom: 3%;
    left: calc(12% + -50*(100vw - 1440px) / 480);
    width: 140%;
    height: calc(15px + 15*(100vw - 1440px) / 480);
    line-height: 1;
  }
  .open.hamburger span:nth-child(2) {    
    font-size: calc(14px + 15*(100vw - 1440px) / 480);
    bottom: 3%;
    left: calc(12% + -65*(100vw - 1440px) / 480);
    width: 140%;
    height: calc(15px + 15*(100vw - 1440px) / 480);
    line-height: 1;
  }

  .hamburger span {
    left: calc(0px + -30*(100vw - 1440px) / 480);
  }


.hamburger span:nth-child(3) {
  width: calc(110px + 50*(100vw - 1440px) / 480);
  bottom: calc(-95% + -55*(100vw - 1440px) / 480);
  margin-left: calc(0% + -5*(100vw - 1440px) / 480);
}

.hamburger span:nth-child(4) {
  width: calc(75px + 35*(100vw - 1440px) / 480);
  bottom: calc(-70% + -45*(100vw - 1440px) / 480);
  margin-left: calc(0% + -15*(100vw - 1440px) / 480);
}

.hamburger span:nth-child(5) {
  /* bottom: -45%;
  width: 40px;
  transform: rotate(90deg); */
  transition: 0.8s ease;
  width: calc(40px + 40*(100vw - 1440px) / 480);
  bottom: calc(-45% + -50*(100vw - 1440px) / 480);
  margin-left: calc(0% + -35*(100vw - 1440px) / 480);
}

a:hover span:nth-child(3) {
  width: 120px;
  transform: rotate(-180deg);
  margin-bottom: 0%;
  margin-left: -15%;
}
a:hover span:nth-child(4) {
  width: 120px;
  transform: rotate(-180deg);
} /* 真ん中の線を消す */
a:hover span:nth-child(5) {
  width: 120px;
  transform: rotate(-180deg);
  margin-bottom: 15%;
  margin-left: -15%;
} /* 真ん中の線を消す */


.open.hamburger span:nth-child(3) {
  width: 90px;
  bottom: -100%;
  margin-left: -5%;
}

.open.hamburger span:nth-child(5) {
  bottom: -130%;
  width: 90px;
  margin-left: -5%;
  margin-bottom: 0;
}


#video-container .section-title2 .en {
  font-size: calc(32px + 15*(100vw - 1440px) / 480);
  letter-spacing: calc(3px + 10*(100vw - 1440px) / 480);
  margin-top: -5%;
}

#video-container .section-title2 .ja {
  font-size: calc(52px + 15*(100vw - 1440px) / 480);
  letter-spacing: calc(8px + 16*(100vw - 1440px) / 480);
  margin-left: 7%;
  line-height: normal;
}

#video-container .section-title2 .ja2 {
  display: block;
  font-size: calc(18px + 15*(100vw - 1440px) / 480);
  letter-spacing: calc(8px + 16*(100vw - 1440px) / 480);
  margin-left: 8%;
  margin-bottom: 3%;
}

#video-container .section-title3 .en {
  font-size: calc(26px + 20*(100vw - 1440px) / 480);
}

#video-container .section-title3 .ja {
  /* display: block; */
  font-size: calc(26px + 10*(100vw - 1440px) / 480);
}

.about .btn span {
  font-size: calc(20px + 10*(100vw - 1440px) / 480);
  letter-spacing: 2px;
}

#feature .list li {
  font-size: calc(14px + 10*(100vw - 1440px) / 480);
}

#feature .list .title {
  font-size: calc(32px + 16*(100vw - 1440px) / 480);
}

#footer .menu li {
  font-size: calc(14px + 10*(100vw - 1440px) / 480);
  padding: 0 20px;
}

#to-top {
  width: calc(50px + 20*(100vw - 1440px) / 480);
  height: calc(50px + 20*(100vw - 1440px) / 480);
  background-color: #121212;
  border: solid 1px #fff;
  border-radius: 50%;
  position: fixed;
  right: 20%;
  bottom: 25px;
}
/*
中の三角は疑似要素で作成
*/
#to-top::after {
  content: "";
  border-left-width: calc(7px + 8*(100vw - 1440px) / 480);
  border-left-style: solid;
  border-left-color: transparent;
  border-right-width: calc(7px + 8*(100vw - 1440px) / 480);
  border-right-style: solid;
  border-right-color: transparent;
  border-bottom-width: calc(7px + 8*(100vw - 1440px) / 480);
  border-bottom-style: solid;
  border-bottom-color: rgb(255, 255, 255);
  position: relative;
  left: calc(12px + 8*(100vw - 1440px) / 480);
  bottom: calc(12px + -8*(100vw - 1440px) / 480);
}

#flow .description dd {
  margin-bottom:  calc(50px + 30*(100vw - 1440px) / 480);
  font-size: calc(16px + 8*(100vw - 1440px) / 480);
}

#flow .figure li {
  width: 200px;
  height: calc(80px + 20*(100vw - 1440px) / 480);
  font-size: calc(12px + 10*(100vw - 1440px) / 480);
  margin-bottom: calc(57% + 92*(100vw - 1440px) / 480);
}

#flow .figure li:nth-child(2) {
  margin-bottom: 100%;
}

#flow .figure li::before {
  content: "";
  border-top-width: calc(30px + 20*(100vw - 1440px) / 480);
  border-top-style: solid;
  border-top-color: rgb(65, 65, 65);
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  position: absolute;
  top: calc(80px + 19*(100vw - 1440px) / 480);
  right: 0;
  left: 0;
  margin: 0 auto;
}

#flow .description {
  margin-left: 10%;
  /* margin-top: -2%; */
}

#flow .description dt {
  font-size: calc(20px + 20*(100vw - 1440px) / 480);
  margin-left: 2%;
}

#flow .description dt span {
  width: calc(35px + 15*(100vw - 1440px) / 480);
  height: calc(35px + 15*(100vw - 1440px) / 480);
  line-height: calc(35px + 12*(100vw - 1440px) / 480);
  font-size: calc(16px + 4*(100vw - 1440px) / 480);
  bottom: calc(0px + 15*(100vw - 1440px) / 480);
  left: calc(-45px + -34*(100vw - 1440px) / 480);
}

.form-title h1 {
  font-size: calc(32px + 32*(100vw - 1440px) / 480);
}

.form-title h2 {
  font-size: calc(16px + 16*(100vw - 1440px) / 480);
}

.Form-Item {
  padding-bottom: calc(24px + 44*(100vw - 1440px) / 480);
}

.Form-Item-Label {
  max-width: calc(248px + 82*(100vw - 1440px) / 480);
  font-size: calc(18px + 10*(100vw - 1440px) / 480);
}

.Form-Item-Label-Required {
  width: calc(48px + 12*(100vw - 1440px) / 480);
  font-size: calc(14px + 8*(100vw - 1440px) / 480);
  margin-right: calc(8px + 19*(100vw - 1440px) / 480);
}

.Form-Btn {
  width: calc(280px + 50*(100vw - 1440px) / 480);
  font-size: calc(20px + 10*(100vw - 1440px) / 480);
}

#footer .copyright {
  font-size: calc(12px + 10*(100vw - 1440px) / 480);
}


}

@media (min-width: 768px) and (max-width: 1280px) {

  .wrapper {
    max-width: 70%;
    padding: 80px 20px 80px 20px;
    margin: 0 auto 0 5%;
  }

  .wrapper2 {
    max-width: calc(600px + 220 * (100vw - 768px) / 512);
    /* 870px */
    padding: 80px 120px;
    padding-left: calc(20px + 100 * (100vw - 768px) / 512);
    padding-right: calc(20px + 100 * (100vw - 768px) / 512);
    margin: 0 auto;
    margin-left: calc(20px + 190 * (100vw - 768px) / 512);
    margin-right: auto;
  }

  #project .list li {
    /* width: 65%; */
    width: calc(500px + 120 * (100vw - 768px) / 512);
    /* width: calc(100vw + -512 * (100vw - 768px) / 512); */
  }

  .l-header-nav-sns li {
    font-size: calc(13px + 4 * (100vw - 768px) / 512);
  }

  #flow .description dt {
    padding-bottom: 0px;
  }

  #feature .list li {
    width: calc(230px + 50 * (100vw - 768px) / 512);
    font-size: 0.875rem;
  }

  #flow .figure li {
    margin-bottom: calc(158% + -140*(120vw - 768px) / 512);
  }
  #flow .figure li:nth-child(2){
    margin-bottom: calc(132% + -80*(120vw - 768px) / 512);
  }
  #flow .figure li:nth-child(3){
    margin-bottom: calc(164% + -110*(120vw - 768px) / 512);
  }

  #flow .figure li:nth-child(4){
    margin-bottom: calc(162% + -86*(120vw - 768px) / 512);
  }


  #flow .figure li:nth-child(5){
    margin-bottom: calc(128% + -70*(120vw - 768px) / 512);
  }

  #flow .description dd {
    margin-bottom: calc(43px + 10*(260vw - 768px) / 512);
}

#project2 .list li {
  width: calc(235px + 15*(100vw - 768px) / 512);
  min-height: 50vh;
  margin-bottom: 50px;
}

.form-title {
  text-align: unset;
  margin-left: calc(180px + 300*(100vw - 768px) / 512);
  margin-bottom: 5%;
  padding-top: 3%;
}

.form-title h2 {
  font-size: 1rem;
  font-weight: normal;
  margin-bottom: 5%;
  letter-spacing: 5px;
  margin-left: 7%;
}

/* .about {
  display: flex;
  justify-content: unset;
  margin-left: calc(180px + 300*(100vw - 768px) / 512);
  align-items: center;
} */

.Form-Item-Input {
  margin-left: calc(0px + 40*(100vw - 768px) / 512);
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  width: 100%;
  max-width: 410px;
  font-size: 18px;
}

.Form-Item-Textarea {
  margin-left: calc(0px + 40*(100vw - 768px) / 512);
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  width: 100%;
  max-width: 410px;
  font-size: 18px;
}

#video .bg-video {
  width: 100%;
  height: 100%;
  object-fit: fill; /* 画面いっぱいにフィットさせる */
}

}

@media screen and (max-width: 766px) {

  .wrapper {
    width: 80%;
    padding: 80px 0px;
    margin: 0 auto;
  }

  #video .bg-video {
    width: 250%;
    height: 100%;
    object-fit: fill; /* 画面いっぱいにフィットさせる */
    position: fixed;
    top: 0;
    left: 0; /* サイドバー分オフセット */
    opacity: 1;
    transition: opacity 1.5s ease-in-out; /* フェードの時間 */
  }

  .scroll {
    margin: 15%;
    margin-top: 50%;
  }

  .l-header-nav-sns {
    display: none;
  }


#header {
  width: 100%; /* 画面の10%の幅 */
  height: unset;
  padding: 5%;
  position: fixed;
  right: 0;
  top: 0;
  /* backdrop-filter: blur(10px); ぼかし効果 */
  background: linear-gradient(
    to bottom,
    rgba(94, 92, 92, 0.55),
    rgba(91, 88, 88, 0)
  );
  /* background: rgba(157, 152, 152, 0.1);  */
  color: #060606;
  display: unset;
}

#header .section-title {
  writing-mode: unset;
  margin-bottom: 5%;
  margin-top: 8%;
  display: flex;
  flex-direction: column;
  /* z-index: 2; */
}

#header .section-title .en {
  /* display: block; */
  font-size: 1.5rem;
  letter-spacing: 3px;
  margin-top: -10%;
}

#header .section-title .ja {
  /* display: block; */
  font-size: 2.85rem;
  letter-spacing: 0.3em;
  margin-top: -5%;
}

.main-title {
  position: fixed;
  top: 40%;
  right: 60%;
  z-index: 5;
  opacity: 0;
  color: #1c1919;
  animation: main-title 0.8s ease-in-out 0.3s forwards;
}

#header .hamburger-menu {
  position: fixed;
  top: -10%;
  right: 3%;
  z-index: 1;
  /* left: calc(100vw - 130px); */
  animation: l-header 0.8s ease-in-out 3s forwards;
}

.hamburger span:nth-child(1) {
  /* color: #fff; */
  background: none;
  text-align: left;
  font-size: 0.875rem;
  bottom: 3%;
  left: 12%;
  width: 100%;
  height: 25px;
  line-height: 1;
  text-transform: uppercase;
  opacity: 1;
  letter-spacing: 3px;
}

.open.hamburger span:nth-child(2) {
  /* color: #fff; */
  background: none;
  text-align: center;
  font-size: 0.875rem;
  bottom: 0;
  left: -11%;
  width: 100%;
  height: 25px;
  line-height: 1;
  text-transform: uppercase;
  opacity: 1;
}



#project {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  color: #fff;
  position: relative;
  z-index: 10;
  margin-top: 70%;
}

.sec-title {
  font-size: 1.75rem;
  letter-spacing: 15px;
}

.sec-title::before, .sec-title::after {
  border-top: 1px solid;
  content: "";
  width: 28%;
  margin-right: 5%;
}

#project .list li {
  width: 100%;
  min-height: 50vh;
  background-color: #ffffff9c;
  border-radius: 5%;
  /* display: flex; */
  /* flex-direction: row;
  align-items: center; */
  /* border: solid 1px #fff; */
  margin-bottom: 50px;
  /* position: relative; */
}

#project .list li a {
  width: 50%;
}

#feature .list li {
  width: 90%;
  margin-bottom: 3%;
  font-size: 0.875rem;
  text-align: center;
}

#flow .figure {
  display: none;
}

#contact .link {
  display: unset;
  margin-top: 60px;
}

#contact .link .item {
  width: 100%;
  font-size: 1.25rem;
  margin-bottom: 10%;
  margin-top: 15%;
}

#project .list {
  display: flex; 
  flex-direction: column;
  overflow: hidden;
  gap: 5%;
}

#footer {
  display: unset;
}

.footer_container {
  width: 100%;
  padding: 20px 0;
}

#to-top {
  right: 2%;
  bottom: 10px;
}

#footer .menu {
  margin: 30px 0 30px 0;
}

#footer .menu li {
  font-size: 10px;
  padding: 0 15px;
}

.section-title2 {
  display: none;
}

.video-player {
  width: 225%;
  height: 100vh;
  object-fit: fill;
  position: fixed;
  top: 0%;
  right: -45%;
  aspect-ratio: 6 / 3;
}
.video-player1  {
  width: 200%;
  height: 110vh;
  object-fit: fill;
  position: fixed;
  top: 0%;
  right: -45%;
  aspect-ratio: 6 / 3;
}

.section-title3 {
  width: 60%;
  bottom: 9%;
  right: 5%;
}
.hux {
  width: 80%;
  bottom: 10%;
  right: -10%;
}

#video-container .section-title3 .en {
  font-size: 1.875rem;
}

.scroll2 {
  margin: 6.5%;
  top: 3%;
}


.sec-title2 {
  font-size: 2rem;
  margin-bottom: 15%;
  margin-top: 50%;
  width: 70%;
}

#project2 .list li {
  width: 100%;
  min-height: 50vh;
  background-color: #ffffff9c;
  border-radius: 5%;
  display: flex;
  /* border: solid 1px #fff; */
  margin-bottom: 50px;
  position: relative;
  letter-spacing: 3px;
}

.project_text2 {
  margin-bottom: 95%;
}

.form-title {
  margin-bottom: 3%;
  padding-top: 40%;
}

.form-title h1 {
  font-size: 2rem;
  font-weight: normal;
  letter-spacing: 15px;
  margin-bottom: 2%;
  margin: 0% auto;
  background-color: rgba(255, 255, 255, 0.7);
  width: 85%;
}

.form-title h2 {
  font-size: 1.5rem;
  font-weight: normal;
  margin-bottom: 5%;
  letter-spacing: 5px;
  background-color: rgba(255, 255, 255, 0.7);
  width: 85%;
  margin: 0 auto;
}

.wrapper2 {
  max-width: 85%;
  padding: 80px 10px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.7);
}
/* .wrapper2.open {
  display: none;
} */

}


/* プラバシーポリシー */

.site-width {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.subpage-title-area {
  margin-bottom: 80px;
}

.subpage-title-area .decoration-text {
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #b9bbcb;
  letter-spacing: .14em;
}

.subpage-title-area .subpage-title {
  font-size: 40px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.12em;
}

.noBreak-line {
  display: inline-block;
}

.policy-page-container h2 {
  margin-top: 16px;
  font-size: 1.5rem;
  display: inline-block;
  font-weight: bold;
  border-left: solid 8px #6e6969;
  letter-spacing: 3px;
  padding-left: 3%;
}

.policy-page-container p {
  margin-bottom: 5%;
}

.list-disc {
  list-style-type: disc;
  padding-left: 18px;
}

::marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  text-indent: 0px !important;
  text-align: start !important;
  text-align-last: auto !important;
}