/*@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

html{
		background:#000 !important;
}
body {
	background: #000;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:1em;
}
a{
	color:#FFF;
}
a:focus{
	outline:none !important;
}
/* Content style */
section {
	max-width:1200px;
	height:auto;
	padding:0;
	margin: 0 auto;
	color: #ecf0f1;
	font-size: 0.9em;
	line-height: 1.8em;
	font-family:Avenir;
}

strong.top-button{
	display:block;
	max-width:200px;
	margin:20px auto;
	text-align:center;
}
strong.top-button img{
	width:100%;
	height:auto;
}

ul#top-menu li img{
width: auto;
height: 47px;
}
/* Header styles and animations */


.container{
	opacity:0;
}

.ha-header {/*メインヘッダー*/
	position: fixed;
	top: 550px;
	left: 0;
	width: 100%;
	padding: 0;
	z-index: 10;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.ha-header-perspective {
	max-width: 1200px;
	margin:0 auto;
	position: relative;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective:  1200px;
	-webkit-perspective-origin: 50% 0;
	-moz-perspective-origin: 50% 0;
	perspective-origin: 50% 0;
	z-index:1;
}

.ha-header-perspective > div {
	text-align: left;
	/*height: 50%;*/
	width: 100%;
	margin: 0 auto;
	position: relative;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	overflow: hidden;
}

.ha-header-front {
	z-index: 2;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	background:rgba(0,0,0,0.7);
	padding:25px 0 0 0;
}

.ha-header-perspective .ha-header-bottom {
	background: rgba(0,0,0,0.8);
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	z-index: 100;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transition: top 0.5s;
	-moz-transition: top 0.5s;
	transition: top 0.5s;
	position: absolute;
	top: 0;
	height:65px;
	max-width:1200px;
}

.ha-header-rotateBack {/*サブメニューを戻して小さく表示*/
	top: 600px;
	filter: alpha(opacity=100);
 	-moz-opacity:1;
  	opacity:1;
}

.ha-header-bottom #logo{
	float:left;
	margin:15px 30px 0 50px;
	max-width:126px;
	height:auto;
}

.ha-header-bottom #logo img{
	width:100%;
	height:auto;
}
.ha-header-bottom img{
	max-width:100%;
	height:auto;
}

/* Justify inline-block elements (h1 on left side, nav on right) 
.ha-header-perspective > div::after {
    content: '';
    display: inline-block;
    width: 100%;
}*/

/* Text styling */
.ha-header h1,
.ha-header h1::before,
.ha-header h1 span,
.ha-header nav,
.ha-header nav::before {
	vertical-align: middle;
	text-align: left;
}

.ha-header h1 {
	margin: 0 0 0 50px;
	cursor: default;
	height: 100%;
	z-index: 1;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}


.ha-header nav {
	height:80px;
	margin:40px 0 0 40px;
	overflow:hidden;
	float:left;
}
.ha-header nav.sub{
	margin:21px 0 0 0;
	padding:0 0 0 0;
	overflow:hidden;
	height:43px;
	float:left;
}

.ha-header nav.sub img{
width: auto;
height: 34px;
}

.ha-header nav li{
	float:left;
	border-right:1px solid #333;
	display:block;
}
.ha-header nav a {
    padding: 0 20px 0 20px;
    margin: 0;
    cursor: pointer;

}

.ha-header nav li:last-child {
	border-right:none;
}
.ha-header nav a:hover,.ha-header nav.sub a.hover {
	border-bottom:3px solid #a0871f;/*FF0*/
	padding:0 20px 0 20px;
	
}

.ha-header nav.sub li{
	border-right:1px solid #444;
	margin:0;
	padding:0;
}

.ha-header nav a:last-child {
    margin-right: 0;
}

.ha-header .ha-header-front nav a:first-child,
.ha-header .ha-header-front nav a:last-child {
	/*border: 2px solid #e74c3c;*/
}

.ha-header .ha-header-front nav a:first-child:hover,
.ha-header .ha-header-front nav a:last-child:hover {
	/*border: 2px solid #bc3c2f;*/
}




/* Individual states */

.ha-header-large {
	height:190px;
	
}

.ha-header-small {
	height: 80px;
}

.ha-header-hide {
	height: 220px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}

