body{
  margin:0;
  background:#eee;
  height:200vh;
  display:flex;
  justify-content:center;
  padding-top:100px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
}

.tile{
  width:520px;
  height:520px;
  position:relative;
  border-radius:22px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}

/* 背景（中心拡大） */
.bg{
  position:absolute;
  inset:0;
  background:#00008b;
  transform: scale(0);
  transform-origin:center;
}

.content{
  position:relative;
  z-index:1;
  width:100%;
  padding:40px 30px;
  text-align:center;
}

.icons{
  display:flex;
  gap:18px;
  justify-content:center;
  margin-bottom:25px;
}
.icons img{
  width:70px;
  height:auto;
  opacity:0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

.text-group{
  opacity:0;
  transform: scale(.95);
  will-change: transform, opacity;
}

h3{
  margin:0 0 18px;
  font-size:30px;
  font-weight:700;
}

.big{
  font-size:76px;
  font-weight:800;
  margin:0 0 18px;
  line-height:1.05;
}
.big .unit{
  font-size:.45em;
  font-weight:700;
}

.note{
  font-size:22px;
  margin:0;
  opacity:.95;
}

@media (max-width: 700px){
  .tile{ width:min(92vw, 520px); height:auto; aspect-ratio:1/1; }
  .big{ font-size:64px; }
  .icons img{ width:56px; }
}