@charset "utf-8";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/

/* モバイルレイアウト : 480 px およびそれ以下. */
.juku{
background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
	border-radius:15px;
	margin:30px 20px;
	padding :10px;
	font-size:18px;
}

.studyway{
	font-size:20px;
	background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);
	border-radius:15px;
	margin:20px 0;
	padding:0px;
	text-align:center;
	color:#000;
	box-sizing:border-box
}
a  {
    text-decoration:none; 
}
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(-20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


.subtitle{
	font-size:36px;
	text-align:center;
	opacity:0;
	animation-name: subfadein;
	animation-delay:0.5s;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
}

@keyframes subfadein {
from {
	
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

.subsub{
	font-size:24px;
	opacity:0;
	animation-name: subsubin;
	animation-delay:1.3s;
	animation-duration:0.3s;
	animation-fill-mode:forwards;
}

@keyframes subsubin {
from {	
    opacity: 0;
    transform: translateX(20px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

.txt01 {animation-delay: 1.3s;}
.txt02 {animation-delay: 1.6s;}
.txt03 {animation-delay: 1.9s;}

.title2{
	font-size:20px;
}

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}

.title1{
	font-size:0px;
	text-align:center;
	opacity:0;
	animation-name: fadein;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}

.titlemain{
	display:none;
}

#header {
	border-color: #855199;
	clear: both;
	float: left;
	margin-top:5px;
	margin-bottom:5px;
	background-image:url(/web/20230126122112im_/http://gakumonsanpo.com/img/bgtop-web.png);
	padding:20px 0;
	border-radius:10px
}

#main {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#about {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#footer {
	color:#FFF;
	background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
	clear: both;
	float: left;
	margin-left: 0;
	padding:10px;
	width: 100%;
	display: block;
	box-sizing:border-box;
	border-radius:15px;
}

#engl {
	clear: both;
	float: left;
	margin-left: 0;
	padding-left:20px;
	width: 100%;
	display: block;
	background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
	box-sizing:border-box;
	margin-bottom:15px;
	border-radius:15px;
}
#math {
	color:#FFF;
	clear: none;
	float: left;
	padding-left:20px;
	width: 100%;
	display: block;
	background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
	box-sizing:border-box;
	margin-bottom:15px;
	border-radius:15px;
}

#soci {
	color:#FFF;
	clear: none;
	float: left;
	padding-left:20px;
	width: 100%;
	display: block;
	background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
	box-sizing:border-box;
	border-radius:15px;
}

#eng {
	display: none;
}
#mat {
	display: none;
}
#soc {
	display: none;
}

#randompage {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#pc {
	display: none;
}

#studyway {
	margin-top:20px 0;
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.forpc{
	display:none
}
.forsm{
	display:block
}
.buttonexam a{
	overflow:hidden;
  position: relative;
  display: inline-block;
  color: #333;
  padding:3vh 10%;
  text-align: center;
  text-decoration: none;
  transition: .4s;
  margin:0;
}
.buttonexam a:hover {
  color: #fff !important;
}
.buttonexam a:before,
.buttonexam a:after {
  position: absolute;
  top: 0;
  z-index: -1;
  content: '';
  width: 60%;
  height: 100%;
  background: #333;
  transform:skewX(-35deg) scale(0, 1);
  transition: transform .4s;
}

.buttonexam a:before {
  left: 0;
  transform-origin: left top;
}

.buttonexam a:after {
  right: 0;
  transform-origin: right bottom;
}

.buttonexam a:hover:before,
.buttonexam a:hover:after {
  transform:skewX(-35deg) scale(1, 1);
}


/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {
/*.buttonexam {
  position: relative;
  display: inline-block;
  color: #333;
  padding:3vh 10%;
  text-align: center;
  text-decoration: none;
  transition: .3s;
  margin:0 0 0 10% ;
}*/
.forpc{
	display:block
}
.forsm{
	display:none
}

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}
.title1{
	font-size:0px;
	text-align:center;
	opacity:0;
	animation-name: fadein;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}

