@charset "UTF-8";

/* point style
-------------------------------------*/
#main {	
	overflow: hidden;
	width: 100%;
	}	
	#contents{
		width: 1000px;
		margin: 0 auto;
		font-size: 16px;
		}

.point_main {
	background: url(/~/Media/coco/point/image/main_bg.png) repeat scroll left top;
	padding: 25px 0;
	}	
	.main_title {
		text-align: center;
		margin: 0 auto 30px;
		}	
	.point_main .step {
		width: 100%;
		max-width: 894px;
		margin: 0 auto;
		overflow: hidden;
		}
		.point_main .step li {
			float: left;
			width: 34%;
			margin-right: 0.5%;
			}
		.point_main .step li:last-child {
			width: 31%;
			margin-right: 0;
			}

.point_info {padding: 40px 0 0;}
	.point_area {
		overflow: hidden;
		padding: 20px 30px;
		width: 100%;
		max-width: 1000px;
		margin: 0 auto 40px;
		background: #fff;
		}
		.point_area li {
			padding: 30px 0;
			border-bottom: 1px dashed #cccc;
			}
		.point_area li:last-child {
			border-bottom: none;
			padding-bottom: 0;
			}
			.point_area .t_icon {
				width: 10.8%;
				float: left;
				margin-right: 3%;
				}
			.point_area .p_title {
				font-size: 28px;
				font-weight: bold;
				margin-bottom: 15px;
				}
			.point_area .point_t {
				font-size: 32px;
				color: #00609c;
				margin-bottom: 15px;
				padding-left:39px;
				text-indent:-39px;
				}
			.point_area .point_t:before {
				content: url("/~/Media/coco/point/image/icon_%20arrow.png");
				margin-right: 10px;
				}
			.point_area .t_txt {
				font-size: 16px;
				margin: 0 0 10px 39px;
				}
			.point_area .point_btn {text-align: right;}
	
			.point_area .method_t {
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 5px;
				}
	
	.point_area .method_list {
			counter-reset: number;
			font-size: 16px;
			overflow: hidden;
			}	
		.point_area .method_list > li {
			counter-increment: number;
			margin-bottom: 5px;
			padding: 0 0 0 1.7em;
			position: relative;
			border: none;
			}	
		.point_area .method_list li::before {
			content: counter(number, decimal) ".";
			font-weight: bold;
			left: 0;
			position: absolute;
			color: #0059ac;
			}	
			
.caution_area {
	border: 1px solid #0059ac;
	padding: 25px;
	margin: 30px 0 25px 13.8%;
	}			
	.caution_area .caution_title {
		font-size: 24px;
		font-weight: bold;
		color: #0059ac;
		}		
	.caution_area .caution_read {
		font-size: 16px;
		margin-bottom: 20px;
		}
	.caution_area dl dt {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 5px;
		}
		.caution_area dl dt:before { 
			content: "×";
			color: #0059ac;
			margin-right: 4px;
			}
	.caution_area dl dd {
		margin: 0 0 20px 1.25em;
		font-size: 18px;
		color: #cc0000;
		font-weight: bold;
		padding-left:1.2em;
		text-indent:-1.2em;
		}
	.caution_area dl dd:last-child {margin-bottom: 0;}
		.caution_area dl dd:before { 
				content: "→";
				color: #cc0000;
				margin-right: 5px;
				}
		.caution_area dl dd span {
			background: #ffffcc;
			padding: 1px;
			}
	
	
	.touroku_area {
		background: url(/~/Media/coco/point/image/main_bg.png) repeat scroll left top;
		padding: 25px 0;
		}
		.touroku_inner {
			overflow: hidden;
			padding: 30px;
			width: 100%;
			max-width: 1000px;
			margin: 0 auto;
			background: #fff;
			}
			.touroku_area .touroku_t {
				font-size: 28px;
				margin-bottom: 20px;
				text-align: center;
				font-weight: bold;
				}
			.touroku_area .touroku_btn {
				text-align: center;
				margin: 0 auto 30px;
				}
			.touroku_area .touroku_txt {
				font-size: 16px;
				margin-bottom: 20px;
				text-align: center;
				}
			.touroku_area .touroku_btn02 {
				text-align: center;
				margin: 0 auto;
				}
			

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

#contents{
	font-size: 4.06vw;
	padding: 0;
	}

