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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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

/*---SNSボタンを丸くする---*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}


/* =========================================
   Cocoon用 フローチャート完全版
   - 縦フロー
   - 2列比較
   - ループ図
   - 色バリエーション
   ========================================= */

/* 共通ラッパー */
.cf-flow,
.cf-loop,
.cf-compare {
  margin: 28px 0;
}

/* タイトル */
.cf-flow-title,
.cf-loop-title,
.cf-compare-title {
  text-align: center;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 14px;
  font-size: 1.05rem;
}

/* 補足 */
.cf-flow-note,
.cf-loop-note,
.cf-compare-note {
  text-align: center;
  line-height: 1.7;
  font-size: 0.92rem;
  color: #666;
  margin-top: 10px;
}

/* =========================================
   1. 縦フロー
   ========================================= */

.cf-flow-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cf-flow-box {
  width: min(100%, 380px);
  box-sizing: border-box;
  padding: 14px 18px;
  border-radius: 12px;
  text-align: center;
  line-height: 1.7;
  font-weight: 600;
  border: 2px solid var(--cf-main, #6fa3ef);
  background: var(--cf-bg, #f7fafe);
  color: var(--cf-text, #2c3e5f);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cf-flow-arrow {
  color: var(--cf-main, #6fa3ef);
  font-size: 24px;
  line-height: 1;
}

/* =========================================
   2. 2列比較
   ========================================= */

.cf-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.cf-compare-col {
  text-align: center;
}

.cf-compare-col-title {
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 12px;
}

.cf-compare-col .cf-flow-box {
  width: 100%;
}

/* =========================================
   3. ループ図
   ========================================= */

.cf-loop-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cf-loop-box {
  width: min(100%, 420px);
  box-sizing: border-box;
  padding: 14px 18px;
  border-radius: 12px;
  text-align: center;
  line-height: 1.7;
  font-weight: 600;
  border: 2px solid var(--cf-main, #de7f7f);
  background: var(--cf-bg, #fff5f5);
  color: var(--cf-text, #5f2e2e);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cf-loop-arrow {
  color: var(--cf-main, #de7f7f);
  font-size: 24px;
  line-height: 1;
}

.cf-loop-return {
  margin-top: 6px;
  text-align: center;
  line-height: 1.6;
  font-weight: 700;
  color: var(--cf-main, #de7f7f);
}

/* =========================================
   4. 色バリエーション
   ========================================= */

/* 青 */
.cf-blue {
  --cf-main: #6fa3ef;
  --cf-bg: #f7fafe;
  --cf-text: #2c3e5f;
}

/* 赤 */
.cf-red {
  --cf-main: #de7f7f;
  --cf-bg: #fff5f5;
  --cf-text: #5f2e2e;
}

/* 緑 */
.cf-green {
  --cf-main: #78b98b;
  --cf-bg: #f4fbf6;
  --cf-text: #23482f;
}

/* オレンジ */
.cf-orange {
  --cf-main: #f0a25e;
  --cf-bg: #fff8f2;
  --cf-text: #6a3d16;
}

/* グレー */
.cf-gray {
  --cf-main: #9aa3ad;
  --cf-bg: #f7f7f7;
  --cf-text: #3f4852;
}

/* =========================================
   5. スマホ対応
   ========================================= */

@media (max-width: 768px) {
  .cf-compare-grid {
    grid-template-columns: 1fr;
  }

  .cf-flow-box,
  .cf-loop-box {
    width: 100%;
  }
}
/* =========================================
   Cocoon用 フローチャート完全版 ここまで
   ========================================= */