@charset "shift_jis";

/* 	sd_information.css
====================================== */

/*common parts
--------------------------------- */
.sideNavi dd{
	text-indent: 0.8em;
}

#information #contents hr.line02{
	clear: both;
	display: block;
	height: 1px;
	margin: 0;
	border: none;
	border-top: 1px dotted #cfcfcf;
}

/*contents
--------------------------------- */

/* /information/atm/index.html
   /information/fee/atm.html
   /information/fee/transfer.html
   /information/fee/service.html
------------------------------------ */
/* switch contents */
#business #sideArea{
	display:none;
}
#business #mainContainer #contents{
	float:none;
	margin:15px auto 0;
}
#business #subUnit{
	display: none;
}
/* individual */
#information .ba,
#information .baInline{
	display: none;
}
#information .indiv{
	display: block;
}
#information .indivInline{
	display: inline;
}
/* ba */
#business .ba{
	display:block;
}
#business .baInline{
	display: inline;
}
#business .indiv,
#business .indivInline{
	display:none;
}

/* /information/atm/index.html
------------------------------------ */
/* common */
#information #contents .atmSearch,
#business #contents .atmSearch{
	margin: 0 0 5px;
}
#information #contents .searchLink,
#business #contents .searchLink{
	margin: 10px 0 0 5px;
}
#information #contents .table01 th.bgWhite,
#business #contents .table01 th.bgWhite{
	background-color: #fff;
}
#information #contents .atmLocation img,
#information #contents .atmSearch img,
#business #contents .atmLocation img,
#business #contents .atmSearch img{
	width: auto;
	height: 38px;
}
#information #contents .atmLocation .aeon td,
#business #contents .atmLocation .aeon td{
	padding: 15px;
}
#information #contents .atmLocation .aeon td:first-of-type img,
#business #contents .atmLocation .aeon td:first-of-type img{
	height:24px;
}
#information #contents #aeon.atmSearch .fL img,
#business #contents #aeon.atmSearch .fL img{
	height:26px;
	margin-top: 6px;
}
#information #contents .triangle,
#business #contents .triangle{
	width: 0;
	border-style: solid;
	border-width: 5px 0 5px 12px;
	border-color: transparent transparent transparent #f00;
	height: 0;
	font-size: 0;
	margin: 0 5px 0;
	vertical-align: top;
}
/* individual */
#information #contents .atmBox{
	border-top: 1px solid #e4e4e4;
	border-left: 1px solid #e4e4e4;
	border-right: 1px solid #e4e4e4;
}
#information #contents .atmBox .atmContentBox{
	margin-bottom: 0;
}
#information #contents .atmBox .atmContentBox .atmBoxInner{
	padding: 20px 20px 0;
	position: relative;
	box-sizing: border-box;
}
#information #contents .atmBox .atmContentBox .atmBoxInner .atmBoxImg{
	position: absolute;
	top: 20px;
	right: 30px;
}
#information #contents .atmContentBox{
	border-bottom: 1px solid #e4e4e4;
}
/* business */
#business #contents .table01 th.ttlBlue{
	background-color: #1a3694;
	color: #fff;
}

/* /information/fee/index.html
------------------------------------ */
#information #contents .feeMenu .box01 div{
	float: left;
	width: 290px;
	min-height: 60px;
	_height: 60px;
	margin-top: 20px;
	padding-left: 70px;
}
#information #contents .feeMenu div.menu02{
	background: url(/information/fee/images/index_ic002.gif) no-repeat;
	margin-right: 12px;
}
#information #contents .feeMenu div.menu03{
	background: url(/information/fee/images/index_ic003.gif) no-repeat;
}
#information #contents .feeMenu div.menu04{
	clear: left;
	background: url(/information/fee/images/index_ic004.gif) no-repeat;
}

