@charset "utf-8";
.mbYTP_wrapper {
	opacity: 1 !important;		/* 背景動画ﾌｪｰﾄﾞさせない */
}
body #wrapperAll {
	position: relative;
	z-index: 100;
	width: auto;
	min-width: 964px;
	background: transparent;
	}
	body #wrapperAll > * {
		margin: auto;
		}
.transparent {
	position: absolute;
	top: 0;
	left: 0;
}
#headerAreaWrapper {
	width: 100%;
	background: #fff;
	}
	#headerAreaWrapper #headerArea {
		margin-left: auto;
		margin-right: auto;
	}

#contentArea {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	z-index: 50;
	overflow: hidden;
	}
	#contentArea a {
		color: #666;
	}
#contentArea img {
	display: block;
	}
#contentArea .sns {
	position: absolute;
	z-index: 101;
	right: 50%;
	top: 20px;
	width: 964px;
	margin-right: -482px;
	text-align: right;
	}
	#contentArea .sns .share {
		font-size: 0;
	}
	#contentArea .sns .share li {
		width: 24px;
		height: 24px;
		margin: 0 0 0 8px;
		display: inline-block;
		}
		#contentArea  .sns .share > li a {
			display: block;
			}
			#contentArea  .sns .share > li a img {
				width: 100%;
			}

#mainTitle {
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 620px;
	padding-top: 70px;
	}
	#mainTitle .bg1,
	#mainTitle .bg2 {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	#mainTitle .bg1 {
		background: url(../IMAGES/bg_mainarea.png) repeat center center;
		z-index: -1;
	}
	#mainTitle .bg2 {
		background: url(../IMAGES/main.jpg) no-repeat center center;
		z-index: -2;
	}
	#mainTitle h1 {
		width: 318px;
		margin: auto;
		position: relative;
		}
	#mainTitle .mainPlayMovie {
		width: 224px;
		height: 54px;
		margin: 40px auto 0;
		padding: 3px;
		border-radius: 30px / 28px;
		display: block;
		overflow: hidden;
		position: relative;
		background: url(../IMAGES/bg_grad_playmovie.png) left top no-repeat;
		}
		#contentArea .mainPlayMovie span {
			display: block;
			position: relative;
		}
		#contentArea .mainPlayMovie img {
			width: 100%;
		}
		#contentArea .mainPlayMovie .anime {
			width: 0;
			height: 0;
			padding-top: 60px;
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;
			background: url(../IMAGES/bg_grad_playmovie_reverse.png) left top no-repeat;
		}
	#mainTitle .scrollerPet {
		width: 200px;
		height: 176px;
		display: block;
		position: absolute;
		bottom: 20px;
		right: 20px;
		background: url(../IMAGES/scroller_pet_bg.png) no-repeat center top;
		}
		#mainTitle .scrollerPet a {
			width: 200px;
			height: 92px;
			display: block;
			position: absolute;
			left: 0;
			bottom: 0;
			transition: transform 0.3s linear;
		}
		#mainTitle .scrollerPet a:hover {
			-webkit-transform: scale(1.1);
			-moz-transform: scale(1.1);
			-ms-transform: scale(1.1);
			-o-transform: scale(1.1);
			transform: scale(1.1);
		}

.under {
	background: url(../IMAGES/bg_tile.png) left top repeat;
}
.section {
	padding: 80px 0 0;
}
#lead {
	padding-top: 80px;
	}
	#lead h2 {
		width: 583px;
		margin: auto;
	}
	#lead p {
		margin-top: 40px;
		text-align: center;
		font-size: 20px;
		line-height: 2.5;
		color: #666;
	}

