/*
  Skin Name: 法律答案製作所オリジナル
  Description: スキン自作の際にひな型となるスキンです。スタイルは何も入っていません。
  Author: のなめ
  Version: 1.0.2
  Priority: 9999000000
*/
/* 1. 背景のリセットとベースカラーの設定 */
body {
    background-image: none !important; /* 既存の方眼紙などの背景画像を強制オフ */
    background-color: #f5f8fa !important; /* ご指定の背景色 */
}

/* 2. 差し色（キーカラー）の設定 */
:root {
    --cocoon-key-color: #7ec9c1; /* 爽やかなブルーグリーン */
}

/* 3. コンテンツを白背景の「カード型」にして浮かび上がらせる */
.entry-card-wrap,  /* 記事一覧のカード */
.widget,           /* サイドバーの各項目 */
.article {         /* 記事本文のエリア */
    background-color: #ffffff !important;
    border: none !important; /* 既存の枠線を消す */
    border-radius: 8px !important; /* 角を少し丸くしてモダンに */
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important; /* うっすら上品な影をつける */
}
/* 3. サイトタイトルの文字を大きく・太くする */
.site-name-text, 
.logo-header {
    font-weight: 900 !important;   /* 最も太い設定[cite: 1] */
    font-size: 30px !important;    /* 文字サイズ（お好みで調整してください） */
    letter-spacing: 2px !important; /* 文字の間隔を少し広げて読みやすく */
}

/* 記事一覧カード間の余白調整 */
.entry-card-wrap {
    margin-bottom: 24px;
}

/* 4. 記事内の見出し(H2)をシンプルに */
.article h2 {
    background: transparent !important;
    border: none !important;
    border-left: 6px solid #7ec9c1 !important; /* 左側に差し色のライン */
    border-bottom: 1px solid #eaeaea !important; /* 下に薄い線を引く */
    padding: 10px 15px !important;
}
/* -------------------------------------------
 * 追加カスタマイズ：サイドバーと記事カード
 * ------------------------------------------- */

/* 1. サイドバーの見出し（Search, Categoriesなど） */
.sidebar h3,
.sidebar h4,
.widget-title,
.sidebar .widget_title {
    background-color: #7ec9c1 !important; /* 差し色：#7ec9c1 */
    color: #ffffff !important; /* 文字色：白 */
    font-weight: 800 !important;          /* 極太字[cite: 1] */
    padding: 10px 15px !important;
    border: none !important;
    border-radius: 4px !important;
    margin-bottom: 15px !important; /* 下のコンテンツとの隙間 */
    font-size: 16px !important; /* 文字サイズを適正に固定 */
    display: block !important; /* 確実に横いっぱいの背景色にする */
}
/* サイドバー内の「見出しブロック」も他の見出しと統一する */
.sidebar .wp-block-heading {
    background-color: #7ec9c1 !important; /* 差し色：#7ec9c1 */
    color: #ffffff !important; /* 文字色：白 */
    font-weight: 800 !important;          /* 極太字[cite: 1] */
    padding: 10px 15px !important;
    border-radius: 4px !important;
    margin-bottom: 15px !important;
    font-size: 16px !important;
    margin-top: 0 !important; /* 上の余白をリセットして位置を調整 */
}
/* 2. 記事一覧の各カードを差し色で囲う */
.entry-card-wrap {
    border: 2px solid #7ec9c1 !important; /* 差し色のラインで囲う（2pxの太さ） */
    box-shadow: none !important; /* ラインを目立たせるため、先ほどつけた影をオフにする */
    /* もし角を完全に四角（直角）にしたい場合は、以下の行の /* と */ を消して有効にしてください */
    /* border-radius: 0 !important; */
}
/* -------------------------------------------
 * ページネーション：高視認性＆高反応カスタマイズ
 * ------------------------------------------- */

/* ボタン共通設定 */
.pagination-next-link,
.pagination .page-numbers {
    background-color: #7ec9c1 !important; /* 差し色[cite: 1] */
    color: #ffffff !important;           /* 文字色：白[cite: 1] */
    border: none !important;
    border-radius: 8px !important;        /* 角丸[cite: 1] */
    font-weight: 800 !important;          /* 極太字[cite: 1] */
    transition: all 0.3s ease !important; /* 変化を滑らかに */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; /* 軽い影 */
}

/* 1. 【現在地】のデザインを明確に変える */
.pagination .current {
    background-color: #5ea8a0 !important; /* 差し色より一段暗い色にして「今ここ」を強調 */
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.2) !important; /* 押し込まれたような内影 */
    transform: translateY(1px); /* 少し沈ませる */
    cursor: default;
}

/* 2. 【ホバー時】のダイナミックな変化 */
.pagination-next-link:hover,
.pagination a.page-numbers:hover {
    background-color: #95d6ce !important; /* 少し明るい色に変化[cite: 1] */
    transform: translateY(-4px);         /* 4px上に浮かせる（分かりやすい変化） */
    box-shadow: 0 8px 15px rgba(126, 201, 193, 0.4) !important; /* 差し色の光を出す */
    opacity: 1 !important;               /* 透明度は下げずに色味で変化 */
    color: #ffffff !important;
}

