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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* コードブロック（preタグ）全体の調整 */
pre {
    position: relative !important;
    padding-top: 2.8em !important; /* ボタンが1行目のコードと重なるのを防ぐマージン */
}

/* AIチャット画面風のコピーボタン（右上隅固定） */
.copy-code-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    font-family: sans-serif !important;
    font-weight: 500 !important;
    color: #b0b3b8 !important; /* この画面のような明るいグレーの文字 */
    background: transparent !important; /* 背景は完全に透明（透過） */
    border: none !important; /* 枠線なし */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; /* 下部にうっすら線 */
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important; /* 左側にうっすら線 */
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.15s ease !important;
}

/* マウスを乗せたとき（文字が白くなり、背景がほんのり明るく透過する） */
.copy-code-btn:hover {
    color: #6495ED !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* コピー完了時（この画面と同じように文字が変わり、少し強調される） */
.copy-code-btn.copied {
    color: #659AD2 !important; /* 成功を表す薄いグリーン */
    font-weight: bold !important;
}


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

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

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