/* =================================================================
   marin-oceanlife.com — note風フラット化 オーバーライド CSS
   配置:WordPress 管理画面 → カスタマイズ → 追加CSS に貼る
        (子テーマの style.css に貼ってもOK)
   削除すれば即・元の見た目に戻ります。HTML / PHP は触りません。
================================================================= */

/* ----------------------------------------------------------------
   0. カラートークン(必要なら数値だけ調整)
---------------------------------------------------------------- */
:root{
  --ml-ink:#0e1228;
  --ml-ink-soft:#2a2f3e;
  --ml-ink-mute:#6b7080;
  --ml-ink-faint:#9aa0b0;
  --ml-rule:#e5e2da;
  --ml-rule-soft:#efece5;
  --ml-accent:#ec6f24;
  --ml-bg:#f3efe6;
}

/* ----------------------------------------------------------------
   1. 全体の背景 — グレー背景を白に
---------------------------------------------------------------- */
body,
.body,
#body,
.body-in,
#body-in,
.container,
#container{
  background:var(--ml-bg) !important;
}

/* ----------------------------------------------------------------
   2. メインコンテンツ — 白カード(背景・枠・影・角丸)を全廃
   Cocoon の .main / article.post / .entry-content を平らにする
---------------------------------------------------------------- */
.main,
#main,
article.post,
article.page,
.article{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* メイン領域の外余白だけ少し付ける(本文が画面端に張り付かないように)*/
.main,
#main{
  padding:8px 0 0 !important;
}

