/*
 * Copyright (c) 2017 FUKUCHI Haruki
 * Released under the MIT license
 * http://fukuchiharuki.github.io/talk.css/LICENSE.txt
 */


#wrapper     {
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	width:60%; 
    }


.talkcss {
	display: block;
	padding: 20px;
	background-color: #bbeeff;
}

.talkcss > * {
	margin: 16px 0;
	padding: initial;
	line-height: normal;
	font-size: medium;
}

.talkcss:after {
	content: "";
	display: block;
	clear: both;
}

.talkcss > .left.icon,
.talkcss > .right.icon,
.talkcss > .left:not(.icon)  + .left:not(.icon),
.talkcss > .right:not(.icon) + .left:not(.icon),
.talkcss > .right:not(.icon) + .right:not(.icon),
.talkcss > .left:not(.icon)  + .right:not(.icon) {
	clear: both;
}

.talkcss > .left.icon,
.talkcss > .right.icon {
	background-color: white;
	display: inline-block;
	width: 60px;
	height: 60px;
	background-position: center middle;
	background-size: cover;
	border-radius: 50%;
}

.talkcss > .left.icon {
	float: left;
	margin-right: 15px;
	background-image: url(./icon-irast2.png);
}

.talkcss > .right.icon {
	float: right;
	margin-left: 15px;
	background-image: url(./icon-irast4.png);
}

.talkcss > .icon.named {
	position: relative;
}

.talkcss > .icon.named:after {
	position: absolute;
	white-space: nowrap;
	top: -13px;
	display: block;
	color: #333333;
}

.talkcss > .icon.left.named:after {
	content: "課長Aさん";
	left: 75px;
}

.talkcss > .icon.right.named:after {
	content: "社員Sさん";
	right: 75px;
}

.talkcss > .icon.named + * {
	margin-top: 25px;
}

.talkcss > .left.icon + *,
.talkcss > .right.icon + *,
.talkcss > .left:not(.icon),
.talkcss > .right:not(.icon) {
	position: relative;
	padding: 10px 20px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}

.talkcss > .left.icon + *,
.talkcss > .right.icon + * {
	max-width: 60%;
	max-width: -webkit-calc(75% - 60px);
	max-width: calc(75% - 60px);
}

.talkcss > .left:not(.icon),
.talkcss > .right:not(.icon) {
	max-width: 75%;
}

.talkcss > .left.icon + *:before,
.talkcss > .right.icon + *:before,
.talkcss > .left:not(.icon):before,
.talkcss > .right:not(.icon):before {
	z-index: 1;
	content: "";
	position: absolute;
	top: 10px;
	width: 0;
	height: 0;
	border-top: 2px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid transparent;
}

.talkcss > .left.icon + *,
.talkcss > .left:not(.icon) {
	float: left;
	background-color: white;
}

.talkcss > .left.icon + *:before,
.talkcss > .left:not(.icon):before {
	border-right: 10px solid white;
	left: -14px;
}

.talkcss > .right.icon + *,
.talkcss > .right:not(.icon) {
	float: right;
	background-color: GreenYellow;
}

.talkcss > .right.icon + *:before,
.talkcss > .right:not(.icon):before {
	border-left: 10px solid GreenYellow;
	right: -14px;
}








.talkcss2 {
	display: block;
	padding: 20px;
	background-color: #bbeeff;
}

.talkcss2 > * {
	margin: 16px 0;
	padding: initial;
	line-height: normal;
	font-size: medium;
}

.talkcss2:after {
	content: "";
	display: block;
	clear: both;
}

.talkcss2 > .left.icon,
.talkcss2 > .right.icon,
.talkcss2 > .left:not(.icon)  + .left:not(.icon),
.talkcss2 > .right:not(.icon) + .left:not(.icon),
.talkcss2 > .right:not(.icon) + .right:not(.icon),
.talkcss2 > .left:not(.icon)  + .right:not(.icon) {
	clear: both;
}

.talkcss2 > .left.icon,
.talkcss2 > .right.icon {
	background-color: white;
	display: inline-block;
	width: 60px;
	height: 60px;
	background-position: center middle;
	background-size: cover;
	border-radius: 50%;
}

.talkcss2 > .left.icon {
	float: left;
	margin-right: 15px;
	background-image: url(./icon-irast1.png);
}

.talkcss2 > .right.icon {
	float: right;
	margin-left: 15px;
	background-image: url(./icon-irast3.png);
}

.talkcss2 > .icon.named {
	position: relative;
}

.talkcss2 > .icon.named:after {
	position: absolute;
	white-space: nowrap;
	top: -13px;
	display: block;
	color: #333333;
}

.talkcss2 > .icon.left.named:after {
	content: "社員Oさん";
	left: 75px;
}

.talkcss2 > .icon.right.named:after {
	content: "社員Hさん";
	right: 75px;
}

.talkcss2 > .icon.named + * {
	margin-top: 25px;
}

.talkcss2 > .left.icon + *,
.talkcss2 > .right.icon + *,
.talkcss2 > .left:not(.icon),
.talkcss2 > .right:not(.icon) {
	position: relative;
	padding: 10px 20px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}

.talkcss2 > .left.icon + *,
.talkcss2 > .right.icon + * {
	max-width: 60%;
	max-width: -webkit-calc(75% - 60px);
	max-width: calc(75% - 60px);
}

.talkcss2 > .left:not(.icon),
.talkcss2 > .right:not(.icon) {
	max-width: 75%;
}

.talkcss2 > .left.icon + *:before,
.talkcss2 > .right.icon + *:before,
.talkcss2 > .left:not(.icon):before,
.talkcss2 > .right:not(.icon):before {
	z-index: 1;
	content: "";
	position: absolute;
	top: 10px;
	width: 0;
	height: 0;
	border-top: 2px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid transparent;
}

.talkcss2 > .left.icon + *,
.talkcss2 > .left:not(.icon) {
	float: left;
	background-color: white;
}

.talkcss2 > .left.icon + *:before,
.talkcss2 > .left:not(.icon):before {
	border-right: 10px solid white;
	left: -14px;
}

.talkcss2 > .right.icon + *,
.talkcss2 > .right:not(.icon) {
	float: right;
	background-color: GreenYellow;
}

.talkcss2 > .right.icon + *:before,
.talkcss2 > .right:not(.icon):before {
	border-left: 10px solid GreenYellow;
	right: -14px;
}