@charset "UTF-8";
html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}
body {
  background-image: linear-gradient(to bottom, #000000 0%, #001A2B 16%, #1E0039 33%, #000000 52%, #06004B 68%, #0A012A 87%, #0B0B27 100%);
  font-family: 'Kiwi Maru', sans-serif;
  font-weight: 300;
  color: #ffffff;
  line-height: 1.5;
  padding: 10vh 5vw;
}
img {
  width: 100%;
  height: auto;
}
/*変数設定---------------------*/
/*ネオンtextshadow*/ :root {
  --neonRed: 1px 1px 0 #EC5656, -1px 1px 0 #EC5656, -1px -1px 0 #EC5656, 1px -1px 0 #EC5656, 0 0 12px #FD0505;
  --neonBlue: 1px 1px 0 #6497FF, -1px 1px 0 #6497FF, -1px -1px 0 #6497FF, 1px -1px 0 #6497FF, 0 0 12px #578FF8;
  --neonSax: 1px 1px 0 #00C1B7, -1px 1px 0 #00C1B7, -1px -1px 0 #00C1B7, 1px -1px 0 #00C1B7, 0 0 12px #00C1B7;
  --neonPur: 1px 1px 0 #CD2AFF, -1px 1px 0 #CD2AFF, -1px -1px 0 #CD2AFF, 1px -1px 0 #CD2AFF, 0 0 12px #CD2AFF;
  --neonPin: 1px 1px 0 #CD2AFF, -1px 1px 0 #CD2AFF, -1px -1px 0 #CD2AFF, 1px -1px 0 #CD2AFF, 0 0 12px #CD2AFF;
  /*boxshadow*/
  --neonRed_sh: 0 0 15px #EC5656;
  --neonBlue_sh: 0 0 15px #6497FF;
  --neonSax_sh: 0 0 15px #00C1B7;
  --neonPur_sh: 0 0 15px #CD2AFF;
}
/*ここからヘッダー------------------------------------------------------------*/
/* ここからハンバーガーメニュー---------------------- */
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}
/* ハンバーガーアイコンのスペース */
.drawer_open {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 35px;
  height: 40px;
  cursor: pointer;
}
/* ハンバーガーメニューのアイコン */
.nav {
  position: fixed;
  z-index: 999999;
}
.drawer_open span, .drawer_open span:before, .drawer_open span:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-image: linear-gradient(90deg, #F9BABA 0%, #FF4646 100%);
  background-clip: content-box;
  box-shadow: var(--neonRed_sh);
  transition: 0.5s;
  z-index: 1000000;
}
/*上下に線の要素を足す*/
.drawer_open span:before, .drawer_open span:after {
  content: "";
}
/* 三本線の真ん中（span）の棒の位置調整 */
.drawer_open span {
  top: 20px;
}
/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  top: -14px;
}
/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 14px;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: transparent;
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  transform: translateY(14px) rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
  transform: translateY(-14px) rotate(-45deg);
}
/* メニューのデザイン*/
.nav_content {
  width: 65%;
  height: 100%;
  position: fixed;
  top: 0%;
  left: -65%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background-color: rgb(0 0 0/0.7);
  transition: .5s;
  text-align: start;
  padding: 20px;
}
/*ナビアイテムの設定*/
.nav_item > a {
  display: block;
  font-family: 'Rubik Vinyl';
  font-size: 2.4rem;
  color: rgb(255 255 255/0.5);
  text-align: center;
  margin-bottom: 1em;
}
.nav_item > a:hover {
  color: #ffffff;
  text-shadow: var(--neonSax);
}
/*グラデーションの下線*/
.gradient-underline {
  position: relative;
  background-image: linear-gradient(90deg, #B2FFF0 0%, #00FFCC 100%);
  background-size: 0 2px; /* 初期状態非表示 */
  background-repeat: no-repeat;
  background-position: bottom;
  transition: background-size 0.3s ease; /* ホバー時のアニメーション */
}
.gradient-underline:hover {
  background-size: 100% 2px; /* ホバー時に下線を表示（太さ2px） */
}
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;
}
/* ここまでハンバーガーメニュー---------------------- */
header {
  height: 90vh;
  margin-bottom: 50vh;
  position: relative;
}
/*ロゴ設定*/
header p {
  text-align: center;
}
header p img {
  width: 70vw;
  margin-bottom: 7vh;
  filter: drop-shadow(0 0 1px #000000) drop-shadow(0 0 5px #00FFF2) drop-shadow(0 0 10px #2BF4F8);
  animation-name: firstNeon, neonAnimation;
  animation:
    firstNeon 1.2s ease-out 0s 1 forwards, neonAnimation 2.4s ease 1.2s infinite;
}
@keyframes firstNeon {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  } /* 消える */
  18% {
    opacity: 1;
  }
  25% {
    opacity: 0.2;
  }
  35% {
    opacity: 1;
  }
  45% {
    opacity: 0.4;
  }
  55% {
    opacity: 1;
  }
  65% {
    opacity: 0.7;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes neonAnimation {
  0%, 2% {
    opacity: 0.8;
  }
  3%, 4% {
    opacity: 1;
  }
  5% {
    opacity: 0.75;
  }
  7%, 19% {
    opacity: 1;
  }
  20% {
    opacity: 0.85;
  }
  22% {
    opacity: 1;
  }
  60% {
    opacity: 0.9;
  }
  61% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/*h1設定*/
header h1 {
  font-family: 'Rubik Vinyl';
  font-size: 4rem;
  color: #ffffff;
  text-align: center;
  text-shadow: var(--neonRed);
  letter-spacing: 0.12em;
  line-height: 1.2em;
  margin-bottom: 6vh;
  animation:
    firstNeon 1.2s ease-out 0s 1 forwards, neonAnimation 2.4s ease 1.2s infinite;
}
/* キャッチコピー */
header .copy {
  font-family: 'Pixelify Sans';
  font-size: 2.4rem;
  letter-spacing: 0.12rem;
  color: #ffffff;
  text-shadow: var(--neonBlue);
  text-align: center;
  line-height: 1.4em;
  animation:
    firstNeon 1.2s ease-out 0s 1 forwards, neonAnimation 2.4s ease 1.4s infinite;
}
/*スクロール---------------------*/
header .Scroll {
  position: absolute;
  left: 50%;
  bottom: -5vh;
  transform: translateX(-50%);
  text-align: center;
}
header .Scroll .scroll {
  font-size: 1.2rem;
  color: #CD2AFF;
  text-shadow: var(--neonPur_sh);
}
.triangle {
  width: 12px;
  height: 12px;
  clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
  background-color: #CD2AFF;
}
.tWrap, .tWrap2, .tWrap3 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(var(--neonPur_sh));
  animation-name: scrollAnimation;
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
.tWrap {
  bottom: -1.8em;
}
.tWrap2 {
  bottom: -3.6em;
  animation-delay: 0.6s;
}
.tWrap3 {
  bottom: -5.4em;
  animation-delay: 1.2s;
}
@keyframes scrollAnimation {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* 見出し（セクション）共通--------------------------------- */
.Sec_name {
  text-align: center;
  font-family: 'Rubik Vinyl';
  font-size: 2.6rem;
  line-height: 1.0em;
  letter-spacing: 0.1em;
  position: relative;
  margin-bottom: 3vh
}
.Sec_name::after {
  content: "";
  width: 5.0em;
  height: 5.0em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: -10;
}
.About {
  text-shadow: var(--neonSax);
}
.About::after {
  background-color: rgb(0 0 0/0.2);
  border: solid 4px #00C1B7;
  box-shadow: var(--neonSax_sh);
 
}
.Works {
  text-shadow: var(--neonBlue);
  margin-bottom: 20vh;
}
.Works::after {
  background-color: rgb(0 0 0/0.2);
  border: solid 4px #6497FF;
  box-shadow: var(--neonBlue_sh);
}


.Skill {
  text-shadow: var(--neonPur);
	  margin-bottom: 20vh;
}
.Skill::after {
  background-color: rgb(0 0 0/0.2);
  border: solid 4px #CD2AFF;
  box-shadow: var(--neonPur_sh);
}
.Form {
  text-shadow: var(--neonRed);
	  	  margin-bottom: 20vh;
}
.Form::after {
	background-color: rgb(0 0 0/0.2);
  border: solid 4px #EC5656;
  box-shadow: var(--neonRed_sh);
}
/*フェードインアニメーション--------------*/
/* 基本フェードイン */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  will-change: opacity, transform;
}
/* 表示されたら付くクラス */
.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* オプション：複数要素を順番に遅らせる（必要なら） */
.fade-in.delay-1 {
  transition-delay: 0.20s;
}
.fade-in.delay-2 {
  transition-delay: 0.40s;
}
.fade-in.delay-3 {
  transition-delay: 0.60s;
}
/* 表示されたら付くクラス */
.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}
#about {
  margin-bottom: 16vh;
}
.aboutImg img {
  border-radius: 3rem;
  margin-top: 10vh;
}
#about .aboutProfile {
  /*  position: relative;*/
  background-image: linear-gradient(to bottom, rgb(0 0 0/0.6), transparent);
  border-radius: 3rem 3rem 0 0;
  padding: 2vh;
  margin-top: -4vh;
}
#about .aboutProfile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3rem 3rem 0 0;
  border-width: 3px 3px 0 3px;
  border-style: solid;
  border-color: transparent;
  background-image: linear-gradient(to bottom, #00C1B7, transparent); /* グラデーション背景 */
  background-origin: border-box; /* 背景の基準位置はボーダーも含める */
  background-clip: border-box; /* 背景の適用範囲はボーダーも含める */
  /*  Chromium*/
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0); /* 2つのマスクレイヤー */
  -webkit-mask-clip: padding-box, border-box; /* レイヤーごとの描画領域の範囲 */
  -webkit-mask-composite: destination-out; /* レイヤーが重なっていない領域を描画対象 */
  /*FireFox*/
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-clip: padding-box, border-box;
  mask-composite: exclude;
}
#about h3 {
  text-align: center;
  font-size: 2.0rem;
  font-weight: 500;
  line-height: 1.3em;
  padding-bottom: 0.5em;
  border-bottom: dotted 3px #00C1B7;
  margin-bottom: 1.0em;
}
#about h3 > span {
  font-size: 1.6rem;
  font-weight: bold;
  padding-bottom: 20px;
}
#about p, dd {
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 1.0em;
}
#about h4, dt {
  font-size: 1.6em;
  text-align: center;
  margin-bottom: 0.5em;
}
#about h4 {
  font-size: 1.8em;
}
/*ここから作品紹介----------------------------*/
#works{
	margin-bottom: 60vh;
}
.mv-section {
  position: relative;
  margin-bottom: 20vh;
}
.mv-item {
display: block;
  height: 50vh;
  margin-bottom: 20vh; /* 次の画像が見えるスペース */
}
.mv-img-wrap {
  opacity: 0;
  offset-path: path("M 0 -100vw A 100vw 100vw 0 0 1 100vw 0");
  offset-distance: 0%;
  /* transform を入れない！（これが重要） */
  left: -25vw;
  will-change: offset-distance, transform, opacity;
}
/* アニメ中だけ rotate を付ける */
.mv-img-wrap.inview {
  animation: arcMove 1.6s ease-out forwards;
}
/* アニメ終了後の静止状態 */
.mv-img-wrap.stopped {
  opacity: 1;
  offset-distance: 100%;
  transform: rotate(0deg);
}
/* 再アニメのための初期化 */
.mv-img-wrap.reset {
  opacity: 0;
  offset-distance: 0%;
  transform: rotate(-90deg);
}
/* 画像はブレないように */
.mv-img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(var(--neonBlue_sh));
}
.mv-telop {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 85%;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 3.0rem;
  background-color: rgb(0 0 0 / 0.6);
  border: solid 3px #6497FF;
  box-shadow: var(--neonBlue_sh);
  padding: 1.0em 0;
	margin-bottom: 15vh;
  z-index: 100;
}
/* --- 流れる土台 --- */
.mv-telop__track {
  display: flex;
  width: max-content;
  animation: marquee 12s linear infinite;
}
/* --- テキスト（2つ並べて無限ループへ） --- */
.mv-telop__text {
  font-size: 2.0rem;
  padding: 0 2.0rem;
  color: #fff;
  white-space: nowrap;
}
/* --- 無限スクロール --- */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 半分進んだらちょうど2つ目に繋がる */
  }
}
/* アニメーション */
@keyframes arcMove {
  0% {
    opacity: 0;
    offset-distance: 0%;
    transform: rotate(-90deg) translateX(25%) translateY(-50%);
  }
  100% {
    opacity: 1;
    offset-distance: 100%;
    transform: rotate(0deg);
  }
}
/* 最後になったらフェードアウト */
.mv-telop.hide {
  opacity: 0;
  transition: .5s;
  pointer-events: none;
}


