@charset "utf-8";
/**
 * ベースデザイン
 */
/* main visual and h2 and time-stamp */
#main-visual {
	margin:0 auto 30px auto;
	display: flex;
	flex-direction: column;
}
h2{
	font-optical-sizing: auto;
	font-style: normal;
}
@media screen amd (min-widh:641px) and (max-width:1000px){
	#main-visual {
		width:100%;
	}
}
@media screen and (max-width:640px){
	#main-visual {
		width:100%;
	}
}
/* index  */
#index-list ol{
	list-style:none;
	counter-reset:indexNumber 0;
	padding-bottom:0.1px;

}
#index-list ol > li{
	position:relative;

}
#index-list ol > li:before {
	display:inline-flex;
	justify-content:center;
	align-items:center;
}
#index-list a{
	transition:0.3s;
}

/* article  */
/* editorによるfontawsomeの登録は を入れる必要がある。 が作る高さをline-heightで抑制する */
i[class*=fa]{
	line-height:0;
}
article{
	font-size:16px;
}

article > section{
	margin:0 auto;
}
article > section[id^=no]{
	counter-increment: sec-number 1;
}
article h3 {
	box-sizing:border-box;
	display:block;
	font-optical-sizing: auto;
	font-style: normal;
}
article > section h3:before {
	font-style: normal;
}
article  h4 {
	box-sizing:border-box;
	display:block;
}
article picture:not(.main-image) {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
article [id^=no] ol.padleft0,
article [id^=no] ul.padleft0{
	padding-left:0;
}
/* テーブルの周囲にdivで囲む時のclass　自動的にオーバーフローがかかる */
article .tabe-overflow {
	width:100%;
	overflow-x:auto;
}
/* ナンバリング時、ナンバーの幅でテキストをインデントする */
article .numbering {
	position:relative;
	display:flex;
	align-items:baseline;
}
article .numbering > span:first-child {
	display:flex;
	justify-content:center;
	text-align:center;
	background-color:;
	white-space:nowrap;
}
article .numbering > span:last-child {
	margin-left:5px;
}


/* recommend in articl  */
.look-recomend {
	display:flex;
	flex-direction:column;
	padding:10px;
	background-color:#ecf5e9;
}
.look-recomend .tit{
	display:flex;
	padding:10px;
	border-bottom:1px solid #4eb934;
}
.look-recomend > span{
	padding:10px;
}
.look-more a{
	text-decoration:underline;
	text-underline-offset:4px;
}

/* new column list */
#new-column-list {
	display:flex;
	flex-wrap:wrap;
	background: #f6f6f6;
	padding-top:20px;
}
#new-column-list h2{
	width:100%;
	background: linear-gradient(-45deg, #141414, #62774a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	font-size:22px;
	letter-spacing:3px;
}
#new-column-list .column{
	display:flex;
	flex-direction:column;
	transition:0.3s;
	text-decoration:none;
	color:#000;
}
#new-column-list .column:hover{
	opacity:0.7;
}
#new-column-list img{
	display:block;
	margin:0 auto 10px auto;
}
#new-column-list .column-tit{
	display:block;
	flex-grow:1;
	font-size:14px;
}
#new-column-list .published{
	font-size:12px;
}
#new-column-list .column-btn{
	width:100%;
}
#new-column-list .column-btn {
	text-align:center;
}
#new-column-list .column-btn a{
	display:inline-block;
	background-color:#292829;
	color:#FFF;
	border-radius:50px;
	text-decoration:none;
	transition:.3s;
}
#new-column-list .column-btn a:hover{
	background-color:#696969;
}
#new-column-list .column-btn span{
	position:relative;

}
#new-column-list .column-btn span:before{
	position:absolute;

	display:block;
	content:'';
	width:7px;
	height:7px;
	border-top:2px solid #FFF;
	border-right:2px solid #FFF;
	margin:auto;
	top:-3px;
	bottom:0;
	left:-15px;
	transform:rotate(45deg);
}

@media screen and (min-width:641px){
	#new-column-list{
		padding-bottom: 40px;
	}
	#new-column-list .column-btn a {
		padding: var(--btn-top-bottom-pc);
	}
}
@media screen and (min-width:1201px){
	#new-column-list {
		padding-left:calc((100% - 1200px) / 2);
		padding-right:calc((100% - 1200px) / 2);
		gap:20px;
	}
	#new-column-list .column{
		width:calc(100% / 5 - 16px);
	}
}
@media screen and (min-width:641px) and (max-width:1200px){
	#new-column-list {
		padding-left:10px;
		padding-right:10px;
		gap:15px;
		width:100%;
	}
	#new-column-list .column{
		width:calc(100% / 5 - 12px);
	}
}
@media screen and (max-width:640px){
	#new-column-list {
		padding-left:10px;
		padding-right:10px;
		gap:20px;
		width:100%;
		padding-bottom: 30px;
	}
	#new-column-list .column{
		width:calc(100% / 2 - 10px);
	}
	#new-column-list .column-btn a {
		padding: var(--btn-top-bottom-sp);
	}
}