@charset "utf-8";
/* ==========================================================================
   header
========================================================================== */
#header{
	padding: 15px 0;
	background-color: #fff;
	border-bottom: 3px solid #7dcdf4;
}
#header .logoArea{
	width: 164px;
}

@media screen and (max-width: 767px){
	#header{
	padding: 10px 6%;
	}
	#header .logoArea{
		width: 135px;
	}
}

/* ==========================================================================
   ttl
========================================================================== */
.ttlCategory{
	margin: 25px auto 40px;
}
.ttlCategory .ttl{
	font-size: 28px;
}
.ttlCategory .ttl .subject{
	margin-left: 30px;
}
.ttlBgBlue span{
	font-size: 65%;
}

@media screen and (max-width: 767px){
	.ttlCategory{
		margin: 20px auto;
	}
	.ttlCategory .ttl{
		font-size: 24px;
		text-align: center;
	}
	.ttlCategory .ttl .subject{
		margin-left: 20px;
	}
}

/* ==========================================================================
   mtlListWrap
========================================================================== */
/* mtlEpencil */
#mtlListWrap #mtlEpencil{
	margin-bottom: 30px;
}
#mtlListWrap #mtlEpencil .link{
	position: relative;
}
#mtlListWrap #mtlEpencil .link::before{
	position: absolute;
	top: 50%;
	left: 20px;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin: 0;
}
#mtlListWrap #mtlEpencil .link span{
	display: block;
	font-size: 14px;
}

@media screen and (max-width: 767px){
	#mtlListWrap #mtlEpencil{
		display: block;
		font-size: 0;
	}
	#mtlListWrap #mtlEpencil .link{
		display: inline-block;
		width: calc(100% / 3);
		margin-top: 10px;
		padding: 2px 1% 22px;
		font-size: 15px;
	}
	#mtlListWrap #mtlEpencil .link:nth-child(-n+3){
		margin-top: 0;
	}
	#mtlListWrap #mtlEpencil .link::before{
		top: auto;
		bottom: 0;
		left: 50%;
		-webkit-transform: translateX(-50%);
		    -ms-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	#mtlListWrap #mtlEpencil .link span{
		margin-top: 3px;
		font-size: 12px;
	}
}

/* ==========================================================================
   mtlDtlWrap
========================================================================== */
/* ///// mtlDtl ///// */
#mtlDtlWrap .mtlDtl{
	margin-bottom: 60px;
}

/* ///// epencilWrap ///// */
#mtlDtlWrap .mtlDtl .epencilWrap{
	margin-bottom: 40px;
}

/* epImg */
#mtlDtlWrap .mtlDtl .epencilWrap .epImg{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: 15px;
}
#mtlDtlWrap .mtlDtl .epencilWrap .epImg img{
	display: block;
}

/* epSoundPlay */
#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay{
	max-width: 640px;
	margin: 0 auto;
	padding: 20px 30px;
}
#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .ttlBox{
	margin-bottom: 12px;
	text-align: center;
}
#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .ttlBox span{
	position: relative;
	padding-left: 32px;
}
#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .ttlBox span::before{
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background-image: url(/common_2019/img/icon/icon_pencil_blu.svg);
	background-repeat: no-repeat;
	background-size: contain;
}
#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .playBtn .btnOval{
	width: 215px;
}
#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .playBtn .btnOval::after{
	display: none;
}
#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .playBtn .btnPlay{
	margin-right: 20px;
}
#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .playBtn .btnPlay span,
#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .playBtn .btnStop span{
	position: relative;
	padding-left: 10px;
	color: #fff;
	font-weight: bold;
}
#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .playBtn .btnPlay span::before,
#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .playBtn .btnStop span::before{
	display: block;
	content: "";
	position: absolute;
	left: -12px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background-repeat: no-repeat;
	background-size: contain;
}
#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .playBtn .btnPlay span::before{
	background-image: url(/common_2019/img/icon/icon_play_wh.svg);
}
#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .playBtn .btnStop span::before{
	background-image: url(/common_2019/img/icon/icon_stop_wh.svg);
}
#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .annotation{
	text-align: center;
}

/* moreKyozai */
#mtlDtlWrap .mtlDtl .moreKyozai .accArea{
	margin-bottom: 10px;
}
#mtlDtlWrap .mtlDtl .moreKyozai .accBtn{
	padding: 20px 50px 20px 20px;
	color: #2263af;
	font-size: 22px;
	text-align: center;
}

@media screen and (max-width: 767px){
	/* ///// epencilWrap ///// */
	#mtlDtlWrap .mtlDtl .epencilWrap{
		margin-bottom: 30px;
	}

	/* epImg */
	#mtlDtlWrap .mtlDtl .epencilWrap .epImg img{
		width: 100%;
	}

	/* epSoundPlay */
	#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlaySp .btnOval{
		padding: 12px 10px;
		font-size: 16px;
	}
	#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlaySp .btnOval::after{
		display: none;
	}

	/* moreKyozai */
	#mtlDtlWrap .mtlDtl .moreKyozai .accBtn{
		padding: 10px 40px 10px 4%;
		font-size: 18px;
	}
}
@media screen and (max-width: 320px){
	/* epSoundPlay */
	#mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlaySp .btnOval{
		font-size: 14px;
	}
}

/* ==========================================================================
   btnWrap
========================================================================== */
.btnWrap{
	margin: 50px 0;
	text-align: center;
}
.btnWrap .btnOval{
	width: 240px;
}
.btnWrap .btnOval::after{
	display: none;
}

@media screen and (max-width: 767px){
	.btnWrap{
		margin: 50px auto;
	}
	.btnWrap .btnOval{
		width: 100%;
	}
}

/* ==========================================================================
   sp_zoom
========================================================================== */
/* ------------------------------
loading
------------------------------ */
#loading{
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 70%;
	max-width: 250px;
}
#loading img{
	width: 100%;
}
#loader-bg{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0.8;
	z-index: 150;
}

/* ------------------------------
その他の設定
------------------------------ */
#sp_zoom #mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay{
	margin-top: 20px;
	padding: 15px 4%;
}

#sp_zoom #mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .annotation{
	margin: 0 0 10px;
	font-size: 12px;
}

#sp_zoom #mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .playBtn{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
#sp_zoom #mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .playBtn .btnOval{
	width: 50%;
	padding: 10px;
}
#sp_zoom #mtlDtlWrap .mtlDtl .epencilWrap .epSoundPlay .playBtn .btnPlay{
	margin-right: 8px;
}

#sp_zoom #mtlDtlWrap .mtlDtl .epencilWrap .epImg{
	max-width: 640px;
	margin: 0 auto;
}