@charset "utf-8";
form {
    margin: 0 auto;
    padding: 0;
}
.contact_form main{
    width: 800px;
    margin: 0 auto 50px;
}
.contact_form main > div{
    min-height: 700px;
}
@media screen and (max-width: 800px){
.contact_form main{
    width: auto;
}
}
.flex{
    display: flex!important;
}
textarea,input,textarea{
    outline: none;
}
.textFormFieldBlock{
    margin-bottom: 10px;
}
textarea, 
.textFormFieldBlock input,
select{
    border: 1px solid #ccc;
    padding: 5px;
}
select{
    font-size: 14px;
    width: 200px;
    cursor: pointer;
}
select:last-of-type{
    margin-left: 10px;
}
.country select:last-of-type{
    margin-left: 0;
}
div#externalcall {
    margin-bottom: 20px;
}
textarea{
    width: 100%;
}
.box h3{
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: normal;
}
.box.flex,
.textFormFieldBlock.flex{
    align-items: center;
    margin-bottom: 10px;
}
.box.flex label,
.box.flex h3,
.textFormFieldBlock.flex label{
    width: 200px;
    flex-shrink: 0;
}
.box.flex .textFormFieldBlock:first-of-type{
    margin-right: 10px;
}
.box.flex > .flex > .textFormFieldBlock.flex label{
    width: 40px;
}
.box.flex > .flex > .textFormFieldBlock.flex:first-of-type{
    margin-right: 20px;
}
.email input,
.address input{
    width: 300px;
}
.ja-country{
    display: none;
}
.city label{
    width: 100px!important;
    padding-left: 20px;
}
.street input {
    width: 500px;
}
div[data-targetproperty="lastname"] label,
div[data-targetproperty="firstname"] label,
div[data-targetproperty="yomilastname"] label,
div[data-targetproperty="yomifirstname"] label{
    display: none;
}
.privacy h2{
    font-size: 16px;
    margin: 0 0 10px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
}
.privacy p{
    text-align: left;
}
.privacy p a{
    text-decoration: underline;
    color: #0070b8;
}
.service{
    margin: 50px 0 20px 10px;
    position: relative;
}
.service h2{
    font-size: 18px;
    border-left: 5px solid #0070b8;
    margin-bottom: 15px;
    padding: 6px 0 5px 10px;
    text-align: left;
}
.service h2 + p {
    text-align: left;
}
.service .twoOptionFormFieldBlock{
    margin-left: 16px;
}
.service p {
    margin: 0 0 10px 16px;
}
.consentTopicCheckbox.topic-disabled-text,
.topic-disabled-text  {
    display: none;
}
.consentCheckbox:checked ~ .consentTopicCheckbox.topic-disabled-text,
.consentCheckbox:checked ~ .topic-disabled-text{
    display: block;
}
.consentBlock.topic {
    margin-left: 20px;
}
.consentBlock.topic label {
    cursor: default;
}
.service > div:nth-child(2) {
    padding-top: 33px;
    position: relative;
}
.service > div:nth-child(2) span {
    position: absolute;
    top: -30px;
    left: 1px;
    display: block;
    width: 500px;
    font-weight: 700;
    padding: 4px 0 2px 14px;
}
.service > div:nth-child(2) span::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%); 
    border: 5px solid transparent;
    border-left: 8px solid #0070b8; 
}
.topic li {
    padding-bottom: 10px;
}
.service input[type="checkbox"]::before,
.service input[type="checkbox"]::after{
    margin-top: -1px;   
}
.service label{
    position: relative;
    padding-left: 40px;
    cursor: pointer;
}
.service input[type="checkbox"],
.interest input[type="checkbox"] {
    margin: 0 0 0 17px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    vertical-align: middle;
    position: absolute;
    left: -5px;
    transform: translate(-50%, -50%);
    top: 50%;
}
.service input[type="checkbox"]::before, 
.service input[type="checkbox"]::after,
.interest input[type="checkbox"]::before, 
.interest input[type="checkbox"]::after {
    content: '';
    display: block;
    position: absolute;
}
.service input[type="checkbox"]::before,
.interest input[type="checkbox"]::before {
    background-color: white;
    border-radius: 2px;
    border: 1px solid #666;
    width: 13px;
    height: 13px;
    transform: translateY(-50%);
    top: 50%;
    left: 6px;
}
.interest input[type="checkbox"]::before{
    left: -6px;
}
.service input[type="checkbox"]::after,
.interest input[type="checkbox"]::after {
    border-bottom: 3px solid #0070b8;
    border-left: 3px solid #0070b8;
    opacity: 0;
    height: 6px;
    width: 11px;
    transform: rotate(-45deg);
    top: 50%;
    left: 8px;
    margin-top: -5px;
}
.interest input[type="checkbox"]::after{
    left: -4px;
}
.service input[type="checkbox"]:checked::after,
.interest input[type="checkbox"]:checked::after {
    opacity: 1;
}
.w-max input{
    width: 100%;
    font-size: 14px;
}
form a.btn,
form button {
    background: #0070b8;
    color: white!important;
    font-weight: 700;
    text-align: center;
    max-width: 200px;
    width: 100%;
    padding: .3em 0 .2em;
    margin: 4em auto 0;
    color: #0070b8;
    text-decoration: none;
    display: block;
    position: relative;
    border-radius: 50px;
    cursor: pointer
}
form a.btn::before,form button::before {
    content: '';
    width: 7px;
    height: 7px;
    border-top: 1px solid white;
    border-right: 1px solid white;
    position: absolute;
    top: 50%;
    right: 10%;
    margin-top: -3px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all .3s
}
form a.btn:hover,form button:hover {
    border: 1px solid #0070b8;
    transition: all .3s;
    border: 1px solid #0070b8;
    background-color: white;
    color: #0070b8!important;
}
form a.btn:hover::before,button:hover::before {
    border-top: 1px solid #0070b8;
    border-right: 1px solid #0070b8;
    right: 8%
}
.privacy{
    background-color: #f8f8f8;
    padding: 20px;
    margin-bottom: 20px;
}
.privacy p{
    font-size: 14px;
}
::placeholder {
    color: #ccc;
    font-size: 14px;
}
.required{
    color: red;
}
div[data-hide="hide"]{
    display: none;
}
@media screen and (max-width: 768px) {
    a.btn,button {
        width:70%;
        margin: 0 auto;
        padding: .5em 0 .4em;
    }
    main{
        width: 100%;
        padding: 0 10px;
    }
    .service h2 {
        font-size: 16px;
    }
    .service p,
    .service label{
        font-size: 14px;
    }
    .post input,
    .tel input{
        width: 200px;
    }
}
@media screen and (max-width: 599px){
    h3{
        margin-top: 10px;
    }
    .box.flex > .flex{
        flex-flow: column;
    }
    .box.flex,
    .textFormFieldBlock.flex {
        flex-flow: column;
        align-items: flex-start;
    }
    .box.flex label,
    .box.flex h3,
    .textFormFieldBlock.flex label{
        width: 100%;
        margin-bottom: 5px;
    }
    .fis .content{
        padding: 0 10px 50px;  
    }
    .email input,
    .address input {
        width: 400px;
    }
    .city {
        margin-left: 20px;
    }
    .city label {
        padding-left: 0;
    }
    .street input {
        width: 100%;
    }
    .prefectures,
    .city,
    .prefectures input,
    .city input{
        width: 100%;
    }
}
.mr10{
    margin-right: 10px;
}
button.submitButton {
    padding: 8px 0 10px 26px;
    letter-spacing: 1.5rem;
    font-weight: normal;
}