@charset "utf-8";

/* Base
---------------------------------------------- */
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: var(--c-base);
  font-family: var(--ff-base);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
}

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}

:where(p),
:where(a),
:where(h2),
:where(h3),
:where(h4),
:where(time) {
  font-family: var(--ff-base);
}

:root {
  --c-font: #333;
  --c-yellow: #f7e461;
  --c-yellow--dark: #efd129;
  --c-brown: #673a1b;
  --c-brown--light: #c39d62;
  --c-white: #fff;
  --c-bg: #eceae0;
  --c-bg--light: rgba(229, 223, 206, 30%);

  --ff-en: "Oswald", sans-serif;
  --ff-base: "Noto Sans JP", serif;
  --ff-noto-serif: "Noto Serif", serif;
}

/* Component
---------------------------------------------- */
.c-inner {
  max-width: 1100px;
  padding: 0 50px;
  margin-inline: auto;
  box-sizing: content-box;
}

@media screen and (max-width: 768px) {
  .c-inner {
    padding: 0 20px;
  }
}

.c-inner.-md {
  max-width: 1000px;
}

.c-inner.-sm {
  max-width: 900px;
}

.c-inner.-xs {
  max-width: 765px;
}

/* 見出し */
.c-heading-container {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1em;
  flex-shrink: 0;
}

@media screen and (max-width: 768px) {
  .c-heading-container {
    gap: 0.5em;
  }
}

@media screen and (max-width: 768px) {
  .c-heading-container {
    margin-left: -10%;
  }
}

.c-heading-container.-center {
  justify-content: center;
  margin-left: -10%;
}

.c-heading-container.-center.-pic-center {
  grid-template-columns: 1fr;
  justify-content: center;
  place-items: center;
  margin-left: 0;
}

.c-heading-container.-no-pic {
  grid-template-columns: auto;
  margin-left: 0;
}

.c-heading__pic {
  max-width: clamp(6.25rem, 4.857rem + 6.19vw, 9.5rem); /* 152-100 */
}

.c-heading__pic.-sp-sm {
  max-width: clamp(3.75rem, 3.214rem + 2.38vw, 5rem); /* 80-60 */
}

.c-heading-container.-center .c-heading-wrap {
  text-align: center;
}

.c-heading-wrap .c-heading {
  margin-top: 8px;
}

.c-heading-en {
  font-family: var(--ff-en);
  font-size: clamp(3rem, 2.357rem + 2.86vw, 4.5rem); /* 72-48 */
  font-weight: 500;
  color: var(--c-brown);
  line-height: 1.2;
}

.c-heading-en .jp {
  font-family: var(--ff-base);
  font-weight: 600;
}

.c-heading-container.-sm .c-heading-en {
  font-size: clamp(2.375rem, 2rem + 1.67vw, 3.25rem); /* 52-38 */
}

.c-heading {
  font-size: clamp(1rem, 0.839rem + 0.71vw, 1.375rem); /* 22-16 */
  font-weight: 700;
  line-height: 1;
}

.c-simple-heading {
  font-size: clamp(1.375rem, 1.214rem + 0.71vw, 1.75rem); /* 28-22 */
  letter-spacing: 0.12em;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-brown);
  text-align: center;
}

.c-simple-heading.-fz-lg {
  font-size: clamp(1.5rem, 1.045rem + 1.94vw, 2.5rem); /* 40-24 */
  letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
  .c-simple-heading {
    letter-spacing: 0.05em;
  }
}

/* テキスト */
.c-txt {
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 2;
  font-weight: 400;
  word-break: break-all;
}

@media screen and (max-width: 768px) {
  .c-txt {
    line-height: 1.8;
  }
}

.c-txt.-fw-medium {
  font-weight: 500;
}

.c-txt.-fz-lg {
  font-size: clamp(1.125rem, 1.071rem + 0.24vw, 1.25rem); /* 20-18 */
}

.c-txt.-lh-sm {
  line-height: 1.6;
}

.c-txt.-lh-xs {
  line-height: 1.2;
}