/* /information/fee/atm.html
------------------------------------ */
#information.feeATM .empColor,
#business.feeATM .empColor{
	color: #fa447f;
	font-weight: bold;
}
#information.feeATM .empColorBlack,
#business.feeATM .empColorBlack{
	font-size: 0.75em;
}
#information.feeATM .num,
#business.feeATM .num{
	vertical-align: middle;
	font-size: 3.2em;
	line-height: 0.75em;
}
#information.feeATM .yen,
#business.feeATM .yen{
	vertical-align: bottom;
	font-size: 1.2em;
	line-height: 1.2em;
}
#information.feeATM .txt,
#business.feeATM .txt{
	vertical-align: middle;
}
#information.feeATM .table01 img,
#business.feeATM .table01 img{
	height: 38px;
	width: auto;
}
#information.feeATM .table01 .aeon,
#business.feeATM .table01 .aeon{
	padding: 15px;
}
#information.feeATM .table01 .aeon img,
#business.feeATM .table01 .aeon img{
	height: 24px;
}
#information.feeATM .firstTimeTx,
#business.feeATM .firstTimeTx{
	font-size: 2.2em;
	line-height: 1.4em;
}
#information.feeATM .moreTime,
#business.feeATM .moreTime{
	font-size: 1.1em;
}
#information.feeATM .moreTime .empColor,
#business.feeATM .moreTime .empColor{
	font-size: 2.2em;
	line-height: 1.2em;
}
#information.feeATM .moreTime .num,
#business.feeATM .moreTime .num{
	font-size: 3.6em;
	line-height: 1.2em;
}
#information.feeATM .moreTime .yen,
#business.feeATM .moreTime .yen{
	font-size: 1.4em;
	line-height: 2.2em;
}

/* /information/fee/service.html
------------------------------------ */
/* common */
#information #contents .boxFrame01.feeBox,
#business #contents .boxFrame01.feeBox{
	display: inline-block;
}
#information #contents .priceTbl td,
#business #contents .priceTbl td{
	text-align: right;
}
/* individual */
#information #contents .priceTbl tr.indiv{
	display: table-row;
}

/* /information/branch/index.html
------------------------------------ */
#information #contents .branchName{
	border:1px solid #e2e2e2;
	width:350px;
	margin:30px auto;
	text-align:center;
}
#information #contents .branchName a{
	background:url(/common/images/com_ic051.png) no-repeat 21% 50%;
	background-size:39px 34px;
	background:url(/common/images/com_ic051.gif) no-repeat 21% 50% \9;/*IE8*/
	display:block;
	padding:18px 18px 18px 25%;
}

/* /information/branch/yh_index.html
------------------------------------ */
#information #contents.yh .table03 td{
	padding: 9px;
}

/* /information/interest/loan.html
------------------------------------ */
#information #contents .boxMenu .cur a{
	font-weight: bold;
	background: url(/common/images/com_ic001_5.png) no-repeat 0 center;
	background-size: auto 5px ;
	background: url(/common/images/com_ic001_5.gif) no-repeat 0 center \9;/*IE8*/
	padding-left: 1.0em;
	color: #333;
	text-decoration: none;
	cursor: default;
}
#information #contents .txtIndent dt{
	float: left;
}
#information #contents .txtIndent dd{
	padding-left: 8em;
}
#information #contents .txtIndent dd p{
	padding-left: 1em;
	text-indent: -1em;
}
#information #contents #tabArea02{
	display: none;
}
#information #contents .bgColor01{
	background-color: #efefef;
}
#information #contents #tabArea01 .boxLogin{
	border: none;
	padding: 20px 0 0;
}
#information #contents #tabArea01 .boxLogin .normalBtn02{
	width: 48%;
}
#information #contents #tabArea01 .boxLogin .normalBtn02 p{
	font-weight: bold;
	font-size: 1.7em;
}
#information #contents #tabArea01 .boxLogin .normalBtn02 a{
	padding: 17px 0;
	font-size: 2.2em;
	border-radius: 8px;
}
#information #contents #tabArea01 .boxLogin .normalBtn02 a span{
	background: url(/service/loan/net/common/images/com_ic015.png) no-repeat right center;
	background-size: 11px auto;
	padding-right: 0.8em;
}
#information #contents #tabArea01 .boxLogin .normalBtn02.fL a{
	border: 2px solid #fc344d;
	background: #fc344d url(/service/loan/net/common/images/com_bg005.png) repeat-x left top;
	background-size: contain;
}
#information #contents #tabArea01 .boxLogin .normalBtn02.fR a{
	border: 2px solid #3fa11a;
	background: #3fa11a url(/service/loan/net/common/images/com_bg006.png) repeat-x left top;
	background-size: contain;
}

