header{
    max-width: 1440px;    
    height: 104px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(0,0,0, 0.1);
    padding: 16px 20px;
    margin-bottom: 72px;
}
#header_left{
    float:left;
    width: 380px;
    height: 72px;
}
#header_left img{
    float:left;
    margin-right: 6px;
}
#header_right{
    float:right;
    width: 260px;
    height: 72px;
    padding-top: 5px;
}
p#header_title{
    font-family: 'Lora';
    font-weight: 650;
    font-size: 23px;
    letter-spacing: 0.5px; 
    padding-top: 12px;     
    line-height: 1.1;  
}
p#header_slogan{
    font-family: 'General Sans Variable';
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.5px;
}
p#header_phone{
    float: right;
    background: var(--color-default);
    width: 252px;
    height: 56px;
    padding: 16px;
    color: #fff;
    font-family: 'IBM Plex Mono';
    font-size: 26px;    
    font-weight: 700;
    text-align: center;
    line-height: 1;
}
p#header_phone a:hover {
    text-decoration: underline;
}
p#header_phone img{
    float: left;
    margin-right: 5px;
    padding-top: 3px;
    width: 20px;
    height: 20px;
}

article{
    max-width: 1440px;    
    margin: 0 auto;
}

#box_top{
    max-width: 957px;
    height: 485px;
    margin: 0 auto 72px auto;
}
#box_top h1{
    color: var(--color-black);
    font-family: 'DM Serif Text';
    font-size: 52px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1.056px;
    margin-bottom: 32px;
}
#box_top h2{
    color: var(--color-black);
    font-family: 'Abel';
    font-size: 27px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 32px;
    letter-spacing: -0.2px;
}
#box_top_left{
    float: left;
    width: 65%;
    padding: 0 50px 0 10px;
}
#box_top_right{
    float: left;
    width: 35%;    
    padding-right: 5px;
}
#box_form{
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    padding: 22px 14px;
}
#box_form p.title {
    width: 100%;
    background: var(--color-default);
    color: #fff;
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 7px;
    border-radius: 3px;
    margin-bottom: 16px;
}
#box_form input {
    width: 100%;
    background: #ECECEC;
    font-size: 14px;
    padding: 6px 12px;
    margin: 4px 0;
    border-radius: 2px;
    font-family: 'Montserrat';
}
#box_form input::placeholder{
    color: #141414;
    opacity: 0.6;
}
#box_form button {
    width: 100%;
    background: var(--color-default);
    color: #fff;
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 8px;
    border-radius: 18px;
    margin: 16px 0;
}
#box_form p.accept {    
    font-size: 12px;
    text-align: center;
    padding: 5px;
}
#box_form p.success{
    font-size: 17px;
    text-align: center;
    padding: 35px;
    background: #1cad1c;
    color: #fff;
    font-weight: bold;
}

#box_form p.error{
    font-size: 17px;
    text-align: center;
    padding: 35px;
    background: #811919;
    color: #fff;
    font-weight: bold;
}

#contact1{
    width: 670px;
    height: 96px;
}
#contact1 p{
    float:left;
    width: 312px;
    height: 28px;
    font-family: 'General Sans Variable';
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    padding-top: 20px;
}
p#contact1_phone{
    background: var(--color-default);
    width: 250px;
    height: 54px;
    padding: 13px 14px;
    color: #fff;
    font-family: 'IBM Plex Mono';
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}
p#contact1_phone a::after{
    content: ''
}
p#contact1_phone img{
    float: left;
    margin-right: 5px;
    padding-top: 3px;
    width: 26px;
    height: 26px;
}
#consultation{
    width: 100%;
    border-top: 1px solid var(--color-default);
    padding-top: 30px;
}
#consultation p{
    color: #000;
    font-family: 'Abel';
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 1px;
}

