@charset "UTF-8";
/* 例：Google Fontsから読み込む場合 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/*!
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
*/

/************************************
** 1. ブランドカラー設定 & 基本スタイル
************************************/
:root {
  --purple-main: #80748F;      /* 主線・メイン */
  --purple-sub:  #A292B8;      /* ラベンダー影 */
  --lavender-bg: #DED9E6;      /* 背景光 */
  --mint-main:   #8ECFB5;      /* AIライン・アクセント */
  --mint-light:  #AEE6D3;      /* 明るいミント */
  --text-main:   #51465C;      /* 指定の文字色 */
}
/* 1. パステルポップ用のカラー変数 */
:root {
  --mint-pop:    #AEE6D3; /* 柔らかミント */
  --mint-bg:     #F0F9F6; /* 薄ミント */
  --purple-pop:  #C7B2D6; /* パステルラベンダー */
  --purple-bg:   #F5F0F9; /* 薄ラベンダー */
  --pink-pop:    #FFC7D4; /* ベビーピンク */
  --pink-bg:     #FFF9FA; /* 薄ピンク */
  --text-pop:    #6A5F75; /* 柔らかい文字色 */
  --shadow-pop:  rgba(106, 95, 117, 0.1); /* ポップな影 */
}

body {
  color: var(--text-main);
  background: #FFFFFF;
  /*font-family: "Zen Maru Gothic", sans-serif !important;*/
  line-height: 1.6;
}

a {
  color: var(--purple-main);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: var(--purple-sub);
  text-decoration: underline;
}

/* ロゴデザイン修正：色を確実に表示させて距離を取る */
.logo-header .site-name::after {
  content: 'ai mama works';
  font-size: 24px !important;
  margin-left: 10px !important;
  color: #51465C;
}

/************************************
** 2. グローバルメニュー：可変幅デザイン
************************************/

/* 1. 全体設定：背景と線を消してスッキリ */
#navi {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.navi-in {
  background-color: transparent !important;
}

/* 2. 重複防止：最初のメニューリスト以外を非表示にする */
.navi-in > ul:not(:first-child) {
  display: none !important;
}

/* 3. メニューを横並びにする（一番上の階層だけ） */
.navi-in > ul {
  display: flex !important;
  justify-content: center; /* 中央に寄せる */
  flex-wrap: wrap;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4. メニューの各項目：文字数に応じた幅にする */
.navi-in > ul > li {
  width: auto !important;
  min-width: auto !important;
}

.navi-in a {
  background-color: transparent !important;
  color: var(--text-main) !important;
  font-weight: 600 !important;
  font-size: 15px;
  padding: 15px 20px !important; /* 左右の余白を一定にする */
  width: auto !important;
  transition: color 0.3s ease;
  display: block;
}

/* 5. ホバー時の効果 */
.navi-in a:hover {
  background-color: transparent !important;
  color: var(--mint-main) !important;
  text-decoration: none !important;
}

/* 6. 現在のページの強調 */
.navi-in .current-menu-item a {
  color: var(--mint-main) !important;
}

/* 7. サブメニュー（ドロップダウン）が横並びにならないように修正 */
.navi-in ul.sub-menu,
.navi-in ul.children {
  display: none; /* ホバー前は隠す */
  position: absolute;
  background-color: #ffffff !important;
  width: 200px !important; /* サブメニューの幅 */
  border-top: 2px solid var(--mint-main) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
  z-index: 999;
}

/* サブメニューの中身は縦に並べる */
.navi-in ul.sub-menu li {
  width: 100% !important;
  display: block !important;
}

/* 親メニューをホバーしたらサブメニューを表示 */
.navi-in li:hover > ul.sub-menu,
.navi-in li:hover > ul.children {
  display: block !important;
}
/************************************
** スマホでのメニュー・モバイルボタン削除
************************************/

@media screen and (max-width: 1023px) {
  /* 1. スマホ用ナビゲーション領域を削除 */
  #navi {
    display: none !important;
  }
}
/************************************
** スマホメニュー：見やすくおしゃれに
************************************/

/* 1. 画面下のボタンバーをリッチにする */
#mobile-menu-buttons {
  background-color: #ffffff !important;
  border-top: 1px solid #f0f0f0 !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
}

/* ボタンのアイコンと文字の色 */
.menu-button > a {
  color: var(--text-main) !important;
  text-decoration: none !important;
  padding: 8px 0 !important; /* 上下の余白を少しだけ詰める */
}

/* アイコンの色をブランドカラーに */
.menu-button > a [class^="fas"],
.menu-button > a [class^="far"] {
  color: var(--mint-main) !important;
  font-size: 16px !important;
  margin-bottom: 3px;
}

