@charset "utf-8";

/*--------------------------------------------------------------------
main
--------------------------------------------------------------------*/
#content{
	width:100%;
	min-width:1024px;
}
#content img{
	width: 100%;
	height:auto;
}

#main{
	position:relative;
	width: 100%;
	margin:0 auto;
	overflow: hidden;
}
#main .visual{
	position:relative;
	width: 100%;
	margin:0 auto;
}
#main .visual .visual_s{
	position: absolute;
	top:0;
	left:0;
	z-index: 0;
}
#main .visual .mesh{
	display: none;
}
#main .visual .title{
	display: block;
	position: absolute;
	top:0;
	left:50%;
	width:1024px;
	margin:0 0 0 -512px;
	z-index: 2;
}
#main .visual .scroll_btn{
	position: absolute;
	width:120px;
	left:50%;
	margin:0 0 0 -60px;
	bottom:30px;
	z-index: 2;
}
#main .visual .scroll_btn a p{
	text-align: center;
	font-size:13px;
	letter-spacing: 1px;
	color:#fff;
	font-weight: bold;
	line-height: 1;
	
}
#main .visual .scroll_btn span.arr{
	display: inline-block;
	width:58.3%;
	margin-left:20.85%;
}
#main .visual .scroll_btn a:hover p{
	color:#ffe700;
}
/*--------------------------------------------------------------------
works
--------------------------------------------------------------------*/
#works{
	position: relative;
	width:100%;
}
#works ul{
	margin:5px 4px;
}
#works ul li{
	float:left;
	width:24.25%;
	margin:0 0 0 1%;
}
#works ul li:first-child{
	margin-left:0;
}
#works ul li a{
	display: block;
	box-sizing: border-box;
	background-color: #fff;
	padding:4px;
	border: 1px solid #6e6e6e;
	transition: background-color 0.5s,border 0.5s;
}
#works ul li a:hover{
	background-color: #ffe600;
	border: 1px solid #ffe600;
	transition: background-color 0.5s,border 0.5s;
}
#works ul li a .img{
	width:100%;
	height:100%;
	overflow: hidden;
}
#works ul li a img{
	vertical-align: bottom;
}

/*--------------------------------------------------------------------
movie
--------------------------------------------------------------------*/
#movie{
	position: relative;
	width:100%;
	height:auto;
	padding:34px 0 40px;
	background: #e6e6e6;
}
#movie .title{
	width:640px;
	margin:0 auto;
	line-height: 1;
	font-size:32px;
	font-weight: bold;
	text-align: center;
}
#movie .btn{
	width:640px;
	background: #333;
	margin:26px auto 0;
}


/*--------------------------------------------------------------------
sec
--------------------------------------------------------------------*/
.sec{
	position: relative;
	width:820px;
	margin:0 auto;
}
/*--------------------------------------------------------------------
article1
--------------------------------------------------------------------*/
#article1{
	padding:24px 0 40px;
	line-height: 2;
	font-size: 18px;
}
#article1 .title{
	font-weight: bold;
	font-size:30px;
	letter-spacing: 1px;
	text-align: left;
	line-height: 1.7;
	margin-left:-5px;
}
#article1 .txt1{
	margin-top:18px;
}
#article1 .box2{
	margin-top:36px;
}
#article1 .box2 .img{
	float:left;
	width:420px;
	margin-left:-102px;
}
#article1 .box2 .txt{
	float:right;
	padding-top:46px;
	width:462px;
}
body#portfolio2 #article1 .box2 .txt{
	padding-top:0;
}
body#portfolio2 #article1 .box2 .img{
	margin-top:20px;
}
body#portfolio3 #article1 .box2 .img{
	margin-top:20px;
}
body#portfolio4 #article1 .box2 .txt{
	padding-top:0;
}
body#portfolio5 #article1 .box2 .txt{
	padding-top:0;
}
body#portfolio5 #article1 .box2 .img{
	margin-top:20px;
}
#article1 .box3{
	margin-top:58px;
}
#article1 .box3 .img{
	float:right;
	width:420px;
	margin-right:-102px;
}
#article1 .box3 .txt{
	float:left;
	padding-top:0px;
	width:470px;
}
body#portfolio1 #article1 .box3 .img{
	margin-top:20px;
}
body#portfolio2 #article1 .box3 .txt{
	padding-top:22px;
}
body#portfolio3 #article1 .box3 .txt{
	padding-top:0;
}
body#portfolio4 #article1 .box3 .txt{
	padding-top:0;
}
body#portfolio5 #article1 .box3 .txt{
	padding-top:0;
}
body#portfolio5 #article1 .box3 .img{
	margin-top:15px;
}


