@import url("/js/slick/slick.css");
@import url("/js/slick/slick-theme.css");
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Serif+JP:wght@200..900&display=swap');

:root {
  --textCol-navy:#1f255c;
  --Col-blue:#0056d3;
  --Col-lightBlue:#00aaee;
  --Col-yellow:#fff000;
}
html { scroll-behavior: smooth }
aside { background: linear-gradient(180deg,rgba(19, 75, 165, 1) 0%, rgba(79, 113, 198, 1) 10%, rgba(220, 195, 224, 1) 35%, rgba(244, 219, 212, 1) 50%, rgba(220, 195, 224, 1) 65%, rgba(79, 113, 198, 1) 90%, rgba(19, 75, 165, 1) 100%) }
main {
  overflow: hidden;
  background-color: #222;
  font-size: min(6vw,30px);
  line-height: 1.4;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-style: normal;
  color: var(--textCol-navy);
  position: relative;
}
section { position: relative }
a[name] { margin-top: -33px; padding-top: 33px }
.textY,.textBoY { color: var(--Col-yellow) }

/*ボタン*/
a.btn { display: inline-block; font-size: min(5vw,26px); padding: 0.3rem 0; border-radius: 50px; text-decoration: none; width: min(80vw,380px) }
a.btn.blue { background-color: var(--Col-blue); color: #FFF }
a.btn.navy { background-color: var(--textCol-navy); color: #FFF }
a.btn.lightBlue { background-color: var(--Col-lightBlue); color: #FFF }

/* TITLE */
h2 {
  padding: 0.8rem 0 0;
  font-size: min(10vw,60px);
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
}
h2::before {
  display: block;
  content: "";
  width: 100%;
  height: 33px;
  background-repeat: no-repeat;
  background-size: min(130vw,690px) auto;
  background-position: center;
}
h3 {
  text-align: center;
  line-height: 1.4;
  font-size: min(6.8vw,40px);
  margin-bottom: min(5vw,2rem);
}
/* CONTENTS */
#eventWrap {
  background-image: url(./image/eventBg1.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
#presentWrap {
  background-color: #068dea;
  background-image: url(./image/presentBg1.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
#goodsWrap {
  background-color: #4a86ce;
  padding-bottom: 1px;
}
/* イベント */
#eventWrap h2::before {
  background-image: url(./image/eventEn.webp);
  margin-top:min(23vw,120px)
}
#eventWrap .contWrap {
  padding: 1rem;
  background-color: #efb3c7;
  background-image: url(./image/eventBg3.webp),url(./image/eventBg2.webp);
  background-position: center bottom,center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding-bottom: 200px;
}
#eventWrap .contWrap > .date { position: relative; z-index: 3; text-align: left; padding: 0 }
#eventWrap .contWrap > .date > img { max-width:30vw }
#eventWrap .contWrap > .inner { background-color: rgba(255,255,255, 0.7); border-radius: 0 70px 0 0; padding: 3rem 1.5rem 1.5rem; position: relative; z-index: 2; margin-top: max(-7vw,-42px) }
/* プレゼント */
#presentWrap h2 { color: #FFF }
#presentWrap h2::before { background-image: url(./image/presentEn.webp) }
#presentWrap .contWrap {
  padding: 0 1rem 1rem;
  background-image: url(./image/presentBg2.webp);
  background-position: center bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding-bottom: 200px;
}
#presentWrap .contWrap > .date { position: relative; z-index: 3; text-align: left; padding: 0; margin-bottom: 1rem }
#presentWrap .contWrap > .date > img { max-width:30vw }
#presentWrap h3 { color: var(--Col-yellow) }
/* 新着情報 */
#newsWrap h2 { color: #FFF }
#newsWrap h2::before { background-image: url(./image/newsEn.webp); margin-top: 50px }
#newsWrap ul { padding: 0 1rem 100px }
#newsWrap ul li { border-bottom: #2c518c 2px 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;
}

/*==================================================
FONT
==================================================*/
  *[class^="font"] { font-style: normal }/*fontで始まる*/
/*
.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.noto-serif-jp-<uniquifier> {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/

/*
==================================================
～960
==================================================
*/
@media screen and ( max-width:960px) {
  a[name] { margin-top: -20.5vw; padding-top: 20.5vw }
  #eventWrap .contWrap { background-position: center bottom,center top -40px }
}
/*
==================================================
～670
==================================================
*/
@media screen and ( max-width:670px ){
}