@charset "utf-8";

/* =========================================================
  Common style
========================================================= */

#contents_full img { -webkit-backface-visibility: hidden; vertical-align:bottom; }

.switch {
	width:100%; height:auto; max-width:1000px;
	margin:0; padding:0;
}


/* =========================================================
  Layout
========================================================= */



/* =========================================================
  Custom
========================================================= */

#topimg {
	width: 100%; max-width: none;
	display: table;	position: relative;
	background-position: center center;	background-attachment: fixed; background-repeat: no-repeat;
	-webkit-background-size: cover;	background-size: cover;	text-align:center;	
}
#topimg img { width:100%; max-width:1000px; }


.topnav {
	display: flex;
	flex-wrap: wrap; 
	align-tems: center;
	justify-content: center;
	margin: 50px auto 20px;
}
.topnav li {
	border:2px solid #191970;
	box-sizing: border-box;
	text-align: center;
	width: 19%;
	margin: 10px 5px 5px;
}
.topnav li a {
	color:#191970;
	font-weight: bold;
	display: block;
	text-decoration: none;
	height: 70px;
	position: relative;
	padding: 5px;
}
.topnav li a:hover {
	background: #191970;
	color: #fff;
	transition: .5s;
}
.arrow::before {
	content: '';
	width: 8px;
	height: 8px;
	border-top: solid 2px ;
	border-right: solid 2px;
	position: absolute;
	  left: 48%;
	  top: 50px;
}
.arrow.arrow-bottom::before {
  transform: rotate(135deg);
}



#main_sec { padding: 20px 10px; padding: 2.5rem 1.0rem; text-align:center; font-size: 15px; font-size: 1.5rem;}
#main_sec h2 {
	color:#191970; font-size: 19px; font-size: 1.9rem; font-weight:bold;
	margin-bottom: 10px; margin-bottom: 1.0rem;	
}

#recommended_item { text-align:center; padding:40px; background: #dcdcdc; }

#recommended_item h3 {
	margin:auto; color:#696969; font-size: 17px; font-size: 1.7rem; font-weight:bold;
	margin-bottom: 15px; margin-bottom: 1.5rem;	
}

#main_sec p {
	text-align:center; margin:0 auto; color:#696969; font-size:13px;
}

/*コーディネート*/

.slider {
  margin: 0 auto 0;
  max-width: 1000px;
}

.slider-img {
  margin: 5px;
  position: relative;
}
.slider-img img {
  height: auto;
  margin: 0 0 10px 0;
}

.slider-img p {
  position: absolute;
  height:26px;
  width:26px;
  top: 8px;
  left: 8px;
  border-radius:50%;
  line-height:26px;
  text-align:center;
  background: black;
  color:#FFF;
}




#page-top {
	text-decoration:none;
    position: fixed;
    right: 10px;
    bottom: 10px;
    font-size: 1.2rem;
    line-height: 1.2rem;
    background: #fff;
    color: #737373;
    padding: 10px;
    border: solid 1px;
    border-radius: 50%;
    box-shadow: 0 2px 10px -6px rgba(0,0,0,.5), 0 3px 10px -4px rgba(0,0,0,.2);
}



