/*-----------------------------------
最初のロゴ全画面表示	
-----------------------------------*/

#index-top{
background-image: url(images/top_bg.png)!important; 
background-repeat: repeat;
  
}



@media screen and (min-height:1125px) {
#index-top{/*ウィンドウ高さ925以上*/
background-color: #333;/*#E50053*/
border-bottom: solid 1px tan;
}

.top_logo_parent{
height: ;
}	
	
}

@media screen and (max-height:1124px) {
#index-top{/*ウィンドウ高さ1124以下*/
background-color: #333;/*#E50053*/
border-bottom: solid 1px tan;
}	
	
.top_logo_parent{
height: initial;	
}
}





@media screen and (min-width:481px) {
.top_logo_parent{
margin:20px auto auto auto;	
top:100px;
}
}


@media screen and (max-width:480px) {
.top_logo_parent{
margin:10px auto auto auto;	
}
}

div.top_logo img{
max-width:100%;
min-height: 0;
}





.top_text{
color: #fff!important;
font-size: 25px;
font-weight: 900;
padding:10px 20px;
border-radius:10px ;
background-color: rgba(8, 8, 13, 0.29)
}
.top_text:hover{
color: #fff!important;
font-size: 25px;
font-weight: 900;
padding:10px 20px;
border-radius:10px ;
background-color: rgba(27, 53, 168, 0.3)
}

@media screen and (max-width:768px) {
.top_text{font-size: 18px;}
.top_text:hover{font-size: 18px;}
}

.top_shop{
background-image:url(images/#.png);
background-position-y: top;
background-size-x: 1500px;
background-repeat: repeat-x;
}
  

@media screen and (max-width: 480px){/*画面の横幅が480px以下*/

}
.top_pre{font-size: 14px!important;text-align: center!important;}	
.top_shop{background-size: 60%;}




.speech-bubble {/*吹き出し飾り*/
  position: relative;
  background: #e3edf5;
  border-radius: .4em;
  padding:20px!important;
}

.speech-bubble:after {/*吹き出し飾りの下サンカク*/
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 25px solid transparent;
  border-top-color: #e3edf5;
  border-bottom: 0;
  border-left: 0;
  margin-left: -12.5px;
  margin-bottom: -25px;
}

.arrow_box {/*気になるツイートボタン*/
    position: relative;
    background: #333;
    border: 2px solid tan;
border-radius:10px!important;
}


.arrow_box_in{
  border-radius:10px!important;
width:100%;
height:50px;
font-size:20px;
font-weight:900!important;
background: #333;
border:0!important;
  background-size: 40px 40px;
  cursor: pointer;
  position: relative;
  display: inline-block;
color:tan;
}

.arrow_box_in:hover{
color:hotpink;
}

@media screen and (max-width: 480px){/*画面の横幅が480px以下*/
.arrow_box_in{height:50px;font-size:14px;}
}




/*-----------------------------------
トップのイベント毎のボタン
-----------------------------------*/

.top_only{
width: 100%;
height: 200px;
}



/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
▼▼▼　トップイベント毎ボタン内の概要テーブル　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.top_event_table{margin-top: 5px;}
.top_event_table tr{font-size:16px;}
.top_event_table th{
font-weight: 400;
-moz-text-align-last : justify;
text-align-last      : justify;
text-justify         : inter-ideograph;
}
.top_event_table th{vertical-align: middle!important;}
.top_event_table td{text-align: left;}




/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
▼▼▼　トップイベント_グリッド　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.cssgrid_event { /*トップイベント表示*/
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.8em;
  border: 0 solid #ddd;
  padding: 0.8em;
  margin: 0 0 2em;
}

.cssgrid_event > div {
  background: ;
  overflow: auto;
  min-width: 0;
  padding: 0em;
  margin:0 auto;
  border: solid 1px lightgray;	
}

div.top_info{padding:1em!important;}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
▼▼▼　トップリンク_グリッド　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media screen and (min-width: 769px) {
.cssgrid_link { /*トップイベント表示*/
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.8em;
  border: 0 solid #ddd;
  padding: 0.8em;
  margin: 0 0 2em;
}

.cssgrid_link div{
margin:auto 0!important;
}
}

.cssgrid_link > div {
  background:center ;
  overflow: auto;
  min-width: 0;
  padding: 0.5em;
  margin:0 auto;
  border: solid 0px lightgray;	
  border-radius: 10px;
  margin:auto 0;
}

.cssgrid_link > div img{
text-align: center!important;
max-width: 100%;
}


@media screen and (max-width: 768px) {
.cssgrid_link { /*トップイベント表示*/
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.1em;
  border: 0 solid #ddd;
  padding: 0.1em;
  margin: 0 0 1em;
  }
 .cssgrid_link > div img{
text-align: center!important;
}

 .cssgrid_link div{
margin:auto 0!important;
}


}