@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
/* mainVisual */
.mainVisual {
	margin-bottom: 10rem;
	position: relative;
	aspect-ratio: 144/63;
	background: url(../img/index/main_photo.jpg) no-repeat left top / cover;
}
.mainVisual::after {
	position: absolute;
	top: 0;
	right: 0.9rem;
	width: 41.1rem;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	background: url(../img/index/main_img01.png) no-repeat right top / cover;
	content: "";
}
.mainVisual .areaBox {
	padding: 0.8rem 10rem 10rem;
	max-width: 174rem;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}
.mainVisual .areaBox .hTitle {
	margin-bottom: 5.8rem;
	color: #fff;
	font-size: 7rem;
	font-weight: 700;
	letter-spacing: 0.28rem;
	line-height: 1;
}
.mainVisual .areaBox .title {
	margin-bottom: 1.8rem;
	color: #fff;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.45;
}
.mainVisual .areaBox .title img {
	display: block;
	width: 52.9rem;
}
.mainVisual .areaBox .text {
	margin-bottom: 5rem;
	font-weight: 700;
	color: #fff;
}
#main .newsBox {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	z-index: 2;
}
#main .newsBox .innerBox {
    margin-left: auto;
    width: 100rem;
    min-height: 10rem;
    overflow: hidden;
    border-top-left-radius: 2rem;
    display: flex;
    background: rgba(255, 255, 255, 1);
    gap: 2rem;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 20;
}
#main .newsBox .ttl {
	margin: 1.5rem 0 1.5rem 3rem;
    width: 14rem;
    display: flex;
    align-items: center;
    font-weight: 700;
    flex-shrink: 0;
	border-right: 1px solid #555;
}
#main .newsBox .ttl .en {
	margin: 0.4rem 0 0;
	display: block;
	font-family: "nicoca_v2-5";
	font-size: 1.4rem;
	font-weight: 400;
	color: #CC0012;
	letter-spacing: 0.182rem;
	line-height: 1;
}
#main .newsBox .subNewsBox {
    padding: 1rem 6rem 1rem 0;
    flex: 1;
    position: relative;
}
#main .newsBox .newsUl li {
    display: flex;
    overflow-y: auto;
	align-items: center;
	min-height: 8rem;
}
#main .newsBox .newsUl .subBox {
	display: flex;
	align-items: center;
}
#main .newsBox .slick-arrow {
    width: 3rem;
    height: 3rem;
    font-size: 0;
    position: absolute;
    right: 1.5rem;
    z-index: 4;
    transition: 0.3s;
    box-shadow: none;
    cursor: pointer;
    border: none;
    border-radius: 0;
    background: url(../img/common/icon03.png) no-repeat center center / 3rem;
    opacity: 0;
    pointer-events: none;
}
#main .newsBox .slick-arrow.show {
    opacity: 1;
    pointer-events:inherit;
}
#main .newsBox .slick-prev {
    top: calc(50% - 3.5rem);
}
#main .newsBox .slick-next {
    bottom: calc(50% - 3.5rem);
    transform: rotate(180deg);
}
#main .newsBox .newsUl a {
    display: block;
}
#main .newsBox .newsUl time {
	width: 9.3rem;
    display: block;
    font-size: 1.4rem;
}
#main .newsBox .newsUl p {
	flex: 1;
    line-height: 1.5;
}
#main .newsBox .newsSwiper {
    width: 100%;
    min-width: 0;
}
#main .newsBox .swiper-wrapper {
    flex-direction: column;
}
#main .newsBox .newsSwiper .moreItem .swiper-slide {
    width: 100%;
    height: auto !important;
    opacity: 0;
}
#main .newsBox .newsSwiper .moreItem .swiper-slide-active {
    opacity: 1;
    transition: .3s ease;
}
#main .mainVisual .scrollBox {
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 2.2rem;
}
#main .mainVisual .scrollBox img {
	width: 0.7rem;
}
#main .mainVisual .scrollBox a {
	padding-bottom: 14.5rem;
	position: relative;
	display: block;
}
#main .mainVisual .scrollBox a:hover {
	opacity: 0.7;
}
#main .mainVisual .scrollBox a .line {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 13.5rem;
	background: #fff;
	overflow: hidden;
}
#main .mainVisual .scrollBox a .line::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 4.5rem;
	background: #CC0012;
	content: '';
	animation: scrollbar 2s ease-out infinite;
}
@keyframes scrollbar {
	0% {
		transform: translateY(-100%);
	}
    100% {
		transform: translateY(305%);
	}
}
@media all and (min-width: 897px) {
	#main .newsBox .slick-arrow:hover {
		opacity: 0.7;
	}
}
@media all and (min-width: 1920px) {
	.mainVisual {
		margin-bottom: 8rem;
	}
	.mainVisual .areaBox {
		padding: 0.8rem 9rem 10rem;
	}
}
@media all and (max-width: 896px) {
	.mainVisual {
		margin-bottom: 6rem;
		width: 100%;
		aspect-ratio: 39/59;
		background-image: url(../img/index/main_photo_sp.jpg);
		overflow: hidden;
		max-height: 100rem;
	}
	.mainVisual::after {
		top: auto;
		bottom: 0;
		right: -5.1rem;
		width: 24.6rem;
		height: 37.8rem;
	}
	.mainVisual .areaBox {
		padding: 0 2rem 10rem;
		max-width: 100%;
	}
	.mainVisual .areaBox .hTitle {
		margin-bottom: 2.3rem;
		font-size: 4.2rem;
		letter-spacing: 0.168rem;
		line-height: 1.2;
	}
	.mainVisual .areaBox .title {
		margin-bottom: 1.3rem;
		font-size: 2rem;
		line-height: 1.2;
	}
	.mainVisual .areaBox .title img {
		margin-bottom: 0.7rem;
		width: 27.9rem;
	}
	.mainVisual .areaBox .text {
		margin-bottom: 2.2rem;
		font-size: 1.12rem;
		line-height: 1.6;
	}
	#main .newsBox .innerBox {
		width: calc(100% - 4.5rem);
		min-height: 9.5rem;
		border-top-left-radius: 1.4rem;
		gap: 0;
		bottom: -1px;
	}
	#main .newsBox .ttl {
		margin: 1.3rem 0 1.3rem 1.5rem;
		width: 8.8rem;
		font-size: 1.1rem;
	}
	#main .newsBox .ttl .en {
		font-size: 1rem;
		letter-spacing: 0.13rem;
	}
	#main .newsBox .subNewsBox {
		padding: 0.7rem 4rem 0.8rem 0;
		flex: 1;
		position: relative;
	}
	#main .newsBox .newsUl li {
		padding: 0 0 0 1rem;
		min-height: 8rem;	
	}
	#main .newsBox .newsUl li.li01 {
		padding-top: 1rem;
	}
	#main .newsBox .newsUl .subBox {
		display: block;
	}
	#main .newsBox .slick-arrow {
		width: 1.6rem;
		height: 1.6rem;
		right: 1rem;
		background-size: 1.6rem auto;
	}
	#main .newsBox .slick-prev {
		top: calc(50% - 1.8rem);
	}
	#main .newsBox .slick-next {
		bottom: calc(50% - 1.9rem);
	}
	#main .newsBox .newsUl time {
		margin-bottom: 0.5rem;
		width: auto;
		font-size: 1rem;
	}
	#main .newsBox .newsUl p {
		line-height: 1.2;
		font-size: 1.1rem;
	}
	#main .newsBox .swiper-wrapper {
		display: block;
	}
	#main .mainVisual .scrollBox {
		left: 2rem;
	}
	#main .mainVisual .scrollBox img {
		width: 0.41rem;
	}
	#main .mainVisual .scrollBox a {
		padding-bottom: 8.7rem;
	}
	#main .mainVisual .scrollBox a .line {
		height: 8.1rem;
	}
	#main .mainVisual .scrollBox a .line::after {
		height: 2.7rem;
	}
}
/* about */
#main .about {
	margin-bottom: 10rem;
}
#main .about .innerBox {
	align-items: flex-start;
}
#main .about .innerBox .lBox {
	padding: 9.5rem 5rem 16rem 0;
	width: calc(50% - 16rem);
	border-radius: 0 2rem 2rem 0;
	background: url(../img/index/about_img01.png) no-repeat left top / 20rem, linear-gradient(225deg, #333 0%, #555 100%);
	min-height: 56rem;
}
#main .about .innerBox .lBox .sub {
	margin-left: auto;
	width: 35rem;
}
#main .about .innerBox .lBox .text {
	color: #fff;
	line-height: 2;
}
#main .about .innerBox .rBox {
	margin: 7.8rem 0 16rem;
	width: calc(50% + 6rem);
}
#main .about .innerBox .rBox .sub {
	width: 56rem;
}
#main .about .innerBox .rBox .title {
	margin-bottom: 2.1rem;
	font-size: 3.6rem;
	color: #000;
	font-weight: 700;
	letter-spacing: 0.144rem;
}
#main .about .innerBox .rBox .text {
	line-height: 2;
}
#main .about .content {
	margin-top: -14.2rem;
}
#main .about .linkBox li {
	width: 50%;
}
#main .about .linkBox li:nth-child(2n) .comImgBox a .photoBox {
	border-radius: 0 2rem 2rem 0;
}
#main .about .linkBox .comImgBox a .photoBox {
	border-radius: 2rem 0 0 2rem;
}
@media all and (max-width: 896px) {
	#main .about {
		margin-bottom: 6rem;
	}
	#main .about .innerBox {
		display: block;
	}
	#main .about .innerBox .lBox {
		margin-bottom: 3.1rem;
		padding: 4rem 4rem 1rem;
		width: calc(100% - 2rem);
		background: url(../img/index/about_img01.png) no-repeat left -3rem top / 12rem, linear-gradient(225deg, #333 0%, #555 100%);
		min-height: 20.6rem;
	}
	#main .about .innerBox .lBox .sub {
		width: auto;
	}
	#main .about .innerBox .rBox {
		margin: 0 2rem 3.3rem;
		width: auto;
	}
	#main .about .innerBox .rBox .sub {
		width: auto;
	}
	#main .about .innerBox .rBox .title {
		margin-bottom: 2.1rem;
		font-size: 2.2rem;
		letter-spacing: 0.088rem;
	}
	#main .about .content {
		margin-top: 0;
	}
	#main .about .linkBox {
		display: block;
		border-radius: 0;
	}
	#main .about .linkBox li {
		margin-bottom: 2rem;
		width: auto;
	}
	#main .about .linkBox li:last-child {
		margin-bottom: 0;
	}
	#main .about .linkBox .comImgBox a .photoBox {
		border-radius: 2rem !important;
	}
}
/* course */
#main .course {
	margin-bottom: 10rem;
}
#main .course .innerBox {
	align-items: flex-start;
	flex-direction: row-reverse;
}
#main .course .innerBox .lBox {
	margin: 7.8rem 0 16rem;
	width: calc(50% + 6rem);
}
#main .course .innerBox .lBox .sub {
	margin-left: auto;
	width: 56rem;
}
#main .course .innerBox .lBox .title {
	margin-bottom: 2.1rem;
	font-size: 3.6rem;
	color: #000;
	font-weight: 700;
	letter-spacing: 0.144rem;
}
#main .course .innerBox .lBox .text {
	line-height: 2;
}
#main .course .innerBox .rBox {
	padding: 9.5rem 0 16rem 8rem;
	width: calc(50% - 16rem);
	border-radius: 2rem 0 0 2rem;
	background: url(../img/index/course_img01.png) no-repeat right top / 42rem, linear-gradient(225deg, #333 0%, #555 100%);
	min-height: 75rem;
}
#main .course .innerBox .rBox .sub {
	width: 35rem;
}
#main .course .innerBox .rBox .text {
	line-height: 2;
	color: #fff;
}
#main .course .content {
	margin-top: -13.8rem;
}
#main .course .linkBox li {
	margin: 0 0 3rem 6rem;
	width: 80rem;
}
#main .course .linkBox li:last-child {
	margin-bottom: 0;
}
#main .course .linkBox li:nth-child(2) {
	margin-left: 16rem;
}
#main .course .linkBox li:nth-child(3) {
	margin-left: 26rem;
}
@media all and (max-width: 896px) {
	#main .course {
		margin-bottom: 6rem;
	}
	#main .course .innerBox {
		align-items: flex-start;
		display: block;
	}
	#main .course .innerBox .lBox {
		margin: 0 2rem 3.2rem;
		width: auto;
	}
	#main .course .innerBox .lBox .sub {
		width: auto;
	}
	#main .course .innerBox .lBox .title {
		margin-bottom: 1.9rem;
		font-size: 2.2rem;
		letter-spacing: 0.088rem;
	}
	#main .course .innerBox .rBox {
		margin: 0 0 3.3rem auto;
		padding: 4rem 4rem 3rem;
		width: calc(100% - 2rem);
		background: url(../img/index/course_img01.png) no-repeat right top -0.9rem / 25rem, linear-gradient(225deg, #333 0%, #555 100%);
		min-height: 23.4rem;
	}
	#main .course .innerBox .rBox .sub {
		width: auto;
	}
	#main .course .content {
		margin-top: 0;
	}
	#main .course .linkBox li {
		margin: 0 0 2rem;
		width: auto;
	}
	#main .course .linkBox li:nth-child(2) {
		margin-left: 0;
	}
	#main .course .linkBox li:nth-child(3) {
		margin-left: 0
	}
}
/* outBox */
#main .outBox .bg {
	min-height: 27rem;
	width: calc(50% + 24rem);
	border-radius: 0 2rem 2rem 0;
	background: url(../img/index/out_img01.png) no-repeat left top / 23rem auto, linear-gradient(225deg, #333 0%, #555 100%);
}
#main .outBox .content {
	margin-top: -17rem;
	max-width: 120rem;
}
#main .outBox .linkBox li {
	width: calc(100% / 3);
}
#main .outBox .linkBox .comImgBox a .photoBox {
	border-radius: 2rem 0 0 2rem;
}
#main .outBox .linkBox li:nth-child(2n) .comImgBox a .photoBox {
	border-radius: 0;
}
#main .outBox .linkBox li:nth-child(3n) .comImgBox a .photoBox {
	border-radius: 0 2rem 2rem 0;
}
#main .outBox .linkBox .comImgBox .btn {
	padding: 0.9rem 6.7rem 0.7rem 2rem;
	font-size: 1.6rem;
}
@media all and (max-width: 896px) {
	#main .outBox .bg {
		min-height: 16.2rem;
		width: calc(100% - 10rem);
		border-radius: 0 1.2rem 1.2rem 0;
		background: url(../img/index/out_img01.png) no-repeat left top / 13.8rem auto, linear-gradient(225deg, #333 0%, #555 100%);
	}
	#main .outBox .content {
		margin-top: -8rem;
	}
	#main .outBox .linkBox {
		display: block;
		border-radius: 0;
	}
	#main .outBox .linkBox li {
		margin-bottom: 2rem;
		width: auto;
	}
	#main .outBox .linkBox li:last-child {
		margin-bottom: 0;
	}
	#main .outBox .linkBox .comImgBox a .photoBox {
		border-radius: 2rem !important;
	}
	#main .outBox .linkBox .comImgBox .btn {
		padding: 1rem 5.7rem 0.5rem 1.8rem;
		font-size: 1.4rem;
		border-top-right-radius: 1.8rem;
		background-position: right 2.6rem top calc(50% + 0.2rem);
	}
}