html, body, span, h1, h2, h3, h4, p, a, img, small, 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%; scroll-behavior: smooth} body { font-size: 1.6rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; color: #000; line-height: 1.8; font-family: hiragino-kaku-gothic-pron, sans-serif;
font-weight: 300;
font-style: normal;}*, *: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; padding: 0}
section.leadarea{ margin-bottom: 30px}

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: 1px solid #4039A4; color: #000}
main a:hover, .judge-item a:hover{ color: #4039A4}
a i:hover{ text-decoration: none}
a img:hover, label:hover{ opacity:0.7}
.cap{ font-size: small}
.red{ color: #ff1a1a}
.gre{ color: #007180}
strong{ font-weight: bold}




/* -- Header / Footer
--------------------- */
header{ position: relative; /*height: 960px*//*810px*/}
/*.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%/*31%*/; 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}

.font-jpb, h3, .schedule{ font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 600; font-style: normal}
.leadarea{ font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 300; font-style: normal; margin-top: 20px}
/* -- headline / mainvisual
--------------------- */
h2{ text-align: center; margin: 50px 0 30px; line-height: 1.3; font-weight: bold; font-size: .9em}
h2 span{ font-size: 2.2em; font-family: apparat-semicond, sans-serif; font-weight: 700; letter-spacing: .1em; font-style: normal; display: block}
h2:not(.bg1 h2){ color: #4039A4}
.bg1 h2{ color: #93721E}
h3{ line-height:1.4; font-weight: bold}
h3.h3prize-judge{font-size: 1.2em}
h3.h3prize-judge span{ font-size: .7em; font-weight: normal; display: block}
h3.h3ps{ font-size: 3.7rem; margin: 0 3px 15px; line-height: 1.3}


.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.3); 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}

.themebox{ width: 80%; margin: 0 auto 80px; text-align: center; color: #fff; font-size: 1.1em}
.themebox p{ letter-spacing: .04em}
.brsp{ display: none}

/* -- 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}
.judge-item:hover{ transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.15)}
.judge-item img{ width: 100%; display: block}
.comments-btn{ margin: 20px 0; background: #4039A4; color: #fff; border: none; padding: 7px 14px; border-radius: 20px; cursor: pointer; font-size: 0.8em; transition: all 0.3s ease}
.comments-btn:hover{ transform: scale(1.05)}
.modal{ display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); animation: modalFadeIn 0.3s ease}
.modal-content{ background-color: #ebecfd; margin: 5% auto; padding: 30px; border-radius: 4px; width: 80%; max-width: 600px; max-height: 80vh; overflow-y: auto; animation: modalSlideIn 0.3s ease; font-size: .9em}
.close{ color: #4039A4; float: right; font-size: 3em; cursor: pointer; transition: color 0.3s; line-height: 0}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; }}
@keyframes modalSlideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; }}

.jgl{ display: block; color: #4039A4; font-size: .85em; line-height: 1.3; margin-bottom: 5px}
dl.comment dt{ color: #4039A4; margin: 1.5em 0 0; font-size: .9em; font-weight: bold}
dl.comment dd{ padding: 10px; background: #fff;}
a.marker{ font-size: 1.4em; background-color: rgba(73, 77, 188,  .6); font-weight: bold}
a.marker:hover{ background-color: rgba(73, 77, 188,  .8)}
a.marker:before{ font: var(--fa-font-solid); content: "\f10d"; margin-right: 7px; font-size: .5em; vertical-align: text-top}
a.marker:after{ font: var(--fa-font-solid); content: "\f10e"; margin-left: 7px; font-size: .5em; vertical-align: text-top}

.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%, #ffe300 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 10px}
.bg1{ background: #C2A03C;
background: linear-gradient(113deg, rgba(194, 160, 60, 1) 0%, rgba(246, 226, 115, 1) 100%);}
.bg2{ background: #E9EDEE}
@keyframes GradientBackground {
          0% {
            background-position: 0% 50%;
          }

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

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

      }
.bg4{ background: #7d77d6}

.bg0{ background: #6c85f5;
background: linear-gradient(90deg, rgba(123, 104, 255, 1) 0%, rgba(123, 127, 251, 1) 100%); color: #f3f2ff}


.guideline{ width: 87%; margin: 0 auto; border-bottom: 1px solid #4039A4; padding-bottom: 1em}
.guideline dt{ font-weight: bold; border-top: 1px solid #4039A4; 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; font-weight: bold}
.schedule dt, .schedule dd{ text-align: center; width: 100%} 
.schedule dt { margin: 1.4em 0 0}
.schedule dd{ font-size: 1.7rem}
.schedule dd strong{ font-size: 2.2em; color: #1a2793s}


@media screen and (min-width: 980px) {
header{width: 980px; margin: 0 auto; padding: 0}
/*h1{ top: 38.5%}*/
section{width: 980px}
}
/*@media screen and (max-width: 979px) { header{ height: calc(700 / 979 * 100vw)}}*/
@media (max-width: 640px) {
section.leadarea{ margin-bottom: 20px}
h2 span{ font-size: 1.8em}
.col1 li{ width: 100%; padding: 5%}
.col2 li{ width: 47.5%}
.col1 li{ margin: 0 0 6%;}
.step img, .steplastnote{ width: 60%}
.themebox{ width: 100%; font-size: 1.05em; text-align: left}
.brsp{ display: block}
	h3.h3ps{ font-size: 2em}
.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: 8}
.col1 li:nth-child(8){ order: 7}
.col1 li:nth-child(9){ order: 9}
}
@media (max-width: 768px) {
h3.h3prize-judge{ font-size: 1.1em}
.guideline{ width: 100%}
.guideline dd{ margin-left: 0}
.schedule dd strong{ font-size: 1.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;
*/
}




.einfo{ border: 2px solid #7d77d6; padding: 2.6%; margin: 40px auto; background: #f2f0ff}

/* 固定フッターバー */
/*
.fixed-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0; border-top: 1px solid #3e08ff;
background: #dbae1a;
background: linear-gradient(90deg, rgba(219, 174, 26, 1) 0%, rgba(255, 230, 66, 1) 50%, rgba(189, 133, 28, 1) 100%);
  padding: 10px 10px calc(12px + env(safe-area-inset-bottom));
  z-index: 100; text-align: center;
}
.fixed-bar a:link{ color: #080B38; text-decoration: none}
.apply-btn { 
  flex: 1;
  color: #fff;
  border: none;
  padding: 14px;
  font-size: 16px;
  cursor: pointer; line-height: 1;font-weight: bold
}
.apply-btn span{ border: 1px solid #ccc; padding: 5px; margin-left: 6px; border-radius: 6px; font-weight: bold}
*/


/* ボタンに隠れないようにページ下部に余白 */
/*
body {
  padding-bottom: 80px;
}
*/