@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* ツールチップを持つ要素の基本スタイル */
.tooltip {
  position: relative; /* JavaScriptでの位置計算の基準点になります */
  cursor: help;
  border-bottom: 1px dotted #333;
}

/* JavaScriptで動的に生成されるツールチップ本体のスタイル */
.tooltip-body {
  position: fixed; /* 画面を基準に配置するためfixedに */
  z-index: 10000; /* 他の要素より最前面に表示 */
  
  /* 非表示時の設定 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* 吹き出し自身はクリックできないように */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* ふわっと表示するアニメーション */

  /* 吹き出しの見た目 */
  width: max-content; /* 文字数に合わせて幅を自動調整 */
  max-width: 280px; /* 横幅の最大値 */
  padding: 10px 15px;
  background-color: #333; /* 背景色 */
  color: #fff; /* 文字色 */
  font-size: 14px;
  font-weight: normal;
  line-height: 1.6;
  border-radius: 5px;
  text-align: left;
  box-sizing: border-box;
}

/* JavaScriptで動的に生成される吹き出しの「しっぽ（▼）」のスタイル */
.tooltip-arrow {
  position: fixed;
  z-index: 10000;

  /* 非表示時の設定 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;

  /* しっぽの形 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: #333 transparent transparent transparent;
}

/* JavaScriptによってツールチップが表示される際に追加されるクラス */
.tooltip-body.is-visible,
.tooltip-arrow.is-visible {
  opacity: 1;
  visibility: visible;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}