/*
    Document   : style
    Created on : 2013/11/19, 15:54:47
    Author     : mshimoji
    Description:
    Purpose of the stylesheet follows.
*/

@charset "utf-8";
@import url("reset.css");

root { display: block; }

body {
    width: 100%;
    color: #242424;
    font-size: 16px;
    font-family: "ＭＳ Ｐゴシック", Arial, sans-serif;
    background: #333;
}

.cf:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility:hidden;
}

#wrapper {
    width: 880px;
    margin: 0 auto;
    border-left: solid 2px #424242;
    border-right: solid 2px #424242;
    -webkit-box-shadow: 0px 0px 24px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 24px rgba(0,0,0,1);
    -o-box-shadow: 0px 0px 24px rgba(0,0,0,1);
    -ms-box-shadow: 0px 0px 24px rgba(0,0,0,1);
    box-shadow: 0px 0px 24px rgba(0,0,0,1);
}

h1 {
    border-bottom: solid 1px #468038;
    position: relative;
    background: #387c00; /* Old browsers */
    background: -moz-linear-gradient(top,  #387c00 0%, #1c5e00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#387c00), color-stop(100%,#1c5e00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #387c00 0%,#1c5e00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #387c00 0%,#1c5e00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #387c00 0%,#1c5e00 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #387c00 0%,#1c5e00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#387c00', endColorstr='#1c5e00',GradientType=0 ); /* IE6-9 */
}

h1 span {
    color: #A2F266;
    display: block;
    width: 884px;
    padding: 8px 0 8px 10px;
    margin: 0 auto;
    font-size: 12px;
    font-weight: normal;
}

header {
    border-top: solid 4px #000;
    border-bottom: solid 4px #000;
    background: url("../images/prolist/bg_chip_header.png") 0 0 repeat;
}

header a {
    float: left;
    width: 104px;
    height: 80px;
    margin: 4px 12px 4px;
    background: url("../images/common/jannavi_logo.png") 0 0 no-repeat;
    background-size: 100% auto;
}

header p {
    float: right;
    width: 512px;
    padding: 8px 8px 8px 0;
    color: #EEEEEE;
    font-size: 14px;
    font-style: italic;
    text-align: right;
    line-height: 18px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5), -1px 1px 1px rgba(0,0,0,0.5), 1px -1px 1px rgba(0,0,0,0.5), -1px -1px 1px rgba(0,0,0,0.5);
    background: url("../images/prolist/bg_header.png") 100% center no-repeat;
}

#breadcrumb {
    color: #E8BA2A;
    font-size: 12px;
    border-top: solid 4px #000;
    padding: 6px 0 6px 8px;
    background: url("../images/prolist/bg_chip_header.png") 0 0 repeat;
}

#breadcrumb a {
    color: #E8BA2A;
}

#breadcrumb a:hover {
    text-decoration: underline;
}

#breadcrumb span {
    color: #D4D4D4;
}

header a,
#app-dl ul li a,
#contents h2,
section h3,
ul li a div {
    display: block;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
}

footer {
    color: #7A7A7A;
    font-size: 0.75em;
    text-align: center;
    padding: 6px 0 8px;
    border-top: solid 1px #CCC;
    background: #F8F8F8;
}


/*-----------------------------------------------------------------------
    メインヴィジュアル #main-visual
------------------------------------------------------------------------*/
#main-visual {
    width: 940px;
    height: 320px;
    margin-left: -30px;
    background: url("../images/prolist/mainvisual.png") 0 0 no-repeat;
    position: relative;
}

/* アプリダウンロード */
#main-visual #app-dl {
    position: absolute;
    bottom: 6px;
    right: 38px;
}

#app-dl img {
    display: block;
    margin: 0 0 2px 2px;
}

#app-dl ul li {
    float: left;
    width: 128px;
    height: 48px;
}

#app-dl ul li a {
    display: block;
    height: 100%;
    background: url("../images/prolist/download.png") 0 0 no-repeat;
}

#app-dl ul li a:hover {
    display: block;
    height: 100%;
    background: url("../images/prolist/download.png") 0 -48px no-repeat;
}

#app-dl #gp a {
    background: url("../images/prolist/download.png") -128px 0 no-repeat;
}

#app-dl #gp a:hover {
    background: url("../images/prolist/download.png") -128px -48px no-repeat;
}

