@CHARSET "UTF-8";

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, b, u, i, center,
dl, dt, dd, ol, ul, li, tr, td,
fieldset, form, label, legend {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	font-size: 18px;
	height: 100%;
}

body {
	font-family: 'メイリオ', 'Meiryo', 'Meiryo UI', 'Osaka', Arial;
	height: 100%;
	min-width: 320px;
	background-color: #fff;
	color: #808080;
	word-break: break-all;/*折り返し*/
}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-size: 100%;
}

input,
select,
button {
	font-family: 'メイリオ', 'Meiryo', 'Meiryo UI', 'Osaka', Arial;
	font-size: 18px;
}
a {
	text-decoration:none;
	color: inherit;
}
img {
	border: none;
}
table {
	border-spacing: 0;
	width: 100%;
}

.wrap {
	height: 100%;
}
.footer {
	height: 52px;
	text-align: center;
	font-size: 0.7em;
	padding-top: 8px;
	margin-top: -60px;
	clear: both;
}
.footer,
.header {
	color: #fff;
	background-color: #68c3a3;
}
.main {
	padding-bottom: 80px;/*footerの高さ60+間隔*/
	max-width: 1060px;
	width: 90%;
	margin: 0 auto;
}
.content {
	min-height: 100%;
}
.header h2 {
	min-height: 96px;
	font-size: 1.3em;
	padding-top: 46px;
	padding-left: 71px;
	max-width: 1060px;
	width: 90%;
	box-sizing: border-box;
	margin: 0 auto;
	background-image: url(../img/wallet_logo.png), url(../img/bgLogo.svg);
	background-repeat: no-repeat, no-repeat;
	background-size: 63px 63px, 63px 86px;
	background-position: top 10px left 0, top 0 left 0;
	color: #fff;
}
.navi {
	text-align: right;
}

input[type="button"],
input[type="submit"],
a.button,
button {
	font-weight: bold;
	text-align: center;
	background-repeat: no-repeat;
	border-radius: 8px;
	height: 50px;
	width: 100%;
	max-width: 280px;
	position: relative;
	background-color: #68c3a3;
	border: none;
	box-shadow: 0 4px 0 #5eae92;
	color: #fff;
	outline: 0;
	-webkit-appearance: none;
}
a.button {
	display: inline-block;
	line-height: 50px;
	cursor: default;
}

input[type="button"]:hover,
input[type="submit"]:hover,
a.button:hover {
	top: -2px;
	box-shadow: 0 6px 0 #5eae92;
}
input[type="button"]:active,
input[type="submit"]:active,
a.button:active {
	top: 4px;
	box-shadow: none;
}
input[type="button"]:focus:not(:active),
input[type="submit"]:focus:not(:active),
a.button:focus:not(:active) {
	top: -2px;
	box-shadow: 0 6px 0 #5eae92;
}
input[type="button"]:disabled,
input[type="submit"]:disabled,
a.button:disabled {
	box-shadow: none;
	background-color: transparent;
	border: dashed 2px ;
	opacity: 0.5;
}
a#btnReturn,
input[type="button"]#btnReturn {
	background-color: #385677;
	box-shadow: 0 4px 0 #304a67;
}
a#btnReturn:hover,
input[type="button"]#btnReturn:hover {
	box-shadow: 0 6px 0 #304a67;
}
a#btnReturn:active,
input[type="button"]#btnReturn:active {
	box-shadow: none;
}
a#btnReturn:focus:not(:active),
input[type="button"]#btnReturn:focus:not(:active) {
	box-shadow: 0 6px 0 #304a67;
}
input[type="text"],
input[type="password"],
select {
	border: solid 2px #808080;
	background: #fff;
	color: #808080;
	text-align: left;
	background-repeat: no-repeat;
	border-radius: 8px;
	height: 50px;
	padding-left: 16px;
}

input[type="text"]:focus,
input[type="password"]:focus,
select:focus {
	border: 3px solid #1BBC9B;
}
input::-moz-focus-inner {
	border: none;
}
select:-moz-focusring {
	color: transparent;
	text-shadow: 0px 0px 0px #808080; /* カラーは文字色 */
}
select:active {
	color:#808080;
}
select {
	width: 100%;
	box-sizing: border-box;

	background-position: right 16px center;
	background-size: 18px 18px;
	background-image: url(../img/downArrow.svg);

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/*Firefox用*/
	text-indent: .01px;
	text-overflow: "";
}
/*IE対応*/
select::-ms-expand {
	display: none;
}
select:focus::-ms-value {
	background: transparent;
	color: #808080;
}
/*入力情報エラー*/
input[type="text"].invalid,
input[type="password"].invalid,
select.invalid {
	border-color: #e74c3c;
	background-color: #ffdddd;
}

