﻿﻿@charset 'utf-8';

/* -----------------------------------------------------------
CSS Information

File name:      mod_common.css
Update:         2021/7/28
Author:         H.I
Style Info:     共通CSS設定


	01. 全体用
	02. タイトル用
	03. リスト用
	04. ボックス用
	05. #contentsArea用
	06. #extraArea用
	07. #noFlaArea用
	08. #advice用

----------------------------------------------------------- */



/* ----------------------------------------------------------------------
  01. 全体用
---------------------------------------------------------------------- */

/* テキスト
------------------------------------------- */
.bold {
	font-weight: bold;
}

.small {
	font-size: 10px !important;
}

.txt11 {
	font-size: 11px;
}

.normal {
	font-size: 12px !important;
}

.txt14 {
	font-size: 14px;
}

.txt18 {
	font-size: 18px;
}

.errorMsg {
	color: #e00;
	font-weight: bold;
}



/* タイトル・文章
------------------------------------------- */
p {
}

p.caption {
	font-weight: bold;
	margin-bottom: 5px;
}

p.sentence {
	margin-bottom: 10px;
}



/* 位置
------------------------------------------- */
.fl {
	float: left;
}

.fr {
	float: right;
}

.cl {
	clear: both;
}

.vt {
	vertical-align: top;
}

.vm {
	vertical-align: middle;
}

.vb {
	vertical-align: bottom;
}

.tl {
	text-align: left;
}

.tc {
	text-align: center;
}

.tr {
	text-align: right
}



/* マージン
------------------------------------------- */
.mt5 {
	margin-top: 5px;
}

.mb5 {
	margin-bottom: 5px;
}

.ml5 {
	margin-left: 5px;
}

.mr5 {
	margin-right: 5px;
}

.mt10 {
	margin-top: 10px;
}

.mb10 {
	margin-bottom: 10px;
}

.ml10 {
	margin-left: 10px;
}

.mr10 {
	margin-right: 10px;
}

.mb20 {
	margin-bottom: 20px;
}

.mt20 {
	margin-top: 20px;
}

.mb30 {
	margin-bottom: 30px;
}

.mt30 {
	margin-top: 30px;
}

.mb40 {
	margin-bottom: 40px;
}

.mb50 {
	margin-bottom: 50px;
}


/* パディング
------------------------------------------- */
.pt5 {
	padding-top: 5px;
}

.pb5 {
	padding-bottom: 5px;
}

.pl5 {
	padding-left: 5px;
}

.pr5 {
	padding-right: 5px;
}

.pb10 {
	padding-bottom: 10px;
}

.pt10 {
	padding-top: 10px;
}



/* 画像
------------------------------------------- */
.imgR {
	float: right;
	padding: 0 0 10px 10px;
}

.imgL {
	float: left;
	padding: 0 10px 10px 0;
}



/* 画像のアルファ処理
------------------------------------------- */
.light a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}



/* ページの先頭へ、前へ戻る
------------------------------------------- */
.pagetop {
	clear: both;
	text-align: right;
	padding-top: 20px;
}

.pagenext {
	clear: both;
	text-align: right;
	padding-top: 20px;
}


.pageback {
	clear: both;
	text-align: left;
	padding-top: 20px;
}

.pagetop a {
	padding: 0 0 1px 12px;
	color: #4D5156;
	background: url("/image/common/ico_pagetop.gif") no-repeat 0 1px;
	font-size: 10px;
}

.pagenext a {
	padding: 0 0 1px 12px;
	color: #666;
	background: url("/image/common/ico_more.gif") no-repeat 0 1px;
	font-size: 10px;
}

.pageback a {
	padding: 0 0 1px 12px;
	color: #4D5156;
	background: url("/image/common/ico_back.gif") no-repeat 0 1px;
	font-size: 10px;
}

.pagetop a,
.pagenext a,
.pageback a {
	\background: none; /* IE5 */
}

.pagetop a:hover,
.pagenext a:hover,
.pageback a:hover {
	text-decoration: underline;
}





/* separate hr
------------------------------------------- */
hr.separate {
	display: none;
}


/* clearfix
------------------------------------------- */
.clearfix:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}


/* hasLayout
------------------------------------------- */
.hasLayout {
	height: 1%;
}


/* ボタンの装飾をリセット
------------------------------------------- */
button.style_reset{
	background: none;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor : pointer;
}

/* ----------------------------------------------------------------------
  02. タイトル用
---------------------------------------------------------------------- */

/* 基本スタイル */
#contentsArea h3,
#extraArea h3 {
	margin-bottom: 8px;
	padding: 0 0 2px 3px;
	border-bottom: 1px solid #ccc;
	color: #ff3493;
	font-size: 15px;
	font-weight: bold;
}

