@charset "Shift_JIS";

/* - First{  } - Last{  } - Update{ YYYY-MM-DD } - About{  } */

body{
margin:0;
padding:0;
}

html{
overflow-y: scroll;
}


/* lost ID & pass
---------------------------------------------------------------------- */
/* headerArea
------------------------------ */
#help #header{
width: 770px;
margin:0 auto;
border-top: 25px solid #c2e0ff;
border-bottom: 1px solid #e7e7e7;
}

#help #header:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}


#help #header h1{
float: left;
padding-left: 15px;
}

#help #header p{
float: right;
}

/* contentsArea common
------------------------------ */
#help #contentsArea{
clear: both;
width: 770px;
margin:0 auto;
border-top: 13px solid #c2e0ff;
background:#fafafa;
color: #333;
font-family:'Hiragino Kaku Gothic Pro','MS UI Gothic','‚l‚r ‚oƒSƒVƒbƒN',sans-serif;
padding-bottom: 60px;
}

#help h2{
margin: 15px 0 18px 15px;
}

.goHgTop{
text-align: center;
}

#help .noticeArea{
position: relative;
width: 470px;
margin: 0 auto 20px;
background: #fff;
border: 1px solid #cacaca;
}

#help .noticeArea p.inquire{
padding:0 0 15px 40px;
}

#help .noticeArea p.inquire a{
color:#333;
text-decoration:underline;
}

#help input.text01{
width: 176px;
border: 1px solid #a5acb2;
}

#help input.text02{
width: 40px;
border: 1px solid #a5acb2;
}

#help .ex{
color: #666;
font-size: 11px;
}

#help .mark{
color: #f00;
}

#sslArea{
position: relative;
width: 740px;
text-align: right;
padding: 15px 15px 45px 0;
}

#sslArea p{
position: absolute;
bottom: 15px;
right: 0;
color:#666666;
font-size:10px;
text-align:center;
}


/* apply
---------------------------------------------- */
#help #contentsArea.apply{
width: 755px;
padding-left: 15px;
}

#help #contentsArea.apply h2{
margin-left: 0;
}

.apply .notice p{
margin-right: 15px;
text-align: center;
}

.apply .notice ul{
margin: 10px 0 20px 195px;
}

/* section
------------------------------ */
.apply .section{
float: left;
width: 360px;
height: 310px;
margin: 0 10px 20px 0;
border: 1px solid #cacaca;
background: #fff;
}

.idForm .section{
height: 400px;
}

.apply .section h3{
width: 332px;
margin: 10px auto;
padding: 3px 0 4px 8px;
border-bottom:1px dotted #CDCDCD;
background: url(https://images.hange.jp/hangame/extra/help/bg_point.gif) left center no-repeat;
color:#0069D5;
font-size:14px;
font-weight:bold;
}

.apply .section h4,
.apply .section .txt{
margin: 10px 0 5px 20px;
}

.apply .section input.text01,
.apply .section .ex,
.apply .section .inputYear{
margin-left: 30px;
}

#cancelID .inputArea .ex{
margin: -10px 0 0 5px;
}

.apply .section strong,
#cancelID .inputArea strong{
margin-left: 3px;
color: #f00;
font-weight: normal;
font-size: 11px;
vertical-align: bottom;
}

#cancelID .inputArea .hgPass,
#cancelID .inputArea .birthYear{
margin: 5px 0 10px 5px;
}


.goHelpTop{
text-align: center;
padding-bottom: 50px;
}


.apply .section .btn{
margin-top: 15px;
text-align: center;
}
.apply .section ul{
width: 320px;
margin: 15px 0 0 30px;
}

.apply .section li{
padding-left: 1em;
text-indent: -1em;
}

.apply .goHgTop{
margin-right: 15px;
}

.apply .section ul{
width: 320px;
margin: 15px 0 0 30px;
}

.apply .section ul.txt{
width: 320px;
margin: 0 0 0 20px;
}

.apply .section ul.btnReissue{
margin: 10px 0 10px 20px;
}

.apply .section ul.btnReissue li{
padding-bottom: 10px;
}

/* section02
------------------------------ */
.apply .section02{
width: 710px;
margin: 0 10px 20px 0;
border: 1px solid #cacaca;
background: #fff;
padding: 10px;
}

