@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=DotGothic16&display=swap');

:root{
  --bg:#FAF8F2;
  --ink:#1E1C18;
  --gray:#A19C8D;
  --line:#E8E3D4;
  --coral:#E8604C;
  --amber:#E8A33C;
  --mint:#4C8F76;
}
*{box-sizing:border-box;margin:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Zen Kaku Gothic New',sans-serif;
  line-height:2;
  -webkit-font-smoothing:antialiased;
}
.px{font-family:'DotGothic16',monospace;}
main{max-width:640px;margin:0 auto;padding:0 32px;}

/* ============ HERO(Design版採用)============ */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:80px 0 130px;
  position:relative;
}
h1.logo{
  display:flex;align-items:center;
  font-weight:900;
  font-size:clamp(54px,11vw,76px);
  letter-spacing:.02em;
  line-height:1;
}
/* 目玉:ベースライン補正済み(top:0.10em) */
.eye{
  position:relative;
  width:.72em;height:.72em;
  margin:0 .055em;
  top:.10em;
  flex-shrink:0;
  animation:fmBlink 5.6s ease-in-out infinite;
}
.eye .ring{
  position:absolute;inset:0;
  border:.145em solid var(--ink);
  border-radius:50%;
}
.eye .socket{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.eye .pupil{
  width:.30em;height:.30em;
  background:var(--ink);
  border-radius:50%;
  animation:fmLook 7.5s ease-in-out infinite;
}
@keyframes fmLook{
  0%,16%{transform:translate(0,0)}
  22%,36%{transform:translate(.09em,-.04em)}
  42%,54%{transform:translate(-.10em,.02em)}
  60%,74%{transform:translate(.04em,.07em)}
  80%,100%{transform:translate(0,0)}
}
@keyframes fmBlink{
  0%,91.5%,96.5%,100%{transform:scaleY(1)}
  94%{transform:scaleY(.06)}
}
/* クリック時: 自動アニメーションを一時停止して手動の反応に差し替える */
.eye.is-poked{animation-play-state:paused;}
.eye.is-poked .pupil{animation-play-state:paused;}
@keyframes poke-blink{
  0%,100%{transform:scaleY(1)}
  35%,55%{transform:scaleY(.06)}
}
@keyframes poke-look{
  0%{transform:translate(0,0)}
  30%{transform:translate(.13em,-.09em)}
  60%{transform:translate(-.05em,.03em)}
  100%{transform:translate(0,0)}
}
.eye.is-poked{animation:poke-blink .55s ease-in-out;}
.eye.is-poked .pupil{animation:poke-look .55s ease-in-out;}
.tag{
  margin-top:44px;
  font-weight:700;
  font-size:21px;
  letter-spacing:.34em;
}
.sub-en{
  margin-top:22px;
  font-family:'DotGothic16',monospace;
  font-size:13px;
  letter-spacing:.28em;
  color:#8F897C;
}
.scroll-hint{
  position:absolute;
  left:50%;
  bottom:36px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  cursor:default;
}
.scroll-hint .sd{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--ink);
  opacity:0;
  animation:sd-fall 2.2s ease-in-out infinite;
}
.scroll-hint .sd:nth-child(1){animation-delay:0s;}
.scroll-hint .sd:nth-child(2){animation-delay:.22s;}
.scroll-hint .sd:nth-child(3){animation-delay:.44s;}
@keyframes sd-fall{
  0%{opacity:0;transform:translateY(-6px);}
  35%{opacity:.85;}
  70%{opacity:.85;transform:translateY(4px);}
  100%{opacity:0;transform:translateY(10px);}
}

/* ============ 共通:セクション(v3採用)============ */
section.mid{padding:104px 0 0;}
.sec-h{
  display:flex;align-items:center;gap:14px;
  font-family:'DotGothic16',monospace;
  font-weight:400;font-size:16px;letter-spacing:.26em;
  margin-bottom:44px;
}
.dot{
  width:11px;height:11px;border-radius:50%;
  background:var(--ink);
  flex-shrink:0;
  position:relative;
}
.sec-h .dot{transition:none;}
.about p{
  font-size:15px;
  line-height:2.15;
  letter-spacing:.04em;
  color:#4E4A3F;
  margin-bottom:2.1em;
}
.about p:last-child{margin-bottom:0;}

