@import url("/js/slick/slick.css");
@import url("/js/slick/slick-theme.css");
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Doto:wght@100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
  --spCol-blue:#0038ff;
  --spCol-yellow:#fff100;
}
html { scroll-behavior: smooth }
body { background-image: url(./image/naviBg.webp); background-repeat: no-repeat; background-size: cover; background-attachment: fixed }
aside { background: none; padding: 0 }
aside.pcLeft a.draLogo { width: min(10vw,100px); left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%) }
aside.pcLeft a.cLogo > img { width:min(50%,300px) }
aside.pcLeft .logoWrap { background: url(./image/logoBg.webp); background-position: center center; width: 100%; height: min(100%,816px); display: flex; align-items: center; justify-content: center }
aside.pcLeft .logoWrap { height: auto; align-self: flex-end; padding-bottom: 2rem }
aside.pcNavi { background: none }
main {
  overflow: hidden;
  background-color: #FFF;
  font-size: min(4.8vw,24px);
  line-height: 1.6;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #000;
  position: relative;
}
section { position: relative; box-sizing: border-box; padding: min(3vw,3rem) min(3vw,3rem) min(3vw,3rem) 0 }
a[name] { margin-top: -33px; padding-top: 33px }

/*ボタン*/
.btn {
  padding:0.5rem 0;
  font-size: min(4.5vw,28px);
  text-decoration: none !important;
  font-family: "DotGothic16", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(50vw,350px);
  box-sizing: border-box;
  position: relative;
  margin:0 auto min(3vw,20px);
}
.btn.mgTm20 { margin: -20px auto min(11vw,80px) }
.btn::before { content: ""; width: 10px; height: 10px; background-repeat: no-repeat; margin-right: 0.3rem }
.btn.btnBl {
  border: 2px solid #fff;
  background: #000;
  box-shadow: min(1vw,5px) min(1vw,5px) 0 0 #fff;
  color: #FFF !important;
}
.btnBl::before { content: ""; width: 10px; height: 10px; background-image: url(./image/btnIconY.svg); background-repeat: no-repeat; margin-right: 0.3rem }
.btn.btnBu {
  border: 2px solid var(--spCol-blue);
  background: #fff;
  box-shadow: min(1vw,5px) min(1vw,5px) 0 0 var(--spCol-blue);
  color: var(--spCol-blue) !important;
}
.btnBu::before { content: ""; width: 10px; height: 10px; background-image: url(./image/btnIconB.svg); background-repeat: no-repeat; margin-right: 0.3rem }

/* TITLE */
h2 { font-family: "ab-quadra", sans-serif; font-size: min(10vw,60px); text-align: center }

/* CONTENTS */
.inner { width:calc(100% - min(3vw,3rem)); margin-left:min(3vw,3rem); padding: min(3vw,3rem); box-sizing: border-box }
img[src*="Title.webp"] { margin-bottom: min(2vw,1rem) }

/* スケジュール */
#scheduleWrap { background-color: var(--spCol-yellow) }
#scheduleWrap .inner {
  background-color: var(--spCol-blue);
  background-image: url(./image/scheduleBgIcon.webp),url(./image/scheduleBgIcon2.webp);
  background-position: left -1px top -1px,right -1px bottom -1px;
  background-repeat: no-repeat;
  background-size: min(13vw,100px);
  padding-top: min(9vw,5rem);
  padding-bottom: min(9vw,5rem);
  margin-bottom: min(3vw,3rem);
}
#scheduleWrap .inner img { width: auto; max-width: 100% }

/* プレゼント */
#presentWrap { background-color: #000 }

/* イベント */
#eventWrap {
  background-image: url(./image/eventBg.webp);
  background-size: 100% auto;
  background-repeat: repeat-y;
}
#eventWrap .inner { background-color: #FFF; margin-top: -10%; padding-top: 11% }
#eventWrap h3 { color: var(--spCol-blue); font-weight: 900; font-size: min(5.5vw,40px); text-align: center; margin-bottom: min(5vw,1.8rem) }
#eventWrap h3 span { color: #000; font-size: 75%; display: inline-block; background-color: var(--spCol-yellow); padding: 0.2rem 2rem; border-radius: 50px }

/* チケット */
#ticketWrap { background-color: #000; color: #fff }
#ticketWrap h3 { color: var(--spCol-yellow); font-weight: 900; font-size: min(5.5vw,40px); text-align: center; margin-bottom: min(5vw,1.8rem) }

/* グルメ */
#gourmetWrap { background-color: var(--spCol-blue) }
#gourmetWrap .inner { background-color: #FFF }

/* グッズ */
#goodsWrap { background-color: var(--spCol-yellow) }

/* 新着情報 */
#newsWrap ul { padding: 1rem 0 2rem }
#newsWrap ul li { border-bottom: #B4B4B5 2px solid; padding: 1rem 0 }
#newsWrap ul li a { display: flex; color: #000; 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(--spCol-blue);
}

/*==================================================
FONT
==================================================*/
  *[class^="font"] { font-style: normal }/*fontで始まる*/
/*
Doto Bold 700
Noto Sans JP Regular 400
Noto Sans JP Bold 700
Noto Sans JP Black 900
ドットゴシック16 Regular

100-900
.doto-<uniquifier> {
  font-family: "Doto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "ROND" 0;
}

100-900
.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

Ethnocentric Bold
font-family: "ethnocentric", sans-serif;
font-weight: 700;
font-style: normal;
*/

/*==================================================
～960
==================================================*/
@media screen and ( max-width:960px) {
  a[name] { margin-top: -20.5vw; padding-top: 20.5vw }
}
