@charset 'utf-8';

body {
    padding-top: 60px;
    padding-bottom: 40px;
}

.zf-green {
    color: #68b604;
}

.btn-success {
  background-color: #57a900;
  background-image: -moz-linear-gradient(top, #70d900, #57a900);
  background-image: -ms-linear-gradient(top, #70d900, #57a900);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#70d900), to(#57a900));
  background-image: -webkit-linear-gradient(top, #70d900, #57a900);
  background-image: -o-linear-gradient(top, #70d900, #57a900);
  background-image: linear-gradient(top, #70d900, #57a900);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70d900', endColorstr='#57a900', GradientType=0);
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
  background-color: #57a900;
}

.btn-success:active, .btn-success.active {
  background-color: #57a900;
}

div.container a.brand {
    background: url("../img/zf2-logo.png") no-repeat scroll 0 10px transparent;
    margin-left: 0;
    padding: 8px 20px 12px 40px;
}


/* customize */
form label {
    width: 30%;
    display:block;
    border-bottom: 1px #269abc solid;
    margin-bottom: 10px;
}

form label span {
    margin-right: 10px;
}

form label input {
    float: right;
}

form label select {
    float: right;
}




/*-- common/ ------------------------------------*/

h1,h2,h3,h4,h5,h6 {
    margin: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
    border: none;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}

th,td {
    border-top:none;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
}

tr:nth-child(even) {
    background: #f3f3f3;
}

article .contentBlock {
    margin-top: 20px;
    font-size: 14px;
}

p {
    margin: 0;
    padding: 0;
}

ul,ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nodata {
    padding-top: 15px;
    font-size: 16px;
    font-weight: bold;
}

.contentTitle {
    margin-top: 20px;
    position: relative;
}

.loginUser {
    text-align: right;
    position: absolute;
    top: -25px;
    right: 30px;
}

.loginUser .name {
    display: inline-block;
    padding-left: 10px;
    border-bottom: 1px solid #999;
}

article .mobile .contentTitle h2 {
    font-size: 24px;
    font-weight: bold;
}

article .mobile .contentTitle .loginUser {
    right: 10px;
}

.contentBlock .resultMsg {
    line-height:20px;
    font-size: 16px;
    font-weight: bold;
    color: #f00;
}


/*------------------------------------ /common --*/



/*-- menu/ ------------------------------------*/
.navbar {
    filter: none;
    background-image: none;
    background: #fff;
}
.navbar-inverse .navbar-toggle {
    border-color: #666;
}
.navbar-toggle {
    background-color: #ccc;
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    background-color: #ccc;
}
.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav>li>a {
    text-shadow: none;
}
.navbar-inverse .navbar-nav>li>a {
    color: #333;
    padding: 20px 12px 10px;
}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
    color: #999;
}
nav .navbar-brand {
    padding: 5px 15px;
}

nav .navbar-brand img {
    display: block;
}

/*------------------------------------ /menu --*/



/*-- login/ ------------------------------------*/

#login, 
#reminder {
    margin: 0 10px;
}

#login .input-label-class,
#reminder .input-label-class {
    width: auto;
    max-width: 20em;
    margin: 10px 0 0;
    padding-left: 0.5em;
}

#login form .input-label-class span,
#reminder .input-label-class span {
    display: inline-block;
    width: 8em;
    line-height: 24px;
    margin: 0;
}

#login form .input-label-class input,
#reminder .input-label-class input {
    float: right;
    padding: 1px 5px;
    width: 9em;
    height: 25px;
}

#login form fieldset ul,
#reminder fieldset ul {
    display: block;
    clear: both;
}

#login form #submit,
#reminder #submit{
    margin-top: 20px;
    display: block;
    width: 10em;
}

#login form li,
#reminder form li {
    color: #f33;
}

#login .err-msg,
#reminder .err-msg {
    margin-top: 20px;
    color: #f33;
    font-weight: bold;
}


.remind {
    margin-left: 20px;
}

#login fieldset fieldset {
    margin: 20px 0 0;
}

#login fieldset fieldset legend {
    font-size: 14px;
    margin: 0;
    border: none;
}

#login fieldset fieldset label {
    display: inline-block;
    width: 6em;
    margin-left: 20px;
    border-bottom-color: #999;
}



/*------------------------------------ /login --*/



/*-- top/ ------------------------------------*/

