@charset "UTF-8";

*, ::after, ::before { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333333;
  text-align: left;
  background-color: #000;
}

img { width: 100%; display: block; }

/* Footer */
footer {
  text-align: center;
  padding: 10px;
  background: #ED719B;
  margin: 70px auto 0;
}
footer span { color: #fff; font-size: 10px; line-height: 1.2; display: block; }
footer a { color: #fff; }

/* Wrapper & Background */
.wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}
.wrapper:before {
  content: "";
  background-image: url(https://0ievuf07bxkr8oc.ywufsjhc4.jp/mume/imgs/tn02_backimg.jpg);
  width: 100%; min-height: 100vh;
  background-size: cover; background-position: top center;
  position: fixed; z-index: -2; top: 0;
}

/* Voice Sections */
.voice {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;    /* 改行させない */
  align-items: flex-start;
  margin-bottom: 30px;
  padding: 0 10px;      /* 画面端に少し余裕を持たせる */
}

/* アイコンとオンライン正円の配置 */
.fukidashi_icon {
  width: 27%;
  margin: -6px 0px 0px 30px;
  position: relative; /* 子要素(正円)の基準にする */
}

.fukidashi_text {
  width: 69%;
  padding-left: 7px;
   padding-top: 5px;
}
.typing-container { position: relative; }

/* Tap Reveal System */
.cover-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 20;
  cursor: pointer;
  transition: opacity 0.3s;
}

/* --- タップ後に出現するボタンのスタイル --- */
.after-open-btn {
    display: none;
    width: 120%;   
    margin-left: -10%; /* 左側に調整 */
    margin-top: 0px;
    animation: 
          fadeIn 0.5s ease forwards,
          dokidoki 1.5s infinite 0.5s; 
}

.voice.is-open .after-open-btn { display: block; }
.voice.is-open .cover-layer { display: none; }

/* 鼓動アニメーション */
@keyframes dokidoki {
    0%   { transform: scale(1.0); }
    5%   { transform: scale(1.05); }
    10%  { transform: scale(1.0); }
    15%  { transform: scale(1.05); }
    20%  { transform: scale(1.0); }
    100% { transform: scale(1.0); }
}

/* フェードイン */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Buttons */
.btn { width: 100%; margin: 3.5% auto 0; }
.btn a { display: block; }
.midashi_btn {
  margin: 0px auto;
  color: #ffffff;
  font-size: 0.4em;
  text-align: center;
  font-weight: bold;
}

/* TOP Video */
.top-visual-box {
  position: relative;
  width: 100%;
  line-height: 0;
}
.top-video {
  position: absolute;
  top: 11%;  
  left: 9%;  
  width: 82%; 
  height: auto;
  z-index: 10;
  background: none;
  border-radius: 35px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 98%, transparent 98%);
  mask-image: radial-gradient(ellipse at center, black 98%, transparent 98%);
  filter: blur(0.4px);
}

/* 動画の親コンテナ（基準位置） */
.last-movie-wrap {
  position: relative; /* ロゴを絶対配置する基準にする */
  width: 85%;         /* 動画のサイズ指定をここに移動 */
  margin: 0 auto;     /* 中央寄せ */
}

/* 動画本体 */
.last-movie {
  display: block;
  width: 100%; /* 親コンテナいっぱいに広げる */
  height: auto;
  border-radius: 8px;
}

/* 重ねるロゴ画像 */
.last-movie-logo {
  position: absolute;
  top: 74%;  /* 下からの距離 */
  left: 67%;   /* 右からの距離 */
  width: 36%;  /* ロゴのサイズ（動画に対する比率） */
  height: auto;
  z-index: 10; /* 動画より手前に表示 */
}

/* Floating Push Button */
div#push {
  position: fixed;
  bottom: 4%; right: 3%;
  width: 24%;
  z-index: 150;
}
div#push img {
  border-radius: 10px; 
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 15px 30px rgba(0, 0, 0, 0.7);
}

/* --- 吹き出し本体 --- */
.typing-bubble {
  background-color: #001529;   /* 紺色 */
  border: 1px solid #00ff6a;   /* 緑色の枠 */
  color: #fff;
  left: 4%;
  padding: 10px 12px;
  border-radius: 0 12px 12px 12px;
  display: block;
  width: 89%;
  min-height: 80px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  white-space: pre-wrap; 
  word-break: break-all;
  z-index: 10; /* しっぽより上に表示 */
}

/* タイピング中のみ表示されるカーソル */
.typing-bubble.is-typing::after {
  content: "|";
  margin-left: 2px;
  animation: blink 0.8s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* =========================================
   ▼ インスタ風ストーリー機能の追加スタイル ▼
   ========================================= */

.story-section {
  width: 100%;
  padding: 10px 15px;
}

/* 5列グリッド */
.story-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5等分 */
  gap: 15px 10px; /* 上下15px, 左右10px */
  justify-items: center;
}

