/* ========================================================================= About — メンバープロフィール詳細モーダル（本番 css/member-profile.css の移植） 移植方針: - 見え方（ダーク×フロスト＝夜空トーン）は本番と同じにする。モーダル内部の 生の色（#9db1e8 / #c9a3d8 / #f27ba4 / 紺青のオーロラ等）は本番からそのまま 持ってくる＝新デザイン :root には無い配色なので、ここだけ raw 値を許容している。 - 本番トークン → 新デザイントークンの読み替え: --grad → --grad （新デザインにも同名で存在。#3d5aab→#8c5a9c→#d6336c） --font-en → --f-en --magenta → --c3 --ease → --ease （新デザインにも同名で存在） --radius → 8px（新デザインに半径トークンが無い。このサイトの --r は .frame 内の 「比率単位」で半径ではないため使えない。カード等の 既定半径 8px＝css/page.css の .card__face に合わせた） - 本番の .member-card--modal / .member-photo 前提のセレクタは、このサイトの .card--member / .card__face に読み替えた。 - 読み込み順は top.css → page.css → about-mvv.css → このファイル。既存 CSS は 一切書き換えず、このファイルの追加だけで成立させている。 ========================================================================= */ /* ---- 背面スクロールの停止 ----------------------------------------------- js/member-profile.js は本番と同じく に .modal-lock を付ける。本番では Lenis(denso-motion.js) 側がこのクラスを見ていたが、新デザインには Lenis が無いので 「クラスに対応する CSS」をここで自前に持つ（背面が動かないことを CSS で担保）。 js/top.js の別方式（setInert + body.style.overflow）とは競合しない （あちらは body、こちらは html を触る）。 なお js/about-mvv.js も Value モーダルで同じ .modal-lock を付けており、 これまで対応 CSS が無かった＝背面が動いていた。この 1 行で両方効く。 */ html.modal-lock { overflow: hidden; } /* ---- メンバーカード：クリック可能化 -------------------------------------- .card（css/page.css）が既に position:relative なので、ボタンをカード全面に 敷ける。写真・役職・氏名のどこを押しても開く＝本番と同じ当たり判定。 */ .card--member { position: relative; } .card--member .card__face { position: relative; } .member-card__open { position: absolute; inset: 0; z-index: 2; appearance: none; background: none; border: 0; cursor: pointer; /* アクセシブルネームはテキスト（「〈氏名〉の詳しいプロフィールを見る」）で 持ち、視覚上だけ消す。display:none や aria-label 無しの空ボタンにしない */ font-size: 0; color: transparent; } .member-card__open:focus-visible { outline: 2px solid var(--c3); outline-offset: 3px; border-radius: 8px; } /* ＋チップ（本番 .member-more をそのまま移植）。白いメンバー欄の上なので明トーン。 白と影の raw 値は本番からの移植分。 */ .member-more { position: absolute; right: 10px; bottom: 10px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(20, 24, 31, .16); pointer-events: none; transition: transform .3s var(--ease), box-shadow .3s; } /* ＋の字はブランドグラデ（白円の上に疑似要素で描画） */ .member-more::before { content: "＋"; font-size: 15px; line-height: 1; font-weight: var(--fw-bold); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .card--member:hover .member-more, .card--member:focus-within .member-more { transform: translateY(-2px) rotate(90deg); box-shadow: 0 6px 16px rgba(20, 24, 31, .24); } /* 写真の上に出す「PROFILE」の合図（本番 .member-more の意図＝“押せるカード”を ひと目で分かるようにする、をこのサイトの一覧向けに一段強くしたもの）。 常時出ている＋チップが静止時の合図、この帯がホバー／フォーカス時の確認。 色は raw 値を足さずに済むよう color-mix で --navy-900 から作る。 */ /* ---- モーダル本体（ダーク×フロスト＝about-mvv.css の .mvv-modal と同系） ---- z-index は本番と同じ 1600。このサイトの最上位はヘッダー 100 / メニュー 150 / top.js のモーダル 180 / skip 200 なので、確実に全部の上に出る。 */ .mprof { position: fixed; inset: 0; z-index: 1600; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 32px); opacity: 0; visibility: hidden; pointer-events: none; /* visibility は「開いた瞬間に即 visible / 閉じるときだけフェード後に hidden」にする。 .45s の遷移にすると、開いた直後（遷移の進捗0）の computed visibility はまだ hidden＝JS の focus() が無視され、フォーカスが背面の開くボタンに残ってしまう。 0s + 遅延 .45s なら見え方（.45s のフェード）は変えずにこれを避けられる。 */ transition: opacity .45s var(--ease), visibility 0s linear .45s; } .mprof.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .45s var(--ease), visibility 0s; /* 開くときは遅延なし＝即 visible */ } .mprof__scrim { position: absolute; inset: 0; background: rgba(13, 17, 34, .62); -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1); } .mprof__panel { position: relative; z-index: 1; width: min(940px, 100%); /* 高さは確定値にする（max-heightのみだとグリッド行が中身の高さまで伸び、 本文の overflow-y:auto が効かずクリップされる） */ height: min(86svh, 820px); /* 明るめの紺青ベースに、ブランド3色（青→紫→マゼンタ）のオーロラを重ねる */ background: radial-gradient(120% 90% at 100% 0%, rgba(214, 51, 108, .18), transparent 55%), radial-gradient(110% 85% at 0% 100%, rgba(61, 90, 171, .28), transparent 58%), radial-gradient(90% 70% at 55% 55%, rgba(140, 90, 156, .14), transparent 70%), linear-gradient(165deg, rgba(46, 54, 94, .95) 0%, rgba(28, 34, 64, .97) 55%, rgba(18, 22, 44, .98) 100%); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; overflow: hidden; box-shadow: 0 40px 100px rgba(4, 6, 14, .6); display: grid; grid-template-columns: minmax(280px, 36%) 1fr; grid-template-rows: 100%; transform: translateY(18px); transition: transform .5s var(--ease); } /* 上端に明るめブランドグラデのヘアライン */ .mprof__panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #9db1e8 0%, #c9a3d8 50%, #f27ba4 100%); opacity: .9; z-index: 3; } .mprof.is-open .mprof__panel { transform: none; } .mprof__media { position: relative; background: #161c34; } .mprof__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; } /* 写真の右端と下端をパネルの闇に溶かす（写真404時はこのトーンが地になる） */ .mprof__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(270deg, rgba(24, 29, 54, .5) 0%, transparent 26%), linear-gradient(180deg, transparent 64%, rgba(20, 25, 48, .58) 100%), linear-gradient(160deg, rgba(61, 90, 171, .18), rgba(214, 51, 108, .14)); } .mprof__body { overflow-y: auto; overscroll-behavior: contain; padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 46px) clamp(30px, 4vw, 48px); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; } /* 本文（tabindex="0"）にフォーカスが来たことを分かるようにする。 既定の outline-offset:3px（css/top.css）だと枠の外に出てパネルに食い込むので内側に引く */ .mprof__body:focus-visible { outline: 2px solid #aab8ff; outline-offset: -2px; } /* ダークなパネルの上では css/top.css の輪郭色 --c1(#3d5aab) がほぼ見えない （実測コントラスト 1.8:1・WCAG 1.4.11 は 3:1 必要）。.mprof は .dark の子孫では ないので top.css:92 の明色への差し替えが効かない＝同じ値をここで当て直す。 */ .mprof :focus-visible { outline-color: #aab8ff; } .mprof__role { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .16em; color: #f27ba4; margin: 0 0 8px; } .mprof__name { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; letter-spacing: .03em; color: #fff; margin: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, .4); } .mprof__sec { margin-top: clamp(26px, 3.4vw, 40px); } .mprof__sec-title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .12); } .mprof__sec-title .en { font-family: var(--f-en); font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .26em; background: linear-gradient(90deg, #9db1e8 0%, #c9a3d8 50%, #f27ba4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .mprof__sec-title .jp { font-size: 13px; font-weight: var(--fw-semibold); color: rgba(255, 255, 255, .55); } /* ---- 経歴タイムライン ---------------------------------------------------- */ .mprof-tl { list-style: none; margin: 0; padding: 0; } .mprof-tl li { /* 1fr は最小値が auto＝min-content なので、折り返せない長い一文（body の word-break:auto-phrase で1フレーズ扱いになる社名＋役割など）があると トラックが縮まず 320px 幅で本文が横にはみ出す。minmax(0,1fr) で縮めさせる */ position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 7px 0 7px 20px; font-size: 14px; line-height: 1.8; } /* 縦ライン＋ドット */ .mprof-tl li::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .2); } .mprof-tl li:first-child::before { top: 20px; } .mprof-tl li:last-child::before { bottom: auto; height: 20px; } /* ドットは1行目に揃える（複数行の項目で中央に落ちない） */ .mprof-tl li::after { content: ""; position: absolute; left: 0; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: #1d2340; border: 2px solid #f27ba4; } .mprof-tl li:last-child::after { background: linear-gradient(135deg, #9db1e8, #f27ba4); border: 0; width: 11px; height: 11px; left: -1px; top: 14px; box-shadow: 0 0 12px rgba(242, 123, 164, .55); } .mprof-tl__year { font-family: var(--f-en); font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .08em; color: #9db1e8; padding-top: 2px; } /* トラックを縮めたうえで、どんな長さの経歴が入っても収まるよう最後の逃げ道を用意する （minmax(0,1fr) だけでも現状の16人は収まるが、今後の追記で崩れないように両方入れる） */ .mprof-tl__txt { color: rgba(255, 255, 255, .9); overflow-wrap: anywhere; } .mprof-tl__txt small { display: block; font-size: 12px; color: rgba(255, 255, 255, .55); } /* ---- 想い・大切にしている言葉 -------------------------------------------- */ .mprof__quote { font-size: clamp(20px, 2.3vw, 26px); font-weight: var(--fw-bold); letter-spacing: .04em; line-height: 1.7; margin: 0 0 18px; background: linear-gradient(90deg, #9db1e8 0%, #c9a3d8 50%, #f27ba4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .mprof__msg p { font-size: 14.5px; line-height: 2.1; color: rgba(255, 255, 255, .87); margin: 0; } .mprof__msg p + p { margin-top: 1.1em; } .mprof__sign { margin: 26px 0 0; text-align: right; font-size: 13px; font-weight: var(--fw-semibold); color: rgba(255, 255, 255, .55); letter-spacing: .06em; } .mprof__sign b { font-size: 16px; font-weight: var(--fw-bold); color: #fff; margin-left: .6em; } /* ---- 閉じるボタン（about-mvv.css の .mvv-modal__close と同意匠） ---------- */ .mprof__close { position: absolute; top: 14px; right: 14px; z-index: 4; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); font-size: 16px; color: #fff; line-height: 1; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s, transform .2s; } .mprof__close:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); } /* ---- 追加セクション（ふりがな／得意領域／実績／パーソナル／写真なし） ----- */ /* 氏名のふりがな（名前の右に小さく） */ .mprof__kana { display: inline-block; margin-left: 12px; font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .14em; color: rgba(255, 255, 255, .5); vertical-align: 6px; } /* 得意領域チップ（フロスト＋ブランドヘアライン） */ .mprof-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .mprof-chips li { font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: .02em; line-height: 1.6; color: rgba(255, 255, 255, .9); padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); } /* 実績リスト（ブランドグラデのドット） */ .mprof-list { list-style: none; margin: 0; padding: 0; } .mprof-list li { position: relative; padding: 4px 0 4px 20px; font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, .87); } .mprof-list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #9db1e8, #f27ba4); } /* パーソナル（dt/ddの2カラム） */ .mprof-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 8px; } .mprof-dl dt { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .1em; color: #9db1e8; padding-top: 3px; white-space: nowrap; } .mprof-dl dd { margin: 0; font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, .87); } /* 写真なしメンバー：イニシャルを夜空トーンの地に大きく置く */ .mprof__ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(64px, 10vw, 110px); font-weight: 800; line-height: 1; background: linear-gradient(90deg, #9db1e8 0%, #c9a3d8 50%, #f27ba4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .82; } /* ---- Responsive ---------------------------------------------------------- */ @media (max-width: 760px) { .mprof { padding: 0; align-items: stretch; } .mprof__panel { grid-template-columns: none; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100dvh; border-radius: 0; border: 0; } .mprof__media { min-height: 0; height: clamp(180px, 34vh, 300px); } .mprof__media img { object-position: 50% 22%; } .mprof__media::before { background: linear-gradient(180deg, transparent 50%, rgba(38, 45, 82, .82) 100%), linear-gradient(160deg, rgba(61, 90, 171, .18), rgba(214, 51, 108, .14)); } .mprof-tl li { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; font-size: 13px; } .mprof__kana { margin-left: 10px; font-size: 11px; vertical-align: 4px; } /* タッチ端末はホバーが無い＝常時出ている＋チップだけで合図する */ } @media (prefers-reduced-motion: reduce) { /* .mprof.is-open は .mprof より詳細度が高いので、ここにも並べないと フェードだけ残ってしまう（visibility の即時化は transition:none でも保たれる） */ .mprof, .mprof.is-open, .mprof__panel, .member-more, .mprof__close { transition: none; } .mprof__panel { transform: none; } } /* ========================================================================= 原野限定：小さいイカが泳ぐ演出（本番 v4 をそのまま移植） js/member-profile.js が open('harano') 時に .mprof__panel へ .mprof-sea を 注入する。パネルは overflow:hidden なので画面外は自然にクリップされる。 横断＝外側（transform のみ・linear）、上下の揺れ＝内側（alternate）。 ========================================================================= */ .mprof-sea { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; } .mprof-squid { position: absolute; left: 0; animation: mprofSquidSwim linear infinite; will-change: transform; } .mprof-squid--1 { color: #9db1e8; } .mprof-squid--2 { color: #c9a3d8; } .mprof-squid--3 { color: #f27ba4; } .mprof-squid__bob { animation: mprofSquidBob ease-in-out infinite alternate; opacity: .55; filter: drop-shadow(0 2px 8px rgba(10, 14, 30, .35)); } .mprof-squid__bob svg { display: block; width: 100%; height: auto; } /* 胴の伸縮＝ジェット推進らしい脈動 */ .mprof-squid__body { transform-box: fill-box; transform-origin: center; animation: mprofSquidPulse 1.6s ease-in-out infinite; } /* 左端の画面外から右へ泳ぎ切る（パネル最大940px＜100vwなのでどの幅でも抜ける） */ @keyframes mprofSquidSwim { from { transform: translateX(-60px); } to { transform: translateX(100vw); } } @keyframes mprofSquidBob { from { transform: translateY(-7px) rotate(-3deg); } to { transform: translateY(7px) rotate(3deg); } } @keyframes mprofSquidPulse { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.94); } } @media (prefers-reduced-motion: reduce) { .mprof-sea { display: none; } } /* --- 検証で出た残りの手当て（2026-09-16） --- */ /* ふりがなが AA（4.5:1）に届いていなかったので明るくする */ .mprof__kana { color: rgba(255, 255, 255, .68); } /* モーダルを開くたびに縦スクロールバーが消えてページが横に飛ぶのを防ぐ */ html { scrollbar-gutter: stable; } /* 写真の明るい部分で「PROFILE」の帯が読めなくなるのを防ぐ（装飾だが可読にしておく） */ /* ========================================================================= MEMBER 裏面スポットライト（本番 css/style.css:3021-3037 の移植）2026-09-16 カーソル／指の周囲だけ円形に裏面画像（.member-photo-flip）が透ける。 座標は js/member-flip.js が --flip-x / --flip-y に供給し、.is-flip-on で点灯。 本番 → このサイトのセレクタ読み替え: .member-photo → .card__face .member-card → .card--member 数値（半径90px・マスクの 55%/98%・transition）は本番のまま変えていない。 ========================================================================= */ /* 縦スクロールはブラウザに渡す（横フリック/ピンチだけ抑える）。本番と同じ指定。 */ .card__face:has(.member-photo-flip) { touch-action: pan-y; } /* 表と同じ速度でズームさせる（ずれると裏だけ先に止まって見える） */ .card__face .member-photo-flip { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease), transform .5s var(--ease); /* 装飾レイヤーなので当たり判定は持たない（全面の .member-card__open を塞がない） */ pointer-events: none; -webkit-mask-image: radial-gradient(circle var(--flip-r, 90px) at var(--flip-x, 50%) var(--flip-y, 50%), #000 55%, transparent 98%); mask-image: radial-gradient(circle var(--flip-r, 90px) at var(--flip-x, 50%) var(--flip-y, 50%), #000 55%, transparent 98%); } .card__face.is-flip-on .member-photo-flip { opacity: 1; } /* ========================================================================= メンバー写真の二段構え（本番 about/index.html:281-284 ＋ style.css:1891-1897） 写真が 404／読み込み失敗したら img が自分を DOM から消し（onerror）、 親に残った data-initial（住・本・堀…）のグラデ地が出る。成功したら onload で .is-ph を外す＝プレースホルダが消えて写真だけになる。 新デザイン固有の事情: css/page.css:251 の `.card__face[data-initial]::after` は data-initial さえ あれば常に出る（＝写真の上に地が被る）。page.css は変更禁止なので、 ここで「.is-ph が付いている間だけ出す」よう詳細度で上書きする。 写真を持たないカード（坂田さん）は .is-ph を外す onload が無いので出続ける ＝これまでどおりの見え方のまま。 ========================================================================= */ .card--member .card__face[data-initial]:not(.is-ph)::after { content: none; } /* --- 表の写真のズーム速度を裏面と揃える（page.css の 1.2s のままだと スポットライトの中身だけ先にズームを終える） --- */ .card--member .card__face > img:not(.member-photo-flip) { transition: transform .5s var(--ease); } /* 指を置いてなぞる操作を拾うため、当たり判定のあるカード側に touch-action を置く （.card__face は全面ボタンに覆われていてヒットテストに出てこない） */ .card--member:has(.member-photo-flip) { touch-action: pan-y; }