/*単位文字用*/
small {
	padding-left: 0.5em;
	font-size: 0.6em;
}

.navi {
	background: #5eae92;
	min-height: 56px;
}
.navi p {
	max-width: 1060px;
	width: 90%;
	margin: 0 auto;
	display: block;
}
.navi input[type="button"],
.navi a.button {
	background-color: transparent;
	margin: 4px 0 4px 8px;
	width: 136px;
	padding-left: 48px;
	display: inline-block;
	font-size: 0.78em;
	text-align: left;
	background-position: left 4px center;
	background-size: 38px 38px;
	box-shadow: none;
}
.navi input[type="button"]:focus:not(:active),
.navi a.button:focus:not(:active) {
	top: -2px;
	box-shadow: none;
}
.navi a.button {
	box-sizing: border-box;
	margin: 4px 0 4px 0;
	padding-left: 50px;
}
.balance h3 {
	display: inline-block;
	width: 100px;
}
.balance p {
	color: #5eae92;
	display: inline-block;
	font-size: 1.5em;
	font-weight: bold;
	width: 100%;
	box-sizing: border-box;
	text-align: right;
	margin-left: -107px; /*h3表示分*/
}
ul li {
	list-style-type: none;
	margin-bottom: 20px;
	padding: 16px;
	background: #fff;
	box-shadow: 3px 3px 6px 1px #666;
}
ul li:last-of-type {
	margin-bottom: 0
}
#top .white_box {
	box-shadow: none;
}
#top .white_box .balance,
#top .white_box .list_layout {
	box-shadow: 3px 3px 6px 1px #666;
}
#top .list_layout_item tr:nth-of-type(1) td {
	background: #ff3d3d;
	color: #fff;
	display: inline;
	padding: 4px 16px;
}
#top .list_layout_item tr:nth-of-type(2) td,
#notice .list_layout_item tr:nth-of-type(2) td {
	padding-top: 8px;
}
#top .list_layout_item tr:nth-of-type(3) td,
#notice .list_layout_item tr:nth-of-type(2) td,
#noticeDetail table tr:nth-last-of-type(2) td {
	color: #3498DB;
	font-weight: bold;
}
#notice .list_layout_item tr {
	display: block;
	float: left;
	width: 100%;
}
#notice .list_layout_item tr td {
	display: block;
}
#notice .list_layout_item tr:nth-of-type(2) {
	width: 85%;
}
#notice .list_layout_item tr:nth-of-type(3) {
	width: 15%;
	text-align: right;
}
#notice .list_layout_item tr:nth-of-type(3) td input {
	margin: 6px 0 0 0;
}
#noticeDetail .white_box > div > table tr td {
	text-align: left;
}
#noticeDetail .white_box > div > table tr:last-child td {
	text-align: center;
}
#pointStack .main {
	max-width: 640px;
}
.pointStack {
	padding-top: 20px;
}
.pointStack > p {
	margin-bottom: 10px;
}
.pointStack .list_layout_item {
	padding-top: 12px;
	padding-bottom: 8px;
}
.pointStack .list_layout_item tr:nth-of-type(2) {
	color: #3498DB;
	font-size: 1.3em;
	text-align: right;
}
.pointStack .list_layout_item tr:nth-of-type(3) {
	font-size: 0.8em;
	text-align: right;
}
.white_box {
	box-shadow: 3px 3px 6px 1px #666;
	background: #fff;
}
.white_box > div > table {
	width: 100%;
	text-align: center;
	table-layout: auto;
	background: #fff;
}

.white_box > div > .balance,
.white_box > div > ul,
.white_box > div > table {
	margin-top: 16px;
	padding: 20px;
}

.error_box {
	box-shadow: 3px 3px 6px 1px #666;
	border-radius: 8px;
	background-color: #ffffcc;
	position: relative;
	box-sizing: border-box;
	z-index: 1;
}
.error_box::after,
.error_box::before {
	content: "";
	transform: rotate(45deg);
	display: block;
	position: absolute;
	left: 50px;
	margin-top: -10px;
	margin-left: -10px;
	width: 20px;
	height: 20px;
	background-color: #ffffcc;
	color: #808080;
}
.error_box > * {
	z-index: 2;
	position: relative;
}
/*画面上部のエラーメッセージ*/
div > .error_box {
	margin: 16px auto 0 auto;
	padding: 20px;
	text-align: center;
}
/*入力フォーム毎のエラーメッセージ*/
td > .error_box {
	font-size: 0.83em;
	margin-top: 10px;
	padding: 10px 20px;
	text-align: left;
	float: left;
}
div > .error_box::after {
	top: 100%;
	box-shadow: 5px 2px 4px -2px #666;
}
div > .error_box::before {
	top: 100%;
}
td > .error_box::after {
	top: 0;
	box-shadow: -2px -2px 2px -2px #999;
}
/*説明テキスト*/
.description_text {
	font-size: 0.9em;
}
/*入力説明*/
.form_description {
	text-align: left;
}

