@charset "utf-8";

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
reset
*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align:middle;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* HTML5BP:
   These selection declarations have to be separate.
   No text-shadow: twitter.com/miketaylr/status/12228805301
   Also: hot pink. */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
base
*/
body {
font-family:"HiraKakuProN-W6","PhonepadTwo",Arial,sans-serif;
font-size:13px;
line-height:1.4;
background:#fff;
color:#000;
letter-spacing:-0.001em;
word-wrap:break-word;
-webkit-text-size-adjust:none;
-webkit-tap-highlight-color:rgba(0,0,0, 0.5);
}
* {
	box-sizing: border-box;
}

#gnHeader {
	margin-bottom: 0;
}
#gnHeader .headerMenuBtnWrap {
	background: #fff;
}
#contentArea {
	font-family: "Noto Sans Japanese", Roboto, "Droid Sans", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	max-width: 100%;
	margin: auto;
	overflow: hidden;
	position: relative;
	}
	#contentArea a {
		color: #666;
		text-decoration: underline;
	}
	#contentArea img {
		width: 100%;
		display: block;
		margin: auto;
	}
.transparent {
	width: 1px;
	height: 1px;
	position: absolute;
	top: 0;
	left: 0;
}

.sns {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	}
	ul.share {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-moz-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		}
		ul.share > li {
			width: 16%;
			margin: 0 0 0 10px;
			width: 30px;
			height: 30px;
			}
			ul.share > li a {
				display: block;
				}
				ul.share > li img {
					width: 100%;
					}

.loading #mainTitle {
	visibility: hidden;
	}
#mainTitle {
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 60px;
	background-image: url( "../IMAGES/bg_mainarea.png" ), url( "../IMAGES/main.jpg" );
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	}
	#mainTitle .btn {
		position: absolute;
		top: 10px;
		right: 5px;
	}
	#mainTitle .btn .switchLang,
	#mainTitle .btn .share,
	#mainTitle .btn .share li {
		height: 17px;
		margin: 0 0 0 2px;
		display: inline-block;
		font-size: 0;
		}
		#mainTitle .btn .switchLang {
			padding-right: 10px;
			border-right: 1px solid #fff;
		}
		#mainTitle .btn img {
			width: auto;
			height: 100%;
			margin: auto;
		}

	#mainTitle h1 {
		height: 50%;
		margin-top: 20px;
		}
		#mainTitle h1 img {
			width: auto;
			height: 100%;
		}
		#mainTitle .mainPlayMovie {
			height: 9%;
			margin-top: 30px;
			display: block;
			}
			#mainTitle .mainPlayMovie span {
				height: 100%;
				display: block;
				}
				#mainTitle .mainPlayMovie img {
					width: auto;
					height: 100%;
					display: block;
				}
	#mainTitle .buttons {
		width: 120px;
		padding: 0;
		display: block;
		position: absolute;
		right: 10px;
		bottom: 10px;
		}
		#mainTitle .buttons .pet img {
			width: 100%;
			}

.under {
	background: url(../../IMAGES/bg_tile.png) left top repeat;
	opacity: 0;
}
#lead {
	padding: 50px 0 0;
	}
	#lead h2 {
		padding: 0 30px;
	}
	#lead img {
		width: 100%;
	}
	#lead p {
		margin-top: 20px;
		text-align: center;
		font-size: 14px;
		line-height: 2;
		color: #666;
	}

#result {
	padding: 50px 0 0;
	}
	#result h3 {
		width: 188px;
		margin: auto;
	}

	#result .graph {
		position: relative;
		margin-top: 25px;
		padding-top: 20px;
		box-sizing: border-box;
	}
	#result .consideration {
		padding: 20px 15px;
		background: url(../IMAGES/bg_result_graph.png) top left repeat-y;
		background-size: 100% auto;
		}
		#result .consideration p {
			text-align: center;
			color: #fff;
			margin: 0 -15px;
			line-height: 1.8;
			font-size: 14px;
			font-weight: bold;
		}
		#result .consideration ul {
			margin-top: 20px;
			color: #fff;
			font-size: 10px;
			line-height: 1.2;
		}

#supporters {
	padding: 40px 0 0;
	background: #fff;
	}
	#supporters h4 {
		margin: 0 15px;
	}
	#supporters p {
		margin-top: 20px;
		font-size: 14px;
		line-height: 2;
		color: #666;
		text-align: center;
	}
	#supporters .tile {
		margin-top: 40px;
		font-size: 0;
		}
		#supporters .tile li {
			width: 33.33%;
			padding: 1px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			box-sizing: border-box;
			display: inline-block;
			line-height: 0;
			vertical-align: top;
		}

