/* CSS Document */

body { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; margin: 0; padding: 0}
p { margin: 0}
p+table { margin-top: 10px}
#wrapper { width: 770px; padding-left: 20px; padding-bottom: 50px; padding-top: 80px}
#header { padding: 0 0 0 20px; width: 700px; min-height: 150px}
#menu_fixed { padding-left: 20px; position: fixed; z-index: 100; width: 100%;
background: #fff}
.ma_fix { padding-top: 80px; margin-top: -80px;}
.pb3 { padding-bottom: 40px}
.pb6 { padding-bottom: 80px}
.iblock { display: inline-block; vertical-align: middle; line-height: 100%}

/*見出し*/
h1 { line-height: 80px; margin: 0; padding: 0 0 0 26px; position: relative;}
h1:before { content: url("img/bod_bl.png"); display: block; position: absolute; left: -20px; top: 5px; filter: drop-shadow(3px 3px 3px #aaa);}
.cook h1:before { content: url("img/bod_co.png")}
.insc h1:before { content: url("img/bod_in.png")}
.tailor h1:before { content: url("img/bod_ta.png")}
.tinker h1:before { content: url("img/bod_ti.png")}
.carp h1:before { content: url("img/bod_ca.png")}
.flet h1:before { content: url("img/bod_fl.png")}
.smith h1:before { content: url("img/bod_bl.png")}
.alch h1:before { content: url("img/bod_al.png")}
h2 { margin: 0 0 10px 0; padding: 3px 0 0 10px; background: rgb(237,237,237);
background: -moz-linear-gradient(left,  rgba(237,237,237,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left,  rgba(237,237,237,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right,  rgba(237,237,237,1) 0%,rgba(246,246,246,1) 53%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=1 );
}
h4 { margin: 0 0 10px 0; padding: 0 0 0 10px; line-height: 1.3; border-bottom: 1px solid #ccc; border-left: 10px solid #333; font-size: 14px; width: 700px}

/*大口吹き出し見出し*/
.flex { display: flex}
.flex-inner { padding: 0 20px 20px 0; display: flex}
.flex-inner ul { display: block; background: #ce8c4a; width: 180px; padding: 10px 0 10px 30px; margin: 0; border-radius: 6px; border: 1px solid #ce8c4a;  position: relative;}
.flex-inner:last-child { padding-right: 0}
.flex-inner ul li { display: list-item; font-size: 14px; color: black; margin: 0; padding: 0}
.flex-inner ul:after { content:""; border-top: 10px solid #ce8c4a; border-right: 5px solid transparent; border-bottom: 10px solid transparent; border-left: 5px solid transparent; position: absolute; bottom: -21px}
.flex-inner-text { border: 2px dashed #ccc; padding: 10px; margin-bottom: 10px; width: 450px;}
  /*例外*/
.alch .flex>table { margin-bottom: 5px}
.alch .flex>table caption { text-align: left; line-height: 1.6}
.alch .flex>table caption:before { content:"▼ "; display: inline-block; vertical-align: middle}
.alch .flex>table:first-child { margin-right: 20px}
.alch .flex-inner { display: block; padding-right: 60px}
.alch .flex-inner ul { width: 130px; display: block; min-height: 90px}
.alch .flex-inner.height6 ul { min-height: 130px}
.alch .flex-inner table { position: relative; top: 20px; width: 160px}
  /*吹き出しの色付け*/
.tinker .flex-inner ul { background: #4a4a5a; border-color: #4a4a5a }
.tinker .flex-inner ul li { color: #fff}
.tinker .flex-inner ul:after { border-top-color: #4a4a5a}
.tailor .flex-inner ul { background: #296329; border-color: #296329 }
.tailor .flex-inner ul li { color: #fff}
.tailor .flex-inner ul:after { border-top-color: #296329}
.carp .flex-inner ul:after { border-top-color: #d68c4a}
.carp .flex-inner ul { background: #d68c4a; border-color: #d68c4a }
.cook .flex-inner ul:after { border-top-color: #e7d69c}
.cook .flex-inner ul { background: #e7d69c; border-color: #e7d69c }
.alch .flex-inner ul:after { border-top-color: #adf7ad}
.alch .flex-inner ul { background: #adf7ad; border-color: #adf7ad }
.smith .flex-inner ul:after { border-top-color: #9c9cad}
.smith .flex-inner ul { background: #9c9cad; border-color: #9c9cad }
.flet .flex-inner ul:after { border-top-color: #7bad8c}
.flet .flex-inner ul { background: #7bad8c; border-color: #7bad8c }
.insc .flex-inner ul:after { border-top-color: #f7cead}
.insc .flex-inner ul { background: #f7cead; border-color: #f7cead }

/*表*/
table { border-collapse: collapse;  font-size: 12px}
table tr td { border: 1px solid #333; padding: 5px; text-align: right}
table tr th { border: 1px solid #333; text-align: center; font-weight: normal; padding: 5px; background: #ccc ; white-space: nowrap; color: #000}
table.noval td,table.noval th { width: 60px;}
#smalltable table caption { text-align: left; font-size: 14px; line-height: 1.6; font-weight: bold}
table.kajisai { width: 300px}
table.scroll,table.kajisai { margin-right: 20px; margin-bottom: 30px}
table.scroll caption { color: #410405}
table.scroll.necro caption { color: #0A2311}
table.scroll tr th { background: #D97373}
table.scroll.necro tr th { background: #638268}
table.scroll tr td,table.kajisai tr td { text-align: center}
table.scroll tr td:first-child,table.kajisai tr td:first-child { text-align: left}
.smith #smalltable table tr:nth-child(odd),
.smith #items table tr:nth-child(odd),
.tailor #smalltable table tr:nth-child(odd),
.alch #itemtable table tr:nth-child(odd),
.alch #smalltable table tr:nth-child(odd),
.flet #items table tr:nth-child(odd),
.flet #itemtable table tr:nth-child(odd),
.flet #smalltable table tr:nth-child(odd),
.tinker #itemtable table tr:nth-child(odd),
.tinker #smalltable table tr:nth-child(odd),
.cook #itemtable table tr:nth-child(odd),
.cook #smalltable table tr:nth-child(odd),
.insc #itemtable table tr:nth-child(odd),
.insc #smalltable table tr:nth-child(odd){ background: #efefef}

/*金属テーブル*/
table.ingot { width: 730px;}
table.ingot tr th { width: 10%; padding-right: 0; padding-left: 0; vertical-align: top;}
table.ingot tr th:first-child { vertical-align: middle}
table.ingot tr td { width: 10%;}
/*ボードテーブル*/
table.board { width: 700px;}
table.board tr th { width: 12.5%;}
table.board tr td { width: 12.5%;}
/*革*/
table.leather tr th { width: 90px;}

.col { background: #efefef}
.col2{ background: #999; color: #777}
.cb { clear: both}
.small td,td.small2  { font-size: 11px; text-align: left; vertical-align: top; background: #EFE8E4}
td.small2 { padding-left: 20px}

p.small { font-size: 12px}
tr td:first-child { text-align: left}

/*ナビ*/
nav ul { margin: 0; padding: 13px 0}
nav ul li { display: inline; padding: 0 20px 0 0}
nav ul li a { display: inline-block; border-radius: 8px; padding: 5px 10px; border: 1px solid #ccc ; color: #666; text-decoration: none }
nav ul li span { display: inline-block; border-radius: 8px; padding: 5px 10px; background: #FB793E; color: #000; text-decoration: none }
nav ul li a:hover { background-color: #ccc; color: #000; border-color: #fff; border-bottom: 0}
nav ul li a[href="bulk_bl.html"]:hover { background-color: #9c9cad;}
nav ul li a[href="bulk_al.html"]:hover { background-color: #adf7ad;}
nav ul li a[href="bulk_ta.html"]:hover { background-color: #296329; color: #fff}
nav ul li a[href="bulk_ti.html"]:hover { background-color: #4a4a5a; color: #fff}
nav ul li a[href="bulk_ca.html"]:hover { background-color: #d68c4a;}
nav ul li a[href="bulk_in.html"]:hover { background-color: #f7cead;}
nav ul li a[href="bulk_co.html"]:hover { background-color: #e7d69c;}
nav ul li a[href="bulk_fl.html"]:hover { background-color: #7bad8c;}

.cook nav ul li span { background: #e7d69c}
.smith nav ul li span { background-color: #9c9cad;}
.alch nav ul li span { background-color: #adf7ad;}
.tailor nav ul li span { background-color: #296329; color: #fff}
.tinker nav ul li span { background-color: #4a4a5a; color: #fff}
.carp nav ul li span { background-color: #d68c4a;}
.insc nav ul li span { background-color: #f7cead;}
.flet nav ul li span { background-color: #7bad8c;}

.cost tr td { text-align: left }
.marker { background:#FAFF50; display: inline-block}
#wrapper+p { display: block; padding: 20px; background: #E8E6E6; width: 100%; text-align: left}

/*小さく表示調整*/
.sss:before { width: 20px !important; height: 22px !important}
.s4:before { width: 22px !important; height: 20px !important; background-position: left; margin-left: -8px}

/*右 submenu*/
#folder { display: none}
#items { box-shadow:-3px 4px 3px -1px rgba(0,0,0,0.20);}
#items table { width: 100%; background: #fff}
#items table th { background-color: #999; color: #fff}
#items table td:first-child { width: 30px; text-align: right}
.smith #items table tr td,.smith #items table tr th { padding: 3px 5px}
#items .title { background: #ccc; color: white; padding: 5px; text-shadow: 1px 1px 3px #000000;}
#items ul li { font-size: 14px}
.smith #items td:before,
.smith #items td span:before,
.carp #items td:before,
#items td.ss:before { height: 22px}
#items td.mm:before { height: 35px}
#items td.mini:before { height: 35px; background-size: contain}
.cook #items .title { background: #e7d69c}
.smith #items .title { background-color: #9c9cad}
.alch #items .title { background-color: #adf7ad; box-shadow:1px 9px 17px -21px #6b4231 inset; text-shadow: 1px 1px 3px #422921;}
.tailor #items .title { background-color: #296329}
.tinker #items .title { background-color: #4a4a5a}
.carp #items .title { background-color: #d68c4a}
.insc #items .title { background-color: #f7cead; box-shadow:1px 9px 17px -21px #42316b inset; text-shadow: 1px 1px 3px #292142;}
.flet #items .title { background-color: #7bad8c}

@media screen and (max-width:1123px) {
  #items { 
    display: block; top: 80px; width: 300px; background: #eee; padding: 5px;
    position: fixed;
    right: -313px; 
    transition: transform 0.3s linear 0s; 
    z-index: 1000;}
  #sideclz:before { content: "×"; display: block; position: absolute; right: 10px; top: 10px; border: 2px solid #fff; line-height: 18px; width: 18px; text-align: center; text-shadow: none}  
  #sidetab { position: fixed; top: 100px; right: -3px;  width: 24px; height: 100px; padding: 10px 5px;
    background-color: #666; border-radius: 10px 0 0 10px; color: #fff;
    box-shadow:-3px 4px 3px -1px rgba(0,0,0,0.20);
    transition: transform 0.3s linear 0s; 
    z-index: 999;}
  #sidetab span { display: block; transform: rotate(90deg)}
  #folder:checked ~ #items,
  #folder:checked ~ #sidetab {
      transform: translate(-313px);
  }
  #folder ~ #sidetab:hover,
  #sideclz:hover { cursor: pointer}
  #folder ~ #sidetab:hover { background-color: #930000}
  #sideclz:hover:before { color: #666; background: #fff; font-size: 18px; font-weight: bold; text-shadow: none}
}
@media screen and (min-width:1124px) {
  #items { display: block; position: fixed; left: 800px; top: 80px; width: 300px; background: #eee; padding: 5px; z-index: 200}
  #sidetab { display: none}
}