/* ===== PC画面中央にiPhone15サイズ表示 ===== */
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #333;
  font-family: "Zen Maru Gothic", sans-serif;
}

.wrapper {
  width: 390px;
  height: 100vh;
  /* height: 760px; */
  position: relative;
  overflow: hidden;
  border: 1px solid #999;
  background: #000;
}

/* ===== ページ ===== */
.page {
  position: absolute;
  inset: 0;
  display: none;
  background-size: cover;
  background-position: center;
}

.page.active {
  display: block;
}

/* ===== 背景画像 ===== */
#pageA { background-image: url("left@2x.png"); }
#pageB { background-image: url("main@2x.png"); }
#pageC { background-image: url("right@2x.png"); }

#pageA {
  background-image: url("left@2x.png");
  background-position: 45% center; /* ← 50%より左 */
}

/* ===== フッター（見えるタップ領域） ===== */
.footer {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  height: 150px;
  display: flex;
  z-index: 2000;
}

.logo {
  position: absolute;
  top: 40px;              /* ← 上からの距離（好みで調整） */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
}
.pointing{
  position: absolute;
  top: 280px;              /* ← 上からの距離（好みで調整） */
  left: 60px;
  transform: translateX(-50%);
  z-index: 1500;
}
.pointing2{
  position: absolute;
  top: 460px;              /* ← 上からの距離（好みで調整） */
  left: 330px;
  transform: translateX(-50%);
  z-index: 1500;
}
@keyframes poke {
  0%   { transform: translateX(-50%) translateX(0); }
  20%  { transform: translateX(-50%) translateX(4px); }
  40%  { transform: translateX(-50%) translateX(0); }
  60%  { transform: translateX(-50%) translateX(-4px); }
  80%  { transform: translateX(-50%) translateX(0); }
  100% { transform: translateX(-50%) translateX(0); }
}
.pointing,
.pointing2 {
  position: absolute;
  z-index: 1500;
  animation: poke 1.8s ease-in-out infinite;
}

/* タップ領域 */
.footer .hit {
  flex: 1;
  cursor: pointer;

  /* ★ 見えるようにする設定 */
  background: rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(255,255,255,0.3);
}

/* 区切り線 */
.footer .hit:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.3);
}

/* 押した時の反応 */
.footer .hit:active {
  background: rgba(255,255,255,0.35);
}

.time-card {
  position: absolute;
  top: 130px;              /* ← 上からの距離（好みで調整） */
  left: 50%;
  transform: translateX(-50%);
  color: black;
  z-index: 1000;
white-space: nowrap;
}
.time-card1 {
  position: absolute;
  top: 280px;              /* ← 上からの距離（好みで調整） */
  left: 50%;
  transform: translateX(-50%);
  color: black;
  z-index: 1000;
white-space: nowrap;

}
.time-card2{
  position: absolute;
  top: 130px;              /* ← 上からの距離（好みで調整） */
  left: 20px;
  color: black;
  z-index: 1000;
white-space: nowrap;


}
.time-card2 {
  
  font-size: 12px;      /* 基本サイズ */
  color: #000;
}

.time-card2 .station {
  font-size: 16px;      /* ← ここを大きく */
  font-weight: 600;     /* 少し強調（任意） */
}
.time-card3{
  position: absolute;
  top: 310px;              /* ← 上からの距離（好みで調整） */
  right: 20px;
  color: black;
  z-index: 1000;
white-space: nowrap;

}
.time-card3 {

  font-size: 12px;
  color: #000;
}

.station {
  font-size: 16px;   /* 大きく */
  font-weight: 600;
}

#pageA .beige-box {
  position: absolute;
  top: 160px;
  left: 50%;
  transform: translateX(-50%);             /* ← 左寄せ */
  width: 210px;
  height: 80px;
  background: #ecd5bc;
  z-index: 1000;
  padding: 16px 20px;
}
#pageA .beige-box1 {
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translateX(-50%);           /* ← 左寄せ */
  width: 168px;
  height: 50px;
  background: #ecd5bc;
  z-index: 1000;
  padding: 16px 20px;
}
#pageA .beige-box2 {
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translateX(-50%);              /* ← 左寄せ */
  width: 168px;
  height: 50px;
  background: #ecd5bc;
  z-index: 1000;
  padding: 16px 20px;
}

/* ===== PageB 専用の黄色ボックス ===== */
#pageB .yellow-box {
  position: absolute;
  top: 160px;
  left: 0px;              /* ← 左寄せ */
  width: 210px;
  height: 80px;
  background: #F0BE45;
  z-index: 1000;
  padding: 16px 20px;
}
#pageB .blue-box {
  position: absolute;
  top: 340px;
  right: 0px;             /* ← 右寄せ */
  width: 210px;
  height: 80px;
  background: #7F949B;
  
  z-index: 1000;
  padding: 16px 20px;
}

.worh {
  position: absolute;      /* ← absolute ではなく fixed */
  bottom: 210px;        /* ← ボタンより少し上 */
  left: 50%;
  transform: translateX(-50%);

  color: #c66e52;
  z-index: 1000;

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

 
  font-size: 13px;
}
@keyframes softBounce {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  30% {
    transform: translateX(-50%) translateY(-6px);
  }
  55% {
    transform: translateX(-50%) translateY(0);
  }
  75% {
    transform: translateX(-50%) translateY(-3px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}
#pageB.active .worh {
  animation: softBounce 0.8s ease-out;
}

.round-btn {
  width: 160px;          /* 横長 */
  height: 20px;          /* 高さはそのまま */
  border-radius: 28px;   /* 角丸（高さの半分が目安） */
  background-color: #c66e52;
  position: absolute;
  bottom: 180px;
  left: 50%;
  transform: translateX(-50%);

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

  color: #fff;        /* ← 白文字 */
  font-size: 12px;     /* ← 文字を小さく */

  z-index: 1000;
}
#pageC .beige-box {
  position: absolute;
  top: 160px;
  left: 50%;
  transform: translateX(-50%);            /* ← 左寄せ */
  width: 210px;
  height: 80px;
  background: #ecd5bc;
  z-index: 1000;
  padding: 16px 20px;
}
#pageC .beige-box1 {
  position: absolute;
  top: 300px;
 left: 50%;
  transform: translateX(-50%);             /* ← 左寄せ */
  width: 168px;
  height: 50px;
  background: #ecd5bc;
  z-index: 1000;
  padding: 16px 20px;
}
#pageC .beige-box2 {
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translateX(-50%);              /* ← 左寄せ */
  width: 168px;
  height: 50px;
  background: #ecd5bc;
  z-index: 1000;
  padding: 16px 20px;
}

.beige-box,.beige-box1,.beige-box2, 
.yellow-box,.blue-box
{
  display: flex;
  flex-direction: column;   /* 縦並び */
  justify-content: center;  /* 縦中央 */
  align-items: center;      /* 横中央 */
}
span[data-format="hh:mm"] {
  font-size: 30px;
  font-weight: 600;
}

span[data-format^="(残り"] {
  font-size: 18px;
  opacity: 0.8;
}
.beige-box,
.beige-box1,
.beige-box2,
.yellow-box,
.blue-box {
  line-height: 0.9;   /* ← 小さくするほど詰まる */
}