@charset "Shift_JIS";
/* --------------------------------------------------------------------
コスメティックフェアCSS（SP） / .cosmeticsfair
--------------------------------------------------------------------- */
/* ボタン 右矢印（＞） */
.cosmeticsfair .btn_basic a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.2;
  width: 100%;
  max-width: 400px;
  height: 80px;
  margin: 0 auto;
  padding: 0 2%;
  background: #222;
  border-radius: 60px;
  box-shadow: 0px 2px 3px 0px rgba(61, 61, 61, 0.15);
}

.cosmeticsfair .btn_basic a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  width: 6px;
  height: 6px;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  transform: translateY(-50%) rotate(-45deg);
}

/* fill_cover */
.cosmeticsfair .fill_cover_wrap {
  position: relative;
  overflow: hidden;
}

.cosmeticsfair .fill_cover {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, .4);
  font-size: 1.5rem;
  color: #fff;
  text-align: center;
}

.cosmeticsfair .fill_cover .fill_cover_tx {
  font-weight: bold;
  text-shadow: 0px 0px 10px rgb(0 0 0);
}

.cosmeticsfair .fill_cover .fill_cover_tx_b {
  font-weight: bold;
}

/* 上部パーツ
================================================== */
/* キャッチコピー */
.cosmeticsfair .catch_copy {
  color: #000;
  text-align: center;
  padding: 15px 0;
}

/* 背景 */
.cosmeticsfair .bg {
  background: #f2e5d5;
}

/* ナビメニュー（#navi_menu）
================================================== */
.cosmeticsfair #navi_menu ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 2%;
}

.cosmeticsfair #navi_menu ul li {
  width: calc((100% / 2) - 2%);
  margin: 1%;
}

.cosmeticsfair #navi_menu ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  height: 80px;
  padding: 10px 0 15px 0;
  background: #983b32;
  border: 1px solid #983b32;
  border-radius: 3px;
  box-shadow: 0px 2px 3px 0px rgba(61, 61, 61, 0.15);
}

.cosmeticsfair #navi_menu ul li a span.txt_sub {
  font-size: 1.2rem;
  font-weight: normal;
  letter-spacing: normal;
}

.cosmeticsfair #navi_menu ul li a::after {
  content: '';
  position: absolute;
  bottom: 8px;
  width: 8px;
  height: 8px;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  transform: rotate(45deg);
}

.cosmeticsfair #navi_menu ul li a[href="#novelty"] {
  font-size: 1.4rem;
  letter-spacing: -0.20rem;
}

/* キャンペーン（#campaign）
================================================== */
.cosmeticsfair #campaign {
  color: #0a0a0a;
  padding: 30px 3%;
}

/* メインタイトル */
.cosmeticsfair #campaign .title_box .title {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 20px;
}

.cosmeticsfair #campaign .title_box .title img {
  width: 100%;
  height: auto;
}

/* 基本コンテンツBOX */
.cosmeticsfair #campaign > .inner {
  position: relative;
  margin: 20px 0;
  padding: 20px 3%;
  border-radius: 10px;
  box-shadow: 0px 2px 3px 0px rgba(61, 61, 61, 0.15);
  background: #fff;
}

.cosmeticsfair #campaign > .inner .txt {
  padding: 15px 0 0 0;
}

.cosmeticsfair #campaign > .inner .txt br {
  display: none;
}

.cosmeticsfair #campaign > .inner .detail {
  color: #555;
  font-size: 1.4rem;
  line-height: 1.6;
  margin: 15px 0 0 0;
  padding: 15px 0 0 0;
  border-top: 1px solid #ccc;
}

.cosmeticsfair #campaign > .inner .detail span {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}

/* コンテンツタイトル */
.cosmeticsfair #campaign > .inner .title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.cosmeticsfair #campaign > .inner .title::before {
  content: '';
  display: block;
  width: 60px;
  height: auto;
  aspect-ratio: 1;
}
.cosmeticsfair #campaign #coupon .title::before {
  background: url("/contents/proper/beauty/event/cosmeticsfair/2025autumn/img/campaign_icon_coupon.png") center left / contain no-repeat;
}
.cosmeticsfair #campaign #sample .title::before {
  background: url("/contents/proper/beauty/event/cosmeticsfair/2025autumn/img/campaign_icon_sample.png") center left / contain no-repeat;
}

.cosmeticsfair #campaign > .inner .title > span {
  display: block;
  padding: 5px 0 0 0;
}

.cosmeticsfair #campaign > .inner .title span.txt_sub {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 0 0 0 10px;
}

.cosmeticsfair #campaign > .inner .title span.txt_main {
  display: block;
  color: #ba4639;
  font-size: 2.0rem;
  font-weight: bold;
}
.cosmeticsfair #campaign > .inner .title span.txt_main > span:nth-of-type(2) {
  display: block;
  padding: 0 0 0 10px;
}

/* 会員限定テキスト */
.cosmeticsfair #campaign > #coupon.inner .title {
  position: relative;
  padding-top: 30px;
}
.cosmeticsfair #campaign > #coupon.inner .title span.txt_sub {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  padding: 0;
}

/* 終了表示 */
.cosmeticsfair #campaign > .inner .campaign_end_txt {
  color: #fff;
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  padding: 8px 0;
  margin: 0 0 20px 0;
  background: #333;
}

/* CP対象ブランド */
.cosmeticsfair #campaign .brand {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 15px 0 0 0;
}

.cosmeticsfair #campaign .brand > p {
  color: #ba4639;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}

.cosmeticsfair #campaign .brand ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.cosmeticsfair #campaign .brand ul li {
  width: calc((100% / 3) - 2%);
  margin: 1%;
}

.cosmeticsfair #campaign .brand ul li p {
  border: 1px solid #ccc;
}

.cosmeticsfair #campaign .brand img {
  width: 100%;
  height: auto;
}

/* 共通：コンテンツタイトル（.title_box）
================================================== */
.cosmeticsfair .title_box {
  text-align: center;
  margin: 0 0 20px 0;
}

.cosmeticsfair .title_box .icon {
  display: inline-block;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.15rem;
  padding: 5px 10px;
  background: #000;
}
.cosmeticsfair #new .title_box .icon { background: #5b362c; }
.cosmeticsfair #kit .title_box .icon { background: #303c4a; }
.cosmeticsfair #novelty .title_box .icon { background: #ba4639; }

.cosmeticsfair .title_box .title {
  color: #0a0a0a;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  margin: 10px 0 0 0;
}
.cosmeticsfair #new .title_box .title,
.cosmeticsfair #kit .title_box .title { color: #fff; }
.cosmeticsfair #novelty .title_box .title { color: #ba4639; }

.cosmeticsfair .title_box .lead_txt {
  color: #0a0a0a;
  font-size: 1.4rem;
  margin: 10px 0 0 0;
}
.cosmeticsfair #new .title_box .lead_txt,
.cosmeticsfair #kit .title_box .lead_txt { color: #fff; }
.cosmeticsfair #novelty .title_box .lead_txt { margin: 10px 10px 0 10px; }

/* 共通：商品リストBOX（.item_list）
================================================== */
.cosmeticsfair ul.item_list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.cosmeticsfair ul.item_list li {
  width: 100%;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0px 2px 3px 0px rgba(61, 61, 61, 0.15);
  padding: 5%;
}

.cosmeticsfair ul.item_list li .img {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid #ccc;
}

.cosmeticsfair ul.item_list li .img img {
  width: 100%;
  height: auto;
}
.cosmeticsfair ul.item_list li .img > img:nth-of-type(1) { width: 50%; padding: 0 10px; } /*ロゴ*/
.cosmeticsfair ul.item_list li .img > img:nth-of-type(2) { width: 50%; } /*写真*/

.cosmeticsfair ul.item_list li .txt {
  margin: 0 0 20px 0;
}

.cosmeticsfair ul.item_list li .txt .lead {
  color: #ba4639;
  font-weight: bold;
  letter-spacing: 0.15rem;
  margin: 10px 0 0 0;
}

.cosmeticsfair ul.item_list li .txt .note {
  color: #555;
  font-size: 1.2rem;
}

