@charset "UTF-8";

/*==================================================
  main.css  ― Shamham Theme（Cocoon Child）
  2026.10 可読性改善版

  構成:
    0. 共通カラー・タイポグラフィ変数
    1. Base（フォント・文字色・リンク・フォーカス）
    2. ヘッダー / グローバルナビ / モバイルメニュー
    3. アピールエリア
    4. 共通ボタン
    5. 記事一覧（エントリーカード）
    6. 記事ページ周辺（タイトル・日付・カテゴリ・著者・関連記事・コメント）
    7. サイドバー
    8. ページネーション / パンくず / フッター
    9. レスポンシブ

  方針:
    ・Cocoon本体のHTMLはそのまま。CSSのみで調整
    ・グラデーション＋紫の世界観は維持し、
      「文字が載る場所」だけ色を一段深くしてコントラストを確保
    ・装飾は消さずに「文字から離す・細くする・薄くする」
==================================================*/


/*==================================================
  0. 共通カラー・タイポグラフィ変数
==================================================*/
:root{
  /* --- 既存（変更なし） --- */
  --grad-header:linear-gradient(135deg,#d63bc8 0%,#a855f7 60%,#6366f1 100%);
  --grad-hero:linear-gradient(135deg,#f8d0f0 0%,#e0b4fa 35%,#c4a8f5 65%,#a8c8ff 100%);
  --grad-btn:linear-gradient(90deg,#d946ef,#a855f7);
  --grad-footer:linear-gradient(135deg,#581c87 0%,#4c1d95 50%,#1e1b4b 100%);
  --pink-accent:#e879f9;
  --purple-text:#7c3aed;
  --purple-dark:#4b2b6b;

  /* --- 追加: 文字が載るグラデーション用（同系色で一段深く。白文字コントラスト4.7〜5.4） --- */
  --grad-strong:linear-gradient(90deg,#c026d3,#9333ea);

  /* --- 追加: テキストカラー --- */
  --text-main:#333333;   /* サイト全体の基本文字色 */
  --text-sub:#6b6b6b;    /* 日付・補足（5.3:1） */
  --text-muted:#6b6378;  /* キャプション等（5.7:1） */
  --link:#135994;        /* リンク（7.3:1） */
  --link-hover:#c0257a;

  /* --- 追加: 参考デザイン（ミニナレ）寄せのパレット ---
     ブランドのピンク〜紫はグラデーションバーにだけ使い、
     面はグレー、補助色は水色・イエローで「情報整理された」印象に */
  --ink:#222222;          /* 見出し・タイトル */
  --text-body:#4a4a4a;    /* 本文（白で8.9:1） */
  --strong:#333077;       /* 強調（紺） */
  --gray-bg:#f4f4f4;      /* h2の面 */
  --gray-cell:#f7f7f7;    /* 表セル・おすすめ記事カード */
  --sky:#5ec4d4;          /* まとめ枠・アイコン・h4 */
  --sky-soft:#dff2f5;
  --sky-head:#d5f3f3;     /* 表の見出しセル */
  --sky-deep:#2589a6;     /* 白文字を載せる水色（4:1） */
  --chip:#2a7da4;         /* カテゴリラベル */
  --yellow:#ffe500;       /* 目次の上辺 */
  --pink-bar:#f2507a;     /* h3の左バー */
  --grad-bar:linear-gradient(180deg,#ff8a5c 0%,#f0397f 45%,#b44fe0 100%);
  --line-gray:#e3e3e3;
  --lavender:#f6f2fd;

  /* --- 追加: 線・面 --- */
  --line-soft:#efe4f8;
  --line-mid:#e2cff3;
  --bg-tint:#fbf8fe;
  --bg-tint-2:#f5ecfd;

  /* --- 追加: フォント ---
     Cocoon設定で「Noto Sans JP（WEBフォント）」を選ぶと全OSで同じ見え方になります。
     未設定でも Mac/iPhone=ヒラギノ、Windows=BIZ UDPゴシック/メイリオ で読みやすく表示。 */
  --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif;
  --font-heading:var(--font-body); /* 見出しだけ個性的なフォントにしたい場合はここを変更 */

  /* Cocoon本体の文字色変数も底上げ（#999などの薄すぎる文字を解消） */
  --cocoon-text-color:#333333;
  --cocoon-pallid-text-color:#6b6378;
  --cocoon-x-pallid-text-color:#6b6378;
}


/*==================================================
  1. Base
==================================================*/

/* Cocoonのフォント設定クラス(.ff-xxx)より確実に優先させる */
html .body.body{
  font-family:var(--font-body);
  color:var(--text-main);
  letter-spacing:.03em;
  line-break:strict;
  overflow-wrap:anywhere;
  word-break:normal;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

input,
textarea,
select,
button{
  font-family:inherit;
}

img{
  max-width:100%;
  height:auto;
}

a{
  transition:color .2s,background-color .2s,opacity .2s;
}

/* キーボード操作時のフォーカスを見えるように */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid #a855f7;
  outline-offset:2px;
}


/*==================================================
  2. ヘッダー / グローバルナビ / モバイルメニュー
==================================================*/

.tagline{
  font-size:13px;
  letter-spacing:.1em;
  line-height:1.6;
}

/* PCグローバルナビ: 色はCocoon設定のまま、文字と余白だけ調整 */
#navi .navi-in > ul > li > a{
  font-size:15px;
  font-weight:500;
  letter-spacing:.08em;
}

/* ホバー時: 背景ベタ塗り(#f5f8fa)だとヘッダー色によって文字が消えるため、
   文字色を活かした小さな下線で「押せる」ことを示す */
#navi .navi-in > ul > li > a:hover{
  background-color:rgba(255,255,255,.12);
  color:inherit;
}

#navi .navi-in > ul > li > a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:8px;
  width:22px;
  height:2px;
  margin-left:-11px;
  border-radius:2px;
  background:currentColor;
  opacity:0;
  transition:opacity .2s;
}

#navi .navi-in > ul > li > a:hover::after,
#navi .navi-in > ul > li > a:focus-visible::after,
#navi .navi-in > ul > li.current-menu-item > a::after{
  opacity:.75;
}

/* サブメニュー */
#navi .navi-in > ul .sub-menu a{
  font-size:14px;
  padding-top:12px;
  padding-bottom:12px;
}

/* モバイル: 下部/上部のメニューボタンの文字(9px)を読める大きさに */
.mobile-menu-buttons .menu-caption{
  font-size:11px;
  opacity:1;
  letter-spacing:.04em;
}

/* スライドメニュー（ハンバーガー内）: タップしやすい行間 */
.menu-drawer a{
  font-size:15px;
  line-height:1.6;
  padding:14px 12px;
  border-bottom:1px solid var(--line-soft);
}

.menu-drawer .sub-menu a{
  font-size:14px;
  padding:12px;
}


/*==================================================
  3. アピールエリア
==================================================*/
.appeal,
.appeal-in{
  background:var(--grad-hero)!important;
  background-image:none!important;
  min-height:220px!important;
}

.appeal-content{
  text-align:center;
  padding:32px 20px!important;
}

.appeal-title{
  color:#5b1d8a!important;
  font-size:24px!important;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.06em;
  border:none!important;
}

/* 旧: #7c3aed（グラデ背景上で3.3:1）→ 同系の濃い紫で 5〜6:1 */
.appeal-message{
  color:#5b1d8a!important;
  font-size:16px;
  font-weight:500;
  line-height:1.8;
  letter-spacing:.05em;
}

.appeal-content .appeal-button{
  background:var(--grad-strong)!important;
  border:none!important;
  border-radius:20px!important;
  color:#fff!important;
  font-weight:700;
  letter-spacing:.06em;
}


/*==================================================
  4. 共通ボタン
==================================================*/
.sim-btn a,
.btn-normal,
.btn-angle{
  background:var(--grad-strong)!important;
  border:none!important;
  border-radius:20px!important;
  color:#fff!important;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.5;
}


/*==================================================
  5. 記事一覧（エントリーカード）
  表示順:  サムネイル → [カテゴリ] 日付 → タイトル → 概要
  ※ HTMLは変えず、CSSの order で日付行をタイトルの上へ移動
==================================================*/

/* カード: 枠線なし。余白と区切り線で整理（参考サイトの一覧の見せ方） */
#list .entry-card-wrap{
  padding:20px 8px;
  margin-bottom:0;
  background-color:transparent;
  border:none;
  border-bottom:1px solid var(--line-gray);
  border-radius:0;
  box-shadow:none;
}

