@charset "utf-8";

/* Contents
 * ****************************
 *
 * 1: general style
 * 2: body
 * 3: container
 * 4: header
 * 5: content
 * 6: navi
 * 7: footer
 *
 * ****************************
 */


/*
======= 1: general style =======
*/
* {
	margin: 0;
	padding: 0;
	font-style: normal;
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

html {
	width: 100%;
	height: 100%;
	font-size: 10px;
}
::selection {
	color: #FFF;
	background: #0081CC; /* Safari */
}
::-moz-selection {
	color: #FFF;
	background: #0081CC; /* Firefox */
}

/*
======= 2: body =======
*/
body {
	color: #333;
	height: 100%;
	overflow-x: hidden;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.5rem;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	line-height: 2;
}
@media screen and (max-width:1180px) {
	body {
		min-width: inherit;
	}
}
@media screen and (max-width:736px) {
	body {
		font-size: 1.2rem;
		line-height: 1.8;
		font-feature-settings: normal;
		letter-spacing: normal;
		background: #81B4E7;
	}
}

/*
======= 3: container =======
*/
#container {
	background: url(https://next1-one.jp/img/common/bgimg01.gif) repeat 50% 0;
}
@media screen and (max-width:1180px) {
	#container {
	}
}

/*
======= 4: header =======
*/
.header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	max-width: 1120px;
	height: 80px;
	margin: auto;
	background: #FFF;
	display:flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding:20px 30px;
	box-shadow: 0 2px 2px 0px rgba(0,0,0,0.05);
}

.header_logo{
	width:140px;
	display: block;
}

.header_menu{
  position: relative;
  display: inline-block;
}

.header_menu::after{
  position: absolute;
  bottom: 2px;
  left: 0;
  content: '';
  width: 100%;
  height: 4px;
  background:#0C72D8;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}

.header_menu:hover::after {
  bottom: -4px;
  opacity: 1;
  visibility: visible;
}

.sateiLink{
	position:fixed;
	bottom:20px;
	right:20px;
	z-index: 100;
	padding:5px 20px;
	background:;
	border:2px solid #DC990A;
	background:#fff;
	font-weight:bold;
	font-size:150%;
	box-shadow: 0 0 20px #ddd;
	transition:0.3s;
}

.sateiLink:hover{
	transition:0.3s;
	box-shadow: 0 0 20px #DC990A;
}

.headerTel{
	display:block;
line-height:1.2;
background:#0C72D8;
color:#fff;
padding:5px 10px;
border-radius:10px;
transition:0.3s;
}

.headerTel:hover{
	background:#fff;
	box-shadow:0 0 10px #ddd;
	color:#0C72D8;
	transition:0.3s;
}
.headerTel_no{
	display: block;
	font-size:130%;
	white-space: nowrap;
}

.mobileMenu{
	position:fixed;
	top:-100px;
	width:100%;
	box-sizing: border-box;
	padding:20px;
	left:0;
	right:0;
	margin:auto;
	z-index:99;
	background:#fff;
	text-align: center;
	display: flex;
	justify-content: space-between;
}

.bars{
	line-height:80px;
	height:20px;
	width:20px;
	margin-left:30px;
}

@media screen and (min-width:1024px) {
	.p{
		display:none;
	}
}
@media screen and (max-width:1024px) {
	.m{
		display:none;
	}

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

}

/*
======= 5: content =======
*/
#contentBox {
	width: 1120px;
	margin: auto;
	padding-bottom: 60px;
}
@media screen and (max-width:1120px) {
	#contentBox {
		width: 100%;
	}
}
@media screen and (max-width:768px) {
	#contentBox {
		width: calc(100% - 20px);
		margin: 25px auto;
		padding-bottom: 30px;
	}
}
/*
======= 6: navi =======
*/
/* [breadcrumbs] ----------*/
#breadcrumbs {
	position: relative;
	z-index: 1;
}
#breadcrumbs ul {
	color: #0C72D8;
	padding: 25px 0 35px;
	font-size: 1.4rem;
	letter-spacing: -0.4em;
}
#breadcrumbs li {
	display: inline-block;
	letter-spacing: normal;
}
#breadcrumbs li::after {
	content: "＞";
	display: inline-block;
	padding: 0 1rem;
	font-size: 1rem;
}
#breadcrumbs li:last-child {
	color: #666;
}
#breadcrumbs li:last-child::after {
	content: none;
}
/**/
#breadcrumbs li a {
	color: inherit;
	position: relative;
	display: inline-block;
	line-height: 1.5;
}
#breadcrumbs li a:hover {
	color: #0C72D8;
}
/*
#breadcrumbs li a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #0C72D8;
	transition: all 0.3s;
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}
#breadcrumbs li a:hover::after {
	width: 100%;
}
*/
@media screen and (max-width:1120px) {
/* [breadcrumbs] ----------*/
	#breadcrumbs ul {
		padding: 25px 20px 35px;
	}
}
@media screen and (min-width:769px) {
/* [gNavi] ----------*/
	#gNavi {
		position: absolute;
		top: 0;
		right: 0;
	}
