@charset "utf-8";
/* CSS Document */


*{margin: 0; padding: 0}
a { text-decoration : none}
ul, ol, li { 
list-style : none;
margin:0;
padding:0;}
img{ vertical-align : middle}

body{
	background:#000;
}
.wrapper, .container, #header, div#navi{
	width:auto;
	float:none;
	clear:both;
}
.wrapper{
	padding:20px;
	
}
.container{
	padding:150px 0 50px 0;
	
}
#header{
	margin-bottom:20px;
}

body#top #footer, body#contact #footer{
	position:absolute;
	bottom:10px;
	left:10px;
}
body#bio #footer, body#works #footer{
	width:auto;
	clear:both;
	margin:10px;
	padding:0;
}


body#top .ttl h1, body#contact .ttl h1{
	display:none;
}
body#bio .ttl h1, body#works .ttl h1{
		display:none;
}
.ttl img{
	display:block;
	width:20%;
	height:auto;
	position:absolute;
	top:20px;
	left:20px;
	margin:0;
	padding::0;
}
.copyright{
	color:#FFF;
	font-size:0.75em;
	font-family:Arial;
}


/*------------Contact---------------*/
div#contact{
	width:80%;
	text-align:center;
	float:right;
	padding-top:30px;
}

#contact dl{
	display:block;
	width:50%;
	height:auto;
	float:none;
	background:rgba(255,255,255,0.7);
	padding:100px 50px;
	text-align:center;
	margin:50px auto;
}

#contact dl>dt, #contact dl>dd a{
	
}
#contact dl>dt{
	color:#333;
	font-size:16px;
	padding-bottom:20px;
}
#contact dl>dd>a{
	color:#06C;
	font-size:18px;
	font-weight:bold;
}

.main{
	text-align:left;
	color:#FFF;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding-bottom:50px;
}





body#top{
	background: url(../images/top_taishomorita01.jpg) no-repeat fixed;
	background-size:cover;
}

body#bio{
	background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(../images/top_taishomorita02.jpg);
	background-size:cover;
}

body#works{
	background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(../images/top_taishomorita03.jpg);
	background-size:cover;
}
body#contact div.background-hack {
    z-index                 : -1;
    background-color        : #000;
    background-image        : linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),  url('../images/top_taishomorita04.jpg');
    background-repeat       : no-repeat;
    background-size         : cover;
    position                : fixed;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    bottom                  : 0;
}

#wrklist dt > a:hover img, #wrklist dt > a:active img{  
	filter:brightness(120%);
	-webkit-filter:brightness(120%);
} 



/*Nav*/
#navi {
    width: auto;   /* メニュー（ナビ）の幅を固定 */
	text-align:right;
	padding:0;
	margin:0;
	position:absolute;
	top:20px;
	right:20px;
}  
#navi ul{
	text-align:right;
	display: block !important;  /* メニュー（ナビゲーション）は必ず表示 */
	float:right;
}
#navi ul li {
    float:left;  /* 横並びに */
}
#navi ul li a {
	display:block;
	padding:0 0 0 20px;
	margin:0 5px;
	font-family:Impact, Arial;
	font-size:2em;
	color:#FFF;
	text-align:right;
	white-space: nowrap;
}
#navControl {
    display: none;  /* メニュー開閉ボタンは非表示に */
}


/*コンテンツ*/

div.main{
	width:auto;
	clear:both;
	margin: 0;
	padding:30px 0;

}


/*------------works---------------*/
#wrklist{
	margin:0;
	clear:both;
	float:none;
	width:auto;
}
#wrklist > dl{
	min-width:19%;
	display:block;
	margin:0 0 10px 0;
	padding:0 0 10px 0;
	
}
#wrklist > dl, #wrklist > dl > dt, #wrklist > dl > dd {
	float:left;
	padding-right:10px;
	height:125px;
}
#wrklist > dl > dt img {
	border:1px solid #fff;
	width:125px;
	height:auto;
}
#wrklist > dl > dd{
	border-bottom:1px solid #fff;
	min-width:165px;
	padding:auto 0;
}
#wrklist dd {
	color:#fff;
	white-space:nowrap;
	
}
#wrklist dd > dl {
	margin:75px 10px auto 5px;
}
dl.cap1 > dt{
	font-size:0.6em;
	font-family:Arial;
}

dl.cap1 > dd{
	font-size:0.8em;
}

/*------------works/詳細---------------*/
#workbox{
	float:right;
	margin:0;
	
	padding-bottom:50px;
	width:70%;
	text-align:center;

}
.imgarea{
	float:none;
	clear:both;
	margin:0 auto;
	padding:0;
	display:block;
	width:50%;

	text-align:center;

}
.prev, .next, .photo{
	float:left
}
.prev, .next{
	width:60px;	
}
.next{
	
}
.photo{
	padding:0;
	margin:0 auto;
}
.photo img{
	display:block;
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	border:1px solid #ccc;
}
div.capbox{
	float:none;
	clear:both;

}
div.capbox > dl > dt{
	font-size:1.2em;
	padding-top:10px;
}
div.capbox > dl > dd{
	font-size:0.8em;

}

/*------------Bio---------------*/
ul.bio{
	width:70%;
	float:right;
	text-align:left;
}

