:root{
  --mint-1:#f7fffb;
  --mint-2:#e5f9f0;
  --mint-3:#c8efdf;
  --mint-4:#8fd3b7;
  --mint-5:#4fa17f;
  --mint-6:#33785f;
  --ink:#23473b;
  --muted:#688278;
  --white:rgba(255,255,255,.84);
  --line:rgba(64,133,105,.15);
  --shadow:0 16px 45px rgba(67,126,102,.13);
}

*{
  box-sizing:border-box;
}

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

body{
  min-height:100dvh;
  overflow:hidden;
  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    system-ui,
    sans-serif;
  color:var(--ink);
  background:
    radial-gradient(
      circle at 12% 16%,
      rgba(255,255,255,.95) 0 7%,
      transparent 25%
    ),
    radial-gradient(
      circle at 88% 14%,
      rgba(179,237,213,.6) 0 9%,
      transparent 28%
    ),
    linear-gradient(
      145deg,
      var(--mint-1),
      var(--mint-2)
    );
}

.bg{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.bubble{
  position:absolute;
  border-radius:50%;
  background:rgba(143,211,183,.16);
  filter:blur(1px);
  animation:float 9s ease-in-out infinite alternate;
}

.b1{
  width:min(28vw,260px);
  aspect-ratio:1;
  left:-8vw;
  top:55%;
}

.b2{
  width:min(20vw,180px);
  aspect-ratio:1;
  right:5%;
  top:7%;
  animation-delay:-2s;
}

.b3{
  width:min(14vw,120px);
  aspect-ratio:1;
  right:-2vw;
  bottom:5%;
  animation-delay:-5s;
}

.b4{
  width:min(9vw,76px);
  aspect-ratio:1;
  left:20%;
  top:8%;
  animation-delay:-3s;
}

@keyframes float{
  from{
    transform:translateY(-6px) scale(1);
  }

  to{
    transform:translateY(12px) scale(1.04);
  }
}

main{
  position:relative;
  z-index:1;
  height:100dvh;
  display:grid;
  place-items:center;
  padding:clamp(10px,2.6vh,26px) 16px;
}

.card{
  position:relative;
  width:min(820px,100%);
  max-height:calc(100dvh - 20px);
  text-align:center;
  padding:
    clamp(20px,4.2vh,48px)
    clamp(18px,5vw,58px);
  border:1px solid rgba(255,255,255,.78);
  border-radius:clamp(24px,4vw,34px);
  background:var(--white);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}

.card::before,
.card::after{
  position:absolute;
  color:rgba(79,161,127,.28);
  font-size:clamp(22px,4vh,34px);
  line-height:1;
  pointer-events:none;
}

.card::before{
  content:"✿";
  left:clamp(16px,4vw,34px);
  top:clamp(15px,3vh,28px);
  transform:rotate(-12deg);
}

.card::after{
  content:"✦";
  right:clamp(18px,4vw,36px);
  bottom:clamp(18px,3vh,30px);
  transform:rotate(10deg);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:clamp(6px,1.2vh,8px) 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.66);
  color:var(--mint-5);
  font-size:clamp(10px,1.5vh,12px);
  font-weight:700;
  letter-spacing:.1em;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--mint-4);
  box-shadow:0 0 0 5px rgba(143,211,183,.14);
}

h1{
  margin:
    clamp(12px,2.2vh,20px)
    0
    clamp(5px,1vh,9px);
  font-size:clamp(36px,8vh,72px);
  line-height:.98;
  letter-spacing:.02em;
  font-weight:800;
}

.sub{
  margin:0;
  color:var(--muted);
  font-size:clamp(13px,2vh,17px);
  letter-spacing:.04em;
}

.coming{
  margin:
    clamp(15px,2.8vh,28px)
    0
    clamp(6px,1vh,10px);
  font-size:clamp(20px,3.7vh,31px);
  font-weight:800;
  letter-spacing:.08em;
  color:var(--mint-5);
}

.message{
  max-width:580px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.65;
  font-size:clamp(12px,1.75vh,14px);
}

.date-box{
  margin:clamp(15px,2.8vh,28px) auto 0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(10px,2vw,16px);
  max-width:520px;
  padding:
    clamp(12px,2.2vh,19px)
    clamp(14px,3vw,22px);
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.62);
}

