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

/**********************************************************************
*
*　　 ■column
*
**********************************************************************/

#column_tit h2 {
	background: #F0F0F0;
	color: #555;
	line-height: 32px;
	font-size: 18px;
	text-align: center;
}

#column_tit p {
	font-size:14px;
	text-align:center;
	padding: 10px;
}

#column_top {
	width: 100% !important;
	padding: 0 !important;
}

#column_top img {
	vertical-align: bottom;
	width: 100% !important;
}


#column-box {
	width: 300px;
	margin: 20px auto;
}
#column-box ul {
	width: 100%;
	margin: 0 auto;
}

#column-box ul li {
	float: left;
	width: 142px;
	height:120px;
	margin: 7px 1%;
}

#column-box ul li a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: 2px solid #CF0E26;
	overflow: hidden;
}

#column-box ul li a section div img {
	width: 100%;
	z-index: 999;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

#column-box ul li a section h3 {
	width: 100%;
	height: auto;
	padding: 3px;
	/*line-height: 55px !important;*/
	background: url(/column/img/column-bg.gif) repeat;
	margin: auto 0;
	color: #FFF;
	font-size: 13px;
	text-align: center;
	border-bottom: none;
}
/*
#column-box ul li a section h3 img {
	position: absolute;
	left: 8px;
	top: 20px;
	width: 30px;
	height: 30px;
	vertical-align: middle;
}
*/
/*
#column-box ul li a section p {
	position:absolute;
	bottom: 5px;
	left: -220px;
	width: 285px;
	height: 46px;
	line-height: 46px;
	text-align: center !important;
	background: #CF0E26 url(/column/img/column-arrow.png) no-repeat 240px center;
	background-size: 24px 24px;
	color: #FFF;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	filter: alpha(opacity=85);
	-moz-opacity: 0.85;
	opacity: 0.85;
	letter-spacing: 0.1em;
}
*/
#column-box ul li a:hover section p {
	position:absolute;
	left: 5px;
}

#column-cnt div {
	padding: 0 0 20px;
	/*margin: 0 0 20px;*/
}

#column-cnt h2 {
	background: url(/column/img/h2-icon.png) no-repeat 8px center;
	background-color:#E0FFFF;
	background-size: 40px 40px;
	padding: 14px 0;
	line-height:28px;
	padding-left: 60px;
	font-size: 18px;
	border-bottom: 1px dotted #DDD;
	border-top: 2px solid #DDD;
	margin-bottom: 20px;
	font-weight: bold;
}

#column-cnt h3 {
	clear: both;
	/*background: url(/column/img/h3-tit-bg.gif) repeat;*/
	background:#F6F8B4;
	padding: 10px 0;
	line-height: 24px;
	text-align: left;
	font-size: 18px;
	border-bottom: 1px dotted #DDD;
	border-top: 2px solid #DDD;
	margin-bottom: 20px;
	letter-spacing: 0.05em;
}

#column-cnt h3 em {
	background: url(/column/img/h3-icon.png) no-repeat 14px center;
	background-size: 32px 32px;
	display: block;
	line-height: 32px;
	padding-left: 55px;
	font-weight: bold;
}

#column-cnt h4 {
	background: url(/column/img/h4-icon.png) no-repeat 14px center !important;
	background-size: 30px 30px !important;
	padding: 10px 0 10px 60px !important;
	line-height: 32px;
	padding-left: 70px;
	font-size: 20px;
	border-bottom: 1px dotted #DDD !important;
	margin-bottom: 20px !important;
	letter-spacing: 0.05em;
}

#column-cnt p {
	width: 92%;
	letter-spacing: 0.1em;
	font-size: 15px !important;
	line-height: 24px;
	padding: 0 ;
	margin: 0 auto 20px;
}

#column-cnt p img {
	display: block;
	width: 100%;
}

#column-cnt #back-btn {
	width: 285px !important;
	margin: 0 auto !important;
}

#column-cnt #back-btn a {
	display: block;
	width: 285px;
	height: 46px;
	line-height: 46px;
	font-size: 15px;
	text-align: center !important;
	background: #CF0E26 url(/column/img/column-b-arrow.png) no-repeat 20px center;
	background-size: 24px 24px;
	color: #FFF;
	-webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
	transition: all 0.1s ease;
	letter-spacing: 0.1em;
}

#column-cnt #back-btn a:hover {
	background: #CF0E26 url(/column/img/column-b-arrow.png) no-repeat 12px center;
	background-size: 24px 24px;
	filter: alpha(opacity=85);
	-moz-opacity: 0.85;
	opacity: 0.85;
}


#profile{
	border-top: solid 1px;
}

#profile p.writer{
	margin-top:20px;
	margin-bottom:5px;
	line-height:1.3;
}

#profile p img{
	margin: 0px 10px 0 5px;
	width:40%;
	float: left;
}


/*pagenation*/

.pager  ul.pagination {
  text-align: center;
  margin: 0;
  padding: 0;
}

.pager .pagination li {
  display: inline;
  margin: 0 2px 20px;
  padding: 0;
  display: inline-block;
  border: solid 1px #DDDDDD;
  width: 50px;
  height: 50px;
  text-align: center;
  position: relative;
}

.pager .pagination li a{
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display:table;
  color:#11B8DB;
  text-decoration: none;
}

.pager .pagination li a span{
  display:table-cell;
  vertical-align:middle;
}

.pager .pagination li a:hover,
.pager .pagination li a.active{
  color: #11B8DB;
  background:#EEEEEE;
}

@media only screen and (max-width: 767px){
  .pager .pagination li{
    display: none;
  }

  .pager .pagination li.pre,
  .pager .pagination li.next{
    display: inline-block;
    width: 35%;
    height: 30px;
    text-align: center;
  }

  .pager .pagination li.pre a,
  .pager .pagination li.next a{
    width: 100%;
    text-align: center;
  }

  .pager .pagination li.pre span::after{
    content: "　前へ";
  }

  .pager .pagination li.next span::before{
    content: "次へ　";
  }

}

/**********************************************************************
*
*　　 ■透過
*
**********************************************************************/

#column-box ul li a:hover section h3 img,
#column-box ul li a:hover section div img {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

/**********************************************************************
*
*　　 ■角丸
*
**********************************************************************/

#column-box ul li a,
#column-box ul li a section p,
#column-cnt h3,
#column-cnt #back-btn a {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
}

/**********************************************************************
*
*　　 ■border-box
*
**********************************************************************/

#column-box ul li a,
#column-box ul li a .tit,
#column-box ul li a section h3 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

/**********************************************************************
*
*　　 ■回り込み解除
*
**********************************************************************/
#profile:after,
#column-box ul:after{
	content: "";
	display: block;
	clear: both;
}