/* CSS Document */
@import url("../../module/lity.min.css");
@import url("../../module/slick-theme.css");

img {
	max-width: 100%;
}

.forPC {
	display: none;
}

.forSP {
	display: block;
}

@media screen and (min-width:960px) {
	.forPC {
		display: block;
	}

	.forSP {
		display: none;
	}
}

/* ▼ 20220601 追記 不具合注意 */
.contentArea.kuraberu{
	overflow: hidden;
}
/* ▲ 20220601 追記 不具合注意 */

.contentArea.kuraberu>h1 {
	border: none;
	color: #fff;
	padding: 0;
	text-align: center;
	margin: .75rem 0 0 0;
}

.cathegoryWrap h1 {
	border-bottom: none;
	color: #1a4892;
	padding: 0;
	text-align: center;
	border-radius: 3px;
	background: #d6edf7;
	;
	font-size: 1.7em;
	font-weight: bold;
	margin: 2rem .75rem .75rem .75rem;
	letter-spacing: 5px;
}

/*.cathegoryWrap h1.<strong>school</strong> span{
  position: relative;
}
.cathegoryWrap h1.school span:before{
  content: "";
  display: block;
  position: absolute;
  left: -1.2em;
  bottom: calc(50% - .5em);
  width: 1em;
  height: 1em;
  background: url("../../../img/page/shinrotv/icn_piyo.png") left top / contain no-repeat;
}
.cathegoryWrap h1.school span:after{
  content: "";
  display: block;
  position: absolute;
  right: -1.2em;
  bottom: calc(50% - .5em);
  width: 1em;
  height: 1em;
  background: url("../../../img/page/shinrotv/icn_usatan.png") left top / contain no-repeat;
}*/
.cathegoryWrap h1.area {
	border-bottom: none;
	color: #1a4892;
	padding: 0;
	text-align: center;
	border-radius: 3px;
	/*background: #d6edf7;*/
	background: #FFDAB9;
	font-size: 1.4em;
	font-weight: bold;
	margin: 3rem .75rem 1rem .75rem;
	letter-spacing: 1px;
}

.cathegoryWrap h2 {
	border-bottom: none;
	color: #ffffff;
	padding: 0;
	text-align: center;
	border-radius: 3px;
	background: #1a4892;
	;
	font-size: 1.2em;
	font-weight: bold;
	margin: 1rem .75rem .75rem .75rem;
	letter-spacing: 3px;
}

.cathegoryWrap ul.short,
.cathegoryWrap ul.long,
.cathegoryWrap ul.prefecture {
	margin: 0;
	padding: 0;
	list-style-type: none;
	margin: .25rem;
}

.cathegoryWrap ul li {
	line-height: 1.3;
}

.cathegoryWrap ul.short {
	display: flex;
	flex-wrap: wrap;
}

.cathegoryWrap ul.short li {
	margin: .3rem;
	flex-grow: 1;
}

.cathegoryWrap ul.long li {
	margin: .5rem .25rem;
}

.cathegoryWrap ul.prefecture li {
	margin: .5rem .25rem;
}

.cathegoryWrap ul li a {
	border-radius: 3px;
	background: #fff;
	border: 1px solid #1a4892;
	border-radius: .25rem;
	display: block;
	padding: .25rem .5rem .25rem .5rem;
	position: relative;
}

input[type="radio"] {
	display: none;
}


input[type="radio"]:checked+label.preButton {
	border-radius: .5rem;
}

input[type="radio"]:checked+label {
	background: #2a619e;
	color: #fff;
}

div label {
	background: #FFF;
	flex-grow: 1;
	border-radius: .5rem;
	border: 1.0px solid #1a4892;
	display: block;
	padding: 6px;
	text-align: center;
	font-size: 15px;
}

/*リニューアル予告*/
.contentArea.kuraberu div.yokoku {
	border: 3px solid #1a4892;
	margin: 0 .75rem;
	text-align: center;
}

@media screen and (min-width:960px) {
	.contentArea.kuraberu div.yokoku {
		display: flex;
	}
}

@media screen and (min-width:960px) {
	.contentArea.kuraberu div.yokoku p {
		font-size: 1.5rem;
		padding: 2em 4em;
	}
}

.contentArea.kuraberu div.yokoku img {
	padding: 1em;
	width: 20%;
}
.slick-dotted.slick-slider{
	height: 430px;
}
/*リニューアル予告*/

.contentArea p{
	line-height: 1.6;
	font-size: 15px;
}
.check {
	color: #FF6801;
	font-size: 20px;
	font-weight: 800;
	text-align: center;
	line-height: 1.6;
	margin-top: 20px;
}

.pcCenter{
	margin: 10px;
  	line-height: 1.6;
}

