@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){
  /*必要ならばここにコードを書く*/
}
<!--
副業FX勝ちログ — トップページテンプレート
内容：
 - 完全コピペで使えるHTML + CSS（GutenbergのカスタムHTMLや子テーマのテンプレートに貼る）
 - レスポンシブ対応（スマホ/タブレット/PC）
 - ダークブルー × ライトブルー カラーパレット採用
 - ロゴ案（SVG）を3案付属
 - 実装ワンポイント／Cocoonへの導入メモ付き

使い方のヒント：
 - WordPressで簡単に試すなら「固定ページ」を作成し、ブロックエディタの『カスタムHTML』に以下の<body>〜</body>内の内容を貼って公開→設定→表示設定で『固定ページ』をホームに設定してください。
 - 子テーマに組み込む場合は、このHTML構造をテンプレートに移して、動的な投稿ループに置き換えてください（コメントで目印を付けています）。
-->

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>副業FX勝ちログ</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
  /* ----------------
     カラーパレット
     - ダークブルー: #0B1F3A (主要背景/見出し)
     - ミディアムブルー: #1F3E6E
     - ライトブルー(アクセント): #3EA6FF (CTA/リンク)
     - アイスグレー(背景補助): #F6F9FC
     - ホワイト: #FFFFFF
     ----------------- */
  :root{
    --dark:#0B1F3A;
    --mid:#1F3E6E;
    --accent:#3EA6FF;
    --ice:#F6F9FC;
    --white:#FFFFFF;
    --card-radius:14px;
    --container-max:1100px;
    --gutter:20px;
    --font-sans: 'Noto Sans JP', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  }
  *{box-sizing:border-box}
  body{font-family:var(--font-sans);margin:0;background:var(--ice);color:var(--dark);line-height:1.65}
  a{color:var(--accent);text-decoration:none}
  img{max-width:100%;height:auto;display:block}

  /* Layout container */
  .wrap{max-width:var(--container-max);margin:0 auto;padding:30px 18px}

  /* Header */
  header.site-header{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
  .logo{display:flex;align-items:center;gap:12px}
  .logo .word{font-weight:700;color:var(--dark);font-size:18px}
  .logo small{display:block;font-weight:600;color:var(--mid);font-size:12px}
  nav.global-nav{display:flex;gap:14px;align-items:center}
  .nav-link{padding:8px 12px;border-radius:10px;font-weight:600}
  .nav-link:hover{background:rgba(62,166,255,0.1)}

  /* Hero */
  .hero{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:center;padding:36px;border-radius:18px;background:linear-gradient(180deg, rgba(11,31,58,0.07), rgba(31,62,110,0.03));box-shadow:0 6px 18px rgba(11,31,58,0.06)}
  .hero-left h1{font-size:28px;margin:0 0 12px;color:var(--dark);line-height:1.2}
  .hero-left p{margin:0 0 18px;color:var(--mid)}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
  .btn{display:inline-block;padding:12px 16px;border-radius:12px;font-weight:700}
  .btn-primary{background:linear-gradient(90deg,var(--accent),#68c7ff);color:var(--white);box-shadow:0 6px 18px rgba(62,166,255,0.18)}
  .btn-ghost{border:2px solid var(--mid);color:var(--mid);background:transparent}

  .hero-right{background:linear-gradient(135deg, rgba(62,166,255,0.06), rgba(31,62,110,0.03));padding:18px;border-radius:12px}
  .stat{display:flex;flex-direction:column;gap:8px}
  .stat .num{font-weight:700;color:var(--dark);font-size:20px}
  .stat small{color:var(--mid)}

  /* Cards section */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
  .card{background:var(--white);border-radius:var(--card-radius);overflow:hidden;box-shadow:0 8px 28px rgba(11,31,58,0.06);transition:transform .22s ease, box-shadow .22s ease}
  .card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(11,31,58,0.09)}
  .card .thumb{height:150px;object-fit:cover;background:linear-gradient(135deg,var(--mid),var(--accent))}
  .card .inner{padding:14px}
  .cat-badge{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;background:rgba(31,62,110,0.06);color:var(--mid)}
  .card h3{margin:10px 0 6px;font-size:16px}
  .card p{margin:0 0 10px;color:var(--mid);font-size:14px}

  /* Categories */
  .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
  .cat{background:linear-gradient(180deg, var(--white), #F8FBFF);padding:18px;border-radius:12px;text-align:center}
  .cat h4{margin:12px 0 6px}
  .cat p{margin:0;color:var(--mid)}

  /* Latest posts / grid */
  .posts{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:28px}
  .post-list{display:grid;gap:14px}
  .post-item{display:flex;gap:12px;padding:12px;border-radius:12px;background:var(--white);align-items:center}
  .post-item .meta{font-size:13px;color:var(--mid);min-width:110px}
  .post-item h4{margin:0;font-size:16px}

  /* Sidebar */
  .sidebar{display:flex;flex-direction:column;gap:12px}
  .card-small{padding:12px;border-radius:12px;background:var(--white)}

  /* Author */
  .author{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;background:var(--white);margin-top:28px}
  .author img{width:64px;height:64px;border-radius:50%;object-fit:cover}
  .author .meta small{display:block;color:var(--mid)}

  /* Footer */
  footer.site-footer{margin-top:38px;padding:26px 0;text-align:center;color:var(--mid);font-size:14px}

  /* Responsive */
  @media (max-width:1000px){
    .hero{grid-template-columns:1fr;}
    .cards{grid-template-columns:repeat(2,1fr)}
    .cats{grid-template-columns:repeat(2,1fr)}
    .posts{grid-template-columns:1fr}
  }
  @media (max-width:640px){
    .wrap{padding:18px}
    .cards{grid-template-columns:1fr}
    .cats{grid-template-columns:1fr}
    header.site-header{flex-direction:column;align-items:flex-start;gap:12px}
    nav.global-nav{order:2}
    .logo .word{font-size:16px}
    .hero-left h1{font-size:22px}
  }
  </style>
</head>
<body>
  <div class="wrap">
    <!-- Header -->
    <header class="site-header" role="banner">
      <div class="logo" aria-label="副業FX勝ちログロゴ">
        <!-- ロゴSVGは下に3案あり。ここは一時的に文字ロゴ -->
        <div style="display:flex;flex-direction:column;">
          <span class="word">副業FX勝ちログ</span>
          <small>凡人でも勝ち続けるトレード記録</small>
        </div>
      </div>
      <nav class="global-nav" role="navigation" aria-label="グローバルメニュー">
        <a class="nav-link" href="#">トレード戦略</a>
        <a class="nav-link" href="#">勝ちログ記録</a>
        <a class="nav-link" href="#">FX基礎</a>
        <a class="nav-link" href="#">プロフィール</a>
      </nav>
    </header>

    <!-- Hero -->
    <section class="hero" role="region" aria-label="サイト紹介">
      <div class="hero-left">
        <h1>副業FXで<strong>勝ち続ける</strong>ためのリアル記録</h1>
        <p>凡人でも再現できるトレード戦略・記録・メンタル管理を公開しています。まずは最新の勝ちログから。初心者向けの手順も分かりやすく解説。</p>
        <div class="hero-ctas">
          <a class="btn btn-primary" href="#">最新の勝ちログを見る</a>
          <a class="btn btn-ghost" href="#">トレード戦略を見る</a>
        </div>
      </div>
      <aside class="hero-right" aria-hidden="false">
        <div class="stat">
          <div class="num">実トレード公開中</div>
          <small>口座／手法／損益の詳細を逐次公開</small>
        </div>
        <div class="stat" style="margin-top:12px">
          <div class="num">初心者向けチェックリスト</div>
          <small>まずコレだけ押さえよう（5分で読める）</small>
        </div>
      </aside>
    </section>

    <!-- 注目記事 -->
    <section aria-label="注目コンテンツ">
      <h2 style="margin-top:28px">注目のコンテンツ</h2>
      <div class="cards">
        <article class="card">
          <div class="thumb" style="background-image:url('https://images.unsplash.com/photo-1559526324-593bc073d938?auto=format&fit=crop&w=1200&q=60');background-size:cover;background-position:center"></div>
          <div class="inner">
            <span class="cat-badge">トレード戦略</span>
            <h3>押し目買いのシンプルルール（実例つき）</h3>
            <p>再現性の高い押し目買いルール。エントリ〜利確までの手順を図解。</p>
          </div>
        </article>

        <article class="card">
          <div class="thumb" style="background-image:url('https://images.unsplash.com/photo-1559526324-953bc073d938?auto=format&fit=crop&w=1200&q=60');background-size:cover;background-position:center"></div>
          <div class="inner">
            <span class="cat-badge">勝ちログ記録</span>
            <h3>2025/10 実トレードまとめ（勝率72%）</h3>
            <p>実口座での月間成績と、勝率が上がった理由の解説。</p>
          </div>
        </article>

        <article class="card">
          <div class="thumb" style="background-image:url('https://images.unsplash.com/photo-1559526324-193bc073d938?auto=format&fit=crop&w=1200&q=60');background-size:cover;background-position:center"></div>
          <div class="inner">
            <span class="cat-badge">メンタル管理</span>
            <h3>メンタルブレイクを防ぐ5つの習慣</h3>
            <p>損失が出た時に冷静さを取り戻すための具体的ルーティン。</p>
          </div>
        </article>
      </div>
    </section>

    <!-- カテゴリ紹介 -->
    <section class="cats" aria-label="カテゴリ紹介">
      <div class="cat">
        <div style="font-size:28px">📈</div>
        <h4>トレード戦略</h4>
        <p>ロジックと例。初心者でも真似できる手順。</p>
      </div>
      <div class="cat">
        <div style="font-size:28px">📊</div>
        <h4>勝ちログ記録</h4>
        <p>実トレードのログと損益の解説。</p>
      </div>
      <div class="cat">
        <div style="font-size:28px">🎓</div>
        <h4>FX基礎</h4>
        <p>口座開設〜資金管理までわかりやすく。</p>
      </div>
    </section>

    <!-- 最新投稿とサイドバー -->
    <section class="posts" aria-label="最新記事とサイドバー">
      <div>
        <h3>最新の投稿</h3>
        <div class="post-list">
          <!-- ここはWordPressのループに差し替えてください -->
          <article class="post-item">
            <div class="meta">2025-11-01</div>
            <div>
              <h4>はじめてのドル円トレード記録</h4>
              <small style="color:var(--mid)">勝率／損益／反省点を公開</small>
            </div>
          </article>
          <article class="post-item">
            <div class="meta">2025-10-25</div>
            <div>
              <h4>スキャルピングの条件（ボラティリティの見方）</h4>
              <small style="color:var(--mid)">短期で稼ぐためのチェックリスト</small>
            </div>
          </article>
        </div>
      </div>

      <aside class="sidebar">
        <div class="card-small">
          <h4>人気記事</h4>
          <ul style="padding-left:18px;margin:8px 0 0 0;color:var(--mid)">
            <li><a href="#">勝ち続けるための資金管理</a></li>
            <li><a href="#">初心者が最初にやるべきこと</a></li>
          </ul>
        </div>

        <div class="card-small">
          <h4>ニュースレター</h4>
          <p style="margin:8px 0;color:var(--mid)">毎週の勝ちログと戦略ノートを配信（無料）</p>
          <a class="btn btn-primary" href="#">登録する</a>
        </div>
      </aside>
    </section>

    <!-- Author -->
    <section class="author" aria-label="運営者プロフィール">
      <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=400&q=60" alt="運営者画像">
      <div class="meta">
        <strong>yoshi（副業トレーダー）</strong>
        <small>兼業でトレードを継続。実トレードの記録と再現性のある戦略を公開。</small>
      </div>
    </section>

    <footer class="site-footer">
      <div>© 2025 副業FX勝ちログ</div>
      <div style="margin-top:6px">人気記事 | プロフィール | お問い合わせ</div>
    </footer>

    <!-- ロゴ案（SVG）: ページ内に埋めておくので好きなものをheaderに差し替えてください -->
    <div style="display:none">
    <!-- ロゴ案A: シンプル文字ロゴ（太字 + アンダーライン） -->
    <svg id="logoA" xmlns="http://www.w3.org/2000/svg" width="220" height="60" viewBox="0 0 220 60">
      <rect width="220" height="60" rx="10" fill="none" />
      <text x="12" y="36" font-family="Noto Sans JP" font-weight="700" font-size="18" fill="#0B1F3A">副業FX</text>
      <text x="12" y="52" font-family="Noto Sans JP" font-weight="600" font-size="12" fill="#1F3E6E">勝ちログ</text>
      <line x1="12" y1="38" x2="92" y2="38" stroke="#3EA6FF" stroke-width="3" stroke-linecap="round" opacity="0.9"/>
    </svg>

    <!-- ロゴ案B: シンボル + 文字（チャート上昇矢印をモチーフ） -->
    <svg id="logoB" xmlns="http://www.w3.org/2000/svg" width="260" height="64" viewBox="0 0 260 64">
      <g>
        <rect width="260" height="64" rx="12" fill="none" />
        <g transform="translate(8,6)">
          <polygon points="0,32 8,20 20,28 34,12 46,20 72,0 88,16 88,32" fill="#3EA6FF" opacity="0.95"></polygon>
          <text x="96" y="26" font-family="Noto Sans JP" font-weight="700" font-size="18" fill="#0B1F3A">副業FX勝ちログ</text>
        </g>
      </g>
    </svg>

    <!-- ロゴ案C: 高級感タイプ（縦ライン + ゴールド風アクセント） -->
    <svg id="logoC" xmlns="http://www.w3.org/2000/svg" width="260" height="64" viewBox="0 0 260 64">
      <g>
        <rect width="260" height="64" rx="12" fill="none" />
        <line x1="12" y1="10" x2="12" y2="54" stroke="#1F3E6E" stroke-width="6" stroke-linecap="round"/>
        <text x="32" y="34" font-family="Noto Sans JP" font-weight="700" font-size="18" fill="#0B1F3A">副業FX</text>
        <text x="32" y="50" font-family="Noto Sans JP" font-weight="600" font-size="12" fill="#1F3E6E">勝ちログ</text>
        <circle cx="220" cy="32" r="6" fill="#FFD67A" opacity="0.95"></circle>
      </g>
    </svg>
    </div>

    <!-- 実装メモ -->
    <!--
      - 記事カード・最新投稿部分はWPループに置き換えてください。
      - アイキャッチ画像は投稿のfeatured imageを入れる想定です。
      - カラーパレットは: --dark / --mid / --accent を子テーマで上書きできます。
      - パフォーマンス：画像は適切なサイズでアップロード、Lazy Loadを有効にしてください。
    -->

  </div>
</body>
</html>

## ▼ Step1: トップページのデザイン調整（余白・フォント・色味）
- ヒーローセクションの上下余白を増やして視覚的な余裕を確保。
- カード間のグリッドギャップを24px→32pxに拡大。
- フォントを見出しは太め、本文は読みやすいウェイトに統一。

## ▼ Step2: ロゴ案の追加 / 修正
- ロゴA：シンプルな波形ラインをFXチャートに見立てたミニマルロゴ。
- ロゴB：円形の中にローソク足を象徴したデザイン。
- ロゴC：副業 × FX を象徴する二重ライン＋上昇矢印。

## ▼ Step3: 記事ページ・カテゴリページの統一デザイン
- 記事ヘッダーのタイトル部に淡いブルー背景を統一追加。
- カテゴリページの投稿カードをトップページと統一して視覚的一貫性を確保。

## ▼ Step4: WordPress（Cocoon）での組み込みガイド
- Cocoon子テーマの style.css にカスタムCSSを貼り付ける手順を追加。
- 固定ページにHTMLブロックでトップページ構造を設置する方法を追加。

## ▼ Step5: その他追加改善ポイント
- モバイル版での見出しの余白最適化。
- SP表示時のカード2→1カラム切替のタイミングを調整。
- CTAボタンの押しやすさ向上（高さ48 → 56px）。
