@charset "UTF-8";

/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# PC・スマホ 共通設定 #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */

/* L1 ######################################## BODY要素 ######################################## */

body {
	min-width: 1060px;
}

/* L1 ######################################## 更新履歴 ######################################## */

#history-wrapper {
	position: relative;
	width: 950px;
	margin: 0 auto;
}

#history {
	overflow: hidden;
	position: relative;
	left: 50px;
	z-index: 500;
	width: 950px;
	height: 0;
	margin: 0 auto;
	
	background: rgba(0, 0, 0, 0.9);
}
#history.animate {
	
	-webkit-transition: height 0.3s ease-in-out;
	-moz-transition: height 0.3s ease-in-out;
	-ms-transition: height 0.3s ease-in-out;
	-o-transition: height 0.3s ease-in-out;
	transition: height 0.3s ease-in-out;
}

#history h2 {
	display: none;
}

#history ul {
	position: relative;
	list-style-type: none;
	padding: 2px 0;
}

#history ul li {
	overflow: hidden;
	display: table;
	width: 100%;
	padding: 0 2px;
	color: #ffffff;
	font-size: 1.2rem;
	line-height: 1.6;
	border-collapse: separate;
	border-spacing: 2px;
	
	box-sizing: border-box;
}

#history ul li.dummy {
	overflow: hidden;
	visibility: hidden;
	display: block;
	height: 0;
	text-align: left;
	white-space: nowrap;
}

#history ul li.ani-left {
	
	-webkit-transition: left 0.8s ease-in-out;
	-moz-transition: left 0.8s ease-in-out;
	-ms-transition: left 0.8s ease-in-out;
	-o-transition: left 0.8s ease-in-out;
	transition: left 0.8s ease-in-out;
}
#history ul li.ani-height {
	
	-webkit-transition: height 0.5s ease-out;
	-moz-transition: height 0.5s ease-out;
	-ms-transition: height 0.5s ease-out;
	-o-transition: height 0.5s ease-out;
	transition: height 0.5s ease-out;
}

#history ul li span.date {
	display: table-cell;
	width: 140px;
	padding: 0.6em 0;
	text-align: center;
	vertical-align: middle;
	
	background: rgba(255, 255, 255, 0.1);
}

#history ul li span.text {
	display: table-cell;
	padding: 0.6em 10px;
	text-align: left;
	vertical-align: middle;
	
	background: rgba(255, 255, 255, 0.02);
}

#history ul li:first-child span.text {
	padding-right: 35px;
}
#history ul li:first-child.inside span.text {
	padding-right: 10px !important;
}

#history ul li a {
	color: #cce5ff !important;
	text-decoration: none;
}

#history:hover ul li a {
	text-decoration: underline;
}

#history ul li.highlight {
	color: #ffff00 !important;
	font-weight: bold;
}

#history ul li.highlight a {
	color: #ffff00 !important;
}

#history ul li span.mark {
	margin-right: 0.5em;
	background: rgba(255, 255, 255, 0.2);
}

/* L2 **************************************** 開閉ボタン **************************************** */

#history i {
	cursor: pointer;
	position: absolute;
	top: 8px;
	right: 8px;
	color: #ffffff;
	font-size: 2.6rem;
}

#history i.opened {
	-webkit-animation: spinOpen 0.3s linear forwards;
	-moz-animation: spinOpen 0.3s linear forwards;
	-o-animation: spinOpen 0.3s linear forwards;
	animation: spinOpen 0.3s linear forwards;
}

#history i.closed {
	-webkit-animation: spinClose 0.3s linear forwards;
	-moz-animation: spinClose 0.3s linear forwards;
	-o-animation: spinClose 0.3s linear forwards;
	animation: spinClose 0.3s linear forwards;
}

@-webkit-keyframes spinOpen {
	0%   { -webkit-transform: rotate(0); }
	100% { -webkit-transform: rotate(180deg); }
}

@keyframes spinOpen {
	0%   { transform: rotate(0); }
	100% { transform: rotate(180deg); }
}

@-webkit-keyframes spinClose {
	0%   { -webkit-transform: rotate(180deg); }
	100% { -webkit-transform: rotate(0); }
}

@keyframes spinClose {
	0%   { transform: rotate(180deg); }
	100% { transform: rotate(0); }
}

/* ++++++++++++++++++++++++++++++ 履歴クローズ時の設定 ++++++++++++++++++++++++++++++ */

#history.closed ul li span.text {
	overflow: hidden;
	max-width: 1px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#history.closed ul li span.text {
	padding-right: 35px !important;
}

/* L1 ######################################## メインビジュアル ######################################## */

#main-image {
	position: relative;
	left: 50px;
	width: 950px;
	margin: 0 auto;
	
	box-sizing: border-box;
}

