@charset "utf-8";
/*---------------------一覧ページ-----------------------*/
#tips-q-area{padding: 10px 10px 10px 150px;}
#tips-q-area .tips-img1 {
	display: block;	
	position: absolute;
	bottom: 0;
	left: 15px;
	z-index: 10;
}
.talk-left {
    position: relative;
    background: #fff;
    padding: 30px 15px 26px 18px;
    border-radius: 4px;
    margin-bottom: 4px;
}
.talk-left:before {
    content: "";
    display: inline-block;
    border: 12px solid transparent;
    border-right-color: #fff;
    position: absolute;
    left: -24px;
    top: 50%;
    margin-top: -12px;
}
.talk-left h2.title{
	margin: 0 auto;
	justify-content: flex-start;-webkit-box-pack: start;-ms-flex-pack: start;-webkit-justify-content: flex-start;
}
.talk-left h2.title .text{flex: 2;-webkit-box-flex:2;-ms-flex:2;}
.talk-left .icon-q{
	display: block;
	margin:0 10px 0 0;
    font-size: 36px;
    width: 50px;
    height: 50px;
    text-align: center;
    background: url(../../common/images/back-orange.jpg) no-repeat center top;
    color: #fff;
    border-radius: 100%;
    line-height: 50px;
}
#tips-a-area{padding: 10px 150px 10px 10px;}
#tips-a-area .tips-img2 {
	display: block;	
	position: absolute;
	bottom: 0;
	right: 10px;
	z-index: 10;
}
.talk-right {
    position: relative;
    background: #fff;
    padding: 30px 30px 25px 30px;
    border-radius: 6px;
    text-align: left !important;
}
.talk-right:before {
    content: "";
    display: inline-block;
    border: 12px solid transparent;
    border-left-color: #fff;
    position: absolute;
    right: -24px;
    top: 50%;
    margin-top: -12px;
}
.talk-right .icon-a{
	display: block;
    font-size: 36px;
    width: 50px;
    height: 50px;
    text-align: center;
    background: url(../../common/images/back-brown.jpg) no-repeat center top;
    color: #fff;
    border-radius: 100%;
    line-height: 50px;
	margin: 0 auto 5px ;
}
.talk-right .web-font{font-size: 1.2em;}
.tips-content-box p{padding-bottom: 15px;}
.tips-content-box .title-area h2.title{
	justify-content: center;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content:center;
	margin: 10px auto 15px;
}
.tips-content-box .title-area h2.title .icon-flag-brown{
	width: 28px;
	height: auto;
	margin-right: 15px;
}
@media only screen and (max-width: 589px){
	#tips-q-area .tips-img1 {width: 80px;height: auto;}	
	#tips-q-area {padding: 10px 10px 10px 108px;}
	.talk-right:before{content: none;}
	#tips-a-area {padding: 10px;}
	#tips-a-area .tips-img2 {bottom: auto;right: 10px;width: auto;height: 100px;top: -8px;}
}	
@media only screen and (max-width: 489px){
	#tips-q-area .tips-img1 { width: 55px;left: 5px;}
	#tips-q-area {padding: 10px 10px 10px 67px;}
	.talk-left .icon-q {margin: 0 5px 0 0;font-size: 26px;width: 36px;height: 36px;line-height: 36px;}
	.talk-left {padding: 20px 15px 13px 12px;}
	.talk-right .icon-a{font-size: 26px;width: 36px;height: 36px;line-height: 36px;}
	#tips-a-area .tips-img2 {height: 80px;top: -20px;}
	.talk-right { padding: 13px 15px 10px 15px;}
	.tips-content-box .box-inner-l{margin-bottom: 0;}
	.tips-content-box .title-area h2.title .icon-flag-brown {display: block;position: absolute;margin: auto;left: 0;right: 0;top: -39px;}
}