/* bebas-neue-regular - latin */
@font-face {
  font-family: 'bebas';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/bebas-neue-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/bebas-neue-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/bebas-neue-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Bebas-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}
html{
	font-size: 62.5%;
	/*16pxx62.5%=10px*/
  	margin: 0;
	scroll-behavior: smooth;
    font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

}
p, span, li{
	font-size: 1.4rem;
	text-align: justify;
	letter-spacing: 0.1em;
	line-height: 1.5;
}
a{
  text-decoration: none;
  color:#fff;
}
.pc-view{
	display: block;
}
.sp-view{
	display: none;
}
.contents-wrapper-01{
  max-width: 960px;
  margin: 0px auto;
}
.contents-wrapper-02{
  margin: 0px auto;
  background-color: #000;
}

/*-----------------------------------------------
*	index-main visual
*-----------------------------------------------*/
.main-visual{
    position: relative;
	background-image: url("../img/pc-mv.png");
  	width: 100%;
  	min-height: 100vh;
	background-size: cover;
}
.logo{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 500px;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

/*-----------------------------------------------
*	index-contents
*-----------------------------------------------*/
.service-box{
	padding: 80px 0px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ttl-wrapper-01{
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
}
.ttl-wrapper-02{
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
}
.contents-ttl-01{
	height: 18px;
}
.service-wrapper{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 750px;
}
.service-img-box{
	display: flex;
	flex-direction: column;
	width: 40%;
    margin: 0px 20px 40px;
    align-items: center;
}
.service-img{
	width: 140px;
}
.service-ttl{
	text-align: center;
	margin-top: 20px;
}
.contents-box{
	padding: 80px 0px 88px;
	background-color: #000;
	max-width: 960px;
	margin: 0px auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.contents-ttl-02{
	height: 18px;
}
.about-wrapper{
	display: flex;
	justify-content: space-between
}
.about-box{
	display: flex;
	flex-direction: column;
}
.about-list{
	display: flex;
	margin: 6px 24px;
}
.about-ttl{
	margin-right: 36px;
	color: #ffffff;
}
.about-ttl span{
  font-weight: bold;
}
.justify {
  width: 124px;
  display: flex;
  justify-content: space-between;

}
.about-txt{
	color: #ffffff;
    font-weight: 300;
}
/*-----------------------------------------------
*	footer
*-----------------------------------------------*/
.footer{
	background-color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
    padding-bottom: 16px;
}
.copyright{
	font-size: 1.4rem;
	color: #ffffff;
    text-align: center;
}


@media screen and (max-width: 960px) {
	.pc-view{
		display: none;
	}
	.sp-view{
		display: block;
	}
	.contents-wrapper{
	  	max-width: 80%;
	  	margin: 0px auto;
	}
/*-----------------------------------------------
*	index-contents
*-----------------------------------------------*/
	.about-wrapper{
		display: flex;
		flex-direction: column;
	}
	.service-wrapper{
		max-width: 600px;
	}

}


@media screen and (max-width: 640px) {
/*-----------------------------------------------
*	index-contents
*-----------------------------------------------*/
	.service-wrapper{
		max-width: 400px;
	}
	.about-list{
		flex-direction: column;
		margin: 10px 24px;
	}
	.about-ttl{
		margin-bottom: 6px;
	}
}

@media screen and (max-width: 550px) {

/*-----------------------------------------------
*	index-main visual
*-----------------------------------------------*/
	.main-visual{
		background-image: url("../img/sp-mv.png");
		min-height: 300px;
	}
	.logo{
		width: 80%;
	}
}

@media screen and (max-width: 400px) {
/*-----------------------------------------------
*	index-contents
*-----------------------------------------------*/
	.service-box {
		padding: 80px 0px 40px;
	}
	.service-img-box {
		display: flex;
		flex-direction: column;
		width: 36%;
		margin: 0px 20px 60px;
		align-items: center;
	}
	.service-img {
		width: 100px;
	}
	.contents-box{
		padding: 80px 0px 88px;
	}
	.ttl-wrapper-01 {
		margin-bottom: 75px;
	}	
	.ttl-wrapper-02 {
		margin-bottom: 50px;
	}
	.contents-ttl-01{
		height: 18px;
	}	
	.contents-ttl-02{
		height: 18px;
	}
	.copyright {
		width: 80%;
	}
}