@charset "utf-8";

body {font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
color:#000000;
background-color:#f5eee1;
margin:0;
font-size:16px;
line-height:160%;

display: flex;
flex-flow: column;
min-height: 100vh;
}
h1,h2,h3,h4{
margin:0;
line-height:140%;
}
p{
margin:0 0 1em;
}
input[type="text"],
input[type="password"],
input[type="text"],
textarea
{
padding:5px;
border-radius:3px;
border:1px solid #8c8c8c;
font-size:1.2em;
}

select{
background-color: #f5f5f5;
border: thin solid #8c8c8c;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.2em 2em 0.2em 0.5em;
margin: 0;      
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 50%, transparent 50%),
linear-gradient(to right, #ccc, #ccc);
background-position:
calc(100% - 12px) calc(0.8em + 0px),
calc(100% - 7px) calc(0.8em + 0px),
calc(100% - 1.5em) 0.2em;
background-size:
5px 5px,
5px 5px,
1px 1.5em;
background-repeat: no-repeat;
color:#000000;
}
select::-ms-expand {
display: none;
}
input[type="radio"],
input[type="checkbox"]{
margin-right:3px;
}
textarea{
width:95%;
}
label{
display:inline-block;
margin-right:10px;
}
button{
display:block;
margin:0 auto 10px;
border:none;
border-radius:5px;
padding:14px;
cursor:pointer;
}
ul,li{
list-style:none;
margin:0;
padding:0;
}
body#notice{
min-height: 100vh;
position: relative;/*←相対位置*/
padding-bottom: 60px;/*←footerの高さ*/
box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}


#header,
#footer{
overflow:hidden;
background-color:#5f3b13;
color:#ffffff;
}
#header{
padding:20px;
display:flex;
justify-content:space-between;
}
#header h1{
float:left;
}
#header h1 a{
color:#ffffff;
text-decoration:none;
}

/*
#header ul{
float:right;
list-style:none;
overflow:hidden;
margin:0;
padding:0;
}
#header ul li{
float:left;
border:1px solid #ffffff;
border-radius:10px;
background-color:#cc5544;
text-align:center;
font-weight:bold;
}
#header ul li a{
color:#ffffff;
text-decoration:none;
display:block;
height:100%;
}
#header ul li+li{
background-color:#65a6de;
}
*/


.nav a {
text-decoration: none;
}
.nav li {
display: inline-block;
margin: 0 10px;
}
.nav-wrap.open {
display: block;
}
.nav-wrap.close {
display: none;
}