.white_box > div > table td input[type="text"],
.white_box > div > table  td input[type="password"] {
	width: 100%;
	box-sizing: border-box;
}

/*項目ラベル*/
.white_box > div > table tr td:first-child:not(:last-child) {
	text-align: right;
	width: 140px;
	font-size: 0.89em;
	padding-right: 1em;
	height: 66px; /*50 + 16*/
	word-break: keep-all;
}
.white_box > div > table tr:not(:last-child) td:last-child {
	word-wrap: break-word; /*折り返し*/
	padding-bottom: 38px;
}
a.button.btnDetail {
	height: 26px;
	width: 26px;
	line-height: 26px;
	background-color: transparent;
	box-shadow: none;
	border: 1px solid #7F8C8D;
	background-image: url(../img/i.svg);
	background-size: 18px 18px;
	background-position: center center;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: text-bottom;
}
a.button.btnDetail:focus:not(:active),
a.button.btnDetail:hover:not(:active) {
	box-shadow: none;
}

/*金融機関への登録ページ用スタイル*/
.bankAdapter.main {
	margin-top: 16px;
	padding-top: 30px;
	text-align: center;
	font-weight: bold;
}
.bankAdapter.main > p {
	text-align: left;
	display: inline-block;
}
.bankAdapter .success_text {
	color: #345DD9;
}
.bankAdapter .error_text {
	color: #ff3d3d;
}
.bankAdapter .stop_text {
	color: #555555;
}

/*セルフィー認証ページ用スタイル*/
.selfieAuth {
	margin-top: 16px;
	padding-top: 30px;
	text-align: center;
	font-weight: bold;
}
.selfieAuth .success_text {
	color: #345DD9;
}

.white_box #btnTop {
	background-image: none;
}
#top .navi a.button {
	margin: 4px 0 4px 136px;
}

#top #topMenu a.button {
	margin: 16px 0 0 0;
	width: 280px;
	padding-left: 68px;
	box-sizing: border-box;
	background-position: left 16px center;
	background-size: 38px 38px;
	text-align: left;
}
#top #topMenu tr td {
	display: block;
}

#top .main {
	display: table;
	width: 90%;
}
#top .white_box  {
	display: table-cell;
	vertical-align: top;
	text-align: left;
}
#top #topMenu {
	width: 330px;
	display: table-cell;
	vertical-align: top;
	text-align: left;
}

#top #btnMenu {
	display: none;
	width: auto;
	box-shadow: none;
	background-color: transparent;
}
#top #bgMenu {
	background-color: #000;
	opacity: 0;
	display: block;
	height: 100%;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	transition: all 0.3s linear 0s;
	z-index: -1; /*無効化*/
}


#login .white_box > div > table {
	max-width: 620px;
	margin: 30px auto 0 auto;
	padding: 50px 30px 50px 30px;
}
#login .white_box table tr td:first-child:not(:last-child) {
	width: 120px;
}

#login .main {
	max-width: 620px;
}
#chargeSelect .white_box > div > table tr:not(:last-child) td {
	padding-bottom: 16px;
}

#bankChargeFill .white_box > div > table,
#bankChargeConfirm .white_box > div > table,
#bankChargeComplete .white_box > div > table,
#multiChargeFill .white_box > div > table,
#multiChargeConfirm .white_box > div > table,
#multiChargeComplete .white_box > div > table,
#historyDetail .white_box > div > table,
#notice .white_box > div > ul,
#noticeDetail .white_box > div > table,
#referBankDetail .white_box > div > table,
#billPayFill .white_box > div > table,
#billPayConfirm .white_box > div > table,
#billPayComplete .white_box > div > table,
#lockedAccount .white_box > div > table,
#loginLockedAccount .white_box > div > table,
#logoutComplete .white_box > div > table,
#securityError .white_box > div > table,
#systemError .white_box > div > table,
#discontinue .white_box > div > table,
#lockAccountFill .white_box > div > table,
#lockAccountConfirm .white_box > div > table,
#lockAccountComplete .white_box > div > table,
#unlockAccountFill .white_box > div > table,
#unlockAccountConfirm .white_box > div > table,
#unlockAccountComplete .white_box > div > table,
#receiptFill .white_box > div > table
{
	max-width: 640px;
	margin: 16px auto 0 auto;
	padding: 50px 20px;
}
/*項目ラベルが長い場合*/
#bankChargeConfirm .white_box > div > table,
#billPayFill .white_box > div > table,
#billPayConfirm .white_box > div > table,
#unlockAccountConfirm .white_box > div > table {
	max-width: 680px;
}
#bankChargeConfirm .white_box table tr td:first-child:not(:last-child),
#billPayFill .white_box table tr td:first-child:not(:last-child),
#billPayConfirm .white_box table tr td:first-child:not(:last-child),
#unlockAccountConfirm .white_box table tr td:first-child:not(:last-child) {
	width: 160px;
}

