@charset "utf-8";

/* ------------------------------------------------------------
 main
------------------------------------------------------------ */

/* html
--------------------------------------------- */
html {
	height:100%;
	overflow:scroll;
	overflow:-moz-scrollbars-vertical;
	overflow-x:auto;
}

/* body
--------------------------------------------- */
body {
	font-family:  "ƒƒCƒŠƒI", Meiryo, "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif,"ƒqƒ‰ƒMƒmŠpƒS Pro W6", "Hiragino Kaku Gothic Pro", Osaka;
	color:#191919;
	background : #fff;
	text-align:center;
	font-size:16px;
}

/* for IE7 */
*:first-child+html body { font-size:100%; }

/* for IE6 */
* html body { font-size:100%; }

button,input {
	font-size:11px;
	font-family:  "ƒƒCƒŠƒI", Meiryo, "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif,"ƒqƒ‰ƒMƒmŠpƒS Pro W6", "Hiragino Kaku Gothic Pro", Osaka;
}

#header p {
	font-size:120%;
	font-weight: lighter;

}



h1 {
	font-size:130%;
	font-weight: lighter;
}

h2{
	font-size:110%;
	font-weight: lighter;
}
h4{
	margin:0;
	padding:0;
}
/* link
--------------------------------------------- */

a,a:link,a:visited,a:hover,a:active {
	outline:0;
	text-decoration:none;
	color:#191919;
	}
/* header
--------------------------------------------- */

#header {
    background-color: #5e5e5e;
    color:#fff;
    border-bottom: 1px solid #E8E8E8;
    box-shadow: 0 0 2px #828282;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

#header p {
	float:left;
	padding:0.5rem 0 0 3.5rem;

}
#header p a,
#header p a:link,
#header p a:visited,
#header p a:hover,
#header p a:active {
	color:#ffffff;

}

#header .iconimg{
position: absolute;
top: 0.7rem;
left: 1rem;
width:35px;
height:34px;

}


li {
	list-style:none;
	}

#header ul#sns_btn {
	float:right;
	padding:6px 0 0 5px;
	line-height: 1;
}

#header ul#sns_btn li {
	display: inline-block;
	padding-right:10px;
}

#header ul#sns_btn li.sns_btn_twi {
width: 95px;
padding-right:0;
}

/* ‚¢‚¢‚˃{ƒ^ƒ“‚̃Rƒƒ“ƒg—“‚ªØ‚ê‚È‚¢‚悤‚É */
.fb-like iframe {
    max-width: none!important;
}

/* ‚¢‚¢‚˃{ƒ^ƒ“‚Ì‚¸‚ê‘Ώˆ
.fb_iframe_widget > span {
  vertical-align: baseline !important;
}
 */

/* container
--------------------------------------------- */
#container {
	width:100%;
	margin:0 auto;
	padding-bottom:50px;
	font-size:76%;
}

#wrapper {
   width: 85%;
   margin: 6rem auto 0; 

}


@media screen and (max-width: 460px) {
	/* 479pxˆÈ‰º—piƒXƒ}[ƒgƒtƒHƒ“—pj‚Ì‹Lq */
#wrapper {
   margin: 8rem auto 0; 
}
}


#read {
   height: 50px;
   margin: 120px 0px 45px 0px; 
}
#main {
   text-align:center;
}
#a {   
   text-align:center;
}
#or {

   text-align:center;
}

#or span {
    font-size:150%;
    font-weight:bold;
    line-height: 50px;
}

#b {
   text-align:center;
}

.go {
   text-align:center;
   padding:3rem 0 0;
}
#exp {
   text-align:center;
}
#exp p{
   font-weight:bold;
   font-size:120%;
}


