/*保護者用ページのCSS*/

.guardian_category{
	font-size: 32px;
	font-weight: bold;
	border-bottom: 3px dotted #000;
	text-align: center;
	margin-bottom: 55px;
}

.guardian_title{
	font-size:22px;
	border-bottom: 1px solid;
	margin-bottom: 30px;
}

.guardian_title .sub_category{
	margin-left: 30px;
}
.guardian_list{
	display: flex;
	align-items: flex-end;
	width: 100%;
	border-bottom: 1px solid #231815;
	margin: 0 12.5px;
	padding: 15px 10px;
}

.guardian_list li{
	box-flex:1;
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 16px;
	border: none;
	color: #040000;
	line-height: 1.3;
}

.guardian_list li.date{
	flex-basis: 25%;
}

.guardian_list li.category{
	flex-basis: 40%;
	font-size: 13px;
	color: #7F4F21;
	text-align: center;
}

.guardian_list li.title{
	flex-basis: 100%;
}

@media screen and (max-width: 750px) {
	.guardian_list{
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.guardian_list li.date{
		flex-basis: 100%;
		padding: 0;
		margin-bottom: 5px;
	}
	.guardian_list li.title{
		text-align: left;
		flex-basis: calc(12em);
		flex-shrink: 0;
	}
	.guardian_list li.category{
		text-align: left;
		margin-right: 10px;
		flex-basis: 10em;
		padding: 0.1em 0;
	}
}


/* ツミキに一部を保護者ページ用に上書き */
.tumiki.guardian_detail .title_main{
	border-bottom: solid 1px;
}


.tumiki.guardian_detail .image_triple li{
	position: relative;
}
.tumiki.guardian_detail .image_triple li img{
	position: absolute;
	top: 0;
	left: 0;
}
.tumiki.guardian_detail .image_triple li::before{
	display: block;
	content: "";
	padding-top: 100%;
}
.tumiki.guardian_detail .icon{
	position: relative;
}
.tumiki.guardian_detail .icon::before{
	content: "";
	display: inline-block;
	width: 21px;
	height: 15px;
	background-image: url(/img/common/movie_icon.png); 
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	margin-right: 5px;

}
/* モーダルボックス */
.overLayer{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba( 0 , 0 , 0 , .7 );
	display: none;
	z-index: 1000;
}

.overLayer .canvas{
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	width: 80%;	
	height: 80%;
	transform: translate(-50%, -50%);
	z-index: 1001;
}

.overLayer .canvas img{
	width: auto;
	height: auto;
	margin: auto;
	z-index: 1002;
	border: 7px solid #FFF;
}

.close_btn{
	position: absolute;
	top: -30px;
	right: 0;
	font-size: 150%;
	font-weight: bold;
	color: #FFF;
}