/* common
----------------------------------------------------------- */
html { 
  font-size: 62.5%; /* sets the base font to 10px for easier math */
}

#wrapper{overflow:hidden;}
	
.txt{
	font-size:15px;
	font-size:1.5rem;
	line-height:22px;
	line-height:2.2rem;
}

body{
	width:100%;
	margin:0;
}

img{
	max-width: 100%;
	height: auto;
}

h1, h2{margin:0 auto;}

.lead{
	width:80%;
	max-width:600px;
	margin:40px auto;
}

.teaserContent {
  max-width:500px;
  right:0px;
  left:0px;
  margin:auto;
}

.teaserContent a {
  display:block;
}

.teaserContent .whatPoiboy {
  margin-top:50px;
  background:#FBF8F7;
  padding-bottom:50px;
}

.teaserContent .teaserBanner {
  position:relative;
}

.teaserContent .goLineBtn:hover {
    filter:alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
}

.teaserContent .goLineBtnTop  {
  position:absolute;
  max-width:90%;
  top:78%;
  left:0px;
  right:0px;
  margin-left:auto;
  margin-right:auto; 
}

.teaserContent .goLineBtnMiddle  {
  position:absolute;
  max-width:90%;
  top:67%;
  left:0px;
  right:0px;
  margin-left:auto;
  margin-right:auto; 
}

.teaserContent .goLineBtnBottom  {
  position:absolute;
  max-width:90%;
  top:79%;
  left:0px;
  right:0px;
  margin-left:auto;
  margin-right:auto; 
}

.lineTop {
  padding-top:10px;
}

.boxShadow{
	box-shadow:rgba(0, 16, 16, 0.14902) 0px 0px 5px 1px;
	-webkit-box-shadow:rgba(0, 16, 16, 0.14902) 0px 0px 5px 1px;
	-moz-box-shadow:rgba(0, 16, 16, 0.14902) 0px 0px 5px 1px;
	border-radius: 2.5px;
	-moz-border-radius:2.5px;
    -webkit-border-radius:2.5px;
}

.pink{color:#e95b8b;}


/*footer-------------------- */
footer{
	background:#f8f8f8;
	text-align:center;
	border-top:1px solid #ddd;
}

footer ul{display:block;}

footer ul li{
	float:left;
	width:49.5%;
}

footer ul li a{
	width:100%;
	display:block;
	font-size:13px;
	font-size:1.3rem;
	padding:5px;
}

.pagetop{
	width:100%;
	border-bottom:1px solid #ddd;
}

footer ul li:nth-child(2) {
	border-right:1px solid #ddd;
}

#copy{
	clear:both;
	padding:15px 0;
	border-top:1px solid #ddd;
}

#copy img{
	width:105px;
	margin:0 auto;
}

.copy{
	font-size:9px;
	font-size:0.9rem;
}

/*index.html
----------------------------------------------------------- */
/*header-------------------- */
header{
	background: #ed78a1; /* Old browsers */
	background: -moz-linear-gradient(top,  #fc397c 0%, #ed78a1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fc397c), color-stop(100%,#ed78a1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fc397c 0%,#ed78a1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fc397c 0%,#ed78a1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fc397c 0%,#ed78a1 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fc397c 0%,#ed78a1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc397c', endColorstr='#ed78a1',GradientType=0 ); /* IE6-9 */
	padding:30px 0 50px;
	text-align:center;
}

#logo {}

.logo-auto {
  width:65.3%;
  display:inline-block;
}

.logo-anim {
  position:relative;
  display:inline-block;
  width:320px;
  height:150px;
  background:url('/static/sp/teaser/img/logo/animation.min.png') no-repeat;
  -webkit-animation:logo-keyframes 2.0s steps(20) 0s 1;
  background-size:cover;
}

.logo-anim-unsupport {
  position:relative;
  display:inline-block;
  width:320px;
  height:150px;
  background:url('/static/sp/teaser/img/logo_wh@3x.png') no-repeat;
  background-size:60%;
  background-position:center;
}

.logo-anim>span, .logo-anim-unsupport>span {
   position:absolute;
   text-indent: -9999px;
}

@-webkit-keyframes logo-keyframes {
    0% {
       background-position-y: -3000px;
    }
    100% {
       background-position-y: 0px;
    }
}

header p{
	text-align:center;
	color:#fff;
	line-height:28px !important;
	line-height:2.8rem !important;
	margin:30px 0 0 0;
}

/*detail-------------------- */
#detail{
	padding:50px 4.4% 30px;
	text-align:center
}

