@charset "UTF-8";
/* CSS Document */
html {
-webkit-text-size-adjust: 100%;
}
input, select {
-webkit-appearance: none;
appearance: none;
}

body {
margin: 0;
padding: 0;
background-color:#fdfdfd;
color: #161616;
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
font-weight: 400;
border-top:solid 10px #fcee21;
line-height:1;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
text-decoration: none;
}

.container{
width: 1080px;
height: auto;
margin: 0 auto;
padding: 0;
}
.inner{
width: 60%;
margin: 40px auto;
}
@media screen and (max-width:1025px){
.container{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.inner{
width: 96%;
margin: 40px auto 0;
}
}

header{
width: 100%;
height: auto;
text-align: center;
padding: 15px 0;
}
#header_logo{
width: 30%;
height: auto;
margin: 0 auto 10px auto;
}
#header_logo img{
width: 100%;
height: auto;
}
header h1{
font-size: 1.5rem;
margin: 0 0 30px 0;
font-weight: normal;
}
#main_nav_bar{
width: 100%;
height: auto;
background-color: #2f4d91;
}
#main_nav{
display: flex;
justify-content:space-between;
text-align: center;
padding: 10px 0;
}
#main_nav a{
width: calc(100% / 3);
height: auto;
}
.main_nav_list{
color: #fff;
font-size: 0.8rem;
text-align: center;
padding: 55px 0 10px 0;
}
.main_nav_list a{
color: #fff;
display: block;
}
.main_nav_list_v{
color: #fcee21;
font-size: 0.8rem;
text-align: center;
padding: 55px 0 10px 0;
}
.main_nav_list_v a{
color: #fcee21;
display: block;
}
#nav_list01{
background-image: url("images/navicon01.png");
background-repeat: no-repeat;
background-position: top 15px center;
background-size: 30px;
border-right: solid 1px #fff;
}
#nav_list01_v{
background-image: url("images/navicon01_v.png");
background-repeat: no-repeat;
background-position: top 15px center;
background-size: 30px;
border-right: solid 1px #fff;
}
#nav_list02{
background-image: url("images/navicon02.png");
background-repeat: no-repeat;
background-position: top 15px center;
background-size: 30px;
border-right: solid 1px #fff;
}
#nav_list02_v{
background-image: url("images/navicon02_v.png");
background-repeat: no-repeat;
background-position: top 15px center;
background-size: 30px;
border-right: solid 1px #fff;
}
#nav_list03{
background-image: url("images/navicon03.png");
background-repeat: no-repeat;
background-position: top 15px center;
background-size: 20px;
}
#nav_list03_v{
background-image: url("images/navicon03_v.png");
background-repeat: no-repeat;
background-position: top 15px center;
background-size: 20px;
}
#hello{
text-align: center;
margin: 15px 0;
color: #2f4d91;
}
footer{
margin: 40px 0 5px;
font-size: 0.65rem;
font-weight: 300;
letter-spacing: 1px;
position: relative;
display: inline-block;
bottom:0;
left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width:1025px){
#header_logo{
width: 70%;
height: auto;
margin: 0 auto 0 auto;
}
#header_logo img{
width: 100%;
height: auto;
}
header h1{
font-size: 1.0rem;
}
}
.login div{
margin: 60px 0;
display: flex;
align-items: baseline;
}
.login label{
width: 30%;
height: auto;
display: inline-block;
text-align: center;
}
.login input{
display: inline-block;
width: 65%;
height: auto;
padding: 8px 5px;
box-sizing: border-box;
border: solid 1px #2f4d91;
}
.reserve_list{
width: 100%;
height: auto;
margin-bottom: 40px;
align-items: center;
}
.daytime{
display: flex;
background-color: #fcee21;
text-align: center;
padding: 15px 0;
justify-content: space-between;
}
.daytime div{
width: 50%;
height: auto;
text-align: center;
}
.subject{
display: flex;
background-color: #e6e6e6;
color: #2f4d91;
text-align: center;
padding: 15px 0;
justify-content: space-between;
}
.subject div{
width: 50%;
height: auto;
text-align: center;
}
span.cancel_btn{
background-color: #2f4d91;
color: #fff;
border-radius: 16px;
text-align: center;
padding: 4px 20px;
font-size: 0.9rem;
}
span.cancel_btn:hover{
background-color: #161616;
cursor:pointer;
}
#nav_move{
width: 100%;
height: auto;
text-align: center;
font-size: 0.8rem;
margin-bottom: 20px;
}
#nav_move input[type="number"]{
width: 2rem;
margin-right: 5px;
border: solid 1px #2f4d91;
padding: 5px;
}
#nav_move input[type="button"]{
background-color: #2f4d91;
padding: 3px 10px;
color: #fff;
border: none;
}

#footer_nav{
background-color: #2f4d91;
color: #fff;
font-weight: 300;
font-size: 0.8rem;
display: flex;
justify-content: space-between;
padding: 15px;
align-items: center;
}
#footer_nav a{
color: #fff;
}
#nav_past{
padding-left:1rem;
}
#nav_past::before{
content: '＜';
position: relative;
margin-right: 2px;
margin-top: -2px;
}
#nav_next{
padding-right:1rem;
}
#nav_next::after{
content: '＞';
position: relative;
margin-left: 2px;
margin-top: -2px;
}
.selectcurriculum{
margin: 40px auto;
position: relative;
}
.selectcurriculum label{
display: inline-block;
width: calc(30% - 10px);
height: auto;
background-color: #2f4d91;
color: #fff;
text-align: center;
padding: 10px 40px;
box-sizing: border-box;
}
.selectcurriculum select{
display: inline-block;
width: 70%;
height: auto;
padding: 8px 5px;
box-sizing: border-box;
border: solid 1px #2f4d91;
}
.selectcurriculum::after{
content: "";
position: absolute;
top: 12px;
right: 16px;
width: 8px;
height: 8px;
border-right: 3px solid #2f4d91;
border-bottom: 3px solid #2f4d91;
transform: rotate(45deg);
}
.entry_btn input{
background-color: #2f4d91;
color: #fff;
border-radius: 16px;
line-height: 2.0;
text-align: center;
padding: 4px 40px;
font-size: 0.9rem;
border: none;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.entry_btn input:hover{
background-color: #161616;
cursor:pointer;
}
@media screen and (max-width:1025px){
.selectcurriculum{
margin: 20px auto 40px;
position: relative;
}
.selectcurriculum label{
display: block;
width: 100%;
height: auto;
background-color: #2f4d91;
color: #fff;
text-align: center;
padding: 5px 0;
box-sizing: border-box;
margin-bottom: 10px;
}
.selectcurriculum select{
display: block;
width: 100%;
height: auto;
padding: 4px 5px;
box-sizing: border-box;
border: solid 1px #2f4d91;
font-size: 1.2rem;
}
.selectcurriculum ::after {
content: "";
position: absolute;
top: 2.8rem;
right: 12px;
width: 8px;
height: 8px;
border-right: 3px solid #2f4d91;
border-bottom: 3px solid #2f4d91;
transform: rotate(45deg);
}
.entry_btn input{
background-color: #2f4d91;
color: #fff;
border-radius: 16px;
line-height: 2.0;
text-align: center;
padding: 4px 40px;
font-size: 0.9rem;
border: none;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.entry_btn input:hover{
background-color: #161616;
cursor:pointer;
}
}