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

/************************************
** 子テーマ用のスタイルを書く

/* =========================================================
   Cocoon child: Password/PDF Blog – style.css
   安全・知的・読みやすさ重視のミニマル装飾
   ---------------------------------------------------------
   適用方法：外観 > テーマファイルエディター > 子テーマの style.css に貼り付け
   もしくは「外観 > カスタマイズ > 追加CSS」に貼り付け
   ========================================================= */

/* ------------------------------
   CSS Variables (色・余白・角丸)
---------------------------------*/
/* =========================================================
   Cocoon Child - style.css (Clean v3)
   目的：スマホでの“重なり/透過/はみ出し”を根本から解消しつつ、
        パスワード管理ブログに合うシンプルな装飾を提供。
   ポリシー：
   - 不要な z-index / opacity / blend を使わない
   - .entry-content 内だけを基本装飾（テーマ衝突を回避）
   - すべてのカードに不透明背景を付与
   - 余白・角丸・影は一貫したトークンで管理
   ========================================================= */

/* ---------------- Tokens ---------------- */

/*必要ならばここにコードを書く*/


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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* ===== Minimal Mobile-Safe v1 (article only) ===== */
/* 作用範囲は .entry-content 内だけ。外側は不干渉 */

.entry-content { line-height:1.8; font-size:16.5px; }
.entry-content p { margin:1.1em 0; }
.entry-content a { text-decoration:none; }

/* 見出し（白い面+左罫線のみ） */
.entry-content h2,
.entry-content h3 { color:inherit; }
.entry-content h2{
  margin:1.6em 0 .8em; padding:.6em .8em;
  border-left:4px solid #2563eb; background:#fff; border-radius:8px;
}
.entry-content h3{
  margin:1.4em 0 .6em; padding:.4em .6em;
  border-left:3px solid #059669; background:#fff; border-radius:6px;
}
.entry-content h4{ margin:1.2em 0 .4em; }

/* カード系（不透明の白だけ・影なし・z-index使わない） */
.entry-content .callout,
.entry-content .pdf-dl,
.entry-content .toc,
.entry-content blockquote,
.entry-content .cta,
.entry-content table,
.entry-content figure,
.entry-content .wp-caption{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:12px 14px;
  box-sizing:border-box;
  max-width:100%;
  clear:both;
}

/* blockquote は左線のみ（疑似要素なし） */
.entry-content blockquote{ border-left:4px solid #2563eb; }

/* 目次（タイトルだけ強調） */
.entry-content .toc .toc-title{ font-weight:700; margin-bottom:.4em; }

/* チェック付きリスト */
.entry-content ul.checklist,
.entry-content ul.check{ list-style:none; padding-left:0; margin:0; }
.entry-content ul.checklist li,
.entry-content ul.check li{
  position:relative; padding-left:1.4em; margin:.45em 0;
}
.entry-content ul.checklist li::before,
.entry-content ul.check li::before{
  content:"✔"; position:absolute; left:0; top:0;
}

/* code / kbd */
.entry-content code{
  background:#f8fafc; border:1px solid #e5e7eb;
  padding:.1em .35em; border-radius:6px; font-family:ui-monospace, Menlo, monospace;
}
.entry-content .kbd{
  font-family:ui-monospace, Menlo, monospace;
  border:1px solid #e5e7eb; border-bottom-width:2px;
  padding:.15em .45em; border-radius:6px; background:#fff;
}

/* テーブル（スマホ横スクロール） */
.entry-content table{ width:100%; border-collapse:separate; border-spacing:0; }
.entry-content th,.entry-content td{
  padding:.6em .8em; border-bottom:1px solid #e5e7eb; text-align:left;
}
.entry-content thead th{ background:#f8fafc; }
.entry-content tr:last-child td{ border-bottom:none; }
@media (max-width:768px){
  .entry-content table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* PDFボックス（アイコン廃止で安全化） */
.entry-content .pdf-dl .head{ font-weight:700; margin-bottom:.3em; }
.entry-content .pdf-dl .btn,
.entry-content .btn,
.entry-content .wp-block-button__link{
  display:inline-block; padding:.55em 1em; border-radius:999px;
  background:#2563eb; color:#fff; text-decoration:none; font-weight:700;
}

/* CTA（シンプルな点線枠） */
.entry-content .cta{ display:flex; gap:12px; align-items:center; border-style:dashed; }
.entry-content .cta .body{ flex:1; }
@media (max-width:768px){ .entry-content .cta{ flex-direction:column; align-items:stretch; } }

/* バッジ */
.entry-content .badge{
  display:inline-block; padding:.15em .55em; border-radius:999px;
  border:1px solid #e5e7eb; background:#fff; font-size:.85em;
}
.entry-content .badge.is-pro{ border-color:#2563eb; color:#2563eb; font-weight:700; background:#fff; }

/* メディア */
.entry-content img, .entry-content video, .entry-content iframe{
  max-width:100%; height:auto; display:block;
}

/* 透過/合成/積層の暴走を根元で無効化（記事内だけ） */
.entry-content, .entry-content *{
  opacity:1 !important;
  mix-blend-mode:normal !important;
  filter:none !important;
  z-index:auto !important;
}
/* ---- Callout 強調カラー ---- */
.entry-content .callout.warn{
  background:#fff8e1;              /* 薄い黄色で注意喚起 */
  border-left:6px solid #f59e0b;   /* 濃いオレンジのライン */
}

.entry-content .callout.danger{
  background:#fee2e2;              /* 薄い赤で危険を表現 */
  border-left:6px solid #ef4444;
}

.entry-content .callout.tip{
  background:#ecfdf5;              /* 薄い緑で安心感 */
  border-left:6px solid #16a34a;
}
/* ---- 見出し（背景白のまま、線と装飾で工夫） ---- */

/* H2: セクション見出し（太め左線＋下線＋文字大きめ） */
.entry-content h2 {
  margin: 2em 0 1em;
  padding-bottom: .4em;
  border-left: 6px solid #2563eb;    /* 濃い青のライン */
  border-bottom: 2px solid #e5e7eb;  /* 薄いグレーの下線 */
  padding-left: .6em;
  font-size: 1.25em;
  font-weight: 700;
  background: none;                  /* 背景は白のまま */
  color: #1e3a8a;                    /* 深い青で見やすく */
}

/* H3: 小見出し（左ライン細め＋点線下線） */
.entry-content h3 {
  margin: 1.6em 0 .8em;
  padding-left: .6em;
  border-left: 4px solid #059669;    /* 緑ライン */
  border-bottom: 1px dashed #d1d5db; /* グレー点線 */
  font-size: 1.1em;
  font-weight: 600;
  color: #064e3b;                    /* 深緑文字 */
  background: none;
}

/* H4: 下線だけ（シンプル） */
.entry-content h4 {
  margin: 1.2em 0 .6em;
  padding-bottom: .3em;
  border-bottom: 2px solid #e5e7eb;
  font-weight: 600;
  color: #374151;
  background: none;
}