@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
}

#main {
    width: 100%;
    height: 100%;
    margin: 0;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
    background-image: url(/images/ichi-goukan-1.jpg);
    background-size: cover;
    -ms-behavior: url(/js/backgroundsize.min.htc);
}

    header img#tsg-logo-alt {
        position: absolute;
        top: 0;
        left: 0;
        animation: fadein 2s linear 1s both;
    }

div#news {
    width: 320px;
    height: 320px;
    position: absolute;
    top: 40%;
    right: 30%;
    margin: -240px;
    padding: 80px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    color: #1D1F21;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 'Meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック体', 'YuGothic', '游ゴシック', 'Yu Gothic', 'IPAゴシック', 'IPAGothic', sans-serif;
    overflow: hidden;
}

    div#news * {
        opacity: 1;
    }

    div#news h1 {
        margin: 0;
        font-size: 24px;
        margin-bottom: 16px;
    }

    div#news div.news-item {
        margin: 12px 0;
        width: 100%;
    }

        div#news div.news-item h2 {
            font-size: 16px;
            margin: 0;
        }

            div#news div.news-item h2.priority-1 {
                color: inherit;
            }

            div#news div.news-item h2.priority-2 {
                color: rgb(32, 32, 119);
            }

            div#news div.news-item h2.priority-3 {
                color: rgb(226, 0, 0);
                font-size: 24px;
            }

        div#news div.news-item p.news-date {
            font-size: 12px;
            text-align: right;
            margin: 0;
        }

        div#news div.news-item p.news-description {
            font-size: 12px;
        }

a#header-return-home {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

div#twitter {
    position: absolute;
    left: 10px;
    bottom: 7px;
}

#slide-anchor {
    width: calc(100% - 180px);
    height: 100%;
    position: fixed;
    top: 0;
    right: calc(180px + 140px - 100%);
    transition: right 500ms ease;
}

#slide-anchor.open {
    right: 0;
}

div#content, nav {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 'Meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック体', 'YuGothic', '游ゴシック', 'Yu Gothic', 'IPAゴシック', 'IPAGothic', sans-serif;
}

nav {
    width: 140px;
    height: 100%;
    min-height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #1D1F21;
    float: left;
}

    nav ul {
        margin: 0;
        padding: 0;
        position: relative;
        top: 5%;
        width: 100%;
        height: 100%;
    }

        nav ul > li {
            display: block;
            width: 100%;
            font-size: 16px;
            text-align: center;
            color: white;
        }
            nav ul > li > a, nav ul > li > div {
                display: block;
                padding: 10px 0;
                height: auto;
                text-decoration: none;
                color: inherit;
            }

            nav ul > li a:hover {
                background-color: #595D6B;
            }

            nav ul > li.now a {
                background-color: #595D6B;
            }

a#return-home {
    display: block;
    width: 140px;
    height: 70px;
    padding: 10px 0;
    text-decoration: none;
    text-align: center;
    line-height: 1.2em;
    position: absolute;
    left: 0;
    bottom: 0;
    color: #D36FD9;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 48px;
}

    a#return-home:hover {
        background-color: #595D6B;
    }

@keyframes content-in {
    from {
        padding-top: 200px;
    }
    to {
        padding-top: 0;
    }
}

