@charset "shift_jis";

/* 	token.css
====================================== */

/* sideArea
--------------------------------- */
/* sideNavi */	
#token #sideArea .sideNavi dl {
	background-color: #e2e2e2;
	border-bottom: solid 1px #fff;
	margin-bottom: 15px;
}
#token #sideArea .sideNavi .ttl .cur {
	background-color: #1a3694 !important;
}
#token #sideArea .sideNavi .ttl a{
	color: #fff;
}
#token #sideArea .sideNavi .ttl.multi{
	background-color: #1a3694;
	margin-bottom: 0;
	padding: 12px 1.0em 11px;
}
#token #sideArea .sideNavi dt a {
	display: block;
}
#token #sideArea .sideNavi dd {
	background-color: #fff;
	color: #fff;
	font-weight: bold;
	line-height: 40px;
	margin-bottom: 1px;
	text-indent: 1.0em;
}
#token #sideArea .sideNavi dd a {
	border-left: solid 1px #e2e2e2;
	border-right: solid 1px #e2e2e2;
	display: block;
	color: #0265cb;
}
#token #sideArea .sideNavi .multi {
	background-color: #fff;
	color: #fff;
	font-weight: bold;
	line-height: 1.2em;
	margin-bottom: 1px;
	padding: 0;
	text-indent: 0;
}
#token #sideArea .sideNavi .multi a {
	color: #0265cb;
	padding: 12px 1.0em 11px;
}
/*pc for conversion tool*/
#token #sideArea .sideNavi .cur{
	background-color:#e5ecf4;
}


/* common */
#token #contents .stepBg{
	padding-bottom:20px;
	border-bottom:1px dotted #cfcfcf;
	margin:0 0 20px;
}
#token #contents .stepBg dl{
	width:390px;
}
#token #contents .stepBg.last dl{
	width: auto;
}
#token #contents .stepBg span{
	color:#ffffff;
	background-color:#ff9000;
	padding:6px 5px;
	font-size:110%;
	font-weight:bold;
	display:inline-block;
}

/* /token/switch/ba_01.html
--------------------------------- */
#token #contents .changeTkn dl{
	width:350px;
}
#token #contents .changeTkn dl dd{
	border-top:dotted 1px #c1c1c1;
	padding-top:10px;
	margin-top:10px;
}

/* /token/switch/01.html,
   /token/switch/ba_01.html
--------------------------------- */
#token #contents table .tokenImg{
	width: 120px;
	margin: 5px auto;
}
#token #contents table .tokenImg img,
#token #contents .stepCont img{
	width: 100%;
	height:auto;
}
#token #contents table .bgArea{
	background-color: #ffebec;
	width: 80%;
	padding: 10px;
	margin: 10px auto 5px;
}
#token #contents .stepTtl{
	color: #1a3694;
	font-size: 1.4em;
	padding: 10px 0 10px 55px;
	margin-top: 30px;
	position: relative;
}
#token #contents .stepNum{
	background: #1a3694;
	color: #fff;
	padding: 10px 16px;
	border-radius: 50%;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
}
#token #contents .stepCont{
	min-height: 30px;
	padding-left: 55px;
	margin-top: 15px;
}
#token #contents .stepContInner{
	width: 220px;
	margin: 20px 30px 10px;
}
#token #contents .stepCont:not(:last-of-type){
	background: url(/account/ordinary/images/index_img010.png) repeat-y 17px top;
	background-size: 9px 17px;
}
#token #contents .qaBox{
	border: solid 1px #c1c1c1;
	padding: 20px 20px 15px;
}
#token #contents .qaBox dt{
	position: relative;
	font-size: 1.2em;
	color: #112d8d;
	margin-bottom: 15px;
	padding: 0 0 15px 35px;
	border-bottom: 1px dotted #c1c1c1;
}
#token #contents .qaBox dt:before{
	content: 'Q';
	position: absolute;
	left: 0;
	color: #fff;
	text-align: center;
	background-color: #112d8d;
	width: 25px;
	height: 25px;
	border-radius: 2px;
	margin-top: -2px;
}
#token #contents .txtNormal{
	font-weight: normal;
}

