@charset "UTF-8";
/**
 * ツールチップ css
 * @version 23.05.26
 * @version 24.05.23 詳細表示時にslideDownを使用するよう変更
 */

/*
 [HTML例]
 <div class="tltip t-edt"><div class="read">編集用</div><div class="write"><input type="text" value="編集用"></div></div>
 <div class="tltip t-det"><div class="caption">詳細用</div><div class="detail">詳細の中身</div></div>
 <div class="tltip t-mdl">モーダル用</div>
 <div class="tltip t-fre" data-tltip-word="hoge">フリーワード用</div>

 位置調整
 <div class="tltip t-mdl data-tltip-position-top="24" data-tltip-overlap-left="10">
 ・data-tltip-position-top:スクロール量＋指定px
 ・data-tltip-overlap-left:指定px重ねる
*/

/* ツールチップ */
.tltip { position: relative; padding: 1px 4px; cursor: pointer; border: 1px solid transparent; border-radius: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tltip.t-det { cursor: var(--cur-srh); }
.tltip.t-mdl { cursor: var(--cur-mdl); }
.tltip.t-fre { cursor: pointer; } /* 自由入力用 data-tltip-word="ほげ" */
.tltip.t-edt { cursor: var(--cur-pen); font-size: 0; }
.tltip.t-edt input[readonly]:not(:disabled),
.tltip.t-edt textarea[readonly]:not(:disabled),
.tltip.t-edt select[readonly]:not(:disabled) { cursor: var(--cur-pen); }
.tltip.t-edt .read { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 4px; }
.tltip.t-edt .read:empty::before { content: ' '; }
 /* テキストボックスに合わせる */
.tltip.t-edt textarea[readonly], .tltip.t-edt textarea[readonly]:disabled { font-size: 15px; }
.tltip.t-edt .read.in-textarea { padding: 0; }
.tltip.t-edt .read.in-inpnumber  { padding-right: 18px; }

.tltip.t-det:not(.edting) .caption { color: var(--blu-br); }
.tltip.t-mdl { color: var(--nav); }
.tltip.t-edt:not(.edting) .read, .tltip.t-edt:not(.edting) .read textarea[readonly] { color: var(--success-br); }
.tltip.t-fre { color: var(--tea); }

/* 切替え */
.tltip.t-edt.edting, .tltip.t-det.edting { cursor: auto; }
/* 編集 切替え */
.tltip.t-edt .write, .tltip.t-edt.edting .read { display: none; }
.tltip.t-edt.edting .write { display: block; }
/* すべて編集 */
.tltip-all-edting .tltip.t-edt .read { display: none; }
.tltip-all-edting .tltip.t-edt .write { display: block; }
/* 詳細 切替え */
.tltip.t-det .detail, .tltip.t-det.edting .caption { display: none; }
/*.tltip.t-det.edting .detail { display: block; } JQのスライドを使う */

/* ツールチップなし */
.no-tltip .tltip.t-mdl::before,
.no-tltip .tltip.t-fre::before,
.no-tltip .tltip.t-edt:not(.edting) .read::before,
.no-tltip .tltip.t-det:not(.edting) .caption::before { display: none; }


/* For PC */
@media screen and (min-width: 1051px) {
 .tltip-content { background-color: #ccc; border: 2px solid #555; color: #555; opacity: 0.7; font-size: 11px; border-radius: 7px; box-shadow: rgb(85, 85, 85) 2px 2px 4px; padding: 3px 4px; display: block; white-space: nowrap; position: fixed; z-index: 989; text-align: left; visibility: visible; }
 .tltip-content.t-edt { color: #fff; border-color: var(--success-br); background-color: var(--success-bg); }
 .tltip-content.t-det { color: #fff; border-color: var(--blu-br); background-color: var(--blu-bg); }
 .tltip-content.t-mdl { color: #fff; border-color: var(--nav-br); background-color: var(--nav-bg); }
 .tltip-content.t-fre { color: #fff; border-color: var(--tea-br); background-color: var(--tea-bg); }
 .tltip-content::before { content: '\f044'; margin-right: 0.3em; font-weight: 900; font-family: "Font Awesome 5 Free"; }
 .tltip-content::after { content: 'Click to Edit.'; }

 .tltip:not(.edting):hover { border: 1px dashed #ccc; }
 .tltip:not(.edting).t-edt:hover { border-color: var(--success); }
 .tltip:not(.edting).t-det:hover { border-color: var(--blu); }
 .tltip:not(.edting).t-mdl:hover { border-color: var(--nav); }
 .tltip:not(.edting).t-fre:hover { border-color: var(--tea); }

 .tltip-content.t-edt::before { content: '\f044'; } .tltip-content.t-edt::after { content: 'Click to Edit.'; }
 .tltip-content.t-det::before { content: '\f022'; } .tltip-content.t-det::after { content: 'Click to Open.'; }
 .tltip-content.t-mdl::before { content: '\f360'; } .tltip-content.t-mdl::after { content: 'Click to Modal.'; }
 .tltip-content.t-fre::before { content: ''; margin-right: 0; } .tltip-content.t-fre::after { content: attr(data-tltip-word); }
}

/* For Smart Phone and Tablet */
@media screen and (max-width: 1050px) {
  .tltip.t-mdl,
  .tltip.t-fre,
  .tltip.t-edt:not(.edting) .read,
  .tltip.t-det:not(.edting) .caption {
    position: relative;
  }
  /* ツールチップを常に表示 */
  .tltip.t-mdl::before,
  .tltip.t-fre::before,
  .tltip.t-edt:not(.edting) .read::before,
  .tltip.t-det:not(.edting) .caption::before {
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 2px;
    right: 0;
    z-index: 1;
    opacity: 0.6;
    font-size: 14px;
  }
  /* ツールチップなし */
  .sp-no-tltip .tltip.t-mdl::before,
  .sp-no-tltip .tltip.t-fre::before,
  .sp-no-tltip .tltip.t-edt:not(.edting) .read::before,
  .sp-no-tltip .tltip.t-det:not(.edting) .caption::before {
    display: none;
  }
  .tltip.t-mdl::before {
/*     content: '\f24d  Modal'; */
    content: '\f24d';
    border-color: var(--nav-br);
  }
  .tltip.t-fre::before {
    content: attr(data-tltip-word);
    border-color: var(--tea-br);
  }
  .tltip.t-edt:not(.edting) .read::before {
/*     content: '\f044  Edit'; */
    content: '\f044';
    border-color: var(--success-br);
  }
  .tltip.t-det:not(.edting) .caption::before {
/*     content: '\f022  Open'; */
    content: '\f022';
    border-color: var(--blu-br);
  }
  .tltip.t-det,
  .tltip.t-mdl,
  .tltip.t-fre,
  .tltip.t-edt {
    padding: 0;
  }
}