/* リスト */
.c-list.-col {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.c-list__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.c-list__item::before {
  content: "";
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  width: 10px;
  aspect-ratio: 1;
  background-color: var(--c-brown--light);
  transform: translateY(-2px);
}

.c-list.-col .c-list__item {
  gap: 4px;
}

.c-list.-col .c-list__item::before {
  width: 8px;
}

/* ボタン */
.c-btn {
  margin-top: clamp(1.5rem, 1.339rem + 0.71vw, 1.875rem); /* 30-24 */
  margin-bottom: clamp(2.375rem, 2rem + 1.67vw, 3.25rem); /* 52-38 */
  min-width: 280px;
  width: fit-content;
  margin-inline: auto;
}

.c-btn__link {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: clamp(1rem, 0.946rem + 0.24vw, 1.125rem); /* 18-16 */
  background-color: var(--c-yellow);
  border-radius: calc(1px / 0);
  color: var(--c-brown);
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: opacity 0.2s;
  font-size: clamp(1rem, 0.946rem + 0.24vw, 1.125rem); /* 18-16 */
}

.c-btn.-white .c-btn__link {
  background-color: var(--c-white);
  border-radius: 4px;
}

@media not screen and (max-width: 768px) {
  .c-btn__link {
  }
}

.c-btn__link:hover {
  opacity: 0.8;
}

/* Utility
---------------------------------------------- */
.u-bg-yellow {
  background-color: var(--c-yellow);
  padding: clamp(2.5rem, 0.893rem + 7.14vw, 6.25rem) 0; /* 100-40 */
}

.u-bg-white {
  background-color: var(--c-white);
  border-radius: 10px;
  padding: clamp(2rem, 1.464rem + 2.38vw, 3.25rem) 0 clamp(3.75rem, 2.679rem + 4.76vw, 6.25rem); /* 52-32,100-60 */
}

@media not screen and (max-width: 768px) {
  .u-sp-only {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .u-pc-only {
    display: none;
  }
}

.u-tac {
  text-align: center !important;
}

.u-mt-lg {
  margin-top: clamp(2.5rem, 1.696rem + 3.57vw, 4.375rem); /* 70-40 */
}

.u-mt-md {
  margin-top: clamp(2rem, 1.518rem + 2.14vw, 3.125rem) !important; /* 50-32 */
}

.u-mt-sm {
  margin-top: clamp(0.75rem, 0.429rem + 1.43vw, 1.5rem) !important; /* 24-12 */
}

.u-mt-xs {
  margin-top: clamp(0.5rem, 0.375rem + 0.5vw, 0.75rem) !important; /* 12-8 */
}

.u-link {
  text-decoration: underline;
  color: var(--c-brown);
  text-underline-offset: 4px;
  font-weight: 700;
}

.u-link:hover {
  text-decoration: none;
}

/* Style
---------------------------------------------- */

/* mv */
.mv__pic {
  width: 100%;
}

/* イントロ */
.intro {
  background-image: url(../images/bg_intro.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  padding: clamp(5rem, 4.464rem + 2.38vw, 6.25rem) 0 clamp(3.75rem, 2.679rem + 4.76vw, 6.25rem); /* 100-80,100-60 */
}

@media screen and (max-width: 768px) {
  .intro {
    background-image: url(../images/bg_intro--sp.png);
  }
}

.intro__catch {
  font-size: clamp(1.25rem, 0.929rem + 1.43vw, 2rem); /* 32-20 */
  font-weight: 700;
  text-align: center;
  color: var(--c-brown);
  letter-spacing: 0.12em;
}

.intro__catch em {
  color: var(--c-white);
  position: relative;
  margin: 0 10px;
  font-style: normal;
}

.intro__catch em::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 49%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 108%;
  height: 100%;
  background-color: var(--c-yellow--dark);
  z-index: -1;
}

.intro__txt {
  font-size: clamp(1rem, 0.946rem + 0.24vw, 1.125rem); /* 18-16 */
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 2.4;
  margin-top: clamp(2rem, 1.679rem + 1.43vw, 2.75rem); /* 44-32 */
}

@media screen and (max-width: 768px) {
  .intro__txt {
    line-height: 1.8;
  }
}

/* マップ */

@media not screen and (max-width: 768px) {
  .map-intro {
    text-align: center;
  }
}

.map-iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 5/3;
}

@media screen and (max-width: 768px) {
  .map-iframe {
    aspect-ratio: 1/1;
  }
}

.map-icon {
  display: flex;
  align-items: center;
  gap: 4px 40px;
  margin-top: 12px;
}

@media screen and (max-width: 768px) {
  .map-icon {
    align-items: start;
    flex-direction: column;
  }
}

.map-icon__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media screen and (max-width: 768px) {
  .map-icon__item img {
    max-width: 20px;
  }
}

/* フォトスポット */
.photo {
  background-color: var(--c-bg);
  padding: 60px 0;
}

.photo__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .photo__inner {
    grid-template-columns: 1fr;
  }
}