/* /token/switch/help2.html
--------------------------------- */
#contents .switchHelp02{
	width:760px;
}
#contents .switchHelp02 #flowChartResult{
	padding:0 14px;
}
#contents .switchHelp02 dl#flowChart2{
	margin-bottom: 20px;
	padding: 0 17px 0 16px;
	background: url(/token/switch/image/help2_bg001.gif) no-repeat 0 0;
	line-height: 0;
	font-size: 0;
}
#contents .switchHelp02 dl#flowChart2 dt,
#contents .switchHelp02 dl#flowChart2 dd{
	padding-top: 20px;
	line-height: 0;
	font-size: 0;
}
#contents .switchHelp02 dl#flowChart2 dd.ans01{
	float: left;
	width: 371px;
}
#contents .switchHelp02 dl#flowChart2 dd.ans02{
	float: left;
	width: 356px;
}
#contents .switchHelp02 dl#flowChart2 dd.ans03{
	float: left;
	width: 185px;
}
#contents .switchHelp02 dl#flowChart2 dd.ans04{
	float: left;
	width: 171px;
}
#contents .switchHelp02 dl#flowChart2 dd.cur_01{
	width:185px;
	height:50px;
	background:url(/token/switch/image/help2_tx005_on.gif) no-repeat 0 20px;
}
#contents .switchHelp02 dl#flowChart2 dd.cur_02{
	width:171px;
	height:50px;
	background:url(/token/switch/image/help2_tx006_on.gif) no-repeat 0 20px;
}
#contents .switchHelp02 dl#flowChart2 dd.cur_03{
	width:185px;
	height:50px;
	background:url(/token/switch/image/help2_tx008_on.gif) no-repeat 0 20px;
}
#contents .switchHelp02 dl#flowChart2 dd.cur_04{
	width:171px;
	height:50px;
	background:url(/token/switch/image/help2_tx009_on.gif) no-repeat 0 20px;
}
#contents .switchHelp02 dl#flowChart2 dd.cur_01 img,
#contents .switchHelp02 dl#flowChart2 dd.cur_02 img,
#contents .switchHelp02 dl#flowChart2 dd.cur_03 img,
#contents .switchHelp02 dl#flowChart2 dd.cur_04 img{
	display:none;
}
#contents .switchHelp02 ol.flow dl{
}
#contents .switchHelp02 ol.flow dl dt{
	position: relative;
	width: 692px;
	padding: 10px 0 0 40px;
	font-weight: bold;
}
#contents .switchHelp02 ol.flow dl dt img{
	position: absolute;
	top: 0;
	left: 0;
}
#contents .switchHelp02 ol.flow dl dd{
	padding: 10px 0 0 40px;
}
#contents #flowChartResult .heading02_b {
	background:url(/token/switch/image/com_bg001.gif) no-repeat;
	margin-bottom: 15px;
	color:#ffffff;
	display:block;
	padding:7px 14px 7px;
	font-size:110%;
	font-weight:bold;
	line-height:1.2;
}
#contents #flowChartResult .heading02_g {
	background:url(/token/switch/image/com_bg002.gif) no-repeat;
	margin-bottom: 15px;
	color:#ffffff;
	display: block;
	padding: 7px 14px 7px;
	font-size:110%;
	font-weight: bold;
	line-height: 1.2;
}
#contents .switchHelp02 ol.flow dl.ans1_s1 dd,
#contents .switchHelp02 ol.flow dl.ans1_s2 dd,
#contents .switchHelp02 ol.flow dl.ans2_s1 dd{
	width: 582px;
	padding: 10px 110px 0 40px;
}
#contents .switchHelp02 ol.flow dl.ans1_s1{
	height: 105px;
	background: url(/token/switch/image/help2_img003.gif) no-repeat 100% 0;
}
#contents .switchHelp02 ol.flow dl.ans1_s2{
	background: url(/token/switch/image/help2_img007.gif) no-repeat 100% 0;
}
#contents .switchHelp02 ol.flow dl.ans2_s1{
	background: url(/token/switch/image/help2_img006.gif) no-repeat 100% 0;
}
#contents .switchHelp02 .box_orange,
#contents .switchHelp02 .box_orange3{
	width: 565px;
	margin-top: 15px;
	padding: 10px 110px 10px 7px;
	border: 1px solid #e97e00;
	background: url(/token/switch/image/help2_img005.gif) no-repeat 595px 75%;
}
#contents .switchHelp02 .box_orange3{
	width: 668px;
	padding: 10px 7px;
	background: none;
}
#contents .frameA  .icon_ques{
	margin-right:5px;
	vertical-align: top;
}
#contents #flowChartResult td.pItem_sp {
	background:none;
}
#contents .dotLine{
	background:url(/token/switch/image/com_bg003.gif) repeat-x;
	margin:20px 0 10px 0;
	width:732px;
	height:2px;
}

