@import url("/js/slick/slick.css");
@import url("/js/slick/slick-theme.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Serif+JP:wght@500;700;900&display=swap');

body { background-color: #142E70; color: #FFF;}
main { margin-bottom: 0; padding-bottom:0 }

/* header */
div.spHeader > h1 { background-image: url(./image/mainView6.jpg) }

/* CONTENTS */
article {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  background-repeat: no-repeat;
  background-position: center top;
}
section { position: relative; font-family: Noto Sans JP, sans-serif; font-style: normal; font-weight: 300 }
.content { margin: 0 auto; max-width: 1000px; font-size: 1.071rem; line-height: 1.8 }
.contInner {
  border-top: #344787 1px solid;
  border-bottom: #344787 1px solid;
  padding: 20px;
  margin-top: 60px;
}
.topToFix { background-color: #222 }
a[name] { margin-top: -100px; padding-top: 100px }
/* ========== MOVIE ========== */
.movieWrap { position: relative; width: calc(100% - 10px); max-width: 700px; margin: 0 auto }
.iframeWrap { height: 0; padding-bottom: 56.25% }
.iframeWrap iframe { position: absolute; top: 0; left: 0 }
/* ========== G-Font ========== */
.notoSans      { font-family: 'Noto Sans JP', sans-serif }
.notoSansMin   { font-family: 'Noto Serif JP', serif }
.notoSans.reg  { font-weight: 400 }
.notoSans.med  { font-weight: 500 }
.notoSans.bol  { font-weight: 700 }
.notoSans.bla  { font-weight: 900 }
.notoSansMin.s500  { font-weight: 500 }
.notoSansMin.s700  { font-weight: 700 }
.notoSansMin.s900  { font-weight: 900 }
.full-image img { max-width: 100% }


/* 見出し */

h2 {
  margin: 0 0 40px;
  border: none;
  padding: 0;
  min-height: inherit;
  font-size: 34px;
  font-weight: bold;
  line-height: 1.2;
  color: #FFF;
  background-color: transparent;
}
#bqs2021 h2 { font-family: 'Noto Serif JP', serif; text-align: center }
#about h2 span { color: #99E5FF; font-size: 44px }
#prize h2 { text-align: left; max-width: 640px; margin-left: auto; margin-right: auto }
#prize h2 span { color: #FF0; font-size: 60px; line-height: 1.2 }
#award h2 { background-image: url(./image/awardH2.png); background-position: center top; min-height: 101px; margin-top: -45px }
h3 {
  margin: 0 0 10px;
  padding: 0;
  min-height: initial;
  font-size: initial;
  line-height: 1.5;
  position: relative;
  border: none;
  color: #FFF;
}
.titleA { font-size: 1.428rem; line-height: 60px; font-weight: 400; color: #0198F1; border-bottom: #344787 1px solid }
.titleB { background-color: #344787; text-align: center; color: #FFF; font-size: 22px; line-height: 1.2; font-weight: 700; margin: 0 auto 10px; padding: 10px 15px; display: inline-block }
.minTitle { font-family: 'Noto Serif JP', serif; font-weight: 900; line-height: 1.4; display: inline-block; margin: 0 auto; text-align: left }
.f30 { font-size: 30px }
.f34 { font-size: 34px }
.f40 { font-size: 40px }
.f48 { font-size: 48px }
.yellow { color: #FF0 }
.red { color: #ff4702 }


/* NOMINATION */
article#nomination table,article#nomination td,article#nomination th { border-spacing: 0; border: none; padding: 0; border-collapse: collapse }
article#nomination { background: #112660 url(./image/nominationBg.png) no-repeat center top; background-size: auto }
article#nomination div.gamewrap { width: 100%; max-width: 700px; margin: 0 auto }
article#nomination div.gamewrap a,
article#nomination div.gamewrap > div { color: #FFF; text-decoration: none; display: flex; border-bottom: #344787 1px solid; padding: 10px 0; box-sizing: border-box }
article#nomination div.gamewrap span { display: inline-block; width: 23%; box-sizing: border-box }
article#nomination div.gamewrap span:first-of-type { padding-left: 3%; width:15% }
article#nomination div.gamewrap span:nth-of-type(2) { padding-left: 0 }
article#nomination div.gamewrap span:nth-of-type(3) { padding-left: 5%; width: 55% }
#pickup .flexBox img { width: 32.4%; margin-bottom: 15px }
article#nomination .minTitle table { width: 100%; font-family: 'Noto Sans JP', sans-serif }
article#nomination .minTitle table th,
article#nomination .minTitle table td { border: #99E5FF 1px solid; padding: 10px; font-weight: 500 }
article#nomination .minTitle table th { background-color: #99E5FF; color: #000E41 }

/* PRIZE */
article#prize {
  background:
  url(./image/prizeBg2.png) center top no-repeat,
  url(./image/prizeBg.png) center top repeat-y;
  background-color: #000F42;
}
article#prize section { min-height: 1100px }
.yokoku {
  margin-top:min(2vw,60px);
  border:#00AAEE 4px solid;
  padding: min(1.8vw,30px);
  color: #FF0;
  font-size:min(4.5vw,22px);
  text-align:center;
}

/* AWARD */
article#award {
  background: url(./image/awardBg.png) center top no-repeat, -moz-linear-gradient(top,  #112660 0%, #071129 50%, #071129 100%);
  background: url(./image/awardBg.png) center top no-repeat, -webkit-linear-gradient(top,  #112660 0%,#071129 50%,#071129 100%);
  background: url(./image/awardBg.png) center top no-repeat, linear-gradient(to bottom,  #112660 0%,#071129 50%,#071129 100%);
  padding-bottom: 0;
}
article#award .awardDoc > h3 { font-size: 2.857rem; font-weight: 900 }
article#award .awardDoc > h4 { font-size:1.875rem; color: #0298F1; margin-bottom: 30px }
.awardDoc { background: url(./image/awardDocBg.png) center bottom -200px no-repeat; padding-bottom: 100px }
.fanComment p { border-bottom: #344787 1px solid; text-align: left; padding: 1em }

/* WINNER */
article#winner {
  background: #071129 url(./image/awardDocBg.png) center top -250px no-repeat;
  padding-bottom: 60px;
}
.winnerDoc { background-color: #112660; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; text-align: center; padding: 10px; font-size: 18px; line-height: 1.6; margin: 0 0 40px; max-width: 49%; box-sizing: border-box }
.winnerDoc img { width: auto; max-width: 100% }
.winnerDoc .titleA { font-size: 1.142rem; line-height: 40px }
.inTitle { background-image: url(./image/winnerTitleBg.png); background-size: 100% auto; font-size: 28px; line-height: 50px; font-weight: 900; color: #000E41 }
.inTitle > span { font-size: 22px }

/* SPONSOR */
article#sponsor { background-color:#000F42 }


/*
==================================================
671～1040
==================================================
*/
@media screen and ( max-width:1040px) {
a[name] { display: block; margin-top:-80px; padding-top:80px }
div.spHeader > h1 { margin-top: 80px }
/* contents */
article { padding-top: 50px; padding-bottom: 80px; background-size: auto 60px }
.content { margin: 0 4%; padding-bottom: 0 }
h2 { font-size: 24px; margin-bottom: 20px }
#about h2 span { font-size: 28px }
#prize h2 span { font-size: 30px; line-height: 1.2 }
/* PRIZE */
article#prize { background-size: 100% auto }
article#prize .flexBox { display: block }
article#prize .flexBox img { display: block; margin: 0 auto 10px }
/* AWARD */
article#award { background-size: 100% auto }
article#award .awardDoc > h3 { font-size: 2.142rem }
article#award .awardDoc > h4 { font-size:1.428rem }
.awardDoc { background-size: 100% auto; background-position: center bottom -150px }
.winnerDoc { max-width: inherit; box-sizing: border-box }
/*671～1039 END*/
}
/*
==================================================
～670
==================================================
 padding-bottom:0*/
@media screen and ( max-width:670px ){
a[name] { display: block; margin-top:-50px; padding-top:50px }
/* header */
div.spHeader > h1 { background-image:url(./image/mainView6_sp.jpg); height: 100vw; margin-top: 50px }
/* contents */
article { padding-top: 50px; padding-bottom: 50px; background-size: auto 45px }
.content { margin: 0 2.5%; padding-bottom: 0 }
.contInner { padding: 10px; margin-top: 60px }
/*TITLE*/
.f30 { font-size: 22px }
.f34 { font-size: 26px }
.f40 { font-size: 28px }
.f48 { font-size: 30px }
/* NOMINATION */
article#nomination div.gamewrap a { padding: 5px }
article#nomination div.gamewrap a,article#nomination div.gamewrap div { display: block }
article#nomination div.gamewrap span { width: auto; padding-right: 5px }
article#nomination div.gamewrap span:first-of-type { padding-left: 5px; width:20% }
article#nomination div.gamewrap span:last-of-type { padding-left: 0 }
article#nomination div.gamewrap span:nth-of-type(2) { padding-left: 5px }
article#nomination div.gamewrap span:nth-of-type(3) { width: auto }
#pickup .flexBox { display: block; text-align: center }
#pickup .flexBox img { width: auto; max-width: 100% }
/* PRIZE */
article#prize { background-size: 100% auto }
article#prize .flexBox { display: block }
article#prize .flexBox img { display: block; margin: 0 auto 10px; width: auto; max-width: 100% }
article#prize .button-blue .pd20 { padding: 10px !important }
/* AWARD */
article#award { background-size: 100% auto }
article#award .awardDoc > h3 { font-size: 2rem }
article#award .awardDoc > h4 { font-size:1.3rem }
.awardDoc { background-size: 100% auto; background-position: center bottom -150px }
.winnerDoc { max-width: inherit; box-sizing: border-box }
.f125 { font-size: 100% }
/*～670 END*/
}