.hamburger-div{display: none;}
html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; background-color: #000000;
}
.content{position: relative; z-index: 200; width: 100%;}
html{background-color: #0d0d11; color: #ffffff; width: 100%;}
.header{display: flex; justify-content: space-between; align-items: center; text-align: center; color: #ffffff;}
.nav{display: flex; gap: 60px; margin-right: 120px; gap: 70px;}
.nav a{color: #ffffff; text-decoration: none;}
.koki{margin-left: 70px;  font-size: clamp(16px, 2vw, 20px); font-weight: 700;}
.create{color: blueviolet;}
.DCC p{margin: 0px; font-family: "Bebas Neue", sans-serif; line-height: 1.0; font-weight: 600; font-size: clamp(40px, 5vw, 80px);}
.left-hero{display: flex; flex-direction: column; margin-left: 70px; align-items: flex-start; 
  margin-bottom: 90px;}
.value{font-size: clamp(16px, 2vw, 20px); margin-top: 40px; font-weight: 400;}
.DCC{margin-top: 70px;}
.imagine{writing-mode: vertical-rl; letter-spacing: 10px; font-size: clamp(30px, 5vw, 80px); 
    font-family: 'HGGyoshotai', sans-serif; margin-left: 0; margin-bottom: 160px; margin-right: 40px;}
.imagination{writing-mode: vertical-rl; margin: 0; margin-top: 20px; font-weight: 500;}
  .view-my-works{border: white solid; text-decoration: none; padding: 0px 10px; margin-top: 20px; position: relative;
    border-width: 1px; color: #ffffff; overflow: hidden;}
.view-my-works::before{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #7204bb; transition: 0.4s; z-index: 600;}
.view-my-works:hover::before{width: 100%;}
.arrow{margin-left: 15px;}
.more-about-me{border: white solid; text-decoration: none; padding: 0px 10px; margin-top: 20px; position: relative;
    border-width: 1px; color: #ffffff; overflow: hidden;}
.more-about-me::before{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #7204bb; transition: 0.4s; z-index: 600;}
.more-about-me:hover::before{width: 100%;}
.arrow1{margin-left: 15px;}
.value2{margin-top: -10px; font-weight: 350; font-size: clamp(13px, 2vw, 16px);}
.hero{display: grid; grid-template-columns: 1fr 1fr; padding: 20px; position: relative; margin-bottom: 40px;}
.right-hero{display: flex; justify-content: flex-end; text-align: center; margin-right: 40px;
animation: none !important; transition: none !important; transform: none !important; position: static;}
.icon{margin-top: 400px; font-size: 30px; color: white; margin-left: 20px;}
.about{display: grid; grid-template-columns: 1fr 1fr 1fr; justify-content: center; margin-bottom: 40px;
  align-items: center; padding: 20px;}
.line{margin-top: 20px; width: 100%; display: flex; margin-bottom: 40px;
  flex-direction: column; justify-content: center; align-items: center; margin-left: 34px;}
.about-sentence{width: 100%; margin: auto;}
.video{display: block; width: 100%; margin-left: 45px;}
.video video {
    width: 100%;
    height: auto;
    display: block; margin: auto; gap: 0; 
}
.idea{font-size: 30px;}
.big{color: #753fd3;}
.works{padding: 20px; margin-bottom: 40px;}
.works-div{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px;}
.skills-div {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 60%; margin-left: 30px;}
.skills{padding: 20px; position: relative; margin-bottom: 40px;}
.monster2-pic{cursor: pointer;}
.monster2-pic.shake .monster2 {
    animation: shake 0.5s ease;
}
.monster2{object-fit: cover; position: absolute; width:30%; right: 40px; top: 20px;
 transition: 0.3s; z-index: 0;}
  @keyframes shake{0%{transform: translateX(0);}20%{transform: translateX(-10px);}40%{transform: translateX(10px);}60%{transform: translateX(-10px);}80%{transform: translateX(10px);}100%{transform: translateX(0);}}
.monster2-pic:hover img{filter: drop-shadow(0 0 10px white) drop-shadow(0 0 25px red);}
.skill-item2{width: 200px;
  background-color: transparent; /* 背景色 */
  color: #ffffff;            /* ★文字色を白にする */
  padding: 20px;}
.info2{display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: clamp(8px, 1.5vw, 14px);
  color: #ffffff; }
.bar-bg2{width: 100%;
  height: 3px; /* 線の太さ */
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden; 
  display: flex;}
.bar-fill2{height: 100%;
  /* 左から右へ：濃い青紫色から明るい白紫へのグラデーション */
  background: linear-gradient(90deg, #3b2d54 0%, #a29bfe 80%, #ffffff 100%);
  /* ネオンのような発光エフェクト */
  box-shadow: 0 0 8px rgba(162, 155, 254, 0.8);
  border-radius: 2px;
  transition: width 1s ease-in-out;}
.hero-pic{background-image: url(img/fv.png); background-size: 120% 120%; background-position: top; 
  animation: bgMove 12s ease-in-out infinite alternate; overflow: hidden;}
@keyframes bgMove{0%{background-position: 40% 60%; background-size: 100%;}
100%{background-position: 60% 20%; background-size: 120%;}}
.ABOUT-ME{background: transparent;}
.portfolio2026{position: absolute; writing-mode: vertical-lr; top: 180px; font-size: clamp(10px, 2vw, 16px);
  font-weight: 200; left: 30px; transform: rotate(180deg); letter-spacing: 5px;}
.works-pic{width: 100%;
  height: auto;
  object-fit: cover;}
.process{padding: 20px; position: relative; height: 620px; margin-bottom: 40px;}


.process-div{display: flex;}
.process-item{display: flex; flex-direction: column; font-size: clamp(10px, 1.2vw, 16px); top: 270px;
   text-align: center; align-items: center; justify-content: center; flex: 1; position: absolute;}
   h4{font-size: clamp(12px, 1.5vw, 20px); margin: 0px; margin-bottom: 10px;}
   .process-pic{display: block; width: 90%; height: auto; position: absolute; top: 110px; left: 50%; transform: translateX(-50%); right: 0; bottom: 0;}
.process-item:nth-child(1){left: 105px; top: 400px;}
.process-item:nth-child(2){left: 334px; top: 400px;}
.process-item:nth-child(3){left: 575px; top: 400px;}
.process-item:nth-child(4){right: 322px; top: 400px;}
.process-item:nth-child(5){right: 93px; top: 400px;}
.text-bottom1{font-size: clamp(16px, 2vw, 24px); margin: 0px;}
.text-bottom2{font-size: clamp(10px, 1.3vw, 16px); margin: 0px;}
.bottom{display: flex; justify-content: flex-start; height: 300px;
   background-image: url(img/scene2.png); background-size: cover 90%; 
   background-repeat: no-repeat; background-position: center top; animation: sceneMove 12s ease-in-out 
   infinite alternate; align-items: center; gap: 20px;}
@keyframes sceneMove{0%{background-size: 100%; background-position: 20% 10%;}
100%{background-size: 110%; background-position: 20% 25%;}}
.contact{border: white solid; text-decoration: none; padding: 0px 10px; margin-top: 20px; position: relative;
  border-width: 1px; color: #ffffff; font-size: clamp(16px, 2vw, 30px); align-items: center; display: flex; overflow: hidden;}
.contact::before{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #c3f340; transition: .4s; z-index: 600;}
.contact:active::before{width: 100%;}
.clot{margin-left: 40px; gap: 12px; display: flex; flex-direction: column;}
.skills.big{margin-left: 20px;}
.p-bottom{font-size: 20px; color: #753fd3; justify-content: flex-start; margin: 0px;}
.footer{display: grid; grid-template-columns: repeat(5,1fr); gap: 130px; align-items: flex-start;
  margin-left: 20px; justify-content: center;}
.me{display: flex; flex-direction: column;}
.menu{display: flex; flex-direction: column;  align-items: center;}
.service{display: flex; flex-direction: column; align-items: center;}
.app{display: flex; flex-direction: column;  align-items: center;}
.koki-bottom{font-size: clamp(20px, 2.5vw, 26px); font-weight: 500px; margin: 0px; margin-top: 30px; font-family: 'Courier New', Courier, monospace;}
.creator-bottom{font-size: clamp(10px, 1.2vw, 12px); font-weight: 100px; margin: 0px; margin-top: 5px; margin-bottom: 5px;
   font-family: 'Courier New', Courier, monospace;}
.dcc-bottom{font-size: clamp(14px, 1.5vw, 16px); font-weight: 100px; margin: 0px;
  font-family: 'Courier New', Courier, monospace;}
footer{display: flex; margin-top: 60px; align-items: center;}
.service p{margin-bottom: 0px; margin-top: 0px;  white-space: nowrap;}
.a{color: #ffffff;}
.all-rights{font-size: 12px; margin-top: 20px;}
.sakura-container{position: relative;}
.sakura{position: absolute; pointer-events: none; animation: falling 12s linear infinite ; z-index: 2;}
@keyframes falling{0%{transform: translate(0,-10vh) rotate(0deg);}50%{transform: translate(70px, 50vh) rotate(180deg);}100%{transform: translate(-30px,90vh) rotate(360deg);}}
.sakura:nth-child(1){top: 32%; width: 7%; right: 10%; animation-duration: 10s;}
.sakura:nth-child(2){top: 24%; width: 15%; right: 44%; animation-duration: 9s;}
.sakura:nth-child(3){top: 72%; width: 13%; right: 7%; animation-duration: 11s;}
.sakura:nth-child(4){top: 50%; width: 8%; right: 48%; animation-duration: 10s;}
.sakura:nth-child(5){top: 48%; width: 7%; right: 34%; animation-duration: 16s;}
.sakura:nth-child(6){top: 36%; width: 10%; right: 73%; animation-duration: 9s;}
.sakura:nth-child(7){top: 68%; width: 8%; right: 40%; animation-duration: 8s;}
.sakura:nth-child(8){top: 30%; width: 10%; right: 80%; animation-duration: 12s;}
.sakura:nth-child(9){top: 64%; width: 14%; right: 49%; animation-duration: 12s;}
.sakura:nth-child(10){top: 60%; width: 9%; right: 90%; animation-duration: 9s;}
.sakura:nth-child(11){top: 58%; width: 8%; right: 30%; animation-duration: 7s;}
.sakura:nth-child(12){top: 29%; width: 14%; right: 20%; animation-duration: 16s;}
.sakura:nth-child(13){top: 36%; width: 13%; right: 60%; animation-duration: 13s;}
.sakura:nth-child(14){top: 59%; width: 12%; right: 70%; animation-duration: 17s;}
.sakura:nth-child(15){top: 52%; width: 8%; right: 50%; animation-duration: 9s;}
.sakura img{animation: sway 3s ease-in-out infinite alternate; width: 100%;}
@keyframes sway{from{transform: translateX(-60px) rotate(-10deg);}to{transform: translateX(100px) rotate(30deg);}}
.view{border: white solid; text-decoration: none; padding: 6px 30px; margin-top: 10px; display: inline-block;
  border-width: 1px; color: #ffffff; overflow: hidden; transition: box-shadow 0.3s ease, transform 0.3s ease;
border-radius: 25px;}
.view:hover{box-shadow: 0 0 10px #d8f004, 0 0 30px #ff3c00, 0 0 60px #003cff; transform: translateY(-9px);}
.view1{color: #ffffff; text-decoration: none; padding: 6px 30px; margin-top: 10px;
display: inline-block; border-radius: 25px; background: linear-gradient(90deg, #8a2be2, #e66108, #1708e7);
background-size: 200% 100%; background-position: 0% 0%; transition: all 0.4s ease; border-width: 1px; overflow: hidden;}
.view1:hover{background-position: 100% 0%; transform: scale(1.08);}
.view2{border-radius: 25px; text-decoration: none; padding: 6px 30px; margin-top: 10px; display: inline-block;
  border: none; color: #ffffff; background-color: #e65100;
  box-shadow: 0 7px 0 #9a3412; transition: all 0.2s ease;}
.view2:hover{transform: translateY(5px); box-shadow: 0 2px 0 #9a3412;}
.view3{position: relative; display: inline-block; padding: 6px 30px; background-color: #c71414; color: #ffffff;
text-decoration: none; overflow: hidden; border-radius: 25px;}
.view3 span{display: inline-block; transition: transform 0.3s ease;}
.view3::after{content: attr(data-text); position: absolute; top: 100%; left: 0; width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease;}
.view3:hover span{transform: translateY(-150%);}
.view3:hover::after{transform: translateY(-100%);}
.view3 .arrow {
  display: inline-block;
  transition: transform 0.3s ease; /* 個別の遅れをリセット */
}


/* Instagram画像の読み込み遅延による位置ズレ（ガタつき）を防止 */
.right-hero .icon {
  width: 30px; /* 実際の画像サイズに合わせて変更してください */
  height: 30px;

}






.skill-item {
  width: 300px;
  background-color: transparent; /* 背景色 */
  color: #ffffff;            /* ★文字色を白にする */
  padding: 20px;
}

.info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #ffffff; /* ★保険としてここにも白を指定 */
}


/* トラック（下地のうっすら見える線） */
.bar-bg {
  width: 100%;
  height: 3px; /* 線の太さ */
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden; 
  display: flex; gap: 20px;
}

/* ★ここがポイント：グラデーションと発光 */
.bar-fill {
  height: 100%;
  /* 左から右へ：濃い青紫色から明るい白紫へのグラデーション */
  background: linear-gradient(90deg, #3b2d54 0%, #a29bfe 80%, #ffffff 100%);
  /* ネオンのような発光エフェクト */
  box-shadow: 0 0 8px rgba(162, 155, 254, 0.8);
  border-radius: 2px;
  transition: width 1s ease-in-out; /* アニメーション用 */
}
.three{display: flex; align-items: flex-start; justify-content: center; gap: 60px; margin-top: 0; text-align: center; margin-bottom: 40px;}
.icon1{
    font-size: 25px;
    color: white;
}


.tap-text{display: none;}
.click-text{display: block; position: absolute; top: 94%; right: 2%; transform: translate(-50%, -50%); font-size: 24px; color: #c9f01a; z-index: 1; pointer-events: none}

@media (max-width: 768px){ 
  
  .nav {
    display: none;
  }
.hamburger-div {
    display: flex;
  }
  .nav1 {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;

    background-color: #000;
    z-index: 999;
}
    .nav1.active {
    display: flex;
    flex-direction: column;
    gap: 10px; 
  }
  .hamburger{
    display: flex; flex-direction: column; width: 30px; height: 20px; color: #ffffff; gap: 6px;
    border: none;   position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
    background: none;
  }
  .hamburger span{
      width: 100%;
    height: 2px; background-color: #ffffff; display: block;
  }


.right-hero{margin-top: 120px; }
.left-hero{display: flex; flex-direction: column; margin-left: 0px; align-items: flex-start; 
  margin-bottom: 0px;}
.DCC p{margin-top: 0px; }
.DCC{margin-top: 20px; gap: 0px;}
.koki{margin-left: 20px;}
.portfolio2026{top: 500px; left: 10px;}
.header{height: 60px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; text-align: center; color: #ffffff;}

.view-my-works{border: white solid; text-decoration: none; padding: 0px 4px; margin-top: 20px; position: relative;
  border-width: 1px; color: #ffffff; overflow: hidden;   display: inline-block; text-align: left; width: 80px;}

.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


  .hero-pic {
    animation: bgMoveSP 14s ease-in-out infinite alternate; width: 100%; height: 100%; background-size: 500% 120%; background-position: center; margin-bottom: 20px; 
    background-repeat: no-repeat; 
  }

  @keyframes bgMoveSP {
    0% {
      background-position: 40% 50%;
    }

    100% {
      background-position: 30% 50%;
    }
  }
.about{display: grid; grid-template-columns: 1fr; justify-content: center; margin-bottom: 40px;
  align-items: center; padding: 20px; gap: 60px;}

.video{display: block; width: 100%; margin: 0px;}
.video video {
    width: 100%;
    height: auto;
    display: block; margin: auto; gap: 0; 
}

.arrow{margin-left: 5px;}

.more-about-me{border: white solid; text-decoration: none; padding: 10px 10px; margin-top: 20px; position: relative;
    border-width: 1px; color: #ffffff; overflow: hidden;}

.line{width: 100%; display: flex;
  flex-direction: column; justify-content: center; align-items: center; margin: 0px;}

.works1{    flex: 0 0 80%;
    scroll-snap-align: center;}
.works2{    flex: 0 0 80%;
    scroll-snap-align: center;}
.works3{    flex: 0 0 80%;
    scroll-snap-align: center;}
.banner{    flex: 0 0 80%;
    scroll-snap-align: center;}
.works-div{display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; padding: 20px; 
    overflow-y: hidden;}



.skills-div {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 90%; margin-left: 0px;}
.skill-item2{width: 70px;
  background-color: transparent; /* 背景色 */
  color: #ffffff;            /* ★文字色を白にする */
  padding: 20px;}


.monster2-pic{cursor: pointer;}
.monster2-pic.shake .monster2 {
    animation: shake 0.5s ease;
}
.monster2{object-fit: cover; position: absolute; width:30%; right: 40px; top: -30px;
 transition: 0.3s; z-index: 0;}
  @keyframes shake{0%{transform: translateX(0);}20%{transform: translateX(-10px);}40%{transform: translateX(10px);}60%{transform: translateX(-10px);}80%{transform: translateX(10px);}100%{transform: translateX(0);}}
.monster2-pic:hover img{filter: drop-shadow(0 0 10px white) drop-shadow(0 0 25px red);}

.click-text{display: none;}
  .tap-text{display: block; position: absolute; top: -20%; right: 19%; transform: translate(-50%, -50%); font-size: 10px; color: #a2ff0d; z-index: 1; pointer-events: none}


.process{padding: 20px; position: relative; height: 280px; margin-bottom: 40px; background-image: none;     overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;}
.process-div{display: flex;}
.process-item{display: flex; flex-direction: column; top: 270px;
   text-align: center; align-items: center; justify-content: center; flex: 1; position: absolute;}
.process-item:nth-child(1){left: 15px; top: 180px;}
.process-item:nth-child(2){left: 130px; top: 180px;}
.process-item:nth-child(3){left: 256px; top: 180px;}
.process-item:nth-child(4){right: -115px; top: 180px;}
.process-item:nth-child(5){right: -235px; top: 180px;}

.process-pic{display: block; width: 160%; height: auto; object-fit: cover; position: absolute; top: 50px; left: 80%; transform: translateX(-50%); }




.text-bottom1{margin: 0px;}
.text-bottom2{margin: 0px;}
.bottom{display: flex; justify-content: flex-start; height: 300px;
   background-image: url(img/scene2.png); background-size: cover 120%; 
   background-repeat: no-repeat; background-position: center top; animation: sceneMove 12s ease-in-out 
   infinite alternate; align-items: center; gap: 20px;}
@keyframes sceneMove{0%{background-size: 100%; background-position: 20% 10%;} 50%{background-size: 120%; background-position: 20% 10%;}
100%{background-size: 110%; background-position: 20% 15%;}}
.contact{border: white solid; text-decoration: none; padding: 1px 1px; margin-top: 20px; position: relative;
  border-width: 1px; color: #ffffff; align-items: center; display: flex; overflow: hidden; text-align: center; justify-content: center;}
.contact::before{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #c3f340; transition: .4s; z-index: 600;}
.contact:active::before{width: 100%;}
.clot{margin-left: px; gap: 12px; display: flex; flex-direction: column;}
.skills.big{margin-left: 20px;}
.p-bottom{font-size: 20px; color: #753fd3; justify-content: flex-start; margin: 0px;}
.footer{position: relative; gap: 40px; display: flex; justify-content: center; align-items: flex-start; height: 300px}
.me{display: flex; flex-direction: column; position: absolute; bottom: 0px; left: 0px;}
.menu{display: flex; flex-direction: column;  align-items: center; justify-content: center;}
.service{display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap; justify-content: center;}
.app{display: flex; flex-direction: column;  align-items: center; justify-content: center;}
.koki-bottom{font-weight: 500px; margin: 0px; margin-top: 30px; font-family: 'Courier New', Courier, monospace;}
.creator-bottom{font-weight: 100px; margin: 0px; margin-top: 5px; margin-bottom: 5px;
   font-family: 'Courier New', Courier, monospace;}
.dcc-bottom{font-weight: 100px; margin: 0px;
  font-family: 'Courier New', Courier, monospace;}
footer{display: flex; margin-top: 60px; align-items: center;}
.service p{margin-bottom: 0px; margin-top: 0px; display: flex; flex-direction: column; align-items: center; text-align: center;}

.all-rights{font-size: 12px; margin-top: 20px;}

.icon1{
    font-size: 25px;
    color: white;
}

.about-sentence{width: 88%; line-height: 1.5; margin-top: 20px; margin-right: 50px;}


.about-sentence br{display: none;}

.icon{color: transparent;}



























}