/* FilmPresso articles: note-inspired editorial layout */
:root { --note-ink: #222; --note-muted: #6b6b6b; --note-line: #e8e8e8; --note-bg: #fff; }
html, body { background: var(--note-bg) !important; color: var(--note-ink) !important; }
body { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif !important; line-height: 2 !important; }
.wrap { width: min(720px, calc(100% - 40px)) !important; }
.article-site-header { border-bottom:1px solid #eadfca; background:#f8f0df; }
.article-site-header__inner { width:min(1180px,calc(100% - 48px)); min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:28px; margin:0 auto; }
.article-site-brand { display:flex; flex-direction:column; gap:4px; color:var(--note-ink); line-height:1; text-decoration:none; }
.article-site-brand > span { font-family:Georgia,"Hiragino Mincho ProN",serif; font-size:1.48rem; font-weight:700; letter-spacing:.07em; }
.article-site-brand__dot { color:#b67d3c; }
.article-site-brand small { color:var(--note-muted); font-size:.56rem; letter-spacing:.18em; }
.article-site-nav ul { display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }
.article-site-nav a { color:#555; font-size:.76rem; letter-spacing:.1em; line-height:1; text-decoration:none; transition:color .18s ease; }
.article-site-nav a:hover { color:var(--note-ink); }
.article-site-nav .article-site-nav__price { display:inline-block; padding:7px 16px; border:1px solid #c9a878; border-radius:999px; color:#8d6736; }
.article-site-nav .article-site-nav__contact { display:inline-block; padding:8px 16px; border-radius:999px; background:#222; color:#fff; font-weight:700; letter-spacing:.08em; }
.article-site-menu { display:none; width:40px; height:40px; padding:9px; border:0; background:transparent; color:var(--note-ink); cursor:pointer; }
.article-site-menu span { display:block; width:100%; height:2px; margin:5px 0; background:currentColor; transition:transform .2s ease, opacity .2s ease; }
.article-site-menu[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.article-site-menu[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.article-site-menu[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.hero { padding: 0 !important; background: #fff !important; color: var(--note-ink) !important; }
.hero .nav { display:none !important; }
.brand { font-size: .92rem; letter-spacing: .05em !important; }
.nav-link { color: var(--note-muted); font-size: .82rem !important; opacity: 1 !important; text-decoration: none; }
.hero > .wrap:not(.nav) { display: block; padding: 0; }
.hero h1, .hero p { display: none; }
.eyebrow { display: none; }
.hero h1, .article h2, .cta h2 { font-family: inherit !important; color: var(--note-ink) !important; }
.hero h1 { max-width: 680px; margin: 0 0 18px !important; font-size: clamp(2rem, 5vw, 2.8rem) !important; font-weight: 700; letter-spacing: -.035em; line-height: 1.42 !important; }
.hero p { color: var(--note-muted) !important; font-size: 1rem !important; line-height: 1.9 !important; }
.article { display: flex; flex-direction: column; padding: 40px 0 76px !important; }
.article-page-layout { width:min(1180px,calc(100% - 48px)); display:grid; grid-template-columns:220px minmax(0,1fr); gap:36px; margin:0 auto; }
.article-page-layout .article.wrap { width:100% !important; margin:0 !important; }
.article-genres { position:sticky; top:24px; align-self:start; padding-top:44px; }
.article-genres h2 { margin:0 0 15px; color:var(--note-muted); font-size:.76rem; font-weight:700; letter-spacing:.12em; line-height:1.5; }
.article-genres .genre-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--note-line); }
.article-genres li { margin:0; border-bottom:1px solid var(--note-line); }
.article-genres .genre-button { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; color:#555; font:inherit; font-size:.91rem; line-height:1.5; text-align:left; text-decoration:none; transition:color .18s ease, padding-left .18s ease; }
.article-genres .genre-button:hover, .article-genres .genre-button[aria-current="page"] { padding-left:8px; color:var(--note-ink); font-weight:700; }
.article-genres .genre-count { color:#999; font-size:.74rem; font-variant-numeric:tabular-nums; }
.article-genres .genre-button[aria-current="page"] .genre-count { color:var(--note-ink); }
.article::before { content: attr(data-title); order: -2; margin: 0 0 12px; color: var(--note-ink); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.42; }
.article-series-id { order: -1; margin: 0 0 28px !important; color: var(--note-muted); font-size: .72rem !important; font-weight: 700; letter-spacing: .12em; line-height: 1.5 !important; }
.lead { margin: 0 0 32px !important; font-size: 1.12rem !important; font-weight: 600 !important; line-height: 2 !important; }
.note-thumbnail, .thumb { order: -3; margin: 0 0 34px !important; border: 1px solid var(--note-line); border-radius: 0 !important; box-shadow: none !important; }
.article h2 { margin: 64px 0 20px !important; padding-top: 6px; font-size: clamp(1.42rem, 4vw, 1.8rem) !important; font-weight: 700; line-height: 1.6 !important; letter-spacing: -.02em; }
.article h3 { margin: 34px 0 8px !important; font-size: 1rem !important; }
.article p, .article li { font-size: 1rem !important; }
.article ul { padding-left: 1.35em !important; }
.article-related { padding:72px 0 88px; border-top:1px solid var(--note-line); background:#fff; }
.article-related__inner { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.article-related h2 { margin:0 0 26px; color:var(--note-ink); font-size:1.25rem; line-height:1.5; letter-spacing:-.02em; }
.article-related__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 20px; }
.article-related__card { display:block; color:inherit; text-decoration:none; }
.article-related__thumb { overflow:hidden; background:#f5f5f5; aspect-ratio:1.91 / 1; }
.article-related__thumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.article-related__card:hover .article-related__thumb img { transform:scale(1.025); }
.article-related__card span { display:block; margin-top:13px; color:#777; font-size:.68rem; font-weight:700; letter-spacing:.1em; line-height:1.5; }
.article-related__card h3 { margin:7px 0 0; color:var(--note-ink); font-size:1rem !important; font-weight:700; line-height:1.6; letter-spacing:-.01em; }
.article-related__card:hover h3 { text-decoration:underline; text-underline-offset:4px; }
.article-related__more { display:inline-block; margin-top:28px; color:var(--note-ink); font-size:.86rem; font-weight:700; text-underline-offset:4px; }
.point { margin: 38px 0 !important; padding: 6px 0 6px 20px !important; background: transparent !important; border: 0 !important; border-left: 3px solid #222 !important; }
.steps { gap: 0 !important; margin: 28px 0 !important; border-top: 1px solid var(--note-line); }
.step { padding: 20px 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--note-line); border-radius: 0 !important; }
.step strong { margin-bottom: 4px; color: var(--note-ink) !important; font-size: .78rem !important; letter-spacing: .08em !important; }
.cta { padding: 72px 20px !important; background: #fafafa !important; color: var(--note-ink) !important; border-top: 1px solid var(--note-line); text-align: left !important; }
.cta .wrap { max-width: 720px; }
.cta h2 { margin: 0 0 14px !important; font-size: clamp(1.45rem, 4vw, 1.9rem) !important; }
.cta p { margin: 0 0 25px !important; color: var(--note-muted) !important; }
.button { padding: 13px 20px !important; background: #222 !important; color: #fff !important; border-radius: 4px !important; font-size: .92rem; }
.faq { padding: 64px 0 !important; }
.faq h2 { font-family: inherit !important; font-size: 1.45rem; }
.faq details { border-color: var(--note-line) !important; }
.footer { padding: 28px 0 !important; background: #fff !important; color: var(--note-muted) !important; border-top: 1px solid var(--note-line); }
@media (max-width: 760px) { .article-site-header__inner { width:min(100% - 32px,1180px); min-height:64px; } .article-site-brand > span { font-size:1.25rem; } .article-site-nav { position:absolute; top:65px; left:0; right:0; z-index:10; max-height:0; overflow:hidden; visibility:hidden; border-bottom:1px solid var(--note-line); background:#fff; opacity:0; transition:max-height .25s ease, opacity .2s ease, visibility .2s ease; } .article-site-nav.is-open { max-height:420px; visibility:visible; opacity:1; } .article-site-nav ul { display:block; padding:6px 0; } .article-site-nav li { border-bottom:1px solid var(--note-line); } .article-site-nav a, .article-site-nav .article-site-nav__price, .article-site-nav .article-site-nav__contact { display:block; padding:14px 24px; border:0; border-radius:0; background:transparent; color:#555; box-shadow:none; font-size:.91rem; font-weight:500; text-align:left; } .article-site-menu { display:block; } .article-page-layout { display:block; width:100%; } .article-page-layout .article.wrap { width:min(100% - 32px,720px) !important; margin:0 auto !important; } .article-genres { position:static; width:min(100% - 32px,720px); margin:0 auto 10px; padding:22px 0 0; } .article-genres h2 { margin-bottom:8px; } .article-genres .genre-list { display:flex; overflow-x:auto; margin:0 -16px; padding:0 16px; border-bottom:1px solid var(--note-line); scrollbar-width:none; } .article-genres .genre-list::-webkit-scrollbar { display:none; } .article-genres li { flex:0 0 auto; border:0; } .article-genres .genre-button { padding:9px 16px 11px 0; font-size:.84rem; white-space:nowrap; } .article-genres .genre-button:hover, .article-genres .genre-button[aria-current="page"] { padding-left:0; } .article-genres .genre-count { display:none; } .article-related { padding:52px 0 60px; } .article-related__inner { width:min(100% - 32px,1180px); } .article-related h2 { margin-bottom:20px; } .article-related__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 14px; } .article-related__card h3 { font-size:.92rem !important; } }
@media (max-width: 600px) { .wrap { width: min(100% - 32px, 720px) !important; } .article { padding: 28px 0 52px !important; } .article::before { margin-bottom: 10px; font-size: 1.55rem; } .article-series-id { margin-bottom: 22px !important; } .article h2 { margin-top: 48px !important; } .cta { padding: 52px 16px !important; } }