@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&family=Noto+Sans+JP:wght@300&display=swap');

:root {
  --mc: #c8c8c8;/* main color */
  --ac: #EB5C20;/*accent color */
  --red: #dc2343;
}

@media screen and (min-width: 1201px) {
  :root {
    --width: 1920;
    --width02: 1200;
  }
}
@media screen and (min-width: 961px) {
  :root {
    --width: 1200;
    --width02: 1200;
  }
}
@media screen and (max-width: 960px) {
  :root {
    --width: 960;
    --width02: 1200;
  }
}
@media screen and (max-width: 480px) {
  :root {
    --width: 480;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 62.5%; font-family: "Noto Sans", sans-serif; }
html[lang="en"] { font-family: "Geologica", sans-serif; }
body { color: #333; font-weight: 400; }

main, header, footer, aside, section, article { display: block; }
img { width: 100%; height: auto; vertical-align: top; object-fit: contain; }

table { border-collapse: collapse; border-spacing: 0; }
address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
pre, code, kbd, samp, tt { font-family: monospace; line-height: 99%; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: bold; line-height: 1.25; }
em, strong { font-weight: bold; text-decoration: none; }
sub { font-size: x-small; vertical-align: baseline; }
article, section, div { position: relative; }

button { border: none; cursor: pointer; }

main p { font-size: min(calc((16 / var(--width)) * 100vw), 1.6rem); }


/* ---------- COMMON ---------- */
.inner { max-width: 1200px; margin-inline: auto; }
@media screen and (max-width: 1200px) {
  .inner { margin-inline: min(4.8vw, 32px); }
}

.bg--gray { background-color: var(--mc); }
.bg--orange { background-color: var(--ac); }
.bg--dark { background-color: #4d4d4d; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }

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

.fc--red { color: var(--red); }

.txt--link { text-decoration: underline; color: var(--ac); transition: all ease 0.3s; }
.txt--link:hover { text-decoration-color: var(--mc); }

a[target="_blank"] { background: url('../img/icon_blank.svg') 99% center no-repeat; background-size: 16px 16px; padding-right: 22px; word-break: break-all; }
#footer a[target="_blank"] { background-image: url('../img/icon_blank_wh.svg'); }
@media screen and (max-width: 960px) {
  #gnav ul li a[target="_blank"] { background-image: url('../img/icon_blank_wh.svg'); }
}

a[href^="mailto:"] { padding-right: 22px; background: url('../img/icon_email_wh.svg') 99% center no-repeat; background-size: 16px 16px; }
a[href^="mailto:"]:hover { background-image: url('../img/icon_email.svg'); }

.ls-min { letter-spacing: -0.5rem; }

@media screen and (min-width: 961px) {
  .sp { display: none; }
  .sp-w480 { display: none; }
}
@media screen and (max-width: 960px) {
  .pc { display: none; }
}
@media screen and (max-width: 960px) and (min-width: 481px) {
  .sp-w480 { display: none; }
}


/* ---------- LANGUAGE ---------- */
@media screen and (min-width: 961px) {
  body.home .lang { position: absolute; top: 3.5%; right: 3%; }
  .lang button { font-size: min(calc((18 / var(--width)) * 100vw), 1.8rem); color: var(--ac); background: none; border: none; padding-left: 16px; position: relative; margin-bottom: 6px; }
  .lang button::before { content: ''; display: inline-block; width: 8px; height: 8px; border-top: 1px solid var(--ac); border-right: 1px solid var(--ac); transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; left: -8px; transition: all ease 0.2s; }
  .lang.open button::before, .lang button:hover::before, .lang button:focus::before { transform: rotate(135deg) translateY(-50%); margin-top: -12px; }
  .lang.open button:hover::before, .lang.open button:focus::before { transform: rotate(-45deg) translateY(-50%) translateX(30%); margin-top: 0px; }
  .lang ul { visibility: hidden; opacity: 0; height: 0; transition: all ease 0.3s; position: absolute; top: 30px; left: 0; }
  .lang ul li { font-size: min(calc((16 / var(--width)) * 100vw), 1.6rem); }
  .lang ul li:not(:last-child) { margin-bottom: 6px; }
  .lang ul li a { color: #666; transition: color ease 0.3s; }
  .lang ul li a:hover, .lang ul li a:focus { text-decoration: none; color: var(--ac); }
  /* open */
  .lang.open ul { visibility: visible; opacity: 1; height: auto; }
  
  /* current */
  html[lang="ja"] .lang ul li:first-child > a,
  html[lang="en"] .lang ul li:nth-child(2) > a,
  html[lang="zh-cmn-Hans"] .lang ul li:nth-child(3) > a { color: var(--ac); text-decoration: underline; }
}
@media screen and (max-width: 960px) {
  .lang { display: none; visibility: hidden; pointer-events: none; }
}


/* ---------- HEADER ---------- */
/* navigation */
#gnav { font-size: min(calc((20 / var(--width)) * 100vw), 2rem); }
#gnav > ul {}
#gnav > ul > li { color: #fff; position: relative; }
#gnav > ul > li > a { color: #fff; text-decoration: none; position: relative; transition: all ease 0.2s; }
#gnav > ul > li > a::after { content: ''; display: block; width: 0%; height: 1px; background-color: var(--ac); position: absolute; bottom: -2px; left: 0; transition: all ease 0.45s; }
#gnav > ul > li > a:hover::after, #gnav > ul > li.current > a::after { width: 100%; }
#gnav > ul > li > a[href=""] { opacity: 0.35; pointer-events: none; color: #fff!important; }
#gnav > ul > li > a[href=""]::after { display: none; }

@media screen and (min-width: 961px) {
  .hamburger { display: none; }
  
  body.home #header { visibility: visible; margin-top: 2.5%; }
  
  #gnav > ul { display: flex; align-items: center; column-gap: min(calc((30 / var(--width)) * 100vw), 60px);  }
  #gnav > ul li.gnav__lang { display: none; visibility: hidden; }
  #gnav > ul > li > a:hover, #gnav > ul > li.current > a { color: var(--ac); }
}
@keyframes stickyHead {
  0% { transform: translateY(-100px); }
  100% { transform: translateY(0px); }
}
@media screen and (max-width: 960px) {
  .hamburger { border: 0;  background-color: var(--ac); padding: calc((22 / var(--width)) * 100vw) calc((18 / var(--width)) * 100vw); width: calc((80 / var(--width)) * 100vw); height: calc((80 / var(--width)) * 100vw); min-width: 44px; min-height: 44px; position: fixed; right: 0; top: 0; z-index: 10; overflow: hidden; }
  .hamburger > span { display: block; width: 100%; height: 2px; background-color: var(--mc); transition: all ease 0.3s; }
  .hamburger > span:first-child { margin-bottom: 6px; }
  .hamburger > span:nth-child(2) { margin-bottom: 6px; }
  .hamburger > span:nth-child(3) {}
  
  .hamburger.open >span:first-child { transform: rotate(45deg); }
  .hamburger.open >span:nth-child(2) { transform: rotate(135deg); margin-top: -8px; }
  .hamburger.open >span:nth-child(3) { transform: translateX(100vw); }
  
  #gnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; visibility: hidden; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--ac); color: #fff; transition: all ease 0.3s; z-index: 9; }
  #gnav.open { visibility: visible; opacity: 1; }
  
  #gnav > ul { display: flex; flex-wrap: wrap; align-items: center; text-align: center; }
  #gnav > ul > li { width: 100%; }
  #gnav > ul > li:not(:last-child) { margin-bottom: 2rem; }
  #gnav > ul > li > a:hover, #gnav > ul > li.current > a { color: #fff; }
  #gnav > ul > li > a::after { background-color: #fff; }
  
  /* current */
  html[lang="ja"] #gnav > ul > li.gnav__lang > a:first-child,
  html[lang="en"] #gnav > ul > li.gnav__lang > a:nth-child(2),
  html[lang="zh-cmn-Hans"] #gnav > ul > li.gnav__lang > a:nth-child(3) { font-weight: bold; text-decoration: underline; }
}


/* ---------- PAGE HEADER ---------- */
.page__header { background-color: var(--mc); padding: min(calc((32 / var(--width)) * 100vw), 32px) 0 min(calc((80 / var(--width)) * 100vw), 80px); }
.page__header #header { margin-bottom: calc((80 / var(--width)) * 100vw); }

.page__logo { width: calc((234 / var(--width)) * 100vw); height: calc((72 / var(--width)) * 100vw); max-width: 234px; max-height: 72px; margin-left: 2.86%; transition: all ease 0.45s; }
.page__ttl { text-align: center; margin-inline: auto; }
.page__ttl > small { display: block; color: var(--ac); font-size: min(calc((23 / var(--width)) * 100vw), 2.3rem); margin-top: min(calc((48 / var(--width)) * 100vw), 48px); }
body.overview .page__ttl { max-width: 562px; }
body.access .page__ttl { max-width: 373px; }
body.policy .page__ttl { max-width: 407px; }
body.exhibitors_only .page__ttl { max-width: 442px; }
body.vendor.list .page__ttl, body.vendor.detail .page__ttl { max-width: 407px; }
body.news_page .page__ttl { max-width: 141px; }

@media screen and (min-width: 961px) {
  .page__header #gnav { display: flex; align-items: flex-start;  }
  .page__header #gnav > ul  { margin-inline: auto; }
  .page__header .lang { margin-right: 2.86%; }
  
  /*.page__header { padding-top: 120px; }
  .page__header #header { position: fixed; top: 0; left: 0; padding: 20px 0; width: 100%; z-index: 10; transition: all ease-in-out 0.45s; }*/
  .page__header #header.sticky { background-color: rgba(77, 77, 77, 0.9); backdrop-filter: blur(2px); min-height: 84px; animation: headerSlide ease-in-out 0.65s forwards; }
  .page__header #header.sticky .page__logo { width: 140px; height: auto; }
  .page__header #header.sticky .page__header .lang { position: fixed; right: 0; top: 0; }
}
@media screen and (max-width: 960px) {
  .page__logo { position: absolute; top: 16px; left: 10px; }
  .page__ttl { width: 80%; }
}
@keyframes headerSlide {
  0% { transform: translateY(-100px); }
  100% { transform: translateY(0); }
}


/* ---------- BREADCRUMB ---------- */
.breadcrumb { width: 100%; padding: 10px min(4.8vw, 32px); background-color: var(--ac); color: #fff; font-size: min(calc((20 / var(--width)) * 100vw) , 1.4rem); }
.breadcrumb > ul { display: flex; align-items: center; justify-content: flex-end; }
.breadcrumb > ul > li { padding: 0 10px; }
.breadcrumb > ul > li > a { display: inline-block; color: #fff; text-decoration: none; position: relative; }
.breadcrumb > ul > li > a::after { content: ''; display: block; width: 0%; height: 1px; background-color: #fff; position: absolute; bottom: 0; left: 0; transition: all ease 0.3s; }
.breadcrumb > ul > li > a:hover::after { width: 100%; }
.breadcrumb > ul > li:not(:last-child)::after { content: "/"; display: inline-block; margin-left: 20px; vertical-align: middle; }
.breadcrumb > ul > li:last-child { font-weight: bold; }
@media screen and (max-width: 960px) {
  .breadcrumb { overflow-x: auto; }
}


/* ---------- MAIN ---------- */
body.page main { padding: 88px 0; }
body.access main { padding-bottom: 0; }


/* ---------- FOOTER ---------- */
#footer { background-color: #4d4d4d; color: #fff; text-align: center; padding: min(8vw, 40px) 0; }
#footer dl { font-size: min(calc((16 / var(--width)) * 100vw), 1.6rem); font-weight: 400; }
#footer dl dt {}
#footer dl dd {}
#footer dl dd > strong { font-size: min(calc((18 / var(--width)) * 100vw), 1.8rem); font-weight: 400; }
#footer a { display: inline-block; color: #fff; font-size: min(calc((16 / var(--width)) * 100vw), 1.6rem); text-decoration: none; margin-top: min(9.3333vw, 40px); }


/* ---------- ANIMATION ---------- */
.up { opacity: 0; }
.fadeup { animation: fadeup 0.75s forwards; }
.fadeup:first-child { animation-delay: 0s; }
.fadeup:nth-child(2) { animation-delay: 0.1s; }
.fadeup:nth-child(3) { animation-delay: 0.2s; }
.fadeup:nth-child(4) { animation-delay: 0.3s; }
.fadeup:nth-child(5) { animation-delay: 0.4s; }
.fadeup:nth-child(6) { animation-delay: 0.5s; }
.fadeup:nth-child(7) { animation-delay: 0.6s; }
.fadeup:nth-child(8) { animation-delay: 0.7s; }
.fadeup:nth-child(9) { animation-delay: 0.8s; }
.fadeup:nth-child(10) { animation-delay: 0.9s; }
.fadeup:nth-child(11) { animation-delay: 1s; }
@keyframes fadeup {
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }
}

.ttl--anm { position: relative; z-index: 1; }
.ttl--anm > img,
.ttl--anm > picture { opacity: 0; }
.ttl--anm.show > img,
.ttl--anm.show > picture { animation: fadeImg 1.2s forwards; animation-delay: 0.5s; }
.ttl--anm::before { content: ''; display: block; position: absolute; left: 0; top: 0; z-index: 1; height: 100%; width: 0%; background-color: var(--ac); opacity: 0; }
.ttl--anm.show::before { animation: obileft 1s forwards; animation-delay: 0s;  width: 100%; }
@keyframes obileft {
  0% { opacity: 0; width: 0%; }
  50% { opacity: 1; width: 100%; }
  100% { opacity: 0; width: 0; }
}
@keyframes fadeImg {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


/* ---------- UTILITY ---------- */
dl.dl--style01 {}
dl.dl--style01 > div:not(:last-child) { margin-bottom: min(calc((48 / var(--width)) * 100vw), 48px); }
dl.dl--style01 dt { font-size: min(calc((18 / var(--width)) * 100vw), 1.8rem); border-left: 10px solid var(--ac); padding-left: 10px; margin-bottom: 10px; }
dl.dl--style01 dd { font-size: min(calc((16 / var(--width)) * 100vw), 1.6rem); border-top: 1px solid #808080; padding-top: min(calc((36 / var(--width)) * 100vw), 36px); }

ul.list--circle { font-size: min((calc(16 / var(--width)) * 100vw), 1.6rem); }
ul.list--circle > li { text-indent: -1.5rem; padding-left: min((calc(16 / var(--width)) * 100vw), 1.6rem);; }
ul.list--circle > li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: #666; vertical-align: middle; margin-right: 10px; }
ul.list--circle > li:not(:last-child) { margin-bottom: 4px; }

.list--alphabet { list-style: lower-alpha; font-size: min((calc(16 / var(--width)) * 100vw), 1.6rem); margin-left: min((calc(16 / var(--width)) * 100vw), 1.6rem); }

.mgb10 { margin-bottom: 10px; }
.mgb20 { margin-bottom: 20px; }
.mgb30 { margin-bottom: 30px; }
.mgb40 { margin-bottom: 40px; }

.mgt0 { margin-top: 0!important; }

.flexbox { display: flex; }
.flexbox > .flexitem {}
.flexbox.col2 { display: flex; flex-wrap: wrap; column-gap: 2%; }
.flexbox.col2 > .flexitem { width: 49%; }
@media screen and (max-width: 960px) {
  .flexbox.col2 > .flexitem { width: 100%; }
  .flexbox.col2 > .flexitem:not(:last-child) { margin-bottom: 10px; }
}