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

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


/************************************
** Gutenberg の flex を全ページで復活
************************************/

/* ▼▼ Cocoon が columns を 2列に固定する仕様を上書き ▼▼ */
.wp-block-columns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  justify-content: center !important;
}

/* .wp-block-column の固定幅を削除 */
.wp-block-column {
  flex-basis: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ▼ figure を均等幅カード化（自動で横に並ぶ） ▼ */
.wp-block-columns > .wp-block-column figure,
.wp-block-group > figure,
.wp-block-group > .wp-block-group > figure {
  flex: 1 1 250px;
  max-width: 600px;
  box-sizing: border-box;
}

/* 画像がはみ出さないように */
.wp-block-columns figure img,
.wp-block-group figure img {
  width: 100%;
  height: auto;
  display: block;
}

/************************************
** alignwide 用（スキルボックス等）
************************************/
.wp-block-group.alignwide {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px !important;
  max-width: var(--content-width, 1280px);
  margin-left: auto;
  margin-right: auto;
}

/************************************
** ボタン
************************************/

.wp-block-button__link {
  transition: transform 0.3s ease;
}

.wp-block-button__link:hover {
  transform: scale(1.08);
  background-color: inherit;
  color: inherit;
}

/* Cocoon ヘッダーのサイト名テキストを消す */
.header .site-name {
  display: none !important;
}


/************************************
** レスポンシブ
************************************/
@media (max-width: 768px) {
  .wp-block-columns > .wp-block-column figure,
  .wp-block-group > figure {
    flex: 1 1 45%;
  }
}

@media (max-width: 480px) {
  .wp-block-columns > .wp-block-column figure,
  .wp-block-group > figure {
    flex: 1 1 100%;
  }
}