@charset "UTF-8";

/* ============================================================
   top.css — rumors.jp トップページ用スタイル
   ------------------------------------------------------------
   すべてのルールは #cc-top 配下にスコープされており、コマース
   クリエイターの他ページに影響しない。

   ファイル構成（編集時はセクション単位で探すこと）:
     1. Base            — フォント・色・本文の基本設定
     2. Layout          — #cc-container（最大幅 1100px）
     3. Header          — sabNavi / ロゴ / 検索フォーム
     4. Global Nav      — グローバルナビ（gnav）
     5. Campaign Banner — 500ptプレゼントバナー
     6. Main Slider     — slick メインビジュアル + サブビジュアル
     7. Information     — informationArea（お知らせ）
     8. News            — newsArea（rumors NEWS）
     9. Recommend/Cosme — recommendArea（コスメ）
    10. Brand           — brandArea（BRAND COLLECTION）
    11. Footer          — フッター（履歴レコメンド・サイトマップ）
    12. Utility         — clearfix / .left / .right など
   ============================================================ */


/* ============================================================
   1. Base
   ============================================================ */
#cc-top {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
               "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック",
               "MS PGothic", sans-serif;
  font-size: 14px;            /* デモの html{font-size:62.5%} + body{font-size:1.4em} = 14px */
  line-height: 1.2;
  color: #000;
  background-color: #fff;
  word-wrap: break-word;
}

#cc-top a:hover { text-decoration: underline; }
#cc-top a:hover img { text-decoration: none; }
#cc-top input[type="image"]:hover { opacity: .7; }


/* ============================================================
   2. Layout
   ============================================================ */
#cc-top #cc-container {
  width: 1100px;
  margin: 0 auto;
}

#cc-top #cc-contentsAll {
  width: 1100px;
  margin-bottom: 80px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 0 10px;
  box-sizing: border-box;
}
#cc-top #cc-sideBar { width: 200px; flex: 0 0 200px; }
#cc-top #cc-contentsMain { flex: 1; min-width: 0; }
#cc-top #cc-contentsAll.cc-contentsOnly {
  display: block;
  gap: 0;
}
#cc-top #cc-contentsAll.cc-contentsOnly #cc-contentsMain {
  width: 100%;
}


/* ============================================================
   3. Header
   ============================================================ */
#cc-top header#cc-header {
  position: relative;
  padding: 0 10px;
  margin: 0 auto 10px;
}

#cc-top header#cc-header h2 {
  color: #666;
  font-size: 10px;
  margin-top: 5px;
  font-weight: bold;
}

/* sabNavi（ログイン / マイページなど） */
#cc-top #cc-sabNav-area {
  position: absolute;
  right: 10px;
  top: 15px;
  overflow: hidden;
  zoom: 1;
}
#cc-top #cc-sabNav-area #sabNavi {
  overflow: hidden;
  zoom: 1;
  margin-top: 5px;
}
#cc-top #cc-sabNav-area #sabNavi li {
  float: left;
  font-size: 11px;
  color: #333;
  border-right: 1px solid #dcdbdb;
  padding: 0 10px;
}
#cc-top #cc-sabNav-area #sabNavi li:first-child { padding-left: 0; }
#cc-top #cc-sabNav-area #sabNavi li:last-child { border-right: none; margin-right: 15px; }
#cc-top #cc-sabNav-area #sabNavi li a:hover { text-decoration: underline; }

/* ロゴ */
#cc-top header#cc-header h1 a {
  display: block;
  background: url(https://rumors.itembox.cloud/item/assets/img/logo_footer.png) 0 0 no-repeat;  /* itembox: /assets/img/logo_footer.png */
  background-size: contain;
  height: 45px;
  width: 168px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 25px;
  color: #fff;
  font-size: 1px;
}

