@charset "utf-8";
/* PC ================================================== */
@media all and (min-width:960px){
#top-main {
	width: 100%;
	height: auto;
	padding: 0px 0px 40px;
}
	.main--inner {
		width: 90%;
		max-width: 1200px;
		margin: auto auto;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
	}
		.main-swiper {
			width: 61.7%;
			height: auto;
			background-color: #ffffff;
			position: relative;
		}
			.main-swiper-copy {
				font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
				font-size: 42px;
				font-weight: 900;
				letter-spacing: 0.3em;
				color: #0028AC;
				white-space: nowrap;
				-webkit-writing-mode: vertical-rl;
				-moz-writing-mode: vertical-rl;
				-ms-writing-mode: tb-rl;
				-ms-writing-mode: vertical-rl;
				writing-mode: vertical-rl;
				display: inline-block;
				text-align: left;
				position: absolute;
				top: 50%;
				right: 25px;
				transform: translate(0%,-50%);
				-webkit-transform: translate(0%,-50%);
				z-index: 99;
				pointer-events: none;
			}
			.swiper-container {
				width: 100%;
				height: auto;
			}
				.swiper-slide {
					width: 100%;
					height: auto;
				}
					.swiper-slide a {
						display: block;
						width: 100%;
						height: auto;
						transition: .3s;
						-webkit-transition: .3s;
					}
					.swiper-slide:hover a {
						opacity: .8;
					}
						.swiper-slide a img {
							width: 100%;
							height: auto;
						}

				.swiper-pagination {
					padding-right: 26px;
					text-align: right;
					line-height: 1.0;
					bottom: 15px !important;
				}

		.main-banner {
			width: 37%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
			.main-banner-premium,
			.main-banner-standard {
				width: 100%;
				height: auto;
				position: relative;
				background-color: #ffffff;
			}
				.main-banner-premium-newicon {
					width: 32px;
					height: auto;
					position: absolute;
					top: -16px;
					left: -16px;
					z-index: 1;
				}
					.main-banner-premium-newicon img {
						width: 100%;
						height: auto;
					}
				.main-banner-premium a,
				.main-banner-standard a {
					display: block;
					width: 100%;
					height: auto;
					transition: .3s;
					-webkit-transition: .3s;
				}
				.main-banner-premium:hover a,
				.main-banner-standard:hover a {
					opacity: .8;
				}
					.main-banner-premium a img ,
					.main-banner-standard a img {
						width: 100%;
						height: auto;
					}

#top-banner {
	width: 100%;
	padding: 0px 0px 90px;
}
	.top-banner--inner {
		width: 90%;
		max-width: 1200px;
		margin: auto auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
		.top-banner-search,
		.top-banner-guide {
			width: 49%;
			height: auto;
			background-color: #ffffff;
		}
			.top-banner-search a,
			.top-banner-guide a {
				display: block;
				width: 100%;
				height: auto;
				transition: .3s;
				-webkit-transition: .3s;
			}
			.top-banner-search:hover a,
			.top-banner-guide:hover a {
				opacity: .8;
			}
				.top-banner-search a img,
				.top-banner-guide a img {
					width: 100%;
					height: auto;
				}

#top-product {
	width: 100%;
	padding: 0px 0px 160px;
}
	.top-product--inner {
		width: 90%;
		max-width: 1200px;
		padding: 35px 0px 0px;
		margin: auto auto;
		border-top: solid 1px #ffffff;
		position: relative;
	}
	.top-product--inner:before {
		content: '';
		width: 50px;
		height: 0px;
		border-top: solid 1px #CE8003;
		position: absolute;
		top: -1px;
		left: 0;
	}
		#top-product .section_heading {
			margin-bottom: 30px;
		}
			.top_premium_list,
			.top_standard_list {
				width: 100%;
			}
			.top_premium_list {
				margin-bottom: 100px;
			}
				.sysHeadline {
					width: 100%;
					margin-bottom: 25px;
					font-size: 20px;
					font-weight: 700;
				}
				.top_premium_list .sysHeadline {
					color: #D4B656;
				}
				.top_standard_list .sysHeadline {
					color: #DEDEDE;
				}
					.sysHeadline span {
						margin-left: 25px;
						font-size: 16px;
						font-weight: 500;
					}
				.sysContent {
					width: 100%;
				}
					.sysItemBlock {
						width: 100%;
					}
						ul.sysHorizontal {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							flex-wrap: wrap;
						}
						ul.sysHorizontal:after {
							content: '';
							display: block;
							width: 32%;
							height: 0;
						}
							ul.sysHorizontal li {
								width: 32%;
								margin-bottom: 60px;
							}
							ul.sysHorizontal li:nth-last-of-type(-n+3) {
								margin-bottom: 0px;
							}
								.sysItemImage {
									width: 100%;
									height: auto;
									margin-bottom: 10px;
									background-color: #ffffff;
								}
									.sysItemImage a {
										display: block;
										width: 100%;
										height: auto;
										transition: .3s;
										-webkit-transition: .3s;
									}
									ul.sysHorizontal li:hover .sysItemImage a {
										opacity: .8;
									}
										.sysItemImage a img {
											width: 100%;
											height: auto;
										}
								.sysItemName {
									width: 100%;
									padding-right: 30px;
									font-size: 16px;
									position: relative;
								}
								.sysItemName:after {
									content: "\f105";
									font-family: "Font Awesome 5 Pro";
									font-size: 16px;
									font-weight: 300;
									position: absolute;
									top: 0;
									right: 4px;
									transition: .3s;
									-webkit-transition: .3s;
								}
								ul.sysHorizontal li:hover .sysItemName:after {
									right: 0px;
								}
									.sysItemName a {
										font-size: 16px;
										font-weight: 700;
										color: #ffffff;
									}

