@charset "utf-8";


/*スタイルリセット*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
	font-size: 100%;
}
.clear{ clear:both;}
li {list-style-type: none;}
/*clearfix*/
.clearfix:after {
	content: " ";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.clearfix {display:inline-table;}

/* Hides from IE-mac ¥*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

body {
	font:14px/1.6 "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	*font-size:small;
	*font:x-small;
	font/*\**/: 14px/1.6\9;
	vertical-align:baseline;
	font-style: normal;
	letter-spacing: normal;
	color: #a98e00;
	background: #f7f7f3;
	}



/* リンク指定
----------------------------------------------- */
a:link {color: #7B6600; text-decoration: none;}
a:visited {color: #685816;text-decoration: none;}
a:hover {color: #FCE81F; text-decoration: underline;}
a img{ border: none;}
.new{font-family: 'Fjalla One', sans-serif; font-size: 11px; color: #E12499;}
.todetail{ text-align: right; padding: 3px}
img{ max-width: 100%; height: auto;}

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

.mobile-ondsp{ display: none;}
.color-orange{color: #ff4800;}

header img{ width: 100%; height: auto;}
#main{ margin: auto 5%; }
#main h1{ text-align: center; margin: -200px 0 0;}
#main h2{ text-align: center; margin:3.0em 0 1.0em;}
#main h3{text-align: center; margin: 2.0em 0;}

#howtoentry{ max-width:816px;  border: 5px solid #fccf00;  background: #e8e9e0; padding: 18px 5%; margin: 36px auto; font-weight: bold; font-size: 1.2rem; }
#howtoentry h2{ font-size: 2.2rem; line-height: 1.0em; margin: 0 0 0.3em 0; }
#howtoentry ul{ margin: 1.0em 0 0; font-size: 0.9em;}

#information{  background: #e8e9e0; width: 100%; padding: 16px 0;}
.cont{ max-width: 937px; width: 96%; margin: auto;}
.cont::after{ clear: both; display: block; content: ""; height: 0;}
.banner{ margin: 0 0 0.6em;width: 100%; }
.trackinfo{float: left;width: 42%; max-width: 320px;}
.trackinfo img{width: 100%; height: auto;}
.youtube{float: right; width: 58%; height: auto;}
.youtube iframe{width: 100%;}
.button { clear: both; margin:  auto; text-align: center; padding: 18px; font-size: 1.4rem;}
.button a{ width: 98%; display: block; margin: auto;  padding: 0.3em 1%;background: #fccf00; font-weight: bold; color: #000; box-shadow: 1px 2px 0px 1px #a88d10;}
.button a:hover{ background: #a88d10; color: #FFF; text-decoration: none;}

#topics{ margin: 36px auto; color: #3c2923; max-width:816px; font-size: 1.1em;}
#topics h2{ margin: 0 0 1.6em 0;}
#topics h2 img{ width: 290px; height: auto; }
#topics .moreinfo p{ margin: 0 0 1.8em 0;}
#topics h3{ font-size: 1.1em;}
#topics h3 a{ color:#3c2923;}

	#topics .moreinfo{ display: none;}
	#topics .moreinfobtn{ font-weight: bold; text-align: center; color:#fccf00; padding: 1.0em; }

.stream { margin:  0 5%; width: 90%;}
.stream h2{text-align: center; padding: 6px;background: #fccf00; font-weight: bold; color: #000; font-size: 1.2em; margin-bottom: 1.1em;}
#tag1{ margin: auto;}

footer{ text-align: center; padding: 6px;background: #fccf00;   color: #3c2923; font-size: 0.7rem;}

@media screen and (max-width : 768px){
	body{ font-size: 80%;}
	img{ max-width: 100%; height: auto;display:block}
	div,section,article{max-width: 100%;}
	
	.mobile-nodsp{ display: none;}
	.mobile-ondsp{ display: block;}
	
	#main h1{ margin: -60px 0 0;}
	#main h2{ margin: 1.8em 0 1.0em;}
	#main h3 img{ width: 200px; height: auto;  margin: auto;}
	#howtoentry{ font-size: 1.0rem; padding-top: 18px;}
	#howtoentry h2 {text-align: center; margin: auto auto 0.5em;}
	#howtoentry h2 img{ width: 110px; height: auto; margin: auto;}
	.youtube{width: 56%; margin-left: 2%; padding-bottom: 0.6em}
	.button { width: 100%; padding: 0; margin: 1.6em 0 0; font-size: 1.0em}
	.button a{ width: auto;}
	#topics{ width: 90%;}
	#topics h2{ text-align: center;margin: auto auto  0.8em;}

	#topics h3{ font-size:95%;}
	#topics p{ font-size:90%;}
		
	.stream{ width: 96%; margin: auto;}
	.stream h2{ margin: 0 auto;}
	.type2{ width: 90%; margin: auto auto 1.8rem; font-size: 1.2em; font-weight: bold;}
}