/********************************************************
 Global CSS
 *******************************************************/

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0;
	padding: 0;
	line-height: 1.8;
}

html {
	scroll-behavior: smooth;
	-webkit-scroll-behavior: smooth;
	-moz-scroll-behavior: smooth;
	-ms-scroll-behavior: smooth;
	-o-scroll-behavior: smooth;
}

body a {
	text-decoration: none;
	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-ms-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;
}

body a:hover,
body .top-navi_wrap li a:hover{
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	-o-transition: 0.6s;
	transition: 0.6s;
}

body .top-navi_wrap a,
body .bottom-navi_wrap a{
	text-decoration: none;
}

body a img {
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
	backface-visibility: hidden;
}

body a img:hover {
	-ms-filter: "alpha( opacity=$number*100 )";
	filter: alpha(opacity=70);
	opacity: 0.7;
}

body::selection {
	background: rgba(28, 112, 176, 0.2);
}

body::-moz-selection {
	background: rgba(28, 112, 176, 0.2);
}

body .btn.focus,
body .btn:focus,
body img:focus{
  box-shadow: none;
	outline: none;
}

body.push {
	background: #1b1b1b;
}

.main-content{
	background: #ffffff;
	padding-top: 80px;
}

@media screen and (max-width : 991px) {
	.main-content{
		padding-top: 70px;
	}
}

/********************************************************
 Color utlities
 *******************************************************/
 /* Background Colors */
.bg-whitesmoke{
  background-color: #f2f2f2;
}

.bg-darkgray{
	background-color: #999999;
}

.bg-red{
	background-color: #ed1c24;
}

/* Text Colors */
.text-royaltyred {
  font-weight: 900;
}

/* Hover Color - Background Royaltyred */
.bg-royaltyred_hover:hover{
	color: #ffffff;
}

/* Gradient Button */
.btn-bg_gradient{
	color:#ffffff;
  padding: 5px 30px;
	font-weight: bold;
}

.btn-bg_gradient:hover{
  background: none;
}