#main-image h2 {
	display: none;
}


#main-image > p.locale {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 100;
	padding: 0.2em 1em;
	font-size: 1.4rem;
	border: 1px solid #cccccc;
	background: #ffffff -webkit-linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.08));
	background: #ffffff -moz-linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.08));
	background: #ffffff -o-linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.08));
	background: #ffffff -ms-linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.08));
	background: #ffffff linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.08));
	border-radius: 5px;
}

#main-image > ul {
	overflow: hidden;
	position: relative;
	list-style-type: none;
	width: 950px;
	border: 1px solid #ffffff;
	
	background: rgba(0, 0, 0, 0.85);
	box-sizing: border-box;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

#main-image > ul.animate {
	
	-webkit-transition: height 0.5s ease-in-out;
	-moz-transition: height 0.5s ease-in-out;
	-ms-transition: height 0.5s ease-in-out;
	-o-transition: height 0.5s ease-in-out;
	transition: height 0.5s ease-in-out;
}

#main-image > ul li {
	overflow: hidden;
	visibility: hidden;
	position: absolute;
	left: 0;
	list-style-type: none;
}

#main-image > ul li:first-child {
	position: relative;
}

#main-image > ul li.animate {
	
	-webkit-transition: left 0.8s ease-in-out;
	-moz-transition: left 0.8s ease-in-out;
	-ms-transition: left 0.8s ease-in-out;
	-o-transition: left 0.8s ease-in-out;
	transition: left 0.8s ease-in-out;
}

/* L2 **************************************** セレクタ **************************************** */

#main-image-selector {
	position: absolute;
	bottom: -5px;
	left: -100px;
	width: 90px;
}

#main-image-selector ul {
	position: relative;
}

#main-image-selector li {
	margin-bottom: 5px;
}

#main-image-selector li.clickable {
	cursor: pointer;
}

#main-image-selector li img {
	border: 1px solid #ffffff;
}

#main-image-selector div.cursor {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 90px;
	border: 2px solid #336699;
	
	background: rgba(255, 255, 255, 0.5);
	box-sizing: border-box;
}

#main-image-selector div.cursor.animate {
	
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}


#music-video {
	width: 1024px;
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* L1 ######################################## YouTube ######################################## */

/*
#music-video.format div.youtube figure:nth-last-of-type(2) {
	display: inline-block;
	width: 460px;
	margin: 0 5px;
}
#music-video.format div.youtube figure:nth-last-of-type(2) div.movie {
	position: relative;
	width: auto;
	height: auto;
	padding-bottom : 56.25%;
}
#music-video.format div.youtube figure:nth-last-of-type(2) iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#music-video.format div.youtube figure:nth-of-type(2) {
	display: inline-block;
	width: 460px;
	margin: 0 5px;
}
#music-video.format div.youtube figure:nth-of-type(2) div.movie {
	position: relative;
	width: auto;
	height: auto;
	padding-bottom : 56.25%;
}
#music-video.format div.youtube figure:nth-of-type(2) iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
*/

#music-video.format div.youtube figure {
	margin: 5px;
}

#music-video.format div.youtube figure:first-child:nth-last-child(2),
#music-video.format div.youtube figure:first-child:nth-last-child(2) ~ figure,
#music-video.format div.youtube figure:first-child:nth-last-child(4),
#music-video.format div.youtube figure:first-child:nth-last-child(4) ~ figure {
	width: 460px;
}

#music-video.format div.youtube figure:first-child:nth-last-child(3),
#music-video.format div.youtube figure:first-child:nth-last-child(3) ~ figure {
	width: 310px;
}

#music-video.format div.youtube div.movie {
	position: relative;
	width: auto;
	height: auto;
	padding-bottom : 56.25%;
}

#music-video.format div.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* L1 ######################################## プッシュコンテンツ ######################################## */

#push {
	overflow: hidden;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 10px 25px;
	text-align: center;
	line-height: 1.0;
	white-space: nowrap;
	
	box-sizing: border-box;
}

#push h2 {
	display: none;
}

#push div.wrapper {
	position: relative;
	left: 0;
	
	-webkit-transition: left 1s ease-in-out;
	-moz-transition: left 1s ease-in-out;
	-ms-transition: left 1s ease-in-out;
	-o-transition: left 1s ease-in-out;
	transition: left 1s ease-in-out;
}

#push a {
	color: #000000;
	text-decoration: none;
}

/* L2 **************************************** 各コンテンツ **************************************** */

#push div.wrapper div {
	position: relative;
	display: inline-block;
	min-height: 80px;
	font-size: 1.3rem;
	text-align: left;
	vertical-align: top;
}

/* L3 ======================================== テキストリンク ======================================== */