#footer{
padding:15px 0;
}
#notice #footer{
width: 100%;
position: absolute;
bottom: 0;
}
#footer address{
font-style:normal;
font-size:0.8em;
text-align:center;
}
#main{
flex:1;
padding:50px 0 100px;
}
.container > h1{
font-size:2em;
text-align:center;
color:#603813;
line-height:180%;
}
.container > h1 span{
display:block;
}
.container > h2{
font-size:1.3em;
text-align:center;
color:#ae7a4a;
border:2px solid #ae7a4a;
border-radius:20px;
padding:5px;
}
#section{
background-color:#fff;
border-radius:20px;
padding:50px;
}
ul#bigBtn{
overflow:hidden;
padding:20px 0;
}
ul#bigBtn li{
float:left;
width:48%;
margin-bottom:20px;
background:linear-gradient(to bottom, #cb9d72,#b77e50);
border:2px solid #5f3b13;
border-radius:8px;
}
ul#bigBtn li:nth-child(odd){
float:left;
}
ul#bigBtn li:nth-child(even){
float:right;
}
ul#bigBtn li a{
display:block;
text-align:center;
color:#fff;
text-decoration:none;
}
ul.col1,
ul.col2,
ul.col3,
ul.col4,
ul.col5,
ul.col6
{
overflow:hidden;
padding-bottom:20px;
}
ul.col1 li,
ul.col2 li,
ul.col3 li,
ul.col4 li,
ul.col5 li,
ul.col6 li
{
float:left;
text-align:center;
}
ul.col1 li{
width:100%;
}
ul.col2 li{
width:50%;
}
ul.col3 li{
width:33%;
}
ul.col4 li,
ul.col5 li,
ul.col6 li{
width:50%;
}
ul.col1 li dl,
ul.col2 li dl,
ul.col3 li dl{
}
ul.col1 li dt,
ul.col2 li dt,
ul.col3 li dt,
ul.col4 li dt,
ul.col5 li dt,
ul.col6 li dt
{
color:#5f3b13;
font-weight:bold;
padding:5px 0;
}
ul.col1 li dd,
ul.col2 li dd,
ul.col3 li dd,
ul.col4 li dd,
ul.col5 li dd,
ul.col6 li dd
{
margin:0;
}
ul.col1 li dd p,
ul.col2 li dd p,
ul.col3 li dd p,
ul.col4 li dd p,
ul.col5 li dd p,
ul.col6 li dd p
{
margin:0 0 10px;
padding:8px 0 8px 5px;
color:#fff;
font-weight:bold;
letter-spacing:5px;
}
p.p0{
background:#cc5544;
}
p.p1{
background:#9ab037;
}
p.p2{
background:#6e88c3;
}
p.p3{
background:#9072ac;
}
ul.col1 li dd a,
ul.col2 li dd a,
ul.col3 li dd a,
ul.col4 li dd a,
ul.col5 li dd a,
ul.col6 li dd a
{
display:block;
background:linear-gradient(to bottom, #cb9d72,#b77e50);
border:1px solid #5f3b13;
border-radius:8px;
color:#fff;
font-size:0.9em;
text-decoration:none;
}
ul.col1 li dl dt img,
ul.col2 li dl dt img,
ul.col3 li dl dt img,
ul.col4 li dl dt img,
ul.col5 li dl dt img,
ul.col6 li dl dt img
{
vertical-align:middle;
}
ul.col1 li dl dt span,
ul.col2 li dl dt span,
ul.col3 li dl dt span,
ul.col4 li dl dt span,
ul.col5 li dl dt span,
ul.col6 li dl dt span
{
display:inline-block;
vertical-align:middle;
margin-left:5px;
}
nav {
text-align:center;
padding:10px 0 30px;
}
nav a{
color:#b77e50;
font-weight:bold;
text-decoration:underline;
}

#notice .container > p{
background:#fff;
border:2px solid #ae7a4a;
margin: 20px 0;
padding:20px;
font-size:0.9em;
}
#notice .container > a{
display:block;
width:200px;
margin:50px auto 0;
padding:8px 0;
background:linear-gradient(to bottom, #cb9d72,#b77e50);
border:2px solid #5f3b13;
border-radius:8px;
text-align:center;
color:#fff;
text-decoration:none;
}
#absentlink{
}
#absentlink p{
margin:30px 0 0;
text-align:center;
}
#absentlink p a{
display:inline-block;
text-decoration:none;
color:#fff;
background-color:#5a9cd9;
padding:6px 50px;
border-radius:8px;
}

