@charset "utf-8";
@media (min-width: 768px) {

	/* mainVisual
	#MARK: MV
-----------------------------------------*/

	.mainVisual {
		/* background: url(../img/top/mv_bg.jpg) bottom left / calc(50% + 683px) 560px no-repeat; */
		position: relative;
		height: 700px;

		&::before {
			content: "";
			background: url(../img/top/mv_bg.jpg) center / cover;
			position: absolute;
			left: 0;
			bottom: 0;
			height: 560px;
			width: 100%;
		}

		.mv__images {
			margin: 0;
			padding: 0;
			position: absolute;
			left: max(50% - 341px, 0px);
			right: min(50% - 683px, 0px);
			/* width: 1024px; */
			height: 640px;
			overflow: hidden;

			img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				opacity: 0;
				scale: 1;
				transition: scale 6s, opacity 2s;

				&.-scaleup {
					scale: 1.1;
					opacity: 1;
					transition: scale 8s, opacity 2s;
				}
			}
		}

		.mv__text {
			position: absolute;
			top: 218px;
			left: max(50% - 603px, 5.86%);

			.mv__catch {
				font-family: 'Noto Serif JP', serif;
				font-size: 36px;
				font-weight: 700;
				line-height: calc(56 / 36);
				color: white;
				margin-bottom: 55px;
			}

			.mv__en {
				color: white;
				font-size: 56px;
				line-height: calc(60 / 56);

				small {
					font-size: 15px;
					line-height: 1.6;
				}
			}
		}
	}



	/* Opening
-----------------------------------------*/
	/* .Opening {
		top: 0px;
		position: relative;
		background-color: #FFF;
		height: 640px !important;
		left: min(50% - 341px, 341px);

	}

	.Opening ul li {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 640px !important;

	}

	.Opening ul li img.Opening__text {
		position: absolute;
		top: 50%;
		right: 5%;
		z-index: 9;
		width: 600px;
	}

	.Opening ul li span {}

	.Opening ul li span img.Opening__img {

		width: 100%;
		position: relative;
	}

	ol,
	ul {
		list-style: none;
	} */


	/* Information
-----------------------------------------*/
	.infoArea {
		background: #F2F4F5;
		position: relative;
		overflow: hidden;
		margin-bottom: 0px;
		width: 90%;
		max-width: 1200px;
		margin: auto;
		padding-block: 80px;
		padding-inline: max(50% - 600px, 5%);
	}

	.infoArea h2 {
		font-family: Arial, Helvetica, "sans-serif";
		color: #333333;
		font-size: 30px;
		width: 260px;
		position: absolute;
		top: 80px;

		small {
			font-size: 15px;
		}
	}

	.infoArea .infoBox {
		height: 600px;
		overflow: hidden;
		margin-left: 260px;
		margin-bottom: 0px;

		.exCfx {
			margin-top: 0;
		}
	}

	.infoArea .btn {
		color: white;
		background: #82AE46;
		text-align: center;
		display: inline-block;
		width: calc(100% - 260px);
		margin-left: 260px;
		padding: 10px 0 10px 0;

		&:hover {
			text-decoration: none;
		}
	}

	/* study
-----------------------------------------*/
	.study {
		background: url(../img/top/research_bg.jpg) center / cover no-repeat;
		clear: both;
		padding: 60px max(50% - 600px, 5%) 80px;
	}

	.study .inner {
		/* width: 1200px; */
		margin: 0;
		overflow: hidden;

		.study__subtitle {
			font-family: 'Poppins', sans-serif;
			font-size: 56px;
			line-height: 85px;
			color: white;
			text-align: center;
		}

		h2 {
			font-size: 15px;
			color: white;
			font-weight: normal;
			text-align: center;
		}

		p {
			margin-bottom: 10px;
			overflow: hidden;
		}
	}

	.study .inner .studyLinks {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(3, max-content);
		gap: 0 25px;
		margin-top: 50px;

		a {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 3;

			.studyBox {
				display: grid;
				grid-template-rows: subgrid;
				grid-row: span 3;
				background-color: #fff;
				padding-bottom: 18px;
				overflow: hidden;
			}
		}
	}

	.study .inner .studyBox p {
		/* margin: 10px 15px 0 15px; */
		margin: 0;
		text-align: center;

		&:last-child {
			padding-inline: 15px;
		}
	}

	.study .inner .studyBox .featureimg {
		overflow: hidden;
		width: 100%;
		height: 100%;
		margin: 0 !important;
	}

	.study .inner .studyBox .featureimg img {
		transition: 0.2s;
	}

	.studyBox .ya {
		margin-left: 5px;
		margin-bottom: 2px;
	}

	.study .inner .end {
		margin-right: 0px;
	}

	.study .inner a {
		text-decoration: none;
		border: 0;
		--keycolor: #333;
	}

	.studyBox .cat {
		font-size: 20px;
		color: var(--keycolor);
		display: inline-block;
		width: 100%;
		margin-bottom: 12px;
		border-top: solid 3px var(--keycolor);
		padding-top: 8px;
		transition: color 0.2s;
	}

	.study .inner a:hover img {
		opacity: 0.6;
		transition: 0.2s;
		-webkit-transform: scale(1.05);
		/* 元の大きさに戻す */
		transform: scale(1.05);
	}

	.study .inner a:hover p {
		color: #fff;
		transition: 0.2s;
	}

	.study .inner a:hover .studyBox {
		/* background-color: #82AE46; */
		background-color: var(--keycolor);

		.cat {
			color: white;
		}
	}

	/* feature&staff
-----------------------------------------*/
	.features {
		width: 100%;
		overflow: hidden;
		padding: 50px 0 50px 0 !important;
	}

	.features .inner {
		width: 970px;
		margin: auto;
	}

	.features .inner__new {
		display: flex;
		gap: 20px 5%;
		max-width: 1200px;
		justify-content: center;
		padding-inline: max(50% - 600px, 5%);

		.imageBox {
			width: 0;
			flex-grow: 1;
			position: relative;

			img {
				position: absolute;
				width: 100%;
				aspect-ratio: 3 / 2;
				object-fit: cover;
				z-index: -1;
			}

			&::after {
				content: "";
				background: #4C9DBF99;
				display: inline-block;
				position: absolute;
				z-index: -1;
				top: 0;
				width: 100%;
				aspect-ratio: 3 / 2;
				mix-blend-mode: multiply;
			}

			.features__title__en {
				font-size: 36px;
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				aspect-ratio: 3 / 2;
				margin-bottom: 0;
				transition: translate 0.3s;
			}

			.features__title__ja {
				font-size: 15px;
				text-align: center;
				margin-block: 21px 0;
			}

			&:hover {
				text-decoration: none;

				.features__title__en {
					translate: 0 -12px;
				}
			}
		}
	}

	.DISABLED.imageBox {
		width: 280px;
		height: 200px;
		overflow: hidden;
		margin: 0 15px 30px 15px;
		position: relative;
		background-color: #ccc;
		float: left;
		border-radius: 0;
	}

	.DISABLED.imageBox .caption {
		-webkit-transform: scale(1.0);
		/* 1.2倍の大きさで表示 */
		transform: scale(1.0);
	}

	.DISABLED.imageBox .caption img {
		max-width: 100%;
	}

	.DISABLED.imageBox .mask {
		width: 280px;
		height: 200px;
		position: absolute;
		top: -35px;
		/* 枠の上に置いて表示しない */
		left: 0;
		background-color: rgba(0, 0, 0, 0);
		-webkit-transition: all 0.4s ease;
		transition: all 0.4s ease;
		opacity: 1;
	}

	.DISABLED.imageBox:hover .mask {
		top: -45px;
		/* 下に降りてくるように見せる */
		opacity: 1;
	}

	.DISABLED.imageBox .companyImg {
		-webkit-transition: all 0.4s ease;
		transition: all 0.4s ease;
		-webkit-transform: scale(1.0);
		/* 1.2倍の大きさで表示 */
		transform: scale(1.0);
	}

	.DISABLED.imageBox:hover .companyImg {
		-webkit-transform: scale(1.1);
		/* 元の大きさに戻す */
		transform: scale(1.1);
		opacity: 1;
	}


	/* map
-----------------------------------------*/
	.mapArea {
		overflow: hidden;
		background-color: #82AE46;
		clear: both;
		padding: 50px 0 50px 0;
		overflow: hidden;
	}

	.mapArea .inner {
		width: 1200px;
		margin: auto;
	}

	.mapArea .inner iframe {
		width: 750px;
		height: 450px;
		float: left;
	}

	.mapArea .inner .mapInfo {
		float: right;
		width: 380px;
	}

	.mapArea .inner .mapInfo .lTxt {
		font-size: 20px;
	}

	.mapArea .inner .mapInfo p {
		color: #fff !important;
	}

	.mapArea .inner .mapInfo .access {
		line-height: 34px;
		font-weight: 700;
		color: #82AE46;
		background: white;
		text-align: center;
		display: inline-block;
		width: 134px;
	}
}



