@charset "utf-8";
/*------------------------------------------------------------
	トープページ
------------------------------------------------------------*/
.audio {
	position: absolute;
	left: -9999px;
	top: 0;
	display: none;
	cursor: pointer;
}

#main {
	padding-top: 50px;
}

#main .linkUl li {
	margin-top: 3%;
	width: 58.4%;
	float: left;
}

#main .linkUl02 {
	display: none;
}

#main .linkUl li img {
	width: 100%;
}

#main .linkUl li a {
	display: block;
	vertical-align: top;
}

#main .linkUl li:nth-child(-n+2) {
	margin-top: 0;
}

#main .linkUl li:nth-child(2n) {
	float: right;
}

#main .linkUl li:nth-child(2) {
	width: 39.1%;
}

#main .linkUl li:nth-child(3) {
	width: 36.3%;
}

#main .linkUl li:nth-child(3) a {
	margin-bottom: 7%;
}

#main .linkUl li:nth-child(3) a:last-child {
	margin-bottom: 0;
}

#main .linkUl li:nth-child(4) {
	width: 61.4%;
}

#main .fooBox {
	margin: 0 -10px;
	height: 100%;
	min-height: 100%;
}

#main .fooBox .subBox {
	position: relative;
	min-height: 100%;
	height: 100%;
}

#main .fooBox .subBox .filmBox {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	overflow: hidden;
	z-index: -2;
}

#main .fooBox .subBox .filmBox .slideBox {
	margin: 60px -120px 0;
	height: 54px;
	overflow: hidden;
	transform: rotate(-25deg);
	-moz-transform: rotate(-25deg);
	-webkit-transform: rotate(-25deg);
}

#main .fooBox .subBox .filmBox .slide {
	background: url(../img/character/bg01.png) repeat-x center top;
	background-size: 58px 54px;
}

#main .fooBox .subBox .filmBox .slide li {
	padding: 11px 1px;
	width: 56px;
	height: 32px;
	float: left;
}

#main .fooBox .subBox .filmBox .slide01 {
	margin: 60% -30% 0;
	transform: rotate(25deg);
	-moz-transform: rotate(25deg);
	-webkit-transform: rotate(25deg);
}

#main .fooBox .subBox .filmBox .slide02 {
	margin: -13% -30% 0;
	transform: rotate(-35deg);
	-moz-transform: rotate(-35deg);
	-webkit-transform: rotate(-35deg);
}

#main .fooBox .subBox .filmBox .slide03 {
	margin: 78% -30% 0;
	transform: rotate(12deg);
	-moz-transform: rotate(12deg);
	-webkit-transform: rotate(12deg);
}

#main .fooBox .bgBox {
	position: relative;
	z-index: 1;
	width: 100%;
	overflow: hidden;
}

#main .fooBox .pho {
	position: absolute;
	width: 100%;
	height: 100%;
	min-height: 100%;
	left: 0;
	top: 12px;
	text-align: center;
	z-index: -1;
}

#main .fooBox .pho img {
	width: auto;
	display: block;
	height: 100%;
	min-height: 100%;
	position: absolute;
	left: 50%;
	top: 0;
	zoom: 1;
}

#main .fooBox .nameDl {
	margin-bottom: 5%;
	padding: 8px 10px 0;
	font-size: 12px;
	text-shadow: 1px 1px #fff,-1px -1px #fff;
}

#main .fooBox .nameDl dt img {
	width: 100%;
}

#main .fooBox .nameDl dd img {
	width: 45%;
	height: auto;
}

/* 
#main .fooBox .nameDl dt span {
	color: #23BFE6;
}

#main .fooBox .nameDl dd > span {
	display: block;
	color: #23BFE6;
	font-size: 16px;
	line-height: 1.2;
}

#main .fooBox .nameDl dd > span span {
	margin: -5px 8px 0 0;
	font-weight: bold;
	font-size: 22px;
	line-height: 1;
	display: inline-block;
	vertical-align: top;
} */

