/* テイスト: ACMA PLANET（デザイン案 17 をもとに、地を水色の工作マットにしたもの × ステッカー × レシート） 2026-10-28 まではティール地だった。ティール版は themes/planet-teal.css に残している。 tokens.css の値を上書きし、お店の部品に飾りを足す。HTML はどのテイストでも同じものを使う。 アイコンは ICOOON MONO（assets/img/icons/）。 */ /* フッターのスタンプ用のロゴの形。file:// では外部画像の mask が読めないため data URI にしたもの */ @import url("../logo-mask.css"); :root { --mat: #6f95c9; --paper: #f3efeb; --star: #fdb945; /* キーボードで選んだときの星の黄の光（入力欄を選んだときと同じ） */ --focus-glow: 0 2px 18px 6px rgba(253, 185, 69, .85); --orange: #ff6f4e; --ink: #2b2e2e; --shadow-deep: rgba(7, 38, 55, .38); --shadow-soft: 0 2px 3px rgba(22, 76, 79, .08), 0 10px 12px rgba(22, 76, 79, .09), 0 30px 34px rgba(22, 76, 79, .12); /* 工作マットの地の上では文字が読みにくいので、本文は必ず紙（--paper）の上に置く。 リンク・見出しは、いまの BASE のお店のメインの朱（#d56536）を濃くした色（紙の上で 5.4、白の上で 6.2）。BASE の朱そのままだと紙の上で 3.2 しかないため。 --brand-soft は入力欄を選んだときの外側の線とお知らせの地（その上の --brand の文字は 5.0） */ --brand: #a8401c; --brand-dark: #7d2f14; --brand-soft: #f9e3da; --accent: var(--orange); --cream: #e9e2d6; --bg: var(--mat); --surface: #fff; --text: var(--ink); --muted: #5d6161; --line: #d6cdbf; --line-strong: var(--ink); --font-display: "Montserrat", "Zen Maru Gothic", sans-serif; --font-heading: "Zen Maru Gothic", "M PLUS 1", sans-serif; --radius: 12px; /* エラーの付箋（メッセージ表示の項を参照）。付箋 × 文字のコントラスト 5.5 */ --error-paper: #f5bdb5; --error-text: #8f1b12; /* メッセージのアイコン。mask に使うので形だけ（色は CSS で塗る） */ --icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); --icon-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v9' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='19' r='1.9'/%3E%3C/svg%3E"); --icon-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5.5' r='1.9'/%3E%3Cpath d='M12 10v9' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); /* 動きの速さと緩急（「全体アニメーション」の項を参照）。速さは NN/g の 100〜500ms の範囲で 3 段にそろえる */ --m-fast: 120ms; /* 押した・色が変わった */ --m-base: 220ms; /* ホバー・小さな出入り */ --m-slow: 360ms; /* 紙の差し替え・メニュー */ --m-out: cubic-bezier(.2, .8, .2, 1); /* すっと止まる */ --m-pop: cubic-bezier(.3, 1.5, .5, 1); /* 少し弾んで止まる（ボタン・トーストと同じ系統） */ --m-in: cubic-bezier(.5, 0, .9, .4); /* 消えるとき */ } /* ---- 地: 水色の工作マット × ざらざら（2026-10-28 決定。比較: design-proposals/bg-color.html の 27） ものづくりの作業台に紙や部品を並べた見立て。ティール × 白の方眼は参考の Deli-Planet と配色が同じに見えたので変えた。 色は、いまの BASE のお店の背景の水色（#95b6e0）を、紙との差が出るよう少し濃くしたもの（BASE の水色のままだと紙との差が 1.83 しかない）。 1 マス 48px を 1cm とみなし、細い線を 1 マスごと、太い線と 45 度の線を 5 マスごとに引く。ノイズは止まった絵（動かすとスマホで重いため） ---- */ body { --cell: 48px; --mat-line: rgba(255, 255, 255, .22); --mat-line-bold: rgba(255, 255, 255, .5); --mat-diag: rgba(255, 255, 255, .14); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(45deg, transparent calc(50% - .6px), var(--mat-diag) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)) 0 0 / calc(var(--cell) * 5) calc(var(--cell) * 5), linear-gradient(-45deg, transparent calc(50% - .6px), var(--mat-diag) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)) 0 0 / calc(var(--cell) * 5) calc(var(--cell) * 5), linear-gradient(90deg, var(--mat-line-bold) 0 2px, transparent 2px) 0 0 / calc(var(--cell) * 5) calc(var(--cell) * 5), linear-gradient(0deg, var(--mat-line-bold) 0 2px, transparent 2px) 0 0 / calc(var(--cell) * 5) calc(var(--cell) * 5), linear-gradient(90deg, var(--mat-line) 0 1px, transparent 1px) 0 0 / var(--cell) var(--cell), linear-gradient(0deg, var(--mat-line) 0 1px, transparent 1px) 0 0 / var(--cell) var(--cell), var(--mat); background-attachment: fixed; } /* 画面の左右のふちの定規の目盛り（1mm・5mm・1cm と数字）。地と同じく画面に止め、z-index: -1 でステッカー・紙の後ろに置く。 形だけの SVG を mask にして、色は background で塗る */ body::before, body::after { content: ""; position: fixed; z-index: -1; top: 0; bottom: 0; width: 30px; background: #fef3df; opacity: .85; pointer-events: none; } body::before { left: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='480'%3E%3Crect x='0' y='0.0' width='16' height='1'/%3E%3Ctext x='19' y='12.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E0%3C/text%3E%3Crect x='0' y='4.8' width='6' height='1'/%3E%3Crect x='0' y='9.6' width='6' height='1'/%3E%3Crect x='0' y='14.4' width='6' height='1'/%3E%3Crect x='0' y='19.2' width='6' height='1'/%3E%3Crect x='0' y='24.0' width='10' height='1'/%3E%3Crect x='0' y='28.8' width='6' height='1'/%3E%3Crect x='0' y='33.6' width='6' height='1'/%3E%3Crect x='0' y='38.4' width='6' height='1'/%3E%3Crect x='0' y='43.2' width='6' height='1'/%3E%3Crect x='0' y='48.0' width='16' height='1'/%3E%3Ctext x='19' y='60.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E1%3C/text%3E%3Crect x='0' y='52.8' width='6' height='1'/%3E%3Crect x='0' y='57.6' width='6' height='1'/%3E%3Crect x='0' y='62.4' width='6' height='1'/%3E%3Crect x='0' y='67.2' width='6' height='1'/%3E%3Crect x='0' y='72.0' width='10' height='1'/%3E%3Crect x='0' y='76.8' width='6' height='1'/%3E%3Crect x='0' y='81.6' width='6' height='1'/%3E%3Crect x='0' y='86.4' width='6' height='1'/%3E%3Crect x='0' y='91.2' width='6' height='1'/%3E%3Crect x='0' y='96.0' width='16' height='1'/%3E%3Ctext x='19' y='108.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E2%3C/text%3E%3Crect x='0' y='100.8' width='6' height='1'/%3E%3Crect x='0' y='105.6' width='6' height='1'/%3E%3Crect x='0' y='110.4' width='6' height='1'/%3E%3Crect x='0' y='115.2' width='6' height='1'/%3E%3Crect x='0' y='120.0' width='10' height='1'/%3E%3Crect x='0' y='124.8' width='6' height='1'/%3E%3Crect x='0' y='129.6' width='6' height='1'/%3E%3Crect x='0' y='134.4' width='6' height='1'/%3E%3Crect x='0' y='139.2' width='6' height='1'/%3E%3Crect x='0' y='144.0' width='16' height='1'/%3E%3Ctext x='19' y='156.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E3%3C/text%3E%3Crect x='0' y='148.8' width='6' height='1'/%3E%3Crect x='0' y='153.6' width='6' height='1'/%3E%3Crect x='0' y='158.4' width='6' height='1'/%3E%3Crect x='0' y='163.2' width='6' height='1'/%3E%3Crect x='0' y='168.0' width='10' height='1'/%3E%3Crect x='0' y='172.8' width='6' height='1'/%3E%3Crect x='0' y='177.6' width='6' height='1'/%3E%3Crect x='0' y='182.4' width='6' height='1'/%3E%3Crect x='0' y='187.2' width='6' height='1'/%3E%3Crect x='0' y='192.0' width='16' height='1'/%3E%3Ctext x='19' y='204.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E4%3C/text%3E%3Crect x='0' y='196.8' width='6' height='1'/%3E%3Crect x='0' y='201.6' width='6' height='1'/%3E%3Crect x='0' y='206.4' width='6' height='1'/%3E%3Crect x='0' y='211.2' width='6' height='1'/%3E%3Crect x='0' y='216.0' width='10' height='1'/%3E%3Crect x='0' y='220.8' width='6' height='1'/%3E%3Crect x='0' y='225.6' width='6' height='1'/%3E%3Crect x='0' y='230.4' width='6' height='1'/%3E%3Crect x='0' y='235.2' width='6' height='1'/%3E%3Crect x='0' y='240.0' width='16' height='1'/%3E%3Ctext x='19' y='252.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E5%3C/text%3E%3Crect x='0' y='244.8' width='6' height='1'/%3E%3Crect x='0' y='249.6' width='6' height='1'/%3E%3Crect x='0' y='254.4' width='6' height='1'/%3E%3Crect x='0' y='259.2' width='6' height='1'/%3E%3Crect x='0' y='264.0' width='10' height='1'/%3E%3Crect x='0' y='268.8' width='6' height='1'/%3E%3Crect x='0' y='273.6' width='6' height='1'/%3E%3Crect x='0' y='278.4' width='6' height='1'/%3E%3Crect x='0' y='283.2' width='6' height='1'/%3E%3Crect x='0' y='288.0' width='16' height='1'/%3E%3Ctext x='19' y='300.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E6%3C/text%3E%3Crect x='0' y='292.8' width='6' height='1'/%3E%3Crect x='0' y='297.6' width='6' height='1'/%3E%3Crect x='0' y='302.4' width='6' height='1'/%3E%3Crect x='0' y='307.2' width='6' height='1'/%3E%3Crect x='0' y='312.0' width='10' height='1'/%3E%3Crect x='0' y='316.8' width='6' height='1'/%3E%3Crect x='0' y='321.6' width='6' height='1'/%3E%3Crect x='0' y='326.4' width='6' height='1'/%3E%3Crect x='0' y='331.2' width='6' height='1'/%3E%3Crect x='0' y='336.0' width='16' height='1'/%3E%3Ctext x='19' y='348.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E7%3C/text%3E%3Crect x='0' y='340.8' width='6' height='1'/%3E%3Crect x='0' y='345.6' width='6' height='1'/%3E%3Crect x='0' y='350.4' width='6' height='1'/%3E%3Crect x='0' y='355.2' width='6' height='1'/%3E%3Crect x='0' y='360.0' width='10' height='1'/%3E%3Crect x='0' y='364.8' width='6' height='1'/%3E%3Crect x='0' y='369.6' width='6' height='1'/%3E%3Crect x='0' y='374.4' width='6' height='1'/%3E%3Crect x='0' y='379.2' width='6' height='1'/%3E%3Crect x='0' y='384.0' width='16' height='1'/%3E%3Ctext x='19' y='396.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E8%3C/text%3E%3Crect x='0' y='388.8' width='6' height='1'/%3E%3Crect x='0' y='393.6' width='6' height='1'/%3E%3Crect x='0' y='398.4' width='6' height='1'/%3E%3Crect x='0' y='403.2' width='6' height='1'/%3E%3Crect x='0' y='408.0' width='10' height='1'/%3E%3Crect x='0' y='412.8' width='6' height='1'/%3E%3Crect x='0' y='417.6' width='6' height='1'/%3E%3Crect x='0' y='422.4' width='6' height='1'/%3E%3Crect x='0' y='427.2' width='6' height='1'/%3E%3Crect x='0' y='432.0' width='16' height='1'/%3E%3Ctext x='19' y='444.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E9%3C/text%3E%3Crect x='0' y='436.8' width='6' height='1'/%3E%3Crect x='0' y='441.6' width='6' height='1'/%3E%3Crect x='0' y='446.4' width='6' height='1'/%3E%3Crect x='0' y='451.2' width='6' height='1'/%3E%3Crect x='0' y='456.0' width='10' height='1'/%3E%3Crect x='0' y='460.8' width='6' height='1'/%3E%3Crect x='0' y='465.6' width='6' height='1'/%3E%3Crect x='0' y='470.4' width='6' height='1'/%3E%3Crect x='0' y='475.2' width='6' height='1'/%3E%3C/svg%3E") 0 0 / 30px 480px repeat-y; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='480'%3E%3Crect x='0' y='0.0' width='16' height='1'/%3E%3Ctext x='19' y='12.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E0%3C/text%3E%3Crect x='0' y='4.8' width='6' height='1'/%3E%3Crect x='0' y='9.6' width='6' height='1'/%3E%3Crect x='0' y='14.4' width='6' height='1'/%3E%3Crect x='0' y='19.2' width='6' height='1'/%3E%3Crect x='0' y='24.0' width='10' height='1'/%3E%3Crect x='0' y='28.8' width='6' height='1'/%3E%3Crect x='0' y='33.6' width='6' height='1'/%3E%3Crect x='0' y='38.4' width='6' height='1'/%3E%3Crect x='0' y='43.2' width='6' height='1'/%3E%3Crect x='0' y='48.0' width='16' height='1'/%3E%3Ctext x='19' y='60.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E1%3C/text%3E%3Crect x='0' y='52.8' width='6' height='1'/%3E%3Crect x='0' y='57.6' width='6' height='1'/%3E%3Crect x='0' y='62.4' width='6' height='1'/%3E%3Crect x='0' y='67.2' width='6' height='1'/%3E%3Crect x='0' y='72.0' width='10' height='1'/%3E%3Crect x='0' y='76.8' width='6' height='1'/%3E%3Crect x='0' y='81.6' width='6' height='1'/%3E%3Crect x='0' y='86.4' width='6' height='1'/%3E%3Crect x='0' y='91.2' width='6' height='1'/%3E%3Crect x='0' y='96.0' width='16' height='1'/%3E%3Ctext x='19' y='108.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E2%3C/text%3E%3Crect x='0' y='100.8' width='6' height='1'/%3E%3Crect x='0' y='105.6' width='6' height='1'/%3E%3Crect x='0' y='110.4' width='6' height='1'/%3E%3Crect x='0' y='115.2' width='6' height='1'/%3E%3Crect x='0' y='120.0' width='10' height='1'/%3E%3Crect x='0' y='124.8' width='6' height='1'/%3E%3Crect x='0' y='129.6' width='6' height='1'/%3E%3Crect x='0' y='134.4' width='6' height='1'/%3E%3Crect x='0' y='139.2' width='6' height='1'/%3E%3Crect x='0' y='144.0' width='16' height='1'/%3E%3Ctext x='19' y='156.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E3%3C/text%3E%3Crect x='0' y='148.8' width='6' height='1'/%3E%3Crect x='0' y='153.6' width='6' height='1'/%3E%3Crect x='0' y='158.4' width='6' height='1'/%3E%3Crect x='0' y='163.2' width='6' height='1'/%3E%3Crect x='0' y='168.0' width='10' height='1'/%3E%3Crect x='0' y='172.8' width='6' height='1'/%3E%3Crect x='0' y='177.6' width='6' height='1'/%3E%3Crect x='0' y='182.4' width='6' height='1'/%3E%3Crect x='0' y='187.2' width='6' height='1'/%3E%3Crect x='0' y='192.0' width='16' height='1'/%3E%3Ctext x='19' y='204.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E4%3C/text%3E%3Crect x='0' y='196.8' width='6' height='1'/%3E%3Crect x='0' y='201.6' width='6' height='1'/%3E%3Crect x='0' y='206.4' width='6' height='1'/%3E%3Crect x='0' y='211.2' width='6' height='1'/%3E%3Crect x='0' y='216.0' width='10' height='1'/%3E%3Crect x='0' y='220.8' width='6' height='1'/%3E%3Crect x='0' y='225.6' width='6' height='1'/%3E%3Crect x='0' y='230.4' width='6' height='1'/%3E%3Crect x='0' y='235.2' width='6' height='1'/%3E%3Crect x='0' y='240.0' width='16' height='1'/%3E%3Ctext x='19' y='252.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E5%3C/text%3E%3Crect x='0' y='244.8' width='6' height='1'/%3E%3Crect x='0' y='249.6' width='6' height='1'/%3E%3Crect x='0' y='254.4' width='6' height='1'/%3E%3Crect x='0' y='259.2' width='6' height='1'/%3E%3Crect x='0' y='264.0' width='10' height='1'/%3E%3Crect x='0' y='268.8' width='6' height='1'/%3E%3Crect x='0' y='273.6' width='6' height='1'/%3E%3Crect x='0' y='278.4' width='6' height='1'/%3E%3Crect x='0' y='283.2' width='6' height='1'/%3E%3Crect x='0' y='288.0' width='16' height='1'/%3E%3Ctext x='19' y='300.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E6%3C/text%3E%3Crect x='0' y='292.8' width='6' height='1'/%3E%3Crect x='0' y='297.6' width='6' height='1'/%3E%3Crect x='0' y='302.4' width='6' height='1'/%3E%3Crect x='0' y='307.2' width='6' height='1'/%3E%3Crect x='0' y='312.0' width='10' height='1'/%3E%3Crect x='0' y='316.8' width='6' height='1'/%3E%3Crect x='0' y='321.6' width='6' height='1'/%3E%3Crect x='0' y='326.4' width='6' height='1'/%3E%3Crect x='0' y='331.2' width='6' height='1'/%3E%3Crect x='0' y='336.0' width='16' height='1'/%3E%3Ctext x='19' y='348.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E7%3C/text%3E%3Crect x='0' y='340.8' width='6' height='1'/%3E%3Crect x='0' y='345.6' width='6' height='1'/%3E%3Crect x='0' y='350.4' width='6' height='1'/%3E%3Crect x='0' y='355.2' width='6' height='1'/%3E%3Crect x='0' y='360.0' width='10' height='1'/%3E%3Crect x='0' y='364.8' width='6' height='1'/%3E%3Crect x='0' y='369.6' width='6' height='1'/%3E%3Crect x='0' y='374.4' width='6' height='1'/%3E%3Crect x='0' y='379.2' width='6' height='1'/%3E%3Crect x='0' y='384.0' width='16' height='1'/%3E%3Ctext x='19' y='396.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E8%3C/text%3E%3Crect x='0' y='388.8' width='6' height='1'/%3E%3Crect x='0' y='393.6' width='6' height='1'/%3E%3Crect x='0' y='398.4' width='6' height='1'/%3E%3Crect x='0' y='403.2' width='6' height='1'/%3E%3Crect x='0' y='408.0' width='10' height='1'/%3E%3Crect x='0' y='412.8' width='6' height='1'/%3E%3Crect x='0' y='417.6' width='6' height='1'/%3E%3Crect x='0' y='422.4' width='6' height='1'/%3E%3Crect x='0' y='427.2' width='6' height='1'/%3E%3Crect x='0' y='432.0' width='16' height='1'/%3E%3Ctext x='19' y='444.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E9%3C/text%3E%3Crect x='0' y='436.8' width='6' height='1'/%3E%3Crect x='0' y='441.6' width='6' height='1'/%3E%3Crect x='0' y='446.4' width='6' height='1'/%3E%3Crect x='0' y='451.2' width='6' height='1'/%3E%3Crect x='0' y='456.0' width='10' height='1'/%3E%3Crect x='0' y='460.8' width='6' height='1'/%3E%3Crect x='0' y='465.6' width='6' height='1'/%3E%3Crect x='0' y='470.4' width='6' height='1'/%3E%3Crect x='0' y='475.2' width='6' height='1'/%3E%3C/svg%3E") 0 0 / 30px 480px repeat-y; } body::after { right: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='480'%3E%3Crect x='14' y='0.0' width='16' height='1'/%3E%3Ctext x='1' y='12.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E0%3C/text%3E%3Crect x='24' y='4.8' width='6' height='1'/%3E%3Crect x='24' y='9.6' width='6' height='1'/%3E%3Crect x='24' y='14.4' width='6' height='1'/%3E%3Crect x='24' y='19.2' width='6' height='1'/%3E%3Crect x='20' y='24.0' width='10' height='1'/%3E%3Crect x='24' y='28.8' width='6' height='1'/%3E%3Crect x='24' y='33.6' width='6' height='1'/%3E%3Crect x='24' y='38.4' width='6' height='1'/%3E%3Crect x='24' y='43.2' width='6' height='1'/%3E%3Crect x='14' y='48.0' width='16' height='1'/%3E%3Ctext x='1' y='60.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E1%3C/text%3E%3Crect x='24' y='52.8' width='6' height='1'/%3E%3Crect x='24' y='57.6' width='6' height='1'/%3E%3Crect x='24' y='62.4' width='6' height='1'/%3E%3Crect x='24' y='67.2' width='6' height='1'/%3E%3Crect x='20' y='72.0' width='10' height='1'/%3E%3Crect x='24' y='76.8' width='6' height='1'/%3E%3Crect x='24' y='81.6' width='6' height='1'/%3E%3Crect x='24' y='86.4' width='6' height='1'/%3E%3Crect x='24' y='91.2' width='6' height='1'/%3E%3Crect x='14' y='96.0' width='16' height='1'/%3E%3Ctext x='1' y='108.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E2%3C/text%3E%3Crect x='24' y='100.8' width='6' height='1'/%3E%3Crect x='24' y='105.6' width='6' height='1'/%3E%3Crect x='24' y='110.4' width='6' height='1'/%3E%3Crect x='24' y='115.2' width='6' height='1'/%3E%3Crect x='20' y='120.0' width='10' height='1'/%3E%3Crect x='24' y='124.8' width='6' height='1'/%3E%3Crect x='24' y='129.6' width='6' height='1'/%3E%3Crect x='24' y='134.4' width='6' height='1'/%3E%3Crect x='24' y='139.2' width='6' height='1'/%3E%3Crect x='14' y='144.0' width='16' height='1'/%3E%3Ctext x='1' y='156.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E3%3C/text%3E%3Crect x='24' y='148.8' width='6' height='1'/%3E%3Crect x='24' y='153.6' width='6' height='1'/%3E%3Crect x='24' y='158.4' width='6' height='1'/%3E%3Crect x='24' y='163.2' width='6' height='1'/%3E%3Crect x='20' y='168.0' width='10' height='1'/%3E%3Crect x='24' y='172.8' width='6' height='1'/%3E%3Crect x='24' y='177.6' width='6' height='1'/%3E%3Crect x='24' y='182.4' width='6' height='1'/%3E%3Crect x='24' y='187.2' width='6' height='1'/%3E%3Crect x='14' y='192.0' width='16' height='1'/%3E%3Ctext x='1' y='204.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E4%3C/text%3E%3Crect x='24' y='196.8' width='6' height='1'/%3E%3Crect x='24' y='201.6' width='6' height='1'/%3E%3Crect x='24' y='206.4' width='6' height='1'/%3E%3Crect x='24' y='211.2' width='6' height='1'/%3E%3Crect x='20' y='216.0' width='10' height='1'/%3E%3Crect x='24' y='220.8' width='6' height='1'/%3E%3Crect x='24' y='225.6' width='6' height='1'/%3E%3Crect x='24' y='230.4' width='6' height='1'/%3E%3Crect x='24' y='235.2' width='6' height='1'/%3E%3Crect x='14' y='240.0' width='16' height='1'/%3E%3Ctext x='1' y='252.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E5%3C/text%3E%3Crect x='24' y='244.8' width='6' height='1'/%3E%3Crect x='24' y='249.6' width='6' height='1'/%3E%3Crect x='24' y='254.4' width='6' height='1'/%3E%3Crect x='24' y='259.2' width='6' height='1'/%3E%3Crect x='20' y='264.0' width='10' height='1'/%3E%3Crect x='24' y='268.8' width='6' height='1'/%3E%3Crect x='24' y='273.6' width='6' height='1'/%3E%3Crect x='24' y='278.4' width='6' height='1'/%3E%3Crect x='24' y='283.2' width='6' height='1'/%3E%3Crect x='14' y='288.0' width='16' height='1'/%3E%3Ctext x='1' y='300.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E6%3C/text%3E%3Crect x='24' y='292.8' width='6' height='1'/%3E%3Crect x='24' y='297.6' width='6' height='1'/%3E%3Crect x='24' y='302.4' width='6' height='1'/%3E%3Crect x='24' y='307.2' width='6' height='1'/%3E%3Crect x='20' y='312.0' width='10' height='1'/%3E%3Crect x='24' y='316.8' width='6' height='1'/%3E%3Crect x='24' y='321.6' width='6' height='1'/%3E%3Crect x='24' y='326.4' width='6' height='1'/%3E%3Crect x='24' y='331.2' width='6' height='1'/%3E%3Crect x='14' y='336.0' width='16' height='1'/%3E%3Ctext x='1' y='348.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E7%3C/text%3E%3Crect x='24' y='340.8' width='6' height='1'/%3E%3Crect x='24' y='345.6' width='6' height='1'/%3E%3Crect x='24' y='350.4' width='6' height='1'/%3E%3Crect x='24' y='355.2' width='6' height='1'/%3E%3Crect x='20' y='360.0' width='10' height='1'/%3E%3Crect x='24' y='364.8' width='6' height='1'/%3E%3Crect x='24' y='369.6' width='6' height='1'/%3E%3Crect x='24' y='374.4' width='6' height='1'/%3E%3Crect x='24' y='379.2' width='6' height='1'/%3E%3Crect x='14' y='384.0' width='16' height='1'/%3E%3Ctext x='1' y='396.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E8%3C/text%3E%3Crect x='24' y='388.8' width='6' height='1'/%3E%3Crect x='24' y='393.6' width='6' height='1'/%3E%3Crect x='24' y='398.4' width='6' height='1'/%3E%3Crect x='24' y='403.2' width='6' height='1'/%3E%3Crect x='20' y='408.0' width='10' height='1'/%3E%3Crect x='24' y='412.8' width='6' height='1'/%3E%3Crect x='24' y='417.6' width='6' height='1'/%3E%3Crect x='24' y='422.4' width='6' height='1'/%3E%3Crect x='24' y='427.2' width='6' height='1'/%3E%3Crect x='14' y='432.0' width='16' height='1'/%3E%3Ctext x='1' y='444.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E9%3C/text%3E%3Crect x='24' y='436.8' width='6' height='1'/%3E%3Crect x='24' y='441.6' width='6' height='1'/%3E%3Crect x='24' y='446.4' width='6' height='1'/%3E%3Crect x='24' y='451.2' width='6' height='1'/%3E%3Crect x='20' y='456.0' width='10' height='1'/%3E%3Crect x='24' y='460.8' width='6' height='1'/%3E%3Crect x='24' y='465.6' width='6' height='1'/%3E%3Crect x='24' y='470.4' width='6' height='1'/%3E%3Crect x='24' y='475.2' width='6' height='1'/%3E%3C/svg%3E") 0 0 / 30px 480px repeat-y; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='480'%3E%3Crect x='14' y='0.0' width='16' height='1'/%3E%3Ctext x='1' y='12.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E0%3C/text%3E%3Crect x='24' y='4.8' width='6' height='1'/%3E%3Crect x='24' y='9.6' width='6' height='1'/%3E%3Crect x='24' y='14.4' width='6' height='1'/%3E%3Crect x='24' y='19.2' width='6' height='1'/%3E%3Crect x='20' y='24.0' width='10' height='1'/%3E%3Crect x='24' y='28.8' width='6' height='1'/%3E%3Crect x='24' y='33.6' width='6' height='1'/%3E%3Crect x='24' y='38.4' width='6' height='1'/%3E%3Crect x='24' y='43.2' width='6' height='1'/%3E%3Crect x='14' y='48.0' width='16' height='1'/%3E%3Ctext x='1' y='60.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E1%3C/text%3E%3Crect x='24' y='52.8' width='6' height='1'/%3E%3Crect x='24' y='57.6' width='6' height='1'/%3E%3Crect x='24' y='62.4' width='6' height='1'/%3E%3Crect x='24' y='67.2' width='6' height='1'/%3E%3Crect x='20' y='72.0' width='10' height='1'/%3E%3Crect x='24' y='76.8' width='6' height='1'/%3E%3Crect x='24' y='81.6' width='6' height='1'/%3E%3Crect x='24' y='86.4' width='6' height='1'/%3E%3Crect x='24' y='91.2' width='6' height='1'/%3E%3Crect x='14' y='96.0' width='16' height='1'/%3E%3Ctext x='1' y='108.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E2%3C/text%3E%3Crect x='24' y='100.8' width='6' height='1'/%3E%3Crect x='24' y='105.6' width='6' height='1'/%3E%3Crect x='24' y='110.4' width='6' height='1'/%3E%3Crect x='24' y='115.2' width='6' height='1'/%3E%3Crect x='20' y='120.0' width='10' height='1'/%3E%3Crect x='24' y='124.8' width='6' height='1'/%3E%3Crect x='24' y='129.6' width='6' height='1'/%3E%3Crect x='24' y='134.4' width='6' height='1'/%3E%3Crect x='24' y='139.2' width='6' height='1'/%3E%3Crect x='14' y='144.0' width='16' height='1'/%3E%3Ctext x='1' y='156.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E3%3C/text%3E%3Crect x='24' y='148.8' width='6' height='1'/%3E%3Crect x='24' y='153.6' width='6' height='1'/%3E%3Crect x='24' y='158.4' width='6' height='1'/%3E%3Crect x='24' y='163.2' width='6' height='1'/%3E%3Crect x='20' y='168.0' width='10' height='1'/%3E%3Crect x='24' y='172.8' width='6' height='1'/%3E%3Crect x='24' y='177.6' width='6' height='1'/%3E%3Crect x='24' y='182.4' width='6' height='1'/%3E%3Crect x='24' y='187.2' width='6' height='1'/%3E%3Crect x='14' y='192.0' width='16' height='1'/%3E%3Ctext x='1' y='204.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E4%3C/text%3E%3Crect x='24' y='196.8' width='6' height='1'/%3E%3Crect x='24' y='201.6' width='6' height='1'/%3E%3Crect x='24' y='206.4' width='6' height='1'/%3E%3Crect x='24' y='211.2' width='6' height='1'/%3E%3Crect x='20' y='216.0' width='10' height='1'/%3E%3Crect x='24' y='220.8' width='6' height='1'/%3E%3Crect x='24' y='225.6' width='6' height='1'/%3E%3Crect x='24' y='230.4' width='6' height='1'/%3E%3Crect x='24' y='235.2' width='6' height='1'/%3E%3Crect x='14' y='240.0' width='16' height='1'/%3E%3Ctext x='1' y='252.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E5%3C/text%3E%3Crect x='24' y='244.8' width='6' height='1'/%3E%3Crect x='24' y='249.6' width='6' height='1'/%3E%3Crect x='24' y='254.4' width='6' height='1'/%3E%3Crect x='24' y='259.2' width='6' height='1'/%3E%3Crect x='20' y='264.0' width='10' height='1'/%3E%3Crect x='24' y='268.8' width='6' height='1'/%3E%3Crect x='24' y='273.6' width='6' height='1'/%3E%3Crect x='24' y='278.4' width='6' height='1'/%3E%3Crect x='24' y='283.2' width='6' height='1'/%3E%3Crect x='14' y='288.0' width='16' height='1'/%3E%3Ctext x='1' y='300.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E6%3C/text%3E%3Crect x='24' y='292.8' width='6' height='1'/%3E%3Crect x='24' y='297.6' width='6' height='1'/%3E%3Crect x='24' y='302.4' width='6' height='1'/%3E%3Crect x='24' y='307.2' width='6' height='1'/%3E%3Crect x='20' y='312.0' width='10' height='1'/%3E%3Crect x='24' y='316.8' width='6' height='1'/%3E%3Crect x='24' y='321.6' width='6' height='1'/%3E%3Crect x='24' y='326.4' width='6' height='1'/%3E%3Crect x='24' y='331.2' width='6' height='1'/%3E%3Crect x='14' y='336.0' width='16' height='1'/%3E%3Ctext x='1' y='348.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E7%3C/text%3E%3Crect x='24' y='340.8' width='6' height='1'/%3E%3Crect x='24' y='345.6' width='6' height='1'/%3E%3Crect x='24' y='350.4' width='6' height='1'/%3E%3Crect x='24' y='355.2' width='6' height='1'/%3E%3Crect x='20' y='360.0' width='10' height='1'/%3E%3Crect x='24' y='364.8' width='6' height='1'/%3E%3Crect x='24' y='369.6' width='6' height='1'/%3E%3Crect x='24' y='374.4' width='6' height='1'/%3E%3Crect x='24' y='379.2' width='6' height='1'/%3E%3Crect x='14' y='384.0' width='16' height='1'/%3E%3Ctext x='1' y='396.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E8%3C/text%3E%3Crect x='24' y='388.8' width='6' height='1'/%3E%3Crect x='24' y='393.6' width='6' height='1'/%3E%3Crect x='24' y='398.4' width='6' height='1'/%3E%3Crect x='24' y='403.2' width='6' height='1'/%3E%3Crect x='20' y='408.0' width='10' height='1'/%3E%3Crect x='24' y='412.8' width='6' height='1'/%3E%3Crect x='24' y='417.6' width='6' height='1'/%3E%3Crect x='24' y='422.4' width='6' height='1'/%3E%3Crect x='24' y='427.2' width='6' height='1'/%3E%3Crect x='14' y='432.0' width='16' height='1'/%3E%3Ctext x='1' y='444.0' font-family='Arial,sans-serif' font-weight='700' font-size='10'%3E9%3C/text%3E%3Crect x='24' y='436.8' width='6' height='1'/%3E%3Crect x='24' y='441.6' width='6' height='1'/%3E%3Crect x='24' y='446.4' width='6' height='1'/%3E%3Crect x='24' y='451.2' width='6' height='1'/%3E%3Crect x='20' y='456.0' width='10' height='1'/%3E%3Crect x='24' y='460.8' width='6' height='1'/%3E%3Crect x='24' y='465.6' width='6' height='1'/%3E%3Crect x='24' y='470.4' width='6' height='1'/%3E%3Crect x='24' y='475.2' width='6' height='1'/%3E%3C/svg%3E") 0 0 / 30px 480px repeat-y; } main { position: relative; z-index: 1; } /* ---- 背景に降り注ぐステッカー（参考の Deli-Planet と同じく、ゆっくり回りながら上から下へ落ちる） 枚数は背景パターン比較の 2「参考サイトに忠実」の 28 枚（参考サイトは 70 枚）、大きさはステッカーの大きさ比較 2 の 3「280px まで」（110〜280px）に、6 の特大（400px 前後）を 3 枚（13 枚目, 15 枚目, 16 枚目）足したもの。特大は紙に隠れず、スマホでは出ない位置・順番にした。JavaScript を使わないため、枚数・位置・速さは CSS で決め打ちにする。遅れ（--delay）を負の値にして、開いた瞬間から画面中に散らばって見えるようにした。 紙の後ろを通るので本文の邪魔にはならない。そのぶん紙に隠れやすいので、多くは画面の左右の余白を落とし、残りは紙と紙のすき間に見えるようにした。絵は AcmaToys のキャラクター（assets/img/chars/。公式 Instagram の写真から tools/make_sticker.swift で背景を抜き、白フチを焼き込んだ PNG）と AcmaToys のロゴ（chars/logo-acma-<色>.png・logo-acma-mark-<色>.png。logo-acma-yellow.png と、そのマークだけを切り出した logo-acma-yellow-mark.png を、同じ make_sticker.swift でパルピーの 5 色（ナチュラル・ブラック・オレンジ・グリーン・パープル）に塗って白フチを焼き込んだ PNG）。 色は 15 枚に順番に割りふる。JavaScript を使わないので、開くたびには変わらない（比較: design-proposals/sticker-logo-color.html）。 白フチを CSS の drop-shadow の重ねがけで付けると、28 枚が回るあいだ毎フレーム描き直しになり、60fps が 40fps まで落ちたため焼き込みにしている。 以前は ICOOON MONO の UFO・宇宙人などのアイコンも混ぜていたが、キャラと混ざってまとまらず、テーマとして決めたものでもないためロゴに替えた（比較: design-proposals/sticker-mix.html） ---- */ .theme-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .theme-deco i { position: absolute; top: 0; width: var(--size); height: var(--size); margin-left: calc(var(--size) / -2); border: 5px solid #fff; background: center / cover no-repeat; box-shadow: 0 4px 0 rgba(7, 38, 55, .3), 0 12px 16px rgba(22, 76, 79, .25); animation: planet-fall var(--dur) linear var(--delay) infinite; will-change: transform; } .theme-deco i:nth-child(1) { left: 94.6%; --size: 189px; --dur: 38.7s; --delay: -19.4s; --dx: 45px; --rot: -272deg; background-image: url("../../img/chars/pulpie-natural.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(2) { left: 81.3%; --size: 224px; --dur: 30.3s; --delay: -29.3s; --dx: -68px; --rot: -286deg; background-image: url("../../img/chars/dino-pizza.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(3) { left: 4.0%; --size: 277px; --dur: 40.3s; --delay: -3.5s; --dx: 57px; --rot: -266deg; background-image: url("../../img/chars/logo-acma-mark-natural.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(4) { left: 95.2%; --size: 131px; --dur: 46.7s; --delay: -43.1s; --dx: -53px; --rot: -390deg; background-image: url("../../img/chars/logo-acma-black.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(5) { left: 76.0%; --size: 270px; --dur: 34.4s; --delay: -1.2s; --dx: 76px; --rot: 443deg; background-image: url("../../img/chars/logo-acma-mark-orange.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(6) { left: 7.4%; --size: 176px; --dur: 35.1s; --delay: -13.6s; --dx: -40px; --rot: 479deg; background-image: url("../../img/chars/logo-acma-green.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(7) { left: 98.8%; --size: 225px; --dur: 39.4s; --delay: -18.2s; --dx: 87px; --rot: 361deg; background-image: url("../../img/chars/logo-acma-mark-purple.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(8) { left: 35.6%; --size: 250px; --dur: 47.0s; --delay: -40.5s; --dx: -105px; --rot: 438deg; background-image: url("../../img/chars/hood-orange.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(9) { left: 3.7%; --size: 195px; --dur: 34.2s; --delay: -21.1s; --dx: 57px; --rot: -306deg; background-image: url("../../img/chars/can-red.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(10) { left: 91.8%; --size: 252px; --dur: 49.7s; --delay: -49.5s; --dx: 44px; --rot: 540deg; background-image: url("../../img/chars/pulpie-black.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(11) { left: 81.6%; --size: 114px; --dur: 38.7s; --delay: -10.8s; --dx: 116px; --rot: 519deg; background-image: url("../../img/chars/dino-burger.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(12) { left: 6.9%; --size: 235px; --dur: 32.0s; --delay: -25.5s; --dx: 72px; --rot: 370deg; background-image: url("../../img/chars/logo-acma-natural.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(13) { left: 97.9%; --size: 382px; --dur: 38.4s; --delay: -15.9s; --dx: -96px; --rot: -486deg; background-image: url("../../img/chars/dino-pizza.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(14) { left: 42.1%; --size: 265px; --dur: 32.1s; --delay: -30.6s; --dx: 31px; --rot: 445deg; background-image: url("../../img/chars/logo-acma-mark-black.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(15) { left: 4.9%; --size: 395px; --dur: 48.7s; --delay: -1.4s; --dx: 84px; --rot: 327deg; background-image: url("../../img/chars/hood-blue.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(16) { left: 91.9%; --size: 410px; --dur: 49.9s; --delay: -45.2s; --dx: 83px; --rot: -389deg; background-image: url("../../img/chars/pulpie-paint.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(17) { left: 81.6%; --size: 229px; --dur: 39.6s; --delay: -17.4s; --dx: -30px; --rot: -365deg; background-image: url("../../img/chars/dino-hotdog.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(18) { left: 7.1%; --size: 167px; --dur: 45.3s; --delay: -33.1s; --dx: -93px; --rot: 244deg; background-image: url("../../img/chars/logo-acma-orange.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(19) { left: 96.3%; --size: 278px; --dur: 38.6s; --delay: -6.9s; --dx: 50px; --rot: 377deg; background-image: url("../../img/chars/logo-acma-mark-green.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(20) { left: 60.6%; --size: 267px; --dur: 32.5s; --delay: -18.4s; --dx: -77px; --rot: 395deg; background-image: url("../../img/chars/pulpie-gold.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(21) { left: 1.5%; --size: 208px; --dur: 46.3s; --delay: -22.1s; --dx: 33px; --rot: -426deg; background-image: url("../../img/chars/pulpie-blue.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(22) { left: 96.8%; --size: 243px; --dur: 34.3s; --delay: -25.5s; --dx: -34px; --rot: -326deg; background-image: url("../../img/chars/logo-acma-purple.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(23) { left: 38.2%; --size: 276px; --dur: 44.6s; --delay: -32.3s; --dx: 76px; --rot: 393deg; background-image: url("../../img/chars/logo-acma-mark-natural.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(24) { left: 5.7%; --size: 232px; --dur: 44.2s; --delay: -33.7s; --dx: 79px; --rot: -505deg; background-image: url("../../img/chars/logo-acma-black.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(25) { left: 97.9%; --size: 199px; --dur: 31.5s; --delay: -0.0s; --dx: 53px; --rot: 488deg; background-image: url("../../img/chars/pulpie-natural.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(26) { left: 63.7%; --size: 205px; --dur: 30.3s; --delay: -29.6s; --dx: -60px; --rot: 291deg; background-image: url("../../img/chars/logo-acma-mark-orange.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(27) { left: 7.3%; --size: 179px; --dur: 36.4s; --delay: -23.7s; --dx: 67px; --rot: -241deg; background-image: url("../../img/chars/logo-acma-green.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } .theme-deco i:nth-child(28) { left: 98.4%; --size: 186px; --dur: 42.0s; --delay: -37.6s; --dx: -45px; --rot: 215deg; background-image: url("../../img/chars/logo-acma-mark-purple.png"); border: 0; border-radius: 0; box-shadow: none; background-size: contain; filter: drop-shadow(0 5px 0 var(--shadow-deep)) drop-shadow(0 12px 14px rgba(22, 76, 79, .25)); } @keyframes planet-fall { 0% { transform: translate(0, -30vh) rotate(0); } 50% { transform: translate(var(--dx), 50vh) rotate(calc(var(--rot) / 2)); } 100% { transform: translate(0, 130vh) rotate(var(--rot)); } } @keyframes planet-poyo { 0%, 100% { transform: scale(1, 1); } 15% { transform: scale(1.06, .94); } 30% { transform: scale(.96, 1.04); } 45% { transform: scale(1, 1); } } /* スマホは 12 枚に減らし、小さくする（重さと、画面の左右の余白がないため） */ @media (max-width: 767px) { .theme-deco i { border-width: 3px; width: calc(var(--size) * .6); height: calc(var(--size) * .6); } .theme-deco i:nth-child(n + 13) { display: none; } } /* ---- ヘッダーの上の帯: レシートの番号と日付 ---- */ body > .checker { height: 26px; background: var(--ink); overflow: hidden; position: relative; } body > .checker::before { content: "NO.000666 ----------- DATE " attr(data-date) " ----------- ACMATOYS ★ アクマな世界を。 ----------- NO.000666 ----------- DATE " attr(data-date) " ----------- ACMATOYS ★ アクマな世界を。 ----------- "; position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--paper); font: 700 11px/26px var(--font-display); letter-spacing: .14em; animation: planet-band 40s linear infinite; } @keyframes planet-band { to { transform: translateX(-50%); } } /* ---- ヘッダー: 紙の帯。ロゴは本物の画像をそのまま使う ---- */ .site-header { background: var(--paper); border-bottom: 0; box-shadow: 0 3px 0 var(--shadow-deep); } .site-nav__list a { font-style: italic; font-weight: 900; } body[data-page="home"] [data-nav="home"], body[data-page="about"] [data-nav="about"], body[data-page="story"] [data-nav="story"], body[data-page="items"] [data-nav="items"], body[data-page="blog"] [data-nav="blog"], body[data-page="guide"] [data-nav="guide"], body[data-page="contact"] [data-nav="contact"] { color: var(--brand); border-bottom: 3px dashed var(--brand); } .icon-link__label { font-style: italic; font-weight: 900; } .icon-link__count { background: var(--orange); color: var(--ink); box-shadow: 0 0 0 2px #fff; } .site-menu__panel { background: var(--paper); border-bottom: 0; box-shadow: 0 6px 0 var(--shadow-deep); } .site-menu[open] .site-menu__panel { box-shadow: 0 6px 0 var(--shadow-deep), 0 0 0 100vmax rgba(43, 46, 46, .45); } .site-menu__panel a { font-style: italic; font-weight: 900; } /* ---- ページの紙: 本文はすべて紙の上。右上をクリップで留める ---- */ .page > .container, main > .section > .container { position: relative; background: var(--paper); border-radius: 6px; padding: var(--space-6) var(--space-6) var(--space-7); box-shadow: var(--shadow-soft); } .page > .container { margin-bottom: var(--space-6); } .page > .container::before, main > .section > .container::before { content: ""; position: absolute; right: 36px; top: -38px; width: 28px; aspect-ratio: 71 / 240; /* 絵のアイコンより紙をはさむ立体感が出るので、本物のクリップの写真を使う */ background: url("../../img/photos/gemclip-unsplash-gkgd6saz8C4.png") center / contain no-repeat; rotate: 8deg; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .3)); } .section { padding: var(--space-5) 0; } .section + .section { border-top: 0; } @media (max-width: 1152px) { .page > .container, main > .section > .container { width: calc(100% - var(--space-5)); } } @media (max-width: 480px) { .page > .container, main > .section > .container { padding: var(--space-6) var(--space-4) var(--space-6); } .page > .container::before, main > .section > .container::before { right: 18px; top: -30px; width: 24px; height: 52px; } } /* ---- 見出し: 斜めの太字にずらした影 ---- */ .section-title__en { font-style: italic; color: var(--brand); text-shadow: 3px 3px 0 var(--ink); text-transform: none; letter-spacing: .02em; } .section-title__ja { color: var(--muted); } .page-head { border-bottom: 2px dashed #989898; padding-bottom: var(--space-4); } h1, h2, h3 { font-weight: 900; } /* ---- ボタン: 押せるおもちゃのボタン（2026-10-30 決定。比較: design-proposals/buttons.html の案 10）---- 太い墨の枠と下の厚みで、押すと厚みの分だけ沈む。主ボタンは墨（厚みは朱）。 主ボタンと「進む」ボタン（セクションの下の「記事一覧へ」など）は、右に矢印の丸を付けて進む先があると伝える。 乗せたときは傾けない（以前は大きくして傾けていたが、押して沈む動きと合わせると落ち着かないため） */ /* 矢印の丸の分だけ文字の幅がせまくなり、カートの「ログインして購入手続きへ」などは 2 行に折れる。折れても左に寄らないよう中央にそろえる */ /* 下の厚み（--press）と、キーボードで選んだときの光（--ring）は変数にして、左の欄・ページ送りと同じ決まりで動かす。 キーボードで選んだときは、入力欄を選んだときと同じく、フチと厚みを朱にして星の黄の光で囲み、少し浮かせる（2026-11-01 ユーザー決定）。 outline の枠にしないのは、下の厚みに重なって押し込まれた形に見えるため。 outline は消さずに透明で残す（Windows のハイコントラスト表示では box-shadow が消え、透明の outline が見える色で描かれるため） */ .btn { --press: 5px; --press-color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 var(--press) 0 var(--press-color), var(--ring, 0 0 #0000); text-align: center; transition: transform .1s, box-shadow .1s; } .btn:hover { transform: translateY(-1px); --press: 6px; } .btn:active { transform: translateY(5px); --press: 0px; } .btn:not([disabled], [aria-disabled="true"]):focus-visible { outline: 3px solid transparent; border-color: var(--brand); --press-color: var(--brand); --ring: var(--focus-glow); } /* 押しているあいだは、浮かせるより沈む動きを優先する */ .btn:not(.btn--ghost, [disabled], [aria-disabled="true"]):focus-visible:not(:active) { transform: translateY(-1px); --press: 6px; } /* 文字だけのボタンは厚みもフチもないので、光だけで囲む */ .btn.btn--ghost:not([disabled], [aria-disabled="true"]):focus-visible { border-color: transparent; box-shadow: var(--focus-glow); } .btn--primary { --press-color: var(--brand); background: var(--ink); border-color: var(--ink); color: #fff; font-family: var(--font-display); font-style: italic; font-weight: 900; letter-spacing: .04em; } .btn--primary:hover { background: var(--ink); border-color: var(--ink); } .btn--primary::after, .section__more .btn::after { content: "→"; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: -8px; border-radius: 50%; background: var(--star); color: var(--ink); font-style: normal; font-size: .9em; transition: translate .2s; } /* 乗せると矢印が少し進む（buttons.html の案 9 の動き。2026-10-30 ユーザー指定） */ .btn--primary:hover::after, .btn--primary:focus-visible::after, .section__more .btn:hover::after, .section__more .btn:focus-visible::after { translate: 3px 0; } .section__more .btn:not(.btn--primary)::after { background: var(--ink); color: #fff; } .btn--danger { border-color: var(--ink); color: var(--danger); } .btn--ghost, .btn[disabled], .btn[aria-disabled="true"] { border-color: transparent; box-shadow: none; transform: none; } .btn--ghost:hover, .btn--ghost:active { box-shadow: none; transform: none; } .btn[disabled]::after, .btn[aria-disabled="true"]::after { display: none; } /* ---- バッジ: 白フチのステッカー ---- */ .badge { border-radius: 999px; border: 2px solid #fff; box-shadow: 0 2px 0 rgba(7, 38, 55, .25); font-family: var(--font-display); font-style: italic; font-weight: 900; padding: 1px 10px; } .badge--sale { background: var(--orange); color: var(--ink); border-color: #fff; } .badge--lottery { background: var(--star); color: var(--ink); border-color: #fff; } .badge--preorder { background: var(--brand); color: #fff; border-color: #fff; } .badge--soon { background: #fff; color: var(--info); border-color: #fff; } .badge--soldout { background: var(--ink); color: #fff; border-color: #fff; } /* 商品カードのラベルは、写真の右上に斜めに貼ったテープ（2026-10-30 決定。比較: design-proposals/product-badge.html の案 10）。 記事一覧の NEW のテープとそろえる。売り切れだけは写真のまん中に大きなスタンプで出し、買えないことをはっきりさせる。 テープを写真の外へはみ出させるため、写真の枠の overflow を戻し、角の丸みは写真そのものに付ける */ .product-card__image { overflow: visible; } .product-card__image img { border-radius: inherit; } .product-card__badges { left: auto; right: -12px; top: 10px; z-index: 2; } .product-card__badges .badge { border: 0; border-radius: 0; padding: 2px 12px; rotate: 10deg; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); opacity: .95; } .product-card__badges .badge small { display: block; font-size: 10px; line-height: 1.2; } .product-card.is-soldout .product-card__badges { inset: 0; display: grid; place-items: center; } .product-card.is-soldout .product-card__badges .badge { padding: 4px 16px; border: 3px solid var(--brand); background: rgba(255, 255, 255, .85); color: var(--brand); font-size: 20px; rotate: -14deg; box-shadow: none; } @media (max-width: 480px) { .product-card.is-soldout .product-card__badges .badge { font-size: 14px; padding: 2px 10px; } } /* ---- 商品カード: 記事一覧と同じポラロイド写真（2026-10-30 ユーザー決定） ---- */ .product-card__link { padding: 10px 10px 14px; background: #fff; box-shadow: 0 10px 14px -8px rgba(7, 38, 55, .4); } .product-card__image { border: 0; border-radius: 0; } .product-card__link:hover .product-card__image { border-color: transparent; } .product-card__link:hover .product-card__name { color: var(--brand); } .product-card .price { font-style: italic; font-weight: 900; color: var(--brand); } /* ---- HOME ---- */ /* バナーは運営者の画像をそのまま見せる（切り取らない）。白フチの写真を、ひもから目玉クリップで吊るしてゆっくり揺らす （2026-10-28 仮決定。比較: design-proposals/banner.html の 5P）。 クリップは Unsplash の写真（ID O8HHFS7InmA。Unsplash License）の背景を抜いたもの。絵でなく写真にしたのは、紙をはさむ立体感を出すため。 --clip はクリップの幅。写真の縦横比（240 / 190）から上の余白を出し、写真の下 18px（クリップの口）を白フチにかぶせる */ .home-banner { --clip: clamp(90px, 10vw, 128px); position: relative; background: transparent; border-bottom: 0; padding: calc(var(--clip) * 240 / 190 - 18px + 40px) var(--space-4) var(--space-4); } .home-banner::before { content: ""; position: absolute; left: 50%; top: 0; width: 3px; height: 44px; background: var(--ink); translate: -50% 0; } .home-banner__link { position: relative; max-width: 1120px; padding: 10px; background: #fff; border-radius: 4px; transform-origin: 50% calc(var(--clip) * -1.4); box-shadow: 0 4px 0 var(--shadow-deep), 0 18px 24px rgba(22, 76, 79, .3); animation: planet-swing 6s ease-in-out infinite; } .home-banner__link::before { content: ""; position: absolute; z-index: 1; left: 50%; top: calc(var(--clip) * -240 / 190 + 18px); width: var(--clip); aspect-ratio: 190 / 240; translate: -50% 0; background: url("../../img/photos/binderclip-unsplash-O8HHFS7InmA.png") center / contain no-repeat; filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, .35)); pointer-events: none; } .home-banner picture { display: block; } .home-banner img { border-radius: 2px; } @keyframes planet-swing { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } } @media (max-width: 680px) { .intro .container { width: calc(100% - var(--space-6)); padding: var(--space-5) var(--space-4) 72px; } .intro .container::after { left: var(--space-4); right: var(--space-4); } } /* 紹介文はレシート。下のギザギザは mask で切るので、影は親の filter で付ける */ .intro { padding: var(--space-6) 0; filter: drop-shadow(0 10px 12px rgba(22, 76, 79, .2)); } .intro .container { max-width: 600px; background: var(--paper); padding: var(--space-5) var(--space-6) 72px; rotate: 1.2deg; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; position: relative; } .intro .container::before { content: "NO.000666 ------ DATE " attr(data-date); display: block; margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 2px dashed #989898; font: 800 12px/1.4 var(--font-display); letter-spacing: .08em; color: var(--muted); text-align: left; } .intro .container::after { content: ""; position: absolute; left: var(--space-6); right: var(--space-6); bottom: 26px; height: 30px; background: url("../../img/icons/barcode.svg") 0 50% / auto 100% repeat-x; } .intro__head-en, .intro__lamp { font-style: italic; } .intro__title { font-style: italic; color: var(--brand); text-shadow: 2px 2px 0 var(--ink); } /* 稼働中のランプ。動きを減らす設定では、ファイル末尾の prefers-reduced-motion で止まる */ .intro__lamp::before { animation: planet-lamp 1.2s steps(2, jump-none) infinite; } @keyframes planet-lamp { 50% { opacity: .35; } } /* MOTTO は数秒に一度だけ赤い残像でブレる（2026-10-30 仮決定。比較: design-proposals/motto.html の案 5、色は motto-glitch.html の 9）。 重ねる文字は data-text から出すので、読み上げとコピーは本文の 1 回だけになる */ .intro__motto { position: relative; display: inline-block; font-weight: 900; font-size: 1.15em; } .intro__motto::before, .intro__motto::after { content: attr(data-text); position: absolute; inset: 0; color: #ff2a1a; clip-path: inset(100% 0 0 0); } .intro__motto::before { animation: planet-glitch-a 2.4s steps(1) infinite; } .intro__motto::after { animation: planet-glitch-b 2.4s steps(1) infinite; } @keyframes planet-glitch-a { 0%, 86%, 100% { clip-path: inset(100% 0 0 0); transform: none; } 88% { clip-path: inset(10% 0 55% 0); transform: translate(-3px, 0); } 92% { clip-path: inset(60% 0 8% 0); transform: translate(3px, 0); } 96% { clip-path: inset(30% 0 40% 0); transform: translate(-2px, 0); } } @keyframes planet-glitch-b { 0%, 86%, 100% { clip-path: inset(100% 0 0 0); transform: none; } 89% { clip-path: inset(50% 0 20% 0); transform: translate(3px, 0); } 94% { clip-path: inset(5% 0 70% 0); transform: translate(-3px, 0); } } .pickup__en { font-style: italic; } .pickup__image { border: 0; border-radius: 12px; box-shadow: 0 0 0 8px #fff, 0 12px 20px rgba(7, 38, 55, .2); } .post-list, .post-list li { border-color: #b8b0a3; border-style: dashed; } .post-list time { font-style: italic; } /* News は画びょうで留めた付箋。画びょうの色をラベルで変える（2026-10-30 決定。比較: design-proposals/news-pin.html の案 2） 画びょうの色（data-pin の --pin）は components.css の「記事のラベルの画びょう」。画びょうは Unsplash の写真（Unsplash License）。 写真の url() は変数にせず li::before に直接書く。変数の中の相対パスは、使う側の CSS の場所から解決されてずれるため。 付箋（a）ではなく li を傾ける。画びょう（li::before）と浮いた影（li::after）を付箋と一緒に回し、 画びょうを付箋より手前に出すため（a の中の疑似要素だと a の重なり順から出られない） */ .news-notes { gap: var(--space-6) var(--space-5); padding-top: var(--space-4); } .news-notes li { --note: #fff2a6; --r: -2deg; position: relative; rotate: var(--r); transform-origin: 50% 0; } .news-notes li:nth-child(2) { --note: #ffd0c4; --r: 2deg; } .news-notes li:nth-child(3) { --note: #cdeee0; --r: -1deg; } .news-notes li::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -18px; width: 38px; aspect-ratio: 224 / 240; translate: -50% 0; background: url("../../img/photos/pushpin-unsplash-bwOAixLG0uc.png") center / contain no-repeat; filter: var(--pin) drop-shadow(4px 7px 3px rgba(0, 0, 0, .35)); pointer-events: none; } /* 1 点で留めた紙は、留めた所から遠い下の端ほど浮くので、影は下に寄せる */ .news-notes li::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 6px; height: 30%; box-shadow: 0 14px 14px rgba(7, 38, 55, .35); } .news-notes a { position: relative; z-index: 1; min-height: 210px; padding: var(--space-5) var(--space-4) var(--space-4); border: 0; border-radius: 0; color: var(--ink); background: radial-gradient(circle at 50% 8px, rgba(0, 0, 0, .16), transparent 16px), linear-gradient(170deg, rgba(255, 255, 255, .45), transparent 45%), var(--note); } .news-notes a:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; } .news-notes time { font: 600 15px "Klee One", cursive; color: var(--ink); } .news-notes__label { border: 2px solid var(--ink); background: #fff; font-family: var(--font-heading); } .news-notes__new { padding: 0 6px; border-radius: 3px; background: var(--orange); color: var(--ink); rotate: -6deg; } .news-notes__title { font: 900 16px/1.5 var(--font-heading); } .news-notes__excerpt { font: 400 14px/1.7 "Klee One", cursive; color: var(--ink); } .news-notes__more { font: 600 14px "Klee One", cursive; color: var(--ink); } @media (max-width: 480px) { .news-notes { gap: var(--space-5); } .news-notes a { min-height: 0; } } /* ---- 商品詳細 ---- */ /* 写真は商品カードと同じポラロイド、ラベルは写真の右上に貼るテープ（2026-10-30 ユーザー決定）。 テープを写真の外へはみ出させるため、写真の枠の overflow を戻し、正方形は写真そのものに持たせる */ .gallery__main { overflow: visible; aspect-ratio: auto; padding: 14px 14px 26px; border: 0; border-radius: 0; background: #fff; box-shadow: 0 16px 22px -12px rgba(7, 38, 55, .5); } .gallery__main img { display: block; aspect-ratio: 1 / 1; } .gallery__thumbs a { aspect-ratio: auto; padding: 4px 4px 8px; border: 0; border-radius: 0; background: #fff; box-shadow: 0 6px 8px -4px rgba(7, 38, 55, .45); } .gallery__thumbs a img { display: block; aspect-ratio: 1 / 1; } .gallery__thumbs a[aria-current="true"] { border: 0; outline: 3px solid var(--brand); outline-offset: 2px; } .gallery__badges { right: -16px; top: 22px; gap: 6px; } .gallery__badges .badge { border: 0; border-radius: 0; padding: 4px 18px; font-size: 17px; rotate: 10deg; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); opacity: .95; } .gallery__main.is-soldout .gallery__badges .badge { padding: 6px 28px; border: 4px solid var(--brand); background: rgba(255, 255, 255, .85); color: var(--brand); font-size: 40px; rotate: -14deg; box-shadow: none; } @media (max-width: 480px) { .gallery__badges { right: -8px; } .gallery__badges .badge { font-size: 14px; padding: 2px 12px; } .gallery__main.is-soldout .gallery__badges .badge { font-size: 26px; } } .product__price { font-style: italic; font-weight: 900; color: var(--brand); } /* border-style を一括で変えると、shop.css で引いていない左右にも既定の太さの線が出るため、上下だけ変える */ .product__buy { border-color: #b8b0a3; border-top-style: dashed; border-bottom-style: dashed; } .sale-period { border: 0; border-radius: 10px; background: #fff; box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 2px var(--star); } .sale-period__title { font-style: italic; color: var(--brand); } /* ---- 文章ページ ---- */ .prose h2 { border-bottom: 3px dashed var(--brand); } .folder-tabs__body, .contact-sheet { position: relative; border: 2px solid var(--ink); border-radius: 10px; background: #fff; box-shadow: 6px 6px 0 2px var(--orange); } /* ABOUT の白い紙の中の EIMA の書類は、枠と影を重ねると二重に見えるので点線だけにする（書類の下書きのメモのように） */ .folder-tabs__body .doc-box { box-shadow: none; border: 2px dashed #b8b0a3; } .doc-box { border: 0; background: #fff; border-radius: 10px; box-shadow: 0 0 0 2px var(--ink), 6px 6px 0 2px var(--orange); } /* ---- フォーム・枠 ---- */ .panel { border: 0; box-shadow: var(--shadow-soft); } /* ---- 入力欄: 墨の太いフチ＋下にずらした影で、ステッカーのような厚みを出す。 選んでいる・入力中は星の黄の光をまわりに付ける ---- */ .field { gap: var(--space-2); } .field__label { font-family: var(--font-heading); font-weight: 900; font-size: var(--fs-body); } .field__req { padding: 1px 9px; border-radius: 999px; border: 2px solid #fff; background: var(--orange); color: var(--ink); font-family: var(--font-heading); font-weight: 900; box-shadow: 0 2px 0 rgba(7, 38, 55, .25); } .field__opt { font-style: italic; } .field__hint { line-height: 1.7; } /* 入力欄の下のエラーは、エラーの付箋と同じ色の帯にする（メッセージ表示の項を参照） */ .field__error { display: flex; gap: 6px; align-items: flex-start; justify-self: start; padding: 6px 12px; border-radius: 2px; background: var(--error-paper); color: var(--error-text); rotate: -.6deg; } .field__error::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--error-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; } .input, .select, .textarea { min-height: 52px; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; /* 16px 未満だと iPhone が入力時に画面を拡大してしまう */ font-size: 16px; box-shadow: 0 4px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .input::placeholder, .textarea::placeholder { color: #9a9a92; } .input:hover, .select:hover, .textarea:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); } /* 星の黄のぼんやりした光で囲む。下にずらした影より外まで広がるよう、ぼかしを大きく取る （ぼかしが小さいと影に下側が隠れ、上にしか光が見えなくなる） */ .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 5px 0 var(--brand), 0 2px 18px 6px rgba(253, 185, 69, .85); } .field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); background: #fff6f5; box-shadow: 0 4px 0 var(--danger); } .input[disabled], .select[disabled], .textarea[disabled] { background: var(--cream); color: var(--muted); box-shadow: none; transform: none; } .textarea { min-height: 168px; line-height: 1.8; } /* 標準の矢印は OS ごとに見た目が違うので消し、墨の矢印を描く */ .select { appearance: none; padding-right: 48px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%232b2e2e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; } .items-toolbar .select { min-height: 44px; padding-top: 6px; padding-bottom: 6px; } /* チェックボックス・ラジオ: 墨のフチの四角／丸。選ぶと墨で塗り、チェックか星の黄の点を出す */ .choice input, .check input { appearance: none; flex: none; width: 24px; height: 24px; margin: 2px 0 0; border: 2px solid var(--ink); border-radius: 7px; background: #fff; box-shadow: 0 2px 0 var(--ink); cursor: pointer; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); } .choice input[type="radio"], .check input[type="radio"] { border-radius: 50%; } .choice input:checked, .check input:checked { background-color: var(--ink); transform: scale(1.08); } .choice input[type="checkbox"]:checked, .check input[type="checkbox"]:checked { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fdb945' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; } .choice input[type="radio"]:checked, .check input[type="radio"]:checked { background: radial-gradient(circle, var(--star) 0 5px, var(--ink) 5.5px); } .choice input:focus-visible, .check input:focus-visible { outline: 3px solid var(--star); outline-offset: 2px; } /* 選択肢のカード: 選んだものは墨のフチ＋星の黄のずらした影で浮かせる */ .choice { gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 2px solid var(--line); border-radius: 16px; background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .choice:hover { border-color: var(--ink); transform: translateY(-2px); } .choice:has(input:checked) { border-color: var(--ink); outline: 0; background: #fff; box-shadow: 5px 5px 0 var(--star); transform: translateY(-2px); } .choice:has(input:disabled) { transform: none; } .choice__title { font-family: var(--font-heading); font-weight: 900; } .choice--inline { gap: var(--space-2); padding: var(--space-3); } .choice--inline .choice__title { white-space: nowrap; } .empty { border-color: #b8b0a3; background: #fff; } /* ---- メッセージ表示: 付箋とテープ（2026-10-27 決定。比較: design-proposals/messages.html）---- 状態の色・アイコン・文言・ふるまいは全テイスト共通。ここで変えるのは形と動きだけ。 見出しの文字は、うすい付箋の上で 4.5 以上になるよう状態の色を少し濃くしたものを使う （完了の --ok #187d4a は ok-soft の上で 4.47 しかないため #157043 にした）。 エラーだけ付箋の色も濃くする。付箋が傾いているぶん、うすい色だとエラーが軽く見えるため */ .notice, .toast { --c: var(--info); --soft: var(--info-soft); --icon: var(--icon-info); position: relative; padding: 22px 20px 16px 54px; border: 0; border-radius: 2px; background: var(--soft); rotate: -.6deg; box-shadow: 0 8px 14px rgba(22, 76, 79, .18); animation: planet-tape-in .4s cubic-bezier(.3, 1.3, .5, 1) both; } .notice::before, .toast::before { content: ""; position: absolute; left: 50%; top: -10px; width: 92px; height: 22px; translate: -50% 0; rotate: -3deg; background: rgba(253, 185, 69, .75); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); animation: planet-tape-strip .2s .32s ease-out both; } .notice::after, .toast::after { content: ""; position: absolute; left: 20px; top: 24px; width: 22px; height: 22px; background: var(--c); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } .notice__title, .toast__title { font-family: var(--font-heading); font-weight: 900; color: var(--c); } .notice a { color: var(--c); } .notice--warn { --c: var(--warn); --soft: var(--warn-soft); --icon: var(--icon-warn); } .notice--error { --c: var(--error-text); --soft: var(--error-paper); --icon: var(--icon-error); } .notice--ok, .toast { --c: #157043; --soft: var(--ok-soft); --icon: var(--icon-ok); } .notice--brand { --c: var(--brand); --soft: var(--brand-soft); } .toast { box-shadow: 0 10px 22px rgba(7, 38, 55, .28); } .toast.is-leaving { opacity: 1; transition: none; animation: planet-tape-out .16s ease-in forwards; } .icon-link__count.is-bump { animation: planet-bump .4s cubic-bezier(.3, 1.6, .5, 1); } @keyframes planet-tape-in { 0% { opacity: 0; translate: 0 -28px; rotate: -6deg; } 100% { opacity: 1; translate: 0 0; rotate: -.6deg; } } @keyframes planet-tape-strip { from { opacity: 0; scale: .2 1; } } @keyframes planet-tape-out { to { opacity: 0; translate: 0 -6px; } } @keyframes planet-bump { 40% { scale: 1.6; } } /* ---- 購入手続き: 手順はステッカー、金額の欄はレシート ---- */ .steps li::before { width: 32px; height: 32px; border: 3px solid #fff; box-shadow: 0 2px 0 rgba(7, 38, 55, .25); font-style: italic; font-weight: 900; background: var(--line); color: var(--ink); } .steps li::after { background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px) !important; top: 15px; } .steps li.is-done::before { background: var(--star); color: var(--ink); border-color: #fff; } .steps li.is-done::after, .steps li[aria-current="step"]::after { background: repeating-linear-gradient(90deg, var(--brand) 0 6px, transparent 6px 10px) !important; } .steps li[aria-current="step"]::before { background: var(--orange); color: var(--ink); border-color: #fff; animation: planet-poyo 3s ease-in-out infinite; } /* summary の親（.checkout-layout）に filter を付けると sticky が効かなくなるため、レシートの影はあきらめて線で区切る */ .summary.panel { background: #fff; border-radius: 0; box-shadow: none; outline: 2px solid var(--ink); padding-bottom: 76px; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; } .summary.panel::before { content: "NO.000666 ------ ACMATOYS"; display: block; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px dashed #989898; font: 800 11px/1.4 var(--font-display); letter-spacing: .08em; color: var(--muted); } .summary.panel::after { content: ""; position: absolute; left: var(--space-5); right: var(--space-5); bottom: 28px; height: 28px; background: url("../../img/icons/barcode.svg") 0 50% / auto 100% repeat-x; } /* shop.css の sticky 用の top: 104px が relative でも効いて下にずれるため、top も戻す */ @media (max-width: 880px) { .summary.panel { position: relative; top: auto; } } .summary__total { border-top: 2px dashed var(--ink); } .summary__total .price { font-style: italic; font-weight: 900; color: var(--brand); } .cart-list { border-top: 2px dashed var(--ink); } .cart-item { border-bottom: 2px dashed #b8b0a3; } .cart-item__image, .summary__items img, .order-row__thumbs img { border: 3px solid #fff; border-radius: 10px; box-shadow: 0 2px 0 rgba(7, 38, 55, .2); } .payment-element { border-radius: 16px; background: #fff; } /* 決済代行の入力欄の場所の見本も、ほかの入力欄と同じ見た目にそろえる */ .payment-element__fake { min-height: 52px; padding: 13px 16px; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); } /* 完了画面: 主役がぷるぷる。注文番号はちぎったチケット */ .complete__mark { border-radius: 26px; box-shadow: 0 0 0 8px #fff, 0 4px 0 8px rgba(7, 38, 55, .2); animation: planet-poyo 3s ease-in-out infinite; } .complete__no { border: 0; border-radius: 0; background: var(--star); color: var(--ink); font-style: italic; font-weight: 900; padding: var(--space-3) var(--space-6); -webkit-mask: radial-gradient(circle at 0 50%, #0000 10px, #000 11px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 10px, #000 11px) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, #0000 10px, #000 11px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 10px, #000 11px) right / 51% 100% no-repeat; } /* ---- マイページ・一覧 ---- */ .mypage-nav a { border-radius: 999px; } body[data-sub="mypage-orders"] [data-nav="mypage-orders"], body[data-sub="mypage-lotteries"] [data-nav="mypage-lotteries"], body[data-sub="mypage-addresses"] [data-nav="mypage-addresses"], body[data-sub="mypage-cards"] [data-nav="mypage-cards"], body[data-sub="mypage-account"] [data-nav="mypage-account"] { background: var(--ink); color: #fff; box-shadow: 3px 3px 0 var(--star); } .order-row, .address-card { border: 0; border-radius: 10px; box-shadow: var(--shadow-soft); } .order-row:hover { box-shadow: 0 0 0 2px var(--brand), var(--shadow-soft); } /* 左の欄（商品一覧のカテゴリ・ABOUT のタブ）は、どの項目も共通ボタンと同じ押せるボタンにし、選んでいるものだけ押し込んで朱にする （2026-11-01 仮決定。形は design-proposals/sidebar-current.html の案 9、色は button-color.html の案 2。朱は見出し・リンクと同じお店の色で、白い文字で 6.1）。黒い帯だけでは、ヘッダー・ボタン・ラベルのどれとも形がそろわなかったため。 フチは border でなく box-shadow で描く（押し込むときに影だけ消せば、大きさが変わらず周りの項目がずれない） */ .filters ul, .folder-tabs__list { gap: 12px var(--space-2); padding: 0 2px; } /* ページ送りも左の欄と同じ押せるボタンにし、いまのページだけ押し込んで朱にする（2026-11-01 仮決定。比較: design-proposals/pagination.html の案 1）。 同じ商品一覧の中で「選んでいるもの」の見た目が 2 通りにならないようにするため */ .pagination { gap: 12px 10px; } .pagination :is(a, span) { border-radius: 50%; } /* 乗せたとき・押しているとき・キーボードで選んだときは、共通ボタン（.btn）と同じ決まり */ :is(.filters, .folder-tabs__list) a, .pagination :is(a, span) { --press: 4px; --edge: var(--ink); border: 0; background: #fff; color: var(--ink); font-weight: 900; box-shadow: 0 0 0 2px var(--edge), 0 var(--press) 0 2px var(--edge), var(--ring, 0 0 #0000); transition: translate .1s, box-shadow .1s; } :is(.filters, .folder-tabs__list) a { padding: 8px 18px; border-radius: 999px; font-family: var(--font-display); letter-spacing: .06em; font-size: var(--fs-body); } :is(.filters, .folder-tabs__list) a:hover, .pagination a:hover { background: var(--cream); color: var(--ink); translate: 0 -1px; --press: 5px; } :is(.filters, .folder-tabs__list) a:active, .pagination a:active { translate: 0 4px; --press: 0px; } :is(.filters, .folder-tabs__list) a:focus-visible, .pagination a:focus-visible { outline: 3px solid transparent; --edge: var(--brand); --ring: var(--focus-glow); } :is(.filters, .folder-tabs__list) a:focus-visible:not(:active, [aria-current="page"], [aria-selected="true"]), .pagination a:focus-visible:not(:active) { translate: 0 -1px; --press: 5px; } /* 選んでいるものは、キーボードで選んでもフチを墨のままにする（朱にすると朱の地に溶けて形が見えなくなる） */ .filters a[aria-current="page"], .folder-tabs__list a[aria-selected="true"], .pagination [aria-current="page"] { background: var(--brand); color: #fff; translate: 0 4px; --press: 0px; --edge: var(--ink); } /* 記事一覧のカードは、白い四角の上に緑の養生テープを横いっぱいに貼り、テープに日付とラベルを載せる。 NEW もオレンジの養生テープの切れ端にする （2026-10-30 決定。比較: design-proposals/news-memphis.html の案 10 → news-workbench.html の案 6 → news-yojo.html の案 21）。 商品カードのポラロイドと見分けるため、写真は出さない。縦 1 列で、ページの幅いっぱいに並べる（見出しと左の端をそろえる）。 テープは四角のふちから左右にはみ出させ、両端はちぎった形（clip-path）。clip-path を使うので、テープに影は付けられない。 NEW のテープは、上の日付とラベルを隠さないよう右下に貼る */ .blog-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); } .blog-card { --tape-fiber: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 5px); } .blog-card a { position: relative; } .blog-card__box { height: 100%; border: 2px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--ink); } .blog-card__meta { flex-wrap: wrap; justify-content: flex-start; gap: 6px 10px; margin: -6px -10px 0; padding: 6px 24px; rotate: -.8deg; background: var(--tape-fiber), rgba(127, 190, 86, .85); clip-path: polygon(0 0, 6px 25%, 1px 50%, 7px 75%, 2px 100%, calc(100% - 2px) 100%, calc(100% - 7px) 75%, calc(100% - 1px) 50%, calc(100% - 6px) 25%, 100% 0); } .blog-card__date { font: 900 12px var(--font-display); color: var(--ink); } .blog-card__label { padding: 2px 10px 2px 8px; border: 0; border-radius: 0; background: var(--pin-color); color: var(--pin-ink); font-family: var(--font-heading); clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); } .blog-card__title { margin: 10px 14px 0; font-size: 15px; } .blog-card__excerpt { margin: 4px 14px 12px; } .blog-card__new { right: -10px; top: auto; bottom: 14px; z-index: 3; padding: 3px 16px; border-radius: 0; background: var(--tape-fiber), rgba(255, 111, 78, .9); color: var(--ink); font: italic 900 13px/1.5 var(--font-display); rotate: 12deg; clip-path: polygon(0 0, 3px 10%, 1px 20%, 4px 30%, 0 40%, 3px 50%, 1px 60%, 4px 70%, 0 80%, 3px 90%, 1px 100%, calc(100% - 2px) 100%, 100% 90%, calc(100% - 3px) 80%, calc(100% - 1px) 70%, calc(100% - 4px) 60%, 100% 50%, calc(100% - 3px) 40%, calc(100% - 1px) 30%, calc(100% - 4px) 20%, 100% 10%, calc(100% - 2px) 0); } .article__meta { font-style: italic; } /* 記事のアイキャッチ画像も、商品の写真と同じポラロイドにする */ .prose img.article__eyecatch { padding: 14px 14px 26px; border: 0; border-radius: 0; background: #fff; box-shadow: 0 16px 22px -12px rgba(7, 38, 55, .5); } .feature-grid li { border: 0; border-radius: 10px; background: #fff; box-shadow: var(--shadow-soft); } .notfound__code { font-style: italic; color: var(--brand); text-shadow: 6px 6px 0 var(--ink); } /* ---- フッター: 墨色。上の帯はバーコード ---- */ .site-footer { position: relative; z-index: 1; background: var(--ink); color: var(--paper); margin-top: var(--space-7); } .site-footer .checker { height: 30px; background: url("../../img/icons/barcode-light.svg") 0 50% / auto 70% repeat-x, var(--ink); } /* フッターのロゴはスタンプ風。ヘッダーと同じロゴの形にオレンジのインクを流し込み、ノイズでかすれさせる。 img は消さずに透明にして重ねる（リンクの名前＝ロゴの代替テキストを残すため） */ .site-footer__logo { position: relative; overflow: visible; width: 150px; height: 37px; padding: 0; margin: var(--space-5) 0 var(--space-4) var(--space-5); border-radius: 0; background: var(--orange); -webkit-mask: var(--acma-logo) center / 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.3 1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-mask-composite: source-in; mask: var(--acma-logo) center / 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.3 1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mask-composite: intersect; } .site-footer__logo img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; } /* ロゴ自体に mask を掛けているので、枠はロゴの外側（親の .site-footer__brand）に描く */ .site-footer__brand { position: relative; display: grid; justify-items: start; } .site-footer__brand::before { content: ""; position: absolute; left: 0; top: 0; width: 210px; height: 120px; translate: -6px -18px; border: 3px solid var(--orange); border-radius: 50%; outline: 1.5px dashed var(--orange); outline-offset: -9px; opacity: .85; rotate: -8deg; pointer-events: none; } .site-footer__logo { rotate: -8deg; transform-origin: 30% 50%; } /* 2 列: 左はスタンプだけを上下の真ん中に、右は案内の下に SNS を重ねる（2026-10-30 ユーザー決定。キャッチコピーはフッターから外した） */ .site-footer__inner { grid-template-columns: 1fr 1fr; row-gap: var(--space-5); } .site-footer__brand { grid-row: 1 / span 2; align-self: center; } .site-footer__social { padding-top: var(--space-5); border-top: 1px dashed rgba(243, 239, 235, .3); } .site-footer__logo { margin-bottom: var(--space-5); } .site-footer a { color: var(--paper); } .site-footer__copy { color: #b8b0a3; } .site-footer__follow { font-style: italic; font-weight: 900; color: var(--star); } /* SNS は紙色の缶バッジ。少しずつ傾け、乗せるとまっすぐになる（design-proposals/footer-sns.html の案 2） */ .site-footer .site-footer__sns { display: grid; grid-template-columns: repeat(4, 52px); gap: 12px; } .site-footer .site-footer__sns a { width: 52px; height: 52px; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--ink); transition: rotate .2s; } .site-footer__sns li:nth-child(1) a { rotate: -6deg; } .site-footer__sns li:nth-child(2) a { rotate: 5deg; } .site-footer__sns li:nth-child(3) a { rotate: 4deg; } .site-footer__sns li:nth-child(4) a { rotate: -4deg; } .site-footer .site-footer__sns a:hover, .site-footer .site-footer__sns a:focus-visible { rotate: 0deg; color: var(--ink); text-decoration: none; } /* 回るシールはご利用案内のリストの上下の真ん中・右端に置く（スタンプの横に置くと重く見えたため、ロゴから離した。2026-10-30 ユーザー指定） */ .site-footer__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .site-footer__nav::after { content: ""; flex: none; width: 84px; height: 84px; background: url("../../img/stamp-seal.svg") center / contain no-repeat; animation: planet-spin 14s linear infinite; pointer-events: none; } @keyframes planet-spin { to { rotate: 360deg; } } @media (max-width: 720px) { .site-footer__inner { grid-template-columns: 1fr; } .site-footer__brand { grid-row: auto; } /* 375px で缶バッジ 4 つを 1 行に収めるため、少し小さくする */ .site-footer .site-footer__sns { grid-template-columns: repeat(4, 46px); gap: 8px; } .site-footer .site-footer__sns a { width: 46px; height: 46px; } .site-footer__nav::after { width: 64px; height: 64px; } } /* ---- 全体アニメーション: 作業台の上の紙ものを、手で扱うように動かす（2026-11-01 ユーザー決定。issue #11） ずっと動く飾りは足さず、触ったら返ってくる動きと、紙が置かれる・貼られる動きだけにする。 スクロールの動きは animation-timeline: view() に対応したブラウザだけ。対応していなければ、はじめから置いてある。 JavaScript（assets/js/motion.js・toast.js）が付けるクラスは上乗せで、なくてもいまと同じに見える ---- */ /* B1 紙の差し替え: ページを移ると、ヘッダーと背景はそのままで、紙（main）だけが上から置かれる */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } .site-header { view-transition-name: site-header; } /* ヘッダーは帯の下に sticky で付くので、スクロールしたページ（y=0）と新しいページ（y=26px）で位置が違い、既定のままだと 0.25 秒かけてすべって見えた。動かさずに新しい位置へ置く */ ::view-transition-group(site-header) { animation: none; } main { view-transition-name: page-paper; } /* 前のページは root の写しとして消し、新しい紙だけを置く（前の紙の名前は、ページを離れるときに JavaScript が外す。 名前を付けたままだと、スクロールしていたときに前の紙が元の位置から動き、ページの上のほうが一瞬見えるため）。 新しい root を animation: none にすると、不透明な新しい背景が最初から前のページに重なり、前のページが一瞬で消えて見えたので、0.2 秒で入れ替える */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; } ::view-transition-new(page-paper) { animation: planet-paper-in var(--m-slow) var(--m-pop) both; } @keyframes planet-paper-in { from { opacity: 0; translate: 0 -64px; rotate: -2deg; } } @keyframes planet-fade-out { to { opacity: 0; } } /* B1 のトップバナー: 針金で上から吊るしてあるので、紙と一緒に落とさず、ヘッダーの後ろから針金ごと吊り下ろして少し揺らす（2026-11-02 ユーザー決定。issue #15）。 下ろす動きを View Transition の疑似要素に付けると、動き終わるまで（約 1.1 秒）画面が押せなかったので、バナーそのものに付ける。 ページの切り替わり（0.2 秒）と重ねると、バナーが斜めにずれた位置に一瞬出たので、切り替わりが終わってから動かす */ .home-banner { view-transition-name: home-banner; transform-origin: 50% 0; animation: planet-banner-lower 480ms 200ms var(--m-pop) both, planet-banner-settle 700ms 580ms ease-out both; } /* 針金は上へ長く伸ばしておき、ふだんはヘッダーの後ろに隠す。44px のままだと、下りきって少し行き過ぎたときに針金の上の端がヘッダーから離れて途切れた */ .home-banner::before { top: -100%; height: calc(100% + 44px); } /* 切り替わりのあいだも、上から下りてくるバナーがヘッダーの後ろを通るようにする */ ::view-transition-group(site-header) { z-index: 2; } ::view-transition-group(home-banner), ::view-transition-old(home-banner), ::view-transition-new(home-banner) { animation-duration: 200ms; } @keyframes planet-banner-lower { from { translate: 0 -100%; } } @keyframes planet-banner-settle { 30% { rotate: 2deg; } 65% { rotate: -1deg; } } /* B2 写真がつながる: 押した商品カードの写真が、商品詳細の大きな写真へ移る（名前は JavaScript が 1 枚にだけ付ける） */ /* 前の紙の名前を外すので、新しい紙（page-paper）は重なり順の最後に回る。そのままだと不透明な紙が写真の上でフェードインし、写真が約 0.4 秒白く抜けたため、写真を上に出す */ ::view-transition-group(product-photo) { z-index: 1; animation-duration: 380ms; animation-timing-function: var(--m-out); } /* 行き先に同じ写真がないときは、浮いて残らないように前のページと一緒に消す */ ::view-transition-old(product-photo):only-child { animation: planet-fade-out 200ms var(--m-in) both; } /* 写真を紙より上に出したので、写真に重なる札（紙の側）が移るあいだ隠れ、貼られる途中から急に現れた。札にも名前を付けて上に出すと、紙が上から置かれるあいだ札だけが止まって見えるため、写真が移り終わってから貼る（is-arriving は motion.js が付ける） */ .gallery__main.is-arriving .gallery__badges .badge, .gallery__main.is-soldout.is-arriving .gallery__badges .badge { animation-delay: 400ms; } /* C1 紙が置かれる・C2 カードが配られる・C3 テープが貼られる・C4 見出しの影が付く（スクロール） */ @supports (animation-timeline: view()) { .page > .container, main > .section > .container { animation: planet-place linear both; animation-timeline: view(); animation-range: entry 0px entry 200px; } .product-card, .blog-card { animation: planet-deal linear both; animation-timeline: view(); animation-range: entry 0px entry 200px; } .product-card:nth-child(3n+2), .blog-card:nth-child(3n+2) { animation-range: entry 40px entry 240px; } .product-card:nth-child(3n), .blog-card:nth-child(3n) { animation-range: entry 80px entry 280px; } .product-card:not(.is-soldout) .product-card__badges .badge { animation: planet-tape linear both; animation-timeline: view(); animation-range: entry 60px entry 180px; } .product-card.is-soldout .product-card__badges .badge { animation: planet-stamp linear both; animation-timeline: view(); animation-range: entry 120px entry 220px; } .section-title__en { animation: planet-title linear both; animation-timeline: view(); animation-range: entry 40px entry 160px; } } /* 紙が画面幅に近いと、傾けた角が横にはみ出してページが横にスクロールできてしまう（375px で 10px、1153px でも長いページで 13px はみ出した）。 紙のまわりに余白がある幅でだけ傾ける */ .page > .container, main > .section > .container { --place-tilt: 0deg; } @media (min-width: 1200px) { .page > .container, main > .section > .container { --place-tilt: -1.2deg; } } @keyframes planet-place { from { opacity: 0; translate: 0 40px; rotate: var(--place-tilt); } } @keyframes planet-deal { from { opacity: 0; translate: 0 40px; rotate: -4deg; scale: .94; } } /* 商品詳細の札は 1 画面目にあり、スクロールでは動かないので、読み込んだときに 1 回だけ貼る */ .gallery__badges .badge { animation: planet-tape 280ms 300ms var(--m-out) both; } .gallery__main.is-soldout .gallery__badges .badge { animation: planet-stamp var(--m-slow) 300ms var(--m-out) both; } /* SOLD OUT は 2.4 倍から押すので、押しているあいだだけスマホの画面の右へはみ出し、横にスクロールできてしまう（375px で 439px）。 overflow: hidden だとスクロールの箱になって sticky が効かなくなるため、clip で画面の外だけ切る */ main { overflow-x: clip; } /* 札は傾けて貼ってあるので、左端を軸にしたままだと貼り終えた位置が中心軸のときより数 px ずれる。軸は伸びるあいだだけ左端に置く */ @keyframes planet-tape { from { scale: 0 1; opacity: 0; transform-origin: 0 50%; } } @keyframes planet-stamp { 0% { scale: 2.4; opacity: 0; } 60% { scale: .92; opacity: 1; } 100% { scale: 1; } } @keyframes planet-title { from { text-shadow: 0 0 0 var(--ink); translate: 3px 3px; } } /* D1 ポラロイドを持ち上げる・D2 2 枚目の写真に替わる・D3 クリップがぴくっと揺れる（乗せる・押す）。 動きを減らす設定では、乗せたときの姿の変化も出さない（動きだけ止めると、一瞬で傾いて見えるため） */ .product-card__link { transition: translate var(--m-base) var(--m-pop), rotate var(--m-base) var(--m-pop), box-shadow var(--m-base) var(--m-out); } .blog-card a { transition: translate var(--m-base) var(--m-pop), rotate var(--m-base) var(--m-pop); } /* 隣のカードと逆に傾ける。nth-child で :hover を書き分けると、押したときの指定より強くなり、偶数のカードが押しても傾いたままになるため変数で渡す */ .product-card:nth-child(even) { --lift-tilt: 1.2deg; } /* 2 枚目の写真は、乗せられない端末では読み込まない（loading="lazy" の画像は display: none だと読まれない） */ .product-card__image > .product-card__image-alt { display: none; position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--m-base) var(--m-out), filter 900ms var(--m-out); } /* 売り切れの写真を薄くする指定（components.css）は 2 枚目にも当たり、乗せる前から 2 枚目が 1 枚目に重なって見えるため、そろえて強くする */ .product-card.is-soldout .product-card__image > .product-card__image-alt { opacity: 0; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .product-card__link:hover { translate: 0 -6px; rotate: var(--lift-tilt, -1.2deg); box-shadow: 0 24px 26px -12px rgba(7, 38, 55, .5); } .blog-card a:hover { translate: 0 -4px; rotate: -.5deg; } .product-card__image > .product-card__image-alt { display: block; } .product-card__link:hover .product-card__image-alt { opacity: 1; } .product-card.is-soldout .product-card__link:hover .product-card__image-alt { opacity: .45; } .page > .container:hover::before, main > .section > .container:hover::before { animation: planet-clip 520ms var(--m-out); } } /* 乗せたときの指定と強さが同じなので、押したときが勝つよう後ろに置く */ @media (prefers-reduced-motion: no-preference) { .product-card__link:active, .blog-card a:active { translate: 0 2px; rotate: 0deg; transition-duration: var(--m-fast); } } @keyframes planet-clip { 30% { rotate: -6deg; } 60% { rotate: 13deg; } 100% { rotate: 8deg; } } /* D4 写真が現像される: 読み込み中の写真（JavaScript が is-developing を付ける）はセピアでぼやけ、読み込めたら色が出る。 売り切れの写真は灰色にする指定のほうが強いので、そろえて強くする */ .product-card__image > img, .gallery__main img, .pickup__image { transition: filter 900ms var(--m-out); } .product-card .product-card__image > img.is-developing, .gallery__main img.is-developing, img.pickup__image.is-developing { filter: sepia(1) brightness(1.5) contrast(.5) blur(3px); } /* D5 カートへ飛ぶステッカー: 商品の写真を丸いステッカーにしてカートへ飛ばす（飛ばすのは toast.js）。押したボタンはぷにっと縮む */ .cart-flyer { position: fixed; z-index: 1000; width: 72px; height: 72px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); object-fit: cover; pointer-events: none; } .btn.is-pressed { animation: planet-press 300ms var(--m-pop); } @keyframes planet-press { 40% { scale: .94 1.06; } } /* D6 メニューが降りてくる: ≡ メニューの紙が少し傾いて降り、項目が順に出る */ /* 紙は画面幅いっぱいなので、まん中を軸に左下がりに傾けると右下の角が画面の外へ出て、開くあいだ横にはみ出す（375px で 12px）。 右下の角を軸にすると、見た目は同じ左下がりのまま右へは出ない。傾きだけ弾ませないのも、弾んで逆に傾いた分だけ右へ出るため */ .site-menu[open] .site-menu__panel { transform-origin: 100% 100%; animation: planet-menu var(--m-slow) var(--m-pop) both, planet-menu-tilt var(--m-slow) var(--m-out) both; } .site-menu[open] .site-menu__panel li { animation: planet-menu-item 240ms var(--m-out) both; } .site-menu[open] .site-menu__panel li:nth-child(2) { animation-delay: 30ms; } .site-menu[open] .site-menu__panel li:nth-child(3) { animation-delay: 60ms; } .site-menu[open] .site-menu__panel li:nth-child(4) { animation-delay: 90ms; } .site-menu[open] .site-menu__panel li:nth-child(n+5) { animation-delay: 120ms; } /* ≡ と × は別の絵を表示・非表示で切り替えているだけなので、transition では回らない。出てくる × に animation を付ける */ .site-menu[open] .site-menu__close { animation: planet-x-in var(--m-base) var(--m-pop) both; } @keyframes planet-menu { from { opacity: 0; translate: 0 -24px; } } @keyframes planet-menu-tilt { from { rotate: -1.5deg; } } @keyframes planet-menu-item { from { opacity: 0; translate: -12px 0; } } @keyframes planet-x-in { from { opacity: 0; rotate: -90deg; scale: .5; } } /* D7 エラーの付箋がぶるっと震える: 上から貼られ、一度だけ小さく左右に震える */ .field__error { animation: planet-shake 400ms 200ms var(--m-out) both; } @keyframes planet-shake { 0% { opacity: 0; translate: 0 -10px; } 30% { opacity: 1; translate: 0 0; } 45% { translate: -5px 0; } 60% { translate: 4px 0; } 75% { translate: -2px 0; } 100% { translate: 0 0; } } /* D8 点線が引かれる: ヘッダーのメニューに乗せると、今いるページの印と同じ朱の点線が左から引かれる。 点線の模様（5px の線と 3px のすき間）は大きさを変えずに、描く範囲だけを左から広げる。 今いるページの印（border-bottom）と同じ高さに引くため、背景を枠の下端から描く */ .site-nav__list a { background: repeating-linear-gradient(90deg, var(--brand) 0 5px, transparent 5px 8px) 0 100% / 0% 3px no-repeat border-box; transition: background-size var(--m-base) var(--m-out), color var(--m-fast); } @media (prefers-reduced-motion: no-preference) { .site-nav__list a:hover, .site-nav__list a:focus-visible { background-size: 100% 3px; } } /* 今いるページは、もとの点線に案の点線が重なって下線がまだらになるので、引かない */ body[data-page="home"] .site-nav__list [data-nav="home"], body[data-page="about"] .site-nav__list [data-nav="about"], body[data-page="story"] .site-nav__list [data-nav="story"], body[data-page="items"] .site-nav__list [data-nav="items"], body[data-page="blog"] .site-nav__list [data-nav="blog"], body[data-page="guide"] .site-nav__list [data-nav="guide"], body[data-page="contact"] .site-nav__list [data-nav="contact"] { background: none; } /* ---- 動きを減らす設定の人には止める（WCAG 2.3.3） ---- */ /* ページ移動（B1・B2）は @view-transition を動きを減らさない人にだけ効かせているが、ほかの方法で始まった View Transition も止める */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }