@charset "utf-8";

/* 要素のリセット */
h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form {
 margin: 0;
 padding: 0;
 border: none;
 font-style: normal;
 font-weight: normal;
 font-size: 100%;
 text-align: left;
 list-style-type: none;
}

/* 画像の下にできる隙間をなくす */
img { vertical-align: bottom; }

/* hr 要素は不可視で使う */
hr { display: none; }

/* table 要素の文字サイズ固定 */
table {
 font-size: inherit;
 font: 100%;
}

/* 文字サイズ class */
.text10 { font-size: 77%;}
.text11 { font-size: 85%;}
.text12 { font-size: 93%;}
.text13 { font-size: 100%;}
.text14 { font-size: 108%;}
.text15 { font-size: 116%;}
.text16 { font-size: 123.1%;}
.text17 { font-size: 131%;}
.text18 { font-size: 138.5%;}
.text19 { font-size: 146.5%;}
.text20 { font-size: 153.9%;}
.text21 { font-size: 161.6%;}
.text22 { font-size: 167%;}
.text23 { font-size: 174%;}
.text24 { font-size: 182%;}
.text25 { font-size: 189%;}
.text26 { font-size: 197%;}

/* clearfix */
.clearfix {
 zoom: 1;
}

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

/* 全体設定 */
html, body {
 font: 13px marugo,"HG丸ゴシックM-PRO",verdana,arial,sans-serif;
 *font-size: small;
 *font: x-small; margin: 0;
 text-align: left;
 word-break: break-all;
 word-wrap: break-word;
 -webkit-text-size-adjust: none;
 height: 100%;
 background: #eee;
 color: #333;
}

#container {
 width: 960px;
 margin: auto;
 background: #fff;
}

/* h 要素 */
h1{
 background: #317ecc;
 color: #fff;
 font-weight: bold;
 padding: 3px;
 text-align: center;
 font-size: 93%;
}

h2.runner {
 position: absolute;
 top: 453px;
 left: 0;
 z-index: 98;
}

/* 全体リンク */
a {
 outline: medium none;
}

a:link {
 color: #fff;
}

a:visited {
 color: #fff;
}

a:hover {
 color: #fff;
 text-decoration: none;
}

a:active {
 color: #fff;
}

/* 共通 */
a:hover img.over {
 opacity: 0.7;
 filter: alpha(opacity=70);
 -ms-filter: "alpha( opacity=70 )";
}

.center {
 text-align: center;
}

.padding5 {
 padding: 5px;
}

.padding10 {
 padding: 10px;
}

.margin10 {
 margin: 10px;
}

/* ヘッダ */
#header {
 position: relative;
 height: 560px;
 background: url(../images/bg.jpg) no-repeat;
}

#top_title {
 position: absolute;
 top: 40px;
 right: 30px;
}

#image {
 position: absolute;
 top: -5px;
 left: 20px;
 z-index: 100;
}

#message {
 position: absolute;
 top: 240px;
 right: 30px;
 z-index: 99;
}

#message p {
 text-align: right;
 font-size: 161.6%;
 font-weight: bold;
 line-height: 1.5em;
 margin-top: 15px;
}

/* メインコンテンツ */
#contents {
 margin: 0 37px;
}

.item {
 float: left;
 padding: 0 20px 20px;
}

.item_data {
 width: 247px;
 text-align: center;
 padding: 10px 0 5px; 
 border-left: 4px #100964 solid;
 border-right: 4px #100964 solid;
 border-bottom: 4px #100964 solid;
 height: 365px;
}

.item_data p {
 padding: 5px 6px; 
 font-weight: bold;
 color: #555;
}

.item_photo {
 padding: 5px;
}

.item_photo a {
 display: table-cell;
 width: 237px;
 text-align: center;
}

.product_button{
 padding: 5px 0;
}

.banner_runningshoes {
 text-align: center;
 padding-bottom :20px;
}

@media screen and (max-width:959px){
.none {display:none}
img {
max-width: 100%;
height: auto;
width /***/:auto;　
}

#container {
 width: 100%;
 margin: auto;
}

h1 {
 font-size: 77%;
}

h2.runner {
 position: static;
 padding: 2% 0 0;
}

#header {
 position: static;
 height: 100%;
 background: url(../images/bg.jpg) no-repeat;
}

#top_title {
 position: static;
 text-align: right;
 padding: 3% 2%;
}

#message {
 position: static;
 text-align: right;
 padding: 0 2%;
}

#message p {
 font-size: 153.9%;
 margin-top: 3%;
}

#contents {
 margin: 2%;
}

.item_title {
 text-align: center;
 background: #100964;
}

.item {
 margin: 1%;
 float: left;
 width: 31%;
 padding: 0;
}

.item_data {
 text-align: center;
 padding: 10px 6px 5px;
 border-left: 4px #100964 solid;
 border-right: 4px #100964 solid;
 border-bottom: 4px #100964 solid;
 box-sizing: border-box;
 width: 100%;
 height: 394px;
}

.item_photo a {
 display: table-cell;
 text-align: center;
}

}

@media screen and (max-width:767px){
.none {display:none}
img {
max-width: 100%;
height: auto;
width /***/:auto;　
}

#top_title {
 text-align: center;
}

#message img {
 text-align: center;
}

#message p {
 font-size: 108%;
 margin-top: 3%;
}

.item {
 margin: 1%;
 float: left;
 width: 48%;
 padding: 0;
}

.item_data {
 height: 405px;
}

.item_data p {
 padding: 5px 0;
}

}

@media screen and (max-width:414px){
.none {display:none}
img {
max-width: 100%;
height: auto;
width /***/:auto;　
}

#message p {
 font-size: 73%;
}

#contents {
 margin: 0;
}

.item {
 float: left;
 padding: 20px 10px;
 width: 91%;
}

.item_data {
 height: 100%;
}

.product_button{
 padding: 5px 0;
}

}

/* フッタ */

#footer {
 background: #317ecc;
}

#footer_content {
 padding: 10px;
}

#footer_content p {
 text-align: center;
 font-size: 85%;
 color: #fff;
}