@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ（NOCTIS カスタマイズ版）
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** カラー定義
** ブログは白背景。装飾の形はエックスサーバーのブログ講座をベンチマークし、
** 色だけNOCTISのブランドカラーに寄せている。
** LPはダーク×ネオンのまま。LPはこのCSSを読み込まない（functions.php参照）。
** 仕様の根拠: ブログ制作担当/デザイン仕様_記事装飾.md
************************************/
:root {
  /* NOCTISブランド（LPから実測） */
  --noctis-pink: #FF3FA4;
  --noctis-cyan: #00E5FF;

  /* ブログ本文（白背景） */
  --blog-bg: #ffffff;
  --blog-text: #333333;
  --blog-text-weak: #666666;
  --blog-border: #e5e5e5;

  /* 装飾（ベンチマークの実測値） */
  --marker-yellow: #fcee9e;
  --marker-red: #fbbfb5;
  --marker-blue: #bae8f9;
  --marker-green: #d1f2dd;
  --text-red: #ff4949;
  --balloon-bg: #eaeaea;

  /* ボックス4種（赤緑は意味が固定されているのでベンチのまま） */
  --box-ng-bg: #fff4f4;
  --box-ng-accent: #f77171;
  --box-ok-bg: #eaf9ea;
  --box-ok-accent: #6ecc8d;
  --box-point-bg: #f2fcfe;
  --box-point-accent: #00b8cc;   /* シアンは白地だと薄すぎるので少し沈めた */
  --box-howto-bg: #fff9e5;
  --box-howto-accent: #f7931e;
}

/************************************
** ベース（白背景）
************************************/
body {
  background: var(--blog-bg);
  color: var(--blog-text);
  font-family: 'Noto Sans JP', sans-serif;
}

#header-container,
#navi,
#main,
.main,
#sidebar,
#footer {
  background-color: var(--blog-bg);
  color: var(--blog-text);
}

/* 本文の可読性（リサーチ担当 2026-07-04_ダーク背景可読性ルール.md の
   行間・文字間の知見は白背景でもそのまま使える） */
.entry-content {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--blog-text);
}

.entry-content a {
  color: #0b7fa8;
}

/************************************
** H2見出し（帯）
** ベタ塗りの帯＋白抜き文字＋左端に二重山括弧。角丸なし。
************************************/
.entry-content h2,
.article h2 {
  color: #fff;
  background: var(--noctis-pink);
  padding: .5em .6em .5em 2em;
  text-indent: -1.3em;
  margin: 4em 0 2em;
  border: none;
  border-radius: 0;
  font-weight: bold;
}

/* Cocoonが積んでいるのは Font Awesome 4.7.0。フォント名は 'FontAwesome'（5系の
   "Font Awesome 5 Free" ではない）。コードポイント \f101 は4系・5系で共通。 */
.entry-content h2::before,
.article h2::before {
  content: "\f101";                    /* angle-double-right */
  font-family: 'FontAwesome';
  font-weight: normal;
  color: var(--noctis-cyan);
  margin-right: .3em;
}

/************************************
** H3見出し
** H2との強弱をつけるため、帯ではなく左罫線にとどめる。
************************************/
.entry-content h3,
.article h3 {
  color: var(--blog-text);
  background: none;
  border: none;
  border-left: 5px solid var(--noctis-pink);
  padding: .2em 0 .2em .6em;
  margin: 2.5em 0 1.2em;
  font-weight: bold;
}

/************************************
** マーカー（アンダーライン）
** 文字の下から27%だけを塗る。必ず太字とセットで使う。
** 1つのH2セクションで黄マーカーは1〜2箇所まで。
************************************/
.marker,
.marker-yellow {
  background: linear-gradient(transparent 73%, var(--marker-yellow) 0);
  font-weight: bold;
}
.marker-red   { background: linear-gradient(transparent 73%, var(--marker-red) 0);   font-weight: bold; }
.marker-blue  { background: linear-gradient(transparent 73%, var(--marker-blue) 0);  font-weight: bold; }
.marker-green { background: linear-gradient(transparent 73%, var(--marker-green) 0); font-weight: bold; }

