:root{--navy:#09265f;--blue:#0789f7;--blue-dark:#0874d8;--yellow:#ffe500;--pale:#edf7ff;--line:#d8e8f7;--text:#18386d;--muted:#6d83a9;--white:#fff;--radius:20px;--shadow:0 12px 34px rgba(45,105,158,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--navy);font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.8;background:#e9f6ff url('../img/bokeh-background.png') center top/cover fixed no-repeat;min-width:320px}img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.site-shell{width:100%;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}.skip-link{position:absolute;left:-9999px;top:0}.skip-link:focus{left:12px;top:12px;z-index:999;background:#fff;padding:10px}.site-header{min-height:96px;padding:18px 4.4%;display:flex;align-items:center;justify-content:space-between;gap:28px;background:rgba(255,255,255,.82);position:relative;z-index:20}.brand{display:flex;flex-direction:column;line-height:1.1;flex-shrink:0}.brand-name{font-size:32px;line-height:1;font-weight:900;letter-spacing:-1.3px}.brand-subtitle{font-size:12px;font-weight:700;margin-top:5px}.primary-navigation{display:flex;align-items:center;gap:clamp(22px,3vw,44px)}.primary-navigation a,.site-footer nav a{font-size:13px;font-weight:800;position:relative;padding:12px 0}.primary-navigation a:after{content:"";height:3px;position:absolute;bottom:0;left:0;right:0;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .2s}.primary-navigation a:hover:after,.primary-navigation a.current:after{transform:scaleX(1)}.primary-navigation a.current{color:var(--blue)}.menu-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}.menu-toggle span{display:block;width:25px;height:2px;background:var(--navy);margin:5px 0}
.hero{position:relative;isolation:isolate;overflow:hidden}.hero-home{min-height:455px;display:flex;align-items:center;padding:58px 5.2%;background:linear-gradient(100deg,rgba(222,244,255,.96),rgba(245,249,255,.74)),url('../img/bokeh-background.png') center/cover}.hero-home:after{content:"";position:absolute;z-index:-1;right:0;top:0;width:100%;height:100%;background:url('../img/bokeh-background.png') center/cover;opacity:.3}.hero-copy{max-width:610px}.eyebrow{margin:0 0 14px;color:var(--blue);font-size:15px;font-weight:900;letter-spacing:.08em}.hero h1,.about-intro h1{margin:0 0 20px;font-size:clamp(36px,4.2vw,58px);line-height:1.22;letter-spacing:.015em;font-weight:900}.hero-description{margin:0 0 26px;color:#2e5185;font-size:17px;line-height:1.9;letter-spacing:.02em}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:48px;padding:12px 25px;border:1px solid transparent;border-radius:999px;font-size:14px;font-weight:800;line-height:1.3;transition:transform .18s,box-shadow .18s,background .18s;cursor:pointer}.button:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(14,89,160,.14)}.button-yellow{background:var(--yellow);color:var(--navy);min-width:218px}.button-blue{background:var(--blue);color:#fff}.button-outline{border-color:#9bb8db;background:#fff;color:var(--navy)}.section{padding:42px 4.2%}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}.section-heading>div{display:flex;align-items:center;gap:20px}.section-heading h2{font-size:clamp(28px,3vw,38px);line-height:1.1;margin:0;font-weight:900;letter-spacing:-.035em}.section-heading span{font-size:13px;font-weight:800}.section-heading .button{min-height:44px;padding:10px 20px;font-size:12px}.section-heading.simple{justify-content:flex-start;margin-bottom:20px}.works-preview{padding-top:34px;padding-bottom:40px;background:#fff}.works-category-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.category-preview-card{min-height:155px;border:1px solid #e3edf7;background:linear-gradient(145deg,#f5fbff,#fff);border-radius:16px;padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;transition:transform .2s,box-shadow .2s}.category-preview-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.category-symbol{font-size:30px;color:var(--blue);line-height:1.1}.category-preview-card strong{font-size:16px}.category-preview-card small{font-size:12px;color:var(--muted);line-height:1.6}.empty-state{padding:34px 20px;text-align:center;border-radius:18px;background:#f0f8ff;color:var(--navy)}.empty-state h2,.empty-state p{margin:0 0 8px}.muted{color:var(--muted)}.about-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:38px;padding-top:26px;padding-bottom:48px}.about-preview-image{border-radius:18px;overflow:hidden;aspect-ratio:1.28;background:#e8f6ff}.about-preview-image img{width:100%;height:100%;object-fit:cover}.about-preview-copy h3{font-size:clamp(24px,2.4vw,32px);line-height:1.45;margin:4px 0 14px}.about-preview-copy p{font-size:14px;line-height:1.95;color:#45658e;margin:0 0 18px}.contact-band{margin:0 2.1% 20px;padding:24px 32px;display:grid;grid-template-columns:1fr 1.4fr auto;align-items:center;gap:24px;border-radius:22px;background:linear-gradient(105deg,#087ef0,#1297ff);color:#fff}.contact-band h2{font-size:clamp(27px,3vw,38px);line-height:1;margin:0;font-weight:900}.contact-band span{font-size:12px;font-weight:800}.contact-band p{font-size:14px;line-height:1.8;margin:0}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 3.2% 28px;background:rgba(255,255,255,.82)}.footer-brand .brand-name{font-size:25px}.footer-brand .brand-subtitle{font-size:11px}.site-footer nav{display:flex;gap:24px}.site-footer small{font-size:11px;color:#8b9db8}
/* About */
.inner-page{background:#fff}.about-intro{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:36px;padding-top:38px;padding-bottom:42px;background:linear-gradient(110deg,rgba(230,247,255,.92),rgba(255,255,255,.8))}.about-intro h1{font-size:clamp(30px,3.2vw,44px);margin-bottom:16px}.about-intro-copy>p:last-child{font-size:15px;color:#345783;line-height:1.95;margin:0}.about-intro-image{border-radius:18px;overflow:hidden;aspect-ratio:1.48;position:relative}.about-intro-image:before{content:"";position:absolute;right:0;top:0;width:74px;height:74px;border-radius:0 16px 0 24px;background:rgba(255,229,0,.45);pointer-events:none}.about-intro-image img{width:100%;height:100%;object-fit:cover}.profile-section{padding-top:28px;padding-bottom:22px}.profile-layout{display:grid;grid-template-columns:160px minmax(0,1fr) 250px;align-items:center;gap:28px}.profile-person{width:150px;height:150px;border-radius:0;background:transparent;display:flex;align-items:center;justify-content:center;overflow:visible}.profile-person img{display:block;height:100%;width:100%;object-fit:contain;object-position:center bottom;border-radius:0}.profile-list{margin:0}.profile-list>div{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid #dcebf7}.profile-list dt{width:max-content;min-width:68px;text-align:center;padding:2px 12px;background:var(--blue);border-radius:999px;color:#fff;font-size:12px;font-weight:800}.profile-list dd{margin:0;font-size:14px}.profile-side-image{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1.3}.profile-side-image img{width:100%;height:100%;object-fit:cover}.skills-section{padding-top:28px;padding-bottom:28px;background:#eef8ff;border-radius:18px;margin:0 3.2% 22px}.skills-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.skill-card{background:#fff;border-radius:16px;padding:18px 17px;min-height:165px}.skill-icon{font-size:30px;line-height:1.2;color:var(--blue)}.skill-card h3{font-size:16px;margin:6px 0 8px}.skill-card ul{list-style:none;padding-left:0;margin:0;color:#42628e;font-size:12px;line-height:1.9}.works-link-section{padding-top:20px;padding-bottom:40px}.empty-note{padding:20px;background:#f1f8ff;border-radius:12px;color:var(--muted)}
/* Works listing and individual */
.page-hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:28px;padding:42px 5%;background:linear-gradient(110deg,rgba(231,247,255,.96),rgba(255,255,255,.8));min-height:270px}.page-hero-copy h1{margin:0 0 12px;font-size:clamp(34px,4vw,48px);line-height:1.2}.page-hero-copy h1 span{font-size:.42em;margin-left:12px}.page-hero-copy>p:last-child{margin:0;color:#355886;font-size:15px;line-height:1.9}.page-hero img{width:100%;height:210px;object-fit:cover;border-radius:16px}.archive-work-list{padding-top:28px}.category-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}.filter-pill{border-radius:999px;padding:8px 20px;background:#eef6fc;font-size:13px;font-weight:800}.filter-pill.active,.filter-pill:hover{background:var(--blue);color:#fff}.works-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.work-card{border:1px solid #dfeaf5;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(31,78,126,.04);transition:transform .2s,box-shadow .2s}.work-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(31,78,126,.13)}.work-card-link{display:flex;height:100%;flex-direction:column}.work-card-image{aspect-ratio:1.45;background:linear-gradient(135deg,#e4f4ff,#f8fbff);display:flex;align-items:center;justify-content:center;overflow:hidden}.work-card-image img{width:100%;height:100%;object-fit:cover}.work-placeholder-icon{font-size:48px;color:var(--blue)}.work-card-content{padding:13px 14px 14px;display:flex;flex:1;flex-direction:column}.work-card h3{font-size:16px;line-height:1.45;margin:0 0 6px}.work-card p{font-size:12px;line-height:1.7;color:#4e6890;margin:0 0 12px}.work-card-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}.work-category-label{background:#edf5fc;border-radius:999px;padding:4px 10px;font-size:10px;font-weight:800}.round-arrow{width:34px;height:34px;display:grid;place-items:center;background:var(--yellow);border-radius:50%;font-size:19px;font-weight:900;color:var(--navy);flex-shrink:0}.pagination{margin-top:32px}.pagination .nav-links{display:flex;justify-content:center;gap:10px}.pagination a,.pagination span{padding:8px 14px;border:1px solid var(--line);border-radius:8px}.pagination .current{background:var(--blue);color:white}.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;padding:24px 4.5% 8px;color:#7387a8;font-size:12px}.breadcrumbs a{font-weight:800}.single-work-hero{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:38px;padding:28px 4.5% 42px}.category-badge{display:inline-block;background:#dff0ff;color:#1b609f;border-radius:999px;padding:5px 14px;font-size:12px;font-weight:800}.single-work-copy h1{font-size:clamp(32px,3.5vw,46px);line-height:1.25;margin:14px 0}.single-work-subtitle{font-size:17px;font-weight:700;margin:0;color:#355886}.single-work-image{background:#f4f9fd;border-radius:16px;overflow:hidden;min-height:220px;display:flex;align-items:center;justify-content:center}.single-work-image img{width:100%;height:auto;max-height:520px;object-fit:contain}.work-placeholder-large{min-height:260px;display:grid;place-items:center;color:var(--muted);font-weight:700}.work-meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 4.5%;margin:0 0 28px}.work-meta-item{padding-left:18px;border-left:4px solid var(--blue)}.work-meta-item h2{font-size:15px;margin:0 0 8px}.work-meta-item p{font-size:14px;margin:0;color:#45638e}.tool-tags{display:flex;flex-wrap:wrap;gap:6px}.tool-tags span{display:inline-block;padding:3px 10px;border-radius:999px;background:#edf5fc;font-size:11px}.single-work-description{padding:0 4.5% 30px}.entry-content{color:#244779;line-height:1.9}.entry-content img{max-width:100%;height:auto}.work-post-navigation{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:15px;padding:24px 4.5% 44px}.work-post-navigation>div:last-child{text-align:right}.work-post-navigation a{font-size:13px;font-weight:800}
/* Contact */
.contact-page-hero{min-height:280px}.contact-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:32px;padding-top:34px;padding-bottom:50px}.contact-form-panel,.contact-info-panel{border-radius:18px;background:#fff}.contact-form-panel{padding:24px 26px}.section-title-bar{font-size:25px;margin:0 0 24px;padding-left:14px;border-left:5px solid var(--blue);line-height:1.3}.contact-form{display:grid;gap:18px}.form-row{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:start;gap:16px}.form-row label{font-size:14px;font-weight:800;padding-top:10px}.required{display:inline-block;background:#f34d5d;color:white;border-radius:4px;padding:1px 6px;margin-left:6px;font-size:10px;vertical-align:2px}.form-row input,.form-row textarea{width:100%;border:1px solid #cbd8e7;border-radius:9px;background:#fff;padding:12px 14px;color:var(--navy);font-size:14px;outline:none}.form-row input:focus,.form-row textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(7,137,247,.12)}.form-row textarea{resize:vertical;min-height:120px}.form-submit{justify-self:center;min-width:270px;border:0}.form-footnote{font-size:12px;line-height:1.8;color:#61799d;margin:0}.honeypot{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}.contact-info-panel{background:#eef8ff;padding:32px;align-self:stretch}.contact-envelope{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--blue);font-size:32px;margin-bottom:16px}.contact-info-panel h2{font-size:21px;line-height:1.5;margin:0 0 12px}.contact-info-panel p{font-size:14px;line-height:1.9;margin:0}.contact-info-panel hr{border:0;border-top:1px solid #d7e8f7;margin:24px 0}.contact-info-panel .contact-caution{font-size:12px}.form-notice{padding:12px 16px;border-radius:10px;font-size:14px}.form-notice.success{background:#e5f8ed;color:#176a42}.form-notice.error{background:#fff0f0;color:#a22222}
@media(max-width:900px){.site-shell{width:100%;margin:0;border-radius:0}.site-header{min-height:78px;padding:16px 24px}.brand-name{font-size:28px}.primary-navigation{gap:20px}.hero-home{min-height:400px;padding:48px 5%}.works-category-preview,.works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-preview{gap:24px}.contact-band{grid-template-columns:1fr 1.4fr;gap:14px}.contact-band .button{grid-column:1/-1;justify-self:end}.site-footer{flex-wrap:wrap}.site-footer small{width:100%;text-align:right}.profile-layout{grid-template-columns:130px minmax(0,1fr)}.profile-person{width:125px;height:125px}.profile-side-image{display:none}.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.single-work-hero{gap:24px}.contact-layout{grid-template-columns:1fr}.contact-info-panel{padding:24px}}
@media(max-width:600px){body{background-attachment:scroll}.site-shell{width:100%;margin:0;border-radius:0;border:0;overflow:visible}.site-header{min-height:70px;padding:13px 18px}.brand-name{font-size:25px}.brand-subtitle{font-size:10px;margin-top:4px}.menu-toggle{display:block;position:relative;z-index:42}.primary-navigation{display:none;position:absolute;top:100%;left:0;right:0;padding:12px 18px 20px;background:rgba(255,255,255,.98);box-shadow:0 12px 18px rgba(24,64,110,.1);flex-direction:column;align-items:stretch;gap:0}.primary-navigation.is-open{display:flex}.primary-navigation a{padding:13px 6px;border-bottom:1px solid #edf3f9}.primary-navigation a:after{display:none}.hero-home{min-height:auto;padding:52px 22px 44px;background-position:center}.hero-home:after{opacity:.42}.hero h1{font-size:36px;line-height:1.25;margin-bottom:16px}.eyebrow{font-size:12px;margin-bottom:10px}.hero-description{font-size:14px;line-height:1.85;margin-bottom:22px}.button{min-height:44px;padding:11px 20px;font-size:13px;gap:14px}.button-yellow{min-width:190px}.section{padding:28px 18px}.section-heading{align-items:flex-start;gap:12px;margin-bottom:18px}.section-heading>div{gap:10px;flex-wrap:wrap}.section-heading h2{font-size:28px}.section-heading span{font-size:11px}.section-heading .button{font-size:10px;padding:9px 12px;gap:8px;min-height:38px}.works-preview{padding-top:28px;padding-bottom:30px}.works-category-preview{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.category-preview-card{padding:13px;min-height:125px;border-radius:13px}.category-symbol{font-size:24px}.category-preview-card strong{font-size:13px}.category-preview-card small{font-size:10px}.empty-state{padding:24px 14px;font-size:13px}.about-preview{grid-template-columns:1fr;gap:18px;padding-top:12px;padding-bottom:30px}.about-preview-image{aspect-ratio:1.5}.about-preview-copy h3{font-size:23px;margin:0 0 10px}.about-preview-copy p{font-size:12px;line-height:1.85}.contact-band{margin:0 12px 14px;padding:20px 18px;grid-template-columns:1fr;gap:10px;border-radius:16px}.contact-band h2{font-size:29px}.contact-band p{font-size:12px}.contact-band .button{grid-column:auto;justify-self:stretch;width:100%}.site-footer{padding:18px;gap:16px;display:grid;grid-template-columns:1fr auto}.site-footer nav{grid-column:1/-1;grid-row:2;gap:16px;flex-wrap:wrap}.site-footer nav a{font-size:11px}.site-footer small{grid-column:1/-1;text-align:left;font-size:10px}.footer-brand .brand-name{font-size:23px}
.about-intro{grid-template-columns:1fr;gap:18px;padding:30px 20px}.about-intro h1{font-size:29px;line-height:1.35;margin-bottom:12px}.about-intro-copy>p:last-child{font-size:13px;line-height:1.9}.about-intro-image{aspect-ratio:1.5;grid-row:2}.about-intro-image:before{width:50px;height:50px}.profile-section{padding:26px 18px 20px}.profile-layout{grid-template-columns:86px minmax(0,1fr);gap:12px}.profile-person{width:82px;height:82px}.profile-list>div{grid-template-columns:72px minmax(0,1fr);gap:6px;padding:5px 0}.profile-list dt{font-size:9px;min-width:0;padding:3px 5px}.profile-list dd{font-size:10px;line-height:1.5}.skills-section{margin:0 10px 18px;padding:18px 12px;border-radius:14px}.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.skill-card{min-height:100px;padding:12px 10px;border-radius:12px}.skill-icon{font-size:24px}.skill-card h3{font-size:12px;margin:4px 0}.skill-card ul{font-size:9px;line-height:1.7;padding-left:13px}.works-link-section{padding:22px 18px 30px}
.page-hero{grid-template-columns:1fr;gap:18px;padding:30px 20px;min-height:0}.page-hero-copy h1{font-size:34px}.page-hero-copy h1 span{font-size:.45em}.page-hero-copy>p:last-child{font-size:13px;line-height:1.85}.page-hero img{height:auto;aspect-ratio:1.7}.archive-work-list{padding-top:20px}.category-filters{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}.filter-pill{font-size:12px;padding:8px 15px}.works-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.work-card{border-radius:12px}.work-card-content{padding:10px}.work-card h3{font-size:12px}.work-card p{font-size:10px;line-height:1.55;margin-bottom:8px}.work-card-bottom{gap:4px}.work-category-label{font-size:9px;padding:3px 7px}.round-arrow{width:27px;height:27px;font-size:15px}.work-placeholder-icon{font-size:35px}.breadcrumbs{padding:18px 18px 4px;font-size:10px;gap:7px}.single-work-hero{grid-template-columns:1fr;gap:18px;padding:20px 18px 26px}.single-work-copy h1{font-size:30px;margin:10px 0}.single-work-subtitle{font-size:13px}.single-work-image{min-height:170px}.single-work-image img{max-height:none;width:100%;height:auto;object-fit:contain}.work-placeholder-large{min-height:180px;font-size:13px}.work-meta-grid{grid-template-columns:1fr;gap:15px;padding:20px 18px;margin-bottom:20px}.work-meta-item{padding-left:12px}.work-meta-item h2{font-size:13px}.work-meta-item p{font-size:12px}.single-work-description{padding:0 18px 20px}.work-post-navigation{grid-template-columns:1fr;gap:12px;padding:20px 18px 30px;text-align:center}.work-post-navigation>div:last-child{text-align:center}.work-post-navigation a{font-size:12px}
.contact-page-hero{padding-bottom:24px}.contact-layout{padding:18px 14px 30px;gap:14px}.contact-form-panel{padding:20px 14px}.section-title-bar{font-size:19px;margin-bottom:18px}.contact-form{gap:14px}.form-row{grid-template-columns:1fr;gap:6px}.form-row label{font-size:12px;padding-top:0}.form-row input,.form-row textarea{font-size:13px;padding:11px 12px}.form-row textarea{min-height:100px}.form-submit{width:100%;min-width:0}.form-footnote{font-size:10px}.contact-info-panel{padding:20px}.contact-envelope{width:50px;height:50px;font-size:26px}.contact-info-panel h2{font-size:17px}.contact-info-panel p{font-size:12px}.contact-info-panel hr{margin:18px 0}.contact-info-panel .contact-caution{font-size:11px}.desktop-only{display:none}}


/* === MARU portfolio layout refinements === */
html, body { width:100%; }
body { background-color:#e9f6ff; }
.site-header { width:100%; }
.site-footer { width:100%; position:relative; padding-right:clamp(18px,4.4vw,64px); padding-bottom:54px; }
.server-ad-slot { position:absolute; right:clamp(18px,4.4vw,64px); bottom:10px; min-width:1px; min-height:1px; text-align:right; z-index:2; }
/* XREA自動挿入広告がこの領域に出る場合に右下へ寄せるための基本指定 */
.server-ad-slot iframe, .server-ad-slot img { display:inline-block; max-width:100%; height:auto; }
/* WORKS / ABOUT / CONTACT のページ先頭エリアは同じ高さ・同じ余白基準 */
.page-hero, .about-intro.page-hero { min-height:300px; padding:36px 5%; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:28px; }
.page-hero img, .about-intro.page-hero .about-intro-image { width:100%; height:220px; aspect-ratio:auto; object-fit:cover; border-radius:16px; overflow:hidden; }
.about-intro.page-hero .about-intro-image img { width:100%; height:100%; object-fit:cover; }
.page-hero-copy, .about-intro-copy { min-width:0; }
.category-symbol { width:54px; height:54px; display:flex; align-items:center; justify-content:center; }
.category-symbol img, .skill-icon img { display:block; width:100%; height:100%; object-fit:contain; }
.skill-icon { width:34px; height:34px; display:block; }
.work-placeholder-image { width:56px; height:56px; object-fit:contain; }
@media(max-width:900px) {
  .page-hero, .about-intro.page-hero { min-height:280px; padding:30px 4%; gap:20px; }
  .page-hero img, .about-intro.page-hero .about-intro-image { height:190px; }
}
@media(max-width:600px) {
  .site-footer { padding:18px 18px 62px; }
  .server-ad-slot { right:18px; bottom:12px; }
  .page-hero, .about-intro.page-hero { min-height:0; grid-template-columns:1fr; gap:18px; padding:30px 20px; }
  .page-hero img, .about-intro.page-hero .about-intro-image { height:auto; aspect-ratio:1.7; grid-row:auto; }
  .about-intro.page-hero .about-intro-image img { height:100%; }
}


/* ===== Final coordinated hero and profile refinements ===== */

:root { --maru-hero-height: 420px; }
.hero-home,
.page-hero,
.about-intro.page-hero,
.works-page-hero,
.contact-page-hero {
  position: relative !important;
  isolation: isolate;
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: minmax(0, 52.5fr) minmax(0, 47.5fr) !important;
  align-items: center;
  gap: 0 !important;
  width: 100%;
  height: var(--maru-hero-height) !important;
  min-height: var(--maru-hero-height) !important;
  max-height: none;
  padding: 42px 0 42px 5.2% !important;
  overflow: hidden;
  border-radius: 0;
  background: url('../img/bokeh-background.png') center / cover no-repeat !important;
}
.hero-home { display: flex !important; align-items: center; }
.hero-home .hero-copy,
.page-hero-copy,
.about-intro-copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 28px 0 0;
}
.hero-home .hero-copy { width: 52.5%; padding-right: 28px; }
.hero-home::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0; right: 0; bottom: 0;
  width: 47.5%;
  background: url('../img/main.jpg') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 12%, rgba(0,0,0,.75) 38%, #000 58%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 12%, rgba(0,0,0,.75) 38%, #000 58%);
}
.hero-home::after { z-index: -1; }
.page-hero > img,
.about-intro.page-hero .about-intro-image {
  position: absolute !important;
  z-index: 0;
  top: 0; right: 0; bottom: 0;
  width: 47.5% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.page-hero > img {
  object-fit: cover !important;
  object-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 12%, rgba(0,0,0,.75) 38%, #000 58%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 12%, rgba(0,0,0,.75) 38%, #000 58%);
}
.about-intro.page-hero .about-intro-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center;
  border-radius: 0 !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 12%, rgba(0,0,0,.75) 38%, #000 58%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 12%, rgba(0,0,0,.75) 38%, #000 58%);
}
.page-hero::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(235,248,255,.25) 0%, rgba(235,248,255,.08) 48%, transparent 75%);
}
.page-hero-copy h1,
.about-intro-copy h1 {
  font-size: clamp(30px, 2.8vw, 42px) !important;
  line-height: 1.28 !important;
  letter-spacing: .01em;
  overflow-wrap: normal;
  word-break: keep-all;
}
.about-intro-copy h1 { max-width: 100%; }
.about-intro-copy h1 br { display: block; }
.about-intro-copy .eyebrow { margin-bottom: 14px; }
.about-intro-copy > p:last-child { max-width: 100%; }
.hero-home h1 { font-size: clamp(34px, 3.2vw, 48px); }
.works-page-hero > img { object-position: 62% center; transform-origin: right center; }
.works-page-hero > img { transform: scale(1.16); }
.contact-page-hero > img { object-position: center; }

/* HOME's ABOUT preview image: use about.png, with a 390px desktop height cap. */
.about-preview-image { height: 390px; max-height: 390px; aspect-ratio: auto !important; }
.about-preview-image img { width: 100%; height: 100%; object-fit: cover; }

/* ABOUT profile skills: center the four Material Icons in a 40px-tall icon area. */
.skills-grid .skill-card { text-align: center; }
.skills-grid .skill-icon.material-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px !important;
  min-height: 40px;
  margin: 0 auto 12px;
  color: var(--blue, #168df5);
  font-family: 'Material Icons' !important;
  font-size: 32px !important;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
.profile-person img { background: transparent !important; object-fit: contain; }
.profile-side-image img { object-position: center; }

@media (max-width: 900px) {
  :root { --maru-hero-height: 390px; }
  .hero-home,
  .page-hero,
  .about-intro.page-hero,
  .works-page-hero,
  .contact-page-hero {
    height: var(--maru-hero-height) !important;
    min-height: var(--maru-hero-height) !important;
    padding: 30px 0 30px 5% !important;
  }
  .hero-home .hero-copy { width: 52.5%; padding-right: 18px; }
  .hero-home::before,
  .page-hero > img,
  .about-intro.page-hero .about-intro-image,
  .about-intro.page-hero .about-intro-image img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.2) 10%, #000 52%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.2) 10%, #000 52%);
  }
  .page-hero-copy h1, .about-intro-copy h1 { font-size: clamp(27px, 3.5vw, 34px) !important; }
  .about-preview-image { height: 390px; max-height: 390px; }
}
@media (max-width: 600px) {
  :root { --maru-hero-height: 390px; }
  .hero-home,
  .page-hero,
  .about-intro.page-hero,
  .works-page-hero,
  .contact-page-hero {
    display: block !important;
    height: var(--maru-hero-height) !important;
    min-height: var(--maru-hero-height) !important;
    padding: 28px 20px !important;
  }
  .hero-home .hero-copy,
  .page-hero-copy,
  .about-intro-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  .hero-home::before,
  .page-hero > img,
  .about-intro.page-hero .about-intro-image {
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: .58;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.8) 38%, rgba(0,0,0,.12) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.8) 38%, rgba(0,0,0,.12) 100%);
  }
  .about-intro.page-hero .about-intro-image img {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.8) 38%, rgba(0,0,0,.12) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.8) 38%, rgba(0,0,0,.12) 100%);
  }
  .page-hero::before { background: linear-gradient(0deg, rgba(235,248,255,.86), rgba(235,248,255,.32)); }
  .about-intro-copy h1 { font-size: clamp(26px, 7vw, 32px) !important; line-height: 1.3 !important; }
  .about-intro-copy h1 br { display: block; }
  .about-preview-image { height: 390px; max-height: 390px; }
}


