/*******************
 common
 *******************/
html {
	height: -webkit-fill-available;
}
body {
	min-height: 100vh;
	min-height: -webkit-fill-available;
	display: flex;
	flex-direction: column;
	word-break: break-all;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 0.9rem;
	color: #3D3D3D;
	background-color: #F4F4F4;
}
a,
a:hover,
a:focus {
	color: #3D3D3D;
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
}
ul {
	margin-bottom: 0;
	padding-left: 20px;
}
th {
	font-weight: normal;
}
.text-8px {
	display: block;
	font-size: 10px;
	-webkit-transform:scale(0.8);
	-moz-transform:scale(0.8);
	-ms-transform:scale(0.8);
	-o-transform:scale(0.8);
	transform:scale(0.8);
}
.text-9px {
	display: block;
	font-size: 10px;
	-webkit-transform:scale(0.9);
	-moz-transform:scale(0.9);
	-ms-transform:scale(0.9);
	-o-transform:scale(0.9);
	transform:scale(0.9);
}
.text-xlg {
	font-size: 1.5rem;
}
.text-white {
	color: #fff;
}
.text-red {
	color: #E83023;
}
.text-pink {
	color: #CF2E92;
}
.text-navy {
	color: #3B5999;
}
.text-blue {
	color: #1C95DF;
}
.text-green {
	color: #01AF23;
}
.text-glay,
.text-gray {
	color: #c0c0c0;
}
.bg-white {
	background-color: #fff;
}
.ribon {
	font-size: 0.8rem;
}
.bg-red,
.ribon.ribon-red {
	background-color: #C80303;
}
.ribon.ribon-red:after {
	border-top: 4px solid #C80303;
	border-right: 4px solid #C80303;
}
.bg-pink,
.ribon.ribon-pink {
	background-color: #CF2E92;
}
.ribon.ribon-pink:after {
	border-top: 4px solid #CF2E92;
	border-right: 4px solid #CF2E92;
}
.bg-navy,
.ribon.ribon-navy {
	background-color: #3B5999;
}
.ribon.ribon-navy:after {
	border-top: 4px solid #3B5999;
	border-right: 4px solid #3B5999;
}
.bg-blue,
.ribon.ribon-blue {
	background-color: #1C95DF;
}
.ribon.ribon-blue:after {
	border-top: 4px solid #1C95DF;
	border-right: 4px solid #1C95DF;
}
.bg-light-blue {
	background: #F3F7FD;
}
.bg-green,
.ribon.ribon-green {
	background-color: #01AF23;
}
.ribon.ribon-green:after {
	border-top: 4px solid #01AF23;
	border-right: 4px solid #01AF23;
}
.bg-glay,
.bg-gray,
.ribon.ribon-glay,
.ribon.ribon-gray {
	background-color: #D3D3D3;
}
.ribon.ribon-glay:after,
.ribon.ribon-gray:after {
	border-top: 4px solid #D3D3D3;
	border-right: 4px solid #D3D3D3;
}
.bg-light-glay,
.bg-light-gray,
.ribon.ribon-light-glay,
.ribon.ribon-light-gray {
	background-color: #F4F4F4;
}
.ribon.ribon-light-glay:after,
.ribon.ribon-light-gray:after {
	border-top: 4px solid #F4F4F4;
	border-right: 4px solid #F4F4F4;
}
.bg-yellow,
.ribon.ribon-yellow {
	background-color: #F8B85A;
}
.ribon.ribon-yellow:after {
	border-top: 4px solid #F8B85A;
	border-right: 4px solid #F8B85A;
}
.bg-black {
	color: #fff;
	background: #000;
}
.btn {
	font-size: 0.9rem;
	border-radius: 1.25rem;
}
@media (min-width: 768px) {
	.btn {
		padding: .5rem .75rem;
	}
}
.btn.disabled,
.btn:disabled {
	background-color: #6c757d !important;
	border-color: #6c757d !important;
}
.btn:hover,
.btn:focus,
.btn:active {
	opacity: 0.9;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
	color: #fff;
	background-color: #4C6072;
	border-color: #4C6072;
}
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
	background-color: #C80303;
	border-color: #C80303;
}
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active {
	color: #fff;
	background-color: #F8B85A;
	border-color: #F8B85A;
}
.btn-default,
.btn-default:hover,
.btn-default:focus {
	color: #3D3D3D;
	background-color: #fff;
	border-color: #3D3D3D;
}
.btn-facebook,
.btn-facebook:hover,
.btn-facebook:focus {
	color: #fff;
	background-color: #3F5896;
	border-color: #3F5896;
}
.btn-blue,
.btn-blue:hover,
.btn-blue:focus {
	color: #fff;
	background-color: #3B5999;
	border-color: #3B5999;
}
.btn-green,
.btn-green:hover,
.btn-green:focus {
	color: #fff;
	background-color: #3B995F;
	border-color: #3B995F;
}
.btn-purple,
.btn-purple:hover,
.btn-purple:focus {
	color: #fff;
	background-color: #993B8E;
	border-color: #993B8E;
}
.btn-sns {
	border-radius: 0;
}
.btn-circle {
	width: 45px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	padding: 0;
	border-radius: 50%;
	color: #fff;
	background-color: #707F89;
}
.btn-app {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 10px;
	min-width: 30px;
	height: 30px;
	border-radius: 3px;
	border: 1px solid #ddd;
}
.btn-app.square {
	width: 30px;
}
.cursor-default {
	cursor: default;
}
.arrow{
	position: relative;
	display: block;
	text-decoration: none;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	content: "";
}
.ribon {
	display: inline-block;
	padding: 0 10px;
	color: #FFFFFF;
	position: absolute;
	top: 10px;
	left: 7px;
	z-index: 10;
}
.ribon:after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-bottom: 4px solid transparent;
	border-left: 4px solid transparent;
	position: absolute;
	bottom: -8px;
	left: 0;
}
.underline {
	margin: 3.0rem 0;
	border-bottom: #707070 1px solid;
}
.scroll-prevent {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
}
#toast-container > div {
	opacity: 1.0;
}
@media (min-width: 992px) {
	.sp {
		display: none;
	}
}
@media (max-width: 991.98px) {
	.pc {
		display: none;
	}
}
.count-num {
	margin-left: 5px;
	padding: 0 8px;
	display: inline-block;
	color: #fff;
	background: #3B5999;
	font-size: 11px;
	border-radius: 10px;
	vertical-align: text-bottom;
}
a[target='_blank']:not(img):not(.no-icon):after {
	content: url(../images/target_blank.png);
	bottom: 0;
	margin-left: 0.2em;
	opacity: 0.8;
}
.not-yet a {
	pointer-events: none;
	opacity: 0.4;
}
#loading {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: rgba(40, 40, 40, 0.8);
	z-index: -1;
}
#loading.on {
	display: flex !important;
	z-index: 2147483647;
}

