.contact-page .container {
display: flex;
color: var(--white);
}
.contact-page .left-blk {
background-color: var(--primary-color);
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
padding: 42px 45px 40px 39px;
width: 42.5%;
}
.contact-page .left-blk .contact-ttl {
font-size: 39px;
font-weight: 500;
letter-spacing: 0.5px;
font-family: var(--font1);
}
.contact-page .left-blk .contact-description {
font-size: 18px;
line-height: 1.4;
padding: 13px 0;
letter-spacing: 0.2px;
font-weight: 400;
color: var(--gray);
font-family: var(--font3);
}
.contact-page .address,
.contact-page .phone-contact {
display: flex;
align-items: flex-start;
padding: 25px 0 0;
}
.contact-page .address .img-blk{
width: 14%;
}
.contact-page .phone-contact .img-blk{
width: 6%;
margin-right: 2%;
}
.contact-page .address .img-blk img,
.contact-page .phone-contact .img-blk img {
max-width: 36px;
width: 100%;
}
.contact-page .sub-ttl {
letter-spacing: 0.5px;
}
.contact-page .description {
font-size: 18px;
letter-spacing: -0.5px;
font-weight: 400;
font-family: var(--font3);
padding: 6px 0;
line-height: 1.3;
color: var(--gray);
display: block;
}
.contact-page .social-blk {
display: flex;
padding-top: 155px;
}
.contact-page .social-blk li {
margin-right: 15px;
}
.contact-page .social-blk li a {
display: block;
}
.contact-page .social-blk li a img {
max-width: 36px;
}
.contact-page .right-blk {
border: 1px solid #D1D1D1;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background-color: #F7F8FA;
width: 58%;
padding: 68px 48px;
}
.contact-form .form-input .input,.contact-page .nf-form-content input:not([type=button]) ,.nf-field-element textarea{
border: 1px solid #D1D1D1 !important;
}
@media only screen and (min-width:768px) and (max-width:1280px) {
.contact-page .left-blk {
border-top-left-radius: 0.625vw;
border-bottom-left-radius: 0.625vw;
padding: 3.281vw 3.516vw 3.125vw 3.047vw;
}
.contact-page .left-blk .contact-ttl {
font-size: 3.047vw;
letter-spacing: 0.039vw;
}
.contact-page .left-blk .contact-description {
font-size: 1.406vw;
padding: 1.016vw 0;
letter-spacing: 0.016vw;
}
.contact-page .address,
.contact-page .phone-contact {
padding: 1.953vw 0 0;
}
.contact-page .address .img-blk img,
.contact-page .phone-contact .img-blk img {
max-width: 2.813vw;
}
.contact-page .sub-ttl {
letter-spacing: 0.039vw;
}
.contact-page .description {
font-size: 1.406vw;
letter-spacing: -0.039vw;
padding: 0.469vw 0;
}
.contact-page .social-blk {
padding-top: 12.109vw;
}
.contact-page .social-blk li {
margin-right: 1.172vw;
}
.contact-page .social-blk li a img {
max-width: 2.813vw;
}
}
@media all and (max-width:767.9px) {
.contact-page .container {
flex-direction: column-reverse;
}
.contact-page .left-blk {
border-top-left-radius: 0;
border-bottom-left-radius: 2.133vw;
border-bottom-right-radius: 2.133vw;
padding: 10.133vw 4.8vw 10.667vw 4.8vw;
width: 100%;
}
.contact-page .left-blk .contact-ttl {
font-size: 6.667vw;
letter-spacing: 0.139vw;
}
.contact-page .left-blk .contact-description {
font-size: 4.267vw;
line-height: 1.5;
padding: 2.133vw 0;
letter-spacing: 0.027vw;
}
.contact-page .address,
.contact-page .phone-contact {
padding: 8.267vw 0 0;
}
.contact-page .address .img-blk img,
.contact-page .phone-contact .img-blk img {
max-width: 9.6vw;
width: 100%;
}
.contact-page .sub-ttl {
letter-spacing: 0.135vw;
}
.contact-page .address .txt-blk,
.contact-page .phone-contact .txt-blk {
padding-left: 1.6vw;
}
.contact-page .description {
font-size: 4.267vw;
letter-spacing: -0.133vw;
padding: 1.333vw 0;
line-height: 1.3;
}
.contact-page .social-blk {
padding-top: 13.867vw;
}
.contact-page .social-blk li {
margin-right: 4vw;
}
.contact-page .social-blk li a {
display: block;
}
.contact-page .address .img-blk{
width: 14%;
}
.contact-page .phone-contact .img-blk{
width: 6+%;
margin-right: 1%;
}
.contact-page .social-blk li a img {
max-width: 9.6vw;
}
.contact-page .right-blk {
border: 0.267vw solid #D1D1D1;
border-top-left-radius: 2.133vw;
border-top-right-radius: 2.133vw;
border-bottom-right-radius: 0;
width: 100%;
padding: 9.067vw 4vw;
}
.contact-form .form-input .input,.contact-page .nf-form-content input:not([type=button]),.nf-field-element textarea {
border: 0.267vw solid #D1D1D1 !important;
}
.contact-form .btn {
width: 100%;
}
}