.weboc {
	background: #FDFFF3;
	margin-top: 3em;
	padding-bottom: 1.5em;
	text-align: center;
}

.ocabout {
	width: fit-content;
	color: #FF6801;
	margin: 0 auto;
	padding: 1em 40px 0;
	position: relative;
}

.ocabout:before,
.ocabout:after {
	content: '';
	position: absolute;
	top: 68%;
	display: inline-block;
	width: 54px;
	height: 2px;
	background-color: #FF6801;
	-webkit-transform: rotate(-60deg);
	transform: rotate(60deg);
}

.ocabout:before {
	transform: rotate(60deg);
}

.ocabout:after {
	transform: rotate(-60deg);
}

.ocabout:before {
	left: 0;
}

.ocabout:after {
	right: 0;
}

.point {
	background: #10649C;
	border-radius: 40px;
	color: #FFF;
	display: block;
	font-weight: 800;
	margin-bottom: 2em;
	padding: .5em 0;
	position: relative;
	text-align: center;
}

.point p {
	margin: 0;
	color: #FFF;
}

.point:after {
	border: 15px solid transparent;
	border-top: 15px solid #10649C;
	content: '';
	display: block;
	margin-left: -10px;
	left: 50%;
	position: absolute;
	top: 100%;
}

.movieBox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 572px;
	margin: 0 auto;
}

.popup_btn {
	position: absolute;
	bottom: 0;
	right: 0;
	color: #ffffff;
	background: #FF6700;
	padding: 0.75em 1em;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: nowrap;
}

.popup_btn i.startbtn {
	content: url("https://icongr.am/fontawesome/play-circle.svg?size=24&color=ffffff");
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 24px;
}

.h3title {
	background: #FF6801;
	color: #FFF;
	margin: 2em 0;
	text-align: center;
	position: relative;
}

.h3title:before {
	display: block;
	content: "";
	width: 87%;
	height: 100%;
	background: rgba(255, 255, 255, .3);
	transform: skewX(-26deg);
	position: absolute;
	top: 0;
	left: 4.5%;
	overflow: hidden;
}

h3 {
	font-size: 20px;
	font-weight: 800;
	padding: 1em 0;
	color: #fff;
	line-height: 1.5;
}

.youtubelogo {
	margin: 3em 0;
	text-align: center;
}

.youtubelogo img {
	width: 60%;
}

.listWrap {
	padding-bottom: 1em;
}



.youtubeBtn {
	background: #FDFFF3;
	padding: 1em 0 1em;
	margin: 2em 0 1em;
}

.channelLink {
	background: #FF6801;
	border-radius: 3px;
	padding: 2rem 1rem;
	margin: 2em 1em;
	position: relative;
	text-align: center;
}

.channelLink a {
	color: #FFF;
	margin: 0 1em;
}

.channelLink a:after {
	border-width: 2px 2px 0 0;
	border-style: solid;
	content: "";
	height: .4em;
	position: absolute;
	right: 30px;
	top: 46%;
	transform: rotate(45deg);
	width: .4em;
}

/*slick css*/
.movieArea {
	background: #EEFAFF;
}

.allMovie {
	position: relative;
	padding: 4em 0;
}

.allMovie-prev:before,
.allMovie-next:before {
	color: #000;
}

.schoolMovie {
	margin: 0 3em;
	box-shadow: 7px 0px 2px 0 #f0f0f0;
}
.schoolMovie img{
  object-fit: cover;
  width: 100%;
  height: auto;
}
.slick-prev,
.slick-next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 100;
	width: 1em;
	height: 1em;
	background: none;
	border: none;
	color: transparent;
	transform: translate(0, -50%) rotate(0deg);
	font-size: 30px;
}

.slick-next{
	left: auto;
	right: 0;
}

.slick-prev:before,
.slick-next::before{
	pointer-events: none;
	content: '';
	position: absolute;
	top: 0;
	width: 1em;
	height: 1em;
	border-left: solid 5px #1A4C9E;
	border-bottom: solid 5px #1A4C9E;
}

.slick-next::before{
	transform: translate(-0.1em, 0) rotate(-135deg);
  right: 30%;
}
.slick-prev::before{
	transform: translate(0.3em, 0) rotate(45deg);
  left: 30%;
}

.movieTitle {
	background: #FF6801;
	color: #FFF;
	padding: 1.5em 0;
	text-align: center;
}

.movieImg {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.movieImg iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

}

.dataLink {
	background: #FFF;
	padding: .5em 0;
	text-align: center;
}

.dataLink p {
	margin: .5em 0 1em;
}

.dataLink p.linkNone {
	margin: 1em 0 0em;
}

