@charset "UTF-8";

/*=======================================================
共通
=======================================================*/
.bl-ttl-set {
	display: flex;
	flex-flow: column;
	gap: 40px;
	text-align: center;
}
.el-sec-mainTtl {
	order: 2;
	font-size: 22px;
	letter-spacing: 0.88px;
}
.el-sec-subTtl {
	order: 1;
	font-size: 50px;
	letter-spacing: 3px;
	position: relative;
}
.el-sec-subTtl::after {
	position: absolute;
	content: "";
	width: 76px;
	height: 8px;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
	background: transparent linear-gradient(90deg, #566FFD 0%, #F566C6 100%);
}
.el-btn {
	width: 400px;
	height: 56px;
	border-radius: 30px;
	display: flex;
	margin: auto;
	justify-content: center;
	align-items: center;
	background: #17B0FF;
	color: #fff;
	font-size: 20px;
	position: relative;
}
.el-btn::after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	top: 50%;
	transform: translateY(-50%);
	right: 15px;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #fff;
}
@media screen and (max-width : 750px){
    .el-sec-mainTtl {
	    font-size: 28px;
    }
    .el-sec-subTtl {
	    font-size: 80px;
    }
	.el-sec-subTtl::after {
		width: 200px;
    }
	.el-btn{
		width: 620px;
		height: 100px;
		border-radius: 60px;
		font-size: 32px;
	}
	.el-btn::after{
		right: 30px;
		border-width: 11px 0 11px 18px;
	}
}
/*=======================================================
access
=======================================================*/
.bl-access {
	padding: 56px 0 80px;
	position: relative;
}
.bl-access::after {
	position: absolute;
	content: "";
	background: transparent linear-gradient(90deg, #F566C6 0%, #566FFD 100%);
	width: 100%;
	height: 22px;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.bl-access .ly-cont-inner {
	width: 840px;
}
.bl-access .bl-media {
	display: grid;
	grid-template: auto 1fr / 408px auto;
	grid-template-areas: "imgWrapper body";
	gap: 0 32px;
}
.bl-access .bl-media-body {
	gap: 0;
}
.bl-access .bl-media-imgWrapper {
	position: relative;
}
.bl-access .bl-media-imgWrapper::after {
	position: absolute;
	content: "";
	width: 408px;
	height: 320px;
	border: 1px solid #030303;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.bl-access .bl-media-imgWrapper > iframe {
	width: 408px;
	height: 320px;
}
.bl-access .el-media-txt + .el-media-txt {
	margin-top: 1.3em;
}
.bl-access .el-btn {
	margin-top: 32px;
}
@media screen and (max-width : 750px){
	.bl-access {
		padding: 64px 0 112px;
	}
	.bl-access::after {
	    height: 56px;
    }
	.bl-access .ly-cont-inner {
	    width: 690px;
    }
    .bl-access .bl-media {
		grid-template: auto / auto;
		grid-template-areas: "imgWrapper" "body";
	}
	.bl-access .bl-media-imgWrapper::after,
	.bl-access .bl-media-imgWrapper > iframe {
	    width: 690px;
	    height: 542px;
    }
	.bl-access .el-btn {
	    margin-top: 56px;
    }
}
/*=======================================================
map
=======================================================*/
.bl-map {
	padding: 56px 0;
	background: url(../images/access/map-bg.jpg) top center / cover no-repeat;
}
.bl-map .bl-ttl-set {
	color: #FFF9F9;
}
.bl-map .el-sec-mainTtl {
	margin-bottom: 40px;
}
.bl-map-img {
	width: 590px;
	margin: auto;
}
@media screen and (max-width: 750px) {
	.bl-map {
	    background: url(../images/access/map-bg-sp.jpg) top center / cover no-repeat;
    }
    .bl-map .el-sec-mainTtl {
	    margin-bottom: 56px;
    }
    .bl-map-img {
	    width: 100%;
    }
}
/*=======================================================
schedule
=======================================================*/
.bl-schedule {
	padding: 80px 0;
	position: relative;
}
.bl-schedule::before,
.bl-schedule::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 22px;
	left: 50%;
	transform: translateX(-50%);
}
.bl-schedule::before {
	background: transparent linear-gradient(90deg, #F566C6 0%, #566FFD 100%);
    top: 0;
}
.bl-schedule::after {
    background: transparent linear-gradient(270deg, #F566C6 0%, #566FFD 100%);
	bottom: 0;
}
.bl-schedule .el-sec-mainTtl {
	margin-bottom: 40px;
}
.bl-schedule .el-att {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}
.bl-schedule-img {
	width: 590px;
	margin: auto;
}
@media screen and (max-width: 750px) {
	.bl-schedule {
	    padding: 112px 0;
    }
    .bl-schedule::before,
    .bl-schedule::after {
	    height: 56px;
    }
    .bl-schedule .el-sec-mainTtl {
	    margin-bottom: 56px;
    }
    .bl-schedule .el-att {
	    justify-content: start;
	    margin-bottom: 24px;
    }
    .bl-schedule-img {
	    width: 100%;
    }
}