/* ボタンの下の文字を小さく整える */
.menu-tag-child {
  font-size: 10px !important;
  font-weight: bold;
}

/* 2. スライドして出るメニュー（ドロワー）の中身 */
.menu-drawer {
  background-color: #ffffff !important;
}

/* メニューの見出し（タイトル） */
.menu-drawer .menu-drawer-title {
  background-color: var(--lavender-bg) !important;
  color: var(--purple-main) !important;
  font-weight: bold;
  padding: 15px !important;
  font-size: 16px;
  border-bottom: 2px solid var(--mint-main);
}

/* メニュー項目の一覧 */
.menu-drawer ul li a {
  padding: 12px 20px !important;
  border-bottom: 1px solid #f7f7f7 !important;
  color: var(--text-main) !important;
  font-weight: 600;
  display: flex;
  align-items: center;
  font-size: 14px;
}

/* メニューの頭にミント色の「・」をつける */
.menu-drawer ul li a::before {
  content: "●";
  color: var(--mint-main);
  font-size: 8px;
  margin-right: 12px;
}

/* 閉じるボタンのデザイン */
.menu-drawer .menu-drawer-close-button {
  color: var(--purple-main) !important;
  font-size: 24px;
}

/* 3. アクティブ（今見ているページ）の強調 */
.menu-drawer ul li.current-menu-item a {
  background-color: #fcfcfc !important;
  color: var(--mint-main) !important;
}

/************************************
** 3. ボタン & 記事カード（共通）
************************************/
.btn, .button, input[type="submit"] {
  background: var(--mint-main);
  color: #fff !important;
  border-radius: 30px;
  padding: 10px 24px;
  border: none;
  transition: 0.3s;
}

.entry-card-wrap, .related-entry-card {
  border-radius: 14px;
  border: 1px solid #EEE;
  transition: 0.3s;
}

.entry-card-wrap:hover {
  box-shadow: 0 8px 14px rgba(128, 116, 143, 0.15);
  transform: translateY(-3px);
}

.cat-label {
  background: var(--purple-sub) !important;
  color: #fff !important;
  border-radius: 6px;
}

/************************************
** 4. SNSアイコン
************************************/
.sns-buttons a, .follow-button a, .header .sns a, .sns-share a {
  background-color: transparent !important;
  color: var(--mint-main) !important;
  border: 2px solid var(--mint-main) !important;
  transition: all 0.25s ease;
}

.sns-buttons a:hover, .follow-button a:hover {
  color: var(--purple-main) !important;
  border-color: var(--purple-main) !important;
}

/************************************
** 5. サイドバー
************************************/
#sidebar { font-size: 0.95rem; }

.widget {
  margin-bottom: 25px !important;
  padding: 0 !important;
}

#sidebar h3.widget-title {
  background: #f7f7f7;
  color: var(--text-main);
  font-size: 1.05rem;
  padding: 10px 15px;
  border-left: 5px solid var(--mint-main);
  border-radius: 4px;
  margin-bottom: 15px;
}

/* 検索窓（重なり解消・縦並び安定版） */
.search-form {
  display: block !important;
  border: none !important;
  background: transparent !important;
  height: auto !important;
  position: relative !important;
  padding: 0 !important;
  margin-bottom: 25px !important;
}

.search-edit {
  display: block !important;
  width: 100% !important;
  height: 54px !important;
  background-color: #f5f5f5 !important;
  border: 2px solid #ccc !important;
  border-radius: 30px !important;
  padding: 0 20px !important;
  font-size: 1rem !important;
  color: #51465C !important;
  margin: 0 0 12px 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.search-submit {
  display: block !important;
  width: 100% !important;
  height: 54px !important;
  background-color: #8ECFB5 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 30px !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  cursor: pointer !important;
  position: relative !important;
  margin: 0 !important;
  transition: 0.3s;
}

.search-submit:hover { background-color: #80748F !important; }

/* カテゴリーリスト */
#sidebar .widget_categories ul li {
  border-bottom: 1px dashed #eee;
  list-style: none;
}

#sidebar .widget_categories ul li a {
  display: block;
  padding: 8px 0 8px 20px;
  color: var(--text-main);
  position: relative;
}

#sidebar .widget_categories ul li a::before {
  content: "●";
  position: absolute;
  left: 0;
  color: var(--mint-main);
  font-size: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
}

.post-count {
  font-size: 0.75rem;
  background: #f0fcf4;
  color: var(--mint-main);
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 5px;
}

