/*
Theme Name: Cocoon Child Marathon
Template: cocoon-master
Description: バナナぴろし流マラソンブログ専用の子テーマ
Version: 1.0.2
*/

/* Blogger移行スタイル（@media除外・!important付・波括弧整合済み） */
.h2-style {

  width:100% !important;
  display:block !important;

  margin:28px 0 !important;
  padding: 16px 20px !important;

  background: #FFEB3B !important;
  color: #111 !important;

  border-left:10px solid #f64949 !important;
  border-radius:6px !important;

  font-size:1.6em !important;
  font-weight:bold !important;
  font-family:'Verdana', sans-serif !important;
  line-height:1.5 !important;

  box-shadow:2px 2px 6px rgba(0,0,0,0.15) !important;
  scroll-margin-top:100px !important;

}

.h2-style::before,
.h2-style::after {

  content:none !important;

}

.h2-style {

    padding:20px 24px !important;
  
}

.article-box {

  margin:20px 0 !important;
  padding:20px !important;

  background:#f5f5f5 !important;
  border-radius:30px !important;

  

}

.table-of-contents,
.table-of-contents2 {

  background:#FFF0EA !important;
  border-radius:12px !important;
  padding:1em 1em 1.5em !important;
  font-family:"Kosugi Maru", sans-serif !important;
  box-shadow:2px 2px 8px rgba(0,0,0,0.05) !important;
  border:1px solid #f0e68c !important;
  margin:1em auto !important;

}

.table-of-contents b,
.table-of-contents2 b {

  display:inline !important;
  font-size:1.1em !important;
  margin-bottom:.5em !important;
  color:#444 !important;

}

.table-of-contents hr,
.table-of-contents2 hr {

  border:none !important;
  border-top:1px dashed #ccc !important;
  margin:.5em 0 !important;

}

.table-of-contents a,
.table-of-contents2 a {

  text-decoration:none !important;
  color:#0077aa !important;
  line-height:1.8 !important;
  display: inline !important;
  transition:all .2s ease !important;

}

.table-of-contents a:hover,
.table-of-contents2 a:hover {

  color:#005577 !important;
  text-decoration:underline !important;

}

.table-of-contents ol,
.table-of-contents2 ol {

  padding-left: 1.5em !important;
  margin:0 !important;
  list-style-position: outside !important;

}

.table-of-contents li,
.table-of-contents2 li {

  margin:.6em 0 !important;
  line-height:1.6 !important;
  display: list-item !important;

}

.icon-wrapper {

    margin-bottom:10px !important;
    text-align:center !important;
  
}

.table_style {

  width:100% !important;
  border-collapse:collapse !important;
  background:#fffbea !important;
  margin:20px 0 !important;
  font-size:1rem !important;
  table-layout:fixed !important;  

}

.table_style th,
.table_style td {

  border:1px solid #ccc !important;
  padding:10px !important;
  text-align:left !important;
  vertical-align:middle !important;
  word-wrap:break-word !important;

}

.table_style th {

  background:#ffe28a !important; 
  font-weight:bold !important;
  color:#333 !important;

}

.table_style {

    font-size:0.75rem !important; 
  
}

.table_style th,
  .table_style td {

    padding:6px !important; 
  
}

.talk-wrap {

  display:flex !important;
  align-items:flex-start !important;
  gap:15px !important;

}

.talk-left,
.talk-right,
.talk-tenshi {

  position:relative !important;
  background:#fff !important;
  padding:3% !important;
  border-radius:10px !important;
  flex-grow:1 !important;
  box-shadow:1px 1px 5px #aaa !important;
  margin:10px 0 !important;
  max-width:80% !important;

}

.talk-left {
 border:2px solid #aef26a !important; 
}

.talk-right {
 border:2px solid #fda1f1 !important; 
}

.talk-tenshi {
 border:2px solid #6ecbff !important; 
}

.talk-left:before,
.talk-left:after,
.talk-right:before,
.talk-right:after,
.talk-tenshi:before,
.talk-tenshi:after {

  content:"" !important;
  position:absolute !important;
  top:25% !important;
  transform:translateY(-50%) !important;
  border:10px solid transparent !important;

}

.talk-left:before {
 left:-20px !important; border-right-color:#666 !important; 
}

.talk-left:after {

  left:-16px !important;
  border:9px solid transparent !important;
  border-right-color:#fff !important;

}

.talk-right:before,
.talk-tenshi:before {

  right:-20px !important;
  border-left-color:#666 !important;

}

.talk-right:after,
.talk-tenshi:after {

  right:-16px !important;
  border:9px solid transparent !important;
  border-left-color:#fff !important;

}

