@charset "utf-8";
/*CSS INFOMATION=======================

BASECSS

File name : base.css
   
====================================*/



@media screen and (max-width:640px){
/*----------------------------------------
	
	=COMMON
-----------------------------------------*/
.pcBox{
	display:none;
}

#container {
	width:100%;
    margin:0;
	line-height:1.4;
}

header{
	padding:5px 10px;
	background:#e60012;
}

header img{
	width:40px;
	height:auto;
}

h1{
	padding:0px 10px 7px;
	background:#fff;
	margin:0 0 0
}

h1 img{
	width:100%;
	height:auto;
	border-radius:8px;
}

.hero-masonry {
	width:100% !important;
	min-height:2400px !important;
}


.itemA{
	width:100%;
}

nav{
	width:100%;
}

nav ul{
	overflow:hidden;
}

nav li{
	font-size:12px;
	
}

nav li a{
	color:#fff !important;
	background:#222;
	padding:10px;
	display:block;
	text-decoration:none !important; 
	text-align:center;
	border-bottom:1px solid #333;
}





#tvprogram a{
	background:#222;
	color:#fff;
	font-size:10px;
	padding:12px;
	display:block;
	line-height:1.6;
	margin:10px 10px 5px;
	text-align:center;
	border-radius:6px;
	text-decoration:none !important; 
}




.item{
	width:100%;
	margin:0 0 1px;
}

.col2{width:100%;}



.itemB{

	margin:10px 10px;
	border-radius:6px;
}

.itemB img{
	width:100%;
	height:auto;
	border-radius:6px;
	  	/* box-shadow */
box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
-webkit-box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
-moz-box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
}


.itemC{
	width:45%;
	float:left;
	margin:0 0 10px 5px;
	border-radius:8px;
	padding:0 0 0 5px;
}

.itemC img{
	width:100%;
	height:auto;
	border-radius:8px;
	  	/* box-shadow */
box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
-webkit-box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
-moz-box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
}

.itemE{
	width:45%;
	float:left;
	margin:0 0 10px 5px;
	border-radius:8px;
	padding:0 0 0 5px;
}

.itemE img{
	width:100%;
	height:auto;
	border-radius:8px;
	  	/* box-shadow */
box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
-webkit-box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
-moz-box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
}


.itemD{
	margin:10px 10px;
	border-radius:8px;
}

.itemD img{
	width:100%;
	height:auto;
	border-radius:8px;
	  	/* box-shadow */
box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
-webkit-box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
-moz-box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
}





#banner{
	clear:both;
}

#banner ul{
	overflow:hidden;
	padding:0px 8px;
}


#banner li{
	margin:0 2px 5px;
	width:48.5%;
	float:left;
	overflow:hidden;
	border-radius:8px;
}

#banner li img{
	width:100%;
	height:auto;
	  	/* box-shadow */
box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
-webkit-box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
-moz-box-shadow:rgba(179, 179, 179, 0.498039) 0px 0px 3px 2px;
}





footer{
	clear:both;
	padding:10px;
	font-size:10px;
	background:#e60012;
	color:#fff;
	text-align:center;
	margin:10px 0 0;
}


#sns{
	width:140px;
	margin:0 auto;
}

#sns li{
	padding:15px 5px 15px;
	float:left;
}


/*-----------------------------------------

  =books news
-----------------------------------------*/
#header{
	background:#e60012;
	height:12px;
}

.booksNews-wt{
	background:url(../images/gallery_waku_top.png) top left no-repeat;
	padding:15px 0 0;
	margin:10px 0 0;
}

.booksNews-wm{
	background:url(../images/gallery_waku_middle.png) top left repeat-y;
	padding:0 20px 0;
}

.booksNews-wb{
	background:url(../images/gallery_waku_footer.png) bottom left no-repeat;
	padding:0 0 15px;
}

.booksNews-inner{
	width:980px;
	margin:0 auto;
	padding:48px 0;
}


.booksNews-inner li{
	border-bottom:1px dotted #aaa;
	padding:30px 0;
	overflow:hidden;
}

.booksNews-inner ul{
	padding:0 0 20px;
}

.booksNews-inner li h3{
	font-size:24px;
	line-height:1.3;
	padding:0 0 20px;
	color:#444;
	font-weight:bold;
}

