/* _shared/reset.css — 全テンプレ共通リセット */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100dvh; line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, picture, video, svg, iframe { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } h1, h2, h3, h4 { line-height: 1.4; overflow-wrap: anywhere; } p { overflow-wrap: anywhere; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* reveal 基本形: テンプレ側で上書き可 */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; } [data-reveal].is-visible { opacity: 1; transform: none; } /* reveal バリアント: curtain（画像の幕引きリビール。figure等に付与）注意: clip-pathで要素自体を隠すとIntersectionObserverが発火しない（実測済み）。幕（::after）を上に重ねて引くオーバーレイ方式で実装する。幕の色は各テンプレの :root { --bg } を使う（未定義なら白）。 */ [data-reveal="curtain"] { opacity: 1; transform: none; position: relative; overflow: hidden; /* scale中のimgのはみ出し＝横スクロール発生を防止 */ } [data-reveal="curtain"]::after { content: ""; position: absolute; inset: -1px; background: var(--bg, #fff); transform: scaleX(1); transform-origin: right; transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1); z-index: 2; pointer-events: none; } [data-reveal="curtain"] img, [data-reveal="curtain"] video { transform: scale(1.12); transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1); } [data-reveal="curtain"].is-visible::after { transform: scaleX(0); } [data-reveal="curtain"].is-visible img, [data-reveal="curtain"].is-visible video { transform: scale(1); } /* reveal バリアント: line（見出し下から静かに立ち上がる） */ [data-reveal="line"] { opacity: 0; transform: translateY(100%); transition: opacity .9s ease, transform .9s cubic-bezier(0.19, 1, 0.22, 1); } [data-reveal="line"].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal="curtain"], [data-reveal="line"] { opacity: 1; transform: none; clip-path: none; } [data-reveal="curtain"]::after { display: none; } [data-reveal="curtain"] img, [data-reveal="curtain"] video { transform: none; } } /* 粒子テクスチャ（opt-in: bodyに .u-grain）— 高級紙の質感 */ .u-grain::before { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.04; 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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* カスタムカーソル（opt-in: + shared.js） */ html.has-custom-cursor, html.has-custom-cursor body, html.has-custom-cursor a, html.has-custom-cursor button, html.has-custom-cursor [role="button"] { cursor: none; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none; border-radius: 50%; will-change: transform; } .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: currentColor; color: #1c1b19; transition: opacity .3s ease; } .cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid currentColor; color: #1c1b19; opacity: .55; transition: width .35s ease, height .35s ease, margin .35s ease, opacity .3s ease; } html.cursor-hover .cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; opacity: .9; } /* ダーク背景テンプレ用: bodyに .cursor-light */ .cursor-light .cursor-dot, .cursor-light .cursor-ring { color: #eae6de; } /* デモ帯共通スタイル（テンプレ側でトーン調整可） */ .demo-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; gap: 12px; padding: 8px 16px; font-size: 12px; line-height: 1.5; background: rgba(20, 20, 20, .92); color: #fff; } .demo-bar p { flex: 1; overflow-wrap: anywhere; } .demo-bar .js-demo-close { flex-shrink: 0; padding: 4px 10px; font-size: 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; color: #fff; }