*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#fff9f0;color:#4a3a2a;font-family:"Noto Sans TC","M PLUS Rounded 1c",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
a{color:inherit;text-decoration:none}

:root{
  --accent-pink:#ff8c61;
  --accent-cyan:#ffd680;
  --muted:rgba(74,58,42,0.65);
  --card-bg:rgba(255,250,240,0.7);
  --glass:rgba(255,250,240,0.8);
}

/* Header */
.header {
  position:fixed; top:0; left:0; right:0;
  height:76px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(255,250,240,0.95), rgba(255,245,230,0.95));
  border-bottom:1px solid rgba(74,58,42,0.1);
  z-index:1000;
}
.header .wrap {
  width:100%; max-width:1200px; padding:12px 24px; display:flex; align-items:center; justify-content:space-between;
}

/* Logo (badge + title) */
.brand { display:flex; align-items:center; gap:14px; }
.logo-badge {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-cyan));
  box-shadow: 0 6px 18px rgba(255,200,180,0.3), inset 0 -4px 12px rgba(0,0,0,0.1);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.logo-badge .logo-img { width: 100%; height: 100%; object-fit:contain; display:block; margin:auto; }
.logo-badge::after{
  content:""; position:absolute; top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  transform:skewX(-18deg);
  animation:badge-shine 2.6s ease-in-out infinite;
}
@keyframes badge-shine {0%{left:-120%}50%{left:140%}100%{left:140%} }

.site-title { line-height:1; }
.site-title .jp-sub { display:block; font-family:"Noto Sans JP","M PLUS Rounded 1c"; color:var(--accent-pink); font-weight:800; font-size:14px; }
.site-title .jp { display:block; font-weight:900; font-size:20px; color:#4a3a2a; text-shadow:0 4px 12px rgba(0,0,0,0.1); }


/* Footer */
.footer { margin-top:40px; padding:28px 20px; border-top:1px solid rgba(74,58,42,0.1); color:var(--muted); font-weight:800; }
.footer-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:left; }
.footer-columns h4 { font-size:14px; color:#4a3a2a; margin-bottom:6px; }
.footer-columns ul { list-style:none; padding-left:0; }
.footer-columns ul li { margin-bottom:4px; }
.footer-bottom { margin-top:24px; text-align:center; font-size:14px; }

/* RWD */
@media(max-width:720px){
  .blocks{grid-template-columns:1fr}
  .footer-columns{grid-template-columns:1fr; gap:16px}
  .header .wrap{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 16px;}
  .top-nav{width:100%;justify-content:flex-start;flex-wrap:wrap;}
}

/* Footer */
.footer { margin-top:40px; padding:28px 20px; border-top:1px solid rgba(74,58,42,0.1); color:var(--muted); font-weight:800; }
.footer-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:left; }
.footer-columns h4 { font-size:14px; color:#4a3a2a; margin-bottom:6px; }
.footer-columns ul { list-style:none; padding-left:0; }
.footer-columns ul li { margin-bottom:4px; }
.footer-bottom { margin-top:24px; text-align:center; font-size:14px; }

/* RWD */
@media(max-width:720px){
  .blocks{grid-template-columns:1fr}
  .footer-columns{grid-template-columns:1fr; gap:16px}
  .header .wrap{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 16px;}
  .top-nav{width:100%;justify-content:flex-start;flex-wrap:wrap;}
}

/* mobile */
@media (max-width:720px){
  .header {
    height: auto;
    padding: 8px 0;
  }
  .typing { min-width: 15em; border-right: none !important; animation: none !important;}
  .header .wrap {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
  }
  .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
    padding: 0 12px;
  }
  .brand .logo-badge {
    width: 54px;
    height: 54px;
  }
  .brand .site-title .jp { font-size: 13px; }
  .brand .site-title .en { font-size: 17px; }

  .blocks { grid-template-columns: 1fr; }
  .muri h1 { font-size: 26px; }
}