/* --- Twitter埋め込み枠 --- */
.twitter-wrap {
  height: 100%!important;
  margin: 10px auto!important;
}


.twitter-timeline {
  height: 370px!important;
  margin: 10px auto!important;
  overflow:hidden;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　スマホ表示設定　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media screen and (min-width:1101px){
.tab{display: none;}
} 

@media screen and  (orientation:landscape) {
.tab{display: none;}
} 


@media screen and (max-width:1100px){
.tab1024{display: none;}
.tab1024_max100{max-width: 100%; min-height: 0;}
.twitter-timeline{height:500px!important;}

.top_image{
  padding:0px!important;
  width: 100%!important
}

}  

@media screen and (orientation:portrait) {

.tab1024{display: none;}
.tab1024_max100{max-width: 100%; min-height: 0;}
.twitter-timeline{height:500px!important;}

.top_logo{display:none;}

.zr_top{background-color:;}
.top_center{
width:initial;
min-width:100%;
max-height:auto;
background-color:;}

.top_image{
  padding:0px!important;
  width: 100%!important
}

}



/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　index最上段右上のミニリンク　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.top_minilink{
  font-size: 65%;
  text-align:right!important;
  margin-right:50px;
  padding-top:15px
}

.top_minilink a{
  padding-right:15px;
  text-decoration:none;
  color:#404040FF!important;
}

.top_minilink a:before{
  content      : " \f32b";
  font-weight  : 300!important;
  font-family  : "Font Awesome 5 Pro";
  margin-right : 3px;
  color:#404040FF!important;
} 



/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　各エリア（section）　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.section {
  margin:0 auto;
  width: 100%;
}

.section2 {
  margin:0 auto;
  width: 100%;
}

.section-content {
  max-width      : 1200px;
  margin     : 0 auto;
  padding    : 50px;
  text-align : center;
  background-color:#fff;
}

.section-content2 {
  max-width  : 1200px;
  margin     : 0 auto!important;
  padding    : 50px!important;
  text-align : center;
  background-color:#fff;
}

.section-content3 {
  max-width  : 1200px;
  margin     : 0 auto!important;
  padding    : 0px 50px 50px 50px!important;
  text-align : center;
  background-color:#fff;
}

.section-content4 {
  max-width  : 1200px;
  margin     : 0 auto!important;
  padding    : 5px;
  text-align : center;
  background-color:#fff;
}

.section-content100 {
  max-width  : 1200px;
  width      : 100%;
  margin     : 0 auto;
  padding    : 0px;
  text-align : center;
  background-color:#fff!important;
}

.section-content_banner {/*企画モーダルバナー用*/
  max-width  : 1200px;
  width      : 100%;
  margin     : 0px auto 0px auto!important;
  padding    : 10px;
  text-align : center;
  background-color:#fff!important;
}

.section-content_banner2 {/*有料バナー用*/
  max-width  : 1200px;
  width      : 100%;
  margin     : 0px auto -35px auto!important;
  padding    : 10px;
  text-align : center;
  background-color:#fff!important;
}

.section-content_puti {
  max-width  : 1200px;
  width      : 100%;
  margin     : 0 auto;
  padding    : 50px!important;
  text-align : center;
  background-color:#fff!important;
}

.section-content_line {
  max-width  : 1200px;
  width      : 100%;
  margin     : 0 auto;
  padding    : 0;
  text-align : center;
}

@media screen and (max-width: 1100px){
.section-content {
padding: 50px 10px 50px 10px;
}
.section-content2{
padding: 0px 10px 50px 10px;
}
.section-content3 {
padding    : 0px 10px 50px 10px!important;
}

.section-content_puti {
padding: 50px 10px 50px 10px!important;
}

}

@media screen and (max-width: 768px){
.section-content {
padding: 50px 10px auto 10px!important;
}
.section-content2{  
padding: 0px 10px auto 10px!important;
}
.section-content3 {
padding    : 0px 10px auto 10px!important;
}
.section-content_puti {
padding: 50px 10px auto 10px!important;
}

}


.section-content_footer {
max-width: 100%;
padding: 0px 0px 0px 0px;
margin:0 auto;
}


@media screen and (max-width: 1100px){
.section-content_footer {
padding: 0px 0px 50px 0px;
}
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　最上段　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.top_line{
 opacity:1!important;
 z-index: 1;
position: relative!important;
}


.badge-gaiyou {vertical-align:center!important;margin-left:20px; margin-right:0px;padding:5px 15px!important;}
.badge-gaiyou p{font-size:21px!important; }

.badge-gaiyou2 {vertical-align:center!important;padding:5px 15px!important;}/*zr_top_tableの項目*/



/*▼▼▼　フレックス指定　▼▼▼ーーー*/

.zr_top{
 background-color:rgba(0,0,0,0.8);
  display          : -webkit-box;
  display          : -ms-flexbox;
  display          : flex;
  -webkit-box-pack : justify;
  -ms-flex-pack    : justify;
  justify-content  : space-between;
  margin           : auto 0px!important;
}

@media screen and (max-width: 1100px){
.zr_top{display:block;}
.top_left_illust_logo,.top_left_illust_tate{min-width:initial!important; text-align: center!important; height: 100%!important;}
}

@media screen and (orientation:portrait) {
.zr_top{display:block;}
}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　flexのorder指定　▼▼▼
pc表示時のカラムの並び順
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

@media screen and (min-width: 1101px){
.top_left_illust_logo{order:2;}
.top_left_illust_tate{order:2;}
.top_center{order: 1;}
.top_right{order: 3;}
}

@media screen and (orientation:landscape) {
.top_left_illust_logo{order:2;}
.top_left_illust_tate{order:2;}
.top_center{order: 1;}
.top_right{order: 3;}
  }




/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　カラム基本指定定　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.zr_top{
max-width  : 1200px!important;
width      : 100%!important;
margin     : 0 auto!important;
height     : 100%;
z-index    : 300;
position   : relative!important;
}


.top_left_illust_logo{
text-align : left;
min-width  : 350px;
max-width  : 35%!important;
height : 100%!important;
position   : relative!important;
z-index    : 100;
}


.top_left_illust_tate{
text-align : center;
min-width  : 355px;
max-width  : 405px!important;
height :100%!important;
position   : relative!important;
z-index    : 100;
background-color:red;
}

@media screen and (max-width: 1100px){
.top_left_illust_logo {
height : 100%!important;
width: 100%!important;
max-width: initial;
}

.top_left_illust_tate {
height : 100%!important;
width: 100%!important;
max-width: initial;
}

}


/*ロゴのみbackground-imageメイン画像*/
.top_image{height:600px;}


.illust_width{
  width:100%;
  max-width:935px;
  overflow: hidden;
}




@media screen and (max-width: 1100px){
.top_image{height:initial;}
}

.top_image_illust_logo img{width:1100px; height:auto;}


.top_center_illust_logo_puti {
  width:100%;
  height:500px;
  overflow: hidden;

  text-align:center;
  margin:0 auto;
  padding:0px!important;
}
.top_center_illust_logo_puti img{
  width: 100%;
  height:auto;
  object-fit:cover;
}


.top_center_illust_logo_new_puti {
  width:100%;
  height:550px;
  overflow: hidden;
  text-align:center;
  margin:0 auto;
  padding:0px!important;
}

.top_center_illust_logo_new_puti img{
  width: 100%;
  height:auto;
  object-fit:cover;
}


.top_center_illust_old_puti{
  text-align:center;
  width:100%!important;
  margin:0 auto!important;
  padding:10px!important;
}


.top_center_illust_tate_puti{
  background-color: black;
  text-align:center;
  width:100%;
  padding:10px!important;
}

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

/*プチのロゴ画像の横幅*/
.top_center_illust_logo_puti{
  width:100%;
  height:auto;
  overflow: hidden;
  text-align:center;
  margin:0 auto;
  padding:0px!important;
}

.top_center_illust_logo_new_puti{
  width:100%;
  height:auto;
  overflow: hidden;
  text-align:center;
  margin:0 auto;
  padding:0px!important;
}


.top_center_illust_old_puti{
  background-color: black;
  text-align:center;
  width:100%;
  padding:0px!important;
}


.top_center_illust_tate_puti{
  background-color: black;
  text-align:center;
  width:100%;
  padding:0px!important;
}

 } 







/*ロゴ画像の横幅*/
.top_center_illust_logo{
  text-align:center;
  width:100%!important;
  margin:0 auto;
}

.top_center_illust_tate{
  background-color: black;
  text-align:center;
  width:100%;
}

@media screen and (max-width: 1100px){
.top_center_illust_logo{
  text-align:center;
  width:100%!important;
  margin:0px auto!important;
}

.top_center_illust_tate{
  background-color: black;
  text-align:center;
  width:100%;
}
}




.bottom_btn{
  background-color: black;
  max-height:100%;
  min-height: 100%;
  margin:-10px 10px 0px 10px!important;
  border-radius: 5px;
  padding: 10px;
}





/*▼▼▼　ツイッターウィジェット基本指定　▼▼▼ーーー*/


/*▼▼▼　左トップロゴ　▼▼▼ーーー*/


.maru_logo{
background-size:190px; 
background-repeat:no-repeat; 
background-position: center center;
border-radius:50%; 
width: 200px; 
height:200px;
margin:-150px auto 80px auto; 
background-color:rgba(255,255,255,0.75);"
}

.maru_logo_key{
background-image:url(https://dl.dropboxusercontent.com/s/kbh1a9h9bqbxkx0/key.png);  
background-size:190px; 
background-repeat:no-repeat; 
background-position: center center;
border-radius:50%; 
width: 200px; 
height:200px;
margin:-135px auto 50px auto; 
background-color:rgba(255,255,255,0.75);"
}



.maru_logo_bar{
  border-top-style:solid;
  border-top-width: 1px;
  background-repeat:no-repeat; background-position:center top;
  background-size:100%;
}

@media screen and (max-width: 768px){/*画面の横幅が768px以下*/
.maru_logo_bar{
background-image:none!important;
border-top-width: 0px;
}
}
/*▼▼▼　　▼▼▼ーーー*/
@media screen and (max-width:1100px){
.zr_top{background-color:rgba(0,0,0,1);}

.top_left_illust_logo,.top_left_illust_tate{max-width:100%!important;}
.top_logo{display:none;}
.top_center{max-width:initial; width: 100%;margin:0;}
.top_center img{
  width: 100%;
  max-height:initial;
  min-width:initial;}
}

@media screen and (max-width:768px){
.top_left_illust_logo,.top_left_illust_tate{ max-width:100%;}  
.top_logo{display:initial;}
}


.top_button {
  max-width:350px!important;
  min-width:120px!important;
}

/** =======================
 * アコーディオン
 * 左 
 ===========================*/

 .accordion02 li{
    list-style-type: none;
    text-align: left!important;
}

 .accordion02 {
    width: 98%;
    margin: 10px auto;
    background: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-top: 0px solid tomato;
 }

.accordion02 .link {
    cursor: pointer;
    display: block;
    padding: 8px;
    color: #4D4D4D;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid #CCC;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.accordion02 li:last-child .link {
    border-bottom: 0;
}



.accordion02 li i {
    position: absolute;
    top: 16px;
    left: -16px;
    font-size: 16px;
    color: #595959;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}



.accordion02 li i.fa-chevron-down {
    right: 12px;
    left: auto;
    font-size: 14px;
}

.accordion02 li.open .link {
    color: #b63b4d;
}

.accordion02 li.open i {
    color: #b63b4d;
}
.accordion02 li.open i.fa-chevron-down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.accordion02 li.default .submenu02 {display: block;}
/**
 * Submenu
 -----------------------------*/
 .submenu02 {
    display: none;
    background: #444359;
    font-size: 14px;
    margin-left: -40px;
 }
 .submenu02 li {
    border-bottom: 1px solid #4b4a5e!important;
 }




 .submenu02 a {
    display: block;
    text-decoration: none!important;
    color: #d9d9d9;
    padding: 12px;
    padding-left: 12px;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    margin-left: -40px;
 }


 .submenu02 a:before {
  content      : " \f138";
  font-weight  : 700!important;
  font-family  : "Font Awesome 5 Free";
  margin-right : 3px;
  margin-left  : 15px;
  color        : #FFF!important;
 }


 .submenu02 a:hover {
    background: #b63b4d;
    color: #FFF;
 }

 .submenu02 a:visited {color:pink}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　付箋ボタンのグリッド配置　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.cssgrid_top_btn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 0.3fr;
  grid-gap: 0.3em;
  border: 0 solid #ddd;
  padding: 0.2em;
  margin: 0 0 1em;
   width:100%;
}

.cssgrid_top_btn > div {
  background: ;
  overflow: auto;
  padding: 0.2em;
  margin:0 auto;
  border:solid 1px #CCCCCCFF;
  min-height:50px;
  width:100%;
  font-size:90%;
height:50px;
 line-height:45px;
  vertical-align:middle!important;

}

@media screen and (max-width: 1100px){
.cssgrid_top_btn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 0.3fr;
  grid-gap: 0.3em;
  border: 0 solid #ddd;
  padding: 0.8em;
  margin: 0 0 1em;
   width:100%;
}

.cssgrid_top_btn > div {
  background: ;
  overflow: auto;
  padding: 0.2em;
  margin:0 auto;
  border:solid 1px #CCCCCCFF;
  min-height:50px;
  width:100%;

}
}

 /*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　トップ右カラム中段のグリッドボタン　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.fusen_btn{
    display: inline-block;
    padding: 0.5em 1em;
    background: #f7f7f7;
    border-left: solid 6px #ff7c5c!important;/*左線*/
    border-top:initial!important;
    border-bottom:initial!important;
    border-right:initial!important;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}

