@import url("./ui-stability.css");

body {
	min-height: 100vh;
	position: relative;
	padding-bottom: 90px;
	box-sizing: border-box;
}

.title-common {
	text-align: center;
}

.col-2 .form-submit {
	border-radius: 50px;
	color: #FFFFFF;
	background-color: #FF7166;
	width: 220px;
	margin: auto;
}

.col-2 .form-submit:hover {
	border-radius: 50px;
	color: #FFFFFF;
	background-color: #FF4F41;
	width: 220px;
	margin: auto;
}

input:-webkit-autofill,
textarea:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset;
}

input[type="submit"] {
	border-style: none;
	border-color: none;
}

input[type="button"] {
	border-style: none;
	border-color: none;
}

.middle {
	vertical-align: middle !;
}

.center {
	text-align: center !;
}

.admin-body {
	display: flex;
}

.height-50-common {
	height: 50px;
}

.height-100-common {
	height: 100%;
}

.height-auto-common {
	height: auto;
}

.bg-color-gray {
	background-color: #CDD6DD;
}

.mg-bottom-1vh-common {
	margin-bottom: 1vh;
}

.mg-bottom-2vh-common {
	margin-bottom: 2vh;
}

.mg-top-2vh-common {
	margin-top: 2vh;
}

.mg-bottom-3vh-common {
	margin-bottom: 3vh;
}

.mg-top-4vh-common {
	margin-top: 4vh;
}

.mg-bottom-4vh-common {
	margin-bottom: 4vh;
}

.mg-top-5vh-common {
	margin-top: 5vh;
}

.mg-top-50-common {
	margin-top: 50px;
}

.mg-bottom-5vh-common {
	margin-bottom: 5vh;
}

.mg-bottom-6vh-common {
	margin-bottom: 6vh;
}

.mg-right-1vw-common {
	margin-right: 1vw;
}

.mg-right-2vw-common {
	margin-right: 2vw;
}

.mg-left-auto-common {
	margin-left: auto;
}

.pd-bottom-2vh-common {
	padding-bottom: 2vh;
}

.pd-top-1vh-common {
	padding-top: 1vh;
}

.pd-top-2vh-common {
	padding-top: 2vh;
}

.pd-left-2px-common {
	padding-left: 2px;
}

.pd-left-4px-common {
	padding-left: 4px;
}

.pd-left-05vw-common {
	padding-left: 0.5vw;
}

.pd-left-1vw-common {
	padding-left: 1vw;
}

.pd-left2vw-common {
	padding-left: 2vw;
}

.pd-right2vw-common {
	padding-right: 2vw;
}

.pd-left5vw-common {
	padding-left: 5vw;
}

.pd-right-05vw-common {
	padding-right: 0.5vw;
}

.pd-right-1vw-common {
	padding-right: 1vw;
}

.pd-right-2vw-common {
	padding-right: 2vw;
}

.pd-right5vw-common {
	padding-right: 5vw;
}

.pd-left6vw-common {
	padding-left: 6vw;
}

.pd-lr6vw-common {
	padding-left: 6vw;
	padding-right: 6vw;
}


.pd-left-15px-common {
	padding-left: 15px;
}

.flex-common {
	display: flex;
}

.text-center-common {
	text-align: center;
}

.flex-dr-col-common {
	display: flex;
	flex-direction: column;
}

.flex-col-center-common {
	display: flex;
	align-items: center;
}

.flex-line-center-common {
	display: flex;
	justify-content: center;
}

.flex-col-last-bottom-common {
	margin-top: auto;
}

.table-cell-width-50-common {
	width: 50%;
}

.width-100-common {
	width: 100vw;
}

.width-60vw-common {
	width: 60vw;
}

.width-100per-common {
	width: 100%;
}

.mg-auto-common {
	margin: 0 auto;
	display: block;
}

.bottun-pd01-common {
	padding-left: 30px;
	padding-top: 3px;
}

