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



.wide{ display:block;}
.ie8 body{min-width:1000px;}
.box{
	filter:alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
}












/* ===============================
                Header
   =============================== */


.header{
	width:100%;
	background:#000;
	margin-top:85px;
	color:#FFF;
}
.header .title{
	width:95%;
	max-width:1100px;
	margin:0 auto;
	text-align:left;
	padding:50px 0;
}
.header .title h2{
	padding-top:0.8em;
	font-size:1.3em;
}
.header .title h2 br{
	display:none;
}
.header .title img{
	width:300px;
}





/* ===============================
                Common
   =============================== */



#contentsBox{
	width:95%;
	max-width:1100px;
	margin:0 auto;
	text-align:left;
	padding-bottom:50px;
}

#contentsBox .pankzu{
	padding:10px 0 50px;
	font-size:1.0em;
}
#contentsBox .pankzu span{
	padding:0 1em;
}



.mainBox{
	width:100%;
	overflow:hidden;
	position:relative;
}

.mainBox .element{
	width:100%;
	float:left;
	margin-right:-300px;
	
}
.elementIn{
	margin-right:300px;
}

.mainBox .sideColumn{
	width:250px;
	float:right;
	position:relative;
	z-index:50;
}



.pankzu a,
.sideColumn a,
.indexEntryList a{
	color:#000;
	-webkit-transition:opacity 0.2s;
	   -moz-transition:opacity 0.2s;
	        transition:opacity 0.2s;
}
.pankzu a:hover,
.sideColumn a:hover,
.indexEntryList a:hover{
	filter:alpha(opacity=60);
	-webkit-opacity:0.6;
	   -moz-opacity:0.6;
	        opacity:0.6;
}







/* ===============================
              SideColumn
   =============================== */



.sideColumn h3,
.sideColumn h4{
	font-size:1.8em;
	font-family: "helveticaneue-bold";
	padding:0.3em 0 0.5em;
	position:relative;
}
.sideColumn h4{
	padding:0;
}
.sideColumn h3:before{
	display:block;
	content:"";
	width:20px;
	height:2px;
	background:#000;
	position:absolute;
	top:0;
	left:0;
}
.sideColumn h4 i{
	padding-right:0.4em;
	font-size:0.9em;
}


/* -- about -- */

.sideColumn .about{
	margin-bottom:45px;
}


/* -- category -- */

.sideColumn .category{
	margin-bottom:41px;
}
.sideColumn .category ul{
	font-size:1.2em;
}
.sideColumn .category li{
	margin-bottom:4px;
	box-sizing: border-box;
	position:relative;
}
.sideColumn .category li a{
	display:inline-block;
	position:relative;
	padding:0 0 0 17px;
}
.sideColumn .category li a:before{
	content:"\f138";
	font-family: 'FontAwesome';
	position:absolute;
	top:0;
	left:0;
	padding-left:1px;
}


/* -- entry -- */

.sideColumn .entry{}
.sideColumn .entry ul{}
.sideColumn .entry li{
	margin-bottom:15px;
}
.sideColumn .entry li a{
	display:block;
}
.sideColumn .entry .entryImg{
	overflow:hidden;
	width:60px;
	height:60px;
	position:relative;
	float:left;	
}
.sideColumn .entry .entryImg img{
  position:absolute;
  top: 0;
  left: 0;
  margin-top:0px;
  margin-left:-15px;
  width:150%;
  height:auto;
}
.sideColumn .entry .entryTxt{
	float:right;
	width:180px;
}
.sideColumn .entry .date{
	font-size:1.0em;
}





/* ===============================
             index List
   =============================== */

.indexEntryList{
	width:100%;
	overflow:hidden;
}
.indexEntryList ul{
	width:103%;
	font-size:0;
}
.indexEntryList li{
	width:30.333333%;
	display:inline-block;
	font-size:12px;
	margin-right:3%;
	margin-bottom:4%;
	vertical-align:top;
}


.indexEntryList li .entryImg{
	width:100%;
}
.indexEntryList li h3{
	width:100%;
	padding:0.2em 0;
	border-bottom:1px dotted #CCC;
}
.indexEntryList li h3 a{
	margin-right:1em;
}
.indexEntryList li h2{
	font-size:1.2em;
	padding:0.5em 0 0.2em;
}
.indexEntryList li .date{
	font-size:1.0em;
}


