/* --- CSS: 基本設計（依存ゼロ） --- */ :root { --bg: #ffffff; --text: #0f172a; --muted: #475569; --border: #e2e8f0; --accent: #0ea5e9; --accent-2: #22c55e; --card: #ffffff; --alt: #f8fafc; --shadow: 0 10px 20px rgba(2,6,23,0.08); } @media (prefers-color-scheme: dark) { :root { --bg: #0b1220; --text: #e5e7eb; --muted: #94a3b8; --border: #1f2937; --card: #0f172a; --alt: #0b1220; --shadow: 0 12px 24px rgba(0,0,0,0.3); } } [data-theme="dark"] { --bg: #0b1220; --text: #e5e7eb; --muted: #94a3b8; --border: #1f2937; --card: #0f172a; --alt: #0b1220; --shadow: 0 12px 24px rgba(0,0,0,0.3); } * { box-sizing: border-box; } html, body { height: 100%; } html { scroll-behavior: smooth; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.6; color: var(--text); background: var(--bg); } /* アクセシビリティ */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: .5rem .75rem; border-radius: .5rem; } .skip-link:focus { left: .5rem; top: .5rem; z-index: 1000; } /* コンテナとセクション */ .container { width: min(1100px, 92%); margin-inline: auto; } .section { padding: 5rem 0; } .section.alt { background: var(--alt); } .section h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2rem); margin-bottom: .5rem; } .section-intro { color: var(--muted); margin-bottom: 2rem; } /* ヘッダー */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; } .brand .logo { font-weight: 700; color: var(--text); text-decoration: none; } .brand .tagline { display: block; color: var(--muted); font-size: .9rem; } .site-nav ul { list-style: none; display: flex; gap: .5rem; margin: 0; padding: 0; align-items: center; } .site-nav a, .site-nav button.ghost { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--text); padding: .5rem .75rem; border-radius: .6rem; } .site-nav a:hover { background: color-mix(in oklab, var(--text) 5%, transparent); } /* ヒーロー */ .hero { padding: 6rem 0 4rem; } .hero-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; } .hero h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); line-height: 1.2; } .accent { color: var(--accent); } .lede { color: var(--muted); font-size: 1.05rem; } .hero-cta { display: flex; gap: .75rem; margin-top: 1rem; } .hero-visual img { width: 100%; height: auto; border-radius: 1rem; box-shadow: var(--shadow); } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } } /* ボタン */ .btn { --bg-btn: var(--text); --fg-btn: var(--bg); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--bg-btn); color: var(--fg-btn); padding: .65rem 1rem; border-radius: .7rem; text-decoration: none; border: 1px solid var(--bg-btn); font-weight: 600; box-shadow: var(--shadow); } .btn.ghost { background: transparent; color: var(--text); border-color: var(--border); box-shadow: none; } .btn.sm { padding: .45rem .75rem; font-size: .9rem; } .btn:hover { filter: brightness(1.05); transform: translateY(-1px); } .btn:active { transform: translateY(0); } /* カード群 */ .grid { display: grid; gap: 1rem; } .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1000px) { .works-grid { grid-template-columns: repeat(2, 1fr);} } @media (max-width: 640px) { .works-grid { grid-template-columns: 1fr;} } .card { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; overflow: clip; box-shadow: var(--shadow); } .card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: linear-gradient(135deg,var(--border),transparent); } .card-body { padding: 1rem; } .card h3 { margin: 0 0 .25rem; font-size: 1.1rem; } .card p { margin: 0 0 .75rem; color: var(--muted); } .tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 .75rem; } .tags li { font-size: .8rem; border: 1px solid var(--border); padding: .2rem .5rem; border-radius: .5rem; color: var(--muted); } .card-actions { display: flex; gap: .5rem; } /* プロフィール・スキル */ .narrow { width: min(750px, 92%); margin-inline: auto; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } .small { font-size: .95rem; color: var(--muted); } .skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; padding-left: 1rem; } @media (max-width: 600px) { .skills { grid-template-columns: 1fr; } } /* フッター */ .site-footer { border-top: 1px solid var(--border); padding: 2rem 0; } .footer-inner { display: flex; gap: 1rem; align-items: center; justify-content: space-between; } .site-footer nav a { color: var(--muted); text-decoration: none; margin-right: .5rem; } .site-footer nav a:hover { color: var(--text); } /* ユーティリティ */ .ghost { background: transparent; } .hidden { display: none !important; } /* 視覚的に隠す（スクリーンリーダー向け） */ .visually-hidden{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap; } /* 画像の注目領域を左寄せ（人物を見せたい） */ .card-img.focus-left{ object-position: left center; } /* === Patch: compact card layout & image ratio control === */ .card-img{ height:auto; aspect-ratio: var(--card-ratio, 16 / 9); object-fit: cover; } .card{ display:flex; flex-direction:column; } .card-body{ display:grid; gap:.6rem; grid-template-rows:auto 1fr auto; } .card-body p{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:3; /* desktopで3行まで */ } @media (max-width: 640px){ .card-body p{ -webkit-line-clamp:4; } /* モバイルで少し長めに */ } .card[data-ratio="21/9"] .card-img{ aspect-ratio:21/9; } .card[data-ratio="4/3"] .card-img{ aspect-ratio:4/3; } /* Prevent hero snippet rules from affecting cards even if pasted */ .card .work-photo.hero img{ height:auto; } /* --- SPメニューの折り返し＆改行制御 --- */ @media (max-width: 800px){ /* メニューを複数行で折り返し可に */ .site-nav ul{ display: flex; flex-wrap: wrap; /* ← これが肝 */ justify-content: center; gap: .5rem; } /* リンクの1文字折り防止＋タップしやすいサイズ */ .site-nav a, .site-nav button.ghost{ white-space: nowrap; /* 1語(=日本語の語句)を折らない */ word-break: keep-all; /* CJKの任意改行を抑制 */ padding: .6rem .9rem; font-size: 0.95rem; } /* ブランドのサブコピーが幅を食う場合は非表示に */ .brand .tagline{ display: none; } } /* 超狭幅(≲360px)は1列縦並びで確実に読ませる */ @media (max-width: 360px){ .site-nav ul{ justify-content: stretch; } .site-nav a, .site-nav button.ghost{ inline-size: 100%; /* 横幅いっぱい */ justify-content: center; } } /* =========================== ハンバーガーメニュー（追加） 2025-08-25 依存: