#contents {
    margin: 0 auto;
    padding: 10px 0 50px 0;
    width: 100%;
    font-family:'Nato Sans' , sans-serif;
}

#top_text{
	border:1px solid #696969;
	padding:8px;
	border-radius:10px;
}

#top_text > p{
	font-size:14px;
	margin:2px 0 2px 2px;
	word-wrap:break-word;
}

#top_text + hr{
	margin:15px 0 0 0;
	border:1px dotted #696969;
	border-top:none;
}


.modal_title > a{
	text-decoration:none;
}

#contents a {
	outline:none;

}

#contents a:link,
#contents a:visited {
	text-decoration:none;
	color: #036393;
}

#contents a:hover {
	text-decoration:none;
	color: #1278B8;
}
 
 
iframe{
	border:0;
	margin:0;
	padding:0;
	width:500px;
	height:500px;
	-webkit-border-radius:14px;
	-moz-border-radius:14px;
	border-radius:14px;
}
 
 

/* design */


#modal_content {
	width:500px;
	height:500px;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 1000002 ;
	box-shadow:0px 0px 5px 3px rgba( 0,0,0, 0.1 );
	-webkit-border-radius:14px;
	-moz-border-radius:14px;
	border-radius:14px;
	font-family:'Nato Sans' , sans-serif;
}
  
#modal_overlay {
	z-index: 1000001 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}




.modal_title {
	position:absolute;
	top:35px;
	left:0px;
	width: 500px;
	height: 50px;
	line-height: 50px;
	color: #fff;
	font-size: 22px;
	text-align: left;
	padding-left: 130px;
	background: #0280C6;
	background-image: radial-gradient(#0587C1 15%, transparent 0), radial-gradient(#0587C1 15%, transparent 0);
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px;
	text-shadow:0px 0px 1px #222;
}


.modal_title a{
	color:#FFF;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	z-index:1000020;
}

.modal_title a[target="_blank"]{
	padding-right:15px;
	background: url(http://www.badge-man.net/images/gallery/link_grey.png)no-repeat right;
} 

.modal_title a[target="_blank"]:hover{
	padding-right:15px;
	background: url(http://www.badge-man.net/images/gallery/link_grey_gradient.png)no-repeat right;
} 

.title_img_box{
	position:relative;
	margin-top:5px;
	height:120px;
	
}

.img_box{
	position:absolute;
	top:10px;
	left:15px;
	width:100px;
	height:100px;
	border:1px solid #000000;
	z-index:1000005;
}

.modal_text_box{
	height:339px;
	width:500px;
	text-align:left;
	overflow:scroll;
	margin-top:5px;
}

.modal_sub_title{
	font-size:18px;
	font-weight:normal;
	color:#333;
	line-height:26px;
	margin:0px 0px 10px 0px;
	padding:2px 0 0 10px;
	background: -webkit-repeating-linear-gradient(-45deg, #eff5f9, #eff5f9 5px, #fff 5px, #fff 10px);
	background: repeating-linear-gradient(-45deg, #eff5f9, #eff5f9 5px, #fff 5px, #fff 10px);

}



.modal_text_box h4{
	font-size:13px;
	padding:0 0 0 5px;
	margin:5px 0 0 0;
	line-height:25px;
	font-weight:bold;
	color:#3E3A39;
}

.modal_text_box p{
	font-size:13px;
	margin:0;
	line-height:22px;
	padding: 0 10px 0 15px;
	word-wrap:break-word;
	color:#3E3A39;
}

.c_name{
	font-size:14px;
	text-align:center;
}

#close_point{
	position:relative;
	z-index:1000005;	
}

#modal_close{
	position:absolute;
	top:-18px;
	left:485px;
	border:1px solid #FFF;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	background-color: rgba( 0,0,0, 0.4 ) ;
	width:30px;
	height:30px;
	box-shadow:-1px 1px 1px #333;
	background-image:url(https://www.badge-man.net/images/gallery/close_batsu.png); 
	background-position: 50% 50%; 
	background-repeat: no-repeat;
	background-size:22px;
}

#modal_close:hover{
	cursor:pointer;
}

#button_point{
	margin:-10px 0 0 0;
	padding:0px 0px 0px 5px;
	font-size:30px;
	color:#FFF;
}

.next_page_point{
	position:relative;
}
.next_page{
	position: absolute;
	top: 467px;
	left: 50%;
	font-size: 13px;
	font-weight: bold;
	transform: translate(-50%,0);
	background-color: #fff;
	padding: 0.2em 1em;
	border-radius: 100px;
}


.img_page{
	width:500px;
	height:500px;
}

.next_page a {
    color: #333;
	text-decoration: none;
}


@media screen and ( max-width:499px ){


iframe{
	border:0;
	margin:0;
	padding:0;
	width:350px;
	height:350px;
}


#modal_content {
	width:350px;
	height:350px;
	background: #fff ;
	position: fixed ;
	display: none ;
	box-shadow:0px 0px 5px 3px rgba( 0,0,0, 0.1 );
	/* -webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px; */
}

.img_page{
	width:350px;
	height:350px;	
}

.img_page img{
	width:350px;
	height:350px;	
}
	

.modal_title {
	position:absolute;
	top:26px;
	left:0px;
	width: 350px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	padding-left:110px;
}




.title_img_box{
	position:relative;
	height:95px;
	
}

.img_box{
	position:absolute;
	top:5px;
	left:15px;
	width:80px;
	height:80px;
	border:1px solid #000000;
}

.img_box > img{
	width:80px;
	height:80px;
}

.modal_text_box{
	height:215px;
	width:350px;
	text-align:left;
	overflow:scroll;
}

.modal_sub_title{
	font-size:15px;
	font-weight:normal;
	color:#333;
	line-height:20px;
	margin:0px 0px 5px 0px;
	padding-top:0px;
	background: -webkit-repeating-linear-gradient(-45deg, #eff5f9, #eff5f9 5px, #fff 5px, #fff 10px);
	background: repeating-linear-gradient(-45deg, #eff5f9, #eff5f9 5px, #fff 5px, #fff 10px);

}

#modal_close{
	top:-30px;
	left:0px;
	width:40px;
	height:25px;
	border:1px solid rgba( 255,255,255, 0.5 ) ;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	background-color: rgba( 0,0,0, 0.2 ) ;
	box-shadow:-1px 1px 1px #333;
	background-image:url(http://www.badge-man.net/images/gallery/close_batsu.png); 
	background-position: 50% 50%; 
	background-repeat: no-repeat;
	background-size:18px;
}

.modal_text_box h4{
	font-size:11px;
	padding-top:5px;
	margin:5px 0 0 0;
	line-height:16px;
	font-weight:bold;
	color:#3E3A39;
}

.modal_text_box p{
	font-size:11px;
	margin:0;
	line-height:16px;
	padding-left:15px;
	word-wrap:break-word;
	color:#3E3A39;
}


.next_page_point{
	position:relative;
}
.next_page{
	top: 320px;
	font-size: 10px;
}


}