@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){
  /*必要ならばここにコードを書く*/
}
/* ==========================================================================
   Cocoon：ボックスメニューを極上角丸パステルカードに変身させるCSS
   （英語版ブルー・説明文左寄せ・!important完全不使用 / メニュー数自動追従）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 全体の共通設定
   -------------------------------------------------------------------------- */
/* 全体の囲み：余計な外枠線を消して、中央に寄せる */
.widget_box_menu div.box-menus {
  border: none;
  margin: 40px auto;
  max-width: 1200px;
  width: 100%;
}

/* 各カードの共通の基本装飾（爽やかなパステルブルー＆ライトグレー仕様） */
.widget_box_menu div.box-menus a.box-menu {
  background-color: #f5f8fa; /* 清潔感のあるごく薄いペールブルー */
  border: none; /* 標準 of グレーの細線をシャットアウト */
  border-radius: 16px; /* コロンとした可愛い角丸 */
  box-shadow: 0 2px 12px rgba(135, 161, 186, 0.05); /* ほんの少しの影 */
  margin: 10px; /* カード同士の適度な隙間 */
  padding: 30px 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none; /* リンクの下線を消す */
}

/* マウスホバー：ふんわり浮かび上がるリッチな演出 */
.widget_box_menu div.box-menus a.box-menu:hover {
  background-color: #f5f8fa; /* ホバー時の変色を防ぐ */
  box-shadow: 0 8px 24px rgba(135, 161, 186, 0.15);
  transform: translateY(-4px);
}

/* アイコンの装飾：くすみブルーの丸背景＆フォントサイズ */
.widget_box_menu div.box-menus a.box-menu div.box-menu-icon {
  background-color: #e6eef4; /* アイコン背景の少し濃いブルー */
  border-radius: 50%;
  color: #7da2c4; /* 上品で涼しげなくすみブルー */
  display: inline-block;
  font-size: 28px;
  height: 70px;
  line-height: 70px;
  margin: 0 auto 20px auto;
  text-align: center;
  width: 70px;
  float: none; /* Cocoon標準の左寄せを中央寄せにリセット */
}

/* アイコンフォントのズレや文字化け防止 */
.widget_box_menu div.box-menus a.box-menu div.box-menu-icon i {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
}

/* タイトル部分：フォントカラーと余白を上書き（ここは中央揃えのまま） */
.widget_box_menu div.box-menus a.box-menu div.box-menu-label {
  color: #3b4c5c; /* 深みのあるブルーグレー */
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1.4;
  margin: 0 0 12px 0;
}

/* 説明テキスト部分：★読みやすさ重視で「左寄せ」に修正★ */
.widget_box_menu div.box-menus a.box-menu div.box-menu-description {
  color: #556370; /* 優しいミディアムブルーグレー */
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  text-align: left; /* ←ここを左寄せ（left）にして可読性を最優先に！ */
}


/* --------------------------------------------------------------------------
   2. PC画面用の設定（広い画面で5並びを固定）
   -------------------------------------------------------------------------- */
@media screen and (min-width: 960px) {
  /* 親の並び方をFlexboxにして、絶対に折り返さずに1行に収める */
  .widget_box_menu div.box-menus {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* 子（カード）の固定幅を解除し、4個なら4等分、5個なら5等分に自動等幅伸縮 */
  .widget_box_menu div.box-menus a.box-menu {
    width: auto; /* Cocoonの「240px固定」をリセット */
    flex: 1 1 0; /* メンバー数に合わせて、全員で同じ幅を分け合う魔法 */
  }
}


/* --------------------------------------------------------------------------
   3. スマホ画面用の設定（縦積みに綺麗に切り替え）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 599px) {
  .widget_box_menu div.box-menus {
    display: flex;
    flex-direction: column;
  }
  .widget_box_menu div.box-menus a.box-menu {
    width: calc(100% - 20px); /* 左右のマージンを考慮して幅いっぱいに広げる */
    margin: 10px auto;
  }
}