.booksNews-inner li h4{
	line-height:1.6;
	padding:0 0 5px;
	color:#444;
	font-weight:bold;
}

.booksNews-inner li p{
	padding:0 0 20px;
	line-height:1.6;
	color:#444;
}

.books-news-ttl{
	font-size:12px;
	color:#444;
	padding:5px 0 15px;
	font-weight:bold;
}

.boxLeftA{
	width:240px;
	float:left;
}

.boxRightA{
	width:690px;
	float:right;
}


.fontOrenge{
	color:#fda600;
}

.fontPink{
	color:#fb2d77 !important;
	font-size:16px !important;
}

.fontYellow{
	color:#ffd800;
}

.fontGrey{
	color:#9c9c9c;
}

.fontPerple{
	color:#cb30bb;
}


.inlineBox{
	background:#fff;
	height:320px;
	padding:20px;
	color:#666;
	text-align:center;
}

.inlineBox .ttl_kounyu{
	border-bottom:1px dotted #666;
	padding:15px;
	font-weight:bold;
	font-size:30px;
	color:#333;
	text-align:center;
}



#bg_grey{
	background:#fff;
	border-top:3px solid #000;
	padding:20px 0;
}

#bg_grey02{
	background:#e7e7e7;
	padding:20px 0;
}

#works_nav{
	width:992px;
padding:20px 0 20px 11px;
overflow:hidden;
margin:0 auto;
}


#works_nav li{
float:left;
width:236px;
margin:12px 12px 0 0;
}

#works_nav li a:hover img{
filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}


#footer{
	text-align:center;
	color:#fff;
	background:#8a8a8a;
	padding:15px 0;
}



/*----------------------------------------
	
	=LINK
-----------------------------------------*/