.cosmeticsfair ul.item_list li .txt .name {
  color: #000;
  font-size: 1.6rem;
  font-weight: bold;
  margin: 10px 0 0 0;
}

.cosmeticsfair ul.item_list li .txt .name > span {
  display: block;
  color: #555;
  font-size: 1.4rem;
  font-weight: normal;
}

.cosmeticsfair ul.item_list li .txt .price {
  color: #000;
  font-size: 2.4rem;
  font-weight: bold;
  margin: 10px 0 0 0;
}

.cosmeticsfair ul.item_list li .txt .price > span {
  font-size: 1.2rem;
  font-weight: normal;
  padding: 0 0 0 2px;
}

.cosmeticsfair ul.item_list li .txt .detail {
  font-size: 1.3rem;
  padding-left: 1em;
  text-indent: -1em;
  margin: 10px 0 0 0;
}

/* アイコン */
.cosmeticsfair ul.item_list li .txt .icon {
  display: inline-block;
  color: #fff;
  font-size: 1.3rem;
  line-height: 22px;
  padding: 0 10px;
  margin: 10px 0 0 0;
  border-radius: 20px;
}
.cosmeticsfair ul.item_list li .txt .icon.icon_kintetsu { background: #164a95; }
.cosmeticsfair ul.item_list li .txt .icon.icon_online { background: #d61519; }
.cosmeticsfair ul.item_list li .txt .icon.icon_gentei { background: #009a5c; }

/* ボタン：詳細・ご購入 */
.cosmeticsfair ul.item_list li .btn {
  width: 90%;
  margin: 0 auto;
  border-radius: 3px;
}

.cosmeticsfair ul.item_list li .btn a {
  height: 60px;
  border-radius: 3px;
  background: #e96a6f;
}

/* 共通：コンテンツ下部ボタン（ > #btn_basic）
================================================== */
/* ボタン：●●をもっと見る */
.cosmeticsfair .btn_item_search {
  width: 90%;
  margin: 0 auto;
  padding: 20px 0 0 0;
}

.cosmeticsfair .btn_item_search a {
  background: #983b32;
  border: 1px solid #983b32;
}

/* ボタン：リップをもっと見る */
.cosmeticsfair #new .btn_item_search a {
  background: #5b362c;
  border: 1px solid #5b362c;
}

/* ボタン：限定品をもっと見る */
.cosmeticsfair #kit .btn_item_search a {
  background: #303c4a;
  border: 1px solid #303c4a;
}

/* ボタン：人気ブランドコスメのご購入特典をもっと見る */
.cosmeticsfair #novelty .btn_item_search a {
  background: #ba4639;
  border: 1px solid #ba4639;
}

.cosmeticsfair #novelty .btn_item_search a span {
  text-align: center;
}

/* 新作コスメ（#new）
================================================== */
.cosmeticsfair #new {
  padding: 40px 3% 50px 3%;
  background:
    url("/contents/proper/beauty/event/cosmeticsfair/2025autumn/img/bg_img01.png") -22% -5px / 40% auto no-repeat,
    url("/contents/proper/beauty/event/cosmeticsfair/2025autumn/img/bg_img02.png") 140% -3% / 48% auto no-repeat,
    url("/contents/proper/beauty/event/cosmeticsfair/2025autumn/img/new_bg.jpg") center -10% / 100% auto repeat;
}

/* 限定キット（#kit）
================================================== */
.cosmeticsfair #kit {
  padding: 40px 3% 50px 3%;
  background:
    url("/contents/proper/beauty/event/cosmeticsfair/2025autumn/img/bg_img03.png") -28% 6px / 40% auto no-repeat,
    url("/contents/proper/beauty/event/cosmeticsfair/2025autumn/img/bg_img04.png") 120% -20px / 43% auto no-repeat,
    url("/contents/proper/beauty/event/cosmeticsfair/2025autumn/img/kit_bg.jpg") top center / 100% auto repeat;
}

