/* header */
header{
display: block;
position: relative;
}
header .wrapper{
position: relative;
padding: 50px 0 0 0;
}
.main{
display: block;
position: relative;
}
header h1{
height: 0;
display: block;
padding-top: 573px;
background: url(../img/logo.png) no-repeat center top;
background-size: contain;
overflow: hidden;
}
header .cross{
width: 306px;
height: 0;
display: block;
padding-top: 116px;
background: url(../img/txt_cross.png) no-repeat center top,url(../img/cloud.png) no-repeat left top;
background-size: auto 54px, 306px auto;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}

/* layout */
.geinin1{
width: 1369px;
height: 257px;
display: block;
background: url(../img/geinin1.png) no-repeat center center;
background-size: auto 256px;
position: absolute;
top: 360px;
left: calc((100vw - 1369px)/2);
}
.geinin2{
width: 1335px;
height: 179px;
display: block;
background: url(../img/geinin2.png) no-repeat center center;
background-size: auto 176px;
position: absolute;
bottom: -100px;
left: calc((100vw - 1335px)/2);
}
.geinin3{
width: 1377px;
height: 317px;
display: block;
background: url(../img/geinin3.png) no-repeat center center;
background-size: auto 317px;
position: absolute;
top: 50px;
left: calc((100vw - 1377px)/2);
}
.geinin4{
width: 1327px;
height: 235px;
display: block;
background: url(../img/geinin4.png) no-repeat center center;
background-size: auto 235px;
position: absolute;
top: 450px;
left: calc((100vw - 1327px)/2);
}
.geinin5{
width: 1394px;
height: 310px;
display: block;
background: url(../img/geinin5.png) no-repeat center center;
background-size: auto 310px;
position: absolute;
bottom: 0;
left: calc((100vw - 1394px)/2);
}

.cow1{
width: 494px;
height: 199px;
display: block;
background: url(../img/cow1.png) no-repeat center center;
background-size: auto 198px;
position: absolute;
top: 199px;
right: calc(50vw - 520px - 494px);
}
.cow2{
width: 566px;
height: 131px;
display: block;
background: url(../img/cow2.png) no-repeat center center;
background-size: auto 131px;
position: absolute;
top: 349px;
left: calc(50vw - 530px - 566px);
}

/* news */
#news{
display: block;
margin: 60px 0 0 0;
position: relative;
z-index: 3000;
}
#news .boxShadow .contentBox{
padding: 0 50px 50px 50px;
}
#news h2{
display: inline-block;
margin: 0 0 -32px 0;
padding: 0 100px 0 100px;
background-color: #0c6b06;
border-radius: 8px;
color: #ffffff;
font-size: 3.6rem;
font-weight: 700;
line-height: 64px;
position: relative;
top: -32px;
overflow: hidden;
}

/* about */
#about{
display: block;
padding: 80px 0 0 0;
background: linear-gradient(180deg,rgba(251,249,238,0) 0%,rgba(251,249,238,0) 87%,rgba(251,249,238,0.6) 91%, rgba(251,249,238,1) 94%),url(../img/bg_dark.jpg) no-repeat center top 170px;
background-size: 100vw 100%, 100vw auto;
color: #ffffff;
text-align: center;
position: relative;
}
#about:before{
content: "";
width: 100vw;
height: 250px;
display: block;
background: url(../img/bg_dark180.jpg) no-repeat center bottom -50px;
background-size: 100vw auto;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
position: absolute;
top: -80px;
left: 0;
}
#about .wrapper{
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
gap: 60px;
padding: 0 0 200px 0;
background: url(../img/logo88.svg) no-repeat center bottom;
background-size: auto 148px;
}
#about h3{
width: 100%;
height: 0;
display: block;
padding-top: 55px;
background: url(../img/txt_warainohi.svg) no-repeat center center;
background-size: contain;
overflow: hidden;
}
.aboutTxt{
display: block;
font-size: 3.6rem;
font-weight: 700;
}
.aboutTxt p{
display: inline-block;
margin: 0 8px 0 8px;
color: #fbdf18;
}
.aboutTxt p span{
display: inline-block;
margin: 0 0 0 8px;
font-size: 2.5rem;
}