/*Inquiry Button - Gray*/
.btn-bg_gradient_gray{
	background: linear-gradient(to right, #BFBFBF 0%, #B2B2B2 100%);
	color:#ffffff;
  border: 2px solid #BFBFBF;
  padding: 5px 30px;
	font-weight: bold;
}

.btn-bg_gradient_gray:hover{
  background: none;
  border: 2px solid #4d4d4d;
  color: #4d4d4d;
}

/* Contact Gradient Button */
.btn_swipe_gradient{
	color:#ffffff;
  width: 450px;
	padding: 14px 10px;
	font-weight: bold;
}

.btn_swipe_gradient.hvr-sweep-to-right:before{
  background: #ffffff;
}

@media screen and (max-width: 575px) {
  .btn_swipe_gradient{
    width: 90%;
    padding: 12px 10px;
  }
}


/*Inquiry Form Disable Default Style*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
		-webkit-text-fill-color: #4d4d4d;
}
button:active {
		outline: none;
    border: none;
}

/* Border Royaltyred Button */
.btn-border_royaltyred {
 padding: 12px 30px;
 font-weight: bold;
}

/********************************************************
Text utilities
 - line height
 - responsive font size
 - font family
 - button width
*******************************************************/
.lh-1 {
  line-height: 1 !important;
}

.lh-sm {
  line-height: 1.25 !important;
}

.lh-base {
  line-height: 1.5 !important;
}

.lh-md {
  line-height: 1.8 !important;
}

.lh-g {
  line-height: 2 !important;
}

.font-notosans {
	font-family: 'Noto Sans JP', sans-serif;
}

/* .font-notoserif {
	font-family: 'Noto Serif JP', serif;
} */

.fs-1 {
  font-size: calc(3.375rem + 0.3vw) !important; /* 54px */
}

.fs-2 {
  font-size: calc(1.3rem + 0.6vw)!important; /* 22px */
}

.fs-3 {
  font-size: calc(1.125rem + 0.3vw) !important; /* 20px */
}

.fs-4 {
  font-size: 1.125rem !important; /* 18px */
}

.fs-5 {
  font-size: 1rem !important; /* 16px */
}

.fs-6 {
  font-size: 0.875rem !important;  /* 14px */
}

.w-25 {
	width:15% !important;
}

.w-50 {
	width: 25% !important;
}

.w-75 {
	width: 35% !important;
}

@media screen and (max-width: 991px){
	.fs-1 {
    font-size: 5vw!important;
	}
}

@media screen and (max-width: 767px){
	.fs-1 {
    font-size: 7vw!important;
	}
}

/********************************************************
 Global - Custom Tags
 *******************************************************/
.custom-tags li{
  font-size: 12px;
}

.custom-tags li:last-child{
  margin-right: 0px!important;
}

/********************************************************
 Reset CSS
 *******************************************************/

blockquote,body,dd,div,dl,dt,
fieldset,form,h1,h2,h3,h4,h5,h6,
input,li,ol,p,td,textarea,th,ul{
	margin:0;
	padding:0;
}

address,
em,
strong,
th {
	font-style: normal;
	font-weight: normal;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th {
	text-align: left;
}

hr,
legend {
	display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
}

img,
fieldset {
	border: 0;
}

/* li {
	list-style-type: none;
} */

/********************************************************
For WordPress Admin Bar
*******************************************************/

#wpadminbar {
	-ms-filter: "alpha( opacity=$number*100 )";
	filter: alpha(opacity=20);
	opacity: 0.2;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#wpadminbar:hover {
	-ms-filter: "alpha( opacity=$number*100 )";
	filter: alpha(opacity=100);
	opacity: 1;
}

.container.content-container {
	max-width: 100%;
	width: 1250px;
	margin: 0 auto;
}

@media screen and (max-width: 991px) {
	.container.content-container {
		width: 100%;
		padding: 0 40px;
	}
}

@media screen and (max-width: 575px) {
	.container.content-container {
		padding: 0 15px;
	}
}

/********************************************************
 Top Navigation
 *******************************************************/

.top-navi_wrap {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 80px;
	background: #ffffff;
	outline: 1px solid #ffffff;
	z-index: 99999;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.top-navi_wrap.fixed-top {
	position: fixed;
	height: 65px;
	outline: 1px solid rgba(0, 0, 0, .125);
}

.top-navi_wrap .navbar-nav li a {
	padding: 10px;
}

.top-navi_wrap .top-navi_item {
	padding: 7px;
	align-self: center;
}

.top-navi_wrap .navbar-nav li .btn {
	border: 2px solid #ff7f7f;
	border-radius: 100px;
	padding: 5px 24px;
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	-o-transition: 0.6s;
	transition: 0.6s;s
}

.top-navi_ncom_logo img {
	width: 220px;
}

.top-navi_wrap .top-navi_addtnl_wrap {
	display: inline-block;
}

.top-navi_wrap .top-navi_addtnl_item {
	display: table-cell;
	vertical-align: middle;
}

.top-navi_wrap .top-navi_fujitsu_logo img {
	width: 80px;
}

.top-navi_wrap .top-navi-cart p {
	vertical-align: middle;
}

.top-navi_wrap .top-navi-cart p i {
	font-size: 25px;
}

.top-navi_wrap .cart-text {
	width: 85px;
}

/* Navigation Hover */
.top-navi_wrap img:hover {
	opacity: .7;
}

.top-navi_wrap .navbar-nav li a:hover,
.top-navi_wrap a:hover {
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	-o-transition: 0.6s;
	transition: 0.6s;
}

.top-navi_wrap .navbar-nav li .btn:hover {
	background: none;
	border: 2px solid #ce2f43;
}

/* Tablet Navigation */
@media screen and (max-width: 991px) {
	.top-navi_wrap,
	.top-navi_wrap.fixed-top{
		height: 70px;
	}

	.top-navi_wrap .top-navi_addtnl_wrap {
		position: absolute;
		right: 0;
		top: 0;
		padding: 9px 40px 0 0
	}
	.top-navi_wrap .cart-text {
		display: none!important;
	}
	.top-navi_wrap .bar1,
	.top-navi_wrap .bar2,
	.top-navi_wrap .bar3 {
		width: 35px;
		height: 4px;
		background-color: #4d4d4d;
		margin: 5px 0;
		-webkit-transition: 0.4s;
		-moz-transition: 0.4s;
		-ms-transition: 0.4s;
		-o-transition: 0.4s;
		transition: 0.4s;
	}
	.top-navi_wrap .change .bar1 {
		-webkit-transform: rotate(-45deg) translate(-8px, 4px);
		-moz-transform: rotate(-45deg) translate(-8px, 4px);
		-ms-transform: rotate(-45deg) translate(-8px, 4px);
		-o-transform: rotate(-45deg) translate(-8px, 4px);
		transform: rotate(-45deg) translate(-8px, 4px);
	}
	.top-navi_wrap .change .bar2 {
		opacity: 0;
	}
	.top-navi_wrap .change .bar3 {
		-webkit-transform: rotate(45deg) translate(-8px, -4px);
		-moz-transform: rotate(45deg) translate(-8px, -4px);
		-ms-transform: rotate(45deg) translate(-8px, -4px);
		-o-transform: rotate(45deg) translate(-8px, -4px);
		transform: rotate(45deg) translate(-8px, -4px);
	}
	/* Sidebar - Navigation */
	.top-navi_wrap .navbar-collapse {
		position: absolute;
		left: 0%;
		top: 69px;
		width: 100%;
		height: 100vh;
		visibility: hidden;
		-moz-transition: .5s ease-in-out;
		-ms-transition: .5s ease-in-out;
		-webkit-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
	}
	.top-navi_wrap .backdrop {
		background: rgba(71, 82, 93, .8);
		visibility: visible;
		z-index: 1;
	}
	.top-navi_wrap .navbar-nav {
		position: fixed;
		left: -100%;
		width: 400px;
		height: 100%;
		background-color: #1b1b1b;;
		-moz-transition: left .2s ease-in-out, right .2s ease-in-out;
		-ms-transition: left .2s ease-in-out, right .2s ease-in-out;
		-webkit-transition: left .2s ease-in-out, right .2s ease-in-out;
		-o-transition: left .2s ease-in-out, right .2s ease-in-out;
		transition: left .2s ease-in-out, right .2s ease-in-out;
	}
	.top-navi_wrap .navbar-nav li a {
		color: #ffffff;
	}
	.top-navi_wrap .top-navi_item {
		align-self: flex-start;
		text-align: left;
		padding: 7px 15px;
		width: 100%;
	}
	.top-navi_wrap .top-navi_item.contact-btn {
		width: auto;
	}
	.top-navi_wrap .top-navi_item a::after {
		font-family: "Font Awesome 5 Free";
		content: "\f054";
		padding-left: 3px;
		vertical-align: middle;
		font-weight: 900;
		font-size: 15px;
		float: right;
	}
	.top-navi_wrap .top-navi_item .btn::after {
		content: none;
	}
	.top-navi_wrap .navbar-nav li .btn {
		border-radius: 0px;
		padding: 8px 25px;
	}
	.main-content {
		position: relative;
		display: block;
		width: 100%;
		-moz-transform: translateX(0px);
		-ms-transform: translateX(0px);
		-webkit-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px);
		z-index: 0;
	}
	.main-content.push {
		-moz-transform: translateX(400px);
		-ms-transform: translateX(400px);
		-webkit-transform: translateX(400px);
		-o-transform: translateX(400px);
		transform: translateX(400px);
		-moz-transition: transform 500ms ease;
		-ms-transition: transform 500ms ease;
		-webkit-transition: transform 500ms ease;
		-o-transition: transform 500ms ease;
		transition: transform 500ms ease;
	}
}

/* Mobile Navigation */
@media screen and (max-width: 575px) {
	.top-navi_ncom_logo img {
		width: 150px;
	}
	.top-navi_wrap .top-navi_fujitsu_logo img {
		width: 60px;
	}
	.top-navi_wrap .top-navi_addtnl_wrap {
		padding: 15px 20px 0 0;
	}
	.top-navi_wrap .top-navi-cart p i {
		padding-top: 7px;
	}
	.top-navi_wrap .navbar-nav {
		width: 100%;
	}
  .top-navi_wrap .navbar-collapse {
    top: 69px;
  }
  .top-navi_wrap.fixed-top .navbar-collapse {
    top: 62px;
  }
	.main-content.push {
		-moz-transform: translateX(0px);
		-ms-transform: translateX(0px);
		-webkit-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px);
	}
}

