@charset "utf-8";


@keyframes shine {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes bggradient{
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.spinner {
    margin: 70px auto 0;
    width: 70px;
    text-align: center;
    justify-content: space-between;
    display: flex;
}
.spinner > div {
  width: 10px;
  height: 10px;
  background-color: #fff;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

#loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:linear-gradient(45deg,#3d84f8,#a200ed);
    background-size: 200% 200%;
    animation: bggradient 20s ease infinite;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999999999999999999999999999;
}
.loading-text {
    width: 80%;
    max-width: 200px;
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
}





#main-contents {
	padding-top: 100px;
}


@media (max-width: 815px) {

	#main-contents {
		padding-top: 70px;
	}

}

/* -----------------
main-fv
-----------------------*/
#main-fv {
    padding-left: 15%;
    background-image: url("../img/home/fv2.png");
    background-position: left 10vw top;
    background-repeat: no-repeat;
    background-size: auto 100%;
    height: 130vh;
    position: relative;
}
.main-fv-text {
    transform: skewY(-5deg);
    position: absolute;
    top: calc(40% - 15vh);
    left: 20px;
}
.main-fv-text01 {
    font-size: 58px;
    font-weight: 500;
    font-family: var(--font-sub);
}
.main-fv-text01 .t1 {
	background: #fff;
    display: inline-block;
    margin-right: 10px;
}
.main-fv-text01 .t2 {
	color: var(--main-color);
}
.main-fv-text02 {
    font-size: 17px;
    margin-top: 10px;
    line-height: 2.2;
}


@media (max-width: 815px) {

	#main-fv {
		height: 90vh;
		min-height: 400px;
	}
	.main-fv-text {
		top: 40%;
	}
	.main-fv-text01 {
		font-size: 24px;
	}
	.main-fv-text02 {
		font-size: 12px;
	}
}

@media (max-width: 480px) {

	#main-fv {
		height: 60vh;
	}

}


/* ----------------
intro
--------------------------*/
#intro {
	padding-top: 0;
	background: url("../img/home/intro_wave.png") no-repeat center top;
	background-size: auto 150px;
}
#intro:before {
	content: '';
	width: 100%;
	height: 497px;
	background: url("../img/home/intro_cover.png") no-repeat center;
	position: absolute;
	top: 150px;
	left:0;
}
#intro:after {
	content: '';
	width: 100%;
	height: calc(100% - 150px);
	background: url("../img/home/intro_bg.jpg");
    border-radius: 0 0 30px 30px;
	position: absolute;
	top: 150px;
	left:0;
	z-index: -1;
}
.intro-main h2 {
    font-size: 40px;
    font-family: var(--font-sub);
    font-weight: 500;
    text-align: center;
    transform: skewY(-5deg);
	margin-bottom: 70px;
	position: relative;
	z-index: 2;
}
.intro-main .pos {
	position: absolute;
	z-index: 1;
}
.intro-main .pos.img01 {
	max-width: 432px;
    width: 34%;
    top: -25%;
    left: -5%;
}
.intro-main .pos.img02 {
	max-width: 432px;
	width: 34%;
	right: -3%;
	top:0;
}
.intro-main .pos.img03 {
	max-width: 252px;
	width: 20%;
	bottom: -10%;
	left: 5%;
}


.intro-sub  {
	margin-top: 180px;
	position: relative;
	z-index: 1;
}
.intro-sub__list {
    display: flex;
    justify-content: space-between;
}
.intro-sub__list >li {
    background: #fff;
    width: 30%;
    border: solid 2px;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
}
.intro-sub__list >li .fig {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 264px;
}
.intro-sub__list >li p {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.8;
    margin-top: 20px;
}
.intro-sub__list >li b {
    font-size: 20px;
}


