@charset "UTF-8";
/*
Theme Name:  学習塾リップル 様
Theme URI:
Description:  学習塾リップル　専用テンプレート
Author: wataru-dp
Author URI: http://wataru-dp.com
Version: 1.0
Tags:
License: wataru-dp
License URI: http://wataru-dp.com
*/

/* default
----------------------------------------------------------------------------------------------------*/
body{
	overflow-x: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
	color: #000;
	font-size: 15px;
	font-family:  'Roboto', 'Noto Sans JP', "メイリオ", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic",  Osaka, sans-serif;
	line-height: 1.6;
}
*{
	font-size: 1em;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
header, footer, section, article, aside, nav,
figure, figcaption, main {display: block;}
ul,ol,dl,li,dt,dd{list-style: none;}
img {
	display: block;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	border:none;
}
a,a:visited{
	color: #000;
	text-decoration: none;
	-webkit-transition:opacity .4s;
	transition:opacity .4s;
}
:focus{outline:none;}
.hover{-webkit-transition:opacity .4s;transition:opacity .4s;cursor: pointer;}
a:hover,.hover:hover{opacity: 0.5;}

.cf:after{
	content: "";
	display: block;
	clear: both;
}
.min{	font-family: 'Noto Serif JP' , "游明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}


/* デフォルト：1280px以上用（PC用）の記述
====================================================================================================*/
/* 共通
---------------------------------------------------------------------------------------------------------------------------------*/
main{padding-top: 50px;padding-left: 200px;}
.inner{
	max-width: 920px;
	margin: 0 auto;
}
.inner.s{max-width: 1100px;}
.txt{
	text-align: justify;
	line-height: 1.75;
	letter-spacing: 0.1em;
}
.ofi{
	width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;'
}
.flex{display: flex;justify-content: space-between;flex-wrap: wrap;}
.flex.double>*{width: 47.8181818181818%;}
.flex.tri>*{width: 31.5%;}
.flex.four>*{width: 21.9166666666667%;}

/* #body-header
---------------------------------------------------------------------------------------------------------------------------------*/
#body-header{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 50px;
	padding-left: 20px;
	color: #FFF;
	background-color: #333;
}
#body-header .logo{font-size: 18px;letter-spacing: 0.1em;}
#body-header a{color: #FFF;}
#side-nav{
	position: fixed;
	top: 50px;
	left: 0;
	width: 200px;
	height: calc(100% - 50px);
	letter-spacing: 0.1em;
	background-color: #333;
}
#side-nav .nav-inner{padding: 20px;}
#side-nav .heading{margin-bottom: 0.5em;}
#side-nav .select-list + .heading{margin-top: 1.5em;}
#side-nav .select-list{font-size: 14px;}
#side-nav .select-list li{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
#side-nav .select-list li>*{display: block;}
#side-nav .select-list li label{flex-grow: 1;margin-left: 0.5em;}
.navBtn{
	display: none;
	position: absolute;
	top: 54%;
	right: 5%;
	width: 30px;
	height: 20px;
	cursor: pointer;
	-webkit-transition:opacity .4s;
	transition:opacity .4s;
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}
.navBtn:hover{opacity: 0.5;}
.navBtn .hambarg{
	position: absolute;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	width: 100%;
	height: 2px;
	background-color: #FFF;
	-webkit-transition:ease .2s;
	transition:ease .2s;
}
.navBtn .hambarg:nth-child(1) {top:0%;}
.navBtn .hambarg:nth-child(2) {top:50%;}
.navBtn .hambarg:nth-child(3) {top:100%;}
.on .hambarg:nth-child(1),.on .hambarg:nth-child(2),.on .hambarg:nth-child(3){top: 50%;}
.on .hambarg:nth-child(1) {
	-webkit-transform:translate(-50%,-50%) rotate(45deg);
	transform:translate(-50%,-50%) rotate(45deg);
}
.on .hambarg:nth-child(2) {
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	opacity:0;
}
.on .hambarg:nth-child(3) {
	-webkit-transform:translate(-50%,-50%) rotate(-45deg);
	transform:translate(-50%,-50%) rotate(-45deg);
}
/* #body-footer
---------------------------------------------------------------------------------------------------------------------------------*/
#body-footer{padding-left: 200px;margin-top: 40px;padding-bottom: 20px;}
#body-footer .copy{text-align: center;font-size: 12px;letter-spacing: 0.1em;}

