/* ページ全体の設定（PC） */
html {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

body {
	margin: 0 auto;          /* 中央寄せ */
	padding: 0px;           /* 余白 */
	box-sizing: border-box;
	background: #fffdf6;
}

/* ヘッダー・端まで広げる */
.bg-header {
  background-color: #989898;
  padding: 15px 0;  /* 上下の余白だけ */
}


/* メインコンテンツ */
.content-wrapper {
	max-width: 1200px;           /* 中央の最大幅 */
	margin: 20px auto;           /* 上下余白 + 中央寄せ */
	padding: 20px 30px;          /* 上下20px、左右40pxの余白 */
	background-color: #fffdf6;
}

/* 時刻・数字系は等幅にする */
.today-time,
.seconds,
.bus-time,
.bus-remaining,
.NEXT_Time,
.NEXT_min {
  font-variant-numeric: tabular-nums;
}

/* 見出し */
h1 {
	text-align: left;
	padding-left: 100px;
	font-size: 48px;         /* PCなので大きめ */
	margin-bottom: 20px;
	color: #ffffff;
}

/* 現在の日時 */
.day {
	text-align: left;
	font-size: 17px;
	margin-bottom: 3px;
	line-height: 1;  
	color: #4d4d4d;
	position: relative;
	min-height: 80px;
}

[data-type="clock"] {
  visibility: hidden;
  min-height: 1em;
}

.today-time {
	display: block;  /* 改行されて下に表示される */
	font-size: 40px; /* 必要に応じて大きさ変更 */
	margin-top: 5px; /* 日付との間隔 */
	line-height: 1;
	color: #4d4d4d;
	font-variant-numeric: tabular-nums;
}
.seconds {
  position: absolute;
  top: 42px;        /* 日付からの縦位置（微調整） */
  left: 125px;      /* 時刻の右側に配置 */
  font-size: 20px;
	color: #4d4d4d;
	width: 30px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}


/* 親コンテナ */
.bus-container {
    position: relative;
    display: block;          /* 画像幅に合わせる */
    margin: 0;          /* 上下の余白を調整 */
}


/* 上り画像 */
.bus-img {
    width: 600px;
    height: auto;
    display: block;
}

/* 切り替えボタン */
.direction {
    position: absolute;       /* 画像の上に重ねる */
    top: 23.5%;                 /* 上下中央 */
    left: 23.5%;                /* 左右中央 */
    transform: translate(-50%, -50%); /* 中心を基準に配置 */
}

.direction a {
  text-decoration: none;
}

.direction button {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #cbcbcb;
    border: solid 5px #fffdf6;
    border-radius: 30px;
    transition: background-color 0.3s, transform 0.05s;
}


/* マウスオーバー時 */
.direction button:hover {
	background-color: #d4d4d4; /* 少し濃くして押せる感を出す */
}

/* 押した時（クリック中のアニメーション） */
.direction button:active {
  transform: scale(0.97);
}

/* 線 */
hr {
	border: none;
	width: 50%; 
	height: 1.7px;
	background-color: #ccc;
	margin: 20px 0;
	margin-top: 40px;
	margin-bottom: 40px;
}

/* ゲージの枠 */
.bar {
  width: 50%;
  height: 10px;            /* 高さを少し太く */
  border-radius: 20px;
  overflow: hidden;
	background-color: #e5e5e5;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* ゲージ本体 */
.progress {
  height: 100%;
  width: 0%;
  background-color: #faaf3b; /* オレンジ */
  border-radius: 20px;
  transition: width 1s linear; /* 滑らかに伸びる */
}

/* 到着時刻 */
.bus-time {
	font-size: 140px;
	margin: 0;            /* 上下余白を削除 */
    line-height: 1;       /* 行間を詰める */
    display: inline-block; /* 左右に広がらないように */
    vertical-align: top;  /* 画像のすぐ下に配置 */
	color: #555555;
	margin-right: 20px; /* 残り時間との間隔 */
}

/* 「残り」「分」の文字 */
.bus-remaining-label {
	font-size: 27px;      /* 小さめ */
	color: #808080;       /* グレーなど落ち着いた色 */
	margin: 0 5px;        /* 左右の間隔 */
}

/* 数字部分 */
.bus-remaining {
  font-size: 45px;
  color: #f6921e;
}

.bus-time-wrapper {
    display: flex;          /* 横並び */
    align-items: baseline;  /* 文字のベースラインで揃える */
    gap: 10px;              /* 要素間のスペース */
}

/* next */

.next-img {
	position: absolute;
	width: 110px;
	height: auto;
	display: block;
	left: 350px;
}
.NEXT_min {
	position: absolute;
	font-size: 20px;
	color: #989898;
	left: 400px;
	top: 457px;
}

.NEXT_Time {
	position: absolute;
	font-size: 50px;
	color: #989898;
	left: 485px;
	top: 422px;
}
.next-divider {
    border: none;
    height: 2px;
    background-color: #ccc;
    width: 50%;
    margin: 110px 0; /* 上下の余白 */
}

/* 時刻表 */
.content-wrapper {
  position: relative; /* 絶対配置の基準にする */
}

.timetable {
  position: absolute;
	top: 0;              /* .content-wrapper の上端に揃える */
	margin-top: 20px;
	right: 50px;            /* 右端に配置 */
	width: 320px;
	height: 599px;
	background: white;
	border-radius: 22px;
	overflow: hidden;
}

.header {
  background: #ffb43b;
  color: #fff;
  padding: 14px 16px;
  font-size: 14px;
}

.row {
  display: grid;
  grid-template-columns: 52px repeat(5, 1fr);
  align-items: center;
  height: 45px;
  border-bottom: 1px solid #b5b5b5;
}

.hour {
  text-align: center;
  color: #ff9a00;
  font-weight: bold;
  font-size: 16px;
}

.min {
  text-align: center;
  color: #aaa;
  font-size: 14px;
}

/* 列位置（ズレの再現） */
.c2 { grid-column: 2; }
.c3 { grid-column: 3; }
.c4 { grid-column: 4; }
.c5 { grid-column: 5; }
.c6 { grid-column: 6; }

/* 次に来るバス */
.next {
  background: #a9a9a9;   /* 丸の色 */
  color: #fff;           /* 中の文字色 */
  width: 30px;           /* 大きさ */
  height: 30px;
  border-radius: 50%;    /* 丸にする */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  font-size: 14px;
  z-index: 10;
}

/* バスがないときに表示するウィンドウ */
.hidden {
  display: none;
}

#endWindow {
  position: absolute;
  top: 50%;
	left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* 他の要素より前面に表示 */
}

.we {
	position: absolute;
	color: #cbcbcb;
	top: 120px;
	left: 435px;

}