@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Serif+JP:wght@500;600;700&display=swap');
  :root{
    --paper:#ffffff; --cream:#f7f5f1; --ink:#1b1a18; --ink2:#57544c; --muted:#8f8b80;
    --line:rgba(20,18,15,0.10); --si:#1f6fd6; --rose:#c24a6a; --amber:#d99b2f; --welfare:#1f9d55;
    --deep:#1b2734;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --paper:#141312; --cream:#1b1a18; --ink:#f4f2ec; --ink2:#c8c5bc; --muted:#8f8b80;
      --line:rgba(255,255,255,0.14); --si:#5aa2f0; --rose:#e0748f; --amber:#e6b455; --welfare:#37c07a;
      --deep:#0f1620;
    }
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; background:var(--paper); color:var(--ink);
    font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
    line-height:1.9; font-size:17px; -webkit-font-smoothing:antialiased;}
  a{color:var(--si); text-decoration:none;}
  .serif{font-family:"Noto Serif JP",serif;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
  .eyebrow{font-size:12.5px; font-weight:800; letter-spacing:.16em; color:var(--si); text-transform:uppercase; margin:0 0 14px;}
  .eyebrow .ja{display:block; font-size:13px; letter-spacing:.02em; color:var(--muted); text-transform:none; margin-top:3px; font-weight:700;}
  /* placeholder */
  .ph{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line);
    background:linear-gradient(135deg,color-mix(in srgb,var(--si) 10%,var(--cream)),color-mix(in srgb,var(--rose) 8%,var(--cream)));
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:var(--muted); text-align:center; padding:16px;}
  .ph svg{width:40px; height:40px; opacity:.5;}
  .ph span{font-size:12.5px; font-weight:700; letter-spacing:.02em;}
  .ph.wide{aspect-ratio:16/9;} .ph.tall{aspect-ratio:4/5;} .ph.sq{aspect-ratio:1/1;} .ph.h43{aspect-ratio:4/3;}
  /* buttons */
  .btn{display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:16px; border-radius:999px; padding:15px 30px; border:1.5px solid var(--si); transition:.15s;}
  .btn.pri{background:var(--si); color:#fff;} .btn.pri:hover{filter:brightness(1.06);}
  .btn.ghost{background:transparent; color:var(--si);} .btn.ghost:hover{background:color-mix(in srgb,var(--si) 8%,transparent);}
  .arrowlink{font-weight:800; font-size:15.5px; color:var(--si); display:inline-flex; align-items:center; gap:7px;}
  /* header */
  header.site{position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line);}
  header.site .in{max-width:1120px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:14px;}
  .logo{display:flex; align-items:center; gap:10px; white-space:nowrap;}
  .logo .nm{font-size:20px; font-weight:900; letter-spacing:-.01em; color:var(--ink);}
  .logo .nm .si{color:var(--si);} .logo .nm .rose{color:var(--rose);}
  .logo .nk{font-size:12.5px; font-weight:900; color:var(--muted); margin-left:2px;}
  .logo .nk .si{color:var(--si);} .logo .nk .rose{color:var(--rose);}
  nav.main{display:flex; align-items:center; gap:26px; font-size:14.5px; font-weight:700;}
  nav.main a{color:var(--ink2);} nav.main a:hover{color:var(--si);}
  nav.main .cta{background:var(--si); color:#fff; padding:9px 18px; border-radius:999px; font-weight:800;}
  @media(max-width:860px){ nav.main a:not(.cta){display:none;} }
  /* hero */
  .hero{position:relative; min-height:88vh; display:flex; align-items:flex-end; overflow:hidden; border-bottom:1px solid var(--line);}
  .hero .bg{position:absolute; inset:0; background:linear-gradient(135deg,color-mix(in srgb,var(--si) 12%,var(--cream)),color-mix(in srgb,var(--rose) 10%,var(--cream)));}
  .hero .bg .lbl{position:absolute; top:24%; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted); opacity:.55;}
  .hero .bg .lbl svg{width:46px; height:46px;} .hero .bg .lbl span{font-size:13px; font-weight:700;}
  .hero .scrim{position:absolute; inset:0; background:linear-gradient(to top, var(--paper) 10%, color-mix(in srgb,var(--paper) 92%,transparent) 30%, color-mix(in srgb,var(--paper) 60%,transparent) 46%, color-mix(in srgb,var(--paper) 20%,transparent) 60%, transparent 74%);}
  .hero .in{position:relative; z-index:2; width:100%; max-width:1120px; margin:0 auto; padding:0 24px 10vh; display:block;}
  .hero .eyebrow{color:var(--ink2); margin-bottom:16px;}
  .hero h1{font-size:54px; line-height:1.55; margin:0; font-weight:700; letter-spacing:.02em;}
  .hero h1 .si{color:var(--si);} .hero h1 .rose{color:var(--rose);}
  .hero .subnote{font-size:14px; color:var(--muted); margin-top:22px; font-weight:700;}
  .hero .scrolls{position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:2; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:7px;}
  .hero .scrolls span{font-size:10.5px; font-weight:800; letter-spacing:.16em;}
  .hero .scrolls .bar{width:1px; height:32px; background:var(--muted); opacity:.5;}
  @media(max-width:820px){ .hero{min-height:80vh;} .hero h1{font-size:31px; line-height:1.55;} }
  /* section */
  section{padding:92px 0;}
  @media(max-width:820px){ section{padding:60px 0;} }
  .sechead{max-width:720px; margin:0 0 44px;}
  .sechead.center{margin-left:auto; margin-right:auto; text-align:center;}
  .h2{font-size:32px; font-weight:700; line-height:1.5; margin:0; letter-spacing:.01em;}
  @media(max-width:820px){ .h2{font-size:25px;} }
  .h2 .si{color:var(--si);} .h2 .rose{color:var(--rose);}
  .lede{font-size:17px; color:var(--ink2); margin:16px 0 0;}
  /* 2 doors */
  .doors{display:grid; grid-template-columns:1fr 1fr; gap:30px;}
  @media(max-width:760px){ .doors{grid-template-columns:1fr; gap:26px;} }
  .door{display:block; color:inherit; border-radius:20px; overflow:hidden; transition:.18s;}
  .door:hover{transform:translateY(-4px);}
  .door .ph{border-radius:20px; aspect-ratio:5/3;}
  .door .body{padding:22px 6px 4px;}
  .door .k{display:inline-block; font-size:13px; font-weight:900; color:#fff; border-radius:7px; padding:3px 12px; margin-bottom:10px;}
  .door.kojin .k{background:var(--rose);} .door.hojin .k{background:var(--si);}
  .door h3{font-size:26px; font-weight:700; margin:0 0 8px;}
  .door .sub{font-size:16px; color:var(--ink2); margin:0 0 10px;}
  .door .tags{font-size:14px; color:var(--muted); margin:0 0 16px;}
  .door.kojin .arrowlink{color:var(--rose);}
  /* features 3col */
  .feats{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;}
  @media(max-width:820px){ .feats{grid-template-columns:1fr; gap:32px; max-width:460px; margin:0 auto;} }
  .feat .ph{aspect-ratio:3/2; border-radius:16px; margin-bottom:18px;}

  .feat .ph.feat-photo{padding:0; background:none; overflow:hidden;}
  .feat-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .feat .fn{font-size:13px; font-weight:900; color:var(--si); letter-spacing:.08em;}
  .feat h3{font-size:20px; font-weight:700; margin:6px 0 8px;}
  .feat p{font-size:15.5px; color:var(--ink2); margin:0;}
  /* now + timeline */
  .now{background:var(--cream);}
  .nowgrid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;}
  @media(max-width:820px){ .nowgrid{grid-template-columns:1fr; gap:30px;} }
  .badge-now{display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px 16px; font-size:13.5px; font-weight:800; color:var(--ink2); margin-bottom:16px;}
  .badge-now .dot{width:9px; height:9px; border-radius:50%; background:var(--si);}
  .now h3{font-size:27px; font-weight:700; margin:0 0 12px;}
  .now p{font-size:16px; color:var(--ink2); margin:0 0 20px;}
  .now .ph{aspect-ratio:4/3;}
  .now .ph.now-photo{padding:0; background:none; overflow:hidden;}
  .now-photo img{width:100%; height:100%; object-fit:cover; display:block;}

  .timeline{margin-top:64px;}
  .tl-track{position:relative; display:grid; grid-template-columns:repeat(5,1fr); margin-top:26px;}
  .tl-track:before{content:""; position:absolute; left:9%; right:9%; top:9px; height:2px; background:var(--line);}
  .tl-node{position:relative; text-align:center;}
  .tl-node .d{width:16px; height:16px; border-radius:50%; background:var(--line); border:3px solid var(--paper); margin:0 auto 12px; position:relative; z-index:1;}
  .tl-node.cur .d{background:var(--si); box-shadow:0 0 0 5px color-mix(in srgb,var(--si) 18%,transparent);}
  .tl-node .yr{font-size:12px; color:var(--muted); font-weight:800;}
  .tl-node .nm2{font-size:14px; font-weight:800; margin-top:2px;}
  .tl-node.cur .nm2{color:var(--si);}
  @media(max-width:620px){ .tl-track{grid-template-columns:1fr 1fr 1fr; gap:18px 0;} .tl-track:before{display:none;} }
  /* mission */
  .mission{text-align:center;}
  .mission .ms{font-size:34px; font-weight:600; line-height:1.7; margin:0 auto 22px; max-width:820px; letter-spacing:.02em;}
  @media(max-width:820px){ .mission .ms{font-size:24px;} }
  .mission .ms .si{color:var(--si);} .mission .ms .rose{color:var(--rose);}
  .mission p{font-size:16px; color:var(--ink2); max-width:640px; margin:0 auto 26px;}
  /* news cta */
  .cta-band{background:linear-gradient(120deg,color-mix(in srgb,var(--si) 12%,var(--paper)),color-mix(in srgb,var(--rose) 12%,var(--paper))); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .cta-band .in{text-align:center; padding:74px 24px;}
  .cta-band h2{font-size:29px; font-weight:700; margin:0 0 12px;}
  .cta-band p{font-size:16px; color:var(--ink2); margin:0 0 26px;}
.door-photo{aspect-ratio:5/3; border-radius:20px; overflow:hidden; border:1px solid var(--line);}
  .door-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  /* footer */
  footer{background:var(--deep); color:#cdd4dc;}
  footer .in{max-width:1120px; margin:0 auto; padding:52px 24px 40px;}
  .frow{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap;}
  .fbrand .nm{font-size:19px; font-weight:900; color:#fff;}
  .fbrand .nm .si{color:#7fb4f5;} .fbrand .nm .rose{color:#ee9ab0;}
  .fbrand .tg{font-size:13px; color:#9aa4af; margin-top:8px;}
  .fsocial{display:flex; gap:12px; flex-wrap:wrap;}
  .fsi{display:flex; flex-direction:column; align-items:center; gap:5px;}
  .fsi a{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:#cdd4dc;}
  .fsi a:hover{border-color:#7fb4f5; color:#fff;}
  .fsi a.learn{border-color:#7fb4f5; background:rgba(127,180,245,.14); color:#cfe2fb;}
  .fsi svg{width:17px; height:17px;} .fsi .nt{font-size:10px; font-weight:900;} .fsi .cap{font-size:10px; color:#9aa4af; font-weight:700;}
  .flinks{display:flex; flex-wrap:wrap; gap:10px 26px; margin:30px 0 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); font-size:14px; font-weight:700;}
  .flinks a{color:#cdd4dc;} .flinks a:hover{color:#fff;}
  .fcopy{margin:20px 0 0; font-size:12.5px; color:#8b95a0; font-weight:700;}
  .fnote{margin:10px 0 0; font-size:11.5px; color:#7d8792; line-height:1.85;}