/* =================================================================
   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. */)コメントアウトして
   原因を切り分けてください。
================================================================= */

/* ----------------------------------------------------------------
   13. Cocoonヘッダーコンテナ — 記事/固定ページのみ非表示(TOPは維持)
   2026-05-28 追加
---------------------------------------------------------------- */
body:not(.home) #header-container{
  display:none !important;
}

/* ----------------------------------------------------------------
   14. AAB Hero — 雑誌カバー型スプリットレイアウト (2026-05-28)
   muscle-soreness-pillar 試作用
---------------------------------------------------------------- */
.aab-hero{display:grid;grid-template-columns:5fr 7fr;background:#f3efe6;margin:0 0 40px;overflow:hidden;border:1px solid #e5e2da}
.aab-hero-left{background:#0e1228;color:#fff;padding:48px 40px 32px;display:flex;flex-direction:column;justify-content:space-between;min-height:360px}
.aab-hero-label{font-family:'JetBrains Mono','SF Mono',Menlo,monospace;font-size:12px;font-weight:700;letter-spacing:.22em;color:#ec6f24;text-transform:uppercase;margin-bottom:4px}
.aab-hero-num{font-family:'Helvetica Neue','Inter',sans-serif;font-size:152px;font-weight:900;line-height:.95;letter-spacing:-.04em;margin:8px 0 6px;color:#fff}
.aab-hero-unit{color:#ec6f24;font-size:.55em;font-weight:800;vertical-align:baseline}
.aab-hero-cap{font-size:13px;color:#9aa0b0;letter-spacing:.02em;margin-bottom:auto}
.aab-hero-rail{display:grid;grid-template-columns:repeat(4,1fr);margin:24px 0 8px;position:relative;padding-top:14px;font-family:'JetBrains Mono',Menlo,monospace;font-size:11px;color:#6b7080;letter-spacing:.04em;font-weight:700}
.aab-hero-rail::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#6b7080 0%,#ec6f24 65%,#2a2f3e 65%,#2a2f3e 100%);border-radius:2px}
.aab-hero-tick-peak{color:#ec6f24}
.aab-hero-src{font-family:'JetBrains Mono',Menlo,monospace;font-size:10.5px;color:#6b7080;letter-spacing:.15em;text-transform:uppercase;margin-top:10px}
.aab-hero-right{background:#f3efe6;padding:44px 40px 36px;display:flex;flex-direction:column;justify-content:space-between}
.aab-hero-eyebrow{font-family:'JetBrains Mono',Menlo,monospace;font-size:12px;letter-spacing:.22em;color:#ec6f24;font-weight:700;text-transform:uppercase;margin-bottom:18px}
.aab-hero-title{font-family:'Shippori Mincho','Noto Serif JP',serif !important;font-weight:900 !important;font-size:34px !important;line-height:1.42 !important;letter-spacing:.005em;color:#0e1228 !important;margin:0 0 28px !important;border:0 !important;padding:0 !important;background:none !important}
.aab-hero-meta{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center}
.aab-hero-thumb{width:200px;height:120px;object-fit:cover;border-radius:4px;display:block;margin:0}
.aab-hero-author{font-size:14px;font-weight:700;color:#0e1228;margin-bottom:4px}
.aab-hero-bio{font-family:'JetBrains Mono',Menlo,monospace;font-size:11px;color:#6b7080;letter-spacing:.06em}
/* muscle-soreness-pillar のみ Cocoon標準タイトル+アイキャッチを非表示 */
body.postid-2434 .eye-catch-wrap,
body.postid-2434 .eye-catch,
body.postid-2434 .article h1.entry-title,
body.postid-2434 .entry-title{display:none !important}
@media (max-width:768px){
  .aab-hero{grid-template-columns:1fr}
  .aab-hero-left{padding:32px 24px 24px;min-height:auto}
  .aab-hero-num{font-size:108px}
  .aab-hero-right{padding:28px 24px 28px}
  .aab-hero-title{font-size:24px !important}
  .aab-hero-meta{grid-template-columns:1fr;gap:14px}
  .aab-hero-thumb{width:100%;height:auto;aspect-ratio:16/10}
}

/* ----------------------------------------------------------------
   15. mhdr-fullwidth-wrap — mhdr を Cocoonヘッダー直下・横幅100%に (2026-05-28)
---------------------------------------------------------------- */
.mhdr-fullwidth-wrap{
  width:100%;
  margin:0;
  padding:0;
}
.mhdr-fullwidth-wrap .mhdr{
  max-width:100% !important;
  width:100% !important;
  margin:0 !important;
  border-radius:0 !important;
}