/* 赤字。マーカーより弱い強調。太字にはしない（役割が被るため） */
.text-red {
  color: var(--text-red);
}

/************************************
** ボックス（枠）
** 左上にタブ状の見出しが乗った角丸ボックス。
** 使い方: <div class="noctis-box box-ng"><div class="box-title">1文が長い例</div> ...本文... </div>
************************************/
.noctis-box {
  position: relative;
  border: 2px solid var(--box-point-accent);
  background-color: var(--box-point-bg);
  border-radius: 7px;
  margin: 2.5em 0 2em;
  padding: 2.8em 1.4em 1.2em;   /* 上はタブの高さ分あける */
}

.noctis-box > .box-title {
  position: absolute;
  top: -1px;
  left: -1px;
  background: var(--box-point-accent);
  color: #fff;
  font-weight: bold;
  font-size: .9em;
  padding: .35em 1.1em;
  border-radius: 5px 0 7px 0;
}

.noctis-box > *:last-child { margin-bottom: 0; }

/* 箇条書きの行頭マークをアクセント色にする */
.noctis-box ul li::marker { color: var(--box-point-accent); }

/* 悪い例（赤）*/
.noctis-box.box-ng               { border-color: var(--box-ng-accent); background-color: var(--box-ng-bg); font-weight: bold; }
.noctis-box.box-ng > .box-title  { background: var(--box-ng-accent); }
.noctis-box.box-ng ul li::marker { color: var(--box-ng-accent); }

/* 良い例（緑）*/
.noctis-box.box-ok               { border-color: var(--box-ok-accent); background-color: var(--box-ok-bg); font-weight: bold; }
.noctis-box.box-ok > .box-title  { background: var(--box-ok-accent); }
.noctis-box.box-ok ul li::marker { color: var(--box-ok-accent); }

/* 手順・型の提示（オレンジ）*/
.noctis-box.box-howto               { border-color: var(--box-howto-accent); background-color: var(--box-howto-bg); }
.noctis-box.box-howto > .box-title  { background: var(--box-howto-accent); }
.noctis-box.box-howto ul li::marker { color: var(--box-howto-accent); }

/************************************
** 吹き出し（LIQUID SPEECH BALLOON）
** グレーの角丸＋円形アバター＋名前ラベルは下。セリフは太字。
************************************/
/* プラグインのマークアップは [アバター][セリフ] の2要素しかなく、キャラ名ラベルを
   入れる箱がない。grid で2行2列に組み、::before のラベルをアバターの真下に置く。 */
.liquid-speech-balloon-wrap {
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: auto auto;
  column-gap: 20px;
  align-items: start;
}

/* プラグインの .liquid-speech-balloon-small が height:32px を当ててアバターを潰すため
   !important で上書きする。記事の吹き出しには全てsmallクラスが付いている */
