@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=Bebas+Neue&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #FFFFFF; color: #111111; font-family: 'Noto Sans JP', sans-serif; overflow-x: hidden; }
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: #FFFFFF; }
::-webkit-scrollbar-thumb { background: #AAAAAA; border-radius: 2px; }

@keyframes fadeUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideLeft { from { opacity:0; transform:translateX(-60px); } to { opacity:1; transform:translateX(0); } }
@keyframes glowText { 0%,100% { text-shadow:0 0 20px rgba(27,94,191,0.2); } 50% { text-shadow:0 0 50px rgba(27,94,191,0.5); } }
@keyframes pulseBg { 0%,100% { opacity:0.5; transform:scale(1); } 50% { opacity:0.9; transform:scale(1.05); } }
@keyframes dotBlink { 0%,100% { opacity:1; } 50% { opacity:0.2; } }

.app-shell { background:#FFFFFF; color:#111111; min-height:100vh; overflow-x:hidden; }
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 64px; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-dot { width:8px; height:8px; border-radius:50%; background:#1B5EBF; box-shadow:0 0 12px #1B5EBF; animation:dotBlink 2s ease-in-out infinite; }
.brand-name { font-size:14px; letter-spacing:0.08em; font-weight:700; color:#111111; white-space:nowrap; }
.nav-links { display:flex; gap:2px; }
.admin-area { flex-shrink:0; }
.status-badge { font-size:12px; color:#1B5EBF; border:1px solid rgba(27,94,191,0.3); padding:4px 12px; border-radius:4px; white-space:nowrap; }

.nav-btn { background:transparent; border:1px solid transparent; border-radius:4px; padding:6px 14px; color:#666; font-size:13px; font-weight:500; letter-spacing:0.04em; cursor:pointer; transition:all 0.2s; }
.nav-btn:hover, .nav-btn.active { color:#1B5EBF; border-color:rgba(27,94,191,0.35); background:rgba(27,94,191,0.06); }
.mobile-bottom-nav { display:none; }

.card { background:linear-gradient(135deg,rgba(240,242,245,0.9),rgba(230,232,236,0.97)); border:1px solid rgba(100,110,120,0.18); border-radius:12px; transition:all 0.3s; backdrop-filter:blur(10px); }
.card:hover { border-color:rgba(27,94,191,0.4); box-shadow:0 0 28px rgba(27,94,191,0.1), 0 20px 40px rgba(0,0,0,0.1); transform:translateY(-5px); }

.btn-primary { background:linear-gradient(135deg,#1B5EBF,#1048A0); color:#fff; border:1px solid rgba(27,94,191,0.5); border-radius:8px; padding:11px 26px; font-size:14px; font-weight:700; cursor:pointer; transition:all 0.2s; letter-spacing:0.04em; }
.btn-primary:hover { box-shadow:0 4px 24px rgba(27,94,191,0.4); transform:translateY(-2px); border-color:rgba(27,94,191,0.8); }
.btn-primary:disabled { opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-outline { background:transparent; color:#1B5EBF; border:1px solid rgba(27,94,191,0.3); border-radius:8px; padding:8px 18px; font-size:13px; cursor:pointer; transition:all 0.2s; }
.btn-outline:hover { background:rgba(27,94,191,0.06); border-color:rgba(27,94,191,0.6); }
.btn-danger { background:rgba(180,50,50,0.1); color:#FF8080; border:1px solid rgba(180,50,50,0.3); border-radius:8px; padding:8px 18px; font-size:13px; cursor:pointer; transition:all 0.2s; }
.btn-danger:hover { background:rgba(180,50,50,0.2); }

.field { background:rgba(245,246,248,0.95); border:1px solid rgba(27,94,191,0.2); border-radius:8px; padding:10px 14px; color:#111111; font-size:14px; width:100%; outline:none; transition:border-color 0.2s; }
.field:focus { border-color:rgba(27,94,191,0.7); box-shadow:0 0 0 3px rgba(27,94,191,0.1); }

.grid-bg {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size:48px 48px;
}
.section { padding:100px 40px; }
.section-soft { background:linear-gradient(180deg, transparent, rgba(0,0,0,0.03), transparent); }
.section-report-bg { background:linear-gradient(180deg, transparent, rgba(0,0,0,0.03)); }
.section-inner-wide { max-width:1180px; margin:0 auto; }
.section-inner-medium { max-width:880px; margin:0 auto; }
.section-inner-narrow { max-width:860px; margin:0 auto; }
.section-heading { margin-bottom:56px; }
.section-heading.animated { animation:fadeUp 0.7s ease both; }
.section-label { font-size:11px; color:#1B5EBF; letter-spacing:0.4em; font-weight:600; text-transform:uppercase; padding-bottom:0.5em; }
.section-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(44px,6vw,80px); letter-spacing:0.04em; line-height:0.95; color:#111111; }

.hero { min-height:100vh; padding-top:64px; position:relative; overflow:hidden; display:flex; align-items:center; }
.hero-orb-a { position:absolute; width:700px; height:700px; border-radius:50%; background:radial-gradient(circle, rgba(100,110,120,0.06) 0%, transparent 70%); top:-180px; left:-260px; animation:pulseBg 7s ease-in-out infinite; pointer-events:none; }
.hero-orb-b { position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(100,110,120,0.04) 0%, transparent 70%); bottom:-80px; right:-100px; animation:pulseBg 5s ease-in-out infinite 2s; pointer-events:none; }
.hero-line { position:absolute; left:0; width:100%; height:1px; pointer-events:none; }
.hero-inner { max-width:1180px; margin:0 auto; padding:70px 40px; display:flex; align-items:center; justify-content:space-between; gap:60px; width:100%; }
.hero-copy { flex:1; animation:slideLeft 0.9s ease both; }
.candidate-badge { display:inline-block; font-size:11px; letter-spacing:0.38em; color:#1B5EBF; border:1px solid rgba(27,94,191,0.3); padding:6px 18px; border-radius:2px; margin-bottom:28px; font-weight:600; }
.hero-title { line-height:0.88; margin-bottom:6px; }
.hero-title span { font-family:'Bebas Neue', sans-serif; font-size:clamp(62px,10vw,128px); letter-spacing:0.02em; display:block; }
.hero-title-main { color:#111111; }
.hero-title-accent { color:#1B5EBF; text-shadow:0 0 40px rgba(27,94,191,0.25); animation:glowText 4s ease-in-out infinite; }
.hero-name { font-size:20px; font-weight:300; color:#555; letter-spacing:0.18em; margin-bottom:44px; }
.slogan-bar { border-left:3px solid #1B5EBF; padding-left:22px; margin-bottom:48px; }
.slogan-label { font-size:11px; color:#1B5EBF; letter-spacing:0.35em; margin-bottom:10px; font-weight:600; }
.slogan-text { font-size:clamp(15px,2.2vw,21px); font-weight:900; line-height:1.5; color:#1B5EBF; }
.tags { display:flex; gap:10px; flex-wrap:wrap; }
.tag { font-size:12px; color:#444; background:rgba(0,0,0,0.04); border:1px solid rgba(27,94,191,0.18); padding:5px 13px; border-radius:20px; }
.scroll-cue { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:#AAA; font-size:10px; letter-spacing:0.35em; }
.scroll-line { width:1px; height:36px; background:linear-gradient(#A0B0C0, transparent); }

.profile-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:20px; }
.profile-card { padding:28px 24px; }
.profile-icon { font-size:26px; margin-bottom:10px; }
.profile-label { font-size:11px; color:#607080; letter-spacing:0.2em; margin-bottom:6px; }
.profile-value { font-size:15px; font-weight:700; line-height:1.5; }

.timeline { position:relative; padding-left:36px; }
.timeline-line { position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:linear-gradient(#1B5EBF, rgba(27,94,191,0.05)); }
.timeline-item { display:flex; align-items:flex-start; gap:22px; margin-bottom:36px; }
.timeline-dot { width:12px; height:12px; background:#1B5EBF; border-radius:50%; box-shadow:0 0 10px rgba(27,94,191,0.45); flex-shrink:0; margin-top:4px; }
.timeline-year { font-family:'Bebas Neue', sans-serif; font-size:14px; color:#1B5EBF; letter-spacing:0.25em; margin-bottom:4px; }
.timeline-event { font-size:15px; line-height:1.75; color:#222222; }

.pledge-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:24px; }
.pledge-card { padding:36px 28px; position:relative; overflow:hidden; }
.pledge-num { font-family:'Bebas Neue',sans-serif; font-size:64px; color:#2A2A2A; opacity:0.12; line-height:1; transition:opacity 0.3s; display:block; }
.card:hover .pledge-num { opacity:0.5; }
.pledge-icon { font-size:30px; margin:10px 0 16px; }
.pledge-title { font-size:17px; font-weight:900; margin-bottom:12px; color:#111111; }
.pledge-body { font-size:14px; line-height:1.85; color:#555555; }
.pledge-corner { position:absolute; bottom:0; right:0; width:80px; height:80px; background:linear-gradient(135deg, transparent 50%, rgba(27,94,191,0.04) 50%); }

.reports-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; flex-wrap:wrap; gap:16px; }
.empty-state, .loading-state { text-align:center; padding:80px 40px; }
.loading-state { color:#666; }
.empty-state { border:1px dashed rgba(27,94,191,0.25); border-radius:12px; }
.empty-icon { font-size:44px; margin-bottom:16px; }
.empty-main { font-size:15px; color:#555; }
.empty-sub { font-size:13px; color:#888; margin-top:8px; }
.report-list { display:flex; flex-direction:column; gap:20px; }
.report-card { background:rgba(246,247,249,0.95); border:1px solid rgba(110,120,130,0.18); border-radius:10px; padding:28px; transition:all 0.3s; }
.report-card:hover { border-color:rgba(27,94,191,0.4); }
.report-top { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.report-date { font-size:11px; color:#1B5EBF; letter-spacing:0.2em; margin-bottom:6px; }
.report-title { font-size:17px; font-weight:800; }
.report-actions { display:flex; gap:8px; }
.report-body { font-size:14px; line-height:1.9; color:#444444; white-space:pre-wrap; }
.report-img { width:100%; max-height:340px; object-fit:cover; border-radius:8px; margin-top:16px; border:1px solid rgba(140,150,160,0.2); }

.site-footer { border-top:1px solid rgba(0,0,0,0.1); padding:48px 40px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.footer-logo { font-family:'Bebas Neue', sans-serif; font-size:22px; letter-spacing:0.12em; color:#111111; }
.footer-slogan { font-size:14px; color:#555555; }
.footer-school { font-size:12px; color:#888; margin-top:4px; }

.modal-backdrop { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.55); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-card { padding:44px 40px; max-width:400px; width:100%; animation:fadeUp 0.3s ease; }
.modal-card.report-modal { max-width:640px; max-height:92vh; overflow-y:auto; }
.modal-card.delete-modal { padding:40px; max-width:380px; text-align:center; }
.modal-title { font-size:20px; font-weight:900; margin-bottom:6px; }
.modal-help { font-size:13px; color:#666; margin-bottom:28px; }
.modal-form { display:flex; flex-direction:column; gap:18px; }
.form-label { font-size:11px; color:#9AAAB8; letter-spacing:0.15em; display:block; margin-bottom:6px; }
.form-label.primary { color:#1B5EBF; }
.image-picker { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#555555; border:1px dashed rgba(27,94,191,0.35); padding:10px 20px; border-radius:8px; cursor:pointer; background:rgba(240,242,245,0.8); }
.preview-wrap { position:relative; display:inline-block; }
.preview-img { max-width:100%; max-height:200px; border-radius:8px; border:1px solid rgba(150,160,170,0.3); display:block; }
.preview-remove { position:absolute; top:6px; right:6px; background:rgba(0,0,0,0.75); border:none; color:#FF8080; border-radius:4px; padding:3px 8px; font-size:12px; cursor:pointer; }
.error-text { font-size:12px; color:#FF8080; margin-bottom:18px; }
.modal-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:28px; }
.delete-icon { font-size:36px; margin-bottom:16px; }
.delete-title { font-size:18px; font-weight:900; margin-bottom:10px; }
.delete-message { font-size:13px; color:#666; margin-bottom:28px; }
.center-actions { justify-content:center; margin-top:0; }

@media (max-width: 900px) {
  .site-nav { padding:0 18px; }
  .nav-links { display:none; }
  .section { padding:84px 28px; }
  .reports-heading { align-items:flex-start; }
}

@media (max-width: 768px) {
  body { padding-bottom:76px; }
  .app-shell { padding-bottom:8px; }
  .site-nav { height:58px; padding:0 14px; }
  .brand-name { font-size:13px; }
  .admin-area .btn-outline { padding:6px 12px; font-size:12px; }
  .status-badge { padding:4px 9px; font-size:11px; }
  .mobile-bottom-nav {
    position:fixed; left:10px; right:10px; bottom:10px; z-index:1500;
    display:grid; grid-template-columns:repeat(5, 1fr); gap:4px;
    padding:7px; border:1px solid rgba(27,94,191,0.18); border-radius:18px;
    background:rgba(255,255,255,0.94); backdrop-filter:blur(18px); box-shadow:0 10px 30px rgba(0,0,0,0.12);
  }
  .mobile-bottom-nav .nav-btn { padding:8px 2px; font-size:10px; letter-spacing:0; border-radius:12px; }
  .hero { min-height:94vh; padding-top:58px; align-items:center; }
  .hero-inner { padding:54px 22px; flex-direction:column; align-items:center; text-align:center; gap:30px; }
  .candidate-badge { font-size:10px; letter-spacing:0.2em; line-height:1.8; padding:6px 12px; margin-bottom:24px; }
  .hero-title span { font-size:clamp(58px,19vw,92px); }
  .hero-name { font-size:16px; margin-bottom:34px; }
  .slogan-bar { border-left:none; border-top:3px solid #1B5EBF; padding-left:0; padding-top:16px; margin-bottom:34px; }
  .tags { justify-content:center; gap:8px; }
  .tag { font-size:11px; padding:5px 10px; }
  .scroll-cue { bottom:18px; }
  .section { padding:76px 20px; }
  .section-heading { margin-bottom:34px; }
  .section-label { letter-spacing:0.26em; }
  .profile-grid { grid-template-columns:1fr; gap:14px; }
  .profile-card { padding:22px 20px; }
  .timeline { padding-left:28px; }
  .timeline-item { gap:16px; margin-bottom:28px; }
  .pledge-grid { grid-template-columns:1fr; gap:16px; }
  .pledge-card { padding:28px 22px; }
  .reports-heading { margin-bottom:34px; }
  .reports-heading .btn-primary { width:100%; }
  .empty-state, .loading-state { padding:58px 22px; }
  .report-card { padding:22px 18px; }
  .report-actions { width:100%; justify-content:flex-end; }
  .site-footer { padding:38px 20px; }
  .modal-backdrop { align-items:flex-end; padding:12px; }
  .modal-card, .modal-card.report-modal, .modal-card.delete-modal { max-width:none; padding:28px 22px; border-radius:18px; max-height:88vh; }
  .modal-actions { gap:10px; }
  .modal-actions .btn-outline, .modal-actions .btn-primary, .modal-actions .btn-danger { flex:1; padding-left:10px; padding-right:10px; }
}

@media (max-width: 420px) {
  .brand-name { max-width:170px; overflow:hidden; text-overflow:ellipsis; }
  .hero-title span { font-size:clamp(52px,18vw,78px); }
  .section-title { font-size:clamp(40px,14vw,60px); }
  .mobile-bottom-nav { left:6px; right:6px; bottom:6px; }
}