@charset "UTF-8";

/*
Hardboiled CSS3 Media Queries by Andy Clarke:
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

Author: Andy Clarke
Web site: http://stuffandnonsense.co.uk
Twitter: http://twitter.com/malarkey

Hardboiled Web Design
Web site: http://hardboiledwebdesign.com
Twitter: http://twitter.com/itshardboiled

Version date : 30th September 2010
Version: 0.9

License: Creative Commons CC Zero Declaration. No Rights Reserved.
*/

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/*============================================================================
    common
==============================================================================*/

/* reset */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}legend{color:#000;}

/* base */
body {
    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    background: #FFF;
    -webkit-text-size-adjust: none;
    }

/* common
---------------------------------*/
.clear {clear: both;}
.clearfix:after {
    content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

a{ text-decoration:none;}
section{ margin-bottom:10px; margin-top:10px; clear:both;}

select{ font-size:100%; margin: 0;}

/* カラー */
.red{ color: #FF0000;}
.gold{ color: #FFCC00;}
.blue{ color: #336699;}
.center{ text-align: center;}

/* フロート */
.imgR {    float: right; padding: 0 0 10px 10px;}
.imgC {    display: block; margin: auto;}
.imgL {    float: left; padding: 0 15px 10px 0;}

/* テーブル
---------------------------------*/

.defTable table{
    width: 90%;
    border-collapse: collapse;
    margin: 10px auto;
}
.defTable th, .defTable td {
    padding: 5px;
    border: 1px solid #999;
}
.defTable th{
    font-size: 80%;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}
.defTable td{
    font-size: 80%;
    vertical-align: middle;
}

/* 偶・奇数 */
.defTable table tr.odd td, .defTable table tr.odd th{
    background: #efefef;
}
.defTable table tr.even td, .defTable table tr.even th {
    background: #FFFFFF;
}

/* テーブル2
---------------------------------*/

.defTable2 table{
    border-collapse: collapse;
    margin: 2px;
}
.defTable2 th, .defTable2 td {
    padding: 5px;
    border: 1px solid #999;
}
.defTable2 th{
    font-size: 80%;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}
.defTable2 td{
    font-size: 80%;
    vertical-align: middle;
}

/* 偶・奇数 */
.defTable2 table tr.odd td, .defTable2 table tr.odd th{
    background: #efefef;
}
.defTable2 table tr.even td, .defTable2 table tr.even th {
    background: #FFFFFF;
}

/* クリアなテーブル
---------------------------------*/

.clearTable table {
    border: none;
    border-collapse: collapse;
    margin: 10px auto;
}
.clearTable th, .clearTable td {
    padding: 3px;
    border: none;
}
.clearTable th {
    font-size: 100%;
    text-align: right;
    vertical-align: top;
}
.clearTable td {
    font-size: 90%;
    vertical-align: middle;
}

/*============================================================================
    moduleCommon
==============================================================================*/

#outer{
    background-color:#fff0f0;
    width: 100%;
    margin: 0 auto;
}
header{
    width: 100%;
    text-align: center;
    background:#cc0000;
    border-bottom: solid 1px #FFF;
    padding: 5px 0;
}
footer{
    background-color: #cc0000;
    border-top: #666 1px solid;
    padding: 10px;
    clear: both;
}
footer p.copyright {
    text-align: center;
    font-size: 90%;
    color: #FFF;
    text-shadow:0px -1px 0px rgba(0, 0, 0, 0.8);
}

/*============================================================================
    styleCommon
==============================================================================*/

/* logo */
header h1.logo{ margin: 5px 0;}
header h1.logo a{ color: #FFF;}

h2 {
    padding: 2px;
    margin: 5px 0;
    color: #FFF;
    text-shadow: 0px -1px 0px #000;
    font-size: 80%;
    background: #7a0000;
    border-top: solid 1px #300;
    border-bottom: solid 1px #300;
    clear: both;
}

h2.menu {
    padding: 2px;
    margin: 0px;
    color: #FFF;
    text-shadow: 0px -1px 0px #000;
    font-size: 80%;
    background: #660000;
    border-top: solid 1px #000;
    border-bottom: solid 1px #000;
    clear: both;
}

h3 {
    font-size: 100%;
    padding: 1px 0px 1px 6px;
    margin: 2px 0;
    border-left: solid 3px #000;
    clear: both;
}
h3.tableName{
    font-size: 120%;
    margin: 2px 2px;
    clear: both;
    background-color: #FFF;
    border: solid 1px #333;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
}

p.freeText{
    padding: 3px;
    font-size: 90%;
    color: #333;
    text-shadow:0px 1px 0px rgba(255, 255, 255, 0.8);
}

.bnFree{
    margin:5px auto;
    width: 100%;
    text-align: center;
}

/* staffList
---------------------------------*/
ul.staffList{}
ul.staffList li a{
    background-color: #333;
    color: #FFF;
    font-size: 90%;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    margin-left: 3px;
    padding: 8px 8px 8px 10px;
    float: left;
    display: block;
    }
ul.staffList li a.check{
    background-color: #CC0000;
    }
ul.staffList li a.check1{
    background-color: #006699;
    }
ul.staffList li a.check2{
    background-color: #bbb;
    }
ul.staffList li a.check3{
    background-color: #C00;
    }

/*============================================================================
    Parts
==============================================================================*/

/* drag drop部分
---------------------------------*/
.drag, .drag2 {
    float: left;
    padding: 10px;
    font-size: 90%;
    background-color: #000;
    color: #FFF;
    margin: 2px;
    cursor: move;
    border: 1px solid #FFF;
    text-align: center;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.selected {
    background-color: Yellow;
    color: Black;
}
.drop {
    width: 27%;
    height: 90px;
    float: left;
    background-color: #999;
    color: #FFF;
    margin: 3px;
    padding: 20px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-size: 90%;
}
.active {
    background-color: orange;
    cursor: crosshair;
}

/* pager
---------------------------------*/
.pager {
    text-align:center;
    margin:0 30px 20px 0;
    clear:both;
}
.pager li {
    display:inline;
}
.pager li.pager_num span {
    display:inline-block;
    padding:4px 8px;
    margin-left:5px;
    border:1px #CCCCCC solid;
}
.pager li.pager_num span.now {
    display:inline-block;
    padding:4px 8px;
    margin-left:5px;
    border:1px #2da5da solid;
    background-color:#2da5da;
    font-weight:bold;
    color:#FFFFFF;
}
.pager li.pager_num a {
    display:inline-block;
    padding:4px 8px;
    margin-left:5px;
    border:1px #cccccc solid;
    text-decoration:underline;
    background-color:#FFF;
}
.pager li.pager_num a:hover {
    background-color:#2da5da;
    color:#FFFFFF;
}
.pager_prev {
    margin-left:5px;
    font-weight:bold;
}
.pager_prev a:link {
    margin-left:5px;
    text-decoration:underline;
}
.pager_prev a:visited {
    margin-left:5px;
    text-decoration: underline;
}
.pager_prev a:hover {
    margin-left:5px;
    text-decoration:none;
}
.pager_next {
    margin-left:3px;
    font-weight:bold;
}
.pager_next a:link {
    margin-left:3px;
    text-decoration:underline;
}
.pager_next a:visited {
    margin-left:3px;
    text-decoration: underline;
}
.pager_next a:hover {
    margin-left:3px;
    text-decoration:none;
}

/* TAB
---------------------------------*/
ul.tab {
    margin: 10px 0 0 0;
    padding: 0;
    border-bottom: 2px #ddd solid;
}
ul.tab li {
    width: 145px;
    font-size: 12px;
    text-align: center;
    float: left;
    margin: 0 0 0 5px;
    position: relative;
    bottom: -2px;
    list-style-type: none;
    border: 1px #ddd solid;
    border-top: none;
    border-bottom: 2px #ddd solid;
    background: #fff;
}
ul.tab li.none {
    border-bottom: 2px #fff solid;
    font-weight: bold;
}
ul.tab li a {
    color: #000;
    display: block;
    padding: 3px 10px 5px;
    text-decoration: none;
    background: #fff;
}

ul.tab li a.green {
    border-top: 5px #4cbb47 solid;
}
ul.tab li a.red {
    border-top: 5px #dd1d25 solid;
}
ul.tab li a.blue {
    border-top: 5px #2384dc solid;
}
ul.tab li a.yellow {
    border-top: 5px #ffd242 solid;
}
ul.tab li a.brown {
    border-top: 5px #996600 solid;
}
ul.tab li a.pink {
    border-top: 5px #ff3399 solid;
}
ul.tab li a.purple {
    border-top: 5px #cc66ff solid;
}
ul.tab li a.black {
    border-top: 5px #000 solid;
}
ul.tab li a.lgreen {
    border-top: 5px #ccff66 solid;
}
ul.tab li a.mizu {
    border-top: 5px #99ffff solid;
}
ul.tab li a:hover {
    position: relative;
    bottom: 6px;
}

/* footerMenu
---------------------------------*/

.list20 ul{
    box-sizing: border-box;
    border-bottom:1px solid #000;
/*
    margin-top: 5px;
*/
}
.list20 ul li{
    background-color: #300;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    box-sizing: border-box;
    margin: 0px;
    width: 100%;
//    font-size: 120%;
}
.list20 ul li a{
    background: url(../img/list_mark20.png) no-repeat 5px 50%;
    color: #FFF;
    display: block;
    margin: 0px;
    overflow: hidden;
    padding: 8px 4px 8px 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    font-weight:bold;
}

/*============================================================================
    styles
==============================================================================*/

/* お客様情報部分（旧式）
---------------------------------*/
.customerBox{}
.customerLeft{ width: 50%; float: left;}
.customerLeft h3{font-size: 90%;}
.customerRight{ width: 50%;float: right;}
.customerRight h3{font-size: 90%;}

/* staff部分
---------------------------------*/
a.dragEnd{
    float: left;
    padding: 10px;
    font-size: 90%;
    background-color: #000;
    color: #FFF;
    margin: 2px;
    border: 1px solid #FFF;
    text-align: center;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
a.dragCheck1{
    float: left;
    padding: 10px;
    font-size: 90%;
    background-color: #006699;
    color: #FFF;
    margin: 2px;
    border: 1px solid #FFF;
    text-align: center;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
a.dragCheck2{
    float: left;
    padding: 10px;
    font-size: 90%;
    background-color: #bbb;
    color: #FFF;
    margin: 2px;
    border: 1px solid #FFF;
    text-align: center;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
a.dragCheck3{
    float: left;
    padding: 10px;
    font-size: 90%;
    background-color: #C00;
    color: #FFF;
    margin: 2px;
    border: 1px solid #FFF;
    text-align: center;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.dropEnd {
    width: 27%;
    height: 160px;
    float: left;
    background-color: #999;
    color: #FFF;
    margin: 3px;
    padding: 20px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-size: 90%;
}

/* indexTableBox
---------------------------------*/

.tableWrap{width: 99.8%; margin: 2px;}

.tableBox{
float: left;
width: 30%;

margin-left: 2px;
margin-bottom: 2px;
border: solid 1px #000;
background-color: #222;
padding: 10px;
}
.tableBox0{
float: left;
width: 30%;
height: 200px;
margin-left: 2px;
margin-bottom: 2px;
border: solid 1px #000;
background-color: #dcdcdc;
padding: 10px;
}
.tableBox h5, .tableBox0 h5{
    background-color: #FFF;
    border: solid 1px #333;
    padding: 5px;
    font-size: 80%;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
}
.tableBox h5 a, .tableBox0 h5 a{
display: block;
}
.tableBox p, .tableBox0 p{
    font-size: 80%;
    color: #FFF;
}


/* table_set .tableTable
---------------------------------*/

.tableTable table{
    border-collapse: collapse; margin: 2px 0; width: 100%;
}
.tableTable th, .tableTable td {
    padding: 2px; border: 1px solid #999;
}
.tableTable th{
    font-size: 80%;
    text-align: center;
    vertical-align: top;
    font-weight: bold;
}
.tableTable td{
    font-size: 80%;
    vertical-align: middle;
}

/* 偶・奇数
---------------------------------*/
.tableTable table tr.odd td, .tableTable table tr.odd th{
    background: #efefef;
}
.tableTable table tr.even td, .tableTable table tr.even th {
    background: #FFFFFF;
}

/* ボタン */
a.btn1{
    width:90%;
    text-align:center;
    display: block;
    padding: 5px;
    margin: 10px auto;
    color:#000;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.8);
    border-radius: 3px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 1px solid #ccc;
    font-weight:bold;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#cacaca));
}

/* ボタン2 */
a.btn2{
    width:90%;
    text-align:center;
    display: block;
    padding: 5px;
    margin: 10px auto;
    color:#553200;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.8);
    border-radius: 3px;
    border-top: 1px solid #ffe764;
    border-right: 1px solid #c6a800;
    border-bottom: 1px solid #c6a800;
    border-left: 1px solid #ffe764;
    font-weight:bold;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff3b1), to(#ffd800));
}
/* Input */
.btnInput0{
    width:90%;
    font-size: 100%;
    text-align:center;
    display: block;
    padding: 5px;
    margin: 10px auto;
    color:#553200;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.8);
    border-radius: 3px;
    border-top: 1px solid #ffe764;
    border-right: 1px solid #c6a800;
    border-bottom: 1px solid #c6a800;
    border-left: 1px solid #ffe764;
    font-weight:bold;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff3b1), to(#ffd800));
}
.btnInput{
    width:90%;
    font-size: 120%;
    text-align:center;
    display: block;
    padding: 10px 5px;
    margin: 10px auto;
    color:#553200;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.8);
    border-radius: 3px;
    border-top: 1px solid #ffe764;
    border-right: 1px solid #c6a800;
    border-bottom: 1px solid #c6a800;
    border-left: 1px solid #ffe764;
    font-weight:bold;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff3b1), to(#ffd800));
}

.loginForm{
    width: 90%;
    padding: 8px;
}
.loginForm2{
position: relative;
    width: 90%;
    padding: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #999;
    background: #FFF;
    background:url(../img/list_mark1.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#FFF 100%);
    background:url(../img/list_mark1.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#FFF 100%);
}