@charset "UTF-8";


/* ====================================
	共通
 ==================================== */

/* サポート */
#support {
	border-top: solid 1px #d9d9d9;
	margin-top: 4rem;
	margin-bottom: 4rem;
}

#globalSupportFooter {
	/* background: #f5f5f5; */
}

#globalSupportFooter a {
	color: #434343;
}

#globalSupportFooter ul.list-support li {
	background: #DBDACB;
}

#globalSupportFooter ul.list-support li a span {
	max-width: 80%;
	font-weight: 400;
}


/* サポートアイコン */
#globalSupportFooter ul.list-support li a {
	background-repeat: no-repeat;
	background-position: right center;
}




#globalSupportFooter ul.list-support li.i-pdf a {
	background-image: url(/business/pci/common/images/icon-pdf.svg);
}

/* 導入検討アイコン */



#globalCaseFooter ul.list-case-item {
	display: flex;
	flex-wrap: wrap;
}

#globalCaseFooter .global-case-title {
	text-align: center;
	font-weight: 400;
}

#globalCaseFooter ul.list-case-item .case-text {
	font-weight: 400;
}

#globalCaseFooter ul.list-case-item li a {
	text-decoration: none;
}


#globalCaseFooter ul.list-case-item li .tel {
	font-weight: 500;
}

#globalCaseFooter ul.list-case-item li {
	text-align: center;
}

#globalCaseFooter ul.list-case-item li .i-freedial img {
	width: 64%;
	margin-top: 0%;

}

/* #globalCaseFooter ul.list-case-item li .icon {
	background-size: 40px auto;
}


 #globalCaseFooter ul.list-case-item .icon {
	background-repeat: no-repeat;
	background-position: center center;
}

#globalCaseFooter ul.list-case-item .i-freedial {
	background-image: url(/business/pci/common/images/icon-freedial.svg);
}

#globalCaseFooter ul.list-case-item .i-web {
	background-image: url(/business/pci/common/images/icon-web.svg);
}

#globalCaseFooter ul.list-case-item .i-document {
	background-image: url(/business/pci/common/images/icon-document.svg);
}

#globalCaseFooter ul.list-case-item .i-lease {
	background-image: url(/business/pci/common/images/icon-lease.svg);
}  */

/* フッターラインアップ */
.foot-lineup-title-container {
	border-bottom: solid 1px #a0a0a0;
}

.foot-lineup-title-container .btn-lineup {
	text-decoration: none;
}

.foot-lineup-title-container .fa-angle-right {
	margin-right: .5em;
}

.footer-lineup-outer {
	position: relative;
}

.footer-lineup-container {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1
}

.footer-lineup-container a {
	text-decoration: none;
}

.footer-lineup-container .prod-name {
	font-weight: 700;
}

.footer-lineup-container .name {
	display: inline-block;
	padding: 0 0 0 1em;
	background-image: url(/products/common/images/chevron-right-solid.svg);
	background-repeat: no-repeat;
	background-position: left 0 top .35em;
	background-size: auto .8em;
}

.footer-lineup-container .icon-new {
	color: #e6000d;
	line-height: 1;
}

.footer-lineup-button-next,
.footer-lineup-button-prev {
	position: absolute;
	top: 50%;
	width: 5%;
	height: 120px;
	margin-top: -60px;
	z-index: 2;
	cursor: pointer;
	background-color: #D9D9D9;
	background-size: 60% auto;
	background-position: center;
	background-repeat: no-repeat;
}

.footer-lineup-button-prev {
	background-image: url(/products/common/images/arrow-prev-w.svg);
	left: 0;
	right: auto
}

.footer-lineup-button-next {
	background-image: url(/products/common/images/arrow-next-w.svg);
	right: 0;
	left: auto
}

/* カルーセル破棄時スタイル */
.footer-lineup-outer.destroy {
	display: flex;
}

.footer-lineup-outer.destroy {
	padding: 0 0;
}

.footer-lineup-outer.destroy .footer-lineup-button-next,
.footer-lineup-outer.destroy .footer-lineup-button-prev {
	display: none;
}


