body{ font-size: 12px;}

a         { color:#33A3B7; }
a:link    { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover   { text-decoration: underline; }
a:active  { text-decoration: underline; }

@charset "utf-8";

/*----------------------------------------------------
	基本設定、リンクカラーなど
----------------------------------------------------*/
html,body {}

body {
	color:#2d2d2d;
	font-size: 12px;
	background-color:#fff;
}

h1{ font-weight: normal;}

img{ vertical-align: bottom;}

/* clearfix */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


.btn{ text-align: center; margin: 0.5em 0;}
.btn p{ text-align: center; display: inline-block;}
.btn a {
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 -1px 1px #fff;
	width: 250px;
	border: solid 1px gray;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#cbcbcb));
	background: -moz-linear-gradient(#ededed, #cbcbcb);
	background: linear-gradient(#ededed, #cbcbcb);
	padding: 0.5em;
	-webkit-box-shadow: rgba(0,0,0,0.4) 0 1px 3px;
	box-shadow: rgba(0,0,0,0.4) 0 1px 3px;
	display: block;
}

footer { background-color:#ffffff;}

#copyright {
	text-align:center;
	background:#434343;
	padding:10px;
	color:#fff;
}

/*----------------------------------------------------
	#content
----------------------------------------------------*/
#container {
	overflow: hidden;
}


header {
	text-align: center;
	width: 980px;
	margin: 0 auto;
	padding: 2em 3em;
}
#tvasahiLogo{
	width:170px;
	height:40px;
	display: inline-block;
}
#tvasahiLogo a {
	display:block;
	width:170px;
	height:40px;
}

.tvasahi_name{ font-size: 35px; vertical-align: top; display: inline-block; margin-left: 1em;}

.rakuten{
	background-image: url(../img/bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	border-top:1px solid #00b0f0;
}
.rakuten_field,
.pickup_field{
	width: 980px;
	margin: 1em auto 0;
}


.sp_url{ text-align: center; margin-bottom: 3em;}

.rakuten_main{ margin: 2em 0; display: table;}
.rakuten_main > div{ vertical-align: middle; display: table-cell;}

.sphone_img{ width: 32.5%;}
.sphone_img img{ width: 100%;}

.rakuten_qr{ width: 35%;}
.rakuten_qr img{ display: block; margin: 0 auto;}
.qr_badge{ width: 50%;}
.qr_img{ text-align: center;}
.qr_img img{ width: 180px; height: 180px; border: solid 10px gray;}
.qr_info{ font-size: 11px; text-align: left; margin: 1em auto 0;}

.point{ width: 32.5%; background-color: rgba(255, 255, 255, 0.6); padding: 0.5em;}
.point_field{ margin-bottom: 1em; display: table;}
.point_field:last-child{ margin-bottom: 0;}
.point_field > div{vertical-align: middle; display: table-cell;}

.point_img{ width: 80px;}
.point_desciption{ width: 100%; padding-left: 0.5em;}
.point_desciption img{ width: 85px; margin-bottom: 2px;}



.pickup_contents{
	text-align: center;
	background-color: #94cced;
	background-image: -webkit-gradient( linear, left top, left bottom, from(#4FB4EE), color-stop(0.3, #94cced), color-stop(0.7, #94cced), to(#fff));
	background-image: -moz-linear-gradient( #4FB4EE, #94cced, #94cced, #fff);
	background-image: -ms-linear-gradient( #4FB4EE, #94cced, #94cced, #fff);
	background-image: linear-gradient( #4FB4EE, #94cced, #94cced, #fff);
	border-top: solid 1px #0083cf;
	padding-bottom: 3em;
}
.pickup_contents h2{ width: 980px; margin: -1px auto 0;}
.pickup_contents h2 span{
	font-size: 25px;
	font-weight: normal;
	background-color: #fff;
	position: relative;
}

.pickup_contents h2 span:before,
.pickup_contents h2 span:after{
	content: "";
	width: 0;
	height: 0;
	border: solid 19px transparent;
	border-top: 19px solid #fff;
	margin-top: -1px;
	position: absolute;
}

.pickup_contents h2 span:before{ border-right: 19px solid #fff; left: -38px;}
.pickup_contents h2 span:after{ border-left: 19px solid #fff; right: -38px;}

.contents_pickup_list{ text-align: left;}
.contents_pickup_list li{
	text-align: center;
	width: 33.3%;
	margin-top: 2em;
	float: left;
}
.contents_pickup_list a{
	width: 270px;
	height: 118px;
	line-height: 118px;
	background-color: #fff;
	border: solid 5px #fff;
	margin: 0 auto;
	display: block;
}
.contents_img_list{ width: 270px; vertical-align: middle;}



.contents_container{ width: 550px; display: block;}
.contents_field{
	background-color: #fff;
	padding: 1em;
	position: relative;
}

.contents_title{
	font-size: 114%;
	text-align: left;
	border-left: solid 5px gray;
	border-bottom: solid 1px gray;
	margin-bottom: 0.25em;
	padding: 0.5em;
}

.contents_detail{ text-align: center; display: table;}
.contents_detail > div{
	padding: 1em 1em 0;
	display: table-cell;
	vertical-align: top;
}

.contents_device{ width: 45%;}
.contents_device img{ width: 100%; margin-bottom: 1em;}

.device_model{ width: 180px; margin: 0 auto;}
.device_model p:first-child{ text-align: left;}
.device_android,
.device_iphone{
	color: #fff;
	font-weight: bold;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
	margin: 0 auto;
	padding: 0.5em 1em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px;
	box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px;
}
.device_android{
	text-shadow: 0 1px 0px rgba(0, 0, 0, 0.4);
	background-color: #24d1cb;
	background-image: -webkit-gradient( linear, left top, left bottom, from(#3af1ef), to(#0eb0a5));
	background-image: -moz-linear-gradient( #3af1ef, #0eb0a5);
	background-image: -ms-linear-gradient( #3af1ef, #0eb0a5);
	background-image: linear-gradient( #3af1ef, #0eb0a5);
	border: solid 1px #0eb0a5;
	margin-bottom: 0.5em;
}
.device_iphone{
	text-shadow: 0 1px 0px rgba(0, 0, 0, 0.6);
	background-color: #23a4de;
	background-image: -webkit-gradient( linear, left top, left bottom, from(#28b6e4), to(#1a8cd5));
	background-image: -moz-linear-gradient( #28b6e4, #1a8cd5);
	background-image: -ms-linear-gradient( #28b6e4, #1a8cd5);
	background-image: linear-gradient( #28b6e4, #1a8cd5);
	border: solid 1px #1a8cd5;
}

.contents_qr{ width: 55%;}
.contents_qr p{ font-size: 83%; text-align: left;}
.contents_qr img{ width: 120px; height: 120px; border: solid 10px gray; margin-bottom: 1em;}