#list .entry-card-wrap:hover{
  background-color:transparent;
}

#list .entry-card-wrap:hover .entry-card-title{
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:.2em;
}

#list .entry-card-wrap:hover .entry-card-thumb img{
  opacity:.85;
}

/* カード本体: 二重の枠（角丸の枠＋区切り線）にならないよう枠を消す */
#list .entry-card{
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent;
}

/* 横型カード: 画像とテキストを横並び（float→flex）にして、
   テキストが長いときに画像の下へ空きができないようにする */
#list.ect-entry-card .entry-card-wrap:not(.ec-big-card-first) .entry-card{
  display:flex;
  align-items:flex-start;
  gap:20px;
}

#list.ect-entry-card .entry-card-wrap:not(.ec-big-card-first) .entry-card::after{
  display:none;
}

#list.ect-entry-card .entry-card-wrap:not(.ec-big-card-first) .entry-card-thumb{
  float:none;
  flex-shrink:0;
  margin-right:0;
}

#list.ect-entry-card .entry-card-wrap:not(.ec-big-card-first) .entry-card-content{
  flex:1;
  min-width:0;
  margin-left:0;
}

/* サムネイル: 角はわずかに丸める程度（カテゴリラベルの角と揃える） */
#list .entry-card-thumb{
  margin-top:0;
  margin-bottom:0;
  border-radius:4px;
  overflow:hidden;
}