.men01-icon,
.women01-icon,
.hakase01-icon {

  width:100px !important;
  height:100px !important;
  border-radius:50% !important;
  background-size:cover !important;
  background-position:center !important;
  box-shadow:1px 1px 5px #aaa !important;
  border:3px solid #fff !important;
  margin-bottom:10px !important;
  flex-shrink:0 !important;

}

.men01-icon {

  background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJMNyTGuaU0WgZ0mlJK045MglRtWZ216ij8YhcoUBwWmeUfjHfZtwOaz6lcdGOYVZztAUWnK58Ce6Ewv4K_zcqpZeZLzKvhsWz392lWF8j_KH1xPrP3j49_A8z4V54zOxkv2lgsobt0jlUInLWbD_rFppvceTP4wHtXjYH0uj9nJRkgrfnpevIgnEqQCI/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-02-15%20212739.png") !important;

}

.women01-icon {

  background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjilmoWaiiZP1EMPfXIxXaTU-IqhWZVn4NlLF9agbw9ODw3tfuumnQr8xUzwT4c1QDqnWm95LZ5-FsEYEV4SLLR1eZt8lv6pnHCWqD5hD3W83iTTZZ4O4MqwINfUqayreheH-5A36lLxX9WZSGtINQQzLTIo1jcA2B5KDHdRJsAf-3W2f4cB5Uyx91qChs/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-02-15%20213135.png") !important;
  background-size:120% !important;

}

.hakase01-icon {

  background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSTFTEPkuMy7M29Tb42GC7JbWzw2-gmEOMlq7YtxDXSZW5gadDtoEl-2ja15dLNdo7NPiUmjgEt48WNOSL9OUU_jIOQt53bJxoOGDFkk5mHBxik3VNHurzwFy7whMPPCR6_K6jGVyN6LCmbr9p_DpzOtjoABkIyepy2dkyaY4PaOr_JF3R6rigCRWVCzg/s1600/%E3%83%8A%E3%83%83%E3%83%97%E3%83%AB%E5%8D%9A%E5%A3%AB.png") !important;

}

.talk-end {

  clear:both !important;

}

.clear-list {

  list-style:none !important;
  margin:30px auto !important;
  padding:40px !important;
  background-color:#fff8fa !important;
  border-radius:15px !important;
  box-shadow:0 2px 5px rgba(0,0,0,0.1) !important;
  display:block !important;
  max-width:100% !important;

}

.clear-list::before,
.clear-list::after {

  content:"" !important;
  display:block !important;
  height:20px !important;

}

.clear-list li {

  position:relative !important;
  padding-left:25px !important;
  margin-bottom:12px !important;
  font-size:1.05rem !important;
  line-height:1.7 !important;
  color:#222 !important;

}

.clear-list li::before {

  content:"\2714" !important;
  position:absolute !important;
  left:0 !important;
  top:3px !important;
  color:#007bff !important;
  font-size:1.2rem !important;
  font-weight:bold !important;

}

ul.clear-list ins.adsbygoogle,
ol.clear-list ins.adsbygoogle,
table ins.adsbygoogle {

  display: none !important;

}
/* ==========================================


/* ============================================
   追加調整
   ============================================ */

/* キャラアイコンは縮まない */
.icon-wrapper { flex-shrink: 0 !important; }

/* 目次内の ol/list は装飾を打ち消す（二重ボックス防止） */
.table-of-contents ol,
.table-of-contents2 ol,
.table-of-contents .clear-list,
.table-of-contents2 .clear-list {
  padding: 0 0 0 1.5em !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
  list-style: decimal outside !important;
}

/* 目次内の擬似要素（clear-list の前後余白）も打ち消し */
.table-of-contents .clear-list::before,
.table-of-contents .clear-list::after,
.table-of-contents2 .clear-list::before,
.table-of-contents2 .clear-list::after {
  content: none !important;
  height: 0 !important;
}

/* 目次内の li は list-item に戻し、チェックマークを消す */
.table-of-contents li,
.table-of-contents2 li {
  padding-left: 0 !important;
  margin: .6em 0 !important;
  line-height: 1.6 !important;
  display: list-item !important;
}
.table-of-contents .clear-list li::before,
.table-of-contents2 .clear-list li::before {
  content: none !important;
}

/* 目次内のリンク色（Bloggerと同じ #0077aa） */
.table-of-contents a,
.table-of-contents2 a {
  color: #0077aa !important;
  text-decoration: none !important;
}
.table-of-contents a:hover,
.table-of-contents2 a:hover {
  color: #005577 !important;
  text-decoration: underline !important;
}

/* 目次ラベル「目次」を強調 */
.table-of-contents,
.table-of-contents2 {
  font-family: "Kosugi Maru", sans-serif !important;
}

/* H2見出しをBlogger相当に固定（Cocoon親font-size 18pxが大きすぎるため） */
.h2-style {
  font-size: 1.2em !important;
  padding: 16px 20px !important;
  line-height: 1.5 !important;
}