#box_list{
    max-width: 1440px;
    height: 210px;
    padding: 64px 32px;
    background: rgba(65, 71, 192, 0.04);
    text-align: center;
    margin: auto;
}
#box_list h3{
    color: var(--color-black);
    text-align: center;
    font-family: 'IBM Plex Serif';
    font-size: 28px;
    font-weight: 600;
    line-height: 1.4;
}
#box_list ul{
    display: inline-block;
    margin: 24px 0;
}
#box_list ul li {
    display: list-item;    
    list-style-type: disc;
    float: left;
    color: var(--color-pale-blue);    
    font-family: 'IBM Plex Mono';
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.7px;
    text-decoration-line: underline;
    margin-left: 40px;
}

#box_fight{
    max-width: 1440px;
    padding: 72px 100px;
    height: 556px;
    margin: auto;
}
#box_fight_photo{
    float: left;
    width: 47%;
    margin-right: 3%;
}
#box_fight_photo img{
    width: 100%;
}
#box_fight_text{
    float: left;
    width: 45%;
    margin-left: 3%;
}
#box_fight_text h4{
    color: var(--color-black);
    font-family: 'IBM Plex Serif';
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    padding: 20px 60px 20px 0;
}
#box_fight_text p{
    color: var(--color-black);
    font-family: 'IBM Plex Serif';
    font-size: 23px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.1px;
}

#contact2{
    max-width: 1200px;
    height: 156px;
    padding: 0 48px;
    background: rgba(65, 71, 192, 0.04);
    text-align: center;
    margin: auto;
    margin-bottom: 72px;
    padding-top: 50px;
}
#contact2 p{
    display: inline-block;
    color: var(--color-black);
    font-family: 'IBM Plex Serif';
    font-size: 36px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -1px;
    margin-right: 20px;
}
#contact2 p#contact2_phone{
    color: var(--color-default);
    font-family: 'IBM Plex Mono';
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    text-decoration-line: underline;
    margin-left: 20px;
    margin-right: 0px;
}


#box_how{
    max-width: 813px;
    height: 230px;    
    text-align: center;
    margin: auto;
    margin-bottom: 22px;
}
#box_how h4{
    color: var(--color-black);
    text-align: center;
    font-family: 'IBM Plex Serif';
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    padding-bottom: 24px;
}
#box_how p{
    color: var(--color-black);
    text-align: center;
    font-family: 'IBM Plex Serif';
    font-size: 28px;
    font-weight: 500;
    line-height: 1.75;
    padding: 0 170px;
}
#box_how .steps{
    font-family: 'IBM Plex Mono';
    font-size: 32px;
    font-weight: 700;
}

#box_steps{
    max-width: 1200px;
    height: 400px;        
    margin: auto;
    margin-bottom: 72px;
}
#box_steps div{
    float: left;
    height: 390px;
    width: 29%;
    margin-left: 2%;
    margin-right: 2%;
    padding: 32px 40px;
}
#box_step1{
    background: rgba(54, 167, 131, 0.04);
}
#box_step2{
    background: rgba(18, 137, 175, 0.04);
}
#box_step3{
    background: rgba(65, 71, 192, 0.04);
}
#box_steps img{
    margin: 0 auto 32px auto;
}
#box_steps p{    
    color: #000;
    font-family: 'IBM Plex Serif';
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
}

#contact3{
    max-width: 1200px;
    height: 106px;
    margin: auto;
    text-align: center;
    margin-bottom: 72px;
}
#contact3 p{
    color: var(--color-black);
    font-family: 'IBM Plex Serif';
    font-size: 36px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -1px;
    margin-bottom: 24px;
}
#contact3 p#contact3_phone a{
    color: var(--color-default);
    font-family: 'IBM Plex Mono';
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    text-decoration-line: underline;
}

