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


.anchor {
  display: block;
  visibility: hidden;
	scroll-margin-top: 80px;
}

.skip-link {
	position: fixed;
	top: 10px;
	left: 10px;
	background: #E1E1E1;
	border: 1px solid #ccc;
	border-radius: 2px;
	color: #000;
	padding: 0.4em 0.6em;
	z-index: 99999999999;
	text-decoration: none;
	opacity: 0.9;
	transform: translateY(-100vh);

}
.skip-link:focus {
	transform: translateY(0);
}

.mt0 {margin-top: 0!important;}
.mt1em {margin-top: 1em!important;}
.mt2em {margin-top: 2em!important;}
.tac {text-align: center!important;}
.tal {text-align: left!important;}
.bold {font-weight: 600;}
.inline-block {display: inline-block;}
.flex-align-start { align-items: start!important;}


header{
	position: fixed;
	margin: 0;
	z-index:99999;
	background-color: #fff;
	width: 100%;
	border-bottom: 1px solid #E1E1E1;
}
header nav{
	/*width: 1080px;*/
	width: calc(100% - 20px);
	padding: 0 0 0 20px;
	height: 80px;
	margin: 0 auto;
}
header ul li {
	line-height: 1;
}
header .pc_head_blog {
	height: 100%;
	display: flex;
	align-items: center;
}
header .pc_head_blog img {
	display: inline-block;
	margin: auto;
	max-width: 120px;
	font-size: 12px;
	line-height: 1.1;
}

/*------ヘッダー------*/
@media screen and (min-width: 1280px){

	header nav{
		display:flex;
		width: 100%;
		height: 80px;
		margin: 0 auto;
	}
	header a.head_logo{
		margin: 0 auto 0 0;
		border: none;
		width: 300px;
		padding-left: 1rem;
	}

	header a.head_logo:hover,
	.logo_box a:hover{
		opacity: 0.7;
	}
	header a.head_logo.head_logo img{
		padding: 21px 0 16px 0;
		width: 100%;
		min-width: 300px;
	}

	.noline{
		border-left: none;
		padding: 0;
	}
	.pc_head_blog {
		min-width: 122px;
	}
	.pc_head_contact {
		min-width: 80px;
	}
	.contact{
		background:url(../images/contact_on.svg)no-repeat;
	}
	.contact a {
		display: block;
		height: 80px;
	}
	.contact:hover{
		background-color: transparent;/*IE6対応*/
		transition:all 0.3s;
	}
	.contact:hover img{
		visibility: hidden;
	}
	.contact img{
		width: 80px;
		height: 100%;
	}

	header ul{
		display:flex;
		align-content: center;
		gap: 8px 0;
		justify-content: flex-end;
		align-items: center;
		margin: 0 0 0 auto;
		padding: 0;
		height: 80px;
	}

	header ul li:first-child {
		width: auto;
	}
	header ul li{
		line-height: 1;
		display: inline-flex;
		align-items: center;	
	}
	header ul li a{
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 2px;
		border-left: 1px solid #323232;
		padding: 0 1.5em; 
		text-decoration: none;
		color: #323232;
		width: auto;
	}
	header ul li:hover > a{
		text-decoration: underline;
	}


	.sub_menu_{display: none;}
	.sub_menu_wrap {
		display: none;
		position: absolute;
		z-index: 1;
		top: 100%;
		left: 0;
		background: #000c;
		width: 100%;
		min-height: 180px;
	}
	.has_sub:hover .sub_menu_wrap {
		display: block;
	}

	.has_sub:focus-within .sub_menu_wrap {
		display: block;
		opacity: 1;
		visibility: visible;
	}

	.sub_menu {
		display: flex;
		justify-content: center;
		padding: 1em 0;
		width: 100%;
		margin: auto;
	}

	.sub_menu ul {
		display: inline-flex;
		justify-content: flex-start;
		gap: 0;
		text-align: left;
		flex-direction: column;
		margin: 0;
		flex-wrap: nowrap;
		height: auto;
		border-left: 2px solid #fff;
		padding: 0.5em 1.5em 0.5em 1em;
	}
	.sub_menu ul li {
		display: inline-block;
		width: 100%;
		min-width: 12em;
		line-height: 1;
		height: auto;
	}
	.sub_menu ul li a {
		letter-spacing: 1px;
		display: inline-block;
		font-size: 0.8em;
		font-weight: 400;
		width: 100%;
		padding: 0;
		margin: 0 0 0.8em;
		border: 0;
		line-height: 1.3;
	}
	.sub_menu ul li a {
		display: inline-block;
	}
	.sub_menu ul li a.sub_top {
		font-size: 14px;
		font-weight: 600;
	}
	.sub_menu ul li a:not(.sub_top) {
		width: calc(100% - 0.8em);
		text-indent: -0.8em;
		margin-left: 0.8em;
	}
	.sub_menu ul li:last-of-type a {
		margin-bottom: 0;
	}

	.sub_menu ul li a:not(.sub_top)::before {
		content: "";
		display: inline-block;
		background: url(../images/sub_link.png) no-repeat left center;
		width: 10px;
		height: 1.35em;
		vertical-align: middle;
	}

	.sub_menu a {
		color: #fff;
	}
}

