/* ============================== assets/css/front.css フロント（公開ページ）だけで使う部品。tokens.css（共通）のあとに読む 管理画面の部品は admin.css に置く。両方で使うものは tokens.css へ 部品を足すときは、先に ds/PROJECT.md に決定事項を書いてから、ここに移す ============================== */ /* 強調ボタン（金属の削り出し）は、管理画面でも使うことになったので common.css へ移した（2026-10-21） */ /* ---- 書体（2026-10-25 決定。ds/PROJECT.md「共通：書体」） ---- 本文は IBM Plex Sans JP。英数字を見せたいところは --font-dot（英数字だけドット、日本語は Plex） 英数字の大きさは控えめ（日本語とほぼ同じ） */ body { font-family: var(--font-body); } time, .dot, .page-title, .home-title, .speech-text, .menu-btn, .nav-num, .nav-label { font-family: var(--font-dot); } /* ---- リンクのホバー（2026-10-25 ユーザー指定） ---- マウスを乗せたら、下線を出すのではなく薄くする。変わるときは必ずなめらかに（.3s） 金属のボタンと TOOLS の行は、それぞれ自分の動きを持つので除く */ a { transition: opacity .3s ease, color .3s ease; } a:not(.button-metal):not(.tool-row):not(.more-link):hover { opacity: .55; } .like-thumb, .like-dialog-close { transition: opacity .3s ease; } .like-thumb:hover, .like-dialog-close:hover { opacity: .55; } /* ---- トップの MV（2026-10-25 決定。ds/PROJECT.md「フロント：MV」） ---- 画面いっぱい（100vw × 100vh）。イラスト（assets/images/mv.png。背景が透明な縦長の絵「欲」）を、 地の色の上に、切り抜かず画面の中に収めて真ん中に置く（2026-10-25。最初の「黒っぽい全面イラスト」から変更） 上は追従ヘッダーの分（110px）、下は --s6 をあけ、その間いっぱいに収める 中央寄せの枠（.site-main）からはみ出させて、横幅を画面の端までのばす */ /* 100vw はスクロールバーの幅も含むので、帯がその分だけ右へはみ出す。 html にも clip をかけて、はみ出しで横にずれる（#tools へ飛んだときなど）ことがないようにする */ html, body { overflow-x: clip; } .home-mv { display: flex; align-items: flex-end; justify-content: flex-end; width: 100vw; height: 100vh; margin-left: calc(50% - 50vw); /* 上は追従ヘッダーの分、下は --s6。左右は、はみ出させた分だけ内側をあけて、中身の端をほかの区画とそろえる */ padding: var(--s7) calc(50vw - 50%) var(--s6); /* イラストは余白の内側（content-box）に、縦横比を保ったまま収める */ /* 地は元の黒っぽい色（2026-10-25 試し。明るい地の色だったときは var(--color-bg)・文字はネイビー） */ position: relative; overflow: hidden; background: #15171D; color: #fff; } /* イラスト：画面の高さよりかなり大きく（135vh。アップに）、横は真ん中。はみ出た下は切れる スクロールすると、ページよりゆっくり下へずれる（--parallax は site.js が入れる） いつも、ふわふわと上下にただよう（6 秒でひと往復、少しだけ傾く） パララックスは translate、ふわふわは transform と、別々の指定で動かすので、ぶつからない */ .home-mv-art { position: absolute; top: 40px; left: 50%; z-index: 0; width: auto; height: 135vh; max-width: none; translate: -50% var(--parallax, 0px); animation: mv-float 6s ease-in-out infinite; will-change: transform, translate; pointer-events: none; user-select: none; } @keyframes mv-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(.8deg); } } @media (prefers-reduced-motion: reduce) { .home-mv-art { animation: none; } } /* 継続日数はイラストの上に重なるので、読めるように文字にうすい影 */ .home-mv > .home-status { position: relative; z-index: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); } /* 継続日数：右下に、ステータス画面のように縦に並べる。左に項目、右に日数。行の間に点線 面（背景）も引き出し線もなし。文字だけ（2026-10-25 ユーザー指定）。項目と数字の間は詰めてコンパクトに 列は subgrid で全行そろえる（項目の幅・数字の幅が行ごとにずれないように） MV の地が明るくなったので、文字はネイビー（2026-10-25） */ .home-status { display: grid; grid-template-columns: auto auto; column-gap: var(--s3); margin: 0; font-size: var(--t2); } .home-status-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding: var(--s1) 0; } .home-status-row + .home-status-row { border-top: 1px dashed rgba(255, 255, 255, .22); } .home-status dt { color: rgba(255, 255, 255, .75); } .home-status dd { margin: 0; text-align: right; } .home-status b { margin-right: 2px; font-weight: 400; font-size: var(--t4); line-height: 1; } /* ---- トップの区画（2026-10-25 決定。ds/PROJECT.md「フロント：トップの区画」） ---- 左に 240px の列（タイトル → 説明文 → もっと見る）、右に中身。スマホでは縦に積む */ /* 右の列は最大 680px。列の間は最低 10%。幅が余ったら、左の列は左端・右の列は右端に寄せる（2026-10-25 ユーザー指定） */ .home-section { display: grid; grid-template-columns: 240px minmax(0, 680px); column-gap: 10%; justify-content: space-between; align-items: start; margin-top: var(--s7); /* 区画と区画のあいだは 110px（2026-10-25 ユーザー指定。40px では狭い） */ scroll-margin-top: 96px; /* メニューから #tools などへ飛んだとき、見出しが追従ヘッダーの下に隠れないように */ } .home-title { margin: 0 0 var(--s2); font-size: var(--t5); font-weight: 400; line-height: 1.3; } .home-desc { margin: 0 0 var(--s3); font-size: var(--t2); } .home-more { margin: 0; font-size: var(--t2); } @media (max-width: 768px) { .home-section { grid-template-columns: minmax(0, 1fr); } /* スマホでは「もっと見る」を中身の後ろへ（2026-10-25 ユーザー指定） 左の列の枠をほどいて（display: contents）、タイトル → 説明文 → 中身 → もっと見る の順に並べ直す */ .home-section:not(.is-band):not(.is-center) .home-head { display: contents; } .home-section:not(.is-band):not(.is-center) .home-title { order: 1; } .home-section:not(.is-band):not(.is-center) .home-desc { order: 2; } .home-section:not(.is-band):not(.is-center) .home-body { order: 3; margin-top: var(--s2); } .home-section:not(.is-band):not(.is-center) .home-more { order: 4; margin-top: var(--s4); } } /* ---- 縦並びのリスト（2026-10-25 ユーザー指定） ---- 好きなもの以外の下層ページ（OKIBA・感想ログ・やりたいこと・WORKS・プロフィール）は、TOOLS と同じ形にする： 中身は最大 640px で中央、1件ずつ縦に並べ、各行の上下に薄い線。 トップの感想ログも同じく縦並び（トップの OKIBA・WORKS は正方形のサムネを並べたまま） */ body:not(.is-home):not(.page-like) .site-main > * { max-width: 640px; margin-left: auto; margin-right: auto; } .site-main > .okiba-feed, .site-main > .review-list, .site-main > .want-list, .site-main > .work-list, .home-body.review-list, .home-body.want-list { display: block; } /* 行の上下の余白と線は、TOOLS の行（.tool-row）と同じ */ .site-main > .okiba-feed > *, .site-main > .review-list > *, .site-main > .want-list > *, .site-main > .work-list > *, .home-body.review-list > *, .home-body.want-list > * { display: block; padding: var(--s4) 0; border-bottom: 1px solid rgba(26, 34, 54, .12); } .site-main > .okiba-feed > :first-child, .site-main > .review-list > :first-child, .site-main > .want-list > :first-child, .site-main > .work-list > :first-child, .home-body.review-list > :first-child, .home-body.want-list > :first-child { border-top: 1px solid rgba(26, 34, 54, .12); } /* トップの感想ログの本文は、はっきり小さく（14px → 11px。2026-10-25 ユーザー指定） */ .home-section .review-comment { font-size: var(--t1); line-height: 1.75; } /* TOOLS だけ強調（ユーザー指定）：画面の端から端までの帯。地は少し白寄りに、等間隔のドット（方眼紙のよう） タイトルは全幅で上に置き、中身はその下。説明文・もっと見るはなし */ .home-section.is-band { display: block; width: 100vw; margin-left: calc(50% - 50vw); padding: var(--s7) calc(50vw - 50%); /* 上下は 110px（ユーザー指定）。左右は、はみ出させた分だけ内側をあけて、中身の端をほかの区画とそろえる */ background-color: #ECE9E2; background-image: radial-gradient(circle, rgba(26, 34, 54, .1) 1px, transparent 1.5px); /* うすく（2026-10-25 .22 → .1） */ background-size: 32px 32px; /* 間隔は 32px（16px から倍に） */ background-position: 16px 16px; } /* TOOLS の中身（ユーザー指定）：見出しは見せない。最大 640px で中央に、1つずつ縦に並べる 各行の上下に薄い線。左に名前・期間・説明、右に金属の角丸ボタン（矢印） */ .tool-list { max-width: 640px; margin: 0 auto; padding: 0; list-style: none; } .tool-item { border-bottom: 1px solid rgba(26, 34, 54, .12); } .tool-item:first-child { border-top: 1px solid rgba(26, 34, 54, .12); } /* 行のどこを押してもそのツールへ（2026-10-25 ユーザー指定）。行（.tool-row）がリンクで、矢印ボタンは飾り */ .tool-row { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) 0; color: inherit; text-decoration: none; } .tool-text { flex: 1; min-width: 0; } .tool-title { display: block; font-size: var(--t4); font-weight: 600; line-height: 1.4; } .tool-period { display: block; font-size: var(--t1); } .tool-desc { display: block; margin-top: var(--s1); } /* 行にマウスを乗せたら、文字だけ薄くする（下線は出さない。矢印ボタンは自分の動き） */ .tool-text { transition: opacity .3s ease; } a.tool-row:hover .tool-text { opacity: .55; } /* TOOLS の矢印ボタン（2026-10-25 ユーザー指定） 横長で、角は縦の高さいっぱいの丸（56×28px）。金属は白い光を抑えたマットなグレー。 矢印は刻印：面より少し暗いグレーで、上側に影・下側に光を入れて、彫りこんだように見せる .is-tile の指定より後ろに書いてないので、クラスを重ねて強くする */ .button-metal.is-tile.tool-go { flex-shrink: 0; width: 56px; height: 28px; border-radius: 999px; color: #8A8B8E; box-shadow: 3px 3px 6px rgba(100, 90, 75, .45), -2px -2px 5px rgba(255, 255, 255, .55), inset 1px 1px 0 rgba(255, 255, 255, .6), inset -1px -1px 0 rgba(26, 34, 54, .08), inset 0 0 0 rgba(120, 110, 95, 0), inset 0 0 0 rgba(255, 255, 255, 0); } .button-metal.is-tile.tool-go, .button-metal.is-tile.tool-go:active { /* いちばん明るいところを #E1E1E2 → #C8C9CB に下げ、明暗の差を小さくしてマットに */ background-image: linear-gradient(90deg, #9C9DA0 0%, #A9AAAC 23%, #C8C9CB 46%, #AEAFB1 66%, #B4B5B7 77%, #929396 100%); } .button-metal.is-tile.tool-go::before { background: linear-gradient(90deg, #929396 0%, #B4B5B7 30%, #AEAFB1 44%, #C2C3C5 70%, #A9AAAC 100%); } .button-metal.is-tile.tool-go:active { box-shadow: 0 0 0 rgba(100, 90, 75, 0), 0 0 0 rgba(255, 255, 255, 0), inset 1px 1px 0 rgba(255, 255, 255, 0), inset -1px -1px 0 rgba(26, 34, 54, 0), inset 2px 2px 4px rgba(120, 110, 95, .35), inset -2px -2px 4px rgba(255, 255, 255, .5); } /* 「もっと見る」：文字の横に、TOOLS と同じ金属の矢印ボタン。下線はなし（2026-10-25 ユーザー指定） */ .more-link { display: inline-flex; align-items: center; gap: var(--s3); color: inherit; text-decoration: none; } .more-link-text { transition: opacity .3s ease; } .more-link:hover .more-link-text { opacity: .55; } /* 行（「もっと見る」）にマウスを乗せた・押したときも、ボタンに乗せた・押したときと同じ動きにする */ a.tool-row:hover .button-metal.is-tile.tool-go, a.more-link:hover .button-metal.is-tile.tool-go { filter: brightness(1.05); background-position: 0% 50%; } a.more-link:active .button-metal.is-tile.tool-go, a.tool-row:active .button-metal.is-tile.tool-go { box-shadow: 0 0 0 rgba(100, 90, 75, 0), 0 0 0 rgba(255, 255, 255, 0), inset 1px 1px 0 rgba(255, 255, 255, 0), inset -1px -1px 0 rgba(26, 34, 54, 0), inset 2px 2px 4px rgba(120, 110, 95, .35), inset -2px -2px 4px rgba(255, 255, 255, .5); transform: scale(.98); transition-duration: .15s; } a.tool-row:active .button-metal.is-tile.tool-go::before, a.more-link:active .button-metal.is-tile.tool-go::before { opacity: 1; transition-duration: .15s; } .button-metal.is-tile.tool-go svg { display: block; width: 16px; height: 16px; /* 刻印：上に影、下に光。上下で同じ 0.5px ずつにして、矢印の見た目の重心が上下にずれないようにする */ filter: drop-shadow(0 -.5px 0 rgba(26, 34, 54, .4)) drop-shadow(0 .5px 0 rgba(255, 255, 255, .7)); } /* 見た目には出さず、読み上げにだけ残す */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* PROFILE は雰囲気を変えて、中央そろえで縦に積む（ユーザー指定） */ .home-section.is-center { display: block; text-align: center; } .home-section.is-center .home-head { margin-bottom: var(--s4); } .home-section.is-center .profile { max-width: 560px; margin: 0 auto; } .home-section.is-center .profile-icon { margin: 0 auto; } .home-section.is-center .home-more { margin-top: var(--s4); } /* ---- 追従ヘッダー（2026-10-25 決定。ds/PROJECT.md「フロント：追従ヘッダーとメニュー」） ---- アイコン＋吹き出し＋MENU。MENU は金属の削り出し、吹き出しはネイビー（2026-10-25 面の色から変更）。どちらも角丸の四角（角 8px） */ .fixed-header { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; padding: var(--s4) 0; } .header-inner { display: flex; align-items: center; max-width: 1100px; margin: 0 auto; padding: 0 20px; } .header-icon { flex-shrink: 0; display: block; width: 50px; height: 50px; overflow: hidden; border-radius: 50%; background: var(--color-surface); box-shadow: 0 0 0 2px var(--color-surface), 0 2px 8px rgba(100, 90, 75, .25); /* 面の色の輪＋うすい影 */ } .header-icon img { display: block; width: 100%; height: 100%; object-fit: cover; } .speech-bubble { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; height: 64px; margin: 0 20px; padding: 0 20px; border-radius: 8px; background: var(--color-ink); color: #fff; font-size: var(--t3); box-shadow: 0 2px 8px rgba(26, 34, 54, .3); } /* しっぽ：アイコンの方を向く */ .speech-bubble::before { content: ""; position: absolute; left: -6px; top: 50%; width: 12px; height: 12px; background: var(--color-ink); transform: translateY(-50%) rotate(45deg); } /* 文言の出入りはこの中で切り取る（吹き出し自体を切り取るとしっぽが消えるため） */ .speech-clip { position: relative; display: block; min-width: 0; overflow: hidden; } .speech-text { display: inline-block; opacity: 1; transform: translateY(0); transition: opacity .3s ease, transform .3s ease; } .speech-text.is-out-top { opacity: 0; transform: translateY(-15px); } /* 上へ消える */ .speech-text.is-from-bottom { opacity: 0; transform: translateY(15px); transition: none; } /* 下で待つ */ /* 金属の角丸ボタン（.is-tile）：金属の削り出し（common.css の .button-metal）を角丸の四角にしたもの。 MENU と、TOOLS の矢印ボタンで使う（2026-10-25 MENU 専用から共通に） */ /* 押したとき・ホバーは、ゆっくり（.35s）なめらかに変わる（2026-10-25 ユーザー指定） グラデーションは直接なめらかに切り替えられないので、押したときの面（光を左右反転したもの）を ::before に重ねておき、その濃さ（opacity）を変える */ .button-metal.is-tile { position: relative; isolation: isolate; flex-shrink: 0; min-width: 0; min-height: 0; width: 64px; height: 64px; padding: 0; border-radius: 8px; font-size: var(--t1); font-weight: 400; letter-spacing: .08em; /* 影は、ふだんと押したときで「数と内外（inset かどうか）」をそろえて6つずつ並べる。 そろっていないと、なめらかに変わらず一瞬で切り替わるため。使わない影は透明・大きさ0にしておく */ box-shadow: 4px 4px 9px rgba(100, 90, 75, .5), -3px -3px 8px rgba(255, 255, 255, .6), inset 1px 1px 0 rgba(255, 255, 255, .8), inset -1px -1px 0 rgba(26, 34, 54, .08), inset 0 0 0 rgba(120, 110, 95, 0), inset 0 0 0 rgba(255, 255, 255, 0); transition: box-shadow .35s ease, filter .35s ease, transform .35s ease; } .button-metal.is-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, #87888B 0%, #BBBCBE 30%, #AEAFB1 44%, #D6D6D7 70%, #A9AAAC 100%); opacity: 0; transition: opacity .35s ease; } /* ホバー：明るくなるのに加えて、金属のグラデーションそのものが左から右へ少しずれる（きらっ） 面を横に 130% の大きさで敷き、ふだんは右寄せ（いちばん明るい光が左から30%＝決めた見た目のまま）。 ホバーで左寄せにすると、光が左から60%のところまでずれる。 グラデーションの色の位置は、右の 77%（＝ふだん見えている部分）に決めた並びを縮めて入れ、 左の 23%（ホバーで見えてくる部分）は暗い端を少しのばしたもの。 :active にも同じ面を書くのは、common.css の「押した面」に切り替えないため（押した面は ::before で重ねる） */ .button-metal.is-tile, .button-metal.is-tile:active { background-image: linear-gradient(90deg, #8F9093 0%, #A9AAAC 23%, #E1E1E2 46%, #AEAFB1 66%, #BBBCBE 77%, #87888B 100%); background-size: 130% 100%; background-position: 100% 50%; } .button-metal.is-tile { transition: box-shadow .35s ease, filter .35s ease, transform .35s ease, background-position .6s ease; } .button-metal.is-tile:hover, .button-metal.is-tile:hover:active { filter: brightness(1.05); background-position: 0% 50%; } .button-metal.is-tile:active { box-shadow: 0 0 0 rgba(100, 90, 75, 0), 0 0 0 rgba(255, 255, 255, 0), inset 1px 1px 0 rgba(255, 255, 255, 0), inset -1px -1px 0 rgba(26, 34, 54, 0), inset 3px 3px 6px rgba(120, 110, 95, .35), inset -3px -3px 6px rgba(255, 255, 255, .6); transform: scale(.98); transition-duration: .15s; /* 押しこむときは少し速く、戻るときはゆっくり */ } .button-metal.is-tile:active::before { opacity: 1; transition-duration: .15s; } @media (max-width: 768px) { .header-inner { padding: 0 var(--s2); } .header-icon { width: 42px; height: 42px; } .speech-bubble { height: 54px; margin: 0 var(--s3); padding: 0 var(--s3); font-size: var(--t2); } .button-metal.menu-btn { width: 54px; height: 54px; } } /* ---- メニュー（。画面いっぱいの、地の色のすりガラス） ---- モーダルにせず、追従ヘッダー（z-index 100）のすぐ下（90）に重ねる。 MENU ボタンはいつも同じ場所に見えていて、開いている間は CLOSE になる（2026-10-25。前の「×」はなくした） */ .menu-popup { position: fixed; inset: 0; z-index: 90; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(221, 216, 206, .85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--color-ink); } .menu-popup[open] { display: flex; align-items: center; justify-content: center; } .menu-popup-inner { width: min(88%, 520px); } .popup-nav ul { margin: 0; padding: 0; list-style: none; } .popup-nav li { border-bottom: 1px solid rgba(26, 34, 54, .14); } .popup-nav a { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s3) var(--s1); text-decoration: none; } .popup-nav a[aria-current="page"] .nav-label { text-decoration: underline; text-underline-offset: 4px; } .nav-num { font-size: var(--t1); opacity: .5; } .nav-label { font-size: var(--t5); letter-spacing: .08em; } .nav-jp { margin-left: auto; font-size: var(--t1); opacity: .6; } /* 開くとき：すりガラスがふわっと出て、項目が上から順に下から浮かんでくる（--i は項目の番号。header.php で入れる） 閉じるとき：ふわっと消える（.is-closing は site.js がつけ、消えきってから閉じる） */ .menu-popup[open] { animation: menu-fade-in .4s ease both; } .menu-popup[open] .popup-nav li { animation: menu-item-in .5s ease both; animation-delay: calc(.08s + var(--i, 0) * .04s); } .menu-popup.is-closing { animation: menu-fade-out .3s ease both; } @keyframes menu-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes menu-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes menu-item-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* 動きを減らす設定の人には、動かさない */ @media (prefers-reduced-motion: reduce) { .menu-popup[open], .menu-popup[open] .popup-nav li, .menu-popup.is-closing { animation: none; } .button-metal.is-tile { transition-property: box-shadow, filter, transform; } /* グラデーションをずらさない */ .button-metal.is-tile:hover { background-position: 100% 50%; } }