/*ここからスキル一覧*/
#skill{
	margin-bottom: 16vh;
}
#skill section {
display: flex;
gap:2.0rem;
position: relative;
  background-image: linear-gradient(to bottom left, rgb(0 0 0/0.6), transparent);
  border-radius: 0 3rem 0 0;
  padding: 3.0rem 3.0rem 5.0rem 3.0rem;
  margin-top: -3.0rem;
	text-align: center;
}
#skill section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 3rem 0 0;
  border-width: 3px 3px 0 0;
  border-style: solid;
  border-color: transparent;
  background-image: linear-gradient(to bottom left, #CD2AFF, transparent); /* グラデーション背景 */
  background-origin: border-box; /* 背景の基準位置はボーダーも含める */
  background-clip: border-box; /* 背景の適用範囲はボーダーも含める */
  /*  Chromium*/
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0); /* 2つのマスクレイヤー */
  -webkit-mask-clip: padding-box, border-box; /* レイヤーごとの描画領域の範囲 */
  -webkit-mask-composite: destination-out; /* レイヤーが重なっていない領域を描画対象 */
  /*FireFox*/
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-clip: padding-box, border-box;
  mask-composite: exclude;
}


#skill img{
	width: 20vw;
	height: auto;
}
#skill h3 {
font-size: 1.6rem;
  font-weight: bold;
  padding: 0.5em 0;
}