/* 検索エリア */
#cc-top #cc-searchArea {
  position: absolute;
  bottom: 0;
  right: 10px;
  overflow: hidden;
  zoom: 1;
}
#cc-top #cc-searchArea form {
  display: flex;
  align-items: center;
  height: 30px;
  border: 1px solid #ccc;
}
#cc-top #cc-searchArea input#keyword {
  width: 240px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  outline: none;
  font-size: 12px;
  line-height: 28px;
  background: transparent;
}
#cc-top #cc-searchArea input#keyword:focus { background-color: #f5f5f5; }
#cc-top #cc-searchArea input[type="image"] {
  height: 28px;
  width: auto;
  display: block;
}


/* ============================================================
   4. Global Nav
   ============================================================ */
#cc-top nav#cc-gnav { margin-bottom: 10px; }

#cc-top nav#cc-gnav ul {
  display: flex;
  overflow: hidden;
  zoom: 1;
}
#cc-top nav#cc-gnav ul li {
  float: none;
  flex: 1;
  width: auto;
}
#cc-top nav#cc-gnav ul li a {
  display: block;
  width: 100%;
  color: #222;
  text-align: center;
  font-size: 12px;
  padding: 7px 0;
  font-weight: normal;
  border-bottom: 1px solid #ededed;
  transition: 0.3s linear;
}
#cc-top nav#cc-gnav ul li a:hover {
  color: #000;
  text-decoration: none;
  background-color: #f9f9f9;
}
#cc-top nav#cc-gnav ul li.sale a {
  background-color: #c39e58;
  background-image: none;
}


/* ============================================================
   4-b. Left Sidebar (#cc-sideBar)
   ------------------------------------------------------------
   元 rumors_bst.css の .left_box / .menu_box / .group_btn /
   .category_box / .category_btn 系を #cc-top スコープで再構成。
   矢印アイコンは元の /image/bst/arrow.png を使わず Unicode "›" で代用。
   ============================================================ */
#cc-top #cc-sideBar .left_box { width: 200px; }

#cc-top #cc-sideBar .menu_box,
#cc-top #cc-sideBar .price_type_box {
  width: 200px;
  margin-bottom: 20px;
}

#cc-top #cc-sideBar .menu_btn {
  display: block;
  width: 200px;
  height: 50px;
  font-size: 12px;
  font-weight: bold;
  line-height: 50px;
  border-bottom: 1px solid #777;
  cursor: pointer;
}

/* GROUP（MEN / WOMEN） */
#cc-top #cc-sideBar .group_btn {
  border-bottom: 1px dotted #3d3d3d;
}
#cc-top #cc-sideBar .group_btn > li > a { display: block; }
#cc-top #cc-sideBar .group_btn > li > a > p {
  width: 200px;
  font-size: 12px;
  border-bottom: 1px dotted #3d3d3d;
}
#cc-top #cc-sideBar .group_btn > li:last-child > a > p { border-bottom: 0; }
#cc-top #cc-sideBar .group_btn > li > a > p > span {
  display: inline-block;
  padding: 6px 0 6px 12px;
}
#cc-top #cc-sideBar .group_btn > li > a:hover > p > span { text-decoration: underline; }

/* CATEGORY */
#cc-top #cc-sideBar .category_box { position: relative; }
#cc-top #cc-sideBar .category_btn {
  width: 200px;
  color: #666;
  font-size: 12px;
  border-bottom: 1px dotted #3d3d3d;
  position: relative;
}
#cc-top #cc-sideBar .category_btn::after {
  content: "›";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 16px;
  line-height: 1;
}
#cc-top #cc-sideBar .category_btn > span {
  display: inline-block;
  padding-left: 12px;
}
#cc-top #cc-sideBar .category_btn > span > a {
  display: block;
  padding: 6px 32px 6px 0;
  color: #666;
}
#cc-top #cc-sideBar .category_btn:hover > span > a { color: #000; }