/* ===============================
             Category Page
   =============================== */
h2.categoryTitle{
	font-size:2.1em;
	padding:0 0 1em;
	font-family: "helveticaneue-medium";

}






/* ===============================
             Entry Main
   =============================== */

.entryMain{
	font-size:1.1em;
	line-height:1.6;
}


.entryMain h1{
	font-size:2.0em;
	padding:0 0 1.0em;
	font-weight:bold;
	line-height:1.4;
}

.entryMain .entryInfo{
	width:100%;
	padding:0;
	line-height:1;
}
.entryMain .entryInfo .date{
	display:inline-block;
	font-size:1.2em;
}
.entryMain .entryInfo .category{
	display:inline-block;
	border-left:1px solid #000;
	padding-left:1em;
	margin-left:0.7em;
	font-size:1.2em;
}






.entryMain .mainImg{
	margin:1em 0 2em;
}
.entryMain .lead{
	font-size:1.3em;
	border-bottom:1px solid #CCC;
	padding-bottom:40px;
}

.entryMain .entryBody{}
.entryMain .entryBody p{
	margin:1.5em 0;
	font-size:1.2em;
}
.entryMain .entryBody p.noMgTop{margin-top:0;}
.entryMain .entryBody p.noMgBottom{margin-bottom:0;}

.entryMain .entryBody a{
	text-decoration:underline;
	color:#1C73A7;
}
.entryMain .entryBody a:hover{
	color:#999;
}


.entryMain .entryBody h2{
	font-size:1.8em;
	line-height:1.4;
	position:relative;
	padding:12px 0 0;
	margin-top:50px;
	font-family: "helveticaneue-bold";
}
.entryMain .entryBody h2:before{
	position:absolute;
	display:block;
	content:"";
	width:35px;
	height:3px;
	top:0;
	left:0;
	background:#000;
}

.entryMain .entryBody h3{
	font-size:1.4em;
	position:relative;
	padding:0.5em 0 0.2em;
	font-family: "helveticaneue-bold";
}



.maxW450{
	max-width:450px;
	margin-left:auto !important;
	margin-right:auto !important;
}



/* ===============================
               about
   =============================== */
#aboutInline{
	font-size:1.5em;
	padding:1.5em;
	color:#000;
	text-align:left;
	max-width:600px;
}
#aboutInline h3{
	font-size:1.7em;
	padding-bottom:0.2em;
}
#aboutInline p{
	margin:00;
	line-height:1.7;
}













ul:after,
li:after,
.mainBox:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}








@media only screen and (max-width: 970px) {

/* ===== index List ===== */
.indexEntryList ul{width:104%;}
.indexEntryList li{width:46%;margin-right:4%;}

}








