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

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


/************************************
** ここから↓　★までは自分で追記している！
************************************/
/*20250202_1704追加 マウスオーバー時に画像を大きくする方法*/
.box-menu-icon img{
	transition:0.3s all;
}

.box-menu-icon img:hover{
	transform: scale(1.1,1.1);
	transition: 0.5s all;
}

/*20250202_1730追加 ボックスメニューの画像を大きくするCSS*/
.box-menu{
	padding: 0;
	min-height: 0;
}

.box-menu:hover{
	box-shadow:none;
	opacity: 0.8;
} 

.box-menu-label,
.box-menu-description{
	display: none;
}

.box-menu-icon *{
	margin: 0;
	max-width: 80%;
	max-height: 300px;
}

/*20250202_2222追加 ボックスメニューの列数を変える方法*/
@media screen and (min-width: 600px){
.wwa .box-menu {
	width: 20%;
}
}

/*20250202_2226追加 ボックスメニュー間に間隔を入れる*/
@media screen and (min-width: 600px){
.wwa .box-menu{
	margin-right: 5%;
}
}

/*20250202_2246追加 →20250204_2217削除 【スマホ用】ボックスメニューの列数を変える方法&ボックスメニュー間に間隔を入れる*/
/*@media screen and (max-width: 599px){
.wwa .box-menu {
	width: 47%;
}
}
@media screen and (max-width: 599px){
.wwa .box-menu{
	margin: 2%;
}
}

/*20250204_2217追加 【スマホ用】ボックスメニューの列数を変える方法&ボックスメニュー間に間隔を入れる*/
@media screen and (max-width: 599px){
.wwa .box-menu {
	width: 47%!important;
	margin: 1.5%;
}
}

/*20250202_2224追加 ボックスメニューのセンタリング*/
.box-menu:first-child {
    margin-left: auto;
}

.box-menu:last-child{
    margin-right: auto;
}

/*20250202_2240追加 ボックスメニューの枠線を削除*/
.box-menu{
box-shadow:none;
}

/************************************
** ここから↑　★までは自分で追記している！
************************************/


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

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

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

/*固定ページの更新日を非表示にする*/
.page .date-tags {
display: none;
}