.liquid-speech-balloon-avatar {
  grid-column: 1;
  grid-row: 1;
  min-width: 80px !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.liquid-speech-balloon-text {
  grid-column: 2;
  grid-row: 1 / span 2;     /* セリフはアバターとラベルの2行ぶんの高さを占める */
  position: relative;
  z-index: 1;
  border-radius: 5px;
  padding: 20px 24px;
  width: 100%;
  background-color: var(--balloon-bg);
  border: none;
  box-sizing: border-box;
  color: var(--blog-text);
  font-weight: bold;
}
.liquid-speech-balloon-text p { margin: 0; padding: 0; }

.liquid-speech-balloon-arrow {
  position: absolute;
  z-index: 2;
  width: 0;
  height: 0;
  top: 25px;
  left: -11px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-right: 11px solid var(--balloon-bg);
}
/* 右向き（アバターが右） */
.liquid-speech-balloon-wrap.right { grid-template-columns: 1fr 80px; }
.liquid-speech-balloon-wrap.right .liquid-speech-balloon-avatar { grid-column: 2; }
.liquid-speech-balloon-wrap.right::before { grid-column: 2; }
.liquid-speech-balloon-wrap.right .liquid-speech-balloon-text { grid-column: 1; }
.liquid-speech-balloon-wrap.right .liquid-speech-balloon-arrow {
  left: auto;
  right: -11px;
  border-right: none;
  border-left: 11px solid var(--balloon-bg);
}

/* アバター画像（スロットID対応） */
.liquid-speech-balloon-00 .liquid-speech-balloon-avatar { background-image: url('https://noctis-digital.com/wp-content/uploads/2026/06/passionate-sns-teacher.png'); }
.liquid-speech-balloon-01 .liquid-speech-balloon-avatar { background-image: url('https://noctis-digital.com/wp-content/uploads/2026/06/natural-hostess-girl.png'); }
.liquid-speech-balloon-02 .liquid-speech-balloon-avatar { background-image: url('https://noctis-digital.com/wp-content/uploads/2026/06/cool-marketer.png'); }
.liquid-speech-balloon-03 .liquid-speech-balloon-avatar { background-image: url('https://noctis-digital.com/wp-content/uploads/2026/06/veteran-owner.png'); }
.liquid-speech-balloon-04 .liquid-speech-balloon-avatar { background-image: url('https://noctis-digital.com/wp-content/uploads/2026/06/veteran-snack-mama.png'); }

/* キャラクター名ラベル（アバターの真下。ビジュアルだけでの識別は求めない方針） */
.liquid-speech-balloon-wrap::before {
  grid-column: 1;
  grid-row: 2;
  display: block;
  font-size: .72rem;
  font-weight: normal;
  line-height: 1.3;
  text-align: center;
  color: var(--blog-text-weak);
  margin-top: 6px;
}
.liquid-speech-balloon-00::before { content: '熱血SNS教師'; }
.liquid-speech-balloon-01::before { content: '天然キャバ嬢'; }
.liquid-speech-balloon-02::before { content: 'クールなマーケター'; }
.liquid-speech-balloon-03::before { content: 'ベテランオーナー'; }
.liquid-speech-balloon-04::before { content: 'ベテランスナックママ'; }

/* プラグインがアバター::afterで名前を二重描画するのを止める（2026-07-16） */
.liquid-speech-balloon-avatar::after { content: none !important; }

/************************************
** 目次（Cocoon標準）
************************************/
.toc {
  background-color: #fafafa;
  border: 1px solid var(--blog-border);
  border-radius: 7px;
}

/************************************
** レスポンシブ
************************************/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

@media screen and (max-width: 834px){
  /* スマホでタイトル(H1)が3行になるのを防ぐ（2026-07-17） */
  .entry-title { font-size: 22px; line-height: 1.35; }

  .entry-content h2,
  .article h2 { font-size: 1.25em; margin: 3em 0 1.5em; }

  .liquid-speech-balloon-wrap { grid-template-columns: 60px 1fr; column-gap: 12px; }
  .liquid-speech-balloon-wrap.right { grid-template-columns: 1fr 60px; }
  .liquid-speech-balloon-avatar {
    min-width: 60px !important;
    width: 60px !important;
    height: 60px !important;
  }
  .liquid-speech-balloon-text { padding: 15px 18px; }
}

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


/************************************
** H4見出し（FAQの質問文）
** 見た目はH3と同じ（左罫線）。少しだけ小さくして階層は残す。
**
** なぜH4を使うのか（デザインではなく目次の都合）:
** Cocoonの目次は見出しレベルでしか絞れない（目次表示の深さ = H2/H3/H4…）。
** FAQの質問文を目次に出したくないので、質問文だけH4に落とし、
** Cocoon設定の「目次表示の深さ」をH3までにして弾いている。
** 同じ理由で、CTAボックスの見出しは見出しタグをやめて段落にしてある。
************************************/
.entry-content h4,
.article h4 {
  color: var(--blog-text);
  background: none;
  border: none;
  border-left: 5px solid var(--noctis-pink);
  padding: .2em 0 .2em .6em;
  margin: 2.5em 0 1.2em;
  font-weight: bold;
  font-size: 1.05em;
}