@charset "UTF-8";

#container{width:1000px; height:auto; background-color: #ffffff; margin:0 auto;
  display: -ms-grid;
  display: grid; -ms-grid-rows: auto; grid-template-rows: auto; -ms-grid-columns: 200px 780px; grid-template-columns: 200px 780px;}

/* right-main右側のコンテンツグリッドレイアウト */
#right-main {-ms-grid-row: 1;-ms-grid-row-span: 1;grid-row: 1 / 2; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2 / 3; margin-left: 20px; }

/* レフトナビ部分グリッドレイアウト  */
#left-side {-ms-grid-row: 1;-ms-grid-row-span: 1;grid-row: 1 / 2; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1 / 2; font-size: 14px;}
a {text-decoration: none; color:#000000;}
a:hover { opacity: 0.8; filter: brightness(110%); text-decoration: none; color:#000000;}

/* ヘッダー */
.header_back{width:100%; height:60px; background-color: #000000; min-width: 1000px;}
.header_content{width:1000px; height:60px; background-color: #000000; color:#ffffff; font-size: 14px; margin: 0px auto; white-space:nowrap; min-width: 1000px;}
.header_content{ display: flex; justify-content:space-between; flex-wrap: wrap; align-items: center;}
.header_content a {color:#ffffff;}
.header_content:hover {color:#ffffff;}
.header_content:active {color:#ffffff;}

/* ヘッダー内要素 */
.top_logo{width:60px; vertical-align: middle; text-align:center; margin-top:5px; margin-left:30px; margin-right:170px;}
.top_logo_img{width:55px; padding-bottom: 4px;}
.top_new_member{height:22px; margin-right: 15px;}
.top_mail_member{height:22px; margin-right: 15px;}
.top_login{height:22px; margin-right: 15px;}
.top_mypage{height:22px; margin-right: 15px;}
.top_coupon{height:22px; margin-right:100px;}
.top_favorite{flex-basis:35px; height:60px;}
.top_fab_icon{flex-basis:28px; margin-top:16px;}
.top_cart{flex-basis:40px; height:60px; position: relative;}
.top_cart_icon{width:28px; margin-top:17px;}
span.fs-client-cart-count { width: 20px; height: 20px; background-color: red; font-size: 12px; border-radius: 50%; text-align: center; display: block; line-height: 20px; position: absolute; top: 5px; right: -5px;}
button.btn.btn-link { height: 53px;}
.top_menu{ height:60px; vertical-align: middle; margin-left:-5px;}
.top_menu_icon{width:28px; margin-top:10px; overflow: hidden;}
.text1 { position: relative;}

/* ドロップダウンメニュー */

.dropdown-menu{ margin-top:10px; border-top-left-radius: 0px; border-top-right-radius: 0px; height:auto; 
  position: relative;　
  top: 4px;
  right: 1px;
  width: 990px;
  margin: 55px auto;
  padding: 30px 20px 20px 35px;
  background: #ffffff;
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6));
}

.dropdown:hover .dropdown-menu { display: block;}
.dropdown-menu { position: absolute; top: 4px; right: 1px;}
  .h6{ width:160px; height:25px; font-size:13px; padding: 3px; border:none; color: #000000; text-align: left; margin: 0 auto; border-top-left-radius: 10px; border-top-right-radius: 10px;}
  .nav { border:none; color: #000000; font-size:0.8em; text-align: center; margin: 0 auto; margin-top: 10px; margin-left: 5px;}
  .nav li{ width:160px; border:none; text-align: left; margin: 0 auto; padding: 3px 0 3px;}
  .nav li a{ border:none; color: #000000;} 
  .nav li a:hover {color:#666666;}

/* ヘッダーナビのグリッドレイアウト */
  .flex-column{
    height: auto;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;
    grid-template-columns: repeat(5, 1fr);
    -ms-grid-rows: 600px 10px 600px 10px 600px 10px 600px 10px 600px;
    grid-template-rows: auto;
    grid-gap: 10px;
    grid-auto-flow: row;
  }  .flex-column > *:nth-child(1){
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }  .flex-column > *:nth-child(2){
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }  .flex-column > *:nth-child(3){
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }  .flex-column > *:nth-child(4){
    -ms-grid-row: 1;
    -ms-grid-column: 7;
  }  .flex-column > *:nth-child(5){
    -ms-grid-row: 1;
    -ms-grid-column: 9;
  }  .flex-column > *:nth-child(6){
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }  .flex-column > *:nth-child(7){
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }  .flex-column > *:nth-child(8){
    -ms-grid-row: 3;
    -ms-grid-column: 5;
  }  .flex-column > *:nth-child(9){
    -ms-grid-row: 3;
    -ms-grid-column: 7;
  }  .flex-column > *:nth-child(10){
    -ms-grid-row: 3;
    -ms-grid-column: 9;
  }  .flex-column > *:nth-child(11){
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }  .flex-column > *:nth-child(12){
    -ms-grid-row: 5;
    -ms-grid-column: 3;
  }  .flex-column > *:nth-child(13){
    -ms-grid-row: 5;
    -ms-grid-column: 5;
  }  .flex-column > *:nth-child(14){
    -ms-grid-row: 5;
    -ms-grid-column: 7;
  }  .flex-column > *:nth-child(15){
    -ms-grid-row: 5;
    -ms-grid-column: 9;
  }  .flex-column > *:nth-child(16){
    -ms-grid-row: 7;
    -ms-grid-column: 1;
  }  .flex-column > *:nth-child(17){
    -ms-grid-row: 7;
    -ms-grid-column: 3;
  }  .flex-column > *:nth-child(18){
    -ms-grid-row: 7;
    -ms-grid-column: 5;
  }  .flex-column > *:nth-child(19){
    -ms-grid-row: 7;
    -ms-grid-column: 7;
  }  .flex-column > *:nth-child(20){
    -ms-grid-row: 7;
    -ms-grid-column: 9;
  }  .flex-column > *:nth-child(21){
    -ms-grid-row: 9;
    -ms-grid-column: 1;
  }  .flex-column > *:nth-child(22){
    -ms-grid-row: 9;
    -ms-grid-column: 3;
  }  .flex-column > *:nth-child(23){
    -ms-grid-row: 9;
    -ms-grid-column: 5;
  }  .flex-column > *:nth-child(24){
    -ms-grid-row: 9;
    -ms-grid-column: 7;
  }  .flex-column > *:nth-child(25){
    -ms-grid-row: 9;
    -ms-grid-column: 9;
  }

  .cateborder {
    border-left: 1px solid #cccccc;
  }



/* sub_headサブヘッダー内要素 */
.sub_head_back{ width:100%; min-width: 1000px; background-color: #f0f0f0;}
.sub_head{ width:1000px; min-width: 1000px; height:46px; background-color: #f0f0f0; color:#000000; margin: 0px auto; list-style:none; font-size:14px; font-weight: bolder; white-space:nowrap;}
.sub_head{ display: flex; justify-content: space-between; align-items: center;  justify-content: center; min-width: 1000px; padding-top: 4px; padding-left: 0%;}
.sub_head_menu{ width: 120px; vertical-align: middle; margin-bottom: 5px; margin-right: 10px; padding: 2px; box-sizing: border-box;/* 崩れ防止 */}
.sub_head_menu2{ width: 90px; vertical-align: middle; margin-bottom: 5px; margin-right: 30px; padding: 2px; box-sizing: border-box;/* 崩れ防止 */}
.sub_head_menu3{ width:auto; vertical-align: middle; margin-bottom: 5px; margin-right: 30px; padding: 2px; box-sizing: border-box;/* 崩れ防止 */}
.sub_head_menu4{ width: 80px; vertical-align: middle; margin-bottom: 5px; padding: 2px; box-sizing: border-box;/* 崩れ防止 */}


/* 検索フォームデザイン */
.sub_head_menu_search{width:450px; vertical-align: middle; margin-bottom: 4px; margin-left: 1px; padding:2px 0 2px 0; box-sizing: border-box;/* 崩れ防止 */}
/*フォーム全体*/
#form1{
  position:relative;
  width:300px;/*フォームのサイズ*/
  height:46px;
  margin-top:15px; 
  }
  /*検索ボックス*/
  #sbox{
    border:none;
    background:none;
    -webkit-appearance:none;
  position:absolute;
  top: 0px;
  left: 0px;
  outline:0;/*クリック時の青い枠線消す*/	
  width:300px;/*検索フォームの横幅*/ 
  height:30px;/*検索ボックスの高さ*/	
  padding:0 10px;
  border-radius:2px 0 0 2px;/*検索ボックスの角を丸める*/		
  background:#ffffff;/*検索ボックスの背景カラー*/
  font-weight: normal;
  }
  /*検索ボタン*/
  #sbtn{
    position:absolute;
    left: 305px;
  width:50px;/*検索ボタンの横幅*/ 
  height:30px;/*検索ボタンの縦幅*/ 
  text-align: center;
  }
  /*検索ボタンマウスオーバー時*/
  #sbtn:hover{
  color:#cccccc;/*検索ボタンマウスオーバー時のフォントカラー*/ 
  }

/* クーポンとセールバナーデザイン */
.sub_head_menu_sale{width:178px; vertical-align: middle; margin-bottom: 2px; margin-right: 0px; margin-left: 15px; padding: 2px; box-sizing: border-box;/* 崩れ防止 */
color: rgb(195, 4, 1);  font-size: 22px; letter-spacing: 3px;}
.sub_head_menu_space{width:172px; vertical-align: middle; margin-bottom: 2px; padding: 2px;}

/* クーポン画像URL変更はここ */
.coupon{
	width: 100%;
	height: 35px;
	margin: 0 auto;
	background-image: url(https://cambio.itembox.design/item/topimg/coupon_2000.jpg);
	background-repeat: repeat-x;
	min-width: 1000px;
}
.coupon a { display: block; width: 100%; height: 100%; min-width: 1000px;}

/* セール画像URL変更はここ */
.sale_head{ width:100%; height:37px; margin: 0 auto; background-image : url("https://cambio.itembox.design/item/topimg/header_sale.jpg"); background-repeat: repeat-x; min-width: 1000px;}
.sale_head a { display: block; width: 100%; height: 100%; min-width: 1000px;}


/* #slider_main トップページスライダー用ＣＳＳ始まり*/
.top_banner{ width:1000px; height:620px; background-color: #ffffff;  margin: 20px auto 20px auto; padding: 0px 0px 0px 0px; }

/*サムネイルボタン*/
.sp-button { border:1px solid #ccc;}
.sp-selected-button { background-color: #ccc; }

/*偽サイト注意喚起　アコーディオン*/
.acd-check{ display: none;}
.acd-label{ width: 780px;  height: 30px ; background: #ffffff; color: #000000; font-size: 12px; display: block; border:solid 1px #cccccc; border-radius: 10px;	 padding-top: 4px; text-align: center; margin: 3px auto;}
.acd-content{ background: #ffffff; width: 780px; font-size: 10px; text-align: center; height: 0; opacity: 0; padding: 5px 5px 0px 5px; visibility: hidden;}
.acd-check:checked + .acd-label + .acd-content{ background: #ffffff; height: auto; width: 780px; font-size: 10px; opacity: 1; padding: 5px; visibility: visible; text-align: center; margin: 0 auto; transition: .3s;}

/* 以下right-main右側のコンテンツ中身 */

/* ランキング部分 */
.ranking_ber{width:780px; background-color: #000000; color: #ffffff; font-size:14px;  text-align: left; padding: 3px 0px 3px 10px; margin: 0 auto; position: relative;}
.ranking_ber_sub{width:780px; text-align: right; color: #ffffff; font-size:13px; position: absolute; right:10px;}
.ranking_ber_sub a{color: #ffffff; font-size:13px; position: absolute; right:10px;}
.ranking_container{width:780px; height:auto; background-color: #ffffff; font-size:13px; text-align:center; padding: 10px auto; margin: 10px auto; }

/* プレオーダー部分 */
.pre_ber{width:780px; background-color: #000000; color: #ffffff; font-size:14px; text-align: left; padding: 3px 0px 3px 10px; margin: 0 auto;}
.pre_container{ width:780px; height:auto; background-color: #ffffff; font-size: 0; vertical-align: bottom; text-align:left; padding: 10px auto 0 auto; margin: 5px auto; font-size: 0;}
.pre_box{display: inline-block; background-color:  #ffffff; width: 390px; height: 140px; padding: 0px 0px 5px 0px; vertical-align: middle; margin: 0 0 5px 0;}
.pre_img{ float: left; width: 125px; height: 125px; padding:5px 5px 5px 0px; margin:0px 8px 0px 3px; }
.pre_txt{ height: 140px; width: 240px; vertical-align:top; overflow: hidden; text-align: left; padding:5px 0px 5px 0px; margin:0px 0px 0px 5px; font-size: 12px; line-height: 1.5; color: #666666; }
.pre_txt a{ color: #666666;}
  
.pre_title{ font-size: 13px; width: 255px; line-height: 1.5; color: #000000; font-weight: bold; margin:0px 0px 3px 0px;}
.pre_title:hover { opacity: 0.6; filter: brightness(110%); }
.clearfix{ clear: both;}
.preimage_size { width:120px;}


/* ヒストリー部分 */
.history_ber{width:780px; background-color: #000000; color: #ffffff; font-size:14px;  text-align: left; padding: 3px 0px 3px 10px; margin: 0 auto; margin-top: 10px; position: relative; }
.history_ber_sub{width:780px; text-align: right; color: #ffffff; font-size:13px; position: absolute; right:10px;}
.history_ber_sub a{color: #ffffff; font-size:13px; position: absolute; right:10px;}
.history_container{width:780px; height:auto; background-color: #ffffff; font-size:13px; text-align:center; padding: 0px auto; margin: 10px auto; }


/* コーディネート部分 */
.coordnate_container{width:780px; display:flex; flex-basis:auto; justify-content:space-between; margin: 5px auto 15px auto; padding-top:10px;}
.coordnate_ber{width:780px; background-color: #000000; color: #ffffff; font-size:14px;  text-align: left; padding: 3px 0px 3px 10px; margin: 5px auto; position: relative;}
.coordnate_ber_sub{width:780px; text-align: right; color: #ffffff; font-size:13px; position: absolute; right:10px;}
.coordnate_ber_sub a{color: #ffffff; font-size:13px; position: absolute; right:10px;}
.coordnate_item{width:250px; padding: 0 ;}
.coordnate_item_size{width:250px; padding: 0 ;}


/* レコメンド部分 */
.recommend_ber{width:780px; background-color: #000000; color: #ffffff; font-size:13px;  text-align: left; padding: 3px 0px 3px 10px; margin: 5px auto 10px auto;}
.recommend_container{width:780px; height:auto; background-color: #ffffff; font-size:13px; text-align:center; padding: 0px auto; margin: 30px auto; }

/* ブランド別人気NO1アイテム部分 */
.brandno1_ber{width:780px; background-color: #000000; color: #ffffff; font-size:14px;  text-align: left; padding: 3px 0px 3px 10px; margin: 10px auto 0 auto;}
.brandno1_container{width:780px; height:auto; background-color: #ffffff; font-size:13px; text-align:center; padding: 10px 0px 10px 0px; margin: 0 auto 50px auto;
  display: flex; flex-wrap: wrap; justify-content: space-between;}

.brandno1_item{width:195px; margin: 0; margin-bottom: 20px; }

.brandno1_item_sub{display: flex; width:195px; height:30px; text-align: center; background-color: #ffffff; padding: 0; margin: 0 auto; position: relative;}
.brandno1_brandname{width:175px; height:30px; text-align: center;}
.brandno1_no{display: block;
  height:20px;
  width:20px;
  border-radius:50%;
  line-height:20px;
  text-align:center; background-color: #B39049; color: #ffffff;
  position:absolute; left: 18px; top: 35px; z-index: 1000;} 

/* 以下レフトナビ部分中身 */ 
.member_banner {width:200px; height:auto; margin: 0 0 10px 0;}
.line_banner {width:200px; height:auto; margin: 0 0 10px 0;}
.category_1 {width:100%; height:30px; margin: 0; background-color: #000000; color: #ffffff; text-align: center; vertical-align: middle; padding-top:5px;} 
.category_2 {width:100%; height:30px; margin: 0; background-color: #000000; color: #ffffff; text-align: center; vertical-align: middle; padding-top:5px;} 
.category_3 {width:100%; height:30px; margin: 0; background-color: #000000; color: #ffffff; text-align: center; vertical-align: middle; padding-top:5px;}
.category_mail {width:100%; height: auto; margin: 15px 0; padding: 5% 0; background-color: #ffffff; color: #ffffff; font-size:12px; text-align: center; line-height: 1.5; border: solid 1px #000000;}

.mail_support {color: #000000; font-size:12px; text-align: center; padding-top:25px ;}

.mail_icon {
    margin: 0 auto ;
    font-size: 35px;
    position: relative;
    width: 0;
    height: 0;
    border-right: 0.8em solid transparent;
    border-left: 0.8em solid transparent;
    border-top: 0.6em solid #666666;
    border-radius: 0.1em;
  }

.mail_icon:hover { opacity: 0.6; filter: brightness(110%);}

  /* 下 */
.mail_icon::before {
    position: absolute;
    content: "";
    top: -0.5em;
    left: -0.8em;
    width: 0;
    height: 0;
    border-top: 0.6em solid transparent;
    border-bottom: 0.5em solid #666666;
    border-left: 0.8em solid #666666;
    border-right: 0.8em solid #666666;
    border-radius: 0 0 0.1em 0.1em;
  }

#left-side ul,#left-side_body ul { border: solid 1px #000000; padding: 0 0.5em; position: relative; list-style-type: none;}
#left-side li{ padding: 5px 0; line-height: 1.5;}
.category_1_menu li { border-bottom: 1px dashed; list-style-type: none;}
.category_1_menu li:last-of-type { border-bottom: none;}
.category_2_menu li { border-bottom: 1px dashed; list-style-type: none;}
.category_2_menu li:last-of-type { border-bottom: none;}
.category_3_menu li { border-bottom: 1px dashed; list-style-type: none;}
.category_3_menu li:last-of-type { border-bottom: none;}
#left-side_body ul li { padding: 5px 0; line-height: 1.5; list-style-type: none; }
#left-side_body ul li:last-of-type { border-bottom: none; }
.left li:hover { opacity: 0.6; filter: brightness(110%); }
.category_rubi { font-size: 10px;}
.category_sns{width:100%; height: 60px; margin: 5px 0 20px 0; padding: 5% 0; background-color: #ffffff; color: #ffffff; font-size:12px; text-align: center;}
.sns_icon{ display: inline-block; width:30%; margin: 0 auto;}
.icon_size{width:40px;}

/* UCGタイトルバー */
.ucg_ber {
    width: 780px;
    background-color: #000000;
    color: #ffffff;
    font-size: 14px;
    text-align: left;
    padding: 3px 0px 3px 10px;
    margin: 0 auto;
    margin-top: 10px;
    position: relative;
}

/* フッターコンテンツ部分 */
.footer_content{width: 100%; height:80px; background-color: #000000; color: #ffffff; margin: 0 auto; z-index:100; min-width: 1000px;}
.footer_contentbox{width: 1000px; height:80px; background-color: #000000; color: #ffffff; margin: 0 auto;}
.footer_content a {color:#ffffff;}
.footer_content a :hover { opacity: 0.6; filter: brightness(110%); }

.privacypolicy{ display: inline-block; margin-left:50px; padding-top: 10px; }
.businessdeal{ display: inline-block; padding-top: 10px; }
.corporatesite{ display: inline-block; padding-top: 10px; }
.copyright{ margin: 20px auto 5px 50px; text-align: left;}
.footer_border{ display: inline-block; height:13px; border-right:solid 1px #ffffff; padding-top: 10px;}
.page_top{ display: inline-block; width:130px; height:35px; background-color: #ffffff; color:#000000; border-bottom-left-radius:5px; border-bottom-right-radius:5px;
    padding: 7px 5px; text-align:center; position: absolute; right:30px; margin-top:-2px;}
.page_top a {color:#000000;}
.promotag{width: 100%; height:auto; background-color: #000000;}