@media only screen and (max-width: 768px) {


/* ===== Header ===== */
.header{margin-top:50px;}
.header .title{text-align:center;}
.header .title img{width:300px;}
.header .title h2 br.mb01{display:block;}

/* ===== Common ===== */
#contentsBox{width:100%;padding-bottom:0;}

.mainBox .element{float:none;width:92%;margin:0 auto;}
.elementIn{margin-right:0;}

.mainBox .sideColumn{width:100%;float:none;border-top:1px solid #000;}

#contentsBox .pankzu{width:92%;margin:0 auto;padding:10px 0 20px;}





/* ===== SideColumn ===== */

.sideColumn h3{
	padding:0.5em 0;
	text-align:center;
	background:#999;
	color:#FFF;
}
.sideColumn h4{padding:0;text-align:center;}
.sideColumn h3:before{display:none;}

.sideColumn h3,
.sideColumn h4{
	font-size:1.5em;
}

/* -- about -- */

.sideColumn .about{margin-bottom:0;}
.sideColumn .about a{display:block;padding:0.8em 0;}


/* -- category -- */

.sideColumn .category{margin-bottom:0;}
.sideColumn .category ul{text-align:center;}
.sideColumn .category li{border-top:1px dotted #999;}
.sideColumn .category li:first-child{border-top:none;}
.sideColumn .category li a{
	display:block;
	position:relative;
	padding:0.9em 0 0.7em;
	line-height:1;
}
.sideColumn .category li a:before{display:none;}


/* -- entry -- */

.magazineIndex .sideColumn .entry{display:none;}

.sideColumn .entry ul{width:100%;margin:0 auto;}
.sideColumn .entry li{
	border-top:1px dotted #999;
	padding:15px;
	margin:0;
	box-sizing:border-box;
}
.sideColumn .entry li:first-child{border-top:none;}
.sideColumn .entry .entryImg{width:100px;height:100px;}
.sideColumn .entry .entryTxt{
	float:right;
	width:100%;
	margin-left:-120px;
}
.sideColumn .entry .entryTxt .entryTxtIn{margin-left:120px;}
.sideColumn .entry .entryTxt h2{font-size:1.2em;}


/* ===== Category Page ===== */
h2.categoryTitle{font-size:2.0em;padding:0.2em 0 0.8em;}
.magazineCategory .sideColumn .entry{display:none;}

/* ===== index List ===== */
.indexEntryList ul{width:103%;}
.indexEntryList li{width:30.33333%;margin-right:3%;}


/* =====  Entry Main ===== */
.entryMain{padding-bottom:2em;}



}



@media only screen and (max-width: 640px) {


/* ===== Header ===== */
.header .title img{width:250px;}
.header .title h2{font-size:1.1em;}



/* ===== Common ===== */
.mainBox .element{width:100%;}


/* ===== SideColumn ===== */
/* -- entry -- */
.sideColumn .entry .entryImg{width:80px;height:80px;}
.sideColumn .entry li{padding:12px;}
.sideColumn .entry .entryTxt{margin-left:-100px;}
.sideColumn .entry .entryTxt .entryTxtIn{margin-left:100px;}



/* ===== Category Page ===== */
h2.categoryTitle{text-align:center;}




/* ===== index List ===== */
.indexEntryList ul{width:100%;}
.indexEntryList li{
	width:100%;
	display:block;
	border-top:1px solid #CCC;
	margin:0;
	padding:15px 12px 15px 12px;
	box-sizing:border-box;
}
.indexEntryList li .entryImg{width:29%;float:left;}
.indexEntryList li .entryTxt{width:67%;float:right;}
.indexEntryList li h3{width:auto;padding:0;border-bottom:none;}
.indexEntryList li h3 a{
	display:inline-block;
	background:#F5F5F5;
	border:1px solid #CCC;
	line-height:1;
	padding:0.4em 0.5em;
	margin:0 5px 0 0;
}
.indexEntryList li h2{width:100%;display:block;padding-top:0;}




/* =====  Entry Main ===== */
.entryMain{font-size:1.0em;}
.entryMain .entryInfo{width:90%; margin:0 auto;}
.entryMain .entryBody{width:90%;margin:0 auto;}

.entryMain .entryInfo .date{font-size:1.1em;}
.entryMain .entryInfo .category{font-size:1.1em;}


.entryMain h1{
	width:90%; margin:0 auto;
	font-size:1.8em;
	line-height:1.5;
}
.entryMain .lead{
	width:90%; margin:0 auto;
	font-size:1.4em;
}


.entryMain .entryBody h2{
	line-height:1.5;
	margin-top:3em;
	font-size:1.6em;
}
.entryMain .entryBody h3{
	font-size:1.5em;
}
.entryMain .entryBody p{
	font-size:1.3em;
	
}


/* =====  about ===== */
#aboutInline{font-size:1.3em;padding:1.0em 1.0em 0;}
#aboutInline h3{padding-bottom:0;}
#aboutInline p br.mb{display:none;}





}




@media only screen and (max-width: 450px) {

/* ===== Header ===== */
.header .title{padding:40px 0;}
.header .title h2 br.mb02{display:block;}

/* ===== SideColumn ===== */
/* -- entry -- */
.sideColumn .entry .entryTxt h2{font-size:1.1em;}


/* ===== Category Page ===== */
h2.categoryTitle{font-size:1.8em;padding:0 0 0.8em;}



/* ===== index List ===== */
.indexEntryList li h3 a{font-size:0.9em;}
.indexEntryList li h2{font-size:1.1em;padding:0.2em 0 0.2em;}
.indexEntryList li .entryImg{width:32%;}
.indexEntryList li .entryTxt{width:64%;}

/* =====  Entry Main ===== */


/* =====  about ===== */
#aboutInline{font-size:1.2em;padding:0.5em 0.5em 0;}

#aboutInline h3{font-size:1.6em;}


}






@media only screen and (max-width: 360px) {

/* =====  about ===== */
#aboutInline{font-size:1.1em;}

}