@charset "UTF-8";

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

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

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

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

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

/* シンプル 枠 1*/
.kakomi-box1 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 background-color: #fff; /* 背景色 */
 border: 1px solid #ccc; /* 枠線 */
}

/* シンプル 枠（影）1 */
.kakomi-box3 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 border: 1px solid #ccc; /* 枠線 */
 background-color: #fff; /* 背景色 */
 box-shadow: 1px 1px 2px #ccc;
}

/* シンプル 枠（影）2 */
.kakomi-box4 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 background-color: #FFF5EE; /* 背景色 */
 box-shadow: 0 0 5px 1px #ccc; /* 影 */
}

/* タイトル付　枠　1　*/
.kakomi-box11 {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 color: #555555; /* 文章色 */
 background-color: #fff; /* 背景色 */
 border: 1px solid #555555; /* 枠線の太さ・色 */
 width: 90%;
}
.title-box11 {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}

/* メモ　クリップ　Ｂ */
.clip-box-b {
 position: relative;
 margin: 2em auto;
 padding: 15px 35px 15px 25px;
 width: 90%; /* ボックス幅 */
 background-color: #FFE4E1; /* ボックス背景色 */
 color: #666666; /* 文章色 */
 box-shadow: 4px 4px 1px #FFB6C1; /* 影の色 */
}
.clip-box-b::before {
 position: absolute;
 content: '';
 top: -15px;
 right: 10px;
 height: 55px;
 width: 15px;
 border: 3px solid #C0C0C0; /*クリップ色 */
 background-color: none;
 border-radius: 12px;
 box-shadow: 1px 1px 2px #ccc; /*クリップ影*/
 transform: rotate(10deg);
 z-index: 1;
}
.clip-box-b::after {
 position: absolute;
 content: '';
 top: 0px;
 width: 10px; 
 right: 20px;
 border: solid 5px #FFE4E1; /*背景色と同じ色に！*/
 z-index: 2;
}

/* メモ　ホチキス　Ａ */
.Hochi-box-a {
 position: relative;
 margin: 2em auto;
 padding: 20px 20px 20px 35px;
 width: 90%; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #555555; /* 文章色 */
 border: 1px solid #d9333f; /* 枠線 */
 box-shadow: 2px 2px 2px #ccc; /* 影の色 */
}
.Hochi-box-a::before {
 position: absolute;
 content: '';
 top: 5px;
 left: 20px;
 height: 30px;
 border: 1.5px solid #d9333f; /* ホチキス色 */
 border-radius: 12px;
 box-shadow: 1px 1px 1px #333;
 transform: rotate(45deg);
}