@charset "UTF-8";
/* CSS Document */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

@media screen and (min-width:681px) {
	#index_main {
		position: relative;
		width: 100%;
		background: url(../img/index/bg_index_main.jpg) no-repeat center top #000000;
		padding: 25px 0 25px;
	}
	#index_main .index_main_slider {
		width: 960px;
		margin: 0 auto;
	}
	div.vis_main02 {
		background: #000000 !important;
	}
	.index_main_slides {
		position: relative;
		height: 363px;
		overflow: hidden;
	}
	.index_main_slide {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.8s ease, visibility 0.8s ease;
	}
	.index_main_slide.is-active {
		opacity: 1;
		visibility: visible;
		z-index: 2;
	}
	.index_main_slide_link {
		display: block;
		width: 100%;
		height: 100%;
		text-decoration: none;
		background: #000;
	}
	.index_main_slide_image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center center;
	}
	.index_main_slide_panel {
		position: relative;
		overflow: hidden;
	}
	.index_main_slide_panel:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: linear-gradient(135deg, rgba(0, 20, 60, 0.25) 0%, rgba(0, 0, 0, 0.72) 100%);
	}
	.index_main_slide_panel.slide_notice {
		background: linear-gradient(135deg, rgba(213, 27, 54, 0.92) 0%, rgba(114, 14, 33, 0.92) 100%), url(../img/index/img02.jpg) no-repeat center center;
		background-size: cover;
	}
	.index_main_slide_panel.slide_sponsor {
		background: linear-gradient(135deg, rgba(118, 88, 25, 0.88) 0%, rgba(213, 27, 54, 0.88) 100%), url(../img/index/img01.jpg) no-repeat center center;
		background-size: cover;
	}
	.index_main_slide_panel.slide_ranking {
		background: linear-gradient(135deg, rgba(8, 34, 66, 0.88) 0%, rgba(0, 91, 160, 0.75) 100%), url(../img/index/img03.jpg) no-repeat center center;
		background-size: cover;
	}
	.index_main_slide_copy {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		padding: 0 72px;
		color: #FFF;
	}
	.index_main_slide_label {
		display: inline-block;
		margin: 0 0 18px;
		padding: 6px 14px;
		font-size: 12px;
		font-weight: bold;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		background: rgba(255, 255, 255, 0.2);
	}
	.index_main_slide_title {
		font-size: 34px;
		font-weight: bold;
		line-height: 1.35;
	}
	.index_main_slide_text {
		margin-top: 14px;
		font-size: 16px;
		line-height: 1.8;
	}
	.index_main_nav {
		display: flex;
		justify-content: center;
		gap: 12px;
		margin-top: 18px;
	}
	.index_main_dot {
		width: 12px;
		height: 12px;
		padding: 0;
		border: none;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.35);
		cursor: pointer;
	}
	.index_main_dot.is-active {
		background: #d51b36;
	}
	
	/** ボタン  **/
	#btn_wrap {
		padding: 40px 0;
		background: #FFF;
	}
	#btn_wrap .btn {
		width: 640px;
		margin: 0 auto 10px;
		font-size: 16px;
		font-weight: bolder;
	}
	#btn_wrap .btn:last-child {
		margin-bottom: 0;
	}
	#btn_wrap .btn a {
		display: block;
		padding: 10px 0;
		text-align: center;
		color: #FFF;
		background: #d51b36;
	}
	
	#index_topis {
		width: 100%;
		padding: 32px 0;
		background: url(../img/index/bg_topics.gif) repeat left top;
	}
	#index_topis ul.two_list {
		width: 900px;
		margin: 0 auto;
		padding: 30px 30px 10px;
		background: #FFF;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#index_topis ul.two_list li {
		width: 47%;
		margin-bottom: 20px;
	}
	#index_topis ul.two_list li dl.topics_layout {
		margin: 0;
		padding: 0;
	}
	#index_topis ul.two_list li dl.topics_layout dt {
		float: left;
		width: 20%;
	}
	#index_topis ul.two_list li dl.topics_layout dd {
		float: right;
		width: 75%;
		padding: 0 0;
		font-size: 13px;
		text-align: left;
		line-height: 1.7em;
	}
	#index_topis ul.two_list li dl.topics_layout dd a {
		color: #d51b36;
		text-decoration: underline;
	}
	#index_topis ul.two_list li dl.topics_layout dd span.date{
		font-size: 80%;
		color: #FFF;
		background: #999;
		padding: 4px 12px;
	}
	
	#index_3banners {
		width: 100%;
		padding: 56px 0;
		background: url(../img/index/bg_index_banner.jpg) repeat-x left top #082242;
	}
	#index_3banners ul.inner {
		padding: 0;
	}
	#index_3banners ul.inner li {
		float: left;
		width: 300px;
		margin: 0 30px 0 0;
		background: #FFF;
	}
	#index_3banners ul.inner li.last {
		margin: 0 0 0;
	}
	#index_3banners ul.inner li dl.banner_layout {
		margin: 0;
		padding: 0;
	}
	#index_3banners ul.inner li dl.banner_layout dt {
		margin: 0 0 20px;
		padding: 0;
	}
	#index_3banners ul.inner li dl.banner_layout dd {
		padding: 0 24px 16px;
		text-align: left;
	}
	#index_3banners ul.inner li dl.banner_layout dd h3 {
		font-size: 18px;
		color: #d51b36;
		margin: 0 0 8px;
	}
	#index_3banners ul.inner li dl.banner_layout dd p.sub_text {
		font-size: 11px;
		color: #999999;
	
	}
	#index_3banners ul.inner li dl.banner_layout a {
		text-decoration: none;
	}
}


