@charset "UTF-8";
/* CSS Document */
/* Default --------------------------*/
:link, :visited, :active { text-decoration: none; }

a:hover { text-decoration: none; color: #ffff00; }
@media screen and (max-width: 640px) { a:hover { text-decoration: underline; } }

html, body, header, footer, div, img, nav, p, a, ul, li, h1, h2, h3, hr { margin: 0; padding: 0; border: none; }

ul { list-style: none; }

a { outline: none; color: #ffffff; }

hr { border: 0; height: 1px; background-color: #F9E208; color: #F9E208; margin: 10px auto; }

/* Layout -----------------------*/
html { width: 100%; overflow: scroll; text-align: left; }

#content { width: 1000px; margin: 0 auto; background-color: #08704a; letter-spacing: 0.1em; }
@media screen and (max-width: 640px) { #content { width: 100%; }
  #content button { top: 45px; }
  #content button .sub { color: #ffd046; } }

.banner { margin:auto; max-width: 380px; }
.banner img { width: 100%; }
@media screen and (min-width: 640px) {
.banner img { width: 100%; } 
}
#main #menu { margin: 0 auto; padding: 0; height: 785px; background-image: url(../img/menu_bg.jpg); }
@media screen and (min-width: 640px) {
#main .logo{ position: relative; right:20px; top:2px;} 
}
@media screen and (max-width: 640px) { #main #menu { width: 100%; font-size: 14px; background-image: url(../img/menu_bg_sp.jpg); background-repeat: no-repeat; background-size: 100%; max-height: 600px; min-height: 500px; position: relative; margin-bottom: 10%; } }
@media screen and (max-width: 640px) { #main { width: 100%; font-size: 10px; position: relative; margin-bottom: 10%; } }

#main #menu.colbg { height: 205px; background-image: url(../img/menu_bg_epi.jpg); }
@media screen and (max-width: 640px) { #main #menu.colbg { max-height: 180px; min-height: 180px; } }
#main #menu header { font-size: 0; }
#main #menu header .banner { display: inline-block; vertical-align: bottom; }
#main #menu header h2 { margin: 0; border: 0; padding: 10px 0 0 0; text-align: right; height: 23px; }
#main #menu header h2 img { display: none; width: 107px; }
#main #menu header h1 { display: inline-block; vertical-align: top; width: 300px; height: 120px; }
#main #menu header #time { display: inline-block; vertical-align: top; height: 30px; width: 300px; }
@media screen and (max-width: 640px) { #main #menu header .banner { display: none; }
  #main #menu header h2 { display: none; }
  #main #menu header h1 { margin-top: 33px; }
  #main #menu header #time { display: block; margin-left: 20px; } }
#main #menu #sns { height: 20px; margin: 8px 0 20px 30px; }
#main #menu nav { width: 400px; display: block; /* ブロックレベル要素 */ margin: 60px auto 0px 20px;}
#main #menu nav ul { width: 270px; display: block; /* ブロックレベル要素 */ margin: 10px 0 0 0; font-size: 0; }
#main #menu nav ul li { display: inline-block; vertical-align: top; font-size: 20px;  font-weight: bold; width: 100%; }
#main #menu nav ul li a { letter-spacing: 0.1em; line-height: 1.2em; text-shadow: 2px 2px 2px #333333; color: #ffffff !important; font-size: 20px; font-weight: bold; height: 50px; display: block; /* ブロックレベル要素 */ margin: 0 10px 5px 10px; padding: 10px 0 4px 50px; border-bottom: dashed 1px #ffffff; border-left: double 22px #ffffff; background: url(../img/menu_bg.png) no-repeat 2px 0px; }
#main #menu nav ul li a:hover { color: #F9E208 !important; border-bottom: dashed 1px #F9E208; border-left: double 22px #F9E208; }
#main #menu nav .quiz { margin: 20px auto 0px 30px; }
#main #menu nav .quiz img { width: 200px; height: 184px; }
#main #menu nav .pr { margin: 5px auto 0px 20px; }
#main #menu nav .pr img { width: 240px; height: 100px; }
#main #menu nav#colmenu { width: 100%; margin-left: auto; }
#main #menu nav#colmenu ul { width: 100%; font-size: 14px; }
#main #menu nav#colmenu ul li { width: 190px; }
#main #menu nav#colmenu ul li a { letter-spacing: 0em; line-height: 1.2em; text-shadow: 2px 2px 2px #333333; color: #999999 !important; font-size: 13px; height: 30px; display: block; /* ブロックレベル要素 */ margin: 0 0px 0 10px; padding: 0 0 4px 40px; border-bottom: dashed 1px #333333; border-left: double 22px #333333; background: url(../img/menu_bg.png) no-repeat 2px 0px; background-size: 35px; }
#main #menu nav#colmenu ul li a:hover { color: #ffffff !important; border-bottom: dashed 1px #F9E208; border-left: double 22px #F9E208; }
@media screen and (max-width: 640px) { #main #menu nav { display: none; } }
#main #menu #info { width: 280px; height: auto; border: dashed 1px #ffffff; margin: 0 0 0 30px; padding: 10px; }
#main #menu #info h2 { letter-spacing: 0.1em; line-height: 1.2em; font-weight: normal; text-shadow: 2px 2px 2px #333333; color: #ffffff !important; font-size: 15px; height: 40px; display: block; /* ブロックレベル要素 */ margin-bottom: 5px; padding: 0 0 4px 50px; border-bottom: dashed 1px #F9E208; border-left: double 22px #F9E208; background: url(../img/menu_bg.png) no-repeat 2px 0px; }
#main #menu #info p { border-bottom: solid 1px #F9E208; padding: 10px 0; line-height: 1.2em; }
#main #menu #info p.noborder { font-size: 14px; font-weight: bold; text-shadow: 2px 2px 2px #333333; border-bottom: 0; }
#main #menu #info p span { font-size: 14px; font-weight: bold; line-height: 1.5em; }
#main #menu #info p#pubInfo { font-size: 14px; font-weight: bold; }
@media screen and (max-width: 640px) { #main #menu #info { margin: 0 2%; padding: 2%; position: absolute; bottom: 2%; width: 90%; min-width: 280px; } }


article { min-height: 400px; }
article h2 { letter-spacing: 0.1em; line-height: 1.2em; font-weight: bold; text-shadow: 2px 2px 2px #000000; font-size: 24px; width: 220px; height: 50px; display: block; /* ブロックレベル要素 */ padding: 15px 0 2px 50px; border-bottom: dashed 1px #F9E208; border-left: double 22px #F9E208; background: url(../img/menu_bg.png) no-repeat 2px 8px; margin-bottom: 40px; margin-top: 100px;}
article p { letter-spacing: 0.3em; line-height: 1.5em; font-size: 22px; font-weight: bold; width: 940px;  margin: 20px;}
@media screen and (max-width: 640px) { article { padding: 0 2%; }
 article p { width: 100%; font-size: 15px; position: relative; margin: 0%; }
 article h2 { margin-bottom: 5%; } }
article.backnumberInner { width: 100%; font-size: 0; }
article.backnumberInner .fl-test-flex { margin-bottom: 50px; }
article.backnumberInner .backnumberLeft { width: 50%; max-width: 450px; margin: 0 auto; padding: 0; display: inline-block; }
article.backnumberInner .backnumberLeft p { text-align: center; vertical-align: middle; width: 100%; padding: 0; border: solid 2px #F9E208; margin-bottom: 10px; }
article.backnumberInner .backnumberLeft p img { vertical-align: middle; width: 96%; margin: 0; display: block; /* ブロックレベル要素 */ padding: 2%; }
article.backnumberInner .backnumberLeft ul { overflow: hidden; display: block; /* ブロックレベル要素 */ width: 50%; padding: 0; margin: 0 auto; font-size: 0; }
article.backnumberInner .backnumberLeft ul li { border: solid 2px #999999; width: 33%; display: inline-block; margin: 0 1.2%; }
article.backnumberInner .backnumberLeft ul li img { padding: 4%; width: 90%; margin: 0; cursor: pointer; vertical-align: top; }
article.backnumberInner .backnumberRight { width: 42%; display: inline-block; vertical-align: top; font-size: 0; margin: 20px 0 0 5%; }
article.backnumberInner .backnumberRight p { text-align: left; vertical-align: middle; width: 100%; font-size: 20px; vertical-align: middle;  padding: 2px; border: ridge 2px #ffffff; margin-bottom: 10px; }
article.backnumberInner .backnumberRight .iconsp1010 { background: url(../img/icon_sp1010.png) no-repeat; background-size: 180px; width: 180px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .iconsp { background: url(../img/icon_sp.png) no-repeat; background-size: 180px; width: 180px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .iconsp01 { background: url(../img/icon_sp01.png) no-repeat; background-size: 180px; width: 180px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .iconsp02 { background: url(../img/icon_sp02.png) no-repeat; background-size: 180px; width: 180px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .iconsp03 { background: url(../img/icon_sp03.png) no-repeat; background-size: 180px; width: 180px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .iconsp2 { background: url(../img/icon_sp2h.png) no-repeat; background-size: 180px; width: 180px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .icon50 { background: url(../img/icon50.png) no-repeat; background-size: 180px; width: 180px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .icon60 { background: url(../img/icon60.png) no-repeat; background-size: 180px; width: 180px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .icon70 { background: url(../img/icon70.png) no-repeat; background-size: 180px; width: 180px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .icon80 { background: url(../img/icon80.png) no-repeat; background-size: 180px; width: 180px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .icona { background: url(../img/icon_a.png) no-repeat; background-size: 180px; width: 180px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .iconb { background: url(../img/icon_b.png) no-repeat; background-size: 180px; width: 180px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .iconk { background: url(../img/icon_k.png) no-repeat; background-size: 180px; width: 180px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }

article.backnumberInner .backnumberRight .icon1 { background: url(../img/icon_mon.png) no-repeat; background-size: 90px; width: 90px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .icon2 { background: url(../img/icon_tue.png) no-repeat; background-size: 90px; width: 90px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .icon3 { background: url(../img/icon_wed.png) no-repeat; background-size: 90px; width: 90px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .icon4 { background: url(../img/icon_thu.png) no-repeat; background-size: 90px; width: 90px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .icon5 { background: url(../img/icon_fri.png) no-repeat; background-size: 90px; width: 90px; height: 90px; margin: 0 10px 0 0; display: inline-block; vertical-align: bottom; padding: 0px; }
article.backnumberInner .backnumberRight .pubNow { display: inline-block; }
article.backnumberInner .backnumberRight .pubNow #pubOA { font-size: 14px; }
article.backnumberInner .backnumberRight .pubNow #pubSubtitle { width: 30%; font-size: 18px; font-weight: bold; padding: 5px 0; border-bottom: dashed 1px #ffffff; }
article.backnumberInner .backnumberRight #pubText { width: 100%; margin-top: 20px; font-size: 18px; }
article.backnumberInner #backnumber ul { font-size: 0; width: 90%; padding: 0 5%; margin-bottom: 30px; }
article.backnumberInner #backnumber ul li { display: inline-block; vertical-align: top; font-size: 13px; font-weight: bold; width: 7.5%; text-align: center; margin: 10px auto; background: url(../img/bell.png) }
article.backnumberInner #backnumber ul li :link, article.backnumberInner #backnumber ul li :visited, article.backnumberInner #backnumber ul li :active { color: #333333; }
article.backnumberInner #backnumber ul li.on :link, article.backnumberInner #backnumber ul li.on :visited { color: #ffffff; }
article.backnumberInner #backnumber ul li.on :hover { color: #F9E208; }
@media screen and (max-width: 640px) { article.backnumberInner { width: 90%; }
  article.backnumberInner .fl-test-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  article.backnumberInner .backnumberLeft { width: 100%; padding: 0 0 0 0; display: block; margin: 0 auto 20px auto; -webkit-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; }
  article.backnumberInner .backnumberRight { width: 100%; padding: 0; display: block; margin: 0 auto; margin-bottom: 10px; -webkit-box-ordinal-group: 0; -ms-flex-order: 0; -webkit-order: 0; order: 0; }
  article.backnumberInner .backnumberRight .icon { display: none; }
  article.backnumberInner .backnumberRight #pubText { margin-top: 10px; }
  article.backnumberInner #backnumber { -webkit-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; }
  article.backnumberInner #backnumber ul { width: 94%; margin-bottom: 10px; }
  article.backnumberInner #backnumber ul li { width: 25%; margin: 8px auto; } }
article#cast { background: url(../../1stseason/img/cast_bg.jpg); height: 868px; }

.staff { color: #ffff00; font-size: 50px; width: 300px; text-align: center; margin: 50px auto; letter-spacing: 0.2em; }

.quiz p{
  display: block;
  width: 100%;
  height: 93px;
  background: url(../img/quiz.png) no-repeat 0 0;
}
.quiz p:hover {
  background-position: 0 bottom;
}

.quiz2 p{
  display: block;
  width: 100%;
  height: 93px;
  background: url(../img/quiz2.png) no-repeat 0 0;
}
.quiz2 p:hover {
  background-position: 0 bottom;
}

.quiz3 p{
  display: block;
  width: 100%;
  height: 93px;
  background: url(../img/quiz3.png) no-repeat 0 0;
}
.quiz3 p:hover {
  background-position: 0 bottom;
}

.quiz4 p{
  display: block;
  width: 100%;
  height: 93px;
  background: url(../img/quiz4.png) no-repeat 0 0;
}
.quiz4 p:hover {
  background-position: 0 bottom;
}

.quiz5 p{
  display: block;
  width: 100%;
  height: 93px;
  background: url(../img/quiz5.png) no-repeat 0 0;
}
.quiz5 p:hover {
  background-position: 0 bottom;
}


/* page-top */
#pageTop { position: fixed; bottom: 10px; right: 10px; }
#pageTop a { background: #F9E208; text-decoration: none; color: #ffffff; width: 50px; height: 20px; padding: 15px 0; text-align: center; display: block; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; }
#pageTop a:hover { text-decoration: none; color: #ffffff; filter: alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; }

footer { width: 1000px; margin: 0 auto; padding: 5px 0; color: #F9E208; font-size: 0.8em; text-align: center; }
@media screen and (max-width: 640px) { footer { width: 100%; padding: 3% 0; } }

body { font: normal; font-size: 16px; line-height: 1.8em; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif; color: #ffffff; background:#ebc593 url(../img/dot_bg.png); }

.yellow { color: #ffff00; }

.mb { margin-bottom: 20px; }

@media screen and (max-width: 640px) { .mb { margin-bottom: 20%; } }

.pc { display: block; }
@media screen and (max-width: 640px) { .pc { display: none; } }

.sp { display: none; }
@media screen and (max-width: 640px) { .sp { display: block; } }