@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans CJK JP Regular'),
       local('NotoSansCJKjp-Regular'),
       local('NotoSansJP-Regular'),
    url('../fonts/NotoSans_Regular.woff2')format('woff2'),
    url('../fonts/NotoSans_regular.woff')format('woff');
}
@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: medium;
  font-weight: 500;
  src: local('Noto Sans CJK JP Medium'),
       local('NotoSansCJKjp-Medium'),
       local('NotoSansJP-Medium'),
    url('../fonts/NotoSans_Medium.woff2')format('woff2'),
    url('../fonts/NotoSans_medium.woff')format('woff');
}
@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: bold;
  font-weight: 700;
  src: local('Noto Sans CJK JP Bold'),
       local('NotoSansCJKjp-Bold'),
       local('NotoSansJP-Bold'),
    url('../fonts/NotoSans_Bold.woff2')
    url('../fonts/NotoSans_bold.woff')format('woff');
}

* {
	margin: 0;
	padding: 0;
}

body{
	font-family: "Noto Sans CJK JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic", sans-serif;
	line-height: 1.8;
	color: rgb(27,27,27);
	overflow-x: hidden;
}
.preload * {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

.box{
	width: 86%;
	max-width: 960px;
	margin: 0 auto;
}
a{
	color: rgb(27,27,27);
	text-decoration: none;
}
li{
	list-style: none;
}
img{
	display: block;
}
p{
	font-size: 14px;
	letter-spacing: 0.08em;
}
table{
	border-collapse: collapse;
}
th,
td{
	font-size: 14px;
	letter-spacing: 0.1em;
	font-weight: 500;
}
.en{
	font-family: "century-gothic", sans-serif;
	font-style: italic;
}
.ja{
	font-family: "Noto Sans CJK JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic", sans-serif;
	font-style: normal;
}
.photo img{
	width: 100%;
}
.btn,
#header .contact-btn{
	transition: 0.3s;
	border: 1px solid rgb(230,0,18);
	background-color: rgb(230,0,18);
	box-sizing: border-box;
}
.btn:hover{
	background-color: rgb(255,255,255);
}
.btn a{
	color: rgb(255,255,255);
	transition: 0.3s;
	background: url("../images/ic_arrow_right.png") no-repeat center right 20px;
	background-size: 7px;
}
.btn:hover a{
	color: rgb(230,0,18);
	background: url("../images/ic_arrow_right_r.png") no-repeat center right 10px;
	letter-spacing: 0.2em;
}
.work .performance .more_btn a:hover{
	background: url("../images/ic_pdf_r.png") no-repeat center right 15px;
}

/*--scrollエフェクト--*/
.block-revealer__element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
  opacity: 0;
}
.block-revealer__content {
  opacity: 0;
}

.pc{
	display: block;
}
.sp{
	display: none;
}
/*--スクロールエフェクト--*/

.sa {
	opacity: 0;
	transition: all 1.5s ease;
}
.sa.show {
	opacity: 1;
	transform: none;
}
.left3{
	transform: translate(-100px, 0);
}
.bottom3{
	transform: translate(0, 100px);
}
.left4{
	transform: translate(-100px, 0);
}
.bottom5{
	transform: translate(0, 100px);
}
.bottom4{
	transform: translate(0, 100px);
}
.bottom6{
	transform: translate(0, 100px);
}
.right4{
	transform: translate(100px, 0);
}

/*--- IE ---*/
@media all and (-ms-high-contrast: none) {
	#main{
		display: block;
	}
}



@media only screen and (max-width: 768px){
	body{
		
	}
	
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	
	.box{
		width: 90%;
	}
	p{
		font-size: 3.75vw;
	}
	th, td{
		font-size: 3.437vw;
	}
}




