/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* 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: #03C; font-weight:bold; } 
A:visited { color: #03C; }
A:active { color: #03C; }
A:hover { color: #03C; text-decoration: underline; }







/*===============================================
共通
===============================================*/
header { height:45px; border-bottom:1px #CCC solid; padding:10px 10px 0 10px; }
header h5 { width:87px; float:right; }

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



main { width:860px; margin:0 auto 40px auto; }

h1.logo { clear:both; padding:40px 20px; }

.h201 { background:#A7C93E; padding:10px; font-size:140%; margin-bottom:20px; }
.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; }

.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; }

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

.ul01 li { list-style:disc; margin-left:1.5em; }
.ul01 img { vertical-align:middle; }

.ul02 li { list-style: decimal; margin-left:1.5em; }


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



.tf001 { border:1px solid #CCC; padding:6px; font-size:100%; margin:1px; width:9em; }
.tf002 { border:1px solid #CCC; padding:6px; font-size:100%; margin:1px; width:2em;  }


.tbl01 th { vertical-align:middle; padding:2px; font-weight:normal; font-size:90%; }
.tbl01 th.opt01 { vertical-align:middle; padding:2px; font-weight:normal; color:#F36; font-size:90%; }
.tbl01 td { vertical-align:middle; padding:2px;  }



.tbl02 th { vertical-align:middle; padding:0.5em 1em 0.5em 0; font-weight:normal; font-size:90%; }
.tbl02 th.opt01 { color:#F36; }
.tbl02 td { vertical-align:middle; padding: 0.5em 1em 0.5em 0; }
.tbl02 tr { border-bottom:dashed 1px #DDD; }
.tbl02 tr:last-child { border-bottom: none; }
.tbl02 th { vertical-align:top; }
.tbl02 td { vertical-align:top; }


.tbl03 th { vertical-align:middle; padding:0.25em; font-weight:normal; font-size:90%;color:#F36; }
.tbl03 td { vertical-align:middle; padding: 0.25em; }
.tbl03 td.opt001 { font-size:80%; }
.tbl03 tr { }
.tbl03 tr:nth-child(2n+1) {background: #F0F0F0; }
.tbl03 th { vertical-align:middle; }
.tbl03 td { vertical-align:middle; }
th.th-p { background: #666; color:#FFF; }





.sec01 { text-align:left; margin-bottom:3em; }
.sec02 { text-align:center; margin:0 auto; }



.wp01 { margin:20px 0; }

.p01 { clear:both; text-align:center;  }
.p02 { margin:0.5em 0; }
.p03 { clear:both; text-align:center; margin:3em 0;  }

.addwp { background: #F0F0F0; padding:15px; }

footer { }
footer h6 { margin-bottom:20px; }
.copyright { font-size:85%; margin:10px 0; }



.sel01 { padding:4px; font-size:120%; margin:1px; }
.btn01 { font-size:120%; background:#A7C93E; padding:4px 8px; cursor:pointer; margin:1px; }
.btn02 { font-size:100%; background:#A7C93E; padding:4px 8px; cursor:pointer; margin:1px; }
.btn03 { font-size:120%; background:#F36; color:#FFF; padding:4px 8px; cursor:pointer; margin:1px; }
.btn04 { font-size:100%; background:#F36; color:#FFF; padding:4px 8px; cursor:pointer; margin:1px; }
.btn05 { font-size:60%; background:#A7C93E; padding:4px 8px; cursor:pointer; margin:0px; }



.tbl-calendar { width:100%;border:solid 1px #CCC;  line-height:100%; }

.tbl-calendar td { text-align:center; padding:4px; border:1px solid #CCC; background:#FFF; }
.tbl-calendar th { text-align:center; padding:4px; border:1px solid #CCC; background:#FFF; }
.tbl-calendar th.month { border-left:none; border-right:none; color:#000; font-size:120%; padding:10px 0; }
.calendar-box { background:#F0F0F0; border:solid 1px #CCC; padding:20px; }
.tbl-calendar td.today { font-weight:bold; background:#EBF2D2; }


.tbl-calendar2 { width:100%;border:solid 1px #CCC; line-height:100%; }

.tbl-calendar2 { font-size:90%; }
.tbl-calendar2 td { text-align:center; vertical-align:top; padding:2px; border:1px solid #CCC; background:#FFF; }
.tbl-calendar2 th { text-align:center; vertical-align:top; padding:2px; border:1px solid #CCC; background:#FFF; }
.tbl-calendar2 th.month { border-left:none; border-right:none; color:#000; padding:5px 0; vertical-align:middle; }
.tbl-calendar2 td.today { font-weight:bold; background:#EBF2D2; }






.tf01::-webkit-input-placeholder { color: #ccc; font-weight: normal; }
.tf01:-ms-input-placeholder { color: #ccc; font-weight: normal; }
.tf01::-moz-placeholder { color: #ccc; font-weight: normal; }


.p000 { padding:0.5em 0; }

.wpbox { margin:1em 0; }

.important { color:#F36; font-weight:bold; }


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


 /* 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 */

.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:48%; float:left; }
.ulform div.calendar-r { width:48%; float:night; }

.tf01 { border:1px solid #CCC; padding:6px; font-size:120%; margin:1px; width:50%;  }
.tf02 { border:1px solid #CCC; padding:6px; font-size:120%; margin:1px; width:80%;  }

.sec-l { width:48%; float:left; }
.sec-r { width:48%; float:right; }


.calendar-l { width:48%; float:left; }
.calendar-r { width:48%; float:right; }

}






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


h1.logo img { width:90%; }

main { width: 90%; }



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


.tf01 { border:1px solid #CCC; padding:6px; font-size:120%; margin:1px; width:90%;  }
.tf02 { border:1px solid #CCC; padding:6px; font-size:120%; margin:1px; width:90%;  }

.sec-l { margin-bottom:2em; }
.sec-r { margin-bottom:2em; }

.calendar-l { margin-bottom:2em; }
.calendar-r { margin-bottom:2em; }
.calendar-box { border:solid 1px #CCC; padding:10px; }



.tbl02 { width:100%; }
.tbl03 { width:100%; }

.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;
    }


}