@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%;
 color: #000;
 background-attachment: fixed;
}

/* 全体リンク */
#product a {
 text-decoration: underline;
 color: #C62F64;
}

#product a:link {
 color: #C62F64;
}

#product a:visited {
 color: #C62F64;
}

#product a:hover {
 color: #3366ff;
}

#product a:active {
 color: #C62F64;
}

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

.center {
 text-align: center;
}

/* wrapper */
#wrapper{
margin: 0 auto;
}

/* hタグ */

h1{
 width: 10%;
 margin: 30px auto;
}

h2{
}

h2 img{
 width: 100%;
}

h3 {
 text-align: center;
}

.concept_title {
 width: 25%;
}

.images_title {
 width: 45%;
}

.product_title {
 width: 35%;
}

h4 {
 font-size: 18px;
 font-weight: bold;
}


h5 {
 display: inline-block;
 position: relative;
 top: -15px;
 text-align: center;
 font-size: 174%;
 font-weight: bold;
 letter-spacing: 2px;
}

h5 span {
 z-index: 1;
 position: relative;
}

h5:after {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 z-index: 0;
 position: absolute;
 padding:0 15px;
 left: -15px;
 top: 0;
 background: #fff;
}

h6{
 font-weight: bold;
 padding: 1% 0;
 font-size: 15px;
}
/*ヘッダー*/
header, .categorywidth {
 margin: auto;
}

.categorywidth {
 width: 960px;
 padding: 0 30px;
}

/* concept */

#concept {
 padding: 90px 0;
 margin: 0 auto ;
 background: #000;
}

#concept p{
 color: #fff;
 text-align: center;
 margin-top: 30px;  
 font-size: 20px;
 line-height: 1.8em;
}


/*urbanactivelife*/

#urbanactivelife {
 padding: 90px 0;
 margin: 0 auto ;
 background: #f0f0f0 url("../images/backimages.png") no-repeat;
 background-position: right bottom ;
 background-size: 40%;
}

#urbanactivelife p {
 text-align: center;
 margin-top: 30px;  
 font-size: 15px;
 line-height: 1.8em;
}

.styleimages {
 position: relative;
 margin-top: 90px;
 height: 1050px;
}

.infit-img1, .infit-img2, .infit-img3, .infit-img4 {
 position: absolute;
}

.infit-img1 {
 width: 43%;
 top: 10%;
 left: 10%;
}

.infit-img2 {
 width: 25%;
 left: 55%;
}

.infit-img3 {
 width: 25%;
 top: 50%;
 left: 15%;
}

.infit-img4 {
 width: 36%;
 top: 53%;
 left: 60%;
}

/*product*/

#product {
 padding: 90px 0;
 margin: 0 auto ;
 background: url(../images/backimages.png) no-repeat;
 background-position: right bottom;
 background-size: 40%;
}

.icon-area {
 margin: 90px auto ;
}

.icon-contents {
 float: left;
 width: 165px;
}

.icon-margin {
 margin-right: 25px;
}

.icon-images {
 text-align: center;
}

.icon-name {
 text-align: center;
 font-size: 30px;
 margin: 10px 0;
 font-weight: bold;
}

/*タブのスタイル*/

.label-mens {
 color: #003364;
 border-top: #003366 medium solid;
 border-right: #003366 medium solid;
 border-left: #003366 medium solid;
 box-sizing: border-box;
}

.label-ladies {
 color: #ff6f6d;
 border-top: #ff6f6d medium solid;
 border-right: #ff6f6d medium solid;
 border-left: #ff6f6d medium solid;
 box-sizing: border-box;
}

.tab-btn {
 width: calc(100%/2);
 font-size: 20px;
 text-align: center;
 display: block;
 float: left;
 transition: all 0.2s ease;
 padding: 15px 0;
 border-radius: 20px 20px 0 0;
}

.tab-btn:hover {
 opacity: 0.7; 
}

/*ラジオボタンを全て消す*/
input[name="tab-btn"] {
display: none;
}

/*タブ切り替えの中身のスタイル*/
.tabcontents {
 display: none;
 padding-top: 50px;
 clear: both;
 overflow: hidden;
 border-top: 3px #000 solid;
}

/*選択されているタブのコンテンツのみを表示*/
#tab-mens:checked ~ .panel-area #mens-contents,
#tab-ladies:checked ~ .panel-area #ladies-contents
{
 display: block;
}

/*選択されているタブのスタイルを変える*/
#tab-mens:checked + .tab-btn {
 background: #003364;
 color: #fff;
}

#tab-ladies:checked + .tab-btn {
 background: #ff6f6d;
 color: #fff;
}

/*商品*/

.productimages{
 text-align: center;
}

.one-area {
 margin-top: 50px; 
}

.product-one {
 border: dashed 2px #000;
 box-sizing: border-box;
 width: 455px;
 float: left;
 padding: 10px;
}

.product-one-rigth {
 margin-right: 50px;
}

.one-images {
 float: left;
 width: 115px;
}

.one-text {
 float: right;
 width: 280px;
}

.one-icon {
 margin: 5px 0;
}

.product-icon-margin{
 margin-right: 14px;
}

.product-icon {
 float: left;
 width: 30px;
}


.p-price {
 font-size: 20px;
 color: #c62f64;
 font-weight: bold;
}

.p-price span {
 font-size: 15px;
}

.p-color, .p-color_r {
 margin-top: 5px;
}

.p-color_r {
 text-align: center;
}

.p-color li, .p-color_r li {
 height: 22px; 
 text-indent: 26px; 
 padding-top:  2px;
 margin-top: 5px; 
 font-weight: bold;
 display: inline-block;
}

.colorimg-white {
 background: url(../images/color-white.png) no-repeat;
}

.colorimg-gray {
 background: url(../images/color-gray.png) no-repeat;
}

.colorimg-gray_2 {
 background: url(../images/color-gray_2.png) no-repeat;
}

.colorimg-gray_3 {
 background: url(../images/color-gray_3.png) no-repeat;
}

.colorimg-navy {
 background: url(../images/color-navy.png) no-repeat;
}

.colorimg-black {
 background: url(../images/color-black.png) no-repeat;
}

.colorimg-charcoal {
 background: url(../images/color-charcoal.png) no-repeat;
}

.colorimg-charcoalgray {
 background: url(../images/color-charcoalgray.png) no-repeat;
}

.colorimg-khaki {
 background: url(../images/color-khaki.png) no-repeat;
}

.colorimg-turquoise {
 background: url(../images/color-turquoise.png) no-repeat;
}

.colorimg-navy_2 {
 background: url(../images/color-navy_2.png) no-repeat;
}

.colorimg-navy_3 {
 background: url(../images/color-navy_3.png) no-repeat;
}

.colorimg-orange {
 background: url(../images/color-orange.png) no-repeat;
}

.colorimg-purple {
 background: url(../images/color-purple.png) no-repeat;
}

.colorimg-lightgreen {
 background: url(../images/color-lightgreen.png) no-repeat;
}

.colorimg-navy_4 {
 background: url(../images/color-navy_4.png) no-repeat;
}

.colorimg-charcoal_2 {
 background: url(../images/color-charcoal_2.png) no-repeat;
}

.colorbackground {
 background-size: 22px;
 background-position:center left;
}

/*おすすめ*/
.recommend {
 border-top: 2px solid #000;
 text-align: center;
 margin-top: 50px;
}

.recommend_product {
 text-align: center;
 width: 440px;
 margin: 0 20px;
 float: left;
}

.r-img {
 width: 35%;
}

/*商品ボタンカテゴリー*/
.btn_caetgory {
 margin: 40px 80px 0;
}

.btns_product img {
 float: left;
 margin-top: 20px;
}

.btn_margin {
 margin-right: 100px;
}

.allbtn {
 text-align: center;
 margin-top: 50px;
}


/*フッター*/

footer {
 background: #000;
 color: #fff;
 font-size: 85%;
 padding: 10px;
}

footer a{
 color: #fff;
}

footer p{
text-align: center ;
}

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


}

@media screen and (max-width:824px) {
#wrapper {
width: 100%;
margin: auto;
}
	
.categorywidth {
 width: 94%;
 margin: auto;
 padding: 0 0;
}

/*product*/
.icon-contents {
 width: 22%;
}

.icon-margin {
 margin-right: 4%;
}


/* hタグ */

h1{
 width: 30%;
}

h2 img{
 width: 100%;
}

h3 {
 text-align: center;
}

.concept_title {
 width: 25%;
}

.images_title {
 width: 70%;
}

h4 {
 font-size: 18px;
 font-weight: bold;
}

h6 {
 padding: 10px 0 0;
}

/* concept */

#concept {
 padding: 50px 0;
}

