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



/* 白ステッチをつける */
.box3-4 {
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   padding: 2em; /* 内側余白 */
   position: relative;
   z-index: 0;
   background-color: #d6e0ea; /* 淡いブルーグレー */
}

.box3-4::before {
   content: '';
   position: absolute;
   inset: 0; /* top, right, bottom, left を一括指定 */
   margin: 5px;
   border: 2px dashed #fff;
   border-radius: 3px;
   z-index: -1;
   display: block;
}

/* pタグの余白 */
.box3-4 p {
   margin: 0;
}


/* チェックマークのアイコンをつけた囲み枠 */
.box6-4 {
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   padding: 1em 2em 1.5em; /* 上下・左右の余白 */
   background-color: #fff4cc; /* 背景色 */
   border-radius: 10px; /* ボックスの角の丸み */
}

/* ボックスのタイトル部分 */
.box6-4 .box-title {
   color: #FFBD59; /* タイトル文字の色 */
   font-size: 1.1em; /* タイトル文字の大きさ */
   font-weight: bold; /* 太字 */
}


/* セロテープ風 */
.box5-6 {
   position: relative; /* タイトルをボックス内の左上に配置するための基準 */
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   background-color: #E6ECF2; /* ボックス背景色 */
}

.box5-6 .box-title {
   background-color: rgb(255 255 255 / .1); /* テープ背景色と透過 */
   border-left: 2px dotted rgb(0 0 0 / .1); /* テープのギザギザ左 */
   border-right: 2px dotted rgb(0 0 0 / .1); /* テープのギザギザ右 */
   box-shadow: 0 0 5px rgb(0 0 0 / .12); /* テープ影 */
   transform: rotate(-2deg); /* テープの傾き */
   color: #666; /* タイトル文字色 */
   padding: 10px 20px; /* タイトルの余白 */
   line-height: 1; /* タイトルの行の高さ */
   position: absolute; /* 親要素の左上に固定 */
   top: -1em; /* 上端に配置 */
   left: 1em; /* 左端に配置 */
   display: inline-block; /* タイトルの幅を内容に合わせる */
   font-size: 0.9em; /* タイトルのフォントサイズ */
   width: auto; /* タイトル幅を内容に応じて可変にする */
   max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
   white-space: nowrap; /* タイトルを1行に固定 */
   overflow: hidden; /* はみ出した部分を非表示 */
   text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.box5-6 .box-content {
   padding: 2.5em 2em 2em; /* コンテンツ内の余白 */
}

/* pタグの余白を0にする */
.box5-6 p {
   margin: 0;
}