/* CSS Document */
@import url("reset.css");
@import url("common.css");
@import url("styles.css");

/* H2
---------------------------------------------------------- */
#h2Hanger::after{ background-image: url("../img/curriculum/bg_h2.jpg");}


/* Difference
---------------------------------------------------------- */
.difference_item{
	padding: 30px;
	background-size: auto auto;
	background-color: rgba(255, 255, 255, 1);
	background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(86, 86, 152, 0.11) 10px, rgba(86, 86, 152, 0.11) 20px );
	border-radius: 10px;
}

.difference_item img{
	padding: 20px;
	background-color: #fff;
}

.difference_item figcaption{
	text-align: center;
}
.difference_item figcaption strong{
	display: block;
	padding: 10px;
	background-color: var(--mainColor);
	color: #fff;
	font-size: 1.3rem;	
	font-weight: 700;
}

.merit_hanger > div{
	display: -webkit-box;
	display: flex;
  -webkit-box-align: stretch;
				align-items: stretch;
  -webkit-box-pack: justify;
				justify-content: space-between;
	flex-wrap: wrap;
}

.merit_item{
	width: 48%;
	margin: 20px 0;
	padding: 20px;
	border-radius: 5px;
	border: 1px solid var(--mainColor);
}

.merit_item h4{
	margin: 0 0 15px 0;
	padding: 10px 0;
	border-bottom: 1px dotted var(--mainColor);
	border-radius: 0;
	background-color: inherit;
	font-size: 1.3rem;
}

@media screen and (max-width: 690px){
	.difference_item{ padding: 10px;}
	.difference_item img{ padding: 5px;}
	.difference_item figcaption strong{ font-size: 1rem;}
	.merit_item{ width: 100%;}
	.merit_item h4{ font-size: 1.2rem;}
}



/* Curriculum
---------------------------------------------------------- */
.study_menu .wp-block-button{ width: 100%;}
.study_menu .wp-block-button__link{
	width: 100%;
	min-width: inherit;
	margin: 0;
}



/* Special
---------------------------------------------------------- */
.sp_hanger{
	margin: 30px 0;
	padding: 30px;
	background-color: rgba(204,118,173,0.10);
	border-radius: 5px;
}

.sp_hanger h3{
	margin: 15px 0;
	padding: 0;
	text-align: left;
}
.sp_hanger h3::after{ display: none;}

.practice_hanger{
	width: 100vw;
	margin: 30px calc(50% - 50vw);
	padding: 30px 15px;
	background-color:hsla(0,0%,100%,1);
	background-image:
	radial-gradient(at 50% 100%, hsla(144,59%,89%,1) 0px, transparent 50%),
	radial-gradient(at 92% 13%, hsla(31,84%,90%,1) 0px, transparent 50%),
	radial-gradient(at 51% 53%, hsla(29,0%,100%,1) 0px, transparent 50%),
	radial-gradient(at 12% 87%, hsla(180,35%,84%,1) 0px, transparent 50%),
	radial-gradient(at 86% 85%, hsla(344,83%,92%,1) 0px, transparent 50%),
	radial-gradient(at 11% 14%, hsla(180,35%,84%,1) 0px, transparent 50%);
  background-attachment: fixed;
}

.practice_hanger > div{
	padding: 30px;
	background-color: #fff;
	border-radius: 5px;
}

.practice_hanger ul{
	-webkit-box-align: flex-start;
				align-items: flex-start;
}
.practice_hanger ul::after {
	content: "";
	display: block;
	width: calc(33% - 40px);
}
.practice_hanger ul li{ width: calc(33% - 40px);}

@media screen and (max-width: 690px){
	.practice_hanger > div{ padding: 10px;}
	.practice_hanger ul li{ width: calc(50% - 50px);}
}


/* Days
---------------------------------------------------------- */
.schedule_item{ padding: 20px;}

.schedule_item h4{
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	background-color: inherit;
	border-bottom: 1px dotted var(--mainColor);
	border-radius: 0;
	line-height: 1.1;
}
.schedule_item h4 small{ font-size: 1.0rem;}
.schedule_item p{ padding: 0;}

.schedule_hanger table th,
.schedule_hanger table td{
	padding: 5px !important;
}
.schedule_hanger table p{ font-size: 0.8rem !important;}

@media screen and (max-width: 690px){
	.schedule_item{ padding: 15px;}
}