body {
  background-image: url('../img/4_bg.jpg');
  background-attachment: fixed;
  font-family: Meiryo UI, MS UI Gothic, Arial;
}

a {
  text-decoration: none;
}

table {
  empty-cells: show;
  border-spacing: 0px;
}

h1 {
  font-size: 20px;
  font-family: Meiryo UI, MS UI Gothic, Arial;
  font-weight: normal;
  margin-top: 8px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #808080;
  color: #f0f0f0;
  text-align: left;
}

h2 {
  font-size: 14px;
  font-family: Meiryo UI, MS UI Gothic, Arial;
  font-weight: normal;
  font-style: italic;
  margin-top: 30px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #808080;
  color: #c0c0c0;
  text-align: left;
}
/*
h2 a {
  float: right;
  color: #ba3838;
}
*/

img:hover + div.img_tips {
  display: block;
  z-index: 100;
}
a:hover + div.txt_tips {
  display: block;
  z-index: 100;
}

/* frame */
#frame {
  width: 950px;
  margin: 0 auto;
}

/* header */
#header {
  background-image: url('../img/4_bg.jpg');
  background-attachment: fixed;
  font-size: 12pt;
  position: fixed;
  top: 0px;
  z-index: 50;
}

#header table {
  width: 100%;
  border-bottom: #808080 1px solid;
  margin-bottom: 8px;
}

#header iframe {
  width: 140px;
  height: 55px;
  vertical-align: bottom;
}

#title {
  
}

#side {
  float: left;
  width: 180px;
  margin-top: 145px;
  margin-left: 5px;
}

#main {
  background-image: url('../img/4_ari.png');
  background-repeat: no-repeat;
  background-position: 50% 300px;
}

#contents {
  float: right;
  width: 750px;
  margin-top: 145px;
  margin-right: 3px;
}

/* footer */
#footer {
  margin-top: 10px;
}

#footer table {
  width: 100%;
  border-top: #808080 1px solid;
}

/* Top 画面 */
.top {
/*  margin-top: 150px;*/
  margin-top: 100px;
  margin-bottom: 20px;
}

/* Font */
.fnt_bold   { font-weight: bold; }
.fnt_normal { font-weight: normal; }
.fnt_italic { font-style: italic; }
.fnt_size08 { font-size: 8pt; }
.fnt_size09 { font-size: 9pt; }
.fnt_size10 { font-size: 10pt; }
.fnt_size11 { font-size: 11pt; }

/* Text */
.txt_right  { text-align: right; }
.txt_left   { text-align: left; }
.txt_center { text-align: center; }
.txt_top    { vertical-align: top; }
.txt_middle { vertical-align: middle; }
.txt_bottom { vertical-align: bottom; }

/* TOP 用 */
.lnk_top {
  float: right;
  font-size: 14px;
  font-style: italic;
  color: #ba3838;
  cursor: pointer;
}

/* copyright 表示用 */
.copy {
  font-size: 9pt;
  text-align: right;
}

/* Tooltip */
.img_tips {
  display: none;
  position: absolute;
  left: -253px;
  top: 0px;
  width: 250px;
  padding: 10px 0px;
  background-color:rgba(0, 0, 0, 0.65);
  color: #fff;
  text-align: center;
}
.txt_tips {
  display: none;
  position: absolute;
  width: 250px;
  padding: 10px 0px;
  background-color:rgba(0, 0, 0, 0.65);
  color: #fff;
  font-weight: normal;
  text-align: center;
}
.tip_guide {
  cursor: pointer;
  color: blue;
}

/* contents table 表示用 */
.tabl {
  width: 100%;
  border-spacing: 2px;
}

.bd_on {
  background: #dcdcc9;
  border: #404040 1px solid;
  position: relative;
}

