@charset "UTF-8";

/*!
Theme Name: functions Cocoon Child
Description: functions.fs-create.net の Cocoon の子テーマ（CH-1099）。fs-create.net・s-m.biz と同じヘッダー・フッター・行き来の帯。dio から移した投稿タイプ・ショートコード・プラグインの配布・転送・セキュリティー診断のページと、記事の本文の見た目。
Author: fstylegear09543
Template: cocoon-master
Version: 0.1.0
Text Domain: functions-cocoon-child
*/

/************************************
** 記事の本文の見た目（dio の style.css から写した・CH-1099）
** Cocoon の本文の箱（.entry-content）に class「post_content」を足しているので（inc/article.php）、
** dio と同じ書き方（.post_content …）のまま効く。色・大きさは dio のまま。
************************************/

/* 本文の字の色・行の高さ・段落のあいだ・見出しの上下（dio 2026-10-12） */
body .post_content { color: #333; }
body .post_content > p { line-height: 1.85; margin: 0 0 0.9em; }
body .post_content > h2,
body .post_content > h3 { margin-top: 2em; margin-bottom: 0.8em; }
/* 本文の中のコードの「_」が消えないように字体を決める（dio 2026-10-12） */
body .post_content code { font-family: Consolas, Menlo, Monaco, "Courier New", monospace; font-size: 0.95em; }
.post_content > *:first-child { margin-top: 0 !important; }
.post_content a { overflow-wrap: anywhere; }

/* ---- コードの枠（Enlighter） ---- */
.enlighter-default {
  padding: 20px 0 0 0 !important;
}

.enlighter-overflow-scroll.enlighter-v-standard .enlighter-code {
  padding-bottom: 20px;
}

/* 長いコードの枠：20 行以上か 1 行が 90 字を超えるものだけ字を 0.8 倍、40 行以上は高さ 600px までにして中でスクロール（class は assets/js/post-content-compact.js） */
.enlighter-default.fs-code-long .enlighter span,
.enlighter-default.fs-code-long .enlighter-raw { font-size: 12px; }
.enlighter-default.fs-code-tall .enlighter-code { max-height: 600px; overflow-y: auto; }

/* 1 行が長いコードは、枠の中で横にスクロール（ページごと横にはみ出さないように・記事 135 のスマホ） */
.post_content .enlighter-default {
  max-width: 100%;
}

.post_content .enlighter-default .enlighter-code {
  overflow-x: auto;
}

/* Cocoon の pre の地・枠を、Enlighter の枠には付けない（二重の枠にならないように） */
.entry-content pre.EnlighterJSRAW {
  background: none;
  border: 0;
}

/* コードの枠の上のファイル名の札（.file_name） */
.file_name {
  margin-bottom: -13px;
  position: relative;
  z-index: 99 !important;
  font-size: 12px;
  background: #ccc;
  padding: 7px 12px;
  display: table;
  min-width: 95px;
  white-space: nowrap;
  text-align: center;
  margin-left: 10px;
  line-height: 1.6;
}

/* ---- 記事のリンク（[permalink]） ---- */
.plink {
  line-height: 2.5;
  text-decoration: underline;
  text-underline-offset: 10px;
  color: #666666 !important;
  font-size: 14px;
}

.post_content p.desc {
  margin-bottom: 0.9em;
}

/* ---- 目次（Table of Contents Plus） ---- */
#toc_container {
  display: block !important;
  margin: 0 auto 1.8em;
  padding: 10px 0 !important;
}

#toc_container p.toc_title + ul.toc_list {
  margin-top: 0 !important;
  margin-left: 2em;
}

.toc_list li a {
  display: block;
  margin-left: 10px;
  text-indent: -1.8em;
}

.toc_depth_1 {
  margin-right: 10px;
}

/* Cocoon の本文の ul の印・余白を、目次には付けない */
.entry-content #toc_container ul,
.entry-content #toc_container li {
  list-style: none;
}

/* ---- 表 ---- */
/* assets/js/post-content-compact.js が本文の表を .fs-table-scroll で包む。字を少し小さく・余白を詰め、入らないときは箱の中で横にスクロール */
body .post_content .fs-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 24px 0; }
body .post_content .fs-table-scroll > table { margin: 0; min-width: 100%; font-size: 0.85em; }
body .post_content .fs-table-scroll th,
body .post_content .fs-table-scroll td { padding: 6px 10px; line-height: 1.7; }
body .post_content .fs-table-scroll th { white-space: nowrap; }

.pb_simple_table th {
  color: #018f9d !important;
}

