@charset "UTF-8";

/*=============================================

#page_top

===============================================*/

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 10px;
  bottom: 80px;
  background: #000;
	border: solid 1px #fff;
  opacity: 0.86;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
	line-height: 1;
}


/*=============================================

common class

===============================================*/
.w100 { width: 100%!important; }
.w90 { width: 90%!important; }
.w80 { width: 80%!important; }


.mb0 { margin-bottom: 0 !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }

.mt0 { margin-top: 0px !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt80 { margin-top: 80px !important; }
.mt100 { margin-top: 100px !important; }

.al_left { text-align: left !important; }
.al_right { text-align: right !important; }
.al_center { text-align: center !important; }


.f_pink { color: #ed1e79; }
.f_orange { color: #F7931E; }
.f_green { color: #39b54a; }
.f_blue { color: #00B1C5; }
.f_red { color: #ff0000; }

.f_big { font-size: 1.25em; }

.f_mincho {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}


.marker_pink {
	background: linear-gradient(transparent 40%, #f9bbc0 0%);
	padding: 0 3px; margin: 0 3px;
}
.marker_pink2 {
	background: linear-gradient(transparent 70%, #f9bbc0 0%);
	padding: 0 3px; margin: 0 3px;
}
.marker_pink3 {
	background: linear-gradient(transparent 40%, #f9e5e5 0%);
	padding: 0 3px; margin: 0 3px;
}
.marker_yellow {
	background: linear-gradient(transparent 80%, #f4e7bd 0%);
	padding: 0 3px; margin: 0 3px;
}
.marker_green {
	background: linear-gradient(transparent 80%, #b6e0ba 0%);
	padding: 0 3px; margin: 0 3px;
}

.sp { display: none;} 
.pc { display: block; }
@media screen and (max-width: 640px){
	.sp { display: block;} 
	.pc { display: none; }	
}
/*=============================================

00. 共通

===============================================*/
.flex { display: flex; flex-wrap: wrap; }
.flex_s_b {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.flex_s_a {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.flex_c {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.flex_start {
	align-items: flex-start;
}

.align_c { align-items: center; }
.box_1_1 {
	width: 100%;
}
.box_1_2 {
	width: 48%; margin-bottom: 10px;
}
.box_1_3 {
	width: 32%; margin-bottom: 10px;
}
.box_2_3 {
	width: 66%;
}
.box_1_4 {
	width: 25%;
}
.box_3_4 {
	width: 73%;
}
.box_1_5 {
	width: 20%;
}
.box_4_5 {
	width: 78%;
}
.box_3_7 {
	width: 41.71%;
}
.box_4_7 {
	width: 56.28%;
}


@media screen and (max-width: 640px){
	.box_1_2,
	.box_1_3,
	.box_2_3,
	.box_1_4,
	.box_3_4,
	.box_1_5,
	.box_4_5,
	.box_3_7,
	.box_4_7 {
		width: 100%; margin-bottom: 10px;
	}
}

/*=============================================

main

===============================================*/
main#contents {
	padding: 100px 0 0;
}
main#contents .inner {
	width: 95%; max-width: 1060px;
	margin: 0 auto; padding: 0;
	
}

@media screen and (max-width: 768px){
	main#contents {
		padding: 65px 0 0;
	}
}


/*=============================================

404

===============================================*/
.error404 {
	background: #000 url("../images/bg_index.png") center top;
	background-size: auto 100%;
}
.error404 footer {
	background-color: rgba(255,255,255,.9);
}
.error404 .index__bnr_area {
	background-color: rgba(0,0,0,.9);
}
.wrap_404 {
	text-align: center;
	position: relative;
	height: 100%;
}
.wrap_404 .inner {
	padding: 200px 0;
}
.wrap_404 h1 {
	color: #ccc;
	font-size: 5em;
	line-height: 2;
}

@media screen and (max-width: 640px){
	.wrap_404 .inner {
		padding: 150px 0;
	}	
	.wrap_404 h1 {
		font-size: 3em;
		line-height: 1.5;
	}
}

/*==========================================================================================

SLD

============================================================================================*/
.sld {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 300px;
	background-image: url("../images/sld_business.jpg");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;	
}

body.product-catalog .sld,
body.lease-catalog .sld,
body.contact .sld,
body.single .sld {
	text-align: center;
	height: 200px;
	background-color: #fefefe;
	background-image: none;
	
}


h1.head_sld {
	text-align: center;
	line-height: 1;
	display: block;
	width: 100%;
	color: #fff;
	letter-spacing:.2em;
	font-size: 2.4em;
	font-weight: 500;
}
h1.head_sld .eng {
	color: #fff;
	font-size: .5em;
	line-height: 1;
	display: block;
	margin-top: 1em;
	font-weight: 700;
}




body.product-catalog .sld h1.head_sld,
body.lease-catalog .sld h1.head_sld, 
body.contact .sld h1.head_sld,
body.single .sld h1.head_sld {
	text-align: center;
	color: #333;
}
body.product-catalog .sld h1.head_sld .eng,
body.lease-catalog .sld h1.head_sld .eng,
body.contact .sld h1.head_sld .eng,
body.single .sld h1.head_sld .eng {
	color: #63A1DD;
	font-size: .65em;
	line-height: 1;
	display: block;
	margin-top: 10px;
	font-weight: 700;
}


/*==========================================================================================

single.php

============================================================================================*/
#news h1 {
	padding: .5em 0;
	border-bottom: solid 1px #ccc;
}



/*==========================================================================================

category.php

============================================================================================*/
.tbl_news {
	width: 100%;
	border-collapse: separate;
	margin: 1em auto 5em;
}
.tbl_news:first-of-type {
	margin-top: 0;
}
.tbl_news th,
.tbl_news td {
	border-bottom: solid 1px #dadada;
	padding: 1em 1em;
}
.tbl_news th {
	border-bottom: solid 2px  #eee;
	color: #fff;
	font-weight: bold;
	width: 25%;
}
.tbl_news td {
	background-color: #FFFFFF;
}



/*==========================================================================================

-catalog

============================================================================================*/
.btn_area {
	display: block;
	padding: 3em 0;
	text-align: center;
}
a.btn_box {
	border: solid 2px #999;
	display: inline-block;
	padding: 16px 50px;
	position: relative;
	margin: 0 auto 3em;
	text-decoration: none;
	transition: .3s;
}
a.btn_box:hover {
	transform: scale(1.1,1.1);
}
a.btn_box.pdf::after {
  content: "";
	background-image: url("https://npspump.com/wp-content/themes/nps/images/icon_pdf.png");
	background-size: cover;
  width: 20px;
  height: 25px;
  position: absolute;
  top: 50%; right: 20px; transform: translateY(-50%);
}

.intro_catalog {
	padding: 40px 10px;
	background-image: url("https://npspump.com/wp-content/themes/nps/images/bg_01.png");
	/* background-size: cover; */
	background-attachment: fixed;
	color: #fff;
}


/*==========================================================================================

business

============================================================================================*/
.intro_business {
	padding: 40px 10px;
	background-image: url("https://npspump.com/wp-content/themes/nps/images/bg_01.png");
	/* background-size: cover; */
	background-attachment: fixed;
	color: #fff;
	margin: 0 0 3em;
}
.intro_business .flex_s_b {
	align-items:center;
}
.intro_business h2 {
	font-size: 2.0em;
	font-weight: 400;
	border-left:solid 3px #fff;
	padding:.5em 0 .5em 1em;
	letter-spacing: .1em;
	width: 25%;
}
.intro_business p {
	width: 70%;
}
.intro_business h2.w100 {
	width: 100%;
}
.intro_business_0 {
	border-top: solid 1px #ccc;
	font-size: 1.125em;
	padding: 1em;
	color: #666;
}

section.business_wrap {
	margin: 0 auto 5em;
}

.business_block {
	/* display: flex;
	justify-content: space-between;
	flex-wrap: wrap; */
	margin: 0 2% 3em 0 !important;
	width: 31%;
}
.business_block:nth-of-type(3n) {
	margin: 0 0 3em 0 !important;
}
.business_block .w_box {
	width: 100%;
}
.business_block .txt_box,
.business_block .img_box {
	
}
.business_block .txt_box h3 {
	font-size: 1.5em;
	font-weight: 500;
	border-bottom: solid 2px #ccc;
	position: relative;
	padding: .25em;
	margin: 0 0 .5em;
}
.business_block .txt_box h3 small {
	font-size: .65em;
}
.business_block .txt_box h3::after {
	content: "";
	background-color:#63A1DD;
	position: absolute; left: 0; bottom: -2px;
	width: 4em; height: 2px;
}


@media screen and (max-width: 768px) {
	.intro_business h2 {
		padding:.25em 0 .25em 1em;
		margin-bottom: 10px;
		width: 100%;
	}
	.intro_business p {
		width: 100%;
	}	
}

.business_wrap_2 {
	width: 95%; max-width: 1060px;
	margin: 0 auto 4em; padding: 30px 30px;
	background-color: #fff;
	
}
.business_wrap_2 .inner {
	width: 100% !important;
	padding: 20px 20px !important;
	
}
.business_wrap_2 h3 {
	font-size: 1.5em;
	font-weight: 500;
	border-bottom: solid 2px #ccc;
	position: relative;
	padding: .25em;
	margin: 0 0 .5em;
}
.business_wrap_2 h3::after {
	content: "";
	background-color:#63A1DD;
	position: absolute; left: 0; bottom: -2px;
	width: 4em; height: 2px;
}
.business_wrap_2 p {
	padding: 0 1em;
}
.tbl_business {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1em;
}
.tbl_business:first-of-type {
	margin-top: 0;
}
.tbl_business th,
.tbl_business td {
	border: solid 1px #dadada;
	padding: 1em 1em;
}
.tbl_business th {
	background-color: #63A1DD;
	color: #fff;
	font-weight: normal;
	width: 25%;
}
.tbl_business td {
	background-color: #FFFFFF;
}
.tbl_business ul { margin: 0 0 0 1em; }
.tbl_business li {
	list-style: disc;
	list-style-position: outside;
}

@media screen and (max-width: 768px) {
	.business_wrap_2 {
		width: 100%;
		padding: 0 0;
	}	
}


/*==========================================================================================

about

============================================================================================*/
.intro_about {
	padding: 40px 10px;
	background-image: url("https://npspump.com/wp-content/themes/nps/images/bg_01.png");
	/* background-size: cover; */
	background-attachment: fixed;
	color: #fff;
	margin: 0 0 3em;
}

.intro_about h2 {
	font-size: 1.75em;
	font-weight: 400;
	padding: 0 0 .5em;
	margin: 0 0 1em;
	letter-spacing: .1em;
	width: 100%;
	text-align: center;
	position: relative;
}
.intro_about h2::after {
	content: "";
	width: 5em; height: 3px;
	background-color: #fff;
	position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
}
.intro_about p {
	width: 100%;
	font-size: 1.125em;
	text-align: center;
}

.wrap_about {
	margin: 0 auto 5em;
}
.wrap_about h3 {
	font-size: 3.0rem;
	text-align: center;
	color: #3685D3;
	font-weight: 500;
	letter-spacing: .2em;
	margin: 0 auto 1em;
}

.tbl_about {
	width:95%; max-width: 900px;
	margin:0 auto 5em;
}
.tbl_about tr{
	border-top: 1px solid #e5e5e5;
}

.tbl_about th,
.tbl_about td {
	padding: 20px 20px;
}
.tbl_about th{
	width:25%;
	border-bottom:solid 2px #ebedf5;
	text-align: left;
}
.tbl_about td{
	border-bottom:solid 1px #ccc;
}	


@media screen and (max-width: 768px){
	.tbl_about {
	width:95%;
	}
	.tbl_about tr, .tbl_about td, .tbl_about th{
	display: block;
	width: 100%;
	line-height:2.0em;
	}
	.tbl_about th {
	background-color:#ebedf5;
		padding: 10px 20px;
	}
	.tbl_about td {
		padding: 10px 20px 20px;
	}	
}


/*==========================================================================================

recruit

============================================================================================*/
.talent {
	margin: 1em auto;
	background-color: #fff;
	border-radius: 20px;
	color: #333;
	padding: 1em 2em;
	width: 95%; max-width: 800px;
	
}

.talent li::before {
	background-image: url("https://npspump.com/wp-content/themes/nps/images/checkmark.png");
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	width: 36px; height: 36px;
	position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
.talent li {
	font-size: 1.25em;
	padding: 0 0 0 50px;
	margin: .2em auto;
	position: relative;
}

@media screen and (max-width: 768px){
	.talent {
		padding: .5em 1em;
	}
	.talent li {
		line-height: 1.4;
		margin: .4em auto;
	}
	.talent li::before {
		width: 30px; height: 30px;
		position: absolute; left: 0; top: 0; transform: translateY(0);
	}	
}


/*==========================================================================================

reason

============================================================================================*/

.wrap_reason {
	padding: 60px 0;
	position: relative;
}
.wrap_reason .intro_box {
	width: 100%;
	color: #fff;
	text-align: center;
	font-size: 1.5em;
	font-weight: 500;
	margin-bottom: 1em;
	position: absolute;
	transform: translateY(-150%);
	line-height: 1.2;
}

.wrap_reason::before {
	content: "";
	padding: 0;
	background-image: url("https://npspump.com/wp-content/themes/nps/images/bg_01.png");
	/* background-size: cover; */
	background-attachment: fixed;
	color: #fff;
	margin: 0 0 3em;
	width: 100vw;
	height: 40%;
	position: absolute; left: 0; top: 0;
	z-index: 1;
}
.wrap_reason .inner {
	margin-bottom: 5em !important;
}

.index__strong .img_box .box_1_2:nth-child(2) {
	margin-top: -30px;
}
.wrap_reason .inner { 
	max-width: 1200px !important;
	margin-top: 30px !important; background-color: #fff; z-index: 2; 
	position: relative; }
.wrap_reason .txt_box { padding: 2em 3em; }
.wrap_reason h3 { font-size: 1.4em; margin-bottom: 1em; }
.wrap_reason p { font-size: 1.125em; margin-bottom: 1em; }

.wrap_reason ol {
  position: relative;
  margin: 0;
  padding: 0 10px 0 6px;
  list-style: none;
}
.wrap_reason ol li {
	position: relative;
	margin: 0 0 1em;
	padding: 5px 0 5px 50px;
	line-height: 1.6;
	font-size: 1.25em;
}

/* ol デザイン */
.wrap_reason {
  counter-reset: li;
}
.wrap_reason li:before {
	position: absolute;
	font-weight: bold;
	counter-increment: li;
	content: counter(li) "";
	left: 0px;
	top: -1px;
	color: #fff;
	width: 40px;
	height: 40px;
	font-size: 14px;
	text-align: center;
	box-sizing: border-box;
	font-weight: 600;
	line-height: 40px;
	background: linear-gradient(70deg, #2C68A0,#639DD4);
	padding: 0;
	font-size: 1.25em;
	font-weight: bold;	
}

/* リンクデザイン */
.wrap_reason ol a {
  text-decoration: none;
  color: #333;
}
.wrap_reason ol a:hover {
  text-decoration: underline;
}


@media screen and (max-width: 768px) {
	.wrap_reason .intro_box {
		transform: translateY(-120%);
	}	
	
	.wrap_reason .inner {
		margin-bottom: 0em !important;
	}
	.wrap_reason h3 { font-size: 1.25em; margin-bottom: 1em; }
	.wrap_reason ol {
		padding: 0;
		font-size: 14px;
	}
	.wrap_reason ol li {
		margin: 0 0 1em;
		padding: 0 0 0 40px;
	}	

	.wrap_reason .img_box .box_1_2 {
		width: 48%; margin-bottom: 10px;
	}
	.wrap_reason .img_box .box_1_2:last-of-type {
		margin-top: 0;
	}
	.wrap_reason .txt_box {
		order: 1;
		padding: 2em 2em;
	}	
	.wrap_reason .img_box {
		order: 2;
	}
/* ol デザイン */
.wrap_reason {
  counter-reset: li;
}
.wrap_reason li:before {
	position: absolute;
	font-weight: bold;
	counter-increment: li;
	content: counter(li) "";
	left: 0px;
	top: -1px;
	color: #fff;
	width: 30px;
	height: 30px;
	font-size: 14px;
	text-align: center;
	box-sizing: border-box;
	font-weight: 600;
	line-height: 30px;
	background: linear-gradient(70deg, #2C68A0,#639DD4);
	padding: 0;
	font-size: 1.25em;
	font-weight: bold;	
}
	
}



/*==========================================================================================

contact

============================================================================================*/
/*ContactForm7カスタマイズ*/
table.CF7_table{
	width:95%; max-width: 900px;
	margin:2em auto 1em;
}

table.CF7_table tr{
	border-top: 1px solid #e5e5e5;
}


.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}

/*入力欄*/
.CF7_table input, .CF7_table textarea {
	border: 1px solid #d8d8d8;
	padding: 1em 1em;
}

.CF7_table ::placeholder {
	color:#797979;
}
/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #f79034;/*オレンジ*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #bdbdbd;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th,
	.CF7_table td {
		padding: 20px 20px;
	}
	.CF7_table th{
	width:25%;
	border-bottom:solid 2px #ebedf5;
		text-align: left;
	}
	.CF7_table td{
	border-bottom:solid 1px #ccc;
	}	
}
/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:95%;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2.5em;
	}
	.CF7_table th{
	background-color:#ebedf5;
	}
}
/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#f79034;/* オレンジ*/
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	letter-spacing: .2em;
	margin:0 auto 5em;
	padding: .5em 2em;
	border-radius: 50vh;
}

.CF7_btn{
	text-align:center;
	margin-top:20px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}



/*==========================================================================================

single.php

============================================================================================*/
.inner#news p {
	padding: 0 2em 1em;
}
.inner#news p.post_data {
	text-align: right;
	margin: .5em 0 2em;
	padding: 0;
}
ul.wrap_post_menu {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 2em 0;
	border-top: dotted 1px #ccc;
	margin: 4em 0 0;
}
ul.wrap_post_menu li.prev,
ul.wrap_post_menu li.next {
	width: 33%;
}
ul.wrap_post_menu li.next {
	text-align: right;
}