#contentsArea .btnMore,
#contentsArea .titleSupple,
#extraArea .btnMore,
#extraArea .moreBottom {
	position: relative;
}

#contentsArea .btnMore a,
#extraArea .btnMore a {
	padding-left: 12px;
	display:block;
	position: absolute;
	top: -27px;
	right: 3px;
	color: #4D5156;
	background: url("/image/common/ico_more.gif") no-repeat 0 0.3em;
	font-size: 10px;
}

#extraArea .moreBottom {
	padding-bottom: 10px;
}

#extraArea .moreBottom a {
	padding-left: 12px;
	display:block;
	position: absolute;
	top: -5px;
	right: 3px;
	color: #4d5156;
	background: url("/image/common/ico_more.gif") no-repeat 0 0.3em;
	font-size: 10px;
}

#contentsArea .btnMore a:hover,
#extraArea .btnMore a:hover,
#extraArea .moreBottom a:hover {
	text-decoration: underline;
}


#contentsArea .titleSupple span {
	display:block;
	position: absolute;
	top: -27px;
	right: 3px;
	color: #777;
	font-size: 10px;
}


#contentsArea .titleSupple span.importance {
	display:block;
	position: absolute;
	top: -29px;
	right: 3px;
	color: #e5002b;
	font-size: 12px;
	font-weight: bold;
}



#contentsArea h3 img.icon {
	margin: 0 0 -2px 5px;
}

#contentsArea h3 a img.icon {
	margin: 0 0 3px 5px;
}



/* コンテンツ用タイトルスタイル */
#contentsArea h3.contentsTitle,
#contents-inner h3.contentsTitle {
	color: #5F6368;
	font-size: 18px;
}

#contentsArea h3.contentsTitle1 {
	height:21px;
	width:647px;
	vertical-align: bottom;
	padding-bottom: 3px;
}

#contentsArea h3.contentsTitle img,
#contents-inner h3.contentsTitle img {
	vertical-align: bottom;
	padding-bottom: 3px;
}




/* ----------------------------------------------------------------------
   03. リスト用
---------------------------------------------------------------------- */

/* 共通数字リスト
----------------------------------------------------------------------- */
ol.number {
}

ol.number li {
	margin: 0;
	padding: 0 0 1px 20px;
	margin-bottom: 6px;
	line-height: 16px;
}

ol.number li.num1 {
	background: url("/image/common/ico_01.gif") no-repeat 2px 1px;
}

ol.number li.num2 {
	background: url("/image/common/ico_02.gif") no-repeat 2px 1px;
}

ol.number li.num3 {
	background: url("/image/common/ico_03.gif") no-repeat 2px 1px;
}

ol.number li.num4 {
	background: url("/image/common/ico_04.gif") no-repeat 2px 1px;
}




/* 新着お知らせ用
----------------------------------------------------------------------- */
.newInfoList {
	margin-bottom: 10px;
}

.newInfoList li {
	position: relative;
	margin: 0;
	padding: 0 0 1px 8px;
	margin-bottom: 9px;
	background: url("/image/common/ico_list_info.gif") no-repeat 2px 7px;
	line-height: 15px;
	font-family:'Meiryo UI','MS PGothic', 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3',  'Osaka', 'MS PGothic', arial, helvetica, sans-serif;

}

.newInfoList li .icon {
	margin-left: 3px;
}

.newInfoList li span.date {
	position: absolute;
	right: 3px;
	font-size: 11px;
	font-family: Verdana, sans-serif;
}

.newInfoList a:link,
.newInfoList a:visited {
	color: #4d5156;
	text-decoration: none;
}

.newInfoList a:hover {
	color: #4d5156;
	text-decoration: underline;
}





/* 新着ブログ、友だち、お気に入り、伝言ボードリスト用
----------------------------------------------------------------------- */
.newBlogList,
.friendList,
.favoriteList,
.newMessageList {
	margin-bottom: 5px;
	padding: 0;
	clear: both;
	background: url("/image/common/line_dot.gif") bottom left repeat-x;
	overflow: hidden;
}

.newBlogList .avatarImg,
.friendList .avatarImg,
.favoriteList .avatarImg,
.newMessageList .avatarImg {
	float: left;
	width: 68px;
	height: 68px;
	margin-left: 5px;
	_margin-left: 3px;
	padding: 2px 0 0 2px;
	background: url("/image/common/bg_avatarbust.gif") no-repeat;
}


.newBlogList dl,
.friendList dl,
.favoriteList dl,
.newMessageList dl {
	position: relative;
	padding-top: 5px;
	margin-left: 80px;
	height: 70px;
}

* html .newBlogList dl,
* html .friendList dl,
* html .favoriteList dl,
* html .newMessageList dl {
	\height /**/: 75px; /* IE5 */
}

