@charset "UTF-8";

:root {

  --dpx: calc(31.5625vw / 750);

  --ld-u: calc(100vw / 1280);
}

.l-container { width: 100%; }

.l-footer, .pc-footer { margin: 0; padding: 0; }

.l-container::after { content: ""; }

.pc-header-main.is-fixed {
   display: none;
}

.pc-frame {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.pc-main {

  flex: 0 0 auto;
  width: calc(750 * var(--dpx));
}
.pc-side { flex: 1 1 0; }
.pc-side-inner {
  position: sticky;
  top: 0;
}

:root { --pcu: calc(100vw / 1280); }

.pc-main {
  box-shadow:
    calc(-10 * var(--pcu)) 0 calc(10 * var(--pcu)) calc(-10 * var(--pcu)) rgba(0, 0, 0, 0.1),
    calc(10 * var(--pcu)) 0 calc(10 * var(--pcu)) calc(-10 * var(--pcu)) rgba(0, 0, 0, 0.1);
}

.pc-frame { background: #E3EEF4; }

.ui-index, .ui-ind { display: none; }

.pc-side {
  position: relative;

  overflow-x: visible;
  overflow-y: clip;
}
.pc-side-inner {

  height: calc(808 * var(--pcu));
  top: calc(50% - 404 * var(--pcu));
}
.pc-side-inner img { display: block; height: auto; }

.pc-cloud { position: absolute; }
.pc-cloud-tl { left: calc(59 * var(--pcu)); top: calc(42 * var(--pcu)); width: calc(163 * var(--pcu)); }
.pc-cloud-bl { left: calc(171 * var(--pcu)); top: calc(641 * var(--pcu)); width: calc(204 * var(--pcu)); }
.pc-cloud-tr { left: calc(116 * var(--pcu)); top: calc(73 * var(--pcu)); width: calc(213 * var(--pcu)); }
.pc-cloud-br { left: calc(86 * var(--pcu)); top: calc(607 * var(--pcu)); width: calc(191 * var(--pcu)); }

.pc-nav-ttl { position: absolute; }
.pc-nav-ttl-category { left: calc(135 * var(--pcu)); top: calc(183 * var(--pcu)); width: calc(161 * var(--pcu)); }
.pc-nav-ttl-limited { left: calc(107 * var(--pcu)); top: calc(407 * var(--pcu)); width: calc(216 * var(--pcu)); }
.pc-nav-item { position: absolute; }
.pc-nav-item .pc-nav-photo { width: 100%; }
.pc-nav-item .pc-nav-label,
.pc-nav-item .pc-nav-arrow { position: absolute; }

.pc-nav-knit { left: calc(54 * var(--pcu)); top: calc(208 * var(--pcu)); width: calc(111 * var(--pcu)); }
.pc-nav-knit .pc-nav-label { left: calc(32 * var(--pcu)); top: calc(119 * var(--pcu)); width: calc(44 * var(--pcu)); }
.pc-nav-knit .pc-nav-arrow { left: calc(51 * var(--pcu)); top: calc(139 * var(--pcu)); width: calc(4 * var(--pcu)); }
.pc-nav-cutsewn { left: calc(154 * var(--pcu)); top: calc(191 * var(--pcu)); width: calc(130 * var(--pcu)); }
.pc-nav-cutsewn .pc-nav-label { left: calc(15 * var(--pcu)); top: calc(136 * var(--pcu)); width: calc(93 * var(--pcu)); }
.pc-nav-cutsewn .pc-nav-arrow { left: calc(60 * var(--pcu)); top: calc(156 * var(--pcu)); width: calc(4 * var(--pcu)); }
.pc-nav-goods { left: calc(263 * var(--pcu)); top: calc(180 * var(--pcu)); width: calc(142 * var(--pcu)); }
.pc-nav-goods .pc-nav-label { left: calc(32 * var(--pcu)); top: calc(147 * var(--pcu)); width: calc(56 * var(--pcu)); }
.pc-nav-goods .pc-nav-arrow { left: calc(59 * var(--pcu)); top: calc(167 * var(--pcu)); width: calc(4 * var(--pcu)); }
.pc-nav-wear-goods { left: calc(39 * var(--pcu)); top: calc(428 * var(--pcu)); width: calc(129 * var(--pcu)); }
.pc-nav-wear-goods .pc-nav-label { left: calc(41 * var(--pcu)); top: calc(136 * var(--pcu)); width: calc(57 * var(--pcu)); }
.pc-nav-wear-goods .pc-nav-arrow { left: calc(66 * var(--pcu)); top: calc(172 * var(--pcu)); width: calc(4 * var(--pcu)); }

.pc-nav-sleep { left: calc(91 * var(--pcu)); top: calc(425 * var(--pcu)); width: calc(127 * var(--pcu)); }
.pc-nav-sleep .pc-nav-label { left: calc(31 * var(--pcu)); top: calc(146 * var(--pcu)); width: calc(56 * var(--pcu)); }
.pc-nav-sleep .pc-nav-arrow { left: calc(57 * var(--pcu)); top: calc(175 * var(--pcu)); width: calc(4 * var(--pcu)); }
.pc-nav-catdog { left: calc(212 * var(--pcu)); top: calc(439 * var(--pcu)); width: calc(127 * var(--pcu)); }
.pc-nav-catdog .pc-nav-label { left: calc(6 * var(--pcu)); top: calc(132 * var(--pcu)); width: calc(81 * var(--pcu)); }
.pc-nav-catdog .pc-nav-arrow { left: calc(44 * var(--pcu)); top: calc(161 * var(--pcu)); width: calc(4 * var(--pcu)); }

.pc-ind {
  position: absolute;
  left: calc(36 * var(--pcu));
  top: calc(229 * var(--pcu));
  width: calc(11 * var(--pcu));
  height: calc(362 * var(--pcu));
  box-sizing: border-box;
  border: calc(2 * var(--pcu)) solid #fff;
  border-radius: calc(6 * var(--pcu));
  background: #F4F4F4;
}
.pc-ind-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: #D1E7F2;
  border-radius: calc(4 * var(--pcu));
}
.pc-ind-knob {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, -50%);
}
.pc-ind-knob img { width: 100%; }

