/*============================================
HTML
============================================*/
html {
	height: 100%;
}
/*============================================
  ボディ
  ============================================*/
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	display: grid;
	grid-template-rows: 0fr auto 0fr;
}
/*============================================
  ヘッダー
  ============================================*/
.head {
	padding: 0 !important;
}
header .menu .invalid {
	pointer-events: none;
	background-color: #555;
}
@media only screen and (max-width: 768px) {
	header div.menu div.container {
		margin-top: 50px;
	}
}
/*============================================
  フッター
  ============================================*/
footer {
	width: 100%;
	padding: 0 !important;
}
footer p {
	margin-bottom: 0;
	width: 100%;
}
footer .row {
	justify-content: center;
	gap: 1.5em;
}
footer .row div {
	width: 100%;
}
/*============================================
  共通
  ============================================*/
h1,
h2 {
	text-align: center;
}
h3 {
	font-size: 18px;
}
.scroll {
	overflow: auto;
	background-color: rgb(239, 245, 246);
	border: 3px solid rgb(229, 238, 239);
	border-radius: 10px;
}
.textarea {
	width: 100%;
	height: 100%;
	overflow: auto;
	border-radius: 10px;
	background: white;
	border: 1px solid gray;
	padding: 6px 10px;
	display: block;
	margin-bottom: 0;
}
.textarea1 {
	width: 100%;
	height: 100%;
	overflow: auto;
	border-radius: 10px;
	background: white;
	border: 1px solid gray;
	padding: 4px;
	display: block;
	margin-bottom: 0;
}
.textarea-parent {
	overflow: hidden;
	border-radius: 10px;
}
.button1,
.button2 {
	color: #fff;
	background-color: #ffa07a;
	border: none;
	border-radius: 9px;
	cursor: pointer;
	margin-bottom: 0;
}
.button1:hover,
.button2:hover {
	color: #fff;
	background-color: #ff7f50;
}
.button1:disabled,
.button2:disabled {
	color: #ccc;
	background-color: #e3e3e3;
	border: none;
	cursor: not-allowed;
}
.button2 {
	color: #555;
	background-color: #fff;
	border: 1px solid #bbb;
}
.button2:hover:not([disabled]) {
	color: #3a3a3a;
	background-color: #fff;
	border: 1px solid #919191;
}
.box1 {
	margin-bottom: 2em;
}
.box2 {
	padding: 0.5em 1em;
	margin: 1em 2em;
	color: #000;
	background: #fff;
	border-bottom: solid 6px #3f87ce;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
	border-radius: 9px;
	width: 300px;
	height: 180px;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.box2:hover {
	background: rgb(232, 232, 232);
	border-bottom: solid 6px #397abb;
}
.box2 a:hover {
	color: #000;
}
.box3 {
	margin-top: 5em;
}
.box4 {
	margin-top: 3em;
	margin-right: 7em;
	margin-left: 7em;
	margin-bottom: 3em;
}
.box5 {
	margin-bottom: 1em;
	border: solid 1px;
}
.box6 {
	margin-bottom: 0.5em;
}
.table1 th {
	background-color: rgb(245, 245, 245);
}
.table1 th,
.table1 td {
	border: 1px solid gray;
	padding: 12px 15px;
}
.input1 {
	max-width: 100%;
	box-sizing: border-box !important;
	margin-bottom: 0;
	border-radius: 9px !important;
	border-color: #003399 !important;
}
.input1:disabled {
	background-color: rgb(246, 246, 246);
	border-color: #d1d1d1 !important;
}
select {
	appearance: auto;
}
select:hover {
	border: solid 1px rgb(126, 126, 126);
}
.word-break-all {
	word-break: break-all;
}
.error {
	color: red;
	margin-bottom: 0rem;
}
.right {
	text-align: right;
}
/*============================================
  検索
  ============================================*/
.search {
	margin: auto;
	margin-bottom: 2em;
}
.search .filter {
	display: inline-block;
	vertical-align: top;
}
.search .filter p {
	font-weight: bold;
	margin-right: 1em;
	margin-bottom: 0;
}
.search label {
	white-space: nowrap;
	margin-right: 1em;
	font-weight: normal;
}
.search input[type='text'] {
	margin-right: 1em;
	width: 400px;
}
.search ul {
	margin-bottom: 0;
}
.search li {
	margin-bottom: 0;
	list-style-type: disc;
}
.search input {
	margin-bottom: 10px;
}
.search input[type='text'] {
	display: block;
}
.search .button-search {
	display: block;
	margin: 0 auto 0 auto;
}
.search div div {
	margin-right: 1em;
}
.required::after {
	content: '*';
	font-family: SimSun, sans-serif;
	margin-left: 4px;
	color: #ff4d4f;
	font-size: 12px;
	font-weight: bold;
}
/*============================================
Loading modal画面用CSS
============================================*/
.loading-modal {
	z-index: 5;
	padding-top: 100px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(255, 255, 255);
	background-color: rgba(255, 255, 255, 0.6);
}

.loading-img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
/*============================================
  モーダル
  ============================================*/
.modal {
	z-index: 3;
	padding-top: 100px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.6);
}
.modal .modal-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 90%;
	min-width: 240px;
	max-width: 520px;
}
.modal .modal-content {
	padding: 40px 40px 30px 40px;
	margin: 2rem 0;
	color: #000;
	background: #fff;
	border-bottom: solid 6px #3f87ce;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
	border-radius: 9px;
	height: auto;
	text-align: center;
}
.modal .modal-content p {
	margin: 0;
	padding: 0;
}
.modal .modal-content .modal_title {
	font-weight: bold;
	margin-bottom: 1.5rem;
	color: #3a3a3a;
}
.modal .modal-content .modal_detail {
	white-space: pre-wrap;
}
.modal .modal-content .button-area {
	margin-top: 1rem;
}
.modal .close {
	font-size: 35px;
	font-weight: bold;
	position: absolute;
	top: 10%;
	right: 3%;
	cursor: pointer;
}
.modal ul,
.modal li {
	margin-bottom: 0;
}
/*============================================
  ページャーデザイン
  ============================================*/
