@charset "utf-8";
/* CSS Document */
#adminBox, .acms-admin-box,
.tss_comprehensiveHead{
  position: relative;
  z-index: 100;
}

img{max-width: 100%;}
a{text-decoration: none;}
.ngf_sectionWrap{
  padding-inline: 16px;
}

/*重要なお知らせ（中止のお知らせ）*/
/* .ngf_noticebox{
  position: relative;
  padding: 24px 0;
  line-height: 1.75;
  color: #666666;
  background-color: rgba(255,255,255,0.96);
  z-index: 99;
}
.ngf_noticebox strong,
.ngf_noticebox b{font-weight: bold;}
.ngf_noticebox a{
  text-decoration: underline;
  color: #006DEC;
} */
.tss_body{
  position: relative;
  height: 100%;
  min-height: 100vh;
  background-color: #8AD6FF;
}
.tss_body::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background-image: url(../img/il_flag.webp);
  background-position: center;
  background-size: auto;
  background-repeat: repeat-x;
}
.ngf_body{
  line-height: 1.5;
  padding-bottom: 116px;
}


/* 背景デコ */
.ngf_bg{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: -48px;
  width: 100%;
  max-width: 1822px;
  max-height: 1112px;
  pointer-events: none;
}
.ngf_bgBlock{
  position: relative;
}
.ngf_bgdeco{
  position: relative;
  left: 50%;
  top: 0;
  max-width: 1822px;
  min-width: 1280px;
  width: 100%;
  transform: translateX(-50%);
}
.ngf_bgdeco picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ngf_decoil{
  position: absolute;
}
.ngf_il1{
  top: 14.76%;
  left: 8.38%;
  width: 5.3%;
  animation: sun 3s steps(1) infinite;
}
.ngf_il2{
  top: 47.5%;
  left: 3.5%;
  width: 12.2%;
  animation: note 5s linear infinite;
}
.ngf_il3{
  bottom: 27.76%;
  left: 2.38%;
  width: 6.2%;
  animation: fish 0.5s steps(1) infinite;
}
.ngf_il4{
  top: 34.13%;
  right: 3%;
  width: 5.42%;
  transform-origin: left center;
  animation: sun 3s steps(1) infinite;
}
.ngf_il5{
  top: 49%;
  right: 14.5%;
  width: 2.5%;
  transform-origin: center -20px;
  animation: leaf 4s linear infinite;
}
.ngf_il6{
  bottom: 26.1%;
  right: 4.5%;
  width: 2.54%;
  transform-origin: center top;
  animation: note 4s linear infinite;
}
.ngf_il7{
  bottom: 0;
  right: 12.5%;
  width: 8.6%;
  animation: fish 0.5s steps(1) infinite;
}
@media screen and (max-width:1348px){
  .ngf_bg{top: 0;}
  .ngf_il1{
    left: calc(50% - 559px);
  }
  .ngf_il2{
    left: calc(50% - 627px);
  }
  .ngf_il3{
    left: calc(50% - 642px);
  }
  .ngf_il4{
    right: calc(50% - 634px);
  }
  .ngf_il5{
    right: calc(50% - 480px);
  }
  .ngf_il6{
    right: calc(50% - 614px);
  }
  .ngf_il7{
    right: calc(50% - 506px);
  }
}
@keyframes note{
  0%{transform: rotate(0);}
  25%{transform: rotate(25deg);}
  50%{transform: rotate(0);}
  75%{transform: rotate(-25deg);}
  100%{transform: rotate(0);}
}
@keyframes leaf{
  0%{transform: rotate(0);}
  18%{transform: rotate(-22deg);}
  24%{transform: rotate(-24.5deg);}
  25%{transform: rotate(-25deg);}
  26%{transform: rotate(-24.5deg);}
  32%{transform: rotate(-22deg);}
  68%{transform: rotate(22deg);}
  74%{transform: rotate(24.5deg);}
  75%{transform: rotate(25deg);}
  76%{transform: rotate(24.5deg);}
  82%{transform: rotate(22deg);}
  100%{transform: rotate(0);}
}
@keyframes sun{
  0%{transform: scale(1);}
  20%{transform: scale(1.2);}
  40%{transform: scale(1);}
  60%{transform: scale(0.9);}
  80%{transform: scale(1.2);}
  100%{transform: scale(1);}
}
@keyframes fish{
  0%{transform: rotateY(0deg);}
  25%{transform: rotateY(-15deg);}
  50%{transform: rotateY(0deg);}
  75%{transform: rotateY(15deg);}
  100%{transform: rotateY(0deg);}
}
@keyframes nuts{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}