/* 「次のページ」ボタンの文字サイズを少し大きく */
.pagination-next-link {
    font-size: 1.1em !important;
    padding: 18px !important;
}

/* リンク自体の色を白に固定 */
.pagination-next-link a,
.pagination a.page-numbers {
    color: #ffffff !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* -------------------------------------------
 * 追加カスタマイズ：コメント・モバイルメニュー・タイトル
 * ------------------------------------------- */

/* 1. 「コメントを書き込む」をページネーション風のボタンにする */
.comment-btn {
    background-color: #7ec9c1 !important; /* 差し色 */
    color: #ffffff !important;           /* 文字色：白[cite: 1] */
    border: none !important;
    border-radius: 8px !important;        /* 角丸[cite: 1] */
    font-weight: 800 !important;          /* 極太字[cite: 1] */
    padding: 20px !important;             /* ボタンに厚みを出す */
    font-size: 1.2em !important;
    box-shadow: 0 4px 15px rgba(126, 201, 193, 0.3) !important; /* 軽い光の影 */
    transition: all 0.3s ease !important;
}

/* コメントボタン：ホバー時の動き */
.comment-btn:hover {
    transform: translateY(-4px);         /* 上に浮かせる[cite: 1] */
    box-shadow: 0 8px 20px rgba(126, 201, 193, 0.5) !important;
    background-color: #95d6ce !important; /* 少し明るく[cite: 1] */
    color: #ffffff !important;
}

/* 2. モバイルフッターメニューの色変更（メニュー・ホーム等） */
.mobile-footer-menu-buttons {
    background-color: #ffffff !important; /* 背景は白でシンプルに */
    border-top: 1px solid #eaeaea !important;
}

/* アイコンと文字の色を差し色にする */
.mobile-footer-menu-buttons .menu-button {
    color: #7ec9c1 !important; /* アイコン・文字の色を差し色に[cite: 1] */
}

/* ホバー（タップ）した時の背景色を薄い差し色に */
.mobile-footer-menu-buttons .menu-button:hover {
    background-color: #f0f9f8 !important;
}
/* -------------------------------------------
 * モバイルフッター：ホームとトップの色を強制上書き
 * ------------------------------------------- */

/* 全てのフッターボタン（アイコンと文字）を差し色に固定 */
.mobile-footer-menu-buttons .menu-button,
.mobile-footer-menu-buttons .home-menu-button,
.mobile-footer-menu-buttons .top-menu-button {
    color: #7ec9c1 !important; /* 差し色 */
}

/* アイコン部分のみを確実に狙い撃ち */
.mobile-footer-menu-buttons .menu-button i,
.mobile-footer-menu-buttons .home-menu-button i,
.mobile-footer-menu-buttons .go-to-top-button i {
    color: #7ec9c1 !important; /* 差し色[cite: 1] */
}

/* 文字部分（キャプション）も確実に差し色に */
.mobile-footer-menu-buttons .menu-button .menu-button-caption {
    color: #7ec9c1 !important; /* 差し色[cite: 1] */
}
/* ホーム・トップボタンのアイコンと文字を差し色に変更 */
.home-menu-button .menu-button-in .menu-icon,
.home-menu-button .menu-button-in .menu-caption,
.top-menu-button .menu-button-in .menu-icon,
.top-menu-button .menu-button-in .menu-caption {
    color: #7ec9c1 !important; /* 差し色：#7ec9c1 */
}
/* -------------------------------------------
 * メインカラムとサイドバー全体を枠線で囲む
 * ------------------------------------------- */

/* メインカラム（記事が並ぶエリア）全体 */
#main {
    border: 1px solid #7ec9c1 !important; /* 差し色で細めの線 */
    background-color: #ffffff !important; /* 土台を白にしてカードと一体化させる場合 */
    padding: 20px !important;             /* 内側の余白 */
    border-radius: 12px !important;       /* 角丸 */
    margin-bottom: 30px !important;       /* 下との隙間 */
}

/* サイドバー全体 */
#sidebar {
    border: 1px solid #7ec9c1 !important; /* 差し色で細めの線 */
    background-color: #ffffff !important; /* 土台を白にする */
    padding: 20px !important;             /* 内側の余白 */
    border-radius: 12px !important;       /* 角丸 */
}
/* -------------------------------------------
 * 記事内：更新休止のお知らせボックス
 * ------------------------------------------- */
.info-notice-box {
    border: 2px solid #7ec9c1 !important;    /* 差し色 */
    background-color: #f0f9f8 !important;    /* ごく薄い差し色 */
    padding: 25px !important;
    border-radius: 12px !important;          /* 角丸 */
    margin: 30px 0 !important;
    position: relative;
}

/* 「お知らせ」の見出し */
.info-notice-box::before {
    content: "お知らせ";
    background-color: #7ec9c1 !important;    /* 差し色 */
    color: #ffffff !important;               /* 文字色：白 */
    font-weight: 800 !important;             /* 太字 */
    font-size: 0.9em;
    padding: 3px 15px;
    border-radius: 5px;
    position: absolute;
    top: -15px;
    left: 20px;
}

/* お知らせ内のテキスト */
.info-notice-box p {
    margin: 0 !important;
    font-weight: 800 !important;             /* 文字を太くして視認性を上げる */
    line-height: 1.8 !important;
    color: #333333;
}