/* ノベルティー（#novelty）
================================================== */
.cosmeticsfair #novelty {
  position: relative;
  padding: 40px 3% 50px 3%;
  background:
    url("/contents/proper/beauty/event/cosmeticsfair/2025autumn/img/bg_img06.png") 10% 22% / 10% auto no-repeat,
    url("/contents/proper/beauty/event/cosmeticsfair/2025autumn/img/bg_img05.png") 106% -2% / 20% auto no-repeat,
    url("/contents/proper/beauty/event/cosmeticsfair/2025autumn/img/novelty_bg.jpg") center top / 100% 100% repeat;
  overflow: hidden;
}

.cosmeticsfair #novelty::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -14%;
  width: 34%;
  height: auto;
  aspect-ratio: 330 / 307;
  transform: rotate(-20deg);
  background: url("/contents/proper/beauty/event/cosmeticsfair/2025autumn/img/bg_img01.png") 0 0 / contain no-repeat;
}

/* リスト */
.cosmeticsfair #novelty ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.cosmeticsfair #novelty ul li {
  width: calc((100% - (5px * 1)) / 2);
}

.cosmeticsfair #novelty ul li a {
  display: block;
}

.cosmeticsfair #novelty ul li a .logo {
  border: 1px solid #eee;
}

.cosmeticsfair #novelty ul li a .logo img {
  width: 100%;
  height: auto;
}

.cosmeticsfair #novelty ul li a .shop {
  display: block;
  font-size: 1.2rem;
  line-height: 20px;
  text-align: center;
  padding: 3px 0 0 0;
}

/* fill_cover */
.cosmeticsfair #novelty .fill_cover {
  background-color: rgb(0, 0, 0, 0);
}

.cosmeticsfair #novelty .fill_cover .fill_cover_tx {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  aspect-ratio: 400 /240;
  margin: 0 0 23px 0;
  background-color: rgb(0, 0, 0, 0.6);
}

/* カタログ商品一覧ボタン（#catalog）
================================================== */
.cosmeticsfair #catalog {
  padding: 0 3%;
  padding-top: 40px;
}

/* ボタン */
.cosmeticsfair #catalog .btn_catalog {
  max-width: 400px;
  margin: 0 auto;
}

.cosmeticsfair #catalog .btn_catalog a {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 120px;
  padding: 3%;
  background: #fff;
  border: 1px solid #983b32;
  border-radius: 3px;
  box-shadow: 0px 2px 3px 0px rgba(61, 61, 61, 0.15);
}

.cosmeticsfair #catalog .btn_catalog a .img {
  aspect-ratio: 330 / 465;
  height: 100%;
}

.cosmeticsfair #catalog .btn_catalog a .img img {
  width: 100%;
  height: 100%;
}

.cosmeticsfair #catalog .btn_catalog a .txt {
  padding: 0 0 0 10px;
}

.cosmeticsfair #catalog .btn_catalog a .txt span.txt_sub {
  display: block;
  color: #000;
  font-size: 1.4rem;
  font-weight: bold;
}

.cosmeticsfair #catalog .btn_catalog a .txt span.txt_main {
  display: block;
  color: #983b32;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 4px 0 0 0;
}

.cosmeticsfair #catalog .btn_catalog a ::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 10px;
  height: 10px;
  border-right: solid 1px #222;
  border-bottom: solid 1px #222;
  transform: translateY(-50%) rotate(-45deg);
}

/* 新登場・注目ブランド（#brand)
================================================== */
.cosmeticsfair #brand {
  padding: 0 2%;
  padding-top: 40px;
}

/* リストボタン（ブランド） */
.cosmeticsfair #brand ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.cosmeticsfair #brand ul li {
  width: calc((100% - (5px * 1)) / 2);
}

.cosmeticsfair #brand ul li img {
  width: auto;
  height: 100%;
}

.cosmeticsfair #brand ul li a {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  line-height: 1.2;
  text-align: center;
  width: 100%;
  padding: 10px 20% 10px 3%;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #ccc;
  box-shadow: 0px 2px 3px 0px rgba(61, 61, 61, 0.15);
  overflow: hidden;
}

.cosmeticsfair #brand ul li a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 10px;
  height: 10px;
  border-right: solid 1px #111;
  border-bottom: solid 1px #111;
  transform: translateY(-50%) rotate(-45deg);
}