/* PRICE TYPE */
#cc-top #cc-sideBar .price_type_box > ul {
  border-bottom: 1px dotted #3d3d3d;
  overflow: hidden;
}
#cc-top #cc-sideBar .price_type_box > ul > li {
  float: left;
  width: 100px;
}
#cc-top #cc-sideBar .price_type_box > ul > li > a {
  display: block;
  padding: 6px 0;
  text-align: center;
  font-size: 12px;
  color: #666;
}
#cc-top #cc-sideBar .price_type_box > ul > li > a:hover { color: #000; text-decoration: underline; }

/* PRICE RANGE — FutureShop CC 仕様 (minprice / maxprice, action="/p/search") */
#cc-top #cc-sideBar .price_range_form {
  padding: 10px 0;
  border-bottom: 1px dotted #3d3d3d;
}
#cc-top #cc-sideBar .price_range_row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
#cc-top #cc-sideBar .price_range_form input[type="text"] {
  width: 80px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid #ccc;
  font-size: 12px;
  box-sizing: border-box;
  background: #fff;
}
#cc-top #cc-sideBar .price_range_form input[type="text"]:focus {
  outline: none;
  border-color: #777;
}
#cc-top #cc-sideBar .price_range_sep {
  font-size: 12px;
  color: #666;
}
#cc-top #cc-sideBar .price_range_submit {
  width: 100%;
  height: 30px;
  background: #333;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 0.1em;
}
#cc-top #cc-sideBar .price_range_submit:hover { background: #555; }

/* BRAND — A-Z + 1 + # を 5 列グリッド */
#cc-top #cc-sideBar .brand_box {
  width: 200px;
  overflow: hidden;
  padding: 6px 0;
}
#cc-top #cc-sideBar .brand_box > li {
  float: left;
  margin: 0 6px 6px 0;
}
#cc-top #cc-sideBar .brand_box > li:nth-child(5n+5) { margin-right: 0; }
#cc-top #cc-sideBar .brand_box > li:nth-child(5n+6) { clear: both; }
#cc-top #cc-sideBar .brand_box > li > a {
  display: table-cell;
  width: 35px;
  height: 35px;
  text-align: center;
  vertical-align: middle;
  background: #ececec;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
#cc-top #cc-sideBar .brand_box > li > a:hover {
  background: #999;
  color: #fff;
  text-decoration: none;
}
#cc-top #cc-sideBar .brand_box_none > a {
  color: #b8b8b8;
  cursor: default;
  pointer-events: none;
}
#cc-top #cc-sideBar .brand_box .brand_box_on {
  background: #999;
  color: #fff;
}

/* BRAND 選択後に sidebar.js が描く一覧 */
#cc-top #cc-sideBar .brand_list {
  width: 200px;
  margin-top: 6px;
  clear: both;
}
#cc-top #cc-sideBar .brand_list > li {
  width: 200px;
  border-top: 1px dotted #3d3d3d;
}
#cc-top #cc-sideBar .brand_list > li:last-child {
  border-bottom: 1px dotted #3d3d3d;
}
#cc-top #cc-sideBar .brand_list > li > a {
  display: block;
  background: #f6f6f6;
  text-align: left;
  overflow: hidden;
}
#cc-top #cc-sideBar .brand_list > li > a:hover { background: #ebebeb; text-decoration: none; }
#cc-top #cc-sideBar .brand_list > li > a > div > p:first-child {
  padding: 6px 8px 0;
  font-size: 13px;
  color: #333;
}
#cc-top #cc-sideBar .brand_list > li > a > div > p.brand_kana_name {
  padding: 0 8px 6px;
  font-size: 11px;
  color: #888;
}


/* ============================================================
   5. Campaign Banner
   ============================================================ */
#cc-top .js-banner-campaign {
  margin-bottom: 12px;
}
#cc-top .js-banner-campaign img { width: 100%; }


/* ============================================================
   6. Main Slider (slick)
   ============================================================ */
#cc-top #cc-jb-slide { margin-bottom: 35px; }