.ha-header-show {
	height: 220px;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}

.ha-header-show .ha-header-bottom {
	opacity: 0;
	-webkit-transition: top 0.5s, opacity 0s 0.5s;
	-moz-transition: top 0.5s, opacity 0s 0.5s;
	transition: top 0.5s, opacity 0s 0.5s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	top: 0%;
}

.ha-header-subshow {
	height: 220px;
}

.ha-header-subshow .ha-header-bottom {
	-webkit-transition: top 0.5s;
	-moz-transition: top 0.5s;
	transition: top 0.5s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	top: 50%;
}

.ha-header-shrink {
	height: 220px;
	top: 50px;
	padding-left: 50px;
	padding-right: 50px;
}

.ha-header-shrink .ha-header-bottom {
	opacity: 0;
}

.ha-header-rotate {/*サブメニューを回転*/
	max-height: 80px;
	top: 0;
}

.ha-header-rotate .ha-header-front {
	-webkit-transition: -webkit-transform 0.9s;
	-moz-transition: -moz-transform 0.9s;
	transition: transform 0.9s;
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	transform: rotateX(90deg);
	filter: alpha(opacity=0);
 	 -moz-opacity:0;
  	opacity:0;
	z-index:1;
}

.ha-header-rotate .ha-header-bottom {
	top: 65px;
	-webkit-transition: -webkit-transform 0.9s;
	-moz-transition: -moz-transform 0.9s;
	transition: transform 0.9s;
	-webkit-transform: rotateX(0deg) translateY(-100%);
	-moz-transform: rotateX(0deg) translateY(-100%);
	transform: rotateX(0deg) translateY(-100%);
}



.ha-header-rotateBack .ha-header-front {
	-webkit-transition: -webkit-transform 0.9s;
	-moz-transition: -moz-transform 0.9s;
	transition: transform 0.9s;
	-webkit-transform: translateY(0%) rotateX(0deg);
	-moz-transform: translateY(0%) rotateX(0deg);
	transform: translateY(0%) rotateX(0deg);
	margin-top:-50px;/*HOME写真を-50px抑えてる*/

}

.ha-header-rotateBack .ha-header-bottom {
	top: 50%;
	-webkit-transition: -webkit-transform 0.0s;
	-moz-transition: -moz-transform 0.0s;
	transition: transform 0.0s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	filter: alpha(opacity=0);
 	 -moz-opacity:0;
  	opacity:0;
}


/*テキストボックス関連*/
section#concept img,section#material img,section#technology img,section#about-us img,#coordinate h2 img,#works h2 img{
	max-width:100%;
	height:auto;
}

#contents-other{
	padding:0 0 200px 0;
	position:relative;
}

/*#contents-other > section,*/#contents-other #concept,#contents-other #HOME,#contents-other #material,#contents-other #technology,#contents-other #about-us,#contents-other #event {
	max-width: 1200px;
	background: no-repeat center 0 fixed;
	margin: 0 auto;
	position: relative;
	background-size: 1200px auto;
}

#contents-other .mobile {
	display:none;
}

#contents-other #HOME {
	height: 1000px;
/*	background-image: url(../../images/home-bg.png);*/
	z-index: 1;
	color: #ffffff;
	margin-top:-50px;/*HOME写真を-50px抑えてる*/
}
#HOME img{
	max-width:100%;
	height:auto;
}

/*コンセプト*/
#contents-other #concept{
	height: 800px;
	padding:150px 0 0 0;
	background-image:url(../images/concept-bg.jpg);
	z-index:1;
	color: #ffffff;
}

#concept h2{
	position:absolute;
	top:100px;
	right:70px;
}
#concept-text{
	max-width:1024px;
	margin:0 auto;
	z-index:10;
	position:relative;
}

#concept-text li span{
	background:rgba(0,0,0,0.5);
	padding:40px 60px;
	display:block;
	max-width:382px;
	margin:50px auto 0 auto;
	box-sizing:content-box;
}

/*マテリアル*/
#contents-other #material {
	padding:160px 0;
	background-image: url(../images/material-bg.jpg);
	z-index: 1;
	overflow:hidden;
}
#material h2{
	position:absolute;
	top:100px;
	right:70px;
}

