/*はじめに*/
.about #contentsArea .contentsBlock {}
.about .contentsBlock h2, .about #read, .about .contentsBlock h3, .catchArea {
font-family: "zen-maru-gothic", sans-serif;
font-style: normal;
font-weight: 700;
}
.about .contentsBlock h2 {color: #9E4FD3; line-height: 1.8em;text-align: center; }
.about #read {text-align: center;}
.about .contentsBlock h3 {color: #00A0E8; line-height: 1.6em; padding-bottom: 0.5em; text-align: center;}
.phArea { position: relative; z-index: 2; background-color: #fff;}
.aboutBlock .phArea .ph_cut span { padding-top: 66.7%;}
.deco.pic1 span { height:0; padding-top: -webkit-calc(240 / 300 * 100%); padding-top: calc(240 / 300 * 100%); }
.deco.pic2 span { height:0; padding-top: -webkit-calc(135 / 95 * 100%); padding-top: calc(135 / 95 * 100%); }


@media all and (min-width: 768px) {
	.aboutBlock { padding: 0 0 25px;}
	.about .contentsBlock h2 {font-size: 1.8em; padding: 10px 0 20px; }
	.about .contentsBlock h3 {font-size: 1.4em; }
	.about #read { font-size: 1.6em; line-height: 1.75em; padding-bottom: 30px; background-size: auto 42px;}
	.aboutBlock .wrap { padding-bottom: 3em;}
	.aboutBlock .phArea {width: 880px; margin: 0 auto 2em; padding: 10px;}
	.aboutBlock .phArea.about2 { width: 750px;}
	.aboutBlock .phArea .ph_cut, .aboutBlock .phArea .ph_cut span {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
	.aboutBlock .txtArea {width: 880px; margin: 0 auto 1em;}
	
	.txtSm { font-size: 0.9em;}
	
	.deco.pic1 { position: absolute; top:0px; left:50%; margin-left: -620px; width: 300px;}
	.deco.pic2 { position: absolute; top:40px; left:50%; margin-left: 425px; width: 95px; }
	
}
@media all and (max-width: 767px) {
.about .contentsBlock h2 {font-size: 1.1em; padding-bottom: 10px; }
.about .contentsBlock h3 {font-size: 1.1em; }
.about #read { font-size: 1em; line-height: 1.75em; padding:1px 0 1em; background-size: auto 28px;}
.notes {font-size: 0.5em; line-height: 1.5em; }
.spacing {letter-spacing: -.2em;}
	
	.aboutBlock .phArea {margin: 0 0.5em 1em; padding: 5px;}
	.aboutBlock .phArea.about2 {margin: 0 1.5em 1em;}
	.txtSm { font-size: 0.8em;}
	.notes { line-height: 1.5em;}
	
	.deco.pic1 { position: absolute; top:0px; left:-30px; width: 30%; }
	.deco.pic2 { position: absolute; top:25px; right:10px; width: 10%; }

}

/*	comment
============================== */
/*アコーディオン*/
.button {
  cursor: pointer;
}
.content {
  display: none;
}

.commentArea {width: 100%; position: relative; background-repeat: no-repeat; background-position: center top;}
.commentArea .commentBlock { background-color: #FFFBD2;}
.commentArea .commentBlock .comment:not(:last-child) { background-position: center bottom; background-repeat: repeat-x; background-size: 8px 2px; background-image: url(../img/dotsline_blue.png); }
.commentArea .commentBlock h4 {
	font-size: 1.6em;
	line-height: 1.0em;
	position: relative;
	padding-bottom: 15px;
text-align: center;}
.commentArea .commentBlock h4 span.name { color: #00A0E8; padding: 0 5px 5px;}
.commentArea .commentBlock h4 .small { font-size: 0.8em;}

.commentArea .button{
    text-align: center;
    margin: 0 auto;
	padding:0;
	font-family: "zen-maru-gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #47BEF4;
	font-size: 1.5em;
	transition:0.5s;
	background-color: #fff;
	background-image:  url(../img/btn_arrow.png);
	background-repeat: no-repeat;
	display: table;
}
.commentArea .button:hover {
filter: brightness(1.1);
}
.commentArea .button span {vertical-align: middle;display: table-cell; line-height: 1.3em;}


@media all and (min-width: 768px) {
	.commentArea  { background-image: url(../img/bg_comment.png?1); background-size: 100% 63px; padding: 63px 0 0px; }
	.commentArea .commentBlock { padding: 30px 0 45px;}
	.commentArea .button { width: 560px; height: 70px;
	    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
	box-shadow: 5px 5px 0px 0 #64C9F3;
	background-position:30px center;
	background-size: 17px 20px;}
	.commentArea .button span {padding-left: 20px;}
	.content { padding-top: 60px;}
	.commentArea .commentBlock .comment {width: 880px; margin: 0 auto;}
	.commentArea .commentBlock .comment:not(:last-child) { margin-bottom: 2em;}
	.commentArea .commentBlock .txtArea p.txt { padding: 0 0.5em 2em;}
}

@media all and (max-width: 767px) {
	.commentArea  { background-image: url(../img/bg_comment_sp.png?1); background-size: 100% 24px; padding: 24px 0 0px; }
	.commentArea .commentBlock { padding:1em 0 2em;}
	.commentArea .button {width: 95%; max-width: 370px; height: 48px;font-size: 1.2em;
	border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
	box-shadow: 3px 3px 0px 0 #64C9F3;
	background-position:20px center;
	background-size: 13px 15px;}
	.commentArea .button span {padding-left: 15px;}

	.content {padding-top: 2em;}
	
	.commentArea .commentBlock .comment:not(:last-child) { margin-bottom: 1.5em;}		
	.commentArea .commentBlock h4 { font-size: 1.2em; text-align: center;}
	.commentArea .commentBlock .txtArea p.txt { padding: 0 0.5em 1.5em;}
}