@charset "utf-8";

.wrap {
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
}

.wrap2 {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.tb {
	width: 100%;
	border-collapse: collapse;
	border-style: none;
}

#h_left_tb {
	width: 25%;
	text-align: left;
	padding-left: 20px;
}

#h_middle_tb {
	width: 50%;
	text-align: center;
}

#resizeimage img {
	width: 400px;
}

#h_right_tb {
	width: 25%;
	text-align: right;
	padding-right: 30px;
}

#name_size {
	font-size: 24px;
}

#m_left_tb {
	width: 25%;
	text-align: center;
	padding-left: 20px;
}

#m_right_tb {
	width: 75%;
	text-align: left;
}

#f_tb {
	width: 100%;
	text-align: center;
}

#home img {
	width: 14px;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu li {
	display: inline;
	padding: 0;
	margin: 0;
}

	#menu li a {
		display: block;
		border: 1px solid #474655;
		border-radius: 4px;
		background-color: white;
		padding: 3px 10px;
		text-decoration: none;
		color: black;
		width: 180px;
		line-height: 30px;
		margin-bottom: 10px;
		text-align: left;
		font-size: 14px;
	}

		#menu li a:hover {
			border-radius: 4px;
			background-color: #d7efd7;
		}

body {
	font-size: 18px;
	font-family: -apple-system, BlinkMacSystemFont, YuGothic, "游ゴシック" , "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Helvetica Neue", Arial, "メイリオ", Meiryo, sans-serif;
	margin: 0;
	padding: 0;
}

header {
	display: block;
	overflow: hidden;
}

section {
	max-width: 1000px;
	margin: 0 auto;
}

a {
	text-decoration: none;
}

.header {
	max-width: 1000px;
	margin: 0 auto;
	display: block;
	overflow: hidden;
	color:#717171;
}

	.header .logo_img {
		float: left;
		width: 25%;
		display: block;
	}

.logo_img {
	padding: 1em;
}

.btn-flat-border {
	display: inline-block;
	padding: 0.45em 1em 0.3em;
	text-decoration: none;
	color: #717171;
	border: solid 2px #717171;
	border-radius: 25px;
	transition: .4s;
	float: right;
	margin: 0.5em 0;
}

	.btn-flat-border:hover {
		background: #717171;
		color: white;
	}
.right {
	float: right;
}

.left {
	float: left;
}

.center {
	width: 30%;
	padding-top: 4.5em;
	padding-left: 1em;
	display: inline-block;
}

header p {
	margin: 0;
}

.bock {
	display: block;
	clear:both;
}

.input {
	display: none;
}

.teach{
    position:absolute;
    left:-200px;
    padding-left:200px;
    padding-right:200px;
}

nav {
	display: block;
	border-top: 3px #16bbb9 solid;
	border-bottom: 3px #16bbb9 solid;
	width: 100%;
    position:absolute;
    left:-200px;
    padding-left:200px;
    padding-right:200px;

}

.menu {
	display: -webkit-flex;
	display: flex;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
	.menu li {
		width: calc(100% / 6);
		border-left: 3px #16bbb9 solid;
		text-align: center;
		color: #16bbb9;
		font-weight: bold;
		padding: 0;
		margin: 0;
		font-size: 1.2vw;
	}

    .menu li.koushi{
        width: calc(100% / 5);
    }

		.menu li a {
			width: 100%;
			color: #16bbb9;
			display: block;
			height: 100%;
		}
	.menu li a:hover {
				width: 100%;
                background-color:#16bbb9;
				color: #FFF;
				height: 100%;
			}
		.menu li.line {
			line-height: 6.5vh;
		}
		.menu li.last {
			border-right: 3px #16bbb9 solid;
		}
.menu li.item ul {
  position: absolute;
  top: 105%;
  width: 150px;
  height:0.2em;
  z-index: 100;
  list-style:none;
  margin:0;
  padding:0;
  color:#FFF;
}
.potition_t{
    margin-left:200px!important;
    left:59vw;
}
  .potition_t1{
    margin-left:200px!important;
    left:49vw;
}
.potition_l1{
    margin-left:200px!important;
    left:21vw
}
.potition_l2{
    margin-left:200px!important;
    left:54vw;
}
.potition_l3{
    left:62vw;
    margin-left:200px!important;
}
.menu li.item ul li {
  visibility: hidden;
  overflow: hidden;
  width: 300px;
  height: 0.2em;
  background-color:#FFF;
  color:#16bbb9;
}
.menu li.item ul li:hover, .menu li.item ul li a:hover {
  background:#16bbb9;
  color:#FFF;
  height:auto;
}
.menu li.item:hover ul li, .menu li.item a:hover ul li{
  visibility: visible;
  overflow: visible;
  height:auto;
  z-index: 10;
  color:#FFF;
  border-bottom:3px #16bbb9 solid;
}
.sub_nav {
	width: 100%;
	background-color: #fff8b0;
	background-size: 20%;
	height: 50px;
}

.panel {
	display: none;
}

input[name="check"] {
	display: none;
}

.sub_menu {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}
.tab_leb0{
   width:0;
}
.tab_lab1, .tab_lab2, .tab_lab3, .tab_lab4 {
	display: inline-block;
	width: 17%;
	width: calc(100% / 6);
	text-align: center;
	background-color: #FFF;
	color: #1d2087;
	text-decoration: none;
	font-weight: bold;
	padding: 8px 24px;
	margin-top: 2.5em;
	border-radius: 4px;
	border-bottom: 6px solid #1d2087;
	border-top: 3px solid #1d2087;
	border-left: 3px solid #1d2087;
	border-right: 3px solid #1d2087;
}
.tab_lab1:hover, .tab_lab2:hover, .tab_lab3:hover, .tab_lab4:hover{
    color:#FFF;
    background-color: #09b4b6;
}
#tab0:checked ~ .tab_lab0{display:none;}
#tab1:checked ~ .tab_lab1,
#tab2:checked ~ .tab_lab2,
#tab3:checked ~ .tab_lab3,
#tab4:checked ~ .tab_lab4 {
	transform: translateY(4px);
	border-bottom: 3px solid #1d2087;
	background-color: #09b4b6;
	color: #FFF;
}

.sub_menu span {
	display: block;
	width: 100%;
}
#tab0:checked ~ .panels #area0,
#tab1:checked ~ .panels #area1,
#tab2:checked ~ .panels #area2,
#tab3:checked ~ .panels #area3,
#tab4:checked ~ .panels #area4 {
	display: block;
}

