@charset "utf-8";



li{list-style: none;}

.lock { overflow:hidden;}

.modal-content {
 display           : inline;
}

.modal-content p {
 margin            : 0;
 padding           : 0;
}

.modal-overlay {
 z-index           : 1;
 display           : none;
 position          : static;
 top               : 0;
 left              : 0;
 width             : 100%;
 height            : 120%;
 background-color  : rgba(0,0,0,0.9);
 overflow-y        : auto;
}

.modal-wrap {
 z-index           : 2;
 display           : none;
 position          : fixed;
 top               : 0;
 left              : 0;
 width             : 100%;
 height            : 100%;
 overflow          : auto;
 background-color  : rgba(0,0,0,0.9);
}


.modal-open {
 display           : none;
}
.modal-close {
/* display           : none;*/
}
p.close_top{
 display           : none;
}
p.close_bottom{
 display           : none;
}

.menubox{
 float             : left;
 display           : inline;
 width             : 95%;
 margin            : 10px 0 0 0;
 padding           : 10px 0 10px 5%;
 border-bottom     : 1px solid #333333;
 text-align        : left;
}
.menubox2{
 float             : left;
 display           : inline;
 width             : 85%;
 margin            : 10px 0 0 0;
 padding           : 10px 0 10px 10%;
 border-bottom     : 1px solid #333333;
}
.menubox3{
 float             : left;
 display           : inline;
 width             : 95%;
 margin            : 10px 0 0 0;
 padding           : 10px 0 10px 5%;
 border-bottom     : 1px solid #333333;
 text-align        : left;
}
.menubox2 a,
.menubox a{
 float             : left;
 display           : inline;
 width             : 80%;
 margin            : 0 0 0 0;
 padding           : 0 0 0 0;
 text-align        : left;
}








.bg01{ background : #ff6666 }
.bg02{ background : #fc8800 }
.bg03{ background : #847e64 }
.bg04{ background : #c8c267 }


.menubox a:link { color : #ffffff; text-decoration : none;}
.menubox a:visited{ color : #ffffff; text-decoration : none;}
.menubox a:hover { color : #ffffff; text-decoration : underline;}

.menubox2 a:link { color : #ffffff; text-decoration : none;}
.menubox2 a:visited{ color : #ffffff; text-decoration : none;}
.menubox2 a:hover { color : #ffffff; text-decoration : underline;}


.menubox a.current:link { color : #FF6600; text-decoration : none;}
.menubox a.current:visited{ color : #FF6600; text-decoration : none;}
.menubox a.current:hover { color : #FF6600; text-decoration : underline;}




/* ========================================================== */
/* ========================================================== */
/* ========================================================== */

@media (max-width: 999px) {



.modal-content {
 display           : none;
 width             : 96%;
 margin            : 20px 0 20px 0;
 padding           : 0 2% 0 2%;
 -webkit-box-sizing: border-box;
 -moz-box-sizing   : border-box;
 -o-box-sizing     : border-box;
 -ms-box-sizing    : border-box;
 box-sizing        : border-box;
 color             : #ffffff;
 z-index           : 999 !important;
}

.modal-open {
 color             : #00f;
 text-decoration   : underline;
 display           : inline;
}

.modal-open:hover {
 cursor            : pointer;
}

.modal-close {
 text-align        : right;
 display           : inline;
}

.modal-close:hover {
 cursor            : pointer;
}

p.close_top{
 float:right;
 display             : inline;
 text-align        : right;
 padding           : 0 0 0 0;
 width             : 10%;
}

p.close_top .modal-close{
 margin            : 0px auto;
 padding           : 0 0 0 0;
 width             : 10%;
}
p.close_top .modal-close img{
 width             : 100%;
}

p.close_bottom{
 float:right;
 display             : inline;
 text-align        : right;
 padding           : 0 0 0 0;
 width             : 10%;
}
p.close_bottom .modal-close img{
 width             : 100%;
}

p.close_bottom a{
 display           : block;
 color             : #a5a4a4;
 padding           : 0 0 0 0;
 font-size         : 1.4em; 
}



}