@charset "utf-8";

/* -----------------------------------------------------------
CSS Information

File name:      mod_form.css
Update:         2021/07/27
Author:         H.I
Style Info:     会員登録・ヘルプ／サポート用フォーム設定

	01. 入力フォーム
	02. FAQ用
	03. 会員登録用
	04. 友だち紹介キャンペーン

----------------------------------------------------------- */



/* ----------------------------------------------------------------------
  01. 入力フォーム
---------------------------------------------------------------------- */

#formBox {
	padding: 15px;
	width: 650px;
	width: 610px;
	border: 5px solid #EEE;

	/* IE5 */

	voice-family: "\"}\"";
	voice-family: inherit;

	/* IE5以外 */
}

#formBox.step1 {
	background: url("/image/regist/nicotto/bg_hiyoko.png") no-repeat right bottom;
}

#inviteFormBox {
	padding: 15px;
	width: 650px;
	width: 610px;
	border: 5px solid #EEE;

	/* IE5以外 */
	background: url("/image/regist/bg_invitefinish.gif") no-repeat bottom right;

	/* IE5 */

	voice-family: "\"}\"";
	voice-family: inherit;
}


.upper_formStyle {
	float: right;
	clear: both;
	margin-bottom: 5px;
	padding-left: 8px;
	background: url("/image/regist/ico_essentialsign.gif") no-repeat 0 5px;
	font-size: 10px;
}


/* テーブル用
------------------------------------------- */
.formStyle {
	clear: both;
	margin-bottom: 10px;
	width: 100%;
	border: 1px solid #CCC;
	border-collapse: collapse;
}

.formStyle input,
.formStyle textarea {
	color: #777;
}

.formStyle th {
	padding: 7px;
	width: 145px;
	border: 1px solid #CCC;
	background-color: #EEE;
	color: #5F6368;
	vertical-align: top;
	text-align: left;
}

.formStyle th.errorArea {
	background-color: #F8D8D8;
}

.formStyle th.faq {
	width: 100%;
}

.formStyle td {
	padding: 7px;
	border: 1px solid #CCC;
	color: #4D5156;
	text-align: left;
}

#regist .formStyle td {
	word-break: break-all;
}

.formStyle td.extra {
	text-align: center;
	/*width: 80px;*/
}

.formStyle .icon {
	position: relative;
	padding-left: 8px;
	background: url("/image/regist/ico_essentialsign.gif") no-repeat 0 5px;
}


.formStyle td p {
	margin-bottom: 3px;
	padding: 2px 0 0;
}


.formStyle .noFrame,
.formStyle .noFrame th,
.formStyle .noFrame td {
	border: none;
}

.formStyle td div.indentTxt {
	padding-left: 1em;
	color: #E65C5C;
	text-indent: -1em;
	font-size: 11px;
}

.formStyle .noFrame,
.formStyle .noFrame th,
.formStyle .noFrame td {
	border: none;
}

.formStyle .fc-red {
	color: #E00;
}

