@charset "utf-8";
/*!
 * Smartphone Theme
 */

/*########################################################################
 common
########################################################################*/
/*===============================================
 body
===============================================*/
/*===============================================
 layout
===============================================*/
header{ position: fixed; z-index: 999;}
header .headerLogo{margin-left: 60px; padding-top: 15px;}
header .headerLogo img{ display: block; width: 180px; top:2px; margin-bottom: 2px}
header .headerLogo em{display: none;}
header .headerLogo strong{ display: inline;}
header .headerMenu li{ margin-right: 10px;}
header .headerMenu li.userid{ display: none;}
header .headerMenu li.userid::before{ content: none;}
main{padding-top: 90px; padding-bottom: 100px;}
main #panelColor{width:100%; top:0;}
main #wrapper{ display: block;}
main #columnMain{ width: 90%; margin: 0 auto;}
footer .copyRight{ text-align: center;}

/*===============================================
 Frame Design
===============================================*/
.pc{display: none!important;}
.sp{display: block!important;}
.flexBox { display: block; margin-bottom: 0;}
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 { width: 100%; }
.docs{ width: 100%;}
.docsfr{ width: 100%; padding: 20px 20px ;}
.outlineTxt{ font-size: 14px; }


/*===============================================
 ttl
===============================================*/
h1.ttl{ font-size: 20px;}
h2.ttl{ font-size: 18px;}
h3.ttl{ font-size: 18px;}
/*===============================================
 table
===============================================*/
/*
.tbsThTop th{ display: none;}
.tbsThTop td{ display: block; }
*/
/*----------*/
.tbsThLeft th{ display: block; width: 100%; text-align: left; padding:10px 10px 0 10px; border-bottom:none;}
.tbsThLeft td{ display: block; width: 100%; padding:10px 10px 10px 10px;}
/*----------*/
.tbsBone th{ display: block; width: 100%; text-align: left;}
.tbsBone td{ display: block; width: 100%;}
/*----------*/
.tbsThTop-in th{display: table-cell!important; padding:2px 10px!important; text-align: center!important; width: auto!important; }
.tbsThTop-in td{display: table-cell!important; padding:2px 10px!important; text-align: center!important; width: auto!important; }
/*----------*/
.scrollTable{
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
  border: solid 1px #ccc;
}
/*===============================================
 list
===============================================*/
/*===============================================
 alert
===============================================*/
/*===============================================
 button
===============================================*/
.btnSet{ display: block;}
.btnSet li{ margin:10px auto 0 auto; width: 90%;padding: 0; text-align: center!important;}
.btnSet li:first-child{ margin-top:0;}



/*########################################################################
 base
########################################################################*/
/*===============================================
 share
===============================================*/
/*===============================================
 menu
===============================================*/
main #columnSide{
  z-index: 20;
  position: fixed;
  overflow: auto;
  top: 70px;
  left: 0;
  width: 280px;
  height: 100%;
  margin: 0;
  padding: 10px 10px 100px 10px;
  box-sizing: border-box;
  background: #fff;
  transform: translateX(-100%);
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#drawerSideMenu:checked ~ #columnSide { transform: none;}

/*background*/
.closeSideMenu {
  display: block;
  cursor: pointer; position: fixed; z-index: 10; inset: 0;
  pointer-events: none; transition: background .6s;
}
#drawerSideMenu:checked ~ .closeSideMenu {
  pointer-events: auto; background: rgba(0,0,0,.3);
}

/*hamburger*/
#drawerSideMenu { display: none;}
.openSideMenu {
  display: block; position: fixed;
  left: 10px; top: 10px; width: 42px; height: 51px;
  cursor: pointer; z-index: 99999; text-align: center;
}
.openSideMenu span {
  display: block; position: absolute;
  width: 30px; border-bottom: solid 3px #5a5c7c;
  transition: .35s ease-in-out; left: 6px;
}
.openSideMenu span:nth-child(1) { top: 9px; }
.openSideMenu span:nth-child(2) { top: 18px; }
.openSideMenu span:nth-child(3) { top: 27px; }
.openSideMenu span:nth-child(4) {
  border: none; color: #5a5c7c;
  font-size: 10px; font-weight: bold; top: 27px;
}

#drawerSideMenu:checked + .openSideMenu span:nth-child(1) {
  top: 18px; left: 6px; transform: rotate(-45deg); border-bottom: solid 3px #5a5c7c;}
#drawerSideMenu:checked + .openSideMenu span:nth-child(2),
#drawerSideMenu:checked + .openSideMenu span:nth-child(3) {
  top: 18px; transform: rotate(45deg); border-bottom: solid 3px #5a5c7c;}
#drawerSideMenu:checked + .openSideMenu span:nth-child(4){color: #5a5c7c;}

/*menuBox*/


/*===============================================
 container
===============================================*/
.container h2.head{ font-size: 16px;}
/*===============================================
 dashboard
===============================================*/
/*==== lastlogin ====*/
/*==== grandMenuBox ====*/
.grandMenu .grandMenuBox{ width: 49.07%; }
/*==== infoList ====*/

/*===============================================
 pager
===============================================*/
.pager li:nth-child(1){ width: 30%;}
.pager li:nth-child(2){ width: 40%; font-size: 14px; line-height: 120%; padding-top: 7px;}
.pager li:nth-child(3){ width: 30%;}
.pager li:nth-child(2){ }
.pager li a{ font-size: 14px;}



/*########################################################################
 loginScreen
########################################################################*/
#whole footer{position: static; bottom: 0; width: 100%;}
#loginScreen ._inner{ display: block; width: 90%;}
#loginScreen ._inner .clmnLeft{ width: 90%; margin: 0 auto; padding: 20px 0 0 0;}
#loginScreen ._inner .clmnRight{ width: 90%; margin: 0 auto; text-align: center;}
#loginScreen ._inner .siteName{ position: static; top: 0; left:0;transform:none; margin-bottom: 20px;}
#loginScreen ._inner .clmnRight .label{ text-align: left;}

/*===============================================
 
===============================================*/
#verifyScreen ._inner{ display: block; width: 90%; padding: 20px;}
/*===============================================
 
===============================================*/
/*===============================================
 
===============================================*/
/*===============================================
 
===============================================*/