@charset "UTF-8";

/*==========================================================
  responsive.css
  Responsive stylesheet
  Breakpoints:
    768px or less  : Mobile
    769px - 899px  : Tablet
    900px or more  : Desktop (existing layout)
==========================================================*/


/* ----------------------------------------------------------
   Global: prevent image/iframe overflow
---------------------------------------------------------- */
img {
    max-width: 100%;
    height: auto !important;
}

iframe {
    max-width: 100%;
}

table {
    max-width: 100%;
    word-break: break-all;
}


/* ----------------------------------------------------------
   Tablet (769px - 899px)
   Switch fixed-width containers to fluid width
   Keep horizontal navigation
---------------------------------------------------------- */
@media screen and (max-width: 899px) {

    body {
        min-width: 0;
    }

    #hpb-header,
    #hpb-inner,
    #hpb-footer {
        width: 100%;
        box-sizing: border-box;
    }

    #hpb-headerLogo {
        width: 55%;
    }

    #hpb-headerExtra1 {
        width: 40%;
        margin-right: 2%;
        padding-top: 10px;
    }

    #hpb-headerExtra1 p.tel {
        font-size: 1.3em;
    }

    /* Navigation: absolute to relative, horizontal scroll */
    .hpb-layoutset-01 #hpb-nav,
    .hpb-layoutset-02 #hpb-nav {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        box-sizing: border-box;
    }

    #hpb-nav ul {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    #hpb-nav li {
        flex-shrink: 0;
        height: auto;
        line-height: 36px;
    }

    .hpb-layoutset-02 #hpb-wrapper {
        width: 100%;
        float: none;
        padding-top: 10px;
        box-sizing: border-box;
    }

    #hpb-main {
        width: 100%;
        float: none;
        box-sizing: border-box;
    }

    #hpb-aside {
        width: 220px;
        float: right;
    }

    .hpb-layoutset-02 h2 {
        width: 100%;
        box-sizing: border-box;
        background-size: cover;
    }

    #hpb-footer {
        width: 100%;
        height: auto;
        padding-top: 20px;
        box-sizing: border-box;
    }

    #hpb-footerMain {
        width: auto;
        float: none;
        padding-top: 10px;
    }

    #hpb-footerMain p {
        text-align: center;
    }

    #banner li a {
        width: 100%;
        height: auto;
        min-height: 50px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #hpb-main dt {
        width: auto !important;
        float: none;
    }

    #hpb-main dd {
        padding-left: 25px;
    }

}


/* ----------------------------------------------------------
   Mobile (768px or less)
   Single column layout, vertical navigation
---------------------------------------------------------- */
@media screen and (max-width: 768px) {

    /* Header: stack logo and phone number vertically */
    #hpb-header {
        height: auto;
        padding: 0 10px 10px;
        box-sizing: border-box;
    }

    #hpb-headerLogo {
        width: 100%;
        float: none;
    }

    #hpb-headerLogo a {
        height: 55px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
    }

    #hpb-headerExtra1 {
        width: 100%;
        float: none;
        margin-right: 0;
        padding-top: 5px;
        text-align: left;
    }

    #hpb-headerExtra1 p.tel {
        font-size: 1.5em;
        text-align: left;
    }

    #hpb-headerExtra1 p.address {
        text-align: left;
    }

    .hpb-layoutset-01 {
        background-image: none;
        background-color: white;
    }

    #hpb-headerMain{
        background-color: #27739d;
    }

    /* Navigation: vertical list */
    .hpb-layoutset-01 #hpb-nav,
    .hpb-layoutset-02 #hpb-nav {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        overflow: visible;
        border-left: none;
        box-sizing: border-box;
    }

    #hpb-nav ul {
        display: block;
        white-space: normal;
    }

    #hpb-nav li {
        float: none;
        display: block;
        width: 100%;
        height: auto;
        line-height: 1;
        border-right: none;
        border-bottom: 1px solid #CCCCCC;
        box-sizing: border-box;
    }

    #hpb-nav li a {
        display: block;
        height: auto;
        padding: 12px 15px;
        background-image: none !important;
        background-color: #f5f5f5;
        overflow: visible;
    }

    #hpb-nav li a:hover {
        background-color: #2CABE2;
        background-image: none !important;
    }

    #hpb-nav li span.ja {
        display: inline;
    }

    /* Single column layout */
    #hpb-inner {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
    }

    .hpb-layoutset-02 #hpb-wrapper {
        width: 100%;
        float: none;
        padding-top: 10px;
        box-sizing: border-box;
    }

    #hpb-main {
        width: 100%;
        float: none;
        box-sizing: border-box;
    }

    #hpb-aside {
        width: 100%;
        float: none;
        clear: both;
        box-sizing: border-box;
        padding-bottom: 20px;
    }

    /* Banner: 2-column grid in sidebar */
    #banner ul {
        display: flex;
        flex-wrap: wrap;
    }

    #banner li {
        width: 50%;
        box-sizing: border-box;
        padding-bottom: 5px;
    }

    #banner li a {
        width: 100%;
        height: 55px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Top page main visual height */
    .hpb-layoutset-01 #hpb-title {
        height: auto;
    }

    .hpb-layoutset-01 #hpb-title h2 {
        height: 150px;
        background-size: cover;
        background-position: center center;
    }

    /* Sub-page h2 heading */
    .hpb-layoutset-02 h2 {
        width: 100%;
        height: auto;
        min-height: 50px;
        line-height: 50px;
        background-size: cover;
        box-sizing: border-box;
    }

    /* Forms */
    textarea {
        width: 100%;
        box-sizing: border-box;
    }

    input.l,
    input.m {
        width: 100%;
        box-sizing: border-box;
    }

    /* dt/dd: stack vertically */
    #hpb-main dt {
        float: none;
        width: auto !important;
        padding-left: 10px;
    }

    #hpb-main dd {
        padding-left: 15px;
    }

    /* Footer */
    #hpb-footer {
        width: 100%;
        height: auto;
        padding: 15px 10px;
        box-sizing: border-box;
    }

    #hpb-footerMain {
        width: 100%;
        float: none;
        padding-top: 10px;
    }

    #hpb-footerMain p {
        text-align: center;
        font-size: 0.75em;
    }

    #hpb-footerExtra1 {
        padding-top: 5px;
    }

    #hpb-footerExtra1 li {
        display: block;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    /* Clear floats for inline images */
    .left,
    .right {
        float: none;
        display: block;
        margin: 5px auto;
    }

    #hpb-main img.left,
    #hpb-main img.right {
        float: none;
        display: block;
        margin: 10px auto;
    }

    /* companyinfo section */
    #companyinfo {
        padding: 0 10px 10px;
    }

    /* Page top link */
    #pagetop {
        text-align: center;
    }

    /* hpb-parts fixed-width class overrides */
    [class^="hpb-parts-cnt-01-"],
    [class^="hpb-parts-pbox-01-"],
    [class^="hpb-parts-mpbox-01-"] {
        width: 100% !important;
        float: none;
        clear: both;
    }

}