/* エディタで使う基本 css*/
.art-box {min-height: 3rem;}


.kage-overlay, #kage-overlay {
 position: fixed;
 display: block;
 z-index: 999960;
 background-color: #333;
 opacity: 0.8;
 width: 100%;
 height: 100vh!important;
 height: -webkit-fill-available;
 top:0; left: 0; right:0;
 -webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}


#spot-header, #spot-footer { position: absolute; }

/* pop: dropdown menu  */
.dronpa { cursor: pointer; }
.dronpa::after { display: inline-block; content: "";
  margin-left: .255em; vertical-align: .255em;
  border-top: .3em solid; border-right: .3em solid transparent;
  border-bottom: 0; border-left: .3em solid transparent;
}
.dron {display:block;}
.dronpa > .dron {display:none;}

/* pop  */
.kite { position: fixed; display: flex; z-index: 999990; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; max-width: 100%!important;}

.kite.full { width:100%; height:100vh; top:0; left:0; }
.kite.t- { margin-bottom: auto; text-align: center; width:100%!important; height: auto;}
.kite.b- { margin-top: auto; text-align: center; width:100%!important; height: auto; }
.kite.l-, .kite.t-l, .kite.b-l { margin-right: auto; text-align: left; height:100vh!important; width: }
.kite.r-, .kite.t-r, .kite.b-r { margin-left: auto; text-align: right; height:100vh!important; width: auto;}

.kite.center { max-height: 85vh; top:50%; left:50%; transform:  translateX(-50%) translateY(-50%); }

.kite.b-, .kite.t- { justify-content:center;}
.kite.l-, .kite.r- { align-items:center; }
.kite.t-l, .kite.t-r { align-items:flex-start; }
.kite.b-l, .kite.b-r { align-items:flex-end; }

.kite > .kite-inner {
 position: relative;
 text-align: left;
 display: inline-flex;
 flex-direction:column;
 padding: 0;
 box-sizing: border-box;
 max-width: 100%;
 height: auto;
 background-color: #fff;
 overflow: auto;
 flex-grow: 1;
flex-shrink: 1;
}

.kite.l- > .kite-inner, .kite.r- > .kite-inner { align-self: center; }
.kite.t-l > .kite-inner, .kite.t-r > .kite-inner { align-self: flex-start; }
.kite.b-l > .kite-inner, .kite.b-r > .kite-inner { align-self: flex-end; }

/* Modal TAKO NINJA
max-width: 100%;
max-height: 100vh;
max-height: -webkit-fill-available;
max-height: fill-available;
overflow: auto;
*/
.kite .kite-close {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  pointer-events: auto!important;
  z-index: 1000000;
}

.kite > .kite-inner > header,
.kite > .kite-inner > footer { position: -webkit-sticky; position: sticky; display: flex; z-index: 990000; width:100%; justify-content:center;}

.kite > .kite-inner > .kite-header { top:0; left:0; right:0; padding-top: 1rem;}
.kite > .kite-inner > .kite-footer { bottom:0; left:0; right:0; align-self: flex-end; padding-bottom: 1rem;}

.kite > .kite-inner  > main {
  position: relative;
  flex: 1;
  margin: 0; padding: 0;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
}

/* picker  */
.picker-button {
  position: relative;
  display: inline-flex;
  margin: 1rem 0;
  padding: .5rem 1rem;
  border-style : solid;
  border-width : 1px;
  border-color : #ccc;
  border-radius : 6px;
}
.picker-start { opacity: 0.3; cursor: pointer;}
.picker-start.act { opacity: 1; }

/*  ポップアップセレクトボックス用のCSS  */
.picker-box { padding: 1rem; }
.picker-item { position:relative; padding-left: 2rem; margin-bottom: 1rem; cursor: pointer;pointer-events:auto!important;}
.picker-item * {pointer-events: none;}
.picker-item.act:before {
position: absolute; display: block;
content: '';
top: 45%; left: 0;
transform: rotate(45deg) translateY(-50%);
-webkit- transform: rotate(45deg) translateY(-50%);
border-right: 4px solid #0cc;
border-bottom: 3px solid #0cc;
width: 12px; height: 16px;
}
.picker-item.act {
  padding-top: .8rem;
  padding-bottom: .8rem;
  border-top: 1px solid #0cc;
  border-bottom: 1px solid #0cc;
}


/* pin  */
#pin-box { position: absolute; top:0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;}
#pin-box-inner { position: relative; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }

.pin-point { position: absolute; z-index: 999990; background-color: transparent; pointer-events: none; }
.pin-point.fix { position: fixed!important; }

.pin-point-inner { position: relative; display:block; width:100%; height:100%; }

.pin-hint { pointer-events: auto; }
.pin-hint > .hintbox { min-width: 50vw; display: inline-flex; align-items: center;}
.pin-hint > .hintbox > .pin-tag { display: inline-flex; }
.t-r.out.pin-hint > .hintbox, .b-r.out.pin-hint > .hintbox { text-align: right; justify-content: end;}

.pin-point.yellow {
  opacity: 1;
  -webkit-filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
  filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
  border: 2px solid #ffc107 !important;
  border-radius: 3px;
  background-color: transparent!important;
}
.pin-point.gray {
  opacity: 1;
  -webkit-filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
  filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
  border: 4px solid #ccc !important;
  border-radius: 3px;
  background-color: transparent!important;
}
.pin-point.red {
  opacity: 1;
  -webkit-filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
  filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
  border: 2px solid red !important;
  border-radius: 3px;
  background-color: transparent!important;
}
.pin-point.pink {
  opacity: 1;
  -webkit-filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
  filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
  border: 4px solid #f8bbd0 !important;
  border-radius: 3px;
  background-color: transparent!important;
}
.pin-point.info {
  opacity: 1;
  -webkit-filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
  filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
  border: 4px solid #33b5e5 !important;
  border-radius: 3px;
  background-color: transparent!important;
}