.fusen_btn a{
      text-decoration: none!important;
      color: #7F7F7F!important;/*文字色*/
      font-size:90%;
      font-weight:700;
      margin:50% 0!important;
     text-indent:5px;
}

.fusen_btn:active {
    box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
    transform: translateY(2px);
}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　トップ左カラムのイベント一覧ボタン　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.top_button {
  display: inline-block;
  margin: 5px;
  padding: 2rem 1.5rem;
  border: none;
  border-radius: 0.1875rem;
  outline: none;
  background-color: tomato;
  color: white;
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.top_button:focus, .top_button:hover {
  background-color: #ff7359;
  box-shadow: 0 0 0 0.1875rem white, 0 0 0 0.375rem #ff7359;
  text-decoration:none;
  color:#fff;
}
.top_button:active {
  background-color: #f25e43;
  box-shadow: 0 0 0 0.1875rem #f25e43, 0 0 0 0.375rem #f25e43;
  transition-duration: 75ms;
}
.top_button.is-outlined {
  border: 0.1875rem solid tomato;
  background-color: transparent;
  color: tomato;
}
.top_button.is-outlined:focus, .top_button.is-outlined:hover {
  border-color: #ff7359;
  color: #ff7359;
}
.top_button.is-outlined:active {
  border-color: #f25e43;
  color: #f25e43;
}

*, *::before, *::after {
  box-sizing: border-box;
}


 /*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　datatablesの文字位置　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

#foo-table td{text-align:left!important;}

#foo-table tr :nth-child(3) {}







/*===============================================
●ZR/CITYのテーブル
===============================================*/


.zr_table tr{
  background-color: initial;
  border: solid 2px #fff;
}

.zr_table th {
  border: solid 0px #fff;
  color: black;
  padding: 5px!important;
  width: 20%;
  }

.zr_table td {
  border: solid 0px #fff;
  padding: 15px!important;
  }  


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

.zr_table th {
  border :solid 0px #fff;
  margin-top:10px!important;
  font-size:80%;
  width: initial!important;
}

.zr_table td {
  border: solid 0px #fff;
  font-size:80%;
}

}