/* 欠席フォーム */
/* 生徒登録フォーム */
#absentcontact .container div,
#entry .container div
{
text-align:left;
}
#absentcontact .container div p,
#entry .container div p
{
font-size:16px;
text-align:center;
}
#absentcontact .container dl,
#absentcontact_confirm .container dl,
#entry .container dl,
#entry_confirm .container dl
{
overflow: hidden;
display:table;
width:100%;
background-color:#ffffff;
margin:0;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
}
#absentcontact .container dl#table_first,
#absentcontact_confirm .container dl#table_first,
#entry .container dl#table_first,
#entry_confirm .container dl#table_first
{
border-top: 2px solid #000;
border-radius:10px 10px 0 0;
}
#absentcontact .container dl#table_last,
#absentcontact_confirm .container dl#table_last,
#entry .container dl#table_last,
#entry_confirm .container dl#table_last
{
border-radius:0 0 10px 10px;
}
#absentcontact .container dl#table_last pre,
#entry .container dl#table_last pre
{
font-size:0.8em;
font-weight:normal;
line-height:160%;
}
#absentcontact .container dt,
#absentcontact_confirm .container dt,
#entry .container dt,
#entry_confirm .container dt
{
overflow:hidden;
display:table-cell;
box-sizing: border-box;
vertical-align:middle;
padding:20px;
font-size:0.9em;
background-color:#E8F2FA;
color:#000;
}
#absentcontact .container dt span,
#absentcontact .container dd span,
#entry .container dt span,
#entry .container dd span
{
display:block;
float:right;
padding:0 10px;
font-size:0.7em;
background-color:#65A6DE;
color:#ffffff;
}
#absentcontact .container dd,
#absentcontact_confirm .container dd,
#entry .container dd,
#entry_confirm .container dd
{
display:table-cell;
padding:20px;
vertical-align:middle;
}
#absentcontact .container dd strong,
#entry .container dd strong
{
display:block;
color:#DC503C;
margin-top:8px;
}
#absentcontact .container dd i,
#entry .container dd i
{
display:block;
margin-top:8px;
font-size:14px;
font-style:normal;
}

#absentcontact div#submitArea,
#absentcontact_confirm div#submitArea,
#entry div#submitArea,
#entry_confirm div#submitArea
{
margin:20px 0;
}
#absentcontact div#submitArea button,
#absentcontact_confirm div#submitArea button,
#entry div#submitArea button,
#entry_confirm div#submitArea button
{
width:320px;
background:linear-gradient(to bottom, #5a9cd9,#377fb5);
color:#ffffff;
}

#flashMessage{
color:#DC503C;
font-weight:bold;
text-align:center !important;
}
#absentcontact_submit .container > p,
#entry_submit .container > p
{
text-align:center;
margin-bottom:30px;
}
#absentcontact_submit #main .container > div,
#entry_submit #main .container > div
{
border:2px solid #893a2e;
border-radius:5px;
padding:30px;
}
#entry #table_last h3 {
font-size: 1.2em;
font-weight: normal;
text-align: center;
color: #000;
margin-bottom: 20px;
}
#entry #table_last div {
width: 780px;
padding: 10px;
margin: 0 auto;
height: 200px;
border: 1px solid #8c8c8c;
border-radius: 3px;
background-color: #f5f5f5;
overflow: scroll;
}
#entry #table_last div p {
font-size: 0.8em;
line-height: 150%;
text-align:left;
}
#entry #table_last dd > fieldset {
width: 300px;
margin: 20px auto 30px;
background-color: #fff;
box-sizing: border-box;
border: none;
padding: 0;
overflow: hidden;
text-align: center;
}
#entry #table_last dd > fieldset legend {
float: none;
background-color: #fff;
font-size: 0.8em;
padding: 0;
}


#login_form{
background:#ffffff;
padding:50px 0;
}

#login_form dl{
overflow: hidden;
display: table;
padding-bottom: 20px;
border: none;
}
#login_form dt{
display: table-cell;
box-sizing: border-box;
vertical-align: middle;
padding: 0 10px;
font-size: 0.9em;
background-color: #ffffff !important;
}
#login_form dd{
display: table-cell;
padding: 0;
}
#login_form button{
width: 320px;
background-color: #65A6DE;
color: #ffffff;
}


/*
   PC ---------------------------------------
 */
