@charset "UTF-8";

/*=======================================================
共通
=======================================================*/
.el-btn {
	width: 414px;
	font-size: 18px;
	border-radius: 30px;
	color: #FFFFFF;
	padding: 16px 0 15px 0;
	letter-spacing: 0.72px;
	line-height: 1.5em;
	position: relative;
}
.el-btn::after {
	position: absolute;
	content: "";
	width: 24px;
	height: 24px;
    background: url(../images/common/btn-white-icon.svg) top center / contain no-repeat;
	top: 50%;
	transform: translateY(-50%);
	right: 23px;
}
.el-btn.black {
	background-color: #0E0101;
	border: 1px solid #FFFFFF;
}
.el-btn.gold {
	background-color: #BD9535;
	border: 1px solid #FFFFFF;
}
.el-btn.green {
	background-color: #006E54;
	border: 1px solid #FFFFFF;
}
.el-btn:hover {
	background-color: #FFFFFF;
	color: #0E0101;
	position: relative;
	transition: all 0.3s ease;
}
.el-btn:hover::after  {
	position: absolute;
	content: "";
	width: 24px;
	height: 24px;
    background: url(../images/common/btn-black-icon.svg) top center / contain no-repeat;
	top: 50%;
	transform: translateY(-50%);
	right: 23px;
}
@media screen and (max-width: 750px) {
	.el-btn {
	    width: 606px;
	    font-size: 30px;
		padding: 22px 0 20px;
	    border-radius: 44px;
		letter-spacing: 1.2px;
		margin: auto;
    }
    .el-btn::after {
	    width: 34px;
	    height: 34px;
	    right: 30px;
    }
	.el-btn.black:hover {
	    background-color: #0E0101;
		color: #FFFFFF;
    }
	.el-btn.gold:hover {
	    background-color: #BD9535;
	    border: 1px solid #FFFFFF;
		color: #FFFFFF;
    }
	.el-btn.green:hover {
	    background-color: #006E54;
	    border: 1px solid #FFFFFF;
		color: #FFFFFF;
    }
	.el-btn:hover::after  {
		width: 34px;
	    height: 34px;
        background: url(../images/common/btn-white-icon.svg) top center / contain no-repeat;
		right: 30px;
    }
}