.newBlogList dt,
.friendList dt,
.favoriteList dt,
.newMessageList dt {
	font-weight: normal;
	overflow: hidden;
	color: #978356;
	font-weight: bold;
}

.newBlogList dt a:link,
.friendList dt a:link,
.favoriteList dt a:link,
.newMessageList dt a:link,
.newBlogList dt a:visited,
.friendList dt a:visited,
.favoriteList dt a:visited,
.newMessageList dt a:visited {
	color: #978356;
	text-decoration: none;
}

.newBlogList dt a:hover,
.friendList dt a:hover,
.favoriteList dt a:hover,
.newMessageList dt a:hover {
	color: #978356;
	text-decoration: underline;
}


/* 08/29追加修正 */
.newBlogList dd.post {
	position: absolute;
	top: 4px;
	right: 3px;
	padding-bottom: 5px;
	font-size: 11px;
	color: #999;
	font-weight: normal;
	font-family: Verdana, sans-serif;
}

.newBlogList dd.id {
	/*padding-top: 1px;
	padding-bottom: 5px;*/
	padding-top: 7px;
	padding-bottom: 1px;
	font-size: 11px;
}

.newBlogList dd.time,
.friendList dd.time,
.favoriteList dd.time,
.newMessageList dd.time {
	padding-bottom: 5px;
	font-size: 11px;
	color: #70757A;
	font-family: Verdana, sans-serif;
}

.newBlogList dd.id span.category,
.newBlogList dd.time span.category {
	margin-left: 7px;
	padding-top: 1px;
	padding-left: 7px;
	font-size: 11px;
	color: #999;
	border-left: 1px solid #ddd;
}


.newBlogList dd.title,
.friendList dd.title,
.favoriteList dd.title {
	overflow: hidden;
	padding-left: 11px;
	background: url("/image/common/ico_blogtxt.gif") no-repeat 0 4px;
}

.newMessageList dd.comment {
	overflow: hidden;
	padding-left: 14px;
	background: url("/image/common/ico_comment.gif") no-repeat 0 4px;
}


/* 10/10追加修正 */
.friendList dt span.island {
	margin-left: 7px;
	padding-top: 1px;
	padding-left: 7px;
	font-size: 12px;
	color: #999;
	border-left: 1px solid #ddd;
}

.friendList dd.loginTime {
	padding-top: 2px;
	padding-bottom: 5px;
	font-size: 11px;
	color: #999;
}

.friendList dd.time span.loginTime {
	margin-left: 7px;
	padding-top: 1px;
	padding-left: 7px;
	font-size: 11px;
	color: #999;
	border-left: 1px solid #ddd;
}

.friendList dd.profile {
	overflow: hidden;
	word-break: break-all;
	padding-left: 11px;
	padding-bottom: 10px;
	background: url("/image/common/ico_blogtxt.gif") no-repeat 0 4px;
}



.newBlogList dd.id a:link,
.newBlogList dd.title a:link,
.friendList dd.title a:link,
.favoriteList dd.title a:link,
.newMessageList dd.title a:link,
.newBlogList dd.id a:visited,
.newBlogList dd.title a:visited,
.friendList dd.title a:visited,
.favoriteList dd.title a:visited,
.newMessageList dd.title a:visited {
	color: #777;
	text-decoration: none;
}

.newBlogList dd.id a:hover,
.newBlogList dd.title a:hover,
.friendList dd.title a:hover,
.favoriteList dd.title a:hover,
.newMessageList dd.title a:hover {
	color: #777;
	text-decoration: underline;
}



/* 新着ゲーム用
----------------------------------------------------------------------- */
.newGameList {
	margin-bottom: 5px;
	padding: 0;
	clear: both;
	background: url("/image/common/line_dot.gif") bottom left repeat-x;
	overflow: hidden;
}

.newGameList .gameImg {
	float: left;
	width: 110px;
	height: 86px;
	padding: 0 0 0 5px;
}

.newGameList dl {
	position: relative;
	min-height: 92px;
	height: auto !important;
	height: 92px;
	margin-left: 125px;
	padding-top: 0;
}

.newGameList dt {
	font-size: 15px;
	line-height: 1.2;
	font-weight: bold;
	color: #a57968;
	margin-bottom: 3px;
}

.newGameList dt a,
.newGameList dt a:hover,
.newGameList dt a:visited {
	color: #978356;
	font-weight: bold;
	text-decoration: underline;
}

.newGameList dt .icon {
	margin-left: 3px;
}

.newGameList dd {
}


/* 09/11追加修正 */
.newGameList dd.howto {
	margin-top: 10px;
	padding-left: 12px;
	color: #777;
	background: url("/image/common/ico_more.gif") no-repeat 0 0.3em;
	font-size: 12px;
}

