/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;afont-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

*{
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	line-height: 1.7;
	font-weight: 500;
}

.shindan-area,
.about-area,
.result-area{
	display: none;
}

.loading{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content:center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
	height:100%;
	text-align: center;
	background: #F4F4F4;
}

.loading p{
	line-height: 1.5;
}

html{
	width: 100%;
	height:100%;
	background: #fff;
}

body{
	position: relative;
	max-width: 800px;
	width:100%;
	height: 100%;
	min-height:100%;
	margin: 0 auto;
	background: #fff;
	font-size: 20px;
}

.wrapper{
	display: none;
	position: relative;
	box-sizing:border-box;
	min-height: 100%;
	padding-bottom: 30px;
	background: #F4F4F4;
}

h1,h2,
.shindan-area dt{
	text-align: center;
	background: #E00000;
	padding: 15px 0;
	margin-bottom: 20px;
	font-weight: bold;
	color: white;
}

h1,h2{
	font-weight: bold;
	color: #fff;
}

.ready-area{
	text-align: center;
}

.lead-image{
	text-align: center;
	margin-bottom: 10px;
}

.lead-image>img{
	max-width:300px;
	max-height:300px;
}

.lead-text{
	margin: 0 0 20px;
	padding:0 20px;
	font-size: .8em;
}

.start-button-area{
	display:-webkit-flex;
	display: flex;
	-webkit-justify-content:space-around;
	justify-content: space-around;
	-webkit-align-items:center;
	align-items:center;
	margin-top: 20px;
	width: 100%;
	text-align: center;
}

.start-button-area li{
	width: 40%;
}


button{
	padding:15px 15px;
	border: 0;
	background: #E00000;
	font-size: 16px;
	width: 100%;
	border-radius: 5px;
	color:white;
	font-weight: bold;
}

button:hover{
	background: #c50e29;
	color:#fff;
}

button span{
	font-weight: bold;
}

.start-button-area li button{
	padding: 15px 5px;
}


.about-button,
.about-back-button{
	border: 1px solid #666;
	color:#333;
	background: white;
}


.question-box{
	height:100%;
}

.shindan-area{
	position: relative;
	width: 100%;
	height:100%;
	min-height:100%;
}

.question-area{
	position: absolute;
	top:0;
	width: 100%;
	height:100%;
}

.shindan-area dd{
	position: absolute;
	top:0;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content:center;
	justify-content: center;
	-webkit-align-items:center;
	align-items:center;
	width: 100%;
	height:100%;
	text-align: center;
}

.answer-area{
	position: absolute;
	width: 100%;
	bottom: 10%;
}

.answer-button{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content:space-around;
	justify-content: space-around;
}

.answer-button li{
	width: 30%;
}

.answer-button li button{
	width: 100%;
}

.result-area{
	height: 100%;
}

.message-area dt{
	font-weight: bold;
	text-align: center;
}

.chara-image{
	margin: 30px auto;
	text-align: center;
}

.manga-title{
	padding-top: 1ex;
	padding-top: 1ex;
	border-top: 1px dotted #333;
	text-align: center;
}

.manga-charactor{
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-items:center;
	align-items:center;
	margin-bottom:15px;
}

.manga-charactor span{
	display: inline-block;
	text-align: center;
	width:45%;
}

.manga-charactor span img{
	margin-bottom:5px;
	max-width:100%;
	max-height:300px;
}

.chara-image img{
	width:20%;
}

.seed-link{
	text-align: center;
    margin-bottom: 1em;
}

.seed-link a{
	display: inline-block;
	padding: 10px;
	background-color: #ff5252;
	color:#fff;
	text-decoration:none;
}

.about-area p{
	font-size: 0.8em;
	width:80%;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #000;
}

.about-area>div>p:last-child{
	border-bottom: none;
}

.message-text,
.message-text2,
.atogaki{
	margin: 15px 5%;
	font-size: 0.8em;
	text-align: center;
}

.message-text{
	border-bottom: 1px solid #666;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.message-text2{
	margin-bottom: 50px;
}

.atogaki{
	padding: 20px;
	background: #E1E2E1;
}

.sns-area{
	width: 100%;
	height:20px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content:space-around;
	justify-content: space-around;
	-webkit-align-items:center;
	align-items: center;
}

.sns-area>*{
	vertical-align: bottom;
}

.line-it-button{
	width: 84px !important;
	height:20px !important;
}

.back-area{
	width: 30%;
	margin: 15px auto;
	text-align: center;
}

.fb_iframe_widget > span {
  vertical-align: baseline !important;
}

.copyright{
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 12px;
	bottom: 5px;
}

@media screen and (max-width:640px){
	.lead-image>img{
		height:240px;
	}
	.back-area{
		width: 70%;
	}
	button:hover{
		color:#000 !important;
		background: #ff5252 !important;
	}
}

strong{
	font-weight:bold;
	font-size: 1.2em;
}

.red-highlight{
	font-weight:bold;
	color: #ff5252;
}

.type-introduction-area{
	display:flex;
	align-items: stretch;
	justify-content: space-around;
	gap:10px;
	text-align: center;
	padding: 0 10px;
}

.type-introduction-area li{
	width: 23%;
	background: white;
	border-radius: 5px;
	padding:15px 5px;
	font-size: 0.6em;
}


.type-introduction-area .type-image img{
	max-width: 100%;
}

.type-introduction-area .type-name{
	padding:10px 3px;
	text-align: center;
	font-weight: bold;
	color:#fff;
	border-radius:20px;
	font-size: 1.1em;
	margin-bottom: 8px;
}

.type-introduction-area .type-power{
	background: #E00000;
}

.type-introduction-area .type-love{
	background: #E92952;
}

.type-introduction-area .type-value{
	background: #EEA726;
}

.type-introduction-area .type-growth{
	background: #34753D;
}

.type-introduction-area .type-stimulus{
	background: #0083C9;
}

.type-introduction-area .type-sub{
	color:#333;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid #666;
}

.result-area .message-area dl{
	text-align: center;
}

.result-area .message-area dt{
	margin: 0 auto;
	padding: 15px 10px;
	border-radius: 10px;

	max-width:300px;
	background: white;
}

.result-area .message-area dt img{
	max-width: 100%;
}

.result-area .message-area dt span.type-name{
	display:block;
	font-weight: bold;
	color:white;
	padding:6px 3px;
	text-align: center;
	font-weight: bold;
	color:#fff;
	border-radius:20px;
	margin-bottom: 8px;
}

.message-area.type-power dt span.type-name{
	background: #E00000;
}

.message-area.type-love dt span.type-name{
	background: #E92952;
}

.message-area.type-value dt span.type-name{
	background: #EEA726;
}

.message-area.type-growth dt span.type-name{
	background: #34753D;
}

.message-area.type-stimulus dt span.type-name{
	background: #0083C9;
}

.type-introduction-area .type-sub{
	color:#333;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid #666;
}

@media screen and (max-width:640px){
	.type-introduction-area{
		display:block;
	}

	.type-introduction-area li{
		display: flex;
		align-items: center;
		width: 100%;
		margin-bottom: 10px;
		gap:10px;
	}

	.type-introduction-area li .type-content{
		width: 40%;
	}

	.type-introduction-area li .type-content .type-sub{
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: none;
	}

	.type-introduction-area li p{
		text-align: left;
	}

	.type-introduction-area li br{
		display: none;
	}

	.start-button-area li{
		width: 49%;
	}
}