#concept p{  
 font-size: 15px;
}


/*urbanactivelife*/

#urbanactivelife {
 padding: 50px 0;
}

#urbanactivelife p {
 margin-top: 20px;
}

.styleimages {
 margin-top: 20px;
 height: 780px;
}

.infit-img1 {
 width: 30%;
 top: 5%;
 left: 10%;
}

.infit-img2 {
 width: 26%;
 left: 60%;
}

.infit-img3 {
 width: 24%;
 top: 48%;
 left: 15%;
}

.infit-img4 {
 width: 31%;
 top: 60%;
 left: 50%;
}

	
/*product*/

#product {
 padding: 50px 0;
}

.icon-area {
 margin: 50px 0 ;
}

.icon-contents {
 width: 18%;
}

.icon-margin {
 margin-right: 2%;
}

.icon-name {
 font-size: 18px;
}

	
/*商品*/

.product-one {
 width: 100%;
 float: none;
 margin-top: 20px;
 padding: 3%;
}

.product-one-rigth {
 margin-right: 0;
}

.one-images {
 width: 20%;
}

.one-text {
 width: 79%;
}

.product-icon-margin{
 margin-right: 2%;
}

.product-icon {
 width: 10%;
}

/*おすすめ*/
.recommend {
 margin-top: 30px;
}

.recommend_product {
 width: 44%;
 margin: 0 3%;
}

.p-color_r  {
 margin-top: 0;
}

.p-color_r li {
 margin-top: 5px;
 text-indent: 25px;
 font-size: 10px;
 padding-top: 2px;
}
	
.r-img {
 width: 55%;
}
	
/*商品ボタンカテゴリー*/
.btn_caetgory {
 margin: 40px 0 0;
}

.btns_product img {
 width: 30%;
}

.btn_margin {
 margin-right: 5%;
}

.allbtn {
 text-align: center;
 margin-top: 50px;
}

}

@media screen and (max-width:480px){
	
/* hタグ */

h1{
 width: 30%;
}

.concept_title {
 width: 40%;
}

.images_title {
 width: 80%;
}
	
.product_title {
 width: 45%;
}

h4 {
 font-size: 18px;
 font-weight: bold;
}

h5 {
 font-size: 20px;
}
	
h6 {
 font-size: 12px;
}
	
	
/* concept */

#concept {
 padding: 30px 0;
}

#concept p{  
 font-size: 12px;
}	
	
	
/*urbanactivelife*/

#urbanactivelife {
 background-size: 80%;
 padding: 30px 0;
}

#urbanactivelife p {
 font-size: 15px;
}

.styleimages {
 text-align: center;
 position: static;
 height: 100%;
 margin-top: 0;
}

.infit-img1, .infit-img2, .infit-img3, .infit-img4 {
 position: static;
 margin-top: 30px;
}

.infit-img1 {
 width: 70%;
 top: 0;
 left: 0;
}

.infit-img2 {
 width: 50%;
 left: 0;
}

.infit-img3 {
 width: 50%;
 top: 0;
 left: 0;
}

.infit-img4 {
 width: 70%;
 top: 0;
 left: 0;
}

/*product*/

#product {
 padding: 30px 0;
 background-size: 80%;
}

.icon-area {
 margin: 30px 0 ;
}

.icon-contents {
 float: none;
 width: 100%;
 margin-top: 20px;
}

.icon-margin {
 margin-right: 0;	
}
	
.icon-images img {
 width: 25%;
}

.icon-name {
 margin: 5px 0;
}

	
/*商品*/

.product-one {
 margin-top: 30px;
 padding: 5%;
}

.product-one-rigth {
 margin-right: 0;
}

.one-images {
 width: 50%;
 float: none;
}

.one-text {
 width: 100%;
 float: none;
 margin-top: 15px;
}

.product-icon-margin{
 margin-right: 4%;
}

.product-icon {
 width: 12%;
}
	
.p-text{
 margin-top: 10px;
}

.p-price {
 font-size: 16px;
 margin-top: 5px;
}

.p-color li, .p-color_r li {
 margin-top: 5px;
}
	
.p-color_r li {
 float: none;
}	
	
/*商品ボタンカテゴリー*/
.btn_caetgory {
 margin: 30px 0 0;
}

.btns_product img {
 width: 46%;
 margin: 2%;
}
	
.btn_margin {
 margin-right: 0;
}

.allbtn {
 text-align: center;
 margin-top: 20px;
}
	
}