.btn-floating {
    display: inline-block;
    text-align: center;
    color: rgba(0, 0, 0, 0.43);/*アイコン色*/
    overflow: visible!important;
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0!important;
    background-color: #e0e0e0;
    border-radius: 50%;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    cursor: pointer;
    vertical-align: middle;
}

.btn-floating.active, .btn-floating:hover { background-image: linear-gradient(#d8d8d8 0%, #c6c6c6 100%); color: rgba(99, 99, 99, 0.43);}
.btn-floating.active {box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19); border-bottom: none;}
.btn-floating:before { border-radius: 0; }

.btn-floating.btn-large { width: 56px; height: 56px; padding: 0;}
.btn-floating.btn-small { width: 32.4px; height: 32.4px; }
.btn-floating, .btn-floating i { font-size:24px!important; line-height: 44px; }
.btn-floating.btn-small, .btn-floating.btn-small i {  font-size:14px!important; line-height: 32.4px; }
.btn-floating.btn-large, .btn-floating.btn-large i {  font-size:32px!important; line-height: 54px; }

.icon-hint {color:#000;display:block; position:absolute; top:90%; left:0; right:0; z-index:999; font-size: 11px; padding-top:2px; padding-bottom:2px;
line-height: 1; text-align: center; width: 100%;
background-color: rgba(255,255,255,0.8);
}

.select-white::selection {
  background: #fff;
  color: #000;
}

.select-white::-moz-selection { /* Firefox用 */
  background: #fff;
  color: #000;
}

.overlay .mask:hover {
    opacity: 1;
}

/* for select ninja */
.adddiv { border: 2px dashed #57A5DD;
  background: #f3f3f3;
  width:100%;
  text-align: center;
  padding: 1em;
}
.addbtn {margin-left: 1em;}
.addfree {display:block;width:100%;}
.form-check-input {margin-right: 0.5em;}
.toolbox .btn { cursor: pointer; }
.toolbox .btn.btn-outline-secondary { cursor: not-allowed; }

/* for doc and image ninja */
.slctbtn {position: relative;}
.slctbtn > input {opacity:0; position:absolute; top:0; left:0; right:0;bottom:0; width:100%; height:100%; z-index:9999;}

/*  opacity:0; は、androidでマルチファイルを動作させるおまじない？display:none;だと動作しない。javascriptでクリックを発火させる方法もあるがCSSで済めばそのほうがいいよね。*/

.thmg { max-height: 400px; overflow-x: scroll;}
.thmg > img { width:18%; }

.kura.dodai a.img {
  pointer-events: none;
}

.progressbar {position: relative;}
.progressmes {position: absolute; top: 50%; left: 45%; margin-top: -0.6em; }

.file_info { border: 1px solid #000000; margin: 5px 0; padding: 5px;}
.uparea { display:block; border:dotted #CCC 2px;
 background-color: #f3f3f3;
 border-radius: 6px;
 padding: 62px 21px;
 text-align:center;
 position: relative;
 margin: 0 14px;
}

.navtext {
color: #000;
display: block;
position: absolute;
top: 90%;
left: 50%;
margin-left: -35px;
z-index: 999;
font-size: 11px;
padding: 3px 2px;
line-height: 1;
text-align: center;
width: 70px;
background-color: rgba(255,255,255,0.9);
border-radius: 5px;
}

.thumimg { position: relative;}
.thumimg > .ctrl-first {display: inline-block; position: absolute; top:2px; left:2px; width: 2rem; height:3rem; z-index:99;}

.thumimg > .ctrl-last {display: inline-block; position: absolute; bottom: 5px; left: 50%; transform:translateX(-50%);}
.thumimg > .view > label {
  display: inline-block; position: absolute;
  bottom: 5px; left: 50%; transform:translateX(-50%);
  z-index: 970;
  width: 18px!important; height:18px!important; margin-left: 8px;
}
.thumimg > .ctrl-last > label > input {
  display: block;
  position: absolute;
  pointer-events: auto !important;
  z-index: 980;
  top: 50%;
  left: 50%;
  width: 18px!important; height:18px!important;
  -moz-transform:	translate(-50%, -50%)	scale(1.4);
  -webkit-transform: translate(-50%, -50%) scale(1.4);
   transform:	translate(-50%, -50%) scale(1.4);
}


/* テーブル忍者OLD */
.tr {position: relative; width:100%;display: block;min-height: 3em;}
.td {width:49%; margin-right:1%; display:inline-block; border: solid 1px #eee;height:100%;}
.td > textarea {width:100%!important; height:100%!important; resize: none;}
.tr .hdtr , .tr .deltr { position: absolute; width:18px; font-size:14px; padding: 2px; text-align: center;}
.tr .hdtr {top:40%; left:-22px;cursor: move;}

.sortable-chosen .tr .hdtr  { left: 22px; cursor: move;}

.tr .deltr {top:40%; right:-18px;cursor: pointer;}
.table > .tr:first-child > .hdtr, .table > .tr:first-child > .deltr {display:none!important;}
.inputbox > .table > .tr > .td:nth-child(3n) {display: none;}
.tabledata {margin-bottom:1em;}

/* テーブル忍者用 */
.dodai.tabledata {display:block; }
.kgwrp .table {border-top: solid 1px #eee; border-right: solid 1px #eee; margin: 0; padding: 0;}
.kgwrp .tr {position:relative; width:100%;display: block; min-height: 3em; margin: 0;padding: 0;}
.kgwrp .td {position:relative; width:50%; margin: 0;padding: 0; display:inline-block; border-left: solid 1px #eee; border-bottom: solid 1px #eee; height:100%;}
.kgwrp .td .typebtn { position: absolute; bottom:0; right:0;}
.kgwrp .td > textarea {padding:1rem;width:100%!important; height:100%!important; resize: none; border:none;}
.tr .hdtr {padding: 3px 1rem; font-size:21px; position: absolute; top:40%; left:-2rem;cursor: move;background-color:transparent;transition: background-color 1s;}
.tr .deltr {padding: 3px 1rem; font-size:21px; position: absolute; top:40%; right:-2rem;cursor: pointer;background-color:transparent;transition: background-color 1s;}
.tr .hdtr:hover {color:#fff; background-color: #6aa7cd; transition: background-color 2s;  z-index:2;}
.tr .deltr:hover {color:#fff; background-color: #F0897F; transition: background-color 2s;  z-index:2;}
.table > .tr:first-child > .hdtr, .table > .tr:first-child > .deltr {display:none!important;}
.inputbox.table > .tr > .td:nth-child(3n) {display: none;}
.tabledata { margin-bottom:1em; }

.ui-resizable-handle { background-color:#ddd; }
.ui-resizable-s {
    cursor: s-resize;
    height: 4px;
    width: 30px;
    bottom: -1px;
    left: 10%;
}
.ui-resizable-e {
    cursor: e-resize;
    width: 4px;
    right: -1px;
    top: 10%;
    height: 30px;
}
.resizable-helper {
    border: 1px dotted #57A5DD;
    background-color: none;
    opacity: 1;
}
.ui-resizable-ghost {
     opacity:0 !important;
 }

/* ninja form */
.njwrp, .kage {display: block;}
.kage:before, .kage:after, .njwrp:before, .njwrp:after { content: " "; display: table; }
.kage:after, .njwrp:after { clear: both; }

.njwrp, .kgwrp {position: relative; padding-top:1rem !important;padding-bottom: 1rem !important;}

.njdbg, .njadd, .njmov, .njdel, .njchk, .njedt {position: absolute!important; z-index:1;
width: 2rem; height:2rem; text-align: center;
overflow: hidden;
display:none;
}
.kgwrp {display:inline-block;}
.njtool {text-align: center;}



/* ninja form parts */
div[debug="on"].njwrp > .njtool > .njdbg,
.kgwrp > .njtool > .njdbg {top:-2rem; left:4rem; border-bottom: 0.5px solid #ddd;background-color:transparent;transition: background-color 1ms;}

div[debug="on"].njwrp:hover > .njtool > .njdbg {border-bottom: 0.5px solid #aaa;}

div[data-mode="free"].njwrp .kgwrp > .njtool > .njmov,
div[debug="on"].njwrp .kgwrp > .njtool > .njmov {top:0; left:0; border-top: 0.5px solid #6aa7cd;  border-left: 0.5px solid #6aa7cd;background-color:transparent;transition: background-color 1s;}

div[data-mode="free"].njwrp .kgwrp > .njtool > .njdel,
div[debug="on"].njwrp .kgwrp > .njtool > .njdel {top:0; right:0; border-top: 0.5px solid #F0897F;  border-right: 0.5px solid #F0897F;background-color:transparent;transition: background-color 1s;}

div[data-mode="free"].njwrp .kgwrp > .njtool > .njedt,
div[debug="on"].njwrp .kgwrp > .njtool > .njedt {bottom:0; right:0; border-bottom: 0.5px solid #f6da69; border-right: 0.5px solid #f6da69;background-color:transparent;transition: background-color 1s;}

div[data-mode="free"].njwrp .kgwrp > .njtool > .njchk,
div[debug="on"].njwrp .kgwrp > .njtool > .njchk {bottom: 0; left:0; border-bottom: 0.5px solid #b2ce54; border-left: 0.5px solid #b2ce54;background-color:transparent;transition: background-color 1s;}

div[debug="on"].njwrp > .njtool > .njdbg:hover,
.kgwrp > .njtool > .njdbg:hover {background-color: #aaa; transition: background-color 2s; color:#fff; z-index:2;}

div[data-mode="free"].njwrp .kgwrp > .njtool > .njmov:hover,
div[debug="on"].njwrp .kgwrp > .njtool > .njmov:hover {background-color: #6aa7cd; transition: background-color 2ms; color:#fff!important; z-index:2;}

div[data-mode="free"].njwrp .kgwrp > .njtool > .njdel:hover,
div[debug="on"].njwrp .kgwrp > .njtool > .njdel:hover {background-color: #F0897F; transition: background-color 2ms; color:#fff!important; z-index:2;}

div[data-mode="free"].njwrp .kgwrp > .njtool > .njedt:hover,
div[debug="on"].njwrp .kgwrp > .njtool > .njedt:hover {background-color: #f6da69; transition: background-color 2ms; color:#000!important; z-index:2;}

div[data-mode="free"].njwrp .kgwrp > .njtool > .njchk:hover,
div[debug="on"].njwrp .kgwrp > .njtool > .njchk:hover {background-color: #b2ce54; transition: background-color 2ms; color:#000!important; z-index:2;}

div[data-mode="free"].njwrp .kgwrp > .njtool > .njchk.chkd,
div[debug="on"].njwrp .kgwrp > .njtool > .njchk.chkd {top:0; right:0; bottom: 0; left:0; background-color: rgba(178, 206, 84, 0.6); transition: background-color 2ms; color:#000; z-index:9998;width:100%; height:100%;}

div[data-mode="free"].njwrp .kgwrp > .njtool > span,
div[debug="on"].njwrp .kgwrp > .njtool > span { display:table; }

div[data-mode="free"].njwrp .kgwrp > .njtool > span.hide,
div[debug="on"].njwrp .kgwrp > .njtool > span.hide { display:none; }

.njtool > .njdbg > .navcon,
div[data-mode="free"].njwrp .kgwrp > .njtool > span > .navcon,
div[debug="on"].njwrp .kgwrp > .njtool > span > .navcon { opacity 0; display:none; transition: opacity 1s;}

div[data-mode="free"].njwrp .kgwrp > .njtool > span.njchk.chkd > .navcon,
div[debug="on"].njwrp .kgwrp > .njtool > span.njchk.chkd > .navcon { opacity 1; display:block; }

.njtool > .njdbg:hover > .navcon,
div[data-mode="free"].njwrp .kgwrp:hover > .njtool >  span > .navcon,
div[debug="on"].njwrp .kgwrp:hover > .njtool >  span > .navcon { opacity 1; display: table-cell; vertical-align: middle; width:100%;height:100%; transition: opacity 20ms; cursor: pointer; text-align: center;font-size:26px;}

div[debug="on"].njwrp .njtool > .njadd:hover > .navadd,
div[debug="on"].njwrp .kgwrp > .njtool >  span:hover > .navadd {cursor: pointer; display: table-cell; vertical-align: middle; width:100%;height:100%;}

div[data-mode="free"].njwrp .kgwrp > .njtool > .njadd,
div[debug="on"].njwrp .kgwrp > .njtool > .njadd { cursor: pointer; display:table; top: 0.6rem; left:50%; margin-left: -1rem;}

div[data-mode="free"].njwrp > .njtool > .njadd,
div[debug="on"].njwrp > .njtool > .njadd { cursor: pointer; display:table; bottom:-2rem!important; left:50%; margin-left: -1rem;}

.njtool > .njadd:hover {background-color: #6aa7cd; border-radius: 50%; transition: background-color 1s, border-radius 1s; color:#fff;}

.gptbmsg {width: 100%;position: absolute!important; z-index:1; display:block; bottom: 0!important; left:50%;  transform:translateX(-50%);}

div[debug="off"][data-mode="fix"] .gptbmsg { display:none!important;}

div[data-mode="free"].njwrp .kgwrp > .njtool >  span.njmov:hover > .navcon,
div[debug="on"].njwrp .kgwrp > .njtool >  span.njmov:hover > .navcon { cursor: move; }

div[data-mode="free"].njwrp .kgwrp > .njtool > .njchk.chkd > input.navcon,
div[debug="on"].njwrp .kgwrp > .njtool > .njchk.chkd > input.navcon {
  display:visible;
  opacity 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px; height:	18px;
  -moz-transform:	translate(-50%, -50%)	scale(1.4);
  -webkit-transform: translate(-50%, -50%) scale(1.4);
  transform:	translate(-50%, -50%) scale(1.4);
}

.gptbtool { position: fixed; z-index:9999;
  margin: 0;
  bottom: 10%; left: 50%;
  transform:translateX(-50%);
}

.njtool > .njadd {background-color:transparent;transition: background-color 1ms, border-radius 1ms; text-align: center;}

input.navcon {padding:0; margin:0 auto; vertical-align:middle;}

/* Dialogをかっこよく！ */
.ui-sortable-handle {cursor: move;}

.ui-dialog {z-index:9999!important; background-color:#fff;}
.ui-dialog .ui-dialog-content { text-align: center; padding: 1em;}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {  float: none; }
.ui-dialog .ui-dialog-buttonpane {  text-align: center;  border: none; }
.ui-dialog .ui-dialog-buttonpane button {
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #03A9F4;
    border: solid 1px #0f9ada;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.ui-dialog .ui-dialog-buttonpane button:active {
    border: solid 1px #03A9F4;
    box-shadow: none;
    text-shadow: none;
}
.ui-dialog .ui-dialog-buttonpane button:disabled {
 border: 1px solid #999999;
 background-color: #cccccc;
 color: #666666;
}
.ui-dialog .ui-dialog-buttonpane button.cansel {
 border: 1px solid #777777;
 background-color: #fafafa;
 color: #777777;
}

.ui-dialog .ui-corner-all, .ui-dialog .ui-corner-bottom, .ui-dialog .ui-corner-right, .ui-dialog .ui-corner-br { border-bottom-right-radius: 12px;}
.ui-dialog .ui-corner-all, .ui-dialog .ui-corner-bottom, .ui-dialog .ui-corner-left, .ui-dialog .ui-corner-bl { border-bottom-left-radius: 12px;}
.ui-dialog .ui-corner-all, .ui-dialog .ui-corner-top, .ui-dialog .ui-corner-right, .ui-dialog .ui-corner-tr { border-top-right-radius: 12px;}
.ui-dialog .ui-corner-all, .ui-dialog .ui-corner-top, .ui-dialog .ui-corner-left, .ui-dialog .ui-corner-tl { border-top-left-radius: 12px;}
.ui-dialog .ui-dialog-titlebar{border: none; background: transparent;height:0;padding: 0;margin: 0;}
.ui-dialog .ui-dialog-title {width:100%;margin:0; padding: 0.2rem 1rem;}

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    cursor: pointer;
    right: .3em;
    top: -0.5em;
    width: 29px;
    margin: 0;
    height: 29px;
    border: none; background: transparent;
    z-index: 999
}
.ui-dialog .ui-dialog-titlebar-close::after {
  content: "x";
  cursor: pointer;
  position: relative;
  display: inline-block;
  float: right;
  width: 32px;
  margin-top: 1rem;
  height: 32px;
  font-size: 32px;
  color:#aaa;
  z-index: 990;
  text-indent: 0;
}

.ui-widget-overlay {
background-color: rgba(0,0,0,0.8);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#B4000000, endcolorstr=#B4000000, gradienttype=0);
}
.ui-dialog .ui-dialog-buttonpane {padding:0.5em;margin:0;}
/* Dialogここまで sort ここから */

.ninja-placeholder {
  border: 3px dashed #aaa;
  background: #ccc;
  position: relative;
}
.img-placeholder:after,
.ninja-placeholder:after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 15px;
  background-color: #C4E7E2;
}
.img-placeholder {
  display:inline-block;
  float:left;
  border: 3px dashed #fcd40f;
  background: #fbfcc2;
  position: relative;
  visibility: visible;
  height: 105%;
}
.nin-placeholder {
border: 1px dotted black;
margin: 1em 1em 1em 1em;
height: 30px;
background-color: #C4E7E2;
}
/* sort ここまで */


/*  ninja form */
.hide { display:none; }

/* shirube Ninja */
#shirube-top, #shirube-bottom, #shirube-left, #shirube-right  {
  position: fixed;
  z-index: 999999;
  pointer-events: none!important;
}
#shirube-top > .inner, #shirube-bottom > .inner, #shirube-left > .inner, #shirube-right > .inner { position: relative; display: -ms-flexbox !important; display: flex !important; pointer-events: none!important;
}

#shirube-top  {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
  color: white;
  margin: 7px auto;
}
#shirube-bottom  {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
  color: #000;
  margin: 7px auto;
}

#shirube-left  {
  left: 0;
}
#shirube-right  {
  right: 0;
}

.guid-icon { z-index: 999; }
.guid-icon i { right: 16px; bottom: -16px; }

@media screen and (min-width: 0px) and (max-width: 575px) {
  #shirube-top, #shirube-bottom { width: 90%;}
  .guid-icon i { right: -24px; }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
  #shirube-top, #shirube-bottom { width: 80%;}
}

#shirube-top.w-100,
#shirube-top > .inner.justify-content-end { pointer-events: none!important;}
#shirube-top .btn {color: #000!important; background-color: #fff!important; border-color: #fff!important; }
.msgbtm .btn { color: #fff!important; background-color: #c82333!important; border-color: #bd2130!important; }

/* shirube Ninja comment design */
.footer-btn, .guide-open, .guide-close { cursor: pointer; }
.guide, .guide-close, .guide-open { pointer-events: auto;}

.cmt-icon {position: relative; pointer-events: auto;}
.guide-open.cmt-open { position: absolute; display: none; top: 90%; left: -0.5rem;}
.guide-menu {bottom: -14px; left: -14px;}
.guide-close { position: absolute; top:-0.5rem; left:-0.5rem; }
.guide-footer > .inner { padding: 0.3rem; }
.guide-msg {padding: 1rem;}
#shirube-bottom .guide-open { position: relative; display: none; padding:1rem;}

/* konoha ninja */
.konoha-back, .konoha-next { cursor: pointer;}

/*  ninja moon   width: 100vw; height: 100vh;  */
#kage-overlay {
  position: absolute;
  z-index: 999960;
  background-color: #333;
  opacity: 0.8;
  width: 100%; height: 100%;
  min-height: 100vh!important;
  top:0; bottom:0; left: 0; right:0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  pointer-events: none!important;
}

#kage-overlay.clean  {
  background-color: transparent;
}

.moon-spot {
position: relative;
z-index: 999970;
background-color: #FFF;
}

.spot-btn {display:none;}
.moon-spot .spot-btn {display: inline-block!important;}

.msgbtm {
  position: absolute;
  z-index: 999980;
  color: white;
  padding: 0.5rem;
  bottom: -3rem; left: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.moon-number {
  position: relative;
  display:inline-block;
  z-index: 999985;
  background-color: #BF0000!important;
  border-radius: 8px; color:#fff!important; font-weight: bold; font-size: 18px; line-height: 18px;
  padding-top: 6px; padding-bottom: 6px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-right: 1rem;
}

.moon-nav {
  position: absolute;
  z-index: 999980;
  color: white;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.moon-nav.posi-left {
    border-left: solid 1px;
    margin-left: -10px;
}
.moon-nav.posi-right {
    border-right: solid 1px;
    padding-right: 10px;
}
.moon-nav.posi-bottom {
    border-bottom: solid 1px;
    padding-bottom: 10px; }
.moon-nav.posi-top {
    border-top: solid 1px;
    padding-top: 10px;
}
.moon-nav-text {
  position: absolute;
  -webkit-transition: opacity 0.1s ease-out;
  -moz-transition: opacity 0.1s ease-out;
  -ms-transition: opacity 0.1s ease-out;
  -o-transition: opacity 0.1s ease-out;
  transition: opacity 0.1s ease-out;
  max-width: 200px;
}
.moon-nav-text.posi-left {
    margin-left: -75px;
    padding-right: 10px;
}
.moon-nav-text.posi-right {
    margin-right: -75px;
    padding-left: 10px;
}
.moon-nav-text.posi-bottom {
    margin-bottom: -30px;
    padding-top: 10px;
}
.moon-nav-text.posi-top {
    margin-top: -30px;
    padding-bottom: 10px;
}

.moon-nav-text.posi-right:before, .moon-nav-text.posi-left:after, .moon-nav-text.posi-bottom:before, .moon-nav-text.posi-top:after {
    content: ".";
    display: inline-block;
    background-color: white;
    height: 1px;
    overflow: hidden;
    position: absolute;
}
.moon-nav-text.posi-right:before, .moon-nav-text.posi-left:after {
    width: 50px;
    top: 50%;
}
.moon-nav-text.posi-bottom:before, .moon-nav-text.posi-top:after {
    width: 1px;
    height: 30px;
    left: 50%;
}
.moon-nav-text.posi-bottom:before {
    top: -30px;
}
.moon-nav-text.posi-top:after { bottom: -30px; }
.moon-nav-text.posi-right:before { left: -50px; }
.moon-nav-text.posi-left:after { right: -50px; }

.gradient-border {
  width: 100%; height:100%;
  position: relative;
  border-radius: 3px;
  z-index: 999988;
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * 3px);
  left: calc(-1 * 3px);
  height: calc(100% + 3px);
  width: calc(100% + 3px);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * 3px);
  z-index: 999987;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}

@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Modal TAKO NINJA */
.takoage {
    position: fixed;
    z-index: 999999;
    display: none;
    margin: 0;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none!important;
}

.takoage .tako-main {text-align: left;}

.takoage > .inner {
 position: relative;
 padding: 1rem;
 border-radius: 6px;
 text-align: center;
 box-sizing: border-box;
 pointer-events: auto!important;
}

.takoage > .inner > .tako-close {
 position: absolute;
 top: 0; right: 0;
 display: inline-block;
 cursor: pointer;
 pointer-events: auto!important;
 z-index: 1000000;
}

/* Tool Tips KUNAI NINJA */
.hint-msg {display: inline-block;}
.n971 .w24 {margin-right: 0.5rem;}

.mato {
  background-color: transparent;
  display: none;
  position: absolute;
  pointer-events: none!important;
  z-index: 999985;
}

.mato.show {
  -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;
}

.onlyway.mato-t {border-left:0!important; border-right:0!important; border-bottom:0!important; border-radius:0!important;}
.onlyway.mato-l {border-top:0!important; border-right:0!important; border-bottom:0!important; border-radius:0!important;}
.onlyway.mato-r {border-top:0!important; border-left:0!important; border-bottom:0!important; border-radius:0!important;}
.onlyway.mato-b {border-top:0!important; border-left:0!important; border-right:0!important; border-radius:0!important;}

.n971 {
  position: absolute;
  display: inline-block;     /* 横幅を自動で変更 */
  z-index: 999991;
  pointer-events: none!important;
}

.n971.n971-b { top: calc(100% + 1rem); }
.n971.n971-t { bottom: calc(100% + 1rem)!important; }
.n971.n971-r { left: calc(100% + 1rem); }
.n971.n971-l { right: calc(100% + 1rem); text-align: right;}


.mato .n971-showHint {position: absolute; z-index: 999995;display: inline-block;  pointer-events: auto;}
.mato-t .n971-showHint {top:-24px; left:-8px;}
.mato-b .n971-showHint {bottom:-32px; left:-8px;}
.mato-l .n971-showHint {top: 8px; left:-24px;}
.mato-r .n971-showHint {top: 8px; right:-24px;}

.mato-inner {
  position: relative; display:block; width:100%; height:100%;
  pointer-events: none!important;
}
.mato-inner .n971-closeHint { position: absolute; z-index: 999995; display: inline-block;  pointer-events: auto;}

.mato-inner.mato-t .n971-closeHint { top:-9px; left:-9px;}
.mato-inner.mato-b .n971-closeHint, .mato-inner.mato-r .n971-closeHint { bottom: -18px; left: 0; }
.mato-inner.mato-l .n971-closeHint { top:-9px; right:-9px; }

.n971.n971-r.sticky, .n971.n971-l.sticky {
  position: -webkit-sticky; /* safari対応 */
  position: sticky;
  top: 5px;
}

.n971.n971-r.sticky { padding-left: 2.3rem; }
.n971.n971-l.sticky {  padding-right: 2.3rem; }

.kage-fil {
  -webkit-filter: drop-shadow(0 0 30px rgba(0,0,0,.8));
  filter: drop-shadow(0 0 30px rgba(0,0,0,.8));
}

#pop {
    display: block !important;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 99;
    transform: translate(-50%, -50%);
    max-width: 70vw;
    max-height: 70vh;
    box-sizing: border-box;
    padding: 32px;
    border-radius: 8px;
    background-color: #fff;
    z-index: 999998;
}

.dronpa::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}
.dronpa .dron {display:none;}

// ninja editor
.ninja-editer-area {border: none;}

.ninja-editer-area:focus {
    outline: none;
}


.njwrp.ninjaform[data-mode="fix"] {
  padding-bottom: 160px!important;
  margin-bottom: 3rem!important;
}