@charset "UTF-8";

/** ito-ows.jp top.css **/

body {
	font-weight: 600;
}

.contents {
	padding: 0;
}

.content {
	margin: 0 auto;
	max-width: none;
}

.content_wrap {
	padding: 10px 0 80px;
}

.content {}

/*--ローディング・アニメーション--*/
.loading {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background: #fff;
	z-index: 1000000;
	transform: translate(0, 0);
	transform-origin: 50% 0;
}

.loading:after {
	content: "";
	font-size: 10px;
	letter-spacing: 1px;
	color: #fff;
	text-align: center;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 50px;
	height: 50px;
	padding: 0;
	background: url(../images/icon.png) center top no-repeat;
	background-size: 100% auto;
	transition: 0.2s ease-out;
	animation: zooming 1s ease 0s;
	animation-iteration-count: infinite;
}

.init .loading {
	animation: upOut 0.3s ease-out 0.2s;
	animation-fill-mode: both;
}

.init .loading:after {
	opacity: 0;
}


.anim1_container {
	position: relative;
}

body .anim1 {}

body .anim1:after {
	content: "";
	display: block;
	position: absolute;
	left: -10%;
	right: -10%;
	top: 0;
	bottom: 0;
	background: #002844;
	z-index: 10;
	transform: scaleX(0.001);
	transform-origin: 0 0;
	opacity: 0;
}

body.inited .anim1.in:after {
	animation: slideInOut_l 0.8s ease-out 0s;
	animation-fill-mode: forwards;
}

body .anim1 * {
	visibility: hidden;
}

body.inited .anim1.in * {
	animation: delayIn 0.8s ease-out 0s;
	animation-fill-mode: forwards;
}

body .anim2 {
	opacity: 0;
}

body.inited .anim2.in {
	animation: zoomInBounce 0.8s ease-out 0s;
	animation-fill-mode: both;
}

body .anim3 {
	opacity: 0;
}

body.inited .anim3.in {
	animation: zoomInBounce 0.8s ease-out 0s;
	animation-fill-mode: both;
	transform-origin: bottom center;
}

body .anim4 {
	opacity: 0;
}

body.inited .anim4.in {
	animation: upIn 0.5s ease-out 0s;
	animation-fill-mode: both;
}


body.init #wc_header_txt_01 {
	animation: zoomInBounce_2 0.8s ease-out 0.2s;
	animation-fill-mode: both;
	transform-origin: 50% 0;
}

body.init #wc_header_txt_02 {
	animation: zoomInRotationBounce 0.8s ease-out 0.8s;
	animation-fill-mode: both;
}

body.init #wc_header_txt_03 {
	animation: zoomInRotationBounce 0.8s ease-out 1s;
	animation-fill-mode: both;
}


body.inited .btn_search_overray.anim2.in {
	animation: zoomInBounce 0.8s ease-out 0.2s;
	animation-fill-mode: both;
}




@keyframes slideInOut_l {
	0% {
		opacity: 0;
		transform: scaleX(0.001);
		transform-origin: 0 0;
	}

	1% {
		opacity: 1;
		transform: scaleX(0.001);
		transform-origin: 0 0;
	}

	40% {
		opacity: 1;
		transform: scaleX(1);
		transform-origin: 0 0;
	}

	60% {
		opacity: 1;
		transform: scaleX(1);
		transform-origin: 100% 0;
	}

	99% {
		opacity: 1;
		transform: scaleX(0.001);
		transform-origin: 100% 0;
	}

	100% {
		opacity: 0;
		transform: scaleX(0.001);
		transform-origin: 100% 0;
	}
}

@keyframes delayIn {
	0% {
		visibility: hidden;
	}

	45% {
		visibility: hidden;
	}

	46% {
		visibility: visible;
	}

	100% {
		visibility: visible;
	}
}

