@charset "utf-8";
/* CSS Document */

/**
 * 共通
 */

html,body{
	width:100%;
	height:100%;
	}

body{
	font-size:62.5%;
	-webkit-text-size-adjust: none;
	font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	line-height:150%;
	}

#wrapper{
	overflow:hidden;
	background-color:#d23d84;
	}

li{
	list-style:none;
	}

img{
	width:100%;
	}

figure{
	border-radius:12px;
	background-color:#edb0ca;
	padding:6.5%;
	margin-bottom:8%;
	}

.innr{
	padding:5%;
	}


/* ページTOP */

nav{
	background-color:#ffffff;
	text-align:center;
	font-size:1rem;
	border-top:solid 2px #d23d84;
	border-bottom:solid 2px #d23d84;
	}
	
	nav a{
		color:#e4007e;
		padding:5%;
		display:block;
		text-decoration:none;
		}

/**
 * ヘッダー
 */
header{
	background-color:#ffffff;
	padding:15px;
	position:relative;
	}

	header h1{
		width:80px;
		display:inline-block;
		}
		
		header h1 img{
			width:100%;
			}

.social{
	position:absolute;
	top:30%;
	right:2%;
	}
	
	.social li{
		display:inline-block;
		float:left;
		}
	
	.social div.fb-like,
	.social div.fb-share-button{
		display:inline;
		position:absolute;
		right:102px;
		}
	
	.social .hdBtnLINE{
		margin-left:5px;
		}
	.social .hdBtnLINE img{
		vertical-align:bottom;
		}
	
	.social img{
		width:82px;
		}


/**
 * TOP
 */
 
#shindan h2{
	margin:2% auto;
	padding:0 8% 8%;
	}

	h2 img{
		width:100%;
		}

.topMain{
	margin:5% -6%;
	}
	

	

/**/
#shindan .main_copy{
	padding:5% 4% 0;	
	}

/* 診断ボックス */
	
#shindan .shindan_select{
	padding:0;
	font-size:0.9rem;
	color:#ffffff;
	text-align:center;
	}
	
	#shindan .shindan_select strong{
		display:block;
		margin:0 0 8%;
		}
	
	#shindan .shindan_select select,
	#shindan .shindan_select input{
		background-color:#ffffff;
		font-size:0.9rem;
		}
		
		#shindan .shindan_select input[type="text"]{
			width:70%;
			border:solid 1px #000000;
			padding:5px;
			}
	
	#shindan .shindan_select select{
		margin:-2% 2% 0;
		}
	
	#shindan .shindan_select .selectLine{
		margin-bottom:3%;
		font-size:0.8rem;
		vertical-align:middle;
		padding-right:2em;
		color:#000000
		}
		
		#shindan .shindan_select .selectLine span{
			font-size:0.9rem;
			}

	
	#shindan .shindan_select #shindan_apply{
		padding:5px 20px;
		}

/**
 * 診断結果
 */

