@charset "utf-8";

/* ======================================================
 * case_sp.css
 * ------------------------------------------------------
 * @media only screen and (max-width: 767px)
====================================================== */

@media screen and (max-width: 767px) {
	
	.mt60 { margin-top: 60px; }
	
	.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

	.calendar_contents { 
		color: #333; 
		background-color: #8dc166;
		margin-bottom: -40px;
		overflow: hidden;
	}
	.calendar_inner {
		position: relative;
		padding: 20px 15px;
		width: 100%;
		max-width: 767px;
		margin: 0 auto;
		box-sizing: border-box;
	}
	span.inlineB { display: inline-block; }
	
	.flex_cal, .flex_cal2 {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	
	justify-content: space-between;
		flex-wrap:wrap;
		gap:30px;
		position: relative;
	width: 100%;
	}
	.flex_cal2 {
	align-items: flex-end;
	}

.school_size, .Back_imgGreen, .Back_imgGreen02 { 
		position: relative; 
		width: 46%;
		z-index: 0;
}
	.school_size a, .school_size img, .Back_imgGreen img, .Back_imgGreen02 img { 
		display: block;
		position: relative; /* 擬似要素の基準にする */
  width: 100%;
  height: 100%;
	}

.school_size img, .Back_imgGreen img, .Back_imgGreen02 img { 
	width: 100%; 
	border-radius: 20px;
	position: relative; 
	top:0;
}
.school_size img:hover { 
	top:-5px;
	transition:0.3s;
}
	.baseP_01, .baseP_02, .baseP_03, .baseP_04, .baseP_05, .baseP_06 {
		position: relative;
		width: 100%;
	}
	.baseP_01 p, .baseP_02 p, .baseP_03 p, .baseP_04 p, .baseP_05 p, .baseP_06 p { 
		font-size: 1.2rem; 
		line-height: 1.5em;
	}
	
	.baseP_02 { margin-top: 40px; }
	.baseP_03 { margin-top: 20%; margin-left: 15%; } 
	.baseP_05 { margin-bottom: 25%; }
	.baseP_06 { margin: 20% 0 40% 20%;; }
	
	.txt_R { text-align: right; }
	
.school_size a.p-01::before {
		content: "";
  position: absolute;
	left: -70%;
	bottom: -40%;
  width: 100%; /* 親要素の幅いっぱいに広げる */
  height: 100%; /* 上半分だけを色付ける */
  background-color: #a4d8da; /* 色付けたい部分の色 */
	border-radius: 20px;
	cursor: auto;
	z-index: -2;
	}
.school_size a.p-02::before {
		content: "";
  position: absolute;
	left: 20%;
	top: -75%;
  width: 100%; 
  height: 100%; 
  background-color: #c4d97a;
	border-radius: 20px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	cursor: auto;
	z-index: -2;
	}
.school_size a.p-03::before {
		content: "";
  position: absolute;
	left: 50%;
	top: -25%;
  width: 100%; /* 親要素の幅いっぱいに広げる */
  height: 100%; /* 上半分だけを色付ける */
  background-color: #a4d8da; /* 色付けたい部分の色 */
	border-radius: 20px;
	cursor: auto;
	z-index: -2;
	}
.school_size a.p-04::before {
	content: "";
  position: absolute;
	left: -50%;
	top: -40%;
  width: 100%; /* 親要素の幅いっぱいに広げる */
  height: 100%; /* 上半分だけを色付ける */
  background-color: #c4d97a; /* 色付けたい部分の色 */
	border-radius: 20px;
	cursor: auto;
	z-index: -2;
	}/*
.school_size a.p-05::before {
	content: "";
  position: absolute;
	left: 50%;
	bottom: -140%;
  width: 100%; 
  height: 100%; 
  background-color: #a4d8da; 
	border-radius: 20px;
	cursor: auto;
	z-index: -2;
	}*/
	
.Back_imgGreen {
	content: "";
  position: absolute;
	right: -10%;
	bottom: -4%;
	z-index: 3;
	}
	.Back_imgGreen02 {
	content: "";
  position: absolute;
	right: 30%;
	top: 97%;
	z-index: 2;
	}
	
	.school_size a.p-06::before {
	content: "";
  position: absolute;
	left: 35%;
	top: -25%;
  width: 100%; /* 親要素の幅いっぱいに広げる */
  height: 100%; /* 上半分だけを色付ける */
  background-color: #c4d97a; /* 色付けたい部分の色 */
	border-radius: 20px;
	cursor: auto;
	z-index: -2;
	}
	
	.cal26 {
		position: relative;
		width: 100%;
		max-width: 767px;
	}
	
	.tit_calendar {
		font-family: "Albert Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
		font-size: 9rem;
		letter-spacing: 5px;
		line-height: 1em;
		color: #fff;
		margin-top: 10%;
	}
	.tit_calendar span {
		font-weight: 700;
	}
	.copy { margin-bottom: 60px; }
	
	.school_Set a { text-decoration: none; }
	

	.spOnly, .minsp550 { display: block!important; }
	.pcOnly_549, .pcOnly, .spOnly_549  { display: none!important; }
}
@media screen and (max-width:549px) {
	.spOnly_549 { display: block!important; }
	.minsp550 { display: none!important; }
		
		.flex_cal, .flex_cal2 {
	display: block;
			width: 100%;
			margin: 0 auto;
	}
		.school_size, .Back_imgGreen, .Back_imgGreen02 { 
		width: 80%;
			margin: 0 auto;
}
		.school_size a.p-02::before, .school_size a.p-03::before  {
	left: 20%;
	top: -20%;
  width: 100%; 
  height: 100%; 
	border-radius: 20px;
	}
	
	.school_size a.p-04::before {
	left: -50%;
	top: -25%;
  width: 100%; /* 親要素の幅いっぱいに広げる */
  height: 100%; /* 上半分だけを色付ける */
  background-color: #c4d97a; /* 色付けたい部分の色 */
	border-radius: 20px;
	cursor: auto;
	z-index: -2;
	}
	
	.school_size a.p-06::before {
	left: 35%;
	top: -25%;
  width: 100%; /* 親要素の幅いっぱいに広げる */
  height: 100%; /* 上半分だけを色付ける */
  background-color: #c4d97a; /* 色付けたい部分の色 */
	border-radius: 20px;
	cursor: auto;
	z-index: -2;
	}
		
	.baseP_01 { margin-left: -10%!important; }
	.baseP_02 { margin-left: 10%!important; margin-top: 30%; }
	.baseP_03 { margin-left: -10%!important; margin-top: 25%; }
	.baseP_04, .baseP_06 { margin-left: -10%!important; }
	.baseP_05 { margin-left: 10%!important; margin-top: 10%; }
	
	.cal26 { max-width: 549px; margin-bottom: 35%; }
	
	.tit_calendar {
		font-size: 6rem;
		line-height: 1.2em;
		letter-spacing: 3px;
	}
	.tit_calendar span {
		font-weight: 700;
		font-size: 7rem;
	}
	.Back_imgGreen {
	right: -20%;
	top: 96%;
	z-index: 3;
	}
	.Back_imgGreen02 {
	left: 10%;
	top: 98%;
	z-index: 2;
	}
}