* {
    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% / 4);
	margin: 0.3% auto;
}
.top_banner3 img {
    display: block;
    width: 98%;
    height: auto;
    margin: 0 auto;
}
.top_banner3 a:hover > * {
    opacity: 0.7;
}
.pc{
  display:none;
}

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
}


/* ---1columns banner --*/
div.col1banner{
  flex-wrap: wrap;
  display: flex;
  gap: 4px;
  padding: 2px;
}
div.col1banner a{
  width:calc(100.0% - 4px);
  margin: auto;
}
div.col1banner a img{
  width:100%
}
/* ---1columns banner --*/

/* ---2columns banner --*/
div.col2banner{
  flex-wrap: wrap;
  display: flex;
  gap: 4px;
  padding: 2px;
}
div.col2banner a{
  width:calc(50.0% - 4px);
  margin: auto;
  margin-left:0;
}
div.col2banner a img{
  width:100%
}
/* ---2columns banner --*/

/* ---3columns banner --*/
div.col3banner{
  flex-wrap: wrap;
  display: flex;
  gap: 4px;
  padding: 2px;
}
div.col3banner a{
  width:calc(33.3% - 4px);
  margin: auto;
  margin-left:0;
}
div.col3banner a img{
  width:100%
}
div.col3banner::after{
  content: "";
  display: block;
  width:calc(33.3% - 4px);
}
/* ---3columns banner --*/

/* ---4columns banner --*/
div.col4banner{
  flex-wrap: wrap;
  display: flex;
  gap: 4px;
  padding: 2px;
}
div.col4banner a{
  width:calc(25.0% - 4px);
  margin: auto;
  margin-left:0;

}
div.col4banner a img{
  width:100%
}

/* ---4columns banner --*/
/* ---5columns banner --*/
div.col4banner{
  flex-wrap: wrap;
  display: flex;
  gap: 4px;
  padding: 2px;
}
div.col4banner a{
  width:calc(25.0% - 4px);
  margin: auto;
  margin-left:0;
}
div.col4banner a img{
  width:100%
}

div.col4banner::after{
  content: "";
  display: block;
  width:calc(25.0% - 4px);
}
div.col4banner::before{
  content: "";
  display: block;
  width:calc(25.0% - 4px);
  order: 1;
}

/* ---5columns banner --*/

/* green belt*/
.sbjct_green_belt{
      background-color: #6acaa7;
      background: #6bc098;
      color: white;
      padding: 10px 10px;
      margin: 12px 0;
      font-size: 1em;
}


@media screen and (max-width:850px) {
  div.col2banner a{
    width:calc(50.0% - 4px);
    margin-left:0;
  }

  div.col3banner a{
    width:calc(50.0% - 4px);
    margin-left:0;
  }

  div.col4banner a{
    width:calc(50.0% - 4px);
    margin-left:0;
  }
  div.col4banner::after{
    display: none;
  }
  div.col4banner::before{
    display: none;
  }
  div.col5banner a{
    width:calc(50.0% - 4px);
    margin-left:0;
  }
  div.fixcol2 a{
    width:calc(33.3% - 4px);
    margin-left:0;
  }
  div.fixcol3 a{
    width:calc(33.3% - 4px);
    margin-left:0;
  }
  div.fixcol3::after{
    content: "";
    display: block;
    width:calc(33.0% - 4px);
  }
  div.fixcol3::before{
    content: "";
    display: block;
    width:calc(33.0% - 4px);
    order: 1;
  }
  div.fixcol4 a{
    width:calc(50.0% - 4px);
    margin-left:0;
  }


}


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

.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;
}
}