#fineprint{
    max-width: 1200px;
    margin: 25px auto 25px;
    min-height: 100px;    
    background: #eee;
    border-radius: 10px;
    width: calc(100% - 50px);
}
#fineprint p{
    color: var(--color-black);
    font-family: 'IBM Plex Serif';
    line-height: 1.3;
    letter-spacing: -0.5px;
    opacity: 0.7;
    font-size: 11px;
    padding: 10px;
    text-align: justify;
    font-style: italic;
}

footer{
    max-width: 1440px;    
    height: 117px;
    margin: 0 auto;
    padding: 32px 120px;
}
#footer_left{
    float:left;
    width: 38%;
}
#footer_left img{
    float:left;
    margin-right: 6px;
}
p#footer_title{
    font-family: 'Lora';
    font-weight: 650;
    font-size: 18px;
    letter-spacing: 0.5px; 
    padding-top: 8px;     
    line-height: 1;  
}
p#footer_slogan{
    font-family: 'General Sans Variable';
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
}
#footer_center{
    float:left;
    width: 30%;
}
#footer_center p{
    text-align: center;
    color: var(--color-black);
    font-family: 'IBM Plex Mono';
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.3px;
    padding-top: 2px;
}
#footer_center p a{
    color: var(--color-blue);
    text-decoration: none;
}
#footer_center p a:hover{    
    text-decoration: underline;
}
#footer_right{
    float:right;
    width: 32%;
}
#footer_right p{
    text-align: right;
    padding-top: 0px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;
    font-family: 'IBM Plex Mono';
}
#footer_right p a{    
    color: var(--color-black);
}
#footer_right p a:hover{    
    text-decoration: underline;
}
#footer_mobile{
    display: none;
}

@media (max-width: 1300px) {
    #box_fight{
        height: 460px;
    }
    #box_fight_photo{
        width: 42%;
    }
    #box_fight_text{
        width: 50%;
    }     
    #box_fight_text h4{
        font-size: 36px;
        padding: 0px 20px 10px 0;
    }
    #box_fight_text p{
        font-size: 22px;
        line-height: 1.4;
        letter-spacing: -0.5px;
    }
}

@media (max-width: 1200px) {
    #box_fight{
        height: 400px;
    }
    #box_fight_photo{
        width: 40%;
    }
    #box_fight_text{
        width: 52%;
    }     
    #box_fight_text h4{
        font-size: 32px;
    }
    #box_fight_text p{
        font-size: 20px;
    }
    #contact2 p{
        font-size: 32px;
        margin-right: 10px;
    }
    #contact2 p#contact2_phone{
        margin-left: 10px;
    }
    #box_steps p{
        font-size: 23px;
        line-height: 1.3;
    }
}


@media (max-width: 1024px) {
    #box_form input{
        font-size: 13px;
    }
    #box_fight{
        height: 370px;
    }
    #box_top h1{
        font-size: 42px;
        margin-bottom: 22px;
    }
    #box_top h2{
        font-size: 27px;
    }
    #box_list ul li{
        font-size: 16px;
        margin-left: 25px;
        letter-spacing: -0.8px
    }   
    #box_fight_text h4{
        font-size: 28px;
        padding: 0px 20px 10px 0;
    }
    #box_fight_text p{
        font-size: 16px;
        line-height: 1.4;
        letter-spacing: -0.7px;
    }
    #contact2 p{
        font-size: 29px;
    }
    #box_steps p{
        font-size: 20px;
    }
}


