:root{
      --bg:#f8faf6;
      --surface:#ffffff;
      --surface-strong:#ecf7ee;
      --accent:#2f855a;
      --accent-soft:#68d391;
      --accent-muted:#9ae6b4;
      --text:#1f2933;
      --muted:#4a5568;
      --border:rgba(45,81,65,0.16);
      --glass:rgba(255,255,255,0.7);
      --shadow:0 20px 50px rgba(45,81,65,0.12);
      --radius:20px;
      --focus:rgba(72,187,120,0.24);
    }

    *, *::before, *::after{
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
      text-size-adjust:100%;
      font-family:'Noto Sans JP',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      color-scheme:light;
    }

    body{
      margin:0;
      min-height:100%;
      background:
        radial-gradient(circle at top left, rgba(72,187,120,0.14), transparent 28%),
        radial-gradient(circle at bottom right, rgba(72,187,120,0.08), transparent 28%),
        url('https://img.ykr3.net/bg-repeat.png'),
        linear-gradient(180deg,#f8faf6 0%,#eef5ec 45%,#f8faf6 100%);
      color:var(--text);
      font-size:1rem;
      line-height:1.7;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }

    body.menu-open{
      overflow:hidden;
    }

    body.menu-open::before{
      content:'';
      position:fixed;
      inset:0;
      background:rgba(17,24,39,0.42);
      z-index:15;
      backdrop-filter:blur(1px);
    }

    body::selection{
      background:rgba(47,133,90,0.18);
      color:var(--text);
    }

    img, svg, video, canvas, iframe{
      display:block;
      max-width:100%;
      height:auto;
    }

    button, input, select, textarea{
      font:inherit;
      color:inherit;
    }

    .container{
      max-width:1100px;
      margin:0 auto;
      padding:40px 24px 64px;
    }

    header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:18px 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
    }

    .logo{
      width:52px;
      height:52px;
      border-radius:18px;
      background:linear-gradient(135deg,var(--accent),#2f855a);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      color:#f8faf6;
      box-shadow:0 18px 50px rgba(47,133,90,0.18);
      flex-shrink:0;
    }

    h1,h2,h3,h4,h5,h6{
      margin:0 0 0.85rem;
      color:var(--text);
      line-height:1.1;
      font-weight:700;
      letter-spacing:-0.02em;
    }

    h1{font-size:clamp(2rem,2.4vw,3rem);}
    h2{font-size:clamp(1.75rem,2vw,2.5rem);}
    h3{font-size:clamp(1.4rem,1.5vw,1.8rem);}
    h4{font-size:1.15rem;}
    h5,h6{font-size:1rem;}

    p,ul,ol,dl,blockquote,pre,table{
      margin:0 0 1.2rem;
    }

    a{
      color:var(--accent);
      text-decoration:underline;
      text-decoration-thickness:1px;
      transition:color 0.2s ease,text-decoration-color 0.2s ease;
    }

    a:hover,
    a:focus-visible{
      color:#ffffff;
      text-decoration-color:rgba(47,133,90,0.5);
      outline:none;
    }

    a:focus-visible{
      box-shadow:0 0 0 4px rgba(72,187,120,0.18);
      border-radius:8px;
    }

    small,abbr,acronym{
      color:var(--muted);
    }

    abbr[title]{
      text-decoration:underline dotted;
      cursor:help;
    }

    hr{
      border:none;
      height:1px;
      background:rgba(45,81,65,0.1);
      margin:2rem 0;
    }

    .hero{
      display:grid;
      grid-template-columns:1fr 380px;
      gap:32px;
      align-items:start;
      margin-top:40px;
    }

    .card,
    .project{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:24px;
      padding:28px;
      box-shadow:var(--shadow);
      transition:transform 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease;
    }

    .card:hover,
    .project:hover{
      transform:translateY(-4px);
      border-color:rgba(47,133,90,0.22);
      box-shadow:0 26px 70px rgba(45,81,65,0.12);
    }

    .hero .intro h2{
      margin:0 0 14px;
    }

    .muted{
      color:var(--muted);
    }

    .cta{
      display:inline-flex;
      gap:12px;
      margin-top:20px;
      flex-wrap:wrap;
    }

    .btn,
    button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,var(--accent),#2f855a);
      color:#f8faf6;
      padding:12px 20px;
      border:none;
      border-radius:16px;
      text-decoration:none;
      font-weight:700;
      cursor:pointer;
      box-shadow:0 14px 30px rgba(47,133,90,0.18);
      transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;
    }

    .btn:hover,
    button:hover{
      transform:translateY(-2px);
      box-shadow:0 20px 34px rgba(47,133,90,0.22);
    }

    .btn.secondary{
      background:rgba(47,133,90,0.08);
      border:1px solid rgba(47,133,90,0.16);
      color:var(--text);
      box-shadow:none;
    }

    .skills{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }

    .pill{
      background:rgba(47,133,90,0.08);
      padding:10px 14px;
      border-radius:999px;
      color:var(--text);
      font-size:0.95rem;
      border:1px solid rgba(47,133,90,0.16);
    }

    .cards{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
      margin-top:34px;
    }

    .project{
      min-height:140px;
    }

    .project h3{
      font-size:1.05rem;
    }

    .project p{
      color:var(--muted);
      font-size:0.96rem;
      line-height:1.7;
    }

    .page-shell{
      display:grid;
      grid-template-columns:300px 1fr;
      min-height:100vh;
    }

    .sidebar{
      position:sticky;
      top:0;
      height:100vh;
      display:flex;
      flex-direction:column;
      gap:18px;
      padding:24px 18px;
      background:rgba(255,255,255,0.72);
      backdrop-filter:blur(14px);
      border-right:1px solid rgba(47,133,90,0.16);
      box-shadow:12px 0 24px rgba(45,81,65,0.08);
      z-index:20;
    }

    .sidebar-brand{
      display:flex;
      align-items:center;
      gap:12px;
      padding:10px 8px;
      border-radius:18px;
      background:rgba(255,255,255,0.62);
      border:1px solid rgba(47,133,90,0.16);
    }

    .sidebar-brand img,
    .sidebar-logo{
      width:54px;
      height:54px;
      border-radius:16px;
      object-fit:cover;
    }

    .sidebar-brand h2,
    .sidebar-brand h3{
      margin:0;
    }

    .sidebar-nav{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .sidebar-link{
      display:block;
      padding:12px 14px;
      border-radius:12px;
      border:1px solid rgba(47,133,90,0.16);
      background:rgba(255,255,255,0.66);
      text-decoration:none;
      color:var(--text);
      font-weight:700;
      transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .sidebar-link:hover,
    .sidebar-link:focus-visible{
      transform:translateY(-2px);
      background:linear-gradient(135deg, rgba(72,187,120,0.92), rgba(47,133,90,0.86));
      color:#fff;
      box-shadow:0 12px 26px rgba(47,133,90,0.18);
    }

    .sidebar-embed{
      display:flex;
      flex-direction:column;
      gap:10px;
      flex:1;
      min-height:0;
    }

    .sidebar-embed .embed-frame{
      min-height:280px;
      flex:1;
      border-radius:18px;
      border:1px solid rgba(47,133,90,0.16);
      background:rgba(255,255,255,0.54);
    }

    .content-area{
      display:flex;
      flex-direction:column;
      min-width:0;
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:18px 20px;
      position:sticky;
      top:0;
      z-index:10;
      background:rgba(248,250,246,0.74);
      backdrop-filter:blur(10px);
      border-bottom:1px solid rgba(47,133,90,0.12);
    }

    .topbar .brand{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .menu-toggle{
      display:none;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      gap:4px;
      width:42px;
      height:42px;
      border-radius:12px;
      border:1px solid rgba(47,133,90,0.18);
      background:rgba(255,255,255,0.82);
      cursor:pointer;
      padding:0;
    }

    .menu-toggle span{
      width:18px;
      height:2px;
      border-radius:999px;
      background:var(--accent);
    }

    .topbar-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .content-body{
      padding:20px;
      display:flex;
      flex-direction:column;
      gap:18px;
    }

    .content-stack{
      display:grid;
      gap:18px;
    }

    .content-panel,
    .card,
    .project,
    .embed-panel{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:24px;
      padding:22px;
      box-shadow:var(--shadow);
    }

    .panel-heading{
      display:flex;
      align-items:start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:16px;
    }

    .panel-heading h2,
    .panel-heading h3{
      margin:0;
    }

    .content-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px;
    }

    .embed-frame{
      width:100%;
      border:0;
      border-radius:18px;
      overflow:hidden;
      background:transparent;
    }

    .full-frame{
      min-height:360px;
    }

    .short-frame{
      min-height:200px;
    }

    .ad-frame{
      min-height:220px;
    }

    footer{
      margin-top:8px;
      padding:10px 0 0;
      text-align:center;
      color:var(--muted);
      font-size:0.92rem;
    }

    .form-group{margin-bottom:1.25rem;}

    label{
      display:block;
      margin-bottom:0.5rem;
      font-weight:700;
      color:var(--text);
    }

    input,
    textarea,
    select{
      width:100%;
      min-width:0;
      background:var(--surface-strong);
      border:1px solid var(--border);
      border-radius:16px;
      padding:14px 16px;
      color:var(--text);
      transition:border-color 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;
    }

    input:focus,
    textarea:focus,
    select:focus{
      outline:none;
      border-color:var(--accent);
      box-shadow:0 0 0 4px var(--focus);
      background:#ffffff;
    }

    textarea{min-height:140px;}

    fieldset{
      border:1px solid rgba(47,133,90,0.16);
      padding:1.25rem 1.5rem;
      border-radius:22px;
      background:rgba(72,187,120,0.04);
      margin:0 0 1.5rem;
    }

    legend{
      padding:0 0.5rem;
      font-weight:700;
      color:var(--accent);
    }

    table{
      width:100%;
      border-collapse:collapse;
      margin:0 0 1.4rem;
      font-size:0.95rem;
    }

    th,td{
      border:1px solid rgba(47,133,90,0.12);
      padding:14px 16px;
      text-align:left;
    }

    th{
      background:rgba(47,133,90,0.08);
      font-weight:700;
    }

    tbody tr:nth-child(even){
      background:rgba(47,133,90,0.04);
    }

    ul,ol{padding-left:1.5rem;}

    li{margin-bottom:0.6rem;}

    blockquote{
      margin:0 0 1.2rem;
      padding:1.2rem 1.4rem;
      border-left:4px solid var(--accent);
      background:rgba(47,133,90,0.08);
      color:var(--muted);
      border-radius:18px;
    }

    code,
    kbd,
    samp,
    pre{
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      background:rgba(72,187,120,0.08);
      color:#234e20;
      border-radius:12px;
    }

    code{
      padding:0.2rem 0.35rem;
      font-size:0.95rem;
    }

    pre{
      padding:1rem 1.2rem;
      overflow:auto;
    }

    figure{margin:0 0 1.4rem;}

    figcaption{
      margin-top:0.75rem;
      color:var(--muted);
      font-size:0.92rem;
    }

    details{
      background:var(--surface-strong);
      border:1px solid var(--border);
      border-radius:20px;
      padding:1rem 1.2rem;
    }

    summary{
      font-weight:700;
      cursor:pointer;
      list-style:none;
    }

    summary::-webkit-details-marker{display:none;}

    progress{
      width:100%;
      height:1rem;
      appearance:none;
      border-radius:999px;
      overflow:hidden;
      background:rgba(47,133,90,0.12);
    }

    progress::-webkit-progress-bar{background:rgba(47,133,90,0.12);}
    progress::-webkit-progress-value{background:linear-gradient(135deg,var(--accent-soft),var(--accent));}

    ::placeholder{
      color:var(--muted);
      opacity:1;
    }

    [disabled],
    fieldset[disabled]{
      opacity:0.65;
      cursor:not-allowed;
    }

    @media (max-width:900px){
      .page-shell{
        grid-template-columns:1fr;
      }

      .sidebar{
        position:fixed;
        left:-105%;
        top:0;
        width:min(86vw,320px);
        height:100vh;
        border-right:none;
        box-shadow:0 24px 80px rgba(0,0,0,0.24);
        transition:left 0.28s ease;
      }

      .sidebar.is-open{
        left:0;
      }

      .menu-toggle{
        display:flex;
      }

      .topbar-links{
        display:none;
      }

      .content-grid{
        grid-template-columns:1fr;
      }

      .hero{
        grid-template-columns:1fr;
      }
    }

    @media (max-width:560px){
      .cards{
        grid-template-columns:1fr;
      }

      .topbar{
        align-items:center;
      }

      .content-body{
        padding:16px;
      }
    }