/*
``` `  `` `` `   ``  ` ```  `` ``` ``` ```` ` `` ``  `
` `` ```Web Design & Development CSS File `` `` ` `  ` ``` ``` ` `   `
` ``` ``Created by Onshiryuu (Theofilus Woen) ``  ` ``` ` `` `` ` ` `     `
` ``````2013/12` `  `` `   `` ````` `` ```` ```` ` ` ` ` `   `   `
` ``  ``` `` ` ` ``  ``  ```` `` ``` `` ` 
*/

@charset "utf-8";

/* `````````````````````````````````````````````````````````` MARKMARK GLOBAL(css resets) `````````````````````````````````````````````````````````` */

a, a:hover
{
    text-decoration:none;
}
a
{
    color:#4D4D4D;
}

h1, h2, h3, h4, h5, h6
{
    margin:0px;
}

p
{
    margin:0px;
}

html
{
    min-width: 310px;
    /* min-width: 1000px; //DISABLED FOR RESPONSIVE */
}

body
{
    margin:0px;
    color:#4D4D4D;
    background-color: #F6F7F8;
    min-width: 310px;
    /* min-width: 1000px; //DISABLED FOR RESPONSIVE */
}

.container
{
    padding-left: 234px;
}

ul {list-style-type:none;margin:0px;padding:0px;}

.active
{
    cursor: default !important;
}

.loading
{
    background: url('../img/ui/fanload.gif') no-repeat 463px 49%;
}

.popup_loading
{
    background: url('../img/ui/fanload.gif') no-repeat 350px 150px;
}

.loading div, .popup_loading div
{
    display: none;
}

.lead
{
    clear: both;
}


/* `````````````````````````````````````````````````````````` MARKEND GLOBAL(css resets) `````````````````````````````````````````````````````````` */




/* `````````````````````````````````````````````````````````` MARKMARK OMNI `````````````````````````````````````````````````````````` */


.umi_pattern
{
    width: 100%;
    height: 100%;
    position: fixed; top: 0px; left: 0px;
    background: url('../img/ui/umi_pattern.png') repeat;
    background-position: 0px 0px;
    z-index: -10;
}
.umi_waves
{
    width: 100%;
    height: 100%;
    position: fixed; top: 0px; left: 0px;
    background: url('../img/ui/umi_waves_evener.png') repeat, url('../img/ui/umi_waves_upper.png') repeat, url('../img/ui/umi_waves.png') repeat, url('../img/ui/umi_waves.jpg') repeat;
    opacity: 0.5;
    z-index: -11;
}
.genjitsunovattenfall
{
    width: 300px;
    height:2000px;
    position: fixed; top: 0px; left: 985px;
    background: url('../img/ui/salmon1.png') repeat-y;
    z-index: -5;
}
.genjitsunovattenfall2 {background: url('../img/ui/salmon2.png') repeat-y; z-index: -4;}
.genjitsunovattenfall3 {background: url('../img/ui/salmon3.png') repeat-y; z-index: -3;}
.genjitsunovattenfall4 {background: url('../img/ui/salmon4.png') repeat-y; z-index: -2;}
.genjitsunovattenfall5 {background: url('../img/ui/salmon5.png') repeat-y; z-index: -1;}

