@charset "utf-8";
/* CSS Document */

#bloodtype, .aboutbooks{ font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 13px;}

.mainread{ font-size:108%; line-height: 1.3; margin: 10px 0; }
.title{ display: block; margin: 10px 0;}
.toplist { width: 670px; overflow: hidden;}
/*.toplist ul{ width: 685px; margin-left: -15px; position: relative;}*/
.toplist ul{
	width: 690px;
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin-left: -10px;
padding: 0; }

*html .toplist ul{
	width: 690px;
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin-left: -25px;
padding: 0; }

.toplist li{
background-repeat: no-repeat; background-position: 0 0;
position: relative;
float: left;
width: 315px;
height: 340px;
padding: 0;
border: 1px solid #b1b1b1;
margin: 0 3px 15px 13px;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
}

.toplist li:before, .toplist li:after, .notebox div.inner:before, .notebox div.inner:after{
content: " ";
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 60%;
max-width: 300px; 
max-height: 100px;
height: 55%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
-webkit-transform: skew(-10deg) rotate(-5deg);
-moz-transform: skew(-10deg) rotate(-5deg);
-ms-transform: skew(-10deg) rotate(-5deg);
-o-transform: skew(-10deg) rotate(-5deg);
transform: skew(-10deg) rotate(-5deg);}

.toplist li:after,.notebox div.inner:after{
left: auto;
right: 10px;
transform: skew(10deg) rotate(5deg);
-webkit-transform: skew(10deg) rotate(5deg);
-moz-transform: skew(10deg) rotate(5deg);
-ms-transform: skew(10deg) rotate(5deg);
-o-transform: skew(10deg) rotate(5deg);
 }

.notebox div.inner:before, .notebox div.inner:after{bottom: 15px;}