/* 人気記事 */
.widget_popular_entries .ranking-number {
  background-color: var(--mint-main) !important;
  color: #fff !important;
  border-radius: 50%;
}
.widget_popular_entries .ranking-1 .ranking-number {
  background-color: var(--purple-main) !important;
}
.widget_popular_entries .popular-entry-card-title {
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: bold;
}

/************************************
** 6. プロフィール
************************************/
.author-box {
  background-color: #ffffff !important;
  border: 1px solid #eee !important;
  border-radius: 15px !important;
  padding: 20px 15px !important;
  text-align: center;
}

.author-box .author-thumb img {
  border: 3px solid var(--mint-main);
  padding: 3px;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  object-fit: cover;
}


/* ================================
   記事ベースデザイン
================================ */

/* 記事本文 全体 */
.entry-content {
  color: #4a4a4a;
  line-height: 1.9;
  font-size: 1rem;
}
/* 2. 導入ボックス（パステルポップ版） */
.intro-soft-box {
  background: var(--pink-bg) !important;
  border: 3px dashed var(--pink-pop) !important;
  border-radius: 25px !important;
  padding: 40px 20px !important;
  margin-bottom: 40px !important;
  text-align: center !important;
  /* ステッカー風のぷっくり影 */
  box-shadow: 6px 6px 0 var(--shadow-pop) !important;
}

.intro-soft-box p {
  color: var(--text-pop) !important;
  font-size: 1.05rem !important;
  margin-bottom: 1.5em !important;
  line-height: 1.8 !important;
}

.intro-soft-box p:last-child {
  margin-bottom: 0 !important;
}

/* ボックス内の強調ライン */
.intro-soft-box strong {
  background: linear-gradient(transparent 60%, var(--mint-pop) 60%) !important;
  font-weight: bold !important;
}

/* H2：ミント×やさしいアクセント */
.entry-content h2 {
  position: relative;
  padding: 14px 18px;
  background: #f0f9f6;
  border-radius: 6px;
  color: #5fb996;
  font-size: 1.4rem;
  font-weight: bold;
  border-left: 6px solid #8ecfb5;
  margin: 42px 0 26px;
  font-family: "Zen Maru Gothic", sans-serif !important;
}

/* H3：ラベンダーの点線（控えめ） */
.entry-content h3 {
  color: #80748F;
  border-bottom: 2px dashed #e6dff0;
  padding-bottom: 6px;
  margin: 0px 0 16px;
  font-size: 1.2rem;
  font-family: "Zen Maru Gothic", sans-serif !important;
}

/* 段落 */
.entry-content p {
  margin: 0 0 1.3em;
}


/* 吹き出し（ママの声） */
.mama-talk {
  background: #fff5f7;
  border: 2px solid #ffccd5;
  border-radius: 16px;
  padding: 22px;
  margin: 34px 0;
}

/* ステップボックス（情報整理用） */
.step-box {
  background: #ffffff;
  border: 2px solid #8ecfb5;
  border-radius: 18px;
  padding: 26px;
  margin: 40px 0;
}

.step-box-title {
  display: inline-block;
  background: #8ecfb5;
  color: #fff;
  padding: 4px 14px;
  border-radius: 10px;
  font-weight: bold;
  margin-bottom: 18px;
  font-size: 0.95rem;
}
.text-center { text-align: center !important; }
.mt-20 { margin-top: 20px !important; }
.mb15{  margin-bottom: 15px!important;}



/* --- サーバー比較ナビのレイアウト --- */
.server-compare-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 30px 0;
}

