@charset "utf-8";
@media (min-width:1201px) {
	.featureBox {
		width: 275px;
		display: inline-block;
		margin: 10px;
	}
}

@media (min-width: 768px) and (max-width:1200px) {
	.featureBox {
		width: 45%;
		display: inline-block;
		margin: 2%;
		vertical-align: top;
	}
}


@media (min-width: 768px) {
	/* PC用 */

	#research .catch {
		font-size: 34px;
		font-weight: 700;
		line-height: 45px;
		color: #242A33;
	}

	#research .lTxt {
		width: 50%;
		float: left;
	}

	#research .rImg {
		width: 48%;
		float: right;
	}

	#research .rTxt {
		width: 50%;
		float: right;
	}

	#research .lImg {
		width: 48%;
		float: left;
	}

	#research .h5out {
		border: 1px solid #82AE46;
		padding: 10px 0 10px 0;
		display: inline;
		clear: both;
	}

	#research .h5out h5 {
		background-color: #fff;
		margin: -2px 10px -2px 10px;
		padding: 10px;
		font-size: 18px !important;
		display: inline;
		line-height: 300%;
		color: #82AE46;
		font-size: 24px !important;
		font-weight: normal;
	}

	#research .cBox .inner {
		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;
		}
	}

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

		a {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 3;
			box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);

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

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

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

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

	#research .cBox .inner .studyBox .featureimg img {
		transition: 0.2s;
	}

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

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

	#research .cBox .inner a:hover img {
		opacity: 0.6;
		transition: 0.2s;
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}

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

	#research .cBox .inner a:hover .studyBox {
		background-color: var(--keycolor);

		.cat {
			color: white;
		}
	}




	/* index
-----------------------------------------*/
	.categoryindexWrap {
		width: 100%;
		overflow: hidden;
	}

	.categoryindexWrap .categoryIndex {
		max-width: 1200px;
		overflow: hidden;
		margin: 0 auto 0 auto !important;
		overflow: hidden;
		background-image: url(../img/common/categoryindex.jpg);
	}

	.categoryindexWrap .categoryIndex h2 {
		width: 22%;
		float: left;
		background-image: url(../img/common/categoryindex.jpg);
		text-align: center;
		color: #fff;
		margin: 0px !important;
		letter-spacing: 5px;
		overflow: hidden;
		padding-top: 14%;


	}

	.categoryindexWrap .subCategory {
		max-width: 78%;
		float: right;
		margin: 0px;
	}

	.categoryindexWrap .breadcrumb {
		text-align: left;
		font-family: "Font Awesome 5 Free";
		content: '\f1e2';
		font-size: 12px;
		max-width: 1200px;
		margin: auto auto 50px auto;
	}
}

@media (max-width: 1200px) {
	#research .cBox .inner {
		width: 90%;
		/* margin: 5% auto 2% auto; */
	}

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

	#research .cBox .inner p {
		margin-bottom: 18px;
	}

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

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

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

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

	#research .cBox .inner a:hover img {
		opacity: 0.6;
	}
}

@media (max-width: 767px) {

	/* tablet用 */
	#research .catch {
		font-size: 22px;
		color: #242A33;
		line-height: 150%;
		padding-top: 5%
	}

	#research .lTxt {
		margin-bottom: 2%;
	}

	#research .rImg {
		margin-bottom: 2%;
	}

	#research .rTxt {
		margin-bottom: 2%;
	}

	#research .lImg {
		margin-bottom: 2%;
	}

	#research .h5out {
		border: 1px solid #82AE46;
		padding: 10px 0 10px 0;
		clear: both;
		margin-bottom: -10px !important;
	}

	#research .h5out h5 {
		background-color: #fff;
		margin: -12px 10px -12px 10px;
		padding: 10px;
		font-size: 18px !important;
		line-height: 120%;
		color: #82AE46;
		font-size: 20px !important;
		font-weight: normal;
	}

	#research .cBox .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;
		}
	}

	#research .cBox .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;
	}

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

	#research .cBox .inner a:hover img {
		opacity: 0.6;
	}

	/* index
-----------------------------------------*/
	.categoryindexWrap {
		width: 100%;
		overflow: hidden;
		margin-top: 5%;
	}

	.categoryindexWrap .categoryIndex {
		width: 100%;
		overflow: hidden;
		margin: 0 auto 0 auto !important;
	}

	.categoryindexWrap .categoryIndex h2 {
		background-color: #405ABC;
		text-align: center;
		color: #fff;
		margin: 0px !important;
		letter-spacing: 5px;
		padding: 2% 0 2% 0;
	}

	.categoryindexWrap .subCategory {}

	.categoryindexWrap .breadcrumb {
		display: none;
	}
}