<STYLE TYPE="text/css"><!--
DIV.tuzukiwaku{border:1px solid #badefe;padding:3px;margin:3px;display:none;}
--></STYLE>

<SCRIPT language="JavaScript"><!--
function hiraku(geID){
document.getElementById(geID).style.display = "block";
}
function tatamu(geID){
document.getElementById(geID).style.display = "none";
}
//--></SCRIPT>
<NOSCRIPT>
<STYLE TYPE="text/css"><!--
DIV.tuzukiwaku{display:block;color:#ffffff;}
--></STYLE>
</NOSCRIPT>


<style type="text/css">
@font-face
{
font-family: XANO明朝;
src: url('https://cdn.leafscape.be/XANO-mincho/XANO-mincho_web.woff2')
     format("woff2");
}

   
/* ■変更推奨箇所開始■ */


/* ◆全体の色指定等◆ */


body,
.text:after,
.image:after{
 /*全体の背景色*/
  background-color: #dce0e6 ;
}

body,
.side{
 /*フキダシ外の文字色*/
  color: #000000 ;
 /*全体のフォント指定*/
  font-family: XANO明朝 ;
}


/* ヘッダー */

#header{
 /*背景色*/
  background-color: #1d2c3f ;
 /*文字色*/
  color: #ffffff ;
}


/* 区切り */

.pause{
 /*背景色*/
  background-color: rgba(0,0,0,0.2) ;
 /*文字色*/
  color: #ffffff ;
}


/* 左寄せフキダシの設定 */

#left > div,
#left > div:before{
 /*フキダシの色*/
  background-color: #ffffff ;
 /*文字色*/
  color: #000000 ;
}


/* 右寄せフキダシの設定 */

#right > div,
#right > div:before{
 /*フキダシの色*/
  background-color: #87cd5d ;
 /*文字色*/
  color: #000000 ;
}



<nopc>
/* 携帯閲覧時用既読,時刻表記 */

#left .side{
 /*左寄せ文字色*/
  color: #cccccc !important;
}

#right .side{
 /*右寄せ文字色*/
  color: #bfe5a9 !important;
}
</nopc>


/* ◇色指定等終了◇ */


/* ◆おまけ開始◆ */

/*一部のみフキダシの色変更*/
.pattern01,.pattern01:before{
  background-color: #cccccc !important;
}

/*一部のみフキダシの文字色変更*/
.pattern02{
  color: #cccccc ;
}

/*一部のみフキダシに背景画像*/
.pattern03,.pattern03:before{
  background-color: #cccccc !important;
  background-image: url(#tmpImg56800-2_url#) !important;
}

/* ◇おまけ終了◇ */


/* ◆説明の為に追加、削除推奨◆ */

#exp{
  background-color: rgba(255,255,255,0.4) ;
  border: solid 2px #ffffff ;
  padding: 5px ;
  color: #000000 ;
  text-align: left ;
}

table{
  border-collapse: collapse ;
  border: solid 1px #999999 ;
}

td{
  font-size: x-small ;
  text-align: center ;
  vertical-align: center ;
  border: solid 1px #999999 ;
}

td.cla{
  color: #999999 ;

}

/* ◇削除推奨終了◇ */

/* □変更推奨箇所終了□ *//* ■以下変更非推奨■*/


/* ◆レイアウト(ページの枠組み)設定開始◆ */

body{
/*余白指定*/
  margin: 0 ;
}

#layout{
/*最大幅指定*/
  max-width: 480px ;

/*余白指定*/
  margin: 0 auto ;
  padding: 0 ;

/*文字サイズ等指定*/
  font-size: x-small ;
  line-height: 120% ;
  text-align: center ;
}

/* ヘッダー */
#header{
  padding: 15px 0 ;
  text-align: center ;
  font-size: large ;
  font-weight: bold ;
}

/* コンテンツ */
#contents{
  margin: 10px ;
}

/* ◇レイアウト設定終了◇ */



/* ◆トーク部分三種共通設定◆ */

#left,#right{
  position: relative ;

 /*会話毎の上スペース*/
  margin-top: 30px ;
}

#left{
  text-align: left ;
}

#right{
  text-align: right ;
}


/* アイコン設定 */
img.icon{
 /*幅*/
  
  border-radius: 20px;
  height: 40px;
  width: 40px;
}}



/* 名前 */
.name{
  font-weight: bold ;
  margin: 0 5px 5px ;
}


/* 区切り */

.pause{
  display: inline-block ;
  width : auto ;
  margin: 15px auto 5px ;
  padding: 5px 10px ;

  border-radius: 10px ;
  -webkit-border-radius: 10px ;
  -moz-border-radius: 10px ;
}


<pc>
/* 【PC、スマホ用設定開始】 */


/* ◆トーク部分三種共通設定◆ */


/* アイコン設定 */
#left img.icon{
  float: left ;
}

#right img.icon{
  float: right ;
}



/* 内容部分 左寄せ */
#left > div{
  position: relative ;
   top: 0 ;
   left: 0 ;
  display: inline-block ;
  margin-top: 3px ;
  margin-left: 10px ;
  text-align: left ;
}