#material-text h3{
	font-size:140%;
	margin:10px 0;
}

#material-text{
	max-width:38.75%;
	margin:5.5% 8% 0 7%;
	z-index:100;
	position:relative;
	color:#000;
	float:left;
}
#material-text.margin0{
	margin:5.5% 0 0 0;
}

#material-text span{
	display:block;
}
#material-text p{
	display:block;
}
#material-text img{
	width:100%;
	height:auto;
}

/*テクノロジー*/
#contents-other #technology {
	height: 1400px;
	padding:100px 0 0 0;
	background-image:url(../images/technology-bg.jpg);
	z-index: 4;
	color: #ffffff;
	position:relative;
}

#technology h2{
	text-align:right;
	margin:0 50px 50px 0;
}

#technology-text{
	max-width:1024px;
	margin:0 auto 100px auto;
	z-index:10;
	position:relative;
	box-sizing:content-box;
	overflow:hidden;
}


#technology-text span{
	float:left;
	max-width:40.4296875%;
	padding:0 1.953125%;
	box-sizing:content-box;
	display:block;
}
#technology-text p{
	display:block;
	float:left;
	padding:0 1.953125%;
	vertical-align:middle;
	box-sizing:content-box;
	max-width:51.7578125%;
}

#technology-text strong{
	font-size:120%;
	margin:0 0 10px 0;
	display:block;
}

#technology-text a.link{
	display:block;
	background: url(../images/link-icon.png) no-repeat left 7px;
	padding:0 0 0 18px;
	margin:10px 0 0 0;
}

/*空間コーディネート*/
#contents-other #coordinate{
	padding:100px 0 50px 0;
	background-image:url(../images/coordinate-bg.jpg);
	background-size: 100% auto;
	z-index: 4;
	color: #ffffff;
	position:relative;
}
#coordinate h2{
	text-align:right;
	margin:0 50px 50px 0;
}
#coordinate-box{
	max-width:950px;
	margin:0 auto;
	z-index:5;
	overflow: hidden;
}
#coordinate-box p{
line-height: 0;
margin-bottom: 5.3%;
}
.works-margin01{
line-height: 0;
margin-bottom: 10.6%;
}
#coordinate-box img{
width: 100%;
height: auto;
line-height: 0;
}
#coordinate-box img.scrEvent3{
margin-top: 0 !important;
}
.coordinate-left{
float: left;
width: 47.368%;
}
.coordinate-right{
float: right;
width: 47.368%;
}
.coordinate-margin01{
line-height: 0;
margin-bottom: 10.6%;
}
#coordinate-box p.coordinate-text{
width: 57%;
margin: 0 auto 10%;
clear: both;
line-height: 180%;
}

/*施工事例*/
#contents-other #works{
	padding:100px 0 50px 0;
	background-image:url(../images/works-bg.jpg);
	background-size:100% auto;
	background-repeat:repeat-y;
	z-index: 4;
	color: #ffffff;
	position:relative;
}
#works h2{
	text-align:right;
	margin:0 50px 50px 0;
}
#works-box{
	max-width:950px;
	margin:0 auto;
	z-index:5;
	overflow: hidden;
}
#works-box p{
line-height: 0;
margin-bottom: 5.3%;
}
.works-margin01{
line-height: 0;
margin-bottom: 10.6%;
}
#works-box img{
width: 100%;
height: auto;
line-height: 0;
}
#works-box img.scrEvent3{
margin-top: 0 !important;
}
.works-left{
float: left;
width: 47.368%;
}
.works-right{
float: right;
width: 47.368%;
}
/*タブの中身を初期非表示に*/
.ChangeElem_Panel {
  display: none;
}
/*タブを横並べに*/
.ChangeElem_Btn_Content {
  overflow: hidden;
  margin-bottom: 5%;
  font-family: 'Quicksand', sans-serif;
}
/*通常時のタブ装飾*/
.ChangeElem_Btn:before{
content:'▶︎';
font-size:0.6rem;
vertical-align: text-top;
margin-right: 5px;
}
.ChangeElem_Btn {
  border: none;
  background-color:rgba(255,255,255,0.5);
  color: #FFF;
  cursor: pointer;
  display: inline-block;
  font-size: 1.2rem;
  padding-bottom: 15px;
  padding-top: 15px;
  position: relative;
  transition: all .3s ease-in-out;
  vertical-align: middle;
  width: 20%;
  text-align: center;
  margin-right: 3%;
}
/*カレントとホバー時のタブ装飾*/
.ChangeElem_Btn:hover,
.ChangeElem_Btn.is-active {
  background: rgba(160,135,31,0.5);
  box-sizing: border-box;
  color: #FFF;
}
.ChangeElem_Btn.is-active:before{
content:'▼';
}

