@charset "UTF-8";
/* ----------------------------------------------------
 button
---------------------------------------------------- */
.button{
	display:inline-block;
	padding:10px 20px 10px 36px;
	border-radius:4px;
	background-image:url("/join/image/common/icon/button_arrow_default.png");
	background-image:url("/join/image/common/icon/button_arrow_default_ie8.png")\9;
	background-color:#e9eef2;
	background-repeat:no-repeat;
	background-position: 13px center;
	background-size:12px 12px;
	border:1px solid #ced6dd;
	box-shadow:0 1px 0 0 #ffffff inset;
	font-size:13px;
	line-height:100%;
	color:#4F4F4F;
}
.button:hover{
	opacity:0.7;
	-ms-filter: "alpha(opacity=70)";
	cursor:pointer;
	color:#4F4F4F !important;
}
.button.close{
	background-image:url("/join/image/common/icon/button_close.png");
	background-image:url("/join/image/common/icon/button_close_ie8.png")\9;
}
.button.close.icon{
	width:20px;
	height:20px;
	padding:0;
	background-position:center;
}
.button.offer{
	box-shadow:0 1px 0 0 rgba(255,255,255,0.4) inset;
	background-color:#FFCC01;
	border-color:#FFAE00;
}
@media screen and (max-width: 640px) {
	.button{ display:block; }
}

