@import url("/js/slick/slick.css");
@import url("/js/slick/slick-theme.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

:root {
  --Col-navy:#000034;
  --Col-BLK210:#210019;
  --Col-blue:#0041aa;
  --Col-Rblue:#00e7ff;
  --Col-Red:#e51d25;
}
html { scroll-behavior: smooth }
.column { grid-template-columns:1fr minmax(600px,750px) 1fr }

aside { background-repeat: no-repeat; background-size: cover; padding: 0; align-items: baseline }
aside.pcLeft { background-image: url(./image/naviBgL.webp); background-position: left bottom }
aside.pcLeft a.draLogo { width: min(10vw,100px); left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%) }
aside.pcLeft .logoWrap { background: url(./image/logoBg.webp); background-position: center center; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center }
aside.pcNavi { background-image: url(./image/naviBgR.webp); background-position: right bottom }
main {
  overflow: hidden;
  background-color: #FFF;
  font-size: min(4vw,18px);
  line-height: 1.6;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-style: normal;
  color: #FFF;
  position: relative
}
section { position: relative; box-sizing: border-box; padding: min(3vw,100px) min(3vw,100px) }
a[name] { margin-top: -33px; padding-top: 33px }
.full-image > img { display: inline-block; margin-left: auto; margin-right: auto }
ul.textKome li:before { color: #FFF }
.textRe,.textBoRe { color: var(--Col-Red) }
.textBu,.textBoBu { color: var(--Col-blue) }

/*ボタン*/

/* TITLE */
h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #FFF;
  font-family: "classico-urw", sans-serif;
  font-weight: 500;
  font-size: min(11vw,60px);
  line-height: 1.2
}
h2 > div { display: inline-block; width: auto; padding:0 1rem 0.5rem; background-color: #000 }
h2 > div:last-of-type { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: min(4vw,20px) }

/* CONTENTS */
.inner { box-sizing: border-box }
section > .inner { padding: 0 min(4vw,100px) }

/* 日程＆前文 */
#aboutWrap { background-image: url(./image/aboutBg.webp); background-size: cover; padding-bottom: 140px }/*マイナス背景分program*/
#aboutWrap .doc { background-color: rgba(255,255,255,.1); padding: 1.8rem; }

/* プログラム */
#programWrap {
  background-image: url(./image/programBgImg.webp),url(./image/programHeadBg.webp),url(./image/programBg.webp);
  background-size: 150% auto,100% auto,cover;
  background-position: top min(3vw,20px) center,top 0 center,top min(8vw,60px) center;
  background-repeat: no-repeat;
  padding-left: 0;
  padding-right: 0;
  margin-top: -100px;
  padding-bottom: 140px;
}
#programWrap h2 { margin-top: 40px }
#programWrap .inner { background-repeat: no-repeat; background-size: min(50%,250px) auto; padding-top:min(70px); margin-top:max(-70px) }
#programWrap h3 { text-align: center }
#programWrap .inner:nth-of-type(1),
#programWrap .inner:nth-of-type(3) { background-image: url(./image/programT1Bg.webp); background-position:top -4px right 22% }
#programWrap .inner:nth-of-type(2) { background-image: url(./image/programT2Bg.webp); background-position:top -12% left 32%  }
#programWrap .inner:nth-of-type(3) { background-position:top 14px right 12% }
#programWrap .inner .name { font-size: min(5vw,24px); line-height: 1.2; margin-bottom: 2rem }
#programWrap .inner .name img { margin-bottom: 0.3rem }
#programWrap .inner:nth-of-type(2) .name { margin-top:-10px }
#programWrap h4 { font-family: "classico-urw", sans-serif; font-weight: 700; font-size: min(5vw,25px); text-align: center; background-color: var(--Col-navy); margin-bottom: 1rem }

