@charset "utf-8";

/* reset **************************************/
ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,input,select,textarea{
margin:0;
padding:0;
*zoom:1;
}
body,td,th,h1{
font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
font-size:62.5%;
line-height:1.6;
}
@media (min-width: 641px){
	body,td,th,h1{
	font-family:'游ゴシック', 'YuGothic', 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	font-size:62.5%;
	}
}
body{
background:url("../images/bg.png") repeat #da2659 center top;
color:#fff;
}
a,
a:visited,
a:active{
color:#fff;
text-decoration:none;
}
a:hover{
color:#fff;
text-decoration:underline;
}
li{
list-style:none;
}
img{
vertical-align:bottom;
}
input[type="radio"]{
margin:0 1.5em 0 .5em;
}

placeholder{color:#afa594;}
::-webkit-input-placeholder{color:#afa594;}
input:-moz-placeholder, textarea:-moz-placeholder{color:#afa594;}

/* common parts **************************************/
video,embed,object{
max-width: 100%;
height: auto;
}
.switch {
visibility: hidden;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


input[type="text"]{
border-radius:5px;
border:none;
}

a:hover img {
filter:alpha(opacity=60);
opacity: 0.8;
}


#wrapper{
width:100%;
background:url("../images/bg_wrapper.png") no-repeat top center;
background-size:135% auto;
position:relative;
}

@media (min-width:641px) and (max-width: 950px){
	#wrapper{
	background-size:890px auto;
	}
}

@media (min-width:950px){
	#wrapper{
	background-size:1289px auto;
	}
}
.contents{
max-width:1000px;
position:relative;
margin:0 auto;
}
.youtube{
display:none;
}
h1.logo{
width:100%;
padding:0;
text-align:center;
padding-top:40%;
}
h1.logo img{
max-width:100%;
height:auto;
}
@media (min-width:641px) and (max-width: 950px){
	h1.logo{
	padding-top:260px;
	}
}
@media (min-width:950px){
	h1.logo{
	padding-top:370px;
	}
	h1.logo img{
	width:883px;
	height:auto;
	}
}
.btn-product{
width:40%;
position:absolute;
top:15%;
left:5px;
}
.btn-product img{
max-width:110%;
height:auto;
}
@media (min-width:641px){
	.btn-product{
	top:60px;
	}
	.btn-product img{
	max-width:100%;
	height:auto;
	}
}
/* header **************************************/
header{
width:100%;
}
header .social{
position:absolute;
right:0px;
top:20px;
text-align:right;
}
header .social li{
/*float:left;*/
display:inline-block;
/display:inline;
/zoom:1;
width:110px;
}
header .social li .twitter-share-button{
width:110px !important;
}
header .social li .fb-like{
float:right;
/*position:absolute;*/
top:0px;
left:0px;
}
@media (min-width: 641px){/*PC版*/
	header{
	width:900px;
	margin:0 auto;
	}
	header .social{
	top:10px;
	}
}

/* main **************************************/
.main{
width:100%;
margin:0 auto;
padding0;
}
@media (min-width: 641px){
	.main{
	max-width:1000px;
	margin:0 auto;
	}
}

/* video **************************************/
.video{
width:96%;
padding:5% 2% 0 2%;
}
.videoleft{
width:53%;
float:left;
height:100%;
margin:0;
padding:0;
position:relative;
}
.videoleft .videotl1 img{
max-width:80%;
height:auto;
}
.videoleft .videotl1{
width:100%;
position:absolute;
left:5px;
bottom:-38%;
}
.videoright{
width:42%;
float:right;
height:100%;
margin:6% 0 0 0;
padding:0;
position:relative;
}
.videoright .videotl2 img{
max-width:100%;
height:auto;
}
.videoright .videotl2{
width:80%;
position:absolute;
right:0;
top:-45%;
}
@media (min-width:641px) and (max-width: 950px){
	.videoleft .videotl1{
	bottom:-35%;
	left:-20px;
	}
	.videoright .videotl2{
	top:-42%;
	}
}
@media (min-width: 950px){
	.videoleft .videotl1{
	bottom:-75px;
	left:-20px;
	}
	.videoleft .videotl1 img{
	max-width:287px;
	height:auto;
	}
	.videoright .videotl2{
	right:50px;
	top:-105px;
	}
	.videoright .videotl2 img{
	max-width:334px;
	height:auto;
	}
}
.video-wrapper {
width:100%;
height:auto;
}
.video-box {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
}
.video-box iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

/* topic **************************************/
.topic{
overflow:hidden;
text-align:center;
padding:0;
margin:20% 0 0 -40px;
}
.topic img{
max-width:113%;
height:auto;
}
.topicrei{
text-align:center;
padding:0 10px 0 0;
margin:-10px 0 0 -100px;
overflow:hidden;
}
.topicrei img{
max-width:120%;
height:auto;
}

@media (min-width: 641px){
	.topic{
	margin:100px 0 0 0px;
	}
	.topic img{
	max-width:100%;
	height:auto;
	}
	.topicrei{
	margin:-10px 0 0 0px;
	}
	.topicrei img{
	max-width:100%;
	height:auto;
	}
}

/* timeline **************************************/
.main h2{
padding-top:30px;
text-align:center;
margin-left:-50px;
}
.main h2 img{
max-width:100%;
height:auto;
}
.timelinebx{
width:100%;
margin:-5px auto 0 auto;
padding:20px 0;
background:#f98b4e;
}
.timelinebx .finimg{
text-align:center;
}

.timelinebx .finimg img{
max-width:80%;
height:auto;
}


#counter{
color:#000;
}
#counter dt{
padding-bottom:10px;
padding-left:5px;
font-size:1.2em;
}
.status-area{
max-height:150px;
overflow:scroll;
}
@media (min-width:641px) and (max-width: 950px){
	.main h2{
	margin-left:-330px;
	}
	.timelinebx{
	width:600px;
	padding:20px 20px;
	}
.timelinebx .finimg{
	text-align:center;
	padding-top:1%;
	}
}
@media (min-width: 950px){
	.main h2{
	margin-left:-500px;
	}
	.timelinebx{
	width:620px;
	margin:-16px auto 0 auto;
	padding:20px 100px 20px 100px;
	height:300px;
	background:url("../images/bg_twitter_pc.png") no-repeat left top;
	}
.timelinebx .finimg{
	text-align:center;
	padding-top:10%;
	}
}

