/* 1. ブラウザ独自の余白をすべて消す */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background-color: #f5f5f5 !important;
}

/* 2. 見出しのデザイン調整 */
.title-bar {
    width: 100%;
    height: 100px;
    margin: 0;          /* 外側の余白をゼロに */
    padding: 15px 20px 15px 20px; 
    text-align: left;        /* 左寄せ */
    background-color: #C5F3FF !important;
    color: #1557b0 !important;
    box-sizing: border-box; /* パディングを含めて100%にする */
    font-weight: bold;

    /* 左右端に分けつつ、上下中央に揃える設定 */
    display: flex;
    justify-content: space-between; /* 左右に振り分け */
    align-items: center;            /* これで上下中央になります */
}

.title-bar span:first-child {
    font-size: 1.7rem;     /* 高さに合わせて少し大きくしても良いでしょう */
}

/* 右側の文字専用のスタイル */
.title-bar .admin-btn {
    font-size: 14px;       /* メインより小さく設定 */
    color: #222;           /* 少し薄い色に */
    padding-right: 10px;   /* 右端に少しだけ隙間を作る */
}


.report-type {
  display: flex;
  background-color: #DCF3FA;
  height: 20px;
  padding: 20px;
}

.report-type a,
.report-type p {
  font-size: 18px;
  padding: 5px 25px;
  margin: 0;
  display: flex;
  align-items: center;
}

.report-type a {
  text-decoration: none;
}

.report-type p {
  font-weight: bold;
  color: black;
}

.report-type a:not(:last-child),
.report-type p:not(:last-child) {
  border-right: 1px solid #999;
}

.stations {
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 15px 20px;
    background-color: #E9F4EF;
    color: #1557b0 !important;
    box-sizing: border-box;
    text-align: left; /* 基本は左寄せ */

    /* 左右端に分けつつ、上下中央に揃える設定 */
    display: flex;
    align-items: center;            /* これで上下中央になります */
    gap: 10px;             /* 要素間の隙間 */
}

.stations .station-combo {
    font-size: 18px;
    font-weight: bold;
    width: 20%; 
    height: 60%;
    box-sizing: border-box; /* 枠線込みで計算 */
}

.stations #year-picker {
    width: 180px; 
}

.top-btn {
    margin-left: auto;     /* これで右端へ */
    padding: 6px 12px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.top-btn:hover {
    background-color: #45a049;
}


.text-box {
    width: 100%;
    max-width: 1200px;      /* 広がりすぎないように制限 */
    background-color: #ffffff;
    padding: 25px;
    border-radius: 12px;   /* 角丸 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ほんのり影をつける */
    border: 1px solid #e0e0e0; /* 薄い枠線 */
    box-sizing: border-box;
    text-align: center;     /* 中央寄せ */
}

.text-box p {
    /* 行間を詰める（1.0が文字の高さちょうど、1.2〜1.3が読みやすく詰まった感じ） */
    line-height: 1.3; 
    
    /* 段落自体の上下の余白も調整 */
    margin-top: 5px;   /* 上の要素との隙間を小さく */
    margin-bottom: 5px; /* 下の要素との隙間を小さく */
}

/* 最終行だけを右寄せにする設定 */
.last-line {
    margin-top: 10px;      /* 上の文章との間隔 */
    margin-bottom: 0;      /* 下の余白をリセット */
    color: #888;           /* 少し薄い色にすると補助情報らしくなります */
    font-size: 12px;       /* 文字を少し小さく */
    font-weight: normal;
}


.data-area {
    padding: 40px 20px;
    background-color: #ffffff !important;
    min-height: 500px;
}


.spacer {
    padding: 40px 20px;
    background-color: #ddf0f0 !important;
    min-height: 200px;
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: flex-start; /* 上側に寄せる */
}

/* 3. マップを横幅いっぱいにする */
#map {
    width: 100%;        /* 親要素（body）に対して100% */
    height: 750px;      /* 高さは適宜調整してください */
    margin: 0;
}


/* Google標準の「白い箱」を透明化 */
.gm-style .gm-style-iw-c {
    background-color: transparent !important; /* 背景を透明に */
    box-shadow: none !important;              /* 周りの影を消す */
    border: none !important;                   /* 枠線を消す */
    padding: 0 !important;
}

.gm-style-iw-d {
    background-color: transparent !important;
    overflow: hidden !important;
}

