:root{
  --font:"Bowlby One SC","Arial Black",sans-serif;
  --blue:#96c8dd;
  --bg:#97cae0;
  --grid:rgba(255,255,255,.20);
  --gap:64.3px;
  --s:1;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0;padding:0;overflow-x:hidden; }
body{
  margin:0;
  padding:0;
  min-height:100%;
  font-family: "puffin-arcade-liquid", sans-serif;
  font-weight: 800;
 font-style: normal;
  -webkit-font-smoothing:antialiased;
  background:
    repeating-linear-gradient(to right,var(--grid) 0 1.5px,transparent 1.5px var(--gap)),
    repeating-linear-gradient(to bottom,var(--grid) 0 1.5px,transparent 1.5px var(--gap)),
    var(--bg);
}
.wrap{position:relative;display:flex;justify-content:center;margin:0;padding:0;}
.scaler{position:relative;margin:0;padding:0;overflow:hidden}
.stage{
  position:absolute;
  top:0;
  left:0;
  transform-origin:0 0;
  transform:scale(var(--s));
  margin:0;
  padding:0;
}
.stage img{display:block;-webkit-user-drag:none}
.stage a{transition:transform .12s ease}
.stage a:hover{transform:translate(2px,-1px)}
.band,.bubble{position:absolute;pointer-events:none}
.txt{position:absolute;margin:0;color:var(--blue);white-space:nowrap;font-weight:400}
.white{color:#fff}
.cs{
  position:absolute;
  background:#f5f5f5;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue);
  line-height:1;
  letter-spacing:.06em;
}
.tayori{
  position:absolute;
  display:flex;
  align-items:center;
  background:var(--blue);
  border-radius:6px;
  color:#111;
  text-decoration:none;
  font-size:15px;
  letter-spacing:.06em;
}
.tayori .tx{flex:1;text-align:center;}
.dot{position:absolute;border-radius:50%;background:#000}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.stage {
  position: relative;
}

.stage::after{
  content:"";
  position:absolute;
  top:0;
  height:100%;
  border:1px solid #fff;
  pointer-events:none;
  z-index: 9999;   
}

.pc .stage::after{
  left:420.5px;
  width:602.5px;
  z-index: 9999;   
}

.sp .stage::after{
  left:0;
  width:400px;
  z-index: 9999;   
}

/* REAL SECTION CONTAINERS */
.section{
  position:relative;
  display:block;
  width:100%;
  margin:0;
  padding:0;
}

/* Generic crop wrappers that display the ORIGINAL attached PNGs directly. */
.crop-art{position:absolute;overflow:hidden;pointer-events:none}
.crop-art>img{position:absolute;display:block;max-width:none}

.pc{position:relative;overflow:clip}

.pc{
  --work-width:539.5px;
  /* Align the frame panel's top (22/691) with the GIF price row (680/1501). */
  --description-gap:calc(var(--work-width) * -104 / 1501 - var(--work-width) * 22 / 691);
  --works-height:calc(594px - 131px + var(--work-width) * 784 / 1501 + var(--description-gap) + var(--work-width) * 160 / 691);
  --stage-height:calc(
    480px +
    520px +
    var(--works-height) +
    180px
  );
}

.pc .stage{
  width:1440px;
  height:var(--stage-height);
}
.pc .scaler{
  width:calc(1440px * var(--s));
  height:calc(var(--stage-height) * var(--s));
}
.pc .section-header{height:480px}
.pc .section-about{ height:520px;}
.pc .section-topics{height:var(--works-height)}
.pc .section-footer{height:180px}

/* ---------- PC / HEADER ---------- */

.pc .logo {
  position:absolute;
  left:320px;
  top:-65px;
  width:520px;
  height:auto;
  z-index:8;
  pointer-events:none;
}

.pc .band-top{left:420.5px;top:0px;width:602.5px;z-index:6}

.pc .st-graf{left:795px;top:268px;width:400px;height:252.1px;z-index:1}
.pc .st-graf>img{width:592.8px;left:-366.8px;top:-70.7px}

.pc .bubble{left:585px;top:130.5px;width:300px;z-index:4}

.pc .st-666{left:422px;top:380px;width:200px;height:250px;z-index:5;overflow:hidden}
.pc .st-666>img{width:100%;height:100%;object-fit:cover;object-position:center;left:0;top:0}

/* ---------- PC / SNS + ABOUT ---------- */

.sp .sns a,
.pc .sns a{
  position:absolute;
  z-index:10;
}

.pc .mysns{left:489px;top:23px;font-size:30px;line-height:1;z-index:4}

.pc .sns a{
  position:absolute;
  display:block;
  left:420px;
  width:229px;
  height:60.5px;
  overflow:hidden;
}
.pc .sns a img{
  position:absolute;
  /* Original sprite: 1920 x 1080; each button is 641px wide including shadow. */
  width:calc(229px * 1920 / 641);
  height:auto;
  max-width:none;
  left:calc(229px * -108 / 641);
}
.pc .b1{top:79px}.pc .b1 img{top:calc(229px * -72 / 641);}
.pc .b2{top:156px}.pc .b2 img{top:calc(229px * -265 / 641);}
.pc .b3{top:233px}.pc .b3 img{top:calc(229px * -458 / 641);}
.pc .b4{top:307.5px}.pc .b4 img{top:calc(229px * -650 / 641);}
.pc .b5{top:386px}.pc .b5 img{top:calc(229px * -847 / 641);left:calc(229px * -112 / 641);}

.pc .paper{
  position:absolute;
  left:637px;
  top:0;
  width:359px;
  height:400px;
  z-index:3;
  overflow:hidden;
  transform-origin:0 0;
}

.sp .paper,
.pc .paper{
  transform-origin:top left;
  transform:rotate(5.5deg) scale(1.18);
}

.pc .paper img{
  position:absolute;
  width:961.3px;
  max-width:none;
  height:auto;
  left:-582.3px;
  top:-115.5px;
}

.pc .about{width: 290px;left:690px;top:82px;font-size:28px;line-height:1;z-index:5;text-align:center;
  font-size:28px;}
.pc .avatar{position:absolute;left:683.5px;top:128.5px;width:305.5px;z-index:5}
.pc .bio{left:690px;top:230px;font-size:17.5px;line-height:22.2px;z-index:5}
.pc .tayori{left:676px;top:391px;width:314px;height:45px;z-index:5; color: #fff;}

/* SNS-7.png used directly */
.pc .st-love{left:300px;top:430px;width:268px;height:233px;z-index:5}
.pc .st-love>img{width:456.6px;left:-117.7px;top:-10.7px}

/* ---------- PC / TOPICS ---------- */

.pc .section-topics{
  width:602.5px;
  margin-left:420.5px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.pc .topics{
  position:static;
  margin:0;
  font-size:32px;
  line-height:1;
  z-index:4;
}

.pc .topics-list{
  width:100%;
  margin-top:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:29px;
}

.pc .section-topics .cs{
  position:static;
  width:539.5px;
  height:131px;
  font-size:32px;
}

/* ---------- PC / FOOTER ---------- */

.pc .band-bot{left:420.5px;bottom:0;width:602.5px;z-index:6}
.pc .foot{left:420.5px;top:127px;width:602.5px;text-align:center;font-size:13px;z-index:7; color: #fff;}



.sp{
  display:none;
  --work-width:360px;
  /* Align the frame panel's top (22/691) with the GIF price row (680/1501). */
  --description-gap:calc(var(--work-width) * -104 / 1501 - var(--work-width) * 22 / 691);
  --works-height:calc(400px - 87.5px + var(--work-width) * 784 / 1501 + var(--description-gap) + var(--work-width) * 160 / 691);
  --stage-height:calc(
    328px +
    362px +
    var(--works-height) +
    158px
  );
}
.sp .stage{
  width:400px;
  height:var(--stage-height);
}
.sp .scaler{
  width:100%;
  height:calc(var(--stage-height) * var(--s));
}

.sp .section-header{height:328px}
.sp .section-about{height:362px}
.sp .section-topics{height:var(--works-height)}
.sp .section-footer{height:158px}

/* ---------- SP / HEADER ---------- */

.sp .band-top{left:0;top:0;width:400px;z-index:6}

.sp .logo{
  position:absolute;
  left:-70px;
  top:-50px;
  width:360px;
  height:auto;
  overflow:hidden;
  z-index:8;
  pointer-events:none;
}

.sp .logo img{
  position:absolute;
  width:326.3px;
  max-width:none;
  height:auto;
  left:-75.1px;
  top:-62.2px;
}

/* SNS-5.png : right cluster */
.sp .st-graf{left:262px;top:188px;width:152px;height:169.6px;z-index:1}
.sp .st-graf>img{width:398.7px;left:-246.7px;top:-47.5px}

.sp .bubble{left:90px;top:75px;width:240px;z-index:4}

.sp .st-666{left:-6px;top:280px;width:124px;height:131.4px;z-index:3;overflow:visible}
.sp .st-666>img{width:100%;height:auto;left:0;top:0}

/* ---------- SP / SNS + ABOUT ---------- */
.sp .mysns{left:40px;top:0;font-size:24px;line-height:1;z-index:4}

.sp .sns a{
  position:absolute;
  display:block;
  left:0px;
  width:150px;
  height:39.7px;
  overflow:hidden;
}
.sp .sns a img{
  position:absolute;
  /* Original sprite: 1920 x 1080; each button is 641px wide including shadow. */
  width:calc(150px * 1920 / 641);
  height:auto;
  max-width:none;
  left:calc(150px * -108 / 641);
}
.sp .b1{top:45px}.sp .b1 img{top:calc(150px * -72 / 641);}
.sp .b2{top:94.5px}.sp .b2 img{top:calc(150px * -265 / 641);}
.sp .b3{top:147px}.sp .b3 img{top:calc(150px * -458 / 641);}
.sp .b4{top:197.5px}.sp .b4 img{top:calc(150px * -650 / 641);}
.sp .b5{top:250px}.sp .b5 img{top:calc(150px * -847 / 641);left:calc(150px * -112 / 641);}

.sp .paper{
  position:absolute;
  left:145px;
  top:0;
  width:300px;
  height:320px;
  z-index:4;
  overflow:hidden;
}
.sp .paper img{
  position:absolute;
  width:803.3px;
  max-width:none;
  height:auto;
  left:-550.6px;
  top:-165.5px;
}

.sp .about{left:176px;top:44px;font-size:20px;line-height:1;z-index:5}
.sp .avatar{position:absolute;left:176px;top:78.5px;width:202px;z-index:5}
.sp .bio{left:176px;top:144px;font-size:12px;line-height:15px;z-index:5}
.sp .tayori{left:171px;top:253px;width:208.5px;height:30px;font-size:11px;z-index:5;}
.sp .tx{color:#fff;}

/* ---------- SP / TOPICS ---------- */

.sp .section-topics{
  width:400px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.sp .topics{
  position:static;
  margin:0;
  font-size:24px;
  line-height:1;
  z-index:4;
}

.sp .topics-list{
  width:100%;
  margin-top:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

.sp .section-topics .cs{
  position:static;
  width:360px;
  height:87.5px;
  font-size:22px;
}

/* ---------- SP / FOOTER ---------- */

.sp .band-bot{left:0;bottom:0;width:400px;z-index:6}
.sp .foot{left:0;top:117px;width:400px;text-align:center;font-size:11px;z-index:7;color: #fff;}

@media(max-width:560px){
  .pc{display:none}
  .sp{display:flex}
}

/* Works: display the original GIF at its natural aspect ratio. */
.work-feature{
  width:var(--work-width);
  max-width:100%;
  margin:0;
  flex-shrink:0;
}
.work-feature img{
  width:100%;
  height:auto;
}

/* Game description: preserve the original frame and put editable text over it. */
.work-description{
  position:relative;
  z-index:1;
  width:100%;
  margin-top:var(--description-gap);
}
.work-description-frame{
  display:block;
  width:100%;
  height:auto;
}
.work-description-text{
  position:absolute;
  top:24%;
  right:24%;
  bottom:14%;
  left:11%;
  margin:0;
  overflow:auto;
  overflow-wrap:anywhere;
  font-family:inherit;
  font-style:inherit;
  font-size:20px;
  font-weight:inherit;
  line-height:1.25;
  color:#96c8dd;
  text-align:left;
}
.sp .work-description-text{font-size:16px;  color:#96c8dd;}

/* Align the description frame with the main column's left border. */
.pc .work-description{margin-left:calc((539.5px - 602.5px) / 2);}
.sp .work-description{margin-left:calc((360px - 400px) / 2);}

.wrap.sp .stage .work-links{
  left:calc((var(--work-width) - 400px) / 2);
  width:79.7px;
  gap:0;
}
.wrap.sp .stage .work-links-title{width:47.8px;height:19.9px;margin-bottom:6.6px;}
.wrap.sp .stage .work-link,
.wrap.sp .stage .work-link:hover{width:96.3px;height:29.9px;}

/* Replace one phrase at a time, without accumulating text. */
.work-description-text{scrollbar-width:thin;overscroll-behavior:contain;}
.work-description-text.is-cycling{overflow:hidden;}
.work-description-text:focus-visible{outline:1px solid currentColor;outline-offset:2px;}
.description-rotator{display:block;}
.description-rotator.is-cycling .description-phrase{display:none;}
.description-rotator.is-cycling .description-phrase.is-active{
  display:block;
  animation:phrase-enter .28s ease-out both;
}
.description-rotator.is-cycling .description-phrase.is-leaving{
  animation:phrase-leave .2s ease-in both;
}
@keyframes phrase-enter{
  from{opacity:0;transform:translateY(3px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes phrase-leave{
  from{opacity:1;}
  to{opacity:0;}
}
@media(prefers-reduced-motion:reduce){
  .description-rotator.is-cycling .description-phrase{display:inline;animation:none;}
  .work-description-text.is-cycling{overflow:auto;}
}