.newGameList dd.howto a:link,
.newGameList dd.howto a:visited {
	color: #777;
	text-decoration: none;
}

.newGameList dd.howto a:hover {
	color: #777;
	text-decoration: underline;
}






/* ボタンが横に３つ並ぶ時用
----------------------------------------------------------------------- */
ul.btnList {
	width: 100%;
	position:relative;
	clear: both;
}

ul.btnList li {
	float: left;
	text-align: center;
	width: 30%;
}

ul.btnList li.center {
	width: 40%;
}

ul.btnList li.right {
	width: 30%;
	text-align: right;
}



/* ボタンが横に２つ並ぶ時用
------------------------------------------- */
ul.btnList li.two {
	width: 50%;
}

ul.btnList li.main {
	width: 60%;
	text-align: right;
}

ul.btnList li.extra {
	width: 40%;
	text-align: right;
}



/* テキストボタンが左右に２つ並ぶ時用
------------------------------------------- */
ul.btnList li.next,
ul.btnList li.top {
	width: 50%;
	text-align: right;
}

ul.btnList li.prev {
	width: 50%;
	text-align: left;
}



/* 画像が右にに1つ並ぶ時用
------------------------------------------- */
ul.btnList li.rightImg {
	width: 100%;
	text-align: right;
}




/* カテゴリが横に並ぶ時用
----------------------------------------------------------------------- */
.categoryTxtNavi {
	text-align: center;
	line-height: 1.3;
}

.categoryTxtNaviL {
	text-align: left;
	line-height: 1.3;
}

.categoryTxtNavi li {
	display: inline;
	list-style-type: none;
	margin-right: 6px;
	padding-left: 10px;
	border-left:1px solid #999;
}

.categoryTxtNavi li.first {
	border-left: 0;
	padding-left: 0;
}

.categoryTxtNavi li a{
	color: #666;
}

.categoryTxtNavi li a:hover {
	color: #666;
	text-decoration: underline;
}




/* 注意書き用
----------------------------------------------------------------------- */
ul.noticeList {
	color: #666;
	font-size: 10px;
	line-height: 17px;
	letter-spacing: 0.5px;
}

ul.noticeList li{
	margin: 0;
	padding: 0 0 3px 8px;
	background: url("/image/common/ico_list_info.gif") no-repeat 2px 7px;
}

ul.noticeList li .importance {
	color: #f00;
}

ul.noticeList li a {
	color: #999;
	text-decoration: underline;
}

ul.noticeList li a:hover {
	text-decoration: underline;
}




/* 横並びテキストリンク用
----------------------------------------------------------------------- */
ul.txtLinkList {
}


ul.txtLinkList li{
	float: left;
	padding: 0 20px 0 7px;
	background: url("/image/common/ico_list_info.gif") no-repeat 2px 7px;
}



/* ページング
----------------------------------------------------------------------- */
ul.pageNavi {
	clear: both;
	width: 100%;
	margin: 10px auto 0;
	padding: 0;
	text-align: center;
}

ul.pageNavi li {
	padding: 0 3px 0 5px;
	display: inline;
	border-left: 1px solid #ddd;
	font-size: 12px;
	font-family: verdana;
	text-align: center;
	line-height: 1.3;
	color: #ccc;
}

ul.pageNavitop {
	clear: both;
	width: 100%;
	margin: 10px auto 20px;
	padding: 0;
	text-align: center;
}

ul.pageNavitop li {
	padding: 0 3px 0 5px;
	display: inline;
	border-left: 1px solid #ddd;
	font-size: 12px;
	font-family: verdana;
	text-align: center;
	line-height: 1.3;
	color: #ccc;
}


/* アイコン設定 */
ul.pageNavi li.first {
	padding-left: 20px;
	border-left: none;
	background: url("/image/common/ico_first_on.gif") no-repeat 6px 0;
}

ul.pageNavi li.prev {
	padding-left: 20px;
	background: url("/image/common/ico_prev_on.gif") no-repeat 6px 0;
}

ul.pageNavi li.next {
	padding-left: 20px;
	background: url("/image/common/ico_next_on.gif") no-repeat 6px 0;
}

ul.pageNavi li.last {
	padding-left: 20px;
	background: url("/image/common/ico_last_on.gif") no-repeat 6px 0;
}

ul.pageNavi li.first_off {
	padding-left: 20px;
	border-left: none;
	background: url("/image/common/ico_first.gif") no-repeat 6px 0;
}

ul.pageNavi li.prev_off {
	padding-left: 20px;
	background: url("/image/common/ico_prev.gif") no-repeat 6px 0;
}

ul.pageNavi li.next_off {
	padding-left: 20px;
	background: url("/image/common/ico_next.gif") no-repeat 6px 0;
}

