@charset "utf-8";
/**
 * index.css 
 * (c) BURNISH COMAPNY Ltd.
 */
 
    #stylingIndex {
		width:100%;
		}
		
@media only screen and (orientation : landscape) { /*横向きの際に適用*/
#main{ width: 980px;}
} 
 	#stylingIndex h1{
		border: none;
	}
	#Nav ul li.STYLING a{
		background-position: 0 100%;
	}

	#styling #stylingListWrapper{
		width: 700px;
		clear: both;
	}
	#styling #stylingListWrapper .touhyou{
		font-size:large;
		font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		text-align:left;
		padding:10px 10px 10px 10px;
	}
	@media screen and (max-width: 480px){
		#styling #stylingListWrapper{
		width: 100%;
		padding:0px 0px 0px 0px;
	}}
	
	#styling #stylingList{
		margin:0;
		padding:0;
		margin-left: -11px;
		overflow: hidden;
		zoom:1;
	}
	* html #styling #stylingList { /* for IE6 */
		margin-left: -22px;
	}
	#styling #stylingList:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
	#styling #stylingList .item{
		width: 206px;
		float: left;
		margin-left: 11px;
		margin-bottom: 20px;
		padding: 10px;
		background-color: rgba( 255, 255, 255, 0.55 );
 		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		behavior: url(../common/pie/PIE.htc);
 	}

	#styling #stylingList .item p{
	text-overflow: ellipsis;
	-webkit-text-overflow:ellipsis;
	-o-text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
 	}
	
    @media screen and (max-width: 480px){
		
	#styling #stylingList {
		padding-left:10px;}
	
	#styling #stylingList .item{
		width: 43%;
		height:auto;
		float: left;
		margin-left:10px;
		margin-right:-5px;
		margin-bottom:15px;
		padding: 5px;
		background-color: rgba( 255, 255, 255, 0.55 );
 		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		behavior: url(../common/pie/PIE.htc);
 	}
	
	
	#styling #stylingList .item img{
		width:100%
 	}


		}

	
	#styling #stylingList .item .date{
		font-size: 83%;
	}
	
	#styling #stylingList .item .label{
		float: right;
	}
	