@keyframes zoomInRotationBounce {
	0% {
		opacity: 0;
		transform: scale(0.8);
		transform: rotate(10deg);
	}

	20% {
		opacity: 1;
		transform: scale(1.1);
	}

	40% {
		transform: scale(0.95);
	}

	60% {
		transform: scale(1.05);
	}

	100% {
		transform: scale(1);
		transform: rotate(0deg);
		opacity: 1;
	}
}

@keyframes rotation {
	0% {
		transform: rotate(10deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

@keyframes upOut {
	0% {
		transform: translateY(0%);
	}

	99% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(-100%);
		display: none;
	}
}

@keyframes zooming {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes zoomInBounce {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}

	20% {
		opacity: 1;
		transform: scale(1.1);
	}

	40% {
		transform: scale(0.95);
	}

	60% {
		transform: scale(1.05);
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes zoomInBounce_2 {
	0% {
		opacity: 0;
		transform: scale(0.85);
	}

	30% {
		opacity: 1;
		transform: scale(1.1);
	}

	50% {
		opacity: 1;
		transform: scale(0.93);
	}

	100% {
		transform: scale(1);
		opacity: 1;

	}
}

@keyframes upIn {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes downIn {
	0% {
		opacity: 0;
		transform: translateY(-40px);
	}

	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes zoomOutIn {
	0% {
		opacity: 0;
		transform: scale(1.1);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}




/*-----------------------------------------------------------------------------* TOP PAGE */

body.top {}

@media screen and (max-width: 767px) {
	body.top .content_title>img {
		height: calc(163 / 2 * 1px);
	}
}

/*--------------------------mv---------------------------------*/

body.top .mv_wrap {
	width: 100%;
	/* background-color: #000; */
	position: relative;
	overflow: hidden;
	padding: 0 0 3.2%;
}


@keyframes mvFade {
	0% {
		opacity: 0;
		transform: scale(1.1);
	}

	10% {
		opacity: 1;
	}

	33.33% {
		opacity: 1;
	}

	43.33% {
		opacity: 0;
		transform: scale(1);
	}

	100% {
		opacity: 0;
	}
}

#top_mv {
	position: relative;
	/* width: 100%; */
	/* height: 100%; */
	/* max-width: 1600px; */
	padding: calc(850 / 1600 * 100%) 0 0;
	overflow: hidden;
}

.mv_item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	object-fit: cover;
	filter: brightness(0.85);

	opacity: 0;
	animation: mvFade 15s infinite linear;
}

.mv_item:nth-of-type(1) {
	animation-delay: 0s;
}

.mv_item:nth-of-type(2) {
	animation-delay: 5s;
}

.mv_item:nth-of-type(3) {
	animation-delay: 10s;
}

.mv_item.off {
	opacity: 0;
}


#top_title {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	/* height: calc(100% - 100px); */
	z-index: 10;
}

#top_title img {
	position: absolute;
	width: calc(757 / 1600 * 100%);
	min-width: 500px;
	height: auto;
	left: calc(250 / 1600 * 100%);
	top: 0;
	margin: 15% 0 0;
}

#top_splash {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	z-index: 11;
}

#top_splash img {
	width: 100%;
	height: auto;
	margin: 0 auto -1px;
}

.top_nav {
	position: relative;
	margin: 0 auto;
	z-index: 12;
	width: 88%;
	max-width: 1080px;
	margin: -65px auto 0;
}

.top_nav .nav_link {
	font-size: 20px;
}

.top_nav .nav_link.current {
	display: none;
}

@media screen and (max-width: 1150px) and (min-width: 768px) {
	.top_nav {
		position: relative;
		margin-top: 0;

	}
}

@media screen and (max-width: 767px) {
	.top_nav {
		display: none;
	}

	body.top .mv_wrap {
		padding-bottom: 15%;
	}

	#top_mv {
		padding: calc(1100 / 750 * 100%) 0 0;
	}

	.mv_item {}

	.mv_item.off {
		opacity: 0;
	}


	#top_title {}

	#top_title img {
		position: absolute;
		width: calc(659 / 750 * 100%);
		min-width: 0;
		left: 0;
		right: 0;
		margin: 13% auto 0;
	}

	#top_splash {}

	#top_splash img {
		width: 100%;
		height: auto;
	}

	.top_nav {
		position: relative;
		margin: 0 auto;
		z-index: 12;
		width: 88%;
		max-width: 1080px;
		margin: -65px auto 0;
	}

	.top_nav .nav_link {
		font-size: 20px;
	}
}

