/* ===== Kids Club 星の子 LP — base ===== */
:root{
  --ink:#27334d;
  --ink-soft:#56627b;
  --paper:#fffdf8;
  --blue-soft:#cfe6fb;
  --pink-soft:#fbd3df;
  --yellow-soft:#fdeab0;
  --mint-soft:#cdeede;
  --star:#ffd35c;
  --tbd:#b3527a;
  --space:#03050d;
  --ff-hand:"Klee One","Hiragino Maru Gothic ProN","Zen Maru Gothic",serif;
  --ff-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  --ff-en:"Josefin Sans","Avenir Next","Helvetica Neue",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:clamp(20px,5vw,48px);
  --pad-y:clamp(96px,14vw,180px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--ff-body);
  font-weight:500;
  font-size:16px;
  line-height:2;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* 画面のいちばん外側の色。空の絵が出るまでの一瞬や、画面のはしに見える色（帯にならないよう、なめらかに） */
  background:linear-gradient(to bottom,#dbeafb 0%,#cfe0f7 35%,#3a3f80 75%,#05071a 100%);
}
img,svg{display:block;max-width:100%}
p,h1,h2,h3,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
a:focus-visible{outline:3px solid var(--star);outline-offset:4px;border-radius:6px}

/* 背景：まゆちゃんの見本の絵のとおりに作る（青空 → ピンク → 紫 → 藍色 → 星空）。ページと一緒に流れる
   色は見本から取った実物（mayu-sky-strip.png ＝ 見本の左66%を細く縮めたもの。
   縦に大きく伸ばしても筋が出ないように、細かいざらつきをならしてある）。
   星・天の川はこちらで描く（art.js）。位置と大きさは JS（main.js の paintWorld）が決める */
main{position:relative;color:#fff}
.world-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:#2a20c7 url("../assets/src/mayu-sky-strip2.png") 0 0/100% 100% no-repeat}
/* 雲：薄い横すじの雲。白い雲の形だけを持った絵（まわりは透明）。
   色を持っていないので、うしろの空が青でもピンクでもその色のまま白い雲になる。
   上下のふちは絵そのものに溶かしこんであるので、CSSのマスクは要らない。
   位置と大きさは main.js が決める */
.world-cloud{position:absolute;left:0;right:0;top:-2000px;height:0;
  background-repeat:no-repeat;background-size:cover}
.world-planet{position:absolute;left:0;top:-200px;width:44px;height:44px;background:url("../assets/src/mayu-sky.jpg") no-repeat;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent)}
/* 夕焼けの光のにじみ（ピンクの帯のところ。位置と高さは main.js が決める）
   白っぽさの元になるので、宇宙寄りにするぶん控えめにしてある */
.world-glow{position:absolute;left:-15%;right:-15%;top:-900px;height:0;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,196,150,.18),rgba(255,168,132,.08) 46%,rgba(255,150,124,0) 78%)}
/* 空がいちばん明るくなるところ（水色〜薄むらさき〜ピンク）に、深い色のベールを1枚かける。
   見本の色あいは残したまま、宇宙の側へ沈めて、白い文字が読めるようにする。位置と高さは main.js が決める */
.world-veil{position:absolute;left:0;right:0;top:-900px;height:0;
  background:linear-gradient(to bottom,
    rgba(10,26,96,0) 0%,
    rgba(10,26,96,.42) 21%,
    rgba(24,20,98,.50) 35%,
    rgba(44,18,94,.55) 50%,
    rgba(74,14,78,.50) 65%,
    rgba(44,16,88,.30) 79%,
    rgba(30,16,88,0) 100%)}
/* 水彩の質感：ピトに描いてもらった宇宙の絵から、色を捨てて濃淡と星だけを取り出したもの。
   overlay で重ねるので、空の色はそのままに、水彩のにじみと細かい星だけが乗る。
   上下反転を継いであるので、縦にいくら繰り返しても継ぎ目が出ない。位置と大きさは main.js が決める */
.world-tex{position:absolute;left:0;right:0;top:0;height:100%;mix-blend-mode:overlay;opacity:.92;
  background-image:url("../assets/src/space-texture.jpg");background-repeat:repeat-y;background-position:center top}
/* 星雲のもや：いちばん上のあたりに、青むらさきのやわらかい光をひろげる（宇宙の奥ゆき）
   白ではなく色をつけた光にして、文字が読みづらくならないようにする。位置と高さは main.js が決める */
.world-neb{position:absolute;left:-20%;right:-20%;top:-900px;height:0;mix-blend-mode:screen;opacity:.85;
  background:
    radial-gradient(38% 42% at 16% 30%,rgba(120,110,255,.34),rgba(120,110,255,0) 72%),
    radial-gradient(34% 38% at 84% 16%,rgba(96,150,255,.30),rgba(96,150,255,0) 72%),
    radial-gradient(46% 34% at 62% 74%,rgba(150,110,235,.24),rgba(150,110,235,0) 74%)}
