@charset "UTF-8";
/*====================================================
BASE
====================================================*/
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* Fotterを最下部固定にするため */
}
main {
	flex: 1;
	width: 100%;
}
.container {
  max-width: 960px;
	margin: 0 auto;
}
.container.login {
  max-width: 800px;
	margin: 0 auto;
}
.container-s {
	max-width: 500px;
	margin: 0 auto;
}

/*--------------------------
HEADER
--------------------------*/
header {
	width: 100%;
	height: 80px;
}

/*ログイン前*/
.header-before-login {
	filter: drop-shadow(0px 0px 10px rgba(63, 97, 179, 0.1));
	background: #fff;
	width: 100%;
	height: 80px;
    position: fixed;
    z-index: 9999;
}
.header-block {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 960px;
	height: 80px;
	margin: 0 auto;
  padding: 5px 0;
}
.header-block .nav-logo {
	display: flex;
  align-items: center;
  height: 100%;
	font-weight: bold;
	font-size: 120%;
}
.header-block .nav-logo a {
	position: relative;
	display: contents;
}
.header-block .nav-logo img {
	width: auto;
  max-width: 160px;
  height: auto;
  max-height: 100%;
}
.menu-content {
	display: flex;
	list-style: none;
	margin: 0;
	line-height: normal;
}
.menu-content li:not(:last-of-type) {
	margin-right: 32px;
}
.menu-content li.student-name {font-size: 11px;text-align: right;margin-right: 10px;padding-top: 8px;}
.menu-content li.student-icon {background:#9B9B9B url("../../img/common/icon/user.svg") no-repeat;background-size: cover;width: 36px; height: 36px;box-sizing: border-box;border: 2px solid #AFAFAF;border-radius: 50%;position: relative;margin-top: 21px;}
.menu-content li.student-icon img {width: 100%;height: auto;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;}
.menu-content li.student-icon a {width: 36px; height: 36px;display: block;}
.menu-content li.bell-icon {background:#9B9B9B url("../../img/common/icon/bell.svg") no-repeat;background-size: cover;width: 36px; height: 36px;box-sizing: border-box;border: 2px solid #AFAFAF;border-radius: 50%;position: relative;margin-top: 21px;margin-right: 10px;}
.menu-content li.bell-icon.badged::after {display: block;position: absolute;top: -1px;right: 1px;content: '';width: 10px;height: 10px;background-color: red;border-radius: 10px;}
.menu-content li.bell-icon img {width: 100%;height: auto;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;}
.menu-content li.bell-icon a {width: 36px; height: 36px;display: block;}
.menu-content > li > a {
	position: relative;
	text-decoration: none;
	color: #454552;
	color: var(--main-text);
	height: 80px;
    line-height: 80px;
    transition: all .2s ease;
}
.menu-content a:hover {
	color: #E85A71;
	color: var(--main-color);
}
.menu-content a.text-blue {
	color: #3F61B3;
	color: var(---school-base-color);
}
.menu-content a.text-blue:hover {
	color: #454552;
	color: var(--main-text);
}
.menu-content a svg,
.menu-content a img {
	vertical-align: sub;
}
.menu-content a svg:hover path {
	stroke: #3F61B3;
	color: var(---school-base-color);
}
.menu-content a .header-arrow,
.menu-content a.text-blue:hover .header-arrow {
	position: absolute;
	top: 6px;
	margin-left: 6px;
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #2B3348;
    border-right: 2px solid #2B3348;
    transform: rotate(135deg);
    transition: .4s;
}
.menu-content a:hover .header-arrow,
.menu-content a.text-blue .header-arrow {
	border-top: 2px solid #3F61B3;
    border-right: 2px solid #3F61B3;
}
.menu-dropdawn-trigger:hover > .menu-dropdawn-content {
	/* top: 50px; */
    visibility: visible;
    opacity: 1;
}
.menu-dropdawn-content {
	position: absolute;
    top: 80px;
    width: 180px;
    background: #fff;
	box-shadow: 0px 0px 10px rgba(63, 97, 179, 0.1);
	border-radius: 6px;
	box-sizing: border-box;
	padding: 12px;
	list-style: none;
	font-size: 14px;
	visibility: hidden;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
.menu-dropdawn-content li {
	margin-right: 0!important;
	padding: 8px 12px;
	border-radius: 6px;
	cursor: pointer;
}
.menu-dropdawn-content li:hover {
	background: #F6F6F6;
}
.menu-dropdawn-content .header-logout {
	margin: 4px 0;
}
.menu-dropdawn-content li a {
	height: auto;
	line-height: 24px;
}

.menu-content li.student-icon .student-dropdown + .student-dropdown-menu {
	position: absolute;
    top: 40px;
    left: -144px;
    width: 180px;
    background: #fff;
	box-shadow: 0px 0px 10px rgba(63, 97, 179, 0.1);
	border-radius: 6px;
	box-sizing: border-box;
	padding: 12px;
	list-style: none;
	font-size: 14px;
	visibility: hidden;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    opacity: 0;
    display: none;
}
.menu-content li.student-icon .student-dropdown.active + .student-dropdown-menu {
	display: block;
    visibility: visible;
    opacity: 1;
}
.menu-content li.student-icon .student-dropdown + .student-dropdown-menu li {
	margin-right: 0!important;
	padding: 8px 12px;
	border-radius: 6px;
	cursor: pointer;
}
.menu-content li.student-icon .student-dropdown + .student-dropdown-menu li:hover {
	background: #F6F6F6;
}
.menu-content li.student-icon .student-dropdown + .student-dropdown-menu .header-logout {
	margin: 4px 0;
}
.menu-content li.student-icon .student-dropdown + .student-dropdown-menu li a {
	height: auto;
	line-height: 24px;
	width: 100%;
	color: #454552;
	font-weight: bold;
}

/*--------------------------
FOOTER
--------------------------*/
.footer-school {
  background: #454552;
  background: var(--base-color);
  padding: 1.25rem 0;
}
.footer-nav {
  display: flex;
  justify-content:center;
  align-items: baseline;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  letter-spacing: 1px;
}
.footer-nav li {
  margin: 0 0.5rem;
}
.footer-nav li a {
  color: #FFFFFF;
}
.footer-nav li a:hover {
  color: #E8765A;
}
.copyright {
  text-align: center;
  font-size: 0.75rem;
  font-family: "Quicksand";
  color: #FFFFFF;
}

/*--------------------------
MAIN
--------------------------*/
.content-box{
  padding: 2.5rem;
  background: #FFFFFF;
  border-radius: 10px;
}
.editor-content ul li {
  list-style: disc;
  list-style-position: inside;
  margin-bottom: 0.5rem;
}
.editor-content ol li {
  list-style: decimal;
  list-style-position: inside;
  margin-bottom: 0.5rem;
}
.content-box > h1:first-child,
.content-box > h2:first-child,
.content-box > h3:first-child,
.content-box > h4:first-child,
.content-box > h5:first-child {
  margin-top: 0;
}
.plan-card {
	width: 100%;
	margin-bottom: 2.5rem;
	font-size: 0.875rem;
	font-weight: bold;
	letter-spacing: 0.05em;
}
.plan-card .card-top{
	padding: 1.5rem;
	background: #F6F6F6;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.plan-card .card-top .card-title {
	font-weight: bold;
	color: #3F61B3;
	margin-bottom: 1rem;
}
.plan-card .card-top .card-content {
	display: flex;
}
.plan-card .card-top .card-content img {
	margin-right: 1.5rem;
}
.plan-card .card-bottom {
	padding: 1rem 1.5rem;
	background: #3F61B3;
	background: var(--blue-linear);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	text-align: right;
	color: #ffffff;
}

/*====================================================
	TABLET
====================================================*/
@media screen and (max-width: 991px) {
	main {
		margin-top: 64px;
	}
	.container {
		width: 100%;
		padding-left: 30px;
		padding-right: 30px;
	}

	/*--------------------------
	ヘッダー
	--------------------------*/
	/*ログイン前*/
	header {
		position: fixed;
		height: 64px;
		z-index: 50;
	}
	.header-before-login {
		width: 100vw;
		min-width: auto;
		height: 64px;
	}
	.header-block {
		width: 100%;
		height: 64px;
		padding: 5px 2rem;
	}
	.header-block .nav-logo img {
		width: auto;
		max-width: 160px;
	}
	.nav-block a {
		height: 64px;
		line-height: 64px;
	}
	header + section:first-of-type {
		margin-top: 0!important;
		padding-top: 80px;
	}

	/* ハンバーガーメニュー */
	.menu-btn {
		position: fixed;
		top: 0.875rem;
		right: 1rem;
		display: flex;
		height: 40px;
		width: 40px;
		justify-content: center;
		align-items: center;
		z-index: 90;
		border-radius: 10px;
		cursor: pointer;
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background: #454552;
		position: absolute;
	}
	.menu-btn span:before {
		bottom: 8px;
	}
	.menu-btn span:after {
		top: 8px;
	}
	#btn-check {
		display: none;
	}
	#btn-check:checked ~ .menu-btn span {
		background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	}
	#btn-check:checked ~ .menu-btn span::before {
		bottom: 0;
		transform: rotate(45deg);
	}
	#btn-check:checked ~ .menu-btn span::after {
		top: 0;
		transform: rotate(-45deg);
	}
	#btn-check:checked ~ .sp-menu-content {
		display: block;
		overflow: initial;
		opacity: 1;
		height: calc(100vh - 64px);
		transition: all 1s;
		overflow-y: scroll;
	}
	.sp-menu-content {
		display: none;
		opacity: 0;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 64px;
		left: 0;
		z-index: 80;
		background: rgba(60, 60, 60, 0.3);
		transition: all 0.5s;
		box-shadow: 0px 10px 15px 0px rgb(33 42 57 / 16%);
		letter-spacing: 0.05em;
	}
	.sp-menu-content ul {
		background: #FFFFFF;
	}
	.sp-menu-content ul li {
		border-top: solid 1px #F6F6F6;
		list-style: none;
	}
	.sp-menu-content ul li a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16px;
		color:#454552;
		position: relative;
		padding: 0 1rem;
	}
	.sp-menu-content ul li a::after {
		content: "";
		width: 7px;
		height: 7px;
		border-top: solid 2px #8f8f97;
		border-right: solid 2px #8f8f97;
		transform: rotate(45deg);
		position: initial;
	}
	.sp-menu-content .sp-menu-attent {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.sp-menu-content .sp-menu-attent .attent-content{
		width: 50%;
		text-align: center;
		color: #FFFFFF;
		font-size: 16px;
		font-weight: bold;
	}
	.sp-menu-content .sp-menu-attent .attent-content.login {
		background: #3F61B3;
		background: var(--blue-linear);
	}
	.sp-menu-content .sp-menu-attent .attent-content.signup {
		background: #E85A71;
		background: var(--main-linear);
	}
	.sp-menu-content .sp-menu-attent .attent-content.logout {
		background: #454552;
	}
	header + section:first-of-type {
		padding-top: 30px;
		margin: 0;
	}
}