@media (max-width: 1200px) {
	/* tablet用 */


	/* Opening
-----------------------------------------*/
	.Opening {
		top: 0px;
		position: relative;
		background-color: #FFF;

	}

	.Opening ul li {
		position: relative;
		overflow: hidden;
		width: 100%;
	}

	.Opening ul li img.Opening__text {
		position: absolute;
		top: 50%;
		right: 5%;
		z-index: 9;
		width: 600px;
	}

	.Opening ul li span {}

	.Opening ul li span img.Opening__img {

		width: 100%;
		position: relative;
	}

	ol,
	ul {
		list-style: none;
	}

	/* study
-----------------------------------------*/

	.study {
		width: 100%;
		/* background-color: #EFEFEF; */
		clear: both;
	}

	.study .inner {
		width: 90%;
		/* margin: 5% auto 2% auto; */
	}

	.study .inner h2 {
		font-size: 24px;
		/* color: #405ABC; */
		font-weight: normal;
		letter-spacing: 2px;
		/* margin-top: 5%; */
		/* margin-bottom: 2% !important; */
	}

	.study .inner p {
		margin-bottom: 18px;
	}

	.study .inner .studyLinks {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		width: 100%;

		a:nth-last-child(-n + 2) {
			margin-top: 25px;
		}
	}

	.study .inner .studyBox {
		/* width: 45%; */
		/* margin: 2%; */
		display: inline-block;
		vertical-align: top;
	}

	.studyBox .cat {
		font-size: 16px;
		/* font-weight: bold; */
	}

	.studyBox .ya {
		margin-left: 5px;
		margin-bottom: 2px;
	}

	.study .inner .end {
		margin-right: 0px;
	}

	.study .inner a:hover img {
		opacity: 0.6;
	}






	/* map
-----------------------------------------*/
	.mapArea {
		overflow: hidden;
		background-color: #82AE46;
		clear: both;
		padding: 5% 0 5% 0;
		overflow: hidden;
	}

	.mapArea .inner {
		width: 100%;
		margin: auto;
	}

	.mapArea .inner iframe {
		width: 100%;
		height: 400px;
		margin-bottom: 5%;
	}

	.mapArea .inner .mapInfo {
		width: 90%;
		margin: auto;
	}

	.mapArea .inner .mapInfo .lTxt {
		font-size: 20px;
	}

	.mapArea .inner .mapInfo p {
		color: #fff !important;
	}



}