.status1Message {
	margin-bottom: 8px;
	padding: 7px;
	background-color: #E9F2C5;
	color: #55A218;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}

.formStyle td.status2Message {
	color: #E51010;
}

/* テキストスタイル
------------------------------------------- */
.formStyle p.comment {
	font-weight: normal;
	font-size: 10px;
}

.formStyle p.notice_comment {
	color: #E00;
	font-weight: normal;
	font-size: 10px;
}


.formStyle span {
	padding-left: 5px;
	word-break: break-all;
	font-size: 10px;
}

.formStyle span.kind {
	padding-left: 10px;
	font-size: 12px;
}

.formStyle .errorTxt {
	color: #F00 !important;
}

.formStyle .okTxt {
	color: #090 !important;
}



/* 入力フォーム系スタイル
------------------------------------------- */
.formStyle input {
	height: 15px;
}

.formStyle input.inpForm {
	padding: 1px;
	width: 160px;
	border: 1px solid #CCC;
}


.formStyle input.inpShortForm {
	padding: 1px;
	width: 80px;
	border: 1px solid #CCC;
}


.formStyle input.inpLongForm {
	padding: 1px;
	width: 300px;
	border: 1px solid #CCC;
}


.formStyle input.inpPassForm {
	padding: 1px;
	width: 100px;
	border: 1px solid #CCC;
}


.formStyle input.inpRadio {
	margin: -2px 3px 0 0;
	vertical-align: middle;
}

.formStyle select {
	margin: 0 3px 0 0;
	border: 1px solid #CCC;
}

.formStyle option {
	padding-right: 5px;
}

.formStyle optgroup {
	background: #EEE;
	color: #000;
}

.formStyle optgroup option {
	padding-left: 10px;
	background: #FFF;
}

.formStyle textarea {
	overflow: scroll;
	padding: 2px;
	width: 298px;
	height: 120px;
	border: 1px solid #CCC;
	font-size: 12px;
	font-family: Verdana, sans-serif;
}

.formStyle input.check {
	position: relative;
	top: -1px;
	margin-right: 1px;
	vertical-align: middle;
	/* IE */
}

html>

/**/
body .formStyle input.check {
	margin-right: 4px;
	/* IE7以外のモダンブラウザ */
}





/* フォーム系ボタンスタイル
------------------------------------------- */
.formBtn {
	position: relative;
	margin: 10px 0 20px 0;
	text-align: center;
}

.formBtn_wide {
	position: relative;
	margin-top: 50px;
	text-align: center;
}





/* ----------------------------------------------------------------------
  02. FAQ用
---------------------------------------------------------------------- */

.faqList {}

.faqList li {
	margin-bottom: 5px;
	padding: 0 0 4px;
	background: url("/image/common/line_dot.gif") bottom left repeat-x;
	line-height: 15px;
}

.faqList li.last {
	margin: 0;
	padding: 0;
	background: none;
}

.faqList li span.question {
	margin-left: 5px;
	padding: 1px 0 5px 20px;
	background: url("/image/common/ico_q.gif") no-repeat 0 0;
	font-family: "Meiryo UI", "MS PGothic", "Meiryo", "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "MS PGothic", arial, helvetica, sans-serif;
	line-height: 20px;
}

.faqList span.new {
	margin-left: 3px;
	padding: 1px 0 5px 20px;
	background: url("/image/common/ico_faqnew.gif") no-repeat 0 0;
}

.faqList span.up {
	margin-left: 3px;
	padding: 1px 0 5px 20px;
	background: url("/image/common/ico_faqup.gif") no-repeat 0 0;
}

/* テーブル内の場合 */
.formStyle div.question {
	padding-left: 20px;
	background: url("/image/common/ico_q.gif") no-repeat 0 3px;
}

.formStyle p.answer {
	padding: 1px 0 0 20px;
	background: url("/image/common/ico_a.gif") no-repeat 0 3px;
}

body#help .searchBox {
	margin-bottom: 15px;
	width: 650px;
}

body#help .searchBox dl {
	border-right: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	border-left: solid 1px #CCC;
	background-color: #EEE;
}

body#help .searchBox dt {
	float: left;
	padding: 25px 0;
	width: 150px;
	border-top: solid 1px #CCC;
	text-indent: 12px;
}

body#help .searchBox dd {
	margin-left: 150px;
	padding: 5px 12px;
	border-top: solid 1px #CCC;
	border-left: solid 1px #CCC;
	background-color: #FFF;
}

body#help .searchBox dd input {
	margin: 0 5px;
	padding: 2px 2px 1px;
	width: 385px;
	height: 18px;
	border: 1px solid #CCC;
	color: #777;
	line-height: 1.2;
}

body#help p.searchComment {
	margin: 4px 7px 0;
	font-weight: normal;
	font-size: 10px;
}


/* ----------------------------------------------------------------------
  03. 会員登録用
---------------------------------------------------------------------- */

/* member-regist(背景パターン)
------------------------------------------- */
body#regist.member-regist {
	background: url("/image/regist/nicotto/bg_pattern02.jpg") repeat-x 0 0;
}

body#regist.member-regist #container {
	width: 100%;
	background: url("/image/guide/post/bg_top.png") no-repeat center 30px;
}


/* registHeaderArea
------------------------------------------- */
#regist.member-regist #headerArea {
	margin: 0 auto 10px;
	width: 880px;
}

#registHeaderArea {
	position: relative;
	width: 830px;
	height: 225px;
}

#regist.member-regist #registHeaderArea {
	margin: 0 auto;
	width: 960px;
}



#registHeaderArea h2 {
	position: absolute;
	top: 0;
	left: 90px;
}