a#membership {
    display: block;
    width: 268px;
    height: 65px;
    background: url("../images/prolist/membership.png") 0px -65px no-repeat;
    position: absolute;
    bottom: 12px;
    left: 14px;

}

a#membership:hover {
    background: url("../images/prolist/membership.png") 0px 0px no-repeat;
}

/*-----------------------------------------------------------------------
    #contents
------------------------------------------------------------------------*/
#contents {
    background: url("../images/prolist/bg_chip.png") 0 0 repeat;
}

#contents h2 {
    width: 100%;
    height: 51px;
    padding-left: 8px;
    margin-left: -4px;
    background: url("../images/prolist/h2_title.png") 0 0 no-repeat;
}

section {
    width: 840px;
    margin: 0 auto;
}

section + section {
    margin-top: 32px;
}

section h3 {
  width: 840px;
  height: 32px;
  background-image: url("../images/prolist/h3_heading.png");
  background-repeat: no-repeat;
  display: block;
}
.g-saikoui h3 {background-position: -5px -5px;}
.g-nihon h3 {background-position: -5px -47px;}
.g-rmu h3 {background-position: -5px -89px;}
.g-game101 h3 {background-position: -5px -131px;}
.g-mah-sho h3 {background-position: -5px -173px;}
.g-free h3 {background-position: -5px -215px;}
.g-other h3 {background-position: -5px -257px;}
.g-ww h3 {background-position: -5px -299px;}

section ul {
    width: 840px;
    padding: 16px;
    padding-bottom: 0;
    margin-top: 2px;
    border: solid 2px #8d1700;
    background: #FFF;
    box-sizing: border-box;
}

section ul li {
    float: left;
    margin-left: 16px;
    margin-bottom: 16px;
}

section ul li:nth-child(5n+1) {
    margin-left: 0;
}

section ul li a {
    display: block;
    border-top: solid 2px #5F5F5F;
    border-right: solid 2px #383838;
    border-bottom: solid 2px #282828;
    border-left: solid 2px #454545;
}

section ul li a img {
    display: block;
    width: 144px;
    height: auto;
    border-bottom: solid 1px #626262;
}

section ul li a:hover img {
    opacity: 0.75;
    filter: alpha(opacity=75);
    -ms-filter: "alpha(opacity=75)";
    border-bottom: solid 1px #333;
}
section ul li a:hover p {
    color: #14E42D;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.52, #343434), color-stop(0.48, #3A3A3A));
    background: -webkit-linear-gradient(top, #3A3A3A 48%, #343434 52%);
    background: -moz-linear-gradient(top, #3A3A3A 48%, #343434 52%);
    background: -o-linear-gradient(top, #3A3A3A 48%, #343434 52%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3A3A3A', endColorstr='#343434',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(to bottom, #3A3A3A 48%, #343434 52%);
}

section ul li a p {
    color: #FFF;
    font-size: 0.875em;
    text-align: center;
    display: block;
    padding: 5px 0;
    border-top: solid 1px #424242;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.52, #1F1F1F), color-stop(0.48, #333));
    background: -webkit-linear-gradient(top, #333 48%, #1F1F1F 52%);
    background: -moz-linear-gradient(top, #333 48%, #1F1F1F 52%);
    background: -o-linear-gradient(top, #333 48%, #1F1F1F 52%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#1F1F1F',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(to bottom, #333 48%, #1F1F1F 52%);
}

p.leadword {
    text-align: center;
    line-height: 1.5;
    padding: 24px 0;
    color: #484848;
    font-style: italic;
    font-weight: bold;
}

/* サイトマップ #site-map */
#site-map {
    font-size: 14px;
    padding: 24px 40px 16px;
    background: url("../images/prolist/bg_chip_header.png") 0 0 repeat;
}

#site-map a {
    color: #A4A4A4;
}

#site-map a:hover {
    color: #FFF;
    text-decoration: underline;
}

#site-map > div + div {
    margin-top: 16px;
}

#site-map dl dt {
    margin-bottom: 8px;
}

#site-map h3 {
    color: #E8E8E8;
}

#site-map dl dd {
    line-height: 1.5em;
}

/* 一段目 */
#site-map .first dl {
    float: left;
    width: 182px;
}

.first dl + dl {
    margin-left: 24px;
}

/* 二段目 */
#site-map .second {
    clear: both;
    margin-top: 24px;
}

.second dl dd {
    float: left;
    width: 182px;
}

.second dl dd + dd {
    margin-left: 24px;
}