figure#main_character{
	position:relative;
	padding:52% 6.5%;
	}
	
	figure#main_character img{
		display:none;
		position:absolute;
		left:0;
		top:0;
		z-index:1;
		-webkit-animation-fill-mode:both;
		-webkit-animation-play-state:paused;
		}
		
	figure#main_character img.play{
		display:block;
		-webkit-animation-play-state:running;
		}

	/* ceramic - anime */	
	body#ceramic figure#main_character img{
		-webkit-animation-name:ceramic;
		-webkit-animation-duration:1s;
		}
		
	@-webkit-keyframes ceramic{
		0% {left: 0; top: -300px; -webkit-animation-timing-function:ease-in;}
		30% {left: 0; top: 0; -webkit-animation-timing-function:ease-out;}
		45% {left: 0; top: -100px; -webkit-animation-timing-function:ease-in;}
		60% {left: 0; top: 0; -webkit-animation-timing-function:ease-out;}
		70% {left: 0; top: -50px; -webkit-animation-timing-function:ease-in;}
		80% {left: 0; top: 0; -webkit-animation-timing-function:ease-out;}
		90% {left: 0; top: -20px; -webkit-animation-timing-function:ease-in;}
		99% {left: 0; top: 0;}
		100% {left: 0; top: 0;}
		}

	/* diesel - anime */	
	body#diesel figure#main_character img{
		-webkit-animation-name:diesel;
		-webkit-animation-duration:0.5s;
		}
		
	@-webkit-keyframes diesel{
		0% {left: 0; top: 600px; -webkit-animation-timing-function:ease-in;}
		90% {left: 0; top: -50px; -webkit-animation-timing-function:ease-out;}
		92% {left: 0; top: 10px; -webkit-animation-timing-function:ease-in;}
		94% {left: 0; top: -10px; -webkit-animation-timing-function:ease-out;}
		96% {left: 0; top: 10px; -webkit-animation-timing-function:ease-in;}
		98% {left: 0; top: -10px; -webkit-animation-timing-function:ease-out;}
		100% {left: 0; top: 0;}
		}

	/* hev - anime */	
	body#hev figure#main_character img{
		-webkit-animation-name:hev;
		-webkit-animation-duration:1s;
		}
		
	@-webkit-keyframes hev{
		0% {left: -10px; top: -300px; -webkit-animation-timing-function:liner;}
		10% {left: 10px; top: -270px; -webkit-animation-timing-function:liner;}
		20% {left: -10px; top: -240px; -webkit-animation-timing-function:liner;}
		30% {left: 10px; top: -210px; -webkit-animation-timing-function:liner;}
		40% {left: -10px; top: -180px; -webkit-animation-timing-function:liner;}
		50% {left: 10px; top: -150px; -webkit-animation-timing-function:liner;}
		60% {left: -10px; top: -120px; -webkit-animation-timing-function:liner;}
		70% {left: 10px; top: -90px; -webkit-animation-timing-function:liner;}
		80% {left: -10px; top: -60px; -webkit-animation-timing-function:liner;}
		90% {left: 10px; top: -30px; -webkit-animation-timing-function:liner;}
		100% {left: 0; top: 0;}
		}

	/* carrier - anime */	
	body#carrier figure#main_character img{
		-webkit-animation-name:carrier;
		-webkit-animation-duration:1s;
		}
		
	@-webkit-keyframes carrier{
		0% {left: 0; top: -300px; -webkit-animation-timing-function:ease-in;}
		30% {left: 0; top: 0; -webkit-animation-timing-function:ease-out;}
		45% {left: 0; top: -100px; -webkit-animation-timing-function:ease-in;}
		60% {left: 0; top: 0; -webkit-animation-timing-function:ease-out;}
		70% {left: 0; top: -50px; -webkit-animation-timing-function:ease-in;}
		80% {left: 0; top: 0; -webkit-animation-timing-function:ease-out;}
		90% {left: 0; top: -20px; -webkit-animation-timing-function:ease-in;}
		99% {left: 0; top: 0;}
		100% {left: 0; top: 0;}
		}


	/* meter - anime */	
	body#meter figure#main_character img{
		-webkit-animation-name:meter;
		-webkit-animation-duration:1s;
		}
		
	@-webkit-keyframes meter{
		0% {left: 300px; top: -10px; -webkit-animation-timing-function:liner;}
		10% {left: 270px; top: 0px; -webkit-animation-timing-function:liner;}
		20% {left: 240px; top: -10px; -webkit-animation-timing-function:liner;}
		30% {left: 210px; top: 0px; -webkit-animation-timing-function:liner;}
		40% {left: 180px; top: -30px; -webkit-animation-timing-function:liner;}
		50% {left: 150px; top: 0px; -webkit-animation-timing-function:liner;}
		60% {left: 120px; top: -50px; -webkit-animation-timing-function:liner;}
		70% {left: 90px; top: -50px; -webkit-animation-timing-function:liner;}
		80% {left: 60px; top: -50px; -webkit-animation-timing-function:liner;}
		90% {left: 30px; top: -50px; -webkit-animation-timing-function:liner;}
		100% {left: 0; top: 0;}
		}

#result .innr{
	padding-bottom:0;
	}