@media (max-width: 815px) {

	#intro {
		background-size: 100% 60px;
	}
	#intro:before {
		width: 100%;
		height: 100%;
		background-size: contain;
		top: 50px;
	}
	#intro:after {
		height: calc(100% - 60px);
		top: 60px;
	}

	.intro-main h2 {
		font-size: 20px;
		margin-bottom: 50px;
	}
	.intro-main .pos.img01 {
		left: -10%;
	}
	.intro-main .pos.img02 {
		right: -10%;
	}
	
	.intro-sub {
		margin-top: 80px;
	}
	.intro-sub__list {
		display: block;
	}
	.intro-sub__list >li {
		width: 100%;
		padding: 10px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
	}
	.intro-sub__list >li .fig {
		height: auto;
		width: 30%;
	}
	.intro-sub__list >li .fig img {
		width: auto;
		max-height: 100px;
	}
	.intro-sub__list >li p {
		font-size: 14px;
		margin-top: 0;
		width: 65%;
		text-align: left;
	}
	.intro-sub__list >li b {
		font-size: 16px;
	}

}







/* ----------------
people
--------------------------*/
#people {
    border-radius: 30px 30px 0 0;
    background: #fff;
    padding-top: 180px;
    margin-top: -30px;
}

.people-top {
    display: flex;
    flex-direction: row-reverse;
	margin-bottom: 160px;
}
.people-top .cmn-title {
    margin-bottom: 0;
}
.people-catch {
    font-size: 32px;
    font-weight: 500;
    margin-right: auto;
    transform: skewY(-4deg);
	position: relative;
}
.people-catch:after {
	content: '';
	display: block;
	width: 522px;
	height: 466px;
	background: url("../img/home/people_title_bg.png") no-repeat center;
	background-size: contain;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -45%);
    z-index: -1;
}

.people-slide .swiper-container {
    overflow: visible;
}
.people-slide-btn {
    width: 80px;
    position: absolute;
    right: 20px;
    top: -50px;
}
.people-slide-btn .swiper-button-next:after,
.people-slide-btn .swiper-button-prev:after {
    font-size: 30px;
    color: var(--base-color);
}

.people-slide .swiper-slide {
    border: solid 2px;
    padding: 30px 20px;
    border-radius: 20px;
	height: auto;
}
.p-s-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
	margin-bottom: 30px;
}
.p-s-title .img {
    width: 104px;
    height: 104px;
    border-radius: 10000px;
    position: relative;
    overflow: hidden;
}
.p-s-title .img img {
    width: 100%;
	height: 100%;
	object-fit: cover;
}
.p-s-title .comment {
    width: calc(100% - 120px);
}
.p-s-title .comment p {
    font-size: 16px;
    font-family: var(--font-tegaki);
}

.p-s-detail__list h3 {
    font-size: 15px;
    color: #fff;
    background: #544e4e;
    padding: 5px 10px;
}
.p-s-detail__list .detail {
    display: flex;
	flex-wrap: wrap;
	align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}
.p-s-detail__list .detail h4 {
	font-size: 15px;
	width: 160px;
	padding-right: 50px;
	position: relative;
}
.p-s-detail__list .detail h4:after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent transparent var(--main-color);
	border-width: 10px 0px 10px 16px;
	position: absolute;
	right: 30px;
	top: calc(50% - 10px);
}
.p-s-detail__list .detail p {
	font-size: 16px;
	color: var(--main-color);
	width: calc(100% - 160px);
}
.p-s-detail__list .detail p span {
	display: block;
	padding-left: 1em;
	position: relative;
}
.p-s-detail__list .detail p span:before {
	content: '・';
	position: absolute;
	left: 0;
	top: 0;
}

@media (max-width: 815px) {

	#people {
		padding-top: 100px;
	}
	.people-top {
		margin-bottom: 100px;
		display: block;
	}
	.people-catch {
		font-size: 20px;
		margin-top: 90px;
		text-align: center;
	}
	.people-catch:after {
		width: 340px;
	}
	.p-s-title {
		margin-bottom: 15px;;
	}
	.p-s-title .img {
		width: 60px;
		height: 60px;
	}
	.p-s-title .comment {
		width: calc(100% - 70px);
	}
	.p-s-title .comment p {
		font-size: 12px;
		line-height: 1.6;
	}
	.p-s-detail__list h3 {
		font-size: 13px;
	}
	.p-s-detail__list .detail h4 {
		font-size: 12px;
		width: 100px;
		padding-right: 40px;
	}
	.p-s-detail__list .detail h4:after {
		border-width: 6px 0px 6px 10px;
		right: 15px;
		top: calc(50% - 6px);
	}
	.p-s-detail__list .detail p {
		font-size: 12px;
		width: calc(100% - 100px);
	}

}





