/*------------------------------------------- main ---*/
main h2 {
	font-family: 'Lato', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
	font-weight: 900;
	/* font-size: 3.375rem; */
	font-size: 2.375rem;
	color: #16233f;
	line-height: 1em;
	margin-bottom: 1em;
	position: relative;
}

main #top-products h2{
	border-bottom: 5px solid #16233f;
	padding-left: 10px;
	padding-bottom: 0.5rem;
    border-left: 20px solid #16233f;
}

@media screen and (max-width: 479px) {
	main h2 {
		font-size: 2.75rem;
	}
}

/*------------------------------------------- mainvisual ---*/
#mainvisual {
	position: relative;
	/* padding-top: 37.1%; */
	padding-top: 150px;
	background-color: #ccc;
	background: url(../images/mainvisual.jpg) center center no-repeat;
	background-size: cover;
}
#mainvisual section {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
#mainvisual h2 {
	text-align: center;
	white-space: nowrap;
	font-weight: bold;
	font-size: 3rem;
	color: #fff;
	line-height: 1.5em;
	margin-bottom: 0.5em;
	text-shadow: 0px 0px 10px black ;
}
#mainvisual h3 {
	color: #fff;
	text-shadow: 0px 0px 10px black ;
	white-space: nowrap;
	text-align: center;
}
#mainvisual figure {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 6%;
	width: 40.86px;
	height: 72.23px;
}
@keyframes scroll {
	0% {
		transform-origin: center;
	}
	45%{
		transform: translateY(15px);
		-webkit-transform: translateY(15px);
		-ms-transform: translateY(15px);
	}
	60%{
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
	}
	100%{
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
	}
}
#scroll .arrow,
#scroll .mouse,
#scroll .txt {
	fill: #fff;
}
#scroll .arrow {
   -webkit-animation: scroll 1.5s ease-in both infinite;
   -ms-animation: scroll 1.5s ease-in both infinite;
   animation: scroll 1.5s ease-in both infinite;
}

/* @media screen and (max-width: 1399px) {
	#mainvisual section {
		top: 40%;
	}
} */
@media screen and (max-width: 1199px) {
	#mainvisual {
		/* padding-top: 280px; */
		padding-top: 120px;
	}
	#mainvisual h2 {
		font-size: 2.25rem;
	}
	#mainvisual h3 {
		font-size: 0.875rem;
	}
}
@media screen and (max-width: 1099px) {
	#mainvisual section {
		top: 50%;
	}
	#mainvisual figure {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	#mainvisual {
		/* padding-top: 45%; */
		padding-top: 100px;
	}
	#mainvisual h2 {
		margin-bottom: 0;
		font-size: 2.25rem;
		font-size: 5vw;
		letter-spacing: 0.1em;
	}
	#mainvisual h3 {
		display: none;
	}
}
/* @media screen and (max-width: 479px) {
	#mainvisual {
		padding-top: 60%;
	}
} */
/*------------------------------------------- emergency ---*/
#emergency ul {
	width: 100%;
	border-bottom: 1px solid #c9c9c9;
}
#emergency li {
	display: block;
}
#emergency li a,
#emergency li span {
	display: block;
	font-size: 0.875rem;
	color: #333;
	line-height: 70px;
	font-weight: bold;
	text-align: center;
	position: relative;
}
#emergency li a:hover {
	color: #006abc;
	background-color: #f3f3f3;
}
#emergency li a img {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	width: 8px;
	height: 12px;
}
#emergency li time {
	color: #006abc;
	line-height: 70px;
	margin-right: 22px;
	font-weight: bold;
}
@media screen and (max-width: 999px) {
	#emergency li a {
		line-height: 1.5em;
	}
	#emergency li time {
		line-height: 1.5em;
		display: block;
		margin-right: 0;
	}
	#emergency li a,
	#emergency li span {
		text-align: left;
		padding: 1em 3em 1em 1em;
	}
}

/*------------------------------------------- top-products ---*/
#top-products {
	background-color: #f3f3f3;
	/* padding: 100px 0; */
	padding: 60px 0;
}