.tss_footer{
  align-content: end;
  position: fixed;
  bottom: 0;
  padding: 0;
  background-color: transparent;
  z-index: 999;
}
.tss_footer a{
  display: block;
  margin-bottom: clamp(0.75rem, 0.375rem + 0.75vw, 0.938rem);
  text-shadow: 0px 1px 0px rgba(0, 47, 74, 1);
}
.ngf_bgsea {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(3.5rem, -2rem + 11vw, 6.25rem);
  z-index: 2;
}
.ngf_bgsea img{
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
}
.ngf_bgsea::after{
  content: '';
  position: absolute;
  bottom: clamp(1.75rem, -0.75rem + 5vw, 3rem);
  left: max(32px, calc((100vw - 1720px) / 2));
  width: clamp(5rem, -3.135rem + 30.27vw, 12rem);/*80-192 430-800*/
  aspect-ratio: 192/120;
  background-image: url(../img/il_ship.webp);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.ngf_bgsea img:first-of-type{
  opacity: 1;
  animation: fade1 2s steps(1) infinite;
}
.ngf_bgsea img:last-of-type{
  opacity: 0;
  animation: fade2 2s steps(1) infinite;
}
@keyframes fade1 {
  0%,
  50% {opacity: 1;}
  50.01%,
  100% {opacity: 0;}
}
@keyframes fade2 {
  0%,
  50% {opacity: 0;}
  50.01%,
  100% {opacity: 1;}
}

/* メインビュー */
.ngf_mainSecWrap{
  position: relative;
  width: fit-content;
  margin-inline: auto;
}
.ngf_logo{
  position: relative;
  max-width: 660px;
  margin-inline: auto;
  padding-top: 8px;
}
/* 今年は広島みなと公園でBBQフェス！ */
.ngf_topHeading{
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  z-index: 1;
}
.ngf_topHeading img{animation: sunsmall 1.5s steps(1) infinite;}
@keyframes sunsmall{
  0%{transform: scale(1);}
  50%{transform: scale(1.05);}
  100%{transform: scale(1);}
}
.ngf_topHeading_note{
  position: absolute;
  left: clamp(3.5rem, -5.502rem + 33.5vw, 12rem);/*56-192 430-836*/
  bottom: clamp(-24px,calc(-11px + (-13) * ((100vw - 430px) / 406)),-11px); /* -11 --24 430-836 */;/*-11 --24 430-836*/
  font-size: clamp(0.625rem, -0.1014rem + 2.7027vw, 1.25rem);/*10-20 430-800*/
}
/* 予約受付中！ボタン */
.ngf_ttlBtn{margin-top: clamp(0.75rem, -0.703rem + 5.41vw, 2rem);}
.ngf_ttlBtn a{
  position: relative;
  display: block;
  max-width: 890px;
  margin-inline: auto;
}
.ngf_ttlBtn a::after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(255, 255, 255);
  border-radius: 9999px;
  z-index: 1;
  transition: transform .1s;
}
.ngf_ttlBtn a img{
  position: relative;
  z-index: 2;
  transition: opacity .1s, transform .1s;
}


/* ヒロシのイメージ画像 */
.ngf_phHiroshi.pcblock{
  position: absolute;
  bottom: 124px;
  right: -32px;
  max-width: 288px;
}
.ngf_phHiroshi.spblock{
  display: none;
  max-width: 654px;
  margin-inline: auto;
  margin-bottom: clamp(-68px, calc(-48px + (-20) * ((100vw - 430px) / 552)), -48px);/*-48- -68px 430-982*/
}
.ngf_phHiroshi.spblock img{
  display: block;
  max-width: clamp(8.75rem, 5.342rem + 12.68vw, 13.125rem);/*140-210 430-982*/
  margin-inline: auto;
  margin-inline-end: clamp(1.5rem, 0.332rem + 4.35vw, 3rem);/*24-48 430-982*/
}


/* 西村コメント */
.ngf_nishimuraMsgSec{
  position: relative;
  margin-top: clamp(0.5rem, -0.279rem + 2.9vw, 1.5rem);/*8-24 430-982*/
  padding-inline: 8px;
}
.ngf_nishimuraImg{
  position: relative;
  max-width: 654px;
  margin-inline: auto;
}
.ngf_nishimuraMsgTtl{
  max-width: 472px;
  width: 71.87%;
  margin-inline: auto;
  margin-top: clamp(1.5rem, -0.243rem + 6.49vw, 3rem);/*24-48 430-800*/
}


/* 画像スライダー */
.ngf_slideSec{margin-top: clamp(1rem, -0.743rem + 6.49vw, 2.5rem);}/*16-48 430-800*/
.ngf_slideBlock{
  padding-block: 8px;
  background-color: #FFFFFF;
}
.ngf_slideItem{
  max-width: 400px;
  aspect-ratio: 16/9;
}
.ngf_slideItem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* オレンジの枠線 */
.ngf_orangeContents{
  position: relative;
  max-width: 1080px;
  margin: 0px auto 32px;
  background-color: rgb(255, 255, 255);
  border: 10px solid #0092E5;
}
.ngf_orangeContents::before {
  content: "";
  display: block;
  height: 80px;
  background: url(../img/il_flag.svg) center top no-repeat rgb(255, 246, 207);
}
.ngf_orangeContents h2 {
  position: relative;
  bottom: 45px;
  text-align: center;
}
.ngf_orangeContents h2::after {
  content: "";
  display: block;
  width: 80px;
  margin: 12px auto 0;
  border-top: 2px solid #F08A1C;
}
.ngf_sectioncontainer {
  margin-top: clamp(-2rem, -4.324rem + 8.65vw, 0rem);/*-32-0 430-800*/
  padding: 0 16px 24px;
}

