@charset "utf-8";

@media screen and (max-width:640px) {
	/************************************************
	faq
	************************************************/
	.menuList__number {
		width: 1.7em;
	}
	.faq__list li:nth-child(7) {
		border-bottom: none;
	}
	.faq__list li:nth-child(8) {
		order: 7;
		border-bottom: 1px solid #584124;
	}
	/************************************************
	parts
	************************************************/
	.keyVisual_text01{
		color: #007d49;
	}
	.fwb{
		font-weight: bold;
	}
	.txtRed{
		color: #E60000;
	}
	.mt10{
		margin-top: 10px;
	}
	.mb0{
		margin-bottom: 0;
	}
	.tal{
		text-align: left;
	}
	.tac{
		text-align: center;
	}
	.spMb0 {
		margin-bottom: 0;
	}
	.pcOnly {
		display:none!important
	}


	/************************************************
	accordionBlock
	************************************************/
	.accordionBlock__col2ImgArea {
		align-self: flex-start;
	}
	/************************************************
	modal
	************************************************/
	.modal__link{
		display: block;
		position: absolute;
		bottom: 37.7%;
		right: 18.8%;
		width: 40.2%;
		height: 7.9%;
		background: transparent;
		border-radius: 50px;
	}
	/************************************************
	keyVisual
	************************************************/
	.keyVisual {
		padding-top: 16px;
	}
	.keyVisual .keyVisual__textArea {
		margin-bottom: 7px;
	}
	.keyVisual .keyVisual__textArea .keyVisual__copy {
		width: 57%;
		margin: 0 auto 26px;
	}
	.keyVisual .keyVisual__textArea .keyVisual_text01 {
		margin-top: 12px;
		line-height: 1.3;
	}
	.keyVisual .keyVisual__imgArea {
		transform: none;
		margin: 0;
		text-align: center;
	}
	.keyVisual .keyVisual__imgArea img {
		width: 74.5%;
	}
	/************************************************
	ctaWrapper
	************************************************/
	.ctaWrapper {
		padding-top: 12px;
	}
	.cta__btn {
		border-radius: 100px;
	}
	/************************************************
	cta02
	************************************************/
	.cta02.blContainer {
		margin: 0 auto 20px;
	}
	.cta02.blContainer .cta__btn_subText {
		margin-bottom: 0;
		font-weight: bold;
		font-size: 1rem;
	}
	.cta02.blContainer .cta__circleText {
		position: absolute;
		top: -45%;
		left: -3%;
		width: 17%;
	}
	.cta02.blContainer .cta__btn_style3 {
		background: #007c4a;
		color: #fff;
		box-shadow: 0 4px 0 0 #8AC6B4;
		height: auto;
		padding: 0.4em 2em;
	}
	.cta02.blContainer .cta__btn_style3::after {
		position: absolute;
		top: 50%;
		right: 1.2em;
		transform: translateY(-50%);
		content: "";
		background: url(/spapp/popay/faq/assets/img/icon_arrow_right_white.svg) no-repeat center;
		width: 16px;
		height: 16px;
		transform: translateY(-50%) rotate(90deg);
	}
	.cta02.blContainer .cta__btn_style3 .cta__mainText {
		font-size: 0.8rem;
		letter-spacing: -0.1em;
	}
	.cta02.blContainer .cta__btn_style3 .cta__mainText img {
		vertical-align: middle;
	}
	/************************************************
	reward
	************************************************/
	.reward__block {
		margin-top: 40px;
	}
	.reward__block .block__header {
		position: relative;
	}
	.reward__block .block__header span {
		position: absolute;
		top: -15%;
		left: 2%;
		width: 50%;
	}
	.reward__block .block__body {
		padding: 26px 5.5vw 40px;
	}
	/************************************************
	treasure__block
	************************************************/
	.treasure__block {
		margin-top: 40px;
	}
	.treasure__block .block__header {
		position: relative;
	}
	.treasure__block .block__header span {
		position: absolute;
		top: -15%;
		left: 2%;
		width: 50%;
	}
	.treasure__block .block__body {
		padding: 26px 5.5vw 40px;
	}
	/************************************************
	rank
	************************************************/
	.rank__block {
		margin-bottom: 20px;
		max-width: inherit;
	}
	.rank__block .block__header {
		font-weight: bold;
		text-align: center;
		color: #fff;
		background: #8ac6b4;
		padding: 1em 1em .9em;
		border-radius: 5px 5px 0 0;
	}
	.rank__block .block__body {
		font-size: .875rem;
		background: #fff;
		border-radius: 0 0 5px 5px;
		border: 2px solid #8ac6b4;
		padding: 40px 5.5vw;
	}
	/************************************************
	saArea
	************************************************/
	.saArea {
		margin-top: 70px;
	}
}

@media screen and (max-width:575px) {
	/************************************************
	parts
	************************************************/
	.keyVisual_text01{
		color: #007d49;
	}
	.fwb{
		font-weight: bold;
	}
	.mt10{
		margin-top: 10px;
	}
	.mb0{
		margin-bottom: 0;
	}

	/************************************************
	modal
	************************************************/
	.modal__img {
		max-height: 90vh;
	}
	.modal__link{
		display: block;
		position: absolute;
		bottom: 34%;
		right: 9%;
		width: 82.6%;
		height: 7.1%;
		background: transparent;
		border-radius: 50px;
	}
}