#topics {
	box-sizing: border-box;
	float: right;
	width: 610px;
	text-align: left;
	padding: 1px 3px 1px 3px;
	border-top: 4px solid var(--main-color2);
	background: #ffffff;
}
#index {
	box-sizing: border-box;
	float: left;
	width: 180px;
	display: block;
	height: 100%;
	padding-left: 1px;
	margin-top: 3px;
	text-align: left;
	color: #ffffff;
	line-height: 100%;
}
#topics h3 {
	position: relative;
	color: var(--main-color2);
	line-height: 40px;
	font-size: 120%;
	border-top: 2px solid var(--main-color3);
	border-bottom: 2px solid var(--main-color3);
	border-radius: 2px;
	padding-left: 30px;
	margin-top: 18px;
	margin-left: 0px;
}
#topics h3:before {
	content: "";
	width: 12px;
	height: 12px;
	background: linear-gradient(0deg, var(--main-color3) 0%, var(--main-color4) 100%);
	transform: rotate(45deg);
	box-shadow: 0px 3px 6px -2px #555;
	position: absolute;
	left: 5px;
	top:12px;
}
#topics h4 {
	position: relative;
	color: var(--main-color3);
	line-height: 250%;
	font-size: 120%;
}
#index .button_container {
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	width: 100%;
}
#index .button {
	display: inline-block;
	padding: 0.5em 1em;
	margin: 0.2em;
	text-decoration: none;
	border-radius: 3px;
	color: #FFF;
	background-image: linear-gradient(45deg, var(--main-color2) 0%, var(--main-color4) 100%);
	transition: .4s;
	width: 100%;
}
#index .button:hover {
	background-image: linear-gradient(45deg, var(--main-color4) 50%, var(--main-color2) 100%);
}
#index .button:visited {
	color: #FFF;
}
#index .button a {
	display: inline-block;
	color #FFF;
	text-decoration : none;
}
#index .button a:visited {
	color: #FFF;
}
#index .button_hide {
	display: inline-block;
	padding: 0.5em 1em;
	margin: 0.2em;
	text-decoration: none;
	border-radius: 3px;
	color: #FFF;
	background-image: linear-gradient(45deg, #404040 0%, #A0A0A0 100%);
	transition: .4s;
	width: 100%;
}
#index .button:visited {
	color: #FFF;
}
#index .button a {
	display: inline-block;
	color #FFF;
	text-decoration : none;
}
#index .button a:visited {
	color: #FFF;
}
#index h4 {
	padding-top: 5px;
	line-height: 100%;
	font-size: 100%;
	color: var(--main-color4);
	border-top: solid 1px var(--main-color4);
}
#index ul {
	margin: 10px 5px 10px 20px;
	display: block;
}
#index li {
	color: #A0A0A0;
	font-size: 80%;
	line-height: 80%:
	list-style:  outside;
}

#topics .section {
	margin: 16px 18px 0 18px;
}
#topics .section p {
	margin: 10px 0;
}
#topics .section .w {
	font-weight: bolder;
	color: var(--main-color1);
}
#topics .section .link {
	background: url(../images/More.gif) left no-repeat;
	padding-left: 40px;
}
#index .container {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-wrap:wrap;
	box-sizing: border-box;
	padding: 0px 20px;
}
#index .container .item .head {
	font-size: 100%;
	color: #ffffff;
	padding: 5px;
	width: 100%;
	text-align: center;
}
#index .container .item img {
	width: 120px;
}
#index .container .item {
	width :100%;
	padding: 10px;
	box-sizing: border-box;
}

#index table {
	display: block;
	margin-top: 20px;
	border: none;
	font-size: 100%;
	width: 100%;
}
#index td {
	text-align: center;
	padding-top: 3px;
	padding-bottom: 3px;
	line-height: 100%;
}
#topics table {
	border: none;
	font-size: 100%;
	margin: 18px;
	width: 540px;
}
#topics th {
	width: 100px;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 5px;
	vertical-align: text-top;
}
#topics td {
	vertical-align: middle;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 100%;

}
.pc { display: block !important; }
.sp { display: none !important; }
 
@media only screen and (max-width: 800px) {
#topics {
	float: none;
	width: 100%;
 }
#index {
	float: none;
	width: 100%;
 }
#index .button_container {
	flex-wrap: nowrap;
}
#index .button {
	width: 33%;
 }
#index .button_hide {
	width: 33%;
 }
#index .container .item {
	width :25%;
	max-width: 180px;
}
#index .container .item img {
	width: 100%;
	max-width: 120px;
}
#index .container .item .head {
	font-size: 80%;
}

#index table {
	dispaly: none;
 }
#topics table {
	width: 100%;
	margin: 0px;
 }
}
@media only screen and (max-width: 512px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
#index .button {
	font-size: 12px;
}
#index .button_hide {
	font-size: 12px;
}

}