@charset "utf-8";
/*---------------------
 209.08.28 creates KINET
-----------------------*/

/*---------------------
 Base
-----------------------*/
html {font-size:16px;}
html, body { height: 100%; }
body {
background: #fff;
font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
color: #2a3439;
font-size:15px;
line-height:170%;
text-align:center;
padding: 0px;
margin: 0 auto;
}
img {
border:0;
}
table {
border-collapse: collapse;
}
.clear {
clear: both;
height: 0px;
}
.fl {
float: left;
}
.fr {
float: right;
}
.left {
text-align:left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/*-------------------
 Wrappers 
-------------------*/
/*-- 血液型別易占い -- */
#wrapper {
background-color:#fff;
width:500px;
color: #2a3439;
font-size:14px;
line-height:170%;
text-align:center;
padding:0px;
margin: 6px auto 0 auto;
}

#f_result {
width:300px;
text-align:center;
margin: 0 auto;
}

#f_result h2 {
font-size:1.375em;
color: #5bae88;
text-align: center;
margin: 10px auto;
}
.eki_result  {
width: 100%;
background:#fff;
border:1px solid #990033;
margin: 0 auto;
padding:0px 0px 8px 0;
}
.eki_result h3 {
background-color:#993300;
font-size:1.125em;
color: #fff;
text-align: center;
padding:0.5em 0;
margin: 0 auto;
}
.eki_result p {
text-align: left;
padding: 0.15em 16px ;
}
.eki_result img {
width:60px;
text-align: center;
margin: 24px auto 0px auto;
}
#f_result input {
color: #600;
line-height: 100%;
background: -moz-linear-gradient( #ffffff 0%, #cc9966 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cc9966));
background: -webkit-linear-gradient( #ffffff 0%, #cc9966 100%);
background: linear-gradient( #ffffff 0%, #cc9966 100%);
border: 1px solid #d0c086;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
padding: 1em;
margin: 18px auto;
}

.ekiuranai {
width: 100%;
background:url(../img/bc_aabob.gif) 0 20px no-repeat;
border:1px solid #990033;
margin: 20px 0 0 0 ;
padding:0px;
}
.ekiuranai h2 {
background-color:#990033;
color: #ffffff;
font-size:1.125em;
text-align:center;
padding: 0.5em;
margin: 0 auto;
}

.ekiuranai .push input {
color: #600;
font-size:1.0em;
line-height: 100%;
background: -moz-linear-gradient( #cc9966 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#cc9966), to(#ffffff));
background: -webkit-linear-gradient( #cc9966 0%, #ffffff 100%);
background: linear-gradient( #cc9966 0%, #ffffff 100%);
border: 1px solid  #eee;
border-radius: 3em;
-webkit-border-radius: 3em;
-moz-border-radius: 3em;
padding: 1em 2em;
margin: 0 auto 30px auto;
box-shadow: 0px 3px 3px #aaa;
-webkit-box-shadow: 0px 3px 3px #aaa;
-moz-box-shadow: 0px 3px 3px #aaa;
}
.ekiuranai .push:active {
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}


.ekiuranai .hb {
text-align: right;
margin: 18px 8px 8px 0;
}
.ekiuranai .hb input {
color: #ffffff;
background: -moz-linear-gradient(top, #f5e6e9, #990033 );
background: -webkit-linear-gradient(top, #f5e6e9, #990033 );
background: linear-gradient(to bottom, #f5e6e9, #990033 );
border: 1px solid #d0c086;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
padding: 1em;
line-height: 100%;
}



.footer {
background-color:#990033;
font-size:0.813em;
color: #ffffff;
font-weight: bold;
text-align:center;
padding: 0.5em;
margin: 0 auto;
}
.footer a {
color: #ffffff;
}
.footer .fl {
width: 24%;
float: left;
}
.footer .fr {
width: 74%;
float: right;
}
 


/*------------
 FONT
------------- */
.small {
font-size: 75%;
}
.large {
font-size: 112.5%;
}






@media only screen and (max-width: 500px) {



/*-------------------
 Wrappers 
-------------------*/
/*-- 血液型別易占い -- */

#wrapper {
min-height: 100vh;
width: 100%;
height:auto;
margin: 0 ;
position: relative;
padding-bottom: 30px;
}

#f_result {
width: 95%;
}
.ekiuranai {
width: 100%;
border:0;
margin: 0 ;
}


.footer {
width: 100%;
position: absolute;
bottom: 0;
}
.footer .fl ,
.footer .fr {
width: 100%;
float: none;
clear: both;
}
 




}
/* スマートフォン 
------------------------------------------------------------*/