/* 公式サイト・SNS（#official）
================================================== */
#official_cosmeticsfair_wrap {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 10px;
  margin-top: 60px;
  margin-bottom: 60px;
}

#official_cosmeticsfair_wrap > .title {
  position: relative;
  font-size: 2.4rem;
  text-align: center;
  font-family: '游明朝', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'ＭＳ 明朝', serif;
  width: 100%;
  margin: 0 auto 20px;
}

#official_cosmeticsfair_wrap > .title span {
  display: inline-block;
  position: relative;
  z-index: 2;
  background: #fff;
  line-height: 1.4;
  padding: 0 1em;
}

#official_cosmeticsfair_wrap > .title::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 1px;
  background: #888;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

#official_cosmeticsfair_wrap > .lead_txt {
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: center;
}

/* リスト */
#official_cosmeticsfair_wrap ul {
  font-size: 1.4rem;
  line-height: 1.4;
  width: 100%;
  padding: 20px 0 0 0;
}

#official_cosmeticsfair_wrap ul li {
  position: relative;
  width: 100%;
  padding: 20px 10px 20px 110px;
}
#official_cosmeticsfair_wrap ul li:not(:first-of-type) { border-top: 1px solid #ccc; }

#official_cosmeticsfair_wrap ul li .head_name {
  padding: 0 0 5px 0;
}
#official_cosmeticsfair_wrap ul li.web .head_name { color: #134c91; }
#official_cosmeticsfair_wrap ul li.instagram .head_name { color: #cf2f93; }
#official_cosmeticsfair_wrap ul li.line .head_name { color: #07b53b; }

#official_cosmeticsfair_wrap ul li .name {
  font-weight: bold;
  padding: 0 0 10px 0;
}

#official_cosmeticsfair_wrap ul li .img {
  position: absolute;
  top: 20px;
  left: 10px;
  width: 80px;
}

#official_cosmeticsfair_wrap ul li .img img {
  width: 100%;
  height: auto;
}

#official_cosmeticsfair_wrap ul li .txt > br {
  display: none;
}

/* ボタン：詳細はこちら */
#official_cosmeticsfair_wrap ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0a0a0a;
  padding: 10px;
  margin: 10px 0 0 0;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #ccc;
}

#official_cosmeticsfair_wrap ul li a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 6px;
  height: 6px;
  border-right: solid 1px #111;
  border-bottom: solid 1px #111;
  transform: translateY(-50%) rotate(-45deg);
}


/* 商品一覧ページ（.cosmeticsfair_itemlist）
================================================== */
.cosmeticsfair_itemlist .head {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 130px;
  padding: 10px 0;
  border-top: 2px solid #983b32;
  border-bottom: 2px solid #983b32;
}

.cosmeticsfair_itemlist .head .img {
  aspect-ratio: 330 / 465;
  height: 100%;
}

.cosmeticsfair_itemlist .head .img img {
  width: 100%;
  height: 100%;
}

.cosmeticsfair_itemlist .head .txt {
  padding: 0 0 0 10px;
}

.cosmeticsfair_itemlist .head .txt span.txt_sub {
  display: block;
  color: #000;
  font-size: 1.4rem;
  font-weight: bold;
}

.cosmeticsfair_itemlist .head .txt span.txt_main {
  display: block;
  color: #983b32;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 4px 0 0 0;
}

.cosmeticsfair_itemlist > .desc {
  font-size: 1.4rem;
  text-align: center;
  margin: 10px 0 0 0;
}

/* ボタン：トップに戻る
================================================== */
.cosmeticsfair_itemlist #around_button_wrap .btn_top a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #fff;
  width: 90%;
  max-width: 400px;
  height: 80px;
  margin: 0 auto;
  background: #983b32;
  border: 1px solid #983b32;
  border-radius: 60px;
  box-shadow: 0px 2px 3px 0px rgba(61, 61, 61, 0.15);
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: center;
}

.cosmeticsfair_itemlist #around_button_wrap .btn_top a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
  transform: translateY(-50%) rotate(-45deg);
}

.cosmeticsfair_itemlist #around_button_wrap .btn_top a > span > span {
  font-weight: bold;
}