@charset "Shift_JIS";
/* --------------------------------------------------------------------
「ハッピーサマーCP専用」CSS（PC） / .mainframe_ .happysummercp
--------------------------------------------------------------------- */
/* ナビメニュー（#navi_menu）
================================================== */
.mainframe_ .happysummercp #navi_menu ul li a {
  background: #3196c6;
  border-color: #3196c6;
}

/* マウスオーバー */
.mainframe_ .happysummercp #navi_menu ul li a:hover {
  color: #3196c6;
  border-color: #3196c6;
}
.mainframe_ .happysummercp #navi_menu ul li a:hover::after {
  border-color: #3196c6;
}

/* 共通：コンテンツタイトル（.title_box）
================================================== */
.mainframe_ .happysummercp #kit .title_box {
  margin: 0;
}

.mainframe_ .happysummercp .title_box .title {
  color: #151722;
}

/* アイコン */
/* カラー設定 */
.mainframe_ .happysummercp #pickup .title_box .icon { background: #e74c6d; }
.mainframe_ .happysummercp #kit .title_box .icon { background: #12bbd2; }
.mainframe_ .happysummercp #novelty .title_box .icon { background: #edc01d; }

/* タイトル装飾用 */
.mainframe_ .happysummercp div:not(#campaign, #brand) .title_box {
  padding: 15px 0;
}

.mainframe_ .happysummercp div:not(#campaign, #brand) .title_box > .inner {
  position: relative;
  padding: 25px 0;
  border: 15px solid #ccc;
  border-left: none;
  border-right: none;
}
.mainframe_ .happysummercp div#pickup .title_box > .inner { border-color: #f8c9d3; }
.mainframe_ .happysummercp div#kit .title_box > .inner { border-color: #b7eaf1; }
.mainframe_ .happysummercp div#novelty .title_box > .inner { border-color: #faecbb; }

.mainframe_ .happysummercp div:not(#campaign, #brand) .title_box > .inner::before,
.mainframe_ .happysummercp div:not(#campaign, #brand) .title_box > .inner::after {
    content: '';
    position: absolute;
    width: auto;
    height: 26px;
    opacity: 0.3;
}
.mainframe_ .happysummercp div:not(#campaign, #brand) .title_box > .inner::before { top: -30px; left: 0; }
.mainframe_ .happysummercp div:not(#campaign, #brand) .title_box > .inner::after { bottom: -30px; right: 0; transform: rotate(180deg); }

.mainframe_ .happysummercp div#pickup .title_box > .inner::before,
.mainframe_ .happysummercp div#pickup .title_box > .inner::after {
    aspect-ratio: 513 / 47;
    background: url("/contents/proper/beauty/event/happysummercp/2026/img/pickup_bg.png") 0 0 / contain no-repeat;
}
.mainframe_ .happysummercp div#kit .title_box > .inner::before,
.mainframe_ .happysummercp div#kit .title_box > .inner::after {
    aspect-ratio: 371 / 47;
    background: url("/contents/proper/beauty/event/happysummercp/2026/img/kit_bg.png") 0 0 / contain no-repeat;
}
.mainframe_ .happysummercp div#novelty .title_box > .inner::before,
.mainframe_ .happysummercp div#novelty .title_box > .inner::after {
    aspect-ratio: 420 / 47;
    background: url("/contents/proper/beauty/event/happysummercp/2026/img/novelty_bg.png") 0 0 / contain no-repeat;
}

/* キャンペーン情報
================================================== */
.mainframe_ .happysummercp #campaign {
  background:
    url("/contents/proper/beauty/event/happysummercp/2026/img/campaign_top_bg.png") center -20px / 100% auto no-repeat,
    url("/contents/proper/beauty/event/happysummercp/2026/img/campaign_btm_bg.png") center bottom / 100% auto no-repeat,
    linear-gradient(10deg,rgba(255, 228, 102, 1) 10%, rgba(152, 210, 242, 1) 50%, rgba(227, 248, 254, 1) 80%);
}

/* 共通：コンテンツ下部ボタン（ > #btn_basic）
================================================== */
/* リンク */
.mainframe_ .happysummercp > div > .btn_basic a {
  background: #3196c6;
  border-color: #3196c6;
}
.mainframe_ .happysummercp #pickup > .btn_basic a { background: #e74c6d; border-color: #e74c6d; }
.mainframe_ .happysummercp #kit > .btn_basic a { background: #12bbd2; border-color: #12bbd2; }
.mainframe_ .happysummercp #novelty > .btn_basic a { background: #edc01d; border-color: #edc01d; }

/* マウスオーバー */
.mainframe_ .happysummercp > div > .btn_basic a:hover {
  color: #151722;
  border-color: #3196c6;
}
.mainframe_ .happysummercp > div > .btn_basic a:hover::after {
  border-color: #151722;
}

.mainframe_ .happysummercp #pickup > .btn_basic a:hover { border-color: #e74c6d; background: #fff; }
.mainframe_ .happysummercp #kit > .btn_basic a:hover { border-color: #12bbd2; background: #fff; }
.mainframe_ .happysummercp #novelty > .btn_basic a:hover { border-color: #edc01d; background: #fff; }

/* 限定キット（#kit）
================================================== */
/* 商品リスト */
.mainframe_ .happysummercp #kit ul.item_list { border-top: none; }

/* ノベルティー（#novelty）
================================================== */

/* 新作コスメ（#pickup）
================================================== */

/* 新登場・注目ブランド（#brand)
================================================== */

/* 公式サイト・SNS（#official）
================================================== */