@media screen and (min-width:480px){
.sp{
display:none !important;
}
.nav-wrap {
display: block !important;
}

.container{
width:900px;
margin:0 auto;
}
.container > h1{
padding:20px;
}
.container > h1 span{
font-size:0.8em;
}
#index ul#bigBtn li a{
font-size:1.5em;
padding:15px 0;
}
#area ul#bigBtn li a{
font-size:1.5em;
padding:15px 0;
}
ul.col1 li dl,
ul.col2 li dl,
ul.col3 li dl,
ul.col4 li dl,
ul.col5 li dl,
ul.col6 li dl
{
width:200px;
margin:10px auto;
}
ul.col1 li dl dt img,
ul.col2 li dl dt img,
ul.col3 li dl dt img,
ul.col4 li dl dt img,
ul.col5 li dl dt img,
ul.col6 li dl dt img
{
/*width:30px;*/
height:26px;
}
ul.col1 li dl dt span,
ul.col2 li dl dt span,
ul.col3 li dl dt span,
ul.col4 li dl dt span,
ul.col5 li dl dt span,
ul.col6 li dl dt span
{
margin-left:10px;
}
nav{
padding:30px 0 0;
}
nav a{
font-size:1.2em;
}

#absentcontact .container dt,
#absentcontact_confirm .container dt,
#entry .container dt,
#entry_confirm .container dt
{
width:270px;
font-size:1.2em;
}
#absentcontact .container dt.notification,
#absentcontact_confirm .container dt.notification,
#entry .container dt.notification,
#entry_confirm .container dt.notification
{
font-size:1em;
}
#absentcontact .container dt.notification span,
#absentcontact_confirm .container dt.notification span,
#entry .container dt.notification span,
#entry_confirm .container dt.notification span
{
font-size:0.9em;
}
#absentcontact input.vshort,
#entry input.vshort
{
width:100px;
}
#absentcontact input.short,
#entry input.short
{
width:160px;
}
#absentcontact input.middle,
#entry input.middle
{
width:320px;
}
#absentcontact input.long,
#entry input.long
{
width:95%;
}
#absentcontact textarea,
#entry textarea
{
height:8em;
}
#absentcontact_confirm .container dd,
#entry_confirm .container dd
{
font-size:1.3em;
}
#absentcontact_confirm .container #table_first,
#entry_confirm .container #table_first
{
border-bottom:none;
text-align:center;
}
#absentcontact_confirm .container #table_first p,
#entry_confirm .container #table_first p
{
line-height:160%;
}
#absentcontact_confirm .container dt,
#entry_confirm .container dt
{
background-color:#ffffff;
}
#entry #table_last dd strong {
text-align: center;
margin-bottom: 30px;
}

#login_form dl{
width: 520px;
margin: 0 auto;
overflow: hidden;
}
#login_form dt{
width: 100px;
text-align: right;
}
#login_form dd input[type="text"],
#login_form dd input[type="password"]
{
width:310px;
padding:5px;
background-color:#ffffff;
}






} /* end:PC */

/*
   MOBILE -----------------------------------
 */
@media screen and (max-width:479px){
.pc{
display:none !important;
}
#header{
padding:10px 20px;

}
#header h1{
font-size:1.2em;
line-height:180%;
}
#footer p{
font-size:0.9em;
}
#main{
padding:20px 0 20px;
}
.container{
width:auto;
margin:0 15px;
}
.container > h1{
font-size:1.3em;
margin-bottom:20px;
}
.container > h1 span{
font-size:0.8em;
}
.container > h2{
font-size:1.0em;
}
#index ul#bigBtn li a{
font-size:1.2em;
padding:10px 0;
}
#area ul#bigBtn li a{
font-size:1.0em;
padding:10px 0;
}
ul#bigBtn li{
float:left;
width:46%;
}
ul.col1 li dl,
ul.col2 li dl,
ul.col3 li dl,
ul.col4 li dl,
ul.col5 li dl,
ul.col6 li dl
{
width:100px;
margin:10px auto;
}
ul.col1 li dl dt img,
ul.col2 li dl dt img,
ul.col3 li dl dt img,
ul.col4 li dl dt img,
ul.col5 li dl dt img,
ul.col6 li dl dt img
{
/*width:30px;*/
height:20px;
}