#list .entry-card-thumb img{
  display:block;
  transition:opacity .2s;
}

/* サムネイル上のカテゴリラベルはメタ行に移すため一覧では非表示
   ※ 画像の上に残したい場合はこのルールを削除 */
#list .entry-card-thumb .cat-label{
  display:none;
}

#list .entry-card-content{
  display:flex;
  flex-direction:column;
  padding-bottom:0;
}

#list .entry-card-meta{
  position:static;
  order:-1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 12px;
  margin:2px 0 10px;
  text-align:left;
  line-height:1.4;
}

#list .e-card-meta .e-card-categorys{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  order:-1;
}

/* カテゴリ: 角の小さい水色チップ */
#list .e-card-categorys .entry-category{
  display:inline-block;
  padding:3px 10px;
  font-size:12px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.05em;
  color:#fff;
  background-color:var(--chip);
  border:none;
  border-radius:3px;
}

#list .e-card-info{
  justify-content:flex-start;
  gap:2px 10px;
}

#list .e-card-info > span{
  margin-right:0;
}

#list .e-card-info :is(.post-date,.post-update,.post-author,.post-comment-count){
  padding:0;
  margin:0;
  font-size:13px;
  color:var(--text-sub);
  letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
}

#list .e-card-info .fa{
  display:none;
}

#list .entry-card-title{
  margin:0 0 .5em;
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--ink);
  -webkit-line-clamp:3;
}

#list .entry-card-snippet{
  margin:0;
  font-size:14px;
  line-height:1.85;
  letter-spacing:.04em;
  color:var(--text-sub);
  -webkit-line-clamp:2;
}

#list.ect-vertical-card .entry-card-thumb{
  margin-bottom:14px;
}

/* サムネイル上ラベル（記事ページのアイキャッチ・関連記事など一覧以外） */
.cat-label{
  border:none;
  border-radius:3px;
  background-color:var(--chip);
  color:#fff;
  font-weight:500;
  letter-spacing:.05em;
  line-height:1.5;
}

.eye-catch .cat-label{
  top:12px;
  left:12px;
  font-size:13px;
  padding:3px 12px;
  opacity:1;
  border:none;
}


