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

/* BEGIN S06 ai-agent-flow (WP-VISUAL-QA-01) */
/* S06「AIエージェントとは何か」専用 — ステップ図表示
   WP-VISUAL-QA-01。対象クラスのみに限定したスコープ付きCSS。
   サイト全体のp/h2/h3/body/table/ol/li等の既定スタイルは変更しない。
   固定px幅・!important・外部CSS・外部ライブラリ・JSは使用しない。 */

.ai-agent-flow {
  margin: 1.5em 0;
  padding: 1em 1.2em;
  background: #f7f8f9;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  max-width: 100%;
  box-sizing: border-box;
}

.ai-agent-flow-start,
.ai-agent-flow-end {
  margin: 0 0 .6em;
  padding: .5em .8em;
  text-align: center;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
}

.ai-agent-flow-start::after {
  content: "↓";
  display: block;
  margin-top: .4em;
  color: #5b6673;
  font-weight: 400;
}

.ai-agent-step-list {
  list-style: none;
  margin: 0 0 .6em;
  padding: 0;
}

.ai-agent-step {
  position: relative;
  margin: 0 0 .8em;
  padding: .8em 1em;
  background: #ffffff;
  border: 1px solid #e3e7ec;
  border-left: 4px solid #1f3a5f;
  border-radius: 6px;
  box-sizing: border-box;
}

.ai-agent-step:last-child {
  margin-bottom: 0;
}

.ai-agent-step:not(:last-child)::after {
  content: "↓";
  display: block;
  text-align: center;
  margin-top: .8em;
  color: #5b6673;
}

.ai-agent-step-label {
  display: inline-block;
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .05em;
  color: #1f3a5f;
  margin-right: .6em;
}

.ai-agent-step-title {
  font-weight: 700;
}

.ai-agent-step p {
  margin: .4em 0 0;
  color: #5b6673;
  font-size: .95em;
}

.ai-agent-flow-loop {
  margin: 0 0 .6em;
  padding: .5em .8em;
  text-align: center;
  font-size: .9em;
  color: #5b6673;
  background: #ffffff;
  border: 1px dashed #c9d1d9;
  border-radius: 6px;
}

.ai-agent-flow-loop::after {
  content: "↓";
  display: block;
  margin-top: .4em;
  color: #5b6673;
}

/*834px以下*/
@media screen and (max-width: 834px) {
  .ai-agent-flow {
    padding: .8em 1em;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  .ai-agent-flow {
    margin: 1.2em 0;
    padding: .7em .8em;
  }
  .ai-agent-flow-start,
  .ai-agent-flow-end,
  .ai-agent-flow-loop {
    padding: .5em .6em;
    font-size: .95em;
  }
  .ai-agent-step {
    padding: .7em .8em;
  }
}

/* END S06 ai-agent-flow (WP-VISUAL-QA-01) */

/* BEGIN E04 ai-workflow-flow (WP-VISUAL-QA-02) */
/* E04「Claude Codeに会社の仕事を任せてみた」専用 — ワークフロー図表示
   WP-VISUAL-QA-02。S06用 .ai-agent-flow 系クラスとは完全に独立した
   .ai-workflow-* 名前空間を使用し、既存のS06表示（LOCK済み）に一切影響しない設計。
   サイト全体のp/h2/h3/body/table等の既定スタイルは変更しない。
   固定px幅・!important・外部CSS・外部ライブラリ・JS・アニメーションは使用しない。 */

.ai-workflow-flow {
  margin: 1.5em 0;
  padding: 1em 1.2em;
  background: #f7f8f9;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  max-width: 100%;
  box-sizing: border-box;
}

.ai-workflow-step-list {
  list-style: none;
  margin: 0 0 .6em;
  padding: 0;
}

.ai-workflow-step {
  position: relative;
  margin: 0 0 .8em;
  padding: .8em 1em;
  background: #ffffff;
  border: 1px solid #e3e7ec;
  border-left: 4px solid #1f3a5f;
  border-radius: 6px;
  box-sizing: border-box;
}

.ai-workflow-step:last-child {
  margin-bottom: 0;
}

.ai-workflow-step:not(:last-child)::after {
  content: "↓";
  display: block;
  text-align: center;
  margin-top: .8em;
  color: #5b6673;
}

.ai-workflow-step-label {
  display: inline-block;
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .05em;
  color: #1f3a5f;
  margin-right: .6em;
}

.ai-workflow-step-title {
  font-weight: 700;
}

.ai-workflow-step p {
  margin: .4em 0 0;
  color: #5b6673;
  font-size: .95em;
}

.ai-workflow-note {
  margin: .6em 0 0;
  padding: .5em .8em;
  text-align: center;
  font-size: .9em;
  color: #5b6673;
  background: #ffffff;
  border: 1px dashed #c9d1d9;
  border-radius: 6px;
}

/*834px以下*/
@media screen and (max-width: 834px) {
  .ai-workflow-flow {
    padding: .8em 1em;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  .ai-workflow-flow {
    margin: 1.2em 0;
    padding: .7em .8em;
  }
  .ai-workflow-step {
    padding: .7em .8em;
  }
  .ai-workflow-note {
    padding: .5em .6em;
    font-size: .95em;
  }
}

/* END E04 ai-workflow-flow (WP-VISUAL-QA-02) */

/* BEGIN table wrapper overflow fix (WP-FINAL-FIX-01) */
/* WP-PREPUBLICATION-01で発見: md_to_html()が生成する<div class="tbl"><table>...</table></div>
   のうち、.tblクラスにCocoon側の既定スタイル定義が存在しないため、内容が広い表で
   ページ全体が横スクロールしてしまう不具合の修正。
   対象は既存記事が使用している .entry-content 配下の .tbl ラッパーのみに限定する。
   グローバルなtable要素そのものやサイト全体のレイアウトは変更しない。
   固定px幅・!important・外部CSS・外部ライブラリ・JSは使用しない。 */

.entry-content .tbl {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* END table wrapper overflow fix (WP-FINAL-FIX-01) */