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/*, .step1 li:last-child:hover*/{ opacity:0.7}
.cap{ font-size: small}
.red{ color: #ff1a1a}
.gre{ color: #007180}
strong{ font-weight: bold}

/* -- Header / Footer
--------------------- */
header{ position: relative; height: 650px/*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: 38%/*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}


.accbox { margin: 0; padding: 0; max-width:100%; text-align: left}
.accbox label { display: block; cursor :pointer; transition: all 0.5s; background: #4039A4; color: #fff; margin: 1.5px 0; padding : 15px}
.accbox input { display: none}
/*.svg-inline--fa{ margin-right: 7px}*/
.accbox .accshow { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.5s}
.cssacc:checked + .accshow { height: auto; padding: 10px 0; opacity: 1; marrgin-bottom: 1em}

.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}

.step { margin:20px auto 10px/*50px*/; width: 80%}
.step li:not(last-child){ margin: 0 auto 50px; text-align: center; width: 100%; position: relative; border: 2px solid #4B20E3; padding: 3%; border-radius: 6px; background: #fff}
.step li:not(:last-child):after{ /*display: inline-block;*/ text-rendering: auto; -webkit-font-smoothing: antialiased; font: var(--fa-font-solid); content: "\f063"; font-size: 2em; color: #4B20E3; position: absolute; bottom: -40px; left: 50%; margin-left:-15px}
.step li:last-child{ margin: 0 auto; position: relative}
.step1 li:last-child{ /*background: #4B20E3; */border: none; border-radius: 50px; display: block; width: 70%; padding: 4.5%; background: background: #582ef0;
background: linear-gradient(180deg, rgba(88, 46, 240, 1) 0%, rgba(75, 32, 227, 1) 100%);}


.step1 li:last-child a{color: #fff; border: 0; font-weight: bold}
/*.step1 li:last-child a:hover{opacity: .8}*/
.step1 li:last-child a::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: auto; content: ""; background-color: transparent}
.step1 li:last-child:hover{ bbackground: #582ef0;
background: linear-gradient(0deg, rgba(88, 46, 240, 1) 0%, rgba(75, 32, 227, 1) 100%);}


.step img, .steplastnote img{ width: 300px}
.fa-solid{ font-size: 1.8em; margin-right: 5px; vertical-align: middle}
.ent-img{ display: block; margin: 10px auto 0}
.enote{ text-align: center; font-size: .88em; font-weight: bold}

.steplastnote { display: flex; gap: 20px 1%; margin: 0 auto 50px; align-items: center; width: 50%; font-size: .8em; line-height: 1.4; color: #333}
.steplastnote img{ width: 250px}

.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}
}
@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}
.step1 li:last-child{ border-radius: 60px; width: 90%; padding: 6% 0}
.step, .guideline{ width: 100%}
.guideline dd{ margin-left: 0}
.schedule dd strong{ font-size: 1.6em}

.steplastnote { width: 80%; font-size: .8em; flex-direction: column-reverse}
.steplastnote img{ width: 250px}

}


@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;
*/
}


.slider-wrap{ overflow: hidden}
.slider-track{ display: flex; gap: 5px; width: max-content; animation: scroll 30s linear infinite}
.slider-track img { width: 210px; height: 280px; object-fit: cover; flex-shrink: 0}
@media (max-width: 768px) {.slider-track img { width: 132px; height: 176px}}
@keyframes scroll {
  to { transform: translateX(calc(-215px * 15))} /* 画像幅 + gap */
}
@media (max-width: 768px) {
  @keyframes scroll {
    to { transform: translateX(calc(-137px * 15)); }
  }
}

/* 固定フッターバー */
.fixed-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0; border-top: 1px solid #3e08ff;
/*background: #000;*/
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;
}