.bottun-pd02-common {
	/*	padding-left: 22px;*/
	/*	padding-top: 3px;*/
}

.flex-spacebw-common {
	display: flex;
	justify-content: space-between;
}

.block-common {
	display: block;
}

.flex-spacear-common {
	display: flex;
	justify-content: space-around;
}

.flex-end-common {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.flex-center-common {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-last-right-common>:last-child {
	margin-left: auto;
}

.position-r-common {
	position: relative;
}

.position-a-common {
	position: absolute;
}

.right-0-common {
	right: 0;
}

.col-20-common {
	width: 20%;
}

.col-30-common {
	width: 30%;
}

.col-50-common {
	width: 50%;
}

.col-60-common {
	width: 60%;
}

.col-100-common {
	width: 100%;
}

.wrap-common {
	margin-left: auto;
	margin-right: auto;
	width: 60%;
	justify-content: space-between;
}

.wrap-70-common {
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	justify-content: space-between;
}

.wrap-75-common {
	margin-left: auto;
	margin-right: auto;
	width: 75%;
	justify-content: space-between;
}

.wrap-80-common {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	justify-content: space-between;
}

.flex-end-common {
	justify-content: flex-end;
}

.img-width-1vw-common {
	width: 1vw;
}

.title-M-common {
	display: flex;
	font-weight: bold;
	justify-content: center;
}

.title-wrap-border {
	border-left: 5px solid #FF7166;
	padding-left: 10px;
}

.font-bold-common {
	font-weight: bold;
}

.message-common {
	display: flex;
	justify-content: center;
}

.border-common {
	border: solid 1px #CCCCCC;
}

.border-bottom-common {
	border-bottom: solid 1px #98A6B5;
}

.btn-middle01-common {
	border-radius: 50px;
	color: #FFFFFF;
	background-color: #FF7166;
	width: 220px;
	margin: auto;
}

.btn-middle01-common:hover {
	border-radius: 50px;
	color: #FFFFFF;
	background-color: #FF4F41;
	width: 220px;
	margin: auto;
}

.btn-middle02-common {
	border-radius: 50px;
	color: #000000;
	border-color: #6C757D;
	width: 220px;
	margin: auto;
}

.btn-middle02-common:hover {
	border-radius: 50px;
	color: #FFFFFF;
	border-color: #6C757D;
	background-color: #6C757D;
	width: 220px;
	margin: auto;
}

.btn-middle03-common {
	border-radius: 50px;
	color: #FFFFFF;
	border-color: #6C757D;
	background-color: #6C757D;
	width: 220px;
	margin: auto;
}

.btn-middle03-common:hover {
	border-radius: 50px;
	color: #000000;
	border-color: #6C757D;
	background-color: #FFFFFF;
	width: 220px;
	margin: auto;
}

.btn-middle04-common {
	border-radius: 50px;
	color: #000000;
	border-style: solid !important;
	border-color: #cdd6de;
	background-color: #FFFFFF;
	width: 220px;
	margin: auto;
}

.btn-middle04-common:hover {
	border-radius: 50px;
	color: #1057b6;
	border-style: solid !important;
	border-color: #cdd6de;
	background-color: #FFFFFF;
	width: 220px;
	margin: auto;
}

.btn-small01-common {
	border-radius: 50px;
	color: #FFFFFF;
	background-color: #FF7166;
	width: 140px;
	margin: auto;
}

.btn-small01-common:hover {
	border-radius: 50px;
	color: #FFFFFF;
	background-color: #FF4F41;
	width: 140px;
	margin: auto;
}

.btn-small02-common {
	border-radius: 50px;
	color: #000000;
	border-color: #6C757D;
	width: 140px;
	margin: auto;
}

.btn-small02-common:hover {
	border-radius: 50px;
	color: #FFFFFF;
	border-color: #6C757D;
	background-color: #6C757D;
	width: 140px;
	margin: auto;
}

.btn-small02-disabled-common {
	border-radius: 50px;
	color: #000000;
	border-color: #6C757D;
	width: 140px;
	margin: auto;
}

.btn-small03-common {
	border-radius: 50px;
	color: #FFFFFF;
	border-color: #6C757D;
	background-color: #6C757D;
	width: 140px;
	margin: auto;
}

.btn-small03-common:disabled {
	border-radius: 50px;
	color: #FFFFFF;
	border-color: #6C757D;
	background-color: #6C757D;
	width: 140px;
	margin: auto;
	opacity: 0.2;
}

.btn-small03-common:hover {
	border-radius: 50px;
	color: #000000;
	border-color: #6C757D;
	background-color: #FFFFFF;
	width: 140px;
	margin: auto;
}

.btn-small04-common {
	height: 30px;
	border-radius: 50px;
	color: #FF7166;
	border-color: #FF7166;
	background-color: #FFFFFF;
	width: 140px;
	margin: auto;
}

.btn-small04-common:hover {
	border-radius: 50px;
	color: #FFFFFF;
	border-color: #FF7166;
	background-color: #FF7166;
	width: 140px;
	margin: auto;
}

.btn-small05-common {
	border-color: none;
	height: 30px;
	border-radius: 50px;
	color: #FFFFFF;
	background-color: #FF7166;
	width: 140px;
	margin: auto;
}

.btn-small05-common:hover {
	border-radius: 50px;
	color: #FFFFFF;
	background-color: #FF4F41;
	width: 140px;
	margin: auto;
}

.btn-auto01-common {
	border-radius: 50px;
	color: #FF7166;
	border-color: #FF7166;
	background-color: #FFFFFF;
	width: 140px;
	margin: auto;
}

.btn-small06-common {
	height: 30px;
	border-radius: 50px;
	color: #FF7166;
	border: 1px solid #FF7166;
	background-color: #FFFFFF;
	width: 140px;
	margin: auto;
	align-content: center;
	text-align: center;
}

.btn-small06-common:hover {
	border-radius: 50px;
	color: #FFFFFF;
	border: 1px solid #FF7166;
	background-color: #FF7166;
	width: 140px;
	margin: auto;
}

.btn-high-small02-common {
	border-radius: 50px;
	color: #000000;
	border-color: #6C757D;
	width: 120px;
	margin: auto;
}

.btn-high-small02-common:hover {
	border-radius: 50px;
	color: #FFFFFF;
	border-color: #6C757D;
	background-color: #6C757D;
	width: 120px;
	margin: auto;
}

.btn-auto01-common:hover {
	border-radius: 50px;
	color: #FFFFFF;
	border-color: #FF7166;
	background-color: #FF7166;
	width: 140px;
	margin: auto;
}

.link-font-common {
	color: #FF7166;
}

.link-font-pink-common {
	color: #FF7166;
}

.link-font-pink-common:hover {
	text-decoration: none;
}


.link-font-shiro-pink-common {
	color: #FFFFFF;
}

.link-font-shiro-pink-common:hover {
	text-decoration: none;
}

.right {
	float: right;
}

.status-common {
	margin: auto;
	width: 50%;
}

.img-200-common {
	width: 200px;
	height: 200px;
}

.img-150-common {
	width: 150px;
	height: 150px;
}

.img-100-common {
	width: 100px;
	height: 100px;
}

.progress-common {
	margin-bottom: 24px;
	position: relative;
	width: 100%;
	max-width: 500px;
	display: flex;
	justify-content: space-between;
	z-index: 0;
}

.progress-bar-common {
	position: absolute;
	top: 5px;
	left: 6%;
	width: 91%;
	height: 2px;
	background-color: #CCCCCC;
	/*バーの色*/
	z-index: -1;
}

.progress-active-common {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.progress-circle-active-common {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #FF7166;
	display: flex;
	align-items: center;
	height: 10px;
	border-radius: 50%;
}

.progress-nonactive-common {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.progress-circle-nonactive-common {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #CCCCCC;
	display: flex;
	align-items: center;
	height: 10px;
	border-radius: 50%;
}

.progres-text {
	color: #000000;
	margin-top: 7px;
	font-size: 12px;
}

.status-bar-common {
	padding-top: 30px;
	margin-bottom: 5px;
	border-bottom: 2px solid #CCCCCC;
	display: flex;
	justify-content: space-between;
}

.circle-step1-common {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #CCCCCC;
	position: relative;
	top: 6px;
	right: 5px;
	z-index: 1;
}

.circle-step1-active-common {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #FF7166;
	position: relative;
	top: 6px;
	right: 5px;
	z-index: 1;
}

.circle-step2-common {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #CCCCCC;
	position: relative;
	top: 6px;
	left: 5px;
	z-index: 1;
}

.circle-step2-active-common {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #FF7166;
	position: relative;
	top: 6px;
	left: 5px;
	z-index: 1;
}

.circle-step3-common {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #CCCCCC;
	position: relative;
	top: 6px;
	left: 5px;
	z-index: 1;
}

.circle-step3-active-common {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #FF7166;
	position: relative;
	top: 6px;
	left: 5px;
	z-index: 1;
}

.status-word-common {
	display: flex;
	justify-content: space-between;
	padding-bottom: 30px;
}

.input-title-common {
	line-height: 40px;
	height: 40px;
	margin-bottom: 0;
}

.lineheight-19-common {
	line-height: 1.9;
}

.form-input-common {
	border: 1px solid #CCCCCC;
	font-size: 1rem;
	padding-left: 10px;
}

.form-input-common::placeholder {
	color: #777777;
}

.form-select-common {
	border: 1px solid #CCCCCC;
	color: #777777;
	font-size: 1rem;
	padding-left: 10px
}

.row-title-common {
	font-size: 1.2rem;
	text-align: center;
	font-weight: bold;
}

.input-wrap-common {
	height: 40px;
	width: 40vw;
}

.row-common {
	display: flex;
	margin: auto;
	width: 60vw;
	justify-content: space-between;
}

.course-ezplanation-common {
	height: 200px;
}

.font-center-common {
	display: flex;
	justify-content: center;
}

.font-size12-common {
	font-size: 12px;
}

.explanation-wrap-common {
	width: 100%;
	padding: 15px;
}

.error-message-common {
	color: red;
}

.flexwrap-common {
	flex-wrap: wrap;
}

.border-left-1sol-common {
	border-left: 1px solid #CCCCCC;

}
/* ============================================================================
 * 全画面共通の安全弁（追記）
 *
 * 画面ごとのCSSを増やさずに、はみ出しの典型原因だけを抑える。
 * デスクトップの見た目は変えない（上限の指定のみ）。
 * ========================================================================== */

/* 画像・埋め込みが親幅を超えない */
img,
iframe,
video,
embed,
object {
	max-width: 100%;
}

/* 長い日本語・URLが横スクロールを生むのを防ぐ */
body {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* 動画埋め込みを 16:9 で可変にする（curriculumView / GMSL09 で使用） */
.video-frame-wrap {
	position: relative;
	width: 100%;
	max-width: 1280px;
	padding-top: 56.25%;
	margin: 0 auto;
}

.video-frame-wrap > iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media screen and (max-width: 768px) {
	/* 学習者画面の 80% 固定幅を全幅に */
	.wrap-80-common {
		width: 100%;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}

	/* 横並びカードを縦積みへ */
	.flex-common,
	.flex-last-right-common,
	.flex-spacebw-common {
		flex-wrap: wrap;
	}

	/* フォーム部品のはみ出し防止 */
	input,
	select,
	textarea,
	.form-control {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* タップ領域 */
	.btn,
	button,
	input[type="submit"],
	input[type="button"] {
		min-height: 44px;
	}
}