/*---header---*/
#header{
	width: 100%;
	height: 100px;
	position: relative;
	z-index: 9999;
	background-color: rgb(255,255,255);
	letter-spacing: 0.1em;
}
#header .logo{
	position: absolute;
	top: 20px;
	left: 30px;
}
#header .tel-area{
	position: absolute;
	font-size: 0;
	right: 175px;
	top: 10px;
	padding-right: 20px;
}
#header .tel-area .tel,
#header .tel-area .time{
	display: inline-block;
}
#header .tel-area .tel{
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
	margin-right: 20px;
}
#header .tel-area .time{
	font-size: 12px;
}
#header .gnav{
	position: absolute;
	right: 175px;
	bottom: 15px;
	padding-right: 30px;
}
#header .gnav ul{
	display: flex;
}
#header .gnav ul li{
	padding-right: 40px;
}
#header .gnav ul li.recr{
	padding-right: 0;
}
#header .gnav ul li a{
	font-size: 14px;
	position: relative;
	font-weight: 500;
	padding-bottom: 21px;
}
@media all and (-ms-high-contrast: none) {
	#header .gnav ul li a{
		padding-bottom: 18px;
	}
}
@-moz-document url-prefix() {
	#header .gnav ul li a{
		padding-bottom: 18px;
	}
}
#header .gnav ul li a::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 4px;
	left: 0;
	bottom: 0;
	background-color: rgb(230,0,18);
	transform: scale(0, 1);
 	transform-origin: right top;
  	transition: transform .3s;
}
#header .gnav ul li a:hover::after{
	transform-origin: left top;
  	transform: scale(1, 1);
}
.home #header .gnav ul li.home a::after,
.busi #header .gnav ul li.busi a::after,
.work #header .gnav ul li.work a::after,
.comp #header .gnav ul li.comp a::after,
.recr #header .gnav ul li.recr a::after{
	transform: scale(1, 1);
}

#header .contact-btn{
	position: absolute;
	right: 0;
	top: 0;
	width: 175px;
	height: 100px;
	background-color: rgb(230,0,18);
	box-sizing: border-box;
}
#header .contact-btn a{
	display: block;
	color: rgb(255,255,255);
	box-sizing: border-box;
	font-size: 14px;
	padding: 55px 0 20px;
	text-align: center;
	transition: all .3s;
}
#header .contact-btn a:hover{
	opacity: 0.7;
}
#header .contact-btn a span{
	position: relative;
}
#header .contact-btn a span::before{
	content: "";
	position: absolute;
	background: url("../images/ic_mail.png") no-repeat center center;
	background-size: cover;
	width: 24px;
	height: 17px;
	top: -35px;
	right: 0;
	left: 0;
	margin: 0 auto;
}
@media only screen and (max-width: 940px){
	#header .pc{
		display: none;
	}
	#header .sp{
		display: block;
	}
	#header .logo{
		top: 25px;
		left: 35px;
	}
	#header .contact-btn{
		right: 100px;
		width: 100px;
		height: 100px;
	}
	#header .contact-btn a{
		padding: 65px 0 10px;
	}
	#header .contact-btn a span{
		font-size: 13px;
	}
	#header .contact-btn a span::before{
		background: url("../images/ic_mail_sp.png") no-repeat center center;
		background-size: cover;
		width: 35px;
		height: 24px;
		top: -40px;
	}
	
	
	/*---ハンバーガーメニュー---*/
	#btn_sp{
		position: absolute;
		display: block;
		right: 0;
		top: 0;
		width: 100px;
		height: 100px;
		overflow: hidden;
		cursor: pointer;
		transition: background .3s;
		z-index: 9999;
		background-color: rgb(27,27,27);
	}
	#btn_sp span{
		display: block;
		position: absolute;
		width: 50%;
		top: 44%;
		right: 25%;
		height: 2px;
		background-color: rgb(255,255,255);
	}
	.open #btn_sp span{
		background-color: transparent;
	}
	#btn_sp span::before,
	#btn_sp span::after{
		content: "";
		position: absolute;
		display: block;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: rgb(255,255,255);
	}
	#btn_sp span::before{
		top: -7px;
		transition-property: top,transform;
	}
	.open #btn_sp span::before{
		top: 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#btn_sp span::before{
		top: -10px;
		transition-property: top,transform;
	}
	.open #btn_sp span::before{
		top: 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#btn_sp span::after{
		bottom: -10px;
		transition-property: bottom,transform;
	}
	.open #btn_sp span::after{
		bottom: 0;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	#btn_sp p{
		font-size: 16px;
		color: rgb(255,255,255);
		text-align: center;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 8px;
	}
	#header .sp_menu{
		box-sizing: border-box;
		display: none;
		background-color: rgb(245,245,245);
		position: absolute;
		top: 100px;
		left: 0;
		width: 100%;
		padding: 20px 5% 60px;
		z-index: 9999;
	}
	#header .sp_menu #spnav{
		margin-bottom: 40px;
	}
	#header .sp_menu #spnav li{
	}
	#header .sp_menu #spnav li a{
		font-size: 20px;
		font-weight: 500;
		position: relative;
		display: block;
		padding: 20px 0;
		border-bottom: 1px solid rgb(229,229,229);
		background: url("../images/ic_arrow_right_b.png") no-repeat right center;
		background-size: 10px;
		transition: all .3s;
	}
	#header .sp_menu #spnav li a:hover{
		opacity: 0.7;
	}
	
	#header .sp_menu .link_area .tel-area{
		position: static;
		padding: 10px 0 10px 15px;
		margin-bottom: 50px;
		border-left: 6px solid rgb(230,0,18);
	}
	#header .sp_menu .link_area .tel-area .tel{
		font-size: 24px;
		margin-right: 0;
	}
	#header .sp_menu .link_area .tel-area .time{
		display: block;
		font-size: 18px;
	}
	#header .sp_menu .contact_btn a{
		font-size: 16px;
		padding: 20px 0;
	}
	
}
@media only screen and (max-width: 768px){
	#header{
		height: 18.75vw;
	}
	#header .logo{
		top: 4.688vw;
		left: 4.688vw;
		width: 39.063vw;
	}
	#header .logo a{
		display: block;
	}
	#header .logo img{
		width: 100%;
	}
	#header .contact-btn{
	right: 18.75vw;
	top: 0;
	width: 18.75vw;
	height: 18.75vw;
	}
	#header .contact-btn a{
		padding: 11.2vw 0 0;
	}
	#header .contact-btn a span{
		display: block;
		font-size: 2.812vw;
		letter-spacing: 0.02em;
	}
	#header .contact-btn a span::before{
		width: 6.25vw;
		height: 4.375vw;
		top: -6.133vw;
	}
