/* common stylesheet */

:root {
	--main-color-50: rgba( 0, 74, 154, 0.5 );			/* 基本カラーの透明度50% */
	--progress-border-color: rgba( 0, 74, 154, 0.7 );	/* プログレスバーの枠色 */
	--progress-dark-color: rgba( 0, 74, 154, 0.9 );		/* プログレスバーの濃い方の色 */
	--progress-weak-color: rgba( 0, 74, 154, 0.3 );		/* プログレスバーの薄い方の色 */
}

/* カスタムフォント */
@font-face {
	font-display: swap;
	font-family: "MyFont";
	src: url( "../font/rounded-mplus-2p-regular.ttf" );
}

/* 全体指定 */
html, body {
	font-family: MyFont, sans-serif;
	font-size: 13.5px;
	background-color: rgb( 242, 242, 242 );
	color: rgba( 0, 0, 0, 0.87 );
	overflow: hidden;
}

/* リンク */
a:link {
	color: white;
	text-decoration: none;
}
a:visited {
	color: white;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/* 入力BOX */
@keyframes onAutoFillStart {
	from {}
	to {}
}
input {
	font-family: MyFont, sans-serif;
}
input::-ms-clear {
	visibility: hidden;
}
input::-ms-reveal {
	visibility: hidden;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
input[type="number"] {
	-moz-appearance: textfield;
	padding-right: 5px !important;
}
input:-webkit-autofill {
	animation-name: onAutoFillStart;
	transition: background-color 50000s ease-in-out 0s;
}
input::-webkit-credentials-auto-fill-button {
	margin: 0;
	width: 0;
	background-color: transparent;
}
input::placeholder {
	color: rgb( 170, 170, 170 ) !important;
}
input:-ms-input-placeholder {
	color: rgb( 170, 170, 170 ) !important;
}
input::-ms-input-placeholder {
	color: rgb( 170, 170, 170 ) !important;
}

/* 選択 */
select {
	background-color: rgb( 248, 248, 248 );
	border-radius: 5px;
	border: solid 1px var(--main-color-50);
	cursor: pointer;
}
select[disabled] {
	cursor: not-allowed;
}

/* プログレスバー */
.progress {
	background: linear-gradient( -45deg, var(--progress-dark-color) 25%, var(--progress-weak-color) 25%, var(--progress-weak-color) 50%, var(--progress-dark-color) 50%, var(--progress-dark-color) 75%, var(--progress-weak-color) 75%, var(--progress-weak-color) );
	background-size: 18px 18px;
	-webkit-animation: stripe 5s linear infinite;
	-ms-animation: stripe 5s linear infinite;
	height: 6px;
	border-radius: 4px;
	margin-top: 12px;
	margin-bottom: 10px;
	border: solid 1px var(--progress-border-color);
}

/* 非表示 */
.no-display {
	display: none;
}

/* スペーサー */
.spacer {
	float: right;
	min-height: 24px;
	min-width: 1px;
}

/* 文字色 */
.text-black {
	color: rgba( 0, 0, 0, 0.87 ) !important;
}
.text-gray {
	color: gray !important;
}
.text-gray > md-icon path,
.text-gray > md-icon polygon {
	fill: gray !important;
}
.text-blue {
	color: #346ad8 !important;
}
.text-blue > md-icon path {
	fill: #346ad8 !important;
}
.text-red {
	color: crimson !important;
}
.text-red > md-icon path,
.text-red > md-icon polygon {
	fill: crimson !important;
}
.text-green {
	color: teal !important;
}
.text-green > md-icon path {
	fill: teal !important;
}
.text-orange {
	color: #e8680c !important
}

/* 幅 */
.w100 {
	width: 100%;
}
.w84 {
	width: 84%;
}

/* マージン */
.mt-5 {
	margin-top: 5px;
}
.mt-10 {
	margin-top: 10px;
}
.mt-15 {
	margin-top: 15px;
}
.mt-20 {
	margin-top: 20px;
}
.mt-25 {
	margin-top: 25px;
}
.mt-30 {
	margin-top: 30px;
}
.mb-5 {
	margin-bottom: 5px;
}
.mb-10 {
	margin-bottom: 10px;
}
.mb-20 {
	margin-bottom: 20px;
}
.ml-2 {
	margin-left: 2px;
}
.ml-5 {
	margin-left: 5px;
}
.ml-10 {
	margin-left: 10px;
}
.ml-15 {
	margin-left: 15px;
}
.ml-20 {
	margin-left: 20px;
}
.ml-30 {
	margin-left: 30px;
}
.mr-20 {
	margin-right: 20px;
}

/* 文字水平位置 */
.left {
	text-align: left;
}
.right {
	text-align: right;
}

/* マウスカーソル */
.cousor-default {
	cursor: default;
}
.cursor-pointer {
	cursor: pointer;
}
.cousor-alias {
	cursor: alias;
}
.cousor-menu {
	cursor: context-menu;
}

/* 文字表示 */
.text-hidden {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.text-break {
	word-break: break-word;
}

/* アニメーション */
@-webkit-keyframes stripe {
	0% { background-position: 0 0; }
	100% { background-position: 100% 0; }
}
@-ms-keyframes stripe {
	0% { background-position: 0 0; }
	100% { background-position: 100% 0; }
}
@keyframes slide-on {
	0% { right: -136px; }
	100% { right: 0px; }
}
@keyframes slide-off {
	0% { right: 0px; }
	100% { right: -136px; }
}
@keyframes rotate {
	100% { transform: rotate( -360deg ); }
}