@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap");
:root { --lh: 1.75; /* line-height */ --cl-beige: #f2f0e2; --cl-pail-green: #ddefd5; --cl-white: #fff; --cl-gray: #4d4d4d; /* font-color */ --cl-green: #209f63; --cl-brown: #754c24; }

/* font */
/* site common */
html { font-size: 62.5%; font-family: "Kosugi Maru", sans-serif; font-weight: 500; font-style: normal; scroll-behavior: smooth; }
@media (max-width: 856px) and (min-width: 429px) { html { font-size: calc(100vw / 856 * 10); } }
@media (max-width: 428px) { html { font-size: calc(100vw / 428 * 10); } }

body { background-color: var(--cl-pail-green); color: var(--cl-gray); font-size: clamp(1.2rem, 1.25vw, 2rem); line-height: var(--lh); }
body.clip { overflow: hidden; }

* { box-sizing: border-box; }

img { width: 100%; height: auto; vertical-align: top; object-fit: contain; }

a { transition: opacity ease .3s; }
a:has(img):hover { opacity: 0.5; }

.txt--left { text-align: left; }

.txt--center { text-align: center; }

.txt--right { text-align: right; }

.sp-only { display: none; }

.pc-only { display: none; }

@media screen and (min-width: 857px), print { .pc-only { display: block; } }
@media (max-width: 856px) and (min-width: 429px) { .sp-only { display: block; } }
@media (max-width: 428px) { .sp-only { display: block; } }
/* animation */
.up { opacity: 0; transform: translateY(30px); }

.up--active { animation: fadeUP 0.75s forwards; opacity: 0; }

@keyframes fadeUP { from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); } }
/* ---------- SP ---------- */
@media (max-width: 856px) { html { scroll-padding-top: calc((44 / 428) * 100vw); }
  /* ---------- HEADER ---------- */
  #header { padding-inline: calc((40 / 428) * 100vw); transition: all ease .3s; }
  .header__logos { position: fixed; left: calc((14 / 428) * 100vw); top: calc((14 / 428) * 100vw); z-index: 20; }
  .header__logos a { display: block; }
  .header__logos .logo--pref { width: calc((50 / 428) * 100vw); height: auto; }
  .header__logos .logo--kankyo-fes { display: none; }
  div.sp__head { width: 100%; max-width: calc(347px * 2); height: auto; margin-inline: auto; opacity: 0; visibility: hidden; display: none; transition: all ease .3s; }
  div.sp__head a:hover { opacity: 1; }
  div.sp__head a:hover img { opacity: 1; }
  /* navigation */
  nav#gnav { margin-top: calc((24 / 428) * 100vw); opacity: 0; visibility: hidden; display: none; transition: all ease .3s; }
  ul.gnav__lists { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc((60 / 428) * 100vw); }
  ul.gnav__lists li { font-size: clamp(calc((20 / 428) * 100vw), calc((20 / 428) * 100vw), 2rem); color: var(--cl-gray); text-align: center; margin-bottom: calc((80 / 428) * 100vw); }
  ul.gnav__lists li span { display: block; margin-inline: auto; }
  ul.gnav__lists li:first-child span { width: calc((63 / 428) * 100vw); height: calc((13 / 428) * 100vw); }
  ul.gnav__lists li:nth-child(2) span { width: calc((118 / 428) * 100vw); height: calc((11 / 428) * 100vw); }
  ul.gnav__lists li:nth-child(3) span { width: calc((51 / 428) * 100vw); height: calc((11 / 428) * 100vw); }
  ul.gnav__lists li:nth-child(4) span { width: calc((76 / 428) * 100vw); height: calc((14 / 428) * 100vw); }
  ul.gnav__lists li:nth-child(5) span { width: calc((62 / 428) * 100vw); height: calc((10 / 428) * 100vw); }
  /* navigation open */
  #header.open { background: url("../img/sp/gnav_bg_top@2x.png") var(--cl-pail-green) top center no-repeat; background-size: 100% auto; height: 100vh; min-height: 100vh; overflow-y: auto; position: fixed; top: 0; left: 0; right: 0; z-index: 20; }
  #header.open nav#gnav { opacity: 1; visibility: visible; display: block; }
  #header.open div.sp__head { opacity: 1; visibility: visible; display: block; }
  button.button__menu { display: block; position: fixed; top: calc((14 / 428) * 100vw); right: calc((14 / 428) * 100vw); z-index: 20; }
  button.button__menu span { display: block; transition: margin ease .3s; }
  button.button__menu span:first-child { width: calc((48 / 428) * 100vw); height: calc((8 / 428) * 100vw); background: url("../img/sp/nav_bar_01@2x.png") left top no-repeat; background-size: contain; margin-bottom: 2px; animation: bar01 1.75s steps(2) infinite; }
  button.button__menu span:nth-child(2) { width: calc((51 / 428) * 100vw); height: calc((13 / 428) * 100vw); background: url("../img/sp/nav_bar_02@2x.png") left top no-repeat; background-size: contain; margin-bottom: calc((4 / 428) * 100vw); animation: bar02 1.75s steps(2) infinite; }
  button.button__menu span:nth-child(3) { width: calc((48 / 428) * 100vw); height: calc((9 / 428) * 100vw); background: url("../img/sp/nav_bar_03@2x.png") left top no-repeat; background-size: contain; margin-bottom: calc((5 / 428) * 100vw); animation: bar03 1.75s steps(2) infinite; }
  button.button__menu span.button__menu-txt { width: calc((37 / 428) * 100vw); height: calc((10 / 428) * 100vw); margin-inline: auto; background: url("../img/sp/nav_txt_menu@2x.png") center center no-repeat; background-size: contain; text-indent: 100px; overflow: hidden; }
  button.button__menu.open span:nth-child(2) { margin-top: calc((-6 / 428) * 100vw); }
  button.button__menu.open span:nth-child(3) { margin-top: calc((-6 / 428) * 100vw); margin-bottom: calc((7 / 428) * 100vw); }
  button.button__menu.open span.button__menu-txt { background-image: url("../img/sp/nav_txt_close@2x.png"); }
  @keyframes bar01 { 0% { transform: rotate(3deg); transform-origin: center center; }
    100% { transform: rotate(-3deg); transform-origin: center center; } }
  @keyframes bar02 { 0% { transform: rotate(0deg); transform-origin: center center; }
    100% { transform: rotate(6deg); transform-origin: center center; } }
  @keyframes bar03 { 0% { transform: rotate(0deg); transform-origin: center center; }
    100% { transform: rotate(-6deg); transform-origin: center center; } }
  /* ---------- CONTENTS ---------- */
  /* top */
  #kv { position: relative; padding-bottom: calc((40 / 428) * 100vw); }
  #kv::before, #kv::after { content: ''; display: block; position: absolute; z-index: -3; pointer-events: none; }
  #kv::before { width: calc((148 / 428) * 100vw); height: calc((260 / 428) * 100vw); background: url("../img/sp/bg_top-left@2x.png") left top no-repeat; background-size: contain; top: 0; left: 0; }
  #kv::after { width: calc((176 / 428) * 100vw); height: calc((493 / 428) * 100vw); background: url("../img/sp/bg_top-right@2x.png") right top no-repeat; background-size: contain; top: 0; right: 0; }
  .kv__txtbox { position: relative; }
  .kv__logo { width: calc((347 / 428) * 100vw); height: calc((280 / 428) * 100vw); background: url("../img/bg_stunp_top.png") center center no-repeat; background-size: contain; text-align: center; margin: calc((-40 / 428) * 100vw) auto calc((220 / 428) * 100vw); display: flex; align-items: center; justify-content: center; position: relative; z-index: -1; }
  .kv__logo img { width: calc((277 / 428) * 100vw); height: auto; margin-top: calc((24 / 428) * 100vw); }
  .kv__schedule, .venue, .kv__free { display: block; }
  .kv__schedule { width: calc((300 / 428) * 100vw); height: auto; margin: 0 auto calc((16 / 428) * 100vw); }
  .venue { width: calc((268 / 428) * 100vw); height: auto; margin-left: calc((68 / 428) * 100vw); }
  .kv__free { width: calc((91 / 428) * 100vw); height: auto; position: absolute; top: 60%; left: calc((48 / 428) * 100vw); }
  .slides { width: calc((364 / 428) * 100vw); height: calc((287 / 428) * 100vw); position: absolute; top: calc((200 / 428) * 100vw); right: 0; z-index: -2; overflow: hidden; }
  /* 協賛・出展募集 */
  #reserved { background: url("../img/sp/bg_orange-wave.png") center center no-repeat; background-size: contain; padding: calc((60 / 428) * 100vw) 0; position: relative; }
  #reserved p { color: var(--cl-white); font-size: clamp(calc((16 / 428) * 100vw), calc((16 / 428) * 100vw), 2.8rem); }
  #reserved .balloon { display: block; width: calc((115 / 428) * 100vw); height: calc((67 / 428) * 100vw); position: absolute; top: calc((-24 / 428) * 100vw); left: calc((40 / 428) * 100vw); animation: balloon 2s steps(2) infinite; }
  .reserved__ttl { width: calc((268 / 428) * 100vw); height: calc((25 / 428) * 100vw); margin: 0 auto calc((24 / 428) * 100vw); }
  @keyframes balloon { 0% { transform: rotate(0deg); transform-origin: bottom right; }
    100% { transform: rotate(-6deg); transform-origin: bottom right; } }
  ul.reserved__btns li { margin-bottom: calc((12 / 428) * 100vw); }
  .btn { display: block; width: calc((331 / 428) * 100vw); height: calc((47 / 428) * 100vw); margin-inline: auto; }
  .btn img { transition: opacity ease .3s; }
  .btn:hover img { opacity: 0; }
  .btn.reserved { background: url("../img/sp/btn_reserved_on@2x.png") center center no-repeat; background-size: 100% auto; opacity: 1; }
  .btn.youkou { background: url("../img/sp/btn_youkou_on@2x.png") center center no-repeat; background-size: 100% auto; opacity: 1; }
  /* concept */
  #concept { padding: calc((110 / 428) * 100vw) 0 calc((150 / 428) * 100vw); position: relative; overflow-x: clip; overflow-y: visible; }
  #concept > .inner { background: url("../img/bg_stunp_concept.png") top center no-repeat; background-size: calc((500 / 428) * 100vw) calc((472 / 428) * 100vw); min-height: calc((472 / 428) * 100vw); padding-top: calc((34 / 428) * 100vw); position: relative; }
  #concept .ttl { margin-bottom: calc((6 / 428) * 100vw); }
  #concept .ttl img { width: calc((118 / 428) * 100vw); height: calc((25 / 428) * 100vw); }
  .logo__whats { width: calc((360 / 428) * 100vw); height: auto; margin: 0 auto calc((24 / 428) * 100vw); }
  .logo__whats + p { font-size: clamp(calc((16 / 428) * 100vw), calc((16 / 428) * 100vw), 2rem); color: var(--cl-gray); line-height: 1.75; text-align: center; margin-inline: calc((40 / 428) * 100vw); }
  .balloon { display: block; position: absolute; pointer-events: none; }
  .balloon.bl--workshop { width: calc((91 / 428) * 100vw); height: calc((89 / 428) * 100vw); left: calc((32 / 428) * 100vw); top: calc((383 / 428) * 100vw); }
  .balloon.bl--recycle { width: calc((89 / 428) * 100vw); height: calc((93 / 428) * 100vw); left: calc((114 / 428) * 100vw); top: calc((428 / 428) * 100vw); }
  .balloon.bl--eco-gourmet { width: calc((89 / 428) * 100vw); height: calc((93 / 428) * 100vw); right: calc((114 / 428) * 100vw); top: calc((428 / 428) * 100vw); }
  .balloon.bl--hoby { width: calc((91 / 428) * 100vw); height: calc((89 / 428) * 100vw); right: calc((32 / 428) * 100vw); top: calc((383 / 428) * 100vw); }
  .concept__bg-parts { display: block; position: absolute; pointer-events: none; /*左上*/ /*左下*/ /*右上*/ /*右下*/ }
  .concept__bg-parts.illust01 { width: calc((134 / 428) * 100vw); height: calc((154 / 428) * 100vw); top: 0; left: calc((10 / 428) * 100vw); }
  .concept__bg-parts.illust02 { width: calc((146 / 428) * 100vw); height: calc((176 / 428) * 100vw); left: calc((6 / 428) * 100vw); bottom: calc((-50 / 428) * 100vw); }
  .concept__bg-parts.illust03 { width: calc((146 / 428) * 100vw); height: calc((197 / 428) * 100vw); top: calc((9 / 428) * 100vw); right: calc((-31 / 428) * 100vw); }
  .concept__bg-parts.illust04 { width: calc((138 / 428) * 100vw); height: calc((167 / 428) * 100vw); right: calc((14 / 428) * 100vw); bottom: calc((-46 / 428) * 100vw); }
  /* Previous event */
  #previous-event { background: url("../img/sp/bg_ribon@2x.png") top center no-repeat; background-size: cover; padding-top: calc((80 / 428) * 100vw); }
  #previous-event .ttl { margin-bottom: calc((39 / 428) * 100vw); }
  #previous-event .ttl img { width: calc((221 / 428) * 100vw); height: calc((20 / 428) * 100vw); }
  #previous-event .ttl small { color: #fff; }
  #previous-event .ttl + p { font-size: clamp(calc((16 / 428) * 100vw), calc((16 / 428) * 100vw), 2rem); color: #fff; padding-inline: calc((58 / 428) * 100vw); margin-bottom: calc((50 / 428) * 100vw); }
  #slide-prev { position: relative; width: 100%; height: calc((200 / 428) * 100vw); overflow-x: clip; }
  #slide-prev > div { height: 100%; width: 200%; position: absolute; display: flex; column-gap: calc((15 / 428) * 100vw); }
  #slide-prev > div.view01 { animation: scrollL 20s linear infinite; top: 0; left: 0; }
  #slide-prev > div.view01 img { width: calc((2540 / 428) * 100vw); height: auto; }
  @keyframes scrollL { from { transform: translateX(0); }
    to { transform: translateX(-50%); } }
  @keyframes scrollR { from { transform: translateX(0); }
    to { transform: translateX(50%); } }
  /* access */
  #access { background-color: var(--cl-beige); padding-top: calc((48 / 428) * 100vw); padding-bottom: calc((48 / 428) * 100vw); }
  #access .inner { padding-inline: calc((24 / 428) * 100vw); }
  #access .ttl img { width: calc((96 / 428) * 100vw); height: calc((20 / 428) * 100vw); }
  .access__map { width: calc((379 / 428) * 100vw); height: calc((351 / 428) * 100vw); margin-bottom: calc((24 / 428) * 100vw); position: relative; }
  .access__map figure { aspect-ratio: 379 / 351; }
  .access__map .map--illust { width: calc((95 / 428) * 100vw); height: calc((103 / 428) * 100vw); position: absolute; right: calc((-9 / 428) * 100vw); bottom: calc((4 / 428) * 100vw); }
  .access__txtbox figure { margin-top: calc((24 / 428) * 100vw); margin-bottom: calc((48 / 428) * 100vw); }
  img.venue_access { width: calc((340 / 428) * 100vw); height: calc((58 / 428) * 100vw); aspect-ratio: 340 / 58; margin-bottom: calc((32 / 428) * 100vw); }
  img.venue_access + p { font-size: clamp(calc((16 / 428) * 100vw), calc((16 / 428) * 100vw), 1.7rem); }
  /* organizer */
  #organizer { background-color: var(--cl-beige); padding-top: calc((48 / 428) * 100vw); padding-bottom: calc((88 / 428) * 100vw); }
  #organizer .ttl img { width: calc((143 / 428) * 100vw); height: calc((27 / 428) * 100vw); }
  #organizer p { text-align: center; font-size: calc((16 / 428) * 100vw); }
  #organizer p strong { font-size: calc((19 / 428) * 100vw); font-weight: bold; }
  /* common */
  .ttl { text-align: center; margin-bottom: calc((24 / 428) * 100vw); }
  .ttl > img { display: block; margin-inline: auto; }
  .ttl small { display: block; font-size: clamp(calc((13 / 428) * 100vw), calc((13 / 428) * 100vw), 1.8rem); color: #595757; margin-top: calc((12 / 428) * 100vw); }
  .ttl small::before { content: '['; display: inline-block; vertical-align: baseline; margin-right: 10px; }
  .ttl small::after { content: ']'; display: inline-block; vertical-align: baseline; margin-left: 10px; }
  /* ---------- FOOTER ---------- */
  .footer { background: url("../img/sp/bg_footer@2x.png") var(--cl-beige) top left no-repeat; background-size: 100% auto; position: relative; padding-top: calc((60 / 428) * 100vw); }
  .footer::before, .footer::after { content: ''; display: block; position: absolute; pointer-events: none; }
  .footer::before { width: calc((112 / 428) * 100vw); height: calc((106 / 428) * 100vw); background: url("../img/illust_footer_01.gif") top left no-repeat; background-size: contain; left: calc((6 / 428) * 100vw); top: calc((-40 / 428) * 100vw); }
  .footer::after { width: calc((124 / 428) * 100vw); height: calc((89 / 428) * 100vw); background: url("../img/illust_footer_02.gif") top left no-repeat; background-size: contain; right: calc((3 / 428) * 100vw); top: calc((-32 / 428) * 100vw); }
  .footer .inner { padding-inline: calc((24 / 428) * 100vw); padding-bottom: calc((18 / 428) * 100vw); }
  .contact__txtbox .ttl img { width: calc((108 / 428) * 100vw); height: calc((18 / 428) * 100vw); }
  .contact__txtbox .ttl small { color: var(--cl-white); }
  .contact__txtbox p { color: var(--cl-white); font-size: clamp(calc((16 / 428) * 100vw), calc((16 / 428) * 100vw), 1.7rem); text-align: center; }
  .round-box { background: url("../img/sp/bg_jaggy.svg") top left no-repeat; background-size: cover; position: relative; padding: calc((48 / 428) * 100vw) calc((24 / 428) * 100vw) 0; margin-top: calc((38 / 428) * 100vw); margin-bottom: calc(calc((30 / 428) * 100vw) + calc((24 / 428) * 100vw)); }
  .round-box::after { content: ''; display: block; width: 100%; height: calc((30 / 428) * 100vw); background: url("../img/sp/bg_jaggy.svg") bottom left no-repeat; background-size: 100%; position: absolute; left: 0; bottom: calc((-30 / 428) * 100vw); }
  .round-box h3 { font-size: clamp(calc((22 / 428) * 100vw), calc((22 / 428) * 100vw), 2.2rem); text-align: center; line-height: 1.27; }
  .round-box h3 small { font-size: clamp(calc((17 / 428) * 100vw), calc((17 / 428) * 100vw), 1.7rem); line-height: 1.64; }
  .round-box dl { text-align: center; padding: calc((32 / 428) * 100vw) 0; }
  .round-box dl dt { font-size: clamp(calc((17 / 428) * 100vw), calc((17 / 428) * 100vw), 1.7rem); margin-bottom: calc((32 / 428) * 100vw); }
  .round-box dl dt i { display: inline-block; vertical-align: middle; margin-right: calc((20 / 428) * 100vw); }
  .round-box dl dt i.icon--email { width: calc((30 / 428) * 100vw); height: calc((20 / 428) * 100vw); }
  .round-box dl dt i.icon--tel { width: calc((25 / 428) * 100vw); height: calc((25 / 428) * 100vw); }
  .round-box dl dd p.tel { margin-bottom: calc((48 / 428) * 100vw); }
  .round-box dl dd p.tel img { width: calc((224 / 428) * 100vw); height: calc((27 / 428) * 100vw); }
  .round-box dl dd p.time { font-size: clamp(calc((17 / 428) * 100vw), calc((17 / 428) * 100vw), 1.2rem); }
  .round-box dl dd .email { font-size: clamp(calc((19 / 428) * 100vw), calc((19 / 428) * 100vw), 1.7rem); color: #209f63; }
  .round-box dl:not(:last-child) { border-bottom: 1px solid #707676; }
  .round-box dl:last-child { padding-bottom: 0; }
  a.btn--basic { display: inline-block; color: #209f63; font-size: clamp(calc((16 / 428) * 100vw), calc((16 / 428) * 100vw), 1.8rem); background-color: #e7e3c8; padding: calc((4 / 428) * 100vw) calc((16 / 428) * 100vw); border-radius: calc((16 / 428) * 100vw); min-width: calc((204 / 428) * 100vw); margin-inline: auto; text-align: center; }
  .txt--copyright { text-align: center; color: #fff; font-size: clamp(calc((14 / 428) * 100vw), calc((14 / 428) * 100vw), 1.7rem); } }
/* ---------- PC ---------- */
@media screen and (min-width: 857px), print { html { scroll-padding-top: calc((80 / 1920) * 100vw); }
  /* ---------- HEADER ---------- */
  #header { display: flex; align-items: center; column-gap: calc((48 / 1920) * 100vw); width: 100%; padding-top: calc((33 / 1920) * 100vw); position: fixed; top: 0; left: 0; z-index: 20; }
  #header.sticky::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; backdrop-filter: blur(2px); }
  .header__logos { background-color: #fff; border-top-right-radius: calc((40 / 1920) * 100vw); border-bottom-right-radius: calc((40 / 1920) * 100vw); padding: calc((13 / 1920) * 100vw) calc((82 / 1920) * 100vw) calc((12 / 1920) * 100vw) calc((75 / 1920) * 100vw); display: flex; align-items: center; column-gap: calc((33 / 1920) * 100vw); flex-shrink: 0; }
  .header__logos a { display: block; }
  .header__logos .logo--pref { width: calc((75 / 1920) * 100vw); height: auto; }
  .header__logos .logo--kankyo-fes { width: calc((274 / 1920) * 100vw); height: auto; }
  div.sp__head { display: none; }
  /* navigation */
  ul.gnav__lists { display: flex; align-items: flex-start; column-gap: calc((60 / 1920) * 100vw); }
  ul.gnav__lists li { font-size: calc((20 / 1920) * 100vw); text-align: center; flex-shrink: 0; }
  ul.gnav__lists li a { display: block; }
  ul.gnav__lists li span { display: block; margin: calc((14 / 1920) * 100vw) auto 0; }
  ul.gnav__lists li:first-child span { width: calc((63 / 1920) * 100vw); height: calc((13 / 1920) * 100vw); }
  ul.gnav__lists li:nth-child(2) span { width: calc((118 / 1920) * 100vw); height: calc((11 / 1920) * 100vw); }
  ul.gnav__lists li:nth-child(3) span { width: calc((51 / 1920) * 100vw); height: calc((11 / 1920) * 100vw); }
  ul.gnav__lists li:nth-child(4) span { width: calc((76 / 1920) * 100vw); height: calc((14 / 1920) * 100vw); }
  ul.gnav__lists li:nth-child(5) span { width: calc((62 / 1920) * 100vw); height: calc((10 / 1920) * 100vw); }
  button.button__menu { display: none; }
  /* ---------- CONTENTS ---------- */
  /* top */
  #kv { aspect-ratio: 1920 / 1080; }
  #kv::before, #kv::after { content: ''; display: block; position: absolute; z-index: -3; pointer-events: none; }
  #kv::before { width: calc((420 / 1920) * 100vw); height: calc((758 / 1920) * 100vw); background: url("../img/bg_top-left.png") top left no-repeat; background-size: contain; top: 0; left: 0; }
  #kv::after { width: calc((496 / 1920) * 100vw); height: calc((1108 / 1920) * 100vw); background: url("../img/bg_top-right.png") top right no-repeat; background-size: contain; top: 0; right: 0; }
  #kv .kv__txtbox { width: calc((930 / 1920) * 100vw); margin-left: calc((150 / 1920) * 100vw); position: relative; }
  #kv .kv__txtbox::after { content: ''; display: block; width: calc((930 / 1920) * 100vw); height: calc((839 / 1920) * 100vw); background: url("../img/bg_stunp_top.png") top center no-repeat; background-size: contain; position: absolute; top: 0; left: 0; right: 0; z-index: -1; margin: auto; }
  #kv .kv__logo { width: calc((690 / 1920) * 100vw); height: auto; padding-top: calc((180 / 1920) * 100vw); margin: 0 auto calc((64 / 1920) * 100vw); }
  #kv .kv__schedule, #kv .venue, #kv .kv__free { display: block; }
  #kv .kv__schedule { width: calc((508 / 1920) * 100vw); height: auto; margin-left: calc((216 / 1920) * 100vw); margin-bottom: calc((18 / 1920) * 100vw); }
  #kv .venue { width: calc((417 / 1920) * 100vw); height: auto; margin-left: calc((216 / 1920) * 100vw); }
  #kv .kv__free { width: calc((158 / 1920) * 100vw); height: auto; position: absolute; bottom: calc((-23 / 1920) * 100vw); right: calc((127 / 1920) * 100vw); }
  #kv .slides { width: calc((1018 / 1920) * 100vw); height: calc((810 / 1920) * 100vw); position: absolute; right: 0; top: calc((156 / 1920) * 100vw); z-index: -2; overflow: clip; }
  /* 協賛・出展募集 */
  #reserved { background: url("../img/bg_orange-wave.png") center center no-repeat; background-size: cover; padding: calc((94 / 1920) * 100vw) 0 calc((78 / 1920) * 100vw); position: relative; }
  #reserved p { color: var(--cl-white); font-size: calc((28 / 1920) * 100vw); }
  #reserved .balloon { display: block; width: calc((245 / 1920) * 100vw); height: auto; position: absolute; top: calc((-22 / 1920) * 100vw); left: calc((405 / 1920) * 100vw); animation: balloon 2s steps(2) infinite; }
  .reserved__ttl { width: calc((575 / 1920) * 100vw); height: auto; margin: 0 auto calc((44 / 1920) * 100vw); }
  @keyframes balloon { 0% { transform: rotate(0deg); transform-origin: bottom right; }
    100% { transform: rotate(-6deg); transform-origin: bottom right; } }
  ul.reserved__btns li { margin-bottom: calc((32 / 1920) * 100vw); }
  .btn { display: block; width: calc((636 / 1920) * 100vw); height: calc((83 / 1920) * 100vw); margin-inline: auto; }
  .btn img { transition: opacity ease .3s; }
  .btn:hover img { opacity: 0; }
  .btn.reserved { background: url("../img/btn_reserved_on.png") center center no-repeat; background-size: 100% auto; opacity: 1; }
  .btn.youkou { background: url("../img/btn_youkou_on.png") center center no-repeat; background-size: 100% auto; opacity: 1; }
  /* concept */
  #concept { padding: calc((107 / 1920) * 100vw) 0 calc((145 / 1920) * 100vw); position: relative; overflow-x: clip; overflow-y: visible; }
  #concept > .inner { background: url("../img/bg_stunp_concept.png") top center no-repeat; background-size: calc((893 / 1920) * 100vw) calc((843 / 1920) * 100vw); width: calc((893 / 1920) * 100vw); min-height: calc((843 / 1920) * 100vw); padding-top: calc((107 / 1920) * 100vw); position: relative; margin-inline: auto; }
  #concept .ttl { margin-bottom: calc((41 / 1920) * 100vw); }
  #concept .ttl img { width: calc((201 / 1920) * 100vw); height: auto; }
  .logo__whats { width: calc((609 / 1920) * 100vw); height: auto; margin: 0 auto calc((45 / 1920) * 100vw); }
  .logo__whats + p { font-size: calc((20 / 1920) * 100vw); color: var(--cl-gray); line-height: 1.75; margin-inline: calc((189 / 1920) * 100vw); }
  .balloon { display: block; position: absolute; pointer-events: none; }
  .balloon.bl--workshop { width: calc((159 / 1920) * 100vw); height: calc((155 / 1920) * 100vw); left: calc((-18 / 1920) * 100vw); bottom: calc((181 / 1920) * 100vw); }
  .balloon.bl--recycle { width: calc((155 / 1920) * 100vw); height: calc((162 / 1920) * 100vw); left: calc((202 / 1920) * 100vw); bottom: calc((54 / 1920) * 100vw); }
  .balloon.bl--eco-gourmet { width: calc((155 / 1920) * 100vw); height: calc((162 / 1920) * 100vw); right: calc((203 / 1920) * 100vw); bottom: calc((54 / 1920) * 100vw); }
  .balloon.bl--hoby { width: calc((159 / 1920) * 100vw); height: calc((155 / 1920) * 100vw); right: calc((-19 / 1920) * 100vw); bottom: calc((181 / 1920) * 100vw); }
  .concept__bg-parts { display: block; position: absolute; pointer-events: none; z-index: -1; /*左上*/ /*左下*/ /*右上*/ /*右下*/ }
  .concept__bg-parts.illust01 { width: calc((372 / 1920) * 100vw); height: calc((428 / 1920) * 100vw); top: calc((80 / 1920) * 100vw); left: calc((23 / 1920) * 100vw); }
  .concept__bg-parts.illust02 { width: calc((393 / 1920) * 100vw); height: calc((538 / 1920) * 100vw); left: calc((-45 / 1920) * 100vw); top: calc((575 / 1920) * 100vw); }
  .concept__bg-parts.illust03 { width: calc((363 / 1920) * 100vw); height: calc((686 / 1920) * 100vw); top: calc((53 / 1920) * 100vw); right: calc((-19 / 1920) * 100vw); }
  .concept__bg-parts.illust04 { width: calc((444 / 1920) * 100vw); height: calc((457 / 1920) * 100vw); right: calc((-61 / 1920) * 100vw); top: calc((690 / 1920) * 100vw); }
  /* Previous event */
  #previous-event { background: url("../img/bg_ribon.png") top center no-repeat; background-size: cover; padding-top: calc((168 / 1920) * 100vw); padding-bottom: calc((185 / 1920) * 100vw); position: relative; }
  #previous-event::before, #previous-event::after { content: ''; display: block; position: absolute; }
  #previous-event::before { width: calc((117 / 1920) * 100vw); height: calc((96 / 1920) * 100vw); background: url("../img/img_flower01.gif") center center no-repeat; background-size: contain; top: calc((128 / 1920) * 100vw); left: calc((499 / 1920) * 100vw); }
  #previous-event::after { width: calc((121 / 1920) * 100vw); height: calc((100 / 1920) * 100vw); background: url("../img/img_flower02.gif") center center no-repeat; background-size: contain; top: calc((170 / 1920) * 100vw); right: calc((445 / 1920) * 100vw); }
  #previous-event .ttl img { width: calc((375 / 1920) * 100vw); height: calc((34 / 1920) * 100vw); }
  #previous-event .ttl small { color: #fff; }
  #previous-event .ttl + p { font-size: calc((20 / 1920) * 100vw); color: #fff; max-width: calc((688 / 1920) * 100vw); margin: 0 auto calc((60 / 1920) * 100vw); }
  #slide-prev { position: relative; width: 100%; height: calc((250 / 1920) * 100vw); overflow-x: clip; }
  #slide-prev > div { height: 100%; width: 200%; position: absolute; display: flex; column-gap: calc((15 / 1920) * 100vw); }
  #slide-prev > div.view01 { animation: scrollL 30s linear infinite; top: 0; left: 0; }
  @keyframes scrollL { from { transform: translateX(0); }
    to { transform: translateX(-50%); } }
  @keyframes scrollR { from { transform: translateX(0); }
    to { transform: translateX(50%); } }
  /* access */
  #access { background-color: var(--cl-beige); padding-top: calc((118 / 1920) * 100vw); padding-bottom: calc((118 / 1920) * 100vw); }
  #access .inner { width: calc((1200 / 1920) * 100vw); margin-inline: auto; display: grid; column-gap: calc((75 / 1920) * 100vw); grid-template-areas: "a a" "b c"; }
  #access .ttl { grid-area: a; }
  #access .ttl img { width: calc((164 / 1920) * 100vw); height: calc((34 / 1920) * 100vw); }
  .access__map { width: calc((634 / 1920) * 100vw); height: calc((587 / 1920) * 100vw); position: relative; grid-area: b; }
  .access__map figure { aspect-ratio: 634 / 587; }
  .access__map .map--illust { width: calc((206 / 1920) * 100vw); height: calc((222 / 1920) * 100vw); position: absolute; right: calc((-60 / 1920) * 100vw); bottom: calc((4 / 1920) * 100vw); }
  .access__txtbox { grid-area: c; }
  .access__txtbox figure { width: calc((430 / 1920) * 100vw); margin-top: calc((12 / 1920) * 100vw); margin-bottom: calc((46 / 1920) * 100vw); }
  .access__txtbox a.btn { width: calc((330 / 1920) * 100vw); height: calc((46 / 1920) * 100vw); background: url("../img/btn_kotsu_on.png") center center no-repeat; background-size: 100% auto; opacity: 1; }
  img.venue_access { width: calc((470 / 1920) * 100vw); height: auto; aspect-ratio: 470 / 77; margin-bottom: calc((34 / 1920) * 100vw); }
  img.venue_access + p { font-size: calc((17 / 1920) * 100vw); }
  /* organizer */
  #organizer { background-color: var(--cl-beige); padding-top: calc((60 / 1920) * 100vw); padding-bottom: calc((80 / 1920) * 100vw); }
  #organizer .inner { width: calc((1200 / 1920) * 100vw); margin-inline: auto; }
  #organizer .ttl img { width: calc((229 / 1920) * 100vw); height: calc((43 / 1920) * 100vw); }
  #organizer p { text-align: center; font-size: calc((18 / 1920) * 100vw); line-height: 2.27; }
  #organizer p strong { font-size: calc((27 / 1920) * 100vw); font-weight: bold; line-height: 1.5; }
  #organizer p:has(strong) { margin-bottom: calc((24 / 1920) * 100vw); }
  /* common */
  .ttl { text-align: center; margin-bottom: calc((48 / 1920) * 100vw); }
  .ttl > img { display: block; margin-inline: auto; }
  .ttl small { display: block; font-size: calc((18 / 1920) * 100vw); color: #595757; margin-top: calc((16 / 1920) * 100vw); }
  .ttl small::before { content: '['; display: inline-block; vertical-align: baseline; margin-right: calc((10 / 1920) * 100vw); }
  .ttl small::after { content: ']'; display: inline-block; vertical-align: baseline; margin-left: calc((10 / 1920) * 100vw); }
  /* ---------- FOOTER ---------- */
  .footer { background: url("../img/bg_footer.png") var(--cl-beige) top left no-repeat; background-size: cover; padding-top: calc((136 / 1920) * 100vw); position: relative; }
  .footer::before, .footer::after { content: ''; display: block; position: absolute; pointer-events: none; }
  .footer::before { width: calc((302 / 1920) * 100vw); height: calc((282 / 1920) * 100vw); background: url("../img/illust_footer_01.gif") top left no-repeat; background-size: contain; left: calc((23 / 1920) * 100vw); top: calc((-140 / 1920) * 100vw); }
  .footer::after { width: calc((382 / 1920) * 100vw); height: calc((214 / 1920) * 100vw); background: url("../img/illust_footer_02.gif") top left no-repeat; background-size: contain; right: calc((26 / 1920) * 100vw); top: calc((-130 / 1920) * 100vw); }
  .footer .inner { width: calc((1200 / 1920) * 100vw); margin-inline: auto; padding-bottom: calc((48 / 1920) * 100vw); display: grid; grid-template-areas: "a b" "c c"; align-items: center; }
  .contact__txtbox { grid-area: a; }
  .contact__txtbox .ttl img { width: calc((187 / 1920) * 100vw); height: auto; }
  .contact__txtbox .ttl small { color: var(--cl-white); }
  .contact__txtbox p { color: var(--cl-white); font-size: calc((17 / 1920) * 100vw); text-align: center; }
  .round-box { position: relative; z-index: 1; box-sizing: border-box; padding: calc((27 / 1920) * 100vw) calc((44 / 1920) * 100vw); margin-bottom: calc((60 / 1920) * 100vw); grid-area: b; display: grid; grid-template-areas: "a a" "b c"; row-gap: calc((32 / 1920) * 100vw); background: url("../img/bg_jaggy.svg") center center no-repeat; background-size: calc((653 / 1920) * 100vw) calc((246 / 1920) * 100vw); }
  .round-box h3 { font-size: calc((22 / 1920) * 100vw); text-align: center; line-height: 1.27; grid-area: a; }
  .round-box h3 small { font-size: calc((17 / 1920) * 100vw); line-height: 1.64; }
  .round-box dl { text-align: center; }
  .round-box dl dt { font-size: calc((17 / 1920) * 100vw); margin-bottom: calc((11 / 1920) * 100vw); }
  .round-box dl dt i { display: inline-block; vertical-align: middle; margin-right: calc((20 / 1920) * 100vw); }
  .round-box dl dt i.icon--email { width: calc((30 / 1920) * 100vw); height: calc((20 / 1920) * 100vw); }
  .round-box dl dt i.icon--tel { width: calc((25 / 1920) * 100vw); height: calc((25 / 1920) * 100vw); }
  .round-box dl dd p.tel { margin-bottom: calc((12 / 1920) * 100vw); }
  .round-box dl dd p.tel img { width: calc((212 / 1920) * 100vw); height: auto; }
  .round-box dl dd p.time { font-size: calc((12 / 1920) * 100vw); }
  .round-box dl dd .email { font-size: calc((17 / 1920) * 100vw); color: #209f63; }
  .round-box dl:not(:last-child) { border-right: 1px solid #707676; }
  .round-box dl:first-child { grid-area: b; }
  .round-box dl:last-child { padding-right: 0; grid-area: c; }
  .round-box + div { grid-area: c; }
  a.btn--basic { display: inline-block; color: #209f63; font-size: calc((18 / 1920) * 100vw); background-color: #e7e3c8; padding: calc((4 / 1920) * 100vw) calc((16 / 1920) * 100vw); border-radius: calc((24 / 1920) * 100vw); min-width: calc((250 / 1920) * 100vw); margin-inline: auto; text-align: center; transition: opacity ease .3s; }
  a.btn--basic:hover { opacity: 0.5; }
  .txt--copyright { text-align: center; color: #fff; font-size: calc((17 / 1920) * 100vw); } }