/*
    レスポンシブ対応のヘッダーとフッター用のCSS
*/

html,
body {
    font-family: "Meiryo", "メイリオ", "Helvetica", "Arial", "Tahoma", "Verdana", sans-serif;
    height: 100%;
}

.row{
    margin: 0px;
}


.no-gutter {
    padding-left: 0px;
    padding-right: 0px;
}

.navbar {
    background: #fff url(/bpo/images/common/bk_header.gif) repeat-x top;
}

.img-header-tel {
    margin-top: 10px;
}

.navbar-border-bottom {
    border-bottom: darkgray 2px solid;
}

.navbar-center {
    margin : 0 auto;
    display: table;
    table-layout: fixed;
    float: none;
}

.navbar li a {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 11px;
}

.navbar li a:hover {
    background-color: inherit;
}

.navbar li:first-child a {
    padding-left: 0px;
    padding-right: 10px;
    padding-top: 11px;
}

/* navbar ハンバーガー四角枠 */
.navbar-toggle {
    background-color: darkgrey;
}

.navbar-toggle .icon-bar {
    background-color: black;
}

.navbar-collapse {
    border-bottom: darkgray 1px solid;
}

.navbar-collapse .nav {
    background-color: #fff;
}

.main-container { 
    min-height: 100%;
    height: auto;
}

.footer {
    border-top: 3px #D9F1FF solid;
    background: #004da2;/* Old Browsers */
    background: -moz-linear-gradient(top, #004da2 0%, #004592 22%, #003d80 55%, #003166 80%, #002752 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #004da2), color-stop(22%, #004592), color-stop(55%, #003d80), color-stop(80%, #003166), color-stop(100%, #002752));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #004da2 0%, #004592 22%, #003d80 55%, #003166 80%, #002752 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #004da2 0%, #004592 22%, #003d80 55%, #003166 80%, #002752 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #004da2 0%, #004592 22%, #003d80 55%, #003166 80%, #002752 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #004da2 0%, #004592 22%, #003d80 55%, #003166 80%, #002752 100%);/* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004da2', endColorstr='#002752', GradientType=0 );/* IE6-9 */
    
    color: #fff;
    padding-top: 13px;
    font-size: 1.0em;
    box-shadow: 0px 5px #002752;
}    

.footer li {
    margin-top: 10px;
    line-height: 20px;
    text-align: left;
    list-style-type: none;
}

.footer li a {
	color:  #ffffff;
	/*padding: unset;*/
	padding: inherit;
	/*text-decoration: underline;*/
}

.footer li a:hover {
	color: #eae706;
	text-decoration: none;
	/*background-color: unset;*/
	background-color: inherit;
}

.footer-phone {
    text-align:center; 

}
.footer-logo {
    margin: 15px;
    display: inline-block;
}

.footer-logo img {
    height: 70px;
    width: auto;
}

/*  スマホのみ   col-xsサイズ   */
@media screen and (max-width:767px) {
    .container-fluid {
        padding-left: 0px;
        padding-right: 0px;
    }

    .main-container {
        margin: 0 auto -550px;

        padding: 0 10px 550px 10px;
    }

    .navbar-brand {
        padding-top: 10px;
    }

    .navbar-brand img {
        height: 40px;
    }
    .footer .container .row img {
        margin-bottom: 10px;
    }

    /*.footer {
        height: 580px;
    }*/

}

/*  タブレット col-smサイズ    */
@media screen and (min-width: 768px) {

    body {
        /*padding-top: 110px;*/
        padding-top: 11%;
    }

    .main-container {
        margin: 0 auto -346px;

        padding: 0 0 346px;
    }

    .navbar li a {
        width: 110px;
        padding-bottom: 0px;
    }

    .navbar li:first-child a img {
        margin-top: 10px;
        max-width: 120px;
        height : 40px;
    }

    .navbar li a img {
        max-width: 120px;
        height: 55.2px;
    }

    .navbar li:first-child a img {
        margin-left: -10px;
    }

    .navbar li:last-child a {
        width: 124px;
    }    

    .navbar li:last-child a img {
        max-width: 124px;
    }

    .footer {
        height: 444px;
    }

    .footer li {
        line-height: 30px;
        /*font-size: 1.2em;*/
    }   
    
    footer-logo img {
        height: 70px;
        width: auto;
    }
}

/* ＰＣ以上  col-md col-lg  */
@media screen and (min-width: 992px) {
    body {
        padding-top: 125px;
    }

    .main-container {
        margin: 0 auto -187px;

        padding: 0 0 187px;
    }

    .navbar li a {
        max-width: initial;
        max-width: auto;        
        width: auto;
        padding-bottom: 0px;
    }

    .navbar li:first-child a img {
        margin-top: 10px;
        max-width: 240px;

        width: 100%;
        height: 100%;
    }

    .navbar li a img {
        max-width: 154px;

        width: 100%;
        height: 100%;
    }

    .navbar li:first-child a img {
        margin-left: -10px;
    }

    .navbar li:last-child a {
        width: 154px;
    }    

    .navbar li:last-child a img {
        max-width: 154px;
    }
    
    .navbar li a {
        padding-bottom: 0px;
    }    

    .footer {
        height: 220px;
        font-size: 0.9em;
    }    
    
    .footer li {
        line-height: 12px;
    }

}

@media screen and (max-height: 900px) {
/*
    .html  {
        position: relative;
    }
    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    */
}

@media screen and (min-width: 1024px) and (max-width:1112px) {
    .opacity-img {
        width: 100%;
    }

}

.opacity-img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.opacity-img:hover {
	opacity: .5;
}

#copyright {
	text-align: center;
	/*margin : 15px;*/
}

/*IEでスクロールバーでコンテンツが隠れるのを回避する*/
@-ms-viewport
{
    width: auto;
    initial-scale: 1;
}
@viewport
{
    width: device-width;
    initial-scale: 1;
}