.corner_btn { text-align:center; padding:30px 0 30px 0; background:#f5f5f5; }
.corner_btn a { position: relative; }
.corner_btn h3 { color:#696969; font-size: 17px; font-size: 1.7rem; font-weight:bold;
	margin-bottom: 10px; margin-bottom: 1.0rem;	}
.corner_btn img { padding: 1px; padding: 0.1rem; margin:2px; }
.corner_btn .corner_btn140 { max-width:115px; }
.corner_btn p{ position: absolute;
  color:#FFF; font-size: 14px; font-size: 1.4rem; font-weight:bold;
  top: 1%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0; }

#coat01, #coat03, #coat05, #coat07 { background: #f5f5f5; margin: 0; padding:40px 0 10px; }
#coat02, #coat04 , #coat06, #coat08 { margin: 0; padding:40px 0 10px; }
#coat01 h3, #coat02 h3, #coat03 h3, #coat04 h3, #coat05 h3, #coat06 h3, #coat07 h3, #coat08 h3 {
	color:#191970; font-size: 19px; font-size: 1.9rem; font-weight:bold;
	margin-bottom: 40px; margin-bottom: 4.0rem;	
}
.material{ margin-bottom: 10px; }
.corner_sec { padding:30px 0; padding:3.0rem 0; background:#FFF; }
.corner_txt { padding: 0 0 20px 0; padding: 0 0 2.0rem 0; }
.corner_txt_catch { width:100%; max-width:660px; height:auto; }

/* lineup_big */
.lineup_big { width:100%; max-width:1000px; margin:0 auto 50px; }

.lineup_big_item { width:100%; max-width:1000px; }
.lineup_big_item .phmain { width:100%; max-width:100%; float:none; }
.lineup_big_item .phmain img { width:100%; height:auto; }
.lineup_big_item .phsub { width:100%; max-width:100%; float:none; }
.lineup_big_item .phsub img { width:100%; height:auto; }

.category { padding: 0 20px; }
.itemcatch { font-size:19px; color:#191970; margin:0 auto 20px; padding: 0.25em 0.5em; text-align:left;  border-left: solid 4px #191970;
}
.itemname { font-size:14px; line-height:1.5; text-align:left; }
.itemprice { color:#F00; text-align:left; }
.itemcomment { font-size:14px; line-height:1.5; text-align:left; }

.itemphoto { text-align:center; margin-bottom:10px; }
.itemphoto_sub { text-align:center; margin:40px auto 20px; }

.cood { margin-top:30px; color:#999; text-align:left; }

#contents .columns p.itemcomment,
#contents .columns p.itemprice { text-align:left; margin-bottom:20px; }

#contents .lineupbox p.itemphoto img { line-height:1; margin:0; }

.btn_l { font-size:16px; line-height:1; }
.lineupbox .btn_l { font-size:14px; line-height:1; }

.btn_l a {
	display:block; width: 100%; max-width:350px;
	text-decoration: none;
	color:#FFF; text-align:center; background-color:#000; border:1px solid #666;
	padding:18px; margin: 20px auto 30px;
}
.btn_l a:hover { background-color: #666; color:#FFF; }
.btn_l .genericon-rightarrow { color:#666; font-size:18px;	padding-right:10px; }

.btn_ll a {
	display:block; width: 100%; max-width:300px;
    text-decoration: none; border: 2px solid #c0c0c0;
	text-align:center;
	padding:15px; margin: 20px auto 50px;
}
.btn_ll a:hover { background-color: #c0c0c0; color:#FFF; }
.btn_ll .genericon-rightarrow { color:#c0c0c0; font-size:18px;	padding-right:10px; }


.coat_item{ max-width:100%;
margin-bottom:100px; 
}
.coat_item img{ width:33%; }


@media only screen and (max-device-width: 480px) {
.mainimg { margin:-120px auto -110px; }
.itemphoto_sub { margin:0 20px 10px; }

.topnav {
	width: 100%;
}
.topnav li {
	width: 48%;
	margin: 0 auto 10px;
}
.topnav li a {
	display: block;
	line-height:1;
	height: 60px;
}
.arrow::before {
	  top: 43px;
}
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
	.topnav li {
		width: 31%;
	}
}

@media only screen and (min-width: 769px) {
#main_sec { padding: 50px 10px; padding: 5.0rem 1.0rem; }
#main_sec p img { max-width:900px; }
#main_sec h2 {
	font-size: 20px; font-size: 2.0rem;
	margin-bottom: 20px; margin-bottom: 2.0rem;	
}

#coat01, #coat03 , #coat05, #coat07 { background: #f5f5f5; margin: 0; padding:50px 0 20px 0 ; }
#coat02 { margin: 0; padding:50px 0 20px 0 ; }
#coat01 h3, #coat02 h3, #coat03 h3, #coat04 h3, #coat05 h3, #coat06 h3, #coat07 h3, #coat08 h3 {
	font-size: 20px; font-size: 2.0rem;
	margin-bottom: 40px; margin-bottom: 4.0rem;	
}
#main_sec p { font-size:15px; }
.corner_btn .corner_btn140 { width: 25%; max-width:150px; }


.corner_sec { padding:50px 0;	padding:5.0rem 0; }
.corner_txt { padding: 0 0 50px 0; padding: 0 0 5.0rem 0; }
.lineup_big_item .phcolor { padding-top:20px; padding-top:2.0rem; }
.lineup_big_item .buybtn_l { margin: 30px auto 60px; margin: 4.0rem auto 8.0rem; }

.topnav {
		width:100%;
}

.topnav li {
	width: 23%;
}
}

@media only screen and (min-width: 961px) {
.corner_btn a { padding: 5px; padding: 0.5rem; margin:10px; margin:1.0rem; }
.corner_btn p{ position: absolute;
  color:#FFF; font-size: 16px; font-size: 1.6rem; font-weight:bold;
  top: 1%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0; }
  
.topnav li {
	width: 23%;
}

}


@media only screen and (min-width: 1000px){
	.topnav {
		width: 1000px;
	}
	.topnav li {
	width: 18%;
}
}