/* Approved reading scale: 1680 design units = 864 CSS pixels. */
html { scroll-behavior:auto; }
.portfolio-case { --canvas-width:987.428571px; --reading-width:864px; }
.portfolio-case * { box-sizing:border-box; }
.portfolio-case .skip-link { z-index:40; }
.portfolio-header { position:sticky; top:0; z-index:30; background:#fff; color:#000; border-bottom:1px solid #ededed; }
.header-inner { width:min(calc(100% - 64px),var(--reading-width)); min-height:64px; margin:auto; display:flex; align-items:center; gap:32px; }
.portfolio-name { font-size:12px; font-weight:var(--weight-title); white-space:nowrap; margin-right:auto; }
.project-nav { display:flex; gap:27px; }
.project-nav a { font-size:12px; min-height:44px; display:flex; align-items:center; color:#737373; position:relative; }
.project-nav a[aria-current],.project-nav a:hover { color:#000; }
.project-nav a[aria-current]::after { content:""; position:absolute; bottom:8px; inset-inline:0; height:1px; background:currentColor; }
.chapter-menu { position:relative; font-size:12px; }
.chapter-menu summary { display:flex; align-items:center; gap:6px; min-height:44px; cursor:pointer; list-style:none; }
.chapter-menu summary::-webkit-details-marker { display:none; }
.chapter-menu[open] svg { transform:rotate(180deg); }
.chapter-menu nav { position:absolute; right:0; top:48px; width:218px; max-height:70vh; overflow:auto; padding:12px; background:#fff; border:1px solid #ddd; box-shadow:0 10px 24px #0000000d; }
.chapter-menu nav a { display:block; padding:10px 12px; line-height:1.5; }
.chapter-menu nav a:hover,.chapter-menu nav a:focus-visible { background:#f5f5f5; }
.chapter-menu summary:focus-visible { outline:2px solid #000; outline-offset:2px; }
.portfolio-case main { outline:none; }
.chapter { scroll-margin-top:64px; background:#fff; }
.chapter.dark { background:#000; color:#fff; }
.composition-window { width:var(--canvas-width); max-width:100%; margin:auto; container-type:inline-size; scroll-margin-top:64px; }
.composition { position:relative; width:1920px; height:var(--source-height); zoom:0.514285714; font-family:var(--case-font); line-height:1.5; overflow:hidden; }
.composition * { border-style:solid; border-width:0; --tx:0; --ty:0; --r:0deg; --sk:0deg; --sx:1; --sy:1; }
.composition p { margin:0; }
.portfolio-case .composition [data-node-id="694:105624"],.portfolio-case .composition [data-node-id="694:105627"] { color:#404d60; }
.portfolio-case .composition [data-node-id="694:105270"],.portfolio-case .composition [data-node-id="694:105347"],.portfolio-case .composition [data-node-id="694:105351"],.portfolio-case .composition [data-node-id="694:105468"],.portfolio-case .composition [data-node-id="694:105492"],.portfolio-case .composition [data-node-id="694:105496"] { color:#737373; }
.composition img { display:block; max-width:100%; }
.composition>div { width:1920px; height:var(--source-height); }
.composition .sr-only,.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip:rect(0,0,0,0); overflow:hidden; white-space:nowrap; border:0; }
/* The accepted reminder retains its original layout and spacing in styles.css. */
.portfolio-footer { width:min(calc(100% - 64px),var(--reading-width)); margin:auto; padding:36px 0 48px; display:flex; align-items:center; justify-content:space-between; gap:24px; font-size:11.7px; border-top:1px solid #e8e8e8; color:#737373; }
.portfolio-footer a { min-height:44px; display:inline-flex; align-items:center; gap:12px; }
.next-project { color:#000; }
.portfolio-case a:hover { text-decoration:underline; }
.project-nav a:hover { text-decoration:none; }
.portfolio-case { scrollbar-color:#bcbcbc #fff; }
.mobile-reading,.zoom-art { display:none; }
@media(max-width:987px) {
  .composition { zoom:var(--composition-fit,var(--art-scale,.514285714)); }
}
@media(max-width:760px) {
  .header-inner { width:calc(100% - 40px); min-height:60px; gap:20px; }
  .portfolio-name { font-size:11px; }
  .project-nav { gap:16px; }
  .project-nav a,.chapter-menu { font-size:11px; }
  .chapter { scroll-margin-top:60px; }
  .portfolio-footer { width:calc(100% - 48px); gap:12px; font-size:11px; flex-wrap:wrap; }
  .mobile-reading { display:block; width:calc((100% - 48px) * .9); max-width:540px; margin:auto; padding:40px 0 4px; }
  .mobile-reading h3 { margin:0 0 12px; font-size:18px; line-height:1.45; font-weight:var(--weight-title); }
  .mobile-reading p { margin:0 0 20px; color:#737373; font-size:13.5px; line-height:1.8; }
  .dark .mobile-reading p { color:#aaa; }
  .mobile-reading p+h3 { margin-top:32px; }
  .zoom-art { display:flex; margin:0 auto; padding:12px 16px 20px; min-height:44px; align-items:center; background:none; border:0; color:inherit; opacity:.75; font:inherit; font-size:11px; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
  .zoom-art:focus-visible { outline:2px solid currentColor; outline-offset:-4px; }
  .composition-window.is-enlarged { overflow:auto; }
  .composition-window.is-enlarged .composition { zoom:.514285714; }
}
@media(max-width:400px) { .portfolio-name { font-size:0; } .portfolio-name::after { content:"作品集"; font-size:11px; } .header-inner{gap:16px;} }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }