@charset "UTF-8";

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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
	
		
	
}


/*固定ページ&投稿のスタイル指定*/
/*h3-5*/
.cocoon-child.m3 {
    color :dodgerblue;
    font-size: x-large;
    font-weight: bold;
 }

.cocoon-child.m31 {
    color :#590c11;
    font-size: large;
    font-weight: bold;
 }

.cocoon-child.m32 {
    color :#c71585;
    font-size: 120%;
    font-weight: bold;
 }

.cocoon-child.m4 {
    color :#c71585;
    font-size: medium;
 }

.cocoon-child.m5 {
    color :#c71585;
    font-size: small;
 }

.cocoon-child.m51 {
    color :black;
    font-size: small;
 }


/*見た目　Appearance*/
.cocoon-child.a4{
    color :red;
    font-size: medium;
 }

.cocoon-child.a5 {
    color :red;
    font-size: small;
 }

.cocoon-child.t1 {
    color :pink;
    font-size: xx-large;
    font-weight: bold;
 }

.cocoon-child.t11 {
    color :#404040;
    font-size: xx-large;
    font-weight: bold;
 }


/*デザインボックス*/
.cocoon-child.box-blue{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #d6ebff;
    box-shadow: 0px 0px 0px 10px #d6ebff;
    border: dashed 2px white;
    border-radius: 8px;
}
.cocoon-child.box-blue p {
    margin: 0;
    padding: 0;
}

.cocoon-child.box-red{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px white;
    /*border: dashed 2px #ffc3c3;*/
    border-radius: 8px;
}
.cocoon-child.box-red p {
    margin: 0; 
    padding: 0;
}

.cocoon-child.box-yellow{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #fff799;
    box-shadow: 0px 0px 0px 10px #fff799;
    /*border: dashed 2px #ffdc00;*/
    border: dashed 2px white;
    border-radius: 8px;
}
.cocoon-child.box-yellow p {
    margin: 0; 
    padding: 0;
}
.cocoon-child.box-green {
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #e6eb94;
    box-shadow: 0px 0px 0px 10px #e6eb94;
    border: dashed 2px white;
    border-radius: 8px;
}
.cocoon-child.box-green p {
    margin: 0; 
    padding: 0;
}
.cocoon-child.box-pink {
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #ead6ff;
    box-shadow: 0px 0px 0px 10px #ead6ff;
    /*border: dashed 2px #da81b2;*/
    border: dashed 2px white;
    border-radius: 8px;
}
.cocoon-child.box-pink p {
    margin: 0; 
    padding: 0;
}
.cocoon-child.box19 {
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
}
.cocoon-child.box19 p {
    margin: 0; 
    padding: 0;
}

.cocoon-child.box-salmon{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #fbdac8;
    box-shadow: 0px 0px 0px 10px #fbdac8;
    border: dashed 2px white;
    border-radius: 8px;
}
.cocoon-child.box-salmon p {
    margin: 0;
    padding: 0;
}

.cocoon-child.box-sunshine{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #ffedab;
    box-shadow: 0px 0px 0px 10px #ffedab;
    border: dashed 2px white;
    font-weight: bold; 
    /*border-radius: 8px;*/
}
.cocoon-child.box-sunshine p {
    margin: 0;
    padding: 0;
}

.cocoon-child.box-sunshine u {
    margin: 0;
    padding: 0;
    font-size: small;
}

