#contents {
}
#contents img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: auto;
}
#contents figure {
	text-align: center;
}

#title .h2Text {
    position: absolute;
    z-index: -10;
	top: -100%;
}
.f-itaric {
	-webkit-transform: skewX(-15deg);
    -moz-transform: skewX(-15deg);
    -o-transform: skewX(-15deg);
    transform: skewX(-15deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.26794919243112214, M21=0, M22=1, SizingMethod='auto expand')";

}
/*====================================================
     //ID #title
====================================================*/
#title {
}
#title .innerBox {
	align-items: center;
	height: 100%;
	justify-content: center;
	width: 94%;
}
#title .h2Box p {
	margin: 0;
	color: #fff;
	font-weight: bold;
	line-height: 1.3;
	letter-spacing: 2px;
}
big {
	font-size: 1.5em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
	#title {
		background: url(../img/djembe/titleBg-MOB.jpg) center;
		background-size: cover;
		height: calc(100vh - 88px);
		max-height: 600px;
		min-height: 500px;
	}
	#title .h2Box img {
		margin: 50px auto;
		width: 90%;
	}
	#title .h2Box p {
		font-size: 2.0rem;
		text-shadow: 3px 3px 0 #000, 2px 2px 0 #000, 0px 0px 1px #000;
	}
}

@media screen and (min-width:480px) and (max-width:768px) {
	#title {
		max-height: 900px;
	}
	#title .h2Box p {
		font-size: 2.4rem;
	}
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
	#title {
		background: url(../img/djembe/titleBg-PC.jpg) center;
		background-size: cover;
		height: calc(100vh - 88px);
		max-height: 940px;
		min-height: 650px;
	}
	#title .h2Box img {
		margin: 60px auto;
	}
	#title .h2Box p {
		font-size: 3.6rem;
		text-shadow: 3px 3px 0 #000;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
	#title {
		height: 80vh;
	}
	#title .h2Box p {
		font-size: 2.8rem;
	}
}

	

/*====================================================
     //id #about
====================================================*/
#about .aboutBox {
	margin: 30px 0;
}
#about .aboutBox .h4Box {
	text-align: center;
	font-weight: bold;
	position: relative;
/*	display: inline-block;*/
	padding: .3em 1em ;
	color: #fff;
	margin-bottom: 10px;
	line-height: 1.4;
	color: #ca0127;
	border-bottom: solid 5px;
}
#about .aboutBox .h4Box:before {
	position: absolute;
	content: '';
	width: 300%;
	height: calc(100% + 5px);
	top: 0;
	right: 100%;
	background: #ca0127;
}
#about .aboutDetail {
	border: solid 2px;
	border-color: #ca0127;
}
#about .aboutDetail h3 {
	color: #ca0127;
	margin-bottom: .5em;
	font-weight: bold;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
	#about .aboutBox-inner {
		display: block;
	}
	#about .aboutBox h4 {
		font-size: 1.8rem;
		letter-spacing: 1px;
		line-height: 1.2;
	}
	#about figure {
		width: 60%;
		margin: 0 auto 1em;
	}
	#about .aboutBox p {
		font-size: 1.5rem;
	}
	#about .aboutDetail .flexBox {
		display: block;
	}
	#about .aboutDetail h3 {
		font-size: 2.3rem;
	}
}


@media screen and (min-width:480px) and (max-width:768px) {
	#about .aboutBox h4 {
		font-size: 2.2rem;
	}
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
	#about .aboutBox {
		width: 85%;
	}
	#about .aboutBox h4 {
		font-size: 2.8rem;
		letter-spacing: 2px;
	}
	#about .aboutBox-inner {
		align-items: center;
/*		flex-direction: row-reverse*/
	}
	#about .aboutBox p {
		width: 60%;
		font-size: 1.7rem;
		margin: 0 0 0 1em;
	}
	#about .aboutBox figure {
		width: 40%;
	}
	#about .aboutBox:nth-child(even) {
		margin-left: 15%;
	}
	#about .aboutBox:nth-child(even) .h4Box:before {
		left: 100%;
	}
	#about .aboutDetail .flexBox {
		align-items: center;
	}
	#about .aboutDetail .txtBox {
		width: calc(100% - 320px);
	}
	#about .aboutDetail figure {
		width: 300px;
	}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
	#about .aboutBox {
		width: 100%;
		margin-left: 0 !important;
	}
	#about .aboutBox:nth-child(even) .aboutBox-inner {
		flex-direction: row-reverse;
	}
	#about .aboutBox:nth-child(even) p {
		margin: 0 1em 0 0 ;
	}
	
}


/*====================================================
     
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}