@charset "shift_jis";

/* =====================================================================
	text
====================================================================== */

.txt-img img {
	margin: 0 10px 10px 10px;
}
.lbg{
	line-height: 140%;
}
blockquote {
	margin: 15px;
	padding: 10px;
	border: 2px dotted #CCC;
	color: #666;
	font-size: 0.95em;
}
.ylw {
	background-color: #FFFCCC;
	font-weight: bold;
	padding: 2px;
}


/* =====================================================================
	rank
====================================================================== */

.rank1, .rank2, .rank3, .rank4, .rank5, .rank6, .rank7, .rank8, .rank9, .rank10 {
	padding: 32px 0 0 120px;
	margin: 0 0 20px 0;
	min-height: 75px;
	font-size: 2em;
}
.rank1 {
	background: url(../img/rank1.png) no-repeat 0 0;
}
.rank2 {
	background: url(../img/rank2.png) no-repeat 0 0;
}
.rank3 {
	background: url(../img/rank3.png) no-repeat 0 0;
}
.rank4 {
	background: url(../img/rank4.png) no-repeat 15px 0;
}
.rank5 {
	background: url(../img/rank5.png) no-repeat 15px 0;
}
.rank6 {
	background: url(../img/rank6.png) no-repeat 15px 15px;
}
.rank7 {
	background: url(../img/rank7.png) no-repeat 15px 15px;
}
.rank8 {
	background: url(../img/rank8.png) no-repeat 15px 15px;
}
.rank9 {
	background: url(../img/rank9.png) no-repeat 15px 15px;
}
.rank10 {
	background: url(../img/rank10.png) no-repeat 15px 15px;
}
@media (max-width:767px){
	.rank1, .rank2, .rank3, .rank4, .rank5, .rank6, .rank7, .rank8, .rank9, .rank10 {
		padding: 18px 0 0 70px;
		background-size: 62px 50px;
		min-height: 65px;
		font-size: 1.2em;
	}
}


/* =====================================================================
	point
====================================================================== */

.point1, .point2, .point3, .point4, .point5, .point6, .point7, .point8, .point9, .point10 {
	margin: 0 0 20px 0;
	padding: 10px 0 0 70px;
	min-height: 60px;
}
.point1 {
	background: url(../img/icon_point1.jpg) no-repeat;
}
.point2 {
	background: url(../img/icon_point2.jpg) no-repeat;
}
.point3 {
	background: url(../img/icon_point3.jpg) no-repeat;
}
.point4 {
	background: url(../img/icon_point4.jpg) no-repeat;
}
.point5 {
	background: url(../img/icon_point5.jpg) no-repeat;
}
.point6 {
	background: url(../img/icon_point6.jpg) no-repeat;
}
.point7 {
	background: url(../img/icon_point7.jpg) no-repeat;
}
.point8 {
	background: url(../img/icon_point8.jpg) no-repeat;
}
.point9 {
	background: url(../img/icon_point9.jpg) no-repeat;
}
.point10 {
	background: url(../img/icon_point10.jpg) no-repeat;
}
@media (max-width:767px){
	.point1, .point2, .point3, .point4, .point5, .point6, .point7, .point8, .point9, .point10 {
		padding: 10px 0 0 60px;
		background-size: 50px;
		min-height: 50px;
	}
}


/* =====================================================================
	arrow
====================================================================== */

.arrow_orange, .arrow_red, .arrow_black, .arrow_blue {
	padding: 2px 0 0 30px;
}
.arrow_orange {
	background: url(../img/arrow_orange.png) no-repeat;
}
.arrow_red {
	background: url(../img/arrow_red.png) no-repeat;
}
.arrow_black {
	background: url(../img/arrow_black.png) no-repeat;
}
.arrow_blue {
	background: url(../img/arrow_blue.png) no-repeat;
}


/* =====================================================================
	alert
====================================================================== */