/* ----------------
counseling
--------------------------*/
#counseling {
	padding: 0;
    margin-top: 150px;
	background: url("../img/home/intro_wave.png") no-repeat center top;
	background-size: auto 150px;
}
#counseling:after {
	content: '';
	width: 100%;
	height: calc(100% - 150px);
	background: url("../img/home/intro_bg.jpg");
    border-radius: 0 0 30px 30px;
	position: absolute;
	top: 150px;
	left:0;
	z-index: -1;
}

.counseling-main {
    text-align: center;
}


.counseling-sub {
    background-image: linear-gradient(0deg, #3d84f8, #a662c5);
    border-radius: 30px;
    padding: 80px 0;
}
.counseling-sub:before {
	content: '';
	width: 100%;
	height: 261px;
	background: url("../img/home/muryo_cover.png") no-repeat center;
	position: absolute;
	top: 150px;
	left:0;
}
.counseling-sub h2 {
    color: #fff;
    font-size: 34px;
    text-align: center;
	margin-bottom: 40px;
	position: relative;
	z-index: 1;
}
.counseling-sub h2 span {
    display: inline-block;
    color: var(--base-color);
    background: #fff;
    padding: 0 15px;
    margin-top: 10px;
}
.counseling-desc {
    color: #fff;
    font-size: 22px;
    line-height: 2;
    text-align: center;
	position: relative;
	z-index: 1;
}
.counseling-desc span {
	border-bottom: solid 1px;
}
.counseling-sub__list {
    display: flex;
    justify-content: space-between;
	margin-top: 80px;
	position: relative;
	z-index: 1;
}
.counseling-sub__list >li {
    background: #fff;
    width: 30%;
    border: solid 2px;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
}
.counseling-sub__list >li .fig {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 264px;
}
.counseling-sub__list >li p {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.8;
    margin-top: 20px;
}
.counseling-sub__list >li b {
    font-size: 20px;
}
.counseling-sub-btn {
	max-width: 670px;
	margin: 80px auto 0;
}
.counseling-sub-btn a {
    display: block;
    color: var(--base-color);
    font-size: 23px;
    font-weight: 500;
    background-image: linear-gradient(0deg, #d0bff6, #ffffff);
    padding: 25px;
    position: relative;
    text-align: center;
    border-radius: 1000px;
    box-shadow: 2px 2px 5px #222;
}
 .counseling-sub-btn a:after {
    content: '';
    color: var(--main-color);
    display: block;
    width: 14px;
    height: 14px;
    border-top: solid 2px;
    border-right: solid 2px;
    position: absolute;
    right: 40px;
    top: calc(50% - 7px);
    transform: rotate(45deg);
}


@media (max-width: 815px) {

	#counseling {
		margin-top: 70px;
		background-size: 100% 60px;
	}
	#counseling:after {
		height: calc(100% - 60px);
		top: 60px;
	}

	.counseling-sub:before {
		background-size: contain;
	}
	.counseling-sub h2 {
		font-size: 17px;
		margin-bottom: 20px;
	}
	.counseling-desc {
		font-size: 15px;
	}
	.counseling-sub__list {
        display: block;
		margin-top: 50px;
	}
	.counseling-sub__list >li {
		width: 100%;
		padding: 10px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
	}
	.counseling-sub__list>li .fig {
		height: auto;
		width: 30%;
	}
	.counseling-sub__list >li .fig img {
		width: auto;
		max-height: 100px;
	}
	.counseling-sub__list >li p {
		font-size: 14px;
		margin-top: 0;
		width: 65%;
		text-align: left;
	}
	.counseling-sub__list >li b {
		font-size: 16px;
	}
	.counseling-sub-btn {
		margin: 60px auto 0;
	}
	.counseling-sub-btn a {
		font-size: 14px;
		padding: 20px;
	}
	.counseling-sub-btn a:after {
		width: 10px;
		height: 10px;
		right: 30px;
		top: calc(50% - 5px);
	}

}