.title {
	font-size: 2vh;
}

.subtitle {
	font-size: 1vh;
}

.m_l_30 {
	margin-left: 30px !important;
}

.bord {
	width: 100%;
	height:83vh;
	position: relative;
}

.bord_img {
	width: 90%;
	height: 40vh;
	position: absolute;
	top: 3em;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	z-index: 1;
}

.play_title {
	position: absolute;
	top: 2.5em;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	z-index: 4;
	font-size: 30px;
	color: #FFF;
}

span.subtitle2 {
	font-size: 24px;
	display: inline-block !important;
	width: auto;
	margin-left: 1em;
}

.point_title {
	position: absolute;
	top: 4em;
	left: 20%;
	z-index: 6;
	width: 5vh;
}

.play_list {
	display: flex;
	justify-content: center;
}

.play_list_box {
	display: block;
	margin: 20px;
	margin-top: 40px;
	position: relative;
}

	.play_list_box span {
		display: block;
		text-align: center;
		color: #FFF;
		font-size: 0.7em;
	}

.top_play {
	position: absolute;
	top: 18%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	z-index: 100;
	font-size: 30px;
	color: #FFF;
	width: 94%;
}

.play {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
img.play{
	width:8vw;
}
.play:hover {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

.top_boy {
	position: absolute;
	bottom: 3em;
	right: 0;
	z-index: 10;
	height: 50vh;
	object-fit: contain;
    font-family: 'object-fit: contain;'; /*IE対策*/
}

.top_girl {
	position: absolute;
	bottom: 8vh;
	left: -18vw;
	z-index: 10;
	width: 50vw;
	height: 50vh;
	object-fit: contain;
    font-family: 'object-fit: contain;'; /*IE対策*/
}

.desk {
	width: 100%;
	position: relative;
}

.desk_img {
	position: absolute;
	bottom: 0;
	width: 100vw;
    height:43vh;
   object-fit: cover;
    font-family: 'object-fit: cover;';
	z-index: 9;
}

.img {
	width: 100%;
	z-index: 10000;
}

.fukushuu {
	position: absolute;
	z-index: 10000;
	right: 33px;
	top: 80px;
	width: 9vw!important;
}

.new_movie {
	position: absolute;
	z-index: 10;
	left: 20%;
	top: 80px;
	width: 7%;
}

.ribbon {
	width: 45%;
	position: absolute;
	top: 10%;
	left: 3%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	z-index: 40;
}
.ribbon-content1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 38px;
    overflow: hidden;
}
.ribbon1 {
    display: inline-block;
    position: absolute;
    left: 1px;
    top: 8px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 13px;
    color: red;
    border: 1px red solid;
    border-radius: 50%;
    line-height: 25px;
    text-align: center;
    font-size: 17px;
}
input[name="slideshow"] {
	display: none;
}

.arrow label {
	pointer-events: none;
}
/*レッスン動画ｃｓｓ*/
.bord_lesson {
	width: 100%;
	height: 100px;
	position: relative;
}

.bord_lesson_img {
	width: 100%;
    height:64vh;
	position: absolute;
	left: 0;
	z-index: 1;
}
.bord_lesson_img1 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.bord_height{
	height:109vh;
}
.bord_height1{
	height: 91vh;
    top:-8vh;
}
.bord_height2{
	height: 91vh;
    top:-8vh;
}
.lesson_play {
	position: absolute;
	top: 3%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	z-index: 100;
}
.lesson_play1 {
	position: absolute;
	top: 2%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	z-index: 100;
}

.lesson_title {
	display: block;
	margin: 2em auto 0 auto;
	width: 64%;
	border: 3px solid #1d2087;
	background-color: #FFF;
	text-align: center;
}

.button {
    width: 80%;
    display: flex;
    position: relative;
    top:58vh;
    margin: 1.5em auto;
    z-index: 10000;
}

.btn a{
	font-size: 18px;
	display: block;
	width: 11vw;
	text-align: center;
	padding: 0.5em 1em 0.3em;
	position: relative;
	color: #990000;
	border: solid 2px #990000;
	border-radius: 5px;
	background-color: transparent;
	cursor: pointer;
    margin: 0 0.5rem;
}

	.btn a:before {
		background-color: #f1e2e2;
		border-radius: 5px;
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		left: 5px;
		top: 5px;
		z-index: -1;
	}
    .btn2 a{
	font-size: 18px;
	display: block;
	width: 11vw;
	text-align: center;
	padding: 0.5em 1em 0.3em;
	position: relative;
	color: #FFF;
	border: solid 2px #c9757f;
	border-radius: 5px;
	background-color: transparent;
	cursor: pointer;
    margin: 0 0.5rem;
}

	.btn2 a:before {
		background-color: #ed848c;
		border-radius: 5px;
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		left: 5px;
		top: 5px;
		z-index: -1;

	}



.panel {
	max-width: 960px;
	text-align: center;
	position: relative;
	margin: auto;
}

/* 復習する*/
.review_list {
	margin-bottom: 3em;
}

	.review_list a:hover{
		transform: translateY(4px);
		border-bottom: 3px solid #1d2087;
		background-color: #09b4b6;
		color: #FFF;
	}
	.review_list a.on {
		transform: translateY(4px);
		border-bottom: 3px solid #1d2087;
		background-color: #09b4b6;
		color: #FFF;
	}

.review {
	width: 60%;
	display: block;
	margin: 1em auto 0 auto;
    overflow:hidden;
}
.review1 {
	width: 70%;
	display: block;
	margin: 1em auto 0 auto;
    overflow:hidden;
}

.review1 span{
    width:75%;
	display: inline-block;
    float:left;
    text-align:left;
}
.review1 img.fukushu_keshigomu{
	width: 25%;
	display: inline-block;
    float:right;
    text-align:left;
}

.box_review {
	display: inline-block;
	float: left;
	padding:0.1em;
    margin-top:0.5em;
    text-align:center;
	background-color: #ed848c;
	font-weight: bold;
	border-radius: 100px;
	width: 18%;
    color: #FFF;
    position:relative;
}
.box_review1 {
	display: inline-block;
	float: left;
	padding:0.5em;
    text-align:center;
	background-color: #ed848c;
	font-weight: bold;
	border-radius: 25px;
	width: 20%;
    color: #FFF;
}
.box_review1 p{
    margin:0;
}

.small {
	font-size: 15px;
	font-weight: bold;
    margin:0;
}

.score {
	font-size: 18px;
	font-weight: bold;
}

	.small span, .score span {
		font-size: 13px;
	}
.drawer1{
    position:relative;
    height:250px;
}

.review_main {
	list-style: none;
	padding: 1em;
	margin-bottom: -1em;
	padding: 0;
	width: 100%;
}
.border_review{
    border: 3px #ed848c solid;
    border-radius: 25px;
    padding:0.5em;
    margin: 0.5em 0;
}

	.review_main li {
    list-style: none;
    padding: 0;
    margin: 0;
    height: auto;
    overflow: hidden;
    background-color: #FFF;
	}
.w_8{
    width:8%;
}
.review_title {
	display: inline-block;
	margin-left: 39px;
	margin-top: 0.5em;
	font-weight: bold;
	color: #ed848c;
}

	.review_title span {
		font-size: 18px;
	}

	.review_title p {
		font-size: 23px;
		margin: 0;
        display:block;
	}
    	.review_title p.fukushu_title {
        display:block;
        margin-top:-0.2em;
	}

.btn-movie {
	position: relative;
	display: inline-block;
	padding: 0.3em 2em 0.3em 3em;
	margin-top: 0.7em;
	text-decoration: none;
	color: #ed848c;
	border: solid 3px #ed848c;
	border-radius: 25px;
	transition: .4s;
	vertical-align: middle;
	text-decoration: none;
	font-weight: bold;
	float: right;
}

	.btn-movie::before,
	.btn-movie::after {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		content: "";
		vertical-align: middle;
	}

	.btn-movie:hover {
		background: #ed848c;
		color: #FFF;
	}

.ie::before {
	width: 20px;
	height: 20px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #ed848c;
	margin-left: 15px;
	transition: .4s;
}

.ie:hover::before {
	background-color: #FFF;
}

.ie::after {
	left: 20px;
	width: 5px;
	height: 5px;
	border-top: 3px solid #FFF;
	border-right: 3px solid #FFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: .4s;
}

.ie:hover::after {
	border-top: 3px solid #ed848c;
	border-right: 3px solid #ed848c;
}

.review_grade {
	padding: 0.25em 0.5em; /*上下 左右の余白*/
	color: #ed848c; /*文字色*/
	border-left: solid 5px #ed848c; /*左線*/
	font-weight: bold !important;
	font-size: 20px;
}

.homework_box {
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
	display: inline-block;
}

	.homework_box p {
		display: block;
		line-height: 50px;
		text-align: center;
		padding: 0;
		margin: 0;
		height: 50px;
	}

	.homework_box span {
		line-height: 0px;
		display: block;
		text-align: center;
	}

.homework_title {
	padding: 0.25em 0.5em; 
	color: #494949; 
	background: transparent; 
	border-left: solid 5px #7db4e6; 
	margin: 1em 0;
    text-align:left;
}

.h_sansu {
	border: 5px #004da0 solid;
	width: 23%;
	height: 120px;
	color: #004da0;
	font-weight: bold;
	vertical-align: middle;
	display: inline-block;
}

.h_title_s {
	height: 50px;
	background: #004da0;
	color: #FFF;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
}

.h_saboten {
	border: 5px #1d2087 solid;
	width: 23%;
	height: 120px;
	color: #1d2087;
	font-weight: bold;
	vertical-align: middle;
	display: inline-block;
}

.h_title_sb {
	height: 50px;
	background: #1d2087;
	color: #FFF;
	line-height: 25px;
	text-align: center;
	font-size: 20px;
}
.h_title_sb_t {
	height: 50px;
	background: #1d2087;
	color: #FFF;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
}

	.h_title_sb span {
		line-height: 17px;
		display: block;
		font-size: 20px;
		padding: 0 !important;
	}

.h_nazope {
	border: 5px #ed848c solid;
	width: 23%;
	height: 120px;
	color: #ed848c;
	font-weight: bold;
	vertical-align: middle;
	display: inline-block;
}

.h_title_n {
	height: 50px;
	background: #ed848c;
	color: #FFF;
	line-height: 25px;
	text-align: center;
	font-size: 20px;
}
.h_title_n_t {
	height: 50px;
	background: #ed848c;
	color: #FFF;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
}

	.h_title_n span {
		line-height: 17px;
		display: block;
		font-size: 20px;
	}

.h_dokkai {
	border: 5px #ea6061 solid;
	width: 23%;
	height: 120px;
	color: #ea6061;
	font-weight: bold;
	vertical-align: middle;
	display: inline-block;
}

.h_title_d {
	height: 50px;
	background: #ea6061;
	color: #FFF;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
}

.homework_caption {
	color: #364e96; /*文字色*/
	border: solid 3px #364e96; /*線色*/
	padding: 0.5em; /*文字周りの余白*/
	border-radius: 0.5em; /*角丸*/
    width:95.5%;
}
/*動画一覧*/
.col_left {
	float: left;
	margin: 0;
	padding: 20px 0;
	overflow: hidden;
}

.col_right {
	float: right;
	width: 70%;
	margin: 0;
	background-color: #7bc8c9;
}

.movie_task {
	position: relative;
	padding-top: 0.5em;
}

.title_sansu {
	position: absolute;
	top: 40px;
	left: -7.2%;
	text-align: right;
	float: right;
	font-size: 30px;
	font-weight: bold;
	color: #16bbb9;
}

.title_sansu2 {
	font-size: 30px;
	font-weight: bold;
	color: #FFF;
    width:16%;
    padding-left: 10px;
}

.title_dokkai {
	position: absolute;
	top: 32%;
	left: -7.2%;
	text-align: right;
	float: right;
	font-size: 30px;
	font-weight: bold;
	color: #16bbb9;
}

.title_dokkai2 {
	font-size: 30px;
	font-weight: bold;
	color: #FFF;
    width:16%;
    padding-left: 10px;
}

.title_nazope {
	position: absolute;
	top: 53%;
	left: -11.2%;
	float: right;
	text-align: right;
	z-index: 10;
	font-size: 30px;
	font-weight: bold;
	color: #16bbb9;
	z-index:3;
}

.title_nazope2 {
	font-size: 30px;
	font-weight: bold;
	color: #FFF;
    width:16%;
    padding-left: 10px;
}

.title_saboten {
	position: absolute;
	top: 78%;
	left: -11.2%;
	float: right;
	text-align: right;
	z-index: 10;
	font-size: 30px;
	font-weight: bold;
	color: #16bbb9;
}

.title_saboten2 {
	font-size: 30px;
	font-weight: bold;
	color: #FFF;
    width:16%;
    padding-left: 10px;
}

.movie {
	display: flex;
	overflow: hidden;
    border-bottom: 1px #16bbb9 solid;
}
.movie p{
    border-left: 1px #16bbb9 solid;
}

.movie_sansu {
	display: block;
	padding: 0 20px;
	width: 17%;
	text-align: center;
}
.movie_sansu0 {
	display: block;
	padding: 0 20px;
	text-align: center;
    color:#FFF;
}
.movie_sansu0 p,.movie_sansu p{
    border:none;
    margin:0;
}

	.movie_sansu a {
		color: #FFF;
        font-weight:bold;

	}

.movie_play {
	display: block;
	margin: 0.2em auto 0 auto;
    width:13%;
}

.dai {
	display: block;
	overflow: hidden;
	margin-bottom: 30px;
    background-color:#e1f1f1;
}
/*スライダー*/

.swiper-container {
	height: 9vh;
    line-height:9vh;
	font-weight: bold;
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 80%;
	z-index: 10000 !important;
    text-align:center
}

@media all and (-ms-high-contrast: none) {
.swiper-container {
    line-height:5vh !important;
  }
}
.swiper-containerin {
	height: 9vh;
	margin-bottom: 1em;
	background-color: #fff8b0;
	font-weight: bold;
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 85%;
	z-index: 9999 !important;
}
.swiper-container a{
	color: #1d2087;
}

.swiper-slide {
	cursor: pointer;
}

.swiper-wrapper {
	width: 80%;
	display: block;
	margin: 0 auto;
}
@font-face {
  font-family: 'swiper-icons';
  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}
.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-container-pointer-events {
  touch-action: pan-y;
	padding-left:8em;
}
.swiper-container-pointer-events.swiper-container-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
/* 3D Effects */
.swiper-container-3d {
  perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* CSS Mode */
.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
/* 前ページ、次ページボタン共通のスタイル */
.swiper-button-prev,
.swiper-button-next {
	width: 48px; /* ボタンの幅 */
	height: 48px; /* ボタンの高さ */
	background-size: 48px 48px; /* 背景画像としてのサイズ（＝表示したい画像サイズ） */
	margin-top: -24px; /* 縦中央配置用：ボタンの高さの半分のネガティブマージン（top:50%がすでに設定されている） */
}
/* 次ページボタンのスタイル */
.swiper-button-next {
	background-size: contain;
	background-repeat: no-repeat;
	width: 50px;
}
/* 前ページボタンのスタイル */
.swiper-button-prev {
	transform: scale(-1, 1); /* 左右反転 */
	background-size: contain;
	background-repeat: no-repeat;
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: 50px;
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  z-index: 1
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}

.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
  --swiper-navigation-color: #ffffff;
}
.swiper-button-prev.swiper-button-black,
.swiper-button-next.swiper-button-black {
  --swiper-navigation-color: #000000;
}
.swiper-button-lock {
  display: none;
}
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #000;
  opacity: 0.2;
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;.box_review
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform, 200ms top;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms left;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}
/* Progress */
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-white {
  --swiper-pagination-color: #ffffff;
}
.swiper-pagination-black {
  --swiper-pagination-color: #000000;
}
.swiper-pagination-lock {
  display: none;
}
/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.swiper-slide-zoomed {
  cursor: move;
}
/* Preloader */
:root {
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  */
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  animation: swiper-preloader-spin 1s infinite linear;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}
/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube {
  overflow: visible;
}
.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}
.swiper-container-cube .swiper-cube-shadow:before {
  content: '';
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  -webkit-filter: blur(50px);
  filter: blur(50px);
}
.swiper-container-flip {
  overflow: visible;
}
.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
}
.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.ballon {
	position: fixed;
	bottom: -1.5vh;
	left: 60%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 80px;
	height: 108px;
	z-index: 100000;
	background-repeat: no-repeat;
	background-size: 80px;
	text-align: center;
}
.ballon img.fukidashi{
    width: 80px;
    position: fixed;
    bottom: 1em;
    left: 60%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
    Z-INDEX: 3;
}
.ballon img.keshigomu{
    width: 50px;
    height: auto;
    padding: 16px;
    Z-INDEX: 7;
    position: fixed;
    bottom: 1em;
    left: 60%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
.arrow01{
    width:80%;
    border-style:none;
}

.lesson {
	position: fixed;
	bottom: 3em;
	left: 50%;
	margin-left: -30%;
	width: 70%;
	z-index: 1000;
}

.movie_title {
	font-size: 40px;
	color: #7bc8c9; 
	font-weight: bold;
}
.grade_title{
    background-color: #ed848c;
    color:#FFF;
    padding:0.5em;
    font-weight:bold;
    font-size:1.3vw;
}
.sansu_grade {
	display: flex;
	list-style: none;
	position: fixed;
	left: 15%;
	bottom:13vh;
	border: 3px #ed848c solid;
    background-color:#FFF;
    padding:0;
	margin: 0;
	z-index:5000;
}
.sansu_grade a{
    padding: 0.5em;
    font-size:1.3vw
}
.dokkai_grade {
	display: flex;
	list-style: none;
	position: fixed;
	left: 32%;
	bottom:13vh;
	border: 3px #ed848c solid;
    background-color:#FFF;
	margin: 0;
    padding:0;
	z-index:5000;
}
.dokkai_grade a{
    padding: 0.5em;
    font-size:1.3vw
}

		.boyandgirl {
			position: fixed;
			bottom: 2em;
			left: 25px;
			width: 11rem;
		}
.YearButton{
    display:inline-block;
}
.YearButton a {
  position: relative;
  display: inline-block;
  padding: 0.5em 1em;
  background: #FFF;
  border: 2px solid #ed848c;
  border-radius: 4px;
  color: #ed848c;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  line-heigt: 1.2em;
  -webkit-transition: .3s;
  transition: .3s;
}
.YearButton a:hover{
    background:#ed848c;
    color:#FFF;
    border: 2px solid #ed848c!;
}
.selectYear{
    background:#ed848c!important;
    color:#FFF!important;
    border: 2px solid #ed848c!important;
}
input[type="button" i]{
  position: relative;
  display: inline-block;
  padding: 0.5em 1em;
  background: #FFF;
  border: 2px solid #ed848c;
  border-radius: 4px;
  color: #ed848c;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  line-heigt: 1.2em;
  -webkit-transition: .3s;
  transition: .3s
}


/*ふりかえシート*/
.thumbnail {
	width: 85%;
	display: flex;
	list-style: none;
	padding: 0;
	text-align: center;
	margin: 0 auto;
}

	.thumbnail li {
		padding: 20px;
		width: 13%;
		text-align: center;
	}

		.thumbnail li img {
			width: 100%;
		}

		.thumbnail li:hover {
			opacity: 0.5;
		}

.furikaeri_box {
	display: inline-block;
	list-style: none;
	width: 98%;
	margin: 0;
	padding: 0;
	text-align: left;
}

	.furikaeri_box li {
		width: 23%;
		border: 3px #09b4b6 solid;
		display: inline-block;
		overflow: hidden;
	}

		.furikaeri_box li img {
			width: 100%;
		}

.furikaeri_title {
	height: 3em;
	text-align: center;
	padding-top: 0.5em;
}

.furikaeri_img {
	display: block;
	margin: 0 auto;
	padding-bottom: 0.5em;
}

.furikaeri_month {
	font-size: 3vh;
	position: relative;
	padding: 1.5rem;
	text-align: center;
}

	.furikaeri_month:before {
		position: absolute;
		bottom: -10px;
		left: calc(50% - 30px);
		width: 60px;
		height: 5px;
		content: '';
		border-radius: 3px;
		background: #000;
	}
/*学習記録*/
.curriculum {
	display: inline-block;
	width: 24%;
}

	.curriculum a {
		display: inline-block;
		width: 75%;
		text-align: center;
		background-color: #FFF;
		color: #1d2087;
		text-decoration: none;
		font-weight: bold;
		padding: 8px 24px;
		margin-top: 2.5em;
		border-radius: 4px;
		border-bottom: 6px solid #1d2087;
		border-top: 3px solid #1d2087;
		border-left: 3px solid #1d2087;
		border-right: 3px solid #1d2087;
	}

		.curriculum a:focus {
			transform: translateY(4px);
			border-bottom: 3px solid #1d2087;
			background: #09b4b6;
			color: #FFF;
		}

.history_page {
	display: inline-block;
	color: #313131;
	margin-top: 0.2em;
	border-bottom: solid 1px #ddd;
}
.f_r{
    width: 47%;
    float:right;
}
.w_80{
    width:80%;
}

.history_title {
	font-weight: bold;
	display: flex;
	font-size: 1vw;
	height: 3vh;
}
.history_title1 {
	font-weight: bold;
	display: flex;
	font-size: 1vw;
	height: 5vh;
    border-bottom: solid 1px #ddd;
    margin-bottom:1em;
}

	.history_title p {
		height: 3vh;
		line-height: 3vh;
		background-color: #FFF;
		margin: 0;
		padding: 0;
        background-color:#ed848c;
		color: #FFF;
		width: 20%;
		text-align: center;
		border-top: solid 1px #ddd;
	}
    	.history_title1 p {
		height: 5vh;
		line-height: 5vh;
		background-color: #FFF;
		margin: 0;
		padding: 0;
        background-color:#ed848c;
		color: #FFF;
		width: 20%;
		text-align: center;
		border-top: solid 1px #ddd;
	}
    	.history_title1 span {
		height: 5vh;
		line-height: 5vh;
		margin: 0;
		padding: 0 1em;
		width: 80%;
        color:#777777;
		text-align: left;
		border-top: solid 1px #ddd;
        border-right: solid 1px #ddd;
	}    
        .history_title1 span.douga_namae{
            width:12%;
            text-align:center;
            padding:0;
        }
        .history_title p.nazope_title{
        width:25%;
    }

.aline {
	line-height: 3vh !important;
    background-color:#ed848c;
    color: #FFF;
}

.history_page span {
	text-align: center;
	border-right: solid 1px #ddd;
	border-left: solid 1px #ddd;
	display: block;
	width: 27%;
	line-height: 3vh;
	border-top: solid 1px #ddd;
}
.history_page span.nazope {
	text-align: center;
	border-right: solid 1px #ddd;
	border-left: solid 1px #ddd;
	display: block;
	width: 40%;
	line-height: 3vh;
	border-top: solid 1px #ddd;
}

.complete {
    overflow: hidden;
    margin-top:0.5em;
    position:absolute;
    top:-1em;
    right:-2em;
    width:65px;
    height:65px;
}

/*Edit*/
.m_a{
    margin-top:100px;
}
.m_5{
	margin:0.5em!important;
}
.m_0{
    margin-top: 0!important;
}
.m_t_30{
    margin-top:30px;
}
.m_b_30{
    margin-bottom:30px;
}
.m_t_70{
    margin-top:70px;
}
.m_b_100{
    margin-bottom:100px;
}
.m_b_200{
    margin-bottom:200px;
}
/*親ページ*/
.touroku{
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: rgba(0,0,0,0.4);
}
.touroku_button {
  font-size: 18px;
  width: 40%;
  display: block;
  margin: 0.5em auto;
  padding: 0.5em 1em 0.3em;
  color: #FFF;
  border: double 4px #FFF;
  background-color: #09b4b6;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
}
.touroku_button:hover{
	background-color: #6fcecc;

}
.label_file_select {
    display: inline-block;
    height: 1.3em;
    padding:0.2em 0.5em;
    text-align: center;
    text-decoration: none;
    color: #1d2087!important;
    background: #ffffff!important;
    border: 2px solid #1d2087!important;
    border-radius: 3px;
    transition: .4s;
        }
    .menu_table td {
        background-color: #FFF !important;
        border: solid 2px #1d2087 !important;
    }

        .menu_table td a {
            color: #1d2087 !important;
            font-weight: bold;
        }

        .menu_table td:hover {
            background-color: #16bbb9;
            color: #FFF !important;
        }

        .menu_table td.selectMenu {
            background-color: #16bbb9 !important;
            color: #FFF !important;
        }

            .menu_table td.selectMenu a {
                color: #FFF !important;
            }

    .list_table th {
        background-color: #ed848c !important;
        border: solid 1px #ed848c !important;
    }

    .list_table td.no_color {
        background-color: #FFF !important;
        border: solid 1px #f9b7be !important;
    }

    .animation_btn {
        display: none;
    }
.label_file_select:hover {
    background: #16bbb9!important;
    color: #fff!important;
}
/*講師用*/
.koushi_title a{
  display:block;
  text-align: center;
  max-width: 180px;
  border: 2px solid #ed848c;
  font-size: 16px;
  color: #ed848c;
  font-weight: bold;
  padding:0.5em;
  border-radius: 4px;
}
.koushi_title a:hover {
  background-color:#ed848c;
  color:#FFF;
}

.menu_table td,.menu_table2 td {
    background-color: #FFF!important;
    border: solid 2px #1d2087!important;
    margin:5px;
    padding:10px 0;
    width:40%;
    height:auto!important;
         font-weight:bold;
         overflow:hidden;
         }
        .menu_table td a,.menu_table2 td a{
             color:#1d2087!important;
        }
        .menu_table td.selectMenu,.menu_table2 td.selectMenu{
                background-color: #16bbb9!important;
                overflow:hidden;
        }
        .menu_table td.selectMenu a,.menu_table2 td.selectMenu a {
             color: #FFF!important;
        }
    .menu_table tr, .menu_table2 tr {
        display: flex;
    }
.touroku_button1 {
  font-size: 18px;
  width: 40%;
  display: inline-block;
  margin: 0.5em 3%;
  padding: 0.5em 1em 0.3em;
  color: #FFF;
  border: double 4px #FFF;
  background-color: #09b4b6;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
}
.touroku_button1:hover{
	background-color: #6fcecc;
}
.list_table th{
    background-color:#ed848c!important;
    border-color:#f9b7be!important;
}
.list_table td{
    border-color:#f9b7be!important;
}
.list_table td.no_color{
    background-color:#f9b7be!important;
}
a.plus_btn{
    width:40%!important;
    border-color:#1d2087!important;
    color:#1d2087!important;
}
a.plus_btn:hover{
    background-color:#16bbb9!important;
    color:#FFF!important;
}
a.plus_btn2{
    width:40%!important;
}
.menu_table_month td{
    background-color:#ed848c!important;
    border-color:#ed848c!important;
}
.menu_table_month td a{
    color:#FFF!important;
}
.menu_table_month td.selectMenu{
    border-color:#ed848c!important;
    background-color:#FFF!important;

}
.menu_table_month td.selectMenu a{
    color:#ed848c!important;
}
a.start_btn{
    border-color:#16bbb9!important;
    color:#16bbb9!important;
}
a.start_btn:hover{
    background-color:#16bbb9!important;
    color:#FFF!important;
}
/*teacher*/
.animation_btn01{
    background-color:#16bbb9!important;
    border-color:#16bbb9!important;
    color:#16bbb9!important;
}
.animation_btn01:hover{
    color:#FFF!important;
}
a.edit_btn{
    border-color:#16bbb9!important;
    color:#16bbb9!important;
    width:85%!important;
    height:auto!important;
}
a.edit_btn:hover{
    background-color:#16bbb9!important;
    color:#FFF!important;
}
a.delete_btn{
    width:85%!important;
    height:auto!important;
}
a.withdrawal_btn{
    width:85%!important;
    height:auto!important;
}
.selectMenu{
		border-bottom: 3px solid #1d2087!important;
		background-color: #09b4b6!important;
		color: #FFF!important;
    }
.re_entry_btn{
    width:85%!important;
    height:auto!important;
}
a.check_btn{
    width:85%!important;
    height:auto!important;
}
/*リーダー*/
a.plus_btn{
    padding:1em 0!important;
    margin:0!important;
}
a.plus_btn2{
    border-color:#16bbb9!important;
    color:#16bbb9!important;
    padding:1em 0!important;
    margin:0!important;
}
a.plus_btn2:hover{
    background-color:#16bbb9!important;
    color:#FFF!important;
}
a.minus_btn{
    padding:1em 0!important;
    border-color: red!important;
    color: red!important;
}
a.minus_btn:hover{
    background-color:red !important;
    color:#FFF !important;
}

@media (max-width: 1000px) {
 .potition_t{
    margin-left:200px!important;
    left:49vw;
}

.potition_l1{
    margin-left:200px!important;
    left:11vw
}
.potition_l2{
    margin-left:200px!important;
    left:56vw;
}
.potition_l3{
    left:66vw;
    margin-left:200px!important;
}
.menu li.item ul li {
  visibility: hidden;
  overflow: hidden;
  width: 300px;
  height: 0.2em;
  background-color:#FFF;
  color:#16bbb9;
}
.menu li.item ul li:hover, .menu li.item ul li a:hover {
  background:#16bbb9;
  color:#FFF;
  height:auto;
}
.menu li.item:hover ul li, .menu li.item a:hover ul li{
  visibility: visible;
  overflow: visible;
  height:auto;
  z-index: 10;
  color:#FFF;
  border-bottom:3px #16bbb9 solid;
}
}
@media screen and (min-width:1000px) {
	.pc_none ,.tb_only{
		display: none;
	}
    
}
@media screen and (min-width: 481px) {
    .msho_none{
        display:none;
    }
}
@media screen and (max-width:999px) {
	.sp_none ,.tb_none,sho_none {
		display: none;
	}
    .m_t_70{
        margin:0;
    }
    section{
        max-width:98%;
        margin:0 auto;
    }
    	header{
		width: 98%;
		margin: 5px auto;
	}
	.header .logo_img {
    	float: left;
    	width: 20%;
    	display: block;
	}
	header p{
		margin: 0;
	}
	.right{
		width: 100%;
		text-align: center;
	}
    .btn-flat-border2{
        margin: 0.5em auto;
        text-align:center;
        width:26%;
        padding: 0.45em 1em 0.3em;
    text-decoration: none;
    color: #717171;
    border: solid 2px #717171;
    border-radius: 25px;
    transition: .4s;
    display:block;
    }
	.btn-burger {
   		cursor: pointer;
    	display: block;
    	width: 36px;
    	height: 60px;
    	position: absolute;
        top: 12px;
        right: 32px;
	}
	.icon{
		transition: all .4s;
  		position: absolute;
  		left: 0;
    	height: 2px; /*線の太さ*/
    	width: 100%; /*線の長さ*/
    	background-color: #444;
		border-radius: 2px;
		display: block;
    	cursor: pointer;
    	margin: 0;
	}
	.icon:nth-of-type(1) {
  		top: 20px;
	}
	.icon:nth-of-type(2) {
  		top: 30px;
	}	
	.icon:nth-of-type(3) {	
  		top: 40px;
	}

	nav{ display:none;}
	.input:checked ~ .btn-burger .icon:nth-of-type(1) {
  		 transform: rotate(-45deg);
    	 top: 40px;
	}
	.input:checked ~ .btn-burger .icon:nth-of-type(3) {
  		 transform: rotate(45deg);
    	 top: 40px;
	}
	.input:checked ~ .btn-burger .icon:nth-of-type(2) {
  		 background: transparent;
	}
	.input:checked ~ nav{
        display: block;
        z-index:1000000;
        background-color:#FFF;
        border:none;
        width:100%;
        margin: 0 auto;
        padding:0;
        left:0;
		transition: all .8s;
	}
	.menu{
		display: block;
        width:80%;
        margin:1em auto;
	}
	.menu li,.menu li.koushi{
		width: 98%;
		border-top: 1.5px #66b3b5 solid;
		border-left: 1.5px #66b3b5 solid;
		border-right: 1.5px #66b3b5 solid;
		padding: 1em 0;
	}
    .menu li.line{
        line-height:1;
    }
    .menu li.last {
			border-right: 1.5px #16bbb9 solid;
			border-bottom: 1.5px #16bbb9 solid;
		}
    .review_main{
        width:97%;
    }
	.tab_lab1,.tab_lab2,.tab_lab3,.tab_lab4{
		width: 30%;
		margin: 0.5em auto;
		display: inline-block;
	}
	.m_l_30{
		margin-left: 0!important;
	}
	.title {
		font-size: 20px;
	}
	.bord_img{
		width: 100%;
		height: 590px;
		object-fit: cover;
	}
	.point_title{
		left: 10%;
		width: 10%;
	}
	.bord{
		height: 700px;
	}
	.top_girl{
		width: 20%;
		height: 300px;
		object-fit: cover;
		object-position: 100% 0;
		left:0;
	}
	.top_boy{
		width: 26%;
		height: 300px;
		right: 0;
	}
	.desk_img {
		width: 100%;
		height: 260px;
        object-fit:cover;
	}
	.play{
		width: 90%;
	}
	.fukushuu{
		right: 0;
    	width: 14%!important;
	}
	.new_movie{
		width: 15%;
		left: 7%;
	}
	.button{
		margin: 0;
        top: 58vh;
        left: 15vh;
	}
	.btn--cubic{
		display: block;
	}
    .btn2 a{
        width:20vw;
    }

	.slide{
		position: absolute;
		z-index: 100;
		top: 30%;
		width: 100%;
	}
	.slideshow {
	position: relative;
	overflow: hidden;
	width: 80%;
	display: block; 
	margin: 0 auto;
	
}
.review_title{
        width:27%;
    }
input[name="slideshow"] {
	display: none;
}

/* :::::: slideContents :::::: */
.slideContents {
	position: relative;
	background: #055f68;
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
	transition: transform .6s;

}
.slideContents section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transform: translateX(100%);
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.slideContents section img {
	max-width: 100%;
	padding: 0 50px;
	box-sizing: border-box;
	vertical-align: middle;
}
.slideContents section span {
	max-width: 100%;
	font-size: 30px;
	color: #FFF;
}

/* :::::: arrows :::::: */
.arrow,
.arrow label,
.arrow .ico {
	position: absolute;
}
.arrow {
	top: 0;
	margin: 0;
	transition: background .3s;
}
.prev {
	left: 0;
}
.next {
	right: 0;
}

.arrow,
.arrow label {
	cursor: pointer;
	width: 50px;
	height: 100%;
}
.arrow label {
	top: 0;
	left: 0;
	z-index: 1;
}
.arrow .ico {
	top: calc(50% - 6px);
	width: 12px;
	height: 12px;
	border-top: 3px solid #fff;
	opacity: 0;
}
.prev .ico {
	left: 50%;
	border-left: 3px solid #fff;
	transform: rotate(-45deg);
	transition: left .3s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .3s;
}
.next .ico {
	right: 50%;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
	transition: right .3s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .3s;
}
.arrow.ico {
	opacity: .6;
}
.prev .ico {
	left: calc(50% - 6px);
}
.next .ico {
	right: calc(50% - 6px);
}

/* :::::: mechanism :::::: */
#switch1:checked ~ .slideContents #slide1,
#switch2:checked ~ .slideContents #slide2,
#switch3:checked ~ .slideContents #slide3,
#switch4:checked ~ .slideContents #slide4,
#switch5:checked ~ .slideContents #slide5 {
	position: relative;
	transform: none;
}
#switch1:checked ~ .slideContents #slide5,
#switch1:checked ~ .slideContents #slide4,
#switch2:checked ~ .slideContents #slide1,
#switch2:checked ~ .slideContents #slide5,
#switch3:checked ~ .slideContents #slide2,
#switch3:checked ~ .slideContents #slide1,
#switch4:checked ~ .slideContents #slide3,
#switch4:checked ~ .slideContents #slide2,
#switch5:checked ~ .slideContents #slide4,
#switch5:checked ~ .slideContents #slide3 {
	transform: translateX(-100%);
}
#switch1:checked ~ .slideContents #slide3,
#switch1:checked ~ .slideContents #slide4,
#switch2:checked ~ .slideContents #slide4,
#switch2:checked ~ .slideContents #slide5,
#switch3:checked ~ .slideContents #slide5,
#switch3:checked ~ .slideContents #slide1,
#switch4:checked ~ .slideContents #slide1,
#switch4:checked ~ .slideContents #slide2,
#switch5:checked ~ .slideContents #slide2,
#switch5:checked ~ .slideContents #slide3 {
	transition-duration: 0s;
}