/* フェードインのアニメーション定義 */
@keyframes fadeInMove {
    0% {
        opacity: 0;
        transform: translateY(10px); /* 少し下から浮き上がる効果 */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 自作コンテナ */
.custom-iw-container {
    animation: fadeInMove 0.2s ease-out; /* 0.2秒かけて表示 */
    
    width: 250px;
    background-color: white; 
    border-radius: 8px;
    overflow: hidden;
    /* Googleの影を消した代わりに、ここで綺麗な影を付け直します */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
    display: flex;
    flex-direction: column;
}

/* タイトル部  */
div.custom-iw-title {
    background-color: #1557b0 !important;
    color: #ffffff !important;
    padding: 10px 35px 10px 12px !important; /* 右側に×ボタン用のスペース */
    font-weight: bold !important;
    font-size: 20px;
    margin: 0 !important;
    
    text-align: center; /* 文字を中央へ */
    display: flex;      /* 上下の中央揃えも確実にする場合 */
    justify-content: center;
    align-items: center;
    min-height: 40px;   /* 高さを固定するとより綺麗に見えます */
}

/* メッセージ部 */
.custom-iw-body {
    padding-top: 9px;
    padding-left: 12px;
}

.info_value_container {
    padding-top: 12px !important;
}

.info_value_name {
    color: #000000 !important;
    background-color: #EEEEEE;
    padding: 6px !important;
    margin: 0 !important;
    font-size: 14px;
    text-align: left;
}

.info_value {
    color: #333333 !important;
    padding: 6px !important;
    margin: 0 !important;
    font-size: 18px;
    font-weight: bold !important;
    text-align: left;
}

.info_date {
    color: #333333 !important;
    background-color: #EEEEEE;
    padding: 6px !important;
    margin: 0 !important;
    font-size: 14px;
    font-weight: bold !important;
    text-align: left;
}

.info_link {
    color: #1a73e8 !important;
    padding: 12px !important;
    margin: 0 !important;
    font-size: 16px;
    font-weight: bold !important;  /* ボールド（太字） */
    text-align: left;
}

/* --- ×ボタン自体の位置とサイズを調整 --- */
.gm-ui-hover-effect {
    top: 22px !important;      /* 上端に合わせる */
    right: 4px !important;    /* 右端に合わせる */
    width: 32px !important;  /* ボタンのクリックエリアの幅 */
    height: 32px !important; /* ボタンのクリックエリアの高さ（タイトルの高さに合わせる） */
    padding: 0 !important;
    margin: 0 !important;
}

/* --- ×ボタンの中の「アイコン（画像）」のサイズと位置 --- */
.gm-ui-hover-effect img {
    width: 14px !important;  /* バツ印そのものを小さく */
    height: 14px !important;
    margin: 9px !important;  /* ボタンエリア内での中央配置調整（ (32-14)/2 = 9 ） */
    filter: invert(1) !important; /* 青背景で見えるように白くする */
}

.gm-ui-hover-effect:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* --- タイトルバー側の調整（ボタンと重ならないようにする） --- */
div.custom-iw-title {
    background-color: #1557b0 !important;
    color: #ffffff !important;
    padding: 8px 35px 8px 12px !important; /* 右側の余白(35px)をしっかり取ってボタン領域を確保 */
    min-height: 32px; /* ボタンの高さに合わせる */
    box-sizing: border-box;
    transition: background-color 0.2s; /* ホバー時の色の変化を滑らかに */
}

div.info_link:hover {
    cursor: pointer; /* カーソルを指の形に */
}
div.custom-iw-title:hover {
    background-color: #000064 !important; /* ホバー時に少し濃い青にする */
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
  font-family: Arial, sans-serif;
}

th, td {
  padding: 12px 15px;
  border: 1px solid #cce6ff; /* 薄い水色の境界線 */
  overflow-wrap: anywhere;
}

tr:nth-child(even) {
  background-color: #e6f7ff; /* 薄い水色の交互背景 */
}

th {
  font-size: 14px;
  background-color: #4db8ff; /* 明るめの水色ヘッダー */
  color: white;
  text-align: center;
}

td {
  text-align: right;  /* データ行は基本右寄せ */
}

td:first-child {
  text-align: left;   /* 1列目だけ左寄せ */
}

td:not(:first-child) {
  padding-right: 5px;
}

/* 8列目(MP3再生)だけ中央揃え＆背景強調 */
.daily-table td:nth-child(8) {
  text-align: center;
  background-color: #aaeeff; /* 交互色より少し濃い水色で強調 */
}

#month-top,
#year-top,
#year-sub {
  font-size: 24px;
  text-align: center;
}

#headerTable {
  margin-left: auto;
  margin-right: auto;
}

#dataTable,
#dataTableL {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}


#dataTable td:first-child,
#dataTable th:first-child {
  width: 55px;
}

#headerTable th, td {
  padding: 1px;
  background-color: #fff;
  border: 1px solid #000;
}

#topTablePub,
#dataTablePub {
  width: 100%;
  max-width: 800px;
}

.download-area{
  display:flex;
}

#downloadBtn,
#downloadBtnL{
  margin-left:auto;
}

.marker-container {
    position: relative;
    cursor: pointer;
}

.marker-img {
    width: 28px;
    height: 41px;
    transition: transform 0.2s;
}

.custom-label {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    background: rgb(0, 60, 120);
    color: white;
    padding: 2px 6px;
    font-size: 12px;
    white-space: nowrap;
}