/* /information/cashcard/index.html
------------------------------------ */
#information #contents .cardType li{
	line-height: 1.1em;
	width: 45%;
}
#information #contents .cardType img{
	width: 95%;
	height: auto;
}
#information #contents .cardType li p{
	font-size: 0.85em;
}
#information #contents .cardTypeWrap{
	vertical-align: top;
}
#information #contents .txtColor01{
	color: #ffa000;
}
#information #contents .txtColor02{
	color: #fc4c40;
}
#information #contents .cardArrow{
	margin: 0 3px;
}
#information #contents .cashcardList li{
	float: left;
	margin: 0 13px 20px 0;
}

/* /information/atm/index.html
   /information/cashcard/index.html
------------------------------------ */
#information #contents .triangle{
	border-color: transparent transparent transparent #333;
}

/* /information/fee/transfer.html
------------------------------------ */
#information.transfer #contents .boxCol01{
	width: auto;
}
#information.transfer #contents .mainTtl{
	margin-bottom: 30px;
}
#information.transfer #contents .feeContentBox{
	padding: 20px;
	margin-top:40px;
}
#information.transfer #contents .feeBoxInner{
	font-size: 15px;
	position: relative;
	height: 170px;
}
#information.transfer #contents .feeBoxInner p:first-child{
	padding-top:20px;
}
#information.transfer #contents .feeBoxInner span{
	font-size: 30px;
	font-weight: bold;
}
#information.transfer #contents .feeBoxImg{
	position: absolute;
	top: 0;
	right: 20px;
}
#information.transfer #floatBtnAreaWrap{
	display: none;
}
#business.transfer #mainContainer{
	width: 100%;
}
/* floatBtn */
#business.transfer .floatBtn{
	background-color: rgba(241,241,241,0.85);
}
#business.transfer #floatBtnAreaScale{
	width:1px;
	position:fixed;
	left:0;
	bottom:0;
}
#business.transfer #floatBtnArea{
	width:100%;
}
#business.transfer #floatBtnArea.is-fixed{
	position:fixed;
	left:0;
	bottom:0;
}
#business.transfer #floatBtnArea.btnArea .box01{
	padding: 10px 0 13px;
}
#business.transfer #floatBtnArea.btnArea .floatBtnTxt{
	color: #161a36;
	font-size: 1.3em;
	font-weight: bold;
}
#business.transfer #floatBtnArea.btnArea .box01 > a{
	display: block;
	color: #fff;
	font-size: 1.7em;
	font-weight: bold;
	line-height: 3em;
	text-align: center;
	border-radius: 10px;
	margin: 0 auto;
	max-width: 220px;
	background-color: #161a36;
}

