@charset "UTF-8";
:root { --cat01: #df7c47; /*温暖化防止・省エネ*/ --cat02: #efb84d; /*ゴミを減らそう！*/ --cat03: #88c247; /*3R（リデュース･リユース･リサイクル）*/ --cat04: #1f906b; /*自然や生き物について考えよう！*/ --cat05: #7d7d7d; /*環境活動報告*/ --cat06: #d75278; /*エコグルメ*/ --cat07: #25a6e0; /*協賛*/ }

@media screen and (min-width: 857px) { :root { --width: 1920; } }
@media (max-width: 856px) { :root { --width: 428; } }
body#exhibitors { background-color: var(--cl-beige); }

body#exhibitors #container .inner { padding-top: min(calc((240 / var(--width)) * 100vw), 160px); }

.ttl { text-align: center; }
.ttl img { width: min(calc((646 / var(--width)) * 100vw), 323px); height: auto; }
.ttl small { font-size: 1.3rem; }

aside.category { max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: min(calc((64 / var(--width)) * 100vw), 64px); }

nav.cat-nav ul { display: flex; flex-wrap: wrap; justify-content: center; }
nav.cat-nav ul li { flex-shrink: 0; background-color: #fff; border-radius: 6px; font-size: 1.4rem; margin: 4px; }
nav.cat-nav ul li.cat01 a { color: var(--cat01); }
nav.cat-nav ul li.cat02 a { color: var(--cat02); }
nav.cat-nav ul li.cat03 a { color: var(--cat03); }
nav.cat-nav ul li.cat04 a { color: var(--cat04); }
nav.cat-nav ul li.cat05 a { color: var(--cat05); }
nav.cat-nav ul li.cat06 a { color: var(--cat06); }
nav.cat-nav ul li.cat07 a { color: var(--cat07); }
nav.cat-nav ul li a { display: block; color: #333; vertical-align: middle; padding: 6px 32px 6px 16px; position: relative; }
nav.cat-nav ul li a::after { content: 'keyboard_arrow_down'; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; position: absolute; top: 50%; right: 2%; transform: translateY(-50%); transition: top ease .15s, transform ease .15s; }
@media (hover: hover) { nav.cat-nav ul li a:hover::after, nav.cat-nav ul li a:focus::after { top: 60%; transform: translateY(-60%); } }

article#cat01, article#cat02, article#cat03, article#cat04, article#cat05, article#cat06, article#cat07 { margin-bottom: 108px; }

span.cat-icon { display: inline-block; width: 24px; height: 24px; font-size: 0; vertical-align: middle; margin-right: 6px; }
span.cat-icon.icon--cat01 { background: url("../img/exhibitors/icon01.svg") center center no-repeat; background-size: contain; }
span.cat-icon.icon--cat02 { background: url("../img/exhibitors/icon02.svg") center center no-repeat; background-size: contain; }
span.cat-icon.icon--cat03 { background: url("../img/exhibitors/icon03.svg") center center no-repeat; background-size: contain; }
span.cat-icon.icon--cat04 { background: url("../img/exhibitors/icon04.svg") center center no-repeat; background-size: contain; }
span.cat-icon.icon--cat05 { background: url("../img/exhibitors/icon05.svg") center center no-repeat; background-size: contain; }
span.cat-icon.icon--cat06 { background: url("../img/exhibitors/icon06.svg") center center no-repeat; background-size: contain; }
span.cat-icon.icon--cat07 { background: url("../img/exhibitors/icon07.svg") center center no-repeat; background-size: contain; }

.cat-ttl { font-size: clamp(2rem, calc((20 / var(--width)) * 100vw), 2.4rem); font-weight: bold; line-height: 1.3; vertical-align: middle; margin-bottom: 16px; }
.cat-ttl span.cat-icon { width: clamp(40px, calc((40 / var(--width)) * 100vw), 40px); height: clamp(40px, calc((40 / var(--width)) * 100vw), 40px); }

#cat01 .cat-ttl { color: var(--cat01); }

#cat02 .cat-ttl { color: var(--cat02); }

#cat03 .cat-ttl { color: var(--cat03); }

#cat04 .cat-ttl { color: var(--cat04); }

#cat05 .cat-ttl { color: var(--cat05); }

#cat06 .cat-ttl { color: var(--cat06); }

#cat07 .cat-ttl { color: var(--cat07); }

dl.exhibitors__list { display: flex; flex-wrap: wrap; }
dl.exhibitors__list > div { background-color: #fff; border-radius: 8px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); flex-shrink: 0; width: 48%; padding: 24px; margin: 1%; }
dl.exhibitors__list > div:last-child { margin-bottom: 0; }
dl.exhibitors__list dt { display: flex; align-items: flex-start; margin-bottom: 6px; }
dl.exhibitors__list dt ul { display: flex; align-items: center; margin-left: 8px; }
dl.exhibitors__list dt ul li { margin-right: 4px; margin-bottom: 4px; }
dl.exhibitors__list dd { font-size: clamp(1.5rem, calc((15 / var(--width)) * 100vw), 1.5rem); line-height: 1.5; }

/* ---------- SP ---------- */
@media (max-width: 856px) { dl.exhibitors__list > div { width: 100%; padding: 16px; margin-left: 0; margin-right: 0; margin-bottom: 4%; } }
.booth { display: inline-block; background-color: #ccc; border-radius: 6px; color: #fff; font-size: clamp(1.8rem, calc((18 / var(--width)) * 100vw), 1.8rem); line-height: 1; letter-spacing: 0.1rem; padding: 4px 8px; margin-right: 6px; }

#cat01 .booth { background-color: var(--cat01); }

#cat02 .booth { background-color: var(--cat02); }

#cat03 .booth { background-color: var(--cat03); }

#cat04 .booth { background-color: var(--cat04); }

#cat05 .booth { background-color: var(--cat05); }

#cat06 .booth { background-color: var(--cat06); }

#cat07 .booth { background-color: var(--cat07); }

.company-name { display: inline-block; font-size: clamp(1.7rem, calc((17 / var(--width)) * 100vw), 1.7rem); line-height: 1.3; }

#cat01 .company-name { color: var(--cat01); }

#cat02 .company-name { color: var(--cat02); }

#cat03 .company-name { color: var(--cat03); }

#cat04 .company-name { color: var(--cat04); }

#cat05 .company-name { color: var(--cat05); }

#cat06 .company-name { color: var(--cat06); }

#cat07 .company-name { color: var(--cat07); }

span.txt--present::after { content: 'featured_seasonal_and_gifts'; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; vertical-align: text-bottom; }