


#add_page{ margin: 5em auto; max-width: 1066px; width: 90%;}
#add_page h1{ text-align: center; font-family: serif; font-weight: 600; font-size: 2em; position: relative; margin-bottom: 2em;}
#add_page h1::after{ content: ""; width: 3em; height: 3px; position: absolute; left: 0; right: 0; bottom: -0.3em; margin: auto; background: #f7931e;}


#add_page .link_wrap{width: 80%; max-width: 960px; margin: auto;}
#add_page .link_wrap a.co_link{display: inline-block; width: 48%;}
#add_page a.co_link{ position: relative; text-align: left; text-decoration: none; margin: 0.5em 0; padding-right: 2em; display: block;}
#add_page a.co_link span{ display: inline-block; position: relative;}
#add_page a.co_link span::before{ content: ""; width: 0%; height: 0; border-bottom: 1px solid; position: absolute; left: 0; bottom: 0; transition-property : width;transition-duration : 0.4s;}
#add_page a.co_link span:hover::before{ width: 100%;}
#add_page a.co_link span::after{ content: ""; position: absolute; right:-1.5em; top: 0.15em; bottom: 0; margin: auto; width: 0.4em; height: 0.4em; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(-45deg);}

#add_page .flex_wrap{display:flex;justify-content:space-between;align-items:center;
margin: 3em auto 0;} 

#add_page .flex_wrap .gakunen_wrap{color: #FFF; width: 47%; text-align: center; padding: 2em 1em 1em;}
#add_page .flex_wrap .gakunen_wrap h3{font-family: serif;  font-size: 1.6em; margin-bottom: 0.5em;}
#add_page .flex_wrap .gakunen_wrap a{text-align: center; margin: 1.5em auto;}
#add_page .flex_wrap .high_wrap{ background: #0071bc;}
#add_page .flex_wrap .junior_wrap{ background: #f6ab00;}


#add_page .text_wrap{width: 90%; max-width: 1024px; margin:0 auto 3em;}
#add_page .text_wrap h2{font-family: serif;  font-size: 1.5em; margin-bottom: 0.2em; color: #f7931e; font-weight: 600;;}
#add_page .text_wrap p{ line-height: 1.6;}
#add_page .text_wrap a{color: #f7931e; display: inline-block; border: 2px solid; padding: 0.75em 1em; margin-top: 1em;;}
#add_page .text_wrap a.co_link span{ padding: 0 1.5em 0 0;}
#add_page .text_wrap a.co_link span::before{ display: none;}
#add_page .text_wrap a.co_link span::after{right: 0;}
#add_page .text_wrap a.co_link:hover{color: #FFF; background: #f7931e;}




@media all and (max-width: 750px) {
#add_page h1{font-size: 1.7em;}

#add_page .link_wrap{width: 94%;  margin: auto;}
#add_page .link_wrap a.co_link{display: block; width: 100%; margin: 1.0em auto;}
    
#add_page .flex_wrap{display:block;margin: 2em auto 0;} 
#add_page .flex_wrap .gakunen_wrap{ width: 100%;padding: 2em 1em 1em; margin-bottom: 1em;}


#add_page .text_wrap{width: 100%; max-width: 1024px; margin:0 auto 3em;}
#add_page .text_wrap h2{font-size: 1.3em; }
#add_page .text_wrap a{padding: 0.75em 0.75em; margin-top: 1em;;}
}