#skill .skill_tx{
	font-size: 1.4em;
}


/*ここからお問い合わせ*/
#form dt {
  font-size: 1.8rem;
	text-align: start;
}
form input[type="text"], form input[type="email"], textarea {
  font-size: 2rem;
  padding: 5px 8px;
  width: 100%;
	border: solid 1px #EC5656;
  box-shadow: var(--neonRed_sh);
  background-color: rgb(0 0 0/0.4);
  border-radius: 20px;
  margin-bottom: 10px;
}
textarea {
  height: 130px;
  margin-bottom: 30px;
}
.submitBtn {
  text-align: center;
  font-size: 2rem;
}
form input[type="submit"] {
  text-align: center;
  padding: 8px 18px;
  background-color: #685050;
  border-radius: 30px;
  margin-bottom: 10px;
  color: #F7F8DA;
}
/*トップに戻るボタン*/
#top_button {
  writing-mode: vertical-rl;
  position: fixed;
  bottom: 60px;
  right: 0px;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.12rem;
  color: #F8f4ec;
  text-shadow: 1px 1px 2px rgb(0 0 0/0.25);
  text-align: center;
  background-color: rgb(247 97 60/0.5);
  box-shadow: 0 4px 8px rgb(124 109 95/0.6) inset;
  border-radius: 10px 0 0 10px;
  padding: 10px 3px 10px 6px;
  box-shadow: 2px 2px 4px rgb(108 26 26/0.4);
	z-index: 999999;
}
#top_button :hover {
  position: fixed;
  bottom: 60px;
  right: 0px;
  color: #f8f4ec;
  text-shadow: 1px 1px 2px rgb(0 0 0/0.25);
  text-align: center;
  background-color: rgb(212 163 115/0.6);
  box-shadow: 2px 2px 10px rgb(207 204 190/0.8) inset;
  border-radius: 10px 0 0 10px;
  padding: 10px 3px 10px 6px;
  box-shadow: 2px 2px 4px rgb(124 124 124/0.4);
}
/*ここからフッター*/
footer {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  padding: 15px 0 14px;
}
footer img {
  height: 30px;
}