/*===============================================
●respon01
===============================================*/

.zr_table{
  font-size:90%;
  line-height: 1.5em;
 }

@media screen and (min-width: 769px){/*画面の横幅が769px以上*/

.zr_table th {
text-align   : center;
min-width    : 25%;
font-size:90%;
}

.zr_table td {
text-align   : left;
}

}

@media screen and (max-width: 768px){/*画面の横幅が768px以下*/
.zr_table{font-size:110%;}
.zr_table td {
  text-align:left;  
　border-bottom: none;
  display: block;
}

.zr_table th{
   text-align:center;   
min-width : initial;
padding   : 5px;
border-bottom: none;
display: block;
}


}


/*===============================================
●ステータスの透明テーブル
===============================================*/





.zr_table_0_title{
margin-top:10px!important;
font-weight:700;
font-size:110%!important;
border-bottom: solid 1px #ccc;
}

.zr_table_0_title:before{
  content      : " \f32b";
  font-weight  : 300!important;
  font-family  : "Font Awesome 5 Pro";
  margin-right : 3px;
  color        : #DB005CFF!important;
}



.zr_table_0{
width:100%!important;
background-color:transparent!important;
margin-top:0px;
}


@media screen and (min-width: 1101px){/*画面の横幅が769px以上*/

.zr_table_0 th {
border: solid 0px #ccc;
color: black;  
text-align   : left;
font-size:95%;
width:120px;
background-color:transparent!important;
}


.zr_table_0 tr{
border-bottom: solid 1px #ccc;
background-color:none!important;
line-height: 1.5em!important;
text-align   : left;
}

.zr_table_0 td {
border: solid 0px #fff;
background-color:;
font-size:110%;
}  

}