/*=======================================================
背景パララックス
=======================================================*/
.ly-main {
    background: url(../images/common/bg.jpg) top center / contain no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
@media screen and (max-width: 750px) {
	.ly-main {
        background: url(../images/common/bg-sp.jpg) top center / contain no-repeat;
		background-attachment: fixed;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

/*=======================================================
MV
=======================================================*/
.ly-mv {
	height: 734px;
    background: url(../images/top/mv-bg.jpg) top 0 right 140px / contain no-repeat;
	background-size: 2000px;
	padding-top: 298px;
	position: relative;
	z-index: 2;
}
.bl-mv-ttl {
	color: #FFFFFF;
	font-size: 32px;
	letter-spacing: 1.92px;
	text-align: center;
	display: flex;
	flex-flow: column;
	line-height: 1.5em;
	gap: 72px;
	position: relative;
}
.bl-mv-ttl::before {
	position: absolute;
	content: "";
	width: 78px;
	height: 78px;
    background: url(../images/top/mv-logo.svg) top center / contain no-repeat;
	top: -128px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}
.bl-mv-ttl::after {
	position: absolute;
	content: "";
	width: 440px;
	height: 40px;
    background: url(../images/top/mv-ttl-line.svg) top center / contain no-repeat;
	top: 62px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}
.bl-mv-ttl > span {
	display: block;
}
@media screen and (max-width: 750px) {
	.ly-mv {
		height: 1200px;
		background: url(../images/top/mv-bg-sp.jpg) top 0 right 30px / contain no-repeat;
		background-size: 720px;
	    padding-top: 484px;
    }
	    .bl-mv-ttl {
	    font-size: 42px;
	    letter-spacing: 2.52px;
	    line-height: 1.6em;
	    gap: 112px;
    }
    .bl-mv-ttl::before {
	    width: 112px;
	    height: 110px;
	    top: -190px;
    }
    .bl-mv-ttl::after {
	    width: 610px;
	    height: 32px;
        background: url(../images/top/mv-ttl-line-sp.svg) top center / contain no-repeat;
	    top: 100px;
    }
}

/*=======================================================
about
=======================================================*/
.bl-about {
	padding: 112px 0 220px;
	position: relative;
}
.bl-about::before {
	position: absolute;
	content: "";
	width: 466px;
	height: 110px;
	background: url(../images/top/wave01.svg) top center / contain no-repeat;
	top: -80px;
	left: -320px;
	z-index: 2;
}
.bl-about .bl-media {
	position: relative;
	grid-template-areas: "imgWrapper body";
	z-index: 1;
}
.bl-about .bl-media::before {
	position: absolute;
	content: "";
	width: 1612px;
	height: 1112px;
    background: url(../images/top/about-bg.jpg) top center / cover no-repeat;
	bottom: -141px;
	left: -77px;
	z-index: -1;
}
.bl-about .bl-media-imgWrapper {
	margin-top: 64px;
	z-index: 2;
}
.bl-about .bl-media-imgWrapper > img {
    box-shadow: 5px 5px 0px #0E0101;
}
.bl-about .bl-media-body {
	gap: 32px;
   	position: relative;
	z-index: 1;
}
.bl-about .bl-media-body::before {
   	position: absolute;
	content: "";
	width: 650px;
	height: calc(100% + 88px);
    background: #FFFFFF;
	opacity: 0.75;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}
.bl-about .el-media-ttl {
	letter-spacing: 0.06em;
	line-height: 1.6em;
   	margin-bottom: 0;
}
.bl-about .el-btn.sp {
	display: none;
}
@media screen and (max-width: 750px) {
    .bl-about {
	    padding: 152px 0 345px;
    }
    .bl-about::before {
	    width: 528px;
	    height: 235px;
	    background: url(../images/top/wave02.svg) top center / contain no-repeat;
	    top: -150px;
	    left: 270px;
    }
    .bl-about .bl-media {
        grid-template-areas: "title" "body" "imgWrapper";
		position: relative;
    }
    .bl-about .bl-media::before {
	    width: 750px;
	    height: 2544px;
        background: url(../images/top/about-bg-sp.jpg) top center / cover no-repeat;
	    bottom: -345px;
	    left: 50%;
	    transform: translateX(-50%);
    }
	.bl-about .el-btn {
		position: absolute;
		padding: 22px 0 20px 96px;
	    bottom: -168px;
		left: 50%;
        z-index: 1;
	    transform: translateX(-50%);
    }
	.bl-about .el-btn.pc {
	    display: none;
    }
	.bl-about .el-btn.sp {
	    display: initial;
    }
	.bl-about .bl-media-imgWrapper {
	    margin: 80px 0 0;
		padding: 0 20px 0 50px;
    }
	.bl-about .bl-media-imgWrapper > img {
        width: 620px;
    }
    .bl-about .bl-media-body {
	    gap: 56px;
    }
    .bl-about .bl-media-body::before {
	    width: 720px;
	    height: 1534px;
	    top: -80px;
		left: 53%;
    }
    .bl-about .el-media-ttl {
		text-align: center;
	    font-size: 38px;
	    letter-spacing: 1.52px;
		line-height: 1.5em;
    }
	.bl-about .el-media-txt {
		padding: 0 20px 0 50px;
    }
}

/*=======================================================
course
=======================================================*/
.bl-course {
	padding: 56px 0 80px;
	background: url(../images/top/course-bg.png) top center / cover no-repeat;
	position: relative;
}
.bl-course::before {
	position: absolute;
	content: "";
	width: 576px;
	height: 256px;
	background: url(../images/top/wave02.svg) top center / contain no-repeat;
	top: -60px;
	left: -290px;
}
.bl-course .ly-cont-inner {
	width: 1344px;
}
.bl-course .el-sec-mainTtl {
	color: #FFFFFF;
	letter-spacing: 1.92px;
	line-height: 1.6em;
	margin-bottom: 56px;
}
.bl-course .bl-mediaList {
	gap: 96px;
}
.bl-course .bl-media {
	grid-template: auto auto / 632px 496px;
	grid-template-areas:
		"imgWrapper title"
		"imgWrapper sub_ttl"
		"imgWrapper body";
    gap: 0 56px;
}
.bl-course .bl-media.reverse {
	grid-template: auto auto / 496px 632px;
	grid-template-areas:
		"title imgWrapper"
		"sub_ttl imgWrapper"
		"body imgWrapper";
}
.bl-course .bl-media .el-media-ttl {
	color: #DAD585;
	margin-bottom: 32px;
	letter-spacing: 1.56px;
	line-height: 1.6em;
	position: relative;
}
.bl-course .bl-media .el-media-ttl::after {
	position: absolute;
	content: "";
	width: 1040px;
	border-bottom: 1px solid #FFFFFF;
	bottom: -8px;
	right: -490px;
}
.bl-course .bl-media.reverse .el-media-ttl::after {
	bottom: -8px;
	left: -490px;
}
.bl-course .el-media-sub-ttl {
	color: #FFFFFF;
	font-size: 20px;
	letter-spacing: 0.8px;
	line-height: 1.6em;
	margin-bottom: 40px;
	grid-area: sub_ttl;
}
.bl-course .bl-media-body {
	gap: 40px;
	color: #FFFFFF;
}
@media screen and (max-width: 750px) {
	.bl-course {
	    padding: 80px 0 96px;
	    background: url(../images/top/course-bg-sp.png) top center / cover no-repeat;
    }
    .bl-course::before {
	    width: 426px;
	    height: 236px;
	    background: url(../images/top/wave03.svg) top center / contain no-repeat;
		transform: scale(-1, 1);
	    top: -100px;
	    left: 0;
		z-index: 3;
    }
	.bl-course .ly-cont-inner {
	    width: 690px;
    }
    .bl-course .el-sec-mainTtl {
		font-size: 48px;
	    letter-spacing: 2.88px;
		line-height: 1em;
	    margin-bottom: 80px;
    }
    .bl-course .bl-mediaList {
	    gap: 104px;
    }
    .bl-course .bl-media,
	.bl-course .bl-media.reverse {
		grid-template: auto / auto;
        grid-template-areas: "title" "sub_ttl" "imgWrapper" "body";
        gap: 0;
    }
    .bl-course .bl-media-imgWrapper {
		margin-bottom: 56px;
    }
    .bl-course .bl-media .el-media-ttl {
		font-size: 40px;
		letter-spacing: 2.4px;
		line-height: 1em;
	    margin-bottom: 48px;
    }
    .bl-course .bl-media .el-media-ttl::after {
	    width: 720px;
	    bottom: -24px;
	    right: -30px;
    }
    .bl-course .bl-media.reverse .el-media-ttl::after {
	    bottom: -24px;
	    left: 0;
    }
    .bl-course .el-media-sub-ttl {
	    font-size: 28px;
        letter-spacing: 1.12px;
		line-height: 1em;
	    margin-bottom: 80px;
    }
	.bl-course .bl-media-body {
	    gap: 80px;
    }
}

/*=======================================================
newsletter
=======================================================*/
.bl-newsletter {
	padding: 80px 0;
	background-color: rgba(255,255,255,0.05);
	position: relative;
}
.bl-newsletter::before,
.bl-newsletter::after {
	position: absolute;
	content: "";
	width: 604px;
	height: 292px;
	background: url(../images/top/wave03.svg) top center / contain no-repeat;
	bottom: -115px;
	z-index: 1;
}
.bl-newsletter::before {
    left: -396px;
    transform: scale(-1, 1);
}
.bl-newsletter::after {
	right: -396px;
}
.bl-newsletter-about {
	display: flex;
	flex-flow: nowrap;
	gap: 32px;
	margin-bottom: 56px;
}
.bl-newsletter-about .el-sec-mainTtl {
	width: 600px;
    color: #FFFFFF;
	letter-spacing: 0.68px;
	font-size: 17px;
	text-align: start;
	position: relative;
}
.bl-newsletter-about .el-sec-mainTtl::after {
	position: absolute;
	content: "";
	width: 807px;
	border-bottom: 1px solid #FFFFFF;
	bottom: -8px;
	left: -490px;
}
.bl-newsletter-about .el-sec-mainTtl > span {
    display: block;
	margin-top: 8px;
	letter-spacing: 1.92px;
	line-height: 1.3em;
	font-size: 32px;
}
.bl-newsletter-about .el-newsletter-about-txt {
    color: #FFFFFF;
}
.bl-newsletter-cont {
	width: 750px;
	background-color: rgba(14,1,1,0.4);
	padding: 40px 180px 48px;
	margin: 0 auto 56px;
	position: relative;
}
.bl-newsletter-cont::after {
	position: absolute;
	content: "";
	width: 304px;
	height: 76px;
	background: url(../images/top/newsletter-wave01.png) top center / contain no-repeat;
	bottom: 10px;
	right: -140px;
}
.el-newsletter-contListTtl {
	color: #FFFFFF;
	font-size: 20px;
	letter-spacing: 0.8px;
	line-height: 1.6em;
	text-align: center;
	margin-bottom: 32px;
	position: relative;
}
.el-newsletter-contListTtl::after {
	position: absolute;
	content: "";
	width: 440px;
	border-bottom: 1px solid #FFFFFF;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
}
.bl-newsletter-contList {
	color: #FFFFFF;
	letter-spacing: 0.68px;
	line-height: 1.6em;
}
.bl-newsletter .el-btn {
	margin: auto;
}
@media screen and (max-width: 750px) {
    .bl-newsletter {
	    padding: 80px 0 96px;
    }
    .bl-newsletter::before,
    .bl-newsletter::after {
	    display: none;
    }
    .bl-newsletter-about {
		flex-flow: column;
	    gap: 56px;
	    margin-bottom: 80px;
    }
    .bl-newsletter-about .el-sec-mainTtl {
	    width: 100%;
	    letter-spacing: 2.4px;
		line-height: 1.6em;
	    font-size: 28px;
	    text-align: start
    }
    .bl-newsletter-about .el-sec-mainTtl::after {
	    width: 750px;
	    bottom: -32px;
	    left: 50%;
	    transform: translateX(-50%);
    }
    .bl-newsletter-about .el-sec-mainTtl > span {
	    letter-spacing: 2.4px;
	    font-size: 40px;
    }
    .bl-newsletter-cont {
	    width: 100%;
	    padding: 56px 30px 64px;
	    margin: 0 auto 80px;
    }
    .bl-newsletter-cont::after {
	    bottom: -15px;
	    right: -10px;
    }
    .el-newsletter-contListTtl {
	    font-size: 32px;
		letter-spacing: 1.28px;
		line-height: 1em;
	    margin-bottom: 48px;
    }
    .el-newsletter-contListTtl::after {
	    width: 620px;
	    bottom: -24px;
    }
    .bl-newsletter-contList {
	    letter-spacing: 1.08px;
	    line-height: 1.5em;
    }
}

/*=======================================================
about-fmt
=======================================================*/
.bl-about-fmt {
	padding: 80px 0;
	position: relative;
}
.bl-about-fmt::before {
	position: absolute;
	content: "";
	width: 2000px;
	height: 1248px;
	background: url(../images/top/about-fmt-bg.png) top center / contain no-repeat;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.bl-about-fmt .bl-media.reverse {
    justify-content: center;
}
.bl-about-fmt .bl-media .bl-media-imgWrapper {
	width: 450px;
}
.bl-about-fmt .el-media-ttl {
	color: #FFFFFF;
	margin-bottom: 32px;
	letter-spacing: 1.92px;
	line-height: 1.6em;
	position: relative;
}
.bl-about-fmt .el-media-ttl::after {
	position: absolute;
	content: "";
	width: 1040px;
	border-bottom: 1px solid #FFFFFF;
	bottom: -8px;
	right: -32px;
}
.bl-about-fmt .bl-media-body {
	margin-bottom: 40px;
}
.bl-about-fmt .el-media-txt {
	color: #FFFFFF;
}
@media screen and (max-width: 750px) {
    .bl-about-fmt {
	    padding: 80px 0 96px;
    }
    .bl-about-fmt::before {
	    width: 100%;
	    height: 4446px;
	    background: url(../images/top/about-fmt-bg-sp.png) top center / contain no-repeat;
    }
    .bl-about-fmt .bl-media .bl-media-imgWrapper {
	    width: 100%;
		margin-bottom: 56px;
    }
    .bl-about-fmt .el-media-ttl {
		font-size: 40px;
		letter-spacing: 2.4px;
	    line-height: 1em;
		margin-bottom: 80px;
    }
    .bl-about-fmt .el-media-ttl::after {
	    width: 750px;
	    bottom: -24px;
	    left: 50%;
	    transform: translateX(-50%);
    }
    .bl-about-fmt .bl-media-body {
	    margin-bottom: 80px;
    }
}

/*=======================================================
features
=======================================================*/
.bl-features {
	padding: 0 0 80px;
}
.bl-features .el-sec-mainTtl {
	color: #FFFFFF;
	font-size: 26px;
	letter-spacing: 1.56px;
	line-height: 1.5em;
	margin: 0 auto 32px;
	width: 376px;
	position: relative;
}
.bl-features .el-sec-mainTtl::before,
.bl-features .el-sec-mainTtl::after {
	position: absolute;
	content: "";
	width: 850px;
	border-bottom: 1px solid #FFFFFF;
	top: 50%;
	transform: translateY(-50%);
}
.bl-features .el-sec-mainTtl::before {
	left: 380px;
}
.bl-features .el-sec-mainTtl::after {
    right: 380px;
}
.bl-features .bl-cardUnit {
	gap: 32px;
}
.bl-features .bl-card {
	padding: 0;
}
.bl-features .el-card-ttl {
	color: #DAD585;
	font-size: 24px;
	letter-spacing: 0.96px;
	line-height: 1.6em;
	margin-bottom: 24px;
}
.bl-features .bl-card-imgWrapper {
    margin-bottom: 16px;
}
.bl-features .bl-card-body {
    color: #FFFFFF;
}
@media screen and (max-width: 750px) {
    .bl-features {
	    padding: 0 0 96px;
		position: relative;
    }
	.bl-features::after {
		position: absolute;
		content: "";
	    width: 364px;
	    height: 176px;
	    background: url(../images/top/wave03.svg) top center / contain no-repeat;
	    bottom: -50px;
	    right: 0;
    }
    .bl-features .el-sec-mainTtl {
	    font-size: 40px;
		letter-spacing: 2.4px;
		line-height: 1em;
	    margin: 0 auto 96px;
	    width: 490px;
    }
    .bl-features .el-sec-mainTtl::before,
    .bl-features .el-sec-mainTtl::after {
	    width: 125px;
    }
    .bl-features .el-sec-mainTtl::before {
	    left: 520px;
    }
    .bl-features .el-sec-mainTtl::after {
	    right: 520px;
    }
    .bl-features .bl-cardUnit {
	    gap: 56px;
    }
	.bl-features .bl-card {
	    display: flex;
		flex-flow: column;
    }
    .bl-features .el-card-ttl {
		order: 2;
	    font-size: 38px;
	    letter-spacing: 1.52px;
		line-height: 1em;
	    margin-bottom: 32px;
    }
    .bl-features .bl-card-imgWrapper {
	    order: 1;
        margin-bottom: 56px;
    }
    .bl-features .bl-card-body {
	    order: 3;
    }
}

/*=======================================================
information
=======================================================*/
.bl-info {
	padding: 80px 0;
}
.bl-info .el-sec-mainTtl {
	color: #FFFFFF;
	letter-spacing: 1.92px;
	font-size: 32px;
	line-height: 1.6em;
	margin-bottom: 56px;
}
.bl-vertPosts {
	margin-bottom: 16px;
	border-bottom: 1px solid #FFFFFF;
}
.bl-vertPosts-date,
.el-vertPosts-ttl {
	color: #FFFFFF;
}
.bl-info .el-btn {
	margin: 40px auto 0;
}
@media screen and (max-width: 750px) {
    .bl-info {
	    padding: 80px 0 96px;
    }
    .bl-info .el-sec-mainTtl {
		font-size: 40px;
	    letter-spacing: 2.4px;
		line-height: 1.3em;
	    margin-bottom: 80px;
    }
    .bl-vertPosts {
	    margin-bottom: 80px;
    }
}

/*=======================================================
service
=======================================================*/
.bl-service {
	padding: 80px 0;
	position: relative;
}
.bl-service::before {
	position: absolute;
	content: "";
	width: 2000px;
	height: 340px;
	background: url(../images/top/service-bg.svg) top center / contain no-repeat;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.bl-serviceList {
	display: flex;
	flex-flow: nowrap;
	gap: 32px;
}
.bl-service-item {
	width: 496px;
	height: 180px;
	border: 1px solid #FFFFFF;
}
.bl-service-item:hover {
	cursor: pointer;
	transition: all 0.3s ease;
}
.bl-service-item:first-of-type {
    background: url(../images/top/service-img03.png) top center / cover no-repeat;
}
.bl-service-item:last-of-type {
    background: url(../images/top/service-img04.png) top center / cover no-repeat;
}
.bl-service-item:first-of-type:hover {
    background: url(../images/top/service-img01.png) top center / cover no-repeat;
}
.bl-service-item:last-of-type:hover {
    background: url(../images/top/service-img02.png) top center / cover no-repeat;
}
.bl-service-item > a {
	display: block;
	width: 496px;
	height: 180px;
	padding: 24px 0 0 24px;
	color: #FFFFFF;
	letter-spacing: 0.68px;
	line-height: 1.6em;
}
.bl-service-item > a > span {
	margin-bottom: 16px;
	display: block;
	font-size: 26px;
	letter-spacing: 1.56px;
}
@media screen and (max-width: 750px) {
    .bl-service {
	    padding: 80px 0 96px;
    }
    .bl-service::before {
	    display: none;
    }
    .bl-serviceList {
		flex-flow: column;
	    gap: 56px;
    }
    .bl-service-item {
	    width: 100%;
	    height: 250px;
    }
    .bl-service-item > a {
	    width: 100%;
	    height: 250px;
	    padding: 32px 0 0 40px;
	    letter-spacing: 1.12px;
		line-height: 1.5em;
    }
    .bl-service-item > a > span {
		font-size: 35px;
		letter-spacing: 2.1px;
	    margin-bottom: 32px;
    }
}