@charset "UTF-8";
/* CSS Document */

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 896px) {
	#page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

.EN {ffont-family: 'Raleway', sans-serif;}
.mincho {font-family: 'Noto Serif JP', serif;}

.bgWH {background-color: #FFF;}
.bgBL {background-color: #001976;}
.bgGR {background-color: #5AAC5B;}
.bgGRY {background-color: #EEEEEE;}
.bgLBL {background-color: #D9EFFB;}
.txtWH {color: #FFF;}
.txtBL {color: #001976;}
.txtLBL {color: #0092E5;}
.txtGRY {color: #999999;}
.txtDGRY {color: #666666;}
.txtPI {color: #E35E53;}

.ratioBox {position: relative;width: 100%;height: auto;}
.ratio1-1:before {content: "";display: block;padding-top: 100%; /* 1:1 */}
.ratio2-1:before {content: "";display: block;padding-top: 50%; /* 2:1 */}
.ratio3-2:before {content: "";display: block;padding-top: 66%; /* 3:2 */}
.ratio4-3:before {content: "";display: block;padding-top: 75%; /* 4:3 */}
.ratioInner {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}

main {width: calc(100% - 240px); margin-left: 240px;}
main#login {width: 100%; margin-left: 0;}
@media screen and (max-width: 896px) {
	main {width: 100%; margin-left: 0;}
}

#login .container {height: 100vh;}
#login .logo {max-width: 330px; width: 80%;}
#login .w400 {position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);}
.ttlSide {padding: 0 60px;}
.ttlSide::before,.ttlSide::after {position: absolute; content: ''; top: 50%; width: 50px; height: 1px; background: #222;}
.ttlSide::before {left: 0;}
.ttlSide::after {right: 0;}
.login {cursor: pointer; width: 100%; display: block; padding: 13px 10px; margin: 0; border: 1px solid #001976; border-radius: 8px; background: rgb(0,146,229); background: linear-gradient(180deg, rgba(0,146,229) 0%, rgba(0,25,118) 100%); transition: .3s;}
.login:hover {cursor: grab; width: 100%; display: block; padding: 13px 10px; margin: 0; border: 1px solid #001976; border-radius: 8px; background: rgb(0,146,229); background: linear-gradient(0deg, rgba(0,146,229) 0%, rgba(0,25,118) 100%); transition: .3s;}
.login span {padding: 2px 0 0 30px; background: url("../img/icon_login.svg") no-repeat center left; background-size: 20px; line-height: 24px;}
#eye_btn {display: block; width: 24px; height: 18px; background: url("../img/login_eye01.svg") no-repeat center right; position: absolute; top: 50%; transform: translateY(-50%); right: 20px;}
#eye_btn.eye_appear {background: url("../img/login_eye02.svg") no-repeat center right;}

header {width: 240px; height: 100vh; position: fixed; overflow-y: auto; box-shadow: inset -2px 0 3px rgba(0,0,0,.15);}
.logo {padding: 10px 0;}
header .logo {width: 144px; margin: 0 auto;}
.child_menu > li > a:hover {background: #FFF;}
.child_menu {width: 100%; left: 0; color: #222;}
.menu:hover .child_menu {visibility: visible;}
.child_menu a:hover {color: #222;}
#hanburger,.spOnly,.menu_button {display: none;}
.menu_button {width: 55px; height: 55px; position: fixed; top: 0; right: 0; background: #0092E5; z-index: 15;}
#hanburger:checked ~ .menu_button {top: 0;}
#hanburger:checked ~ .span2 {display: none;}
#hanburger:checked ~ .span1 {width: 34px; transform: rotate(45deg); top: 27px; right: 11px;}
#hanburger:checked ~ .span3 {width: 34px; transform: rotate(-45deg); top: 27px; right: 11px;}
.global_menu {visibility: hidden; width: 100%; height: 100%; color: #222; overflow-y: scroll; }
#hanburger:checked ~ .global_menu {visibility: visible;}
.global_menu a {display: block; width: 100%; padding: 18px 20px;}
.menu_wrap,.menu {border-top: 1px solid #CCCCCC;}
.menu {font-size: 16px; position: relative; font-weight: 700;}
.menu:last-child {margin-right: 0px;}
.child_menu > li > a {padding: 13px 15px 13px 42px; background: #EEEEEE url("../img/icon_arrow_right.svg") no-repeat left 20px center; border-top: 1px solid #CCCCCC;}
.child_menu > li > a:hover {background: #CCC url("../img/icon_arrow_right.svg") no-repeat left 20px center;}
.menu .icon {width: 24px; margin-right: 10px; display: inline-block;}
@media screen and (min-width: 896px) {
  .menu_button {display: none;}
  .global_menu {visibility: visible;}
  .pd {display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background: url("../img/icon_plus.svg") no-repeat top 23px right 15px;}
	.menu:hover > a {background: #EEE;}
	.child_menu {display: none;}
  .menu input[type="checkbox"]:checked ~ .child_menu {max-height: inherit!important; overflow-y: visible; visibility: visible!important; display: block;}
	.menu input[type="checkbox"]:checked ~ * .pd {background: url("../img/icon_minus.svg") no-repeat top 23px right 15px; height: 63px;}
  .menu > label:hover {cursor: pointer;}
}
@media screen and (max-width: 896px) {
	header {width: 100%; height: auto; position: relative; overflow-y: auto; box-shadow: none;}
	header .logo {width: 120px; margin: 0 0 0 20px;}
	#hanburger,.spOnly,.menu_button {display: block;}
  span.span1,span.span2,span.span3 {width: 29px; height: 1px; background-color: #FFF; position: absolute; right: 13px; transition: .3s; z-index: 100; position: fixed;}
  .span1 {top: 17px;}
  .span2 {top: 27px;}
  .span3 {top: 37px;}
  .menu {display: block; font-size: 14px;}
  .menu > a {padding: 10px 15px; text-align: left; border-bottom: 1px solid #CCC;}
  .menu > a span {margin-right: 10px; width: 20px!important;}
  .menu > a span img {width: 100%;}
  .global_menu {z-index: 10; position: fixed; top: 0; left: 0;}
  .pd {display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background: url("../img/icon_plus.svg") no-repeat top 15px right 15px;}
	.menu input[type="checkbox"]:checked ~ * .pd {background: url("../img/icon_minus.svg") no-repeat top 15px right 15px; height: 45px;}
	.menu .icon {width: 20px;}
  .child_menu > li > a,.child_menu > li > ul > li a {padding: 10px 15px 10px 45px; color: #222; text-align: left; border-bottom: 1px dotted #999;}
  .child_menu > li > ul > li a {padding: 15px 20px 15px 35px; position: relative;}
  .child_menu > li > ul > li:last-child a {border-bottom: 1px solid #CCC;}
  .child_menu > li > ul > li a::before {border-top: solid 1px #222; content: ''; left: 20px; position: absolute; top: 50%; width: 10px;}
  .menu .pd {display: inline-block; width: 100%; position: absolute; top: 0; left: 0; height: 100%;}
  .menu_wrap {display: none;}
  #hanburger:checked ~ * .menu_wrap {display: block; opacity: 1; min-height: 100vh; background: #FFF; /*position: fixed;*/ top: 0; z-index: 5;}
  #hanburger:checked ~ * .menu {max-height: inherit; overflow-y: visible; padding: 0; margin-left: 0; position: relative;}
  #hanburger:checked ~ * .child_menu {max-height: 0; overflow-y: hidden; visibility: hidden; text-align: left;}
  .menu .child_menu {border-top: 1px solid #DDD; position: relative; opacity: 1; top: 0; margin-left: auto; left: auto; width: auto;}
  .child_menu li {display: block;}
  .menu > label:hover {cursor: pointer; cursor: hand;}
  .menu input[type="checkbox"]:checked ~ .child_menu {max-height: inherit!important; overflow-y: visible; visibility: visible!important;}
  /*
  .angletoggle:before {content: "\f107";}
  #nav input[type="checkbox"]:checked ~ * .angletoggle:before {content: "\f106";}
  */
}

footer {padding: 10px 0; width: calc(100% - 240px); text-align: right; position: fixed; bottom: 0; right: 0; z-index: 10;}
footer.pass {width: 100%;}
footer small {font-size: 14px; line-height: 1.2;}
#ftNavi {display: none;}
@media screen and (max-width: 896px) {
	footer {margin-bottom: 50px; width: 100%; position: relative; z-index: 0;}
	#ftNavi {display: block; background: #0092E5; position: fixed; z-index: 5; bottom: 0; border-top: 1px solid #FFF; width: 100%;}
	#ftNavi ul {text-align: center; font-size: 10px; font-weight: bold;}
	#ftNavi li {letter-spacing: normal; width: 25%;}
	#ftNavi li a {display: block; padding: 5px 0; color: #FFF; border-left: 1px solid #43BBFF; border-right: 1px solid #0175B7;}
	#ftNavi li:first-child a {border-left: none;}
	#ftNavi li:last-child a {border-right: none;}
	#ftNavi li span {width: 20px; margin: 0 auto 5px; display: block;}
}

.container {width: calc(100% - 40px); padding-left: 0; padding-right: 0;}
.first {padding-top: 100px;}
.mlr,.container {margin-left: auto; margin-right: auto;}
.mla {margin-left: auto;}
.mra {margin-right: auto;}
.mta {margin-top: auto;}
.mlr5 {margin-left: 5px; margin-right: 5px;}
.mlr20,.col1,.col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {margin-left: 20px; margin-right: 20px;}
.col1 {width: calc(16.6666% - 40px);}
.col2,.box3 {width: calc(33.3333% - 40px);}
.col3 {width: calc(50% - 40px);}
.col4 {width: calc(66.6666% - 40px);}
.col5 {width: calc(83.3333% - 40px);}
.col6 {width: calc(100% - 40px);}
.box4 {width: calc(25% - 30px); margin-left: 15px; margin-right: 15px;}
.full {width: 100%;}
.half {width: 50%;}
.half-10 {width: calc(50% - 10px);}
.w400 {width: 400px;}
#login .w400 {width: calc(100% - 40px); max-width: 400px;}
.w480 {width: 480px;}
.w300 {max-width: 300px; width: 100%;}
.w270 {max-width: 270px; width: 100%;}
.w240 {max-width: 240px; width: 100%;}
.w230 {width: 230px;}
.w200 {width: 200px;}
.w180 {width: 180px;}
.w170 {width: 170px;}
.w160 {width: 160px;}
.w150 {width: 150px;}
.w140 {width: 140px;}
.w120 {width: 120px;}
.w100 {width: 100px;}
.w80 {width: 80px;}
.w60 {width: 60px;}
.w50 {width: 50px;}
.w46 {width: calc(46% - 50px);}
.w54 {width: calc(54% - 50px);}
.w33 {width: calc(100%/3 - 20px);}
.h240 {height: 240px; overflow-y: auto;}
.r5 {border-radius: 5px;}
.ml5 {margin-left: 5px;}
.ml10 {margin-left: 10px;}
.mr5 {margin-right: 5px;}
.mlr5 {margin-right: 5px; margin-left: 5px;}
.mlr10 {margin-right: 10px; margin-left: 10px;}
.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.mr40 {margin-right: 40px;}
.pd10 {padding: 10px;}
.pd15-20 {padding: 15px 20px;}
.pd10-20 {padding: 10px 20px;}
@media screen and (max-width: 896px) {
	.container {width: calc(100% - 20px);}
	.first {padding-top: 30px;}
  .mlr20,.col1,.col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {margin-left: 10px; margin-right: 10px;}
  .col1 {width: calc(16.6666% - 20px);}
  .col2,.box3 {width: calc(33.3333% - 20px);}
  .col3 {width: calc(50% - 20px);}
  .col4 {width: calc(66.6666% - 20px);}
  .col5 {width: calc(83.3333% - 20px);}
  .col6 {width: calc(100% - 20px);}
  .w46 {width: calc(46% - 20px);}
  .w54 {width: calc(54% - 20px);}
}
@media screen and (max-width: 568px) {
  .col1 {width: calc(33.3333% - 20px);}
  .col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {width: calc(100% - 20px);}
  .mlr5 {margin-left: 5px; margin-right: 5px;}
  .box4 {width: calc(50% - 20px); margin-left: 10px; margin-right: 10px;}
}

ul.dot {list-style: disc; margin-left: 1.5em;}
ul.num {list-style: decimal; margin-left: 1.5em;}

table {width: 100%;}
table tr:nth-child(odd) {background-color: #FFF;}
table tr:nth-child(even) {background-color: #F8F8F8;}
table th,table td {padding: 15px 10px; line-height: 1.7; border: 1px solid #666;}
table td.txtCent {text-align: center;}
table input[type="text"] {box-shadow: none; border: none;}
table .docHead tr:nth-child(odd) {background: #D9EFFB;}
table .itemName {width: calc(100% - 560px);}
table .invoiceLineName {width: calc(100% - 130px);}
table .itemNum {width: 100px;}
table .itemUnit {width: 70px;}
table .itemUnitprice {width: 130px;}
table .itemTax {width: 110px;}
table .itemPrice {width: 150px;}
table .itemName input[type="text"] {font-weight: 700;}
table .itemName input[type="date"] {box-shadow: none; border: none; font-size: 12px;}
table .itemUnit input[type="text"] {text-align: center;}
table .itemPrice input[type="text"] {background: #EEEEEE; font-size: 16px; font-weight: 700;}
table .itemNum input[type="text"],table .itemUnitprice input[type="text"],table .itemPrice input[type="text"] {text-align: right;}
table .docTotal .itemTotal {background: #D9EFFB; font-weight: 700; text-align: center;}
table .docTotal .itemName {border-left: none; border-bottom: none;}
table .docTotal.order .itemName {border-left: none; border-right: none; border-bottom: none;}
.docItem tr {position: relative;}
.docItem .lineEdit {position: absolute; top: 50%; transform: translateY(-50%); left: -30px; /*display: none;*/ opacity: 0.2;}
.docItem .lineEdit li {width: 24px; margin: 5px 0;}
.docItem .lineEdit li .move {cursor: move;}
.document.order table .itemNum input[type="text"] {border: 1px solid #999; box-shadow: inset 0 0 5px rgba(0,0,0,.5);}
.document.order table .itemName {width: calc(100% - 340px);}
.document.order table .itemNum {width: 100px;}
.document.order table .itemUnitprice {width: 80px;}
.document.order table .itemPrice {width: 120px;}
@media screen and (max-width: 896px) {
	table .docHead tr,table .docItem tr,table .docTotal tr {display: flex; flex-wrap: wrap;}
	table .docHead tr:not(first-child) {margin-top: -1px;}
	table .docHead th:not(first-child),table .docHead td:not(first-child),table .docItem th:not(first-child),table .docItem td:not(first-child),table .docTotal th:not(first-child),table .docTotal td:not(first-child) {margin-top: -1px; border-right: none;}
	table .docHead th:first-child,table .docHead th:last-child,table .docHead td:first-child,table .docHead td:last-child,table .docItem th:first-child,table .docItem th:last-child,table .docItem td:first-child,table .docItem td:last-child,table .docTotal th:first-child,table .docTotal th:last-child,table .docTotal td:first-child,table .docTotal td:last-child {border-right: 1px solid #666;}
	table th,table td {padding: 10px;}
	.tblw {width: calc(100% - 20px); margin-left: 20px;}
	table .docHead .itemName,table .docItem .itemName,table .docTotal .itemName {width: 100%;}
	table .docHead .itemPrice,table .docItem .itemPrice {width: calc(100% - 410px);}
	table .docTotal .itemTotal {width: 120px;}
	table .docTotal .itemPrice {width: calc(100% - 120px);}
	table .docTotal .itemTotal {border-right: none!important;}
	.tblw.monthlyAmount {width: 100%; margin-left: 0;}
}
@media screen and (max-width: 650px) {
	table .itemNum,table .itemUnit,table .itemUnitprice,table .itemTax {width: 25%;}
	table .docHead .itemPrice,table .docItem .itemPrice {width: 100%;}
	table .docHead .itemTax,table .docItem .itemTax {border-right: 1px solid #666;}
}
@media screen and (max-width: 412px) {
	.taxChange {margin-left: 20px;}
}

button,.acOpen {cursor: pointer;}
.acContents {display: none;}

#head {position: fixed; top: 0; left: 240px; width: calc(100% - 240px); z-index: 10;}
#head h1 {padding: 15px 0; line-height: 1.5;}
#head .user {padding: 15px 10px;}
#head .acOpen span {padding-right: 20px; background: url("../img/icon_down.svg") no-repeat center right; cursor: pointer; display: block;}
#head .acOpen.active span {background: url("../img/icon_up.svg") no-repeat center right;}
#head .acContents {position: absolute; width: 195px; top: 35px; right: 0; padding: 10px 10px 0; background: #222; z-index: 10;}
#head .acContents li {margin-bottom: 10px;}
#head .acContents li a:hover {text-decoration: underline;}
#head .acContents li.accountInfo a,#head .acContents li.firstSetting a {display: block; padding-left: 25px;}
#head .acContents li.accountInfo a {background: url("../img/icon_user.svg") no-repeat left center;}
#head .acContents li.firstSetting a {background: url("../img/icon_edit_wh.svg") no-repeat left center;}
#head .acContents li .logout {display: block; padding-left: 25px; background: url("../img/icon_logout.svg") no-repeat left center; cursor: pointer;}
@media screen and (max-width: 896px) {
	#head {position: relative; top: 0; left: 0; width: 100%; z-index: 0;}
}

/*modal*/
.modal {display: none; height: 100vh; position: fixed; top: 0; left: 0; width: 100%; z-index: 99;}
.modalBg {background: rgba(34,34,34,0.7); height: 100vh; position: absolute; width: 100%;}
.modalContainer {left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: calc(100% - 40px); max-width: 400px;}
#history .modalContainer {width: calc(100% - 40px); max-width: 1172px; max-height: 850px; height: calc(100vh - 80px);}
.btnClose {width: 40px; height: 40px; position: absolute; top: -20px; right: -20px; z-index: 4;}
.btnClose img {width: 100%;}
.modal .inner {overflow-y: auto; height: 100%; background: #FFF; border-radius: 10px; padding: 30px;}
#history.modal dt,#history.modal dd {border-bottom: 1px solid #999; padding: 15px 0;}
#history.modal dt {width: 160px;}
#history.modal dd {width: calc(100% - 160px);}

.ttlBdr {position: relative; border-bottom: 1px solid #0092E5; padding-bottom: 10px; margin-bottom: 20px;}
.ttlBdr::before {position: absolute; content: ''; width: 240px; height: 1px; background: #001976; bottom: -1px; left: 0;}
.ttlGRY {padding: 10px 15px; background: #EEE; margin-bottom: 10px;}
.ttlBdrGRY {padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #999999;}

.btnLBL,.btnBL,.btnGRY,.btnWH {width: 100%; display: block; color: #FFF; text-align: center; padding: 10px 20px; border-radius: 5px!important; line-height: 1.7!important;}
.btnLBL {background: #0092E5; border: 1px solid #0092E5!important;}
.btnLBL:hover {background: #FFF; color: #0092E5;}
.btnBL {background: #001976; border: 1px solid #001976;}
.btnBL:hover {background: #FFF; color: #001976;}
.btnGRY {background: #999999; border: 1px solid #999999;}
.btnGRY:hover {background: #FFF; color: #999999;}
.btnWH {background: #FFF; border: 1px solid #0092E5; color: #0092E5;}
.btnWH:hover {background: #0092E5; color: #FFF;}
.btnBL.w200 {width: 200px; transition: .3s; position: relative; z-index: 1;}
.btnBL.w200 span {padding-right: 24px; position: relative;}
.btnBL.w200 span::before,.btnBL.w200 span::after {position: absolute; content: ''; background: #FFF; top: 50%; transform: translateY(-50%);}
.btnBL.w200 span::before {width: 14px; height: 2px; right: 0;}
.btnBL.w200 span::after {height: 14px; width: 2px; right: 6px;}
.btnBL.w200:hover span::before,.btnBL.w200:hover span::after {background: #001976;}
.btnBL.w200.active span::after {content: none;}
.searchArea {max-width: 760px; width: calc(100% - 220px);}
.searchArea .acOpen {position: absolute; z-index: 1; right: 0;}
.searchArea .acContents {width: 100%; padding: 10px 20px 15px; border-radius: 5px; background: #D9EFFB;}
.btnSearch,.btnPlus {width: 100%; padding: 6px 40px 6px 70px; border: 1px solid #001976!important; border-radius: 20px!important; background: rgb(0,25,118); background: linear-gradient(0deg, rgba(0,25,118,1) 0%, rgba(0,146,229,1) 100%); color: #FFF;}
.btnSearch:hover,.btnPlus:hover {background: rgb(0,25,118); background: linear-gradient(0deg, rgba(0,146,229,1) 0%, rgba(0,25,118,1) 100%);}
.btnPlus {padding: 5px 10px; display: block; text-align: center;}
.btnPlus span {position: relative; padding-right: 20px;}
.btnPlus span::before,.btnPlus span::after {position: absolute; content: ''; background: #FFF; top: 50%; transform: translateY(-50%);}
.btnPlus span::before {width: 14px; height: 2px; right: 0;}
.btnPlus span::after {height: 14px; width: 2px; right: 6px;}
.searchArea .acContents .w160.mr20::after,.monthlySearch .w160.mr20::after {position: absolute; content: ''; width: 20px; height: 20px; background: url("../img/icon_search.svg") no-repeat left center; top: 50%; transform: translateY(-50%); left: 40px;}
.btnCSV {display: block; text-align: center; width: 100%; padding: 6px 20px; border: 1px solid #222222!important; border-radius: 20px!important; background: rgb(77,77,77); background: linear-gradient(0deg, rgba(77,77,77,1) 0%, rgba(153,153,153,1) 100%); color: #FFF; cursor: pointer;}
.btnCSV:hover {background: linear-gradient(0deg, rgba(153,153,153,1) 0%, rgba(77,77,77,1) 100%);}
@media screen and (max-width: 1240px) {
	.searchArea .acContents {padding: 40px 20px 15px;}
	.searchArea .acContents .w480 {width: 100%;}
}
@media screen and (max-width: 1024px) {
	.searchArea .acContents .w400 {width: 100%;}
	.searchArea .acContents .flex .mb10 {width: 100%;}
	.searchArea .acContents .full ul {margin-bottom: 20px;}
	.searchArea .acContents .full .w160:first-of-type {margin-bottom: 15px;}
}
@media screen and (max-width: 568px) {
	.searchArea {width: 100%;}
	.searchArea .acOpen {position: relative;}
	.searchArea .acContents {padding: 15px 20px;}
}

.pass {width: 100%; margin-left: 0;}
.pass #head {width: 100%; left: 0;}

.pass .container {max-width: 1212px;}
.graph {width: 100%; height: 280px;}
.navBtn {width: calc(100%/5 - 40px); margin-left: 20px; margin-right: 20px; text-align: center;}
.navBtn .icon {width: 60px; margin: 0 auto 10px;}
.navBtn a {border-radius: 20px; background: #D9EFFB; padding: 30px 10px; color: #001976;}
.navBtn a:hover {background: #AFE3FF;}
.usageGuide {position: absolute; top: 0; right: 0;}
.usageGuide li {padding-left: 25px; position: relative; margin-left: 20px;}
.usageGuide li::before {position: absolute; content: ''; width: 20px; height: 20px; left: 0; top: 2px;}
.usageGuide li:first-child::before {background: #9DBACB;}
.usageGuide li:nth-child(2)::before {background: #001976;}
.usageGuide li:last-child::before {background: #CB675F;}
@media screen and (max-width: 1024px) {
	.navBtn {width: calc(100%/3 - 40px);}
}
@media screen and (max-width: 896px) {
	.navBtn {width: calc(100%/3 - 20px); margin-left: 10px; margin-right: 10px;}
}
@media screen and (max-width: 568px) {
	.navBtn {width: calc(50% - 20px);}
	.navBtn .icon {width: 40px;}
	.navBtn a {border-radius: 10px; padding: 20px 10px;}
	.usageGuide {position: relative; margin-bottom: 20px;}
	.usageGuide li {margin-left: 0; margin-right: 20px;}
}

.tab {border-bottom: 1px solid #0092E5;}
.tab li {min-width: 80px; margin-right: 5px; text-align: center;}
.tab li a {width: 100%; display: block; padding: 5px 10px; background: #EEEEEE;}
.tab li a:hover {background: #0092E5; color: #FFF;}
.tab li.active a {background: #0092E5; color: #FFF;}
.page {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.jcEnd.page {position: relative; top: 0; transform: translateY(0);}
.page li {margin-left: 10px;}
.page li:not(:first-child) {width: 20px;}
.pageNav li {margin: 0 5px;}
.pageNav li a {display: block; width: 30px; text-align: center; line-height: 30px; border: 1px solid #0092E5; background: #0092E5; color: #FFF; border-radius: 5px;}
.pageNav li.active,.pageNav li a:hover {display: block; width: 30px; text-align: center; line-height: 30px; background: #FFF; color: #0092E5; border: 1px solid #0092E5;}
.pageNav li.prev a,.pageNav li.next a {width: 10px; border: none; background: none;}
.caseList li {display: flex; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #CCCCCC; align-items: center;}
.caseList li:first-child {padding: 0 0 5px; border-bottom: 1px solid #999999;}
.caseList.suppliers li {align-items: flex-start;}
.caseList .check {width: 60px;}
.caseList .status {width: 125px; margin: 0 20px;}
.caseList .caseName {width: calc(100% - 545px); margin: 0 10px;}
.caseList .issueDate {width: 80px; margin: 0 10px;}
.caseList .expiration {width: 80px; margin: 0 10px;}
.caseList .price {width: 100px; text-align: right; font-size: 16px; font-weight: 700;}
.caseList li:first-child .price {font-size: 12px;}
.caseList .check.all label span {width: 100%; background: #0092E5; color: #FFF; text-align: center; display: block; padding: 3px 10px; border-radius: 5px;}
.caseList .check.all input[type=checkbox]:checked + span {background: #d01137;}
.caseList .check.formCheckbox label {margin-left: 20px; padding-left: 0;}
.status span {width: 60px; text-align: center; font-size: 12px;}
.status span a {display: block; width: 100%; color: #999999; border: 1px solid #999999; border-radius: 5px; padding: 3px 5px;}
.status span.active a {background: #0092E5; color: #FFF; border: 1px solid #0092E5;}
.status span.issue {margin-right: 5px;}
.status.order span {color: #999999; border: 1px solid #999999; border-radius: 5px; padding: 3px 5px; text-align: center; width: 100%; margin-right: 0;}
.status.order span.active {background: #0092E5; color: #FFF; border: 1px solid #0092E5;}
.caseList .caseName span {display: block;}
#btnArea {position: fixed; bottom: 44px; width: calc(100% - 240px); padding: 15px 20px; font-weight: 700;}
#btnArea .txtGRY {color: #666;}
#btnArea .create,#btnArea .statusDelete {margin: 0 15px; padding: 0 10px; border-left: 1px solid #999;}
#btnArea .create li,#btnArea .statusDelete li {margin: 0 5px;}
#btnArea .create li a,#btnArea .statusDelete li a {display: inline-block; padding: 5px 15px 5px 35px; font-size: 12px; border: 1px solid #666666; background-color: #FFF; border-radius: 5px; background-size: 16px; background-position: left 15px center; background-repeat: no-repeat; color: #666;}
#btnArea .create li a:hover,#btnArea .statusDelete li a:hover {background-color: #CCC;}
#btnArea .create li .pdfIssue {background-image: url("../img/icon_pdf_gry.svg");}
#btnArea .create li .copy {background-image: url("../img/icon_pdf_gry.svg");}
#btnArea .create li .deliveryslipCreate {background-image: url("../img/icon_deliveryslip_gry.svg");}
#btnArea .create li .invoiceCreate {background-image: url("../img/icon_invoice_gry.svg");}
#btnArea .create li .orderCreate {background-image: url("../img/icon_ordermanage_gry.svg");}
#btnArea .create li .estimateCreate {background-image: url("../img/icon_estimate_gry.svg");}
#btnArea .statusDelete li .delete {background-image: url("../img/icon_delete_gry.svg");}
#btnArea .statusDelete li .acOpen {padding: 5px 30px 5px 15px; font-size: 12px; border: 1px solid #666666; background-color: #FFF; border-radius: 5px; background-image: url("../img/icon_down_gry.svg"); background-repeat: no-repeat; background-position: right 15px center;}
#btnArea .statusDelete li .acContents {position: absolute; bottom: 32px; z-index: 1; width: 100%; padding: 10px; background: #999; border-radius: 5px 5px 0 0;}
#btnArea .statusDelete li .acContents li {margin: 0;}
#btnArea .statusDelete li .acContents li a {background: none; color: #FFF; width: 100%; padding: 5px 0; text-align: center; cursor: pointer; border-left: none; border-right: none; border-radius: 0; border-color: #FFF;}
#btnArea .totalBtm {padding-left: 20px; border-left: 1px solid #999999;}
@media screen and (max-width: 1245px) {
	#btnArea p:first-of-type {position: absolute; width: 80px; left: 20px; top: 50%; transform: translateY(-50%);}
	#btnArea p.mr20:first-of-type {position: relative; width: auto; left: 0; top: 0; transform:  translateY(0);}
	#btnArea p.w200:first-of-type {position: relative; width: 200px; left: 0; top: 0; transform:  translateY(0);}
	#btnArea .create,#btnArea .statusDelete {width: calc(100% - 100px); margin-left: 100px;}
	#btnArea .create {padding-bottom: 10px;}
	#btnArea .statusDelete .statusChange {width: 180px;}
	#btnArea .statusDelete li .acOpen {width: 180px; margin-left: -20px;}
	#btnArea .statusDelete li .acContents {width: 180px;}
	.container.mb120 {margin-bottom: 160px;}
}
@media screen and (max-width: 1150px) {
	.caseList li {align-items: unset;}
	.caseList .caseName {width: calc(100% - 245px); padding-bottom: 5px;}
	.caseList .issueDate,.caseList .expiration {margin: 5px 0 0; padding: 7px 10px 0; border-top: 1px dotted #999; width: 100px;}
	.caseList .price {margin: 5px 0 0; padding: 5px 0 0; border-top: 1px dotted #999; width: calc(100% - 200px);}
}
@media screen and (max-width: 1024px) {
	#btnArea .totalBtm {border-left: none; text-align: right; width: 100%;}
}
@media screen and (max-width: 896px) {
	.page {position: relative; right: 0; top: 0; transform: translateY(0); justify-content: flex-end; margin-top: 15px;}
	#btnArea {width: 100%; z-index: 2;}
	#btnArea .create li {margin-bottom: 10px;}
}
@media screen and (max-width: 568px) {
	.tab li {min-width: auto; width: calc(25% - 5px); margin-top: 2px;}
	.caseList .caseName {width: 100%; padding-top: 5px; border-top: 1px dotted #999; margin-top: 5px;}
	#btnArea {padding: 15px 10px;}
	#btnArea p:first-of-type {position: relative; top: 0; transform: translateY(0);}
	#btnArea .create,#btnArea .statusDelete {width: 100%; margin-left: 0; margin: 10px 0 0; padding: 0; border-left: none;}
	#btnArea .create li {width: calc(100%/3 - 10px);}
	#btnArea .create li a {display: block; width: 100%;}
}
@media screen and (max-width: 450px) {
	#btnArea .create li {width: calc(50% - 10px);}
	.container.mb120 {margin-bottom: 200px;}
}

.error li {padding: 15px 20px 15px 50px; background: #FBE7E5 url("../img/icon_error.svg") no-repeat left 20px center; margin-bottom: 10px; color: #E35E53; font-weight: 700;}
.complete li {padding: 15px 20px 15px 50px; background: #DBF0DB url("../img/icon_check.svg") no-repeat left 20px center; color: #5AAC5B; font-weight: 700;}
@media screen and (max-width: 896px) {
	.error li,.complete li {padding: 10px 10px 10px 30px; background-position: left 10px center; background-size: 15px;}
}

.suppliersName {width: calc(100% - 90px);}
.honorificTitle {width: 80px; margin-left: 10px;}
.count {float: right; font-weight: 500;}
.companyLogo {width: 100px;}
.companyStamp {width: 70px;}
.acOpen.txtLBL {padding-right: 20px; display: inline-block; position: relative;}
.acOpen.txtLBL::before,.acOpen.txtLBL::after {position: absolute; content: ''; background: #0092E5; top: 50%; transform: translateY(-50%);}
.acOpen.txtLBL::before {width: 14px; height: 2px; right: 0;}
.acOpen.txtLBL::after {height: 14px; width: 2px; right: 6px;}
.acOpen.txtLBL.active::after {content: none;}
.taxChange {background: #EEEEEE; border: 1px solid #666666; border-bottom: none; padding: 8px 20px;}
.btnEdit {width: 100%; display: block; padding: 5px 10px; border-radius: 5px; background: rgb(0,25,118); background: linear-gradient(0deg, rgba(0,25,118,1) 0%, rgba(0,146,229,1) 100%); color: #FFF; font-weight: 700;}
.btnEdit:hover {background: linear-gradient(180deg, rgba(0,25,118,1) 0%, rgba(0,146,229,1) 100%);}
.output {padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #999999;}
.output li {margin-right: 20px;}
.output li.history {margin-left: auto;}
.output li span {padding-left: 20px; background-repeat: no-repeat; background-position: left center;}
.output .pdf {background-image: url("../img/icon_pdf_wh.svg");}
.output .print {background-image: url("../img/icon_print.svg");}
.output .edit {background-image: url("../img/icon_edit_wh.svg");}
.output .createForm {background-image: url("../img/icon_form.svg");}
.output .agree {background-image: url("../img/icon_mail.svg");}
.output :hover .pdf {background-image: url("../img/icon_pdf_bl.svg");}
.output :hover .print {background-image: url("../img/icon_print_bl.svg");}
.output :hover .edit {background-image: url("../img/icon_edit_gry.svg");}
.output :hover .createForm {background-image: url("../img/icon_form_bl.svg");}
.output :hover .agree {background-image: url("../img/icon_mail_bl.svg");}
.otherOpe .acOpen {padding: 10px 35px 10px 20px; border-radius: 5px; color: #FFF; background-color: #999; background-image: url("../img/icon_down.svg"); background-repeat: no-repeat; background-position: right 10px center;}
.otherOpe .acOpen.active {background-image: url("../img/icon_up.svg");}
.otherOpe .acOpen span {padding: 0;}
.otherOpe .acContents {position: absolute; width: 250px; top: 45px; left: 0; background: #FFF; padding: 15px 15px 5px 15px; box-shadow: 0 0 3px rgba(0,0,0,.4);}
.otherOpe .acContents li {font-size: 14px; font-weight: 400; margin-bottom: 10px;}
.otherOpe .acContents li a {padding-left: 30px; background-repeat: no-repeat; background-position: left center; background-size: 20px auto;}
.otherOpe .acContents li a:hover {text-decoration: underline;}
.otherOpe .acContents li .download {background-image: url("../img/icon_download.svg");}
.otherOpe .acContents li .copy {background-image: url("../img/icon_copy.svg");}
.otherOpe .acContents li .deliveryslipCreate {background-image: url("../img/icon_deliveryslip.svg");}
.otherOpe .acContents li .invoiceCreate {background-image: url("../img/icon_invoice.svg");}
.otherOpe .acContents li .orderCreate {background-image: url("../img/icon_ordermanage.svg");}
.otherOpe .acContents li .estimateCreate {background-image: url("../img/icon_estimate.svg");}
.output .history a {padding-left: 25px; background: url("../img/icon_history.svg") no-repeat left center;}
.output .history a:hover {text-decoration: underline;}
.detail dt {width: 150px; margin-bottom: 8px;}
.detail dd {width: calc(100% - 151px); padding-left: 20px; margin-bottom: 8px; border-left: 1px solid #999999;}
.document {width: 760px; height: 1075px; margin: 40px auto 20px; background: #FFF; border: 1px solid #999999; box-shadow: 0 0 3px rgba(0,0,0,.4); padding: 35px 40px; align-content: flex-start;}
.document.order {height: auto; padding: 0; width: 100%;}
.document.order .inner {padding: 30px 40px 0;}
.document.order .docttl {width: calc(100% - 210px);}
.document.order .detail dt {width: 60px;}
.document.order .detail dd {width: calc(100% - 61px);}
.document.order .companyLogo {width: 190px;}
.commentHistory {border-top: 1px solid #999999; clear: both;}
.commentHistory dt {padding: 15px 0 10px; color: #999;}
.commentHistory dd {padding: 0 0 15px; border-bottom: 1px solid #999999;}
.orderBtm {background: #0092E5; width: 100%; padding: 10px 20px;}
.orderBtm .totalBtm {padding-left: 20px; border-left: 1px solid #FFF;}
.totalAmount {height: 280px; overflow-y: auto;}
.totalAmount .tblw {min-width: 1300px;}
.totalAmount th {background-color: #D9EFFB; padding: 5px 10px; vertical-align: middle;}
.totalAmount td {padding: 8px 10px; vertical-align: middle;}
.amount {text-align: right; width: 80px;}
.amount.total {font-weight: 700;}
.monthlySearch {position: absolute; right: 0; bottom: 10px;}
.monthlyAmount {margin-top: 10px;}
.monthlyAmount th,.monthlyAmount td {padding: 15px 0; border: none;}
.monthlyAmount th {border-bottom: 1px solid #222; text-align: right; font-weight: 400;}
.monthlyAmount th:first-of-type {text-align: left;}
.monthlyAmount th:last-of-type {font-weight: 700;}
.monthlyAmount td {font-size: 16px; border-bottom: 1px solid #999; background: #FFF;}
.monthlyAmount .amount {width: 150px;}
.caseList .suppliersName {width: calc(100% - 690px); padding-left: 20px;}
.caseList .suppliersName .name {display: block;}
.caseList .managerName {width: 300px; margin-left: 20px;}
.caseList .edit {width: 70px; text-align: center; margin: 0 20px;}
.caseList .operation {width: 200px; position: relative;}
.caseList .operation .acContents {padding: 15px; background: #FFF; box-shadow: 0 0 3px rgba(0,0,0,.4); position: absolute; top: 20px; left: 0; z-index: 1;}
.caseList .operation .acContents.diplay {right: 0; left: auto;}
.caseList .operation .acContents .icon {width: 18px; margin-right: 5px; display: inline-block;}
.mailing_name {margin-left: 20px;}
.mailing_address {margin: 10px 0 0 60px;}
.mailing_address dd {width: calc(50% - 150px);}
@media screen and (max-width: 1245px) {
	.caseList.suppliers li {align-items: unset;}
	.caseList.suppliers .check,.caseList.suppliers .suppliersName,.caseList.suppliers .managerName {border-bottom: 1px dotted #666; padding-bottom: 8px; margin-bottom: 8px;}
	.caseList.suppliers .managerName {margin-left: 0; padding-left: 20px;}
	.caseList .suppliersName {width: calc(100% - 360px);}
	.caseList.suppliers .acOpen {padding-top: 5px;}
	.caseList.suppliers .operation .acContents {top: 25px;}
}
@media screen and (max-width: 896px) {
	.output li {margin-bottom: 10px;}
	.monthlySearch {position: relative; right: 0; bottom: 0; margin-top: 20px;}
	.monthlyAmount tr {display: flex; flex-wrap: wrap;}
	.monthlyAmount .suppliersName,.monthlyAmount tr:first-child th:first-child {width: 100%; border-bottom: 1px dotted #666;}
	.monthlyAmount .amount,.monthlyAmount tr:first-child th {width: calc(100%/3);}
}
@media screen and (max-width: 568px) {
	.detail dt {width: 100%; margin-bottom: 0;}
	.detail dd {width: 100%; padding-left: 0; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #999999; border-left: none;}
}
@media screen and (max-width: 700px) {
	.caseList .suppliersName,.caseList.suppliers .managerName {width: calc(100% - 80px);}
}

#passreset {margin-top: 80px;}
#orderform header {position: relative; height: inherit; overflow-y: inherit; box-shadow: none;}
#orderform main {width: 100%; margin-left: 0;}
#orderform .container {max-width: 1172px;}
#orderform footer {left: 0; width: 100%;}
#orderform footer .logo {width: 160px;}
.orderFlow {margin-top: 40px; position: relative; padding: 0;}
.orderFlow li {position: relative; list-style-type: none; text-align: center; text-transform: uppercase; width: calc(100%/3); color: #999999; font-weight: 700; counter-increment: steps;}
.orderFlow li:before {display: block; width: 34px; height: 34px; margin: 7px auto 15px auto; content: ''; line-height: 34px; font-size: 14px; text-align: center; border-radius: 50%; background-color: #CCC; content: counter(steps);}
.orderFlow li:after {position: absolute; z-index: -1; top: 23px; left: -50%; width: 100%; height: 2px; content: ''; background-color: #CCC;}
.orderFlow li:first-child:after {content: none;}
.orderFlow li.active,.orderFlow li.complete{color: #001976;}
.orderFlow li.active:before,.orderFlow li.complete:before {background-color: #001976; color: #FFF;}
.orderFlow li.active:after,.orderFlow li.complete:after {background-color: #001976;}