ul.pageNavi li.last_off {
	padding-left: 20px;
	background: url("/image/common/ico_last.gif") no-repeat 6px 0;
}

/*naviStyle_aの設定*/
ul.naviStyle_a li.first {
	background: url("/image/common/ico_style_a_first_on.png") no-repeat 6px 0;
	color: #777;
}

ul.naviStyle_a li.prev {
	background: url("/image/common/ico_style_a_prev_on.png") no-repeat 6px 0;
	color: #777;
}

ul.naviStyle_a li.next {
	background: url("/image/common/ico_style_a_next_on.png") no-repeat 6px 0;
	color: #777;
}

ul.naviStyle_a li.last {
	background: url("/image/common/ico_style_a_last_on.png") no-repeat 6px 0;
	color: #777;
}

ul.naviStyle_a li.first_off {
	background: url("/image/common/ico_style_a_first.png") no-repeat 6px 0;
	color: #a0a0a0;
}

ul.naviStyle_a li.prev_off {
	background: url("/image/common/ico_style_a_prev.png") no-repeat 6px 0;
	color: #a0a0a0;
}

ul.naviStyle_a li.next_off {
	background: url("/image/common/ico_style_a_next.png") no-repeat 6px 0;
	color: #a0a0a0;
}

ul.naviStyle_a li.last_off {
	background: url("/image/common/ico_style_a_last.png") no-repeat 6px 0;
	color: #a0a0a0;
}

ul.pageNavi li.first,
ul.pageNavi li.prev,
ul.pageNavi li.next,
ul.pageNavi li.last,
ul.pageNavi li.first_off,
ul.pageNavi li.prev_off,
ul.pageNavi li.next_off,
ul.pageNavi li.last_off {
	\background: none; /* IE5 */
}

html>/**/body ul.pageNavi li.first,
html>/**/body ul.pageNavi li.prev,
html>/**/body ul.pageNavi li.next,
html>/**/body ul.pageNavi li.last,
html>/**/body ul.pageNavi li.first_off,
html>/**/body ul.pageNavi li.prev_off,
html>/**/body ul.pageNavi li.next_off,
html>/**/body ul.pageNavi li.last_off {
	background-position: 6px 2px; /* IE7を除くモダンブラウザ */
}

ul.pageNavitop li.first {
	padding-left: 20px;
	border-left: none;
	background: url("/image/common/ico_first_on.gif") no-repeat 6px 0;
}

ul.pageNavitop li.prev {
	padding-left: 20px;
	background: url("/image/common/ico_prev_on.gif") no-repeat 6px 0;
}

ul.pageNavitop li.next {
	padding-left: 20px;
	background: url("/image/common/ico_next_on.gif") no-repeat 6px 0;
}

ul.pageNavitop li.last {
	padding-left: 20px;
	background: url("/image/common/ico_last_on.gif") no-repeat 6px 0;
}

ul.pageNavitop li.first_off {
	padding-left: 20px;
	border-left: none;
	background: url("/image/common/ico_first.gif") no-repeat 6px 0;
}

ul.pageNavitop li.prev_off {
	padding-left: 20px;
	background: url("/image/common/ico_prev.gif") no-repeat 6px 0;
}

ul.pageNavitop li.next_off {
	padding-left: 20px;
	background: url("/image/common/ico_next.gif") no-repeat 6px 0;
}

ul.pageNavitop li.last_off {
	padding-left: 20px;
	background: url("/image/common/ico_last.gif") no-repeat 6px 0;
}

ul.pageNavitop li.first,
ul.pageNavitop li.prev,
ul.pageNavitop li.next,
ul.pageNavitop li.last,
ul.pageNavitop li.first_off,
ul.pageNavitop li.prev_off,
ul.pageNavitop li.next_off,
ul.pageNavitop li.last_off {
	\background: none; /* IE5 */
}

html>/**/body ul.pageNavitop li.first,
html>/**/body ul.pageNavitop li.prev,
html>/**/body ul.pageNavitop li.next,
html>/**/body ul.pageNavitop li.last,
html>/**/body ul.pageNavitop li.first_off,
html>/**/body ul.pageNavitop li.prev_off,
html>/**/body ul.pageNavitop li.next_off,
html>/**/body ul.pageNavitop li.last_off {
	background-position: 6px 2px; /* IE7を除くモダンブラウザ */
}

/* リンク時設定 */
ul.pageNavi li a,
ul.pageNavi li a:visited {
	color: #4D5156;
}

ul.pageNavi li a:hover {
	color: #333;
	text-decoration: underline;
}

ul.pageNavi li.now a {
	color: #666;
	font-weight: bold;
}

/* リンク時設定 */
ul.pageNavitop li a,
ul.pageNavitop li a:visited {
	color: #4D5156;
}

ul.pageNavitop li a:hover {
	color: #333;
	text-decoration: underline;
}

