@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Template: cocoon-master
Version: 1.1.3
*/

/* 1. ボックスメニュー全体の並び（PCは横一列） */
.box-menus {
  display: flex !important;
  flex-wrap: nowrap !important; /* 勝手に折り返さない */
  justify-content: space-between !important;
  padding: 0 !important;
}

/* 2. 各ボタンの枠線と背景を消す */
.box-menu {
  flex: 0 0 24% !important; /* 4つ並べるための幅 */
  background-color: transparent !important; /* 背景を透明に */
  border: none !important; /* 白い枠線を消す */
  box-shadow: none !important; /* 影を消す */
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. 中のリンクや画像の余白をゼロにする */
.box-menu a,
.box-menu-icon,
.box-menu-image {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* 4. ラベル（文字）を非表示 */
.box-menu-label {
  display: none !important;
}

/* 5. スマホ表示（599px以下）で2段にする */
@media screen and (max-width: 599px) {
  .box-menus {
    flex-wrap: wrap !important; /* スマホだけ折り返す */
  }
  .box-menu {
    flex: 0 0 48% !important; /* 横に2つ並べる */
    margin: 1% !important;   /* 上下左右に少しだけ隙間を作る */
  }
}