@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root { --ink:#17161d; --paper:#f8f3df; --orange:#ff7a16; --yellow:#ffd940; --mint:#65d5bd; --violet:#8570ba; --red:#fa5266; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--paper); background:var(--ink); font-family:"Noto Sans JP", sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:76px; width:min(1180px,calc(100% - 36px)); margin:auto; display:flex; align-items:center; justify-content:space-between; }
.logo, h1, h2, .big-card strong, .link-card { font-family:"Noto Sans JP", sans-serif; font-weight:900; letter-spacing:.04em; }
.logo { font-size:1.6rem; transform:rotate(-3deg); } .logo span { color:var(--yellow); }
nav { display:flex; gap:22px; font-family:"Noto Sans JP",sans-serif; font-weight:700; font-size:.85rem; } nav a:hover { color:var(--yellow); }
.hero { position:relative; overflow:hidden; max-width:1440px; aspect-ratio:2088 / 1488; margin:0 auto; background:var(--yellow); }
.hero img { width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
.hero-logo { position:absolute!important; z-index:2; top:auto; right:5%; bottom:6%; left:auto; width:clamp(290px,38vw,590px)!important; height:auto!important; object-fit:contain!important; filter:drop-shadow(4px 5px 0 rgba(23,22,29,.58)); }
.profile { width:min(900px,calc(100% - 36px)); margin:72px auto -8px; display:flex; align-items:center; justify-content:center; gap:28px; }.profile img { width:136px; height:136px; flex:none; border-radius:50%; object-fit:cover; }.profile-text h2 { margin:0 0 5px; font-size:clamp(1.35rem,2.8vw,2rem); line-height:1; }.profile-text p { margin:0; font-size:clamp(1.1rem,2.2vw,1.6rem); font-weight:400; letter-spacing:.04em; }
.section-heading p { font-family:"Noto Sans JP",sans-serif; font-weight:700; color:var(--yellow); font-size:.9rem; letter-spacing:.16em; margin:0 0 8px; }
h1 { margin:0; font-size:clamp(2.6rem,6vw,5.7rem); line-height:.86; }
.section { width:min(1120px,calc(100% - 36px)); margin:0 auto; padding:94px 0 0; }
.inner-page { width:min(1120px,calc(100% - 36px)); min-height:calc(100vh - 153px); margin:0 auto; padding:88px 0 100px; }
.links .section-heading, .news .section-heading { text-align:center; }
.links .link-grid { padding-top:28px; border-top:3px solid var(--paper); }
.mutual-links .section-heading { text-align:center; }.mutual-list { min-height:92px; padding:20px 8px 26px; border-top:3px solid var(--paper); text-align:center; }.mutual-list p { margin:0; color:#f8f3df99; }.mutual-note { margin-bottom:12px!important; color:var(--paper)!important; font-size:1rem; }.mutual-banner { display:inline-block; line-height:0; }.mutual-banner img { width:200px; max-width:100%; height:auto; }.mutual-banner:hover img { outline:2px solid var(--yellow); outline-offset:3px; }.own-banner { margin-top:50px; }.own-banner img { display:block; width:200px; max-width:100%; height:auto; margin:0 auto 9px; }.own-banner p { color:var(--paper); font-size:.9rem; }.own-banner p:first-child { margin-bottom:12px; }
.contact .section-heading { text-align:center; }.contact-form { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; padding-top:28px; border-top:3px solid var(--paper); }.contact-form label { display:grid; gap:7px; font-size:.82rem; }.contact-form input,.contact-form textarea { width:100%; padding:12px; border:2px solid var(--paper); border-radius:0; color:var(--ink); background:var(--paper); font:inherit; }.contact-form input:focus,.contact-form textarea:focus { outline:3px solid var(--yellow); outline-offset:2px; }.contact-message { grid-column:span 2; }.contact-form button { justify-self:center; grid-column:span 2; width:max-content; padding:13px 20px; border:3px solid var(--paper); border-radius:0; color:var(--ink); background:var(--yellow); cursor:pointer; font:inherit; font-weight:900; }.contact-form button:hover { background:var(--orange); }
.section-heading { margin-bottom:28px; }.section-heading h2 { margin:0; color:var(--paper); font-size:clamp(2.5rem,5vw,4.5rem); line-height:.8; letter-spacing:.02em; }
.link-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.link-card { position:relative; isolation:isolate; min-height:128px; display:flex; justify-content:space-between; align-items:end; padding:16px 15px; font-size:1.25rem; border:0; overflow:visible; background:transparent; transition:transform .18s ease; }
.link-card > :not(.banner-background):not(.banner-character) { position:relative; z-index:2; }.twitter::before, .misskey::before, .xfolio::before, .unityroom::before { display:none; }
.link-card .banner-character { transform:scale(1.1); transform-origin:center bottom; }
.link-card:hover,.big-card:hover { transform:translate(-5px,-5px); }.link-card::before { content:""; position:absolute; z-index:0; inset:auto 0 0; height:50%; border:4px solid var(--paper); background:var(--banner-color); }.link-card::after { content:""; position:absolute; z-index:3; right:0; bottom:0; left:0; height:0; border-bottom:4px solid var(--paper); pointer-events:none; }.link-card .banner-background { top:auto; height:50%; border:4px solid var(--paper); }.xfolio-background { background:var(--orange); }.unityroom-background { background:#3971da; }.link-card .link-label { -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; }.twitter { --banner-color:var(--violet); }.misskey { --banner-color:#4d9b72; }.xfolio { --banner-color:var(--orange); }.unityroom { --banner-color:#3971da; }
.shortcuts { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }.big-card { min-height:260px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:end; padding:28px 28px 21px; border:4px solid var(--paper); transition:transform .18s ease; }.big-card::before { content:"★ ★ ★"; position:absolute; right:-24px; top:19px; color:#fff5; font-size:5rem; transform:rotate(15deg); }.big-card span { font-family:"Noto Sans JP",sans-serif; font-weight:700; font-size:.85rem; }.big-card strong { font-size:clamp(2.6rem,5vw,4.6rem); line-height:.9; }.news-card { background:var(--red); }.gallery-card { background:#8056bd; }
.big-card > :not(.banner-background):not(.banner-character) { position:relative; z-index:2; }.banner-background, .banner-character { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }.banner-background { z-index:0; }.banner-character { z-index:1; }.news-card { background:var(--red); }.news-card::before { display:none; }
.news-card strong { -webkit-text-stroke:4px var(--ink); paint-order:stroke fill; }
.gallery-card strong { -webkit-text-stroke:4px var(--ink); paint-order:stroke fill; }
.effect-clip { position:absolute!important; z-index:1!important; right:4px; bottom:4px; left:4px; height:calc(var(--banner-base-height) - 8px); overflow:hidden; pointer-events:none; }.banner-effect { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; opacity:0; transition:opacity .18s ease; }.news-card .banner-effect { transform:translateY(10px) scale(1.14); transform-origin:center; }.gallery-card .banner-effect { transform:translateY(-5px) scale(1.14); transform-origin:center; }.news-card .banner-character, .gallery-card .banner-character { z-index:2; }
.big-card { --banner-base-height:50%; overflow:visible; isolation:isolate; border:0; background:transparent; }.big-card::before { z-index:1; }.big-card .banner-background { top:auto; height:var(--banner-base-height); border:4px solid var(--paper); }.gallery-card::before { display:none; }.front-edge { position:absolute!important; z-index:3!important; right:0; bottom:0; left:0; height:0; border-bottom:4px solid var(--paper); }
.news-list { border-top:3px solid var(--paper); }.news-item { border-bottom:1px solid #f8f3df88; }.news-summary { width:100%; min-height:70px; display:flex; align-items:center; gap:30px; padding:14px 8px; border:0; color:inherit; background:transparent; text-align:left; font:inherit; cursor:pointer; }.news-summary:hover { color:var(--yellow); }.news-summary time { width:115px; flex:none; color:var(--yellow); font-family:"Noto Sans JP",sans-serif; font-weight:700; }.news-summary b { flex:none; padding:4px 8px; background:var(--orange); color:var(--ink); font-family:"Noto Sans JP",sans-serif; font-weight:900; font-size:.75rem; }.news-status-placeholder { width:43px; flex:none; }.news-summary::after { content:"＋"; margin-left:auto; color:var(--yellow); font-size:1.5rem; }.news-summary[aria-expanded="true"]::after { content:"−"; }.news-summary.no-detail { cursor:default; }.news-summary.no-detail::after { content:""; }.news-detail { padding:0 8px 20px 226px; color:#f8f3dfcc; }.news-detail p { margin:0; }
.news .news-list article { display:flex; align-items:center; gap:30px; min-height:70px; padding:14px 8px; border-bottom:1px solid #f8f3df88; }.news .news-list time { width:115px; flex:none; color:var(--yellow); font-family:"Noto Sans JP",sans-serif; font-weight:700; }.news .news-list p { flex:1; min-width:0; margin:0; text-align:left; }.news .news-list b { flex:none; padding:4px 8px; background:var(--orange); color:var(--ink); font-family:"Noto Sans JP",sans-serif; font-weight:900; font-size:.75rem; }
.gallery { padding-bottom:100px; }.gallery-page > .section-heading { margin-bottom:36px; padding-bottom:28px; border-bottom:3px solid var(--paper); }.art-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }.art-grid > * { min-height:315px; position:relative; overflow:hidden; border:3px solid var(--paper); background:#31303b; }.art-item { display:block; cursor:zoom-in; }.art-item:hover { outline:3px solid var(--yellow); outline-offset:3px; }.art-grid img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }.art-placeholder,.art-placeholder.alt,.art-placeholder.warm { background:#050505!important; }
.gallery-group + .gallery-group { margin-top:72px; }.gallery-group-title { margin:0 0 17px; color:var(--paper); font-size:clamp(1.35rem,2.5vw,1.8rem); font-weight:500; line-height:1.2; }
.lightbox { position:fixed; z-index:10; inset:0; display:none; place-items:center; align-content:center; gap:14px; padding:5vw; background:rgba(0,0,0,.9); cursor:zoom-out; }.lightbox.is-open { display:grid; }.lightbox img { max-width:100%; max-height:78vh; object-fit:contain; cursor:default; }.lightbox-caption { max-width:min(720px,100%); margin:0; color:var(--paper); text-align:center; cursor:default; }.lightbox-close { position:absolute; top:20px; right:25px; width:45px; height:45px; padding:0; border:0; background:transparent; color:var(--paper); cursor:pointer; font-size:2.7rem; line-height:1; }
footer { display:flex; justify-content:space-between; gap:18px; padding:22px max(18px,calc((100% - 1120px)/2)); background:var(--orange); color:var(--ink); font-family:"Noto Sans JP",sans-serif; font-weight:700; font-size:.83rem; } footer p { margin:0; }
@media (hover: hover) { .link-card::before, .link-card .banner-background, .big-card .banner-background { filter:grayscale(100%); transition:filter .18s ease; }.link-card:hover::before, .link-card:focus-visible::before, .link-card:hover .banner-background, .link-card:focus-visible .banner-background, .big-card:hover .banner-background, .big-card:focus-visible .banner-background { filter:grayscale(0%); }.news-card:hover .banner-effect, .news-card:focus-visible .banner-effect, .gallery-card:hover .banner-effect, .gallery-card:focus-visible .banner-effect { opacity:1; } }
@media (min-width:621px) and (max-width:900px) { .link-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px) { .site-header { height:63px; }.logo { font-size:1.25rem; } nav { gap:11px; font-size:.66rem; }.hero-logo { top:auto!important; right:5%!important; bottom:5%!important; left:auto!important; width:38vw!important; }.profile { margin-top:46px; gap:18px; justify-content:center; }.profile img { width:92px; height:92px; }.profile p { font-size:1rem; }.section { padding-top:66px; }.link-grid { grid-template-columns:repeat(2,1fr); }.shortcuts { grid-template-columns:1fr; }.link-card { min-height:134px; }.banner-character { object-fit:contain; }.big-card { min-height:200px; }.contact-form { grid-template-columns:1fr; }.contact-message,.contact-form button { grid-column:auto; }.news-list article { gap:12px; flex-wrap:wrap; }.news-list time { width:auto; }.news-list p { width:100%; }.news-list b { position:absolute; right:14px; }.news-list article { position:relative; }.art-grid { display:flex; overflow-x:auto; padding-bottom:12px; scroll-snap-type:x mandatory; scrollbar-width:thin; }.art-grid > * { flex:0 0 78vw; min-height:260px; scroll-snap-align:start; }.art-placeholder:last-child { grid-column:auto; }.art-placeholder span { font-size:1.5rem; } }
@media(max-width:620px) { .news-summary b, .news .news-list b { position:static; right:auto; } }
@media(max-width:620px) { .news .news-list article { flex-wrap:nowrap; }.news .news-list p { width:auto; } }
@media(max-width:620px) { .news-detail { padding-left:81px; } }
@media(max-width:620px) { .mutual-banner img { width:44vw; } }

.contact .section-heading { text-align:center; }
.contact-form-embed { padding-top:28px; border-top:3px solid var(--paper); }
.contact-form-embed iframe { display:block; width:100%; min-height:820px; border:0; background:#fff; }
@media(max-width:620px) { .contact-form-embed iframe { min-height:900px; } }

.contact-link { margin:34px 0 0; text-align:center; }
.contact-link a { display:inline-block; padding:10px 18px; border:2px solid var(--paper); color:var(--paper); font-weight:700; }
.contact-link a:hover,.contact-link a:focus-visible { border-color:var(--yellow); color:var(--ink); background:var(--yellow); }
@media(max-width:620px){.banner-character{transform:translateY(8px)}.link-card .banner-character{transform:translateY(8px) scale(1.1)}}
@media(max-width:620px){.banner-character{transform:translateY(10px)}.link-card .banner-character{transform:translateY(25px) scale(1.1)}}