#top-news {
	width: 100%;
}
	.top-news--inner {
		width: 90%;
		max-width: 1200px;
		padding: 35px 0px 100px;
		margin: auto auto;
		border-top: solid 1px #ffffff;
		position: relative;
	}
	.top-news--inner:before {
		content: '';
		width: 50px;
		height: 0px;
		border-top: solid 1px #CE8003;
		position: absolute;
		top: -1px;
		left: 0;
	}
		#top-news .section_heading {
			margin-bottom: 30px;
		}
		.sysFuncInformation.top_news_list {
			width: 100%;
			margin-bottom: 45px;
		}
			.top_news_list .sysContent {
				width: 100%;
			}
				.top_news_list .sysContent nav {
					width: 100%;
				}
					.top_news_list .sysContent nav ul {
						width: 100%;
					}
						.top_news_list .sysContent nav ul li {
							width: 100%;
							padding: 25px 0px;
							border-bottom: dotted 1px #ffffff;
							line-height: 20px;
						}
							.top_news_list .sysContent nav ul li a {
								display: block;
								padding-left: 125px;
								font-size: 13px;
								font-weight: 700;
								color: #ffffff;
								position: relative;
							}
								.top_news_list .sysContent nav ul li a span.date {
									display: block;
									width: 125px;
									font-size: 15px;
									font-weight: 400;
									color: #CCCCCC;
									position: absolute;
									top: 0;
									left: 0;
								}
		.news-morebtn {
			display: block;
			width: 350px;
			height: 44px;
			margin: auto auto;
			border-radius: 22px;
			background-color: #EB8A18;
			font-size: 16px;
			font-weight: 700;
			color: #ffffff;
			text-align: center;
			line-height: 44px;
		}
}