div#content {
    display: block;
    background-color: #FFEFEF;
    width: calc(100% - 140px);
    height: 100%;
    margin-left: 140px;
    overflow: auto;
    color: #2D2F31;
    animation: content-in 500ms cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint
    -webkit-overflow-scrolling: touch; /* for iOS native scroll */
}

    div#content p {
        display: block;
        width: 720px;
        margin: 10px auto;
        font-size: 16px;
        line-height: 1.7em;
    }

    div#content p > img {
        max-width: 100%;
    }

    div#content > h1 {
        display: block;
        width: 720px;
        margin: 18px auto 48px;
        font-family: "Lucida Grande", "Lucida Sans Unicode", 'Meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック体', 'YuGothic', '游ゴシック', 'Yu Gothic', 'IPAゴシック', 'IPAGothic', sans-serif;
        font-size: 48px;
        font-weight: bold;
        letter-spacing: 0.1em;
        color: #2D2F31;
    }

    div#content > h2, div#content > div.wrap-box > h2 {
        display: block;
        width: 720px;
        padding: 4px 0;
        margin: 64px auto 18px;
        font-family: "Lucida Grande", "Lucida Sans Unicode", 'Meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック体', 'YuGothic', '游ゴシック', 'Yu Gothic', 'IPAゴシック', 'IPAGothic', sans-serif;
        font-size: 20px;
        font-weight: normal;
        text-indent: 24px;
        letter-spacing: 0.03em;
        line-height: 1em;
        border-left: 4px solid #C600D8;
        /*
        background-image: -ms-linear-gradient(left, #333333 0%, #FFEFEF 100%);
        background-image: -moz-linear-gradient(left, #333333 0%, #FFEFEF 100%);
        background-image: -o-linear-gradient(left, #333333 0%, #FFEFEF 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #333333), color-stop(1, #FFEFEF));
        background-image: -webkit-linear-gradient(left, #333333 0%, #FFEFEF 100%);
        background-image: linear-gradient(to right, #333333 0%, #FFEFEF 100%);
        */
        background-color: #333333;
        color: white;
    }

    div#content > h3 {
        display: block;
        width: 720px;
        margin: 12px auto;
        font-size: 24px;
        letter-spacing: 0.03em;
    }

    div#content > h4 {
        display: block;
        width: 720px;
        margin: 12px auto;
        font-size: 16px;
        letter-spacing: 0.03em;
    }

    div#content ul, dl, table {
        display: block;
        width: 720px;
        margin: 12px auto;
    }

    div#content a {
        font-weight: normal;
        color: #2671FF;
        text-decoration: none;
    }

        div#content a:hover {
            text-decoration: underline;
        }

        div#content a:visited{
            color: #2671FF;
        }

    div#content > table tr {
        background-color: #D3D3D3;
    }

    div#content > table tr td {
        padding: 3px 6px;
    }

    div#content > table tr th {
        padding: 3px 6px;
    }

    div#content > table tr:nth-child(even) {
        background-color: #E4A1E9;
    }

    div#content > table tr:nth-child(odd) {
        background-color: #D3D3D3;
    }

    div#content > table th {
        background-color: #1D1F21;
        color: #D36FD9;
    }

    div#content div.wrap-box {
        width: 720px;
        margin: 0 auto;
    }

#content .description-purple {
    padding: 40px 0;
    background-image: url(/images/penrose-purple.png);
    background-repeat: repeat;
    color: white;
}

    #content .description-purple p {
        display: block;
        margin: 0 auto;
        width: 100%;
        font-size: 20px;
        line-height: 36px;
    }

/* description-image */

#content .description-image-outer {
    width: 100%;
    padding: 120px 0;
    background-color: white;
}

#content .description-image-inner {
    width: 720px;
    height: 360px;
    position: relative;
    margin: 0 auto;
}

    #content .description-image-inner a {
        color: inherit;
    }
    #content .description-image-inner a:visited {
        color: inherit;
    }

    #content .description-image-inner h2 {
        margin-top: 0;
        width: 320px;
        background-image: none;
        font-size: 36px;
    }

    #content .description-image-inner.right h2 {
        margin-left: 420px;
    }

    #content .description-image-inner.left h2 {
        margin-right: 420px;
    }

    #content .description-image-inner p.subtitle {
        display: block;
        width: 320px;
        position: relative;
        text-align: right;
        font-size: 12px;
    }

    #content .description-image-inner p {
        display: block;
        width: 320px;
        position: relative;
    }

    #content .description-image-inner.right p {
        margin: 10px 0 10px 420px;
    }

    #content .description-image-inner.left p {
        margin: 10px 420px 10px 0;
    }

    #content .description-image-inner p.image {
        height: 0;
        width: 0;
        padding: 0;
        margin: 0;
    }

    #content .description-image-inner.right p.image {
        position: absolute;
        top: 0;
        left: 0;
    }

    #content .description-image-inner.left p.image {
        position: absolute;
        top: 0;
        left: 360px;
    }

    #content .description-image-inner p.image img {
        width: 360px;
        height: 360px;
        margin: 0;
        max-width: initial;
    }