#registHeaderArea #regist-5stepBox,
#registHeaderArea #regist-4stepBox {
	position: absolute;
	top: 49px;
	left: 90px;
}


#regist.member-regist #wrapper {
	margin: 0 auto;
}


/* regist-5stepBox
------------------------------------------- */
#regist-4stepBox,
#regist-3stepBox {
	width: 650px;
}

#regist-5stepBox img,
#regist-4stepBox img,
#regist-3stepBox img {
	vertical-align: bottom;
}

#regist-4stepBox ul,
#regist-3stepBox ul {
	margin-left: 5px;
	width: 640px;
}

#regist-5stepBox ul:after,
#regist-4stepBox ul:after,
#regist-3stepBox ul:after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: ".";
}

#regist-5stepBox li {
	float: left;
	margin-left: 7px;
}

#regist-4stepBox li,
#regist-3stepBox li {
	float: left;
	margin-left: 8px;
}

#regist-5stepBox li.first,
#regist-4stepBox li.first,
#regist-3stepBox li.first {
	margin-left: 0;
}

#regist-5stepBox p.balloon,
#regist-4stepBox p.balloon,
#regist-3stepBox p.balloon {
	margin-left: 5px;
}



/* contentsArea
------------------------------------------- */
#contentsArea h3.error {
	color: #E00;
	font-size: 16px;
}

#formBox h4.tit_select {
	margin-bottom: 15px;
	padding: 3px;
	background-color: #FAF7F1;
	text-align: center;
	font-size: 15px;
}

#formBox .txt_comment {
	padding: 15px;
	text-align: center;
	font-weight: bold;
	font-size: 12px;
}

#contentsArea #formBox h4.title {
	margin: 0 0 8px 0;
	padding: 3px 15px;
	background-color: #FAF7F1;
	font-weight: bold;
	font-size: 14px;
}

#contentsArea #formBox h4.title span.codicil {
	margin-left: 10px;
	font-weight: normal;
	font-size: 12px;
}

#contentsArea #formBox .box-outer {
	margin-bottom: 20px;
}

#contentsArea #formBox ul.btnList li.extraBtn {
	width: 40%;
	text-align: center;
}

#contentsArea #formBox p.bottomTxt {}

#contentsArea #formBox p.bottomTxt a:link,
#contentsArea #formBox p.bottomTxt a:visited {
	color: #C18D26;
	text-decoration: none;
}

#contentsArea #formBox p.bottomTxt a:hover {
	color: #EBAC2D;
	text-decoration: underline;
}


#regist .registCompleteBox {
	margin: 20px auto 0;
	width: 648px;
}




/* beigeBox
------------------------------------ */
#contentsArea #formBox .beigeBox {}

#contentsArea #formBox .beigeBox .formStyle {
	margin-bottom: 0;
}

#contentsArea #formBox .beigeBox .formStyle td {
	background: #FFF;
}



/* kiyakuBox
------------------------------------------- */
#kiyakuBox {
	width: 608px;
	border: 1px solid #EEE;
	background: #F7F7F7;
}

#kiyakuBox h4 {
	margin: 10px 0 0 10px;
	padding-left: 8px;
	background: url("/image/regist/ico_essentialsign.gif") no-repeat 0 5px;
}

#kiyakuBox iframe {
	margin: 5px 10px;
	background: #FFF;
	text-align: center;
}

#kiyakuBox .agreeCheck {
	margin: 0 0 10px 10px;
}

#kiyakuBox .agreeCheck input {
	margin-right: 5px;
}

#kiyakuBox .agreeCheck_em {
	margin: 5px 0 10px 150px;
	padding: 4px;
	width: 275px;
	background: #FD9CC4;
	color: #FFF;

	_padding: 3px 3px 5px;
}

#kiyakuBox .agreeCheck_em input {
	margin-right: 5px;
	margin-left: 5px;
}



/* 初期アバター・マイホーム選択スタイル
------------------------------------------- */
.btn_mail a {
	display: block;
	margin: 10px auto 20px;
	padding: 2px;
	width: 300px;
	border: 1px solid #D3D3D3;
	border-radius: 3px;
	background: linear-gradient(to bottom, #FFF 17%, #E5E5E5 85%);
	color: #777;
	text-align: center;
	text-decoration: none;
	font-weight: 400;
	font-size: 12px;
}

/* guideComment */
#formBox .guideComment01 {
	margin-bottom: 15px;
	width: 610px;
	height: 80px;
	background: url("/image/regist/bg_comment01.gif") no-repeat 0 0;
}

