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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ==============================
   FXナビノート 独自デザイン調整
   (Cocoon設定でスキン/配色を変更する場合は
    下記の --fxnavi-accent 系の色だけ合わせて変更すればOK)
   ============================== */
:root{
  --fxnavi-accent: #1d6fd6;
  --fxnavi-accent-dark: #14508f;
  --fxnavi-accent-bg: #eaf3fd;
}

/* 記事本文の大見出し(H2)にアクセントをつけて、メリハリのある印象にする */
.entry-content h2.wp-block-heading{
  border-left: 6px solid var(--fxnavi-accent);
  background: var(--fxnavi-accent-bg);
  padding: 10px 16px;
  border-radius: 4px;
  margin-top: 2.4em;
}

/* 「関連記事」リンクの引用ブロックを、目立つカード風に */
.entry-content blockquote.wp-block-quote{
  border-left: none;
  background: #fff9e6;
  border: 1px solid #f0dfa0;
  border-radius: 8px;
  padding: 14px 18px;
}
.entry-content blockquote.wp-block-quote p::before{
  content: "📌 ";
}

/* 比較表・基本情報テーブルを見やすく */
.entry-content table.has-fixed-layout thead th{
  background: var(--fxnavi-accent);
  color: #fff;
}
.entry-content table.has-fixed-layout tbody tr:nth-child(even){
  background: #f5f8fc;
}