/********************************************************
 Bottom Navigation
 *******************************************************/
.bottom-navi_wrap .bottom-brand_logo img {
	width: 200px;
}

.bottom-navi_wrap ul li{
	margin: 12px 0;
}

.bottom-copyright_content span{
	font-size: 10px;
}

/* Mobile Responsive of Footer */
@media screen and (max-width: 767px){
	.bottom-navi_wrap .bottom-brand_logo img {
		width: 150px;
	}
	.bottom-navi_wrap .bottom-sub_logo img {
		width: 100px;
	}
	.bottom-navi_wrap ul li{
		margin: 10px 0;
	}
	.bottom-copyright_content{
		display: grid;
	}
}

/********************************************************
                Mobile Iframe Style
 *******************************************************/
@media screen and (max-width: 575px) {
	.embed-responsive {
		height: 300px;
	}
}

.col-img{
	width: 100%;
	height:400px;
}

.two-col-content_sec img{
	width: 300px;
	height: 200px;
	-o-object-fit: cover;
  object-fit: cover;
  font-family: "object-fit: cover; object-position: 50% 50%;";
}

.two-col-content_sec .card-label p{
	border-left: 5px solid;
	padding-left: 10px;
}

.two-col-content_sec .card-view{
	margin-top: -24px;
}

.two-col-content_sec .card-view a{
	border: 2px solid rgba(0,0,0,.125);
	padding: 4px 12px;
	text-align: center;
	border-radius: 100%;
}

.two-col-content_sec .card-view i{
  color: #dee2e6;
}

@media screen and (max-width: 767px) {
	.two-col-content_sec img{
		width: 80%;
		height: 250px;
	}
}

@media screen and (max-width: 575px) {
	.two-col-content_sec img{
		width: 100%;
	}
}
@-webkit-keyframes autofill {
    0%,100% {
      color: #666;
      background: transparent;
    }
}

/********************************************************
              Scroll to Top Button
 *******************************************************/
.scrollTopBtn {
	position: fixed;
	color: #ffffff;
	padding: 8px 12px;
	bottom: 30px;
	right: 0px;
	margin: 0 40px 30px 0;
	transition: background-color .3s,opacity .5s, visibility .5s;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	z-index: 1000;
}

.scrollTopBtn i{
	font-size: 24px;
}

.scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 575px){
	.scrollTopBtn {
		margin: 0 15px 15px 0;
	}
}