/* ============================================================
   Phase 1: ブランド基盤（デザイントークン）  2026-07-25
   バナナぴろし流 — バナナ黄を主役に洗練
   ============================================================ */
:root{
  --banana:#FFCF33;      /* ブランド黄 */
  --banana-deep:#E8A93B; /* 濃黄・ホバー */
  --banana-soft:#FFF3C4; /* 淡黄・帯背景 */
  --stem:#6B4A2B;        /* 茎ブラウン・見出し文字 */
  --leaf:#7CB342;        /* 差し色グリーン */
  --apple:#E4572E;       /* りんご仲間の差し色 */
  --ink:#2B2620;         /* 本文テキスト */
  --ink-soft:#6B6257;    /* 補助テキスト */
  --cream:#FFFDF5;       /* ページ背景 */
  --surface:#FFFFFF;     /* カード・本文面 */
  --muted:#F4EEDC;       /* 区切り・薄帯 */
  --line:#EADFC4;        /* 境界線 */
  --radius:14px;
  --shadow:0 4px 16px rgba(107,74,43,.10);
  --font-head:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
  --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
}

/* --- 全体の地色・本文フォント（Cocoonの灰背景/Hiraginoを上書き） --- */
body.body{
  background:var(--cream) !important;
  color:var(--ink) !important;
  font-family:var(--font-body) !important;
}
#main,#sidebar,.header-container{ background:var(--surface) !important; }

/* --- 見出しは丸ゴシックで親しみ＋可読 --- */
h1,h2,h3,h4,h5,
.site-name-text,.entry-card-title,.card-title,.entry-title,
.widget-sidebar-title,.a-wrap .entry-card-title{
  font-family:var(--font-head) !important;
}

/* --- サイトタイトル色 --- */
.site-name-text,.site-name-text-link{ color:var(--stem) !important; }

/* --- グローバルナビをブランド黄に（質素感を一掃する要） --- */
#navi,#navi ul{ background:var(--banana) !important; }
#navi .navi-in>ul>li>a{
  color:var(--stem) !important;
  font-family:var(--font-head) !important;
  font-weight:700 !important;
}
#navi .navi-in>ul>li>a:hover{ background:var(--banana-deep) !important; color:#fff !important; }

/* --- 記事カードのタイトル（ホバーでブランド色） --- */
.entry-card-title,.card-title{ color:var(--ink) !important; }
.a-wrap:hover .entry-card-title,.entry-card-title a:hover{ color:var(--banana-deep) !important; }

/* --- サイドバー見出し（#sidebar h3）をバナナラベルに --- */
#sidebar h3,.sidebar h3,.widget-sidebar-title{
  background:var(--banana-soft) !important;
  border-left:6px solid var(--banana) !important;
  color:var(--stem) !important;
  padding:10px 14px !important;
  border-radius:8px !important;
  font-family:var(--font-head) !important;
}

/* --- ボタン・検索・ページネーション --- */
.btn,button,input[type="submit"],
.pagination .page-numbers.current{
  background:var(--banana) !important;
  color:var(--stem) !important;
  border-color:var(--banana-deep) !important;
  border-radius:10px !important;
  font-family:var(--font-head) !important;
}
.btn:hover,button:hover,input[type="submit"]:hover{
  background:var(--banana-deep) !important; color:#fff !important;
}
.pagination .page-numbers{ border-radius:8px !important; }

/* --- フッターは茎ブラウンで引き締め --- */
#footer,.footer{ background:var(--stem) !important; color:#f7efe0 !important; }
#footer a,.footer a{ color:#ffe9a8 !important; }

/* ============================================================
   Phase 2: 会話キャラをローカルホストに切替（Blogger削除後も生存）
   バナナぴろし / りんごちゃん / ナップル博士（Blogger流用）
   ============================================================ */
.men01-icon{
  background-image:url("https://www.bananapiroshi.com/wp-content/themes/cocoon-child-marathon/images/characters/banana-piroshi.png") !important;
  background-size:cover !important; background-position:center !important;
}
.women01-icon{
  background-image:url("https://www.bananapiroshi.com/wp-content/themes/cocoon-child-marathon/images/characters/ringo-chan.png") !important;
  background-size:cover !important; background-position:center !important;
}
.hakase01-icon{
  background-image:url("https://www.bananapiroshi.com/wp-content/themes/cocoon-child-marathon/images/characters/napple-hakase.png") !important;
  background-size:cover !important; background-position:center !important;
}

/* ============================================================
   Phase 3: ヘッダーのロゴバッジ（バナナぴろし・円形）
   ============================================================ */