/* /information/atm/guide.html
------------------------------------ */
#information.guide #mainContainer #sideArea{
	display: none;
}
#information.guide #contents{
	float: none;
	width: 100%;
}
#information.guide #contents h1{
	color: #606060;
	font-size: 3.6em;
	font-weight: bold;
	line-height: 1.25;
	text-align: center;
	margin-bottom: 35px;
}
#information.guide #contents img.forPCTB{
	margin: 0 auto;
}
#information.guide #contents h2{
	font-size: 2.8em;
	color: #242323;
	font-weight: bold;
	margin-bottom: 20px;
}
#information.guide #contents h2:after{
	content: "";
	display: block;
	width: 372px;
	height: 0;
	border-bottom: 4px solid #b3b3b3;
	position: absolute;
	left: 50%;
	margin-left: -186px;
}
#information.guide #contents .sec01{
	text-align: center;
}
#information.guide #contents .inner{
	background-color: #e2f0fa;
	padding: 30px 0;
}
#information.guide #contents .box01{
	width: 900px;
	margin: 0 auto;
}
#information.guide #contents .blackTx{
	color: #242323;
}
/* transfer */
#information.guide #contents .transfer{
	margin-top: 40px;
}
#information.guide #contents .transfer .logoArea{
	margin-top: 25px;
	padding: 15px 0 20px;
	border: 2px solid #b3b3b3;
	border-radius: 8px;
}
#information.guide #contents .transfer .blackTx:nth-child(1){
	font-size: 2.6em;
	font-weight: bold;
}
#information.guide #contents .transfer .blackTx:nth-child(1) .num{
	font-size: 1.7em;
}
#information.guide #contents .transfer .blackTx:nth-child(3){
	font-size: 1.6em;
}
/* atm */
#information.guide #contents .atm .logoArea{
	background-color: #fff;
	margin-top: 20px;
	padding: 25px 0;
}
#information.guide #contents .atm .blackTx:nth-child(1){
	font-size: 2.4em;
	font-weight: bold;
}
#information.guide #contents .atm .blackTx:nth-child(1) .num{
	font-size: 1.5em;
}
#information.guide #contents .atm .blackTx:nth-child(4){
	font-size: 2.5em;
	font-weight: bold;
}
/* app */
#information.guide #contents .app{
	margin-top: 40px;
}
#information.guide #contents .app .box01{
	width: 855px;
}
#information.guide #contents .app dl{
	width: 448px;
	margin-top: 25px;
}
#information.guide #contents .app dt{
	font-size: 1.25em;
	margin-bottom: 25px;
}
#information.guide #contents .app dd p{
	color: #fff;
	font-size: 1.3em;
	font-weight: bold;
	background-color: #26bf7d;
	margin-bottom: 25px;
	padding: 10px;
	line-height: 1.4em;
}
#information.guide #contents .appList li{
	float: left;
}
#information.guide #contents .appList li:last-child{
	float: right;
}
/* info */
#information.guide #contents .info{
	margin-top: 50px;
}
#information.guide #contents .info .fR{
	width: 450px;
	margin-top: 20px;
}
#information.guide #contents .info .fR img.forPCTB{
	margin: 0;
}
#information.guide #contents .info .fR p:last-child{
	color: #fff;
	font-size: 1.7em;
	font-weight: bold;
	background-color: #3fa9f5;
	padding: 10px;
}

/* clearFix
--------------------------------- */
#information #contents .atmSearch,
#business #contents .atmSearch,
#information #contents .atmImg,
#information #contents .txtIndent,
#information #contents .cashcardList,
.cfx{
	/zoom:1;
}
#information #contents .atmSearch:after,
#business #contents .atmSearch:after,
#information #contents .atmImg:after,
#information #contents .txtIndent:after,
#information #contents .cashcardList:after,
.cfx:after{
	content:'';
	display:block;
	clear:both;
}


/*smt tablet*/
@media screen and (max-width: 1023px){
	/* layout
	--------------------------------- */
	#information #mainContainer #contents,
	#business #mainContainer #contents{
		padding-top: 20px;
	}
	.sideNavi .bnrBox{
		padding: 17px 14px 10px;
	}
	/* /information/atm/index.html
	   /information/fee/atm.html
	   /information/fee/transfer.html
	   /information/fee/service.html
	------------------------------------ */
	/* switch contents */
	#business #pageContainer{
		top: 48px;
	}
	#business #headContainer{
		border-bottom: solid 3px #dedede;
	}
	#business #identity #drawer,
	#business #sideAreaCL{
		display: none;
	}
	#business #mainContainer #contents{
		margin: 0 auto;
	}
	/* /information/fee/atm.html
	------------------------------------ */
	#information.feeATM #contents .table01 .aeon,
	#business.feeATM #contents .table01 .aeon{
		padding: 10px;
	}
	/* /information/atm/guide.html
	------------------------------------ */
	#information.guide #contents img{
		width: 100%;
		height: auto;
	}
	#information.guide #contents .box01{
		width: 94%;
	}
	#information.guide #contents .box01 img{
		width: 80%;
	}
	/* transfer */
	#information.guide #contents .transfer .blackTx:nth-child(1){
		font-size: 2.5em;
	}
	/* app */
	#information.guide #contents .app .box01{
		width: 100%;
	}
	#information.guide #contents .app p.fR,
	#information.guide #contents .app dl.fL{
		float: none;
	}
	#information.guide #contents .app dl.fL{
		width: 90%;
		margin: 25px auto 0;
	}
	#information.guide #contents .app .box01 dl.fL img{
		width: 100%;
	}
	#information.guide #contents .appList li{
		width: 46%;
	}
	/* info */
	#information.guide #contents .info .fL,
	#information.guide #contents .info .fR{
		float: none;
	}
	#information.guide #contents .info .fR{
		width: 551px;
		margin: 0 auto;
	}

	/* /information/fee/transfer.html
	------------------------------------ */
	#business.transfer #contents{
		width: 732px;
	}
}