/* :::::: arrow mechanism :::::: */
.arrow label {
	pointer-events: none;
}
	
.arrow label img{
	width: 100%;
	padding-top: 120%;
}
#switch1:checked ~ .prev label[for="switch5"],
#switch2:checked ~ .prev label[for="switch1"],
#switch3:checked ~ .prev label[for="switch2"],
#switch4:checked ~ .prev label[for="switch3"],
#switch5:checked ~ .prev label[for="switch4"],
#switch1:checked ~ .next label[for="switch2"],
#switch2:checked ~ .next label[for="switch3"],
#switch3:checked ~ .next label[for="switch4"],
#switch4:checked ~ .next label[for="switch5"],
#switch5:checked ~ .next label[for="switch1"] {
	pointer-events: auto;
}
    .bord_height1 {
        top:-3vh;
    }
   .bord_height2 {
        top:-3vh;
    }
}

@media screen and (max-width:480px) {
    body{
        font-size:15px;
    }
    .tb_only{
        display:none;
    }
    .header .logo_img{
        width:48%;
    }
    .menu li {
        font-size:4.2vw;
        line-height:1;
    }
    .top_play{
        font-size:18px;
    }
	.top_girl{
		width: 40%;
		height: 280px;
		object-fit: cover;
		object-position: 100% 0;
		left:0;
	}
    span.subtitle2{
        font-size: 18px;
    }
    .top_boy{
		width: 30%;
		height: 300px;
		right: 0;
	}
    .tab_lab1,.tab_lab2,.tab_lab3,.tab_lab4{
		width: 41%;
		margin: 0.5em auto;
        padding:8px;
	}
    .curriculum{
        width:40%;
    }
    .curriculum a{
        margin-top:1em;
        padding:8px;
    }
    .review1{
        width:98%;
        position:relative;
    }
    .review1 span{
        float:none;
        width:65%;
    }
    .review1 img.fukushu_keshigomu{
        float:none;
    }
    .review_title{
        width:37%;
    }
        .review_title p {
            font-size:18px;
            line-height:1;
        }
    .title{
    font-size:15px;
    }
    .score {
        font-size: 14px;
    }
    .h_title_s,.h_title_d,.h_title_n,.h_title_n span,.h_title_sb,.h_title_sb span{
        font-size: 17px;
    }

    .complete {
        width:45px;
        top:-0.5em;
    }
    .homework_title {
        font-size:18px;
        font-weight:bold;
    }
    .f_r{
        width:100%;
        float:left;
    }
    .thumbnail li{
        padding:6px;
    }
    .play_title {
        width:90%;
    }
    .top_play{
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    }
    .lesson_title {
        width:90%;
    }
    .button {
      left:2vh;
      top:43vh;
      display:block;
      width:100%;
    }
    .btn a,.btn2 a{
        width:30%;
        margin: 0 auto;
        font-size:15px;
    }
    .btn{
        margin-bottom:0.5em;
        width:100%;
    }
    .btn2 {
        margin-bottom:0.5em;
        width:100%;
    }
    #f_right_tb,#f_left_tb{
        width:100%!important;
    }
    .bord_height1 {
        top:-5vh;
    }
   .bord_height2 {
        top:-11vh;
    }
    .movie{
        display:block;
    }
    .movie_play {
        width:9%;
    }
    .movie_sansu{
        width:100%;
        padding:0;
    }
    .title_sansu2,.title_dokkai2,.title_nazope2,.title_saboten2{
        width:100%;
        text-align:center;
        padding:0;
        background:#e1f1f1;
        color:#16bbb9;
        margin-bottom: 7px;
        font-size:15px;
    }
    .movie_title{
        font-size:27px;
    }
    .dokkai_grade {
        right:5%;
        left:auto;
    }
    .ballon img.keshigomu{
        width:30px;
    }
    .ballon img.fukidashi {
        width:55px;
    }
    .ballon{
        width:40px;
        height:40px;
        bottom: 0.5vh;
        left: 64%;
    }
    .sansu_grade a,.grade_title,.dokkai_grade a {
        font-size:3.3vw;
    }
    .swiper-container{
        line-height:8vh;
        width: 80%;
        left: 45%;
    }
    .box_review {
        width: 47%;
        border-radius:20px;
    }
    img.play {
       width: 21vw;
    }
    .fukushuu{
        top:45%;
        width:30%!important;
    }

    .box_review1{
        width:39%;
    }
    .review_main{
        width:90%;
        margin-bottom:1em;
        padding-bottom:1em;
    }

    .w_8{
    width: 15%!important;
    margin-top: 1em;
    float: left;
    margin-left: 0!important;
    }
    .w_80{
        width:85%;
        float:right;
    }
    .w_100{
            width:100%;
            border-bottom: 1px #CCC solid;
    }
    .h_sansu,.h_dokkai,.h_nazope,.h_saboten {
        width:46%;
        margin-bottom:0.5em;
    }
    .homework_caption{
        width:92%;
    }
   a.delete_btn {
        padding:0!important;
    }
   .btn-movie{
       width: 70%;
       text-align: center;
   }
    .YearButton a {
        font-size:13px;
    }
    .thumbnail {
        width:100%
    }
    .menu_table {
        width:80%!important;
    }
    .review_title span{
        font-size:15px;
    }
    /*講師*/
    a.not_del_btn,a.start_btn,a.del_btn,a.plus_btn {
        width:auto!important;
    }
    .touroku_button1 {
        width:29%;
    }
    a.plus_btn{
        padding:0.2em!important;
    }
    .img_hanamaru{
        background-size:100%!important;
        background-position:top !important;
    }
    .menu_table_year td{
        width:auto!important;
    }
    .menu_table_year td a{
    padding: 0.5em 1em!important;
    margin:1em 0!important;
    }
    .menu_table_year_5{
        width:100%!important;
    }
}
@media screen and (max-width:360px) {
.bord_height2{
    top:-15vh;
}
    .button {
        top:48vh;
    }

}
@media all and (-ms-high-contrast: none) {
        .m_t_70{
            display:block;
        }
		.menu li.line {
			line-height: 50px;
		}
        .title{
            font-size:14px;
        }
    .potition_l2{
        left: 54vw;
    }
    .menu_table tr, .menu_table2 tr{
        display:table;
        width:100%;
    }
    .menu_table td, .menu_table2 td{
        width:25%;
    }
    .item{
        top:100%;
    }
    .menu li{
        font-size: 14px;
    }
    .menu li.item ul{
        height:0.5em;
        z-index:100000;
    }

}
@media screen and (min-width: 1900px) {
    .menu li {
        font-size: 14px;
    }
    .menu li.line {
       line-height: 4.5vh!important;
    }
    .potition_l1 {
        left: 30vw!important;
    }
    .potition_l3 {
        left: 58vw!important;
    }
    .title {
        font-size: 15px!important;
    }
    .review_title{
        width: 22%;
    }
    .f_r{
        width:55%;
    }
    .review_title p {
        font-size:20px;
    }
    .history_title {
	font-size: 0.8vw;
    }
}