@charset "utf-8";

/* Show "Left" drawer for the "Right" drawer in the demo */
.snapjs-right .snap-drawer-left {
	display: block;
	right: 0;
	left: auto;
}

/* Hide the actual "Right" drawer in the demo */
.snapjs-right .snap-drawer-right {
	display: none;
}

/* Show the "Drag" background in the demo */

#content {
    background-color: #fff;
    -webkit-box-shadow: -5px 0 2px 0 rgba(0,0,0,0.1);
       -moz-box-shadow: -5px 0 2px 0 rgba(0,0,0,0.1);
        -ms-box-shadow: -5px 0 2px 0 rgba(0,0,0,0.1);
         -o-box-shadow: -5px 0 2px 0 rgba(0,0,0,0.1);
            box-shadow: -5px 0 2px 0 rgba(0,0,0,0.1);
}

/* Demo toolbar styles */
#bar-title {
  background: #3498db;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: auto;
  height: 44px;
  z-index: 10;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

#bar-title h1 {
  font-size: 16px;
  line-height: 44px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 0;
  right: 44px;
  left: 44px;
    overflow: hidden;
    white-space: nowrap;
    -webkit-text-overflow: ellipsis;
       -moz-text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
         -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
  width: auto;
  height: 44px;
  margin: 0;
  color: #fff;
}

#bar-title h1.subtitle {
    line-height: 30px;
}

#bar-subtitle {
    display: block;
    font-size: 70%;
    line-height: 20px;
    text-align: center;
    position: absolute;
    bottom: 0px;
    right: 44px;
    left: 44px;
    overflow: hidden;
    white-space: nowrap;
    -webkit-text-overflow: ellipsis;
       -moz-text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
         -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
    width: auto;
    color: #fff;
}

#open-left {
  background-image: url(../image/snap-open.png);
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 0;
}

#back-page {
  /* 画像の右側に任意の文字列を入れられるにしてある */
  background-image: url(../image/back.png);
  background-position: 13px center;
  background-repeat: no-repeat;
  display: block;
  width: auto;
  padding-left: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  line-height: 44px;
}

#reload-page {
  background-image: url(../image/reload.png);
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  right: 0;
}

#logout {
  background: #444c52;
  display: block;
  width: auto;
  padding: 0 12px;
  height: 44px;
  position: absolute;
  top: 0;
  right: 0;
  color: #f0f0f0;
  font-size: 80%;
  line-height: 44px;
}

/* Show the red "No Drag" box in the demo */
#no-drag,
#do-drag {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	height: 100px;
	margin-left: -25%;
	margin-top: -50px;
	background: red;
	color: #FFF;
	text-align: center;
	line-height: 100px;
}
#do-drag{
	background: green;
}


/* Show the translucent white "Toggle" boxes in the demo */
.snap-drawer .toggler {
	width: 80%;
	background: rgba(255,255,255,0.5);
	margin: 0 auto;
	position: relative;
	top: 70px;
	padding: 20px;
	margin-bottom: 20px;
	text-align: center;
}

/* Styles for expanding "Search" input in the "Expanding" demo */
.snap-drawer .search {
	background: #ccd0d1;
	height: 44px;
}

.snap-drawer #search {
	height: 30px;
	width: 250px;
	margin: 7px 7px 0 7px;
	background: #fff;
	border: none;
	padding-left: 15px;
}

.lt-ie8 #search {
	height: 18px;
	width: 232px;
	margin: 7px 7px 0 7px;
	background: #fff;
	border: none;
}

.snap-drawer #search:focus {
	outline: none;
	border-color: #151515;
}

/* Styles for fading out the drawer content in the "Expanding" demo */
.drawer-inner {
	-webkit-transition: opacity 0.3s ease;
	   -moz-transition: opacity 0.3s ease;
	    -ms-transition: opacity 0.3s ease;
	     -o-transition: opacity 0.3s ease;
	        transition: opacity 0.3s ease;
}

.snapjs-expand-left .drawer-inner,
.snapjs-expand-right .drawer-inner {
	opacity: 0;
}

