@charset "utf-8";


.course-title h1{
	margin-top: 5%;
	color: #003366;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-size: 35px;
	align-items: center;
	text-align: center;
}

/* mobile devices */
@media (max-width: 767px) {

	.course-title h1{
		margin-top: 8%;
		margin-bottom: 5%;
		color: #003366;
		font-family: 'Inter';
		font-style: normal;
		font-weight: 700;
		font-size: 5vw;
		align-items: center;
		text-align: center;
	}
}


.course-banner {
	margin-top: 2%;
	position: relative;
	z-index: 10;
	font-family: serif;
}

.course-banner-2 {
	position: relative;
	z-index: 10;
}



.course-header {
	text-align: center;
}

.course-header h2{
	margin-top: 3%;
	color: #003366;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-size: 3.5vw;
	align-items: center;
	text-align: center;
	margin-bottom: 5%;
}



/* mobile devices */
@media (max-width: 767px) {

	.course-header {
		text-align: center;
	}

	.course-header h2{
		margin-top: 5%;
		color: #003366;
		font-family: 'Inter';
		font-style: normal;
		font-weight: 700;
		font-size: 4.8vw;
		align-items: center;
		text-align: center;
		line-height: 2rem;
	}	

}



.text-on-banner p {
	position: absolute;
	left: 15%;
	top: 20%;
	font-size: 2vw;
	color: #ffffff;
	line-height: 150%;
}

.text-on-banner p:nth-child(2)  {
	position: absolute;
	left: 15%;
	top: 30%;
	font-size: 3vw;
	color: #ffffff;
	line-height: 150%;
	border-bottom:1px solid;
	border-bottom-color:#EAC36A;
}

.text-on-banner p:nth-child(3)  {
	position: absolute;
	left: 15%;
	top: 48%;
	font-size: 2vw;
	color: #ffffff;
	line-height: 150%;
}



/* mobile devices */
@media (max-width: 767px) {

	.text-on-banner p {
	position: absolute;
	left: 5%;
	top: 10%;
	font-size: 3vw;
	color: #ffffff;
	line-height: 150%;
	}

	.text-on-banner p:nth-child(2)  {
		position: absolute;
		left: 5%;
		top: 25%;
		font-size: 4vw;
		color: #ffffff;
		line-height: 150%;
		border-bottom:1px solid;
		border-bottom-color:#EAC36A;
	}

	.text-on-banner p:nth-child(3)  {
		position: absolute;
		left: 5%;
		top: 48%;
		font-size: 3vw;
		color: #ffffff;
		line-height: 150%;
	}


}




/* 問い合わせボタン */

.button-inquiry {
	margin-top: 3%;
	margin-bottom: 10%;
	display: flex;
}

.button-inquiry a {
	/**display: inline-block;**/
    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
    padding: 1vw 0;
    width: 45%;
    font-size: 3.5vw;
    font-weight: 800;
    color: #fff;
    text-align: center;
    background-color: #003366;
    border-radius: 10vw;
    border: double 10px #fff;
}


/* mobile devices */
@media (max-width: 767px) {
	.button-inquiry {
		margin-top: 6%;
		display: flex;
	}

	.button-inquiry a {
	/**display: inline-block;**/
    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
    padding: 5vw 0;
    width: 50%;
    font-size: 5vw;
    font-weight: 600;
    color: #fff;
    text-align: center;
    background-color: #003366;
    border-radius: 10vw;
    border: double 5px #fff;
	}
}


.button-inquiry a:nth-child(2) {
  background-color: #EAC36A;
}





/* h3見出し */

.course-header h3 {
	margin-top: 3%;
	color: #003366;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-size: 35px;
	align-items: center;
	text-align: center;
  position: relative;
}

.course-header h3::before{
	content:"";
    display:inline-block;
    width: 10px;
    height: 60px;
    background-color: #EAC36A;
    position: absolute;
    margin-left: -35px;
    top: -10px;
}

/* mobile devices */
@media (max-width: 767px) {
	.course-header h3 {
	margin-top: 15%;
	color: #003366;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-size: 5vw;
	align-items: center;
	text-align: center;
    position: relative;
	}

	.course-header h3::before{
	content:"";
    display:inline-block;
    width: 10px;
    height: 30px;
    background-color: #EAC36A;
    position: absolute;
    margin-left: -25px;
    top: -5px;
	}

	.course-banner-sp{
		display: flex;
	    justify-content: center;
	    align-items: center;
	    margin: 9px auto;
	    /*width: 55%;*/
	    margin-top: 10%;
	    margin-left: 5%;
	    margin-right: 5%;
	}
}






/* 2カラム */

.two-column-body {
	position: relative;
	/**display: flex;**/
	background-color: #ffffff;
	z-index: 1;
}

.two-column-background-grey {
	position: absolute;
	top: 53%;
    display:inline-block;
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    z-index: 1;
}

/** 2カラム + アニメーション **/
/*
.animation-up {
	opacity: 0;
	transition: all 1s ease;
	margin-top: 200px;
}
*/

.two-column-image-left {
	display: flex;
	position: relative;
	transform:translateY(50%);
	opacity:0;
	z-index: 3;
}

.huwa {
	animation:huwa 1s ease-out forwards;
	z-index: 3;
	}
@keyframes huwa {
	to {
		transform:initial;
		opacity:1;
	}
}

.two-column-image-left img {
	width: 45%;
    margin-left: 5%;
    margin-top: 5%;
    z-index: 2;
}


.two-column-h3{
	position: relative;
	width: 50%;
    z-index: 2;
}

.two-column-image-left h3 {
	/**width: 45%;**/
    margin-left: 10%;
    margin-top: 15%;
    /**margin-right: 10%;**/
    font-size: 2.5vw;
    font-family: serif;
    font-weight: bold;
    line-height: 4vw;
}



.two-column-text-right {
	position: absolute;
    left: 10%;
    /**bottom: 0%;**/
    width: 80%;
}

.two-column-text-right p {
    font-size: 1.5vw;
    font-family: serif;
    width: 75%;
    line-height: 2.5vw;
}


.two-column-text-right-full {
	position: absolute;
    left: 10%;
    /**bottom: 0%;**/
    width: 90%;
}

.two-column-text-right-full p {
    font-size: 1.5vw;
    font-family: serif;
    width: 90%;
    line-height: 2.5vw;
}


/** 2カラム-2 + アニメーション **/
.two-column-image-right {
	display: flex;
	position: relative;
	transform:translateY(50%);
	opacity:0;
	z-index: 2;
}

.huwa {
	animation:huwa 1s ease-out forwards;
	z-index: 2;
	}
@keyframes huwa {
	to {
		transform:initial;
		opacity:1;
	}
}

.two-column-image-right img {
	width: 45%;
    margin-left: 5%;
    margin-top: 5%;
    margin-right: 5%;
    z-index: 2;
}

.two-column-image-right h3 {
	/**width: 40%;**/
    margin-left: 30%;
    margin-top: 15%;
    margin-right: 10%;
    font-size: 2.5vw;
    font-family: serif;
    font-weight: bold;
    line-height: 4vw;
}


.two-column-text-left {
	position: absolute;
    left: 30%;
}

.two-column-text-left p {
    font-size: 1.5vw;
    font-family: serif;
    /**width: 80%;**/
    line-height: 2.5vw;
}




/* 学習スケジュール */

.two-column-timeline {
	display: flex;
	position: relative;
	transform:translateY(50%);
	opacity:0;
	z-index: 4;
}

.huwa {
	animation:huwa 1s ease-out forwards;
	z-index: 5;
	}
@keyframes huwa {
	to {
		transform:initial;
		opacity:1;
	}
}

.two-column-timeline h3 {
	width: 40%;
    margin-left: 10%;
    margin-top: 8%;
    /*margin-right: 3%;*/
    text-align: center;
    font-size: 2vw;
    font-family: serif;
    font-weight: bold;
    line-height: 4vw;
    color: #003366;
	background-color: #EAC36A;
    margin-bottom: 20%;
}

.two-column-timeline img {
	width: 45%;
    margin-left: 5%;
    margin-top: 5%;
    margin-right: 5%;
}