#formBox .guideComment02 {
	margin-top: 20px;
	margin-bottom: 15px;
	width: 610px;
	height: 80px;
	background: url("/image/regist/bg_comment02.gif") no-repeat 0 0;
}

#formBox .guideComment01 p,
#formBox .guideComment02 p {
	padding: 25px 0 0 100px;
	width: 470px;
	text-align: center;
}

ul.select_sex li {
	display: inline-block;
}

ul.select_sex li:first-child {
	margin-left: 120px;
}

ul.select_sex li:last-child {
	margin-left: 30px;
}

ul.select_sex input[type="radio"] {
	display: none;
}

ul.select_sex label {
	display: block;
	width: 165px;
	height: 51px;
	background-position: 0 0;
	background-repeat: no-repeat;
	font-size: 0;
	transition: .6s;
}

ul.select_sex li label:hover {
	opacity: .7;
	transition: .6s;
	transform: translateY(1px);
}

ul.select_sex li input[type="radio"]:checked+label {
	opacity: 1;
	cursor: default;
	transition: 0;
	transform: translateY(0);
}

ul.select_sex li:first-child label {
	background-image: url(/image/regist/nicotto/btn_sex_female.png);
}

ul.select_sex li:first-child input[type="radio"]:checked+label {
	background-image: url(/image/regist/nicotto/btn_sex_female_on.png);
}

ul.select_sex li:last-child label {
	background-image: url(/image/regist/nicotto/btn_sex_male.png);
}

ul.select_sex li:last-child input[type="radio"]:checked+label {
	background-image: url(/image/regist/nicotto/btn_sex_male_on.png);
}

.btn_registface a {
	display: block;
	margin: 15px auto;
	width: 321px;
}

ul.btnregist li {
	display: inline-block;
	margin-top: 10px;
}

ul.btnregist li img {
	vertical-align: baseline;
}

ul.btnregist li.main {
	margin-left: 8px;
}


ul.btnregist li input {
	display: block;
	transition: .6s;
}

ul.btnregist li input:hover {
	display: block;
	opacity: .8;
	transition: .6s;
}

.confaveatarArea {
	margin-bottom: 10px;
}

.confaveatarArea .conavatar {
	margin: 0 auto;
	width: 330px;
	border: 2px solid #F9F4E5;
	text-align: center;
}

.confaveatarArea .conavatar .txtRetouch {
	text-align: right;
}

.confaveatarArea .conavatar .txtRetouch a {
	display: inline-block;
	margin: 0 5px 8px;
	padding: 2px 7px;
	max-width: 160px;
	border: 1px solid #D3D3D3;
	border-radius: 3px;
	background: linear-gradient(to bottom, #FFF 17%, #E5E5E5 85%);
	color: #777;
	text-align: center;
	text-decoration: none;
	font-weight: 400;
	font-size: 12px;
}

/* アバターの「ヘアスタイル・顔のパーツ」選択画面
------------------------------------------- */

#contentsArea #faceflashBox {
	padding: 10px;
	width: 778px;
	border: 5px solid #EEE;
}

#faceflashBox h4 {
	margin-bottom: 18px;
}







/* selectDefault */
.selectDefault,
.selecthome {
	width: 100%;
}

.selectDefault li {
	position: relative;
	float: left;
	margin-left: 7px;
	height: 377px;
}

.selectDefault li input[type="radio"] {
	display: none;
}

.selectDefault li label.label1 {
	display: block;
	padding: 5px;
	height: 360px;
	border: #FFF 2px solid;
	border-radius: 3px;
	background-color: #F9F7F1;
	box-shadow: 0 0 0 2px #D3D3D3;
}

.selectDefault li input[type="radio"]:checked+label.label1 {
	box-shadow: 0 0 0 2px #F08CA8;
}

