@charset "UTF-8";



/*見出し
---------------------------------------------------------- */
.index-contents-heading-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	padding: 20px;
}

.index-contents-heading-container .index-contents-heading-btn {
	display: flex;
	align-items: center;
	max-width: 300px;
}

.index-contents-heading-container .index-contents-heading-btn .c-btn-line+.c-btn-line {
	margin-left: 10px;
}

.index-contents-heading-container .index-contents-heading-btn .c-btn-line+.c-btn-toggle {
	margin-left: 25px;
}

.index-contents-heading {
	display: flex;
	align-items: center;
	flex: 1 1 0%;
	padding-right: 10px;
	position: relative;
	font-size: 2.4rem;
	line-height: 1.3;
}

.index-contents-heading [class*="c-icon"] {
	margin-right: 10px;
	font-size: 30px;
}

.index-contents-body {
	padding: 0 20px 20px;
}



@media screen and (max-width: 560px) {
	
	.index-contents-heading-container {
		padding: calc(30/560*100vw);
	}
	
	.index-contents-heading {
		justify-content: center;
		align-items: center;
		padding-right: 0;
	}
	
	.index-contents-heading [class*="c-icon"] {
		margin-right: calc(10/560*100vw);
		font-size: calc(30/560*100vw);
	}
	
	.index-contents-body {
		padding: 0 calc(20/560*100vw) calc(20/560*100vw);
	}
	
}



/*コンテンツ
---------------------------------------------------------- */
.index-contents {
	padding: 20px 0;
}

.index-contents:first-child {
	padding-top: 40px;
}



@media print, screen and (min-width: 561px) {
	
	.index-column-contents {
		display: flex;
		flex-wrap: wrap;
		margin: -40px 0 0 -40px;
	}
	
	.index-column-content {
		width: calc(50% - 40px);
		margin: 40px 0 0 40px;
	}
	
}

@media screen and (max-width: 560px) {
	
	.index-column-content {
		margin-top: calc(30/560*100vw);
	}
	
	.index-contents-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: calc(20/560*100vw);
	}
	
	.index-contents-btn .c-btn-line {
		width: calc(248/560*100vw);
	}
	
	.index-contents-btn .c-btn-line:not(:first-child) {
		margin-left: calc(24/560*100vw);
	}
	
}




/*メインビジュアル
---------------------------------------------------------- */
.index-main-visual {
	position: relative;
	min-height: 260px;
	overflow: hidden;
	background-color: #ccc;
}

/* 背景 */
.index-main-visual-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

/* お知らせエリア */
.index-main-visual-top {
	width: 100%;
}

.index-main-visual-notice {
	display: flex;
	justify-content: flex-end;
	position: absolute;
	top: 40px;
	right: 4px;
	z-index: 2;
	width: 760px;
	height: 196px;
}

.index-main-visual-notice a:hover {
	text-decoration: none;
}

.index-main-visual-notice a:hover .index-main-visual-notice-box > * {
	opacity: 0.6;
}

.index-main-visual-notice-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	position: relative;
	padding: 0 12px;
	border-radius: 4px;
	box-shadow: 0 0 3px 0 rgba(57, 57, 57, .15);
	border: 2px solid #a1a1a1;
	background-color: #fff;
}

.index-main-visual-notice-box:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 6px;
	width: 6px;
	height: 10px;
	transform: translateY(-50%);
	background: url(../img/ico_arrow-right01.svg) no-repeat 0 0 / cover;
}

.index-main-visual-notice-box .title {
	color: #333;
	font-size: 1.6rem;
}

.index-main-visual-notice-grades {
	flex-direction: column;
	width: 250px;
	height: 100%;
	padding: 10px 6px;
}

.index-main-visual-notice-grades::after {
	display: none;
}

.index-main-visual-notice-grades .presenting {
	color: #d4145c;
	font-size: 2.1rem;
	font-weight: bold;
}

.index-main-visual .notice-grades .check {
	position: relative;
	background-color: #f6f6f6;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 70px;
}

.index-main-visual-notice-grades .check::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 6px;
	height: 10px;
	background: url(../img/ico_arrow-right01.svg) no-repeat 0 0 / cover;
}

.index-main-visual-notice-grades .check .c-icon-notice {
	display: block;
	margin-bottom: 10px;
	font-size: 29px;
	text-align: center;
	color: #555;
}

