body {font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO"; letter-spacing: 0.06em;}

.bgc-virtual-yellow-lightest{background-color: #f8f4e9;}
.bgc-virtual-yellow-lightest2{background-color: #fffdf3;}
.bgc-virtual-skyblue-lightest{background-color: #f3fcff;}

.ttl_frame {
	box-shadow: 6px -6px #004097/*#078193*/;
	outline: 3.5px solid #fff;
	border: 2.5px solid #004097/*#078193*/;
}

.bg-virtual, .bg-virtual2{
	background-position: top;
	background-size: cover;
	background-repeat: no-repeat;
}

/*--------- Navigation ---------*/

.nav-bg{
	background-color: #000;
	border-radius: 50%;
	padding: 34px;
	margin: -21px;
}

.nav {
	position: fixed;
	top: 4%;
	right: 7%;
	width: 29px;
	cursor: pointer;
	z-index: 100;
	transition: opacity 0.3s ease;
}

.nav:hover {
	opacity: 0.7;
}
.nav.active .top {
	transform: translateY(11px) translateX(0) rotate(45deg);
	background: #FFF;
}
.nav.active .middle {
	opacity: 0;
	background: #FFF;
}
.nav.active .bottom {
	transform: translateY(-11px) translateX(0) rotate(-45deg);
	background: #FFF;
}
.nav span {
	background: #fff;
	border: none;
	height: 4px;
	width: 100%;
	position: absolute;
	top: 0;
	left: -1.5px;
	transition: all 0.35s ease;
	cursor: pointer;
}
.nav span:nth-of-type(2) {
	top: 11px;
}
.nav span:nth-of-type(3) {
	top: 22px;
}

.overlay {
	position: fixed;
	background: #000;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s, visibility 0.35s, height 0.35s;
	overflow: hidden;
	z-index: 2;
}
.overlay.open {
	opacity: 0.95;
	visibility: visible;
	height: 100%;
}
.overlay.open li {
	-webkit-animation: fadeInRight 0.5s ease forwards;
			animation: fadeInRight 0.5s ease forwards;
	-webkit-animation-delay: 0.35s;
			animation-delay: 0.35s;
}
.overlay.open li:nth-of-type(2) {
	-webkit-animation-delay: 0.4s;
			animation-delay: 0.4s;
}
.overlay.open li:nth-of-type(3) {
	-webkit-animation-delay: 0.45s;
			animation-delay: 0.45s;
}
.overlay.open li:nth-of-type(4) {
	-webkit-animation-delay: 0.5s;
			animation-delay: 0.5s;
}
.overlay.open li:nth-of-type(5) {
	-webkit-animation-delay: 0.55s;
			animation-delay: 0.55s;
}
.overlay.open li:nth-of-type(6) {
	-webkit-animation-delay: 0.6s;
			animation-delay: 0.6s;
}
.overlay.open li:nth-of-type(7) {
	-webkit-animation-delay: 0.65s;
			animation-delay: 0.65s;
}
.overlay nav {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	text-align: center;
}
.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	position: relative;
	height: 100%;
}
.overlay ul li {
	display: block;
	position: relative;
	opacity: 0;
}
.overlay ul li a {
	display: block;
	position: relative;
	color: #FFF;
	text-decoration: none;
	overflow: hidden;
}

@-webkit-keyframes fadeInRight {
	0% {
	opacity: 0;
	left: 20%;
	}
	100% {
	opacity: 1;
	left: 0;
	}
}

@keyframes fadeInRight {
	0% {
	opacity: 0;
	left: 20%;
	}
	100% {
	opacity: 1;
	left: 0;
	}
}

/*------- topへ戻る -------*/

/*リンクを右下に固定*/
#page-top {
	/*はじめは非表示*/
	opacity: 0;
	transform: translateY(150px);
}

/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}

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

/*　下に下がる動き　*/
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}

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