.graphWrap{
	position:relative;
	margin-bottom:8%;
}
.graphWrap canvas{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

#result .title{
	padding:0 0 5%;	
	}
	
	#result h2{
	 	border-top:solid 1px #ffffff;
		background-image:url(../images/ico_open.png);
		background-repeat:no-repeat;
		background-position:right center;
		background-size:40px;
		}
		
		
		#result h2.ui-accordion-header-active{
			background-image:url(../images/ico_close.png);
			background-color:#db649d;
			background-repeat:no-repeat;
			background-position:right center;
			background-size:40px;
			}

		
		#result #accordion #about,
		#result #accordion #detail,
		#result #accordion #affinity,
		#result #accordion #products{
			background-color:#ffffff;
			padding:5%;
			font-size:1.0rem;
			line-height:1.5em;
			color:#e3007f;
			}
		
		#result #accordion div p{
			margin-bottom:8%;
			}
		
		#result h3{
			margin-bottom:4%;
			}
#result #accordion #affinity{
	margin-bottom:0!important;
	padding-bottom:20%!important;
	}


#result .btn{
	margin:0 11% 8%;
	padding:2%;
	border-radius:20px;
	border:solid 3px #e93398;
	cursor:pointer;
	}

	#result .btn img{
		width:100%;
		}

#result #affinity .btn{
	margin:0 15% 8%;
	}


#result #affinity #indexList li{
	width:49%;
	margin-left:2%;
	margin-bottom:2%;
	float:left;
	border-radius:12px;
	background-color:#edb0ca;
	padding:0;
	text-align:center;
	}
	
	#result #affinity #indexList li:nth-child(2n+1){
		margin-left:0;
		}

#result #affinity #indexList:after{
	content:"";
	display:block;
	clear:both;
	}

#result #affinity #indexList li img{
	width:60%;
	}

/* add Love */
#result .aruaru{
	padding:10px 0;
	text-align:center;
	border-top:solid 2px #e4007e;
	border-bottom:solid 2px #e4007e;
	font-weight:bold;
	}
	
	#result .aruaru + h3 + p{
		font-size:80%;
		line-height:1.5;
		}
	
	#result .aruaru img{
		vertical-align:bottom;
		}

#result .scene:after{
	content:"";
	display:block;
	clear:both;
	}
	
	#result .scene li{
		width:50%;
		float:left;
		text-align:center;
		}
	
	#result .scene li img{
		width:90%;
		}
	
	#result .scene li p{
		font-size:0.6rem;
		line-height:1.3;
		width:90%;
		margin:0 auto;
		}

#products h3{
	padding:10px 0;
	text-align:center;
	border-top:solid 2px #e4007e;
	border-bottom:solid 2px #e4007e;
	font-weight:bold;
	}
	
	#products h3 img{
		vertical-align:bottom;
		}
	
	
	

/* スライダー */

#slideWrapper{
	display:none;
	}
	
	.flexslider .innr{
		padding:0 5%;
		}
	
	.flexslider figure{
		position:relative;
		padding:16% 0;
		margin:0 2% 5%;
		}
		
		.flexslider figure .character{
			width:34%!important;
			position:absolute;
			left:4%;
			top:5%;
			}
		
		.flexslider figurecaption{
			display:block;
			width:25%!important;
			position:absolute;
			top:11%;
			right:18%;
			}
			
		.flexslider figure p{
			display:block;
			width:50%;
			position:absolute;
			bottom:15%;
			right:5%;
			margin-bottom:0!important;
			}


/**
 * フッタ
 */
 
 footer img{
 	width:100%;
	vertical-align:bottom;
	}


/* bridge */

h2.bridge{
	background-color:#006cb8!important;
	}
	
	h2.bridge.ui-accordion-header-active{
		background-color:#3389c6!important;
		}
	
	.bridgeBody{
		color:#3389c6!important;
		}

.bridgeBody .btn{
	margin-top:20px!important;
	border:solid 2px #3389c6!important;
	}
	
	.bridgeBody #toCharacter img{
		vertical-align:bottom;
		}
	


/**
 * ソーシャル
 */


.socialBox{
	width:80%;
	margin:0 auto 5%;
	}
	
	.socialBox:after{
		content:"";
		display:block;
		clear:both;
		}
	
	.socialBox li{
		float:left;
		width:28%;
		margin-left:8%;
		}
	
	.socialBox li:first-child{
		margin-left:0;
		}