.selectDefault li label.label2 {
	position: absolute;
	bottom: 15px;
	left: 15px;
	width: 120px;
	height: 30px;
	background-image: url(/image/regist/nicotto/btn_select.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	font-size: 0;
	transition: .6s;
}

.selectDefault li label.label2:hover {
	background-image: url(/image/regist/nicotto/btn_select_on.png);
	opacity: .8;
	transition: .6s;
	transform: translateY(1px);
}

.selectDefault li:first-child {
	margin-left: 2px;
}

.selectDefault li img {
	border: 2px solid #F9F4E5;
}

.selectDefault dl {
	width: 148px;
}

.selectDefault dl.avatarBox {
	height: 380px;
}

.selectDefault dl.homeBox {
	height: 171px;
	background: url("/image/regist/bg_defaulthome.gif") no-repeat;
}

.selectDefault dl.avatarBox dt {
	padding: 4px 0 0 4px;
}

.selectDefault dl.homeBox dt {
	padding: 4px 0 0 4px;
}

.selectDefault dl.avatarBox dd,
.selectDefault dl.homeBox dd,
.selecthome dl.homeBox dd {
	display: block;
	text-align: center;
}



/* コインプレゼント枠
------------------------------------------- */

#formBox .coinPresent {
	margin: 40px 0 0 0;
	width: 610px;
	height: 40px;
	background: url("/image/regist/bg_coinpresent.gif") no-repeat 0 0;
}


#formBox .coinPresent p {
	padding: 8px 0 0 0;
	color: #88565A;
	text-align: center;
	font-weight: bold;
	font-size: 17px;
}

#formBox .coinPresent p s {
	margin-right: 5px;
	text-decoration: line-through;
}

#formBox .coinPresent p span {
	color: #FF1985;
}



/* balloonBox
------------------------------------------- */

#contentsArea #formBox .balloonBox {
	position: relative;
	margin-bottom: 10px;
	width: 610px;
	height: 300px;
	background: url("/image/regist/cocolog/bg_staffballoon.gif") no-repeat;
}

#contentsArea #formBox .balloonBox p {
	position: absolute;
	top: 100px;
	left: 60px;
	width: 430px;
	color: #FFF;
	font-weight: bold;
	font-size: 14px;
}

#contentsArea #formBox .balloonBox p strong {
	color: #D02D7C;
}

#contentsArea #formBox .balloonBox p.bottomBtn {
	top: 200px;
	text-align: center;
}

#contentsArea #formBox .balloonBox p.bottomBtn a:link,
#contentsArea #formBox .balloonBox p.bottomBtn a:visited {
	color: #FFF;
	text-decoration: none;
}

#contentsArea #formBox .balloonBox p.bottomBtn a:hover {
	color: #FFF;
	text-decoration: underline;
}

/*登録完了*/
.img_registcomp {
	position: relative;
}

.img_registcomp a {
	position: absolute;
	top: 370px;
	left: 141px;
	width: 339px;
}

a.btn_opacity {
	transition: .6s;
}

a.btn_opacity:hover {
	opacity: .8;
	transition: .6s;
}

/* --------------------------------------------------
  03. 会員登録 （電話番号による認証時の画面）
----------------------------------------------------- */

/* registcomp_sns
------------------------------------------- */

#registcomp_sns {
	position: relative;
	margin-bottom: 10px;
	width: 610px;
	height: 405px;
	background: url("/image/regist/nicotto/pic_registcomp_sns.gif") no-repeat;
}

#registcomp_sns .txt_Sns01 {
	position: absolute;
	top: 192px;
	width: 610px;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}

#registcomp_sns .txt_Sns02 {
	position: absolute;
	top: 244px;
	width: 610px;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}

#registcomp_sns .txt_Sns03 {
	position: absolute;
	top: 374px;
	width: 610px;
	text-align: center;
	font-weight: bold;
	font-size: 12px;
}

#registcomp_sns .txt_Sns03 a:link,
#registcomp_sns .txt_Sns03 a:visited {
	color: #C18D26;
	text-decoration: underline;
}

#registcomp_sns .txt_Sns03 a:hover {
	color: #EBAC2D;
	text-decoration: underline;
}

#registcomp_sns .txt_Sns03 span {
	font-weight: normal;
}


#registcomp_sns .btnSns {
	position: absolute;
	top: 297px;
	left: 185px;
	display: block;
	width: 243px;
	height: 63px;
}

#registcomp_sns .btnSns a {
	display: block;
	width: 243px;
	height: 63px;
	text-indent: -999em;
}

/* 20191128 新規登録キャンペーン用
------------------------------------------- */
.formBox_Presents {
	margin: 0 auto;
	width: 610px;
}

.formBox_Presents li {
	overflow: hidden;
	margin: 0 auto 24px;
	text-indent: 100%;
	white-space: nowrap;
}