#soci {
	margin-left:auto;
	margin-right:auto;
	color:#FFF;
	clear: none;
	float: left;
	padding: 20px;
	width: 100%;
	display: block;
	background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
	box-sizing:border-box;
}
#engl {
	margin-left:auto;
	margin-right:auto;
	clear: none;
	float: left;
	padding: 20px;
	width: 100%;
	display: block;
	background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
	box-sizing:border-box;
}

#math {
	margin-left:auto;
	margin-right:auto;
	color:#FFF;
	clear: none;
	float: left;
	padding: 20px;
	width: 100%;
	display: block;
	background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
	box-sizing:border-box;
}

#header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#main {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#about {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer {
	clear: both;
	float: left;
	padding-left:20px;
	margin-left: 0;
	width: 100%;
	display: block;
	box-sizing:border-box;
}

#eng {
	display: none;
}
#mat {
	display: none;
}
#soc {
	display: none;
}

#randompage {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#pc {
	display: none;
}

#studyway {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
}

/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

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

.forpc{
	display:block;
}
.forsm{
	display:none;
}

.titlemain{
	display:block;
	font-size:0;
	opacity:0;
	animation-name: fadein;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	position:absolute;
	z-index: 1;
}

.pc{
	position:relative;
}

#header{
	display:none;
}

#pchead{
	border-color: #855199;
	clear: both;
	width:100%;
	margin-bottom:5px;
	background-image:
	url(/web/20230126122112im_/http://gakumonsanpo.com/img/bgtop-web.png) none;
}

#sm{
	display:none;
}
#pc{
	display:block;
}


#soci{
	display: none;
	}
#engl{
	display: none;
	}
#math{
	display: none;
	}

a{
	text-decoration: none;
}