.index-main-visual-notice-grades .btnBox {
	margin: 6px auto 0;
}

.index-main-visual-notice-grades .c-btn-line {
	width: 180px;
}

.index-main-visual-notice-other {
	width: 500px;
	margin-left: 10px;
}

.index-notice-other-items {
	display: flex;
	flex-wrap: wrap;
	height: calc(100% + 10px);
	margin: -10px -10px 0 0;
}

.index-notice-other-item {
	width: calc(33.33% - 10px);
	height: calc(50% - 10px);
	margin: 10px 10px 0 0;
}

.index-notice-other-link {
	display: block;
	height: 100%;
    padding: 10px 15px 10px 5px;
}

.index-notice-other-link .title {
	text-align: center;
	line-height: 1.2;
	margin-bottom: 3px;
}

.index-notice-other-link .content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	height: 70%;
}

.index-notice-other-link .content .contents-inner {
	width: 100%;
	text-align: center;
}

.index-notice-other-link .content .date,
.index-notice-other-link .content .count {
	text-align: center;
	margin: auto;
	font-weight: bold;
	line-height: 1.2;
}

.index-notice-other-link .content .date .num {
	padding: 0 3px;
	font-size: 2.4rem;
	font-weight: bold;
}

.index-notice-other-link .content .count .num {
	padding: 0 3px;
	color: #d4145c;
	font-size: 3rem;
	font-weight: bold;
}

.index-main-visual-notice-absence .content::after {
	content: "件";
	color: #111;
	font-size: 1.4rem;
	font-weight: normal;
	margin-left: .1em;
}


/* 下部 */
.index-main-visual-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 5px;
	background: rgba(255, 255, 255, .75);
}

.index-main-visual-bottom .c-contents {
	position: relative;
	height: 100%;
}

.index-main-visual-user-picture {
	position: absolute;
	bottom: 16px;
	left: 20px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
}

.index-main-visual-user-picture img {
	width: 100%;
	height: auto;
}

.index-main-visual-user-picture::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border: 4px solid #fff;
	border-radius: 50%;
	width: 100%;
	height: 100%;
}

.index-main-visual-user-information {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 0 0 0 176px;
}

.index-main-visual-user-name {
	font-size: 1.8rem;
	font-weight: bold;
}

.index-main-visual-user-name::after {
	content: "さん";
	font-size: 1.2rem;
	font-weight: normal;
	margin-left: .1em;
}

.index-main-visual-user-last-login {
	font-size: 1.2rem;
}


@media print, screen and (min-width: 561px) {
	
	.index-main-visual {
		margin-top: -30px;
	}
	
	.index-main-visual-notice-grades .check a:hover {
		text-decoration: none;
	}

	.index-main-visual-notice-grades .check a:hover .text {
		text-decoration: underline;
	}
	
	.index-notice-other-link:hover {
		text-decoration: none;
	}

	.index-notice-other-link:hover * {
		opacity: 0.8;
	}

	
}

@media screen and (max-width: 560px) {
	
	.index-main-visual {
		min-height: auto;
	}
	
	.index-main-visual .sp_box {
		display: flex;
		flex-direction: column;
	}
	
	.index-main-visual-top {
		order: 2;
		padding-bottom: calc(30/560*100vw);
	}
	
	.index-main-visual-bottom .c-contents {
		padding: 0;
	}
	
	.index-main-visual-user-picture {
		position: relative;
		z-index: 2;
		bottom: unset;
		left: unset;
		width: calc(160/560*100vw);
		height: calc(160/560*100vw);
		margin: 0 auto;
	}
	
	.index-main-visual-user-information {
		position: relative;
		z-index: 1;
		top: calc(-16/560*100vw);
		background-color: rgba(255, 255, 255, .75);
		text-align: center;
		border-radius: 4px;
		padding: calc(20/560*100vw);
	}
	
	.index-main-visual-user-name {
		font-size: 2.6rem;
	}
	
	.index-main-visual-user-name::after {
		font-size: 2.2rem;
	}
	
	.index-main-visual-user-last-login {
		font-size: 1.8rem;
	}
	
	.index-main-visual-bottom {
		background-color: transparent;
		order: 1;
		position: relative;
		padding: calc(20/560*100vw);
	}
	
	.index-main-visual-notice {
		flex-direction: column;
		position: relative;
		top: unset;
		right: unset;
		width: auto;
		height: auto;
	}
	
	.index-main-visual-notice-box {
		font-size: 2rem;
		padding: 0 calc(15/560*100vw);
	}
	
	.index-main-visual-notice-box:after {
		right: calc(24/560*100vw);
		width: calc(11/560*100vw);
		height: calc(20/560*100vw);
	}
	
	.index-main-visual-notice-box .title {
		margin-bottom: calc(5/560*100vw);
	}
	
	.index-main-visual-notice-grades {
		width: auto;
		height: auto;
		padding: calc(28/560*100vw);
	}
	
	.index-main-visual-notice-grades .presenting {
		font-size: 2.6rem;
	}
	
	.index-main-visual-notice-grades .check {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		padding: calc(10/560*100vw);
		margin-top: calc(15/560*100vw);
		background-color: #f6f6f6;
	}
	
	.index-main-visual-notice-grades .check:after {
		right: calc(24/560*100vw);
		width: calc(12/560*100vw);
		height: calc(20/560*100vw);
	}
	
	.index-main-visual-notice-grades .check .c-icon-notice {
		font-size: calc(47/560*100vw);
		margin-bottom: calc(15/560*100vw);
	}
	
	.index-main-visual-notice-grades .btn_wrap {
		margin: calc(15/560*100vw) auto 0;
	}
	
	.index-main-visual-notice-grades .c-btn-line {
		width: calc(360/560*100vw);
	}
	
	.index-main-visual-notice-other {
		width: 100%;
		margin: calc(10/560*100vw) auto 0;
	}
	
	.index-main-visual-notice-decision .content {
		text-align: right;
	}
	
	.index-notice-other-item {
		width: calc(50% - (10/560*100vw));
		height: calc(135/560*100vw);
		margin: calc(10/560*100vw) calc(10/560*100vw) 0 0;
	}

	.index-notice-other-link {
		display: block;
		height: 100%;
		padding: 15px 15px 15px 5px;
	}
	
	.index-main-visual-notice-box .title {
		font-size: 2.2rem;
		margin-bottom: 5px;
	}
	
	.index-notice-other-link .date {
		font-size: 2.6rem;
		line-height: 1.2;
	}
	
	.index-notice-other-link .content .date .num {
		font-size: 3rem;
	}

	.index-notice-other-link .content .count .num {
		font-size: 4rem;
	}
	
}




/*システムお知らせエリア
---------------------------------------------------------- */
.index-atention {
	position: relative;
	z-index: 1;
	padding: 5px 0;
	border: 2px solid #ded17a;
	background-color: #fff5b3;
}

.index-atention .text {
	color: #222;
}



@media screen and (max-width: 560px) {
	
	.index-atention {
		padding: calc(15/560*100vw) 0;
	}
	
}




/*スケジュール
---------------------------------------------------------- */
.index-schedule .calender_month {
	font-size: 1.8rem;
	font-weight: bold;
}

.index-schedule .calender_week {
	display: flex;
	width: 100%;
	margin: 10px auto 0;
}

.index-schedule .calender_week .column {
	display: flex;
	flex-direction: column;
	width: calc(100% / 7);
}

.index-schedule .calender_week .day {
	position: relative;
	pointer-events: none;
	font-size: 1.6rem;
	font-weight: normal;
	text-align: center;
	padding: 10px;
}

.index-schedule .calender_week .day.is-sat {
	color: #0058c5
}

.index-schedule .calender_week .day.is-sun {
	color: #e10f37;
}

.index-schedule .calender_week .day.is-empty {
	pointer-events: none;
}

.index-schedule .calender_week .day.is-empty .c-btn-toggle {
	background-color: #ebebeb;
	border-color: #b6b6b6;
}

.index-schedule .calender_week .day.is-empty .c-btn-toggle::before,
.index-schedule .calender_week .day.is-empty .c-btn-toggle::after {
	background-color: #878787;
}

.index-schedule .calender_week .content {
	flex: 1 1 auto;
	background-color: #fff;
	vertical-align: top;
	border-left: 1px solid #c6c6c6;
}

.index-schedule .today .content,
.index-schedule .calender_week .content:focus {
	background-color: transparent;
}

.index-schedule .scheduleList {
	padding: 5px;
}