/*------ヘッダー------*/

/*-- PC版表示CSS  --*/
header > .pc_area{
	display:block!important;
}
header > .sp_area{
	display:none!important;
}




@media screen and (max-width: 1280px) {
	/*-- PC版表示CSS  --*/
	header > .pc_area {
		display:none!important;
	}
	header > .sp_area{
		display:block!important;
	}
}

header .pc_area nav{
	display:flex;
	width: calc(100% - 20px);
	height: 80px;
	margin: 0 auto;
}
header .pc_area a.head_logo{
	margin: 0 auto 0 0;
	border: none;
	width: 300px;
}

header .pc_area a.head_logo:hover,
.logo_box a:hover{
	opacity: 0.7;
}
header .pc_area a.head_logo.head_logo img{
	padding: 21px 0 16px 0;
	width: 100%;
	min-width: 300px;
}

.pc_area .noline{
	border-left: none;
	padding: 0;
}
.pc_head_blog {
	min-width: 122px;
}
.pc_head_contact {
	min-width: 80px;
}
.pc_area .contact{
	background:url(../images/contact_on.svg)no-repeat;
}
.pc_area .contact a {
	display: block;
	height: 80px;
}
.pc_area .contact:hover{
	background-color: transparent;/*IE6対応*/
	transition:all 0.3s;
}
.pc_area .contact:hover img{
	visibility: hidden;
}
.pc_area .contact img{
	width: 80px;
	height: 100%;
}

header h1 {
	margin: 0;
}