ul.bio li{
	
}
li.bio_name{
	font-size:1.5em;
}
li.bio_ttl{
	font-weight:bold;
	margin:20px 0 10px 0;
	padding-bottom:5px;
	border-bottom:1px solid #fff;
}



/* ---------- middle for tablet phone ---------- */
@media screen and (max-width:800px) { 
.container{
	padding:100px 0 50px 0;
	
}
.wrapper{
	padding:10px;
	
}
body#top div.background-hack {
    z-index                 : -1;
    background-color        : #000;
    background-image        : url('../images/top_taishomorita01_s.jpg');
    background-repeat       : no-repeat;
    background-size         : cover;
    position                : fixed;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    bottom                  : 0;
}

body#bio div.background-hack {
    z-index                 : -1;
    background-color        : #000;
    background-image        : url('../images/top_taishomorita02_s.jpg');
    background-repeat       : no-repeat;
    background-size         : cover;
    position                : fixed;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    bottom                  : 0;
}

body#works div.background-hack {
    z-index                 : -1;
    background-color        : #000;
    background-image        : url('../images/top_taishomorita03_s.jpg');
    background-repeat       : no-repeat;
    background-size         : cover;
    position                : fixed;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    bottom                  : 0;
}



.ttl img{
	width:30%;
	height:auto;
}
.ttl h1{
	display:none;
}

/*Nav*/
#navi, #navi ul{
	margin:0;
	padding:0;
}
#navi ul li{
	  float:none;
	  width:auto;
	  text-align:right;
	  margin:0;
	padding:0;
}

#navi ul li a {
	display:block;
	font-size:1.2em;
	padding:0 10px;
	margin: 0;
}

/*コンテンツ*/

div.main{
	padding:30px 0x;

}
/*------------works---------------*/

#wrklist > dl{
	min-width:340px;
	display:block;
	margin:0 0 10px 0;
	padding:0 0 10px 0;
	
}
#wrklist > dl, #wrklist > dl > dt, #wrklist > dl > dd {
	float:left;
	padding-right:10px;
	height:125px;
}
#wrklist > dl > dt img {
	border:1px solid #fff;
	width:125px;
	height:auto;
}
#wrklist > dl > dd{
	border-bottom:1px solid #fff;
	width:195px;
	padding:auto 0;
}
#wrklist dd {
	color:#fff;
	white-space:nowrap;
	
}
#wrklist dd > dl {
	margin:75px 10px auto 5px;
}
.cap1 > dl > dt{
	font-size:0.7em;

}

.cap1 > dl > dd{
	font-size:1em;

}

/*------------Bio---------------*/
ul.bio{
	width:100%;
	float:none;
	text-align:left;
	margin:20px 0;
	padding-top:10px;
}

}

/* ---------- small for smart phone ---------- */
@media screen and (max-width:480px) {
.container{
	padding:60px 0 50px 0;
	
}
.wrapper{
	padding:10px;
	
}
#navi {
	position:absolute;
	top:10px;
	right:10px;
}
#navi ul li{
	margin:0;
	padding:0;
}
body#top{
	background: url(../images/top_taishomorita01_s.jpg) no-repeat fixed;
	background-size: auto 100%;
}

body#bio{
	background: url(../images/top_taishomorita02_s.jpg) top center no-repeat fixed #333;
	background-size: auto 100%;
}

body#works{
	background: url(../images/top_taishomorita03.jpg)  top center no-repeat fixed #333;
	background-size: auto 100%;
}
body#contact{
	background: url(../images/top_taishomorita02_s.jpg) top center no-repeat fixed #333;
	background-size: auto 100%;
}

.ttl img{
	top:10px;
	left:10px;
	width:45%;
	height:auto;
}
.ttl h1{
	display:none;
}

/*コンテンツ*/

div.main{
	padding:30px 0;

}
/*------------works---------------*/


#wrklist > dl {
	float:none;
	padding:0;
	margin:0 0 10px 0;
	width:auto;

}
#wrklist > dl > dt {
	width:120px;
}
#wrklist > dl > dt img {
	border:1px solid #fff;
	width:120px; 
	height:auto;
	padding:0;
}
#wrklist > dl, #wrklist > dl > dt, #wrklist > dl > dd {
	float:left;
	padding-right:10px;
	height:125px;
}

#wrklist > dl > dd{
	border-bottom:1px solid #fff;
	width:auto;
	padding:auto 0;
}
#wrklist dd {
	color:#fff;
	white-space:nowrap;
	
}
#wrklist dd > dl {
	margin:40px 10px auto 5px;
}


/*------------works/詳細---------------*/
#workbox{
	float:none;
	margin:0;
	
	padding-bottom:50px;
	width:auto;
	text-align:center;

}
.imgarea{
	width:auto;
	text-align:center;
}

.prev, .next{
	width:40px;	
}


.photo img{
	width:70%;
	height:auto;
	margin:0 auto;

}




/*------------Bio---------------*/
ul.bio{
	width:auto;
	float:none;
	text-align:left;
	margin:10px 0;
	padding-top:5px;
}

ul.bio li{
	font-size:0.8em;
}

/*------------Contact---------------*/
div#contact{
	width:auto;
	text-align:center;
	float:none;
	padding-top:30px;
}

#contact dl{
	display:block;
	width:auto;
	height:auto;
	float:none;
	background:rbga(255,255,255,0.7);
	padding:40px 20px;
	text-align:center;
	margin:0 auto;
}



}