html, body {
    height: 100%;
    margin: 0 auto;
    background:-webkit-gradient(radial, center center, 0, center center, 100, from(#17171e), to(#040304));
    background:-webkit-radial-gradient(center, circle cover, #17171e 0, #040304 100%);
    background:-moz-radial-gradient(center, circle cover, #17171e 0, #040304 100%);
    background:-ms-radial-gradient(center, circle cover, #17171e 0, #040304 100%);
    background:-o-radial-gradient(center, circle cover, #17171e 0, #040304 100%);
    background:radial-gradient(#17171e 0, #040304 100%);
}
body {
    position: relative;
    margin:0 auto;
    text-align:center;
    font-family:'游明朝',YuMincho,'ヒラギノ明朝 ProN W3','HiraMinProN-W3','HG明朝E','ＭＳ Ｐ明朝','MS PMincho','MS 明朝',serif;
    color:#fff;
    word-break: break-all;
}
#contents_wrapper {
/*  height: 100%;   */
    margin: 0 auto;
/*
    background-image: url('../../images/common/background.png');
    background-repeat: no-repeat;
    background-position: 48px 48px;
    background-size: auto;
*/
}

@media all and (min-width: 769px) {
    body              { font-size:16px; line-height:1.4em; }
    #contents_wrapper { width: 1500px; }
}
@media all and (max-width: 768px) {
    body              { font-size:14px; line-height:1.0em; }
    #contents_wrapper { width: 100%; }
}


/* =============================================
 *  common
 * ============================================= */
.title_1          { border-bottom: 1px solid #53452b; }
.title_1 p        { color: #b9b890; line-height: 2.0em; }
.title_2:after    {
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    background:-webkit-gradient(linear, left bottom, right bottom, from(#6b4825), to(#1a1917));
    background:-ms-linear-gradient(left, #6b4825 0%, #1a1917 100%);
    background:-moz-linear-gradient(left, #6b4825, #1a1917);
    background:linear-gradient(left, #6b4825, #1a1917);
}
.title_2 p        {
    font-family:'游明朝',YuMincho,'ヒラギノ明朝 ProN W3','HiraMinProN-W3','HG明朝','ＭＳ Ｐ明朝','MS PMincho','MS 明朝',serif;
    color: #a98d54;
    line-height: 1.4em;
    letter-spacing: 0.1em;
}
.title_2 p:before {
/*
    content: url('../../images/common/parts/title_icon.png');
    vertical-align: middle;
    margin-right: 5px;
*/
    content: "";
    margin-right: 5px;
    background: url('../../images/common/parts/title_icon.png') no-repeat center center;
    background-size: contain;
    vertical-align: text-bottom;
    display: inline-block;
}
.title_3 {
    min-width: 100%;
}
.title_3 p {
    color: #beb288;
    line-height: 2.5em;
}

.artwork_1,
.artwork_2        { width: 100%; border: 1px solid #fff; box-sizing: border-box; }
.artwork_3        { width: 100%; }
/*
.table_desc_1     { width: 100%; }
.table_desc_1 th  { border-top: 1px solid #55462b; border-bottom: 1px solid #55462b; border-collapse: collapse; background-color: #25150f; color: #fff; padding: 8px 0 8px 20px; }
.table_desc_1 td  { border-top: 1px solid #55462b; border-bottom: 1px solid #55462b; border-collapse: collapse; color: #a5a29a; padding-left: 20px; }
*/
.table_desc_1     { width: 100%; }
.tbl_th           { white-space: nowrap; }
div.divclear      { clear:both; }

@media all and (min-width: 769px) {
    .view_n           { display: none; visibility: hidden; }
    .section_1        { margin-top: 30px; }
    .section_1 p      { line-height: 2.0em; }
    .title_1          { margin-top: 50px; }
    .title_1 p        { font-size: 1.6em; }
    .title_2 p        { font-size: 2.8em; }
    .title_2 p:before { height: 42px; width: 58px; }
    .title_2 img      { max-height: 46px; width: auto!important; margin-bottom: 5px; }
    .title_3          { background: url('../../images/common/parts/title_back.png') left top no-repeat; background-size: auto 100%; min-height: 76px; margin-top: 70px; }
    .title_3 p        { font-size: 1.9em; margin-left: 20px; }
    .artwork_1,
    .artwork_3        { margin-top: 30px; }
    .artwork_2        { margin-top: 60px; }
    .table_desc_1     { display: table; border-collapse: collapse; list-style-type: none; margin-top: 30px; }
    .table_desc_1 li  { display: table-row; }
    .tbl_th, .tbl_td  { display: table-cell; padding: 8px 20px; }
    .tbl_th           { border-top: 1px solid #55462b; border-bottom: 1px solid #55462b; background-color: #25150f; color: #fff; }
    .tbl_td           { border-top: 1px solid #55462b; border-bottom: 1px solid #55462b; color: #a5a29a; }
}
@media all and (max-width: 768px) {
    .view_w           { display: none; visibility: hidden; }
    .section_1        { margin-top: 10px; }
    .section_1 p      { line-height: 1.6em; }
    .title_1          { margin-top: 25px; }
    .title_1 p        { font-size: 1.2em; }
    .title_2          { margin-top: 45px; }
    .title_2 p        { font-size: 1.4em; }
    .title_2 p:before { height: 24px; width: 34px; }
    .title_2 img      { height: 25px; width: auto!important; margin-bottom: 5px; }
    .title_3          { background: url('../../images/common/parts/title_back_n.png') left top repeat-x; background-size: auto 100%; margin-top: 30px; }
    .title_3 p        { font-size: 1.2em; margin-left: 5px; }
    .artwork_1,
    .artwork_3        { margin-top: 15px; }
    .artwork_2        { margin-top: 30px; }
    .table_desc_1     { margin-top: 15px; list-style-type: none; }
    .tbl_th, .tbl_td  { padding: 10px 0 10px 5px; line-height: 1.4em; }
    .tbl_th           { background-color: #25150f; color: #fff; }
    .tbl_td           { color: #a5a29a; }
}


/* =============================================
 *  side_nav / footer_nav
 * ============================================= */
#side_nav                       {
    float: left;
/*  height: 100%;
    width: 390px;   */
    background-image: url('../../images/common/background.png');
    background-repeat: no-repeat;
    background-size: auto;
    z-index: 2;
}
#side_nav_wrapper               { height: 100%; overflow-y: auto; }
#menu_wrapper ul li a img       { opacity: 1.0; transition:all 0.3s; max-height: 20px; }
#menu_wrapper ul li a img:hover { opacity: 0.6; transition:all 0.3s; }

@media all and (min-width: 769px) {
    #side_nav           { position: relative; text-align: left; min-height: 1086px; min-width: 404px; background-position: 48px 48px; }
    #title_logo         { position: absolute; left: 122px; top: 86px; max-width: 260px; }
    #menu_wrapper       { position: absolute; left: 142px; top: 203px; }
    #menu_wrapper ul li { height: 48px; }
}
@media all and (max-width: 768px) {
    #side_nav           { position: fixed; text-align: center; height: 100%; width: 80%; left: -80%; background-color: #000; background-position: -80px -80px; }
    #side_nav_wrapper   { background: url('../../images/common/side_menu/right_border.png') repeat-y right top; }
    #title_logo         { max-width: 80%; margin: 10% auto; }
    #menu_wrapper       { text-align: left; height: 100%; height: 85%; padding-left: 10%; }
    #menu_wrapper ul    { height: 100%; }
    #menu_wrapper ul li { height: 7.14%; }
}


/* =============================================
 *  header / mobile menu
 * ============================================= */
#contents header {
    width: 100%;
    height: 15%;
    
/*  background: url('../../images/common/header_menu/background.png') no-repeat left top;   */
    background-image: url('../../images/common/header_menu/background.png'), url('../../images/common/header_menu/background_repeat.png');
    background-repeat: no-repeat, repeat-x;
    background-position: center center, left top;
    background-size: contain, contain;
    z-index: 1;
}

@media all and (min-width: 769px) {
    #contents header,
    #mobile_menu {
        display: none;
        visibility: hidden;
    }
}
@media all and (max-width: 768px) {
    div#contents header {
        position: fixed;
        top: 0;
        left: 0;
        transition:all 0.3s;
    }
    #mobile_menu {
        position: absolute;
        margin: auto;
        left: 3%;
        top: 0;
        bottom: 0;
        height: 50%;
        cursor: pointer;
    }
}


/* =============================================
 *  contents
 * ============================================= */
#contents      { /* margin-left: 404px; */ text-align: left; padding-top: 30px; }
#right_wrapper { list-style: none; display: table; }
#right_t,
#right_m,
#right_b       { float: left; display: table-cell; }

@media all and (min-width: 769px) {
    #contents      { margin-bottom: 62px; }
    #right_t,
    #right_m,
    #right_b       { width: 1030px; }
    #right_t       { background: url('../../images/common/frame_contents/bg_contents_t.png') no-repeat center top; background-size: contain; height: 112px; }
    #right_m       { background: url('../../images/common/frame_contents/bg_contents_m.png') repeat-y center center; background-size: contain; min-height: 400px; }
    #right_b       { background: url('../../images/common/frame_contents/bg_contents_b.png') no-repeat center top; background-size: contain; height: 131px; }
    #right_child   { width: 850px; padding-right: 34px; }
}
@media all and (max-width: 768px) {
    #right_wrapper { margin-top: 10px; }
    #right_t,
    #right_b       { display: none; visibility: hidden; }
    #right_child   { width: 90%; }
}


/* =============================================
 *  page_nav
 * ============================================= */
#page_nav                { margin-top: 70px; list-style-type: none; }
#page_nav li a img       { max-width: 100%; opacity: 1.0; transition:all 0.3s; }
#page_nav li a img:hover { opacity: 0.6; transition:all 0.3s; }
#nav_prev                { float: left; }
#nav_next                { float: right; }

@media all and (min-width: 769px) {
}
@media all and (max-width: 768px) {
    #nav_prev,
    #nav_next { width: 48%; }
}


/* =============================================
 *  win original
 * ============================================= */
.clr_mouse,
.clr_keyboard {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    color: #c7872c;
    margin-left: 0.2em;
    margin-right: 0.2em;
}