/* CSS Document */

#header{
justify-content: space-between;
}

#header .content{
max-width: 900px;
}

#header .takken{
position: relative;
line-height: 1;
font-size: 0.6875rem;
letter-spacing: 0.15em;
font-weight: 700;
text-align: center;
}

#header .takken a{
display: block;
background-color: #CEEFF7;
border-radius: 7px;
padding: 1em;
}

#header .takken a:link,
#header .takken a:visited{
color: #000;
}

#header .takken span{
display: inline-block;
margin-top: 0.3em;
line-height: 1;
font-size: 250%;
font-weight: 500;
text-align: center;
}

#header .contact nav{
margin-bottom: 0.5em;
}

#header .tel{
font-size: 200%;
}

#header .contact p:last-child{
font-size: 75%;
}

#content{
box-sizing:border-box;
width:100%;
max-width:1200px;
margin:0 auto;
padding:min(5%, 40px);
}


section h2{
color:#449ac2;
padding: 1%;
line-height: 1.6;
font-size: 225%;
font-weight: 500;
text-align: center;
}

section .content{
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
border-radius: 10px;
border:4px solid #eee;
width: 90%;
max-width: 750px;
margin: 5% auto;
padding: 5% 0;
}

section h3{
color:#445;
margin-bottom: 0.7em;
line-height: 1;
font-size: 175%;
text-align: center;
}

section .content #theme-my-login1{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

section .content .message{
box-sizing: border-box;
background-color: #f4f4f4;
border-radius: 5px;
width: 60%;
padding:1em 2em;
margin-bottom: 1em;
line-height: 1;
text-align: center;
}

section .content form{
width: 100%;
}

section .content table{
width: 60%;
margin: auto;
font-size: 125%;
}

section .content tr,
section .content th,
section .content td{
display: block;
}

section .content th{
padding-bottom: 0.3em;
}
section .content td{
padding: 0 0 0.8em 0;
}


section .content input[type=text],
section .content input[type=password]{
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: #cbd5e1;
border-radius: 5px;
width: 100%;
padding: 0.6em 0.6em;
line-height: 1.1;
font-size: 100%;
transition: all 0.3s ease-in-out;
}
section .content input[type=text]:focus,
section .content input[type=password]:focus{
outline: none;
border-color: #0086CE;
}

section .content input[type=submit]{
box-sizing: border-box;
background-color: #449ac2;
color: #fff;
border:none;
border-radius: 5px;
width: 100%;
margin-top: 0.5em;
padding: 0.6em 0.6em;
font-size: 100%;
text-align: center;
cursor: pointer;
transition: all 0.3s ease-in-out;
}

section .content input[type=submit]:hover{
background-color: #004f7b;
}


#footer{
padding: 0;
}

#footer .content{
display: flex;
justify-content: center;
align-items: center;
padding:2%;
}

#footer #sitemap,
#footer #sitemap-takken{
padding: 0;
margin: 0 2%;
}

#home #footer #sitemap h2, #footer #sitemap-takken h2{
margin: 0;
}

#footer #sitemap-takken h2 a{
display: flex;
align-items: center;
}

@media all and (max-width: 600px) {


#header .sitename a{
background-size: contain;
}

#header .login{
font-size: 3vw;
}


#header .content{
display: grid;
grid-template-columns: 45% 30% 25%;
grid-template-rows: 1fr;
}

#header .sitename{
grid-column: 1 / 2;
grid-row: 1 / 2;
width: auto;
padding-bottom: 11%;
margin-left:10px;
}

#header .sitename a{
height: 6vw;
}

#header .takken{
grid-column: 2 / 3;
width: auto;
margin:0 10px;
font-size: 0.4rem;
letter-spacing: 0;
line-height: 0;
}

#header .takken a{
padding: 2.5vw 0.2vw;
}

#header .takken br{
display: none;
}

#header .takken:first-line{
font-size: 0;
line-height: 0;
}

#header .takken span{
margin: 0;
line-height: 1;
}

#header .takken span{
font-size: 175%;
}

#header .takken a::after{
display: none;
}

#header .login{
grid-column: 3 / 4;
width: auto;
font-size: 2.6vw;
}

#header .login a{
background-size: auto 50%;
}

section h2{
font-size: 7vw;
}

section h3{
font-size: 5.5vw;
}

section .content table{
font-size: 4vw;
}

section .content{
width: 100%;
}

section .content table{
width: 80%;
min-width: initial;
}

#footer .content{
padding: 5% 2%;
}

#footer #sitemap, #footer #sitemap-takken{
width: 45%;
}

#footer #sitemap h2 a{
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
}

}