@charset "UTF-8";
/* ==========================================
   PC用：SIRIUS iPhoneブラックテンプレート完全再現CSS
   ========================================== */

/* 1. 最上部のサイト名ロゴ（PC用） */
#logo-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 1.5em 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

#logo {
  background: linear-gradient(to bottom, #777777 0%, #444444 50%, #111111 100%) !important;
  border: none !important;
  border-top: 1px solid #888888 !important;
  border-bottom: 1px solid #000000 !important;
  border-radius: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 15px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

#logo a, #logo span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  text-decoration: none !important;
}

/* 2. 記事タイトル・H2見出し */
.p-entry__title,
.entry-title,
#main h1,
.p-entry__body h2, 
.entry-content h2, 
h2 {
    background: linear-gradient(to bottom, #777777 0%, #444444 50%, #111111 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 18px !important; /* ←ここに希望の文字サイズを指定（例: 18px や 1.1rem など） */
    font-weight: bold !important;
    border: none !important;
    border-top: 1px solid #888888 !important;
    border-bottom: 1px solid #000000 !important;
    border-radius: 6px !important;
    padding: 10px 15px !important;
    margin-bottom: 1em !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* 3. サイドバーやカテゴリーの枠（ウィジェット） */
.menubox > .title,
.space-box > .title,
.newentry-title,
#pickupentry > .title {
  background: linear-gradient(to bottom, #777777 0%, #444444 50%, #111111 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: bold !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.menubox,
.space-box,
.categorylist {
  background: linear-gradient(180deg, #F2F2F2 0%, #E6E6E6 50%, #FFFFFF 100%) !important;
  padding: 15px !important;
  border-radius: 8px !important;
  border: 1px solid #CCCCCC !important;
  margin-bottom: 20px !important;
}

/* ==========================================
   エレガントテンプレートの花柄背景を削除するCSS
   ========================================== */
body, 
#wrap, 
#contents, 
#main, 
#sidebar {
  background-image: none !important;
}

/* ==========================================
   PC版：トップページ記事・ブログ一覧のメタリックブラック囲い
   ========================================== */
.bloglist .blog,
.blog {
  background: linear-gradient(180deg, #F2F2F2 0%, #E6E6E6 50%, #FFFFFF 100%) !important;
  border: 1px solid #CCCCCC !important;
  border-radius: 8px !important;
  padding: 15px !important;
  margin-bottom: 20px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.bloglist .blog-inner,
.blog-inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ==========================================
   PC版：トップページ記事一覧のサムネイルとタイトルの横並び
   ========================================== */
@media (min-width: 1025px) {
  .blog .blog-inner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  
  .blog .blog-thumb {
    flex-shrink: 0 !important;
    width: 220px !important;
    margin-bottom: 0 !important;
  }
  
  .blog .blog-body {
    flex-grow: 1 !important;
    width: auto !important;
  }
}

/* ==========================================
   PC版：背景の白固定
   ========================================== */
@media (min-width: 1025px) {
  body {
    background-image: none !important;
    background-color: #FFFFFF !important;
  }
  
  #contents,
  #wrap {
    background-color: #FFFFFF !important;
  }
}

/* ==========================================
   PC版：フッターのブロック（ダークブラック化）
   ========================================== */
@media (min-width: 1025px) {
  #footer {
    background: linear-gradient(to bottom, #333333 0%, #1a1a1a 100%) !important;
    border-top: 1px solid #444444 !important;
    border-bottom: 1px solid #111111 !important;
    padding: 20px 0 !important;
    color: #ffffff !important;
  }
  
  #footer .inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  
  #footer .inner > * {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    text-align: center !important;
    color: #cccccc !important;
  }
}

/* ==========================================
   PC用：SIRIUS iPhoneブラックテンプレート完全再現CSS（整理版）
   ========================================== */

/* 1. 最上部のサイト名ロゴ（PC用） */
#logo-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 1.5em 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

#logo {
  background: linear-gradient(to bottom, #777777 0%, #444444 50%, #111111 100%) !important;
  border: none !important;
  border-top: 1px solid #888888 !important;
  border-bottom: 1px solid #000000 !important;
  border-radius: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 15px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

#logo a, #logo span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  text-decoration: none !important;
}

/* 2. 記事タイトル・H2見出し */
.p-entry__title,
.entry-title,
#main h1,
.p-entry__body h2, 
.entry-content h2, 
h2 {
  background: linear-gradient(to bottom, #777777 0%, #444444 50%, #111111 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: bold !important;
  border: none !important;
  border-top: 1px solid #888888 !important;
  border-bottom: 1px solid #000000 !important;
  border-radius: 6px !important;
  padding: 10px 15px !important;
  margin-bottom: 1em !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* 3. サイドバーやカテゴリーの枠・見出し（ウィジェット） */
.menubox > .title,
.space-box > .title,
.newentry-title,
#pickupentry > .title,
.widget-area h2,
.widget-area h3,
.menubox h2,
.menubox h3,
#sidebar h2,
#sidebar h3 {
  background: linear-gradient(to bottom, #777777 0%, #444444 50%, #111111 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: bold !important;
  border-top: 1px solid #888888 !important;
  border-bottom: 1px solid #000000 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin-bottom: 0.8em !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.widget-area h2 a,
.widget-area h3 a,
.menubox h2 a,
.menubox h3 a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}

.menubox,
.space-box,
.categorylist {
  background: linear-gradient(180deg, #F2F2F2 0%, #E6E6E6 50%, #FFFFFF 100%) !important;
  padding: 15px !important;
  border-radius: 8px !important;
  border: 1px solid #CCCCCC !important;
  margin-bottom: 20px !important;
}

/* 4. エレガントテンプレートの花柄背景・余白の削除（白固定） */
body, 
#wrap, 
#contents, 
#main, 
#sidebar {
  background-image: none !important;
}

@media (min-width: 1025px) {
  body,
  #contents,
  #wrap {
    background-color: #FFFFFF !important;
  }
}

/* 5. PC版：トップページ記事・ブログ一覧のメタリックブラック囲い＆横並び */
.bloglist .blog,
.blog {
  background: linear-gradient(180deg, #F2F2F2 0%, #E6E6E6 50%, #FFFFFF 100%) !important;
  border: 1px solid #CCCCCC !important;
  border-radius: 8px !important;
  padding: 15px !important;
  margin-bottom: 20px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.bloglist .blog-inner,
.blog-inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

@media (min-width: 1025px) {
  .blog .blog-inner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  
  .blog .blog-thumb {
    flex-shrink: 0 !important;
    width: 220px !important;
    margin-bottom: 0 !important;
  }
  
  .blog .blog-body {
    flex-grow: 1 !important;
    width: auto !important;
  }
}

/* 6. PC版：フッターのブロック（ダークブラック化） */
@media (min-width: 1025px) {
  #footer {
    background: linear-gradient(to bottom, #333333 0%, #1a1a1a 100%) !important;
    border-top: 1px solid #444444 !important;
    border-bottom: 1px solid #111111 !important;
    padding: 20px 0 !important;
    color: #ffffff !important;
  }
  
  #footer .inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  
  #footer .inner > * {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    text-align: center !important;
    color: #cccccc !important;
  }
} /* ←ここでフッターのカッコを完全に閉じる */

/* ==========================================
   新着記事・カテゴリタイトルの文字色設定（一番下に独立させる）
   ========================================== */
.bloglist .blog-title a,
.blog .blog-title a,
.categorylist .article-title a {
    color: #008105 !important;
}

.bloglist .blog-title a:hover,
.blog .blog-title a:hover,
.categorylist .article-title a:hover {
    color: #005a03 !important;
}

/* カテゴリー一覧や記事一覧の日付を非表示にする */
.post-date,
.entry-date,
.date,
span.date,
time.entry-date {
    display: none !important;
}

/* トップページ（ブログエリア）の日付を強制表示 */
.blogarea time.date,
.bloglist time.date,
.blog-info time.date {
    display: inline-block !important;
    font-size: 11px !important;
    color: #888888 !important;
    margin-bottom: 4px !important;
}

/* ==========================================
   トップページ：記事本文の抜粋表示＆レイアウト調整
   ========================================== */
.blog .blog-desc,
.bloglist .blog-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;      /* 表示させる行数（3行） */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;          /* 枠からはみ出た文章を非表示 */
    
    font-size: 13px !important;            /* 文字のサイズ */
    color: #444444 !important;             /* 文字色 */
    line-height: 1.6 !important;           /* 行間 */
    margin-top: 8px !important;            /* タイトル・日付との間の幅 */
    margin-bottom: 8px !important;
}

/* 「Read More」ボタンの装飾・余白調整 */
.blog .blog-more,
.bloglist .blog-more {
    display: block !important;
    margin-top: 5px !important;
}

.blog .blog-more a,
.bloglist .blog-more a {
    font-size: 12px !important;
    color: #008105 !important;             /* リンク色（タイトルと同色） */
    text-decoration: underline !important;
}

/* ==========================================
   トップページ：Read Moreリンクを非表示にする設定
   ========================================== */
.blog .blog-more,
.bloglist .blog-more {
    display: none !important;
}

/* ==========================================
   トップページ：日付の文字色を抜粋文と同色に強制変更
   ========================================== */
.blogarea time,
.bloglist time,
.blog-info time,
.blogarea time *,
.bloglist time *,
.blog-info time * {
    color: #444444 !important; /* 抜粋文と同じダークグレー */
    opacity: 1 !important;     /* 透明度が設定されている場合の解除 */
}