/* event */
#event{
display: block;
padding: 30px 0 100px 0;
background-color: #fbf9ee;
}
#event h2{
height: 0;
display: block;
padding-top: 322px;
background: url(../img/h2_event.png?v2501) no-repeat center center;
background-size: contain;
overflow: hidden;
}
.eventAtt{
display: block;
margin: 0 0 0 0;
font-weight: 400;
text-align: center;
}
.eventAtt p{
font-size: 2.4rem;
font-weight: 700;
color: #48a642;
}
.eventAtt ul{
display: block;
margin: 8px 0 0 0;
text-align: center;
}
.eventAtt ul li{
display: block;
font-size: 1.4rem;
}
.eventAtt ul li:before{
content: "※";
display: inline-block;
margin-right: 3px;
}

.selectDate{
display: flex;
justify-content: center;
gap: 10px;
margin: 50px 0 0 0;
text-align: center;
}
.selectDate li{
width: 188px;
display: block;
line-height: 1;
position: relative;
cursor: pointer;
}
.selectDate li a{
display: block;
padding: 10px 0 10px 0;
background-color: #48a642;
color: #ffffff;
border-radius: 8px;
box-shadow: 0 0 8px rgba(0,0,0,0.25);
font-size: 3.3rem;
font-weight: 700;
}
.selectDate li a span{
display: inline-block;
margin-left: 4px;
color: #ffffff;
font-size: 2rem;
}
.selectDate li a:hover{
background-color: #42ce39;
box-shadow: none;
}
.selectDate li p{
display: block;
margin: 8px 0 0 0;
color: #fbdf18;
font-size: 2rem;
position: relative;
z-index: 3000;
overflow: hidden;
}

#event .contentBox{
margin: 60px 0 0 0;
padding: 40px 38px 40px 78px;
text-align: left;
position: relative;
}

.dateCir{
width: 130px;
height: 130px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
background-color: #0c6b06;
color: #ffffff;
border-radius: 65px;
text-align: center;
line-height: 1;
position: absolute;
top: 50px;
left: 50px;
}
.dateCir p{
display: block;
font-size: 5rem;
font-weight: 700;
}
.dateCir p span{
display: block;
font-size: 2.4rem;
}
.dateCir p span.city{
display: block;
margin: 5px 0 0 0;
font-size: 2.4rem;
color: #f3dc1b;
}

.posterImg{
display: block;
text-align: center;
}
.posterImg img{
width: 400px;
height: auto;
}
.posterImg.super img{
width: 600px;
height: auto;
}

.contentInfo{
display:block;
margin: 30px 0 0 0;
text-align: center;
}
.contentInfo h3{
display: block;
color: #0c6b06;
font-size: 3.2rem;
font-weight: 700;
}
.contentInfo ul{
display: flex;
flex-direction: column;
gap: 20px;
margin: 50px 0 0 0;
text-align: left;
}
.contentInfo ul li{
display: block;
}
.contentInfo ul li dl{
display: flex;
justify-content: space-between;
align-items: flex-start;
font-size: 1.8rem;
font-weight: 600;
}
.contentInfo ul li dl dt{
width: 115px;
display: block;
padding: 10px 0 10px 0;
background-color: #48a642;
color: #ffffff;
border-radius: 8px;
font-size: 1.6rem;
text-align: center;
}
.contentInfo ul li dl span.timestart{
display: inline-block;
margin: 0 10px 0 0;
color: #0c6b06;
}
.contentInfo ul li dl span.time{
display: inline-block;
margin: 0 2px 0 10px;
color: #0c6b06;
}
.contentInfo ul li dl dd{
width: calc(100% - 135px);
display: block;
padding: 8px 0 0 0;
text-align: left;
}
#event a.accessLink{
display: inline-block;
margin: 0 0 0 10px;
padding: 0 12px 0 12px;
border: 2px solid #48a642;
border-radius: 11px;
color: #48a642;
font-size: 1.4rem;
line-height: 22px;
}
#event a.accessLink:hover{
background-color: #42ce39;
border: 2px solid #42ce39;
color: #ffffff;
}
.contentInfo ul li dl dd p{
display: block;
}
.contentInfo ul li dl dd p span{
display: inline-block;
margin: 0 5px 0 0;
color: #0c6b06;
font-weight: 700;
}
.ticketTit{
display: inline-block;
margin: 15px 10px 0 0 !important;
padding: 0 10px 0 10px;
background-color: #0c6b06;
color: #ffffff !important;
border-radius: 8px;
font-size: 1.4rem;
}
.contentInfo ul li dl dd a.ticketLink{
display: block;
margin: 15px 0 0 0;
background-color: #e09133;
color: #ffffff;
border-radius: 20px;
box-shadow: 0 0 8px rgba(0,0,0,0.25);
text-align: center;
line-height: 72px;
}
.contentInfo ul li dl dd a.ticketLink:hover{
background-color: #ee6623;
box-shadow: none;
}
.ticketAtt{
display: flex;
flex-direction: column;
margin: 15px 0 0 0;
}
.ticketAtt p{
display: block;
padding: 0 0 0 1.5em;
position: relative;
}
.ticketAtt p:before{
content: "※";
width: 1em;
display: block;
position: absolute;
top: 0;
left: 0;
}
.ticketAtt2{
display: block;
margin: 30px 0 0 0;
}
.ticketAtt2 a{
color: #48a642;
}
.ticketAtt3{
display: inline-block;
color: #666666;
font-size: 1.4rem;
}