/* Styles for the "Settings" demo */
.opt {
	padding: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.opt p {
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 5px;
	color: #222;
	color: rgba(0, 0, 0, 0.6);
}

/* Default demo styles */
.snap-content {
/*   background: #BFC7D8; */
}

.snap-drawers {
/*   background: #444; */
}

.snap-drawer {
/* 	background: #444; */
    color: #222;
}

.snap-drawer input[type=button],
.snap-drawer input[type=submit],
.snap-drawer button {
    padding: 3px 10px;
    width :auto;
}

.snap-drawer .entry {
    font-size: 80%;
    padding: 5px 10px;
    margin: 0;
    margin-top: -1px;
    border-top: 1px solid #dce0e1;
    border-bottom: 1px solid #dce0e1;
    position: relative;
    z-index: 5;
}

.snap-drawer ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.snap-drawer li > span,
.snap-drawer li > a,
.snap-drawer li > p {
  display: block;
  padding: 10px;
  text-decoration: none;
  background: #ecf0f1;
    color: #404040;
    margin: 0;
}

.snap-drawer li > a:hover,
.snap-drawer li > p:hover {
    background: #dce0e1;
}

.snap-drawer li > a.active {
    background: #dce0e1;
}

.snap-drawer li > a .small {
    display: block;
    color: #b1b0b1;
    font-size: 70%;
    margin-left: 10px;
}


/* ============
    カスタマイズ
   ============ */
.snap-drawer .entry.root-user {
    background-color: #ebcfcd;
    background-image: url(../image/root-user.png);
    background-position: 10px center;
    background-repeat: no-repeat;
    border-top: 1px solid #dbbfbd;
    border-bottom: 1px solid #dbbfbd;
    margin-top: -1px;
    padding-left: 35px;
    position: relative;
    z-index: 3;
}
.snap-drawer .entry.admin-user {
    background-color: #dcd2e5;
    background-image: url(../image/admin-user.png);
    background-position: 10px center;
    background-repeat: no-repeat;
    border-top: 1px solid #ccc2d5;
    border-bottom: 1px solid #ccc2d5;
    margin-top: -1px;
    padding-left: 35px;
    position: relative;
    z-index: 3;
}
.snap-drawer .entry.general-user {
    background-color: #c7deed;
    background-image: url(../image/guest-user.png);
    background-position: 10px center;
    background-repeat: no-repeat;
    border-top: 1px solid #b7cedd;
    border-bottom: 1px solid #b7cedd;
    margin-top: -1px;
    padding-left: 35px;
    position: relative;
    z-index: 3;
}

.drawer-inner .my-account {
    padding: 15px 10px 10px 10px;
    overflow: hidden;
    white-space: nowrap;
    -webkit-text-overflow: ellipsis;
       -moz-text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
         -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
    border-bottom: 1px solid #ccd0d1;
    text-align: center;
    position: relative;
    z-index: 4;
}

.drawer-inner .my-account .account-name {
    padding-top: 29px;
    line-height: 24px;
    font-weight: bold;
    background-position: center top;
    background-repeat: no-repeat;
}
.drawer-inner .my-account .account-name.role0 { background-image: url(../image/root-user24x24.png) }
.drawer-inner .my-account .account-name.role1 { background-image: url(../image/admin-user24x24.png) }
.drawer-inner .my-account .account-name.role2 { background-image: url(../image/guest-user24x24.png) }

.drawer-inner .my-account .my-account-restriction {
    margin-bottom: 10px;
}

.drawer-inner li > a span,
.drawer-inner li > p span {
    display: block;
    height: 24px;
    padding-left: 34px;
    line-height: 24px;
    padding-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    -webkit-text-overflow: ellipsis;
       -moz-text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
         -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
    background-repeat: no-repeat;
/*     background-position: left top; */
    background-image: url(../image/menu/sprite_menu.png);
}

ul.accordion ul {
    display:none;
}
/*
ul.accordion > li > p span      { background-image: url(../image/open.png); }
ul.accordion > li > p span.open { background-image: url(../image/close.png); }
*/
ul.accordion > li > p span      { background-position: -5px -379px; }
ul.accordion > li > p span.open { background-position: -5px -39px; }

ul.accordion > li > ul > li > a {
    padding-left: 25px;
}

.drawer-inner .navi {
    position: relative;
}

.drawer-inner .navi:after {
  content: ' ';
  border-bottom: 1px solid #dce0e1;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.drawer-inner li.navi.active:after {
  border-bottom: 1px solid #ccd0d1 !important;
  z-index: 6;
}

.drawer-inner li.navi.active:before,
.drawer-inner .navi:hover:before {
  content: ' ';
  border-top: 1px solid #dce0e1;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  z-index: 1;
}

.drawer-inner #menu-wrapper .navi.last:after,
.drawer-inner #menu-wrapper .navi ul .navi.last:after {
  left: 0px !important;
}

