@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

<style type="text/css">
/* === import === */






/* === reset & base === */


* ,*::before ,*::after {
	box-sizing: border-box;
	margin:  0;
	padding: 0;
	outline: 0;
	border: none;
	word-break: break-all;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	-webkit-appearance: none;
}

ul ,ol { 
list-style-type:none;
padding: inherit;

}

.left   {	text-align: left}
.right  {	text-align: right}
.center {	text-align: center}



/* === color === */


/*　ベース　*/

body::before {
	background-color: #cccccc;/* PC向け背景色 */
}

body ,.text::after ,#layout::before {
	background-color: #849ec0;/* トーク部分背景色 */
}

body ,li > div > p:last-child {
	color: #000000;/* 文字色 */
}


/*　リンク文字色　*/

a:link    {	color: #0000ff; }/* 通常 */
a:visited {	color: #800080; }/* 訪問済 */
a:hover   {	color: #ffff00; }/* 選択時 */
a:active  {	color: #ff0000; }/* クリック時 */


/* リンク装飾のリセット */

.button a ,.talk .stamp a ,.talk .image a {
	text-decoration: none;
}


/*　ヘッダー　*/

header {
	background-color: #464e66;/* 背景色 */
	color: #ffffff;/* 文字色 */
}


/*　フッター　*/

footer {
	background-color: #ffffff;/* 背景色 */
	color: #888da1;/* 文字色 */
}


/* フッター内テキストエリア */

footer .textarea {
	background-color: #f6f6f6;/* 背景色 */
	color: #000000;/* 文字色 */
	box-shadow: 0 0 0 1px #e8e6ec;/* 枠線 */
}


/*　日付,区切り　*/

.talk > .system p {
	background-color: rgba(0,0,0,0.2);/* 背景色 */
	color: #ffffff;/* 文字色 */
}


/*　左寄せふきだし　*/

.talk > .left > .text {
	background-color: #ffffff;/* 背景色 */
	color: #000000;/* 文字色 */
}


/*　右寄せふきだし　*/

.talk > .right > .text {
	background-color: #baf291;/* 背景色 */
	color: #000000;/* 文字色 */
}



/* === font === */

/* icon */

.icon ,.button > * ,[class^="call_"]::before {
	font-family: 'Material Icons';
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	             feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* 通常フォント */

body {
	font-family: 'Roboto Slab','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo','Osaka','ＭＳ Ｐゴシック', 'MS PGothic',sans-serif;
}



/* === layout === */


body {
	margin: 48px 0;
	text-align: center;
	letter-spacing: 1px;
}


#layout {
	position: relative;
	z-index: 1;
	max-width: 480px;
	margin: 0 auto;
	padding: 0;
	font-size: 12px;
	line-height: 1.5em;
}


header {
	position: fixed;
	left: 0; right: 0;
	z-index: 10;
	font-size: 2em;
	line-height: 100%;
       top: 0;
	padding-left:  1.75em;
	padding-right: 4.75em;
}

header span{
top: 0.7em;
}



footer {
	position: fixed;
	left: 0; right: 0;
	z-index: 10;
	font-size: 2em;
	line-height: 2em;
}


header h1 {
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
	font-weight: bold;
	font-size: 0.8em;
	white-space: nowrap;
}


footer {
	bottom: 0;
	padding: 0.5em 1.75em 1em 4.75em;
    height: 0.6em;
}

footer span{
top: 0.05em;
}


footer .textarea {
	display: block;
	height: 1em;
	padding: 0.5em 2em 0.5em 1.5em;
	border-radius: 1.5em;
	font-size: 0.5em;
	line-height: 1.5;
	text-align: left;
	overflow-y: auto;
}



.button > * {
	position: absolute;
	bottom: 0;
	display: block;
	width: 1.5em;
	overflow: hidden;
	color: inherit !important;
}

header .back  {	
                         left:  0.25em;
                        top: 0.5em;
}
header .menu1 {	right: 0.25em;}
header .menu2 {	right: 1.75em;}
header .menu3 {	right: 3.25em;}

header .back:before  {	content: 'keyboard_arrow_left';}
header .menu1:before {	content: 'keyboard_arrow_down';}
header .menu2:before {	content: 'insert_drive_file';}
header .menu3:before {	content: 'call';}

footer .send  {	right: 0.25em;}
footer .stmp  {	right: 1.75em;}
footer .menu1 {	left:  0.25em;}
footer .menu2 {	left:  1.75em;}
footer .menu3 {	left:  3.25em;}

footer .send:before  {	content: 'mic';}
footer .stmp:before  {	content: 'mood';}
footer .menu1:before {	content: 'add_circle';}
footer .menu2:before {	content: 'camera_alt';}
footer .menu3:before {	content: 'image';}


#content {
	position: rerative;
	z-index: 2;
	padding: 10px 5px;
}


.talk > li {
	position: relative;
	z-index: 3;
}

.talk > li ~ li {
	margin-top: 15px;
}

.talk > li:after {
	content: '';
	display: block;
	clear: both;
}


/* 区切り */

.talk > .system p {
	display: inline-block;
	padding: 5px 10px;
	line-height: 1em;
	border-radius: 10px;
}


/* アイコン設定 */

.talk > li > img {
	width: 1em;
	height: 1em;
	margin: 0 5px;
	border-radius: 0.5em;
	font-size: 40px;
}

.talk > .left > img {
	float: left;
	margin-left: 0;
}

.talk > .right > img {
	float: right;
	margin-right: 0;
}


/* 名前 */

.talk > li > span {
	display: block;
	font-weight: bold;
}



/* 既読,時刻表記部分 */

.talk > li > div > p:last-child {
	position: absolute;
	bottom: 4px;
	display: inline-block;
	width: 4em;
	font-size: 0.9em;
	line-height: 1em;
}


.talk > .left  > div > p:last-child {
	right: -4.5em;
	text-align: left;
}

.talk > .right > div > p:last-child {
	left: -4.5em;
	text-align: right;
}

.talk > li > div > p:last-child::before {
	display: inline-block;
	width: 100%;
}

.kdkset + li {
	margin-top: 0;
}

.talk > li.kdk > div > p:last-child::before {
	content: '既読';
}
.talk > .kdkset ~ li.kdk > div > p:last-child::before {
	content: '既読'counter(kdk); 
}



/* 内容部分　共通 */

.talk > li > div {
	position: relative;
	top: 0;
	display: inline-block;
	margin: 3px 5px 0;
	text-align: left;
}


/* 内容部分 左寄せ */
.talk > .left > div {
	left: 0 ;
	margin-right: 0 ;
}

/* 内容部分 右寄せ */
.talk > .right > div{
	right: 0 ;
	margin-left: 0 ;
}


/* フキダシ形成 */

.talk > li > .text {
	max-width: 60% ;
	height: auto ;
	padding: 6px 12px ;
	border-radius: 15px ;
}

.talk > li > .text::after ,.talk > li > .text::before {
	content: '';
	position: absolute;
	top: 0;
	z-index: -1;
	display: block;
	width: 20px;
}

.talk > li > .text::before {
	height: 9px;
	border-radius: 0 0 10px 10px;
	background-color: inherit;
}

.talk > li > .text::after {
	height: 4px;
	border-radius: 0 0 10px 10px / 0 0 4px 4px;
}

.talk > .left > .text::before ,
.talk > .left > .text::after {	left:  -4px; }

.talk > .right > .text::before ,
.talk > .right > .text::after {	right: -4px; }

p{
margin:0.1em;
}




/* 通話表示 */

[class^="call_"] {
	text-align: center;
	width: 6em;
}

[class^="call_"]::before {
	content: 'call';
	display: inline-block;
	width: 100%;
	overflow: hidden;
	font-size: 3.5em;
	line-height: 1em;
}

.call_o::before{	content: 'phone_in_talk'}
.call_c::after {	content: 'キャンセル'}
.call_x::after {	content: '着信不在'}


/* イメージ,スタンプ */

.talk > div img {
	width:  auto;
	height: auto;
}

.talk .stamp img {
	max-width:  150px;
	min-width:   30px;
	max-height: 150px;
	min-height:  30px;
}

.talk .image img {
	max-width:  120px;
	min-width:   60px;
	max-height: 120px;
	min-height:  60px;
	border-radius: 10px;
}



@media screen and (min-width: 481px) {


	body {
		margin: 0;
		background-size: 1px 1px;
		background-position: -2px 0;
	}

	body:before ,#layout:before {
		content: '';
		position: fixed;
		top: 0; bottom: 0;
		right: 0; left: 0;
		z-index: -5;
		display: block;
	}
header span {
    top: 0em;
}
header .back {
    left: 0.25em;
    top: 0;

}

	#layout {
		height: 100vh;
	}

	#layout:before {
		position: absolute;
		z-index: -4;
	}

	header ,footer {
		position: relative;
                line-height: 200%;
	}

	#content {
		height: -webkit-calc(100% - 8em);
		height:         calc(100% - 8em);
		overflow: auto;
	}

}
/*
parody01 ver(3.0.2)
Template by http://nanos.jp/sikaku0/ */
</style>