@-webkit-keyframes about-3{
	0% {

		left: 0;
		right: auto;
		width: 0;
	}

	50% {
		left: 0;
		right: auto;
		width: 100%;
	}
	51% {
		left: auto;
		right: 0;
		width: 100%;
	}
	100% {
		left: auto;
		right: 0;
		width: 0;
	}
}
@keyframes about-3{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}
@-webkit-keyframes about-4{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes about-4{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}
#studyway{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	}
.about .about-2 {
	display: block;
	text-align: left;
}
.about .about-3 {
	position: relative;
	display: inline-block;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.about .about-3:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #66F;
}
.about .about-4 {
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.about.title .about-3:before {
	-webkit-animation: about-3 0.8s ease 2.2s 1 normal forwards;
	animation: about-3 0.8s ease 2.2s 1 normal forwards;
}
.about.title .about-4 {
	-webkit-animation: about-4 0.8s ease 2.2s 1 normal forwards;
	animation:about-4 0.8s ease 2.2s 1 normal forwards;
}

.fadeabout{
	opacity:0;
	animation: fadeabout 0.8s ease 2.8s 1 forwards;
}

@keyframes fadeabout{
	0%{
		opacity:0;
		transform:translateY(-20px);
	}
	100%{
		opacity:1;
		transform:translateY(0);
	}
}

..gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
}



@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(-20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

.subtitle{
	font-size:36px;
	text-align:center;
	opacity:0;
	animation-name: subfadein;
	animation-delay:0.5s;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
}

@keyframes subfadein {
from {
	
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


.subsub{
	font-size:24px;
	opacity:0;
	animation-name: subsubin;
	animation-delay:1.3s;
	animation-duration:0.3s;
	animation-fill-mode:forwards;
}

@keyframes subsubin {
from {	
    opacity: 0;
    transform: translateX(20px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

.txt01 {animation-delay: 1.3s;}
.txt02 {animation-delay: 1.6s;}

.title2{
	font-size:20px;
}

.item1 {
  align-self: flex-stretch;
 }

.container {
  display: flex;
}

.maintitle {
	word-break: keep-all;
	color:#000;
    background-color:
	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
	padding:20px 0;
    }

.maintitle:hover {
	color:#000;
    background-color: #0FF;
	border-radius: 20px;
	padding:20px 35%;
    }
	
.titleline {
  display: block;
  padding: 0 0 5px;
  position: relative;
  text-decoration: none;
}

.titleline::after {
  border-bottom: solid 2px#F60;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  width: 0;
}

.titleline:hover::after {
  width: 100%;
}


.maintitle2 {
	word-break: keep-all;
	color:#000;
    background-color:;
	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
	padding:20px 0;
    }

.maintitle2:hover {
	color:#FFF;
    background-color: #60F;
	border-radius: 20px;
	padding:20px 35%;
    }

.titleline2 {
  display: block;
  padding: 0 0 5px;
  position: relative;
  text-decoration: none;
}

.titleline2::after {
  border-bottom: solid 2px #CF0;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  width: 0;
}

.titleline2:hover::after {
  width: 100%;
}

.maintitle3 {
	word-break: keep-all;
	color:#000;
    background-color:;
	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
	padding:20px 0;
    }

.maintitle3:hover {
	color:#000;
    background-color: #399;
	border-radius: 20px;
	padding:20px 35%;
}

.titleline3 {
  display: block;
  padding: 0 0 5px;
  position: relative;
  text-decoration: none;
}

.titleline3::after {
  border-bottom: solid 2px #3FF;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  width: 0;
}

.titleline3:hover::after {
  width: 100%;
}


.titleline4 {
  display: block;
  padding: 0 0 5px;
  position: relative;
  text-decoration: none;
}

/*.titleline4::before{
	  border-bottom: solid 2px #EA00EA;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  transform-origin:center;
  width: 0;
}
.titleline4:hover::before{
	width:0;
}*/

.titleline4::after {
  border-bottom: solid 2px #EA00EA;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  transition: all .5s ease;
  -webkit-transition: all .4s ease;
  transform-origin:center;
  width:0%;
}

.titleline4:hover::after {
  width: 100%;
}


#eng{
	clear: both;
	float: left;
	padding: 0 20px;
	margin-left: 0;
	width: 32.2033%;
	display: block;
	background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
	border-radius:15px;
}


#mat{
	color:#FFF;
	clear: none;
	float: left;
	padding: 0 20px;
	margin-left: 1.6949%;
	width: 32.2033%;
	display: block;
	background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
	border-radius:15px;
}

#soc{
	color:#FFF;
	clear: none;
	float: left;
	padding: 0 20px;
	margin-left: 1.6949%;
	width: 32.2033%;
	display: block;
	background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
	border-radius:15px;
}

#randompage{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#contact{
	clear: both;
	float: left;
	margin-left: 0;
	width: 40.6779%;
	display: block;
}

#contact2{
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 57.6271%;
	display: block;
}

#main {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#about {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-image: linear-gradient(to top, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%);
}

.fade{
	opacity:0;
	animation:fade 0.8s ease 1.9s 1 forwards;
}

@keyframes fade{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}

#footer {
	color:#FFF;
	background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
	clear: both;
	float: left;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	margin-left: 0;
	width: 100%;
	display: block;
	border-radius:15px;
}
.fadeslide{
	opacity:0;
	animation: fadeslide 0.8s ease 3s 1 forwards;
}
@keyframes fadeslide{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
}

/*
     FILE ARCHIVED ON 12:21:12 Jan 26, 2023 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 11:59:46 Nov 28, 2023.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 153.818
  exclusion.robots: 0.084
  exclusion.robots.policy: 0.074
  cdx.remote: 0.07
  esindex: 0.009
  LoadShardBlock: 97.97 (3)
  PetaboxLoader3.datanode: 69.155 (4)
  PetaboxLoader3.resolve: 86.569 (2)
  load_resource: 61.689
*/