#detail p img {
 width:84.5%;
 margin-bottom:15px;
}

.release{
	font-size:21px !important;
	font-size:2.1rem !important;
	font-weight:bold;
	line-height:2.4em;
}

#detail .line{
	margin-bottom:20px;
}

#detail .arrow{
	width:40px;
	margin:20px auto 0;
}

/*diagnosis-------------------- */
#diagnosis{
	background: #e0f2f9; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 10%, #e0f2f9 25%, #fce5ed 55%, #e0f2f9 73%, #ffffff 95%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#ffffff), color-stop(25%,#e0f2f9), color-stop(55%,#fce5ed), color-stop(73%,#e0f2f9), color-stop(95%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 10%,#e0f2f9 25%,#fce5ed 55%,#e0f2f9 73%,#ffffff 95%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 10%,#e0f2f9 25%,#fce5ed 55%,#e0f2f9 73%,#ffffff 95%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 10%,#e0f2f9 25%,#fce5ed 55%,#e0f2f9 73%,#ffffff 95%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 10%,#e0f2f9 25%,#fce5ed 55%,#e0f2f9 73%,#ffffff 95%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	border-top:#EE7BA3 solid 5px;
	padding:40px 4.4% 50px;
	text-align:center;
}

#diagnosis h2{max-width:684px;}

/*boys---- */
#boys{
	text-align:center;
	margin:0 auto;
	position:relative;
	width:100%;
}

.poi {
  display:inline-block;
}

.boy {
	float:left;
	position:relative;
	width:33.3%;
	max-width:230px;
	height:auto;
}

.boy_inner{
	min-width:115px;
	min-height:115px;
	padding:0 0 50%;
}

.boy-img-11 .boy_inner{padding:50% 0;}

.boy img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
}

.boy-img-2,.boy-img-5,.boy-img-8,.boy-img-11{
	top:90px;
}

.boy_on{
  display:none;
}

.boy_off{
  display:block;
}

.poi-disabled {
  cursor:auto;
}

.poi-anim {
  position:absolute;
  display:block;
  width:132px;
  height:170px;
  background:url('/static/sp/teaser/img/poi/animation.min.png') no-repeat;
  -webkit-animation:poi-keyframes 1.2s steps(17) 0s 1;
  background-size:cover;
  pointer-events: none;
  right:12px;
  top:-18px;
  z-index:100;
}

@-webkit-keyframes poi-keyframes {
    0% {
       background-position-y: -2900px;
    }
    100% {
       background-position-y: 0px;
    }
}

.diagnosis{
	clear:both;
	width:100%;
	max-width:684px;
	min-height:41px;
}

.poi-result{
	color:#fff;
	font-size:18px;
	font-size:1.8rem;
	border-style:none;
	width:100%;
	border-radius: 46px;
	-moz-border-radius:46px;
    -webkit-border-radius:46px;
	box-shadow:rgba(0, 0, 0, 0.2) 1px 1px 3px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.2) 1px 1px 3px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.2) 1px 1px 3px 0px;
	padding:10px 0;
  background:#ccc;
  position:relative;
  z-index:50;
}

.poi-result-on {
  background:#ee7ba3;
}

.poi-result-on :hover{
 filter: alpha(opacity=0);
 ms-filter: alpha(opacity=0);
 opacity: 0.0;
}

input[type="submit"] {-webkit-appearance: none;}

/*results.html
----------------------------------------------------------- */
.result{
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 5%, #e0f2f9 15%, #fce5ed 35%, #f8f8f8 40%, #f8f8f8 70%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#ffffff), color-stop(15%,#e0f2f9), color-stop(35%,#fce5ed), color-stop(40%,#f8f8f8), color-stop(70%,#f8f8f8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 5%,#e0f2f9 15%,#fce5ed 35%,#f8f8f8 40%,#f8f8f8 70%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 5%,#e0f2f9 15%,#fce5ed 35%,#f8f8f8 40%,#f8f8f8 70%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 5%,#e0f2f9 15%,#fce5ed 35%,#f8f8f8 40%,#f8f8f8 70%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 5%,#e0f2f9 15%,#fce5ed 35%,#f8f8f8 40%,#f8f8f8 70%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
	border-top:#EE7BA3 solid 5px;
	padding:30px 0 0;
}

.result  h1{
	width:91.2%;
	max-width:684px;
}
	