.site-name-text-link{ display:inline-flex !important; align-items:center !important; gap:12px !important; }
.site-name-text-link::before{
  content:""; flex:0 0 auto;
  width:48px; height:48px; border-radius:50%;
  background:#fff url("https://www.bananapiroshi.com/wp-content/themes/cocoon-child-marathon/images/characters/banana-piroshi.png") center 28% / cover no-repeat;
  border:2px solid var(--banana);
  box-shadow:0 2px 6px rgba(107,74,43,.15);
}
/* ヘッダーキャッチコピーを少し上品に */
.site-description,.header-container .site-description{
  color:var(--ink-soft) !important; font-size:13px !important; letter-spacing:.02em !important;
}

/* ============================================================
   Phase 4: トップLP（front-page）  2026-07-25
   ============================================================ */
/* フロントは全幅（Cocoonのno-sidebarを利用） */
.front-top-page.no-sidebar #main{ width:100% !important; }
.front-top-page #main{ padding:0 !important; }

.lp{ max-width:1080px; margin:0 auto; padding:8px 16px 40px; color:var(--ink); }
.lp img{ max-width:100%; height:auto; display:block; }

/* --- 共通ボタン --- */
.lp-btn{
  display:inline-block; padding:13px 26px; border-radius:999px;
  font-family:var(--font-head); font-weight:700; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.lp-btn-primary{ background:var(--banana); color:var(--stem); box-shadow:0 4px 0 var(--banana-deep); }
.lp-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--banana-deep); color:var(--stem); }
.lp-btn-ghost{ background:#fff; color:var(--stem); border:2px solid var(--banana); }
.lp-btn-ghost:hover{ background:var(--banana-soft); color:var(--stem); }

/* --- 見出し --- */
.lp-h2{
  text-align:center; font-family:var(--font-head); font-weight:800;
  font-size:1.6rem; color:var(--stem); margin:0 0 24px;
}
.lp-h2::after{ content:""; display:block; width:56px; height:5px; border-radius:3px;
  background:var(--banana); margin:10px auto 0; }
.lp-section{ margin:56px 0; }

/* --- HERO --- */
.lp-hero{
  display:flex; align-items:center; gap:32px; margin:16px 0 8px;
  background:linear-gradient(135deg, var(--banana-soft) 0%, #FFFDF5 70%);
  border:2px solid var(--line); border-radius:24px; padding:36px 34px;
}
.lp-hero-text{ flex:1 1 56%; }
.lp-eyebrow{ font-family:var(--font-head); font-weight:700; color:var(--banana-deep); margin:0 0 8px; }
.lp-hero-title{ font-family:var(--font-head); font-weight:800; color:var(--stem);
  font-size:2.2rem; line-height:1.35; margin:0 0 16px; }
.lp-hero-sub{ font-size:1rem; line-height:1.9; color:var(--ink); margin:0 0 22px; }
.lp-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.lp-hero-photo{ flex:0 0 300px; position:relative; }
.lp-hero-photo>img:first-child{ width:100%; border-radius:20px; border:4px solid #fff;
  box-shadow:var(--shadow); }
.lp-hero-badge{ position:absolute; right:-10px; bottom:-14px; width:96px; height:96px;
  border-radius:50%; background:#fff; border:3px solid var(--banana);
  object-fit:cover; box-shadow:0 4px 12px rgba(107,74,43,.2); }

/* --- 目的別カード --- */
.lp-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.lp-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:2px solid var(--line); border-radius:18px; padding:24px 16px;
  text-decoration:none; color:var(--ink); transition:transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.lp-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--banana); }
.lp-card-emoji{ font-size:2.4rem; margin-bottom:10px; }
.lp-card-title{ font-family:var(--font-head); font-weight:700; color:var(--stem); font-size:1.05rem; margin-bottom:8px; }
.lp-card-desc{ font-size:.85rem; line-height:1.6; color:var(--ink-soft); }

/* --- プロフィール（EEAT） --- */
.lp-profile{
  display:flex; gap:28px; align-items:center;
  background:#fff; border:2px solid var(--line); border-radius:24px; padding:28px; margin:56px 0;
}
.lp-profile-photo{ flex:0 0 300px; }
.lp-profile-photo img{ width:100%; border-radius:16px; }
.lp-profile-body{ flex:1; }
.lp-profile-body p{ line-height:1.9; }
.lp-badges{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0; padding:0; }
.lp-badges li{ background:var(--banana-soft); color:var(--stem); font-family:var(--font-head);
  font-weight:700; font-size:.85rem; padding:7px 14px; border-radius:999px; border:1px solid var(--banana); }