/* form */
.form-control {
	font-size: 0.9rem;
	height: calc(1.5em + 1.0rem + 2px);
}
.form-control[readonly]{
	background-color: #fff;
}
.form-control,
.custom-select,
.custom-select.is-invalid {
	background-color: #F3F7FD;
	font-size: 0.9rem;
}
.form-group {
	margin-bottom: 1.8rem;
}
.input-group-text {
	font-size: 0.8rem;
}
.course_edit .form-group label:not([class]) {
	padding-left: 16px;
	background: url(../images/icon_check_g.svg) no-repeat 0 center;
	background-size: 12px;
}
input[type="text"]::placeholder,
textarea::placeholder {
	font-size: 0.8rem !important;
	color: #aac !important;
}
code {
	display: inline-block;
	margin: 0;
	padding: 0 10px;
	vertical-align: text-bottom;
	color: #fff;
	background: #DC3545;
	border-radius: 2px;
	font-size: 10px;
	word-wrap: normal;
}
.form-group code {
	margin-left: 15px;
}

/*******************
 wrapper
 *******************/
 .wrapper {
	width: 100%;
}
@media (min-width: 992px) {
	.wrapper {
	    max-width: 95%;
		margin: 0 auto;
		display: flex;
	}
}
@media (min-width: 1360px) {
	.wrapper {
	    max-width: 1300px;
	}
}

/*******************
 header
 *******************/