/*--------------------------
SMARTPHONE
--------------------------*/
@media screen and (max-width: 767px) {
	.container,.container.login {
		max-width: calc(100% - 30px);
		padding: 0;
	}
	.header-block {
    padding: 10px 15px;
  }
  .header-block .nav-logo img {
    width: auto;
    max-width: 100%;
  }
	/*--------------------------
	MAIN
	--------------------------*/
	.content-box{
		padding: 1.5rem 1rem;
	}
	/*--------------------------
	フッター
	--------------------------*/
	.footer-block {
		flex-direction: column;
		padding: 2rem 1rem 1.5rem;
		justify-content: space-between;
	}
	.footer-left {
		width: 100%;
		margin-bottom: 2rem;
	}
	.footer-left img {
		width: auto;
		height: auto;
	}
	.footer-right {
		width: 100%;
	}
	.footer-right nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	.footer-right dl {
		width: 44%;
		margin: 0 3%;
	}
	.footer-right dl + dl {
		margin: 0 3%;
	}
	.footer-right dl:nth-child(n+3){
		margin-top: 2rem;
	}
	.footer-right dl dt {
		margin-bottom: 1rem;
	}
}

/*====================================================
	SP
====================================================*/
@media screen and (max-width: 575px) {
	.container-s {
		max-width: 100%;
		padding: 0;
	}
}


.fixed-headBtns {position: fixed;top: 25px;right: 10px;z-index: 100; display: block;width: 400px;}
.fixed-headBtns p {float: left;font-size: 14px;}
.fixed-headBtns .card-area {float: right; width: 210px;}