@charset "UTF-8";
/* CSS Document */
.topImageColumn{
	background-color: #FFF;
	background-image: url(img/topimage_column.jpg);
	background-repeat: no-repeat;
	background-position: center top;
    height: 400px;
    margin: 0 auto;
    width: 100%;
	position: relative;
}

.topImageColumn h1{
	position: absolute;
	top: 35%;
	left: 25%;
	font-size: 50px;
	font-weight: initial;
}

.topImageColumn p{
	position: absolute;
	top: 52%;
	left: 25%;
	line-height: 1.6;
}

#contentBoxColumn{
	background-color: #f9f6e7;
	padding-top: 50px;
	padding-bottom: 220px;
}

#ColumnInner{
	width: 1200px;
	margin: 0 auto;
	display: flex;
	font-size: 16px;
}

#ColumnInner #column-left{
	width: 1200px;
	margin-right: 30px;
}

#ColumnInner #column-list{
	width: 1200px;	
	display: flex;
	justify-content: left; 
	flex-wrap: wrap;
}

#ColumnInner #column-left .column-item{
	margin-bottom: 50px;
	margin-right: 20px;
}

#ColumnInner .column-item{
	width: 280px;	
}

#ColumnInner #column-left .column-item:nth-child(4n){
	margin-right: 0;
}

#ColumnInner a,#bnr-columnfooter a{
	transition-property: opacity;
	transition-duration: 0.5s;
	text-decoration: none;
	color: #000;
}

#ColumnInner a:hover,#bnr-columnfooter a:hover{
	opacity: 0.7; 
}

#ColumnInner .column-thum{
	position: relative;
}

#ColumnInner .column-thum img{
	max-width: 280px;
	height: 200px;
}

#ColumnInner .column-thum p{
	position: absolute;
	top: 0;
	right: 0;
	background-color: #a12e44;
	padding: 5px 15px;
}

#ColumnInner .column-thum p a{
	color: #fff;
}

#ColumnInner h2{
	font-size: 20px;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 1.4;
}


#ColumnInner .column-tag{
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
}

#ColumnInner .column-tag a.tag-item,
#column-right .right-menu .column-tag a.tag-item{
	background-color: #fff;
	padding: 10px;
	margin-right: 10px; 
	margin-bottom: 10px;
	border: 1px solid #fff;
	border-radius: 5px;
}

#ColumnInner #column-left .column-tag a.tag-item:last-child,
#ColumnInner #column-right .right-menu .column-tag a.tag-item:last-child{
	margin-right: 0;
}

#ColumnInner .column-top-txt{
	margin-bottom: 20px;
	line-height: 1.6;
}

#ColumnInner .column-timestam{
	font-size: 12px;
}

#ColumnInner #column-pagenation{
	margin-top: 80px;
	margin-bottom: 80px;
}

#ColumnInner #column-pagenation a{
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 10px;
	margin-right: 3px;
}

#ColumnInner #column-pagenation a:nth-child(3){
	margin-right: 3px;
}

#ColumnInner #bnr-columnleft{
	display: flex;
	justify-content: center;
}

#column-search input#search-box{
	width: 210px;
	height: 20px;
	padding: 10px;
	border: 1px solid #ccc;
}


#column-search input#search-submit{
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	height: 30px;
	padding: 5px;
}

#column-right .right-menu{
	margin-top: 50px;
}

#column-right .right-menu h3{
	font-size: 26px;
	font-weight: bold;
	padding-bottom: 5px;
	margin-bottom: 20px;
	position: relative;
	border-bottom: 2px solid #cccccc;
}

#column-right .right-menu h3:before{
	content: '';
	position: absolute;
	bottom: -2px;
	width: 50%;
	height: 2px;
	background: #a12e44;
}

#column-right .right-menu h3 span{
	padding-left: 10px;
}

#column-right .right-menu a.menu-item{
	display: flex;
}

#column-right .right-menu a{
	text-decoration: none;
	color: #000;
	margin-bottom: 30px;
	line-height: 1.6;
}

