/*はじめに*/
.about #contentsArea .contentsBlock {}
.about .contentsBlock h2, .about #read, .about .contentsBlock h3, .catchArea {
font-family: "sicprintemps", sans-serif;
font-weight: 800;
font-style: normal;
}
.about .contentsBlock h2 {text-align: center; line-height: 1.6em; }
.about #read {text-align: center;}
.about .contentsBlock h3 {color: #7A4D01; line-height: 1.6em; padding-bottom: 0.8em; text-align: center;}
.about .contentsBlock strong { font-size: 1.05em;}
.phArea { position: relative;}
.aboutBlock .phArea.about1 .ph_cut span {padding-top: -webkit-calc(707 / 1000 * 100%); padding-top: calc(707 / 1000 * 100%); z-index: 10;}
.aboutBlock .phArea.about2 .ph_cut span {padding-top: -webkit-calc(677 / 1000 * 100%); padding-top: calc(677 / 1000 * 100%); z-index: 10;}

@media all and (min-width: 768px) {
	.aboutBlock { padding: 0 0 25px;}
	.about .contentsBlock h2 {font-size: 1.8em; padding: 0px 0 30px; }
	.about .contentsBlock h3 {font-size: 1.45em; }
	.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 3em;}
	.aboutBlock .phArea::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:#DFD6C5;
    filter: blur(0px);
    transform: translateY(15px) translateX(15px) scale(1.00);
    mix-blend-mode: multiply;
    opacity: 0.8;
	box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.1);
}
	.aboutBlock .txtArea {width: 880px; margin: 0 auto 1em;}
	
	.txtSm { font-size: 0.9em;}
	
}
@media all and (max-width: 767px) {
.about .contentsBlock h2 { line-height: 1.6em; font-size: 1.2em; padding-bottom: 15px; }
.about .contentsBlock h3 {font-size: 1.2em; }
.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 2em;}
	.aboutBlock .phArea::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:#DFD6C5;
    filter: blur(0px);
    transform: translateY(10px) translateX(10px) scale(1.00);
    mix-blend-mode: multiply;
    opacity: 0.8;
	box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.1);
}
	.txtSm { font-size: 0.8em;}
	.notes { line-height: 1.5em;}

}
@media all and (max-width: 379px) {
	.about .contentsBlock h3 {font-size: 1.1em; }
}

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

.commentArea {width: 100%; position: relative;}
.commentArea .commentBlock .commentBox {
	border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    background-image:url(../img/bg_karte.jpg?2);
	background-repeat:repeat; background-position: center top;
	position: relative;}
.commentArea .commentBlock .commentBox .inner { background-color:#fff;}
.commentArea .commentBlock .commentBox .deco.clip span { height:0; padding-top: -webkit-calc(65 / 254 * 100%); padding-top: calc(65 / 254 * 100%); z-index: 100; }

.commentArea .commentBlock .comment:not(:last-child) { }
.commentBlock h4 {
	font-size: 1.6em;
	line-height: 1.0em;
	position: relative;
	display: inline-block;
	padding: 0 0 0 40px;
	margin-bottom: 0.5em;
	color: #000;}
.commentBlock h4:before {
  content: '';
  position: absolute;
  top: 50%; left:0;
  display: inline-block;
  width: 30px;
  height: 3px;
  background-color: #7A4D01;
}
.commentArea .commentBlock h4 .small { font-size: 0.8em;}

.commentArea .button{
    text-align: center;
    margin: 0 auto;
	padding:0;
	font-family: "sicprintemps", sans-serif;
	font-weight: 800;
	font-style: normal;
	color: #fff;
	font-size: 1.5em;
	transition:0.5s;
	background-color: #000;
	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  { padding: 0px 0 0px; }
	.commentArea .commentBlock {padding: 30px 30px 45px;}
	.commentArea .commentBlock .commentBox { padding: 30px 20px 20px; }
	.commentArea .commentBlock .commentBox .inner { padding:60px 0 40px; }
	.commentArea .commentBlock .commentBox .deco.clip { position: absolute; top:5px; left:50%; margin-left: -127px; width: 254px; }
	.commentArea .button { width: 560px; height: 70px;
	    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
	background-position:right 16px center;
	background-size: 28px 18px;}
	.commentArea .button span {padding-right: 20px;}
	.content { padding-top: 60px;}
	.commentArea .commentBlock .comment {width: 900px; 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  {  padding: 0px; }
	.commentArea .commentBlock { padding:1em 0;}
	.commentArea .commentBlock .commentBox { padding: 20px 3% 3%;
	border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
	}
	.commentArea .commentBlock .commentBox .inner {padding:45px 3% 25px;}
	.commentArea .commentBlock .commentBox .deco.clip { position: absolute; top:3px; left:50%; margin-left: -90px; width: 180px; }
	.commentArea .button {width: 95%; max-width: 370px; height: 52px;font-size: 1.2em;
	border-radius: 26px;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
	background-position:right 20px center;
	background-size: 20px 13px;}
	.commentArea .button span {padding-right: 15px;}

	.content {padding-top: 2em;}
	
	.commentArea .commentBlock .comment:not(:last-child) { margin-bottom: 1.5em;}		
	.commentArea .commentBlock h4 { font-size: 1.3em; padding: 0 0 0 25px;}
	.commentBlock h4:before {width: 20px;}
	.commentArea .commentBlock .txtArea p.txt:not(:last-child) { padding: 0 0 1.5em;}
}