@charset "UTF-8";
/* 
エコ建築考房 デモサイト
style.css
*/

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
html, body{
	font-family: "Arial", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-feature-settings : "palt" 1;
	letter-spacing: 0;
	line-break:strict;/* normalは句読点のみ*/
  
}
div{
  padding: 0;
  margin: 0;
}
body {
	color: #000;
	line-height: 1;
	margin: 0;
	padding: 0;
	font-size: 15px;
	background: #ffffff;
	overflow-x: hidden;
}
a{
	color: #000;
	text-decoration: none;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	cursor: pointer;
}
a:hover{
	text-decoration:none;
	opacity:0.7;
}
*[onClick]{
	cursor: pointer;
}
h1, h2, h3, h4, h5, h6, p, ul, li, table{
	margin: 0;
	padding: 0;
	font-size: inherit;
}
h1, h2, h3, h4, h5, h6{
	line-height: 1.6;
	font-weight: 900;
}
h2{
}
h3{
}
h4{
}
p {
	line-height: 1.8;
}
ul{
	text-align: left;
}
li{
	list-style: none;
}

.forPC{
	display: block;
}
.forSP{
	display: none;
}

@media screen and (max-width:767px) {

	body{
		font-size: 14px;
	}
	p{
		line-height: 2;
	}

	.forPC{
		display: none;
	}
	.forSP{
		display: block;
	}

}

img{
  display: block;
  border: none;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.container{
	position: relative;
	max-width: 1366px;
	margin: 0 auto;
	overflow-x:hidden;
}
.main{
	position: relative;
}
body.sp .container{
	max-width:375px;
}

.w1920content{
  margin: 0 auto;
}
/*
.w1920content > img{
  width:160%;
  max-width: none;
  margin:0 -30%;
}
*/
.header_space{
	opacity:0;
}
body.top_pc .header_space{
	display: none;
}
.header{
	position: fixed;
	top:0;bottom:0;
	transition:0.3s ease-out;
}
body.top_pc .header{
	transform:translateY(-100%);
	transition:0.3s ease-out;
}
body.top_pc.in_header .header{
	transform:translateY(0%);
}

.floating{
	position: fixed;
	bottom:0;	
}
body.pc .floating{
	right:0;	
} 
body.sp .floating{
	width:390px;
}
.menu_info{
	position: fixed;
	bottom:0;
	pointer-events: none;
	width: 390px;	
	overflow:hidden;
}
.menu_info img{
	opacity: 0;
	transform:translateX(20%);
	transition:0.3s ease-out;
}

body.open_menu_info .menu_info{
	pointer-events:all;
}
body.open_menu_info .menu_info img{
	opacity:1;
	transform:translateX(0);
}

body.sp .menu_info{
}
body.pc .menu_info{
	right: 0;
}

.menu_global{
	position: fixed;
	top:0;
	opacity: 0;
	pointer-events: none;
	transform:translateY(-5%);
	transition:0.3s ease-out;
}
body.open_menu_global .menu_global{
	opacity: 1;
	pointer-events:all;
	transform:translateY(0);
}
body.sp .menu_global{
	width:390px;
	overflow-y: scroll;
	bottom: 0;
}
body.pc .menu_global{
	background: #fff;
	left:0;right:0;
	box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
body.pc .menu_global img{
	width: 1240px;
	max-width:100%;
}

@media screen and (max-width:414px) {
	body.sp .menu_info{
		width:100%;
	}
	body.sp .menu_global{
		width:100%;
		max-width:414px;
	}
	body.sp .container{
		max-width:414px;
	}
	body.sp img{
		width: 100%;
		max-width: 414px;
	}
}

.overlay{
  background: rgba(236,236,236,0.95);
  position: fixed;
  z-index: 1;
  left:0;
  top:0;
  bottom:0;
  right:0;
  overflow-y: scroll;
  backdrop-filter: blur(30px);
 -webkit-backdrop-filter: blur(30px);
}
body.sp .overlay{
  max-width: 375px;
  margin: auto;
}

.video_box{
  position: relative;
  overflow: hidden;max-width: 414px;margin: 0 auto;
}
.video{
  position: absolute;
  left:-2000px;bottom:1%;right:-2000px;top:auto;
  margin: 0 auto;
  height: 80.4%;
  width:auto;
}
.video_frame{
  position: relative;
}

.memo{
	position:fixed;
	left:10px;
	bottom:0;
	background:#fff;
	padding:10px 15px;
	font-size:14px;
	border-radius:10px 10px 0 0;
	box-shadow: 0 0 4px rgba(0,0,0,0.3);
}