.top-featured {
	margin-bottom: 140px;
}
.slides {
	display:-ms-flexbox;
	display:-webkit-flex;
	display: flex;
}
.slick-track {
	display:-ms-flexbox;
	display:-webkit-flex;
	display: flex;
}
.slick-slide {
	float: none;
	background-color: #fff;
	box-sizing: border-box;
	margin: 0 10px;
	height: auto;
}
.slick-slide a {
	display: block;
	border: 1px solid #ccc;
	height: 100%;
	padding: 1px;
    box-sizing: border-box;
    position: relative;
}
.slick-slide a:hover:after {
	position: absolute;
	content: "";
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: #006abc;
}
.slick_content {
	display:-ms-flexbox;
	display:-webkit-flex;
	display: flex;	
}
.slick_content figure {
	width: 40%;
}
.slick_content div {
	width: 60%;
	box-sizing: border-box;
	padding: 25px;
}
.slick_content h3 {
	color: #16233f;
	font-size: 1.25rem;
	line-height: 1.5em;
}
.slick_content em {
	display: block;
	font-size: 1rem;
	font-weight: bold;
	color: #006abc;
	line-height: 1.5em;
}
.slick_content ins {
	display: block;
	font-size: 0.875rem;
	font-weight: bold;
	color: #999;
	line-height: 1.5em;
	margin-bottom: 1em;
}
.slick_content p {
	color: #333;
	font-size: 1rem;
	line-height: 1.625em;
}
.slick-prev, .slick-next {
	width: 18px;
	height: 30px;
	z-index: 1;
}
.slick-prev {
	left: -15px;	
}
.slick-next {
	right: -15px;	
}
.slick-prev:before {
	content: url(../images/icon-prev.svg);
}
.slick-next:before {
	content: url(../images/icon-next.svg);
}
@media screen and (max-width: 1399px) {
	.slick-slide {
		margin: 0 20px;
	}
}
@media screen and (max-width: 1199px) {
	.slick-slide {
		margin: 0 40px;
	}
	.slick-prev {
	left: 0;	
	}
	.slick-next {
		right: 0;	
	}
}
@media screen and (max-width: 666px) {
	.slick_content {
		display: block;
	}
	.slick_content figure {
		width: auto;
		max-width: 280px;
		margin: 0 auto;
	}
	.slick_content div {
		width: 100%;
	}
}
.top-category.science {
	margin-top: 100px;
}
.top-category ul {
	display:-ms-flexbox;
	display:-webkit-flex;
	display: flex;
	-ms-flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	background-color: #fff;
	border-left: 1px solid #ccc;
	margin-bottom: 4.5%;
}
.top-category.science ul {
	background-color: transparent;
}
.top-category li {
	box-sizing: border-box;
	width: 20%;
	border-right: 1px solid #ccc;
}
.top-category.science li {
	background-color: #FFF;
}
.top-category li:first-of-type,
.top-category li:nth-of-type(2),
.top-category li:nth-of-type(3),
.top-category li:nth-of-type(4),
.top-category li:nth-of-type(5) {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.top-category li a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 3.6% 7.2% 3.6% 7.2%;
	transition: all .3s ease;
	position: relative;
	/* border-bottom: 1px solid #ccc; */
}
.top-category li a:hover {
	border-bottom: 1px solid #006abc;
}
.top-category li a:after {
	transition: all .3s ease;
}
.top-category li a:hover:after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: "";
	width: 100%;
	height: 2px;
	background-color: #006abc;
	transition: all .3s ease;
}
.top-category li a span {
	display: block;
	font-size: 1.125rem;
	font-weight: bold;
	line-height: 1em;
	color: #333;
}
.top-category li ins {
	display: block;
	line-height: 1em;
	font-family: 'Lato',sans-serif;
	font-size: 0.875rem;
	color: #006abc;
	font-weight: normal;
	position: relative;
}
@media screen and (max-width: 1399px) {
	.top-category li {
		width: calc(100% / 3);
	}
	.top-category li:nth-of-type(4) {
		border-top: 0;
	}
	.top-category li:nth-of-type(5) {
		border-top: 0;
	}
}
@media screen and (max-width: 999px) {
	.top-category li {
		width: 50%;
	}
	.top-category li:nth-of-type(3) {
		border-top: 0;
	}
}
@media screen and (max-width: 599px) {
	.top-category li a span {
		font-size: 1rem;
	}
	.top-category li ins {
		display: none;
	}
}
@media screen and (max-width: 479px) {
	.top-category li a span {
		font-size: 0.875rem;
	}
}

.btn_top-products {
	margin-bottom: 100px;
}
.btn_top-products p {
	width: 50%;
	margin: 0 auto;
}
.btn_top-products p a,
.btn_top-products p span {
	position: relative;
	display: block;
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid #ccc;
	text-align: center;
	font-weight: bold;
	font-size: 0.875rem;
	color: #333;
	line-height: 80px;
	padding: 0 48px;
}
.btn_top-products p a:hover {
	background-color: #f3f3f3;
}
.btn_top-products p a img {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	width: 8px;
	height: 12px;
}
@media screen and (max-width: 1199px) {
	.btn_top-products p {
		width: 100%;
	}
}
@media screen and (max-width: 479px) {
	.btn_top-products p a,
	.btn_top-products p span {
		line-height: 1.5em;
		padding: 2em 3em 2em 2em;
		text-align: left;
	}
}