/* ------------------------------------------------------
 text styles
------------------------------------------------------ */
/*----- color -----*/
.c_white { color: #fff !important;}
.c_black { color: #000 !important;}
.c_gray { color:#666 !important;}
.c_red { color: #ef0000 !important;}
.c_orange { color: #ff7800 !important;}
.c_green { color: #028a00 !important;}
.c_pink {color: #E4378C !important;}
.c_blue {color: #1D4E96 !important;}

/*----- fontsize -----*/
.txtxlarge { font-size: 16px!important; line-height: 160%!important;}
.txtlarge { font-size: 14px!important; line-height: 160%!important;}
.txtnormal { font-size: 12px!important; line-height: 160%!important;}
.txtsmall{ font-size:11px !important; line-height: 140%!important;}
.txtssmall{ font-size:11px !important; line-height: 140%!important;}

/*----- fontweight -----*/
.bold { font-weight: bold!important;}
.normal { font-weight: normal!important;}
.strong { font-weight: bold!important; font-size:110%;}

/*----- textalign -----*/
.textcenter { text-align: center!important;}
.textright { text-align: right!important;}
.textleft { text-align: left!important;}
.pc_textright { text-align: right!important;}
.pc_textcenter { text-align: center!important;}
@media screen and (max-width: 640px) {
	.pc_textright { text-align: left!important;}
	.pc_textcenter { text-align: left!important;}
	.sp_textright { text-align: right!important;}
	.sp_textcenter { text-align: center!important;}
}

/*----- letterspacing -----*/
.letter1 { letter-spacing:-1px !important;}

/*----- line height -----*/
.l_height10 { line-height: 1.0em!important;}
.l_height11 { line-height: 1.1em!important;}
.l_height12 { line-height: 1.2em!important;}
.l_height13 { line-height: 1.3em!important;}
.l_height14 { line-height: 1.4em!important;}
.l_height15 { line-height: 1.5em!important;}
.l_height17 { line-height: 1.7em!important;}
.l_height18 { line-height: 1.8em!important;}

/*----- textindent -----*/
.indent10 { text-indent: -1em; padding-left: 1em;}
.indent15 { text-indent: -1.5em; padding-left: 1.5em;}
.indent20 { text-indent: -2em; padding-left: 2em;}
.indent25 { text-indent: -2.5em; padding-left: 2.5em;}
.indent30 { text-indent: -3em; padding-left: 3em;}
.indent35 { text-indent: -3.5em; padding-left: 3.5em;}
.indent40 { text-indent: -4em; padding-left: 4em;}


/* ------------------------------------------------------
 link
------------------------------------------------------ */
a.nochange { color: #4F4F4F;}
a:hover.nochange { color: #4F4F4F;}
a.link { background: url("/join/image/common/icon_link.png")  0 center no-repeat; padding-left: 30px; color: #4F4F4F !important;}
a.link:hover { color: #3597EA !important; text-decoration: none;}
a.link2 { color: #4F4F4F !important;}
a.link2:hover { color: #3597EA !important; text-decoration: none;}
a.txt { color: #3597EA !important;}
.anchor { display: block; margin-top: -94px; padding-top: 94px; visibility: hidden;}
a:hover img.overimg { filter: alpha(opacity=70)!important; opacity: 0.6!important;}
@media screen and (max-width: 640px) {
	a.link { display: block; background: url("/join/image/common/icon_link_sp.png")  5px center no-repeat #3597EA; background-size: 11px 14px; padding: 5px 5px 5px 25px; color: #ffffff !important;}
	a.link.nav { background: url("/join/image/common/icon_link_sp.png")  5px center no-repeat #4A6477; background-size: 11px 14px;}
	a.link:hover { color: #ffffff !important;}
	.anchor { margin-top: 0px; padding-top: 0px;}
}


/* ------------------------------------------------------
 caption
------------------------------------------------------ */
.caption01{ text-indent:-1.5em; padding-left:1.5em; color:#666;}
.caption02{ text-indent:-2em; padding-left:2em; color:#666;}
.caption03{ text-indent:-1em; padding-left:1em;}


/* ------------------------------------------------------
 cursor
------------------------------------------------------ */
.pointer { cursor: pointer;}


/* ------------------------------------------------------
 z-index
------------------------------------------------------ */
.zi1000{ z-index:1000;}
.zi1500{ z-index:1500;}

/* ----------------------------------------------------
 float
---------------------------------------------------- */
.clear { clear: both!important;}
.left { float: left!important;}
.right { float: right!important;}
.pc_left{ float:left;}
.pc_right{ float:right;}
.pc_clear{ width:inherit; float:none;}
@media screen and (max-width: 640px) {
	.sp_left{ float:left !important;}
	.sp_right{ float:right !important;}
	.sp_clear{ width:inherit !important; float:none !important;}
}


/* ----------------------------------------------------
 verticalalign
---------------------------------------------------- */
.vat { vertical-align: top!important;}
.vam { vertical-align: middle!important;}
.vab { vertical-align: bottom!important;}



/* ----------------------------------------------------
 display
---------------------------------------------------- */
.block {display:block;}
.iblock {display:inline-block;}
.dnone {display:none;}
.pc_none { display: none;}
.sp_none { display: block;}
@media screen and (max-width: 640px) {
	.pc_none { display: block !important;}
	.sp_none { display: none !important;}
	.sp_br { display: block!important;}
	.sp_dsp_table { display: table!important; width: inherit!important;}
	.sp_tablecell { display: table-cell!important; vertical-align: middle;}
}

/* ------------------------------------------------------
 br
------------------------------------------------------ */
.br { display: block;}
.pc_br { display: block;}
.pc_none { display: none;}
.sp_br { top: 0!important; left: 0!important;}
@media screen and (max-width: 640px) {
	.pc_br { top: 0; left: 0; display: inline;}
	.sp_br { display: block;}
}


/* ----------------------------------------------------
 margin
---------------------------------------------------- */
.mg00 { margin: 0!important;}
.mg05 { margin: 5px!important;}
.mg10 { margin: 10px!important;}
.mg15 { margin: 15px!important;}
.mg20 { margin: 20px!important;}
.mg25 { margin: 25px!important;}
.mg30 { margin: 30px!important;}
.mg35 { margin: 35px!important;}
.mg40 { margin: 40px!important;}

.mt00 { margin-top: 0!important;}
.mt05 { margin-top: 5px!important;}
.mt10 { margin-top: 10px!important;}
.mt15 { margin-top: 15px!important;}
.mt20 { margin-top: 20px!important;}
.mt25 { margin-top: 25px!important;}
.mt30 { margin-top: 30px!important;}
.mt35 { margin-top: 35px!important;}
.mt40 { margin-top: 40px!important;}
.mt45 { margin-top: 45px!important;}
.mt50 { margin-top: 50px!important;}
.mt55 { margin-top: 55px!important;}
.mt60 { margin-top: 60px!important;}
.mt70 { margin-top: 70px!important;}
.mt75 { margin-top: 75px!important;}
.mt80 { margin-top: 80px!important;}
.mt-10 { margin-top: -10px!important;}
.mt-15 { margin-top: -15px!important;}

.mr00 { margin-right: 0!important;}
.mr05 { margin-right: 5px!important;}
.mr10 { margin-right: 10px!important;}
.mr15 { margin-right: 15px!important;}
.mr20 { margin-right: 20px!important;}
.mr25 { margin-right: 25px!important;}
.mr30 { margin-right: 30px!important;}
.mr35 { margin-right: 35px!important;}
.mr40 { margin-right: 40px!important;}
.mr45 { margin-right: 45px!important;}
.mr50 { margin-right: 50px!important;}
.mr55 { margin-right: 55px!important;}
.mr60 { margin-right: 60px!important;}
.mr65 { margin-right: 65px!important;}
.mr70 { margin-right: 70px!important;}
.mr75 { margin-right: 75px!important;}
.mr80 { margin-right: 80px!important;}

.mb00 { margin-bottom: 0!important;}
.mb05 { margin-bottom: 5px!important;}
.mb10 { margin-bottom: 10px!important;}
.mb15 { margin-bottom: 15px!important;}
.mb20 { margin-bottom: 20px!important;}
.mb25 { margin-bottom: 25px!important;}
.mb30 { margin-bottom: 30px!important;}
.mb35 { margin-bottom: 35px!important;}
.mb40 { margin-bottom: 40px!important;}
.mb45 { margin-bottom: 45px!important;}
.mb50 { margin-bottom: 50px!important;}
.mb55 { margin-bottom: 55px!important;}
.mb60 { margin-bottom: 60px!important;}
.mb65 { margin-bottom: 65px!important;}
.mb70 { margin-bottom: 70px!important;}
.mb75 { margin-bottom: 75px!important;}
.mb80 { margin-bottom: 80px!important;}
.mb-20 { margin-bottom: -20px!important;}
.mb-30 { margin-bottom: -30px!important;}
.mb-40 { margin-bottom: -40px!important;}

.ml00 { margin-left: 0!important;}
.ml05 { margin-left: 5px!important;}
.ml10 { margin-left: 10px!important;}
.ml15 { margin-left: 15px!important;}
.ml20 { margin-left: 20px!important;}
.ml25 { margin-left: 25px!important;}
.ml30 { margin-left: 30px!important;}
.ml35 { margin-left: 35px!important;}
.ml40 { margin-left: 40px!important;}
.ml45 { margin-left: 45px!important;}
.ml50 { margin-left: 50px!important;}
.ml55 { margin-left: 55px!important;}
.ml60 { margin-left: 60px!important;}
.ml65 { margin-left: 65px!important;}
.ml70 { margin-left: 70px!important;}
.ml75 { margin-left: 75px!important;}
.ml80 { margin-left: 80px!important;}

.mgauto { margin: 0 auto;}



/* ----------------------------------------------------
 padding
---------------------------------------------------- */
.pd00{ padding: 0!important;}
.pd05{ padding: 5px!important;}
.pd10{ padding: 10px!important;}
.pd15{ padding: 15px!important;}
.pd20{ padding: 20px!important;}
.pd25{ padding: 25px!important;}
.pd30{ padding: 30px!important;}
.pd35{ padding: 35px!important;}
.pd40{ padding: 40px!important;}

.pt00 { padding-top: 0!important;}
.pt05 { padding-top: 5px!important;}
.pt10 { padding-top: 10px!important;}
.pt15 { padding-top: 15px!important;}
.pt20 { padding-top: 20px!important;}
.pt25 { padding-top: 25px!important;}
.pt30 { padding-top: 30px!important;}
.pt35 { padding-top: 35px!important;}
.pt40 { padding-top: 40px!important;}
.pt45 { padding-top: 45px!important;}
.pt50 { padding-top: 50px!important;}
.pt55 { padding-top: 55px!important;}
.pt60 { padding-top: 60px!important;}

.pr00 { padding-right: 0!important;}
.pr05 { padding-right: 5px!important;}
.pr10 { padding-right: 10px!important;}
.pr15 { padding-right: 15px!important;}
.pr20 { padding-right: 20px!important;}
.pr25 { padding-right: 25px!important;}
.pr30 { padding-right: 30px!important;}
.pr35 { padding-right: 35px!important;}
.pr40 { padding-right: 40px!important;}
.pr45 { padding-right: 45px!important;}
.pr50 { padding-right: 50px!important;}
.pr55 { padding-right: 55px!important;}
.pr60 { padding-right: 60px!important;}

.pb00 { padding-bottom: 0!important;}
.pb05 { padding-bottom: 5px!important;}
.pb10 { padding-bottom: 10px!important;}
.pb15 { padding-bottom: 15px!important;}
.pb20 { padding-bottom: 20px!important;}
.pb25 { padding-bottom: 25px!important;}
.pb30 { padding-bottom: 30px!important;}
.pb35 { padding-bottom: 35px!important;}
.pb40 { padding-bottom: 40px!important;}
.pb45 { padding-bottom: 45px!important;}
.pb50 { padding-bottom: 50px!important;}
.pb55 { padding-bottom: 55px!important;}
.pb60 { padding-bottom: 60px!important;}

.pl00 { padding-left: 0!important;}
.pl05 { padding-left: 5px!important;}
.pl10 { padding-left: 10px!important;}
.pl15 { padding-left: 15px!important;}
.pl20 { padding-left: 20px!important;}
.pl25 { padding-left: 25px!important;}
.pl30 { padding-left: 30px!important;}
.pl35 { padding-left: 35px!important;}
.pl40 { padding-left: 40px!important;}
.pl45 { padding-left: 45px!important;}
.pl50 { padding-left: 50px!important;}
.pl55 { padding-left: 55px!important;}
.pl60 { padding-left: 60px!important;}

/* ------------------------------------------------------
 border-radius
------------------------------------------------------ */
.radius03 { border-radius: 3px;}
.radius05 { border-radius: 5px;}
.radius10 { border-radius: 10px;}
.radius15 { border-radius: 15px;}