@charset "UTF-8";

/***************************************
共通CSS
****************************************/
body {
  width: 100%;
  min-height: 100vh;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #222;
}

img {
  max-width: 100%;
  height: auto;
  pointer-events: none;
}

.countdown-text{
  font-family: "Michroma", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/***************************************
PC CSS
1025px〜
****************************************/
/* メインビジュアル全体 */
.main-visual{
  position: relative;
}

#teaser{
  opacity: 0;
  animation: fade-1 0.4s ease-in-out 0.4s forwards;
}

.top_bg{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}

.top_cast{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  animation: fade-1 0.4s ease-in-out 0.8s forwards;
}

.top_balloon{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  animation: fade-1 0.4s ease-in-out 1.2s forwards;
}

.top_logo{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  animation-name: popup;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.22,1,0.36,1);
  animation-delay: 1.8s;        /* ← 1.2秒後に開始 */
  animation-fill-mode: forwards; /* 終了後は最終フレームを保持 */
}

/* PC用：中央配置テキスト */
.main-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* スマホ用：外に出すテキスト（デフォルト非表示） */
.main-text-outside {
  display: none;
}

/* ストア誘導ボタン */
.top_store {
  text-align: center;
  background-color: #333;
  margin: 10px auto;
  padding: 8px 0 18px;
}

.top_store ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.top_store ul li {
  display: inline-block;
  max-width: 45%;
}

.top_store ul li img{
  display: block;
}

.top_store p {
  color: #fff;
  font-weight: 600;
  font-size: 1.6vw;
}


/* フッター（基準） */
footer {
  text-align: center;
  padding: 10px 0;
  width: 100%;
  z-index: 61;
  font-size: 14px;
  color: #fff;
  background-color: rgba(54, 48, 116, 1);
  background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 8px,
    rgba(51, 45, 112, 1) 8px,
    rgba(51, 45, 112, 1) 16px
  );
}

div.footer_link {
  padding: 1%;
}

div.footer_link ul li {
  list-style: none;
  display: inline-block;
  margin: 0 2%;
  line-height: 1.2;
}

div.footer_link a {
  color: #fff;
}

div.footer_link a:hover {
  color: #77ffff;
}

.footer-bottom p {
  transform: skewX(-10deg);
  font-size: 12px;
}

.main-text {
  font-size: 20px;
}

.official-x:before {
  content: '𝕏' !important;
  font-family: sans-serif !important;
  font-weight: bold;
}

/***************************************
スマートフォン CSS
〜599px
****************************************/
@media screen and (max-width: 599px) {
  body {
    min-height: 100vh;   /* fallback */
    min-height: 100dvh;  /* 推奨：URLバーの出入りに追従 */
    display: flex;
    flex-direction: column;
  }

  .main-visual .main-text {
    display: none;
  }

  .main-text-outside {
    display: block;
    color: #fff;
    text-align: center;
    padding: 0.1em;
    font-size: 16px;
  }

  :is(main, #container, .content, .page) {
    flex: 1;  /* 空き高さを埋める → footer が自動的に最下部へ */
  }

  /* ストア誘導ボタン */
  .top_store {
    text-align: center;
    background-color: #333;
    margin: 10px auto;
    padding: 8px 0 18px;
  }

  .top_store p {
    color: #fff;
    font-weight: 600;
    font-size: 18px;
  }


  /* フッターは高さ固定しない。必要に応じてセーフエリア確保 */
  footer {
    text-align: center;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}


/***************************************
アニメーション
****************************************/

/* カウントダウン表示時のアニメーション */
.reveal-text,
.reveal-text::after {
  animation-delay: var(--animation-delay, 2s);
  animation-iteration-count: var(--iterations, 1);
  animation-duration: var(--duration, 800ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-text {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  animation-name: clip-text;
  white-space: nowrap;
  cursor: default;

  &::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    animation-name: text-revealer;
  }
}

@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes text-revealer {

  0%, 50% {
    transform-origin: 0 50%;
  }

  60%, 100% {
    transform-origin: 100% 50%;
  }

  60% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

@use postcss-preset-env {
  stage: 0;
  browsers: [
    "last 1 Chrome versions",
    "last 1 Firefox versions",
    "last 1 Safari versions",
    "last 1 Edge versions"
  ]
}

@keyframes fade-1 { to { opacity: 1; } }

/* iOS/Safari対策：モバイルでは fixed をやめる */
@media (hover: none) and (pointer: coarse) {
  #main{
    background-attachment: scroll;
    height: 100dvh;
  }
}

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}