header {
	height: 60px;
	color: #3D3D3D;
	background-color: #F4F4F4;
}
.fixed-top {
	filter: drop-shadow(0px 0px 3px #ccc);
}
@media (min-width: 992px) {
	header {
		height: auto;
	}
	.fixed-top {
		position: relative;
		filter: none;
	}
}

/* nav */
.navbar {
	padding: 0;
}
.navbar-light {
	color: #3D3D3D;
}
.bg-light {
	background-color: #F4F4F4 !important;
}
.navbar-brand-wrapper {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	padding: 0;
}
.navbar-brand {
	margin-right: auto !important;
	padding: 11px 0 0 16px;
	width: auto !important;
}
.navbar-brand img {
	width: 150px;
}
@media (max-width: 350px) {
	.navbar-brand {
		padding: 14px 3px 0;
	}
}
@media (min-width: 992px) {
	.navbar-brand-wrapper {
		width: auto;
		margin-right: 80px;
		padding-top: 1.4rem;
		padding-left: 0;
	}
	.navbar-brand img {
		min-width: 150px;
	}
	.navbar .navbar-collapse {
		flex-direction: column-reverse;
	}
}
.navbar-light .navbar-btn {
	width: 60px;
	min-width: 60px;
	height: 60px;
	margin-right: 1px;
	padding: 0;
	color: #fff;
	background: #7D012E;
	text-align: center;
	font-size: 10px;
}
.navbar-light .navbar-btn.navbar-chat,
.navbar-light .navbar-btn.navbar-chat-users {
	background: #3B5999;
}
.navbar-light .navbar-btn img {
	padding-top: 15px;
}
.navbar-light .navbar-btn span {
	display: block;
}
.navbar-light .navbar-toggler {
	width: 60px;
	height: 60px;
	padding: 0 10px;
	color: #fff;
	background: #3495AF;
	border: none;
	border-radius: 0;
	outline: none;
	font-size: 10px;
}
.navbar-light .navbar-toggler-icon {
	position: relative;
	width: 40px;
	height: 32px;
	background: none;
	appearance: none;
	cursor: pointer;
}
.navbar-light .navbar-toggler-icon,
.navbar-light .navbar-toggler-icon span {
	display: inline-block;
	transition: all 0.4s;
	box-sizing: border-box;
}
.navbar-light .navbar-toggler-icon span {
	position: absolute;
	left: 12px;
	width: 40%;
	height: 2px;
	background-color: #fff;
	border-radius: 1px;
}
.navbar-light .navbar-toggler-icon span:nth-of-type(1) {
	top: 10px;
}
.navbar-light .navbar-toggler-icon span:nth-of-type(2) {
	top: 16px;
}
.navbar-light .navbar-toggler-icon span:nth-of-type(3) {
	top: 22px;
}
.navbar-light .navbar-toggler[aria-expanded=true] span.navbar-toggler-icon span:nth-of-type(1) {
	top: 6px;
	transform: translateY(12px) rotate(-315deg);
}
.navbar-light .navbar-toggler[aria-expanded=true] span.navbar-toggler-icon span:nth-of-type(2) {
	opacity: 0;
}
.navbar-light .navbar-toggler[aria-expanded=true] span.navbar-toggler-icon span:nth-of-type(3) {
	top: 30px;
	transform: translateY(-12px) rotate(315deg);
}
#navbarContent,
#navbarContent a.nav-link {
	color: #fff;
}
#navbarContent {
	position: fixed;
	width: 100%;
	background-color: #3495AF;
	overflow: scroll;
	z-index: 100;
	opacity: 0.98;
}
#navbarContent.show {
	height: calc(100vh - 60px);
}
@media (min-width: 992px) {
	#navbarContent,
	#navbarContent a.nav-link {
		color: #3D3D3D;
	}
	#navbarContent {
		position: relative;
		overflow: visible;
		top: 0;
		background-color: #F4F4F4;
		z-index: auto;
		opacity: 1.0;
	}
}
#navbarContentSub,
#foot-sub {
	padding: 10px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
}
@media (min-width: 992px) {
	#navbarContentSub {
		justify-content: flex-end;
		width: 100%;
		padding: 10px 0;
	}
}
#navbarContentSub li,
#foot-sub li {
	width: 40%;
	margin: 5px 10px;
	padding: 0;
	border: #fff 1px solid;
	text-align: center;
	font-size: 0.8rem;
}
#navbarContentSub li.nav-login {
	width: 70%;
}
#navbarContentSub a.nav-link,
#foot-sub li a {
	display: block;
	padding: 5px;
	color: #fff;
}
@media (min-width: 992px) {
	#navbarContentSub li {
		width: auto;
		margin: 0 5px;
		padding: 0;
		border: none;
		background-color: #7D002E;
		font-size: 0.7rem;
	}
	#navbarContentSub li.nav-faq {
		background-color: #3495AF;
	}
	#navbarContentSub li.nav-login {
		width: auto;
	}
	#navbarContentSub a.nav-link {
		color: #fff;
		padding: 3px 8px;
	}
}
#navbarContentSub li a {
	padding: 0;
}
#navbarContentMain {
	position: relative;
	width: 100%;
	padding: 10px;
}
#navbarContentMain .nav-item {
	position: static;
}
#navbarContentMain .nav-item > a {
	position: relative;
}
#navbarContentMain .nav-link {
	padding: 0.5rem;
}
#navbarContentMain .dropdown-menu {
	margin: 0;
	padding: 0;
	background-color: #3495AF;
	border: none;
	border-radius: 0;
	font-size: 0.9rem;
}
#navbarContentMain .nav-menu-title {
	display: none;
}
#navbarContentMain .dropdown-item {
	position: relative;
	padding: 0.5rem 1.5rem;
	color: #fff;
	border-top: #fff 1px dotted;
}
#navbarContentMain .dropdown-item:focus,
#navbarContentMain .dropdown-item:hover {
	background: transparent;
	opacity: 0.8;
}
@media (min-width: 992px) {
	#navbarContentMain {
		padding: 10px 0 0;
	}
	#navbarContentMain .nav-menu-title {
		display: block;
		float: left;
		color: #fff;
		font-size: 1.1rem;
	}
	#navbarContentMain .nav-item:not(:last-child) {
		margin-right: 20px;
	}
	#navbarContentMain .nav-link:hover {
		opacity: 0.8;
	}
	#navbarContentMain .dropdown-menu {
		position: absolute;
		left: 0;
		min-height: 300px;
		padding: 50px;
		background-color: #D35689;
		opacity: 0.98;
		border: none;
	}
	#navbarContentMain .dropdown-item-wrapper {
		float: right;
		width: 70%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#navbarContentMain .dropdown-item {
		width: 45%;
		padding: 1.0rem 0.5rem;
		border-top: none;
		border-bottom: #FFF 1px dotted;
	}
	#navbarContentMain .dropdown-item:nth-child(1),
	#navbarContentMain .dropdown-item:nth-child(2) {
		border-top: #FFF 1px dotted;
	}
}
@media (min-width: 1200px) {
	#navbarContentMain .nav-item:not(:last-child) {
		margin-right: 50px;
	}
}
/* arrow */
@media (max-width: 991.98px) {
	#navbarContentMain .nav-item {
		border-bottom: #fff 1px solid;
	}
	#navbarContentMain .nav-item.dropdown > a::after {
		content: '';
		width: 6px;
		height: 6px;
		border: 0;
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
		position: absolute;
		top: 50%;
		right: 10px;
		margin-top: -4px;
		transform: rotate(135deg);
	}
	#navbarContentMain .nav-item.dropdown.show > a::after {
		margin-top: -2px;
		transform: rotate(-45deg);
	}
	#navbarContentMain .nav-link.arrow::after {
		right: 12px;
		width: 6px;
		height: 6px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#navbarContentMain .dropdown-item::before {
		content: '';
		width: 12px;
		height: 12px;
		background: #fff;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		right: 6px;
		margin-top: -6px;
	}
	#navbarContentMain .dropdown-item::after {
		content: '';
		width: 4px;
		height: 4px;
		border: 0;
		border-top: solid 1px #000;
		border-right: solid 1px #000;
		position: absolute;
		top: 50%;
		right: 11px;
		margin-top: -2px;
		transform: rotate(45deg);
	}
}
@media (min-width: 992px) {
	#navbarContentMain .dropdown-item::before {
		content: '';
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 5px 0 5px 8px;
		border-color: transparent transparent transparent #fff;
		position: absolute;
		top: 50%;
		right: 5px;
		margin-top: -5px;
	}
}

/*******************
 footer
 *******************/