/*イベント*/
#contents-other #event{
	padding:100px 0 50px 0;
	background-image:url(../images/event-bg.jpg);
	background-size:100% auto;
	background-repeat:none;
	z-index: 4;
	color: #ffffff;
	position:relative;
}

#event h2{
	text-align:right;
	margin:0 50px 50px 0;
}

#event-box{
	max-width:950px;
	margin:0 auto;
	z-index:5;
}
#event-box h3{
	font-size:130%;
	margin:0 0 15px 0;
	padding:0 0 5px 0;
	line-height:200%;
	border-bottom: 1px solid #FFF;
}

.event-text{
	background:rgba(0,0,0,0.9);
	padding:50px;
	margin:0 0 50px 0;
	overflow:hidden;
	position:relative;
	z-index:5;
}

.event-text span{
	width:20%;
	margin:0 5% 0 0;
	display:block;
	float:left;
}

.event-text span img{
	width:100%;
	height:auto;
}
.event-text div{
	width:75%;
	float:left;
}
div.event-indent01{
	float:none;
	width:95%;
	margin:20px 0;
	padding:2.5% 2.5%;
	border:1px solid #FFF;
}
div.event-indent02{
	float:none;
	width:100%;
	margin:20px 0 40px 0;
	padding:2.5% 0;
	border-top:3px solid #FFF;
	border-bottom:3px solid #FFF;
}

.icon-box01,.icon-box02,.icon-box03{
	width:auto !important;
	text-align:center;
	vertical-align:middle;
	float:none;
	position:absolute;
	top:30px;
	left:30px;
	border-radius:50%;
	font-size:70%;
	line-height:120%;
}
.icon-box01{
	padding:1.5% 1%;
	background:#333;
}

.icon-box02{
	padding:2% 0.8%;
	background:#C90;
}

.icon-box03{
	padding:1%;
	background:#096;
}

#calender-btn{
	background:rgba(0,192,149,0.5);
	padding:20px;
	z-index:100;
	text-align:center;
	position:relative;
	margin:0 0 50px 0;
}




/*CLOTHについて*/
#contents-other #about-us {
	height: 550px;
	/*background:#222;#5F4B3E*/
	padding:100px 0 0 0;
	z-index: 1;
	color: #FFFFFF;
	background-image:url(../images/about-bg.jpg);
	background-size:100% auto;
	background-repeat:none;
	position:relative;
}

#about-us h2{
	text-align:right;
	margin:0 50px 50px 0;
}

#contents-other #aboutus-text{
	max-width:950px;
	margin:0 auto;
	position:relative;
	z-index:100;
}
#aboutus-text div{
	display:table-cell;
	font-size:90%;
	vertical-align:top;
	color:#DDD;
}
#aboutus-address{
	display:table !important;
	width:100%;
	background:rgba(0,0,0,0.70);
}
#aboutus-text h3{
	display:table-cell;
	vertical-align: middle;
	width:31%;
	padding:15px 0 0 40px;
	font-size:14px;
	text-align:center;
}

#aboutus-text h3 span{
	display:block;
	border-top:1px solid #555;
	padding:25px 0 0 0;
	margin:20px 0 0 0;
}
#aboutus-text p{
	display:table-cell;
	text-align:right;
}
#aboutus-text p img{
	width:100%;
}

#aboutus-text h4{
	margin:50px 0 10px 0;
	display:block;
}

#aboutus-text div td{
	padding:0 5px 10px 0;
}

.company{
	padding:0 100px 0 0;
}

#aboutus-text div a{
	background:url(../images/link-icon.png) no-repeat left center;
	padding:0 0 0 15px;
	margin:0 0 0 10px;
	display:inline-block;
}