/* ============ WORKS & ACTIVITIES(v3採用)============ */
.work{
  border-top:1px solid var(--line);
  padding:44px 2px;
}
.work:last-of-type{border-bottom:1px solid var(--line);}
.work-h{
  display:flex;align-items:baseline;gap:14px;
  flex-wrap:wrap;
}
.work-h .dot{position:relative;top:-1px;transition:transform .25s;}
.w-fommay .dot{background:var(--amber);}
.w-kurtoko .dot{background:var(--coral);}
.w-lab .dot{background:var(--mint);}
.work:hover .dot{transform:scale(1.7);}
.work .dot::before{
  content:"";
  position:absolute;
  width:4px;height:4px;border-radius:50%;
  background:var(--bg);
  top:50%;left:50%;
  margin:-2px 0 0 -2px;
  opacity:0;
  transition:opacity .25s;
}
.work:hover .dot::before{opacity:1;}
.work-h h3{
  font-weight:900;font-size:20px;letter-spacing:.06em;
}
.work-h .en{
  font-family:'DotGothic16',monospace;
  font-size:10px;letter-spacing:.28em;color:var(--gray);
}
.work .copy{
  margin-top:18px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.1em;
}
.work p.desc{
  margin-top:8px;
  font-size:13.5px;
  color:#5F5A4D;
}
.work-link{
  display:inline-block;
  margin-top:24px;
  font-family:'DotGothic16',monospace;
  font-size:12px;letter-spacing:.22em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid var(--ink);
  padding-bottom:3px;
}
.work-link .arw{display:inline-block;transition:transform .2s;}
.work-link:hover .arw{transform:translateX(5px);}
.w-lab .work-link:hover{color:var(--mint);border-color:var(--mint);}

/* 準備中(SOON) */
.work-link--soon{
  color:var(--gray);
  border-bottom:2px dashed var(--gray);
  cursor:default;
  display:inline-flex;align-items:center;gap:10px;
}
.work-link--soon:hover{color:var(--gray);border-color:var(--gray);}
.soon-badge{
  font-size:9px;letter-spacing:.15em;
  border:1.5px solid var(--gray);
  border-radius:99px;
  padding:2px 9px;
}

.works-wrap{padding-bottom:130px;}

/* ============ CONTACT(Design版採用・脈動なし)============ */
.contact{
  background:var(--ink);
  color:var(--bg);
  padding:150px 0 116px;
}
.contact-inner{max-width:640px;margin:0 auto;padding:0 28px;}
.contact .sec-h{color:var(--bg);margin-bottom:0;}
.contact .sec-h .dot{background:var(--bg);}
.contact .sec-h .dot::before{
  content:"";
  position:absolute;
  width:4px;height:4px;border-radius:50%;
  background:var(--ink);
  top:50%;left:50%;
  margin:-2px 0 0 -2px;
}
.contact p.lead{
  margin:36px 0 0;
  font-size:15px;line-height:2.15;letter-spacing:.04em;
  color:#E6E2D8;
}
.contact-btn{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:48px;
  font-family:'DotGothic16',monospace;
  font-size:14px;letter-spacing:.2em;
  text-decoration:none;
  color:var(--ink);
  background:var(--bg);
  border:2px solid var(--bg);
  border-radius:999px;
  padding:13px 30px;
  transition:background .2s,border-color .2s,color .2s;
}
.contact-btn:hover{
  background:var(--coral);
  border-color:var(--coral);
  color:var(--bg);
}
.contact-btn .arw{display:inline-block;transition:transform .2s;}
.contact-btn:hover .arw{transform:translateX(5px);}

/* 準備中(フォーム未実装のため) */
.contact-btn--soon{
  background:transparent;
  border:2px dashed #6E6A60;
  color:#B5B0A0;
  cursor:default;
}
.contact-btn--soon:hover{
  background:transparent;
  border-color:#6E6A60;
  color:#B5B0A0;
}
.contact-btn--soon:hover .arw{transform:none;}
.contact-btn--soon .soon-badge{
  font-size:9px;letter-spacing:.15em;
  border:1.5px solid #6E6A60;
  border-radius:999px;
  padding:2px 9px;
  margin-left:2px;
}
.contact footer{
  margin-top:110px;
  font-family:'DotGothic16',monospace;
  font-size:11px;letter-spacing:.24em;
  color:#6E6A60;
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}