/*==================================================
  6. 記事ページ周辺
==================================================*/

/* メインエリア: 白いカード＋ごく薄い影 */
.main{
  border:none;
/*   border-radius:16px; */
  box-shadow:0 0 24px rgba(0,0,0,.06);
}

/* 記事ヘッダーの並び: タイトル → 日付 → アイキャッチ → シェア */
.article .article-header{
  display:flex;
  flex-direction:column;
}

.article .article-header > .entry-title{ order:1; }
.article .article-header > .date-tags{ order:2; }
.article .article-header > .eye-catch-wrap{ order:3; }
.article .article-header > :not(.entry-title):not(.date-tags):not(.eye-catch-wrap){ order:4; }

/* 日付行: 左に「公開日」ラベル、下に区切り線 */
.article .date-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:4px 14px;
  margin:0 0 1.8em;
  padding:0 0 1em;
  line-height:1.6;
  color:var(--text-sub);
  text-align:right;
  border-bottom:1px solid #ddd;
}

.article .date-tags :is(.post-date,.post-update,.post-author){
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  font-size:14px;
  letter-spacing:.05em;
  color:#888;
  font-variant-numeric:tabular-nums;
}

.article .date-tags .fa{
  display:none;
}

.article .date-tags .post-date::before,
.article .date-tags .post-update::before{
  display:inline-block;
  padding:1px 8px;
  font-size:12px;
  line-height:1.6;
  letter-spacing:.05em;
  color:#fff;
  background:#757575;
  border-radius:2px;
}

.article .date-tags .post-date::before{ content:"公開日"; }
.article .date-tags .post-update::before{ content:"更新日"; }

/* アイキャッチ */
.article .eye-catch-wrap{
  margin-bottom:2em;
}

/* 本文下のカテゴリ/タグ */
.cat-link,
.tag-link{
  font-size:13px;
  font-weight:500;
  letter-spacing:.05em;
  padding:4px 14px;
  border-radius:3px;
  line-height:1.6;
}

.cat-link{
  background-color:var(--chip);
}

.tag-link{
  color:var(--text-body);
  background:#f3f3f3;
  border:none;
}

.cat-link:hover,
.tag-link:hover{
  opacity:.8;
}

.sns-share-message,
.sns-follow-message{
  font-size:14px;
  color:var(--text-sub);
  letter-spacing:.08em;
}

/* 著者ボックス（記事下・サイドバー共通） */
.author-box{
  font-size:14px;
  line-height:1.8;
  border:none;
  border-radius:12px;
  background:var(--gray-cell);
}

.author-box p{
  line-height:1.8;
}

.author-box .author-name{
  font-size:16px;
  margin-bottom:.3em;
}

.author-box .author-name a{
  color:var(--ink);
}

.author-box .sns-follow-buttons a.follow-button{
  width:34px;
  height:34px;
  font-size:18px;
  border-radius:50%;
  border-color:#ddd;
  background:#fff;
  color:#555;
}

