@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
::selection { background: #CCC; }
::-moz-selection {
background: #CCC;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 100;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 200;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 300;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 400;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}
body { font-family: "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif; }
a { color: #666; }
a:hover { text-decoration: none; }
.os { font-family: 'Oswald', sans-serif; }
#fullWrap {
	min-width: 1200px;
	overflow: hidden;
}
#top {
	position: relative;
	min-height: 620px;
}
#top h1 {
	background-image: url(../images/common/logo.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 135px;
	width: 170px;
	position: fixed;
	left: 0px;
	top: 0px;
	background-color: #FFE9F2;
	z-index: 9800;
}
#sub h1 {
	background-image: url(../images/common/logo.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 135px;
	width: 170px;
	position: fixed;
	left: 0px;
	top: 0px;
	background-color: #FFF;
	z-index: 9800;
}
#sub h1 a {
	display: block;
	height: 135px;
}
#btnMenu {
	height: 50px;
	width: 170px;
	position: fixed;
	top: 135px;
	z-index: 9500;
	background-color: #FFF;
	left: 0;
}
#btnMenu a {
	display: block;
	height: 50px;
	width: 170px;
	background-image: url(../images/common/btn_menu.png);
	transition: all 0.5s ease;
}
#btnMenu a:hover { opacity: 0.7; }
#btnMenu a.active { background-image: url(../images/common/btn_menu_close.png); }
#topCarousel {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 47px;
	overflow: hidden;
}
#topCarousel li {
	position: absolute;
	width: 110%;
	left: 110%;
	top: 0px;
	bottom: 0px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 0;
}
@keyframes carouselActive { 0% {
 left:110%;
 opacity:0;
}
 5% {
 left:0px;
 opacity:1;
}
 100% {
 left:-10%;
 opacity:1;
}
}
@keyframes carouselFade { 0% {
 left:-10%;
 opacity:1;
}
 5% {
 left:-110%;
 opacity:0;
}
 6% {
 left:110%;
 opacity:0;
}
 100% {
 left:110%;
 opacity:0;
}
}
@keyframes carouselActiveRev { 0% {
 left:100%;
 opacity:0;
}
 5% {
 left:0;
 opacity:1;
}
 100% {
 left:-15%;
 opacity:1;
}
}
@keyframes carouselFadeRev { 0% {
 left:-15%;
 opacity:1;
}
 5% {
 left:-100%;
 opacity:0;
}
 6% {
 left:100%;
 opacity:0;
}
 100% {
 left:100%;
 opacity:0;
}
}
#topCarousel li.active { animation: carouselActive 5s cubic-bezier(0, 0.46, 1, 0.57); }
#topCarousel li.fade { animation: carouselFade 5s cubic-bezier(0, 0.46, 1, 0.57); }
#ca1 { background-image: url(../images/top/ca1.jpg); }
#ca2 { background-image: url(../images/top/ca2.jpg); }
#ca3 { background-image: url(../images/top/ca3.jpg); }
#ca4 { background-image: url(../images/top/ca4.jpg); }
#ca5 { background-image: url(../images/top/ca5.jpg); }
#ca6 { background-image: url(../images/top/ca6.jpg); }
#ca7 { background-image: url(../images/top/ca7.jpg); }
#ca8 { background-image: url(../images/top/ca8.jpg); }
#ca9 { background-image: url(../images/top/ca9.jpg); }
#ca10 { background-image: url(../images/top/ca10.jpg); }
#ca11 { background-image: url(../images/top/ca11.jpg); }
#topCarouselText {
	position: absolute;
	height: 166px;
	width: 488px;
	left: 30px;
	bottom: 70px;
}
#topCarouselText li {
	background-repeat: no-repeat;
	background-position: left bottom;
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	opacity: 0;
	transform: rotateY(90deg);
	transition: all 0.4s ease;
}
#topCarouselText li.active {
	transform: rotateY(0deg);
	transition-delay: 0.2s;
	opacity: 1;
}
#cat1 { background-image: url(../images/top/cat1.png); }
#cat2 { background-image: url(../images/top/cat2.png); }
#cat3 { background-image: url(../images/top/cat3.png); }
#cat4 { background-image: url(../images/top/cat4.png); }
#cat5 { background-image: url(../images/top/cat5.png); }
#cat6 { background-image: url(../images/top/cat6.png); }
#cat7 { background-image: url(../images/top/cat7.png); }
#cat8 { background-image: url(../images/top/cat8.png); }
#cat9 { background-image: url(../images/top/cat9.png); }
#cat10 { background-image: url(../images/top/cat10.png); }
#cat11 { background-image: url(../images/top/cat11.png); }
#topCarouselNav {
	background-color: #EC80AD;
	position: absolute;
	height: 47px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}