.two-column-timeline-text p {
	position: absolute;
    left: 10%;
    top: 40%;
    font-size: 1.3vw;
    font-family: serif;
    width: 35%;
    line-height: 2.5vw;
}

.two-column-timeline-text p:nth-child(2) {
	top: 67%;
	font-size: 1.2vw;
	background-color: #F5F5F5;
    padding: 0.5em 1em;
    margin: 1em 0;
    border: solid 3px #EAC36A;
}

.center-text{
	margin-top: 3%;
	text-align: center;
	font-size: 1.5vw;
	line-height: 2.5vw;
}

/* mobile devices */
@media (max-width: 767px) {
	.center-text{
		argin-top: 5%;
	    text-align: center;
	    font-size: 4vw;
	    line-height: 6.5vw;
	    margin-left: 5%;
	    margin-right: 5%;
	}
}	



/* mobile devices */
@media (max-width: 767px) {

	.personal-schedule h3 {
	    text-align: center;
	    font-size: 5vw;
	    font-family: serif;
	    font-weight: bold;
	    color: #003366;
		background-color: #EAC36A;
		}

	.personal-schedule p {
		font-size: 3vw;
	    font-family: serif;
	    line-height: 4.5vw;
		}

	.personal-schedule-box p {
		font-size: 2vw;
		background-color: #F5F5F5;
	    padding: 0.5em 1em;
	    margin: 1em 0;
	    border: solid 3px #EAC36A;
	}
}



/* 背景文字・カラー */
.rotate-text-right {
	transform: rotate(93deg);
	color: #d3d3d3;
	font-size: 5vw;
	position: absolute;
	top: 50%;
	left: 65%;
	letter-spacing: 0.3em;
}

.rotate-text-right-2 {
	transform: rotate(93deg);
	color: #d3d3d3;
	font-size: 5vw;
	position: absolute;
	top: 50%;
	left: 58%;
	letter-spacing: 0.3em;
}

.rotate-text-left {
	transform: rotate(93deg);
	position: absolute;
	top: 50%;
	left: 5%;
	color: #d3d3d3;
	font-size: 5vw;
	letter-spacing: 0.3em;
}

.rotate-text-left-2 {
	transform: rotate(93deg);
	position: absolute;
	top: 50%;
	left: -19%;
	color: #d3d3d3;
	font-size: 5vw;
	letter-spacing: 0.3em;
}


.side-color-left {
    display:inline-block;
    width: 30px;
    height: 100%;
    background-color: #EAC36A;
	position: absolute;
    top: -10px;
    left: 0%;
    z-index: 6;
}

.side-color-right {
    display:inline-block;
    width: 30px;
    height: 270%;
    background-color: #003366;
	position: absolute;
    top: -10px;
    right: 0%;
    z-index: 2;
}



/* mobile devices */
@media (max-width: 767px) {
	.side-color-left {
	    display:inline-block;
	    width: 1.5vw;
	    height: 100%;
	    background-color: #EAC36A;
		position: absolute;
	    top: -10px;
	    left: 0%;
	    z-index: 6;
	}

	.side-color-right {
	    display:inline-block;
	    width: 1.5vw;
	    height: 270%;
	    background-color: #003366;
		position: absolute;
	    top: -10px;
	    right: 0%;
	    z-index: 2;
	}
}



/* 地図・画像 */
.map-ppl-1 {
	position: absolute;
	top: 3%;
	left: 20%;
	width: 10%;
	transform:translateY(50%);
	opacity:0;
}
.move-1 {
	animation:move-1 1s ease-out forwards;
	}
@keyframes move-1 {
	to {
		transform:initial;
		opacity:1;
	}
}

.map-ppl-2 {
	position: absolute;
	top: 20%;
	left: 33%;
	width: 10%;
	transform:translateY(50%);
	opacity:0;
}
.move-2 {
	animation:move-2 1s ease-out forwards;
	animation-delay: 0.5s;
	}
@keyframes move-2 {
	to {
		transform:initial;
		opacity:1;
	}
}