#contents-other .inner {
	width: 800px;
	margin: 0 auto;
}

#copy{
	color:#FFF;
	font-family:Verdana, Geneva, sans-serif;
	text-align:center;
	margin:15px 0;
	font-size:11px;
	position:relative;
	z-index:10;
}

/*メールマガジンフォーム*/
#banner-box{
	float:right;
	margin:50px 30px 0 0;
}
.fb-like{
	margin:0 0 0 10px;
	padding:0 0 10px 0;
	vertical-align:middle;
}
#banner-box02{
	float:right;
	margin:18px 10px 0 10px;
	max-width:370px;
	height:auto;
}
#banner-box .magazine{
	padding:0 10px 0 0;
	margin:0 10px 0 0;
	border-right:1px solid #333;
	height:auto;
}
#banner-box02 .magazine{
	height:auto;
	margin:0 0 0 0;
	border-right:1px solid #444;
	padding:0 10px 0 0;
}
#banner-box02 img{
	vertical-align:middle;
	margin:0 10px 0 10px;
	height:auto;
}


#ml_form{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:12px;
	color:#3e5368;
	font-size:12px;
	width:100%;
	margin:0 auto;
}
#ml_form p{
	margin:20px 0;
}

input[type="text"]{
   background:#E9ECEF;
   border:2px solid #3e5368;
   -webkit-border-radius:0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   padding:8px;
   width:100%;
   }
input.delete_mail[type="text"]{
	background:#DDD;
	border:none;
	width:50%;
}
input[type="text"]:focus {
   background: #fff;
   }
   

input.submit{
	background:#0C9;
	padding:10px 20px;
	border-style: none;
	color:#FFF;
	moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 210px;
	cursor:pointer;
	display:block;
	margin:10px auto 30px auto;
	-webkit-appearance: none;/*スマホ用ボタンデフォルト解除*/

}
input.submit:hover{
	background:#0CC;
}
input.delete_mail[type="button"]{
	background:#999;
	padding:5px 10px;
	margin:0 0 0 10px;
	border-style: none;
	color:#FFF;
	moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 170px;
	cursor:pointer;
	text-align:center;
	font-size:12px;
	text-decoration:none;
	-webkit-appearance: none;/*スマホ用ボタンデフォルト解除*/
}

#banner-box a img,#banner-box02 a img{
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

#banner-box a:hover img,#banner-box02 a:hover img{

	opacity: 0.8;
	filter: alpha(opacity=80);
}


.mobile-btn {
	display:none;
}
#menu {
	display:none;
	}
#mobile-photo{
	display:none;
}
#pc-photo{
	display:block;
}
span#catch{
	float:right;
	height:41px;
	width:auto;
	margin:20px 30px 0 0;
}
span#catch img{
	height:100%;
}

p#catch{
	display:none;
}

.small-text{
	font-size:80%;
	line-height:150%;
	display:block;
	margin:10px 0 0 0;
}
h4{
	font-size:120%;
	margin:20px 0 5px 0;
}
h5{
	font-weight:normal;
	
}
h5 strong{
	font-weight:bold;
	text-indent:-10px;
	display:block;
	font-size:120%;
}
strong.bold{
	display:block;
	border-top:1px dotted #FFF;
	border-bottom:1px dotted #FFF;
	padding:5px 0;
	margin:10px 0;
}
strong.present{
	font-weight:bold;
	font-size:150%;
	display:block;
	color:#D1C387;
}
strong.present span{
	float:none;
	width:100%;
	font-size:60%;
}
p.margin01{
	margin:0 0 30px 0;
}


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


#contents-other > section {
	background: no-repeat 0 0 ;
	margin: 0 auto;
	position: relative;
	

}

#contents-other #HOME{
	height:100%;
}

#contents-other #concept{
	padding:10% 5%;
}

#concept h2,#material h2,#technology h2,#about-us h2,#event h2,#works h2,#coordinate h2{
	position:relative;
	text-align:center;
	z-index:20;
	margin:0 auto 20px auto;
	top:inherit;
	right:inherit;
}
#technology h2{
	margin:0 auto 50px auto;
}

#contents-other #material{
	padding:10% 5%;
}

#material .mobile img{
	height:1390px;
}

