@charset "utf-8";
/* CSS Document */

/*---------------------
  doit.php(default)
---------------------*/
html {
    scroll-behavior: smooth;
}

body{
	-webkit-text-size-adjust:100%;
}
div#contents_box{ padding: 0;}
picture img{
  vertical-align: bottom;
  width: 100%;
  height: auto;
}
li{ list-style-position: inside; list-style: none;}

div a {
  width: fit-content;
  margin: 0 auto;
  color:#007FEB;
}
div a:hover {
text-decoration:underline;
}
div a:visited {
color:#007FEB;
}

@media screen and (min-width:769px) {
/*PC*/  
.disN{ display: none;}
}
@media screen and (max-width:768px) {
/* SP */
.disNSp{ display: none;}
}


.disB{ display: block;}

.disNoTxt{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}
/*---------------------
  doit.php
---------------------*/
#wrapper{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 10%;
  background: url(../img/bg_main.png) repeat;
}
#wrapper h1{ width: 90%;  margin: 0 auto;}
#wrapper h1 img{
  width: 100%;
}
@media screen and (max-width:768px) {
  #wrapper h1{ width: 100%;  margin: 0 auto;}
}
/*-----------------------
#outline
-----------------------*/
#outline{
  position: relative;
  width: 75%;
  margin: 10% auto 5% auto;
  padding: 7% 5% 5% 5%;
  background: #fff;
  border: 3px solid #000;  
}

#outline h2{
position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;  
}
@media screen and (max-width:768px) {
    #outline h2{
        width: 95%;  
    }
}

#outline dl{
font-size: clamp(16px ,2.6vw ,26px);
display: flex;
flex-wrap: wrap;
justify-content: start;  
}
@media screen and (max-width:768px) {
  #outline dl{
    font-size: clamp(13px ,2.3vw ,18px);
  }
}

#outline dl .txtS{
font-size: clamp(12px ,1.8vw ,18px);
}
@media screen and (max-width:768px) {
  #outline dl .txtS{
      font-size: clamp(13px ,1.8vw ,14px);
  }
}


#outline dt, #outline dd {
    letter-spacing: 0.05em;
    line-height: 1.5;
    padding: 3% 0px;
    border-bottom: solid 1px #000;
}
#outline dt:last-of-type,#outline dd:last-child{
  border-bottom: none;
}

#outline dt {
    width: 30%;
    font-weight: normal;
    text-align: left;
}
#outline dd {
  width: 70%;
  font-weight: bold;
  text-align: left;
}
#outline #ticket{ text-align: left;}
#outline #ticket dt,#outline #ticket dd{ border-bottom: none;}
#outline #ticket dt{ width: 70%; text-align: left;  font-weight: bold;}
#outline #ticket dd{ width: 30%;}
@media screen and (max-width:768px) {
    #outline #ticket dt{ width: 60%; text-align: left;  font-weight: bold;}
    #outline #ticket dd{ width: 40%;}
}
#outline  .attTxt{
  margin:  0.5% auto;
  padding-left: 1em;
  text-indent: -1em;
  font-weight: normal;
}

#outline .attTxt::before{
    content: "※";
}
/*-----------------------
#intro
-----------------------*/
#intro{
  position: relative;
  width: 75%;
  margin: 5% auto;
  padding: 7% 5% 5% 5%;
  background: #fff;
  border: 3px solid #000;
  font-size: clamp(16px ,2.6vw ,26px);
  text-align: center;
  line-height: 1.85;
}
@media screen and (max-width:768px) {
    #intro {
        padding-top: 10%; 
        font-size: clamp(13px ,2.7vw ,20px);
    }
}


#intro h2{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;  
}

@media screen and (max-width:768px) {
    #intro h2{
        width: 95%;  
    }
}


#intro h3{ 
  margin-bottom: 2.5%;
  padding-bottom: 2.5%;
  border-bottom:  2px solid #000;
}
#intro ul{   
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5%;
     margin-top: 8%;
}
@media screen and (max-width:768px) {
    #intro ul{   
        grid-template-columns: repeat(2, 1fr);
    }
}
  
/*-----------------------
#sns
-----------------------*/
#sns{ width : 70%; margin: 0 auto;}


/*-----------------------
#recruitment
-----------------------*/
#recruitment{
  position: relative;
  width: 75%;
  margin: 10% auto;
  padding: 7% 5% 5% 5%;
  background: #fff;
  border: 3px solid #000;
  font-size: clamp(16px ,2.6vw ,26px);
  text-align: center;
  line-height: 1.85;
}

#recruitment h2{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;  
}

@media screen and (max-width:768px) {
    #recruitment h2{
        width: 95%;  
    }
}

#recruitment a{ 
  display: block;
  width: 68%;
  margin: 0 auto;
}
#recruitment img{ width: 100%}

/*-----------------------
#mainEvent
-----------------------*/
#mainEvent{
  position: relative;
  width: 75%;
  margin: 10% auto;
  padding: 7% 5% 5% 5%;
  background: #fff;
  border: 3px solid #000;
  font-size: clamp(16px ,2.6vw ,26px);
  text-align: center;
  line-height: 1.85;
}

#mainEvent h2{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;  
}

@media screen and (max-width:768px) {
    #mainEvent h2{
        width: 95%;  
    }
}

/*-----------------------
#buyTickets
-----------------------*/
#buyTickets{
  position: relative;
  width: 75%;
  margin: 10% auto;
  padding: 7% 5% 5% 5%;
  background: #fff;
  border: 3px solid #000;
  font-size: clamp(16px ,2.6vw ,26px);
  text-align: center;
  line-height: 1.85;
}

#buyTickets h2{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;  
}

@media screen and (max-width:768px) {
    #buyTickets h2{
        width: 95%;  
    }
}
#buyTickets #tiketList{}
@media screen and (max-width:768px) {
  #buyTickets #tiketList{ margin-top: 10%;}
}
#buyTickets #tiketList img{width: 100%;}


  #buyTickets #purchaseArea{
    width : 50%;
    margin: 0 auto;
  }
 #buyTickets #purchaseArea img{width: 100%;}

@media screen and (max-width:768px) {
  #buyTickets #purchaseArea{
    width : 75%;
    margin: 0 auto;
  }
}



#buyTickets .attList{
  font-size: clamp(12px ,1.8vw ,14px);
  text-align: left;
}

#buyTickets .attList li{
  padding-left: 1em;
  text-indent: -1em;
}

#buyTickets .attList li::before {
     content: '※';  
}

/*-----------------------
#mainEvent
-----------------------*/
#mainEvent img{ width: 100%;}
#mainEvent h3{
 background-color: #8b0000; /* 濃い赤 */
 color: #fff; /* 白文字 */
 margin-top: 4%;
 padding: 1% 4%;
 border-radius: 30px; /* 角丸 */
 display: inline-block; /* 幅をコンテンツに合わせる */
 margin-bottom: 2%;
}
#mainEvent h4{
  width: 80%;
  margin: 1rem auto;
}
#mainEvent .imgArea{ padding: 5%;}
#mainEvent .secLine{
   --h: 3px;      /* 線の太さ */
  --dash: 14px;  /* 破線の長さ */
  --gap: 10px;   /* すき間 */
  height: var(--h);
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    #222 0 calc(var(--dash)),
    transparent calc(var(--dash)) calc(var(--dash) + var(--gap))
  );
  margin: 2rem 0;
}