:root{
  --size: 160px;
  --thickness: 6px;
  --gap: 16px;
  --bg: #eb6e9f;
  --accent: #7c5cff;
  --text: #7c5cff;
}

html,body{height:100%;margin:0;}

/* ローディング画面 */
.loader-wrap{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--gap);
  background:var(--bg);
  z-index:9999;
  transition:opacity 0.6s ease;
}

.square{ position:relative; width:var(--size); height:var(--size); }

.side{ position:absolute; }
.bar{
  position:absolute;
  background:linear-gradient(90deg, var(--accent), #3bd5ff 140%);
  transform: scaleX(0);
  height:var(--thickness);
  border-radius: calc(var(--thickness) / 2);
  transition: transform 200ms linear;
}
.side.top{ top:0; left:0; right:0; height:var(--thickness); }
.side.top .bar{ width:100%; transform-origin:left center; }
.side.right{ top:0; right:0; bottom:0; width:var(--thickness); }
.side.right .bar{ width:var(--thickness); height:100%; transform-origin: top center; transform: scaleY(0); }
.side.bottom{ bottom:0; left:0; right:0; height:var(--thickness); }
.side.bottom .bar{ width:100%; transform-origin:right center; transform: scaleX(0); }
.side.left{ top:0; left:0; bottom:0; width:var(--thickness); }
.side.left .bar{ width:var(--thickness); height:100%; transform-origin: bottom center; transform: scaleY(0); }

.percent{ font-size: 18px; color:var(--text); }

.inner{
  position:absolute;
  inset: calc(var(--thickness) + 8px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.inner .dot{ font-weight:700; color:var(--accent); font-size:20px; }

/* 本文は初期状態で非表示 */
#content{
  opacity:0;
  transition: opacity 0.8s ease;
  padding:40px;
}
#content.show{
  opacity:1;
}