#result {
	height: 1010px;
	background: url(../IMAGES/bg_grad_slope.png) center 326px no-repeat;
	}
	#result h3 {
		width: 289px;
		height: 290px;
		margin: auto;
	}
	#result .graph {
		width: 914px;
		height: 444px;
		margin: 30px auto 0;
		padding: 0 0 0 50px;
	}
	#result .graph .anime {
		margin: 0 0 0 84px;
		font-size: 0;
		}
		#result .graph .anime .bar {
			width: 140px;
			height: 343px;
			margin-right: 18px;
			display: inline-block;
			position: relative;
			overflow: hidden;
			}
			#result .graph .anime .bar .text {
				width: 132px;
				margin: 0 auto;
			}
			#result .graph .anime .bar.y1 .text {	margin-top: 140px;	}
			#result .graph .anime .bar.y2 .text {	margin-top: 105px;	}
			#result .graph .anime .bar.y3 .text {	margin-top: 66px;	}
			#result .graph .anime .bar.y4 .text {	margin-top: 30px;	}
			#result .graph .anime .bar.y5 .text {	margin-top: 0;		}
			#result .graph .anime .bar .thumb {
				width: 140px;
				height: 137px;
				margin-top: 10px;
				display: block;
				position: relative;
				z-index: 2;
				}
			#result .graph .anime .bar .line {
				width: 1px;
				height: 0;
				display: block;
				background: #fff;
				position: absolute;
				bottom: 2px;
				left: 50%;
			}
			#result .graph .anime .bar.y1 .line {	height: 28px;	}
			#result .graph .anime .bar.y2 .line {	height: 64px;	}
			#result .graph .anime .bar.y3 .line {	height: 102px;	}
			#result .graph .anime .bar.y4 .line {	height: 138px;	}
			#result .graph .anime .bar.y5 .line {	height: 176px;	}
			#result .graph .anime .bar:after {
				content: '';
				width: 10px;
				height: 10px;
				margin-left: -5px;
				display: block;
				position: absolute;
				bottom: 0;
				left: 50%;
				background: url(../IMAGES/result_graph_point.png) center center no-repeat;
			}
		#result .graph .label img {
			margin: 20px 0 0;
		}
	#result .consideration {
		width: 914px;
		height: 200px;
		margin: 0 auto;
		padding: 26px 0 20px 50px;
		}
		#result .consideration p {
			text-align: center;
			font-size: 20px;
			line-height: 2.5;
			color: #fff;
		}
		#result .consideration ul {
			margin-top: 20px;
			color: #fff;
		}

#supporters {
	background-color: #fff;
	}
	#supporters h4 {
		width: 477px;
		margin: 0 auto;
	}
	#supporters .text {
		margin-top: 30px;
		font-size: 20px;
		line-height: 2.5;
		color: #666;
		text-align: center;
	}
	#supporters .tile {
		margin-top: 80px;
		overflow: hidden;
		}
		#supporters .tile > div {
			width: 25%;
			float: left;
			overflow: hidden;
		}
		#supporters .tile a {
			width: 100%;
			height: 100%;
			display: block;
			position: relative;
			overflow: hidden;
			}
			#supporters .tile .thumb {
				width: 100%;
				height: 100%;
				}
				#supporters .tile .thumb img {
					width: 100%;
				}
			#supporters .tile .detail {
				width: 100%;
				height: 100%;
				padding: 40px 20px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				-ms-box-sizing: border-box;
				box-sizing: border-box;
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(0,0,0,0.6);
				filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99000000,EndColorStr=#99000000);	/*IE8*/

				font-size: 13px;
				color: #fff;
				}
				#supporters .tile .detail .user {
					text-decoration: underline;
					line-height: 1.2;
				}
				#supporters .tile .detail .message {
					margin-top: 20px;
					line-height: 2;
				}

#action {
	width: 964px;
	margin: auto;
	padding: 80px;
	}
	#action h4 {
		width: 338px;
		margin: 0 auto;
	}
	#action .text {
		margin-top: 30px;
		font-size: 20px;
		line-height: 2.5;
		color: #666;
		text-align: center;
	}
	#action > img {
		width: 442px;
		margin: 30px auto 0;
		display: block;
	}

#tips {
	background: url(../IMAGES/bg_grad_slope.png) center bottom no-repeat;
	}
	#tips .inner {
		width: 964px;
		margin: auto;
		padding: 80px;
	}
	#tips h4 {
		width: 354px;
		margin: 0 auto;
	}
	#tips ol {
		margin-top: 36px;
		}
		#tips ol:after {
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		
		#tips ol li {
			float: left;
			width: 50%;
			}
			#tips ol li dd {
				margin-top: 20px;
				}
				#tips ol li dd a {
					display: block;
				}
	#tips .text {
		margin-top: 36px;
		color: #fff;
		font-size: 14px;
		line-height: 1.5;
		text-align: center;
	}
	#tips .detail {
		width: 219px;
		margin: 20px auto 0;
		display: block;
	}

#banner {
	padding: 60px 0;
	}
	#banner .inner {
		width: 964px;
		margin: 0 auto;
		}