.photo__intro {
  font-size: clamp(1rem, 0.946rem + 0.24vw, 1.125rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 2;
  margin-top: 32px;
}

@media screen and (max-width: 768px) {
  .photo__intro {
    text-align: left;
    max-width: fit-content;
    margin-inline: auto;
  }
}

.photo__map {
  text-align: center;
}

.photo__note {
  font-size: 16px;
  font-weight: 400;
  margin-top: 4px;
  display: inline-block;
  text-indent: -1em;
  padding-left: 1em;
}

/* フォトスポット一覧 */
.photo-details {
  background-color: var(--c-white);
  padding: clamp(1.5rem, 0.804rem + 3.1vw, 3.125rem) 0; /* 50-24 */
  margin-top: clamp(2.625rem, 2.089rem + 2.38vw, 3.875rem); /* 62-42 */
}

.photo-details-item {
  display: grid;
  grid-template-columns: 34.4% 1fr;
  align-items: center;
  gap: 20px clamp(1.25rem, -0.089rem + 5.95vw, 4.375rem); /* 70-20 */
}

@media screen and (max-width: 768px) {
  .photo-details-item {
    grid-template-columns: 1fr;
  }
}

.photo-details-item__pic img {
  display: block;
  margin-inline: auto;
}

.photo-details-item + .photo-details-item {
  margin-top: 70px;
}

.photo-details-item__heading {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.photo-details-item__heading span {
  margin-left: 0.5em;
}

.photo-details-item__txt {
  margin-top: clamp(0.75rem, 0.429rem + 1.43vw, 1.5rem); /* 24-12 */
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0;
}

@media screen and (max-width: 768px) {
  .photo-details-item__content {
    order: -1;
  }
}

/* 参加のみなさま */
.participants {
  padding: clamp(3.75rem, 2.679rem + 4.76vw, 6.25rem) 0; /* 100-60 */
}

.participants-item:first-of-type {
  margin-top: 44px;
}

.participants-item + .participants-item {
  margin-top: 40px;
}

.participants-item {
  background-color: var(--c-bg--light);
  padding: clamp(1.75rem, 1.295rem + 2.02vw, 2.813rem) 0; /* 45-28 */
}

.participants-item__inner {
  padding: 0 50px;
  max-width: 765px;
  box-sizing: content-box;
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .participants-item__inner {
    padding: 0 20px;
  }
}

.participants-item__heading {
  font-size: clamp(1.25rem, 1.143rem + 0.48vw, 1.5rem); /* 24-20 */
  color: var(--c-brown);
  font-weight: 700;
  margin-bottom: clamp(1.25rem, 1.143rem + 0.48vw, 1.5rem); /* 24-20 */
}

.participants-item__menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 24px;
}

@media screen and (max-width: 768px) {
  .participants-item__menu {
    grid-template-columns: 1fr;
  }
}

/* イベント */
.event-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px 20px;
}

@media screen and (max-width: 850px) {
  .event-intro .c-heading-container {
    margin-left: 0;
  }
}

.event-item {
  margin-top: clamp(2rem, 1.518rem + 2.14vw, 3.125rem); /* 50-32 */
}

.event-item__body {
  margin-top: clamp(2rem, 1.518rem + 2.14vw, 3.125rem); /* 50-32 */
}

.event-item__col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: center;
}

.event__btns {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
}

@media screen and (max-width: 768px) {
  .event__btns {
    flex-direction: column;
  }
}

.event__btns .c-btn {
  margin: 0;
}

/* 2カラム */

@media not screen and (max-width: 1024px) {
  .event__body.-col2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .event__body.-col2 .concert-overview__item {
    grid-template-columns: 1fr;
  }

  .event__body.-col2 .concert-performers-item {
    grid-template-columns: 1fr;
  }

  .event__body.-col2 .concert-performers-item__pic {
    max-width: 200px;
    margin-inline: auto;
  }

  .event__body.-col2 .concert .c-inner {
    padding: 0 20px;
  }
}

@media screen and (max-width: 768px) {
  .event-item__col {
    grid-template-columns: 1fr;
  }
}