a:link {color: #333;text-decoration:underline;}
a:visited {color:#333;text-decoration:none;}
a:hover, a:active {color: #333;text-decoration: none;}
a:focus {color:#333;}
a img, a:link img, a:visited img, a:hover img, a:active img {border: none;text-decoration: none;}


/*----------------------------------------
	
	=MARGIN - PADDING
-----------------------------------------*/

.pl5 {padding-left:5px !important;}
.pl10 {padding-left:10px !important;}
.pl15 {padding-left:15px !important;}
.pl20 {padding-left:20px !important;}
.pl25 {padding-left:25px !important;}
.pl30 {padding-left:30px !important;}
.pl35 {padding-left:35px !important;}
.pl40 {padding-left:40px !important;}
.pl45 {padding-left:45px !important;}
.pl50 {padding-left:50px !important;}
.pr5 {padding-right:5px !important;}
.pr10 {padding-right:10px !important;}
.pr15 {padding-right:15px !important;}
.pr20 {padding-right:20px !important;}
.pr25 {padding-right:25px !important;}
.pr30 {padding-right:30px !important;}
.pr35 {padding-right:35px !important;}
.pr40 {padding-right:40px !important;}
.pr45 {padding-right:45px !important;}
.pr50 {padding-right:50px !important;}
.pt0 {padding-top:0px !important;}
.pt5 {padding-top:5px !important;}
.pt10 {padding-top:10px !important;}
.pt15 {padding-top:15px !important;}
.pt20 {padding-top:20px !important;}
.pt22 {padding-top:22px !important;}
.pt25 {padding-top:25px !important;}
.pt30 {padding-top:30px !important;}
.pt35 {padding-top:35px !important;}
.pt40 {padding-top:40px !important;}
.pt45 {padding-top:45px !important;}
.pt50 {padding-top:50px !important;}
.pb0 {padding-bottom:0px !important;}
.pb5 {padding-bottom:5px !important;}
.pb10 {padding-bottom:10px !important;}
.pb15 {padding-bottom:15px !important;}
.pb20 {padding-bottom:20px !important;}
.pb25 {padding-bottom:25px !important;}
.pb30 {padding-bottom:30px !important;}
.pb35 {padding-bottom:35px !important;}
.pb40 {padding-bottom:40px !important;}
.pb45 {padding-bottom:45px !important;}
.pb50 {padding-bottom:50px !important;}

.ml5 {margin-left:5px !important;}
.ml10 {margin-left:10px !important;}
.ml15 {margin-left:15px !important;}
.ml20 {margin-left:20px !important;}
.ml25 {margin-left:25px !important;}
.ml30 {margin-left:30px !important;}
.ml35 {margin-left:35px !important;}
.ml40 {margin-left:40px !important;}
.ml45 {margin-left:45px !important;}
.ml50 {margin-left:50px !important;}
.mr5 {margin-right:5px !important;}
.mr10 {margin-right:10px !important;}
.mr15 {margin-right:15px !important;}
.mr20 {margin-right:20px !important;}
.mr25 {margin-right:25px !important;}
.mr30 {margin-right:30px !important;}
.mr35 {margin-right:35px !important;}
.mr40 {margin-right:40px !important;}
.mr45 {margin-right:45px !important;}
.mr50 {margin-right:50px !important;}
.mt0 {margin-top:0px !important;}
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt35 {margin-top:35px !important;}
.mt40 {margin-top:40px !important;}
.mt45 {margin-top:45px !important;}
.mt50 {margin-top:50px !important;}
.mb0 {margin-bottom:0px !important;}
.mb5 {margin-bottom:5px !important;}
.mb10 {margin-bottom:10px !important;}
.mb15 {margin-bottom:15px !important;}
.mb20 {margin-bottom:20px !important;}
.mb25 {margin-bottom:25px !important;}
.mb30 {margin-bottom:30px !important;}
.mb35 {margin-bottom:35px !important;}
.mb40 {margin-bottom:40px !important;}
.mb45 {margin-bottom:45px !important;}
.mb50 {margin-bottom:50px !important;}

.mg5 {margin:5px !important;}
.mg10 {margin:10px !important;}
.mg15 {margin:15px !important;}
.mg20 {margin:20px !important;}
.mg25 {margin:25px !important;}
.mg30 {margin:30px !important;}
.mg35 {margin:35px !important;}
.mg40 {margin:40px !important;}
.mg45 {margin:45px !important;}
.mg50 {margin:50px !important;}

.pd5 {padding:5px !important;}
.pd10 {padding:10px !important;}
.pd15 {padding:15px !important;}
.pd20 {padding:20px !important;}
.pd25 {padding:25px !important;}
.pd30 {padding:30px !important;}
.pd35 {padding:35px !important;}
.pd40 {padding:40px !important;}
.pd45 {padding:45px !important;}
.pd50 {padding:50px !important;}

.ma0 {margin:0 !important;}
.pd0 {padding:0 !important;}

*/

/*----------------------------------------
	
	=ALIGN
-----------------------------------------*/


.alignL {
	text-align:left !important;
}
.alignR {
	text-align:right !important;
}

.alignC {
    text-align:center !important;
}


/*----------------------------------------
	
	=FLOAT
-----------------------------------------*/

.floatR{
	float:right;
}

.floatL{
	float:left;
}

.floatN{
	float:none;
}


/*-----------------------------------------
 
  =FLOATING BOX CLEAR
-----------------------------------------*/

.clr:after {
content: ".";
display: block;
height: 0; 
clear: both;
visibility: hidden;
}

.clr {
display: inline-block;
}

* html .clr { 
height: 1%;
}

.clr {
display: block;
}

.clearR{
	clear:right;
}

.clearL{
	clear:left;
}

.clear{
	clear:both;
}


/*----------------------------------------
	
	=TXT
-----------------------------------------*/

.fontSS{
	font-size:77%;
}

.fontS{
	font-size:85%;
}

.fontM{
	font-size:100%;
}

.fontL{
	font-size:108%;
}

.fontLL{
	font-size:150%;
	font-weight:bold;
}

.fontB{
font-weight:bold;
}

.fontBlue{
	color:#1275bb;
	font-weight:bold;
}

.fontRed{
	color:#F00;
}

/*----------------------------------------
	
	=Nav
-----------------------------------------*/


  #menu{
    display: none;
  }
  #menu li{
    width: 100%;
  }
  #toggle{
    display: block;
    position: absolute;
	top:0;
	right:0;
    width:40px;
    background: #fff;
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 12px 0 10px;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #222;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #fff;
  }
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 2px;
  }
}