.schoolData {
	background: #FF6801;
	border-radius: 7px;
	padding: .7em 0;
	margin: 0 1em;
	position: relative;
}

.schoolData a {
	color: #FFF;
}

.schoolData a:after {
	border-width: 2px 2px 0 0;
	border-style: solid;
	content: "";
	height: .5em;
	margin-left: .5em;
	position: absolute;
	top: 40%;
	transform: rotate(45deg);
	width: .5em;
}

.slick-dots li.slick-active button:before {
	color: #1A4C9E;
}

.slick-dots li button::before {
	content: '●';
	font-size: 16px;
	color: gray;
	opacity: 60%;
}

.slick-dots {
	bottom: 20px;
}

/*slick css end*/

/*@media screen and (min-width:960px){
	.check{
		font-size: 2rem;
	}
	.pcCenter{
		text-align: center;
	}
	.ocabout:before,.ocabout:after {
		width: 30px;
	}
	.ocabout:before {
		left:15em;
	}
	.ocabout:after {
	right: 15em;
	}
	.point{
		font-size: 1.2rem;
		margin: 1.5em auto;
		width: 57%;
	}
	h3{
		font-size: 1.8rem;
		padding: .1em 0;
	}
	h3 p{
		font-size: 1.5rem;
	}
	.youtubelogo img {
		width: 30%;
	}
	.bestYoutube{
		display: flex;
		margin: 2em 4em;
	}
	.bestYoutube img{
		width: 60%;
	}
}*/

.movieBox a {
	display: block;
	position: relative;
}

.matomeBtn {
	background: #31a3d5;
	border-radius: 11px;
	margin: 2em 1em;
	padding: 15px;
}

.matomeLogo {
	position: relative;
}

.matomeLogo a {
	color: #FFF;
}

.matomeLogo:before {
	content: "";
	border: 7px solid transparent;
	border-left-color: transparent;
	border-left-style: solid;
	border-left-width: 7px;
	border-left: 7px solid #fff;
	display: inline-block;
	position: absolute;
	left: .5em;
	top: calc(50% - 6px);
}

.subTitle {
	background: #f7931e;
	border-radius: 1rem;
	display: inline-block;
	padding: 0 1rem;
	font-size: 15px;
	margin-left: 1.5em;
}

.mainTitle {
	font-size: 20px;
	display: block;
	margin-left: 1.2em;s
}

  
/* -------------------------
  /* for pc only
  --------------------------*/
  @media screen and (min-width: 769px) {
/* CSS Document */
p.check{
	font-size: 30px;
}
.contentArea p{
	line-height: 1.8;
}
.contentArea.kuraberu{
	margin: 0 20px;
}
.allMovie {
	margin: 0 auto;
	max-width: 850px;
}

.allMovie .slick-prev,
.allMovie .slick-next {
	left: 0;
}

.allMovie .slick-next{
	left: auto;
	right: 0;
}

.allMovie .slick-next::before{
	transform: translate(0) rotate(-135deg);
	right: 0;
}
.allMovie .slick-prev::before{
	transform: translate(0) rotate(45deg);
	left: 0;
}


.schoolMovie {
	margin: 0 2em;
}

.slick-dots {
	left: 0;
}

.slick-prev {
	left: 100px;
}

.slick-next {
	right:100px;
}

.check {
	font-size: 2rem;
}

.pcCenter {
	text-align: center;
}

.ocabout:before,
.ocabout:after {
	width: 30px;
}

.ocabout:before {
	left: 0;
}

.ocabout:after {
	right: 0;
}

.point {
	font-size: 1.5rem;
	margin: 1.5em auto;
	width: 50%;
}

h3 {
	font-size: 1.8rem;
	padding: .1em 0;
}

h3 p {
	font-size: 1.5rem;
}

.youtubelogo img {
	width: 30%;
}

.bestYoutube {
	display: flex;
	margin: 2em 4em;
}

.bestYoutube p {
	margin: 4em 0;
}

.bestYoutube img {
	width: 60%;
}

.schoolData a::after {
	top: 40%;
}

.channelLink {
	border-radius: 15px;
	margin: 0 auto;
	width: 40%;
}

.channelLink a {
	font-size: 1.2rem;
	margin: 2em;
}

.channelLink a:after {
	right: 35px;
	top: 43%;
}

.h3title:before {
	width: 93%;
	transform: skewX(-34deg);
	left: 3.5%;
}

.movieTitle {
	padding: 1em 0;
	font-size: 1.25rem;
	font-weight: 800;
}

.movieImg img {
	width: 100%;
}

.matomeBtn {
	margin: 1em auto;
	width: 40%;
}

.matomeLink a {
	font-size: 1.2rem;
}


  }