@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 {
    /* 1. Noto Sans JP を最優先 
       2. Mac/iPhone 用の綺麗なゴシック 
       3. Windows 用の予備 
       4. 最終手段のサンセリフ体 */
    font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif !important;
    
    font-weight: 400; /* 本文の標準的な太さ */
    -webkit-font-smoothing: antialiased; /* Mac/iPhoneでの文字のギザギザを抑える */
}

/* 親要素（基準点） */
.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; /* 不要なら削除または、任意の数値を設定してください */
}

/********************************** ツールチップのポップアップ表示 **********************************/
/* 1. コンテナ：画像や要素を包む外枠 */
.tooltip-container {
    position: relative !important;
    display: inline-block !important;
    cursor: help !important;
    overflow: visible !important;
}

/* 2. ツールチップ本体：浮き上がる黒い箱 */
.tooltip-text {
    /* 初期状態は完全に隠す */
    visibility: hidden !important;
    opacity: 0 !important;
    
    /* 配置：【右側】に配置 */
    position: absolute !important;
    z-index: 99999 !important;
    top: 0 !important;             /* 画像の上端に合わせる */
    bottom: auto !important;        /* 上側表示の指定をクリア */
    left: 110% !important;          /* 画像の右側に10%の余白を持って配置 */
    transform: translateX(10px) !important; /* 初期位置を少し右にずらす（アニメーション用） */
    
    /* 見た目：Backpack Battles風のダークデザイン */
    width: 260px !important;
    background-color: rgba(20, 20, 20, 0.95) !important;
    color: #ffffff !important;
    padding: 12px !important;
    border: 2px solid #c9a7ff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important;
    
    /* テキスト設定 */
    white-space: normal !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    pointer-events: none !important;
    
    /* アニメーション */
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

/* 3. 表示トリガー：is-activeが付与された瞬間 */
.tooltip-container.is-active .tooltip-text {
    visibility: visible !important;
    opacity: 1 !important;
    /* transformを上書き：右にスライドしながら表示 */
    transform: translateX(0) !important;
}

/* 4. 内部パーツの微調整 */
.tooltip-text p {
    margin: 4px 0 !important;
    padding: 0 !important;
}

.tooltip-text hr {
    border: 0 !important;
    border-top: 1px solid #444 !important;
    margin: 8px 0 !important;
}

/* フッター全体のコンテナ：左右50%ずつのグリッドを作成 */
.tooltip-footer {
    margin-top: 8px !important;
    padding-top: 6px !important;
    border-top: 1px dotted #666 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 左右均等に分割 */
    align-items: center !important;
}

/* 各区画（A区画・B区画）内の中央寄せ設定 */
.footer-section {
    display: flex !important;
    justify-content: center !important; /* 区画内の中央に寄せる */
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.85em !important;
    color: #bbb !important;
}

/* A区画（左側）とB区画（右側）の間に境界線が必要な場合はここを調整 */
.footer-section:first-child {
    border-right: 1px dotted #444; /* 必要なければ削除してください */
}

/* モバイル対応：画面幅が狭い時は幅を調整 */
@media screen and (max-width: 480px) {
    .tooltip-text {
        width: 200px !important;
        font-size: 12px !important;
        /* モバイルでは右側だと画面外に出る可能性があるため、必要に応じて調整 */
    }
}
/********************************** ツールチップのポップアップ表示（おわり） **********************************/



/***************************** サイドバーの設定 ********************************/
/* もし上記で動かない場合はこちら */
.sidebar-scroll {
    padding-top: 100px !important; /* 枠の内側に余白を作って押し下げる */
}

/* 1. サイドバーのナビゲーションメニュー全体 */
.widget_nav_menu {
    background-color: #f3f4f6; /* 薄いグレー */
    padding: 20px;
    border-radius: 4px;
}

/* 2. ウィジェットタイトルの装飾（棒線を短く配置） */
.widget_nav_menu .widget-title {
    position: relative !important;
    padding: 0 0 10px 1.2em !important; /* 左側に1.2文字分の余白を確保 */
    margin: 0 0 15px 0 !important;
    background-color: transparent !important;
    border-bottom: 1px solid #ddd !important;
    line-height: 1.5 !important;
    display: block !important;
    border-left: none !important;      /* 以前の長い線を消す */
}

/* 棒線パーツのデザイン設定 */
.widget_nav_menu .widget-title::before {
    content: "";
    position: absolute;
    left: 0;             /* 左端に配置 */
    top: 15%;            /* 上からの位置（中央に寄せる） */
    width: 6px;          /* 線の太さ */
    height: 50%;         /* ★線の長さ（ここで半分に調整） */
    background-color: #e67e22; /* 線の色 */
    border-radius: 2px;  /* 角を少し丸める（不要なら消してください） */
}
	
/* 3. メニュー全体のリスト構造リセット */
.widget_nav_menu ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 4. 通常のメニュー項目（リンク文字） */
.widget_nav_menu ul li a {
    font-size: 14px;
    font-weight: bold;
    color: #333 !important;
    text-decoration: none;
    line-height: 1.5;
    display: block;
    padding: 8px 10px; /* 左右にも少し余白 */
}

/* 5. マウスを乗せた時の設定 */
.widget_nav_menu ul li a:hover {
    background-color: #e5e7eb !important;
    transition: 0.2s;
}

/* 6. 現在表示中のページ（背景：淡いオレンジ、文字：オレンジ） */
.widget_nav_menu ul li.current-menu-item {
    background-color: #fff5e6 !important; /* 背景：淡いオレンジ */
    border-radius: 4px;
    margin: 4px 0; /* 上下に少し隙間を作ると綺麗です */
}

.widget_nav_menu ul li.current-menu-item a {
    color: #e67e22 !important;     /* 文字色：オレンジ（以前の棒線と同じ色） */
    font-weight: bold;
    padding-left: 1.2em !important; /* タイトルと縦ラインを揃える */
}
/***************************** サイドバーの設定（終わり） ********************************/