@charset "utf-8";
/* CSS Document */

.base-title {
    width: 100%;
    height: 70vh;
    background-image: url(../images/staff/voice-top2.jpg);	
	background-position: top;
	background-size: cover;
	position:relative;
}
.contact {
	width:85%;
	margin:auto;
	position:relative;
}
.contact-content {
	/*border:solid 3px #CEE8E8;*/
	border-radius:20px;
	padding:60px 0;
	margin-bottom:100px;
	/*background-color:#fff;*/
}





.contact-box {
    width: 100%;
    margin: 0 auto;
}
.contact-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 22px 18px;
    border-top: 2px solid #ccc; 
}
.contact-item:last-child {
    border-bottom: 2px solid #ccc; 
}
.contact-item span {
	display: inline-block;
}
.contact-text {
	width: 50%;
    position: relative;
    font-size: 18px;
    margin-left: 20px;
	margin-right: 40px;
}
.contact-text::before {
    content: "";
	position: absolute;
    border-radius: 10px;
    height: 24px;
    width: 7px;
	left: -20px;
	top: 50%;
    transform: translateY(-50%) translateX(-50%); 
}
.phone-text::before {
	background-color: #3A3A3A;
}
.line-text::before {
	 background-color: #06c755;
}
.contact-img img {
    width: 30px;
    padding-top: 5px;
    margin-right:30px;
}
.contact-button {
	width: 50%;
}
.contact-button a {
    color: #fff;
    font-size: 16px;
	display: block;
	width: 100%;
	padding: 10px 20px;
    background-color: #333;
    border-radius: 35px;
	text-align: center; 
}
.phone-button a {
    background-color: #333; 
}
.line-button a {
    background-color: #06c755; 
}

@media(max-width:640px){
	.contact-item{
		display: grid;
        place-content: center;
	}
	.contact-text{
		width: 100%;
	}
	.contact-button{
		width: 100%;
		margin-top: 10px;
	}
  /*.line-button{
	    padding: 10px 70px;
	}*/
	.contact-text::before {
		display: none;
	}
	.contact-img img{
		display: none;
	}
	.contact-text{
        padding: 4px 0 14px 24px;
		margin-right: 10px;
		position: relative;
	}
	.phone-text::after {		
		content: "";
		position: absolute;
        top: 4px;
        left: -18.5px;
        width: 26px;
        height: 26px;
        background-image:url("../images/contact/contact-icon.webp");
        background-size: contain; 
        /*background-repeat: no-repeat;*/
     }
	.line-text{
		margin-left: 27px;		
	}
	.line-text::after{
		content: "";
		position: absolute;
        top: 6px;
        left: -24px;
        width: 26px;
        height: 26px;
        background-image:url("../images/contact/contact-icon1.webp");
        background-size: contain; 
        /*background-repeat: no-repeat;*/
 }
 }