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

/* リセットとボックスサイジング */
.wp-custom-box *,
.wp-custom-box *:before,
.wp-custom-box *:after {
    box-sizing: border-box;
}

/* 基本ボックススタイル */
.wp-custom-box {
    position: relative !important;
    margin: 2em auto !important;
    width: 100% !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    line-height: 1.6 !important;
    z-index: 0 !important;
}

/* ラベルなしボックスのパディング */
.wp-custom-box {
    padding: 1.5em !important;
}

/* ラベル付きボックスのパディング */
.wp-custom-box.has-label {
    padding: 2em 1.5em 1em !important; /* 下側のpaddingを減らした */
}

/* ラベル基本スタイル */
.wp-custom-box .box-label {
    position: absolute !important;
    left: -2px !important;
    top: -2px !important;
    display: inline-block !important;
    padding: 0.5em 1em !important;
    font-size: 0.9em !important;
    font-weight: bold !important;
    line-height: 1 !important;
    color: #ffffff !important;
    border-radius: 8px 0 8px 0 !important;
    z-index: 1 !important;
}

/* ボックス内のテキスト */
.wp-custom-box p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

/* リストのスタイリング */
.wp-custom-box ul {
    padding-left: 15px; /* 左側のインデント調整 */
    margin: 0;
}

.wp-custom-box li {
    margin-bottom: 0.25em; /* 各項目の下のマージンを小さく */
}

/* カラーバリエーション - 背景と枠線 */
.box-gray {
    background-color: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
}

.box-blue {
    background-color: #f0f8ff !important;
    border-color: #cce5ff !important;
}

.box-green {
    background-color: #f0fff0 !important;
    border-color: #ccffcc !important;
}

.box-yellow {
    background-color: #fffff0 !important;
    border-color: #ffffcc !important;
}

.box-brown {
    background-color: #fff8f0 !important;
    border-color: #ffe4c4 !important;
}

.box-purple {
    background-color: #faf0ff !important;
    border-color: #e6ccff !important;
}

/* ラベルカラー */
.box-gray .box-label {
    background-color: #757575 !important;
}

.box-blue .box-label {
    background-color: #4285f4 !important;
}

.box-green .box-label {
    background-color: #34a853 !important;
}

.box-yellow .box-label {
    background-color: #fbbc05 !important;
}

.box-brown .box-label {
    background-color: #b87a3d !important;
}

.box-purple .box-label {
    background-color: #a142f4 !important;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .wp-custom-box {
        margin: 1.5em auto !important;
        padding: 1.2em !important;
    }
    
    .wp-custom-box.has-label {
        padding: 1.8em 1.2em 1.2em !important;
    }
    
    .wp-custom-box .box-label {
        padding: 0.3em 0.8em !important;
        font-size: 0.8em !important;
    }
}