@charset "UTF-8";
@import @import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500");


@media screen and (min-width: 769px) {
html,body{
     height:100%;
}

.wrapper{
     width: 100%;
     position: relative;
     min-height: 100%;
}
.inner{
     padding-bottom:10em; /*フッターの高さと同じにする*/
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/*ヘッダー*/

.test-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
}

.test-logo a{
  height: 40px;
  color: #fff;
  text-decoration: none;
}

.test-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.test-nav ul li {
  margin-right: 20px;
}

.test-nav ul li a {
  color: #fff;
  text-decoration: none;
}

/*フッター*/

.footer{
    width: 100%;
    background-color: #333;
	color: #fff;
	font-size: 0.8em;
	line-height: 2em;
    margin: 0 auto;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
     height:10em;
     position:absolute;
     bottom:0;
}

/*キービジュアル*/
.title{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    padding:0;
    margin:0;
    font-size:30px;
    color: white;
}

.key_visual1{
	border: 2px solid #000;
    background: url(/assets/img/index_top.jpg) no-repeat 0 0 / cover;
    width: 100%;
    padding-top: 40%;
	position: relative;
    background-position: 0px -12em;
}
.key_visual2{
	border: 2px solid #000;
    background: url(/assets/img/navigation_top.jpg) no-repeat 0 0 / cover;
    width: 100%;
    padding-top: 30%;
    background-position: 0px -12em;
}
.key_visual3{
	border: 2px solid #000;
    background: url(/assets/img/about_top.jpg) no-repeat 0 0 / cover;
    width: 100%;
    padding-top: 30%;
    background-position: 0px -12em;
}

/*HOME*/
.home_top_text{
	text-align: center;
	margin: auto 0;
	font-size: 0.8em;
}

.home_text_block{
	text-align: center;
	padding-bottom: 5em;
}

.home_text1{
    display: flex;
    flex-direction: row;
    width: 60%;
    margin: 0 auto;
	padding: 3em;
	list-style: none; 
	font-size: 0.8em;

    > * {
        flex: 1;
    }
}

.home_text2{
    display: flex;
    flex-direction: row;
    width: 60%;
    margin: 0 auto;
	padding: 3em;
	list-style: none; 
	font-size: 0.8em;

    > * {
        flex: 1;
    }	
}

.home_text1 div{
	width: 25em;
    margin: 0 auto;
	text-align: left;
}

.home_text2 div{
	width: 25em;
    margin: 0 auto;
	text-align: left;
}

hr.styled-hr {
    background-color: #eee;
    background-color: rgba(0, 0, 0, 0.13);
    border: 0pt none;
    color: #eee;
    color: rgba(0, 0, 0, 0.13);
    height: 1px;
    margin: 0 auto;
    text-align: center;
	margin-top: 1em;
	width: 60%;
}
	
hr.styled-hr_about {
    background-color: #eee;
    background-color: rgba(0, 0, 0, 0.13);
    border: 0pt none;
    color: #eee;
    color: rgba(0, 0, 0, 0.13);
    height: 1px;
    margin: 0 auto;
    text-align: center;
	margin-top: 1em;
	margin-bottom: 5em;
	width: 60%;
}

/*業務案内*/
.navigation_text {
    display: flex;
    flex-direction: row;
    width: 80%;
    margin: 0 auto;
	padding: 1em;
	list-style: none; 

    > * {
        flex: 1;
    }
}

.navigation_text li{
	padding: 2em;
	font-size: 0.8em;
}

.styled-hr_about {
    background-color: #eee;
    background-color: rgba(0, 0, 0, 0.13);
    border: 0pt none;
    color: #eee;
    color: rgba(0, 0, 0, 0.13);
    height: 1px;
    margin: 0 auto;
    text-align: center;
	margin-top: 3em;
	width: 60%;
}

/*会社概要*/

.about_text_block{
	margin: 0 auto;	
	padding: 3em;
	font-size: 0.8em;
    text-align: center;
}

.about_top_text{
/*	text-align: left;*/
}
.about_text{
	display: inline-block;
    text-align: left;
}
	.about_table{
        margin: 0 auto;	
	}
	
	.about_table tr{
		text-align: left;
	}
	
	.about_table td{
		padding-left: 1em;
	}
}