@media screen and (max-width: 1100px){/*画面の横幅が768px以下*/
.zr_table_0{font-size:110%; width:100%;}
.zr_table_0 th,
.zr_table_0 td {
  text-align:center;  
　border-bottom: none;
  display: block;
  border: solid 0px #ccc;
  background-color:transparent!important;
  width:100%;
}


.zr_table_0 th{
min-width : initial;
padding   : 3px;
border-top: solid 1px #ccc;
font-size:100%;
}


.zr_table_0 td {
  font-size:110%;
}



}



/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　ステータスの枠　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.status {
    position: relative;
    padding: 0.8em 0.5em;
    border: solid 0px #555;
    background-color:#fff;
    height:100%!important;
    margin-bottom: 5px!important;
    width: 100%!important;
}


.status_illust {
    position: relative;
    padding: 0.8em 0.5em;
    border: solid 1px #555;
    background-color:#FFF;
}
 

.status .status-title {
    position: absolute;
    display: inline-block;
    top: -35px;
    left: -1px;
    padding: 0 9px;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    font-size: 15px;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.status p {
  font-size: 85%;
    margin: 0; 
    padding: 0;
    line-height:1.5;
}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　ステータス内プログレスバー　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.ep{
    font-size:11px;
    font-weight: normal;
    vertical-align: middle;
}