@charset "utf-8";

/* reset
----------------------------------------------- */

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,main,figure,figcaption {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 1em;
	line-height: 1em;
	list-style: none;
}
a,
a:hover,
a:active,
a:visited {
	margin: 0;
	padding: 0;
	text-decoration: none;
	overflow: hidden;
	outline: none;
}
img {
	vertical-align: top;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-ms-user-drag: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
hr {
	display: none;
}

/* clear */

.clear:after {
	content: "."; 
	display: block;
	height: 0; 
	clear: both; 
	visibility: hidden;
}

/* html
----------------------------------------------- */

html {
	margin: 0;
	padding: 0;
	-webkit-print-color-adjust: exact;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-ms-user-drag: none;
	font-size: 62.5%;
}

/* body
----------------------------------------------- */

body {
	margin: 0;
	padding: 0;
  font-size: 1.6rem;
	color: white;
	background: #1B1B1B;
}
a {
	color: #E60000;
}


/* -----------------------------------------------
PC
----------------------------------------------- */

@media print, screen and (min-width:1000px) {

	body {
		font-family: "Noto Sans Japanese", Meiryo, "Hiragino Kaku Gothic Pro", "MS PGothic", sans-serif;
	}
	.sp {
		display: none;
	}

	/* header
	----------------------------------------------- */

	#header {
		position: relative;
	}
	#header h1 {
		position: absolute;
		top: 0;
		left: 50%;
		margin: 0 0 0 -500px;
		z-index: 2;
	}
	#header h1 a {
		display: block;
		width: 111px;
		height: 88px;
		background: url(../images/neco.png) no-repeat;
		background-size: 111px 88px;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		transition: opacity 0.3s;
	}
	#header h1 a:hover {
		opacity: .7;
	}
	
	/* intro
	----------------------------------------------- */

	#intro {
		background: url(../images/intro-bg.jpg) repeat-x center top;
	}
	#intro .inner {
		position: relative;
		height: 587px;
		background: url(../images/intro-bg-center.jpg) no-repeat center top;
		overflow: hidden;
	}
	#intro h2 {
		position: absolute;
		top: 75px;
		left: 50%;
		margin: 0 0 0 -450px;
		opacity: 0;
		transform: scale(1.1);
	}
	#intro h2:before {
		position: absolute;
		top: 0;
		left: 12px;
		display: block;
		content: "";
		width: 284px;
		height: 230px;
		opacity: 0;
		background: url(../images/title-icon.png) no-repeat;
		transform: rotate(30deg) scale(1.4);
	}
	#intro.on .title {
		animation: shake 0.35s ease 0.8s forwards;
	}
	#intro.on h2 {
		opacity: 1;
		transform: scale(1);
		transition: opacity 0.1s 0.25s cubic-bezier(0.455, 0.200, 0.030, 0.770), transform 0.2s 0.25s cubic-bezier(0.455, 0.200, 0.030, 0.770);
	}
	#intro.on h2:before {
		opacity: 1;
		transform: scale(1);
		transition: opacity 0.2s 0.5s cubic-bezier(0.455, 0.200, 0.030, 0.770), transform 0.2s 0.5s cubic-bezier(0.455, 0.200, 0.030, 0.770);
	}

	/* nav
	----------------------------------------------- */

	#nav {
		position: relative;
		top: -62px;
	}
	#nav .inner {
		margin: auto;
		display: table;
		width: 1000px;
		background: #0A0A0A;
		border: solid 2px #FFE632;
	}
	#nav  h3,
	#nav  nav {
		display: table-cell;
		vertical-align: middle;
	}
	#nav  h3 {
		width: 120px;
		font-size: 2rem;
		line-height: 1.2;
		font-weight: 900;
		text-align: center;
		color: #0A0A0A;
		background: #FFE632;
	}
	#nav  h3 em {
		font-size: 4rem;
		font-style: normal;
	}
	#nav  h3 span {
		font-size: 3rem;
	}
	#nav ul {
		padding: 15px 0 30px;
		text-align: center;
	}
	#nav li {
		margin: 15px 8px 0;
		display: inline-block;
	}
	#nav a {
		position: relative;
		margin: auto;
		padding: 1.9rem 55px 1.9rem 25px;
		display: inline-block;
		min-height: 60px;
		font-size: 2.2rem;
		line-height: 1.2;
		font-weight: 700;
		text-align: center;
		color: white;
		background: #E60000;
		border-radius: 6px;
		box-sizing: border-box;
		transition: opacity 0.3s;
	}
	#nav a:before {
		position: absolute;
		top: 50%;
		right: 25px;
		display: block;
		content: "";
		width: 10px;
		height: 10px;
		border-top: 3px solid white;
		border-right: 3px solid white;
		transform: translateY(-80%) rotate(135deg);
	}
	#nav a .year {
		display: inline-block;
		margin: 0 10px 0 0;
		padding: .3rem 0 .2rem;
		width: 70px;
		font-size: 1.6rem;
		font-weight: 700;
		text-align: center;
		color: #0A0A0A;
		background: #FFE632;
	}
	#nav a br {
		display: none;
	}
	#nav a:hover {
		opacity: .7;
	}
	#nav a:hover:before {
		animation: bounce 1.4s infinite;
	}

	/* sns
	----------------------------------------------- */

	#sns {
		padding: 30px 0;
		background: #0A0A0A;
	}
	#sns ul {
		text-align: center;
	}
	#sns li {
		margin: 0 13px;
		display: inline-block;
	}
	#sns li a {
		position: relative;
		display: block;
		width: 44px;
		height: 44px;
		vertical-align: middle;
		text-align: center;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}
	#sns li a:before {
		position: absolute;
		top: 50%;
		left: 50%;
		display: inline-block;
		content: "";
		width: 44px;
		height: 44px;
		background: url(../images/sns.png) no-repeat;
		background-size: 132px 44px;
		transform: translate(-50%, -50%);
	}
	#sns .facebook a:before {
		background-position: -44px 0;
	}
	#sns .youtube a:before {
		background-position: -88px 0;
	}

	/* pageup
	----------------------------------------------- */
	
	#pageup {
		position: fixed;
		right: 25px;
		bottom: 83px;
		width: 50px;
		height: 50px;
		background: #E60000;
		border-radius: 4px;
		z-index: 20;
		cursor: pointer;
		transform: translateY(140px);
		transition: opacity 0.3s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
	}
	#pageup.on {
		transform: translateY(0px);
	}
	#pageup:hover {
		opacity: .7;
	}
	#pageup .inner {
		position: relative;
		width: 100%;
		height: 100%;
	}
	#pageup .inner:before,
	#pageup .inner:after {
		position: absolute;
		left: 50%;
		display: block;
		content: "";
	}
	#pageup .inner:before {
		top: 50%;
		width: 12px;
		height: 12px;
		border-top: solid 3px white;
		border-right: solid 3px white;
		transform: translate(-50%, 20%) rotate(315deg);
	}
	#pageup .inner:after {
		top: 13px;
		width: 20px;
		height: 2px;
		background: white;
		transform: translateX(-50%);
	}
	#pageup:hover .inner:before {
		animation: bounce02 1.4s infinite;
	}

	/* footer
	----------------------------------------------- */
	
	#footer {
		background: black;
		border-top: solid 1px #646464;
	}
	#footer .inner {
		position: relative;
		margin: auto;
		padding: 25px 0 0;
		width: 1000px;
		height: 60px;
		box-sizing: border-box;
	}
	#footer .logo {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	#footer .logo a {
		transition: opacity 0.3s;
	}
	#footer .logo a:hover {
		opacity: .7;
	}
	#footer .logo img {
		width: auto;
		height: 30px;
	}
	#footer .copyright {
		font-size: 1rem;
		font-family: Verdana;
		text-align: right;
		color: #C8C8C8;
	}

	/* main
	----------------------------------------------- */

	#main {
		padding: 0 0 120px;
		background: url(../images/main-bg.jpg) repeat center top;
	}

	/* timeline
	----------------------------------------------- */

	#timeline header h3 {
		position: relative;
		margin: 20px auto 0;
		width: 1000px;
		height: 175px;
	}
	#timeline header h3 .icon,
	#timeline header h3 .title {
		position: absolute;
		left: 50%;
	}
	#timeline header h3 .icon {
		top: 0;
		margin: 0 0 0 -292px;
	}
	#timeline header h3 .title {
		top: 85px;
		margin: 0 0 0 -150px;
	}
	#timeline .caution {
		padding: 0 0 45px;
		font-size: 1.6rem;
		letter-spacing: 0.1rem;
		font-weight: 700;
		text-align: center;
	}
	#timeline .table {
		display: table;
		width: 1000px;
		margin: auto;
	}
	#timeline .line,
	#timeline .lists {
		display: table-cell;
		vertical-align: top;
	}
	#timeline .line {
		padding: 20px 0 0;
		width: 38px;
		font-size: 2rem;
		line-height: 2;
		font-weight: 700;
		text-align: center;
		background: #2832AA;
	}
	#timeline .lists article {
		position: relative;
		padding: 0 0 40px;
	}
	#timeline .year {
		position: relative;
		margin: 0 0 0 40px;
		display: inline-block;
		min-width: 120px;
		font-size: 2rem;
		padding: .5rem 10px;
		line-height: 1;
		font-weight: 700;
		text-align: center;
		background: #2832AA;
		box-sizing: border-box;
	}
	#timeline .year:before {
		position: absolute;
		top: 50%;
		left: -40px;
		display: block;
		content: "";
		width: 40px;
		height: 4px;
		background: #2832AA;
		transform: translateY(-50%);
	}
	#timeline .year em {
		font-size: 2.6rem;
		font-style: normal;
	}
	#timeline h4 {
		margin: 1.3rem 0 0 40px;
		font-size: 2.4rem;
		line-height: 1.7;
		font-weight: 700;
	}
	#timeline h4 a {
		color: white;
		transition: opacity .3s;
	}
	#timeline h4 a:hover {
		opacity: .7;
	}
	#timeline h4 a span {
		margin: 0 10px;
		padding: 0 3px;
		font-size: 3.4rem;
		line-height: 1.2;
		display: inline-block;
		background: linear-gradient(transparent 60%, #E60000 60%);
	}
	#timeline h4 a.finish span {
		background: linear-gradient(transparent 60%, #505050 60%);
	}
	#timeline h4 a:before {
		display: inline-block;
		padding: .2rem 10px .3rem;
		min-width: 70px;
		font-family: 'Noto Sans Japanese', Meiryo, "Hiragino Kaku Gothic Pro", "MS PGothic", sans-serif;
		font-size: 2rem;
		line-height: 1;
		vertical-align: middle;
		text-align: center;
		vertical-align: .25rem;
		box-sizing: border-box;
	}
	#timeline h4 a.new:before {
		content: "NEW";
		color: #FFE632;
		background: #E60000;
	}
	#timeline h4 a.finish:before {
		content: "放送終了";
		color: #3B3B3B;
		background: #9D9D9D;
	}
	#timeline .event {
		position: absolute;
		top: 0;
		right: 0;
		padding: 1rem 0;
		width: 772px;
		min-height: 36px;
		font-size: 1.6rem;
		line-height: 1;
		background: #3B3B3B;
		box-sizing: border-box;
	}
	#timeline .event:before {
		position: absolute;
		top: 50%;
		left: -16px;
		display: block;
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 5px 16px 5px 0;
		border-color: transparent #3B3B3B transparent transparent;
		transform: translateY(-50%);
	}
	#timeline .event em {
		display: inline-block;
		padding: 0 20px;
		font-size: 1.4rem;
		font-weight: 700;
		font-style: normal;
		vertical-align: top;
		color: #9D9D9D;
	}
	/* showa */
	#timeline #showa .line {
		background: #2832AA url(../images/timetable-line-bg.png) no-repeat center bottom;
	}
	/* heisei */
	#timeline #heisei .line,
	#timeline #heisei .year {
		color: #0A0A0A;
		background: #FFE632;
	}
	#timeline #heisei .year:before {
		background: #FFE632;
	}
	
	/* modals
	----------------------------------------------- */
	
	#modals .modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		background: rgba(10,10,10,0.8);
		z-index: 30;
		visibility: hidden;
		opacity: 0;
		transform: translateY(100%);
		transition: opacity 0.3s;
		box-sizing: border-box;
	}
	#modals.open .modal.on {
		visibility: visible;
		opacity: 1;
		transform: translateY(0px);
	}
	#modals .modal .modal-wrap {
		position: absolute;
		top: 0px;
		left: 50%;
		margin: 150px 0 0 -400px;
		visibility: hidden;
		opacity: 0;
		transform: scale(0.9);
	}
	#modals.open .modal.on .modal-wrap {
		visibility: visible;
		opacity: 1;
		transform: scale(1);
	}
	#modals .modal .inner {
		margin: 0 0 100px;
		padding: 0 0 50px;
		width: 800px;
		min-height: 400px;
		background: #0A0A0A;
		border: 4px solid #E60000;
		box-sizing: border-box;
	}
	#modals .modal .close {
		position: absolute;
		top: -60px;
		right: 0;
		width: 40px;
		height: 40px;
		cursor: pointer;
		z-index: 1;
		visibility: hidden;
		opacity: 0;
		transform: rotate(45deg);
		transition: opacity 0.25s 0.15s, transform 0.25s 0.15s;
	}
	#modals .modal .close:before,
	#modals .modal .close:after {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		content: "";
		background: white;
		transform: translate(-50%,-50%);
	}
	#modals .modal .close:before {
		width: 50px;
		height: 2px;
	}
	#modals .modal .close:after {
		width: 2px;
		height: 50px;
	}
	#modals.open .modal .close {
		visibility: visible;
		opacity: 1;
	}

	#modals .modal h4 {
		position: relative;
		padding: 1.2rem 0 1.8rem 24px;
		font-size: 3.6rem;
		line-height: 1.3;
		font-weight: 700;
		text-align: center;
		color: white;
		background: #E60000;
	}
	#modals .modal h4:before {
		position: absolute;
		top: 0px;
		left: 0px;
		display: block;
		content: "";
		width: 140px;
		height: 100px;
		background: url(../images/modal-icon.png) no-repeat;
	}

	#modals .modal .program {
		padding: 0 56px;
	}
	#modals .modal .date,
	#modals .modal h5 {
		font-weight: 700;
		text-align: center;
	}
	#modals .modal .date {
		margin: 5rem 0 0;
		font-size: 1.8rem;
		line-height: 1.3;
	}
	#modals .modal .date span {
		display: block;
		font-size: 1.4rem;
	}
	#modals .modal h5 {
		margin: 1.5rem 0 0;
		font-size: 2.8rem;
		line-height: 1.3;
	}
	#modals .modal .summary {
		margin: 2rem 0 0;
		font-size: 1.8rem;
		line-height: 1.77;
		letter-spacing: 0.1rem;
		color: #E6E6E6;
		text-align: justify;
	}
	#modals .modal .link {
		padding: 35px 0 0;
	}
	#modals .modal .link a {
		position: relative;
		margin: auto;
		padding: 2.1rem 0;
		display: block;
		width: 360px;
		min-height: 60px;
		font-size: 1.8rem;
		font-weight: 700;
		text-align: center;
		color: white;
		background: #E60000;
		border-radius: 6px;
		box-sizing: border-box;
	}
	#modals .modal .link a:before {
		position: absolute;
		top: 50%;
		right: 27px;
		margin: -8px 0 0;
		display: block;
		content: "";
		width: 10px;
		height: 10px;
		border-top: 3px solid white;
		border-right: 3px solid white;
		transform: rotate(45deg);
	}
	#modals .modal .link a:hover {
		opacity: .7;
	}
	#modals .modal .link a:hover:before {
		animation: bouncemodal 1.4s infinite;
	}

	/* feature
	----------------------------------------------- */

	#feature {
		padding: 0 0 60px;
		text-align: center;
	}
	#feature .inner {
		margin: auto;
		width: 1000px;
		background: #0A0A0A;
		border: solid 2px white;
	}
	#feature h3 {
		padding: 28px 0;
		text-align: center;
		background: url(../images/feature-bg.png) no-repeat center center;
		border-bottom: 2px solid white;
	}
	#feature h3 .title {
		display: block;
		margin: 10px 0 0;
	}
	#feature h4 {
		margin: 40px 0 0;
		font-size: 2.4rem;
	}
	#feature .summary {
		margin: 2.5rem 0 0;
		font-size: 1.8rem;
		line-height: 1.5;
		color: #E6E6E6;
	}
	#feature .link {
		margin: 20px 0 0;
	}
	#feature .link a {
		position: relative;
		margin: auto;
		padding: 1.6rem 0;
		display: block;
		width: 400px;
		min-height: 50px;
		font-size: 1.8rem;
		font-weight: 700;
		text-align: center;
		color: white;
		background: #E60000;
		border-radius: 6px;
		box-sizing: border-box;
	}
	#feature .link a:before {
		position: absolute;
		top: 50%;
		right: 20px;
		margin: -6px 0 0;
		display: block;
		content: "";
		width: 12px;
		height: 12px;
		background: url(../images/link-icon-blank.png) no-repeat left top;
		background-size: 12px 12px;
	}
	/* campaign */
	#feature .campaign {
		padding: 0 0 40px;
		background: url(../images/feature-campaign-bg.png) no-repeat center center;
	}
	#feature .campaign h4 {
		position: relative;
		background: #FFE632;
	}
	#feature .campaign .icon {
		position: absolute;
		top: -32px;
		left: 50%;
		margin: 0 0 0 -370px;
	}
	#feature .campaign .summary {
		margin: 4rem 0 0;
		font-size: 2.4rem;
		font-weight: 700;
		color: white;
		text-shadow: 1px 1px 0px black;
	}
	#feature .campaign .summary em {
		font-style: normal;
		color: #FFE632; 
	}
	#feature .campaign .link a {
		padding: 3rem 0;
		width: 520px;
		min-height: 80px;
	}
	#feature .campaign .caution {
		margin: 2rem 0 0;
		font-size: 1.6rem;
	}
	#feature .campaign .caution a {
		color: white;
		text-decoration: underline;
	}
	/* hover */
	#feature .link a:hover,
	#feature .campaign .caution a:hover {
		opacity: .7;
	}


}


