@charset "UTF-8";
/*////////////////////////////////////////////////////////////
hana-jo.com - common.css for all pages.
------------------------------------------------------------
[Reset]
[Layout]
[Parts]
	1. #content
	2. #footer
	3. anchor links
	4. blockInfo
[Other]
	1. text-align
	2. clearfix
	3. form

////////////////////////////////////////////////////////////*/

/* ################################################################################
[Reset] Resetting HTML elements styles
################################################################################ */

h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, th, td, img, form {
	margin: 0;
	padding: 0;
	border: none;
	line-height: 100%;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
	text-align: left;
}

input,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

img {
	vertical-align: top;
}

hr {
	display: none;
}

ul, ol {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

object, embed {
	outline: 0;
} 

/* ################################################################################
[Layout] Control page layouts
################################################################################ */

body {
	background-color: #fff;
	text-align: center;
	margin-top: 12px;
	font-family: sans-serif;
}


#content {
	width: 950px;
	margin: auto;
	margin-top: 25px;
	margin-bottom: 55px;
}
#content_flash {
	width: 950px;
	margin:0 auto;
}

#blockMainContent {
	width: 720px;
	margin: auto;
	margin-top: 25px;
}


#wrapper_flash{
	height:480px;
	margin-top: 10px;
}
#wrapper_lecture_detail{
	height:480px;
	margin-bottom: 10px;
	}
#wrapper_lecture{
	height:480px;
	}
#wrapper_mypage{
	height:500px;
	margin-top: 10px;
	margin-bottom: 10px;
	}
#wrapper_mypage_scratch{
	height:522px;
	margin-top: 10px;
	margin-bottom: 10px;
	}


div#content div.itemText .notice{color:#FF6600;}

#TWPBox{position:relative;height:60px;}
.TWPBtn{position:absolute;bottom:0;right:0;}

/* ################################################################################
[Parts] Control each parts
################################################################################ */
/* ------------------------------------------------------------
0. #topContent
------------------------------------------------------------ */
#topContent{
 width:950px;
 height:480px;
 margin:0 auto;
 }

/* ------------------------------------------------------------
1. #content
------------------------------------------------------------ */
div#content h1.center {
	text-align: center;
}

div#content h2 {
	margin: 55px 0 0;
	color: #333;
	font-size: 90%;
	font-weight: bold;
}

div#content h2.top {
	margin-top: 0;
}

div#content p {
	color: #666;
	font-size: 90%;
	line-height: 140%;
}

div#content p.txtError {
	margin: 5px 40px;
	color: #ff0000;
	font-weight: bold;
}

div#content div.errorMessage {
	margin: 40px auto;
	padding: 0.6em 0.8em;
	width: 500px;
	text-align: center;
	border: 1px solid #cc6633;
	font-size:86%;
	font-weight:bold;
	background: #fff6f3;
	color: #cc6633;
}

div#content div.errorMessage2 {
	margin: 20px auto;
	padding: 0.6em 0.8em;
	width: 500px;
	text-align: center;
	border: 1px solid #cc6633;
	font-size:86%;
	font-weight:bold;
	background: #fff6f3;
	color: #cc6633;
}

div#content .formErrorText {
	font-weight:bold;
	color: #cc6633;
}

div#content .formErrorInput {
	border: 1px solid #cc6633;
	background: #fff6f3;
	color: #cc6633;
}

div#content div.itemText {
	margin-top: 15px;
}

div#content div.itemTextBold {
	margin-top: 0;
}

div#content div.itemTextBold p {
	font-weight: bold;
}

div#content p.txtThanks {
	margin-top:55px;
	text-align: center;
}

div#content p.txtReturn {
	margin-top:55px;
	text-align: center;
}

div#content p.btnReturn {
	margin-top:55px;
	text-align: center;
}

div#content .txtLarge {
	font-size: 120%;
	line-height: 160%;
}

div#content .txtSmall {
	font-size: 85%;
}

div#content strong.alert {
	font-size: 120%;
	font-weight: bold;
	line-height: 160%;
}

/*[present*/

.txtCenter{text-align:center;margin-bottom:26px;}

div#content p#informationBox {
	display: inline-block;
	text-align:center;
	margin-top: 5px;
	color: #ff6600;
	font-size: 86%;
	font-weight: bold;
	height:118px;
	background: url(/images/mypage/present_apply/bg_informationBox01.gif) no-repeat left;
}