.apply .section02 h3{
margin: 10px auto;
padding: 3px 0 4px 8px;
border-bottom:1px dotted #CDCDCD;
background: url(https://images.hange.jp/hangame/extra/help/bg_point.gif) left center no-repeat;
color:#0069D5;
font-size:14px;
font-weight:bold;
}

.apply .section02 .inputBox{
	padding:0 0 20px 20px;
	border-bottom: solid 1px #cacaca;
}

.inputBox table.question{
border-collapse: collapse;
}

.inputBox table.question th,
.inputBox table.question td{
border:1px solid #ccc;
padding: 8px;
}

.inputBox table.question th{
background: #f0f0f0;
}

.inputBox table.question td select.ques{
margin-bottom: 0;
width: 232px;
}

.inputBox table.question td input.text03{
width: 226px;
padding: 2px;
}

.inputBox table.question td input.secretQ{
	margin-top: -1px;
}


.apply .section02 h4{
margin: 10px 0 5px 0;
}

.apply .section02 h4 span.ex{
font-weight: normal;
margin-left: 0;
padding-left: 10px;
}

.apply .section02 input.text01,
.apply .section02 .ex,
.apply .section02 .inputYear{
margin-left: 30px;
}

.apply .section02 strong,
#cancelID .inputArea strong{
margin-left: 3px;
color: #f00;
font-weight: normal;
font-size: 11px;
vertical-align: bottom;
}

#cancelID .inputArea .hgPass,
#cancelID .inputArea .birthYear{
margin: 5px 0 10px 5px;
}

.goHelpTop{
text-align: center;
padding-bottom: 50px;
}


.apply .section02 ul.btnL{
text-align: center;
margin-bottom: 5px;
}

.apply .section02 ul.btnL li{
display: inline;
padding: 0 5px;
}

.apply .section02 ul.btnL li .back{
position: relative;
top:-5px;
}

.apply .section ul{
width: 320px;
margin: 15px 0 0 30px;
}

.apply .section02 li{
padding-left: 1em;
text-indent: -1em;
}

.apply .goHgTop{
margin-right: 15px;
}

.apply .section02 ul{
margin: 15px 0 0 30px;
}

.apply .section02 ul.txt{
width: 320px;
margin: 0 0 0 20px;
}

.apply .section02 ul.btnReissue{
margin: 10px 0 10px 20px;
}

.apply .section02 ul.btnReissue li{
padding-bottom: 5px;
}

.apply .section02 input.text03 {
    border: 1px solid #A5ACB2;
    width: 300px;
}

.apply .section02 select.ques{
	display: block;
	border: 1px solid #A5ACB2;
	width:300px;
	margin-bottom: 10px;
	color: #676767;
}

/* complete
---------------------------------------------- */
h3.headLine{
margin-bottom: 22px;
text-align: center;
}

.noticeArea .lead{
width: 450px;
margin: 0 auto;
padding: 5px 0 3px 0;
border-bottom: 1px dotted #cdcdcd;
font-weight: bold;
text-align: center;
}

.noticeArea .mailAd,
.noticeArea .hgID{
width: 450px;
margin: 5px auto;
padding: 5px 0;
background: #ffc;
text-align: center;
}

.noticeArea .acknowledge{
margin: 0 0 10px 30px;
padding-left: 0.5em;
text-indent: -0.5em;
}

/* accept
---------------------------------------------- */
.noticeArea .lead02{
width: 420px;
margin: 0 auto;
padding: 5px 0 3px 0;
border-bottom: 1px dotted #cdcdcd;
font-weight: bold;
text-align: left;
}

/* error
---------------------------------------------- */
#help .errorTxt{
margin: 15px 0;
color:#f00;
font-weight: bold;
text-align: center;
}

#help .return{
position: relative;
text-align: center;
}

#help .return p{
display: inline;
margin: 0 23px;
}

#help .repeat{
margin-bottom: 15px;
text-align: center;
}

.noticeArea .noID{
text-align: center;
}

.noticeArea .noID p{
margin-bottom: 1em;
}

#help .noticeArea .noID p a{
color: #00f;
}



/* cancel ID
---------------------------------------------------------------------- */
/* cancel
---------------------------------------------- */
#cancelID{
clear: both;
width: 470px;
margin: 0 auto 20px;
border: 1px solid #cacaca;
background: #fff;
}

#cancelID h3{
width: 460px;
margin: 5px auto 0;
padding: 3px 0;
background: #c2e0ff;
color: #0069d5;
font-weight: normal;
font-size: 14px;
text-align: center;
}

#cancelID h3 span{
margin-left: 5px;
font-weight: bold;
}

#cancelID h4{
margin: 20px 0 1em;
}

#cancelID .inputArea{
width: 420px;
margin: 0 auto;
}