#article1 .txt4{
	margin-top:58px;
}
#article1 .credit{
	margin-top:14px;
	text-align:right;
	font-size: 16px;
}
#article1 .profile{
	width:830px;
	margin:36px -63px 0;
	border: 1px solid #7d7d7d;
	padding:30px 52px 24px 62px;
}
#article1 .profile .btn a{
	cursor: default;
}
#article1 .profile .img{
	float:left;
	width:148px;
}
#article1 .profile .p_right{
	float:left;
	margin-left:34px;
	width:648px;
}
#article1 .profile .p_right .tit{
	font-weight: bold;
	font-size: 22px;
	line-height: 1;
}
#article1 .profile .p_right .txt{
	margin-top:10px;
	font-size:16px;
	line-height: 1.7;
}


/*--------------------------------------------------------------------
f_navi
--------------------------------------------------------------------*/
#f_navi ul {
	width:720px;
	margin: 10px auto 0;
}
#f_navi li {
	float:left;
	width:180px;
	height:152px;
	margin-left:0px;
	margin-bottom:0;
}
#f_navi li:first-child {
	margin-left:0px;
}
#f_navi li a {
	display: block;
	padding-top:10px;
	width:180px;
	height:142px;
	background-color: #fff;
	transition: background-color 1s;	
}
#f_navi li a:hover {
	background-color: #ffe600;
	transition: background-color 1s;	
}
#f_navi li .img{
	overflow: hidden;
	width:160px;
	height:107px;
	margin:0 auto;
}
#f_navi li .txt{
	width:160px;
	margin:3px 0 0 10px;
	padding-left:5px;
	letter-spacing: 1px;
	text-align: center;
	background:  url('../../img/page_list_arr_pc.png') no-repeat left 6px;
}
#f_navi li.link1 .txt{
	width:160px;
	padding-left:5px;
	letter-spacing: -0.5px;
}
#f_navi li.link2 .txt,
#f_navi li.link3 .txt{
	width:160px;
	padding-left:5px;
	letter-spacing: 0px;
}
#f_navi li .txt span{
	font-size:14px;
	line-height: 1;
}


/*--------------------------------------------------------------------
banner
--------------------------------------------------------------------*/
#banner ul {
	width:944px;
	margin: 40px auto 48px;
}
#banner li {
	float:left;
	width:468px;
	margin-left:8px;
	background-color: #000;
}
#banner li.bnr1 {
	margin-left:0px;
}
#banner li.bnr3 {
	margin-left:238px;
	margin-bottom:10px;
	clear: both;
}

/*--------------------------------------------------------------------
pop
--------------------------------------------------------------------*/
#mv_pop{
	position:fixed;
	width:100%;
	height:100%;
	min-height:100%;
	top: 0px;
    left: 0px;
	z-index:997;
	display:none;
}
#mv_pop #mv_popBox{
	width:90%;
	height:552px;
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 50%;
    left: 50%;
    margin-top: -276px;
    margin-left: -45%;	
	display:none;
}
#mv_pop #YouTube2{
	position: relative;
	height: 0;
	overflow: hidden;
}
#mv_pop #YouTube2 iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#mv_pop .m_popTitle{
	position: absolute;
	top:10px;
	left:0;
	height:52px;
	line-height: 1;
	font-size:28px;
	color:#fff;
	font-weight: bold;
	
}
#mv_pop .close_wrap{
	height:52px;
}
#mv_pop .close{
	float:right;
	margin:0 0 0 0;
	width:52px;
}
#mv_pop .bg {
	width:100%;
	height:100%;
	min-height:100%;
	background:#000;
	filter: Alpha(Opacity=90);
	opacity: 0.9;
}


