@charset "utf-8";


/*
 * 共通
 */

/* ページ全体 */
body {
    font-family: sans-serif;
    line-height: normal;
}

/* コンテンツ全体 */
article {
    padding: 0.5em;
}

/* リンク共通 */
a {
    color: #f0f8ff;
    text-decoration: none;
}

/* リンク共通（マウスオーバー時） */
a:hover {
    text-decoration: underline;
}

/* ボタン共通 */
input[type="button"] {
    appearance: none;
    user-select: none;
    margin: 0.1em 0.2em;
    border: 1px solid #606060;
    border-radius: 0.25em;
    background-color: transparent;
    color: #202020;
    font-size: 85%;
}

/* ボタン共通：押下時 */
input[type="button"]:active {
    box-shadow: 0 0 0.25em #6080c0;
    border-color: #6080c0;
    background-color: #6080c0;
    color: #f0f0f0;
}

/* ボタン共通：マウスオーバー時（PCのみ） */
@media (any-hover: hover) {
    input[type="button"]:hover {
        box-shadow: 0 0 0.25em #6080c0;
        border-color:#6080c0;
        cursor: pointer;
    }
}

/* テーブルセルの flex 化 */
table .flexcell {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex-direction: column;
}

/* 通知領域 */
#notice {
    color: red;
    font-size: 80%;
}


/*
 * ラベル共通
 */

/* 設定フォーム内の選択OFF */
span.label_off {
    border-color: #d0d0d0 !important;
    color: #a0a0a0 !important;
    background-color: #f8f8f8 !important;
}


/*
 * 表形式ラベル
 */

/* 共通 */
span.label_pov {
    display: inline-block;

    padding: 0 0.2em;
    width: 8em;

    border-style: solid;
    border-width: 1px 1px 1px 0.5em;
    border-radius: 0.2em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-align: left;
    font-size: 75%;
    color: #404040;
}

/* 交易県別 */
span.label_pov0 {
    border-color: #202020;
    background-color: #ffffff;
}

/* トレンド別 */
span.label_pov1 {
    border-color: #202020;
    background-color: #ffffff;
}

/*
 * 大流行ラベル
 */

/* 共通 */
span.label_trend {
    display: inline-block;

    padding: 0 0.2em;
    width: 4.5em;

    border-style: solid;
    border-width: 1px 1px 1px 0.5em;
    border-radius: 0.2em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-align: center;
    font-size: 75%;
    color: #404040;
}

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

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

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

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

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

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

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

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


/*
 * 交易圏ラベル
 */

/* 共通 */
span.label_region {
    display: inline-block;

    padding: 0 0.2em;
    width: 8em;

    border-style: solid;
    border-width: 1px 1px 1px 0.5em;
    border-radius: 0.2em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-align: left;
    font-size: 75%;
    color: #404040;
}

/* 北海、東地中海、西地中海 */
span.label_region0,
span.label_region1,
span.label_region2 {
    border-color: #40B381;
    background-color: #E0F2EA;
}

/* 西アフリカ、南アフリカ、東アフリカ */
span.label_region3,
span.label_region4,
span.label_region5 {
    border-color: #FFF440;
    background-color: #FFFDE0;
}

/* 西インド、東インド */
span.label_region6,
span.label_region7 {
    border-color: #EC405A;
    background-color: #FBE0E4;
}

/* 香料諸島、東アジア、極東 */
span.label_region8,
span.label_region9,
span.label_region10 {
    border-color: #9B4DA3;
    background-color: #EEE2F0;
}

/* オセアニア、オセアニア東 */
span.label_region11,
span.label_region12 {
    border-color: #4081BE;
    background-color: #E0EAF4;
}


/* 太平洋 */
span.label_region17 {
    border-color: #40A4DC;
    background-color: #E0F0F9;
}

/* 北極圏 */
span.label_region13 {
    border-color: #A0A0A0;
    background-color: #FFFFFF;
}

/* 南アメリカ、東アメリカ、西アメリカ */
span.label_region14,
span.label_region15,
span.label_region16 {
    border-color: #F08840;
    background-color: #FCEBE0;
}


/*
 * 日時ラベル
 */

 /* 日付 */
span.label_date {
    display: block;
    font-size: 75%;
}

 /* 時刻 */
span.label_time {
    display: block;
}


/*
 * 季節変動
 */

/* 見出し */
span.label_season_header {
    display: inline-block;

    padding: 0 0.2em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-align: center;

    font-size: 90%;
    font-weight: bold;

    color: #606060;
}

/* 共通 */
span.label_season {
    display: inline-block;

    padding: 0 0.2em;
    width: 2em;

    border-style: none;
    border-width: 1px 1px 1px 1px;
    border-radius: 0.2em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-align: center;
    font-size: 85%;
}

/* 増産 */
span.label_season_up {
    background-color: #80c880;
    color: #E4F4E6;
}

/* 減産 */
span.label_season_down {
    background-color: #E87880;
    color: #FBE0E4;
}

/* 変化なし */
span.label_season_none {
    background-color: none;
    color: #a0a0a0;
}


/*
 * ヘッダー
 */