#cc-top .multiple-items {
  position: relative;
  background: url(https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif) no-repeat center center / 25%;
}
#cc-top .multiple-items img { width: 1100px; height: auto; }
#cc-top .multiple-items .slick-slide { background-color: #fff; }
#cc-top .multiple-items .slick-slide img { transition: opacity .8s ease; }
#cc-top .multiple-items .slick-slide:not(.slick-current) img { opacity: 0.3; }

/* slick 矢印は元サイトに合わせて非表示。
   ドットだけ表示する。 */
#cc-top .multiple-items .slick-prev,
#cc-top .multiple-items .slick-next { display: none; }

/* slick ドットの可視化オーバーライド。
   slick-theme デフォルトは font-family:slick の専用アイコンフォントを前提に
   font-size:6px / opacity:.25 で描いているため、アイコンフォントを同梱しない
   今回の構成では事実上見えない。普通の bullet 文字＋実寸サイズで上書きする。 */
#cc-top .multiple-items .slick-dotted.slick-slider { margin-bottom: 40px; }
#cc-top .multiple-items .slick-dots {
  bottom: -30px;
}
#cc-top .multiple-items .slick-dots li,
#cc-top .multiple-items .slick-dots li button { width: 12px; height: 12px; }
#cc-top .multiple-items .slick-dots li button { padding: 0; }
#cc-top .multiple-items .slick-dots li button::before {
  font-family: inherit;
  content: "●";
  font-size: 10px;
  line-height: 12px;
  width: 12px;
  height: 12px;
  color: #c8c8c8;
  opacity: 1;
}
#cc-top .multiple-items .slick-dots li.slick-active button::before {
  color: #000;
  opacity: 1;
}

/* サブビジュアル（メインビジュアル下の 4 枚バナー） */
#cc-top .multiple-items-sub {
  margin: 50px 0 25px;
  width: 100%;
  display: flex;
  align-content: center;
}
#cc-top .multiple-items-sub-item {
  display: block;
  width: 100%;
  margin: 0 8px 16px;
}
#cc-top .multiple-items-sub img { width: 100%; }
#cc-top .multiple-items-sub a:hover { text-decoration: none; }

@media screen and (max-width: 767px) {
  #cc-top .multiple-items { min-height: 375px; }
  #cc-top .slick-dotted.slick-slider { margin-bottom: 0; }
  #cc-top .multiple-items img { max-width: 100vw; height: auto; }
  #cc-top .slick-dots { bottom: -5px; }

  #cc-top .multiple-items-sub {
    margin: 34px auto 16px;
    flex-wrap: wrap;
  }
  #cc-top .multiple-items-sub-item {
    max-width: 50%;
    margin: 0 0 16px 0;
    text-align: center;
  }
  #cc-top .multiple-items-sub img { width: 86%; }
}


/* ============================================================
   7. Information Area
   ============================================================ */
#cc-top #informationArea {
  margin-bottom: 50px;
}
#cc-top .p-info-content {
  margin: 24px 12px 12px;
  border: 1px solid gray;
  padding: 12px 12px 0;
}
#cc-top .p-info-content article {
  padding-left: .5em;
  margin-bottom: 16px;
}
#cc-top .p-info-content article a {
  display: block;
  font-size: 12px;
  text-decoration: none;
}
#cc-top .p-info-date { display: inline; }
#cc-top .p-info-title { display: inline; }


/* ============================================================
   8. News Area
   ============================================================ */
#cc-top #newsArea { margin-bottom: 50px; }

#cc-top #newsArea .headlineArea,
#cc-top #recommendArea .headlineArea,
#cc-top #brandArea .headlineArea {
  border-bottom: 1px solid #dcdbdb;
  margin-bottom: 20px;
  overflow: hidden;
  zoom: 1;
  padding-bottom: 8px;
}
#cc-top #newsArea .headlineArea h3,
#cc-top #recommendArea .headlineArea h3,
#cc-top #brandArea .headlineArea h3 {
  font-size: 14px;
  font-weight: bold;
  color: #727272;
}
#cc-top #newsArea .headlineArea h3 span,
#cc-top #recommendArea .headlineArea h3 span,
#cc-top #brandArea .headlineArea h3 span {
  font-size: 12px;
  font-weight: normal;
  margin-left: 10px;
}