div#content p.informationBoxPresent {
	margin-bottom:30px;
}

* html div#content p#informationBox {
	display: inline;
	zoom:0;
}

*:first-child+html{
	display: inline;
	
}

div#content p#informationBox span {
	display: inline-block;
	background: url(/images/mypage/present_apply/bg_informationBox02.gif) no-repeat right;
	height:118px;
	padding: 0 20px;
}

div#content p#informationBox span img {
	margin:20px 0 12px 0;
}
/*]*/

div#content .introBox h2{
	width: 656px;
	margin-left:32px;
}

div#content table.boxRegistContent {
	width: 656px;
	height: 200px;
	border: none;
	background: url(/images/signup/border_box_02.gif) no-repeat left bottom;
	margin-left:32px;
}


div#content .boxRegistFig {
	width: 130px;
	text-align: right;
}

div#content .boxRegistFig img {
	margin-right:50px;
	margin-bottom:10px;
}

div#content .boxRegistText {
	padding: 0 30px 30px 50px;
}

div#content .boxRegistText p {
	margin: 8px 10px 0 4px;
	line-height:1.4em;
}

/**/

div#content #boxThanks {
	text-align: left;
}
div#content #boxThanks h2{
	/*width: 790px;*/
}

div#content table.boxThanksContent {
	width: 790px;
	height: 295px;
	border: none;
	background: url(/images/signup/border_box.jpg) no-repeat left bottom;
}


div#content .boxThanksFig {
	width: 280px;
	text-align: right;
}

div#content .boxThanksFig img {
	margin-bottom: 20px;
}

div#content .boxThanksText {
	padding: 0 50px 30px 30px;
}

div#content .boxThanksText p {
	margin: 8px 10px 0 4px;
	line-height:1.4em;
}

/**/

div#content div#recommend {
	float: right;
	display: inline;
	margin: 20px 46px 30px 0;
	width: 400px;
	text-align: left;
	clear:both;
}

div#content div#recommend h3 {
	margin: 40px 0 8px;
}

div#content div#recommend p {
	margin: 8px 0;
}

div#content div#recommend dl {
	clear:both;
	margin-bottom: 28px;
}

div#content div#recommend dt {
	margin-bottom: 9px;
}

div#content div#recommend dd {
}

div#content div#recommend dd p.attention {
	background:url(../images/common/icon_flower.gif) top left no-repeat;
	height:20px;
	padding-left:25px;
	color:#ff6633;
	font-size:80%;
}

div#content div#recommend dd p.attention2 {
	background:url(../images/common/icon_flower_2.gif) top left no-repeat;
	height:20px;
	padding-left:25px;
	color:#ff6633;
	font-size:80%;
}

div#content div#recommend dd p.attention3 {
	background:url(../images/common/icon_flower_3.gif) top left no-repeat;
	height:20px;
	padding-left:25px;
	color:#ff6633;
	font-size:80%;
}

/*blogparts*/
div#content div#blogparts {
	float: left;
	display: inline;
	margin: 20px 0 30px 29px;
	width: 269px;
	height: 380px;
	text-align: center;
}

div#content div#blogparts h3 {
	margin-bottom: 13px;
}

div#content div#blogparts p {
	text-align: center;
}

div#content div#blogparts p.imgBlogparts {
	margin-left: 0;
	margin-top: 0;
	margin-bottom: 20px;
}

div#content div#blogparts h4 {
	margin-bottom: 17px;
}


div#content div#blogparts p.btnBlogparts {
	margin-top: 16px;
}
	div#content div#recommend dl a:hover ,
	div#content div#blogparts p.btnBlogparts a:hover {
		background: none;
	}



/*presentapply*/
.box30 {margin-top:30px}



/* ------------------------------------------------------------
2. #footer
------------------------------------------------------------ */

#footer {
 clear:both;
 position:relative;
	width:950px;
 margin:0 auto;
 padding:15px 0 30px 0;
 text-align:left;
}


#footer #navFooterLeft {
	width:500px;
}

#footer #navFooterLeft li {
	float: left;
}


#footer #navFooterLeft #copy {
	margin-left: 3px;
}


#footer #navFooterRight {
	width: 400px;
	position: absolute;
	right: 0;
	top: 15px;
	text-align:right;
}


/* ------------------------------------------------------------
3. anchor links
------------------------------------------------------------ */