@media screen and (max-width: 768px) {
/*レスポンシブ　スマホ版*/
html,body{
     height:100%;
}

.wrapper{
     width: 100%;
     position: relative;
     min-height: 100%;
}
.inner{
     padding-bottom:10em; /*フッターの高さと同じにする*/
}
	
.br-pc {
  display: none;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

	.test-logo{
		font-size: 0.5em;
	}

/*ヘッダー*/

.test-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
}
	
.test-logo a{
  height: 40px;
  color: #fff;
  text-decoration: none;
}

.test-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.test-nav ul li {
/*  margin-right: 20px;*/
}

.test-nav ul li a {
  color: #fff;
  text-decoration: none;
  font-size:0.5em; 
  margin-right: 1.0em;
}

/*フッター*/

.footer{
    width: 100%;
    background-color: #333;
	color: #fff;
	font-size: 0.8em;
	line-height: 2em;
    margin: 0 auto;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
     height:10em;
     position:absolute;
     bottom:0;
}

/*キービジュアル*/
.title{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    padding:0;
    margin:0;
    font-size:0.8em;
    color: white;
}

.key_visual1{
	border: 2px solid #000;
    background: url(/assets/img/index_top.jpg) no-repeat 0 0 / cover;
    width: 100%;
    padding-top: 40%;
	position: relative;
    background-position: 0px -3em;
}
.key_visual2{
	border: 2px solid #000;
    background: url(/assets/img/navigation_top.jpg) no-repeat 0 0 / cover;
    width: 100%;
    padding-top: 40%;
    background-position: 0px -3em;
}
.key_visual3{
	border: 2px solid #000;
    background: url(/assets/img/about_top.jpg) no-repeat 0 0 / cover;
    width: 100%;
    padding-top: 40%;
    background-position: 0px -3em;
}

/*HOME*/
.home_top_text h1{
	text-align: center;
	}
	
	.home_top_text{
		text-align: left;
        margin: auto 0;
        font-size: 0.8em;
        padding: 10%;
    }

.home_text_block{
	text-align: center;
	padding-bottom: 5em;
}

.home_text1{
/*    display: flex;*/
    flex-direction: row;
    margin: 0 auto;
	padding: 0em 3em 0em 3em;
	list-style: none; 
	font-size: 0.8em;

    > * {
        flex: 1;
    }
}

.home_text2{
/*    display: flex;*/
    flex-direction: row;
    margin: 0 auto;
	padding: 0em 3em 0em 3em;
	list-style: none; 
	font-size: 0.8em;

    > * {
        flex: 1;
    }	
}

.home_text1 div{
    margin: 0 auto;
	text-align: left;
}

.home_text2 div{
    margin: 0 auto;
	text-align: left;
}
	
	.home_text1 li{
			padding: 1em 0em 1em 0em;
	}
	
	.home_text2 li{
			padding: 1em 0em 1em 0em;
	}

hr.styled-hr {
    background-color: #eee;
    background-color: rgba(0, 0, 0, 0.13);
    border: 0pt none;
    color: #eee;
    color: rgba(0, 0, 0, 0.13);
    height: 1px;
    margin: 0 auto;
    text-align: center;
	margin-top: 1em;
	width: 60%;
}
	
hr.styled-hr_about {
    background-color: #eee;
    background-color: rgba(0, 0, 0, 0.13);
    border: 0pt none;
    color: #eee;
    color: rgba(0, 0, 0, 0.13);
    height: 1px;
    margin: 0 auto;
    text-align: center;
	margin-top: 1em;
	margin-bottom: 5em;
	width: 60%;
}

/*業務案内*/
.navigation_text {
/*    display: flex;*/
    flex-direction: row;
    width: 80%;
    margin: 0 auto;
	padding: 1em;
	list-style: none; 

    > * {
        flex: 1;
    }
}

.navigation_text li{
	padding: 2em;
	font-size: 0.8em;
}

.styled-hr_about {
    background-color: #eee;
    background-color: rgba(0, 0, 0, 0.13);
    border: 0pt none;
    color: #eee;
    color: rgba(0, 0, 0, 0.13);
    height: 1px;
    margin: 0 auto;
    text-align: center;
	margin-top: 3em;
	width: 60%;
}

/*会社概要*/

.about_text_block{
	margin: 0 auto;	
	padding: 3em;
	font-size: 0.8em;
    text-align: center;
}

.about_top_text{
/*	text-align: left;*/
}
.about_text{
	display: inline-block;
    text-align: left;
}
		.about_table{
        margin: 0 auto;	
	}
	
	.about_table tr{
		text-align: left;
	}
	
	.about_table td{
		padding-left: 1em;
	}
	
}