#unlockAccountFill .white_box table tr:nth-child(3) td:nth-child(2) {
	text-align: left;
}
#unlockAccountFill .white_box table tr td select {
	background-size: 10px 10px;
	background-position: right 8px center;
	padding-left: 8px;
	box-sizing: border-box;
	margin-right: -46px;
}
#unlockAccountFill .white_box table tr td select:not(:first-child) {
	margin-left: 28px;
}
#unlockAccountFill .white_box table tr td select:nth-child(1) {
	width: 37%;
}
#unlockAccountFill .white_box table tr td select:nth-child(2) {
	width: 30%;
}
#unlockAccountFill .white_box table tr td select:nth-child(3) {
	width: 30%;
}

#noticeDetail .white_box table tr:nth-child(2) td {
	font-weight: bold;
}


#btnTop {
	background-image: url(../img/top.svg);
}
#btnLogout {
	background-image: url(../img/logout.svg);
}
#btnPoint {
	background-image: url(../img/point.svg);
}
#btnPointHistory {
	background-image: url(../img/pointHistory.svg);
}
#btnHistory {
	background-image: url(../img/history.svg);
}
#btnNotice {
	background-image: url(../img/news.svg);
}
#btnReferBank {
	background-image: url(../img/referBank.svg);
}
#btnCharge {
	background-image: url(../img/charge.svg);
}
#btnBillPay {
	background-image: url(../img/billPay.svg);
}
#btnLock {
	background-image: url(../img/lockAccount.svg);
}

@media screen and (max-width:1024px) {
	/*　画面サイズが1024pxより小さい　*/
}

@media screen and (max-width:768px) {
	/*　画面サイズが768pxより小さい　*/
	#top #btnMenu {
		position: relative;
		display: block;
		height: 50px;
		left: 0;
	}
	#top #topMenu {
		background: #fff;
		border-radius: 0 8px 8px 0;
		box-sizing: border-box;
		width: 316px;
		padding: 0 16px 16px 16px;
		position: absolute;
		top: 132px;
		left: -325px;
		transition: transform 0.3s linear 0s;
		box-shadow: 3px 3px 6px 1px #666;
		z-index: 10;
	}
	#top #topMenu.toggle_open {
		transform: translate(325px);
	}
	#top #topMenu.toggle_open + #bgMenu {
		opacity: 0.4;
		z-index: 9;
	}

	#top .main{
		display: block;
		margin-top: -50px; /*naviの位置まで追加ボタンを上げるため*/
	}
	#top .white_box  {
		display: block;
	}
	#top #topMenu {
		display: block;
	}

	#login .white_box tr td,
	.white_box tr td {
		display: block;
		width: 100%;
	}
	#login .white_box > div > table tr td:first-child,
	.white_box > div > table tr td:first-child:not([colspan="2"]):not(:last-child) {
		height: 25px;
		text-align: left;
	}
	#login .white_box > div > table tr:last-child td {
		text-align: center;
	}
	.white_box > div > table tr td:first-child:not(:last-child) ,
	#bankChargeConfirm .white_box table tr td:first-child:not(:last-child),
	#billPayFill .white_box table tr td:first-child:not(:last-child),
	#billPayConfirm .white_box table tr td:first-child:not(:last-child),
	#unlockAccountConfirm .white_box table tr td:first-child:not(:last-child) {
		width: 100%;
		padding-right: 0;
	}
	td > .error_box {
		float: none;
	}
}
@media screen and (max-width:480px) {
	/*　画面サイズが480pxより小さい　*/
	html {
		font-size: 16px;
	}
	input,
	select,
	button {
		font-size: 16px;
	}
	#login .main {
		width: 90%;
	}
	#login .white_box > div > table {
		padding: 50px 8px 50px 8px;
	}
	.header h2 {
		font-size: 1.2em;
	}
	.footer {
		font-size: 0.6em;
	}
	input[type="button"] {
		width: 100%;
	}
	#unlockAccountFill .white_box table tr:nth-child(3) td {
		height: auto;
	}
	#unlockAccountFill .white_box table tr td select:nth-child(n) {
		margin-bottom: 8px;
		width: 100%;
		margin-left: 0;
	}
	#unlockAccountFill .white_box table tr td select:nth-child(3) {
		margin-bottom: 16px;
	}
}