:root{
    --font-white:#ffffff;
    --font-black:#000000;
    --font-red:#ff0000;
    --tableline-black:#333333;
    --maroon:#800000;
    --leafgreen:#33cc66;
    --orangeyellow:#ff9900;
    --skyblue:#3399ff;
    --pale-skyblue:#99ccff;
    --deep-skyblue:#0066cc;

    --marineblue:#00bbdd;
    --brown:#996644;
    --yellow:#ffee00;
    --red:#ff0000;
    
    --nav-gray:#c6c0c6;
    --nav-hover-white:#fffff0;
    --hover-orange:#eeaa00;
    --back-gray:#d6d6d6;

    --lightgray:#dddddd;
    --superlightgray:#eeeeee;
}

html, body{
    height:auto;/**/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    max-width:100%;
    min-height:100%;
}

body{
    margin:0;
}

header{
    position:sticky;
    top:0px;
    height:52px;
    background-color:var(--maroon);
    color:var(--font-white);
    vertical-align: top;
    z-index:100;
}

header#topnav-platform{
    max-height:42px;
}

header img{
    margin-top:1px;
    margin-bottom:1px;
    vertical-align: middle;
}

header hr.white-hr{
    border:1.5px solid var(--font-white);
    margin:0;
}/**/

header hr.green-hr{
    border:4.5px solid var(--leafgreen);
    margin:0;
}/**/

#u780-sidenav{
    display:none;
    max-height:40px;
    vertical-align: top;
}

#u780-sidenav img, #u780-sidenav button{
    vertical-align: middle;
}

#u780-sidenav#text{
    max-height:40px;
}

#u780-sidenav-main{
    display:none;
}

#u780-sidenav-main_mirror{
    display:none;
}


/* navigation window */
nav.sidenav{
    /*display:flex;*/
    width:250px;
    height:auto;
    min-height: 100%;
    background-color:var(--nav-gray);
    padding-left:5px;
}

nav.u780-nav{
    height:auto;
    background-color:var(--nav-gray);
    padding:3px 0 3px 6px;
    transition: 2.5s;
}

nav.u780-nav-open{
    animation-iteration-count:1;
    animation-duration: 0.3s;
    animation-fill-mode:both;
    animation-name:nav-open;
}
@keyframes nav-open{
    from{
        opacity: 0;
        height:0px;
        background-color:var(--nav-gray);
        padding:0;
    }
    to{
        opacity: 1;
        height:100vh;
        background-color:var(--nav-gray);
        padding:3px 0 3px 6px;
    }
}

nav.u780-nav-close{
    animation-iteration-count:1;
    animation-duration: 0.3s;
    animation-fill-mode:both;
    animation-name:nav-close;
}
@keyframes nav-close{
    from{
        opacity: 1;
        height:100vh;
        background-color:var(--nav-gray);
        padding:3px 0 3px 6px;
    }
    to{
        opacity: 0;
        height:0px;
        background-color:var(--nav-gray);
        padding:0;
    }
}

nav div.u780-nav-space1{
    height:400px;
}

button#u780-sidenav-button {
    vertical-align:baseline;
    margin:0;
    padding: 0;
    border: none;
    outline: none;
    font-size:0;
    line-height:0;
    color: inherit;
    background: none;
}

button#u780-sidenav-button_mirror {
    padding: 0;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
    background: none;
}

#u780-sidenav-button img:hover{
	opacity:0.5;    
}

#u780-sidenav-button_mirror img:hover{
	opacity:0.5;    
}

div#sidenav-platform{
    position:fixed;
    top:52px;
    left:0px;
    min-height: 110%;
    background-color:var(--nav-gray);
}
/**/

.navmains{
    display:flex;
    flex-direction: row;
    height:auto;
    min-height: 110%;
}

main{
    margin-left:255px;
    width:1695px;/*1695px?*/
    /*display:flex;*/
    /*padding-left:5px;*/
}

main h1{
    font-size:24px;
    border-left:15px solid var(--leafgreen);
    padding-left:5px;
}

main h2{
    font-size:20px;
    margin-left:20px;
    border-left:15px solid var(--orangeyellow);
    padding-left:5px;
}

main h3{
    font-size:20px;
    margin-left:20px;
    border-left:15px solid var(--skyblue);
    padding-left:5px;
}

.h1-sub{
    font-weight:600;
    color:var(--deep-skyblue);
}

/*.titleimg{
    width:100%;
    height:auto;
    overflow:clip;
}*/