footer {
	color: #fff;
	background-color: #000;
	font-size: 0.8rem;
}
footer a,
footer a:focus,
footer a:hover {
	color: #fff;
}
#foot-copy {
	padding: 1.5rem 0 0.5rem;
	background-color: #82062E;
	text-align: center;
}
#pagetop {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 10;
}
#pagetop > a {
	padding: 13px;
	text-decoration: none;
	background-color: #00C9C3;
	color: #FFFFFF;
	font-size: 1.8rem;
	font-weight: bold;
	width: 50px;
	height: 50px;
	text-align: center;
	display: block;
	border: 1px solid #FFFFFF;
	border-radius: 30px;
}
#pagetop > a:before {
	content: '';
	width: 12px;
	height: 12px;
	border: 0;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -3px;
	transform: rotate(-45deg);
}
/* dev */
#dev_vars {
	margin: 0;
	padding: 0 10px;
	background-color: #FFEEE0;
}
#dev_vars dl {
	display: none;
}
#dev_vars dt.on {
	cursor: pointer;
}
#dev_vars dt.on:hover {
	background-color: #FFC090;
}
#dev_vars dd {
	display: none;
}
/* foot info */
#foot-info {
	border-bottom: #fff 1.5px solid;
}
#foot-logo {
	display: none;
}
#foot-logo img {
	max-height: 50px;
}
#foot-logo img:first-child {
	margin-right: 30px;
}
/* foot navi */
#foot-nav {
	line-height: 1.5rem;
}
#foot-nav ul {
	padding: 0;
	list-style: none;
}
#foot-nav .nav-menu-title {
	font-size: 0.9rem;
	font-weight: bold;
}
#foot-nav li:not(:last-child) {
	margin-bottom: 0.5rem;
}
#foot-nav li a {
	display: block;
}
#foot-nav p {
	position: relative;
	display: inline-block;
	margin-bottom: 0.2rem;
	padding-right: 18px;
}
#foot-nav p::before,
#foot-nav p::after {
	content: '';
	display: block;
	width: 8px;
	height: 2px;
	border-radius: 5px;
	background: #aaa;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
#foot-nav p::after {
	background: #aaa;
	transform: translateY(-50%) rotate(90deg);
	transition: 0.2s;
}
#foot-nav p.on::after {
	transform: rotate(0);
	transition: 0.2s;
}
#foot-nav .foot-it {
	display: none;
	margin-bottom: 0.5rem;
}
#foot-nav a {
	text-decoration: underline;
}
#foot-nav-etc {
	border-top: #fff 1.5px solid;
	padding-top: 10px;
}
@media (min-width: 576px) {
	#foot-nav p::before,
	#foot-nav p::after {
		display: none;
	}
	#foot-nav .foot-it {
		display: block;
	}
	#foot-nav-etc {
		border-top: none;
		padding-top: 0;
	}
}
@media (min-width: 992px) {
	#foot-logo {
		display: flex;
		align-items: center;
	}
	#foot-sub {
		margin: 0;
		padding: 0;
		justify-content: flex-end;
		align-items: center;
	}
	#foot-sub li {
		margin: 0;
	}
	#foot-sub li:nth-child(2n) {
		margin-left: 10px;
	}
	#foot-sub li:nth-child(n+3) {
		margin-top: 10px;
	}
}
@media (min-width: 1200px) {
	#foot-logo img:first-child {
		margin-right: 50px;
	}
	#foot-sub li {
		width: 23%;
	}
	#foot-sub li:not(:first-child) {
		margin-left: 10px;
	}
	#foot-sub li:nth-child(n+2) {
		margin-top: 0;
	}
}

/*******************
 intro
 *******************/
#breadcrumb {
	display: none;
	padding: 10px 20px;
	background-color: #E65785;
	font-size: 0.8rem;
}
body.blue #breadcrumb {
	background-color: #3B5999;
}
body.green #breadcrumb {
	background-color: #3B995F;
}
body.detail #breadcrumb {
	background-color: #7D002E;
}
#breadcrumb,
#breadcrumb a,
#breadcrumb a:hover {
	color: #fff;
}
@media (min-width: 992px) {
	#breadcrumb {
		display: block;
	}
}
#breadcrumb span:not(:last-child) {
	padding-right: 30px;
}
#breadcrumb span:not(:last-child):before {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent #fff;
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -4px;
}
#intro {
	height: 120px;
	background: url(../images/intro_image.jpg) center center;
	background-size: cover;
	text-align: center;
}
#intro > div {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	color: #fff;
	background-color: rgba(235, 137, 171, 0.6);
}
body.blue #intro > div {
	background-color: rgba(59, 89, 153, 0.6);
}
body.green #intro > div {
	background-color: rgba(59, 153, 142, 0.6);
}
#intro h1 {
	padding: 0 10px;
	font-size: 1.4rem;
	font-weight: normal;
}
@media (min-width: 992px) {
	#intro {
		height: 200px;
	}
	#intro h1 {
		font-size: 1.8rem;
	}
}

/*******************
 contents
 *******************/