#main .fooBox .linkArrow {
	padding: 27% 0 27%;
	width: 100%;
	height: 38px;
	position: relative;
}

#main .fooBox .linkArrow li {
	margin-top: -19px;
	position: absolute;
	top: 50%;
}

#main .fooBox .linkArrow li.prev {
	left: 7px;
}

#main .fooBox .linkArrow li.next {
	right: 7px;
}

#main .fooBox .ttl {
	margin-bottom: 25px;
	text-align: center;
}

#main .fooBox .ttl img {
	width: 100%;
}

#main .fooBox .voiceBox {
	margin-bottom: 18px;
	padding: 10px 0 5px;
	background: url(../img/character/bg02.png) repeat left top;
}

#main .fooBox .voiceBox .title {
	margin-bottom: 0;
	color: #23BFE6;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

#main .fooBox .voiceBox ul {
	text-align: center;
}

#main .fooBox .voiceBox li {
	margin: 0 3px;
	width: 35px;
	display: inline-block;
}

#main .fooBox .voiceBox li img {
	width: 100%;
	height: auto;
}

#main .fooBox .profileBox {
	padding: 0 10px 30px;
	background: url(../img/character/bg03.png) repeat left top;
}

#main .fooBox .profileBox .title {
	margin-bottom: 10px;
	padding: 8px 0 2px;
	text-align: center;
/* 	font-size: 14px;*/
	color: #fff;
	font-weight: bold;
	background-color: #00B8E4;
}

#main .fooBox .profileBox .title img {
	width: 62px;
}

#main .fooBox .profileBox ul {
	margin-bottom: 9px;
}

#main .fooBox .profileBox li {
	font-size: 11px;
	line-height: 1.55;
}

#main .fooBox .profileBox li span {
	color: #00B8E4;
	font-weight: bold;
}

#main .fooBox .profileBox p {
	margin-bottom: 12px;
	font-size: 11px;
	line-height: 1.5;
}

#main .fooBox .profileBox p img {
	width: 100%;
}

#main .fooBox .profileBox .desTxt img {
	width: 70%;
}

#main .fooBox .profileBox p:last-child {
	margin-bottom: 0;
}

#main .fooBox .clothesBox {
	padding: 0 10px;
	z-index: 1;
	position: relative;
}

#main .fooBox .clothesBox .title {
	margin-bottom: 5px;
	font-size: 15px;
	color: #00B8E4;
	font-weight: bold;
	text-align: center;
	background: url(../img/character/bg03.png) repeat left top;
}

#main .fooBox .clothesBox .clothesUl {
	margin-bottom: 20px;
	display: inline-table;
	width: 100%;
	text-align: center;
}

#main .fooBox .clothesBox .clothesUl li {
	width: 33.3%;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

#main .fooBox .clothesBox .clothesUl li a {
	padding: 5px;
	display: block;
	color: #343737;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	background-color: #fff;
	border: 1px solid #343737;
	border-right: none;
	position: relative;
}

#main .fooBox .clothesBox .clothesUl li a:after {
	width: 7px;
	height: 7px;
	position: absolute;
	left: 1px;
	top: 1px;
	content: "";
	background: url(../img/common/icon02.png) no-repeat center top;
	background-size: 7px 7px;
}

#main .fooBox .clothesBox .clothesUl li:last-child a {
	border-right: 1px solid #343737;
}

#main .fooBox .clothesBox .clothesUl li.on a {
	color: #00B8E4;
	background-color: #F0EFEF;
}

#main .fooBox .slideBox {
	position: relative;
}

#main .fooBox .slideBox .arrow li {
	margin-top: -19px;
	position: absolute;
	top: 35%;
}

#main .fooBox .slideBox .arrow li.prev {
	left: 7px;
}

#main .fooBox .slideBox .arrow li.next {
	right: 7px;
}

#main .fooBox .slideBox .foo {
	overflow: hidden;
}

#main .fooBox .slideBox .foo li img {
	width: 100%;
}

/*------------------------------------------------------------
	sub
------------------------------------------------------------*/
#main .linkUl02 li {
	width: 39.1%;
}