.greeting{
    padding-left:25px;
}

.contents{
    padding-left:20px;
    padding-right:20px;
}

.sub-contents{
    padding-left:20px;
    padding-right:20px;
}

table, table th, table td{
    border:solid 1px var(--tableline-black);
    border-collapse:collapse;
}

.th-alt{
    display:block;
    border:none;
    padding-left:5px;
    width:175px;
}

.content-text1, .content-text2, .rowspan{
    padding-left:5px;
    width:235px;
}

.image1, .rowspan{
    height:132px;
    padding:0;
}

.image1A{
    padding-left:5px;
    width:235px;
}

.image1 img, .image1A img{
    top:auto;
    bottom:auto;
}

.explanation-td{
    padding-left:5px;
    width:500px;
}

.td-in1{
    margin-top:1px;
    margin-bottom:2px;
}

.td-in2{
    margin-top:1px;
    margin-bottom:1px;
}

.p-indent{
    padding-left:20px;
    padding-right:20px;
}

.main-bottom-hr{
    margin-top:10px;
    margin-bottom:0px;
}

.main-bottom{
    font-size:14px;
    padding-top:0px;
    padding-bottom:10px;
}

a, a:visited{
    color:var(--maroon);
    text-decoration: none;
}

a:hover{
    color:var(--hover-orange);
    text-decoration: none;
}

nav a, nav a:visited{
    color:var(--font-black);
    text-decoration: none;
    transition: color 0.1s;
}

nav a:hover{
    color:var(--nav-hover-white);
    text-decoration: none;
    transition: color 0.1s;
}

a img{
    transition: opacity 0.1s;
}

a img:hover{
	opacity:0.5;
    transition: opacity 0.1s;
}

.titles{
    border-left:13px solid var(--pale-skyblue);
}

.sub-title{
    margin-left:0px;
}

.mini{
    font-size:13px;
}

span.und-const{
    text-align:center;
    vertical-align:middle;
    font-size:12px;
    padding:1px;
    background-color:var(--yellow);
    color:var(--font-black);
}

span.new-contentA{
	text-align:center;
    vertical-align:middle;
    font-size:12px;
    font-weight:550;
    padding:1px;
    background-color:var(--yellow);
    color:var(--red);
}

span.new-contentB{
	text-align:center;
    vertical-align:middle;
    font-size:12px;
    font-weight:550;
    padding:1px;
    background-color:var(--red);
    color:var(--yellow);
}


/* train-photo_alert */

.train-photo_alert span{
    display:block;
}

.train-photo_alert1{
    border-left:solid 10px var(--orangeyellow);
    border-bottom:dotted 1px var(--orangeyellow);
}

.train-photo_alert2{
    margin-top:-20px;
    margin-bottom:2px;
}
/**//**/

@media(max-width:1275px){
    nav.sidenav{
	    /*display:flex;*/
	    width:20vw;
	    font-size:1.25vw;
	    height:auto;
	    min-height: 110%;
	    background-color:var(--nav-gray);
	    padding-left:5px;
    }

    main{
        margin-left:20vw;
        width:80vw;
    }
}

@media(max-width:1150px){
    .contents{
        padding-right:40px;
    }
}

@media(max-width:1080px){
	nav.sidenav{
	    font-size:1.25vw;
	    /*display:flex;*/
	}

    .explanation-td{
        width:70%;
    }

    .image1A{
        padding-left:5px;
        width:20%;
    }
}

@media(max-width:940px){
    nav.sidenav{
        display:none;
    }

    main{
        margin-left:0;
        width:100%;
        max-width:none;
    }

    #u780-sidenav{
        display:inline-block;
    }

    #u780-sidenav-main{
        display:inline;
    }

    #u780-sidenav-main_mirror{
        display:inline;
    }

    .contents{
        padding-right:30px;
    }

    .th-alt{
        padding-left:5px;
        padding-bottom:5px;
        width:auto;
    }
}

@media(max-width:900px){
    .greeting{
        padding-right:30px;
    }
    
    .contents{
        padding-right:30px;
    }

    .explanation-td{
        width:70%;
    }
}

@media(max-width:780px){
    .tr-2mas{
        display:flex;
    }

    nav.sidenav{
        display:none;
    }
    /*main{
        width:auto;
    }*/
}

@media(max-width:680px){
    nav.sidenav{
        display:none;
    }
}

@media(max-width:600px){
    .tr-2mas{
        display:flex;
    }
}