@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.2
*/

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


/* タブタイトル付き囲み枠 *******************************************************/
.box4 {
 position: relative;
 margin: 3em auto;
 padding: 1em 1em;
 width: 96%;
 border: 2px solid #FAB428;/* 枠線の太さ・色 */ 
}

.box4-title {
 position: absolute;
 display: inline-block;
 top: -26px;
 left: -2px;
 padding: 0 9px;
 height: 25px;
 line-height: 25px;
 content: "";
 vertical-align: middle;
 font-size: 15px;
 font-weight: bold;
 color: #ffffff;/* タイトル色 */
 background: #FAB428;/* タイトル背景色 */
 border-radius: 5px 5px 0 0;
}

/*タイトルを広げた囲み枠影付き*******************************************************/
.box30 {
    margin: 2em 0;
    background: #E5F2FF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
    font-size: 1.2em;
    background: #5FB3F5;
    padding: 4px;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box30 p {
    padding: 15px 20px;
    margin: 0;
}

/*枠の途中にタイトル（水色）**************************************************************/
.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #0066cc;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

/*枠の途中にタイトル（黄色）**************************************************************/
.box26-y {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #ffd664;
    border-radius: 8px;
}
.box26-y .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #fff;
    color: #ffa103;
    font-weight: bold;
}
.box26-y p {
    margin: 0; 
    padding: 0;
}



/*関連記事抜粋を非表示******************************************************/
.related-entry-card-snippet {
    display: none;
}

/*見出し装飾****************************************************************/
h2 {
border-radius: 0.2em;/*角の丸み*/
}

.sidebar h3 {
border-radius: 0.2em;/*角の丸み*/
}



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

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

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

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