.pc-ind-knob,
.pc-ind-knob[data-knob-step="1"] { width: calc(17 * var(--pcu)); }
.pc-ind-knob[data-knob-step="2"] { width: calc(21 * var(--pcu)); }
.pc-ind-knob[data-knob-step="3"] { width: calc(25 * var(--pcu)); }
.pc-ind-knob[data-knob-step="4"],
.pc-ind-knob[data-knob-step="5"] { width: calc(28 * var(--pcu)); }

.pc-ind-knob .pc-ind-slime.is-pop { animation: knob-pop var(--knob-pop-dur, 0.55s) ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .pc-ind-knob .pc-ind-slime.is-pop { animation: none; }
}

.pc-ind-knob .pc-ind-flag {
  position: absolute;
  left: calc(100% + 19 * var(--pcu));
  bottom: 0;
  width: calc(18 * var(--pcu));
  height: auto;
  transform: scale(0);
  transform-origin: 0 100%;
  transition: transform var(--ui-flag-dur, 0.4s) cubic-bezier(0.2, 2, 0.4, 1);
}
.pc-ind.is-full .pc-ind-flag { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .pc-ind-flag { transition: none; }
}
.pc-title { position: absolute; left: calc(120 * var(--pcu)); top: calc(293 * var(--pcu)); width: calc(210 * var(--pcu)); }
.pc-all-items { position: absolute; left: calc(117 * var(--pcu)); top: calc(404 * var(--pcu)); width: calc(217 * var(--pcu)); }
.pc-all-items img { width: 100%; }
.pc-slime { position: absolute; left: calc(235 * var(--pcu)); top: calc(431 * var(--pcu)); width: calc(137 * var(--pcu)); }

.ld-stage {

  width: calc(1280 * var(--ld-u));
  height: calc(808 * var(--ld-u));
  margin-left: calc(-640 * var(--ld-u));
  margin-top: calc(-404 * var(--ld-u));
}
.ld-stage .ld-cloud1 { left: calc(67 * var(--ld-u)); top: calc(557 * var(--ld-u)); width: calc(156 * var(--ld-u)); }
.ld-stage .ld-cloud2 { left: calc(80 * var(--ld-u)); top: calc(75 * var(--ld-u)); width: calc(158 * var(--ld-u)); }
.ld-stage .ld-cloud3 { left: calc(223 * var(--ld-u)); top: calc(373 * var(--ld-u)); width: calc(151 * var(--ld-u)); }
.ld-stage .ld-cloud4 { left: calc(742 * var(--ld-u)); top: calc(547 * var(--ld-u)); width: calc(155 * var(--ld-u)); }
.ld-stage .ld-cloud5 { left: calc(1073 * var(--ld-u)); top: calc(105 * var(--ld-u)); width: calc(161 * var(--ld-u)); }
.ld-stage .ld-cloud6, .ld-stage .ld-cloud7, .ld-stage .ld-cloud8,
.ld-stage .ld-cloud9, .ld-stage .ld-cloud10 { display: block; }
.ld-stage .ld-cloud6 { left: calc(738 * var(--ld-u)); top: calc(65 * var(--ld-u)); width: calc(149 * var(--ld-u)); }
.ld-stage .ld-cloud7 { left: calc(906 * var(--ld-u)); top: calc(315 * var(--ld-u)); width: calc(160 * var(--ld-u)); }
.ld-stage .ld-cloud8 { left: calc(388 * var(--ld-u)); top: calc(131 * var(--ld-u)); width: calc(159 * var(--ld-u)); }
.ld-stage .ld-cloud9 { left: calc(412 * var(--ld-u)); top: calc(646 * var(--ld-u)); width: calc(167 * var(--ld-u)); }
.ld-stage .ld-cloud10 { left: calc(1064 * var(--ld-u)); top: calc(632 * var(--ld-u)); width: calc(164 * var(--ld-u)); }
.ld-stage .ld-slime { left: calc(570 * var(--ld-u)); top: calc(254 * var(--ld-u)); width: calc(140 * var(--ld-u)); --ld-fa: 14;   }
.ld-stage .ld-bar {
  left: calc(548 * var(--ld-u));
  top: calc(407 * var(--ld-u));
  width: calc(184 * var(--ld-u));
  height: calc(10 * var(--ld-u));
  border-width: calc(2 * var(--ld-u));
  border-radius: calc(5 * var(--ld-u));
}
.ld-stage .ld-bar-fill { border-radius: calc(4 * var(--ld-u)); }
.ld-stage .ld-count { top: calc(449 * var(--ld-u)); font-size: calc(34 * var(--ld-u)); }
.ld-stage .ld-pct { margin-left: calc(3 * var(--ld-u)); font-size: calc(21 * var(--ld-u)); }
.ld-stage .ld-text { top: calc(488 * var(--ld-u)); font-size: calc(13 * var(--ld-u)); }

@media (hover: hover) {
  .anim-hover { transition: opacity 0.3s; }

  .anim-hover:hover { opacity: 0.6; text-decoration: none; }
}