/* /token/onetime/change.html
--------------------------------- */
/* tabContent */
#token #contents .tabContentSwitch{
	border-bottom: 4px solid #1a3694;
}
#token #contents .tabContentSwitch li{
	background-color: #f5f5f5;
	float: left;
	width: 50%;
	font-size: 1.5em;
	line-height: 1.3em;
	padding: 15px 0 10px;
}
#token #contents .tabContentSwitch li.cur{
	background-color: #1a3694;
	font-weight: bold;
}
#token #contents .tabContentSwitch li.boxRname{
	padding: 22px 0px;
}
#token #contents .tabContentSwitch li a{
	display: block;
	color: #000;
	text-align: center;
	text-decoration: none;
}
#token #contents .tabContentSwitch li.cur a{
	color: #fff;
}
#token #contents .tabContent{
	margin-top: 25px;
}
#token #contents .tabContent img:not(.noBdr){
	padding: 10px;
	border: 1px solid #e2e2e2;
}
#token #contents .tabContent .fL{
	width: 390px;
}
#token #contents .tabContent li .fL{
	width: 360px;
}
#token #contents .tabContent dl:not(:first-of-type),
#token #contents .tabContent dl ol li:not(:first-child){
	margin-top: 50px;
}
#token #contents #boxR{
	display: none;
}

/* /token/tokens/registration.html
--------------------------------- */
#contents .tokenStep{
	background:#e6edff url(/token/tokens/images/registration_ex001.gif) no-repeat left top;
	padding:20px 27px 20px;
	margin:20px 0 0;
}
#contents .tokenStep div{
	margin-bottom:0;
}
#contents .tokenStep .fL,
#contents .tokenStep .fR{
	width:339px;
	text-align:center;
}

/* /card/switch/index.html
--------------------------------- */
#contents .serviceTable{
	background-color:#fffff;
	border-top:1px solid #c1c1c1;
	border-right:1px solid #c1c1c1;
	font-size:100%;
}
#contents .serviceTable th,
#contents .serviceTable td{
	padding:8px;
	font-weight:normal;
	border-bottom:1px solid #c1c1c1;
	border-left:1px solid #c1c1c1;
}
#contents .serviceTable th,
#contents .serviceTable td{
	text-align:center;
}
#contents .serviceTable td.odd,
#contents .serviceTable th.odd{
	background-color:#f8f8f8;
}
#contents .serviceTable th.top{
	background-color:#112d8d;
	font-weight:bold;
	color:#ffffff;
}
#contents .flowSwitch dt{
	clear: left;
}
#contents .flowSwitch dt span{
	display: inline-block;
	width: 30px;
	padding: 3px 5px;
	margin-right: 10px;
	background-color: #4f81bd;
	color: #ffffff;
	text-align: center;
}
#contents .flowSwitch dd{
	float: left;
	width: 390px;
	margin-bottom: 15px;
	padding: 10px;
}
#contents .flowSwitch dd.last{
	margin-bottom: 0;
}
#contents .flowSwitch .fig{
	width: 300px;
	border: 1px solid #4f81bd;
}
#contents .flowSwitch .fig .txt01,
#contents .flowSwitch .fig .txt02{
	display: inline-block;
	width: 52%;
}
#contents .flowSwitch .fig .txt01{
	width: 45%;
	margin-right: 3%;
}
#contents .flowSwitch .fig .txt01,
#contents .flowSwitch .fig .txt02,
#contents .flowSwitch .fig .txt03{
	padding: 3px 0;
	background-color: #4f81bd;
	color: #ffffff;
	text-align: center;
}
#contents .w430{
	width:430px;
}
#contents .marginTL{
	margin: 30px 0 0 25px;
}

/* /token/onetime/correct.html 
--------------------------------- */
#contents img.borderFrame{
	border:1px solid #c1c1c1;
}

/* /token/onetime/index.html,
/token/onetime/about.html,
/token/onetime/correct.html
--------------------------------- */
#token #contents .sample,
#token #contents .sample02{
	margin: 0 auto;
}

/* /token/onetime/index.html
--------------------------------- */
#token #contents .sample02{
	width: 65%;
}
#token #contents .tokenType .fL{
	width: 550px;
}
#token #contents .tokenType .fR{
	width: 150px;
	text-align: center;
}

/* clearFix
--------------------------------- */
.cfx,
#contents #flowChart ul,
#contents #flowChart2,
#contents .switchHelp02 ol.flow li,
#contents .switchHelp02 ol.flow dl,
#contents .switchHelp02 ol.flow dl dd,
#contents .tokensNavi ul,
#contents .tokensNaviBtm ul,
#contents .tokenStep,
#contents .idToken,
#contents .flowSwitch,
#token #contents .tknFlow,
#token #contents .stepBg{
	/zoom:1;
}
.cfx:after,
#contents #flowChart ul:after,
#contents #flowChart2:after,
#contents .switchHelp02 ol.flow li:after,
#contents .switchHelp02 ol.flow dl:after,
#contents .switchHelp02 ol.flow dl dd:after,
#contents .tokensNavi ul:after,
#contents .tokensNaviBtm ul:after,
#contents .tokenStep:after,
#contents .idToken:after,
#contents .flowSwitch:after,
#token #contents .tknFlow:after,
#token #contents .stepBg:after{
	content:'';
	display:block;
	clear:both;
}

