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

/************************************
** 子テーマ用のスタイルを書く
************************************/


/****追加CSS：アコーディオン****/
.accordion-003 {
    /* アコーディオン全体の上下の余白（数値を小さくして詰めています） */
    margin-top: 0.2em;
    margin-bottom: 0.5em;
}

.accordion-003 summary {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    /* バーの内側の余白（上下を小さく、左を0にしています） */
    padding: 0.4em 1em 0.4em 0;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

/* デフォルトの矢印を非表示 */
.accordion-003 summary::-webkit-details-marker {
    display: none;
}

/* カスタム矢印のスタイル */
.accordion-003 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .3s;
}

/* 開いた時の矢印の向き */
.accordion-003[open] summary::after {
    transform: rotate(225deg);
}

/* 中のコンテンツのスタイル */
.accordion-003 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    /* 左の余白を0に揃える */
    padding: .3em 1em 1.5em 0;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

/* 開いた時のコンテンツのスタイル */
.accordion-003[open] p {
    transform: none;
    opacity: 1;
}

/****追加CSS：アコーディオンここまで****/

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

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

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