/* ▼タブ機能の掲載領域の装飾(※必須ではありません) */
.tabbox {
    margin: 0px;
    background-color: white;
    width: 360px;
    height: 400px;
}

/* ▼タブ機能を制御するラジオボタン(非表示にする) */
.tabbox #tabcheck1,#tabcheck2,#tabcheck3,#tabcheck4,#tabcheck5,#tabcheck6{
    display: none;
}

/* ▼タブ(共通装飾＋非選択状態の装飾) */
.tab {
    display: inline-block;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-color: black;
    border-radius: 0.75em 0.75em 0px 0px;
    padding: 0.5em 0.75em;
    color: black;
    background-color: #e0e0e0;
    font-weight: bold;
}

/* ▼タブにマウスポインタが載った際の装飾 */
.tab:hover {
    background-color: #ccffcc;
    color: green;
    cursor: pointer;
}

/* ▼チェックが入っているラジオボタンの隣にあるタブの装飾
(＝選択状態のタブ) */
input:checked + .tab {
    color: red;
    background-color: #ffffcc;
    position: relative;
    z-index: 10;
}

/* ▼タブの中身(共通装飾＋非選択状態の装飾) */
.tabcontent {
    display: none;
    border: 1px solid black;
    margin-top: -1px;
    position: relative;
    padding: 0em 0em;
    z-index: 0;
    background-color: #ffffcc;
}

/* ▼チェックが入っているラジオボタンに対応するタブの中身を
表示する */
#tabcheck1:checked ~ #tabcontent1 {
    display: block;
}
#tabcheck2:checked ~ #tabcontent2 {
    display: block;
}
#tabcheck3:checked ~ #tabcontent3 {
    display: block;
}
#tabcheck4:checked ~ #tabcontent4 {
    display: block;
}
#tabcheck5:checked ~ #tabcontent5 {
    display: block;
}
#tabcheck6:checked ~ #tabcontent6 {
    display: block;
}


/*基本設定*/
body, th, td {
    font-family:sans-serif;
    font-size:10px;
}

input {
    font-family:sans-serif;
    font-size:8px;
    width: 14px;
    text-align: right;
}

select {
    font-family:sans-serif;
    font-size:8px;
    text-align: right;
}

/*タイトル*/
.nmTitle {
    font-family:sans-serif;
    font-size:16px;
    text-align: left;
    color: black;
}
/*****************************************************************************/
/*貿易額・宝庫額・購入額・差額表示テーブル                                   */
/*****************************************************************************/
.tablePrice th{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border: solid 0.1px white;
    color: black;
    padding: 2px 0.5px;
    background-color:aquamarine;
}
.tablePrice td{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border:solid 0.1px white;
    color: black;
    padding: 2px 0.5px;
}
.tablePrice input.iptPrice {
    font-family:sans-serif;
    font-size:8px;
    width: 20px;
    text-align: right;
}
.tablePrice input.typbtn {
    width: 50px;
    text-align: center;
}


/*****************************************************************************/
/*文明カードタブ                                                             */
/*****************************************************************************/
/*文明カード・クレジットテーブル*/
.tableTotalCardCrdt th{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border: solid 0.1px white;
    color: black;
    padding: 2px 0.5px;
    background-color:aquamarine;
}
.tableTotalCardCrdt td{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border:solid 0.1px white;
    color: black;
    padding: 2px 0.5px;
}
.tableTotalCardCrdt input.iptTotal {
    font-family:sans-serif;
    font-size:8px;
/*    width: 12px;*/
    text-align: right;
}
.tableTotalCardCrdt input.iptCrdt {
    font-family:sans-serif;
    font-size:8px;
/*    width: 16px;*/
    text-align: right;
}

.totalCardHd{
    background-color:aquamarine;
}

/*****************************************************************************/
/*商品カードタブ                                                             */
/*****************************************************************************/
/*商品カードテーブル*/
.tableTrade th{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border: solid 0.1px #ffffcc;
    color: black;
    padding: 2px 0.5px;
    background-color:aquamarine;
}
.tableTrade tr:nth-child(2n){
    background-color: wheat;
}
.tableTrade td{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border:solid 0.1px #ffffcc;
    color: black;
    padding: 2px 0.5px;
}
.tableTrade input {
    font-family:sans-serif;
    font-size:8px;
    width: 15px;
    text-align: right;
}


/*追加購入と商品カードタブの全クリアの配置*/
.tableTradFlexBox{
    display: flex;
    align-items: flex-start;
    text-align: center;

    .tableTradeClear{
        padding-left: 40px;
    }
}

/*追加購入*/
.tableBuyToken th{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border: solid 0.1px #ffffcc;
    color: black;
    padding: 2px 0.5px;
    background-color:aquamarine;
}
.tableBuyToken tr:nth-child(2n){
    background-color: wheat;
}
.tableBuyToken td{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border:solid 0.1px #ffffcc;
    color: black;
    padding: 2px 0.5px;
}

/*商品カードタブの全クリア*/
.tableTradeClear th{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border: solid 0.1px #ffffcc;
    color: black;
    padding: 2px 0.5px;
    background-color:aquamarine;
}
.tableTradeClear input.typbtn {
    width: 60px;
    text-align: center;
}

/*****************************************************************************/
/*文明カードテーブル                                                         */
/*****************************************************************************/
/*thead.tableCivilizationhead, tbody.tableCivilizationbody {
  display: block;
}
tbody.tableCivilizationbody {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 400px;
}*/
#tabcontent2{
  overflow-x: hidden;
  overflow-y: scroll;
  height: 400px;
}