/* 内容部分 右寄せ */
#right > div{
  position: relative ;
   top: 0 ;
   right: 0 ;
  display: inline-block ;
  margin-top: 3px ;
  margin-right: 10px ;
  text-align: left ;
}


/* フキダシ形成 */


.text,
.image .A{
  border-radius: 15px ;
   -webkit-border-radius: 15px ;
   -moz-border-radius: 15px ;
}



.text:after,
.image:after{
  content: '';
  position: absolute ;
   top: 0 ;
  height: 4px ;
  width: 20px ;
  border-radius: 0 0 30px 30px / 0 0 20px 20px ;
   -webkit-border-radius: 0 0 30px 50px / 0 0 20px 20px ;
   -moz-border-radius: 0 0 30px 30px  / 0 0 20px 20px ;
  z-index: -1 ;
}

.text:before,
.image .B{
  content: '' ;
  position: absolute ;
   top: 0 ;
  height: 9px ;
  width: 20px ;
  border-radius: 0 0 15px 15px ;
   -webkit-border-radius: 0 0 15px 15px ;
   -moz-border-radius: 0 0 15px 15px ;
  z-index: -1 ;
}

#left .text:after,
#left .text:before,
#left .image:after,
#left .image .B{
  left: -4px ;
}
#right .text:after,
#right .text:before,
#right .image:after,
#right .image .B{
  right: -4px ;
}


/* 既読,時刻表記部分 */

.side{
  position: absolute ;
   bottom: 3px ;
  display: inline-block ;
  width: 4em ;
  font-size: xx-small ;
  line-height: 100% ;
}


#left .side{
  right: -4.5em ;
  text-align: left ;
}

#right .side{
  left: -4.5em ;
  text-align: right ;
}

.kdk{
  display: block ;
}

/* ◇トーク部分三種共通設定終了◇ */



/* ◆テキスト(class="text")の設定開始◆ */

/* 内容部分の指定 */

.text{
  max-width: 60% ;
  height: auto ;
  min-height: 1em ;
  padding: 10px 15px ;
}


/* 左寄せ */

#left .text{
  background-position: -4px 0 ;
}

#left .text:before{
  background-position: 0 0 ;
}


/* 右寄せ */

#right .text{
  background-position: -webkit-calc(100% + 4px) 0% ;
  background-position: -moz-calc(100% + 4px) 0% ;
  background-position: calc(100% + 4px) 0% ;
}

#right .text:before{
  background-position: 100% 0 ;
}

/*◇テキストの指定終了◇ */



/* ◆スタンプ(class="stamp")の設定開始◆ */


/* 画像自体の設定 */
.stamp img{
  vertical-align: bottom ;

  width: auto ;
  height: auto ;

 /*最大サイズの指定*/
  max-width: 150px ;
  max-height: 150px ;

 /*最少サイズの指定*/
  min-width: 30px ;
  min-height: 30px ;
}

.stamp a{
  text-decolation: none !important;
  border: none !important;
}

.stamp{
  background-color: transparent !important;
}

/* ◇スタンプの指定終了◇ */



/* ◆イメージ(class="image")の設定開始◆ */


/* 画像自体の設定 */
.image img{
 vertical-align: bottom ;

 width: auto ;
 height: auto ;

 /*最大サイズの指定*/
  max-width: 120px ;
  max-height: 120px ;

 /*最少サイズの指定*/
  min-width: 60px ;
  min-height: 60px ;
}


/* 左右共通 */

.image{
  background-color: transparent !important;
}

.image a{
  text-decolation: none !important;
  border: none !important;
}

.image .A{
  display: inline-block ;
  overflow: hidden ;
}

.image .A img{
  position: relative ;
   top: 0 ;
}

.image .B{
  overflow: hidden ;
}

/* 画像が透過されている場合の背景色 */
.image .A,
.image .B{
  background-color: #000000 ;
}


/* 左寄せ */

#left .image .A img{
   left: -4px ;
  margin-right: -4px ;
}


/* 右寄せ */

#right .image .A img{
   right: -4px ;
  margin-left: -4px ;
}


#right .image .B img{
  position:absolute;
   right:0;
}


/* ◇イメージの指定終了◇ */

/* 【PC、スマホ用設定終了】 */
</pc><nopc>
/* 【ガラケー用設定開始】 */


/* ◆トーク部分三種共通設定◆ */

/* 内容部分 左寄せ */
#left > div{
  margin-top: 3px ;
  margin-right: 30px ;
  padding: 5px ;
  text-align: left ;
}


/* 内容部分 右寄せ */
#right > div{
  margin-top: 3px ;
  margin-left: 30px ;
  padding: 5px ;
  text-align: left ;
}


/* 既読,時刻表記部分 */

.side{
  margin-top:5px;
  text-align: right ;
}


.image .B{
  display: none ;
}

/* アイコン以外の画像設定 */

.stamp img,
.image img{

 width: auto ;
 height: auto ;

 /*最大サイズの指定*/
  max-width: 60px ;
  max-height: 60px ;

 /*最少サイズの指定*/
  min-width: 40px ;
  min-height: 40px ;

  display: block ;
  margin: 0 auto ;
}

/* 【ガラケー用設定終了】 */
</nopc>


/* ■以上変更非推奨■ */
</st