/* =================================
	about CSS
================================= */

/*	copy
============================== */

.big1 {
	font-size:112.5%;
}
.big2 {
	font-size:125%;
}
.big3 {
	font-size:150%;
}

div.copy {
	position:relative;
	/* background-color:#e7e9ea; */
}
div.copy p {
	text-align:center;
}
div.copy p:not(:last-child) {
	margin-bottom:1.25em;
}
div.copy p b {
}
.pic-hasumi span, .pic-hasumi span img {
	display:block;
}
.pic-about span, .pic-about span img {
	display:block;
}
.pic-about span.lazy-done {
	background-repeat:no-repeat;
	-webkit-animation: fadeIn 700ms;
	animation: fadeIn 700ms;
}
@media all and (min-width: 768px) {
.big15 {
	font-size:125%;
}
div.copy {
	background-color:hsla(220,13%,91%,0.75);
	padding:30px 30px 30px 300px;
	margin-bottom:40px;
	-webkit-box-shadow:10px 10px 0 0 hsla(0,0%,0%,0.1);
	box-shadow:10px 10px 0 0 hsla(0,0%,0%,0.1);
}
div.copy p {
	font-size:100%;
	line-height:1.75;
}
.pic-hasumi {
	position:absolute;
	left:20px;
	bottom:0;
	width:280px;
}
.pic-hasumi span img {
	height:590px;
}
/*
.pic-about span, .pic-about span img {
	width:824px;
	height:536px;
}
.pic-about span.lazy-done {
	-webkit-box-shadow:10px 10px 0 0 #e61419;
	box-shadow:10px 10px 0 0 #e61419;
}
*/
.pic-about {
	display:none;
}
}
@media all and (max-width: 767px) {
.big15 {
	font-size:112.5%;
}
div.copy {
	margin-bottom:20px;
}
div.copy p {
	font-size:87.5%;
	line-height:1.6;
}
.pic-about span.lazy-done {
	-webkit-box-shadow:6px 6px 0 0 #e61419;
	box-shadow:6px 6px 0 0 #e61419;
}
.pic-about span {
	position:relative;
	height:0;
	background-size:cover;
	padding-top:65.0485436893204%;
}
.pic-about span img {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.pic-hasumi {
	display:none;
}
}

/*	comment
============================== */
article.comment {
	position:relative;
	background-color:hsla(0,0%,100%,0.25);
}
article.comment > header {
	background-image:url(../img/header_about.jpg);
	background-position:center center;
	color:#fff;
}
article.comment > header h2 {
	background-color:hsla(0,0%,0%,0.6);
	line-height:1.5;
}
article.comment > section.unit h3 {
	line-height:1.5;
	padding:0 0.75em;
	margin-bottom:1.5em;
	background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, hsla(6,100%,80%,0.25)), to(hsla(6,100%,80%,0.25)));
	background-image: linear-gradient(transparent 50%, hsla(6,100%,80%,0.25) 50%);
}
article.comment > section.unit section h4 {
	line-height:1.5;
	margin-bottom:0.75em;
	color:#c00;
}
article.comment > section.unit section h4:before {
	content:"Q. ";
}
@media all and (min-width: 768px) {
article.comment {
	padding:0 30px 30px;
	margin:0 50px 50px;
}
article.comment > section.unit:not(:last-child) {
	margin-bottom:30px;
}
article.comment header {
	margin:0 -30px 40px;
	-webkit-box-shadow:0 10px 0 0 hsla(0,0%,0%,0.07);
	box-shadow:0 10px 0 0 hsla(0,0%,0%,0.07);
}
article.comment header h2 {
	font-size:125%;
	padding:1em 1.5em;
}
article.comment > section.unit h3 {
	font-size:112.5%;
}
article.comment > section.unit section:not(:last-child) {
	margin-bottom:30px;
}
}
@media all and (max-width: 767px) {
article.comment > header {
	background-size:cover;
	-webkit-box-shadow:0 7px 0 0 hsla(0,0%,0%,0.07);
	box-shadow:0 7px 0 0 hsla(0,0%,0%,0.07);
}
article.comment {
	padding:0 12px 74px;
	margin:0 12px 20px;
}
article.comment > section.unit:not(:last-child) {
	margin-bottom:20px;
}
article.comment header {
	margin:0 -12px 24px;
}
article.comment header h2 {
	font-size:112.5%;
	padding:0.5em 1.5em;
}
article.comment > section.unit section:not(:last-child) {
	margin-bottom:20px;
}
article.comment > section.unit section h4 {
	font-size:87.5%;
}
}