html{
	scroll-behavior: smooth;
}
body{
	font-family:  "Oswald",
	              "Helvetica Neue",
						    Arial,
						    "Hiragino Kaku Gothic ProN",
						    "Hiragino Sans",
						    Meiryo,
						    sans-serif;
	color: #171717;
	position: relative;
}
p{
	font-size: 14px;
}
.btn__scroll a{
	display: block;
	height: 42px;
	font-size: 14px;
	font-weight: bold;
}
.btn__scroll a::after{
	content: '';
	width: 10px;
	height: 10px;
	display: block;
	border-right: 2px solid;
	border-bottom: 2px solid;
	border-color: #171717;
	position: absolute;
	left: 50%;
	bottom: 4px;
}
.btn__scroll.down a::after{
	transform: translateX(-50%) rotate(45deg);
}
.btn__scroll.up a::after{
	transform: translateX(-50%) rotate(-135deg);
}

/*-------- header --------*/
header{
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1;
}
#nav{
	width: 100%;
	padding: 24px 40px;
	background: rgb(255,255,255, 0.7);
	display: flex;
	justify-content: space-between;
	align-items: center;
	transform: translateY(-100px);
	transition: all 0.4s 0s ease;
}
#nav.is-show{
	transform: translateY(0);
}
#nav ul{
	font-size: 14px;
	font-weight: bold;
	display: flex;
}
#nav ul li{
	margin-right: 40px;
	position: relative;
}
#nav ul li:last-child{
	margin-right: 0;
}
#nav ul a:hover{
	opacity: 1;
}
#nav ul a::before,
#nav ul a::after{
	content: '';
	width: 100%;
	display: block;
	border-bottom: 2px solid #171717;
	position: absolute;
	left: 0;
	bottom: -4px;
	transform: scaleX(0);
	transform-origin: left;
	transition: all 0.4s 0s ease;
}
#nav ul a::before{
	width: 65%;
	bottom: -8px;
	transition: all 0.6s 0s ease;
}
#nav ul a:hover::before,
#nav ul a:hover::after{
	transform: scaleX(1);
}
/*-------- footer --------*/
footer{
	background: #171717;
	position: relative;
}
footer h1{
	margin-left: 40px;
	line-height: 0;
}
footer h1 a{
	display: inline-block;
}
footer img{
	margin-top: -2px;
}
footer .btn__scroll{
	position: absolute;
	top: -70px;
	right: 40px;
}
footer .cp{
	color: #fff;
	font-size: 10px;
	position: absolute;
	right: 40px;
	bottom: 20px;
}
/*-------- main --------*/
main{
	margin-top: -91px;
}
/*--メインビジュアル --*/
#mv{
	height: 100vh;
	min-height: 600px;
	max-height: 1000px;
	margin-bottom: 3px;
	position: relative;
}
#mv .mv__box{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#mv .mv__box::before,
#mv .mv__box::after{
	content: '';
	display: block;
	width: 100%;
	height: 56%;
	background: #231815;
	position: absolute;
}
#mv .mv__box::after{
	height: 44%;
}
#mv .mv__box::before{
	top: 0;
	left: 0;
	transform: scaleY(1.05);
	animation: logo_anime-l 0.8s ease-in-out 0.3s forwards;
}
#mv .mv__box::after{
	right: 0;
	bottom: 0;
	animation: logo_anime-r 0.8s ease-in-out 0.3s forwards;
}
@keyframes logo_anime-l{
	0% {
		width: 100%;
  }

  100% {
    width: 0;
  }
}
@keyframes logo_anime-r{
	0% {
		width: 100%;
  }
  100% {
    width: 0;
  }
}

