@import url("/js/slick/slick.css");
@import url("/js/slick/slick-theme.css");

html { scroll-behavior: smooth }
body {
  background-image: none;
  padding: 0;
  margin: 0;
  height: 100%;
  -webkit-text-size-adjust: none;
  min-width: initial
}

:root {
	--rightBlue: #0FF;
}

main {
  padding-bottom: 0;
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #FFF;
  overflow: hidden;
  font-size:min(3.5vw,20px);
  line-height: 1.6;
  background: linear-gradient(to right, #cf0084, #05237d)
}
article:nth-of-type(even) { background: linear-gradient(to right, rgba(48,100,216,0.3), rgba(0,0,0,0.3)) }
article > section { padding: min(2.5vw,2em) 0 }
#TOP { padding-top: 100px; margin-top: -100px }
i { font-style:normal }
p { margin-bottom:min(5vw,1.5em) }
ul,li { list-style:none; margin:0; padding:0 }
table,td,th { border-spacing: 0; border: none; padding: 0; border-collapse: collapse }
dl,dt,dd { margin:0; padding:0 }
a[name] { display: block; margin-top:-100px; padding-top:100px }

/* header */
div.spHeader { min-width:1000px }
div.spHeader > h1 { background-image: url(../image/mainView.jpg) }

/* contents */
.inner { width:min(100%,720px); margin:auto; padding:min(5.5vw,2em) min(4vw,1em); box-sizing:border-box }
.textBu,.textBoBu { color:var(--rightBlue) }

/*TITLE*/
h2 {
  margin: 0 0 0.8em;
  border-left: none;
  padding: 0;
  min-height: initial;
  font-weight: bold;
  background-color:transparent;
  text-align: center
}
h2 > img { width:min(80vw,500px) }
h2 ~ div.inner { margin-top:max(-16vw,-95px); border-radius:min(7.5vw,50px); background-color: rgba(0,0,0,0.5); padding-top: min(16vw,110px) }
h2 ~ div.inner > .innerIn { border:1px solid var(--rightBlue); width: min(100%,660px); margin:min(12vw,60px) auto 0.2rem; padding:min(1vw,2rem) min(3vw,1.5rem) min(4vw,2rem); box-sizing: border-box }
h3 {
  margin: max(-8vw,-50px) 0 1rem;
  padding: 0;
  min-height: initial;
  font-size: min(4.3vw,27px);
  font-weight: 900;
  line-height: min(12vw,100px);
  border: none;
  color: #FFF;
  background: url(../image/h3Bg1.webp) no-repeat center;
  background-size: min(100%,622px) auto;
  text-align: center;
}

/*ボタン*/
a.btn {
  box-sizing: border-box;
  border:var(--rightBlue) min(0.3vw,2px) solid;
  border-radius:40px;
  background-color:#FFF;
  color:#000;
  text-decoration:none;
  width:80%;
  max-width:500px;
  display:block;
  margin:auto;
  text-align:center;
  padding:min(3.5vw,0.5em);
}

/* ABOUT */
#aboutWrap .memo { background-color: rgba(0,0,0,0.5); padding: 0.5rem; font-weight: 400 }

/* PROGRAM */

/* TICKET */
#ticketWrap .innerIn > ul li { border-bottom:#FFF 2px dashed }
#ticketWrap .innerIn > ul li a { display: flex; justify-content: space-between; color: #fff; padding: 0.5rem 0; text-decoration: none }
#ticketWrap .innerIn > ul li a::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900; 
  content: "\f138";
  color: #e00ea5;
}
table.tableB { border: none }
table.tableB td { border-top:none;border-right:none;border-bottom-style:dashed;border-left:none; font-weight:inherit }

/* PRESENT */

/* FANCLUB */

/* GOURMET */

/* SPONSOR */
article#sponsorWrap { background:#FFF; color:#000 }
article#sponsorWrap .inner { padding-left: 0; padding-right: 0 }