/* ヘッダー表示エリア */
header {
    color: #f0f8ff;
    background-color: #6080c0;
}

/* ページタイトル */
h1 {
    margin: 0;
    padding: 0.2em 0.5em;
    text-align: center;
    font-size: 150%;
}

/* ヘッダーナビゲーション */
#header_navi {
    border-top: 1px solid #b0c0f0;
    padding: 0.2em 0.5em;
    background-color: #6080c0;
}

/* ヘッダーナビゲーション：アイテムリスト */
#header_navi ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    font-size: 80%;
}

/* ヘッダーナビゲーション：アイテム */
#header_navi ul > li {
    list-style: none;
}

/* ヘッダーナビゲーション：リンク */
#header_navi ul > li a {
    color: #f0f8ff;
}

/* ヘッダーナビゲーション：リンク（訪問済み） */
#header_navi ul > li a:visited {
    color: #f0f8ff;
}


/*
 * 設定フォーム
 */

/* 設定フォーム表示エリア */
#form {
    overflow: auto;
    max-width: 1600px;
    border: none;
    border-radius: 1em;
    background-color: #f0f0f0;
    margin: 0.5em;
}

/* 設定フォーム：タイトル */
#form h2 {
    padding: 0.5em 1em;
    color: #606060;
    background-color: #e0e0e0;
/*    color: #606060; */
    font-size: 100%;
}

/* 設定フォーム：タイトル前画像 */
#form h2::before {
    display: inline-block;
    position: relative;
    top: -0.05em;
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.2em;
    content: '';
    background-image: url(../image/logo.png);
    background-size: contain;
    vertical-align: middle;
}

/* 設定フォーム全体 */
#form table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background-color: #f0f0f0;
}

/* 設定フォーム：セル共通 */
#form table th,
#form table td {
    border-style: solid none;
    border-width: 1px;
    border-color: #ffffff;
    padding: 0.5em;
}

/* 設定フォーム：見出し列 */
#form table th {
    width: 6em;
    font-size: 80%;
}

/* 設定フォーム：チェックボックス全体 */
#form label {
    display: inline-block;
    vertical-align: top;
}

/* 設定フォーム：ラジオボタン本体は非表示 */
#form label input[type="radio"] {
    display: none;
}

/* 設定フォーム：チェックボックス本体は非表示 */
#form label input[type="checkbox"] {
    display: none;
}


/*
 * 設定フォーム：各項目
 */

/* 設定フォーム：各項目：見出し共通 */
#area_form_pov,
#area_form_region,
#area_form_trend {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* 設定フォーム：各項目：ラベル共通 */
#area_form_pov label,
#area_form_region label,
#area_form_trend label {
    margin: 0.1em 0.2em;
    cursor: pointer;
    vertical-align: middle;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}


/*
 * 時刻表
 *
 * 見出しの固定方法は以下のWebサイトを参考にした
 *   https://csshtml.work/table-scroll/
 *   https://since-inc.jp/blog/8675
 */

/* 時刻表表示エリア */
#content {
    margin: 0.5em;
}

/* セル強調表示 */
#area_content table td.highlight {
    background-color: #f8c4c0 !important;
}

/* 時刻表表示エリア */
#area_content {
    overflow: auto;
    max-width: 1600px;
    max-height: 80vh;
    border: none;
    border-radius: 1em;
}

/* 時刻表全体 */
#area_content table {
    width: fit-content;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

/* 時刻表共通：セル共通 */
#area_content table th,
#area_content table td {
    border: 1px solid #ffffff;
}

/* 時刻表共通：1行目1列目を最前面にする */
#area_content table > thead th:first-child {
    z-index: 1;
}

/* 時刻表共通：見出し行に境界線を引く */
#area_content table > thead th:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border: 1px solid #ffffff;
}

/* 時刻表共通：見出し列に境界線を引く */
#area_content table > tbody th:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border: 1px solid #ffffff;
}

/* 時刻表共通：見出し列（交易圏別） */
#area_content table .column_head_0 {
    min-width: 7em;
    width: 7em;
}

/* 時刻表共通：内容列（交易圏別） */
#area_content table .column_body_0 {
    min-width: 4.5em;
    width: 4.5em;
}

/* 時刻表共通：見出し列（大流行別） */
#area_content table .column_head_1 {
    min-width: 4.5em;
    width: 4.5em;
}

/* 時刻表共通：内容列（大流行別） */
#area_content table .column_body_1 {
    min-width: 7em;
    width: 7em;
}

/* 時刻表共通：内容セル */
#area_content table td {
    padding: 0.5em 0;
    vertical-align: top;
}

/* 時刻表共通：内容セル内の要素 */
#area_content table > tbody div.flexcell span {
    margin: 0.2em;
}

/* 時刻表共通：見出し行 */
#area_content table > thead th {
    position: sticky;
    top: 0;
    left: 0;
    color: #f0f0f0;
    background-color: #687080;
}

/* 時刻表共通：見出し行：日跨ぎ列 */
#area_content table > thead th.column_border {
    width: 4px;
    background-color: #687080;
}

/* 時刻表共通：見出し行：現在時列 */
#area_content table > thead th.column_now {
    background-color: #5878b0;
    color: #f0f4ff;
}