/* -- */
/* -- */
/* SP */
/* -- */
/* -- */
@media screen and (max-width: 768px) {
/* */
/* */


/* header */
header{
height: 160vw;
}
header .wrapper{
padding: 0 0 0 0;
}
.main{
}
header h1{
display: none;
}
header .cross{
display: none;
}

/* layout */
.geinin1,
.geinin2,
.geinin3,
.geinin5{
display: none;
}
.geinin4{
width: 716px;
height: 120px;
display: block;
background: url(../img/geinin_sp.png) no-repeat center center;
background-size: auto 120px;
position: absolute;
bottom: auto;
top: -150px;
left: calc((100vw - 716px)/2 + 20px);
z-index: 3000;
}

.cow1,
.cow2{
display: none;
}

/* news */
#news{
margin: 0 0 -1px 0;
background: url(../img/bg_dark_sp.jpg) repeat-y center top;
background-size: 100vw auto;
background-color: #0c6b06;
position: relative;
top: -1px;
}
#news .wrapper{
display: block;
margin-bottom: -20px;
position: relative;
top: -20px;
}
#news .boxShadow .contentBox{
padding: 0 20px 30px 20px;
position: relative;
z-index: 3500;
}
#news h2{
height: 0;
display: block;
margin: 0 0 -62px 0;
padding: 120px 0 0 0;
background: url(../img/h2_news_sp.png) no-repeat center center;
background-size: contain;
position: relative;
top: -62px;
}

/* about */
#about{
padding: 20px 0 0 0;
background: linear-gradient(180deg,rgba(251,249,238,0) 0%,rgba(251,249,238,0) 87%,rgba(251,249,238,0.6) 91%, rgba(251,249,238,1) 94%),url(../img/bg_dark_sp.jpg) repeat-y center top;
background-size: 100vw 100%, 100vw auto;
color: #ffffff;
position: relative;
}
#about:before{
display: none;
}
#about .wrapper{
gap: 20px;
padding: 0 0 150px 0;
background: url(../img/logo88.svg) no-repeat center bottom;
background-size: auto 108px;
}
#about h3{
width: 70vw;
max-width: 300px;
padding-top: 35.2%;
background: url(../img/txt_warainohi_sp.svg) no-repeat center center;
background-size: contain;
}
.aboutTxt{
font-size: 2.2rem;
}
.aboutTxt p{
margin: 0 8px 0 8px;
color: #fbdf18;
}
.aboutTxt p span{
display: inline-block;
margin: 0 0 0 8px;
font-size: 2.5rem;
}


/* event */
#event{
padding: 30px 0 80px 0;
}
#event h2{
padding-top: 43.1%;
background: url(../img/h2_event.png) no-repeat center center;
background-size: contain;
}
.eventAtt{
margin: 8px 0 0 0;
}
.eventAtt p{
font-size: 1.6rem;
}
.eventAtt ul{
text-align: left;
}
.eventAtt ul li{
display: block;
font-size: 1.1rem;
}
.eventAtt ul li:before{
content: "※";
display: inline-block;
margin-right: 3px;
}

.selectDate{
gap: 10px;
margin: 50px 0 0 0;
}
.selectDate li{
width: calc((100% - 20px)/3);
}
.selectDate li a{
padding: 10px 0 10px 0;
font-size: 2.4rem;
}
.selectDate li a span{
font-size: 1.8rem;
}
.selectDate li a:hover{
}
.selectDate li p{
margin: 8px 0 0 0;
font-size: 1.7rem;
}

#event .contentBox{
margin: 40px 0 0 0;
padding: 40px 20px 40px 20px;
}

