@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){
  /*必要ならばここにコードを書く*/
}

/* === やさしくクリプト デザイン（ライト・カード型） === */
:root{
  --yc-sky:#55bfe8;
  --yc-sky-d:#1b8fc9;
  --yc-sky-l:#e8f6fc;
  --yc-ink:#333;
  --yc-line:#e6e6e6;
  --yc-marker:#fff070;
}

body{ background:#f1f1f1; }
.article p{ line-height:1.85; }

/* --- カード化：本文・サイドバー・カード --- */
.main, .sidebar .widget, .entry-card, .related-entry-card, .author-box, .comment-area{
  background:#fff; border:none; border-radius:15px; box-shadow:none;
}
.main{ padding:30px; }
@media screen and (max-width:834px){ .main{ padding:20px 16px; border-radius:10px; } }
.sidebar .widget{ padding:20px; margin-bottom:22px; }
.entry-card{ padding:18px; transition:transform .15s ease, box-shadow .15s ease; }
.entry-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-2px); background:#fff; }

/* --- ヘッダー：白背景・細め --- */
.header-container{ background:#fff; border-bottom:1px solid var(--yc-line); }
.logo-header .site-name-text{ font-size:19px; font-weight:700; color:var(--yc-ink); }
.tagline{ color:#888; font-size:12px; }
.navi{ background:#fff; }
.navi-in > ul > li > a{ color:var(--yc-ink); font-size:14px; font-weight:600; height:46px; line-height:46px; position:relative; }
.navi-in > ul > li > a:hover{ background:transparent; color:var(--yc-sky-d); }
.navi-in > ul > li > a::after{ content:""; position:absolute; left:50%; right:50%; bottom:0; height:3px; background:var(--yc-sky); transition:left .18s ease,right .18s ease; }
.navi-in > ul > li > a:hover::after{ left:12%; right:12%; }
@media screen and (min-width:1024px){
  .navi-in > ul { justify-content:flex-end; flex-wrap:wrap; }
  .navi-in > ul > li { width:auto; min-width:0; }
  .navi-in > ul > li > a { width:auto; min-width:0; padding:0 1.1em; white-space:nowrap; }
}

/* --- 広告表記バー --- */
.notice-area{ font-size:13px; padding:.5em 1em; border-bottom:1px solid #f0e2bd; }

/* --- アピールエリア（トップ） --- */
.appeal{ background:linear-gradient(180deg,#eaf7fd 0%,#dff1fa 100%); }
.appeal-in{ background:transparent !important; box-shadow:none !important; max-width:900px; padding:2.6em 1.2em; }
.appeal-title{ color:#12608a !important; font-size:2em; font-weight:700; text-shadow:none; }
.appeal-message{ color:#3a5666 !important; font-size:1em; line-height:1.95; }
.appeal-button{ background:var(--yc-sky); color:#fff; font-weight:700; border-radius:999px; padding:.9em 2.6em; box-shadow:0 4px 12px rgba(85,191,232,.45); }
.appeal-button:hover{ filter:brightness(1.06); }

/* --- 見出し --- */
.article h2{
  background:var(--yc-sky); color:#fff; font-size:1.35em; font-weight:700;
  padding:12px 16px 12px 46px; border:none; border-radius:6px; position:relative;
}
.article h2::before{
  content:"\00BB"; position:absolute; left:18px; top:50%; transform:translateY(-50%);
  font-size:1.1em; opacity:.9;
}
.article h3{
  background:none; border:none; border-bottom:1px dotted var(--yc-sky);
  color:var(--yc-ink); font-size:1.2em; font-weight:700; padding:0 0 .5em; border-radius:0;
}
.article h4{
  border:none; color:var(--yc-ink); font-size:1.08em; padding-left:1.1em; position:relative;
}
.article h4::before{
  content:""; position:absolute; left:0; top:.55em; width:12px; height:12px;
  border-radius:50%; background:var(--yc-sky);
}

/* --- 表 --- */
.article table{ border-collapse:separate; border-spacing:0; border:1px solid var(--yc-line); border-radius:10px; overflow:hidden; }
.article table th{ background:var(--yc-sky-l); color:#14607f; font-weight:700; border-color:#d8ecf5; }
.article table td{ border-color:var(--yc-line); }
.article table tr:nth-child(even) td{ background:#fafafa; }

/* --- リンク・マーカー・ボタン --- */
.article a{ color:var(--yc-sky-d); }
.yc-marker{ background:linear-gradient(transparent 78%, var(--yc-marker) 0%); font-weight:700; }
.btn, .btn-wrap > a{ border-radius:999px; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.btn-wrap > a:hover{ transform:translateY(-1px); }

/* --- サイドバー --- */
.sidebar h3, .sidebar .widget-title{
  background:none; color:var(--yc-ink); font-size:1.05em; font-weight:700;
  padding:0 0 .6em; margin-bottom:1em; border-bottom:2px solid var(--yc-sky); border-radius:0;
}
.sidebar .widget ul li{ border-bottom:1px dotted #e4e4e4; padding:.5em 0; }
.sidebar .widget ul li:last-child{ border-bottom:none; }

/* --- カテゴリーラベル：丸いタグ風 --- */
.cat-label{ background:var(--yc-sky); border:none; border-radius:999px; font-weight:600; font-size:12px; padding:2px 12px; }

/* --- 目次 --- */
.toc{ background:#fafafa; border:1px solid var(--yc-line); border-radius:10px; }

/* --- フッター --- */
.footer{ background:#fff; border-top:1px solid var(--yc-line); }
.footer a{ color:var(--yc-ink); }
.footer .menu-footer li a{ font-size:.9em; }

/* --- 注意ボックス --- */
.yc-caution{
  background:#fffaf0; border:1px solid #f3e2bd; border-radius:10px;
  padding:1em 1.2em; font-size:.95em; line-height:1.85;
}
/* --- ステップボックス --- */
.yc-step{ background:#f7fcfe; border:1px solid #d6ecf6; border-radius:10px; padding:1.1em 1.3em; }

/* --- スマホ調整 --- */
@media screen and (max-width:480px){
  .logo-header{ padding:.7em .9em; }
  .logo-header .site-name-text{ font-size:15px; line-height:1.5; }
  .notice-area{ font-size:12px; padding:.5em .8em; }
  .appeal-in{ padding:2em 1.1em; }
  .appeal-title{ font-size:1.35em; }
  .appeal-message{ font-size:.92em; }
  .article h2{ font-size:1.12em; padding:10px 12px 10px 36px; }
  .article h2::before{ left:14px; }
  .article h3{ font-size:1.05em; }
}
/* === デザインここまで === */

/* === 失敗談ボックス === */
.yc-story{
  background:#fff7f4; border:1px solid #f0d3c8; border-left:5px solid #e08a68;
  border-radius:0 10px 10px 0; padding:1.4em 1.4em 1.1em; margin:2em 0; position:relative;
}
.yc-story::before{
  content:"私の失敗談"; position:absolute; top:-13px; left:14px;
  background:#e08a68; color:#fff; font-size:12px; font-weight:700;
  padding:3px 14px; border-radius:999px; letter-spacing:.08em;
}
.yc-story p{ margin:.6em 0; font-size:.97em; line-height:1.85; }
.yc-story p:first-child{ margin-top:.3em; }
.yc-story .yc-lesson{
  margin-top:1em; padding-top:.9em; border-top:1px dashed #e8c3b4;
  font-weight:700; color:#a44f2c;
}
/* === 失敗談ボックスここまで === */

/* === メール文面ボックス === */
.yc-mail{
  background:#f6f7f9; border:1px solid #dfe3e8; border-radius:10px;
  padding:1.5em 1.3em 1.2em; margin:1.6em 0; position:relative;
}
.yc-mail::before{
  content:"届いたメッセージの例"; position:absolute; top:-12px; left:14px;
  background:#8a94a0; color:#fff; font-size:11px; font-weight:700;
  padding:3px 12px; border-radius:999px; letter-spacing:.06em;
}
.yc-mail p{
  margin:.45em 0; font-size:.94em; line-height:1.8; color:#4a545f;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
/* === メール文面ボックスここまで === */