/* ページ右側のランク */
.ranks-title {
	border:1px solid #e1dcd3;
	border-bottom:none;
	background-color:#f9f8f6;
}

ul.ranks {
	margin:0;
	padding:0;	
	background-color:#FFF;
	border-top:1px solid #ededed;
}

ul.ranks>li {
	margin:0;
	padding:0;
	border-right:1px solid #ededed;
	border-left:1px solid #ededed;
	border-bottom:1px dotted #ededed;
	color:#666;
}

ul.ranks>li:last-child {
	border-bottom:1px solid #ededed;
}

ul.ranks>li>div {
	padding:10px;	
}

ul.ranks>li>div>.icons {
	margin-right:30px;
}

/* div のバナー */
.divbanner {
	border:1px solid #966;
	cursor:pointer;
}

.divbanner img {
	border:2px solid #ededed;
	margin-top:10px;
}

.divbanner h2 {
	background-color:transparent;
	font-size:14px;
	color:#000;
	border-bottom:1px solid #999;
	margin:0;
	padding:5px;
}

.divbanner p {
	font-size:12px;
	margin-top:5px;
}

/*
	divバナー
		初心者
*/
.banner-0 {
	background:url(/app/webroot/img/default/imgbutton.png) no-repeat;
	background-position: -122px -502px;
	margin:10px 0 0 0;
	padding:0;	
	border:2px solid #ededed;
	width:60px;
	height:80px;
	text-indent:-9999px;
	display:block;
}

.banner-2 {
	background:url(/app/webroot/img/default/imgbutton.png) no-repeat;
	background-position: -0px -502px;
	margin:10px 0 0 0;
	padding:0;	
	border:2px solid #ededed;
	width:60px;
	height:80px;
	text-indent:-9999px;
	display:block;
}

.banner-1 {
	background:url(/app/webroot/img/default/imgbutton.png) no-repeat;
	background-position: -61px -502px;
	margin:10px 0 0 0;
	padding:0;	
	border:2px solid #ededed;
	width:60px;
	height:80px;
	text-indent:-9999px;
	display:block;
}






/* hover で bg 色を変更 */

.hover-gray:hover {
	background-color:#f7f7f7;
}


.hover-blue:hover {
	background-color:#faffff;
}

.hover-orange:hover {
	background-color:#fff9f3;
}

.clickbox {
	cursor:pointer;	
}

.form .submit {
	text-align:center;	
}
/* 選択中のリンク */
a.active {
	font-weight:bold;	
}

/* 利用規約 */
.riyoukiyaku
{
font-size: 9pt;
color: #333333;
text-align: left;
line-height: 200%;
width: 95%;
height: 250px;
overflow-x: auto;
overflow-y: auto;
margin:20px;
background-color:#FFF;
}

.riyoukiyaku dt {
	margin:10px;
	font-size:14px;
}

.riyoukiyaku dd {
	margin-left: 20px;
}


/* グレーで読みにくくする*/
.gray {
	color:#b3b3b3;	
}

/* ソーシャルブックマークアイコン */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */

.block div {
	margin-right: 15px;
	float: left;
}


/* ツールチップ */
.tooltip {
	
}

.tooltip:hover {
	color:#000;
	text-decoration:none;
}

.hinticon {
	background:url(/app/webroot/img/default/question-small-white.png) center right no-repeat;
	padding-right:18px;
	color:#000;	
}

/* 説明ページカテゴリ別 */
.category dl {
	font-size:1.5em;
}

.category dl dt a {
	padding:10px 0 0 20px;
	background:url(/app/webroot/img/default/a-dir.gif) no-repeat left center;
}

.category dl dd {
	padding-top:10px;
}

.category dl dd a{
	padding-left:20px;
	margin:0 0 0 10px;
	background:url(/app/webroot/img/default/minibook.gif) no-repeat left center;
}

.category a.active {
	color:#F33;
	font-weight:bold;
}


/* ページャーの desc asc*/

.asc {
	padding:5px 5px 5px 25px;
	background:url(/app/webroot/img/default/asc.gif) no-repeat;
	background-position: 10px center;
}

.desc {
	padding:5px 5px 5px 25px;
	background:url(/app/webroot/img/default/desc.gif) no-repeat;
	background-position: 10px center;
}


/* ラベル */
.label > span{
	display:inline-block;
	border:1px dotted #333;
	color:#FFF;	
	padding:3px;
	margin-left:3px;
	font-weight:bold;
}