/*--------------------------------------------------------------------
pop
--------------------------------------------------------------------*/
#works_pop{
	position:fixed;
	width:100%;
	height:100%;
	min-height:100%;
	top: 0px;
    left: 0px;
	z-index:997;
	display:none;
}
#works_pop #works_popBox{
	width:870px;
	height:580px;
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 50%;
    left: 50%;
    margin-top: -330px;
    margin-left: -435px;
	display:none;
}
#works_pop .img{
	width:870px;
	height:580px;
	margin:0 auto;
}
#works_pop .credit_txt{
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	line-height: 1.7;
	font-size:14px;
	color:#fff;
	margin: 10px 0 0 0;
	
}
#works_pop .next0,
#works_pop .next1{
	width:55px;
	position: absolute;
	top:50%;
}
#works_pop .next0{
	left:-54px;
}
#works_pop .next1{
	right:-54px;
}
#works_pop .next0 a{
	display: block;
	width:55px;
	text-align: left;
	padding:0;
}
#works_pop .next1 a{
	display: block;
	width:55px;
	text-align: right;
	padding:0;
}
#works_pop .next0 a img{
	margin-left:0;
	width:28px;
	height:auto;
}
#works_pop .next1 a img{
	margin-right:0;
	width:28px;
	height:auto;
}
#works_pop .close_wrap{
	height:52px;
}
#works_pop .close{
	float:right;
	margin:0 0 0 0;
	width:52px;
}
#works_pop .bg {
	width:100%;
	height:100%;
	min-height:100%;
	background:#000;
	filter: Alpha(Opacity=90);
	opacity: 0.9;
}