ul.pageNavitop li.now a {
	color: #666;
	font-weight: bold;
}



/* clearfix
------------------------------------------- */
.newBlogList:after,
.friendList:after,
.favoriteList:after,
.newGameList:after,
ul.btnList:after,
ul.noticeList:after,
ul.txtLinkList:after,
ul.pageNavi:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}





/* ----------------------------------------------------------------------
  04. ボックス用
---------------------------------------------------------------------- */

/* 囲み
------------------------------------------- */
.box-outer {
	width: 100%;
	margin-bottom: 10px;
}

.inviteregistform-coin{
    width: 100%;
    height: 256px;
    overflow: hidden;
}
.box-outer_last {
	width: 100%;
	margin-bottom: 0;
}


.box-outer-underline {
	width: 100%;
	background: url("/image/common/line_dot.gif") bottom left repeat-x;
}



/* バナー用囲み
------------------------------------------- */
.bannerBox {
	margin-bottom: 10px;
}

.bannerBox_last {
	margin-bottom: 0;
}

.bannerBox iframe,
.bannerBox_last iframe,
.bannerBox img,
.bannerBox_last img {
	margin: 0;
	padding: 0;
	vertical-align: bottom;
	line-height: 1;
}

#help .bannerBox {
	margin-bottom: 15px;
}



/* 幅320px ２カラム
------------------------------------------- */
.box320_l {
	width: 320px;
	float: left;
}

.box320_r {
	width: 320px;
	float: right;
}



/* 幅400px ２カラム
------------------------------------------- */
.box400_l {
	width: 400px;
	float: left;
}

.box400_r {
	width: 400px;
	float: right;
}

.box240_r {
	width: 240px;
	float: right;
}



/* パディングボックス
------------------------------------------- */
.pad5 {
	padding: 5px;
}

.pad10 {
	padding: 10px;
}



/* 枠線ボックス
------------------------------------------- */
.borderBox {
	border: 1px solid #ccc;
	padding: 10px;
}

.borderBoxHelp {
	border: 1px solid #ccc;
	padding: 10px;
	background-color:#fffcf3;
}


/* カラーボックス
------------------------------------------- */
.boxGray {
	margin-bottom: 10px;
	padding: 7px;
	border: 1px solid #ccc;
	background-color: #eee;
}




/* clearfix
------------------------------------------- */
.box-outer:after,
.box-outer_last:after,
.box-outer-underline:after,
.box-outer_mb:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}


/* mypage setting
------------------------------------------- */
.box-outer .msgbox {
    background: #e9f2c5;
    text-align: center;
    margin: 10px 2%;
    padding: 15px;
    color: #55a218;
    font-size: 16px
}

.box-outer .msgbox02 {
    background: #fee8ee;
    text-align: center;
    margin: 10px 2%;
    padding: 10px;
    color: #ed7798
}




/* ----------------------------------------------------------------------
  05. #contentsArea用
---------------------------------------------------------------------- */






/* ----------------------------------------------------------------------
  06. #extraArea用
---------------------------------------------------------------------- */

#extraArea h2 {
	margin-bottom: 10px;
}

#extraArea .localNavi {
	margin-bottom: 10px;
}

#extraArea .localNavi li {
	margin-bottom: 1px;
}




/* ----------------------------------------------------------------------
  07. #noFlaArea用
---------------------------------------------------------------------- */

#noFlaArea {
	position: relative;
	width: 794px;
	height: 474px;
	background: url(/image/common/no_Flash/bg_natural.png) repeat #fefaef;
	border: #9f9673 3px solid;
}

#noFlaArea_box {
	width: 788px;
	height: 468px;
	background: url(/image/common/no_Flash/get_player.png) no-repeat center 36px;
	border: #fff 3px solid;
}

#noFlaArea .get_Player {
	background: #fff;
	width: 514px;
	height: 150px;
	margin: 220px auto 20px;
	text-align: center;
	text-decoration: underline;
	line-height: 2em;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
}

#noFlaArea .get_Player img{
	padding: 30px 0 10px;
}

#noFlaArea .get_Player .font17{
	font-size: 17px;
}

#noFlaArea .set_Player {
	margin: 20px 0 0 110px;
	line-height: 1.5em;
}

#noFlaArea .set_Player p{
	text-indent: -1em;
}

#noFlaArea .set_Player p a{
	text-decoration: underline;
}

#noFlaArea dt,#noFlaArea dd{
	margin: 3px auto;
}

#noFlaArea dt,#noFlaArea dd{
	width: auto;
	float: left;
}

#noFlaArea dt{
	float: left;
	border-right: #c9c9c9 solid 1px;
	padding: 0 1em 0 0;
	margin-right: 1em;
}