/*--------------------------news---------------------------------*/

/*news*/
#news {
	margin: 45px auto 0;
}

#news .news_title {
	margin: 20px 0 0 10px;
}

#news .content_body {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	border-top: 0.5px solid #c4c7cc;
	width: 100%;
	gap: 12%;
}

#news .content_title_link {
	flex: 0 0 auto;
	cursor: pointer;
	transform: skew(-10deg, 0);
	height: auto;
}

#news .content_title_link:hover {
	text-decoration: none;
}

#news .content_title img {
	width: auto;
	height: auto;
	display: block;
}

#news .txtlist {
	flex: 1 1 auto;
	min-width: 0;
}

#news .txtlist .txtlist_item {
	border-bottom: 0.5px solid #c4c7cc;
}

#news .txtlist .txtlist_item:hover {
	text-decoration: none;
}

#news .txtlist .txtlist_item:hover .txtlist_item_txt {
	text-decoration: underline;
}

@media screen and (max-width:767px) {
	#news {
		margin: 0 auto 0;
	}

	#news .news_title {
		width: 80px;
		margin: 13px 0 0;
		padding: 0 0 10px;
	}

	#news .content_body {
		flex-direction: column;
		border-top: none;
		gap: 0;
	}

	#news .content_title_link {
		flex: auto;
		width: 100%;
		border-bottom: 0.5px solid #c4c7cc;
		margin: 0 auto auto;
	}

	#news .txtlist {
		flex: auto;
		margin-left: 14%;
	}

	#news .txtlist .txtlist_item {
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}

	.txtlist_item_date {
		font-size: 11px;
	}

	.txtlist_item_txt {
		margin: 0;
		font-size: 14px;
		letter-spacing: 1px;
	}
}


/*--------------------------features---------------------------------*/
#features {
	background: url('../images/top_1_bg_pc.jpg') center top no-repeat #fff;
	background-size: cover;
	padding: 200px 0;
	margin: 30px auto -140px;
	clip-path: polygon(0px 140px, 100% 0px, 100% 100%, 0px 100%);
}

#features .sec {
	margin-top: 40px;
	gap: 40px;
	align-items: flex-start;
}

#features .sec_item {
	--boxs-gap: 80px;
	gap: 30px;
	margin: 0;
}

#features .sec_item h3 {
	margin: 0;
}

#features .sec_item_img {
	width: 100%;
}

#features .sec_item p {
	margin: 0;
}