#main {
	margin-bottom: auto;
}
#main .wrapper {
	flex-direction: column;
	margin: 30px auto;
	padding: 0 15px;
}
#main .wrapper .narrow {
	margin: 0 auto;
	width: 100%;
	max-width: 800px;
}
@media (min-width: 992px) {
	#main .wrapper {
		margin: 50px auto;
		padding: 0;
	}
}
#main a:not(.btn),
#main a:not(.btn):hover,
#main a:not(.btn):focus {
	text-decoration: underline;
}
.main h1 {
	font-weight: normal;
	text-align: center;
}
.main h2 {
	margin-bottom: 30px;
	padding: 20px;
	color: #4A4A4A;
	background: #FDD0DF;
	border-top: #E65785 15px solid;
	font-size: 1.0rem;
	line-height: 1.2rem;;
}
body.blue .main h2 {
	background: #C5D3F2;
	border-top: #3B5999 15px solid;
}
body.green .main h2 {
	background: #C5F2E6;
	border-top: #3B995F 15px solid;
}
.main h3 {
	margin: 20px 0;
	padding: 15px 0 15px 15px;
	font-size: 1.1rem;
	line-height: 1.4rem;
	border-left: #E65785 5px solid;
}
body.blue .main h3 {
	border-color: #3B5999;
}
body.green .main h3 {
	border-color: #3B995F;
}
.main h4:not(.modal-title) {
	position: relative;
	margin-bottom: 15px;
	padding: 0 0 5px 10px;
	font-size: 1.1rem;
	line-height: 1.4rem;;
	border-bottom: solid 3px #FDD0DF;
}
.main h4:not(.modal-title):after {
	position: absolute;
	content: '';
	display: block;
	border-bottom: solid 3px #E65785;
	left: 0;
	bottom: -3px;
	width: 10%;
}
body.blue .main h4:not(.modal-title) {
	border-color: #C5D3F2;
}
body.blue .main h4:not(.modal-title):after {
	border-color: #3B5999;
}
body.green .main h4:not(.modal-title) {
	border-color: #C5F2E6;
}
body.green .main h4:not(.modal-title):after {
	border-color: #3B995F;
}
.main h5 {
	position: relative;
	margin-bottom: 15px;
	padding-left: 22px;
	font-size: 1.0rem;
	line-height: 1.2rem;
}
.main h5:before,
.main h5:after {
	content: "□";
	position: absolute;
}
.main h5:before {
	left:0;
	top:-5px;
	color: #E65785;
}
.main h5:after {
	left: 5px;
	top: 1px;
	color: #FDD0DF;
}
body.blue .main h5:before {
	color: #3B5999;
}
body.blue .main h5:after {
	color: #C5D3F2;
}
body.green .main h5:before {
	color: #3B995F;
}
body.green .main h5:after {
	color: #C5F2E6;
}
.main h6 {
	margin-bottom: 10px;
	font-size: 1.0rem;
	line-height: 1.2rem;
	font-weight: bold;
}

/* pagenation */
.pagination .page-item.active .page-link {
	background-color: #4C6072;
	border-color: #4C6072;
}
.pagination .page-link {
	color: #4C6072;
	text-decoration: none !important;
}
/* table */
.table thead th {
	text-align: center;
	vertical-align: middle;
}
.table-bordered thead td,
.table-bordered thead th {
	border-bottom-width: 1px;
}
.table td {
	vertical-align: middle;
}
.table-responsive .table th,
.table-responsive .table td {
	white-space: nowrap;
}

/*******************
 top
 *******************/
/* slider */
#top-slider {
	position: relative;
	height: 400%;
}
#top-slider #slider {
	height: 400px;
}
#top-slider #slider img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#top-slider #slider-pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5px;
}
#top-slider #slider-pagination .swiper-pagination-bullet {
	margin: 0 4px;
	width: 12px;
	height: 12px;
	background-color: #7D002E;
}
#top-slider #slider-pagination .swiper-pagination-bullet-active {
	background-color: #3495AF;
}
#top-slider #slider-thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 25px;
	max-width: 1200px;
}
#top-slider #slider-thumbs .swiper-wrapper {
	align-items: flex-end;
}
#top-slider #slider-thumbs .swiper-slide {
	text-align: center;
}
#top-slider #slider-thumbs .swiper-slide img {
	opacity: 1;
}
#top-slider #slider-thumbs .swiper-slide-active img {
	opacity: 1;
}
@keyframes zoomUp {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.15);
	}
}
#top-slider #slider .swiper-slide-active img,
#top-slider #slider .swiper-slide-duplicate-active img,
#top-slider #slider .swiper-slide-prev img {
	animation: zoomUp 10s linear 0s 1 normal both;
}
#top-slider #slider-logo img {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	width: 100px;
	transform: translate(-50%,-50%);
	filter: drop-shadow(2px 2px 2px #000);
}
@media (min-width: 992px) {
	#top-slider,
	#top-slider #slider {
		height: 550px;
	}
	#top-slider #slider-logo img {
		width: 150px;
	}
}
#course-top {
	position: relative;
}