.formBox_Presents li.formBox_Presents-01 {
	height: 100px;
	background: url("/image/regist/lp/20191128/pic_registcomp_201906-1.png") no-repeat center;
}

.formBox_Presents li.formBox_Presents-02 {
	height: 207px;
	background: url("/image/regist/lp/20191128/pic_registcomp_201906-2.png") no-repeat center;
}

.formBox_Presents li.formBox_Presents-03 {
	position: relative;
	height: 352px;
	background: url("/image/regist/lp/20191128/pic_registcomp_201906-3.png") no-repeat center top;
}

.formBox_GotoHome {
	margin: 55px 0 30px;
	width: 100%;
	text-align: center;
}

.formBox_GotoHome a {
	transition: .6s;
}

.formBox_GotoHome a:hover {
	opacity: .6;
}

.formBox_GotoHome::after {
	position: relative;
	display: block;
	padding-top: 16px;
	width: 610px;
	height: 49px;
	background: url("/image/regist/lp/20191128/pic_registcomp_201906-6.png") no-repeat center;
	content: "";
	;
}

.formBox_loginCP {
	overflow: hidden;
	margin: 0 auto 24px;
	height: 250px;
	background: url("/image/regist/lp/20191128/img_loginCP.png") no-repeat center;
	text-indent: 100%;
	white-space: nowrap;
}


/* ----------------------------------------------------------------------
  04. 友だち紹介キャンペーン用
---------------------------------------------------------------------- */


/*　招待画面　i.html
------------------------------------------- */
#inviteHedder {
	position: relative;
	margin: 0 auto;
	width: 650px;
	height: 660px;
	background: url(/image/regist/img_invite.png) no-repeat;
}

#inviteHedder img {
	position: absolute;
	bottom: 0;
	left: 229px;
}


/* リスト共通
------------------------------------------- */
ul.registStep {
	margin-top: 20px;
	margin-left: 5px;
}

ul.registStep li {
	float: left;
	margin-right: 4px;
	padding-left: 15px;
	background: url("/image/regist/ico_step.gif") no-repeat 0 center;
}

ul.registStep li.first {
	padding: 0;
	background: none;
}



/* inviteStepBox
------------------------------------------- */
#inviteStepBox {
	width: 650px;
	height: 100px;
}

#inviteStepBox .swfContent {
	margin: 0;
	padding: 0;
}

#inviteStepBox ul.registStep {
	margin: 0 auto;
	padding-top: 10px;
	width: 560px;
	height: 70px;
}

#inviteStepBox ul.registStep li {
	height: 70px;
}

#inviteStepBox ul.registStep li img {
	padding-top: 10px;
}

#inviteStepBox ul.registStep li img.selected {
	padding-top: 0;
}



/* campaignTerm
------------------------------------------- */
#canpaignTerm {
	margin: 5px 0 10px 110px;
	width: 437px;
	height: 30px;
	background: url("/image/regist/bg_campaignterm_defaul.gif") no-repeat 0 0;
}

#canpaignTerm p.date {
	margin-left: 80px;
	padding-top: 3px;
	color: #996;
	font-weight: bold;
	font-size: 15px;
}

/* 期間変更の注意文言170413
------------------------------------------- */

#canpaignNotice {
	margin: 0 auto 10px;
	width: 437px;
	color: #E00;
	text-align: center;
	font-size: 10px;
}

#canpaignTerm {
	margin-bottom: 5px;
}

/* completionNumber
------------------------------------------- */
.completionNumber dl {
	position: relative;
	margin-bottom: 15px;
	width: 650px;
	height: 48px;
	background: url("/image/regist/bg_friendinvite_number140116.gif") top left no-repeat;
}

.completionNumber dt {
	display: none;
}

.completionNumber dd.number {
	position: absolute;
	top: 12px;
	left: 210px;
	width: 47px;
	color: #777;
	text-align: right;
	font-weight: bold;
	font-size: 15px;
}


.completionNumber dd.exp {
	position: absolute;
	top: 15px;
	right: 20px;
	font-size: 11px;
}

/* benefitBox - 後で消去 -
------------------------------------------- */
#benefitBox01,
#benefitBox02 {
	position: relative;
	width: 320px;
	height: 271px;
}

#benefitBox01 {
	background: url("/image/regist/bg_benefit01.gif") no-repeat;
}