.story-item {
  width: 100%;
  max-width: 65px; /* アイコンの大きさ調整 */
  cursor: pointer;
  position: relative;
}

/* --- グラデーションリング（未読） --- */
.story-item.unseen .story-ring {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  padding: 2px; /* リングの太さ */
  border-radius: 50%;
}

/* --- 既読状態（グレーリング） --- */
.story-item.seen .story-ring {
  background: #1ea556; /* 既読色 */
  padding: 2px;
  border-radius: 50%;
  opacity: 1; /* 少し薄くする */
}

/* --- 画像とリングの間の隙間 --- */
.story-inner {
  background: #000; /* 背景色の黒に合わせる */
  padding: 2px;     /* 隙間の太さ */
  border-radius: 50%;
  display: flex;
}

.story-inner img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* --- 拡大表示モーダル --- */
.story-modal {
  display: none; /* 初期は非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; /* 最前面 */
  justify-content: center;
  align-items: center;
}

.story-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9); /* 背景を暗く */
}

.story-modal-content {
  position: relative;
  width: 90%;
  max-width: 500px;
  z-index: 10000;
  animation: popIn 0.3s ease;
}

.story-modal-content img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* =========================================
   ▼ シャボン玉アニメーション機能 ▼
   ========================================= */

.bubble-container {
  position: absolute;
  top: 11%; left: 9%; width: 82%; bottom: 24%;
  z-index: 15; pointer-events: none; overflow: hidden; border-radius: 35px;
}

.bubble-item {
  position: absolute;
  bottom: -50px;
  right: 10%; /* 出発点を統一 */
  width: 45px; height: 45px;
  opacity: 0;
}

.bubble-item img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}

/* 各シャボン玉に別々のアニメーションと時間を適用 */
/* bubble2の z-index を高く(10)、bubble3を低く(1)設定することで重なり順を制御 */
.bubble1 { animation: bubbleFloat1 12s linear infinite; animation-delay: 0s; }
.bubble2 { animation: bubbleFloat2 14s linear infinite; animation-delay: 2.5s; z-index: 10; }
.bubble3 { animation: bubbleFloat3 11s linear infinite; animation-delay: 5.0s; z-index: 1; }
.bubble4 { animation: bubbleFloat4 13s linear infinite; animation-delay: 7.5s; }
.bubble5 { animation: bubbleFloat5 12s linear infinite; animation-delay: 10.0s; }

/* --- 5種類の異なる軌道アニメーション --- */

/* ルート1: 左に大きく振れてから右へ */
@keyframes bubbleFloat1 {
  0%   { bottom: -50px; transform: translateX(0) scale(0.5); opacity: 0; }
  10%  { opacity: 2; }
  40%  { transform: translateX(-50px) scale(1.3); }
  70%  { transform: translateX(20px) scale(1.8); }
  100% { bottom: 120%; transform: translateX(-10px) scale(3.0); opacity: 0; }
}

/* ルート2: 右に振れてから左、最後に少し右へ */
@keyframes bubbleFloat2 {
  0%   { bottom: -50px; transform: translateX(0) scale(0.7); opacity: 0; }
  10%  { opacity: 2; }
  30%  { transform: translateX(30px) scale(1.7); }
  60%  { transform: translateX(-40px) scale(2.1); }
  100% { bottom: 120%; transform: translateX(10px) scale(3.0); opacity: 0; }
}

/* ルート3: ほぼまっすぐ上がりつつ、緩やかに左へ */
@keyframes bubbleFloat3 {
  0%   { bottom: -50px; transform: translateX(0) scale(0.5); opacity: 0; }
  10%  { opacity: 2; }
  20%  { transform: translateX(-20px) scale(1.5); }
  60%  { transform: translateX(30px) scale(1.9); }
  100% { bottom: 120%; transform: translateX(-40px) scale(3.0); opacity: 0; }
}

/* ルート4: ジグザグに昇る */
@keyframes bubbleFloat4 {
  0%   { bottom: -50px; transform: translateX(0) scale(0.5); opacity: 0; }
  10%  { opacity: 2; }
  25%  { transform: translateX(25px) scale(0.8); }
  50%  { transform: translateX(-25px) scale(1.6); }
  75%  { transform: translateX(25px) scale(2.0); }
  100% { bottom: 120%; transform: translateX(0px) scale(3.0); opacity: 0; }
}

/* ルート5: 大きく右に膨らんでから中央へ */
@keyframes bubbleFloat5 {
  0%   { bottom: -50px; transform: translateX(0) scale(0.5); opacity: 0; }
  10%  { opacity: 2; }
  50%  { transform: translateX(60px) scale(1.8); }
  100% { bottom: 120%; transform: translateX(20px) scale(3.0); opacity: 0; }
}