/*	lower_header
============================== */
div.lower_header h1 span {
	background-image: url(../img/comment_h2.png);
}
@media all and (min-width: 768px) {
	div.lower_header h1 span {
		width: 400px;
	}
}
/*	content
============================== */
@media all and (min-width: 768px) {
	div.content {
		padding: 60px 110px 80px;
	}
}
/*	section
============================== */
section {
	background-color: #fff;
}
h2 {
  position: relative;
  padding-bottom: .5em;
  border-bottom: 4px solid #ccc;
}
h2::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #3498db;
}
p.pic {
	text-indent: 110%;
	overflow: hidden;
	white-space: nowrap;
	background-color: #fff;
}
@media all and (min-width: 768px) {
	section {
		padding: 20px;
		border-radius: 20px;
		box-shadow:2px 2px 15px 0px hsla(201, 86%, 51%, 0.4);
	}
	section:not(:last-child) {
		margin-bottom: 30px;
	}
	h2 {
	  font-size: 35px;
    margin-bottom: 20px;
	}
	p.pic {
		float: left;
		border-right: 20px solid #fff;
		border-bottom: 20px solid #fff;
	}
	p.pic span {
		background-size: cover;
	}
	p.pic,
	p.pic img {
		width: 200px;
		height: 250px;
	}
}
@media all and (max-width: 767px) {
	section {
		padding: 15px 10px;
		border-radius: 10px;
		box-shadow:2px 2px 7px 0px hsla(201, 86%, 51%, 0.4);
	}
	section:not(:last-child) {
		margin-bottom: 15px;
	}
	h2 {
	  font-size: 20px;
	  margin-bottom: 10px;
	}
	p.pic {
		margin: 0 auto 10px;
	}
	p.pic span {
		background-size: cover;
	}
	p.pic,
	p.pic img {
		width: 200px;
		height: 250px;
	}
}
