@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Oswald);
@font-face {
  font-family: "ヒラギノ角ゴ Pro W6";
  src: url(/preview/fonts/hirakakupro/ufonts.com_hirakakupro-w6-opentype.otf);
}
@font-face {
  font-family: "ヒラギノ角ゴ Pro W3";
  src: url(/preview/fonts/hirakakupro/ufonts.com_hirakakupro-w3-opentype.otf);
}


/* CSS RESET*/
html, body, div,iframe, h1, h2, h3, h4, h5, h6,
p, a, img, dl, dt, dd, ol, ul, li, form, label, table, tr, th, td,
article, aside, footer, header, hgroup, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-weight: normal;
}
html{ overflow-y:scroll; }
body{
	color: #333;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS PGothic,sans-serif;
  height: 100%;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

img	{
	border:none;
}

/* 全ページ共通
--------------------------------------------------------------*/
#ss-wrap{
	overflow: hidden;
	width: 100%;
	position: relative;
	/*padding-bottom: 45px;*/
	padding-bottom: 60px;
	font-family: "ヒラギノ角ゴ Pro W3";
}

/** header **/
/*非表示項目*/
#ss-anchors,
#page-top,
/*.ss-no-stock, 在庫なしでも表示する*/
.ss-area-string,
.ss-item-name-header,
.ss-brand-name-header,
.ss-item-price-header,
.ss-item-price,
.ss-item-code-header{
	display: none !important;
}
option.ss-no-stock{
  display: block important;
}
.ss-store-wrap{
  width: 100%;
  font-size: 14px;
	/*display: none;*/
}
.ss-header-child-h1:after{
	/*content: "取り扱い店舗一覧";*/
	display: block;
	font-size: 13px;
	padding: 0 0 10px 0;
	font-family: "ヒラギノ角ゴ Pro W6";
}
.ss-header-child-h1{
	font-family: 'Oswald';
	font-size: 30px;
	font-weight: 700;
	/*margin: 0 auto 40px auto;*/
	padding: 10px 0 0 0;
	border-bottom: 1px solid #000;
}

.ss-header-child{
	margin: 0 auto;
	width: 700px;
  padding: 0 15px 0 15px;
}
/** ss-content **/
.ss-content{
	padding: 0 15px 40px 15px;
	max-width: 700px;
	width: auto;
	margin: 0 auto 30px auto;
}
.ss-detail-content{
	overflow: hidden;
	width: 100%;
  position: relative;
  /*display: flex;*/
}
.ss-item{
  width: 65%;
  /*text-align: left;*/
  margin-top: 60px;
  float: left;
}
.ss-store-area{
	border-bottom: 1px #dedede solid;
	cursor: pointer;
}
.ss-store.ss-has-stock{
	border-bottom: 1px #dedede solid;
}
.ss-not-stock-all{
  margin-top: 50px;
}

/**商品情報**/
/**ブランド名**/
.ss-brand-name{
  font-size: 18px;
	margin-bottom: 5px;
}
/**商品名**/
.ss-item-name{
	font-size: 18px;
  margin-bottom: 10px;
}

.ss-item-name-content{
	display: inline-block;
	font-size: 19px;
	font-family: "ヒラギノ角ゴ Pro W6";
	letter-spacing: 0px;
  line-height: 33px;
  width: 400px;
}

/**品番**/
.ss-item-no{
	margin-bottom: 15px;
	font-size: 14px;
}
.ss-item-code-header{
  font-size: 13px;
}
.ss-item-code-content:before{
  content: "品番：";
  font-size: 13px;
}
.ss-item-code-content{
	display: inline-block;
}

/**価格**/
.ss-item-price{
	margin-bottom: 10px;
}
.ss-item-price-content{
    font-size: 24px;
}
.ss-item-price-content:before{
	content: "¥";
	font-size: 24px;
}
.ss-item-price-content:after{
  content: "(税込)";
	font-style: normal;
  font-weight: 500;
	margin-left: 5px;
	font-size: 14px;
}

