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

.article h2 {
padding: 0;
background: none;
}

.article h3{
  border:none;
}


.article h2 {
  background: #52b9ff; /*背景色*/
  padding: 1.0em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  border-radius: 0.5em;/*角の丸み*/
}


.article h3 {
  color: #6cb4e4;
  text-align: center;
  padding: 0.25em;
  border-top: solid 2px #6cb4e4;
  border-bottom: solid 2px #6cb4e4;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

/* 左上にずらした背景色ありタイトル */
.box5-4 {
    position: relative; /* タイトルをボックス内の左上に配置するための基準 */
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    border: 1px solid #CCA99D; /* 枠線の色を設定 */
    border-radius: 5px; /* 角を少し丸めて柔らかい印象に */
}

.box5-4 .box-title {
    background-color: #CCA99D; /* タイトルの背景色 */
    color: #fff; /* タイトルの文字色（白） */
    padding: 0.1em 1em; /* タイトルの内側余白（上下・左右） */
    position: absolute; /* 親要素（.box5-4）の中で固定配置 */
    top: -0.8em; /* タイトルをボックスの上に少しはみ出させる */
    left: 1em; /* 左側に少し余白を取る */
    display: inline-block; /* タイトルの幅を内容に合わせる */
    font-size: 0.9em; /* タイトルのフォントサイズを設定 */
    border-radius: 5px; /* タイトルの角を丸める */
    width: auto; /* タイトル幅を内容に応じて可変にする */
    max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
    white-space: nowrap; /* タイトルを1行に固定 */
    overflow: hidden; /* はみ出した部分を非表示 */
    text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.box5-4 .box-content {
    padding: 3em 2em 2em; /* 上部の余白を多めに確保し、タイトルと本文が重ならないようにする */
}

.box5-4 p {
    margin: 0; /* 段落の余白をなくして統一感を出す */
}


/* 左上にずらした背景色ありタイトル */
.box5-5 {
    position: relative; /* タイトルをボックス内の左上に配置するための基準 */
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    border: 1px solid #0eb3c2; /* 枠線の色を設定 */
    border-radius: 5px; /* 角を少し丸めて柔らかい印象に */
}

.box5-5 .box-title {
    background-color: #0eb3c2; /* タイトルの背景色 */
    color: #fff; /* タイトルの文字色（白） */
    padding: 0.1em 1em; /* タイトルの内側余白（上下・左右） */
    position: absolute; /* 親要素（.box5-4）の中で固定配置 */
    top: -0.8em; /* タイトルをボックスの上に少しはみ出させる */
    left: 1em; /* 左側に少し余白を取る */
    display: inline-block; /* タイトルの幅を内容に合わせる */
    font-size: 0.9em; /* タイトルのフォントサイズを設定 */
    border-radius: 5px; /* タイトルの角を丸める */
    width: auto; /* タイトル幅を内容に応じて可変にする */
    max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
    white-space: nowrap; /* タイトルを1行に固定 */
    overflow: hidden; /* はみ出した部分を非表示 */
    text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.box5-5 .box-content {
    padding: 3em 2em 2em; /* 上部の余白を多めに確保し、タイトルと本文が重ならないようにする */
}

.box5-5 p {
    margin: 0; /* 段落の余白をなくして統一感を出す */
}



/* 左上にタイトル（背景色付き） */
.box5-3 {
    position: relative; /* タイトルをボックス内の左上に配置するための基準 */
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    border: 1px solid #757575; /* 枠線の設定 */
}

.box5-3 .box-title {
    background-color: #757575; /* タイトルの背景色 */
    color: #fff; /* タイトルの文字色（白） */
    padding: 0.1em 1em; /* タイトルの内側余白（上下・左右） */
    position: absolute; /* 親要素（.box5-3）の左上に固定 */
    top: 0; /* 上端に配置 */
    left: 0; /* 左端に配置 */
    display: inline-block; /* タイトルの幅を内容に合わせる */
    font-size: 0.9em; /* タイトルのフォントサイズ */
    width: auto; /* タイトル幅を内容に応じて可変にする */
    max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
    white-space: nowrap; /* タイトルを1行に固定 */
    overflow: hidden; /* はみ出した部分を非表示 */
    text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.box5-3 .box-content {
    padding: 3em 2em 2em; /* 上部の余白を多めに確保し、タイトルと本文が重ならないようにする */
}

.box5-3 p {
    margin: 0; /* 段落の余白をなくして統一感を出す */
}

/* 左上にずらした背景色ありタイトル */
.box5-4 {
   position: relative; /* タイトルをボックス内の左上に配置するための基準 */
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   border: 1px solid #CCA99D; /* 枠線の色を設定 */
   border-radius: 5px; /* 角を少し丸めて柔らかい印象に */
}

.box5-4 .box-title {
   background-color: #CCA99D; /* タイトルの背景色 */
   color: #fff; /* タイトルの文字色（白） */
   padding: 0.1em 1em; /* タイトルの内側余白（上下・左右） */
   position: absolute; /* 親要素（.box5-4）の中で固定配置 */
   top: -0.8em; /* タイトルをボックスの上に少しはみ出させる */
   left: 1em; /* 左側に少し余白を取る */
   display: inline-block; /* タイトルの幅を内容に合わせる */
   font-size: 0.9em; /* タイトルのフォントサイズを設定 */
   border-radius: 5px; /* タイトルの角を丸める */
   width: auto; /* タイトル幅を内容に応じて可変にする */
   max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
   white-space: nowrap; /* タイトルを1行に固定 */
   overflow: hidden; /* はみ出した部分を非表示 */
   text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.box5-4 .box-content {
   padding: 3em 2em 2em; /* 上部の余白を多めに確保し、タイトルと本文が重ならないようにする */
}

.box5-4 p {
   margin: 0; /* 段落の余白をなくして統一感を出す */
}