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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*カルーセルをメニューの下へ配置*/
function my_custom_widget_areas() {
    register_sidebar( array(
        'name'          => 'カルーセルエリア',
        'id'            => 'carousel-widget',
        'before_widget' => '<div class="carousel-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2>',
        'after_title'   => '</h2>',
    ));
}
add_action( 'widgets_init', 'my_custom_widget_areas' );

<div class="carousel-area">
    <?php if ( is_active_sidebar( 'carousel-widget' ) ) : ?>
        <?php dynamic_sidebar( 'carousel-widget' ); ?>
    <?php endif; ?>
</div>



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

}

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

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

}

/********************************
ボックスメニューのカスタマイズ追加分
********************************/

.box-menu{
	margin: 0;
	padding: 0;
	min-height: 0;
	background-color: transparent;
}
/*background-color: transparentで背景透過してる*/
.box-menu:hover{
	box-shadow:none;
	opacity: 0.8;
} 

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

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

/* 4カテゴリーの幅に変更 */
@media screen and (min-width: 600px){
.wwa .box-menu {
	width: 25%;
}
}

/* 枠線を消す */
/* .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){
  /*必要ならばここにコードを書く*/
}

/* /モバイル/
/メニュー１行にする/追加分 */
@media screen and (max-width: 599px){
.box-menus .box-menu {
width: calc(100%/4); /* メニューの数 / } .box-menu-label{ font-size: 8px; / 文字サイズ */
margin: 0;
max-width: 100%;
max-height: 100%;
}

.box-menu {
padding: 0;
}

.box-menu{
min-height: 20px; /* 高さ */
}
.box-menu-icon *{
	margin: 0;
	max-width: 100%;
	max-height: 300px;
}
}