@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ (Epoc-One Optimized)
Template:   cocoon-master
Version:    1.3.0
*/

/*******************************************************
** 1. Global Settings & WordPress Overrides
*******************************************************/

/* 基本フォント・カラー設定 */
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #000; /* 文字色は完全な黒で視認性重視 */
    line-height: 1.7;
}

/* 【重要】WordPress標準タイトルの非表示 */
/* 自前でデザインされたタイトル(H1)を使うため、重複を防ぐ */
.entry-title {
    display: none;
}

/*******************************************************
** 2. Epoc-One Report Styles (資産運用レポート用)
*******************************************************/

/* レポート全体のコンテナ */
.epoc-report-container {
    background: #fff;
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-top: -30px; /* Cocoonの隙間調整 */
    border: 1px solid #ddd;
}

/* 見出しデザイン */
.epoc-section-title {
    margin-top: 50px;
    font-size: 1.4em;
    font-weight: 700;
    color: #000;
    border-left: 6px solid #2c3e50;
    padding-left: 15px;
    margin-bottom: 25px;
    background: linear-gradient(to right, #f5f5f5, #fff);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0 8px 8px 0;
}

/* キャラクターカラー定義 */
.girl-color { border-color: #ff69b4 !important; color: #d63384; }
.boy-color { border-color: #3498db !important; color: #0d6efd; }

/* 内部H4 (小見出し) */
.epoc-report-container h4 {
    margin: 35px 0 15px 0;
    color: #000;
    font-size: 1.1em;
    font-weight: bold;
    display: flex;
    align-items: center;
    border: none;
    padding: 0;
}
.epoc-report-container h4::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
    margin-right: 10px;
}

/* KPIカード (資産サマリー) */
.summary-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 20px;
    flex-wrap: wrap;
}
.epoc-card {
    background: #fff;
    border: 1px solid #bbb;
    padding: 25px;
    flex: 1;
    min-width: 280px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.big-num {
    font-size: 2.2em;
    font-weight: 700;
    margin: 15px 0;
    color: #000;
    letter-spacing: -0.5px;
    font-family: 'Roboto', sans-serif;
}
.win { color: #27ae60; font-weight: bold; background: #eafaf1; padding: 2px 8px; border-radius: 4px; }
.lose { color: #c0392b; font-weight: bold; background: #fdedec; padding: 2px 8px; border-radius: 4px; }
.sub-text { font-size: 0.95em; color: #000; margin-top: 8px; font-weight: bold; }

/* 会話エリア (Talk) */
.talk-container {
    background: #f0f0f0;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 40px;
}
.talk-box {
    margin-bottom: 20px;
    padding: 18px 20px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid #ccc;
    border-left-width: 5px;
    border-left-style: solid;
}

/* キャラ別スタイル */
.talk-girl { border-left-color: #ff69b4; }
.talk-boy { border-left-color: #3498db; }
/* スノウ (白背景・黒文字・グレー枠) */
.talk-robot { 
    border-left-color: #7f8c8d; 
    background-color: #fff; 
    color: #000; 
}
/* ↓ フォント指定を削除して統一 */
.talk-robot .content {
    /* font-family: "Courier New", monospace, serif; を削除 */
    /* font-size: 0.95em; を削除（サイズも統一する場合） */
    letter-spacing: 0.02em; /* 文字間隔だけ少しロボットっぽく残してもOK */
}

/* アイコン画像 (Cocoonスタイル強制排除) */
.face-icon {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    margin-right: 20px;
    flex-shrink: 0;
    object-fit: contain;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
}
.content { flex: 1; font-size: 1.0em; margin-top: 2px; color: #000; }

/* Insight Box (分析) */
.insight-box {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #bbb;
    border-left-width: 5px;
    border-left-style: solid;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.epoc-tag {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: bold;
    margin-right: 6px;
    margin-bottom: 6px;
    border: 1px solid #bdc3c7;
    background: #fff;
    color: #000;
}
.tag-boy { background: #f0f8ff; color: #0d6efd; border-color: #b3d7ff; }

/* テーブル */
.table-wrapper {
    overflow-x: auto;
    margin-bottom: 30px;
    border: 1px solid #bbb;
    border-radius: 8px;
}
.epoc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    white-space: nowrap;
}
.epoc-table th {
    background: #eee;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
    padding: 12px 15px;
    border-bottom: 2px solid #ccc;
}
.epoc-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
    color: #000;
}
/* 損益による行の背景色分け */
.epoc-table tr.profit-plus { background-color: #fdf2f2; } /* 薄い赤 */
.epoc-table tr.profit-minus { background-color: #f0f8ff; } /* 薄い青 */

.num { text-align: right; font-family: 'Roboto', sans-serif; }
.plus { color: #e74c3c; font-weight: bold; }
.minus { color: #3498db; font-weight: bold; }

/* バッジ */
.epoc-badge {
    display: inline-block; padding: 4px 8px; border-radius: 4px;
    font-size: 0.75em; color: #fff; font-weight: bold; text-align: center;
    min-width: 50px;
}
.bg-buy { background-color: #e74c3c; } 
.bg-sell { background-color: #3498db; }

/* チャート */
.chart-box {
    border: 1px solid #bbb;
    padding: 20px;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.main-chart-box {
    height: 400px; position: relative;
    margin-bottom: 40px;
    border: 1px solid #bbb;
    border-radius: 12px;
    padding: 15px;
    background: #fff;
}

/* フッター */
.epoc-footer {
    margin-top: 60px;
    text-align: center;
    color: #000;
    font-weight: normal;
    font-size: 0.9em;
    border-top: 2px solid #eee;
    padding-top: 30px;
}

/*******************************************************
** 3. Fluxfolio Static Pages (固定ページ共通設定)
** 対象: About, Contact, Developer, Privacy Policy
*******************************************************/

/* 共通コンテナ */
.flux-static-container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 40px 50px;
    border-radius: 12px;
    border: 1px solid #ddd;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    color: #333;
}

/* ページタイトル (自前H1) */
.flux-page-title {
    text-align: center;
    /* font-size: 1.8rem;  ←以前の大きいサイズ */
    font-size: 1.4rem;  /* ←【今回修正】ここを 1.4rem (約22px) に小さくしました */
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
    letter-spacing: 0.05em;
    line-height: 1.4;   /* ←【今回追加】行間もここで指定します */
}

/* 見出し (H2) - デザイン調整版 */
.flux-static-container h2 {
    font-size: 1.3rem;
    color: #21759b; /* 文字色をサイトキーカラーに変更 */
    background-color: #f4f9fc; /* 薄い青色の背景を追加 */
    border-left: 6px solid #21759b; /* 左線もキーカラーに変更 */
    padding: 10px 15px; /* 余白を少し広げて読みやすく */
    margin: 40px 0 20px;
    line-height: 1.4;
    border-radius: 0 4px 4px 0; /* 右端を少し丸くするデザイン */
}

/* 見出し (H3) - 上下実線デザイン */
.flux-static-container h3 {
    font-size: 1.2rem;             /* 文字サイズを少し大きく */
    color: #333;
    border-top: 1px solid #ccc;    /* 上線：実線(solid) */
    border-bottom: 1px solid #ccc; /* 下線：実線(solid) */
    padding: 12px 10px;            /* 線の内側の余白 */
    margin: 40px 0 20px;           /* 外側の余白 */
    background: transparent;       /* 背景は透明 */
}

/* 本文テキスト */
.flux-static-container p {
    margin-bottom: 1.5em;
    line-height: 1.8;
    font-size: 16px;
}

/* ①このサイトについて (About) 専用 */
.flux-concept-box {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 40px;
}
.flux-concept-lead {
    font-size: 1.1em;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 15px;
}
.flux-char-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.flux-char-card {
    flex: 1;
    min-width: 200px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.flux-char-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 10px;
}
.flux-char-name {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #2c3e50;
}
.flux-char-role {
    display: block;
    font-size: 0.85em;
    color: #7f8c8d;
}

/* ③開発者プロフィール (Developer) 専用 */
.flux-dev-profile {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
}
.flux-dev-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #eee;
}
.flux-dev-info { flex: 1; }
.flux-skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.flux-skill-tag {
    background: #eef2f5;
    color: #555;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
}

/*******************************************************
** 4. Contact Form Styles (お問い合わせフォーム)
*******************************************************/
.epoc-contact-form {
    /* flux-static-container 内で使う場合は枠線なしでOK */
    max-width: 100%; 
    margin: 0 auto;
}

.epoc-form-group { margin-bottom: 20px; }

.epoc-form-label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}
.epoc-form-label .required {
    color: #e74c3c;
    font-size: 0.8em;
    margin-left: 5px;
    vertical-align: text-top;
}

.epoc-form-input, 
.epoc-form-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: inherit;
}
.epoc-form-input:focus, 
.epoc-form-textarea:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}
.epoc-form-textarea {
    resize: vertical;
    min-height: 150px;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
.char-counter {
    font-size: 0.85em;
    color: #666;
}

.epoc-btn-submit {
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 12px 40px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.epoc-btn-submit:hover { background-color: #2980b9; }
.epoc-btn-submit:disabled { background-color: #bdc3c7; cursor: not-allowed; }

/* メッセージ表示エリア */
.contact-result { margin-top: 20px; text-align: center; }
.contact-success {
    color: #27ae60;
    font-weight: bold;
    padding: 15px;
    background: #eafaf1;
    border-radius: 4px;
}
.contact-error {
    color: #c0392b;
    font-weight: bold;
    padding: 15px;
    background: #fdedec;
    border-radius: 4px;
}
.contact-loading {
    display: none;
    color: #3498db;
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
}

/* スマホ対応 (共通) */
@media screen and (max-width: 480px){
    .epoc-report-container { padding: 20px 15px; }
    .summary-box { flex-direction: column; }
    .epoc-card { width: 100%; margin-bottom: 15px; box-sizing: border-box; }
    .main-chart-box { height: 300px; }
    
    .face-icon {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        margin-right: 15px;
    }
    .talk-box { padding: 15px; }
    .content { font-size: 0.95em; }
    
    /* 固定ページ用 */
    .flux-static-container { padding: 30px 20px; }
    .flux-dev-profile { flex-direction: column; text-align: center; }
}
/* --- ヘッダー：ロゴ画像＋文字の横並びカスタマイズ --- */

/* 1. サイトタイトルをフレックスボックス化（横並び・中央揃え） */
.logo-header a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 15px; /* 画像と文字の間隔 */
}

/* 2. 3人のイラストを「疑似要素」として左側に追加 */
.logo-header a::before {
    content: "";
    display: block;
    /* 画像のサイズ調整 */
    width: 60px;
    height: 60px;
    /* 画像の読み込み */
    background-image: url('https://fluxfolio.jp/wp-content/uploads/2025/12/epoc-one-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0; /* 画像が潰れないようにする */
}

/* 3. スマホ表示時の調整 */
@media screen and (max-width: 480px) {
    .logo-header a {
        font-size: 16px; /* タイトルが長いので文字を小さく */
        gap: 10px;
        line-height: 1.4;
    }
    .logo-header a::before {
        width: 40px; /* スマホではアイコンも少し小さく */
        height: 40px;
    }
}

/* フッター新着記事の行間調整 (PC/スマホ共通) */
.footer-widgets .new-entry-card-title,
.mobile-footer-widgets .new-entry-card-title {
    line-height: 1.6;  /* 行間を広げる */
    padding-bottom: 5px;
}