/*------------------------------------------- top-news ---*/
#top-news {
	margin: 100px 0;
}
#top-news h2 a {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: block;
	width: 200px;
	height: 48px;
	line-height: 48px;
	font-size: 0.75rem;
	font-family: 'Lato',sans-serif;
	font-weight: 900;
	color: #fff;
	text-align: center;
	background-color: #16233f
}
#top-news h2 a:hover {
	background-color: #006abc;
}
#top-news ul {
	margin: 0 -50px;
	display:-ms-flexbox;
	display:-webkit-flex;
	display: flex;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#top-news li {
	width: 25%;
	box-sizing: border-box;
	border-right: 1px solid #ccc;
}
#top-news li:nth-of-type(4) {
	border-right: 0;
}
#top-news li a,
#top-news li span {
	display: block;
	height: 100%;
	box-sizing: border-box;
	width: 100%;
	padding: 9.14% 11.42%;
	color: #333;
}
#top-news li a:hover {
	background-color: #f3f3f3;
}
#top-news li time {
	display: block;
	font-size: 0.875rem;
	font-weight: bold;
	color: #006abc;
}
#top-news p {
	display: none;
}
@media screen and (max-width: 999px) {
	#top-news ul {
		-ms-flex-wrap:wrap;
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		border-bottom: 0;
		margin: 0 -2%;
	}
	#top-news li {
	    width: 50%;
		border-bottom: 1px solid #ccc;
	}
	#top-news li:nth-of-type(2) {
		border-right: 0;
	}
}
@media screen and (max-width: 479px) {
	#top-news h2 a {
		display: none;
	}
	#top-news ul {
		margin-bottom: 20px;
	}
	#top-news li {
	    width: 100%;
		border-right: 0;
	}
	#top-news li a, #top-news li span {
		padding: 5%;
	}
	#top-news p {
		display: block;
	}
	#top-news p a {
		display: block;
		width: 100%;
		height: 48px;
		line-height: 48px;
		font-size: 0.75rem;
		font-family: 'Lato',sans-serif;
		font-weight: 900;
		color: #fff;
		text-align: center;
		background-color: #16233f
	}
}
/*------------------------------------------- top-content ---*/
#top-content {
	display:-ms-flexbox;
	display:-webkit-flex;
	display: flex;
}
#top-content section {
	width: 50%;
	height: 620px;
	display:-ms-flexbox;
	display:-webkit-flex;
	display: flex;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
#top-content .company {
	background: url(../images/bg_top-company.jpg) center center no-repeat;
	background-size: cover;
}
#top-content .partners {
	background: url(../images/bg_top-partners.jpg) center center no-repeat;
	background-size: cover;
}
#top-content div {
	width: 400px;
	height: 400px;
	background-color: #fff;
	box-sizing: border-box;
	padding: 63px 50px;
}
#top-content h2 {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 20px;
}
#top-content h3 {
	text-align: center;
	font-size: 1.3125rem;
	color: #006abc;
	margin-bottom: 20px;
}
#top-content p a {
	display: block;
	width: 100%;
	height: 48px;
	line-height: 48px;
	font-size: 0.75rem;
	font-family: 'Lato',sans-serif;
	font-weight: 900;
	color: #fff;
	text-align: center;
	background-color: #16233f
}
#top-content p a:hover {
	background-color: #006abc;
}
#top-content div p:nth-of-type(2) {
	margin-bottom: 0;
}
@media screen and (max-width: 1199px) {
	#top-content div {
		width: 300px;
		height: 60%;
		padding: 30px 30px;
		position: relative;
	}
	#top-content h2 {
		font-size: 2.25rem;
	}
	#top-content h3 {
		font-size: 1.25rem;
	}
	#top-content div p:nth-of-type(2) {
		position: absolute;
		width: 240px;
		bottom: 30px;
		left: 30px;
	}
}
@media screen and (max-width: 767px) {
	#top-content {
		display: block;
	}
	#top-content section {
		width: 100%;
	}
	#top-content div {
		width: 400px;
		height: 400px;
	}
	#top-content div p:nth-of-type(2) {
		width: calc(100% - 60px);
	}
}
@media screen and (max-width: 479px) {
	#top-content section {
		height: auto;
		padding: 10% 0;
	}
	#top-content div {
		width: 80%;
		height: auto;
		padding: 20px;
	}
	#top-content div p:nth-of-type(2) {
		position: static;
		width: 100%;
	}
	#top-content h3 {
		font-size: 1.125rem;
	}
}

/*------------------------------------------- 20241106 ---*/
.prod-container{
	width: 100%;
	margin-bottom: 80px;
}

.prod-container.sp-prod{
	display: none;
}

.prod-card{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.prod-card .prod-txt{
	width: 60%;
}

.prod-card figure{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 36%;
}

.prod-card figure img{
	width: calc( 33% - 5px );
	margin-left: 5px;
}
.prod-card figure img:first-of-type {
	margin-left: 0;
}

.prod-container a{
	background-color: #16233f;
	display: block;
    width: 200px;
    height: 48px;
    line-height: 48px;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    text-align: center;
	position: relative;
}

.prod-container a img {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 8px;
    height: 12px;
}

.prod-container a:hover {
    background-color: #006abc;
}

.prod-container a:hover img {
    right: 15px;
	transition: all 0.3s;
}

.top-featured {
	margin-bottom: 80px;
}
@media screen and (max-width: 999px) {
	.prod-container.sp-prod{
		display: block;
	}

	.prod-container.pc-prod{
		display: none;
	}
	
	
	.prod-card {
		flex-wrap: wrap;
		margin-bottom: 30px;
	}
	.prod-card .prod-txt,
	.prod-card figure {
		width: 100%;
	}
	main .prod-container h2 {
		font-size: 2rem;
	}
	.sp-prod a{
		margin: 0 auto;
	}

}