@charset "utf-8";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width: 100%;
}

/* モバイルレイアウト : 767 px およびそれ以下. */


#m_hdr ul {
	margin: auto;
	width: 93.714%;
	overflow: auto;
	margin-top: 30px;
}
#m_hdr ul li {
	float: left;
	width: 33.33%;
	height: 70px;
	position: relative;
}
#m_hdr ul li::before{
	content: '';
	display: block;
	width: 1px;
	height: 100%;
	background-color: #000;
	position: absolute;
	right: 0;
}
#m_hdr ul li:last-child::before{
	content: none;
}
#m_hdr ul li a{
	display: block;
	width: 100%;
	line-height: 2.5;
	position: absolute;
	bottom: 0;
	font-size: 12px;
}
#m_hdr ul li img{
	height: 30px;
}
#m_hdr ul li svg{
	font-size: 20px;
}
#article_media h1 {
	margin: 10% auto;
	width: 66%;
	clear: both;
	font-size: 24px;
}
#article_media .sub  {
	margin: 10% auto;
	width: 90%;
	line-height: 1.8;
}
.m_year ol{
	margin-bottom: 30px;
}

.m_year ol li {
	float: left;
	width: 33.33%;
}
.m_year ol li span,
.m_year ol li a{
	border: #000 1px solid;
	display: inherit;
    margin: 5px 10px;
    height: 30px;
    line-height: 2.2;
}
.m_year ol li span{
	background-color: #000;
	color: #fff;
}
.my_list  {
	overflow: auto;
	display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
}
.my_list div {
	width: 50%;
	height: 360px;
	font-size: 0.8em;
	line-height: 2em;
}
.my_list div ul li {
	list-style-position: inside;
	list-style-type: disc;
}
.my_list div p img {
	width: 70%;
	margin-bottom: 5px;
}
.my_list div .date {
	font-family: "Times New Roman", Times, serif;
	font-size: 1.5em;
	line-height: 2em;
}

.media_img{
	height: 160px;
	display: table-cell;
	vertical-align: middle;
	position: relative;
	padding: 0 5%;
}
.media_img span::before{
	content: "";
	display: block;
	border: #ccc 1px solid;
	width: 70%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}
	

.media_name{
	margin-bottom: 15px;
	margin-top: 10px;
	position: relative;
	padding: 0 10%;
	min-height: 30px;
	font-size: 0;
}
.media_name dt{
	position: relative;
	width: 15%;
	display: inline-block;
}
.media_name dd{
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	width: 65%;	
	display: inline-block;
}
.media_name dd small{
	font-family: "Times New Roman", Times, serif;
}
.media_name::after{
	content: '';
	width: 60%;
	height: 1px;
	background-color: #000;
	display: block;
	position: absolute;
	bottom: -5px;;
	left: 0;
	right: 0;
	margin: auto;
}
.media_name span{
	background: #000;
	display: inline-block;
	color: #fff;
	width: 26px;
	height: 26px;
	border-radius: 13px;
    font-size: 14px;
	position: relative;
	top: 8px;
}
.media_name span i{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	line-height: 2;
}

/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {
	

.my_list div {
	width: 25%;
	height: 360px;
	font-size: 0.8em;
	line-height: 2em;
}


	
}

/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

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


	#article_media {
		margin: 50px auto auto;
		max-width: 1080px;
	}

	#m_hdr ul {
		margin: auto;
		max-width: 657px;
		overflow: auto;
	}
	#m_hdr ul li {
		float: left;
	}
	#m_hdr ul li a{
		font-size: 16px;
	}
	#m_hdr ul li img{
		height: 25px;
	}
	#m_hdr ul li svg{
		font-size: 30px;
	}
	#article_media h1 {
		font-size: 28px;
		margin-bottom: 50px;
	}
	#article_media .sub {
		font-size: 18px;
		margin-top: 0;
	}
	.m_year ol{
		/* [disabled]padding: 0; */
		height: 60px;
		padding: 0px;
		background-color: #FFF;
		margin: 70px auto;
	}

	.m_year ol li {
		width: 14.25%;
	}
	.m_year ol li span, .m_year ol li a{
		height: 40px;
		line-height: 2.5;
		font-size: 16px;
	}
	.my_list div {
		max-width: 160px;
		height: 430px;
		font-size: 8pt;
		line-height: 2em;
		margin: 0px 28px;
	}
	.my_list div ul li {
		list-style-position: inside;
		list-style-type: disc;
	}

	.my_list div p img {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}
	.my_list div .date {
		font-family: "Times New Roman", Times, serif;
		font-size: 1.5em;
		line-height: 40px;
	}

	.media_img{
		height: 200px;
	}
	.media_img span::before{
		width: 100%;
	}
	.media_name{
		font-size: 14px;
		padding: 0;
	}
	.media_name::after{
		width: 80%;
		bottom: -8px;
		
	}

}