/* 時刻表共通：内容行：見出し列 */
#area_content table > tbody th {
    position: sticky;
    top: 0;
    left: 0;
    background-color: #caccd0;
}

/* 時刻表共通：内容行：日跨ぎ列 */
#area_content table > tbody td.column_border {
    width: 4px;
    background-color: #687080;
}

/* 時刻表共通：内容行：奇数列 */
#area_content table > tbody td.row_even {
    background-color: #e0e0e0;
}

/* 時刻表共通：内容行：現在時列 */
#area_content table > tbody td.row_even.column_now {
    background-color: #ccd2e4;
}

/* 時刻表共通：内容行：偶数列 */
#area_content table > tbody td.row_odd {
    background-color: #f0f0f0;
}

/* 時刻表共通：内容行：偶数列 */
#area_content table > tbody td.row_odd.column_now {
    background-color: #e0e4f4;
}

/* 時刻表：ロゴ */
#button_refresh img {
    cursor: pointer;
    animation: button_refresh_click 0.2s ease-out 1;
}

/* 時刻表：ロゴ：アニメーション */
@keyframes button_refresh_click {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
    }
}


/*
 * 凡例
 */

/* 凡例全体 */
#legends {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0;
}

/* 凡例：タイトル */
#legends h2 {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.5em 1em;
    color: #606060;
    background-color: #e0e0e0;
    font-size: 100%;
}

/* 凡例：タイトル前画像 */
#legends h2::before {
    display: inline-block;
    position: relative;
    top: -0.05em;
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.2em;
    content: '';
    background-image: url(../image/logo.png);
    background-size: contain;
    vertical-align: middle;
}

/* 凡例：凡例エリア */
#legends .legend {
    overflow: auto;
    width: max-content;
    border: none;
    border-radius: 1em;
    margin: 0.5em;
}

/* 凡例：テーブル共通 */
#legends table {
    border-collapse:  collapse;
    background-color: #f0f0f0;
}

/* 凡例：テーブル：セル共通 */
#legends table th,
#legends table td {
    border-style: solid none;
    border-width: 1px;
    border-color: #ffffff;
}

/* 凡例：テーブル：ヘッダーセル共通 */
#legends table th {
    padding: 0 1em;
}

/* 凡例：テーブル：内容セル共通 */
#legends table td {
    padding: 0.2em;
}

/* 凡例：明細共通 */
#legends table td dl {
    display: block;
    font-size: 80%;
    line-height: 1.2em;
}

/* 凡例：明細：交易品目名 */
#legends table td > dl > dt {
    display: inline-block;
    width: 4em;
}

/* 凡例：明細：交易品相場 */
#legends table td > dl > dd {
    display: inline-block;
    width: 9em;
    font-size: 80%;
    color: #c06080;
}


/*
 * 凡例：大流行固有
 */

/* 凡例：大流行：テーブル：セル共通 */
#area_legend_trend table th,
#area_legend_trend table td {
    height: 3em;
}

/* 凡例：大流行：明細：交易品目名 */
#area_legend_trend table td > dl > dt {
    width: 4em;
}

/* 凡例：大流行：明細：交易品相場 */
#area_legend_trend table td  > dl > dd {
    width: 8em;
}


/*
 * 凡例：交易圏固有
 */

/* 凡例：交易圏：テーブル：セル共通 */
#area_legend_region table th,
#area_legend_region table td {
    height: 2em;
}

/* 凡例：交易圏：明細：交易圏正式名 */
#area_legend_region table td > dl > dt {
    width: 13em;
}

/* 凡例：交易圏：明細：交易圏詳細 */
#area_legend_region table td  > dl > dd {
    width: 20em;
}

/*
 * 凡例：季節変動固有
 */

#area_legend_season table {
    font-size: 80%;
}

 /* 凡例：季節変動：セル共通 */
#area_legend_season table th,
#area_legend_season table td {
    height: 2em;
}

/* 凡例：季節変動：見出し列 */
#area_legend_season table .column_head {
    width: 4em;
    padding: 0 0.5em;
}

/* 凡例：季節変動：データ列 */
#area_legend_season table .column_body {
    width: 2.5em;
    padding: 0;
}

/* 凡例：季節変動：余白列 */
#area_legend_season table .column_space {
    width: 1.5em;
    padding: 0;
}


/*
 * フッター
 */

/* フッター：注意書き表示エリア */
#footer_notes {
    width: auto;
    padding: 0.5em;
    text-align: left;
    font-size: 66%;
    color: #f04040;
}

/* フッター：注意書きリスト */
#footer_notes > ul {
    list-style: none;
    text-indent: -1.25em;
    padding-left: 1.25em;
}

/* フッター：注意書きリスト接頭辞 */
#footer_notes > ul > li::before {
    content: "※";
    margin-right: 0.25em;
}

/* フッター：コピーライト */
#footer_copyright {
    width: 100%;
    margin: 0;
    padding: 0.5em 0.5em;
    color: #f0f8ff;
    background-color: #6080c0;
    font-size: 75%;
    font-weight: bold;
    text-align: center;
}