.point_main {
	background: url(/~/Media/coco/point/image/main_bg.png) repeat scroll left top;
	padding: 10px 0;
	}	
	.main_title {
		text-align: center;
		margin: 0 auto 30px;
		width: 96%;
		}	
	.point_main .step {
		width: 90%;
		margin: 0 auto;
		overflow: hidden;
		}
		.point_main .step li {
			float: left;
			width: 34%;
			margin-right: 0.5%;
			}
		.point_main .step li:last-child {
			width: 31%;
			margin-right: 0;
			}

.point_info {
	padding: 20px 0;
	}
	.point_area {
		overflow: hidden;
		padding: 0 6%;
		width: 100%;
		max-width: 1000px;
		margin: 0 auto 40px;
		background: #fff;
		}
		.point_area li {
			padding: 20px 0;
			border-bottom: 1px dashed #cccc;
			}
		.point_area li:last-child {
			border-bottom: none;
			padding-bottom: 0;
			}
			.point_area .t_icon {
				width: 20%;
				float: none;
				margin: 0 auto 20px;
				}
			.point_area .p_title {
				font-size: 5vw;
				font-weight: normal;
				margin-bottom: 10px;
				}
			.point_area .point_t {
				font-size: 6.5625vw;
				color: #00609c;
				margin-bottom: 15px;
				padding-left:25px;
				text-indent:-25px;
				}
				.point_area .point_t:before {
					margin:0 10px 0 0;
					content:" ";
					display:inline-block;
					width:15px;
					height:13px;
					background:url(/~/Media/coco/point/image/icon_%20arrow.png) no-repeat scroll left center;
					background-size:contain;
					vertical-align:middle;
					}				
			.point_area .t_txt {
				font-size: 4.375vw;
				margin: 0 0 10px 0;
				}
			.point_area .point_btn {
				text-align: center;
				width: 70%;
				margin: 0 auto;
				}
	
			.point_area .method_t {
				font-size: 4.375vw;
				margin-bottom: 5px;
				}
	
	.point_area .method_list {
			counter-reset: number;
			font-size: 4.375vw;
			overflow: hidden;
			}	
		.point_area .method_list > li {
			counter-increment: number;
			margin-bottom: 5px;
			padding: 0 0 0 1.7em;
			position: relative;
			border: none;
			}	
		.point_area .method_list li::before {
			content: counter(number, decimal) ".";
			font-weight: bold;
			left: 0;
			position: absolute;
			color: #0059ac;
			}	




.caution_area {
	padding: 15px;
	margin: 20px 0 ;
	}			
	.caution_area .caution_title {
		font-size: 4.375vw;
		}		
	.caution_area .caution_read {
		font-size: 4.06vw;
		margin-bottom: 20px;
		}
	.caution_area dl dt {
		font-size: 3.75vw;
		margin-bottom: 5px;
	padding-left:1em;
	text-indent:-1em;
		}
		.caution_area dl dt:before { 
			content: "×";
			color: #0059ac;
			margin-right: 4px;
			}
	.caution_area dl dd {
		margin: 0 0 20px 1.25em;
		font-size:  3.75vw;
		color: #cc0000;
		font-weight: bold;
		padding-left:1.4em;
		text-indent:-1.4em;
		}
	.caution_area dl dd:last-child {margin-bottom: 0;}
		.caution_area dl dd:before { 
				content: "→";
				color: #cc0000;
				margin-right: 5px;
				}
		.caution_area dl dd span {
			background: #ffffcc;
			padding: 1px;
			}

	.touroku_area {
		background: url(/~/Media/coco/point/image/main_bg.png) repeat scroll left top;
		padding: 16px 6%;
		}
		.touroku_inner {
			overflow: hidden;
			padding: 20px;
			width: 100%;
			max-width: 1000px;
			margin: 0 auto;
			background: #fff;
			}
			.touroku_area .touroku_t {
				font-size: 4.06vw;
				margin-bottom: 20px;
				text-align: center;
				font-weight: bold;
				}
			.touroku_area .touroku_btn {
				text-align: center;
				margin: 0 auto 30px;
				width: 85%;
				}
			.touroku_area .touroku_txt {
				font-size: 3.4375vw;
				margin-bottom: 20px;
				text-align: left;
				}
			.touroku_area .touroku_btn02 {
				text-align: center;
				margin: 0 auto;
				width: 65%;
				}



}