@charset "UTF-8";
:root{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-synthesis:none;color:#70554b;background:#fffaf2;--accent:#a86543;--muted:#9b8678;--line:#eaddcd}
*{box-sizing:border-box}body{margin:0;font-size:14px}button,input{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}h2,p{margin:0}a,button,input{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}[hidden]{display:none!important}.wrap{width:min(1120px,calc(100% - 64px));margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-60px;left:10px;padding:12px;background:white;z-index:10}.skip-link:focus{top:10px}.prototype-bar{display:flex;align-items:center;gap:3px;padding:10px 24px;font-size:10px;color:#9a887a;border-bottom:1px solid #eee5d9}.prototype-bar a{padding:3px 11px;border-radius:4px}.prototype-bar a[aria-current]{background:#eee2d2;color:#70554b}.prototype-bar a:first-child{margin-right:8px}.prototype-bar>span{margin-left:auto;font-size:9px}.controls{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:25px}.filter-tabs{display:flex;gap:6px}.filter-tabs button{font-size:12px;padding:10px 19px;border-radius:30px;min-height:40px}.filter-tabs button[aria-pressed=true]{background:#eedcca;color:#795037}.filter-tabs button:hover{background:#f1e6d7}.search{display:flex;align-items:center;gap:9px;color:var(--muted);width:180px;border-bottom:1px solid var(--line);padding:5px 0}.search svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0}.search input{background:none;border:0;width:100%;min-width:0;min-height:30px;font-size:11px;outline-offset:0}.search input::placeholder{color:var(--muted)}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}.game-card{min-width:0}.game-open{padding:0;display:block;text-align:left;width:100%;border-radius:14px}.thumbnail{overflow:hidden;border-radius:14px;background:#e7e5d9}.thumbnail img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;transition:transform .25s}.game-open:hover .thumbnail img{transform:scale(1.025)}.card-caption{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 2px 0}.card-caption h2{font-size:14px;line-height:1.6;font-weight:600}.platform{color:var(--muted);font-size:9px;white-space:nowrap;font-weight:400}.empty-state{text-align:center;padding:70px 15px;color:var(--muted);font-size:12px}.empty-state button{margin-top:15px;text-decoration:underline;text-underline-offset:4px;min-height:40px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:24px;padding:10px 14px 10px 22px;border:1px solid #d9c9b8;border-radius:12px;background:#fffdf6;box-shadow:0 4px 25px #70554b15;color:#70554b;font-size:12px;z-index:20;max-width:calc(100% - 32px);white-space:nowrap}.toast button{font-size:24px;width:34px;height:34px;line-height:1}.ad-slot{min-height:100px}
/* A: 温かい色、丸いカード。 */
body[data-design=a] .game-open{background:#fffdf8;box-shadow:0 3px 15px #7a513707;padding-bottom:15px;overflow:hidden}body[data-design=a] .thumbnail{border-radius:14px 14px 0 0}body[data-design=a] .card-caption{padding-inline:15px}
/* B: 白いギャラリー、大きな作品画像。 */
body[data-design=b]{background:#fff;--accent:#668477;--muted:#89908b;--line:#e6eae5;color:#5f6a60}body[data-design=b] .prototype-bar{border-color:#eceee9}body[data-design=b] .prototype-bar a[aria-current]{background:#eaf0e8;color:#5f7669}body[data-design=b] .controls{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:32px}body[data-design=b] .filter-tabs button{border-radius:0;padding-inline:10px;margin-right:16px}body[data-design=b] .filter-tabs button[aria-pressed=true]{background:none;border-bottom:1px solid #71947b}body[data-design=b] .filter-tabs button:hover{background:#f6f8f4}body[data-design=b] .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 36px}body[data-design=b] .thumbnail,body[data-design=b] .game-open{border-radius:0}body[data-design=b] .card-caption{padding-top:15px}body[data-design=b] .card-caption h2{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:17px;font-weight:500}
/* C: パステルの小さなゲーム棚。 */
body[data-design=c]{background:#fcf9ff;--accent:#9473ac;--muted:#9b89a6;--line:#e7dced;color:#766082}body[data-design=c] .prototype-bar{border-color:#e9dfef}body[data-design=c] .prototype-bar a[aria-current]{background:#e9dcf5;color:#775c8c}body[data-design=c] .filter-tabs button{border:1px solid #e1d4eb;border-radius:7px;background:#fffdfd;padding:8px 19px}body[data-design=c] .filter-tabs button[aria-pressed=true]{background:#eee0fb;border-color:#c9b1dc;box-shadow:2px 2px 0 #d2bedf}body[data-design=c] .game-grid{gap:28px 25px}body[data-design=c] .game-open{background:#fffefb;border:1px solid #d1bddc;box-shadow:4px 4px 0 #e5d8ee;overflow:hidden;border-radius:9px;padding-bottom:13px}body[data-design=c] .thumbnail{border-radius:8px 8px 0 0;border-bottom:1px solid #d1bddc}body[data-design=c] .card-caption{padding-inline:13px}body[data-design=c] .platform{background:#f3eafa;padding:1px 6px;border-radius:4px}body[data-design=c] .game-card:nth-child(3n+2) .platform{background:#fff0d0;color:#9b8053}body[data-design=c] .game-card:nth-child(3n) .platform{background:#e7f2ec;color:#73947f}
@media(min-width:1500px){.wrap{width:min(1240px,calc(100% - 96px))}}
@media(max-width:850px){.wrap{width:calc(100% - 40px)}.game-grid{gap:25px 18px}.card-caption{gap:5px}.card-caption h2{font-size:12px}.platform{font-size:8px}body[data-design=b] .game-grid{gap:32px 25px}body[data-design=c] .game-grid{gap:25px 18px}}
@media(max-width:600px){.wrap{width:calc(100% - 32px)}.prototype-bar{padding:7px 15px;font-size:9px}.prototype-bar a{padding:3px 10px}.controls{gap:12px;flex-wrap:wrap;margin-bottom:20px}.filter-tabs{gap:3px}.filter-tabs button{font-size:11px;padding:8px 15px;min-height:38px}.search{width:118px;gap:5px;padding-block:3px}.search input{font-size:10px;min-height:29px}.search svg{width:14px;height:14px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 13px}.game-open{border-radius:10px}.thumbnail{border-radius:10px}.card-caption{padding-top:9px;display:block}.card-caption h2{font-size:11px;line-height:1.7}.platform{display:inline-block;font-size:8px;margin-top:3px}body[data-design=a] .game-open{padding-bottom:9px}body[data-design=a] .thumbnail{border-radius:10px 10px 0 0}body[data-design=a] .card-caption{padding-inline:10px}body[data-design=b] .controls{padding-bottom:12px;margin-bottom:22px}body[data-design=b] .filter-tabs button{margin-right:5px;padding-inline:9px}body[data-design=b] .game-grid{grid-template-columns:1fr;gap:27px}body[data-design=b] .card-caption{display:flex;padding-top:10px}body[data-design=b] .card-caption h2{font-size:15px}body[data-design=c] .game-grid{gap:23px 14px}body[data-design=c] .filter-tabs{gap:6px}body[data-design=c] .filter-tabs button{padding:7px 13px;font-size:10px}body[data-design=c] .game-open{padding-bottom:10px;box-shadow:3px 3px 0 #e5d8ee}body[data-design=c] .card-caption{padding-inline:9px}body[data-design=c] .platform{padding:0 5px}.toast{font-size:11px;gap:12px;padding-left:15px;bottom:17px}}
@media(max-width:370px){.search{width:100%;border-color:var(--line)}.search input{font-size:11px}.controls{gap:9px}.card-caption h2{font-size:10px}.game-grid{gap:20px 12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}
.in-comparison .prototype-bar{display:none}body{min-height:100dvh}
/* 小さなロゴを左上へ。配信画像は192×156pxのみ。 */


@media(max-width:600px){}
.game-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 採用したトップの紹介文と、作品ごとの一言。 */
.catalog-intro{padding:15px 0 34px}
.catalog-intro h1{margin:0;font-size:23px;line-height:1.8;font-weight:700;letter-spacing:.025em}
.catalog-intro p{margin-top:9px;font-size:13px;line-height:1.9;color:#806c5d}
.game-open{height:100%}
.card-description{padding:8px 15px 1px;font-size:12px;line-height:1.9;color:#806c5d}
body[data-design=b] .card-description{padding-inline:2px}
@media(max-width:600px){.catalog-intro{padding:9px 0 27px}.catalog-intro h1{font-size:18px;line-height:1.85;letter-spacing:0}.catalog-intro p{font-size:12px;margin-top:8px;line-height:1.9}.card-caption h2{font-size:13px}.platform{font-size:9px}.card-description{padding:7px 10px 2px;font-size:11px;line-height:1.9}}
.filter-tabs{flex-wrap:wrap}
.filter-tabs button{white-space:nowrap}
@media(max-width:600px){.controls .search{width:100%}}