#column-right .right-menu img.menu-thum{
	max-width: 90px;
	height: 60px;
	margin-right: 20px;
}

#column-right .right-menu ul#column-categroy,#column-right .right-menu ul#column-archive{
	margin-left: 40px;
}

#column-right .right-menu ul#column-categroy li,
#column-right .right-menu ul#column-archive li{
	padding-left: 8px;
	margin-bottom: 5px;
}

#column-right .right-menu ul#column-categroy li{
	list-style-type: "■";
}

#column-right .right-menu ul#column-archive li{
	list-style-type: "＞";
}

#column-right .right-menu .column-tag{
	margin-left: 10px;
}

#bnr-columnfooter{
	width: 458px;
	margin: 40px auto 0 auto;
}

/*　記事詳細ページ */
.topImageColumnDetail{
	background-color: #FFF;
	height: 170px;
    margin: 0 auto;
    width: 100%;
}

.topImageColumnDetail h1{
	text-align: center;
	line-height: 170px;
	font-weight: initial;
	font-size: 55px;
}

#column-left #column-article{
	background-color: #fff;
	width: 820px;
	padding: 30px 30px 80px  30px;
	margin-bottom: 80px;
}

#column-left #ttl-sub{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#column-left #column-ttl{
	border-bottom: solid 2px #a12e44;
	padding-left: 5px;
	padding-right: 5px;
	margin-bottom: 20px;
}

#column-left #column-sub-category{
	background-color: #a12e44;
	padding: 5px 15px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: fit-content;
}

#column-left #column-sub-category a{
	color: #fff;
}

#column-left #column-article .column-tag a.tag-item{
	border: 1px solid #ccc;
}

#column-left #column-index{
	width: 80%;
	border: 1px dashed #ccc;
	padding: 20px;
	margin: 50px auto;
}

#column-left #column-index ul{
	margin-top: 20px;
}

#column-left #column-index li{
	list-style-type: decimal;
	margin-bottom: 10px;
	margin-left: 20px;
	line-height: 1.6;
}

#column-left section{
	text-align: center;
}

#column-left section h3{
	font-size: 24px;
	border-bottom: 1px solid #a12e44;
	color: #a12e44;
	margin-top: 50px;
	margin-bottom: 30px;
	padding-top: 60px;
	padding-bottom: 5px;
	text-align: left;
	line-height: 1.6;
}

#column-left section h3:before{
	content:'■';
}

#column-left section h4{
	font-weight: 400;
	color: #000;
	background-color: #f9f6e7;
	text-align: left;
	font-size: 20px;
	margin-bottom: 20px;
	margin-top: 40px;
	padding: 10px;
}

#column-left section h5{
	text-align: left;
	margin-bottom: 30px;
	font-size: 20px;
	border-top: 3px solid #e8e8e8;
	border-bottom: 3px solid #e8e8e8;
	padding: 10px;
}

#column-left section img{
	margin-bottom: 30px;
}

#column-left section p{
	text-align: left;
	line-height: 1.6;
}

#column-left section img.floatright{
	float: right;
	margin-left: 30px;
}

#column-left section img.floatleft{
	float: left;
	margin-right: 30px;
}

#column-left section p{
	margin-bottom: 20px;
}

#column-left #column-pagenation-detail{
	margin-top: 50px;
	text-align: center;
}

#column-left #column-pagenation-detail a{
	border: 1px solid #ccc;
	border-radius: 20px;
	padding: 10px 40px;
	margin-right: 20px;
}

#column-left #column-pagenation-detail a:last-child{
	margin-right: 0;
}

#column-left ul{
	text-align: left;
	margin: 20px;
}

#column-left li{
	list-style: disc;
	margin-bottom: 10px;
}

#column-left table{
	text-align: left;
	margin-top: 20px;
	margin-bottom: 80px;
}

#column-left tr{
	margin-bottom: 10px;
}

#column-left th{
	width: 30%;
	padding: 10px;
	border: 1px solid #000;
	background-color: #e8e8e8;
	line-height: 1.6;
}

#column-left td{
	width: 70%;
	padding: 10px;
	border: 1px solid #000;
	line-height: 1.6;
}

