@charset "UTF-8";
/* ============================================================
   top-sp.css — rumors.jp トップページ SP 用スタイル
   - PC 用 top.css の上に被せる。
   - 全ルール #cc-top スコープ + @media (max-width: 767px) 内。
   - reset.css は #cc-top 配下のため SP でも有効。
   ============================================================ */

/* display 切替（@media 外 = デフォルトは PC モード） */
#cc-top .sp-only { display: none; }
#cc-top .pc-only { display: block; }
#cc-top img.sp-only { display: none; }
#cc-top img.pc-only { display: inline-block; }

@media (max-width: 767px) {

  /* === 0. display 反転 === */
  #cc-top .pc-only { display: none !important; }
  #cc-top .sp-only { display: block; }
  #cc-top img.pc-only { display: none !important; }
  #cc-top img.sp-only { display: inline-block; }

  /* === 0.5 PC コンテナ系の上書き ===
     top.css の #cc-container / #cc-contentsAll は固定 1100px + flex で
     PC レイアウトを組んでいるため、SP では幅 100% + 縦並びに矯正する。
     ここを上書きしないと SP セクションが 1100px 幅の中に押し込まれ、
     横スクロールが発生する。 */
  #cc-top #cc-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  #cc-top #cc-contentsAll {
    width: 100%;
    max-width: 100%;
    display: block;
    gap: 0;
    padding: 0;
    margin-bottom: 0;
    box-sizing: border-box;
  }
  #cc-top #cc-contentsMain {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    flex: none;
    min-width: 0;
    padding: 0;
  }

  /* PC のキャンペーンバナー / メインスライダー外側 margin は SP では詰める */
  #cc-top .js-banner-campaign { margin-bottom: 0; }
  #cc-top #cc-jb-slide { margin-bottom: 0; }

  /* box-sizing 全要素に効かせて padding 起因の overflow を防ぐ */
  #cc-top, #cc-top * { box-sizing: border-box; }

  /* overflow-x:hidden は最終ガード（残った overflow 要素を隠すが、
     原因の特定を妨げるので Verification では JS で本当に overflow 要素が
     無いか確認する。README 参照。） */
  #cc-top { overflow-x: hidden; }

  /* === 1. ルート === */
  #cc-top {
    padding-top: 84px;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    background: #fff;
  }
  #cc-top img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }
  #cc-top a {
    color: #333;
    text-decoration: none;
  }

  /* === 2. SP ヘッダ === */
  #cc-top #cc-header-sp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    border-top: 3px solid #000;
    z-index: 500;
    padding: 1.5rem 0 2rem;
  }
  #cc-top #cc-header-sp .row {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
  #cc-top #cc-header-sp h1 {
    text-align: center;
    margin: 0;
  }
  #cc-top #cc-header-sp h1 a {
    display: inline-block;
  }
  #cc-top #cc-header-sp h1 a img {
    width: 120px;
    height: auto;
  }

  /* === 3. ハンバーガー === */
  #cc-top #cc-header-sp .menuBotton-sp {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
  }
  #cc-top #cc-header-sp .menuBotton-sp a {
    display: block;
  }
  #cc-top #cc-header-sp .menuBotton-sp img {
    width: 45px;
    height: auto;
  }

  /* === 4. 白背景フィルター === */
  #cc-top #cc-blackFilter {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    background: #fff;
    display: none;
  }

  /* === 5. SP グローバルメニュー（sidr-menu） === */
  #cc-top #cc-sidr-menu {
    z-index: 1010;
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
    top: 0;
    right: 0;
    background: #fff;
  }
  #cc-top.showMenu #cc-sidr-menu {
    padding-top: 10px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  #cc-top.showMenu #cc-sidr-menu > .clearfix {
    margin: 0;
    padding: 0 0 10px;
  }
  #cc-top #cc-sidr-menu #cc-closeBotton {
    display: block;
    height: auto;
    background-color: #fff;
  }
  #cc-top #cc-sidr-menu #cc-closeBotton a {
    display: block;
  }
  #cc-top #cc-sidr-menu #cc-closeBotton img {
    width: auto;
    height: 62px;
  }

  /* DEMO 同様、上部メインアイコンは原寸比で左から並べる */
  #cc-top #cc-sidr-menu .mainButton {
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: auto;
  }
  #cc-top #cc-sidr-menu .mainButton > li {
    float: left;
    width: auto;
    padding: 0;
  }
  #cc-top #cc-sidr-menu .mainButton > li a {
    display: block;
  }
  #cc-top #cc-sidr-menu .mainButton > li img {
    width: auto;
    height: 62px;
  }

  /* SEARCH 内ナビゲーション */
  #cc-top #cc-sidr-menu .naviArea ul {
    overflow: hidden;
  }
  #cc-top #cc-sidr-menu .naviArea ul li {
    float: left;
    width: 50%;
    border: 1px solid #aaa;
    border-left: 0;
    text-align: center;
    box-sizing: border-box;
  }
  #cc-top #cc-sidr-menu .naviArea ul li:nth-of-type(even) {
    border-right: 0;
  }
  #cc-top #cc-sidr-menu .naviArea ul li a {
    display: block;
    padding: 20px 0;
    font-size: 14px;
    color: #000;
    background: #fff;
  }

  /* メニュー内検索 */
  #cc-top #cc-sidr-menu .sch-sp {
    padding: 0;
    margin: 0 auto;
    text-align: center;
    background: #aaa;
  }
  #cc-top #cc-sidr-menu .sch-sp form {
    width: 100%;
    padding: 5px;
    background: #aaa;
    margin: 0;
    display: block;
    box-sizing: border-box;
  }
  #cc-top #cc-sidr-menu .sch-sp input.search_f {
    width: 73%;
    height: 44px;
    background: #fff;
    border: none;
    margin-right: 1.8%;
    padding-left: 2%;
    font-size: 14px;
    box-sizing: border-box;
    vertical-align: top;
  }
  #cc-top #cc-sidr-menu .sch-sp input[type="image"] {
    height: 44px;
    width: auto;
    vertical-align: top;
  }

  /* カテゴリーボタン（PC ラッパを reset してフラット化） */
  #cc-top #cc-sidr-menu .categoryButton {
    background-color: #fff;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  #cc-top #cc-sidr-menu .categoryButton .category_box,
  #cc-top #cc-sidr-menu .categoryButton .category_btn {
    all: unset;
    display: block;
    width: 100%;
  }
  #cc-top #cc-sidr-menu .categoryButton > li.menu-parent > a {
    display: block;
    padding: 10px 0 10px 2%;
    border-bottom: 1px solid #aaa;
    color: #fff;
    background: #000;
    font-size: 16px;
    font-weight: normal;
  }
  #cc-top #cc-sidr-menu .categoryButton > li.menu-parent > a span {
    margin-left: 1.5%;
    font-size: 12px;
    color: #fff;
    font-weight: normal;
  }
  #cc-top #cc-sidr-menu .categoryButton ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  #cc-top #cc-sidr-menu .categoryButton ul li a {
    display: block;
    padding: 10px 0 10px 2%;
    border-bottom: 1px solid #aaa;
    color: #000;
    font-size: 12px;
    background: #fff;
  }

  @media (min-width: 480px) and (max-width: 767px) {
    #cc-top #cc-sidr-menu .sch-sp input.search_f {
      width: 79%;
      height: 50px;
    }
    #cc-top #cc-sidr-menu .sch-sp input[type="image"] {
      height: 50px;
    }
  }

  /* === 6. キャンペーンバナー === */
  #cc-top .js-banner-campaign {
    margin: 0;
    padding: 0;
  }
  #cc-top .js-banner-campaign img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* === 7. メインスライダー（slick） === */
  #cc-top #cc-jb-slide {
    padding-top: 0;
  }
  #cc-top .multiple-items {
    min-height: 100vw;
    margin: 0;
    padding: 0;
  }
  #cc-top .multiple-items picture {
    display: block;
  }
  #cc-top .multiple-items img {
    max-width: 100vw;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  #cc-top .slick-dotted.slick-slider {
    margin-bottom: 0;
  }
  #cc-top .slick-dots {
    bottom: -5px;
  }

  /* === 8. サブビジュアル（4 バナー） === */
  #cc-top #slideArea {
    order: 3;
  }
  #cc-top .multiple-items-sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 34px auto 16px;
    padding: 0 8px;
    list-style: none;
  }
  #cc-top .multiple-items-sub-item,
  #cc-top .multiple-items-sub li {
    max-width: 50%;
    flex: 0 0 50%;
    box-sizing: border-box;
    margin: 0 0 16px 0;
    text-align: center;
  }
  #cc-top .multiple-items-sub img {
    width: 86%;
    height: auto;
  }

  /* === 9. informationArea === */
  #cc-top #informationArea {
    order: 2;
    padding: 0 16px;
  }
  #cc-top #informationArea .p-info-content article a {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    color: #333;
    font-size: 13px;
  }

  /* === 10. list-sp 共通見出し === */
  #cc-top .list-sp {
    margin: 24px 0 0;
  }
  #cc-top .list-sp h3 {
    font-size: 18px;
    padding: 16px;
    border-bottom: 1px solid #000;
    font-weight: bold;
    margin: 0;
  }
  #cc-top .list-sp h3 span {
    font-size: 11px;
    color: #999;
    margin-left: 8px;
    font-weight: normal;
  }

  /* === 11. news-sp === */
  /* PC と共通の .p-news-* マークアップ（block_news_items）を SP レイアウトで描画。
     旧 .itemArea-* と同じ見た目を維持しつつ、7 件目以降を初期非表示にして
     「もっと見る」（common.js が #news-sp に .is-open を付与）で展開する。 */
  #cc-top #news-sp {
    order: 1;
  }
  #cc-top #news-sp .p-news-slide {
    display: flex;
    flex-wrap: wrap;
    padding: 0 16px;
    margin: 16px 0 8px;
  }
  /* 7 件目以降は初期非表示 → .is-open で展開 */
  #cc-top #news-sp .p-news-content:nth-of-type(n+7) {
    display: none;
  }
  #cc-top #news-sp.is-open .p-news-content:nth-of-type(n+7) {
    display: block;
  }
  #cc-top #news-sp .p-news-content {
    width: calc(50% - 8px);
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 16px;
  }
  #cc-top #news-sp .p-news-content:nth-of-type(odd) {
    padding-right: 8px;
  }
  #cc-top #news-sp .p-news-content:nth-of-type(even) {
    padding-left: 8px;
  }
  #cc-top #news-sp .p-news-inner {
    display: block;
  }
  #cc-top #news-sp .p-news-image {
    border: 1px solid #eee;
    text-align: center;
    padding: 10px;
    margin-bottom: 4px;
  }
  #cc-top #news-sp .p-news-image > img {
    max-width: 100%;
    height: auto;
    padding: 0;
    border: 0;
  }
  #cc-top #news-sp .p-news-body {
    padding: 0;
  }
  #cc-top #news-sp .p-news-date {
    color: #999;
    font-size: 10px;
  }
  #cc-top #news-sp .p-news-title {
    font-weight: bold;
    color: #666;
    line-height: 1.6;
    margin-bottom: 4px;
  }
  #cc-top #news-sp .p-news-text {
    color: #999;
    font-size: 11px;
    line-height: 1.6;
  }

  #cc-top #recommend-sp {
    order: 4;
  }
  #cc-top #brand-sp {
    order: 5;
  }
  #cc-top #category-sp {
    order: 6;
  }

  /* viewCategory ボタン */
  #cc-top .viewCategory-sp {
    text-align: center;
    margin: 24px 16px;
  }
  #cc-top .viewCategory-sp a {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid #000;
    color: #000;
    font-size: 14px;
    text-decoration: none;
  }

  /* === 12. recommend-sp（cosme） === */
  #cc-top .p-cosme h4 {
    font-size: 14px;
    font-weight: bold;
    color: #727272;
    margin: 1.5em 1em 1em;
  }
  #cc-top .p-cosme-nav {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 2em;
    padding: 0;
    list-style: none;
  }
  #cc-top .p-cosme-nav > li {
    width: 50%;
    box-sizing: border-box;
    padding: 8px 0 8px 16px;
    border-bottom: 1px solid #979797;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #cc-top .p-cosme-nav > li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-size: 12px;
    text-decoration: none;
  }
  #cc-top .p-cosme-nav-thumb {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    overflow: hidden;
    flex-shrink: 0;
  }
  #cc-top .p-cosme-nav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #cc-top .multiple-items-sub_cosme {
    width: 100%;
    margin: 34px auto 16px;
    text-align: center;
  }
  #cc-top .multiple-items-sub_cosme img {
    max-width: 42%;
    height: auto;
    margin: 0 8px 16px;
    border: 1px solid #eee;
    box-sizing: border-box;
  }

  /* === 13. brand-sp === */
  #cc-top .p-brands {
    display: flex;
    flex-wrap: wrap;
    padding: 0 16px;
    margin: 16px 0 8px;
    list-style: none;
  }
  #cc-top .p-brands-content {
    max-width: 50%;
    box-sizing: border-box;
    margin-bottom: 3em;
  }
  #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 {
    text-align: center;
  }
  #cc-top .p-brands-image > img {
    width: auto;
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
  }
  #cc-top .p-brands-inner h4 {
    color: #69a1c1;
    padding: 0.6em 0;
    font-size: 14px;
    font-weight: bold;
  }
  #cc-top .p-brands-body {
    display: block;
    padding: 0;
  }
  #cc-top .p-brands-text {
    font-size: 12px;
    line-height: 1.8;
    color: #666;
  }

  /* === 14. category-sp（アコーディオン） === */
  #cc-top #category-sp > ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  #cc-top #category-sp > ul > li.parent {
    border-bottom: 1px solid #eee;
  }
  #cc-top #category-sp > ul > li.parent > a {
    display: block;
    padding: 16px;
    color: #000;
    font-size: 14px;
    background: url(https://rumors.itembox.cloud/item/assets/img/icon_arrow.png) no-repeat right 16px center / 12px auto;
    text-decoration: none;
  }
  #cc-top #category-sp > ul > li.parent.accordion > ul {
    background: #f6f6f6;
    padding: 0 16px;
    list-style: none;
    margin: 0;
  }
  #cc-top #category-sp > ul > li.parent.accordion > ul > li > a {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
    color: #333;
    background: none;
    text-decoration: none;
  }
  #cc-top #category-sp > ul > li.parent.accordion > ul > li:last-child > a {
    border-bottom: none;
  }

  /* === 15. SP フッタ === */
  #cc-top #cc-footer-sp {
    width: 100%;
    margin-top: 32px;
  }
  #cc-top #cc-footer-sp #footerTop-sp {
    background: #aaa;
    color: #fff;
    padding: 0;
  }
  #cc-top #cc-footer-sp #srcollTop-sp {
    text-align: center;
    margin: 0;
  }
  #cc-top #cc-footer-sp #srcollTop-sp a {
    display: block;
    padding: 10px 0 5px;
    color: #eee;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
  }
  #cc-top #cc-footer-sp #footerTop-sp form {
    width: 100%;
    background: #aaa;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
  }
  #cc-top #cc-footer-sp #footerTop-sp .search_f {
    width: 73%;
    height: 44px;
    margin-right: 1.8%;
    background: #fff;
    border: none;
    padding-left: 2%;
    box-sizing: border-box;
    font-size: 14px;
    vertical-align: top;
  }
  #cc-top #cc-footer-sp #footerTop-sp input[type="image"] {
    width: auto;
    height: 44px;
    vertical-align: top;
  }
  #cc-top #cc-footer-sp #footerTop-sp ul.row {
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: none;
  }
  #cc-top #cc-footer-sp #footerTop-sp ul.row > li {
    float: left;
    text-align: center;
    border: 1px solid #555;
    border-top: none;
    border-left: none;
    box-sizing: border-box;
  }
  #cc-top #cc-footer-sp #footerTop-sp ul.row > li:nth-of-type(1),
  #cc-top #cc-footer-sp #footerTop-sp ul.row > li:nth-of-type(2) {
    width: 50%;
  }
  #cc-top #cc-footer-sp #footerTop-sp ul.row > li:nth-of-type(3),
  #cc-top #cc-footer-sp #footerTop-sp ul.row > li:nth-of-type(4),
  #cc-top #cc-footer-sp #footerTop-sp ul.row > li:nth-of-type(5),
  #cc-top #cc-footer-sp #footerTop-sp ul.row > li:nth-of-type(6) {
    width: 25%;
  }
  #cc-top #cc-footer-sp #footerTop-sp ul.row > li:nth-of-type(2),
  #cc-top #cc-footer-sp #footerTop-sp ul.row > li:nth-of-type(6) {
    border-right: none;
  }
  #cc-top #cc-footer-sp #footerTop-sp ul.row > li a {
    display: block;
    padding: 10px 5px;
    background: #000;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
  }
  #cc-top #cc-footer-sp #footerTop-sp ul.row > li:nth-of-type(1) a,
  #cc-top #cc-footer-sp #footerTop-sp ul.row > li:nth-of-type(2) a {
    padding: 20px 0;
  }
  #cc-top #cc-footer-sp #footerTop-sp ul.row > li img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: bottom;
  }

  #cc-top #cc-footer-sp #footerBottom-sp {
    background: #000;
    padding: 0;
  }
  #cc-top #cc-footer-sp #footerBottom-sp .row {
    overflow: hidden;
    background: #000;
    max-width: none;
  }
  #cc-top #cc-footer-sp .footLogoArea {
    overflow: hidden;
    width: 100%;
    margin-left: 23%;
  }
  #cc-top #cc-footer-sp .footLogoArea h2 {
    float: left;
    width: 31.6%;
    padding: 20px 3.3% 20px 3.2%;
    margin: 0;
    box-sizing: border-box;
  }
  #cc-top #cc-footer-sp .footLogoArea h2 img {
    width: 95px;
    height: auto;
  }
  #cc-top #cc-footer-sp #sns-sp {
    float: left;
    width: 21.8%;
    padding: 20px 3.3% 20px 0;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
  }
  #cc-top #cc-footer-sp #sns-sp li {
    float: left;
    width: 46.6%;
  }
  #cc-top #cc-footer-sp #sns-sp li:first-child {
    margin-right: 6.8%;
  }
  #cc-top #cc-footer-sp #sns-sp img {
    width: 100%;
    height: auto;
  }
  #cc-top #cc-footer-sp .companyInfo {
    background: #000;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    color: #878787;
  }
  #cc-top #cc-footer-sp .companyInfo ul {
    display: block;
    text-align: center;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
  }
  #cc-top #cc-footer-sp .companyInfo ul li {
    display: inline-block;
  }
  #cc-top #cc-footer-sp .companyInfo ul li::after {
    content: "|";
    color: #666;
    padding: 0 5px;
  }
  #cc-top #cc-footer-sp .companyInfo ul li:last-child::after {
    content: "";
  }
  #cc-top #cc-footer-sp .companyInfo ul li a {
    color: #878787;
    font-size: 14px;
    text-decoration: none;
  }
  #cc-top #cc-footer-sp .companyInfo .copy {
    background: #fff;
    margin: 0;
    padding: 10px 0;
    text-align: center;
  }
  #cc-top #cc-footer-sp .companyInfo .copy small {
    color: #000;
    font-size: 10px;
    font-weight: normal;
  }

  @media (min-width: 480px) and (max-width: 767px) {
    #cc-top #cc-footer-sp #footerTop-sp .search_f {
      width: 79%;
      height: 50px;
    }
    #cc-top #cc-footer-sp #footerTop-sp input[type="image"] {
      height: 50px;
    }
  }

}