@media screen and (max-width:680px) {
	#index_main {
		position: relative;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	#index_main .index_main_slider {
		width: 100%;
		margin: 0 auto;
	}
	.index_main_slides {
		position: relative;
		height: 56vw;
		min-height: 240px;
		max-height: 420px;
		overflow: hidden;
	}
	.index_main_slide {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.8s ease, visibility 0.8s ease;
	}
	.index_main_slide.is-active {
		opacity: 1;
		visibility: visible;
		z-index: 2;
	}
	.index_main_slide_link {
		display: block;
		width: 100%;
		height: 100%;
		text-decoration: none;
		background: #000;
	}
	.index_main_slide_image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center center;
	}
	.index_main_slide_panel {
		position: relative;
		overflow: hidden;
	}
	.index_main_slide_panel:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: linear-gradient(135deg, rgba(0, 20, 60, 0.2) 0%, rgba(0, 0, 0, 0.72) 100%);
	}
	.index_main_slide_panel.slide_notice {
		background: linear-gradient(135deg, rgba(213, 27, 54, 0.92) 0%, rgba(114, 14, 33, 0.92) 100%), url(../img/index/img02.jpg) no-repeat center center;
		background-size: cover;
	}
	.index_main_slide_panel.slide_sponsor {
		background: linear-gradient(135deg, rgba(118, 88, 25, 0.88) 0%, rgba(213, 27, 54, 0.88) 100%), url(../img/index/img01.jpg) no-repeat center center;
		background-size: cover;
	}
	.index_main_slide_panel.slide_ranking {
		background: linear-gradient(135deg, rgba(8, 34, 66, 0.88) 0%, rgba(0, 91, 160, 0.75) 100%), url(../img/index/img03.jpg) no-repeat center center;
		background-size: cover;
	}
	.index_main_slide_copy {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		padding: 0 7%;
		color: #FFF;
	}
	.index_main_slide_label {
		display: inline-block;
		margin: 0 0 0.9em;
		padding: 0.45em 0.9em;
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		background: rgba(255, 255, 255, 0.18);
	}
	.index_main_slide_title {
		font-size: 1.7em;
		font-weight: bold;
		line-height: 1.35;
	}
	.index_main_slide_text {
		margin-top: 0.9em;
		font-size: 0.95em;
		line-height: 1.7;
	}
	.index_main_nav {
		display: flex;
		justify-content: center;
		gap: 10px;
		padding: 12px 0 16px;
		background: #000;
	}
	.index_main_dot {
		width: 10px;
		height: 10px;
		padding: 0;
		border: none;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.35);
	}
	.index_main_dot.is-active {
		background: #d51b36;
	}

	/** ボタン  **/
	#btn_wrap {
		padding: 2em 0;
		background: #FFF;
	}
	#btn_wrap .btn {
		width: 90%;
		margin: 0 auto 0.6em;
		font-size: 1.2em;
		font-weight: bolder;
	}
	#btn_wrap .btn:last-child {
		margin-bottom: 0;
	}
	#btn_wrap .btn a {
		display: block;
		padding: 0.6em 0;
		text-align: center;
		color: #FFF;
		background: #d51b36;
	}
	
	#index_topis {
		width: 100%;
		padding: 2.0em 0;
		background: url(../img/index/bg_topics.gif) repeat left top;
		background-size: 4px auto;
	}
	#index_topis ul.two_list {
		width: 80%;
		margin: 0 auto;
		padding: 5%;
		background: #FFF;
	}
	#index_topis ul.two_list li {
		width: 100%;
		margin: 0 0 1.2em;
		padding: 0 0 1.2em;
		border-bottom: 1px dotted #999;
	}
	#index_topis ul.two_list li:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	#index_topis ul.two_list li.second {
		border-bottom: none;
		margin: 0;
		padding: 0;
	}
	#index_topis ul.two_list li dl.topics_layout {
		margin: 0;
		padding: 0;
	}
	#index_topis ul.two_list li dl.topics_layout dt {
		float: left;
		width: 20%;
	}
	#index_topis ul.two_list li dl.topics_layout dd {
		float: right;
		width: 75%;
		padding: 0 0;
		font-size: 13px;
		text-align: left;
		line-height: 1.7em;
	}
	#index_topis ul.two_list li dl.topics_layout dd a {
		color: #d51b36;
		text-decoration: underline;
	}
	#index_topis ul.two_list li dl.topics_layout dd span.date{
		font-size: 80%;
		color: #FFF;
		background: #999;
		padding: 2px 8px;
	}
	
	#index_3banners {
		width: 100%;
		padding: 3.0em 0;
		background: url(../img/index/bg_index_banner.jpg) repeat-x left top #082242;
	}
	#index_3banners ul.inner {
		padding: 0;
	}
	#index_3banners ul.inner li {
		width: 94%;
		margin: 0 auto 1.0em;
		background: #FFF;
	}
	#index_3banners ul.inner li.last {
		margin: 0 auto 0;
	}
	#index_3banners ul.inner li dl.banner_layout {
		margin: 0;
		padding: 0;
	}
	#index_3banners ul.inner li dl.banner_layout dt {
		float: left;
		width: 30%;
		margin: 0;
		padding: 0;
	}
	#index_3banners ul.inner li dl.banner_layout dd {
		float: left;
		width: 64%;
		padding: 1.0em 3%;
		text-align: left;
	}
	#index_3banners ul.inner li dl.banner_layout dd h3 {
		font-size: 14px;
		color: #d51b36;
		font-weight: bolder;
		margin: 0 0 0.3em;
	}
	#index_3banners ul.inner li dl.banner_layout dd p.sub_text {
		font-size: 11px;
		color: #999999;
	
	}
	#index_3banners ul.inner li dl.banner_layout a {
		text-decoration: none;
	}


}