/* ----------------
voice
--------------------------*/
.voice__list {
    display: flex;
}
.voice__list >li {
    width: 32%;
    margin: 0 0 2% 50px;
}
.voice__list >li:nth-child(3n+1) {
    margin-left: 0;
}
.voice-thumb {
    height: 0;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
}
.voice-thumb img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.voice-info {
    margin-top: 15px;
}
.voice-info-name {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
}
.voice-info-comment {
    line-height: 1.8;
    margin-top: 10px;
}


@media (max-width: 815px) {

	.voice__list {
		display: block;
	}
	.voice__list >li {
		width: 100%;
		margin: 0 0 50px;
	}

}


/* ----------------
skill
--------------------------*/
#skill {
	background: url("../img/home/skill_bg.png") no-repeat center top;
    background-size: 1800px auto;
    padding-top: 190px;
}
#skill h2 {
	text-align: center;
    font-size: 30px;
	line-height: 2;
	margin-bottom: 110px;
	position: relative;
	z-index: 1;
}
#skill h2 span {
    background: #fff;
    padding: 0 15px;
}
.skill__list {
	display: flex;
	flex-wrap: wrap;
}
.skill__list >li {
	width: 23%;
	padding: 30px 0;
	margin: 0 0 40px 2.66666%;
	background: #fff;
	border-radius: 10px 10px 0 0;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.skill__list >li:nth-child(4n+1) {
	margin-left: 0;
}
.skill__list >li:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent var(--main-color) transparent;
	border-width: 0px 0px 20px 20px;
	position: absolute;
	right: 0;
	bottom: 0;
}
.skill__list .icon {
	height: 87px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
}
.skill__list p {
	font-size: 17px;
	font-weight: 500;
	margin-top: 10px;
}

@media (max-width: 815px) {

	#skill {
		padding-top: 100px;
	}
	#skill h2 {
		font-size: 20px;
		margin-bottom: 60px;
	}
	.skill__list >li {
		width: 32%;
		padding: 20px 0;
		margin: 0 0 2% 2%;
	}
	.skill__list >li:nth-child(4n+1) {
		margin: 0 0 2% 2%;
	}
	.skill__list >li:nth-child(3n+1) {
		margin-left: 0;
	}
	.skill__list .icon {
		height: 50px;
	}
	.skill__list .icon img {
		width: auto;
		max-height: 50px;
	}
	.skill__list p {
		font-size: 12px;
		padding: 0 10px;
	}
}


/* ----------------
curricilum-flow 
--------------------------*/
#curricilum-flow {
    background: #fff;
    border-radius: 30px 30px 0 0;
    margin-top: -30px;
}
.curricilum-flow__list >li {
    display: flex;
    justify-content: space-between;
    padding: 30px;
	margin-bottom: 70px;
    border-radius: 20px;
    background: var(--bg-color);
}
.curricilum-flow__list >li:not(:last-child):after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: var(--main-color) transparent transparent transparent;
	border-width: 23px 23px 0px 23px;
	position: absolute;
	left: calc(50% - 23px);
	bottom: -48px;
}
.curricilum-flow-img {
	width: 40%;
}
.curricilum-flow-info {
	width: 55%;
}
.curricilum-flow-info .step {
	font-size: 40px;
	font-weight: 500;
	font-family: var(--font-en);
}
.curricilum-flow-info h3 {
	font-size: 22px;
	padding-left: 20px;
	position: relative;
	margin-top: 10px;
}
.curricilum-flow-info h3:before {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent transparent var(--main-color);
	border-width: 8px 0px 8px 12px;
	position: absolute;
	left:0;
	top: 9px;
}
.curricilum-flow-info p {
	line-height: 2;
	margin-top: 20px;
}