#mv .mv__box > p{
	font-family: serif!important;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 3px;
	width: 100%;
	position: absolute;
	bottom: -80px;
}
#mv .mv__box > p::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: #231815;
	position: absolute;
	bottom: 0;
	left: 0;
	animation: catchtext_anime 0.6s ease-in-out 1s forwards;
}
@keyframes catchtext_anime{
	0% {
		height: 100%;
  }
  100% {
    height: 0;
  }
}
#mv .btn__scroll{
	opacity: 0;
	position: absolute;
	left: 50%;
	bottom: 13%;
	transform: translate(-50%,20%);
	animation: btn__scroll_anime-mv 0.3s ease-in-out 1.5s forwards,
	           btn__scroll_anime 3s ease-in-out 1.8s infinite forwards;
}
@keyframes btn__scroll_anime-mv{
	0% {
		opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes btn__scroll_anime{
	0% {
		transform: translate(-50%,20%);
  }
	50% {
		transform: translate(-50%,-20%);
	}
  100% {
    transform: translate(-50%,20%);
  }
}
/*-- セクション共通 --*/
section{
	height: 100vh;
	min-height: 600px;
	max-height: 1000px;
	padding: 91px 40px 0;
}
h2{
	display: inline-block;
	margin-bottom: 40px;
	font-size: 40px;
	font-weight: bold;
}
h2::after{
	content: '';
	width: 100%;
	display: block;
	border-bottom: 3px solid;
	border-color: #171717;
}
h3{
	margin-bottom: 20px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}
.info__text{
	margin-bottom: 20px;
}
.data__box{
	font-size: 14px;
	font-weight: bold;
}
.data_col,
.nest_col{
	display: flex;
}
.data_col{
	margin-bottom: 24px;
}
.data__box .data_col:last-child{
	margin-bottom: 0;
}
.data_col .label{
	width: 160px;
}
.nest_col{
	margin-bottom: 6px;
}
.nest__box .nest_col:last-child{
	margin-bottom: 0;
}
.nest_label{
	width: 180px;
	display: inline-block;
}
/*-- Service --*/
#service .list__box{
	max-width: 1400px;
	display: flex;
	flex-wrap: wrap;
}
#service .card{
	width: calc( 25% - 9px);
	height: 200px;
	background: #171717;
	margin-right: 12px;
	border-radius: 16px;
	position: relative;
	/* background-image: linear-gradient(rgb(44 179 124 / 50%), rgb(39 39 39 / 50%)), url(../img/service_img_01.jpg);
	background-size: cover; */
}
/* #service .card:nth-child(2){
	background-image: linear-gradient(rgb(179 77 157), rgb(39 39 39 / 50%)), url(../img/service_img_02.jpg);
}
#service .card:nth-child(3){
	background-image: linear-gradient(rgb(19 35 238 / 50%), rgb(39 39 39 / 50%)), url(../img/service_img_03.jpg);
}
#service .card:nth-child(4){
	background-image: linear-gradient(rgb(233 136 83 / 50%), rgb(39 39 39 / 50%)), url(../img/service_img_04.jpg);
}
#service .card:nth-child(5){
	background-image: linear-gradient(rgb(248 215 24 / 35%), rgb(39 39 39 / 50%)), url(../img/service_img_05.jpg);
}
#service .card:nth-child(6){
	background-image: linear-gradient(rgb(247 184 19 / 45%), rgb(39 39 39 / 50%)), url(../img/service_img_06.jpg);
}
#service .card:nth-child(7){
	background-image: linear-gradient(rgb(116 6 255 / 50%), rgb(39 39 39 / 50%)), url(../img/service_img_07.jpg);
} */
#service .card:nth-of-type(4n){
	margin-right: 0;
	margin-bottom: 12px;
}
#service .card p{
	width: max-content;
	color: #fff;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*-- ABOUT --*/
