@charset "UTF-8";

/* receipt_form style
-------------------------------------*/
h1.title {
	font-size: 32px;
	font-weight: normal;
	color: #333;
	margin-bottom: 20px;
	}
#main {	
	overflow: hidden;
	padding-bottom: 50px;
	width: 100%;
	
	}	

#contents{
	width: 100%;
	margin: 0 auto;
	}
	ul.method{
		counter-reset: number;
		overflow: hidden;
		margin-bottom: 40px;
		}
		ul.method li{
			counter-increment: number;
			padding-left: 30px;
			position: relative;
			margin-bottom: 30px;
			}
		ul.method li:last-child {margin-bottom: 0;}
		ul.method li:before{
			content: counter(number)".";
			color: #0059AC;
			font-size: 18px;
			font-weight: bold;
			position: absolute;
			left: 0;
			}		
			ul.method li dl dt {
				color: #0059AC;
				font-size: 18px;
				font-weight: bold;
				border-bottom: 2px solid #0059AC;
				margin-bottom: 10px;
				}
			ul.method li dl dd {
				font-size: 16px;
				margin-bottom: 10px;
				line-height: 1.6;
				}
			ul.method li dl dd:last-child {margin-bottom: 0;}
			ul.method li dl dd span {
				padding: 0 5px 5px 0;
				display: inline-block;
				width: 65px;
				}
			ul.method li dl dd a {
				color: #005aac;
				text-decoration: underline
				}
				
				
.point {
	background: #ffffcc;
	padding: 20px;
	margin-bottom: 30px;
	}
	.point p {
		font-size: 16px;
		font-weight: bold;
		color: #0059AC;
		line-height: 20px;
		margin-bottom: 10px;
		}
	.point p:before {
		content: "";
		display: inline-block;
		width: 23px;
		height: 20px;
		background: url(/~/Media/coco/receipt-form/guide/image/icon01.png) no-repeat left center;
		background-size: contain;
		vertical-align: middle;
		padding-right: 5px;
		}		
	.point ul li {
		font-size: 16px;
		font-weight: bold;
		text-indent: -1.5em;
		padding-left:1.5em;
		margin-bottom: 10px;
		}
	.point ul li:last-child {margin-bottom: 0;}	
	.point ul li:before {
	    color: #0059ac;
	    content: "■";
	    padding-right: 0.5em;
		}	
		.point ul li span {color: #cc0000;}
.btn {
	margin: 0 auto 50px;
	width: 500px;
	}		
		
.barcode {
	border: 1px solid #0059AC;
	font-size: 16px;
	padding: 30px;
	margin-bottom: 30px;
	}		
	.barcode .title {		
		color: #0059ac;
		font-weight: bold;
		margin-bottom: 20px;
		}
	.barcode .guide_read {
		margin-bottom: 20px;
		}
	.barcode .receipt_img {text-align: center;}
	.barcode > div {
		margin-bottom: 30px;
		overflow: hidden;
		width: 100%;
		}
	.barcode > div:last-child {margin-bottom: 0;}
	.barcode p.receipt {
	    margin-bottom: 30px;
	    width: 40%;
		}
	.barcode p.receipt02 {width: 40%;}	
	.barcode p.receipt03 {
		width: 40%;
		margin-bottom: 30px;
		}	
	.barcode .txt_02 { margin: 20px auto 5px;}	
		.barcode div .txt_box {
			float: left;
			margin-right: 30px;
			}
			.barcode div .txt_box span {color: #cc0000;}
		.barcode .step {
			overflow: hidden;
			margin: 0 auto 10px;
			}
		.barcode .step li {margin-bottom: 5px;}
		.barcode .step li:last-child {margin-bottom: 0;}
		.barcode .step li span {
			color: #cc0000;
			font-weight: bold;
			}
	.barcode .receipt_read { margin: 20px auto 0;}	
.kome {
	font-size: 14px;
	}

/* ▼▼▼ 650px
=====================================*/
@media screen and (max-width: 650px) {

h1.title {
	font-size: 5vw;
	font-weight: normal;
	color: #333;
	margin: 15px 0;
	}
#main {	
	overflow: hidden;
	padding-bottom: 0;
	width: 100%;
	}	
#main_inner{
	width: 100%;
	margin: 0 auto;
	}
#contents{
	width: 90.6vw;
	float: none;
	margin: 0 auto ;
	}
	ul.method li{padding-left: 6.5%;}
	ul.method li:before{
		font-size: 4.37vw;
		font-weight: bold;
		position: absolute;
		left: 0;
		}		
		ul.method li dl dt {
			color: #0059AC;
			font-size: 4.37vw;
			border-bottom: 2px solid #0059AC;
			}
		ul.method li dl dd {font-size: 4.06vw;}
		ul.method li dl dd span {width: 12.2vw;}
	.point p {font-size: 4.06vw;}
	.point p:before {
		width: 19px;
		height: 17px;
		padding-right: 10px;
		}		
	.point ul li {font-size: 4.06vw;}
		
.barcode {
	font-size: 4.06vw;
	padding: 20px;
	}
	.barcode .title {margin-bottom: 10px;}
	.barcode .guide_read {margin-bottom: 10px;}
	.barcode .receipt_img {text-align: center;}
			
	.barcode p.receipt {width: 100%;}
	.barcode p.receipt02 {width: 100%;}
	.barcode p.receipt03 {
		width: 100%;
		margin-bottom: 20px;
		}	
	
	
		.barcode div .txt_box {
			float: left;
			margin-right: 5%;
			width: 60%;
			}
		.barcode div .img {
		float: left;
		width: 35%;
		}
	.barcode .receipt_read { margin: 10px auto 0;}	
		
		
.btn {
	margin: 0 auto 50px;
	width: 78.12vw;
	}	
	
		.barcode .step li {
			margin: 0 0 10px;
			}
		.barcode .step {
			overflow: hidden;
			margin: 10px auto 10px;
			}
		
	
}