/*flexに似たグリッド表示｜最小250px*/
.cssgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.8em;
  border: 1px solid #ddd;
  padding: 0.8em;
  margin: 0 0 2em;
}

.cssgrid > div {
  background: ;
  overflow: auto;
  min-width: 0;
  padding: 1em;
}
/*flexに似たグリッド表示｜最小250px*/

/*flexに似たグリッド表示｜最小250px*/
.cssgrid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.8em;
  border: 0px solid #ddd;
  padding: 0.8em;
  margin: 0 0 1em;
}

.cssgrid2 > div {
  background: ;
  overflow: auto;
  min-width: 0;
  padding: 1em;
}
/*flexに似たグリッド表示｜最小250px*/


/*flexに似たグリッド表示｜最小250px*/
.cssgrid_map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-auto-rows: auto;
  grid-gap: 0.1em;
  border: 0px solid #ddd;
  padding: 0.1em;
  margin: 0 0 0.1em;
}

.cssgrid_map > div {
  background: ;
  overflow: auto;
  min-width: 0;
  padding: 0.1em;
}

.cssgrid_map > div img {
  max-width:100%;
  max-height:390px;
  width:auto;
  height:auto;
}
/*flexに似たグリッド表示｜最小250px*/


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　広告ADのグリッド　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.cssgrid_ad { /*b2カード印刷会社用*/
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.8em;
  border: 0 solid #ddd;
  padding: 0.8em;
  margin: 0 0 2em;
}

.cssgrid_ad > div {
  background: ;
  overflow: auto;
  min-width: 0;
  padding: 0.2em;
  margin:0 auto;
}

.cssgrid_ad2 { /*有料バナー広告用*/
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.8em;
  border: 0 solid #ddd;
  padding: 0.5em;
  margin: 0 0 2em;
}

.cssgrid_ad2 > div {
  background: ;
  overflow: auto;
  min-width: 0;
  padding: 0.2em;
  margin:0 auto;
}



.cssgrid_btn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.8em;
  border: 0 solid #ddd;
  padding: 0.8em;
  margin: 0 0 2em;
}

.cssgrid_btn > div {
  background: ;
  overflow: auto;
  min-width: 0;
  padding: 1em;
  margin:0 auto;
}

.cssgrid_banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 5px;
  border: 0 solid #ddd;
  padding: 0;
  margin: 5px;
}


.cssgrid_banner_an {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 5px;
  border: 0 solid #ddd;
  padding: 0;
  margin: 5px;
}

.cssgrid_banner_an img {
max-width:350px;
}

.cssgrid_ad > div {
  background: ;
  overflow: auto;
  min-width: 0;
  padding: 0;
  margin:0 auto;
}

/*flexに似たグリッド表示｜最小290px*/
.cssgrid_footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.2em;
  border: 0px solid #ddd;
  padding: 0.1em;
  margin: 0 0 0.1em;
}

.cssgrid_footer > div {
  background: ;
  text-align: left!important;
  line-height: 1.8em;
  font-size: 82%;
  color: #fff!important;
  overflow: auto;
  min-width: 0;
  padding: 0em;
}
/*flexに似たグリッド表示｜最小290px*/


@media screen and (max-width: 768px){
/*flexに似たグリッド表示｜最小290px*/
.cssgrid_footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.2em;
  border: 0px solid #ddd;
  padding: 0.1em;

}

.cssgrid_footer > div {
  background: ;
  text-align:left!important;
  line-height: 1.8em;
  font-size: 82%;
  color: #fff!important;
  overflow: auto;
  min-width: 0;
  padding: 0em;

}
/*flexに似たグリッド表示｜最小290px*/
}


/*flexに似たグリッド表示｜最小400px*/
.cssgrid_gaiyou {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.2em;
  padding: 0.1em;
  margin: 0 0 0.1em;
}

.cssgrid_gaiyou > div {
  background: ;
  text-align: left;
  line-height: 1.8em;
  overflow: auto;
  min-width: 0;
  padding: 0em;
}
/*flexに似たグリッド表示｜最小400px*/


/*flexに似たグリッド表示｜最小350px*/
.cssgrid_event_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.2em;
  padding: 0.1em;
  margin: 0 0 0.1em;
}

.cssgrid_event_list > div {
  background: ;
  line-height:1.2em;
  text-align: left;
  overflow: auto;
  min-width: 0;
  padding: 1em;
}
/*flexに似たグリッド表示｜最小350px*/

/*flexに似たグリッド表示｜だいしゃの王様用x*/
.cssgrid_daisya {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.2em;
  padding: 0.1em;
  margin: 0 0 0.1em;
}