#cc-top .p-news-body:hover { text-decoration: none; }

#cc-top .p-news-slide {
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 1em;
  margin-bottom: 3em;
}
#cc-top .p-news-content { width: 50%; }
#cc-top .p-news-inner {
  display: flex;
  margin-bottom: 3em;
}
#cc-top .p-news-image {
  margin: 0 auto;
  display: block;
}
#cc-top .p-news-image > img {
  width: 144px;
  padding: 20px;
  border: 1px solid #eee;
  display: block;
}
#cc-top .p-news-body { padding: 8px 16px; }
#cc-top .p-news-title {
  font-weight: bold;
  line-height: 1.8;
}
#cc-top .p-news-date {
  color: #999;
  font-size: 10px;
}
#cc-top .p-news-text {
  font-size: 12px;
  line-height: 1.8;
}
#cc-top .p-news-label > li {
  background-color: #69a1c1;
  font-weight: bold;
  font-size: 10px;
  padding: .3em .6em;
  display: inline-block;
}
#cc-top .p-news-label > li > a { color: #fff; }

@media (max-width: 767px) {
  #cc-top .p-news-content:nth-of-type(odd) {
    padding-right: 8px;
    width: calc(50% - 8px);
  }
  #cc-top .p-news-content:nth-of-type(even) {
    padding-left: 8px;
    width: calc(50% - 8px);
  }
  #cc-top .p-news-slide {
    padding: 0 16px;
    margin: 16px 0 8px;
  }
  #cc-top .p-news-image {
    border: 1px solid #eee;
    text-align: center;
    padding: 10px;
    margin-bottom: 4px;
  }
  #cc-top .p-news-image > img {
    max-width: 100%;
    height: auto;
    padding: 0;
    border: 0;
  }
  #cc-top .p-news-inner {
    display: block;
    margin-bottom: 2em;
  }
}


/* ============================================================
   9. Recommend / Cosme Area
   ============================================================ */
#cc-top #recommendArea { margin-bottom: 50px; }

#cc-top .multiple-items-sub_cosme {
  margin: 50px 0 25px;
  width: 100%;
  text-align: center;
}
#cc-top .multiple-items-sub_cosme img {
  width: auto;
  max-height: 100px;
  margin: 0 8px 16px;
  border: 1px solid #eee;
}
#cc-top .multiple-items-sub_cosme a:hover { text-decoration: none; }

@media screen and (max-width: 767px) {
  #cc-top .multiple-items-sub_cosme {
    width: 100%;
    margin: 34px auto 16px;
  }
  #cc-top .multiple-items-sub_cosme img {
    max-width: 42%;
    height: auto;
    margin-bottom: 16px;
  }
}


/* ============================================================
   10. Brand Collection
   ============================================================ */
#cc-top #brandArea { margin-bottom: 50px; }

#cc-top .p-brands {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
#cc-top .p-brands-content {
  max-width: 50%;
  margin-bottom: 3em;
}
#cc-top .p-brands-inner { display: flex; }
#cc-top .p-brands-image > img {
  width: 144px;
  border: 1px solid #eee;
  display: block;
}
#cc-top .p-brands-body {
  display: block;
  padding: 8px 16px;
}
#cc-top .p-brands-inner h4 {
  color: #69a1c1;
  padding-top: .3em;
  padding-bottom: 1.2em;
}
#cc-top .p-brands-text {
  font-size: 12px;
  line-height: 1.8;
}

