@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
*/

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

/* 日本語フォントをメイリオに設定 */
body {
    font-family: Meiryo, 'メイリオ', 'Hiragino Sans', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', Arial, sans-serif !important;
}

/* 親要素（基準点） */
.tooltip-container {
    /* 絶対位置の基準点として必須 */
    position: relative; 
    /* span要素（インライン）をブロック要素のように扱い、幅と高さを認識させる */
    display: inline-block; 
    /* ポップアップが要素外にはみ出ても隠れないように */
    overflow: visible; 
}

/* ツールチップ本体 */
.tooltip-text {
    /* ... 以前に記述したposition: absolute; などのスタイル ... */
    visibility: hidden;
    opacity: 0;
    /* ... 続くスタイル ... */
    position: absolute;
    /* ... 続くスタイル ... */
}

/* 表示時のスタイル */
.tooltip-container.is-active .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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

/** ここから追加したコード **/
/* Full画面幅 */
.full-width {
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
	padding-top: 10px; /* 不要なら削除または、任意の数値を設定してください */
	padding-bottom: 10px; /* 不要なら削除または、任意の数値を設定してください */
}

/* ツールチップ */
/* ツールチップのコンテナ（基準点） */
.tooltip-container {
  position: relative; /* 子要素の絶対位置の基準になります */
  display: inline-block; /* 他のテキストと並ぶようにします */
  cursor: pointer; /* マウスカーソルをポインターにします */
}

/* ツールチップのテキスト部分（浮かせたい要素） */
.tooltip-text {
  /* ① 最初は非表示にしておく */
  visibility: hidden;
  opacity: 0;
  
  /* ② 見た目のスタイリング */
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  white-space: nowrap; /* テキストが折り返さないようにする */
  font-size: 14px;
  
  /* ③ ここが重要！絶対位置で配置 */
  position: absolute;
  z-index: 10; /* 他の要素より手前に表示 */
  
  /* ④ 表示位置の調整（コンテナの上部中央に配置） */
  top: 110%; /* コンテナの上側に10%の余白を空ける */
  left: 50%;
  transform: translateX(-50%); /* 自身の幅の半分だけ左にずらして中央揃え */
  
  /* ⑤ フェードイン・アウトのアニメーション */
  transition: opacity 0.3s ease;
}

/* is-activeクラスが付与されたらツールチップを表示 */
.tooltip-container.is-active .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* ツールチップ内のpタグの余白を調整 */
.tooltip-text p {
    margin: 5px 0;
    padding: 0;
    line-height: 1.4;
}

/* ツールチップ内の名前とコストを配置するコンテナ */
.tooltip-text .name-cost-header {
    display: flex;             /* フレックスボックスを有効化 */
    justify-content: space-between; /* 子要素（名前とコスト）を左右に分離 */
    align-items: center;       /* 垂直方向の中央揃え */
    padding: 0 2px;            /* わずかな余白を追加 (オプション) */
}

/* アイテム名（左寄せ） */
.tooltip-text .name-left {
    /* strongタグのフォントサイズやスタイルを調整する場合はここで */
    font-size: 1.1em;
    font-weight: bold;
    flex-grow: 1; /* 名前がコストにぶつからないように余ったスペースを確保 */
}

/* コスト（右寄せ） */
.tooltip-text .cost-right {
    white-space: nowrap;       /* コストの文字列が折り返されないようにする */
    margin-left: 10px;         /* 名前との間に少しスペースを空ける */
    font-weight: bold;
}

.tooltip-container {
    /* 常に表示されるヒント */
    cursor: pointer; 
    border-bottom: 1px dotted #555; /* 細い点線の下線（色は薄いグレーなど） */
    text-decoration: none; /* もし他のCSSで勝手に実線の下線が付く場合は無効化 */
}