@media (max-width: 767px) {

	/* mainVisual
	*/

	.mainVisual {
		position: relative;
		height: 630px;

		&::before {
			content: "";
			background: url(../img/top/mv_bg.jpg) center / cover;
			position: absolute;
			left: 0;
			bottom: 0;
			height: 560px;
			width: 100%;
		}

		.mv__images {
			height: 600px;
			position: absolute;
			width: 82%;
			right: 0;
			margin: 0;
			padding: 0;
			overflow: hidden;

			img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				opacity: 0;
				scale: 1;
				transition: scale 6s, opacity 2s;

				&.-scaleup {
					scale: 1.1;
					opacity: 1;
					transition: scale 8s, opacity 2s;
				}
			}
		}

		.mv__text {
			position: absolute;
			top: 218px;
			left: max(20px, 5.86%);

			.mv__catch {
				font-family: 'Noto Serif JP', serif;
				font-size: 32px;
				font-weight: 700;
				line-height: calc(56 / 36);
				color: white;
				margin-bottom: 34px;
			}

			.mv__en {
				color: white;
				font-size: 35px;
				line-height: calc(60 / 56);

				small {
					font-size: 10px;
					line-height: 1.6;
				}
			}
		}
	}

	/* Opening
-----------------------------------------*/
	/* .Opening {
		position: relative;
		background-color: #FFF;
		height: 240px !important;
		margin-bottom: 5%;

	}

	.Opening ul li {
		position: relative;
		overflow: hidden;
		width: 100%;
		text-align: center;
		height: 240px !important;

	}

	.Opening ul li img.Opening__text {
		display: none;
	}

	.Opening ul li span {}

	.Opening ul li span img.Opening__img {
		max-width: inherit;
		width: 100%;
		height: auto;
		position: relative;
		top: 0%;
		left: 0%;
	}

	ol,
	ul {
		list-style: none;
	} */

	/* Information
-----------------------------------------*/
	.infoArea {
		background: #F2F4F5;
		position: relative;
		overflow: hidden;
		margin-bottom: 0px;
		/* width: 90%; */
		/* margin: auto; */
		padding: 40px 20px 50px;
	}

	.infoArea h2 {
		font-family: Arial, Helvetica, "sans-serif";
		font-size: 26px;
		text-align: center;
		color: #333333;

		small {
			font-size: 15px;
		}
	}

	.infoArea .infoBox {
		height: 545px;
		overflow: hidden;
		margin-bottom: 0px;
	}

	.infoArea .btn {
		font-size: 15px;
		color: white;
		background: #82AE46;
		text-align: center;
		display: inline-block;
		width: 100%;
		margin-top: 20px;
		padding: 10px 0 10px 0;

		&:hover {
			text-decoration: none;
		}
	}

	.infoArea .btn img {
		width: 66px;
	}

	/* study
-----------------------------------------*/
	.study {
		width: auto;
		background: url(../img/top/research_bg.jpg) center / cover no-repeat;
		clear: both;
		padding: 50px 20px;
	}

	.study .inner {
		width: auto;

		.study__subtitle {
			font-family: 'Poppins', sans-serif;
			font-size: 46px;
			line-height: 69px;
			color: white;
			text-align: center;
		}

		h2 {
			font-size: 15px;
			color: white;
			font-weight: normal;
			text-align: center;
			margin-block: 0 30px;
		}

		.studyLinks {
			grid-template-columns: 1fr;
			gap: 20px;
			width: auto;
		}
	}

	.study .inner .studyBox {
		font-size: 12px;
		background: white;
		width: 100%;

		.featureimg {
			padding-inline: 0;
			margin-bottom: 0;

			img {
				width: 100%;
				aspect-ratio: 16 / 9;
				object-fit: cover;
			}
		}

		p {
			font-size: 14px;
			text-align: center;
			padding-inline: 15px;

			&:has(.cat) {
				display: contents;
			}
		}
	}

	.studyBox .cat {
		font-size: 20px;
		line-height: 1.35;
		color: var(--keycolor);
		display: block;
		width: 100%;
		margin-bottom: 12px;
		border-top: solid 3px var(--keycolor);
		padding-top: 8px;
	}

	.studyBox .ya {
		margin-left: 5px;
		margin-bottom: 2px;
	}

	.study .inner .end {
		margin-right: 0px;
	}

	.study .inner a {
		text-decoration: none;
		border: 0;
		color: #4d4d4d;
	}

	.study .inner a:hover img {
		opacity: 0.6;
	}

	/* feature&staff
-----------------------------------------*/
	.features {
		width: 100%;
		overflow: hidden;
		padding: 50px 0 50px 0 !important;
	}

	.features .inner {
		width: 90%;
		margin: auto;
	}

	.features .inner__new {
		display: flex;
		flex-direction: column;
		gap: 30px;
		padding-inline: 20px;

		.imageBox {
			position: relative;

			img {
				position: absolute;
				width: 100%;
				aspect-ratio: 7 / 3;
				object-fit: cover;
				z-index: -1;
			}

			&::after {
				content: "";
				background: #4C9DBF99;
				display: inline-block;
				position: absolute;
				z-index: -1;
				top: 0;
				width: 100%;
				aspect-ratio: 7 / 3;
				mix-blend-mode: multiply;
			}

			.features__title__en {
				font-size: 36px;
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				aspect-ratio: 7 / 3;
				margin-bottom: 0;
				transition: translate 0.3s;
			}

			.features__title__ja {
				font-size: 15px;
				text-align: center;
				margin-block: 21px 0;
			}

			&:hover {
				text-decoration: none;

				.features__title__en {
					translate: 0 -12px;
				}
			}
		}
	}



	.DISABLED.imageBox {
		width: 100%;
		height: 240px !important;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
		margin-bottom: 5%;
	}

	.DISABLED.imageBox .caption {
		-webkit-transform: scale(1.0);
		/* 1.2倍の大きさで表示 */
		transform: scale(1.0);
	}

	.DISABLED.imageBox .caption img {
		max-width: 100%;
	}

	.DISABLED.imageBox .mask {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}


	/* map
-----------------------------------------*/
	.mapArea {
		overflow: hidden;
		background-color: #82AE46;
		clear: both;
		padding: 5% 0 10% 0;
		overflow: hidden;
	}

	.mapArea .inner {
		width: 100%;
		margin: 0 auto 0 auto;
	}

	.mapArea .inner iframe {
		width: 100%;
		height: 240px;
		margin-bottom: 3% !important;
	}

	.mapArea .inner .mapInfo {
		width: 90%;
		margin-top: 34px;
	}

	.mapArea .inner .mapInfo .lTxt {
		font-size: 20px;
		margin-bottom: 5px;
	}

	.mapArea .inner .mapInfo p {
		color: #fff !important;
	}

	.mapArea .inner .mapInfo .access {
		line-height: 34px;
		font-weight: 700;
		color: #82AE46;
		background: white;
		text-align: center;
		display: inline-block;
		width: 134px;
	}

}