#about .data__box{
	font-family:  Arial,
								"Hiragino Kaku Gothic ProN",
								"Hiragino Sans",
								Meiryo,
								sans-serif;
}
/*-- RECRUIT --*/
#recruit .info__text{
	font-weight: bold;
}
/*-- Contact --*/
form .form_col{
	display: flex;
	flex-direction: column;
	margin-bottom: 12px;
}
form label{
	font-size: 12px;
	margin-bottom: 4px;
}
form input,
form textarea{
	width: 300px;
	padding: 8px;
	border: 1px solid #d3d3d3;
	border-radius: 4px;
	font-size: 12px;
	font-family: sans-serif;
}
form textarea{
	width: 768px;
}
form input.button{
	width: 200px;
	height: 60px;
	background: #231815;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 3px;
	text-align: center;
	cursor: pointer;
	transition: all 0.4s 0s ease;
}
form input.button:hover{
	background: #fff;
	color: #231815;
}
/*-- PrivacyPolicy --*/
#privacy_policy .scroll__box{
	font-family:  Arial,
								"Hiragino Kaku Gothic ProN",
								"Hiragino Sans",
								Meiryo,
								sans-serif;
	width: 80%;
	height: 70vh;
	max-height: 674px;
	margin: auto;
	padding: 20px;
	border: 1px solid #d3d3d3;
	border-radius: 4px;
	overflow-y: scroll;
}
#privacy_policy .scroll__box p{
	font-size: 12px;
}
#privacy_policy .scroll__box .read_text,
#privacy_policy .scroll__box .col{
	margin-bottom: 24px;
}
#privacy_policy .scroll__box .title{
	margin-bottom: 4px;
	font-weight: bold;
}
#privacy_policy .scroll__box .list{
	margin-top: 4px;
	counter-reset: count 0;
	font-size: 12px
}
#privacy_policy .scroll__box .list li{
	padding-left: 24px;
	margin-bottom: 2px;
	position: relative;
}
#privacy_policy .scroll__box .list li:last-child{
	margin-bottom: 0;
}
#privacy_policy .scroll__box .list li::before{
	content: counter(count) " ) ";
	counter-increment: count 1;
	position: absolute;
	left: 0;
}
#privacy_policy .scroll__box .foot_text p{
	text-align: right;
}
/*-------- スクロールアニメーション --------*/
.scroll__anime{
	opacity: 0;
	transform: translateY(160px);
	transition: opacity 1.5s, transform 1s;
}
.scroll__anime.active{
	opacity: 1;
	transform: translateY(0);
}
h2.scroll__anime::after{
	transform: scaleX(0);
	transform-origin: left;
	transition: all 0.4s 0s ease;
	transition-delay: 0.4s;
}
h2.scroll__anime.active::after{
	transform: scaleX(1);
}
.card::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 16px;
	position: absolute;
	top: 0;
	left: 0;
}
.card.scroll__anime.active::before{
	animation: card_anime 0.8s ease-in-out 0s forwards;
}
@keyframes card_anime{
	0% {
		width: 100%;
	}
	100% {
		width: 0;
	}
}
@media screen and (min-width: 960px){
	a{
		transition: all 0.4s 0s ease;
	}
	a:hover{
		opacity: 0.4;
	}
	.hamburger-menu{
		display: none;
	}
}
/*-------- レスポンシブ --------*/
@media screen and (max-width: 959px){
	/*--- 共通 ---*/
	p{
		font-size: 14px;
	}
	.data__box{
		font-size: 12px;
		font-weight: bold;
	}
	.data_col{
		flex-direction: column;
	}
	.data_col .label{
		width: 100%;
		margin-bottom: 6px;
	}
	.data_col .value,
	.nest_col{
		font-weight: normal;
	}
	.nest_label{
		width: 160px;
	}
	a {
	  -webkit-tap-highlight-color:rgba(0,0,0,0);
	  cursor:pointer;
	}
	/*-- header ---*/
	#nav{
		display: none;
	}
	/*--- ハンバーガーボタン ---*/
	.menu-btn {
	  display: flex;
	  height: 60px;
	  width: 60px;
	  justify-content: center;
	  align-items: center;
		position: fixed;
	  top: 10px;
	  right: 10px;
		z-index: 2;
  }
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after{
	  content: "";
	  display: block;
		width: 25px;
	  height: 3px;
	  background: #171717;
	  position: absolute;
		transition: all 0.4s 0s ease;
	}
	.menu-btn span:before {
	  bottom: 8px;
	}
	.menu-btn span:after {
	  top: 8px;
	}
	#menu-btn-check {
	  display: none;
	}
	#menu-btn-check:checked ~ .menu-btn span {
	  background: rgba(255,255,255,0);
	}
	#menu-btn-check:checked ~ .menu-btn span::before {
	  bottom: 0;
	  transform: rotate(45deg);
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
	  top: 0;
	  transform: rotate(-45deg);
	}
	.menu-content{
		width: 100vw;
	  height: 100vh;
	  position: fixed;
	  top: -100vh;
	  left: 0;
	  background: rgba(255,255,255,0.9);
		opacity: 0;
	  transition: all 0.3s;
	}
	.menu__box{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.menu__box img{
		width: 30vw;
		margin-bottom: 4vh;
	}
	.menu-content ul{
		font-size: 10vw;
		font-weight: bold;
	}
	.menu-content li{
		padding-left: 16px;
		margin-bottom: 3vh;
		position: relative;
	}
	.menu-content li:last-child{
		margin-bottom: 0;
	}
	.menu-content li::before{
		content: '';
		display: block;
		width: 8px;
		height: 8vw;
		background: #171717;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	#menu-btn-check:checked ~ .menu-content {
		top: 0;
	  opacity: 1;
	}
	/*-------- footer --------*/
	footer h1{
		margin-left: 10px;
	}
	footer img{
		width: 40vw!important;
		margin-bottom: 20px;
	}
	footer .btn__scroll{
		position: absolute;
		top: -50px;
		right: 10px;
	}
	footer .cp{
		right: 10px;
		bottom: 2px;
		transform: scale(0.9);
		transform-origin: right bottom;
	}
	/*-------- main --------*/
	main{
		margin-top: 0;
	}
	/*--メインビジュアル --*/
	#mv{
		min-height: 100vh;
		max-height: 100vh;
	}
	#mv .mv__box{
		width: 100%;
	}
	#mv .mv__box::before,
	#mv .mv__box::after{
		width: 60%;
		height: 51%;
	}
	#mv .mv__box::before{
		margin-left: 20%;
	}
	#mv .mv__box::after{
		margin-right: 20%;
	}
	@keyframes logo_anime-l{
		0% {
			width: 60%;
	  }

	  100% {
	    width: 0;
	  }
	}
	@keyframes logo_anime-r{
		0% {
			width: 60%;
	  }
	  100% {
	    width: 0;
	  }
	}
	#mv .mv__box img{
    width: 60%;
	}
	#mv .mv__box > p{
		font-size: 3.8vw;
	}
	#mv .mv__box > p::before{
		width: 60vw;
		left: 50%;
		transform: translateX(-50%);
	}
	/*-- セクション共通 --*/
	section{
		height: 70vh;
		min-height: 70vh;
		max-height: 100%;
		padding: 80px 10px 0;
	}
	h2{
		font-size: 10vw;
	}
	/*-- Service --*/
	section#service{
		height: 100%;
	}
	#service .card{
    width: 100%;
    height: 200px;
    margin-right: 0px;
		margin-bottom: 10px;
	}
	#service .card:nth-of-type(4n){
		margin-bottom: 10px;
	}
	#service .card p{
		font-size: 5vw;
		font-weight: 600;
	}
	/*-- About --*/
	section#about{
		height: 100%;
	}
	/*-- Recruit --*/
	section#recruit .info__text{
		font-size: 20px;
	}
	/*-- PrivacyPolicy --*/
	section#privacy_policy{
		height: 100%;
		min-height: 100%;
		padding-bottom: 120px;
	}
	#privacy_policy .scroll__box{
		width: 100%;
		height: calc( 100vh - 300px );
		padding: 10px;
	}
}