#noFlaArea dd.addslash:after{
	content:"/";
	margin: 0 1em;
}

#noFlaArea dd a{
	text-decoration: underline;
	*margin-left: 1em;
}

/* サイズ差分　*/

#gameFlaArea #noFlaArea { height: 494px;}
#gameFlaArea #noFlaArea_box { height: 488px;}

#gameFlaArea2 #noFlaArea { height: 523px;}
#gameFlaArea2 #noFlaArea_box { height: 517px;}

#wrapper.roulette #gameFlaArea #noFlaArea { height: 524px; width: 964px;}
#wrapper.roulette #gameFlaArea #noFlaArea_box { height: 518px; width: 958px;}
#wrapper.roulette #gameFlaArea #noFlaArea .set_Player {	margin-left: 230px;}

body.cordesquare #flashArea #noFlaArea { height: 594px;}
body.cordesquare #flashArea #noFlaArea_box { height: 588px;}

#itemFlaArea { background: url("/image/mypage/common/bg_flaarea.gif") no-repeat;}

body#furima #itemFlaArea #noFlaArea,
body#mypage #itemFlaArea #noFlaArea { width: 644px; height: 494px;}
body#furima #itemFlaArea #noFlaArea_box,
body#mypage #itemFlaArea #noFlaArea_box { width: 638px; height: 488px;}
body#furima #itemFlaArea #noFlaArea .set_Player,
body#mypage #itemFlaArea #noFlaArea .set_Player { margin-left: 80px;}

body#premium #itemFlaArea #noFlaArea { width: 804px; height: 555px;}
body#premium #itemFlaArea #noFlaArea_box { width: 798px; height: 549px;}

#coin.shopdetail .one-column #itemFlaArea #noFlaArea,
#wrapper.one-column #itemFlaArea #noFlaArea { width: 804px;}
#coin.shopdetail .one-column #itemFlaArea #noFlaArea_box,
#wrapper.one-column #itemFlaArea #noFlaArea_box { width: 798px;}
#coin.shopdetail .one-column #itemFlaArea #noFlaArea .set_Player,
#wrapper.one-column #itemFlaArea #noFlaArea .set_Player { margin-left: 150px;}

#gachaArea #noFlaArea { width: 479px;}
#gachaArea #noFlaArea_box { width: 473px; background: url(/image/common/no_Flash/get_player_s.png) no-repeat  center 16px;}
#gachaArea #noFlaArea .get_Player { margin: 240px auto 0; width: 420px;}
#gachaArea #noFlaArea .set_Player { margin: 10px 0 0 23px; font-size: 90%;}
#gachaArea #noFlaArea .set_Player dt{display: none}

#premium #gachaArea #noFlaArea { width: 804px;}
#premium #gachaArea #noFlaArea_box { width: 798px; background: url(/image/common/no_Flash/get_player.png) no-repeat  center 16px;}
#premium #gachaArea #noFlaArea .get_Player { margin: 220px auto 20; width: 514px;}
#premium #gachaArea #noFlaArea .set_Player { margin: 20px 0 0 150px; font-size: 100%;}

#gachaCatalogArea #noFlaArea { width: 700px;}
#gachaCatalogArea #noFlaArea_box { width: 694px;}
#gachaCatalogArea #noFlaArea .set_Player { margin-left: 110px;}




/* ----------------------------------------------------------------------
  08. #advice用
---------------------------------------------------------------------- */

#advice {
	position: relative;
	width: 100%;
	height: 80px;
	background:#efece4;
}

#advice-wrap{
	position: relative;
	width: 660px;
	height: 52px;
	margin: 0 auto;
	padding-top: 14px;
}

#advice .adwice-btn{
	position: absolute;
	top: 46px;
	left: 520px;
}

.advice{
	position: relative;
	width: 100%;
	height: 80px;
	background:#f8f8f0;
}

.advice::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -306px;
	width: 100%;
	height: 306px;
	background: url(/image/common/bg_body.jpg) repeat-x top center;
}

#circle .advice::after,
#furima.shopdetail .advice::after,
#recycling .advice::after,
#Premium.plus .advice::after,
#plus.mixed .advice::after,
body#premium.shopdetail .advice::after,
body#coin.shopdetail .advice::after,
#error .advice::after,
#single_game.gamedetail .advice::after,
#mypage .advice::after, #regist .advice::after, #help .advice::after, #login .advice::after,
#event .advice::after, #beginner .advice::after, #guide .advice::after, #sitemap .advice::after,
#privacy .advice::after, #kiyaku .advice::after, #charge .advice::after, #full .advice::after
 {
	background: url(/image/common/simple/bg_simpleheader.gif) repeat-x top center;
}

.advice-44{
	height: 44px;
}

.advice-spInduce{
	height: 130px;
	background: #DC7A85;
	text-align: center;
	font-size: 42px;
	font-weight: bold;
	padding-top: 15px;
}