/*---ハンバーガーメニュー---*/
	#btn_sp{
		position: absolute;
		display: block;
		right: 0;
		top: 0;
		width: 18.75vw;
		height: 18.75vw;
		overflow: hidden;
		cursor: pointer;
		transition: background .3s;
		z-index: 9999;
		background-color: rgb(27,27,27);
	}
	#btn_sp span{
		display: block;
		position: absolute;
		width: 50%;
		top: 37%;
		right: 25%;
		height: 2px;
		background-color: rgb(255,255,255);
	}
	.open #btn_sp span{
		background-color: transparent;
	}
	#btn_sp span::before,
	#btn_sp span::after{
		content: "";
		position: absolute;
		display: block;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: rgb(255,255,255);
	}
	#btn_sp span::before{
		top: -7px;
		transition-property: top,transform;
	}
	.open #btn_sp span::before{
		top: 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#btn_sp span::before{
		top: -2.187vw;
		transition-property: top,transform;
	}
	.open #btn_sp span::before{
		top: 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#btn_sp span::after{
		bottom: -2.187vw;
		transition-property: bottom,transform;
	}
	.open #btn_sp span::after{
		bottom: 0;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	#btn_sp p{
		font-size: 3.125vw;
		color: rgb(255,255,255);
		text-align: center;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 1.563vw;
	}
	#header .sp_menu{
		box-sizing: border-box;
		display: none;
		background-color: rgb(245,245,245);
		position: absolute;
		top: 18.75vw;
		left: 0;
		width: 100%;
		padding: 20px 5% 60px;
		z-index: 9999;
	}
	#header .sp_menu #spnav{
		margin-bottom: 7.813vw;
	}
	#header .sp_menu #spnav li{
	}
	#header .sp_menu #spnav li a{
		font-size: 3.75vw;
		font-weight: 500;
		position: relative;
		display: block;
		padding: 4.688vw 0;
		border-bottom: 1px solid rgb(229,229,229);
		background: url("../images/ic_arrow_right_b.png") no-repeat right center;
		background-size: 10px;
	}
	
	#header .sp_menu .link_area .tel-area{
		position: static;
		padding: 1.563vw 0 1.563vw 6.25vw;
		margin-bottom: 7.813vw;
		border-left: 6px solid rgb(230,0,18);
	}
	#header .sp_menu .link_area .tel-area .tel{
		font-size: 6.563vw;
		margin-right: 0;
	}
	#header .sp_menu .link_area .tel-area .time{
		display: block;
		font-size: 3.75vw;
	}
}