/* smt tablet
------------------------------------ */
@media screen and (max-width:1023px){
	/* common */
	/* sideArea */
	#token #sideAreaCL .sideNavi dt.multi br{
		display:none;
	}
	#token #mainContainer #contents{
		padding-top:20px;
	}
}

/* smt
------------------------------------ */
@media screen and (max-width:767px){
	/* common */
	#token .txtIndent02{
		padding-left: 1.5em;
		text-indent: -1.5em;
	}
	#token .mb0{
		margin-bottom: 0 !important;
	}
	#token .mr0{
		margin-right: 0 !important;
	}
	#token .mtSP10{
		margin-top: 10px;
	}
	#token .mtSP15{
		margin-top: 15px !important;
	}
	#token .txtSPC{
		text-align: center;
	}
	#token .verB{
		vertical-align: bottom;
	}
	#token .wSP50{
		width: 50% !important;
	}
	#token #contents .heading03_7 span{
		display: inline-block;
	}
	/* /token/onetime/change.html
	 ------------------------------- */
	/* tabContent */
	#token #contents .tabContentSwitch li{
		font-size: 1.3em;
		padding: 18px 0 10px;
	}
	#token #contents .tabContentSwitch li a{
		padding: 0 10px;
	}
	#token #contents .tabContentSwitch li span{
		font-size: 1.1em;
	}
	#token #contents .tabContent{
		padding: 0 3%;
		width: 94%;
	}
	#token #contents .tabContent img{
		box-sizing: border-box;
		max-width: 300px;
		margin-top: 5px;
	}
	#token #contents .tabContent .fL,
	#token #contents .tabContent li .fL{
		width: auto;
	}
	/* /token/tokens/registration.html 
	 ------------------------------- */
	#token #contents .tokenStep{
		padding: 5px 0;
		background-image: none;
	}
	#token #contents .tokenStep .fL{
		width: 50% !important;
		float: left !important;
	}
	#token #contents .tokenStep .fR{
		width: 50% !important;
		float: right !important;
	}
	#token #contents .tokenStep .mrSP05{
		margin-right: 5px;
	}
	#token #contents .tokenStep .mlSP05{
		margin-left: 5px;
	}
	/* /card/switch/index.html
	 ------------------------------- */
	#contents .fontSans{
		font-family: sans-serif;
	}
	#contents .col3Style01{
		background-image: none;
		}
	#contents .col3Style01 .colBox .detail dd{
		padding: 10px 15px 20px 15px;
		background: -moz-linear-gradient(top, #ffffff,#ebeded);
		background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(0.5, #ebeded));
		border-left: 1px solid #c8c8c8;
		border-right: 1px solid #c8c8c8;
		border-bottom: 1px solid #c8c8c8;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}
	#contents .flowSwitch dd{
		float: none;
		width: auto !important;
		margin-right: 0 !important;
		margin-bottom: 0 !important;
	}
	#contents .marginTL{
		margin: 0;
	}
	
	/* /token/switch/ba_01.html
	--------------------------------- */
	#token #contents .changeTkn dl{
		margin-bottom:10px;
		width:auto;
	}
	#token #contents .changeTkn dl.fL{
		margin-bottom:30px;
	}
	#token #contents .changeTkn dl dd img{
		width:auto;
	}
	#token #contents .stepBg span{
		margin-bottom:5px;
	}
	#token #contents .stepBg dl{
		width:auto;
	}

	/* /token/switch/01.html,
	   /token/switch/ba_01.html
	--------------------------------- */
	#token #contents table .tokenImg{
		width: 60%;
	}
	#token #contents .stepTtl{
		font-size: 1.1em;
		margin-top: 20px;
		padding-left: 50px;
		position: relative;
	}
	#token #contents .stepNum{
		position: absolute;
		top: 1.5em;
		left: 0;
		margin-top: -20px;
		padding: 8px 16px;
	}
	#token #contents .stepCont{
		padding-left: 50px;
		margin-top: 5px;
	}
	#token #contents .stepContInner{
		width: 200px;
		margin: 20px 10px 15px;
	}
	#token #contents .stepCont:not(:last-of-type){
		background-position: 15px top;
	}
	
	/* /token/onetime/about.html */
	#token #contents .sample img.widthAuto{
		width: auto;
	}

	/* /token/onetime/use.html
	--------------------------------- */
	#token #contents .tokenImg02 img{
		max-width: 360px;
	}
	
	/* /token/onetime/index.html
	--------------------------------- */
	#token #contents .sample02 li:first-child img{
		max-width:60%;
	}
	#token #contents .tokenType .fL,
	#token #contents .tokenType .fR{
		width: auto;
	}
	#token #contents .tokenType:first-of-type .fR img{
		width: 30%;
	}
	#token #contents .tokenType:last-of-type .fR img{
		width: 50%;
	}
}