@charset "UTF-8";

/*************************************
 header
*************************************/
header{
	background:#000;
	padding:10px;
}

/*************************************
 footer
**************************************/
.copy{
	background:#191919;
	color:#fff;
	padding:10px;
	text-align:center;
	font-size:0.8em;
}

/*****************************************
 contents
*****************************************/
.wrap {
	background: #eee;
}
.container{
	width:1000px;
	margin:0 auto;
	padding:40px 0;
}

#map-container canvas {
	border-width: 0 !important;
	max-width: 1000px;
	width: 100%;
}

.content-position {
	position: absolute;
	width: 100%;
	height: auto; /*jQueryでcontainerの高さを取得してここにも反映*/
	max-width: 1000px; /* .containerと同じ幅に */
	top: 85px; /*header + .container padding分*/
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none; /*後ろの地図部分がクリックできるように*/
}
.content-position p a {
	pointer-events: auto; /*ボタン部分だけクリックできるように*/
}

.top_logo{
	position:absolute;
	top: 0;
    left: 0;
	right:50%;
}
.form1{
	position:absolute;
	top: 50%;
    left: 70%;
	right:2%;
}
.small_btn{
	display:none;
}
.form2{
	position:absolute;
	bottom: 23%;
    left: 16%;
	right:53%;
}

.form3{
	position:absolute;
	right: 16%;
    bottom: 14%;
	left:58%;
}
@media only screen and (min-width:751px) and (max-width:960px){
.wrap {
	min-height:800px;
}
.container{
	width:100%;
}
#map-container canvas{
	width:100% !important;
}
.container p img{
	max-width:100%;
	height:auto;
}
.top_logo{
    left: 2%;
	right:48%;
}
}

@media only screen and (min-width:640px) and (max-width:750px){
.wrap {
	min-height:800px;
}
header .logo{
	line-height:0;
}
header .logo img{
	width:40%;
	height:auto;
}
.container{
	width:100%;
	padding:20px 0;
}
#map-container canvas{
	width:100% !important;
}
.content-position{
	top:60px;
}
.container p img{
	max-width:100%;
	height:auto;
}
.top_logo{
    left: 2%;
	right:48%;
}
.form3{
    bottom: 16%;
}
}
@media only screen and (min-width:481px) and (max-width:639px){
.wrap {
	min-height:600px;
}
header .logo{
	line-height:0;
}
header .logo img{
	width:60%;
	height:auto;
}
.container{
	width:100%;
	padding:20px 0;
}
#map-container canvas{
	width:100% !important;
}
.content-position{
	top:50px;
}
.container p img{
	max-width:100%;
	height:auto;
}
.top_logo{
    left: 2%;
	right:48%;
}
.full_btn{
	display:none;
}
.small_btn{
	display:block;
}
.form1sp{
	position:absolute;
	top: 50%;
    left: 34%;
	right:38%;
}
.form3{
    bottom: 13%;
	right: 16%;
	left:58%;
}
}
@media only screen and (max-width:480px){
.wrap {
	min-height:600px;
}
header .logo{
	line-height:0;
}
header .logo img{
	width:60%;
	height:auto;
}
.container{
	width:100%;
	padding:20px 0;
}
#map-container canvas{
	width:100% !important;
}
.content-position{
	top:60px;
}
.container p img{
	max-width:100%;
	height:auto;
}
.top_logo{
    left: 2%;
	right:48%;
}
.full_btn{
	display:none;
}
.small_btn{
	display:block;
}
.form1sp{
	position:absolute;
	top: 42%;
    left: 23%;
	right:38%;
}
.form2{
	bottom: 26%;
	left:4%;
}
.form3{
    bottom: 10%;
	right: 4%;
	left:56%;
}




}