/**/
	#gNavi ul {
		position: relative;
		display: flex;
		height: 80px;
	}
	#gNavi ul .marker {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
		width: 120px;
		height: 5px;
		opacity: 0;
		background: #1879DB;
		transition: all 0.3s;
	}
	#gNavi li.gnHome:hover ~ .marker,
	#pageHome ul .marker {
		opacity: 1;
		transform: translateX(0);
	}
	#gNavi li.gnCompany:hover ~ .marker,
	#pageCompany ul .marker {
		opacity: 1;
		transform: translateX(120px);
	}
	#gNavi li.gnService:hover ~ .marker,
	#pageBusiness ul .marker {
		opacity: 1;
		transform: translateX(240px);
	}
	#gNavi li.gnFactoring:hover ~ .marker,
	#pageMaterials ul .marker {
		opacity: 1;
		transform: translateX(360px);
	}
	#gNavi li.gnJirei:hover ~ .marker,
	#pageWork ul .marker {
		opacity: 1;
		transform: translateX(480px);
	}
	#gNavi li.gnFaq:hover ~ .marker,
	#pageRecruit ul .marker {
		opacity: 1;
		transform: translateX(600px);
	}
/**/
	#gNavi li {
		position: relative;
		width: 120px;
		cursor: pointer;
		text-align: center;
		vertical-align: middle;
	}
/**/
	#gNavi .gnContact {
		font-size: 1.4rem;
		background: #0E73D9;
		transition: background 0.3s;
	}
	#gNavi .gnContact:hover,
	#pageContact #gNavi li.gnContact {
		background:#ff9900;
	}
/**/
	#gNavi li a {
		position: absolute;
		top: 50%;
		display: block;
		width: 100%;
		transform: translateY(-50%);
		transition: color 0.3s;
	}
	#gNavi li:not(.gnContact) a {
		line-height: 1.3;
		border-left: 1px solid #C2C2C2;
		transform: skewX(-12deg) translateY(-50%);
	}
	#gNavi .gnContact a {
		display: block;
		font-style: italic;
	}
	#gNavi .gnContact a::before,
	#gNavi .gnContact a::after {
		content: "";
		display: block;
		width: 19px;
		height: 15px;
		margin: auto;
		opacity: 1;
		background: url(https://next1-one.jp/img/common/icon_contact01_o.png) no-repeat 0 0;
		background-size: cover;
		transition: opacity 0.3s;
	}
	#gNavi .gnContact a::before {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		opacity: 0;
		background: url(https://next1-one.jp/img/common/icon_contact01.png) no-repeat 0 0;
	}
	#gNavi .gnContact:hover a::before,
	#pageContact #gNavi li.gnContact a::before {
		opacity: 1;
	}
	#gNavi .gnContact:hover a::after,
	#pageContact #gNavi li.gnContact a::after {
		opacity: 0;
	}
	#gNavi li:hover a,
	#pageCompany #gNavi li.gnCompany a,
	#pageBusiness #gNavi li.gnService a,
	#pageMaterials #gNavi li.gnFactoring a,
	#pageWork #gNavi li.gnJirei a,
	#pageRecruit #gNavi li.gnFaq a {
		color: #1879DB;
	}
	#gNavi .gnContact:hover a,
	#pageContact #gNavi li.gnContact a {
		color: #FFF;
	}
/* [btnMenu] ----------*/
	#btnMenu {
		display: none;
	}
}
@media only screen and (max-device-width:1024px) {
	#gNavi ul .marker,
	#gNavi li {
		width: 110px;
	}

	#gNavi li.gnHome:hover ~ .marker,
	#pageHome ul .marker {
		transform: translateX(0);
	}
	#gNavi li.gnCompany:hover ~ .marker,
	#pageCompany ul .marker {
		opacity: 1;
		transform: translateX(110px);
	}
	#gNavi li.gnService:hover ~ .marker,
	#pageBusiness ul .marker {
		opacity: 1;
		transform: translateX(220px);
	}
	#gNavi li.gnFactoring:hover ~ .marker,
	#pageMaterials ul .marker {
		opacity: 1;
		transform: translateX(330px);
	}
	#gNavi li.gnJirei:hover ~ .marker,
	#pageWork ul .marker {
		opacity: 1;
		transform: translateX(440px);
	}
	#gNavi li.gnFaq:hover ~ .marker,
	#pageRecruit ul .marker {
		opacity: 1;
		transform: translateX(550px);
	}
}
@media screen and (max-width:768px) {
/* [breadcrumbs] ----------*/
	#breadcrumbs ul {
		font-size: 0.8rem;
	}
	#breadcrumbs li + li:before {
		padding: 0 0.3rem;
	}
	#breadcrumbs li a:after {
		content: none;
	}
