/*
 CSS for the main interaction
*/

*,
*:before,
*:after {
  box-sizing: border-box;
}

/* ----------------------------------------------------------------- */
body {
  font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Verdana, Geneva, sans-serif;
  color: #000000;
  font-weight: 500;
  margin: 0%;
  width: 100%;

}
/* ----------------------------------------------------------------- */
section {width: 100%; padding-top: 5%; margin-bottom: 10%; } 

.row {margin: 5% 0% 0% 0%; display: flex; flex-direction: row;}
sup {font-size: clamp(10px, 15vw, 14px);}
.navbar {
  overflow: hidden;
  background-color: #c6d3e1;  
  position: fixed;
  top: 0;     padding: 1% 0;
  width: 100%; }

.navbar a {
  float: left;
  display: block;
  color:#003d79;
  text-align: center;
  padding: 1%; margin: 0% 0.5%;
  text-decoration: none; line-height: 1;
  font-size: clamp(10px, 5vw, 16px); font-weight: 600;
 }

.navbar a:hover {
  color: #fff; }

.navbar a.active { background-color: transparent;color: #e60012; padding: 0.5% 1%;}

.navbar .icon {display: none; color: #e60012 !important;}

.column-header{
  float: left;
  width: 25%;
  padding-top: 1%;
  text-align: center;
  cursor: pointer;
} 
.column-title{
  float: left;
  width: 50%;
  padding: 0%;
  text-align: center;
  cursor: pointer;
}  

.logo-eras {width: 50%; padding: auto; margin: 5%;}
.logo-award {width: 50%; padding: auto; margin: 5%;}

h2 {
  background: linear-gradient(to right, #37b6ef, #003d79, #e60012, #003d79,#37b6ef);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-weight: bold;
  text-transform:uppercase;
  font-size: clamp(20px, 10vw, 40px);
  line-height: 1.1em;
  text-align: center;
}

h3 {
  font-size: clamp(20px, 25vw, 45px);
  text-align: center;
}
h3 span {font-size: clamp(20px, 25vw, 20px);}
.special-note-text {
  color: #31b736 !important; 
  padding: 1%;
  text-decoration: line-through;
}

/* ----------------------------------------------------------------- */
.sub-cont {width: 100%; padding: 0.5%;}
.sub-cont .intro {width: 100%; padding: 0 25%;}
.sub-cont .intro p {font-size: clamp(12px, 14vw, 18px); text-align: justify;}

.sub-cont .intro ul li {list-style-type: none;}
.sub-cont .intro ul li p {font-size: clamp(12px, 14vw, 17px); text-align: left;}
.sub-cont .intro ul li p  span {font-size: clamp(12px, 14vw, 20px); text-align: left; color: #e60012; font-weight: 600;}
.sub-cont .intro ul li p a {color: #31b736; text-decoration: none; font-weight: 600;}
.sub-cont .intro ul li p a:hover {color: #e60012;}
/* ----------------------------------------------------------------- */

.middle-cont {width: 100%;}
.middle-cont .cont {padding: 0% 20%;}
.middle-cont .cont p {font-size: clamp(12px, 14vw, 18px); text-align: justify;}
.middle-cont .cont p a {color: #e60012; text-decoration: none; font-weight: 600;}
.middle-cont .cont p a:hover {background-color: #ee969e43; padding: 1% 0% ;} 
.middle-cont .cont ul li {
  display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0rem;
}
.middle-cont .cont ul li p {font-size: clamp(12px, 14vw, 17px); text-align: left;}
.middle-cont .cont ul li p span {font-size: clamp(12px, 14vw, 20px); text-align: left; color: #e60012; font-weight: 600; }
.middle-cont .cont ol {list-style-type: decimal;}
.middle-cont .cont ol li {margin-bottom: 2%; font-size: clamp(12px, 14vw, 18px);}
.middle-cont .cont dl dt {color: #e60012; background-color: #e600120f; margin: 2% 0%; padding: 1% 0%; font-size: clamp(12px, 14vw, 20px); font-weight: 600;}
 dd::before {content: "⮞ ";}

.middle-cont .cont .apply-btn {
  width: 45%; outline: none; background-color:#e60012; border: none; border-radius: 15px; 
  box-shadow: 0 9px #999; margin-left: auto; margin-right: auto; padding: 0; cursor: pointer; }
.middle-cont .cont .apply-btn p  {font-size: clamp(12px, 5vw, 20px); text-align: center; padding: 1%;}
.middle-cont .cont .apply-btn p a {color: #fff; font-weight: 600; text-decoration: none;}
.middle-cont .cont .apply-btn:hover {background-color: #ee3948;}

.middle-cont .cont .apply-btn.disabled {
  cursor: default;
  pointer-events: none;
}

.middle-cont .cont .apply-btn.disabled p a {
  cursor: default;
}

.middle-cont .cont .card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 75%;
  margin: auto; padding: 5% 10%;
  text-align: center;
}
.middle-cont .cont .card h1 { color: #e60012; padding-bottom: 5%; font-size: clamp(12px, 5vw, 28px);}
.middle-cont .cont .card p {text-align: center;}


.middle-cont .cont .jushosha {padding: 0% 23%; background-color: #999;}
.middle-cont .cont .winner-list {width: 100%; display: block;}
.middle-cont .cont .winner-list .list-cont {display: block; width: 100%; margin: 5% auto 0;}

.middle-cont .cont .winner-list .list-cont .win-number {width: fit-content; margin: auto;}


.middle-cont .cont .winner-list .list-cont .win-number p {font-size: 2rem; font-weight: 600; text-align: center; color: #31b736;}
.middle-cont .cont .winner-list .list-cont .win-number p span {font-size: 1.5rem;}
.middle-cont .cont .winner-list .list-cont .win-number img {width: 100%; margin: auto;}
.middle-cont .cont .winner-list .list-cont .win-desc h3 {font-size: clamp(12px, 14vw, 18px); font-weight: 500;}
.middle-cont .cont .winner-list .list-cont .win-desc h4 {font-size: clamp(12px, 14vw, 17px); font-weight: 600; text-align: center;}
.middle-cont .cont .winner-list .list-cont .win-desc h4 span {font-size: clamp(12px, 14vw, 25px);}

.middle-cont .cont .sponsorship {padding: 0% 23%; background-color: #c6d3e166; padding:  3%; display: flex; flex-direction: column;}
.middle-cont .cont .sponsorship .sponsor-info {width: 100%; margin: auto; display: flex; flex-direction: column;}
.middle-cont .cont .sponsorship .sponsor-info .sponsor-img {width: 200px; margin: 5% auto 0; padding: 0; align-content: center;}
.middle-cont .cont .sponsorship .sponsor-info .sponsor-img img {width: 100%; margin: auto; padding: 0;}
.middle-cont .cont .sponsorship .sponsor-info .sponsor-name p {font-size: clamp(12px, 14vw, 20px); text-align: center; font-weight: 600; color: #003d79;}

.middle-cont .cont .judge_panel {width: 100%; margin: auto; padding: 0%; text-align: center;}
.middle-cont .cont .judge_panel h3 {font-size: clamp(12px, 14vw, 25px); font-weight: 600; margin-bottom: 0;}
.middle-cont .cont .judge_panel h4 {font-size: clamp(12px, 14vw, 18px); font-weight: 500; margin-bottom: 5%; margin-top: 0;}

/* ----------------------------------------------------------------- */

/* ----------------------------------------------------------------- */
.footer{
  position: fixed; bottom: 0; width: 100%; background-color: #c6d3e1; padding: 0%;}
  .footer p {font-size: clamp(10px, 15vw, 12px); font-weight: 600; text-align: center; color: #003d79;}




/* BREAKPOINTS */
/* ##################################### (max-width: 992px) */
@media(max-width: 992px){
  .row {margin: 10% 0% 0% 0%;}
  .middle-cont .cont .apply-btn {width: 65%; }
  
}

/* ##################################### (max-width: 768px) */
@media(max-width: 768px) {
  section {margin-bottom: 15%; }
  .row {display: flex; flex-direction: row; margin: 10% 0%  0% 0% ;}
  .column-header {width: 45%;display: block;} 
  .column-title {width: 100%; display: block;} 
  .logo-eras {width: 75%;}
  .logo-award {width: 90%; padding: auto; margin: 5%;}
  h2 {font-size: clamp(10px, 10vw, 40px);}
  h3 {font-size: clamp(10px, 15vw, 20px)}

  .column-header{
    float: left;
    width: 25%;
    padding-top: 1%;
    text-align: center;
    cursor: pointer;
  } 
  .column-title{
    float: left;
    width: 50%;
    padding: 0%;
    text-align: center;
    cursor: pointer;
  }   
    .sub-cont .intro {width: 100%; padding: 0 3%;}
    .sub-cont .intro p {font-size: clamp(12px, 14vw, 17px);}
  
    .middle-cont .cont {padding: 0% 3%;}
}

  /* HEADER */ 

@media (min-width: 250px) and (max-width: 1023px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {float: right; display: block;}
  .navbar.responsive .icon {position: relative; right: 0; bottom:0;  float: right; color: #e60012; text-decoration: none;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left; 
    margin: 2%;
  }
}  


/* ##################################### (max-width: 468px) */
@media(max-width: 468px){
  body {font-size:  clamp(10px, 12vw, 15px);}
  .sub-cont {padding: 0.5%} 
  .row {display: flex; flex-direction: row; margin: 10% 0%  0% 0% ;}
  .column-header {width: 45%;display: block;} 
  .column-title {width: 100%; display: block;} 
  .logo-eras {width: 75%;}
  .logo-award {width: 90%; padding: auto; margin: 5%;}
  h2 {font-size: clamp(10px, 10vw, 20px);}
  h3 {font-size: clamp(10px, 15vw, 40px);}

  .sub-cont .intro {width: 100%; padding: 0 3%;}
  .sub-cont .intro p {font-size: clamp(12px, 14vw, 17px);}

  .middle-cont .cont {padding: 0% 3%;}
  .middle-cont .cont p {font-size: clamp(12px, 14vw, 16px); }

  .middle-cont .cont ul{padding-left: 2%;}
  .middle-cont .cont ol {padding-left: 5%;}
  .middle-cont .cont ol li {font-size: clamp(12px, 14vw, 17px);}

  .middle-cont .cont dl dt {font-size: clamp(12px, 14vw, 15px); padding-left: 0%; margin-bottom: 5%;}
  .middle-cont .cont dl dd{padding-left: 0%; margin-inline-start:3%}

  .middle-cont .cont .card {max-width: 100%; padding: 5%; }

  .middle-cont .cont .winner-list .list-cont .win-number {width: fit-content;}

  .middle-cont .cont .winner-list .list-cont .win-desc h3 {font-size: clamp(12px, 14vw, 16px);}
  .middle-cont .cont .winner-list .list-cont .win-desc h4 {font-size: clamp(12px, 14vw, 14px);}

  .middle-cont .cont .sponsorship {flex-direction: column;}
  .middle-cont .cont .sponsorship .sponsor-info .sponsor-name {margin: 0 auto 10%;}
  
}