﻿/*
margin border padding
position z-index
width height
background
font text
others
*/

/*
link visited hover active
*/

/* ---------------------------------------------------------------- */

html
{
margin:0;border:0;padding:0;
background-color:rgba(242,242,242,1);
}

body
{
margin:0;border:0;padding:0;
}

/* ---------------------------------------------------------------- */

div.CommandBar
{
margin:0;border:0;padding:0;
position:fixed;z-index:1;
width:100%;height:4vh;
background-color:rgba(242,242,242,1);
}

a.Command
{
margin:0;border:0;padding:0;
position:fixed;z-index:2;
width:10%;height:4vh;
background-color:rgba(242,242,242,0);
color:rgba(26,26,26,1);font-family:'Noto Sans';font-size:2vh;line-height:4vh;text-align:center;text-decoration:none;
display:block;overflow:hidden;
}

a.Command:hover 
{
background-color:rgba(26,26,26,1);
color:rgba(242,242,242,1);
}

a.Twi
{
margin:0;border:0;padding:0 ;
position:fixed;right:0;z-index:2;
width:4vh;height:4vh;
background-image:url(Twi0.png);background-position:center;background-size:cover;
display:block;
}

a.Twi:hover 
{
background-image:url(Twi1.png);
}

div.Language
{
margin:0;border:0;padding:0 1vh 0 0;
position:fixed;z-index:2;top:0;right:0;
height:4vh;
background-color:rgba(242,242,242,0);
color:rgba(26,26,26,1);font-family:'Noto Sans';font-size:2vh;line-height:4vh;text-align:right;
}

div.Language a:link{color:rgba(26,26,26,1);}
div.Language a:visited{color:rgba(26,26,26,1);}
div.Language a:hover{color:rgba(26,26,26,1);}
div.Language a:active{color:rgba(26,26,26,1);}

/* ---------------------------------------------------------------- */

div.Space0
{
margin:0;border:0;padding:0;
width:100%;height:8vh;
}

div.Space1
{
margin:0;border:0;padding:0;
width:100%;height:4vh;
}

div.Space2
{
margin:0;border:0;padding:0;
width:100%;height:2vh;
}

div.Text0
{
margin:0;border:0;padding:0;
position:relative;left:10%;
width:80%;height:8vh;
background-color:rgba(26,26,26,0);
color:rgba(26,26,26,1);font-family:'Noto Sans',"Noto Sans Japanese";font-size:8vh;line-height:8vh;text-align:center;
}

div.Text1
{
margin:0;border:0;padding:0;
width:100%;/*height:4vh;*/
color:rgba(26,26,26,1);font-family:'Noto Sans',"Noto Sans Japanese";font-size:4vh;line-height:4vh;text-align:center;
}

div.Text2
{
margin:0;border:0;padding:0;
width:100%;
color:rgba(26,26,26,1);font-family:'Noto Sans',"Noto Sans Japanese";font-size:2vh;line-height:3vh;text-align:center;
}

div.Header
{
margin:0;border:0;padding:0;
width:100%;height:84vh;
background-image:url(Gray500.png);background-position:center;background-size:contain;background-repeat: no-repeat;
}

div.Footer
{
margin:0;border:0;padding:16vh 0 16vh 0 ;
width:100%;
background-color:rgba(26,26,26,1);
color:rgba(242,242,242,1);font-family:'Noto Sans',"Noto Sans Japanese";font-size:2vh;line-height:3vh;text-align:center;
}

/* ---------------------------------------------------------------- */

a.Button
{

margin:0;border:0.25vh solid rgba(26,26,26,1);padding:0;
position:relative;left:40%;
width:calc( 20% - 0.5vh );height:6vh;
background-color:rgba(242,242,242,1);
color:rgba(26,26,26,1);font-family:'Noto Sans';font-size:2vh;line-height:6vh;text-align:center;text-decoration: none;
display:block;
}

a.Button:link {color:rgba(26,26,26,1);background-color:rgba(242,242,242,1);}
a.Button:visited {color:rgba(26,26,26,1);background-color:rgba(242,242,242,1);}
a.Button:hover {color:rgba(242,242,242,1);background-color:rgba(26,26,26,1);}
a.Button:active {color:rgba(242,242,242,1);background-color:rgba(26,26,26,1);}

/* ---------------------------------------------------------------- */

div.Image
{
margin:0;border:0;padding:0;
position:relative;left:30%;
width:40%;
}

div.Image img
{
margin:0;border:0;padding:0;
width:100%;
vertical-align:bottom;
}

/* ---------------------------------------------------------------- */

.jp{display:block;}

.en{display:none;}

/* ---------------------------------------------------------------- */

@media screen and (orientation:portrait) 
{
div.Language{padding:0 2vh 0 0;height:8vh;font-size:4vh;line-height:8vh;text-align:right;}
a.Twi{width:8vh;height:8vh;}
div.CommandBar{display:none;}
a.Command{display:none;}
div.Text0{left:0%;width:100%;}
a.Button{left:10%;width:calc( 80% - 0.5vh );}
div.Image{left:0%;width:100%;}
div.ImageSmall{left:10%;width:80%;}
}

/* ---------------------------------------------------------------- */
