@charset "utf-8";
/* CSS Document */

#sec_setting .hd03 img{
	max-width: 212px;
	width: 100%;
	vertical-align: middle;
}

#sec_googlepay .hd02{
	margin-top: 90px;
}
#sec_googlepay .hd02 .p_ucs{
	vertical-align: baseline;
}
#sec_googlepay .hd02 .p_google{
	vertical-align: middle;
	margin: 0 10px;
}

#sec_googlepay .hd04 .p_google{
	vertical-align: middle;
}

#sec_maincard{
	margin-top: 190px;
}

#sec_maincard .lead{
	line-height: 2;
	margin-top: 20px;
}

#sec_maincard figure{
	max-width: 274px;
	width: 100%;
	margin: 38px auto 0;
}

#sec_maincard .hd04 .p_ucs{
	vertical-align: baseline;
}

.howto li{
	margin-top: 30px;
	position: relative;
}

.howto li + li::before{
	content: "";
	display: block;
	width: 53px;
	height: 63px;
	background: url("/google-pay/common/img/icon_arrow.svg") no-repeat center / contain;
	margin: 0 auto 23px;
}

/* スライダー */
.sliderWrapper{
	max-width: 526px;
	width: 100%;
	margin: 40px auto 0;
	position: relative;
	overflow: hidden;
}

.sliderWrapper .swiper{
	max-width: 270px;
	width: 100%;
}

.swiper-slide figure{
	padding: 0 63px;
}

.swiper-slide p{
	font-size: 2rem;
	margin-top: 12px;
}

.swiper-button-next,
.swiper-button-prev{
	cursor: pointer;
	position: absolute;
	top: calc(100% / 2 - 12%);
	z-index: 99;
}
.swiper-button-next::before,
.swiper-button-prev::before{
	content: "\f054";
	display: block;
	font-family: "FontAwesome";
	font-weight: 600;
	font-size: 4.6rem;
}
.swiper-button-next{
	right: 1px;
}
.swiper-button-prev{
	left: 1px;
}
.swiper-button-prev::before{
	transform: scale(-1,1);
}
.swiper-button-disabled{
	color: #7f7f7f;
}

.swiper-pagination{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 45px auto 0;
	width: calc(100% - 10px);
}

.swiper-pagination .swiper-pagination-bullet{
	display: block;
	width: 10px;
	height: 10px;
	background: #EFEFEF;
	border-radius: 50%;
	margin: 10px 5px 0;
}
.swiper-pagination .swiper-pagination-bullet:hover,
.swiper-pagination .swiper-pagination-bullet-active{
	background: #1F1F1F;
}

@media screen and (max-width: 768px){
	#sec_maincard .lead{
		text-align: left;
	}
}
@media screen and (max-width: 767px){
	#sec_setting .hd03 img{
		max-width: 154px;
	}
	#sec_googlepay .hd02{
		margin-top: 50px;
	}
	#sec_googlepay .hd02 .p_ucs{
		max-width: 36px;
	}
	#sec_googlepay .hd02 .p_google{
		max-width: 95px;
	}
	
	#sec_googlepay .hd04 .p_google{
		max-width: 90px;
	}
	
	#sec_maincard {
		margin-top: 106px;
	}
	#sec_maincard .lead{
		margin-top: 30px;
	}
	#sec_maincard .hd04{
		margin-top: 40px;
	}
	#sec_maincard .hd04 .p_ucs{
		max-width: 29px;
	}
	
	.howto li{
		margin-top: 30px;
	}
	.howto li + li::before{
		width: 42px;
		height: 51px;
	}
	
	#sec_maincard figure{
		max-width: 152px;
		margin-top: 35px;
	}
	.sliderWrapper{
		margin-top: 34px;
		max-width: 314px;
	}
	.swiper-slide figure {
		padding: 0 43px;
	}
	.swiper-slide p{
		font-size: 1.5rem;
	}
	.swiper-button-next,
	.swiper-button-prev{
		top: calc(100% / 2 - 17%);
	}
	.swiper-button-next::before,
	.swiper-button-prev::before{
		font-size: 3.8rem;
	}
	.swiper-pagination{
		margin-top: 23px;
	}
}