#cancelID .discontent{
float: left;
margin-bottom: 10px;
}

#cancelID .questionnaire{
float: right;
}

#cancelID .questionnaire select{
position: relative;
bottom: 5px;
}

#cancelID .inputArea p{
clear: both;
}

#cancelID .inputArea textarea{
width: 418px;
height: 135px;
font-size: 12px;
}

#cancelID .inputArea .limit{
color: #c00;
}

#cancelID .btn{
margin: 15px 0;
text-align: center;
}

.cancelNotice{
width: 480px;
margin: 0 auto 20px;
}

.cancelNotice li{
padding-left: 1em;
text-indent: -1em;
}

.noticeArea .returnBtn{
position: absolute;
bottom: -52px;
_bottom: -53px;
left: 0;
}

.noticeArea .thanks{
padding: 10px 0;
text-align: center;
}


/* balance
---------------------------------------------- */
#balance{
position: relative;
left: 5px;
width: 480px;
margin: 0 auto 15px;
}

#balance a{
color: #00f;
}

#balance .balanceSect{
width: 470px;
padding: 10px 0;
background: #ffc;
}

#balance .balanceSect h3{
text-align: center;
}

#balance .balanceSect p{
margin-left: 10px;
}

#balance .balanceSect .sum{
margin: 15px 0 15px 10px;
text-align: center;
}

#balance .balanceSect .sum span{
border-bottom: 1px dotted #f00;
}

#balance .balanceSect .sum strong{
margin: 0 3px;
color: #f00;
font-weight: bold;
}

#balance .repayment{
font-weight: bold;
}

#balance .balanceSect a{
margin-left: 1em;
}

#balance .section{
float: left;
width: 225px;
height: 60px;
margin: 10px  6px 0 0;
padding: 5px 0 5px 5px;
border: 1px solid #c2e0ff;
}

#balance .section h4{
margin-bottom: 5px;
border-bottom: 1px dotted #cacaca;
}

#balance .agree{
margin-top: 1em;
}

/* otp
---------------------------------------------- */

#help #wrapper .otp{
width: 755px;
padding-left: 15px;
}

#help #contentsArea.otp h2{
margin-left: 0;
}

.otp .notice p{
margin-right: 15px;
text-align: center;
}

.otp .notice ul{
margin: 10px 0 20px 195px;
}

/* section
------------------------------ */
.otp .section{
width: 448px;
margin: 0 auto 20px;
padding:10px 0 30px;
border: 1px solid #cacaca;
background: #fff;
}

.otp .section h3{
margin: 10px 0 5px 75px;
}

.otp .section input.text01,
.otp .section input.text02,
.otp .section .ex,
.otp .section .inputYear{
margin-left:85px;
}

#cancelID .inputArea .ex{
margin: -10px 0 0 5px;
}

#help #wrapper input.text01{
width: 208px;
border: 1px solid #a5acb2;
}

#help #wrapper input.text02{
width: 176px;
border: 1px solid #a5acb2;
}

.otp .section strong,
#cancelID .inputArea strong{
margin-left: 3px;
color: #f00;
font-weight: normal;
font-size: 11px;
vertical-align: bottom;
}

#cancelID .inputArea .hgPass,
#cancelID .inputArea .birthYear{
margin: 5px 0 10px 5px;
}

.otp .section .btn{
margin:15px 0 5px;
text-align: center;
}

.otp .section .attention{
margin-bottom:-14px;
font-size:11px;
text-align:center;
}

.otp .section .attention a{
color:#032CDF;
text-decoration:underline;
}

.otp .section p.supple{
text-align:center;
font-size:11px;
}

.otp .section p.supple a{
color:#032cdf;
text-decoration:underline;
}

/*supple02*/

.otp p.supple02{
margin-bottom:20px;
text-align:center;
}

.otp p.supple02 a{
color:#032cdf;
text-decoration:underline;
}

/* mailInput
---------------------------------------------- */
.mailInput{
padding:20px 15px;
text-align:center;
}

.mailInput p.txt{
font-weight:bold;
padding-bottom:25px;
}

.mailInput .mailBox{
padding-bottom:25px;
}

.mailInput .mailBox input{
padding:1px;
height:14px;
}

.mailInput .mailBox span.atmark{
padding:0 1px 0 4px;
font-size:14px;
}

/* caution
---------------------------------------------- */
.caution ul{
width:500px;
margin:0 auto;
}

.caution ul li{
padding:0 0 1.5em 1em;
text-indent: -1em;
}

.caution ul li a{
color:#333;
text-decoration:underline;
}