@charset "UTF-8";
#himitsu{
	background:url(../img/bg.png) repeat-x;
	text-align:center;
	width:980px;
	margin:0 auto;
}
.clicktxt{
	padding:8px;
	border-radius:50px;
	background:#FFF;
	display:inline-block;
	margin:15px 0;
}
.clicktxt em{
	font-size:12px;
	background:url(../img/point_ligthblue.png) no-repeat left center;
	padding:0 0 0 20px;
	background-size:contain;
}
#himitsu header h1{
	padding:0 0 30px 0;
}
#himitsu header p{
	font-size:16px;
}
#himitsu header {
	background:url(../img/ttl_bd.png) repeat-x bottom left;
	padding:50px 0 40px 0;
	width:93%;
	margin:0 auto 30px auto;
}
.point_box{
	position:relative;
	margin-bottom:30px;
}
.modal_box{
	position:fixed;
	z-index:999;
	width:300px;
	top:40%;
	left:50%;
	margin-left:-150px;
	background:#FFFFFF;
	border-radius:12px;
	display:none;
}
.modal{
	position:relative;
	border-radius:12px;
}
.modal dt{
	padding:10px;
	font-size:16px;
	color:#FFFFFF;
	background:rgba(0,0,0,1.00);
	text-align:left;
	border-radius:8px 8px 0 0;
}
.modal dd{
	padding:15px;
	font-size:16px;
	background:#FFF;
	text-align:left;
	border-radius:0 0 8px 8px ;
	font-size:14px;
	line-height:1.6;
}
.modal dd a{
	display:block;
	background:#7b5755;
	border-radius:50px;
	margin:15px auto 0 auto;
	width:60%;
	text-align:center;
	color:#FFFFFF;
	padding:5px 0;
	
}
.modal dd a:after{
	content:"";
	display:inline-block;
	background:url(../img/arrow.png) no-repeat center right;
	width:13px;
	height:10px;
}
.modal .btnClose{
	cursor:pointer;
	width:30px;
	height:30px;
	line-height:30px;
	font-size:20px;
	color:#FFF;
	background:#000;
	border-radius:50px;
	display:inline-block;
	text-align:center;
	position:absolute;
	right:-15px;
	top:-15px;
}
.pink .modal{border:2px solid #E8232F;}
.pink .modal dt{background:#E8232F;} 
.pink .modal .btnClose{background:#E8232F;} 

.blue .modal{border:2px solid #003783;}
.blue .modal dt{background:#003783;} 
.blue .modal .btnClose{background:#003783;} 

.red .modal{border:2px solid #E60012;}
.red .modal dt{background:#E60012;} 
.red .modal .btnClose{background:#E60012;} 

.green .modal{border:2px solid #23AC38;}
.green .modal dt{background:#23AC38;} 
.green .modal .btnClose{background:#23AC38;} 

.orange .modal{border:2px solid #FF6700;}
.orange .modal dt{background:#FF6700;} 
.orange .modal .btnClose{background:#FF6700;} 

.brown .modal{border:2px solid #6A463A;}
.brown .modal dt{background:#6A463A;} 
.brown .modal .btnClose{background:#6A463A;} 


.point_box span{
	position:absolute;
	cursor:pointer;
}

.point_box span img{
	width:35px;
	height:35px;
}

.point_box span img:hover{
	opacity:0.8;
}
.point_box span.point_4floar{
    left: 73%;
    top: 1%;
}
.point_box span.point_outdodr{
   
    left: 49.4%;
    top: 10%;
}
.point_box span.point_noize{
    left: 9%;
    top: 9%;
}
.point_box span.point_silence{
    
    left: 62%;
    top: 21.5%;
}
.point_box span.point_weight{
	
    left: 49%;
    top: 40%;
}
.point_box span.point_warm{
    left: 58%;
    top: 46%;
}
.point_box span.point_tomoni{
    left: 48%;
    top: 56%;
}
.point_box span.point_fukinuke{
    left: 62%;
    top: 61%;
}
.point_box span.point_garden{
    left: 26.5%;
    top: 16%;
}
.point_box span.point_meter{
    left: 32%;
    top: 42%;
}
.point_box span.point_living{
	
    left: 48%;
    top: 62.5%;
}
.point_box span.point_taifu{
	
    left: 17%;
    top: 60%;
}
.point_box span.point_fire{
	
    left: 77%;
    top: 63%;
}
.point_box span.point_quake{
	
    left: 63%;
    top: 90%;
}
								
.col_box{
	background:#f6ebd9;
	padding:20px;
	text-align:left;
	width:440px;
}				
.col_box h3{
	color:#43100d;
	font-size:18px;
	font-weight:bold;
	background:url(../img/q_bd.png) no-repeat bottom left;
	padding:0 0 15px 0;
	margin-bottom:10px;
	line-height:2;
}
.col_box h3:before{
	content:"";
	display:inline-block;
	width:30px;
	height:30px;
	background:url(../img/icon_q.png);
	background-size:contain;
	vertical-align:middle;
	margin:0 5px 0 ;
}
.col_wrap{
	padding-top:20px;
}
.col_box p{
	font-size:16px;
	line-height:1.6;
}
.col_box.colL{
	float:left;
}
.col_box.colR{
	float:right;
}
.col_box .btn_box{
	text-align:right;
}
.col_box a{
	display:inline-block;
	background:#7b5755;
	border-radius:50px;
	margin:15px auto 0 auto;
	text-align:center;
	color:#FFFFFF;
	padding:5px 10px;
	
}
.col_box a:after{
	content:"";
	display:inline-block;
	background:url(../img/arrow.png) no-repeat center right;
	width:13px;
	height:10px;
}
								
@media screen and (max-width: 834px) {
	
#himitsu{
	width: auto;
}
.point_box img{
	width:100%;
}				
.col_box{
	margin:0 auto;
	width:85%;
}	
.col_box.colL{
	float:none;
	margin-bottom:20px;
}
.col_box.colR{
	float:none;
}		
}
@media screen and (max-width: 500px) {
	
.point_box span img{
	width:20px;
	height:20px;
}
.modal_box{
	width:240px;
	margin-left:-120px;
}
}