.index-schedule .scheduleList_item {
	background-color: #f5f5f5;
	font-size: 1.2rem;
	line-height: 1.5;
	padding: 5px;
}

.index-schedule .today .scheduleList_item {
	background-color: #fff;
}

.scheduleList_item, .index-schedule .calender_week .content:focus .scheduleList_item {
	background-color: #fff;
}

.index-schedule .scheduleList_item+.scheduleList_item {
	margin-top: 5px;
}

.index-schedule .scheduleList_item .notice {
	color: #da1726;
}

.index-schedule .scheduleList_item .notice .c-status-notice::before {
	width: 14px;
	height: 14px;
	background-size: 14px 14px;
}

.index-schedule .scheduleList_item .notice .c-status-change::before {
	width: 14px;
	height: 12px;
	background-size: 14px 12px;
}

.index-schedule .empty {
	padding: 10px;
	font-weight: bold;
}



@media screen and (max-width: 560px) {
	
	.index-schedule .calender_month {
		font-size: 2rem;
		text-align: center;
	}
	
	.index-schedule .calender_week {
		flex-direction: column;
		margin-top: calc(20/560*100vw);
	}
	
	.index-schedule .calender_week .column {
		width: 100%;
	}
	
	.index-schedule .calender_week .column+.column {
		margin-top: calc(15/560*100vw);
	}
	
	.index-schedule .calender_week .day {
		pointer-events: auto;
		font-size: 1.8rem;
		border: 1px solid #c6c6c6;
		padding: calc(20/560*100vw);
	}
	
	.index-schedule .calender_week .content {
		background-color: #fff;
		border-left: none;
		margin-top: calc(15/560*100vw);
	}
	
	.index-schedule .calender_week .column:not(:first-of-type) .content {
		display: none;
	}
	
	.index-schedule .calender_week .content:hover,
	.index-schedule .calender_week .content:focus,
	.index-schedule .calender_week .content:hover .scheduleList_item,
	.index-schedule .calender_week .content:focus .scheduleList_item {
		background-color: #fff;
	}
	
	.index-schedule .calender_week .day .index-contents-toggle-btn {
		position: absolute;
		top: 50%;
		right: calc(20/560*100vw);
		transform: translateY(-50%);
	}
	
	.index-schedule .scheduleList {
		background-color: #e7efff;
		padding: calc(8/560*100vw);
	}
	
	.index-schedule .scheduleList_item {
		background-color: #fff;
		font-size: 1.6rem;
		padding: calc(15/560*100vw);
	}
	
	.index-schedule .scheduleList_item.is-empty {
		background-color: #f4f4f4;
	}
	
	.index-schedule .scheduleList_item+.scheduleList_item {
		margin-top: calc(8/560*100vw);
	}
	
}




/*成績ダッシュボード
---------------------------------------------------------- */
.index-dashboard .dashboard_box {
	position: relative;
	background-color: #f5f5f5;
	padding: 25px;
}

.index-dashboard .graphList_item {
	padding: 20px;
	text-align: center;
	background-color: #fff;
}

.index-dashboard .graphList_item .title {
	margin-bottom: 30px;
	font-size: 1.8rem;
}



@media print, screen and (min-width: 561px) {

	.index-dashboard .graphList {
		display: flex;
		flex-wrap: wrap;
		margin: -20px 0 0 -20px;
	}

	.index-dashboard .graphList_item {
		width: calc(50% - 20px);
		margin: 20px 0 0 20px;
	}

}

@media screen and (max-width: 560px) {
	
	.index-dashboard .dashboard_box {
		padding: calc(15/560*100vw);
	}
	
	.index-dashboard .graphList_item {
		padding: calc(15/560*100vw);
	}
	
	.index-dashboard .graphList_item:not(:first-child) {
		margin-top: calc(15/560*100vw);
	}
	
	.index-dashboard .graphList_item .title {
		margin-bottom: calc(20/560*100vw);
		font-size: 2rem;
	}
	
}




/*課題提出物
---------------------------------------------------------- */
.index-submission .index-contents-body {
	padding: 0;
}

.index-submission .submissionList_item {
	position: relative;
	padding: 16px 20px;
}

.index-submission .submissionList_item:nth-of-type(odd) {
	background-color: #f5f5f5;
}

.index-submission .submissionList_item .category {
	display: inline-block;
}

