/*---column.css---*/

/** -------------------------------------------
container
-----------------------------------------------**/
#container{
	padding-top:120px;
}

.block{
	padding-top:0;
}

h1{
	position: relative;
	display: block;
	margin:0 0 0.5em 0;
	padding:0;
	font-size: 2.8rem;
}
h1 span.bg{
	width: 100%;
	
}
h1 span.bg img{
	display: block;
	width: 100%;
	min-height: 150px;
	object-fit: cover;
}
h1 span.title{
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	right: 0;
	left: 0;
	display: flex;
	width: fit-content;
	margin:0 auto;
	padding:0.1em 0.2em;
	background-color: rgba(255, 255, 255, 0.9);
	color:#251c57;
}
h1.columntitle{
	font-size: 2rem;
}
h1.columntitle .title{
	width:fit-content;
	max-width: 80%;
}
h2{
	font-size: 1.5rem;
	text-align: left;
	padding:0 0 0 0;
	margin:0 0 3rem 0;
}
h3{
	font-size: 1.15rem;
	text-align: left;
	padding:0;
	margin:0 0 2rem 0;
}


.contents{
	width:76.5%;
	margin:0 auto;
}
.columnList{
	list-style: none;
	margin:0 0 5rem 0;
	padding:3rem 0 0 0;
}
.columnList > li{
	padding:0.7rem 1rem;
	border-bottom:1px solid #CCCCCC;
}
.columnList .columntitle a{
	color:#3578E7;	
}
.columnList .categoly{
	font-size: 0.89rem;
}
.tagList{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding:0;
}
.tagList li{
	margin-right: 1em;
	color:#353535;
	font-size: 0.89rem;
}
.tagList li a{
	color:#353535;
	text-decoration: none;
}

.breadcrumbs{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin:0 0 4rem 0;
	padding:0 5%;
	list-style: none;
}
.breadcrumbs li{
	margin-right: 0.5em;
	font-size: 0.89rem;
}
.breadcrumbs li a{
	color:#3578E7;
}
.breadcrumbs li::after{
	content: '＞';
	margin-left: 0.5em;
	text-decoration: none;
}
.breadcrumbs li:last-child::after{
	display: none;
}

.columntext p{
	margin-bottom:3rem;

}
.columntext p.img{
	width: 70%;
	margin: 0 auto 3rem;
}

.columntext p.img img{
	display: block;
	width: 100%;
}

.columntext p a{
	color:#3578E7;
}

.viewall,
.gotoindex{
	text-align: center;
	margin-bottom: 3rem;
}
.viewall{
	margin-top:-2rem;
}
.viewall a,
.gotoindex a{
	position: relative;
	color:#3578E7;
	text-decoration: none;
}
.gotoindex a::before{
	content: '';
	display: inline-block;
	width: 1em;
	height: 0.9em;
	background-image: url(../column/images/icon-arrow.png);
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: -0.1em;
	margin-right: 0;
}


table {
  border-collapse: collapse;  /*separate*/
}

table th {
  text-align: center;
  padding: 10px;/*上下左右10pxずつ*/
  border: solid 1px black !important;
}


table td {
  padding: 3px 10px;
  border: solid 1px black !important;
}


.tdL {
  padding: 3px 10px;/*上下3pxで左右10px*/
  border: solid 1px black;
  width: 20%;
}

.tdR {
  padding: 3px 10px;/*上下3pxで左右10px*/
  border: solid 1px black;
  width: 80%;
}

.tdM {
  padding: 3px 10px;/*上下3pxで左右10px*/
  border: solid 1px black;
  width: 40%;
}


.t_of_contents{
  color: #251c57; /*文字色を#333に設定*/
  font-size:17px;  /*フォントの大きさを17pxに設定*/
  margin:0 auto;  /*目次の位置を指定*/
  border-top: solid #251c57 3px;
  border-bottom: solid #251c57 3px;
}

.t_of_contents span{
  display:block;
  text-align:center;
  color: #251c57;
  font-weight: bold; /*フォントを太字に設定*/
  font-size: 25px;
  padding: 8px;
}

.t_of_contents a{
  color: #251c57; /*文字色を#333に設定*/
  text-decoration: none; /*文字の装飾を無効化*/
}

.t_of_contents li{
  list-style: none; /*リストのスタイルを無効化*/
  padding-bottom: 5px; /*要素のbottom（下）に余白を5pxに設定*/
}



@media screen and (max-width:630px){
	h1{
		font-size: 2rem;
		letter-spacing: 0.2vw;
	}
	h1.columntitle .title{
		font-size: 1.3rem;
	}
	h2{
		font-size: 1.2rem;
	}
	h3{
		font-size: 1.1rem;
	}
	#container{
		padding-top:80px;
	}

	.columntext p.img{
		width: 100%;
	}
}