/* ========================================================================= styles.css — ウェブアプリ作品集 クールな白＋淡いグレー基調。トーンは で切替。 ========================================================================= */ /* ---------- リセット ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; } h1, h2, h3, p { margin: 0; } button { font: inherit; color: inherit; cursor: pointer; } /* ========================================================================= テーマ変数 ========================================================================= */ :root { --font-jp: "Zen Kaku Gothic New", system-ui, sans-serif; --font-en: "Archivo", system-ui, sans-serif; --bg: #fbfbfc; --surface: #ffffff; --thumb-bg: #f1f2f5; --ink: #14151a; --ink-soft: #6b6f7a; --ink-faint: #a6aab4; --line: #e6e7ec; --accent: #14151a; --on-accent: #ffffff; --radius: 4px; --thumb-radius: 4px; --shadow: none; --shadow-hover: 0 18px 40px -22px rgba(20,21,26,.45); --title-weight: 700; --title-spacing: -0.01em; --maxw: 1200px; --gutter: clamp(20px, 5vw, 64px); } /* ---- トーンB：削除済み ---- */ /* ========================================================================= ベース ========================================================================= */ body { background: var(--bg); color: var(--ink); font-family: var(--font-jp); line-height: 1.7; -webkit-font-smoothing: antialiased; transition: background .4s ease, color .4s ease; } .reveal { opacity: 1; transform: none; } /* 開始状態（隠す）は、ページが実際に表示されているときだけ適用する。 バックグラウンドのiframe等ではアニメせず即表示され、表示が固まらない。 */ html.pre-anim .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 70ms); } html.pre-anim .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ========================================================================= ヘッダー ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s ease, background .3s ease; } .site-header.is-scrolled { border-bottom-color: var(--line); } .header-inner { max-width: var(--maxw); margin: 0 auto; padding: 16px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; flex-direction: column; line-height: 1.15; } .brand-jp { font-weight: 700; font-size: 16px; letter-spacing: .02em; } .brand-en { font-family: var(--font-en); font-weight: 600; font-size: 10px; letter-spacing: .22em; color: var(--ink-faint); margin-top: 2px; } .header-right { display: flex; align-items: center; gap: 18px; } /* ========================================================================= ショーウィンドウ ========================================================================= */ .window { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 11vw, 130px) var(--gutter) clamp(40px, 7vw, 80px); } .window-eyebrow { font-family: var(--font-en); font-weight: 600; font-size: 12px; letter-spacing: .3em; color: var(--ink-soft); margin-bottom: 22px; } .window-title { font-weight: var(--title-weight); letter-spacing: var(--title-spacing); font-size: clamp(27px, 4.6vw, 52px); line-height: 1.2; text-wrap: balance; } .window-lead { margin-top: 26px; max-width: 46ch; color: var(--ink-soft); font-size: clamp(14px, 1.4vw, 17px); line-height: 1.95; } /* PCでは1行に収める（途中で1文字だけ折り返さないように） */ @media (min-width: 900px) { .window-lead { max-width: none; white-space: nowrap; } } /* ========================================================================= インタラクティブな帯（フルブリードの細長いストリップ） ========================================================================= */ .band-strip { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 50%, var(--bg)); } .band-strip-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } #band { display: block; width: 100%; height: clamp(96px, 13vw, 150px); cursor: crosshair; } /* ========================================================================= プレースホルダー（動画が無いとき） ========================================================================= */ .ph { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background-color: var(--thumb-bg); background-image: repeating-linear-gradient( 45deg, color-mix(in srgb, var(--ink) 5%, transparent) 0, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px, transparent 11px ); color: var(--ink-faint); overflow: hidden; } .ph--card { position: absolute; inset: 0; } .ph-label { font-family: var(--font-en); font-weight: 700; font-size: 13px; letter-spacing: .26em; color: var(--ink-soft); } .ph-sub { font-family: var(--font-en); font-size: 10px; letter-spacing: .14em; white-space: nowrap; } /* ========================================================================= 作品セクション見出し ========================================================================= */ .works { max-width: var(--maxw); margin: 0 auto; padding: clamp(20px, 4vw, 48px) var(--gutter) clamp(70px, 12vw, 140px); } .works-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 22px; margin-bottom: clamp(28px, 4vw, 52px); border-bottom: 1px solid var(--line); } .works-title { font-weight: var(--title-weight); letter-spacing: var(--title-spacing); font-size: clamp(22px, 3vw, 34px); } .works-title-en { font-family: var(--font-en); font-weight: 500; font-size: .6em; color: var(--ink-faint); letter-spacing: .04em; } .works-note { font-size: 12px; color: var(--ink-faint); letter-spacing: .02em; text-align: right; } /* ========================================================================= メイソンリー ========================================================================= */ .masonry { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; } .masonry-col { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); } /* ずらしのリズム：2列目以降の偶数列を少し下げる */ .masonry-col { margin-top: calc(var(--col-offset, 0) * clamp(28px, 5vw, 72px)); } @media (max-width: 679px) { .masonry-col { margin-top: 0; } } /* ========================================================================= 作品カード ========================================================================= */ .card { display: block; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1); } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); } .card-thumb { position: relative; aspect-ratio: 9 / 16; background: var(--thumb-bg); border-radius: var(--thumb-radius); overflow: hidden; } .card-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .card-tag { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--font-en); font-weight: 700; font-size: 10px; letter-spacing: .16em; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(6px); color: var(--ink); border: 1px solid var(--line); } .card-hint { position: absolute; bottom: 12px; right: 12px; z-index: 2; font-family: var(--font-en); font-weight: 700; font-size: 11px; letter-spacing: .1em; padding: 7px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; } .card:hover .card-hint { opacity: 1; transform: none; } .card-body { padding: 18px 4px 6px; } .card-en { display: block; font-family: var(--font-en); font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; } .card-title { font-weight: var(--title-weight); letter-spacing: var(--title-spacing); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.35; } .card-tagline { margin-top: 8px; font-weight: 700; font-size: 14px; line-height: 1.6; color: var(--ink); text-wrap: pretty; } .card-desc { margin-top: 7px; font-size: 13px; line-height: 1.8; color: var(--ink-soft); text-wrap: pretty; } .card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-family: var(--font-en); font-weight: 500; font-size: 12px; letter-spacing: .02em; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color .25s, border-color .25s; } .card:hover .card-link { color: var(--ink); border-color: var(--ink); } .card-link-arrow { transition: transform .25s; } .card:hover .card-link-arrow { transform: translate(2px, -2px); } /* 強調カード（featured）：タイトルを一段大きく */ .card--featured .card-title { font-size: clamp(20px, 2.1vw, 25px); } /* ========================================================================= フッター ========================================================================= */ .site-footer { border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 70px) var(--gutter) 40px; } .footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .footer-brand { display: flex; flex-direction: column; line-height: 1.15; } .footer-note { font-family: var(--font-en); font-size: 11px; letter-spacing: .12em; color: var(--ink-faint); } .footer-top { font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: .14em; color: var(--ink-soft); transition: color .2s; } .footer-top:hover { color: var(--ink); } .footer-copy { max-width: var(--maxw); margin: 28px auto 0; font-family: var(--font-en); font-size: 11px; letter-spacing: .08em; color: var(--ink-faint); }