.drawer-inner #menu-wrapper .navi:after {
  left: 45px !important;
}

.drawer-inner #menu-wrapper li ul .navi:after {
  left: 60px !important;
}

.drawer-inner #menu-wrapper p {
    z-index: 5;
}


.snap-drawer #role-wrapper li > span{
  padding-left: 0px;
}


/*アイコン*/
/*
.drawer-inner .navi-home a span                 { background-image: url(../image/menu/home.png); }
.drawer-inner .navi-safety-report a span        { background-image: url(../image/menu/safety_report.png); }
.drawer-inner .navi-safety-summary a span       { background-image: url(../image/menu/safety_summary.png); }
.drawer-inner .navi-safety-list a span          { background-image: url(../image/menu/safety_list.png); }
.drawer-inner .navi-safety-search a span        { background-image: url(../image/menu/safety_search.png); }
.drawer-inner .navi-bbs a span                  { background-image: url(../image/menu/bbs.png); }
.drawer-inner .navi-mail a span                 { background-image: url(../image/menu/mail.png); }
.drawer-inner .navi-survey a span               { background-image: url(../image/menu/survey.png); }
.drawer-inner .navi-survey-answer a span        { background-image: url(../image/menu/survey_answer.png); }
.drawer-inner .navi-config-user a span          { background-image: url(../image/menu/config_user.png); }
.drawer-inner .navi-config-organization a span  { background-image: url(../image/menu/config_organization.png); }
.drawer-inner .navi-config-group a span         { background-image: url(../image/menu/config_group.png); }
.drawer-inner .navi-config-template a span      { background-image: url(../image/menu/config_template.png); }
.drawer-inner .navi-config-filter a span        { background-image: url(../image/menu/config_filter.png); }
.drawer-inner .navi-config-public-search a span { background-image: url(../image/menu/config_outside_safety_search.png); }
.drawer-inner .navi-logout a span               { background-image: url(../image/menu/logout.png); }
*/
.drawer-inner .navi-home a span                 { background-position: -5px -277px; }
.drawer-inner .navi-safety-report a span        { background-position: -5px -447px; }
.drawer-inner .navi-safety-summary a span       { background-position: -5px -515px; }
.drawer-inner .navi-safety-list a span          { background-position: -5px -413px; }
.drawer-inner .navi-safety-search a span        { background-position: -5px -481px; }
.drawer-inner .navi-bbs a span                  { background-position: -5px -5px; }
.drawer-inner .navi-mail a span                 { background-position: -5px -345px; }
.drawer-inner .navi-survey a span               { background-position: -5px -583px; }
.drawer-inner .navi-survey-answer a span        { background-position: -5px -549px; }
.drawer-inner .navi-config-user a span          { background-position: -5px -243px; }
.drawer-inner .navi-config-organization a span  { background-position: -5px -141px; }
.drawer-inner .navi-config-group a span         { background-position: -5px -107px; }
.drawer-inner .navi-config-template a span      { background-position: -5px -209px; }
.drawer-inner .navi-config-filter a span        { background-position: -5px -73px; }
.drawer-inner .navi-config-public-search a span { background-position: -5px -175px; }
.drawer-inner .navi-logout a span               { background-position: -5px -311px; }
.drawer-inner .navi-login a span                { background: none; padding-left: 10px; }
.drawer-inner .navi-link a span                 { background-position: -5px -617px; }