@media (max-width: 815px) {

	.curricilum-flow__list >li {
		display: block;
		padding: 20px;
	}
	.curricilum-flow-img {
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
	}
	.curricilum-flow-info {
		width: 100%;
	}
	.curricilum-flow-info .step {
		font-size: 24px;
	}
	.curricilum-flow-info h3 {
		font-size: 16px;
	}
	.curricilum-flow-info h3:before {
		top: 5px;
	}
}



/* ----------------
step4
--------------------------*/
.step4-in {
    padding: 70px 50px;
    background-image: linear-gradient(90deg, rgba(166, 98, 197, 0.12), rgba(61, 132, 248, 0.12));
    border-radius: 30px;
}
.step4-in h2 {
	text-align: center;
    font-size: 28px;
	margin-bottom: 80px;
	position: relative;
	z-index: 1;
}
.step4-in h2 span {
    display: inline-block;
    background: #fff;
    padding: 0 15px;
    margin-top: 10px;
}

.step4__list {
	display: flex;
	justify-content: space-between;
}
.step4__list >li {
	width: 23%;
	position: relative;
	text-align: center;
}
.step4__list >li .num {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-family: var(--font-en);
	color: #fff;
	width: 45px;
	height: 45px;
	border-radius: 1000px;
	background: var(--main-color);
	position: absolute;
	top:0;
	left: 5%;
	z-index: 1;
}
.step4__list >li .icon { 
	display: flex;
    align-items: center;
    justify-content: center;
    height: 0;
    padding-top: 100%;
    border-radius: 10000px;
    background: #fff;
    position: relative;
}
.step4__list >li:not(:first-child) .icon:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent var(--main-color);
    border-width: 16px 0px 16px 16px;
    position: absolute;
    left: -9%;
    top: calc(50% - 10px);
}
.step4__list >li .icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.step4__list >li p {
	font-size: 18px;
	font-weight: 500;
	margin-top: 10px;
}



@media (max-width: 815px) {

	.step4-in {
		padding: 40px 20px;
	}
	.step4-in h2 {
		font-size: 20px;
		margin-bottom: 50px;
	}
	.step4__list {
		display: block;
	}
    .step4__list >li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 50px;
    }
	.step4__list >li:not(:first-child):before {
		content: '';
		width: 0;
		height: 0;
		border-style: solid;
		border-color: transparent transparent transparent var(--main-color);
		border-width: 16px 0px 16px 16px;
		position: absolute;
		left: 13%;
		top: -40px;
		transform: rotate(90deg);
	}
	.step4__list >li .num {
		font-size: 14px;
		width: 30px;
		height: 30px;
		top: 0;
		left: 0;
	}
	.step4__list >li .icon {
		padding-top: 30%;
		width: 30%;
	}
	.step4__list >li:not(:first-child) .icon:before {
		display: none;
	}
	.step4__list >li .icon img {
		width: auto;
		max-height: 50%;
	}
	.step4__list >li p {
		font-size: 16px;
		margin-top: 0;
		width: 65%;
		text-align: left;
	}

}


/* ----------------
.large-image
--------------------------*/
.large-img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.large-img01 {
	height: 720px;
    margin-top: -30px;
	background-image: url("../img/home/large_img_01_2.jpg");
	z-index: -2;
}
.large-img02 {
	height: 950px;
    margin-top: -30px;
	background-image: url("../img/home/large_img_02.jpg");
	z-index: -2;
}

@media (max-width: 815px) {

	.large-img01 {
		height: 360px;
	}
	.large-img02 {
		height: 360px;
	}

}



/* ----------------
scroll-text 
--------------------------*/
@keyframes scrollText {
    0% { transform: translateX(0)}
    100% { transform: translateX(-100%)}
}

@keyframes fuwafuwa2 {
    0% {
        top: 0;
    }

    100% {
        top: -15px;
    }
}

.scroll-text {
    display: inline-block;
    font-size: 89px;
    font-weight: 600;
	font-family: var(--font-en);
    line-height: 1;
    white-space: nowrap;
    animation: scrollText 80s linear infinite;
    padding-left: 100%;
}
.scroll-text p {
    display: inline-block;
}

@media (max-width: 815px) {



}