*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  min-height:100vh;
  font-family:"Zen Maru Gothic", sans-serif;
  color:#247db8;
  background-image:url("images/27601361.png");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

/* キラキラ */
.decoration{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

.deco{
  position:absolute;
  color:rgba(92,196,255,.55);
  font-weight:900;
  animation:twinkle 2.8s infinite ease-in-out;
  text-shadow:
    0 0 8px rgba(255,255,255,.9),
    0 0 16px rgba(120,210,255,.6);
}

.deco-1{ top:8%; left:5%; font-size:34px; }
.deco-2{ top:14%; right:8%; font-size:28px; animation-delay:.4s; }
.deco-3{ top:36%; left:6%; font-size:26px; animation-delay:.8s; }
.deco-4{ top:42%; right:5%; font-size:38px; animation-delay:1.2s; }
.deco-5{ bottom:20%; left:10%; font-size:28px; animation-delay:.7s; }
.deco-6{ bottom:13%; right:10%; font-size:34px; animation-delay:1.5s; }

@keyframes twinkle{
  0%,100%{
    opacity:.28;
    transform:scale(1) rotate(0deg);
  }

  50%{
    opacity:1;
    transform:scale(1.25) rotate(10deg);
  }
}

/* 全体 */
.page{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding:24px;
  left:20px;
}

.header{
  text-align:center;
  margin-bottom:20px;
}

.catch-image{
  display:block;
  margin:0 auto 6px;
  max-width:700px;
  width:95%;
}

.title-image{
  display:block;
  margin:0 auto;
  max-width:1400px;
  width:120%;
  transform:translateX(-10%);
}

/* カード */
.stamp-card{
  background:rgba(255,255,255,.95);
  border:4px solid #bce9ff;
  border-radius:32px;
  padding:34px 30px;
  box-shadow:0 8px 24px rgba(58,160,220,.18);
}

/* スタンプ */
.stamp-section{
  width:100%;
  overflow:hidden;
}

.stamp-area{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:18px;
  overflow-x:auto;
  overflow-y:visible;
  padding:58px 20px 36px;
  scrollbar-width:thin;
}

.stamp-item{
  position:relative;
  flex-shrink:0;
  display:flex;
  justify-content:center;
}

.stamp-circle{
  width:180px;
  height:180px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:visible;
  flex-shrink:0;
  position:relative;
}

.stamp-base-image{
  position:absolute;
  width:160%;
  height:160%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  object-fit:contain;
  z-index:1;
}

.stamp-image-wrap{
  position:relative;
  z-index:2;

  width:250%;
  height:250%;

  margin-left:0;
  margin-top:8px;

  display:flex;
  justify-content:center;
  align-items:center;
}

.stamp-image{
  width:100%;
  height:100%;
  object-fit:contain;
  animation:stampPop .35s ease-out;
}

.today{
  animation:todayGlow 1.5s infinite;
}

.arrow{
  flex-shrink:0;
  font-size:42px;
  font-weight:900;
  color:#64c7ff;
}

@keyframes todayGlow{
  0%,100%{
    box-shadow:0 0 0 rgba(93,200,255,0);
  }

  50%{
    box-shadow:0 0 22px rgba(93,200,255,.8);
  }
}

@keyframes stampPop{
  0%{
    transform:scale(.3) rotate(-18deg);
    opacity:0;
  }

  65%{
    transform:scale(1.22) rotate(6deg);
    opacity:1;
  }

  100%{
    transform:scale(1) rotate(0);
  }
}

/* 下部 */
.action-area{
  display:grid;
  grid-template-columns:1fr 1.4fr 1fr;
  gap:18px;
  margin-top:26px;
}

.progress-box,
.vote-box,
.link-box{
  background:#fff;
  border:3px solid #d7f3ff;
  border-radius:22px;
  padding:20px;
  text-align:center;
}

.progress-box strong{
  font-size:48px;
  color:#26a8ef;
}

.progress-divider{
  margin:10px 0 14px;
  text-align:center;
  color:#8fdcff;
  font-size:16px;
  letter-spacing:10px;
  text-shadow:
    0 0 8px rgba(255,255,255,.9),
    0 0 14px rgba(143,220,255,.8);
}

.vote-lead{
  margin-bottom:10px;
  font-size:14px;
  font-weight:700;
  color:#333;
}

#voteButton{
  width:100%;
  border:none;
  border-radius:20px;
  background:linear-gradient(
    180deg,
    #9be7ff 0%,
    #5ecfff 45%,
    #2ba8f2 100%
  );
  color:#fff;
  font-size:32px;
  font-weight:900;
  padding:18px;
  cursor:pointer;
  box-shadow:
    0 6px 0 #1595d7,
    0 0 18px rgba(99,205,255,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.button-icon{
  width:44px;
  height:44px;
  object-fit:contain;
}

#voteButton:active{
  transform:translateY(4px);
  box-shadow:
    0 2px 0 #1595d7,
    0 0 12px rgba(99,205,255,.45);
}

.bonus-text{
  margin-top:14px;
  font-weight:700;
  color:#2388c8;
}

.vote-link-btn{
  display:inline-block;
  margin-top:40px;
  color:#fff;
  background:linear-gradient(
    180deg,
    #86deff,
    #43bfff
  );
  text-decoration:none;
  font-weight:900;
  border-radius:999px;
  padding:12px 24px;
  box-shadow:0 4px 0 #2da9e8;
}

.external-note{
  margin-top:12px;
  font-size:12px;
  color:#333;
  font-weight:500;
}

/* 特別なアート */
.art-preview{
  margin:30px auto 0;
  width:360px;
  height:220px;
  border-radius:24px;
  border:4px dashed #aee5ff;
  background:rgba(230,247,255,.88);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:#7bcfff;
  font-weight:900;
  overflow:hidden;
}

.question{
  font-size:80px;
  line-height:1;
}

.art-preview.completed-art{
  border:4px solid #aee5ff;
  background:#fff;
  padding:10px;
}

.complete-art-image{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:16px;
  display:block;
}

footer{
  text-align:center;
  font-size:12px;
  margin-top:20px;
  color:#3c8fc0;
}

/* スマホ */
@media(max-width:800px){
  .page{
    padding:14px;
    left:10;
  }

  .header{
    margin-bottom:14px;
  }

  .catch-image{
    width:95%;
    max-width:520px;
    margin-bottom:4px;
  }

  .title-image{
    width:120%;
    max-width:700px;
    transform:translateX(-10%);
  }

  .stamp-card{
    padding:22px 18px;
  }

  .stamp-area{
    gap:14px;
    padding:56px 14px 34px;
  }

  .stamp-circle{
    width:180px;
    height:180px;
  }

  .stamp-base-image{
    width:160%;
    height:160%;
  }

  .stamp-image-wrap{
    width:210%;
    height:210%;
    margin-left:-1px;
    margin-top:-4px;
  }

  .stamp-image{
    width:100%;
    height:100%;
  }

  .arrow{
    font-size:30px;
  }

  .action-area{
    grid-template-columns:1fr;
  }

  .progress-box{
    padding:7px 16px;
  }

  .progress-box strong{
    font-size:38px;
  }

  .progress-divider{
    margin:6px 0 8px;
  }

  .art-preview{
    width:100%;
    max-width:360px;
  }

  #voteButton{
    font-size:28px;
  }

  .button-icon{
    width:38px;
    height:38px;
  }
}