#push div.text {
	display: inline-table;
	padding: 0;
	border: 1px solid #ffffff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.85);
}

#push div.text p {
	display: table-cell;
	padding: 0 25px;
	height: 80px;
	color: #666600;
	vertical-align: middle;
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.4;
	
	background: rgba(255, 255, 255, 0.8) -webkit-gradient(linear, left top, left bottom, color-stop(0.00, rgba(0, 0, 0, 0.05)), color-stop(1.00, rgba(0, 0, 0, 0.1)));
	background: rgba(255, 255, 255, 0.8) -webkit-linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
	background: rgba(255, 255, 255, 0.8) -moz-linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
	background: rgba(255, 255, 255, 0.8) -o-linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
	background: rgba(255, 255, 255, 0.8) -ms-linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
	background: rgba(255, 255, 255, 0.8) linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
}

/* L3 ======================================== 画像バナー ======================================== */

#push div.banner figure img {
	border: 1px solid #ffffff;
	
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* L3 ======================================== 商品情報 ======================================== */

#push div.product {
	display: inline-block;
	border: 1px solid #ffffff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#push div.product figure {
	float: left;
	position: relative;
	z-index: 100;
}

#push dl {
	float: left;
	min-height: 80px;
	
	background: rgba(255, 255, 255, 0.85);
}

#push dl dt {
	overflow: hidden;
	min-width: 130px;
	max-width: 250px;
	padding: 0.8em 15px 0.2em 10px;
	color: #666600;
	font-size: 1.6rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	
	background: rgba(0, 0, 0, 0.1);
}

#push dl dt span {
	overflow: hidden;
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#push dl dd.release {
	overflow: hidden;
	max-width: 250px;
	margin-top: 0.5em;
	padding: 0 70px 0 10px;
	color: #666666;
}


#push dl > dd.info {
	padding: 0 0 0 10px;
	color: #666666;
	max-width: 250px;
	margin-top: 0.5em;
	line-height: 1.4;
	white-space: normal;
}

#push dl > dd.info ul {
	list-style-type: none;
}

#push dl > dd.info ul li {
	margin: 0.3em 0;
	font-size: 1.0rem;
}

#push dl dd.type {
	position: absolute;
	bottom: 2px;
	right: 2px;
	padding: 5px;
	color: #ffffff;
	font-size: 1.1rem;
	background: #336699;
}

#push > div.cursor {
	display: none;
	cursor: pointer;
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 200;
	width: 56px;
	height: 56px;
	margin: auto;
	padding: 0;
	color: #336699;
	background: rgba(255, 255, 255, 0.85);
	
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

#push > div.cursor.prev {
	left: -22px;
	text-align: right;
	border-radius: 0 50% 50% 0;
}

#push > div.cursor.next {
	right: -22px;
	text-align: left;
	border-radius: 50% 0 0 50%;
}

#push > div.cursor i {
	position: absolute;
	top: 10px;
	font-size: 3.7rem;
}

#push > div.prev i {
	right: 16px;
}

#push > div.next i {
	left: 17px;
}

/* L1 ######################################## トピックス ######################################## */

#topics {
	position: relative;
	width: 1024px;
	margin: 20px auto 0 auto;
}

#topics h2 {
	position: relative;
	float: left;
	color: #ffffff;
	margin-bottom: 5px;
	padding: 0.4em 20px;
	font-family: "Century Gothic", "メイリオ", "Trebuchet MS";
	font-size: 1.8rem;
	font-weight: normal;
	line-height: 1.0;
	letter-spacing: 0.2em;
	
	border-radius: 22px;
	background: rgba(0, 0, 0, 0.85);
}
#topics h2::before {
	content: "\f05a";
	margin-right: 6px;
	font-family: "FontAwesome";
}
#topics h2::after {
	content: "－ 最新情報 －";
	margin-left: 6px;
	color: #ffffff;
	font-family: "メイリオ", "HiraKakuProN-W3", "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
	font-size: 1.2rem;
	letter-spacing: 0;
}

#topics h3 {
	display: none;
}

#topics article {
	clear: both;
	position: relative;
	margin-bottom: 1px;
	padding-right: 50px;
	border: 1px solid #ffffff;
	background: rgba(255, 255, 255, 0.85);
	
	/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
}
#topics article::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 30px 0 0;
	border-color: rgba(0, 0, 0, 0.1) transparent transparent transparent;
}
#topics article.animate {
	
	-webkit-transition: margin 0.3s linear;
	-moz-transition: margin 0.3s linear;
	-ms-transition: margin 0.3s linear;
	-o-transition: margin 0.3s linear;
	transition: margin 0.3s linear;
}

#topics article div.clickable {
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 100%;
	background: rgba(0, 0, 0, 0.08);
}