/* 関連記事・コメント見出し: 本文h3と同じ表現 */
.related-entry-heading,
.comment-title{
  position:relative;
  font-family:var(--font-heading);
  font-size:20px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.06em;
  color:var(--ink);
  padding:.2em 0 .7em 1.5em;
  border:none;
  background-image:radial-gradient(circle,#e7a3e3 1.3px,transparent 1.8px);
  background-size:9px 6px;
  background-repeat:repeat-x;
  background-position:left bottom;
}

.related-entry-heading::before,
.comment-title::before{
  content:"";
  position:absolute;
  left:.2em;
  top:.68em;
  width:.6em;
  height:.6em;
  border-radius:2px;
  background:linear-gradient(135deg,#f472b6,#a855f7);
  transform:rotate(45deg);
}

.related-entry-heading::after,
.comment-title::after{
  content:none;
}

.related-entry-card-title{
  font-size:16px;
  line-height:1.6;
  letter-spacing:.03em;
}

.related-entry-card-snippet{
  font-size:13px;
  line-height:1.75;
  color:var(--text-sub);
}

.related-entry-card-thumb img{
  border-radius:4px;
}

.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
  font-size:16px;
  border-color:#ddd;
  border-radius:8px;
}

.comment-form label,
.comment-notes,
.logged-in-as{
  font-size:14px;
  line-height:1.7;
}


/*==================================================
  7. サイドバー
==================================================*/

.sidebar{
  font-size:15px;
  line-height:1.75;
}

.sidebar .widget{
  margin-bottom:2.6em;
}

/* ウィジェット見出し: 面も線も使わず、虫めがねアイコン＋太字 */
.sidebar h2,
.sidebar h3{
  position:relative;
  margin:0 0 12px;
  padding:4px 0 4px 26px;
  font-family:var(--font-heading);
  font-size:17px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.08em;
  color:var(--ink);
  background:none;
  border:none;
  border-radius:0;
}

/* 虫めがね（CSSだけで描画） */
.sidebar h2::before,
.sidebar h3::before{
  content:"";
  position:absolute;
  left:1px;
  top:50%;
  width:12px;
  height:12px;
  margin-top:-8px;
  border:2px solid var(--ink);
  border-radius:50%;
  background:none;
  box-sizing:border-box;
}

.sidebar h2::after,
.sidebar h3::after{
  content:"";
  position:absolute;
  left:11px;
  top:50%;
  width:6px;
  height:2px;
  margin-top:3px;
  background:var(--ink);
  transform:rotate(45deg);
  border-radius:1px;
}

/* リンク一覧: 区切り線＋右端の矢印 */
.sidebar :is(.widget_categories,.widget_archive,.widget_pages,.widget_nav_menu,.widget_recent_entries,.widget_meta) ul li a{
  position:relative;
  padding:14px 36px 14px 12px;
  font-size:15px;
  line-height:1.5;
  letter-spacing:.05em;
  color:#444;
  border-bottom:1px solid var(--line-gray);
}

.sidebar :is(.widget_categories,.widget_archive,.widget_pages,.widget_nav_menu,.widget_recent_entries,.widget_meta) ul li a::after{
  content:"\2192";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:#999;
  font-size:14px;
  transition:right .2s,color .2s;
}

.sidebar :is(.widget_categories,.widget_archive,.widget_pages,.widget_nav_menu,.widget_recent_entries,.widget_meta) ul li a:hover{
  background-color:transparent;
  color:var(--link);
}

.sidebar :is(.widget_categories,.widget_archive,.widget_pages,.widget_nav_menu,.widget_recent_entries,.widget_meta) ul li a:hover::after{
  right:8px;
  color:var(--link);
}

.sidebar .widget_categories ul li a .post-count,
.sidebar .widget_archive ul li a .post-count{
  font-size:13px;
  color:var(--text-sub);
  margin-right:6px;
}

/* タグクラウド: グレーのチップ */
.sidebar .tagcloud a,
.sidebar .tag-link{
  display:inline-block;
  margin:0 4px 8px 0;
  padding:4px 12px;
  font-size:13px !important;
  letter-spacing:.05em;
  color:#555;
  background:#f3f3f3;
  border:none;
  border-radius:3px;
}

.sidebar .tagcloud a:hover,
.sidebar .tag-link:hover{
  color:var(--link);
  background:#eaeaea;
}

/* 新着・人気記事ウィジェット */
.widget-entry-cards .a-wrap{
  padding:8px 4px;
  margin-bottom:6px;
  border-radius:8px;
}

.widget-entry-card-thumb img{
  border-radius:4px;
}

.widget-entry-card-title,
.popular-entry-card-title,
.new-entry-card-title{
  font-size:14px;
  font-weight:500;
  line-height:1.6;
  letter-spacing:.03em;
  color:var(--ink);
}

.widget-entry-card-date,
.popular-entry-card-date,
.new-entry-card-date{
  font-size:12px;
  color:#888;
}

/* 検索フォーム: 白いピル型＋右端の黒い丸ボタン（参考サイトのヘッダー検索の形） */
.search-box{
  margin:.5em 0 2em;
}

.search-edit{
  height:48px;
  padding:0 60px 0 20px;
  font-size:16px; /* iOSでズームされない最小値 */
  color:var(--ink);
  background-color:#fff;
  border:1px solid #ddd;
  border-radius:24px;
}

.search-edit::placeholder{
  color:#999;
}

.search-edit:focus{
  border-color:#999;
  outline:3px solid rgba(0,0,0,.06);
  outline-offset:0;
}

.search-submit{
  right:4px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  padding:0;
  font-size:16px;
  color:#fff;
  background:#222;
  border-radius:50%;
}


/*==================================================
  8. ページネーション / パンくず / フッター
==================================================*/

.pagination .page-numbers{
  min-width:44px;
  height:44px;
  line-height:42px;
  font-size:15px;
  font-weight:500;
  border-color:var(--line-mid);
  border-radius:8px;
  color:var(--text-main);
}

.pagination .current{
  background:var(--grad-strong);
  border-color:transparent;
  color:#fff;
}

.pagination-next-link{
  border-color:var(--line-mid);
  border-radius:24px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink);
  background-color:var(--gray-cell);
}

