@charset "utf-8";



/*◆◇◆以下はスマホ用のCSS◆◇◆*/
@media screen and (max-width : 501px){



#content {
    width: 90vw;
    margin: 40px auto 40px auto;
}



h2#h2_topics {
    width: 20vh;
    margin: 0px auto 8px auto;
}

hr#under_h2_topics {
    width: 60vw;
    height: 1px;
    border: none;
    background-color: #000000;
    margin: 0px auto 40px auto;
}



.article {
	width: 90vw;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
	background-color: #FFFFFF;
	padding-top: 25px;
	padding-bottom: 20px;
	border-radius: 6px 6px 6px 6px;
    border: 1px solid #000000;
}
.article_inner {
	width: 84vw;
	margin-right: auto;
	margin-left: auto;
}



p.article_date {
	font-size: 1.2rem;
	line-height: 12px;
	text-align: right;
	margin-bottom: 20px;
}

h3.article_title {
	font-size: 1.4rem;
	line-height: 20px;
	margin-bottom: 20px;
	font-weight: normal;
}

p.article_intro {
	font-size: 1.2rem;
	margin-bottom: 0px;
}
p.article_all {
	font-size: 1.2rem;
	margin-bottom: 0px;
}



p#read_more {
	width: 35vw;
	line-height: 40px;
	background-color: #828282;
	font-size: 1.4em;
	font-weight:bold;
	text-align: center;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
}
p#read_more a {
	color: #FFFFFF;
	text-decoration: none;
}



#pagebute {
	width: 90vw;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 60px;
	text-align: center;
	padding-top: 30px;
	font-size: 1.4em;
}

.current_page {
	background-color: #828282;
	padding: 10px 16px 10px 16px;
	margin: 0px 2px 0px 2px;
	border-radius: 5px 5px 5px 5px;
	color: #FFFFFF;
	font-weight: bold;
}

.link_page {
	background-color: #828282;
	padding: 10px 16px 10px 16px;
	margin: 0px 2px 0px 2px;
	border-radius: 5px 5px 5px 5px;
}
a.link_page {
	color: #FFFFFF;
	font-weight: bold;
}

.link_next {
	background-color: #828282;
	padding: 10px 16px 10px 16px;
	margin: 0px 2px 0px 2px;
	border-radius: 5px 5px 5px 5px;
}
a.link_next {
	color: #FFFFFF;
	font-weight: bold;
}

.link_before {
	background-color: #828282;
	padding: 10px 16px 10px 16px;
	margin: 0px 2px 0px 2px;
	border-radius: 5px 5px 5px 5px;
}
a.link_before {
	color: #FFFFFF;
	font-weight: bold;
}



}










/*◆◇◆以下はPC用のCSS◆◇◆*/
/*ビューエリアの最小幅がこのサイズより大きい場合に以下のスタイルを適用*/
@media screen and (min-width : 500px){



#content {
    width: 1248px;
    margin: 130px auto 130px auto;
}



h2#h2_topics {
    width: 300px;
    height: 36px;
    margin: 0px auto 14px auto;
}

hr#under_h2_topics {
    width: 800px;
    height: 1px;
    border: none;
    background-color: #000000;
    margin: 0px auto 130px auto;
}



.article {
	width: 933px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
	padding-top: 60px;
	padding-bottom: 80px;
	padding-left: 100px;
	padding-right: 100px;
	margin-bottom: 30px;
	border-radius: 6px 6px 6px 6px;
    border: 1px solid #000000;
}



p.article_date {
	font-size: 12px;
	line-height: 12px;
	text-align: right;
	margin-bottom: 25px;
}

h3.article_title {
	font-size: 18px;
	line-height: 26px;
	margin-bottom: 20px;
	font-weight: normal;
}

p.article_intro {
	font-size: 16px;
	line-height: 26px;
	margin-bottom: 0px;
}
p.article_all {
	font-size: 16px;
	line-height: 26px;
	margin-bottom: 0px;
}



p#read_more {
	width: 200px;
	height: 50px;
	background-color: #828282;
	text-align: center;
	line-height: 50px;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
	font-size: 16px;
	font-weight: bold;
}
p#read_more a {
	color: #FFFFFF;
	text-decoration: none;
}



#pagebute {
	width: 900px;
	margin-right: auto;
	margin-left: auto;
    margin-bottom: 130px;
	text-align: center;
	padding-top: 8px; /*各記事と同じクリアランスとするため追加*/
}

.current_page {
	background-color: #828282;
	padding: 10px 16px 10px 16px;
	margin: 0px 2px 0px 2px;
	border-radius: 5px 5px 5px 5px;
	color: #FFFFFF;
	font-weight: bold;
}

.link_page {
	background-color: #828282;
	padding: 10px 16px 10px 16px;
	margin: 0px 2px 0px 2px;
	border-radius: 5px 5px 5px 5px;
}
a.link_page {
	color: #FFFFFF;
	font-weight: bold;
}

.link_next {
	background-color: #828282;
	padding: 10px 16px 10px 16px;
	margin: 0px 2px 0px 2px;
	border-radius: 5px 5px 5px 5px;
}
a.link_next {
	color: #FFFFFF;
	font-weight: bold;
}

.link_before {
	background-color: #828282;
	padding: 10px 16px 10px 16px;
	margin: 0px 2px 0px 2px;
	border-radius: 5px 5px 5px 5px;
}
a.link_before {
	color: #FFFFFF;
	font-weight: bold;
}



}