.server-card {
    flex: 1;
    min-width: 280px;
    position: relative;
    background: #fff;
    border: 1.5px solid #eee;
    border-radius: 15px;
    padding: 35px 20px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.server-card-content {
    margin-bottom: 20px;
}

.server-card-title {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--text-main, #51465C);
    margin-bottom: 8px;
    display: block;
}

.server-card-desc {
    font-size: 0.9em;
    line-height: 1.6;
    color: #666;
}

/* --- サーバーカード専用：アイコン風ラベル --- */
.recommend-label {
  display: inline-block;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  font-size: 1rem;
  font-weight: bold;
  color: #fff !important;
  border-radius: 10px; /* 丸みのあるアイコン形状 */
  margin-bottom: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 少し浮かせたアイコン感 */
  letter-spacing: 0.05em;
}

/* ラベルの前にキラキラアイコンを追加 */
.recommend-label::before {
    content: "★"; /* 星マークなどをアイコンとして追加 */
    margin-right: 5px;
    font-size: 0.9em;
}

/* サーバーごとのラベルカラー */
.label-conoha  { background: var(--mint-main, #8ECFB5) !important; }
.label-xserver { background: var(--purple-main, #80748F) !important; }
.label-lolipop { background: #f0ad4e !important; } /* オレンジ系 */


/* --- 比較ナビ専用のボタン --- */
.btn-server {
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 25px;
    color: #fff !important;
    font-size: 0.85em;
    font-weight: bold;
    text-decoration: none !important;
    transition: opacity 0.3s;
}

.btn-server:hover {
    opacity: 0.8;
}

/* スマホ表示の微調整 */
@media screen and (max-width: 768px) {
    .server-compare-grid {
        gap: 40px; /* スマホでは縦並びになるので間隔を広げる */
    }
}


/* ロードマップ全体の縦線：太めのラベンダー点線 */
.roadmap-container {
  border-left: 5px dotted var(--purple-pop) !important;
  margin: 40px 0 40px 30px !important;
  padding-left: 40px !important;
  position: relative !important;
}

/* 各ステップのカード：白背景 + ミントの枠線 + ポップな影 */
.roadmap-container .step-box {
  background: #ffffff !important;
  border: 2px solid var(--mint-pop) !important;
  border-radius: 20px !important;
  padding: 30px !important;
  margin-bottom: 50px !important;
  position: relative !important;
  /* ぼかさないポップな影 */
  box-shadow: 6px 6px 0 var(--mint-bg) !important;
}

/* 最後のカードは余白を調整 */
.roadmap-container .step-box:last-child {
  margin-bottom: 0 !important;
}

/* ステップバッジ：ピンクのぷっくりタグ */
.roadmap-container .step-badge {
position: absolute !important;
  top: 50% !important;
  left: -73px !important;
  transform: translateY(-50%) !important;
  background: var(--pink-pop) !important;
  color: #fff !important;
  width: 65px !important;
  height: 65px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Zen Maru Gothic', sans-serif !important;
  font-weight: 900 !important;
  /* --- 修正ポイントここから --- */
  font-size: 11px !important;       /* 12pxから11pxへ微調整 */
  white-space: nowrap !important;   /* 絶対に改行させない */
  letter-spacing: -0.05em !important; /* 文字間隔をわずかに詰めて収める */
  line-height: 1 !important;        /* 行間を詰めて上下中央を安定させる */
  /* --- 修正ポイントここまで --- */
  border: 3px solid #fff !important;
  box-shadow: 3px 3px 0 var(--shadow-pop) !important;
  z-index: 2 !important;
  padding: 0 4px !important;        /* 左右に最低限の余白を確保 */
  box-sizing: border-box !important;
}

/* ステップカード内のタイトル */
.roadmap-container .step-box h4 {
  all: unset !important;
  display: block !important;
  font-family: 'Zen Maru Gothic', sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.2rem !important;
  color: var(--text-pop) !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
}

/* ステップカード内のテキスト */
.roadmap-container .step-box p {
  font-size: 0.95rem !important;
  line-height: 1.8 !important;
  margin: 0 !important;
  color: #666 !important;
}
/* アドバイス・ヒント箱 */
.point-kawaii {
background: #fff;
    border: 3px dotted var(--mint-main);
    border-radius: 15px;
    padding: 25px; /* 少し広めに */
    margin: 2em 0;
}
.point-kawaii h4 {
    all: unset !important;
    display: block !important;
    color: var(--mint-main) !important; /* !importantを追加 */
    margin-top: 0 !important;
    font-size: 1.25em !important;
    font-weight: bold !important;
    margin-bottom: 15px !important;
}

/* ロゴ設定・デザイナーの目線ボックスの調整 */
.logo-point {
    border-left: 5px solid var(--purple-sub);
    padding: 15px 20px;
    /* 上の余白を 30px に広げ、下を 15px に設定 */
    margin: 30px 0 15px 0 !important; 
    background: var(--purple-bg);
    font-size: 0.9em;
    color: var(--text-main);
    border-radius: 0 10px 10px 0;
    line-height: 1.7;
    /* 前の要素と重ならないようブロック属性を明示 */
    display: block !important;
    clear: both;
}

/* AI相談のコツ（ChatGPT/Gemini） */
.ai-consult-box {
    background: var(--purple-bg, #F5F0F9);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.consult-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    color: var(--purple-main, #80748F);
    margin-bottom: 10px;
}

/* 内部リンクカード */
.nav-link-card {
    margin-top: 30px;
    padding: 25px;
    background: #fff;
    border: 2px solid var(--purple-main, #80748F);
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.nav-link-card:hover {
    transform: translateY(-3px);
}

.nav-link-header {
    display: block;
    text-align: center;
    font-size: 0.85em;
    color: #888;
    margin-bottom: 12px;
}