@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* ====================================
   稼ぐためのシックデザイン・カスタマイズ
   Theme: 暮らしの最適化
   ==================================== */

/* 1. 全体の雰囲気をシャープに（角丸を排除） */
body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    border-radius: 0 !important; /* 全ての角丸を強制的に四角くする */
}

/* 2. 記事内の見出し（H2）: 高級感のあるダークバー */
.article-body h2 {
    background-color: #333333; /* キーカラーと同じ濃いグレー */
    color: #ffffff;
    padding: 15px 20px;
    border: none;
    border-left: 6px solid #b8b8b8; /* アクセントのシルバー */
    font-size: 22px;
    margin-bottom: 30px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* うっすら影で立体感 */
}

/* 3. 記事内の小見出し（H3）: シンプルな左線 */
.article-body h3 {
    border-bottom: 2px solid #333333; /* 下線 */
    border-left: none;
    padding: 10px 0;
    font-size: 20px;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* 4. ヘッダーメニューの補足（キャプション）を整える */
.global-nav .caption-wrap {
    font-size: 10px !important; /* 補足文字を小さく */
    opacity: 0.7; /* 少し透けさせて上品に */
    letter-spacing: 0.05em; /* 文字間隔を広げて読みやすく */
    margin-top: 2px;
}

/* 5. 目次のデザインをビジネスライクに */
.toc {
    border: 1px solid #dcdcdc; /* 薄いグレーの枠線 */
    background-color: #f9f9f9; /* 極薄いグレーの背景 */
    padding: 20px;
}
.toc-title {
    background: #333333; /* タイトル背景を黒に */
    color: #fff;
    display: inline-block;
    padding: 5px 15px;
    font-size: 14px;
}

/* 6. ボタン（CTA）を押しやすく、鋭く */
.btn-wrap a {
    background-color: #c0392b; /* 警告色ではなく、深みのある赤やオレンジ推奨 */
    /* ※色はCocoon設定のボタン色に従いますが、形を整えます */
    font-weight: bold;
    box-shadow: 0 3px 0 rgba(0,0,0,0.2); /* 押せる感を出す影 */
    transition: 0.3s;
}
.btn-wrap a:hover {
    transform: translateY(2px); /* ホバーで沈む */
    box-shadow: none;
}