@charset "utf-8";

/* CSS Document */


/*■ベースはスマートフォン■*/

body {
  margin: 0  auto;
  padding: 0;
  width: 100%;
  height: auto;
  overflow-x: hidden;
  background: #ebdfd9;
}

* {
box-sizing:border-box;
}
a {
  width: 100%;
  display: block;
  text-decoration: none;
  color: inherit;
}

#whiteday {
  text-align: center;
  background: #FFF;
  width: 100%;
  max-width:1000px;
  padding: 0 0 3% 0;
  margin:0 auto;
  overflow-x:hidden;
}
ul li {
  vertical-align: top;
  text-align: left;
}
ul li img {
  padding: 3% 0;
}
ul li b {
  font-size: 1.3em;
  display: block;
}
#whiteday ul li hr {
  display: none;
}
ul.item2 {
  margin: 5% auto;
}
div#whiteday ul.item5 li div.saleitem div.saleitem_3 {
  display: none;
}
div#whiteday ul li div.saleitem div:first-of-type::after {
  content: "RINRE";/* タイトル変更 */
  background: #ec8e49;
  display: block;
  color: #FEFEFE;
  font-size: 1em;
  font-weight: normal;
  text-align: center;
  border-radius: 3px;
  padding:2% 1%;
 
}
div.saletitle_2018 {
  text-align:center;
}

div#whiteday ul li p.brandname::before {
  content: "SALE";/* タイトル変更 */
  background: #46372c;/* 各商品の帯色 */
  display: block;
  color: #FEFEFE;
  font-size: 1em;
  font-weight: normal;
  text-align: center;
  border-radius: 3px;
  padding:2% 1%;
  min-height:10px;
 
 
}



p.left {
font-size: 1em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */text-align: left
}

.midashi {
  display: flex;
  align-items: center;
}
.midashi:before, .midashi:after {
  content: "";
  flex-grow: 1;
  height: 1px; /* 線の太さを変えたいときはここを変える */
  background: #000; /* 線の色を変えたいときはここを変える */
  margin:0 .4em; /* 文字と線の余白用 なくても良い */
}



.midashi1{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
position: relative;
padding: 0.6em;
margin-bottom: 2em;
background-color: #46372c;/* 背景色 */
color:#ffffff;/* フォント色 */
}

.midashi1:after {
position: absolute;
content: '';
top: 99%;
left: 25px;
width: 0;
height: 0;
border: 15px solid transparent;
border-top: 15px solid #46372c;
}



h1 {
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  border-top: 3px solid #46372c;/* カラー変更　タイトル上部ラインの色 */
}

h1:before {
  position: absolute;
  top: -150%;
  left: -100px;
  width: 200px;
  height: 400%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: #46372c;/* カラー変更　タイトル数字背景色 */
}

h1 span {
  font-size: 40px;
  font-size: 3.5rem;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 3px;
  padding-left: 16px;
  color: #fff;
}



h2 {
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
}

h2:before,
h2:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 4px;
  content: '';
  border-top: solid 2px #000;
  border-bottom: solid 2px #000;
}

h2:before {
  left: 0;
}

h2:after {
  right: 0;
}


h3 {
  font-size: 40px;
  font-size: 2.5rem;
  border-bottom: 3px dotted #000;
}




.hr {
border-width: 3px 0 0 0;
	border-style: dotted;
	border-color: #206465;/* カラー変更　破線 */
}


/* カラー変更　テキストリンク */
div.rinku {
background:#FFF; font-size:1.0em;
color:#206465; border:1px solid #206465;
min-height:10px; width:60%;
margin:3% auto 5% auto;
}
div.rinku a {display:block; padding:2%}
div.rinku {font-size:1.2em; }

/* カラー変更 価格別テキストリンク */
div.rinku2 {
background:#FFF; font-size:1.0em;
color:#206465; border:1px solid #206465;
min-height:10px; width:45%;
margin:3% auto 5% auto;
}
div.rinku2 a {display:block; padding:5%}
div.rinku2 {font-size:1.2em; }


/* div横並び用 */

main {
  display: flex;
  flex-wrap: wrap;
}

main div {
  width: 20%;
}


/* バナー下のナビ未使用 */
.item-list{
  display: flex;
  justify-content: center; /* 中央寄せ */
}
.item-list .item{
  box-sizing: border-box;
  padding: 40px 80px;  
}

/* 装飾用 */

.item{
　color: #ffffff;
  background: #9b002d;
  margin: 10px;
　font-size: 20px;
  font-size: 2rem;

}


/* マウスオーバー時の変色 */
.tes-link a:hover {
  color: #ffffff;
  background: #206465;
}

/* マウスオーバー時の画像を明るく */
.img_wrap{
  width: 300px;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.3s;
}
.img_wrap:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}




/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
■PC用■
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (min-width: 768px) {




 /*■消さない■*/
}

/*■消さない■*/