#column-left table.throwspan td{
	width: auto;
}

#column-left .bgblue{
	background-color: #cfe2f3;
}

#column-left li.li-numb{
	list-style: decimal;
}

#column-left dl{
	text-align: left;
	line-height: 1.6;
}

#column-left dt{
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
	display: inline-block;
}

#column-left dd{
	margin-bottom: 30px;
}

p.u-mt50{
	text-decoration: underline;
	margin-top: 50px;
}

.table-wrap-x{
	overflow-x: scroll;
}

#column-left .table-wrap-x table{
	min-width: 820px;
	white-space: nowrap;
	border-collapse: collapse;
}

@media screen and (max-width:640px){/*max-widthは640.css参照*/
	.topImageColumn{
		background-color: #FFF;
		background-image: url(img/topimage_column_sp.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position-x: center; 
		height: 400px;
		margin: 0 auto;
		width: 100%;
		position: relative;
	}
	
	.topImageColumn h1{
		position: absolute;
		top: 15%;
		left: 8%;
		font-size: 50px;
		font-weight: initial;
	}

	.topImageColumn p{
		position: absolute;
		top: 32%;
		left: 17%;
		line-height: 1.6;
	}
	
	#ColumnInner,#ColumnInner #column-left{
		margin-right: 0;
		display: initial;
	}
	
	#ColumnInner #column-list{
		width: 92%;
		padding-left: 4%;
		padding-right: 4%;
	}
	
	#ColumnInner #column-left .column-item{
		width: 100%;
		margin-right: 0;
		padding-bottom: 30px;
		border-bottom: 1px #ccc dashed;
		margin-bottom: 30px;
	}
	
	#ColumnInner .column-thum{
		margin: 10px auto;
	}
	
	#ColumnInner .column-thum img{
		 width: 100%;	 
	}
	
	#ColumnInner p.onSmt{
		right: initial;
		position: initial;
		text-align: center;
		background-color: #a12e44;
		padding: 5px 15px;
		width: fit-content;
	}

	#ColumnInner p.onSmt a{
		color: #fff;
	}
	
	#ColumnInner h2{
		margin-top: 15px;
	}
	
	.column-timestamp{
		text-align: right;
	}
	
	#ColumnInner #column-pagenation{
		text-align: center;
	}
	
	#ColumnInner #bnr-columnleft{
		width: 90%;
		margin: 0 auto 30px auto;
	}
	
	#ColumnInner #bnr-columnleft img{
		width: 100%;
	}
	
	#ColumnInner #column-right{
		width: 96%;
		padding-left: 2%;
		padding-right: 2%;
	}
	
	#bnr-column-spmenu{
		width: 90%;
		margin: 10px auto;
	}
	
	#bnr-columnfooter{
		width: 90%;
		margin: 40px auto 0 auto;
	}
	
	#bnr-column-spmenu img,
	#bnr-columnfooter img{
		width: 100%;
	}
	
	/*　記事詳細ページ */
	.topImageColumnDetail{
		height: 100px;
	}

	.topImageColumnDetail h1{
		line-height: 100px;
		font-size: 35px;
	}
	
	#contentBoxColumn.pt30{
		padding-top: 30px;
	}
	
	#column-left #column-article{
		width: 92%;
		padding-left: 2%;
		padding-right: 2%;
		margin: 0 auto 40px auto;
	}

	#column-left #ttl-sub{
		display: initial;
		margin-bottom: 20px;
	}
	
	#ColumnInner #column-article h2{
		font-size: 20px;
		padding-bottom: 20px;
		margin-bottom: 0;
	}
	
	#column-left section h3{
		margin-top: 0;
	}
	
	#column-left section img{	
		width: 90%;
	}
	
	#column-left section img.floatright,
	#column-left section img.floatleft{
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
	
	#column-left #column-pagenation-detail a{
		display: block;
		width: 70%;
		margin: 0 auto 20px auto;
	}
	
	#column-left #column-pagenation-detail a:last-child{
		margin-right: auto;
	}
	
}