/* (thinking) のホームページ（2026-10-20 に作り直し）。 サイトそのものが、iPhone の中で動く (thinking) の画面。 - スマホ（幅 560 まで）: iPhone の枠が画面いっぱい（参考 a2olite.world と同じく、縁と島を描く） - それより広い: 真ん中に iPhone（402 × 874 の画面）。高さに合わせて site.js が transform で縮める。まわりは青空（アプリの仕分けの入口の動く背景と同じ絵） 色・書体・部品はアプリと同じ: 紙 #F6F1E7・仕分けの空 #FAFBFB → #BCD6FF・えんじ #8C1E40・メイン #FF4500・Instrument Serif・暗号の字 画面の中の部品の絵は Tools/site/make-site-images.swift がアプリの Assets から作る（assets/app/・assets/shots/） */ @font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Instrument Serif"; font-style: italic; src: url("../fonts/InstrumentSerif-Italic.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Thinking Cipher"; src: url("../fonts/ThinkingCipher-Regular.ttf") format("truetype"); font-display: block; } /* 日本語の書体（2026-10-20 オーナー: Noto Sans JP・太さ 500・字間 -0.55px・palt・縦 80% の平体 = ストアのスクショの訳の行と同じ）。 Tools/site/make-ja-font.py が、サイトで使う字だけに削り、縦 80% を字の形に焼き込んで作る。日本語の文を変えたら作り直す */ @font-face { font-family: "Thinking JP"; src: url("../fonts/ThinkingJP-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } :root { --paper: #F6F1E7; --ink: #2B2A28; --ink-soft: #66625C; --ink-faint: #9A958C; --line: rgba(43, 42, 40, 0.12); --card: #FFFFFF; --card-2: #FBF9F4; --sky-top: #FAFBFB; --sky-bottom: #BCD6FF; --accent: #FF4500; --burgundy: #8C1E40; --glass: rgba(255, 255, 255, 0.7); --glass-solid: #F3F5F8; --stage: #E7EEF8; /* スマホの iPhone のまわり・ブラウザの上の帯（theme-color）と同じ */ --serif: "Instrument Serif", "Times New Roman", Georgia, serif; --cipher: "Thinking Cipher", "Instrument Serif", serif; --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif; --mono: "Courier New", Courier, monospace; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .37 0 0 0 0 .28 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --screen-w: 402px; --screen-h: 874px; --rim: 4px; /* チタンの縁 */ --bezel: 7px; /* 黒い縁 */ --radius: 56px; /* 画面の角 */ color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --paper: #121212; --ink: #EDEAE4; --ink-soft: #ADA9A2; --ink-faint: #7E7A74; --line: rgba(237, 234, 228, 0.13); --card: #1E1E1D; --card-2: #252524; --sky-top: #232423; --sky-bottom: #444442; --glass: rgba(58, 58, 56, 0.68); --glass-solid: #343432; --grain: none; color-scheme: dark; } } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; height: 100%; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: var(--stage); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.6; overflow: hidden; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: #000; padding: 8px 12px; border-radius: 8px; } .skip:focus { left: 8px; } .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ページを移るとき、iPhone とタブバーはそのまま、画面の中身だけを入れ替える（対応したブラウザだけ） */ @view-transition { navigation: auto; } .device-frame { view-transition-name: device; } .tabbar { view-transition-name: tabbar; } .sky-toggle { view-transition-name: sky-toggle; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; } /* ---------- 舞台（iPhone のまわり） ---------- */ /* iPhone のまわりには空と、空の昼・夜の切り替えだけを置く（2026-10-20 オーナー「必要な情報は全部スマホの中だけに。枠外には文字を置きたくない」）。 昼 = 青空（アプリの仕分けの入口の動く背景と同じ絵の、上の白と青が混じるところ = 同じ日「空が全体的に青すぎる」）、 夜 = オーロラ（アプリの暗い見た目の背景）。止まった 1 コマを敷き、広い画面では site.js がその上で動画を流す。 どちらにするかは head の小さなスクリプトが html[data-sky] に書く（外の切り替えで選んだもの、なければ端末の見た目）。iPhone の中の見た目は変えない */ .stage { position: relative; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #E9F0FA url("../app/sky.avif") center / cover no-repeat; } [data-sky="dark"] .stage { background: #0F1512 url("../app/aurora.avif") center / cover no-repeat; } /* 昼の空にうすい白を重ねる（引きの絵にして増えた下の青を和らげる = 白と青が混じり合う見え方。2026-10-20） */ .stage::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(255, 255, 255, 0.22); transition: opacity 0.6s; } [data-sky="dark"] .stage::after { opacity: 0; } @media (prefers-color-scheme: dark) { html:not([data-sky]) .stage { background: #0F1512 url("../app/aurora.avif") center / cover no-repeat; } } .stage > * { position: relative; z-index: 1; } .stage > .sky-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; } [data-sky="light"] .stage > .sky-video[data-sky-video="light"].playing, [data-sky="dark"] .stage > .sky-video[data-sky-video="dark"].playing { opacity: 1; } /* 空の昼・夜の切り替え（iPhone の外の右下に、控えめに。スマホでは出さない = まわりがほとんど見えないため） */ .sky-toggle { position: absolute; z-index: 2; right: 20px; bottom: 20px; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); opacity: 0.75; transition: opacity 0.2s; } .sky-toggle:hover, .sky-toggle:focus-within { opacity: 1; } .sky-toggle button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: rgba(20, 30, 50, 0.7); } .sky-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } [data-sky="light"] .sky-toggle button[data-sky-set="light"], [data-sky="dark"] .sky-toggle button[data-sky-set="dark"] { background: rgba(255, 255, 255, 0.85); color: #1F2430; } [data-sky="dark"] .sky-toggle { background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } [data-sky="dark"] .sky-toggle button { color: rgba(255, 255, 255, 0.7); } .sep { margin: 0 8px; opacity: 0.5; } /* ---------- iPhone ---------- */ .device { width: calc((var(--screen-w) + 2 * (var(--rim) + var(--bezel))) * var(--fit, 1)); height: calc((var(--screen-h) + 2 * (var(--rim) + var(--bezel))) * var(--fit, 1)); } /* 縮めるのは transform で（指の位置を画面の中の座標に直しやすい = site.js の scaleOf） */ .device-frame { position: relative; width: calc(var(--screen-w) + 2 * (var(--rim) + var(--bezel))); height: calc(var(--screen-h) + 2 * (var(--rim) + var(--bezel))); transform: scale(var(--fit, 1)); transform-origin: 0 0; padding: var(--rim); border-radius: calc(var(--radius) + var(--rim) + var(--bezel)); background: linear-gradient(135deg, #D9D9DB 0%, #8E8E93 18%, #F2F2F4 36%, #9A9A9F 55%, #E4E4E7 74%, #7D7D82 100%); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 40px 80px rgba(20, 45, 100, 0.35), 0 12px 24px rgba(20, 45, 100, 0.25); } .device-key { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #6E6E73, #C7C7CC); } .key-action { left: -3px; top: 150px; height: 30px; } .key-up { left: -3px; top: 205px; height: 56px; } .key-down { left: -3px; top: 272px; height: 56px; } .key-power { right: -3px; top: 240px; height: 90px; background: linear-gradient(270deg, #6E6E73, #C7C7CC); } .screen { position: relative; width: 100%; height: 100%; border: var(--bezel) solid #050505; border-radius: calc(var(--radius) + var(--bezel)); overflow: hidden; isolation: isolate; background: var(--paper); --band: var(--paper); } .screen-paper, .screen-grid { background-color: var(--paper); background-image: var(--grain); } .screen-grid { background-image: var(--grain), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: auto, calc(100% / 6) 100%; } .screen-sky { background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom)); --band: var(--sky-top); } /* 時計の帯（アプリは時計と電池を隠す。島の高さだけ、同じ地を中身の手前に重ねる） */ .screen::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50px; z-index: 5; pointer-events: none; background: linear-gradient(180deg, var(--band) 62%, color-mix(in srgb, var(--band) 0%, transparent)); } .screen-sky::before { background: linear-gradient(180deg, var(--sky-top) 55%, rgba(250, 251, 251, 0)); } @media (prefers-color-scheme: dark) { .screen-sky::before { background: linear-gradient(180deg, var(--sky-top) 55%, rgba(35, 36, 35, 0)); } } .island { position: absolute; z-index: 20; top: 11px; left: 50%; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; } .island::after { content: ""; position: absolute; right: 14px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2B3A55, #0A0E18 60%); } /* いちばん上の段（2026-10-20 オーナー「左上に現在の時刻、右側に電池マークとこのアプリのマーク」。島の高さの真ん中にそろえる） */ .status { position: absolute; z-index: 21; left: 0; right: 0; top: 11px; height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px 0 42px; color: var(--ink); pointer-events: none; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; } /* 左はアプリの名前（2026-10-21 オーナー「左上の時計を (thinking) 固定に」。前は見ている人の今の時刻）。 携帯のキャリアの表示のように、iPhone の上の段と同じ字（SF Pro・太め）で（同じ日のオーナー「Instrument Serif じゃない方がいい」） */ .status-mark { line-height: 1; letter-spacing: -0.01em; } .status-right { display: flex; align-items: center; gap: 8px; } .battery { position: relative; width: 25px; height: 12.5px; border-radius: 4px; background: currentColor; } .battery::after { content: ""; position: absolute; right: -3px; top: 4.25px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; opacity: 0.45; } .battery i { display: none; } .status-star { width: 19px; height: 19px; fill: currentColor; } .home-bar { position: absolute; z-index: 25; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(0, 0, 0, 0.82); pointer-events: none; } /* ホーム以外では、ホームの線を押すとホームへ（iPhone で下から払うとホームに戻るのと同じ役目。押せる範囲は線より広く） */ a.home-bar { pointer-events: auto; cursor: pointer; } a.home-bar::before { content: ""; position: absolute; left: -20px; right: -20px; top: -14px; bottom: -8px; } a.home-bar:hover { background: rgba(0, 0, 0, 0.95); } @media (prefers-color-scheme: dark) { .home-bar { background: rgba(255, 255, 255, 0.85); } } /* スマホ: iPhone の枠を、まわりに空がのぞく大きさで真ん中に（2026-10-21 オーナー「スマホの幅をもう少し細くして、背景の青空・オーロラを スマホでも見れるように」。前は画面いっぱい）。高さはいっぱいにとり、幅は本物の iPhone に近い縦横の比（0.5）で決める */ @media (max-width: 560px) { :root { --rim: 3px; --bezel: 5px; --radius: 40px; } .stage { display: flex; align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom)); } .device { height: 100%; width: auto; aspect-ratio: 0.5; max-width: calc(100vw - 28px); } .device-frame { width: 100%; height: 100%; transform: none; } .device-key { display: none; } .island { width: 32%; margin-left: -16%; height: 30px; top: 9px; } .status { top: 9px; height: 30px; padding: 0 18px 0 22px; font-size: 14px; } .battery { width: 22px; height: 11px; } .status-star { width: 16px; height: 16px; } .sky-toggle { display: none; } /* 縦長の引きの空（動画が出るまでの 1 コマも縦長の版。2026-10-21） */ .stage { background-image: url("../app/sky-portrait.avif"); } [data-sky="dark"] .stage { background-image: url("../app/aurora-portrait.avif"); } } /* 画面の中のめくれる本文 */ .app { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; --pad: 16px; padding: 54px var(--pad) 48px; /* 下はホームの線のぶん（泡のタブバーを出していないので。2026-10-20） */ scrollbar-width: none; } .app::-webkit-scrollbar { display: none; } .app:focus { outline: none; } [data-back] .app, .has-back .app { padding-top: 92px; } /* 上の段の「<」（アプリの plainBackButton = 丸なしの <） */ .nav-back { position: absolute; z-index: 21; left: 10px; top: 50px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); } .nav-back svg { width: 12px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .screen:has(.nav-back) .app { padding-top: 96px; } .screen:has(.nav-back)::before { height: 104px; background: linear-gradient(180deg, var(--band) 88%, color-mix(in srgb, var(--band) 0%, transparent)); } /* ---------- 泡のタブバー（アプリの BubbleTabBar） ---------- */ .tabbar { position: absolute; z-index: 22; left: 50%; bottom: 26px; width: var(--tabbar-w); height: 52px; margin-left: calc(var(--tabbar-w) / -2); } .tabbar-glass { position: absolute; inset: 0; background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8); } .tabbar-edge { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: 54px; overflow: visible; pointer-events: none; } .tabbar-edge path { fill: none; stroke: rgba(255, 255, 255, 0.95); stroke-width: 1; filter: drop-shadow(0 6px 12px rgba(30, 40, 70, 0.16)) drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.25)); } @media (prefers-color-scheme: dark) { .tabbar-edge path { stroke: rgba(255, 255, 255, 0.22); } } .tab { position: absolute; top: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; } .tab:active { transform: scale(0.92); } .ti { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ti-star { width: 23px; height: 23px; } .tab[aria-current] .fillable { fill: currentColor; } .tab[aria-current] .ti-gear .hole, .tab[aria-current] .fold { fill: none; stroke: var(--glass-solid); } .tab[aria-current] .ti-gear .hole { fill: var(--glass-solid); stroke: none; } .tab[aria-current]::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); z-index: -1; } @media (prefers-color-scheme: dark) { .tab[aria-current]::after { background: rgba(255, 255, 255, 0.12); } } .ti-cal { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 30px; height: 30px; stroke: none; line-height: 1; } .cal-dow { font-size: 7.5px; font-weight: 700; letter-spacing: 0.06em; color: #E5352B; } .cal-day { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin-top: 1px; } .tab[aria-current] .cal-day { font-weight: 800; } /* ---------- 共通の部品 ---------- */ .app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 52px; } .mark { font-family: var(--serif); font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; margin: 6px 0 0; font-weight: 400; text-decoration: none; } .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 8px; } .eyebrow small { font-weight: 500; letter-spacing: 0.02em; margin-left: 6px; } .panel { background: var(--card); border-radius: 22px; padding: 18px 18px 16px; margin: 0 0 14px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); } .panel-title { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.08; margin: 0 0 10px; letter-spacing: -0.005em; } .panel p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.8; } .panel p:last-child { margin-bottom: 0; } .panel .fine, .fine { font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); } .section-gap { height: 22px; } .serif-head { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.05; margin: 30px 2px 12px; } .serif-head small { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; letter-spacing: 0.02em; } .ticks { list-style: none; margin: 0; padding: 0; } .ticks li { position: relative; padding: 9px 0 9px 26px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.7; } .ticks li:first-child { border-top: 0; padding-top: 2px; } .ticks li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.6l4.5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask-composite: exclude; } .ticks li:first-child::before { top: 8px; } .ticks b { font-weight: 700; } .chip-soon { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--serif); font-size: 17px; line-height: 1.2; } .chip-soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .tip-banner { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 16px; padding: 11px 12px; margin: 0 0 14px; font-size: 13px; font-weight: 600; line-height: 1.5; text-decoration: none; } .tip-banner .ico { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; } .tip-banner .ico svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tip-banner .more { margin-left: auto; color: var(--ink-faint); } /* 行の一覧（設定・サポート。iOS のまとめた行） */ .rows { background: var(--card); border-radius: 18px; overflow: hidden; margin: 0 0 14px; } .row { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 11px 16px; text-decoration: none; font-size: 15px; line-height: 1.45; position: relative; } .row + .row, .rows details + details { border-top: 1px solid var(--line); } .row .val { margin-left: auto; color: var(--ink-faint); font-size: 14px; white-space: nowrap; } .row .chev { margin-left: auto; width: 8px; height: 13px; flex: none; stroke: var(--ink-faint); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .row .val + .chev { margin-left: 8px; } .row .ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--ink); color: var(--paper); } .row .ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* よくある質問（行の中の details） */ .rows details summary { list-style: none; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; padding: 13px 16px; font-size: 14.5px; font-weight: 600; line-height: 1.55; } .rows details summary::-webkit-details-marker { display: none; } .rows details summary::after { content: ""; flex: none; margin: 6px 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg); transition: transform 0.2s; } .rows details[open] summary::after { transform: rotate(-135deg); margin-top: 10px; } .rows .answer { padding: 0 16px 14px; font-size: 14px; line-height: 1.8; color: var(--ink-soft); } .contact { font-size: 15px; margin: 8px 2px 4px; } .contact span { color: var(--ink-soft); margin-right: 6px; } /* 暗号の字 → 点字 → 記号 → 読める字（アプリの CipherDecodeText と同じ運び。site.js） */ .js [data-decode]:not(.ready) { visibility: hidden; } .dw { display: inline-block; white-space: nowrap; } .dc { display: inline-block; text-align: center; } .dc.cipher { font-family: var(--cipher); color: var(--ink-soft); overflow: hidden; vertical-align: bottom; } .dc.braille-cell { color: var(--ink-soft); overflow: visible; } .dc .braille { position: relative; vertical-align: baseline; fill: currentColor; overflow: visible; } .dc.hold { visibility: hidden; } /* ---------- 仕分けの入口（index） ---------- */ .flaps { display: grid; justify-items: end; gap: 5px; margin-top: 6px; } .flap-row { display: flex; gap: 6px; align-items: center; } .flap { display: inline-flex; gap: 2px; } .fl { position: relative; display: inline-grid; place-items: center; min-width: 17px; height: 22px; padding: 0 2px; border-radius: 4px; background: linear-gradient(180deg, #2A2A2A 0 49%, #111 51% 100%); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); } .fl::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.7); } .fl.dot { min-width: 8px; } .fl.flip { animation: flap 0.26s ease-in-out; } @keyframes flap { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } } .fl-l { display: inline-grid; place-items: center; height: 22px; padding: 0 6px; border-radius: 4px; background: #111; color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1; } .hero-ufo { width: 80%; margin: 14px auto 0; animation: bob 5.5s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-7px) rotate(0.6deg); } } .home-title { margin: 18px auto 0; width: 64%; position: relative; } .home-title img { width: 100%; } @media (prefers-color-scheme: dark) { .home-title img, .ink-img { filter: invert(1); } } .metal { display: flex; justify-content: center; align-items: flex-end; height: 64px; margin: 18px 0 0; } .metal img { height: 58px; width: auto; margin: 0 -3px; } .metal img.d { height: 18px; margin: 0 -2px 4px; } .metal img.u { height: 40px; margin-left: 2px; } .start-oval { display: block; margin: 12px auto 0; width: 116px; height: 56px; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.35)) padding-box, conic-gradient(from 200deg, #9FB6FF, #F6A7FF, #FFD39A, #A8F0D2, #9FB6FF) border-box; box-shadow: 0 6px 16px rgba(80, 100, 160, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9); position: relative; animation: breathe 3.2s ease-in-out infinite; } .start-oval img { width: 74px; margin: 0 auto; } @media (prefers-color-scheme: dark) { .start-oval { background: linear-gradient(rgba(70, 70, 70, 0.6), rgba(40, 40, 40, 0.5)) padding-box, conic-gradient(from 200deg, #9FB6FF, #F6A7FF, #FFD39A, #A8F0D2, #9FB6FF) border-box; } .start-oval img { filter: invert(1); } } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } .cap { text-align: center; font-size: 12px; color: var(--ink-soft); margin: 14px 0 8px; } .bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, 0.6); } .bar span { display: block; height: 100%; } .bar .s1 { background: #6B6F78; } .bar .s2 { background: #9AA0AA; } .bar .s3 { background: #BEC3CC; } .bar .s4 { background: #D7DBE2; } .legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; font-size: 10.5px; color: var(--ink-soft); margin: 8px 0 16px; } .legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -0.5px; } .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px; } .stat { position: relative; display: block; border-radius: 18px; padding: 12px 13px; min-height: 104px; overflow: hidden; background: rgba(255, 255, 255, 0.72); text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.9); } @media (prefers-color-scheme: dark) { .stat { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); } } .stat .t { font-size: 12.5px; font-weight: 700; line-height: 1.3; position: relative; } .stat .v { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; margin-top: 22px; position: relative; } .stat .n { font-size: 11.5px; color: var(--ink-soft); position: relative; } .stat.photo { color: #fff; border: 0; } .stat.photo .n { color: rgba(255, 255, 255, 0.8); } .stat.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .stat.photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.55)); } .stat.photo > span { z-index: 2; } .trash-bar { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--burgundy); color: #fff; border-radius: 18px; padding: 12px 14px; margin: 0 0 6px; } .trash-bar img { width: 34px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); } .trash-bar .t { font-size: 16px; font-weight: 800; line-height: 1.3; } .trash-bar .s { font-size: 11.5px; opacity: 0.8; line-height: 1.4; } .trash-bar .chev { margin-left: auto; width: 8px; height: 13px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .howto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; } .howto-card { background: var(--card); border-radius: 18px; padding: 14px 12px 12px; text-align: center; } .howto-card .arrow { font-size: 22px; line-height: 1; color: var(--ink-faint); } .howto-card img { height: 44px; width: auto; margin: 8px auto 6px; } .howto-card .word { font-family: var(--serif); font-size: 26px; line-height: 1.1; margin: 8px 0 4px; } .howto-card p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); } @media (prefers-color-scheme: dark) { .howto-card img { filter: invert(1); } } /* ---------- 盤面の体験版（Start で開く） ---------- */ .board { position: absolute; inset: 0; z-index: 30; background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom)); display: none; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; } .board.is-open { display: block; animation: board-in 0.35s ease-out; } @keyframes board-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } } .board .app-head { position: absolute; left: 16px; right: 16px; top: 54px; } .b-glow { position: absolute; inset: 0; pointer-events: none; z-index: 9; border-radius: inherit; box-shadow: inset 0 0 0 0 transparent; transition: box-shadow 0.18s; } .b-glow.on { box-shadow: inset 0 0 26px 6px var(--glow, #FF4500); } .b-ufos { position: absolute; left: 4px; right: 22px; top: 120px; display: flex; justify-content: space-around; } .b-ufo { position: relative; width: 24%; text-align: center; padding-top: 4px; } .b-ufo img { width: 92%; margin: 0 auto; position: relative; z-index: 1; animation: bob 4.4s ease-in-out infinite; } .b-ufo:nth-child(2) img { animation-delay: -1.1s; } .b-ufo:nth-child(3) img { animation-delay: -2.2s; } .b-ufo:nth-child(4) img { animation-delay: -3.3s; } .b-ufo::before { content: ""; position: absolute; left: 50%; top: 18px; width: 92px; height: 52px; margin-left: -46px; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); opacity: 0; transition: opacity 0.18s; filter: blur(4px); } .b-ufo.target::before, .b-ufo.beam::before { opacity: 0.95; } .b-ufo::after { content: ""; position: absolute; left: 50%; top: 32px; width: 60px; height: 140px; margin-left: -30px; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, transparent), transparent); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); opacity: 0; } .b-ufo.beam::after { animation: beam 0.7s ease-out; } @keyframes beam { 0% { opacity: 0; } 25% { opacity: 0.85; } 100% { opacity: 0; } } .b-ufo .lbl { display: block; font-family: var(--serif); font-size: 15.5px; line-height: 1.1; margin-top: 2px; white-space: nowrap; } .b-ufo .lbl sup { font-family: var(--sans); font-size: 8.5px; margin-left: 1px; color: var(--ink-soft); } .b-more { position: absolute; right: 8px; top: 140px; font-size: 14px; color: var(--ink-faint); letter-spacing: -0.15em; } .b-note { position: absolute; left: 0; right: 0; top: 188px; text-align: center; font-size: 9.5px; color: var(--ink-soft); } .b-card { position: absolute; left: 50%; top: 214px; width: 48%; margin-left: -24%; aspect-ratio: 0.56; border-radius: 14px; overflow: hidden; background: #ddd; z-index: 6; box-shadow: 0 14px 30px rgba(40, 60, 110, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12); cursor: grab; touch-action: none; will-change: transform; } .b-card.dragging { cursor: grabbing; } .b-card:focus { outline: none; } .b-card:focus-visible { box-shadow: 0 14px 30px rgba(40, 60, 110, 0.22), 0 0 0 3px var(--accent); } .b-card img.shot { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .b-card img { pointer-events: none; } .b-card.enter { animation: card-in 0.28s ease-out; } @keyframes card-in { from { transform: scale(0.94); opacity: 0.4; } to { transform: none; opacity: 1; } } .b-card .stamp { position: absolute; left: 50%; top: 42%; width: 72%; margin-left: -36%; opacity: 0; transform: rotate(-10deg); pointer-events: none; padding: 4px 10px; background: rgba(255, 255, 255, 0.86); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } .b-card .crinkle { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: repeating-linear-gradient(32deg, rgba(0, 0, 0, 0.18) 0 2px, rgba(255, 255, 255, 0.22) 2px 5px, transparent 5px 15px), repeating-linear-gradient(-48deg, rgba(0, 0, 0, 0.14) 0 2px, rgba(255, 255, 255, 0.18) 2px 6px, transparent 6px 19px), radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.35)); } .b-side { position: absolute; top: 52%; display: grid; justify-items: center; gap: 2px; width: 70px; z-index: 4; } .b-side .w { font-family: var(--serif); font-size: 22px; line-height: 1; } .b-later { left: 2px; } .b-later img { height: 58px; width: auto; transition: transform 0.6s; } .b-later.flip img { transform: rotate(180deg); } .b-keep { right: 2px; } .b-keep svg { width: 46px; height: 40px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; } .b-side.hot .w { color: var(--accent); } .b-side.hot img, .b-side.hot svg { transform: scale(1.12); } .b-keep.pulse svg { animation: pulse 0.45s ease-out; } @keyframes pulse { 50% { transform: scale(1.25); } } .b-done { position: absolute; right: 12px; top: 226px; width: 64px; height: 34px; border-radius: 50%; z-index: 4; border: 1.5px solid transparent; background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4)) padding-box, conic-gradient(from 200deg, #9FB6FF, #F6A7FF, #FFD39A, #A8F0D2, #9FB6FF) border-box; } .b-done img { width: 44px; margin: 0 auto; } .b-undo { position: absolute; right: 22px; top: 276px; width: 44px; height: 40px; z-index: 4; } .b-undo img { width: 32px; margin: 0 auto; } .b-undo:disabled { opacity: 0.3; cursor: default; } @media (prefers-color-scheme: dark) { .b-done, .b-undo, .b-later, .b-keep { filter: none; } .b-done img, .b-undo img { filter: invert(1); } .b-keep svg { stroke: var(--ink); } } .b-trash { position: absolute; left: 50%; top: 83%; width: 60%; margin-left: -30%; z-index: 3; } .b-trash img { width: 100%; } .b-trash.hot img { animation: wobble 0.5s ease-in-out infinite; } @keyframes wobble { 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } } .b-trash.gulp img { animation: gulp 0.35s ease-out; } @keyframes gulp { 40% { transform: translateY(6px) scaleY(0.97); } } .b-badge { position: absolute; right: 10%; top: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #E5352B; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; } .b-badge[hidden] { display: none; } .b-help { position: absolute; right: 14px; bottom: 30px; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #111; font-weight: 700; font-size: 17px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 8; } .b-fly { position: absolute; z-index: 7; pointer-events: none; border-radius: 14px; overflow: hidden; } .b-fly img { width: 100%; height: 100%; object-fit: cover; } .b-toast { position: absolute; left: 50%; bottom: 25%; transform: translateX(-50%); z-index: 12; display: flex; align-items: center; gap: 12px; white-space: nowrap; background: rgba(30, 30, 30, 0.86); color: #fff; border-radius: 999px; padding: 9px 16px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .b-toast.show { opacity: 1; pointer-events: auto; } .b-toast button { color: #FFB59A; font-weight: 700; } .b-howto { position: absolute; inset: 0; z-index: 15; display: none; background: rgba(250, 251, 251, 0.86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } @media (prefers-color-scheme: dark) { .b-howto { background: rgba(30, 30, 30, 0.86); } } .b-howto.is-open { display: block; } .b-howto .h { position: absolute; text-align: center; } .b-howto img { margin: 0 auto; height: 52px; width: auto; } @media (prefers-color-scheme: dark) { .b-howto img { filter: invert(1); } } .b-howto .word { font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1.05; } .b-howto .arr { font-size: 22px; color: var(--ink-faint); line-height: 1; } .b-howto .h-up { left: 0; right: 0; top: 178px; } .b-howto .h-left { left: 10px; top: 46%; width: 34%; } .b-howto .h-right { right: 10px; top: 46%; width: 34%; } .b-howto .h-down { left: 0; right: 0; bottom: 120px; } .b-howto .h-mid { left: 18%; right: 18%; top: 33%; font-size: 13px; line-height: 1.7; color: var(--ink-soft); } .b-howto .ok { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); padding: 10px 26px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 700; } /* レシート */ .receipt-layer { position: absolute; inset: 0; z-index: 40; display: none; background: rgba(160, 175, 200, 0.45); } @media (prefers-color-scheme: dark) { .receipt-layer { background: rgba(0, 0, 0, 0.45); } } .receipt-layer.is-open { display: block; } .slot { position: absolute; left: 7%; right: 7%; top: 62px; height: 9px; border-radius: 5px; background: #1A1A1A; z-index: 3; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .paper-clip { position: absolute; left: 0; right: 0; top: 66px; bottom: 96px; overflow: hidden; z-index: 2; } .paper { position: relative; width: 78%; margin: 0 auto; transform: translateY(-102%); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18)); } .receipt-layer.printing .paper { animation: print 2.4s cubic-bezier(0.3, 0.6, 0.3, 1) forwards; } .receipt-layer.printed .paper { transform: none; } @keyframes print { 0% { transform: translateY(-102%); } 10% { transform: translateY(-88%); } 18% { transform: translateY(-86%); } 32% { transform: translateY(-62%); } 40% { transform: translateY(-60%); } 62% { transform: translateY(-26%); } 70% { transform: translateY(-24%); } 100% { transform: translateY(0); } } .paper img { width: 100%; } .paper .data { position: absolute; left: 13%; right: 13%; top: 46.5%; font-family: var(--mono); font-weight: 700; color: #222; font-size: 10.5px; line-height: 1.6; } .paper .data .r { display: flex; justify-content: space-between; gap: 8px; } .paper .data .dash { overflow: hidden; white-space: nowrap; letter-spacing: 0.02em; opacity: 0.85; } .receipt-actions { position: absolute; left: 16px; right: 16px; bottom: 30px; display: flex; gap: 10px; z-index: 4; } .receipt-actions .share { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .receipt-actions .share svg { width: 18px; height: 18px; stroke: #111; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .receipt-actions .done { flex: 1; height: 46px; border-radius: 999px; background: #fff; font-family: var(--serif); font-size: 21px; color: #222; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } /* ---------- ライブラリ ---------- */ .colorbar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; margin-top: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .colorbar button { width: 13px; height: 18px; } .colorbar button:first-child { width: 30px; } .colorbar button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(0, 0, 0, 0.35); } .search-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 12px; } .search-row > img { width: 30px; height: auto; flex: none; } .search { flex: 1; min-width: 0; height: 36px; border-radius: 18px; border: 0; background: var(--card); padding: 0 12px; font: inherit; font-size: 13px; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .search::placeholder { color: var(--ink-faint); } .search::-webkit-search-cancel-button { -webkit-appearance: none; } .seg { display: flex; gap: 2px; background: var(--card); border-radius: 18px; padding: 3px; flex: none; } .seg button { width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; color: var(--ink-soft); } .seg button[aria-pressed="true"] { color: var(--ink); background: rgba(0, 0, 0, 0.06); } @media (prefers-color-scheme: dark) { .seg button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); } } .seg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .wall { position: relative; margin: 0 -16px 12px; height: 520px; overflow: hidden; touch-action: pan-y; cursor: grab; } .wall.dragging { cursor: grabbing; } .wall-track { position: absolute; left: -40px; top: 0; width: 660px; columns: 7; column-gap: 6px; will-change: transform; } .wall.tiles .wall-track { columns: unset; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(180deg, transparent, var(--paper)); pointer-events: none; } .tile { position: relative; break-inside: avoid; margin: 0 0 6px; border-radius: 8px; overflow: visible; transition: opacity 0.25s, transform 0.25s; } .tile img.shot { width: 100%; border-radius: 8px; background: #e9e4d8; } .wall.tiles .tile { margin: 0; aspect-ratio: 0.62; } .wall.tiles .tile img.shot { height: 100%; object-fit: cover; } .tile.dim { opacity: 0.14; transform: scale(0.97); } .tile.hit img.shot { box-shadow: 0 0 0 2px var(--accent); } .tile .pin { position: absolute; top: -10px; left: 50%; width: 30px; margin-left: -10px; z-index: 2; filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.3)); } .tile .clip { position: absolute; top: -12px; left: 14px; width: 16px; z-index: 2; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.25)); } .tile .sticky { position: absolute; left: 8%; top: 46%; width: 34px; height: 30px; z-index: 2; background: var(--sc, #FDE74C); transform: rotate(-6deg); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); } .tile .fav { position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; border-radius: 50%; background: #111; display: grid; place-items: center; z-index: 2; } .tile .fav svg { width: 9px; height: 9px; fill: #F7D04A; } .empty-hit { text-align: center; font-size: 12.5px; color: var(--ink-soft); margin: -4px 0 6px; } .empty-hit:empty { display: none; } .try { display: flex; flex-wrap: wrap; gap: 8px; } .chip-try { padding: 6px 14px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); font-size: 13px; } .shelf-view[hidden], .wall[hidden] { display: none; } .folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; margin: 0 0 14px; } .folder { text-decoration: none; display: block; } .folder .gf { position: relative; aspect-ratio: 1; } .folder .gf img { position: absolute; inset: 0; width: 100%; height: 100%; } .folder .gf .peek { position: absolute; top: 22%; width: 34%; height: 46%; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .folder .gf .peek.p1 { left: 14%; transform: rotate(-6deg); } .folder .gf .peek.p2 { left: 34%; top: 18%; } .folder .gf .peek.p3 { left: 54%; transform: rotate(7deg); } .folder .gf .front { z-index: 2; opacity: 0.9; } .folder .name { font-family: var(--serif); font-size: 18px; line-height: 1.1; margin-top: 4px; } .folder .name sup { font-family: var(--sans); font-size: 9px; color: var(--ink-soft); margin-left: 2px; } .shelf { position: relative; height: 150px; margin: 4px 0 18px; display: flex; justify-content: center; align-items: flex-end; gap: 6px; } .shelf::after { content: ""; position: absolute; left: -16px; right: -16px; bottom: -8px; height: 10px; background: linear-gradient(180deg, #E6DFD0, #D3CBBA); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.12); } @media (prefers-color-scheme: dark) { .shelf::after { background: linear-gradient(180deg, #3A3936, #2A2927); } } .shelf img { height: 140px; width: auto; border-radius: 3px; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25); } .shelf img:nth-child(2) { height: 128px; transform: rotate(3deg); transform-origin: bottom left; } .linkcard { display: flex; gap: 12px; align-items: center; background: var(--card-2); border-radius: 14px; padding: 10px; margin: 10px 0 0; } .linkcard img { width: 58px; height: 58px; object-fit: cover; border-radius: 10px; flex: none; } .linkcard .lt { font-size: 13.5px; font-weight: 700; line-height: 1.4; } .linkcard .ls { font-size: 11.5px; color: var(--ink-faint); } .memo-demo { position: relative; width: 62%; margin: 14px auto 8px; } .memo-demo .shot { width: 100%; border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } .memo-demo .note { position: absolute; right: -18%; top: 12%; width: 58%; padding: 12px 10px 10px; background: #FDE74C; color: #3A3200; font-size: 11.5px; line-height: 1.5; transform: rotate(4deg); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2); } .memo-demo .note .clip { position: absolute; top: -16px; left: 14px; width: 16px; } .memo-demo .pinpt { position: absolute; left: 30%; top: 58%; } .memo-demo .pinpt i { display: block; width: 18px; height: 18px; border-radius: 50%; background: #34C759; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .memo-demo .pinpt span { position: absolute; left: 22px; top: -4px; white-space: nowrap; background: rgba(20, 20, 20, 0.82); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 8px; } .wish { list-style: none; margin: 10px 0 0; padding: 0; } .wish li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; } .wish li:first-child { border-top: 0; } .wish img { width: 44px; height: 44px; object-fit: cover; border-radius: 9px; flex: none; } .wish .p { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; } .wish .total { font-weight: 800; } .wish .total .p { font-size: 16px; } /* カレンダー（Timeline）の画面は、いちばん下の「Timeline の画面」（2026-10-22 にオーナーの見本の絵で作り直した。前の本棚・日付のマス・お知らせの見本の部品は消した） */ /* ---------- Studio ---------- */ .screen-grid .plus { position: absolute; width: 11px; height: 11px; } .st-card { background: var(--card); border-radius: 16px; padding: 12px; } .st-card .ill { position: relative; height: 170px; border-radius: 10px; overflow: hidden; background: var(--card-2); } .st-card h3 { font-size: 15px; font-weight: 900; text-transform: uppercase; margin: 10px 0 2px; letter-spacing: 0.01em; } .st-card p { font-size: 11.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; } .ill-stitch img { position: absolute; left: 22%; width: 46%; height: 33.4%; object-fit: cover; } .ill-stitch img:nth-child(1) { top: 0; object-position: top; } .ill-stitch img:nth-child(2) { top: 33.3%; object-position: center; } .ill-stitch img:nth-child(3) { top: 66.6%; object-position: bottom; } .ill-stitch .cut { position: absolute; left: 8%; right: 8%; border-top: 1.5px dashed var(--accent); } .ill-stitch .cut::before { content: "✂"; position: absolute; left: -2px; top: -10px; font-size: 11px; color: var(--accent); } .ill-stitch .cut.c1 { top: 33.3%; } .ill-stitch .cut.c2 { top: 66.6%; } .ill-carousel img { position: absolute; top: 14%; width: 46%; height: 64%; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .ill-carousel img:nth-child(1) { left: 6%; transform: rotate(-10deg); } .ill-carousel img:nth-child(2) { left: 46%; transform: rotate(9deg); } .ill-carousel img:nth-child(3) { left: 27%; z-index: 2; } .ill-carousel .dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 4px; } .ill-carousel .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); } .ill-carousel .dots i:first-child { background: var(--ink); width: 12px; border-radius: 3px; } .ill-slide { display: grid; place-items: center; } .ill-slide .ph { position: relative; width: 52%; height: 88%; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); } .ill-slide .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } .ill-slide .ph img.on { opacity: 1; } .ill-slide .badge { position: absolute; right: 6px; bottom: 6px; z-index: 2; font-size: 9px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, 0.6); border-radius: 5px; padding: 1px 5px; } .ill-labels img { position: absolute; left: 8%; top: 10%; width: 62%; height: 80%; object-fit: cover; border-radius: 8px; } .ill-labels .lab { position: absolute; right: 6%; top: 26%; font-size: 9px; line-height: 1.3; text-align: left; } .ill-labels .lab b { display: block; font-size: 13px; } .ill-labels .lab::before { content: ""; position: absolute; right: 100%; top: 12px; width: 26px; border-top: 1.5px solid var(--ink); margin-right: 4px; } .ill-labels .lab small { color: var(--accent); font-weight: 700; } /* ---------- 設定 ---------- */ .set-title { font-family: var(--serif); font-weight: 400; font-size: 48px; line-height: 1; margin: 6px 0 8px; } .sysband { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; } .sysband span { font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; padding: 3px 7px; border: 1px solid var(--ink); border-radius: 3px; text-transform: uppercase; } .sysband span:first-child { background: var(--ink); color: var(--paper); } .tv { position: relative; width: 100%; max-width: 372px; margin: 0 auto 6px; aspect-ratio: 833 / 598; display: block; } .tv img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* ブラウン管のガラス（アプリの TVArt.glass と TVScreenMask と同じ。TV の絵の上に動画を重ね、ガラスの形で切る） */ .tv-glass { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url("../app/tv-mask.avif") 0 0 / 100% 100% no-repeat; mask: url("../app/tv-mask.avif") 0 0 / 100% 100% no-repeat; } .tv-glass video { position: absolute; left: 13.81%; top: 10.70%; width: 72.27%; height: 64.21%; object-fit: cover; background: #0b0b0b; } .tv .glare { opacity: 0.55; mix-blend-mode: screen; } .tv .play { position: absolute; left: 50%; top: 42%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); display: grid; place-items: center; z-index: 2; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .tv .play svg { width: 16px; height: 16px; fill: #111; margin-left: 3px; } .tv-cap { text-align: center; font-family: var(--serif); font-size: 18px; margin: 0 0 18px; } .video-cover { position: absolute; inset: 0; z-index: 45; display: none; background: rgba(0, 0, 0, 0.72); } .video-cover.is-open { display: grid; place-items: center; animation: board-in 0.3s ease-out; } .video-cover video { width: 94%; max-height: 80%; border-radius: 18px; background: #000; } /* 紹介の動画は横長なので、画面の幅いっぱいに近く */ .video-cover .x { position: absolute; right: 16px; top: 56px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #111; font-size: 20px; line-height: 36px; text-align: center; } .plans { display: grid; gap: 10px; } .plan { background: var(--card); border-radius: 18px; padding: 16px; position: relative; overflow: hidden; } .plan h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1; margin: 0 0 4px; } .plan .price { font-size: 13px; color: var(--ink-soft); margin: 0 0 8px; } .plan.pro { background: #141414; color: #F2EDE3; } .plan.pro .price { color: rgba(242, 237, 227, 0.7); } .plan.pro .ticks li { border-color: rgba(255, 255, 255, 0.12); } .plan.pro .ticks li::before { background: #F2EDE3; } .plan .bv { position: absolute; right: -6px; top: 12px; width: 108px; transform: rotate(8deg); } .plan .logo { width: 150px; margin: 2px 0 8px; filter: invert(1); } .set-fine { font-size: 11.5px; line-height: 1.7; color: var(--ink-faint); margin: 14px 4px 6px; } .set-fine a { color: inherit; } .langs { display: flex; gap: 6px; margin-left: auto; } .langs a, .langs span { font-size: 13px; padding: 4px 10px; border-radius: 999px; text-decoration: none; } .langs span { background: var(--ink); color: var(--paper); } .langs a { background: rgba(0, 0, 0, 0.05); } @media (prefers-color-scheme: dark) { .langs a { background: rgba(255, 255, 255, 0.08); } } /* ---------- 設定から開く画面（コツ・サポート・プライバシー） ---------- */ .page-title { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.02; margin: 0 0 6px; } .page-sub { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 18px; line-height: 1.7; } .group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin: 22px 4px 8px; } .doc { background: var(--card); border-radius: 22px; padding: 20px 18px; } .doc h2 { font-size: 15.5px; font-weight: 800; line-height: 1.5; margin: 22px 0 6px; } .doc h2:first-child { margin-top: 0; } .doc p, .doc li { font-size: 14px; line-height: 1.85; } .doc p { margin: 0 0 10px; } .doc ul { padding-left: 1.2em; margin: 0 0 10px; } .doc a { word-break: break-all; } .updated { font-size: 12px; color: var(--ink-faint); margin: 0 0 14px; } .tip { background: var(--card); border-radius: 22px; padding: 16px; margin: 0 0 14px; } .tip h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; margin: 0 0 8px; } .tip-video { width: 62%; margin: 4px auto 14px; border-radius: 22px; overflow: hidden; background: #000; border: 4px solid #111; aspect-ratio: 804 / 1748; } .tip-video video { width: 100%; height: 100%; object-fit: cover; display: block; } .tip p { font-size: 14px; line-height: 1.8; margin: 0 0 10px; } .steps { margin: 0 0 10px; padding-left: 1.4em; font-size: 14px; line-height: 1.8; } .steps li { margin: 0 0 4px; } /* 画面の上から下りてくるお知らせ（はじめて開いたときだけ。iOS の通知の形） */ .notif-drop { position: absolute; z-index: 35; left: 10px; right: 10px; top: 54px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 24px; background: rgba(246, 246, 248, 0.82); color: #111; -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); transform: translateY(calc(-100% - 70px)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.55s cubic-bezier(.2, .9, .25, 1.1), opacity 0.3s, visibility 0s linear 0.55s; cursor: pointer; } /* 閉じたときは、上へ出しきってから見えなくする（前は 160% 上げるだけで、下の端が島のうしろに細く残り、四角い枠がはみ出して見えた = 2026-10-21 オーナーの iPhone の画面） */ .notif-drop.show { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform 0.55s cubic-bezier(.2, .9, .25, 1.1), opacity 0.2s, visibility 0s; } .notif-drop .appico { width: 36px; height: 36px; border-radius: 9px; flex: none; } .notif-drop .nt { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; } .notif-drop .nt time { font-weight: 400; color: #8a8a8e; font-size: 12px; } .notif-drop .nb { font-size: 13px; line-height: 1.5; } .stat > span { display: block; } .trash-bar > span { display: block; min-width: 0; } .trash-bar .t, .trash-bar .s { display: block; } .trash-bar { text-decoration: none; } .b-logo { font-family: var(--serif); font-size: 32px; line-height: 1.1; margin: 6px 0 0; padding: 0; } /* ---------- ホーム（2026-10-21 オーナーの見本の絵: アイコン → UFO → 紹介の動画 → キャッチコピー → スモーク → App Store → 言語 → 下のリンク） ---------- */ /* ホームは、めくらずに 1 画面に収める（2026-10-21 オーナー「できればスクロールせずに全部表示」）。 画面（.screen）の高さを基準に（cqh = 画面の高さの 1%）、アイコン・UFO・キャッチコピーの大きさと間をきめ、 残った高さは言語の一覧と下のリンクのあいだに回す。iPhone の画面が低いときほど小さくなる */ .screen { container-type: size; } .app:has(.home) { padding-bottom: 34px; } /* ホームは下の余白をホームの線のぶんだけに */ .home { display: flex; flex-direction: column; min-height: calc(100cqh - 54px - 34px); } /* .app の上下の余白（54・34）を引いた高さ */ .home .home-icons { margin-top: clamp(10px, calc(5cqh - 14px), 32px); margin-bottom: auto; gap: clamp(4px, 1.2cqh, 16px) 6px; } /* 残った高さは、アイコンの下と下のリンクの上で半分ずつ = UFO から下を下げる（2026-10-21 オーナー） */ .home .app-ico .ico { width: clamp(40px, 6.9cqh, 72px); height: clamp(40px, 6.9cqh, 72px); } .home-hero { margin-top: clamp(6px, 1.6cqh, 26px); } .home-ufo { width: clamp(100px, 16cqh, 56%); margin-top: 0; } .home .catch { font-size: clamp(19px, 3.1cqh, 30px); margin: clamp(2px, 0.6cqh, 10px) 0 clamp(6px, 1.3cqh, 14px); } .home .store-pill { margin-bottom: clamp(6px, 1.3cqh, 18px); padding: clamp(6px, 1cqh, 9px) 15px; font-size: clamp(11.5px, 1.75cqh, 13px); } .home .catch { position: relative; z-index: 1; margin-top: clamp(6px, 1.2cqh, 14px); } /* スモークの煙は、キャッチコピーのうしろを通る */ /* UFO の下の紹介の動画（2026-10-21 オーナー「UFO の下に動画を再度配置」。角の丸い札。etc. の TV と同じ動画） */ .home-movie { position: relative; z-index: 1; display: block; padding: 0; border: 0; cursor: zoom-in; -webkit-tap-highlight-color: transparent; width: clamp(150px, 29cqh, 68%); aspect-ratio: 3 / 2; margin: clamp(12px, 2.6cqh, 30px) auto 0; border-radius: 16px; overflow: hidden; background: #D4E7FD; /* 下の縁だけを背景に溶かす（2026-10-21 オーナー「動画の下の縁をぼかして、いちばん下の底面の縁だけが背景に溶け込むように」）。上と左右の縁は札のまま */ -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 84%, transparent 100%); /* 溶かすのは下の 16%（2026-10-22 オーナー「少し狭めて」。前は 28%） */ } .home-movie::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); } .home-movie video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .home-movie:active { transform: scale(0.98); } /* 押すと大きく出る（2026-10-21 オーナー「動画をタップすれば大きく表示されるように」。etc. の TV と同じ = site.js の setupTV） */ /* App Store の上のスモーク（2026-10-21 オーナー「スモークから (thinking) になる動画を配置（20 秒リピート）」。make-smoke-video.py）。 動画の上の 4 割は煙が通るだけなので、上へ食い込ませて、キャッチコピーのうしろを通す（場所を取りすぎないように） */ .smoke { --w: clamp(96px, 17.5cqh, 40%); /* (thinking) の字の高さが、キャッチコピーより少し大きいくらい（2026-10-21 オーナー「小さく。本文より少し大きいくらいに」） */ position: relative; z-index: 0; width: var(--w); aspect-ratio: 3 / 2; margin: calc(var(--w) * -0.3) auto calc(var(--w) * -0.02); pointer-events: none; /* 動画の中の字は、切り出した範囲の真ん中より幅の 3.3% 右にあるので、その分左へ（同じ日のオーナー「もう少し左に」） */ transform: translateX(-3.3%); } .smoke video, .smoke-still { position: absolute; inset: 0; width: 100%; height: 100%; } .smoke .s-dark { display: none; } @media (prefers-color-scheme: dark) { .smoke .s-light { display: none; } .smoke .s-dark { display: block; } } .smoke.wait .smoke-still { opacity: 0; } .smoke.playing .smoke-still { display: none; } /* ホームの UFO（2026-10-21 オーナー「UFO を光らせて」→ 参考の動画 = アプリのはじめての入口のおまけの UFO）: 開くと右上の空の遠くから J の字に降りてきて、少しつぶれて着地し、青い光の筋を下の紹介の動画へ落として、ゆらゆら浮かぶ。押すと小さく跳ねる。 形と色・動きの式はアプリの IntroUFOEasterEgg.swift と同じ（光の筋 = 上がすぼまった台形・青 rgb(92,173,255)・1.6 秒で息をする・上下 3px を 3.2 秒）。 来るまでの動きは site.js の setupUfo（時刻の式）、浮かんでからは下の CSS の動き */ .home-ufo { position: relative; z-index: 2; isolation: isolate; animation: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .home-ufo .ufo-hop { display: block; position: relative; z-index: 1; } .home-ufo .ufo-body { display: block; width: 100%; transform-origin: 50% 60%; } .home-ufo .ufo-hop.hop { animation: ufo-hop 0.36s linear; } .home-ufo .ufo-body.hovering { animation: ufo-bob 3.2s ease-in-out infinite; } @keyframes ufo-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } } @keyframes ufo-hop { 0%, 100% { transform: none; } 25% { transform: translateY(-6.4px) rotate(5deg); } 50% { transform: translateY(-9px); } 75% { transform: translateY(-6.4px) rotate(-5deg); } } /* 光の筋（胴の真ん中から胴の高さの 0.30 下 = 胴の下の端の内側から出る。本体より奥）。下の端は JS が紹介の動画の上の端の少し内側に合わせる（--beam-h） */ .ufo-beam { position: absolute; z-index: 0; left: -5%; width: 110%; top: 80%; height: var(--beam-h, 40px); pointer-events: none; opacity: 0.8; } .ufo-beam.breathing { animation: ufo-breathe 1.6s ease-in-out infinite; } @keyframes ufo-breathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .ufo-beam i { position: absolute; top: 0; bottom: 0; } .ufo-beam .b-outer { left: 0; right: 0; clip-path: polygon(27.27% 0, 72.73% 0, 100% 100%, 0 100%); background: linear-gradient(rgba(92, 173, 255, 0.45), rgba(92, 173, 255, 0.10)); } .ufo-beam .b-inner { left: 33.64%; right: 33.64%; clip-path: polygon(27.8% 0, 72.2% 0, 100% 100%, 0 100%); background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); } .ufo-beam .b-pool { top: auto; bottom: -5px; left: 9.09%; right: 9.09%; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(92, 173, 255, 0.40), rgba(92, 173, 255, 0)); } .ufo-arrive .home-ufo .ufo-hop, .ufo-arrive .home-ufo .ufo-beam { opacity: 0; } @media (prefers-reduced-motion: reduce) { .home-ufo .ufo-body.hovering, .ufo-beam.breathing { animation: none; } } /* ホームのウィジェット（2026-10-21 オーナー「あっさりすぎる」→「ウィジェットを足す」。本物の iPhone のホーム画面の小さな窓）: 左 = パタパタの時計（今の時:分・曜日・月.日。押すと Timeline）、右 = スクショがゆっくり入れ替わる窓（押すと仕分けの体験版） */ .widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: clamp(2px, 0.8cqh, 10px) 4px clamp(10px, 2cqh, 18px); } .widget { position: relative; display: block; height: clamp(76px, 12.4cqh, 150px); border-radius: 20px; overflow: hidden; text-decoration: none; box-shadow: 0 8px 18px rgba(40, 60, 110, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.45); -webkit-tap-highlight-color: transparent; transition: transform 0.15s; } .widget:active { transform: scale(0.96); } .w-clock { display: flex; flex-direction: column; justify-content: space-between; padding: 11px 12px 10px; color: #fff; background: linear-gradient(160deg, #303134, #0e0e10); } .w-mark { font-family: "Instrument Serif", var(--serif); font-size: 15px; line-height: 1; opacity: 0.85; letter-spacing: 0; } .w-clock .w-time { gap: 2px; } .w-clock .fl { min-width: clamp(18px, 3.4cqh, 26px); height: clamp(26px, 4.8cqh, 38px); font-size: clamp(18px, 3.3cqh, 26px); border-radius: 5px; background: linear-gradient(180deg, #3b3b3e 0 49%, #222225 51% 100%); } .w-clock .fl.dot { min-width: 7px; background: none; box-shadow: none; } .w-clock .fl::after { background: rgba(0, 0, 0, 0.55); } .w-date { display: flex; gap: 6px; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; opacity: 0.75; } .w-shots { background: #ddd; } .w-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: 0; transition: opacity 0.9s ease; } .w-slides img.on { opacity: 1; } /* 文字はスクショの中の字と重ならないよう、すりガラスの帯の上に */ .w-label { position: absolute; z-index: 2; left: 7px; right: 7px; bottom: 7px; padding: 6px 9px 6px; border-radius: 13px; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.2; background: rgba(20, 22, 30, 0.42); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); } .w-label small { display: block; font-size: 10px; font-weight: 600; opacity: 0.85; margin-top: 1px; } /* 画面がとても低いとき（小さい iPhone・ブラウザの帯が出ているとき）は、もうひと回り詰める */ @container (max-height: 660px) { .home .app-ico .ico { width: 6.4cqh; height: 6.4cqh; } .home .app-ico .sub { font-size: 9px; } .widget { height: 12cqh; } .home-ufo { width: 14cqh; } .home-movie { width: 27cqh; } .smoke { --w: 16cqh; } .home .catch { font-size: 2.9cqh; } } .catch { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.04; letter-spacing: -0.015em; text-align: center; margin: 10px 0 14px; } .store-pill { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 0 auto 18px; padding: 9px 16px; border-radius: 10px; background: #000; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.12); } .store-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } .home-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 6px; margin: 10px 2px 0; } /* 言語の一覧（小さな字。訳のある言語はリンク、いまの言語は下線、訳のない言語は薄い字。タイ語の隣は空欄） */ .lang-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 7px; max-width: 182px; margin: 2px auto 0; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 9.5px; font-weight: 500; letter-spacing: 0.03em; } .lang-list > * { width: 30px; text-align: center; line-height: 1.85; } .lang-list a { color: var(--ink); text-decoration: none; } .lang-list a:hover { text-decoration: underline; text-underline-offset: 3px; } .lang-cur { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .lang-soon { color: var(--ink-faint); cursor: default; } .lang-blank { display: flex; align-items: center; justify-content: center; } .lang-blank svg { width: 21px; height: 13px; fill: none; stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 1.5 1.5; } .app-ico { display: flex; flex-direction: column; align-items: center; text-decoration: none; -webkit-tap-highlight-color: transparent; } .app-ico .ico { width: 72px; height: 72px; filter: drop-shadow(0 6px 10px rgba(40, 70, 140, 0.18)); transition: transform 0.15s; } .app-ico .name { font-size: 12px; font-weight: 600; line-height: 1.25; margin-top: 6px; letter-spacing: 0.01em; } .app-ico .sub { font-size: 10.5px; line-height: 1.2; color: var(--ink-soft); margin-top: 1px; } .app-ico:active .ico, .app-ico.launch .ico { transform: scale(0.9); } @media (hover: hover) { .app-ico:hover .ico { transform: translateY(-2px); } } .home-desc { font-size: clamp(11.5px, 1.75cqh, 13px); line-height: 1.5; margin: clamp(10px, 1.8cqh, 26px) 4px 8px; } .home-fine { font-size: 12px; line-height: 1.7; color: var(--ink-soft); margin: 0 6px 18px; } .home-foot { text-align: center; font-size: 11.5px; color: var(--ink-soft); margin: auto 0 0; } .home-foot a { color: inherit; } /* 画面が細いとき（スマホで iPhone の枠が画面いっぱい）の詰め方。上の部品の決まりより後に置く */ @media (max-width: 560px) { .mark, .b-logo { font-size: 27px; } .fl { min-width: 13.5px; height: 19px; font-size: 12px; padding: 0 1px; border-radius: 3px; } .fl.dot { min-width: 6px; } .fl-l { height: 19px; font-size: 9.5px; padding: 0 4px; border-radius: 3px; } .flap { gap: 1.5px; } .flap-row { gap: 3px; } .app { --pad: 14px; } } /* ---------- 日本語のページ（2026-10-20 オーナーの指定の書体）---------- 書体は Noto Sans JP（太さ 500・平体 80% を焼き込んだもの）・字間 -0.55px・palt。 transform: scale(1, 0.8) で縮めたときと同じく、行の間も 0.8 倍に詰める（字だけ縮めると、行の間が広く見えるため） */ html[lang="ja"] { --sans: "Thinking JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif; /* 英字は Instrument Serif のまま、日本語の字だけ同じ書体に（Instrument Serif に日本語の字がないので、次の書体が受け持つ） */ --serif: "Instrument Serif", "Thinking JP", "Times New Roman", Georgia, serif; --cipher: "Thinking Cipher", "Instrument Serif", "Thinking JP", serif; } html[lang="ja"] body { font-weight: 500; letter-spacing: -0.55px; font-feature-settings: "palt", "pkna"; line-height: 1.3; } html[lang="ja"] .panel p { line-height: 1.45; } html[lang="ja"] .panel .fine, html[lang="ja"] .fine, html[lang="ja"] .set-fine, html[lang="ja"] .page-sub, html[lang="ja"] .home-fine { line-height: 1.38; } html[lang="ja"] .ticks li, html[lang="ja"] .b-howto .h-mid { line-height: 1.38; } html[lang="ja"] .rows .answer, html[lang="ja"] .tip p, html[lang="ja"] .steps { line-height: 1.45; } html[lang="ja"] .doc p, html[lang="ja"] .doc li { line-height: 1.5; } html[lang="ja"] .home-desc { line-height: 1.38; } html[lang="en"] .home-desc { line-height: 1.4; font-size: clamp(11px, 1.7cqh, 13px); } html[lang="ja"] .howto-card p, html[lang="ja"] .st-card p { line-height: 1.32; } html[lang="ja"] .notif .nb, html[lang="ja"] .notif-drop .nb, html[lang="ja"] .memo-demo .note, html[lang="ja"] .doc h2 { line-height: 1.22; } html[lang="ja"] .rows details summary { line-height: 1.3; } html[lang="ja"] .serif-head small, html[lang="ja"] .trash-bar .s, html[lang="ja"] .linkcard .lt { line-height: 1.2; } /* キャッチコピーはどの言語も英語の「Free up space. Organize what you save. Create with screenshots.」（2026-10-21 オーナー「全言語共通に」）。 日本語のページでも英語の見出しと同じ Instrument Serif・字間なし */ html[lang="ja"] .catch { letter-spacing: -0.015em; font-weight: 400; } /* レシートの字（Courier）と、英語の見出しの書体は、そのまま */ html[lang="ja"] .paper .data { letter-spacing: 0; } /* 動きを減らす設定 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; } @view-transition { navigation: none; } } /* ---------- Swipe の画面（2026-10-22 オーナー「シミュレーターだと紙屑が丸まるところをうまく描けない。専用に動画を作ったので、モックアップの中で再生し続けて」→ 同じ日の見本の絵）---------- 上の段: 戻るボタンと同じ段に、Swipe のアイコンと題名の絵（仕分けの入口の題名の絵の「Swipe」= app/title-swipe.avif）。data-layer で画面の上に移る = めくっても動かない。 説明 3 行 → 四隅の L の印の中に、携帯で仕分けの盤面の動画（assets/video/swipe.mp4）を流しっぱなし。上下左右に 4 つの向きの言葉 → 3 枚のガラスの札（行き先が見える・取り消せる・レシート）→ 写真が消えるのは… の 2 行 */ /* 題名の段（Swipe・Compress。アイコンと題名の絵を、戻るボタンと同じ段に） */ .pg-head { position: absolute; z-index: 22; left: 50%; top: 52px; height: 40px; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; } .pg-ico { width: 34px; height: 34px; filter: drop-shadow(0 3px 6px rgba(40, 70, 140, 0.18)); } .pg-title { margin: 0; height: 24px; } /* 題名の絵ごとに、最初の字の高さを Swipe（絵の高さの 68.8%）にそろえる（2026-10-22 オーナー「タイトルが大きすぎます。Swipe と合わせて」。Swipe・Compress は下へ伸びる p まで絵に入っているが、Collect は入っていないので、同じ高さだと字が大きく見えた） */ .pg-title.t-compress { height: 22.6px; } .pg-title.t-collect { height: 18.6px; } .pg-title.t-timeline { height: 20.2px; } /* T の高さ = 絵の高さの 81.8%（オーナーの題名の絵 600×200 の字の範囲 + 4px） */ .pg-title.t-studio { height: 19.5px; } /* S の高さ = 絵の高さの 84.5%（オーナーの題名の絵 600×200 の字の範囲 + 4px） */ .pg-title img { display: block; height: 100%; width: auto; } @media (prefers-color-scheme: dark) { .pg-title img { filter: invert(1); } } /* めくらずに 1 画面（下のアイコンの列まで）に収める（2026-10-22 オーナー「スクロールなしの 1 画面に収めたい」）。説明はどの行も 1 行に収まる大きさ、携帯は残った高さから */ .screen:has(.dock) .app:has(.sw-stage) { padding-bottom: 64px; } /* 下のアイコンの列のぶん（ほかの画面の 92px より詰める） */ .sw-lead { font-size: min(13px, 3.1cqi); font-weight: 700; line-height: 1.6; text-align: center; color: var(--ink); margin: 2px 0 0; } html[lang="ja"] .sw-lead { font-size: min(13px, 3.55cqi); line-height: 1.45; } .sw-stage { --m: var(--ink-soft); display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "up up up" "left phone right" "down down down"; align-items: center; row-gap: 7px; margin: 10px 0 0; padding: 12px 6px 10px; /* 四隅の L の印 */ background: linear-gradient(var(--m), var(--m)) left top / 16px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) left top / 1.5px 16px no-repeat, linear-gradient(var(--m), var(--m)) right top / 16px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) right top / 1.5px 16px no-repeat, linear-gradient(var(--m), var(--m)) left bottom / 16px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) left bottom / 1.5px 16px no-repeat, linear-gradient(var(--m), var(--m)) right bottom / 16px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) right bottom / 1.5px 16px no-repeat; } .sw-dir { margin: 0; font-size: 10.5px; font-weight: 600; line-height: 1.3; color: var(--ink-soft); } .sw-up { grid-area: up; text-align: center; } .sw-down { grid-area: down; text-align: center; } .sw-left { grid-area: left; text-align: left; padding-left: 2px; } .sw-right { grid-area: right; text-align: right; padding-right: 2px; } .sw-left b, .sw-right b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; white-space: nowrap; } .sw-phone { /* 高さは画面の高さから。幅も同じ式から直接決める（aspect-ratio で幅を出すと、iPhone の Safari では真ん中の列の幅に入らず、携帯が左へずれた = 2026-10-22 オーナーの iPhone の画面） */ --ph: clamp(190px, calc(100cqh - 344px), 470px); grid-area: phone; justify-self: center; position: relative; height: var(--ph); width: calc(var(--ph) * 886 / 1920); border-radius: 28px; overflow: hidden; background: #DCE8F8; border: 6px solid #141416; box-shadow: 0 0 0 1.5px #3a3a3e, 0 16px 32px rgba(20, 30, 60, 0.2); } .sw-phone::after { content: ""; position: absolute; z-index: 1; left: 50%; top: 6px; width: 30%; height: 13px; margin-left: -15%; border-radius: 10px; background: #000; } .sw-phone video { display: block; width: 100%; height: 100%; object-fit: cover; } .sw-points { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 0; padding: 0; } .sw-points li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 74px; padding: 10px 4px; border-radius: 14px; text-align: center; font-size: 10.5px; font-weight: 700; line-height: 1.35; background: rgba(255, 255, 255, 0.42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 6px 16px rgba(40, 70, 140, 0.08); } @media (prefers-color-scheme: dark) { .sw-points li { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } } .pt-svg { width: 22px; height: 24px; color: var(--ink); } .pt-receipt { width: 18px; height: 24px; object-fit: cover; object-position: top; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } .sw-note { margin: 10px 0 0; font-size: min(11px, 3.1cqi); font-weight: 600; line-height: 1.6; text-align: center; color: var(--ink-soft); } html[lang="ja"] .sw-note { line-height: 1.45; } /* ---------- 下のアイコンの列（2026-10-22 オーナーの Swipe の画面の見本。ホームのアイコンから開く 6 つの画面）---------- */ .dock { position: absolute; z-index: 24; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px 9px; border-radius: 24px; background: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 10px 26px rgba(40, 60, 110, 0.16); } .dock-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; -webkit-tap-highlight-color: transparent; transition: transform 0.15s; } .dock-ico img { width: 31px; height: 31px; } .dock-ico[aria-current] { background: #fff; box-shadow: 0 2px 8px rgba(40, 60, 110, 0.16); } .dock-ico:active { transform: scale(0.9); } @media (prefers-color-scheme: dark) { .dock { background: rgba(40, 42, 46, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 26px rgba(0, 0, 0, 0.3); } .dock-ico[aria-current] { background: rgba(255, 255, 255, 0.85); } } .screen:has(.dock) .app { padding-bottom: 92px; } @media (max-width: 560px) { .dock { bottom: 20px; } } /* ---------- Compress の画面（2026-10-22 オーナーの見本の絵と素材）---------- 題名の段（アイコンと「Compress」）→ UP TO 90% SMALLER → 説明 3 行 → ガラスの台に BEFORE と AFTER の札（同じ大きさの絵を重ねる）と矢印 → 注意書き 3 行 → 右下に「Keep it lighter.」。下のアイコンの列まで、めくらずに 1 画面に（大きさは画面の高さから = cqh） */ .screen:has(.dock) .app:has(.cp) { padding-bottom: 64px; } .cp { display: flex; flex-direction: column; align-items: center; padding-top: clamp(6px, 1.6cqh, 16px); } /* 題名から下を少し下げる（2026-10-22 の 2 回目） */ .cp-90 { width: clamp(150px, 26cqh, 262px); height: auto; margin-top: 0; animation: cp-float 4.2s ease-in-out infinite; } /* ふわっと浮き上がる（2026-10-22 オーナー「90% もちょっと浮き上がるような動きを」。動きを減らす設定では止める） */ @keyframes cp-float { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 -6px; scale: 1.025; } } @media (prefers-reduced-motion: reduce) { .cp-90 { animation: none; } } /* 暗い画面では「UP TO」の黒い字が地に沈むので、白い細い縁を付ける（絵は明るい画面用） */ @media (prefers-color-scheme: dark) { .cp-90 { filter: drop-shadow(0 0 0.8px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 0.8px rgba(255, 255, 255, 0.95)); } } .cp-lead { font-size: min(13px, 3.55cqi); font-weight: 700; line-height: 1.45; text-align: center; color: var(--ink); margin: 4px 0 0; } html[lang="en"] .cp-lead { font-size: min(13px, 3.3cqi); line-height: 1.55; } .cp-panel { align-self: stretch; display: grid; place-items: center; margin-top: 9px; padding: 8px 0 9px; border-radius: 22px; background: rgba(255, 255, 255, 0.42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 8px 20px rgba(40, 70, 140, 0.08); } @media (prefers-color-scheme: dark) { .cp-panel { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } } /* 圧縮の前と後（2026-10-22 の 2 回目、オーナー「元の置き方に近づけて、この画像を使って、容量は 4.4 MB・PNG と 618 KB・HEIC に」）: 同じスクショを 2 枚並べ、下に容量と形式、そのあいだをオレンジの矢印でつなぐ。スクショの高さは画面の高さから */ /* 2026-10-22 の 3 回目（オーナー「札と札が離れすぎ。元の置き方に近づけて。容量の字は小さくしてもいい」「スクショの札を大きく」「角を丸すぎないように」）: 2 枚を近づけ、矢印は下の PNG・HEIC の段のあいだを通す。スクショの高さは画面の高さから（低い画面ほど小さく = 54.8cqh − 242px）、角は幅の約 9% */ .cp-pair { --h: clamp(96px, calc(54.8cqh - 242px), 260px); position: relative; display: flex; justify-content: center; gap: max(14px, calc(var(--h) * 0.1)); padding-bottom: 2px; } .cp-side { margin: 0; display: flex; flex-direction: column; align-items: center; } .cp-shot { display: block; height: var(--h); width: calc(var(--h) * 384 / 720); border-radius: calc(var(--h) * 0.048); object-fit: cover; box-shadow: 0 8px 18px rgba(30, 40, 70, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04); } .cp-side figcaption { display: flex; flex-direction: column; align-items: center; margin-top: 4px; line-height: 1; } .cp-size { font-family: var(--serif); font-size: clamp(17px, 3.1cqh, 26px); letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); } .cp-fmt { margin-top: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.2em; color: var(--ink-soft); } .cp-pair .cp-arrow { position: absolute; left: 50%; bottom: 0; width: calc(var(--h) * 0.38); height: auto; transform: translateX(-54%); } .cp-note { font-size: min(11px, 3.05cqi); font-weight: 600; line-height: 1.5; text-align: center; color: var(--ink-soft); margin: 8px 0 0; } html[lang="ja"] .cp-note { line-height: 1.42; } .cp-lighter { align-self: flex-end; width: clamp(128px, 21cqh, 230px); height: auto; margin: clamp(7px, 1.7cqh, 22px) 4px 0 0; transform: rotate(-8deg); animation: cp-sway 5s ease-in-out infinite; } /* 少し下げて、左に傾ける（2026-10-22 の 2 回目）→ もう少しだけ下へ（同じ日の 8 回目。下のアイコンの列の右の端にかからないところまで） */ /* 筆記体がゆらりと揺れて浮く（同じ日の 5 回目、オーナー「keep it lighter も動きを」） */ @keyframes cp-sway { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -5px; rotate: 3deg; } } @media (prefers-reduced-motion: reduce) { .cp-lighter { animation: none; } } @media (prefers-color-scheme: dark) { .cp-lighter { filter: invert(1); } } /* ---------- Collect の画面（2026-10-22 オーナーの見本の絵と素材）---------- 題名の段（アイコンと「Collect」）→ All in one place. → 説明 3 行 → 舞台（ライブラリの画面の携帯 = 石垣がゆっくり流れる・まわりに SNS のアイコン・ 右下にスケートパークの札から飛び出すスケーター）→ 3 枚の札 → 注意書き 4 行。下のアイコンの列まで、めくらずに 1 画面に（舞台の高さは画面の高さから） */ .screen:has(.dock) .app:has(.cl) { padding-bottom: 84px; overflow-x: hidden; } /* 下のアイコンの列（下から 20〜24px・高さ約 52px）にかからない */ .cl { display: flex; flex-direction: column; align-items: center; height: calc(100cqh - 96px - 84px); padding-top: clamp(0px, 0.6cqh, 8px); } /* 上の段と下のアイコンの列のあいだ全部 */ .cl-head { margin: 0; font-family: var(--serif); font-size: clamp(30px, 5.6cqh, 50px); line-height: 1; letter-spacing: -0.02em; text-align: center; color: var(--ink); } .cl-lead { margin: 8px 0 0; font-size: min(13px, 3.55cqi); font-weight: 700; line-height: 1.45; text-align: center; color: var(--ink); } html[lang="en"] .cl-lead { font-size: min(13px, 3.1cqi); line-height: 1.55; } /* 舞台: この中の cqh・cqw は舞台の高さ・幅 */ /* 舞台は残った高さを全部使う（2026-10-22 オーナー「スマホの画面を可能な限り大きく」「3 カラム以降を下に」）。--pw = 携帯の幅（舞台の幅の 76%・高さの 92% の小さいほう。下はぼかして切るので、横長になってもよい） */ .cl-stage { --pw: min(64cqw, 76cqh); --s: 17cqh; position: relative; container-type: size; align-self: stretch; flex: 1 1 auto; min-height: 150px; margin-top: 8px; } .cl-phone { position: absolute; left: 50%; top: 7cqh; width: var(--pw); height: 93cqh; transform: translateX(-50%); /* 銀の縁（見本の携帯と同じ。縁と画面のあいだの黒い額は、画面の黒と同じなので描かない） */ border: 1.1cqh solid #C3C7CE; border-bottom: 0; border-radius: 10cqh 10cqh 0 0; background: #0B0B0C; overflow: hidden; box-shadow: inset 0 0 0 0.4cqh #2A2A2D; -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 99%); mask-image: linear-gradient(180deg, #000 68%, transparent 99%); } .cl-screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 12.5cqh 3.2cqh 0; color: #F2F2F2; } /* 見本と同じく、(thinking) は Pinterest のアイコンの下の高さ */ .cl-top { display: flex; align-items: center; justify-content: space-between; } .cl-mark { font-family: "Instrument Serif", var(--serif); font-size: 5.8cqh; line-height: 1; color: #fff; } .cl-colorbar { display: flex; width: 27cqh; height: 2.8cqh; border-radius: 99px; overflow: hidden; } .cl-colorbar i { flex: 1; } .cl-search { display: flex; align-items: center; gap: 1.4cqh; margin: 2.6cqh 0 2.2cqh; } .cl-search img { width: 4.4cqh; height: auto; } .cl-input { flex: 1; display: flex; align-items: center; height: 6.2cqh; padding-left: 2.2cqh; border-radius: 99px; background: #1C1C1E; color: #8A8A8E; font-size: 2.5cqh; white-space: nowrap; overflow: hidden; } .cl-seg { display: flex; align-items: center; justify-content: space-around; width: 16cqh; height: 6.2cqh; border-radius: 99px; background: #1C1C1E; } .cl-seg i { width: 2.4cqh; height: 2.4cqh; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 2px; } .cl-screen .wall { position: relative; flex: 1; height: auto; margin: 0 -3.2cqh; overflow: hidden; } .cl-screen .wall::after { display: none; } .cl-screen .wall-track { left: 0; width: max(105cqh, 120cqw); columns: 10; column-gap: 1cqh; } /* 札は細め（2026-10-22 の 7 回目、オーナー「流れる札をもっと小さく」。前は 7 列） */ .cl-screen .tile { margin: 0 0 1cqh; border-radius: 0.7cqh; } .cl-screen .tile img.shot { border-radius: 0.7cqh; } .cl-screen .tile .fav { transform: scale(0.6); transform-origin: 0 100%; } /* 石垣の札の飾り（2026-10-22 オーナー「ピンが刺さっている場所や、メモやクリップの置き方が実物と違ってバラバラ」）。 アプリの一覧の札と同じ置き方を、札の幅（cqw）に合わせて縮める（アプリは幅 120pt ほどの札に、クリップの高さ 50・付箋 44・押しピン 44）: クリップ = 札の左の端から 10、上の輪の切れ目が札の上の端に来る高さ（ScreenshotCardView.clipX・clipGapFraction 0.235）。 付箋 = クリップの下に挟む。上の端がクリップの切れ目を通り、そこを軸に傾ける（StickyNoteArt.look）。色はアプリのネオンの 5 色（Display P3）。 押しピン = 札の右上の角、右へ 4・上へ 16 はみ出す */ .wall .tile { container-type: inline-size; } .tile .memo { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 2; pointer-events: none; } .tile .memo .note { position: absolute; left: 1.25cqw; top: 0; width: 36.7cqw; height: 36.7cqw; transform-origin: 8.8cqw 0; transform: rotate(var(--rot, -3deg)); border-radius: 0.8cqw; background: linear-gradient(180deg, rgba(0, 0, 0, 0.07) 0 17%, rgba(255, 255, 255, 0) 17% 70%, rgba(255, 255, 255, 0.24) 100%), var(--n); box-shadow: 0 1.8cqw 2.6cqw rgba(0, 0, 0, 0.26), 0 0.4cqw 0.6cqw rgba(0, 0, 0, 0.12); } .tile .memo .note::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8cqw; height: 8cqw; border-radius: 0 0 0.8cqw 0; background: linear-gradient(315deg, rgba(255, 255, 255, 0) 0 42%, rgba(0, 0, 0, 0.18) 47%, rgba(255, 255, 255, 0.65) 55%, rgba(255, 255, 255, 0.18) 100%); } .tile .memo .clip { position: absolute; left: 8.3cqw; top: -9.8cqw; width: auto; height: 41.7cqw; filter: drop-shadow(0.8cqw 1.2cqw 1cqw rgba(0, 0, 0, 0.3)); } .n-yellow { --n: #FFF23D; } .n-pink { --n: #FF4FA0; } .n-green { --n: #7EF857; } .n-orange { --n: #FF8A2B; } .n-blue { --n: #38C8FF; } @supports (color: color(display-p3 1 1 1)) { .n-yellow { --n: color(display-p3 1 0.96 0.2); } .n-pink { --n: color(display-p3 1 0.29 0.62); } .n-green { --n: color(display-p3 0.5 0.98 0.33); } .n-orange { --n: color(display-p3 1 0.53 0.14); } .n-blue { --n: color(display-p3 0.2 0.78 1); } } .tile .pushpin { position: absolute; z-index: 2; right: -3.3cqw; top: -13.3cqw; width: auto; height: 36.7cqw; filter: drop-shadow(0.8cqw 1.6cqw 1.4cqw rgba(0, 0, 0, 0.3)); pointer-events: none; } /* まわりの SNS のアイコン（オーナーの素材。少し傾けて浮かせる） */ .cl-stage .sns { position: absolute; z-index: 3; width: 17cqh; height: 17cqh; filter: drop-shadow(0 1.6cqh 2.4cqh rgba(30, 40, 80, 0.24)); } /* 置き方はオーナーの見本の絵（2026-10-22 の 6 回目「これを再現したい」）を測った割合: 携帯 = 舞台の幅の 64%（高さの 76% まで）・上から 7%。 アイコン = 舞台の高さの 17%。左の 3 つは携帯の左の縁から、右の 2 つは右の縁から、Pinterest は真ん中。舞台の外にははみ出さない */ .cl-stage .sns { width: var(--s); height: var(--s); } .sns-instagram { --r: -6deg; left: max(0px, calc(50% - var(--pw) / 2 - var(--s) * 0.77)); top: 4%; } .sns-pinterest { --r: 4deg; left: calc(50% - var(--s) * 0.5); top: 4.5%; } .sns-x { --r: 8deg; left: min(calc(100% - var(--s)), calc(50% + var(--pw) / 2 - var(--s) * 0.4)); top: 4%; } .sns-threads { --r: -2deg; left: max(0px, calc(50% - var(--pw) / 2 - var(--s) * 1.03)); top: 40%; } .sns-tiktok { --r: -6deg; left: min(calc(100% - var(--s)), calc(50% + var(--pw) / 2 - var(--s) * 0.1)); top: 30.5%; } .sns-youtube { --r: -4deg; left: max(0px, calc(50% - var(--pw) / 2 - var(--s) * 0.65)); top: 66.5%; } .cl-stage .sns { transform: rotate(var(--r)); } /* 右下のスケートパークの札（右へ 8 度）と、札の右から携帯の外へ飛び出すスケーター（見本の置き方: 札は携帯の右の縁から 27cqh 内側・上から 54%、 スケーターは札の幅の 1.8 倍で、札の左から 34%・上から 6% のところから） */ .cl-skate { position: absolute; z-index: 4; left: calc(50% + var(--pw) / 2 - 20cqh); top: 54%; width: 20cqh; height: 40cqh; } .cl-skate-card { position: absolute; inset: 0; overflow: hidden; border-radius: 2.6cqh; transform: rotate(8deg); box-shadow: 0 2.6cqh 4.6cqh rgba(30, 40, 80, 0.28); } .cl-skate-card img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 札の 2.15 倍。札の上と右へ、携帯の外まで飛び出す（同じ日の 2 回目、オーナー「人物をもっと大きく、外側に飛び出すように」→ 3 回目「札とスケーターをもっと右に、スケーターを少しだけ小さく」） */ /* 札の幅の 2.05 倍（7 回目、オーナー「札と人物をもっと右に」「人物をもう少し大きく」）。右の端は画面の右の端まで（.app の左右の余白 --pad のぶん、舞台の外へ出る。横にはずれない = .app:has(.cl) の overflow-x） */ .cl-skater { position: absolute; left: 15%; top: 2%; width: min(205%, calc(50cqw - var(--pw) / 2 + 17cqh + var(--pad, 16px))); max-width: none; height: auto; transform: rotate(2deg); filter: drop-shadow(0 1.6cqh 2cqh rgba(20, 30, 60, 0.25)); } /* その場で弾む（2026-10-22 オーナー「アイコンや人物や札がその場で弾む感じで動くように」）。傾き（transform）とは別の translate で動かす。動きを減らす設定では止める */ /* 動きはひとつずつ違う形と速さ（同じ日の 5 回目、オーナー「アイコンの動きはバラバラにしたい」）: 弾む（2 回はねる）・高く 1 回跳ぶ・ふわふわ浮く・首を振る・小さく円をえがく・ふくらむ。傾き（transform）とは別の translate・rotate・scale で動かす */ @keyframes cl-bounce { 0%, 62%, 100% { translate: 0 0; } 18% { translate: 0 -9%; } 34% { translate: 0 0; } 44% { translate: 0 -3%; } 54% { translate: 0 0; } } @keyframes cl-hop { 0%, 46%, 100% { translate: 0 0; scale: 1; } 8% { translate: 0 1%; scale: 1.04 0.95; } 24% { translate: 0 -16%; scale: 0.97 1.04; } 40% { translate: 0 0; scale: 1.03 0.96; } } @keyframes cl-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7%; } } @keyframes cl-sway { 0%, 100% { rotate: -5deg; translate: 0 0; } 50% { rotate: 6deg; translate: 0 -3%; } } @keyframes cl-orbit { 0%, 100% { translate: 0 0; } 25% { translate: 4% -5%; } 50% { translate: 0 -9%; } 75% { translate: -4% -5%; } } @keyframes cl-puff { 0%, 70%, 100% { scale: 1; translate: 0 0; } 20% { scale: 1.1; translate: 0 -4%; } 40% { scale: 0.97; translate: 0 0; } 55% { scale: 1.03; } } .sns-instagram { animation: cl-float 3.4s ease-in-out -0.4s infinite; } .sns-pinterest { animation: cl-hop 2.7s cubic-bezier(0.3, 0, 0.4, 1) -1.3s infinite; } .sns-x { animation: cl-sway 3.1s ease-in-out -0.9s infinite; } .sns-threads { animation: cl-orbit 4.4s linear -2.2s infinite; } .sns-tiktok { animation: cl-bounce 2.9s cubic-bezier(0.3, 0, 0.4, 1) -0.6s infinite; } .sns-youtube { animation: cl-puff 3.6s ease-in-out -1.8s infinite; } .cl-skate-card { animation: cl-float 4.2s ease-in-out -1s infinite; } .cl-skater { animation: cl-hop 2.4s cubic-bezier(0.3, 0, 0.4, 1) -0.2s infinite; } @media (prefers-reduced-motion: reduce) { .cl-stage .sns, .cl-skate-card, .cl-skater { animation: none; } } /* 3 枚の札（ガラス）と注意書き */ .cl-cards { list-style: none; align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 10px 0 0; padding: 0; } .cl-cards li { display: flex; flex-direction: column; justify-content: flex-start; gap: 5px; min-height: 70px; padding: 10px 7px 9px 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 6px 16px rgba(40, 70, 140, 0.08); } @media (prefers-color-scheme: dark) { .cl-cards li { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } } .cl-card-t { font-size: min(12px, 3.1cqi); font-weight: 700; line-height: 1.25; color: var(--ink); } .cl-card-s { font-size: min(10px, 2.6cqi); font-weight: 600; line-height: 1.45; color: var(--ink-soft); } .cl-link { display: flex; align-items: center; gap: 5px; padding: 4px 5px; border-radius: 8px; background: #fff; color: #333; box-shadow: 0 2px 6px rgba(40, 60, 110, 0.1); min-width: 0; } .cl-link .lk { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #EEF0F4; color: #3A3F4A; flex: none; } .cl-link .lk svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .cl-link span { font-size: min(10px, 2.4cqi); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl-sticky { position: relative; display: flex; align-items: center; min-height: 28px; padding: 4px 6px 4px 18px; border-radius: 6px; background: var(--n); color: #2a2a12; box-shadow: 0 2px 6px rgba(80, 70, 0, 0.16); } .cl-sticky img { position: absolute; left: 4px; top: -7px; width: auto; height: 32px; transform: rotate(-4deg); filter: drop-shadow(1px 1.5px 1px rgba(0, 0, 0, 0.25)); } .cl-sticky span { font-size: min(10px, 2.6cqi); font-weight: 700; line-height: 1.2; word-break: keep-all; } /* 付箋の右の端に押しピン（2026-10-22 オーナーの見本） */ .cl-sticky .cl-pin { position: absolute; left: auto; right: -14px; top: 8px; width: auto; height: min(42px, 10.5cqi); transform: none; filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.3)); } .cl-sticky { margin-right: 6px; padding-right: 13px; } /* 折れるのは「いつか／行きたい場所」のところだけ */ .cl-total { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 7px; border-radius: 8px; background: #fff; color: #222; box-shadow: 0 2px 6px rgba(40, 60, 110, 0.1); } .cl-total span { font-size: 9px; font-weight: 600; } .cl-total b { font-family: var(--serif); font-size: min(17px, 4.4cqi); font-weight: 400; } .cl-note { margin: 9px 0 0; font-size: min(10.5px, 2.85cqi); font-weight: 600; line-height: 1.5; text-align: center; color: var(--ink-soft); } html[lang="ja"] .cl-note { line-height: 1.42; } /* ---------- Timeline の画面（2026-10-22 オーナーの見本の絵と素材。StoreScreenshots/editorial/HP-timeline/）---------- 題名の段（アイコンと「Timeline」）→ A new volume, every week.（暗号から解く）→ 説明 3 行 → アプリのカレンダーの画面（本棚・カレンダー・フォルダ）。 画面の絵は、オーナーの 2 枚（カレンダーとフォルダ = 同じ 921×2000 の画面の上と下）をそのまま重ねる（見本の絵と同じ）。 低い画面では、フォルダの段がカレンダーの下の空いた週（18 日から先）に重なって、絵を小さくしすぎない。 「他のページに比べたらちょっとさみしい」（同じ日の 8 回目、オーナー）ので、動きを足した: 11〜17 日の週が光る → その週の 6 枚が本棚へ飛んでいく → 「Oct 11–17」の本が少し持ち上がって光る（7 秒ごと）・ 3 つのフォルダが順に少し持ち上がる・見出しは Collect と同じ暗号から解く。動きを減らす設定では、どれも止める。 画面の絵は、携帯の縁（銀の縁・黒い縁・角の丸み・上に島・横のボタン）の中に入れる（同じ日の 9 回目、オーナー「Swipe の時のようにモックの縁を」→ 10 回目「リアルなシルバーに」） 置き場所の数字は、元の絵の画素（x 35・y 242 が左上。幅 858 = 100cqw = 1 画素 0.11655cqw。make-site-images.swift の「Timeline の画面」） */ .screen:has(.dock) .app:has(.tl) { padding-bottom: 84px; } .tl { display: flex; flex-direction: column; align-items: center; height: calc(100cqh - 96px - 84px); padding-top: clamp(0px, 0.6cqh, 8px); } .tl-head { margin: 0; font-family: var(--serif); font-size: clamp(26px, min(4.6cqh, 9.4cqi), 38px); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; text-align: center; color: var(--ink); } .tl-lead { margin: 8px 0 0; font-size: min(13px, 3.3cqi); font-weight: 700; line-height: 1.45; text-align: center; color: var(--ink); } html[lang="en"] .tl-lead { line-height: 1.55; } /* 舞台は残った高さを全部使う。携帯の幅 --w（銀の縁ごと）= 舞台の幅の 82%（見本の絵は 75%。縦に長い画面で下のアイコンの列までが空かないように少し広く）か、 低い画面で 18 日の段の頭まで見える幅（舞台の高さの 53.4% ＋ 7px）の小さいほう。 携帯 = 銀の縁 3px（外の大きな iPhone と同じチタンのグラデーション = 同じ日の 10 回目、オーナー「携帯の縁をリアルなシルバーに」）→ 黒い縁 6px（Swipe の携帯と同じ）→ 上に島の段（内側の幅の 9%）・下に少し（3.5%）。その内側が画面の絵（.tl-panel）。横に小さなボタン（外の iPhone と同じ並び）。 高さは、絵を全部見せる高さ（絵の幅の 2.021 倍 = 1734 ÷ 858 ＋ 縁と上下の段 = 内側の幅 --s の 2.146 倍 − 6px）か、舞台の高さの小さいほう */ .tl-stage { position: relative; container-type: size; align-self: stretch; flex: 1 1 auto; min-height: 150px; margin-top: 10px; } .tl-phone { --w: min(82cqw, calc(53.4cqh + 7px)); --s: calc(var(--w) - 6px); position: absolute; left: 50%; top: 0; transform: translateX(-50%); box-sizing: border-box; width: var(--w); height: min(100cqh, calc(var(--s) * 2.146 - 6px)); padding: 3px; border-radius: calc(var(--s) * 0.125 + 3px); background: linear-gradient(135deg, #D9D9DB 0%, #8E8E93 18%, #F2F2F4 36%, #9A9A9F 55%, #E4E4E7 74%, #7D7D82 100%); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6), inset 0 0 0 0.5px rgba(255, 255, 255, 0.55), 0 16px 32px rgba(20, 30, 60, 0.22), 0 5px 10px rgba(20, 30, 60, 0.14); } /* 横のボタン（外の iPhone の .device-key と同じ色と並び。幅に対する割合: 左 = アクション 0.359〜0.431・音量 0.490〜0.624・0.651〜0.785、右 = 電源 0.574〜0.789） */ .tl-phone::before { content: ""; position: absolute; left: -2px; top: calc(var(--w) * 0.359); width: 2.5px; height: calc(var(--w) * 0.426); border-radius: 1.5px 0 0 1.5px; background: linear-gradient(90deg, #6E6E73, #C7C7CC) 0 0 / 100% calc(var(--w) * 0.072) no-repeat, linear-gradient(90deg, #6E6E73, #C7C7CC) 0 calc(var(--w) * 0.131) / 100% calc(var(--w) * 0.134) no-repeat, linear-gradient(90deg, #6E6E73, #C7C7CC) 0 calc(var(--w) * 0.292) / 100% calc(var(--w) * 0.134) no-repeat; } .tl-phone::after { content: ""; position: absolute; right: -2px; top: calc(var(--w) * 0.574); width: 2.5px; height: calc(var(--w) * 0.215); border-radius: 0 1.5px 1.5px 0; background: linear-gradient(270deg, #6E6E73, #C7C7CC); } .tl-screen { position: relative; box-sizing: border-box; height: 100%; padding: calc(var(--s) * 0.09) 0 calc(var(--s) * 0.035); border: 6px solid #050505; border-radius: calc(var(--s) * 0.125); overflow: hidden; background: #000; } /* 上の島（画面の地が黒いので、うすい縁とカメラの点で見せる） */ .tl-screen::before { content: ""; position: absolute; z-index: 3; left: 35%; top: calc(var(--s) * 0.022); width: 30%; height: calc(var(--s) * 0.05); border-radius: 999px; background: #000; box-shadow: 0 0 0 0.8px rgba(255, 255, 255, 0.16); } .tl-screen::after { content: ""; position: absolute; z-index: 4; left: calc(65% - var(--s) * 0.05); top: calc(var(--s) * 0.035); width: calc(var(--s) * 0.024); height: calc(var(--s) * 0.024); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2B3A55, #0A0E18 60%); } .tl-panel { position: relative; width: 100%; height: 100%; container-type: inline-size; overflow: hidden; background: #000; } /* この中の 100cqw = 画面の絵の幅 */ .tl-cal { position: absolute; inset: 0; overflow: hidden; } .tl-cal-img { position: absolute; left: 0; top: 0; width: 100cqw; max-width: none; height: auto; } .tl-folders { position: absolute; left: 0; right: 0; bottom: 0; height: 51.282cqw; background: #000; } /* 画面の高さでカレンダーが切れるところ（18 日から先の空いた週）は、フォルダの段の上で黒へなじませる（マスの頭だけが細く残って見えないように） */ .tl-folders::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 7cqw; background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000); pointer-events: none; } .tl-folders-img { width: 100%; height: 100%; } /* 11〜17 日の週の枠（x 32〜825・y 843〜1010） */ .tl-week { position: absolute; left: 3.730cqw; top: 98.252cqw; width: 92.541cqw; height: 19.580cqw; border-radius: 1.6cqw; opacity: 0; pointer-events: none; box-shadow: inset 0 0 0 max(1px, 0.28cqw) rgba(255, 255, 255, 0.92), 0 0 2.6cqw rgba(255, 255, 255, 0.4); animation: tl-week 7s ease-in-out infinite; } @keyframes tl-week { 0%, 3% { opacity: 0; } 8%, 20% { opacity: 1; } 30%, 100% { opacity: 0; } } /* 本棚へ飛んでいく 6 枚（11〜16 日のマスの写し。1 枚の絵 timeline-week.avif = 674×162 をずらして見せる。マスは 106 画素・間隔 113.2）。 行き先は本の真ん中（x 280・y 250）。--dx = そこまでの横の距離、縦はどれも 677 画素上 */ .tl-fly { position: absolute; top: 98.601cqw; left: var(--x); width: 12.354cqw; height: 18.881cqw; border-radius: 1cqw; opacity: 0; pointer-events: none; background: url("../app/timeline-week.avif") var(--bx) 0 / 78.555cqw 18.881cqw no-repeat; box-shadow: 0 1.4cqw 3cqw rgba(0, 0, 0, 0.6); animation: tl-fly 7s ease-in-out infinite; animation-delay: var(--d); } .tl-fly.c1 { --x: 4.196cqw; --bx: 0cqw; --dx: 22.261cqw; --d: 0s; } .tl-fly.c2 { --x: 17.366cqw; --bx: -13.170cqw; --dx: 9.091cqw; --d: 0.06s; } .tl-fly.c3 { --x: 30.536cqw; --bx: -26.340cqw; --dx: -4.079cqw; --d: 0.12s; } .tl-fly.c4 { --x: 43.823cqw; --bx: -39.627cqw; --dx: -17.366cqw; --d: 0.18s; } .tl-fly.c5 { --x: 56.993cqw; --bx: -52.797cqw; --dx: -30.536cqw; --d: 0.24s; } .tl-fly.c6 { --x: 70.163cqw; --bx: -65.967cqw; --dx: -43.706cqw; --d: 0.3s; } /* マスから浮き上がる → 少し弧を描いて（縦が先）本棚へ → 小さくなって本に入る */ @keyframes tl-fly { 0%, 9% { opacity: 0; translate: 0 0; scale: 1; } 12% { opacity: 1; translate: 0 -1.2cqw; scale: 1.08; } 18% { opacity: 1; translate: calc(var(--dx) * 0.4) -48cqw; scale: 0.6; } 24% { opacity: 0.9; translate: var(--dx) -78.904cqw; scale: 0.2; } 26%, 100% { opacity: 0; translate: var(--dx) -78.904cqw; scale: 0.2; } } /* いちばん新しい週の本「Oct 11–17」（x 254・y 92・52×316）。いつも棚に置いたまま、写しが入るところで少し持ち上がってひと光りし、棚に戻る。 （同じ日の 8 回目は、毎回いったん消えて空きから下へ満ちる形だったが、iPhone で点滅に見えた = 9 回目、オーナー「一瞬点滅のように見えて不具合っぽい」） */ .tl-spine { position: absolute; left: 29.604cqw; top: 10.723cqw; width: 6.061cqw; max-width: none; height: 36.830cqw; border-radius: 0.35cqw; animation: tl-spine 7s ease-in-out infinite; } @keyframes tl-spine { 0%, 21% { translate: 0 0; filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } 26% { translate: 0 -1.6cqw; filter: brightness(1.7) drop-shadow(0 0 1.6cqw rgba(255, 255, 255, 0.75)); } 31% { translate: 0 0.25cqw; filter: brightness(1.35) drop-shadow(0 0 1cqw rgba(255, 255, 255, 0.45)); } 36% { translate: 0 0; filter: brightness(1.12) drop-shadow(0 0 0.5cqw rgba(255, 255, 255, 0.2)); } 46%, 100% { translate: 0 0; filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } } /* 3 つのフォルダ（札と名前。y 128・248×300）が、本が入ったあと順に少し持ち上がる */ .tl-folder { position: absolute; top: 14.918cqw; width: 28.904cqw; max-width: none; height: auto; animation: tl-lift 7s ease-in-out infinite; } .tl-folder.f1 { left: 3.730cqw; } .tl-folder.f2 { left: 35.198cqw; animation-delay: 0.16s; } .tl-folder.f3 { left: 66.667cqw; animation-delay: 0.32s; } @keyframes tl-lift { 0%, 50% { translate: 0 0; } 56% { translate: 0 -2.2cqw; } 64%, 100% { translate: 0 0; } } @media (prefers-reduced-motion: reduce) { .tl-week, .tl-fly { display: none; } .tl-spine, .tl-folder { animation: none; } } /* ---------- Studio の画面（2026-10-22 オーナーの見本の絵と素材。StoreScreenshots/editorial/HP-studio/）---------- 題名の段（アイコンと「Studio」）→ Create something new from your screenshots.（2 行・暗号から解く）→ 説明 2 行 → Moodboard の画面の絵（オーナーのアプリの画面のボードだけ。角の丸い札）に、左上へ「Works with CapLog」のバッジ・右上へカメラのキャラが、札の外まではみ出して浮く → 下に Stitch・Carousel・Slideshow・Labels の 4 枚の札（前の Studio の画面の札のまま）を横にめくれる 1 列で（同じ日のオーナー「下の 4 つの四角は、今のままで横スライド」）。 下のアイコンの列まで、めくらずに 1 画面。Moodboard の札は残った高さを全部使い、ボードはゆっくり上下に流れる（36 秒で行って戻る = Wish list から Hello, world! まで） */ .screen:has(.dock) .app:has(.sd) { padding-bottom: 84px; } .sd { display: flex; flex-direction: column; align-items: center; height: calc(100cqh - 96px - 84px); padding-top: clamp(0px, 0.6cqh, 8px); } .sd-head { margin: 0; font-family: var(--serif); font-size: clamp(24px, min(4.2cqh, 9cqi), 36px); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; text-align: center; color: var(--ink); } .sd-lead { margin: 8px 0 0; font-size: min(13px, 3.3cqi); font-weight: 700; line-height: 1.5; text-align: center; color: var(--ink); } html[lang="en"] .sd-lead { font-size: min(13px, 3.2cqi); } /* この中の cqw・cqh = Moodboard の札の幅・高さ */ .sd-stage { position: relative; container-type: size; align-self: stretch; flex: 1 1 auto; min-height: 120px; margin-top: 12px; } .sd-board { position: absolute; inset: 0; container-type: size; overflow: hidden; border-radius: clamp(14px, 6cqw, 22px); background: #EEEAE1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 12px 28px rgba(40, 60, 110, 0.18); } .sd-board-img { position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: auto; animation: sd-pan 36s ease-in-out infinite alternate; } @keyframes sd-pan { 0%, 10% { translate: 0 0; } 90%, 100% { translate: 0 calc(100cqh - 100%); } } /* はみ出すステッカー（見本の絵を測った割合: バッジ = 札の幅の 24%・札の左の端から画面の左の端まで・上から幅の 4%・左へ 12 度、 キャラ = 幅の 25%・右の端から 1.6% 外・上から 3%）。その場でゆらゆら・ぴょこっと（ひとつずつ違う動き。Collect のアイコンと同じ考え） */ .sd-badge { position: absolute; z-index: 2; left: calc(-1 * var(--pad, 16px)); top: 4cqw; width: 24cqw; max-width: none; height: auto; transform: rotate(-12deg); filter: drop-shadow(0 6px 10px rgba(20, 30, 80, 0.25)); animation: sd-sway 4.8s ease-in-out infinite; } .sd-chara { position: absolute; z-index: 2; right: -1.6cqw; top: 3cqw; width: 25cqw; max-width: none; height: auto; filter: drop-shadow(0 6px 10px rgba(20, 30, 80, 0.25)); animation: sd-hop 3.1s ease-in-out infinite; } @keyframes sd-sway { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -4px; rotate: 4deg; } } @keyframes sd-hop { 0%, 55%, 100% { translate: 0 0; scale: 1; } 66% { translate: 0 -9px; scale: 1.03; } 78% { translate: 0 0; scale: 1.02 0.97; } 86% { translate: 0 -2px; scale: 1; } } /* 4 枚の札を横にめくれる 1 列に（画面の左右の端まで。札の幅は列の 56%（170〜232px）= 次の札が少しのぞく）。中身は前の Studio の画面の札のまま、 絵の高さだけ画面の高さから決める（--ih）。パソコンのマウスは、つかんで横に動かせる（site.js の data-drag-scroll） */ .st-slide { --ih: clamp(60px, calc(15cqh - 26px), 128px); align-self: stretch; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 12px calc(-1 * var(--pad, 16px)) 0; padding: 0 var(--pad, 16px) 2px; scroll-padding-inline: var(--pad, 16px); scrollbar-width: none; -webkit-user-select: none; user-select: none; } .st-slide::-webkit-scrollbar { display: none; } .st-slide.dragging { scroll-snap-type: none; cursor: grabbing; } .st-slide img { -webkit-user-drag: none; } .st-slide .st-card { flex: none; width: clamp(170px, 56%, 232px); padding: 10px; scroll-snap-align: start; box-shadow: 0 6px 16px rgba(40, 70, 140, 0.08); } .st-slide .st-card .ill { height: var(--ih); } .st-slide .st-card h3 { margin-top: 8px; } .st-slide .st-card p { font-size: min(11.5px, 3.4cqi); } /* 絵が横長になるので、縦長の画面の絵は高さから幅を決めて真ん中に */ .st-slide .ill-stitch img { width: calc(var(--ih) * 0.62); left: calc(50% - var(--ih) * 0.31); } .st-slide .ill-carousel img { top: 10%; height: 72%; width: calc(var(--ih) * 0.44); } .st-slide .ill-carousel img:nth-child(1) { left: calc(50% - var(--ih) * 0.5); } .st-slide .ill-carousel img:nth-child(2) { left: calc(50% + var(--ih) * 0.06); } .st-slide .ill-carousel img:nth-child(3) { left: calc(50% - var(--ih) * 0.22); } .st-slide .ill-carousel .dots { bottom: 5px; } .st-slide .ill-slide .ph { width: calc(var(--ih) * 0.88 * 9 / 16); border-radius: calc(var(--ih) * 0.08); overflow: visible; } /* 細い携帯の絵でも「MP4 9:16」が 1 行に収まるよう、札は携帯の下の端にまたがせる（画像の角は携帯と同じ丸み） */ .st-slide .ill-slide .ph img { border-radius: inherit; } .st-slide .ill-slide .badge { right: auto; left: 50%; bottom: 3px; translate: -50% 0; white-space: nowrap; } .st-slide .ill-labels img { left: 12%; top: 8%; height: 84%; width: calc(var(--ih) * 0.6); } .st-slide .ill-labels .lab { top: 22%; right: 10%; } @media (prefers-reduced-motion: reduce) { .sd-board-img, .sd-badge, .sd-chara { animation: none; } }