body {
  margin: 0;
  padding: 0;
  background-image: url('../img_ev/2025ippan_background.png');
  background-attachment: fixed;
  background-size: cover;
  background-position: center

}

ul {
  padding-left: 1rem;
}

/* ローディングアニメーション */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
  z-index: 1001;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 要素をふわっと表示 */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

/* ヘッダー */
.header {
  background-color: #000;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header .top-section {
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: end;
}

.header .top-section a {
  color: #fff;
  text-decoration: none;
  margin: .3rem .8rem;
  font-weight: 700;
  font-size: .8rem;
}

.header .top-section a:hover {
  text-decoration: underline;
}

/* メインコンテンツ */
.main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* メインコンテンツ：ヒーローセクション */
.main .hero-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ヒーローセクション：画像エリア */
.hero-section .img-area {
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  justify-content: center;
  padding: 2rem 4rem;
  padding-left: 0;
}

.hero-section .img-area-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}

.hero-section .img-logo {
  width: 75%;
  height: auto;
}

.hero-section .img-date {
  width: 65%;
  height: auto;
  margin-right: 4rem;
}

.hero-section .img-period {
  width: 65%;
  height: auto;
  margin-right: 4rem;
}

/* ヒーローセクション：お知らせエリア */
.hero-section .info-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  margin-bottom: 4rem;
}

.hero-section .info-area {
  width: 80%;
  max-width: 800px;
  padding: 1.5rem 0 2.5rem;
}

.hero-section .info-heading {
  font-size: 1.5rem;
}

.hero-section .info-content {
  display: grid;
  /*  grid-template-columns: 1fr 2fr;  */
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  margin-top: 1.5rem;
  padding-left: 1rem;
}

.hero-section .info-content p {
  margin: .5rem 0;
}

.hero-section .info-date {
  padding-left: 1rem;
}


.hero-section .box_news{
  width: 100%;
  max-width: 800px;
  height:200px;
  /* padding:20px; */
  /* border:1px solid #999; */
  overflow:auto;
  overflow-y:scroll;
}

.hero-section .box_news dl{
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid #CCC;
  display:flex;
}

.hero-section .box_news dt{
  width:4.0em;
}

.hero-section .box_news dd{
  width:calc(100% - 4.0em);
}


/* メインセクション */
.main-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  margin-bottom: 4rem;
}

.section {
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin: 2rem 0 4rem;
}

.main-section .tag-area {
  display: flex;
}

.reservation-necessary {
  width: fit-content;
  background-color: red;
  padding: 0.5rem 1rem;
  color: #fff;
  font-weight: 700;
}

.reservation-not-necessary {
  width: fit-content;
  background-color: blue;
  padding: 0.5rem 1rem;
  color: #fff;
  font-weight: 700;
}

.category {
  width: fit-content;
  background-color: #000;
  padding: 0.5rem 1rem;
  color: #fff;
  font-weight: 700;
  margin-left: 1rem;
}

.main-section-subheading {
  margin: 0 0 0 .15rem;
  font-size: .9rem;
}

.main-section-heading {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.main-section-overview {
  margin-top: .5rem;
}

.main-section .note-area {
  font-size: .8rem;
  margin: 1.5rem 0 0 1rem;
  display: flex;
  flex-direction: column;
}

.main-section-note span {
  color: red;
  font-weight: 700;
}

.main-section-schedule span {
  font-size: .8rem;
  font-weight: 700;
}

.main-section-reservation {
  font-size: .9rem;
  margin-top: 1.5rem;
}

.main-section-reservation a {
  color: red;
  text-decoration: none;
  font-weight: 700;
}

.main-section-reservation a:hover {
  text-decoration: underline;
}

.main-section-warning {
  font-size: .8rem;
  margin-top: 1rem;
  border: 1px solid #000;
  padding: 1rem;
}

.main-section-warning p {
  margin: .5rem 0 .5rem 1rem;
}

.main-section-warning .title {
  font-weight: 700;
  background-color: yellow;
  width: fit-content;
  padding: .2rem .5rem;
  margin: 0;
}

.main-section-warning span {
  text-decoration: underline;
}

/* メインセクション：画像エリア */
.main-section .img-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 0;
}