@media screen and (max-width: 767px) {
	#features {
		background-image: url('../images/top_1_bg_sp.jpg');
		clip-path: polygon(0px 80px, 100% 0px, 100% 100%, 0px 100%);
		padding: 40px 0 110px;
		margin: 30px auto -80px;
	}

	#features .sec {
		gap: 0;
	}

	#features .sec h3 img {
		height: 100px;
	}

	#features .sec_item {
		gap: 15px;
	}

	#features .sec_item .sec_item_img,
	#features .sec_item_img_inspector::before,
	#features .sec_item_img_inspector::after {
		animation-duration: 10s;
		animation-iteration-count: infinite;
	}

	#features .sec_item:nth-child(2) .sec_item_img,
	#features .sec_item_img_inspector::after {
		animation-delay: -5s;
	}

	#features .sec_item .sec_item_img {
		animation-name: featureImgFade;
	}

	#features .sec_item:nth-child(2) .sec_item_img {
		margin-top: calc(-100% * (480 / 650));
	}

	#features .sec_item_img_inspector {
		height: 5px;
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: -5px;
	}

	#features .sec_item_img_inspector::before,
	#features .sec_item_img_inspector::after {
		content: "";
		clip-path: polygon(10% 0,
				100% 0,
				calc(100% - 10%) 100%,
				0 100%);
		width: 30px;
		height: 100%;
		bottom: -30px;
		left: 50%;
		transform: translateY(50%);
		background-color: #d8dedf;
		animation-name: featureImgInspector;
	}

	#features .sec_item p {
		line-height: 1.6;
		font-size: 14px;
	}


	@keyframes featureImgFade {
		0% {
			opacity: 0;
		}

		10% {
			opacity: 1;
		}

		50% {
			opacity: 1;
		}

		60% {
			opacity: 0;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes featureImgInspector {
		0% {
			background-color: #d8dedf;
		}

		10% {
			background-color: #002844;
		}

		50% {
			background-color: #002844;
		}

		60% {
			background-color: #d8dedf;
		}

		100% {
			background-color: #d8dedf;
		}
	}
}


@media screen and (min-width: 768px) {
	#features .sec .sec_item:first-child {
		width: calc((100% - var(--boxs-gap) / 2)/10 * 6);
	}

	#features .sec .sec_item:last-child {
		width: calc((100% - var(--boxs-gap) / 2)/10 * 4);
	}

	#features .sec-2 {
		flex-direction: row-reverse;
	}

	#features .sec-2 .box {
		align-items: flex-end;
	}
}


/*--------------------------course---------------------------------*/
#course {
	background: url('../images/top_2_bg_pc.jpg') center top no-repeat #0b0d12;
	background-size: cover;
	color: #fff;
	margin-top: 0;
	padding: 200px 0;
	clip-path: polygon(0px 140px, 100% 0px, 100% 100%, 0px calc(100% - 140px));
}

#course .content_title {
	/* margin: 0; */
}

#course .content_lead {
	text-align: center;
	margin: 10px auto 0;
	line-height: 2;
	letter-spacing: 1px;
}

@media screen and (max-width: 600px) {
	#course .content_lead {
		text-align: justify;
	}
}

#course .sec {
	margin-top: 40px;
	width: 100%;
}

#course .sec>div {
	margin-top: 20px;
	margin: 50px 0 auto;
}

#course .sec_imgs {
	position: relative;
	width: 100%;
}

#course .sec_imgs .sec_img:first-child {
	width: calc(1000 / 1100 * 100%);
}

#course .sec_imgs .sec_img:last-child {
	position: absolute;
	right: 0;
	bottom: 0;
	transform: translateY(60%);
	max-width: calc(43%);
}

#course .sec_texts {
	margin-top: 36px;
	width: 50%;
	padding: 0 40px 0 0;
}

#course .sec_texts h4 {
	margin-top: 40px;
}

#course .sec_texts p {
	margin-top: 40px;
}

#course .sec-2,
#course .sec-2 h3 img,
#course .sec-2 .sec_imgs,
#course .sec-2 .sec_img,
#course .sec-2 .sec_texts {
	float: right;
}

#course .sec-2 .sec_imgs .sec_img:last-child {
	right: auto;
	left: 0;
}

#course .sec-2 .sec_texts {
	padding: 0 0 0 40px;
}

