:root{
  --bg:#f4f0e8; --fg:#2a2722; --mute:#8a8378; --line:#ddd6ca;
  --en:"Outfit",sans-serif; --ja:"Zen Kaku Gothic New",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--ja);font-weight:300;line-height:1.9;letter-spacing:.08em;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* film grain */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:100;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(4) infinite}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}}

.en{font-family:var(--en);font-weight:300;letter-spacing:.32em;text-transform:uppercase}

/* opening */
.open{position:relative;height:100vh;height:100svh;min-height:520px;display:grid;place-items:center}
.open .title{display:flex;flex-direction:column;align-items:center;gap:28px}
.open .logo,.open .sub .jp,.open .sub .en{animation:float 2.6s cubic-bezier(.22,.61,.36,1) both}
.open .logo{animation-delay:1.9s}
.open .sub .jp{animation-delay:1.3s}
.open .sub .en{animation-delay:1.7s}
.open .logo{width:min(240px,56vw)}
.open .sub{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--mute)}
.open .sub .jp{font-size:12px;letter-spacing:.4em;color:#6d675d}
.open .sub .en{font-size:10px}
.open .meta{position:absolute;font-size:10px;color:var(--mute);animation:fade 2.4s 3.6s ease both}
.open .m1{top:32px;left:36px}.open .m2{top:32px;right:36px}.open .m3{bottom:32px;left:36px}.open .m4{bottom:32px;right:36px}
.cue{position:absolute;bottom:32px;left:50%;width:1px;height:56px;background:linear-gradient(var(--mute),transparent);transform-origin:top;animation:cue 2.4s 4.4s ease-in-out infinite both}
@keyframes fade{from{opacity:0}}
@keyframes float{from{opacity:0;transform:translateY(14px);filter:blur(10px)}60%{filter:blur(0)}to{opacity:1;transform:none;filter:none}}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* credits */
.credits{max-width:880px;margin:0 auto;padding:0 24px}
.block{padding:120px 0;text-align:center}
.block h2{font-size:11px;color:var(--mute);margin-bottom:56px;display:flex;align-items:center;justify-content:center;gap:20px}
.block h2::before,.block h2::after{content:"";width:40px;height:1px;background:var(--line)}
.roll{display:grid;grid-template-columns:1fr 1fr;gap:18px 48px;text-align:left}
.roll dt{text-align:right;font-family:var(--en);font-weight:300;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);padding-top:5px}
.roll dd{font-size:16px;font-weight:400}