/*---sidebar---*/
.sidebar{
	width: 80px;
	height: 100%;
	top: 0;
	background-color: rgb(230,0,18);
	position: fixed;
	z-index: 9998;
}
.sidebar p{
	font-size: 11px;
    color: rgb(248,186,191);
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    margin: auto;
}
.sidebar .sidelogo{
	position: absolute;
	width: 100%;
	bottom: 5%;
}
.sidebar .sidelogo img{
	margin: auto;
}

@media only screen and (max-width: 768px){
	.sidebar{
		display: none;
	}
}

/*----contact-area----*/
.contact-area{
	/*padding: 70px;*/
	padding: 70px 5.3%;
	background-color: rgb(49,49,49);
}
.contact-area .box{
	display: flex;
}
.contact-area .left{
	/*margin-right: 155px;*/
	margin-right: 16.2%;
}
.contact-area .left .ttl{
	font-size: 24px;
	color: rgb(255,255,255);
	margin-bottom: 45px;
}
.contact-area .left .ttl span{
	font-size: 20px;
	font-weight: bold;
	display: block;
	color: rgb(230,0,18);
}
.contact-area .left p{
	letter-spacing: 0.1em;
	color: rgb(255,255,255);
}
.contact-area .right{
	
}
.contact-area .right .tel-area{
	color: rgb(255,255,255);
	margin-bottom: 40px;
}
.contact-area .right .tel-area .tel{
	font-size: 28px;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 0.1em;
}
.contact-area .right .tel-area .time{
	font-size: 14px;
	letter-spacing: 0.1em;
}
.contact-area .right .contact_btn{
	width: 300px;
}
@media only screen and (max-width: 768px){
	.contact-area .box{
		display: block;
	}
	.contact-area{
		padding: 12.5vw 0 9.375vw;
	}
	.contact-area .right .contact_btn{
		width: 100%;
	}
	.contact-area .left{
		margin-right: 0;
	}
	.contact-area .left .ttl {
		font-size: 5.313vw;
		margin-bottom: 4.688vw;
	}
	.contact-area .left .ttl span{
		font-size: 5vw;
	}
	.contact-area .right .tel-area{
		margin-bottom: 6.25vw;
	}
	.contact-area .right .tel-area a{
		color: rgb(255,255,255);
	}
	.contact-area .right .tel-area .tel{
		font-size: 7.5vw;
	}
	.contact-area .right .tel-area .time{
		font-size: 3.75vw;
	}
}


/*----footer---*/
#footer{
	padding: 60px 0;
	box-sizing: border-box;
	border-top: 4px solid rgb(230,0,18);
}
#footer .logo{
	margin-bottom: 50px;
}
#footer .logo a{
	display: block;
	margin-bottom: 15px;
}
#footer .logo .address{
	font-size: 13px;
}

#footer .foot-nav{
	
}
#footer .foot-nav ul{
	font-size: 0;
}
#footer .foot-nav ul li{
	display: inline-block;
	margin-right: 45px;
	transition: all .1s ease-out;
}
#footer .foot-nav ul li:last-of-type{
	margin-right: 0;
}
#footer .foot-nav ul li:hover{
	border-bottom: 2px solid rgb(230,0,18);
}
#footer .foot-nav ul li a{
	font-size: 13px;
	font-weight: 500;
}

@media only screen and (max-width: 768px){
	#footer{
		padding: 9.375vw 0;
		border-top: 2px solid rgb(230,0,18);
	}
	#footer .logo{
		margin-bottom: 7.813vw;
		width: 100%;
	}
	#footer .logo a{
		margin-bottom: 4.688vw;
		width: 60%;
	}
	#footer .logo a img{
		width: 100%;
	}
	#footer .logo .address{
		font-size: 3.75vw;
	}
	#footer .foot-nav{
		margin-bottom: 6.25vw;
	}
	#footer .foot-nav ul li {
		width: calc(100% / 3);
		margin-right: 0;
		margin-bottom: 3.125vw;
	}
	#footer .foot-nav ul li:nth-of-type(6){
		width: 26.563vw;
	}
	#footer .foot-nav ul li:last-of-type{
		width: 37.5vw;
	}
	#footer .foot-nav ul li a{
		font-size: 3.125vw;
	}
	#footer p.copy-right{
		font-size: 3.125vw;
		color: rgb(147,147,147);
		letter-spacing: 0.16em;
	}
}