@import url( https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Serif+JP|Yomogi&display=swap );


/* HTMLのベース指定部分 */
* { 
	font-size :16px; line-height:2.0em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0px; letter-spacing:.1em;
	font-family: 'Yomogi', 'Noto Sans JP', sans-serif, 'YuGothicM', 'YuGothic', 'Hiragino Kaku Gothic Pro', 'Osaka', 'MS PGothic', 'sans-serif'; font-weight:100; user-select: none;
}
html { }
body { display:block; margin:0; padding:0px; color:#444; line-height: 1.25em; display: flex; flex-direction: column; min-height: 100vh; }
@media screen and (max-width: 768px) {
	* { font-size : 1.8vw; }
	*.pc{ display:none; }
}
@media screen and (max-width: 480px) {
	* { font-size : 3.0vw; }
	*.pc{ display:none; }
}
a { color:#55f; text-decoration:none; cursor:pointer; }
dl, dt, dd, ul, ol, li, div, h1, h2, h3, h4, h5, h6, p { padding:0; margin:0; font-weight:normal; }
li{ list-style-type:none; }
hr{ clear:both; border:0; margin:0; }
img{vertical-align:middle;}
h1{font-size: 20px;}
button, label{cursor:pointer;}
button:hover, label:hover{ opacity:.8; }
th{ font-weight:normal; }
input, textarea, select { border:solid 1px #555; }
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
	br{ line-height:1px; }
}


#loader{ display:block; position: fixed; width:100%; height:100%; top:0; left:0; z-index:99; background:#333; }

header{ display:block; position: fixed; width:100%; top:0; left:0; z-index:98; background:rgba( 255, 255, 255, .9 ); }
header *{ color:#000; }
header>ol{ display:table; width:100%; max-width:1000px; height:4em; margin:0 auto; }
header>ol>li{ display:table-cell; vertical-align: bottom; }
header #logo a{ display:inline-block; vertical-align: bottom;background:url("./img/logo_bk.png") center center no-repeat; background-size: contain; height:4em; }
header #logo a img{ display: block; height:3em; opacity:0; }
header>ol>li#nav{ text-align: right; }
header>ol>li#nav a{ display: inline-block; padding:0 .5em; }
header>ol>li #nav-toggle{ display:none; }
header.transparent{ background:none; }
header.transparent *{ color:#fff; }
header.transparent #logo a{ background:url("./img/logo_wh.png") center center no-repeat; background-size: contain; }
@media screen and (max-width: 480px) {
	header>ol>li#nav{ display:none; }
	header>ol{ height:12vw;}
	header>ol>li#nav-toggle{ position:relative; cursor: pointer; }
	header>ol>li#nav-toggle div {position: absolute; top:1vw; right:2vw; width: calc( 10vw + 2px ); height: 10vw; border: 1px solid #000; }
	header>ol>li#nav-toggle span {display: block; position: absolute; height: .5vw; width: 8vw; background:#000; left:1vw; }
	header>ol>li#nav-toggle span:nth-of-type(1) {top: 2.5vw; }
	header>ol>li#nav-toggle span:nth-of-type(2) {top: 4.5vw; }
	header>ol>li#nav-toggle span:nth-of-type(3) {top: 6.5vw; }
	header.transparent>ol>li#nav-toggle div{ border: 1px solid #fff; }
	header.transparent>ol>li#nav-toggle span { background:#fff; }
	header.open *{ color:#000; }
	header.open li#logo div{ background:url("./img/logo_bk.png") center center no-repeat; background-size: contain; }
	header.open>ol>li#nav{ display:flex; flex-wrap: wrap; justify-content: center; align-items:center; align-content:center;
		position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,.90); z-index:-1; }
	header.open>ol>li#nav a{ display:block; width:100%; text-align:center; font-size:2.5em; font-weight: bold; padding:.5em 0; }
	header.open>ol>li#nav-toggle div{ border: 1px solid #000; }
	header.open>ol>li#nav-toggle span { background:#000; }
	header.open>ol>li#nav-toggle span:nth-of-type(1) {top: 4.5vw; transform: rotate(315deg); }
	header.open>ol>li#nav-toggle span:nth-of-type(2) {height: 0;}
	header.open>ol>li#nav-toggle span:nth-of-type(3) {top: 4.5vw; transform: rotate(-315deg); }
}

footer{ background:#222; text-align: center; padding:2em 0 0 0; margin-top: auto; }
footer *{ color:#fff; }
footer>a{ display:inline-block; padding:0 1em; }
footer>div{ display: block; margin:5em auto; }
footer>div>img{ display: block; width:30%; max-width:350px; margin:0 auto; }
@media screen and (max-width: 480px) {
	footer>a{ display:block; padding:.2em 0; }
	footer>br{ display:none; }
	footer>div>img{ width:70%; }
}


/* TOP */
#top_mainvisual{ width:100%; height:100vh; min-height:800px; background:url("./img/main_visual.jpg") center center no-repeat; background-size: cover; }
#top_mainvisual>section{ height:100%; display:flex; flex-wrap: wrap; justify-content: center; align-items:center; align-content:center; background:rgba(0,0,0,.5); }
#top_mainvisual>section>img{ display: block; width:80%; max-width:600px; }
@media screen and (max-width: 480px) {
	#top_mainvisual{ min-height:0; }
}

#top_whats{ padding:5em 0; }
#top_whats>section{ width:100%; max-width:1000px; margin:0 auto; }
#top_whats>section>ol{ display: flex; justify-content:center; width:100%; }
#top_whats>section:nth-of-type(even)>ol{ flex-direction:row-reverse; }
#top_whats>section>ol>li{ width:50%; padding:3em; }
#top_whats>section>ol>li img{ display:block; margin:auto; }
#top_whats>section>ol>li img#img01{ width:30%; }
#top_whats>section>ol>li img#img02{ width:100%; }
#top_whats>section>ol>li img#img03{ width:100%; }
#top_whats>section>ol>li dt{ font-weight: bold; font-size:2em; color:#ffae00; line-height:1em; text-align: center; padding-bottom:1em; }
@media screen and (max-width: 480px) {
	#top_whats>section>ol{ display: block; padding:2em 0; }
	#top_whats>section>ol>li{ width:100%; padding:1em 3em; }
	#top_whats>section>ol>li dt{ padding-bottom:.5em; }
}

#top_nowvote{ background:#f5f5f5; padding:5em 0; }
#top_nowvote h2{ font-weight: bold; font-size:2em; color:#ffae00; text-align: center; }
#top_nowvote>section{ width:100%; max-width:1000px; margin:0 auto; }
#top_nowvote>section>a{ display:inline-block; background:#fff; color:#999; margin:1em 0; }
#top_nowvote>section>a:hover{ background:#fff4db; }
#top_nowvote>section>a>dl{ display: flex; justify-content:center; align-items:center; width:100%; }
#top_nowvote>section>a>dl>dt{ width:20%; padding:1em; }
#top_nowvote>section>a>dl>dt>img{ width:100%; }
#top_nowvote>section>a>dl>dd{ width:80%; padding:1em; }
#top_nowvote>section>a>dl>dd>span{ display:inline-block; padding:0 .5em; font-family:'Noto Sans JP'; font-size:.8em; background:#f00; color:#fff; }
#top_nowvote>section>a>dl>dd>p{ font-weight: bold; font-size:1.5em; color:#000; }
#top_nowvote>section>a>dl>dd>div{ font-family:'Noto Sans JP'; font-size:.9em; }
#top_nowvote>section>a>dl>dd>div.cate:before{ font-family:"Font Awesome 5 Free"; content:"\f02c"; font-weight: 900; padding-right:.5em; }
#top_nowvote>section>a>dl>dd>div.date:before{ font-family:"Font Awesome 5 Free"; content:"\f017"; font-weight: 400; padding-right:.5em; }
@media screen and (max-width: 480px) {
	#top_nowvote>section>a>dl>dt{ width:35%; padding:.5em; }
	#top_nowvote>section>a>dl>dd{ width:65%; padding:.5em; }
}

#top_result{ background:#f5f5f5; padding:0 0 5em 0; }
#top_result h2{ font-weight: bold; font-size:2em; color:#ffae00; text-align: center; }
#top_result>section{ width:100%; max-width:1000px; margin:0 auto; }
#top_result>section>a{ display:inline-block; background:#fff; color:#999; margin:1em 0; }
#top_result>section>a:hover{ background:#fff4db; }
#top_result>section>a>dl{ display: flex; justify-content:center; align-items:center; width:100%; }
#top_result>section>a>dl>dt{ width:20%; padding:1em; }
#top_result>section>a>dl>dt>img{ width:100%; }
#top_result>section>a>dl>dd{ width:80%; padding:1em; }
#top_result>section>a>dl>dd>span{ display:inline-block; padding:0 .5em; font-family:'Noto Sans JP'; font-size:.8em; background:#999; color:#fff; }
#top_result>section>a>dl>dd>p{ font-weight: bold; font-size:1.5em; color:#000; }
#top_result>section>a>dl>dd>div{ font-family:'Noto Sans JP'; font-size:.9em; }
#top_result>section>a>dl>dd>div.cate:before{ font-family:"Font Awesome 5 Free"; content:"\f02c"; font-weight: 900; padding-right:.5em; }
#top_result>section>a>dl>dd>div.date:before{ font-family:"Font Awesome 5 Free"; content:"\f1da"; font-weight: 900; padding-right:.5em; }
@media screen and (max-width: 480px) {
	#top_result>section>a>dl>dt{ width:35%; padding:.5em; }
	#top_result>section>a>dl>dd{ width:65%; padding:.5em; }
}



/* SECOND */
#second_visual{ height:300px; background:url("./img/second_visual.jpg") center center no-repeat; background-size: cover; }
#second_visual>section{ height:100%; display:flex; flex-wrap: wrap; justify-content: center; align-items:center; align-content:center; background:rgba(0,0,0,.5); }
#second_visual h2{ font-weight: bold; font-size:2em; color:#fff;  }
@media screen and (max-width: 768px) {
	#second_visual{ height:30vw; }
}
@media screen and (max-width: 480px) {
	#second_visual{ height:60vw; }
}

/* 入力フォーム */
article.form{ padding:5em 0; }
article.form>form{ display:block; width:90%; max-width:600px; margin:0 auto; }
article.form p{ font-weight: bold; padding-bottom:1em; }
article.form p#forgot:before{ font-family:"Font Awesome 5 Free"; content:"\f059"; font-weight: 900; color:#ffae00; }
article.form dt{ font-weight: bold; }
article.form dt:before{ font-family:"Font Awesome 5 Free"; content:"\f118"; font-weight: 900; color:#ffae00; }
article.form dt span{ display: inline-block; font-size:.8em; padding:0 0 0 .5em; color:#f30; }
article.form dd{ padding:0 0 1.5em 1em; }
article.form dd span.error{ display: block; color:#f30; font-size:.8em; }
article.form ol{ display: table; }
article.form ol>li{ display: table-cell; }
article.form ul{ display: table; width:100%; }
article.form ul>li{ display: table-cell; vertical-align: middle; padding:0 0 .2em 0; }
article.form ul>li:nth-of-type(1){ padding:0 .5em 0 0; }
article.form a.row_del{ padding:0 .5em; }
article.form a.row_del:before{ font-family:"Font Awesome 5 Free"; content:"\f056"; font-weight: 900; color:#999; }
article.form a.row_del:hover:before{ color:#666; }
article.form a.row_add{ font-family:'Noto Sans JP'; color:#ffae00; font-size:.9em; }
article.form a.row_add:hover{ color:#666; }
article.form a.row_add:before{ font-family:"Font Awesome 5 Free"; content:"\f055"; font-weight: 900; color:#999; }
article.form a.row_add:hover:before{ color:#666; }
article.form input[type='text']{ display: block; width:100%; padding:0 .5em; border-radius:.2em; height: 3em; }
article.form label{ display: inline-block; line-height:3em; }
article.form select{ display: block; padding:0 .5em; border-radius:.2em; height: 3em; }
article.form textarea{ display: block; width:100%; padding:0 .5em; border-radius:.2em; height: 10em; }
article.form button{ display: block; width:100%; border:0; border-radius:.2em; background:#f27900; padding:0 .7em; line-height: 3em; margin-top:1em; font-family:'Noto Sans JP'; color:#fff; }
@media screen and (max-width: 480px) {
	article.form dt{ font-size:1.2em; }
	article.form input[type='text']{ height: 4em; }
	article.form label{ line-height:4em; }
	article.form input[type='radio']{ height: 2.5em; width: 2.5em; vertical-align: middle; }
	article.form input[type='checkbox']{ height: 2.0em; width: 2.0em; vertical-align: middle; }
	article.form select{ height: 4em; }
	article.form button{ line-height: 4em; }
}

article.form#vote>form{ max-width:600px; margin:0 auto; }
article.form#vote>p{ max-width:600px; margin:0 auto 2em auto; }
article.form#vote dt{  }
article.form#vote label{ display: block; line-height:3em; }
article.form#vote input[type='radio']{ height: 2.0em; width: 2.0em; vertical-align: middle; margin:0 .5em 0 0; }

/* 送信完了画面 */
.form_comp{ width:90%; max-width:800px; margin:5em auto; }
.form_comp dt{ font-size:1.2em; font-weight: bold; }

/* 結果画面 */
#result{ width:90%; max-width:1000px; margin:5em auto; }
#result #origination{ border: 1px solid #eee; padding:3em; }
#result #chart dt{ background:#f27900; color:#fff; padding:0 1em; font-weight: bold; }
#result #chart dt:before{ font-family:"Font Awesome 5 Free"; content:"\f681"; font-weight: 900; }
#result #chart dt span{ float:right; font-size:.8em; }
#result #chart dt span b{ font-weight: bold; font-family:'Noto Sans JP'; font-size:1.3em; }
#result #chart dd{ padding:1em 0 3em 0; }
#result #chart #chartarea{ width:100%; height:400px; }
#result #chart #chartarea *{ font-size:10px;  }
#result #comment dt{ background:#f27900; color:#fff; padding:0 1em; font-weight: bold; }
#result #comment dt:before{ font-family:"Font Awesome 5 Free"; content:"\f4ad"; font-weight: 900; }
#result #comment dt span{ float:right; font-size:.8em; }
#result #comment dt span b{ font-weight: bold; font-family:'Noto Sans JP'; font-size:1.3em; }
#result #comment dd{ border-bottom: 1px dashed #999; padding:1em .5em; }
#result #comment dd>span{ display:inline-block; padding:0 .5em; font-family:'Noto Sans JP'; font-size:.8em; background:#f00; color:#fff; }
@media screen and (max-width: 768px) {
	#result #chartarea{ height:50vw; }
	#result #chartarea *{ font-size:1vw; }
}
@media screen and (max-width: 480px) {
	#result #chartarea{ height:70vw; }
	#result #chartarea *{ font-size:2vw; }
}

/* ガイドライン */
article#guide{ width:90%; max-width:1000px; margin:5em auto; }
article#guide>dl{ padding:.5em 0; }
article#guide>dl>dt:before{ font-family:"Font Awesome 5 Free"; content:"\f118"; font-weight: 900; color:#ffae00; }
article#guide>dl>dd{ padding:0 0 0 1.5em; }
article#guide>dl>dd.q:before{ font-family:"Font Awesome 5 Free"; content:"\f059"; font-weight: 400; color:#ffae00; }
article#guide>dl>dd.a{ padding:0 0 0 3em; border-bottom: 1px dashed #000; }
article#guide>dl>dd.a:before{ margin:0  0 0 -1.5em;  font-family:"Font Awesome 5 Free"; content:"\f27a"; font-weight: 400; color:#ffae00; }
article#guide>p{ border: 1px dashed #000; padding:1em; margin:1em 0; }

/* プライバシー */
article#policy{ width:90%; max-width:1000px; margin:5em auto; }
article#policy>p{ text-align: center; padding:3em 0; }
article#policy dl{ padding:0 0 3em 0; }
article#policy dt{ font-size:1.2em; font-weight: bold; }
article#policy dt>span{ font-size:1.0em; padding:0 1em 0 0; }
article#policy dd{ padding: 0 0 0 1em; }
@media screen and (max-width: 480px) {
	article#policy>p>br{ display: none; }
}