@charset "utf-8";
/* Chat! signage  CSS */

body{
	font-family: "メイリオ", Meiryo, Osaka,SimHei;
}

.inner-box {
    width: 1000px;

}

.plr72{
	padding:0px 64px;
}
.ptb72{
	padding:72px 0;
}
.pt72{
	padding-top:72px;
}
.pt64{
	padding-top:64px;
}
.pb144{
	padding-bottom:144px;
}
h1{
	font-size: 32px;
    text-align: center;
    line-height: 1.4;
    font-weight: bold;
    position: relative;
	margin-bottom:66px;
}
h1.signage{
	color:#333;
}
h1.signage:before{
	content: '';
    display: block;
    width: 90px;
    position: absolute;
    bottom: -15px;
    left: calc(50% - 40px);
	border-bottom: 3px solid;
    border-image: linear-gradient(to right, #3fa9f5 0%, #227bbb 100%);
    border-image-slice: 1;
}
h1.signage:after{
	content: '';
    display: block;
    width: 90px;
    position: absolute;
    bottom: -15px;
    left: calc(50% - 40px);
	border-bottom: 3px solid;
    border-image: linear-gradient(to right, #227aba 0%, #054b7f 100%);
    border-image-slice: 1;
}

h1.white{
	color:#fff;
}
h1.white:before{
	content: '';
    display: block;
    width: 90px;
    position: absolute;
    bottom: -15px;
    left: calc(50% - 40px);
	border-bottom: 3px solid #fff;
}
h1.white:after{
	content: '';
    display: block;
    width: 90px;
    position: absolute;
    bottom: -15px;
    left: calc(50% - 40px);
	border-bottom: 3px solid #fff;
}

/*header  keyvisual */

#keyvisual{
	background:url(../chat_signage/images/bg_keyvisual.jpg) no-repeat center;
	background-size: cover;
	width:100%;
	min-height:562px;
}

.mxlogo{
	max-width:194px;
	padding-top:40px;
	margin-left:40px;
}
#keyvisual h1{
	padding:0;
	margin-bottom:16px;
	margin-left:40px;
	
}
.keytext{
	margin:0 0 48px 40px;
	width:371px;
	line-height: 1.6em;
}
.btn_keyvisual{
	margin-left:88px;
}
.btn_keyvisual a{
    color: #0089DD;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    margin: 0 auto;
    background: #fff;
    width: 260px;
    box-sizing: border-box;
    border-radius: 100px;
    letter-spacing: 1px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 1.2rem;
    line-height: 1.5882352941;
	border:3px solid #0089DD;

}
.btn_keyvisual a:hover{
	opacity:0.6;
	transition: all 500ms 0s ease;
}

/* recommend */

#recommend{
	background:url("../chat_signage/images/bg_recommend.jpg") no-repeat center;
	background-size: cover;
	
}

#recommend ul li{
	font-size: 24px;
	font-weight: bold;
	padding-left: 44px;
	background: url("../chat_signage/images/li_check_b.png") left 0px top -3px no-repeat;
	background-size: 36px auto;
	margin-bottom:24px;
	}

#recommend ul li:last-child{
	margin-bottom:0px;
}


#explace{
	background-color:#C6E6F7;
}
#explace .flex div,#explace .flex div img{
	width:238px;
}
#explace .flex div p{
	text-align: center;
}

#excontents{
}
#excontents .flex div,#excontents .flex div img{
	width:320px;
}

#excontents .flex div:nth-child(n+4) {
    margin-top: 24px;
}

#merit_summary,#chat_office_summary{
	background:#3FA9F5 url("../chat_signage/images/bg_merit_summary.png") no-repeat center bottom;
}


ul.checkw li{
	font-size: 24px;
	padding-left: 44px;
	background: url("../chat_signage/images/li_check_w.png") left 0px top -3px no-repeat;
	background-size: 36px auto;
	margin-bottom:24px;
	color:#fff;
	}

ul.checkw li:last-child{
	margin-bottom:0px;
}
ul.checkw li strong{
	color:#ffff00;
}



/* inquiry */
.inquiry{
	background: url("../chat_signage/images/bg_inquiry.png") no-repeat center;
	background-size: cover;
	
}

.inq_first{
	width:100%;
	text-align: center;
	font-weight: bold;
	font-family: "見出ゴMB31",Midashi Go MB31;
	font-size: 24px;
	margin-bottom:22px;
	color:#4d4d4d;
}
.tel img{
	width:374px;
}
.inq_form a:hover{
	opacity:0.6;
	transition: all 500ms 0s ease;
}
.inquiry .flex{
	justify-content:center;
}

.inq_form a{
    color: #fff;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    background: #fff;
    width: 353px;
    box-sizing: border-box;
    border-radius: 100px;
    letter-spacing: 1px;
    padding-top: 18px;
    font-size: 1.4rem;
    line-height: 1.5882352941;
	background-color:#0089DD;
	height:70px;
	font-family: "TBUD丸ゴシック B",TBUDRGothic B;
	/*font-family: "TBUD丸ゴシック H",TBUDRGothic H;*/

}


#chat_office_one{

}
.chat_title{
	width:359px;
	margin:0 0 8px;
}

.chat_img{
	width:200px;
}
#chat_office_one .box-2column p.tc{
	margin-bottom:24px;
	}
#chat_office_one .box-2column h2{
	font-size: 24px;
	font-weight: normal;
	text-align: center;
	color:#444;
	margin-bottom:20px;
}


#chat_office_one .box-2column:nth-child(2) {
    margin-bottom: 32px;
}

