/*------------------------------------*\
	COMMONS CLASSES
\*------------------------------------*/

body {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, 游ゴシック, Yu Gothic, yugothic, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
    font-size: 1.4rem;
    line-height: 1.7;
}

h1, h2, h3, h4, h6
{
    font-family: 'Roboto Slab', var(--s-font-f7a6a6c7);
}

h1, h2, h6
{
    font-size: 1.5em;
    color: #fff;
}

.kaso_title
{
  font-family: var(--s-font-18a508ab);
    font-size: 3em;  
    margin-bottom: 50px;
}

.kaso_subtitle
{
color: #fff; 
    
}

h4
{
     margin-bottom: 1.1em;
    font-size: 2em;
    font-weight: bold;
}

h3
{
    font-size: 1.5em;
    font-weight: bold;
}






.oubo_box{
background-color: #1e5a9f;   
padding: 5em;    
}

.oubo
{
    width: 100%;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
}

@media (min-width: 768px) {
  .flexbox{
    display: flex;
  } 
}



.SP_Flex_container{
    width: 100%;
    margin: 15px;
}


@media (min-width: 768px) {
.SP_Flex_container a{
    background-color: #FFC800;
    color: #000;
    display: block;
    padding: 30px;
    margin: 10px auto;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
}
    }


@media (max-width: 768px) {
  .SP_Flex_container a{
    background-color: #FFC800;
    color: #000;
    display: block;
    padding: 30px;
    margin: 10px auto;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;


  } 
}





.eng{
    font-family: var(--s-font-18a508ab);
    font-size: 1.8em;
    
}

.h2_title{
    background-color: #1e5a9f;
    padding: 15px;
    margin-bottom: 2em;
    font-weight: bold;
}

.h6_title
{
    font-size: 0.8em;
}


.features,
.blog,
.gallery,
.clients,
.prefooter .container-fluid
{
    padding-top: 3.3em;
    padding-bottom: 4.2em;
}

span.typcn::before, i.typcn::before
{
    font-size: 2em;
}

span.x2:before, i.x2:before
{
    font-size: 3.4em;
}

span.x3:before, i.x3:before
{
    font-size: 4.4em;
}

span.x4:before, i.x4:before
{
    font-size: 6em;
}

.block:hover{
opacity: 0.7;}

.acsess
{
    margin-bottom: 30px;
}

.acsess_title
{
    font-weight: bold;
    font-size: 1.2em;
}

.top_box
{
    padding: 4em;
}

.bold{
    font-weight: bold;
}

/*------------------------------------*\
	HEADER
\*------------------------------------*/

@media screen and (min-width: 768px){
header .container-fluid
{
    background-image: url('images/main_img01.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    padding-top: 36px;

} }

@media screen and (max-width: 768px) {
.container-fluid {
    background-image: url('images/sp_main.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 70vh;
    padding-top: 36px;
　　}
}



#home_under .container-fluid
{
    background-color:#000;
    background-repeat: no-repeat;
    background-size: cover;
    height: 20vh;
    padding-top: 36px;
}




.h1_title
{
    background-color: #1e5a9f;
    padding-top: 20px;
}

h1
{
    color: #fff;
    font-size: 2em;
}

.hamburger
{
    font-size: 2.3em;
    color: #fff;
}

.hamburger:hover
{
  color: #FFF;
  cursor: pointer;
}


.logo
{
    background: none;
    border: 0px;
}



.jumbotron
{
    background: none;
    text-align: center;
    margin-top: 5em;
}

.jumbotron h1,
.jumbotron h2,
.jumbotron h3,
.jumbotron h4,
.jumbotron h5,
.jumbotron h6,
.jumbotron small
{
    color: #FFFFFF;
    text-shadow: 1px 1px 2px black;
}

.jumbotron p
{
    color: #FFFFFF;
    margin-bottom: 5%;
    text-shadow: 1px 1px 2px black;
}


.pushy{
    background:#000;
}


/*------------------------------------*\
	SECTIONS
\*------------------------------------*/

.number .container-fluid
{
    background-image: url('images/company.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.opaline
{
    padding-top: 3em;
    padding-bottom: 3em;
    background-color: rgba(30, 90, 159, 0.700);
}

.opaline h1,
.opaline h2,
.opaline h3,
.opaline h4,
.opaline h5,
.opaline h6,
.opaline p
{
    color: #FFFFFF;
}



.opaline .boxes
{
    margin-top: 30px;
    padding-top: 20px;
    padding-bottom: 5px;
    border: 1px solid #FFF;
}

.boxes .odometer.odometer-theme-default
{
  font-family: 'Roboto Slab', serif;
}

.story .container-fluid
{
    background-image: url('images/about.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.recruit .container-fluid
{
    background-image: url('images/recruit02.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.gallery
{
    background-color: #dddddd;
}

.prefooter .container-fluid
{
    background: linear-gradient(
      rgba(33, 37, 43, 0.6),
      rgba(33, 37, 43, 0.6)
    ),

    url(https://unsplash.it/4000/3000?image=528);
}

.prefooter h1,
.prefooter h2,
.prefooter h3,
.prefooter h4,
.prefooter h5,
.prefooter h6,
.prefooter p
{
    color: #FFFFFF;
}

.rinen p
{
    text-align: center
}

.rinen_title
{
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 20px;
}


.recruit_title
{
    font-weight: bold;
    font-size: 1.2em;
    
}


.company_info{
padding: 2em 2em 4em 2em;
    
}

.bg_gray
{
    background-color: #eee;
}

.top_txt{
    margin: 3em 0em;
    
}

.top_txt p
{
    font-size: 1.2em;
}

/*------------------------------------*\
	FOOTER
\*------------------------------------*/

footer
{
    background-color: #1e5a9f;
    padding-top: 2em;
    padding-bottom: 1.2em;
    margin-top: 3em;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer p
{
    color: #FFFFFF;
}

.social
{
    padding-top: 50px;
}

.fotter_text
{
    text-align: center;
}

.fotter_text a
{
color: #fff;
    text-decoration: none;
}