/* prize **************************************/
.prize{
text-align:center;
padding:0;
margin:30px 0 0 0;
}
.prize img{
max-width:100%;
height:auto;
}
@media (min-width: 950px){
	.prize{
	margin-top:-80px;
	}
}

/* howto **************************************/
.main h3{
overflow:hidden;
padding-top:10px;
text-align:center;
margin-left:-60px;
margin-bottom:-20px;
position:relative;
z-index:10;
}
.main h3 img{
max-width:140%;
}
@media (min-width:641px) and (max-width: 950px){
	.main h3{
	margin-left:-150px;
	margin-bottom:-40px;
	}
	.main h3 img{
	max-width:100%;
	height:auto;
	}
}
@media (min-width: 950px){
	.main h3{
	padding-top:30px;
	margin-left:-400px;
	margin-bottom:-40px;
	}
}

.howto{
color:#000000;
z-index:5;
position:relative;
width:100%;
margin:0 auto 30px auto;
text-align:center;
padding:20px 0 20px 0;
background:#aadcf2;
font-size:1.5em;
font-weight:bold;
letter-spacing:1px;
}
.howto .step{
padding:5px 0;
}
.howto .btn-follow,
.howto .btn-tweet{
padding:5px 0;
}
.howto .btn-follow a,
.howto .btn-tweet a{
display:inline-block;
width:90%;
padding:10px 0 8px 0;
overflow:hidden;
background:#f946cb;
-webkit-border-radius: 10px;  
-moz-border-radius: 10px;
border-radius:10px;
color:#000000;
}
.howto .btn-follow a:hover,
.howto .btn-tweet a:hover{
text-decoration:none;
background:#d4f741;
}
.howto .stepfor{
text-align:left;
padding-top:15px;
padding-left:5%;
}
.howto .stepfor dt{
float:left;
padding-right:20px;
font-size:0.9em;
}
.howto .stepfor dd{
float:left;
font-size:0.8em;
}

@media (min-width:641px) and (max-width: 950px){
	.howto{
	width:640px;
	font-size:1.6em;
	}
	.howto .btn-follow a,
	.howto .btn-tweet a{
	width:60%;
	}
}
@media (min-width: 950px){
	.howto{
	width:830px;
	font-size:2.2em;
	padding:30px 0 20px 0;
	}
	.howto .btn-follow a,
	.howto .btn-tweet a{
	width:380px;
	}
	.howto .stepfor{
	padding-left:100px;
	font-size:0.8em;
	}
}

/* attention **************************************/
.attention{
color:#fff;
background:#5e4599;
margin: 0 auto 30px auto;
font-size:1.2em;
padding:20px;
}
.attention h4{
font-size:1.3em;
}
.attention ul,
.attention p{
margin:0 0 1em;
padding-top:1em;
}
.attention li{
padding-left:1em;
text-indent:-1em;
}
.attention ul{
	height: 200px;
	overflow: scroll;
	width: 100%;
	word-wrap: break-word
}
@media (min-width:641px) and (max-width: 950px){
	.attention{
	width:580px;
	padding:20px 30px;
	}
}
@media (min-width: 950px){
	.attention{
	width:770px;
	padding:20px 30px;
	font-size:1.3em;
	}
}

/* twitter **************************************/
.twitter{
text-align:center;
margin-bottom:10px;
}
.twitter li{
display:inline;
padding-right:20px;
}
@media (min-width: 641px){
	.twitter{
	width:100%;
	margin:0 auto 20px;
	}
}

/* pagetop **************************************/
.btn-pagetop {
position: static;
margin:20px 0;
z-index:20;
}
.btn-pagetop a,
.btn-pagetop-noscroll a{
display:block;
width:89px;
height:0;
margin:10px auto;
padding-top:72px;
background-image:url("../images/btn_pagetop.png");
background-repeat:no-repeat;
background-size:100% auto;
background-position:0 0;
overflow:hidden;
}
.btn-pagetop a:hover,
.btn-pagetop-noscroll a:hover{
background-position:0 -72px;
}
@media (min-width: 641px){
	.btn-pagetop,
	.btn-pagetop-noscroll{
	position:fixed;
	bottom:20px;
	right:20px;
	}
	.btn-pagetop a,
	.btn-pagetop-noscroll a{
	background-size:100% auto;
	}
}

/* footer **************************************/
footer{
clear:both;
color: #000000;
padding:12px 0 10px;
font-size: 1.1em;
font-weight: bold;
text-align:center;
}
@media (min-width: 641px){
	footer{
	width:100%;
	margin:0 auto;
	line-height: 35px;
	font-size:1.3em;
	}
}

iframe[name='google_conversion_frame'] { 
  height: 0 !important;
  width: 0 !important; 
  line-height: 0 !important; 
  font-size: 0 !important;
  margin-top: -13px;
  float: left;
}

.tweet-actions{
visibility:visible;
}