.alert, .accept, .attention, .thint {
	position: relative;
	margin: 0 auto 20px auto;
	padding: 20px 20px 20px 100px;
	border-radius: 10px;
}
.alert:before, .accept:before, .attention:before, .thint:before {
	position: absolute;
	top: 20px;
	left: 15px;
	content: " ";
	width: 75px;
	height: 45px;
}
.alert {
	border: 2px solid #ffefef;
}
.alert:before {
	background: url(../img/alert.png) no-repeat;
}
.accept {
	border: 2px solid #effada;
}
.accept:before {
	background: url(../img/alert_accept.png) no-repeat;
}
.attention {
	border: 2px solid #fde8a8;
}
.attention:before {
	background: url(../img/alert_attention.png) no-repeat;
}
.thint {
	border: 2px solid #eff4fa;
}
.thint:before {
	background: url(../img/alert_thint.png) no-repeat;
}

.user1, .user2, .user3, .user4 {
	position: relative;
	margin: 0 auto 20px auto;
	padding: 20px 20px 20px 180px;
	background: #fff;
	border: 1px solid #ccc;
	min-height: 200px;
	border-radius: 10px;
	box-shadow: 1px 1px 2px #ddd;
}
.user1:before, .user2:before, .user3:before, .user4:before {
	content: " ";
	position: absolute;
	bottom: 5px;
	left: 5px;
	width: 176px;
	height: 193px;
}
.user1 {}
.user1:before {
	background: url(../img/user1.png) no-repeat;
}
.user2 {}
.user2:before {
	background: url(../img/user2.png) no-repeat;
}
.user3 {}
.user3:before {
	background: url(../img/user3.png) no-repeat;
}
.user4 {}
.user4:before {
	background: url(../img/user4.png) no-repeat;
}

@media (max-width:767px){
	.alert, .accept, .attention, .thint {
		padding: 20px 10px 20px 55px;
		box-shadow: 1px 1px 2px #ddd;
	}
	.alert:before, .accept:before, .attention:before, .thint:before {
		background-size: contain;
		top: -5px;
		left: -10px;
		width: 60px;
		height: 56.4px;
	}

	.user1, .user2, .user3, .user4 {
		position: relative;
		margin: 0 auto 20px auto;
		padding: 20px 10px 20px 90px;
		min-height: 100px;
	}
	.user1:before, .user2:before, .user3:before, .user4:before {
		background-size: contain;
		width: 88px;
		height: 96.5px;
	}
}

.noimage {
	padding-left: 20px;
	background-image: none;
	min-height: auto;
}
.noimage:before {
	content: none;
}


/* =====================================================================
	box
====================================================================== */

.nmlbox, .dottbox, .ylwbox, .graybg, .rbox1, .rbox2, .rbox3, .rbox4 {
	margin: 0 auto 20px auto;
	padding: 20px;
	box-shadow: 1px 1px 2px #ddd;
}
.nmlbox {
	border: 1px solid #ccc;
}
.dottbox {
	border: 1px dotted #ccc;
}
.ylwbox {
	border: 2px solid #FFF1C8;
	background: #FFFEEF
}
.rbox1 {
	border: 1px solid #ccc;
	background: #efefef;
}
.rbox2 {
	padding: 18px;
	border: 3px solid #EF9E04;
}
.rbox3 {
	border: 1px solid #efefef;
}
.rbox4 {
	background: #efefef;
}
.graybg {
	background: #efefef;
}
.rnd1 {
	border-radius: 10px;
}
.shadow1 {
	box-shadow: 2px 2px 3px #999;
}
.shadow2 {
	box-shadow: 0px 0px 3px #999;
}


/* =====================================================================
	border
====================================================================== */

.border1,.border2,.border3,.borderdot,.borderdot2{
	margin: 10px;
	padding: 0px;
	line-height: 1px;
	height: 1px;
	_zoom: 1;
	overflow: hidden;
}

.border1 {
	border-bottom:solid 1px #999;
}
.border2 {
	border-bottom:solid 1px #e8380d;
}
.border3 {
	border-bottom:solid 1px #008cd6;
}
.borderdot {
	border-top:dotted 1px #999;
}
.borderdot2 {
	border-top:dotted 2px #999;
}


/* =====================================================================
	question
====================================================================== */