/* -----------------------------------------------
MOBILE
----------------------------------------------- */

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

	body {
		font-family: Verdana,"Avenir","Helvetica Neue","Helvetica","Arial","Hiragino Sans","ヒラギノ角ゴシック",YuGothic,"Yu Gothic","メイリオ", Meiryo,"ＭＳ Ｐゴシック","MS PGothic"; 
		-webkit-overflow-scrolling: touch;
	}
	.pc {
		display: none;
	}
	img {
		width: 100%;
		height: auto;
	}

		/* header
	----------------------------------------------- */

	#header {
		background: #ED7700;
	}
	#header h1 a {
		display: block;
		width: 100%;
		height: 40px;
		background: url(../images/sp_neco.png) no-repeat center center;
		background-size: 149px 22px;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	/* intro
	----------------------------------------------- */

	#intro {
		background: url(../images/intro-bg.jpg) repeat center top;
		background-size: cover;
	}
	#intro .inner {
		position: relative;
		background: url(../images/intro-bg-center.jpg) no-repeat center top;
		background-size: cover;
		overflow: hidden;
	}
	#intro h2 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		opacity: 0;
		text-align: center;
		transform: scale(1.1);
	}
	#intro.on .title {
		animation: shake 0.35s ease 0.8s forwards;
	}
	#intro.on h2 {
		opacity: 1;
		transform: scale(1);
		transition: opacity 0.3s 0.25s cubic-bezier(0.455, 0.200, 0.030, 0.770), transform 0.3s 0.25s cubic-bezier(0.455, 0.200, 0.030, 0.770);
	}
	#intro .title {
		position: relative;
		margin: auto;
		max-width: 640px;
	}

	/* nav
	----------------------------------------------- */

	#nav {
		position: relative;
		top: -50px;
	}
	#nav .inner {
		margin: auto;
		padding: 0 25px;
		max-width: 640px;
		box-sizing: border-box;
	}
	#nav  h3 {
		width: 50%;
		padding: 0.8rem 0 0.5rem;
		font-size: 1.2rem;
		font-weight: bold;
		text-align: center;
		color: #0A0A0A;
		background: #FFE632;
	}
	#nav  h3 em {
		font-size: 2rem;
		font-style: normal;
	}
	#nav  h3 span {
		font-size: 1.5rem;
	}
	#nav  h3 br {
		display: none;
	}
	#nav ul {
		padding: 5px 15px 20px;
		background: #0A0A0A;
		border: solid 2px #FFE632;
	}
	#nav li {
		margin: 15px 0 0;
	}
	#nav a {
		position: relative;
		margin: auto;
		padding: 0.8rem 32px 0.8rem 10px;
		display: block;
		min-height: 54px;
		font-size: 1.5rem;
		line-height: 1.2;
		font-weight: bold;
		color: white;
		background: #E60000;
		border-radius: 3px;
		box-sizing: border-box;
	}
	#nav a:before {
		position: absolute;
		top: 50%;
		right: 13px;
		display: block;
		content: "";
		width: 6px;
		height: 6px;
		border-top: 2px solid white;
		border-right: 2px solid white;
		transform: translateY(-80%) rotate(135deg);
	}
	#nav a .year {
		display: inline-block;
		margin: 0 0 5px;
		padding: .4rem 0 .2rem;
		width: 50px;
		font-size: 1rem;
		line-height: 1;
		vertical-align: top;
		font-weight: bold;
		text-align: center;
		color: #0A0A0A;
		background: #FFE632;
	}

	/* sns
	----------------------------------------------- */

	#sns {
		padding: 25px 0;
		background: #0A0A0A;
	}
	#sns ul {
		text-align: center;
	}
	#sns li {
		margin: 0 11px;
		display: inline-block;
	}
	#sns li a {
		position: relative;
		display: block;
		width: 44px;
		height: 44px;
		vertical-align: middle;
		text-align: center;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}
	#sns li a:before {
		position: absolute;
		top: 50%;
		left: 50%;
		display: inline-block;
		content: "";
		width: 44px;
		height: 44px;
		background: url(../images/sns.png) no-repeat;
		background-size: 132px 44px;
		transform: translate(-50%, -50%);
	}
	#sns .facebook a:before {
		background-position: -44px 0;
	}
	#sns .youtube a:before {
		background-position: -88px 0;
	}

	/* pageup
	----------------------------------------------- */
	
	#pageup {
		position: fixed;
		right: 25px;
		bottom: 40px;
		width: 40px;
		height: 40px;
		background: #E60000;
		border-radius: 3px;
		z-index: 20;
		cursor: pointer;
		transform: translateY(90px);
		transition: background-color 0.2s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
	}
	#pageup.on {
		transform: translateY(0px);
	}
	#pageup:hover {
	}
	#pageup .inner {
		position: relative;
		width: 100%;
		height: 100%;
	}
	#pageup .inner:before,
	#pageup .inner:after {
		position: absolute;
		left: 50%;
		display: block;
		content: "";
	}
	#pageup .inner:before {
		top: 50%;
		width: 10px;
		height: 10px;
		border-top: solid 2px white;
		border-right: solid 2px white;
		transform: translate(-50%, 20%) rotate(315deg);
	}
	#pageup .inner:after {
		top: 11px;
		width: 16px;
		height: 2px;
		background: white;
		transform: translateX(-50%);
	}

	/* footer
	----------------------------------------------- */
	
	#footer {
		background: black;
		border-top: solid 1px #646464;
	}
	#footer .inner {
		position: relative;
		margin: auto;
		padding: 30px 25px 0;
		min-height: 60px;
		box-sizing: border-box;
	}
	#footer .logo {
		position: absolute;
		top: 50%;
		left: 25px;
		transform: translateY(-50%);
	}
	#footer .logo img {
		width: auto;
		height: 20px;
	}
	#footer .copyright {
		font-size: 0.8rem;
		font-family: Verdana;
		text-align: right;
		color: #C8C8C8;
	}

	/* main
	----------------------------------------------- */

	#main {
		padding: 0 0 60px;
		background: url(../images/main-bg.jpg) repeat center top;
		background-size: 750px 150px;
	}

	/* timeline
	----------------------------------------------- */

	#timeline {
		margin: auto;
		padding: 0 25px;
		max-width: 640px;
		box-sizing: border-box;
	}
	#timeline header h3 {
		position: relative;
		margin: -10px auto 0;
		height: 86px;
	}
	#timeline header h3 .icon,
	#timeline header h3 .title {
		position: absolute;
		left: 50%;
	}
	#timeline header h3 .icon {
		top: 0;
		margin: 0 0 0 -130px;
	}
	#timeline header h3 .icon img {
		width: 100px;
		height: 76px;
	}
	#timeline header h3 .title {
		top: 50px;
		margin: 0 0 0 -77px;
	}
	#timeline header h3 .title img {
		width: 154px;
		height: 34px;
	}
	#timeline .caution {
		padding: 1rem 0 2.5rem;
		font-size: 1.2rem;
		line-height: 1.58;
		letter-spacing: 0.1rem;
		text-align: center;
	}
	#timeline .table {
		display: table;
		width: 100%;
	}
	#timeline .line,
	#timeline .lists {
		display: table-cell;
		vertical-align: top;
	}
	#timeline .line {
		padding: 10px 0 0;
		width: 20px;
		font-size: 1rem;
		line-height: 2;
		font-weight: bold;
		text-align: center;
		background: #2832AA;
	}
	#timeline .lists article {
		position: relative;
		padding: 0 0 30px;
	}
	#timeline .year {
		position: relative;
		margin: 0 0 0 15px;
		display: inline-block;
		min-width: 80px;
		padding: .5rem 13px .3rem;
		font-size: 1.2rem;
		line-height: 1;
		font-weight: bold;
		text-align: center;
		background: #2832AA;
		box-sizing: border-box;
	}
	#timeline .year:before {
		position: absolute;
		top: 50%;
		left: -15px;
		display: block;
		content: "";
		width: 15px;
		height: 3px;
		background: #2832AA;
		transform: translateY(-50%);
	}
	#timeline .year em {
		font-size: 1.7rem;
		font-style: normal;
	}
	#timeline h4 {
		margin: 1rem 0 0 15px;
		font-size: 1.5rem;
		line-height: 1.8;
		font-weight: bold;
	}
	#timeline h4 a {
		color: white;
		transition: opacity .3s;
	}
	#timeline h4 a:hover {
		opacity: .7;
	}
	#timeline h4 a span {
		margin: 0 5px;
		padding: 0 3px;
		font-size: 1.9rem;
		line-height: 1.2;
		background: linear-gradient(transparent 60%, #E60000 60%);
	}
	#timeline h4 a.finish span {
		background: linear-gradient(transparent 60%, #505050 60%);
	}	
	#timeline h4 a:before {
		display: inline-block;
		padding: .3rem 6px .2rem;
		min-width: 35px;
		font-family: 'Noto Sans JP', Meiryo, "Hiragino Kaku Gothic Pro", "MS PGothic", sans-serif;
		font-size: 1rem;
		line-height: 1;
		line-height: 1;
		vertical-align: middle;
		text-align: center;
		vertical-align: .25rem;
		box-sizing: border-box;
	}
	#timeline h4 a.new:before {
		content: "NEW";
		color: #FFE632;
		background: #E60000;
	}
	#timeline h4 a.finish:before {
		content: "放送終了";
		color: #3B3B3B;
		background: #9D9D9D;
	}
	#timeline .event {
		position: relative;
		margin: 20px 0 0 15px;
		padding: 12px 10px;
		font-size: 1.2rem;
		line-height: 1.5;
		text-align: justify;
		background: #3B3B3B;
		box-sizing: border-box;
	}
	#timeline .event:before {
		position: absolute;
		top: -8px;
		left: 10px;
		display: block;
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 5px 8px 5px;
		border-color: transparent transparent #3B3B3B transparent;
	}
	#timeline .event em {
		display: block;
		padding: 0 0 8px;
		font-size: 1rem;
		font-weight: bold;
		font-style: normal;
		color: #9D9D9D;
	}
	/* showa */
	#timeline #showa .line {
		background: #2832AA url(../images/timetable-line-bg.png) no-repeat center bottom;
		background-size: 20px 10px;
	}
	/* heisei */
	#timeline #heisei .line,
	#timeline #heisei .year {
		color: #0A0A0A;
		background: #FFE632;
	}
	#timeline #heisei .year:before {
		background: #FFE632;
	}

	/* modals
	----------------------------------------------- */

	#modals .modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		background: rgba(10,10,10,0.8);
		z-index: 10;
		visibility: hidden;
		opacity: 0;
		transform: translateY(100%);
		transition: opacity 0.3s;
		box-sizing: border-box;
	}
	#modals.open .modal.on {
		visibility: visible;
		opacity: 1;
		transform: translateY(0px);
	}
	#modals .modal .modal-wrap {
		position: absolute;
		padding: 0 25px;
		top: 0px;
		left: 0px;
		right: 0;
		margin: 85px 0 0;
		visibility: hidden;
		opacity: 0;
		transform: scale(0.9);
		transform: translateX(-50%);
	}
	#modals .modal.on .modal-wrap {
		visibility: visible;
		opacity: 1;
		transform: scale(1);
	}
	#modals .modal .inner {
		position: relative;
		margin: 0 auto 50px;
		padding: 0 0 25px;
		max-width: 580px;
		min-height: 200px;
		background: #0A0A0A;
		border: 2px solid #E60000;
		box-sizing: border-box;
	}
	#modals .modal .close {
		position: absolute;
		top: -50px;
		right: 2px;
		width: 30px;
		height: 30px;
		cursor: pointer;
		z-index: 1;
		visibility: hidden;
		opacity: 0;
		transform: rotate(45deg);
		transition: opacity 0.25s 0.15s, transform 0.25s 0.15s;
	}
	#modals .modal .close:before,
	#modals .modal .close:after {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		content: "";
		background: white;
		transform: translate(-50%,-50%);
	}
	#modals .modal .close:before {
		width: 40px;
		height: 2px;
	}
	#modals .modal .close:after {
		width: 2px;
		height: 40px;
	}
	#modals.open .modal .close {
		visibility: visible;
		opacity: 1;
	}
	
	#modals .modal h4 {
		position: relative;
		padding: 0.8rem 0 1rem 75px;
		font-size: 1.9rem;
		line-height: 1.3;
		font-weight: bold;
		color: white;
		background: #E60000;
	}
	#modals .modal h4:before {
		position: absolute;
		top: 0px;
		left: 0px;
		display: block;
		content: "";
		width: 70px;
		height: 50px;
		background: url(../images/modal-icon.png) no-repeat;
		background-size: 70px 50px;
	}
	#modals .modal .program {
		padding: 0 15px ;
	}
	#modals .modal .date {
		margin: 2.5rem 0 0;
		font-size: 1.2rem;
		line-height: 1.3;
		color: #B4B4B4;
	}
	#modals .modal .date span {
		padding: 0 0 0 1rem;
		font-size: 1rem;
		vertical-align: 0.1em;
	}
	#modals .modal h5 {
		margin: .5rem 0 0;
		font-size: 1.6rem;
		line-height: 1.3;
	}
	#modals .modal .summary {
		margin: 1.5rem 0 0;
		font-size: 1.4rem;
		line-height: 1.78;
		text-align: justify;
	}
	#modals .modal .link {
		padding: 25px 15px 0;
	}
	#modals .modal .link a {
		position: relative;
		padding: 1.5rem 0;
		display: block;
		min-height: 42px;
		font-size: 1.2rem;
		font-weight: bold;
		text-align: center;
		color: white;
		background: #E60000;
		border-radius: 3px;
		box-sizing: border-box;
	}
	#modals .modal .link a:before {
		position: absolute;
		top: 50%;
		right: 17px;
		margin: -2px 0 0;
		display: block;
		content: "";
		width: 7px;
		height: 7px;
		border-top: 2px solid white;
		border-right: 2px solid white;
		transform: rotate(45deg) translateY(-50%);
	}

	/* feature
	----------------------------------------------- */

	#feature {
		margin: -20px auto 0;
		padding: 0 25px 50px;
		max-width: 640px;
		text-align: center;
		box-sizing: border-box;
	}
	#feature .inner {
		background: #0A0A0A;
		border: solid 2px white;
	}
	#feature h3 {
		padding: 20px 0;
		background: url(../images/feature-bg.png) repeat center center;
		background-size: 499px 76px;
		border-bottom: 1px solid white;
	}
	#feature h3 span {
		display: block;
	}
	#feature h3 .copy {
		margin: auto;
		width: 235px;
		height: 12px;
	}
	#feature h3 .title {
		margin: 10px auto 0;
		width: 250px;
	}
	#feature h4 {
		margin: 1.5rem 15px 0;
		font-size: 1.5rem;
		line-height: 1.4;
	}
	#feature .summary {
		margin: 1rem 15px 0;
		font-size: 1.4rem;
		line-height: 1.7;
		color: #E6E6E6;
		text-align: justify;
	}
	#feature .summary br {
		display: none;
	}
	#feature .link {
		margin: 15px 15px 0;
	}
	#feature .link a {
		position: relative;
		padding: 1.5rem 0;
		display: block;
		min-height: 42px;
		font-size: 1.2rem;
		font-weight: bold;
		text-align: center;
		color: white;
		background: #E60000;
		border-radius: 3px;
		box-sizing: border-box;
	}
	#feature .link a:before {
		position: absolute;
		top: 50%;
		right: 10px;
		margin: -4px 0 0;
		display: block;
		content: "";
		width: 9px;
		height: 9px;
		background: url(../images/link-icon-blank.png) no-repeat left top;
		background-size: 9px 9px;
	}
	/* campaign */
	#feature .campaign {
		margin: 30px 0 0;
		padding: 0 0 20px;
		background: url(../images/feature-campaign-bg.png) no-repeat center center;
		background-size: cover;
	}
	#feature .campaign h4 {
		position: relative;
		margin: 0;
		padding: 5px 0;
		background: #FFE632;
	}
	#feature .campaign h4 .title {
		position: relative;
		display: block;
		margin: auto;
		width: 189px;
		z-index: 2;
	}
	#feature .campaign .icon {
		position: absolute;
		top: -23px;
		left: 50%;
		margin: 0 0 0 -153px;
		width: 70px;
	}
	#feature .campaign .summary {
		margin: 1.5rem 15px 0;
		font-size: 1.4rem;
		line-height: 1.5;
		font-weight: bold;
		text-align: center;
		color: white;
		text-shadow: 1px 1px 0px black;
	}
	#feature .campaign .summary em {
		font-style: normal;
		color: #FFE632; 
	}
	#feature .campaign .caution {
		margin: 2rem 15px 0;
		font-size: 1.2rem;
	}
	#feature .campaign .caution a {
		color: white;
		text-decoration: underline;
	}


}

