@charset "utf-8";
/*fastView*/
.fv{
	position: relative;
	z-index: 1;
}

.fv::before {
  content:"";
  display: block;
  width: 100%;
  padding-top: 58.92%;
}

.fv .content{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.fv-bg{
	display: block;
	width: 100%;
	height: 100%;
	background: center / cover no-repeat url("../img/top.jpg");
}
.scroll{
	width: 40px;
	max-height: 100vh;
	height: 815px;
	writing-mode: vertical-rl;
	padding: 20px 0;
	background: #FFF;
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(180deg);
}
.scroll span{
	width: fit-content;
	display: block;
	font-size: 18px;
	font-weight: bold;
}
.scroll p{
	width: fit-content;
	display: block;
	font-size: 18px;
}
.scroll::before{
	display: block;
	content: "";
	width: 2px;
	height: 100px;
	background: #FFF;
	position: absolute;
	top: -100px;
    left: 50%;
    transform: translateX(-50%);
	z-index: 1;
}
.news{
	width: 80%;
	max-width: 980px;
	height: 50px;
	background-color: rgba(255, 255, 255, 0.60);
	position: absolute;
	left: 80px;
	bottom: 40px;
}
.news h3{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30%;
	max-width: 250px;
	height: 100%;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	color: #FFF;
	background: #333333;
}
.news a{
	display: flex;
	align-items: center;
	width: 70%;
	height: 100%;
	font-size: 18px;
	font-weight: bold;
	line-height: 1;
	padding: 0 20px;
}
.news a span{
	color: var(--accent02-color);
	margin: 0 10px 0 0;
}
@media screen and (max-width: 1000px) {
/*	.fv{ height: 500px;}*/
	.scroll{ height: 500px;}
	.news{
		width: 60%;
		height: 35px;
		left: 50px;
		bottom: 20px;
	}
	.news h3{ font-size: 16px;}
	.news a{
		font-size: 15px;
		padding: 0 10px;
	}
}
@media screen and (max-width: 900px) {
	.scroll span{ font-size: 10px;}
	.scroll p{ font-size: 10px;}
	.scroll::before{ width: 1px;}
}
@media screen and (max-width: 768px) {
	.news{
/*		width: 80%;*/
/*
		left: auto;
		right: 0;
*/
		width: auto;
		left: 50px;
		right: 25px;
		
	}
	.news h3{ font-size: 14px;}
	.news a{ font-size: 12px;}
}
@media screen and (max-width: 600px) {
/*	.fv{ height: 80vh;}*/
	.scroll{ height: 80vh;}
/*	.fv-bg{ background-position: 65%;}*/
}
@media screen and (max-width: 420px) {
	.scroll{
		height: 90vh;
		background: none;
	}
	.scroll p{ display: none;}
	.news{
/*		height: 50px;*/
		right: 10px;
		left: 10px;
		bottom: 20px;
	}
	.news a{ 
		flex-wrap: wrap;
		padding: 5px 10px;
	}
}
/*==================================================================================================*/
/*about*/
#about{
	width: 100%;
	background: #FFF;
	overflow: hidden;
	display: flex;
	justify-content: center;
}
#about .inner{
	width: 100%;
	max-width: 2000px;
	min-width: 2000px;
	padding: 0;
}
@media screen and (min-width: 2000px) {
	#about .inner{
		max-width: 100%;
		min-width: 100%;
	}
}
#about img{
	width: 40%;
	opacity: .5;
}
#about .inner div{
	width: 60%;
	padding: 0 90px;
	background: center right / contain no-repeat url("../img/about-bg02.png");
	background-size: 150%;
	position: relative;
    top: -100px;
}
#about h2{
	font-size: 54px;
	font-family: var(--sub-font);
	color: var(--main-color);
	margin: 0 0 30px;
}
#about h2 span{
	background: var(--accent-color);
}
#about h2 span .small{
	font-size: 48px;
}
#about p{
	width: 570px;
	font-size: 22px;
}
@media screen and (max-width: 1200px) {
	#about .inner div{ padding: 0 50px;}
}
@media screen and (max-width: 1000px) {
	#about .inner{
		max-width: 1000px;
		min-width: 1000px;
	}
	#about .inner div{
		padding: 0 30px;
		top: -15px;
	}
	#about h2{ font-size: 30px;}
	#about h2 span .small{ font-size: 26px;}
	#about p{
		width: 400px;
		font-size: 18px;
	}
}
@media screen and (max-width: 767px) {
	#about h2{ margin: 0 0 10px;}
	#about p{
		width: 330px;
		font-size: 15px;
	}
}
@media screen and (max-width: 570px) {
	#about .inner div{ padding: 0 10px;}
	#about h2{ font-size: 22px;}
	#about h2 span .small{ font-size: 18px;}
	#about p{ width: 270px;}
}
@media screen and (max-width: 380px) {
	#about p{ width: 250px;}
}
/*==================================================================================================*/
/*aboutList*/
#aboutList{
	margin-top: -335px;
}
#aboutList dl{
	border-radius: 15px;
	background: #FFF;
	box-shadow: 0 0 5px #999;
	margin: 0 0 40px;
}
#aboutList dl:last-child{
	margin: 0 0 60px;
}
#aboutList dl dt{
	font-size: 24px;
	font-family: var(--sub-font);
	color: #FFF;
	padding: 20px 40px;
	border: solid 5px #FFF;
	border-radius: 15px;
	background: var(--main-color);
	box-shadow: 0 0 5px #999;
}
#aboutList dl dd{
	font-size: 18px;
	line-height: 2;
	padding: 40px;
}
#aboutList ol li{
	font-size: 18px;
	line-height: 2;
	color: var(--accent02-color);
}
@media screen and (max-width: 1000px) {
	#aboutList{ margin-top: -50px;}
}
@media screen and (max-width: 900px) {
	#aboutList dl dt{
		font-size: 18px;
		border: solid 3px #FFF;
		padding: 10px 20px;
	}
	#aboutList dl dd{
		font-size: 14px;
		padding: 20px;
	}
	#aboutList dl dd p,#aboutList ol li{ font-size: 14px;}
}
/*==================================================================================================*/
/*curriculum*/
.top-bg{
	display: flex;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.top-bg::before,.top-bg::after{
	display: block;
	content: "";
	transform: skewX(60deg);
    width: 200%;
    height: 60px;
    margin:0 auto;
    background-color: var(--accent-color);
	position: relative;
	left: -50px;
	border-top: solid 5px var(--accent02-color);
	border-right: solid 10px var(--accent02-color);
}
.top-bg::after{
	transform: skewX(-60deg);
	left: auto;
	right: -50px;
	border-right: none;
	border-left: solid 10px var(--accent02-color);
}
@media screen and (max-width: 767px) {
	.top-bg::before,.top-bg::after{
		height: 24px;
		border-top: solid 3px var(--accent02-color);
		border-right: solid 6px var(--accent02-color);
		left: -20px;
	}
	.top-bg::after{
		border-right: none;
		border-left: solid 6px var(--accent02-color);
		left: auto;
		right: -20px;
	}
}
/*===============================================*/
#curriculum{
	padding: 0 0 100px;
	background: var(--accent-color);
}
/*こんな悩みはすぐに解決します*/
#curriculum h2{
	width: fit-content;
	font-size: 68px;
	font-family: var(--sub-font);
	text-align: center;
	margin: 50px auto 80px;
	position: relative;
}
#curriculum h2::before,#curriculum h2::after{
	display: block;
	content: "";
	width: 5px;
	height: 100px;
	border-radius: 5px;
	background: var(--main-color);
	transform: rotate(-30deg);
	position: absolute;
	top: 30px;
	left: -60px;
}
#curriculum h2::after{
	height: 180px;
	transform: rotate( 30deg);
	left: auto;
	right: -60px;
}
#curriculum h2 span.big{
	display: inline-block;
	font-size: 81px;
	color: var(--main-color);
}
span.dot{
	position: relative;
}
span.dot::before{
	display: block;
	content: "";
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--main-color);
	position: absolute;
	top: -5px;
	left: 50%;
    transform: translateX(-50%);
}
@media screen and (max-width: 1200px) {
	#curriculum h2{ font-size: 50px;}
	#curriculum h2::before,#curriculum h2::after{
		width: 4px;
		height: 50px;
	}
	#curriculum h2::after{ height: 140px;}
	#curriculum h2 span.big{ font-size: 60px;}
	span.dot::before{
		width: 10px;
		height: 10px;
	}
}
@media screen and (max-width: 1000px) {
	#curriculum h2{ font-size: 40px;}
	#curriculum h2::before,#curriculum h2::after{
		width: 3px;
		height: 40px;
	}
	#curriculum h2::after{ height: 100px;}
	#curriculum h2 span.big{ font-size: 50px;}
	span.dot::before{
		width: 8px;
		height: 8px;
	}
}
@media screen and (max-width: 767px) {
	#curriculum h2{ font-size: 30px;}
	#curriculum h2::before,#curriculum h2::after{
		width: 2px;
		height: 40px;
		top: 20px;
		left: -25px;
	}
	#curriculum h2::after{ 
		height: 70px;
		left: auto;
		right: -25px;
	}
	#curriculum h2 span.big{ font-size: 40px;}
	span.dot::before{
		width: 7px;
		height: 7px;
	}
}
@media screen and (max-width: 420px) {
	.fv::before {
	  content:"";
	  display: block;
	  width: 100%;
	  padding-top: 120%;
	}
	.fv-bg{
		background: center / cover no-repeat url("../img/top_sp.jpg");
	}
	#curriculum h2{ font-size: 28px;}
	#curriculum h2::before,#curriculum h2::after{
		height: 30px;
		top: 20px;
		left: -15px;
	}
	#curriculum h2::after{ 
		height: 70px;
		left: auto;
		right: -15px;
	}
}
/*===============================================*/
/*カリキュラム内容*/
#curriculum .title{
	font-family: var(--sub-font);
	text-align: center;
	padding: 100px 0 20px;
	border-radius: 15px 15px 0 0;
	background: var(--main-color);
	position: relative;
}
#curriculum .title p.fukidashi{
	width: fit-content;
	font-size: 48px;
	letter-spacing: 0.4em;
	line-height: 1.8;
	text-indent: 0.4em;
	color: #FFF;
	padding: 0 50px;
	border-radius: 50px;
	background: var(--accent02-color);
	position: absolute;
	top: -40px;
	left: 50%;
    transform: translateX(-50%);
}
#curriculum .title p.fukidashi::before{
	display: block;
	content: "";
	border-top: 20px solid var(--accent02-color);
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	position: absolute;
	bottom: -20px;
	left: 50%;
    transform: translateX(-50%);
}
#curriculum .title h3{
	display: flex;
	width: fit-content;
	margin: 0 auto;
	position: relative;
}
#curriculum .title h3::before{
	display: block;
	content: "";
	width: 260px;
	height: 260px;
	background: center / contain no-repeat url("../img/illustration01.png");
	position: absolute;
	top: -255px;
	left: -30px;
}
#curriculum .title h3 span{
	width: 110px;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 76px;
	line-height: 1;
	letter-spacing: 0;
	color: var(--main-color);
	border-radius: 10px;
	border: solid 5px var(--main-color);
	background: var(--accent-color);
	position: relative;
	z-index: 1;
}
#curriculum .title p{
	font-size: 36px;
	letter-spacing: 0.15em;
	color: #FFF;
}
@media screen and (max-width: 1200px) {
	#curriculum .title{ padding: 60px 0 20px;}
	#curriculum .title p.fukidashi{ font-size: 32px;}
	#curriculum .title p.fukidashi::before{ bottom: -10px;}
	#curriculum .title h3::before{
		width: 220px;
		height: 220px;
		top: -215px;
	}
	#curriculum .title h3 span{
		width: 95px;
		height: 95px;
		font-size: 45px;
		border: solid 3px var(--main-color);
	}
	#curriculum .title p{ font-size: 28px;}
}
@media screen and (max-width: 1000px) {
	#curriculum .title{ padding: 40px 0 15px;}
	#curriculum .title p.fukidashi{ font-size: 24px; top: -24px;}
	#curriculum .title h3::before{
		width: 180px;
		height: 180px;
		top: -175px;
	}
	#curriculum .title h3 span{
		width: 70px;
		height: 70px;
		font-size: 38px;
	}
	#curriculum .title p{ font-size: 22px;}
}
@media screen and (max-width: 767px) {
	#curriculum .title{ padding: 40px 0 15px;}
	#curriculum .title p.fukidashi{ font-size: 18px; top: -18px;}
	#curriculum .title p.fukidashi::before{
		border-top: 10px solid var(--accent02-color);
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
		bottom: -10px;
	}
	#curriculum .title h3::before{
		width: 160px;
		height: 160px;
		top: -155px;
	}
	#curriculum .title h3 span{
		width: 65px;
		height: 65px;
		font-size: 40px;
		border-radius: 5px;
		border: solid 2px var(--main-color);
	}
	#curriculum .title p{ font-size: 18px;}
}
@media screen and (max-width: 640px) {
	#curriculum .title h3 span{
		width: 55px;
		height: 55px;
		font-size: 35px;
	}
}
@media screen and (max-width: 550px) {
	#curriculum .title h3 span{
		width: 45px;
		height: 45px;
		font-size: 28px;
	}
}
@media screen and (max-width: 420px) {
	#curriculum .title h3 span{
		width: 40px;
		height: 40px;
	}
	#curriculum .title h3::before{
		width: 140px;
		height: 140px;
		top: -135px;
	}
}
/*==================================================================================================*/
/*curriculum*/
.curriculumList{
	padding: 60px;
	position: relative;
}
.curriculumList dt{
	justify-content: flex-start;
	font-family: var(--sub-font);
	position: relative;
	z-index: 1;
}
.curriculumList dt p.day{
	width: 230px;
	font-size: 30px;
	text-align: center;
	color: #FFF;
	padding: 10px 0;
	border-radius: 10px 10px 0 0 ;
	background: var(--accent02-color);
}
.curriculumList dt h4{
	width: auto;
	font-size: 34px;
	padding: 15px 25px;
}
.curriculumList dl:nth-child(3) dt h4{
	padding: 15px 0 15px 25px;
}
.deco{
	position: relative;	
}
.deco::after{
	display: block;
	content: "";
	width: 18px;
	height: 18px;
	background: center right / contain no-repeat url("../img/deco01.png");
	position: absolute;
	top: 10px;
	right: 15px;
}
.curriculumList dl:nth-child(3) dt h4::after{
	right: -15px;
}
@media screen and (max-width: 1250px) {
	.curriculumList dt p.day{
		width: 150px;
		padding: 5px 0;
	}
	.curriculumList dt h4{ font-size: 28px;}
	.deco::after{
		top: 8px;
		right: 10px;
	}
	.curriculumList dl:nth-child(3) dt h4{
		padding: 10px 0 10px 10px;
	}
	.curriculumList dl:nth-child(3) dt h4::after{ right: -10px;}
}
@media screen and (max-width: 1000px) {
	.curriculumList{ padding: 60px 40px;}
	.curriculumList dt p.day{
		width: 130px;
		font-size: 25px;
		padding: 0;
	}
	.curriculumList dt h4{
		font-size: 26px;
		padding: 5px 10px;
	}
	.curriculumList dl:nth-child(3) dt h4{ padding: 0 0 0 10px;}
	.deco::after{
		top: 3px;
		right: -4px;
	}
	.curriculumList dl:nth-child(3) dt h4::after{ top: -8px;}
}
@media screen and (max-width: 868px) {
	.curriculumList dl:nth-child(3) dt p.day{ border-radius: 10px;}
	.curriculumList dl:nth-child(3) dt h4{ padding: 5px 0 5px 10px;}
}
@media screen and (max-width: 767px) {
	.curriculumList{
		padding: 40px 20px;
	}
	.curriculumList dt p.day{
		width: 100px;
		font-size: 20px;
		border-radius: 5px 5px 0 0;
	}
	.curriculumList dl:nth-child(3) dt p.day{
		border-radius: 5px;
	}
	.curriculumList dt h4{ font-size: 20px; padding: 3px 10px;}
	.deco::after{
		width: 13px;
		height: 13px;
		top: 0;
		right: 0;
	}
	.curriculumList dl:nth-child(3) dt h4::after{ top: 0; right: -8px;}
}
@media screen and (max-width: 420px) {
	.curriculumList dt p.day{
		width: 85px;
		font-size: 18px;
	}
	.curriculumList dt h4{ line-height: 1.2;}
}
/*===============================================*/
.curriculumList dl dd{
	padding: 30px;
	margin: 0 0 40px;
}
.curriculumList dl:last-child dd{
	margin: 0;
}
.curriculumList dl dd ul li{
	display: flex;
	justify-content: space-between;
	margin: 0 0 15px;
}
.curriculumList dl dd ul li p{
	width: calc( 100% - 40px);
	font-size: 24px;
	line-height: 1.3;
}
.curriculumList dl dd ul li::before{
	display: inline-block;
	content: "";
	width: 30px;
	height: 24px;
	background: center right / contain no-repeat url("../img/icon-check.png");
	position: relative;
    top: 3px;
}
@media screen and (max-width: 1200px) {
	.curriculumList dl dd ul li p{ 
		width: calc( 100% - 36px);
		font-size: 20px;
	}
	.curriculumList dl dd ul li::before{
		width: 26px;
		height: 20px;
	}
}
@media screen and (max-width: 767px) {
	.curriculumList dl dd{ padding: 20px;}
	.curriculumList dl dd ul li p{ 
		width: calc( 100% - 20px);
		font-size: 15px;
	}
	.curriculumList dl dd ul li::before{
		width: 17px;
		height: 15px;
		top: 2px;
	}
}
@media screen and (max-width: 420px) {
	#curriculum{ padding: 0 0 60px;}
	.curriculumList{ padding: 20px 10px;}
	.curriculumList dl dd{
		font-size: 13px;
		padding: 10px;
		margin: 0 0 20px;
	}
	.curriculumList dl dd ul li{ margin: 0 0 8px;}
	.curriculumList dl dd ul li::before{
		width: 15px;
		height: 13px;
	}
}
/*==================================================================================================*/
/*ryota*/
.ryota01{
	width: 100%;
	background: #FFF;
	overflow: hidden;
	display: flex;
	justify-content: center;
}
.ryota01::before{
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background: url( "../img/ryota-bg02.png" ) top right / 0 0 no-repeat;
	background-size: cover;
	background-position: inherit;
	position: absolute;
	right: 40%;
	z-index: 1;
}
.ryota01::after{
	display: block;
	content: "";
	width: 60%;
	height: 100%;
	background: url( "../img/ryota-bg01.jpg" ) top left / 0 0 no-repeat;
	background-size: cover;
	background-position: inherit;
	position: absolute;
	top: 0;
	left: 40%;
}
@media screen and (max-width: 1200px) {
	.ryota01::before{ width: 135%;}
}
@media screen and (max-width: 1000px) {
	.ryota01::after{ width: 70%; left: 30%;}
}
@media screen and (max-width: 850px) {
	.ryota01::after{ width: 80%; left: 20%;}
}
@media screen and (max-width: 767px) {
	.ryota01::after{ width: 60%; left: 40%;}
}
@media screen and (max-width: 680px) {
	.ryota01::after{ width: 70%; left: 30%;}
}
@media screen and (max-width: 520px) {
	.ryota01::before{ width: 60%;}
	.ryota01::after{
		width: 100%;
		left: 0;
	    background-position: 10%;
	}
}
.ryota01 .inner{
	width: 100%;
	max-width: 2000px;
	min-width: 2000px;
	padding: 0 4%;
	position: relative;
}
@media screen and (min-width: 2000px) {
	.ryota01 .inner{
		width: 100%;
		max-width: 100%;
		min-width: 100%;
	}
}
.ryota01 .inner div.textarea{
	width: 55%;
	padding: 80px 0;
	margin: 0 auto 0 0;
	position: relative;
	z-index: 1;
}
.ryota01 .inner h2{
	width: 630px;
	font-size: 48px;
	font-style: italic;
	letter-spacing: 0.12em;
	text-decoration: underline;
	color: #FFF;
	margin: 0 0 30px auto;
}
.ryota01 .inner div div{
	width: 630px;
	padding: 50px;
	background: #FFF;
	box-shadow: 5px 5px 5px #999;
	margin: 0 0 0 auto;
}
/*ryota共通*/
.ryota .inner h3{
	font-size: 36px;
	font-family:  var(--sub-font);
	color: var(--main-color);
	margin: 0 0 30px;
}
.ryota .inner h3 span{
	font-size: 28px;
}
.ryota .inner p{
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 10px auto;
}
@media screen and (max-width: 1200px) {
	.ryota01 .inner{ min-width: 100%;}
	.ryota01 .inner div.textarea{ width: 60%;}
	.ryota01 .inner h2{
		width: 96%;
		font-size: 36px;
		margin: 0 0 20px auto;
	}
	.ryota01 .inner div div{
		width: 96%;
		padding: 30px;
	}
	/*ryota共通*/
	.ryota .inner h3{
		font-size: 30px;
		margin: 0 0 20px;
	}
	.ryota .inner h3 span{
		font-size: 24px;
	}
}
@media screen and (max-width: 820px) {
	.ryota01 .inner h2{ font-size: 30px;}
}
@media screen and (max-width: 767px) {
	.ryota01 .inner div.textarea{ width: 100%;}
	.ryota01 .inner h2{
		width: 100%;
		font-size: 24px;
	}
	.ryota01 .inner div div{
		width: 100%;
		background: rgba(255,255,255,0.80);
	}
	/*ryota共通*/
	.ryota .inner h3{
		font-size: 24px;
		margin: 0 0 10px;
	}
	.ryota .inner h3 span{ font-size: 20px;}
	.ryota .inner p{ font-size: 15px;}
}
/*==================================================================================================*/
/*ryota02*/
.ryota02{
	padding: 60px 0 80px;
}
.ryota02 .inner{
	width: 94%;
	max-width: 1700px;
	justify-content: center;
}
.ryota02 .inner .svganimeblock{
	width: 35%;
	max-width: 700px;
	padding: 0 3% 0 0;
}
.ryota02 .inner div:nth-child(2){
	width: 65%;
	max-width: 1000px;
	padding: 50px;
	background: #FFF;
	box-shadow: 5px 5px 5px #999;
}
.ryota02 .inner p{
	line-height: 1.5;
}
@media screen and (max-width: 1000px) {
	.ryota02 .inner{
		max-width: 1000px;
		margin: 0 auto 100px;
	}
	.ryota02 .inner .svganimeblock{
		width: 50%;
		max-width: 700px;
		padding: 0;
		position: absolute;
		bottom: -100px;
		left: -50px;
		z-index: 0;
	}
	.ryota02 .inner div:nth-child(2){
		width: 80%;
		padding: 30px;
		margin: 0 0 0 auto;
		position: relative;
		z-index: 1;
	}
}
@media screen and (max-width: 767px) {
	.ryota02 .inner .svganimeblock{ width: 60%;}
	.ryota02 .inner div:nth-child(2){
		width: 80%;
		padding: 40px;
	}
}
@media screen and (max-width: 520px) {
	.ryota02 .inner{ margin: 0 auto 240px;}
	.ryota02 .inner .svganimeblock{
		width: 80%;
		bottom: -240px;
	}
	.ryota02 .inner div:nth-child(2){
		width: 100%;
		padding: 20px;
	}
}
/*==================================================================================================*/
/*interview*/
#interview{
	padding: 150px 0;
}
#interview .inner{
	width: 90%;
	max-width: 1100px;
}
#interview li{
	position: relative;
	margin: 0 0 50px;
}
#interview li:last-child{
	margin: 0;
}
#interview .voiceImg{
	width: 50%;
	position: relative;
}
#interview li:last-child .voiceImg{
	margin: 0 0 0 auto;
}
#interview li .voiceImg::before{
	display: block;
	content: "01";
	font-size: 130px;
	font-family: var(--sub-font);
	font-style: italic;
	line-height: 1;
	color: var(--main-color);
	position: absolute;
	top: -40px;
	left: -40px;
}
#interview li:last-child .voiceImg::before{
	content: "02";
	top: -40px;
	left: auto;
	right: -20px;
}
#interview li .voiceImg::after{
	display: block;
	content: "";
	width: 100%;
	height: calc( 100% - 50px );
	background: rgba(0,0,0,0.20);
	position: absolute;
	top: 0;
	left: 0;
}
#interview .voiceImg a{
	display: flex;
	align-items: center;
	width: calc( 100% - 100px );
	height: 50px;
	color: #FFF;
	padding: 0 20px;
	background: var(--main-color);
	position: relative;
	z-index: 1;
}
#interview .voiceImg a::after{
	display: block;
	content: "";
	transform: skewX(-60deg);
    width: 100px;
    height: 50px;
    background-color: var(--main-color);
	position: absolute;
	top: 0;
	right: -57px;
}
#interview .voiceText{
	width: 55%;
	padding: 50px;
	background: #FFF;
	box-shadow: 5px 5px 0 var(--sub-color);
	position: absolute;
	top: 50%;
    right: 0;
    transform: translateY(-50%);
	z-index: 1;
}
#interview li:last-child .voiceText{
	right: auto;
	left: 0;
}
.voiceText h3{
	font-size: 28px;
	font-family:  var(--sub-font);
	letter-spacing: 0;
	margin: 0 0 20px;
}
.voiceText h3 span{
	display: inline-block;
	font-size: 18px;
	font-family:  var(--main-font);
	color: #B5AA9D;
	margin: 0 0 0 20px;
}
.voiceText p{
	font-size: 20px;
	line-height: 1.3;
}
.voiceText p.red{
	margin: 0 0 20px;
}
@media screen and (max-width: 1000px) {
	#interview li{ margin: 0 0 130px;}
	#interview li .voiceImg::before{
		font-size: 70px;
		top: -25px; left: -20px;
	}
	#interview li:last-child .voiceImg::before{ right: -10px;}
	#interview li .voiceImg::after{ height: calc( 100% - 35px );}
	#interview .voiceImg a{
		height: 35px;
		font-size: 15px;
	}
	#interview .voiceImg a::after{
		height: 35px;
		right: -69px;
	}
	.voiceText h3{
		font-size: 24px;
		margin: 0 0 10px;
	}
	.voiceText h3 span{
		font-size: 15px;
		margin: 0 0 0 10px;
	}
	.voiceText p{ font-size: 15px;}
	.voiceText p.red{ margin: 0 0 10px;}
}
@media screen and (max-width: 830px) {
	#interview .voiceText{ padding: 25px;}
}
@media screen and (max-width: 767px) {
	#interview{ padding: 100px 0;}
	#interview .inner{
		max-width: 500px;
		padding: 20px;
	}
	#interview li{ margin: 0 0 80px;}
	#interview .voiceImg{ width: 70%;}
	#interview li:last-child .voiceImg::before{
		right: auto;
		left: -20px;
	}
	#interview li:last-child .voiceImg{ margin: 0 auto 0 0 ;}
	#interview li .voiceImg::after{ height: calc( 100% - 30px );}
	#interview .voiceImg a{ height: 30px;}
	#interview .voiceImg a::after{
		height: 30px;
		right: -73px;
	}
	#interview .voiceText{
		width: 70%;
		position: relative;
		top: 160px;
		margin: 0 0 0 auto;
	}
	.voiceText h3{
		font-size: 20px;
		margin: 0 0 10px;
	}
	.voiceText h3 span{
		font-size: 15px;
		margin: 0 0 0 10px;
	}
	.voiceText p{ font-size: 15px;}
	.voiceText p.red{ margin: 0 0 10px;}
}
@media screen and (max-width: 520px) {
	#interview{ padding: 60px 0;}
	#interview .voiceImg{ width: 100%;}
	#interview .voiceText{
		width: 100%;
		top: 180px;
	}
}
/*==================================================================================================*/
/*movie*/
#movie{
	padding: 200px 0;
}
#movie h2{
	width: fit-content;
	font-size: 70px;
	text-align: center;
	color: var(--main-color);
	padding: 20px 50px;
	position: relative;
	margin: 0 auto;
}
#movie h2::after{
	display: block;
	content: "";
	width: 100%;
	height: 60px;
	background: var(--sub-color);
	position: absolute;
	bottom: 0;
	left: 50%;
    transform: translateX(-50%);
}
#movie .video{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto
}
@media screen and (max-width: 1000px) {
	#movie{ padding: 80px 0 120px;}
	#movie h2{ font-size: 50px;}
}
@media screen and (max-width: 767px) {
	#movie h2{
		font-size: 30px;
		padding: 10px 20px;
	}
	#movie h2::after{ height: 30px;}
}
@media screen and (max-width: 420px) {
	#movie{ padding: 40px 0 70px;}
}
/*==================================================================================================*/
/*plan*/
#plan{
	padding: 120px 0;
}
dl.setbox{
	margin: 0 0 50px;
	background: #fff;
}
dl.setbox dt{
	font-size: 46px;
	font-family: var(--sub-font);
	text-align: center;
	letter-spacing: 0.15em;
	color: #FFF;
	padding: 20px;
	border-radius: 20px 20px 0 0;
	background: var(--main-color);
}
#plan dd.one{
	padding: 40px;
	position: relative;
	align-items: flex-start;
}
#plan dl:nth-child(2) dd.one{
	padding: 40px;
}
#plan dd.one img{
	width: 35%;
}
#plan dd.one div{
	width: 60%;
}
h3.square{
	justify-content: flex-start;
	position: relative;
}
h3.square::after{
	display: block;
	content: "";
	width: calc( 100% - 180px );
	height: 2px;
	background:  var(--main-color);
	position: absolute;
	top: 50%;
    right: 0;
    transform: translateY(-50%);
}
/*一括払い/月額制*/
h3.square span{
	width: fit-content;
	display: flex;
	font-size: 26px;
	font-family: var(--sub-font);
	text-align: center;
	color: var(--main-color);
	padding: 0 3px 0 6px;
	border: solid 3px var(--main-color);
	background: var(--accent-color);
	position: relative;
}
h3.square span:nth-child(2){ left: -3px;}
h3.square span:nth-child(3){ left: -6px;}
h3.square span:nth-child(4){ left: -9px;}
/*料金*/
#plan dd.one p.money span.span{
	font-size: 18px;
	font-weight: normal;
	color: #FFF;
	position: relative;
	border: -10px;
	margin: 0 35px 0 0;
	z-index: 1;
}
#plan dd.one p.money span.span::after{
	width: 90px;
	height: 90px;
	display: block;
	content: "";
	border-radius: 50%;
	background: var(--accent02-color);
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	z-index: -1;
}
#plan dd.one p.money span{
	font-size: 56px;
}
#plan dd.one p.money{
	font-size: 66px;
	font-family: var(--sub-font);
	font-weight: bold;
	letter-spacing: 0;
	justify-content: flex-start;
	padding: 0 0 0 20px;
	margin: 0 0 10px;
}
#plan dd.one p.money span.tax{
	font-size: 30px;
	font-weight: normal;
}
#plan dd.one p.point{
	width: 100%;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.03em;
	color: var(--accent02-color);
	border: solid 3px var(--accent02-color);
	border-radius: 40px;
	background: #FFF;
	padding: 5px;
	position: relative;
	top: -40px;
	z-index: 1;
}
/*継続会員*/
#plan dl:nth-child(2) dd.one p.point{
	font-size: 16px;
	top: 10px;
}
@media screen and (max-width: 1200px) {
#plan dl:nth-child(2) dd.one p.point{ font-size: 14px;}
}
.res1000{ display: none;}
@media screen and (max-width: 1000px) {
	.res1000{ display: block;}
}
@media screen and (max-width: 767px) {
	#plan dl:nth-child(2) dd.one p.point{ top: 0; margin: 0 0 10px;}
	.res1000{ display: none;}
}
#plan dd.one p:nth-child(4){
	font-size: 20px;
	line-height: 1.5;
	margin: -10px 0 0 ;
}
#plan dd.one .btnlp{
	position: absolute;
	bottom: 40px;
	right: 40px;
}
@media screen and (max-width: 1260px) {
	#plan dl:first-child dd.one div{ margin: 0 0 100px;}
	#plan dd.one p.money span{ font-size: 48px;}
	#plan dd.one p.money{ font-size: 55px;}
	#plan dd.one p.money span.tax{ font-size: 24px;}
}
@media screen and (max-width: 1000px) {
	#plan dd.one{ padding: 40px;}
	#plan dl:first-child dd.one div{ margin: 0 0 60px;}
	dl.setbox dt{
		font-size: 36px;
		padding: 10px;
	}
	/*料金*/
	#plan dd.one p.money span.span{ margin: 0 25px 0 0;}
	#plan dd.one p.money{ font-size: 50px;}
	#plan dl:nth-child(2) dd.one p.money{ font-size: 40px;}
	#plan dd.one p.money span.tax{ font-size: 18px;}
	#plan dd.one p.money span{ font-size: 40px;}
	#plan dd.one p.point{
		font-size: 18px;
		top: -25px;
	}
	#plan dd.one p:nth-child(4){
		font-size: 18px;
		margin: -10px 0 20px ;
	}
}
@media screen and (max-width: 900px) {
	#plan dd.one{ padding: 30px;}
	dl.setbox dt{ font-size: 32px;}
	/*一括払い/月額制*/
	h3.square span{ 
		font-size: 20px;
		border: solid 2px var(--main-color);
	}
	h3.square::after{ width: calc( 100% - 160px );}
	/*料金*/
	#plan dd.one p.money span.span::after{
		width: 80px;
		height: 80px;
	}
	#plan dd.one p.money span.span{
		font-size: 16px;
		margin: 0 20px 0 0;
	}
	#plan dd.one p:nth-child(4){ font-size: 16px;}
}
@media screen and (max-width: 767px) {
	#plan dl:first-child dd.one div{ margin: 0 0 20px;}
	dl.setbox dt{ font-size: 24px;}
	#plan dd.one{ padding: 20px 20px 80px 20px;}
	#plan dd.one img{ 
		width: 65%;
		margin: 0 auto 20px;
	}
	#plan dd.one div{ width: 100%;}
	/*料金*/
	#plan dd.one p.money{
   		width: fit-content;
		padding: 0 0 0 10px;
		margin: 0 auto;
	}
	#plan dl:nth-child(2) dd.one p.money{ font-size: 44px;}
	#plan dd.one p.money span.span::after{
		width: 60px;
		height: 60px;
	}
	#plan dd.one p.money span.span{
		font-size: 15px;
		margin: 0 10px 0 0;
	}
	#plan dd.one p.money{ font-size: 44px;}
	#plan dd.one p.money span.tax{ font-size: 16px;}
	#plan dd.one p.money span{ font-size: 30px;}
	#plan dd.one p.point{ font-size: 15px;}
	#plan dd.one p:nth-child(4){ font-size: 15px;}
	
	#plan dl:nth-child(2) dd.one .red{
		margin: 0 0 10px;
	}
	
}
/*===============================================*/
#plan dd.twe{
	font-family: var(--sub-font);
	background: var(--accent-color);
	position: relative;
	padding: 0 0 30px;
}
#plan dd.twe::before{
	display: block;
	content: "";
	width: 100%;
	height: 9px;
	background: center / contain repeat-x url("../img/plan-bg.png");
	position: relative;
	top: -9px;
}
#plan dd.twe::after{
	display: block;
	content: "";
	width: 180px;
	height: 230px;
	background: center / contain no-repeat url("../img/illustration02.png");
	position: absolute;
	bottom: 0;
	left: -10px;
	z-index: 1;
}
#plan dd.twe p{
	font-size: 36px;
	text-align: center;
	line-height: 1.3;
	padding: 30px 0 0;
	position: relative;
	z-index: 1;
}
#plan dd.twe p:first-child::after{
	display: block;
	content: "";
	width: 100%;
	height: 20px;
	background: center / contain no-repeat url("../img/plan-line.png");
	position: absolute;
	bottom: 0;
	left: 50%;
    transform: translate(-50%,10px);
	z-index: -1;
}
#plan dd.twe span.dot::before{
	width: 7px;
	height: 7px;
	background: var(--accent02-color);
	top: -20px;
}
#plan dd.twe p.big{
	width: fit-content;
	font-size: 72px;
	margin: 0 auto;
	position: relative;
	right: -30px;
}
#plan dd.twe p.big::before{
	display: block;
	content: "";
	width: 100%;
	height: 15px;
	background: #FFF;
	position: absolute;
	bottom: 15px;
	z-index: -1;
}
#plan dd.twe p.deco::after{
	width: 30px;
	height: 30px;
	top: 15px;
	right: -10px;
}
@media screen and (max-width: 1260px) {
	#plan dd.twe p.big{ right: -45px;}
}
@media screen and (max-width: 1200px) {
	#plan dd.twe::after{
		width: 160px;
		height: 200px;
		left: -20px;
	}
	#plan dd.twe p.big{
		font-size: 50px;
		right: -30px;
	}
	#plan dd.twe p.deco::after{
		width: 20px;
		height: 20px;
	}
}
@media screen and (max-width: 767px) {
	#plan dd.twe{ padding: 0 0 130px;}
	#plan dd.twe p{
		width: fit-content;
		font-size: 22px;
		margin: 0 auto;
	}
	#plan dd.twe span.dot::before{
		width: 5px;
		height: 5px;
		top: -15px;
	}
	#plan dd.twe::after{
		width: 100px;
		height: 120px;
		left: 50%;
		transform: translateX(-50%);
	}
	#plan dd.twe p.big{
		font-size: 30px;
		position: sticky;
		padding: 20px 0 0;
	}
	#plan dd.twe p.big::before{
		height: 10px;
		bottom: 5px;
	}
	#plan dd.twe p.deco::after{
		width: 20px;
		height: 14px;
		top: 18px;
	}
}
/*===============================================*/
#plan dl:nth-child(2) dd.one div{
	width: 35%;
}
#plan dl:nth-child(2) dd.one p.textarea{
	width: 63%;
	font-size: 20px;
	color: #FFF;
	padding: 20px 30px;
	background: #329598;
}
#plan dl:nth-child(2) dd.one h3::after{
	width: calc( 100% - 140px );
}
#plan dl:nth-child(2) dd.one p.money{
	line-height: 1;
	padding: 15px 0 0;
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
	#plan dl:nth-child(2) dd.one{ padding: 20px;}
	#plan dl:nth-child(2) dd.one div{ width: 100%;}
	#plan dl:nth-child(2) dd.one p.textarea{
		width: 100%;
		font-size: 15px;
	}
	#plan dl:nth-child(2) dd.one p.money{ padding: 0;}
}
/*===============================================*/
#plan .last{
	text-align: center;
	padding: 0 25px;
}
#plan .last p{
	margin: 0 0 20px;
}
#plan .last h4{
	font-size: 20px;
	padding: 20px 0;
	border-top: solid 3px #333;
	border-bottom: solid 3px #333;
}
@media screen and (max-width: 767px) {
	#plan .last{ padding: 0;}
	#plan .last p{
		letter-spacing: 0;
		text-align: left;
	}
	#plan .last h4{ font-size: 16px;}
}
/*==================================================================================================*/
/*inforation*/
#inforation{
	padding: 100px 0 200px;
}
#inforation .btn{
	background: none;
}
#inforation ul{
	max-width: 740px;
	margin: 0 0 0 auto;
}
#inforation ul li{
	margin: 0 0 30px;
}
#inforation ul div.img{
	width: 28%;
	padding-top: 23%;
}
#inforation ul div.box{
	width: 70%;
	padding: 10px 0;
	border-top: solid 3px #333;
	border-bottom: solid 3px #333;
}
#inforation ul .day{
	font-size: 16px;
	color: var(--accent02-color);
}
#inforation ul h4{
	font-size: 20px;
}
#inforation ul p{
	font-size: 16px;
}
@media screen and (max-width: 1000px) {
	#inforation .btnlp{ margin: 0 0 50px;}
}
@media screen and (max-width: 767px) {
	#inforation ul div.img{
		width: 100%;
		padding-top: 60%;
		margin: 0 0 20px;
	}
	#inforation ul div.box{
		width: 100%;
		border-top: solid 2px #333;
		border-bottom: solid 2px #333;
	}
	#inforation ul .day{ font-size: 13px;}
	#inforation ul h4{ font-size: 16px;}
	#inforation ul p{ font-size: 14px;}
}
/*==================================================================================================*/
/*schedule*/
#schedule{
	overflow: inherit;
	padding: 0 0 100px;
}
#schedule .inner{
	padding: 50px;
	background: var(--main-color);
	align-items: flex-start;
	position: relative;
	top: -100px;
}
#schedule h2{
	font-size: 78px;
	letter-spacing: 0;
	color: #FFF;
}
#schedule .inner div:first-child{
	width: 55%;
}
#schedule .inner div:first-child img{
	padding: 20px 20px 0 0;
}
#schedule .inner div.list{
	width: 45%;
	position: relative;
}
#schedule div.list h3{
	width: fit-content;
	font-size: 18px;
	letter-spacing: 0;
	color: #fff;
	padding: 10px 20px;
	border-radius: 30px;
	background: var(--accent02-color);
	margin: 0 auto;
	position: absolute;
	top: -9px;
    left: 50%;
    transform: translateX(-50%);
}
#schedule div.list ul{
	padding: 50px 20px 20px;
	background: #fff;
}
#schedule div.list ul li a{
	display: flex;
	align-items: center;
	font-size: 34px;
	font-family: var(--sub-font);
	color: var(--main-color);
	padding: 10px 0;
	border-bottom: solid 1px #B5AA9D;
}
#schedule div.list ul li:last-child a{
	border-bottom: none;
}
#schedule div.list ul li span{
	display: inline-block;
	font-size: 16px;
	color: #ccc;
	margin: 0 0 0 20px;
}
.triangle::before{
	display: inline-block;
	content: "";
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 12px solid var(--main-color);
	margin: 0 20px 0 0;
}
/*ホバーカラー指定*/
#schedule div.list ul li a:hover{ opacity: 1;}
/*札幌*/
#schedule div.list ul li:nth-child(1) a:hover{ color: #2AA8E8;}
#schedule div.list ul li:nth-child(1) .triangle:hover::before{ border-left: 12px solid #2AA8E8;}
/*仙台*/
#schedule div.list ul li:nth-child(2) a:hover{ color: #39B9C6;}
#schedule div.list ul li:nth-child(2) .triangle:hover::before{ border-left: 12px solid #39B9C6;}
/*東京*/
#schedule div.list ul li:nth-child(3) a:hover{ color: #F9B253;}
#schedule div.list ul li:nth-child(3) .triangle:hover::before{ border-left: 12px solid #F9B253;}
/*京都・大阪・*神戸*/
#schedule div.list ul li:nth-child(4) a:hover,
#schedule div.list ul li:nth-child(5) a:hover,
#schedule div.list ul li:nth-child(6) a:hover{ color: #FF7390;}
#schedule div.list ul li:nth-child(4) .triangle:hover::before,
#schedule div.list ul li:nth-child(5) .triangle:hover::before,
#schedule div.list ul li:nth-child(6) .triangle:hover::before{ border-left: 12px solid #FF7390;}


