@charset "euc-jp";
/* CSS Document */
/*
【注釈（tooltip2）の使い方】
  <p>
    ここに文章がある場合 <span class="tooltip2">注釈したい言葉<span class="tooltip2-box">注釈したい言葉の注釈</span></span> という風に使う事ができる。
  </p>
*/

/* 注釈語 */
.tooltip2 {
  cursor: pointer;
  color: #0a5;/*#0a5*/
text-decoration: underline;
	font-weight: 600;
}

/* 背景オーバーレイ */
.tooltip2-box {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

/* 表示時 */
.tooltip2.active .tooltip2-box {
  opacity: 1;
  pointer-events: auto;
}

/* 注釈ウィンドウ全体 */
.tooltip2-window {
  background: #fff;
  color: #333;
  border-radius: 10px;
  width: min(90%, 1000px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
	cursor:auto;
}

/*注釈タイトル*/
.tooltip2-title {
  padding: 18px 18px 16px 28px;
  font-weight: bold;
  font-size: 1.1em;
  background: #f7f7f7;
  /*border-bottom: 1px solid #ddd;*/
  /*text-align: center;*/
  letter-spacing: 0.05em;
}


/* 注釈本文（白窓） */
.tooltip2-content {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
  margin-left: 10px
}

/* 閉じるボタン（下部） */
.tooltip2-close {
  border: none;
  background: #f7f7f7;
  padding: 14px;
  font-size: 1em;
  cursor: pointer;
  /*border-top: 1px solid #ddd;*/
}

.tooltip2-close:hover {
  background: #ddd;
}