.advice-spInduce a::before{
	content: "";
	display: block;
	position: absolute;
	top: -15px;
	left: 10px;
	width: calc(53px * 1.8);
	height: calc(73px * 1.8);
	background: url("/image/common/advice/img_sp.png") no-repeat center;
	background-size: contain;
}

.advice-spInduce .advice-btn:link,
.advice-spInduce .advice-btn:hover,
.advice-spInduce .advice-btn:visited{
	position: relative;
	background: #fff;
	display: block;
	width: 80%;
	min-width: 320px;
	margin: 0 auto;
	line-height: 100px;
	border-radius: 60px;
	border: solid 5px #dcd8cd;
	color:  #DC7A85;
}

.advice-wrap{
	position: relative;
	width: 980px;
	height: 44px;
	margin: 0 auto;
	box-sizing: border-box;
}

.advice-wrap-20190826off{
	background: url("/image/common/advice/20190826/txt_off.png") no-repeat 70px 4px;
	padding-left: 590px;
	padding-top: 8px;
}

.advice-wrap-20190826on{
	background: url("/image/common/advice/20190826/txt_on.png") no-repeat 70px 4px;
	padding-left: 467px;
	padding-top: 8px;
}

.advice-btn{
	background: #ed7798;
	width: 230px;
	box-sizing: border-box;
    position: relative;
    display: inline-block;
    padding: 4px 0;
	border-radius: 20px;
	text-align: center;
}

.advice-wrap-20190826on .advice-btn{
	background: #89816d;
	width: 170px;
	margin-right: 10px;
}

.advice-btn:link,
.advice-btn:hover,
.advice-btn:visited{
    color: #fff;
	text-decoration: none;
	font-weight: bold;
	transition: .6s;
}

.advice-btn:hover{
    opacity: .6;
}

.advice-btn span{
	position: relative;
	padding-right: 16px;
	text-align: center;
}

.advice-btn span::before,
.advice-btn span::after{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.advice-btn span::before{
    width: 12px;
    height: 12px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
}

.advice-btn span::after{
    box-sizing: border-box;
    width: 4px;
    height: 4px;
    border: 4px solid transparent;
    border-left: 4px solid #ed7798;
}

.advice-wrap-20190826on .advice-btn span::after{
    border-left: 4px solid #89816d;
}

.advice-link{
	position: absolute;
	right: 0;
	bottom: 2px;
	opacity: .8;
	font-size: 10px;
}


.advice-spInduce .advice-btn span{
	padding-right: 60px;
}

.advice-spInduce .advice-btn span::before{
    width: 50px;
    height: 50px;
    background: #ed7798;
}

.advice-spInduce .advice-btn span::after{
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 15px solid transparent;
    border-left: 24px solid #fff;
    right: -6px;
}

/*クローム環境ダウンロード注意喚起*/
#advice .adwice45-btn{
	position: absolute;
	top: 46px;
	left: 490px;
}


/* 共通ボタン
------------------------------------------- */
/*角丸ボタン大　ピンク*/
a.btn_radius_pink {
	display:block;
	margin: 20px auto;
	height: 40px;
	background-color: #FFF;
	border-radius: 32px;
    box-shadow:0px 3px 0px 3px #d37a93;
	border-radius: 22px;
	text-decoration: none;
}
a.btn_radius_pink:hover {
	background-color: #FFF;
	box-shadow: 0px 3px 0px 3px #FFF;
	text-decoration: none;
}
a.btn_radius_pink span:before {
	position: absolute;
}
a.btn_radius_pink span {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 40px;
	border-radius: 32px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
    border: 1px dashed #ffffff;
	box-shadow: 0px 0px 0px 4px #ed7898;/* box-shadowで外枠を */
	background: #ed7898 ;
	background: linear-gradient( #f192ac 0%, #ed7898 100%);
	color: #FFF;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 1px;
	text-align: center;
	line-height: 2.5;
}
a.btn_radius_pink:hover span {
	transform: translateY(2px);
	transition: 0.2s;
	opacity: 0.8;
}
/*角丸ボタン小　灰*/
.btn_radius_gray a {
	display: block;
	width: 120px;
	background-color: #f8f5ed;
	background: linear-gradient( #fcfbf8 0%, #f8f6ee 100%);
	border: #d3ccbd solid 2px;
	border-radius: 16px;
	box-sizing: border-box;
	box-shadow: 0px 1px 0 0 #b3ad9e;/* box-shadowで外枠を */
	text-align: center;
	text-decoration: none;
}
.btn_radius_gray a:hover {
	box-shadow: none;
	text-decoration: none;
	transform: translateY(2px);
	transition: 0.2s;
	opacity: 0.8;
}
