/* common stylesheet */

:root {
	--main-color-50: rgb( 45, 131, 173, 0.5 );					/* 全体の基本カラー */
	--progress-border-color: rgba( 45, 131, 173, 0.7 );			/* プログレスバーの枠色 */
	--progress-dark-color: rgba( 45, 131, 173, 0.9 );			/* プログレスバーの濃い方の色 */
	--progress-weak-color: rgba( 45, 131, 173, 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: rgba( 0, 0, 0, 0.87 );
	text-decoration: none;
}
a:visited {
	color: rgba( 0, 0, 0, 0.87 );
	text-decoration: none;
}
a:hover {
	text-decoration: underline rgba( 0, 0, 0, 0.87 );
	text-decoration-thickness: 1px;
}

/* 入力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: rgb( 150, 150, 150 ) !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% !important;
}
.w84 {
	width: 84% !important;
}

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

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

/* マウスカーソル */
.cousor-default {
	cursor: default !important;
}
.cursor-pointer {
	cursor: pointer !important;
}

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

/* 線 */
.line-title {
	margin-left: 25px;
	margin-right: 25px;
}
.line-dot {
	height: 5px;
	position: relative;
}
.line-dot::before {
	content: "";
	background-image: linear-gradient( to right, var(--main-color), var(--main-color) 4px, transparent 4px, transparent 7px );
	background-size: 7px 1px;
	background-repeat: repeat-x;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

/* 入力エラー */
.input-error > div {
	align-items: center;
}
.input-error > div > md-icon {
	margin: 0px 3px 0px 0px;
}
.input-error > div > md-icon,
.input-error > div > md-icon svg {
	width: 12px !important;
	min-width: 12px !important;
	height: 12px !important;
	min-height: 12px !important;
}
.input-error > div > md-icon path {
	fill: rgb( 221, 44, 0 ) !important;
}

/* アニメーション */
@-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 ); }
}