.pager-area .pager-contents-count {
	width: 120px;
	text-align: center;
	color: #5c5c5c;
	font-size: 12px;
	margin-left: auto;
	margin-right: auto;
}
.pager-area .pager-contents-count p {
	margin: 0;
}
.pager-area .pager {
	margin: auto;
}
.pager-area .pagination {
	text-align: center;
	margin-top: 2.5rem;
	margin-bottom: 15px;
}
.pager-area .pagination li {
	display: inline;
	margin: 0 2px;
	padding: 0;
	display: inline-block;
	background: #ff7f50;
	width: 50px;
	height: 50px;
	text-align: center;
	position: relative;
	border-radius: 10px;
}
.pager-area .pagination li.first,
.pager-area .pagination li.last {
	display: none;
	width: 70px;
	height: 50px;
	text-align: center;
}
.pager-area .pagination li.pre,
.pager-area .pagination li.next {
	display: inline-block;
	width: 70px;
	height: 50px;
	text-align: center;
}
.pager-area .pagination li a {
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	display: table;
	color: #fff !important;
	text-decoration: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	cursor: pointer;
	cursor: hand;
}
.pager-area .pagination li div {
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	display: table;
	color: #fff !important;
	text-decoration: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	cursor: pointer;
	cursor: hand;
}
.pager-area .pagination li a span {
	display: table-cell;
	vertical-align: middle;
}
.pager-area .pagination li div span {
	display: table-cell;
	vertical-align: middle;
}
.pager-area .pagination li a:hover,
.pager-area .pagination li div:hover,
.pager-area .pagination li a.active {
	color: #000 !important;
	background: #ebebeb;
	border-color: #00f;
	border-radius: 8px;
}
.pager-area .pagination li div.active {
	color: #000 !important;
	background: #ebebeb;
	border-color: #00f;
	border-radius: 8px;
}
.pager-area .pagination li a.toend {
	color: #000 !important;
	background: #fff;
	border-color: #00f;
	cursor: default;
}
.pager-area .pagination li div.toend {
	color: #000 !important;
	background: #fff;
	border-color: #00f;
	cursor: default;
}
.pager-area:after {
	content: '';
	clear: both;
	display: block;
}
@media only screen and (max-width: 809px) {
	.pager-area .pagination li {
		display: none;
	}
	.pager-area .pagination li.first,
	.pager-area .pagination li.pre,
	.pager-area .pagination li.next,
	.pager-area .pagination li.last {
		display: inline-block;
		width: 20%;
		height: 50px;
		text-align: center;
	}
	.pager-area .pagination li.first a,
	.pager-area .pagination li.pre a,
	.pager-area .pagination li.next a,
	.pager-area .pagination li.last a {
		width: 100%;
		text-align: center;
	}
	.pager-area .pagination li.first div,
	.pager-area .pagination li.pre div,
	.pager-area .pagination li.next div,
	.pager-area .pagination li.last div {
		width: 100%;
		text-align: center;
	}
}