/* Tablet ================================================== */
@media all and (min-width:560px) and (max-width:959px){
#top-sp_news {
	width: 100%;
	background-color: #CE8003;
}
	.sysFuncInformation.top_spnews_list {
		width: 100%;
		padding: 10px 0px;
	}
		.top_spnews_list .sysContent {
			width: 90%;
			margin: auto auto;
		}
			.top_spnews_list .sysContent nav {
				width: 100%;
			}
				.top_spnews_list .sysContent nav ul {
					width: 100%;
				}
					.top_spnews_list .sysContent nav ul li {
						width: 100%;
						line-height: 1.4;
					}
						.top_spnews_list .sysContent nav ul li a {
							font-size: 15px;
							font-weight: 700;								
							color: #ffffff;
						}
							.top_spnews_list .sysContent nav ul li a span.date {
								display: block;
								margin-bottom: 3px;
								font-size: 12px;
								font-weight: 400;
								color: #ffffff;
							}

#top-main {
	width: 100%;
	height: auto;
	padding: 20px 0px 20px;
}
	.main--inner {
		width: 90%;
		margin: auto auto;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
	}
		.main-swiper {
			width: 61.7%;
			height: auto;
			background-color: #ffffff;
			position: relative;
		}
			.main-swiper-copy {
				font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
				font-size: 24px;
				font-weight: 900;
				letter-spacing: 0.3em;
				color: #0028AC;
				white-space: nowrap;
				-webkit-writing-mode: vertical-rl;
				-moz-writing-mode: vertical-rl;
				-ms-writing-mode: tb-rl;
				-ms-writing-mode: vertical-rl;
				writing-mode: vertical-rl;
				display: inline-block;
				text-align: left;
				position: absolute;
				top: 50%;
				right: 25px;
				transform: translate(0%,-50%);
				-webkit-transform: translate(0%,-50%);
				z-index: 99;
				pointer-events: none;
			}
			.swiper-container {
				width: 100%;
				height: auto;
			}
				.swiper-slide {
					width: 100%;
					height: auto;
				}
					.swiper-slide a {
						display: block;
						width: 100%;
						height: auto;
						transition: .3s;
						-webkit-transition: .3s;
					}
						.swiper-slide a img {
							width: 100%;
							height: auto;
						}

				.swiper-pagination {
					padding-right: 26px;
					text-align: right;
					line-height: 1.0;
					bottom: 15px !important;
				}

		.main-banner {
			width: 37%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
			.main-banner-premium,
			.main-banner-standard {
				width: 100%;
				height: auto;
				position: relative;
				background-color: #ffffff;
			}
				.main-banner-premium-newicon {
					width: 32px;
					height: auto;
					position: absolute;
					top: -16px;
					left: -16px;
					z-index: 1;
				}
					.main-banner-premium-newicon img {
						width: 100%;
						height: auto;
					}
				.main-banner-premium a,
				.main-banner-standard a {
					display: block;
					width: 100%;
					height: auto;
					transition: .3s;
					-webkit-transition: .3s;
				}
				.main-banner-premium:hover a,
				.main-banner-standard:hover a {
					opacity: .8;
				}
					.main-banner-premium a img ,
					.main-banner-standard a img {
						width: 100%;
						height: auto;
					}

#top-banner {
	width: 100%;
	padding: 0px 0px 90px;
}
	.top-banner--inner {
		width: 90%;
		max-width: 1200px;
		margin: auto auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
		.top-banner-search,
		.top-banner-guide {
			width: 49%;
			height: auto;
			background-color: #ffffff;
		}
			.top-banner-search a,
			.top-banner-guide a {
				display: block;
				width: 100%;
				height: auto;
				transition: .3s;
				-webkit-transition: .3s;
			}
			.top-banner-search:hover a,
			.top-banner-guide:hover a {
				opacity: .8;
			}
				.top-banner-search a img,
				.top-banner-guide a img {
					width: 100%;
					height: auto;
				}

#top-product {
	width: 100%;
	padding: 0px 0px 160px;
}
	.top-product--inner {
		width: 90%;
		max-width: 1200px;
		padding: 35px 0px 0px;
		margin: auto auto;
		border-top: solid 1px #ffffff;
		position: relative;
	}
	.top-product--inner:before {
		content: '';
		width: 50px;
		height: 0px;
		border-top: solid 1px #CE8003;
		position: absolute;
		top: -1px;
		left: 0;
	}
		#top-product .section_heading {
			margin-bottom: 30px;
		}
			.top_premium_list,
			.top_standard_list {
				width: 100%;
			}
			.top_premium_list {
				margin-bottom: 100px;
			}
				.sysHeadline {
					width: 100%;
					margin-bottom: 25px;
					font-size: 20px;
					font-weight: 700;
				}
				.top_premium_list .sysHeadline {
					color: #D4B656;
				}
				.top_standard_list .sysHeadline {
					color: #DEDEDE;
				}
					.sysHeadline span {
						margin-left: 25px;
						font-size: 16px;
						font-weight: 500;
					}
				.sysContent {
					width: 100%;
				}
					.sysItemBlock {
						width: 100%;
					}
						ul.sysHorizontal {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							flex-wrap: wrap;
						}
						ul.sysHorizontal:after {
							content: '';
							display: block;
							width: 32%;
							height: 0;
						}
							ul.sysHorizontal li {
								width: 32%;
								margin-bottom: 60px;
							}
							ul.sysHorizontal li:nth-last-of-type(-n+3) {
								margin-bottom: 0px;
							}
								.sysItemImage {
									width: 100%;
									height: auto;
									margin-bottom: 10px;
									background-color: #ffffff;
								}
									.sysItemImage a {
										display: block;
										width: 100%;
										height: auto;
										transition: .3s;
										-webkit-transition: .3s;
									}
									ul.sysHorizontal li:hover .sysItemImage a {
										opacity: .8;
									}
										.sysItemImage a img {
											width: 100%;
											height: auto;
										}
								.sysItemName {
									width: 100%;
									padding-right: 30px;
									font-size: 16px;
									position: relative;
								}
								.sysItemName:after {
									content: "\f105";
									font-family: "Font Awesome 5 Pro";
									font-size: 16px;
									font-weight: 300;
									position: absolute;
									top: 0;
									right: 4px;
									transition: .3s;
									-webkit-transition: .3s;
								}
								ul.sysHorizontal li:hover .sysItemName:after {
									right: 0px;
								}
									.sysItemName a {
										font-size: 16px;
										font-weight: 700;
										color: #ffffff;
									}

