@charset "utf-8";
/* CSS Document */

/*-- フォーム -------------------------------------------------------------*/
@media screen and (max-width: 899px) {
	.ttlFlex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
	.ttl03 { text-align:left; font-size: 1.5em; color:var(--base-color); line-height: 1.2; position: relative; word-break: keep-all; width: 50%; }
	.ttl03 span { display: block; font-size: 2.0em; font-family:'Roboto Condensed', sans-serif; font-weight:bold; position: absolute; top: -50px; left: -4%; word-break: keep-all; color: var(--whitegry-color); z-index: -1;}
	.sortList { display: flex; justify-content: flex-end; align-items: center; width: 50%; }
	.sortList li { margin-left: 5px; font-size: 0.8em; border: 1px solid var(--base-color); border-radius: 20px; line-height: 20px; line-height: 20px; overflow: hidden; }
	.sortList li span { margin: 0 15px; }
	.sortList li.current { background:var(--base-color); }
	.sortList li.current a { color: #fff; }
	.sortList li:hover { background:var(--base-color); cursor: pointer;}
	.sortList li:hover a { color: #fff; } 
	.sortList li a         { resize: none; display: block;}
	.sortList li a:link    { color:var(--base-color); text-decoration: none; }
	.sortList li a:visited { color:var(--base-color); text-decoration: none; }
	.sortList li a:hover   { color:#fff; text-decoration: none; background:var(--base-color); }
	.sortList li a:active  { color:var(--base-color); text-decoration: none; }
	.sortList li.current a:link    { color:#fff; text-decoration: none; }
	.sortList li.current a:visited { color:#fff; text-decoration: none; }
	.sortList li.current a:hover   { color:#fff; text-decoration: none; opacity: 0.7; }
	.sortList li.current a:active  { color:#fff; text-decoration: none; }
	
	.eventMonth { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
	.eventMonth li { width: calc(100% / 7); background:#5f8ccb; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 20px 0; border-right: 1px solid #fff; position: relative;}
	.eventMonth li:after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 20px 0 0 20px; border-color: #fff transparent transparent transparent;}
	.eventMonth li.current:after { display: none; }
	.eventMonth li.current { background:var(--base-color); transform: scaleY(1.1);}
	.eventMonth li .emYear { background: #fff; text-align: center; padding: 2px 0; color: var(--base-color); font-family:'Roboto Condensed', sans-serif; font-weight:bold; border-radius: 10px; line-height: 1.0; width: 80%; margin-bottom: 10px; }
	.eventMonth li .emMonth { color: #fff; line-height: 1.0; }
	.eventMonth li .emMonth .roboto { font-size: 1.5em; }
	
	.eventList li { border: 1px solid var(--base-color); margin-bottom: 20px; display: flex; justify-content: center; align-items: flex-start; padding: 4% 4%; position: relative; }
	.eventList li.end { background: var(--whitegry-color); }
	.eventList li:after { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 20px 20px 0px 0px; border-color: transparent var(--base-color) transparent transparent;}
	.eventList li .date { width: 150px; padding: 1% 4% 1% 0; border-right:1px solid var(--base-color); }
	.eventList li .date .dateTtl { background: var(--base-color); color: #fff; margin-bottom: 10px; padding: 5px 0; text-align: center; font-size: 0.8em; }
	.eventList li.end .date .dateTtl { background: #333; }
	.eventList li .date .dateTime { display: flex; justify-content: center; align-items: center; }
	.eventList li .date .dateTime .dateOpen { width: 40%; }
	.eventList li .date .dateTime .dateBar { width: 10%; padding: 0 5%; }
	.eventList li .date .dateTime .dateClose { width: 40%; }
	
	.date .month { line-height: 1.0; font-size: 0.8em; text-align: center; margin-bottom: 5px; }
	.date .month .roboto { font-size: 1.3rem; }
	.date .day { line-height: 1.0; font-size: 0.9em; text-align: center; margin-bottom: 5px; }
	.date .day .roboto { font-size: 1.8rem; }
	.date .weekday { line-height: 1.0; font-size: 0.7em; text-align: center; margin-bottom: 0px; }
	
	.eventContent { width: calc(100% - 150px); padding: 0 0 0 4%; }
	.eventContent .eventTtl { color:var(--base-color); font-weight: 700; font-size: 1.5em; margin-bottom: 10px; }
	.eventContent .eventTtl span { color: #000; margin-left: 10px; font-size: 0.7em; }
	.eventContent .eventTbl { margin-bottom: 10px; }
	.eventContent .eventTbl .tblMidashi { font-size: 0.8em; padding: 2px 10px; background: var(--base-color); color: #fff; text-align: center; vertical-align: middle; }
	.eventContent .eventTbl td { font-size: 0.9em; padding: 2px 20px; }
	.eventContent .org { margin-bottom: 0px; font-size: 0.8em; padding-left: 3.5em; text-indent: -3.5em; }
	
	.eventContentFlex { }
	.in-eventFlex-L { margin-bottom: 10px;}
	.box_button { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
	.box_button .in_box_button { margin-left: 5px; border: 1px solid var(--base-color); height: 30px; line-height: 30px; border-radius: 4px; word-break: keep-all; font-size: 0.9em; margin-bottom: 5px; background: #fff; }
	.box_button .in_box_button.pdf_button { border: 1px solid var(--red-color); }
	
	.box_button .in_box_button .fa-external-link-alt { opacity: 0.5; margin-left: 10px; }
	.box_button .in_box_button .fa-file-alt { margin-right: 5px; }
	.box_button .in_box_button .fa-pencil-alt { margin-right: 5px; }
	.box_button .in_box_button .fa-file-pdf { margin-right: 5px; color: var(--red-color); }
	
	.box_button .in_box_button .inMLR { margin: 0 15px; }
	.box_button .in_box_button:hover { background:var(--base-color); cursor: pointer;}
	.box_button .in_box_button:hover a { color: #fff; } 
	.box_button .in_box_button a         { resize: none; display: block;}
	.box_button .in_box_button a:link    { color:var(--base-color); text-decoration: none; }
	.box_button .in_box_button a:visited { color:var(--base-color); text-decoration: none; }
	.box_button .in_box_button a:hover   { color:#fff; text-decoration: none; background:var(--base-color); }
	.box_button .in_box_button a:active  { color:var(--base-color); text-decoration: none; }
	
	.box_button .in_box_button.pdf_button:hover { background:var(--red-color); cursor: pointer;}
	.box_button .in_box_button.pdf_button:hover a { color: #fff; } 
	.box_button .in_box_button.pdf_button a         { resize: none; display: block; color: var(--red-color); }
	.box_button .in_box_button.pdf_button a:link    { color:var(--red-color); text-decoration: none; }
	.box_button .in_box_button.pdf_button a:visited { color:var(--red-color); text-decoration: none; }
	.box_button .in_box_button.pdf_button a:hover   { color:#fff; text-decoration: none; background:var(--red-color); }
	.box_button .in_box_button.pdf_button a:active  { color:var(--red-color); text-decoration: none; }
	.box_button .in_box_button.pdf_button a:hover .fa-file-pdf { color: #fff; }
	
	.eventCate { position: absolute; top: -1px; right: 0; display: flex; justify-content: flex-end; align-items: center;}
	.eventCate dt { font-size: 0.8em; border: 1px solid var(--base-color); color:var(--base-color); background: #fff; height: 25px; line-height: 25px; padding: 1px 10px; border-right: none; }
	.eventCate dd { font-size: 0.8em; border: 1px solid var(--base-color); color:#fff; background:var(--base-color); height: 25px; line-height: 25px; padding: 1px 10px; }
	
}
@media screen and (max-width: 599px) {
	.ttlFlex { display: flex; justify-content: space-between; align-items: center; flex-direction: column; margin-bottom: 20px; }
	.ttl03 { text-align:left; font-size: 1.5em; color:var(--base-color); line-height: 1.2; position: relative; word-break: keep-all; width: 100%; margin-bottom: 20px; }
	.ttl03 span { font-size: 2.0em; position: absolute; top: -30px;}
	.sortList { display: flex; justify-content: flex-start; align-items: center; width: 100%; }
	.sortList li { margin-left: 0px; margin-right: 5px; }
	.eventMonth li { width: calc(100% / 5); }
	.eventMonth li.pc { display: none !important;} 
	.eventMonth li:after { border-width: 10px 0 0 10px; }
	
	.eventList li { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; padding: 12% 4% 4%; }
	.eventList li .date { width: 100%; padding: 0; border-right:none; margin-bottom: 5px; }
	.eventContent { width: 100%; padding: 0; }
	.eventContent .eventTtl { margin-bottom: 15px; }
	.eventContent .eventTbl .tblMidashi { background: #fff; color: var(--base-color); border: 1px solid var(--base-color); white-space: nowrap; }
	.eventContent .eventTbl td { padding: 2px 10px; }
	
	.eventList li .date .dateTime .dateOpen { width: 45%; display: flex; justify-content: center; align-items: baseline; }
	.eventList li .date .dateTime .dateBar { width: 2%; padding: 0 0%; text-align: center;}
	.eventList li .date .dateTime .dateClose { width: 45%; display: flex; justify-content: center; align-items: baseline;  }
	
	.box_button { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
	.box_button .in_box_button { margin-left: 0px; margin-right: 5px; margin-bottom: 5px; }
    .eventList li .date .dateTtl { background: #fff; color: var(--base-color); margin-bottom: 10px; padding: 5px 0; text-align: center; font-size: 0.8em; border: 1px solid var(--base-color); }	
	.eventList li.end .date .dateTtl { color: #fff;}
	.date .weekday { margin-left: 5px; }
	.eventContent .eventTtl { background:var(--base-color); color: #fff; font-weight: 700; font-size: 1.2em; margin-bottom: 10px; padding: 10px; }
	.eventContent .eventTtl span { display: block; color: #fff; margin-left: 0px; }
}
@media screen and (min-width: 900px) {
	#event .in { margin: 10vh auto 0; }
	.ttlFlex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
	.ttl03 { text-align:left; font-size: 2.0em; color:var(--base-color); line-height: 1.2; position: relative; word-break: keep-all; width: 50%; }
	.ttl03 span { display: block; font-size: 2.0em; font-family:'Roboto Condensed', sans-serif; font-weight:bold; position: absolute; top: -50px; left: -4%; word-break: keep-all; color: var(--whitegry-color); z-index: -1;}
	.sortList { display: flex; justify-content: flex-end; align-items: center; width: 50%; }
	.sortList li { margin-left: 10px; font-size: 0.8em; border: 1px solid var(--base-color); border-radius: 30px; line-height: 30px; line-height: 30px; overflow: hidden; }
	.sortList li span { margin: 0 15px; }
	.sortList li.current { background:var(--base-color); }
	.sortList li.current a { color: #fff; }
	.sortList li:hover { background:var(--base-color); cursor: pointer;}
	.sortList li:hover a { color: #fff; } 
	.sortList li a         { resize: none; display: block;}
	.sortList li a:link    { color:var(--base-color); text-decoration: none; }
	.sortList li a:visited { color:var(--base-color); text-decoration: none; }
	.sortList li a:hover   { color:#fff; text-decoration: none; background:var(--base-color); }
	.sortList li a:active  { color:var(--base-color); text-decoration: none; }
	.sortList li.current a:link    { color:#fff; text-decoration: none; }
	.sortList li.current a:visited { color:#fff; text-decoration: none; }
	.sortList li.current a:hover   { color:#fff; text-decoration: none; opacity: 0.7; }
	.sortList li.current a:active  { color:#fff; text-decoration: none; }
	
	.eventMonth { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
	.eventMonth li { width: calc(100% / 7); background:#5f8ccb; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 20px 0; border-right: 1px solid #fff; position: relative;}
	.eventMonth li:after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 20px 0 0 20px; border-color: #fff transparent transparent transparent;}
	.eventMonth li.current:after { display: none; }
	.eventMonth li.current { background:var(--base-color); transform: scaleY(1.1);}
	.eventMonth li .emYear { background: #fff; text-align: center; padding: 2px 0; color: var(--base-color); font-family:'Roboto Condensed', sans-serif; font-weight:bold; border-radius: 10px; line-height: 1.0; width: 80%; margin-bottom: 10px; }
	.eventMonth li .emMonth { color: #fff; line-height: 1.0; }
	.eventMonth li .emMonth .roboto { font-size: 1.5em; }
	
	.eventList li { border: 1px solid var(--base-color); margin-bottom: 20px; display: flex; justify-content: center; align-items: center; padding: 1% 2%; position: relative; }
	.eventList li.end { background: var(--whitegry-color); }
	.eventList li:after { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 20px 20px 0px 0px; border-color: transparent var(--base-color) transparent transparent;}
	.eventList li .date { width: 150px; padding: 1% 2% 1% 0; border-right:1px solid var(--base-color); }
	.eventList li .date .dateTtl { background: var(--base-color); color: #fff; margin-bottom: 10px; padding: 5px 0; text-align: center; font-size: 0.8em; }
	.eventList li.end .date .dateTtl { background: #333; }
	.eventList li .date .dateTime { display: flex; justify-content: center; align-items: center; }
	.eventList li .date .dateTime .dateOpen { width: 40%; }
	.eventList li .date .dateTime .dateBar { width: 10%; padding: 0 5%; }
	.eventList li .date .dateTime .dateClose { width: 40%; }
	
	.date .month { line-height: 1.0; font-size: 0.8em; text-align: center; margin-bottom: 5px; }
	.date .month .roboto { font-size: 1.3rem; }
	.date .day { line-height: 1.0; font-size: 0.9em; text-align: center; margin-bottom: 5px; }
	.date .day .roboto { font-size: 1.8rem; }
	.date .weekday { line-height: 1.0; font-size: 0.7em; text-align: center; margin-bottom: 0px; }
	
	.eventContent { width: calc(100% - 150px); padding: 0 0 0 2%; }
	.eventContent .eventTtl { color:var(--base-color); font-weight: 700; font-size: 1.5em; margin-bottom: 10px; }
	.eventContent .eventTtl span { color: #000; margin-left: 10px; font-size: 0.7em; }
	.eventContent .eventTbl { margin-bottom: 10px; }
	.eventContent .eventTbl .tblMidashi { font-size: 0.8em; padding: 2px 10px; background: var(--base-color); color: #fff; text-align: center; vertical-align: middle; }
	.eventContent .eventTbl td { font-size: 0.9em; padding: 2px 20px; }
	.eventContent .org { margin-bottom: 0px; font-size: 0.8em;}
	
	.eventContentFlex { display: flex; justify-content: space-between; align-items: center; }
	.box_button { display: flex; justify-content: flex-end; align-items: center; }
	.box_button .in_box_button { margin-left: 5px; border: 1px solid var(--base-color); height: 40px; line-height: 40px; border-radius: 4px; word-break: keep-all; font-size: 0.9em; margin-bottom: 0px; background: #fff; }
	.box_button .in_box_button.pdf_button { border: 1px solid var(--red-color); }
	
	.box_button .in_box_button .fa-external-link-alt { opacity: 0.5; margin-left: 10px; }
	.box_button .in_box_button .fa-file-alt { margin-right: 5px; }
	.box_button .in_box_button .fa-pencil-alt { margin-right: 5px; }
	.box_button .in_box_button .fa-file-pdf { margin-right: 5px; color: var(--red-color); }
	
	.box_button .in_box_button .inMLR { margin: 0 15px; }
	.box_button .in_box_button:hover { background:var(--base-color); cursor: pointer;}
	.box_button .in_box_button:hover a { color: #fff; } 
	.box_button .in_box_button a         { resize: none; display: block;}
	.box_button .in_box_button a:link    { color:var(--base-color); text-decoration: none; }
	.box_button .in_box_button a:visited { color:var(--base-color); text-decoration: none; }
	.box_button .in_box_button a:hover   { color:#fff; text-decoration: none; background:var(--base-color); }
	.box_button .in_box_button a:active  { color:var(--base-color); text-decoration: none; }
	
	.box_button .in_box_button.pdf_button:hover { background:var(--red-color); cursor: pointer;}
	.box_button .in_box_button.pdf_button:hover a { color: #fff; } 
	.box_button .in_box_button.pdf_button a         { resize: none; display: block; color: var(--red-color); }
	.box_button .in_box_button.pdf_button a:link    { color:var(--red-color); text-decoration: none; }
	.box_button .in_box_button.pdf_button a:visited { color:var(--red-color); text-decoration: none; }
	.box_button .in_box_button.pdf_button a:hover   { color:#fff; text-decoration: none; background:var(--red-color); }
	.box_button .in_box_button.pdf_button a:active  { color:var(--red-color); text-decoration: none; }
	.box_button .in_box_button.pdf_button a:hover .fa-file-pdf { color: #fff; }
	
	.eventCate { position: absolute; top: -1px; right: 0; display: flex; justify-content: flex-end; align-items: center;}
	.eventCate dt { font-size: 0.8em; border: 1px solid var(--base-color); color:var(--base-color); background: #fff; height: 30px; line-height: 30px; padding: 0px 10px; border-right: none; }
	.eventCate dd { font-size: 0.8em; border: 1px solid var(--base-color); color:#fff; background:var(--base-color); height: 30px; line-height: 30px; padding: 0px 10px; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.eventContentFlex { display: flex; justify-content: flex-start; align-items:flex-start; flex-direction: column;  }
	.in-eventFlex-L { margin-bottom: 20px; }
	.eventList li { padding: 3% 2%; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.eventList li { padding: 2% 2%; }
	.eventContent .eventTtl { margin-right: 15%; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.eventList li { padding: 2% 2%; }
	.eventContent .eventTtl { margin-right: 15%; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	.eventList li { padding: 1% 2%; }
	.eventContent .eventTtl { margin-right: 15%; }
}
@media screen and (min-width: 1390px)  {
	.eventList li { padding: 1% 2%; }
	.eventContent .eventTtl { margin-right: 15%; }
}
/*-- サーチボックス -------------------------------------------------------------*/
@media screen and (max-width: 599px) {
}
@media screen and (min-width: 600px) {

}

/*-- フォーム -------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.searchBox { background: url("../img/common/serachBg.jpeg") center center no-repeat; background-size: cover; border: 1px solid var(--lightgry-color); position: relative; padding: 5vh 0; margin: 5vh 0; }
	.searchBox .ovryKika { position: absolute; top: 0; left: 0; clip-path: polygon(0 0, 60% 0, 40% 100%, 0% 100%); background: rgba(0,30,70,0.5); z-index: 1; width: 100%; height: 100%; }
	.searchBox .in:after { content: ""; background: rgba(0,40,90,0.8); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	.searchBox .in .in-search { margin: 0; position: relative; z-index: 2; }
	.searchTtl { text-align: center; margin-bottom: 10px; color: #fff; font-size: 1.2em; }
	.searchSubTtl { text-align: center; margin-bottom: 10px; color: #fff; font-size: 1.0rem; margin-bottom: 0px; }
	
	#school-search { background: var(--yellow-color); position: relative; padding: 5vh 0; margin-bottom: 5vh; }
	#school-search .ovryKika { position: absolute; top: 0; left: 0; clip-path: polygon(0 0, 60% 0, 40% 100%, 0% 100%); background: rgba(255,206,54,0.5); z-index: 1; width: 100%; height: 100%; }
	#school-search .in .in-search { position: relative; z-index: 2; }
	#school-search .searchTtl { text-align: center; margin-bottom: 10px; color: #000; font-size: 1.5rem; }
	#school-search .searchSubTtl { text-align: center; margin-bottom: 10px; color: #000; font-size: 1.0rem; margin-bottom: 0px; }
	
	.formFlex { display: flex; justify-content: center; flex-direction: column; }
	.formFlex .in-formFlex { margin: 0 auto; width: 80%; }
	.formFlex .in-formFlex select { padding: 10px 10px; border: 1px solid var(--lightgry-color); height: 40px; line-height: 40px; width: 100%; }
	.formFlex .in-formFlex p { text-align: center; font-weight: bold; margin-bottom: 5px; }
	.formFlex .in-formFlex input[type=text] { padding: 10px 10px; border: 1px solid var(--lightgry-color); height: 40px; line-height: 50px; width: 100%; }
	
	.flatbtn { margin-bottom: 0px; }
	/* aからbuttonへ変更し、button用のリセットを追加 */
	.flatbtn button { 
		-webkit-appearance: none; appearance: none; padding: 0; cursor: pointer; font-family: inherit;
		width: 200px; margin: 20px auto 0; height: 38px; line-height: 38px; color: #fff; border: #005ad5 1px solid; display: block; text-align: center; background: #005ad5; border-radius: 0 4px 4px 0; font-size: 0.8em; 
	}
	.flatbtn button:hover { color:#005ad5; background:#fff; text-decoration:none; }
	
	.sideSearchBox .feas-submit-button {
		margin-bottom: 0px;
		-webkit-appearance: none; appearance: none; padding: 0; cursor: pointer; font-family: inherit;
		width: 200px; margin: 20px auto 0; height: 38px; line-height: 38px; color: #fff; border: #005ad5 1px solid; display: block; text-align: center; background: #005ad5; border-radius: 0 4px 4px 0; font-size: 0.8em; 
	}
	.sideSearchBox .feas-submit-button:hover { color:#005ad5; background:#fff; text-decoration:none; }
	
	#school-search .feas-submit-button {
		margin-bottom: 0px;
		-webkit-appearance: none; appearance: none; padding: 0; cursor: pointer; font-family: inherit;
		width: 200px; margin: 20px auto 0; height: 38px; line-height: 38px; color: #fff; border: #005ad5 1px solid; display: block; text-align: center; background: #005ad5; border-radius: 0 4px 4px 0; font-size: 0.8em; 
	}
	#school-search .feas-submit-button:hover { color:#005ad5; background:#fff; text-decoration:none; }
	
	#event-search .feas-submit-button {
		margin-bottom: 0px;
		-webkit-appearance: none; appearance: none; padding: 0; cursor: pointer; font-family: inherit;
		width: 200px; margin: 20px auto 0; height: 38px; line-height: 38px; color: #fff; border: #005ad5 1px solid; display: block; text-align: center; background: #005ad5; border-radius: 0 4px 4px 0; font-size: 0.8em; 
	}
	#event-search .feas-submit-button:hover { color:#005ad5; background:#fff; text-decoration:none; }
	
	.formFlex .in-formFlex select {
	  -webkit-appearance: none;
	  appearance: none;

	  padding: 0 40px 0 10px; /* 右に矢印分の余白 */
	  border: 1px solid var(--lightgry-color);
	  height: 40px;
	  width: 100%;

	  border-radius: 0;
	  background-color: #fff;
	  color: #333;
	  font-size: 16px; /* iOSのズーム防止 */

	  background-image: url("arrow.svg"); /* 矢印画像 */
	  background-repeat: no-repeat;
	  background-position: right 10px center;
	  background-size: 12px;
	}
	.formFlex .in-formFlex {
	  position: relative;
	}

	.formFlex .in-formFlex::after {
	  content: "";
	  position: absolute;
	  right: 15px;
	  top: 50%;
	  width: 6px;
	  height: 6px;
	  border-right: 2px solid #333;
	  border-bottom: 2px solid #333;
	  transform: translateY(-50%) rotate(45deg);
	  pointer-events: none;
	}
	.formFlex .in-formFlex.in-formFlex-text::after { display: none; }
}

@media screen and (min-width: 768px) {
	.searchBox { background: url("../img/common/serachBg.jpeg") center center no-repeat; background-size: cover; border: 1px solid var(--lightgry-color); position: relative; padding: 5vh 0;}
	.searchBox .in { margin-bottom: 0; }
	.searchBox .ovryKika { position: absolute; top: 0; left: 0; clip-path: polygon(0 0, 60% 0, 40% 100%, 0% 100%); background: rgba(0,30,70,0.5); z-index: 1; width: 100%; height: 100%; }
	.searchBox .in:after { content: ""; background: rgba(0,40,90,0.8); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	.searchBox .in .in-search { margin: 1% 4%; position: relative; z-index: 2; }
	.searchTtl { text-align: center; margin-bottom: 10px; color: #fff; font-size: 1.5rem; }
	.searchSubTtl { text-align: center; margin-bottom: 10px; color: #fff; font-size: 1.0rem; margin-bottom: 0px; }
	
	#school-search { background: var(--yellow-color); position: relative; padding: 5vh 0; margin-bottom: 5vh; }
	#school-search .ovryKika { position: absolute; top: 0; left: 0; clip-path: polygon(0 0, 60% 0, 40% 100%, 0% 100%); background: rgba(255,206,54,0.5); z-index: 1; width: 100%; height: 100%; }
	#school-search .in .in-search { position: relative; z-index: 2; }
	#school-search .searchTtl { text-align: center; margin-bottom: 10px; color: #000; font-size: 1.5rem; }
	#school-search .searchSubTtl { text-align: center; margin-bottom: 10px; color: #000; font-size: 1.0rem; margin-bottom: 0px; }
	
	.formFlex { display: flex; justify-content: center; align-items: center; }
	.formFlex .in-formFlex { margin: 0; }
	.formFlex .in-formFlex select { padding: 10px 20px; border: 1px solid var(--lightgry-color); height: 50px; line-height: 50px; }
	.formFlex .in-formFlex p { text-align: center; font-weight: bold; margin-bottom: 5px; }
	.formFlex .in-formFlex input[type=text] { padding: 10px 20px; border: 1px solid var(--lightgry-color); height: 50px; line-height: 50px; }
	
	.flatbtn { margin-bottom: 0px; }
	/* aからbuttonへ変更し、button用のリセットを追加 */
	.flatbtn button { 
		-webkit-appearance: none; appearance: none; padding: 0; cursor: pointer; font-family: inherit;
		width: 200px; margin: 0 auto; height: 48px; line-height: 48px; color: #fff; border: #005ad5 1px solid; display: block; text-align: center; background: #005ad5; border-radius: 0 4px 4px 0; font-size: 0.8em; 
	}
	.flatbtn button:hover { color:#005ad5; background:#fff; text-decoration:none; }
	
	.sideSearchBox .feas-submit-button { 
		margin-bottom: 0px;
		-webkit-appearance: none; appearance: none; padding: 0; cursor: pointer; font-family: inherit;
		width: 200px; margin: 0 auto; height: 48px; line-height: 48px; color: #fff; border: #005ad5 1px solid; display: block; text-align: center; background: #005ad5; border-radius: 0 4px 4px 0; font-size: 0.8em;
	}
	.sideSearchBox .feas-submit-button:hover { color:#005ad5; background:#fff; text-decoration:none; }
	#school-search .feas-submit-button { 
		margin-bottom: 0px;
		-webkit-appearance: none; appearance: none; padding: 0; cursor: pointer; font-family: inherit;
		width: 200px; height: 48px; line-height: 48px; color: #fff; border: #005ad5 1px solid; display: block; text-align: center; background: #005ad5; border-radius: 0 4px 4px 0; font-size: 0.8em;
	}
	#school-search .sideSearchBox .feas-submit-button:hover { color:#005ad5; background:#fff; text-decoration:none; }
	#event-search .feas-submit-button { 
		margin-bottom: 0px;
		-webkit-appearance: none; appearance: none; padding: 0; cursor: pointer; font-family: inherit;
		width: 200px; height: 48px; line-height: 48px; color: #fff; border: #005ad5 1px solid; display: block; text-align: center; background: #005ad5; border-radius: 0 4px 4px 0; font-size: 0.8em;
	}
	#event-search .sideSearchBox .feas-submit-button:hover { color:#005ad5; background:#fff; text-decoration:none; }
}

@media screen and (min-width: 768px) and (max-width: 899px) {
	.searchBox { margin: 5vh 0 2vh; }
	.flatbtn button { width: 100px; }
	.sideSearchBox .feas-submit-button { width: 100px; }
	#school-search .feas-submit-button { width: 100px; }
	#event-search .feas-submit-button { width: 100px; }
}

@media screen and (min-width: 900px) and (max-width: 1089px) {
	.flatbtn button { width: 120px; }
	.sideSearchBox .feas-submit-button { width: 120px; }
	#school-search .feas-submit-button { width: 120px; }
	#event-search .feas-submit-button { width: 120px; }
}

@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.flatbtn button { width: 140px; }
	.sideSearchBox .feas-submit-button { width: 140px; }
	#school-search .feas-submit-button { width: 140px; }
	#event-search .feas-submit-button { width: 140px; }
}

@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.flatbtn button { width: 160px; }
	.sideSearchBox .feas-submit-button { width: 160px; }
	#school-search .feas-submit-button { width: 160px; }
	#event-search .feas-submit-button { width: 160px; }
}

@media screen and (min-width: 1290px) and (max-width: 1389px) {
	.flatbtn button { width: 180px; }
	.sideSearchBox .feas-submit-button { width: 180px; }
	#school-search .feas-submit-button { width: 180px; }
	#event-search .feas-submit-button { width: 180px; }
}