/* アフィリエイトリンクのCTA(行動喚起)ボックス */
.fxnavi-cta-box{
  text-align: center;
  background: linear-gradient(135deg, #fff8e1, #fff3cd);
  border: 2px solid #ffca28;
  border-radius: 12px;
  padding: 24px 16px;
  margin: 1.5em 0;
}
.fxnavi-cta-box .fxnavi-pr-label{
  display: inline-block;
  font-size: 12px;
  color: #888;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 1px 8px;
  margin-bottom: 10px;
  background: #fff;
}
.fxnavi-cta-box .fxnavi-cta-banner{
  margin: 10px 0;
}
.fxnavi-cta-box .fxnavi-cta-banner img{
  max-width: 100%;
  height: auto;
}
.fxnavi-cta-btn{
  display: inline-block;
  margin-top: 12px;
  padding: 14px 36px;
  background: var(--fxnavi-accent);
  color: #fff !important;
  font-weight: bold;
  font-size: 16px;
  border-radius: 999px;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: transform .15s ease, background-color .15s ease;
}
.fxnavi-cta-btn:hover{
  transform: translateY(-2px);
  background: var(--fxnavi-accent-dark);
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  .entry-content h2.wp-block-heading{
    padding: 8px 12px;
  }
  .fxnavi-cta-btn{
    display: block;
    padding: 14px 10px;
  }
}

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

/* ==== FXナビノート 段階1: トップページのヘッダー調整 ====
   全画面のロゴ表示をやめ、トップページを開いた時点で記事が見えるようにする ==== */
.skin-grayish.front-top-page .container .header-container .header{
  height: auto !important;
  min-height: 0 !important;
  padding: 80px 0 4px !important;   /* 上のメニュー帯と重ならないよう余白を確保 */
}
.skin-grayish.front-top-page .skinadd-topmv-scroll{
  display: none !important;   /* 「Scroll」の表示は不要になるため非表示 */
}
.front-top-page .tagline{
  color: #4a5568 !important;
  font-size: 14px;
  margin-bottom: 10px;
}
.front-top-page .logo-header img{
  max-height: 76px;
  width: auto;
}
.front-top-page .content{
  margin-top: 0;
}
@media screen and (max-width: 480px){
  .skin-grayish.front-top-page .container .header-container .header{ padding-top: 64px !important; }
  .front-top-page .logo-header img{ max-height: 56px; }
  .front-top-page .tagline{ font-size: 12px; }
}

/* ==== FXナビノート 段階2: トップページの「はじめての方へ」案内 ==== */
.fxnavi-home{ margin: 0 0 24px; }
.fxnavi-home-title{
  border-left: 6px solid var(--fxnavi-accent);
  background: var(--fxnavi-accent-bg);
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 1.25em;
  margin: 0 0 12px;
}
.fxnavi-home-title-sub{ margin-top: 32px; }
.fxnavi-home-lead{ margin: 0 0 16px; }
.fxnavi-steps, .fxnavi-cats{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
.fxnavi-cats{ grid-template-columns: repeat(4, 1fr); }
.fxnavi-step{
  background: #fff;
  border: 1px solid #d5e3f5;
  border-top: 4px solid var(--fxnavi-accent);
  border-radius: 8px;
  padding: 14px 16px 12px;
}
.fxnavi-step-no{
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background: var(--fxnavi-accent);
  border-radius: 999px;
  padding: 1px 10px;
}
.fxnavi-step h3{ margin: 8px 0 4px; font-size: 1.05em; background: none; border: none; padding: 0; }
.fxnavi-step p{ margin: 0 0 6px; font-size: 13px; color: #555; }
.fxnavi-step ul{ margin: 0; padding-left: 0; list-style: none; font-size: 14px; }
.fxnavi-step li{ margin: 0; padding: 7px 0; border-bottom: 1px dotted #c9d8ec; }
.fxnavi-step li:last-child{ border-bottom: none; }
.fxnavi-step li a{ color: var(--fxnavi-accent-dark); text-decoration: none; }
.fxnavi-step li a::before{ content: "▶"; font-size: 10px; margin-right: 6px; color: var(--fxnavi-accent); }
.fxnavi-step li a:hover{ text-decoration: underline; }
a.fxnavi-cat{
  display: block;
  background: var(--fxnavi-accent-bg);
  border: 1px solid #d5e3f5;
  border-radius: 8px;
  padding: 12px 14px;
  text-decoration: none;
  color: #1a3c6e;
  transition: transform .15s ease;
}
a.fxnavi-cat:hover{ transform: translateY(-2px); }
a.fxnavi-cat strong{ display: block; font-size: 15px; margin-bottom: 4px; }
a.fxnavi-cat span{ display: block; font-size: 12px; color: #555; line-height: 1.5; }
@media screen and (max-width: 834px){
  .fxnavi-steps{ grid-template-columns: 1fr; }
  .fxnavi-cats{ grid-template-columns: repeat(2, 1fr); }
}

/* ==== FXナビノート 段階3: 比較記事・入口記事の広告ボタン(PR表記つき) ==== */
.fxnavi-pr-label{
  display: inline-block;
  font-size: 12px;
  color: #666;
  border: 1px solid #bbb;
  border-radius: 3px;
  padding: 1px 8px;
  background: #fff;
}
.fxnavi-cta-mini{
  text-align: center;
  margin: 1.2em 0 1.6em;
}
.fxnavi-cta-mini .fxnavi-cta-btn{
  margin-top: 8px;
  padding: 10px 24px;
  font-size: 15px;
}
.fxnavi-partner-box{
  background: #f7faff;
  border: 1px solid #d5e3f5;
  border-radius: 12px;
  padding: 18px 18px 14px;
  margin: 2em 0;
}
.fxnavi-partner-title{
  margin: 8px 0 12px;
  font-weight: bold;
  color: #1a3c6e;
}
.fxnavi-partner-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}
.fxnavi-partner-item{
  background: #fff;
  border: 1px solid #e1e9f5;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fxnavi-partner-name{
  font-weight: bold;
  font-size: 14px;
}
.fxnavi-partner-item .fxnavi-cta-btn{
  display: block;
  text-align: center;
  margin-top: 0;
  padding: 8px 10px;
  font-size: 13px;
  box-shadow: none;
}
.fxnavi-partner-note{
  margin: 12px 0 0;
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}
@media screen and (max-width: 480px){
  .fxnavi-partner-grid{ grid-template-columns: 1fr; }
}

/* ==== FXナビノート 段階3(記事ページ調整): 目次を短く、記事末尾に「次に読みたい記事」 ==== */
/* 目次: 大見出し(H2)だけを表示し、行間を詰める */
.toc .toc-list ol{ display: none; }
.toc .toc-content .toc-list > li{
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  line-height: 1.6 !important;
}
.skin-grayish .tnt-number .toc-list > li > a{
  padding: 0.25em 0.5em !important;   /* 項目内の上下の余白を詰める */
  line-height: 1.6 !important;
}
.toc .toc-content{ padding-top: 4px; padding-bottom: 8px; }
/* 記事末尾: 次に読みたい記事 */
.fxnavi-next{ margin: 2em 0 1em; }
.fxnavi-next-title{
  border-left: 6px solid var(--fxnavi-accent);
  background: var(--fxnavi-accent-bg);
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 1.1em;
  font-weight: bold;
  margin: 0 0 12px;
}
.fxnavi-next-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
a.fxnavi-next-card{
  display: block;
  background: #fff;
  border: 1px solid #d5e3f5;
  border-top: 4px solid var(--fxnavi-accent);
  border-radius: 8px;
  padding: 12px 14px;
  text-decoration: none;
  color: #1a3c6e;
  transition: transform .15s ease;
}
a.fxnavi-next-card:hover{ transform: translateY(-2px); }
a.fxnavi-next-card strong{ display: block; font-size: 15px; margin-bottom: 4px; }
a.fxnavi-next-card span{ display: block; font-size: 12px; color: #555; line-height: 1.5; }
@media screen and (max-width: 834px){
  .fxnavi-next-list{ grid-template-columns: 1fr; }
}