@charset "UTF-8";

body {
	background-color: #EEE;
	/*text-align: center;*/
}
li{
	padding-bottom:20px;
}
div#wrapper {
	width: 960px;
	background-color: #FFF;
	margin: 10px auto;
	border-radius: 5px;
	border: solid 1px #666;
	box-shadow: 0px 0px 10px #666;
}

/*
.header{
    margin: 10px 10px 5px 5px;
    text-align: center;
}
*/

div#wrapper div#header {
	padding: 10px 30px;
	/*background-color: #45B035;*/
	/*background-color: #2BA6CF;*/
	background-color: #f7b000;
	/*color:#d0121b;*/
	border-radius: 5px 5px 0px 0px;
    margin:0 0 25px 0;
}



div#wrapper div#container {
	padding: 0px 20px 0px 20px;
}
div#wrapper div#footer {
	width: 940px;
	border-top: solid 1px #CCC;
	clear: both;
	padding: 10px 0px;
	margin: 0px auto;
	text-align: center;
	font-size: 12px;
}

div.companylogo {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    layout-grid-line:200px;    
}
img#companylogo {
	width:250px;
	left:50%;
    vertical-align:middle;
}

div.worldmap {
	color: #000000;
	background-size:cover;
	width: 100%;
	height: 0;
	padding-top: calc(350 / 500 * 100%); 
	background: url(../map.png) center center / cover no-repeat;
	position: relative;
}

div.selectarea {
	position: absolute;
	top: 20px;
}

a.area{
	background-color:white;
}
div.largestyle{
    /*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
    font-family: 'Meiryo';
	font-size:16px;
	line-height: 1.428571429;
	padding-bottom:10px;
}
div.smallstyle{
	font-size:14px;
	line-height:15px;
	padding-bottom:8px;
}

.logo{
/*width:100%;*/
padding-top:0px;
padding-bottom:5px;
padding-left:15px;
padding-right:5px;
text-align: left;    
}
.logo img{
   width:100%;
   max-width: 140px;
}

ul{
    padding: 0px 0px 0px 25px ;
}
li{
    padding: 0px 0px 10px 0px ;
}

#lang{
    margin: -15px 0 0 15px ;
}
#lang p{
    margin: 20px 0 -25px 3px ;    
}


/**********************
RESPONSIVE
***********************/
@media only screen and (min-width: 650px) {
    h1{        
        font-size:35px;
        text-align: center;
    }    
}
@media only screen and (max-width: 650px) {
    h1{        
        font-size:30px;
        text-align: center;
    }    
}
@media only screen and (max-width: 560px) {
    h1{        
        font-size:25px;
        text-align: center;
    }    
}
@media only screen and (max-width: 500px) {
    h1{        
        font-size:20px;
        text-align: center;
    }    
}
@media only screen and (max-width: 390px) {
    h1{        
        font-size:18px;
        text-align: center;
    }    
}
@media only screen and (max-width: 300px) {
    h1{        
        font-size:13px;
        text-align: center;
    }    
}

@media only screen and (max-width: 320px) {
    .header img{
        width:290px;
    }

}

@media only screen and (min-width: 415px) {
    .br-sp{
        display: none;
    }
    .br-sp_s{
        display: none;
    }
    .br-sp_l{
        display: none;
    }
}

@media only screen and (max-width: 320px) {
    .br-sp_l{
        display: none;
    }
}

@media only screen and (min-width: 321px)and (max-width: 414px) {
    .br-sp_s{
        display: none;
    }
}

.button {
    color: #0f5132;
    background-color: #d1e7dd;
    border: 1px solid transparent;
    border-color: #0f5132;
    border-radius: 5px;
    margin: 0 50px 20px 0 ;
    padding: 10px 10px 10px 10px;
    }

.button a{
    text-decoration: none;
    color: #0d6efd;
    background-color: #d1e7dd;
    /*font-size: 18px;
    font-weight: bold;*/
}

.area{
    margin: 0 0 0 15px;
    
}