@charset "UTF-8";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/

/* モバイルレイアウト : 480 px およびそれ以下. */

.gridContainer {
    margin: 0 auto;
	width: 100%;
	padding:0;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.logo_area{ width:100%;
height:auto;
margin: 0 auto;
padding:80px 0 10px 0;
text-align:center;
background-color:#192315;
 }
#watched_movie {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#footnav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#foot_infomation {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.drama_work{ width:100%;
             height:auto;
			 margin: 0 auto;
			 padding: 0 5px;
			 text-align:center;
			      }
.drama_work li{ list-style:none;
                float:left;
				width:31%;
				text-align: center;
				margin: 5px 2px;
				position:relative;
                display:inline-block;
                overflow:hidden;
                vertical-align:top;
                background:#192315;
 -moz-box-shadow: 1px 1px 1px 1px #ccc;
         -webkit-box-shadow: 1px 1px 1px 1px #ccc;
         -o-box-shadow: 1px 1px 1px 1px #ccc;
         -ms-box-shadow: 1px 1px 1px 1px #ccc;
                 }
.drama_work li a{
 color:#fff;
 display:block;
 padding: 5px;
 text-decoration:none;
 background:#192315;
 line-height: 3;
 font-weight: bold;
}				 
.drama_work li img{ width:100%; height:auto; }				 	
.drama_work li a:link{ text-decoration:none; }
.drama_work li a:visited{}
.drama_work li a:hover{}
#drama_work{clear: both;float: left;margin-left: 0;width: 100%;display: block;}
#watched_drama{clear: both;float: left;margin-left: 0;width: 100%;display: block;}


/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 97.5%;
	max-width:1400px;
	padding-left: 1.25%;
	padding-right: 1.25%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.logo_area{ width:100%;
height:auto;
margin: 0 auto;
padding:100px 0 10px 0;
text-align:center;
background-color:#192315;
 }
#watched_movie {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#footnav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#foot_infomation {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.drama_work{ width:100%;
             height:auto;
			 margin: 0 auto;
			 padding: 0 ;
			 text-align:center;
			      }
.drama_work li{ list-style:none;
                float:left;
				width:25%;
				text-align: center;
				margin: 5px;
				position:relative;
                display:inline-block;
                overflow:hidden;
                vertical-align:top;
                background:#192315;
 -moz-box-shadow: 1px 1px 1px 1px #ccc;
         -webkit-box-shadow: 1px 1px 1px 1px #ccc;
         -o-box-shadow: 1px 1px 1px 1px #ccc;
         -ms-box-shadow: 1px 1px 1px 1px #ccc;
                 }
.drama_work li a{
 color:#fff;
 display:block;
 padding: 5px;
 text-decoration:none;
 background:#192315;
 line-height: 3;
 font-weight: bold;
}				 
.drama_work li img{ width:100%; height:auto; }				 	
.drama_work li a:link{ text-decoration:none; }
.drama_work li a:visited{}
.drama_work li a:hover{}
#drama_work{clear: both;float: left;margin-left: 0;width: 100%;display: block;}
#watched_drama{clear: both;float: left;margin-left: 0;width: 100%;display: block;}

}

/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 98%;
	max-width: 1400px;
	margin: 0 auto;
	text-align:center;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.logo_area{ width:100%;
height:auto;
margin: 0 auto;
padding:80px 0 10px 0;
text-align:center;
background-color:#192315;
 }
#watched_movie {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#footnav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#foot_infomation {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.drama_work{ width:100%;
             height:auto;
			 margin: 0 auto;
			 padding: 0;
			 text-align:center;
			      }
.drama_work li{ list-style:none;
                float:left;
				width: 23%;
				text-align: center;
				margin: 10px 5px;
				position:relative;
                display:inline-block;
                overflow:hidden;
                vertical-align:top;
                background:#192315;
 -moz-box-shadow: 1px 1px 1px 1px #ccc;
         -webkit-box-shadow: 1px 1px 1px 1px #ccc;
         -o-box-shadow: 1px 1px 1px 1px #ccc;
         -ms-box-shadow: 1px 1px 1px 1px #ccc;
                 }
.drama_work li a{
 color:#fff;
 display:block;
 padding: 5px;
 text-decoration:none;
 background:#192315;
 line-height: 3;
 font-weight: bold;
}				 
.drama_work li img{ width:100%; height:auto; }				 	
.drama_work li a:link{ text-decoration:none; }
.drama_work li a:visited{}
.drama_work li a:hover{}
#drama_work{clear: both;float: left;margin-left: 0;width: 100%;display: block;}
#watched_drama{clear: both;float: left;margin-left: 0;width: 100%;display: block;}

}