/* 記事内の二重カード(.entry-content など)も平らに */
.entry-content,
.post-content,
.article-content{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* ----------------------------------------------------------------
   3. サイドバー — 枠・影・背景を全廃(中身はそのまま)
---------------------------------------------------------------- */
#sidebar,
.sidebar,
.sidebar-scroll,
.sidebar .widget,
.widget,
.widget_recent_entries,
.new-entries,
.popular-entries,
.related-entries{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* ウィジェット同士の間隔は確保 */
.sidebar .widget,
#sidebar .widget{
  margin-bottom:44px !important;
}

/* ----------------------------------------------------------------
   4. ウィジェットタイトル — ダーク見出し帯 → ミニマルなラベル
---------------------------------------------------------------- */
.sidebar-title,
.widget-sidebar-title,
.widget-title,
.widget h3,
.widget .widgettitle,
.sidebar h2,
.sidebar h3{
  background:none !important;
  background-color:transparent !important;
  color:var(--ml-ink) !important;
  border:0 !important;
  border-bottom:1px solid var(--ml-ink) !important;
  border-radius:0 !important;
  padding:0 0 10px !important;
  margin:0 0 18px !important;
  font-family:"JetBrains Mono","SF Mono",Menlo,monospace !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

/* タイトル左の小さなオレンジドット(::before で挿入) */
.sidebar-title::before,
.widget-sidebar-title::before,
.widget-title::before,
.widget .widgettitle::before,
.widget h3::before,
.sidebar h2::before,
.sidebar h3::before{
  content:"" !important;
  display:inline-block !important;
  width:6px !important;
  height:6px !important;
  background:var(--ml-accent) !important;
  border-radius:50% !important;
  flex:0 0 6px !important;
}

/* 旧 ::before(アイコン等)は隠す — Cocoon のフォントアイコンが
   絵文字みたいに出てしまうので保険 */
.sidebar-title .fa,
.widget-title .fa,
.widget-title [class*="fa-"],
.widget-sidebar-title [class*="fa-"]{
  display:none !important;
}

/* ----------------------------------------------------------------
   5. 新着記事/関連記事 — カード見た目を解除
---------------------------------------------------------------- */
.new-entry-card,
.popular-entry-card,
.related-entry-card,
.widget_recent_entries li,
.widget_recent_entries a{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

.new-entry-card,
.popular-entry-card,
.related-entry-card{
  display:grid !important;
  grid-template-columns:64px 1fr !important;
  gap:12px !important;
  align-items:flex-start !important;
  margin-bottom:18px !important;
}

.new-entry-card-thumb,
.popular-entry-card-thumb,
.related-entry-card-thumb,
.new-entry-card-thumb img,
.popular-entry-card-thumb img,
.related-entry-card-thumb img{
  width:64px !important;
  height:64px !important;
  border-radius:6px !important;
  overflow:hidden !important;
  margin:0 !important;
}

.new-entry-card-thumb img,
.popular-entry-card-thumb img,
.related-entry-card-thumb img{
  object-fit:cover !important;
}

.new-entry-card-title,
.popular-entry-card-title,
.related-entry-card-title,
.new-entry-card-content,
.popular-entry-card-content,
.related-entry-card-content{
  font-size:13px !important;
  line-height:1.6 !important;
  color:var(--ml-ink) !important;
  font-weight:500 !important;
  margin:0 !important;
  padding:0 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

.new-entry-card-date,
.popular-entry-card-date,
.related-entry-card-date{
  font-family:"JetBrains Mono",Menlo,monospace !important;
  font-size:10.5px !important;
  color:var(--ml-ink-mute) !important;
  letter-spacing:.04em !important;
  margin-bottom:4px !important;
  display:block !important;
  font-weight:700 !important;
}

/* ----------------------------------------------------------------
   6. 記事タイトル — 明朝で雑誌的に(ゴシックのままが良ければ削除可)
---------------------------------------------------------------- */
.entry-title,
.article h1.entry-title,
h1.entry-title{
  font-family:"Shippori Mincho","Noto Serif JP","Yu Mincho",serif !important;
  font-weight:900 !important;
  font-size:32px !important;
  line-height:1.45 !important;
  color:var(--ml-ink) !important;
  letter-spacing:.005em !important;
  margin:0 0 22px !important;
  padding:0 !important;
  border:0 !important;
}

/* ----------------------------------------------------------------
   7. パンくず — 控えめに
---------------------------------------------------------------- */
.breadcrumb,
#breadcrumb,
.breadcrumb-caption{
  background:transparent !important;
  border:0 !important;
  padding:0 0 18px !important;
  font-size:12px !important;
  color:var(--ml-ink-mute) !important;
}
.breadcrumb a,
#breadcrumb a{
  color:var(--ml-ink-mute) !important;
}
.breadcrumb a:hover,
#breadcrumb a:hover{
  color:var(--ml-accent) !important;
}

/* ----------------------------------------------------------------
   8. 投稿日・更新日(エントリーメタ)— モノスペースで小さく
---------------------------------------------------------------- */
.date-tags,
.post-date,
.post-update,
.entry-date,
.entry-update{
  font-family:"JetBrains Mono",Menlo,monospace !important;
  font-size:11px !important;
  color:var(--ml-ink-mute) !important;
  letter-spacing:.04em !important;
}

/* ----------------------------------------------------------------
   9. H2 — 現状の濃紺グラデは維持(.aab と相性◎)
   H3 — 左罫オレンジに統一
---------------------------------------------------------------- */
.entry-content h3{
  border:0 !important;
  background:transparent !important;
  border-left:3px solid var(--ml-accent) !important;
  padding:0 0 0 12px !important;
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.5 !important;
  color:var(--ml-ink) !important;
  margin:32px 0 14px !important;
}

/* ----------------------------------------------------------------
   10. 本文タイポ — 行間・コントラストを note ライクに
---------------------------------------------------------------- */
.entry-content,
.entry-content p{
  font-size:16px !important;
  line-height:2.0 !important;
  color:var(--ml-ink) !important;
}
.entry-content p{
  margin:0 0 24px !important;
}
.entry-content b,
.entry-content strong{
  font-weight:700 !important;
}

/* ----------------------------------------------------------------
   11. 管理バー / 余計な区切り線の調整
---------------------------------------------------------------- */
hr.entry-divider,
.entry-content > hr{
  border:0 !important;
  border-top:1px solid var(--ml-rule) !important;
  margin:32px 0 !important;
}

/* ----------------------------------------------------------------
   12. モバイル(〜960)
---------------------------------------------------------------- */
@media (max-width:960px){
  .entry-title,
  h1.entry-title{
    font-size:24px !important;
  }
  .entry-content,
  .entry-content p{
    font-size:15.5px !important;
    line-height:1.95 !important;
  }
  .sidebar .widget,
  #sidebar .widget{
    margin-bottom:36px !important;
  }
}

/* =================================================================
   END — 何か崩れたら、項目ごと(/* 1. 〜 12. */)コメントアウトして
   原因を切り分けてください。
================================================================= */