@charset "UTF-8";
/* CSS Document*/

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    transition: 0.15s;
	color: #666666;
}
a:hover {
	opacity: 0.5;
}
input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select::-ms-expand {
    display: none;
}
input,
textarea{
	padding:.5rem;
	border:solid 1px #cccccc;
	margin:0 auto 1rem;
	width:100%;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
button{
	border:none;outline: 0;
	transition: background 250ms ease-in-out, transform 150ms ease;
	-webkit-appearance: none;
	-moz-appearance: none;
}
button:hover,
button:focus {
	opacity: .8;
}
button:focus {
    font-size: 98%;
	outline: 0;
}
input:focus,
textarea:focus{
	outline: 0;
	border-color: #009cde;
}
::-webkit-input-placeholder {color: #ccc;}/* Chrome */
::-moz-placeholder {color: #ccc;}/* Firefox */
:-ms-input-placeholder {color: #ccc;}/* IE */

/* 入力エラーのスタイル */
.err_msg { font-size: .8rem; color: #db4437;}
input[type=tel]:required,
input[type=text]:required,
input[type=email]:required,
input[type=email]:invalid,
textarea:required {
	border-color: #db4437;
	background-color: #ffebee;
}
select{
	width:100%;
	border:solid 1px #ccc;
	margin:0 auto 1rem;
	padding:.5rem;
	font-size:1rem;
	background-color: #fff;
}
option{min-height: 1.4em;}
.container {
  display: flex;
  /*flex-direction: column;*/
  min-height: 100vh;
}
header {
  grid-column: span 3;
  padding: 30px;
  text-align: center;
  font-size: 1.4em;
  color: white;
}
main {
	width:100%;
	padding: 4% 0;
	margin:20% auto;
}
.inner{
	margin: 0 4%;
}
aside {
	padding: 2%;
	height: 100%;
	border-left:1px solid #e8e8e8;
}
footer {
  grid-column: span 3;
}
h1 {
	margin-bottom: 2rem;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
}
h1 span{
	display: block;
	font-size: 60%;
	padding-top: .5rem;
	font-weight: normal;
}
h2 {
	margin-bottom: 1em;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
}
h5 span {
	font-weight: normal;
}

.al-left{text-align: left;}
.al-center{text-align: center;}
.al-right{text-align: right;}

/* ---------------------
	text 
   ---------------------*/
.txt-small{font-size: 80%;}

/* ---------------------
	color 
   ---------------------*/
.bg-pink{background-color: #ffe9d8;}
.bg-yellow{background-color: #ffffcc;}
.bg-red{background-color: #ff6666;;color: #fff;}
.bg-blue{background-color: #c7eeff; color: #999;}
.bg-gray{background-color: #eaeaea; color: #333;}

/* ---------------------
	login 
   ---------------------*/
.login {
	height: 100vh;
	overflow:hidden;
	background-size: cover;
	background-position: center;
	background-color: transparent;
	
/* アニメーション設定*/
  animation-name:fade-in1;
  animation-duration:2s; /*//時間*/
  animation-timing-function: ease-out; /*//イージング*/
  animation-delay: 0; /*開始時間*/

  animation-direction:normal; /*往復処理*/
  animation-fill-mode: forwards; /*アニメーション後のスタイル*/
	
}
@keyframes fade-in1 {
  0% {opacity: 0}
  100% {opacity: 1}
}
.background1 {background-image: url('../images/top/bg01.jpg');}
.background2 {background-image: url('../images/top/bg02.jpg');}
.background3 {background-image: url('../images/top/bg03.jpg');}
.background4 {background-image: url('../images/top/bg04.jpg');}
.background5 {background-image: url('../images/top/bg05.jpg');}
.background6 {background-image: url('../images/top/bg06.jpg');}
.background7 {background-image: url('../images/top/bg07.jpg');}
.background8 {background-image: url('../images/top/bg08.jpg');}
.background9 {background-image: url('../images/top/bg09.jpg');}
.background10 {background-image: url('../images/top/bg10.jpg');}
.login-inner{
	width: 100vw;
	height: auto;
	min-height: 100vh;
	padding: 4% 5%;
	
	box-sizing: border-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	/* 左右中央寄せ */
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

	/* 上下中央寄せ */
	-webkit-box-align: flex-start;
	-ms-flex-align: flex-start;
	align-items: flex-start;
	
	flex-direction: column;
}
.login-contents{
	width: 100%;
	background: rgba(255,255,255,0.8);
	border-radius: 10px;
	padding: 8%;
	text-align: center;
	box-shadow: 0 0 12px 0 rgba(0,0,0,0.1), 0 10px 30px 0 rgba(0,0,0,0.2);
}
.login-contents img{width: 60%; margin-bottom:1rem;}
.login-contents h1{font-size:.9rem; margin-bottom:3rem;}
.login-contents h5{text-align: left; font-weight: normal; margin-bottom: 0;}
.login-contents a{color: #009cde;}
.login-contents .btn-area p{font-size: .7rem;}
.login-contents input{
	padding:.5rem;
	border:none;
	border-bottom: 1px solid #ccc;
	margin:0 auto 1rem;
	background: rgba(255,255,255,0);
	width:100%;
	border-radius: 0;
	box-shadow: none;
}
.login-contents input:focus{outline: none;}

/* ---------------------
	header 
   ---------------------*/
.global-head {
	width: 100%;
	padding: 4%;
	overflow: hidden;
	background: #fff;
	display: -webkit-flex;
	display: flex;
	position: relative;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.global-head img{vertical-align: -14.5%;}
.brand-logo{ width: 42%;margin: 0 auto; display: block;}
.hd-cart{ display: block; width: 7%; position: absolute; top:24%; right: 3%;}
.hd-news{ display: block; width: 7%; position: absolute; top:25%; right: 15%;}
#nav-cart{z-index: 1000;}
/* 下スクロールでheader表示 */
#site-header{
	position: fixed;
	background: rgba(255,255,255,0.8);
	top: 0;
	transition: .8s cubic-bezier(.4, 0, .2, 1);
	width: 100%;
	overflow: hidden;
}
.head-animation {
  transform: translateY(-100%);
}

/* humberger-menu */
#nav-toggle {
	display: block;
	position: absolute;
	top: 25%;
	left: 4%;
	height: 30px;
}
#nav-toggle > div {
	position: relative;
	width: 30px;
}
#nav-toggle span {
	width: 100%;
	height: 2px;
	left: 0;
	display: block;
	background: #666666;
	position: absolute;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
	top: 5px;
}
#nav-toggle span:nth-child(2) {
	top: 13px;
}
#nav-toggle span:nth-child(3) {
	top: 22px;
}
	/* nav open */
	.open {
		overflow: hidden;
	}
	/* #nav-toggle close */
	.open #nav-toggle span:nth-child(1) {
		top: 11px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.open #nav-toggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.open #nav-toggle span:nth-child(3) {
		top: 11px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
/* close */
.close .container {
	margin-left: 0;
}
	/* z-index */
	#nav-toggle {
		z-index: 400;
	}
	.global-side {
		z-index: 300;
	}
	.global-head {
		z-index: 350;
	}
	
/* humberger-menu内*/
.global-nav ul{
	list-style: none;
	padding: 0;
}
.global-nav > ul > li{
	position: relative;
}
.global-nav a{
	color: #333333;
	text-decoration: none;
	display: block;
	padding: 15px 14% 15px 5%;
	border-bottom: 1px solid #eeeeee;
	-moz-transition: background-color .3s linear;
	-webkit-transition: background-color .3s linear;
	transition: background-color .3s linear;
}
/* sub-menu open*/
.global-nav .sub-menu.is-active > a,
.global-nav a:hover {
	color: #333333;
	background: #e8e8e9;
}
/* sub-menu icon */
.global-nav .sub-menu-head {
	position: relative;
	color: #009cde;
}
.global-nav > ul > li a:after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 18px;
	margin: auto; margin-left: .5rem;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
.global-nav .sub-menu-nav a{padding-left: 14%;}
.global-nav .sub-menu.is-active > a:after,
.global-nav > ul > li a:hover:after,
.global-nav .sub-menu-head:hover:after {
	border-color: #999;
}
.global-nav .is-active .sub-menu-head:after {
	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.global-nav .sub-menu.dwcl a.open{background-color: #e8e8e9;}
.global-nav .sub-menu.dwcl a.open:after {border: none;}
.global-nav .sub-menu.dwcl a.open:hover{
	opacity: 1; background-color: #e8e8e9; cursor: pointer; }
/* sub-menu */
.global-nav .sub-menu-nav {
	background: #f8f8f9;
	display: none;
	padding: 0;
	overflow: hidden;
}
/* sub-menu */
.global-nav .sub-menu.is-active > a:after,
.global-nav .sub-menu-head:hover:after {
	border-color: #999;
}
.global-nav .sub-menu.is-active .sub-menu-head,
.global-nav .sub-menu-head:hover{color:#009cde;}
.global-nav .sub-menu.dwcl ul li a{
	color: #333333;
	position: relative;
	padding-left: 9%; 
}
.global-nav .sub-menu.dwcl ul li a:hover {
	background: #e8e8e9;
}
.global-side {
	position: fixed;
	right: -300px;
	top: 0;
	height: 100%;
	width: 100%;
	color: #333;
	background: #fff;
	-webkit-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	left:  -100%;
	padding-top: 60px;
}
.close .global-side {
	left: 0;
}
.global-nav .sub-menu.dwcl{border-left:6px solid #009cde; }
.global-nav .sub-menu.dwcl ul li a{ color:#009cde;}
.global-nav .sub-menu.dwcl.is-active > a{background: #e8e8e9;}

.global-nav .sub-menu.dwcl a:after{
	border-color: #95DEFF;
	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.global-nav .sub-menu.dwcl.is-active > a:after{
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.global-nav .sub-menu.dwcl ul li a:after{
	border-color: #95DEFF;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* ---------------------
	footer
   ---------------------*/
.footer-nav{
	position: fixed;
	bottom: 0; left:0;
	width: 100%; padding: 2% 0; 
	overflow: hidden; display: inherit;
	background: #414b4f;  
}
.footer-nav ul{
	padding: 0; text-align: center;
}
.footer-nav ul li{
	width: calc(100%/4);
	position: relative; float: left;
	display: inline-block; vertical-align: bottom;
	font-size: .6rem; letter-spacing: .5px;
	line-height: 1.2;
}
.footer-nav ul li a{
	color: #ffffff; vertical-align: bottom;
}
.footer-nav li img{
	display: block; height: 33px;
	/*width: 32%;*/ margin: 0 auto .25rem; 
}

/* ---------------------
	btn 
   ---------------------*/
.btn{
	width: 60%;
	display: inline-block;
	position: relative;
	font-size: 1em;
	line-height: 2.5rem;
	border-radius: 4px;
	text-align: center;
	cursor: pointer;
}
.btn-area{
	width: 100%;
	margin: 0 atuo;
	text-align: center;
	overflow: hidden;
	clear: both;
}
.btn-area.page{font-size: 1rem;}
.btn-area > .btn{margin: 1rem .5rem 1.5rem;}
.btn-area > input{width: 15%;}
.btn.gray-btn {background-color: #e7e7e7;}
.btn.right-btn {float: right; width: 20%; line-height: 1.4rem; background-color: #fff; border: 1px solid #666666;}
.select-tabs .btn.right-btn {width: 30%; font-size: .8rem; margin-bottom: 1rem;}
.btn.line-btn {background-color: #fff; color: #009cde; border: 1px solid #009cde; }
.btn.whiteline-btn {background: none; color: #009cde; border: 1px solid #009cde; }
.btn.select,
.btn.blue-btn,
.btn.icon-download{background-color: #009cde; color: #fff;}
.btn.icon-download{width: 70%;}
.btn.icon-download > img {width: 24px; height: 24px; margin: 0 .5rem; padding: 0;}
.btn.reset-btn{width: 29%; background-color: #fff; color: #009cde; border: 1px solid #009cde;}
.btn.page-btn{width: 30%; line-height: 2.4rem; background-color: #fff; border: 1px solid #666666; color: #333;}
.btn.return-btn{width: 20%; line-height: 1.4rem; background-color: #fff; border: 1px solid #666666;}
.btn.search-btn{width: 50%; background-color: #009cde; color: #fff;}
.btn.cart-btn{
	width: 100%; margin: 0 auto; background-color: #009cde; color: #fff;
	font-size: .8rem; line-height: 2rem;
}
.collection .btn.search-btn,
.collection .btn.cart-btn{background-color:#000248; }
.btn.mail-btn{
	width: 60%; background-color: #fff; 
	font-size: .7rem; line-height: 1.5rem; margin: 0 auto 1rem;
}
.btn.mail-btn{color: #af9c6e; border: 1px solid #dbc99d;}
.btn.like-btn{color: #FF6699; border: 1px solid #FF6699; background-color: #fff;}
.favorite-list .btn.mail-btn{width: 100%;}
.btn.mail-btn.select{background-color: #dbc99d; color: #fff;}

.select-btn{
	display: inline-block;
	position: relative;
	font-size: 1em;
	line-height: 2rem;
	text-align: left;
	padding-left: 2rem;
	margin-right: .2rem;
}
.select-btn-area{
	width: auto;
	display: inline;
	text-align: center;
}
.btn span[class*="icon-"]:before,
.select-btn span[class*="icon-"]:before{
	content: "";
	position: absolute;
	top: 16%;
	bottom: 0;
	left: 5%;
	margin: auto;
	vertical-align: middle;
	width: 2.5rem;
	background-size: 70%;
}
.btn .icon-check:before {
	top: 8%;
	background: url("../images/common/icon-check.svg") top left no-repeat;
	background-size: 35% !important;
}
.select-btn span.icon-baby:before {
	top: 22%; left: 0;
	background: url("../images/common/icon-baby.svg") top left no-repeat;
	background-size: 50%;
}
.select-btn span.icon-pet:before {
	top: 22%; left: 0;
	background: url("../images/common/icon-pet.svg") top left no-repeat;
	background-size: 50%;
}
.select-btn.select{color: #009cde;}
.select-btn.select span.icon-baby:before {
	top: 22%; left: 0;
	background: url("../images/common/icon-baby-blue.svg") top left no-repeat;
	background-size: 50%;
}
.select-btn.select span.icon-pet:before {
	top: 22%; left: 0;
	background: url("../images/common/icon-pet-blue.svg") top left no-repeat;
	background-size: 50%;
}

/* ---------------------
	modal window 
   ---------------------*/
.modal-close {
	font-size: .8rem; text-align: center;
	width:6rem; margin:1rem auto 0 !important;
    display: block; color:#333 !important;
	padding:0 10px; background:#fff;
	border: 1px solid #ccc;
	border-radius: 1.6rem;
	text-decoration:none !important;
}
.modal-close:hover {
    cursor:pointer;
    color: #6CF !important;
}
.popup{
	width: 80%; max-width: 600px;
	padding: 6% 2% 3%;
	margin: 0 auto;
	text-align: center;
	 background: rgba(255,255,255,0.9);
	border-radius: 10px;
	color: #333;
}
.popup .btn{
	width: 35%;
	font-size: .8em;
	line-height: 1.8rem;
	border-radius: 4px;
}
.popup p{ font-size: 1rem;}
.message{
	width: 98%;
	padding: 2% 3% 0;
	margin: 0 auto 2%;
	text-align: left;
	border-bottom: 1px solid #ccc;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.message .text-area{width: 70%; margin-right: 1em;}
.message .btn-area{width: 30%;}
.message .btn-area .btn{
	width: 100%; display: block; margin: 0;
	font-size: .7rem; line-height: 1.5rem; margin: 0 auto 1rem;
}
/* ---------------------
	accordion 
   ---------------------*/
.accbox,
.search-box{
    margin:  1rem 0;
    padding: 0;
	position: relative;
}
/*ラベル*/
label[class*="acclabel"]{
	position: relative;
    display: block;
    font-weight: bold;
    cursor :pointer;
	font-size: 0.83em;
    transition: all 0.5s;
}
.accbox label.acclabel{
	padding : 1rem 0;
    font-weight: bold;
    background: #fff;
	border-bottom: 1px solid #ccc;
}
.search-box label.search-acclabel{
	padding : .3rem 0;
	font-weight: normal;
	background: #eaeaea;
	border-radius: 4px;
}
/*アイコンを表示*/
label[class*="acclabel"]:before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 8px;
	height: 8px;
	right: 18px;
	margin: auto;
	vertical-align: middle;
	border-top: 1px solid #666666;
	border-right: 1px solid #666666;
	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.accbox label.acclabel:before{
	width: 8px;
	height: 8px;
	right: 18px;
	border-top: 1px solid #666666;
	border-right: 1px solid #666666;
	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
.search-box label.search-acclabel > img{width: 8%; margin: 0 .5rem; padding: 0;}
/*ラベルホバー時*/
.search-box label.search-acclabel:hover {}
/*チェックは隠す*/
.cssacc {display: none;}
.search-box .accshow > input {display: inline-block;}
/*中身を非表示にしておく*/
.accbox .accshow,
.search-box .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
/*クリックで中身表示*/
.cssacc:checked + label.acclabel + .accshow,
.cssacc:checked + label.search-acclabel + .accshow{
    height: auto;
    padding: .5% 0 0;
    background :fff;
    opacity: 1;
}
/*アイコンを入れ替える*/
.cssacc:checked + label.acclabel:before,
.cssacc:checked + label.search-acclabel:before{
    content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 18px;
	margin: auto;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	border-top: 1px solid #666666;
	border-right: 1px solid #666666;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
.sticky{
	width: 100%; margin: 0 atuo; text-align: center; clear: both;
	padding: 3% 0;
	position: -webkit-sticky; /* Safari */  
	position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
	position: sticky; bottom: 60px;
	background: rgba(255,255,255,0.8);
}
.search-box .sticky{bottom: 0;}

/* ---------------------
	search page
   ---------------------*/
/*タブ切り替え全体のスタイル*/
.switch-tabs {
  width: 100%;
  margin: 0 auto 1rem;
}
.switch-tabs input{
	width: auto;
	border: none;
}
.switch-tabs-in {
  width: 100%; display: table;
}
/*タブのスタイル*/
.switch-tab_item {
	width: 28px;
	height: 28px; vertical-align: center;
	margin-left: 1rem;
	color: #333;
	display: inline-block;
	float: right;
	text-align: center;
	transition: all 0.2s ease;
}
.switch-tab_item:hover { opacity: 0.75;}
.switch-tab_item img{pointer-events: none;}

/*ラジオボタンを全て消す*/
input[name="switch-tab_item"]{
	display: none;
}
/*タブ切り替えの中身のスタイル*/
.switch-tab_content {
	display: none;
	padding: 1.3rem 0 0;
	clear: both;
	overflow: hidden;
	background-color: #fff;
}
/*選択されているタブのコンテンツのみを表示*/
#first:checked ~ #first_content,
#second:checked ~ #second_content,
#third:checked ~ #third_content{
	display: block; 
}
.switch-tab_content label {width: 100%; clear: both; margin-bottom: 1rem;}

/* form */
.checkbox01-input{
	display: none;
}
.checkbox01-parts{
	font-size: .9rem;
	padding:0 0 0 2rem;
	position:relative;
	display: inline-block;
}
#favorite .checkbox01-parts{margin-left: 1rem; padding-bottom: 1.5rem;}
.checkbox01-parts::before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 1.2rem;
	height: 1.2rem;
	border: 1px solid #999;
	border-radius: 4px;
}
.checkbox01-input:checked + .checkbox01-parts{
	color: #009cde;
}
.checkbox01-input:checked + .checkbox01-parts::after{
	content: "";
	display: block;
	position: absolute;
	top: -5px;
	left: 6px;
	width: .6rem;
	height: 1.2rem;
	transform: rotate(40deg);
	border-bottom: 3px solid #009cde;
	border-right: 3px solid #009cde;
}

/* 件数表示 */
.number{
	width: 100%; clear: both; overflow: hidden;
}
.number h5{ display: inline;}
.number p{display: inline-block; margin-right: .25rem;}
.number .term{text-align: center;}
.number .number-select,
.number .term-select,
.date-select{
	position: relative;
	display: inline-block;
}
.number .number-select{width: 50%;float: right;}
.number .term-select{width: 23%; margin-right: 0;}
.date-select{width: 100%;}
.number .term-select select{ font-size: .8rem;}
.number .number-select:after,
.number .term-select:after,
.date-select:after{
	content: "";
	position: absolute;
	top: -40%;
	bottom: 0;
	right: 18px;
	margin: auto;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	border-top: 1px solid #033560;
	border-right: 1px solid #033560;
	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
.number .term-select:after{right: 8px;}
/* list */
.brandList{
	display: table;
	width:100%; margin:0 auto; padding:0;
}
.brandList > li{
	display: table-cell; float: left;
	background-color: #fff;
	width:23.5%;
	margin: 0 2% 2%;
	border: 1px solid #ccc;
}
.brandList > li.select{border: 1px solid #009cde;}
.brandList > li:nth-child(n) {margin-left: 0;}
.brandList > li:nth-child(4n) {margin-right: 0;}
.brandList > li:nth-child(4n+1){clear: both;}
.brandList > li img{width: 100%;}

.brand-bulletlist {
	list-style: none;
	display: inline;
	width:100%; 
	padding: 0;
	border-top: 1px solid #eeeeee;
}
.brand-bulletlist li {
	width:100%; display: table; 
	position: relative; float: left; margin-right: 4%;
	background: #fff; vertical-align: middle;
	border-bottom: 1px solid #eeeeee;
}
.brand-bulletlist > li:nth-child(n) {padding-right: 0;}
.brand-bulletlist > li:nth-child(2n) {margin-right: 0;}
.brand-bulletlist > li:nth-child(2n+1){clear: both;}
.brand-bulletlist li p {
	width: 75%; padding:.5rem 0 .5rem 1rem;
	display: table-cell; margin: 0;
	vertical-align: middle;
	font-size: .8rem;
}
.brand-bulletlist li p span{display: block; font-size: .6rem;}
.brand-bulletlist li div{
	width: 15%; max-width: 50px;
	display: table-cell; vertical-align: middle;
}
.brand-bulletlist li.select{border: 1px solid #009cde;}
.brand-bulletlist li div img{width: 100%;}


.categoryList{
	display: table;
	width:100%; margin:5% auto 0; padding:0;
}
.categoryList > li{
	display: table-cell; float: left;
	background-color: #fff;
	width:calc(96%/2); padding: 0;
}
.categoryList > li:nth-child(n) {padding-right: 0;}
.categoryList > li:nth-child(2n) {margin-right: 0;}
.categoryList > li:nth-child(2n+1){clear: both;}
.categoryList > li .checkbox01-parts{font-size: .9rem;}
.categoryList > li label{width: 96%;word-wrap: break-word;}

.sort{width: 100%; border-top: 1px solid #ccc; padding: 2% 4% 0; vertical-align: middle;}
.sort label{margin-top: .5rem; float: right; }

.sns{ 
	width:100%; margin:0 auto 1rem; padding: 0;
	overflow: hidden;  list-style: none; 
	text-align: center;
}
.sns li{ display: inline-block; margin: 0;}
.sns li a > img{width: 70%;}

/* carousel */
.historyitems,
.recommenditems{
	width:100%;
	margin-bottom: 2rem; padding:5% 0;
	background-color: #f8f8f9;
}
.recommenditems{
	background-color: #ffffff;
}
.carousel {
	width:100%; margin:0; padding:0;
	overflow-x:scroll;
	overflow-y: hidden;
	display: flex;
	-webkit-overflow-scrolling:touch;
	overflow-scrolling:touch;
}
.carousel li {
	flex: 0 0 40%;
	padding: .5rem;
	background: #fff;
	margin: 0 .5rem 0 0;
	text-align: left;
	display:inline-block;
	font-size: .9rem;
	line-height: 1.6;
}
.carousel li:first-child {margin: 0 .5rem 0 1rem;}
.carousel li:last-child {margin: 0 1rem 0 0;}
.carousel li > a{
	text-decoration: none;
	display:inline-block;
}
.recommenditems .carousel li{border: 1px solid #f2f2f2;}
.carousel li a > img{ max-width: 100%; margin:0 0 .5rem;  padding:0; width: 100%;}


/* ---------------------
	product index page
   ---------------------*/
.like, .imageDL{display: block; font-size: .7rem; text-align: center;}
.like img, .imageDL img{width:45%; margin-bottom: 2%;}
	
.productList{width: 100%; font-size: .8rem; border-top: 1px solid #e2e2e2; }
.productList tr{
	border-bottom: 1px solid #e2e2e2; }
/*.productList tr:nth-child(even){ background-color: #f8f8f9;}*/
.productList td{
	margin: 2%; text-align: center; display: inline-block;
}
.productList td p{font-size: .8rem; margin-bottom: .25rem;}
.productList .product-img{width: 20%;}
.productList .overview{width: 48%; text-align: left;}
.productList.order-detail .overview{width: 58%;}
.productList .overview-tit{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.productList .overview-tit .overview-link{width: 20%; margin-left: 2%;text-align: center;}
.productList .overview-tit .overview-link img{max-width: 30px; margin-bottom: 4%;}
.productList .overview-tit .overview-link .youtube span{display: none;}
.price.sale span{color: #ff6666; font-weight: bold;}
.price.sale strong{color: #ccc; text-decoration: line-through; font-weight: normal;}
.productList .overview.zan{width: 72%; vertical-align: top;}
.productList .product-name{font-weight: bold;}
.icon-new{
	padding: 0 1%; margin-right:.5rem; 
	font-weight:  normal; font-size: .8rem; display: inline-block;
	background: #fff; border: 1px solid #009cde; border-radius: 2px; color: #009cde;
}
.icon-noorder{
	padding: 0 1%; margin-right:.5rem; 
	font-weight:  normal; font-size: .8rem; display: inline-block;
	background: #666; border-radius: 2px; color: #fff;
}
.product-name a{color: #009cde; text-decoration: underline;}
.product-name a:hover{text-decoration: none;}
.productList .photo{display: block; margin-bottom: .5rem;}
.productList .photo img{width: 100%;}
.productList .arrival{ padding:1% 4%; background-color:#ccc; color: #fff; font-size: .7rem; border-radius: 2px;}
.productList .quantity{width: 15%;}
.productList .quantity p > span {font-size: .7rem;}
.productList .quantity > input{width: 70%;}
.productList .quantity .delete {display: block; margin-top: 1.5rem;font-size: .7rem; text-decoration: underline;}
.productList .stock{ font-size: .6rem; margin-bottom: 1rem;}
.stock > span{
	width: 70%; border-top:1px dotted #ccc; display: block;
	padding-top: .5rem; margin: .5rem auto 0;
}
.order-data,
.overview-contents{
	width: 100%; clear: both; overflow: hidden;
	border-top: 1px solid #f6f6f6;
	font-size: .7rem;
}
.order-data{ margin: 0 0 .5rem; padding: 0; border-top: none;}
.overview-contents{ margin: .5rem 0 0; padding:.5rem 0 0 5em;}
.order-data dt,
.overview-contents dt,
.productList .date-tit{
	border: 1px solid #ccc; display: inline-block;
	float: left; font-size: .5rem;
	text-align: center; font-weight: normal;
	margin: 0; padding: 0;
}
.overview-contents dt{width: 6em; margin-left:-7em; clear: left;}
.order-data dt,
.productList .date-tit{width: auto; margin:0 .5rem .5rem 0 ; padding:0 1%;}
.order-data dd{margin-right: 1rem; float: left; display: inline; margin-bottom: .5rem; text-align: left;}
.order-data dd.date{margin-right: 0; padding: 0;}
.order-data dt.code,
.order-data dt.comment{clear: both;}
.cart-preview .order-data dt:nth-child(5){clear: both;}
.overview-contents dt.bg-gray{border: none;}

.zan-info{width: 100%; text-align: center; margin-top: 1rem;}
img[src*="icon-info"]{width: 1.2em; height: 1.2em; vertical-align: text-bottom;}
.zan-info tr{border-bottom: none;}
.zan-info th{background-color: #f8f8f9;	border-left: 1px solid #fff; font-size: .7rem;}
.zan-info th:first-child{border-left: none;}
.zan-info td{display: table-cell; padding:.5rem 0; font-size: .7rem; /*border-bottom: 1px solid #eee;*/ }
.zan-info img[src*="icon-arrow"]{width: 2em; height: 2em;}

.productList .zan-info tr{ background-color: inherit;}
.productList .zan-info tr:nth-child(even){ background-color: inherit;}

img[src*="cart-step"]{width: 80%; margin: 0 auto; display: block; margin-bottom: 1.5rem; }
.cart .productList {
	margin-bottom: 1rem;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
.cart .productList tr:nth-child(even){
	background-color: #ffffff;
}
.cart .productList .quantity p{font-size: 1rem; text-align: center;}
.productList .total{ 
	background-color: #f8f8f9 !important;
	font-weight: bold;text-align: right;
	font-size: 1rem;
}
.productList .total td{text-align: right;}
.productList .shipping-cost{ text-align: right; background-color: #fff !important; }
.caption{padding-top: 1rem; font-size: .9rem; text-align: center;}

.item-detail {position: relative;}
.item-detail .zan-info {
	text-align: left;
	border-top: 1px solid #f6f6f6;
	border-bottom: 1px solid #f6f6f6;
}
.item-detail .zan-info th{
	width: 22%; border-bottom: 1px solid #fff;
	vertical-align: top; padding:.5rem;
}
.item-detail .zan-info.wide th{width: 100%; border: none;}
.item-detail .zan-info.wide tr:nth-child(even){ background-color: inherit;}
.item-detail .zan-info td{
	padding:.5rem; border-bottom: 1px solid #f6f6f6;
}
.item-header{
	width: 100%;  margin: 0 auto 1rem;
	/*overflow: hidden; */clear: both;
}
.item-detail h2{
	text-align: left; font-size: 1rem; word-break: break-word;
}
.item-detail h2 span{
	display: block; font-size: .8rem; font-weight: normal; margin-bottom: .5rem;
}
.item-detail h2 span[class*="icon-"]{
	width: 5rem; text-align: center;
}
.item-detail .like,
.item-detail .imageDL{
	width:20%; display: inline-block; float: right;}
.item-detail .like img,
.item-detail .imageDL img{width:50%;}
.item-detail .gallery {
  margin-bottom: 3rem;
}
.item-detail .gallery-cell {
  width: 80%;
  margin-right: 10px;
  background: #fff;
  text-align: center;
}

/* cell number */
.item-detail .gallery-cell:before {
  display: block;
  text-align: center;
  line-height: 200px;
  font-size: 80px;
  color: white;
}
.item-detail .gallery-nav .gallery-cell {
  /*height: 120px;*/
  width: 100px;
}
.item-detail .gallery-cell img{
	width: 100%;
}
.item-detail .gallery-nav .gallery-cell:before {
  font-size: 50px;
  line-height: 80px;
}
.item-detail .gallery-nav .gallery-cell.is-nav-selected {
  border: 1px solid #009cde;
}

.popup-menu-toggle {
  display: inline-block;
  padding: 0.5rem;
	float: right;
	width: 40px;
  text-decoration: none;
}

.order-info{width: 100%; border: 0;}
.order-info th{ font-size: .7rem;}
.order-info td{ padding-top: 0 !important;}
.order-info .stock{ width: 20%; text-align: center;}
.order-info .price{ width: 60%; text-align: center; font-size: 1.2rem;}
.order-info .price span{font-size: .7rem; display: inline-block; margin-right:1rem; border: 1px solid #ccc;}
.price.sale{color: #ff6666; font-weight: bold;}
.order-info .price.sale strong,
.ranking-list li .price.sale strong,
.favorite-list li .price.sale strong{color: #ccc; text-decoration: line-through; font-weight: normal;}
.order-info .quantity{ width: 20%;}
.order-info .quantity-unit{
	width: 100%; margin: 0 auto;
	display: block; text-align: center;
}
.order-info .quantity-unit a{
	width: calc(88%/2); display: inline-block;
	margin: 0 1%; padding: 3%;
	background-color:#e7e7e7; border-radius: 4px;
}
.cart-preview,
.text-box{
	width: 100%; clear: both; overflow: hidden;
	margin: 0 auto 1.5rem; padding: 1rem; 
	text-align: center; background-color: #f8f8f9;
	vertical-align: middle;
}

.text-box h3{font-size: .9rem; font-weight: normal; margin-bottom: 1.5rem;}
.cart-preview p {font-weight: bold;}
.text-box{ background-color: #fff; border: 1px solid #ccc;}
.text-box p,
.cart-preview table{width: 100%; text-align: left; font-size: .9rem; margin-bottom: 1rem;}
.cart-preview tr{border-bottom: 1px dotted #fff;}
.cart-preview th{padding: 2% 1rem 2% 0 ; font-weight: normal; vertical-align: top;}
.cart-preview .cancel {
	width: 10em; float: right;
	font-size: .7rem; margin-bottom: 1rem; display: block;}
.cart-preview .status{
	float: left; padding: 1% 2%; border: 1px solid #666; 
	font-size: .8rem;  font-weight: normal; border-radius: 4px;
	background-color: #fff;
}
.cart-preview{
	text-align: left;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.cart-preview .text-area{width: 70%; margin-right: 1em;}
.cart-preview .text-area span{display: inline-block; margin-right:.5rem; }
.cart-preview .text-area span#cartTensu{margin-left: 1rem;}
.cart-preview .text-area span#cartKei{margin-left: .5rem;}

.cart-preview .btn-area{width: 30%;align-self: flex-end;}
.cart-preview h3{font-size: .9rem; }
.cart-preview .btn-area .btn{
	width: 100%; display: block; 
	font-size: .9rem; line-height: 1.6rem; margin: 0 auto;
}

/* ---------------------
	profile
   ---------------------*/
.profile { width: 100%; text-align: left; margin-bottom: 3rem;}
.profile tr{ border-bottom: 1px solid #f2f2f2;}
.profile th{ 
	padding: 4% 1rem 4% 0; 
	font-size: .7rem; white-space: nowrap; vertical-align: top;
	color: #d3c7b0; border-bottom: 1px solid #d3c7b0;}
.profile td{ padding: 4% 1rem 4% 0; font-size: .9rem; vertical-align: top; line-height: 1.8;}
.profile td.btn-space{ width: 4.5em; padding-right: 0; vertical-align: bottom;}
.profile .btn.page-btn{ width: 100%; font-size: .6rem; border-color:#ccc; }

.note{width: 70%; margin: 0 auto; padding: 4% 4%; background: #f2f2f2; border-radius: 10px;}
.note h5{ color: #009cde;}
.note p{font-size: .7rem; line-height: 1.8}

.selectMail{
	width: 100%; padding: 4%; border: 1px solid #d3c7b0;
	border-radius: 10px;
}

.selectMail .caption{font-size: .7rem; padding: 0 0 1rem; border-bottom: 1px solid #d3c7b0; }

.mail-list {margin-bottom: 1rem; border-bottom: 1px solid #f2f2f2;}
.mail-list p{font-size: .7rem;}
.mail-list-title{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	 border-bottom: 1px dotted #f2f2f2;
	margin-bottom: .5rem;
}
.mail-list-title h4{display: block; color: #d3c7b0;}
.mail-list-title label{white-space: nowrap; margin-left: 1rem;}


/* ---------------------
	ranking / favorite
   ---------------------*/
/*タブ切り替え全体のスタイル*/
.select-tabs {
  margin-top: 50px;
  width: 98%;
  margin: 0 auto 3rem;
}
.select-tabs-in {
  width: 100%; display: table;
}
/*タブのスタイル*/
.tab_item{
  width: calc(99.8%/2);
  height: 3.5rem; line-height: 3.5rem; vertical-align: center;
  border: 1px solid #e8e8e8; border-bottom: none; margin-bottom: 0;
	border-radius: 10px 10px 0 0 / 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
  background-color: #fff;
  font-size: 1rem;
  text-align: center;
  color: #333;
  display: block;
  float: left;
  text-align: center;
  transition: all 0.2s ease;
}
.tab_item:hover { opacity: 0.75;}

/*ラジオボタンを全て消す*/
input[name="tab_item"]{
	display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	padding: 1.3rem .6rem 0;
	clear: both;
	overflow: hidden;
	background-color: #f8f8f9;
	box-shadow: 0 0 0 0 rgba(0,0,0,0), 0 0px 10px 0 rgba(0,0,0,0.2);
}

/*選択されているタブのコンテンツのみを表示*/
#first:checked ~ #first_content,
#second:checked ~ #second_content,
#third:checked ~ #third_content{
	display: block;
}

/*選択されているタブのスタイルを変える*/
.select-tabs input:checked + .tab_item {
color: #009CDE;
background-color: #f8f8f9;
border: 1px solid #f8f8f9;
border-radius: 10px 10px 0 0 / 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
}

/*展示会タブ用のスタイル*/
#favorite .tab_item {width: calc(99.8%/3);}
#favorite .tab_item a{display: block;}
#favorite.collection .select-tabs-in{margin: 0 auto; padding: 0;}
#favorite.collection .tab_item {width: calc(100%/3);}
#favorite.collection .tab_content{display: block;}
#favorite.collection .tab_item.select{
	color: #009CDE;
	background-color: #f8f8f9;
	border: 1px solid #f8f8f9;
	border-radius: 10px 10px 0 0 / 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
}
#favorite .favorite-list .like{width:20%; float: right;}
#favorite.collection .favorite-list .like{margin-left: .5rem;}

.brand-name{font-size: .7rem !important;}
.ranking-list{
  width: 100%; margin: 0; padding: 0;
  display: table;
}
.favorite-list{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	padding: 0;
	margin: 0;
}
.ranking-list li{
	width: calc(97%/2); margin-bottom: 1rem;
	position: relative;
	float: left; color: #666;
	display: inline-block;
}
.favorite-list li{
	width: calc(92%/2);
	overflow: auto; margin:0 2% 1rem;
	background-color: #fff; padding: 2% 3% 6%;
	border: 1px solid #f1f1f1;
}
.ranking-list li p,
.favorite-list li p{margin-bottom: .5rem;}
.ranking-list li .list-img{display: block; width: 100%; text-align: center; background: #fff; margin-bottom: .8rem;}
.ranking-list li .list-img img {max-width: 100%; max-height: 172px;}
.favorite-list li img{ margin-bottom: .8rem; width: 100%;}
.ranking-list li span > img { position: absolute; top: 0; left: 0; width: 20%;}
.ranking-list li:nth-child(odd){
	margin-right:3%; clear: both;
}
.favorite-brand-list {
	list-style: none;
	padding: 2% 0;
}
.favorite-brand-list li {
	width: 100%;
	position: relative;
	clear: both; background: #fff; vertical-align: middle;
	
	border-bottom: 1px solid #eeeeee;
	-moz-transition: background-color .3s linear;
	-webkit-transition: background-color .3s linear;
	transition: background-color .3s linear;
}
.favorite-brand-list li a {
	width: 100%; display: table;
	color: #333333; overflow: hidden;
	padding: 0 5% 0 0;
	text-decoration: none;
	vertical-align: middle;
}
.favorite-brand-list li p {
	width: 80%; padding-left: 1rem;
	display: table-cell; margin: 0;
	vertical-align: middle;
}
.favorite-brand-list li div{
	width: 15%; max-width: 100px;
	display: table-cell; vertical-align: middle;
}
.favorite-brand-list li div img{width: 100%;}
.favorite-brand-list li a:after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 18px;
	margin: auto;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	border-top: 1px solid #033560;
	border-right: 1px solid #033560;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
.favorite-brand-list li.delete-btn a:after {
	top: 26%;
	bottom: 0;
	right: 5%;
	width: 1.5rem;
	height: 1.5rem;
	background: url("../images/common/icon-close.svg") top left no-repeat;
	background-size: 100%;
	margin: 0;
	border: none;
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}

/* ---------------------
	news
   ---------------------*/
.news{
	margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 320px;
	background: #fff;
	padding: 4% 5%;
	border-radius: 10px;
	border:1px solid #eaeaea;
}
.news dl{ font-size: .75rem; line-height: 1.6; border-top: 1px dotted #ccc; padding-top: 1.5rem;}
.news dt{ margin-bottom: .5rem; font-weight: normal; color: #999;}
.news dd .title{width: 100%;}
.news dt span{
	width: 7em; display: inline-block; font-size: .6rem;
	padding: 0 1%; margin-left: 1rem; text-align: center !important;
	border-radius: 2px;
}
.news dd{ padding-bottom: .5rem; border-bottom: 1px dotted #ccc; margin-bottom: 1.5rem;}
.pc-news{ width: 16px; height: 16px; margin-left: 1rem;}
.banner img{margin-bottom: 1rem; width: 100%;}

main .news{ padding: 4% 0 0; height: auto; margin-bottom: 0; border: none;}

.banner.center { margin: 0 0 50px;}
.banner.center img { width: 100%; height: auto; margin-bottom: 0;}
.banner.center .slick-next { right: 20px; z-index: 99;}
.banner.center .slick-prev { left: 15px; z-index: 100;}

/* ---------------------
	download
   ---------------------*/
.download-list{
	width: 100%; clear: both; overflow: hidden;
	padding: 4% 4% 2%; margin: 1rem auto; border: 1px solid #eeeeee;
	border-radius: 10px;
}
.download-list li{
	position: relative; list-style: none; display: inline-block;
	margin: 0 2rem 1rem 2rem; line-height: 1rem;
}
.download-list li a{color: #009cde;}
.download-list li:before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left:-2rem;
	width: 1rem;
	height: 1rem;
	vertical-align: middle;
	background: url("../images/common/icon-file.svg") top left no-repeat;
	background-size: 100%;
}

/* ---------------------
	ファイルダウンロード
   ---------------------*/

.fileDL-list{width: 96%; padding: 0; margin: 0 auto; border-top: 1px solid #f1f1f1;}
.fileDL-list li{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	margin:0 auto 1rem;
	background-color: #fff; padding: 2%;
	border-bottom: 1px solid #f1f1f1;
}
.fileDL-list li .dl-text {width: 83%;}
.fileDL-list li .dl-text p{ margin-bottom: 1rem; font-size: .8rem;}
.fileDL-list li .dl-read{
	width: 100%;
	margin-top: 1rem; font-size: .8rem; border-top: 1px solid #f1f1f1;
	color: #999; padding-top: 2%;}
.fileDL-list li .dl-filename{
	padding: 2%; font-size: .7rem !important; border: 1px dotted #009cde; border-radius: 10px;
	display: table; width: 100%;
}
.fileDL-list li .dl-filename:hover{cursor:pointer; background-color: #ecf4fc; transition: 0.15s; opacity: 1;}
.fileDL-list li .dl-filename a:hover{opacity: 1;}
.fileDL-list li .dl-filename p{margin-bottom: 0;}
.fileDL-list li .dl-filename .date{ color: #ccc; display:block; margin-top: .5rem;}
.fileDL-list li .dl-dataname{display: table-cell; width: 100%; color: #009cde;}
.fileDL-list li .dl-data {
	width: 100px; font-size: .6rem; text-align: center; display: table-cell;
	overflow: hidden; clear: both; vertical-align: middle; padding-right: 1rem;
}
.fileDL-list li .dl-img{width: 15%; margin-right:2%; color: #009cde;}
.fileDL-list li .dl-img img{width: 100%; }
.fileDL-list li img[src*="icon-download"]{width: 30px;}


.fileDL-menu {
	list-style: none;
	padding: 2% 0;
}
.fileDL-menu li {
	width: 100%;
	position: relative;
	clear: both; background: #fff; vertical-align: middle;
	border-bottom: 1px solid #eeeeee;
	-moz-transition: background-color .3s linear;
	-webkit-transition: background-color .3s linear;
	transition: background-color .3s linear;
}
.fileDL-menu li strong{width: 100%; font-weight: normal; display: block;}
.fileDL-menu li a {
	width: 100%; display: block;
	color: #333333; overflow: hidden;
	padding: 2% 2% 2% 16%;
	text-decoration: none;
	vertical-align: middle;
}
.fileDL-menu li a:hover{background-color: #ecf4fc; opacity: 1;}
.fileDL-menu li span {
	padding-left: 0;
	display: inline-block; margin-right: 1rem;
	vertical-align: middle; color: #ccc;
	font-size: .8rem;
}
.fileDL-menu li a:before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 1.4rem;
	margin: auto;
	vertical-align: middle;
	width: 1.5rem;
	height: 1.5rem;
	background: url("../images/common/icon-folder.svg") top left no-repeat;
	background-size: 100%;

}
.fileDL-menu li a:after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 18px;
	margin: auto;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}


/* ---------------------
	SP非表示
   ---------------------*/
aside,
.hihouji {display: none;}


/* Tablet */
@media screen and (min-width: 600px) {
/* ---------------------
	login
   ---------------------*/
.login-contents{ width: 40%; padding: 4%;}
.login-contents img{width: 80%; margin-bottom:1rem;}
.login-contents h1{font-size:.8rem; margin-bottom:2rem;text-align: center;}

/* ---------------------
	base-Tablet
   ---------------------*/
.global-head { padding: 1.5%;}
.brand-logo  { width: 27%;}
.hd-news { width: 4%;}
.hd-cart { width: 4%;}
	
.global-nav a {
	padding: 15px 14% 15px 5%;
	font-size: 1rem;
	border-bottom: 1px solid #eeeeee;
}
.global-nav .sub-menu-nav a{padding-left: 7%;}
.global-nav > ul > li a:after{
	right: 2.5%;
	width: 8px;
	height: 8px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
}
main{ margin:10% 0;}
.footer-nav { max-height: 88px; padding: 1% 0;}
.footer-nav li img {height: 30px;}
/*.footer-nav li img {width: 24%;}
.footer-nav li img[src*="icon-ranking"] {width: 29%;}*/
	
/* ---------------------
	btn-Tablet
   ---------------------*/
.btn-area > input{width: 4rem;}
/* ---------------------
	search page-Tablet
   ---------------------*/
.btn.page-btn { width: 7rem;}
.search-box label.search-acclabel > img {width: 4%;}
	
/* ---------------------
	product index page-Tablet
   ---------------------*/
.like img,.imageDL img{ width: 25%; max-width: 30px;}

.productList{ font-size: 1rem;}
.productList td{ margin: 1%;}
.productList td p{ margin-bottom: .25rem; font-size: 1rem;}
.productList .overview{ width: 56%;}
.productList.order-detail .overview{width: 68%;}
.productList .overview-tit .overview-link{width: 15%;}
.productList .overview-tit .overview-link .youtube span{display: block; font-size: .7rem; text-align: center;}
.productList .photo img{ width: 70%;}
.productList .stock{ font-size: .8rem;}
.overview-contents{ font-size: .9rem; padding-left: 8em;}
.overview-contents dt{ font-size: .7rem; line-height: 1.8; width: 9em; margin-left:-10em;}
.order-data dt.code{ clear: none;}

.zan-info td{ font-size: .9rem;}
.item-detail h2{ font-size: 1.2rem;}
.item-detail .like,
.item-detail .imageDL{width:15%;max-width: 76px;}


/* list */
.brandList > li{width:18.4%;}
.brandList > li:nth-child(4n) {margin-right: 2%;}
.brandList > li:nth-child(4n+1){clear: inherit;}
.brandList > li:nth-child(5n) {margin-right: 0;}
.brandList > li:nth-child(5n+1){clear: both;}

/* carousel-Tablet */
.carousel li {flex: 0 0 25%;}
	
/*---------------------
  ranking page-Tablet
  ---------------------*/
.ranking-list li{ width: calc(91%/4); margin-bottom: 1rem; margin-right:3%; display:table-cell; overflow: hidden;}
.ranking-list li:nth-child(odd){clear: inherit;}
.ranking-list li:nth-child(4n){margin-right:0;}
.ranking-list li:nth-child(4n+1){clear: both;}
.ranking-list li .list-img img { max-height: 115px;}
	
.favorite-list li{width: calc(92%/4); margin: 0 1% 1rem; padding: 1%;}
.favorite-brand-list li.delete-btn a:after {top: 40%;}
	
/*---------------------
  fileDL page-Tablet
  ---------------------*/
.fileDL-menu li a {
	padding: 2% 2% 2% 10%;
}
.fileDL-menu li a:before{
	width: 1.8rem;
	height: 1.8rem;
}
}
/* PC */
@media screen and (min-width: 1024px) {

/* ---------------------
	base-PC
   ---------------------*/
main {
	width: 55%;
	margin: 0 27% 0 18%;
	padding: 120px 0 0 0;
}
/* login */
.login-contents{
	width: 30%;
	padding: 30px 24px;
	max-width: 320px;
}
/* header */
.global-head {
	position: fixed; left: 0; 
	color: #033560; width: 100%; max-height: 90px;
	text-align: left; z-index: 600;
}
.brand-logo{ margin: 0; display: inline;}
.brand-logo img{ width: auto; max-width: 180px;}
.hd-cart{ width: 3%; max-width: 35px;}
.hd-news{ display: none;}
#site-header{ background: rgba(255,255,255,1);}
.head-animation { transform: none;}

.global-side{
	position: fixed; left:  0;
	width: 16%; padding-top: 120px; height: 100%;
	/*box-shadow: 0 0 12px 0 rgba(0,0,0,0.1), 0 8px 0 0 rgba(0,0,0,0.1);*/
	background-color: #f8f8f9;
	border-right: 1px solid #e8e8e8;
}
.global-nav a {
	padding: 15px 14% 15px 10%;
	font-size: .85rem;
	}
.global-nav > ul > li a:after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 18px;
	margin: auto; margin-left: .5rem;
	vertical-align: middle;
	width: 7px;
	height: 7px;
	border-top: 2px solid #e8e8e8;
	border-right: 2px solid #e8e8e8;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
.global-nav .sub-menu-nav a {
	padding-left: 16%; 
}


aside{ position: fixed; right: 0; width: 25%; display: inline; padding-top: 120px ;}
aside img{ width: 100%;}
	
/* ---------------------
	profile
   ---------------------*/
.profile th{ width: 20%; padding: 2% 1rem 2% 0; }
.profile td{ width: 60%; padding: 2% 1rem 2% 0; }
.profile td.btn-space{ width: 20%;}
	
/* ---------------------
	btn-PC
   ---------------------*/
.btn{ width: 35%; font-size: 1em; line-height: 3rem;}
.btn span[class*="icon-"]:before{ top: 24%;}
.btn.search-btn,
.btn.mail-btn{width: 40%;}
.select-btn{
	line-height: 2.5rem;
	padding-left: 2.5rem;
	margin-right: 1rem;
}
.select-btn span[class*="icon-"]:before{
	width: 2.5rem;
}
	
/* ---------------------
	search page-PC
   ---------------------*/
.number p{margin-right: 1rem;}
.number .number-select,
.date-select{width: 30%;}
.number .term-select{width: 20%; margin-right: 1rem; }

.brand-bulletlist li {
	width:calc(96%/2); display: table-cell; 
	float: left; margin-right: 4%;
}
.brand-bulletlist > li:nth-child(n) {padding-right: 0;}
.brand-bulletlist > li:nth-child(2n) {margin-right: 0;}
.brand-bulletlist > li:nth-child(2n+1){clear: both;}
.brand-bulletlist li p {
	width: 78%; padding-left: 1rem;
	display: table-cell; margin: 0;
	vertical-align: middle;
	font-size: .9rem;
}
.brand-bulletlist li div{
	max-width: 100px;
}
.sticky{
	bottom: 0;
}
.cart-preview .text-area span{display: inline-block; margin-left: 1em;margin-right:0;}
.cart-preview .text-area span#cartItemCnt{margin-left:0;}

/*---------------------
  favorite page-PC
  ---------------------*/
#favorite .favorite-list .like{width: 15%; max-width: 75px; float: right; margin-left: 0;}

/*---------------------
  product index page-PC
  ---------------------*/
.productList .overview-tit{align-items: center;}
.productList .overview-tit .overview-link{width: 13%;}
.productList .overview-tit .overview-link img{max-width: 30px; margin-bottom: 4%;}
.productList .overview-tit .overview-link .youtube span{display: block; font-size: .7rem; text-align: center;}
.productList .overview.zan{width: 76%;}
.item-detail .gallery-cell {width: 50%;}

img[src*="cart-step"]{width: 50%; margin-bottom: 2rem; }

/*---------------------
  fileDL page-PC
  ---------------------*/
.fileDL-menu { padding: 2% 0;}
.fileDL-menu li strong {width: 60%; font-weight: normal; display: inline-block;}
.fileDL-menu li a {display: table; padding-left: 8%;}
.fileDL-menu li span {width: 20%; display: inline;}
.fileDL-menu li a:before {left: .7rem; width: 1.5rem; height: 1.5rem;}
.fileDL-menu li a:after {right: 18px; width: 8px; height: 8px;}

	
/* ---------------------
	PC非表示
   ---------------------*/
#nav-toggle,
.footer-nav,
.sns,
.pc{display: none;}

}

/* S5 */
@media screen and (max-width: 360px) {
.ranking-list li .list-img img { max-height: 145px;}
}