/* コンテンツ
---------------------------------------------------------------------------------------------------------------------------------*/
.contents{padding: 60px 0;}
.contents + .contents{padding-top: 0;}
.contents .sec-title{
	display: flex;
	justify-content: flex-start;
	align-items:center;
	height: 40px;
	padding: 0 0.5em;
	margin-bottom: 1.5em;
	font-size: 18px;
	color: #FFF;
	background-color: #333;
}
.contents .sec-title::before{
	content: "";
	display: block;
	width: 4px;
	height: 1em;
	margin-right: 1em;
	background-color: #FFF;
}
.mov-list{justify-content: flex-start;}
.mov-list li:not(:nth-child(3n-2)){margin-left: 2.75%;}
.mov-list li:nth-child(n+4){margin-top: 3%;}
.mov-list .mov{position: relative;margin-bottom: 10px;}
.mov-list .mov::before{
	content: "";
	display: block;
	width: 0;
	padding-top: 56.2522500900036%;
}
.mov-list .mov iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}
.mov-list .info{flex-direction: row-reverse;}
.mov-list .box:not(.tags){width: calc(100% - 50px);}
.mov-list .tags{width: 36px;}
.mov-list .title{margin-bottom: 0.3em;font-size: 14px;}
.mov-list .description{font-size: 12px;}
.mov-list .date{font-size: 12px;}
.mov-list .class,
.mov-list .subject{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 20px;
	font-size: 12px;
	letter-spacing: 0.1em;
	line-height: 1.0;
	color: #FFF;
	background-color: #333;
}
.mov-list .class.el4{background-color: #39b54a;}
.mov-list .class.el5{background-color: #fbb03b;}
.mov-list .class.el6{background-color: #29abe2;}
.mov-list .class.jh1{background-color: #00a99d;}
.mov-list .class.jh2{background-color: #e35522;}
.mov-list .class.jh3{background-color: #0071bc;}
.mov-list .subject{margin-top: 0.4em;}

/* 1200px以下用の記述
====================================================================================================*/
@media screen and (max-width: 1119px) {
.inner{max-width: 720px;}
}/* 1200px以下用の記述 */

/* 960px以下用の記述
====================================================================================================*/
@media screen and (max-width: 959px) {
/* 共通
---------------------------------------------------------------------------------------------------------------------------------*/
main{padding-left: 0;}
.inner{width: 90%;}
.txt{font-size: 14px;}
.pc br{display: none;}
.sp br{display: block;}

/* #body-header
---------------------------------------------------------------------------------------------------------------------------------*/
#side-nav{display: none;width: 100%;overflow-y: scroll;}
#side-nav .nav-inner{padding: 20px;}
#side-nav .heading{margin-bottom: 0.5em;}
#side-nav .select-list + .heading{margin-top: 1.5em;}
#side-nav .select-list{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	font-size: 14px;
}
#side-nav .select-list li{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: calc(50% - 4px);
	padding-left: 1em;
	margin: 2px;
	background-color: rgba(255,255,255,0.1);
}
#side-nav .select-list:not(.other) li:first-child{
	width: 100%;
}
#side-nav .select-list li>*{display: block;}
#side-nav .select-list li label{flex-grow: 1;padding: 1em 0;margin-left: 0.5em;}
.navBtn{display: block;}

/* #body-footer
---------------------------------------------------------------------------------------------------------------------------------*/
#body-footer{padding-left: 0;margin-top: 40px;}
#body-footer .copy{font-size: 10px;}

/* コンテンツ
---------------------------------------------------------------------------------------------------------------------------------*/
.contents{padding: 30px 0;}
.contents .sec-title{
	height: 30px;
	font-size: 14px;
}
.mov-list{display: block;}
.mov-list.tri>*{width: 100%;}
.mov-list li:not(:nth-child(3n-2)){margin-left: 0;}
.mov-list li:nth-child(n+2){margin-top: 5%;}
.mov-list .mov{position: relative;margin-bottom: 10px;}
.mov-list .mov::before{
	content: "";
	display: block;
	width: 0;
	padding-top: 56.2522500900036%;
}
.mov-list .mov iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}
.mov-list .info{flex-direction: row-reverse;}
.mov-list .box:not(.tags){width: calc(100% - 50px);}
.mov-list .tags{width: 36px;}
.mov-list .title{margin-bottom: 0.3em;font-size: 14px;}
.mov-list .description{font-size: 12px;}
.mov-list .date{font-size: 12px;}
.mov-list .class,
.mov-list .subject{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 20px;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: #FFF;
	background-color: #333;
}
.mov-list .subject{margin-top: 0.4em;}
}/* 960px以下用の記述 */

/* 768px以下用の記述
====================================================================================================*/
@media screen and (max-width: 767px) {}/* 768px以下用の記述 */

/* 480px以下用の記述
====================================================================================================*/
@media screen and (max-width: 479px) {}/* 480px以下用の記述 */