.blog {
  padding: 80px 0 100px;
  color: #222;
  text-align: center;
	background-color: #fff;
	font-family: "メイリオ", "Meiryo", sans-serif;
}

.blog .wrapper {
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
}

.blog h1 {
  display: inline-block;
  margin: 0 auto 40px;
  padding-bottom: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  border-bottom: 4px solid #0c2c58;
}

.blog article {
	width: 700px;
	display: flex;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 40px;
	padding: 40px 40px 35px;;
	text-align: left;
	border: 1px solid #041c5c;
	border-radius: 40px 0px 0px 0px;
  background-color: #fff;
}

.blog article p span{
  font-size: 0.85rem;
}

.blog article h2 {
  margin-bottom: 30px;
  padding-bottom: 12px;
  font-size: 1.15rem;
  line-height: 1.8em;
  border-bottom: 2px solid #18304c;
}

.blog article span p {
  line-height: 2.0em;
  font-size: 0.85rem;
}

.blog .hr a {
  display: inline-block;
  padding: 15px 60px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  box-shadow: 0 5px 0 #0c2c58;
	background-color: #081c5c;
	color: #fff;
}

.blog .hr a:hover {
  background-color: #173455;
}

/* --------レスポンシブ ここから -------- */
@media screen and (max-width: 767px) { /*ウィンドウ幅が767pxまでの場合に適用*/


.blog .tc_body {
	width: 87%;
	margin: 0 auto;
}

.tc_ttl {
	width: 87%;
	margin: 0 auto;
}

.blog {
	padding: 8% 0;
}

.blog article {
	width: 90%;
	padding: 3% 0;
	display: block;
}

.blog article h2 {
	padding: 0;
}

/* --------レスポンシブ ここまで -------- */