#action {
	padding: 40px 15px;
	}
	#action a {
		display: inline;
	}
	#action .text {
		margin-top: 20px;
		font-size: 14px;
		line-height: 2;
		color: #666;
	}
	#action .thumb {
		margin-top: 30px;
		display: block;
	}

#tips {
	padding: 40px 15px;
	background: #000;
	background: -moz-linear-gradient(left, #fece01 0%, #e92547 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #fece01 0%,#e92547 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #fece01 0%,#e92547 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
	#tips ol {
		margin-top: 25px;
	}
	#tips dt {
		margin-top: 20px;
	}
	#tips dd {
		margin-top: 12px;
	}
	#tips .text {
		margin: 20px -15px 0;
		font-size: 14px;
		line-height: 1.2;
		color: #fff;
		text-align: center;
	}
	#tips .detail {
		width: 165px;
		margin: 10px auto 0;
		display: block;
	}

#banner {
	padding: 40px 15px;
	}

#playerWrapper {
	display: none;
	}
#playerWrapper.on {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 101;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: rgba( 0, 0, 0, .6 );
	}
	#playerWrapper .player {
		position: relative;
		width: 90%;
		padding-top: 50.625%;
		}
		#playerWrapper #YTplayer {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			}

#learning {
	padding: 40px 15px;
	background: #fff;
	color: #666;
	}
	#learning .sub {
		margin: 30px 0 0;
		display: -webkit-flex;
		display:-ms-flexbox;
		display: flex;
		justify-content: center;
		-webkit-box-align: center;
		-moz-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		align-items: flex-end;
		}
		#learning .sub > * {
		}
		#learning .sub > p {
			width: 244px;
		}
		#learning .sub > a {
			width: 97px;
		}
	#learning > p {
		margin: 20px 0 0;
		font-size: 14px;
		line-height: 1.5;
	}
	#learning > span ,
	#learning .boxImage p {
		margin: 15px 0 0;
		display: block;
		font-size: 12px;
	}
	#learning .boxImage {
		margin: 25px 0 0;
	}
	#learning > a {
		width: 97px;
		display: block;
		margin: 15px 0 0 auto;
	}

#pet {
	padding: 40px 0 0;
	border-top: 1px solid #666;
	background: #fff;
	}
	#pet h4 {
		width: 212px;
		margin: auto;
		}

	#pet p {
		margin-top: 40px;
		text-align: center;
		font-size: 13px;
		line-height: 2;
		color: #666;
		}
		#pet p + p {
			margin-top: 0;
		}
	#pet .profile {
 		margin: 15px 15px 0;
		padding: 15px;
		display: table;
		background: #eee;
		}
		#pet .profile div {
			width: 30%;
			padding-right: 15px;
			display: table-cell;
			vertical-align: top;
		}
		#pet .profile dl {
			width: 70%;
			display: table-cell;
			vertical-align: top;
			color: #666;
			}
			#pet .profile dt {
				font-size: 12px;
				font-weight: bold;
			}
			#pet .profile dd {
				margin-top: 5px;
				font-size: 10px;
			}


.panelWrapper {
	width: 100%;
	margin: 40px auto 0;
	position: relative;
	}
	.panelWrapper .base img {
		width: 100%;
		display: block;
	}
	.dogs {
		}
		.dogs li {
			width: 33.3333%;
			height: 8%;
			overflow: hidden;
			position: absolute;
		}
		.dogs li:nth-child(1) {		top: 0;					left: 66.6666%;		}
		.dogs li:nth-child(2) {		top: 28%;				left: 0%;			}
		.dogs li:nth-child(3) {		top: 36%;				left: 66.6666%;		}
		.dogs li:nth-child(4) {		top: 64%;				left: 0%;			}
		.dogs li:nth-child(5) {		top: 64%;				left: 66.6666%;		}
		.dogs li:nth-child(6) {		top: 80%;				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;
			z-index: 30;
			}
			.panels li a {
				width: 100%;
				height: 100%;
				display: block;
			}
			.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: 33.3333%;	height: 8%;		}					/*250*250*/
			.panels .scale2 {				width: 50%;			height: 12%;	}					/*375*375*/
			.panels .scale3 {				width: 66.6666%;	height: 16%;	}					/*500*500*/
			.panels li:nth-child(1) {		top: 0%;			left: 0;		}
			.panels li:nth-child(2) {		top: 8%;			left: 66.6666%;		}
			.panels li:nth-child(3) {		top: 16%;			left: 0%;			}
			.panels li:nth-child(4) {		top: 16%;			left: 50%;			}
			.panels li:nth-child(5) {		top: 28%;			left: 33.3333%;		}
			.panels li:nth-child(6) {		top: 28%;			left: 66.6666%;		}
			.panels li:nth-child(7) {		top: 36%;			left: 0%;			}
			.panels li:nth-child(8) {		top: 44%;			left: 66.6666%;		}
			.panels li:nth-child(9) {		top: 52%;			left: 0%;			}
			.panels li:nth-child(10) {		top: 52%;			left: 50%;			}
			.panels li:nth-child(11) {		top: 64%;			left: 33.3333%;		}
			.panels li:nth-child(12) {		top: 72%;			left: 0%;			}
			.panels li:nth-child(13) {		top: 72%;			left: 33.3333%;		}
			.panels li:nth-child(14) {		top: 88%;			left: 0%;			}
			.panels li:nth-child(15) {		top: 88%;			left: 50%;			}

