@charset "utf-8";

/*
 * タイトル
 */

#header {
    display: flex;
    vertical-align: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

h1 {
    display: inline-block;
    margin-right: 2em;
    font-size: 150%;
}

h1::before {
    display: inline-block;
    content: '';
    background-image: url(./logo.png);
    background-size: contain;
    vertical-align: middle;
    margin-right: 0.2em;
    font-size: 150%;
    width: 1em;
    height: 1em;
}

/*
 * フォーム
 */

#form {
    margin: 1em 0;
    width: 100%;
}

#select_zone {
    display: inline-block;
    margin: 0 1em;
}

#select_trends {
    display: inline-block;
    margin: 0 1em;
}

#select_trends .check_trend {
    margin-right: 0.5em;
}

#select_trends label .trend {
    display: inline-block;
}


/*
 * 凡例
 */

#legend {
    margin: 1em 0;
}

#legend table.legend_table {
    border-collapse:  collapse;
    background-color: #f0f0f0;
}

#legend table.legend_table th,
#legend table.legend_table td {
    border-style: solid none solid none;
    border-width: 1px;
    border-color: #ffffff;
    margin: 0;
    padding: 0;
    width: auto;
    height: 3em;
}

#legend table.legend_table th {
    padding: 0 1em;
}

#legend table.legend_table td {
    padding: 0 0.2em;
}

#legend table.legend_table div.trend_detail {
    display: flex;
    margin: 0;
    padding: 0;
    font-size: 80%;
}

#legend table.legend_table .trend_detail > .item {
    display: inline-block;
    width: 4em;
}

#legend table.legend_table .trend_detail > .description {
    display: inline-block;
    width: 10em;
    padding-top: 0.3em;
    font-size: 80%;
    color: #c06080;
}


/*
 * 時刻表
 */

 /* 表共通 */
table {
    border-collapse:  collapse;
}

th, td {
    border: solid 1px;
    border-color: #ffffff;
    width: 3.5em;
}

td {
    height: 4em;
}

th.rh {
    padding: 0 0.25em;
    width: 4em;
}

/* 見出し行 */
thead th {
    background-color: #C19164;
}

/* 内容偶数行 */
tbody th.row_even,
tbody td.row_even {
    background-color: #e0e0e0;
}

/* 内容奇数行 */
tbody th.row_odd,
tbody td.row_odd {
    background-color: #f0f0f0;
}

/* 現在時のセル */
tbody td.now {
    background-color: #ffa0a0 !important;
}


/*
 * 大流行ラベル
 */

 /* 共通 */
 .trend {
    margin: 0.2em;
    padding: 0 0.2em;
    width: 3em;

    border-style: solid;
    border-width: 1px 1px 1px 0.5em;
    border-radius: 0.2em;
    text-align: center;
    font-size: 75%;
    color: #404040;
}

/* 贅沢 */
.trend1 {
    border-color: #990099;
    background-color: #F2E0F2;
}

/* 好況 */
.trend2 {
    border-color: #F6AA00;
    background-color: #FDF4E0;
}

/* 開発 */
.trend3 {
    border-color: #FF8082;
    background-color: #FFEFEF;
}

/* 後援 */
.trend4 {
    border-color: #4DC4FF;
    background-color: #E9F7FF;
}

/* 戦争 */
.trend5 {
    border-color: #005AFF;
    background-color: #E0EAFF;
}

/* 洪水 */
.trend6 {
    border-color: #03AF7A;
    background-color: #E0F5EE;
}

/* 伝染病 */
.trend7 {
    border-color: #FFF100;
    background-color: #FFFDE0;
}

/* フェス */
.trend8 {
    border-color: #FF4B00;
    background-color: #FFE9E0;
}


/*
 * フッター
 */

 #footer {
    width: 100%;
 }

 #footer_line {
    border-style: none;
    border-top-style: solid;
    border-width: 1px;
    border-color: #c0c0c0;
 }

 #footer_note {
    width: auto;
    text-align: left;
    font-size: 66%;
    color: #f04040;
 }

 #footer_note > ul {
    list-style: none;
    padding: 0;
 }

 #footer_note > ul > li::before {
    content: "※";
    margin-right: 0.25em;
 }

 #footer_sign {
    width: 100%;
    text-align: center;
    font-size: 75%;
    font-weight: bold;
    color: #808080;
 }