@charset 'utf-8';

/* ================================================================================== */
/*   CSS Import   */
/* ================================================================================== */
@import url(./ress.css);
@import url(./fontawesome5.15.2/css/all.css);

/* ================================================================================== */
/*   Responsive */
/* ================================================================================== */
@import url(./mainPc.css);
@import url(./mainSp.css);

/* ================================================================================== */
/*   Common TAG   */
/* ================================================================================== */
html{ width:100%; background-color:#efefef; }
pre{ padding:1rem; border-bottom:1px #333333 solid; }
div{ position:relative; }
img{ display:inline-block; width:100%; height:auto; }

/* ================================================================================== */
/*   Common Class  */
/* ================================================================================== */
.fBold { font-weight:bold; }
.cRed  { color:#db0101; }
.cBlue { color:#0069b2; }
.cGreen{ color:#19b300; }
.alert { color:#db0101; font-weight:bold; font-size:1.3em; }
.indent{ padding-left:1em; text-indent:-1em; }

.en{ display:block; font-style:italic; font-size:0.9em; line-height:130%; }


/* ================================================================================== */
/*   Button   */
/* ================================================================================== */
.btn{ display:inline-block; position:relative; width:100%; height:3rem; margin-top:0.6rem; line-height:3rem; text-align:center; background-color:#999999; color:#ffffff; border-radius:0.2rem; }
.btn > span{ display:block; width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-47%); }
.btn > span > i{ margin-right:0.3rem; }
.btn:hover{ cursor:pointer; opacity:0.7; }
.btnRed{ background-color:#c40026; color:#ffffff; }
.btnBlue{ background-color:#0069b2; color:#ffffff; }
.bnnGreen{ background-color:#19b300; color:#ffffff; }

/* ================================================================================== */
/*   Form   */
/* ================================================================================== */
/* Pulldown */
.formSelect{ padding-top:0.4rem; }
.formSelect:before{ content:'\f150'; font-weight:900; font-size:1.3rem; color:#0069bc; position:absolute; top:0.7rem; left:0.3rem; font-family:'Font Awesome 5 Free'; z-index:+1; pointer-events:none; }
.formSelect > select{ display:block; margin-bottom:0.3rem; position:relative; width:100%; height:2rem; line-height:2rem; color:#0069bc; padding-left:2rem; background-color:#ffffff; border:1px #cccccc solid; }
.formSelect > select:hover{ cursor:pointer; background-color:#ffff33; }
.formSelect > select:focus{ background-color:#ffffcc; }
/* Text */
.formText{ padding-top:0.4rem; }
.formText > input{ display:inline-block; margin-bottom:0.3rem; width:100%; height:2rem; line-height:2rem; color:#0069bc; padding-left:1rem; background-color:#ffffff; border:1px #cccccc solid; }
.formText > input:hover{ cursor:pointer; background-color:#ffff33; }
.formText > input:focus{ background-color:#ffffcc; }
.formText > input.formTextNum{ width:5rem; text-align:right; padding-right:1rem; }
/* TextArea */
.formText{ padding-top:0.4rem; }
.formText > textarea{ display:inline-block; margin-bottom:0.3rem; width:100%; height:10rem; line-height:2rem; color:#0069bc; padding-left:1rem; background-color:#ffffff; border:1px #cccccc solid; }
.formText > textarea:hover{ cursor:pointer; background-color:#ffff33; }
.formText > textarea:focus{ background-color:#ffffcc; }
/* Radio */
.formRadio{ padding-top:0.4rem; }
.formRadio > label > input{ display:none; }
.formRadio > label > input + p{ display:inline-block; margin-bottom:0.3rem; margin-right:0.3rem; position:relative; width:10rem; height:2rem; line-height:2rem; text-align:center; background-color:#bbbbbb; border-radius:0.2rem; }
.formRadio > label > input + p:hover{ cursor:pointer; opacity:0.7; }
.formRadio > label > input:checked + p{ color:#ffffff; background-color:#0069bc; }
/* CheckBox */
.formCheck{ padding-top:0.4rem; }
.formCheck > label > input{ display:none; }
.formCheck > label > input + p{ display:inline-block; margin-bottom:0.3rem; margin-right:0.3rem; position:relative; width:10rem; height:2rem; line-height:2rem; text-align:center; background-color:#bbbbbb; border-radius:0.2rem; }
.formCheck > label > input + p:hover{ cursor:pointer; opacity:0.7; }
.formCheck > label > input:checked + p{ color:#ffffff; background-color:#0069bc; }


.resvWinSubEquip{ width:100%; height:3rem; }
.resvWinSubEquip > label{ display:block; width:100%; height:3rem; position:relative; border-bottom:1px #333333 solid; }
.resvWinSubEquip > label > input{ position:absolute; top:1rem; left:1rem; }
.resvWinSubEquip > label > input + p{ width:calc(100% - 2rem); margin-left:2rem; height:3rem; font-size:1.1rem; padding-left:0.4rem; position:relative; line-height:3rem; background-color:#efefe5; border-bottom:1px #333333 solid; }
.resvWinSubEquip > label > input + p:hover{ cursor:pointer; background-color:#fff6ff; }
.resvWinSubEquip > label > input:checked + p{ font-weight:bold; background-color:#ffff00; }



/* ================================================================================== */
/*   naLoading   */
/* ================================================================================== */
.naLoading{ width:100%; height:100%; position:fixed; top:0; left:0; z-index:999999; background-color:rgba(0,0,0,0.7); }
.naLoading > p{ display:block; font-size:1.3em; line-height:100%; color:#ffffff; padding:1rem 2rem; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background-color:rgba(0,106,184,0.8); border:1px #ffffff solid; border-radius:0.3rem; }
.naLoading > p > i{ font-size:1.4em; color:#ffffff; margin-right:0.4em; }








/* ================================================================================== */
/*   Reservation   */
/* ================================================================================== */
/* マスク */
.timeMask{ height:100%; position:absolute; top:0; background-color:rgba(0,0,0,0.3); x-index:+30; }
.timeMask.morning{ width:1080px; left:0; }
.timeMask.evening{ width:840px; left:2040px; }
.timeMask.allDay{ width:100%; right:0; }
/* ガント上の予約BOX */
.timeResv{ height:100%; position:absolute; top:0; }
.timeResv:hover{ cursor:pointer; }
.timeResv p{ width:100%; line-height:100%; padding-left:0.5rem; padding-top:0.3rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.timeResv.otherResv{ background-color:rgba(0,0,0,0.5); }
.timeResv.otherResv > p{ color:#ffffff; }
.timeResv.myResv{ background-color:rgba(0,255,0,0.7); }
.timeResv.myResv > p{ color:#333333; }


.timeResvSub{ height:calc(100% - 0.3rem); position:absolute; top:0.15rem; border-radius:0.3rem; }
.timeResvSub.otherResv{ background-color:rgba(0,0,0,0.5); }
.timeResvSub.myResv{ background-color:rgba(0,128,0,0.5); }


/* 実績バー */
.recordBar{ height:20%; position:absolute; bottom:0; background-color:rgba(184,0,0,0.3); }
.recordBarComp{ height:20%; position:absolute; bottom:0; background-color:rgba(0,0,184,0.3); }

/* ドラッグ時のBOX */
.resvDragBox{ width:0; height:100%; top:0; left:0; border:1px #ff0000 solid; background-color:rgba(255,128,128,0.6); }










/* ================================================================================== */
/*   MyAccount   */
/* ================================================================================== */


.uidChkInfo{ color:#999999; font-weight:bold; position:absolute; top:0; left:40%; }
.uidChkInfo.OK{ color:#19b300; }
.uidChkInfo.NG{ color:#db0101; }