@media screen and (min-width: 740px) {
	/* 740pxˆÈã—piPC—pj‚Ì‹Lq */

#wrapper {
   width: 700px;
}
#read {
   width: 700px;
   height: 50px;
   margin: 10px 0px 45px 0px;  
}
#main {
   width: 700px;     /* —¼’[ƒuƒƒbƒN‚ƃRƒ“ƒeƒ“ƒc‚ðˆÍ‚ñ‚Å‚¢‚éƒZƒŒƒNƒ^‚Å‚·B*/
}
#a {
   float: left;
   width: 300px;     /* float‚ɁAwidth Žw’è‚Í•K{‚Å‚·B*/
   text-align:center;
}
#or {
   float: left;
   width: 100px;

   text-align:center;
}

#or span {
    font-size:150%;
    font-weight:bold;
    line-height: 110px;
}


#b {
   float: left;
   width: 300px;
   text-align:center;
}

.go {
   clear: both;      /* float ‚ðƒNƒŠƒA‚µ‚Ä‚¢‚Ü‚·B*/
   width: 700px;
   text-align:center;
   padding:2rem 0 0;
}
#exp {
   clear: both;      /* float ‚ðƒNƒŠƒA‚µ‚Ä‚¢‚Ü‚·B*/
   width: 700px;
   text-align:center;
}
#exp p{
   font-weight:bold;
   font-size:120%;
}

}




input.submit {
width:300px;
    height: 24px;  
    background: #F5F5F5;  
    border: 3px solid #191919; 
    padding: 4px;  
    color: #999; 
    font-size:120%;
}
/*
textarea {
    width:286px;
    height: 100px; 
    background: #F5F5F5;  
    border: 3px solid #191919; 
    padding: 4px;  
    color: #999; 
    font-size:120%;
}
*/
#main textarea{
    width:286px;
    height: 100px; 
    border:3px solid #191919;
    padding: 4px;
    color: #333;
    background: #fff;
    font-size:120%;
 
/* Webkit */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#eee),
        to(#fff)
        );
 
/* Firefox */
    background: -moz-linear-gradient(
        top,
        #eee,
        #fff
        );
 
/* IE */
    filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ffeeeeee,endColorstr=#ffffffff);
    zoom: 1;
}



.go .submit{
    width:270px;
    height:50px; 
    font-weight:bold;
    border:1px solid #777;
    padding: 4px 10px;
    color: #fff;
    cursor: pointer;
    background: #428ec9;
    border-radius: 5px;
        font-size:140%;

 
/* Webkit */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#99c9e5),
        to(#428ec9)
        );
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 1px 1px 1px #fff;
 
/* Firefox */
    background: -moz-linear-gradient(
        top,
        #99c9e5,
        #428ec9
        );
    -moz-border-radius: 5px;
    -moz-box-shadow: 1px 1px 1px #fff;
 
/* IE */
    filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ff99c9e5,endColorstr=#ff428ec9);
    zoom: 1;
}

.go .submit2{
    width:270px;
    height:50px; 
    font-weight:bold;
    border:1px solid #777;
    padding: 4px 10px;
    color: #fff;
    cursor: pointer;
    background: #00bcd0;
    border-radius: 5px;
    font-size:140%;
    
    /* Webkit */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#75f7ed),
        to(#00bcd0)
        );
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 1px 1px 1px #fff;
 
/* Firefox */
    background: -moz-linear-gradient(
        top,
        #ffc7a1,
        #ff751a
        );
    -moz-border-radius: 5px;
    -moz-box-shadow: 1px 1px 1px #fff;
 
/* IE */
    filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ffc7a1,endColorstr=#ff751a);
    zoom: 1;

   }
   
   
   .go .submit3{
    width:270px;
    height:50px; 
    font-weight:bold;
    border:1px solid #777;
    padding: 4px 10px;
    color: #fff;
    cursor: pointer;
    background: #b5b5b5;
    border-radius: 5px;
    font-size:140%;
    
    /* Webkit */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#dcdcdc),
        to(#b5b5b5)
        );
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 1px 1px 1px #fff;
 
/* Firefox */
    background: -moz-linear-gradient(
        top,
        #dcdcdc,
        #b5b5b5
        );
    -moz-border-radius: 5px;
    -moz-box-shadow: 1px 1px 1px #fff;
 
/* IE */
    filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#dcdcdc,endColorstr=#d5d5d5);
    zoom: 1;

   }
   
   
   
   
   


