@charset "UTF-8";
/*
Theme Name: AFFINGER Child
Theme URI: https://credit.mofutech.jp
Description: AFFINGER子テーマ - クレカ・ポイント・キャッシュレスブログ向けカスタマイズ
Author: mofutech
Author URI: https://credit.mofutech.jp
Template: affinger
Version: 1.0.0
Tags: custom-colors, custom-fonts
Text Domain: affinger-child
*/

/* ============================================================
   CSS カスタムプロパティ（変数）
   ============================================================ */
:root {
  --color-main:    #2196F3;   /* メインカラー：明るいブルー */
  --color-main-dark:   #1976D2;
  --color-main-light:  #BBDEFB;
  --color-accent:  #FF9800;   /* アクセントカラー：オレンジ */
  --color-accent-dark: #F57C00;
  --color-text:    #333333;
  --color-text-light: #666666;
  --color-bg:      #F5F7FA;
  --color-white:   #FFFFFF;
  --color-border:  #E0E0E0;
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  --radius:    8px;
  --shadow:    0 2px 8px rgba(0,0,0,0.10);
}

/* ============================================================
   Google Fonts インポート（Noto Sans JP）
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ============================================================
   基本フォント・本文
   ※ アイコンフォント（.st-fa, .fa等）は除外して文字化けを防ぐ
   ============================================================ */
body {
  font-family: var(--font-base);
  background-color: var(--color-bg);
  line-height: 1.8;
  color: var(--color-text);
}

/* テキスト要素のみフォント指定（アイコン系クラスは除外） */
body p,
body a,
body span:not([class*="st-fa"]):not([class*="st-svg"]):not([class*="fa-"]):not([class*="icon"]),
body div,
body li,
body h1, body h2, body h3, body h4, body h5, body h6,
body th, body td,
body label,
body input,
body textarea,
body button,
body small {
  font-family: var(--font-base);
}

/* ============================================================
   リンク
   ============================================================ */
a {
  color: var(--color-main);
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  color: var(--color-main-dark);
  opacity: 0.85;
  text-decoration: none;
}

/* ============================================================
   ヘッダー
   ============================================================ */
#header,
.st-header-outer {
  background-color: var(--color-white) !important;
  border-bottom: 3px solid var(--color-main) !important;
  box-shadow: var(--shadow);
}

/* サイトタイトル */
#header .site-name-text,
#header .logo-text,
.st-logo-text {
  color: var(--color-main) !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
}

/* ナビゲーション */
#nav ul li a,
#nav .menu > li > a,
.st-gnav-outer nav ul li a {
  color: var(--color-text) !important;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 8px 16px;
  transition: color 0.2s ease;
}

#nav ul li a:hover,
#nav .menu > li > a:hover,
.st-gnav-outer nav ul li a:hover {
  color: var(--color-main) !important;
}

/* アクティブメニュー */
#nav ul li.current-menu-item > a,
#nav ul li.current_page_item > a {
  color: var(--color-main) !important;
  border-bottom: 2px solid var(--color-main);
}

/* ============================================================
   ヒーローセクション（トップページ用）
   ============================================================ */
.hero-section {
  background: linear-gradient(135deg, var(--color-main) 0%, #1976D2 60%, #0D47A1 100%);
  color: var(--color-white);
  text-align: center;
  padding: 72px 24px 80px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  pointer-events: none;
}

.hero-section h1,
.hero-section .hero-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--color-white) !important;
  margin-bottom: 16px;
  line-height: 1.4;
  text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.hero-section .hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.90);
  margin-bottom: 28px;
}

.hero-section .hero-btn {
  display: inline-block;
  background-color: var(--color-accent);
  color: var(--color-white) !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 36px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(255,152,0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-section .hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255,152,0,0.5);
}

/* ============================================================
   メインコンテンツエリア
   ============================================================ */
#contents,
.st-contents-outer {
  background-color: var(--color-bg);
}

/* ============================================================
   記事カード・投稿リスト
   ============================================================ */
.st-card-outer,
article.post,
.st-post-list li {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.st-card-outer:hover,
article.post:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.13);
}

/* 記事タイトル */
.st-card-outer .st-card-title,
article.post .entry-title,
h2.entry-title a {
  color: var(--color-text) !important;
  font-weight: 700;
}

.st-card-outer .st-card-title:hover,
article.post .entry-title a:hover,
h2.entry-title a:hover {
  color: var(--color-main) !important;
}

/* ============================================================
   見出し（h1〜h4）
   ============================================================ */
.entry-content h2 {
  background: linear-gradient(90deg, var(--color-main) 4px, var(--color-main-light) 4px);
  padding: 10px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-text) !important;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
}

.entry-content h3 {
  border-left: 4px solid var(--color-accent);
  padding-left: 12px;
  color: var(--color-text) !important;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.5rem 0 0.8rem;
}

