@charset "utf-8";

/* template */
#header,
#wrapper,
#footer,
.container-fluid,
.container {
    clear: both;
    position: relative;
    z-index: 1;
}

.container-fluid {
    width: 100%;
}

.container-b {
    max-width: 1440px;
    margin: 0 auto;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

/* button red */
.btn::before {
    top: 23px;
    right: 35px;
}

.btn a,
.btn button {
    font-size: 17px;
    font-weight: 700;
    display: block;
    width: 100%;
    border-radius: 10px;
    line-height: 105%;
    text-align: center;
    padding: 16px 10px;
}

.btn--blue a,
.btn--blue a:active,
.btn--blue a:focus,
.btn--blue button,
.btn--blue button:active,
.btn--blue button:focus {
    color: #2374A6
}

.btn::before,
.btn--blue a,
.btn--blue a:hover,
.btn--blue a:focus,
.btn--blue a:focus:hover,
.btn--blue button,
.btn--blue button:hover,
.btn--blue button:focus,
.btn--blue button:focus:hover {
    border-color: #005183
}

.btn--blue a:before,
.btn--blue button:before {
    background: #005183;
}

.btn--blue a:after,
.btn--blue button:after {
    background: #2071A3
}

.btn--blue a:hover,
.btn--blue button:hover {
    background: #005183;
}

[class*="btn-w"] {
    width: 80%;
}

.btn-w360 {
    max-width: 360px;
}

/* body background */
body {
    background: url('../images/ind_bg.jpg') repeat-y center 400px;
    background-size: 100% auto;
}

body.frontpage {
    background-position: center 700px;
}

/* header */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    background-color: #fff;
}

#header .container-b {
    display: flex;
    padding: 20px 0;
    max-width: 1440px;
    margin: 0 auto;
}

.header_logo {
    max-width: 269px;
    margin: 0;
}

.header_logo a {
    display: block;
}

.navbox {
    display: flex;
    margin-left: 11.7%;
    padding-top: 6px;
    justify-content: center;
}

.navbox li a {
    display: block;
    color: #1a1a1a;
    padding: 11px 11px 3px;
    margin: 0 16px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: 0.3s all ease !important;
}

.navbox li a:hover,
.navbox li.active a {
    border-bottom-color: #24778b;
}

.header_contact {
    position: absolute;
    right: 0;
}

.header_contact a {
    color: #fff;
    display: flex;
    align-items: center;
    padding: 14px 22px 14px 29px;
}

.header_contact-tel {
    background-color: #24778b;
}

.header_contact-mail {
    background-color: #d4145a;
    border-top-left-radius: 23px;
    border-bottom-left-radius: 24px;
}

.header_contact-mail img {
    width: 25px;
    margin-right: 22px;
}

#wrapper {
    padding-top: 100px;
}

.wrapper_row {
    background: url('../images/bg.jpg') bottom center repeat-y;
}

#wrapper .container-b,
#footer .container-b {
    background: rgba(255, 255, 255, 0.9);
}

#wrapper .container-b {
    padding-top: 90px;
}

.frontpage #wrapper .container-b {
    padding-top: 0;
}

/* footer */

#footer .container {
    border-top: 8px solid #005183;
}

#footer .navbox {
    margin: 0 auto 3px;
    justify-content: center;
}

.footer_info {
    display: flex;
    justify-content: space-between;
}

.footer_contact {
    font-size: 15px;
    padding-top: 5px;
}

.footer_copyright {
    text-align: center;
    font-size: 14px;
    color: #333333;
    font-family: Arial;
    letter-spacing: 0.7px;
    padding: 2px;
}

.main_visual {
    background-position: top center;
    background-repeat: no-repeat;
}

.main_visual .container {
    min-height: 300px;
}

.page_title {
    background: url('../images/bg02.png') center no-repeat;
    background-size: contain;
    display: inline-block;
    position: absolute;
    padding: 30px 92px 26px 60px;
    top: 52%;
    transform: translateY(-50%);
}

.page_title .jp {
    font-size: 36px;
    color: #4d4d4d;
    font-weight: bold;
    letter-spacing: 2px;
    margin-right: 20px;
}

.page_title .en {
    font-size: 30px;
    color: #4d8bb1;
    font-family: Arial;
    letter-spacing: 1.5px;
}

._small .navbox,
._small .header_logo,
._small .header_logo img,
._small .navbox li a,
._small .header_contact a,
._small .header_contact-mail img {
    -webkit-transition: 1s all ease;
    -moz-transition: 1s all ease;
    -o-transition: 1s all ease;
    transition: 1s all ease;
}

._small .header_logo,
._small .header_logo img {
    max-width: 200px;
}

._small .navbox {
    padding-top: 0;
}

._small .navbox li a {
    padding-top: 8px;
}

