/*はじめに*/

.introBlock h2 p {
padding-bottom: 1em;
text-align: center;
font-family: source-han-serif-japanese, serif;
font-weight: 700;
font-style: normal;
}
.phArea{
	background: -moz-linear-gradient(left, rgba(255,52,118,0.5), rgba(8,117,210,0.5));
	background: -webkit-linear-gradient(left, rgba(255,52,118,0.5), rgba(8,117,210,0.5));
	background: linear-gradient(to right, rgba(255,52,118,0.5), rgba(8,117,210,0.5));
}
.ph_cut {margin: 0;}

.intro2 .phArea{
  background: -moz-linear-gradient(left, rgba(220,107,145,1.0), rgba(107,168,206,1.0));
  background: -webkit-linear-gradient(left, rgba(220,107,145,1.0), rgba(107,168,206,1.0));
  background: linear-gradient(to right, rgba(220,107,145,1.0), rgba(107,168,206,1.0));
}


@media all and (min-width: 768px) {
	.introBlock { padding: 40px 30px;}
	.introBlock h2 { margin-bottom: 2em; }
	.introBlock h2 p {font-size: 1.5em; line-height: 1.8em;}
	.introBlock h2 p.read { font-size: 1.2em;}
	
	.phArea {width: 650px; padding: 15px; margin: 0 auto 1em;}
	.ph_cut, .ph_cut span {
    width: 650px;
    height: 826px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	
}
	.txtSm { font-size: 0.9em;}
	
	.intro2 .contentsBlock {padding: 15px!important;}
	.intro2 .contentsBlock .introBlock {background-color: rgba(255, 255, 255, 0.90); padding: 45px 0 20px; color: #000; margin-bottom: 30px;}
	.intro2 section.txtArea {padding: 20px 30px;}
	
	
}
@media all and (max-width: 767px) {
.introBlock { padding: 15px;}
.introBlock h2 {margin-bottom: 1em;}
.introBlock h2 p {font-size: 1.1em; line-height: 1.6em;}
.introBlock h2 p.read { font-size: 1.0em;}

.notes {font-size: 0.5em; line-height: 1.5em; }
.spacing {letter-spacing: -.2em;}
	
	.phArea {padding: 10px; margin: 0 auto;}
	
	.ph_cut span {
    height: 0;
    padding: 126.923% 0 0;
    position: relative;
}
	.txtSm { font-size: 0.8em;}
	.notes { line-height: 1.5em;}
	
	.intro2 .contentsBlock {padding: 8px!important;}
	.intro2 .contentsBlock .introBlock {background-color: rgba(255, 255, 255, 0.90); padding: 15px; color: #000; margin-bottom: 30px;}
	.introBlock h2 {margin-bottom: 0.5em; padding-top: 0.5em;}
	.intro2 section.txtArea {padding: 10px 0px;}

}



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

.commentArea .button {
	display: block; position: relative;
	background-clip: padding-box;
	border: 1px solid rgba(222, 221, 218, .4);
	padding:0px; margin: 0 auto;
	width: 280px; height: 70px;
	transition:0.8s;
	}

.commentArea .button span {
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../img/intro/btn_comment.png);
	text-indent: -9999px;
	width: 100%;height: 70px;
	
}
.commentArea .button:hover {
	background: -moz-linear-gradient(left, rgba(255,52,118,0.3), rgba(8,117,210,0.3));
	background: -webkit-linear-gradient(left, rgba(255,52,118,0.3), rgba(8,117,210,0.3));
	background: linear-gradient(to right, rgba(255,52,118,0.3), rgba(8,117,210,0.3));
}

.commentBlock h4 {
	background: -moz-linear-gradient(left, rgba(255,52,118,0.3), rgba(8,117,210,0.3));
	background: -webkit-linear-gradient(left, rgba(255,52,118,0.3), rgba(8,117,210,0.3));
	background: linear-gradient(to right, rgba(255,52,118,0.3), rgba(8,117,210,0.3));
	border-bottom: 4px solid rgba(255,52,118,0.75);
	border-image: linear-gradient(to right, rgba(255,52,118,0.75), rgba(8,117,210,0.75));
	border-image-slice: 1;
	font-family: source-han-serif-japanese, serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.6em; line-height: 1.5em; padding: 15px 30px;}
.commentBlock h4 .small { font-size: 0.8em;}

.intro2 .commentBlock h4 {
	background: -moz-linear-gradient(left, rgba(220,107,145,0.4), rgba(107,168,206,0.4));
	background: -webkit-linear-gradient(left, rgba(220,107,145,0.4), rgba(107,168,206,0.4));
	background: linear-gradient(to right, rgba(220,107,145,0.4), rgba(107,168,206,0.4));
	border-bottom: 4px solid rgba(220,107,145,0.9);
	border-image: linear-gradient(to right, rgba(220,107,145,0.9) 0%, rgba(107,168,206,0.9) 100%);
	border-image-slice: 1;
}


@media all and (min-width: 768px) {
	.commentArea .button { margin-bottom: 50px;}
	.commentBlock .comment { padding-bottom: 2em;}
	.commentBlock .txt { padding: 30px;}
	
	.intro2 .commentArea .button { margin-bottom: 30px;}
	.intro2 .commentBlock .comment:last-child { padding-bottom: 0em;}
	.intro2 .commentBlock h4 {margin-bottom: 10px;}
	.intro2 .commentBlock .txt { background-color: rgba(255, 255, 255, 0.90); color: #000;}
}

@media all and (max-width: 767px) {
	.commentArea .button { margin-bottom: 30px;}
	.commentBlock .comment { padding-bottom: 1em;}	
	.commentBlock .comment:last-child { padding-bottom: 0em;}	
	.commentBlock h4 { font-size: 1.3em; padding: 10px 15px;}
	.commentBlock .txt { padding: 15px;}
	
	.intro2 .commentBlock h4 {margin-bottom: 5px;}
	.intro2 .commentBlock .txt { background-color: rgba(255, 255, 255, 0.90); color: #000;}
}
@media all and (max-width: 350px) {
.commentArea .button {
width:95%;
}
}