#top .messageList th {
    text-align: center;
    background: #00f;
    color: #fff;
    padding: 8px 0 3px;
}

#top .messageList td {
    padding: 5px 0 2px;
}

#top .messageList .read {
    width: 5em;
    text-align: center;
}

#top .messageList .title {
    padding-right: 1em;
    padding-left: 1em;
}

#top .messageList .unread {
    font-weight: bold;
}

#top .messageList .created {
    width: 20%;
    min-width: 10em;
    text-align: center;
}



/*--mobile ------*/

#top.mobile .messageList .read {
    width: 1.5em;
}

#top.mobile .messageList .created {
    width: 20%;
    min-width: 8.5em;
}

/*------ mobile--*/

/*------------------------------------ /top --*/



/*-- messageDetail/ ------------------------------------*/

#messageDetail .contentBlock li {
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    position: relative;
}

#messageDetail .contentBlock .mb {
    margin-bottom: 30px;
}

#messageDetail .title {
    position: absolute;
    top: 0;
    left: 0;
    width: 6.5em;
    padding: 5px 0.5em 0;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background: #00f;
    color: #fff;
    line-height: 20px;
    box-sizing: content-box;
    border-top-left-radius: 8px;
}

#messageDetail .contentBlock p {
    margin: 0 0 0 7.5em;
    padding: 5px 10px 0;
    font-size: inherit;
    line-height: 20px;
}

#messageDetail .mailto {
    display: block;
    float: right;
    margin-top: -3px;
    padding: 3px 10px 0;
    background: #269abc;
    color: #fff;
}

#messageDetail .contentBlock .message {
    border: none;
}

#messageDetail .contentBlock .messageBody {
    margin: 0 0 0 7.49em;
    border: 1px solid #ccc;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

#messageDetail .contentBlock .message p {
    margin: 0;
    border: none;
    padding: 2px 10px;
    min-height: 3em;
}


/*--mobile ------*/

#messageDetail.mobile .title {
    position: static;
    border-top-right-radius: 8px;
}

#messageDetail.mobile .contentBlock li {
    border: none;
}

#messageDetail.mobile .contentBlock li > p {
    margin: 0;
    border: 1px solid #ccc;
}

#messageDetail.mobile .mailto {
    margin-top: -4px;
}

#messageDetail.mobile .contentBlock .messageBody {
    margin: 0;
}

/*------ mobile--*/

/*-- messageDetail/ ------------------------------------*/



/*-- shift/ ------------------------------------*/

#shift .btnNav .date {
    display: inline-block;
    font-size: 16px;
    margin-right: 20px;
}

#shift .btnNav div {
    display: inline-block;
}

#shift .btnNav .btn {
    padding: 6px;
}

#shift .shiftCalendar caption {
    font-size: 20px;
    line-height: 1.6;
}

#shift .shiftCalendar .sun { background-color: #fcc; }
#shift .shiftCalendar .sat { background-color: #cdf; }
#shift .shiftCalendar .today { background-color: #ffc; }
#shift .shiftCalendar .holiday p {
    font-weight: bold;
    color: #f33;
}

#shift .shiftCalendar th,
#shift .shiftCalendar td {
    text-align: center;
    padding: 2px 0;
    min-width: 5em;
}

#shift .shiftCalendar p {
    margin: 5px 0 0;
    font-size: 16px;
}

#shift .shiftCalendar select {
    margin:2px 0 2px;
    width: 90%;
    border-radius: 4px;
}

#shift .remarkBlock {
    margin-top:20px;
}

#shift .remarkBlock label {
    border-bottom: 1px #269abc solid;
    margin-bottom: 10px;
    display: block;
    width: 5em;
}

#shift .remarkBlock textarea {
    width: 100%;
}

#shift table td {
    font-family: Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}



/*--mobile -----*/
#shift.mobile .years {
    font-size: 18px;
    text-align: center;
    margin-top: 10px;
}

#shift.mobile .remarkBlock {
    margin-top: 10px;
}

#shift.mobile .remarkBlock label {
    margin-bottom: 5px;
}

#shift.mobile table {
    margin: 30px 0 0;
}
    
#shift.mobile table tr {
    background: #fff;
}

#shift.mobile td p {
    text-align: center;
    font-size: 16px;
}