/* 追従ナビ */
#follow {
	position: relative;
	/* display: none; */
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 10;
}

.follow-inner {
	transform: translateY(0px);
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
}

.list-follow-navi {
	display: flex;
	width: 100%;
	justify-content: space-between;
	transition: background-color .3s linear;
}

.list-follow-navi li {
	width: 33%;
	position: relative;
	background-color: #3F3D33;
	z-index: 20;
}

.list-follow-navi li a {
	width: 100%;
	position: relative;
	display: block;
	border: none;
	color: #fff;
	font-size: 16px;
	padding: 10px 70px 10px 12px;
	text-decoration: none;
}

.list-follow-navi li .icon {}


#follow ul.list-follow-navi li a {
	background-repeat: no-repeat;
	background-position: right center;
}

#follow ul.list-follow-navi li.icon.i-pdf a {
	background-image: url(/business/pci/common/images/icon-pdf-w.svg);
}

#follow ul.list-follow-navi li.icon.i-web a {
	background-image: url(/business/pci/common/images/icon-web-w.svg);

}

.list-follow-navi li .follow-navi-text a {}



.follow-close {
	cursor: pointer;
	display: block;
	position: absolute;
	width: 30px;
	height: 20px;
	opacity: 1;
	transition: opacity .3s linear;
	background-color: rgba(238, 237, 222, 0.8);
	right: 15px;
	top: -19.8px;
	border: none;
	border-radius: 3px 3px 0 0;
}


/* 閉じた時 */


#follow .follow-close .follow-close-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

/* #follow.load .follow-close-inner:after {
	content: '';
	position: absolute;
	border: none;
	width: 12px;
	height: 12px;
	top: 6px;
	background: url(/business/pci/common/images/ico-close-white.svg) no-repeat center;
	background-size: contain;
} */
#follow .follow-close-inner:after {
	content: '';
	position: absolute;
	border: none;
	width: 12.4px;
	height: 12.4px;
	top: 6px;
	right: 9px;
	background: url(/business/pci/common/images/ico-close-white.svg) no-repeat center;
	background-size: contain;
}

#follow .follow-close-inner:hover:after {
	background: url(/business/pci/common/images/ico-close.svg) no-repeat center;
}

/* 閉じた時 */
#follow.in .follow-close .follow-close-inner:after {
	content: '';
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7px 8px 7px;
	border-color: transparent transparent #B3B3A4 transparent;
}

#follow.in .follow-close:hover .follow-close-inner:after {
	border-color: transparent transparent #eb0a1e transparent;
	background: none;
}



#follow .follow-inner {
	bottom: 0;
	display: block;
	transition-duration: 300ms;
	transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
	transition-property: opacity, transform;
	transition: ease .4s;
}



#follow {
	padding: 0 1.5%;
	opacity: 0;
	animation: move .4s ease .2s 1 normal forwards;
	-webkit-animation: move .4s ease .2s 1 normal forwards;
}