#sliderarea {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	height: 100%;
	z-index: -9999;
	opacity: 0;
}

#sliderarea.on {
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	z-index: 9999;
	opacity: 1;
	}
	#sliderarea .bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.75);
	}
	#sliderarea .slider {
		width: 100%;
		margin: auto;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background-size: contain;
		overflow :hidden;
		}

.bxslider {
	width: 92%;
	margin: auto;
	}
	.bxslider li {
		width: 100%;
		margin: auto;
		position: relative;
		}
		.bxslider li > div {
			margin: 5px;
			padding: 15px;
			border-radius: 20px;
			background: #fff;
		}
		.bxslider .color1 .title .no {		color: #e4003e;				}			/* NO背景色文字色 */
		.bxslider .color1 .close {			background: #e4003e;		}			/* 閉じるボタン背景色 */
		.bxslider .color1 .close:before,
		.bxslider .color1 .close:after {	background: #503c1f;		}			/* 閉じるボタン色 */
		.bxslider .color2 .title .no {		color: #ff6900;				}
		.bxslider .color2 .close {			background: #ff6900;		}
		.bxslider .color2 .close:before,
		.bxslider .color2 .close:after {	background: #503c1f;		}
		.bxslider .color3 .title .no {		color: #ffc400;				}
		.bxslider .color3 .close {			background: #ffc400;		}
		.bxslider .color3 .close:before,
		.bxslider .color3 .close:after {	background: #503c1f;		}

		.bxslider li .title {
			width: 100%;
			font-weight: bold;
		}
		.bxslider li .title .no {
			font-size: 24px;
		}
		.bxslider li .title .letterSpacing {
			letter-spacing: -0.5em;
		}
		.bxslider li .title p {
			font-size: 18px;
			line-height: 1;
		}
		.bxslider li .content {
			width: 100%;
			background: #fff;
			box-sizing: border-box;
			}
			.bxslider li .content .image {
				width: 100%;
				margin: auto;
				padding: 10px 0;
			}
			.bxslider li .content > p {
				font-size: 12px;
				line-height: 1.4;
				letter-spacing: -0.025em;
				color: #666;
				background: #fff;
			}
			.bxslider li .content > .small {
				font-size: 11px;
				line-height: 1.2;

			}
			.bxslider li .content .link {
				margin-top: 5px;
				}
				.bxslider li .content > p span {
					font-weight: bold;
					color: #000;
				}
			.bxslider li .close {
				width: 40px;
				height: 0;
				padding-top: 40px;
				margin: auto;
				border-radius: 20px;
				position: absolute;
				top: 0;
				right: 2px;
				display: block;
				overflow: hidden;
				}
					.bxslider li .close span {
						height: 0;
						display: block;
					}
					.bxslider li .close:before,
					.bxslider li .close:after {
						content: '';
						width: 20px;
						height: 3px;
						display: block;
						position: absolute;
						top: 19px;
						left: 10px;
					}
					.bxslider li .close:before {
						-webkit-transform: rotate(45deg);
						transform: rotate(45deg);
					}
					.bxslider li .close:after {
						-webkit-transform: rotate(-45deg);
						transform: rotate(-45deg);
					}
				.bxslider .sliderItemsCustom {
					margin: 5px auto 0;
					display: -webkit-flex;
					display:-ms-flexbox;
					display: flex;
					-webkit-justify-content: space-between;
					-ms-flex-pack:justify;
					justify-content:space-between;
					}
					.bxslider .sliderItemsCustom .prev,
					.bxslider .sliderItemsCustom .next {
						width: 18px;
						height: 30px;
						overflow: hidden;
						display: block;
						background: url(../../IMAGES/bt_panel_slider_sprite.png) no-repeat;
						background-size: 100px 150px;
					}
					.bxslider .sliderItemsCustom .prev {
						background-position: left -100px;
					}
					.bxslider .sliderItemsCustom .next {
						background-position: -50px -100px;
					}

.tooltipBubble {
	position: relative;
	}
	.tooltipBubble .point {
		display: inline-block;
		position: relative;
		text-decoration: underline;
	}
	.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;
	}