#topics article > dl {
	width: 100%;
}

/* L2 **************************************** トピックスタイトル **************************************** */

#topics article > dl > dt {
	cursor: pointer;
	overflow: hidden;
	padding: 0.8em 25px 0.4em 25px;
	color: #336699;
	font-size: 1.8rem;
	/* white-space: nowrap; */
	background: rgba(255, 255, 255, 0.4);
}
#topics article.animate > dl > dt {
	
	-webkit-transition: color 0.3s linear;
	-moz-transition: color 0.3s linear;
	-ms-transition: color 0.3s linear;
	-o-transition: color 0.3s linear;
	transition: color 0.3s linear;
}

#topics article > dl > dt i {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	right: -2px;
	z-index: 100;
	width: 50px;
	height: 32px;
	margin: auto;
	color: #ffffff;
	font-size: 3.6rem;
	text-align: center;
	line-height: 1.0;
	vertical-align: middle;
	
	text-shadow: none;
	
	-webkit-transition: right 0.3s linear;
	-moz-transition: right 0.3s linear;
	-ms-transition: right 0.3s linear;
	-o-transition: right 0.3s linear;
	transition: right 0.3s linear;
	
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

#topics article > dl > dt i.opened {
	right: 2px;
	-webkit-animation: spinOpen 0.3s linear forwards;
	-moz-animation: spinOpen 0.3s linear forwards;
	-o-animation: spinOpen 0.3s linear forwards;
	animation: spinOpen 0.3s linear forwards;
}

#topics article > dl > dt i.closed {
	right: -2px;
	-webkit-animation: spinClose 0.3s linear forwards;
	-moz-animation: spinClose 0.3s linear forwards;
	-o-animation: spinClose 0.3s linear forwards;
	animation: spinClose 0.3s linear forwards;
}

#topics article > dl > dt span.text {
	overflow: hidden;
	display: block;
	width: 100%;
	text-overflow: ellipsis;
}

#topics article.animate > dl > dt span.text {
	
	-webkit-transition: height 0.8s ease-in-out;
	-moz-transition: height 0.8s ease-in-out;
	-ms-transition: height 0.8s ease-in-out;
	-o-transition: height 0.8s ease-in-out;
	transition: height 0.8s ease-in-out;
}

/* L2 **************************************** トピックス区分・日付 **************************************** */

#topics article > dl > dd.data {
	overflow: hidden;
	cursor: pointer;
	padding-bottom: 8px;
	font-size: 1.2rem;
	line-height: 1.0;
	
	background: rgba(255, 255, 255, 0.4);
}

#topics article > dl > dd.data time {
	float: right;
	margin-right: 25px;
	padding: 0.5em 30px;
	color: #666600;
	font-size: 1.1rem;
	text-align: center;
	line-height: 1.0;
	border-top: 1px dotted rgba(0, 0, 0, 0.5);
	border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
}

#topics article > dl > dd.data ul.genre {
	float: left;
	overflow: hidden;
	list-style-type: none;
	margin-left: 25px;
}

#topics article > dl > dd.data ul.genre li {
	float: left;
	min-width: 7em;
	margin-right: 2px;
	padding: 0.5em 1em;
	color: #999999;
	text-align: center;
	
	background: rgba(0, 0, 0, 0.1);
	
	box-sizing: border-box;
}

#topics article > dl > dd.data ul.genre li.on {
	color: #ffffff;
	background: #336699;
}

#topics article > dl > dd.data ul.genre li i {
	margin-right: 6px;
}

/* L2 **************************************** トピックス本文 **************************************** */

#topics article > dl > dd.info {
	clear: both;
	overflow: hidden;
}

#topics article.animate > dl > dd.info {
	
	-webkit-transition: height 0.8s ease-in-out;
	-moz-transition: height 0.8s ease-in-out;
	-ms-transition: height 0.8s ease-in-out;
	-o-transition: height 0.8s ease-in-out;
	transition: height 0.8s ease-in-out;
}

#topics article > dl > dd.info div.wrapper {
	padding: 20px 50px;
}

/* L2 **************************************** 記事オープン時の設定 **************************************** */

#topics article.opened {
	margin: 15px 0;
}

#topics > h2 + article.opened {
	margin: 0 0 15px 0 !important;
}

#topics article:last-child.opened {
	margin: 15px 0 0 0;
}

#topics article.opened > dl > dt {
	color: #cc0000;
	white-space: normal;
}

/* L1 ######################################## 汎用バナー ######################################## */

#banner {
	right: -50px;
}

/* L1 ######################################## テイチクエンタテインメントオンラインショップバナー ######################################## */

#te-shopping {
	right: -50px;
}

/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# PC・スマホ 共通設定 ここまで #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */