@charset "UTF-8";


@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: normal;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}


/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

article, aside, figure, footer, header, hgroup, nav, section, details, summary {display: block;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }




/* Product Style
-------------------------------------------------------------------------------*/

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.chromeframe {position: absolute; top: 0;}
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }
::-moz-selection{background: #d60077; color: #fff; text-shadow: none;}
::selection {background: #d60077; color: #fff; text-shadow: none;} 

body {
	font-family: Meiryo, "Lucida Grande", Verdana, sans-serif;
	font-size: 16px;
	background: #eee;
	padding-top: 60px;
}
body, select, input, textarea {color: #333;}
a {color: #03f;}
a:hover {color: #69f;}
a:hover img {opacity:0.5;alpha(opacity=50);}

img {
	max-width: 100%;
	height: auto;
}

.disabled {
	opacity: 0.4;
	-webkit-filter: grayscale(100%); /* モノトーンに変換 webkit */
	-moz-filter: grayscale(100%); /* モノトーンに変換 Firefox */
	filter: grayscale(100%); /* モノトーンに変換 CSS3 */
	filter: progid:DXImageTransform.Microsoft.BasicImage(Opacity=0.4, GrayScale=1); /* モノトーンに変換 IE5.5以降用 */
}


footer {
	background: #666;
}
.wrap,
#content,
footer .wrap {
	max-width: 1215px;
	margin: 0 auto;
	padding: 0 20px;
}
/*
header .wrap {
	overflow: hidden;
}
header .logo {
	float: left;
	width: 65%;
	padding-right: 20px;
	line-height: 0;
}
header .header-meta {
	float: right;
	width: 35%;
	padding-left: 10px;
	text-align: right;
}
header .header-meta li {
	margin-bottom: 10px;
}
header .header-meta li:last-child {
	margin-bottom: 0;
}
*/



#content {
	margin: 20px auto 40px;
}

#content section {
	margin-bottom: 20px;
	line-height: 1.8;
}
#content .bt {
	margin: 1em 0;
	text-align: center;
}
.section-lead {
	padding: 20px;
	background: #fff;
}
.section-faq {
	background: #fff;
}
.section-faq-wrap {
	padding: 20px;
}
.section-lead h2 {
	margin: 0.8em 0 0;
	font-size: 1.1em;
	text-align: center;
	color: #d60077;
}
#content section.section-copy {
	padding: 20px;
	margin-bottom: 0;
	background: #d60077;
}
.section-copy h2 {
	font-size: 24px;
	line-height: 1.8;
	font-weight: normal;
	font-family: "Mplus 1p";
	color: #fff;
	text-align: center;
}


body.finish .section-lead h2 {
	margin: 2em 0 2em;
	font-size: 2em;
	text-align: center;
	color: #d60077;
}


.section-note ol {
	width: 100%;
	display: table;
}
.section-note li {
	display: table-cell;
	list-style-type: none;
	border-radius: 14px;
}
.section-note .arrow {
	padding: 0 5px;
	vertical-align: middle;
	font-size: 24px;
	color: #f4b4d0;
}
.section-note .arrow span {
	display: inline-block;
}
.section-note li.section-note-qualifier {
	width: 49%;
	border: 4px solid #d60077;
	background: #fff;
}
.section-note li.section-note-final {
	width: 49%;
	border: 4px solid #d60077;
	background: #fff;
}
.section-note li h2 {
	padding: 6px 0 4px;
	text-align: center;
	font-size: 18px;
	font-weight: normal;
	line-height: 1.2;
	border-bottom: 1px solid #ccc;
}
.section-note li.section-note-qualifier h2 {
	color: #889120;
}
.section-note li.section-note-final h2 {
	color: #eb6da5;
}
.section-note li p {
	padding: 8px 10px;
	line-height: 1.6;
}

.section-ranking,
.section-vote {
	background: #fff;
	border-bottom: 4px solid #d60077;
	margin-top: 40px;
}
body.final .section-ranking,
body.final .section-vote {
	border-bottom: 4px solid #d60077;
}
.section-ranking h1,
.section-vote h1,
.section-faq h1 {
	padding: 20px;
	font-size: 22px;
	font-weight: normal;
	color: #889120;
	line-height: 1.2;
	border-bottom: 1px solid #ccc;
}
body.final .section-ranking h1,
body.final .section-vote h1,
body.final .section-faq h1 {
	color: #d60077;
}
.section-faq h2 {
	font-size: 18px;
	color: #d60077;
	margin-bottom: 10px;
	margin-top: 10px;
	font-weight: normal;
}
.section-faq p {
	margin-bottom: 10px;
}
.faq-a {
	margin-bottom: 20px;
}
.section-ranking h1 span,
.section-vote h1 span {
	display: inline-block;
	margin-left: 10px;
	color: #333;
	font-size: 15px;
}
.ranking {
	padding: 0 15px;
	counter-reset: ranking-counter;
}
.ranking li {
	overflow: hidden;
	padding: 15px 0;
	list-style-type: none;
	border-bottom: 1px solid #ccc;
}
.ranking li:last-child {
	border-bottom: 0 none;
}
.ranking li:before {
	float: left;
	width: 40px;
	counter-increment: ranking-counter;
	content: counter(ranking-counter);
	font-size: 48px;
	font-family: 'Open Sans Condensed', sans-serif;
	line-height: 1;
	letter-spacing: -2px;
	color: #a1a1a1;
}
.ranking li:nth-child(1):before,
.ranking li:nth-child(2):before,
.ranking li:nth-child(3):before,
.ranking li:nth-child(4):before,
.ranking li:nth-child(5):before,
.ranking li:nth-child(6):before,
.ranking li:nth-child(7):before,
.ranking li:nth-child(8):before,
.ranking li:nth-child(9):before {
	margin-left: 5px;
	font-family: 'Open Sans', sans-serif;
	font-size: 50px;
	font-weight: bold;
}
.ranking li:nth-child(1):before {
	color: #d60077;
}
.ranking li:nth-child(2):before,
.ranking li:nth-child(3):before,
.ranking li:nth-child(4):before,
.ranking li:nth-child(5):before,
.ranking li:nth-child(6):before,
.ranking li:nth-child(7):before,
.ranking li:nth-child(8):before,
.ranking li:nth-child(9):before,
.ranking li:nth-child(10):before {
	color: #eb6da5;
}
.last3day .ranking li:before {
	display: none;
}
.ranking-detail {
	margin-left: 65px;
}
.last3day .ranking-detail {
	margin-left: 0;
}
.ranking-detail-wrap {
	width: 100%;
	display: table;
}
.ranking-data,
.ranking-bt {
	display: table-cell;
	vertical-align: top;
}
.ranking-bt {
	width: 100px;
	text-align: right;
	line-height: 0;
}
.ranking h2 {
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: normal;
}
.ranking .graph {
	height: 15px;
	background: #d60077 url(../img/graph_bg.png) repeat 0 0;
	border-radius: 3px;
}

.section-vote-wrap {
	padding: 15px;
}

ul.index {
	margin-left: 50px;
	text-align: right;
}
ul.index li {
	display: inline;
	overflow: hidden;
}
ul.index a {
	display: inline-block;
	margin: 0 0 5px 3px;
	padding: 4px 5px;
	line-height: 1;
	background: #d60077;
	border-radius: 5px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
}
.section-vote h2 {
	margin-top: -24px;
	font-size: 24px;
	font-weight: normal;
	color: #d60077;
	border-bottom: 2px solid #ccc;
	line-height: 1.2;
}
.vote-list {
	margin-bottom: 20px;
}
.vote-list li {
	overflow: hidden;
	min-height: 40px;
	padding: 5px 0 5px 40px;
	border-bottom: 1px solid #ccc;
}
.vote-list .tv {
	background: url(../img/ic_tv.png) no-repeat 0 center;
	background-size: 28px 30px;
}
.vote-list .movie {
	background: url(../img/ic_movie.png) no-repeat 0 center;
	background-size: 28px 30px;
}
.vote-list .movieos {
	background: url(../img/ic_movieos.png) no-repeat 0 center;
	background-size: 28px 30px;
}
.vote-list-detail {
	display: table;
	width: 100%;
}
.vote-list-detail .name,
.vote-list-detail .vote-bt {
	display: table-cell;
	vertical-align: middle;
	font-size: 16px;
	line-height: inherit;
}
.vote-list-detail .name {
	padding-right: 20px;
}
.vote-list-detail .vote-bt {
	width: 151px;
	text-align: right;
	vertical-align: middle;
	line-height: 0;
}
.vote-list-detail .vote-bt * {
	line-height: 0;
}
.bt-horizontal {
	display: none;
}





.pagetop {
	margin: 0;
	padding: 0;
	text-align: center;
	z-index: 10;
	line-height: 1;
}
.pagetop a {
	color: #d60077;
}
.pagetop a:hover {
	color: #9CBC2A;
}
.pagetop .fa-lg {
	font-size: 24px;
}
.pagetop .fa-chevron-up {
	top: -3px;
}
.pagetop .fa-circle {
	text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}
.pagetop-text {
	width: 0px;
	display: inline-block;
	text-indent: -9999px;
}

footer {
	margin-top: -25px;
	padding: 50px 20px 20px;
	background: #666;
	z-index: 1;
	text-align: center;
	color: #ccc;
}
footer a {
	color: #fff;
}
footer a:hover {
	text-decoration: none;
}

.footer-line-link {
	text-align: center;
}
.footer-line-link li {
	display: inline-block;
	padding: 0 20px;
	margin: 0;
	border-left: 1px solid #fff;
}
.footer-line-link li:first-child {
	border-left: 0 none;
}
#copyright {
	margin: 1em 0;
}

