/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　基本フレックス　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

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

-webkit-flex-wrap : wrap; /* Safari */
flex-wrap         : wrap;
}


.flex-box2{
display           : -webkit-flex; /* Safari */
display           : flex;
-webkit-flex-wrap : wrap; /* Safari */
flex-wrap         : wrap;
width: 95%;
}

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

}

.flex_l p {word-break: break-all;}
.flex_r_00 p,
.flex_r_01 p,
.flex_r_02 p,
.flex_r_03 p,
.flex_r_04 p,
.flex_r_05 p,
.flex_r_new p{word-break: break-all;}


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


.flexauto{flex:auto!important;}

.flex_l{flex:1; 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;  background-color:rgba(0,0,0,0);}
.flex_r_015{flex:0.3;  background-color:rgba(0,0,0,0);}
.flex_r_02{flex:0.4;  background-color:rgba(0,0,0,0);}
.flex_r_03{flex:0.5;  background-color:rgba(0,0,0,0);}
.flex_r_04{flex:0.7;  background-color:rgba(0,0,0,0);}
.flex_r_05{flex:1;  background-color:rgba(0,0,0,0);}

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

} 


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

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

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





/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　基本逆フレックス　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media screen and (min-width: 1024px){
.flex2-box{
display           : block;
}

.flex2_l p {word-break: break-all;}
.flex2_r_00 p,
.flex2_r_01 p,
.flex2_r_02 p,
.flex2_r_03 p,
.flex2_r_04 p,
.flex2_r_05 p,
.flex2_r_new p{word-break: break-all;}

}

@media screen and (max-width: 1023px){
.flex2-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;
-webkit-flex-wrap : wrap; /* Safari */
flex-wrap         : wrap;
}	

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

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

.flex2_r_01{flex:0.2;  background-color:rgba(0,0,0,0);}
.flex2_r_015{flex:0.3;  background-color:rgba(0,0,0,0);}
.flex2_r_02{flex:0.4;  background-color:rgba(0,0,0,0);}
.flex2_r_03{flex:0.5;  background-color:rgba(0,0,0,0);}
.flex2_r_04{flex:0.7;  background-color:rgba(0,0,0,0);}
.flex2_r_05{flex:1;  background-color:rgba(0,0,0,0);}

.flex2_r_new{flex:9;  background-color:rgba(0,0,0,0);}


.flex2_l p {word-break: break-all;}
.flex2_r_00 p,
.flex2_r_01 p,
.flex2_r_02 p,
.flex2_r_03 p,
.flex2_r_04 p,
.flex2_r_05 p,
.flex2_r_new p{word-break: break-all;}

}





/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　フッターリンク用グリッド　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.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;
}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　プチ支援グリッド　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.cssgrid_banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 1;
  grid-gap: 5px;
  border: 0 solid #ddd;
  padding: 0;
  margin: 5px;
}

@media screen and (min-width: 1024px) {
.cssgrid_banner {
  display:block;
  grid-template-columns:initial;
  grid-auto-rows: initial;
  grid-gap: initial;
  border: 0 solid #ddd;
  padding:0;
  width:200px;
  margin:3px auto 0 auto;
}

.cssgrid_banner img{
margin-bottom:5px;
box-shadow:initial;
border-radius:initial;
}

}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　広告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(160px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.2em;
  border: 0 solid #ddd;
  padding: 0.2em;
  margin: 0 0 2em;
}


@media screen and (min-width: 1024px) {
.cssgrid_ad2 { /*有料バナー広告用*/
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}

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







.cssgrid_ad3 { /*有料バナー２倍サイズ広告用*/
width:100%;
}






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

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


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


@media screen and (min-width: 1024px) {
.cssgrid_gas { /*有料バナー広告用*/
  grid-template-columns: repeat(auto-fit, minmax(250px, 500px));
}
}

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



/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　入場動線のグリッド　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

/*flexに似たグリッド表示｜最小250px*/
.cssgrid_map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 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:95%;
  max-height:auto;
  width:auto;
  height:auto;
}
/*flexに似たグリッド表示｜最小250px*/

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　ツイッターボタンのグリッド　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*flexに似たグリッド表示｜ツイートボタン*/
.cssgrid_tweet_btn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45%, 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(45%, 1fr));}
}

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

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　次回スケジュール・併催情報のグリッド　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*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に似たグリッド表示｜最小350px*/
.cssgrid_koubo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24%, 0.33fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.1em;
  padding: 0 0 10px 0!important;
justify-content: center!important;
}

.cssgrid_koubo > div {
  background-image:url(https://dl.dropboxusercontent.com/s/v6mnx2xip2kc5hi/gakubuchi.jpg) ;
  background-size: cover;
  line-height:1.2em;
  overflow: auto;
  min-width: 0;
  padding: 0.1em;
  border-radius:5px!important;
}

.cssgrid_koubo > div img {
margin:auto;
padding:18%;
transition-duration: 0.5s; /*変化の時間*/
}


.cssgrid_koubo > div img:hover {
padding:5%;
}



@media screen and (max-width: 768px){
.cssgrid_koubo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(33%, 0.33fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.1em;
  padding: 0 0 10px 0!important;
justify-content: center!important;
}
}


@media screen and (max-width: 420px){
.cssgrid_koubo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 0.5fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.1em;
  padding: 0 0 10px 0!important;
justify-content: center!important;
}
}




/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　イラスト公募のグリッド｜サンプル用　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*flexに似たグリッド表示｜最小350px*/
.cssgrid_koubo2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90%, 0.9fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.1em;
  padding: 0 0 10px 0!important;
justify-content: center!important;
}

.cssgrid_koubo2 > div {
  background-image:url(https://dl.dropboxusercontent.com/s/v6mnx2xip2kc5hi/gakubuchi.jpg) ;
  background-size: cover;
  line-height:1.2em;
  overflow: auto;
  min-width: 0;
  padding: 0.1em;
  border-radius:5px!important;
}

.cssgrid_koubo2 > div img {
margin:auto;
padding:18%;
transition-duration: 0.5s; /*変化の時間*/
}


.cssgrid_koubo2 > div img:hover {
padding:5%;
}



@media screen and (max-width: 768px){
.cssgrid_koubo2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90%, 0.9fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.1em;
  padding: 0 0 10px 0!important;
justify-content: center!important;
}
}


@media screen and (max-width: 420px){
.cssgrid_koubo2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
  grid-auto-rows: 1fr;
  grid-gap: 0.1em;
  padding: 0 0 10px 0!important;
justify-content: center!important;
}
}





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