@charset "UTF-8";
/*
 Theme Name:   KPSHD official site
 Description:  KPSHD official WebSite Theme
 Version:      1.0.0
*/

/*
=======================================
  共通設定
=======================================
*/
/*  HTML Reset  */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
/*  /HTML Reset  */

@font-face {
	font-family: 'Noto Sans JP';
	src: url('/assets/fonts/NotoSansJP-Regular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Noto Sans JP';
	src: url('/assets/fonts/NotoSansJP-Bold.otf') format('opentype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Overpass';
	src: url('/assets/fonts/Overpass-Black.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Overpass';
	src: url('/assets/fonts/Overpass-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Overpass';
	src: url('/assets/fonts/Overpass-Light.ttf') format('truetype');
	font-weight: lighter;
	font-style: normal;
}

@keyframes animeFadeLeft {
	from {
		transform: translateX(-100%);
		opacity: 1;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.anime-fade-left {
	animation-name: animeFadeLeft;
	animation-duration: 2.0s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes animeFadeRight {
	from {
		transform: translateX(100%);
		opacity: 1;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.anime-fade-right {
	animation-name: animeFadeRight;
	animation-duration: 2.0s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes animeFadeUp {
	from {
		opacity: 0;
		transform: translateY(100%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.anime-fade-up {
	animation-name: animeFadeUp;
	animation-duration: 2.0s;
	animation-fill-mode: forwards;
	animation-delay: 2.0s;
	opacity: 0;
}

@keyframes animeFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.anime-fade-in {
	animation-name: animeFadeIn;
	animation-duration: 1.0s;
	animation-fill-mode: forwards;
	animation-delay: 4.0s;
	opacity: 0;
}

html, body {
	margin:0; padding:0;
}
body {
	font-family: 'Overpass', 'Noto Sans JP', sans-serif;
	line-height:1.41;
	letter-spacing: 1px;
	position: relative;
/*	background-image: url('/kps_news_990x1565.png'); */
/*	background-repeat: no-repeat; */
/*	background-position: top; */
/*	opacity: 0.6; */
}

a {
	cursor: pointer;
	text-decoration: none;
	color: black;
}

ul{
	list-style: none;
}

.clearfix:after {
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}

.disabled {
	pointer-events: none;
	background-color: gray !important;
}

.non-display {
	display: none !important;
}

.non-display2 {
	display: none !important;
}

* html .clearfix {
	height: auto;
	overflow: hidden;
}

.wrapper {
	width: 990px;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
}

/* 会社毎の色 */
:root {
	--color-holdings: #3cc8e1;
	--color-fulfillment: #fc9f3c;
	--color-products: #3bc4a2;
	--color-solutions: #cb67d1;
	--color-systems: #929292;
}

.fg-color-holdings {
	color: var(--color-holdings) !important;
}
.fg-color-fulfillment {
	color: var(--color-fulfillment) !important;
}
.fg-color-products {
	color: var(--color-products) !important;
}
.fg-color-solutions {
	color: var(--color-solutions) !important;
}
.fg-color-systems {
	color: var(--color-systems) !important;
}

.bg-color-holdings {
	background-color: var(--color-holdings) !important;
}
.bg-color-fulfillment {
	background-color: var(--color-fulfillment) !important;
}
.bg-color-products {
	background-color: var(--color-products) !important;
}
.bg-color-solutions {
	background-color: var(--color-solutions) !important;
}
.bg-color-systems {
	background-color: var(--color-systems) !important;
}

.border-color-holdings {
	border-color: var(--color-holdings) !important;
}
.border-color-fulfillment {
	border-color: var(--color-fulfillment) !important;
}
.border-color-products {
	border-color: var(--color-products) !important;
}
.border-color-solutions {
	border-color: var(--color-solutions) !important;
}
.border-color-systems {
	border-color: var(--color-systems) !important;
}

.ul-color-holdings > li:before {
	color: var(--color-holdings) !important;
}
.ul-color-fulfillment > li:before {
	color: var(--color-fulfillment) !important;
}
.ul-color-products > li:before {
	color: var(--color-products) !important;
}
.ul-color-solutions > li:before {
	color: var(--color-solutions) !important;
}
.ul-color-systems > li:before {
	color: var(--color-systems) !important;
}

.btn-white {
	background-color: #3cc8e1;
	color: #ffffff;
	border-radius: 2px;
	font-weight: bold;
	font-size: 100%;
	text-align: center;
}

.btn-black {
	background-color: #3cc8e1;
	color: black;
	border-radius: 2px;
	font-weight: bold;
	font-size: 100%;
	text-align: center;
}

.fg-color-gray {
	color: gray;
}

/*
=======================================
  ヘッダー用スタイル
=======================================
*/

#header {
	overflow: hidden;
}

#header-inner {
	padding-top: 40px;
	width: 100%;
	height: 100px;
	background-image: url('/assets/images/common/bg-paper.png');
	background-color: rgba(255,255,255,0.7);
	background-blend-mode: lighten;
}

#header-row1 {
	margin-left: 94px;
	height: 100%;
}

/* ロゴ */
#header-logo {
	position: relative;
}

#header-logo > img {
	float: left;
	margin-top: 6px;
	width: 17px;
	height: 17px;
}

#header-logo > h1 {
	float: left;
	margin-left: 18px;
}

#header-logo > h1 > a > img {
	width: 170px;
	border-left: 2px solid #ccc;
	padding-left: 18px;
}

/* 言語 */
#header-nav-lang {
	margin-right: 93px;
	float: right;
	margin-top: 9px;
}

.nav-lang {
}

.lang-on {
	background-color: #3cc8e1 !important;
}

.nav-lang > ul > li {
	text-align: center;
	display: inline-block;
	background-color: #929292;
	border-radius: 20px;
	padding-top: 4px;
	font-size: 10px;
	width: 20px;
	height: 16px;
}

.nav-lang > ul > li > a {
	color: #ffffff;
	vertical-align: middle;
}

/* グローバルナビ */
#header-nav-global {margin-top: 10px;}

.nav-global {
	padding-bottom: 20px;
}

.nav-global > ul > li {
	text-align: left;
	display: inline-block;
	width: 93px;
	position: relative;
	border-bottom: 2px solid #3cc8e1;
	margin-right: 5px;
}

.nav-global > ul > li > a {
	padding: 8px 0px 6px 0px;
	display: block;
	font-weight: bold;
	font-size: 10px;
}

.nav-global > ul > .btn-recruit {
	border-bottom: none;
	line-height: 2;
	width: 113px;
	float: right;
	margin-right: 8px;
}

.nav-global > ul > .btn-contact {
	border-bottom: none;
	line-height: 2;
	width: 115px;
	float: right;
	margin-right: 92px;
}

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

@media screen and (min-width: 767px) {
}

/*
=======================================
  メイン用スタイル
=======================================
*/
.main-title-area {
	height: 290px;
	position: relative;
	background-image: url('/assets/images/common/bg-paper.png');
}

.main-title-area-pindot {
	background-image: url('/assets/images/common/bg-pindot.png');
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
}

.main-title-area-filter {
	height: 100%;
	width: 100%;
	position: absolute;
	background-color: rgba(255,255,255,0.7);
	background-blend-mode: lighten;
}

.main-title-area-inner {
/*	background-image: url('/assets/images/common/bg-pindot.png'); */
	height: 100%;
	overflow: hidden;
/*	background-color: rgba(255,255,255,0.7); */
/*	background-blend-mode: lighten; */
}

.main-title {
	text-align: center;
}

.main-title > h2 {
	font-family: 'Overpass';
	font-weight: bold;
	font-size: 68px;
	padding-top: 54px;
}

.main-title > p {
	font-family: 'Noto Sans JP';
	font-weight: bold;
	font-size: 14px;
	margin-top: -20px;
}

.main-nav-breadcrumb {
	position: absolute;
	bottom: 6px;
	right: 73px;
}

.main-nav-breadcrumb > ul {display: block;}

.main-nav-breadcrumb > ul > li {
	display: inline-block;
	margin-right: 10px;
	vertical-align: middle;
}

.main-nav-breadcrumb > ul > li > a {
	display: block;
	font-weight: normal;
	font-size: 10px;
	font-family: 'Overpass';
}

.main-nav-breadcrumb > ul > li > hr {
	width: 41px;
	border-top: 2px solid #ccc;
	margin: 0;
}

/*
=======================================
  フッター用スタイル
=======================================
*/

#footer {
	margin-top: 69px;
}

#footer-row1 {
	margin-left: 94px;
}

#footer-logo {
	position: relative;
}

#footer-logo > a > img {
	width: 127px;
	padding-left: 0px;
}

#footer-nav-lang {
	margin-right: 91px;
	float: right;
	margin-top: 4px;
}

#footer-nav-global {margin-top: 20px;}

#footer-row2 {
}

#footer-privacy {
	text-align: right;
	font-family: 'Noto Sans JP';
	font-size: 12px;
}

#footer-copyright {
	text-align: right;
	font-size: 12px;
	font-family: 'Overpass';
	font-weight: lighter;
}


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

@media screen and (min-width: 767px) {
}