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

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

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

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

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

  /* =========================================
     共通レイアウト
     全セクション共通
  ========================================= */
  #intro-section,
  #demo-section,
  #copy-section,
  #file-section,
  #download-section{
    max-width:960px;
    margin:0 auto;
    padding:0 16px;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Yu Gothic UI",sans-serif;
    color:#0f172a;
  }

  /* =========================================
     共通見出し
     h2共通デザイン
  ========================================= */
  #intro-section h2,
  #demo-section h2,
  #copy-section h2,
  #file-section h2,
  #download-section h2{
    font-size:clamp(18px,2.6vw,24px);
    margin:28px 0 10px;
    font-weight:700;
  }

  /* =========================================
     共通本文
     説明文用
  ========================================= */
  #intro-section p,
  #file-section p,
  #download-section p{
    line-height:1.9;
    margin:10px 0 16px;
  }

  /* =========================================
     ①イントロ
     注意書き
  ========================================= */
  #intro-section .notes{
    margin:12px 0;
  }

  #intro-section .note{
    border:1px solid #e5e7eb;
    background:#f8fafc;
    border-radius:10px;
    padding:10px 12px;
    font-size:12px;
  }

  #intro-section .note strong{
    display:block;
    margin-bottom:4px;
  }

  #intro-section .note hr{
    border:none;
    border-top:1px dashed #dbe2ea;
    margin:8px 0;
  }

  /* =========================================
     ②デモ
     カラー変数
  ========================================= */
  #demo-section{
    --border:#e5e7eb;
    --accent:#0b6bff;
  }

  /* =========================================
     ③コードコピー
     カラー変数
  ========================================= */
  #copy-section{
    --ink:#0f172a;
    --muted:#64748b;
    --accent:#0b6bff;
    --border:#e5e7eb;
  }

  /* コード全体カード */
  #copy-section .codecard{
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    margin:16px 0 24px;
  }

  /* タブエリア */
  #copy-section .code-tabs{
    display:flex;
    gap:6px;
    padding:8px;
    background:#f8fafc;
    border-bottom:1px solid var(--border);
  }

  /* タブボタン */
  #copy-section .code-tab{
    appearance:none;
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    padding:6px 10px;
    font-size:12px;
    color:var(--ink);
    cursor:pointer;
  }

  /* 選択中タブ */
  #copy-section .code-tab[aria-selected="true"]{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
  }

  /* タブフォーカス */
  #copy-section .code-tab:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  /* コピーエリア */
  #copy-section .code-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
  }

  /* コピーボタン */
  #copy-section .copy-btn{
    font-size:12px;
    padding:6px 10px;
    border:1px solid var(--border);
    background:#fff;
    border-radius:8px;
    cursor:pointer;
  }

  #copy-section .zip-btn{
    font-size:12px;
    padding:6px 10px;
    border:1px solid var(--border);
    background:#fff;
    border-radius:8px;
    cursor:pointer;
  }

  /* タブ切替 */
  #copy-section .tabpanel{
    display:none;
  }

  #copy-section .tabpanel[aria-hidden="false"]{
    display:block;
  }

  /* コード表示エリア */
  #copy-section pre{
    margin:0;
    background:#fff;
  }

  /* コード本体 */
  #copy-section .codecard code{
    display:block;
    height:200px;
    overflow:auto;
    padding:12px 14px;
    white-space:pre;
    tab-size:2;
    font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;
  }

  /* =========================================
     ④ファイル構成と設置方法
     コードブロック
  ========================================= */
  #file-section pre{
    margin:12px 0 16px;
    padding:12px 14px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:10px;
    overflow:auto;
  }

  #file-section code{
    font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;
    white-space:pre;
  }

  /* =========================================
     ⑤ファイルダウンロード
     ダウンロードエリア
  ========================================= */
  #download-section .download-box{
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:16px;
    background:#f8fafc;
  }

  /* ダウンロードボタン */
  #download-section .download-btn{
    display:inline-block;
    padding:10px 16px;
    border-radius:8px;
    background:#0b6bff;
    color:#fff !important;
    text-decoration:none !important;
    font-size:14px;
    font-weight:700;
  }

  /* ダウンロードボタンホバー */
  #download-section .download-btn:hover{
    opacity:.9;
  }