/* ---- 囲み「できること」（.fs-box・dio 2026-10-19） ---- */
.fs-box { background: #f5f8f8; border: 2px solid #8fbcc1; border-radius: 6px; padding: 18px 22px; margin: 0 0 28px; }
.fs-box .fs-box__title { margin: 0 0 8px; font-weight: bold; color: #4f8a91; }
.entry-content .fs-box ul.fs-box__checks { margin: 0; padding: 0; }
.entry-content .fs-box ul.fs-box__checks li { position: relative; padding: 8px 0 8px 30px; border-bottom: 1px dashed #cfe2e4; list-style: none; margin: 0; }
.fs-box ul.fs-box__checks li:last-child { border-bottom: none; }
.fs-box ul.fs-box__checks li::before { content: "✓"; position: static; display: inline-block; vertical-align: middle; margin: -0.15em 10px 0 -30px; width: 20px; height: 20px; border-radius: 50%; background: #8fbcc1; color: #fff; font-size: 12px; line-height: 20px; text-align: center; font-weight: bold; }
.fs-box > p:last-child { margin-bottom: 0; }

/* ---- 本文の上の「概要説明」の箱（AIOSEO の説明・inc/article.php） ---- */
.fcc-summary {
  margin: 0 0 2em;
  padding: 16px 20px;
  border: 1px solid var(--fcc-line, #DDE1DC);
  border-left: 4px solid var(--fcc-green, #2271B1);
  border-radius: 4px;
  background: #F8F9F7;
}

.fcc-summary__title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 15px;
  color: var(--fcc-green, #2271B1);
}

.fcc-summary p {
  margin: 0;
  line-height: 1.8;
}

/* ---- お問い合わせ（Contact Form 7・dio と同じ形） ---- */
.wpcf7 { width: 100%; border: 1px solid #ddd; background: #fafafa; padding: 0; margin: 0 0 2.5em !important; font-size: 14px; }
.wpcf7 form { margin: 1.5em 1.5em 0; }
.wpcf7 input,
.wpcf7 textarea { box-sizing: border-box; width: 100%; border: 1px solid #ccc; line-height: 1.2; padding: 8px; }
.wpcf7 textarea { height: 300px; }
.wpcf7 input.wpcf7-submit { display: block; width: 225px; height: 48px; margin: 30px auto 0; background-color: #333; cursor: pointer; border: none !important; color: #fff; font-size: 14px; }
.wpcf7 input.wpcf7-submit:hover { background-color: #666; }

/* 決済のフォーム（WP Simple Pay・dio と同じ） */
.simpay-stripe_checkout-form-wrap { display: flex; }
.simpay-stripe_checkout-form-wrap form { margin: auto; }
.simpay-stripe_checkout-form-wrap form span { padding: 20px; display: inline-table; }

/* 人気ランキング（WP Most Popular を dio の一覧の形 styled_post_list2 で出す・inc/wp-most-popular.php） */
.styled_post_list2 {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fcc-rank;
}

.styled_post_list2 li {
  position: relative;
  padding: 10px 0 10px 34px;
  border-bottom: 1px solid #e5e5e5;
  counter-increment: fcc-rank;
  font-size: 14px;
  line-height: 1.6;
}

.styled_post_list2 li::before {
  content: counter(fcc-rank);
  position: absolute;
  left: 0;
  top: 11px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fcc-ink, #14202B);
  color: #fff;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
}

.styled_post_list2 li img {
  display: none;
}

.styled_post_list2 li a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.styled_post_list2 li a:hover {
  text-decoration: underline;
}

.styled_post_list2 .date {
  display: none;
}

.tagcloud {
  line-height: 1.5;
}

/************************************
** レスポンシブ
************************************/
@media screen and (max-width: 950px) {
  /* 表の枠は縦に積む（dio と同じ。.fs-table-scroll で包んだ表は下で表のままに戻す） */
  .post_content table th,
  .post_content table td { display: block; }
  .post_content table.pb_simple_table th { width: auto !important; }
  .post_content .file_name { max-width: calc(100% - 10px); box-sizing: border-box; white-space: normal; }
  body .post_content .fs-table-scroll th,
  body .post_content .fs-table-scroll td { display: table-cell; }
}

/* スマホの記事を読みやすく（dio CH-873 のうち、Cocoon でも要るもの） */
@media screen and (max-width: 767px) {
  body .post_content p { padding-left: 0; padding-right: 0; }
  .enlighter-default,
  .enlighter-default * { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Roboto Mono", "Droid Sans Mono", monospace !important; letter-spacing: normal !important; }
  .enlighter-default .enlighter-code,
  .enlighter-default .enlighter-code * { font-size: 13px !important; line-height: 1.6 !important; }
  body .post_content code,
  body .post_content kbd { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Roboto Mono", "Droid Sans Mono", monospace; letter-spacing: normal; }
  body .post_content code { font-size: .9em; }
  body #toc_container li { line-height: 1.5; margin-bottom: .55em; }
  body #toc_container li > ul { margin-top: .55em; }
  body .ats-container { margin-bottom: 20px; }
}