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

.helptip,
.helpdialog{
    display: none;
}
.helptip .tooltip {
    background-color: #333333;
    color: #fff;
    font-weight: normal;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    display: none;
    z-index: 100;
    position: relative;
	text-align:left;
	transition: opacity 0.2s ease;
	opacity: 0;
    max-width: 32em;
    width:max-content;
    white-space:normal;
	z-index: 99;
}
.helptip .help-icon,
.helpdialog .help-icon{
  font-size:1.5rem;
  color:#fff;
  background-color: #999;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
 border: 1px solid #999;
    border-radius: 50%;
    text-align: center;
    margin: auto 0.25em;
}

.helpdialog .help-icon{
      background-color: #F66;
    border: 1px solid #F66;
}

.helptip .help-icon:hover + .tooltip {
  opacity: 1;
}


.helptip .arrow {
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0,0,0,0.00);
    top:0;
    left:0;
/* 赤に変更OK */
/*  display: inline-block;
  position: absolute;

  
  /*transform: rotate(45deg);
  */
  /*bottom: -4px;*/ /* ← ツールチップ下部に半分食い込ませる */
  /*left: 50%;*/
  /*transform: translateX(-50%) rotate(45deg);  中央寄せ＋回転 */
}
.helptip .arrow::after {
    content: "";
    display: inline-block;
    background: #333333;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    position: absolute;
}
.helptip .tooltip[data-popper-placement="top"] .arrow::after{
    bottom:-6px;
    left:calc(50% - 6px);
}
.helptip .tooltip[data-popper-placement="bottom"] .arrow::after{
    top:-6px;
    left:calc(50% - 6px);
}
.helptip .tooltip[data-popper-placement="right"] .arrow::after{
    top:calc(50% - 6px);
    left:-6px;
    
}
.helptip .tooltip[data-popper-placement="left"] .arrow::after{
    top:calc(50% - 6px);
    right:-6px;
    
}

.helpdialog .dialog {display:none;}