/* モーダルウィンドウ */
.modal {
	display: block;
}
.modalBody,
.modalBodyThanks {
	display: none;
	position: fixed;
	z-index: 990;
	left: 50%;
	top: 50%;
	width: 90%;
	max-width: 600px;
	padding: 20px;
	margin-top: -240px;
	background: #fff;
	border-radius: 10px;
	font-size: 14px;
}
.modalBK {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 950;
	height: 100%;
	width: 100%;
	background: #669819;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
}
.close {
	position: absolute;
	top: -20px;
	right: -20px;
	z-index: 1000;
	padding: 10px 15px;
	background: #669819;
	line-height: 1;
	border: 5px solid #fff;
	border-radius: 10px;
	color: #fff;
	font-weight: bold;
	font-family: Arial, sans-serif;
	cursor: pointer;
}
.close:hover {
	background: #0186B3;
}
#confirm-vote-title {
	font-weight: bold;
}
.modal h1 {
	margin-bottom: 10px;
	font-size: 1.5em;
	text-align: center;
	color: #d60077;
}

.modal input {
	vertical-align: middle;
	margin-right: 5px;
}
.modal input[type="text"] {
    width: 100%;
    padding: 5px 0;
    border-radius: 5px;
    border: 2px solid #ccc;
    background-color: #e1e5f2;
}
.modal input[type="text"]:focus {
    border: 2px solid #d60077;
}
.modal ul {
	margin: 15px 20px;
}
.modal li {
	list-style-type: none;
	margin: 8px 0;
	line-height: 1.2;
}
.modal p {
	margin: 0 0 8px;
	line-height: 1.5;
}
.modal blockquote {
	padding: 5px;
	background: #eee;
	font-size: 0.8em;
}
.modal .btn {
	margin: 10px 0 0 0;
	text-align: center;
}
.modal button {
	padding: 4px 10px;
	background: #666;
	font-size: 20px;
	color: #fff;
	line-height: 1.2;
	border: 0 none;
	border-radius: 4px;
}
.modal button.submit {
	background: #d60077;
	font-weight: bold;
}
.modal hr {
	margin: 12px 0;
	border: 0 none;
	border-top: 2px dotted #d60077;
}