#shift.mobile table label {
    border: none;
    margin: 5px 5px 3px;
    display: inline-block;
    width: 5em;
    line-height: 40px;
    text-align: right;
}

#shift.mobile table .holiday label {
    color: #f33;
}

#shift.mobile .Sun { background-color: #fcc; }
#shift.mobile .Sat { background-color: #cdf; }


#shift.mobile table select {
    width: 9em;
    margin-left: 10px;
    padding: 5px 5px 3px;
    border-radius: 4px;
}

#shift.mobile table p .shift {
    display: inline-block;
    width: 9em;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
    padding: 5px 5px 3px;
    border-radius: 4px;
}

    
/*------------------------------------ /shift --*/



/*-- fixed-shift/ ------------------------------------*/

#fixed-shift .btnNav {
    font-size: 16px;
}

#fixed-shift .date {
    float: left;
    margin-right: 50px;
    line-height: 30px;
    font-size: 18px;
    font-weight: bold;
}

#fixed-shift .check {
    float: left;
    line-height: 30px;
}

#fixed-shift .check input {
    margin-left: 30px;
    line-height: 1.4;
}

#fixed-shift table {
    width: auto;
    margin: 10px 0 0;
    font-size: 12px;
}

#fixed-shift .flg0 {
    color:#aaa;
}

#fixed-shift th,
#fixed-shift td {
    text-align: center;
    min-width: 120px;
}

#fixed-shift tr p {
    margin: 0 auto;
    padding: 5px 0.5em 2px;
}
    
#fixed-shift th {
    font-size: 14px;
}

#fixed-shift th .shiftDate {
    padding: 5px 5px 2px;
    font-size: 14px;
    font-weight: bold;
}

#fixed-shift .shiftDate a {
    display: block;
    padding: 5px 0 2px;
}


/*--mobile --------*/
#fixed-shift.mobile .shiftList {
    width: 100%;
    border: none;
    margin-top: 30px;
}

#fixed-shift.mobile .shiftList > li {
    margin-bottom: 10px;
    padding: 0 0 5px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ccc;
}

#fixed-shift.mobile .shiftList .shiftDate {
    padding: 0;
    font-size: 14px;
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
    background: #333;
    border-radius: 5px;
}

#fixed-shift.mobile .shiftDate a {
    padding: 8px 14px 5px;
    margin: -1px -1px 0;
    color: #eee;
    background: linear-gradient(#00f, #00f);
    border-radius: 5px;
    box-shadow: 2px 2px 6px #666;
    text-decoration: none;
}

#fixed-shift.mobile .shiftDate a:active {
    background: linear-gradient(#00f, #00f);
    box-shadow: none;
}

#fixed-shift.mobile .hallname {
    display: inline-block;
    margin-left: 10px;
}

#fixed-shift.mobile .info li {
    text-align: left;
}

#fixed-shift.mobile .info li .time {
    display: inline-block;
    width: 5em;
    text-align: right;
    font-size: 14px;
}

#fixed-shift.mobile .info li p {
    display: inline-block;
    margin-left: 10px;
}
/*-------- mobile--*/

/*------------------------------------ /fixed-shift --*/



/*-- fixed-shift detail/ ------------------------------------*/

#fixed-shift.detail .date {
    margin-right: 30px;
}

#fixed-shift.detail .hallname {
    display: inline-block;
    line-height: 30px;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

#fixed-shift.detail th {
    font-size: 14px;
    padding: 5px 5px 2px;
}

#fixed-shift .login {
    font-weight: bold;
}

/*--mobile --------*/
#fixed-shift.mobile.detail .date {
    float: none;
}

#fixed-shift.mobile.detail .shiftList > li {
    margin-bottom: 5px;
    padding: 0;
}

#fixed-shift.mobile.detail .shiftList .shifttime {
    font-size: 16px;
    padding: 10px 20px 5px;
    background: #00f;
    color: #fff;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

#fixed-shift.mobile.detail .stylename {
    display: inline-block;
    margin-left: 10px;
}

#fixed-shift.mobile.detail .info {
    margin: 10px 10px 0;
}

#fixed-shift.mobile.detail .info li {
    font-size: 16px;
    margin-bottom: 7px;
}

#fixed-shift.mobile.detail .info li .workname {
    vertical-align: middle;
    text-align: center;
    width: 7em;
    display: inline-block;
}

/*--mobile --------*/