.drawer-inner .navi-home a span.home                       { background-position: -5px -268px; }
.drawer-inner .navi-safety-report a span.safety-report     { background-position: -5px -438px; }
.drawer-inner .navi-survey-answer a span.survey-answer     { background-position: -5px -540px; }
.drawer-inner .navi-safety-search a span.safety-search     { background-position: -5px -472px; }
.drawer-inner .navi-bbs a span.bbs                         { background-position: -5px 4px; }
.drawer-inner .navi-logout a span.logout                   { background-position: -5px -302px; }
.drawer-inner .navi-link a span.link                       { background-position: -5px -608px; }

@media only screen and (min-width: 767px) {

    #bar-title h1 {
        font-weight: normal;
        font-size:1.5em;
    }
    
    #bar-title h1.subtitle {
        font-weight: normal;
        font-size:1.3em;
    }

}

@media only screen and (min-width: 1200px) {
    
    #content {
        margin-left: 265px;
        width: auto !important;
        box-shadow: none;
    }
    
    #open-left {
        display: none;
    }
}

/* Retinaディスプレイ対応 */
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
    #open-left   { background-image: url(../image/snap-open@2x.png); background-size: 18px 12px; }
    #back-page   { background-image: url(../image/back@2x.png); background-size: 18px 15px; }
    #reload-page { background-image: url(../image/reload@2x.png); background-size: 13px 15px; }
    .snap-drawer .entry.root-user    { background-image: url(../image/root-user@2x.png); background-size: 20px 20px; }
    .snap-drawer .entry.admin-user   { background-image: url(../image/admin-user@2x.png); background-size: 20px 20px; }
    .snap-drawer .entry.general-user { background-image: url(../image/guest-user@2x.png); background-size: 20px 20px; }
    .drawer-inner .my-account .account-name.role0 { background-image: url(../image/root-user24x24@2x.png); background-size: 24px 24px; }
    .drawer-inner .my-account .account-name.role1 { background-image: url(../image/admin-user24x24@2x.png); background-size: 24px 24px; }
    .drawer-inner .my-account .account-name.role2 { background-image: url(../image/guest-user24x24@2x.png); background-size: 24px 24px; }
/*
    ul.accordion > li > p span      { background-image: url(../image/open@2x.png); background-size: 24px 24px; }
    ul.accordion > li > p span.open { background-image: url(../image/close@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-home a span                 { background-image: url(../image/menu/home@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-safety-report a span        { background-image: url(../image/menu/safety_report@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-safety-summary a span       { background-image: url(../image/menu/safety_summary@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-safety-list a span          { background-image: url(../image/menu/safety_list@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-safety-search a span        { background-image: url(../image/menu/safety_search@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-bbs a span                  { background-image: url(../image/menu/bbs@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-mail a span                 { background-image: url(../image/menu/mail@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-survey a span               { background-image: url(../image/menu/survey@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-survey-answer a span        { background-image: url(../image/menu/survey_answer@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-config-user a span          { background-image: url(../image/menu/config_user@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-config-organization a span  { background-image: url(../image/menu/config_organization@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-config-group a span         { background-image: url(../image/menu/config_group@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-config-template a span      { background-image: url(../image/menu/config_template@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-config-filter a span        { background-image: url(../image/menu/config_filter@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-config-public-search a span { background-image: url(../image/menu/config_outside_safety_search@2x.png); background-size: 24px 24px; }
    .drawer-inner .navi-logout a span               { background-image: url(../image/menu/logout@2x.png); background-size: 24px 24px; }
*/
    .drawer-inner li > a span,
    .drawer-inner li > p span {
        background-image: url(../image/menu/sprite_menu@2x.png);
        background-size: 34px 646px;
    }
}