@keyframes move {
	0% {
		opacity: 0;
		transform: translateY(85%);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

#follow.none {
	opacity: 1;
	/* display: none; */
	animation: moveDown .4s ease .2s 1 normal forwards;
	-webkit-animation: moveDown .4s ease .2s 1 normal forwards;
}

@keyframes moveDown {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(85%);
	}
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (max-width: 767px) {

	main[data-footer-type] {
		/* padding-bottom: 2.6rem; */
	}

	.pc {
		display: none;
	}

	/* フッターラインアップ */
	#footLineup {
		margin-top: 4rem;
	}

	.foot-lineup-title-container {
		display: flex;
		align-items: baseline;
		margin-bottom: 2rem;
		padding-bottom: .5em;
	}

	.foot-lineup-title-container .foot-lineup-title {
		padding-bottom: .2em;
		font-size: 1.8rem;
		font-weight: 300;
	}

	.foot-lineup-title-container .btn-lineup {
		margin-left: 1.5em;
		font-size: 1.4rem;
	}

	.footer-lineup-container .swiper-slide {
		padding: 0 2%;
	}

	.footer-lineup-container .img {
		padding: 0 10%;
	}

	.footer-lineup-container .prod-name {
		font-size: 1.4rem;
	}

	.footer-lineup-container .icon-new {
		margin-left: .4em;
		font-size: 1.2rem;
	}

	.footer-lineup-container .text {
		margin-top: .5em;
		font-size: 1.2rem;
	}

	.footer-lineup-outer.destroy .swiper-slide {
		width: 33%;
	}

	/* サポート */
	#support article {
		padding-top: 0;
	}

	#globalSupportFooter {
		padding: 4rem 0 5rem;
	}

	#globalSupportFooter .global-support-title {
		font-size: 2.2rem;
		margin-bottom: 2rem;
		font-weight: 300;
		text-align: center;
	}

	#globalSupportFooter ul.list-support.col4 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	#globalSupportFooter ul.list-support li {
		display: flex;
		margin-top: 1.8rem;
		padding-right: 2rem;
		background: #DBDACB;
		height: 52px;
	}

	#globalSupportFooter ul.list-support li a span {
		max-width: 86%;
	}

	#globalSupportFooter ul.list-support.col4 li {
		width: 48%;
	}

	#globalSupportFooter ul.list-support.col3 li:first-child,
	#globalSupportFooter ul.list-support.col4 li:nth-child(-n+2) {
		margin-top: 0;
	}

	#globalSupportFooter ul.list-support li a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 28px;
		font-size: 1.5rem;
		line-height: 1.4;
		text-decoration: none;
		padding: 1.2rem 0 1.2rem 2rem;
	}

	#globalSupportFooter ul.list-support li.icon a {
		background-size: 24px auto;
		background-position: right;
	}

	/* サポートリスト・テキスト */
	#globalSupportFooter ul.list-support-text {
		margin-top: 2rem;
	}

	#globalSupportFooter ul.list-support-text li {
		margin-top: .5em;
	}

	#globalSupportFooter ul.list-support-text li:first-child {
		margin-top: 0;
	}

	#globalSupportFooter ul.list-support-text li a {
		display: block;
		padding: 0 0 0 1em;
		position: relative;
	}

	#globalSupportFooter ul.list-support-text li a::before {
		content: '';
		display: inline-block;
		width: .9em;
		height: .9em;
		background: url(/products/common/images/chevron-right-solid.svg) no-repeat center center;
		background-size: auto 100%;
		position: absolute;
		top: .35em;
		left: 0;
	}

	/* 導入検討アイコン */
	#globalCaseFooter {
		padding: 0 5%;
	}

	#globalCaseFooter .bg-color {
		background-color: #EEEDDE;
		padding-top: 2.5rem;
		padding-bottom: 1.8rem;
	}


	#globalCaseFooter ul.list-case-item {
		justify-content: space-between;
		margin-top: 2.4rem;
		background-color: #fff;
		padding: .6rem 4% 1.6rem;
	}

	#globalCaseFooter .global-case-title {
		font-size: 1.8rem;
	}

	#globalCaseFooter ul.list-case-item .case-text {
		font-size: 1.5rem;
		text-align: left;
	}

	#globalCaseFooter ul.list-case-item li .case-text::after {
		content: "";
		display: inline-block;
		position: absolute;
		top: 50%;
		right: 10px;
		width: 9px;
		height: 9px;
		border-right: 2px solid #535353;
		border-bottom: 2px solid #535353;
		transform: translateY(-50%) rotate(-45deg);
		transition: all .2s ease-in-out;
	}

	#globalCaseFooter ul.list-case-item li {
		width: 100%;
		text-align: left;
		padding-bottom: .6em;
		padding-top: .6em;
		padding-left: 8px;
		border-bottom: 1px solid #B3B3A4;
	}

	#globalCaseFooter ul.list-case-item li.freedial {
		padding-left: .8rem;
		padding-bottom: .8em;
		padding-top: 0.5em;
	}

	#globalCaseFooter ul.list-case-item li .flex-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#globalCaseFooter ul.list-case-item li .icon {
		width: 11.8%;
	}

	#globalCaseFooter ul.list-case-item li .flex-right {
		width: 80%;
		position: relative;
	}



	#globalCaseFooter ul.list-case-item li .icon.i-freedial {
		width: 24%;
	}

	#globalCaseFooter ul.list-case-item li.freedial .flex-right {
		width: 100%;
		padding-left: 4%;
	}

	#globalCaseFooter ul.list-case-item li .tel {
		font-size: 2.2rem;
		text-align: left;
	}

	#globalCaseFooter ul.list-case-item li .tel-text {
		font-size: 1.2rem;
		margin-top: 1rem;
	}

	#globalCaseFooter ul.list-case-item li img {
		height: auto;
		width: 100%;
	}

	#globalCaseFooter ul.list-case-item li .i-freedial img {
		height: 100%;
		width: auto;
		margin-top: 4px;

	}

	/* 追従ナビ */
	#follow {
		padding: 0 0%;
		/* セーフエリア対応 */
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
	}



	.list-follow-navi.hover-fade a.hovering {
		opacity: 1;
	}

	.list-follow-navi li {
		width: 49.9%;
	}

	#follow ul.list-follow-navi li a {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		padding: 36px 1px 8px;
		font-size: 10.5px;
		text-align: center;
		line-height: 1.1;
		font-size: 1.2rem;
		background-position: 50% 22%;
	}

	#follow ul.list-follow-navi li.icon a {
		background-size: 24px auto;
	}

	#follow ul.list-follow-navi li.icon.i-pdf a {
		background-size: 19px auto;
	}


}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 768px) {

	main[data-footer-type] {
		/* padding-bottom: 2.6rem; */
	}

	.sp {
		display: none;
	}

	#support article {
		padding-top: 0;
	}

	/* フッターラインアップ */
	#footLineup {
		margin-top: 14rem;
		padding-top: 0rem;
	}

	.foot-lineup-title-container {
		display: flex;
		align-items: baseline;
		margin-bottom: 3rem;
		padding-bottom: .8rem;
	}

	.foot-lineup-title-container .foot-lineup-title {
		font-size: 2rem;
		font-weight: 300;
	}

	.footer-lineup-container .swiper-slide {
		padding: 0 2%;
	}

	.footer-lineup-outer {
		padding: 0 30px;
	}

	.footer-lineup-container .swiper-slide {
		padding: 0 2%;
	}

	.footer-lineup-button-next,
	.footer-lineup-button-prev {
		position: absolute;
		top: 0;
		width: 30px;
		height: 100%;
		margin-top: 0;
		background-color: #d9d9d9;
	}

	.footer-lineup-container .img {
		padding: 0 12%;
	}

	.footer-lineup-container .prod-name {
		font-size: 1.8rem;
	}

	.footer-lineup-container .icon-new {
		margin-left: .4em;
		font-size: 1.4rem;
		position: relative;
		top: -.1em;
	}

	.footer-lineup-container .text {
		margin-top: .5em;
		font-size: 1.4rem;
	}

	/* サポート */
	#globalSupportFooter {
		padding-top: 5.6rem;
		padding-bottom: 10rem;
	}

	#globalSupportFooter .global-support-title {
		font-size: 2.8rem;
		margin-bottom: 6rem;
		font-weight: 300;
		text-align: center;
	}

	#globalSupportFooter ul.list-support {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	#globalSupportFooter ul.list-support li {
		display: flex;
		padding: .2em 1em;
		margin-top: 3rem;
		margin-left: 1.65%;
	}

	#globalSupportFooter ul.list-support.col3 li {
		width: 32.22%;
	}

	#globalSupportFooter ul.list-support.col4 li {
		width: 23.75%;
	}

	#globalSupportFooter ul.list-support.col3 li:nth-child(-n+3),
	#globalSupportFooter ul.list-support.col4 li:nth-child(-n+4) {
		margin-top: 0;
	}

	#globalSupportFooter ul.list-support.col3 li:nth-child(3n-2),
	#globalSupportFooter ul.list-support.col4 li:nth-child(4n-3) {
		margin-left: 0;
	}

	#globalSupportFooter ul.list-support li a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 66px;
		font-size: 1.6rem;
		line-height: 1.2;
		text-decoration: none;
	}

	#globalSupportFooter ul.list-support li.icon a {
		/* padding-left: 50px; */
		background-size: 33px auto;
	}

	/* サポートリスト・テキスト */
	#globalSupportFooter ul.list-support-text {
		margin-top: 2rem;
	}

	#globalSupportFooter ul.list-support-text li {
		margin-top: .5em;
	}

	#globalSupportFooter ul.list-support-text li:first-child {
		margin-top: 0;
	}

	#globalSupportFooter ul.list-support-text li a {
		display: block;
		padding: 0 0 0 1em;
		position: relative;
	}

	#globalSupportFooter ul.list-support-text li a::before {
		content: '';
		display: inline-block;
		width: .9em;
		height: .9em;
		background: url(/products/common/images/chevron-right-solid.svg) no-repeat center center;
		background-size: auto 100%;
		position: absolute;
		top: .35em;
		left: 0;
	}


	/* 導入検討アイコン */
	#globalCaseFooter {
		padding: 4rem 5%;
		background-color: #EEEDDE;
	}


	#globalCaseFooter ul.list-case-item {
		margin-top: 5.4rem;
		justify-content: space-between;
	}

	#globalCaseFooter ul.list-case-item li {
		width: 22%;
		/* margin-left: 4%; */
	}

	#globalCaseFooter ul.list-case-item li.freedial {
		display: flex;
		flex-direction: column;
		justify-content: end;
	}

	/* #globalCaseFooter ul.list-case-item li:nth-child(4n-3) {
		margin-left: 0;
	} */

	#globalCaseFooter ul.list-case-item li .tel {
		font-size: 3.2rem;
		margin-top: 1rem;
	}

	#globalCaseFooter ul.list-case-item li .tel-text {
		font-size: 1.2rem;
		margin-top: 1.6rem;
	}



	#globalCaseFooter .global-case-title {
		font-size: 3.2rem;
	}



	#globalCaseFooter ul.list-case-item .case-text {
		font-size: 1.6rem;
		margin-top: 2rem;
	}



	#globalCaseFooter ul.list-case-item li .icon {
		width: 44%;
		margin-left: auto;
		margin-right: auto;
	}


	/* 追従ナビ */
	.list-follow-navi {
		background-color: rgba(238, 237, 222, 0.8);
		padding: 11px 11px 0 11px;
	}

	.list-follow-navi li {
		border-radius: 5px 5px 0 0;
		/* padding: 0em 1.8em 0 1em; */
	}

	#follow ul.list-follow-navi li a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 58px;
		font-size: 1.4rem;
		line-height: 1.2;
		text-decoration: none;
	}

	#follow ul.list-follow-navi li a .follow-navi-text {
		padding-left: 1em;
	}

	#follow ul.list-follow-navi li.icon a {
		background-size: 30px auto;
		background-position: center right 3rem;
	}

	#follow ul.list-follow-navi li.icon.i-pdf a {
		background-size: 27px auto;
	}

	#follow .follow-inner {
		transform: translateY(0%);
		/* bottom: 0; */
		display: block;
		transition-duration: 300ms;
		transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
		transition-property: opacity, transform;
		transition: ease .4s;
	}

	#follow.in .follow-inner {
		transform: translateY(85%);
		/* bottom: -48px; */
		transition-duration: 300ms;
		transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
		transition-property: opacity, transform;
		/* transition: ease 1s; */
	}

}

/* ====================================
	タブレット、印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 768px) and (max-width: 1079px) {
	.footer-lineup-outer.destroy .swiper-slide {
		width: 25%;
	}

	/* 導入検討アイコン */
	#globalCaseFooter ul.list-case-item li .tel {
		font-size: 3vw;
	}
}

/* ====================================
	PC専用スタイル
===================================== */
@media only screen and (min-width: 1080px) {
	.footer-lineup-outer.destroy .swiper-slide {
		width: 20%;
	}

}

/* ====================================
	スクリーン専用スタイル
===================================== */
@media screen {
	[data-check="checking"] {
		background: #ffccd5 !important;
	}
}