@charset "UTF-8";

html {
	overflow-y: scroll;
	margin-bottom: 1px;
	height: 100%;
}

body{font-family: 'Lato', 'Noto Sans JP', "游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
font-size:15px; line-height:150%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}

img { -ms-interpolation-mode: bicubic; -webkit-backface-visibility: hidden;
}

/* JavaScriptが有効な場合、対象を隠す */
html.enable-javascript #slider{
  visibility: hidden;
}
/* 画像すべてを読み終えたら、対象を表示する */
html.enable-javascript.window-load #slider{
  visibility: visible;
}

#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: 0.8em;}

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; margin: 0px auto; font-size: 0.9em; white-space:nowrap; min-width: 1000px;}
.header_content{ display: flex; justify-content:space-between; flex-wrap: wrap; align-items: center; font-size: 13px;}
.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:190px;}

.top_logo_img{width:55px; padding-bottom: 4px;}

.top_new_member{width:60px; height:22px;}

.top_mail_member{width:85px; height:22px;}

.top_login{width:60px; height:22px;}

.top_mypage{width:70px; height:22px;}

.top_coupon{width:80px; height:22px; margin-right:100px;}


/* クーポン有り無しバナー表示 */
　.coupon_img{
  width: 15px;
  padding-bottom: 20px;
z-index:5000;
  }
  

.top_favorite{flex-basis:35px; height:60px;}
.top_fab_icon{flex-basis:28px; margin-top:16px;}

.top_cart{flex-basis:30px; height:60px;}
.top_cart_icon{width:28px; margin-top:17px;}

.top_menu{flex-basis:30px; 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:800x; 
  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;
  }

  .nav li a{
    border:none;
    color: #000000;
  } 
  .nav li a:hover {color:#666666;}

  .flex-column{
    height: 650px;
    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: 600px 600px 600px 600px 600px;
    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:13px; 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-right: 10%; padding-left: 0%;}
.sub_head_menu{ width:auto; vertical-align: middle; margin-bottom: 5px; margin-left: 50px; margin-right: 30px; padding: 2px; box-sizing: border-box;/* 崩れ防止 */}
.sub_head_menu2{ width:auto; vertical-align: middle; margin-bottom: 5px; margin-right: 40px; 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:auto; vertical-align: middle; margin-bottom: 5px; margin-right: 30px; padding: 2px; box-sizing: border-box;/* 崩れ防止 */}

/* 検索フォームデザイン */
.sub_head_menu_search{width:400px; vertical-align: middle; margin-bottom: 4px; margin-left: 1px; margin-right: 50px; 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;
  font-family: 'Lato', 'Noto Sans JP', "游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
  }
  /*検索ボタン*/
  #sbtn{
    position:absolute;
    left: 305px;
  width:50px;/*検索ボタンの横幅*/ 
  height:30px;/*検索ボタンの縦幅*/ 
  text-align: center;
  }
  /*検索ボタンマウスオーバー時*/
  #sbtn:hover{
  color:#cccccc;/*検索ボタンマウスオーバー時のフォントカラー*/ 
  }

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

/* クーポン画像URL変更はここ */
.coupon{ width:100%; height:70px; margin: 0 auto; background-image: url("https://www.cambio.co.jp/shop/item/cambio/design/img01/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://www.cambio.co.jp/shop/item/cambio/design/img01/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:420px; 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: 0.7em;
  display: block;
  border:solid 1px #cccccc;
  border-radius: 10px;	
  padding-top: 2px;
  text-align: center;
}
.acd-content{
  background: #ffffff;
  width: 780px;
  font-size: 0.7em;
  text-align: center;
  height: 0;
  opacity: 0;
  padding: 5px 5px 0px 5px;
  transition: .2s;
  visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
  background: #ffffff;
  height: 100px;
  width: 780px;
  font-size: 0.7em;
  opacity: 1;
  padding: 5px;
  visibility: visible;
  text-align: center;
}


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

/* ランキング部分 */
.ranking_ber{width:780px; background-color: #000000; color: #ffffff; font-size:13px;  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:13px; 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: 130px;/* 高さ指定 */
      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: 130px;/* 高さ指定 */
      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;}


/* ヒストリー部分 */
.history_ber{width:780px; background-color: #000000; color: #ffffff; font-size:13px;  text-align: left; padding: 3px 0px 3px 10px; margin: 0 auto;}
.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:13px;  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: 5px auto; }

/* ブランド別人気NO1アイテム部分 */
.brandno1_ber{width:780px; background-color: #000000; color: #ffffff; font-size:13px;  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;}

.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;} 

/* 以下レフトナビ部分中身 */ 
.category_1_menu li {list-style-type: disc;}
.member_benefit {width:155px; 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: 100px; 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;
  }
  
  ul li {
    line-height: 1.5;
    padding: 0.5em 0 0.5em 0.3em;
    border-bottom: dashed 1px #000000;
    list-style-type: none!important;
    font-size: 12px;
  }

  
  ul li:last-of-type {
    border-bottom: none;
  }

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

.category_rubi {
    font-size: 0.8em;
  }

.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;}



/* フッターコンテンツ部分 */
.footer_content{width: 100%; height:80px; background-color: #000000; color: #ffffff; font-size: 13px; margin: 0 auto; z-index:100; min-width: 1000px;}
.footer_contentbox{width: 1000px; height:80px; background-color: #000000; color: #ffffff; font-size: 13px; 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;}