/* 背景色 */
.bg_hilight  { background: #f7e3e3; }
.bg_white    { background: white; }
.bg_orange   { background: #ffcc99; }
.bg_clay     { background: #b9bcb3; }

/* 文字色 */
.col_green  { color: #00ff18; }
.col_orange { color: orange; }
.col_red    { color: red; }
.col_black  { color: black; }
.col_darkgreen  { color: #557544; }
.col_brown { color: #bb6521; }
.col_steelblue { color: #345b8c; }
.col_violetred { color: #cd29aa; }

/* 見出し */
.th_title_height { height: 26px; }
.th_color_orange { background: #cf9460; }
.th_color_purple {
  text-align: center;
  background: #9797bb;
}
.th_color_lightgray { background: #a4a6b6; }
.th_color_darkseagreen { background: #8fbc8f; }
.th_color_flowerblue { background: #959ed6; }

/* No.列 */
.col_no {
  height: 24px;
  width: 26px;
}

/* ---------------------------
 任務一覧用テーブル
--------------------------- */
.qth_col2 {               /* 任務内訳 */
  width: 250px;
 }
.qth_col3 {               /* 請負人 */
  width: 66px;
}
.qth_col4 {               /* 報酬 */
  
}
.qst_cond {               /* 任務受諾条件 */
    font-weight: normal;
    font-size: 8pt;
    color: red;
    float: right;
}
.rwd_col1 {               /* 報酬欄内の列1 (経験値など) */
    width: 90px;
}
.q_col1 {                 /* No. */
    text-align: right;
}
.q_col2 {                 /* 内訳 */
    line-height: 15px;;
    padding-left: 2px;
    padding-bottom: 2px;
    vertical-align: top;
    text-align: left;
}
.q_col3 {                 /* 請負人 */
    padding-top: 4px;
    text-align: center;
}
.q_col4 {                 /* 報酬 */
    padding: 0px;
    vertical-align: top;
}
.q_col5 {                 /* img */
    width: 66px;
    padding-top: 4px;
}

.q_desc {                 /* 任務説明文 */
  color: #935758;
  padding-top: 6px;
}

.q_cond {
  font-weight: bold;
  font-size: 9pt;
  padding-top: 4px;
}

/* ---------------------------
 傭兵一覧用テーブル
--------------------------- */
.anth_col1 {					/* 段No 見出し */
	background: #ffcccc;
}
.anth_col2 {					/* イメージ 見出し*/
	width: 300px;
	background: #ffcccc;
}
.anth_col3 {					/* 備考 見出し */
	background: #ffcccc;
}
.an_col1 {						/* 段 */
	width: 50px;
	text-align: center;
}
.an_col2 {						/* イメージ */
	
}
.an_col3 {						/* 備考 */
	
}
.an_img {
	padding-left: 4px;
	padding-top: 2px;
}

/* ---------------------------
 傭兵一覧用テーブル
--------------------------- */
.mth_col2 {               /* イメージ */
  width: 66px;
}
.mth_col3 {               /* 詳細 */
  width: 332px;
}
.mth_col4 {               /* ステータス */
  
}
.sts_col {                /* ステータス内の見出し */
  width: 70px;
}
.m_col1 {                 /* No. */
  text-align: right;
}
.m_col2 {                 /* イメージ */
  vertical-align: top;
}
.m_col3 {                 /* 詳細 */
  vertical-align: top;
  padding-left: 3px;
}
.m_desc {                 /* 雇用条件説明文 */
  font-size: 9pt;
  padding-top: 10px;
  color: #935758;
}
.s_col1 {                 /* スキル種別 */
  width: 80px;
}
.s_col2 {                 /* 発動 */
  width: 50px;
}
.s_col3 {                 /* 対象 */

}
.s_col4 {                 /* 属性 */

}
.s_col5 {                 /* 消費MP */
  width: 65px;
}
.s_col6 {                 /* 依存 */
  width: 73px;
}
.s_col7 {                 /* 対地 */

}
.s_col8 {                 /* 対空 */

}
.s_col9 {                 /* 備考 */
  width: 118px;
}

/* ---------------------------
 武器一覧用テーブル
--------------------------- */
.wth_col2 {					/* イメージ */
	width: 66px;
}
.wth_col3 {					/* 詳細 */
	width: 292px;
}
.wth_col4 {					/* 製造情報 */
	
}
.inf_col {						/* 製造情報内の見出し */
	width: 70px;
}
.inf_col1 {					/* 製造情報内の記述部 */
	width: 120px;
}
.w_col1 {						/* No. */
	text-align: right;
}
.w_col2 {						/* イメージ */
	vertical-align: top;
}
.w_col3 {						/* 詳細 */
	vertical-align: top;
	padding-left: 3px;
}
.w_desc {						/* 説明文 */
	font-size: 9pt;
	padding-top: 10px;
	color: #935758;
}
.w_todo {
	width: 40px;
	text-align: center;
	vertical-align: middle;
}

/* ---------------------------
 職人スキル：採掘・薬師用テーブル
--------------------------- */
.a1th_col2 {               /* リスト */
	width: 320px;
}
.a1th_col3 {               /* NPC */
	width: 66px;
}
.a1th_col4 {					/* 詳細 */
	padding-top: 0px;
}
.a1_col2 {						/* イメージ */
	width: 66px;
}
.a1_col3 {						/* リスト詳細 */
	vertical-align: top;
	padding-left: 3px;
}
.a1_col4 {						/* NPC */
	text-align: center;
}
.a1_col5 {						/* 詳細 */
	width: 260px;
}
.a1_col5td1 {
	width: 80px;
}
.a1_col5td2 {
	width: 40px;
	padding-right: 5px;
}
.a_name {						/* 日本語名称 */
	float: right;
	color: green;
	font-weight: normal;
}
.a_desc {						/* リスト説明文 */
	font-size: 9pt;
	padding-top: 5px;
	color: #935758;
}

/* ---------------------------
 経験値一覧用テーブル
--------------------------- */
.eth_lv   {                 /* Lv */
  width: 40px;
}
.eth_col2 {                 /* 戦闘経験値 */
  width: 125px;
}
.eth_col3 {                 /* 能力値 */
  width: 50px;
}
.eth_col4 {                 /* 備考 */

}
.eth_col6 {                 /* 信用経験値 */
  width: 110px;
}
.e_col1 {
  text-align: right;
  padding-right: 5px;
}
.e_col2 {
  text-align: right;
  padding-right: 4px;
}
.e_col3 {
  text-align: right;
  padding-right: 10px;
}
.e_col4 {
  font-size: 9pt;
  padding-right: 3px;
}

/* Button 用 */
.groupList .button {margin-right: 0px;}
.clear  { display: inline-block; }
.button { margin-right: 20px; float: left; }

/* Accordion Style */
#accordion{
  font-family: Meiryo UI, MS UI Gothic, Arial;
  list-style: none;
  width: 170px;
  font-size: 12px;
  line-height: 1;
/*  background-color: #add8e6;*/
  background-color: #808080;
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
  background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);
  -moz-background-size: 4px 4px;
  -webkit-background-size: 4px 4px;
  -o-background-size: 4px 4px;
  -ms-background-size: 4px 4px;
  background-size: 4px 4px;
  margin: 0;
  padding: 0;
  border-top: 15px solid #404040;
  border-bottom: 15px solid #404040;
  border-radius: 2px;
  box-shadow: 2px 3px 2px rgba(0,0,0,.2);
}
#accordion > li{
  padding: 0;
  border-right: 1px solid #404040;
  border-left: 1px solid #404040;
}
#accordion li a{
  display: block;
  position:relative;
  color: #000;
  text-decoration:none;
  text-shadow: 0 1px 1px rgba(255,255,255,.7);
  padding: 10px 0px 10px 25px;
  border-bottom: 1px solid #404040;
  border-top: 1px solid #c0c0c0;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
}
#accordion > li:first-child > a{
  border-top: 0px;
}
#accordion > li a:before {
  position: absolute;
  top: 63%;
  left: 5px;
  font: 100% 'FontAwesome';
  content: "\f009";
  color: #303030;
  margin-top: -10px;
  text-shadow: 1px 1px 0px rgba(255,255,255,.7);
}
#accordion li a:hover{
  color: white;
  background: rgba(0,0,0,.1);
  border-top-color: #fff;
}
.arrow{
  position:absolute;
  top: 65%;
  right: 5px;
  line-height: 1;
  text-shadow: 0 -1px 0px rgba(0,0,0,.3);
  margin-top: -10px;
  color: #000;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
}
.arrow:before{
  font: 100% 'FontAwesome';
  content: "\f105";
}
#accordion li > a:hover .arrow{
  color: white;
}
.rotate {
  right: 5px;
  color:#000;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* Sub Category */
#accordion li ul {
  list-style: none;
  background: #a0a0a0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#accordion li ul li a{
  font-size: 10pt;
  position:relative;
  background: none;
  line-height: 1;
  padding: 10px 0px 10px 25px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #404040;
}
#accordion li ul li a:before {
  position: absolute;
  top: 56%;
  left: 10px;
  font: 0% 'FontAwesome';
  content: "\f068";
  color: #2f7f99;
  margin-top: -8px;
  text-shadow: 1px 1px 0 rgba(255,255,255,.7);
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
}
#accordion li ul li:first-child a{
  border-top: 0px;
  box-shadow: 0 7px 7px -7px rgba(0,0,0,.5) inset;
}
#accordion li ul li:last-child a{
  border-bottom: 1px solid #404040;
}
#accordion li ul li a:hover{
  background: #505050;
  border-top-color: white;
}