@charset "utf-8";

/* =================================================================
		各フォルダ共通モジュールのCSS
================================================================= */
/*
支払い方法案内
------------------------------------------------------------------*/
/*container*/
.how_to_pay{
	padding-bottom: 30px;
}
@media screen and (max-width: 640px){
	.how_to_pay{ padding-bottom: 30px;}
	.how_to_pay::after{content: ""; display: block; clear: both;}
}

/*title*/
.how_to_pay .how_to_pay_title h2{
	font-size: 22px;
	font-weight: bold;
	padding: 40px 0 10px 0;
}
.how_to_pay .how_to_pay_title p{
	font-size: 1rem;
	font-weight: normal;
	padding:0;
	margin:0 0 20px 0;
}
@media screen and (max-width: 640px){
	.how_to_pay .how_to_pay_title h2{
		font-size: 1.3rem;
		font-weight: bold;
		width: 90%;
		margin: 0 auto;
		padding: 30px 0 10px;
	}
	.how_to_pay .how_to_pay_title p{
		font-size: 1rem;
		font-weight: normal;
		width: 90%;
		margin: 0 auto;
		padding:0 0 10px ;
	}
}

/*ul#pay_list*/
ul#pay_list{background: #ccc;}
ul#pay_list > li + li{ margin-top: -2px;}

ul#pay_list li{
	background: linear-gradient(#fff,#f1f1f1);
	border: 2px solid #cccccc;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	list-style-type: none;
}
ul#pay_list li dl{ display: flex;  align-items: center; padding: 1em 0;}
ul#pay_list li dl dd,ul#pay_list li dl dt{vertical-align: middle;}
ul#pay_list li dl dt{ width: 25%; font-weight: bold; font-size: 1.2rem; padding-left: 30px;}
ul#pay_list li dl dt img{margin: 5px 0 20px;}
ul#pay_list li dl dd{ width: 75%; padding-right: 30px;}

/*共通*/
ul#pay_list li dl dd p{ margin: 0;}
ul#pay_list li dl dd p.pay_txt{
	margin: 5px 0 -5px;
	line-height: 1.3rem;
	font-size: 0.9rem;
}
ul#pay_list li dl dd p.pay_logo{}
ul#pay_list li dl dd p.pay_logo img{}

/*支払い別*/
ul#pay_list li dl.pay_conveni{}
ul#pay_list li dl.pay_credit{}
ul#pay_list li dl.pay_qr{}
ul#pay_list li dl.pay_qr dd{width: auto; padding-right: 15px;}
ul#pay_list li dl.pay_qr dd p.pay_logo img{max-height: 35px;}
ul#pay_list li dl.pay_bank{}
ul#pay_list li dl.pay_bank dd p.pay_txt{margin-top:0;}
ul#pay_list li dl.pay_loan{}
ul#pay_list li dl.pay_debit{}
ul#pay_list li dl.pay_debit dd{
	display:flex;
	align-items: flex-start;
}
ul#pay_list li dl.pay_debit dd p{
	display:inline-flex;
	align-items: flex-start;
}
ul#pay_list li dl.pay_debit dd p.pay_logo img{
	width:87px;
	height:auto;
	max-height:100%;
	margin-right:20px;
}

@media screen and (max-width: 640px){
	ul#pay_list{ width: 90%; margin: 0 auto;}

	ul#pay_list li dl{ display: block; padding: 10px 0;}
	ul#pay_list li dl dt{display: block; width: 100%; font-weight: bold; font-size: 1rem; padding: 0 10px;}
	ul#pay_list li dl dd{
		padding: 3px 10px;
		width: 100%;
		margin: 0 auto;
		line-height: 100%;
	}
	/*共通*/
	ul#pay_list li dl dd p.pay_txt{
		margin: 5px 0 -5px;
		line-height: 1.2rem;
		font-size: 0.8rem;
	}
	ul#pay_list li dl dd p.pay_logo{
		margin-top:5px;
	}
	ul#pay_list li dl dd p.pay_logo img{
		width:auto;
		height:auto;
		max-width:100%;
		max-height:100%;
	}
	/*支払い別*/
	ul#pay_list li dl.pay_conveni{}
	ul#pay_list li dl.pay_credit{}
	ul#pay_list li dl.pay_qr{}
	ul#pay_list li dl.pay_qr dd{display:inline-block;width:25%;padding-right:3vw;}
	ul#pay_list li dl.pay_qr dd p.pay_logo img{width:auto;max-width:130%;}
	ul#pay_list li dl.pay_bank{}
	ul#pay_list li dl.pay_bank dd p.pay_txt{margin-top:0;}
	ul#pay_list li dl.pay_loan{}
	ul#pay_list li dl.pay_loan dd p.pay_logo img{width:auto;max-width:30%;}
	ul#pay_list li dl.pay_debit{}
	ul#pay_list li dl.pay_debit dd{
		display:flex;
		padding: 5px 0;
		width: 95%;
		margin: 0 auto;
		line-height: 100%;
	}
	ul#pay_list li dl.pay_debit dd p{
		display:inline-flex;
		align-items: flex-start;
		margin: 0;
	}
	ul#pay_list li dl.pay_debit dd p.pay_txt{
		flex:0 1 80%;/*(flex-grow.flex-shrink.flex-basis)*/
	}
	ul#pay_list li dl.pay_debit dd p.pay_logo{
		flex:0 1 20%;/*(flex-grow.flex-shrink.flex-basis)*/
	}
	ul#pay_list li dl.pay_debit dd p.pay_logo img{
		width:87px;
		height:auto;
		max-height:100%;
		padding-right:10px;
		margin-right:0px;
	}
}

/*
　
------------------------------------------------------------------*/