@charset "utf-8";

@font-face {
  font-family: 'PUD新ゴシック表示-M JHM';
  src: url(../assets/fonts/PUDGoDpMt_JHM.ttf) format("truetype");
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset, img {
    border: 0
}

ol, ul, li {
    list-style: none
}

body {
    background-color: #3c3c3d;
    font-family: 'PUD新ゴシック表示-M JHM';
    user-select: none;
}

#page {
    box-sizing: border-box;
    width: 800px;
    height: 480px;
    color: #000;
}

#date {
    position: absolute;
    top: 14px;
    width: 300px;
    left: 485px;
    font-size: 20px;
    text-align: right;
    color: #3a3a3a
}

#title_graph, #title_sekisan, #title_set, #title_osirase, #title_kiki, #tl_p_denki, #title_scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 95px;
    height: 60px
}

#tl_p_denki {
    background: url(../img/tl_p_denki.png) no-repeat
}

#title_graph {
    background: url(../img/tl_p_grp.png) no-repeat
}

#title_sekisan {
    background: url(../img/tl_p_sekisan.png) no-repeat
}

#title_set {
    background: url(../img/tl_p_set.png) no-repeat
}

#title_osirase {
    background: url(../img/tl_p_osirase.png) no-repeat
}

#title_kiki {
    background: url(../img/tl_p_kiki.png) no-repeat
}

#title_scene {
    background: url(../img/tl_p_scene.png) no-repeat
}

#tl_bunsen {
    position: absolute;
    top: 0;
    left: 7px;
    width: 314px;
    height: 61px;
    background: url(../img/tl_bunsen.png) no-repeat
}

#title_top {
    position: absolute;
    top: 0;
    left: 7px;
    width: 314px;
    height: 61px;
    background: url(../img/tl_top.png) no-repeat
}

#title_bunsyun {
    position: absolute;
    top: 0;
    left: 7px;
    width: 314px;
    height: 61px;
    background: url(../img/tl_bunsyun.png) no-repeat
}

#title_eco {
    position: absolute;
    top: 0;
    left: 7px;
    width: 314px;
    height: 61px;
    background: url(../img/tl_eco.png) no-repeat
}

#title_text {
    position: absolute;
    top: 8px;
    left: 65px;
    width: 450px;
    height: 25px;
    background-repeat: no-repeat
}

.title_font {
    font-size: 22px;
   /*  font-weight: 700 */;
    padding-top: 1px;
    color: #3a3a3a
}

#rireki {
    position: absolute;
    top: 36px;
    left: 71px;
    font-size: 14px;
    color: #3a3a3a
}

#rireki a {
    color: #3a3a3a;
    text-decoration: underline
}

.tl_hatuden {
    background-image: url(../img/tl_hatuden.png)
}

.tl_shiyoden {
    background-image: url(../img/tl_shiyoden.png)
}

.tl_kaiden {
    background-image: url(../img/tl_kaiden.png)
}

.tl_uriden {
    background-image: url(../img/tl_uriden.png)
}

.tl_yu {
    background-image: url(../img/tl_yu.png)
}

.tl_mizu {
    background-image: url(../img/tl_mizu.png)
}

.tl_gas {
    background-image: url(../img/tl_gas.png)
}

.tl_suchi {
    background-image: url(../img/tl_suchi.png)
}

.tl_kobetu {
    background-image: url(../img/tl_kobetu.png)
}

.tl_sekisan {
    background-image: url(../img/tl_sekisan.png)
}

.tl_siyoyosoku {
    background-image: url(../img/tl_siyoyosoku.png)
}

.tl_osirase {
    background-image: url(../img/tl_osirase.png)
}

.tl_yosoku_yu {
    background-image: url(../img/tl_yosoku_yu.png)
}

.tl_yosoku_mi {
    background-image: url(../img/tl_yosoku_mi.png)
}

.tl_yosoku_ga {
    background-image: url(../img/tl_yosoku_ga.png)
}

.tl_bunki {
    background-image: url(../img/tl_bunki.png)
}

.tl_kikicon {
    background-image: url(../img/tl_kikicon.png)
}