/* ƒAƒ“ƒT[‰æ–Ê
--------------------------------------------- */


#exp2 {
   clear: both;      /* float ‚ðƒNƒŠƒA‚µ‚Ä‚¢‚Ü‚·B*/
   width: 700px;
   margin:50px 0 0 0;
}

#exp2 .hint{
   font-size:120%;
      text-align: left;
}
#exp2 div.mes{
   text-align:right;
   margin-bottom:40px;
}
.exp{
   font-weight:bold;
   margin:80px 0 0 0;
}

#exp2 .fb{
   text-align:center;
}
#answer {
    border:1px solid #777;
   text-align:center;
}


/* ƒAƒvƒŠ
--------------------------------------------- */
.iphoneapp{
width:80%;
margin:5rem auto 0;
border:1px solid #666666;
padding:1rem;
text-align: center;
background-color: #ededed;
}

.iphoneapp .appicon{

display: inline-block;
position: relative;
width: 25%;
top: -1rem;
left: -1rem;
}

@media screen and (max-width: 460px) {
.iphoneapp .appicon{
vertical-align: top;
}
	/* 479pxˆÈ‰º—piƒXƒ}[ƒgƒtƒHƒ“—pj‚Ì‹Lq */
.iphoneapp .appicon img{
width:70px;
}
}

.iphoneapp .appinfo{
text-align:left;
display:inline-block;
width:70%;
}
.iphoneapp .appinfo .appbtn{
text-align:center;
}

/* ダウンロードボタン
--------------------------------------------- */
* {
    box-sizing: border-box;
    outline: none;
    vertical-align: top;
}

.section-apps {

}


.app-store {
    background-image: url("/img/App_Store.png");
}



.gplay-button {
    background-image: url("/img/google-play-badge.png");
}

@media (max-width: 600px)
.app-store, .gplay-button {
    margin: 10px 0;
}

@media (max-width: 600px)
.app-store {
    margin-right: 0;
}

.app-store, .gplay-button {
    background-repeat: no-repeat;
    background-size: 166px;
    display: inline-block;
    height: 60px;
    transition: transform 500ms;
    transform: scaleX(1) scaleY(1) scaleZ(1);
    width: 166px;
}
.app-store {
    background-position: 50% 50%;
    margin-right: 25px;
}
.gplay-button {
    background-position: 51% 50%;
}

/* もういちど
--------------------------------------------- */
.onemore{
	background-color: #5e5e5e;
	margin: 70px 0 0;
	padding: 0 97px;
    text-align: right;
}
.onemore img{
  width:58%;
}

/* レコメンド
--------------------------------------------- */

.rec {
    display: flex;
    flex-wrap: wrap;
}

.rec .itemlist {
    margin: 5px;
    padding: 10px;
    border: 2px dotted #cecece;
    width: calc(50% - 10px);
}

.rec_text {
    margin: 70px auto 10px;
    font-size: 120%;
    font-weight: bold;
    color: #747474;
}







/* footer
--------------------------------------------- */
#footer {
background-color:#cfcfcf;
width:100%
	color:#191919;
	text-align:center;
	line-height : 1.4;
	font-size:10px;
margin-top:6rem;
padding:1rem 1rem 7rem 1rem;
}


/* clearfix
--------------------------------------------- */
#sort:after,
#sort ul:after,
#oil_list td.pic .add_icon:after,
#detail .detail_inner:after,
#detail .add_icon:after,
.submit ul:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

#sort,
#sort ul,
#oil_list td.pic .add_icon,
#detail .detail_inner,
#detail .add_icon,
.submit ul{ zoom:1; }