/*smt*/
@media screen and (max-width: 767px){
	/* /information/atm/index.html
	------------------------------------ */
	/* common */
	#information #contents .padd30,
	#business #contents .padd30{
		padding:5px 30% 10px !important;
	}
	#information #contents .searchLink,
	#business #contents .searchLink{
		margin: 0;
	}
	#information #contents .atmLocation img,
	#information #contents .atmSearch img,
	#business #contents .atmLocation img,
	#business #contents .atmSearch img{
		width: auto;
		height: 30px;
	}
	#information #contents .atmLocation .aeon td,
	#business #contents .atmLocation .aeon td{
		padding: 5px;
	}
	#information #contents .atmLocation .aeon td:first-of-type img,
	#business #contents .atmLocation .aeon td:first-of-type img{
		height:18px;
	}
	/* individual */
	#information #contents .atmBox{
		width: 100%;
		height: auto;
		margin:0;
		padding: 0;
	}
	#information #contents .atmBox .atmContentBox div{
	margin-bottom: 0;
	}
	#information #contents .atmBox .atmContentBox .atmBoxInner{
		padding: 0;
		padding: 5px;
	}
	#information #contents .atmBox .atmContentBox .atmBoxInner,
	#information #contents .atmBox .atmContentBox .atmBoxInner .atmBoxImg{
		position: static;
	}
	#information #contents .atmBox .atmContentBox .atmBoxInner .smtNobr{
		display: none;
	}
	#information #contents .atmBox .atmContentBox .atmBoxInner .atmBoxImg img{
		width: auto;
		height:72px;
	}
	/* ba */
	#business #contents .cardImg{
		width: 50%;
	}
	/* /information/fee/index.html
	------------------------------------ */
	#information #contents .feeMenu .box01 div{
		float: none;
		width: auto;
		height: auto;
	}
	/* /information/fee/atm.html
	------------------------------------ */
	#information.feeATM #contents .table01 img,
	#business.feeATM #contents .table01 img{
		height: 30px;
		width: auto;
	}
	#information.feeATM #contents .table01 .aeon img,
	#business.feeATM #contents .table01 .aeon img{
		height: 20px;
	}
	#information.feeATM .moreTime .empColor,
	#business.feeATM .moreTime .empColor{
		font-size: 1.4em;
	}
	#information.feeATM .empColorBlack .num,
	#business.feeATM .empColorBlack .num{
		font-size: 1.6em;
	}
	#information.feeATM .empColorBlack .num,
	#information.feeATM .empColorBlack .yen,
	#business.feeATM .empColorBlack .num,
	#business.feeATM .empColorBlack .yen{
		vertical-align: baseline;
	}

	/* /information/branch/index.html
	------------------------------------ */
	#information #contents .branchName{
		width:auto;
	}
	#information #contents .branchName a{
		background-position:14% 50%;
	}

	/* /information/branch/yh_index.html
	------------------------------------ */
	#information #contents .smtTbl{
		margin-top: -16px;
	}
	#information #contents .smtHdn{
		display: none;
	}
	#information #contents.yh .table03 td{
		padding: 5px;
	}

	/* /information/interest/loan.html
	------------------------------------ */
	#information #contents .boxMenu .cur a{
		font-weight: normal;
	}
	#information #contents .txtIndent dt{
		float: none;
		padding:0 0 0 19px;
		background: url(/common/images/com_ic017_8.png) 1px 0.5em no-repeat;
		background-size: 10px auto;
		margin-top: 10px;
	}
	#information #contents .txtIndent dd{
		padding-left: 1em;
	}
	#information #contents .txtIndent dd p{
		padding-left: 0;
		text-indent: 0;
	}
	#information #contents #tabArea01 .boxLogin{
		padding: 10px 0 0;
	}
	#information #contents #tabArea01 .boxLogin .normalBtn02{
		width: 80%;
	}
	#information #contents #tabArea01 .boxLogin .normalBtn02 p{
		font-size: 1.5em;
	}
	#information #contents #tabArea01 .boxLogin .normalBtn02 a{
		font-size: 1.8em;
	}

	/*linked from app*/
	#information.appView #headContainer{
		display:none;
	}
	#information.appView #pageContainer{
		top:0;
	}

	/* /information/cashcard/index.html
	------------------------------------ */
	#information #contents .cardType li{
		float: none;
		width: 90%;
	}
	#information #contents .cardType li,
	#information #contents .cardType.basic li:first-child{
		margin: 10px auto 0;
	}
	#information #contents .cashcardImg{
		text-align: center;
	}
	#information #contents .cashcardImg .mr25{
		margin-right: 0 !important;
	}
	#information #contents .cashcardImg img{
		width: 50%;
	}
	#information #contents .cardArrow{
		width: auto;
	}
	#information #contents .cashcardList li{
		float: none;
		margin: 0 0 10px;
		display: inline-block;
		width: 49%;
	}

	/* /information/atm/index.html
	   /information/cashcard/index.html
	------------------------------------ */
	#information #contents .cardUse .cashcardImg{
		max-width: 250px;
		height: auto;
	}

	/* /information/fee/transfer.html
	------------------------------------ */
	#information.transfer #contents .mainTtl{
		margin-bottom: 20px;
	}
	#information.transfer #contents .feeContentBox{
		padding: 5px;
		margin-top: 20px;
	}
	#information.transfer #contents .feeBoxInner{
		font-size: 11px;
		height: auto;
		text-align: center;
	}
	#information.transfer #contents .feeBoxInner p:first-child{
		padding-top:0;
	}
	#information.transfer #contents .boxFrame02 .feeBoxInner span{
		font-size: 23px;
	}
	#information.transfer #contents .feeBoxImg{
		position: static;
		padding-top: 10px;
		width: 80%;
		margin: 0 auto;
		max-width: 290px;
	}
	#business.transfer #contents{
		width: 100%;
	}

	/* /information/atm/guide.html
	------------------------------------ */
	#information.guide #contents .box01 img{
		width: 90%;
	}
	#information.guide #contents h1{
		font-size: 2.4em;
	}
	#information.guide #contents img.forSP{
		margin: 0 auto;
	}
	#information.guide #contents h2{
		font-size: 2.2em;
	}
	#information.guide #contents h2:after{
		width: 94%;
		border-bottom-width: 2px;
		margin-left: -47%;
	}
	#information.guide #contents p.notice01{
		text-align: left;
		line-height: 1.4;
	}
	/* transfer */
	#information.guide #contents .transfer{
		margin-top: 20px;
	}
	#information.guide #contents .transfer .logoArea{
		margin-top: 15px;
		padding: 10px;
	}
	#information.guide #contents .transfer .logoArea img{
		width: 100%;
	}
	#information.guide #contents .transfer .blackTx:nth-child(1){
		font-size: 1.9em;
	}
	#information.guide #contents .transfer .blackTx:nth-child(3){
		text-align: left;
	}
	/* atm */
	#information.guide #contents .atm .logoArea{
		margin-top: 10px;
	}
	#information.guide #contents .atm .blackTx:nth-child(1),
	#information.guide #contents .atm .blackTx:nth-child(4){
		font-size: 1.7em;
	}
	#information.guide #contents .atm .blackTx:nth-child(1) .num{
		font-size: 2em;
	}
	/* app */
	#information.guide #contents .app{
		margin-top: 20px;
	}
	#information.guide #contents .app .box01{
		width: 94%;
	}
	#information.guide #contents .app dl,
	#information.guide #contents .app p.fR{
		width: 100%;
	}
	#information.guide #contents .app dt{
		font-size: 1.1em;
		margin-bottom: 18px;
	}
	#information.guide #contents .app dd p{
		font-size: 1em;
		margin-bottom: 15px;
	}
	#information.guide #contents .app p.fR img.forSP{
		width: 86%;
	}
	/* info */
	#information.guide #contents .info{
		margin-top: 30px;
	}
	#information.guide #contents .info .fR{
		width: 90%;
	}
	#information.guide #contents .info .fR img.forSP{
		width: 94%;
	}
	#information.guide #contents .info .fR p:last-child{
		font-size: 1.3em;
	}
}