#chat_office_two{
}

#exmx{
	background:url("../chat_signage/images/bg_mx.png") no-repeat center;
	background-size: cover;
}
#exmx .flex div{
	max-width:320px;
}

#easy_signage{
	background:url("../chat_signage/images/bg_easy_signage.jpg");
}

#easy_signage h2{
	font-size: 24px;
	font-weight: bold;
	padding-left: 44px;
	background: url("../chat_signage/images/li_check_b.png") left 0px top -3px no-repeat;
	background-size: 36px auto;
	margin-bottom:16px;
	color:#444;
	}

#easy_signage p:not(.tc){
	margin-bottom:36px;
	padding-left:44px;
}

footer{ background:#4c4c4c;}
footer .flex{
	justify-content: center;
}

footer ul li a{
	color:#fff;
}
footer ul li a:hover{
	opacity:0.6;
	transition: all 500ms 0s ease;
}
footer ul li a:after{
	content:"|";
	padding:0 32px;
}

footer ul li:last-child a:after{
	padding:0;
	content:"";
}
.copyright{
	color:#fff;
	font-size: 70%;
	margin-top:8px;
}


/* PAGE TOP */

.gotop {
	position: absolute;
	width: 50px;
	height: 68px;
	margin-bottom: 20px;
	bottom: 0;
	right: 10px;
	z-index: 9999;
    }
.gotop a {
	width: 50px;
	height: 68px;
	margin: auto;
	background: url(../images/btn_ptop.png) no-repeat 0 0;
	text-indent: -9999px;
	display: block;
    }
.gotop a:hover{
	background-position:0 -68px;
    }





/*---------------------------------------
pc tablet
---------------------------------------*/
@media screen and (min-width:852px){

.sp{
	display: none;
}



}
/*---------------------------------------
sp
---------------------------------------*/
@media screen and (max-width:851px){

.inner-box{
	width: 100%;
	padding:0 16px;
}

.flex{
	display: block;
}

.box-2column{
	width:100%;
	
}
h1{
	font-size: 1.4rem;
	margin-bottom:40px;
}

.ptb72{
	padding:56px 0;
}

.pt72{
	padding-top:56px;
}
.pb144{
	padding-bottom:80px;
}
/* keyvisual */

#keyvisual{
	min-height: inherit;
}

#keyvisual .inner-box{
	padding:24px 16px 48px;
	text-align: center;
	
}
.mxlogo{
	margin-left:0px;
	padding-top:0;
}
.mxlogo img{
	width:80%;
}
#keyvisual h1{
	margin:32px 0 24px;
	}
	
#keyvisual h1 img{
	width:80%;
	}

.keytext{
	margin:0 auto;
	width:90%;
	line-height: 1.6em;
	text-align: left;
}

.btn_keyvisual{
	margin-left:0px;
	margin-top:24px;
}


#recommend ul li{
	font-size: 1.1rem;
	font-weight: bold;
	padding-left: 36px;
	background: url("../chat_signage/images/li_check_b.png") left 0px top -5px no-repeat;
	background-size: 36px auto;
	margin-bottom:16px;
	}

#explace .flex,#excontents .flex{
	display: flex;
}

#explace .flex div,#excontents .flex div{
	width:49%;
}
#explace .flex div img,#excontents .flex div img{
	width:100%;
}
#explace .flex div:nth-child(2) {
    margin-bottom: 16px;
}
#excontents .flex div:nth-child(n+4) {
    margin-top: 0px;
}
#excontents .flex div:nth-child(odd){
	margin-bottom:16px;
}

ul.checkw li{
	font-size: 1.1em;
	padding-left: 36px;
	background: url("../chat_signage/images/li_check_w.png") left 0px top -5px no-repeat;
	background-size: 36px auto;
	margin-bottom:16px;
	color:#fff;
	}
/* inquiry */

.inquiry img{
	width:60%;
	max-width:inherit;
}

.inq_form{
	margin:16px 0 0;
}

.chat_title{
	width:60%;
	margin:0 0 8px;
}

.chat_img{
	width:30%;
}
#chat_office_one .box-2column.ad45{
	width:100%;
}
#chat_office_one .box-2column p.tc{
	margin-bottom:8px;
	}
#chat_office_one .box-2column h2{
	font-size: 1.1rem;
	font-weight: bold;
	color:#444;
	margin-bottom:16px;
}

#chat_office_one .box-2column:nth-child(2) {
    margin-bottom: 0px;
}

#chat_office_one .box-2column.ad45{
	width:100%;
	margin-bottom:32px;
}
#chat_office_one .box-2column.ad45:last-child{
	margin-bottom:0px;
}


#chat_office_two .mb48{
	margin-bottom:24px;
}
#exmx{
	background:url("../chat_signage/images/bg_mx.png") no-repeat center;
	background-size: cover;
}
#exmx .flex{
	text-align: center;
}
#exmx .flex div{
	max-width: 90%;
	margin:0 auto 16px;
}
#exmx .flex div:last-child{
	margin-bottom:0;
	}


#easy_signage h2{
	font-size: 1.1rem;
	font-weight: bold;
	padding-left: 36px;
	background: url("../chat_signage/images/li_check_b.png") left 0px top -5px no-repeat;
	background-size: 36px auto;
	margin-bottom:8px;
	}

#easy_signage p:not(.tc){
	margin-bottom:24px;
	padding-left:36px;
}

	

/* footer */

footer .flex{
	display: none;
}
.copyright{
	margin-top:0;
}
}