@media screen and (max-width: 768px) {
	/*--------------------------------------------------------------------
	main
	--------------------------------------------------------------------*/
	#content{
		width:100%;
		min-width:100%;
	}
	#content img{
		width: 100%;
		height:auto;
	}

	#main{
		position:relative;
		width: 100%;
		margin:0 auto;
		overflow: hidden;
	}
	#main .visual{
		position:relative;
		width: 100%;
		margin:0 auto;
	}
	#main .visual .visual_s{
		position: absolute;
		top:0;
		left:0;
		z-index: 0;
	}
	#main .visual .mesh{
		position: absolute;
		width:100%;
		z-index: 1;
	}
	#main .visual .title{
		position: absolute;
		top:0;
		left:0%;
		width:100%;
		margin:0;
		z-index: 2;
	}
	#main .visual .scroll_btn{
		position: absolute;
		width:22.5%;
		left:38.75%;
		margin:0;
		bottom:3%;
		z-index: 2;
	}
	#main .visual .scroll_btn p{
		text-align: center;
		font-size:12px;
		letter-spacing: 1px;
		color:#fff;
		font-weight: bold;
		line-height: 1;
	}
	#main .visual .scroll_btn span.arr{
		display: inline-block;
		width:83.33%;
		margin-left:8.335%;
	}


	/*--------------------------------------------------------------------
	works
	--------------------------------------------------------------------*/
	#works{
		position: relative;
		width:100%;
	}
	#works ul{
		margin:1% 1% 8%;
	}
	#works ul li{
		float:left;
		width:49.5%;
		margin:0 0 1% 1%;
	}
	#works ul li:nth-child(2n+1){
		margin-left:0;
	}
	#works ul li a{
		display: block;
		box-sizing: border-box;
		padding:4px;
		border: 1px solid #6e6e6e;
		transition: none;
	}
	#works ul li a:hover{
		background-color: #fff;
		border: 1px solid #6e6e6e;
		transition:none;
	}

	#works ul li a img{
		vertical-align: bottom;
	}

	/*--------------------------------------------------------------------
	movie
	--------------------------------------------------------------------*/
	#movie{
		position: relative;
		width:100%;
		height:auto;
		padding:5% 0 4%;
		background: #e6e6e6;
	}
	#movie .title{
		width:93.75%;
		margin:0 auto;
		font-size:18px;
		font-weight: bold;
		line-height: 1;
		text-align: center;
	}
	#movie .btn{
		width:93.75%;
		background: #333;
		margin:4% auto 0;
	}

	/*--------------------------------------------------------------------
	sec
	--------------------------------------------------------------------*/
	.sec{
		position: relative;
		width:93.75%;
		margin:0 auto;
	}
	/*--------------------------------------------------------------------
	article1
	--------------------------------------------------------------------*/
	#article1{
		padding:6% 0 4%;
		line-height: 2;
		font-size: 17px;
	}
	#article1 .title{
		font-weight: bold;
		font-size:20px;
		letter-spacing: 1px;
		text-align: center;
		margin-left:0;
		line-height: 1.7;
	}
	#article1 .txt1{
		margin-top:5%;
	}
	#article1 .box2{
		margin-top:5%;
	}
	#article1 .box2 .img{
		float:none;
		width:100%;
		margin-left:0;
	}
	#article1 .box2 .txt{
		float:none;
		padding-top:5%;
		width:100%;
	}
	body#portfolio2 #article1 .box2 .txt{
		padding-top:5%;
	}
	body#portfolio2 #article1 .box2 .img{
		margin-top:0px;
	}
	body#portfolio3 #article1 .box2 .img{
		margin-top:0px;
	}
	body#portfolio4 #article1 .box2 .txt{
		padding-top:5%;
	}
	body#portfolio5 #article1 .box2 .txt{
		padding-top:5%;
	}
	body#portfolio5 #article1 .box2 .img{
		margin-top:0px;
	}
	#article1 .box3{
		margin-top:5%;
	}
	#article1 .box3 .img{
		float:none;
		width:100%;
		margin-right:0;
	}
	#article1 .box3 .txt{
		float:none;
		padding-top:5%;
		width:100%;
	}
	body#portfolio1 #article1 .box3 .img{
		margin-top:0px;
	}
	body#portfolio2 #article1 .box3 .txt{
		padding-top:5%;
	}
	body#portfolio3 #article1 .box3 .txt{
		padding-top:5%;
	}
	body#portfolio4 #article1 .box3 .txt{
		padding-top:5%;
	}
	body#portfolio5 #article1 .box3 .txt{
		padding-top:5%;
	}
	body#portfolio5 #article1 .box3 .img{
		margin-top:0px;
	}

	#article1 .txt4{
		margin-top:8%;
	}
	#article1 .credit{
		margin-top:3%;
		text-align:right;
		font-size: 14px;
	}
	#article1 .profile{
		width:92%;
		margin:5% auto 0;
		border: 1px solid #7d7d7d;
		padding:4%;
	}
	#article1 .profile .btn a{
		display: block;
		width:100%;
		cursor: pointer;
	}
	#article1 .profile .img{
		float:left;
		width:26.8%;
	}
	#article1 .profile .btn .tit{
		float:left;
		font-weight: bold;
		font-size: 24px;
		line-height: 1;
		letter-spacing: 1px;
		padding:9% 0 0 7%;
	}
	#article1 .profile .btn a span.arr{
		float:right;
		width:52px;
		height:52px;
		background: url('../img/pull_open.png') no-repeat 0% center;
		background-size: auto 100%;
		margin-right:5%;
		margin-top:10%;
	}
	#article1 .profile .btn a.open span.arr{
		background: url('../img/pull_open.png') no-repeat 100% center;
		background-size: auto 100%;
	}
	#article1 .profile .p_right{
		float:none;
		margin-left:0;
		width:100%;
	}
	#article1 .profile .p_right .txt{
		margin-top:5%;
		font-size:16px;
		line-height: 2;
	}


	/*--------------------------------------------------------------------
		banner
		--------------------------------------------------------------------*/
	#banner ul {
		width:93.75%;
		margin: 4% auto 10%;
	}
	#banner li {
		float:none;
		width:100%;
		margin-left:0px;
		margin-top:4%;
		background-color:#fff ;
	}
	#banner li.bnr1 {
		margin-left:0px;
	}
	#banner li.bnr3 {
		margin-left:0;
		margin-bottom:0;
		clear: both;
	}

	

	/*--------------------------------------------------------------------
		pop
		--------------------------------------------------------------------*/
	#works_pop{
		position:fixed;
		width:100%;
		height:100%;
		min-height:100%;
		top: 0px;
		left: 0px;
		z-index:997;
	}
	#works_pop #works_popBox{
		width:870px;
		height:580px;
		position: fixed;
		_position: absolute; /* IE6対策 */
		top: 50%;
		left: 50%;
		margin-top: -330px;
		margin-left: -435px;	
	}
	#works_pop .img{
		width:870px;
		height:580px;
		margin:0 auto;
	}
	#works_pop .credit_txt{
		line-height: 1.7;
		font-size:13px;
		color:#fff;
		margin: 10px 0 0 0;

	}
	#works_pop .next0,
	#works_pop .next1{
		width:12%;
		position: absolute;
		padding:0;
		top:43%;
	}
	#works_pop .next0{
		left:-10%;
	}
	#works_pop .next1{
		right:-10%;
	}
	#works_pop .next0 a{
		display: block;
		width:100%;
		padding:0;
		text-align: left;
	}
	#works_pop .next1 a{
		display: block;
		width:100%;
		padding:0;
		text-align: right;
	}
	#works_pop .next0 a img{
		margin-left:10%;
		width:100%;
		height:auto;
	}
	#works_pop .next1 a img{
		margin-right:10%;
		width:100%;
		height:auto;
	}
	#works_pop .next0 a img,
	#works_pop .next1 a img{
		width:50%;
		height:auto;
	}
	#works_pop .close_wrap{
		height:26px;
	}
	#works_pop .close{
		float:right;
		margin:0 0 0 0;
		width:26px;
	}
	#works_pop .bg {
		width:100%;
		height:100%;
		min-height:100%;
		background:#000;
		filter: Alpha(Opacity=90);
		opacity: 0.9;
	}
	/*--------------------------------------------------------------------
	pop
	--------------------------------------------------------------------*/
	#mv_pop{
		position:fixed;
		width:100%;
		height:100%;
		min-height:100%;
		top: 0px;
		left: 0px;
		z-index:997;
		display:none;
	}
	#mv_pop #mv_popBox{
		width:320px;
		height:240px;
		position: fixed;
		_position: absolute; /* IE6対策 */
		top: 50%;
		left: 50%;
		margin-top: -120px;
		margin-left: -160px;	
		display:none;
	}
	#mv_pop .m_popTitle{
		position: absolute;
		top:3px;
		left:0;
		height:26px;
		line-height: 1;
		font-size:14px;
		color:#fff;
		font-weight: bold;

	}
	#mv_pop .close_wrap{
		height:26px;
	}
	#mv_pop .close{
		float:right;
		margin:0 0 0 0;
		width:26px;
	}
	#mv_pop .bg {
		width:100%;
		height:100%;
		min-height:100%;
		background:#000;
		filter: Alpha(Opacity=90);
		opacity: 0.9;
	}

}

@media only screen and (max-width: 768px) and (orientation:landscape) {
		#main .visual .title{
			width:80%;
			left:10%;
		}
		#main .visual .scroll_btn{
			width:21.1%;
			left:39.45%;
		}
		#main .visual .scroll_btn span.arr{
			display: inline-block;
			width:50%;
			margin-left:25%;
		}
}