/* NEWS */
article#newsWrap { background: #00005a; color:#FFF }
article#newsWrap h2 > img { width:min(40vw,277px) }
article#newsWrap .inner { padding-left: 0; padding-right: 0 }
article#newsWrap li { border-bottom:#2b00b2 1px solid; padding:0 }
article#newsWrap li a { padding:min(4vw,0.6em) 0; display:flex; align-items: flex-start; justify-content: flex-start; color:#FFF }
article#newsWrap li a > span { width:98% }
article#newsWrap li a:before { font-family:"Font Awesome 6 Free"; content:"\f0da"; font-weight:900; color:#ca0184; width:2%; margin-right:1% }
article#newsWrap li a:hover { text-decoration:none }


/*FONT*/
.lh102 { line-height:1.2 }
.f30 { font-size:min(5.2vw,30px) }
.f36 { font-size:min(5.4vw,36px) }
.f40 { font-size:min(6vw,40px) }
.f42 { font-size:min(6.2vw,42px) }
.f44 { font-size:min(6.6vw,44px) }
.f50 { font-size:min(7vw,50px) }

/* ========== フォトギャラリー ========== */
section#photo { padding-top:0; margin-top:0 }
#photos { display: flex; flex-wrap: wrap }
#photos img {
  width: 96% !important;
  height: auto !important;
  margin: 2%;
}
@media (max-width: 1200px) { #photos figure { width: 20% } }
@media (max-width: 1200px) { #photos figure { width: 20% } }
@media (max-width: 1000px) { #photos figure { width: 20% } }
@media (max-width: 800px) { #photos figure { width: 30% } }
@media (max-width: 630px) { #photos figure { width: 50% } }
figure { margin: 0; padding: 0; width: 20% }
/* ========== delighters ========== */
.delighter.right { transform:translate(-50%); opacity:0; transition: all .25s ease-out; text-align: center }
.delighter.right.started { transform:none; opacity:1 }
.delighter.left { transform:translate(5%); opacity:0; transition: all .25s ease-out; text-align: center }
.delighter.left.started { transform:none; opacity:1 }
.delighter.bottom { transform:translatey(10%); opacity:0; transition: all .50s ease-out }
.delighter.bottom.started { transform:none; opacity:1 }

/*==================================================
～1040
==================================================*/
@media screen and ( max-width:1040px) {
  a[name] { display: block; margin-top:-80px; padding-top:80px }
  /* header */
  div.spHeader { min-width:initial }
  div.spHeader > h1 { margin-top: 80px }
/*～1040 END*/
}
/*==================================================
～670
==================================================*/
@media screen and ( max-width:670px ){
  a[name] { display: block; margin-top:-50px; padding-top:50px }
  /* header */
  div.spHeader { min-width:initial; margin-top: 0 }
  div.spHeader > h1 { background-image:url(../image/mainView_sp.jpg); height: 100vw; margin-top: 50px }
/*～670 END*/
}

/*==================================================
FONT
==================================================*/




/*==================================================
余白
==================================================*/
.mg1e   { margin:        min(4vw,1em)!important }
.mgT05e { margin-top:    min(3.5vw,0.5em)!important }
.mgT1e  { margin-top:    min(4vw,1em)!important }
.mgT2e  { margin-top:    min(5.5vw,2em)!important }
.mgT3e  { margin-top:    min(6vw,3em)!important }
.mgT4e  { margin-top:    min(9vw,4em)!important }
.mgT5e  { margin-top:    min(10vw,5em)!important }
.mgB05e { margin-bottom: min(3.5vw,0.5em)!important }
.mgB1e  { margin-bottom: min(4vw,1em)!important }
.mgB15e { margin-bottom: min(5vw,1.5em)!important }
.mgB2e  { margin-bottom: min(5.5vw,2em)!important }
.mgB25e { margin-bottom: min(4.5vw,2.5em)!important }
.mgB3e  { margin-bottom: min(6vw,3em)!important }
.mgB5e  { margin-bottom: min(10vw,5em)!important }
.pd1e   { padding:       min(4vw,1em)!important }
.pd15e   { padding:      min(5vw,1.5em)!important }
.pd2e   { padding:       min(5.5vw,2em)!important }
.pd025e { padding:       min(1vw,0.25em)!important }
.pd05e  { padding:       min(3.5vw,0.5em)!important }
.pdT05e { padding-top:   min(3.5vw,0.5em)!important }
.pdT2e  { padding-top:   min(5.5vw,2em)!important }
.pdB05e { padding-bottom:min(3.5vw,0.5em)!important }
.pdB3e  { padding-bottom:min(6vw,3em)!important }