#top-news {
	width: 100%;
}
	.top-news--inner {
		width: 90%;
		max-width: 1200px;
		padding: 35px 0px 100px;
		margin: auto auto;
		border-top: solid 1px #ffffff;
		position: relative;
	}
	.top-news--inner:before {
		content: '';
		width: 50px;
		height: 0px;
		border-top: solid 1px #CE8003;
		position: absolute;
		top: -1px;
		left: 0;
	}
		#top-news .section_heading {
			margin-bottom: 30px;
		}
		.sysFuncInformation.top_news_list {
			width: 100%;
			margin-bottom: 45px;
		}
			.top_news_list .sysContent {
				width: 100%;
			}
				.top_news_list .sysContent nav {
					width: 100%;
				}
					.top_news_list .sysContent nav ul {
						width: 100%;
					}
						.top_news_list .sysContent nav ul li {
							width: 100%;
							padding: 25px 0px;
							border-bottom: dotted 1px #ffffff;
							line-height: 20px;
						}
							.top_news_list .sysContent nav ul li a {
								display: block;
								padding-left: 125px;
								font-size: 13px;
								font-weight: 700;
								color: #ffffff;
								position: relative;
							}
								.top_news_list .sysContent nav ul li a span.date {
									display: block;
									width: 125px;
									font-size: 15px;
									font-weight: 400;
									color: #CCCCCC;
									position: absolute;
									top: 0;
									left: 0;
								}
		.news-morebtn {
			display: block;
			width: 350px;
			height: 44px;
			margin: auto auto;
			border-radius: 22px;
			background-color: #EB8A18;
			font-size: 16px;
			font-weight: 700;
			color: #ffffff;
			text-align: center;
			line-height: 44px;
		}
}