/*------------------------------------ /fixed-shift detail --*/



/*-- payment/ ------------------------------------*/

#payment {
    margin-top: 20px;
}

#payment .summary {
    position: relative;
    width: 720px;
}

#payment .summary ul {
    float: left;
    margin-right: 0.8em;
    margin-bottom: 0;
    list-style: none;
    padding: 0;
}

#payment .summary li {
    text-align: right;
    border-bottom: 1px solid #ddd;
    margin: 10px 5px 0;
    height: 32px;
}

#payment .summary li:last-child {
    border-bottom: none;
}

#payment .summary .title {
    width: 135px;
    line-height: 1.7;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    vertical-align: middle;
    padding-top: 3px;
    padding-left: 5px;
    float: left;
    position: relative;
    box-sizing: content-box;
}

#payment .summary .title span {
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
}

#payment .summary ul.tax .title {
    text-align: right;
}

#payment .summary li p {
    padding-left: 1.0em;
    padding-right: 5px;
    margin-bottom: -1px;
    float: left;
}

#payment .summary li p span {
    display: inline-block;
    text-align: right;
    font-weight: bold;
    width: 63px;
    line-height: 1.7;
    padding: 2px 2px 0;
    border: 1px solid #999;
    border-radius: 4px;
}

#payment .summary li p.minus {
    text-indent: -1em;
}

#payment .summary .border {
    margin-right: 0;
    margin-left: 0;
    padding: 0 5px 5px;
    border-bottom: 2px solid #666;
}

#payment .summary .total {
    position: absolute;
    bottom:0;
    right: 0;
    background: #ccc;
    padding: 4px 10px;
    border-radius: 4px;
    box-shadow: 2px 2px 4px #666;
    width: 230px;
}

#payment .summary .total p {
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}

#payment .summary .totalhead {
    line-height: 1.1;
    font-size: 14px;
    float: left;
    padding-top: 5px;
}

#payment .summary p.totalprice  {
    width: 4.5em;
    text-align: right;
    font-size: 18px;
    line-height: 1.8;
    padding-top: 4px;
    padding-right: 5px;
    border: 1px solid #999;
    border-radius: 4px;
    background: #fff;
    float: right;
}

#payment .summary ul .row2 {
    margin-top: -5px;
}

#payment .summary .row2 .small {
    font-size: 12px;
    bottom: auto;
    margin-top: -8px;
}


#payment table {
    margin-top: 40px;
    line-height: 1.3;
    width: auto;
    box-sizing: content-box;
}

#payment caption {
    text-align: left;
}

#payment th, 
#payment td {
    text-align: center;
    padding: 5px 0 2px;
}

#payment .index {
    background: #00f;
    color: #eee;
}

#payment td.date {
    text-align: center;
    padding-right: 2px;
}

#payment td.price {
    text-align: right;
    padding-right: 5px;
}

#payment .sum {
    border-top: 3px double #999;
}

#payment .sum td {
    text-align: right;
    padding: 10px 5px 5px 0;
    font-weight: bold;
}

#payment .btnNav p {
    float: right;
    margin-right: 20px;
}

#payment .btnNav .mail {
    line-height: 26px;
    background: #269abc;
}

#payment .btnNav .mail a {
    color: #fff;
    padding: 0 5px;
    display: block;
}

#payment table.taxfree {
    margin-bottom: 20px;
}

/*--mobile -----*/
#payment.mobile .btnNav .mail {
    margin-right: 0px;
}

#payment.mobile .btnNav h3 {
    clear: both;
    padding-top: 10px;
    font-size: 18px;
    line-height: 1.3;
}

#payment.mobile .summary {
    width: auto;
    padding-top: 80px;
}

#payment.mobile .summary ul {
    margin: 30px 10px 0;
}
#payment.mobile .summary ul.ceremony {
    margin-right: 30px;
}

#payment.mobile .summary .total {
    top: 20px;
    right: auto;
    bottom: auto;
    left: auto;
    width: 90%;
    max-width: 400px;
    text-align: center;
    padding: 10px;
}

#payment.mobile .summary .totalprice {
    margin-left: 20px;
    width: 5em;
}

#payment.mobile .index {
    font-size: 12px;
}

#payment.mobile td.date {
    text-align: center;
    padding-right: 0;
}

/*----- mobile--*/

/*------------------------------------ /payment --*/