.toplist .type_a{ background-image: url(https://image.excite.co.jp/jp/fortune/blood/bg_a.jpg);}
.toplist .type_b{ background-image: url(https://image.excite.co.jp/jp/fortune/blood/bg_b.jpg);}
.toplist .type_o{ background-image: url(https://image.excite.co.jp/jp/fortune/blood/bg_o.jpg);}
.toplist .type_ab{ background-image: url(https://image.excite.co.jp/jp/fortune/blood/bg_ab.jpg);}
.toplist h2{ display: block; width: 320px; height: 0; padding-top: 92px;  overflow: hidden; zoom: 1;}
.toplist p{ width: 180px; font-size: 108%; line-height: 1.4; margin: 10px 0 10px 14px;}
.toplist p a{ display: block; margin-bottom: 10px; width: 180px; height: 43px; display: block;  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.75);	-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.75); box-shadow: 1px 2px 2px rgba(0,0,0,0.75);}
.toplist p a:hover,.examination:hover{ filter: alpha(opacity=80); -moz-opacity:0.85; opacity:0.8;}

.notebox{ position: relative;z-index: 1; /* prevent shadows falling behind containers with backgrounds */overflow: hidden;list-style: none; padding: 0; }

.notebox div.inner{ 
margin: 0 3px 20px 3px; background: url(https://image.excite.co.jp/jp/fortune/blood/note_bg.gif) repeat 0 0; border: 1px solid #b1b1b1;
position: relative;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

}
.notebox.aboutbooks div.inner{ min-height: 300px;padding: 15px;}

.notebox.aboutbooks div.inner h2{ font-size: 138.5%; font-weight: bold; margin-bottom: 15px;}
.notebox.aboutbooks .inner p{ font-size: 116%; margin-bottom: 15px;}
.notebox div.inner p{ font-size: 146.5%; line-height: 1.4;}
.notebox.notebox.aboutbooks div.inner dl{ margin: 10px 0;}
.notebox.notebox.aboutbooks div.inner dt{ float: left;}

.books{ display: inline;}
.books li{ display: block; width: 90px; float: left; text-align: center; margin-right: 10px;}

.books a img{ margin-bottom: 10px;}

h1.type img{
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.75);
	-moz-box-shadow: 1px 1px 3px rgba(0,0,0,.75);
	box-shadow: 1px 1px 3px rgba(0,0,0,.75);
}

.upper{ padding: 13px 13px 0 13px;}
.about p.text{ margin: 15px 0; line-height: 1.4;}
.board{ width: 637px; background: url(https://image.excite.co.jp/jp/fortune/blood/board_02.jpg) repeat-y center 0; position: relative;}
.board .deco{ background:url(https://image.excite.co.jp/jp/fortune/blood/board_03.jpg) no-repeat center bottom; padding-bottom: 25px;}
h2.boardtitle{ width: 637px;  background: url(https://image.excite.co.jp/jp/fortune/blood/board_01.png) no-repeat top; font-size: 174%; text-align: center; padding: 70px 0 10px 0; margin: 0 auto; font-weight: bold;}
.board ol{ padding: 20px 0 10px 0; margin: 0 40px;}
.board li{ list-style: decimal outside; margin: 0 0 10px 50px; font-size: 131%; color: #4d1c04;}
.exam .board li{ list-style: none;}

.t_border{ background: url(https://image.excite.co.jp/jp/fortune/blood/memo_border.jpg) repeat-x top;}
.b_border{ background: url(https://image.excite.co.jp/jp/fortune/blood/memo_border.jpg) repeat-x bottom;}
.examination{ display: block; width: 401px; height: 46px;  margin: 15px auto 20px auto; text-align: center;}
.examination img{ text-align: center;}
.board dl.bookinfo{ margin: 0 40px; padding: 15px 0; overflow: hidden; zoom: 1;}
.board dl.bookinfo dt{ margin-right: 15px;}
.board dl.bookinfo h3{ font-size: 174%; margin: 10px 0;}

#result{ background: url(https://image.excite.co.jp/jp/fortune/blood/prise_bottom.jpg) no-repeat center bottom; width: 637px; margin: 10px auto;}
#result .btm{ background: url(https://image.excite.co.jp/jp/fortune/blood/prise_top.jpg) no-repeat center top; padding: 50px;}
#result span{ font-size: 77%; font-weight: normal; color: #000000;}
#result h1{ text-align: center; font-size: 30px; font-weight: bold; color: #d82446; padding: 15px 0 20px 0;}
#result p{ padding: 15px 0; line-height: 1.5; letter-spacing: 0.01em;}

dl.question, div.answer{ margin: 0 40px; overflow: hidden; zoom: 1;}
dl.question dt{ float: left; display: block; font-size: 138.5%; margin-right: 10px; height: 100px;}
dl.question dd{ display: block; font-size: 100%;}
dl.question.exam{ margin-bottom: 20px;}
dl.question.exam dt{ font-size: 197%; font-weight: bold}
dl.question.exam dd{ width: 472px; font-size: 138.5%; float: right; margin-top: 5px;}
*html dl.question.exam dd{ width: 465px; font-size: 138.5%; float: right;}
*:first-child+html dl.question.exam dd{ width: 465px; font-size: 138.5%; float: right;}
dl.question.exam dd a{ background: url(https://image.excite.co.jp/jp/fortune/blood/checkbox_nom.gif) no-repeat 0 1px; display: block; color: #0079bf; text-decoration: underline; padding: 0 0 0 40px;}
dl.question.exam dd a:hover{ background: url(https://image.excite.co.jp/jp/fortune/blood/checkbox_ckd.gif) no-repeat no-repeat 0 1px;}
.board dl.question.exam dd li{ margin: 0 0 10px 0; list-style: none; padding: 0; font-size: 100%;}

div.answer{ background: #f2d3d3; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 15px; margin-bottom: 15px;}
div.answer dl{overflow: hidden; zoom: 1;}

div.answer dt{ float: left; display: block; font-size: 138.5%; margin-right: 10px; height: 60px;}
div.answer dd{ display: block; font-size: 138.5%; font-weight: bold; line-height: 1.2; color: #c32442;}
div.answer p{ color:#C32442}

.other_type{ text-align: center;}
.other_type ul{ width: 680px; margin: 0 0 0 -4px;}
.other_type li{ display: inline;}
.other_type li a{ float: left; margin: 0 0 0 3px;}

.chart_title{ margin: 20px 0; text-align: center;}
.chart_title h1{ margin-bottom: 10px; }

#sns{ margin: 15px 0; text-align: right;}
#sns iframe{ display: inline;}