html {
    font-size:10px;
    scroll-behavior: smooth;
}

body {
    background-color:#f2f2f2;
    color:#02192e;
    position:relative;
    z-index: 1;
}

nav {
    font-family: 'Noto Serif JP', serif;
}

nav.pc {
    display:none;
}

.sp-top {
    position:relative;
    display:flex;
    z-index:3;
    justify-content: space-between;
    padding:10px;
    background: linear-gradient(#f2f2f2, rgb(236, 236, 236));
}
.navlink {
    height:70px;
    line-height:70px;
    border-bottom:solid 1px #b8b8b8;
}
.navlink:last-child {
    border:0;
}

.navlink a {
    display:block;
    color:#FFF;
    padding-left:15px;
}

.burger svg {
	position: absolute;
	top: 6px;
	right: 5px;
    fill:#023e73;
}

.menu_open {
	opacity: 1;
    transition: 1s;
}
.menu_open.active {
	opacity: 0;
}

.menu_close {
	opacity: 0;
    transition: 1s;
}
.menu_close.active {
	opacity: 1;
}

.sptopnav {
    position:absolute;
    top: -1000px;
    left:0;
    width:100%;
    z-index:2;
    transition:ease-in-out .5s;
    background-color: #0d4167;
}


.sptopnav.active {
    top: 53px;
}

.company-logo {
    width:160px;
}

.company-logo img {
    width:100%;
}

.topnav a {
    text-decoration: none;
    display:block;
}

* {
    font-size:1.8rem;
}

a {
    color:#0d4167;
    cursor: pointer;
}

.intro {
    background: no-repeat center center url(../img/title_bg.png);
    background-size: cover;
    padding:10% 0;
}

.title_bg {
    background: linear-gradient(rgba(255, 255, 255, 0.4),rgba(255,255,255,0.9));
    padding:20% 0;
}

.subttl {
    width:80%;
    margin-bottom:5px; 
}
.ttl {
    width:80%;
}

.form-control {
    font-size:1.8rem;
}
input {
    font-size:1.8rem;
}

input:placeholder-shown {
    font-size:1.8rem;
}

.btn {
    font-size:2rem;
}

.btn:hover {
    cursor:pointer;
}

.mission_img {
    width:95%;
}

.btnforform {
    width:90%;
    margin:0 auto 15px;
}


.tel {
    font-size:3rem;
}

.h2 {
    font-size:2.8rem;
    font-weight:bold;
    color:#023e73;
    border-bottom: solid 3px #b8b8b8;
    position: relative;
}
  
.h2:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #023e73;
    bottom: -3px;
    width: 20%;
}

h3 {
    font-size:2.2rem;
    color:#023e73;
    font-weight:bold;
}

h4 {
    font-size:2rem;
    color:#023e73;
    font-weight:bold;
}

.alert-info {
    background-color:#f2f9fc !important;
    border-color: #dcf0fa !important;
    color:#0d4167 !important;
}

.alert-info hr {
    border-color: #dcf0fa !important;
}

footer {
    background-color: #0d4167;
    color:#FFF;
}

footer a{
    color:#FFF;
}

.footerlinks {
    display:none;
}

.copy {
    text-align:center;
    padding-bottom:30px;
}



@media (min-width: 1200px){
    html {
        font-size:10px;
    }

    nav.sp {
        display:none;
        position:-999px;
    }

    nav.pc {
        display:block;
    }
    nav{
        height:80px;
        background-color: #dcf0fa;
        border-bottom: solid 3px #0d4167;
    }
    .company-logo{
        margin-top: 25px;
        margin-right:150px;
        margin-left:100px;
        width:200px;

    }
    .company-logo img{
        width:100%;
    }

    .narrow-wrapper {
        width:60%;
        margin:0 auto;
    }
    .navlink {
        height:100%;
        line-height:80px;
        width:130px;
        text-align:center;
        transition:0;
        border:0;       
    }
    .navlink a {
        color:#0d4167;
        height:100%;
        padding-left:0;
    }
    .navlink a:hover {
        background-color:#0d4167;
        color:#FFF;
        transition:ease-in 0.5s;
    }
    .visit a{ 
        background-color:#0d4167;
        color:#FFF;
    }
    .intro {
        height: 480px;
        padding: 60px 0;
    }

    .title_bg {
        background-color:rgba(255, 255, 255, 0.6); 
        padding: 100px 0;
    }

    .subttl {
        width: 500px;
        margin-bottom: 15px; 
    }
    .ttl {
        width: 500px;
    }

    .mission_img {
        width: 60%;
    }

    .btnforform {
        width: 40%;
        margin:0 auto;
    }

    .pc-flex {
        display: flex;
    }

    .office_img {
        margin-right:20px;
    }

    .footerlinks {
        display: block;
    }
    .footercinfo{
        width: 50%;
    }


}