.menubar
{
    background-color: #FFFFFF;
    border-right: solid 1px #E8E8E8;
    width: 184px;
    height: 100%;
    position: fixed; top:0px; left: 0px;
    z-index: 10000;
}
.menubar_sp
{
    display: none;
}
.logo
{
    width: 100px;
    height: 90px;
    background: url('../img/ui/logo.png') no-repeat;
    position: absolute; top:60px; right: 20px;
    font-size: 0px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.menus
{
    position: absolute; top:170px; right: -1px;
}
.menus_nav
{
    position: relative;
    width: 185px;
}
.menus_nav a
{
    display: block;
    width: 127px;
    padding: 0px 29px;
    height: 40px;
    text-align: right;
    border-top: solid 1px #E8E8E8;
    position: relative;
    cursor: pointer;
}
.menus_nav a:last-of-type
{
    border-bottom: solid 1px #E8E8E8;
}
.menus_nav a:hover
{
}
.menus_nav a:hover:before
{
    content:'';
    display: block;
    width: 3px;
    height: 42px;
    background-color: #EB0000;
    position: absolute; right: 0px; top:-1px;
}
.menus_nav a.active
{
    color: #EB0000;
}
.menus_nav a.active:before
{
    content:'';
    display: block;
    width: 3px;
    height: 42px;
    background-color: #E0D56E;
    position: absolute; right: 0px; top:-1px;
}

.menus_misc
{
    padding: 30px 29px 0px 0px;
    width: 40px;
    float: right;
}
.menus_misc a
{
    display: block;
    width: 40px;
    height: 40px;
    background: url('../img/ui/menu_misc.png') no-repeat 0px 0px;
    margin-bottom: 8px;
    position: relative;
}
.menus_misc a.btn-en {background-position: -40px 0px}
.menus_misc a.btn-fb {background-position: -80px 0px}
.menus_misc a.btn-ln {background-position: -120px 0px}

.menus_misc a.btn-jp:hover, .menus_misc a.btn-jp.active {background-position: 0px -40px}
.menus_misc a.btn-en:hover, .menus_misc a.btn-en.active {background-position: -40px -40px}
.menus_misc a.btn-fb:hover, .menus_misc a.btn-fb.active {background-position: -80px -40px}
.menus_misc a.btn-ln:hover, .menus_misc a.btn-ln.active {background-position: -120px -40px}

.menus_misc a span
{
    position: absolute; left: 43px; top:4px;
    display: inline-block;
    width: 0px; overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    filter:Alpha(opacity=0);
    color: #FFFFFF;
    background-color: #4D4D4D;
    padding: 8px 10px;
    font-size: 13px;
}
.menus_misc a.btn-jp span
{
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
.menus_misc a span:before
{
    content:'';
    position: absolute; left: -13px; top:9px;
    width: 0px;
    height: 0px;
    border: solid 7px #4D4D4D;
    border-bottom-color: transparent; border-top-color: transparent; border-left-color: transparent;
}
.menus_misc a:hover span
{
    width: auto;
    overflow: visible;
    opacity: 1;
    filter:Alpha(opacity=100);
    -webkit-transition: opacity 0.1s linear 1s;
    -moz-transition: opacity 0.1s linear 1s;
    -o-transition: opacity 0.1s linear 1s;
    transition: opacity 0.1s linear 1s;
}
.paper
{
    background-color: #FFFFFF;
    border-left: solid 1px #E8E8E8;
    border-right: solid 1px #E8E8E8;
    width: 750px;
    padding-top: 44px;
}

h2
{
    display: inline-block;
    height: 64px;
    width: 630px;
    padding: 0px 40px;
    color: #191919;
    background: url('../img/ui/title_band.png') no-repeat 0px 0px;
    margin-bottom: 25px;
    position: relative; left: -1px;
}

p
{
    font-size: 16px;
    line-height: 20px;
    color: #191919;
    margin-bottom: 20px;
}

h4
{
    color: #191919;
}

.three_lines
{
    width: 100%;
    height: 38px;
    border-left: solid 1px #C4C4C4;
    border-right: solid 1px #C4C4C4;
    position: relative;
}
.three_lines:after
{
    content: '';
    height: 38px;
    border-right: solid 1px #C4C4C4;
    position: absolute; top:0px; left: 50%;
}
.paper_popup
{
    position: fixed; top:0px; right: -800px;
    height: 100%;
    width: 770px;
    background-color: #FFFFFF;
    border-left: solid 1px #E8E8E8;
    padding-top: 44px;
    z-index: 5000;
    -webkit-transition: right 0.25s ease-out;
    -moz-transition: right 0.25s ease-out;
    -o-transition: right 0.25s ease-out;
    transition: right 0.25s ease-out;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.paper_popup_shade
{
    position: fixed; top:0px; right: 0px;
    height: 100%;
    width: 100%;
    background: url('../img/ui/4d4d4d_60p.png') repeat;
    z-index: 4999;
    opacity: 0;
    display: none;
}
.paper_popup .popup_close
{
    width: 110px;
    height: 110px;
    position: absolute; top:0px; left: 0px;
    z-index: 5010;
    background: url('../img/ui/close.png') no-repeat top left;
}
.paper_popup .popup_close:hover
{
    background-position: bottom left;
    cursor: pointer;
}

.paper_popup.displayed
{
    right: 0px;
}

.popup_content
{
    height: 100%;
    position: absolute; top:0px; left: 20px;
    width: 710px;
    overflow-x:hidden;
}

.images_train
{
    height: 100%;
    width: 750px;
    margin: 0px auto;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
}
.images_train_strip
{
    padding-top: 15px;
    padding-bottom: 150px;
    width: 710px;
    position: absolute; top: 0px; left: 0px;
}
.images_train_strip img
{
    max-width: 710px;
    margin-bottom: 20px;
}
.scroller
{
    position: absolute; top: 0px; right: 0px;
}
.scrollbar_rail, .scrollbar
{
    content: '';
    position: absolute; top: 0px; right: 0px;
    display: block;
}
.scrollbar_rail
{
    width: 20px;
    height: 100%;
    background-color: #E0E0E0;
    z-index: 5011;
}
.scrollbar
{
    width: 20px;
    height: 10px;
    background-color: #4D4D4D;
    z-index: 5012;
}


/* `````````````````````````````````````````````````````````` MARKEND OMNI `````````````````````````````````````````````````````````` */




/* `````````````````````````````````````````````````````````` MARKMARK MAIN BANNER `````````````````````````````````````````````````````````` */


.main_banner_contain
{
    width: 710px;
    height: 580px;
    margin: 0px 20px;
    position: relative;
}
.quote
{
    position: absolute; bottom: 416px; right: 177px;
    width: 86px;
    height: 280px;
    background: url('../img/ui/quote.png') no-repeat bottom left;
}
.main_banners
{
    width: 710px;
    height: 440px;
    position: relative;
}
.main_banners .main_banner
{
    width: 710px;
    height: 440px;
    position: absolute; top: 0px; left: 0px;
    display: none;
}
.main_banners .main_banner .panel
{
    position: absolute;
    overflow: hidden;
    display: none;
    opacity: 0;
}
.main_banners .main_banner .panel.panel_a
{
    top:0px; left: 0px;
    width: 439px;
    height: 440px;
}
.main_banners .main_banner .panel.panel_b
{
    bottom:0px; right: 0px;
    width: 268px;
    height: 268px;
}
.main_banners .main_banner .panel.panel_c
{
    top:0px; right: 0px;
    width: 169px;
    height: 169px;
}
.main_banners .main_banner .panel.panel_b img
{
    position: absolute;
    left: -442px;
    top: -172px;
}
.main_banners .main_banner .panel.panel_c img
{
    position: absolute;
    left: -541px;
    top: 0px;
}
.main_banners .main_banner .panel:after, .portfo_item .item_art:after
{
    content: '';
    position: absolute;
    background-color: #FFFFFF;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg); /* IE 9 */
    -webkit-transform:rotate(45deg); /* Safari and Chrome */
}
.main_banners .main_banner .panel.panel_a:after
{
    width: 135px; height: 135px;
    top:-68px; left: -68px;
}
.main_banners .main_banner .panel.panel_b:after
{
    width: 85px; height: 85px;
    bottom:-43px; left: -43px;
}
.main_banners .main_banner .panel.panel_c:after
{
    width: 53px; height: 53px;
    bottom:-27px; right: -27px;
}

.main_banners .main_banner .panel .panel_desc
{
    display: none;
}
.main_banners .main_banner .panel:hover .panel_desc
{
    position: absolute; top: 0px; left: 0px;
    width: 234px;
    height: 228px;
    padding: 20px 17px;
    background: url('../img/ui/ffffff_90p.png') repeat;
    color: #191919;
    display: block;
}
.main_banners .main_banner .panel .panel_desc h3
{
    font-size: 21px;
    font-weight: bold;
    margin-bottom: 5px;
}
.main_banners .main_banner .panel .panel_desc p
{
    font-size: 14px;
    font-weight: normal;
}
.main_banners .main_banner .panel .panel_desc a
{
    font-size: 14px;
    font-weight: normal;
    color: #000000;
    position: absolute; bottom: 20px; right: 17px;
}
.main_banners .main_banner .panel .panel_desc a:after
{
    content:'';
    display: inline-block;
    position: relative; top: 2px;
    margin-left: 5px;
    width: 15px; height: 13px;
    background: url('../img/ui/arrow_red_180.png') no-repeat 0px 0px;   
}
.main_banners .main_banner .panel .panel_desc a:hover
{
    text-decoration: underline;
}

.main_bullets
{
    margin-top: 18px;
    width: 710px;
    height: 16px;
    padding-bottom: 134px;
    display: table;
}
.main_bullets .main_bullet
{
    position: relative;
    display: table-cell;
    background: url('../img/ui/bullet_notch.png') no-repeat top right #E8E8E8;
    cursor: pointer;
}
.main_bullets .main_bullet:hover, .main_bullets .main_bullet.active
{
    background: url('../img/ui/bullet_notch.png') no-repeat top right #E0D56E;
}
.main_bullets .main_bullet .needles
{
    position: absolute;
    width: 5%;
}
.main_bullets .main_bullet .needles .needle
{
    position: relative; top: 22px;
    float:left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 10%;
    height: 8px;
    border-left: solid 1px #E8E8E8;
    -webkit-transition: height 0.25s ease-out;
    -moz-transition: height 0.25s ease-out;
    -o-transition: height 0.25s ease-out;
    transition: height 0.25s ease-out;
}
.main_bullets .main_bullet .needles .needle.half_needle
{
    height: 16px;
}
.main_bullets .main_bullet .needles .needle.main_needle
{
    height: 38px;
    border-left: solid 1px #C4C4C4;
}
.main_bullets .main_bullet .needles .needle.active
{
    border-left: solid 1px #E0D56E;
}
.main_bullets .main_bullet .needles .needle.active
{
    height: 11px;
}
.main_bullets .main_bullet .needles .needle.half_needle.active
{
    height: 21px;
}
.main_bullets .main_bullet .needles .needle.main_needle.active
{
    height: 71px;
}


/* `````````````````````````````````````````````````````````` MARKEND MAIN BANNER `````````````````````````````````````````````````````````` */




/* `````````````````````````````````````````````````````````` MARKMARK SECTIONS `````````````````````````````````````````````````````````` */


.section_content_text
{
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 50px;
}
.stats_meter_section
{
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 50px;
}
.stats_meter_section .three_lines
{
    margin-bottom: 5px;
    border-left: solid 1px #E0D56E;
}
.stats_meter_section .three_lines:after
{
    left: 150px;
}
.stats_meter_section h4
{
    padding-left: 13px;
}
.stats_meter_section .meters
{
    margin: 25px -40px 10px 0px;
}
.stats_meter_section .meters .meter
{
    width: 100%;
    height: 33px;
    margin-bottom: 10px;
    background: url('../img/ui/meter_slot.png') repeat-x;
    position: relative;
    color: #191919;
    font-size: 13px;
}
.stats_meter_section .meters .meter .meter_label
{
    position: absolute; top:7px; left: 13px;
}
.stats_meter_section .meters .meter .meter_value
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: solid 1px #C4C4C4;
    border-right: solid 3px #F21616;
    width: 30%;
    line-height: 33px;
    height: 33px;
    text-align: right;
    display: inline-block;
    font-size: 15px;
    padding-right: 28px;
}
.stats_meter_section .meters .meter .meter_value.meter_value_gt:before
{
    content:'\003e';
}


/* `````````````````````````````````````````````````````````` MARKEND SECTIONS `````````````````````````````````````````````````````````` */




/* `````````````````````````````````````````````````````````` MARKMARK PORTFOLIO `````````````````````````````````````````````````````````` */


.portfo_item
{
    padding-left: 40px;
    padding-right: 40px;
    position: relative;
    min-height: 500px;
    margin-bottom: 60px;
}
.portfo_item .three_lines
{
    margin-bottom: 13px;
    border-right: solid 1px #E0D56E;
}
.portfo_item .three_lines:after
{
    left: 440px;
}
.portfo_item .item_art
{
    width: 440px;
    height: 440px;
    overflow: hidden;
    position: absolute; top: 52px; left: 40px;
    z-index: 100;
}
.portfo_item .item_art img
{
    max-width: 440px;
}
.portfo_item .item_art:after
{
    width: 135px; height: 135px;
    bottom:-68px; right: -68px;
}
.portfo_item .item_info
{
    width: 210px;
    padding-left: 460px;
}
.portfo_item .item_info h3
{
    color: #191919;
    margin-bottom: 15px;
}
.portfo_item .item_info p, .portfo_item .item_info span
{
    font-size: 14px;
    line-height: 18px;
    color: #4D4D4D;
}
.portfo_item .item_info a
{
    width: 170px;
    padding: 0px 42px 0px 30px;
    height: 50px;
    display: block;
    margin: 15px 0px;
    background-color: #FFFFFF;
    border-top: solid 1px #C4C4C4;
    border-bottom: solid 1px #C4C4C4;
    position: relative; left: -25px;
    text-align: right;
    -webkit-transition: width 0.15s ease-out;
    -moz-transition: width 0.15s ease-out;
    -o-transition: width 0.15s ease-out;
    transition: width 0.15s ease-out;
}
.portfo_item .item_info a:after
{
    content:'';
    background: url('../img/ui/arrow_red_90.png') no-repeat 0px 0px;
    width: 14px;
    height: 16px;
    display: inline-block;
    position: absolute; top: 17px; right: 13px;
    -webkit-transition: right 0.1s ease-in;
    -moz-transition: right 0.1s ease-in;
    -o-transition: right 0.1s ease-in;
    transition: right 0.1s ease-in;
}
.portfo_item .item_info a:before
{
    content:'';
    display: block;
    width: 5px;
    height: 52px;
    background-color: #F21616;
    position: absolute; right: 0px; top:-1px;
}
.portfo_item .item_info a:hover
{
    width: 185px;
    cursor: pointer;
}
.portfo_item .item_info a:hover:after
{
     right: 8px;
}
.portfo_item .item_info li
{
    font-size: 14px;
    line-height: 18px;
    color: #FFFFFF;
    background-color: #E0E0E0;
    display: inline-block;
    margin-right: 9px;
    margin-top: 8px;
    padding: 4px 8px;
}


/* `````````````````````````````````````````````````````````` MARKEND PORTFOLIO `````````````````````````````````````````````````````````` */




/* `````````````````````````````````````````````````````````` MARKMARK CONTACT `````````````````````````````````````````````````````````` */


.section_content_contact
{
    padding-left: 40px;
    padding-right: 40px;
    position: relative;
    min-height: 180px;
}

.section_content_contact .three_lines
{
    margin-bottom: 5px;
}
.section_content_contact .three_lines:after
{
    left: 280px;
    border-right: solid 1px #E0D56E;
}
.section_content_contact .contact_left
{
    width: 280px;
}
.section_content_contact .contact_left p
{
    margin: 15px 0px 30px 0px;
    color: #191919;
}
.section_content_contact .contact_left a
{
    width: 238px;
    color: #4D4D4D;
    padding: 0px 20px 0px 20px;
    height: 48px;
    display: block;
    margin: 15px 0px;
    background-color: #FFFFFF;
    border: solid 1px #C4C4C4;
    text-align: right;
    -webkit-transition: width 0.15s ease-out;
    -moz-transition: width 0.15s ease-out;
    -o-transition: width 0.15s ease-out;
    transition: width 0.15s ease-out;
    position: relative;
}
.section_content_contact .contact_left a:after
{
    content:'';
    background: url('../img/ui/envelope.png') no-repeat -16px 0px;
    background-position: -16px 0px;
    width: 28px;
    height: 18px;
    display: inline-block;
    position: relative; top: 3px;
    margin-left: 20px;
    margin-right: 5px;
    -webkit-transition: background-position 0.15s ease-in;
    -moz-transition: background-position 0.15s ease-in;
    -o-transition: background-position 0.15s ease-in;
    transition: background-position 0.15s ease-in;
}
.section_content_contact .contact_left a:before
{
    content:'';
    display: block;
    width: 5px;
    height: 50px;
    background-color: #F21616;
    position: absolute; right: 0px; top:-1px;
}
.section_content_contact .contact_left a:hover
{
    color: #191919;
    border: solid 1px #A4A4A4;
}
.section_content_contact .contact_left a:hover:after
{
    background-position: 14px 0px;
}
.section_content_contact .contact_right
{
    width: 336px;
    height: 75px;
    position: absolute; top: 53px; right: 40px;
    padding-top: 53px;
    text-align: center;
    color: #191919;
}
.section_content_contact .contact_right:before, .section_content_contact .contact_right:after
{
    content: '';
    background: url('../img/ui/env_bg.png') no-repeat 0px 0px;
    width: 64px;
    height: 128px;
    position: absolute;
    top:0px;
}
.section_content_contact .contact_right:before
{
    background-position: left top;
    left: 0px;
}
.section_content_contact .contact_right:after
{
    background-position: right top;
    right: 0px;
}


/* `````````````````````````````````````````````````````````` MARKEND CONTACT `````````````````````````````````````````````````````````` */




/* `````````````````````````````````````````````````````````` MARKMARK FOOTER `````````````````````````````````````````````````````````` */


.section_content_footer
{
    padding-left: 40px;
    padding-right: 40px;
    position: relative;
    margin-top: 300px;
}

.section_content_footer .three_lines
{
    height: 70px;
}
.section_content_footer .three_lines:after
{
    border-right: solid 1px #E0D56E;
    left: 430px;
    height: 70px;
}
.section_content_footer span
{
    color: #4D4D4D;
    position: absolute; top: -6px; left: 85px;
}
.section_content_footer .footer_logo
{
    background: url('../img/ui/footer_logo.png') no-repeat 0px 0px;
    width: 126px;
    height: 30px;
    position: absolute; top: -15px; right: 110px;
}


/* `````````````````````````````````````````````````````````` MARKEND FOOTER `````````````````````````````````````````````````````````` */