.tl_syosai {
    background-image: url(../img/tl_syosai.png)
}

#foot_shadow {
    position: absolute;
    top: 386px;
    left: 0;
    width: 800px;
    height: 24px;
    /* background: url(../img/fbg_sdw.png) repeat-x */
}

.tab, .hdntab {
    display: block;
    width: 42px;
    height: 100%;
    float: right
}

#tab1 {
    position: absolute;
    top: 51px;
    left: 2px;
    width: 49px;
    height: 78px
}

#tab2 {
    position: absolute;
    top: 137px;
    left: 2px;
    width: 49px;
    height: 78px
}

#tab3 {
    position: absolute;
    top: 223px;
    left: 2px;
    width: 49px;
    height: 78px
}

#tab4 {
    position: absolute;
    top: 309px;
    left: 2px;
    width: 49px;
    height: 78px
}

.tabAc {
    background-position: 0 -78px
}

#tab3_1 {
    position: absolute;
    top: 51px;
    left: 2px;
    width: 49px;
    height: 107px
}

#tab3_2 {
    position: absolute;
    top: 166px;
    left: 2px;
    width: 49px;
    height: 107px
}

#tab3_3 {
    position: absolute;
    top: 281px;
    left: 2px;
    width: 49px;
    height: 107px
}

#tab5_1 {
    position: absolute;
    top: 51px;
    left: 2px;
    width: 49px;
    height: 67px
}

#tab5_2 {
    position: absolute;
    top: 122px;
    left: 2px;
    width: 49px;
    height: 67px
}

#tab5_3 {
    position: absolute;
    top: 193px;
    left: 2px;
    width: 49px;
    height: 67px
}

#tab5_4 {
    position: absolute;
    top: 264px;
    left: 2px;
    width: 49px;
    height: 67px
}

#tab5_5 {
    position: absolute;
    top: 335px;
    left: 2px;
    width: 49px;
    height: 67px
}

#pic_i {
    position: absolute;
    top: 418px;
    left: 453px;
    width: 23px;
    height: 22px;
    background: url(../img/pic_i.png) no-repeat
}

#scroll, #scroll2 {
    position: absolute;
    height: 219px;
    width: 52px;
    /* background-color: #e8edf4 */
}

#sl_b_top, #sl_b_top2 {
    position: absolute;
    height: 39px;
    width: 44px;
    background-image: url(../img/sl_b_top.png);
    background-repeat: no-repeat
}

#sl_b_btm, #sl_b_btm2 {
    position: absolute;
    height: 39px;
    width: 44px;
    background-image: url(../img/sl_b_btm.png);
    background-repeat: no-repeat
}

#sl_b_btm.sl_b_btm_sdw, #sl_b_btm2.sl_b_btm_sdw {
    background-image: url(../img/sl_b_btm_sdw.png)
}

.sl_disable {
    background-position: 0 -78px
}

#sl_base_top, #sl_base_top2 {
    position: absolute;
    top: 48px;
    left: 17px;
    height: 4px;
    width: 19px;
    background: url(../img/sl_base_kado.png) no-repeat
}

#sl_base_btm, #sl_base_btm2 {
    position: absolute;
    bottom: 0;
    height: 2px;
    width: 19px;
    background: url(../img/sl_base_kado.png) bottom no-repeat
}

#sl_base, #sl_base2 {
    position: absolute;
    top: 52px;
    left: 17px;
    width: 19px;
    background: url(../img/sl_base_c.png) repeat-y
}

#sl_line_top, #sl_line_top2 {
    position: absolute;
    top: 0;
    left: 5px;
    height: 3px;
    width: 12px;
    background: url(../img/sl_line_kado.png) no-repeat
}

#sl_line_btm, #sl_line_btm2 {
    height: 4px;
    width: 12px;
    background: url(../img/sl_line_kado.png) bottom no-repeat
}

#sl_line, #sl_line2 {
    position: absolute;
    top: 3px;
    left: 5px;
    width: 12px;
    background: url(../img/sl_line_sdw.png) repeat-y
}

#sl_line img, #sl_line2 img {
    vertical-align: bottom
}

sup {
    vertical-align: top;
    font-size: 70%
}