/* BEE DOMINA ポートフォリオ 試作版 / 見た目はこのファイルで調整 */
:root { color-scheme:dark; --bg:#080808; --ink:#f2f2f2; --muted:#9b9b9e; --line:#272729; --hot:#f743d2; --blue:#4acafb; --max:1180px; }
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Arial, "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.wrap { width:min(calc(100% - 88px),var(--max)); margin-inline:auto; }
.site-shell { min-height:100vh; display:flex; flex-direction:column; }
/* 旧サイトの大きいヘッダーは廃止。メニューだけの極小ナビ */
.site-nav { display:flex; align-items:center; justify-content:space-between; min-height:82px; gap:20px; }
.site-mark { font-size:15px; font-weight:900; letter-spacing:-.045em; white-space:nowrap; }
.mark-dot,.period { color:var(--hot); }
.nav-links { display:flex; gap:clamp(18px,3vw,40px); align-items:center; }
.nav-link { color:#a8a8a8; font-size:11px; letter-spacing:.14em; font-weight:800; transition:color .2s; padding:12px 0; }
.nav-link:hover,.nav-link[aria-current="page"] { color:#fff; }
.nav-link[aria-current="page"]::after { content:""; display:block; height:2px; background:var(--hot); margin-top:5px; }
.page-intro { padding-top:68px; }
.eyebrow { display:flex; align-items:center; gap:12px; font-size:11px; color:#a2a2a7; font-weight:750; letter-spacing:.18em; }
.eyebrow-line { width:20px; height:2px; background:var(--hot); display:inline-block; }
.intro-row { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-top:18px; }
h1,h2,h3,p { margin-top:0; }
.work-intro h1 { font-size:clamp(60px,8.2vw,120px); font-weight:900; line-height:.92; letter-spacing:-.085em; margin:0; }
.accent-text { color:var(--hot); }
.intro-note { font-size:13px; line-height:2.1; color:#a3a3a5; margin-bottom:9px; }
.filter-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:48px; border-bottom:1px solid var(--line); padding-bottom:17px; }
.filter { appearance:none; background:none; color:#a1a1a3; border:1px solid transparent; padding:10px 14px; border-radius:4px; font-size:11px; font-weight:750; letter-spacing:.07em; cursor:pointer; transition:color .2s,background .2s,border .2s; }
.filter:hover { color:#fff; }
.filter.is-active { color:#fff; border-color:#505055; background:#1b1b1e; }
.filter span { color:#ff79df; margin-left:4px; }
.works-section { padding:30px 0 116px; }
.works-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 26px; }
.work-card { border:0; background:transparent; color:inherit; padding:0; margin:0; text-align:left; cursor:pointer; min-width:0; display:block; }
.thumb { display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:#161616; }
.thumb>img, .modal-media>img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb .poster-art { width:100%; height:100%; }
/* v3: サムネイルをホバーすると作品情報が下から浮き上がる */
.thumb>img,.thumb>.poster-art { transition:transform .55s cubic-bezier(.16,1,.3,1); }
@media (hover:hover) and (pointer:fine) {
 .work-card:hover .thumb>img,.work-card:hover .thumb>.poster-art { transform:scale(1.045); }
}
.card-hover { position:absolute; inset:0; z-index:3; padding:clamp(16px,2.1vw,28px); color:#fff; background:linear-gradient(180deg,rgba(0,0,0,.37) 0%,rgba(0,0,0,.04) 22%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.95) 100%); opacity:0; visibility:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:12px; text-align:left; transition:opacity .28s ease,visibility .28s ease; }
.hover-topline { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#e7e7e9; font-weight:850; font-size:10px; letter-spacing:.11em; text-shadow:0 1px 6px #000; }
.hover-view { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; color:#fff; }
.hover-view span { font-size:19px; line-height:1; color:var(--hot); }
.hover-info { display:flex; flex-direction:column; align-items:flex-start; gap:9px; transform:translateY(20px); opacity:0; transition:transform .38s cubic-bezier(.16,1,.3,1),opacity .3s ease; }
.hover-kicker { font-size:10px; color:#ff8ce6; letter-spacing:.16em; font-weight:850; }
.hover-title { display:block; max-width:100%; font-size:clamp(22px,2.7vw,37px); font-weight:950; letter-spacing:-.045em; line-height:1.05; overflow-wrap:anywhere; text-transform:uppercase; }
.hover-credit { font-size:clamp(9px,.9vw,11px); font-weight:700; color:#e6e6e9; line-height:1.5; display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.hover-credit>span { color:#ababaf; font-size:9px; font-weight:850; letter-spacing:.06em; }
.hover-credit i { display:inline-block; height:3px; width:3px; background:#aaa; border-radius:50%; margin:0 5px; }
.hover-description { color:#d3d3d5; font-size:clamp(10px,1vw,12px); line-height:1.65; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.work-card:hover .card-hover,.work-card:focus-visible .card-hover { opacity:1; visibility:visible; }
.work-card:hover .hover-info,.work-card:focus-visible .hover-info { transform:translateY(0); opacity:1; }
.work-card-meta { display:flex; justify-content:space-between; align-items:start; gap:10px; padding-top:16px; }
.work-title { font-size:15px; font-weight:900; letter-spacing:.025em; }
.work-category { color:#8e8e91; font-size:10px; letter-spacing:.13em; padding-top:3px; white-space:nowrap; }
/* タッチ端末ではホバーできないため、クレジットと説明をサムネの下に表示 */
.work-card-mobile-details { display:none; }
@media (hover:none), (pointer:coarse) {
 .card-hover { display:none; }
 .work-card-mobile-details { display:flex; flex-direction:column; gap:6px; margin-top:7px; color:#a9a9ac; }
 .mobile-credit { font-size:10px; font-weight:800; line-height:1.5; letter-spacing:.025em; }
 .mobile-separator { color:var(--hot); margin-inline:5px; }
 .mobile-description { font-size:11px; line-height:1.65; color:#949497; }
}
.empty-state { padding:60px 0; color:var(--muted); }
/* 仮サムネイルはCSS製。画像を置けば自動的に置き換わります */
.poster-art { position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; }
.poster-art::before { position:absolute; content:""; inset:-22%; background:repeating-linear-gradient(132deg,transparent 0 19px,rgba(255,255,255,.09) 20px 22px,transparent 24px 70px); transform:rotate(-8deg); z-index:-1; }
.poster-art .shape { display:block; position:absolute; border:7px solid #090909; }
.shape-a { width:40%; height:110%; transform:rotate(32deg); top:-45%; left:-5%; background:#fdfa12; }
.shape-b { width:43%; height:85%; border-radius:50%; transform:rotate(-35deg); bottom:-50%; right:-10%; background:#42edcb; }
.shape-c { width:30%; height:42%; transform:rotate(25deg); top:5%; right:9%; background:#f82d95; }
.poster-mini { position:absolute; left:20px; top:16px; font-size:clamp(7px,.75vw,10px); letter-spacing:.19em; font-weight:800; color:#0e0e0e; z-index:1; }
.poster-main { position:relative; z-index:2; font-size:clamp(26px,4.9vw,74px); max-width:95%; overflow-wrap:anywhere; text-align:center; line-height:.9; font-weight:1000; font-style:italic; letter-spacing:-.07em; text-transform:uppercase; color:#fff; paint-order:stroke fill; -webkit-text-stroke:0; text-shadow:4px 5px 0 #0e0e0e,-2px -2px 0 #0e0e0e,2px -2px 0 #0e0e0e,-2px 2px 0 #0e0e0e; transform:rotate(-7deg); }
.poster-sub { position:absolute; z-index:2; bottom:15px; right:19px; font-size:9px; font-weight:900; color:#0a0a0a; background:#fff; padding:5px 8px; letter-spacing:.06em; }
.art-1 { background:#fa63d3; }.art-2 { background:#157dff; }.art-3 { background:#e7f63c; }.art-4 { background:#bd83f2; }.art-5 { background:#fa6e2e; }.art-6 { background:#3decce; }.art-7 { background:#fa4b6d; }.art-8 { background:#fee5d3; }
.art-2 .shape-a,.art-6 .shape-a { background:#f73eaa; }
.art-2 .shape-b,.art-7 .shape-b { background:#ffff39; }
.art-3 .shape-a,.art-8 .shape-a { background:#169aff; }
.art-3 .shape-b,.art-4 .shape-b { background:#f34aa7; }
.art-4 .shape-c,.art-5 .shape-c { background:#58e2c2; }
.art-6 .shape-c,.art-7 .shape-c { background:#4f30d3; }
.art-8 .shape-c { background:#df4f3e; }
.contact-teaser { border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:end; gap:24px; padding:70px 0 90px; }
.contact-teaser h2 { font-size:clamp(30px,4vw,50px); line-height:1.35; margin:12px 0 0; letter-spacing:-.045em; }
.teaser-description { margin:18px 0 0; max-width:535px; color:#b2b2b5; font-size:13px; line-height:1.9; }
.outline-link { display:inline-flex; align-items:center; justify-content:space-between; gap:35px; border:1px solid #87878a; padding:15px 20px; font-size:12px; letter-spacing:.05em; font-weight:800; white-space:nowrap; transition:background .2s,color .2s; }
.outline-link:hover { background:white; color:#080808; }
.outline-link span { font-size:20px; }
/* WORKS最下部のSNSリンク：hover / キーボードフォーカスでアイコンが浮く */
.social-section { border-top:1px solid var(--line); padding:65px 0 84px; display:flex; justify-content:space-between; align-items:center; gap:36px; }
.social-copy .eyebrow { margin-bottom:14px; }
.social-copy h2 { margin:0; font-size:clamp(26px,3vw,43px); letter-spacing:-.055em; line-height:1.2; font-weight:900; }
.social-copy > p:last-child { color:var(--muted); font-size:12px; margin:13px 0 0; }
.social-links { display:flex; align-items:flex-start; justify-content:center; gap:clamp(16px,2vw,25px); padding-top:14px; }
.social-link { --social-accent:#f2f2f2; width:76px; display:flex; flex-direction:column; align-items:center; gap:11px; position:relative; text-align:center; }
.social-icon { width:64px; height:64px; display:grid; place-items:center; color:#f5f5f5; border:1px solid #36363c; background:#141417; border-radius:16px; transition:transform .25s cubic-bezier(.2,.9,.2,1.35), background .25s, border-color .25s, box-shadow .25s, color .25s; }
.social-icon svg { display:block; width:27px; height:27px; }
.social-label { font-size:9px; font-weight:800; letter-spacing:.11em; color:#8b8b91; transition:color .2s; }
.social-x { --social-accent:#f2f2f2; }
.social-instagram { --social-accent:#fb49ae; }
.social-youtube { --social-accent:#ff424e; }
.social-pop { position:absolute; bottom:calc(100% + 16px); left:50%; transform:translate(-50%,7px) scale(.96); opacity:0; visibility:hidden; pointer-events:none; background:#fff; color:#101013; padding:10px 12px; white-space:nowrap; font-size:10px; font-weight:900; letter-spacing:.07em; box-shadow:0 10px 26px rgba(0,0,0,.4); transition:opacity .19s,transform .2s,visibility .2s; }
.social-pop::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#fff; }
.social-pop span { color:#f743d2; margin-left:7px; }
.social-link:hover .social-icon,.social-link:focus-visible .social-icon { transform:translateY(-8px) scale(1.07); color:var(--social-accent); border-color:var(--social-accent); background:#1f1d22; box-shadow:0 14px 30px rgba(0,0,0,.55); }
.social-link:hover .social-label,.social-link:focus-visible .social-label { color:#fff; }
.social-link:hover .social-pop,.social-link:focus-visible .social-pop { opacity:1; visibility:visible; transform:translate(-50%,0) scale(1); }
@media (max-width:850px) { .social-section { align-items:flex-start; flex-direction:column; gap:28px; } .social-links { padding-top:10px; } }
@media (max-width:620px) { .social-section { padding:44px 0 58px; } .social-copy h2 { font-size:30px; } .social-links { width:100%; justify-content:flex-start; gap:18px; } .social-link { width:70px; } .social-icon { width:62px; height:62px; } }
@media (hover:none) { .social-pop { display:none; } }
.site-footer { border-top:1px solid #242424; color:#77777a; padding-top:24px; padding-bottom:27px; margin-top:auto; display:flex; justify-content:space-between; gap:15px; font-size:10px; letter-spacing:.09em; }
/* 内部ページ */
.inside-main { padding-top:85px; padding-bottom:155px; }
.inside-title { font-size:clamp(66px,11vw,140px); line-height:1; margin:22px 0 90px; letter-spacing:-.075em; font-weight:900; }
.about-layout,.contact-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(40px,8vw,110px); }
.about-lead { align-self:start; }
.about-label { color:var(--blue); font-size:11px; letter-spacing:.14em; font-weight:800; }
.about-lead h2 { font-size:clamp(27px,3vw,42px); line-height:1.5; letter-spacing:-.045em; margin:20px 0 20px; }
.about-lead p,.contact-lead p { color:#b2b2b5; font-size:14px; line-height:2.15; }
.tiny-note { font-size:11px !important; color:#737377 !important; }
.detail-block { border-top:1px solid var(--line); padding:26px 0 36px; display:grid; grid-template-columns:60px minmax(0,1fr); gap:10px; }
.detail-index { font-size:11px; color:var(--hot); font-weight:800; }
.detail-block h3 { font-size:15px; letter-spacing:.07em; margin:0 0 14px; }
.detail-block p { font-size:13px; color:#b3b3b4; line-height:2.1; margin:0; }
/* ABOUT: 経歴とコンパクトな制作実績。v3の黒基調・2カラムを維持 */
.about-lead h2 { overflow-wrap:anywhere; }
.profile-copy p + p { margin-top:11px; }
.heading-en { color:#85858b; font-size:10px; letter-spacing:.12em; font-weight:700; }
.project-list { list-style:none; padding:0; margin:0; }
.project-item { display:flex; flex-direction:column; gap:5px; padding:13px 0 15px; border-bottom:1px solid #272729; }
.project-item:first-child { padding-top:2px; }
.project-item:last-child { border-bottom:0; padding-bottom:0; }
.project-name { color:#f2f2f2; font-size:12px; font-weight:750; line-height:1.65; overflow-wrap:anywhere; }
.project-role { color:#98989f; font-size:11px; line-height:1.65; }
.page-bottom-action { margin-top:55px; }
.contact-lead h2 { font-size:clamp(31px,4vw,52px); line-height:1.38; margin:0 0 22px; letter-spacing:-.04em; }
.contact-notice { color:#9f8f63 !important; font-size:12px !important; border-left:2px solid #af9a63; padding-left:13px; margin-top:30px; }
.contact-form { display:flex; flex-direction:column; align-items:stretch; }
.contact-form label { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:13px; font-weight:750; }
.required { font-size:10px; color:#f281bd; font-weight:600; }
.contact-form input,.contact-form textarea { background:#141414; color:#fff; border:1px solid #363638; border-radius:0; padding:16px 15px; margin-bottom:30px; width:100%; }
.contact-form textarea { resize:vertical; min-height:180px; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:#7d7d80; }
.submit-btn { display:flex; justify-content:space-between; align-items:center; background:#f1f1f1; color:#070707; border:0; padding:17px 21px; cursor:pointer; font-size:13px; font-weight:900; transition:background .2s; }
.submit-btn:hover { background:var(--hot); }.submit-btn:disabled { opacity:.5; cursor:progress; }
.submit-btn span { font-size:20px; }.form-status { margin:13px 0 0; font-size:12px; min-height:20px; color:#b6b6b8; line-height:1.8; }
.form-status.is-warning { color:#edc177; }.form-status.is-success { color:#6fe1c1; }
/* 動画モーダル */
.modal[hidden] { display:none; }.modal { position:fixed; inset:0; z-index:100; display:flex; justify-content:center; align-items:center; padding:20px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.89); }
.modal-panel { background:#141414; width:min(850px,100%); max-height:min(90vh,1000px); overflow:auto; z-index:1; box-shadow:0 24px 90px rgba(0,0,0,.65); }
.modal-topline { display:flex; justify-content:space-between; align-items:center; padding:11px 16px; color:#aaa; font-size:11px; letter-spacing:.1em; font-weight:800; }
.modal-close { appearance:none; background:transparent; color:#fff; border:0; font-size:30px; line-height:1; cursor:pointer; padding:0 5px; }
.modal-media { position:relative; aspect-ratio:16/9; overflow:hidden; background:#222; }
.modal-media iframe { border:0; width:100%; height:100%; display:block; }
.modal-media>.poster-art { height:100%; }
.modal-media .poster-main { font-size:clamp(36px,7vw,105px); }
.modal-placeholder { position:absolute; inset:0; background:rgba(0,0,0,.75); color:white; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; text-align:center; padding:25px; }
.modal-placeholder strong { font-size:25px; letter-spacing:.08em; }
.modal-placeholder span { font-size:13px; color:#d8d8d8; line-height:2; }
.modal-copy { padding:24px 26px 32px; }.modal-copy h2 { margin:0 0 12px; font-size:23px; }.modal-copy p { margin:0; color:#aaa; line-height:1.8; font-size:13px; }.modal-copy .modal-credit { margin-bottom:13px; color:#e79bd3; font-size:10px; letter-spacing:.06em; font-weight:800; }
body.modal-open { overflow:hidden; }
@media (max-width:850px) { .wrap { width:min(calc(100% - 44px),var(--max)); } .page-intro { padding-top:35px; } .intro-note { font-size:12px; } .inside-title { margin-bottom:60px; }.about-layout,.contact-layout { grid-template-columns:1fr; gap:40px; }.inside-main { padding-top:52px; padding-bottom:100px; }.about-lead { max-width:700px; } }
@media (max-width:620px) {
 .wrap { width:calc(100% - 36px); }
 .site-nav { min-height:70px; gap:10px; }.site-mark { font-size:12px; }.nav-links { gap:14px; }.nav-link { font-size:9px; letter-spacing:.04em; }
 .page-intro { padding-top:31px; }.intro-row { display:block; margin-top:20px; }.work-intro h1 { font-size:clamp(52px,15vw,85px); }.intro-note { margin-top:25px; margin-bottom:0; line-height:1.9; }
 .filter-bar { margin-top:31px; gap:1px; padding-bottom:10px; }.filter { font-size:10px; padding:10px 11px; }
 .works-section { padding-top:20px; padding-bottom:75px; }.works-grid { grid-template-columns:1fr; gap:35px; }.poster-main { font-size:clamp(36px,10vw,62px); }
 .work-card-meta { padding-top:12px; }.work-title { font-size:14px; }.work-category { font-size:9px; }
 .contact-teaser { padding:42px 0 60px; align-items:start; flex-direction:column; }.contact-teaser h2 { font-size:32px; }.outline-link { min-width:210px; }
 .site-footer { flex-direction:column; font-size:9px; padding:20px 0 22px; }
 .inside-title { font-size:clamp(65px,18vw,100px); margin:20px 0 55px; }.detail-block { grid-template-columns:45px minmax(0,1fr); }
 .modal { padding:10px; }.modal-copy { padding:18px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } .work-card:hover .hover-info { transform:none !important; } }