.entry-content h4 {
  color: var(--color-main) !important;
  font-size: 1rem;
  font-weight: 700;
  margin: 1.2rem 0 0.6rem;
}

/* ============================================================
   ボタン
   ============================================================ */
.btn,
.st-btn,
input[type="submit"],
button[type="submit"] {
  background-color: var(--color-main) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.btn:hover,
.st-btn:hover,
input[type="submit"]:hover {
  background-color: var(--color-main-dark) !important;
  transform: translateY(-1px);
}

/* アクセントボタン */
.btn-accent,
.st-btn-accent {
  background-color: var(--color-accent) !important;
}

.btn-accent:hover,
.st-btn-accent:hover {
  background-color: var(--color-accent-dark) !important;
}

/* ============================================================
   サイドバー
   ============================================================ */
#sidebar,
.st-sidebar-outer {
  background-color: transparent;
}

/* ウィジェット共通 */
#sidebar .widget,
.st-sidebar .widget {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  overflow: hidden;
}

/* ウィジェットタイトル */
#sidebar .widget-title,
#sidebar .widgettitle,
.st-sidebar .widget-title,
.st-sidebar .widgettitle {
  background: linear-gradient(90deg, var(--color-main), var(--color-main-dark));
  color: var(--color-white) !important;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 16px;
  margin: 0;
  border-radius: 0;
}

/* ウィジェット内コンテンツ */
#sidebar .widget ul,
.st-sidebar .widget ul {
  padding: 12px 16px;
  list-style: none;
}

#sidebar .widget ul li,
.st-sidebar .widget ul li {
  border-bottom: 1px solid var(--color-border);
  padding: 8px 0;
  font-size: 0.9rem;
}

#sidebar .widget ul li:last-child,
.st-sidebar .widget ul li:last-child {
  border-bottom: none;
}

#sidebar .widget ul li a,
.st-sidebar .widget ul li a {
  color: var(--color-text) !important;
}

#sidebar .widget ul li a:hover,
.st-sidebar .widget ul li a:hover {
  color: var(--color-main) !important;
}

/* プロフィールウィジェット */
.widget-profile,
.st-author-box {
  text-align: center;
  padding: 20px 16px;
}

.widget-profile img,
.st-author-box img {
  border-radius: 50%;
  border: 3px solid var(--color-main);
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-bottom: 10px;
}

/* ============================================================
   カテゴリーラベル・タグ
   ============================================================ */
.cat-label,
.st-cat-badge,
.cat-name {
  background-color: var(--color-main) !important;
  color: var(--color-white) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
}

.tag-label,
.st-tag-badge {
  background-color: var(--color-main-light) !important;
  color: var(--color-main-dark) !important;
  font-size: 0.75rem !important;
  padding: 2px 8px !important;
  border-radius: 50px !important;
}

/* ============================================================
   フッター
   ============================================================ */
#footer,
.st-footer-outer {
  background-color: #1A2A3A !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 40px 24px 20px !important;
  margin-top: 48px;
}

#footer a,
.st-footer-outer a {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

#footer a:hover,
.st-footer-outer a:hover {
  color: var(--color-accent) !important;
}

/* フッターナビ */
#footer-nav ul,
.st-footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  justify-content: center;
}

#footer-nav ul li a,
.st-footer-nav ul li a {
  font-size: 0.875rem;
}

/* コピーライト */
#footer .copyright,
.st-footer-outer small {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.8rem;
  text-align: center;
  display: block;
  margin-top: 20px;
}

/* ============================================================
   パンくずリスト
   ============================================================ */
.breadcrumb,
#breadcrumb {
  font-size: 0.8rem;
  padding: 8px 0;
  color: var(--color-text-light);
}

.breadcrumb a,
#breadcrumb a {
  color: var(--color-main) !important;
}

/* ============================================================
   ページネーション
   ============================================================ */
.page-numbers {
  border: 2px solid var(--color-main) !important;
  color: var(--color-main) !important;
  border-radius: var(--radius) !important;
  padding: 6px 14px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.page-numbers.current,
.page-numbers:hover {
  background-color: var(--color-main) !important;
  color: var(--color-white) !important;
}

/* ============================================================
   テーブル
   ============================================================ */
.entry-content table {
  border-collapse: collapse;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.entry-content table th {
  background-color: var(--color-main) !important;
  color: var(--color-white) !important;
  padding: 10px 14px;
  font-weight: 700;
  text-align: left;
}

.entry-content table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}

.entry-content table tr:nth-child(even) td {
  background-color: #F0F7FF;
}

/* ============================================================
   モバイル対応
   ============================================================ */
@media screen and (max-width: 768px) {
  .hero-section {
    padding: 48px 16px 56px;
  }

  .hero-section h1,
  .hero-section .hero-title {
    font-size: 1.5rem;
  }

  #sidebar .widget,
  .st-sidebar .widget {
    margin-bottom: 16px;
  }
}