/* --------------------------------------------------------------------
「2026春コス専用」CSS（SP） / .wrapper_:not(:has(.mainframe_)) .happysummercp
--------------------------------------------------------------------- */
/* ナビメニュー（#navi_menu）
================================================== */
.wrapper_:not(:has(.mainframe_)) .happysummercp #navi_menu ul li a {
  background: #3196c6;
  border-color: #3196c6;
}

/* 共通：コンテンツタイトル（.title_box）
================================================== */
.wrapper_:not(:has(.mainframe_)) .happysummercp #kit .title_box {
  margin: 0;
}

.wrapper_:not(:has(.mainframe_)) .happysummercp .title_box .title {
  color: #151722;
}

/* アイコン */
/* カラー設定 */
.wrapper_:not(:has(.mainframe_)) .happysummercp #pickup .title_box .icon { background: #e74c6d; }
.wrapper_:not(:has(.mainframe_)) .happysummercp #kit .title_box .icon { background: #12bbd2; }
.wrapper_:not(:has(.mainframe_)) .happysummercp #novelty .title_box .icon { background: #edc01d; }

/* タイトル装飾用 */
.wrapper_:not(:has(.mainframe_)) .happysummercp div:not(#campaign, #brand) .title_box {
  padding: 10px 0;
}

.wrapper_:not(:has(.mainframe_)) .happysummercp div:not(#campaign, #brand) .title_box > .inner {
  position: relative;
  padding: 15px 0;
  border: 10px solid #ccc;
  border-left: none;
  border-right: none;
}
.wrapper_:not(:has(.mainframe_)) .happysummercp div#pickup .title_box > .inner { border-color: #f8c9d3; }
.wrapper_:not(:has(.mainframe_)) .happysummercp div#kit .title_box > .inner { border-color: #b7eaf1; }
.wrapper_:not(:has(.mainframe_)) .happysummercp div#novelty .title_box > .inner { border-color: #faecbb; }

.wrapper_:not(:has(.mainframe_)) .happysummercp div:not(#campaign, #brand) .title_box > .inner::before,
.wrapper_:not(:has(.mainframe_)) .happysummercp div:not(#campaign, #brand) .title_box > .inner::after {
    content: '';
    position: absolute;
    width: auto;
    height: 15px;
    opacity: 0.3;
}
.wrapper_:not(:has(.mainframe_)) .happysummercp div:not(#campaign, #brand) .title_box > .inner::before { top: -20px; left: 0; }
.wrapper_:not(:has(.mainframe_)) .happysummercp div:not(#campaign, #brand) .title_box > .inner::after { bottom: -20px; right: 0; transform: rotate(180deg); }

.wrapper_:not(:has(.mainframe_)) .happysummercp div#pickup .title_box > .inner::before,
.wrapper_:not(:has(.mainframe_)) .happysummercp div#pickup .title_box > .inner::after {
    aspect-ratio: 513 / 47;
    background: url("/contents/proper/beauty/event/happysummercp/2026/img/pickup_bg.png") 0 0 / contain no-repeat;
}
.wrapper_:not(:has(.mainframe_)) .happysummercp div#kit .title_box > .inner::before,
.wrapper_:not(:has(.mainframe_)) .happysummercp div#kit .title_box > .inner::after {
    aspect-ratio: 371 / 47;
    background: url("/contents/proper/beauty/event/happysummercp/2026/img/kit_bg.png") 0 0 / contain no-repeat;
}
.wrapper_:not(:has(.mainframe_)) .happysummercp div#novelty .title_box > .inner::before,
.wrapper_:not(:has(.mainframe_)) .happysummercp div#novelty .title_box > .inner::after {
    aspect-ratio: 420 / 47;
    background: url("/contents/proper/beauty/event/happysummercp/2026/img/novelty_bg.png") 0 0 / contain no-repeat;
}

/* キャンペーン情報
================================================== */
.wrapper_:not(:has(.mainframe_)) .happysummercp #campaign {
  background:
    url("/contents/proper/beauty/event/happysummercp/2026/img/campaign_top_bg.png") center -8px / 108% auto no-repeat,
    url("/contents/proper/beauty/event/happysummercp/2026/img/campaign_btm_bg.png") center bottom / 100% auto no-repeat,
    linear-gradient(10deg,rgba(255, 228, 102, 1) 10%, rgba(152, 210, 242, 1) 50%, rgba(227, 248, 254, 1) 80%);
}

/* 共通：コンテンツ下部ボタン（ > #btn_basic）
================================================== */
/* リンク */
.wrapper_:not(:has(.mainframe_)) .happysummercp > div > .btn_basic a {
  background: #3196c6;
  border-color: #3196c6;
}

.wrapper_:not(:has(.mainframe_)) .happysummercp #pickup > .btn_basic a { background: #e74c6d; border-color: #e74c6d; }
.wrapper_:not(:has(.mainframe_)) .happysummercp #kit > .btn_basic a { background: #12bbd2; border-color: #12bbd2; }
.wrapper_:not(:has(.mainframe_)) .happysummercp #novelty > .btn_basic a { background: #edc01d; border-color: #edc01d; }

/* 限定キット（#kit）
================================================== */
/* 商品リスト */
.wrapper_:not(:has(.mainframe_)) .happysummercp #kit ul.item_list {
  border-top: none;
}

/* ノベルティー（#novelty）
================================================== */

/* 新作コスメ（#pickup）
================================================== */
/* 商品リスト */
.wrapper_:not(:has(.mainframe_)) .happysummercp #pickup ul.item_list {
  border-top: none;
}

/* 新登場・注目ブランド（#brand)
================================================== */

/* 公式サイト・SNS（#official）
================================================== */