/* -----------------------------------------------
Keyframes
----------------------------------------------- */

@keyframes bounce {
  0% { transform: translateY(-80%) rotate(135deg); }
  20% { transform: translateY(-50%) rotate(135deg); }
  40% { transform: translateY(-80%) rotate(135deg); }
  60% { transform: translateY(-50%) rotate(135deg); }
  100% { transform: translateY(-80%) rotate(135deg); }
}
@keyframes bounce02 {
  0% { transform: translate(-50%, 20%) rotate(315deg); }
  20% { transform: translate(-50%, 0%) rotate(315deg); }
  40% { transform: translate(-50%, 20%) rotate(315deg); }
  60% { transform: translate(-50%, 0%) rotate(315deg); }
  100% { transform: translate(-50%, 20%) rotate(315deg); }
}
@keyframes bouncemodal {
  0% { transform: translateX(0px) rotate(45deg); }
  20% { transform: translateX(4px) rotate(45deg); }
  40% { transform: translateX(0px) rotate(45deg); }
  60% { transform: translateX(4px) rotate(45deg); }
  100% { transform: translateX(0px) rotate(45deg); }
}
@keyframes shake {
  0% { transform: translateX(10px); }
  8% { transform: translateX(0px); }
  16% { transform: translateX(8px); }
  24% { transform: translateX(0px); }
  32% { transform: translateX(6px); }
  40% { transform: translateX(0px); }
}