/*============================================
  ログイン画面
  ============================================*/
#login .id,
#login .password {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
}
#login label {
	width: 100px;
	margin-bottom: 0;
}
#login .login {
	display: flex;
	justify-content: center;
	align-items: center;
}
#login .id input,
#login .password input {
	width: 400px;
}
#login .button-area {
	width: 120px;
}
#login #rule {
	height: 300px;
	padding: 1.5em;
}
#login-header ul {
	height: calc(24px + 1.6px + 4rem);
}
#login .information-table th {
	text-align: center;
}
#login .information-table label {
	display: inline-block;
}
#login .information-date {
	width: 15%;
}
#login .information-table .information-content {
	width: 85%;
}
#login .information-table tbody tr:hover {
	background-color: rgb(232, 232, 232);
	cursor: pointer;
}
#login .input-link {
	text-align: center;
}
#login .input-link {
	color: #0000ee;
	text-decoration: underline;
	display: inline;
}
#login .input-link:active {
	color: red;
	text-decoration: underline;
}
#login .input-link:hover {
	color: #767676;
}
#login .input-link:focus {
	outline: none;
}

/*============================================
  取引履歴画面
  ============================================*/
#trading-history input[type='month'] {
	border: solid 1px black;
	padding: 0 10px;
	width: 200px;
	height: 40px;
	#border-radius: 10px;
	font-size: 18px;
	/* border-radius: 9px; */
}
#trading-history .trading-history-list-table .trade-date {
	width: 12%;
}
#trading-history .trading-history-list-table .trade-type {
	width: 10%;
}
#trading-history .trading-history-list-table .amount {
	width: 15%;
}
#trading-history .trading-history-list-table .tycker-code {
	width: 13%;
}
#trading-history .trading-history-list-table .data-broker {
	width: 25%;
}
#trading-history .row {
	row-gap: 0.2em;
}
#trading-history .button-area {
	text-align: right;
}
#trading-history .totalling-area {
	text-align: center;
}
#trading-history .amount {
	text-align: right;
}
/*============================================
    清算確認画面
    ============================================*/
#balance input[type='date'] {
	border: solid 1px black;
	padding: 0 10px;
	width: 200px;
	height: 40px;
	#border-radius: 10px;
	font-size: 18px;
	/* border-radius: 9px; */
}
#balance .balance-list-table .update-date {
	width: 20%;
}
#balance .balance-list-table .summary {
	width: 60%;
}
#balance .balance-list-table .balance {
	width: 20%;
}
#balance .row {
	row-gap: 0.2em;
}
#balance .button-area {
	text-align: right;
}
#balance .totalling-area {
	text-align: center;
}
#balance .balance {
	text-align: right;
}