.index-submission .submissionList_item .category>span {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #606060;
	color: #fff;
	font-size: 1.2rem;
	padding: 5px 10px;
}

.index-submission .submissionList_item .title {
	font-size: 1.4rem;
	margin: 6px auto;
}

.index-submission .submissionList_item .status {
	position: absolute;
	top: 50%;
	left: calc(390/480*100%);
	transform: translateY(-50%);
}



@media screen and (max-width: 560px) {
	
	.index-submission .index-contents-body {
		padding-bottom: calc(40/560*100vw);
	}
	
	.index-submission .submissionList_item {
		padding: calc(20/560*100vw);
	}
	
	.index-submission .submissionList_item .category>span {
		font-size: 1.4rem;
		padding: calc(5/560*100vw) calc(10/560*100vw);
	}
	
	.index-submission .submissionList_item .status {
		top: calc(25/560*100vw);
		left: unset;
		right: calc(25/560*100vw);
		transform: unset;
		font-size: 1.6rem;
	}
	
	.index-submission .submissionList_item .title {
		font-size: 1.8rem;
	}
	
}




/*Liveノート
---------------------------------------------------------- */
.index-live .index-contents-body {
	padding: 0 15px 15px;
}

.index-live .live_box {
	background-color: #f5f5f5;
	overflow-y: hidden;
	height: 335px;
	padding: 8px;
}

.index-live .liveList {
	overflow-y: auto;
	height: 100%;
}

.index-live .liveList_item {
	position: relative;
	display: flex;
	background-color: #fff;
	border-bottom: 1px solid #dcdada;
	padding: 10px 26px 10px 10px;
}

.index-live .liveList_item .img {
	position: relative;
	border-radius: 50%;
	overflow: hidden;
	width: 64px;
	height: 64px;
}

.index-live .liveList_item .img::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	border: 2px solid #bebcbc;
	border-radius: 50%;
	width: 100%;
	height: 100%;
}

.index-live .liveList_item .img img {
	width: 100%;
	height: auto;
}

.index-live .liveList_item .box {
	width: 100%;
	margin-left: 18px;
}

.index-live .liveList_item .item_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.index-live .liveList_item .name {
	font-size: 1.4rem;
	font-weight: bold;
}

.index-live .liveList_item .comment {
	font-size: 1.4rem;
}

.index-live .liveList_item .action {
	display: flex;
	align-items: center;
	font-size: 1.4rem;
}

.index-live .liveList_item .reply {
	min-width: 60px;
}

.index-live .liveList_item .reply a::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	background: url(../img/ico_balloon01.svg) no-repeat 0 0/ cover;
	width: 16px;
	height: 15px;
	margin-right: 7px;
}

.index-live .liveList_item .like {
	min-width: 62px;
}

.index-live .liveList_item .like a::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	background: url(../img/ico_heart01.svg) no-repeat 0 0/ cover;
	width: 16px;
	height: 15px;
	margin-right: 9px;
}

.index-live .liveList_item .write a::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	background: url(../img/ico_pencil01.svg) no-repeat 0 0/ cover;
	width: 14px;
	height: 14px;
	margin-right: 8px;
}



@media screen and (max-width: 560px) {
	
	.index-live .index-contents-body {
		padding: 0 calc(20/560*100vw) calc(40/560*100vw)
	}
	
	.index-live .live_box {
		width: 100%;
		height: calc(650/560*100vw);
	}
	
	.index-live .liveList_item {
		padding: calc(20/560*100vw) calc(30/560*100vw) calc(20/560*100vw) calc(15/560*100vw);
	}
	
	.index-live .liveList_item .box {
		margin-left: calc(15/560*100vw);
	}
	
	.index-live .liveList_item .img {
		width: calc(60/560*100vw);
		height: calc(60/560*100vw);
	}
	
	.index-live .liveList_item .name,
	.index-live .liveList_item .time {
		font-size: 1.4rem;
	}
	
	.index-live .liveList_item .comment {
		margin-top: calc(10/560*100vw);
	}
	
	.index-live .liveList_item .action {
		white-space: nowrap;
		margin-top: calc(10/560*100vw);
	}
	
	.index-live .liveList_item .reply {
		min-width: calc(84/560*100vw);
	}
	
	.index-live .liveList_item .like {
		min-width: calc(82/560*100vw);
	}
	
}