/* ============================================================
   Blue spirits media v2 — ここは、心が凪になる場所。
   深い海の青 × 曇り空の白
   ============================================================ */
:root{
  --deep:#0A2540;      /* 深い海の青 */
  --sea:#1B4B7A;
  --mist:#F5F8FA;      /* 曇り空の白 */
  --light-blue:#7FB8D9;/* 朝焼けの淡い水色 */
  --pale:#BFE0F5;
  --ink:#12365C;
  --serif:'Zen Kaku Gothic New',sans-serif;
  --sans:'Noto Sans JP',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--mist);
  line-height:2.1;
  letter-spacing:.04em;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
.label{
  font-size:.68rem;letter-spacing:.45em;text-indent:.45em;
  color:var(--light-blue);font-weight:500;margin-bottom:18px;
}
.section-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.3rem,3.4vw,1.8rem);line-height:2;margin-bottom:56px;
}

/* 浮かび上がり（ゆっくり） */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 2s ease,transform 2s ease}
.reveal.vis{opacity:1;transform:none}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--mist);overflow:hidden;
}
.hero-canvas{position:absolute;inset:0;background:linear-gradient(180deg,#0A2540 0%,#12365C 55%,#1B4B7A 100%)}
.wave{
  position:absolute;left:-25%;width:150%;height:38%;
  border-radius:45% 55% 0 0/60% 40% 0 0;
  opacity:.5;
}
.wave-a{bottom:-6%;background:#0E2E4E;animation:waveMove 16s ease-in-out infinite alternate}
.wave-b{bottom:-10%;background:#16406B;opacity:.6;animation:waveMove 22s ease-in-out infinite alternate-reverse}
.wave-c{bottom:-14%;background:#1B4B7A;opacity:.75;animation:waveMove 28s ease-in-out infinite alternate}
@keyframes waveMove{
  from{transform:translateX(-3%) rotate(.4deg)}
  to{transform:translateX(3%) rotate(-.4deg)}
}
.light-shaft{
  position:absolute;top:-20%;left:50%;transform:translateX(-50%);
  width:70%;height:80%;
  background:radial-gradient(50% 50% at 50% 30%, rgba(127,184,217,.28), transparent 70%);
  animation:shaftBreath 12s ease-in-out infinite alternate;
}
@keyframes shaftBreath{from{opacity:.5}to{opacity:.95}}
.hero-inner{position:relative;z-index:2;padding:0 24px}
.hero-eyebrow{
  font-size:.7rem;letter-spacing:.5em;text-indent:.5em;
  opacity:.65;margin-bottom:26px;font-weight:500;
  animation:fadeUp 2.4s ease both .2s;
}
.hero h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.9rem,5.6vw,3.3rem);line-height:2;
  animation:fadeUp 2.4s ease both .6s;
}
.hero-sub{
  margin-top:24px;font-size:.86rem;letter-spacing:.24em;text-indent:.24em;
  opacity:.8;animation:fadeUp 2.4s ease both 1.1s;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- About ---------- */
.about{padding:130px 0 110px;background:var(--mist)}
.about h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.25rem,3.2vw,1.7rem);line-height:2.1;margin-bottom:64px;
}
.about-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.about-num{
  display:block;font-size:.72rem;letter-spacing:.3em;
  color:var(--light-blue);margin-bottom:12px;font-weight:500;
}
.about-item h3{
  font-family:var(--serif);font-weight:500;font-size:1.05rem;
  margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--pale);
}
.about-item p{font-size:.85rem;line-height:2.2;opacity:.8}

/* ---------- Articles ---------- */
.articles{padding:110px 0;background:linear-gradient(180deg,var(--mist),#EAF2F8)}
.sea-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:70px 46px;
}
/* 水面に浮かぶ：上下にゆらゆら */
.float-card{
  display:block;border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 16px 44px rgba(10,37,64,.10);
  transition:box-shadow .9s ease;
  transform-style:preserve-3d;will-change:transform;
}
.float-card:hover{box-shadow:0 26px 60px rgba(10,37,64,.17)}
.f1{animation:bob 9s ease-in-out infinite alternate}
.f2{animation:bob 11s ease-in-out infinite alternate-reverse .8s}
.f3{animation:bob 10s ease-in-out infinite alternate 1.6s}
.f4{animation:bob 12s ease-in-out infinite alternate-reverse .4s}
.f5{animation:bob 9.5s ease-in-out infinite alternate 1.2s}
.f6{animation:bob 11.5s ease-in-out infinite alternate-reverse 2s}
@keyframes bob{from{translate:0 -5px}to{translate:0 7px}}
.fc-img svg{display:block;width:100%;height:auto}
.float-card .chip{
  display:inline-block;margin:22px 26px 0;
  font-size:.66rem;letter-spacing:.28em;text-indent:.28em;
  color:var(--sea);background:#EAF2F8;border-radius:999px;
  padding:5px 16px;font-weight:500;
}
.float-card h3{
  font-family:var(--serif);font-weight:500;font-size:1.02rem;
  line-height:1.9;margin:12px 26px 6px;
}
.float-card p{font-size:.82rem;line-height:2;margin:0 26px 26px;opacity:.75}

/* ---------- Categories ---------- */
.categories{padding:120px 0;background:var(--mist)}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.cat-card{
  background:#fff;border-radius:18px;padding:44px 34px;
  box-shadow:0 12px 36px rgba(10,37,64,.08);
  transition:transform .8s ease,box-shadow .8s ease;
}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 22px 52px rgba(10,37,64,.14)}
.cat-jp{
  display:block;font-family:var(--serif);font-weight:500;
  font-size:1.15rem;margin-bottom:4px;
}
.cat-en{
  display:block;font-size:.62rem;letter-spacing:.4em;
  color:var(--light-blue);margin-bottom:18px;font-weight:500;
}
.cat-card p{font-size:.83rem;line-height:2.1;opacity:.78}

/* ---------- Newsletter ---------- */
.newsletter{
  padding:130px 24px;text-align:center;color:var(--mist);
  background:
    radial-gradient(70% 90% at 50% 110%, rgba(127,184,217,.35), transparent 65%),
    linear-gradient(180deg,#12365C,#0A2540);
}
.nl-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.3rem,3.6vw,1.8rem);margin-bottom:14px;
}
.nl-sub{font-size:.86rem;opacity:.85;margin-bottom:40px}
.nl-form{display:flex;gap:12px;max-width:480px;margin:0 auto}
.nl-form input{
  flex:1;border:none;border-radius:999px;padding:15px 24px;
  font-size:.88rem;font-family:var(--sans);letter-spacing:.04em;
  background:rgba(245,248,250,.96);color:var(--deep);outline:none;
}
.nl-form button{
  border:none;border-radius:999px;padding:15px 32px;cursor:pointer;
  background:var(--light-blue);color:#fff;
  font-size:.84rem;letter-spacing:.14em;font-family:var(--sans);font-weight:500;
  transition:background .6s;
}
.nl-form button:hover{background:#9CCBE6}
.nl-note{margin-top:20px;font-size:.72rem;letter-spacing:.12em;opacity:.6}

/* ---------- Footer ---------- */
.footer{text-align:center;padding:90px 24px 60px;background:var(--mist)}
.f-logo{font-family:var(--serif);font-size:1.1rem;letter-spacing:.22em;margin-bottom:20px}
.f-nav{display:flex;gap:36px;justify-content:center;margin-bottom:28px}
.f-nav a{font-size:.72rem;letter-spacing:.2em;opacity:.7;transition:color .5s,opacity .5s}
.f-nav a:hover{color:var(--light-blue);opacity:1}
.f-copy{font-size:.66rem;letter-spacing:.14em;opacity:.55}

/* ---------- レスポンシブ ---------- */
@media (max-width:760px){
  .about{padding:96px 0 80px}
  .about-cols{grid-template-columns:1fr;gap:36px}
  .articles{padding:84px 0}
  .categories{padding:88px 0}
  .cat-grid{grid-template-columns:1fr;gap:24px}
  .newsletter{padding:96px 20px}
  .nl-form{flex-direction:column}
  .nl-form input,.nl-form button{width:100%}
  .wave{height:30%}
}