/*
Theme Name: Engineer GO Child
Theme URI: https://engineer-go.net/
Template: swell
Description: エンジニアGO専用のSWELL子テーマ。SEO構造化データ、読みやすいタイポグラフィ、アフィリエイト用CTAボタン・ボックスを追加します。
Author: Engineer GO
Author URI: https://engineer-go.net/
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: engineer-go-child
*/

/* =========================================================
   1. タイポグラフィ最適化 (日本語向け読みやすさ向上)
   ========================================================= */
:root {
    --ego-text-color: #2b2b2b;
    --ego-link-color: #1a73e8;
    --ego-accent: #0a8bd8;
    --ego-cta-orange: #ff6b1a;
    --ego-cta-orange-dark: #e75100;
    --ego-rakuten: #bf0000;
    --ego-amazon: #ff9900;
    --ego-bg-soft: #f7f9fc;
    --ego-border: #e5e9f0;
}

body,
.l-container,
.p-postList__title,
.post_content {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
        "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic",
        "Yu Gothic Medium", "Meiryo", sans-serif;
    color: var(--ego-text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 本文の行間・字間を読みやすく */
.post_content {
    font-size: 17px;
    line-height: 1.95;
    letter-spacing: 0.04em;
    word-break: normal;
    overflow-wrap: anywhere;
}

.post_content p {
    margin: 1.4em 0;
}

/* 段落間の余白を広めに */
.post_content > p + p {
    margin-top: 1.6em;
}

/* 見出しのコントラスト改善 */
.post_content h2 {
    font-size: 1.55em;
    line-height: 1.5;
    margin: 2.5em 0 1em;
    padding: 0.6em 0.8em;
    border-left: 6px solid var(--ego-accent);
    background: linear-gradient(90deg, var(--ego-bg-soft), transparent 80%);
    border-bottom: 1px solid var(--ego-border);
    font-weight: 700;
}

.post_content h3 {
    font-size: 1.3em;
    line-height: 1.5;
    margin: 2em 0 0.8em;
    padding-left: 0.8em;
    border-left: 4px solid var(--ego-accent);
    font-weight: 700;
}

.post_content h4 {
    font-size: 1.12em;
    margin: 1.6em 0 0.6em;
    padding-bottom: 0.3em;
    border-bottom: 2px dashed var(--ego-border);
    font-weight: 700;
}

/* リンクの視認性 */
.post_content a:not(.ego-cta):not(.ego-btn) {
    color: var(--ego-link-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.post_content a:not(.ego-cta):not(.ego-btn):hover {
    color: var(--ego-cta-orange-dark);
    text-decoration-thickness: 2px;
}

/* リスト */
.post_content ul,
.post_content ol {
    padding-left: 1.6em;
    margin: 1.2em 0;
}
.post_content li {
    margin: 0.5em 0;
    line-height: 1.85;
}

/* 引用 */
.post_content blockquote {
    background: var(--ego-bg-soft);
    border-left: 4px solid var(--ego-accent);
    padding: 1em 1.4em;
    margin: 1.6em 0;
    border-radius: 4px;
    color: #555;
}

/* テーブルの可読性 */
.post_content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.4em 0;
}
.post_content th,
.post_content td {
    padding: 0.8em 1em;
    border: 1px solid var(--ego-border);
}
.post_content th {
    background: var(--ego-bg-soft);
    font-weight: 700;
}

/* =========================================================
   2. アフィリエイトCTAボタン
   ========================================================= */
.ego-cta-wrap {
    text-align: center;
    margin: 2em 0;
}

.ego-cta {
    display: inline-block;
    min-width: 280px;
    max-width: 100%;
    padding: 1em 2em;
    margin: 0.4em;
    font-size: 1.08em;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
    transition: all 0.18s ease-out;
    line-height: 1.4;
}

.ego-cta:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
    opacity: 0.95;
}

.ego-cta--orange {
    background: linear-gradient(180deg, #ff8a3d, var(--ego-cta-orange));
}
.ego-cta--rakuten {
    background: linear-gradient(180deg, #d72b2b, var(--ego-rakuten));
}
.ego-cta--amazon {
    background: linear-gradient(180deg, #ffb84d, var(--ego-amazon));
    color: #2b2b2b !important;
}
.ego-cta--blue {
    background: linear-gradient(180deg, #3aa0ff, var(--ego-accent));
}

.ego-cta__sub {
    display: block;
    font-size: 0.78em;
    font-weight: 500;
    opacity: 0.9;
    margin-top: 0.2em;
}

/* =========================================================
   3. アフィリエイト商品紹介ボックス
   ========================================================= */
.ego-product {
    border: 1px solid var(--ego-border);
    border-radius: 12px;
    padding: 1.4em;
    margin: 2em 0;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.ego-product__header {
    font-size: 0.85em;
    font-weight: 700;
    color: #fff;
    background: var(--ego-accent);
    display: inline-block;
    padding: 0.3em 1em;
    border-radius: 999px;
    margin-bottom: 0.8em;
}

.ego-product__inner {
    display: flex;
    gap: 1.4em;
    align-items: flex-start;
}

.ego-product__image {
    flex: 0 0 35%;
    max-width: 200px;
}

.ego-product__image img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--ego-border);
}

.ego-product__body {
    flex: 1 1 auto;
    min-width: 0;
}

.ego-product__title {
    font-size: 1.1em;
    font-weight: 700;
    margin: 0 0 0.5em;
    line-height: 1.4;
}

.ego-product__desc {
    font-size: 0.95em;
    color: #444;
    line-height: 1.7;
    margin-bottom: 0.8em;
}

.ego-product__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
}

.ego-product__buttons .ego-cta {
    min-width: auto;
    flex: 1 1 200px;
    padding: 0.85em 1em;
    font-size: 0.98em;
    margin: 0;
}

@media (max-width: 600px) {
    .ego-product__inner {
        flex-direction: column;
    }
    .ego-product__image {
        flex: 0 0 auto;
        max-width: 60%;
        margin: 0 auto;
    }
    .post_content {
        font-size: 16px;
        line-height: 1.9;
    }
    .post_content h2 {
        font-size: 1.35em;
    }
}

/* =========================================================
   4. 注意・ポイントボックス
   ========================================================= */
.ego-callout {
    padding: 1.2em 1.4em 1.2em 3.2em;
    margin: 1.8em 0;
    border-radius: 8px;
    position: relative;
    line-height: 1.8;
    border: 1px solid;
}
.ego-callout::before {
    position: absolute;
    left: 1em;
    top: 1.1em;
    font-weight: 700;
    font-size: 1.15em;
}
.ego-callout--point {
    background: #eef7ff;
    border-color: #c8e2ff;
    color: #0d4f8c;
}
.ego-callout--point::before { content: "💡"; }

.ego-callout--note {
    background: #fff8e6;
    border-color: #ffe2a8;
    color: #7a5500;
}
.ego-callout--note::before { content: "📝"; }

.ego-callout--warn {
    background: #ffeded;
    border-color: #ffc4c4;
    color: #9b1c1c;
}
.ego-callout--warn::before { content: "⚠️"; }

/* =========================================================
   5. パンくず・本文幅の最適化
   ========================================================= */
@media (min-width: 960px) {
    .l-mainContent .post_content {
        max-width: 740px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* PR表記 (ステマ規制対応) */
.ego-pr-label {
    display: inline-block;
    font-size: 0.75em;
    color: #888;
    background: #f0f0f0;
    padding: 0.15em 0.6em;
    border-radius: 3px;
    margin-bottom: 0.6em;
    letter-spacing: 0.05em;
}