@charset "utf-8";

/*===============================================
  デフォルト
===============================================*/

#global-nav {
    display: none;
}

#header .navbtn {
    display: none;
}

.pcv {}

.spv {
    display: none;
}

br.sp {
    display: none;
}

br.pc {
    display: inline;
}


/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
    display: none;
}

input[type="submit"]::focus,
input[type="button"]::focus {
    outline-offset: -2px;
}


/*===============================================
  画面の横幅が1280px以下に適用
===============================================*/
@media screen and (max-width: 1280px) {



    .mincho {
        letter-spacing: 0;
    }

    #header .header .into {
        width: 94%;
        margin: 0 auto;

    }

    #topnav li {
        margin-right: 20px;
    }

    /* panz */

    #panz ul {
        width: 94%;
        font-size: 1.2em;
        padding: 10px 0;
    }

    /* container */

    #container {
        padding: 30px 0;
    }

    #container #inwrap {
        width: 94%;
    }

    /* left */

    #container #inwrap #left {
        width: 32%;
    }


    /* right */

    #container #inwrap #right {
        width: 65%;
    }



    #footer .ftnav li {
        margin-right: 1%;
    }

    #footer .ftnav li img {
        max-width: 100%;
    }

    #footer .ftnav li:nth-child(1) {
        width: 20%;
    }


}

/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px) {

    img {
        max-width: 100%;
    }


    #wrap {
        padding-bottom: 135px;
    }

    /* header */

    /*
    #header {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
    }
    */

    .toptext {
        background: #1672ac;
        text-align: center;
        color: #fff;
        font-size: 1.2em;
        line-height: 1.4;
        padding: 10px 3%;
    }

    #header .header {
        background: #e8f6ff;
        padding: 20px 0;
        position: relative;
    }

    #header .header .into {
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
        zoom: 1;
        position: relative;
    }

    #header .header .into .logo {
        float: none;
        padding-top: 0;
    }

    #header .header .into .logo img {
        max-height: 20px;
    }

    #header .header .into .hdnav {
        display: none;
    }


    #topnav {
        display: none;
    }

    #header .navbtn {
        display: block;
        position: absolute;
        bottom: 40px;
        right: 3%;
        width: 30px;
        cursor: pointer;
    }

    #header .navbtn span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: #1954a5;
        left: 0;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
    }

    #header .navbtn span:nth-child(1) {
        top: 0;
    }

    #header .navbtn span:nth-child(2) {
        top: 10px;
    }

    #header .navbtn span:nth-child(3) {
        top: 20px;
    }

    /* global-nav */

    #global-nav.open {
        display: block;
    }

    #global-nav ul {
        line-height: 1.0;
    }

    #global-nav ul li {
        border-bottom: 1px solid #FFF;
        margin: 0;
    }

    #global-nav ul li.sub {
        border-bottom: none;
    }

    #global-nav ul li:last-child {
        border-bottom: none;
    }

    #global-nav ul li a,
    #global-nav ul li span,
    #global-nav ul li p {
        display: block;
        color: #fff;
        text-align: left;
        padding: 15px 5%;
        background: rgba(22, 114, 172, 1.0);
        text-decoration: none;
        font-size: 1.4em;
        position: relative;
    }

    #global-nav ul li a:after,
    #global-nav ul li span:after,
    #global-nav ul li p:after {
        content: '';
        width: 7px;
        height: 7px;
        border: 2px solid;
        border-color: #fff #fff transparent transparent;
        transform: rotate(45deg) translateY(-50%);
        position: absolute;
        top: 50%;
        right: 5%;
    }

    #global-nav ul li.sub a,
    #global-nav ul li.sub p {
        padding: 15px 0;
        background: rgba(1, 64, 153, 0.8);
        text-decoration: none;
        font-size: 1.4em;
        border-bottom: 1px dotted #FFF;
    }

    #global-nav ul li.tel a {
        display: block;
        color: #fff;
        text-align: center;
        padding: 15px 0;
        background: rgba(244, 152, 29, 0.9);
        text-decoration: none;
        font-size: 2.4em;
    }

    #global-nav ul li span {
        border-bottom: 1px dotted #FFF;
    }

    #global-nav ul li.sub.end a {
        border-bottom: 1px solid #fff;
    }

    #global-nav ul li a:hover {
        text-decoration: none;
    }

    /* 切り替えアニメーション */
    #header .navbtn.move span:nth-child(1) {
        top: 12px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }

    #header .navbtn.move span:nth-child(2) {
        width: 0;
        left: 50%;
    }

    #header .navbtn.move span:nth-child(3) {
        top: 12px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }

    #glnav {
        display: none;
    }

    /* maintitle */

    #maintitle .title {
        font-size: 2.8em;
        padding: 35px 0;
    }

    #maintitle .title02 {
        font-size: 2.8em;
        padding: 30px 0;
    }


    #container #inwrap #left .bnr li img {
        width: 70%
    }


    /* footer */

    #footer {}

    #footer .ftnav {
        background: rgba(255, 255, 255, 0.9);
        width: auto;
        padding: 10px 3%;
        text-align: center;
        overflow: hidden;
        zoom: 1;
        width: 94%;
        position: fixed;
        left: 0;
        bottom: 0;
    }

    #footer .ftnav li {
        width: 48%;
        margin: 0;
        display: block;
        float: left;
    }

    #footer .ftnav li:nth-child(1) {
        width: 48%;
    }


    #footer .ftnav li:nth-child(3),
    #footer .ftnav li:nth-child(4),
    #footer .ftnav li:nth-child(5) {
        display: none;
    }


    #footer .ftnav li:nth-child(2){
        float: right;
    }

    #footer .ftnav li:nth-child(6) {
        float: left;
        width: 100%;
    }

    #footer .ftnav li:nth-child(3),
    #footer .ftnav li:nth-child(6) {
        margin-top: 10px;
    }


}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px) {}


/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px) {

    .pcv {
        display: none;
    }

    .spv {
        display: block;
    }

    br.sp {
        display: block;
    }

    br.pc {
        display: none;
    }

    .mb20 {
        margin-bottom: 10px !important;
    }

    .mb30 {
        margin-bottom: 15px !important;
    }

    .mb40 {
        margin-bottom: 20px !important;
    }

    .mb50 {
        margin-bottom: 25px !important;
    }

    .mb100 {
        margin-bottom: 50px !important;
    }



    /* left */

    #container #inwrap #left {
        width: auto;
        float: none;
    }

    #container #inwrap #left .bluebox {
        margin: 0 0 30px;
    }

    #container #inwrap #left .bluebox .title {
        text-align: center;
        font-size: 1.8em;
        font-weight: 500;
        line-height: 1.0;
        margin: 0 0 12px;
        color: #fff;
    }

    /* right */

    #container #inwrap #right {
        width: auto;
        float: none;
        margin: 0 0 50px;
    }






}


/* globalnav 高さ設定 */
@media screen and (max-width: 1024px) {
    #global-nav {
        height: 500px;
        overflow-y: auto;
    }
}

@media screen and (max-width: 414px) {
    #global-nav {
        height: 400px;
        overflow-y: auto;
    }
}

@media screen and (max-width: 320px) {
    #global-nav {
        height: 350px;
        overflow-y: auto;
    }
}