/* SP ================================================== */
@media all and (max-width:559px){
#top-sp_news {
	width: 100%;
	background-color: #CE8003;
}
	.sysFuncInformation.top_spnews_list {
		width: 100%;
		padding: 10px 0px;
	}
		.top_spnews_list .sysContent {
			width: 90%;
			margin: auto auto;
		}
			.top_spnews_list .sysContent nav {
				width: 100%;
			}
				.top_spnews_list .sysContent nav ul {
					width: 100%;
				}
					.top_spnews_list .sysContent nav ul li {
						width: 100%;
						line-height: 1.4;
					}
						.top_spnews_list .sysContent nav ul li a {
							font-size: 15px;
							font-weight: 700;								
							color: #ffffff;
						}
							.top_spnews_list .sysContent nav ul li a span.date {
								display: block;
								margin-bottom: 3px;
								font-size: 12px;
								font-weight: 400;
								color: #ffffff;
							}

#top-main {
	width: 100%;
	height: auto;
	padding: 0px 0px 15px;
}
	.main--inner {
		width: 100%;
		margin: auto auto;
	}
		.main-swiper {
			width: 100%;
			height: auto;
			margin: auto auto 30px;
			background-color: #ffffff;
			position: relative;
		}
			.main-swiper-copy {
				font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
				font-size: 13px;
				font-weight: 900;
				letter-spacing: 0.3em;
				color: #0028AC;
				white-space: nowrap;
				-webkit-writing-mode: vertical-rl;
				-moz-writing-mode: vertical-rl;
				-ms-writing-mode: tb-rl;
				-ms-writing-mode: vertical-rl;
				writing-mode: vertical-rl;
				display: inline-block;
				text-align: left;
				position: absolute;
				top: 50%;
				right: 25px;
				transform: translate(0%,-50%);
				-webkit-transform: translate(0%,-50%);
				z-index: 99;
				pointer-events: none;
			}
			.swiper-container {
				width: 100%;
				height: auto;
			}
				.swiper-slide {
					width: 100%;
					height: auto;
				}
					.swiper-slide a {
						display: block;
						width: 100%;
						height: auto;
						transition: .3s;
						-webkit-transition: .3s;
					}
						.swiper-slide a img {
							width: 100%;
							height: auto;
						}

				.swiper-pagination {
					padding-right: 26px;
					text-align: right;
					line-height: 1.0;
					bottom: 15px !important;
				}

		.main-banner {
			width: 90%;
			margin: auto auto;
		}
			.main-banner-premium,
			.main-banner-standard {
				width: 100%;
				height: auto;
				position: relative;
				background-color: #ffffff;
			}
			.main-banner-premium {
				margin-bottom: 15px;
			}
				.main-banner-premium-newicon {
					width: 32px;
					height: auto;
					position: absolute;
					top: -16px;
					left: -16px;
					z-index: 1;
				}
					.main-banner-premium-newicon img {
						width: 100%;
						height: auto;
					}
				.main-banner-premium a,
				.main-banner-standard a {
					display: block;
					width: 100%;
					height: auto;
					transition: .3s;
					-webkit-transition: .3s;
				}
					.main-banner-premium a img ,
					.main-banner-standard a img {
						width: 100%;
						height: auto;
					}

