/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* setting */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/



/* body
---------------------------------------------------- */
body {
font-family: -apple-system, BlinkMacSystemFont,"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
color: #000;
line-height:1.5em;
font-size:100%;
text-align:center;
background:#FFF;
-webkit-text-size-adjust: 100%;
letter-spacing: -0.05em;
}


/*link
---------------------------------------------------- */
A {text-decoration: none; cursor:pointer;} 
A:link {  color: #000000; font-weight:bold; } 
A:visited {  color: #000000; }
A:active {  color: #000000; }
A:hover {  color: #000000; text-decoration: underline; }







/*===============================================
共通
===============================================*/

#textsize { float:left; width:60%; text-align:left; margin:5px 0 15px 0; }
#textsize li { display:inline-block; background:#0096cc; margin-right:3px;  }
#textsize li a { display:block; padding:2px 6px; color:#ffffff; text-decoration:none; }
#textsize li.title { display:inline-block; background:none; margin-right:3px;  }




.wp {}
/*main { width:774px; margin:0 auto 20px auto; }*/
main { width:999px; margin:0 auto 20px auto; }

.sec01 { text-align:left; margin-bottom:3em; }

.h201 { background:url(../images/bk01.png) top repeat-x; padding:10px; font-size:140%; margin-bottom:20px; }
.h202 { padding: 10px; font-size:140%; margin-bottom:20px; border-bottom:1px dotted #000000 }
.h601 { text-align:center; font-size:140%; font-weight: bold; }
.h602 { margin-bottom:0.5em; font-size:140%; }
.h603 { font-size:140%; font-weight: bold; }
.h604 { font-size:85%; color:#666; text-align:left; font-weight:normal; margin-bottom:5px; }


.h301 { font-size:120%; padding:1em 0; margin:0 0 1em 0; border:1px solid #F36; text-align:center; }
.h301 input { vertical-align:middle; margin-right:0.5em; }
.h303 { color:#532900; font-size:140%; margin-bottom:15px; }


.h401 { color:#A7C93E; font-size:120%; }

.h6btn { text-align:center; background: #f5d3c4; display: block; padding:15px 0 15px 0;}

.ulform { margin:20px 0; border:1px #CCC solid; }
.ulform li { padding:1em; }
.ulform li:nth-child(2n+1) {background: #f5d3c4; }
.ulform li:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    overflow:hidden;
    font-size:0.1em;
    line-height:0;
}



.nave {
	position: relative;
	float:left;
	line-height:40px;
	width:30%;
    	background: #0096cc;
	border:1px solid #FFF;
	text-align:center;
	box-sizing: border-box;
}
 
.nave a {
    display: block;
	color:#ffffff;
}

.navetext {
	position: relative;
	float:left;
	line-height:20px;
	width:30%;
	text-align:left;
}

.table01 { width:100%; border: 2px solid #000000 padding:8px;}
.table01 tr { text-align:center; border: 1px solid #dcdcdc; }
.table01 th { vertical-align:middle; padding:10px 8px; border: 1px solid #dcdcdc; text-align:center; background:#0096cc;}
.table01 tr td.tbct{ text-align:center; }
.table01 td { text-align:left; vertical-align:middle; padding:10px 8px; }
.table01 tr.tbbl{ background:#e7effc; border: 1px solid #dcdcdc; }
.table01 tr.tbbg{ background:#dcdcdc; border: 1px solid #dcdcdc; }



.btn01 { font-size:120%; background:#01afec; padding:4px 10px; cursor:pointer; margin:1px; }
.btn02 { font-size:100%; background:#0096cc; padding:4px 8px; cursor:pointer; margin:1px; }
.btn04 { font-size:100%; background:#0096cc; padding:4px 8px; cursor:pointer; margin:1px; }
.btn05 { font-size:60%; background:#01afec; padding:4px 8px; cursor:pointer; margin:0px; }
/*正解　背景:赤　色:白*/
.btn07 { font-size:80%; background:#FF0000; color:#FFFFFF; margin:0px 5px; padding:1px 5px; cursor:pointer; margin:1px; }
/*残念　背景:グレー　色:白*/
.btn08 { font-size:80%; background:#808080; color:#FFFFFF; margin:0px 5px; padding:1px 5px; cursor:pointer; margin:1px; }
.btn09 { font-size:100%; background:#0096cc; padding:4px 8px; cursor:pointer; margin:1px; }


.item {
    position: relative;
    float:left;
    width:30%;
}

.item02 { 
	background:#FFE4D4; 
	text-align:left;
	margin:10px 0px 10px 0px;;
	padding:10px 10px 10px 10px;
	width:90%;
 }



.p01 { clear:both; text-align:center;  }
.p02 { margin:0.5em 0; }
.p03 { clear:both; text-align:center; margin:3em 0;  }
.p04 { 
	background:#FFE4D4; 
	text-align:left;
	clear:left;
	margin:10px 0px 10px 0px;;
	padding:10px 10px 10px 10px;
	width:90%;
 }

.p05 { text-align:right; padding:0px 15em 0px 0px;  }






.f1 { font-size:smaller; }
.f2 { font-size:100%; }
.f3 { font-size:larger; }


 /* set
---------------------------------------------------- */
.set01 {  }
.set01 li { padding:18px 0; border-bottom:dotted 1px #999; clear:both; }
.set01 li:after {
content: "";
clear: both;
display: block;
}
.set01 h6 { width:20%; float:left; font-size:85%; color:#666; text-align:left; font-weight:normal; }
.set01 h5 { text-align:left; width:80%; float:left;  }


.set02 { margin-bottom:40px; padding-bottom:40px; clear:both; border-bottom:dotted 1px #999; }
.set02:after {
content: "";
clear: both;
display: block;
}

/* article
---------------------------------------------------- */
.art01 { clear:both; text-align:left; }
.art02 { clear:both; margin-bottom:30px; }
.art02:after {
content: "";
clear: both;
display: block;
}
.art03 { clear:both; margin-bottom:30px; padding-top:20px; border-top:dotted 1px #999; }
.art03:after {
content: "";
clear: both;
display: block;
}


/* others
---------------------------------------------------- */
#scrollUp {
    background:url(../images/btn03.png);
    bottom: 10px;
    right: 10px;
    width: 60px;    /* Width of image */
    height: 60px;   /* Height of image */
}




/* photos
---------------------------------------------------- */



/* address
---------------------------------------------------- */






/*===============================================
タブレット用
===============================================*/
@media screen and (min-width: 860px){

.humWP { display:none; }
#humberger { display:none; }

/* layout */
/*#e7effc →　#f5d3c4　*/

header {min-width:1080px; padding:0px 10px 0 10px; background:#f5d3c4; }
header h1.logo-pc { width:1080px; margin:auto; }
header h1 .logo-pc img:after { content:""; clear: both; display: block;}
header h1.logo-sh { display:none; }
header h5 { width:60px; float:right; margin-right: 15%; }
header h5 img {width:100%;}


.ulform h5 { width:25%; float:left; padding:6px 10px 0 0; }
.ulform div { width:70%; float:right; }
.ulform div.calendar { width:100%; float:none; }
.ulform div.calendar-l { width:60%; float:left; }
.ulform div.calendar-r { width:40%; float:right; }

.mainPC { width:100%; margin:0 auto; padding:0; }
.mainSH {display:none; }


/*#e7effc →　#FFFFFF*/
footer { min-width:1080px; padding:0px 10px 0 10px; background:#FFFFFF ;}
footer h6 { margin-bottom:20px; }
footer .copyright { font-size:100%; text-align:center; }
footer h1.logo-pc { width:100%;}
footer h1.logo-sh { display:none; }

.btn04 { display:none; }
.btn10 { display:none; }
.btn11 { font-size:100%; background:#ea00ff; padding:4px 8px; cursor:pointer; margin:1px; }


.news img {
	margin:0 10px 0 0;
	max-width:90%;
	padding:1px;
	background:white;
	}


.menu01 { width:100%; background: #f5d3c4; margin:0px 0px; padding:10px 10pxo; display:-webkit-flex; display:flex; -webkit-justify-content:flex-start; justify-content:flex-start; flex-wrap:wrap; }
.menu01 li { width:19%; height:80px;  display:block;  }
.btn01 { 
  background:#01afec;
  margin:10px 10px; padding:10px 10px;
  font-size:110%;
  box-shadow: 3px 3px 4px #0096cc;
  transition: .3s;
  border-radius:5px;
}
.btn01 a { display:block; color:#000000; font-size:110%; transition: .3s; }
.btn01:hover a { text-decoration:none; color: #FFFFFF; }
.btn01:hover { 
  background:#007099;
  color: #FFFFFF;
  text-decoration:none;
  box-shadow: 3px 3px 4px #00bbff;
  border-radius:5px;

}
.btn01 li p { margin-left:10px; text-align:left; color:#000000; font-size:110%; }

.btn03 { 
  background:#f2f2f2;
  margin:10px 10px; padding:10px 10px;
  font-size:110%;
  box-shadow: 3px 3px 4px #f2f2f2;
  transition: .3s;
  border:3px solid #f2f2f2; border-radius:5px;
}
.btn03 a { display:block; color:#000000; font-size:110%; }
.btn03 li p { margin-left:10px; text-align:left; color:#000000; font-size:110%; }


.menu02 { width:100%; background: #f5d3c4; margin:0px 0px; padding:10px 10pxo; display:-webkit-flex; display:flex; -webkit-justify-content:flex-start; justify-content:flex-start; flex-wrap:wrap; }
.menu02 li { width:19%; height:80px; background:#f5b093; display:block; 
  margin:10px 10px; padding:10px 10px;
  font-size:110%;
  color: #000000;
  box-shadow: 3px 3px 4px #f56c31;
  transition: .3s;
  border:3px solid #fbe5d6; border-radius:5px;
}
.menu02 li:hover { 
  background:#f56c31;
  color: #000000;
  text-decoration:none;
  box-shadow: 3px 3px 4px #f5b093;
  border:3px solid #fbe5d6; border-radius:5px;
}
.menu02 li a { display:block; width:100%; background-position:top 10px left 20px; background-size:auto 60px; background-repeat:no-repeat; }
.menu02 li a p { margin-left:100px; text-align:left; line-height:80px; color:#000000; font-size:130%; }
.menu02 li a:hover { color: #000000; text-decoration:none; }
.menu02 li a:visited { color: #000000; text-decoration:none; }

.menu05 { width:100%; background:#deebf7; display:block; margin: 10px auto; padding:10px; }
.link { margin:5px 20px; padding:10px; }
.link li { width:18%; height:100px; border:1px solid #FFD700; padding:5px; float:left; font-size:100%; text-align:center; 
  background: linear-gradient(#FFFFFF, #FFD700);
  background: -moz-linear-gradient(#FFFFFF, #FFD700);
  background: -webkit-linear-gradient(#FFFFFF, #FFD700);
/*background: linear-gradient(60deg, #FFD700, #FFFFFF ); */
}
.link li a { line-height:100px; display:block; font-size:100%; }
.link li p {
   width: 80%;  /* 横幅(親ボックスの横幅に合わせる) */
   padding: 5px;  /* 内側の余白 */
}





}






/*===============================================
スマホ用
===============================================*/
@media screen and (max-width: 859px) {


header { padding-top:10px; background:#f5d3c4; }
header h1.logo-pc { display:none; }
header h1.logo-sh img { width:100%; }
header h5 { width:40px; float:right; }
header h5 img { width:100%; }



main { width: 93%; }



.h201 { padding:10px; font-size:100%; margin-bottom:20px; }
.h202 { padding: 10px; font-size:100%; margin-bottom:20px; border-bottom:1px dotted #000000 }

.h501 { width:100%; padding:6px 10px 0 0; text-align:left; }

.mainPC { display:none;  }
.mainSH { width:100%; margin:0 auto; padding:0; }
.btnPC { display:none;  }

/*#e7effc →　#FFFFFF*/
footer { padding:0px 10px 0 10px; background:#FFFFFF ; }
footer h6 { margin-bottom:20px; }
footer .copyright { font-size:80%; margin-bottom:10px; text-align:center; }
footer h1.logo-pc { display:none; }
footer h1.logo-sh img { width: 100%;}


/* set
---------------------------------------------------- */
.set01 {  }
.set01 li { padding:16px 0; border-bottom:dotted 1px #999; }
.set01 h6 { width:10em; font-size:85%; color:#666; text-align:left; font-weight:normal; }
.set01 h5 { text-align:left;  }

.news img {
	margin:0 10px 0 0;
	max-width:90%;
	padding:1px;
	background:white;
	}

.table01 { width:100%; }

.btn02 { font-size:70%; background:#0096cc; padding:4px 8px; cursor:pointer; margin:1px; color:#000000; }
.btn04 { font-size:80%; background:#0096cc; padding:4px 4px; cursor:pointer; margin:1px; color:#000000; }

.btn09 { display:none; }
.btn10 { font-size:80%; background:#ea00ff; padding:4px 8px; cursor:pointer; margin:1px; }
.btn11 { display:none; }


.item {
    position: relative;
    width:80%;
    max-width:100%;
}

.item02 { 
	background:#FFE4D4; 
	text-align:left; 
	margin:20px 0px 10px 0px;;
	padding:1px 5px 1px 5px; 
	width:90%
 }

.p04 { 
	background:#FFE4D4; 
	text-align:left; 
	margin:20px 0px 10px 0px;;
	padding:1px 5px 1px 5px; 
	width:90%
 }

.menu01 { width:100%; background: #f5d3c4; margin:0px 0px; padding:10px 10px; display:-webkit-flex; display:flex; -webkit-justify-content:flex-start; justify-content:flex-start; flex-wrap:wrap; }
.menu01 li { width:35%; height:80px; display:block;  }
.btn01 { 
  background:#01afec;
  margin:10px 10px; padding:10px 10px;
  font-size:110%;
  box-shadow: 3px 3px 4px #0096cc;
  transition: .3s;
  border-radius:5px;
}
.btn01 a { display:block; color:#000000; font-size:110%; transition: .3s; }
.btn01:hover a { text-decoration:none; color: #FFFFFF; }
.btn01:hover { 
  background:#007099;
  color: #FFFFFF;
  text-decoration:none;
  box-shadow: 3px 3px 4px #00bbff;
  border-radius:5px;

}
.btn01 li p { margin-left:100px; text-align:left; line-height:80px; color:#000000; font-size:110%; }

.btn03 { 
  background:#f2f2f2;
  margin:10px 10px; padding:10px 10px;
  font-size:110%;
  box-shadow: 3px 3px 4px #f2f2f2;
  transition: .3s;
  border:3px solid #f2f2f2; border-radius:5px;
}
.btn03 a { display:block; color:#000000; font-size:110%; }
.btn03 li p { margin-left:10px; text-align:left; color:#000000; font-size:110%; }


.menu02 { width:100%; background: #f5d3c4; margin:0px 0px; padding:10px 10px; display:-webkit-flex; display:flex; -webkit-justify-content:flex-start; justify-content:flex-start; flex-wrap:wrap; }
.menu02 li { width:35%; height:80px; background:#f5b093; display:block; 
  margin:10px 10px; padding:10px 10px;
  font-size:110%;
  color: #000000;
  box-shadow: 3px 3px 4px #f56c31;
  transition: .3s;
  border:3px solid #fad4eb; border-radius:5px;
}
.menu02 li:hover { 
  background:#f56c31;
  color: #000000;
  text-decoration:none;
  box-shadow: 3px 3px 4px #f5b093;
  border:3px solid #fad4eb; border-radius:5px;
}
.menu02 li a { display:block; width:100%; background-position:top 10px left 20px; background-size:auto 60px; background-repeat:no-repeat; }
.menu02 li a p { margin-left:100px; text-align:left; line-height:80px; color:#000000; font-size:110%; }
.menu02 li a:hover { color: #000000; text-decoration:none; }
.menu02 li a:visited { color: #000000; text-decoration:none; }



.menu05 { width:95%; background:#deebf7; display:block; margin:1em auto; padding:2px; }
.link { margin:20px 10px; padding:10px;  display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.link li { width:48%; height:30px; margin:5px 0; border:1px solid #FFD700; font-size:100%; text-align:center; 
  background: linear-gradient(#FFFFFF, #FFD700);
  background: -moz-linear-gradient(#FFFFFF, #FFD700);
  background: -webkit-linear-gradient(#FFFFFF, #FFD700);
/*background: linear-gradient(60deg, #FFD700, #FFFFFF ); */
}
.link li a { display:block; font-size:100%; }
.link li a img { width:100%; display:block; }






.humWP { background:#99CC00; width:100%; height:40px; position:fixed; top:0; right:0; display:block; }


    body.drawer-opened #page{
        left: -240px;
        box-shadow: 1px 0 2px #000;
        -webkit-box-shadow: 1px 0 2px #000;
    }
    body.drawer-opened .fixed-content{
        left: -240px;
    }
    body.drawer-opened #drawernav{
        right: 0;
    }
    body.drawer-opened #humberger .icon-bar{
        background: #99CC00;
    }
    body.drawer-opened #humberger :nth-child(1){
        transform:translate(0,8px) rotate(45deg);
        -webkit-transform:translate(0,8px) rotate(45deg);
    }
    body.drawer-opened #humberger :nth-child(2){
        transform:translate(-20px ,0);
        -webkit-transform:translate(-20px ,0);
        opacity:0;
    }
    body.drawer-opened #humberger :nth-child(3){
        transform:translate(0,-8px) rotate(-45deg);
        -webkit-transform:translate(0,-8px) rotate(-45deg);
    }
    body.drawer-opened #overlay{
        z-index: 3;
        opacity:0.2;
        left: -240px;
    }


}