@import url("/js/slick/slick.css");
@import url("/js/slick/slick-theme.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Unlock&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root {
  --Col-blue:#003e76;
  --Col-red:#d1314c;
  --Col-yellow:#a98c00;
  --Col-gray:#CCC;
  --Col-black:#000;
}
html { scroll-behavior: smooth }
aside { background: transparent; 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 .logoWrap { width: 100%; height: min(100%,816px); display: flex; align-items: center; justify-content: center }
main {
  overflow: hidden;
  background: url(./image/bgBlue.webp) no-repeat;
  background-size: cover;
  font-size: min(4vw,23px);
  line-height: 1.4;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #FFF;
  position: relative;
}
section { position: relative; box-sizing: border-box; padding-bottom: min(15vw,100px) }
a[name] { margin-top: -90px; padding-top: 35px; z-index: 10; position: relative }
a[name] > img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(180vw,1249px) }
.full-image > img { display: block; margin-left: auto; margin-right: auto }

/*ボタン*/
.btn { display: flex; justify-content: center; margin: auto; font-size: min(4.3vw,26px); font-weight: 700; line-height: 1.2; padding: min(2vw,0.8rem) 0; border-radius: 50px; text-decoration: none; width: min(70%,380px); position: relative; text-decoration: none!important }
.btn:after { font-family: 'Material Icons'; content: "\e941"; border-radius: 50%; width: min(6.5vw,40px); height: min(6.5vw,40px); display: flex; justify-content: center; align-items: center; position: absolute; right: min(1vw,10px); top: 50%; transform: translateY(-50%) }
a.btn.blue { background-color: var(--Col-blue); color: #FFF; border: #FFF min(0.5vw,2px) solid }
a.btn.blue::after { background-color: var(--Col-red); color: #FFF }
a.btn.black { background-color: var(--Col-black); color: #FFF }
a.btn.black::after { background-color: var(--Col-red); color: #FFF }
a.btn.red { background-color: var(--Col-red); color: #FFF }
a.btn.red::after { background-color: #FFF; color: var(--Col-blue) }
a.btn.icon { display: flex; align-items: center }
a.btn.icon::after { content: ""; width: min(30px); height: min(30px); background: url(./image/btnIcon.webp) no-repeat; display: block; margin-left: 1rem }
.btn.noLink { background-color: #999; color: #FFF }
/* TITLE */
/* CONTENTS */
.inner { width:min(100%,750px); margin: 0 auto; padding: min(5vw,2rem) 1rem; box-sizing: border-box }
img[src*="Title.webp"] { width:min(80%,420px) }

/* スケジュール */
#scheduleWrap { background: url(./image/bgBlack.webp); background-size: cover }

/* プレゼント */
#presentWrap { background-image: url(./image/presentTxBg.webp); background-position: left top 150px; background-repeat: no-repeat; padding-top: 150px }
#presentWrap .inDoc { background-size: 100% auto; background-repeat: no-repeat }
#presentWrap .inDoc:nth-of-type(1) { background-image: url(./image/present0920Bg.webp); padding: 28% 17% 12% }
#presentWrap .inDoc:nth-of-type(2) { background-image: url(./image/present0921Bg.webp); padding: 29% 8% 12% }

/* イベント */
#eventWrap {
  background-image: url(./image/eventTxBg.webp),url(./image/eventBgT.webp),url(./image/eventBgB.webp),url(./image/eventBg.webp);
  background-repeat: no-repeat,no-repeat,no-repeat,repeat-y;
  background-position: left top 150px,top,bottom,center;
  background-size: auto,100% auto,100% auto,auto;
  padding-top: 150px
}
#eventWrap .inDoc { background-size: 100% auto; background-repeat: no-repeat }
#eventWrap .inDoc:nth-of-type(1) { background-image: url(./image/event1Bg.webp); padding: 29% 8% 9% }
#eventWrap .inDoc:nth-of-type(2) { background-image: url(./image/event2Bg.webp); padding: 29% 10% 13% }
#eventWrap .inDoc.display { background-image: url(./image/event3Bg.webp); padding: 26% 10% 9% }
#eventWrap .inDoc.ceremony { background-image: url(./image/event4Bg.webp); padding: 29% 8% 10% }

/* グルメ */
#gourmetWrap {
  background-image: url(./image/gourmetTx1Bg.webp),url(./image/gourmetTx2Bg.webp),url(./image/gourmetBg.webp);
  background-repeat: no-repeat,no-repeat,repeat-y;
  background-position: left top 150px,right bottom 150px,center;
  background-size: auto;
  padding-top: 100px;
  color: #000;
}

/* 新着情報 */
#newsWrap { background: url(./image/newsBg.webp) no-repeat; background-size: cover; padding-top: 15px }
#newsWrap h2 { font-family: "Unlock", serif; color: var(--Col-red); font-size: min(10vw,60px); display: flex; align-items: center }
#newsWrap h2::before { content: ""; background: url(./image/newsIcon.svg); background-repeat: no-repeat; width: 30px; height: 30px; padding-right: 10px }
#newsWrap ul { padding: 0 }
#newsWrap ul li { border-bottom: var(--Col-yellow) 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;
  color: #0052C1;
} */

/*==================================================
FONT
==================================================*/
  *[class^="font"] { font-style: normal }/*fontで始まる*/
/*
Noto Sans JP Medium 500
Noto Sans JP Bold 700
LKGMES+Unlock-Regular

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.unlock-regular {
  font-family: "Unlock", serif;
  font-weight: 400;
  font-style: normal;
}
}
*/

/*==================================================
～960
==================================================*/
@media screen and ( max-width:960px) {
  a[name] { margin-top: -14.5vw; padding-top: 16.5vw }
  #presentWrap { background-position: left -20px top 10px; background-size: auto 35%; padding-top: 10px }
  #eventWrap {
    background-position: left -20px top 10px,top,bottom,center;
    background-size: auto 12%,100% auto,100% auto,auto;
    padding-top: 30px
  }
  #gourmetWrap {
    background-image: url(./image/gourmetTx1Bg.webp),url(./image/gourmetTx2Bg.webp),url(./image/gourmetBg.webp);
    background-repeat: no-repeat,no-repeat,repeat-y;
    background-size: auto 35%,auto 35%,auto;
    background-position: left -45px top 10px,right -45px bottom 10px,center;
    padding-top: 20px;
    padding-bottom: 40px;
  }
  a[name="news"] { padding-top: 8.5vw }
  footer { position: relative }
}

#bkRoop {
  min-height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 0;
  background-image:url("./image/bkRoop.webp");
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-animation: bgscroll 350s linear infinite;
  animation: bgscroll 350s linear infinite;
}
@-webkit-keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 0 -7947px;}
}
@keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 0 -7947px;}
}