/*画像の切り替えと動き*/
#page-top a {
	/*aタグの形状*/
	display: block;
	width: 100px;
	height: 100px;
	/*color: #333;*/
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	/*font-size: 0.6rem;*/
	/*背景画像の指定*/
	background: url("../images/footer/pagetop-01.webp") no-repeat center;
	background-size: contain;
}

#page-top.floatAnime a{
	width: 100px;
	height: 130px;
	/*背景画像の指定*/
	background: url("../images/footer/pagetop-02.webp") no-repeat center;
	background-size: contain;
	/*アニメーションの指定*/
	animation: floatAnime 2s linear infinite;
	opacity: 0;
}

@keyframes floatAnime {
	0% { transform: translateX(0); opacity: 0; }
	25% { transform: translateX(-6px);opacity: 1; }
	50% { transform: translateX(0) }
	100% { transform: translateX(6px);opacity: 1; }
}

/*------- 表のヘッダー固定 -------*/

.table-wrap{
	overflow: auto;
	width: 100%;
	height: 320px;
}
.table-wrap table{
	border-spacing: 0;
	border-collapse: separate;
}
.table-wrap th{
	border-top: none;
	border-left: none;
}
.table-wrap td{
	border-top: none;
	border-left: none;
}
.table-wrap thead{
	position: sticky;
	top: 0;
	left: 0;
}

/*------- 吹き出し部分の設定 -------*/

.balloon {position: relative;}
.balloon:before {
	position: absolute;
	top: 99%;
	left: 50%;
	transform: translateX(-50%) skew(-25deg);
	height: 25px;
	width: 15px;
	border-right: 2.5px solid #333;
	background-color: white;
	content: "";
}

.balloon-v2 {position: relative;}
.balloon-v2:before {
	position: absolute;
	top: 99%;
	left: 50%;
	transform: translateX(-50%) skew(-25deg);
	height: 25px;
	width: 15px;
	border-right: 2.5px solid #2c61ab;
	background-color: white;
	content: "";
}

/*------------------ 以下　オンライン個別指導 ------------------*/

/*--------- ファーストビュー　PC---------*/

.fixed_btn { 
	position: fixed;
	bottom: 20px;
	right: 0px;
}

.fixed_banner_pc {
	width: 150px; /* バナーの横幅を指定してあげます */
}

.cta-button:hover {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

.mv {
	width: 100vw;
	height: 900px;
	background-size: cover;
	background-position: center;
	background-size: cover;
	background-position: center;
	background-image: url('../images/header/top1.jpg');
}

.mv .mv-box {
	position: relative;
	top: 75px;
	width: 60%;
	margin-bottom: 85px;
}

.hov2{
	background-color: white;
	color: black;
	transition: background-color 0.5s;
}

.hov2:hover{
	background-color: black;
	color: white;
	transition: background-color 2s;
}

/*--------- アコーディオン ---------*/

.accordion__summary {
	position: relative;
	display: block;
	cursor: pointer;
	padding: 3px;
}
.accordion__summary::after {
	content: "+";
	color: #fff;
	font-size: 1.5em; /* 記号のサイズ */
	position: absolute;
	right: 16px;
	top: 47%;
	transform: translateY(-50%);
}
.accordion input:checked ~ .accordion__summary::after {
	content: "−";
}
.accordion input {
	display: none;
}
.accordion__detail {
	display: none;
}
.accordion input:checked ~ .accordion__detail {
	display: block;
}

/*--------- SP---------*/

@media screen and (max-width: 1079px) {
	.mv{
		width: 100%;
		height: 1100px;
		background-size: cover;
		background-position: top;
		background-position: center;
		background-image: url('../images/header/top-sp.webp');
	}
}

@media screen and (max-width: 767px) {
	.mv{
		width: 100%;
		height: 700px;
	}
	.accordion__summary::after {
		position: absolute;
		right: 7px;
		top: 47%;
	}
}