/* [gNavi] ----------*/
	#gNavi > ul {
		position: absolute;
		top: 100%;
		z-index: 30;
		width: 100%;
		background: #FFF;
		transition: opacity 0.3s;
	}
	#gNavi li {
		position: relative;
		width: auto;
		opacity: 0;
	}
	#btnMenu.active + ul li {
		opacity: 1;
	}
	#gNavi li::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		width: 95%;
		margin: auto;
		border-bottom: 0.5px solid #CCC;
	}
	#gNavi li a {
		color: inherit;
		position: relative;
		display: block;
		padding: 0 20px;
		opacity: 0;
		line-height: 0;
		pointer-events: none;
		box-sizing: border-box;
		transition: padding 0.3s ease, line-height 0.3s, opacity 0.2s ease, background 0.3s;
	}
	#btnMenu.active + ul li a {
		padding: 10px 20px;
		opacity: 1;
		line-height: inherit;
		pointer-events: auto;
	}
	#gNavi li a::after {
		color: #0E73D9;
		content: "\f105";
		position: absolute;
		top: 50%;
		right: 20px;
		font-family: FontAwesome;
		font-size: 1.8rem;
		font-weight: bold;
		transform: translateY(-50%);
	}
/* [btnMenu] ----------*/
	#btnMenu,
	#btnMenu span,
	#btnMenu::before,
	#btnMenu::after {
		display: inline-block;
		transition: all 0.3s;
		box-sizing: border-box;
	}
	#btnMenu {
		position: fixed;
		top: 15px;
		right: 15px;
		width: 25px;
		height: 20px;
	}
	#btnMenu span,
	#btnMenu::before,
	#btnMenu::after {
		position: absolute;
		right: 0;
		width: 25px;
		height: 4px;
		overflow: hidden;
		font-size: 0;
		background-color: #888;
	}

	#btnMenu::before,
	#btnMenu::after {
		content: "";
	}
	#btnMenu::before {
		top: 0;
	}
	#btnMenu span {
		top: calc(50% - 2px);
	}
	#btnMenu::after {
		bottom: 0;
	}
	#btnMenu.active::before {
		-webkit-transform: translateY(8px) rotate(-45deg);
		transform: translateY(8px) rotate(-45deg);
	}
	#btnMenu.active span {
		opacity: 0;
	}
	#btnMenu.active::after {
		-webkit-transform: translateY(-8px) rotate(45deg);
		transform: translateY(-8px) rotate(45deg);
	}
/* [overflow] ----------*/
	#overflow {
		position: fixed;
		top: -100%;
		right: -100%;
		bottom: -100%;
		left: -100%;
		z-index: 99;
		opacity: 0;
		pointer-events: none;
		background: rgba(14,115,217,0.4);
		transition: opacity 0.4s;
	}
	#overflow.active {
		opacity: 1;
		pointer-events: auto;
	}
}
@media screen and (max-width:768px) {
/* [breadcrumbs] ----------*/
	#breadcrumbs {
		display: none;
	}
}