a.topBtn{
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 16px;
	font-family: var(--sub-font);
	color: var(--main-color);
	border: solid 2px var(--main-color);
	background: var(--accent-color);
	position: absolute;
	bottom: 0;
	right: -100px;
	padding-top: 15px;
}
a.topBtn::before{
	width: 0;
	height: 0;
	display: block;
	content: "";
	border-right: 10px solid transparent;
	border-bottom: 10px solid var(--main-color);
	border-left: 10px solid transparent;
	position: absolute;
	top: 15px;
	left: 50%;
    transform: translateX(-50%);
}
@media screen and (max-width: 1000px) {
	#schedule{ padding: 0 0 50px;}
	#schedule .inner{ padding: 30px;}
	#schedule h2{
		font-size: 45px;
		margin: 0 0 50px;
	}
	#schedule .inner div:first-child{ width: 45%;}
	#schedule .inner div:first-child img{ padding: 10px 10px 0 0;}
	#schedule .inner div.list{
		width: 55%;
		position: relative;
	}
	#schedule div.list h3{ font-size: 16px;}
	#schedule div.list ul li a{
		font-size: 28px;
		padding: 10px 0;
	}
	#schedule div.list ul li span{ font-size: 16px;}
	.triangle::before{ margin: 0 10px 0 0;}
}
@media screen and (max-width: 767px) {
	#schedule h2{
		font-size: 36px;
		text-align: center;
		margin: 0;
	}
	#schedule .inner div:first-child img{
		padding: 10px;
		margin: 0 0 20px;
	}
	#schedule .inner div:first-child{ width: 100%;}
	#schedule .inner div.list{
		width: 100%;
		position: relative;
	}
	#schedule div.list ul li a{ font-size: 19px;}
	#schedule div.list ul li span{ font-size: 13px;}
	a.topBtn{
		bottom: -100px;
		right: 0;
	}
}
@media screen and (max-width: 420px) {
	#schedule .inner{ padding: 15px;}
	#schedule div.list h3{ font-size: 14px;}
}
/*==================================================================================================*/
/* これが無いとモーダルウィンドウ表示の際に余白が出る */
*{ margin: 0; padding: 0;}
/* モーダル全体(背景＋本体) */
.modal{
  display: none;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
}
body.fixed .modal{
	-webkit-transform: translate3d(0, 0, 1px);
	transform: translate3d(0, 0, 1px);
	z-index: 1000;
}
/* モーダル背景 */
.modal-bg{
	position: absolute;
	height: 100vh;
	width: 300%;
	background: rgba(26,48,101,0.9);
	left: -150%;
}
/* ★モーダル閉じ */
.js-modal-close{
	width: 100%;
	height: 100%;
}
/* モーダルウィンドウ表示中に記事本体を固定 */
body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
}
/* ★モーダル本体 */
.modal-content{
	width: fit-content;
	position: absolute;
	top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.modal-content .modal-inner{
	width: 700px;
	background: none;
}
.modal-content .modal-inner.voicemov{/**/
	padding: 50px;
	border-radius: 20px;
	background: #FFF;
}
@media screen and (max-width: 767px) {
.modal-content .modal-inner{
	width: 600px;
}
.modal-content .modal-inner.voicemov{/**/
	padding: 30px;
}
}
/* ポップアップ中身の記述 */
.modal-content h3.square{
	margin: 0 0 20px;
}
.modal-content h3.square span{
	font-size: 32px;
}
.modal-content dd{
	padding: 30px 50px;
}
.modal-content .days ul{
	width: 55%;
	padding: 20px;
}
.modal-content .days ul:nth-child(2){
	width: 45%;
}
.modal-content li{
	font-size: 18px;
	margin: 0 0 10px;
}
.modal-content li:last-child{
	margin: 0;
}
@media screen and (max-width: 767px) {
	.modal-content .days ul,
	.modal-content .days ul:nth-child(2){
		width: 100%;
	}
}
@media screen and (max-width: 420px) {
.modal-content .modal-inner{
	width: 340px;
}
	.modal-content h3.square span{
		font-size: 20px;
		border: solid 2px var(--main-color);
	}
	.modal-content h3.square::after{
		width: calc( 100% - 120px );
	}
.modal-content dd{
	padding: 20px;
}
.modal-content .days ul{
	width: 100%;
	padding: 10px;
}
	.modal-content li{
	font-size: 15px;
	margin: 0 0 5px;
}
.modal-content .modal-inner.voicemov{
	border-radius: 10px;
	padding: 20px;
}
}