@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-position-y: -20px;
    background-size: 120%;
    background-repeat: no-repeat;
    background-color: #FFEFEF; /* iphoneのスクロールバウンドでslide-anchorの後ろが見えちゃう対策 */
}

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

div#news {
    display: none;
}

a#header-return-home {
    display: none;
}

div#twitter {
    display: none;
}

#slide-anchor {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    right: 0;
    transition: right 500ms ease;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /* for iOS native scroll */
}
#slide-anchor::before {
    height: 20vh;
    display: block;
    content: '';
}
#slide-anchor::-webkit-scrollbar {
    display: none;
}

#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: 100%;
    height: auto;
    min-height: auto;
    top: 0;
    left: 0;
    background-color: #1D1F21;
    float: inherit;
    /* position: sticky;
    position: -webkit-sticky; */
    position: relative;
    z-index: 1;
    overflow-x: scroll;
}

    nav ul {
        margin: 0;
        padding: 0;
        position: relative;
        top: 0;
        height: auto;
        display: flex;
        width: max-content;
    }

        nav ul > li {
            display: block;
            text-align: center;
            color: white;
            font-size: 16px;
            width: 100px; /* font-sizeに依存 */
            border-right: 1px gray solid;
        }
            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: none;
}

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

div#content {
    display: block;
    background-color: #FFEFEF;
    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 */
    width: auto;
    margin: 0;
    height: auto;
    min-height: 100%;
    z-index: 0;
    padding-bottom: 10%;
}

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

    div#content > h1 {
        display: block;
        margin: 18px 10px 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;
        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: 5px;
        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;
        margin: 12px auto;
        font-size: 24px;
        letter-spacing: 0.03em;
    }

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

    div#content ul, dl, table {
        display: block;
        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 {
        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;
        width: auto;
        font-size: 20px;
        line-height: 36px;
    }

/* description-image */

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

#content .description-image-inner {
    width: auto;
    position: relative;
}

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

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

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

    #content .description-image-inner p {
        display: block;
        width: auto;
        position: relative;
        text-align: justify;
    }

    #content .description-image-inner p.image {
        height: 80vw;        
    }

    #content .description-image-inner p.image img {
        position: absolute;
        left: 0;
        right: 0;
        width: 80vw;
        margin: 0 auto;
    }

/* 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 {
        margin: 20px 10px;
        background-image: none;
        font-size: 36px;
    }

    #content .description-fixedimage p {
        margin: 20px 10px;
        text-align: justify;
    }

/* description-center */

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

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

    #content .description-center p {
        margin: 0 10px;
        text-align: justify;
    }

/* event */

#content div.event-item {
    width: auto;
    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;
    width: 100%;
    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;
    right: 5px;
    bottom: 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: auto;
    margin: 0 auto;
    overflow: hidden;
}

#content div.buho-issue {
    width: 48%;
    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;
}

/* welcome */
.qrcode {
    display: none;
}

/* gallery */
#content a > img {
    width: 100%;
}