/*@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:Avenir,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a{
	color:#FFF;
}
a:focus{
	outline:none !important;
}
/* Content style */
section {
	max-width:1200px;
	height:auto;
	padding:0;
	margin: 0 auto;
	color: #ecf0f1;
	line-height:140%;
	font-size:100%;
}


#video{
	z-index:100000;
	max-width:1020px;
	padding:5% 30px 0 30px;
	margin:0 auto 0 auto;
}

#video video{
margin:100px 0 0 0 ;
}
#video-container {
  z-index:100000;
  position: relative;
  padding-top: 56.25%;
  padding-bottom:20px;
  height: 0;
  overflow: hidden;
  margin:0 auto;
  color:#999;
}
#video-container iframe {
  position: absolute;
  top:0%;
  left:0;
  width:100%;
  height:100%;
}
h1.top{
	display:block;
	z-index:100001;
	position:absolute;
	width:100%;
	top:5%;
	left:0;
}
h1.top img{
	width:30%;
	height:auto;
}

p.autor{
	display:block;
	z-index:1000001;
	width:100%;
	bottom:10%;
	right:0;
	text-align:right;
	font-size:50%;
	color:#999;
	position:absolute;
}
p.autor a{
	color:#999;
	text-decoration:none;
}

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

/* 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 {
	background:;
	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:20px 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:24px 0 0 0;
	padding:0 0 0 0;
	overflow:hidden;
	height:42px;
	float:left;
}





/*.ha-header nav.sub img{
	zoom:0.5;
	-moz-transform:scale(0.5,0.5);
	height:auto;
}*/

.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 #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{
	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-weight:bold;
	font-size:120%;
	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: 1100px;
	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 center;
	padding:0 0 0 18px;
	margin:10px 0 0 0;
}

/*イベント*/
#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;
}

.event-text{
	background:rgba(0,0,0,0.5);
	padding:50px;
	margin:0 0 50px 0;
	overflow:hidden;
	position:relative;
	font-size:95%;
	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;
}

.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: 900px;
	/*background:#222;#5F4B3E*/
	padding:100px 0 0 0;
	z-index: 1;
	color: #FFF;
	background-image:url(../images/about-bg.jpg);
	background-size:100% auto;
	background-repeat:none;
	color: #ffffff;
	position:relative;
}

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

#contents-other #aboutus-text{
	max-width:1024px;
	margin:0 auto;
	position:relative;
	z-index:100;
}

#aboutus-text h3{
	display:table-cell;
	background:#000;
	vertical-align: middle;
	width:350px;
	padding:0 20px;
	font-size:14px;
	text-align:center;
}

#aboutus-text h3 span{
	display:block;
	text-align:left;
	border-top:1px solid #888;
	padding:10px 0 0 0;
	margin:10px 0 0 0;
}
#aboutus-text p{
	display:table-cell;
}

#aboutus-text h4{
	margin:50px 0 10px 0;
}
#aboutus-text div{
	display:table-cell;
	font-size:90%;
	vertical-align:top;
	color:#DDD;
}
#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;
}

@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{
	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:contain;
}

#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;
}



/*テクノロジー*/
#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-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;
}
#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) {

#video{
	z-index:100000;
	max-width:90%;
	padding:10% 0 0 0;
	margin:0 auto 0 auto;
}


#video-container {
  z-index:100000;
  position: relative;
  padding-top: 0%;
  height: auto;
  overflow: hidden;
  margin:0 auto;
  color:#999;
  width:100%;
}
#video-container iframe {
  position: relative;
  top:0%;
  left:0;
  width:100%;
  height:100%;
}
h1.top{
	display:block;
	z-index:100001;
	position:relative;
	width:100%;
	top:0%;
	left:0;
}
h1.top img{
	width:70%;
	height:auto;
}

p.autor{
	display:block;
	z-index:1000001;
	width:100%;
	bottom:0;
	right:0;
	text-align:right;
	font-size:50%;
	color:#999;
	position:relative;
}
p.autor a{
	color:#999;
	text-decoration:none;
}


.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 5% 50px 5% !important;
}

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

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

#concept h2{
	position:absolute;
	top:35px;
	right:25%;
}

#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 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;
}

/*イベント*/
#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%;
  }
}