@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){
  /*必要ならばここにコードを書く*/
}

/* ==========================================================
   Ginfo-mation カスタムCSS v1（デザイン案C：Charge & Fold）
   2026-10-21 追加。「追加CSS」は使わず、ここに一本化する
   ========================================================== */

/* ---------- 0. デザイントークン ---------- */
:root{
  --gm-bg:#F7FAF9;
  --gm-surface:#FFFFFF;
  --gm-text:#1F2A2E;      /* 背景比 14.0:1 */
  --gm-sub:#55636A;       /* 背景比 5.9:1 */
  --gm-accent:#0F766E;    /* 背景比 5.2:1 / 白文字 5.5:1 */
  --gm-accent-dark:#0B5A54;
  --gm-accent-weak:#E6F4F2;
  --gm-line:#D5E3E0;
  --gm-radius:12px;
  --gm-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.06);
  --gm-shadow-hover:0 2px 4px rgba(0,0,0,.08),0 10px 24px rgba(0,0,0,.10);
}

/* ---------- 1. 全体・本文 ---------- */
body{
  background:var(--gm-bg);
  color:var(--gm-text);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","YuGothic",Meiryo,sans-serif;
}
a{color:var(--gm-accent);}
a:hover{color:var(--gm-accent-dark);}
.entry-content{
  line-height:1.85;
  letter-spacing:.02em;
  line-break:strict;
  overflow-wrap:anywhere;
}
.entry-content p{margin:0 0 1.6em;}
.entry-content strong{font-weight:700;background:linear-gradient(transparent 62%,#CDEBE6 62%);}
.entry-content p a,
.entry-content li a,
.entry-content td a{
  color:var(--gm-accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
}
.entry-content p a:hover,
.entry-content li a:hover{text-decoration-thickness:2px;}
.entry-content figcaption{font-size:.85em;color:var(--gm-sub);text-align:center;}
.entry-content img{border-radius:8px;height:auto;}

/* ---------- 2. ヘッダー・メニュー ---------- */
.header-container{background:var(--gm-surface);border-bottom:1px solid var(--gm-line);}
.navi-in a{color:var(--gm-text);font-weight:600;border-radius:8px;}
.navi-in a:hover{background:var(--gm-accent-weak);color:var(--gm-accent);}

/* ---------- 3. メイン・サイドバーの面 ---------- */
.main,
.sidebar{border-radius:var(--gm-radius);box-shadow:var(--gm-shadow);}
.sidebar h2,
.sidebar h3{
  background:none;
  color:var(--gm-accent);
  font-size:1em;
  font-weight:800;
  padding:.3em 0 .5em;
  border-bottom:2px solid var(--gm-accent-weak);
}

/* ---------- 4. 見出し h2 / h3 / h4 ---------- */
.article h2{
  margin:2.8em 0 1.2em;
  padding:.6em .8em .6em 1em;
  font-size:1.45em;
  line-height:1.45;
  color:var(--gm-text);
  background:var(--gm-accent-weak);
  border:none;
  border-left:6px solid var(--gm-accent);
  border-radius:4px;
  font-feature-settings:"palt";
}
.article h3{
  margin:2.2em 0 1em;
  padding:0 0 .35em;
  font-size:1.22em;
  line-height:1.5;
  background:none;
  border:none;
  border-bottom:2px solid var(--gm-accent);
  font-feature-settings:"palt";
}
.article h4{
  margin:1.8em 0 .8em;
  padding:0 0 0 .7em;
  font-size:1.08em;
  background:none;
  border:none;
  border-left:3px solid var(--gm-line);
}

/* ---------- 5. 記事カード（縦型カード2列） ---------- */
.entry-card-wrap{
  background:var(--gm-surface);
  border:none;
  border-radius:var(--gm-radius);
  box-shadow:var(--gm-shadow);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.entry-card-wrap.a-wrap:hover{
  background:var(--gm-surface);
  transform:translateY(-2px);
  box-shadow:var(--gm-shadow-hover);
}
.ect-vertical-card .entry-card-thumb img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:0;
}
.entry-card-content{padding:.4em 1em 1em;}
.entry-card-title{font-size:1.02em;line-height:1.5;font-weight:700;font-feature-settings:"palt";}
.entry-card-snippet{font-size:.85em;color:var(--gm-sub);line-height:1.6;}
.cat-label{background:var(--gm-accent-weak);color:var(--gm-accent-dark);border:none;border-radius:999px;font-weight:700;}
.admin-pv{display:none !important;}
@media (prefers-reduced-motion:reduce){
  .entry-card-wrap{transition:none;}
  .entry-card-wrap.a-wrap:hover{transform:none;}
}

/* ---------- 6. テーブル（スマホは横スクロール） ---------- */
.entry-content table{border-collapse:collapse;font-size:.92em;}
.entry-content th{background:var(--gm-accent-weak);color:var(--gm-text);font-weight:700;}
.entry-content th,
.entry-content td{border:1px solid var(--gm-line);padding:.6em .8em;vertical-align:top;}
.entry-content .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch;}
@media screen and (max-width:834px){
  .entry-content .wp-block-table table{min-width:640px;}
  .entry-content .wp-block-table th:first-child,
  .entry-content .wp-block-table td:first-child{position:sticky;left:0;background:var(--gm-surface);z-index:1;}
  .entry-content .wp-block-table th:first-child{background:var(--gm-accent-weak);}
}

/* ---------- 7. 目次 ---------- */
.toc{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:2em 0;
  padding:1.1em 1.4em;
  background:var(--gm-surface);
  border:1px solid var(--gm-line);
  border-radius:var(--gm-radius);
  box-shadow:var(--gm-shadow);
}
.toc-title{font-weight:700;font-size:1.05em;text-align:left;color:var(--gm-accent);}
.toc-content li{margin:.35em 0;line-height:1.6;}
.toc-content a{color:var(--gm-text);text-decoration:none;}
.toc-content a:hover{color:var(--gm-accent);text-decoration:underline;}

/* ---------- 8. ボタン ---------- */
.btn-wrap > a,
.wp-block-button__link{
  display:inline-block;
  min-height:44px;
  padding:.8em 1.6em;
  background:var(--gm-accent);
  color:#FFFFFF !important;
  font-weight:700;
  border:none;
  border-radius:999px;
  box-shadow:0 2px 0 var(--gm-accent-dark);
  text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn-wrap > a:hover,
.wp-block-button__link:hover{transform:translateY(1px);box-shadow:0 1px 0 var(--gm-accent-dark);opacity:1;}
.btn-wrap > a:focus-visible,
.wp-block-button__link:focus-visible{outline:3px solid #F59E0B;outline-offset:2px;}

/* ---------- 9. X埋め込み ---------- */
.entry-content .wp-block-embed.is-provider-twitter{margin:1.8em auto;max-width:550px;}

/* ---------- 10. スマホ（480px以下） ---------- */
@media screen and (max-width:480px){
  .entry-content{line-height:1.8;}
  .article h2{font-size:1.3em;margin-top:2.4em;}
  .article h3{font-size:1.15em;}
  .toc{padding:1em;}
  .main,.sidebar{border-radius:0;box-shadow:none;}
}

/* ---------- 11. ヘッダー背景を白に（キーカラーの塗りを上書き） ---------- */
#header-container,
#header-container .navi,
#navi{background-color:var(--gm-surface) !important;}
#header-container{border-bottom:1px solid var(--gm-line);}
#navi .navi-in a{color:var(--gm-text);}
#navi .navi-in a:hover{color:var(--gm-accent);background:var(--gm-accent-weak);}

/* ---------- 12. フッター背景を白に（キーカラーの塗りを上書き） ---------- */
#footer{background-color:var(--gm-surface) !important;color:var(--gm-sub);border-top:1px solid var(--gm-line);}
#footer a,
#footer .navi-footer-in a{color:var(--gm-text);}
#footer a:hover{color:var(--gm-accent);}
.copyright{color:var(--gm-sub);}