/* detail */
	#detailArea{
		zoom:1;
		margin-bottom: 20px;
	}
	#detailArea:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }

	#detail #detailArea .left{
		float: left;
		width: 360px;
	}
	
	@media screen and (max-width: 480px){
		#detail #detailArea .left{
		width: 100%;
	}}

		

	
	#detail #detailArea .right{
		float: right;
		width: 320px;
		position: relative;
	}
	
		@media screen and (max-width: 480px){
	#detail #detailArea .right{
		width: 100%;
		position: relative;

	}}

	
	#detail #detailArea .itemDate{
		font-size: 83%;
		margin-bottom: 5px;
	}
	#detail #detailArea .detailAuthor{
		font-weight: bold;
		margin-bottom: 10px;
	}

	/* authorArea */
	#detail .authorArea{
		width: 298px;
		border: 1px solid #e0e0cd;
		padding: 10px;
		margin-top: 15px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		behavior: url(../common/pie/PIE.htc);
		background-color: rgba(255,255,255,0.5)
	}
	
	
	@media screen and (max-width: 480px){
	#detail .authorArea{
		width: 90%;
		border: 1px solid #e0e0cd;
		padding: 10px;
		margin-right:auto;
		margin-left:auto;
		margin-top: 15px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		behavior: url(../common/pie/PIE.htc);
	}}

	
	#detail .author{
		margin-bottom: 5px
	}
	#detail .comment{
		margin-bottom: 5px
	}
	#detail .linkArea{
		zoom:1;
	}
	#detail .linkArea:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
	#detail .linkArea li {
		float: left;
		margin-right: 20px;
	}
	#detail .linkArea li a{
		background: url(../common/imgs/icon/icon-arrow-02.gif) no-repeat 0 3px;
		padding-left: 10px;
	}
	
	.iconList {
		zoom:1;
	}
	.iconList:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }

	.iconList li {
		float: left;
		margin-right: 10px;
		padding-top: 20px;
	}
	
	#usingItemListArea{
		margin-top:-500px;
		zoom:1;
		
	}
	#usingItemListArea:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }

	#usingItemList{
		zoom:1;
	}
	#usingItemList:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }

	#detail #usingItemList li{
		float: left;
		width: 132px;
		padding-right: 10px;
		color:#666666;
	}
	#detail #usingItemList li .img{
		margin-bottom: 5px;
	}
	#detail #usingItemList li.last{
		margin-right: 0;		
	}
	#StylingItemDataTxtArea{
		clear: both;
		padding-top: 5px;
	}
	@media screen and (max-width: 480px){
	#StylingItemDataTxtArea{
		padding:0px 10px 0px 10px;
	}}
	
	#StylingItemDataTxtArea p{
		display:block;
		width:100%;
		line-height:100%;
		padding:8px 0px 7px 0px;
		text-overflow: ellipsis;
	}

	#StylingItemDataTxtArea p span{
		font-size:8px;
	}

	.carouselBoxArea{
		width: 700px;
		overflow: hidden;
		float: left;
	}
	
		@media screen and (max-width: 480px){
	.carouselBoxArea{
		width: 100%;
	}}
	
	.carouselBoxWrapper{
		width: 630px;
		overflow: hidden;
		float: left;
		position: relative;
	}
		@media screen and (max-width: 480px){
	.carouselBoxWrapper{
		width: 100%;
	}}
	
	#detail #usingItemList.carouselBox li{ 
		padding-left: 0;
		padding-right: 10px;
		width: 115px;
	}
	
	.carouselBoxArea .btPrevArea{
		width: 35px;
		padding-top: 41px;
		padding-left: 0;
	}
	.carouselBoxArea .btNextArea{
		width: 35px;
		padding-top: 41px;
		padding-right: 0;
	}
	 .carouselBoxArea .btPrev 
	,.carouselBoxArea .btNext{
		display: block;
		width :25px;
		height: 32px;
		line-height: 12px;
		text-indent: -9999em;
		text-align: left;
		outline: none;
	}
	.carouselBoxArea .btPrev{
		background: url(../common/imgs/base/bt-carousel-prev.gif) no-repeat 0 10px;
		padding: 10px 10px 10px 0;
	}
	.carouselBoxArea .btNext{
		background: url(../common/imgs/base/bt-carousel-next.gif) no-repeat 20px 10px ;
		padding: 10px 0 10px 10px;
	}
	.carouselBoxArea .btPrev:hover{
		background-position: 0 -32px;
		cursor: pointer;
	}
	.carouselBoxArea .btNext:hover{
		background-position: 20px -32px;
		cursor: pointer;
	}

	#detail #ohterList{
		clear: both;
		zoom:1;
	}
	#detail #ohterList:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }

	
	#detail #ohterList li{
		float: left;
		margin-right: 10px;
		width: 108px;
	}
	
		@media screen and (max-width: 480px){
	#detail #ohterList li{
		float: left;
		margin-left: 10px;
		width: 43%;
	}}
	
	
	#detail #ohterList li p.img{
		text-align: center;
		margin-bottom: 10px;
		padding:4px;
		background-color: rgba( 255, 255, 255, 0.55 );
 		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	
	#detail #ohterList li.last{
		margin-right: 0;
	}
	
	#detail #detailImgList{
		zoom:1;
	}
	#detail #detailImgList:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }

    #detail #detailImgList li{
		display: none;
	}
	#detail #detailThumbnaillList{
		zoom:1;
	}
	#detail #detailThumbnaillList:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
	#detail #detailThumbnaillList li{
		float: left;
		margin-right: 10px; 
		width: 132px;
		height: 160px;
		border: 1px solid #e0e0cd;
		padding: 10px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		behavior: url(../common/pie/PIE.htc);
		background-color:rgba(255,255,255,0.5)
	}
	
		@media screen and (max-width: 480px){
	#detail #detailThumbnaillList {
		width:100%;
		padding:0px 5px 0px 5px;
		}
			
			
	#detail #detailThumbnaillList li{
		float: left;
		margin-top:10px;
		margin-left:10px;
		margin-right:-1px; 
		width:40%;
		height:auto;
		border: 1px solid #e0e0cd;
		padding:5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		behavior: url(../common/pie/PIE.htc);
		background-color:rgba(255,255,255,0.5)
	}}
	
	
	#detail #detailThumbnaillList li.last{
		margin-right: 0; 
	}
	#detail #detailThumbnaillList li.on{
		filter:alpha(opacity=75);
		opacity:0.75;
	}
	#detail .bodyArea{
		margin-top: 15px;
	}
	
		@media screen and (max-width: 480px){
	#detail .bodyArea{
		margin-top: 15px;
		margin-left:10px;
		margin-right:10px;
	}}
	
	#detail .apiIconList{
		margin-top: 15px;
	}
	
	
	.next {
		width:100%;
		display: none;
		background-color: rgba(0,0,0,0.1);
		}
		
		@media screen and (max-width: 480px){
	.next {
		display: block;
		width:100%;
		background-color: rgba(0,0,0,0.1);
		}}
	
	#bottom {
	width:100%;
	background-color:#000000;
	padding:20px 0px 10px 0px;
	bottom:0px;              /* 絶対位置指定(左0px,下0px) */
	position: relative;
	margin:0px 0px 0px 0px;
	}