html, body, span, h1, h2, h3, h4, h5, h6, p, a, img, small, i, center, dl, dt, dd, ol, ul, li, label, footer, header, section{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline}html { font-size: 62.5%;} body { font-size: 1.6rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; color: #000; line-height: 1.8; font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif}*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box}
header, footer, main{ width: 100%; padding: 0; margin: 0 auto; overflow: hidden;clear: both}
section{ width: 86%; margin: 0 auto 60px; overflow: hidden; clear: both}
ul{ list-style: none}
p{ margin-bottom: 20px}
.bg4 a{ color: #fff; margin: 0 2px; border-bottom: 1px solid #fff}
.bg4 a:hover{ color: #fff}
main a, .judge-item a{ text-decoration: none; border-bottom: 2px solid #2c6bae; color: #000}
main a:hover{ color: #2c6bae}
a i:hover{ text-decoration: none}
a img:hover, label:hover{ opacity:0.7}
.cap{ font-size: small}
.red{ color: #ff1a1a}
.gre{ color: #007180}

/* -- Header / Footer
--------------------- */
header{ position: relative; height: 960px}
.hbox{ position: absolute; top: 0; left: 0; z-index: 1; animation: fadeIn 1s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal}
@keyframes fadeIn{ 0% {opacity: 0} 100% {opacity: 1}}
.logo{ position: absolute; top: 2%; left: 8%; z-index: 2; max-width: 14vw}
h1{ position: absolute; left: 20%; top: 26%; z-index: 5}
.hbox img, h1 img{ width: 100%}
footer{ font-size: small; padding: 30px 5% 0/*; background: #f4f4f4;*/ }
footer a{ color: #000; text-decoration: none}

/* -- headline / mainvisual
--------------------- */
h2{ text-align: center; margin: 50px 0 30px}
h2 span{ font-size: 4em; font-family: nobel, sans-serif;font-weight: 400;font-style: normal; display: block; line-height: 1}
h3{ line-height:1.4; font-weight: bold; font-size: 1.2em}
h3 span{ font-size: .7em; font-weight: normal; display: block}

.lead{ margin: 30px 0 0}
.col{ display: flex; display: -webkit-flex; width: 100%; flex-wrap: wrap}
.col1{ flex-direction: row; gap:4%}
.col1 li{ margin: 0 0 4%; padding: 3%; width: 48%; background:rgba(255,255,255,0.4); position: relative}
.col1 li::before, .col1 li::after { position: absolute; width: 25px; height: 40px; content: ''; border-width: 8px 0 0 8px; border-style: solid; border-color: #fff}
.col1 li::before { top: 0; left: 0}
.col1 li::after { right: 0; bottom: 0; -webkit-transform: scale(-1,-1); transform: scale(-1,-1)}
.col1 li strong{ margin-top: 1em; font-size: 1.4em; display: block}
.col2{ gap: 5%; position: relative}
.col2 li{ margin: 0 0 5%; width: 30%; color: #000}
.col2 li img{ width: 100%; display: block; padding-bottom: .5em}

/* -- Judge Section Enhanced
--------------------- */
.judge-item{ margin: 0 0 5%; width: 30%; position: relative; overflow: hidden; background: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: center; padding-bottom: 15px}
/*.judge-item:hover{ transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.15)}*/
.judge-item img{ width: 100%; display: block}
.judge-item a:hover{ color: #666}


.jgl{ display: block; color: #007584/*#555*/; font-size: .85em}

.bg4 h2{ color: #5ea8b2}
.bg1 h2{ color: #cec300}
.bg2 h2{ color: #48a3ae}


.info{ text-align: center; margin: 50px 0 0; font-size: .9em}
.info span{ display: inline-block; margin: 0 auto; line-height: 1; background: linear-gradient(transparent 50%, #f7ff00 50%); font-weight: bold; border-radius:6px; font-size: 3.6em}
.colpass{ gap: 10px 1%}
.colpass li{ width: 15.6%}
.colpass img{ width: 100%; vertical-align: bottom}
.colpass a{border: none}
.colpass{ margin: 20px 0 50px}
h2.h2ps{ font-size: 3em; font-weight: bold; color: #007a89; margin: 20px 0}
h3.h3ps{ text-align: center; font-size: 1.8em; font-weight: bold}

.bg1, .bg2, .bg4{ padding: 0 0 20px}
.bg1{ background: linear-gradient(45deg, #fff43a, #F7F098); background-size: 400% 400%; animation: GradientBackground 10s ease infinite;}
@keyframes GradientBackground {
          0% {
            background-position: 0% 50%;
          }

          50% {
            background-position: 100% 50%;
          }

          100% {
            background-position: 0% 50%;
          }

      }
/*.bg1{ background: #fff43a}
.bg3{ background: #f4f4f4} */
.bg2{ background: #dbf0f2}
.bg4{ background: #007a89; color: #fff}


.fa-solid{ font-size: 1.8em; margin-right: 5px; vertical-align: middle}

.guideline{ width: 87%; margin: 0 auto; border-bottom: 1px solid #007a89; padding-bottom: 1em}
.guideline dt{ font-weight: bold; border-top: 1px solid #007a89; padding: 1em 0 10px; margin-top: 1em}
.guideline dd{ margin-left: 1em}
.guideline dd li{ padding-left: 1em; text-indent: -1em; margin-bottom: .7em}
.schedule{ font-size: 1.1em}
.schedule dt, .schedule dd{ text-align: center; width: 100%} 
.schedule dt { margin: 1.4em 0 0; font-weight: bold;}
.schedule dd{ font-size: 120%}
.schedule dd strong{ color: yellow; font-size: 140%}


@media screen and (min-width: 980px) {
header{width: 980px; margin: 0 auto; padding: 0}
h1{ top: 27%}
section{width: 980px}
}
@media screen and (max-width: 979px) { header{ height: calc(960 / 979 * 100vw)}}
@media (max-width: 640px) {
h2 span{ font-size: 3em}
.col1 li{ width: 100%; padding: 5%}
.col2 li{ width: 47.5%}
.col1 li{ margin: 0 0 6%;}
.bg1, .bg2{ padding: 0 0 10px}
.left img{ width: 60%}
.colpass li{ width: 32.6%}
}
@media (min-width: 641px) {
.col1 li:nth-child(1){ order: 1}
.col1 li:nth-child(2){ order: 3}
.col1 li:nth-child(3){ order: 5}
.col1 li:nth-child(4){ order: 2}
.col1 li:nth-child(5){ order: 4}
.col1 li:nth-child(6){ order: 6}
.col1 li:nth-child(7){ order: 7}
.col1 li:nth-child(8){ order: 9}
.col1 li:nth-child(9){ order: 8}
}
@media (max-width: 768px) {
h3{ font-size: 1.1em}
.guideline{ width: 100%}
.guideline dd{ margin-left: 0}
.info span{ font-size: 2.6em}
h2.h2ps{ font-size: 1.8em}
h3.h3ps{ font-size: 1.6em}
}


@keyframes coming {
  0% {
  opacity: 0;
  transform: translateX(-150px);
/*    left: 1500px;*/
  }
    50% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(-15px);
  }
  100% {
    transform: translateX(0);
  }
    20%,100% {
    opacity: 1;
  }
}

#ng { animation: coming 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
/*
  animation: coming 0.5s 1;
  animation-timing-function: ease;
*/
}