@charset "utf-8";
/*
================================================================================================================
 顔アイコンとテキスト
================================================================================================================
*/

.icon_box{
  width: 100%;
margin: -20px 0 -20px 0;
  overflow: hidden;
display: flex;
    align-items: center;
    justify-content: flex-start;
}

.icon_box .faceicon {
  float: left;
  margin-right: -90px;
background-repeat: no-repeat;
background-size: contain;	
	background-position: center center;
border: none;
}

.icon_box .fukidashi {
  width: 100%;
}

.says {
	display: inline-block;
	min-height: 30px;
  position: relative; 
  margin: 0px 0 0 104px;
  padding: 0 12px;
	line-height: 0;
  border-radius: 12px;
	width: 100%;
 max-width:calc(100% - 200px);}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top:calc(50% - 10px); 
  left: -30px;
  border: 10px solid transparent;
}

.says p {
  margin:0px 0;
  padding:0px 5px;
	line-height:20px;
white-space: pre-wrap;/*自動改行*/
	color: #010101;
}

.icon_box .says#last{
 position:relative;
}

/*きつね*/
.icon_box.fox .faceicon {
background-color: rgba(255,255,255,0.00);
  width: 100px;
  height: 130px;
}
.icon_box.fox .says {
  background: #FDB29A;
 }
.icon_box.fox .says:after {
  border-right: 20px solid #FDB29A;
}
.icon_box.fox .faceicon.no1 {background-image: url("../img/20260807/fox/fox_01.png");}
.icon_box.fox .faceicon.no2 {background-image: url("../img/20260807/fox/fox_02.png");}
.icon_box.fox .faceicon.no3 {background-image: url("../img/20260807/fox/fox_03.png");}
.icon_box.fox .faceicon.no4 {background-image: url("../img/20260807/fox/fox_04.png");}
.icon_box.fox .faceicon.no5 {background-image: url("../img/20260807/fox/fox_05.png");}
.icon_box.fox .faceicon.no6 {background-image: url("../img/20260807/fox/fox_06.png");}
.icon_box.fox .faceicon.no7 {background-image: url("../img/20260807/fox/fox_07.png");}
.icon_box.fox .faceicon.no6_1 {background-image: url("../img/20260807/fox/fox_06_1.png");}
.icon_box.fox .faceicon.no7_1 {background-image: url("../img/20260807/fox/fox_07_1.png");}


/*うさぎ*/
.icon_box.rabbit .faceicon {
background-color: rgba(255,255,255,0.00);
  width: 100px;
  height: 130px;
}
.icon_box.rabbit .says {
  background: #9EFD9A;
 }
.icon_box.rabbit .says:after {
  border-right: 20px solid #9EFD9A;
}
.icon_box.rabbit .faceicon.no1 {background-image: url("../img/20260807/rabbit/rabbit_01.png");}
.icon_box.rabbit .faceicon.no2 {background-image: url("../img/20260807/rabbit/rabbit_02.png");}
.icon_box.rabbit .faceicon.no3 {background-image: url("../img/20260807/rabbit/rabbit_03.png");}
.icon_box.rabbit .faceicon.no4 {background-image: url("../img/20260807/rabbit/rabbit_04.png");}
.icon_box.rabbit .faceicon.no5 {background-image: url("../img/20260807/rabbit/rabbit_05.png");}


/*ねこ*/
.icon_box.cat .faceicon {
background-color: rgba(255,255,255,0.00);
  width: 100px;
  height: 130px;
}
.icon_box.cat .says {
  background: #9AD3FD;
 }
.icon_box.cat .says:after {
  border-right: 20px solid #9AD3FD;
}
.icon_box.cat .faceicon.no1 {background-image: url("../img/20260807/cat/cat_01.png");}
.icon_box.cat .faceicon.no2 {background-image: url("../img/20260807/cat/cat_02.png");}
.icon_box.cat .faceicon.no2_1 {background-image: url("../img/20260807/cat/cat_02_1.png");}

@media screen and (max-width:640px) {
.icon_box {margin-top: -60px;}
.icon_box .faceicon {width: 80px!important; height: 100px!important;}
.says {max-width:calc(100% - 120px)!important;}
}