﻿/* reset
---------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, li,
time, mark, audio, video{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article, aside, dialog, figure, footer, header,
hgroup, nav, li{
display:block;
}
ul{
list-style:none;
}
blockquote, q{
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after{
content:'';
content:none;
}
a{
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
text-decoration:none;
}
ins{
color:#000;
text-decoration:none;
}
mark{
color:#000;
font-style:italic;
font-weight:bold;
}
del{
text-decoration:line-through;
}
abbr[title], dfn[title]{
border-bottom:1px dotted #000;
cursor:help;
}
table{
border-collapse:collapse;
border-spacing:0;
}
hr{
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select{
vertical-align:middle;
}
/* 
---------------------------------------------------- */
body{
font-family:"HraKakuProN-W6", "HelveticaNeue";
line-height:1;
-webkit-text-size-adjust:none;
}
#suntory_contents{
width:100%;
background-color:#ffffff;
color:#223333;
padding-bottom:10px;
}

/* header
---------------------------------------------------- */
header{
background:-webkit-gradient(linear, center top, center bottom, from(#5bc2dc), to(#4bb9d4));
}
header:after{
display:block;
margin-top:-1px;
height:1px;
content:"";
clear:both;
}
header p.logo a{
float:left;
background:url(/common/img/hd_logo_w.png) no-repeat 0 0;
-webkit-background-size:96px 14px;
text-indent:-9999px;
width:96px;
height:14px;
margin:13px 0 0 15px;
}
header p.toPc a{
display:block;
float:right;
width:78px;
height:27px;
border:1px solid #a4adb1;
-webkit-border-radius:6px;
background:url(/common/img/hd_ico_pc.png) no-repeat 6px center,-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e0e6ea));
-webkit-background-size:16px 15px,auto;
font-size:10px;
line-height:1;
font-weight:bold;
color:#4b5b6b;
margin:8px 10px 0 0;
}
header p.toPc span{
display:block;
margin:8px 0 0 27px;
}
#title2nd{
background:-webkit-gradient(linear, center top, center bottom, from(#4bb9d4), to(#36acca));
padding:13px 10px 16px 15px;
}
#title2nd h1{
color:#ffffff;
font-size:23px;
line-height:1;
font-weight:normal;
margin:0 0 8px 0;
}
#title2nd p{
color:#ffffff;
font-size:13px;
line-height:1;
}



/* 
---------------------------------------------------- */
body{
font-family:"HraKakuProN-W6", "HelveticaNeue";
line-height:1;
-webkit-text-size-adjust:none;
}
#suntory_contents{
width:100%;
background-color:#ffffff;
color:#223333;
}
#wrap{
padding:15px 10px 0 10px;
}

h1{
color:#48b5d0;
font-size:23px;
font-weight:normal;
margin-bottom:10px;
}
p{
color:#666666;
font-size:12px;
line-height:1.5;
}


/* Apps
---------------------------------------------------- */
#apps{
width:100%;
border:1px solid #b5d7d7;
-webkit-border-radius:6px;
background:#dbf3f3;
margin:12px 0 15px 0;
z-index:1;
}
#apps h2{
font-size:15px;
color:#48b5d0;
margin:14px 0 10px 12px;
}
#apps ul:after{
display:block;
margin-top:-1px;
height:1px;
content:"";
clear:both;
}
#apps ul{
}
#apps ul.apps01{
background:url(../img/app_line.png) repeat-x bottom;
padding-bottom:9px;
}
#apps li{
text-align:center;
float:left;
width:25%;
z-index:5;
}
#apps li a{
display:block;
width:59px;
height:62px;
margin:0 auto;
position:relative;
}
#apps li em{
display:block;
text-align:center;
color:#445566;
font-family:"HelveticaNeue";
font-size:10px;
line-height:1.3;
font-weight:bold;
font-style:normal;
min-height:3em;
}
#apps p{
color:#ff0000;
font-size:11px;
margin:12px 0 8px 12px;
}
#apps p img{
vertical-align:middle;
margin-right:8px;
}
#apps li span img.new{
position:absolute;
top:0;
left:0;
display:inline-block;
z-index:100;
margin:-4px 0 0 30px;
}




/* appDl
---------------------------------------------------- */
#appDl{
margin:-5px 0 15px 0;
}
#appDl .section{
width:100%;
border:1px solid #b5d7d7;
-webkit-border-radius:6px;
background:#dbf3f3;
position:relative;
}
#appDl .section:after{
display:block;
margin-top:-1px;
height:1px;
content:"";
clear:both;
}
#appDl .section span.icon{
display:table-cell;
width:80px;
vertical-align:middle;
}
#appDl .section span.icon img{
margin:15px 0 0 14px;
}
#appDl .section .appTl{
display:table-cell;
width:200px;
vertical-align:middle;
margin:15px 0 0 10px;
}

#appDl .section h3{
font-size:16px;
line-height:1.3;
font-weight:bold;
color:#444444;
margin:8px 0 2px 0;
}
#appDl .section h3 span{
font-size:12px;
letter-spacing:1px;
}
#appDl .section span.free{
display:inline-block;
font-size:11px;
color:#3d98a7;
letter-spacing:5px;
background:#ffffff;
-webkit-border-radius:6px;
padding:3px 5px 3px 10px;
}
#appDl .section p.notice{
font-size:11px;
color:#ff0000;
background:url(../img/liquor.png) no-repeat left center;
-webkit-background-size:33px 32px;
padding:10px 0 11px 40px;
margin:18px 0 11px 14px;
}
#appDl .section p.txt{
font-size:14px;
line-height:1.7;
color:#444444;
margin:18px 14px 23px 14px;
}
#appDl .section p.dl{
text-align:center;
margin-bottom:45px;
}
#appDl .section p.dl a{
display:inline-table;
color:#ffffff;
font-size:15px;
letter-spacing:-1px;
-webkit-border-radius:6px;
background:url(../img/ico_dl.png) no-repeat left center,-webkit-gradient(linear,left top,left bottom,
			from(#5eebf8),
			color-stop(0.01,#5eebf8),
			color-stop(0.49,#0ba0b0),
			color-stop(0.50,#2b8b9c),
			color-stop(0.99,#2b8b9c),
			to(#20a5bd));
-webkit-box-shadow:1px 1px 4px rgba(0,0,0,0.6);
text-shadow:-1px -1px 1px rgba(0,0,0,0.5); 
padding:15px 15px 15px 40px;
margin:0 auto;
}
#appDl .section p.close{
float:right;
}
#appDl .section p.close a{
display:block;
width:27px;
height:27px;
background-image:url(../img/btn_close.png);
background-repeat:no-repeat;
background-position:center center;
background-color:#ffffff;
border-bottom:1px solid #b5d7d7;
border-left:1px solid #b5d7d7;
-webkit-border-top-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-background-size:14px 14px;
text-indent:-9999px;
}
#appDl .section div.close{
border-top:1px solid #b5d7d7;
}
#appDl .section div.close a{
display:block;
text-align:right;
font-size:13px;
font-weight:bold;
color:#445566;
background-color:#ffffff;
-webkit-border-bottom-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-background-size:14px 14px;
padding:10px 0 10px 10px;
}
#appDl .section div.close a span{
background-image:url(../img/arrow_close.png);
-webkit-background-size:22px 6px;
background-repeat:no-repeat;
background-position:right center;
padding-right:28px;
}