.footer {
	background: #000;
}

#YTarea {
	position: fixed;
	top: -9999px;
	left: -9999px;
	z-index: -1;
	display: table;
	width: 100%;
	height: 100%;
	}
#YTarea.play {
	top: 0;
	left: 0;
	display: table;
	z-index: 10000;
	cursor: pointer;
	}
	#YTarea:before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		display: block;
		width: 100%;
		height: 100%;
		}
	#YTarea.play:before {
		background: #fff;
		opacity: 0.6;
		filter: alpha( opacity = 60 );
		-ms-filter: "alpha( opacity = 60 )";
		}
	#YTarea .player {
		position: relative;
		z-index: 1;
		display: table-cell;
		vertical-align: middle;
		}
		#YTplayer {
			display: block;
			width: 800px;
			height: 450px;
			margin: auto;
			}

#learning {
	padding: 80px 0 80px;
	background: #fff;
	}
	#learning > h4 {
		width: 606px;
		margin: auto;
	}
	#learning > img {
		width: 964px;
		margin: 60px auto 0;
	}
	#learning .box {
		width: 964px;
		margin: 70px auto 0;
		display: table;
		}
		#learning .l {
			width: 520px;
			padding-right: 64px;
			display: table-cell;
			vertical-align: top;
			}
			#learning .l p {
				margin-top: 40px;
				font-size: 20px;
				line-height: 2;
				color: #000;
			}
			#learning .l span {

				margin-top: 20px;
				font-size: 14px;
				line-height: 1.5;
				color: #666;
				display: block;
			}
		#learning .r {
			width: 380px;
			display: table-cell;
			vertical-align: top;
		}
		#learning .r > div + div {
			margin-top: 60px;
		}
		#learning .r p {
			margin-top: 10px;
			font-size: 14px;
			line-height: 1.5;
			color: #666;
		}
		#learning .r a {
			width: 162px;
			margin: 60px 0 0 auto;
			text-align: right;
			display: block;
			}

#pet {
	border-top: 1px solid #666;
	background: #fff;
	}
	#pet h4 {
		width: 758px;
		margin: auto;
		}

	#pet p {
		margin-top: 40px;
		text-align: center;
		font-size: 20px;
		line-height: 2.5;
		color: #666;
		}
		#pet p + p {
			margin-top: 0;
		}
	#pet .profile {
		width: 560px;
		margin: 70px auto 0;
		padding: 20px;
		display: table;
		background: #eee;
		}
		#pet .profile div {
			width: 136px;
			padding-right: 30px;
			display: table-cell;
			vertical-align: middle;
		}
		#pet .profile dl {
			width: 394px;
			display: table-cell;
			vertical-align: top;
			color: #666;
			}
			#pet .profile dt {
				font-size: 16px;
				font-weight: bold;
			}
			#pet .profile dd {
				margin-top: 5px;
				font-size: 14px;
			}


