@charset "utf-8";

@media screen and (max-width: 640px) {
	#main-box {
		width: 100%;
	}
	#main-box-inner {
		padding: 0 0 11.2%;
	}

	.onair-box,
	.archive-box {
	}
	.onair-box-inner,
	.archive-box-inner {
	}

	.onair-box .head {
		background: url(../images/sp/t-oa.png) no-repeat center top;
		padding: 20.469% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		margin: 0 auto 2.4%;
		position: relative;
	}
	.archive-box .head {
		background: url(../images/sp/t-archive2.png) no-repeat center top;
		padding: 20.469% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		margin: 0 auto 2.4%;
		position: relative;
	}
	.onair-box .head h3 {
		width: 100%;
		height: 100%;
		font-size: 1.5em;
		line-height: 1.0em;
		color: #fff;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}
	.archive-box .head h3 {
		width: 100%;
		height: 100%;
		font-size: 1.3rem;
		line-height: 1.3;
		color: #fff;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}

	.onair-box .onair-notice {
		text-align: center;
		color: #f00;
		font-size: 16px;
		font-weight: bold;
		margin: -1vw 0 3.5vw;
	}
	.onair-box .onair-detail {
		width: 100%;
		line-height: 1.6em;
		text-align: center;
		padding: 0 0 6.4%;
	}
	.onair-box .onair-image {
		width: 100%;
	}
	.onair-box .onair-image img {
		width: 100%;
		height: auto;
		vertical-align: middle;
	}
	.onair-box .onair-detail h4 {
		width: 90%;
		font-size: 1.6em;
		line-height: 1.4em;
		color: #ef00ef;
		padding: 5.4% 0 0;
		margin: 0 auto 6.4%;
	}
	.onair-box .onair-detail p {
		width: 90%;
		margin: 0 auto;
	}

	.archive-box .archive-list {
	}
	.archive-box .archive-list ul {
		width: 90%;
		list-style: none;
		margin: 0 auto;
	}
	.archive-box .archive-list li {
		line-height: 1.5;
		border-bottom: 2px solid #00e7a7;
		padding: 0 0 3.2%;
		margin: 0 auto 3.2%;
	}
	.archive-box .archive-list li img {
		display: inline-block;
		width: 36%;
		height: auto;
		vertical-align: middle;
		margin: 0 2.0% 0 0;
	}
	.archive-box .archive-list li p {
		display: inline-block;
		width: 60%;
		vertical-align: middle;
	}
	.archive-box .archive-list li p span.oa {
		font-weight: bold;
	}
	.archive-box .archive-list li a:link {
		display: block;
		color: #000;
		text-decoration: none;
	}
	.archive-box .archive-list li a:visited {
		color: #000;
	}
	.archive-box .archive-list li a:active,
	.archive-box .archive-list li a:hover {
		color: #000;
	}
	.archive-box .archive-list li a:focus {
		color: #000;
	}

	.onair-box .onair-detail {
		width: 100%;
		line-height: 1.6;
		text-align: center;
		padding: 0 0 6.4%;
	}
	.onair-box .onair-image {
		width: 100%;
	}
	.onair-box .onair-image img {
		width: 100%;
		height: auto;
		vertical-align: middle;
	}
	.onair-box .onair-detail h4 {
		width: 90%;
		font-size: 1.6em;
		line-height: 1.4;
		color: #ef00ef;
		padding: 5.4% 0 0;
		margin: 0 auto 6.4%;
	}
	.onair-box .onair-detail p {
		width: 90%;
		margin: 0 auto;
	}


	.archive {
		width: 48%;
		margin: 0 auto;
	}
	.archive a.archive-guest {
		display: block;
		background: url(../images/sp/btn-archive.png) no-repeat 0 0;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		padding: 100% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
	}

	/* 超情報＆超トレンド バックナンバー */
	.archive2 .info-box {
	}
	.archive2 .info-box h3.heading-movie,
	.archive2 .info-box h3.heading-game,
	.archive2 .info-box h3.heading-trend {
		font-size: 1.7rem;
		width: calc(90% - 0.5em);
		margin: 0 auto 9.6%;
		color: #fff;
		padding: .3em .5em;
	}
	.archive2 .info-box h3.heading-movie {
		background-color: #ff48ff;
	}
	.archive2 .info-box h3.heading-game {
		background-color: #00e8b6;
	}
	.archive2 .info-box h3.heading-trend {
		background-color: #802186;
	}
	.archive2 .info-box .head {
		background: url(../images/sp/t-oa2.png) no-repeat center top;
		padding: 20.469% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		margin: 0 auto 3.2%;
		position: relative;
	}
	.archive2 .info-box .head h3 {
		width: 100%;
		height: 100%;
		font-size: 1.4rem;
		line-height: 1.3;
		color: #fff;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}
	.archive2 .list-box {
		text-align: center;
		margin: 0 auto 7.2%;
	}
	.archive2 .list-box select {
		font-size: 16px;
	}
	.archive2 .head-date {
		width: 90%;
		margin: 0 auto 9.6%;
	}
	.archive2 .head-date h4 {
		background: #ffeb25;
		font-size: 1.7rem;
		line-height: 1.0;
		color: #f643f2;
		text-align: center;
		padding: 1.0em 0.6em 0.8em;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	.archive2 .info-detail {
		width: 90%;
		margin: 0 auto 9.6%;
	}
	.archive2 .info-detail:last-child {
		margin: 0 auto 3.6%;
	}
	.archive2 .info-detail h5.info-head {
		font-size: 1.3rem;
		line-height: 1.0;
		color: #f643f2;
		font-weight: normal;
		border-bottom: 2px solid #f643f2;
		padding: 0 0 0.4em;
		margin: 0 0 0.8em;
	}
	.archive2 .info-detail h5.game {
		color: #00e8b6;
		border-color: #00e8b6;
	}
	.archive2 .info-detail h5.trend {
		color: #802186;
		border-color: #802186;
	}
	.archive2 .info-detail p {
		line-height: 1.6;
		margin: 0 0 6.4%;
	}
	.archive2 .movie-block .info-detail p strong {
		color: #f643f2;
	}
	.archive2 .game-block .info-detail p strong {
		color: #00e8b6;
	}
	.archive2 .trend-block .info-detail p strong {
		color: #802186;
	}
	.archive2 .info-detail .info-image {
		padding: 0 0 3.6%;
	}
	.archive2 .info-detail .info-image div {
		width: 100%;
		margin: 0 0 3.6%;
	}
	.archive2 .info-detail .info-image div img {
		width: 100%;
		height: auto;
		vertical-align: middle;
	}
}


@media screen and (min-width: 641px) {
	#main-box {
		width: 100%;
		/* background: url(../images/pc/main-bg02.png) no-repeat center top; */
		padding: 122px 0 54px;
		margin: -122px 0 0;
	}
	#main-box-inner {
	}

	.onair-box,
	.archive-box {
	}
	.onair-box-inner,
	.archive-box-inner {
		width: 980px;
		margin: 0 auto;
	}

	.onair-box .head {
		display: table;
		background: url(../images/pc/t-oa.png) no-repeat 0 0;
		width: 600px;
		height: 160px;
		padding: 0 141px;
		margin: 0 auto 20px;
	}
	.archive-box .head {
		display: table;
		background: url(../images/pc/t-archive.png) no-repeat 0 0;
		width: 600px;
		height: 160px;
		padding: 0 141px;
		margin: 0 auto 38px;
	}
	.onair-box .head h3,
	.archive-box .head h3 {
		display: table-cell;
		font-size: 30px;
		line-height: 1.0em;
		color: #fff;
		text-align: center;
		vertical-align: middle;
		padding: 8px 0 0;
	}

	.onair-box .onair-detail {
		font-size: 16px;
		line-height: 1.6em;
		text-align: center;
		padding: 0 0 54px;
	}
	.onair-box .onair-detail img {
		max-width: 100%;
		height: auto;
		vertical-align: middle;
	}
	.onair-box .onair-detail h4,
	.onair-box .onair-detail p {
		width: 940px;
		margin: 0 auto;
	}
	.onair-box .onair-detail h4 {
		font-size: 34px;
		line-height: 1.4em;
		color: #ef00ef;
		text-align: center;
		padding: 26px 0 0;
		margin: 0 auto 20px;
	}

	.archive-box .archive-list {
	}
	.archive-box .archive-list ul {
		width: 752px;
		list-style: none;
		margin: 0 auto;
	}
	.archive-box .archive-list li {
		font-size: 16px;
		line-height: 1.5em;
		border-bottom: 3px solid #00e7a7;
		padding: 0 0 16px;
		margin: 0 auto 16px;
	}
	.archive-box .archive-list li img {
		display: inline-block;
		width: 178px;
		height: auto;
		vertical-align: middle;
		margin: 0 22px 0 0;
		*zoom: 1;
		*display: inline;
	}
	.archive-box .archive-list li p {
		display: inline-block;
		vertical-align: middle;
		width: 540px;
		*zoom: 1;
		*display: inline;
	}
	.archive-box .archive-list li p span.oa {
		font-weight: bold;
	}
	.archive-box .archive-list li a:link {
		display: block;
		color: #000;
		text-decoration: none;
	}
	.archive-box .archive-list li a:visited {
		color: #000;
	}
	.archive-box .archive-list li a:active,
	.archive-box .archive-list li a:hover {
		color: #000;
	}
	.archive-box .archive-list li a:active p,
	.archive-box .archive-list li a:hover p {
		color: #000;
		text-decoration: underline;
	}
	.archive-box .archive-list li a:focus {
		color: #000;
	}

	.onair-box .onair-notice {
		text-align: center;
		color: #f00;
		font-size: 16px;
		font-weight: bold;
		margin: -25px 0 25px;
	}
	.onair-box .onair-detail {
		font-size: 16px;
		line-height: 1.6em;
		text-align: center;
		padding: 0 0 54px;
	}
	.onair-box .onair-detail img {
		max-width: 100%;
		height: auto;
		vertical-align: middle;
	}
	.onair-box .onair-detail h4,
	.onair-box .onair-detail p {
		width: 940px;
		margin: 0 auto;
	}
	.onair-box .onair-detail h4 {
		font-size: 34px;
		line-height: 1.4em;
		color: #ef00ef;
		text-align: center;
		padding: 26px 0 0;
		margin: 0 auto 20px;
	}


	.archive {
		width: 224px;
		margin: 0 auto;
	}
	.archive a.archive-guest {
		display: block;
		background: url(../images/pc/btn-archive.png) no-repeat 0 0;
		font-size: 0px;
		line-height: 0px;
		text-indent: -9999px;
		text-decoration: none;
		width: 224px;
		height: 224px;
		margin: 0 auto;
	}
	.archive a.archive-guest:hover {
		background: url(../images/pc/btn-archive.png) no-repeat 0 -224px;
	}

	/* 超情報＆超トレンド バックナンバー */
	.archive2 .info-box {
		width: 980px;
		margin: 0 auto;
	}
	.archive2 .info-box h3.heading-movie,
	.archive2 .info-box h3.heading-game,
	.archive2 .info-box h3.heading-trend {
		font-size: 30px;
		width: 925px;
		margin: 0 auto 30px;
		color: #fff;
		padding-left: .5em;
	}
	.archive2 .info-box h3.heading-movie {
		background-color: #ff48ff;
	}
	.archive2 .info-box h3.heading-game {
		background-color: #00e8b6;
	}
	.archive2 .info-box h3.heading-trend {
		background-color: #802186;
	}
	.archive2 .info-box .head {
		display: table;
		background: url(../images/pc/t-oa.png) no-repeat 0 0;
		width: 600px;
		height: 160px;
		padding: 0 141px;
		margin: 0 auto 16px;
	}
	.archive2 .info-box .head h3 {
		display: table-cell;
		font-size: 30px;
		line-height: 1.0em;
		color: #fff;
		text-align: center;
		vertical-align: middle;
		padding: 8px 0 0;
	}
	.archive2 .list-box {
		text-align: center;
		margin: 0 auto 42px;
	}
	.archive2 .list-box select {
		font-size: 16px;
	}
	.archive2 .head-date {
		width: 940px;
		margin: 0 auto 54px;
	}
	.archive2 .head-date h4 {
		background: #ffeb25;
		font-size: 34px;
		line-height: 1.0;
		color: #f643f2;
		text-align: center;
		padding: 26px 1.0em 22px;
	}
	.archive2 .info-detail {
		width: 940px;
		margin: 0 auto 56px;
	}
	.archive2 .info-detail:last-child {
		margin: 0 auto 20px;
	}
	.archive2 .info-detail h5.info-head {
		/* font-size: 36px; */
		font-size: 26px;
		line-height: 1.0;
		color: #f643f2;
		font-weight: normal;
		border-bottom: 2px solid #f643f2;
		/* padding: 0 0 18px; */
		padding: 0 0 14px;
		margin: 0 0 24px;
		display: inline-block;
	}
	.archive2 .info-detail h5.game {
		color: #00e8b6;
		border-color: #00e8b6;
	}
	.archive2 .info-detail h5.trend {
		color: #802186;
		border-color: #802186;
	}
	.archive2 .info-detail p {
		font-size: 16px;
		line-height: 1.6;
		margin: 0 0 24px;
	}
	.archive2 .movie-block .info-detail p strong {
		color: #f643f2;
	}
	.archive2 .game-block .info-detail p strong {
		color: #00e8b6;
	}
	.archive2 .trend-block .info-detail p strong {
		color: #802186;
	}
	.archive2 .info-detail .info-image {
		font-size: 0;
		margin: 0 0 10px;
	}
	.archive2 .info-detail .info-image div {
		display: inline-block;
		width: 304px;
		margin: 0 14px 14px 0;
	}
	.archive2 .info-detail .info-image div img {
		width: 100%;
		height: auto;
		vertical-align: middle;
	}
	.archive2 .info-detail .info-image div:nth-child(3n) {
		margin: 0 0 14px;
	}
}