@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
---------------------*/
#p-keyvisual{
  background: #f7f7f7;
}
#wrapper h1{ 
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
#wrapper h1 img{
  width: 100%;
}
@media screen and (max-width:768px) {
  #wrapper h1{ width: 100%;  margin: 0 auto;}
}
#container{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
/*  background: url(../img/bg_main.png) repeat;*/
}

/*-----------------------
#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);
}
@media screen and (max-width:768px) {
  #outline dl{
    font-size: clamp(14px ,2.6vw ,20px);
  }
}

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

 #outline dd {
    width: 100%;  
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin-bottom: 3%;
    padding: 3% 0px;
    border-bottom: solid 1px #000;
    text-align: center;
}
#outline dd:last-child{
  border-bottom: none;
}

#outline #ticket{ 
  width: 80%;
  margin: 0 auto 5% auto;
  text-align: center;
  border :1px solid #000;
}
#outline #ticket dt{
  background: #dadada;
  font-weight: normal;
}
@media screen and (max-width:768px) {
  #outline #ticket dt{
    padding: 2%;
    font-size: clamp(13px ,2.6vw ,20px);
  }
}
#outline #ticket dd{
  width: 98%;
  margin: 0 1%;
  border-bottom: none; 
}
#outline #ticket .line{
  border-bottom: solid 1px #000; 
}
#outline #ticket span{
  display: block; 
}
#outline #ticket span.name{
  font-size: clamp(20px ,2.5vw ,30px);
}
@media screen and (max-width:768px) {
  #outline #ticket span.name{
      padding-top: 2%;
      font-size: clamp(17px ,3.2vw ,25px);
  }
}

#outline #ticket span.note{
  font-size: clamp(13px ,1.7vw ,20px);
}

@media screen and (max-width:768px) {
  #outline #ticket span.note{
     font-size: clamp(12px ,1.8vw ,14px);
  }
}

#outline #ticket span.price{
  margin: 2.5% 0 0 0;
  font-size: clamp(24px ,3.0vw ,36px);
}

@media screen and (max-width:768px) {
  #outline #ticket span.price{
      margin: 2.5% 0 2.5% 0; 
    font-size: clamp(20px ,3.9vw ,30px);
  }
}

#outline  .attTxt{
  text-align: left;
  margin:  0.5% 9% 0.5% 10%;
  padding-left: 1em;
  text-indent: -1em;
  font-weight: normal;
}

#outline .attTxt::before{
    content: "※";
}


/*-----------------------
#sns
-----------------------*/
#sns{ width : 70%; margin: 10% 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%}


/*-----------------------
#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: '※';  
}

/*-----------------------
#sponsorship
-----------------------*/
#sponsorship{
  width: 52%;
  margin: 10% auto 0 auto;
  padding: 5% 17%;
  background: #dadada;
}
#sponsorship h2{
  margin-bottom:8%;
  padding-bottom: 4%;
  color:#333;
  letter-spacing:0.5rem;
  font-size: clamp(29px ,3.7vw ,44px);
  text-align: center;
  border-bottom: 1px solid #959595;
}
@media screen and (max-width:768px) {
    #sponsorship h2{
        font-size: clamp(20px ,3.9vw ,30px);  
    }
}

#sponsorship li{
  margin-bottom:5%; 
 
}

/*-----------------------
#sponsor
-----------------------*/
#sponsor {
    width: 64%;
    margin: 10% auto;
}
@media screen and (max-width:768px) {
	#sponsor {
		width: 85%;
	}
}
#sponsor h2{
	color: #930100;
    font-size: clamp(24px, 3.0vw, 36px);
	text-align: center;
}
@media screen and (max-width:768px) {
    #sponsor h2{
        font-size: clamp(20px ,3.9vw ,30px);  
    }
}
#sponsor #spAbk{border-bottom: 1px dotted #999;}
#sponsor #spA{
	width: 90%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin: 5% auto;
	
}
@media screen and (max-width:768px) {
	#sponsor #spA{
		display: grid;
		grid-template-columns: 1fr;
	}
}
#sponsor #spA img{ display: block; width: 80%; margin: 0 auto;}

#sponsor #spB{
	width: 100%;
	margin: 5% auto;
	display: flex;
  flex-wrap: wrap;
  justify-content: center;	
}
#sponsor #spB li{
	width: 30%;
}


@media screen and (max-width:768px) {
#sponsor #spB li{
	width: 50%;
}
}
#sponsor #spB img{ display: block; width: 90%; margin: 0 auto;}