.map-ppl-3 {
	position: absolute;
    top: 3%;
    left: 46%;
    width: 10%;
	transform:translateY(50%);
	opacity:0;
}
.move-3 {
	animation:move-3 1s ease-out forwards;
	/*animation-delay: 0.5s;*/
	}
@keyframes move-3 {
	to {
		transform:initial;
		opacity:1;
	}
}

.map-ppl-4 {
	position: absolute;
	top: 20%;
	left: 59%;
	width: 10%;
	transform:translateY(50%);
	opacity:0;
}
.move-4 {
	animation:move-4 1s ease-out forwards;
	animation-delay: 0.5s;
	}
@keyframes move-4 {
	to {
		transform:initial;
		opacity:1;
	}
}

.map-ppl-5 {
	position: absolute;
	top: 3%;
	left: 72%;
	width: 10%;
	transform:translateY(50%);
	opacity:0;
}
.move-5 {
	animation:move-5 1s ease-out forwards;
	}
@keyframes move-5 {
	to {
		transform:initial;
		opacity:1;
	}
}



/* mobile devices */
@media (max-width: 767px) {

	.map-ppl-1 {
		position: absolute;
		top: 10%;
		left: 2%;
		width: 17%;
		transform:translateY(50%);
		opacity:0;
	}
	.move-1 {
		animation:move-1 1s ease-out forwards;
		animation-delay: 0.5s;
		}
	@keyframes move-1 {
		to {
			transform:initial;
			opacity:1;
		}
	}

	.map-ppl-2 {
		position: absolute;
		top: 27%;
		left: 22%;
		width: 17%;
		transform:translateY(50%);
		opacity:0;
	}
	.move-2 {
		animation:move-2 1s ease-out forwards;
		animation-delay: 1s;
		}
	@keyframes move-2 {
		to {
			transform:initial;
			opacity:1;
		}
	}

	.map-ppl-3 {
		position: absolute;
	    top: 10%;
	    left: 42%;
	    width: 17%;
		transform:translateY(50%);
		opacity:0;
	}
	.move-3 {
		animation:move-3 1s ease-out forwards;
		animation-delay: 0.5s;
		}
	@keyframes move-3 {
		to {
			transform:initial;
			opacity:1;
		}
	}

	.map-ppl-4 {
		position: absolute;
		top: 27%;
		left: 62%;
		width: 17%;
		transform:translateY(50%);
		opacity:0;
	}
	.move-4 {
		animation:move-4 1s ease-out forwards;
		animation-delay: 1s;
		}
	@keyframes move-4 {
		to {
			transform:initial;
			opacity:1;
		}
	}

	.map-ppl-5 {
		position: absolute;
		top: 10%;
		left: 81%;
		width: 17%;
		transform:translateY(50%);
		opacity:0;
	}
	.move-5 {
		animation:move-5 1s ease-out forwards;
		animation-delay: 0.5s;
		}
	@keyframes move-5 {
		to {
			transform:initial;
			opacity:1;
		}
	}

}




/* 各種講座 */
.full-background-color {
	position: relative;
    display:inline-block;
    width: 100%;
    height: 500px;
    background-color: #EAC36A;
    z-index: 2;
}

.full-background-h3 h3 {
    position: absolute;
	top: 45%;
	left: 10%;
	color: #003366;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-size: 45px;
	align-items: center;
	text-align: center;
}

.full-background-h3 h3::before{
	content:"";
    display:inline-block;
    width: 10px;
    height: 70px;
    background-color: #003366;
    position: absolute;
    margin-left: -35px;
    top: -10px;
}


.full-background-course-banner {
	/*position: relative;*/
	display: flex;
}

.full-background-course-banner-1 {
	position: absolute;
	left: 30%;
	top: 20%;
	width: 20%;
}

.full-background-course-banner-2 {
	position: absolute;
	left: 52.5%;
	top: 20%;
	width: 20%;
}

.full-background-course-banner-3 {
	position: absolute;	
	left: 75%;
	top: 20%;
	width: 20%;
}



