@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.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}



/* --- Google Fonts の読み込み (Noto Serif JP) --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

/* --- 全体のトーン＆タイポグラフィ --- */
body {
    background-color: #fdfdfd; /* 真っ白ではない、目に優しい紙の色 */
    color: #2c3e50; /* 知的な印象を与えるネイビーグレー */
    font-family: 'Noto Serif JP', "游明朝", "YuMincho", "Hiragino Mincho ProN", serif;
    line-height: 2.0; /* 思考を促すゆったりとした行間 */
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
}

/* --- サイトタイトル（ロゴ） --- */
.site-name-text a {
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #1a1a1a;
    text-transform: uppercase;
}

.site-description {
    font-size: 0.8em;
    color: #999;
    letter-spacing: 0.3em;
    margin-top: 10px;
}

/* --- 見出し：人生を区切る「編集線」 --- */
.article h2 {
    border: none;
    text-align: center;
    padding: 1.5em 0;
    margin: 3em 0 1.5em;
    font-size: 1.6em;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    letter-spacing: 0.15em;
}

.article h3 {
    border: none;
    font-size: 1.3em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid #e67e22; /* アクセントの琥珀色 */
    display: inline-block;
    margin: 2em 0 1em;
}

/* --- 記事一覧カード：カタログ的な洗練 --- */
.entry-card-wrap {
    border: none !important;
    background-color: transparent !important;
    transition: 0.3s;
}

.entry-card-wrap:hover {
    opacity: 0.7;
}

.entry-card-title {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 1.1em;
    line-height: 1.5;
    margin-top: 15px;
}

/* --- ボタン・CTA：洗練された選択 --- */
.btn-wrap a {
    background-color: #1a1a1a !important;
    border-radius: 0 !important;
    padding: 18px 40px !important;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* --- 執筆を助ける拡張クラス --- */

/* 1. プロの視点：Editor's Note */
.le-note {
    background-color: #f7f7f7;
    border-left: 4px solid #1a1a1a;
    padding: 2em;
    margin: 2em 0;
    font-size: 0.95em;
    position: relative;
}
.le-note::before {
    content: "EDITOR'S NOTE";
    display: block;
    font-size: 0.7em;
    letter-spacing: 0.2em;
    margin-bottom: 1em;
    color: #999;
}

/* 2. 誠実な比較：メリット・デメリット（二段組） */
.le-comparison {
    display: flex;
    gap: 20px;
    margin: 2em 0;
}
.le-pros, .le-cons {
    flex: 1;
    padding: 1.5em;
    background: #fff;
    border: 1px solid #eee;
}
.le-pros h4, .le-cons h4 {
    font-size: 0.9em;
    margin-top: 0;
    text-align: center;
}
.le-pros h4 { color: #e67e22; } /* 琥珀色でポジティブを強調 */

/* 3. 究極の1行：マイクロコピー */
.le-micro-copy {
    display: block;
    text-align: center;
    font-size: 0.8em;
    color: #e67e22;
    margin-bottom: 5px;
    font-weight: bold;
}

/* 4. モバイル対応の調整 */
@media screen and (max-width: 768px) {
    .article h2 {
        font-size: 1.3em;
        padding: 1em 0;
    }
    .le-comparison {
        flex-direction: column;
    }
}



<section class="article">
    <p>AIが全ての会話を書き起こしてくれる時代。しかし、記録の「量」が、必ずしも「真実」を照らすわけではありません。</p>

    <div class="le-master-quote">
        <p>「記録とは、過去を保存することではない。未来の自分に『真実』を報告するための捜査報告書である。」</p>
        <cite>濱尾 四郎（『知的生活の技術』より）</cite>
    </div>

    <p>濱尾が説いた、情報を「審問」する姿勢。このAIレコーダーは、単なる録音機ではなく、私たちの代わりに証言を集める「21世紀の捜査官」なのです。</p>
</section>



<div class="le-product-card">
    <div class="le-product-label">RECOMMEND</div>
    
    <div class="le-product-image">
        <img src="[商品画像URL]" alt="商品名">
    </div>
    
    <div class="le-product-info">
        <span class="le-product-title">ここに商品名（知的な響きを添えて）</span>
        <p class="le-product-desc">なぜこの道具が、あなたの人生を編集するのか。その理由を1行で。</p>
        
        <div class="btn-wrap">
            <a href="[アフィリエイトURL]" target="_blank" rel="nofollow noopener">
                この道具を詳しく見る
            </a>
        </div>
        
        <span class="le-ad-notice">※本リンクは広告（アフィリエイト）を含みます</span>
    </div>
</div>