.iconinfo {
	padding: 12px 14px;
	line-height: 1.2;
	border-bottom: 1px solid #ccc;
	text-align: center;
}
.iconinfo ul {
	text-align: center;;
}
.iconinfo li {
	display: inline;
	overflow: hidden;
	margin-right: 1em;
}
.iconinfo li.lastli {
	display: inline;
	overflow: hidden;
}


.home-title {
	display: table;
	width: 100%;
	line-height: 0;
	background: #fff;
}
.home-title h1,
.home-title p {
	display: table-cell;
	vertical-align: middle;
	padding: 40px 50px;
}
.home-title h1 {
	width: 45%;
	text-align: right;
}
.home-title p {
	background: #d60077;
}
.home-title img {
	max-width: 100%;
	height: auto;
}
#detail-keyvisual {
	display: table;
	width: 100%;
	height: 396px;
	margin: 0 auto;
	background: url(../img/taaf2020_h1_bg_title.jpg) no-repeat center center;
	background-size: cover;
}

#detail-keyvisual div {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	margin: 20px;
}
#detail-keyvisual img {
	max-width: 100%;
	height: auto;

}


/* header
-------------------------------------------------------------------------------*/
header {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background: #fff;
	z-index: 100;
	font-family: YuGothic, 'Yu Gothic', 'Lucida Grande', Meiryo, Verdana, sans-serif;
}
header ul {
	list-style: none;
}
header h1,
header nav {
	line-height: 0;
}
header h1 {
	position: relative;
	float: left;
	z-index: 100;
	max-width: 70%;
}
header h1 img {
	width: 330px;
	max-width: 100%;
	height: auto; 
}
header nav {
	float: right;
	text-align: right;
}
.header-nav-group {
	position: static;
	float: left;
}
header ul {
	display: inline-table;
	text-align: left;
}
header li {
	display: table-cell;
	vertical-align: middle;
}
header li li {
	display: inline-block;
}
.header-social li {
	padding: 0 0 0 10px;
}
.header-social li.nav-twitter {
	padding: 0 10px;
}
.header-lang li {
	padding: 0;
}
.header-social a,
.header-lang a {
	position: relative;
	display: block;
	height: 60px;
	padding: 0 15px;
	background: url(../img/header2026.png) no-repeat 0 0;
	background-size: auto 60px;
	line-height: 60px;
	text-indent: -9999px;
}
/*
header > nav > ul > li > a {
	position: relative;
	display: block;
	height: 60px;
	padding: 0 15px;
	background: url(../img/header.png) no-repeat 0 0;
	background-size: auto 60px;
	line-height: 60px;
	text-indent: -9999px;
}
.nav-home a {
	width: 71px;
	background-position: -495px 0;
}
.nav-about a {
	width: 95px;
	background-position: -566px 0;
}
.nav-award a {
	width: 86px;
	background-position: -663px 0;
}
.nav-program a {
	width: 101px;
	background-position: -752px 0;
}
.nav-schedule a {
	width: 117px;
	background-position: -854px 0;
}
.nav-ticket a {
	width: 85px;
	background-position: -972px 0;
}
.nav-site a {
	width: 59px;
	background-position: -1059px 0;
}
*/
.nav-facebook a {
	width: 26px;
	background-position: -1138px 0;
}
.nav-twitter a {
	width: 26px;
	background-position: -1176px 0;
}
.nav-lang-en a {
	width: 60px;
	background-position: -1220px 0;
}
.header-menuopen,
.header-lang {
	position: relative;
	z-index: 100;
}
.nav-menuopen {
	display: none;
}
.nav-menuopen a {
	position: relative;
	display: inline-block;
	height: 60px;
	padding: 0 15px;
	line-height: 60px;
	font-size: 28px;
}
.nav-menuopen a:hover {
	color: #000;
}
.globalnav > li a {
	position: relative;
	display: inline-block;
	height: 60px;
	padding: 0 20px;
	line-height: 60px;
    font-size: 13px;
}
.globalnav > li ul a {
	height: 50px;
	line-height: 50px;
}
.globalnav > li a {
	color: #333;
	font-family: YuGothic, 'Yu Gothic', 'Lucida Grande', Meiryo, Verdana, sans-serif;
	font-weight: bold;
	text-decoration: none;
}
.globalnav > li a:hover::after {
	content: '';
	position: absolute;
	display: block;
	height: 5px;
	bottom: 0;
	left: 15px;
	right: 15px;
	background: #d60077;
}
.header-social a:hover,
.header-lang a:hover {
	opacity: 0.7;
}
.globalnav > li > ul {
	display: none;
	position: absolute;
	top: 60px;
	left: 0;
	width: 100%;
	line-height: 1.2;
	background: #F2F2F2;
}