header .pc_area ul{
	display:flex;
	align-content: center;
	gap: 8px 0;
	justify-content: flex-end;
	align-items: center;
	margin: 0 0 0 auto;
	padding: 0;
	height: 80px;
}
header .pc_area nav > ul > li{
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	height: 100%;
	/*max-width: 15em;*/
	
}
header .pc_area .sub_menu ul li:first-child {
	width: 100%;
}
header .pc_area ul li{
	line-height: 1;
}
header .pc_area ul li a{
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 2px;
	border-left: 1px solid #323232;
	padding: 0 1em; 
	text-decoration: none;
	color: #323232;
	width: auto;
	min-width: 5em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

header .pc_area ul li:hover > a{
	text-decoration: underline;
}


.pc_area .sub_menu {display: none;}
.pc_area .sub_menu_wrap {
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
	pointer-events: none;

	position: absolute;
	z-index: 1;
	top: 100%;
	left: 0;
	background: #000c;
	width: 100%;
	min-height: 180px;
}

.pc_area .has_sub > a::after {
	text-align: center;
	content: url(../images/has_sub.png);
	display: inline-block;
	width: 1em;
	height: 1.3em;
	vertical-align: middle;
}
.pc_area .has_sub:hover .sub_menu_wrap {
	opacity: 1;
	visibility: visible;
}

.pc_area .has_sub.open .sub_menu_wrap,
.pc_area .has_sub:focus-within .sub_menu_wrap {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .3s, visibility .3s;
}
.pc_area .sub_menu {
	display: flex;
	justify-content: center;
	gap: 1em 0;
	padding: 1em 10px;
	width: 100%;
	max-width: 1080px;
	margin: auto;
}

.pc_area .sub_menu ul {
	display: inline-flex;
	justify-content: flex-start;
	gap: 0;
	text-align: left;
	flex-direction: column;
	margin: 0;
	flex-wrap: nowrap;
	height: auto;
	border-left: 2px solid #fff;
	padding: 0.5em 1.5em 0.5em 1em;
	width: 33.4%;
}

.pc_area .sub_menu ul li {
	display: inline-block;
	width: 100%;
	min-width: unset;
	line-height: 1;
}
.pc_area .sub_menu ul li a {
	letter-spacing: 1px;
	display: inline-block;
	font-size: 0.8em;
	font-weight: 400;
	width: 100%;
	padding: 0;
	margin: 0 0 0.8em;
	border: 0;
	line-height: 1.3;
}
.pc_area .sub_menu ul li a {
	display: inline-block;
}
.pc_area .sub_menu ul li a.sub_top {
	font-size: 14px;
	font-weight: 600;
}
.pc_area .sub_menu ul li a:not(.sub_top) {
	width: calc(100% - 0.8em);
	text-indent: -0.8em;
	margin-left: 0.8em;
}
.pc_area .sub_menu ul li:last-of-type a {
	margin-bottom: 0;
}

.pc_area .sub_menu ul li a:not(.sub_top)::before {
	content: "";
	display: inline-block;
	background: url(../images/sub_link.png) no-repeat left center;
	width: 10px;
	height: 1.35em;
	vertical-align: middle;
}

.pc_area .sub_menu a {
	color: #fff;
}







footer {
	width: 95%;
	max-width: 1080px;
}
.pr_mark {
	width: 45px;
	height: auto;
}
.logo_box{
	height: 68px;
	margin: 0 0 10px ;
}
.f_logo{
	padding: 15px 0 0 0 ;
	width: 300px;
	height: auto;
}
.totop{
	display: block;
	margin: 0 0 0 auto ;
	width: 22px;
	float: right;
}
@media screen and (max-width: 785px){
	.logo_box{
		height: auto;
	}
	.totop{
	display: block;
	padding: 0 0 7% 0;
	margin: 0 auto ;
	float: inherit;
}
	.sp_footer_line{
		border-bottom: 1px solid #e1e1e1;
		width: 95%;
	margin: 0 auto 7%;
	}
}

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

	header {
		position: fixed;
		margin: 0;
		z-index: 100;
		background-color: #fff;
		width: 100%;
		border-bottom: 1px solid #E1E1E1;
	}
	#contents {
		padding-top: clamp(10px, 13vw, 80px);
		border-top: 0;
	}

	#header .sp_area .h_logo {
		display: flex;
		align-items: center;
		background: #fff;
		width: 100%;
		border-bottom: 1px solid #E1E1E1;
		box-sizing: border-box;
		height: clamp(10px, 13vw, 80px);
		max-height: 80px;
	}
	#header .sp_area .h_logo img {
		width: 70vw;
		max-width: 420px;
		display: block;
		padding: 0 0 0 3vw;
		margin: auto 0;
	}
	#gNav {
		inset: 0;
		max-height: 0;
		height: auto;
		overflow: auto;
		/*overflow: hidden;*/
		transform: translateY(0);
		transition: opacity .65s, transform .65s, max-height .65s;
		pointer-events: none;
		position: fixed;
		width: 100%;
		padding: 0;
		z-index: 99;
	}
	
	#gNav.active {
		max-height: 100vh;
		transform: translateY(0);
		pointer-events: auto;
	}

	#gNav ul.nav {
		position: fixed;
		padding: 0;
		margin: 0;
		width: 100%;
		height: auto;
		max-height: 100vh;
		list-style-type: none;
		z-index: 1;
		background: url(/images/sp_menu.png);
		background-color: #043177;
		display: block;
	}

	#gNav ul.nav li {
		background-color: #043177;
		font-size: clamp(16px,3.2vw,28px);
		letter-spacing: .4vw;
		display: block;
		height: auto;
	}
	#gNav ul.nav li a {
		display: block;
		width: 100%;
		padding: 3vw calc(46px + 3vw) 3vw 4vw;
		padding-top: clamp(12px, 4vw, 22px);
		padding-bottom: clamp(12px, 4vw, 22px);
		font-weight: normal;
		margin: 0;
		text-align: left;
		text-decoration: none;
		text-transform: uppercase;
		color: #fff;
		box-sizing: border-box;
		border-bottom: 1px solid #131d5e;

}

	#gNav ul.nav > li:nth-child(2) {
		margin: 13vw 0 0;
		margin-top: clamp(10px, 13vw, 80px);
	}
	#gNav ul.nav li a:hover,#gNav ul.nav li.nolink span:hover {
		/*background: #252525;*/
		background-color: rgba(255, 255, 255, 0.1);
	}
	#gNav ul.nav .sub-menu li a:hover,
	#gNav ul.nav .sub-menu li a:focus-visible {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 6px;
	}
	#gNav ul.nav .sub-menu li a:focus-visible {
		outline-offset: initial;
	}
	#gNav ul.nav li.top {
		width: 100%;
		height: clamp(10px, 13vw, 80px);
		max-height: 100px;
		background: url(/images/sp_menu.png);
		position: fixed;
		z-index: 1;
		inset: 0 0 0 auto;
	}
	#gNav ul.nav li.top .top_btn {
		display: flex;
		align-items: center;
	}

	#gNav ul.nav li.top a {
		padding: 0;
		height: clamp(10px, 13vw, 80px);
		max-height: 100px;
		border-bottom: none;
	}
	#gNav ul.nav li.top a img {
		width: 70vw;
		max-width: 420px;
		height: auto;
		display: block;
		padding: 0 0 0 3vw;
		margin: auto 0;
	}
	.sub_link {
		background-color: rgba(0, 0, 0, 0.00) !important;
		background: url(../images/sp_menu.png);
	}
	#gNav ul.nav li.sub_link a {
		border-bottom: none;
		padding: 0 0 0 2vw ;
		text-decoration: underline;
		margin: 4vw 0 0vw 4vw;
		margin-top: clamp(20px, 2vw, 40px);
		margin-bottom: clamp(20px, 2vw, 40px);
		line-height: 1.5;
		width: 93vw;
	}
	#gNav ul.nav li.sub_link:last-child {
		padding: 1px 0;
	}


	/*#gNav ul.nav li.sub_link .mail_sp a {
		padding: 0;
		background-image: none;
		margin: 4vw auto;
	}*/
	
	#gNav ul.nav li.sub_link .mail_sp a {
		border: clamp(4px, 1vw, 10px) double #043177;
		background-color: #fff;
		background: url(../images/contact_sp_bg.png)!important;
		color: #043177;
		font-weight: bold;
		text-decoration: none!important;
		text-align: center;
		line-height: 1;
		padding: clamp(12px, 5vw, 30px)!important;
		font-size: clamp(16px,4vw,26px);
		margin-top: clamp(30px, 3vw, 40px)!important;
		margin-bottom: clamp(30px, 3vw, 40px)!important;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	#gNav ul.nav li.sub_link .mail_sp a:hover {
		opacity: 0.8;
	}


	#gNav ul.nav li.sub_link .mail_sp a::before {
		content: url(../images/contact_sp_icon.svg);
		vertical-align: middle;
		display: inline-block;
		width: 1.2em;
		height: 1.2em;
		margin-right: 12px;
		padding-bottom: 4px;
		}

	#gNav ul.nav li.nolink ul.sub-menu {
		max-height: 0;
		overflow: auto;
		/*overflow: hidden;*/
		transform: translateY(0);
		transition: opacity .65s, transform .65s, max-height .65s;
		pointer-events: none;
		display: block;
		height: auto;
	}

	#gNav ul.nav li.nolink.active ul.sub-menu {
		max-height: 100vh;
		transform: translateY(0);
		pointer-events: auto;
	}
	#gNav ul.nav li.nolink ul.sub-menu li {
		padding: 0;
		margin: 0;
		width: 100%;
		list-style-type: none;
		/*overflow-y: auto;
		 position: relative; */
		background: url(/images/sp_menu.png);
	}
	#gNav ul.sub-menu a, #gNav ul.sub-menu a:hover {
		background: url(/images/sub_ya.png) calc(97vw - 41px) center no-repeat !important;
		opacity: 1;
	}
	#gNav ul.sub-menu li {
		background-color: rgba(0, 0, 0, 0);
		border-bottom: 1px solid rgba(255, 255, 255, 0.50);
	}
	#gNav ul li a, .nolink span {
		display: block;
		padding: 4vw calc(3vw + 1.3em) 4vw 4vw;
		padding-top: clamp(12px, 4vw, 22px);
		padding-bottom: clamp(12px, 4vw, 22px);
		border-bottom: 1px solid #131d5e;
		position: relative;
		text-transform: uppercase;
		color: #fff;
		font-size: clamp(14px,3.2vw,20px);
		letter-spacing: .2vw;

	}
	#gNav ul.nav li.nolink span .nolink_icon::after {
		position: absolute;
		inset: 0 3vw 0 auto;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		content: "＋";
		font: normal 100 clamp(13px,8vw,32px)/1 Arial, sans-serif;
		width: 1em;
		text-align: center;
	}