#top-banner {
	width: 100%;
	padding: 0px 0px 40px;
}
	.top-banner--inner {
		width: 90%;
		max-width: 1200px;
		margin: auto auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
		.top-banner-search,
		.top-banner-guide {
			width: 48.5%;
			height: auto;
			background-color: #ffffff;
		}
			.top-banner-search a,
			.top-banner-guide a {
				display: block;
				width: 100%;
				height: auto;
				transition: .3s;
				-webkit-transition: .3s;
			}
			.top-banner-search:hover a,
			.top-banner-guide:hover a {
				opacity: .8;
			}
				.top-banner-search a img,
				.top-banner-guide a img {
					width: 100%;
					height: auto;
				}

#top-product {
	width: 100%;
	padding: 0px 0px 100px;
}
	.top-product--inner {
		width: 90%;
		padding: 35px 0px 0px;
		margin: auto auto;
		border-top: solid 1px #ffffff;
		position: relative;
	}
	.top-product--inner:before {
		content: '';
		width: 50px;
		height: 0px;
		border-top: solid 1px #CE8003;
		position: absolute;
		top: -1px;
		left: 0;
	}
		#top-product .section_heading {
			margin-bottom: 25px;
		}
			.top_premium_list,
			.top_standard_list {
				width: 100%;
			}
			.top_premium_list {
				margin-bottom: 50px;
			}
				.sysHeadline {
					width: 100%;
					margin-bottom: 15px;
					font-size: 16px;
					font-weight: 700;
				}
				.top_premium_list .sysHeadline {
					color: #D4B656;
				}
				.top_standard_list .sysHeadline {
					color: #DEDEDE;
				}
					.sysHeadline span {
						margin-left: 20px;
						font-size: 12px;
						font-weight: 500;
					}
				.sysContent {
					width: 100%;
				}
					.sysItemBlock {
						width: 100%;
					}
						ul.sysHorizontal {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							flex-wrap: wrap;
						}
							ul.sysHorizontal li {
								width: 48%;
								margin-bottom: 30px;
							}
							ul.sysHorizontal li:nth-last-of-type(-n+2) {
								margin-bottom: 0px;
							}
								.sysItemImage {
									width: 100%;
									height: auto;
									margin-bottom: 10px;
									background-color: #ffffff;
								}
									.sysItemImage a {
										display: block;
										width: 100%;
										height: auto;
										transition: .3s;
										-webkit-transition: .3s;
									}
									ul.sysHorizontal li:hover .sysItemImage a {
										opacity: .8;
									}
										.sysItemImage a img {
											width: 100%;
											height: auto;
										}
								.sysItemName {
									width: 100%;
									padding-right: 20px;
									font-size: 12px;
									position: relative;
								}
								.sysItemName:after {
									content: "\f105";
									font-family: "Font Awesome 5 Pro";
									font-size: 12px;
									font-weight: 300;
									position: absolute;
									top: 0;
									right: 4px;
									transition: .3s;
									-webkit-transition: .3s;
								}
								ul.sysHorizontal li:hover .sysItemName:after {
									right: 0px;
								}
									.sysItemName a {
										font-size: 12px;
										font-weight: 700;
										color: #ffffff;
									}

#top-news {
	width: 100%;
}
	.top-news--inner {
		width: 90%;
		padding: 35px 0px 80px;
		margin: auto auto;
		border-top: solid 1px #ffffff;
		position: relative;
	}
	.top-news--inner:before {
		content: '';
		width: 50px;
		height: 0px;
		border-top: solid 1px #CE8003;
		position: absolute;
		top: -1px;
		left: 0;
	}
		#top-news .section_heading {
			margin-bottom: 25px;
		}
		.sysFuncInformation.top_news_list {
			width: 100%;
			margin-bottom: 45px;
		}
			.top_news_list .sysContent {
				width: 100%;
			}
				.top_news_list .sysContent nav {
					width: 100%;
				}
					.top_news_list .sysContent nav ul {
						width: 100%;
					}
						.top_news_list .sysContent nav ul li {
							width: 100%;
							padding: 20px 0px;
							border-bottom: dotted 1px #ffffff;
							line-height: 1.4;
						}
							.top_news_list .sysContent nav ul li a {
								font-size: 15px;
								font-weight: 700;								
								color: #ffffff;
							}
								.top_news_list .sysContent nav ul li a span.date {
									display: block;
									margin-bottom: 5px;
									font-size: 12px;
									font-weight: 400;
									color: #CCCCCC;
								}
		.news-morebtn {
			display: block;
			width: 100%;
			height: 44px;
			border-radius: 22px;
			background-color: #EB8A18;
			font-size: 16px;
			font-weight: 700;
			color: #ffffff;
			text-align: center;
			line-height: 44px;
		}
}