/********************************/
.cocoon-child.h3{
 color: #590c11;	/* 文字色 */
 overflow: hidden;
 padding: 10px;	/* 余白 */
 position: relative;
}
.cocoon-child.h3:after {
 background-color: #f3a3a8;	/* 1個目（一番左）のドットの色 */
 border-radius: 50%;
 content: '';
 margin-left: 15px;	/* 最後の文字とドットとの余白 */
 position: absolute;
 top: 50%;
 transform : translateY(-50%);
 width: 5px;	/* ドットの幅 */
 height: 5px;	/* ドットの高さ */
 box-shadow: 20px 0px 0px rgb(217,204,179),	/* 2個目のドットの位置と色 */
  40px 0px 0px rgb(217,204,179),	/* 3個目のドットの位置と色 */
  60px 0px 0px rgb(243,163,168),	/* 4個目のドットの位置と色 */
  80px 0px 0px rgb(217,204,179),	/* 5個目のドットの位置と色 */
  100px 0px 0px rgb(217,204,179),	/* 6個目のドットの位置と色 */
  120px 0px 0px rgb(243,163,168),	/* 7個目のドットの位置と色 */
  140px 0px 0px rgb(217,204,179),	/* 8個目のドットの位置と色 */
  160px 0px 0px rgb(217,204,179),	/* 9個目のドットの位置と色 */
  180px 0px 0px rgb(243,163,168),	/* 10個目のドットの位置と色 */
  200px 0px 0px rgb(217,204,179),	/* 11個目のドットの位置と色 */
  220px 0px 0px rgb(217,204,179);	/* 12個目のドットの位置と色 */
}


/***********************/
.cocoon-child.btn-stitch {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #f39800;
  color: #FFF;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 5px #f39800;
  border: dashed 1px #FFF;
}

.cocoon-child.btn-stitch:hover {
  border: dotted 1px #FFF;
}

/*****************/

.cocoon-child.t-box {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.cocoon-child.t-box .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.cocoon-child.t-box ol {
    margin: 10; 
    padding: 20;
}


/*********************************/
.cocoon-child.bubblebox {
 background-color: #fff; /* 背景色 */
 border: 2px solid #f3cbd0; /* 線の太さ・種類・色 */
 border-radius: 5px;
 margin: 40px 5px 5px 20px; /* 外側の余白 上・右・左・下 */
 padding: 25px 20px 10px 20px; /* 内側の余白 上・右・左・下 */
 position: relative;
}
.cocoon-child.bubblebox:before {
 background-color: #ef858c; /* 吹き出し背景色 */
 border-radius: 5px;
 color: #fff; /* 吹き出し文字色 */
 content: '産前産後、伴走します！';
 padding: 5px 20px;
 position: absolute;
 left: -10px;
 top: -20px;
}
.cocoon-child.bubblebox:after {
 border-top: 12px solid #ef858c;  /* 吹き出し三角部分の色 */
 border-right: 12px solid transparent;
 border-left: 12px solid transparent;
 content: '';
 position: absolute;
 top: 10px;
 left: 15px;
}


/*********************************/
.cocoon-child.box24 {
    position: relative;
    padding: 0.5em 0.7em;
    margin: 2em 0;
    background: #e6f4ff;
    color: #5c98d4;
    font-weight: bold;
}
.cocoon-child.box24:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #e6f4ff;
    width: 0;
    height: 0;
}
.cocoon-child.box24 p {
    margin: 0; 
    padding: 0;
}

/*　手書き風BOX 1　*/
.cocoon-child.kakomi-te1 {
margin: 2em auto;
padding: 1em 1.5em;
width: 90%; /*幅の調節*/
color: #777777; /* 文字色 */
background-color: #fff; /* 背景色 */
border: 4px solid #f6bfbc; /*線の太さ・色*/
border-radius: 3em .8em 3em .7em/.9em 2em
.8em 3em;
}