.label .color-00 {
	background-color:#00afce;
}

.label .color-01 {
	background-color:#8a2b86;
}

.label .color-02 {
	background-color:#e5002d;
}

.label .color-03 {
	background-color:#999;	
}

.label .color-04 {
	background-color:#F39;
}






ul.yahootab {
	border:1px #c6c4b7 solid;
}

ul.yahootab li {
	display:inline;
	border-right:1px #c6c4b7 solid;
	background-color:#fcfcfb;
}

ul.yahootab li a {
	display:inline-block;
	padding:10px;
}

ul.yahootab li a:hover {
	background-color:#FFC;
}

.mypage td:first-child{
	background-color:#fff;
	color:#000;
}

/* divをリンクできる用に */
.divlink {
	cursor:pointer;
}

.divlink:hover {
	background-color:#f0f7fa;
}

.divlink p {
	margin-top:20px;	
}

/*　ステップメニュー */
span.step {
	background:url(/app/webroot/img/default/imgbutton.png) no-repeat;
	display: inline-block;
	width: 88px;
	height: 46px;
}

span.step-1 {
	background-position: 0 -194px;	
}

span.step-2 {
	background-position: -89px -194px;	
}

span.step-3 {
	background-position: -180px -194px;	
}

span.step-4 {
	background-position: -270px -194px;	
}

span.step-5 {
	background-position: -359px -194px;	
}


.step h5 {
	margin-left:20px;
	margin-top:10px;
	font-size:1.5em;
}

.step p {
	margin-left:20px;
}

.step img {
	border:2px solid #ededed;	
}

.step .number {
	color:#b3c840;
	font-weight:bold;
	font-size:1.5em;
}

h2.effect {
	background-color:#FFF;
	color:#1d4060;
	line-height: 120%;
	margin:0;
	padding:0;
	font-size: 28px;	
	font-weight: 700;
	text-shadow: #c8cdcd;
}

/* 角丸メニュー */
ul.corner {
	background-color:#ededed;
	padding:10px;
}

ul.corner li {
	background-color:#fff;
	margin:5px 0 5px 0;
	padding:10px;
}


/* CSSスプライト　アイコン付きメニュー */

/*
	ミニアイコンは 15px 15px でつくっておいて
	widthは5px分多く指定するのがコツ
	<span class="iconmenu money"><i></i>ページヒントへ</span>
	<a href="/" style="text-decoration:none;"><span class="iconmenu money"><i></i>ページヒントへ</span></a>
	<a href="/pages/guide/" style="text-decoration:none;"><span class="icons hatena"><i></i>はじめての方へ</span></a>
*/
a.icons {
	text-decoration:none;	
}

i {
	background:url(/app/webroot/img/default/imgbutton.png) no-repeat;
	background-repeat:no-repeat;
	display: inline-block;
	vertical-align: middle;
}

/*
	レーティング
*/

i.rate-5 {
	display:block;
	width:105px;
	height:24px;
	background-position: 0px -324px;	
}

i.rate-4 {
	display:block;
	width:105px;
	height:24px;
	background-position: 0px -348px;	
}

i.rate-3 {
	display:block;
	width:105px;
	height:24px;
	background-position: 0px -372px;	
}

i.rate-2 {
	display:block;
	width:105px;
	height:24px;
	background-position: 0px -396px;	
}

i.rate-1 {
	display:block;
	width:105px;
	height:24px;
	background-position: 0px -420px;	
}


.icons.mail i {
	width:20px;
	height:20px;
	background-position: -215px -279px;
}

.icons.person i {
	width:20px;
	height:20px;
	background-position: -238px -279px;
}

.icons.hatena i {
	width:20px;
	height:20px;
	background-position: -233px -100px;
}

.icons.money i {
	width:21px;
	height:20px;
	padding-bottom:7px;
	background-position: -167px -275px;
}

.icons.bonus i {
	width:21px;
	height:20px;
	padding-bottom:7px;
	background-position: -278px -275px;
}

.icons.heart i {
	width:19px;
	height:20px;
	padding-bottom:7px;
	background-position: -192px -275px;
}

.icons.beginner i {
	width:19px;
	height:20px;
	padding-bottom:7px;
	background-position: -258px -275px;
}

.icons.rank1 i {
	width:21px;
	height:21px;
	padding-bottom:7px;
	background-position: -376px -244px;
}

.icons.rank2 i {
	width:21px;
	height:21px;
	padding-bottom:7px;
	background-position: -397px -244px;
}


