@charset "utf-8";
/* 
サイト固有の記述
*/

/* 全体（色系）*/
body {
    &.home {
        .header-nav li a {
            border-left: dotted 1px #fff;
        }

        .fixed .header-nav li a {
            border-left: dotted 1px #333;
        }
    }

    .sp_on2 {
        display: none;
    }
}

/* パソコン以上*/
@media screen and (min-width: 1281px) {
    body {
        #main_visual .mv_flex .mv_txt {
            padding: 5% 0 5% 5%;
        }

        .c_box01 {
            .layout_a .imgbox,
            .layout_b .imgbox {
                width: 50%;
            }
        }

        &.for-individual-customers {
            .sec01 .c_box01 .layout_a .imgbox figure {
                margin-top: 50px;
            }
        }

        &.company {
            .sec01 {
                .layout_a .imgbox {
                    width: 48%;
                }
            }

            .sec02 {
                .layout_a .imgbox {
                    width: 47%;
                    margin-left: 30px;
                }
            }
        }

        .contact_infoarea {
            padding: 0 5%;
        }
    }
}

/* モニター以上*/
@media screen and (min-width: 1860px) {
    body {
    }
}

/* タブレット*/
@media screen and (max-width: 1024px) {
    body {
        #main_visual {
            height: 100vh;
        }

        main section .page_title {
            width: 100%;
        }
    }
}

/* 携帯*/
@media screen and (max-width: 767px) {
    body {
        #main_visual {
            height: calc(85vh - 60px);
        }

        .tp_sec02 figure img {
            width: auto;
        }

        .sp_on2 {
            display: block;
        }

        &.visitors {
            .sec01 .f40 {
                font-size: 24px;
            }

            .accordion-area .faq_title {
                padding: 15px 10% 15px 40px;
            }
        }

        &.for-corporations,
        &.for-individual-customers {
            .accordion-area .faq_title {
                padding: 15px 10% 15px 40px;
            }
        }

        &.home {

            header .h1 a img {
                display: none;
            }

            header .h1 a img + img {
                display: block;
            }
        }
    }
}