/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
■item.css引用■
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
/* CSS Document */
/*■原則改変しない■*/

/*タグ掲載・商品リスト設定
ULのクラスに
【item】+【item_pc●】+【item_sp●】の3つをスペース区切りで指定する
PCとSPの並び個数をそれぞれ●の数字で制御します
挙動がおかしければ聞いてください

※画像だけの場合は【item_image】クラスを追加でボーダーを除去

※セットもあるよ
【item】+【item_set●】でスペース区切りで指定する
これはPC/SPの並び固定なので気を付けて(PCとSPのクラスはいらない)

※おまけクラス…追加でデザイン変更
【item_redprice】 価格を赤字に
*/



ul.item_box * { box-sizing:border-box;}
ul.item_box {margin:15px 0 ;font-size:0; padding:0; width:100%;list-style:none;}
ul.item_box, ul.item_box li {box-sizing:border-box; text-align:center;}
ul.item_box li {display:inline-block; font-size:13px; padding:10px 10px 0 10px; background:#FFF; position:relative; margin:0;}
ul.item_box li::after  {content:"";display:block; width:100%; border-bottom:1px solid #CCC;}
ul.item_box li+ li {border-left:1px solid #CCC;}

ul.item_box li p {margin:0 auto; padding:1%; text-align:center; font-family:"Century Gothic", Futura, sans-serif;}
ul.item_box li p.brandname {font-size:1.0em; line-height:1.4em; margin-top:5px;}
ul.item_box li p.price {font-size:1.5em; font-weight:normal; padding-bottom:10px;}
ul.item_box li p.price::before {content:"\0a5"; margin-left:-0.28em;}/*円マーク*/
ul.item_box li a {text-decoration:none; color:inherit;}
ul.item_box li a:hover {opacity:0.7;}
ul.item_redprice li p.price {color:#D00;}
ul.item_image li::after, ul.item_image li+ li, ul.item_image li {border:none;padding:2px; background:none;}

ul.item_box li div.event {display:block;font-size:1.2rem; border-top:4px double #222; text-align:left; padding-bottom:5px;}
ul.item_box li div.event span.label {display:inline-block; color:#FFF; margin:3px 6px 3px 3px;  background:#E33; padding:5px 10px; border-radius:5px;}

@media screen and (max-width: 768px) {
/*SP用リスト設定
SPは1～3個並びまで

※右側に1px余白でボーダーを引いてるのを改行時点で調整(border-right:1px solid #CCC;）
*/
ul.item_sp1 li {width:100%; border-left:none; font-size:1.7rem;border-left:none;}

ul.item_sp2 li {width:50%; font-size:1.2rem;}
ul.item_sp2 li:nth-child(2n+1) {border-left:none;}

ul.item_sp3 li {width:33%; font-size:0.9rem;}
ul.item_sp3 li:nth-child(3n+1) {border-left:none;}
}
@media screen and (min-width: 768px) {
/*PC用リスト設定
PCは2～6個並びまで

※左側に1px余白でボーダーを引いてるのを改行時点で調整(border-left:none;）
*/
ul.item_pc2 li {width:50%; font-size:1.5rem;}
ul.item_pc2 li:nth-child(2n+1) {border-left:none;}

ul.item_pc3 li {width:33%; font-size:1.3rem;}
ul.item_pc3 li:nth-child(3n+1) {border-left:none;}

ul.item_pc4 li {width:25%;}
ul.item_pc4 li:nth-child(4n+1) {border-left:none;}

ul.item_pc5 li {width:20%;}
ul.item_pc5 li:nth-child(5n+1) {border-left:none;}

ul.item_pc6 li {width:16.6%;}
ul.item_pc6 li:nth-child(6n+1) {border-left:none;}


}
/*PC・SPセットリスト設定
便利なセットタイプ

item_set1　⇒SP2、PC4
item_set2　⇒SP3、PC6

*/
@media screen and (max-width: 768px) {
ul.item_set1 li {width:50%; font-size:1.2rem;} /*　SP2並び　*/
ul.item_set1 li:nth-child(2n+1) {border-left:none;}
ul.item_set2 li {width:33%;  font-size:0.9rem} /*　SP3並び　*/
ul.item_set2 li:nth-child(3n+1) {border-left:none;}
ul.item_set3 li {width:50%;  font-size:1.2rem} /*　SP2並び　*/
ul.item_set3 li:nth-child(3n+1) {border-left:none;}

}

@media screen and (min-width: 768px) {
ul.item_set1 li {width:24.5%;}
ul.item_set1 li:nth-child(4n+1) {border-left:none;}
ul.item_set2 li {width:16.6%;border-left:none;}
ul.item_set2 li:nth-child(6n+1) {}
ul.item_set3 li {width:50%;border-left:none;} /*　PC2並び　*/
ul.item_set3 li:nth-child(2n+1) {border-left:none;}

}