@media screen and (max-width: 767px) {
	#course {
		background-image: url('../images/top_2_bg_sp.jpg');
		clip-path: polygon(0px 80px, 100% 0px, 100% 100%, 0px 100%);
		padding: 70px 0 150px;
	}

	body #course h3 {
		text-align: left;
		overflow: hidden;
		float: none;
	}

	body #course h3 img {
		height: 48px;
		margin: 0;

	}

	#course .sec .sec_imgs {
		margin: 20px 0 0;
	}

	#course .sec_texts {
		width: 100%;
	}

	#course .sec_texts h4 img {
		height: 55px;
		width: auto;
	}

	#course .sec-2 .sec_texts h4 {
		margin-top: 10px;
	}

	#course .sec_texts p {
		margin: 20px auto 0;
	}

	#course .sec-2,
	#course .sec-2 h3 img,
	#course .sec-2 .sec_imgs,
	#course .sec-2 .sec_img,
	#course .sec-2 .sec_texts {
		/* float:none; */
	}

	#course .sec-2 .sec_texts {
		margin-top: 21%;
	}

}

/*--------------------------リンクたち---------------------------------*/

#links {
	background: url('../images/top_3_bg_pc.jpg') center bottom no-repeat;
	background-size: cover;
	color: #fff;
	margin-top: -140px;
	padding: 140px 0;
	clip-path: polygon(0 0, 100% 140px, 100% calc(100% - 140px), 0 100%);

}

#links .content_inner {
	width: 100%;
	gap: 20px;
	padding: 80px 0;
}

#links .link-item {
	width: calc((100% - 20px * 2)/3);
}

@media screen and (max-width: 767px) {
	#links {
		background-image: url('../images/top_3_bg_sp.jpg?');
		clip-path: polygon(0 0, 100% 80px, 100% calc(100% - 80px), 0 100%);
		margin-top: -80px;
		padding: 80px 0;
	}

	#links .link-item {
		width: 88%;
	}
}

/*--------------------------partner---------------------------------*/
#partner {
	padding-bottom: 50px;

}

#partner .sec {
	width: 100%;
}

#partner .sec_items {
	margin-top: 40px;
}

#partner a.sec_item:hover {
	text-decoration: none;
}

#partner .sec-1 .sec_item_inner {
	justify-content: space-between;
	gap: 0;
	padding: 0;
	align-items: flex-start;
}

#partner .sec-1 .sec_item_inner .box {
	width: 50%;
	margin: 0;
}

#partner .sec-1 .sec_item_inner .sec_img.box {
	width: calc(500 / 1100 * 100%);
}

#partner .sec-1 .sec_item_inner h4 {
	font-size: 20px;
	margin-top: -4px;
}

#partner .sec-2 .boxs {
	justify-content: flex-start;
	align-items: flex-start;
	gap: calc((1 - (360 / 1100 * 3)) / 2 * 100%);
}

#partner .sec-2 .boxs .box {
	width: calc(360 / 1100 * 100%);
	margin: 0;
}

#partner .sec-2 .boxs .box img {
	width: 100%;
	height: auto;
}

#partner .sec-3 .boxs {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	min-width: 0;
}

#partner .sec-3 .boxs .box {
	width: 100%;
	height: 100%;
	margin: 0;
	aspect-ratio: 698/315;
	min-width: 0;
}

#partner .sec-3 .boxs .box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	min-width: 0;
}

@media screen and (max-width: 767px) {
	#partner {
		padding-bottom: 80px;

	}

	body.top #partner .content_title>img {
		height: calc(93 / 2 * 1px);
	}

	#partner h3 img {
		height: 26px;
		width: auto;
	}


	#partner .sec_items {
		margin-top: 25px;
	}

	#partner .sec-1 .sec_item_inner .box {
		width: 100%;
		margin: 0;
		flex: 0 0 calc(50% - 40px);
	}


	#partner .sec-1 .sec_item_inner .sec_img.box {
		width: 100%;
		margin: 0 0 30px;
	}

	#partner .sec-1 p {
		margin-top: 15px;
	}

	#partner .sec-2 .boxs {
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 2%;


	}

	#partner .sec-2 .boxs .box {
		width: 49%;
	}

	#partner .sec-2 .boxs .box {
		margin: 2% 0 0;
	}



	#partner .sec-3 .boxs {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 12px;
	}

}

/* ito-ows.jp top.css */