@media (max-width: 889px) {

    #header_left{
        width: 370px;
    }
    p#header_title{
        font-size: 20px;
    }
    #box_top_left{
        width: 60%;
    }
    #box_top_right{
        width: 40%;
    }
    #header_right{
        width: 232px;
    }
    p#header_phone{
        font-size: 24px;
        width: 232px;
    }
    #box_top h1{
        font-size: 32px;
        margin-bottom: 12px;
    }
    #box_top h2{
        font-size: 21px;
    }
    #box_form p.accept {
        font-size: 12px;
        text-align: center;
        padding: 0;
    }
    #box_fight{
        height: 366px;
    }
    #box_fight_text h4{
        font-size: 22px;
        padding: 0px 60px 10px 0;
    }
    #box_fight_text p{
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: -0.5px;
    }
    #contact2{
        padding-top: 20px;
    }
    #contact2 p{
        font-size: 30px;
        margin-right: 0;
        padding-bottom: 20px;
    }
    #contact2 p#contact2_phone{
        margin-left: 0;
        padding-bottom: 0;
    }
    #box_how h4{
        font-size: 36px;
    }
    #box_how p{
        font-size: 26px;
    }
    #box_how .steps{
        font-size: 28px;
    }
    #box_steps div{
        padding: 32px;
    }
    #box_steps p{
        font-size: 18px;
    }
    #contact3 p{
        font-size: 32px;
    }
    p#footer_title{
        font-size: 16px;
    }
    #footer_left{
        width: 40%;
    }
    #footer_center p{
        font-size: 12px;
        padding: 2px;
    }
    #footer_right{
        width: 30%;
    }
    #footer_right p a{
        font-size: 11px;
    }
}

@media (max-width: 430px) {
    header{
        max-width: 430px;
        margin-bottom: 36px;
        padding: 16px 8px;
    }
    #header_left{
        width: 289px;
    }
    #header_left img {
        margin-right: 2px;
    }
    p#header_title{
        font-size: 17px;
        letter-spacing: 0;        
        padding-top: 16px;
    }
    p#header_slogan{
        font-size: 11px;
    }
    #header_right{
        width: 52px;
    }
    p#header_phone{
        width: 52px;
    }
    p#header_phone img{
        width: 24px;
        height: 24px;
    }
    p#header_phone a span{
        display: none;
    }
    #consultation p{
        text-align: center;
    }
    #box_form p.title{
        font-size: 18px;
    }
    #box_form button{
        font-size: 18px;
    }
    #box_form input{
        font-size: 15px;
    }
    #box_form p.accept {
        font-size: 12px;
        text-align: center;
    }
    article{
        max-width: 430px;
    }
    #box_top{
        height: 915px;
        padding: 0 16px;
        max-width: 430px;
    }
    #box_top h1{
        font-family: 'IBM Plex Serif';
        font-size: 31px;
        font-weight: 600;
        letter-spacing: -1px;
        margin-bottom: 20px;
    }
    #box_top h2{
        line-height: 1.2;
        margin-bottom: 12px;
    }
    #box_top_left{
        width: 100%;
        padding: 0 20px 0 10px;
        margin-bottom: 30px;
    }
    #box_top_right{
        width: 100%;
        margin-bottom: 30px;
    }
    #contact1{     
        width: 100%;   
        padding: 12px;
    }
    #contact1 p{
        width: 100%;
    }
    p#contact1_phone{
        font-size: 21px;
    }
    p#contact1_phone img{
        margin-right: 0;
    }
    p#contact1_phone a::before{
        content: 'CALL ';
    }    
    #box_list{
        padding: 24px 32px 36px 32px;
        height: 287px;
    }
    #box_list h3{
        font-size: 20px;
        padding: 0 30px;
    }
    #box_list ul li {
        font-size: 16px;
        letter-spacing: 0;
        padding: 10px 3px;
    }
    #box_fight{
        padding: 32px;
        height: 642px;
    }
    #box_fight_photo{
        width: 100%;
        margin-top: 12px;
        margin-bottom: 24px;
    }
    #box_fight_text{
        width: 100%;
        margin: 0;
    }
    #box_fight_text h4{
        font-size: 28px;
        padding: 0px 0px 24px 0;
    }
    #box_fight_text p{
        font-size: 16px;
        line-height: 1.75;
    }
    #contact2{
        padding: 24px 32px;
        height: 145px;   
        margin-bottom: 48px;
    }
    #contact2 p {
        font-size: 21px;
        text-align: left;
        width: 40%;
        letter-spacing: -1px;
    }
    #contact2 p#contact2_phone{
        font-size: 20px;
        width: 54%;
        position: relative;
        top: -50px;
        text-align: center;
    }
    #box_how h4{
        font-size: 28px;
        padding: 0 32px 32px 32px;
    }
    #box_how{
        max-width: 430px;
        height: 185px;
        margin-bottom: 32px;
    }
    #box_how p{
        font-size: 16px;
        padding: 0 32px;
    }
    #box_how .steps {
        font-size: 18px;
    }

    #box_steps div{
        width: calc(100% - 64px);
        height: 134px;
        margin: 0 32px;
        padding: 24px;
        margin-bottom: 16px;
    }
    #box_steps img{
        margin: 0 15px 0 0;
        float: left;
        width: 30%;
    }
    #box_steps p{
        line-height: 1.06;
        font-weight: 600;
    }
    #box_steps span.taller{
        position: relative;
        top: 10px;
    }

    #contact3{
        padding: 0 32px;
        margin-bottom: 36px;
    }
    #contact3 p {
        font-size: 21px;
        padding: 0 20px;
    }
    #contact3 p#contact3_phone a{
        font-size: 20px;
    }
    
    footer{
        padding: 32px 16px;
        max-width: 430px;
        height: 284px;
    }
    #footer_left,#footer_center,#footer_right{
        margin: 2px 60px 6px 60px;
        width: calc(100% - 120px);
    }
    #footer_right p{
        text-align: center;    
    }
    #footer_mobile{
        display: block;
        padding: 16px 8px;
        width: 100%;
        border-radius: 16px;
        background: rgba(46, 46, 46, 0.90);
        clear: both;
        position: relative;
        top: 32px;
        height: 84px;
    }
    #footer_mobile_logo{
        width: 72%;
        float: left;
    }
    #footer_mobile_logo img{
        mix-blend-mode: hard-light;
        opacity: 0.2;
        float: left;
        margin-right: 3px;
    }
    #footer_mobile_logo p{
        color: #fff;
        font-family: 'Lora';
        font-size: 15px;
        font-weight: 650;    
        letter-spacing: -0.5px;
        padding-top: 12px;
    }
    #footer_mobile_icons{
        width: 28%;        
        float: right;
        text-align: center;
    }
    #footer_mobile_icons img{
        display: inline-block;
        width: 40px;
        padding-top: 6px;
    }

    #fineprint{
        width: calc(100% - 25px);
    }

    
}

