/*はじめに*/

.intro h2.intro {background-color: rgba(214,245,255,0.75);
background-image: url(../img/intro/bg_intro.png); background-repeat: no-repeat; background-position: right bottom;}
.intro h2.intro p {
text-align: center;
font-weight: 900;
	color: #00418a;
}

.intro h2.intro .copyMain {background-image: url(../img/intro/underline.png); background-repeat: no-repeat; background-position: center bottom; background-size: 430px 33px; padding-bottom: 0px; display: block;}
.phArea{}
.ph_cut {margin: 0;}

.introBlock .read { font-weight: 700; color: #288048; font-size: 1.2em; text-align: center; line-height: 2.0em; padding: 0.5em 0;}


@media all and (min-width: 768px) {
	.introBlock { padding: 40px 40px;}
	.intro h2.intro {padding: 2em 0; }
	.intro h2.intro p {line-height: 1.8em; padding-bottom: 0.5em;}
	.intro h2.intro p.read { font-size: 1.2em;}
	
	.phArea {width: 444px; padding: 15px; margin: 0 auto 1em;}
	.ph_cut, .ph_cut span {
    width: 444px;
    height: 650px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	
}
	.txtSm { font-size: 0.9em;}
	
	
}
@media all and (max-width: 767px) {
.introBlock { padding: 15px;}
.intro h2.intro {padding: 1em 0.5em; background-size: 170px auto;}
.intro h2.intro p {line-height: 1.4em; padding-bottom: 0.4em;}
.intro h2.intro p.read { font-size: 1.0em;}
.intro h2.intro .copyMain {background-size: 330px auto; padding-bottom: 5px;}
.introBlock .read {font-size: 1.0em; line-height: 1.8em;}

.notes {font-size: 0.5em; line-height: 1.5em; }
.spacing {letter-spacing: -.2em;}
	
	.phArea {padding: 10px; margin: 0 auto; width: 80%;}
	
	.ph_cut span {
    height: 0;
    padding: 146.396% 0 0;
    position: relative;
}
	.txtSm { font-size: 0.8em;}
	.notes { line-height: 1.5em;}

}



/*	comment
============================== */
/*アコーディオン*/
.button {
  cursor: pointer;
}
.content {
  display: none;
}
.commentArea .button{
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto;
    width: 300px; height: 60px; display: block;
}
.commentArea .button::before{
    transform: skewX(-30deg);
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1;
	background-color: rgba(149,50,73,1);
	background: linear-gradient(0deg, rgba(185,152,56,1) 10%, rgba(212,180,71,1) 50%, rgba(185,152,56,1) 90%);
	box-shadow: 3px 3px 0px 0 rgba(0,0,0,0.2);
}

.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: 60px;
}
.commentArea .button:hover {filter: brightness(1.1);}

.commentBlock h4 {
	font-family: kinto-sans, sans-serif;
font-style: normal;
font-weight: 700;
	font-size: 1.8em; line-height: 1.5em; padding: 0px 5px 5px; margin-bottom: 5px; color: #00418a; border-bottom: 2px solid #00418a;}
.commentBlock h4 .small { font-size: 0.8em;}
.commentBlock dl dt { 
	font-family: kinto-sans, sans-serif;
	font-style: normal;
	font-weight: 700;
	color: #288048; font-size: 1.15em; line-height: 1.6em; padding-bottom: 0.3em;}
.commentBlock dl dd { line-height: 2.0em;}


@media all and (min-width: 768px) {
	.commentArea { margin-bottom: 2em;}
	.commentArea .button { margin-bottom: 25px;}
	.commentBlock { padding: 40px 40px 0;}
	.commentBlock .comment:not(:last-child) { padding-bottom: 3em;}
	.commentBlock .txt, .commentBlock dl { padding: 10px 0;}
}

@media all and (max-width: 767px) {
	.commentArea { margin-bottom: 1.5em;}
	.commentArea .button { height: 45px; margin-bottom: 0px;}
	.commentArea .button span {height: 45px;}
	.commentBlock { padding: 15px 15px 0;}
	.commentBlock .comment:not(:last-child) { padding-bottom: 2em;}		
	.commentBlock h4 { font-size: 1.5em; padding: 10px 0 0;}
	.commentBlock .txt, .commentBlock dl { padding:10px 0;}
	.commentBlock dl dt { 
		font-size: 1.1em; padding-bottom: 0.3em;}
	.commentBlock dl dd { font-size: 0.9em; line-height: 1.8em;}

}