.question1 {
	position: relative;
	margin: 0 20px 30px 60px;
	padding: 20px 20px 20px 80px;
	border: 3px solid #8CC253;
	border-radius: 10px;
	box-shadow: 1px 1px 2px #ddd;
	min-height: 110px;
}
.question1:before {
	content: " ";
	position: absolute;
	top: -15px;
	left: -70px;
	width: 144px;
	height: 136px;
	background: url(../img/question1.png) no-repeat;
}
.answer1 {
	position: relative;
	margin: 0 20px 30px 60px;
	padding: 20px 20px 20px 80px;
	border: 3px solid #92C1ED;
	border-radius: 10px;
	box-shadow: 1px 1px 2px #ddd;
	min-height: 110px;
}
.answer1:before {
	content: " ";
	position: absolute;
	top: -15px;
	left: -70px;
	width: 144px;
	height: 136px;
	background: url(../img/answer1.png) no-repeat;
}

.question2 {
	position: relative;
	margin: 0 100px 0px 100px;
	padding: 20px;
	border-top: 2px dashed #666;
	border-bottom: 2px dashed #666;
}
.question2:before {
	content: " ";
	position: absolute;
	top: -5px;
	left: -100px;
	width: 94px;
	height: 88px;
	background: url(../img/question2.png) no-repeat;
}
.answer2 {
	position: relative;
	margin: 0 100px 30px 100px;
	padding: 20px;
	border-bottom: 2px dashed #666;
	text-align: right;
}
.answer2:after {
	content: " ";
	position: absolute;
	top: -10px;
	right: -100px;
	width: 96px;
	height: 88px;
	background: url(../img/answer2.png) no-repeat;
}


/* =====================================================================
	balloon
====================================================================== */

.bln{
	_zoom: 1;
	overflow: hidden;
	padding: 0;
	margin: 0;
}
.b_body{
	margin:0;
	width:auto;
	padding: 12px 19px;
	_zoom: 1;
	overflow: hidden;
}

div.bln:after{height:0; visibility: hidden; content: ".";   display: block; clear: both;}

.bln .img-t, .bln .img-r, .bln .img-b, .bln .img-l {
	position:relative;
	margin: 0 !important;
	padding: 0 !important;
	border-style: solid;
	border-width: 10px;
	width: 28px;
	height: 19px;
}
.bln .img-t:before, .bln .img-r:before, .bln .img-b:before, .bln .img-l:before {
	content: "";
	position: absolute;
	display: block;
	border-style: solid;
	border-width: 10px;
}
.bln .img-t {
	float: none;
	top: 0px;
	left: 30px;
	width: 22px;
	height: 22px;
}
.bln .img-t:before {
	top: -7px;
	left: -9px;
}
.bln .img-r {
	float: right;
	top: 18px;
	right: 1px;
}
.bln .img-r:before {
	top: -10px;
	right: 0px;
}
.bln .img-b {
	float: none;
	bottom: 0px;
	left: 30px;
	width: 22px;
	height: 22px;
}
.bln .img-b:before {
	bottom: -7px;
	left: -9px;
}
.bln .img-l {
	float: left;
	top: 18px;
	left: 1px;
}
.bln .img-l:before {
	top: -10px;
	left: 0px;
}


