/* =============================================
   Lim Modular Studio — hero.css
   Heroセクション固有スタイル
   ============================================= */
#hero {
  min-height: 100dvh;
  padding-top: 80px; /* dvh/vh → px固定値に。リロードズレを防ぐ */
  position: sticky;
  /* position: relative; */
  top: 0;
  z-index: 0; /* ①: About以降がこの上に乗り上げる */
  background: transparent;
  overflow: visible;
}
/* 修正後：グラデを透過に、z-indexを-1のまま（グラデが手前） */
#hero::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 69% 60%, rgba(204,179,204,0.55) 0%, rgba(255,255,255,0) 70%);
  animation: heroBgFade 1.7s cubic-bezier(0.88, 0, 1, 1) forwards;
}
@keyframes heroBgFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* hero背景：ハーフトーンドット（最背面） */
#hero::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(circle, var(--accent) 1.5px, transparent 1px);
  background-size: 5px 5px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse at 69% 60%, black 0%, transparent 70%);
  mask-image: 
  radial-gradient(ellipse at 20% 33%, black 0%, transparent 27%),
  radial-gradient(ellipse at 23% 80%, black 0%, transparent 33%),
  radial-gradient(ellipse at 45% 51%, black 0%, transparent 27%),
  radial-gradient(ellipse at 75% 33%, black 0%, transparent 33%),
  radial-gradient(ellipse at 75% 80%, black 0%, transparent 27%);
  pointer-events: none;
}

.hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  margin-top: 1.2rem;/*上の余白調整追加*/
}

.hero-left {
  padding-left: 1.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.hero-left-inner {
  margin: 35px auto 48px;
  width: 100%;
  max-width: 470px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-right {
  padding-right: 1.5em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* --- Eyebrow --- */
.eyebrow {
  font-size: 18px;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  letter-spacing: 0.12em;
  margin: 0;
}

/* --- Main heading --- */
.main-heading {
  font-size: clamp(48.00px, calc(4.44vw + 31.57px), 77.00px);
  font-weight: 580;
  font-family: var(--font-sansEn);
  color: var(--text-primary);
  line-height: 1.11;
  letter-spacing: -0.02em;
  margin: 0;
  white-space: nowrap;
}

.main-heading em {
  color: var(--accent);
  font-style: normal;
}

/* --- Sub copy --- */
.sub-copy {
  font-size: clamp(16.00px, calc(0.22vw + 15.17px), 17.2px);
  color: var(--text-secondary);
  line-height: 1.9;
  margin: 0;
  /* max-width: 415px; */
  letter-spacing: 0.006em;
}

.sub-copy .text-em {
  font-style: normal;
  font-weight: bold;
  color: var(--text-primary);
}

/* --- Skill tags --- */
.skill-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* --- CTA row --- */
.cta-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

/* --- Grid visual --- */
.grid-visual {
  /* margin-top: 48px; */
  margin-left: 3dvw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3%;
  width: 100%;
  max-width: 500px;
  /* height: auto; */
  aspect-ratio: 1 / 1;
}

.gv {
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/*.gv.a1 { background: var(--accent);      opacity: 0.9; }
.gv.a2 { background: var(--accent-grid); opacity: 0.4; }
.gv.a3 { background: var(--accent-grid); opacity: 0.2; }
.gv.a4 { background: var(--accent-tint); } */
.gv.a1 { background: #794CC0; }
.gv.a2 { background: #C5A9F0; }
.gv.a3 { background: #E2D4F7; }
.gv.a4 { background: var(--accent-tint); }

/*========= スクロールダウンのためのCSS ===============*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※適宜調整*/
	position:relative;
  z-index: 1;
  background: var(--bg);
	bottom:3px;
	left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:12px;
    /*テキストの形状*/
	color: #ccc;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#ccc;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:95px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 100px;
	background:#ccc;
}

/* --- 画面高さが低い(ノートPCとかの)場合の調整 --- */
@media (max-height: 750px) and (min-width: 768px) {
  #hero {
    padding-top: 68px;
  }

 /* .hero {
    margin-top: 2rem;/*上の余白調整追加*/
 /* }  */

  .hero-left-inner {
    /* margin: 16px auto 24px; */
    margin: 16px 1rem 24px 4.5rem;
    gap: 12px;
  }

  .hero-right {
    padding-left: 2.8rem;
  }

  .main-heading {
    /* font-size: clamp(48px, 4.5vw, 58px); */
    font-size: clamp(48px, 5.5vw, 68px);
  }

  .sub-copy {
    /* font-size: 17px; */
    line-height: 1.8;
  }

  .cta-row {
    margin-top: 0;
  }

  .grid-visual {
    max-width: 450px;
  }
}

/* タブレット・スマホ */
@media (max-width: 1023px) {
  .hero {
    margin-top: 0;
  }
  .hero-left {
    padding: 1rem;
  }
  .hero-left-inner{
    margin: 0;
  }
  .main-heading {
    font-size: 62px;
  }
  .sub-copy {
    font-size: 15px;
  }
  .hero-right {
    padding:1rem;
  }
  .grid-visual {
    margin-left: 0;
  }
}

/* スマホで上書き */
@media (max-width: 767px) {
 #hero {
  padding-top: 70px;
 }
 .hero {
  position: absolute;
  grid-template-columns: 1fr;
 }
 .hero-left {
  padding: 0 0.8rem;
 }
 .hero-left-inner {
  margin: 0;
  /* gap: clamp(0.5rem, 5vw, 20px); */
  gap: 0.5rem;
 }
 .main-heading {
  /* font-size: 14dvw; */
  font-size: clamp(52.00px, calc(3.92vw + 37.88px), 68.00px);
  line-height: 1.1;
 }
 .sub-copy {
  letter-spacing: -0.006em;
 }
 .sub-copy2 {
  letter-spacing: -0.09em;
 }
 .hero-right {
  position: absolute;
  bottom: 0;
  top: 47rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 108%;
  max-width: 500px;
  pointer-events: none;
  padding: 0;
  display: flex;
  z-index: -1;
}
  .grid-visual {
  margin: 0;
  max-width: 100%;
  display: grid; /* 同上 */
  opacity: 0.37;
  }
 .skill-tags {
  gap: 10px;
 }
 .scrolldown2 {
  left: 93%;
  bottom: 6px;
 }
 .scrolldown2 span {
  left: 4px;
 }
 .scrolldown2:after {
  height:80px;
 }
 @keyframes circlemove{
      0%{bottom:70px;}
     100%{bottom:-5px;}
 }
}