/* --- キャラ紹介 --- */
.lp-cast{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.lp-cast-item{ display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:2px solid var(--line); border-radius:18px; padding:22px 14px; }
.lp-cast-item img{ width:120px; height:120px; border-radius:50%; object-fit:cover;
  border:3px solid var(--banana); background:#fff; margin-bottom:12px; }
.lp-cast-name{ font-family:var(--font-head); font-weight:800; color:var(--stem); font-size:1.1rem; }
.lp-cast-role{ font-size:.82rem; color:var(--ink-soft); margin-top:4px; }

/* --- 最新記事 --- */
.lp-posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.lp-post{ display:flex; flex-direction:column; background:#fff; border:2px solid var(--line);
  border-radius:16px; overflow:hidden; text-decoration:none; color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease; }
.lp-post:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.lp-post-thumb{ display:flex; align-items:center; justify-content:center; height:150px;
  background:var(--muted) center/cover no-repeat; }
.lp-post-noimg{ font-size:2.6rem; }
.lp-post-cat{ font-family:var(--font-head); font-weight:700; font-size:.72rem; color:var(--banana-deep);
  padding:10px 14px 0; }
.lp-post-title{ font-family:var(--font-head); font-weight:700; font-size:.95rem; line-height:1.5;
  color:var(--ink); padding:4px 14px 16px; }
.lp-more{ text-align:center; margin-top:26px; }

/* --- フッターCTA --- */
.lp-cta{ text-align:center; background:linear-gradient(135deg,var(--banana-soft),#FFFDF5);
  border:2px solid var(--line); border-radius:24px; padding:40px 24px; margin:56px 0 0; }
.lp-cta-char{ width:92px; height:92px; border-radius:50%; object-fit:cover; margin:0 auto 10px;
  border:3px solid var(--banana); background:#fff; }
.lp-cta-title{ font-family:var(--font-head); font-weight:800; color:var(--stem); font-size:1.5rem; margin:6px 0 8px; }
.lp-cta-sub{ color:var(--ink); margin:0 0 20px; }
.lp-cta .lp-hero-cta{ justify-content:center; }

/* --- レスポンシブ --- */
@media (max-width:820px){
  .lp-hero{ flex-direction:column-reverse; text-align:center; padding:28px 20px; }
  .lp-hero-cta{ justify-content:center; }
  .lp-hero-photo{ flex-basis:auto; width:240px; }
  .lp-hero-title{ font-size:1.8rem; }
  .lp-cards{ grid-template-columns:repeat(2,1fr); }
  .lp-profile{ flex-direction:column; text-align:center; }
  .lp-profile-photo{ flex-basis:auto; width:100%; }
  .lp-badges{ justify-content:center; }
  .lp-posts{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:500px){
  .lp-cards,.lp-cast,.lp-posts{ grid-template-columns:1fr; }
  .lp-hero-title{ font-size:1.6rem; }
}

/* ============================================================
   Phase 4b: ヒーローを横長「浜辺を走る」バナー型に  2026-07-25
   ============================================================ */
.lp-hero{ flex-direction:column !important; align-items:stretch; gap:20px; }
.lp-hero-photo{ order:-1; flex:none; width:100%; }
.lp-hero-photo>img:first-child{ width:100%; height:240px; object-fit:cover; object-position:60% 45%; }
.lp-hero-badge{ right:16px; bottom:-16px; }
.lp-hero-text{ flex:none; text-align:left; }
.lp-hero-cta{ justify-content:flex-start; }

/* ============================================================
   Phase 4c: ヒーローをドーンと全幅・大きく（枠なし）  2026-07-25
   ============================================================ */
.lp-hero{ background:none !important; border:none !important; padding:0 !important; border-radius:0 !important; gap:10px; margin-top:0; }
.lp-hero-photo{ align-self:center; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); }
.lp-hero-photo>img:first-child{
  width:100%; height:auto; max-height:460px;
  object-fit:cover; object-position:center 42%;
  border-radius:0 !important; border:none !important; box-shadow:none !important;
}
.lp-hero-badge{ right:24px; bottom:-22px; }
.lp-hero-text{ text-align:center; padding:18px 4px 0; }
.lp-hero-cta{ justify-content:center; }

/* ============================================================
   Phase 5: 記事ページ ブランド統一  2026-07-25
   （.entry-content で高specificity → 既存Blogger移行CSSに上書き）
   ============================================================ */

/* --- H2見出し：バナナブランド（丸ゴシック・茎テキスト） --- */
.entry-content .h2-style{
  background: var(--banana-soft) !important;
  border-left: 9px solid var(--banana) !important;
  color: var(--stem) !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* --- 目次：クリーム地＋バナナ枠・丸ゴシック --- */
.entry-content .table-of-contents,
.entry-content .table-of-contents2{
  background: var(--cream) !important;
  border: 2px solid var(--banana) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(107,74,43,.06) !important;
}
.entry-content .table-of-contents b,
.entry-content .table-of-contents2 b{ color: var(--stem) !important; font-family: var(--font-head) !important; }

/* --- テーブル：バナナ配色 --- */
.entry-content .table_style{ background:#fff !important; border-radius:10px !important; overflow:hidden !important; }
.entry-content .table_style th{
  background: var(--banana) !important; color: var(--stem) !important;
  font-family: var(--font-head) !important;
}
.entry-content .table_style th,
.entry-content .table_style td{ border-color: var(--line) !important; }

/* --- 会話パート：丸く・柔らかく（話者名は丸ゴシック） --- */
.entry-content .talk-left,
.entry-content .talk-right,
.entry-content .talk-tenshi{
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(107,74,43,.08) !important;
}
.entry-content .icon-wrapper span{
  font-family: var(--font-head) !important; color: var(--stem) !important; font-weight: 700 !important;
}

/* --- チェックリスト：クリーム地＋バナナのチェック --- */
.entry-content .clear-list{
  background: var(--cream) !important; border: 1px solid var(--line) !important;
}
.entry-content .clear-list li::before{ color: var(--banana-deep) !important; }

/* ============================================================
   Phase 6: 404・サイドバープロフィール  2026-07-25
   ============================================================ */
/* 404 */
.lp-404{ text-align:center; padding:40px 16px 60px; }
.lp-404-char{ width:150px; height:150px; border-radius:50%; object-fit:cover; border:4px solid var(--banana); background:#fff; margin:0 auto 18px; box-shadow:var(--shadow); }
.lp-404-title{ font-family:var(--font-head); font-weight:800; color:var(--stem); font-size:1.7rem; margin:0 0 10px; }
.lp-404-sub{ color:var(--ink); line-height:1.9; margin:0 0 24px; }
.lp-404-search{ max-width:420px; margin:0 auto 30px; }
.lp-404-links{ max-width:720px; margin:0 auto; }
.lp-404 .lp-card{ padding:18px 12px; }

/* サイドバー プロフィールカード */
.side-profile{ text-align:center; }
.side-profile img{ width:120px; height:120px; border-radius:50%; object-fit:cover; border:3px solid var(--banana); margin:0 auto 10px; display:block; background:#fff; }
.side-profile-name{ font-family:var(--font-head); font-weight:800; color:var(--stem); font-size:1.1rem; margin:0 0 8px; }
.side-profile-bio{ font-size:.85rem; line-height:1.7; color:var(--ink); margin:0 0 12px; }
.side-profile-cta{ display:inline-block; background:var(--banana); color:var(--stem); font-family:var(--font-head); font-weight:700; text-decoration:none; padding:9px 18px; border-radius:999px; font-size:.85rem; }
.side-profile-cta:hover{ background:var(--banana-deep); color:#fff; }

/* ============================================================
   Phase 7: モバイル最適化・速度  2026-07-25
   ============================================================ */
/* フルブリードヒーロー(100vw)がモバイルで横スクロールしないよう保険 */
@media (max-width:820px){
  .lp-hero-photo{ width:100% !important; margin-left:0 !important; }
  .lp-hero-photo>img:first-child{ border-radius:16px !important; }
  .lp{ overflow-x:clip; }
}

/* ============================================================
   Phase 8: 運営者情報ページ  2026-07-25
   ============================================================ */
.about{ max-width:860px; margin:0 auto; }
.about .lp-profile{ margin-top:8px; }
.about .table_style{ max-width:560px; }

/* ============================================================
   Phase 4d: ヒーロー写真の走者を中央寄りにトリミング  2026-07-25
   ============================================================ */
.lp-hero-photo>img:first-child{
  height:440px !important; max-height:440px !important;
  object-fit:cover !important; object-position:60% center !important;
}
/* モバイルは全体表示（過度なズーム防止） */
@media (max-width:820px){
  .lp-hero-photo>img:first-child{ height:auto !important; max-height:300px !important; }
}

/* Phase 4e: 走者を中央に（object-position 横を80%に）2026-07-25 */
.lp-hero-photo>img:first-child{ object-position:80% center !important; }

/* Phase 4f: 中央化した写真を全身表示（高さauto・縦切れ防止）2026-07-25 */
.lp-hero-photo>img:first-child{ height:auto !important; max-height:none !important; object-position:center center !important; }

/* Phase 4g: ヒーロー高さを380pxに固定・上寄せ（画面占領を解消）2026-07-25 */
.lp-hero-photo>img:first-child{
  height:380px !important; max-height:380px !important;
  object-fit:cover !important; object-position:center top !important;
}
@media (max-width:820px){
  .lp-hero-photo>img:first-child{ height:220px !important; max-height:220px !important; object-position:center top !important; }
}

/* ============================================================
   Phase 4h: ヒーローを枠内センター・左右余白・上下トリミングなし
   （全幅フルブリードを解除し、他コンテンツと同じ1080px幅に収める）2026-07-25
   ============================================================ */
.lp-hero-photo{
  width:100% !important; max-width:100% !important;
  margin:0 auto !important; align-self:stretch !important;
}
.lp-hero-photo>img:first-child{
  height:auto !important; max-height:none !important;
  object-fit:fill !important; object-position:center !important;
  border-radius:16px !important;
  box-shadow:0 4px 16px rgba(107,74,43,.12) !important;
}

/* ============================================================
   Phase 4i: ヒーロー画像に文字オーバーレイ  2026-07-25
   ============================================================ */
.lp-hero-photo{ position:relative !important; }
.lp-hero-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 30px 22px;
  background:linear-gradient(to top, rgba(43,38,32,.78), rgba(43,38,32,.30) 55%, rgba(43,38,32,0));
  border-radius:0 0 16px 16px;
  text-align:left; color:#fff; pointer-events:none;
}
.lp-hero-overlay-eyebrow{
  display:block; font-family:var(--font-head); font-weight:700; font-size:.9rem;
  color:#FFE27A; margin-bottom:4px; text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.lp-hero-overlay-title{
  display:block; font-family:var(--font-head); font-weight:800; font-size:2rem; line-height:1.25;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.lp-hero-overlay-sub{
  display:block; font-family:var(--font-head); font-weight:700; font-size:1rem; margin-top:6px;
  color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.55);
}
@media (max-width:820px){
  .lp-hero-overlay{ padding:16px 18px 14px; }
  .lp-hero-overlay-title{ font-size:1.4rem; }
  .lp-hero-overlay-sub{ font-size:.85rem; }
}

/* Phase 4j: ヒーロー右上「新着記事はこちら」ボタン  2026-07-25 */
.lp-hero-newpost{
  position:absolute; top:16px; right:16px; z-index:3;
  background:var(--banana); color:var(--stem);
  font-family:var(--font-head); font-weight:700; font-size:.9rem;
  padding:10px 20px; border-radius:999px; text-decoration:none;
  box-shadow:0 3px 12px rgba(0,0,0,.28);
  transition:transform .12s ease, background .15s ease;
}
.lp-hero-newpost:hover{ background:#fff; color:var(--stem); transform:translateY(-2px); }
@media (max-width:820px){
  .lp-hero-newpost{ top:10px; right:10px; font-size:.78rem; padding:8px 14px; }
}

/* ============================================================
   ヘッダーの背景にヒーロー画像を敷く  2026-07-25
   ============================================================ */
.header-container{
  background:
    linear-gradient(rgba(255,253,245,.55), rgba(255,253,245,.75)),
    url("https://www.bananapiroshi.com/wp-content/themes/cocoon-child-marathon/images/hero-cosplay-c.jpg") center 40% / cover no-repeat #FFFDF5 !important;
}
/* サイトタイトル・キャッチを画像上で読みやすく */
.header-container .site-name-text,
.header-container .site-name-text-link{ color:var(--stem) !important; text-shadow:0 1px 4px rgba(255,255,255,.75); }
.header-container .tagline{ color:var(--stem) !important; text-shadow:0 1px 4px rgba(255,255,255,.75); }

/* ============================================================
   ヘッダー：走るバナナぴろし アニメーション（A1周回＋B1ロゴぷるん）2026-07-25
   ============================================================ */
/* 背景を空〜クリームのグラデに（実写走者との二重を回避） */
.header-container{
  position:relative !important;
  overflow:hidden !important;
  min-height:180px;
  background:linear-gradient(180deg,#DCEEF7 0%,#F3F8E8 58%,#FFFDF5 100%) !important;
}
/* 走者（scaleX(-1)で右向き）が左→右へ周回。上下バウンドでストライド感 */
.header-container::after{
  content:""; position:absolute; left:0; bottom:0;
  width:150px; height:174px;
  background:url("https://www.bananapiroshi.com/wp-content/themes/cocoon-child-marathon/images/runner-run.png") no-repeat center bottom / contain;
  z-index:1; pointer-events:none;
  animation:pirosh-run 13s linear infinite; will-change:transform;
}
@keyframes pirosh-run{
  0%   { transform:translateX(-16vw) translateY(0)   scaleX(-1); }
  12.5%{ transform:translateX(0vw)   translateY(-7px) scaleX(-1); }
  25%  { transform:translateX(16vw)  translateY(0)   scaleX(-1); }
  37.5%{ transform:translateX(33vw)  translateY(-7px) scaleX(-1); }
  50%  { transform:translateX(50vw)  translateY(0)   scaleX(-1); }
  62.5%{ transform:translateX(66vw)  translateY(-7px) scaleX(-1); }
  75%  { transform:translateX(82vw)  translateY(0)   scaleX(-1); }
  87.5%{ transform:translateX(99vw)  translateY(-7px) scaleX(-1); }
  100% { transform:translateX(116vw) translateY(0)   scaleX(-1); }
}
/* タイトル・ロゴ・キャッチを走者の上に */
.header-container #header,
.header-container .logo,
.header-container .tagline,
.header-container .site-name{ position:relative; z-index:2; }
/* B1: バナナロゴ ぷるん */
.site-name-text-link::before{ animation:pirosh-bounce 2.2s ease-in-out infinite; }
@keyframes pirosh-bounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
/* アクセシビリティ：動きが苦手な人には静止 */
@media (prefers-reduced-motion: reduce){
  .header-container::after{ animation:none; transform:translateX(6vw) scaleX(-1); }
  .site-name-text-link::before{ animation:none; }
}
/* スマホ：走者小さめ */
@media (max-width:820px){
  .header-container{ min-height:150px; }
  .header-container::after{ width:100px; height:116px; }
}

/* ============================================================
   ヘッダー調整：走者半分・芝生メニューバー・バウンド5倍  2026-07-25
   ============================================================ */
/* 走者を半分サイズ＋バウンド強化 */
.header-container::after{
  width:75px !important; height:88px !important;
  animation:pirosh-run2 13s linear infinite !important;
}
@keyframes pirosh-run2{
  0%   { transform:translateX(-16vw) translateY(0)     scaleX(-1); }
  12.5%{ transform:translateX(0vw)   translateY(-35px) scaleX(-1); }
  25%  { transform:translateX(16vw)  translateY(0)     scaleX(-1); }
  37.5%{ transform:translateX(33vw)  translateY(-35px) scaleX(-1); }
  50%  { transform:translateX(50vw)  translateY(0)     scaleX(-1); }
  62.5%{ transform:translateX(66vw)  translateY(-35px) scaleX(-1); }
  75%  { transform:translateX(82vw)  translateY(0)     scaleX(-1); }
  87.5%{ transform:translateX(99vw)  translateY(-35px) scaleX(-1); }
  100% { transform:translateX(116vw) translateY(0)     scaleX(-1); }
}
@media (max-width:820px){
  .header-container::after{ width:52px !important; height:60px !important; }
}

/* メニューバーを芝生に */
#navi{
  background:linear-gradient(180deg,#8BC34A 0%,#659B34 100%) !important;
  position:relative;
}
#navi::before{
  content:""; position:absolute; left:0; right:0; top:-14px; height:16px;
  background:url("https://www.bananapiroshi.com/wp-content/themes/cocoon-child-marathon/images/grass.svg") repeat-x bottom / auto 16px;
  z-index:3; pointer-events:none;
}
#navi .navi-in>ul>li>a{ color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.28) !important; }
#navi .navi-in>ul>li>a:hover{ background:#4E8A2A !important; color:#fff !important; }

/* アクセシビリティ：静止（!importantで確実に停止） */
@media (prefers-reduced-motion: reduce){
  .header-container::after{ animation:none !important; transform:translateX(8vw) scaleX(-1) !important; }
  .site-name-text-link::before{ animation:none !important; }
}

/* ============================================================
   モバイル横スクロール修正 / スマホ最適化  2026-07-26
   症状: コンテンツ列が約1256px固定のまま狭幅で縮まず右側が切れる。
   対処: <=834px でサイト幅ラッパーとカスタムLP/記事要素を流動化。
   ============================================================ */
@media (max-width: 834px){
  /* Cocoon サイト幅ラッパー群を画面幅に収める */
  #container, #wrapper, #content, #main, #main-in, .main,
  .content, .content-in, .wrap, .wrap-in,
  .header-in, #header-in, .navi-in, .footer-in,
  .article, .entry-content, .post, .page{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* カスタムLP・記事の固定幅要素を流動化 */
  .lp, .lp-hero, .lp-hero-text, .lp-hero-photo,
  .lp-profile, .lp-profile-photo, .lp-profile-body,
  .lp-cards, .lp-cast, .lp-posts, .lp-cta,
  .lp-h2, .lp-cta-title, .lp-cta-sub, .lp-badges,
  .marathon-x-follow, .sns-follow-buttons, .sns-buttons{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 画像・表・埋め込み・コードを枠内に収める */
  .entry-content img, .entry-content iframe, .entry-content video,
  .entry-content table, .entry-content pre,
  .lp img, .lp-profile-photo img, .lp-hero-photo img,
  .eye-catch, .eye-catch img{
    max-width: 100% !important;
    height: auto !important;
  }
  /* SNSフォローボタンは縦積み・全幅 */
  .marathon-x-follow .sns-button, .sns-follow-buttons .sns-button{
    width: 100% !important; box-sizing: border-box !important;
  }
}
/* 横スクロール最終保険（全幅で意図せぬはみ出しを止める） */
html{ overflow-x: hidden !important; }
body{ overflow-x: hidden !important; max-width: 100% !important; }