@charset "Shift_JIS";
/* --------------------------------------------------------------------
「2026春コス専用」CSS（PC） / .mainframe_ .cosmeticsfair
--------------------------------------------------------------------- */
/* ナビメニュー（#navi_menu）
================================================== */
.mainframe_ .cosmeticsfair #navi_menu ul li a {
  background: #bb739c;
  border-color: #bb739c;
}

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

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

.mainframe_ .cosmeticsfair .title_box .title {
  color: #342d1b;
}

/* アイコン */
/* カラー設定 */
.mainframe_ .cosmeticsfair #pickup .title_box .icon { background: #eb6d94; }
.mainframe_ .cosmeticsfair #kit .title_box .icon { background: #008ccf; }
.mainframe_ .cosmeticsfair #novelty .title_box .icon { background: #eda709; }

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

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

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

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

/* キャンペーン情報
================================================== */
.mainframe_ .cosmeticsfair #campaign {
  background: #f4f3ad;
}

/* 共通：コンテンツ下部ボタン（ > #btn_basic）
================================================== */
/* リンク */
.mainframe_ .cosmeticsfair > div > .btn_basic a {
  background: #72514c;
  border-color: #72514c;
}
.mainframe_ .cosmeticsfair #pickup > .btn_basic a { background: #eb6d94; border-color: #eb6d94; }
.mainframe_ .cosmeticsfair #kit > .btn_basic a { background: #008ccf; border-color: #008ccf; }
.mainframe_ .cosmeticsfair #novelty > .btn_basic a { background: #eda709; border-color: #eda709; }

/* マウスオーバー */
.mainframe_ .cosmeticsfair > div > .btn_basic a:hover {
  color: #342d1b;
  border-color: #342d1b;
}
.mainframe_ .cosmeticsfair > div > .btn_basic a:hover::after {
  border-color: #342d1b;
}

.mainframe_ .cosmeticsfair #pickup > .btn_basic a:hover { border-color: #eb6d94; background: #fff; }
.mainframe_ .cosmeticsfair #kit > .btn_basic a:hover { border-color: #008ccf; background: #fff; }
.mainframe_ .cosmeticsfair #novelty > .btn_basic a:hover { border-color: #eda709; background: #fff; }

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

/* ボタン：詳細・ご購入 */
.mainframe_ .cosmeticsfair #kit ul.item_list li .btn a {
  background: #72514c;
  border-color: #72514c;
}

/* マウスオーバー */
.mainframe_ .cosmeticsfair #kit ul.item_list li .btn a:hover {
  color: #342d1b;
  border-color: #342d1b;
}
.mainframe_ .cosmeticsfair #kit ul.item_list li .btn a:hover::after {
  border-color: #342d1b;
}

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

/* 新作コスメ（#pickup）
================================================== */
/* ボタン：詳細・ご購入 */
.mainframe_ .cosmeticsfair #pickup ul.item_list li .btn_item a {
  background: #72514c;
  border-color: #72514c;
}

/* マウスオーバー */
.mainframe_ .cosmeticsfair #pickup ul.item_list li .btn_item a:hover {
  color: #342d1b;
  border-color: #342d1b;
}
.mainframe_ .cosmeticsfair #pickup ul.item_list li .btn_item a:hover::after {
  border-color: #342d1b;
}

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

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


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

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

.wrapper_:not(:has(.mainframe_)) .cosmeticsfair .title_box .title {
  color: #342d1b;
}

/* アイコン */
/* カラー設定 */
.wrapper_:not(:has(.mainframe_)) .cosmeticsfair #pickup .title_box .icon { background: #eb6d94; }
.wrapper_:not(:has(.mainframe_)) .cosmeticsfair #kit .title_box .icon { background: #008ccf; }
.wrapper_:not(:has(.mainframe_)) .cosmeticsfair #novelty .title_box .icon { background: #eda709; }

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

.wrapper_:not(:has(.mainframe_)) .cosmeticsfair 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_)) .cosmeticsfair div#pickup .title_box > .inner { border-color: #fbd1de; }
.wrapper_:not(:has(.mainframe_)) .cosmeticsfair div#kit .title_box > .inner { border-color: #aedcf4; }
.wrapper_:not(:has(.mainframe_)) .cosmeticsfair div#novelty .title_box > .inner { border-color: #fee5b1; }

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

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

/* キャンペーン情報
================================================== */
.wrapper_:not(:has(.mainframe_)) .cosmeticsfair #campaign {
  background: #f4f3ad;
}

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

.wrapper_:not(:has(.mainframe_)) .cosmeticsfair #pickup > .btn_basic a { background: #eb6d94; border-color: #eb6d94; }
.wrapper_:not(:has(.mainframe_)) .cosmeticsfair #kit > .btn_basic a { background: #008ccf; border-color: #008ccf; }
.wrapper_:not(:has(.mainframe_)) .cosmeticsfair #novelty > .btn_basic a { background: #eda709; border-color: #eda709; }

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

/* ボタン：詳細・ご購入 */
.wrapper_:not(:has(.mainframe_)) .cosmeticsfair #kit ul.item_list li .btn a {
  background: #72514c;
  border-color: #72514c;
}

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

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

/* ボタン：詳細・ご購入 */
.wrapper_:not(:has(.mainframe_)) .cosmeticsfair #pickup ul.item_list li .btn_item a {
  background: #72514c;
  border-color: #72514c;
}

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

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