/* =========================================================
   熊本国際日本語学校  |  Global Stylesheet  (v2025-07-31-rev2-fixed)
   ========================================================= */

/* ---------- Reset & Base ---------- */
*{margin:0;padding:0;box-sizing:border-box;font-family:"Noto Sans JP",sans-serif;}
:root{
  --c-primary:#94232F;
  --c-secondary:#64B5F6;
  --c-accent:#F9F9F9;
  --c-bg:#ffffff;
  --c-text:#263238;
  --radius:8px;
  --shadow:0 3px 6px rgba(0,0,0,.12);
  --c-notice:#64B5F6;
  --c-report:#4CAF50;
  --c-important:#D32F2F;
  --c-other:#9E9E9E;
}
body{background:var(--c-bg);color:var(--c-text);line-height:1.7;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

/* Skip link */
.skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{position:static;width:auto;height:auto;margin:1rem;z-index:1000;background:#fff;padding:.3rem .6rem;border:2px dashed var(--c-primary);}

/* ---------- Header ---------- */
header{background:#fff;color:var(--c-text);box-shadow:0 2px 4px rgba(0,0,0,.05);}
.topbar{display:flex;justify-content:center;align-items:center;position:relative;padding:.75rem 1.5rem;}

/* ★ 修正：ロゴは比率維持。高さだけ上限を設ける */
.logo img{
  height:auto;
  max-height:150px;   /* ← デスクトップ上限 */
  width:auto;
  object-fit:contain; /* 万一 width が強制されても比率保持 */
}

.burger{position:fixed;top:1rem;right:1rem;transform:none;background:none;border:none;font-size:28px;color:var(--c-text);z-index:10000;cursor:pointer;}
@media(max-width:900px){.burger{display:block;}}
.desktop-nav{background:#fff;border-top:1px solid #eee;}
.desktop-nav ul{max-width:1100px;margin:0 auto;display:flex;list-style:none;gap:1.5rem;padding:.4rem 1rem;justify-content:center;}
.desktop-nav a{padding:.6rem .2rem;transition:color .2s;}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--c-primary);}
.desktop-nav.open{display:block;}
.burger.hidden{display:none;}   /* ← どこでも OK。既存 .burger の近くに置く */

/* ---------- Hero ---------- */
.hero{margin:0;padding:0;border-radius:0;}
.hero-photo{width:100%;height:calc(100vh - 120px);position:relative;background:url('../img/hero-lake.jpg') center/cover no-repeat;display:flex;align-items:center;justify-content:center;text-align:center;}
.hero-photo::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.35);}
.hero-inner{position:relative;z-index:2;max-width:860px;color:#fff;padding:0 1rem;}
.hero-icon{font-size:40px;display:inline-block;margin-bottom:1rem;}
.hero-photo h2{font-size:2.8rem;font-weight:700;line-height:1.3;margin-bottom:1rem;}
.hero-photo p{font-size:1.1rem;margin-bottom:2rem;}
.btn-primary-light{background:#fff;color:var(--c-text);border-radius:var(--radius);padding:.9rem 1.8rem;display:inline-block;font-weight:600;box-shadow:var(--shadow);transition:background .2s,color .2s;}
.btn-primary-light:hover{background:var(--c-secondary);color:#fff;}
.arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:40px;color:#fff;opacity:.8;cursor:pointer;user-select:none;z-index:2;}
.arrow.left{left:1rem;} .arrow.right{right:1rem;}

/* ---------- Quick Links ---------- */
.quick-links{max-width:1100px;margin:3rem auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;padding:0 1rem;}
.quick-links a{background:#fff;border:1px solid #dbe7d6;padding:1.5rem;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);transition:transform .2s;}
.quick-links a:hover{transform:translateY(-4px);}

/* ---------- Generic Sections ---------- */
.section-pad{padding:3rem 0;}
.bg-light{background:#f9f9f9;}
section:not(.hero){max-width:1100px;margin:3rem auto;padding:0 1rem;}
section:not(.hero) h2{font-size:1.6rem;margin-bottom:1rem;color:var(--c-primary);border-left:4px solid var(--c-primary);padding-left:.6rem;}

/* ---------- Buttons ---------- */
.btn-secondary{display:inline-block;border:2px solid var(--c-primary);color:var(--c-primary);padding:.7rem 1.6rem;border-radius:var(--radius);font-weight:600;transition:background .2s,color .2s;}
.btn-secondary:hover{background:var(--c-primary);color:#fff;}
.btn-primary{background:var(--c-primary);color:#fff;border-radius:var(--radius);padding:.9rem 1.8rem;display:inline-block;font-weight:600;box-shadow:var(--shadow);transition:background .2s;}
.btn-primary:hover{background:color-mix(in srgb,var(--c-primary) 80%,black 10%);}

/* ---------- Latest News ---------- */
.news-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:1.5rem;padding:0;list-style:none;}
.news-card{background:#fff;border-left:4px solid var(--c-primary);padding:1.4rem 1.6rem;border-radius:var(--radius);box-shadow:var(--shadow);height:100%;display:flex;flex-direction:column;gap:.95rem;transition:transform .2s,box-shadow .2s;}
.news-card:hover{transform:translateY(-4px);box-shadow:0 6px 12px rgba(0,0,0,.12);}
.news-card time{font-size:.9rem;font-weight:500;color:#607d8b;}
.news-card h3{font-size:1.05rem;font-weight:700;line-height:1.55;}
.news-card h3 a{color:inherit;}
.tag{display:block;width:100%;padding:.4rem 1rem;font-size:.9rem;font-weight:700;border-radius:9999px;color:#fff;letter-spacing:.04em;}
.tag.notice{background:var(--c-notice);} .tag.report{background:var(--c-report);} .tag.important{background:var(--c-important);} .tag.other{background:var(--c-other);}
#news .center{text-align:center;}

/* ---------- Blog Cards ---------- */
.blog-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .2s;}
.card:hover{transform:translateY(-4px);}
.card img{aspect-ratio:16/9;object-fit:cover;width:100%;}
.card h3{font-size:1.1rem;font-weight:600;padding:1rem 1rem .25rem;}
.card time{font-size:.85rem;color:#607d8b;padding:0 1rem;}
.card p{padding:0 1rem 1rem;}

/* ---------- CTA ---------- */
.cta{background:var(--c-accent);text-align:center;color:#fff;}
.cta h2{font-size:1.8rem;margin-bottom:1rem;}
.cta p{margin-bottom:1.5rem;}

/* ---------- Footer ---------- */
footer{background:color-mix(in srgb,var(--c-primary) 60%,black 10%);color:#fff;text-align:center;padding:1rem;margin-top:4rem;}
.footer-inner{max-width:1100px;margin:0 auto;font-size:.9rem;}

/* ---------- Responsive (補足) ---------- */
@media(max-width:900px){.hero-photo h2{font-size:2.1rem;}}
@media(max-width:600px){
  .hero-photo{height:70vh;}
  .logo img{max-height:72px;}  /* ★ モバイル時は高さ上限を縮小 */
}

/* ---------- Link Colors ---------- */
:root{
  --c-link:#0066cc;
  --c-link-h:#004799;
}
a{color:var(--c-link);}
a:hover,a:focus{color:var(--c-link-h);}

/* ===== 900px 以下：右ドロワー ===== */
@media (max-width:900px){
  #global-nav{
    position:fixed; top:0; right:0;
    width:75%; max-width:280px; height:100vh;
    padding:4.5rem 1rem 1rem;
    background:#fff; box-shadow:-2px 0 6px rgba(0,0,0,.15);
    overflow-y:auto; z-index:9999;
    transform:translateX(100%);
    transition:transform .3s ease;
  }
  #global-nav.open{transform:translateX(0);}
  #global-nav ul{flex-direction:column; gap:0;}
  #global-nav li{border-bottom:1px solid #eee;}
  #global-nav a{display:block; padding:1rem 1.2rem;}

  .close-nav{display:block; position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:28px; cursor:pointer;}
  .burger{right:1rem; left:auto; display:block;}
}
@media (min-width:901px){
  .close-nav{display:none;}
  .burger{display:none;}
}

/* 画像が無いカード用 */
.no-img{
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:16/9;
  background:#f3f3f3; color:#666;
  font-size:.9rem; font-weight:600;
}