.panelWrapper {
	width: 960px;
	margin: 60px auto 0;
	position: relative;
	}
	.panelWrapper .base img {
		width: 100%;
		display: block;
	}
	.dogs {
		}
		.dogs li {
			width: 20%;
			height: 12.5%;
			overflow: hidden;
			position: absolute;
		}
		.dogs li:nth-child(1) {		top: 0;					left: 60%;		}
		.dogs li:nth-child(2) {		top: 12.5%;				left: 40%;		}
		.dogs li:nth-child(3) {		top: 25%;				left: 0%;		}
		.dogs li:nth-child(4) {		top: 37.5%;				left: 80%;		}
		.dogs li:nth-child(5) {		top: 62.5%;				left: 60%;		}
		.dogs li:nth-child(6) {		top: 75%;				left: 0;		}
		.dogs li img {
			display: block;
			width: 100%;
			position: absolute;
			top: 100%;
			transition: top 0.3s ease-out;
		}
		.dogs li img.transitionEnd {
			top: 0;
			opacity: 1;
		}
	.panels {
		}
		.panels li {
			position: absolute;
			transition: transform 0.3s linear;
			z-index: 30;
			}
			.panels li:hover {
				-webkit-transform: scale(1.1);
				-moz-transform: scale(1.1);
				-ms-transform: scale(1.1);
				-o-transform: scale(1.1);
				transform: scale(1.1);
			}
			.panels li a {
				width: 100%;
				height: 100%;
				display: block;
			}
			.panels li a:after {
				content: '';
				width: 80%;
				height: 5px;
				margin: auto;
				display: block;
/*				background: #fff;	*/
				position: absolute;
				top: 80%;
				left: 0;
				right: 0;
				transition: background 0.3s linear;
				}
				.panels li:hover a:after {
					background: #fff;
				}
			.panels li:nth-child(1) a:after {	top: 85%;	}
			.panels li:nth-child(2) a:after {	top: 91%;	}
			.panels li:nth-child(3) a:after {	top: 91%;	}
			.panels li:nth-child(4) a:after {	top: 82%;	}
			.panels li:nth-child(5) a:after {	top: 82%;	}
			.panels li:nth-child(6) a:after {	top: 78%;	}
			.panels li:nth-child(7) a:after {	top: 78%;	}
			.panels li:nth-child(8) a:after {	top: 85%;	}
			.panels li:nth-child(9) a:after {	top: 82%;	}
			.panels li:nth-child(10) a:after {	top: 91%;	}
			.panels li:nth-child(11) a:after {	top: 85%;	}
			.panels li:nth-child(12) a:after {	top: 82%;	}
			.panels li:nth-child(13) a:after {	top: 91%;	}
			.panels li:nth-child(14) a:after {	top: 91%;	}
			.panels li:nth-child(15) a:after {	top: 85%;	}

			.panels li img {
				display: block;
				width: 100%;
			}
			.panels .color1 {		background-color: #e4003e;		}
			.panels .color2 {		background-color: #ff6900;		}
			.panels .color3 {		background-color: #ffc400;		}
			.panels .scale1 {				width: 20%;			height: 12.5%;	}					/*192*192*/
			.panels .scale2 {				width: 40%;			height: 25%;	}					/*384*384*/
			.panels li:nth-child(1) {		top: 0%;			left: 0;		}
			.panels li:nth-child(2) {		top: 0%;			left: 40%;		}
			.panels li:nth-child(3) {		top: 0%;			left: 80%;		}
			.panels li:nth-child(4) {		top: 25%;			left: 20%;		}
			.panels li:nth-child(5) {		top: 25%;			left: 40%;		}
			.panels li:nth-child(6) {		top: 12.5%;			left: 60%;		}
			.panels li:nth-child(7) {		top: 37.5%;			left: 0%;		}
			.panels li:nth-child(8) {		top: 37.5%;			left: 40%;		}
			.panels li:nth-child(9) {		top: 50%;			left: 80%;		}
			.panels li:nth-child(10) {		top: 62.5%;			left: 0%;		}
			.panels li:nth-child(11) {		top: 62.5%;			left: 20%;		}
			.panels li:nth-child(12) {		top: 62.5%;			left: 80%;		}
			.panels li:nth-child(13) {		top: 87.5%;			left: 0%;		}
			.panels li:nth-child(14) {		top: 87.5%;			left: 40%;		}
			.panels li:nth-child(15) {		top: 75%;			left: 60%;		}

#sliderarea {
	position: fixed;
	top: -9999px;
	left: -9999px;
	z-index: -1;
	display: table;
	width: 100%;
	height: 100%;
	cursor: pointer;
	}
#sliderarea.play {
	top: 0;
	left: 0;
	display: table;
	z-index: 10000;
	}
	#sliderarea:before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		display: block;
		width: 100%;
		height: 100%;
		}
	#sliderarea.play:before {
		background: #000;
		opacity: 0.5;
		}
	#sliderarea .slider {
		position: relative;
		z-index: 1;
		display: table-cell;
		vertical-align: middle;
	}
	.slider2 {
		width: 964px;
		margin: auto;
		cursor: auto;
		}
		.bxslider {
			width: 964px;
			margin: auto;
			}
			.bxslider li {
				width: 964px;
				margin: auto;
				position: relative;
			}
			.bxslider li > div {
				margin: 10px;
				padding: 20px 35px 35px;
				position: relative;
				background: #fff;
				border-radius: 20px;
			}
			#sliderarea.play:before,
			.bxslider li > div .close,
			.bxslider li > div a,
			.bxslider li > div a {
				cursor: pointer;
			}
			.bxslider .color1 .title .no {		color: #e4003e;					}	/* NO背景色文字色 */
			.bxslider .color1 .close {			background: #e4003e;			}	/* 閉じるボタン背景色 */
			.bxslider .color1 .close:before,
			.bxslider .color1 .close:after {	background: #503c1f;			}	/* 閉じるボタン色 */
			.bxslider .color1 .close:hover {	background: #ef668b;			}
			.bxslider .color1 .close:hover:before,
			.bxslider .color1 .close:hover:after {	background: #968a79;		}	/* 閉じるボタン色 */

			.bxslider .color2 .title .no {		color: #ff6900;					}
			.bxslider .color2 .close {			background: #ff6900;			}
			.bxslider .color2 .close:before,
			.bxslider .color2 .close:after {	background: #503c1f;			}
			.bxslider .color2 .close:hover {	background: #ffa566;			}
			.bxslider .color2 .close:hover:before,
			.bxslider .color2 .close:hover:after {	background: #968a79;		}	/* 閉じるボタン色 */

			.bxslider .color3 .title .no {		color: #ffc400;					}
			.bxslider .color3 .close {			background: #ffc400;			}
			.bxslider .color3 .close:before,
			.bxslider .color3 .close:after {	background: #503c1f;			}
			.bxslider .color3 .close:hover {	background: #ffdc66;			}
			.bxslider .color3 .close:hover:before,
			.bxslider .color3 .close:hover:after {	background: #968a79;		}	/* 閉じるボタン色 */

			.bxslider li .title {
				width: 100%;
				font-size: 32px;
				font-weight: bold;
			}
			.bxslider li .title .no {
				font-size: 50px;
			}
			.bxslider li .content {
				width: 100%;
				min-height: 400px;					/* 最大のコンテンツにあわせてます。(目視レベル) */
				margin: 10px auto auto;
				display: table;
				}
				.bxslider li .content > div {
					width: 50%;
					display: table-cell;
					vertical-align: top;
					background: #fff;
					line-height: 1.8;
				}
				.bxslider li .content > div:first-child {
				}
				.bxslider li .content > div:last-child {
					padding: 0 0 0 20px;
					font-size: 16px;
					color: #666;
					background: #fff;
				}
				.bxslider li .content > div p {
					line-height: 2;
				}
				.bxslider li .content > div img {
					width: 100%;
					display: block;
				}
				.bxslider li .content > div span {
					font-weight: bold;
					color: #000;
				}
				.bxslider li .content > div p + p {
				}
				.bxslider li .content > div .small {
					font-size: 14px;
					line-height: 1.5;
				}
				.bxslider li .content > div a {
					font-size: 12px;
				}
			.bxslider li .close {
				width: 80px;
				height: 80px;
				margin: auto;
				border-radius: 40px;
				position: absolute;
				top: -10px;
				right: -10px;
			}
				.bxslider li .close:before,
				.bxslider li .close:after {
					content: '';
					width: 35px;
					height: 5px;
					display: block;
					position: absolute;
					top: 37px;
					left: 23px;
				}
				.bxslider li .close:before {
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
				}
				.bxslider li .close:after {
					-webkit-transform: rotate(-45deg);
					transform: rotate(-45deg);
				}

.tooltipBubble {
	position: relative;
	}
	.tooltipBubble .point {
		display: block;
		position: relative;
		text-decoration: none;
		text-decoration: underline;
		cursor: pointer;
		display: inline-block;
	}
	.tooltipBubble .bubble {
		height: inherit;
		background: #333;
		cursor: pointer;
		opacity: 0;
		padding: 5px;
		position: absolute;
		top: auto;
		bottom: 115%;
		left: 0;
		text-align: left;
		visibility: hidden;
		font-weight: normal;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		-webkit-transition: all 0.25s;
		-moz-transition: all 0.25s;
		-ms-transition: all 0.25s;
		-o-transition: all 0.25s;
		transition: all 0.25s;
		font-size: 10px;
	}
	.bxslider .tooltipBubble .bubble {
		color: #fff;
	}
	.tooltipBubble .point:hover + .bubble {
		opacity: 1;
		visibility: visible;
		-webkit-transition: all 0.25s;
		-moz-transition: all 0.25s;
		-ms-transition: all 0.25s;
		-o-transition: all 0.25s;
		transition: all 0.25s;
	}
	.tooltipBubble .bubble:after {
		border: 8px solid transparent;
		border-top-color: #333333;
		bottom: -15px;
		content: '';
		height: 0px;
		left: 0;
		margin: 0 0 0 20px;
		position: absolute;
		right: 0;
		width: 0px;
	}