#contents-other #technology{
	padding:10% 5%;
	background:#000;
}


#contents-other #about-us{
	padding:11% 5%;
	height:100%;
}

#contents-other #concept,#contents-other #material,#contents-other #technology,#contents-other #about-us{
	background-image: none;
	height:100%;
}

.mobile{
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:0;
	display:block !important;
	z-index:1;
}

#concept .mobile{
	background:url(../images/concept-bg.jpg) no-repeat center top;
	height:1397px;
}

#material .mobile{
	background:url(../images/material-bg.jpg) no-repeat center top;
	height:1397px;
}
#technology .mobile{
	background:url(../images/technology-bg.jpg) repeat-y center top;
	height:1500px;
	background-size:cover;
}

#event .mobile{
	background:url(../images/event-bg.jpg) repeat-y center top;
	height:100%;
	background-size:cover;
}

#about-us .mobile{
	background:url(../images/about-bg.jpg) repeat-y center top;
	height:100%;
	background-size:cover;
}
.mobile img{
	max-width:100%;
	height:auto;
}

/*空間コーディネート*/
#contents-other #coordinate{
	padding:50px 0 50px 0;
}
#coordinate-box{
	max-width:auto;
	width: 91%;
}



/*施工事例*/
#contents-other #works{
	padding:50px 0 50px 0;
}
#works-box{
	max-width:auto;
	width: 91%;
}


/*テクノロジー*/
#technology-text span{
	width:40%;
}


}

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

.ha-header {/*メインヘッダー*/
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0;
	z-index: 10;
	-webkit-transform: none;
	-moz-transform:none;
	transform: none;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.ha-header-perspective {
	height:50px;
}



/*.ha-header-rotate .ha-header-front {
	-webkit-transition: -webkit-none;
	-moz-transition: -moz-none;
	transition: none;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	filter: alpha(opacity=0);
 	 -moz-opacity:0;
  	opacity:0;
	z-index:1;
}



.ha-header-rotateBack .ha-header-front {
	-webkit-transition: -webkit-none;
	-moz-transition: -moz-none;
	transition:none;
	-webkit-transform: translateY(0%) rotateX(0deg);
	-moz-transform: translateY(0%) rotateX(0deg);
	transform: translateY(0%) rotateX(0deg);

}

.ha-header-rotateBack .ha-header-bottom {
	top: 100px;
	-webkit-transition: -webkit-transform 0.0s;
	-moz-transition: -moz-transform 0.0s;
	transition: transform 0.0s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	filter: alpha(opacity=0);
 	 -moz-opacity:0;
  	opacity:0;
}*/

/*メールマガジンフォーム*/
#banner-box02{
	float:right;
	margin:25px 10px 0 10px;
	max-width:320px;
	height:auto;
}
#banner-box02 .magazine{
	height:auto;
	margin:0 0 0 0;
	border-right:1px solid #999;
	padding:0 10px 0 0;
}
#banner-box02 img{
	vertical-align:middle;
	margin:0 10px 0 10px;
	max-height:31px !important;
	width:auto;
}


/*CLOTHについて*/
#contents-other #about-us {
	background:#222;/*#5F4B3E*/
	padding:100px 0 0 0;
	z-index: 1;
	color: #FFF;
}

#contents-other #aboutus-text{
	max-width:609px;
}

#aboutus-address{
	width:100%;
}

#aboutus-text h3{
	display:block;
	width:100%;
	padding:10px;
	margin:40px 0 0 0;
	font-size:14px;
	text-align:center;
	box-sizing:border-box;
}

#aboutus-text h3 span{
	text-align:center;
	border-top:none;
	padding:10px 0 0 0;
	margin:10px 0 0 0;
}
#aboutus-text p{
	display:block;
	text-align:center;
}

#aboutus-text h4{
	margin:50px 0 10px 0;
}
#aboutus-text div{
	display:block;
	font-size:90%;
}
#aboutus-text div td{
	padding:0 5px 10px 0;
}

.company{
	padding:0 0 10px 0;
	margin:0 0 10px 0;
	border-bottom:1px solid #555;
}

}



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

#contents-other #HOME {
	max-height: 1000px;
}
#pc-photo{
	display:none;
}

#mobile-photo ul{
	overflow:hidden;
	height:100%;
}