/* ===== WORK個別ページ：読みやすさ・ナビゲーション・画像拡大 ===== */
.work-meta-item h2 {
  color: #173d70 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.5;
}
.work-meta-item p {
  color: #183f70 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.8;
}
.work-meta-item .tool-tags span {
  color: #174879 !important;
  background: #e4f4ff !important;
  border: 1px solid #b9e2fb;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 700;
}
.work-post-navigation {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 16px;
  padding: 28px 4.5% 48px;
}
.work-post-navigation .work-post-nav-side { min-width: 0; }
.work-post-navigation .work-post-nav-next { text-align: right; }
.work-post-navigation .work-post-nav-side a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid #62bde9;
  border-radius: 999px;
  background: #55b8e8;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(43,151,207,.16);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.work-post-navigation .work-post-nav-side a:hover {
  background: #299fd9;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(43,151,207,.24);
}
.work-post-navigation .work-post-nav-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.work-image-lightbox-trigger {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}
.work-image-lightbox-trigger .work-featured-image {
  display: block;
  width: 100%;
  max-height: 520px;
  height: auto;
  object-fit: contain;
  transition: transform .2s ease;
}
.work-image-lightbox-trigger:hover .work-featured-image { transform: scale(1.012); }
.image-zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(8,45,100,.8);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  transition: opacity .2s ease;
}
.work-image-lightbox-trigger:hover .image-zoom-hint,
.work-image-lightbox-trigger:focus-visible .image-zoom-hint { opacity: 1; }
.work-lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 6vh 6vw; background: rgba(5,17,37,.92); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; overflow: hidden; }
.work-lightbox.is-open { opacity: 1; visibility: visible; }
.work-lightbox-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.work-lightbox-image { display: block; max-width: 88vw; max-height: 84vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 18px 60px rgba(0,0,0,.3); transform: translate(0,0) scale(1); transform-origin: center center; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.work-lightbox-image.is-zoomed { cursor: grab; }
.work-lightbox-image.is-dragging { cursor: grabbing; }
.work-lightbox-close { position: absolute; top: 18px; right: 22px; z-index: 3; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.work-lightbox-close:hover { background: rgba(255,255,255,.28); }
.work-lightbox-tools { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(9,29,57,.76); color: #fff; backdrop-filter: blur(8px); }
.work-lightbox-tools button { display: grid; place-items: center; min-width: 38px; height: 36px; padding: 0 9px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: 19px; line-height: 1; cursor: pointer; }
.work-lightbox-tools button:hover { background: rgba(255,255,255,.28); }
.work-lightbox-zoom-level { min-width: 52px; text-align: center; font-size: 12px; font-weight: 700; }
body.lightbox-open { overflow: hidden; }

@media (max-width: 600px) {
  .work-meta-item h2 { font-size: 14px !important; }
  .work-meta-item p { font-size: 14px !important; }
  .work-post-navigation {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 18px 32px;
  }
  .work-post-navigation .work-post-nav-prev,
  .work-post-navigation .work-post-nav-next { text-align: center; }
  .work-post-navigation .work-post-nav-side a,
  .work-post-navigation .work-post-nav-index {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    font-size: 13px;
  }
  .work-lightbox { padding: 7vh 3vw 10vh; }
  .work-lightbox-image { max-width: 94vw; max-height: 78vh; }
  .work-lightbox-close { top: 10px; right: 10px; width: 42px; height: 42px; font-size: 29px; }
  .work-lightbox-tools { bottom: 12px; gap: 6px; padding: 6px 9px; }
  .work-lightbox-tools button { min-width: 34px; height: 34px; font-size: 17px; }
}