@CHARSET "windows-31j";
/* css */
.snsstyle_pop1 {
background-color:#fff;
border:1px solid #000;
border-radius:5px;
position:relative;
}
 
.snsstyle_pop1:before {
border:10px solid transparent;
border-bottom-color:#fff;
border-top-width:0;
top:-9px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
z-index:1;
}
 
.snsstyle_pop1:after {
border:10px solid transparent;
border-bottom-color:#000;
border-top-width:0;
top:-10px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
}

/* 吹き出しの楕円長方形を決める */
.snsstyle_pop2 {
background-color:#fff;
border-width:0px;
position:relative;
width:0px;
}

/* 吹き出しの矢印の三角形を決める */
.snsstyle_pop2:before {
border:16px solid transparent;
border-bottom-color:#fff;
border-top-width:0;
top:-9px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop2:after {
border:16px solid transparent;
border-bottom-color:#9bf26e;
border-top-width:0;
top:-10px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
}

/* 吹き出しの楕円長方形を決める */
.snsstyle_pop3 {
background-color:#fff;
border-width:0px;
position:relative;
width:0px;
}

/* 吹き出しの矢印の三角形を決める */
.snsstyle_pop3:before {
border:16px solid transparent;
border-bottom-color:#fff;
border-top-width:0;
top:-9px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop3:after {
border:16px solid transparent;
border-bottom-color:#9bf26e;
border-top-width:0;
top:-10px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
}

/* 吹き出しの楕円長方形を決める */
.snsstyle_pop_xia {
border-width:0px;
position:relative;
width:0px;
}

/* 吹き出しの矢印の三角形を決める */
.snsstyle_pop_xia:before {
border:16px solid transparent;
border-top-color:#0086a2;
border-bottom-width:0;
bottom:-15px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop_xia:after {
border:16px solid transparent;
border-top-color:#ffffff;
border-bottom-width:0;
bottom:-16px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
}

.snsstyle_pop_xiaffffff:before {
   border-top-color:#ffffff;
 }
 
.snsstyle_pop_xiac20024:before {
   border-top-color:#c20024;
 }
 
.snsstyle_pop_xia6cbb5a:before {
   border-top-color:#6cbb5a;
 }
 
.snsstyle_pop_xia0086a2:before {
   border-top-color:#0086a2;
 }
 
.snsstyle_pop_xia000000:before {
   border-top-color:#000000;
 }
 
.snsstyle_pop_xiaffd900:before {
   border-top-color:#ffd900;
 }
 
.snsstyle_pop_xiabe84b8:before {
   border-top-color:#be84b8;
 }
 
.snsstyle_pop_xia7d7d7d:before {
   border-top-color:#7d7d7d;
 }
 
.snsstyle_pop_xiafeeeed:before {
   border-top-color:#feeeed;
 }
 
.snsstyle_pop_xiae6b422:before {
   border-top-color:#e6b422;
 }
 
.snsstyle_pop_xiaC0C0C0:before {
   border-top-color:#C0C0C0;
 }
 
 .triangle4pop {
    position: absolute;
    border: 20px solid transparent;
    border-top-color: blue;
    display:block;
    top:190px;
    left: 28px;
}

/* 吹き出しの楕円長方形を決める */
.snsstyle_pop_zuo {
background-color:#fff;
border-width:0px;
position:relative;
width:0px;
}

/* 吹き出しの矢印の三角形を決める */
.snsstyle_pop_zuo:before {
border:16px solid transparent;
border-right-color:#fff;
border-left-width:0;
left:-9px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop_zuo:after {
border:16px solid transparent;
border-right-color:#9bf26e;
border-left-width:0;
left:-10px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
}

/* 吹き出しの楕円長方形を決める */
.snsstyle_pop_you {
background-color:#fff;
border-width:0px;
position:relative;
width:0px;
}

/* 吹き出しの矢印の三角形を決める */
.snsstyle_pop_you:before {
border:16px solid transparent;
border-left-color:#fff;
border-right-width:0;
right:-9px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop_you:after {
border:16px solid transparent;
border-left-color:#9bf26e;
border-right-width:0;
right:-10px;
content:"";
display:block;
left:30px;
position:absolute;
width:0;
}
 
div.TPLsideTop {
    overflow: visible;
    position: relative;
}
div.TPLsideTop:after {
    left:0;
    top:100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 100%;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: blue;
    border-left-color: red;
    border-right-color: red;
    border-width: 12px;
}

th.Lside_blue {
    overflow: visible;
    position: relative;
}

th.arrow:before {
    bottom:-12px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: white;
    border-right-color: white;
    border-top-color: red;
    border-width: 12px;
    margin-bottom:0px;
}

th.Lside_blue{
    background-color:#82A9DA;
    color:yellow;
}
th.Lside_blue:after {
    left: 100%;
    top: 90px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #82A9DA;
    border-width: 12px;
    margin-top: -10px;
}

th.Lside_red {
    overflow: visible;
    position: relative;
}

th.Lside_red{
    background-color:#D0576B;
    color:yellow;
}
th.Lside_red:after {
    left: 100%;
    top: 90px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #D0576B;
    border-width: 12px;
    margin-top: -10px;
}

th.Lside_green {
    overflow: visible;
    position: relative;
}

th.Lside_green{
    background-color:#00A497;
    color:yellow;
}
th.Lside_green:after {
    left: 100%;
    top: 90px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #00A497;
    border-width: 12px;
    margin-top: -10px;
}

th.Lside_yellow {
    overflow: visible;
    position: relative;
}

th.Lside_yellow{
    background-color:yellow;
    color:red;
}
th.Lside_yellow:after {
    left: 100%;
    top: 90px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: yellow;
    border-width: 12px;
    margin-top: -10px;
}

th.Lside_orange {
    overflow: visible;
    position: relative;
}

th.Lside_orange{
    background-color:#FCD900;
    color:red;
}
th.Lside_orange:after {
    left: 100%;
    top: 90px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #FCD900;
    border-width: 12px;
    margin-top: -10px;
}

th.Lside_Ouryoku {
    overflow: visible;
    position: relative;
}

th.Lside_Ouryoku{
    background-color:#9FBB00;
    color:yellow;
}
th.Lside_Ouryoku:after {
    left: 100%;
    top: 90px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #9FBB00;
    border-width: 12px;
    margin-top: -10px;
}


/* 吹き出しの楕円長方形を決める */
.snsstyle_pop_number {
background-color:#fff;
border:1px orange solid;
position:relative;
width:0px;
border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
}

.snsstyle_pop_number:before {
border:16px solid transparent;
border-bottom-color:#ffffff;
border-top-width:0;
top:-15px;
content:"";
display:block;
left:180px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop_number:after {
border:16px solid transparent;
border-bottom-color:orange;
border-top-width:0;
top:-16px;
content:"";
display:block;
left:180px;
position:absolute;
width:0;
}

/* 吹き出しの楕円長方形を決める */
.snsstyle_pop_qa {
background-color:#fff;
border:1px orange solid;
position:relative;
width:0px;
border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
}

.snsstyle_pop_qa:before {
border:16px solid transparent;
border-bottom-color:#ffffff;
border-top-width:0;
top:-15px;
content:"";
display:block;
left:235px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop_qa:after {
border:16px solid transparent;
border-bottom-color:orange;
border-top-width:0;
top:-16px;
content:"";
display:block;
left:235px;
position:absolute;
width:0;
}

/* 吹き出しの楕円長方形を決める */
.snsstyle_pop_moji {
background-color:#fff;
border:1px orange solid;
position:relative;
width:0px;
border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
}

.snsstyle_pop_moji:before {
border:16px solid transparent;
border-bottom-color:#ffffff;
border-top-width:0;
top:-15px;
content:"";
display:block;
left:10px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop_moji:after {
border:16px solid transparent;
border-bottom-color:orange;
border-top-width:0;
top:-16px;
content:"";
display:block;
left:10px;
position:absolute;
width:0;
}

/* 吹き出しの楕円長方形を決める */
.snsstyle_pop_mondailist {
background-color:#fff;
border:1px #9bf26e solid;
position:relative;
width:0px;
border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
}

.snsstyle_pop_mondailist:before {
border:16px solid transparent;
border-bottom-color:#ffffff;
border-top-width:0;
top:-15px;
content:"";
display:block;
left:68px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop_mondailist:after {
border:16px solid transparent;
border-bottom-color:#9bf26e;
border-top-width:0;
top:-16px;
content:"";
display:block;
left:68px;
position:absolute;
width:0;
}

/* 吹き出しの楕円長方形を決める */
.snsstyle_pop_level {

background-color:#fff;
border:1px #9bf26e solid;
position:relative;
width:0px;

border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-webkit-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-o-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-ms-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
}

.snsstyle_pop_level:before {
border:16px solid transparent;
border-bottom-color:#ffffff;
border-top-width:0;
top:-15px;
content:"";
display:block;
left:8px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop_level:after {
border:16px solid transparent;
border-bottom-color:#9bf26e;
border-top-width:0;
top:-16px;
content:"";
display:block;
left:8px;
position:absolute;
width:0;
}

/* 吹き出しの楕円長方形を決める */
.snsstyle_pop_badday {

background-color:#fff;
border:1px #9bf26e solid;
position:relative;
width:0px;

border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-webkit-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-o-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-ms-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
}

.snsstyle_pop_badday:before {
border:16px solid transparent;
border-bottom-color:#ffffff;
border-top-width:0;
top:-15px;
content:"";
display:block;
left:506px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop_badday:after {
border:16px solid transparent;
border-bottom-color:#9bf26e;
border-top-width:0;
top:-16px;
content:"";
display:block;
left:506px;
position:absolute;
width:0;
}

/* 吹き出しの楕円長方形を決める */
.snsstyle_pop_niceday {

background-color:#fff;
border:1px #9bf26e solid;
position:relative;
width:0px;

border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-webkit-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-o-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-ms-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
}

.snsstyle_pop_niceday:before {
border:16px solid transparent;
border-bottom-color:#ffffff;
border-top-width:0;
top:-15px;
content:"";
display:block;
left:360px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop_niceday:after {
border:16px solid transparent;
border-bottom-color:#9bf26e;
border-top-width:0;
top:-16px;
content:"";
display:block;
left:360px;
position:absolute;
width:0;
}

/* 吹き出しの楕円長方形を決める */
.snsstyle_pop_levelup {

background-color:#fff;
border:1px #9bf26e solid;
position:relative;
width:0px;

border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-webkit-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-o-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-ms-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);

}

.snsstyle_pop_levelup:before {
border:16px solid transparent;
border-bottom-color:#ffffff;
border-top-width:0;
top:-15px;
content:"";
display:block;
left:183px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop_levelup:after {
border:16px solid transparent;
border-bottom-color:#9bf26e;
border-top-width:0;
top:-16px;
content:"";
display:block;
left:183px;
position:absolute;
width:0;
}

/* 吹き出しの楕円長方形を決める */
.snsstyle_pop_sheel {

background-color:#fff;
border:1px #9bf26e solid;
position:relative;
width:0px;

border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-webkit-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-o-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
-ms-box-shadow: 1px 6px 6px 6px rgba(0,0,0,0.4);
}

.snsstyle_pop_sheel:before {
border:16px solid transparent;
border-bottom-color:#ffffff;
border-top-width:0;
top:-15px;
content:"";
display:block;
left:258px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop_sheel:after {
border:16px solid transparent;
border-bottom-color:#9bf26e;
border-top-width:0;
top:-16px;
content:"";
display:block;
left:258px;
position:absolute;
width:0;
}

/* 左吹き出しの楕円長方形を決める */
.snsstyle_pop_pen {
border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
background-color:#fff;
border-width:0px;
position:relative;
width:0px;
}

/* 吹き出しの矢印の三角形を決める */
.snsstyle_pop_pen:before {
border:16px solid transparent;
border-right-color:#fff;
border-left-width:0;
top:25px;
left:-9px;
content:"";
display:block;
left:-15px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop_pen:after {
border:16px solid transparent;
border-right-color:green;
border-left-width:0;
top:25px;
left:-10px;
content:"";
display:block;
left:-15px;
position:absolute;
width:0;
}

/* 左吹き出しの楕円長方形を決める */
.snsstyle_pop_qadetail {
border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
background-color:#fff;
border-width:0px;
position:relative;
width:0px;
}

/* 吹き出しの矢印の三角形を決める */
.snsstyle_pop_qadetail:before {
border:16px solid transparent;
border-right-color:#fff;
border-left-width:0;
top:45px;
left:-9px;
content:"";
display:block;
left:-15px;
position:absolute;
width:0;
z-index:1;
}

.snsstyle_pop_qadetail:after {
border:16px solid transparent;
border-right-color:green;
border-left-width:0;
top:45px;
left:-10px;
content:"";
display:block;
left:-15px;
position:absolute;
width:0;
}

/* 吹き出し・全共通 */
.balloon {
    position: relative;
    width: 200px; /* 幅 */
    min-height: 60px; /* 最小の高さ */
    margin: 20px; /* 外側の余白 */
    padding: 10px; /* 内側の余白 */
  }
  .balloon::before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 20px; height: 20px; /* 吹き出しサイズ */
  }
  .balloon::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }
  .balloon>* {
    position: relative;
    z-index: 3;
  }
  .balloon,
  .balloon::after {
    border-radius: 5px; /* 角の丸め方 */
  }
  .balloon,
  .balloon::before {
    box-shadow: 0 0 10px 0 rgba(163,163,163,0.50); /* ぼかし距離(第3引数)，拡散距離(第4引数)，色(第5引数) */
  }
  .balloon,
  .balloon::before,
  .balloon::after {
    background: #fffed6; /* 背景色 */
  }
  
  /* 吹き出し・上辺左側 */
  .balloon--top_left::before {
    top: -10px; left: 10px; /* 位置 */
    transform: rotate(45deg) skew(20deg,20deg); /* 傾斜角(skew) */
  }
  /* 吹き出し・上辺中央 */
  .balloon--top_center::before {
    top: -10px; left: 50%; /* 位置 */
    transform: translateX(-50%) rotate(45deg) skew(20deg,20deg); /* 傾斜角(skew) */
  }
  /* 吹き出し・上辺右側 */
  .balloon--top_right::before {
    top: -10px; right: 10px; /* 位置 */
    transform: rotate(45deg) skew(20deg,20deg); /* 傾斜角(skew) */
  }
  
  /* 吹き出し・右辺上側 */
  .balloon--right_top::before {
    right: -10px; top: 10px; /* 位置 */
    transform: rotate(45deg) skew(-20deg,-20deg); /* 傾斜角(skew) */
  }
  /* 吹き出し・右辺中央 */
  .balloon--right_middle::before {
    right: -10px; top: 50%; /* 位置 */
    transform: translateY(-50%) rotate(45deg) skew(-20deg,-20deg); /* 傾斜角(skew) */
  }
  /* 吹き出し・右辺下側 */
  .balloon--right_bottom::before {
    right: -10px; bottom: 10px; /* 位置 */
    transform: rotate(45deg) skew(-20deg,-20deg); /* 傾斜角(skew) */
  }
  
  /* 吹き出し・下辺左側 */
  .balloon--bottom_left::before {
    bottom: -10px; left: 10px; /* 位置 */
    transform: rotate(45deg) skew(20deg,20deg); /* 傾斜角(skew) */
  }
  /* 吹き出し・下辺中央 */
  .balloon--bottom_center::before {
    bottom: -10px; left: 50%; /* 位置 */
    transform: translateX(-50%) rotate(45deg) skew(20deg,20deg); /* 傾斜角(skew) */
  }
  /* 吹き出し・下辺右側 */
  .balloon--bottom_right::before {
    bottom: -10px; right: 10px; /* 位置 */
    transform: rotate(45deg) skew(20deg,20deg); /* 傾斜角(skew) */
  }
  
  /* 吹き出し・左辺上側 */
  .balloon--left_top::before {
    left: -10px; top: 10px; /* 位置 */
    transform: rotate(45deg) skew(-20deg,-20deg); /* 傾斜角(skew) */
  }
  /* 吹き出し・左辺中央 */
  .balloon--left_middle::before {
    left: -10px; top: 50%; /* 位置 */
    transform: translateY(-50%) rotate(45deg) skew(-20deg,-20deg); /* 傾斜角(skew) */
  }
  /* 吹き出し・左辺下側 */
  .balloon--left_bottom::before {
    left: -10px; bottom: 10px; /* 位置 */
    transform: rotate(45deg) skew(-20deg,-20deg); /* 傾斜角(skew) */
  }