/*
Theme I: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
Theme Name: mikansei
Description: Child theme for Uncode theme
Author: Undsgn™
Author UR
*/

body::before {
  background:url('https://stayfreeee.com/pushpullpot-mikanseinote/wp-content/uploads/sites/15/2026/03/bb-scaled.jpg') ;
 
background-position:  center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size:cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  
  width: 100vw;
 height: 100vh;
 
  content: "";
  z-index: -1;
}




h1,h2 {}

h3,h4 {}

h1 { font-size:4vw!important; 
    text-shadow: 1px 2px 5px #000;  
   }
h2 {
    font-size:3.5vw!important; 
    text-shadow: 1px 2px 5px #000;  
  text-stroke: 1px #FFF; }
h3 {font-size:2.5vw!important; margin:0px; margin-bottom:10px;}
h4 {font-size:1.5vw!important; margin:0px!important;}

.top {margin-top:300px; font-size:2vw; text-shadow: 1px 2px 5px #000;}
.top h1 {font-size:5vw!important; text-shadow: 1px 2px 5px #000; color:#fff!important;}
.top img {width:80%; display:table; margin:20px auto;
margin-top:50px;
}
.pc {display:table;}
.sp {display:none;}

.orange {color:#ff8a44;}


.menu-wrapper {display:none;}

.outbox {margin-bottom:100px;}

.box {background:rgba(0, 0, 0, 0.6); color:#fff; 
    padding:10px;
 outline : 1px solid #006b71; /* 線の太さ・線状・色 */
  outline-offset : -5px /* どれだけ内側に線を表示したいかを負の値で指定 */
}

.box a {color:#006b71; text-decoration: underline;}


.guest { 

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:10px;
}


.item {width:30%;  border:1px solid #006b71; 
    opacity: 0;
    transform: translateY(20px);
   
    visibility: hidden; /* 初期状態では非表示 */
    display:relative;position: relative;


    font-weight:bold;

}

.new {position: absolute; top:0; left:0;}

.item img {transition: 0.5s;}

.item img:hover  {
    transform: scale(1.05);
}



.item.visible {
   opacity: 1; /* 完全に表示 */
    visibility: visible; /* 可視状態にする */
    transform: translateY(0); /* 元の位置に戻す */
    animation: fadeInUp 0.8s ease forwards; /* アニメーションを追加 */
}

/* アニメーションのキー */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}





 .table-responsive table {
      width: 100%;
      margin:0;
      margin-bottom: 20px;
      
border: none!important;
    }

    th {
      padding: 10px;
     
      border: none!important;

      background: #006b71!important;
     
    }


      td {
      padding: 10px;
      text-align: left;
    border: none!important; 
 border-bottom:1px dotted #006b71!important;
      
     
    }




    th {
      background-color: #f4f4f4;
    }

.sold {background:#ff0000; color:#fff; display:inline; padding:2px 10px;}


ul {display:table; margin:0 auto; text-align:left;}


.ticket img {transition: 0.5s; border:1px solid #006b71; }

.ticket img:hover {transform: scale(1.05);}

.playguide {display:flex; gap:5px; justify-content: center; margin:30px 0;}

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




body::before {
  background:url('https://stayfreeee.com/pushpullpot-mikanseinote/wp-content/uploads/sites/15/2026/03/sp-1.jpg') ;
 
background-position:  center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size:cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  
  width: 100vw;
 height: 100vh;
 
  content: "";
  z-index: -1;
}

 



.playguide  {width:70%; margin:20px auto;}

.sp {display:block;}
.pc {display:none;}


h1 {font-size:8vw!important;}
h2 {font-size:6vw!important;}
h3 {font-size:5vw!important;}
h4 {font-size:4vw!important;}

.top {font-size:4vw!important; margin-top:10px;}
.top h1 {font-size:6vw!important; text-shadow: 1px 2px 5px #000; color:#fff!important; margin:0; margin-top:10px;}
.top img {width:100%;}

.outbox {margin-bottom:0px;}

.table-responsive img {
display: inline-block;
    width:60%; margin:5px auto;}

th, td {
        padding: 8px;
        text-align:center;
      }

      /* Stack rows on small screens */
      table, thead, tbody, th, td, tr {
        display: block;
      }

      thead tr {
        display: none;
      }

td:first-child {
    
   
    font-weight: bold;

    background:#006b71!important;
      color:#ebfdfe;
   
  }


td:last-child {
    margin-bottom:30px;

   
  }


      
    td:before {
    content: attr(data-label);
   display: block;

   font-size:10px;
   
  }



.item {width:48%;}




}