#benefitBox02 {
	background: url("/image/regist/bg_benefit02.gif") no-repeat;
}

#benefitBox01 dl,
#benefitBox02 dl {
	margin: 0 0 10px 11px;
	height: 100px;
}

#benefitBox01 dd,
#benefitBox02 dd {
	margin: -95px 0 0 90px;
}

#benefitBox01 p.comment {
	position: absolute;
	top: 145px;
	left: 35px;
	width: 170px;
	height: 50px;
}

/* 10/8追加分 */
#benefitBox01 p.caution {
	position: absolute;
	bottom: 7px;
	left: 25px;
	width: 260px;
	height: 35px;
	font-size: 10px;
	line-height: 1.4;
}

#benefitBox01 p.caution strong {
	color: #E60000;
}

#benefitBox01 p.caution a:link,
#benefitBox01 p.caution a:visited {
	color: #E96440;
	text-decoration: none;
	font-weight: bold;
}

#benefitBox01 p.caution a:hover {
	color: #E96440;
	text-decoration: underline;
}



#benefitBox02 ul.benefitItemlist {
	margin-left: 12px;
}

#benefitBox02 ul.benefitItemlist li {
	float: left;
	margin-right: 3px;
}

#benefitBox02 ul.caution {
	margin: 2px 0 0 12px;
	width: 294px;
	zoom: 1;
}

#benefitBox02 ul.caution li {
	margin: 0;
	padding: 0 0 1px 8px;
	background: url("/image/common/ico_list_info.gif") no-repeat 2px 7px;
	color: #777;
	font-size: 10px;
	line-height: 15px;
}



/* ----------------------------------------------------------------------
  04-2. 友だち紹介キャンペーン用[4周年記念SMS認証]
---------------------------------------------------------------------- */
/* registSMSHeaderArea
------------------------------------------- */
#registSMSHeaderArea {
	position: relative;
	width: 830px;
	height: 144px;
}

#registSMSHeaderArea h2 {
	position: absolute;
	top: 0;
	left: 90px;
}

#registSMSHeaderArea #regist-5stepBox,
#registSMSHeaderArea #regist-4stepBox {
	position: absolute;
	top: 49px;
	left: 90px;
}



/* invite4haed
------------------------------------------- */

#invite4haed {
	margin: 10px auto 0;
	width: 742px;
}

#invite4haed h2 {
	overflow: hidden;
	width: 742px;
	height: 324px;
	background: url("/image/regist/anniversary/invite4_head.jpg") no-repeat;
	text-indent: 100%;
	white-space: nowrap;
}

#invite4haed #benefitArea {
	width: 757px;
	height: 177px;
	background: url("/image/regist/anniversary/invite4_benefit.gif") no-repeat center 0;
}

#invite4haed #benefitArea p {
	display: none;
}


/* invite4area
------------------------------------------- */
#contentsArea #invite4haed #benefitArea.invite4Area {
	width: 650px;
}

#contentsArea #contents-inner.invite4Area .note01 {
	margin: 10px 0;
	text-align: right;
}

#contentsArea #contents-inner.invite4Area {}

#contentsArea #contents-inner.invite4Area .completionNumber {
	position: relative;
	width: 650px;
	height: 50px;
	background: url(/image/regist/anniversary/bg_friendinvite.gif) no-repeat;
}

#contentsArea #contents-inner.invite4Area .completionNumber p.number {
	position: absolute;
	top: 9px;
	left: 69px;
	color: #E16A6A;
	font-weight: bold;
	font-size: 20px;
}

#contentsArea #contents-inner.invite4Area .note02 {
	margin: 10px 0 20px;
}

#contentsArea #contents-inner.invite4Area .btnHelp {
	display: block;
	margin: 14px 0 25px;
	text-align: center;
}

#contentsArea #contents-inner.invite4Area .comment10 {
	letter-spacing: .7px;
	font-size: 10px;
}

#contentsArea #contents-inner.invite4Area .commentCcode {
	margin: -5px 0 0 2px;
	font-size: 10px;
}

#contentsArea #contents-inner.invite4Area .comment13 {
	font-size: 13px;
}

#contentsArea #contents-inner.invite4Area .comment15 {
	font-size: 15px;
}

#contentsArea #contents-inner.invite4Area .comment18 {
	font-size: 18px;
}