#main .linkUl02 li:nth-child(2) {
	width: 58.4%;
}

#main .linkUl02 li:nth-child(3) {
	width: 61.4%;
}

#main .linkUl02 li:nth-child(3) a {
	margin: 0;
}

#main .linkUl02 li:nth-child(4) {
	width: 36.3%;
}

#main .linkUl02 li:nth-child(4) a {
	margin-bottom: 7%;
}

#main .linkUl02 li:nth-child(4) a:last-child {
	margin-bottom: 0;
}

/*------------------------------------------------------------
	travis
------------------------------------------------------------*/
#travis.fooBox .nameDl dt span {
	color: #D12A18;
}

#travis.fooBox .nameDl dd > span {
	color: #D12A18;
}

#travis.fooBox .subBox .filmBox .slide {
	background: url(../img/character/bg04.png) repeat-x center top;
	background-size: 58px 54px;
}

#travis.fooBox .voiceBox .title {
	color: #D12A18;
}

#travis.fooBox .profileBox .title {
	background-color: #D12A18;
}

#travis.fooBox .profileBox li span {
	color: #D12A18;
}

#travis.fooBox .clothesBox .title {
	color: #D12A18;
}

#travis.fooBox .clothesBox .clothesUl li a:after {
	background: url(../img/common/icon03.png) no-repeat center top;
	background-size: 7px 7px;
}

#travis.fooBox .clothesBox .clothesUl li.on a {
	color: #D12A18;
}
/*------------------------------------------------------------
	engene
------------------------------------------------------------*/
#engene.fooBox .nameDl dt span {
	color: #4B77D6;
}

#engene.fooBox .nameDl dd > span {
	color: #4B77D6;
}

#engene.fooBox .subBox .filmBox .slide {
	background: url(../img/character/bg05.png) repeat-x center top;
	background-size: 58px 54px;
}

#engene.fooBox .voiceBox .title {
	color: #4B77D6;
}

#engene.fooBox .profileBox .title {
	background-color: #4B77D6;
}

#engene.fooBox .profileBox li span {
	color: #4B77D6;
}

#engene.fooBox .clothesBox .title {
	color: #4B77D6;
}

#engene.fooBox .clothesBox .clothesUl li a:after {
	background: url(../img/common/icon04.png) no-repeat center top;
	background-size: 7px 7px;
}

#engene.fooBox .clothesBox .clothesUl li.on a {
	color: #4B77D6;
}
/*------------------------------------------------------------
	bg
------------------------------------------------------------*/
#bg.fooBox .nameDl dt span {
	color: #87D34C;
}

#bg.fooBox .nameDl dd > span {
	color: #87D34C;
}

#bg.fooBox .subBox .filmBox .slide {
	background: url(../img/character/bg06.png) repeat-x center top;
	background-size: 58px 54px;
}

#bg.fooBox .voiceBox .title {
	color: #87D34C;
}

#bg.fooBox .profileBox .title {
	background-color: #87D34C;
}

#bg.fooBox .profileBox li span {
	color: #87D34C;
}

#bg.fooBox .clothesBox .title {
	color: #87D34C;
}

#bg.fooBox .clothesBox .clothesUl li a:after {
	background: url(../img/common/icon05.png) no-repeat center top;
	background-size: 7px 7px;
}

#bg.fooBox .clothesBox .clothesUl li.on a {
	color: #87D34C;
}
/*------------------------------------------------------------
	al
------------------------------------------------------------*/
#al.fooBox .nameDl dt span {
	color: #FE94FF;
}

#al.fooBox .nameDl dd > span {
	color: #FE94FF;
}

#al.fooBox .subBox .filmBox .slide {
	background: url(../img/character/bg07.png) repeat-x center top;
	background-size: 58px 54px;
}

#al.fooBox .voiceBox .title {
	color: #FE94FF;
}

#al.fooBox .profileBox .title {
	background-color: #FE94FF;
}