/**　退避
.full-background-course-banner img {
	position: absolute;
	display: flex;
	left: 30%;
	top: 20%;
	width: 20%;
}

.full-background-course-banner img:nth-child(2) {
	left: 52.5%;
}

.full-background-course-banner img:nth-child(3) {
	left: 75%;
}
**/



/* mobile devices */
@media (max-width: 767px) {

	.full-background-color {
		position: relative;
	    display:inline-block;
	    width: 100%;
	    height: 400px;
	    background-color: #EAC36A;
	    z-index: 2;
	    margin-top: 30%;
	}

	.full-background-h3 h3 {
	   /*position: absolute;
		top: 45%;
		left: 10%;*/
		color: #003366;
		font-family: 'Inter';
		font-style: normal;
		font-weight: 700;
		font-size: 8vw;
		/*align-items: center;
		text-align: center;
		margin-top: 10%;*/
		osition: absolute;
    	top: 10%;
    	left: 35%;
	}

	.full-background-h3 h3::before{
		content:"";
	    display:inline-block;
	    width: 3vw;
	    height: 12vw;
	    background-color: #003366;
	    position: absolute;
	    margin-left: -35px;
	    top: -10px;
	}

}	




/* その他 */

.spacer{
	margin-top: 10%;
}

.half-spacer{
	margin-top: 5%;
}

.slide-spacer{
	margin-top: 23%;
}

.temp-spacer{
	margin-top: 10%;
}


/* 円　アニメーション1 ：　不使用*/
.circle {
  /**position: fixed;
  bottom: -50px;
  right: -50px;**/
  position: absolute;
  width: 250px;
  height: 250px;
  left: 42%;
  top: 26.5%;
  border-radius: 50%;
  background-color: #d3d3d3;
  opacity: 0;
  transition: all 1s ease-out;
}

.circle.active {
  opacity: 1;
  transform: scale(5);
}



/* 円　アニメーション2 */
.scroll-effect-cover {
	overflow: hidden;
	/*width: 100%;*/
    /*height: 700px;*/
}

.scroll-effect {
  /*position: absolute;
  left: 40%;*/
  position: relative;
  margin-left: 45%;
  margin-top: 30%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: grey;
  opacity: 0;
  /**transition: transform 1s ease, opacity 1s ease;**/
  transition: transform 1.5s ease-out, opacity 1.5s ease-out;

}


.scroll-effect.show {
  opacity: 1;
  /**transform: scale(1);**/
  transform: scale(20);
  /*transition: transform 1.5s ease-out, opacity 1.5s ease-out;*/
  transition: transform 1.5s ease-out, opacity 1.5s ease-out;
  position: relative;
}


.image-file {
  opacity: 0;
  transform: translateY(60%);
 /* transition: opacity 0.5s ease, transform 0.5s ease;*/
 transition: opacity 1s ease, transform 1.5s ease;

/*  transition: opacity 0.7s ease;*/
  margin-top: -37%;
}

.image-file.show {
  opacity: 1;
  position: relative;
  margin-top: -37%;
  transform: translateY(0);
  /*transition: opacity 1.5s ease 1s, transform 2s ease;*/
  transition: opacity 0.5s ease 1s, transform 2s ease;
}



/* mobile devices */
@media (max-width: 767px) {
  .scroll-effect {
  /*position: absolute;
  left: 40%;*/
  position: relative;
  margin-left: 45%;
  margin-top: 30%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: grey;
  opacity: 0;
  /**transition: transform 1s ease, opacity 1s ease;**/
  transition: transform 1.5s ease-out, opacity 1.5s ease-out;
  }


  .scroll-effect.show {
	  opacity: 1;
	  /**transform: scale(1);**/
	  transform: scale(20);
	  transition: transform 1.5s ease-out, opacity 1.5s ease-out;
	  position: relative;
  }


  .image-file {
	  opacity: 0;
	  transform: translateY(60%);
	 /* transition: opacity 0.5s ease, transform 0.5s ease;*/
	 transition: opacity 1s ease, transform 1.5s ease;

	/*  transition: opacity 0.7s ease;*/
	  margin-top: -37%;
  }

  .image-file.show {
  opacity: 1;
  position: relative;
  margin-top: -38%;
  transform: translateY(0);
  /*transition-delay: 1.3s;*/
  transition: opacity 1.5s ease 1s, transform 2s ease;
  }
}







