/* 全体の設定 */
.balloon01 {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
}
/* アイコンの場所 */
.balloon01 .icon01 {
float: left;
margin-right: -90px;
width: 80px; //アイコンの大きさ
}
/* アイコン画像の作成 */
.balloon01 .icon01 img{
width: 100%;
height: auto;
border-radius: 50%;
border: solid 2px #b8860b; //アイコンの枠の太さ、カラーはここで変更
}
.balloon01 .chat01 {
width: 100%;
}
/* 吹き出しの入力部分の作成 */
.talk01 {
display: inline-block; //この部分を外すと横幅いっぱいになります
position: relative; 
margin: 5px 0 0 105px;
padding: 17px 13px;
border-radius: 12px; //吹き出しの丸み具合を変更
background: #fffacd; //吹き出しのカラーはここで変更
}
/* 三角部分の作成 */
.talk01:after {
content: "";
display: inline-block;
position: absolute;
top: 18px; //三角の位置(高さ)を変更
left: -24px;
border: 12px solid transparent;
border-right: 12px solid #fffacd; //三角部分のカラーはここで変更
}
.talk01 p {
margin: 0;
padding: 0;
}

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



/*(1')レース展開のCSS*/
/*マスキングテープ風*/
.box5-5{
	background-color: #F6EEEC;/*ボックス背景色*/
	padding:2.5em 2em 2em;/*ボックス内側余白*/
	position:relative;/*配置(ここを基準に)*/
}
.box5-5 .box-title {
	background-image: repeating-linear-gradient(-45deg,#F6EEEC 0, #F6EEEC 3px,#fafafa 3px,#fafafa 6px);/*ストライプ*/
	border-left: 2px dotted rgb(0 0 0 / .1);/* ギザギザ左*/
	border-right: 2px dotted rgb(0 0 0 / .1);/* ギザギザ右*/
	transform: rotate(-2deg);/*テープの傾き*/
	font-size: 1em;/*タイトル文字の大きさ*/
	padding: 10px 20px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;/*配置(ここを動かす)*/
	top: -15px; /*上からの距離*/
	left: 20px; /*左からの距離*/
}


/*(2')記事冒頭のボックスのCSS(menu box)*/
.menu box ul li::marker {
font-size: 20px; color: #b3700ac2; content:"●";
}
.menu box ul li {
padding-left: 10px;
}
.menu box ol li {
padding-left: 10px;
}
.menu box ol li::before {
counter-increment: number; content: counter(number); background: #b3700ac2;color: white; width: 25px; height: 27px; display: inline-block; text-align: center; position: absolute; left:25px; font-weight: bold;
}
.menu box ol {
counter-reset:number; list-style-type:none!important;
}


/*(2')レース結果のCSS(menu box)*/
.menu box ul li::marker {
font-size: 20px; color: #ffb3b3; content:"●";
}
.menu box ul li {
padding-left: 10px;
}
.menu box ol li {
padding-left: 10px;
}
.menu box ol li::before {
counter-increment: number; content: counter(number); background: #ffb3b3;color: white; width: 25px; height: 27px; display: inline-block; text-align: center; position: absolute; left:25px; font-weight: bold;
}
.menu box ol {
counter-reset:number; list-style-type:none!important;
}


/*(3')関連記事のCSS(related articles)*/
.related articles ul li::marker {
font-size: 20px; color: #ffdc47; content:"●";
}
.related articles ul li {
padding-left: 10px;
}
.related articles ol li {
padding-left: 10px;
}
.related articles ol li::before {
counter-increment: number; content: counter(number); background: #ffdc47;color: white; width: 25px; height: 27px; display: inline-block; text-align: center; position: absolute; left:25px; font-weight: bold;
}
.related articles ol {
counter-reset:number; list-style-type:none!important;
}


/*(4')公式サイトのCSS(official website)*/
.official website ul li::marker {
font-size: 20px; color: #819cfe; content:"●";
}
.official website ul li {
padding-left: 10px;
}
.official website ol li {
padding-left: 10px;
}
.official website ol li::before {
counter-increment: number; content: counter(number); background: #819cfe;color: white; width: 25px; height: 27px; display: inline-block; text-align: center; position: absolute; left:25px; font-weight: bold;
}
.official website ol {
counter-reset:number; list-style-type:none!important;
}


/*(5')会話のCSS(talk)*/
.talk {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}
.talk .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}
.talk .faceicon img{
  width: 100%;
  height: auto ;
  border: solid 3px #d7ebfe;
  border-radius: 50%;
}
.talk .chatting {
  width: 100%;
}
.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}
.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}
.says p {
  margin: 0;
  padding: 0;
}