.result .lead{margin:15px auto;}
.twitterShare {
    display:block;
    border-radius: 5px;   
    width:95%p;
    background:#00ACED ;
    color:#fff;
    font-size:20px;
    height:80px;
    line-height:80px;
    text-align:center;
}

.twitterShare a:link    { color:#fff;}
.twitterShare a:visited { color:#fff;}
.twitterShare a:hover   { color:#fff;}
.twitterShare a:active  { color:#fff;}

/*result-------------------- */
#result .boxShadow{
	background:#fff;
	padding-bottom:30px;
	max-width:1000px;
	margin:0 auto;
}

#result .inner{padding:0 4.4%;}

#result p{
	color:#333;
	padding:16px 0 30px;
}

#animation{}

/*download-------------------- */
#download{
	background:#fdf6ff;
	margin-top:30px;
    text-align:center;
}

#download p{
	font-size:13px;
	font-size:1.3rem;
}

#download .store{
	padding:30px 4.4%;
}

#download .store img {
    position:relative;
    left:0px;
    right:0px; 
    margin:10px auto 10px auto;
    width:49%;
}

#download.txt{
	font-weight:bold;
}

#download .goline {
    text-align:center;
}

#privilege{
	margin:30px auto;
	max-width:684px;
}

#download.banner {
    width: 100%;
}


/*notes-------------------- */
#notes{
	padding:0 4.4%;
}

#notes h3{
	color:#fff;
	background:#7fcdef;
	display:inline-block;
	padding:0 12px;
	border-radius: 30px;
	-webkit-border-radius: 30px;
    -moz-border-radius: 30px;
	font-size:12px;
	font-size:1.2rem;
	margin:16px 0 4px;
}

#notes p{
	font-size:12px;
	font-size:1.2rem;
	line-height:1.6em;
}

#notes #attention{
	background:#fff;
	border:#ccc 1px solid;
	padding:10px;
	color:#999;
	font-size:10px;
	font-size:1rem;
	line-height:1.6em;
	margin:14px 0 30px 0;
}

#notes .attention{
	vertical-align:super;
	font-size:7px;
	font-size:0.7rem;
}

/*
----------------------------------------------------------------------------------------------- */
@media  only screen and (max-width:320px) {
	
.lead{width:90%;}
.release{font-size:19px !important;}
#plof p{
	font-size:11px;
	line-height:1.3em;
}
	 
}

@media only screen and (min-width: 769px) {	

html { font-size: 100%; /* sets the base font to 10px for easier math */}

.line a:hover,.twitter a:hover{
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

footer ul{
	width:500px;
	margin:0 auto;
}

footer ul li{
	width:30% !important;
	border:none !important;
}

footer ul li a{font-size:13px;}
footer ul li a:hover{text-decoration:underline;}

#copy{
	border:none;
	padding:5px 0;
}

.copy{font-size:9px;}

/*index.html
----------------------------------------------------------- */
header{padding:194px 4.4% 100px;}
header h1{max-width:490px;}

#detail{
	padding:100px 4.4% 60px
}

#detail p img {
 max-width:634px;
}

.lead{margin:60px auto;}

.boxShadow{
	border-radius: 5px;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
}
	
/*diagnosis-------------------- */
#diagnosis{padding:80px 4.4% 60px;}
#boys {
//	width:100px;
  width:765px;
	margin:0 auto;}

.boy {
	min-width:230px;
	min-height:230px;
	margin:0 25px 50px 0;
}

//.boy-img-11 .boy_inner{padding:25% 0;}
//.boy-img-2,.boy-img-5,.boy-img-8,.boy-img-11{top:0;}
//.boy-img-4,.boy-img-8,.boy-img-12{margin-right:0;}

.boy-img-11 .boy_inner{padding:25% 0;}
.boy-img-2,.boy-img-5,.boy-img-8,.boy-img-11{top:0;}
.boy-img-3,.boy-img-6,.boy-image-9, boy-img-12{margin-right:0;}


.diagnosis,.poi-result{height:92px;}

.diagnosis{margin: 0 auto;}

/*results.html
----------------------------------------------------------- */
#result p{
	padding:40px 0;
}

#animation{
	max-width:900px;
	padding:50px 50px 0;

}

#download p{
	text-align:center;
}

#plof{
	margin:30px auto 0;
}

#plof p{
	text-align:left;
	top:25%;
	left:12%;
}

#notes .inner{
	max-width:1000px;
	margin:0 auto;
}
#notes h3{
	padding:0 20px;
}

}