@charset "utf-8";

:root {
  --f-family: "M PLUS Rounded 1c", sans-serif;
  --f-bold: 900;
  --main-color: #005FAF;
  --light-color: #fbc409;
}

#culture p, .tal{
	text-align:left;
}

#culture ol{
	max-width:700px;
	margin:auto;
	text-align:left;
}

#culture .bttn{
	width:80%;
	max-width:300px;
	text-align:center !important;
	margin:20px auto;
	display:block;
}
.flex{
	display:flex;
	justify-content: space-evenly;
}

@media screen and (max-width:768px) {
	.flex{
		display:inherit;
	}
}
#culture section{
	padding:50px 7%;
	text-align:center;
}

h1, h2, h3{
	font-family: var(--f-family);
}
#culture h2{
	font-size:3.5rem;
	font-weight: 800;
	color: var(--main-color);
	margin:0 0 50px 0px;
}

@media screen and (max-width:768px) {
	#culture h2{
		font-size:2.7rem;
	}
}
h2.mds {
  position: relative;
  padding: 10px;
  background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  border-radius: 7px;
}

h2.mds:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #ffebbe;
  width: 0;
  height: 0;
}
img.oneimg{
	width:80%;
	max-width:600px;
	margin:0 auto 30px auto;
}
#culture h3{
	font-size:2.6rem;
	margin:10px 0;
}
#culture{
	width:90%;
	max-width:1100px;
	margin-left:50px;
	background:#fff;
	font-size:18px;
}
@media screen and (max-width:768px) {
	#culture{
		width:100%;
		margin:0;
	}
}
#culture section#kv{
	background:url(/school/shinyurigaoka/img/culture/kv_bg_pc.jpg) no-repeat;

}

@media screen and (max-width:768px) {
	#culture section#kv{
	background:url(/school/shinyurigaoka/img/culture/kv_bg_sp.jpg) no-repeat;
	background-size: 100%;

}
}
#kv h1 img{
	max-width:440px;
	width:80%;
	margin-bottom:30px;
}
@media screen and (max-width:768px) {
	#kv h1 img{
	margin:30px 0 10px 0;
}
}
#kv p{
	font-family: var(--f-family);
	font-size:2.3rem;
	margin-bottom:50px;
}

#genre ul{
	display: flex;
    justify-content: space-around;
	flex-wrap: wrap;
}
@media screen and (max-width:768px) {
	#genre ul{
	display:inherit;
}
}
#genre ul.genre{
	margin-bottom:50px;
}
#genre ul.genre li{
	width:20%;
}
#genre ul.point li{
	width:25%;
}

@media screen and (max-width:768px) {
	#genre li{
	width:90% !important;
	margin:auto !important;
}
}
#genre ul.genre li img{
	width:150px;
}
#genre ul.slideli img{
	width:100%;
}




#support{
	background:var(--light-color);
}
#support h2 + div{
	display:flex;
	justify-content: space-evenly;
}
@media screen and (max-width:768px) {
	#support h2 + div{
		display:inherit}
}

#support h2 + div div{
	width:40%;
}
@media screen and (max-width:768px) {
	#support h2 + div div{
	width:90%;
	margin:auto;
}
#support h2 + div div img{
	margin-bottom:20px;
}
}
#info h2{
	font-size: 2.5rem;
    font-weight: bold;
    border-bottom: 1px solid;
	margin:50px 0;
	padding-bottom:10px;
}
 ul.slide {
	display: flex;
    flex-wrap: wrap;
	justify-content: center;
	margin-bottom:30px;
 }
 ul.slide li{
	width:30%;
	margin-bottom:20px;
}
 ul.slide li img{
	 width:90%;
 }
#info table{
	width:100%;
	max-width:700px;
	margin:0 auto 20px auto;
}
#info table th,
#info table td{
	border: 1px solid #ccc;
	padding:5px;
	align-content: center;
}
#info table th{
	background:#fff8e8;
}
#info table th.haed{
	background:#ffe59a;
}
#info table th.haed span{
	font-size:1.5rem;
	font-weight:normal;
}
#info .step {
	margin:30px 0;
}
#info .step li{
	background:#fff8e8;
    width: 20%;
    text-align: center;
    padding: 10px 0;
    border-radius: 5px;
}
#info .step li h4{
background: #ffe59a;
    width: 70%;
    margin: auto;
    border-radius: 20px;
}
#info .step li p{
	width:90%;
	margin:10px auto;
	font-size:1.6rem;
	text-align:center;
}
@media screen and (max-width:768px) {
	#info .step li{
		width:100%;
		margin-bottom:2rem;
	}	
	}
#info .step li {
  position: relative;
}

#info .step li::before,
#info .step li::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: -30px;
  width: 15px;
  height: 2px;
  border-radius: 9999px;
  background-color: #4668a1;
  transform-origin: calc(100%) 50%;
}
#info .step li:last-child::before,
#info .step li:last-child::after {
	display:none;
}

#info .step li::before {
  transform: rotate(45deg);
}

#info .step li::after {
  transform: rotate(-45deg);
}
@media screen and (max-width:768px) {
	
#info .step li::before,
#info .step li::after {
  content: "";
  position: absolute;
  top: 115%;
  right: calc(50% - 2px);
  width: 15px;
  height: 2px;
  border-radius: 9999px;
  background-color: #4668a1;
  transform-origin: calc(100%) 50%;
}
#info .step li:last-child::before,
#info .step li:last-child::after {
	display:none;
}

#info .step li::before {
  transform: rotate(132deg);
}

#info .step li::after {
  transform: rotate(45deg);
}	
	
}
#info .post_list.gallery > li:last-child{
	width:90%;
	max-width:600px;
}
#culture .btn{
	display: block;
    background:var(--light-color);
    max-width: 400px;
    margin: auto;
    padding: 20px;
    font-size: 2.6rem;
    border-radius: 5rem;
	color:#fff;
	font-weight:bold;
	font-family: var(--f-family);
}
#culture .btn:hover{
	opacity:0.7;
}
.kiyaku{
	border:1px solid #999;
	padding:10px;
	height:100px;
	overflow:scroll;
	margin-bottom:30px;
	text-align:left;
	font-size:1.2rem;
	
}
#culture + .banner_list{
	width:90%;
	max-width:1100px;
	margin-left:50px;
	background:#fff;
	font-size:18px;
}
@media screen and (max-width:768px) {
	#culture + .banner_list{
		width:100%;
		margin:0;
	}
}