@charset "UTF-8";


@media screen and (min-width : 960px){


	/* -------------------------------------------------------------------------------------------
	*
	* アクティビティ
	*
	* ----------------------------------------------------------------------------------------- */

	#activity{
		padding: 5.75rem 0 0 0;
	}

	#activity section.mainVisual{
		/*margin: 0 -41px;*/
	}
	#activity section.mainVisual h3{
		font-size: 2rem;
		text-align: center;
		line-height: 1;
		margin: 0 0 5rem 0;
	}

	#activity div.tagList{
		/*margin: 3rem -41px 3rem -41px;*/
		margin: 3rem 0;
		line-height: 1;
		-webkit-transition-delay: 0.2s;transition-delay: 0.2s;
	}

	#activity div.tagList h4{
		margin: 0 0 1rem 0;
		line-height: 1;
		}
	#activity div.tagList h4 p{
		display: inline-block;
		vertical-align: top;
		font-size: 1.3125rem;
		padding: 0 0 0.125rem 0;
		border-bottom: 2px solid #cccccc;
	}

	#activity div.tagList ul{
		line-height: 1;
	}
	#activity div.tagList ul li{
		display: inline-block;
		vertical-align: top;
		margin: 0 0.5rem 0.6rem 0;
		line-height: 0.7;
		}
		body.js_isIe #activity div.tagList ul li{
			margin: 0 1rem 0.8rem 0;
		}

	#activity div.tagList ul li a{
		font-size: 0.75rem;
		background: linear-gradient(transparent 0%, #ededed 0%);
		line-height: 1.1;
		width: 100%;
		padding: 0.06rem 0.1rem 0 0.1rem;
		/*display: inline-block;*/
		vertical-align: top;
		word-break: break-all;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		}
		body.js_isIe #activity div.tagList ul li a{
			line-height: 0.9;
			padding: 0.1rem 0.1rem 0 0.1rem;
		}
		#activity div.tagList ul li.active{
			background-color: #ffff00;
		}
		#activity div.tagList ul li a::before{
			content: '#';
			display: inline;
		}
		#activity div.tagList ul li a:hover{
			background-color: #ffff00;
		}
		#activity div.tagList ul.main li a{
			background: linear-gradient(transparent 0%, #000000 0%);
			color: #ffffff;
		}
		#activity div.tagList ul li a:hover{
			background: linear-gradient(transparent 0%, #ffff00 0%);
		}
		#activity div.tagList ul.main li a:hover{
			color: #000000;
		}



	#activity div.intro{
		text-align: center;
		margin: 6.25rem auto 5rem auto;
	}
	#activity div.intro p.title{
		font-size: 2.625rem;
		line-height: 1.4;
		letter-spacing: 0.3rem;
	}
	#activity div.intro p.date{
		margin: 1.25rem 0 0 0;
		line-height: 1;
		font-size: 1.4375rem;
		font-weight: 300;
		color: #b3b3b3;
	}

	#activity section.contents{
		max-width: 870px;
		margin: 0 auto 6.25rem auto;
	}

	#activity section.contents h4{
		font-size: 1.5rem;
		line-height: 1.4;
		margin: 0 0 2.5rem 0;
		padding: 0 0 2.5rem 0;
		position: relative;
		}
		#activity section.contents h4::after{
			content: '';
			display: block;
			width: 1.875rem;
			height: 2px;
			background-color: #cccccc;
			position: absolute;
			bottom: 0; left: 0;
		}

	#activity section.contents div.textArea{
		font-size: 1rem;
		line-height: 1.6;
		/*margin: 1.375rem 0 0 0;*/
		}
		#activity section.contents div.textArea:nth-of-type(n+2){
			margin: 3.75rem 0 0 0;
		}
	#activity section.contents div.textArea strong{
		font-size: 1.125rem;
		font-weight: 600;
		line-height: 1.6;
		display: inline-block;
		vertical-align: top;
		margin: 0 0 1.375rem 0;
	}

	#activity section.contents div.textArea a{
		position: relative;
		/*font-size: 0.8125rem;*/
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		display: inline-block;
		vertical-align: top;
		}
		#activity section.contents div.textArea a::before{
			content: '';
			width: 100%;
			height: 100%;
			background-color: #ffff00;
			position: absolute;
			top: 0; bottom: 0; left: 0;
			z-index: -1;
			transform: scale(0, 1);
			transform-origin: left top;
			-webkit-transition: all 0.3s;
			transition: all 0.3s;
		}
		#activity section.contents div.textArea a:hover::before{
			transform: scale(1, 1);
		}


	#activity section div.photo{
		text-align: center;
		}
		#activity section.contents div.photo{
			margin: 0 0 3.75rem 0;
		}
	#activity section div.photo p.img{
		overflow: hidden;
		height: 58vw;
		max-height: 39.875rem;
		}
		#activity section.contents div.photo p.img{
			height: 46.75vw;
			max-height: 34rem;
		}

	#activity section div.photo p.img img{
		display: inline-block;
		vertical-align: top;
		width: auto;
		max-width: 100%;
		height: 100%;
		}
		#activity section.mainVisual div.photo p.img img{
			width: 100%;
			height: auto;
		}

	#activity section div.photo p.text{
		/*font-size: 0.8125rem;*/
		font-size: 0.75rem;
		text-align: left;
		line-height: 1.8;
		margin: 1rem 0 0 0;
		color: #666666;
	}

	#activity section div.movie{
		text-align: center;
		position: relative;
		width: 100%;
		padding-top: 56%;
		margin: 0 0 3.75rem 0;
	}
	#activity section div.movie iframe{
		position: absolute;
		top: 0; right: 0; left: 0;
		width: 100%;
		height: 100%;
	}


	/* -------------------------------------------------------------------------------------------
	*
	* ページャー
	*
	* ----------------------------------------------------------------------------------------- */

	#pager{
		position: relative;
		text-align: center;
		padding: 7.5rem 0;
	}
	#pager div.inner{
		width: 90vw;
		max-width: 870px; 
	}
	#pager div.inner div{
		position: absolute;
		top: 0.5rem;
		height: 0.0625rem;
		width: 3rem;
		cursor: pointer;
		background-color: #000000;
		text-decoration: none;
		}
		#pager div.inner div.prevBtn{
			left: 0;
		}
		#pager div.inner div.nextBtn{
			right: 0;
		}

	#pager div.inner div p {
		text-align: end;
		font-size: 0.75rem;
		position: absolute;
		bottom: 0;
		margin: auto;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		}
		#pager div.inner div.prevBtn p {
			top: -0.25rem; right: -3.5rem;
			padding: 0 0.1rem 0 0.2rem;
		}
		#pager div.inner div.nextBtn p {
			top: -0.25rem; left: -3.5rem;
			padding: 0 0.1rem 0 0.2rem;
		}
		#pager div.inner div p::before{
			content: '';
			width: 100%;
			height: 0.6rem;
			background-color: #ffff00;
			position: absolute;
			top: 0; bottom: 0; left: 0;
			z-index: -1;
			transform: scale(0, 1);
			transform-origin: left top;
			-webkit-transition: all 0.3s;
			transition: all 0.3s;
		}
	#pager div.inner div:hover p{
		color: #000000;
		}
		#pager div.inner div:hover p::before{
			transform: scale(1, 1);
		}


	#pager div.inner div span {
		position: absolute;
		top: -3px;
		display: block;
		width: 7px;
		height: 7px;
		background-image: url(../img/common/circle_black.svg);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;
		}
		#pager div.inner div.prevBtn span {
			right: 15%;
		}
		#pager div.inner div.prevBtn:hover span {
			-webkit-animation: 2s dotMoveL infinite;
			animation: 2s dotMoveL infinite;
		}
		#pager div.inner div.nextBtn span {
			left: 15%;
		}
		#pager div.inner div.nextBtn:hover span {
			-webkit-animation: 2s dotMoveR infinite;
			animation: 2s dotMoveR infinite;
		}


	#pager div.inner ul {
		display: inline-block;
		vertical-align: top;
		margin: -0.15rem 0 0 0;
		line-height: 1;
	}
	#pager div.inner ul li{
		display: inline-block;
		vertical-align: top;
		}
		#pager div.inner ul li:nth-of-type(n+2){
		}
	#pager div.inner ul li.dot{
		width: 1.8rem;
		height: 1.8rem;
		background-image: url(../img/common/pager_dot.svg);background-repeat: no-repeat;background-position: 50% 58%;background-size: 100% auto;
	}

	#pager div.inner ul li a{
		color: #999999;
		font-size: 1rem;
		padding: 0.5rem 1rem;
		}
		#pager div.inner ul li.active a{
			color: #000000;
		}
		#pager div.inner ul li.dot a{
			font-size: 0;
		}


	/* -------------------------------------------------------------------------------------------
	*
	* リンク
	*
	* ----------------------------------------------------------------------------------------- */

	div.link{
		max-width: 900px;
		margin: 0 auto;
		text-align: left;
		position: relative;
		}