#ss-color-select{
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS PGothic,sans-serif;
	padding: 10px 10px;
	border-radius: 3px;
	width:400px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px #dedede solid;
	background: url('/preview/images/store_stock/selector-btn2.jpg') right 10px top 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#fff 100%);
	background: url('/preview/images/store_stock/selector-btn2.jpg') right 10px top 50% no-repeat, linear-gradient(to bottom, #fff 0%,#fff 100%);
  line-height: 16px;
}

/**在庫部分**/
.ss-has-stock-small{
}


/*閉じるボタン */

/**アンカー**/
.ss-no-shop{
  font-size: 14px;
}
.ss-area-anc{
  font-size: 14px;
}
.ss-anchor .ss-area-anc-name {
	border-right: 1px #000 solid;
	padding-right: 10px;
	padding-left: 10px;
}

/*セレクタ*/
.ss-select-form:before{
	/*content: "カラーとサイズを選ぶと各店舗の在庫情報が表示されます";*/
	letter-spacing: 0px;
	font-size: 13px;
  display: inline-block;
  margin-left: 15px;
	margin-top: 15px;
  margin-bottom: 15px;
}
.ss-select-form{
	display: block;
	width: 100%;
	/*background: #dcdcdc;*/
	overflow: hidden;
	text-align: left;
}
/*-----20210702 a.miura 追加-----*/
.colors{
    padding: 25px 0 10px;
}
.labels-part{
    font-family: "NeueHaasGroteskDisp W01",sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px
    line-height: 14px;
    padding: 10px 0 5px;
    text-transform: uppercase;
    width: 100%;

    align-content: initial;
    align-items: initial;
    bottom: inherit;
    display: block;
    flex-wrap: initial;
    width: 100%;
}
.color-name{
    display: inline;
    letter-spacing: .6px;
    max-width: inherit;
    padding-left: 10px;

    font-size: 12px;
    font-family: "NHaasGroteskDSW01-65Md",sans-serif;
    line-height: 14px;
    text-transform: none;
    font-weight: 700;
    width: 100%;

}
.color-list,.size-list{
	list-style: none;
    margin: 8px 0;
    width:calc(100% - 65px);
    height:45px;
    left:30px;
    white-space: nowrap; /*改行しない*/
    position:  relative; 
}
.ss-color-chip-image{
    border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
    width:  45px;       /* ※縦横を同値に */
    height: 45px;       /* ※縦横を同値に */
    margin-left: -10px;
}
.ss-color-chip-image-mouseenter{
    border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
    width: 37px;
	height: 37px; 
	padding: 2px;
	border: solid 2px black;
	margin-left: -10px;
}
/* ラジオボタンの○を消す */
input[type="radio"] {
   display: none;
   opacity: 0;
}

/* サイズセレクタの周りに隙間をあける */
label span {
 /* margin: 3px;*/
}
/* 【サイズ】選択済みの場合 */
input[type="radio"]:checked + label span {
	background-color: black;
	color: white;
}
.size-circle{
    display: inline-block;/* ←忘れない！ */
    width: 45px;
    height: 45px; 
    background-color: white;
    color: black;
    border-radius: 50%;/* ←円を作る */
    margin: 0 auto;/* ←円を中央揃え */
    margin-left: -10px;
    text-align: center;/* ←文字を左右に中央揃え */
    line-height: 45px;/* ←文字を上下に中央揃え */
}
.size-circle-mouseenter{
    display: inline-block;/* ←忘れない！ */
    width: 45px;
    height: 45px; 
    background-color: silver;
    color: black;
    border-radius: 50%;/* ←円を作る */
    margin: 0 auto;/* ←円を中央揃え */
    margin-left: -10px;
    text-align: center;/* ←文字を左右に中央揃え */
    line-height: 45px;/* ←文字を上下に中央揃え */
}
.size-circle-selected{
    display: inline-block;/* ←忘れない！ */
    width: 45px;
    height: 45px; 
    background-color: black;
    color: white;
    border-radius: 50%;/* ←円を作る */
    margin: 0 auto;/* ←円を中央揃え */
    margin-left: -10px;
    text-align: center;/* ←文字を左右に中央揃え */
    line-height: 45px;/* ←文字を上下に中央揃え */
}
.slick-prev.slick-disabled:before {
  	content: '<';
	background-color: rgba(0,0,0,0);
	color: gray;
	font-weight: bold;
}
.slick-prev:before {
	content: '<';
	font-size: large;
	background-color: rgba(0,0,0,0);
	color: black;
	font-weight: bold;
}
.slick-next:before {
	content: '>';
	font-size: large;
	background-color: rgba(0,0,0,0);
	color: black;
	font-weight: bold;
}
.slick-next.slick-disabled:before {
	content: '>';
	font-size: large;
	background-color: rgba(0,0,0,0);
	color: gray;
	font-weight: bold;
}
.slick-arrow {
  position: absolute; /*絶対配置*/
  top: 0;
  bottom: 0;
  margin: auto;
}
.slick-prev {
  left: -30px;
  z-index: 10; /*重なり順*/
}
.slick-next {
  right: -35px;
  z-index: 100;
}
button {
    appearance: auto;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    background-color: white;
    box-sizing: border-box;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 6px;
    border-width: 0px;
    border-style: outset;
    border-color: white;
    border-image: initial;
    border-radius: 50%;
    width: 30px;
    height: 30px; 
}
button:hover {
    background-color: silver;
    border-radius: 50%;
    width: 30px;
    height: 30px; 
}

