* {
    margin: 0;
}

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.wrapper a {
    width: 25%;
    width: calc(100% / 5);
    max-width: 700px;
    height: auto;
    padding: 2px;
    box-sizing: border-box;
}
.wrapper a img {
    display: block;
    width: 100%;
}
.wrapper a img:hover {
    opacity: 0.7;
}

.longbanner img{
  display: block;
  margin: auto;
  max-width: 98%;
  padding: 0.3%;
}

.top_banner2 {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width:100%;
	padding: 0.3% 1% 0.3% 1%;
	box-sizing: border-box;
}
.top_banner2 a {
	display:block;
	width: 24%;
	width:calc(100% / 4);
	margin: 0.3% auto;
}
.top_banner2 img {
    display: block;
    width: 98%;
    height: auto;
    margin: 0 auto;
}
.top_banner2 a:hover > * {
    opacity: 0.7;
}
.longbanner a:hover > * {
    opacity: 0.7;
}

.tabcontent a:hover > * {
    opacity: 0.7;
}
.top_banner3 {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width:100%;
	padding: 0.3% 1% 0.3% 1%;
	box-sizing: border-box;
}
.top_banner3 a {
	display:block;
	width: 24%;
	width:calc(100% / 3);
	margin: 0.3% auto;
}
.top_banner3 img {
    display: block;
    width: 98%;
    height: auto;
    margin: 0 auto;
}
.top_banner3 a:hover > * {
    opacity: 0.7;
}

body *{
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    scrollbar-base-color : #ccff99;
    scrollbar-arrow-color : #ffa500;
}


.tabcontent {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
margin: 0 auto;
padding: 1%;
box-sizing: border-box;
font-weight: bold;
z-index: 0;
}
.tabcontent a {
display: block;
width: 19%;
width: calc(100% / 5);
margin: 0.3% auto;
}
.tabcontent img {
display: block;
width: 98%;
height: auto;
margin: 0 auto;
}

.topbnr {
display: inline-block;
vertical-align: top;
width: 30%;
min-width: 335px;
border: solid 1px #cccccc;
padding: 10px;
text-align: center;
margin: 5px;
text-decoration: none;
font-size: 12px;
color: #666666;
font-weight: bold;
line-height: 15px;
}

.topbnr-container {
margin: 3px auto;
}


.topbnr-more-container input {
display: none;
}

.topbnr-more-container label {
padding: 10px 20%;
display: block;
border: 1px solid #ddd;
background-color: rgba(250, 250, 250, 0.9);
font-weight: bold;
border-radius: 4px;
margin: auto;
white-space: nowrap;
text-align:center;
}

.topbnr-more-container label:hover {
color: #ccc;
}

.topbnr-more-container input:checked+label {
opacity: 0;
cursor: default;
height: 0;
margin: 0;
padding: 0;
border: none;
font-size: 0
}

.openbtn,
.closebtn {
text-align: left;
display: block;
width: 80px;
margin: 0;
z-index: 9999
}

.hidebox {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
margin: 0 auto 0;
padding: 1%;
box-sizing: border-box;
transition: .2s ease-out;
/* close */
height: 0;
overflow: hidden;
opacity: 0;
}

.topbnr-more-container input:checked+label+.hidebox {
height: auto;
margin: -3px auto 0;
transition: .3s ease-out;
/* open */
overflow: visible;
opacity: 1
}



@media screen and (max-width: 800px) {
.wrapper a {
    width: calc(100% / 2.1);
    margin: 3px;
}
.sp {
  display: none;
}

.top_banner2 a {
	width: 49%;
	width:calc(100% / 2);
}
.top_banner3 a {
  width: 33%;
  width:calc(100% / 3);
}

.tabcontent a {
width: 33%;
width:calc(100% / 3);
}

.topbnr-more-container label {
  font-weight:normal;
}

}