@charset "UTF-8";

/*Reset*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol,ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,th,td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q,blockquote {
  quotes: none;
}

q:before,q:after,blockquote:before,blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
  display: block;
}

button{
	border: none;
}

/*Common*/
body {
  font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 13px;
  color: #333;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

a {
  text-decoration: underline;
  transition: all 0.2s ease 0s;
}

.btn {
  text-decoration: none;
  transition: all 0.2s ease 0s;
}

p {
  margin-bottom: 1.5em;
}

a img {
  cursor: pointer;
}

.tac {
  text-align: center;
}

.tar {
  text-align: right;
}

.ta {
  text-align: left !important;
}

small,.small {
  font-size: 10px;
}

.hide-all {
  display: none;
}

strong,.bold {
  font-weight: 700;
}

img {
  max-width: 100%;
  height: auto;
}

img {
  vertical-align: bottom;
}

.required{
	color:red;
}


/* Color
====================================================== */
.color--sd{color:#d79d00 !important;}
.color--dp{color:#5f0983 !important;}
.color--th{color:#3e93bb !important;}
.color--hb{color:#1d9b20 !important;}
.color--ot{color:#8b0b0b !important;}
.color--at{color:#af8c35 !important;}
.color--ca{color:#eabe32 !important;}
.color--gm{color:#153482 !important;}
.color--dr{color:#c51019 !important;}
.color--sr{color:#75a5e0 !important;}
.color--be{color:#a04b33 !important;}
.color--js{color:#998e2b !important;}
.color--sa{color:#e5731b !important;}
.color--sk{color:#c4a130 !important;}
.color--ss{color:#333333 !important;}
.color--sv{color:#ccbe81 !important;}
.color--fh{color:#8dc68d !important;}
.color--tm{color:#a0a0a0 !important;}
.color--se{color:#ddbf7a !important;}
.color--db{color:#191919 !important;}
.color--de{color:#545454 !important;}
.color--pr{color:#1b5cc4 !important;}
.color--uq{color:#004320 !important;}
.color--gl{color:#017512 !important;}
.color--kt{color:#9b0009 !important;}
.color--ga{color:#6d4617 !important;}

/* Header
====================================================== */
header{
	width: 100vw;
	height: 45px;
	position: relative;
	text-align: center;
	background: #fff;
	position: fixed;
	top:0;
	z-index: 95;
}
header .header__logo{
	width: 95px;
	position: relative;
	top:5px;
}
header .sub-title{
	width: 100vw;
	margin: 0;
	font-size: 10px;
	transform: scale(.6);
	position: relative;
	top: 15px;
}
header .home{
	width: 16px;
	height: 16px;
	position: absolute;
	left: 5px;
	bottom: 18px;
	padding:5px;
	z-index: 999;
}
header .home a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height:30px;
	border:solid 1px #b2b2b2;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
}
header .home a img{
	width: 15px;
	height:15px;
}
header .logout{
	width: 60px;
	height: 13px;
	position: absolute;
	right: 14px;
	bottom: 25px;
}
header .logout{
	display: block;
}
header::after{
	content: "";
	display: block;
	width: 100vw;
	height: 6px;
	background: url(../img/header-line.svg) no-repeat;
	background-size: cover;
	background-position: bottom;
	position: absolute;
	bottom: 10px;
}

header .date{
	width: 100%;
	text-align: center;
	margin:0;
	font-size: 13px;
	padding:15px 0 0 0;
	height: 30px;
	background: #fff;

	display: flex;
	align-items: center;
	justify-content: center;
}

header .date span{
	position: relative;
	padding:5px;
}

header .date span:hover{
	cursor: pointer;
}


/* date-calendar */
.date-calendar > p{
	display: inline-block;
	margin-bottom: 0;
	position: relative;
}

.date-calendar.disabled > p + input{
	display: none;
}

.date-calendar.disabled::after{
	content: "";
	display: inline-block;
	width: 32px;
	height: 1px;
}

.date-calendar > p::after{
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url(../img/calendar.svg) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 2px;
	right:-27px;
}

.date-calendar.disabled > p::after{
	opacity: .6;
}

.date-calendar input{
	width: 24px !important;
	font-size: 16px;
	opacity: 0;
}

.date-calendar input:hover{
	cursor: pointer !important;
}

.ui-datepicker{
	z-index: 999;
	position: fixed;
	width: 380px;
    left: calc(50% - 193px) !important;
	top:80px !important;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
}

#calender-bg{
	display: block;
    position: fixed;
    left: 0;
    top: 0;
    background: #000;
    opacity: 0.2;
    width: 100vw;
    height: 100vh;
    z-index: 96;
}

.ui-widget-content{
	border:solid 1px #ddd;
}

.ui-widget-header{
	background: #fff;
	border: none;
}

.ui-widget-header select{
	/*border:none;*/
}

.ui-datepicker .ui-datepicker-title{
	display: flex;
	justify-content: center;
	align-items: center;
	padding:5px 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{
	top:10px;
}

.ui-datepicker .ui-datepicker-title select{
	border: solid 1px gray;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{
	width: 35%;
	margin-left: 5%;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br{
	border-radius: 0;
}

.ui-datepicker td > a{
	text-align: center;
	padding-top: .5em;
	padding-bottom: .5em;
}

/* Nav
====================================================== */
.nav{
	position: fixed;
	right: -200px;
	top:83px;
	background: #fff;
	border:solid 1px #ddd;
	width: 200px;
	padding:80px 20px;
	box-sizing: border-box;
	transition: all 0.3s 0s ease;
	z-index: 9999;
}
.js-nav-bg{
	display: none;
}
.js-nav-bg.js-nav-bg--open{
	display: block;
	position: fixed;
	left: 0;
	top:0;
	background: #000;
	opacity: 0.5;
	width: 100vw;
	height: 100vh;
	z-index: 9998;
}
.nav.nav--open{
	position: fixed;
	right: 0;
	top:83px;
}
.nav__inner{
	position: relative;
}
.nav__close{
	position: absolute;
	right: -5px;
	top: -60px;
	width: 25px;
	height: 25px;
}
.nav__close a{
	display: block;
	font-size: 0;
	width: 100%;
	height: 100%;
	background: url(../img/icon-close.svg) no-repeat;
	background-size: 60%;
	background-position: center;
}

.nav .btn{
	margin: 15px 0;
}

.nav__menu-logo{
	width: 100%;
	text-align: center;
	margin:20px 0;
}
.nav__menu-logo img{
	width: 100px;
}


/* Contents
====================================================== */
.container{
	width: 100%;
	box-sizing: border-box;
	padding:0 15px;
}

.content-fixed{
	width: 100%;
	position: fixed;
	top:80px;
	z-index: 95;
	background: #fff;
}

.content-head{
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	font-size: 13px;

	padding:5px 15px 15px 15px;
	box-sizing: border-box;
	background: #fff;
}

.content-head > div:first-child{
	width: 100%;
	position: relative;
}

.ui-autocomplete.ui-front{
	position: fixed;
	z-index: 9999;
}

.content-head__name{
	font-size: 16px;
}

.content-head__l .content-head__search{
	width: 100%;
	background-color: #ddd !important;
	border-radius: 5px;
	border: none;
	height: 34px;
	padding:0 10px 0 35px;
	box-sizing: border-box;
	background-image: url(../img/icon-search.svg) !important;
	background-size: 18px;
	background-repeat: no-repeat;
	background-position: 8px 8px;
	font-size: 16px;
}

.content-head__menu{
	width: 30px;
	height: 30px;
	margin-left: 20px;
	position: relative;
}
.content-head__menu span{
	width: 30px;
	height: 4px;
	background: #888;
	border-radius: 3px;
}
.content-head__menu .content-head__menu--top{
	position: absolute;
	right: 0;
	top:4px;
}
.content-head__menu .content-head__menu--middle{
	position: absolute;
	right: 0;
	top:14px;
}
.content-head__menu .content-head__menu--bottom{
	position: absolute;
	right: 0;
	top:24px;
}


/* Content Control
====================================================== */
#content-manage{
	padding: 0 15px;
	display: flex;
	gap:4px;
}

#content-manage .btn{
	text-align: right;
	padding: 5px 10px;
	font-size: 11px;
	background-color: #efefef;
	color: #333;
}

#content-manage .btn--all{
	background-image: url(../img/icon-alert-gr.png);
	background-repeat: no-repeat;
	background-size: 24px;
	background-position: left 15px center;
}

#content-manage .btn--all.active{
	color:#fff;
	background-color: #203ebe;
	background-image: url(../img/icon-alert-wh.png);
	background-repeat: no-repeat;
	background-size: 24px;
	background-position: left 15px center;
}

#content-manage .btn--temp{
	background-image: url(../img/icon-temp-error.png);
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: left 15px center;
}

#content-manage .btn--temp.active{
	color:#fff;
	background-color: #ac000a;
	background-image: url(../img/icon-temp-wh.png);
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: left 15px center;
}

#content-manage .btn--wash{
	background-image: url(../img/icon-wash.png);
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: left 10px center;
}

#content-manage .btn--wash.active{
	color:#fff;
	background-color: #139eff;
	background-image: url(../img/icon-wash-wh.png);
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: left 12px center;
}

#content-manage .btn--sale{
	background-image: url(../img/icon-sale.png);
	background-repeat: no-repeat;
	background-size: 23px;
	background-position: left 14px center;
}

#content-manage .btn--sale.active{
	color:#fff;
	background-color: #e7b223;
	background-image: url(../img/icon-sale-wh.png);
	background-repeat: no-repeat;
	background-size: 23px;
	background-position: left 14px center;
}


/* Content Select
====================================================== */
.content-select{
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
	background: #fff;
}
.content-select--calendar{
	padding-top:8px;
	padding-bottom:8px;
}
.content-select--closeUp{
	position: fixed;
	top:130px;
	z-index: 999;
	padding-bottom: 10px;
}

.content-select select{
	width: 100%;
	border-radius: 5px;
	height: 30px;
	border:solid 1px #898989;
	padding:0 5px;
}

/* Calender Term
====================================================== */
#calendar-term{
	display: flex;
	height:30px;
	padding:0 15px;
	border-bottom: solid 1px #898989;
	margin-bottom: 5px;
	gap:5px;
}

.calendar-term__month{
	border-left: solid 1px #898989;
	border-top: solid 1px #898989;
	border-right: solid 1px #898989;
	border-bottom: solid 1px #898989;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background: #efefef;
	padding:0 40px;
	position: relative;
	top:1px;
	line-height: 29px;
	font-size: 12px;
	white-space: nowrap;
}

.calendar-term__month.active{
	border-bottom: solid 1px #fff;
	background: #fff;
}

.calendar-term__week{
	border-left: solid 1px #898989;
	border-top: solid 1px #898989;
	border-right: solid 1px #898989;
	border-bottom: solid 1px #898989;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background: #efefef;
	padding:0 40px;
	position: relative;
	top:1px;
	line-height: 29px;
	font-size: 12px;
	white-space: nowrap;
}

.calendar-term__week.active{
	border-bottom: solid 1px #fff;
	background: #fff;
}

.calendar-wash__rate{
	flex:1;
	line-height: 29px;
	display: flex;
	justify-content: end;
	gap:10px;
}

.calendar-wash__rate span{
	display: flex;
	align-items: center;
}


/* Calendar
====================================================== */
/*
.calendar{
	padding-bottom: 5px;
	height: 100vh;
	overflow-y: auto;
}
*/

#calendar-date{
	height: 18px;
	width: 100vw;
	background: #fff;
	padding: 0px 0 5px 15px;
	font-size: 11px;
}

#calendar-date p{
	margin-bottom: 0;
}

.calendar-date-inner{
	display: none;
}

.calendar-date-inner.active{
	display:block;
}

/* 月表示 */
#calendar-month{
	display: none;
}

#calendar-month.active{
	display: block;
	/*
	position: fixed;
	left: 20px;
	bottom: 0;
	*/
}

.calendar-list{
	display: flex;
	flex-wrap: wrap;
	gap:5px;
	margin-top: 275px;
}

.calendar-list li{
	width: calc( (100% - 30px)/7 );
	height: 60px;
	border:solid 1px #ddd;
	border-radius: 5px;
	box-sizing: border-box;
	position: relative;
	background: #f3faf6;
}

.calendar-list li.bg-gray{
	background: #fbf3fb;
}

.calendar-num{
	display: block;
	width: 15px;
	text-align: left;
	font-size: 14px;
	position: absolute;
	left: 0px;
	top: -4px;
	transform: scale(.8);
	text-align: center;
	font-weight: bold;
}
.calendar-num.sut{
	color:#0071be;
}
.calendar-num.sun{
	color:#b1002b;
}
.calendar-list li.inactive{
	border:solid 1px #f4f4f4;
}
.calendar-list li.inactive .calendar-num{
	display: none;
}

/* 週表示　 */
#calendar-week{
	display: none;
}

#calendar-week.active{
	display: block;
	/*
	position: fixed;
	left:20px;
	bottom: 0;
	*/
}

.calendar-week-list{
	display: flex;
	flex-wrap: wrap;
	gap:3px;
	margin-top: 275px;
}

.calendar-week-list > li{
	width: 100%;
	height: 52px;
	border:solid 1px #ddd;
	border-radius: 5px;
	box-sizing: border-box;
	position: relative;
	background: #f3faf6;;
}
.calendar-week-list > li.bg-gray{
	background: #fbf3fb;
}

#calendar-week .calendar-num{
	display: block;
	width: auto;
	text-align: left;
	font-size: 14px;
	position: absolute;
	left: -3px;
	top: -2px;
	transform: scale(.8);
	text-align: center;
}

.calendar-week-detail{
	display: flex;
	width: 100%;
	height: 100%;
	padding:2px 0;
	box-sizing: border-box;
	justify-content: space-around;
}

/* 週表示　全エラー */
.calendar-week-detail.calendar-week-detail--all{
	padding:16px 4px 2px 0;
}

.calendar-week-detail--all .calendar-week-detail__item{
	width: 60px;
}

.calendar-week-detail--all .calendar-week-detail__item img{
	width: 11px;
	height: 11px;
}

.calendar-week-detail .calendar-week-detail__item{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	font-size: 9px;
}

/* 杯数 */
.calendar-week-detail__num > span{
	position: relative;
	top: -3px;
}

.calendar-week-detail__num span{
	font-size: 18px;
	line-height: 16px;
}

.calendar-week-detail__num span::after{
	content: "杯";
	font-size: 10px;
	position: relative;
	left:2px;
}


/* 週表示　樽温度・泡発生 */
.calendar-week-detail.calendar-week-detail--temp{
	padding: 2px 40px;
}

.calendar-week-detail--temp .calendar-week-detail__item{
	width: 150px;
}

.calendar-week-detail--temp .calendar-week-detail__item:first-child img{
	width: 18px;
	position: relative;
	top:6px;
}

.calendar-week-detail--temp .calendar-week-detail__item:last-child img{
	width: 22px;
	position: relative;
	top:6px;
}

.calendar-week-detail--temp li:first-child > div span{
	font-size: 14px;
	position: relative;
	top:4px;
	left:8px;
}

/* 週表示　洗浄 */
.calendar-week-detail.calendar-week-detail--wash{
	padding: 2px 40px;
}

.calendar-week-detail--wash .calendar-week-detail__item{
	width: 150px;
}

.calendar-week-detail--wash .calendar-week-detail__item:first-child img{
	width: 20px;
	position: relative;
	top:6px;
}

.calendar-week-detail--wash .calendar-week-detail__item:last-child img{
	width: 18px;
	position: relative;
	top:6px;
}
.calendar-week-detail--wash .calendar-week-detail__item > span:first-child{
	position: relative;
	top:8px;
}

/* 週表示　樽消費日数・販売量 */
.calendar-week-detail.calendar-week-detail--taru{
	padding: 2px 40px;
}

.calendar-week-detail--taru .calendar-week-detail__item{
	width: 150px;
	position: relative;
}

.calendar-week-detail--taru .calendar-week-detail__item:first-child img{
	width: 11px;
	position: relative;
	top:4px;
}

.calendar-week-detail--taru .calendar-week-detail__item--taru > div:first-child span{
	display: inline-block;
	width: 100%;
	text-align: center;
	position: absolute;
	left: 0;
	top:13px;
}

.calendar-week-detail--taru .calendar-week-detail__item--sale .calendar-week-detail__num > span{
	position: relative;
	top: 7px;
}

.calendar-taru-error{
	color:#dab500;
}


/* 樽温度・泡発生 */
.calendar-temp{
	display: flex;
	flex-direction: column;
	gap:1px;
	padding-left: 8px;
	align-items: center;
	margin-top: 16px;
}
.calendar-temp__1{
	height: 20px;
}
.calendar-temp__2{
	height: 19px;
}
.calendar-temp__1 img{
	width: 15px;
}
.calendar-temp__2 img{
	width: 19px;
}

/* 洗浄状況 */
.calendar-washing{
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap:1px;
	padding-left: 8px;
	align-items: center;
}
.calendar-washing__1{
	height: 19px;
}
.calendar-washing__2{
	height: 19px;
}
.calendar-washing__3{
	height: 19px;
}
.calendar-washing__4{
	height: 13px;
}
.calendar-washing__1 img{
	width: 17px;
}
.calendar-washing__2 img{
	width: 15px;
}
.calendar-washing__3 img{
	width: 21px;
}
.calendar-washing__4 img{
	width: 13px;
}

/* 販売量・樽日数 */
.calendar-sale{
	display: flex;
	flex-direction: column;
	gap:1px;
	margin-top: 12px;
	align-items: center;
}
.calendar-sale__num{
	height: 20px;
}
.calendar-sale__num > span{
	font-size: 16px;
	color: #565656;
}
.calendar-sale__num span{
	position: relative;
	left:3px;
}
.calendar-sale__num span::after{
	content: "杯";
	font-size: 10px;
}
.calendar-sale__taru{
	display: flex;
}
.calendar-sale__taru-date{
	position: relative;
	width: 25px;
	display: flex;
	justify-content: center;
}
.calendar-sale__taru-date img{
	width: 10px;
}
.calendar-sale__taru-date span{
	display: block;
	position: absolute;
	top:6px;
	font-size: 10px;
	transform: scale(.8);
	color: #dbb700;
	letter-spacing:-1px;
	
}
.calendar-sale__taru-state{
	width: 17px;
}
.calendar-sale__taru-state img{
	width: 15px;
	position: relative;
	top:2px;
	left:-1px;
}

/* 全ステータス */
.calendar-all{
	display: flex;
	flex-direction: column;
	gap:4px;
	margin-top: 16px;
	align-items: center;
}
.calendar-all > div{
	height: 10px;
	width: 100%;
	position: relative;
}
.calendar-all img{
    width: 8px;
    height: 8px;
	display: inline-block;
	position: absolute;
	left: calc(50% - 4px);
	top:2px;
}

/* closeUp
====================================================== */
.modal-closeUP{
	display: none;
	height: calc(100vh - 100px);
	position: fixed;
	left:10px;
	top:10px;
	width: calc(100vw - 20px);
	border:solid 1px #fff;
	border-radius: 5px;
	background: #fff;
	z-index: 995;
	padding-top: 10px;
	box-sizing: border-box;
	z-index: 1001;
	animation: .3s forwards modalScale;
}

@keyframes modalScale {
    0% {
        transform:  scale(0.9);
    }
    100% {
        transform:  scale(1);
    }
}

.closeUp__inner{
	margin-top: 10px;
	height: calc(100vh - 150px);
	overflow-y: auto;
	background: #fff;
	padding:0 10px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.closeUp__inner > div:last-child{
	margin-bottom: 90px;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
}

.closeUp{
	/*margin-top: 170px;*/
}
.closeUP-header{
	width: calc(100% - 20px);
	position: relative;
	background: #e6e6e6;
	border-radius: 5px;
	text-align: center;
	font-size: 14px;
	height: 30px;
	position: relative;
	left:10px;
	line-height: 30px;
}
.closeUP-header__prev{
	position: absolute;
	left: calc(50% - 90px);
	width: 30px;
	height: 30px;
	font-size: 0;
	background:url(../img/icon-arrow-gr.svg) no-repeat;
	background-size: 12px 12px;
	background-position: center;
}
.closeUP-header__next{
	position: absolute;
	left: calc(50% + 70px - 11px);
	width: 30px;
	height: 30px;
	font-size: 0;
	background:url(../img/icon-arrow-gr.svg) no-repeat;
	background-size: 12px 12px;
	transform: scaleX(-1);
	background-position: center;
}
.closeUP-header__close{
	position: absolute;
	right: -15px;
	top:-15px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border:solid 1px #747474;
	background: #fff;
}

/* close btn */
.closeUP-header__close a{
	display: block;
	position: relative;
	width: 20px;
	height: 20px;
	font-size: 0;
	padding:5px;
}
.closeUP-header__close a::before, .closeUP-header__close a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 16px;
	background: #747474;
} 
.closeUP-header__close a::before {
	transform: translate(-50%,-50%) rotate(45deg);
}
   
.closeUP-header__close a::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}


.closeUP-content{
	background: #e6e6e7;
	border-radius: 5px;
	margin-bottom: 3px;
}
.closeUP-content__name{
	padding:5px 10px;
}

.closeUP-content__temp > div .closeUP-content-title,
.closeUP-content__washing > div .closeUP-content-title,
.closeUP-content__sale > div .closeUP-content-title{
	position: absolute;
	left: 0;
	font-size: 10px;
}

.closeUP-content__temp > div .closeUP-content-title{
	position: absolute;
	top:-5px;
	left:0;
}

.closeUP-content__body{
	position: relative;
	width: 100%;
}

/* 樽温度・泡発生 */
.closeUP-content__temp{
	height: 40px;
	display: flex;
	padding:10px 0;
	margin:0 15px;
	border-bottom: 1px solid #fff;
}
.closeUP-content__temp-l{
	flex:1;
	position: relative;
}
.closeUP-content__temp-l > div{
	display: flex;
	justify-content: center;
	gap:15px;
}
.closeUP-content__temp-r{
	flex:1;
	position: relative;
	display: flex;
	justify-content: center;
}
.closeUP-content__temp-l img{
	width: 25px;
	position: relative;
	top:2px;
}
.closeUP-content__temp-r img{
	width: 32px;
    position: absolute;
    left: 83px;
    top: 2px;
}
.closeUP-content__temp-info p{
	margin-bottom: 0;
}
.closeUP-content__temp-info-time{
	font-size: 10px;
}
.closeUP-content__temp-info-temp{
	font-size: 17px;
}
.closeUP-content__temp-l .closeUP-content__temp-info-time{
	position: absolute;
	right: 40px;
	top:0;
}
.closeUP-content__temp-l .closeUP-content__temp-info-temp{
	position: absolute;
	right: 17px;
    top: 14px;
}
.closeUP-content__temp-r .closeUP-content__temp-info-time{
	position: absolute;
	left: 130px;
	top:0;
}
.closeUP-content__temp-r .closeUP-content__temp-info-temp{
	position: absolute;
	left: 76px;
    top: 14px;
}


/* 洗浄状況 */
.closeUP-content__washing{
	display: flex;
	padding:10px 0;
	margin:0 15px;
	border-bottom: 1px solid #fff;
	height: 40px;
}
.closeUP-content__washing-l{
	flex:1;
	position: relative;
}
.closeUP-content__washing-l img{
	width: 27px;
	position: absolute;
	right:57px;
	top:10px;
}
.closeUP-content__washing-r{
	flex:1;
	position: relative;
}

.closeUP-content__washing-l .closeUP-content__body span,
.closeUP-content__washing-r .closeUP-content__body span{
	position: absolute;
    left: 50px;
    top: 15px;
    width: 100px;
    text-align: center;
    display: inline-block;
}

.closeUP-content__washing-r img{
	width: 25px;
    position: absolute;
    left: 87px;
    top: 10px;
}


.closeUP-content__sale{
	display: flex;
	margin:0 15px;
	height: 90px;
	padding-top: 10px;
}
.closeUP-content__sale-l{
	flex:1;
	position: relative;
}
.closeUP-content__sale-amount{
	position: absolute;
	width: 60px;
	text-align: center;
	font-size: 15px;
	position: absolute;
	right: 40px;
	top:35px;
	margin-bottom: 0;
}
.closeUP-content__sale-amount span{
	font-size: 12px;
	padding-left: 2px;
}
.graph-label{
	font-size: 10px;
}
.closeUP-content__sale-r{
	flex:1;
	position: relative;
}
.closeUP-content__sale-info{
	position: relative;
}
.closeUP-content__sale-r img {
    width: 20px;
    position: absolute;
    left: 90px;
    top: 25px;
}
.closeUP-content__sale-num{
	position: absolute;
    left: 80px;
    top: 40px;
    font-size: 14px;
    width: 40px;
    text-align: center;
    color: #dbb600;
    margin-bottom: 0;
}
.closeUP-content__sale-num--wh{
	color: #fff !important;
}

.closeUP-content__chart{
	position: absolute;
	right: -10px;
	transform: scale(.95);
}

.closeUP-memory{
	display: flex;
	align-items: end;
	gap:6px;
}

/* 樽消費日数 ビール */
.closeUP-memory li{
	font-size: 0;
	background: url(../img/memory-off.svg) no-repeat;
	background-size: cover;
	width: 7px;
	height: 7px;
}
.closeUP-content__washing-r .closeUP-memory li.active{
	font-size: 0;
	background: url(../img/memory-og-on.svg) no-repeat;
	background-size: cover;
	width: 7px;
	height: 7px;
}
.closeUP-content__sale-r .closeUP-memory li.active{
	font-size: 0;
	background: url(../img/memory-yl-on.svg) no-repeat;
	background-size: cover;
	width: 7px;
	height: 7px;
}


/* Btn
====================================================== */

.btn{
	display: inline-block;
	width:100%;
	border-radius: 5px;
	background: #c0c2c2;
	padding:6px 0;
	text-align: center;
	text-decoration: none;
	color:#fff;
	font-size: 13px;
	box-sizing: border-box;
}

.btn:hover{
	/*
	opacity: 0.5;
	color:#fff;
	*/
}
.btn--default.active{
	background: #888888;
}

.btn--red{
	background: #fff;
	border:solid 2px #c7000b;
	color: #c7000b;
}
.btn--red.active,
.btn--red:focus,
.btn--red:hover{
	background: #c7000b;
	border:solid 2px #c7000b;
	color: #fff;
}
.btn--org{
	background: #fff;
	border:solid 2px #d28832;
	color: #d28832;
}
.btn--org.active,
.btn--org:focus,
.btn--org:hover{
	background: #d28832;
	border:solid 2px #d28832;
	color: #fff;
}
.btn--yel{
	background: #fff;
	border:solid 2px #dbb600;
	color: #dbb600;
}
.btn--yel.active,
.btn--yel:focus,
.btn--yel:hover{
	background: #dbb600;
	border:solid 2px #dbb600;
	color: #fff;
}

/* Form
====================================================== */
.form{
	margin-top: 100px;
}
.form__input{
	width: 100%;
	height: 32px;
	margin-bottom: 25px;
	box-sizing: border-box;
	border: none;
	background: #dcdddd;
	padding:0 8px;
	border-radius: 5px;
	font-size: 16px;
}
.form__btn{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.form__btn input{
	border: none;
	background: #ddd;
	text-align: center;
	border-radius: 5px;
	padding:8px 60px;
	margin:0 10px;
	color: #000;
}


/* select2 */
.select2-container .select2-selection--single{
	height: 35px !important;
	background-image: url("../img/arrow.png") !important;
    background-repeat:no-repeat;
    background-size:21px 9px;
    background-position:right center;
}
.select2-container--default .select2-selection--single{
	border-color: #ccc !important;	
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height: 35px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
	display: none !important;
	height: 35px !important;
}

/* pulldown */
select{
    outline:none;
    text-indent: 0.01px;
    text-overflow: '';
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("../img/arrow.png") !important;
    background-repeat:no-repeat;
    background-size:21px 9px;
    background-position:right center;
}
select option{
  background-color: #fff;
  color: #333;
}
select::-ms-expand {
  display: none;
}
select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #828c9a;
}

/* adjustment */
select#ClientPref,select#CompanyPref,select#ChainPref,select#StorePref,select#DispenserPref{
	margin-bottom:5px;
}

/* Login
====================================================== */
.login{
	width:260px;
	margin: auto;
}

.login__logo{
	margin-top: 280px;
	width: 100%;
	text-align: center;
}
.login__logo img{
	width: 110px;
}

/* Shop List
====================================================== */
.shop{
	margin-top: 180px;
}
.shop--edit{
	margin-top: 125px;
	padding-bottom: 60px;
}
.shop-list{
	overflow-y:auto;
	padding-bottom: 10px;
}
.shop-list li .shop-list__item-content{
	margin:8px 0;
	background: #e4e4e4;
	border: solid 2px #e4e4e4;
	border-radius: 5px;
	display: flex;
	align-items: center;
	padding:6px 10px;
	text-decoration: none;
	color: #000;
	box-sizing: border-box;
}
.shop-list li .shop-list__item-content.active{
	border: solid 2px #9e9e9f;
}
.shop-list li p{
	margin-bottom: 0;
}

.shop-list__item-name{
	flex:1
}
.shop-list__item-status{
	width:60px;
	display: flex;
	margin-left: 10px;
}
.shop-list__item-status span,
.shop-list__item-status li{
	width: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.shop-list__item-status svg,
.shop-list__item-status img{
	width: 10px;
	height: 10px;
}
.shop-list__item-btn{
	width:50px;
	display: flex;
	margin-left: 20px;
	position: relative;
	left: 10px;
}
.shop-list__item-btn a{
	display: inline-block;
	background: #fff;
	border-radius: 3px;
	padding:1px 8px;
	text-decoration: none;
}
.shop-list__item-btn-delete{
	background: gray !important;
	color:#fff;
}

/* Shop Edit
====================================================== */
.shop-edit{
	display: flex;
	gap:10px;
	width: 100vw;
	position: fixed;
	bottom: 0;
	left: 0;
	padding:15px 10px;
	box-sizing: border-box;
	border-top: solid 1px gray;
	z-index: 999;
	background: #fff;
}

/* Massage
====================================================== */
.message{
	padding:8px 12px;
	margin-bottom: 20px;
}
.message__error{
	color: #ee0000;
	background: #f8d8d8;
}

/* Icon
====================================================== */
.icon-wash{
	content:"";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background: url(../img/icon-wash.svg) no-repeat;
	line-height: 29px;
	margin:0 5px;
}

.icon-sponge{
	content:"";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background: url(../img/icon-sponge.svg) no-repeat;
	line-height: 29px;
	margin:0 5px;
}

/* Loading
====================================================== */
#closeUp-loader{
	width: 100%;
	height: 80vh;
	top: 0;
	z-index: 9999;
	display: none;
}

/*
#closeUp-loader.loaded {
	opacity: 0;
	visibility: hidden;
}
*/

.closeUp-loader__inner{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.closeUp-loader-spinner{
	display: inline-block;
	position: relative;
	top:-8%;

	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 4px solid #747474;
	border-left-color: #fff; 
	/* アニメーションを1秒かけて実行 */
	animation: spinner-rotation 1s linear infinite;
}

/* アニメーションの設定 */
@keyframes spinner-rotation {
	0% {
	  transform: rotate(0);
	}
	100% {
	  transform: rotate(360deg);
	}
}