#cygamesLogo {
	height: 22px;
	width: 70px;
	position: absolute;
	left: 30px;
	top: 12px;
}
#cygamesLogo a {
	background-image: url(../images/common/cygames_logo_w.png?20210510);
	display: block;
	height: 22px;
}
#topCopyright {
	font-size: 10px;
	line-height: 49px;
	padding-left: 120px;
	color: #FFF;
	height: 47px;
}
#topCarouselName {
	position: absolute;
	height: 47px;
	width: 600px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	overflow: hidden;
}
#topCarouselName li {
	background-repeat: no-repeat;
	background-position: right center;
	position: absolute;
	top: 0px;
	right: -100px;
	bottom: 0px;
	opacity: 0;
	transition: all 0.3s ease;
	width: 100%;
}
#topCarouselName li.active {
	right: 30px;
	opacity: 1;
}
#can1 { background-image: url(../images/top/can1.png); }
#can2 { background-image: url(../images/top/can2.png); }
#can3 { background-image: url(../images/top/can3.png); }
#can4 { background-image: url(../images/top/can4.png); }
#can5 { background-image: url(../images/top/can5.png); }
#can6 { background-image: url(../images/top/can6.png); }
#can7 { background-image: url(../images/top/can7.png); }
#can8 { background-image: url(../images/top/can8.png); }
#can9 { background-image: url(../images/top/can9.png); }
#can10 { background-image: url(../images/top/can10.png); }
#can11 { background-image: url(../images/top/can11.png); }
#topCarouselBtn {
	height: 41px;
	width: 528px;
	margin-left: -264px;
	position: absolute;
	left: 50%;
	top: -31px;
}
#topCarouselBtn li {
	float: left;
	height: 51px;
	width: 41px;
	margin-right: 3px;
	margin-left: 4px;
}
#topCarouselBtn li a {
	padding-top: 10px;
	display: block;
	height: 41px;
	transition: all 0.5s ease;
}
#topCarouselBtn li.active a,
#topCarouselBtn li a:hover {
	padding-top: 0px;
	padding-bottom: 10px;
}
#topCarouselBtn li.active { pointer-events: none; }
#fcontents article {
	float: left;
	width: 50%;
	position: relative;
	color: #FFF;
	height: 320px;
}
#fnews { background-color: #81448F; }
.articleCntr {
	text-align: center;
	width: 440px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
#fnews .articleCntr {
	background-image: url(../images/fcontent/fnews_icon.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 40px;
}
#fnews a { color: #FFF; }
#fnews dt {
	font-size: 20px;
	line-height: 26px;
	height: 26px;
	display: table;
	margin-right: auto;
	margin-left: auto;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	margin-bottom: 20px;
}
#fnews dd {
	font-size: 20px;
	line-height: 30px;
}
#fnews dl { padding-bottom: 20px; }
#moreNews {
	height: 37px;
	width: 127px;
	margin-right: auto;
	margin-left: auto;
}
#moreNews a {
	background-image: url(../images/fcontent/btn_morenews.png);
	display: block;
	height: 37px;
	transition: all 0.3s ease;
}
#moreNews a:hover { background-color: rgba(255,255,255,0.2); }
#fnews h2 {
	background-image: url(../images/fcontent/fnews_h2.png);
	position: absolute;
	height: 75px;
	width: 223px;
	right: 0px;
	bottom: 0px;
}
#fmovie {
	background-image: url(../images/fcontent/fmovie_thumb.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#fmovie a {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	background-image: url(../images/fcontent/fmovie_icon.png);
	background-repeat: no-repeat;
	background-position: center center;
	transition: all 0.5s ease;
	background-color: rgba(255,255,255,0);
}
#fmovie a:hover { background-color: rgba(255,255,255,0.3); }
#fmovie h2 {
	background-image: url(../images/fcontent/fmovie_h2.png);
	height: 75px;
	width: 230px;
	position: absolute;
	left: 0px;
	bottom: 0px;
}
#fcharacter { background-color: #FF84B8; }
#fcharacter h2 {
	background-image: url(../images/fcontent/fcharacter_h2.png);
	height: 75px;
	width: 321px;
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index: 5000;
}
#fcharacter a {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	transition: all 0.5s ease;
	background-color: rgba(255,255,255,0);
}
#fcharacter a:hover { background-color: rgba(255,255,255,0.3); }
#fdatein {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	background-color: #35A462;
}
#fdatein .more {
	height: 180px;
	width: 432px;
	margin-top: -90px;
	margin-left: -216px;
	position: absolute;
	left: 50%;
	top: 50%;
	background-image: url(../images/fcontent/fstartdate.png);
	background-repeat: no-repeat;
	box-sizing: border-box;
	padding-left: 0;
	padding-top: 150px;
}
#fdatein .more a { transition: all 0.5s ease; }
#fdatein .more a:hover { opacity: 0.7; }
#ftwitter {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0;
	background-color: #415cdb;
}
#ftwitter .tBox {
	width: 600px;
	margin: 0 auto;
	text-align: center;
	display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
#flink {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0;
	background-color: #D05D5F;
	display: flex;
	align-items: center;
	justify-content: center;
}
#flink h2 {
	background-image: url(../images/fcontent/flink_h2.png);
	position: absolute;
	height: 75px;
	width: 223px;
	right: 0px;
	bottom: 0px;
}
#share {
	height: 74px;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
}
#share li {
	float: left;
	height: 74px;
	width: 50%;
}
#share li a {
	display: block;
	height: 74px;
	transition: all 0.3s ease;
}
#share li a:hover { opacity: 0.7; }
#tw a {
	background-color: #4E9CD4;
	background-image: url(../images/fcontent/ftwitter.png);
	background-repeat: no-repeat;
	background-position: center center;
}
#fb a {
	background-color: #3D598C;
	background-image: url(../images/fcontent/ffacebook.png);
	background-position: center center;
	background-repeat: no-repeat;
}
#fcharacters {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
}
#fcharacters li {
	position: absolute;
	left: 110%;
	top: 0px;
	bottom: 0px;
	background-position: left center;
	width: calc(100% + 89px);
	min-width: 1059px;
	opacity: 0;
	background-repeat: no-repeat;
}
#fcharacters li.active { animation: carouselActive 2s cubic-bezier(0, 0.46, 1, 0.57); }
#fcharacters li.fade { animation: carouselFade 2s cubic-bezier(0, 0.46, 1, 0.57); }
#fc1 { background-image: url(../images/fcontent/fc1.png); }
#fc2 { background-image: url(../images/fcontent/fc2.png); }
#fc3 { background-image: url(../images/fcontent/fc3.png); }
#fc4 { background-image: url(../images/fcontent/fc4.png); }
#fc5 { background-image: url(../images/fcontent/fc5.png); }
#fc6 { background-image: url(../images/fcontent/fc6.png); }
#fc7 { background-image: url(../images/fcontent/fc7.png); }
#fc8 { background-image: url(../images/fcontent/fc8.png); }
#fc9 { background-image: url(../images/fcontent/fc9.png); }
#fc10 { background-image: url(../images/fcontent/fc10.png); }
nav {
	background-color: #FFF;
	position: fixed;
	z-index: 9001;
	left: -100%;
	top: 0px;
	right: 100%;
	bottom: 0px;
	overflow: auto;
	transition: all 0.5s cubic-bezier(0.56, 0.02, 0.38, 1);
}
nav.active {
	left: 0;
	right: 0;
}
#navin {
	height: 100%;
	width: 100%;
	min-width: 1200px;
	min-height: 620px;
	position: relative;
	overflow: hidden;
}
#navin ul {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 530px;
}
#navin li {
	padding-bottom: 28px;
	width: 265px;
	float: left;
	height: 31px;
}
#navin li a { transition: all 0.5s ease; }
#navin li a:hover { opacity: 0.6; }
#topCarouselHover {
	position: absolute;
	height: 334px;
	width: 288px;
	right: 0px;
	bottom: 0px;
}
#topCarouselHover li {
	background-repeat: no-repeat;
	background-position: right bottom;
	position: absolute;
	width: 100%;
	left: 100px;
	top: 0px;
	bottom: 0px;
	opacity: 0;
	transition: all 0.3s ease;
}
#topCarouselHover li.active {
	left: 0;
	opacity: 1;
}
#cah2 { background-image: url(../images/top/cah2.png); }
#cah3 { background-image: url(../images/top/cah3.png); }
#cah4 { background-image: url(../images/top/cah4.png); }
#cah5 { background-image: url(../images/top/cah5.png); }
#cah6 { background-image: url(../images/top/cah6.png); }
#cah7 { background-image: url(../images/top/cah7.png); }
#cah8 { background-image: url(../images/top/cah8.png); }
#cah9 { background-image: url(../images/top/cah9.png); }
#cah10 { background-image: url(../images/top/cah10.png); }
#cah11 { background-image: url(../images/top/cah11.png); }
#modalMovie {
	position: fixed;
	z-index: 9999;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	overflow: auto;
	display: none;
}
#modalMovie iframe { vertical-align: bottom; }
.modalMoviein {
	position: relative;
	min-height: 620px;
	min-width: 1200px;
	width: 100%;
	height: 100%;
}
.mmClose {
	position: absolute;
	right: 40px;
	top: 40px;
	width: 60px;
	height: 60px;
	z-index: 9989;
}
#loading {
	background-color: #FFF;
	background-image: url(../images/common/logo.png);
	background-repeat: no-repeat;
	background-position: center center;
	position: fixed;
	z-index: 25000;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}