#gNav ul.nav li.nolink.active span .nolink_icon::after {
		content: "－";
	}

	#gNav .sub_link a {
		background: url(/images/sub_link.png) left no-repeat;
		padding: 0 0 0 3vw;
		text-decoration: underline;
		margin: 4vw 0 0vw 5vw;
		width: 93vw;
}

	button#nav_btn {
		pointer-events: auto !important;
		z-index: 100;
		border: none;
		position: fixed;
		display: inline-block;
		box-sizing: border-box;
		width: clamp(10px, 13vw, 80px);
		height: clamp(10px, 13vw, 80px);
		max-width: 100px;
		max-height: 100px;
		right: 0;
		top: 0;
		background: url(/images/sp_menu.png) center;
		background-color: #043177;
		padding: 0;
		cursor:pointer;
	}
	#nav_btn span {
		position:absolute;
		left:50%;
		width:55%;
		height:3px;
		background:#fff;
		transform:translateX(-50%);
	}
	#nav_btn span:nth-of-type(1) { top:calc(30% - 1.5px); }
	#nav_btn span:nth-of-type(2) { top:calc(50% - 1.5px); }
	#nav_btn span:nth-of-type(3) { top:calc(70% - 1.5px); }
	
	#nav_btn.active span:nth-child(1){
		animation: bar1 .6s forwards;
	}
	#nav_btn.active span:nth-child(2){
		animation: bar2 .3s forwards;
	}
	#nav_btn.active span:nth-child(3){
		animation: bar3 .6s forwards;
	}

	@keyframes bar1{
		0%{
			top:calc(30% - 1.5px);
			transform:translateX(-50%) rotate(0);
		}
		50%{
			top:calc(50% - 1.5px);
			transform:translateX(-50%) rotate(0);
		}
		100%{
			top:calc(50% - 1.5px);
			transform:translateX(-50%) rotate(45deg);
		}
	}

	@keyframes bar2{
		0%{ opacity:1; }
		50%{ opacity:1; }
		100%{ opacity:0; }
	}

	@keyframes bar3{
		0%{
			top:calc(70% - 1.5px);
			transform:translateX(-50%) rotate(0);
		}
		50%{
			top:calc(50% - 1.5px);
			transform:translateX(-50%) rotate(0);
		}
		100%{
			top:calc(50% - 1.5px);
			transform:translateX(-50%) rotate(-45deg);
		}
	}

	#nav_btn:not(.active) span:nth-child(1){
		animation: active-bar1 .6s forwards;
	}
	#nav_btn:not(.active) span:nth-child(2){
		animation: active-bar2 .6s forwards;
	}
	#nav_btn:not(.active) span:nth-child(3){
		animation: active-bar3 .6s forwards;
	}

	@keyframes active-bar1{
		0%{
			top:calc(50% - 1.5px);
			transform:translateX(-50%) rotate(45deg);
		}
		50%{
			top:calc(50% - 1.5px);
			transform:translateX(-50%) rotate(0);
		}
		100%{
			top:calc(30% - 1.5px);
			transform:translateX(-50%) rotate(0);
		}
	}

	@keyframes active-bar2{
		0%{ opacity:0; }
		50%{ opacity:0; }
		100%{ opacity:1; }
	}

	@keyframes active-bar3{
		0%{
			top:calc(50% - 1.5px);
			transform:translateX(-50%) rotate(-45deg);
		}
		50%{
			top:calc(50% - 1.5px);
			transform:translateX(-50%) rotate(0);
		}
		100%{
			top:calc(70% - 1.5px);
			transform:translateX(-50%) rotate(0);
		}
	}

}
/* footer */

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

	footer {
		width: 100%;
		max-width: 1080px;
		margin: 0 auto;
		padding: 38px 0;
		letter-spacing: 1.5px;
	}
	#footer .sp_area img{
		display: block;
		margin: 0 auto;
		width:53%;
		height: auto;
	}
	#footer .footerlist {
		display: block;
		width: 100%;
	}
	#footer .sp_area .footersns {
		position: relative;
		display: flex;
		justify-content: center;
		border-top: 1px solid #e1e1e1;
		gap: 20px;
		padding: 20px 7.5%;
	}
	#footer .sp_area .footersns img {
		width: 100%;
		height: auto;
	}
	#footer .sp_area .footersns li:last-child a{
		    padding-left: 10px;
	}


}


/* 共通調整等 */
/*.tit_t {
	width: 100%;
}
#subnav {
	width: 100%;
	max-width: 1080px;
}
#subnav ul {
	padding-left: 10em;
	padding-right: 10px;
}
.tx_area {
	width: calc(100% - 100px - 5%)!important;
	max-width: 980px;
}


@media screen and (max-width: 785px) {
	#subnav {
		width: 95%;
	}
	.tx_area {
		width: calc(95% - 8vw)!important;
	}
}*/

/* TOPページ */
@media screen and (max-width: 1280px) {
	#aboutus *.pc_area,
	#service *.pc_area,
	#company_recruit *.pc_area {
		display: block!important;
	}
	#aboutus *.sp_area,
	#service *.sp_area,
	#company_recruit *.sp_area {
		display: none!important;
	}
}  
@media screen and (max-width: 785px) {
	#aboutus *.pc_area,
	#service *.pc_area,
	#company_recruit *.pc_area {
		display: none!important;
	}
	#aboutus *.sp_area,
	#service *.sp_area,
	#company_recruit *.sp_area {
		display: block!important;
	}

}  


/* バナー */
.banner{
	width: calc(100% - 38px);
	max-width: 1080px;
	margin: 0 auto;
	padding: 100px 19px;
}
.bnr_ar {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.bnr_ar li {
	width: calc(100% / 4 - 3.8px);
	padding: 0;
}
.banner li a {
	display: inline-block;
	width: 100%;
	height: 100%;
}
.banner img {
	display: inline-block;
	width: 100%;
	height: auto;
}
@media screen and (max-width: 785px) {
	.banner{
		padding: 7vw 0;
	}
	.bnr_ar {
		display: flex;
		gap: 20px;
		width: 100%;
	}
	.bnr_ar li {
		width: 100%;
	}
}
/* animation */
.fadeIn {
  transition: opacity 0.75s ease;
  opacity: 0;
}
.fadeIn.animated {
  opacity: 1;
}

img.pdf_icon {
	width: 32px;
	height: auto;
	max-width: 32px;
}