@charset "UTF-8";
    /* ======================================================================================
CSS information
file name  :  common.css
style info :  base + layout
admin info :  bonkurainfo :produced by GONZO SHOUTS
====================================================================================== */
    
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    font,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 1em;
    }
    
    body,
    table,
    input,
    textarea,
    select,
    option {
        /* font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif; */
        font-family: 'Noto Sans JP', sans-serif, Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
    }
    
    article,
    aside,
    canvas,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section,
    summary {
        display: block;
    }
    
    ol,
    ul {
        list-style: none;
    }
    
    blockquote,
    q {
        quotes: none;
    }
    
     :focus {
        outline: 0;
    }
    
    ins {
        text-decoration: none;
    }
    
    del {
        text-decoration: line-through;
    }
    
    img {
        vertical-align: top;
    }
    
    a:link {
        color: #00a0c6;
    }
    
    a:visited {
        color: #00a0c6;
    }
    
    a:hover {
        color: #00a0c6;
    }
    
    a:active {
        color: #00a0c6;
    }
    
    a:hover img {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }
    /* CSS Document */
    
    span#yoko {
        background-color: #F00;
        color: #FFFFFF;
        font-size: 77%;
        line-height: 1;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    body {
        /*background-image: url(/common/img/keyboard-old-technology-2318.jpg);
background-repeat: no-repeat;
background-position:top center;
background-attachment:fixed;
background-size:cover;*/
        background-color: #40403f;
    }
    
    #backGroudFuck {
        z-index: -1;
        background-color: #40403f;
        background-image: url(/common/img/keyboard-old-technology-2318.jpg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        position: fixed;
        background-size: cover;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    header {}
    
    header #logoNickproduce {
        width: 480px;
        margin: 0 auto 0 auto;
        padding: 140px 0 0 0;
    }
    
    header #logoNickproduce img {
        display: block;
        width: 100%;
        padding: 0 0 24px 0;
        border-bottom: 2px solid #fff;
    }
    
    header p.lead {
        width: 860px;
        padding: 32px 0 0 0;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.8;
        color: #fff;
        text-align: center;
    }
    
    nav {
        transition: 0.3s;
    }
    
    nav ul {
        width: 640px;
        margin: 80px auto 0 auto;
        font-size: 16px;
        text-align: center;
        font-weight: bold;
        text-transform: uppercase;
    }
    
    nav ul:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
    }
    
    nav ul li {
        display: inline-block;
        text-align: center;
        margin: 0 8px;
    }
    
    nav ul li.lastChild {
        display: none;
    }
    
    nav ul li a {
        display: inline-block;
        text-decoration: none;
        /* font-family: 'Open Sans', sans-serif; */
        font-weight: 300;
        padding: 12px 24px;
        letter-spacing: 2px;
        color: #fff;
        border: 1px solid #fff;
    }
    
    nav ul li a:link {
        color: #fff;
    }
    
    nav ul li a:visited {
        color: #fff;
    }
    
    nav ul li a:hover {
        background-color: #040404;
        color: #fff;
    }
    
    nav.navFixed {
        position: fixed;
        top: 0;
        width: 100%;
        padding: 8px 0;
        background-color: #404040;
        z-index: 300;
        opacity: 0.94;
    }
    
    nav.navFixed ul {
        margin: 0 auto;
        width: 100%;
    }
    
    nav.navFixed ul li.lastChild {
        display: inline-block;
    }
    /* HEADER PAGE TOP INFOMATION (FEED)
===============================================================*/
    
    header .pagetop__info {
        background-color: #000000;
        margin-top: 46px;
        text-align: center;
        margin: 32px auto;
        padding: 24px;
        width: 700px;
        line-height: 1.7;
        opacity: 0.8;
        border-radius: 3px;
        font-size: 21px;
    }
    
    header .pagetop__info a {
        opacity: 1;
        text-decoration: none;
        color: #ffffff;
    }
    
    header .pagetop__info a:hover {
        text-decoration: underline;
    }
    
    header .pagetop__info h2 {
        color: #ffffff;
        margin-bottom: 12px;
    }
    
    header .pagetop__info.pagetop__info__hide {
        display: none!important;
    }
    /* SECTION HEADER
===============================================================*/
    
    section.contactHead,
    section.aboutHead,
    section.chronicleHead,
    section.page404Head,
    section.performanceHead {
        width: 960px;
        box-sizing: border-box;
        margin: 0 auto;
        text-align: center;
        padding: 120px 0;
    }
    
    section.contactHead:after,
    section.aboutHead:after,
    section.chronicleHead:after,
    section.page404Head:after,
    section.performanceHead:after {
        display: block;
        content: "";
        clear: both;
        height: 0;
    }
    
    section.contactHead h2,
    section.aboutHead h2,
    section.chronicleHead h2,
    section.page404Head h2,
    section.performanceHead h2 {
        width: 580px;
        margin: 0 auto;
        font-size: 42px;
        /* font-family: 'Open Sans', sans-serif; */
        font-weight: 300;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #fff;
    }
    
    section.contactHead h2,
    section.aboutHead h2,
    section.chronicleHead h2,
    section.page404Head h2,
    section.performanceHead h2 {
        display: flex;
        margin-bottom: 36px;
        align-items: center;
        text-align: center;
        /* for no-flexbox browsers */
    }
    
    section.contactHead h2:before,
    section.contactHead h2:after,
    section.aboutHead h2:before,
    section.aboutHead h2:after,
    section.chronicleHead h2:before,
    section.chronicleHead h2:after,
    section.page404Head h2:before,
    section.page404Head h2:after,
    section.performanceHead h2:before,
    section.performanceHead h2:after {
        border-top: 1px solid;
        content: "";
        display: inline;
        /* for IE */
        flex-grow: 1;
    }
    
    section.contactHead h2:before,
    section.aboutHead h2:before,
    section.chronicleHead h2:before,
    section.page404Head h2:before,
    section.performanceHead h2:before {
        margin-right: 0.5em;
    }
    
    section.contactHead h2:after,
    section.aboutHead h2:after,
    section.chronicleHead h2:after,
    section.page404Head h2:after,
    section.performanceHead h2:after {
        margin-left: 0.5em;
    }
    
    .contactContents_btn a {
        display: inline-block;
        background: #09385b;
        padding: 0.6em 2.3em;
        border-radius: 32px;
        color: #ffffff;
        transition: all 0.8s;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
    }
    
    .contactContents_btn a:hover {
        color: #ffffff;
        background: #4bc7bf;
        transition: all 0.2s;
    }
    
    @media screen and (max-width: 680px) {
        .contactContents_btn a {
            font-size: 16px;
        }
    }
    /* performance
===============================================================*/
    
    article#performanceContents {
        margin: 140px 0 0 0;
        background-color: #fff;
        opacity: 0.94;
    }
    
    section.performanceHead h2 {
        color: #222;
    }
    
    #performanceContents h3 {
        font-size: 21px;
        font-weight: bold;
    }
    
    #performanceContents h3.hazard {
        color: #00a0c6;
    }
    
    #performanceContents h3 span {
        display: block;
        font-size: 16px;
        font-weight: normal;
    }
    
    #performanceContents ul {
        font-size: 16px;
        margin-top: 3.2em;
    }
    
    #performanceContents ul li {
        margin-top: 1.6em;
    }
    
    #performanceContents ul li:first-child {
        margin-top: 0;
    }
    
    #performanceContents dl {
        font-size: 16px;
        margin-top: 3.2em;
    }
    
    #performanceContents dl dt {
        margin-top: 1.6em;
        font-weight: bold;
    }
    
    #performanceContents dl dt:first-child {
        margin-top: 0;
    }
    
    #performanceContents dl dd {}
    
    #performanceContents .corich_box {
        margin-top: 60px;
    }
    
    #performanceContents .corich_box .corich_box_title {
        font-weight: bold;
        font-size: 16px;
    }
    /*
Ver2*/
    
    .com_wrap:before,
    .com_wrap:after {
        content: " ";
        display: table;
    }
    
    .com_wrap:after,
    .com_wrap:after {
        clear: both;
    }
    
    .com_wrap {
        margin-bottom: 60px;
    }
    
    .com_left,
    .com_right {
        float: left;
        position: relative;
        min-height: 1px;
    }
    
    .com_left {
        width: 50%
    }
    
    .com_right {
        width: 50%;
    }
    
    .com_left>img,
    .com_right>img {
        width: 100%;
        height: auto;
    }
    /* about
===============================================================*/
    
    article#aboutContents {
        margin: 140px 0 0 0;
        background-color: #ffd012;
        opacity: 0.94;
    }
    
    section.aboutHead .aboutLead-01,
    section.aboutHead .aboutLead-02 {
        width: 460px;
        margin: 0;
        font-size: 16px;
        line-height: 1.8;
        color: #040404;
    }
    
    section.aboutHead .aboutLead-01 dt,
    section.aboutHead .aboutLead-02 dt {
        font-size: 16px;
        font-weight: bold;
        margin: 0 0 18px 0;
    }
    
    section.aboutHead .aboutLead-01 dd,
    section.aboutHead .aboutLead-02 dd {
        text-align: left;
    }
    
    section.aboutHead .aboutLead-01 {
        float: left;
    }
    
    section.aboutHead .aboutLead-02 {
        float: right;
    }
    
    section.aboutHead .moreInfo a {
        display: inline-block;
        padding: 9px 18px;
        letter-spacing: 2px;
        text-decoration: none;
        color: #040404;
        border: 1px solid #040404;
        border-radius: 3px;
        font-size: 16px;
        margin: 14px 0 0 0;
    }
    /* Chronicle
===============================================================*/
    
    article#chronicleContents {
        margin: 140px 0 0 0;
        background-color: #6b6b6b;
        opacity: 0.94;
    }
    
    article#chronicleContents dl.works,
    article#chronicleContents dl.workshops,
    article#chronicleContents dl.another,
    article#chronicleContents dl.drama,
    article#chronicleContents dl.essey {
        font-size: 16px;
        width: 960px;
        margin: 0 auto;
        line-height: 1.6;
        font-weight: normal;
        color: #fff;
    }
    
    article#chronicleContents dl+dl {
        margin-top: 60px!important;
    }
    
    article#chronicleContents dl:after {
        content: "";
        display: block;
        clear: both;
        height: 0;
    }
    
    article#chronicleContents h3 {
        /* font-family: 'Open Sans', sans-serif; */
        font-weight: 300;
        font-size: 16px;
        text-transform: uppercase;
        margin: 0 auto 24px auto;
        letter-spacing: 2px;
        text-align: center;
        width: 240px;
    }
    
    article#chronicleContents dt {
        display: inline-block;
        float: left;
        width: 9em;
        text-align: right;
    }
    
    article#chronicleContents dd {
        display: block;
        margin: 0 0 1em 11em;
        text-align: left;
    }
    /* Contact
===============================================================*/
    
    article#contactContents {
        margin: 140px 0 0 0;
        /* background-color: #00876d;
    opacity: 0.94; */
        background-color: rgba(0, 135, 109, 0.94);
    }
    /* SOCIAL
===============================================================*/
    
    article#socialContents {
        margin: 64px 0 0 0;
        padding: 0;
    }
    
    article#socialContents .socialHead ul {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    
    article#socialContents .socialHead ul li {
        display: inline-block;
    }
    
    article#socialContents .socialHead ul li a {
        display: inline-block;
        padding: 0px;
        width: 34px;
    }
    
    article#socialContents .socialHead ul li a img {
        width: 100%;
        height: auto;
    }
    
    footer {
        margin: 32px 0 0 0;
        background-color: #40403f;
        padding: 0 0 60px 0;
        text-align: center;
    }
    
    footer #goTop {
        text-align: center;
        width: 100%;
        margin: 0 auto 18px auto;
        /* font-family: 'Open Sans', sans-serif; */
        padding: 0px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    
    footer #goTop a {
        display: block;
        width: 180px;
        text-decoration: none;
        background-color: #2c2c2e;
        padding: 12px 0;
        color: #fff;
        position: relative;
        margin: 0 auto;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    
    footer #goTop a:after {
        width: 6px;
        height: 6px;
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 50%;
        margin-right: -6px;
        margin-top: -3px;
        background-color: #2c2c2e;
        border-left: 2px solid #fff;
        border-top: 2px solid #fff;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    
    footer ul li {
        color: #fff;
        font-size: 12px;
        /* font-family: 'Open Sans', sans-serif; */
        font-weight: 300;
        letter-spacing: 2px;
    }
    
    #page404Contents {
        width: 100%;
        background-color: #ffd012;
        opacity: 0.94;
        margin: 36px 0 0 0;
    }
    /* 404 CONTENT
===============================================================*/
    
    .page404Head {
        box-sizing: border-box;
        margin: 0 auto;
        text-align: center;
        padding: 120px 0;
    }
    
    p.text404LinkHome {
        margin: 36px 0;
    }
    
    p.text404LinkHome a {
        text-decoration: none;
        padding: 12px 24px;
    }
    
    @media only screen and (max-device-width: 680px) {}
    
    @media screen and (max-width: 680px) {}
    
    @media only screen and (max-device-width: 800px) {}
    
    @media screen and (max-width: 680px) {
        html {
            min-width: 320px;
            min-height: 0;
        }
        body {
            /*background-image: url(/common/img/keyboard-old-technology-2318.jpg);
			background-repeat:repeat-y;
			background-position:top center;
			background-attachment:fixed;
			background-size: contain;*/
            background-color: #474747;
        }
        #backGroudFuck {
            z-index: -1;
            background-color: #474747;
            background-image: url(/common/img/keyboard-old-technology-2318.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        header {
            background-color: #191919;
            padding: 0 0 24px 0;
            opacity: 0.9;
        }
        header #logoNickproduce {
            width: 70%;
            margin: 0 auto 0 auto;
            padding: 24px 0 0 0;
        }
        header #logoNickproduce img {
            display: block;
            width: 100%;
            padding: 0 0 24px 0;
            border-bottom: 2px solid #fff;
        }
        header p.lead {
            width: 70%;
            padding: 32px 0 0 0;
            margin: 0 auto;
            font-size: 16px;
            line-height: 1.8;
            color: #fff;
            text-align: left;
        }
        header p.lead br {
            display: none;
        }
        nav {}
        nav ul {
            width: 80%;
            margin: 24px auto 0 auto;
            font-size: 16px;
            text-align: center;
            font-weight: bold;
            text-transform: uppercase;
        }
        nav ul:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
        }
        nav ul li {
            display: block;
            text-align: center;
            margin: 0 0 0 0;
        }
        nav ul li+li {
            margin-top: 12px;
        }
        nav ul li a {
            display: block;
            text-decoration: none;
            /* font-family: 'Open Sans', sans-serif; */
            font-weight: 300;
            padding: 12px 24px;
            letter-spacing: 2px;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 3px;
        }
        nav ul li a:link {
            color: #fff;
        }
        nav ul li a:visited {
            color: #fff;
        }
        nav ul li a:hover {
            background-color: transparent;
            /*	filter:alpha(opacity=90);
			opacity: 0.5;*/
            color: #fff;
        }
        /* HEADER PAGE TOP INFOMATION (FEED)
===============================================================*/
        header .pagetop__info {
            width: 65%;
            text-align: left;
        }
        header .pagetop__info h2 {
            text-align: center;
        }
        /* SECTION HEADER
		===============================================================*/
        section.contactHead,
        section.aboutHead,
        section.chronicleHead,
        section.page404Head,
        section.performanceHead {
            width: 90%;
            box-sizing: border-box;
            margin: 0 auto;
            text-align: center;
            padding: 60px 0;
        }
        section.contactHead:after,
        section.aboutHead:after,
        section.chronicleHead:after,
        section.page404Head:after,
        section.performanceHead:after {
            display: block;
            content: "";
            clear: both;
            height: 0;
        }
        section.contactHead h2,
        section.aboutHead h2,
        section.chronicleHead h2,
        section.page404Head h2,
        section.performanceHead h2 {
            width: 90%;
            margin: 0 auto;
            font-size: 26px;
            /* font-family: 'Open Sans', sans-serif; */
            font-weight: 300;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #fff;
        }
        section.contactHead h2,
        section.aboutHead h2,
        section.chronicleHead h2,
        section.page404Head h2,
        section.performanceHead h2 {
            display: flex;
            margin-bottom: 36px;
            align-items: center;
            text-align: center;
            /* for no-flexbox browsers */
        }
        section.contactHead h2:before,
        section.contactHead h2:after,
        section.aboutHead h2:before,
        section.aboutHead h2:after,
        section.chronicleHead h2:before,
        section.chronicleHead h2:after,
        section.page404Head h2:before,
        section.page404Head h2:after,
        section.performanceHead h2:before,
        section.performanceHead h2:after {
            border-top: 1px solid;
            content: "";
            display: inline;
            /* for IE */
            flex-grow: 1;
        }
        section.contactHead h2:before,
        section.aboutHead h2:before,
        section.chronicleHead h2:before,
        section.page404Head h2:before,
        section.performanceHead h2:before {
            margin-right: 0.5em;
        }
        section.contactHead h2:after,
        section.aboutHead h2:after,
        section.chronicleHead h2:after,
        section.page404Head h2:after,
        section.performanceHead h2:after {
            margin-left: 0.5em;
        }
        /* performance
		===============================================================*/
        article#performanceContents {
            margin: 70px 0 0 0;
            background-color: #fff;
        }
        section.performanceHead h2 {
            color: #222;
        }
        .com_left,
        .com_right {
            float: none;
        }
        .com_left {
            width: 100%;
        }
        .com_right {
            width: 100%;
        }
        /* about
		===============================================================*/
        article#aboutContents {
            margin: 70px 0 0 0;
            background-color: #ffd012;
        }
        section.aboutHead .aboutLead-01,
        section.aboutHead .aboutLead-02 {
            width: 80%;
            margin: 0 auto;
            font-size: 16px;
            line-height: 1.8;
            color: #040404;
        }
        section.aboutHead .aboutLead-02 {
            margin: 36px auto 0 auto;
        }
        section.aboutHead .aboutLead-01 dt,
        section.aboutHead .aboutLead-02 dt {
            font-size: 16px;
            font-weight: bold;
            margin: 0 0 18px 0;
        }
        section.aboutHead .aboutLead-01 dd,
        section.aboutHead .aboutLead-02 dd {
            text-align: left;
        }
        section.aboutHead .aboutLead-01 {
            float: none;
        }
        section.aboutHead .aboutLead-02 {
            float: none;
        }
        section.aboutHead .moreInfo a {
            display: inline-block;
            padding: 9px 18px;
            letter-spacing: 2px;
            text-decoration: none;
            color: #040404;
            border: 1px solid #040404;
            border-radius: 3px;
            font-size: 16px;
            margin: 14px 0 0 0;
        }
        /* Chronicle
		===============================================================*/
        article#chronicleContents {
            margin: 70px 0 0 0;
            background-color: #6b6b6b;
        }
        article#chronicleContents dl.works,
        article#chronicleContents dl.workshops,
        article#chronicleContents dl.another,
        article#chronicleContents dl.drama,
        article#chronicleContents dl.essey {
            font-size: 16px;
            width: 80%;
            margin: 0 auto;
            line-height: 1.6;
            font-weight: normal;
            color: #fff;
        }
        article#chronicleContents dl+dl {
            margin-top: 60px!important;
        }
        article#chronicleContents dl:after {
            content: "";
            display: block;
            clear: both;
            height: 0;
        }
        article#chronicleContents h3 {
            /* font-family: 'Open Sans', sans-serif; */
            font-weight: 300;
            font-size: 16px;
            text-transform: uppercase;
            margin: 0 auto 24px auto;
            letter-spacing: 2px;
            text-align: center;
            width: 90%;
        }
        article#chronicleContents dt {
            display: block;
            float: none;
            width: 9em;
            margin: 1em 0 0 0;
            text-align: left;
        }
        article#chronicleContents dd {
            display: block;
            margin: 0.5em 0 0 0;
            text-align: left;
        }
        article#chronicleContents .works dt.noYear {
            height: 0;
            overflow: hidden;
        }
        /* Contact
		===============================================================*/
        article#contactContents {
            margin: 70px 0 0 0;
            background-color: #00876d;
        }
        /* SOCIAL
		===============================================================*/
        article#socialContents {
            margin: 64px 0 0 0;
            padding: 0;
        }
        article#socialContents .socialHead ul {
            width: 100%;
            margin: 0 auto;
            text-align: center;
        }
        article#socialContents .socialHead ul li {
            display: inline-block;
        }
        article#socialContents .socialHead ul li a {
            display: inline-block;
            padding: 0px;
            width: 34px;
        }
        article#socialContents .socialHead ul li a img {
            width: 100%;
            height: auto;
        }
        footer {
            margin: 32px 0 0 0;
            background-color: #40403f;
            padding: 0 0 60px 0;
            text-align: center;
        }
        footer #goTop {
            text-align: center;
            width: 100%;
            margin: 0 auto 18px auto;
            /* font-family: 'Open Sans', sans-serif; */
            padding: 0px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        footer #goTop a {
            display: block;
            width: 180px;
            text-decoration: none;
            background-color: #2c2c2e;
            padding: 12px 0;
            color: #fff;
            position: relative;
            margin: 0 auto;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        footer #goTop a:after {
            width: 6px;
            height: 6px;
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            right: 50%;
            margin-right: -6px;
            margin-top: -3px;
            background-color: #2c2c2e;
            border-left: 2px solid #fff;
            border-top: 2px solid #fff;
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
        footer ul li {
            color: #fff;
            font-size: 16px;
            /* font-family: 'Open Sans', sans-serif; */
            font-weight: 300;
            letter-spacing: 2px;
        }
        /* 404 CONTENT
===============================================================*/
        .page404Head {
            box-sizing: border-box;
            margin: 0 auto;
            text-align: center;
            padding: 120px 0;
        }
        p.text404LinkHome {
            margin: 36px 0;
        }
        p.text404LinkHome a {
            text-decoration: none;
            padding: 12px 24px;
        }
    }