/*==================================================
ギャラリーのためのcss
===================================*/

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

* {
    margin: 0px;
    padding: 0px;
}


.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:20px 10px 20px 0;
	font-size: 12px;
}
	
.sort-btn li{
	list-style:none;
	border-radius:10px;
	cursor: pointer;
	padding: 5px;
	margin:0 5px;
	}	
}

@media only screen and (max-width: 1000px) {
.header{
	width: 100%;/*横並びで3つ表示*/
	height: 30px;
	padding-bottom: 35px;
	padding-top: 35px;
	margin: 0 auto 0 auto;
	text-align : center;
	background-color: #FFFFFF;
	position: fixed;
	top: 0;
	color: black;
	font-family: "HelveticaNeueLTPro-Lt";
	}
@media only screen and (max-width: 1000px) {
.nav{
	padding-right: 15px;
	padding-left: 15px;
	font-size: 50px;
	color: black;
	text-decoration: none;
	font-family: "HelveticaLTPro-Bold";
	}
@media only screen and (max-width: 1000px) {
.header a:hover{
opacity: .4;
-webkit-opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);	/* IE lt 8 */
-ms-filter: "alpha(opacity=40)";} /* IE 8 */
	
a {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}

/*＝＝＝メイン部分*/
.logo{
	width: 70%;
	height: auto;
	margin: 0 auto 0 auto;
	}


.logo img {
  width: 100%;/*横並びで3つ表示*/
height: auto;
	padding-top: 100px;
	padding-bottom: 100px;
list-style:none;
	}}

	
@media only screen and (max-width: 1000px) {
.concept{
	width: 90%;
	height: auto;
	margin: 0 auto 0 auto;
	padding-bottom: 50px;
	text-align : center;
	color: black;
	font-size: 17px;
	line-height:300%;
	}
	
.content{
	width:90%;
	height: auto;
	margin: 0 auto 0 auto;
	color: black;
	clear: both;
	}

.content3{
	width:90%;
	height: 150px;
	margin: 0 auto 0 auto;
	color: black;
	clear: both;
	}

.content3 img{
	height: 100px;
	}
	
	
.content2{
	width: 90%;
	height: auto;
	margin: 0 auto 0 auto;
	color: black;
	line-height:150%;
	padding-bottom:300px;
	}	
	
.profile_l{
	width: 100%;
	height: auto;
	font-size: 150%;
	line-height:150%;
	font-family: "HelveticaNeueLTPro-Lt";
	clear: both;
	}

.profile_r{
	width: 100%;
	height: auto;
	font-size: 150%;
	line-height:150%;
	font-family: "TsukuGoPr5-R-HelveticaNowTextLight";
	
	}

.profile{
	width: 100%;
	height: auto;
	color: black;
	font-size: 30px;
	line-height:150%;
	font-family: "TsukuGoPr5-R-HelveticaNowTextLight";
	}
	
.project_1{
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	color: black;
	font-family: "TsukuGoPr5-R-HelveticaNowTextLight";
	}
	
.project_l{
	width: auto;
	height: auto;
	line-height:150%;
	font-size: 200%;
	font-family: "TsukuGoPr5-R-HelveticaNowTextLight";
	}
 
.project_r{
	width: auto;
	height: auto;
	line-height:150%;
	font-size: 200%;
	font-family: "TsukuGoPr5-R-HelveticaNowTextLight";
	}

.project_l2{
	width: 100%;
	height: auto;
	float:left; 
	line-height:150%;
	font-size: 150%;
	margin-bottom:100px;
	font-family: "TsukuGoPr5-R-HelveticaNowTextLight";
	}
}	

hr.single{
	width: 90%;
	border:7px black solid;
	text-align: center;
	margin: 50px auto 20px auto;
	clear: both;
	}

hr.triple{
	width: 90%;
	border: 1px black solid;
	text-align: center;
	margin: 5px auto 5px auto;
	}

hr.single2{
	width: 100%;
	border: 1px black solid;
	text-align: center;
	margin: 25px auto 25px auto;
	}

@media only screen and (max-width: 1000px) {	
p.head{
	width: 90%;
	text-align: left;
	margin: 5px auto 5px auto;
	color: black;
	font-size: 70px;
	font-weight: normal;
	padding-bottom: 70px;
	padding-top: 20px;
	font-family: "HelveticaLTPro-Bold";
	}
	
p.head2{
	width: 90%;
	text-align: left;
	color: black;
	font-size: 40px;
	padding-bottom: 15px;
	font-weight: normal;
	}

p.head3{
	width: 90%;
	text-align: left;
	color: black;
	font-size: 70px;
	padding-top: 30px;
	padding-bottom: 20px;
	font-family: "HelveticaLTPro-Bold";
	}
p.head4{
	width: 90%;
	text-align: left;
	color: black;
	font-size: 40px;
	padding-top: 30px;
	padding-bottom: 15px;
	font-family: "HelveticaLTPro-Bold";
	}

p.eigo { 
	width: 90%;
	text-align: left;
	color: black;
	font-size: 40px;
	padding-bottom: 40px;
	font-family: "HelveticaLTPro-Bold";
	}	

.line{
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	padding-top: 100px;
	}
	

.footer{
	width: 100%;
	height: 170px;
	margin: 100px auto 0 auto;
	clear: both;
	}
	
.menucont{
	width: 90%;
	height: auto;
	padding-top:25px;
	margin: 0 auto 0 auto;
	color: black;
	}
	
.menuleft{
	width: 50%;
	height: auto;
	text-align: left;
	padding-top:25px;
	clear: both;
	}
	
	.menuleft img{
	width: 19%;
	}

	
.menuright{
	width: auto;
	height: 50px;
	text-align: right;
	padding-top:10px;
	float: right;
	clear: both;
	}

.menucenter{
	width: 30%;
	height: auto;
	display: inline-block;
	text-align: center;
	}


.menucenter imga:hover{
opacity: .4;
-webkit-opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);	/* IE lt 8 */
-ms-filter: "alpha(opacity=40)";} /* IE 8 */
	
a img{
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
}