/*-------------------------------*/
.form-group{
	margin-bottom: 15px;
}
.ss-product-image-wrap{
	width: calc(30% - 30px);
	margin-right: 10px;
	float: left;
	margin-left: 10px;
	margin-top:10px;
	margin-bottom: 5px;
}

.ss-product-image{
	width: 90%;
	height: auto;
}

/**店舗部分**/
.ss-place-table.ss-has-stock:first-child{
  border-top: 1px #ddd solid;
}

.ss-store-area{
	padding-top: 10px;
	padding-bottom: 10px;
}
.ss-store{
	display: table;
  width: 96%;
	width: calc(100% - 30px);
	position: relative;
	padding: 10px 15px;
}
.ss-store-name-child a{
	color: #000;
}
.ss-main{
	margin-top: 15px;
	width: 100%;
}
.ss-memo:first-line{
	color: #ff0000;
	font-size: 12px;
	line-height: 23px;
	letter-spacing: 1.2px;
	margin-bottom: 70px;
}
.ss-memo{
	/*color: #ff0000;*/
	font-size: 12px;
	line-height: 23px;
	letter-spacing: 1.2px;
	margin-bottom: 70px;
}

.ss-store-name{
	width: 40%;
	display: table-cell;
}
.ss-store-stock{
	width: 25%;
	text-align: right;
	display: table-cell;
}
.ss-store-info{
	width: 20%;
	text-align: right;
	display: table-cell;
}
.ss-store-info a{
	color : #000;
}

.ss-brand-name-main{
  display: none !important;
	/*font-size: 18px;
	display: inline-block;
	padding-bottom: 10px;
	width: 100%;
	border-bottom: 1px #dedede solid;*/
}


/* レスポンシブデザイン用
---------------------------------------------------------------*/
@media (max-width: 640px) {
	.ss-item{
	}
	.ss-content{
		width: auto;
		padding: 0 15px 40px 15px;
	}
	.ss-header-child-h1{
		font-size: 34px;
    padding: 0 15px;
	}
	.ss-header-child-h1:after{
	}
	.ss-header-child{
		padding : 0;
		width: auto;
	}
	.ss-detail-content .ss-item{
		float: left;
		margin-top: 10px;
	}
	.ss-brand-name{
		font-size: 15px;
    /*margin-bottom: 45px;*/
		/*margin-bottom: 7.5%;*/
	}
	.ss-brand-name-content{
	}
	.ss-item-name-content{
		font-size:17px;
		line-height: 150%;
		width: 100%;
		word-wrap: break-word;
	}
	.ss-item-no {
		margin-bottom: 10px;
	}
	.ss-item-name {
    /*margin-bottom: 4.5%;*/
  }
	.ss-item-price{
		margin:0;
	}
	.ss-select-form{
		overflow: hidden;
		position: static;
	}
	#ss-color-select{
		padding: 15px 10px;
		width: 100%;
		min-width: 100%;
	}

	.ss-memo{
		/*margin-bottom: 30px;*/
	}


}