@media (max-width: 375px) {
    #footer_left,#footer_center,#footer_right{        
        margin: 2px 28px 6px 28px;
        width: calc(100% - 56px);
    }
}


@media (max-width: 320px) {
    header{
        padding: 16px 4px;
    }
    #header_left{
        width: 250px;
    }
    p#contact1_phone a::before {
        content: '';
    }
    #consultation p{
        font-size: 24px;
    }
    #box_form input {
        font-size: 12px;
    }
    #box_list{
        padding: 24px 24px 36px 23px
    }
    #box_list ul{
        margin: 22px 0;
    }
    #box_list ul li {
        font-size: 14px;
        letter-spacing: -0.5px;
        padding: 8px 2px;
    }
    #box_fight{
        padding: 24px;
    }
    #box_fight_text p {
        font-size: 15px;
    }
    #contact2{
        padding: 24px;
    }
    #contact2 p{
        width: 38%;
        font-size: 20px;
    }
    #contact2 p#contact2_phone{
        font-size: 19px;
        width: 59%;
        text-align: right;
    }
    #box_how h4{
        font-size: 26px;
    }
    #box_steps div{
        width: calc(100% - 48px);
        margin: 0 24px;
        padding: 20px;
    }
    #box_steps p{
        font-size: 17px;
    }
    #footer_mobile{
        padding: 12px;
    }
    #footer_mobile_icons img{
        width: 45%;
        padding-top: 8px;
    }
}