.main-section .side {
  flex-direction: row;
  gap: 1rem;
}

.main-section .img-area img {
  width: 100%;
  height: auto;
}

.main-section .side img {
  width: 50%;
  height: auto;
}

/* 注意エリア */
.sub-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
}

.sub-section .section-content {
  max-width: 1000px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.sub-section .attention-area {
  max-width: 1000px;
  margin: 2rem 0 3rem;
}

.attention-area ul {
  margin: 0 0 2rem 1rem
}

.attention-area li {
  font-size: .8rem;
}

.attention-area .inquiry {
  font-size: .9rem;
}

/* エンドセクション */
#end-section {
  margin: 3rem 0 3rem;
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000,
    -1px 1px 0 #000, 1px -1px 0 #000,
    0px 1px 0 #000, 0-1px 0 #000,
    -1px 0 0 #000, 1px 0 0 #000;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#end-section.show {
  opacity: 1;
  transform: translateY(0);
}

/***追従するトップへ戻るボタン***/
#page-top {
    position: fixed;
    right: 5px;
    bottom: 20px;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    transform: rotate(90deg);
    font-size: 90%;
    line-height: 1.5rem;
    color: #737373;
    padding: 0 0 0 35px;
    border-top: solid 1px;
}
#page-top::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 15px;
    border-top: solid 1px;
    transform: rotate(35deg);
    transform-origin: left top;
}
/***トップへ戻るボタンここまで***


/* スマホサイズ */
@media screen and (max-width: 768px) {
  body {
    background-color: #fff;
    background-repeat: no-repeat;
  }

  .header .top-section {
    max-width: 390px;
    justify-content: center;
  }

  .hero-section .img-area {
    max-width: 390px;
    grid-template-columns: 1fr;
    padding: 0;
  }

  .img-area-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0 1rem;
    width: 100%;
  }

  .hero-section .img-area-right {
    gap: 2rem;
  }

  .hero-section .img-logo {
    width: 55%;
    margin-right: 1rem;
  }

  .hero-section .img-date {
    width: 65%;
    margin: 1rem 0 0;
  }

  .hero-section .img-period {
    width: 65%;
    margin: 0;
  }

  .hero-section .info-wrapper {
    margin: 2.5rem 0 2rem;
  }

  .info-area .info-heading {
    font-size: 1.2rem;
  }

  .info-area .info-content {
    font-size: .8rem;
    margin-top: 1rem;
    padding: 0;
  }

  .hero-section .info-date {
    padding-left: .5rem;
  }

  .main {
    gap: 2rem;
  }

  .main-section {
    margin-bottom: 2rem;
    align-items: unset;
  }

  .main-section .section-right {
    display: none;
  }

  .section4 .section-right {
    display: block;
  }

  .section {
    max-width: 390px;
    grid-template-columns: 1fr;
    margin: 2rem 1.5rem 2.5rem;
    gap: 2rem;
  }

  .section img {
    display: none;
  }

  .reservation-necessary,
  .category,
  .reservation-not-necessary {
    font-size: .8rem;
    align-self: center;
  }

  .main-section-subheading {
    font-size: .8rem;
    margin: 0;
  }

  .main-section-heading {
    font-size: 1.7rem;
  }

  .main-section .note-area {
    margin: 0;
  }

  .main-section-warning p {
    margin-left: .5rem;
  }

  .sub-section .attention-area {
    max-width: 390px;
    margin: 2rem 1.5rem 2.5rem;
  }

  ul {
    margin-left: .5rem;
  }

  .attention-area ul {
    margin-left: .5rem;
  }

  .attention-area .inquiry {
    margin-top: 3rem;
  }

  #end-section {
    margin: 3rem 0 8rem;
    font-size: 1.2rem;
  }
}


.container{
    margin: 2rem 0 2rem;
    display: flex;
    justify-content: space-between;
}
.container-item{
    width: 30%;
}
.container-item-img{
    border: 1px solid #ccc;
}
.container-item-img img{
    display: block;
    height: 150px;
    object-fit: cover;
    object-position: 50% 0;/*中央上*/
    width: 100%;
}