a {
	color: #333;
}

a:visited {
	color: #cc6633;
}

a:hover {
	color: #333;
	text-decoration: none;
}

a:active {
	color: #cc6633;
}

#footer a:hover {
	background-color: transparent;
}

/* ------------------------------------------------------------
4. blocInfo
------------------------------------------------------------ */
#blockInfo {
    position: relative;
    margin: 0 auto;
    padding: 20px;
    overflow: hidden; /* for IE6 */
    width: 910px;
    /*background: url(/images/top/bg_info.gif) left bottom no-repeat; normal style   */
    /*background: url(/images/top/bg_info_2.gif) left bottom no-repeat;  */
    /*background: url(/images/top/bg_info_3.png) left bottom no-repeat;  */
    /*background: url(/images/top/bg_info_3.png) left bottom no-repeat;*/
    background: url(/images/top/bg_info_2.gif) left bottom no-repeat;
}
    #blockInfo a {
        background: none;
    }

#specialContents {
    float: left;
    overflow: hidden;
    width: 520px;
    /*height: 260px;*/
}
    #specialContents h2 {
        margin-bottom: 10px;
    }
    .unitBnr {
        margin-right: -13px;
    }
    .unitBnr p {
        float: left;
        margin-right: 13px;
    }

#subInfo {
    display: inline;
    float: left;
    overflow: hidden;
    margin-right: -16px;
/*    margin-bottom: 11px;*/
    padding: 20px;
    width: 366px;
    height: 131px;
    /*background: url(/images/top/bg_subInfo.gif) left top no-repeat; */
    background: url(/images/top/bg_subInfo.gif) left top no-repeat;
}
#subInfo2 {
    float: right;
}
    .unitSubInfo {
        float: left;
        margin-right: 16px;
    }
        .btnSignUp {
            position: relative;
            margin-left: -3px;
            width: 163px;
        }

.bnrPassoFair {
    margin-bottom: 9px;
}
    .bnrPassoFair a {
        position: relative;
        display: block;
        font-size: 89%;
        text-decoration: none;
        text-align: center;
        letter-spacing: 2px;
    }
        .bnrPassoFair .modBackorder {
            position: absolute;
            right: -4px;
            top: 15px;
            width: 200px;
        }
        .bnrPassoFair .backorder {
            color: #f00;
            font-size: 129%;
            font-weight: bold;
        }
        .bnrPassoFair .backorderUnit {
            color: #f00;
            font-size: 92%;
            font-weight: bold;
        }
        .bnrPassoFair .date {
            display: block;
            margin-top: 3px;
            color: #666;
            font-size: 85%;
        }
        .bnrPassoFair .endOfCampaign {
            position: absolute;
            left: 34px;
            top: -4px;
        }
        


/* ################################################################################
[Other] Common styles
################################################################################ */

/* ------------------------------------------------------------
1. text-align
------------------------------------------------------------ */
.alignRight {
	text-align: right;
}

.alignLeft {
	text-align: left;
}

.alignCenter {
	text-align: center;
}

.clear {
	clear: both;
}

/* ------------------------------------------------------------
2. clearfix
------------------------------------------------------------ */

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* ------------------------------------------------------------
3. form
------------------------------------------------------------ */

#groupSubmitForm table {
	width: 720px;
	margin-top: 15px;
	background: white url(/images/common/form/bg_tbl_1.gif) repeat-y left top;
	border-collapse: collapse;
}

#groupSubmitForm div.tblWrapper {
	padding-bottom: 4px;
	background: white url(/images/common/form/bg_tbl_2.gif) no-repeat left bottom;
}

#groupSubmitForm table th {
	width: 225px;
	vertical-align: top;
}

#groupSubmitForm table td {
	width: 495px;
}

#groupSubmitForm table th.tblTop {
	background: url(/images/common/form/box_form_top_th.gif) no-repeat left top;
}

#groupSubmitForm table td.tblTop {
	background: url(/images/common/form/box_form_top_td.gif) no-repeat left top;
}
	#groupSubmitForm table td.tblTop input#login_id ,
	#groupSubmitForm table td.tblBtm input#password {
		width: 20em;
	}

#groupSubmitForm table th.tblBtm {
	background: url(/images/common/form/box_form_btm_th.gif) no-repeat left bottom;
}

#groupSubmitForm table td.tblBtm {
	background: url(/images/common/form/box_form_btm_td.gif) no-repeat left bottom;
}

