/*原作*/
.original .contentsBlock h2, .original #read {
font-family: "zen-maru-gothic", sans-serif;
font-weight: 700;
font-style: normal;
text-align: center;
}
.original #read { position: relative; font-weight: 600; color: #9E4FD3;}
.publisher {font-weight: 400; font-size: 0.6em;}

.calligraphy span{ display: block; padding-top: 100%; padding-top: -webkit-calc(1000 / 710 * 100%); padding-top: calc(1000 / 710 * 100%);
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
position: relative;
margin: 0 ; height: 0;
border: solid 1px #ccc;
}
.calligraphy span img {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#calligraphyArea p {text-align: center; font-size:0.8em; padding-top: 5px;}

.commentArea {width: 100%; position: relative; background-repeat: no-repeat; background-position: center top;}
.commentArea .commentBlock { background-color: #FFFBD2;}

.commentBlock h4 {
	font-size: 1.6em;
	line-height: 1.0em;
	position: relative;
	padding-bottom: 15px;
text-align: center;}
.commentBlock h4 span.name { color: #00A0E8; padding: 0 5px 5px;}
.commentBlock h4 .small { font-size: 0.8em;}

.prof { line-height: 1.5em; font-size: 0.9em; background-position: center top; background-repeat: repeat-x; background-size: 8px 2px; background-image: url(../img/dotsline_blue.png);}

.deco.pic1 span { height:0; padding-top: -webkit-calc(110 / 90 * 100%); padding-top: calc(110 / 90 * 100%); }
.deco.pic2 span { height:0; padding-top: -webkit-calc(280 / 150 * 100%); padding-top: calc(280 / 150 * 100%); }

@media all and (min-width: 768px) {
	.originalBlock { padding: 0;}
	.original .contentsBlock h2 {font-size: 2.2em; line-height: 1.2em; padding-bottom: 20px; }
	.original #read { font-size: 1.4em; line-height: 1.8em; padding: 30px 0;}
	#calligraphyArea { width: 880px; margin:0 auto 10px; }
	.calligraphy {width: 450px; margin: 0 auto;}
	
	.commentArea  { background-image: url(../img/bg_comment.png?1); background-size: 100% 63px; padding: 63px 0 0px; }
	.commentArea .commentBlock { padding: 30px 0 45px;}
	.commentBlock .comment {}
	.commentBlock .comment:not(:last-child) { margin-bottom: 3em;}
	.commentBlock h4 {
        width: 880px;
        margin: 0 auto;
    }
	.commentBlock .txtArea p.txt {
        width: 880px;
        margin: 0 auto;
    }
	.prof { width: 880px; margin: 0 auto; padding: 1em 0.5em 0;}
	
	.deco.pic1 { position: absolute; top:80px; left:50%; margin-left: -390px; width: 90px;}
	.deco.pic2 { position: absolute; top:0px; left:50%; margin-left: 330px; width: 150px; }
}

@media all and (max-width: 767px) {
.originalBlock { padding:0;}
.original .contentsBlock h2 {font-size: 1.6em; line-height: 1.2em; padding-bottom: 15px; }
.original #read { font-size: 1.1em; line-height: 1.8em; padding:1em 0;}
#calligraphyArea { margin: 0 2% 2%;}
.calligraphy { width: 80%; max-width: 450px; margin: 0 auto 2%;}

	.commentArea  { background-image: url(../img/bg_comment_sp.png?1); background-size: 100% 24px; padding: 24px 0 0px; }
	.commentArea .commentBlock { padding:1em 0 2em;}
	.commentBlock .comment {}
	.commentBlock .comment:not(:last-child) { margin-bottom: 2em;}		
	.commentBlock h4 { font-size: 1.2em; text-align: center;}
	
	.prof {margin: 0 0.5em; padding: 0.8em 0.5em 0;}
	
	.deco.pic1 { position: absolute; top:25px; left:20px; width: 12%; }
	.deco.pic2 { position: absolute; top:0px; right:5px; width: 18%; }

}