/*
		div.link.classroom::before{
			content: '';
			display: inline-block;
			vertical-align: middle;
			width: 6rem;
			height: 5rem;
			background-image: url(../img/common/logo_classroom.png);background-repeat: no-repeat;background-position: top center;background-size: 100% auto;
		}
*/
	div.link img{
		display: inline-block;
		vertical-align: middle;
		width: auto;
		height: 5.25rem;
	}

	div.link a{
		display: inline-block;
		vertical-align: middle;
		padding: 0 1.5rem 0.125rem 0;
		margin: 0 0 0 0.9375rem;
		border-bottom: 1px solid #000000;
		position: relative;
		overflow: hidden;
		}
		div.link a::after{
			content: '';
			display: block;
			width: 1rem;
			height: 1px;
			background-color: #000000;
			position: absolute;
			right: -0.4rem; bottom: 0;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
		}
	div.link a span{
		font-size: 1.125rem;
	}





}@media screen and (max-width : 959px){


	/* -------------------------------------------------------------------------------------------
	*
	* アクティビティ
	*
	* ----------------------------------------------------------------------------------------- */

	#activity{
		padding: 3.125rem 0 0 0;
	}

	#activity div.inner{
		width: 95%;
	}

	#activity section.mainVisual{
	}
	#activity section.mainVisual h3{
		font-size: 1.5rem;
		text-align: center;
		line-height: 1;
		margin: 0 0 2.5rem 0;
	}

	#activity div.tagList{
		margin: 2.4rem 0 2.4rem 0;
		line-height: 1;
		-webkit-transition-delay: 0.2s;transition-delay: 0.2s;
	}

	#activity div.tagList h4{
		margin: 0 0 1rem 0;
		line-height: 1;
	}
	#activity div.tagList h4 p{
		display: inline-block;
		vertical-align: top;
		font-size: 1.3125rem;
		padding: 0 0 0.125rem 0;
		border-bottom: 2px solid #cccccc;
	}

	#activity div.tagList ul.main{
		/*margin: 0 0 0.75rem 0;*/
	}
	#activity div.tagList ul li{
		display: inline-block;
		vertical-align: top;
		margin: 0 0.3rem 0.6rem 0;
		line-height: 0.7;
	}
	#activity div.tagList ul li a{
		font-size: 0.6875rem;
		background: linear-gradient(transparent 0%, #ededed 0%);
		line-height: 0.5;
		padding: 0.1rem 0.1rem 0 0.1rem;
		font-weight: 300;
		word-break: break-all;
		}
		#activity div.tagList ul li a::before{
			content: '#';
			display: inline;
		}
		#activity div.tagList ul li a:hover{
			background: linear-gradient(transparent 0%, #ffff00 0%);
		}
		#activity div.tagList ul.main li a{
			background: linear-gradient(transparent 0%, #000000 0%);
			color: #ffffff;
		}
		#activity div.tagList ul.main li a:hover{
			color: #000000;
		}


	#activity div.intro{
		text-align: left;
		margin: 3.125rem auto;
		max-width: 90%;
	}
	#activity div.intro p.title{
		font-size: 1.375rem;
		line-height: 1.6;
		letter-spacing: 0.2rem;
	}
	#activity div.intro p.date{
		margin: 0.75rem 0 0 0;
		line-height: 1;
		font-size: 1.125rem;
		font-weight: 300;
		color: #b3b3b3;
	}

	#activity section.contents{
		max-width: 86vw;
		margin: 0 auto 2.5rem auto;
	}

	#activity section.contents h4{
		/*font-size: 1.125rem;*/
		font-size: 1.25rem;
		line-height: 1.6;
		margin: 0 0 1.75rem 0;
		padding: 0 0 1.75rem 0;
		position: relative;
		}
		#activity section.contents h4::after{
			content: '';
			display: block;
			width: 1.125rem;
			height: 2px;
			background-color: #cccccc;
			position: absolute;
			bottom: 0; left: 0;
		}

	#activity section.contents div.textArea{
		font-size: 0.8125rem;
		line-height: 1.8;
		/*margin: 0.8125rem 0 0 0;*/
		}
		#activity section.contents div.textArea:nth-of-type(n+2){
			margin: 2rem 0 0 0;
		}
	#activity section.contents div.textArea strong{
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.6;
		display: inline-block;
		vertical-align: top;
		margin: 0 0 0.8125rem 0;
	}

	#activity section.contents div.textArea a{
		position: relative;
		/*font-size: 0.75rem;*/
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		}
		#activity section.contents div.textArea a::before{
			content: '';
			width: 100%;
			height: 100%;
			background-color: #ffff00;
			position: absolute;
			top: 0; bottom: 0; left: 0;
			z-index: -1;
			transform: scale(0, 1);
			transform-origin: left top;
			-webkit-transition: all 0.3s;
			transition: all 0.3s;
		}
		#activity section.contents div.textArea a:hover::before{
			transform: scale(1, 1);
		}

	#activity section div.photo{
		text-align: center;
		}
		#activity section.contents div.photo{
			margin: 0 0 2.5rem 0;
		}

	#activity section div.photo p.img{
		overflow: hidden;
		height: 59vw;
		}
		#activity section.contents div.photo p.img{
			height: 53vw;
			max-height: 53vw;
		}

	#activity section.contents div.photo p.img img{
		display: inline-block;
		vertical-align: top;
		width: auto;
		height: 100%;
	}
	#activity section div.photo p.text{
		font-size: 0.6875rem;
		text-align: left;
		line-height: 1.8;
		margin: 0.5rem 0 0 0;
		color: #666666;
	}

	#activity section div.movie{
		text-align: center;
		position: relative;
		width: 100%;
		padding-top: 56%;
		margin: 0 0 2rem 0;
	}
	#activity section div.movie iframe{
		position: absolute;
		top: 0; right: 0; left: 0;
		width: 100%;
		height: 100%;
	}


	/* -------------------------------------------------------------------------------------------
	*
	* ページャー
	*
	* ----------------------------------------------------------------------------------------- */

	#pager{
		position: relative;
		text-align: center;
		padding: 5rem 0 4rem 0;
	}
	#pager div.inner{
	}
	#pager div.inner div{
		position: absolute;
		top: 0.5rem;
		height: 0.0625rem;
		width: 3rem;
		cursor: pointer;
		background-color: #000000;
		text-decoration: none;
		}
		#pager div.inner div.prevBtn{
			left: 0;
		}
		#pager div.inner div.nextBtn{
			right: 0;
		}

	#pager div.inner div p {
		text-align: end;
		font-size: 0.75rem;
		position: absolute;
		top: -0.25rem; bottom: 0;
		padding: 0 0.1rem 0 0.2rem;
		margin: auto;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		}
		#pager div.inner div.prevBtn p {
			right: -3.5rem;
		}
		#pager div.inner div.nextBtn p {
			left: -3.5rem;
		}
		#pager div.inner div p::before{
			content: '';
			width: 100%;
			height: 0.6rem;
			background-color: #ffff00;
			position: absolute;
			top: 0; bottom: 0; left: 0;
			z-index: -1;
			transform: scale(0, 1);
			transform-origin: left top;
			-webkit-transition: all 0.3s;
			transition: all 0.3s;
		}
	#pager div.inner div:hover p{
		color: #000000;
		}
		#pager div.inner div:hover p::before{
			transform: scale(1, 1);
		}


	#pager div.inner div span {
		position: absolute;
		top: -3px;
		display: block;
		width: 7px;
		height: 7px;
		background-image: url(../img/common/circle_black.svg);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;
		}
		#pager div.inner div.prevBtn span {
			/*right: 15%;*/
			/*-webkit-animation: 2s dotMoveL infinite;*/
			/*animation: 2s dotMoveL infinite;*/
			left: 15%;
		}
		#pager div.inner div.nextBtn span {
			/*left: 15%;*/
			/*-webkit-animation: 2s dotMoveR infinite;*/
			/*animation: 2s dotMoveR infinite;*/
			right: 15%;
		}


	#pager div.inner ul {
		display: inline-block;
		vertical-align: top;
		margin: -0.05rem 0 0 0;
	}
	#pager div.inner ul li{
		display: inline-block;
		vertical-align: top;
		font-size: 0.8125rem;
		}
		#pager div.inner ul li:nth-of-type(n+2){
			margin: 0 0 0 1.25rem;
		}
		#pager div.inner ul li.pc{
			display: none;
		}

	#pager div.inner ul li.dot{
		width: 1.8rem;
		height: 1.8rem;
		background-image: url(../img/common/pager_dot.svg);background-repeat: no-repeat;background-position: 50% 35%;background-size: 100% auto;
	}


	#pager div.inner ul li a{
		color: #999999;
		}
		#pager div.inner ul li.active a{
			color: #000000;
		}
		#pager div.inner ul li.dot a{
			font-size: 0;
		}



	/* -------------------------------------------------------------------------------------------
	*
	* リンク
	*
	* ----------------------------------------------------------------------------------------- */

	div.link{
		/*max-width: 84%;*/
		max-width: 96%;
		margin: 0 auto;
		text-align: left;
		position: relative;
		}
/*
		div.link.classroom::before{
			content: '';
			display: inline-block;
			vertical-align: middle;
			width: 5rem;
			height: 4rem;
			background-image: url(../img/common/logo_classroom.png);background-repeat: no-repeat;background-position: top center;background-size: 100% auto;
		}
*/

	div.link img{
		display: inline-block;
		vertical-align: middle;
		width: 5rem;
		height: auto;
	}

	div.link a{
		display: inline-block;
		vertical-align: middle;
		padding: 0 1.5rem 0.125rem 0;
		margin: 0 0 0 0.75rem;
		border-bottom: 1px solid #000000;
		position: relative;
		overflow: hidden;
		}
		div.link a::after{
			content: '';
			display: block;
			width: 1rem;
			height: 1px;
			background-color: #000000;
			position: absolute;
			right: -0.4rem; bottom: 0;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
		}
	div.link a span{
		font-size: 0.8125rem;
	}

}