/* ===== クロスタ — ベースCSS（全ページ共通） ===== */
@import url('/shared/variables.css');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=DM+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.9;
}

/* ===== SITE HEADER ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(250,251,254,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--card-border);
  padding:0.7rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
}
.site-header-inner{
  max-width:760px;margin:0 auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;
}
.site-logo{
  font-family:var(--font-accent);
  font-size:1.1rem;font-weight:800;
  color:var(--blue-deep);
  text-decoration:none;
  letter-spacing:0.02em;
}
.site-logo span{color:var(--gold)}
.site-nav{display:flex;align-items:center;gap:0.6rem}
.site-nav a{
  font-size:0.82rem;font-weight:700;
  color:var(--text-sub);
  text-decoration:none;
  transition:color 0.2s;
}
.site-nav a:hover{color:var(--blue)}
.site-nav-line{
  background:var(--line-green) !important;
  color:#fff !important;
  padding:0.35rem 1rem;
  border-radius:100px;
  font-size:0.8rem !important;
}
.site-nav-line:hover{background:var(--line-green-hover) !important}
.site-nav-audio{
  display:inline-flex;align-items:center;gap:0.3rem;
  background:var(--bg-blue);
  color:var(--blue);
  font-family:var(--font-body);
  font-size:0.72rem;font-weight:700;
  padding:0.35rem 0.8rem;
  border-radius:100px;
  border:1px solid var(--blue-light);
  cursor:pointer;
  transition:all 0.2s;
}
.site-nav-audio:hover{background:var(--blue);color:#fff}
.site-nav-audio.is-playing{
  background:var(--blue);color:#fff;
  animation:pulse-btn 1.5s infinite;
}
@keyframes pulse-btn{
  0%,100%{box-shadow:0 0 0 0 rgba(74,127,229,0.3)}
  50%{box-shadow:0 0 0 6px rgba(74,127,229,0)}
}

/* ===== HEADER MOBILE ===== */
@media(max-width:600px){
  .site-header{padding:0.5rem 0.8rem}
  .site-logo{font-size:0.95rem;white-space:nowrap}
  .site-nav{gap:0.35rem}
  .site-nav-audio{
    font-size:0.65rem;
    padding:0.25rem 0.55rem;
  }
  .site-nav-audio [data-audio-label]{display:none}
  .site-nav a{font-size:0.72rem}
  .site-nav-line{
    padding:0.25rem 0.6rem;
    font-size:0.7rem !important;
  }
}

/* ===== SITE FOOTER ===== */
.site-footer{
  text-align:center;
  padding:2rem;
  font-size:0.72rem;
  color:var(--text-light);
  border-top:1px solid var(--card-border);
}
.site-footer-links{margin-bottom:0.5rem}
.site-footer-links a{
  color:var(--text-light);
  font-size:0.72rem;
  margin:0 0.5rem;
  text-decoration:none;
  transition:color 0.2s;
}
.site-footer-links a:hover{color:var(--blue)}
.site-footer-blog{
  color:var(--blue);
  font-size:0.8rem;
  font-weight:700;
  text-decoration:none;
  display:block;
  margin-bottom:0.8rem;
}
.site-footer-blog:hover{color:var(--blue-deep)}

/* ===== FADE IN ===== */
.fade-in{
  opacity:0;transform:translateY(16px);
  transition:opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ===== COMMON SECTION ===== */
.container{max-width:760px;margin:0 auto}