@media (max-width: 768px) {
  #cc-top .p-brands {
    padding: 0 16px;
    margin: 16px 0 8px;
  }
  #cc-top .p-brands-content:nth-of-type(odd) {
    padding-right: 8px;
    width: calc(50% - 8px);
  }
  #cc-top .p-brands-content:nth-of-type(even) {
    padding-left: 8px;
    width: calc(50% - 8px);
    margin-bottom: 16px;
  }
  #cc-top .p-brands-inner { display: block; }
  #cc-top .p-brands-image > img {
    width: auto;
    max-width: 100%;
  }
}


/* ============================================================
   11. Footer
   ============================================================ */
#cc-top footer {
  padding: 25px 0 15px;
  clear: both;
}

/* 履歴レコメンド（Future Shop） */
#cc-top .FS2_Recommend2_recommend_pv {
  width: 100%;
  margin: 0 auto;
}
#cc-top .FS2_Recommend2_recommend_pv .CrossHead {
  font-weight: bold;
  margin: 0;
  font-size: 14px;
  color: #727272;
  text-align: left;
  padding: 0;
  border-bottom: 1px solid #dcdbdb;
  background: #fff;
  width: 100%;
}
#cc-top .FS2_Recommend2_recommend_pv h3.CrossHead { margin-left: 0; }
#cc-top .FS2_Recommend2_recommend_pv a {
  font-weight: normal;
  font-size: 11px;
  color: #000;
  display: inline-block;
  margin: 0 2px;
}
#cc-top .FS2_Recommend2_recommend_pv .itemPrice {
  font-size: 11px;
  color: #000;
  margin: 0 2px;
}
#cc-top .FS2_Recommend2_recommend_pv .FS2_itemPrice_addition {
  font-size: 12px;
  color: #000;
}
#cc-top .FS2_Recommend2_recommend_pv .item_box { padding: 0; }

/* レイアウトは FS の bxSlider 任せ（float ベース）。
   ここでは商品行の見た目だけ整える。 */
#cc-top .FS2_Recommend2_recommend_pv .item_box > li {
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
}
#cc-top .FS2_Recommend2_recommend_pv .item_box > li img {
  max-width: 100%;
  height: auto;
  margin-bottom: 8px;
}
#cc-top .FS2_Recommend2_recommend_pv .item_box > li .text { display: block; margin: 4px 0; }

/* フッター本体 */
#cc-top #footerInner {
  background: #f5f5f5;
  padding: 25px 10px 35px;
}
#cc-top #footerTop {
  overflow: hidden;
  zoom: 1;
  padding-bottom: 10px;
  border-bottom: 1px dotted #ababab;
  margin-bottom: 40px;
}
#cc-top #footerTop .right { margin-top: 15px; }
#cc-top #footerTop span {
  vertical-align: bottom;
  margin: 0 5px;
  font-size: 12px;
}

#cc-top #siteMap {
  overflow: hidden;
  zoom: 1;
  margin-left: 10px;
}
#cc-top #siteMap dl { float: left; }
#cc-top #siteMap dl a {
  font-size: 12px;
  color: #222;
}
#cc-top #siteMap dl a:hover { text-decoration: underline; }
#cc-top #siteMap dl dt {
  font-size: 14px;
  color: #222;
  font-weight: bold;
  margin-bottom: 20px;
}
#cc-top #siteMap dl.fot-first { margin-right: 190px; }
#cc-top #siteMap dl.fot-second { margin-right: 210px; }
#cc-top #siteMap dl dd li { margin-bottom: 5px; }

#cc-top #footerBottom {
  padding: 15px 10px 0;
  overflow: hidden;
  zoom: 1;
}
#cc-top #footerBottom .left {
  font-size: 10px;
  color: #222;
}
#cc-top a#srcollTop:hover { opacity: .7; }


/* ============================================================
   12. Utility
   ============================================================ */
#cc-top .clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cc-top .left  { float: left; }
#cc-top .right { float: right; }
#cc-top .black { color: #000; }
#cc-top .white { color: #fff; }
#cc-top .box_sizing { box-sizing: border-box; }