/* course list */
#list-info {
	position: relative;
}
#list-cmd {
	display: flex;
	width: 100%;
	max-width: 200px;
}
#list-search {
	position: relative;
}
#list-search-overlay {
	position: fixed;
	transform: scale(0);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: rgba(31, 31, 31, .8);
	z-index: 9;
}
#list-search-overlay.show {
	transform: scale(1);
}
#list-search-btn {
	display: inline-block;
	margin-bottom: 25px;
	padding: 15px 20px;
	border: #3D3D3D 1px solid;
	color: #3D3D3D;
	background: #fff;
}
#list-search-contents {
	padding: 0;
	width: 250px;
	background: #fff;
	z-index: 10;
}
#list-search-inner {
	position: relative;
	padding: 0 15px 15px;
}
#list-search-title {
	position: sticky;
	top: 0;
	height: 60px;
	padding-top: 10px;
	background: #fff;
	filter: drop-shadow(0px 0px 3px #ccc);
	z-index: 1;
}
.search-close-icon {
	position: relative;
	width: 40px;
	height: 40px;
	background: none;
	appearance: none;
	cursor: pointer;
	display: inline-block;
	transition: all 0.4s;
	box-sizing: border-box;
	vertical-align: middle;
}
.search-close-icon span {
    position: absolute;
    left: 12px;
    width: 50%;
    height: 2px;
    background-color: #000;
    border-radius: 1px;
}
.search-close-icon span:nth-of-type(1) {
	top: 6px;
	transform: translateY(12px) rotate(-315deg);
}
.search-close-icon span:nth-of-type(2) {
	top: 30px;
	transform: translateY(-12px) rotate(315deg);
}
#list-search-cmd {
	position: sticky;
	bottom: 0;
	padding-top: 15px;
	height: 60px;
	text-align: center;
	background: #fff;
	filter: drop-shadow(0px 0px 3px #ccc);
}
.search-index {
	padding: 10px 0;
	font-size: 1.2rem;
	font-weight: bold;
}
.search-index:first-child {
	padding-top: 15px;
}
.search-index:not(:first-child) {
	margin-top: 10px;
	border-top: #ddd 1px solid;
}
.search-item {
	padding: 5px 0;
}
@media (max-width: 991.98px) {
	.offcanvas-collapse {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		padding-right: 1rem;
		padding-left: 1rem;
		overflow-y: auto;
		background-color: #343a40;
		transition: transform 150ms cubic-bezier(0.2, 0, 1, 0.9);
		transform: translateX(250px);
	}
	.offcanvas-collapse.open {
		transform: translateX(0);
	}
}
@media (min-width: 768px) {
	#list-info-inner {
		width: calc(100% - 220px);
	}
	#list-rb {
		position: absolute;
		top: 0;
		right: 0;
		width: 200px;
	}
}
@media (min-width: 992px) {
	#list-inner {
		display: flex;
		width: 100%;
	}
	#list-search {
		margin-right: 30px;
	}
	#list-search-btn {
		display: none;
	}
	#list-search-contents {
		width: 220px;
	}
	#list-search-inner {
		padding: 0;
	}
	.search-index:first-child {
		padding-top: 0;
	}
	#list-search-cmd {
		position: initial;
		padding-top: 20px;
		filter: none;
	}
	#list-main {
		flex: 1;
	}
}
.course-tab.nav-tabs,
.course-tab .dropdown-menu {
		border-color: #3495AF;
}
.course-tab.nav-tabs .nav-item.show .nav-link,
.course-tab.nav-tabs .nav-item .nav-link.active {
		border-color: #3495AF #3495AF #fff;
}
.course-tab.nav-tabs .nav-item .nav-link:not(.active):focus,
.course-tab.nav-tabs .nav-item .nav-link:not(.active):hover {
		border-color: #fff #fff #3495AF;
}
.course-tab .dropdown-item {
	font-size: 0.9rem;
	text-decoration: none !important;
}
.course-list {
	margin-top: 20px;
}
.course-list .card {
	border: none;
}
.course-list .card-body {
	padding: 5px 0;
}
.course-list a {
	overflow: hidden;
}
.course-favorite {
	margin: auto 0;
	width: 1.6rem;
	height: 1.6rem;
}
.course-favorite .favorite-icon {
	background: url(../images/icon_heart.svg) no-repeat 0 0;
	width: 1.6rem;
	height: 1.6rem;
}
.course-favorite .favorite-icon.on {
	background: url(../images/icon_heart_on.svg) no-repeat 0 0;
}
.flag_icon {
	min-width: 95px;
	padding: 2px;
	font-size: 11px;
	text-align: center;
}

/* course detail */
#detail {
	position: relative;
}
#detail-main-wrapper {
	overflow: hidden;
}
#detail-slider {
	position: relative;
	margin: 0 auto 20px;
	padding-bottom: 30px;
	max-width: 500px;
}
#detail-slider #slider img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#detail-slider #slider-pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}
#detail-slider #slider-pagination .swiper-pagination-bullet {
	margin: 0 4px;
	width: 12px;
	height: 12px;
	background-color: #ADADAD;
	opacity: 1;
}
#detail-slider #slider-pagination .swiper-pagination-bullet-active {
	background-color: #3495AF;
}
#detail-slider .swiper-button-next,
#detail-slider .swiper-button-prev {
	display: none;
	color: #ccc;
}
#detail-sub-wrapper {
	position: relative;
}
.detail-item {
	margin: 0 15px 15px;
}
#detail-entry {
	display: flex;
	flex-wrap: wrap;
}
#detail-video {
	position: relative;
}
#detail-video::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: 56.25%;
}
#detail-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#detail-contents {
	flex-direction: column;
	margin: 0 auto;
	padding: 30px 15px;
}
#detail-contents li {
	padding-bottom: 10px;
}
#contents-list {
	padding-left: 0;
	list-style-type: none;
}
#contents-list li {
	padding-left: 25px;
	background: url("../images/icon_check.svg") no-repeat 0 3px;
	background-size: 16px;
}
#detail-foot-entry {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 5px 10px;
	background: #fff;
	filter: drop-shadow(0px 0px 3px #ccc);
	z-index: 10;
}
@media (min-width: 992px) {
	#detail-main-wrapper {
		background: #7D002E;
	}
	#detail-main-wrapper > .row {
		margin: 0 auto;
		max-width: 830px;
	}
	#detail-main {
		display: flex;
		flex-direction: column;
		padding-top: 30px;
		color: #fff;
	}
	#detail-slider {
		margin-bottom: 30px;
		max-width: 300px;
	}
	#detail-slider.multi .swiper-button-next {
		display: flex;
		right: -60px;
	}
	#detail-slider.multi .swiper-button-prev {
		display: flex;
		left: -60px;
	}
	#detail #detail-cmd {
		position: fixed;
		display: flex;
		flex-direction: column;
		top: 130px;
		right: calc((100vw - 992px) / 2);
		width: 325px;
		padding: 15px;
		background: #fff;
		filter: drop-shadow(0px 0px 3px #ccc);
		z-index: 10;
	}
	#detail #detail-cmd.out {
		position: absolute;
		top: auto;
		bottom: 30px;
	}
	#detail .detail-item {
		margin: 0 0 25px;
	}
	#detail #detail-slider {
		order: 4;
	}
	#detail #detail-title {
		order: 1;
		font-size: 1.4rem;
	}
	#detail #detail-description {
		order: 2;
	}
	#detail #detail-profile1 {
		order: 3;
	}
	#detail #detail-flag {
		order: 6;
	}
	#detail #detail-profile2 {
		order: 5;
	}
	#detail #detail-held {
		order: 7;
	}
	#detail #detail-venue {
		order: 8;
		margin-bottom: 0;
	}
	#detail #detail-fee {
		order: 2;
	}
	#detail #detail-daydiff {
		order: 3;
	}
	#detail #detail-entry {
		order: 4;
	}
	#detail #detail-video {
		order: 1;
	}
	#detail #detail-contents {
		max-width: 800px;
		padding: 50px 0;
	}
}