.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:80px 40px}
.app{max-width:320px;margin:0 auto}
.app .ic{width:60px;height:60px;border-radius:14px;overflow:hidden;margin:0 auto 22px;}
.app .ph{display:grid;place-items:center;background:#e6e0d4;font-family:var(--en);font-size:16px;letter-spacing:.1em;color:var(--fg)}
.app h3{font-family:var(--en);font-weight:400;font-size:18px;letter-spacing:.12em}
.app h3.ja{font-family:var(--ja);font-weight:400}
.app .tag{font-size:13px;color:var(--mute);margin-top:2px}
.app p{font-size:13px;line-height:2;margin-top:16px;color:#4d4840}
.app .st{margin-top:14px;font-size:10px;color:var(--mute)}
.app .links{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:10px}
.app .links a{white-space:nowrap}
.app .links a{color:var(--fg);border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .4s}
.app .links a:hover{border-color:var(--fg)}

.roll a.ml{border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .4s}
.roll a.ml:hover{border-color:var(--fg)}


/* end card */
.end{height:80vh;min-height:420px;display:grid;place-items:center;text-align:center}
.end .mark{width:64px;margin:0 auto 28px}
.end small{font-size:10px;color:var(--mute)}
.end nav{margin-top:40px;display:flex;gap:28px;justify-content:center;font-size:11px;color:var(--mute)}
.end nav a:hover{color:var(--fg)}

.rv{opacity:0;transform:translateY(16px);transition:opacity 1.4s ease,transform 1.4s ease}
.rv.in{opacity:1;transform:none}


@media (max-width:900px){.apps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .apps{grid-template-columns:1fr;gap:64px}
  .open .meta{display:none}
  .block{padding:88px 0}
  .roll{grid-template-columns:1fr;gap:4px;text-align:center}
  .roll dt{text-align:center;padding-top:20px}
  .roll dt:first-child{padding-top:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* pages (privacy, support etc.) */
.page-hd{padding:40px 24px;text-align:center}
.page-hd .logo{width:120px;display:inline-block}
.article{max-width:720px;margin:0 auto;padding:40px 24px 120px}
.article h1{font-size:22px;font-weight:400;letter-spacing:.12em;text-align:center;margin-bottom:56px}
.content{font-size:15px;line-height:2.1;color:#3a3631;font-weight:400}
.content h2{font-size:17px;font-weight:500;color:var(--fg);margin:56px 0 16px;letter-spacing:.08em}
.content h3{font-size:15px;font-weight:500;color:var(--fg);margin:36px 0 12px}
.content p,.content ul,.content ol,.content table{margin:0 0 20px}
.content ul,.content ol{padding-left:1.4em}
.content a{color:var(--fg);border-bottom:1px solid #cfc6b6;transition:border-color .4s}
.content a:hover{border-bottom-color:var(--fg)}
.content table{width:100%;border-collapse:collapse;font-size:14px}
.content th,.content td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.content img{height:auto}
.content .meta{font-size:13px;color:var(--mute)}
.page-end{padding:40px 24px 64px;text-align:center}
.page-end a{font-size:10px;color:var(--mute)}

/* 以前のテーマ向けに各ページへ直接書かれたスタイル（.genba-doc / .tegaki-doc など）を、サイトの見た目に合わせて上書きする */
.content [class$="-doc"]{color:inherit!important;max-width:none!important;padding:0!important;font-size:inherit!important;line-height:inherit!important}
.content [class$="-doc"] a{color:var(--fg)!important}
.content [class$="-doc"] h2{border-left:0!important;padding-left:0!important;font-size:17px!important;margin:56px 0 16px!important}
.content [class$="-doc"] h3,.content [class$="-doc"] .q{color:var(--fg)!important;font-weight:500!important}
.content [class$="-doc"] .meta{color:var(--mute)!important;font-size:13px!important}
.content [class$="-doc"] hr{border-top-color:var(--line)!important}
.content [class$="-doc"] h1{font-size:20px!important;font-weight:400!important;color:var(--fg)!important;margin:72px 0 24px!important}
/* ページ見出しと同じ題名が本文の先頭にもある場合は隠す */
.content > h1:first-child,.content > h2:first-child,.content [class$="-doc"] > h1:first-child{display:none}
.content > p:has(> style:only-child){display:none}

/* アプリのアイコンを1つずつふわっと出す */
.app .ic{opacity:0;transform:translateY(12px);filter:blur(8px);transition:opacity 1.6s ease,transform 1.6s cubic-bezier(.22,.61,.36,1),filter 1.6s ease;transition-delay:calc(var(--d,0s) + .2s)}
.app.in .ic{opacity:1;transform:none;filter:none}
.app.rv{transition-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){.app .ic{opacity:1;transform:none;filter:none}}

/* トップの背景（部屋を少し暗くして、ロゴにスポットライトを当てる）。中身はその上に重ねる */
#beam{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.open,.credits,.end{position:relative;z-index:1}

/* アプリのページ（サポート・プライバシーポリシー・利用規約）：アプリごとの色で、紹介ページ（/tegaki/）のように
   明るい地に紙を置き、テープの見出しで留める。アプリの一覧と色は functions.php の forpix_apps() とここで対応させる */
/* アプリごとの色。地はどれも明るい色にする（黒い地は使わない） */
body.app-page{--paper:#fff;--soft:#444;--tape:rgba(0,0,0,.1);--tape-fg:var(--fg);--mark:var(--fg);--link:var(--fg);--pattern:none}
body.app-page::after{opacity:.025}
body.app-tegaki{--bg:#EDE8DF;--fg:#3B4880;--soft:#4F5880;--mute:#6F7698;--line:#DCD6CA;--paper:#FAFAF6;--tape:rgba(233,124,99,.55);--mark:#D0654A;--link:#1F8AA6;
  --pattern:linear-gradient(#E3DFD5 1px,transparent 1px) 0 0/19px 19px,linear-gradient(90deg,#E3DFD5 1px,transparent 1px) 0 0/19px 19px}
body.app-tanchou{--bg:#ECEEF4;--fg:#14237A;--soft:#323C77;--mute:#6A7299;--line:#D6DAEA;--paper:#FFFFFF;--tape:rgba(232,65,47,.22);--mark:#E8412F;--link:#2B47B5;
  --pattern:repeating-linear-gradient(transparent 0 31px,#E6E9F3 31px 32px)}
body.app-genbapdf{--bg:#EEEAE2;--fg:#2A2E38;--soft:#3A3D46;--mute:#7C7A74;--line:#E3DCCB;--paper:#F8F5EE;--tape:#E8692E;--tape-fg:#FFF8EE;--mark:#E8692E;--link:#C4521F;
  --stripe:repeating-linear-gradient(-45deg,#E8692E 0 14px,#F8F5EE 14px 28px)}
body.app-shootingclock{--bg:#EDEDEA;--fg:#1C1C1C;--soft:#3A3A3A;--mute:#77777A;--line:#E2E2DE;--paper:#FFFFFF;--tape:#1C1C1C;--tape-fg:#FFFFFF;--mark:#D0302A;--link:#C62828;
  --stripe:repeating-linear-gradient(90deg,#1C1C1C 0 24px,#FFFFFF 24px 48px)}

.app-page .page-hd{padding:28px 24px 8px}
.app-page .page-hd .logo{width:104px}
.ad{max-width:820px;margin:0 auto;padding:32px 20px 24px;letter-spacing:.04em}
.ad-app{display:flex;align-items:center;gap:14px;color:var(--fg)}
.ad-app img{width:52px;height:52px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.ad-app b{display:block;font-family:var(--en);font-weight:500;font-size:20px;letter-spacing:.12em;line-height:1.3}
.ad-app small{display:block;font-size:12px;color:var(--mute);letter-spacing:.08em;line-height:1.5}
.ad-kind{display:inline-block;margin-top:36px;padding:4px 18px 3px;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--tape-fg);background:var(--tape);
  transform:rotate(-2deg);clip-path:polygon(2% 0,98% 4%,100% 50%,97% 100%,3% 96%,0 48%)}
.ad h1{font-size:clamp(24px,3.6vw,34px);font-weight:700;line-height:1.4;letter-spacing:.04em;color:var(--fg);margin:14px 0 32px}
.ad-paper{position:relative;background:var(--pattern),var(--paper);border-radius:6px;overflow:hidden;
  padding:clamp(32px,6vw,64px) clamp(22px,6vw,72px);box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 40px -22px rgba(0,0,0,.35)}
.app-genbapdf .ad-paper,.app-shootingclock .ad-paper{padding-top:calc(clamp(32px,6vw,64px) + 12px)}
.app-genbapdf .ad-paper::before,.app-shootingclock .ad-paper::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:var(--stripe)}
.ad .content{color:var(--soft);font-size:15px;line-height:2.05}
.ad .content [class$="-doc"]{color:inherit!important}
.ad .content h2,.ad .content [class$="-doc"] h2{display:table;font-size:15px!important;font-weight:700!important;letter-spacing:.1em!important;color:var(--tape-fg)!important;
  background:var(--tape);padding:4px 16px 3px!important;margin:48px 0 18px!important;transform:rotate(-1.5deg);clip-path:polygon(1% 0,99% 5%,100% 50%,98% 100%,2% 95%,0 50%)}
.ad .content h3,.ad .content [class$="-doc"] h3,.ad .content [class$="-doc"] .q{position:relative;padding-left:16px;font-size:16px!important;font-weight:700!important;color:var(--fg)!important;margin:36px 0 10px}
.ad .content h3::before,.ad .content [class$="-doc"] .q::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--mark)}
.ad .content [class$="-doc"] .q{margin:28px 0 6px!important}
.ad .content a,.ad .content [class$="-doc"] a{color:var(--link)!important;border-bottom:1px solid currentColor}
.ad .content strong,.ad .content b{color:var(--fg);font-weight:700}
.ad .content th,.ad .content td{border-bottom-color:var(--line)}
.ad .content [class$="-doc"] hr{border-top-color:var(--line)!important}
.ad .content [class$="-doc"] h1{color:var(--fg)!important;font-weight:700!important}
.ad .content code{font-size:.9em;background:rgba(0,0,0,.05);padding:1px 5px;border-radius:4px}
.ad .content > p:first-child:has(> br:only-child),.ad .content > p:empty{display:none}
.ad-nav{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 8px}
.ad-nav a{font-size:13px;letter-spacing:.06em;color:var(--fg);padding:8px 18px;border:1px solid color-mix(in srgb,var(--fg) 28%,transparent);border-radius:999px;transition:background .3s,color .3s}
.ad-nav a:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.ad-nav a[aria-current="page"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
@media (max-width:640px){.ad{padding-top:20px}.ad h1{margin-bottom:24px}.ad-paper{border-radius:4px}}
.ad .content > h1:first-child,.ad .content > h2:first-child,.ad .content [class$="-doc"] > h1:first-child{display:none}