#mobile-photo{
	padding:0px 0 0 0;	
	display:block;
	line-height:0;
	max-height:800px;
	z-index:10;
}


#menu{
	display:none;
}
.ha-header-bottom #logo{
	float:left;
	margin:10px 20px 0 10px;
}

.ha-header-bottom #logo img{
	width:auto;
	max-height:25px;
}
p#catch{
	float:left;
	max-width:200px;
	height:auto;
	margin:13px 0 0 0px;
	display:block;
}

.ha-header-perspective .ha-header-bottom{
	height:50px;
}
.ha-header-rotate .ha-header-bottom{
	top:50px;
}


.mobile-btn{/*モバイル用スイッチボタン*/
	padding: 0;
	margin:0 0 10px 0;
	cursor:pointer;
	display:block;
	position:fixed;
	top:0;
	right:0;
	z-index:1000;
	width:50px;
}
.mobile-btn img{
	width:50px;
}

#menu.togmenu{/*mobile-btnをクリックした際のulの表示*/
	display:block ;
	position:fixed;
	top:50px;
	left:0;
	z-index:1000;
	width:100%;
	background:rgba(0,0,0,0.9);
	padding:20px;
	
}
#menu a{
	color:#FFF;
	text-decoration:none;
}
#menu ul{
	overflow:hidden;
	max-width:100%;
	margin:0 auto;
}

#menu li{
	float:left;
	margin:0 10px 10px 0;
	padding:0 10px 0 0;
	border-right:1px solid #999;
}


#menu li:last-child {
	border-right:none;
	margin:0 0 10px 0;
}
.ha-header nav a:hover,.ha-header nav.sub a.hover {
	border-bottom:3px solid #FF0;
	padding:0 20px 0 20px;
}

.ha-header nav.sub ul#pc{
	display:none;
}

/*メールマガジン*/
#banner-box02{
	float:right;
	margin:10px 70px 0 20px;
	max-width:350px;
}
#banner-box03{
	float:right;
	margin:10px 0 0 0;
}
#banner-box .magazine{
	padding:8px 20px;
	background:rgba(0,0,0,0.5);
	height:auto;
	margin:0 0 5px 0;
}
#banner-box02 .magazine{
	height:auto;
	margin:0 0 5px 0;
	border-right:1px solid #999;
	padding:0 10px 0 0;
}
#banner-box03 .magazine{
	height:auto;
	margin:0 10px 0 0;
	border-right:1px solid #999;
	padding:0 10px 0 0;
}
#banner-box02 img{
	vertical-align:middle;
	margin:0 10px 10px 10px;
}


/*マテリアル*/
#material-text{
	font-size:90%;
}
#material-text h3{
	display:block;
	margin:0 0 5px 0;
	font-weight:bold;
}
#material-text p{
	display:block;
	max-width:100%;
	padding:0;
	vertical-align:auto;
	margin:0 0 20px 0;
}

/*テクノロジー*/

#technology-text{
	font-size:90%;
}
}

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

.ha-header-bottom #logo{
	float:left;
	margin:13px 10px 0 10px;
}

#contents-other{
	padding:0;
}


p#catch{
	width:165px;
	height:auto;
	margin:14px 0 0 0;
	display:block;
	float:left;
}

#menu.togmenu{
	padding:10px 0;
}
#menu ul{
	float:right;
	max-width:50%;
	margin:0;
	font-size:90%;
}

#menu li{
	float:none;
	margin:0 0 5px 0;
	padding:0 10px 5px 0;
	border-bottom:1px solid #999;
	border-right:none;
}


#menu li:last-child {
	border-right:none;
	border-bottom:none;
	margin:0;
}

/*メールマガジン*/

#banner-box03{
	float:left;
	margin:0;
	padding:0 0 0 10px;
	font-size:90%;
}

#banner-box03 .magazine{
	height:auto;
	display:block;
	margin:0 0 5px 0;
	border-bottom:1px solid #999;
	border-right:none;
	padding:0 0 5px 0;
}

#concept,#material,#technology,#about-us {
	padding:50px 10% !important;
}

#concept h2,#material h2,#technology h2,#about-us h2,#event h2,#coordinate h2{
width: 35%;
}
#works h2{
width: 25%;
}

