/* =========================================================
   Kogumo 共通スタイル
   index.html / about.html / terms.html で共有しています。
   色や余白を変えたいときは、まずこのファイルの :root を確認してください。
   ========================================================= */

/* =========================================================
   1. カラー・サイズなどの設定
   ========================================================= */
:root{
  --white:        #ffffff;
  --sky-pale:     #eaf4fd;   /* 背景の淡い水色 */
  --sky-light:    #d6ebfa;
  --blue-pastel:  #a9d4f2;   /* パステルブルー */
  --blue-main:    #6fabdc;   /* メインのスカイブルー（リンク・枠） */
  --blue-deep:    #4d84b4;   /* 見出し文字 */
  --gray-light:   #dfe8ef;   /* 罫線 */
  --text:         #5d7d95;   /* 本文 */
  --text-soft:    #8aa6b9;   /* 補助テキスト */

  --glass-bg:     rgba(255,255,255,.42);
  --glass-line:   rgba(255,255,255,.85);
  --glass-glow:   rgba(150,205,245,.35);

  --radius-lg: 46px;
  --radius-md: 26px;
  --radius-sm: 14px;

  --ease: cubic-bezier(.22,.68,.31,1);
}

/* =========================================================
   2. ベース
   ========================================================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 78% 18%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 8% 82%, rgba(214,235,250,.9), rgba(255,255,255,0) 65%),
    linear-gradient(170deg,#f4fbff 0%,#e8f4fd 42%,#f7fcff 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* 背景に浮かぶ、ぼんやりした光の玉 */
.aura{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.aura span{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.55;
  background:radial-gradient(circle at 35% 35%, #ffffff, rgba(169,212,242,.5) 55%, rgba(169,212,242,0) 72%);
  animation:drift 26s var(--ease) infinite alternate;
}
.aura span:nth-child(1){ width:520px; height:520px; top:-160px; left:-120px; }
.aura span:nth-child(2){ width:420px; height:420px; bottom:-140px; left:34%; animation-duration:34s; }
.aura span:nth-child(3){ width:600px; height:600px; top:6%; right:-200px; animation-duration:30s; }
@keyframes drift{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(0,-38px,0);} }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
:focus-visible{ outline:2px solid var(--blue-main); outline-offset:3px; border-radius:6px; }

@keyframes rise{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none;} }

/* =========================================================
   3. ヘッダー
   ========================================================= */
.header{
  position:relative; z-index:5;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:32px;
  padding:14px clamp(20px,4vw,56px);
}
.brand{ display:flex; align-items:center; gap:10px; justify-self:start; }
.brand svg{ width:30px; height:30px; }
.brand span{
  font-family:"Cormorant Garamond",serif;
  font-size:30px; letter-spacing:.04em; color:var(--blue-deep);
}
.nav{ display:flex; gap:clamp(16px,3vw,44px); }
.nav a{
  position:relative; font-size:13px; letter-spacing:.14em;
  color:var(--text); padding:6px 2px; transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--blue-main); transform:scaleX(0); transform-origin:center;
  transition:transform .35s var(--ease);
}
.nav a:hover{ color:var(--blue-main); }
.nav a:hover::after,
.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--blue-deep); }

/* =========================================================
   4. フッター
   ========================================================= */
.footer{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; gap:10px 28px;
  align-items:center; justify-content:center;
  padding:22px clamp(20px,4vw,56px) 28px;
  border-top:1px solid var(--gray-light);
  font-size:12px; letter-spacing:.08em; color:var(--text-soft);
}
.footer nav{ display:flex; gap:22px; }
.footer a{ transition:color .3s var(--ease); }
.footer a:hover{ color:var(--blue-main); }
.sns{ display:flex; gap:14px; }
.sns a{
  width:32px; height:32px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.7); border:1px solid var(--gray-light);
  color:var(--blue-main);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sns a:hover{ transform:translateY(-3px); box-shadow:0 8px 18px -8px rgba(90,160,215,.7); }
.sns svg{ width:15px; height:15px; }

/* =========================================================
   5. 汎用の「ガラスカード」（ABOUT / 利用規約 ページで使用）
   ========================================================= */
.glass-card{
  position:relative;
  padding:clamp(28px,4vw,52px);
  border-radius:var(--radius-lg);
  background:linear-gradient(150deg, rgba(255,255,255,.72), rgba(255,255,255,.34) 46%, rgba(214,238,252,.5));
  border:1px solid var(--glass-line);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:
    0 30px 70px -30px rgba(88,150,200,.45),
    0 0 0 10px rgba(255,255,255,.35),
    inset 0 1px 0 rgba(255,255,255,.95);
  animation:rise .9s var(--ease) both;
}

.page-stage{
  position:relative; z-index:2; flex:1;
  width:100%; max-width:880px; margin:0 auto;
  padding:24px clamp(20px,4vw,56px) 56px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
}