/*****文字フォント*****/
body {
	font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}/*****ここから料金表テーブルのCSS*****/

section th, section td {
	padding: 10px;
	border: 1px solid #ddd;
}

section th {
	background: #f4f4f4;
}

/*----------------------------------------------------
  .demo01
----------------------------------------------------*/
.demo01 th {
	width: 30%;
	text-align: left;
}

@media only screen and (max-width:480px) {
	.demo01 {
		margin: 0 -10px;
	}
	
	.demo01 th,
															    .demo01 td {
		width: 100%;
		display: block;
		border-top: none;
	}
	
	.demo01 tr:first-child th {
		border-top: 1px solid #ddd;
	}
}

/*****ここから会話のCSS*****/
.talk-wrap {
	display: block;
	clear: both;
	margin: 0 auto 3px;
}

.talk-wrap p {
	margin: 0;
}

.left-icon {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	background: no-repeat;
	background-size: 180%;
	background-position: center;
	float: left;
	display: inline-block;
	box-shadow: 1px 1px 5px #aaa;
/*左のアイコンの影の設定*/
	border: 3px solid #fff;
/*左のアイコンの枠の設定*/
	margin-bottom: 10px;
}

.talk-left {
	float: right;
	position: relative;
	background: #fff;
/*左の会話の背景色*/
	border: 2px solid #666;
	padding: 3%;
	border-radius: 10px;
	width: 70%;
	margin-top: 10px;
	box-shadow: 1px 1px 5px #aaa;
/*左の会話の影の設定*/
	margin-bottom: 10px;
}

.talk-left:before {
	content: "";
	display: inline-block;
	border: 10px solid transparent;
	border-right-color: #666;
	position: absolute;
	left: -20px;
	top: 25%;
	margin-top: -9px;
}

.talk-left:after {
	content: "";
	display: inline-block;
	border: 9px solid transparent;
	border-right-color: #fff;
	position: absolute;
	left: -16px;
	top: 25%;
	margin-top: -8px;
}

.right-icon {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	background: no-repeat;
	background-size: 180%;
	background-position: center;
	float: right;
	display: inline-block;
	box-shadow: 1px 1px 5px #aaa;
/*右のアイコンの影の設定*/
	border: 3px solid #FFF;
/*右のアイコンの枠の設定*/
	margin-bottom: 10px;
}

.talk-right {
	float: left;
	position: relative;
	background: #fff;
/*右の会話の背景色*/
	border: 2px solid #666;
	padding: 3%;
	border-radius: 10px;
	width: 70%;
	margin-top: 10px;
	box-shadow: 1px 1px 5px #aaa;
/*右の会話の影*/
	margin-bottom: 10px;
}

.talk-right:before {
	content: "";
	display: inline-block;
	border: 10px solid transparent;
	border-left-color: #666;
	position: absolute;
	right: -20px;
	top: 25%;
	margin-top: -9px;
}

.talk-right:after {
	content: "";
	display: inline-block;
	border: 9px solid transparent;
	border-left-color: #fff;
	position: absolute;
	right: -16px;
	top: 25%;
	margin-top: -8px;
}

.talk-end {
	clear: both;
}

/*****レスポンシブ設定*****/
@media screen and (max-width: 480px) {
	.left-icon {
		width: 80px;
		height: 80px;
	}
	
	.talk-left {
		width: 65%;
	}
	
	.right-icon {
		width: 80px;
		height: 80px;
	}
	
	.talk-right {
		width: 65%;
	}
}

@media screen and (max-width: 380px) {
	.left-icon {
		width: 60px;
		height: 60px;
	}
	
	.talk-left {
		width: 65%;
	}
	
	.right-icon {
		width: 60px;
		height: 60px;
	}
	
	.talk-right {
		width: 65%;
	}
}