#groupSubmitForm table td p,
#groupSubmitForm table th p {
	margin: 25px;
	margin-left: 30px;
	margin-bottom: 0;
}

#groupSubmitForm table .tblTop p {
	margin-top: 30px;
}

#groupSubmitForm table .tblBtm p {
	margin-bottom: 30px;
	word-break: break-all;
}

#groupSubmitForm div.tblWrapper table .tblTop p {
	margin-top: 30px;
	margin-bottom: 26px;
}

#groupSubmitForm table .required {
	color: #ff6600;
}

#groupSubmitForm table li {
	float: left;
	position: relative;
	width: 240px;
}

#groupSubmitForm table li p {
	margin-right: 0;
}

#groupSubmitForm table dl {
	margin: 25px;
	margin-left: 30px;
	margin-bottom: 0;
}

#groupSubmitForm table dt {
	display: block;
	float: left;
	width: 40px;
	color: #666;
	font-size: 90%;
	line-height: 150%;
}

#groupSubmitForm table dd {
	display: block;
	float: left;
	width: 150px;
	color: #666;
	font-size: 90%;
	line-height: 150%;
}

#groupSubmitForm table button {
	line-height: 130%;
}

#groupSubmitForm table  dd input {
	width: 100px;
}

#groupSubmitForm table dl.address dt {
	width: 130px;
}

#groupSubmitForm table dl.address dd {
	width: 310px;
}

#groupSubmitForm table dl.address dd input {
	width: 250px;
}

#groupSubmitForm table p.caption_txt{
	width:200px;
	font-size:85%;
	background:#fff;
	font-size:75%;
	margin:5px 0 0 20px;
	padding:5px;
	width:170px;
	}

/* Button
------------------------------------------------- */

#groupSubmitForm input.btnConfirm,
#groupSubmitForm input.btnConfirm2,
#groupSubmitForm input.btnModify,
#groupSubmitForm input.btnPredone,
#groupSubmitForm input.btnLogin,
#groupSubmitForm input.btnRegist,
#groupSubmitForm input.btnApply,
#groupSubmitForm input.btnSubmit,
#groupSubmitForm input.btnResign,
#groupSubmitForm input.btnCancel,
#groupSubmitForm input.btnChange {
	margin-top: 30px;
	border: 0px;
	cursor: pointer;
}

#groupSubmitForm input.btnApply,
#groupSubmitForm input.btnPredone,
#groupSubmitForm input.btnRegist,
#groupSubmitForm input.btnConfirm2,
#groupSubmitForm input.btnCancel {
}

#groupSubmitForm label{
	cursor: pointer;
	}

#groupSubmitForm input.btnLeft {
	margin-right: 25px;
}

p.itemCheckbox {
	margin-top: 15px;
	text-align: center;
}

#groupSubmitForm span.itemList {
	padding-right: 20px;
}

/* Policy
------------------------------------------------- */

#unitPolicy #boxText {
	width: 720px;
	height: 120px;
	overflow: auto;
	margin-top: 15px;
	border: 1px solid #7f9db9;
}

#unitPolicy #boxText p {
	padding: 5px 10px;
}


/* Error
------------------------------------------------- */
div.error div#blockMainContent {
	text-align:center;
}

div.error div#blockMainContent p {
	text-align:center;
}

div.error p#errorMessage{
	font-weight: bold;
	font-size: 100%;
}

/* ------------------------------------------------------------
4. global navi
------------------------------------------------------------ */
#header{
	width:950px;
 height:55px;
 margin:0 auto 15px auto;
 padding:9px 0 0 0;
 background-image:url(/images/common/gnav/bg_global.png);
 background-repeat:no-repeat;
}
#header .logo{
 float:left;
	width:210px;
 padding-left:15px;
}
#header #gnav{
 float:left;
 width:575px;
}
#header #gnav li{
 float:left;
}
#header #gnav li.top{
 margin-right:37px;
}
#header #gnav li.cm{
 margin-right:23px;
}
#header .toyota{
 float:left;
	width:142px;
}


/* ------------------------------------------------------------
99. clearfix
------------------------------------------------------------ */
#blockInfo {
    *zoom: 1;
}
    #blockInfo:after {
        content: ".";
        clear: both;
        display: block;
        line-height: 0;
        height: 0;
        visibility: hidden;
    }

