@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;600;700&family=Noto+Serif+JP:wght@300;400;500&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

/* Canonical net-print design settings. Gallery copy is generated at deploy time. */
:root {
  --washi:#faf9f5;
  --washi-2:#eff1ef;
  --paper:#fff;
  --sumi:#272a29;
  --sumi-2:#353b3a;
  --ink:#272a29;
  --ink-dim:#5c6463;
  --ink-line:#dce0dd;
  --aka:#9e2b25;
  --aka-2:#82221e;
  --aka-line:rgba(158,43,37,.25);
  --aka-faint:#f8eeee;
  --kin:#bbc4bf;
  --kin-2:#f3f5f2;
  --text-on-sumi:#f7f8f5;
  --text-dim-on-sumi:#c3cbc7;
  --font-ui:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --font-heading:'Shippori Mincho B1','Noto Serif JP',serif;
  --font-sans:var(--font-ui);
  --type-body:15px;
  --type-section:clamp(1.35rem,2.2vw,1.85rem);
  --type-page:clamp(1.8rem,3vw,2.75rem);
  --type-hero:clamp(2.4rem,4.5vw,4.3rem);
  --type-nav:.79rem;
  --type-button:.88rem;
  --studio-width:1280px;
  --studio-gutter:clamp(20px,4vw,64px);
  --header-height:88px;
}
body { font-family:var(--font-ui); font-size:var(--type-body); font-weight:400; line-height:1.85; letter-spacing:.025em; color:var(--ink); background:var(--washi); }
h1,h2,h3 { font-family:var(--font-heading); font-weight:600; letter-spacing:.06em; }
button,input,select,textarea { font-family:var(--font-ui); }
:where(a,button,input,select,textarea):focus-visible { outline:2px solid var(--aka); outline-offset:4px; }
:where(input,select,textarea) { accent-color:var(--aka); }
.section { padding:64px var(--studio-gutter); }
.section-inner { max-width:var(--studio-width); min-width:0; }
.section-head { gap:18px; margin-bottom:32px; align-items:center; }
.section-head h2 { font-size:var(--type-section); letter-spacing:.07em; }
.section-head .en { font-family:var(--font-ui); font-size:.65rem; letter-spacing:.12em; color:var(--ink-dim); }
.page-hero h1 { font-size:var(--type-page); line-height:1.5; letter-spacing:.06em; }
.cta,button.cta,.cta.on-washi { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:12px 24px; border-radius:3px; border:1px solid var(--aka); background:var(--aka); color:#fff; font-family:var(--font-ui); font-size:var(--type-button); letter-spacing:.055em; line-height:1.6; }
.cta:hover,button.cta:hover,.cta.on-washi:hover { background:var(--aka-2); border-color:var(--aka-2); color:#fff; }
@media (max-width:1120px) {
 :root { --type-hero:3rem; --header-height:68px; }
}
@media (max-width:800px) {
 :root { --type-section:1.5rem; --type-page:1.8rem; --type-hero:2.7rem; }
 .section { padding:44px 24px; }
}
@media (max-width:640px) {
 :root { --studio-gutter:20px; --type-section:1.4rem; --type-page:1.7rem; --type-hero:clamp(2rem,7vw,2.8rem); }
 .section { padding:36px 20px; }
 .section-head .en { font-size:.57rem; }
}

/* Header geometry is shared; each site's existing palette supplies the colors.
   Two tiers: row 1 = 28px service bar, row 2 = site menus. 28 + 59 + 1px border = 88px (border-box). */
body .site-header {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:28px minmax(59px,auto);
  align-items:center; gap:0 24px; min-height:88px; padding:0 var(--studio-gutter); flex-wrap:nowrap;
}
.site-header > .brand { grid-area:2/1; display:flex; align-items:center; gap:14px; min-width:0; flex-wrap:nowrap; }
.site-header .logo-plate { flex:none; display:inline-flex; align-items:center; }
.site-header .logo-plate img { display:block; height:36px; width:auto; }
.site-header .brand .wordmark { display:flex; flex-direction:column; min-width:0; line-height:1.4; }
.site-header .brand .wordmark .ja { font-family:var(--font-heading); font-size:clamp(.76rem,1.08vw,1rem); letter-spacing:.065em; white-space:nowrap; }
.site-header .brand .wordmark .en { margin:0; font-family:var(--font-ui); font-size:.56rem; letter-spacing:.2em; line-height:1.4; color:var(--ink); }
body .site-header .site-nav {
  grid-area:2/2/3/4; justify-self:end; display:flex; flex-flow:row nowrap; align-items:center;
  position:static; width:max-content; max-width:100%; min-width:0; height:auto;
  gap:20px; padding:0; margin:0; overflow:visible; visibility:visible; opacity:1;
  transform:none; pointer-events:auto; background:none;
  font-family:var(--font-ui); font-size:var(--type-nav); letter-spacing:.04em;
}
body .site-header .site-nav > * { flex-shrink:0; }
body .site-header .site-nav > a { padding:6px 0; font-family:var(--font-ui); font-size:inherit; letter-spacing:inherit; }
body .site-header .site-nav .nav-drop { position:relative; }
body .site-header .site-nav .nav-drop-btn { pointer-events:auto; display:inline-flex; font-family:var(--font-ui); font-size:inherit; letter-spacing:inherit; padding:6px 0; }
body .site-header .site-nav .nav-drop-btn::after { display:inline-block; }
body .site-header .site-nav .drop-menu { position:absolute; top:100%; left:auto; right:0; padding-top:10px; transform:none; visibility:hidden; opacity:0; }
body .site-header .site-nav .nav-drop:is(:hover,:focus-within,.open) .drop-menu { visibility:visible; opacity:1; }
body .site-header .site-nav .drop-menu-inner { min-width:190px; padding:10px 0; background:var(--paper); border:1px solid var(--ink-line); }
body .site-header .site-nav .drop-menu a { padding:10px 18px; font-family:var(--font-ui); font-size:.85rem; letter-spacing:.04em; }
body .site-header .site-nav .owners-link { display:inline-flex; align-items:center; justify-content:center; min-height:34px; height:34px; margin:0; padding:0 16px .1em; font-family:var(--font-ui); font-size:.78rem; font-weight:400; line-height:1.85; letter-spacing:.04em; border:1px solid var(--ink-line) !important; border-radius:3px; }
.site-header .language-switch { grid-area:1/3; position:relative; z-index:1; align-self:center; display:inline-flex; align-items:center; justify-content:center; gap:4px; margin:0; padding:0 0 0 16px; border:0; border-left:1px solid var(--ink-line); white-space:nowrap; }
.site-header .language-switch button { appearance:none; display:inline-flex; align-items:center; justify-content:center; min-width:28px; min-height:32px; padding:4px 3px; border:0; border-bottom:1px solid transparent; background:none; color:var(--ink-dim); font-family:var(--font-ui); font-size:.7rem; line-height:1.4; letter-spacing:.06em; cursor:pointer; }
.site-header .language-switch button:is(:hover,.active) { color:var(--aka); border-bottom-color:var(--aka); }
.site-header .language-switch button:focus-visible { outline:2px solid var(--aka); outline-offset:3px; }
body .site-header .nav-toggle { display:none; grid-area:2/4; flex:none; margin:0 -8px 0 0; width:40px; height:40px; }
/* Compact navigation also applies when English or member links need more room. */
body .site-header.header-compact { grid-template-columns:minmax(0,1fr) auto auto; grid-template-rows:auto; min-height:68px; }
body .site-header.header-compact > .brand { grid-area:1/1; }
body .site-header.header-compact .nav-toggle { display:block; grid-area:1/3; }
body .site-header.header-compact .language-switch { grid-area:1/2; }
body .site-header.header-compact .site-nav {
  display:flex; position:absolute; grid-area:auto; justify-self:stretch; inset:100% 0 auto; width:100%; max-width:none;
  height:calc(100dvh - var(--header-height)); flex-direction:column; align-items:stretch;
  gap:0; padding:18px 0 40px; overflow-y:auto; overscroll-behavior:contain;
  background:var(--washi); visibility:hidden; opacity:0; transform:translateY(-8px); pointer-events:none;
}
body .site-header.header-compact.nav-open .site-nav { visibility:visible; opacity:1; transform:none; pointer-events:auto; }
body .site-header.header-compact .site-nav > a { display:block; padding:14px 30px; font-size:.96rem; border-bottom:0; }
body .site-header.header-compact .site-nav .nav-drop { position:static; }
body .site-header.header-compact .site-nav .nav-drop-btn { display:block; pointer-events:none; padding:22px 30px 6px; font-size:.7rem; color:var(--ink-dim); border:0; }
body .site-header.header-compact .site-nav .nav-drop-btn::after { display:none; }
body .site-header.header-compact .site-nav .drop-menu { position:static; visibility:visible; opacity:1; transform:none; padding:0; }
body .site-header.header-compact .site-nav .drop-menu-inner { min-width:0; padding:0; border:0; box-shadow:none; background:none; }
body .site-header.header-compact .site-nav .drop-menu a { padding:12px 30px 12px 48px; font-size:.94rem; }
body .site-header.header-compact .site-nav .owners-link { display:inline-flex; margin:14px 30px; width:max-content; max-width:calc(100% - 60px); padding:11px 26px; min-height:34px; height:34px; font-family:var(--font-heading); font-size:.94rem; }
body .site-header.header-compact .site-nav .owner-name { margin:14px 30px; }
body .site-header.header-compact .site-nav .logout-form { display:block; margin:0; }
body .site-header.header-compact .site-nav > a.current::before { display:none; }
@media (min-width:1121px) and (max-width:1320px) {
 body .site-header { padding-left:28px; padding-right:28px; gap:0 18px; }
 body .site-header .site-nav { gap:14px; }
 .site-header .brand .wordmark .ja { font-size:.8rem; }
}
@media (max-width:1120px) {
 body .site-header { padding:13px 24px; gap:0 18px; }
 .site-header .brand .wordmark .ja { font-size:.92rem; }
}
@media (max-width:640px) {
 body .site-header { min-height:68px; padding:12px 16px; gap:0 10px; }
 .site-header > .brand { gap:9px; }
 .site-header .logo-plate img { height:28px; }
 .site-header .brand .wordmark .ja { font-size:.75rem; letter-spacing:.03em; white-space:normal; }
 .site-header .brand .wordmark .en { font-size:.47rem; letter-spacing:.13em; }
 .site-header .language-switch { padding-left:8px; gap:0; }
 .site-header .language-switch button { min-width:26px; font-size:.66rem; }
}
@media (max-width:360px) {
 .site-header .brand .wordmark .ja { font-size:.68rem; }
 .site-header .brand .wordmark .en { font-size:.43rem; }
}

.site-header #auth-nav > a { min-height:34px; height:34px; }

/* Match the print site's account control at its intermediate breakpoint. */
@media (min-width:1121px) and (max-width:1310px) {
 body .site-header .site-nav .owners-link { padding:0 10px .1em; font-size:.74rem; }
}