.dateCir{
width: 130px;
height: 130px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
background-color: #0c6b06;
color: #ffffff;
border-radius: 65px;
text-align: center;
line-height: 1;
position: absolute;
top: 50px;
left: 50px;
}
.dateCir p{
display: block;
font-size: 5rem;
font-weight: 700;
}
.dateCir p span{
display: block;
font-size: 2.4rem;
}
.dateCir p span.city{
display: block;
margin: 5px 0 0 0;
font-size: 2.4rem;
color: #f3dc1b;
}

.posterImg{
}
.posterImg img{
width: 100%;
height: auto;
}
.posterImg.super img{
width: 100%;
height: auto;
}

.contentInfo{
margin: 20px 0 0 0;
}
.contentInfo h3{
font-size: 2.5rem;
line-height: 1.4;
text-align: left;
}
.contentInfo ul{
gap: 20px;
margin: 30px 0 0 0;
}
.contentInfo ul li{
}
.contentInfo ul li dl{
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1.6rem;
}
.contentInfo ul li dl dt{
width: 115px;
padding: 7px 0 7px 0;
background-color: #48a642;
color: #ffffff;
border-radius: 8px;
font-size: 1.5rem;
text-align: center;
}
.contentInfo ul li dl span.timestart{
display: inline-block;
margin: 0 10px 0 0;
color: #0c6b06;
}
.contentInfo ul li dl span.time{
display: inline-block;
margin: 0 2px 0 0;
color: #0c6b06;
}
.contentInfo ul li dl dd{
width: 100%;
display: block;
padding: 8px 0 0 0;
text-align: left;
}
#event a.accessLink{
display: inline-block;
margin: 0 0 0 10px;
padding: 0 12px 0 12px;
border: 2px solid #48a642;
border-radius: 11px;
color: #48a642;
font-size: 1.4rem;
line-height: 22px;
}
#event a.accessLink:hover{
background-color: #42ce39;
border: 2px solid #42ce39;
color: #ffffff;
}
.contentInfo ul li dl dd p{
display: block;
}
.contentInfo ul li dl dd p span{
display: inline-block;
margin: 0 5px 0 0;
color: #0c6b06;
font-weight: 700;
}
.ticketTit{
display: inline-block;
margin: 15px 10px 0 0 !important;
padding: 0 10px 0 10px;
background-color: #0c6b06;
color: #ffffff !important;
border-radius: 8px;
font-size: 1.4rem;
}
.contentInfo ul li dl dd a.ticketLink{
display: block;
margin: 15px 0 0 0;
background-color: #e09133;
color: #ffffff;
border-radius: 20px;
box-shadow: 0 0 8px rgba(0,0,0,0.25);
text-align: center;
line-height: 72px;
}
.contentInfo ul li dl dd a.ticketLink:hover{
background-color: #ee6623;
box-shadow: none;
}
.ticketAtt{
display: flex;
flex-direction: column;
margin: 15px 0 0 0;
}
.ticketAtt p{
display: block;
padding: 0 0 0 1.5em;
position: relative;
}
.ticketAtt p:before{
content: "※";
width: 1em;
display: block;
position: absolute;
top: 0;
left: 0;
}
.ticketAtt2{
display: block;
margin: 30px 0 0 0;
}
.ticketAtt2 a{
color: #48a642;
}
.ticketAtt3{
display: inline-block;
color: #666666;
font-size: 1.4rem;
}



/* */
/* */
}
/* -- */
/* -- */
/* SP */
/* -- */
/* -- */

@media screen and (max-width: 500px) {
.geinin4{
width: 716px;
height: 100px;
display: block;
background: url(../img/geinin_sp.png) no-repeat center center;
background-size: auto 100px;
position: absolute;
bottom: auto;
top: -120px;
left: calc((100vw - 716px)/2 + 20px);
z-index: 3000;
}

}

@media screen and (max-width: 420px) {
.geinin4{
width: 716px;
height: 90px;
display: block;
background: url(../img/geinin_sp.png) no-repeat center center;
background-size: auto 90px;
position: absolute;
bottom: auto;
top: -100px;
left: calc((100vw - 716px)/2 + 10px);
z-index: 3000;
}

}

@media screen and (max-width: 380px) {
#news h2{
height: 0;
display: block;
margin: 0 0 -52px 0;
padding: 90px 0 0 0;
background: url(../img/h2_news_sp.png) no-repeat center center;
background-size: contain;
position: relative;
top: -52px;
}
.geinin4{
width: 716px;
height: 80px;
display: block;
background: url(../img/geinin_sp.png) no-repeat center center;
background-size: auto 80px;
position: absolute;
bottom: auto;
top: -90px;
left: calc((100vw - 716px)/2 + 10px);
z-index: 3000;
}

}