.breadcrumb{
  font-size:13px;
  line-height:1.7;
  color:var(--text-sub);
}

.breadcrumb a{
  color:var(--text-sub);
}

.breadcrumb a:hover{
  color:var(--link);
  text-decoration:underline;
}

/* フッター: ウィジェットが空のときにできる上の空きをなくす */
.footer{
  padding:0;
}

.footer-widgets:not(:has(.widget)),
.footer-widgets-mobile:not(:has(.widget)){
  display:none;
}

.footer-bottom{
  margin-top:0;
  padding:22px 16px;
  font-size:14px;
  line-height:1.7;
}

.navi-footer-in a{
  font-size:14px;
  padding:8px 0;
  letter-spacing:.05em;
}

.copyright{
  margin-top:0;
  font-size:12px;
  letter-spacing:.06em;
}


/*==================================================
  9. レスポンシブ
==================================================*/

/* タブレット以下（サイドバーが下に回る幅） */
/* 小さめタブレット〜大きめスマホ */
@media (max-width:600px){

  #list .entry-card-wrap{
    padding:16px 0;
  }

  /* 横型カード: サムネイル38% / テキスト残り */
  /* スマホ: 画像は上下中央に置き、テキストとの高さの差を目立たせない */
  #list.ect-entry-card .entry-card-wrap:not(.ec-big-card-first) .entry-card{
    align-items:center;
    gap:12px;
  }

  #list.ect-entry-card .entry-card-wrap:not(.ec-big-card-first) .entry-card-thumb{
    width:38%;
    border-radius:3px;
  }

  #list .entry-card-meta{
    gap:4px 8px;
    margin-bottom:6px;
  }

  #list .e-card-categorys .entry-category{
    padding:2px 8px;
    font-size:12px;
  }

  #list .e-card-info :is(.post-date,.post-update,.post-author,.post-comment-count){
    font-size:12px;
  }

  #list .entry-card-title{
    font-size:15px;
    line-height:1.55;
    margin-bottom:0;
    letter-spacing:.02em;
  }

  /* 横型カードでは概要を省略（タイトルの読みやすさを優先） */
  #list.ect-entry-card .entry-card-wrap:not(.ec-big-card-first) .entry-card-snippet{
    display:none;
  }

  #list.ect-vertical-card .entry-card-snippet{
    font-size:13px;
    -webkit-line-clamp:2;
  }

  .eye-catch .cat-label{
    top:8px;
    left:8px;
    font-size:12px;
    padding:2px 10px;
  }

  .main{
    border-radius:0;
    box-shadow:none;
  }

  .article .date-tags :is(.post-date,.post-update){
    font-size:13px;
  }

}

@media (max-width:480px){

  .appeal-content{
    padding:20px 16px!important;
  }

  .appeal-title{
    font-size:20px!important;
  }

  .appeal-message{
    font-size:15px;
  }

  .related-entry-heading,
  .comment-title{
    font-size:18px;
  }

  .related-entry-card-title{
    font-size:15px;
  }

}