:root { --paper:#fcfbf9; --ink:#292e2b; --muted:#717770; --line:#e4e5df; --accent:#a2462e; --green:#3f6250; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; scroll-padding-top:28px; }
    body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; line-height:1.8; -webkit-font-smoothing:antialiased; }
    a { color:inherit; text-underline-offset:4px; }
    a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
    .wrap { width:min(calc(100% - 72px),1120px); margin-inline:auto; }
    .site-header { padding:16px 0 24px; border-bottom:1px solid var(--line); }
    .brand-row { display:flex; align-items:center; justify-content:space-between; gap:24px; }
    .brand { margin:0; font-size:25px; font-weight:500; letter-spacing:.12em; line-height:1.4; }
    .brand a { display:block; width:144px; text-decoration:none; }
    .brand img { display:block; width:144px; height:auto; }
    .label { margin:0; font-size:10px; letter-spacing:.16em; color:var(--muted); }
    .layout { display:grid; grid-template-columns:150px minmax(0,1fr); gap:44px; padding-top:38px; padding-bottom:80px; }
    .side-nav { align-self:start; position:sticky; top:32px; padding-top:6px; }
    .side-nav a { display:block; width:fit-content; padding:9px 0; font-size:13px; text-decoration:none; letter-spacing:.1em; }
    .side-nav a:hover { color:var(--accent); }
    .side-note { margin:34px 0 0; font-size:11px; line-height:2; color:var(--muted); }
    main { min-width:0; }
    section + section { margin-top:70px; }
    .section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; }
    .section-head h2 { margin:0; font-size:17px; font-weight:600; letter-spacing:.1em; }
    .section-head p { margin:0; color:var(--muted); font-size:11px; }
    .gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 22px; }
    .gallery-card { display:block; text-decoration:none; min-width:0; }
    .gallery-image { overflow:hidden; background:#f0eee7; aspect-ratio:4/3; }
    .gallery-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
    .gallery-card:hover img { transform:scale(1.025); }
    .card-link { display:block; color:inherit; text-decoration:none; }
    .karimono-card .button-row { margin-top:12px; }
    #works .gallery-image { aspect-ratio:2/1; background:#edf0e7; }
    #works .gallery-image-dark { background:#080808; }
    #works .gallery-image img { object-fit:contain; }
    #works .gallery-card:hover img { transform:none; }
    .parfait-card { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); grid-template-areas:"illustration art" "illustration copy"; border:1px solid #e0d1c8; background:#f8f3ec; }
    .parfait-illustration { grid-area:illustration; display:flex; align-items:center; justify-content:center; min-width:0; padding:16px; background:#eee5da; }
    .parfait-illustration img { display:block; width:100%; height:auto; }
    .parfait-art { grid-area:art; align-self:end; min-width:0; padding:24px 26px 0; background:#f8f3ec; }
    .parfait-title { margin:0 0 18px; color:#563343; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:30px; font-weight:500; line-height:1.4; }
    .parfait-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
    .parfait-gallery figure { min-width:0; margin:0; }
    .parfait-shot { position:relative; overflow:hidden; border-radius:6px; background:#eee5da; }
    .parfait-shot img { position:absolute; display:block; max-width:none; height:auto; }
    /* Show each original screenshot's café canvas, preserving its pixels and proportions. */
    .parfait-shot-day { aspect-ratio:532/645; }
    .parfait-shot-day img { width:140.414%; left:-19.549%; top:-9.613%; }
    .parfait-shot-night { aspect-ratio:557/677; }
    .parfait-shot-night img { width:151.706%; left:-25.314%; top:-9.158%; }
    .parfait-gallery figcaption { margin-top:10px; color:#563343; text-align:center; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:14px; line-height:1.6; }
    .parfait-copy { grid-area:copy; display:grid; grid-template-columns:1fr; align-content:start; min-width:0; padding:24px 26px; }
    .parfait-copy .gallery-caption, .parfait-copy p { grid-column:1; }
    .parfait-copy .gallery-caption { margin:0; gap:8px; }
    .parfait-card .parfait-copy p { margin-top:10px; font-size:13px; line-height:1.9; }
    .parfait-link { grid-column:1; justify-self:start; display:inline-flex; align-items:center; min-height:44px; margin-top:18px; padding:9px 14px; border:1px solid #bb8f80; color:var(--accent); font-size:12px; }
    .parfait-card:hover .parfait-link { border-color:var(--accent); }
    .gallery-caption { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:12px; }
    .gallery-caption h3 { margin:0; font-size:16px; font-weight:550; }
    .gallery-caption span { color:var(--muted); font-size:10px; white-space:nowrap; }
    .gallery-card p { margin:3px 0 0; font-size:12px; color:var(--muted); }
    .eyebrow { margin:0 0 10px; color:var(--accent); font-size:10px; font-weight:600; letter-spacing:.16em; }
    .tagline { margin:8px 0 0; font-size:15px; }
    .description { margin:18px 0 0; font-size:13px; line-height:2; }
    .axes { display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 0; padding:0; list-style:none; }
    .axes li { font-size:10px; color:#66695f; border:1px solid #dcded3; padding:3px 7px; }
    .button-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
    .button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; max-width:100%; padding:10px 14px; border:1px solid #c9cdc3; text-align:center; text-decoration:none; font-size:12px; line-height:1.7; }
    .button.primary-link { background:var(--ink); border-color:var(--ink); color:white; }
    .button:hover { border-color:var(--accent); }
    .process { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
    .process-card { border-top:1px solid var(--line); padding-top:20px; }
    .process-card h3 { margin:0; font-size:13px; font-weight:600; }
    .process-card p { margin:10px 0 0; color:var(--muted); font-size:12px; line-height:2; }
    footer { border-top:1px solid var(--line); padding:24px 0 32px; color:var(--muted); font-size:11px; }
    footer .wrap { display:flex; justify-content:space-between; gap:20px; }
    .skip-link { position:absolute; top:-80px; left:20px; padding:12px; background:white; z-index:2; }
    .skip-link:focus { top:8px; }
    @media (max-width:800px) {
      .wrap { width:calc(100% - 40px); }
      .layout { grid-template-columns:112px minmax(0,1fr); gap:24px; }
      .parfait-copy { grid-template-columns:1fr; padding:24px; }
      .parfait-link { grid-column:1; grid-row:auto; justify-self:start; margin-top:18px; }
      .gallery { gap:24px 16px; }
      .gallery-caption { flex-wrap:wrap; gap:2px 10px; }
    }
    @media (max-width:1050px) {
      .parfait-card { grid-template-columns:1fr; grid-template-areas:"illustration" "art" "copy"; }
      .parfait-illustration { padding:22px; }
      .parfait-illustration img { max-width:340px; }
    }
    @media (max-width:600px) {
      .site-header { padding:12px 0 20px; }
      .brand-row { gap:16px; }
      .brand { font-size:22px; }
      .brand a, .brand img { width:120px; }
      .label { max-width:110px; font-size:8px; line-height:1.8; text-align:right; }
      .layout { display:block; padding-top:0; padding-bottom:48px; }
      .side-nav { position:static; display:flex; flex-wrap:wrap; gap:4px 24px; padding:14px 0 24px; }
      .side-nav a { font-size:12px; min-height:44px; }
      .side-note { display:none; }
      .gallery { gap:26px 14px; }
      .gallery-caption h3 { font-size:14px; }
      .gallery-caption span { font-size:9px; }
      .gallery-card p { font-size:11px; }
      .parfait-copy { padding:22px 18px; }
      .parfait-art { padding:22px 18px 0; }
      .parfait-title { font-size:26px; }
      .parfait-gallery { gap:10px; }
      .parfait-gallery figcaption { font-size:12px; }
      .section-head { gap:10px; flex-wrap:wrap; margin-bottom:18px; }
      .section-head h2 { font-size:16px; }
      section + section { margin-top:48px; }
      .process { grid-template-columns:1fr; gap:16px; }
      footer .wrap { flex-wrap:wrap; }
    }
    @media (max-width:360px) { .gallery { grid-template-columns:1fr; } }
    @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

    .side-nav .nav-featured { color:var(--accent); font-weight:650; }
    .featured-panel { display:grid; grid-template-columns:1.1fr 1fr; grid-template-areas:"heading heading" "details art"; background:#f5f1e8; border:1px solid #e8e1d4; }
    .feature-copy { display:contents; }
    .feature-heading { grid-area:heading; min-width:0; padding:32px 32px 18px; }
    .feature-details { grid-area:details; min-width:0; padding:0 32px 32px; }
    .feature-copy .eyebrow { margin-bottom:14px; }
    .feature-title-row { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; }
    .feature-title-row h2, .feature-title-row .tagline { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; }
    .feature-copy h2 { margin:0; font-size:clamp(40px,4.2vw,56px); font-weight:500; line-height:1.3; letter-spacing:.1em; }
    .feature-copy .tagline { margin:0 0 0 auto; max-width:100%; text-align:right; font-size:15px; }
    .feature-copy .description { font-size:13px; }
    .feature-copy .button.primary-link { background:var(--accent); border-color:var(--accent); }
    .feature-copy .button-row { gap:10px; }
    .feature-copy .button { font-size:12px; }
    .feature-copy .button:last-child { flex-basis:100%; background:rgba(255,255,255,.4); }
    .feature-art { grid-area:art; display:flex; align-items:center; min-width:0; overflow:hidden; }
    .feature-art img { display:block; width:100%; height:auto; }
    .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .gallery-caption { align-items:flex-start; flex-direction:column; gap:3px; }
    @media (max-width:1050px) {
      .featured-panel { grid-template-columns:1fr; grid-template-areas:"heading" "art" "details"; }
      .feature-art { justify-content:center; }
      .feature-art img { width:min(100%,600px); }
      .feature-copy .button:last-child { flex-basis:auto; }
    }
    @media (max-width:600px) {
      .feature-heading { padding:25px 20px 18px; }
      .feature-details { padding:0 20px 25px; }
      .feature-copy h2 { font-size:44px; }
      .feature-copy .tagline { font-size:14px; }
      .feature-copy .button:last-child { flex-basis:100%; }
      .feature-art { max-height:none; }
      .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    @media (max-width:360px) {
      .gallery { grid-template-columns:1fr; }
      .feature-heading { padding:22px 16px 18px; }
      .feature-details { padding:0 16px 22px; }
      .feature-copy h2 { font-size:38px; }
    }
  
    .header-tools { display:flex; flex-direction:column; align-items:flex-end; gap:18px; }
    .language-switch { display:flex; align-items:center; gap:3px; font-size:11px; }
    .translation-icon { width:20px; height:20px; margin-right:8px; color:var(--muted); }
    .language-switch a { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; padding:6px; text-decoration:none; border:1px solid var(--line); }
    .language-switch a[aria-current="page"] { background:var(--ink); color:white; border-color:var(--ink); }
    .language-switch a:hover { border-color:var(--accent); }
    .product-card { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); align-items:center; gap:32px; background:#f5f1e8; border:1px solid #e8e1d4; }
    .product-card .gallery-image { aspect-ratio:630/500; }
    .product-copy { min-width:0; padding:24px 28px 24px 0; }
    .product-copy .gallery-caption { margin:0; gap:12px; }
    .product-copy .gallery-caption h3 { font-size:24px; font-weight:500; line-height:1.5; }
    .product-copy p { margin-top:18px; font-size:13px; }
    .gallery-caption span { white-space:normal; }
    html[lang="en"] .side-nav a { letter-spacing:.02em; }
    html[lang="en"] .feature-copy h2 { letter-spacing:.03em; }
    @media (max-width:600px) {
      .header-tools { gap:14px; }
      .side-nav { gap:4px 18px; }
      .product-card { grid-template-columns:1fr; gap:0; }
      .product-copy { padding:22px; }
      .product-copy .gallery-caption h3 { font-size:22px; }
      .product-copy p { margin-top:12px; }
    }
    /* 広い画面では小さな作品を3列に並べ、作品が増えても縦に伸びすぎないようにする。 */
    @media (min-width:1051px) {
      #works .gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
    }