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

:root {
  --JrNaviBg:#0065A6;
  --JrNavy:#011C31;
  --JrBgGd:linear-gradient(#dabc60, #e5d29c);
  --JrBgNv:radial-gradient(#3082ba, #2974a8 70%, #073254);
  --JrColGd:#EAD9A1;
}
main { font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: var(--size26) }
aside { background-color: var(--JrNaviBg) }
aside.pcNavi { display: flex }
.navHeader { background-color: var(--JrNaviBg) }
.navList { margin: 0 5vw; text-align: unset; font-size: var(--size22); font-family: "Noto Serif JP", serif; font-weight: 900 }
.navList li a,
section#about .inner:last-of-type ul li a { display: flex; align-items: center; text-decoration: none }
.navList li a::before,
section#about .inner:last-of-type ul li a::before { content: ""; min-width: 35px; height: 35px; background-size: 100% auto; background-repeat: no-repeat; margin-right: 0.5rem }
.navList li:nth-of-type(1) a::before,
section#about .inner:last-of-type ul li:nth-of-type(1) a::before { background-image: url(../image/2027/junior/navi1.svg) }
.navList li:nth-of-type(2) a::before,
section#about .inner:last-of-type ul li:nth-of-type(2) a::before { background-image: url(../image/2027/junior/navi2.svg) }
.navList li:nth-of-type(3) a::before,
section#about .inner:last-of-type ul li:nth-of-type(3) a::before { background-image: url(../image/2027/junior/navi3.svg) }
aside.pcNavi .navList { margin: 0 }
.footWrap { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center }
nav.navCont { top: min(12.5vw,100px); padding-top: 1rem; margin-top: 0; background-color: var(--JrNaviBg) }

/* contents */
.inner { width: min(90vw,750px); box-sizing: border-box; margin: auto }
a[name] { margin-top: 0; padding-top: 0 }
.textGd,.textBoGd { color: var(--JrColGd) }
*[class^="textBo"] { font-weight: bold }
.btn { font-family: "Noto Serif JP", serif }

/* about */
section#about { background-color: var(--JrNavy); padding: 0 }
section#about .inner { background-color: #FFF; margin-top: -40px; padding: 3.5rem 1rem 1rem; width: auto }
section#about .inner:last-of-type { background-image: var(--JrBgGd); margin-top: 0; padding: 2rem min(2.5vw,1rem) }
section#about .inner:last-of-type ul { font-size: var(--size40); font-family: "Noto Serif JP", serif; font-weight: 900; text-align: center }
section#about .inner:last-of-type ul li { border-bottom: #FFF dotted 4px; padding: min(2.5vw,1rem) 0; display: inline-flex }
section#about .inner:last-of-type ul li:last-of-type { border-bottom: none }
section#about .inner:last-of-type ul li a { justify-content: center; color: #000 }
section#about .inner:last-of-type ul li a::before { width: var(--size70); height: var(--size70) }

/* 1限定グッズがもらえる！ */
section#goods { background-image: var(--JrBgNv); padding:min(5vw,3rem) 0; color: #FFF }
#sliderWrap img { width:min(60vw,500px) }
.slick-dots li button:before { background-color: #FFF; opacity: 1 }
.slick-dots li.slick-active button:before,
.slick-dots li button:hover:before, .slick-dots li button:focus:before { background-color: #6DA5CC }
.slick-list.draggable { margin-bottom: 1rem }
.slick-dots { display: flex; align-items: center; justify-content: center }
.slick-dots li { width: 0.8rem; height: 0.75rem }
.slick-dots li button, .slick-dots li.slick-active button:before, .slick-dots li button:before { height: 0.75rem }
.slick-prev, .slick-next { top: 50% }
.slick-prev { left: 8.5% }
.slick-next { right: 8.5% }
.slick-prev:before { content: "\f137"; opacity: 1; color:var(--Col-Navy) }
.slick-next:before { content: "\f138"; opacity: 1; color:var(--Col-Navy) }

/* 2限定イベントが盛りだくさん */
section#event { background-image: var(--JrBgGd); padding:min(5vw,3rem) 0 }

/* 3家族みんながオトクに！ */
section#otoku { background-image: var(--JrBgNv); padding:min(5vw,3rem) 0; color: #FFF }
section#otoku .inDoc {
  background-color: #FFF;
  border-radius: 20px;
  width: min(94%,650px);
  margin: min(10vw,80px) auto 3rem;
  color: #000;
  padding: 0 min(2.5vw,2rem) 1px
}
section#otoku .inDoc img { margin-top: max(-6vw,-45px) }

@media screen and (max-width: 960px) {
  aside.pcNavi { display: none }
  a[name] { margin-top: -min(12.5vw,100px); padding-top: min(12.5vw,100px) }
}

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