.icons.rank3 i {
	width:21px;
	height:21px;
	padding-bottom:7px;
	background-position: -419px -244px;
}





/* 付箋 */
div.fusen {
	background:url(/app/webroot/img/fusen.png);
	background-repeat:no-repeat;
	height:48px;
	width:188px;
	text-align:left;
}

div.fusen.type-0 {
	background-position: 0px 0px;
}

div.fusen.type-1 {
	background-position: -188px 0px;
}

div.fusen span {
	display:block;
	padding-top:15px;
	padding-left:30px;
	font-size:18px;
}



div.fusen.type-1 span {
	font-weight:bold;
}

/* ヒント */

span.icon {
	background:url(/app/webroot/img/default/imgbutton.png) no-repeat;
	background-repeat:no-repeat;
	display: inline-block;
	vertical-align: middle;
	
}

span.icon.hatena {
	width:15px;
	height:15px;
	background-position: -233px -101px;
}

div.attention,div.hint {
	padding:.8em;
	margin-bottom:1.6em;	
}

div.attention {
	border:2px solid #ff9999;
	background-color:#fff5f5;
	color:#801a1a;
}


div.hint {
	border:2px solid #99baff;
	background-color:#f5f8ff;
	color:#193b80;
}



.disabled {
	color:#999999;	
}

ul,ul li {
	margin:0;
	padding:0;
	list-style:none;
}

a {
	cursor:pointer;	
}

img {
	vertical-align: top;
	border:0px;
}

.debug {
	color:#fff;
	background-color:#000;
	padding:10px;
}

.debug a{
	color:#fff;
}

/* ユーザー用、占い師用 テーブル枠 */

.me {
	background-color:#39F;
	border:1px solid #999;
	padding:3px;	
}

.aite {
	background-color:#F39;
	border:1px solid #999;
	padding:3px;	
}


.sponcer {
	background-color:#39F;
	border:1px solid #06F;
	padding:3px;	
}

.adultsponcer {
	background-color:#ff99cc;
	border:1px solid #F39;
	padding:3px;	
}

.writer {
	background-color:#F93;
	border:1px solid #F63;
	padding:3px;	
}

.user {
	background-color:#FF9;
	border:1px solid #999;
	padding:3px;	
}

table {
	width:100%;
	margin:0px;
}

td,th {
	background-color:#fff;	
}

td:first-child{
	background-color:#4f4f4f;
	color:#ffffff;
}

table input[type=text] {
	font-size:18px;
}


/* 画像の枠 */
img.waku {
	padding:2px;
	border:1px #cccccc solid;
}

/* tableタグ */
.waku {
	border:3px solid #ededed;
}

.waku table{
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	margin:0;
	padding:0;
}

.waku table td , .waku table th{
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 15px;
	padding-right: 10px;
	text-align:left;
}



.hankaku,.numonly {
  ime-mode: inactive; /* 半角モード */
}

/* フォーム入力必須項目 */

input,textarea,select {
	font-size:1.5em;
}

select {
	width:200px;	
}



div.need {
	background:url(/app/webroot/img/default/need.png) center right no-repeat;
	font-weight:bold;
	padding:5px;
}

div.honbunneed {
	background:url(/app/webroot/img/default/need.png);
	background-repeat:no-repeat;
	background-position: 180px center;
	font-weight:bold;
}


div.no-need {
	background:url(/app/webroot/img/default/no-need.png) center right no-repeat;
	font-weight:bold;
	padding:5px;
}
input.need ,textarea.need {
	background-color:#ffdddd;
}

input.no-need ,textarea.no-need {
	background-color:#ECFAFF;
}

/* /js/jquery.toggleval.js でアドバイスを表示する */

/* フォームヒント用 テキストグレーCSS */
input.advice,textarea.advice {
	
	color:#999;
}

input.tv-focused,textarea.tv-focused{
	color:#000;
}
input.tv-changed,textarea.tv-changed{
	color:#000;
}

/* exvalidation.css */
.fixed .formErrorClose {
	display: none;
}

.formError {
	color:#FFFFFF;
	padding:5px 5px 5px 30px;
	font-weight:bold;
	background:url(/app/webroot/img/default/ng.gif) no-repeat;
	background-position: 10px center;
	border:2px solid #FF6699;
	background-color:#FF0000;
	font-size:12px;
	line-height:15px;
}

.formError a{
	color:#FFFFFF;
	text-decoration:underline;
}