.cssgrid_daisya > div {
  background: ;
  line-height:1.2em;
  text-align: center;
  overflow: auto;
  min-width: 0;
  padding: 0em;
}
/*flexに似たグリッド表示｜最小400px*/


/*flexに似たグリッド表示｜複数日配置日用*/
.cssgrid_jyanru {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(384px, 1fr));
  grid-auto-rows: auto;
  grid-gap: 0.2em;
  padding: 0.1em;
  margin: 0 0 0.1em;
}

.cssgrid_jyanru > div {
  background: ;
  line-height:1.2em;
  text-align: center;
  overflow: auto;
  min-width: 0;
  padding: 0.5em;
  border:solid 0px #999;
  border-radius: 3px;
}
/*flexに似たグリッド表示｜最小400px*/


@media screen and (max-width: 384px){
.cssgrid_jyanru {grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));}
}

/*flexに似たグリッド表示｜ツイートボタン*/
.cssgrid_tweet_btn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.2em;
  padding: 0.1em;
  margin: 0 0 0.1em;
}

.cssgrid_tweet_btn > div {
  background: ;
  line-height:1em;
  text-align: center;
  overflow: auto;
  min-width: 0;
  padding: 0.1em;
  border:solid 0px #999;
  border-radius: 3px;
  margin:1px;
}
/*flexに似たグリッド表示｜最小400px*/

@media screen and (max-width: 768px){
.cssgrid_tweet_btn {grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}
}

@media screen and (max-width: 384px){
.cssgrid_tweet_btn {grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));}
}

/*flexに似たグリッド表示｜ツイートボタン*/
.cssgrid_top_banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(384px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0em;
  padding: 0em;
  margin: 0 0 0em;
}

.cssgrid_top_banner > div {
  background: ;
  line-height:1em;
  text-align: center;
  overflow: auto;
  min-width: 0;
  padding: 0em;
  border:solid 0px #999;
  border-radius: 0px;
  margin:0px;
}
/*flexに似たグリッド表示｜最小400px*/


@media screen and (max-width: 768px){
.cssgrid_top_banner {grid-template-columns: repeat(auto-fit, minmax(384px, 1fr));}
}

@media screen and (max-width: 384px){
.cssgrid_top_banner {grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));}
}

/*flexに似たグリッド表示｜ツイートボタン*/
.cssgrid_top_banner_in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0em;
  padding: 0em;
  margin: 0 0 0em;
}

.cssgrid_top_banner_in > div {
  background: ;
  line-height:1em;
  text-align: center;
  overflow: auto;
  min-width: 0;
  padding: 0em;
  border:solid 0px #999;
  border-radius: 0px;
  margin:0;
}
/*flexに似たグリッド表示｜最小400px*/



.flex-box_top{
  margin-top:50px;
}


.flex-box{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
   align-items: flex-start;

}

.flex-box100{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
   align-items: flex-start;

}


/*===============================================
●画面の横幅が768pxより大きい
===============================================*/
@media screen and (min-width: 980px){


.flexauto{flex:auto!important;}

.flex_l{flex:1!important; margin-right:5px;
  background-color:rgba(0,0,0,0);
}


.flex_r_00{flex:0.1!important;  background-color:rgba(0,0,0,0);}

.flex_r_01{flex:0.2!important;  background-color:rgba(0,0,0,0);}
.flex_r_015{flex:0.3!important;  background-color:rgba(0,0,0,0);}
.flex_r_02{flex:0.4!important;  background-color:rgba(0,0,0,0);}
.flex_r_03{flex:0.5!important;  background-color:rgba(0,0,0,0);}
.flex_r_04{flex:0.7!important;  background-color:rgba(0,0,0,0);}
.flex_r_05{flex:1!important;  background-color:rgba(0,0,0,0);}

.flex_r_new{flex:9!important;  background-color:rgba(0,0,0,0);}

} 


/*===============================================
●画面の横幅が768pxまで
===============================================*/

@media screen and (max-width: 981px){

.flex-box{display:block;}

.flex_r_01,.flex_r_02,.flex_r_03,.flex_r_04,.flex_r_05,.flex_l
{background-color:rgba(0,0,0,0)}
}

@media screen and (max-width:768px){
.flex-box100{display:block;}
.flex_l100{flex:1!important;}
}




/*===============================================
●画面の横幅が768pxより大きい
===============================================*/
@media screen and (min-width: 451px){
.flex-box450{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
   align-items: flex-start;
}

.flex_l450{flex:1!important; margin-right:5px;
  background-color:rgba(0,0,0,0);
}
} 


@media screen and (max-width: 450px){
.flex-box450{
  display:-webkit-box;
  display:-ms-flexbox;
  display:block;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
   align-items: flex-start;
}
}