#sub header {
	margin-left: 170px;
	height: 185px;
	position: relative;
}
#sub header h2 {
	margin-top: -41px;
	padding-left: 124px;
	position: absolute;
	left: 50%;
	top: 50%;
	height: 84px;
	background-repeat: no-repeat;
	background-position: left top;
	box-sizing: border-box;
	padding-top: 21px;
	transform: translateX(-50%);
}
#sub header h2 span {
	font-size: 14px;
	line-height: 40px;
	color: #FFF;
	display: block;
	letter-spacing: 0.1em;
	text-align: center;
	text-indent: 0.1em;
	transform: skewX(-10deg);
	font-weight: 600;
}
#sectionFooter {
	padding-top: 100px;
	padding-bottom: 300px;
	position: relative;
	overflow: hidden;
}
#bttop { text-align: center; }
#bttop a { transition: all 0.5s ease; }
#bttop a:hover { opacity: 0.7; }
#sectionFooter:before {
	content: '';
	position: absolute;
	bottom: -1780px;
	height: 2000px;
	left: 0;
	right: 0;
	z-index: -1;
	transform: skewY(-10deg);
}
#sectionFooter:after {
	position: absolute;
	content: '';
	width: 488px;
	height: 166px;
	left: 40px;
	bottom: 30px;
	background-position: left bottom;
	background-repeat: no-repeat;
}
#subCopyright {
	margin-top: 20px;
	height: 80px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
    align-items: center;
}
#subCopyright p {
	display: flex;
	justify-content: center;
    align-items: center;
	line-height: 49px;
	font-size: 12px;
	height: 47px;
	font-weight: 500;
}
#subCopyright .link {
	display: flex;
	justify-content: center;
	align-items: center;
}
#subCopyright .link > a {
	text-decoration: underline;
	color: #000;
	transition: all 0.5s ease;
	font-size: 12px;
	margin-left: 20px;
}
#subCopyright .link > a:hover { opacity: 0.7; }
#subCopyright p span {
	display: block;
	height: 33px;
	width: 105px;
	margin-top: 7px;
	margin-right: 30px;
}
#subCopyright p span a {
	background-image: url(../images/common/cygames_logo_k.svg?20240724);
	background-size: contain;
    background-repeat: no-repeat;
	display: block;
	height: 33px;
	width: 105px;
	text-indent: -9879px;
}
#onair header { background-color: #7E88E8; }
#onair header h2 { background-image: url(../images/common/character_icon05.png); }
#onair article {
	width: 910px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 93px;
	padding-bottom: 0;
}
#onair article h3 { padding-bottom: 24px; }
#onair article li {
	line-height: 44px;
	letter-spacing: 0.1em;
	height: 44px;
	color: #7E88E8;
	font-size: 20px;
	transform: skewX(-10deg);
	font-weight: 600;
}
#onair #sectionFooter {
	background-image: url(../images/common/footer_chara8.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top: 150px;
	padding-bottom: 330px;
}
#onair #sectionFooter:before { background-color: #E1E4FB }
#onair #sectionFooter:after { background-image: url(../images/top/cat9.png); }
#music header { background-color: #3fa8b9; }
#music header h2 { background-image: url(../images/common/character_icon07.png); }


#musicBox header { background-color: #3fa8b9; }
#musicBox header h2 { background-image: url(../images/common/character_icon07.png); }
#musicBox #sectionFooter {
	background-image: url(../images/common/footer_chara10.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top: 0px;
	padding-bottom: 400px;
}
#musicBox #sectionFooter:before { background-color: #D9EEF1 }
#musicBox #sectionFooter:after { background-image: url(../images/top/cat11.png); }


#music .mBox {
	border-bottom: 1px dashed #3fa8b9;
	margin-bottom: 40px;
}
#music article {
	width: 910px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 93px;
	padding-bottom: 0;
}
#music article h3 {
	padding-bottom: 44px;
	text-align: center;
	line-height: 44px;
	height: 44px;
	letter-spacing: 0.1em;
	color: #3fa8b9;
	font-size: 24px;
	transform: skewX(-10deg);
	font-weight: 600;
}
#music article h4 {
	line-height: 44px;
	letter-spacing: 0.1em;
	height: 104px;
	color: #3fa8b9;
	font-size: 20px;
	font-weight: 600;
}
#music article h4 span.sizeS {
	letter-spacing: 0.1em;
	color: #3fa8b9;
	font-size: 14px;
	font-weight: 600;
}
#music article p {
	padding-bottom: 40px;
	font-size: 15px;
	line-height: 30px;
}
#music #sectionFooter {
	background-image: url(../images/common/footer_chara10.png);
	background-repeat: no-repeat;
	background-position: right bottom;
}
#music #sectionFooter:before { background-color: #D9EEF1 }
#music #sectionFooter:after { background-image: url(../images/top/cat11.png); }

#musicBox article {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 76px;
	padding-bottom: 100px;
}

#musicBox article h3 {
	padding-bottom: 44px;
	text-align: center;
	line-height: 44px;
	height: 44px;
	letter-spacing: 0.1em;
	color: #3fa8b9;
	font-size: 24px;
	transform: skewX(-10deg);
	font-weight: 600;
}