.event-note {
  font-size: 16px;
  font-weight: 400;
  margin-top: 4px;
  display: inline-block;
  text-indent: -1em;
  padding-left: 1em;
}

.concert {
  margin-top: clamp(2rem, 1.518rem + 2.14vw, 3.125rem); /* 50-32 */
}

.concert-overview {
  max-width: fit-content;
  margin-inline: auto;
  margin-top: clamp(2rem, 1.196rem + 3.57vw, 3.875rem); /* 62-32 */
}

.concert-overview.-mt-sm {
  margin-top: clamp(2rem, 1.518rem + 2.14vw, 3.125rem); /* 50-32 */
}

.concert-overview__item {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: baseline;
  gap: 10px 18px;
}

@media screen and (max-width: 768px) {
  .concert-overview__item:not(.-sp-col) {
    grid-template-columns: 1fr;
  }
}

.concert-overview__item + .concert-overview__item {
  margin-top: 28px;
}

.concert-overview__heading {
  min-width: 100px;
  font-size: 16px;
  width: fit-content;
  text-align: center;
  background-color: var(--c-brown);
  color: var(--c-white);
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 3px 4px 2px;
}

.concert-overview__data time {
  font-size: clamp(1.25rem, 1.063rem + 0.83vw, 1.688rem); /* 27-20 */
  font-weight: 500;
  display: flex;
  align-items: center;
  transform: translateY(4px);
  line-height: 1;
}

.concert-overview__data time .day-of-week {
  font-size: clamp(1rem, 0.92rem + 0.36vw, 1.188rem); /* 19-16 */
  margin-left: -8px;
  display: block;
  line-height: 1;
}

.concert-overview__data time .time {
  font-size: clamp(1rem, 0.92rem + 0.36vw, 1.188rem); /* 19-16 */
  display: block;
}

/* ギャラリー */
.concert-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media screen and (max-width: 768px) {
  .concert-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

.concert-gallery img {
  width: 100%;
  height: auto;
}

/* 出演者 */
.concert-performers {
  background-color: var(--c-bg--light);
  padding: clamp(1.5rem, 0.804rem + 3.1vw, 3.125rem) 0; /* 50-24 */
  margin-top: clamp(2.625rem, 2.089rem + 2.38vw, 3.875rem); /* 62-42 */
}

.concert-performers-item {
  display: grid;
  grid-template-columns: 34.4% 1fr;
  align-items: center;
  gap: 20px clamp(1.25rem, -0.089rem + 5.95vw, 4.375rem); /* 70-20 */
}

@media screen and (max-width: 768px) {
  .concert-performers-item {
    grid-template-columns: 1fr;
  }
}

.concert-performers-item__pic img {
  display: block;
  margin-inline: auto;
}

.concert-performers-item + .concert-performers-item {
  margin-top: 70px;
}

.concert-performers-item__heading {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.concert-performers-item__txt {
  margin-top: clamp(0.75rem, 0.429rem + 1.43vw, 1.5rem); /* 24-12 */
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0;
}

@media screen and (max-width: 768px) {
  .concert-performers-item__content {
    order: -1;
  }
}

/* フード・ドリンク */
.food {
  margin-top: 50px;
}

.food .c-heading-container.-center {
  margin-left: -13%;
}

.food__intro {
  font-size: clamp(1.125rem, 1.071rem + 0.24vw, 1.25rem); /* 20-18 */
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
  margin-top: clamp(2rem, 1.518rem + 2.14vw, 3.125rem); /* 50-32 */
}

.food-truck {
  margin-top: 40px;
  background-color: var(--c-bg--light);
  padding: 25px 0;
}

.food-truck__inner {
  display: grid;
  grid-template-columns: 1fr 47%;
  gap: 32px 42px;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .food-truck__inner {
    grid-template-columns: 1fr;
  }
}

.food-truck__heading {
  font-size: clamp(1.375rem, 1.214rem + 0.71vw, 1.75rem); /* 28-22 */
  font-weight: 700;
  letter-spacing: 0;
  font-family: var(--ff-en);
  margin-bottom: 20px;
}

.food-truck__pic img {
  display: block;
  margin-inline: auto;
}

/* about */
.about {
  background-image: url(../images/bg_about.png);
  background-size: cover;
  background-position: center;
  padding: clamp(3.75rem, 2.679rem + 4.76vw, 6.25rem) 0; /* 100-60 */
}

.about-item + .about-item {
  margin-top: clamp(2.5rem, 1.696rem + 3.57vw, 4.375rem); /* 70-40 */
}

.about-item__heading {
  font-size: clamp(1.25rem, 1.143rem + 0.48vw, 1.5rem); /* 24-20 */
  font-weight: 700;
  color: var(--c-brown);
  letter-spacing: 0.05em;
  margin-bottom: clamp(0.75rem, 0.536rem + 0.95vw, 1.25rem); /* 20-12 */
}

/* スポンサー */
.sponsor {
  padding: clamp(3.75rem, 2.679rem + 4.76vw, 6.25rem) 0 clamp(2.5rem, 1.696rem + 3.57vw, 4.375rem); /* 100-60,70-40 */
}

/* Instagram */
.instagram {
  padding: clamp(2.5rem, 1.696rem + 3.57vw, 4.375rem) 0 clamp(3.75rem, 2.679rem + 4.76vw, 6.25rem); /* 70-40,100-60 */
}

.instagram-campaign-how-to {
  margin-top: clamp(2rem, 1.518rem + 2.14vw, 3.125rem); /* 50-32 */
  display: grid;
  grid-template-columns: 60% 1fr;
  gap: 20px 40px;
}

@media screen and (max-width: 768px) {
  .instagram-campaign-how-to {
    grid-template-columns: 1fr;
  }
}

.instagram__bnr {
  display: block;
  margin-top: clamp(2.5rem, 1.964rem + 2.38vw, 3.75rem); /* 60-40 */
  transition: opacity 0.2s;
}

.instagram__bnr:hover {
  opacity: 0.8;
}

.instagram-campaign-how-to__body {
  background-color: var(--c-bg--light);
  padding: 32px;
  border-radius: 10px;
}

.instagram-campaign-how-to__heading {
  font-size: clamp(1rem, 0.92rem + 0.36vw, 1.188rem); /* 19-16 */
  font-weight: 700;
  color: var(--c-brown);
  text-align: center;
}

.instagram-campaign-how-to__list {
  list-style: decimal;
  padding-left: 1em;
  margin-top: 16px;
}

.instagram-campaign-how-to__list li + li {
  margin-top: 1em;
}

.instagram-campaign-how-to__list li::marker {
  font-weight: bold;
  color: var(--c-brown);
}

/* インスタバナー */
.instagram-bnr {
  margin-top: 60px;
  margin-bottom: 60px;
  text-align: center;
}

/* フッター */
.footer-about {
  background-image: url(../images/bg_footer-about.jpg);
  padding: clamp(3.75rem, 2.679rem + 4.76vw, 6.25rem) 0;
}

.footer-about__heading {
  color: var(--c-white);
  font-family: var(--ff-noto-serif);
  font-size: clamp(1.125rem, 1.018rem + 0.48vw, 1.375rem); /* 22-18 */
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
}

.footer-about__txt {
  color: var(--c-white);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.3;
  margin-top: 26px;
  max-width: 700px;
  margin-inline: auto;
}

.footer-main {
  background-image: url(../images/bg_footer.png);
  background-size: cover;
  background-position: center;
}

.footer-main__inner {
  padding-top: clamp(3.125rem, 2.589rem + 2.38vw, 4.375rem); /* 70-50 */
  padding-bottom: clamp(3.75rem, 3.08rem + 2.98vw, 5.313rem); /* 85-60 */
}

.footer-sponsor-item__heading {
  text-align: center;
  font-size: clamp(1.125rem, 1.018rem + 0.48vw, 1.375rem); /* 22-18 */
  letter-spacing: 0.07em;
  font-weight: 500;
  margin-bottom: clamp(1rem, 0.893rem + 0.48vw, 1.25rem); /* 20-16 */
}

.footer-sponsor-item__data {
  text-align: center;
  font-size: clamp(1rem, 0.946rem + 0.24vw, 1.125rem); /* 18-16 */
  letter-spacing: 0;
  font-weight: 400;
}

.footer-sponsor-item + .footer-sponsor-item {
  margin-top: 45px;
}

.footer-copy {
  background-color: #eae8d9;
}

@media screen and (max-width: 768px) {
  .footer-copy__lgoo {
    max-width: 300px;
  }
}

.footer-copy__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.footer-copy__txt {
  font-size: 14px;
  font-weight: 400;
  margin-top: 20px;
}