.balloon1 .b_body{
	background-color:#F5F5F5;
	border:solid 1px #CCC;
}
.balloon1 .img-t { border-color: transparent transparent #CCC transparent; }
.balloon1 .img-r { border-color: transparent transparent transparent #CCC; }
.balloon1 .img-b { border-color: #CCC transparent transparent transparent; }
.balloon1 .img-l { border-color: transparent #CCC transparent transparent; }
.balloon1 .img-t:before { border-color: transparent transparent #F5F5F5 transparent; }
.balloon1 .img-r:before { border-color: transparent transparent transparent #F5F5F5; }
.balloon1 .img-b:before { border-color: #F5F5F5 transparent transparent transparent; }
.balloon1 .img-l:before { border-color: transparent #F5F5F5 transparent transparent; }

.balloon2 .b_body{
	background-color:#FFF;
	border:solid 1px #CCC;
}
.balloon2 .img-t { border-color: transparent transparent #CCC transparent; }
.balloon2 .img-r { border-color: transparent transparent transparent #CCC; }
.balloon2 .img-b { border-color: #CCC transparent transparent transparent; }
.balloon2 .img-l { border-color: transparent #CCC transparent transparent; }
.balloon2 .img-t:before { border-color: transparent transparent #FFF transparent; }
.balloon2 .img-r:before { border-color: transparent transparent transparent #FFF; }
.balloon2 .img-b:before { border-color: #FFF transparent transparent transparent; }
.balloon2 .img-l:before { border-color: transparent #FFF transparent transparent; }

.balloon3 .b_body{
	background-color:#EBEBEB;
}
.balloon3 .img-t { border-color: transparent transparent #EBEBEB transparent; }
.balloon3 .img-r { border-color: transparent transparent transparent #EBEBEB; }
.balloon3 .img-b { border-color: #EBEBEB transparent transparent transparent; }
.balloon3 .img-l { border-color: transparent #EBEBEB transparent transparent; }
.balloon3 .img-t:before { border-color: transparent; }
.balloon3 .img-r:before { border-color: transparent; }
.balloon3 .img-b:before { border-color: transparent; }
.balloon3 .img-l:before { border-color: transparent; }

.balloon4 .b_body{
	background-color:#EAF1FF;
	border:solid 1px #6AA3F9;
}
.balloon4 .img-t { border-color: transparent transparent #6AA3F9 transparent; }
.balloon4 .img-r { border-color: transparent transparent transparent #6AA3F9; }
.balloon4 .img-b { border-color: #6AA3F9 transparent transparent transparent; }
.balloon4 .img-l { border-color: transparent #6AA3F9 transparent transparent; }
.balloon4 .img-t:before { border-color: transparent transparent #EAF1FF transparent; }
.balloon4 .img-r:before { border-color: transparent transparent transparent #EAF1FF; }
.balloon4 .img-b:before { border-color: #EAF1FF transparent transparent transparent; }
.balloon4 .img-l:before { border-color: transparent #EAF1FF transparent transparent; }

.balloon5 .b_body{
	background-color:#FFEAEA;
	border:solid 1px #F96565;
}
.balloon5 .img-t { border-color: transparent transparent #F96565 transparent; }
.balloon5 .img-r { border-color: transparent transparent transparent #F96565; }
.balloon5 .img-b { border-color: #F96565 transparent transparent transparent; }
.balloon5 .img-l { border-color: transparent #F96565 transparent transparent; }
.balloon5 .img-t:before { border-color: transparent transparent #FFEAEA transparent; }
.balloon5 .img-r:before { border-color: transparent transparent transparent #FFEAEA; }
.balloon5 .img-b:before { border-color: #FFEAEA transparent transparent transparent; }
.balloon5 .img-l:before { border-color: transparent #FFEAEA transparent transparent; }

.balloon6 .b_body{
	background-color:#FFF;
	border:solid 2px #CC0000;
}
.balloon6 .img-t { border-color: transparent transparent #CC0000 transparent; }
.balloon6 .img-r { border-color: transparent transparent transparent #CC0000; }
.balloon6 .img-b { border-color: #CC0000 transparent transparent transparent; }
.balloon6 .img-l { border-color: transparent #CC0000 transparent transparent; }
.balloon6 .img-t:before { border-color: transparent transparent #FFF transparent; }
.balloon6 .img-r:before { border-color: transparent transparent transparent #FFF; }
.balloon6 .img-b:before { border-color: #FFF transparent transparent transparent; }
.balloon6 .img-l:before { border-color: transparent #FFF transparent transparent; }

.balloon7 .b_body{
	background-color:#FFF;
	border:solid 2px #0080B8;
}
.balloon7 .img-t { border-color: transparent transparent #0080B8 transparent; }
.balloon7 .img-r { border-color: transparent transparent transparent #0080B8; }
.balloon7 .img-b { border-color: #0080B8 transparent transparent transparent; }
.balloon7 .img-l { border-color: transparent #0080B8 transparent transparent; }
.balloon7 .img-t:before { border-color: transparent transparent #FFF transparent; }
.balloon7 .img-r:before { border-color: transparent transparent transparent #FFF; }
.balloon7 .img-b:before { border-color: #FFF transparent transparent transparent; }
.balloon7 .img-l:before { border-color: transparent #FFF transparent transparent; }

.balloon8 .b_body{
	background-color:#FFF;
	border:solid 2px #FF8201;
}
.balloon8 .img-t { border-color: transparent transparent #FF8201 transparent; }
.balloon8 .img-r { border-color: transparent transparent transparent #FF8201; }
.balloon8 .img-b { border-color: #FF8201 transparent transparent transparent; }
.balloon8 .img-l { border-color: transparent #FF8201 transparent transparent; }
.balloon8 .img-t:before { border-color: transparent transparent #FFF transparent; }
.balloon8 .img-r:before { border-color: transparent transparent transparent #FFF; }
.balloon8 .img-b:before { border-color: #FFF transparent transparent transparent; }
.balloon8 .img-l:before { border-color: transparent #FFF transparent transparent; }

.balloon9 .b_body{
	background-color:#FFF;
	border:2px solid #739221;
}
.balloon9 .img-t { border-color: transparent transparent #739221 transparent; }
.balloon9 .img-r { border-color: transparent transparent transparent #739221; }
.balloon9 .img-b { border-color: #739221 transparent transparent transparent; }
.balloon9 .img-l { border-color: transparent #739221 transparent transparent; }
.balloon9 .img-t:before { border-color: transparent transparent #FFF transparent; }
.balloon9 .img-r:before { border-color: transparent transparent transparent #FFF; }
.balloon9 .img-b:before { border-color: #FFF transparent transparent transparent; }
.balloon9 .img-l:before { border-color: transparent #FFF transparent transparent; }



/* =====================================================================
	記事スタイル
====================================================================== */

.txt-border, .txt-line, .txt-yellowback, .txt-grayback, .txt-colorback, .txt-frame, .txt-colorframe, .txt-rndbox, .txt-decbox1, .txt-decbox2 {
	margin: 10px 0;
	padding: 10px 20px;
}
.txt-border {
/*
	background: url(../img/dott.gif) repeat 0px 5px;
*/
	line-height: 22px;
	margin: 10px;
	padding: 0px;
}
.txt-border p {
	line-height: 22px;
}
.txt-line  {
	border: 2px solid #CCCCCC;
}
.txt-yellowback {
	background-color: #FFFEEF;
	border: 2px solid #FCF4C5;
}
.txt-grayback {
	border: 1px solid #CCCCCC;
	background-color: #FEFEFE;
}
.txt-colorback {
	border:solid 1px #f39800;
	background-color: #fdf0d9;
}
.txt-frame{
	border:solid 2px #CCCCCC;	
}
.txt-colorframe {
	border:solid 2px #e8380d;
}
.txt-rndbox {
	border: 1px solid #CCCCCC;
	border-radius: 10px;
}
.txt-decbox1 {
	background: #fff;
	border: 3px solid #ccc;
	border-radius: 10px;
	box-shadow: 2px 2px 3px #ccc;
}
.txt-decbox2 {
	background: #fce1db;
	border: 3px solid #e8380d;
	border-radius: 10px;
	box-shadow: 2px 2px 3px #666;
}
.hd{
	color: #333;
	text-decoration:none;
}


/* =====================================================================
	whatsnew
====================================================================== */

#whatsnew {
	margin-bottom: 10px;
	padding: 60px 10px 10px 10px;
	background: transparent url(../img/whatsnew.png) no-repeat 5px 5px;
	border: 3px solid #73CA9F;
	border-radius: 10px;
}
#whatsnew ul {
	list-style: none;
	margin-bottom: 10px;
}
#whatsnew ul li {
	padding-left: 12px;
	background: transparent url(../img/menu_arrow.jpg) no-repeat left center;
}


/* =====================================================================
	sitemaps
====================================================================== */
#sitemaps ul {
	margin: 10px 10px 20px 10px;
}
#sitemaps ul .l1 {
	list-style-type: none;
	margin-bottom: 5px;
	padding: 0 10px;
	border-bottom: 1px dotted #ccc;
}
#sitemaps ul .l2 {
	margin-bottom: 5px;
	margin-left: 20px;
}
#sitemaps ul .l3 {
	list-style-type: circle;
	margin-bottom: 5px;
	margin-left: 30px;
}