#musicboxList li {
	float: left;
	width: 480px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 50px;
}
#musicboxList li:nth-child(odd) { clear: both; }
.musicBoxThumb {
	height: 270px;
	width: 480px;
}
.musicBoxThumb a {
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
	height: 270px;
	width: 480px;
	background-size: cover;
	position: relative;
	transition: all 0.3s ease;
}
.musicBoxThumb a:before {
	content: 'MORE';
	position: absolute;
	right: 20px;
	bottom: 15px;
	width: 80px;
	height: 26px;
	line-height: 26px;
	transition: all 0.3s ease;
	transform: skewX(-10deg);
	box-shadow: 5px 5px 0px 0px #000000;
	font-weight: bold;
	color: #3fa8b9;
	text-align: center;
	background-color: #D9EEF1;
}
.musicBoxThumb a:hover { opacity: 0.8; }
.musicBoxTitle {
	text-align: center;
	padding-top: 20px;
	font-size: 20px;
	line-height: 35px;
	color: #3fa8b9;
	font-weight: 600;
	transform: skewX(-10deg);
}
.musicBoxTitle .bds {
	font-size: 14px;
	color: #D7CC00;
	font-weight: 600;
}


#introduction header { background-color: #31AC65; }
#introduction header h2 { background-image: url(../images/common/character_icon02.png); }
#introduction article {
	width: 878px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 76px;
	padding-bottom: 100px;
}
#introduction #sectionFooter {
	background-image: url(../images/common/footer_chara2.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top: 50px;
	padding-bottom: 330px;
}
#introduction #sectionFooter:before { background-color: #C1E6D0 }
#introduction #sectionFooter:after { background-image: url(../images/top/cat3.png); }
#introductionBlock {
	background-color: #31AC65;
	position: relative;
	padding-top: 15px;
	padding-right: 336px;
	padding-bottom: 15px;
	padding-left: 15px;
}
#introductionBlock:after {
	content: '';
	position: absolute;
	right: -78px;
	bottom: 0;
	width: 468px;
	height: 676px;
	background-image: url(../images/introduction/introduction_image.png);
}
#introductionIn {
	background-color: #FFF;
	padding: 34px;
	box-sizing: border-box;
}
#introductionIn h3 { padding-bottom: 18px; }
#introductionIn p {
	font-size: 17px;
	line-height: 38px;
	font-weight: 600;
	color: #000;
}
#introductionIn p span {
	font-size: 20px;
	color: #31AC65;
}
#news header { background-color: #FF84B8; }
#news header h2 { background-image: url(../images/common/character_icon01.png); }
#news article {
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 90px;
	padding-bottom: 100px;
}
#news #sectionFooter {
	background-image: url(../images/common/footer_chara1.png);
	background-repeat: no-repeat;
	background-position: right bottom, center bottom;
	padding-top: 0px;
	padding-bottom: 330px;
}
#news #sectionFooter:before { background-color: #ffd7e8 }
#news #sectionFooter:after { background-image: url(../images/top/cat2.png); }
/*sarabure*/
#newsSp header { background-color: #FF84B8; }
#newsSp header h2 { background-image: url(../images/common/character_icon01.png); }
#newsSp article {
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 90px;
	padding-bottom: 100px;
}
#newsSp #sectionFooter {
	background-image: url(../images/common/footer_chara1.png);
	background-repeat: no-repeat;
	background-position: right bottom, center bottom;
	padding-top: 50px;
	padding-bottom: 330px;
}
#newsSp #sectionFooter:before { background-color: #ffd7e8 }
#newsSp #sectionFooter:after { background-image: url(../images/top/cat2.png); }
#newsSi header { background-color: #31AC65; }
#newsSi header h2 { background-image: url(../images/common/character_icon02.png); }
#newsSi article {
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 90px;
	padding-bottom: 100px;
}
#newsSi #sectionFooter {
	background-image: url(../images/common/footer_chara2.png);
	background-repeat: no-repeat;
	background-position: right bottom, center bottom;
	padding-top: 50px;
	padding-bottom: 330px;
}
#newsSi #sectionFooter:before { background-color: #C1E6D0 }
#newsSi #sectionFooter:after { background-image: url(../images/top/cat3.png); }
#newsTo header { background-color: #415cdb; }
#newsTo header h2 { background-image: url(../images/common/character_icon03.png); }
#newsTo article {
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 90px;
	padding-bottom: 100px;
}
#newsTo #sectionFooter {
	background-image: url(../images/common/footer_chara3.png);
	background-repeat: no-repeat;
	background-position: right bottom, center bottom;
	padding-top: 50px;
	padding-bottom: 330px;
}
#newsTo #sectionFooter:before { background-color: #8cc2ea }
#newsTo #sectionFooter:after { background-image: url(../images/top/cat4.png); }


#newsVo header { background-color: #415cdb; }
#newsVo header h2 {}
#newsVo article {
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 90px;
	padding-bottom: 100px;
}

#newsGo header { background-color: #dd3256; }
#newsGo header h2 {}
#newsGo article {
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 90px;
	padding-bottom: 100px;
}


#news article li {
	height: 86px;
	margin-bottom: 20px;
}
#news article li dt {
	height: 86px;
	width: 250px;
	background-image: url(../images/news/news_icon.png);
	background-repeat: no-repeat;
	background-position: 51px 27px;
	font-size: 20px;
	line-height: 86px;
	color: #FFF;
	box-sizing: border-box;
	padding-left: 103px;
	float: left;
	margin-right: 40px;
	position: relative;
}
#news article li dt:before {
	content: '';
	position: absolute;
	left: -2000px;
	right: 250px;
	top: 0px;
	bottom: 0px;
}
#news article li:nth-child(6n+1) dt,
#news article li:nth-child(6n+1) dt:before,
#newsArticle.color1:before { background-color: #884798; }
#news article li:nth-child(6n+2) dt,
#news article li:nth-child(6n+2) dt:before,
#newsArticle.color2:before { background-color: #FF84B8; }
#news article li:nth-child(6n+3) dt,
#news article li:nth-child(6n+3) dt:before,
#newsArticle.color3:before { background-color: #FFD863; }
#news article li:nth-child(6n+4) dt,
#news article li:nth-child(6n+4) dt:before,
#newsArticle.color4:before { background-color: #31AC65; }
#news article li:nth-child(6n+5) dt,
#news article li:nth-child(6n+5) dt:before,
#newsArticle.color5:before { background-color: #5BC6D6; }
#news article li:nth-child(6n) dt,
#news article li:nth-child(6n) dt:before,
#newsArticle.color6:before { background-color: #F2939C; }
#newsArticle.color7:before { background-color: #415cdb; }
#newsArticle.color8:before { background-color: #dd3256; }
#newsArticle.color9:before { background-color: #3faec8; }
.colorT1 { color: #884798; }
.colorT2 { color: #FF84B8; }
.colorT3 { color: #FFD863; }
.colorT4 { color: #31AC65; }
.colorT5 { color: #5BC6D6; }
.colorT6 { color: #F2939C; }
.colorT7 { color: #415cdb; }
.colorT8 { color: #dd3256; }
.colorT9 { color: #3faec8; }
#news article li dd {
	float: left;
	height: 86px;
	width: 800px;
	position: relative;
}
#news article li dd a {
	display: block;
	position: absolute;
	width: 800px;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	line-height: 33px;
}
#newsArticle {
	position: relative;
	padding-right: 60px;
	padding-left: 294px;
	margin-bottom: 60px;
}
#newsArticle:before {
	content: "";
	position: absolute;
	right: 950px;
	left: -2000px;
	top: 0;
	bottom: 0;
}
#newsArticle.color1:before { background-color: #884798; }
#newsArticle h3 {
	font-size: 20px;
	line-height: 38px;
	padding-top: 25px;
	padding-bottom: 30px;
	font-weight: bold;
}
#newsArticleDate {
	height: 86px;
	width: 250px;
	background-image: url(../images/news/news_icon.png);
	background-repeat: no-repeat;
	background-position: 51px 27px;
	font-size: 20px;
	line-height: 86px;
	color: #FFF;
	box-sizing: border-box;
	padding-left: 103px;
	position: absolute;
	left: 0;
	top: 0;
	margin-right: 40px;
	position: absolute;
}
#newsArticleIn p {
	padding-bottom: 30px;
	font-size: 15px;
	line-height: 30px;
}
#newsArticleIn img { max-width: 846px; }
#caststaff { position: relative; }
#caststaff:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 50%;
	bottom: 0;
	z-index: -1;
	background-color: #FEE;
}
#caststaff header { background-color: #D86262; }
#caststaff header h2 { background-image: url(../images/common/character_icon06.png); }
#caststaff article {
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 80px;
	padding-bottom: 0;
	color: #d86262;
}
#caststaff #sectionFooter {
	background-image: url(../images/common/footer_chara9.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top: 50px;
	padding-bottom: 330px;
}
#caststaff #sectionFooter:before { background-color: #F8D6DC }
#caststaff #sectionFooter:after { background-image: url(../images/top/cat10.png); }
#caststaff h3 {
	text-align: center;
	padding-bottom: 50px;
}
/*
#cast {
	float: left;
	width: 50%;
}
#cast ul { padding-left: 48px; }
#cast li {
	float: left;
	height: 83px;
	width: 270px;
	margin-bottom: 27px;
}
.castThumb {
	float: left;
	height: 83px;
	width: 83px;
	margin-right: 20px;
}
#cast li dl {
	float: left;
	width: 167px;
	padding-top: 15px;
	padding-bottom: 15px;
}
#cast li dt {
	font-size: 12px;
	line-height: 22px;
	height: 22px;
	letter-spacing: 0.1em;
	transform: skewX(-10deg);
	font-weight: 600;
}
#cast li dd {
	font-size: 20px;
	line-height: 31px;
	height: 31px;
	letter-spacing: 0.1em;
	transform: skewX(-10deg);
	font-weight: 600;
}
*/
#cast {
	float: left;
	width: 50%;
	padding-top: 15px;
}
#cast ul { padding-left: 100px; }
#cast li {
	font-size: 20px;
	line-height: 40px;
	font-weight: 600;
	transform: skewX(-10deg);
	margin-bottom: 10px;
	letter-spacing: 0.1em;
	position: relative;
	display: table;
}
#cast li span { font-size: 12px; }
#staff {
	float: left;
	width: 50%;
	padding-top: 15px;
}
#staff ul { padding-left: 100px; }
#staff li {
	font-size: 20px;
	line-height: 40px;
	font-weight: 600;
	transform: skewX(-10deg);
	margin-bottom: 10px;
	letter-spacing: 0.1em;
}
#staff li span { font-size: 12px; }
#character header { background-color: #415cdb; }
#character header h2 { background-image: url(../images/common/character_icon03.png); }
#character article {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 95px;
	padding-bottom: 0;
}
#character #sectionFooter {
	background-image: url(../images/common/footer_chara3.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top: 100px;
	padding-bottom: 400px;
}
#character #sectionFooter:before { background-color: #8cc2ea }
#character #sectionFooter:after { background-image: url(../images/top/cat4.png); }
#character article #mainChara {
	width: 950px;
	position: relative;
	margin-bottom: 70px;
}
#character article #mainChara li {
	transition: all 1.0s ease;
	float: left;
	height: 220px;
	width: 150px;
	padding-right: 20px;
	padding-left: 20px;
}
#character article li:hover {
	transition: all 0.5s ease;
	z-index: 1000;
	transform: scale(1.1);
}
#character article #subChara {
	display: table;
	height: 104px;
	margin-right: auto;
	margin-left: auto;
}
#character article #subChara li {
	height: 104px;
	width: 105px;
	padding-right: 9px;
	padding-left: 9px;
	display: table-cell;
}
#character article #subChara li { transition: all 1.0s ease; }
#characterOnce {
	min-width: 1200px;
	position: relative;
}
#characterOnce:before {
	content: '';
	position: absolute;
	top: 580px;
	left: 0;
	right: 0;
	height: 530px;
	transform: skewY(-10deg);
	z-index: -1;
}
#characterOnce header { background-color: #415cdb; }
#characterOnce header h2 { background-image: url(../images/common/character_icon03.png); }
#characterOnce article {
	width: 1090px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 95px;
	position: relative;
}
#characterOnce #sectionFooter {
	background-image: url(../images/common/footer_chara3.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top: 100px;
	padding-bottom: 400px;
}
#characterOnce #sectionFooter:before { background-color: #8cc2ea }
#characterOnce #sectionFooter:after { background-image: url(../images/top/cat4.png); }
#characterOnceImage { text-align: center; }
#characterOnceSpec {
	position: absolute;
	width: 370px;
	left: 0px;
	bottom: 0px;
}
#characterOnceSpec ul { padding-bottom: 40px; }
#characterOnceSpec li {
	font-size: 20px;
	line-height: 34px;
	height: 34px;
	font-weight: 600;
}
#characterOnceSpec p {
	font-size: 16px;
	line-height: 30px;
	font-weight: 500;
	text-shadow: 1px 0px 1px #FFFFFF, 1px 1px 1px #FFFFFF, 1px 2px 1px #FFFFFF, 1px -1px 1px #FFFFFF, 1px -2px 1px #FFFFFF, 2px 0px 1px #FFFFFF, 2px 1px 1px #FFFFFF, 2px 2px 1px #FFFFFF, 2px -1px 1px #FFFFFF, 2px -2px 1px #FFFFFF, 0px 1px 1px #FFFFFF, 0px 2px 1px #FFFFFF, 0px -1px 1px #FFFFFF, 0px -2px 1px #FFFFFF, -1px 0px 1px #FFFFFF, -1px 1px 1px #FFFFFF, -1px 2px 1px #FFFFFF, -1px -1px 1px #FFFFFF, -1px -2px 1px #FFFFFF, -2px 0px 1px #FFFFFF, -2px 1px 1px #FFFFFF, -2px 2px 1px #FFFFFF, -2px -1px 1px #FFFFFF, -2px -2px 1px #FFFFFF;
}
#characterNav {
	position: absolute;
	height: 80px;
	left: 0px;
	top: 646px;
	right: 0px;
}
#characterNav a { transition: all 0.5s ease; }
#characterNav a:hover { opacity: 0.7; }
#prev {
	float: left;
	height: 80px;
	width: 40px;
}
#next {
	float: right;
	height: 80px;
	width: 40px;
}
#characterBack {
	position: absolute;
	height: 53px;
	width: 262px;
	right: 36px;
	bottom: 101px;
}
#characterBack a { transition: all 0.5s ease; }
#characterBack a:hover { opacity: 0.7; }
#newsBack {
	height: 53px;
	width: 262px;
	text-align: center;
	margin: 0 auto;
}
#newsBack a { transition: all 0.5s ease; }
#newsBack a:hover { opacity: 0.7; }
#playButton {
	height: 53px;
	width: 262px;
	text-align: center;
	margin: 0 auto;
}
#playButton a { transition: all 0.5s ease; }
#playButton a:hover { opacity: 0.7; }
/* CHARACTER COLOR */
.character01:before { background-color: #FFEBF3; }
.character01 #characterOnceSpec li { color: #ff84b8; }
.character02:before { background-color: #deeee2; }
.character02 #characterOnceSpec li { color: #5aab6e; }
.character03:before { background-color: #e8ebfc; }
.character03 #characterOnceSpec li { color: #415cdb; }
.character04:before { background-color: #f9f8e5; }
.character04 #characterOnceSpec li { color: #d7cc00; }
.character05:before { background-color: #e1e4fb; }
.character05 #characterOnceSpec li { color: #6b79ec; }
.character06:before { background-color: #f8d6dc; }
.character06 #characterOnceSpec li { color: #dd3451; }
.character07:before { background-color: #d9eef1; }
.character07 #characterOnceSpec li { color: #3fa8b9; }
.character08:before { background-color: #F9F8E4; }
.character08 #characterOnceSpec li { color: #D7CC00; }
.character09:before { background-color: #E2E4FB; }
.character09 #characterOnceSpec li { color: #203CBF; }
.character10:before { background-color: #F9F8F6; }
.character10 #characterOnceSpec li { color: #C4B7A4; }

.character11:before { background-color: #d8d8de; }
.character11 #characterOnceSpec li { color: #3d3b59; }
.character12:before { background-color: #f4edf0; }
.character12 #characterOnceSpec li { color: #c7a7b2; }
.character13:before { background-color: #e7d4e5; }
.character13 #characterOnceSpec li { color: #85297c; }
.character14:before { background-color: #fdebf6; }
.character14 #characterOnceSpec li { color: #fa71c1; }
.character15:before { background-color: #eaf9e2; }
.character15 #characterOnceSpec li { color: #9ee273; }
.character16:before { background-color: #d7e4da; }
.character16 #characterOnceSpec li { color: #3d844d; }
.character17:before { background-color: #f7d8d6; }
.character17 #characterOnceSpec li { color: #d93a34; }
.character18:before { background-color: #eeeaef; }
.character18 #characterOnceSpec li { color: #aa94ae; }
.character19:before { background-color: #fff9d9; }
.character19 #characterOnceSpec li { color: #fddf42; }
.character20:before { background-color: #f8d6e0; }
.character20 #characterOnceSpec li { color: #ea4384; }

.character_other:before { background-color: #e4e4e4; }
.character_other #characterOnceSpec li { color: #777777; }
#movie header { background-color: #D7CC00; }
#movie header h2 { background-image: url(../images/common/character_icon04.png); }
#movie article {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 76px;
	padding-bottom: 100px;
}
#movie #sectionFooter {
	background-image: url(../images/common/footer_chara7.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top: 0px;
	padding-bottom: 400px;
}
#movie #sectionFooter:before { background-color: #F9F8E5 }
#movie #sectionFooter:after { background-image: url(../images/top/cat8.png); }
#movieList li {
	float: left;
	height: 380px;
	width: 480px;
	padding-right: 10px;
	padding-left: 10px;
}
.movieThumb {
	height: 270px;
	width: 480px;
}
.movieThumb a {
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
	height: 270px;
	width: 480px;
	background-size: cover;
	position: relative;
}
.movieThumb a:before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -38px;
	margin-left: -38px;
	width: 76px;
	height: 76px;
	background-image: url(../images/common/btn_play.png);
	transition: all 0.3s ease;
}
.movieThumb a:hover:before { transform: scale(1.1); }
.movieTitle {
	text-align: center;
	padding-top: 20px;
	font-size: 20px;
	line-height: 35px;
	color: #D7CC00;
	font-weight: 600;
	transform: skewX(-10deg);
}
#topCarouselCatch {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 47px;
}
#topCarouselCatch li {
	left: 100%;
	opacity: 0;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-size: auto 100%;
	background-position: right center;
	background-repeat: no-repeat
}
#topCarouselCatch li.active { animation: carouselActiveRev 5s cubic-bezier(0, 0.46, 1, 0.57); }
#topCarouselCatch li.fade { animation: carouselFadeRev 5s cubic-bezier(0, 0.46, 1, 0.57); }
#cac2 { background-image: url(../images/top/ca2_catch.png); }
#cac3 { background-image: url(../images/top/ca3_catch.png); }
#cac4 { background-image: url(../images/top/ca4_catch.png); }
#cac5 { background-image: url(../images/top/ca5_catch.png); }
#cac6 { background-image: url(../images/top/ca6_catch.png); }
#cac7 { background-image: url(../images/top/ca7_catch.png); }
#cac8 { background-image: url(../images/top/ca8_catch.png); }
#cac9 { background-image: url(../images/top/ca9_catch.png); }
#cac10 { background-image: url(../images/top/ca10_catch.png); }
#cac11 { background-image: url(../images/top/ca11_catch.png); }
#pause { display: none; }
#pause2 { display: none; }
#bnrArea {
	display: inline-flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0 20px;
}

#bnrArea img {
	margin: 5px;
}

#bnrArea a:hover { opacity: 0.6; }
.btnComment {
	position: absolute;
	right: -110px;
	top: -6px;
	transform: skewX(10deg);
}
.btnComment a img { transition: all 0.5s ease; }
.btnComment a:hover img { opacity: 0.6; }
.commentModal {
	background-color: #D86262;
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	min-width: 1200px;
	min-height: 620px;
	display: none;
}
.commFl {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	min-width: 1200px;
	min-height: 620px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.commentInner {
	width: 860px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 100px;
	padding-bottom: 100px;
	overflow: auto;
	color: #FFF;
	line-height: 30px;
}
.commentInner .question {
	padding-bottom: 30px;
	border-bottom: 1px dashed #FFF;
}
.commentInner h4 {
	font-size: 20px;
	line-height: 47px;
	font-weight: 600;
	padding-top: 25px;
	padding-bottom: 10px;
}
.commentInner .answer { padding-bottom: 30px; }
#onair .caution {
	line-height: 30px;
	color: #7E88E8;
	padding-top: 0;
	padding-bottom: 30px;
	font-weight: bold;
}
#story header { background-color: #203CBF; }
#story header h2 { background-image: url(../images/common/character_icon09.png); }
#story article {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 76px;
	padding-bottom: 100px;
}
#story #sectionFooter {
	background-image: url(../images/common/footer_chara5.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top: 0px;
	padding-bottom: 400px;
}
#story #sectionFooter:before { background-color: #E2E4FB }
#story #sectionFooter:after { background-image: url(../images/top/cat6.png); }
#storyList li {
	float: left;
	width: 480px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 50px;
}
#storyList li:nth-child(odd) { clear: both; }
.storyThumb {
	height: 270px;
	width: 480px;
}
.storyThumb a {
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
	height: 270px;
	width: 480px;
	background-size: cover;
	position: relative;
	transition: all 0.3s ease;
}
.storyThumb a:before {
	content: 'MORE';
	position: absolute;
	right: 20px;
	bottom: 15px;
	width: 80px;
	height: 26px;
	line-height: 26px;
	transition: all 0.3s ease;
	transform: skewX(-10deg);
	box-shadow: 5px 5px 0px 0px #000000;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	background-color: #203CBF;
}
.storyThumb a:hover { opacity: 0.8; }
.storyTitle {
	text-align: center;
	padding-top: 20px;
	font-size: 20px;
	line-height: 35px;
	color: #203DBF;
	font-weight: 600;
	transform: skewX(-10deg);
}
#storyOnce {
	width: 860px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 70px;
}
#storyOnce h3 {
	line-height: 52px;
	color: #203CBF;
	font-size: 30px;
	text-align: center;
	transform: skewX(-10deg);
	font-weight: 600;
	margin-bottom: 30px;
}
#storyMainImg {
	height: 483px;
	width: 860px;
	opacity: 0;
}
#storyMainImg.fl {
	opacity: 1;
	transition: all 0.3s ease;
}
#storyThumbImg li {
	float: left;
	width: calc(100% / 4);
}
#storyThumbImg li a { display: block; }
#storyThumbImg li a img {
	display: block;
	width: 100%;
	height: auto;
	transition: all 0.3s ease;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#storyThumbImg li a:hover img { opacity: 0.8; }
#storyOnce p {
	line-height: 30px;
	padding-top: 38px;
}
#bdbox header { background-color: #D7CC00; }
#bdbox header h2 { background-image: url(../images/common/character_icon08.png); }
#bdbox article {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 76px;
	padding-bottom: 100px;
}
#bdbox #sectionFooter {
	background-image: url(../images/common/footer_chara4.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top: 0px;
	padding-bottom: 400px;
}
#bdbox #sectionFooter:before { background-color: #fffaa7 }
#bdbox #sectionFooter:after { background-image: url(../images/top/cat5.png); }
#bdboxList li {
	float: left;
	width: 480px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 50px;
}
#bdboxList li:nth-child(odd) { clear: both; }
.bdboxThumb {
	height: 270px;
	width: 480px;
}
.bdboxThumb a {
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
	height: 270px;
	width: 480px;
	background-size: cover;
	position: relative;
	transition: all 0.3s ease;
}
.bdboxThumb a:before {
	content: 'MORE';
	position: absolute;
	right: 20px;
	bottom: 15px;
	width: 80px;
	height: 26px;
	line-height: 26px;
	transition: all 0.3s ease;
	transform: skewX(-10deg);
	box-shadow: 5px 5px 0px 0px #000000;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	background-color: #D7CC00;
}
.bdboxThumb a:hover { opacity: 0.8; }
.bdboxTitle {
	text-align: center;
	padding-top: 20px;
	font-size: 20px;
	line-height: 35px;
	color: #D7CC00;
	font-weight: 600;
	transform: skewX(-10deg);
}
.bdboxTitle .bds {
	font-size: 14px;
	color: #D7CC00;
	font-weight: 600;
}
#bdboxOnce {
	width: 860px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 70px;
}
#bdboxOnce h3 {
	line-height: 52px;
	color: #D7CC00;
	font-size: 30px;
	text-align: center;
	transform: skewX(-10deg);
	font-weight: 600;
	margin-bottom: 30px;
}
#bdboxOnce h4 {
	line-height: 32px;
	color: #333;
	font-size: 20px;
	text-align: center;
	transform: skewX(-10deg);
	font-weight: 600;
	margin-bottom: 0;
}
#bdboxOnce .tokutenBox {
	border-bottom: 1px dotted #333;
	margin-bottom: 40px;
	padding-bottom: 40px;
}
#bdboxMainImg {
	height: 483px;
	width: 860px;
	opacity: 0;
}
#bdboxMainImg.fl {
	opacity: 1;
	transition: all 0.3s ease;
}
#bdboxThumbImg li {
	float: left;
	width: calc(100% / 4);
}
#bdboxThumbImg li a { display: block; }
#bdboxThumbImg li a img {
	display: block;
	width: 100%;
	height: auto;
	transition: all 0.3s ease;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#bdboxThumbImg li a:hover img { opacity: 0.8; }
#bdboxOnce p {
	line-height: 30px;
	padding-top: 38px;
}
#goods header { background-color: #FF84B8; }
#goods header h2 { background-image: url(../images/common/character_icon01.png); }
#goods article {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 76px;
	padding-bottom: 100px;
}
#goods #sectionFooter {
	background-image: url(../images/common/footer_chara1.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top: 0px;
	padding-bottom: 400px;
}
#goods #sectionFooter:before { background-color: #ffd7e8 }
#goods #sectionFooter:after { background-image: url(../images/top/cat2.png); }
#goodsList li {
	float: left;
	width: 480px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 50px;
}
#goodsList li:nth-child(odd) { clear: both; }
.goodsThumb {
	height: 270px;
	width: 480px;
}
.goodsThumb a {
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
	height: 270px;
	width: 480px;
	background-size: cover;
	position: relative;
	transition: all 0.3s ease;
}
.goodsThumb a:before {
	content: 'MORE';
	position: absolute;
	right: 20px;
	bottom: 15px;
	width: 80px;
	height: 26px;
	line-height: 26px;
	transition: all 0.3s ease;
	transform: skewX(-10deg);
	box-shadow: 5px 5px 0px 0px #000000;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	background-color: #FF84B8;
}
.goodsThumb a:hover { opacity: 0.8; }
.goodsTitle {
	text-align: center;
	padding-top: 20px;
	font-size: 20px;
	line-height: 35px;
	color: #FF84B8;
	font-weight: 600;
	transform: skewX(-10deg);
}
.goodsTitle .bds {
	font-size: 14px;
	color: #FF84B8;
	font-weight: 600;
}
#goodsOnce {
	width: 860px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 70px;
}
#goodsOnce h3 {
	line-height: 52px;
	color: #FF84B8;
	font-size: 30px;
	text-align: center;
	transform: skewX(-10deg);
	font-weight: 600;
	margin-bottom: 10px;
}
#goodsOnce h4 {
	line-height: 32px;
	color: #333;
	font-size: 20px;
	text-align: center;
	transform: skewX(-10deg);
	font-weight: 600;
	margin-bottom: 0;
}
#goodsOnce .tokutenBox {
	border-bottom: 1px dotted #333;
	margin-bottom: 40px;
	padding-bottom: 40px;
}
goodsMainImg {
	height: 483px;
	width: 860px;
	opacity: 0;
}
#goodsMainImg.fl {
	opacity: 1;
	transition: all 0.3s ease;
}
#goodsThumbImg li {
	float: left;
	width: calc(100% / 4);
}
#goodsThumbImg li a { display: block; }
#goodsThumbImg li a img {
	display: block;
	width: 100%;
	height: auto;
	transition: all 0.3s ease;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#goodsThumbImg li a:hover img { opacity: 0.8; }
#goodsOnce p {
	line-height: 30px;
	padding-top: 38px;
}
#ondemand {
	padding-top: 50px;
	font-size: 16px;
}

#onair h3 {
	padding-bottom: 0px;
	color: #7E88E8;
	font-size: 18px;
	font-weight: bold;
}

#ondemand h4 {
	padding-bottom: 20px;
	color: #7E88E8;
	font-size: 18px;
	font-weight: bold;
}
#ondemand table {
	width: 100%;
	margin-bottom: 45px;
}
#ondemand th,
#ondemand td {
	text-align: center;
	width: 25%;
	padding-top: 25px;
	padding-right: 15px;
	padding-bottom: 25px;
	padding-left: 15px;
	border: 1px solid #7E88E8;
	background-color: #fff;
}
#ondemand th {
	background-color: #7E88E8;
	font-size: 16px;
}
#ondemand1 th { color: #fff; }
#ondemand2 th { color: #fff; }
#ondemand a:link { color: #7E88E8; }
#ondemand a:visited { color: #7E88E8; }
#keywords header { background-color: #CCC2AF; }
#keywords header h2 { background-image: url(../images/common/character_icon10.png); }
#keywords article {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 76px;
	padding-bottom: 100px;
}
#keywords #sectionFooter {
	background-image: url(../images/common/footer_chara6.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top: 0px;
	padding-bottom: 400px;
}
#keywords #sectionFooter:before { background-color: #F9F8F6 }
#keywords #sectionFooter:after { background-image: url(../images/top/cat7.png); }
#kanaList li {
	float: left;
	height: 40px;
	width: 20%;
	margin-bottom: 12px;
	line-height: 40px;
	padding-right: 6px;
	padding-left: 6px;
	box-sizing: border-box;
}
#kanaList a {
	background-color: #CCC2AF;
	display: block;
	height: 40px;
	line-height: 40px;
	color: #FFF;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	border-radius: 20px;
	transition: all 0.3s ease;
}
#kanaList a:not(.soon):hover { opacity: 0.7; }
#kanaList a.soon {
	opacity: 0.3;
	pointer-events: none;
}
#kanaList a span {
	transform: skew(-10deg);
	display: inline-block;
}
#keywords h3 {
	padding-top: 45px;
	font-size: 24px;
	color: #CCC2AF;
	text-align: center;
	font-weight: bold;
	padding-bottom: 25px;
	transform: skew(-10deg);
}
#keywords dl {
	margin-right: 6px;
	margin-left: 6px;
}
#keywords dt {
	font-size: 20px;
	line-height: 42px;
	font-weight: bold;
	color: #CCC2AF;
	transform: skew(-10deg);
	padding-bottom: 11px;
}
#keywords dd {
	font-size: 18px;
	line-height: 32px;
	padding-bottom: 32px;
}
#keywords dt span { font-size: 16px; }
#mainChara li a {
	text-decoration:none;
}
#mainChara li a span {
	font-size: 14px;
	text-align: center;
	padding-top: 15px;
	display: block;
	transform: skew(-10deg);
	font-weight:bold;
}
/* CHARACTER COLOR */
#mainChara #chara01 a span {
	color: #FF84B8;
}
#mainChara #chara02 a span {
	color: #5aab6e;
}
#mainChara #chara03 a span {
	color: #415cdb;
}
#mainChara #chara04 a span {
	color: #d7cc00;
}
#mainChara #chara05 a span {
	color: #6b79ec;
}
#mainChara #chara06 a span {
	color: #dd3451;
}
#mainChara #chara07 a span {
	color: #3fa8b9;
}
#mainChara #chara08 a span {
	color: #D7CC00;
}
#mainChara #chara09 a span {
	color: #203CBF;
}
#mainChara #chara10 a span {
	color: #C4B7A4;
}
#mainChara #chara11 a span {
	color: #3d3b59;
}
#mainChara #chara12 a span {
	color: #c7a7b2;
}
#mainChara #chara13 a span {
	color: #85297c;
}
#mainChara #chara14 a span {
	color: #fa71c1;
}
#mainChara #chara15 a span {
	color: #9ee273;
}
#mainChara #chara16 a span {
	color: #3d844d;
}
#mainChara #chara17 a span {
	color: #d93a34;
}
#mainChara #chara18 a span {
	color: #aa94ae;
}
#mainChara #chara19 a span {
	color: #fddf42;
}
#mainChara #chara20 a span {
	color: #ea4384;
}

.red {
	font-size: 24px;
	color:#FA0004;
	text-align: center;
}