#al.fooBox .profileBox li span {
	color: #FE94FF;
}

#al.fooBox .clothesBox .title {
	color: #FE94FF;
}

#al.fooBox .clothesBox .clothesUl li {
	width: 50%;
}

#al.fooBox .clothesBox .clothesUl li a:after {
	background: url(../img/common/icon06.png) no-repeat center top;
	background-size: 7px 7px;
}

#al.fooBox .clothesBox .clothesUl li.on a {
	color: #FE94FF;
}
/*------------------------------------------------------------
	gibeon
------------------------------------------------------------*/
#gibeon.fooBox .nameDl dt span {
	color: #343737;
}

#gibeon.fooBox .nameDl dd > span {
	color: #343737;
}

#gibeon.fooBox .subBox .filmBox .slide {
	background: url(../img/character/bg08.png) repeat-x center top;
	background-size: 58px 54px;
}

#gibeon.fooBox .voiceBox .title {
	color: #343737;
}

#gibeon.fooBox .profileBox .title {
	background-color: #343737;
}

#gibeon.fooBox .profileBox li span {
	color: #343737;
}

#gibeon.fooBox .clothesBox .title {
	color: #343737;
}

#gibeon.fooBox .clothesBox .clothesUl li {
	width: 50%;
}

#gibeon.fooBox .clothesBox .clothesUl li a:after {
	background: url(../img/common/icon07.png) no-repeat center top;
	background-size: 7px 7px;
}

#gibeon.fooBox .clothesBox .clothesUl li.on a {
	color: #343737;
}
/*------------------------------------------------------------
	leo
------------------------------------------------------------*/
#leo.fooBox .nameDl dt {
	letter-spacing: -9px;
}

#leo.fooBox .nameDl dt span {
	color: #F6DC07;
}

#leo.fooBox .nameDl dd {
	color: #F6DC07;
}

#leo.fooBox .nameDl dd > span {
	color: #F6DC07;
}

#leo.fooBox .subBox .filmBox .slide {
	background: url(../img/character/bg09.png) repeat-x center top;
	background-size: 58px 54px;
}

#leo.fooBox .voiceBox .title {
	color: #F6DC07;
}

#leo.fooBox .profileBox .title {
	background-color: #F6DC07;
}

#leo.fooBox .profileBox li span {
	color: #F6DC07;
}

#leo.fooBox .clothesBox .title {
	color: #F6DC07;
}

#leo.fooBox .clothesBox .clothesUl li {
	width: 50%;
}

#leo.fooBox .clothesBox .clothesUl li a:after {
	background: url(../img/common/icon08.png) no-repeat center top;
	background-size: 7px 7px;
}

#leo.fooBox .clothesBox .clothesUl li.on a {
	color: #F6DC07;
}
/*------------------------------------------------------------
	ruri
------------------------------------------------------------*/
#ruri.fooBox .nameDl dt {
}

#ruri.fooBox .nameDl dt span {
	color: #B588FF;
}

#ruri.fooBox .nameDl dt .small {
	font-size: 0.55em;
	color: #000;
}

#ruri.fooBox .nameDl dd {
	color: #B588FF;
}

#ruri.fooBox .nameDl dd > span {
	color: #B588FF;
}

#ruri.fooBox .subBox .filmBox .slide {
	background: url(../img/character/bg10.png) repeat-x center top;
	background-size: 58px 54px;
}

#ruri.fooBox .voiceBox .title {
	color: #B588FF;
}

#ruri.fooBox .profileBox .title {
	background-color: #B588FF;
}

#ruri.fooBox .profileBox li span {
	color: #B588FF;
}

#ruri.fooBox .clothesBox .title {
	color: #B588FF;
}

#ruri.fooBox .clothesBox .clothesUl li {
	width: 50%;
}

#ruri.fooBox .clothesBox .clothesUl li a:after {
	background: url(../img/common/icon09.png) no-repeat center top;
	background-size: 7px 7px;
}

#ruri.fooBox .clothesBox .clothesUl li.on a {
	color: #B588FF;
}