/*コンセプト*/
#contents-other #concept{

	padding:150px 0 0 0;
}
#concept .mobile{
	background-size:cover;
	height:500px;
}

#concept h2{
	position:relative;
	margin: 0 auto;
}

#concept-text li span{
	padding:20px 20px;
}

#concept-text li span img{
	width:100%;
	height:auto;
}

/*マテリアル*/
#material .mobile{
	background-size:cover;
	height:2000px;
}
#material-text{
	max-width:950px;
	margin:0 auto;
	z-index:100;
	position:relative;
	color:#000;

}


/*テクノロジー*/
#technology-text{
	margin:0 auto 50px auto;
}


#technology-text span{
	display:block;
	float:none;
	max-width:100%;
	width:100%;
	padding:0 ;
	margin:0 0 10px 0;
}
#technology-text span img{
	width:100%;
	height:auto;
}
#technology-text p{
	display:block;
	max-width:100%;
	float:none;
	padding:0;
}

/*空間コーディネート*/
#coordinate-box{
width: 90%;
}

#coordinate-box p.coordinate-text{
width: 100%;
}
#coordinate-box p{
line-height: 0;
margin-bottom: 5.3%;
}
#coordinate-box img{
width: 100%;
height: auto;
line-height: 0;
}
.coordinate-margin01{
line-height: 0;
margin-bottom: 5.3%;
}
.coordinate-left{
float: none;
width: 100%;
}
.coordinate-right{
float: none;
width: 100%;
}

/*施工事例*/
#works-box p{
line-height: 0;
margin-bottom: 5.3%;
}
.works-margin01{
line-height: 0;
margin-bottom: 10.6%;
}
#works-box img{
width: 100%;
height: auto;
line-height: 0;
}
.works-margin01{
line-height: 0;
margin-bottom: 5.3%;
}
.works-left{
float: none;
width: 100%;
}
.works-right{
float: none;
width: 100%;
}

/*通常時のタブ装飾*/
.ChangeElem_Btn:before{
content:'▶︎';
font-size:0.4rem;
vertical-align:middle;
margin-right: 5px;
}
.ChangeElem_Btn {
  border: none;
  background-color:rgba(255,255,255,0.5);
  color: #FFF;
  cursor: pointer;
  display: inline-block;
  font-size: 0.8rem;
  padding-bottom: 5px;
  padding-top: 5px;
  width: 30%;
  margin-right: 3%;
}

/*イベント*/
#contents-other #event{
	padding:80px 0 20px 0;
}


#event-box h3{
	font-size:120%;
	margin:0 0 10px 0;
	padding:0 0 10px 0;
	border-bottom:1px solid #FFF;
}

.event-text{
	padding:25px 15px 15px 15px;
	font-size:90%;
}

.event-text span{
	width:30%;
	margin:0 auto 10px auto;
	display:block;
	float:none;
}

.event-text span img{
	width:100%;
	height:auto;
}
.event-text div{
	width:100%;
}

.icon-box01,.icon-box02,.icon-box03{
	width:auto !important;
	text-align:center;
	vertical-align:middle;
	float:none;
	position:absolute;
	top:10px;
	left:30%;
	border-radius:50%;
	font-size:70%;
	line-height:120%;
}
.icon-box01{
	padding:4.5% 3%;
	background:#333;
}

.icon-box02{
	padding:4% 1%;

	background:#C90;
}

.icon-box03{
	padding:2.5% 3%;
	background:#096;
}

/*CLOTHについて*/
#contents-other #aboutus-text{
	max-width:300px;
}

#aboutus-text p{
	width:100%;
}
#aboutus-text p img{
	width:100%;

}

}

/*googleカレンダー*/
.event-calender {
  max-width: 950px; /* 最大幅 */
  min-width: 300px; /* 最小幅 */
  margin: 2.0833% auto;
  position:relative;
}
 
.googlecal {
  position: relative;
  padding-bottom: 100%; /* 縦横比 */
  height: 0;
  overflow: hidden;
}
.googlecal iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

 
@media only screen and (min-width: 600px) {
  /* 画面幅が600px以上の場合の縦横比の指定 */
  .googlecal {
    padding-bottom: 75%;
  }
}