/* description-fixedimage */

#content .description-fixedimage {
    padding: 120px 0;
    background-size: cover;
    -ms-behavior: url(/js/backgroundsize.min.htc);
    background-attachment: fixed;
    color: black;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

    #content .description-fixedimage h2 {
        width: 400px;
        margin: 20px auto;
        background-image: none;
        font-size: 36px;
    }

    #content .description-fixedimage.right h2 {
        padding-left: 320px;
    }

    #content .description-fixedimage.left h2 {
        padding-right: 320px;
    }

    #content .description-fixedimage p {
        width: 400px;
        margin: 20px auto;
    }

    #content .description-fixedimage.right p {
        padding-left: 320px;
    }

    #content .description-fixedimage.left p {
        padding-right: 320px;
    }

/* description-center */

#content .description-center {
    padding: 60px 0;
    background-size: cover;
    -ms-behavior: url(/js/backgroundsize.min.htc);
}

    #content .description-center h2 {
        background-image: none;
        font-size: 36px;
        text-align: center;
        margin-bottom: 60px;
    }

    #content .description-center p {
        width: 720px;
        margin: 0 auto;
    }

/* event */

#content div.event-item {
    width: 700px;
    margin: 12px auto;
    background-color: #1D1F21;
    color: rgb(255, 255, 255);
    padding: 5px;
    position: relative;
    overflow: hidden;
    border-top: 5px solid rgb(19, 166, 166);
}

#content h3.event-name {
    margin: 0;
    float: left;
    font-size: 20px;
    font-weight: normal;
    display: inline;
}

#content p.event-date {
    margin: 0 10px;
    display: inline;
    padding: 0;
    color: silver;
    font-size: 14px;
}

#content p.event-link {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 120px;
    height: 24px;
    margin: -12px 0 0 0;
    text-align: center;
    font-size: 18px;
}

    #content p.event-link a {
        text-decoration: none;
        background-color: rgb(204, 50, 186);
        width: 100%;
        height: 100%;
        color: white;
        display: block;

        line-height: 24px;
        font-weight: normal;
    }

/* buho */

#content div.buho-year {
    width: 720px;
    margin: 0 auto;
    overflow: hidden;
}

#content div.buho-issue {
    width: 31%;
    height: 170px;
    float: left;
    margin: 1%;
    background-color: #1D1F21;
    color: white;
    border-top: 5px solid rgb(182, 48, 182);
    position: relative;
}

    #content div.buho-issue .buho-title {
        margin: 12px 12px 5px;
    }

    #content div.buho-issue .buho-info {
        margin: 5px 11px;
        font-size: 14px;
        color: rgb(207, 207, 207);
    }

    #content div.buho-issue > ul {
        display: block;
        padding: 0 3%;
        margin: 0;
        width: 94%;
        overflow: hidden;
        text-align: center;
        position: absolute;
        bottom: 10px;
        right: 0;
    }

        #content div.buho-issue > ul > li {
            display: block;
            width: 29%;
            float: right;
            margin: 0 2%;
        }

            #content div.buho-issue > ul > li.pdf {
                background-color: rgb(231, 75, 37);
            }

            #content div.buho-issue > ul > li.html {
                background-color: rgb(39, 134, 138);
            }

            #content div.buho-issue > ul > li.pslzh {
                background-color: rgb(131, 166, 55);
            }

        #content div.buho-issue > ul a {
            display: block;
            color: white;
            padding: 5px 0;
        }

            #content div.buho-issue > ul a:hover {
                text-decoration: none;
            }

/* works */

#content p.works-link {
    display: block;
    width: 170px;
    height: 30px;
    float: right;
    clear: right;
    margin: 5px;

    border-radius: 3px;

    background-color: #168dd4;
    color: white;
}

    #content p.works-link > a {
        display: block;
        width: 100%;
        height: 100%;

        text-align: center;
        font-size: 14px;
        line-height: 30px;

        color: white;
    }

    #content p.works-link > a:hover {
        text-decoration: none;
    }

    #content p.works-caption {
        font-size: 24px;
        font-weight: bold;
    }

.center {
    text-align: center;
}