@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

body {
    font-family: 'Noto Sans Japanese', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
}
ol, ul {list-style: none;}
a {text-decoration: none;}
img {max-width: 100%;vertical-align: bottom;}

/** ヘッダー **/
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    width: 100%;
    height: 96px;
    padding: 10px 0;
    z-index: 1000;
}
.header_content {
    background-color: #fff;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
}
.header_nav_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60%;
}
.header_nav {
    width: calc(100% - 85px);
    padding-right: 20px;
    box-sizing: border-box;
}
.header_nav_en > a {
    color: #000;
}
.header_nav_en {
    display: flex;
    justify-content: flex-end;
    padding: 10px 10px 10px 0;
    box-sizing: border-box;
}
.header_nav_en_img {
    padding-right: 10px;
}
.header_nav_list {
    display: flex;
    justify-content: flex-end;
}
.header_menuList {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    box-sizing: border-box;
}
.header_menuList_item {
    padding: 0 10px;
    box-sizing: border-box;
}
.header_menuList_item > a {
    color: #000;
}
.header_nav_contact {
    max-width: 85px;
}

/** フッター **/
.footer {
    position: relative;
}
.footer_nav_wrapper {
    background-color: #666666;
}
.footer_content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 0;
    box-sizing: border-box;
}
.footer_nav_content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 0;
    box-sizing: border-box;
}
.footer_menuList {
    display: flex;
    width: 75%;
    flex-wrap: wrap;
}
.footer_menuList_item {
    margin: 10px 0;
    padding: 0 20px;
    box-sizing: border-box;
    border-right: 1px solid #fff;
}
.footer_menuList_item:last-child {
    border-right: none;
}
.footer_menuList_item > a {
    color: #fff;
    font-size: 12px;
}
.footer_copy {
    color: #B3B3B3;
    font-size: 10px;
    padding: 0 20px;
    padding: 20px 20px 0;
}

/** スクロール **/
#page_top {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 20px;
    bottom: 175px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #FFF;
    cursor: pointer;
    z-index: 500;
    -moz-box-shadow: -1px 1px 30px -10px rgba(0, 0, 0, 1);
    -webkit-box-shadow: -1px 1px 30px -10px rgba(0, 0, 0, 1);
    -ms-box-shadow: -1px 1px 30px -10px rgba(0, 0, 0, 1);
    box-shadow: -1px 1px 30px -10px rgba(0, 0, 0, 1);
}
.triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 15px 10px;
    border-color: transparent transparent #15355A transparent;
}



/* ===================================================================================
 for PC max-width: 740px
 =================================================================================== */
@media screen and (min-width: 741px) {
    .forSP {display:none!important;}
    #sp_menu {display: none!important;}
    #sp_nav {display: none!important;}
}

/* ===================================================================================
 for SP max-width: 740px
 =================================================================================== */
@media screen and (max-width: 740px) {
    .forPC {display:none!important;}
    body {
        max-width: 100%;
    }


    .header {
        margin: 0px auto;
        height: initial;
    }
    .header_content {
        padding-right: 60px;
    }
    .header_content_sp {
        padding: 10px 60px 10px 10px;
    }
    .header_logo_sp {

    }

    /** nav **/
    #sp_nav {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        background-color: rgba(21,53,90,1.0);
    }
    .header_spNav_list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .header_spNav_list > li {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 60px;
    }
    .header_spNav_list > li:last-child {
        height: 80px;
        padding-top: 20px;
    }
    .header_spNav_list > li > a {
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 0.1em;
        font-weight: 300;
    }
    .spNav_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: 100%;
        background-color: rgba(33,63,98,1.0);
    }
    .spNav_btn > a {
        color: #fff;
        width: 100%;
        display: flex;
        justify-content: center;
        letter-spacing: 0.1em;
        font-weight: 300;
    }
    .spNav_btn:first-child > a {
        border-right: 1px solid #fff;
    }

    /** sp_menu **/
    .menu-trigger, .menu-trigger span {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box;
    }
    .menu-trigger {
        position: absolute;
        width: 30px;
        height: 26px;
        float: right;
        top: calc(74px / 2 - 13px);
        right: 10px;
        z-index: 2000;
    }
    .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #15355A;
        border-radius: 4px;
    }
    .menu-trigger span:nth-of-type(1) {
        top: 0;
    }
    .menu-trigger span:nth-of-type(2) {
        top: 11px;
    }
    .menu-trigger span:nth-of-type(3) {
        bottom: 0;
    }
    .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(20px) rotate(-45deg);
        transform: translateY(20px) rotate(-45deg);
        top: -8px;
        background-color: #fff;
    }
    .menu-trigger.active span:nth-of-type(2) {
        width: 50%;
        opacity: 0;
        -webkit-animation: active-menu-bar02 .8s forwards;
        animation: active-menu-bar02 .8s forwards;
        background-color: #fff;
    }
    .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-20px) rotate(45deg);
        transform: translateY(-20px) rotate(45deg);
        bottom: -10px;
        background-color: #fff;
    }
    @-webkit-keyframes active-menu-bar02 {
        100% {height: 0;}
    }
    @keyframes active-menu-bar02 {
        100% {height: 0;}
    }




    .footer_content {
        text-align: center;
        padding: 20px 50px;
    }
    .footer_nav_content {
        padding-top: 0;
        padding-bottom: 20px;
    }
    .footer_menuList {
        width: 100%;
        flex-direction: column;
    }
    .footer_menuList_item {
        margin: 0;
        border-right: none;
        border-bottom: 1px solid #8B8B8B;
        position: relative;
        padding: 30px 0;
    }
    .footer_menuList_item > a {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% - 15%);
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 14px;
        padding-left: 15%;
    }
    .footer_menuList_item > a:after {
        content: url(../images/footer_arrow.png);
        position: absolute;
        top: 30%;
        right: 15%;
    }

    #page_top {
        right: 10px;
        bottom: 10px;
        width: 40px;
        height: 40px;

    }
    .triangle {
        border-width: 0 8px 12px 8px;
    }
}


/* ===================================================================================
 印刷用
 =================================================================================== */
@media print {
    .forSP {display:none!important;}
    #sp_menu {display: none!important;}
    #sp_nav {display: none!important;}
    .header {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        width: 100%;
        height: 96px;
        padding: 10px 0;
        z-index: 1000;
    }
}