/*花ヘッダ追加*/
.cocoon-child.h2 {
 background-color: #f5d5da; /* 背景色 */
 border-radius: 5px;
 font-size: 120%; /* 大きさ */
 color: #ef858c; /* 文字色 */
 padding: 10px 10px 10px 60px; /* 上・右・下・左の余白 */
 position: relative;
 text-shadow: 0px 0px 10px #fff, 0px 0px 6px #fff, 0px 0px 4px #fff, 0 0 0.5px #fff; /* 文字の影 */
}
.cocoon-child.h2:before {
 content: '＊*'; /*花に見せかけるためのアスタリスク*/
 color: #fff; /* アスタリスクの色 */
 display: inline-block;
 font-size: 30px; /* アスタリスクの大きさ */
 font-weight: bold;
 margin-right: 10px;
 position: absolute;
 top: 0px;
 left: 0px;
 transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -webkit-transform: rotate(20deg);
 -o-transform: rotate(20deg);
 text-shadow: 0px 0px 3px #fff, 0px 0px 2px #fff, 0 0 0.5px #fff; /* アスタリスク周りの影 */
}
.cocoon-child.h2:after {
 border-bottom: 2px dotted #fff; /* 下線 */
 content: '';
 position: absolute;
 bottom: 3px;
 left: 3px;
 right: 3px;
}

/*ヘッダ追加 花の見出し*/
.cocoon-child.h2_fr {
 color: #d04255; /* 文字色 */
 padding: 10px 10px 10px 60px; /* 上・右・下・左の余白 */
 position: relative;
}
.cocoon-child.h2_fr:before {
 content: '＊*'; /*花に見せかけるためのアスタリスク*/
 color: #fff; /* アスタリスクの色 */
 display: inline-block;
 font-size: 30px; /* アスタリスクの大きさ */
 font-weight: bold;
 position: absolute;
 top: 0px;
 left: 0px;
 transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -webkit-transform: rotate(20deg);
 -o-transform: rotate(20deg);
 text-shadow: 0px 0px 6px #EAA8BF, 0px 0px 4px #EAA8BF, 0 0 0.5px #EAA8BF; /* アスタリスク周りの影 */
}
.cocoon-child.h2_fr:after {
 border-bottom: 2px dotted #EAA8BF; /* 下線 */
 content: '';
 position: absolute;
 bottom: 0px;
 left: 0px;
 width: 100%;
}

/*真ん中にマークが入る線*/
.cocoon-child.cp_hr07 {
 position: relative;
 overflow: visible;
 text-align: center;
 color: #f06292;
 border-width: 3px 0 0 0;
 border-style: double;
 border-color: #f06292;
}
.cocoon-child.cp_hr07::after {
 position: absolute;
 top: -0.7em;
 left: 50%;
 display: inline-block;
 content: '\2661';
 background: #ffffff;
}

/*真ん中にマークが入る線*/
.cocoon-child.note6{
  background-color: #fff6e6;
  color: #ee8992;
  margin: 2em 0;
  font-weight: bold;
  border: solid 1px #ee8992;
  padding: 0.3em 1em 2em 1em;
  box-shadow:2px 2px 0 rgba(0,0,0,.1);
  border-radius: 7px;
}
.cocoon-child.sen6{
  background-color: #fff6e6;
  background-image:
  linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 100% 2em;
  line-height: 2em;
  padding: 2em 1em 0.2em 1em;
}


/*真ん中にマークが入る線*/
.cocoon-child.boxmi21 {
  position: relative;
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
/*
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  */
	background-size: 12px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.cocoon-child.boxmi21-title {
  background: #fff6e6;
  font-size: 1.2em;
  padding: 7px 0 0 16px;
  margin: -16px -8px 16px -8px;
  color: #ee8992;
  font-weight:bold;
}
.cocoon-child.boxmi21:after {
  position: absolute;
  content: "";
  top: 25px;
  width: 30%;
  height: 35px;
  opacity: 0.7;
  margin: -35px auto 10px 35%;
  background-color: #ff99ac; /* 背景色 */
  background-image: radial-gradient(#fff 24%, transparent 0), radial-gradient(#fff 24%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  transform: rotate(-2deg);
  left: 10px;
  right: 10px;
  box-shadow:0 0 5px rgba(0,0,0,.2);
}
.cocoon-child.boxmi21 p {
  margin: 0;
  padding: 0;
}