._small .header_contact a {
    padding: 8px 14px 10px 22px;
}

._small .header_contact-mail img {
    margin-right: 10px;
    padding-top: 2px;
}

.main_title {
    color: #1a1a1a;
    font-size: 28px;
    background: url('../images/icon03.png') top left no-repeat;
    font-weight: bold;
    padding: 6px 0 15px 95px;
    letter-spacing: 1.5px;
}

@media only screen and (max-width:1400px) {

    /* template */
    #header .container-b {
        max-width: 1280px;
        position: relative;
    }

    .navbox {
        margin-left: 7%;
    }
}

@media only screen and (max-width:800px) {

    /* template */
    body,
    .container-b {
        background: transparent;
    }

    #wrapper .container-b {
        padding-top: 30px;
    }

    .container {
        width: 95%;
        margin: 0 2.5%
    }

    /* button */
    .btn {
        width: 74%;
        max-width: 290px
    }

    .btn:before {
        top: 20px;
        right: 20px;
        padding: 3px
    }

    .btn a,
    .btn button {
        padding: 13px 10px;
        font-size: 95%
    }

    #header .container-b {
        width: 100%;
        padding: 8px 0;
        justify-content: space-between;
    }

    .navbox {
        display: none;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: 80px;
        padding-top: 80px;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        z-index: 1;
        background-color: #2f7e91;
    }

    .navbox li {
        width: 95%;
        margin: 0 auto;
    }

    .navbox li:last-child {
        margin-bottom: 120px;
    }

    .navbox li a {
        display: block;
        border-bottom: 1px solid #94bdc7 !important;
        color: #fff;
        font-size: 100%;
        padding: 20px 10px 22px;
    }

    .header_logo {
        width: 43%;
        max-width: 180px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 2.5%;
    }

    .menu {
        width: 45px;
        min-height: 41px;
        position: relative;
        cursor: pointer;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin-left: 5px;
    }

    .menu p {
        font-size: 70%;
        font-family: Arial;
        line-height: 1.3;
        font-weight: bold;
        color: #333333;
    }

    .menu span {
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .menu span,
    .menu::after,
    .menu::before {
        height: 2px;
        width: 66%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background-color: #333333;
    }

    .menu span {
        top: 32%;
        margin-top: -1px;
        text-indent: -9999px;
    }

    .menu span.hidden {
        display: none
    }

    .menu::after,
    .menu::before {
        content: "";
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .menu::before {
        top: 8%;
    }

    .menu::after {
        bottom: 44%;
    }

    .menu.is-act {
        color: #fff
    }

    .menu.is-act:before {
        -webkit-transform: rotate(135deg) translateX(50%);
        transform: rotate(135deg) translateX(70%);
        top: -3px;
        background: #fff;
    }

    .menu.is-act:after {
        -webkit-transform: rotate(-135deg) translateX(50%);
        transform: rotate(-135deg) translateX(70%);
        background: #fff;
        bottom: 30%;
    }

    .menu.is-act span {
        display: none;
    }

    .menu.is-act p {
        color: #fff
    }

    .header_contact {
        display: flex;
        position: relative;
        align-items: center;
    }

    .header_contact li {
        border-radius: 9px;
        margin: 0 4px;
    }

    .header_contact li a {
        padding: 3px 0 0;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        font-size: 75%;
        line-height: 1.5;
        min-width: 44px;
        text-decoration: none;
    }

    .header_contact li a img {
        width: 20px;
        margin: 0;
    }

    .header_contact li .smp {
        display: block;
        width: 100%;
    }

    .header_right {
        display: flex;
        margin-right: 2.5%;
        z-index: 2;
    }

    #footer {
        border-top: 5px solid #005183;
    }

    #footer .container {
        border-top: none;
    }

    .footer_info {
        justify-content: center;
    }

    .footer_contact {
        text-align: center;
        font-size: 90%;
        margin-bottom: 2px;
        padding-top: 8px;
    }

    .footer_copyright {
        font-size: 75%;
        letter-spacing: 0;
        padding-bottom: 7px;
    }

    #wrapper {
        padding-top: 60px;
    }

    .main_visual {
        background: none !important;
        position: relative;
    }

    .main_visual .container {
        min-height: auto;
        height: 100%;
        position: absolute;
    }

    .main_visual .smp {
        display: block;
    }

    .page_title {
        padding: 16px 40px 13px 26px;
        top: 48%;
        vertical-align: middle;
    }

    .page_title .jp {
        font-size: 130%;
        margin-right: 10px;
        letter-spacing: 0;
    }

    .page_title .en {
        font-size: 100%;
        letter-spacing: 0;
    }

    .main_title {
        font-size: 120%;
        background-size: 36px;
        padding: 0 0 0 44px;
    }

}