#absentcontact .container dl,
#absentcontact_confirm .container dl,
#entry .container dl,
#entry_confirm .container dl
{
display:block;
}
#absentcontact .container dt,
#absentcontact_confirm .container dt,
#entry .container dt,
#entry_confirm .container dt
{
display:block;
width:100%;
padding:10px;
font-size:1em;
}
#absentcontact .container dd,
#absentcontact_confirm .container dd,
#entry .container dd,
#entry_confirm .container dd
{
display:block;
margin-left:0;
padding:10px;
}
#absentcontact .container dd label,
#entry .container dd label
{
font-size:0.9em;
margin-right:6px;
}
#absentcontact input.vshort,
#entry input.vshort
{
width:80px;
}
#absentcontact input.short,
#entry input.short
{
width:50%;
}
#absentcontact input.middle,
#entry input.middle
{
width:300px;
}
#absentcontact input.long,
#entry input.long,
#entry select.long
{
width:95%;
}
#absentcontact textarea,
#entry textarea
{
height:8em;
}
#absentcontact input::-webkit-input-placeholder,
#entry input::-webkit-input-placeholder
{
padding-top: 0.2em;
}
#absentcontact #table_last dd button,
#entry #table_last dd button
{
width:100%;
}
#entry #table_last h3 {
font-size: 1em;
}
#entry #table_last div {
width: 90%;
}


#login_form {
padding:20px;
}
#login_form dl{
width: 100%;
display: block;
padding-bottom: 0px;
margin: 0px 0 10px;
}
#login_form dl+dl{
margin-bottom:20px;
}
#login_form dt{
display: block;
width: 100%;
text-align: left;
}
#login_form dd{
display: block;
margin: 0;
}
#login_form dd input[type="text"],
#login_form dd input[type="password"]{
width: 95%;
background-color: #fff;
}
#login_form button{
width: 100%;
}


.nav-button {
display: block;
cursor: pointer;
}

.nav-wrap {
position: fixed;
left: 0;
top: 0;
display: none;
z-index: 10;
background-color:#5f3b13;
/*background-color: rgba(0, 0, 0, 0.7);*/
width: 100%;
height: 100%;
}
.nav-wrap h2{
font-size:16px;
margin:20px 0 0;
text-align:center;
}
.nav-wrap > div{
background-color:#ffffff;
width:85%;
margin:0 auto;
border-radius:10px;
}
.nav-wrap .nav {
height: 100%;
position: relative;
overflow-x: hidden;
overflow-y: auto;
margin:20px;
padding:0;
}
.nav-wrap li {
display: block;
/*margin: 2em;*/
margin:0;
padding:0;
text-align:center;
border-bottom:1px solid #E3E7EB;
}
.nav-wrap li:last-child{
border-bottom:none;
}
.nav-wrap li a {
color: #000;
font-size: 16px;
padding:10px 0;
display:block;
}

/*メニューボタンのエフェクト*/
.nav-button,
.nav-button span {
display: inline-block;
transition: all 0.4s;
box-sizing: border-box;
}

.nav-button {
z-index: 20;
position: relative;
width: 40px;
height: 36px;
}
.nav-button.active{
position: fixed;
right:20px;
}
.nav-button span {
position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: #fff;
border-radius: 4px;
}

.nav-button span:nth-of-type(1) {
top: 0;
}

.nav-button span:nth-of-type(2) {
top: 16px;
}

.nav-button span:nth-of-type(3) {
bottom: 0;
}

.nav-button.active span:nth-of-type(1) {
-webkit-transform: translateY(16px) rotate(-45deg);
transform: translateY(16px) rotate(-45deg);
}

.nav-button.active span:nth-of-type(2) {
opacity: 0;
}

.nav-button.active span:nth-of-type(3) {
-webkit-transform: translateY(-16px) rotate(45deg);
transform: translateY(-16px) rotate(45deg);
}





} /* end:MOBILE */