:root{
    --blue:#0D4688;
    --gold:#D9AE31;
    --ink:#222222;
    --gray:#8A8A8A;
    --line:#E7E7E7;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;color:var(--ink);background:#fff;line-height:1.9;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

  header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:10;}
  .header-in{max-width:1080px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;}
  .burger{width:26px;cursor:pointer;}
  .burger span{display:block;height:2px;background:var(--ink);margin:6px 0;}
  .header-logo{height:42px;}
  .header-cta{border:1px solid var(--blue);color:var(--blue);padding:6px 18px;font-size:13px;letter-spacing:.08em;background:#fff;cursor:pointer;}
  nav.topnav{border-top:1px solid var(--line);}
  nav.topnav .wrap{display:flex;justify-content:center;gap:44px;padding-top:10px;padding-bottom:10px;font-size:14px;letter-spacing:.12em;}
  nav.topnav a:hover{color:var(--blue);}

  .hero-logo{display:block;width:min(560px,86%);margin:52px auto 30px;}
  .hero{position:relative;max-width:1180px;margin:0 auto;}
  .hero img.photo{width:100%;height:min(60vw,540px);object-fit:cover;display:block;}
  .hero .catch{position:absolute;top:0;bottom:0;left:7%;display:flex;align-items:center;background:rgba(255,255,255,.55);padding:0 14px;}
  .hero .catch p{writing-mode:vertical-rl;font-size:clamp(20px,4.2vw,34px);letter-spacing:.32em;font-weight:600;}
  .hero-sub{text-align:center;margin:34px auto 0;padding:0 24px;max-width:820px;}
  .hero-sub .lead{font-size:clamp(17px,2.6vw,21px);font-weight:700;letter-spacing:.04em;line-height:1.7;}
  .hero-sub .sub{font-size:14px;color:#555;margin-top:10px;}
  .hero-btns{margin-top:22px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
  .btn{display:inline-block;padding:12px 36px;font-size:14px;letter-spacing:.14em;cursor:pointer;}
  .btn-solid{background:var(--blue);color:#fff;border:1px solid var(--blue);}
  .btn-outline{background:#fff;color:var(--blue);border:1px solid var(--blue);}

  .stats{max-width:1080px;margin:52px auto 0;padding:0 24px;}
  .stats-in{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);}
  .stat{padding:20px 10px;text-align:center;border-right:1px solid var(--line);}
  .stat:last-child{border-right:none;}
  .stat .num{font-size:clamp(22px,3.4vw,32px);font-weight:700;color:var(--blue);letter-spacing:.04em;}
  .stat .num small{font-size:14px;}
  .stat .lbl{font-size:12px;color:var(--gray);letter-spacing:.14em;margin-top:2px;}

  section{padding:76px 0 8px;}
  .sec-head{text-align:center;margin-bottom:40px;}
  .sec-head .line{width:44px;height:3px;background:var(--gold);margin:0 auto 14px;}
  .sec-head h2{font-size:24px;letter-spacing:.22em;font-weight:700;}
  .sec-head .en{font-size:11px;letter-spacing:.3em;color:var(--gray);margin-top:4px;}
  .sec-lead{max-width:760px;margin:-18px auto 36px;text-align:center;font-size:15px;color:#444;}

  .story{max-width:760px;margin:0 auto;font-size:15.5px;}
  .story p{margin-bottom:16px;}
  .story .quote{border-left:3px solid var(--gold);padding:4px 0 4px 18px;font-weight:700;font-size:17px;margin:22px 0;}

  .about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  .about-item{border:1px solid var(--line);padding:28px 24px;}
  .about-item .num{color:var(--gold);font-weight:700;letter-spacing:.2em;font-size:12px;}
  .about-item h3{font-size:17px;margin:8px 0 10px;letter-spacing:.04em;line-height:1.6;}
  .about-item p{font-size:14px;color:#444;}

  .act-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
  .act{border:1px solid var(--line);padding:26px 28px;}
  .act h3{font-size:17px;margin-bottom:8px;}
  .act h3 .tag{font-size:11px;color:#9a7b14;border:1px solid var(--gold);padding:1px 10px;letter-spacing:.1em;margin-left:10px;vertical-align:2px;white-space:nowrap;}
  .act p{font-size:14px;color:#444;}
  .chips{margin-top:26px;text-align:center;}
  .chips .cap{font-size:13px;color:var(--gray);letter-spacing:.1em;margin-bottom:12px;}
  .chip{display:inline-block;border:1px solid #ccc;border-radius:999px;padding:5px 16px;font-size:13px;margin:4px;color:#444;}

  .cards{display:grid;grid-template-columns:1fr 1fr;gap:36px 32px;}
  .card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
  .card .date{font-size:12px;color:var(--gray);margin-top:12px;letter-spacing:.08em;}
  .card .ttl{font-size:16px;margin-top:2px;}
  .past{margin-top:34px;border-top:1px solid var(--line);padding-top:20px;font-size:14px;color:#444;}
  .past .cap{font-size:12px;color:var(--gray);letter-spacing:.14em;margin-bottom:8px;}
  .more{text-align:center;margin-top:36px;}
  .more a{border:1px solid #bbb;padding:10px 40px;font-size:13px;letter-spacing:.16em;display:inline-block;}


  .news-list{border-top:1px solid var(--line);max-width:900px;margin:0 auto;}
  .news-row{display:flex;gap:20px;align-items:baseline;padding:18px 6px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
  .news-row .date{font-size:13px;color:var(--gray);min-width:110px;letter-spacing:.06em;}
  .nchip{font-size:11px;border:1px solid var(--gold);color:#9a7b14;padding:1px 10px;letter-spacing:.1em;white-space:nowrap;}
  .nchip.blue{border-color:var(--blue);color:var(--blue);}
  .news-row .ttl{font-size:15px;}
  .mood{max-width:760px;margin:0 auto;font-size:15.5px;}
  .mood p{margin-bottom:14px;}

  .works{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
  .work img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
  .work h3{font-size:18px;margin-top:14px;}
  .work p{font-size:14px;color:#444;margin-top:4px;}
  .work .price{color:var(--blue);font-weight:700;}
  .portfolio{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .portfolio div{border:1px solid var(--line);text-align:center;padding:16px 8px;font-size:13.5px;}

  .faq{max-width:760px;margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--line);padding:20px 4px;}
  .faq-item:first-child{border-top:1px solid var(--line);}
  .faq-item .q{font-weight:700;font-size:16px;}
  .faq-item .q span{color:var(--blue);margin-right:8px;}
  .faq-item .a{font-size:14.5px;color:#444;margin-top:6px;}
  .faq-item .a span{color:#9a7b14;font-weight:700;margin-right:8px;}

  .cta-band{background:#F7F9FC;margin-top:84px;padding:64px 0;}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto;}
  .step{background:#fff;border:1px solid var(--line);padding:24px;text-align:center;}
  .step .n{color:var(--gold);font-weight:700;letter-spacing:.2em;font-size:12px;}
  .step h3{font-size:16px;margin:8px 0 6px;}
  .step p{font-size:13.5px;color:#444;}

  .sns-btns{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;}
  .sns-btns a{border:1px solid #BDBDBD;padding:16px 0;width:300px;text-align:center;font-size:15px;letter-spacing:.1em;color:#555;background:#fff;}
  .sns-btns a:hover{border-color:var(--blue);color:var(--blue);}

  footer{border-top:1px solid var(--line);margin-top:88px;padding:44px 0 54px;text-align:center;}
  footer img{height:54px;margin-bottom:14px;}
  footer .fname{font-size:15px;letter-spacing:.14em;margin-bottom:8px;}
  footer p{font-size:12px;color:var(--gray);line-height:1.9;}
  footer a{color:var(--blue);}
  .mock-note{max-width:1080px;margin:26px auto 0;padding:0 24px;font-size:11px;color:#aaa;text-align:center;}

  @media(max-width:720px){
    nav.topnav{display:none;}
    .stats-in{grid-template-columns:1fr 1fr;}
    .stat{border-bottom:1px solid var(--line);}
    .about-grid{grid-template-columns:1fr;}
    .act-grid{grid-template-columns:1fr;}
    .cards{grid-template-columns:1fr;}
    .works{grid-template-columns:1fr;}
    .portfolio{grid-template-columns:1fr 1fr;}
    .steps{grid-template-columns:1fr;}
    .hero .catch{left:5%;}
    section{padding:56px 0 4px;}
  }

/* --- GitHub Pages implementation additions --- */
html{scroll-behavior:smooth;}
section, .cta-band{scroll-margin-top:90px;}
.header-cta{text-decoration:none;display:inline-block;}


/* --- v2 finished-site additions --- */
button.burger{background:none;border:none;padding:4px;}
.mobilenav{display:none;border-top:1px solid var(--line);background:#fff;}
.mobilenav.open{display:block;}
.mobilenav a{display:block;padding:13px 24px;border-bottom:1px solid var(--line);font-size:15px;letter-spacing:.08em;}
.mobilenav a:hover{color:var(--blue);background:#F7F9FC;}
@media(min-width:721px){.mobilenav{display:none!important;}}
a.news-row:hover .ttl{color:var(--blue);}
.news-row .arrow{color:var(--gray);margin-left:auto;}
a.card{display:block;}
a.card:hover .ttl{color:var(--blue);}
details.faq-item{border-bottom:1px solid var(--line);padding:20px 4px;}
details.faq-item:first-child{border-top:1px solid var(--line);}
details.faq-item summary{cursor:pointer;list-style:none;font-weight:700;font-size:16px;}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary span{color:var(--blue);margin-right:8px;}
details.faq-item summary::after{content:"＋";float:right;color:var(--gray);font-weight:400;}
details.faq-item[open ] summary::after{content:"－";}
.footer-nav{margin-top:20px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;font-size:13px;letter-spacing:.08em;}
.footer-nav a:hover{color:var(--blue);}
.to-top{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;border:1px solid var(--blue);background:#fff;color:var(--blue);font-size:18px;cursor:pointer;display:none;z-index:20;}
.to-top.show{display:block;}
.article{max-width:760px;margin:0 auto;padding:52px 24px 8px;}
.article .date{font-size:13px;color:var(--gray);letter-spacing:.08em;}
.article h1{font-size:clamp(22px,4.6vw,30px);line-height:1.5;margin:10px 0 8px;}
.article .cat{margin-bottom:6px;}
.article img.heroimg{width:100%;display:block;margin:26px 0;}
.article p{font-size:15.5px;margin-bottom:16px;}
.article .backlinks{margin-top:40px;border-top:1px solid var(--line);padding-top:20px;display:flex;gap:26px;flex-wrap:wrap;font-size:14px;}
.article .backlinks a{color:var(--blue);}
.page-head{max-width:900px;margin:0 auto;padding:52px 24px 0;text-align:center;}

/* --- v3: new hero, responsive polish, dark mode --- */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-alt:#F7F9FC;
  --text:#222222;
  --text-sub:#444444;
  --text-mut:#555555;
  --accent:#0D4688;
  --accent-btn:#0D4688;
  --gold-text:#9a7b14;
  color-scheme:light;
}
img{max-width:100%;}

/* Hero: show the whole portrait photo (no cropping of the baked-in catch copy),
   with a blurred cover copy of the same photo filling the sides on wide screens. */
.hero{position:relative;max-width:1180px;margin:0 auto;overflow:hidden;background:#0e0f11;}
.hero::before{content:"";position:absolute;inset:0;background:url("images/hero-event.jpg") center/cover no-repeat;filter:blur(28px) brightness(.72);transform:scale(1.15);}
.hero img.photo{position:relative;display:block;width:auto;height:auto;max-width:min(600px,100%);max-height:82vh;margin:0 auto;object-fit:contain;}

@media(max-width:720px){
  .header-logo{height:36px;}
  .header-cta{padding:5px 12px;font-size:12px;}
  .hero-sub .hero-btns .btn{width:min(330px,88vw);text-align:center;}
  .news-row{gap:10px;padding:15px 2px;}
  .news-row .date{min-width:88px;}
  .news-row .arrow{display:none;}
  .sec-head h2{font-size:21px;}
  .article{padding-top:38px;}
}

/* --- v4: framed hero (no crop, no blur bands), theme toggle, transparent logos --- */
body{transition:background-color .25s ease,color .25s ease;}
header{transition:background-color .25s ease;}
.header-actions{display:flex;align-items:center;gap:10px;}
.theme-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:16px;line-height:1;cursor:pointer;padding:0;}
.theme-btn:hover{border-color:var(--blue);color:var(--blue);}
@media(min-width:721px){.burger{display:none;}}
/* Hero: flat brand-tinted stage + the whole photo as a framed card. Nothing is cropped. */
.hero{background:var(--surface-alt);overflow:hidden;padding:40px 16px 44px;}
.hero::before{display:none;}
.hero img.photo{height:min(560px,78vh);width:auto;max-width:100%;margin:0 auto;border-radius:14px;box-shadow:0 14px 34px rgba(18,42,74,.20);}
@media(max-width:720px){
  .hero{padding:18px 12px 22px;}
  .hero img.photo{height:auto;width:100%;border-radius:10px;}
}
/* Thumbnails: letterboxed on a tinted stage instead of cropped. */
.card img,.work img{object-fit:contain;background:var(--surface-alt);}

/* Dark theme: applied when the visitor toggles it, or by OS setting on first visit
   (the inline head script stamps data-theme on <html> before first paint). */
:root[data-theme="dark"]{

  --bg:#121417;
  --surface:#1A1D21;
  --surface-alt:#1E2126;
  --text:#ECEEF1;
  --text-sub:#C7CBD1;
  --text-mut:#AEB4BC;
  --line:#34383F;
  --accent:#8FBCEA;
  --accent-btn:#2E6DAE;
  --gold-text:#E0C169;
  color-scheme:dark;
}
:root[data-theme="dark"] body{background:var(--bg);color:var(--text);}
:root[data-theme="dark"] header{background:var(--bg);}
:root[data-theme="dark"] .burger span{background:var(--text);}
:root[data-theme="dark"] .header-cta{border-color:var(--accent);color:var(--accent);background:transparent;}
:root[data-theme="dark"] nav.topnav a:hover{color:var(--accent);}
:root[data-theme="dark"] .mobilenav{background:var(--bg);}
:root[data-theme="dark"] .mobilenav a{border-color:var(--line);}
:root[data-theme="dark"] .mobilenav a:hover{background:var(--surface-alt);color:var(--accent);}
:root[data-theme="dark"] .theme-btn:hover{border-color:var(--accent);color:var(--accent);}
:root[data-theme="dark"] .hero{box-shadow:none;}
:root[data-theme="dark"] .hero img.photo{box-shadow:0 14px 34px rgba(0,0,0,.5);}
:root[data-theme="dark"] .hero-sub .sub{color:var(--text-mut);}
:root[data-theme="dark"] .stat .num{color:var(--accent);}
:root[data-theme="dark"] .stat .lbl,:root[data-theme="dark"] .sec-head .en,:root[data-theme="dark"] .card .date,:root[data-theme="dark"] .past .cap,:root[data-theme="dark"] .chips .cap{color:var(--text-mut);}
:root[data-theme="dark"] .sec-lead,:root[data-theme="dark"] .story,:root[data-theme="dark"] .about-item p,:root[data-theme="dark"] .act p,:root[data-theme="dark"] .past,:root[data-theme="dark"] .work p,:root[data-theme="dark"] .step p,:root[data-theme="dark"] details.faq-item .a{color:var(--text-sub);}
:root[data-theme="dark"] .about-item,:root[data-theme="dark"] .act,:root[data-theme="dark"] .step{border-color:var(--line);}
:root[data-theme="dark"] .act h3 .tag,:root[data-theme="dark"] .nchip{color:var(--gold-text);border-color:var(--gold);}
:root[data-theme="dark"] .nchip.blue{color:var(--accent);border-color:var(--accent);}
:root[data-theme="dark"] .chip{border-color:var(--line);color:var(--text-sub);}
:root[data-theme="dark"] a.news-row:hover .ttl,:root[data-theme="dark"] a.card:hover .ttl{color:var(--accent);}
:root[data-theme="dark"] .work .price{color:var(--accent);}
:root[data-theme="dark"] .cta-band{background:var(--surface-alt);}
:root[data-theme="dark"] .step{background:var(--surface);}
:root[data-theme="dark"] .btn-solid{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff;}
:root[data-theme="dark"] .btn-outline{background:transparent;color:var(--accent);border-color:var(--accent);}
:root[data-theme="dark"] .sns-btns a{background:var(--surface);border-color:#4a4f57;color:var(--text-sub);}
:root[data-theme="dark"] .sns-btns a:hover{border-color:var(--accent);color:var(--accent);}
:root[data-theme="dark"] .more a{border-color:#4a4f57;}
:root[data-theme="dark"] .to-top{background:var(--surface);border-color:var(--accent);color:var(--accent);}
:root[data-theme="dark"] details.faq-item summary span{color:var(--accent);}
:root[data-theme="dark"] details.faq-item .a span{color:var(--gold-text);}
:root[data-theme="dark"] footer a,:root[data-theme="dark"] .article .backlinks a{color:var(--accent);}
:root[data-theme="dark"] .footer-nav a:hover{color:var(--accent);}

.logo-dark{display:none;}
:root[data-theme="dark"] .logo-light{display:none;}
:root[data-theme="dark"] .logo-dark{display:inline-block;}
:root[data-theme="dark"] .hero-logo.logo-dark{display:block;}
@media(max-width:720px){.header-in{position:relative;}.header-in .logo-link{position:absolute;left:50%;transform:translateX(-50%);}}

.daily-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px;}
.daily-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:10px;}
@media(max-width:640px){.daily-grid{grid-template-columns:repeat(2,1fr);}}

[data-theme="dark"] .mono-img{filter:invert(1) hue-rotate(180deg);}
[data-theme="dark"] .lift-img{filter:brightness(1.6) saturate(1.25);}