.cvChkBox   {   width: 10px;   }
.cvStrategy {   width: 10px;   }
.cvCard     {   width: 85px;   }
.cvPrice    {   width: 15px;   }
.cvVp       {   width: 10px;   }
.cvCrafts   {   width: 12px;   }
.cvScience  {   width: 12px;   }
.cvArts     {   width: 12px;   }
.cvCivics   {   width: 12px;   }
.cvReligion {   width: 12px;   }
.cvAddition {   width: 12px;   }

.tableCivilization th{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border: solid 0.1px #ffffcc;
    color: black;
    padding: 2px 0.5px;
    background-color:aquamarine;
}
.tableCivilization tr:nth-child(2n){
    background-color: wheat;
}
.tableCivilization td{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border:solid 0.1px #ffffcc;
    color: black;
    padding: 2px 0.5px;
}
.tableCivilization input {
    font-family:sans-serif;
    font-size:8px;
    width: 16px;
    text-align: right;
}

/*** 技術/宗教 ***/
.nameCvCraftsReligion {
    background-image: linear-gradient(90deg, orange 10%, yellow 90%);
}
/*** 技術/科学 ***/
.nameCvCraftsScience {
    background-image: linear-gradient(90deg, orange 10%, lightgreen 90%);
}
/*** 芸術/技術 ***/
.nameCvArtsCrafts {
    background-image: linear-gradient(90deg, lightskyblue 10%, orange 90%);
}
/*** 芸術/社会 ***/
.nameCvArtsCivics {
    background-image: linear-gradient(90deg, lightskyblue 10%, tomato 90%);
}
/*** 芸術/科学 ***/
.nameCvArtsScience {
    background-image: linear-gradient(90deg, lightskyblue 10%, lightgreen 90%);
}
/*** 芸術/宗教 ***/
.nameCvArtsReligion {
    background-image: linear-gradient(90deg, lightskyblue 10%, yellow 90%);
}
/*** 社会/科学 ***/
.nameCvCivicsScience {
    background-image: linear-gradient(90deg, tomato 10%, lightgreen 90%);
}
/*** 社会/宗教 ***/
.nameCvCivicsReligion {
    background-image: linear-gradient(90deg, tomato 10%, yellow 90%);
}
/*** 宗教/科学 ***/
.nameCvReligionScience {
    background-image: linear-gradient(90deg, yellow 10%, lightgreen 90%);
}
/*** 技術 ***/
.nameCvCrafts {
    background-color: orange;
}
/*** 科学 ***/
.nameCvScience { 
    background-color: lightgreen;
}
/*** 芸術 ***/
.nameCvArts {
    background-color: lightskyblue;
}
/*** 社会 ***/
.nameCvCivics {
    background-color: tomato;
}
/*** 宗教 ***/
.nameCvReligion {
    background-color: yellow;
}


/*****************************************************************************/
/*特性クレジットテーブル                                                     */
/*****************************************************************************/
.tableAttributeCv th{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border: solid 0.5px #ffffcc;
    color: black;
    padding: 2px 0.5px;
    background-color:aquamarine;
}
.tableAttributeCv tr:nth-child(2n){
    background-color: wheat;
}
.tableAttributeCv td{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border:solid 0.5px #ffffcc;
    color: black;
    padding: 2px 0.5px;
}


/*****************************************************************************/
/*災害テーブル                                                               */
/*****************************************************************************/
/*thead.tableCalamityhead, tbody.tableCalamitybody {
  display: block;
}
tbody.tableCalamitybody {
  overflow-x: hidden;
  overflow-y: scroll;
}*/

#tabcontent4{
  overflow-x: hidden;
  overflow-y: scroll;
  height: 400px;
}

.clmtyLv{   width: 12px;    }
.clmtyNm{   width: 90px;    }
.clmtyTg{   width: 50px;    }
.clmtyEf{   width: 180px;   }
.clmtyCv{   width: 105px;   }

.tableCalamity th{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border: solid 0.1px #ffffcc;
    color: black;
    padding: 2px 0.5px;
    background-color:aquamarine;
}
.tableCalamity tr:nth-child(2n){
    background-color: wheat;
}
.tableCalamity td{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border:solid 0.1px #ffffcc;
    color: black;
    padding: 2px 0.5px;
}

.clmtyPls   { color: blue;    }
.clmtyMns   { color: red;     }
.cvPls      { color: green;   }
.cvMns      { color: crimson; }

/*小災害*/
.cvMinorCamty   { color: blue; }


/*****************************************************************************/
/*グループ別文明テーブル                                                     */
/*****************************************************************************/
.tableGroup th{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border: solid 0.5px #ffffcc;
    color: black;
    padding: 2px 0.5px;
    background-color:aquamarine;
}
.tableGroup tr:nth-child(2n){
    background-color: wheat;
}
.tableGroup td{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border:solid 0.5px #ffffcc;
    color: black;
    padding: 2px 0.5px;
}


/*****************************************************************************/
/*オプションテーブル                                                         */
/*****************************************************************************/

/*** オプション01 ***********************************************************/
.tableOption1 th{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border: solid 0.1px #ffffcc;
    color: black;
    padding: 2px 0.5px;
    background-color:aquamarine;
}
.tableOption1 tr:nth-child(2n){
    background-color: wheat;
}
.tableOption1 td{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border:solid 0.1px #ffffcc;
    color: black;
    padding: 2px 0.5px;
}


/*** オプション02 ***********************************************************/
.tableOption2 th{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border: solid 0.1px #ffffcc;
    color: black;
    padding: 2px 0.5px;
    background-color:aquamarine;
}
.tableOption2 tr:nth-child(2n){
    background-color: wheat;
}
.tableOption2 td{
    font-family:sans-serif;
    font-size:10px;
    text-align: left;
    border:solid 0.1px #ffffcc;
    color: black;
    padding: 2px 0.5px;
}