/* チケット */
#ticketWrap {
  background-image: url(./image/ticketBgImg.webp),url(./image/ticketHeadBg.webp),url(./image/ticketBg.webp);
  background-size: 130% auto,100% auto,cover;
  background-position: top center,top 0 center,top min(14vw,105px) center;
  background-repeat: no-repeat;
  padding-left: 0;
  padding-right: 0;
  margin-top: -100px;
}
#ticketWrap h2 { align-items: end; margin-top: 60px }
#ticketWrap > .inner { padding: 0 min(1vw,18px) 1rem }
#ticketWrap > .inner:last-of-type { padding: 1rem min(5vw,3rem); color: var(--Col-navy) }
#ticketWrap .doc1 {
  background-image: url(./image/ticketDoc1BgT.webp),url(./image/ticketDoc1BgB.webp),url(./image/ticketDoc1Bg.webp);
  background-position: top,bottom,top;
  background-repeat: no-repeat,no-repeat,repeat-y;
  background-size: 92% auto,100% auto,94.5% auto;
  box-sizing: border-box;
  padding:min(6vw,50px) min(10.5vw,70px) min(12vw,80px);
  color: var(--Col-BLK210)
}
#ticketWrap .line { border-bottom: 3px solid var(--Col-BLK210); padding-bottom: 8px; margin-bottom: 0.6rem }
#ticketWrap .doc1 ul:not(.textKome) li { border-bottom: var(--Col-BLK210) 2px solid; padding: 0.5rem 0.5rem 0.5rem 0.2rem }
#ticketWrap .doc1 ul:not(.textKome) li a { color: var(--Col-BLK210); text-decoration: none; display: flex; align-items: center; line-height: 1.4 }
#ticketWrap .doc1 ul:not(.textKome) li a::before { content: "　　"; width: 30px; height: 30px; background-image: url(./image/ticketDoc1Icon1.webp); margin-right: 8px }
#ticketWrap .doc1 ul:not(.textKome) li.blue a::before { background-image: url(./image/ticketDoc1Icon2.webp) }
#ticketWrap .doc1 ul:not(.textKome) li a::after  { font-family: "Font Awesome 6 Free"; content: "\f04b"; font-weight: 900; font-size: 80%; margin-left: auto }
#ticketWrap .doc1 ul.textKome li:before { color: inherit }
#ticketWrap .doc2 {
  background-color: rgba(255,255,255,0.65);
  padding:min(4vw,1.5rem);
  box-shadow: 5px 5px 10px rgba(0,0,52,0.1);
  margin-bottom: 2rem;
}
#ticketWrap .doc2 table { width: 100% }
#ticketWrap .doc2 table td { font-weight: 700; padding:min(1.5vw,0.5rem) min(1vw,0.3rem); border-bottom: var(--Col-navy) 2px dotted; line-height: 1.3; text-align: left }
#ticketWrap .doc2 table td:first-of-type { width:min(18vw,100px); vertical-align: top }

/* プレゼント */
#presentWrap {
  padding: 0;
  background-image: url(./image/presentBgH.webp),url(./image/presentBgB.webp),url(./image/presentBg.webp);
  background-position: top -10% right -20%,bottom -5% left -15%,center;
  background-repeat: no-repeat;
  background-size: 50% auto,35% auto,cover;
}
#presentWrap h2 { margin-top: 2rem }

/* 協賛 */
#sponsorWrap { padding-left: 0; padding-right: 0 }
/* 新着情報 */
#newsWrap { background-image: url(./image/newsBg.webp); background-size: cover; background-position: top center }
#newsWrap h2 { align-items: center; margin-bottom: 1.5rem }
#newsWrap h2 > div { background-color: var(--Col-navy) }
#newsWrap:after { background: none; height: 0 }
#newsWrap ul { padding: 0 }
#newsWrap ul li { border-bottom: #FFF 1px solid; padding: 1rem 0 }
#newsWrap ul li a { display: flex; color: #FFF; text-decoration: none }
#newsWrap ul li a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  font-weight: 900;
  padding-right: 0.8rem;
  color: var(--Col-Rblue);
}
#newsWrap > div { overflow-y: auto; max-height: 500px; padding-right: 1rem; }
#newsWrap > div::-webkit-scrollbar { width: 12px }
#newsWrap > div::-webkit-scrollbar-thumb { background: var(--Col-Rblue) }
#newsWrap > div::-webkit-scrollbar-track { background: #ddd }


/*==================================================
FONT
==================================================*/
  *[class^="font"] { font-style: normal }/*fontで始まる*/
/*
★Classico URW Medium＆Bold
font-family: "classico-urw", sans-serif;
font-weight: 500;
font-weight: 700;
font-style: normal;

★Noto Serif JP Bold
.noto-serif-jp-<uniquifier> {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
bold：700
*/

/*==================================================
～960
==================================================*/
@media screen and ( max-width:960px) {
  a[name] { margin-top: -20.5vw; padding-top: 20.5vw }
}
/* @media screen and ( max-width:500px) {} */