/* ABOUT */
.ngf_aboutSec{margin-top: 48px;}
.ngf_detail {
  display: flex;
  flex-wrap: wrap;
  max-width: 860px;
  margin: 0 auto 32px;
  border-bottom: 1px solid #C6C6C6;
}
.ngf_detail > dt:first-child,
.ngf_detail > dd:first-of-type{border-top: unset;}
.ngf_detail > dt {
  flex: 0 0 25%;
  padding-top: 24px;
  padding-bottom: 24px;
  font-weight: bold;
  font-size: clamp(0.875rem, 0.73rem + 0.54vw, 1rem);
  color: #0E6EB8;
  border-top: 1px solid #C6C6C6;
}
.ngf_detail > dd {
  flex: 1 1 calc(100% - 25%);
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: clamp(0.875rem, 0.73rem + 0.54vw, 1rem);
  border-top: 1px solid #C6C6C6;
}
.ngf_schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}
.ngf_schedule dt {
  width: 180px;
  text-align: right;
}
.ngf_schedule dd {width: calc(100% - 196px);}
.ngf_detail > dd ul li {
  padding-left: 1em;
  text-indent: -1em;
}
.ngf_detail > dd ul li:nth-last-of-type(n+2) {margin-bottom: 0.75em;}
.ngf_eventpdf{text-align: center;}
.ngf_eventpdf a{
  display: inline-block;
  padding: 8px 32px;
  text-decoration: none;
  font-weight: bold;
  color: #E21F13;
  border: solid 2px #E21F13;
  border-radius: 100vw;
  background-color: #FFF6CF;
  transition: background-color .1s;
}

/* ACCESS */
.ngf_map{
  max-width: 1000px;
  margin: auto;
}
.ngf_map div {
  height: 500px;
  margin-bottom: 24px;
}
.ngf_map div iframe {
  width: 100%;
  height: 100%;
}
.ngf_map p {font-size: clamp(0.875rem, 0.73rem + 0.54vw, 1rem);}


/* HPボタン */
.ngf_hpBtn{
  margin-top: clamp(4rem, 0.514rem + 12.97vw, 7rem);/*64-112 430-800*/
  margin-bottom: clamp(3.5rem, 1.176rem + 8.65vw, 5.5rem);/*56-88 430-800*/
}
.ngf_hpBtn a{
  display: block;
  max-width: 370px;
  margin-inline: auto;
  transition: opacity .1s;
}


/* 主催 協賛 協力 */
.ngf_sponsorSec{position: relative;}
.ngf_sponsor dt {
  margin-bottom: 24px;
  text-align: center;
}
.ngf_sponsor dd {margin-bottom: 40px;}
.ngf_sponsor dd ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 1%;
  max-width: 1000px;
  margin: auto;
}
.ngf_sponsor dd ul.ngf_few {justify-content: center;}
.ngf_sponsor ul li {
  width: 19.2%;
  background-color: #FFFFFF;
}
.ngf_sponsor ul li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.tss_gotop{right:10%;}




@media screen and (min-width:801px){
  /* 予約受付中！ボタン */
  .ngf_ttlBtn a:hover img{opacity: 0.5; transform: translateY(4px);}
  .ngf_ttlBtn a:hover::after{transform: translateY(4px);}
  /* HPボタン */
  .ngf_hpBtn a:hover{opacity: 0.5;}
  /* ABOUT */
  .ngf_eventpdf a:hover{background-color: #FFDCAF;}

}



@media screen and (max-width:982px){
  /* 西村コメント */
  .ngf_phHiroshi.pcblock{display: none;}
  .ngf_phHiroshi.spblock{display: block;}
}



@media screen and (max-width:800px){
  .ngf_body{padding-bottom: calc(17.5vw + 120px);}
  .ngf_decoil{display: none;}
  .ngf_bgsea img{object-fit: contain;}
  .ngf_bgsea {bottom: clamp(4rem, 0.14rem + 16.47vw, 8.375rem);/*64-134 375-800*/}

  .ngf_logo{padding-top: max(10vw, 40px);}
}



@media screen and (max-width:640px){
  /* ABOUT */
  .ngf_detail > dt,
  .ngf_detail > dd{
    flex: unset;
    width: 100%;
  }
  .ngf_detail > dt {
    padding-top: 12px;
    padding-bottom: 8px;
  }
  .ngf_detail > dd {
    padding-top: 0;
    padding-bottom: 12px;
    border-top: none;
  }

  /* 主催 協賛 協力 */
  .ngf_sponsor ul li {width: 49%;}
}


@media screen and (max-width: 430px) {
  .ngf_schedule dt {
    width: 144px;
  }
  .ngf_schedule dd {
    width: calc(100% - 160px);
  }
}