@charset "UTF-8";

* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color:#222;
  transition: background 0.8s ease;
  overflow: hidden; /* ページ切替のためスクロール自体は殺す */
}

/* ======================
   グラデーション
====================== */
body.page-top{
  background: linear-gradient(180deg, #fff1f6 0%, #ffffff 100%);
}
body.page-works{
  background: linear-gradient(180deg, #fbd3df 0%, #ffffff 100%);
}
body.page-activity{
  background: linear-gradient(180deg, #ec709a 0%, #ffffff 100%);
}
/* 背景の“動く層”を1枚足す */
body::before{
  content:"";
  position: fixed;
  inset: -30vmax;              /* 大きめにして動かしても端が見えないように */
  z-index: -1;
  pointer-events: none;

  /* 好きなだけ重ねられる。まずは2〜3層が扱いやすい */
  background:
    radial-gradient(60vmax 60vmax at 20% 30%, rgba(236,112,154,.35), rgba(236,112,154,0) 60%),
    radial-gradient(70vmax 70vmax at 80% 70%, rgba(0,0,0,.06), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(255,241,246,1) 0%, rgba(255,255,255,1) 100%);

  filter: blur(18px) saturate(115%);
  transform: translate3d(0,0,0);
  animation: bgDrift 10s ease-in-out infinite alternate;
}

/* ぎゅーん感：動きは transform が一番安定 */
@keyframes bgDrift{
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.02) rotate(-0.6deg); }
  50%  { transform: translate3d( 2%, -3%, 0) scale(1.05) rotate( 0.4deg); }
  100% { transform: translate3d( 3%,  2%, 0) scale(1.03) rotate( 0.9deg); }
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
}
/* ======================
   ナビ
====================== */
.nav{
  position:fixed;
  top:0;
  width:100%;
  padding:20px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:10;
}

.logo{
  font-weight:500;
  letter-spacing:0.12em;
}

.nav a{
  margin-left:20px;
  text-decoration:none;
  color:#333;
  font-size:14px;
  letter-spacing:0.08em;
  opacity:.75;
  transition: opacity .2s ease;
}
.nav a:hover{ opacity:1; }
.nav a.is-active{ opacity:1; }

/* ======================
   ページ
====================== */
main{
  height:100vh;
  overflow:hidden;
}

.page{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 20px;
  opacity:0;
  transform: translateY(14px);
  pointer-events:none;
  transition: opacity .45s ease, transform .45s ease;
}

.page.active{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

.inner{ max-width: 640px; }

h1{
  font-size:36px;
  font-weight:500;
  margin:0 0 30px;
  letter-spacing:0.1em;
}
h2{
  font-size:28px;
  margin:0 0 30px;
  font-weight:400;
  letter-spacing:0.06em;
}
h3{
  font-size:16px;
  margin:40px 0 10px;
  font-weight:500;
  letter-spacing:0.06em;
}

p{
  line-height:1.9;
  font-size:16px;
  margin:0;
}

ul{
  list-style:none;
  padding:0;
  margin:0;
}
li{
  margin:8px 0;
  font-size:15px;
}

.block{ margin-top:30px; }

.hint{
  margin-top:36px;
  font-size:12px;
  letter-spacing:0.18em;
  opacity:.55;
}

/* contact */
.contact{
  margin-top:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.contact-label{
  font-size:12px;
  letter-spacing:0.18em;
  opacity:.6;
}

.contact-mail{
  font-size:14px;
  color:#222;
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.18);
  padding-bottom:2px;
  opacity:.85;
}
.contact-mail:hover{ opacity:1; }

.contact-copy{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.6);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  letter-spacing:.12em;
  cursor:pointer;
}
.contact-copy:active{ transform: translateY(1px); }

@media (max-width: 640px){
  .nav{ padding:16px 18px; }
  h1{ font-size:30px; }
}