#contentsArea #contents-inner.invite4Area .subtitle {
	font-weight: bold;
	font-size: 15px;
}

#contentsArea #contents-inner.invite4Area p span {
	color: #F00;
}

.mb20 {
	margin-bottom: 20px;
}

#contentsArea #contents-inner.invite4Area .noticeBox {
	padding: 10px 8px 10px;
	background: #EEE;
	font-size: 11px;
}

#contentsArea #contents-inner.invite4Area .noticeBox a:link,
#contentsArea #contents-inner.invite4Area .noticeBox a:visited {
	color: #978356;
}

#contentsArea #contents-inner.invite4Area .noticeBox a:hover {
	color: #978356;
	text-decoration: underline;
}

#contentsArea #contents-inner.invite4Area .note02 a:link,
#contentsArea #contents-inner.invite4Area .note02 a:visited {
	color: #C18D26;
}

#contentsArea #contents-inner.invite4Area .note02 a:hover {
	color: #C18D26;
	text-decoration: underline;
}

#contentsArea #contents-inner.invite4Area .btnInvite4 {
	margin: 17px 0 27px;
}

#contentsArea #contents-inner.invite4Area .btnInvite4_2 {
	margin: 39px 50px;
}

#contentsArea #contents-inner.invite4Area .btnInvite4_3 {
	margin: 46px 0 26px;
}

#contentsArea #contents-inner.invite4Area .btnbox-outer {
	overflow: hidden;
	margin-right: auto;
	margin-left: auto;
	width: 490px;
}

#contentsArea #contents-inner.invite4Area .btnbox-mg02 {
	margin-top: 27px;
	margin-bottom: 33px;
}

#contentsArea #contents-inner.invite4Area .btnbox-mg03 {
	margin-top: 36px;
	margin-bottom: 49px;
}

#contentsArea #contents-inner.invite4Area .comlink {
	margin-top: 13px;
	margin-bottom: 13px;
}

#contentsArea #contents-inner.invite4Area div.alertBox {
	margin-top: 20px;
	padding: 10px 8px;
	border: 1px solid #E4E2DC;
	background-color: #F8F8F0;
}

#contentsArea #contents-inner.invite4Area div.alertBox .sTit {
	font-size: 16px;
}



/*#contentsArea #contents-inner.invite4Area .btnbox-outer{
	width:490px;
	overflow:hidden;
	margin:36px auto 43px;
}*/

#contentsArea #contents-inner.invite4Area .btnbox-outer div.btn234_L {
	float: left;
	width: 234px;
}

#contentsArea #contents-inner.invite4Area .btnbox-outer div.btn234_R {
	float: right;
	width: 234px;
}

#contentsArea #contents-inner.invite4Area ul.noticeList002 li {
	padding-left: .8em;
	text-indent: -.5em;
	line-height: 1.7;
}

#contentsArea #contents-inner.invite4Area .phoneBox {
	clear: both;
	margin-bottom: 10px;
	padding: 4px 34px;
	border: 1px solid #CCC;
	border-collapse: collapse;
}

#contentsArea #contents-inner.invite4Area .phoneBox dl {
	position: relative;
	width: 534px;
}

#contentsArea #contents-inner.invite4Area .phoneBox dl dt {
	font-size: 35px;
}

#contentsArea #contents-inner.invite4Area .phoneBox dl dd {
	position: absolute;
	top: 12px;
	right: -15px;
	font-size: 11px;
}

#contentsArea #contents-inner.invite4Area #benefitcoinArea {
	padding: 30px 0;
	background: #FFF8EE;
	text-align: center;
}

#contentsArea #contents-inner.invite4Area .btnmypage {
	margin: 50px 0 34px 0;
	text-align: center;
}


/* 入力フォーム系スタイル
------------------------------- */
#contentsArea #contents-inner.invite4Area .formStyle input.inpForms {
	margin-bottom: 2px;
	padding: 1px;
	width: 75px;
	border: 1px solid #CCC;
}

#contentsArea #contents-inner.invite4Area .formStyle input.inpFormCcode {
	margin-bottom: 2px;
	padding: 1px;
	width: 40px;
	border: 1px solid #CCC;
}




/* clearfix
------------------------------------------- */
#formBox:after,
.selectDefault:after,
ul.registStep:after,
#benefitBox01 ul.benefitItemlist:after,
#benefitBox02 ul.benefitItemlist:after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: ".";
}