:root{ --bg:#ffffff; --fg:#1a1a1a; --muted:#666; --pri:#2a7f6a; --pri-weak:#e7f4f1; --border:#e6e6e6; --accent:#3aa897; --shadow-soft:0 4px 12px rgba(0,0,0,.06); }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,system-ui,sans-serif; line-height:1.7; color:var(--fg); background:var(--bg)}
a{color:var(--pri); text-decoration:none}
a:hover{text-decoration:underline}
/* keyboard focus */
a:focus-visible, .btn:focus-visible{outline:2px solid var(--pri); outline-offset:2px}
.container{max-width:960px; margin:0 auto; padding:0 16px}
.container.container--flush{padding-left:0; padding-right:0; max-width:100%}
header{position:sticky; top:0; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px); border-bottom:none; z-index:10; padding-top: env(safe-area-inset-top, 0)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:0}
.top-banner{width:100%; height:200px; overflow:hidden; border-bottom:none; background:var(--bg); border-radius:10px}
.top-banner{line-height:0}
.top-banner img{display:block; width:100%; height:100%; object-fit:cover; object-position:center 46%; will-change:transform; filter:none}
.brand{font-weight:700; letter-spacing:.03em; display:block; color:var(--fg); text-decoration:none; min-width:0}
.brand-logo{display:none}
.brand-text{display:flex; flex-direction:column; min-width:0}
.brand-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.15}
.brand-sub{display:block; font-size:12px; line-height:1; color:var(--muted)}
.brand .logo{width:36px; height:36px; object-fit:contain; border-radius:0; flex:0 0 auto}
.brand > div{display:flex; flex-direction:column}
.brand small{display:block; font-weight:500; color:var(--muted); font-size:12px; margin-top:2px}
nav ul{display:flex; gap:16px; list-style:none; margin:0; padding:0; font-size:14px; flex-wrap:wrap}
.nav nav{flex:0 0 auto}
.nav a{position:relative}
.nav a{padding:8px 6px; display:inline-block}
.nav a{padding:8px 6px; display:inline-block}
.nav a:hover::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--pri)}
.hero{background:var(--pri-weak); padding:16px 0 24px 0; margin-top:-1px}
.hero::before{content:none}
.hero h1{margin:0 0 8px; font-size:28px}
.hero p{margin:0 0 16px; color:var(--muted)}
.buttons{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-block; padding:10px 16px; border-radius:8px; font-weight:600; border:1px solid var(--pri); color:#fff; background:var(--pri); min-height:44px}
.btn{transition:transform .2s ease, box-shadow .2s ease}
.btn:hover,.btn:focus-visible{transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.08)}
.btn:active{transform:translateY(0); box-shadow:0 2px 6px rgba(0,0,0,.06)}
.btn--ghost{background:#fff; color:var(--pri)}
/* small USP badges */
.usp{list-style:none; margin:0 0 12px 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.usp li{background:#fff; border:1px solid var(--border); color:var(--fg); border-radius:999px; padding:4px 10px; font-size:12px}
section{padding:40px 0; border-bottom:1px solid var(--border)}
section h2{margin:0 0 16px; font-size:22px; position:relative; display:inline-block}
section h2::after{content:""; display:block; width:100%; height:2px; background:var(--pri); border-radius:2px; margin-top:8px}
.grid{display:grid; grid-template-columns:1fr; gap:16px}
.card{border:1px solid var(--border); border-radius:12px; padding:16px; background:#fff; box-shadow:var(--shadow-soft)}
.card:hover{transform:none; box-shadow:0 6px 16px rgba(0,0,0,.08)}
.cta{margin-top:16px}
.muted{color:var(--muted)}
.list{margin:0; padding-left:18px}
.table{width:100%; border-collapse:collapse}
.table th, .table td{border-bottom:1px solid var(--border); padding:12px 14px; text-align:left; color:var(--fg)}
.table thead th{background:var(--pri-weak); font-weight:700}
.table tbody tr:nth-child(2n){background:#fcfefe}
.access{display:grid; grid-template-columns:1fr; gap:16px}
footer{padding:24px 0; text-align:center; color:var(--muted)}
footer .foot-info{margin-bottom:8px}
footer .foot-info p{margin:4px 0; color:var(--fg)}
/* ensure in-page anchors aren't hidden under sticky header */
section[id]{scroll-margin-top: calc(96px + env(safe-area-inset-top, 0))}
/* tiny icons */
.icon{width:18px; height:18px; vertical-align:-3px; margin-right:6px; opacity:.9}
h3 .icon{margin-right:8px}
.btn .icon{width:16px; height:16px; vertical-align:-3px; opacity:1}
summary .icon{margin-right:6px}
/* collapsible media */
.media-toggle{border:1px solid var(--border); border-radius:10px; padding:8px 12px; background:#fff}
.media-toggle > summary{cursor:pointer; list-style:none; font-weight:600}
.media-toggle > summary::-webkit-details-marker{display:none}
.media-grid{display:grid; grid-template-columns:1fr; gap:12px; margin-top:10px}
.media-grid figure{margin:0}
.media-grid img{max-width:100%; height:auto; border:1px solid var(--border); border-radius:10px}
@media (min-width:720px){
  .grid{grid-template-columns:repeat(3, 1fr)}
  .access{grid-template-columns:1.2fr .8fr}
  .hero h1{font-size:32px}
  .brand .logo{width:34px; height:34px; object-fit:contain}
  .media-grid{grid-template-columns:1fr 1fr}
  .top-banner{height:280px; border-radius:14px}
  .top-banner img{object-position:center 44%; filter:none}
  .hero{margin-top:-1px; padding:24px 0 32px 0}
  .nav{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:8px}
  nav ul{flex-wrap:nowrap; gap:4px; font-size:13px}
  section[id]{scroll-margin-top: 112px}
  .brand-text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
  .brand-title{font-size:17px}
  .brand-sub{font-size:13px}
  header .container{padding-left:10px; padding-right:10px}
}

/* compact header on small screens */
@media (max-width: 719px){
  .brand{gap:8px}
  .brand .logo{width:24px; height:24px; object-fit:contain}
  .brand > div{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.1}
  .brand small{display:block; font-size:12px; color:var(--muted); white-space:normal}
}

/* reveal animation */
.reveal{opacity:0; transform:translateY(8px)}
.reveal.is-visible{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes fadeUp{to{opacity:1; transform:translateY(0)}}
/* (dark mode removed) */