.modal .twitter-intent {
margin: 30px 0 20px 0;
}
.modal .intent {
margin: 30px 0 30px 0;
text-align: center;
}
.modal .intent-caution {
text-align: center;
}
.modal .intent a {
padding: 4px 10px;
color: #fff;
font-size: 18px;
background: #E4007F;
font-weight: bold;
line-height: 1.2;
border: 0 none;
border-radius: 4px;
text-decoration: none;

}
.modal hr {
margin: 24px 12;
border: 0 none;
border-top: 2px dotted #c1c965;
}


/* Media queries
-------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

    a {
        &:hover {
            opacity: 1 ;
        }
    }


.section-lead {
	padding: 10px;
}
.section-note li {
	display: block;
}
.section-note li.section-note-qualifier,
.section-note li.section-note-final {
	width: 100%;
}
.section-note .arrow {
	text-align: center;
	line-height: 1.2;
}
.section-note .arrow span {
	-webkit-transform: rotate(90deg);  
	-moz-transform: rotate(90deg);
}

#title {
	margin-bottom: 10px;
}
#content {
	margin: 10px auto 40px;
	padding: 0 10px;
}

.ranking li {
	padding: 10px 0;
}
.ranking h2 {
	line-height: 1.3;
}
.ranking li:before {
	width: 36px;
	font-size: 30px;
	letter-spacing: 0;
}
.ranking li:nth-child(1):before,
.ranking li:nth-child(2):before,
.ranking li:nth-child(3):before,
.ranking li:nth-child(4):before,
.ranking li:nth-child(5):before,
.ranking li:nth-child(6):before,
.ranking li:nth-child(7):before,
.ranking li:nth-child(8):before,
.ranking li:nth-child(9):before {
	margin-left: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 40px;
	font-weight: bold;
}

.ranking-detail {
	margin-left: 45px;
}
.ranking-bt {
	width: 86px;
}

.vote-list-detail .name {
	font-size: 13px;
}
.vote-list-detail .vote-bt {
	width: 76px;
}
.bt-normal {
	display: none;
}
.bt-horizontal {
	display: inline;
}

img {
	max-width: 100%;
	height: auto;
}
header h1 img {
	display: none;
}
.header-nav-group {
	height: 100%;
}
header ul.globalnav {
	display: block;
}
header ul.header-social {
	display: none;
}
.home-title h1 {
	width: 40%;
}
.home-title h1,
.home-title p {
	display: block;
	width: 100%;
}
.home-title h1 {
	padding: 10px 50px 20px;
}
.home-title p {
	padding: 30px 30px;
}
.header-lang  {
	display: none;
}
#detail-keyvisual {
	height: 200px;

}
.globalnav > li a:hover::after {
	display: none;
}
} /* max-width: 768px */

@media screen and (max-width: 480px) {

.section-ranking h1 span,
.section-vote h1 span {
	margin-left: 0;
}
.ranking h2 {
	font-size: 14px;
}
.ranking li {
	padding: 7px 0;
}
.ranking-bt {
	width: 65px;
	padding-left: 10px;
	vertical-align: middle;
}
.vote-list-detail .vote-bt {
	width: 55px;
}

.modalBody,
.modalBodyThanks {
	padding: 15px 20px;
	font-size: 11px;
}
.modal button {
	font-size: 16px;
}

.iconinfo {
	padding: 6px 6px;
	line-height: 1.2;
	border-bottom: 1px solid #ccc;
	text-align: right;
	
}
.iconinfo ul {
	text-align: right;;
}
.iconinfo li {
	display: block;
	.iconinfo {
	padding: 6px 6px;
	line-height: 1.5;
	border-bottom: 1px solid #ccc;
	text-align: right;
	
}
.iconinfo ul {
	text-align: right;;
}
.iconinfo li {
	display: block;
}
.iconinfo li.firstli {
	padding-right: 1em;
}

}
.iconinfo li.firstli {
	padding-right: 1em;
}
.modal .intent-caution {
text-align: left;
}


} /* max-width: 480px */