/* 星：いちばん上から下までずっと見えている。空の色が明るいところでは控えめに、
   暗くなるほど濃く（濃さの変わりかたは main.js が決める）。
   3枚目はキラキラ（四方向に光がのびる、大きめの星） */
.world-stars{position:absolute;inset:0;
  background-image:var(--stars-a,none),var(--stars-b,none),var(--sparkle,none),var(--gold,none);
  background-size:560px 560px,900px 900px,1500px 1500px,1700px 1700px}
/* 天の川：細かい星が集まって、ゆるやかに流れる帯（位置と高さは main.js が決める） */
.world-milky{position:absolute;left:0;right:0;top:-200px;height:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}
.world-milky i{position:absolute;left:-60%;right:-60%;top:-6%;bottom:-6%;transform:rotate(6deg)}
.world-milky .glow{background:linear-gradient(to right,rgba(120,140,255,0) 30%,rgba(140,160,255,.22) 41%,rgba(185,200,255,.36) 50%,rgba(140,160,255,.22) 59%,rgba(120,140,255,0) 70%)}
.world-milky .dust{background-image:var(--stars-c,none);background-size:260px 260px;
  -webkit-mask-image:linear-gradient(to right,transparent 32%,rgba(0,0,0,.5) 41%,#000 50%,rgba(0,0,0,.5) 59%,transparent 68%);
  mask-image:linear-gradient(to right,transparent 32%,rgba(0,0,0,.5) 41%,#000 50%,rgba(0,0,0,.5) 59%,transparent 68%)}
main>section{position:relative;z-index:1;overflow:hidden}
.site-footer{position:relative;z-index:1}
.wrap{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding-inline:var(--gutter);text-align:center}

br.sp{display:none}
@media (max-width:640px){
  br.sp{display:inline}
  br.pc,.pc-only{display:none}
}

/* 紙のような細かい質感（JSで生成したノイズを敷く） */
main>section::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain,none);background-size:180px 180px;opacity:.55;
}

/* ===== 文字 ===== */
.h-big{font-family:var(--ff-hand);font-weight:600;font-size:clamp(30px,5.4vw,60px);line-height:1.6;letter-spacing:.06em}
.h-mid{font-family:var(--ff-hand);font-weight:600;font-size:clamp(22px,3.4vw,36px);line-height:1.85;letter-spacing:.06em}
.lead{font-family:var(--ff-hand);font-weight:600;font-size:clamp(19px,2.6vw,28px);line-height:1.9;letter-spacing:.06em;margin-top:1.3em}
.body{font-size:clamp(15px,1.7vw,18px);line-height:2.15;margin-top:1.6em;color:var(--ink-soft)}
.kicker{font-family:var(--ff-hand);font-size:clamp(16px,2vw,21px);color:var(--ink-soft);letter-spacing:.1em;margin-bottom:.8em}
.light{color:#fff}

.h-info{font-family:var(--ff-hand);font-weight:600;font-size:clamp(26px,3.6vw,40px);line-height:1.5;letter-spacing:.08em}
.h-info small{display:block;font-family:var(--ff-en);font-weight:300;font-size:13px;letter-spacing:.35em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7em}
.h-info.light{color:#fff}
.h-info.light small{color:rgba(255,255,255,.72)}

/* ===== スクロールでふわっと表示 ===== */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.1s var(--ease) var(--d,0s)}
html.js .reveal.is-in{opacity:1;transform:none}

/* ===== ヘッダー ===== */
.site-header{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px var(--gutter);padding-top:max(12px,env(safe-area-inset-top));
  color:#fff;
  /* いちばん上から帯を敷く。うしろが星や流れ星でも、名前とボタンがはっきり読めるように */
  background:rgba(9,14,42,.55);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
  box-shadow:0 1px 0 rgba(255,255,255,.1);
  transition:background-color .5s,color .5s,box-shadow .5s,opacity .6s,transform .6s var(--ease);
}
.site-header.is-scrolled{background:rgba(9,14,42,.74)}
.site-header.is-hidden{opacity:0;transform:translateY(-100%);pointer-events:none}
.brand{display:flex;align-items:center;gap:.45em;text-decoration:none;line-height:1}
.brand-identity{display:flex;align-items:center;gap:.45em;white-space:nowrap}
.brand-area{margin-left:.6em;font-family:var(--ff-hand);font-weight:400;font-size:12px;line-height:1.6;letter-spacing:.04em}
.brand-mark{width:24px;height:24px;flex-shrink:0;object-fit:contain}
.brand-sub{font-family:var(--ff-en);font-size:13px;letter-spacing:.14em;padding-top:3px}
.brand-name{font-family:var(--ff-hand);font-weight:600;font-size:22px;letter-spacing:.08em}
.header-cta{
  font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;text-decoration:none;
  padding:.75em 1.35em;border-radius:999px;background:#fff;color:var(--ink);
  box-shadow:0 6px 18px rgba(30,60,110,.15);transition:transform .2s var(--ease),box-shadow .2s;
}
.header-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(30,60,110,.22)}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.header-cta.line{background:linear-gradient(135deg,#ffd35c,#ffb46b);color:#3a2a10;box-shadow:0 6px 18px rgba(255,180,90,.35)}
.header-cta.line:hover{box-shadow:0 10px 22px rgba(255,180,90,.45)}
@media (max-width:480px){
  .site-header{gap:8px;padding-inline:14px}
  .brand{display:grid;grid-template-columns:24px minmax(0,1fr);gap:3px 8px;min-width:0;flex:1}
  .brand-area{grid-column:1/-1;margin-left:0;font-size:10.5px;letter-spacing:0;line-height:1.6}
  .brand-sub{display:none}
  .header-cta{padding:.78em 1.05em;font-size:12px}
  .header-actions{gap:6px}
}

/* ===== 仮置き（要確認）===== */
.tbd{color:var(--tbd);font-weight:700}
.tbd-note{font-size:13px;line-height:1.8;color:var(--ink-soft);margin-top:1.2em}
.tbd-note.light{color:rgba(255,255,255,.72)}

/* 写真の枠（あとで実際の写真に差し替える） */
.photos{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(16px,3vw,32px);margin-top:clamp(44px,6vw,72px)}
.ph{width:min(300px,78vw);background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:10px 10px 14px;border-radius:6px;box-shadow:0 14px 34px rgba(40,60,100,.14)}
.photos.three .ph{width:min(262px,78vw)}
.ph-tilt-l{rotate:-2.5deg}
.ph-tilt-r{rotate:2deg}
.ph-box{
  aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;
  border:2px dashed #c8d3e3;border-radius:4px;color:#7d8aa3;font-size:12.5px;line-height:1.6;
  background:repeating-linear-gradient(45deg,#f6f9fd 0 10px,#fff 10px 20px);
}
.ph-box svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round}
/* 実際の写真が入った枠：点線とスキマ模様を消して、写真そのものの形で見せる */
.ph-box.filled{display:block;aspect-ratio:auto;padding:0;border:0;background:#e9eef6;overflow:hidden}
.ph-box.filled img{width:100%;height:auto;display:block;border-radius:3px}
.g .ph-box.filled img{height:100%;object-fit:cover}
@media (max-width:640px){
  .photos{gap:14px}
  .ph,.photos.three .ph{width:calc(50% - 7px);padding:6px 6px 9px}
  .ph-box{padding:8px;font-size:10.5px;gap:4px}
  .ph-box svg{width:24px;height:24px}
}

/* 要所要所に、写真をちょこっと散らす（まとめて1か所ではなく、ページのあちこちに）
   ひとつの並びには、縦長なら縦長だけ・横長なら横長だけを置く。
   向きが混ざると高さをそろえられず、どれも小さくしか出せないため */
.scatter{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:clamp(14px,2.6vw,34px);margin-top:clamp(38px,5vw,66px)}
.scatter .ph{width:min(236px,43vw)}
.scatter .ph:nth-child(odd){rotate:-2.6deg;translate:0 8px}
.scatter .ph:nth-child(even){rotate:2.2deg;translate:0 -10px}
/* 横長が並ぶところ：幅を広げても縦に伸びないので、大きめに出せる */
.scatter.wide .ph{width:min(312px,46vw)}
/* 縦長が並ぶところ：幅を広げるとぐっと縦に伸びるので、少しだけ大きく */
.scatter.tall .ph{width:min(254px,43vw)}
/* スマホでも2枚ずつ横に並べる（1枚ずつ縦に積むと「散らした感じ」が出ないため） */
@media (max-width:640px){
  .scatter{gap:10px}
  .scatter .ph{width:calc(50% - 5px)}
  .scatter.tall .ph{width:calc(50% - 5px)}
  /* 横長だけは半分にすると小さくなりすぎるので、1枚ずつ大きく見せる */
  .scatter.wide{gap:16px}
  .scatter.wide .ph{width:min(100%,420px)}
  .scatter.wide .ph:nth-child(odd){translate:0 0}
  .scatter.wide .ph:nth-child(even){translate:0 0}
}

/* ===== ボタン ===== */
.btn-cta{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  margin-top:1.1em;padding:1.05em 2.4em;border-radius:999px;
  background:linear-gradient(135deg,#ffd35c,#ffb46b);color:#3a2a10;
  font-weight:700;font-size:clamp(16px,1.9vw,19px);letter-spacing:.08em;text-decoration:none;
  box-shadow:0 12px 30px rgba(255,180,90,.35);transition:transform .2s var(--ease),box-shadow .2s;
}
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(255,180,90,.45)}
.btn-cta::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  transform:translateX(-120%);animation:shine 4s ease-in-out 1.2s infinite;
}
@keyframes shine{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* ===== 動きを減らす設定の人には静かに表示 ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}