/*
Theme Name: JIMA DESIGN
Description: JIMA DESIGN custom portfolio theme
Version: 2.4.0
Author: JIMA DESIGN
*/
:root{--bg:#fff;--fg:#111;--muted:#777;--line:#ddd;--pad:24px;--gap:16px}
*{box-sizing:border-box}
html{margin:0;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Helvetica Neue",Arial,"Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;font-size:13px;line-height:1.5}
a{color:inherit;text-decoration:none}
.site-header{position:fixed;z-index:50;top:0;left:0;right:0;padding:38px var(--pad) 28px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.94)}
.site-brand{display:block;line-height:0;order:2}
.site-brand img{display:block;width:180px;height:auto;max-height:none;object-fit:contain;object-position:left center}
.site-nav{display:flex;align-items:center;gap:20px;font-size:12px;order:1}
.header-category{display:flex;align-items:center;gap:5px;font-size:12px;cursor:pointer}
.header-category select{border:0;background:transparent;color:inherit;font:inherit;font-size:12px;padding:0 14px 0 0;cursor:pointer;appearance:auto}
.header-category select:focus{outline:none}
.site-main{padding:138px var(--pad) 60px}
.index-tools{display:flex;justify-content:space-between;align-items:center;margin:0 0 18px}
.category-select{position:relative;display:inline-flex;align-items:center}
.category-select select{appearance:none;-webkit-appearance:none;border:0;background:#fff;color:#111;padding:4px 20px 4px 0;margin:0;font:inherit;font-size:12px;line-height:1.4;cursor:pointer;outline:none}
.category-select:after{content:"";position:absolute;right:2px;top:50%;width:5px;height:5px;border-right:1px solid #111;border-bottom:1px solid #111;transform:translateY(-65%) rotate(45deg);pointer-events:none}
.category-select select:focus-visible{outline:1px solid #111;outline-offset:3px}
.category-select{position:relative;display:inline-flex;align-items:center}
.category-select select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--fg);font:inherit;font-size:12px;padding:2px 18px 2px 0;cursor:pointer;outline:none}
.category-select:after{content:"⌄";position:absolute;right:2px;top:50%;transform:translateY(-55%);pointer-events:none;font-size:11px}
.project-card[hidden]{display:none}
.intro-overlay{position:fixed;inset:0;z-index:9999;background:#fff;display:flex;align-items:center;justify-content:center;opacity:1;visibility:visible;transition:opacity 1.8s ease,visibility 0s linear 1.8s}
.intro-overlay img{display:block;width:120px;height:auto;opacity:0;animation:intro-logo-in .9s ease forwards}
.intro-overlay.is-hidden{opacity:0;visibility:hidden}
@keyframes intro-logo-in{from{opacity:0}to{opacity:1}}
@media(max-width:800px){.intro-overlay img{width:100px}}
@media(prefers-reduced-motion:reduce){.intro-overlay{transition:none}.intro-overlay img{animation:none;opacity:1}}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:82%;max-width:1160px;margin:0 auto}
.project-card{min-width:0}
.project-card img{display:block;width:100%;aspect-ratio:1 / 1;height:auto;object-fit:cover;background:#f2f2f2}
.project-meta{padding:8px 0 24px;display:flex;justify-content:space-between;gap:10px;font-size:11px}
.project-meta .cat{color:var(--muted)}
.project-single{max-width:1280px;margin:0 auto}
.project-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:30px}
.project-title{font-size:16px;font-weight:500;margin:0}
.project-info{font-size:11px;color:var(--muted);text-align:right}
.project-content{font-size:13px}
.project-content img{display:block;width:100%;height:auto;margin:0 0 18px}
.page-wrap{max-width:900px;margin:0 auto;padding:110px 0 70px}
.page-wrap h1{font-size:18px;font-weight:500;margin:0 0 35px}
.page-wrap p{max-width:700px}
.site-footer{padding:30px var(--pad);display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.empty{padding:40px 0;color:var(--muted)}
@media(max-width:800px){
 :root{--gap:10px}
 .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:none;margin:0}
 .site-header{padding:28px 15px 20px}
 .site-brand img{width:140px;max-height:none}
 .site-main{padding:92px 15px 28px}
 .site-nav{gap:12px;font-size:11px;flex-wrap:wrap}
 .header-category,.header-category select{font-size:11px}
 .category-select select{font-size:11px}
 .project-meta{padding:6px 0 18px;font-size:10px}
 .project-single{width:100%}
 .project-content img{margin-bottom:10px}
 .page-wrap{padding:90px 15px 50px}
}
@media(max-width:380px){
 .site-brand img{width:120px}
 .site-nav{gap:9px;font-size:10px}
}

/* ABOUT / CONTACT */
.about-page{max-width:1160px}
.about-intro{display:grid;grid-template-columns:1fr 2fr;gap:40px}
.about-intro h1{margin:0;font-size:16px;font-weight:500}
.about-copy{font-size:13px}
.about-copy p{margin:0 0 12px;max-width:none}
.about-copy .about-name{font-size:16px;margin-bottom:18px}
.about-contact{margin-top:110px;display:grid;grid-template-columns:1fr 2fr;gap:40px}
.about-contact-info{display:flex;flex-direction:column;gap:35px}
.about-contact-info p{margin:8px 0 0}
.about-label{font-size:11px;color:var(--muted);letter-spacing:.03em}
.contact-form{max-width:700px}
.contact-form label{display:block;margin:0 0 22px}
.contact-form label span{display:block;font-size:11px;margin-bottom:7px}
.contact-form input,.contact-form textarea{display:block;width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:8px 0;background:transparent;color:var(--fg);font:inherit;outline:none}
.contact-form textarea{resize:vertical;min-height:130px;border:1px solid var(--line);padding:10px}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--fg)}
.contact-form button{border:1px solid var(--fg);background:#fff;color:var(--fg);padding:10px 28px;font:inherit;font-size:11px;cursor:pointer}
.contact-message{margin:0 0 24px;font-size:12px}
@media(max-width:800px){
 .about-intro,.about-contact{grid-template-columns:1fr;gap:25px}
 .about-contact{margin-top:70px}
 .about-contact-info{gap:25px}
}