.date{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.date strong{
  font-size:clamp(23px,4.7vh,36px);
  line-height:1.05;
  font-weight:800;
}

.date span{
  color:var(--muted);
  font-size:clamp(10px,1.45vh,12px);
  letter-spacing:.08em;
}

.divider{
  width:1px;
  height:clamp(38px,6vh,50px);
  background:var(--line);
}

.count-wrap{
  margin-top:clamp(14px,2.5vh,25px);
}

.count-label{
  margin-bottom:clamp(5px,1vh,8px);
  color:var(--muted);
  font-size:clamp(10px,1.4vh,12px);
  letter-spacing:.12em;
}

.countdown{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:8px;
  flex-wrap:nowrap;
}

.count-number{
  font-size:clamp(28px,5.8vh,44px);
  font-weight:800;
  color:var(--ink);
  line-height:1;
}

.count-unit{
  color:var(--muted);
  font-size:clamp(10px,1.6vh,13px);
  padding-bottom:4px;
  margin-right:6px;
}

.links{
  margin-top:clamp(10px,2vh,18px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.link-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:130px;
  padding:10px 18px;

  border:1px solid var(--line);
  border-radius:999px;

  background:rgba(255,255,255,.65);
  color:var(--ink);

  font-size:13px;
  font-weight:700;
  text-decoration:none;

  transition:
    transform .2s ease,
    background .2s ease;
}

.link-button:hover{
  transform:translateY(-2px);
  background:white;
}


.contact-email{
  margin:0;
  color:var(--muted);
  font-size:clamp(10px,1.55vh,12px);
  line-height:1.5;
  overflow-wrap:anywhere;
}

footer{
  margin-top:clamp(13px,2.4vh,24px);
  color:#89a098;
  font-size:clamp(9px,1.3vh,11px);
  letter-spacing:.04em;
}


/* =========================================================
   画面の高さに合わせて全体を段階的にコンパクト化
   内容を隠さず、文字・余白・ボタンを縮めて1画面に収める
   ========================================================= */

/* 少し高さが低い画面 */
@media (max-height:760px){
  main{
    padding:8px 12px;
  }

  .card{
    padding:
      clamp(16px,2.8vh,24px)
      clamp(16px,4vw,42px);
  }

  .eyebrow{
    padding:5px 11px;
    font-size:10px;
  }

  h1{
    margin:10px 0 4px;
    font-size:clamp(34px,6.5vh,50px);
  }

  .sub{
    font-size:clamp(12px,1.8vh,15px);
  }

  .coming{
    margin:12px 0 5px;
    font-size:clamp(18px,3.2vh,24px);
  }

  .message{
    font-size:clamp(10.5px,1.55vh,13px);
    line-height:1.45;
  }

  .date-box{
    margin-top:12px;
    padding:10px 16px;
  }

  .date strong{
    font-size:clamp(21px,4vh,30px);
  }

  .date span{
    font-size:10px;
  }

  .divider{
    height:36px;
  }

  .count-wrap{
    margin-top:11px;
  }

  .count-label{
    margin-bottom:4px;
    font-size:10px;
  }

  .count-number{
    font-size:clamp(25px,4.8vh,36px);
  }

  .count-unit{
    font-size:10px;
    padding-bottom:3px;
  }

  .links{
    margin-top:9px;
    gap:5px;
  }

  .link-button{
    min-width:118px;
    padding:7px 15px;
    font-size:11px;
  }

  .contact-email{
    font-size:10px;
    line-height:1.3;
  }

  footer{
    margin-top:8px;
    font-size:9px;
  }

  .card::before,
  .card::after{
    display:none;
  }
}

/* かなり高さが低い画面 */
@media (max-height:620px){
  .card{
    padding:
      11px
      clamp(14px,3vw,28px);
    border-radius:20px;
  }

  .eyebrow{
    padding:4px 9px;
    font-size:9px;
    gap:6px;
  }

  .dot{
    width:6px;
    height:6px;
    box-shadow:0 0 0 3px rgba(143,211,183,.14);
  }

  h1{
    margin:7px 0 2px;
    font-size:clamp(28px,6vh,38px);
  }

  .sub{
    font-size:11px;
  }

  .coming{
    margin:7px 0 3px;
    font-size:clamp(16px,3vh,20px);
  }

  .message{
    font-size:9.5px;
    line-height:1.3;
  }

  .date-box{
    margin-top:7px;
    padding:7px 13px;
    border-radius:15px;
  }

  .date strong{
    font-size:clamp(19px,3.8vh,25px);
  }

  .date span{
    font-size:8.5px;
  }

  .divider{
    height:30px;
  }

  .count-wrap{
    margin-top:7px;
  }

  .count-label{
    margin-bottom:2px;
    font-size:9px;
  }

  .count-number{
    font-size:clamp(22px,4.5vh,29px);
  }

  .count-unit{
    font-size:8.5px;
    padding-bottom:2px;
    margin-right:3px;
  }

  .links{
    margin-top:6px;
    gap:3px;
  }

  .link-button{
    min-width:108px;
    padding:5px 12px;
    font-size:10px;
  }

  .contact-email{
    font-size:9px;
    line-height:1.2;
  }

  footer{
    margin-top:5px;
    font-size:8px;
  }
}

/* スマホ横向きなど、極端に高さが低い画面 */
@media (max-height:500px){
  main{
    padding:4px 8px;
  }

  .card{
    padding:8px 12px;
  }

  .eyebrow{
    font-size:8px;
    padding:3px 8px;
  }

  h1{
    margin:5px 0 1px;
    font-size:clamp(24px,5.8vh,30px);
  }

  .sub{
    font-size:9px;
  }

  .coming{
    margin:5px 0 2px;
    font-size:14px;
  }

  .message{
    font-size:8px;
    line-height:1.2;
  }

  .date-box{
    margin-top:5px;
    padding:5px 10px;
  }

  .date strong{
    font-size:18px;
  }

  .date span{
    font-size:7.5px;
  }

  .divider{
    height:25px;
  }

  .count-wrap{
    margin-top:5px;
  }

  .count-label{
    font-size:8px;
  }

  .count-number{
    font-size:20px;
  }

  .count-unit{
    font-size:7.5px;
  }

  .links{
    margin-top:4px;
    gap:2px;
  }

  .link-button{
    min-width:100px;
    padding:4px 10px;
    font-size:9px;
  }

  .contact-email{
    font-size:8px;
  }

  footer{
    margin-top:3px;
    font-size:7.5px;
  }
}

@media (max-width:560px){
  main{
    padding-left:10px;
    padding-right:10px;
  }

  .card{
    border-radius:24px;
    padding-left:17px;
    padding-right:17px;
  }

  .eyebrow{
    letter-spacing:.06em;
  }

  .date-box{
    max-width:100%;
  }

  .message br{
    display:none;
  }

  .card::before{
    left:16px;
  }

  .card::after{
    right:16px;
  }
}

@media (max-width:380px){
  .eyebrow{
    font-size:9px;
    padding-left:10px;
    padding-right:10px;
  }

  .countdown{
    gap:5px;
  }

  .count-unit{
    margin-right:2px;
  }
}

@media (prefers-reduced-motion:reduce){
  .bubble{
    animation:none;
  }
}