/* course entry */
#entry table {
	font-size: 0.8rem;
}
#entry table th {
	width: 40%;
	background: #F4F4F4;
}

/* profile */
#profile h1 {
	font-size: 1.2rem;
}
#profile h2 {
	margin: 0;
	padding: 0 0 20px;
	color: #3D3D3D;
	background: none;
	border: none;
	font-size: 1.2rem;
}
#profile .flag_icon,
#list .flag_icon {
		color: #fff;
	background: #3495AF;
	padding: 2px 5px;
}
#profile-course li {
	margin-bottom: 5px;
}
#profile-sns a {
	display: block;

}
#profile-sns i {
	font-size: 1.4rem;
	vertical-align: middle;
}
#profile-sns span {
	display: inline-block;
	width: 150px;
	padding-left: 20px;
	text-align: left;
}
@media (min-width: 992px) {
	#profile {
		position: relative;
		margin: 0 auto;
		max-width: 800px;
	}
	#profile-inner {
		display: flex;
		flex-direction: column;
		max-width: calc(100% - 300px);
		margin-top: 20px;
	}
	#profile h1 {
		font-size: 1.8rem;
	}
	#profile #detail-slider {
		position: absolute;
		top: 44px;
		right: 0;
		width: 200px;
	}
	#profile #profile-main {
		order: 1;
	}
	#profile #profile-sub {
		order: 2;
	}
	#profile #detail-video {
		order: 3;
	}
	#profile #profile-course {
		order: 4;
	}
	#profile #detail-slider .swiper-button-next {
		right: -50px;
	}
	#profile #detail-slider .swiper-button-prev {
		left: -50px;
	}
	#profile #detail-slider .swiper-button-next:after,
	#profile #detail-slider .swiper-button-prev:after {
		font-size: 30px;
	}
	#profile #profile-sns {
		position: absolute;
		top: 380px;
		right: 0;
		width: 200px;
	}
	#profile #profile-sns.no-slider {
		top: 50px;
	}
	#profile #profile-sns span {
		display: inline-block;
		width: 140px;
		padding-left: 5px;
		text-align: left;
	}
}

/*******************
 mypage
 *******************/
#mypage-main {
	padding: 20px;
	background-color: #fff;	
}
@media (min-width: 768px) {
	#mypage-main {
		padding: 30px;
	}
}
#mypage-main h1 {
	position: relative;
	text-align: left;
	padding-left: 35px;
}
.mypage-menu-btn {
	display: inline;
	padding-left: 18px;
}
.mypage-menu-btn.arrow:before,
.mypage-menu-btn.arrow:after {
	right: auto;
}
.mypage-menu-btn:before {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 6px 0 6px;
	border-color: #fff transparent transparent transparent;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -3px;
}
.show .mypage-menu-btn:before {
	border-width: 0 6px 8px 6px;
	border-color: transparent transparent #fff transparent;
	margin-top: -4px;
}
#mypage-menu {
	display: none;
	padding: 30px;
	background-color: #fff;	
}
#mypage-menu > div {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#mypage-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#mypage-menu li {
	padding: 8px 8px 8px 30px;
}
#mypage-main h1:before,
#mypage-main h1:after,
#mypage-menu li.arrow:before,
#mypage-menu li.arrow:after {
	right: auto;
}
#mypage-main h1:before,
#mypage-menu li:before {
	content: '';
	width: 23px;
	height: 18px;
	background: #F8B85A;
	border-radius: 45%;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -9px;
}
#mypage-main h1:after,
#mypage-menu li:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent #fff;
	position: absolute;
	top: 50%;
	left: 9px;
	margin-top: -4px;
}
#sensei #mypage-main h1:before,
#sensei #mypage-menu li:before {
	background: #C80303;
}

/* image upload */
.file-preview {
	margin-bottom: 10px;
	padding: 0;
}
.file-drop-zone {
	margin: 0;
	min-height: 100px;
}
.file-drop-zone-title {
	font-size: 1.2rem;
	padding: 50px 10px;
}
.file-drop-zone.clickable {
	border: none;
}
.file-drop-zone.clickable:hover,
.file-drop-zone.clickable:focus {
	border: none;
	background: #E9F0F5;
}
.krajee-default.file-preview-frame {
	background: #fff;
}
.krajee-default.file-preview-frame .file-thumbnail-footer {
	padding-top: 5px;
	height: 55px;
}
.krajee-default .file-footer-caption {
	margin-bottom: 0;
	padding-top: 0;
}
.kv-upload-progress,
.file-size-info {
	display: none !important;
}
.krajee-default .file-thumb-progress {
	top: 5px;
}
.file-actions {
	margin-top: 5px;
}
#form_banner_image .krajee-default.file-preview-frame .kv-file-content {
	height: 60px;
}

/* sortable */
.sortable-chosen {
  background-color: #f0f0f0;
}
.data-list .list-group-item {
	padding: 0.75rem;
}
.data-list .list-group-item .btn {
	width: 38px;
	height: 38px;
	padding: 5px 0;
	display: inline-block;
	font-size: 9px;
	overflow: hidden;
}
.data-list .list-group-item .btn i {
	display: block;
	width: 100%;
	font-size: 1rem;
	line-height: 1rem;
}
.data-list .list-group-item .btn:not(:first-child) {
	margin-left: 5px;
}
@media (min-width: 767px) {
	.data-list .list-group-item .btn {
		width: 42px;
		height: 42px;
		padding: 8px 0;
	}
	.data-list .list-group-item .btn:not(:first-child) {
		margin-left: 8px;
	}
}
.data-list .list-group-item:first-child,
.data-list .list-group-item:last-child {
	border-radius: 0;
}
.data-list img {
	width: auto;
	height: 50px;
}