/*
======= 7: footer =======
*/
/* [footer] ----------*/
footer {
	padding-bottom: 20px;
	text-align: center;
	background: #FFF;
}
/**/
footer h1 {
}
/* [address] */
.address {
}
/* [fNavi] */
/* fNavi01 */
.fNavi01 {
	padding: 8px 0;
	letter-spacing: -0.4em;
	border-bottom: 1px solid #DDD;
}
.fNavi01 li {
	display: inline-block;
	padding: 0 10px;
	font-size: 1.2rem;
	letter-spacing: normal;
	line-height: 1.3;
}
.fNavi01 li + li {
	border-left: 1px solid #DDD;
}
/**/
.fNavi01 a {
	color: #0C72D8;
}
/* fNavi02 */
.fNavi02 {
	padding: 20px 0;
	letter-spacing: -0.4em;
}
.fNavi02 li {
	display: inline-block;
	padding: 0 10px;
	letter-spacing: normal;
	vertical-align: middle;
}
/**/
.fNavi02 li.contact a {
	display: block;
	width: 460px;
	font-weight: bold;
	line-height: 50px;
	border: 1px solid #DDD;
	border-radius: 5px;
	box-sizing: border-box;
	transition: background 0.3s;
}
.fNavi02 li.contact a:hover {
	background: #DDD;
}
.fNavi02 li.contact a::before {
	content: "";
	display: inline-block;
	width: 19px;
	height: 15px;
	margin-right: 10px;
	vertical-align: middle;
	background: url(https://next1-one.jp/img/common/icon_contact01_o.png) no-repeat 0 0;
}
/**/
.fNavi02 li.tel {
	padding-left: 35px;
	background: url(https://next1-one.jp/img/common/icon_tel01.png) no-repeat 10px 50%;
}
.fNavi02 li.tel strong {
	display: inline-block;
	margin-right: 10px;
	font-size: 2.4rem;
}
.fNavi02 li.tel span {
	font-size: 1.2rem;
	vertical-align: initial;
}
/* [fLogo] ----------*/
#fLogo {
	display: inline-block;
	margin-right: 15px;
	vertical-align: middle;
}
#fLogo + div {
	display: inline-block;
	line-height: 1.5;
	text-align: left;
	vertical-align: middle;
}
#fLogo + div * {
	font-size: 1.3rem;
}
/* [btnPagetop] ----------*/
#btnPagetop a {
	color: #FFF;
	position: relative;
	display: block;
	padding: 30px 0 3px;
	font-size: 9px;
	text-align: center;
	background: #BBB;
	transition: background 0.3s;
}
#btnPagetop a:hover {
	background: #ADADAD;
}
#btnPagetop a::before {
	content: "";
	position: absolute;
	top: 15px;
	right: 0;
	left: 0;
	width: 25px;
	height: 25px;
	margin: auto;
	border-top: 2px solid #FFF;
	border-left: 2px solid #FFF;
	transform: rotate(45deg);
}
@media screen and (max-width:768px) {
/* [footer] ----------*/
	footer {
		text-align: center;
		background: #FFF;
	}
/* [innerBox] */
	footer .innerBox {
		padding: 0 10px 20px;
		text-align: left;
	}
/* [fNavi] */
/* fNavi01 */
	.fNavi01 {
		padding: 8px 0;
		letter-spacing: -0.4em;
		border-bottom: 1px solid #DDD;
	}
	.fNavi01 li {
		display: inline-block;
		padding: 0 8px;
		font-size: 1.2rem;
		letter-spacing: normal;
		line-height: 1.3;
	}
	.fNavi01 li + li {
		border-left: 1px solid #DDD;
	}
/**/
	.fNavi01 a {
		color: #0C72D8;
	}
/* fNavi02 */
	.fNavi02 {
		padding: 20px 10px;
		letter-spacing: inherit;
	}
	.fNavi02 li {
		padding: 0;
	}
/**/
	.fNavi02 li.contact {
		margin-bottom: 10px;
	}
	.fNavi02 li.contact a {
		display: block;
		width: 100%;
		max-width: 320px;
		margin: auto;
		padding: 0 20px;
		font-weight: bold;
		line-height: 30px;
		border: 1px solid #DDD;
		border-radius: 5px;
		box-sizing: border-box;
	}
	.fNavi02 li.contact a::before {
		content: "";
		display: inline-block;
		width: 12px;
		height: 10px;
		margin-right: 10px;
		vertical-align: middle;
		background: url(https://next1-one.jp/img/common/icon_contact01_o.png) no-repeat 0 0;
		background-size: contain;
	}
/**/
	.fNavi02 li.tel {
		padding-left: 16px;
		background: url(https://next1-one.jp/img/common/icon_tel01.png) no-repeat 0 0.6em;
		background-size: 12px auto;
	}
	.fNavi02 li.tel strong {
		margin-right: 0;
		font-size: 1.4rem;
	}
	.fNavi02 li.tel span {
		font-size: 1rem;
	}
/* [fLogo] ----------*/
	#fLogo {
		display: inline-block;
		height: 26px;
		margin-right: 5px;
		vertical-align: middle;
	}
	#fLogo img {
		width: auto;
		height: 100%;
	}
/**/
	#fLogo + div {
		display: inline-block;
		line-height: 1.5;
		text-align: left;
		vertical-align: middle;
	}
	#fLogo + div * {
		font-size: 1.2rem;
	}
/* [btnPagetop] ----------*/
	#btnPagetop a {
		color: #FFF;
		position: relative;
		display: block;
		padding: 20px 0 3px;
		font-size: 7px;
		text-align: center;
		background: #BBB;
	}
	#btnPagetop a::before {
		content: "";
		position: absolute;
		top: 10px;
		right: 0;
		left: 0;
		width: 15px;
		height: 15px;
		margin: auto;
		border-top: 2px solid #FFF;
		border-left: 2px solid #FFF;
		transform: rotate(45deg);
	}
}