@charset "utf-8";
/*-------------------------------------
reset
-------------------------------------*/
* {
    outline: none;
    box-sizing: border-box;
}
body,
div,
dl,dt,dd,
ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,td, 
figure, figcaption {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
table {
    border-collapse:separate;
    border-spacing:0;
}
fieldset,img { border:0;}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul { list-style:none;}
caption,th { text-align:left;}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,
q:after {
    content:'';
}
abbr,acronym { border:0;}

a {
    display: inline-block;
    text-decoration: none;
    color: #929290;
    transition: all ease-in 30s, color 1s;
}
a:hover {
    color: #FFF;
    transform: rotate( -2881deg ); 
    transition: transform ease-in 1500s, color 1s;
}
.future a:hover {
    color: #FFF;
    transform: rotate( 2881deg ); 
    transition: transform ease-in 1500s, color 1s;
}

html { border: 0px;}

body {
/*    color: #000;*/
    font-size: 9pt;
    cursor: default;
    background-color: #000;
}
video { max-width: 100%;}

.clear {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*Shine*/
.censored {
    color: #FFF;
    background-color: #FFF;
}
.shine {
    color: #FFF;
    text-shadow: 
        1px 0px 1px #FFF,
        0px 1px 1px #FFF,
        -1px 0px 1px #FFF,
        0px -1px 1px #FFF,
        
        2px 0px 4px #FFF,
        1px 1px 4px #FFF,
        0px 2px 4px #FFF,
        -1px 1px 4px #FFF,
        -2px 0px 4px #FFF,
        -1px -1px 4px #FFF,
        0px -2px 4px #FFF,
        1px -1px 4px #FFF,
        
        
                 150px 0px 2px #FFF,
                 200px 0px 3px #FFF,
                 250px 0px 4px #FFF,
                 300px 0px 5px #FFF,
                 350px 0px 6px #FFF,
                 400px 0px 7px #FFF,
0px 0px 0px #FFF;
}

/*-------------------------------------
icn_font
-------------------------------------*/
@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot?azsnae');
    src:url('../fonts/icomoon.eot?#iefixazsnae') format('embedded-opentype'),
        url('../fonts/icomoon.woff?azsnae') format('woff'),
        url('../fonts/icomoon.ttf?azsnae') format('truetype'),
        url('../fonts/icomoon.svg?azsnae#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-document:before {content: "\e600  ";}
.icon-arrow1ToBottom:before {content: "\e601";}

body {
    font-family:  "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 14px;
    line-height:  1.8;
    color: #CCC;
}


li {
    line-height: 1.3;
    padding: 10px 0 0 0;
}

a, .linkbtn { cursor: pointer;}

/*-------------------------------------
reset-SP
-------------------------------------*/
html {-webkit-text-size-adjust: 100%;}
img { max-width: 100%;}
@media screen and (max-width: 736px) {.table{ display: table;}}

/*-------------------------------------
nav
-------------------------------------*/
#menu-btn{
    width: 50px;
    height: 50px;
    position: fixed;
    padding: 14px 15px;
    right: 0;
    top: 0;
    background: #000;
    z-index: 90;
}
/*
@media screen and (min-width: 737px) {
    #menu-btn{
        display: none;
    }
}
*/
#menu-btn span, #page-top span{
    width: 20px;
    height: 2px;
    margin: 4px auto;
    display: block;
    background: #929290;
    transition: all ease 0.5s;
}
.menu-icn1.open{
    transform: rotate(405deg) translate(4px,4px);
    -webkit-transform: rotate(405deg) translate(4px,4px);
}
.menu-icn2.open{
    opacity: 0;
}
.menu-icn3.open{
    transform: rotate(-405deg) translate(4.5px,-4.5px);
    -webkit-transform: rotate(-405deg) translate(4.5px,-4.5px);
}

nav {
    width: 100%;
    height: 100%;
    left: 100%;
    position: fixed;
    top: 0;
    font-size: 18px;
    background: #000;
    z-index: 80;
    overflow: scroll;
    transition: all ease 0.5s;
}
nav.open {
    left: 0;
}
/*
#index nav {
    position: relative;
    left: 0;
}
*/

/*
@media screen and (min-width: 737px) {
    nav {
        top: 0;
        left: 0;
        width: 24%;
        min-width: 180px;
        height: 100%;
    }
    #index nav {position: fixed;}
*/

nav li {
    padding: 16px;
/*    border-bottom: solid 1px #b9b8b8;*/
    
}
nav .sub-nav {
    display: none;
    padding: 0;
}/*slideDown*/
.sub-nav ul {margin: -12px 0 -12px 0;}
.sub-nav ul li {
    padding: 12px 15px;
    font-size: 14px;
    line-height: 14px;
    color: #727171;
    transition: all ease 0.333s;
}
/*.sub-nav ul li a:hover { color: #c7c3c3;}*/
.on, .sub-nav ul li.on a { color: #e9e9e9!important;}
/*.off, .sub-nav ul li.off a { color: #c7c3c3!important;}*/

/*-------------------------------------
main
-------------------------------------*/
/*general*/

#main {opacity: 0;}/*fadeIn*/
@media screen and (max-width: 736px) {
    #main {
        width: 100%;
        margin:50px 0;
/*        padding: 0 10px;*/
    }
}
@media screen and (min-width: 737px) {
    #main {
        width: 90%;
        margin:  50px auto;
/*        padding: 37px 0 0 0;*/
/*        z-index: 0;*/
    }
}
.main-inner {
    box-sizing: content-box;
}
@media screen and (max-width: 737px) {
    .main-inner {
        margin: 16px;
    }
}
@media screen and (min-width: 737px) {
    .main-inner {
    }
}
h1 {
    font-size: 1.3em;
    margin: 1em 0 0.5em 0;
     text-align: right;
}
h2{
    font-size: 1.6em;
    color: #333;
    background-color: #FFF;
    margin: 1em 0 0.5em 0;
}
h3 {
    font-size: 1.3em;
    color: #333;
    background-color: #FFF;
    margin: 1em 0 0.5em 0;
}
h4 {
    font-size: 2.6em;
    margin: 1em 0 0.5em 0;
    border-bottom: solid 1px;
}
h5{
    font-size: 1.6em;
    margin: 1em 0 0.5em 0;
    border-bottom: solid 1px;
}
h6 {
    font-size: 1.3em;
    margin: 1em 0 0.5em 0;
    border-bottom: solid 1px;
}
b { color: #e9e9e9;}

.inlineBlock {
    display: inline-block;
    margin: 0 1em 0 0;
    vertical-align: top;
}
.inlineBlock img { height: 300px
}
/*figure*/
figcaption {
    text-align: right;
    margin-bottom: 1em;
}

/*Table*/
th, td, td a {
    line-height: 1.3;
}
th {
    width: 50px;
    vertical-align: top;
    text-align: right
}
th, td {
    padding: 5px 0 0 8px;
    font-size:  80%;
}

/*accordion*/
@media screen and (max-width: 736px) {
    h3.accordion{
        position: relative;
        border-bottom: solid 1px #b9b8b8;
    }
    h3.accordion span{
        position: absolute;
        right: 18px;
        bottom: 13px;
        display: block;
        transition: all ease 0.5s;
    }
    h3.accordion.open span{
        transform: rotateZ(540deg);
        -webkit-transform: rotateZ(540deg);

    }
    .accordion + .main-inner{display: none;}
}
@media screen and (min-width: 737px) { h3.accordion span{ display: none;}}

/*Language*/
/*
.jp {display: none;}
.en
*/

noscript {
    display: block;
    width: 290px;
    margin: 50px auto;
    padding: 10px;
}

/*-------------------------------------
clearfix
-------------------------------------*/
.cf:before,
.cf:after{
    content:"";
    display: table;
}
.cf:after{ clear:both;}