.formTrue {
	color:#FFFFFF;
	padding:15px 30px;
	font-weight:bold;
	background:url(/app/webroot/img/default/ok.gif) no-repeat;
	background-position: 10px center;
	border:2px solid #92cae4;
	background-color:#0c5cd0;
	font-size:18px;
	margin:10px;
}

.formTrue a{
	color:#FFFFFF;
	text-decoration:underline;
	
}


/*
	ページネーター
*/
.pagenatorset {
	margin: 10px 0px 10px 0;
}

.pagenatorset a{
	background-color:#FFFBF7;
	padding:3px 5px;
	text-decoration:none;
}

.pagenatorset a:hover {
	background-color:#FFF4E6;
}

.pagenatorset .current{
	background-color:#FFF4E6;
	padding:3px 5px;
}

.pagenatorset .pagenumber{
	color:#666;
}


/*
	ボタン
*/

a.imgbutton {
	display: block;
	background:url(/app/webroot/img/default/imgbutton.png) no-repeat;
	text-decoration:none;
	text-align:left;
}

a.imgbutton.button-0 {
	width: 440px;
	height: 48px;
	background-position: 0 0;
}

a.imgbutton.button-0 span {
	color:#FFF;
	font-size:2em;
	font-weight:700;
	margin:15px 0 0 20px;
	display:block;
}


a.imgbutton.button-1 {
	width: 232px;
	height: 40px;
	background-position: 1px -53px;
}

a.imgbutton.button-1 span {
	color:#595959;
	font-size:1.5em;
	margin:10px 0 0 60px;
	display:block;
}

a.imgbutton.button-2 {
	width: 165px;
	height: 44px;
	background-position: -232px -53px;
}

a.imgbutton.button-2 span {
	color:#595959;
	font-size:1.5em;
	margin:10px 0 0 10px;
	display:block;
}

a.imgbutton.button-3 {
	width: 232px;
	height: 40px;
	background-position: 0 -98px;
}

a.imgbutton.button-3 span {
	color:#595959;
	font-size:1.5em;
	margin:10px 0 0 60px;
	display:block;
}

a.imgbutton.button-4 {
	width: 205px;
	height: 50px;
	background-position: 0 -142px;
}

a.imgbutton.button-4 span {
	color:#595959;
	font-size:1.5em;
	margin:10px 0 0 20px;
	display:block;
}

a.imgbutton.button-4.active {
	width: 205px;
	height: 50px;

	background-position: -205px -142px;
}

a.imgbutton.button-5 {
	width: 135px;
	height: 30px;
	background-position: -182px -244px;
}

a.imgbutton.button-5 span {
	color:#595959;
	font-size:1em;
	margin:1px 0 0 35px;
	display:block;
}

a.imgbutton.button-6 {
	width: 165px;
	height: 43px;
	background-position: 0px -276px;
}

a.imgbutton.button-6 span {
	color:#595959;
	font-size:1.3em;
	margin:10px 0 0 36px;
	display:block;
}


a.imgbutton.button-7 {
	width: 180px;
	height: 33px;
	background-position: -110px -391px;
}

a.imgbutton.button-7 span {
	color:#fff;
	font-weight:bold;
	font-size:1.3em;
	margin:3px 0 0 25px;
	display:block;
}

a.imgbutton.button-8 {
	width: 138px;
	height: 33px;
	background-position: -296px -394px;
}

a.imgbutton.button-8 span {
	color:#fff;
	font-size:1.3em;
	margin:0 0 0 10px;
	display:block;
}

a.imgbutton.button-9 {
	width: 57px;
	height: 21px;
	background-position: -110px -430px;
	text-align:center;
}

a.imgbutton.button-9:hover , a.imgbutton.button-9-hover {
	width: 57px;
	height: 21px;
	background-position: -110px -430px;
	text-align:center;
	background-position: -171px -430px;
}

a.imgbutton.button-9-hover {
	cursor:text;	
}

a.imgbutton.button-9 span , a.imgbutton.button-9-hover{
	font-size:1.3em;
	display:block;
}




a.imgbutton.button-10 {
	width: 199px;
	height: 20px;
	background-position: -232px -430px;
}

a.imgbutton.button-10 span {
	color:#333;
	font-size:1.1em;
	margin:-2px 0 0 20px;
	
	display:block;
}

a.imgbutton.button-11 {
	width: 164px;
	height: 41px;
	background-position: -110px -456px;
	
}

a.imgbutton.button-11 span {
	
	font-size:1.3em;
	margin:7px 0 0 20px;
	display:block;
}