.text-on-effect {
	position: absolute;
	text-align: center;
	/*left: 45%;*/
	top: 23%;
	transform:translateY(5%);
	opacity:0;
	transition-delay: 2s;
}
.effect-up {
	animation:effect-up 1s ease-out forwards;
	animation-delay: 1.5s;
}
@keyframes effect-up {
	to {
		transform:initial;
		opacity:1;
	}
}

.text-on-effect p {
	top: 25%;
	font-size: 40px;
	color: #ffffff;
}

.text-on-effect p:nth-child(2) {
	top: 35%;
	font-size: 60px;
	color: yellow;
}

.text-on-effect p:nth-child(3) {
	top: 45%;
	font-size: 40px;
	color: #ffffff;
}

.text-on-effect p:nth-child(4) {
	top: 65%;
	font-size: 40px;
	color: #ffffff;
}



/* 2カラム箇所　mobile devices */
.study-manage-cover{
	position: relative;
}

.study-manage-background{
    display:inline-block;
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
}

.study-manage {
	margin-top: 10%;
    margin-left: 5%;
    margin-right: 5%;
}


.study-manage h3 {
    font-size: 5vw;
    font-family: serif;
    font-weight: bold;
    text-align: center;
    padding: 1.5vw;
}

.study-manage p {
	margin-top: 5%;
    font-size: 3.5vw;
    font-family: serif;
    line-height: 5.5vw;
}

.study-manage img {
	margin-top: 5%;
}

.study-manage-rotate-right {
	position: relative;
	margin-right: 15%;
}

.rotate-text-right-sp p{
	position: absolute;
	top: 20%;
	left: 98%;
	transform: rotate(93deg);
	color: #d3d3d3;
	font-size: 6vw;
	letter-spacing: 0.3em;
	font-family: 'slick';
}

.rotate-text-right-sp-2 p{
	position: absolute;
	top: 20%;
	left: 94%;
	transform: rotate(93deg);
	color: #d3d3d3;
	font-size: 6vw;
	letter-spacing: 0.3em;
	font-family: 'slick';
}

.study-manage-rotate-left {
	position: relative;
	margin-left: 15%;
}

.rotate-text-left-sp p{
	position: absolute;
	top: 20%;
	right: 105%;
	transform: rotate(93deg);
	color: #d3d3d3;
	font-size: 6vw;
	letter-spacing: 0.3em;
	font-family: 'slick';
}

.rotate-text-left-sp-2 p{
	position: absolute;
	top: 11%;
	right: 93%;
	transform: rotate(93deg);
	color: #d3d3d3;
	font-size: 6vw;
	letter-spacing: 0.3em;
	font-family: 'slick';
}


/*学習管理スマホ　アニメーション*/
.study-manage-sp-image-anime {
	transform:translateY(50%);
	opacity:0;
}

.move-sp {
	animation:move-sp 1s ease-out forwards;
	}
@keyframes move-sp {
	to {
		transform:initial;
		opacity:1;
	}
}

/* 2024/2 追加 */
.class-style-img{
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 7.5%;
}


@media (min-width: 768px) {
	.course-link-btn{
		margin-left: 25%;
		margin-right: 25%;
		margin-top: 5%;
		margin-bottom: 15%;
	}
}

@media (max-width: 767px) {
	.course-link-btn{
		margin-left: 5%;
		margin-right: 5%;
		margin-top: 7.5%;
		margin-bottom: 20%;
	}
}


/*2024/2 お知らせの体験記利用の箇所*/
@media (min-width: 768px) {
	.news-interview-head{
		/*margin-top: 5%;*/
		margin-bottom: 5%;
	}

}

@media (max-width: 767px) {
	.news-interview-head{
		margin-top: 30%;
		margin-bottom: 10%;
	}
	.news-interview-text{
		font-size: 4vw;
    line-height: 1.5rem;
	}
}

.news-interview-spacer{
	margin-top: 15%;
}