/* modal */
#dinamicModal .overlay {
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*******************
 news
 *******************/
#news-block {
	position: relative;
	margin: 30px auto !important;
}
#news-block:before {
	display: none;
	position: absolute;
	left: -150px;
	content: "";
	width: 100px;
	height: 100%;
	background: url(../images/logo_s.svg) no-repeat 0 center;
	background-size: contain;
}
.news_inner {
	display: block;
	width: 100%;
	background-color: #FEE4E4;
}
.news_inner:before {
	display: none;
	content: "";
	width: 60px;
	background: #c80101 url(../images/icon_notice.svg) no-repeat center center;
	background-size: 40px auto;
	z-index: 1;
	vertical-align: middle;
}
.news_inner .title {
	position: relative;
	display: block;
	height: 2.0rem;
	line-height: 2.0rem;
	text-align: center;
	color: #fff;
	background-color: #C80303;
}
.news_inner .list {
	display: block;
	margin: 0;
	padding: 15px 20px 12px 20px;
}
.news_inner .title:after {
	content: "";
	position: absolute;
	top: 15px;
	bottom: 15px;
	right: 0;
	width: 1px;
	background: #707070;
}
@media (max-width: 991.98px) {
	#news-block dt:nth-of-type(n+3),
	#news-block dd:nth-of-type(n+3):not(.view_all) {
		display: none;
	}
}
#news-list dt,
#news-block dt {
	float: left;
	font-weight: normal;
}
#news-list dd {
	margin: 0 0 15px 95px;
}
#news-block dd {
	margin: 0 0 3px 95px;
}
#news-list dt.pinned,
#news-list dd.pinned,
#news-list dd.pinned a,
#news-block dt.pinned,
#news-block dd.pinned,
#news-block dd.pinned a {
	color: #C80303;
}
#news-list dd.view_all,
#news-block dd.view_all {
	margin: 15px 0 5px;
	text-align: center;
}
#news-list dd.view_all a,
#news-block dd.view_all a {
	margin: 0 auto;
	padding: 5px 10px;
	font-size: 0.8rem;
	color: #C80303;
	border: #C80303 1px solid;
	text-decoration: none;
}
@media (min-width: 768px) {
	#news-block {
		display: block;
	}
	.news_inner {
		display: table;
	}
	.news_inner:before {
		display: table-cell;
	}
	.news_inner .title {
		display: table-cell;
		vertical-align: middle;
		width: 150px;
		color: #C80303;
		background: transparent;
	}
	.news_inner .list {
		display: table-cell;
		padding: 15px 20px 12px 30px;
	}
	#news-list dd {
		margin: 0 0 20px 120px;
	}
}
@media (min-width: 1200px) {
	#news-block {
		width: 80%;
	}
	#news-block:before {
		display: block;
	}
}

/*******************
 page
 *******************/
#main .box {
	margin: 50px auto;
	padding: 50px 30px;
	text-align: center;
	background: #FBF9F0;
}

/*******************
 chat
 *******************/
#chat-room .list-group {
	overflow: hidden auto;
}
#chat-room .list-group-item {
	padding: 0;
}
#chat-room .list-group-item a {
	display: block;
	padding: .75rem 1.25rem;
	text-decoration: none !important;
}
#chat-room .list-group-item a:hover {
	background: #F3F7FD;
}
#chat-room .list-group-item i {
	width: 30px;
	text-align: center;
	color: #666;
}
#chat-room .active {
	background: #C5D3F2;
	border-color: transparent;
}
#chat-room .card-header {
	padding-top: 7.75px;
	padding-bottom: 7.75px;
}
#chat-users {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
#chat-room .form-group {
	margin: 10px 0 0;
}
#search-form button {
	width: 40px;
}
#chat-contents {
	height: 100%;
}
#chat-main {
	position: relative;
	overflow: hidden auto;
	min-height: 200px;
	padding: 20px;
}
.chat-item {
	clear: both;
	overflow: hidden;
	margin-bottom: 25px;
	width: 100%;
}
.chat-item:last-child {
	margin-bottom: 0;
}
.chat-item .chat-inner {
	float: left;
	width: 90%;
}
.chat-item .chat-body {
	min-width: 200px;
	padding: 10px 20px;
	background: #C5D3F2;
	border-radius: 0.25rem;
}
.chat-item :not(.chat-myself) .chat-body {
	filter: drop-shadow(1px 1px 2px #ccc);
}
.chat-item .chat-myself {
	float: right;
}
.chat-item .chat-myself .chat-body {
	background: #F4F4F4;
}
.chat-item .chat-name {
	font-weight: bold;
	padding-bottom: 5px;
}
.chat-item .chat-message {
	white-space: pre-line;
}
.chat-item .chat-date {
	padding-top: 3px;
	font-size: 0.75rem;
	color: #a0a0a0;
}
.chat-item .chat-date a {
	color: #a0a0a0;
}
.chat-item .chat-myself .chat-date {
	text-align: right;
}
.chat-item .chat-date i {
	padding-right: 3px;
}
.chat-item .favorite.on i {
	color: #3B5999;
}
#unread_first_id {
	display: flex;
	align-items: center;
	margin: 10px 0;
	font-size: 0.8rem;
	color: #999;
}
#unread_first_id:before,
#unread_first_id:after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #999;
}
#unread_first_id:before {
	margin-right: 1rem;
}
#unread_first_id:after {
	margin-left: 1rem;
}
#chat-contents .message-cmd {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
}
#chat-contents textarea {
	width: 100%;
	height: 50px;
	resize: none;
}
@media (min-width: 992px) {
	#chat-room,
	#chat-contents {
		display: block !important;
	}
}