@charset "utf-8";

html{/*margin: 0; padding: 0; height: 100%;*/}

body{background: #d7d7d7 url(../img/bg1.png) repeat-x 0 0; margin: 0 0 20px 0; padding: 0; color: #777;
	font-family:Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size:14px; height:100%;  -webkit-text-size-adjust: 100%;}

img{border: none;}

a{color:#04c;}
a:hover{color:#f60;}

.clearfix:after{
	content: ""; 
	display: block; 
	clear: both;
	}

.wrapper{width: 750px; margin: 0 auto; /*border: 1px #d00 solid;*/}

.header{text-align: right; margin: 10px 0 0 0;}

/*.cLogo{float: right;}*/

.grid{margin: 2px auto 0 auto;}

.column{float: left;}

.imgArea{width: 286px; margin: 0 0 0 20px; }

.catchArea{width: 400px; padding: 0; float: right; margin: 0 10px 0 0; position: relative;}

.infoArea{text-align: center;}

/*************************************/

h1{margin: 10px 0 0 0; padding: 0;}

.catchArea .read{padding: 0 0 0 0; text-align:center;}

.infoArea img{margin: 20px 0 0 0;}
.infoArea #snappleIcon{margin: 0 10px 0 0;}

#capt01{margin: 55px 0 0 120px;}

#dpf{padding: 5px 0 0 0; margin: 5px 0 0 0;}

#ioc{margin: 4px 0 0 0;}
#rom{margin: 8px 0 0 0;}

p.dpfree{margin: 10px 0 10px 0;}
p.cc{margin: 0;}

.smail{padding:12px 0 ; font-size:12px; margin: 15px 0 0 0;}

/*******************************/

.snsBtn{margin: 15px auto 0 auto; width: 90%; height:40px; position: relative; }

.tw{position: absolute; top:10px; left:7px;}
.fb{position: absolute; top:10px; left:115px;}


/**********************************/


@media screen and (max-width: 640px) {
.wrapper{width: 100%;}
.column{float: none;}
.cLogo{width:18%; height: auto; padding: 0 5px 0 0;max-width: 101px;}
.imgArea{width: 100%; margin: 0 0 0 0; text-align: center;}
.imgArea .photo{width: 75%; height: auto; max-width: 286px;}
.catchArea{width: 100%; padding: 0;text-align: center;}
.catchArea .mLogo{width: 88%; height: auto; margin: 0 0 10px 0; padding: 0;max-width: 391px;}
#capt01{margin: 10px 0 0 0; width:35%; height: auto;max-width: 138px;}
.catchArea .read{padding: 0 0 0 0; margin: 10px 0 ;}
h1{margin: 2px 0 0 0;}
.infoArea{width:100%;}
.infoArea #snappleIcon{width: 19%; height: auto; max-width: 73px;}
.infoArea #btnAppstore{width: 63%; height: auto; max-width: 243px;}
.infoArea p{margin: 0;}
#dpf{height: auto; margin: 0; padding:22px 0 0 0;}
#ioc{max-width: 228px; margin: 24px 0 0 0;}
#rom{margin: 8px 0 18px 0;}
.snsBtn{width: 80%;}
.tw{position: absolute; top:10px; left:0px;}
}